@charset "utf-8";
/* ========================================================
	style.css => 共通基本CSS
======================================================== */

/* RESET
----------------------------------------------------------------------------------------------------*/
a,article,body,dd,div,dl,dt,em,form,footer,header,h1,h2,h3,h4,h5,h6,html,i,iframe,img,label,legend,li,nav,ol,p,section,main,span,table,tbody,tfoot,thead,time,tr,th,td,ul,video,address,picture,source{word-break:break-all;font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;white-space:normal;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.8;text-align:left}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.8;text-align:left}article,footer,header,nav,section,main{display:block}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}

/* -----------------------------------------------
 * 設定しなおす
----------------------------------------------- */
body {
  margin: 0 auto;
  padding: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #010101;
  height: 100%;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  letter-spacing: 0.2rem;
  text-align: justify;
  text-justify: inter-ideograph;
}
.font-spacing-none {
  letter-spacing: 0;
}
sup,sub {
  font-size: 70%;
}
.bold {
  font-weight: 700;
}
.en_regular {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
}
.en_medium {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
}
.en_medium_italic {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
}
.en_semi-bold {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
}
.en_bold {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
}
.kozuka {
  font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif;
}

/* IE8〜11はメイリオ */
/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  body {
    font-size: 14px;
    font-family: 'Segoe UI',
                 Meiryo,
                 sans-serif;
  }
}*/

@media only screen and ( max-width : 767px ) {
  body {font-size: 16px;}
}
@media only screen and ( max-width : 540px ) {
  body {font-size: 14px;}
}


table {
  margin : 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}

img {
  vertical-align: bottom;
  border: none;
}


/* -----------------------------------------------
 * アンカータグの設定
----------------------------------------------- */
a {
  outline:none;
  color: #fff;
}
.underline,.underline:hover {
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}
a,a:hover,a:hover img,button,input {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}
a:hover {
  filter: alpha(opacity=70);
  -moz-opacity:0.70;
  opacity:0.70;
}

/* -----------------------------------------------
 * base.css
----------------------------------------------- */

main {display: block;}
img {
    max-width: 100%;
    height: auto;
}
.taC {
  text-align: center;
}
.caption {
  font-size: 11px;
}
.container,.h_inner {
  /* width: 100%; */
  margin-right: auto;
  margin-left: auto;
  padding-right: 40px;
  padding-left: 40px;
}
@media only screen and ( max-width : 375px ) {
  .container,.h_inner {
    padding-right: 20px;
    padding-left: 20px;
  }
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container,.h_inner {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container,.h_inner {
    max-width: 1040px;
  }
}
@media (min-width: 1400px) {
  .container,.h_inner {
    max-width: 1300px;
  }
}


.d-flex {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.d-flex-space-between {
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.d-flex-space-center {
  -ms-flex-pack: center;
  justify-content: center;
}
.d-flex-item-center {
  -ms-flex-align: center;
  align-items: center;
}
.d-flex-justify-content-center {
  -ms-flex-pack: center;
  justify-content: center;
}

@media only screen and ( max-width : 991px ) {
  .sp_none,.sp_mini {
    display: none !important;
  }
  .sp_inner {
    padding: 0 4%;
  }
  .sp_box {
    margin-bottom: 40px;
  }
  .sp_sbox {
    margin-bottom: 10px;
  }
  .section {
    padding: 60px 0;
    margin-bottom: 0;
  }
  .br_pc {
    display: none;
  }
  .br_sp_mini {
    display: none;
  }
  .xl_box {
    margin-bottom: 100px;
  }
  .l_box {
    margin-bottom: 80px;
  }
  .box {
    margin-bottom: 40px;
  }
  .sbox {
    margin-bottom: 20px;
  }
  .ssbox {
    margin-bottom: 10px;
  }
  .d-flex_sp {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .d-flex-space-between_sp {
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .d-flex-justify-content-center_sp {
    -ms-flex-pack: center;
    justify-content: center;
  }
  .d-flex-item-center_sp {
    -ms-flex-align: center;
    align-items: center;
  }
  .d-flex-justify-content-center_sp {
    -ms-flex-pack: center;
    justify-content: center;
  }
}

@media only screen and ( max-width : 575px ) {
  .sp {
    display: block !important;
  }
  .sp_mini {
    display: block !important;
  }
  .br_sp_mini {
    display: block;
  }
  .xl_box {
    margin-bottom: 80px;
  }
  .l_box {
    margin-bottom: 60px;
  }
}


@media print, screen and ( min-width : 992px ) {
  .sp,.sp_mini {
    display: none !important;
  }
  .section {
    padding: 80px 0;
  }
  .xl_box {
    margin-bottom: 120px;
  }
  .l_box {
    margin-bottom: 100px;
  }
  .box {
    margin-bottom: 80px;
  }
  .sbox {
    margin-bottom: 40px;
  }
  .ssbox {
    margin-bottom: 20px;
  }
  .br_sp {
    display: none;
  }
  .br_sp_mini {
    display: none;
  }
  .d-flex_pc {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .d-flex-space-between_pc {
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .d-flex-justify-content-center_pc {
    -ms-flex-pack: center;
    justify-content: center;
  }
  .d-flex-item-center_pc {
    -ms-flex-align: center;
    align-items: center;
  }
  .d-flex-justify-content-center_pc {
    -ms-flex-pack: center;
    justify-content: center;
  }
}
@media print, screen and ( min-width : 1200px ) {
  .section {
    padding: 100px 0;
  }
}




/* ---------------------------------------------------------------------------------------------

　   HEADER

--------------------------------------------------------------------------------------------- */

@media only screen and ( max-width : 991px ) {
  #header {
    width: 100%;
    height: 80px;
    /* background: #fff; */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    /* -webkit-transition: 0.5s;
    transition: 0.5s; */
  }
  #h_logo .caption {
    display: none;
  }
  #header.h_active #h_btn {
    display: none !important;
  }
  #h_logo {
    max-width: 100px;
    position: absolute;
    top: 15px;
    left: 20px;
  }
  #header.is-animation #h_logo {
    display: none;
  }
}

@media only screen and ( max-width : 575px ) {
  #h_logo {
    max-width: 100px;
  }
}

@media only screen and ( max-width : 375px ) {
  #h_logo {
    max-width: 76px;
    top: 7px;
  }
}


@media only screen and ( max-width : 320px ) {
}

@media print, screen and ( min-width : 992px ) {
  #header {
    width: 100%;
    z-index: 9998;
    width: 100%;
    padding-top: 20px;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  #header.is-animation {
    padding: 20px 0;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
    background: rgba(0,0,0,0.85);
    top: 0;
  }
  #navToggle {
    display: none !important;
  }
  #h_logo {
    max-width: 110px;
    position: fixed;
    left: 80px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  #header.is-animation #h_logo {
    max-width: 82px;
  }
}

@media print, screen and ( min-width : 1200px ) {
}


/* ---------------------------------------------------------------------------------------------

　   MENU

--------------------------------------------------------------------------------------------- */
@media only screen and ( max-width : 991px ) {
#gNav {
  display: none;
    position: fixed;
    top: 0;
    left: 0;
    /* left: calc(100vw - 0rem); */
    color: #333;
    text-align: center;
    width: calc(100% - 80px);
    height: 100vh;
    padding: 80px 40px 40px;
    background: #161616;
    /* padding-top: -100px; */
    /* transform: translateY(-100%); */
    transition: all 0.6s;
    z-index: 100;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  #gNav.active {
    display: block;
    /* transform: translateY(0%); */
    top: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    overflow: auto;
  }
  #gNav ul {
    background: #161616;
    margin: 0 auto;
    width: 100%;
    display:inherit;
  }
  #gNav.active ul {
    background: #161616;
  }
  #gNav ul li {
    font-size: 1.1em;
    list-style-type: none;
    padding: 0;
    width: 100%;
  }
  #gNav ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  #gNav ul li a {
    display: block;
    color: #fff;
    padding: 1.5em;
    text-align: center;
  }
  #navToggle {
    display: block;
    width: 80px;
    height: 80px;
    position: fixed;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 5;
    text-align: center;
    /* background: #fff; */
    z-index: 102;
  }
  .navToggle_inner {
    width: 32px;
    position: absolute;
    top: 10px;
    left: 20px;
  }
  #navToggle span {
    display: block;
    position: absolute;
    width: 32px;
    border-bottom: solid 3px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
  }
  #navToggle span:nth-child(1) {
    top: 25px;
  }
  #navToggle span:nth-child(2) {
    top: 35px;
  }
  /* #navToggle span:nth-child(3) {
    top: 37px;
  }
  #navToggle span:nth-child(4) {
    border: none;
    color: #161616;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
  } */
  #navToggle.active span:nth-child(1) {
    top: 28px;
    left: 6px;
    border-bottom: solid 3px #fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #navToggle.active span:nth-child(2) {
    top: 28px;
    border-bottom: solid 3px #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #gNav ul li.sp_nav a {
    max-width: 350px;
    margin: 1.5em auto 0;
    padding: 1em;
    background: #fff;
    color: #161616 !important;
  }
}
@media only screen and ( max-width : 575px ) {
  #gNav {
    width: calc(100% - 40px);
    padding: 80px 20px;
  }
  #gNav ul li a {
    padding: 1em;
  }
}
@media print, screen and ( min-width : 992px ) {
  .sp_nav {
    display: none;
  }
  /* #h_menu {
    position: absolute;
    top: 80px;
    right: 100px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  .is-animation #h_menu {
    top: 0;
  } */

  #h_menu {
    padding-top: 40px;
  }
  #header.is-animation #h_menu {
    padding-top: 20px;
    padding-bottom: 20px
  }
  #menu.d-flex_pc {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  #menu li {
    margin-left: 30px;
  }
  #menu li a {
    color: #fff;
    letter-spacing: .1rem;
    font-size: 12px;
  }
}

@media print, screen and ( min-width : 1200px ) {
  #menu li a {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------------------------------

　   FOOTER

--------------------------------------------------------------------------------------------- */
#footer {
  background: #70855a;
}
#footer p {
  color: #fff;
}
.company_num {
  letter-spacing: 0.1rem;
}
#footer p,#footer a {
  letter-spacing: 0.1rem;
}
.fot_mail img {
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
.fot_tel small {
  font-weight: normal;
}
@media only screen and ( max-width : 991px ) {
  #footer {
    padding: 80px 0 320px;
    position: relative;
  }
  .f_logo {
    max-width: 210px;
    margin-bottom: 40px;
  }
  .company_num {
    margin-bottom: 25px;
    font-size: 28px;
  }
  .fot_link {
    font-size: 17px;
  }
  .fot_link img {
    display: inline-block;
    vertical-align: baseline;
    margin-left: -5px;
  }
  #fot_contact {
    margin-top: 25px;
  }
  .fot_mail {
    font-size: 17px;
  }
  .f_txt span {
    display: inline-block;
    margin-left: -0.5rem;
  }
  .fot_tel {
    margin-top: 5px;
    font-size: 18px;
  }
  .fot_tel a {
    display: inline-block;
    margin-left: 10px;
    font-size: 24px;
  }
  #reservation_sp {
    position: fixed;
    right: 30px;
  }
}

@media only screen and ( max-width : 575px ) {
  .f_logo {
    max-width: 180px;
  }
  .fot_tel small {
    display: block;
    font-size: 12px;
  }
}
@media only screen and ( max-width : 375px ) {
  .f_txt a {
    font-size: 14px;
  }
  .fot_mail {
    font-size: 14px;
  }
  .fot_tel a {
    font-size: 24px;
  }
}
@media only screen and ( max-width : 320px ) {
  #footer {
    padding: 80px 0 60px;
  }
  .company_num {
    font-size: 23px;
  }
  .fot_tel {
    font-size: 23px;
  }
  .fot_mail a {
    font-size: 14px;
  }
  .fot_link {
    font-size: 14px;
  }
}

@media print, screen and ( min-width : 992px ) {
  #footer {
    padding: 100px 0 70px;
  }
  .f_logo {
    max-width: 138px;
    margin-right: 40px;
  }
  #fot_contact {
    margin-top: 10px;
  }
  #fot_contact a {
    display: inline-block;
    margin-left: 5px;
  }
  .fot_link img {
    display: inline-block;
    vertical-align: middle;
    margin-left: -5px;
  }
  .company_num {
    font-size: 24px;
  }
  .company_num {
    margin-bottom: 5px;
  }
  .f_txt {
    margin-top: 25px;
  }
  .fot_tel {
    font-size: 18px;
  }
  .fot_tel:before {
    content: "/";
    font-size: 15px;
    vertical-align: text-bottom;
    margin-right: 2px;
    margin-left: 5px;
  }
  .fot_tel a {
    font-size: 24px;
  }
}

@media print, screen and ( min-width : 1200px ) {
  #footer {
    padding: 130px 0 100px;
  }
  .f_logo {
    max-width: 198px;
    margin-right: 80px;
  }
}

/* ---------------------------------------------------------------------------------------------

    ANIMATION

--------------------------------------------------------------------------------------------- */
.fade-in {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
}
.fade-in:nth-child(2) {
  transition-duration: 1300ms;
}
.fade-in:nth-child(3) {
  transition-duration: 1600ms;
}
.fade-in:nth-child(4) {
  transition-duration: 1800ms;
}
.fade-in:nth-child(5) {
  transition-duration: 2100ms;
}
.fade-in:nth-child(6) {
  transition-duration: 2400ms;
}
.fade-in:nth-child(7) {
  transition-duration: 2700ms;
}
.fade-in:nth-child(8) {
  transition-duration: 3000ms;
}
.fade-in-up {
  transform: translate(0, 50px);
}
.fade-in-down {
  transform: translate(0, -50px);
}
.fade-in-left {
  transform: translate(-50px, 0);
}
.fade-in-right {
  transform: translate(50px, 0);
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}




/* addition style*/
.instagram-pc, .instagram-tb, .instagram-sp {
  display: none;
}

@media print, screen and ( min-width : 992px ) {
  .instagram-pc {
    display: block;
  }
}
@media only screen and ( max-width : 991px ) and ( min-width : 576px ) {
  .instagram-tb {
    display: block;
  }
}

@media only screen and ( max-width : 575px ) {
  .instagram-sp {
    display: block;
  }
}