@charset "utf-8";

/*========================*/
/*      Base Setting      */
/*========================*/
@media screen, print {
  * {
    box-sizing: border-box;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
  }

  :root {
    --cm-blue: #9acce2;
    --cm-yellow: #ebbf4b;
    --cm-red: #d37671;
    --cm-green: #9dc798;
    --cm-purple: #ae8cbb;
    --cm-grey: #595757;
    --chsh-red: #d7000f;
    --ft-kiwimaru: 'Kiwi Maru', serif;
    --club-clrmain: #e23a48;
    --club-clracnt1: #f4a619; /* orange */
    --club-clracnt2: #a8cd2f; /* green/yellow */
    --club-clrsub: #ba7a39;
    --club-clrbg: #95cff7;
    /* --club-clrbg: #d3ebfb; */
    --club-yushoku: #e33848;
    --club-oryori: #f5a71c;
    --club-ohanashi: #50b8e6;
  }

  html {
    font-size: 62.5%;  /* 1rem = 10px */
  }

  body {
    color: #595757;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
    font-size: 1.6rem;
    text-align: justify;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1;
    margin-bottom: 0; /* reset */
    padding-left: 0; /* reset */
  }

  p {
    line-height: 1.8;
    margin-bottom: 0; /* reset */
  }

  .para-note {
    font-size: 90%;
    padding-left: 1em;
    text-indent: -1em;
  }

  .para-note::before {
    content: '\203B';
  }

  a {
    color: #595757;
    text-decoration: none;
  }

  a:hover {
    color: #595757;
    opacity: .7;
    text-decoration: none;
  }

  ul, ol {
    list-style-type: none;
    margin-bottom: 0; /* reset */
    padding-left: 0; /* reset */
  }

  dl {
    margin-bottom: 0; /* reset */
  }

  dt {
    font-weight: normal; /* reset */
  }

  .bodyscrolloff {
    overflow-y: hidden;
  }

  .uline {
    text-decoration: underline;
  }

  .link-int-bf::before,
  .link-int-af::after {
    content: "\ff1e";
    display: inline-block;
    line-height: 1;
  }

  .link-int-bf::before {
    margin-right: .2rem; 
  }
  
  .link-int-af::after {
    margin-left: .2rem;
  }

  .link-ext-bf::before,
  .link-ext-af::after {
    content: "\e89e";
    display: inline-block;
    font-family: 'Material Symbols Outlined';
    font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 48;
    line-height: 1;
    margin-left: .2rem;
    text-indent: 0;
    vertical-align: text-bottom;
    vertical-align: middle;
  }

  .link-pdf-bf::before,
  .link-pdf-af::after {
    background: url(../img/ic-pdf.png) no-repeat center;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 16px;
    vertical-align: text-bottom;
    width: 16px;
  }

  .link-pdf-af::after {
    margin-left: 2px;
  }

  .link-ig-bf::before,
  .link-ig-af::after {
    background: url(../img/ic-instagram.png) no-repeat center;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 16px;
    vertical-align: text-bottom;
    width: 16px;
  }

  .link-ig-af::after {
    margin-left: 3px;
    margin-right: 5px;
  }


  .material-icons {
    font-size: 1.6rem;
    vertical-align: middle;
  }

  .no-link {
    opacity: .6;
    pointer-events: none;
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
  p {
    line-height: 2;
  }
}

/*** PC ***/
@media screen and (min-width: 960px) {
}


/** PC pclg **/
@media screen and (min-width: 1280px) {
}

/*--- responsive ---*/
@media screen, print {
  .img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
  }

  .visible-splg,
  .visible-tb,
  .visible-ipad,
  .visible-ipadpcsm,
  .visible-tblg,
  .tb-only,
  .ipad-only,
  .tb-pcsm-only,
  .pcsm-only {
    display: none;
  }
}

/** SP splg **/
@media screen and (min-width: 480px) {
  .spsm-only {
    display: none;
  }

  .visible-splg {
    display: block;
  }

}

/*** TB ***/
@media screen and (min-width: 640px) {
  .sp-only {
    display: none;
  }

  .visible-tb {
    display: block;
  }

  .tb-only,
  .tb-pcsm-only {
    display: block;
  }
}

/** iPad **/
@media screen and (min-width: 768px) {
  .visible-ipad,
  .visible-ipadpcsm,
  .ipad-only {
    display: block;
  }
  
  .hidden-ipad {
    display: none;
  }
}


/** TB tblg **/
@media screen and (min-width: 800px) {
  .visible-tblg {
    display: block;
  }

  .ipad-only,
  .lt-tblg {
    display: none;
  }
}

/*** PC ***/
@media screen and (min-width: 960px) {
  .tb-only,
  .visible-ipadpcsm {
    display: none;
  }

  .pcsm-only {
    display: block;
  }

}

/** PC pclg **/
@media screen and (min-width: 1280px) {
  .tb-pcsm-only,
  .pcsm-only {
    display: none;
  }
}


/*---------------------*/
/*     .container      */
/*---------------------*/
@media screen, print {
  .container {
    margin: 0 auto;
    width: 94vw;
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
  .container {
    width: calc(94vw - 8rem);
  }
}

/*** Special BP ***/
@media screen and (min-width: 960px) {
  .container {
    width: 87.5vw;
    width: calc(50vw + 36rem);
  }
}

/** PC pclg **/
@media screen and (min-width: 1280px) {
  .container {
    width: 112rem;
    width: 100rem;
  }
}

    
    
/*========================*/
/*         header         */
/*========================*/
@media screen, print {
  header {
    height: 65px;
    position: fixed;
    top: 0;
    transform: translateY(0);
    transition: transform .5s ease;
    width: 100%;
    z-index: 10;
  }

  header.headerHide {
    transform: translateY(-100%);
  }

  header.shadow {
    box-shadow: 0 1px 1px 1px var(--cm-blue);
  }


  #headerArea {
    align-items: center;
    background-color: #fff;
    display: flex;
    height: 100%;
    justify-content: space-between;
    padding: 0 3vw;
    width: 100vw;
    width: calc(100vw - calc(100vw - 100%));
    z-index: 100;
  }

  .logo-img {
    height: auto;
    width: 180px;
  }
  
  #toggle-hamburger {
    height: 30px;
    position: relative;
    transition: all .4s;
    width: 30px;
  }

  .toggle-bar {
    background-color: #464646;
    border-radius: 2px;
    display: inline-block;
    height: 3px;
    left: 14px;
    left: 0;
    position: absolute;
    transition: all .4s;
    width: 100%; /* 30px */
  }

  .toggle-bar:nth-of-type(1) {
    top: 15px;
    top: 5px;
  }

  .toggle-bar:nth-of-type(2) {
    top: 23px;
    top: 15px;
  }

  .toggle-bar:nth-of-type(3) {
    top: 31px;
    top: 25px;
  }

  /* hamburger clicked */
  #toggle-hamburger.toggle-hamburger-open {
    transform: rotateX(360deg);
  }
  
  .toggle-hamburger-open .toggle-bar:nth-of-type(1) {
    left: 0;
    position: absolute;
    top: 5px;
    transform: translateY(6px) rotate(-135deg);
  }

  .toggle-hamburger-open .toggle-bar:nth-of-type(2) {
    opacity: 0;
  }

  .toggle-hamburger-open .toggle-bar:nth-of-type(3) {
    left: 0;
    position: absolute;
    top: 17px;
    transform: translateY(-6px) rotate(135deg);
  }
  
  #gnav-body {
    background-color: #fff;
    border-top: var(--cm-blue) solid 4px;
    height: calc(100vh - 6.5rem);
    left: 0;
    display: none;
    padding-top: 4rem;
    position: absolute;
    top: 6.5rem;
    width: 100vw;
    width: calc(100vw - calc(100vw - 100%));
  }

  .gnav-list {
    display: flex;
    flex-direction: column;
    margin: 0 auto 4rem;
    max-width: 300px;
    padding: 0 3vw;
    text-align: center;
    width: 100vw;
    width: calc(100vw - calc(100vw - 100%));
  }

  .gnav-item + .gnav-item {
    margin-top: 3rem;
  }

  .gnav-link {
    color: #79bcc9;
    font-family: 'Kiwi Maru', serif;
    font-size: 1.8rem;
    font-weight: 500;
  }

  .header-linkArea {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin: 0 auto;
    width: 200px;
  }

  .logo-img {
    aspect-ratio: 150/43;
    height: auto;
    width: max(28vw, 140px);
  }

  .link-shokudo {
    background-color: var(--chsh-red);
    border: var(--chsh-red) solid 2px;
    border-radius: 1rem;
    color: #fff;
    font-family: 'Kiwi Maru', serif;
    font-size: 2rem;
    line-height: 1.2;
    padding: 1rem 0 1.2rem;
    text-align: center;
    width: 100%;
  }

  .link-shokudo-hd {
    font-size: 1.6rem;
    margin-bottom: 0; /* reset */
    margin-left: auto;
    margin-right: 1.5rem;
    padding: .5rem 0 .7rem;
    width: max(20vw, 90px);
  }

  .link-shokudo-ft {
    display: block;
    margin: 0 auto 3rem;
    width: 180px;
  }

  .link-shokudo:hover {    
    background-color: #fff;
    border: var(--chsh-red) solid 2px;
    color: var(--chsh-red);
  }

  .link-club {
    display: block;
    height: 7.5rem;
  }

  .club-bnr {
    /* aspect-ratio: 8/3; */
  }

  .club-bnr-sm {
    /* aspect-ratio: 2/1; */
  }

  .link-club-img {
    border: var(--club-clrbg) solid .1rem;
    border-radius: 1rem;
    width: 100%;
  }

  .link-club-sm {
    display: none;
  }

  .link-txtsm {
    font-size: 1.6rem;
  }

  .header-contactArea {
    text-align: center;
    width: 100%;
  }

  .header-webform {
    border: #595757 solid 1px;
    border-radius: 1rem;
    display: block;
    margin-bottom: 20px;
    padding: 20px 0;
    width: 100%;
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
  header {
    height: auto;
  }

  #headerArea {
    display: block; /* reset */
    padding-top: 1rem;
    position: relative;
  }

  #h1logo,
  .headlogo {
    position: absolute;
    z-index: 1;
  }

  .logo-img {
    height: 50px;
    width: auto;
  }

  #gnav-head {
    display: none;
  }

  #gnav-body {
    background-color: transparent; /* reset */
    border-top: none; /* reset */
    display: flex;
    flex-direction: column-reverse;
    height: auto; /* reset */
    padding-top: 0;
    position: static; /* reset */
    width: auto; /* reset */
  }

  .gnav-list {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0; /* reset */
    max-width: none; /* reset */
    padding: 0; /* reset */
    width: 100%; /* reset */
  }

  .gnav-item + .gnav-item {
    margin-top: 0; /* reset */
  }

  .gnav-link {
    line-height: 1;
  }

  .header-linkArea {
    flex-direction: row;
    gap: 1rem;
    height: 50px; /* match with logo height */
    margin-bottom: 15px;
    margin-right: 0;
    width: auto;
  }

  .link-shokudo {
    cursor: pointer;
    line-height: 1;
    margin-bottom: 0; /* reset */
    padding: 3px 0 7px;
    width: 130px;
    width: 11rem;
  }

  .link-shokudo-ft {
    margin: 0 auto 3rem;
    width: 180px;
  }

  .link-club {
    display: none;
  }

  .link-club-img {
    height: 100%;
  }

  .link-club-sm {
    cursor: pointer;
    display: block;
    margin-bottom: 0;
    height: 54px;
  }

  .header-contactArea {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    width: 175px;
    width: 16rem;
  }

  .header-webform {
    margin-bottom: 0; /* reset */
    padding: 1px 0;
  }

  .header-tel {
    font-size: 15px;
    line-height: 1;
    letter-spacing: -.1rem;
  }
}


/** SP BP **/
@media screen and (min-width: 768px) {
  .header-linkArea {
    gap: 1.5rem;
  }

  .link-shokudo {
    width: 13rem;
  }

  .link-club {
    display: block;
    height: 5.4rem;
    margin-bottom: 0; /* reset */
  }

  .link-club-sm {
    display: none;
  }

  .header-contactArea {
    width: 17.5rem;
  }

  .header-tel {
    font-size: 1.6rem;
    letter-spacing: 0; /* reset */
  }
}

/** TB tblg **/
@media screen and (min-width: 800px) {

}

/*** PC ***/
@media screen and (min-width: 960px) {
  .logo-img {
    height: 70px;
  }

  .gnav-list {
    justify-content: space-between;
    width: 90rem;
  }

  .gnav-link {
    font-size: 2rem;
  }

  .header-linkArea {
    height: 70px;
  }

  .link-shokudo {
    font-size: 2.8rem;
    padding: .2rem 0 1.3rem;
    width: 20rem;
  }

  .link-shokudo-ft {
    margin: 0 auto 3rem;
    /* width: 180px; */
  }

  .link-club {
    height: 7.5rem;
  }

  .header-link-txtsm {
    font-size: 1.8rem;
  }

  .header-contactArea {
    width: auto;
  }

  .header-webform {
    font-size: 2rem;
    padding: .6rem 0;
  }

  .header-tel {
    font-size: 1.8rem;
  }
}

/** SP BP **/
@media screen and (min-width: 1000px) {

}


/** PC pclg **/
@media screen and (min-width: 1280px) {

}


/*==========*/
/*   Cont   */
/*==========*/
@media screen, print {
  .cont {
    padding-bottom: 8rem;
    padding-top: 6.5rem;
  }

  #cont-main {
    padding-top: 3rem;
  }

  #blockLead {
    margin-bottom: 5rem;
  }

  .main-block {
    margin-left: auto;
    margin-right: auto;
  }

  .main-block + .main-block {
    margin-top: 3rem;
    margin-top: 5rem;
  }

  .block-head {
    margin-bottom: 3rem;
  }

  .page-title {
    font-family: var(--ft-kiwimaru);
    font-size: 3rem;
    font-weight: 500;
    margin-bottom: 2rem;
    text-align: center;
  }

  .block-title {
    font-family: var(--ft-kiwimaru);
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: center;
  }

  .para-head {
    line-height: 1.5;
  }

  #blockLead {
    text-align: center;
  }

  .page-title {
    line-height: 1.4;
  }


  .contact-link {
    background-color: var(--ji-color);
    border-radius: 30px;
    display: block;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    margin: 0 auto;
    padding: 1.5rem 0;
    text-align: center;
    width: 80%;
  }

  .contact-link .material-icons {
    font-size: 2rem;
    font-weight: normal;
    margin-right: 3px;
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
  .cont {
    padding-top: 14rem;
    padding-top: 10rem;
  }

  #cont-main {
    padding-top: 5rem;
  }

  #cont-kv + #cont-main {
    padding-top: 3rem; /* override */
  }

  .main-block {
    width: min(100%, 75rem);
  }

  .main-block + .main-block {
    margin-top: 8rem;
  }

  .para-head {
    line-height: 1.6;
  }

  .contact-link {
    cursor: pointer;
    font-size: 2rem;
    line-height: 3.5;
    padding: 0; /* reset */
    width: 400px;
  }
}

/*** PC ***/
@media screen and (min-width: 960px) {
  .cont {
    padding-top: 18rem;
    padding-top: 12rem;
  }

  #cont-main {
    padding-top: 7rem;
  }

  #cont-kv + #cont-main {
    padding-top: 3rem; /* override */
  }

  .para-head {
    line-height: 1.8;
  }

  .contact-link {
  }
}

/** PC pclg **/
@media screen and (min-width: 1280px) {
  .cont {
    padding-top: 12.5rem;
  }

  #cont-main {
    padding-top: 8rem;
  }

  #cont-kv + #cont-main {
    padding-top: 3rem; /* override */
  }
}

/*=============*/
/*    totop    */
/*=============*/
@media screen, print {
  #totop {
    background-color: #fff;
    background-image: url(../img/pagetop-arrow.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border-radius: 50%;
    bottom: 3vh;
    /* box-shadow: 0 5px 8px 0 #61662e; */
    box-shadow: 0 5px 8px 0 var(--cm-blue);
    height: 40px;
    position: fixed;
    right: 3vw;
    width: 40px;
    z-index: 1;
  }

  #totop-link {
    display: block;
    height: 100%;
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
}

/*** PC ***/
@media screen and (min-width: 960px) {
  #totop:hover {
    cursor: pointer;
    opacity: .7;
  }

}

/** PC pclg **/
@media screen and (min-width: 1280px) {

}

/*================*/
/*     footer     */
/*================*/
@media screen, print {
  #footer {
    background-color: #81cde433;
    box-shadow: 0 -1px 1px 1px #595757;
    padding-bottom: 2rem;
    padding-top: 3rem;
    text-align: center;
  }

  #snsshare {
    margin-bottom: 2rem;
  }

  .sns-list {
    display: flex;
    justify-content: center;
  }

  .sns-item + .sns-item {
    margin-left: 50px;
  }

  .copy {
    line-height: 1;
    text-align: center;
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
  #footer {
    padding-bottom: 1rem;
    padding-top: 2rem;
  }

  #snsshare {
    margin-bottom: 1rem;
  }
}

/** TB tblg **/
@media screen and (min-width: 800px) {
}

/*** PC ***/
@media screen and (min-width: 960px) {
}

/** PC pclg **/
@media screen and (min-width: 1280px) {
}


/*****************/
/***   Print   ***/
/*****************/
@media print {
  body {
    font-size: 12px;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: 14px;
  }

  .sp-only,
  .spsm-only {
    display: none;
  }

  .visible-tb {
    display: block;
  }

  .no-link {
    opacity: 1; /* reset */
  }

  header {
    height: 50px;
    position: static;
  }

  header.shadow {
    box-shadow: none;
  }

  header.headerHide {
    transform: none;
  }

  #headerArea {
    padding: 0;
  }

  .logo-img {
    width: 180px;
  }

  .ic-new::after {
    content: none;
  }


  #gnav-head {
    display: none;
  }

  #gnav-body {
    background-color: transparent; /* reset */
    border-top: none; /* reset */
    display: block;
    padding-top: 0;
    position: static; /* reset */
    width: auto; /* reset */
  }

  #gnav-list {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    height: 35px;
    max-width: none;
    min-height: auto;
    padding: 0; /* reset */
    width: auto; /* reset */
  }

  .gnav-item {
    margin-bottom: 0; /* reset */
  }

  #gnav-list-main {
    display: flex;
    justify-content: space-between;
  }

  .gnav-item-main {
    width: auto; /* reset */
  }

  .gnav-item-main + .gnav-item-main {
    margin-left: 15px;
    margin-top: 0; /* reset */
  }

  .gnav-link-main {
    border: none;
    font-size: 12px;
    line-height: 1;
    padding: 5px 0;
  }

  .gnav-link-main::before {
    content: '\FF1E';
  }

  .gnav-item-main-corp .nav-link-corp {
    border-radius: 7px;
    padding-left: 5px;
    padding-right: 5px;
  }

  #gnav-list-sub {
    display: flex;
  }

  .gnav-item-sub + .gnav-item-sub {
    margin-left: 20px;
    margin-top: 0; /* reset */
  }

  .gnav-link-sub {
    font-size: 12px;
  }

  .cont {
    padding-top: 0px; /* reset */
  }

  #totop {
    display: none!important;
  }

  #snsshare {
    display: none;
  }

  #footer {
    padding-bottom: 0;
    padding-top: 20px;
  }

  #snsshare + footer #footnav {
    margin-bottom: 40px;
  }

  .footnav-list {
    display: grid;
    grid-template-columns: repeat(4, auto);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    row-gap: 20px;
    width: 600px;
  }

  .footnav-item {
    text-align: center;
  }

  .footnav-item + .footnav-item {
    margin-top: 0; /* reset */
  }

  .footnav-item-corp {
    grid-column: 1 / 5;
  }

  .footnav-item + .footnav-item-corp {
    margin-top: 15px;
  }

  .footnav-item-corp .nav-link-corp {
    padding: 10px 20px;
  }

  #footnav {
    margin-bottom: 40px;
  }
}