@charset "utf-8";

/* ====================================================================================================
   基本設定
   ---------------------------------------------------------------------------------------------------- */

/* フォント */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');

/* ベース */
body                     { background:url(https://the-sando.jp/img/common/etc/bg.jpg) repeat fixed 0 0 #393939; color:#fff; -webkit-background-size:100% auto; background-size:100% auto; overflow-x:hidden; }
#wrap                    { overflow:hidden; width:100%; margin:0; }
.container               { max-width:1500px; position:relative; width:90%; margin:0px auto; }
.container.size_l        { max-width:1250px; }
.container.size_m        { max-width:1000px; }
.container.size_s        { max-width: 750px; }
*                        { -webkit-box-sizing:border-box; box-sizing:border-box; }

/* 導入カバー：色指定 */
#cover,
#cover:after             { background:url(https://the-sando.jp/img/common/etc/bg.jpg) repeat center center #393939; -webkit-background-size:100% auto; background-size:100% auto; }
#cover:after             { -webkit-background-size:900% auto; background-size:900% auto; }
#cover:before            { border:3px solid rgba(255,255,255,0.05); }
#cover .spinner          { color:#E9483C; }
#cover .spinner:before,
#cover .spinner:after    { background:#222; }

/* 導入カバー:設定 */
#cover                   { position:fixed; top:0; left:0; z-index:96; width:100%; height:100%; }
#loader                  { position:absolute; top:0; right:0; bottom:0; left:0; z-index:100; margin:auto; width:100px; height:100px; display:block; animation:load1 0.8s infinite linear; border-radius:50%; overflow:hidden; }
#cover:before            { position:absolute; top:0; right:0; bottom:0; left:0; z-index:102; margin:auto; width: 80px; height: 80px; display:block; border-radius:50%; }
#cover:after             { position:absolute; top:0; right:0; bottom:0; left:0; z-index:104; margin:auto; width: 94px; height: 94px; display:block; border-radius:50%; }
#cover .spinner          { position:relative; width:100px; height:100px; margin:auto; font-size:11px; text-indent:-99999em; box-shadow:inset 0 0 0 1em; -webkit-transform:translateZ(0); transform:translateZ(0); border-radius:50%; }
#cover:before,
#cover:after,
#cover .spinner:before,
#cover .spinner:after    { position:absolute; content:""; border-radius:50%;  }
#cover .spinner:before   { width:52px; height:102px; border-radius:102px 0 0 102px; top:-1px; left:-1px; -webkit-transform-origin:52px 51px; transform-origin:52px 51px; -webkit-animation:load2 2s infinite ease 1.5s; animation:load2 2s infinite ease 1.5s; }
#cover .spinner:after    { width:52px; height:102px; border-radius:0 102px 102px 0; top:-1px; left:51px; -webkit-transform-origin: 0px 51px; transform-origin: 0px 51px; -webkit-animation:load2 2s infinite ease; animation:load2 2s infinite ease; }

@-webkit-keyframes load1 {
 0%    { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
 100%  { -webkit-transform:rotate(360deg); transform:rotate(360deg); }
}

@keyframes load1 {
 0%    { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
 100%  { -webkit-transform:rotate(360deg); transform:rotate(360deg); }
}

@-webkit-keyframes load2 {
  0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes load2 {
  0%   { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}


/* ====================================================================================================
   アニメーションチェック
   ---------------------------------------------------------------------------------------------------- */

#home #check_01                              { position:absolute; top:auto; bottom:0; left:0; width:30px; height:30px; }
#home #check_02,                           
#home #check_03,
#home #check_04,
#home #check_05                              { position:absolute; top:-50vh; left:0; width:10px; height:10px; }


/* ====================================================================================================
   ヘッタ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
header                                       { position:absolute; top:auto; bottom:0; left:0; z-index:10; width:100%; height:50px; margin:0; background:rgba(0,0,0,0.3); }
header h1                                    { position:absolute; top:0; left:0; z-index:2; width:185px; height:50px; -webkit-transition:all 0.4s ease; transition:all 0.4s ease; }
header h1 img                                { width:100%; height:100%; }
header h2                                    { display:none; }
header.on                                    { position:fixed; top:0; bottom:auto; }

/* ホーム：ナビ */
header nav                                   { position:absolute; top:0; right:0; bottom:0; z-index:4; width:auto; height:100%; margin:auto 0; }
header nav a                                 { display: inline-block; font-size:14px; line-height:50px; margin-right:20px; color:#fff !important; font-family: 'Oswald', sans-serif; }
header nav a:hover                           { color:#e9483c !important; }
header nav a:last-child                      { margin-right:50px; }

/* 文字設定 */
p.jp                                         { color:#fff; }
p.en,
.en p                                        { font-family:"Times New Roman", Times, serif; color:#ddd; font-size:11px; line-height:22px; letter-spacing:0.08em; }


/* ====================================================================================================
   メインビジュアル
   ---------------------------------------------------------------------------------------------------- */

/* メインビジュアル */
#box_mv                                      { position:relative; width:100%; height:100vh; background:rgba(0,0,0,0.3); overflow:hidden; } 

/* ロゴテキスト */
#box_mv .hgroup                              { position:absolute; top:0; right:0; bottom:0; left:0; width:400px; height:200px; margin:auto; display:flex; justify-content:center; align-items:center; }
#box_mv .hgroup h1,
#box_mv .hgroup h2,
#box_mv .hgroup h3                           { position:absolute; top:0; right:0; bottom:0; left:0; width:400px; height:200px; margin:auto; opacity:0; filter:alpha(opacity=0); }

#box_mv .hgroup h1                           { -webkit-transition:all 0.6s 0.25s ease; transition:all 0.6s 0.25s ease; }
#box_mv .hgroup h2                           { -webkit-transition:all 0.6s 0.50s ease; transition:all 0.6s 0.50s ease; } 
#box_mv .hgroup h3                           { -webkit-transition:all 0.6s 0.75s ease; transition:all 0.6s 0.75s ease; } 

#box_mv .hgroup h1.on,
#box_mv .hgroup h2.on,
#box_mv .hgroup h3.on                        { opacity:1; filter:alpha(opacity=100); }

/* 背景ズーム */ 
.slider                                      { position:absolute; top:0; right:0; bottom:0; left:0; z-index:-2; width:100%; height:100%; margin:auto; }
.slider div                                  { position:absolute; top:0; left: 0; z-index:10; width:100%; height:100%; transform:scale(1.1); background-position:center center; background-repeat:no-repeat; background-size:cover; -webkit-animation:anime 24s 0s infinite; animation:anime 24s 0s infinite; opacity:0; }
.slider div:nth-of-type(2)                   { -webkit-animation-delay: 6s; animation-delay: 6s; }
.slider div:nth-of-type(3)                   { -webkit-animation-delay:12s; animation-delay:12s; }
.slider div:nth-of-type(4)                   { -webkit-animation-delay:18s; animation-delay:18s; }

@keyframes anime  {
0%   { opacity:0; }
8%   { opacity:1; }
17%  { opacity:1; }
35%  { opacity:0; transform:scale(1); z-index:9; }
100% { opacity:0 }
}

@-webkit-keyframes anime {
0%   { opacity:0; }
8%   { opacity:1; }
17%  { opacity:1; }
35%  { opacity:0; transform:scale(1); z-index:9; }
100% { opacity:0 }
}


/* ====================================================================================================
   タイトルアニメーション
   ---------------------------------------------------------------------------------------------------- */

/* タイトル */
#box_brand h1,
#box_about h1,
#box_contact h1                            { position:relative; width:200px; height:50px; margin:0 auto 50px auto; display:block; overflow:hidden; }
#box_brand h1 img,
#box_about h1 img,
#box_contact h1 img                        { width:200px; height:50px; }

/* アニメーション設定：タイトル */ 
#box_brand h1 img,
#box_about h1 img,
#box_contact h1 img                        { opacity:0; filter:alpha(opacity=0); -webkit-transition:all 0.5s 0.5s ease; transition:all 0.5s 0.5s ease; }
#box_brand.on h1 img,
#box_about.on h1 img,
#box_contact.on h1 img                     { opacity:1; filter:alpha(opacity=100);}

#box_brand h1:before,
#box_about h1:before,
#box_contact h1:before                     { content:""; position:absolute; top:0; left:0; z-index:2; width:0; height:100%; background:#e9483c; display:block;}
#box_brand.on h1:before,
#box_about.on h1:before,
#box_contact.on h1:before                  { -webkit-animation:anime_ttl 1s 1 ease; animation:anime_ttl 1s 1 ease; }

@keyframes anime_ttl {
0%   { width:0; }
50%  { width:100%; left:0; }
100% { width:100%; left:100%; }
}

@-webkit-keyframes anime_ttl {
0%   { width:0; }
50%  { width:100%; left:0; }
100% { width:100%; left:100%; }
}


/* ====================================================================================================
   コンセプト
   ---------------------------------------------------------------------------------------------------- */

#box_concept                               { position:relative; padding:50px 0 60px 0; }
#box_concept .hgroup                       { display:block; width:600px; margin:0 auto; }
#box_concept .hgroup h1                    { width:600px; height:100px; margin-bottom:20px; }
#box_concept .hgroup h2                    { font-size:14px; line-height:34px; letter-spacing:0.15em; font-weight:500; text-align:center; color:#fff; }
#box_concept .hgroup h2 span               { position:relative; }
#box_concept .hgroup h2 span:before        { content:""; position:absolute; bottom:-5px; left:0; z-index:2; width:0%; height:1px; background:#e9483c; }

/* アニメーション設定 */ 
#box_concept .hgroup h1,
#box_concept .hgroup h2                    { opacity:0; filter:alpha(opacity=0); }
#box_concept.on .hgroup h1,
#box_concept.on .hgroup h2                 { opacity:1; filter:alpha(opacity=100); }
#box_concept.on .hgroup h2 span:before     { width:99%; }

#box_concept .hgroup h1                    { -webkit-transition:all 0.6s 0.25s ease; transition:all 0.6s 0.25s ease; }
#box_concept .hgroup h2                    { -webkit-transition:all 0.6s 0.50s ease; transition:all 0.6s 0.50s ease; }
#box_concept .hgroup h2 span:before        { -webkit-transition:all 0.6s 1.25s ease; transition:all 0.6s 1.25s ease; }


/* ====================================================================================================
   ブランド
   ---------------------------------------------------------------------------------------------------- */

#box_brand                                 { position:relative; padding:100px 0 70px 0; background:rgba(0,0,0,0.5) }
#box_brand .container                      { width:800px; margin:-1px auto 0 auto; padding:50px 0; border-top:1px solid #555; border-bottom:1px solid #555; }
#box_brand .container .col_left            { width:250px; margin-right:50px; }
#box_brand .container .col_right           { width:calc(100% - 300px); margin-top:-5px; }
#box_brand .container .col_left img        { width:250px; height:250px; }
#box_brand .container .btn                 { width:200px; margin:25px 0; }

/* アニメーション設定 */ 
#box_brand article.container               { opacity:0; filter:alpha(opacity=0); -webkit-transition:all 0.5s 1.0s ease; transition:all 0.5s 1.0s ease; }
#box_brand.on article.container            { opacity:1; filter:alpha(opacity=100); }


/* ====================================================================================================
   概要
   ---------------------------------------------------------------------------------------------------- */

#box_about                                 { position:relative; padding:100px 0 70px 0; }
#box_about .container                      { width:640px; padding:10px 0; }

#box_about dl                              { font-size:13px; line-height:30px; margin-bottom:30px; color:#fff; }
#box_about dl dt                           { width:70px; -webkit-display:flex; display:-ms-flexbox; display:flex; -webkit-justify-content:space-between; justify-content:space-between; }
#box_about dl dd                           { margin:-30px 0 0 0; padding:0 0 0 100px; letter-spacing:0.05em; }

/* アニメーション設定 */ 
#box_about article.container               { opacity:0; filter:alpha(opacity=0); -webkit-transition:all 0.5s 1.0s ease; transition:all 0.5s 1.0s ease; }
#box_about.on article.container            { opacity:1; filter:alpha(opacity=100); }


/* ===================================================================================================
   お問い合わせ／フォーム
   ---------------------------------------------------------------------------------------------------- */

/* リード */
#box_contact                               { position:relative; padding:100px 0 70px 0; background:rgba(0,0,0,0.7); overflow:hidden; }
#box_contact .container                    { width:700px; padding:0; }
#box_contact p                             { text-align:center; margin-bottom:35px; }
#box_contact:before                        { content:""; display:block; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-2; width:100%; height:100%; margin:auto; background:url(../img/mv/bg/02.jpg) no-repeat fixed center center; -webkit-background-size:cover; background-size:cover; }

/* アニメーション設定 */ 
#box_contact article.container             { opacity:0; filter:alpha(opacity=0); -webkit-transition:all 0.5s 1.0s ease; transition:all 0.5s 1.0s ease; }
#box_contact.on article.container          { opacity:1; filter:alpha(opacity=100); }

/* 必須 */
form span.required                         { position:absolute; top:25px; right:0px; z-index:2; width:40px; height:20px; font-size:12px; line-height:20px; font-weight:bold; text-align:center; color:#fff; background: #ea6ea6; -webkit-border-radius:2px; border-radius:2px; }
form span.option                           { position:absolute; top:25px; right:0px; z-index:2; width:40px; height:20px; font-size:12px; line-height:20px; font-weight:bold; text-align:center; color:#fff; background: #1da1f2; -webkit-border-radius:2px; border-radius:2px; }

/* フォーム:パーツ */
form label                                 { position:absolute; top:0; left:15px; font-size:15px; line-height:50px; font-weight:bold; color:#fff; margin:0; display:block; }
form label span                            { margin-left:.5em; font-size:11px; color:#999; }
form label span.required,
form label span.option                     { top:0; right:-5px; margin-left:.5em; padding:0 5px; background-color:#fd4949; color:#fff; font-size:12px; border-radius:3px; }
form select                                { padding:8px 38px 8px 8px !important; background:url(../../img/common/etc/select.svg) no-repeat right center transparent; cursor:pointer; -webkit-background-size:25px 60px; background-size:25px 60px; }
form select,
form input,
form textarea                              { -webkit-appearance:none; appearance:none; -webkit-border-radius:0; border-radius:0; margin:0 5px 15px 0; padding:8px; background-color:transparent; border:2px solid rgba(255,255,255,0.8); color:#fff; font-size:16px; font-weight:500; }
form input[type="submit"], 
form input[type="button"],
button.btn                                 { -webkit-appearance:none; appearance:none; -webkit-border-radius:0; border-radius:0; min-width:300px; background-color:#e9483c; font-weight:normal; margin:25px auto; padding:6px 35px; display:block; border:none; font-size:14px; font-weight:bold; letter-spacing:0.05em; color:#000; cursor:pointer; transition:all .2s; -webkit-border-radius:2px; border-radius:2px; font-family: 'Oswald', sans-serif; }
form input[type="submit"]:hover, 
form input[type="button"]:hover,
button.btn:hover                           { background-color:#ff6f64; }

form .mustitem                             { background:#ffe2e1; border-color:#ff0000; }
form ._100                                 { width:100%; }
form ._m                                   { width:300px; }
form ._s                                   { width:150px; }
form .margin_no                            { margin:0; }

/* 余白の調整 */
form .po_re                                { position:relative; }
form .po_re select,
form .po_re input,
form .po_re textarea                       { padding:12px 12px 12px 220px; }

/* 見本文字の色 */
form input::placeholder                    { color:#888; }

/* フォーム:フォーカス設定 */
form select:focus,
form input[type="text"]:focus,
form input[type="email"]:focus,
textarea:focus                             { box-shadow: 0 0 6px #111; border-color:#e9483c; }

/* フォーム:エラー設定 */
form .error                                { position:relative; display:block; margin:0 -5px 15px 5px; padding:10px 20px 10px 10px; background-color:#f66; border:1px solid #f00; border-radius:5px; color:#fff; }
form .error:after                          { content:""; position:absolute; top:-16px;left:14px; border:solid transparent; }
form .error:before                         { content:""; position:absolute; top:-17px;left:15px; border:solid transparent; }
form .error:after                          { margin-left:1px; border-bottom-color:#f66; border-width:8px;}
form .error:before                         { border-bottom-color:#f00; border-width:8px; }

/* 画像認証 */
.imgchange                                 { width:100px; border:1px solid #ddd; padding:8px 3px 7px 3px; margin:0px 0px 0px 5px; color:#111; cursor:pointer; text-align:center; font-size:13px; background-color:#fff; }

/* テーブル */
form table                                 { border-top:1px solid #ddd;  width:100%; margin:1em 0 1.5em; line-height:1.5em; border-collapse:collapse; border-spacing:0; }
form table tr:nth-child(odd)               { background:rgba(0,0,0,0.02); }
form table table tr:nth-child(odd)         { background:none; }
form table th                              { border-bottom:1px solid #ddd; text-align:left; }
form table td                              { border-bottom:1px solid #ddd; }
form table table                           { border:none; margin:0; }
form table table th ,form table table td   { border:none; padding:5px; }
form table th                              { position:relative; padding:10px 50px 10px 15px; word-wrap:break-word; }
form table td                              { padding:10px 10px; }
form table th span.required,
form table th span.option                  { top:0; bottom:0; right:10px; margin:auto 0; }

/* 確認画面 */
form#form_eunew                            { font-size:108%; }


/* ====================================================================================================
   フッタ
   ---------------------------------------------------------------------------------------------------- */

/* 基本設定 */
footer                                     { padding:50px 0 0 0; }
footer .btns                               { width:740px; margin:15px auto 50px auto; }
footer .btns a                             { width:352px; height:92px; border:1px solid #e9483c; }
footer address                             { width:800px; margin:0 auto; font-style:normal; color:#fff; }
footer address h1                          { width:185px; height:50px; margin:0 auto 5px auto; display:block; }
footer address h1 img                      { width:100%; height:100%; }
footer address p                           { line-height:20px !important; text-align:center; }
footer .ft_bottom                          { width:100%; height:80px; margin-top:25px; padding:25px 0 35px 0; background:rgba(0,0,0,0.5); color:#888; font-size:10px; line-height:20px; letter-spacing:0.1em; text-align:center; font-family:"Times New Roman", Times, serif; }

/* ページ先頭 */
#page-top                                  { position:fixed; bottom:-80px; right:13px; z-index:1002; width:80px; height:80px; }
#page-top a                                { width:100%; height:100%; background:url(https://the-sando.jp/img/common/etc/up.svg) no-repeat 50% 50%; display:block; text-indent:150%; white-space:nowrap; overflow:hidden; display:block; -webkit-background-size:20px; background-size:20px; }
#page-top a:hover                          { background-position:50% 35%; }
#page-top a:before                         { content:""; position:absolute; top:25px; right:0; left:0; z-index:2; width:14px; height:2px; background:#e9483c; margin:0px auto 0px auto; -webkit-transition:all 0.2s ease; transition:all 0.2s ease; }
#page-top a:hover:before                   { width:18px; }


/* ====================================================================================================
   タブレット対応
   ---------------------------------------------------------------------------------------------------- */

@media screen and (max-width:1000px){
.container                     { width:88% !important; }
}


/* ====================================================================================================
   スマホ対応
   ---------------------------------------------------------------------------------------------------- */

@media screen and (max-width:760px){
	
/* 導入カバー:設定 */
#loader                  { width:50px; height:50px; }
#cover:before            { width:40px; height:40px; }
#cover:after             { width:47px; height:47px; }
#cover .spinner          { width:50px; height:50px; box-shadow:inset 0 0 0 0.5em; }
#cover .spinner:before   { width:26px; height:51px; border-radius:51px 0 0 51px; top:-0.5px; left:-0.5px; -webkit-transform-origin:26px 25.5px; transform-origin:26px 25.5px; }
#cover .spinner:after    { width:26px; height:51px; border-radius:0 51px 51px 0; top:-0.5px; left:25.5px; -webkit-transform-origin: 0px 25.5px; transform-origin: 0px 25.5px; }

/* ヘッタ */
header                         { height:41px; }
header h1                      { width:100px !important; height:27px !important; margin:2px 0 7px -10px; }
header nav a                   { font-size:12px; line-height:41px !important; margin-right:12px !important; }
header nav a:hover             { color:#e9483c !important; }
header nav a:last-child        { margin-right:20px !important; }
	
/* カラム設定 */
.container                     { width:86% !important; }
.container .col_left,
.container .col_right          { width:100% !important; float:none; }
.container .col_left           { margin-bottom:40px; }
.container .col_left.spis .btn { margin-top:-30px !important; }

/* メインビジュアル */
#box_mv .hgroup,
#box_mv .hgroup h1,
#box_mv .hgroup h2,
#box_mv .hgroup h3             { width:260px !important; height:130px !important; }

/* タイトル */
#box_brand h1,
#box_about h1,
#box_contact h1                { width:150px !important; height:38px !important; margin:0 auto 30px auto !important; }
#box_brand h1 img,
#box_about h1 img,
#box_contact h1 img            { width:150px !important; height:38px !important; }

/* コンセプト */
#box_concept .hgroup           { width:86% !important; margin:0 auto; }
#box_concept .hgroup h1        { width:280px; height:45px; margin:0 auto 15px auto; }
#box_concept .hgroup h2        { font-size:13px !important; }
#box_concept .hgroup h2 br     { display:none; }

/* 概要 */
#box_about dl                  { font-size:13px !important; line-height:24px !important; margin-bottom:24px !important; }
#box_about dl dt               { width:55px !important; }
#box_about dl dd               { margin:-24px 0 0 0 !important; padding:0 0 0 75px !important; }

/* セクション */
#box_concept                   { padding:40px 0 40px 0 !important; }
#box_brand,
#box_about,
#box_contact                   { padding:80px 0 60px 0 !important; }

/* フォーム */
#box_contact:before            { background-attachment:inherit; }
#box_contact p                 { font-size:13px; text-align:left; }
#box_contact p br              { display:none; }
form label                     { position:relative; left:0; font-size:13px; line-height:40px; margin:-10px 0 0 0; }
form .po_re select, 
form .po_re input, 
form .po_re textarea           { padding:12px !important; }
form input[type="submit"]      { width:280px !important; min-width:280px !important;  }

/* フッタ */
footer p a,
#box_about p a                 { color:#ddd; }
footer .btns                   { width:284px !important; display:block; }
footer .btns a                 { width:284px !important; height:74px !important; display:block; border:1px solid #e9483c; margin-bottom:15px; }
#page-top                      { right:0; width:50px; height:80px; margin-bottom:-15px; }
}