@charset 'utf-8';
/*
Theme Name : white-compass
*/
/* ----- reset ----- */
*,*::before,*::after { box-sizing:border-box; }
ul[class],ol[class] { padding:0; }
body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd { margin:0; position:relative; }
body { min-height:100vh; scroll-behavior:smooth; text-rendering:optimizeSpeed; line-height:1.5; }
ul[class],ol[class] { list-style:none; }
a:not([class]) { text-decoration-skip-ink:auto; }
img { max-width:100%; height:auto; display:block; }
article > * + * { margin-bottom:1em; }
input,button,textarea,select { font:inherit; }
address { text-align:center; font-style:normal; }
iframe { margin:0 auto; }
@media (prefers-reduced-motion: reduce) {
 * { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
/* ----- base layout ----- */
body { color:#222; font:normal 400 16px/1.8 ‘Josefin Slab’, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
a { color:#000; text-decoration:none; cursor:pointer; }
nav a:hover { color:#666; }
th, td { padding:.8rem; min-width:5.8em; text-align:left; border-top:1px solid #cecece; }
h1, h2, h3, #carchBox, .contactBtn { font-weight:normal; font-family:'Noto Serif JP',serif; }
article, #mv, main nav.btn { margin-bottom:6em; }

h2 { display:flex;  align-items:center; justify-content:center; height:140px; 
background:url(https://white-compass.co.jp/img/mark_WhiteCompass.svg) no-repeat center center; 
/*background:url(/img/illust_hichihou.svg) no-repeat center center; */
}
h2 span { display:block; margin:0; width:100%; color:#e15433; font-size:200%; }
h3 b { display:flex; justify-content:center; }
h3 b::before, h3 b::after {
    width: 1em; height: 1px; content: "";
    display: block; align-self: center;
    margin: 0.5em;  background-color: #222;}

main .contents { max-width:1200px; }
.contents { margin:0 auto; text-align:center; }
/* btn */
main .contactBtn a { display:block; position:relative; margin:0 auto; padding:.6em; width:90%; max-width:1000px; color:#e15433!important; letter-spacing:.1em; text-align:center; font-family:‘Josefin Slab’,serif; font-size:120%; border:1px solid #e15433; }
main .contactBtn a:hover { color:#fff!important; background-color:#e15433; }

/*#header*/
#header { position:fixed; width:100%; height:60px; background:#fff; z-index:100; }
#header .contents { display:flex; align-items:center; height:60px; width:100%; max-width:2000px; }
#logo { display:flex; align-content:center; justify-content:center; margin:0; padding:20px; height:auto; width:280px; position:absolute; top:0; left:0;/* background:#210803; */}
#logo img { filter: drop-shadow(0px 0px 3px white); }
#header .contents nav { margin-left:auto; }
#header .contactBtn a { padding:1em 1.5em; color:#e15433; }

#mv { position:relative; height:calc(100vh - 60px); max-height:1600px; width:calc(100% - 200px); max-width:calc(2000px - 200px); margin-left:200px; background:url(/img/sec_stage.jpg) no-repeat center center; background-size:cover; }
#mv:after { height:50%; width:100%; position:absolute; bottom:-30px; left:-200px; content:""; z-index:-2; background:#e15433; }
#mv:before {
height:50%; width:100vw; 
filter:opacity(0.1); background:url(/img/mark_WhiteCompass_bk.svg) no-repeat 0 center; background-size:600px; 
position:absolute; bottom:-30px; left:-400px; content:""; }
#carchBox { display:block; position:absolute; bottom:12%; left:-10%; font-size:120px; color:#fff; text-shadow:0 0 20px #e15433; }
#mv p { position:absolute; bottom:6%; left:-8%; line-height:1.8; font-size:100%; color:#fff; }
#mv br.sp { display:none; }
#philosophySec strong { font-size:120%; font-family:'Noto Serif JP',serif; }
#companySec table { margin:0 auto; max-width:800px; width:90%; }
#companySec aside { margin-top:1em; }

/*#footer*/
#footer { background:#aca393; }
#footer small { display:block; text-align:center; font-size:88%; color:#fff; }

/*====================ブレイクポイント====================*/
@media only screen and (max-width: 1024px) {
 #carchBox { left:-20%; }
}
@media only screen and (min-width:769px) and (max-width:960px) {
#carchBox { font-size:90px; }
}
@media only screen and (max-width:768px) {
br { display:none; }
p { padding:0 1em; }
article, main nav.btn { margin-bottom:3em; }
#logo { padding:10px; width:auto; }
#logo img { width: auto;  height: 40px; }
#mv { width:100%; height:72vh; margin:0; text-align:center; }
#mv:before { display:none; height:0; }
#mv:after { bottom:10%; left:0; }
#carchBox { width:100%; left:0; font-size:40px; }
#mv p { width:100%; bottom:2%; left:0%; line-height:1.6; font-size:90%;  }
#mv br { display:block; }
 h2 span { font-size:120%; }
}

@media only screen and (max-width:420px) {
 #mv:before, #mv:after { height:0; }
#carchBox { bottom:19%; }
#mv br.sp { display:block; }
}