@charset "utf-8";

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

body                                 { margin:0; padding:0; color:#333; font-size:16px; line-height:2; text-align:center; }
*                                    { -webkit-box-sizing:border-box; box-sizing:border-box; }
p,h1,h2,h3,h4,h5,h6                  { margin-top:0; }
img                                  { vertical-align:top; }
a img:hover                          { opacity:0.6; }
#wrap                                { clear:both; }
.pc                                  { display:block !important; }
.sm                                  { display:none !important; }


/* ====================================================================================================
   ローディング
   ---------------------------------------------------------------------------------------------------- */

#cover                               { position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; background:#f5f6f7; }
#cover img                           { position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; margin:auto; width:100px; height:100px; display:block; }


/* ====================================================================================================
   背景設定
   ---------------------------------------------------------------------------------------------------- */

.bg_01                               { background-image:url("../img/mv/03s.jpg"); }
.bg_02                               { background-image:url("../img/mv/09s.jpg"); }
.bg_03                               { background-image:url("../img/mv/05s.jpg"); }

.fixed_right_bg                      { min-height:100vh; background-attachment:fixed; background-size:cover; background-position:top right; }
.fixed_left_bg                       { min-height:100vh; background-attachment:fixed; background-size:cover; background-position:top left; }
.scroll_bg                           { background-position:top right; background-size:contain; background-repeat:no-repeat; }

.bg_01new:before,
.bg_02new:before,
.bg_03new:before                     { content:""; display:block; position:fixed; top:0; right:0; z-index:-2; width:100%; height:100vh; background-size:cover; }
.bg_01new:before                     { background:url("../img/mv/03s.jpg") top right no-repeat; }
.bg_02new:before                     { background:url("../img/mv/09s.jpg") top left no-repeat; }
.bg_03new:before                     { background:url("../img/mv/05s.jpg") top right no-repeat; }


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

/* ロゴ */
header h1                            { position:fixed; top:40px; left:40px; z-index:10; width:100px; height:100px; user-select:none; -webkit-transition: all .3s ease; transition: all .3s ease; }
header h1 img                        { width:100%; height:100%; }

/* SNSアイコン */
#sns_icon                            { position:fixed; top:120px; right:60px; z-index:1010; width:40px; height:40px; display:block; -webkit-transition: all .3s ease; transition: all .3s ease; }

/* ナビ */
#nav .btn                            { position:fixed; top:30px; right:30px; z-index:1010; width:100px; height:100px; display:block; -webkit-transition: all .3s ease; transition: all .3s ease; }
#nav .btn div                        { position:relative; width:100%; height:100%; display:block; cursor:pointer; }
#nav .btn span:nth-child(1),
#nav .btn span:nth-child(2),
#nav .btn span:nth-child(3)          { position:absolute; top:50%; left:50%; z-index:4; display:block; width:36px; height:2px; background:#333; border-radius:2px; -webkit-transition:all 0.2s ease 0.5s; transition:all 0.2s ease; -webkit-border-radius:1px; border-radius:1px; }
#nav .btn span:nth-child(1)          { margin:-14px 0 0 -18px; }
#nav .btn span:nth-child(2)          { margin: -1px 0 0 -18px; }
#nav .btn span:nth-child(3)          { margin: 12px 0 0 -18px; }
#nav .btn:hover span:nth-child(2)    { margin: -1px 0 0  -6px; width:24px; }
#nav .btn:hover span:nth-child(3)    { margin: 12px 0 0   6px; width:12px; }

/* ナビ.on */
#nav.on .btn span:nth-child(1),
#nav.on .btn span:nth-child(3)       { width:36px; background:#f9c; }
#nav.on .btn span:nth-child(1)       { margin:-2px 0 0 -18px; -webkit-transform:rotate( 45deg); transform:rotate( 45deg); }
#nav.on .btn span:nth-child(3)       { margin:-2px 0 0 -18px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
#nav.on .btn span:nth-child(2)       { opacity:0; filter:alpha(opacity=0); }

/* ナビ box */
#nav .box                            { position:fixed; right:-50%; top:0; z-index:11; width:50%; height:100vh; background-color:rgba(0,0,0,0.9);  -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out; }
#nav .box ul                         { padding-top: 30px; display:flex; justify-content:center; align-items:center; flex-direction: column;}
#nav .box ul li                      { margin-bottom:20px; opacity:0; filter:alpha(opacity=0); -webkit-transition:all .6s ease; transition:all .6s ease; }
#nav .box ul li a                    { color:#fff; padding:20px 0 0px; text-align:center; font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; font-size: 20px; letter-spacing: 0.3em; }
#nav .box ul li a:hover              { color:#cd89b1; }
#nav.on .box                         { right:0; }
#nav a .anchor                       { display:block; padding-top:300px; margin-top:300px; }

/* ナビ box.on */
#nav.on .box ul li                   { opacity:1; filter:alpha(opacity=100); }
#nav.on .box ul li:nth-child(1)      { transition-delay:0.2s; }
#nav.on .box ul li:nth-child(2)      { transition-delay:0.3s; }
#nav.on .box ul li:nth-child(3)      { transition-delay:0.4s; }
#nav.on .box ul li:nth-child(4)      { transition-delay:0.5s; }
#nav.on .box ul li:nth-child(5)      { transition-delay:0.6s; }
#nav.on .box ul li:nth-child(6)      { transition-delay:0.7s; }


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

#box_logo                            { width:100%; }
.box_box_logo                        { width: 50%; margin-left:10%; height:auto; padding-top:350px; margin-bottom:200px; -webkit-transition:all .3s ease; transition:all .3s ease; }
.main-logo                           { width:100%; height:auto; margin-bottom:30px; }
.mv_nav ul li                        { display:inline-block; padding:0 10px; }
.mv_nav ul li a                      { color:#7d7d7d; text-align:center; font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; font-size:16px; letter-spacing:0.2em; border-bottom:solid 1px; }
.mv_nav ul li a:hover                { color:#cd89b1; }


/* ====================================================================================================
   共通設定
   ---------------------------------------------------------------------------------------------------- */

.container                           { width:100%; }
.box                                 { background-color:rgba(244,244,244,0.80); padding:30px; text-align:left; color:#6F748E !important; max-width:1000px; }
.left                                { width: 40%; margin-left:10%}
.right                               { width: 40%; margin-left:auto; margin-right:10%; }
.center                              { width:100%; margin:0 auto;}
.box h1                              { color:#6F748E; font-size:50px; margin-top:-60px; font-weight:100; letter-spacing:0.2em; border-bottom:solid 0.5px; line-height:1.1; margin-bottom:30px; }
.box li                              { padding-bottom: 20px; font-weight:400; }
.box li span                         { font-weight:500; font-size:120%; display:inline-block; margin-top:10px; margin-bottom:5px; }

/* Font 設定 */
.box h1,
.box li                              { font-family:"Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; }


/* ====================================================================================================
   NEWS
   ---------------------------------------------------------------------------------------------------- */

#news                                { width:100%; padding:200px 0; }
#news li                             { line-height:1.5em; }


/* ====================================================================================================
   BLOG
   ---------------------------------------------------------------------------------------------------- */

#blog                                { width:100%; padding:200px 0; }
#blog article                        { position:relative; }
#blog article img                    { position:absolute; top:0; left:0; width:160px; height:84px; }
#blog article a                      { display:block; height:100px; padding:0 0 6px 180px; color:#6F748E !important; }
#blog article h2                     { font-size:17px; line-height:1.2; font-weight:  bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:12px 0 2px 0; }
#blog article p                      { font-size:16px; line-height:1.4; font-weight:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#blog article time                   { font-size:12px; color:#bbb; display:block; }
#blog .note_link                     { width:100%; height:50px; text-align:center; color:#6F748E; background-color:#f3f3f3; display:block; margin:10px auto 0 auto; padding:8px; border:solid 0.5px #6F748E; font-weight:600; font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; }
#blog .note_link:visited             { color:#6F748E;}
#blog .note_link:hover               { color:#ffffff; background-color:#6F748E; }

/* Font 設定 */
#blog article h2,
#blog article p,
#blog article time                   { font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; }

/* ====================================================================================================
   SNS
   ---------------------------------------------------------------------------------------------------- */

#sns                                 { width:100%; padding:200px 0; }


/* ====================================================================================================
   PROFILE
   ---------------------------------------------------------------------------------------------------- */

#profile                             { width:100%; padding:200px 0; font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; }
#profile .flex_box                   { display:flex; }
#profile .col_right                  { width: 30%; }
#profile .col_left                   { width: 70%; padding:0 30px; }

#profile .img_prof                   { width:100%; max-width:300px; -webkit-transition:all .3s ease; transition:all .3s ease; }
#profile .col_left li                { padding-bottom:15px; line-height:1.4; font-weight:400; }
#profile .col_left p                 { font-size:22px; font-weight:400; padding:0 0 20px; line-height:1.4; }

/* ====================================================================================================
   WORKS
   ---------------------------------------------------------------------------------------------------- */

#works                               { width:100%; padding:200px 0; }
#works .works_img                    { width: 60%; max-width:500px; margin:-5px 0 20px; }
#works ul                            { margin-bottom:10px; }
#works ul li                         { line-height:1.5; padding-bottom:10px; }
#works ul ul li                      { position:relative; padding-left:18px; }
#works ul ul li:before               { content:""; position:absolute; top:9px; left:4px; z-index:2; display:block; width:4px; height:4px; background:#6f748e; -webkit-border-radius:50%; border-radius:50%; }


/* ====================================================================================================
   CONTACT
   ---------------------------------------------------------------------------------------------------- */

#contact                             { width:100%; padding:200px 0;}
#contact h2                          { font-size:21px; line-height:1.5; margin-bottom:20px; font-weight:400; }
#contact h3                          { font-size:18px; line-height:1.5; font-weight:600; margin:30px 0 20px; }
#contact li                          { list-style:inherit; margin-left:20px; padding-left:5px; line-height:1.5; }
#contact .contact_link               { width:100%; height:50px; text-align:center; background-color:#f3f3f3; display:block; margin:10px auto 0 auto; padding:8px; border:solid 0.5px #6F748E; font-weight:600; }
#contact a                           { color:#6F748E;}
#contact a:visited                   { color:#6F748E;}
#contact a:hover                     { color:#ffffff; background-color:#6F748E; }


/* Font 設定 */
#contact h2,
#contact h3,
#contact .contact_link,
#contactpage .read                   { font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; }


/* ====================================================================================================
   CONTACT PAGE
   ---------------------------------------------------------------------------------------------------- */

/* CONTACT PAGE */
#contactpage                         { width:100%; }
#contactpage .bg_03                  { background-image:url("../img/mv/05s.jpg"); }
#contactpage .container              { width: 80%; max-width:800px; margin:0 auto; padding:200px 0 100px 0; -webkit-transition:all .3s ease; transition:all .3s ease; }
#contactpage .box_area               { width:100%; text-align:left; background-color:rgba(244,244,244,0.8); }
#contactpage .read                   { margin-bottom:0.5em; }
#contactpage p                       { margin-bottom: 10px; line-height: 1.8}
#contactpage p span                  { font-size:120%; font-weight:600; line-height: 2.0 ;}
#contactpage hr                      { border:0; height:1px; margin:30px 0px; background:#d0d0d0; }
#contactpage form label              { position:relative; font-size:16px; line-height:24px; font-weight:bold; color:#6F748E; margin:5px 5px 5px 8px; display:block; }
#contactpage form label span         { margin-left: 10px; font-size: 80%; }
#contactpage form label .hissu       { position: absolute; top: 0; right: 0; z-index: 2; width: 40px; height: 20px; font-size: 12px; line-height: 20px; font-weight: bold; text-align: center; color: #fff; background: #ea6ea6; border-radius: 2px; }
#contactpage form label .nini        { position: absolute; top: 0; right: 0; z-index: 2; width: 40px; height: 20px; font-size: 12px; line-height: 20px; font-weight: bold; text-align: center; color: #fff; background: #666666; border-radius: 2px;}
#contactpage ._100                   { width:calc(100% - 5px); }
#contactpage form select,
#contactpage form input,
#contactpage form textarea           { -webkit-appearance:none; appearance:none; -webkit-border-radius:0; border-radius:0; margin:0 5px 15px 5px; padding:8px; background-color:#fff; border:1px solid #6F748E; font-size:16px; font-weight:500; }
#recaptcha                           { width: 302px; margin: 25px auto;}
#contactpage form input[type="submit"],
#contactpage form input[type="button"], 
#contactpage form button.btn         { -webkit-appearance:none; appearance:none; -webkit-border-radius:0; border-radius:0; background-color:#cd89b1; font-weight:normal; margin:25px auto; padding:15px 35px; display:block; border:none; font-size:16px; font-weight:bold; color:#fff; cursor:pointer; transition:all .2s; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; -webkit-border-radius:30px; border-radius:30px; }
#contactpage form table              { width: 100%; font-size: 16px; line-height: 1.5em; margin: 1.6em 0; color: #333; border-collapse: collapse; border-spacing: 0; border: 2px solid #ddd;}
#contactpage form table th           { padding: 12px; word-wrap: break-word; border: 1px solid #ddd; background-color: rgba(0,0,0,0.03);}
#contactpage form table td           { padding: 12px; word-wrap: break-word; border: 1px solid #ddd; }
  
/* ====================================================================================================
   フッタ
   ---------------------------------------------------------------------------------------------------- */

#footer                              { width:100%; height:auto; padding:50px 40px; text-align:left; color:#c9c7c7; background-color:#292929; }
#footer a img                        { width:100px; }
#footer h2                           { font-size:18px; padding-left:30px; line-height:1.4; margin-bottom: 10px;font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;}
#footer p                            { font-size:15px; padding-left:30px; line-height:1.4; margin-bottom: 10px; font-family: "Roboto Slab",Garamond,"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif; }
#footer p span                       { font-size:16px; font-weight: 600; }
#footer .flex_box                    { display:flex; }
             
/* トップへ戻る */
#page_top                            { position:fixed; right:50px; width:60px; height:60px; background:#cd89b1; opacity:0.7; }
#page_top a                          { position:relative; display:block; width:60px; height:60px; text-decoration:none;}
#page_top a::after                   { content: '▲'; font-size:22px; font-weight:bold; color:#fff; position:absolute; top:10px; bottom:0; right:0; left:0; margin:auto; text-align:center; }

/* 可視化域にきたら表示　*/
.fade_off                            { opacity:0; -webkit-transition: all 1s; transition: all 1s; }
.fade_on                             { opacity:1; }


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

@media screen and (min-width:761px) and (max-width:1180px){

/* メインビジュアル */
.box_box_logo                       { width:80%; } 

/* 共通設定 */
.left                               { width:80%; margin-left:10%; }
.right                              { width:80%; margin-right:10%; }  

}


/* ====================================================================================================
   スマートフォン対応
   ---------------------------------------------------------------------------------------------------- */

@media screen and (max-width:1180px){

.pc                                { display:none !important; }
.sm                                { display:block !important; } 

/* スマホ背景設定 */
.container::before                 { content:""; position:sticky; top:0; left:0; z-index:-1; width:100%; height:100vh; background:url("../img/mv/05s.jpg") no-repeat top right -80px; background-size:cover; display:block; }
.bg_01                             { background-image:none; }
.bg_02                             { background-image:none; }
.bg_03                             { background-image:none; }

/* ヘッタ */
header                             { top:10px; left:10px; }
header h1                          { width:50px; height:50px; top: 22px; left: 20px;} 

/* SNSアイコン */
#sns_icon                          { top:80px; right:25px; width:30px; height:30px;}
  
/* ナビ */
#nav .btn                          { top:15px; right:15px;width:50px; height:50px; }
#nav .box                          { right:-80%; top:0; width:80%; }
#nav a .anchor                     { display:block; padding-top:100px; margin-top:100px; } 
#nav.on .boxs ul li a              { font-size:25px;}
  
/* メインビジュアル */
#box_logo                          { width: 100%; margin-top: -450px; max-width: 850px;}
.box_box_logo                      { width:80%; padding-top: 0;} 
.mv_nav ul                         { padding:0 10px; background-color:rgba(244,244,244,0.75); }

/* 共通設定 */
.left                              { width:80%; margin-left:10%; }
.right                             { width:80%; margin-left:10%; margin-right:10%; } 
.center  
.box h1                            { font-size:30px; margin-top:-50px; font-weight:100; margin-bottom:30px; }  

/* BLOG */
#blog                              { max-width: 700px; padding:100px 0; }
#blog article img                  { width:80px; height:42px; }
#blog article a                    { height:70px; padding:0 0 3px 94px; }
#blog .box h1                      { font-size:35px; margin-top: -50px;}
#blog article h2                   { font-size:16px; padding:0 0 2px 0; }
#blog article p                    { font-size:12px; }
#blog article time                 { font-size:11px; }

/* SNS */
#sns                               { max-width: 700px; padding:100px 0; }  
  
/* NEWS */
#news                              { max-width: 700px; padding:100px 0; }
#news .box h1                      { font-size:35px; margin-top: -50px;}
  
/* PROFILE */  
#profile                           { max-width: 700px;} 
#profile .box h1                   { font-size:35px; margin-top: -50px;}
#profile .flex_box                 { display: block; }
#profile .col_left                 { width:100%; padding:10px 0px; }
#profile .col_left p               { font-size:22px;}
#profile .col_right                { width:100%; padding:10px 0 30px 0; }  

  
/* WORKS */
#works                             { padding:100px 0; max-width: 700px; }
#works .works_img                  { width:100%; margin:10px 0; } 
#works .box h1                     { font-size:35px; margin-bottom:10px; margin-top: -50px;}  
#works .ul                         { margin-bottom:0}
  
/* CONTACT */
#contact                           { padding:100px 0; max-width: 700px;}
#contact .box h1                   { font-size:35px; margin-top: -50px; }
  
  
/* CONTACT PAGE */
#contactpage .box h1               { font-size:35px; margin-top: -50px; }
#contactpage .bg_03                { background-image:none; }  
#contactpage .container            { width:100%; padding-top:100px;padding-bottom:0px;}
#contactpage .container::before    { content:""; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100vh; background:url("../img/mv/05s.jpg") no-repeat top right -80px; background-size:cover; display:block; }

/* フッタ */
footer                             { padding:0px 0 30px; }
#footer a img                      { width:80px; }
#footer p                          { font-size:15px; padding-left:20px;}  

/* トップへ戻る */
#page_top                          { right:0px; }
}