@charset "UTF-8";
#info, #office, #history { padding: 0 5vw 5vw;}#company{ background-color:#e0e0e0;}#company h2 { font-size: 300%;}
p.ja-ttl { font-size: 160%;}
#philosophy-box {background-color: #fafafa;}#philosophy-box header{ height: 100%; transition: .6s ease-out; transform: translateY(40px); opacity: 0;}#philosophy-box header.delighter.started { transform: translateY(0); opacity: 1;}
#philosophy-box li {font-size: 1.1rem;	margin-bottom:1rem;}
.com-title { font-size: 180%;}#info-text,#office-text ,#history-text { border: solid 1px rgba(51,51,51,.4); background-color: rgba(51,51,51,.07);}
.info-area dt {color:#fff;	background-color:#0d6fb8;}.info-area dd {background-color: #fff;}
.office-area dl a { color: #0d6fb8}
.info-area dl:nth-child(even){ opacity: 0; animation-name: fadeinLeft; animation-duration: 1.5s; animation-timing-function: ease-out; animation-fill-mode: forwards;}.info-area dl:nth-child(odd){ opacity: 0; animation-name: fadeinRight; animation-duration: 1.5s; animation-timing-function: ease-out; animation-fill-mode: forwards;}@media (min-width: 768px){ #info-text, #office-text, #history-text { padding: 2.5vw; width: 45vw; min-width: 500px; } .com-header, #info-text, #office-text, #history-text { margin-bottom: 3vw; }}
@media (min-width: 1300px){ #info, #office, #history { font-size: 1.1rem; }}
@media (max-width: 767px){ #info-text, #office-text, #history-text { padding: 2.5vw; } .com-header, #info-text, #office-text, #history-text { margin-bottom: 4vw; }}@media (min-width: 768px){#philosophy-box {position: absolute;	top:0;	right: 0;	z-index: 100;	background-color: #fafafa;}
#philosophy-img {position: relative;	top:7vw;	left: 0;	z-index: 90;}}