@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 {
    --font-copper: "copperplate";
    --font-coppercond: "copperplate-condensed";
    --font-notoserif: "Noto Serif JP", serif;
    --font-notosans: "Noto Sans JP", sans-serif;
    --rw-black: #000;
    --rw-bgclr-height: 200rem;
    --rw-fw-3lght: 300;
    --rw-fw-5med: 500; 
    --rw-fw-6sbld: 600;   
    --rw-fw-7bld: 700;
  }

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

  body {
    color: var(--rw-black);
    font-family: var(--font-notoserif);
    font-optical-sizing: auto;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.9;
    text-align: justify;
  }

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

  a {
    text-decoration: none;
  }

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

  img {
    display: block;
    height: auto;
    max-width: 100%;
  }

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

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

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

  .tenor {
    font-family: 'Tenor Sans', sans-serif;
  }

  .bodyscrolloff {
    overflow-y: hidden;
  }

  .logo-img {
    aspect-ratio: 131 / 150;
    height: auto;
  }

  .uline {
    text-decoration: underline;
  }
}

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

/*** iPad ***/
@media screen and (min-width: 768px) {
}

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


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

/*--- responsive ---*/
@media screen, print {
  .visible-splg,
  .visible-tb,
  .visible-ipad,
  .ipad-pcsm-only,
  .visible-tblg {
    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 tblg **/
@media screen and (min-width: 768px) {
  .visible-ipad,
  .ipad-tablg-only,
  .ipad-pcsm-only {
    display: block;
  }

  .lt-ipad {
    display: none;
  }
}


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

  .lt-tblg{
    display: none;
  }
}

/*** PC ***/
@media screen and (min-width: 960px) {
  .hidden-pc,
  .ipad-tablg-only {
    display: none;
  }
}

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


/*----------------*/
/*     icons      */
/*----------------*/
@media screen, print {
  .link-ext-af::after,
  .link-int-af::after {
    margin-left: .2rem;
  }

  .link-ext-bf::before,
  .link-int-bf::before {
    margin-right: .2rem;
  }

  .link-ext-af::after,
  .link-ext-bf::before {
    content: "\e89e";
    display: inline-block;
    font-family: 'Material Symbols Outlined';  
    font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
    vertical-align: middle;
  }

  .link-int-af::after,
  .link-int-bf::before {
    content: "\e5e1";
    display: inline-block;
    font-family: 'Material Symbols Outlined';  
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
    vertical-align: middle;
  }
}

/*** iPad ***/
@media screen and (min-width: 768px) {
}


/*---------------------*/
/*     .container      */
/*---------------------*/
@media screen, print {
  .container {
    margin-inline: auto;
    margin-left: auto;
    margin-right: auto;
    width: min(94vw, 47rem);
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
  .container {
    width: 90%;
  }
}

/*** SP BP ***/
@media screen and (min-width: 768px) {
  .container {
    width: min(90%, 70rem);
  } 
}

/*** Special BP ***/
@media screen and (min-width: 960px) {
  .container {
    width: min(80vw, 110rem);
  }
}

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


/*========================*/
/*         header         */
/*========================*/
@media screen, print {
  header {
    padding-top: 2rem;
    position: sticky;
    top: 0; /* for sticky */
  }

  .headerArea {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    padding-left: 3vw ;
  }

  .hd-logo {
    grid-column: 1 / 2;
  }

  .logoLink {
    display: block;
    width: fit-content;
  }

  .logo-img-hd {
    height: 6rem;
    width: auto;

    transition: all .3s ease;
  }

  .hd-menu {
    align-items: center;
    background-color: var(--rw-black);
    display: flex;
    flex-direction: row;
    grid-column: 3 / 4;
    height: 4.5rem;
    gap: 1.5rem;
    justify-content: center;
    justify-self: end;
    transition: all .3s ease;
    width: 12.5rem;
  }

  .hd-menu:hover {
    cursor: pointer;
    opacity: .8;
  }

  .menu-title {
    color: #fff;
    font-family: var(--font-notosans);
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .2rem;
    line-height: 1;
    transition: all .3s ease;
  }

  .toggle-hamburger {
    align-items: end;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    transition: all .3s ease;
    width: 3rem;
  }

  .toggle-bar {
    background-color: #fff;
    height: .2rem;
    width: 100%;
  }

  .toggle-bar:nth-of-type(1) {
  }

  .toggle-bar:nth-of-type(2) {
    width: 80%;
  }

  .toggle-bar:nth-of-type(3) {
  }
  
  .hd-gnav {
    display: none;
  }

  /** Scroll and shrink header **/
  .headerShrink {
    .logo-img-hd {
      transform: scale(.8);
      /* transform-origin: top left; */
      transform-origin: top;
    }

    .hd-menu {
      /* height: 3rem;
      width: 10rem; */
      transform: scale(.8);
      transform-origin: top right;
    }
  }
  
  /** MENU open **/
  header.menuopen {
    background: #fff;
    height: 100vh;
    /* transition: .5s all; */
  
    .headerArea {
      align-items: start;
      gap: 6rem 0;
      justify-content: center;
      padding-left: 0; /* reseet */
    }

    .hd-logo {
      grid-column: 2 / 3;
      justify-self: center;
    }

    .logo-img-hd {
      height: 6rem;
      transform: scale(1); /* reset */
    }

    .hd-menu {
      background-color: #f0f0f0;
      width: 10rem;
    }

    .menu-title {
      color: var(--rw-black);
    }

    .toggle-hamburger {
      display: none;
    }

    .hd-gnav {
      display: block;
      grid-column: 1 / 4;
      grid-row: 2 / 3;
      justify-self: center;
    }

    .gnav-mainlist {
      display: flex;
      flex-direction: column;
      gap: 4rem;
      margin-bottom: 4rem;
    }

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

    .gnav-mainlink {
      font-family: var(--font-copper);
      font-size: 1.8rem;
      font-weight: 500;
      letter-spacing: .1rem;
      line-height: 1;
    }

    .gnav-sublist {
      display: flex;
      flex-direction: row;
      gap: 3rem;
    }

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

    .gnav-sublink {
      font-family: var(--font-copper);
      font-size: 1.6rem;
      letter-spacing: .1rem;
      line-height: 1;
    }
  }

}

/*** TB ***/
@media screen and (min-width: 640px) {
  header {
    padding-top: 3rem;
  }

  .logo-img-hd {
    height: 7rem;
  }

  /** MENU open **/
  header.menuopen {
    .logo-img-hd {
      height: 7rem;
    }
  }

}

/*** iPad ***/
@media screen and (min-width: 768px) {
  header {
  }

  .logoLink {
    margin-left: 0; /* reset */
    margin-right: auto;
  }

  .logo-img-hd {
    height: 9rem;
  }

  .hd-menu {
    height: 6rem;
    width: 14rem;
  }

   /* MENU open */
  header.menuopen {
    padding-top: 4.5rem;  

    .headerArea {
      gap: 3rem 0;
    }

    .hd-logo {
      align-self: start;
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      justify-self: end;
      padding-right: 8rem;
    }
     
    .logo-img-hd {
      height: 9rem;
    }

    .hd-gnav {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }

    .gnav-mainlink {
      font-size: 2.4rem;
      letter-spacing: .2rem;
    }

    .gnav-sublink {
      font-size: 1.8rem;
      letter-spacing: .15rem;
    }
  }
}

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

/*** PC ***/
@media screen and (min-width: 960px) {
  header {
    height: 20rem;
  }

  .headerArea {
    gap: 4rem 0;
  }

  .hd-menu {
    height: 6rem;
    width: 14rem;
  }

  .logo-img-hd {
    height: 13.5rem;
  }

  /* MENU open */
  header.menuopen {
    padding-top: 8rem;  

    .logo-img-hd {
      height: 13.5rem;
    }

    .gnav-mainlink {
      font-size: 2.8rem;
    }

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

/** PC pclg **/
@media screen and (min-width: 1280px) {
  .headerArea {
    padding-left: 5vw;
  }

}


/*================*/
/*    contents    */
/*================*/
@media screen, print {
  main {
    padding-top: 5rem;
  }

  .leadArea {
    margin-bottom: 5rem;
  }

  .pagetitle {
    font-family: var(--font-copper);
    font-size: 2.4rem;
    letter-spacing: .2rem;
    margin-bottom: 3rem;
    text-align: center;
  }
  
  .lead-para {
    line-height: 2;
    text-align: center;
  }

  .contblock + .contblock {
    margin-top: 6rem;
  }

  .block-title {
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: .1rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  .block-para {
    /* text-align: center; */
  }

  .submenuArea {
    margin-top: 8rem;
    margin-top: 6rem;
  }

  .submenu-list {
    border-bottom: #000 solid .1rem;
    border-top: #000 solid .1rem;
    margin-left: auto;
  }

  .submenu-item + .submenu-item {
    border-top: #000 solid .1rem;
  }

  .submenu-link {
    align-items: center;
    display: flex;
    font-family: var(--font-copper);
    font-size: 2rem;
    gap: 1rem;
    letter-spacing: .1rem;
    line-height: 6rem;
    margin-left: auto; /* for safari */
    justify-self: end;
    width: 19.5rem;
  }

  .submenu-link::before {
    aspect-ratio: 10/3;
    background: url(../img/arrow_r.svg) no-repeat;
    background-size: contain;
    content: '';
    height: 2rem;
    width: auto;
  } 
}

/** SP splg **/
@media screen and (min-width: 480px) {
}

/*** TB ***/
@media screen and (min-width: 640px) {
  main {
    padding-top: 4rem;
  }

  .leadArea {
    margin-bottom: 6rem;
  }

  .lead-para {
    font-size: 1.8rem;
  }

  .block-title {
    margin-bottom: 1.5rem;
  }

  .submenuArea {
    margin-top: 14rem;
  }
}

/*** iPad ***/
@media screen and (min-width: 768px) {
  main {
    padding-top: 2rem;
  }

  .leadArea {
    margin-bottom: 7rem;
  }


  .pagetitle {
    font-size: 3.2rem;
  }

  .contblock + .contblock {
    margin-top: 7rem;
  }

  .block-title {
    font-size: 2.4rem;
  }

  .block-para {
    text-align: center;
  }

  .submenuArea {
    margin-top: 14rem;
    width: min(90%, 86rem);
  }

  .submenu-link {
    font-size: 2rem;
    width: 20rem;
  }
}

/*** PC ***/
@media screen and (min-width: 960px) {
  main {
    padding-top: 0rem;
  }
 
  .leadArea {
    margin-bottom: 10rem;
  }

  .contblock + .contblock {
    margin-top: 8rem;
  }

  .block-title {
    font-size: 2.8rem;
  }
   
  .submenuArea {
    margin-top: 20rem;
  }

  .submenu-link {
    font-size: 2.2rem;
    width: 20.5rem;
  }
}

/** PC pclg **/
@media screen and (min-width: 1280px) {  
  .submenu-link {
    font-size: 2.4rem;
    width: 22rem;
  }
}


/*====================*/
/*  background color  */
/*====================*/

@keyframes rainbow {
  0% { background-color: #ffc9ba; }
  14% { background-color: #ffebba; }
  28% { background-color: #fbfc90; }
  42% { background-color: #bafff7; }
  56% { background-color: #bac2ff; }
  70% { background-color: #f7baff; }
  84% { background-color: #ffbac0; }
  98% { background-color: #ffc9ba; }
}

@media screen, print {
  .bg-color {
    position: relative;
  }

  .bg-color::before {
    animation: rainbow ease 25s infinite;
    background-color: #ffc9ba;
    bottom: 0;
    content: '';
    height: var(--rw-bgclr-height); /* fallback */
    left: 0;
    transition: all 5s ease; 
    position: absolute;
    width: 100%;
    z-index: -10;
  }

  .bg-color::after {
    background: linear-gradient(to bottom, #fff 40%, transparent);
    bottom: 0;
    content: '';
    height: 100%;
    height: var(--rw-bgclr-height);
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
  }
}


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

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

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

/*=============*/
/*    totop    */
/*=============*/
@media screen, print {
}

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

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

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


/*================*/
/*     footer     */
/*================*/
@media screen, print {
  footer {
    padding-bottom: 1rem;
    padding-top: 4rem;
  }

  .ft-snslist {
    display: flex;
    justify-content: center;
    margin-bottom: 4rem;
  }

  .ft-snsimg {
    height: 3rem;
  }

  .ft-nav {
    margin-bottom: 5rem;
  }

  .ft-navlist {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
  }

  .ft-navlink {
    display: block;
    font-family: var(--font-copper);
    font-size: 1.6rem;
    font-size: 1.5rem;
    font-weight: var(--rw-fw-3lght);
    letter-spacing: .1rem;
    line-height: 1;
    text-align: center;
  }

  .ft-navlink::first-letter {
    font-size: 115%;
  }

  .ft-copy {
    align-items: end;
    display: flex;
    flex-direction: row;
    font-family: var(--font-copper);
    font-size: 1.5rem;
    font-weight: var(--rw-fw-3lght);
    gap: .5em;
    justify-content: center;
    line-height: normal;
  }

  .ft-copy-para::first-letter {
    font-size: 120%;
  }
}

/*** SP BP ***/
@media screen and (min-width: 375px) {
  .ft-snslist {
    margin-bottom: 2.5rem;
  }

  .ft-navlist {
    gap: 2.5rem 0;
    grid-template-columns: repeat(2, 45%);
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
    width: min(100%, 45rem);
  }

  .ft-navitem {
  }

  .ft-navlink {
    text-align: start;
  }
}

/*** SP BP ***/
@media screen and (min-width: 480px) {
  .ft-navlist {
    gap: 2rem 0;
    grid-template-columns: repeat(2, auto);
    justify-content: space-around;
    margin-left: auto;
    margin-right: auto;
  }
}

/*** TB ***/
@media screen and (min-width: 640px) {
  .ft-snslist {
    margin-bottom: 2rem;
  }

  .ft-navlist {
    gap: 1.5rem 0;
    grid-template-columns: repeat(4, auto);
    justify-content: space-around;
    width: 100%;
  }

  .ft-navlink {
    font-size: 1.4rem;
  }
}

/*** iPad ***/
@media screen and (min-width: 768px) {
  .ft-snslist {
    margin-bottom: 3rem;
  }

  .ft-nav {
    margin-bottom: 3rem;    
  }

  .ft-navlist {
    gap: 0; /* reset */
    grid-auto-flow: column;
    grid-template-columns: none;
    justify-content: space-between;
    width: auto;    
  }

  .ft-navlink,
  .ft-copy {
    font-size: 1.4rem;
  }
}

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

/*** PC ***/
@media screen and (min-width: 960px) {
  .ft-navlist {
    width: 70rem;
    width: 65rem;
  }

  .ft-navlink {
    font-size: 1.3rem;
    letter-spacing: .1rem;
  }

  .ft-copy {
    font-size: 1.2rem;
  }
}

/** 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.headerHide {
    transform: none;
  }

  .logo-img {
    width: 180px;
  }

  #totop {
    display: none!important;
  }

  #snsshare {
    display: none;
  }

  #footer {
  }
}