:root{
    /*-------カラー---------*/
    --white: #fff;
    --text: #333130;
    --textRed: #640125;
    --textPink: #f19ca7;
    --primary: #f5c8c4;
    --secondry: #fff2f1;
    --cta:#f19ca7;
    --glay: #f5f5f5;
    --amido:#8399D8;
    --sousyokuAmido:#87CE59;
    --nakaoreAccordion:#FFA710;
    --mengoshi:#A27FCB;
}
/* ----------------------------------------------
PCとSP
----------------------------------------------- */
@media screen and (min-width: 801px) {
    .pc{
      display:block;
    }
  
    .sp{
      display: none;
    }
  }
  
  @media screen and (max-width: 800px) {
    .pc{
      display: none;
    }
  
    .sp{
      display: block;
    }
  }

  /* ----------------------------------------------
  - Layout
  ----------------------------------------------- */
  body{
    width: 100%;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    line-height: 2;
    -webkit-font-smoothing: antialiased;
    
  }
  body.menu-open{
  position: fixed;
  width: 100%;
  overflow: hidden;
  height: 100svh;
  scroll-behavior: auto !important;
  }

  .l-container{
    position: relative;
    width: 100%;
    max-width: max(1400px, calc(1000px + 7vw));
    margin-inline: auto;
    padding-inline: 7vw;
}
.l-container.-min{
  max-width: max(800px, calc(1000px + 7vw));
}
main {
    position: relative;
    margin-top: 6.5625rem;
  }
  @media screen and (max-width: 800px) {

    main{
        margin-top: 3.75rem;
    }
}



  /* ----------------------------------------------
  header
  ----------------------------------------------- */
  .l-header {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0!important;
    left: 0!important;
    width: 100%;
    height: 105px;
    padding-inline: 1.875rem;
    z-index: 102;
    background-color: var(--white);
  }
  
  
   .c-drawer{
    display: none;
  } 

    /*PC用*/
  @media screen and (min-width: 801px) {

    .p-header__logo img{
        width: 7.8125rem;
      }
      .p-header__logoText{
        font-size: .625rem;
      }
  
    .p-globalNav{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .p-globalNav__list{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0 min(1.875rem, 5vw);
      line-height: 1.2;
    }
  
    .p-globalNav__item{
      position: relative;
      z-index: 3;
      transition: color 0.3s ease;
    }
  
    .p-globalNav__item > a{
      position: relative;
      font-size: clamp(0.9rem, 1.2vw, 1.2em);
      line-height: min(180%, 15vw);
    }

    .p-globalNav__item:hover{
      color: var(--textPink);
    }
    
  }
  
  
  @media screen and (max-width: 800px) {
    .p-header__logoBox{
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    .p-header__logo{
        width: 2.8125rem;
    }
    .p-header__logo a{
        display: flex;
    }
    .p-header__logo img{
        width: 100%;
      }
      .p-header__logoText{
        font-size: .625rem;
      }
  
    .l-header{
      height: 3.75rem;
      padding: .9375rem;
    }

    .l-header__drawerWrap{
        position: fixed;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100dvh;
        top:  3.75rem;
        right: -100%;
        transition: ease 0.4s;
        overflow-y: scroll;
        background-color: var(--white);
        z-index: 999999;
        border-top: 1px solid var(--primary);
      }

    .l-header__drawerWrap.open{
      right: 0;
    }
    .p-globalNav__list{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }
      
    .p-globalNav__item{
        width: 100%;
        border-bottom: 1px solid var(--primary);
    }
    .p-globalNav__item:last-of-type{
        border-bottom: none;
        padding: 1.875rem .9375rem;
    }
    .p-globalNav__item a{
        display: block;
        width: 100%;
        padding: .9375rem;
    }
    .p-globalNav__item .c-ctaButton{
      margin-inline: auto;
    }
    .c-drawer{
      display: block;
      position: fixed;
      top:22px;
      right: 15px;
      z-index: 99999999;
    }
  
  .navbar_toggle {
    position: relative;
    display: block;
    width: 18px;
    height: 14px;
    z-index: 999;
    right: 0;
    top: 0;
  }
  
  .navbar_toggle_icon {
    position: absolute;
    display: block;
    height: 2px;
    width: 100%;
    -webkit-transition: ease 0.5s;
    transition: ease 0.5s;  
    background: var(--primary);
    
  }
  
  .navbar_toggle_icon:nth-child(1) {
    top: 0;
    transition: 0.3s;
  }
  
  .navbar_toggle_icon:nth-child(2) {
    top: 6px;
    transition: 0.3s;
  }
  
  .navbar_toggle_icon:nth-child(3) {
    top: 12px;
    transition: 0.3s;
    opacity: 1;
  }
  
  
  
  .c-drawer.open .navbar_toggle_icon:nth-child(1) {
    top: 50%;
    transition: 0.3s;
    transform: translateY(-50%) rotate(45deg);
  }
  
  .c-drawer.open .navbar_toggle_icon:nth-child(2) {
    display: none;
  }
  
  .c-drawer.open .navbar_toggle_icon:nth-child(3){
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    left: 0;
    margin-top: 0;
    transition: 0.3s;
  }


  
  }

     /* ----------------------------------------------
- ボタン
  ----------------------------------------------- */
  .c-ctaButton{
    display: block;
    width: 100%;
    color: var(--white);
    background-color: var(--cta);
    padding: .625rem;
    text-align: center;
    transition: opacity 0.5s ease;
    border-radius: 5px;
  }
  @media screen and (min-width: 801px) {
    .c-ctaButton:hover{
      opacity: 0.6;
    }
  }

  /*--------------------------------
   MV
---------------------------------*/
  
  .c-contentHero {
    width: 100%;
    aspect-ratio: 1/0.4;
    position: relative;
    min-height: 500px;
    margin-bottom: min(160px, 20vw);
  }
  .c-contentHero__bgImage {
    display: block;
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 1/0.4;
    height: 100%;
  }

  /*--------------------------------
     共通タイトル
  ---------------------------------*/
  .c-sectionHeading{
    background: var(--primary);
    color: var(--white);
    text-align: center;
    padding: min(2rem, 3vw);
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: bold;
    letter-spacing: 3px;
    line-height: 1.3;
  }
  .c-sectionHeading .eng {
    font-weight: normal;
    display: block;
    font-size: 60%;
  }
  .c-subjectHeading {
    display: flex;
    flex-direction: column;
    font-size: clamp(1.3rem, 3vw, 2rem);
    letter-spacing: min(2px, 0.1vw);
    line-height: 1.6;
    text-align: center;
    align-items: center;
    margin: auto;
    font-weight: bold;
    padding: 0 7vw;
    color: var(--textPink);
  }
  .c-subjectHeading .eng {
    display: block;
    color: #ccc;
    font-size: 16px;
    font-weight: bold;
    mix-blend-mode: multiply;
    line-height: 120%
  }
  /* .c-subjectHeading::before {
    display: block;
    content: "";
    background: url(/files/img/icn_product_g.svg) 0 0 no-repeat;
    background-size: auto 100%;
    width: min(40px, 7vw);
    aspect-ratio: 1.4/2;
    margin-bottom: min(30px, 3vw);
    mix-blend-mode: multiply;
  } */
    /*--------------------------------
     フッターリンク
  ---------------------------------*/

  .c-footerLink__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(350px, 50%, 50%), 1fr));
    align-items: flex-start;
  }
  .c-footerLink__items a {
    display: block;
    position: relative;
    aspect-ratio: 2/1;
    background: #aaa;
  }
  .c-footerLink__bgImage {
    position: absolute;
    aspect-ratio: 2/1;
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
    mix-blend-mode: multiply;
    opacity: 0.9;
  }
  .c-footerLink__title {
    position: absolute;
    color: var(--white);
    width: -moz-max-content;
    width: max-content;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--white);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    letter-spacing: min(2px, 0.3vw);
    padding: min(1rem, 10vw) min(2rem, 20vw);
    font-weight: bold;
  }

   /*--------------------------------
     フッター
  ---------------------------------*/
  .l-footer{
    padding-block: 5rem 1.25rem;
    background-color: var(--primary);
    text-align: center;
  }
  .p-footer__address{
    width: fit-content;
  }
  .p-footer__wrapper{
    display: flex;
    justify-content: space-between;
    text-align: left;
    margin-bottom: 5rem ;
    gap: 3.75rem;
  }
  .p-footer__addressbox{
    display: flex;
    flex-direction: row;
    gap: 3.75rem;
  }
   .p-footer__title{
    font-weight: 700;
    margin-bottom: 0.5em;
  }
  .p-footer__name{
    font-size: clamp(1.1rem, 1.5vw, 1.6rem);
  }
  .p-footer__addressbox{
    font-size: clamp(0.9rem, 1.2vw, 1.2em);
    line-height: min(180%, 15vw);
  }

  .p-footer__name{
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 2rem;
  }
  .p-footer__cta{
    margin-top: 2.5rem;
  }
    .l-footer .c-ctaButton{
    max-width: max(225px, 15vw);
  }
  .p-footer__nav{
    display: flex;
    gap: 3.75rem;
    justify-content: center;
  }
  .p-footer__navList{
    display: flex;
    flex-direction: column;
    gap: min(1.2rem, 5vw);
  }
  .p-footer__navItem{
    transition: opacity 0.5s ease;
  }
  .p-footer__navItem a{
    font-size: clamp(0.9rem, 1.2vw, 1.2em);
    line-height: min(180%, 15vw);
  }


  @media screen and (min-width: 801px) {
    .p-footer__navItem:hover{
      opacity: 0.6;
    }
  }
  @media screen and (max-width: 800px) {
    .l-footer{
      padding-block: 3.75rem 1.25rem;
    }
    .p-footer__addressbox{
    flex-direction: column;
    gap: 2rem;
  }
    .p-footer__wrapper{
      flex-direction: column-reverse;
      gap: 3.75rem;
      margin-bottom: 3.75rem;
      align-items: center;
    }
     .p-footer__name{
    margin-bottom: .5rem;
  }
  }
     /*--------------------------------
     アニメーション
  ---------------------------------*/

  .js-fadeup{
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.js-fadeup.is-animated{
    opacity: 1;
    transform: translateY(0);
}

.js-slidein{
  opacity: 0;
}
.js-slidein.is-animated{
  animation: slideIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}