@charset "UTF-8";

#wrapper{animation: fadeIn 3s ease 0s 1 normal;-webkit-animation: fadeIn 3s ease 0s 1 normal;}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* contents */
.contents_inner{max-width:1160px;margin-left:auto;margin-right:auto}

/* btn */
.c_btn{display:flex;justify-content:center;align-items:center;height:72px}
.c_btn-black{background-color:#000}

/* arw */
.arw{position:relative}
.arw::before,.arw::after{position:absolute;width:50px;height:50px}
.arw::before{content:"";border:1px solid #33a9cd;border-radius:50%}
.arw::after{content:"→";display:flex;align-items:center;justify-content:center;color:#33a9cd;font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","ＭＳ Ｐゴシック",sans-serif;font-size:1.5rem;line-height:1}

/* title */
.c_title{position:relative;height:0;padding-top:27.777777777778%;background-size:cover;background-position:center center}
.c_title::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:url(/solamachi/img/common/overlay_mv.png) left top / auto auto repeat}
.c_title h1{position:absolute;left:50%;top:50%;min-width:380px;padding:0 15px;color:#000;font-size:5.2rem;font-weight:400;text-align:center;transform:translate(-50%,-50%);background-color:rgba(255,255,255,0.85)}

/* catch */
.c_catch{text-align:center}
.c_catch h2{font-size:4rem;font-weight:300;line-height:1.6}
.c_catch h2 + p{margin-top:1em;font-size:2rem;line-height:2}

/* --------------------
 #header 
-------------------- */
#header{position:fixed;top:0;left:0;width:100%;z-index:9999}
#header .header_logo{position:absolute;top:40px;left:30px;z-index:9999}
#header .header_logo a{display:block}
#header .header_menu{position:absolute;top:65px;right:56px}
#header .header_menu .menu-hidden{display:none}
#header .header_menu .menu_btn{display:flex;height:80px;width:67px;justify-content:center;align-items:center;position:relative;z-index:9999;cursor:pointer;margin:auto;left:-6px}
#header .header_menu .menu_btn span,#header .header_menu .menu_btn span::before,#header .header_menu .menu_btn span::after{content:"";display:block;height:1px;width:100%;background:#fff;transition:.5s;position:absolute}
#header .header_menu .menu_btn span{top:13px}
#header .header_menu .menu_btn span::before{bottom:-13px}
#header .header_menu .menu_btn span::after{top:-13px}
#header .header_menu .menu_btn.clicked span{background:rgba(255,255,255,0)}
#header .header_menu .menu_btn.clicked span::before{bottom:0;transform:rotate(45deg)}
#header .header_menu .menu_btn.clicked span::after{top:0;transform:rotate(-45deg)}
#header .header_menu .menu_content{width:100%;height:100%;position:fixed;top:0;left:100%;transition:.5s;overflow:auto}
#header .header_menu .menu_bg{width:100%;height:100%;position:fixed;top:0;right:100%;transition:.5s;background:rgba(0,0,0,0.7)}
#header .header_menu .menu_content.clicked{left:0}
#header .header_menu .menu_bg.clicked{left:0}
#header .header_menu .menu_content_wrap{display:flex;justify-content:flex-end;height:100%}
#header .header_menu .menu_content_nav{position:relative;width:50%;background-color:rgba(55,45,19,0.8)}
.pc_nav{position:fixed;top:60px;right:60px}
.pc_nav ul{display:flex;justify-content:flex-end;font-size:2rem;letter-spacing:.1em}
.pc_nav li+li:before{display:inline-block;content:"/";margin:0 20px}

/* --------------------
 #nav 
-------------------- */
#header .header_menu .menu_content_nav{display:flex;justify-content:center;align-items:center}
#nav{/*position:absolute;left:140px;top:50%;padding-left:13%;transform:translateY(-50%)*/}
#nav ul > li{position:relative;padding-left:25px;font-size:4.8rem;font-weight:400;line-height:1;counter-increment:gnavi}
#nav ul > li::before{content:'0' counter(gnavi);position:absolute;top:7px;left:0;color:#fff;font-size:1.2rem;font-weight:500}
#nav ul > li + li{margin-top:1em}

/* --------------------
 #shoplink
-------------------- */
#shoplink{position:absolute;top:50%;left:6%;transform:translateY(-50%)}
#shoplink a{display:flex;align-items:center;padding:0 115px 30px 10px;font-size:2.2rem;border-bottom:1px solid #fff}
#shoplink a::before,#shoplink a::after{right:0}
#shoplink a span{margin-right:60px;color:#33a9cd;font-size:1.6rem}

/* --------------------
 #footer
-------------------- */
#footer{position:relative;color:#e5e5e5;background-color:#372d13;z-index:10}
#footer .footer_col{display:flex;justify-content:space-between;align-items:center;height:120px}
#footer .footer_link a{position:relative;padding-left:1em;color:#e5e5e5;font-size:1.2rem;font-weight:500}
#footer .footer_link a:before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;margin-top:-.5px;background-color:#898989}
#footer .footer_copy{font-size:1.2rem}

/* --------------------
 fixed
-------------------- */
.fixed_reservatioins{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:10000}
.fixed_reservatioins a{display:flex;justify-content:center;align-items:center;width:40px;height:160px;padding-top:28px;font-weight:500;background-color:#9B7B26;-ms-writing-mode:tb-rl;writing-mode:vertical-rl}
.fixed_reservatioins a::before,.fixed_reservatioins a::after{position:absolute}
.fixed_reservatioins a::before{content:"";top:15px;right:9px;width:20px;height:20px;border:1px solid #fff;border-radius:50%}
.fixed_reservatioins a::after{content:"→";top:21px;right:14px;font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic","ＭＳ Ｐゴシック",sans-serif;font-size:1rem}
.fixed_social{position:fixed;right:6%;bottom:70px;z-index:10000}
.fixed_social > li + li{margin-top:20px}
.fixed_social > li a{display:block}
.fixed_social > li svg{transition:.2s linear}
.open .fixed_social > li svg{fill:#33a9cd}

/* --------------------
 modal
-------------------- */
.modal-container{position:fixed;top:0;left:0;width:100%;height:100%;text-align:center;background:rgba(0,0,0,50%);padding:40px 20px;overflow:auto;opacity:0;visibility:hidden;transition:.3s;box-sizing:border-box;z-index:10000}
.modal-container:before{content:"";display:inline-block;vertical-align:middle;height:100%}
.modal-container.active{opacity:1;visibility:visible}
.modal-body{position:relative;display:inline-block;vertical-align:middle;max-width:90%;width:auto}
.modal-close{position:absolute;display:flex;align-items:center;justify-content:center;top:-40px;right:-40px;width:40px;height:40px;font-size:40px;color:#fff;cursor:pointer}
.modal-content{background:#fff;text-align:left;padding:30px}


@media (max-width: 1200px) {
  /* contents */
  .contents_inner{margin:0 20px}

  /* --------------------
  #header 
  -------------------- */
  #header .header_menu .menu_content_wrap{display:block}
  #header .header_menu .menu_content_nav{width:100%;height:100vh}

  /* --------------------
  #nav
  -------------------- */
  /*#nav{left:50%;padding-left:0;transform:translate(-50%,-50%)}*/

  /* --------------------
  #shoplink
  -------------------- */
  #shoplink{left:50%;transform:translate(-50%,-50%)}
  #shoplink a{white-space:nowrap}

}

@media (max-width: 1000px) {
  /* --------------------
  #header 
  -------------------- */
  .header_logo img{width:140px;}
  .pc_nav{right:40px}
  .pc_nav ul{font-size:1.6rem}
}

@media (max-width: 767px) {
  /* btn */
  .c_btn{height:50px}

  /* title */
  .c_title h1{min-width:auto;font-size:3rem;white-space:nowrap}

  /* catch */
  .c_catch h2{font-size:2.2rem}
  .c_catch h2 + p{font-size:1.6rem}

  /* --------------------
  #header
  -------------------- */
  #header .header_logo{width:80px;top:20px;left:10px}
  #header .header_menu{top:20px;right:10px}
  #header .header_menu .menu_btn{left:0;width:40px}
  #header .header_menu .menu_btn span::before{bottom:-10px}
  #header .header_menu .menu_btn span::after{top:-10px}

  /* --------------------
  #nav
  -------------------- */
  #nav{white-space:nowrap}
  #nav ul > li{font-size:2.4rem}

  /* --------------------
  #shoplink
  -------------------- */
  #shoplink{width:90%}
  #shoplink a{display:block;padding:0 60px 15px 10px;font-size:1.8rem}
  #shoplink a::before,#shoplink a::after{top:50%;transform:translateY(-50%)}
  #shoplink a span{display:block;font-size:1.2rem}

  /* --------------------
  #footer
  -------------------- */
  #footer .footer_col{display:block;height:auto;padding:20px 0}
  #footer .footer_copy{margin-top:1em;font-size:1rem;text-align:right}

  /* --------------------
  fixed
  -------------------- */
  .fixed_social{bottom:15px}

}