html, body {
    margin: 0;
    padding: 0;
    overflow-x: clip; /* 横方向のはみ出しを防止 */
  }

/*  
.ibm-plex-sans-jp-regular {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-jp-medium {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-jp-semibold {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-sans-jp-bold {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 700;
  font-style: normal;
}
*/


*:not(.globalFooter *){
    font-family: "IBM Plex Sans JP", sans-serif!important;
    font-style: normal!important;
    color: #111;
}
html{
    font-size: 16px;
    scroll-behavior: smooth;
}
a, a:active, a:hover, a:link, a:visited{
    color: inherit;
}
/* サイト幅 */
.con{
    margin-right: auto;
    margin-left: auto;
}
.con-notfade{
    margin-right: auto;
    margin-left: auto;
}

.divheader{
    max-width: 1075px;
    position: relative;
    z-index: 1;
}
.divmain{
    max-width: 1000px;
    position: relative;
    z-index: 1;
}


.anchor{
    margin-top: -6.625rem;
}
.anchor:before{
    content:'';
    display: block;
    padding-top: 6.625rem;
}

/* text */
main,header{
    p{
        font-size: 1.125rem;
        line-height: 2;
        margin-top: 1em;
        margin-bottom: 1em;
        font-weight: 500;
    }
    .hdg_style-1{
        font-size: 1.7rem;

    }
    .hdg_style-2{
        font-size: 6.75rem;
        line-height: 1;
    }
    .hdg_sub-1{
        font-size: 2.25rem;
        font-weight: 700;
        margin-top: -2.5rem;
    }
    .hdg_sub-2{
        line-height: 2;
    }

    a:hover{
        text-decoration: none;
    }



    .color-white{
        color: #fff;
    }
    .color-brown{
        color: #390E0B;
    }
    .color-caramel{
        color: #91470B;
    }
    .color-orange1{
        color: #F7C193;
    }
    .color-orange2{
        color: #D2803B;
    }

    .txt-bold,.txt-bold *{
        font-weight: 700!important;
    }
    .txt-center{
        text-align: center!important;
    }
    .txt-left{
        text-align: left;
    }
    .txt-right{
        text-align: right;
    }

    .txt-span{
        display: inline-block;
    }

    /* room固有 */
    .room-hdg{
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        h2{
            margin: 0;
        }
    }

    @media screen and (max-width:800px){
        p{
            font-size: 1.0625rem;
        }
        .hdg_style-1{
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .hdg_style-2{
            font-size: 4.375rem;
        }
        .hdg_sub-1{
            font-size: 1.625rem;
            margin-top: -1.3rem;
        }
        p{
            font-size: 1.125rem;
        }
        .p1{
        }
        .room-hdg{
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
    }
}

/*カラム*/
.container {
    display: flex;
}
.column-2 {
    flex: 2;
}
.column-2_4 {
    flex: 2.6;
}
.column-3 {
    flex: 3;
    /* メモ：flexプロパティで各カラムの比率を指定しています。
    例えば、左カラムはflex: 1、右カラムはflex: 2とすると、全体の1/3が左カラム、2/3が右カラムになります。
    比率は自由に変更可能です。たとえば、両カラムを1:1にするには両方ともflex: 1に設定します。 */
}

.fleft{
    float: left;
}

.clear{
    clear: both;
}

@media screen and (max-width:599px){
    .container{
        flex-flow: column;
    }
    .descriptions{
        flex-direction: column-reverse;
    }
}


/*セクションパーツ*/
.bg-brown-1{
    background-color: #390E0B;
}

/* リンク用パーツ */
a{
    text-decoration: none;
}
button{
    font-size: 0.9375rem; /* 15px ÷ 16px = 0.9375rem */
    line-height: 1;    /* 32 ÷ 15 ≈ 2.13 */
    padding: 1.43em 3.6em;
    color: #AA5259;
    border: solid #AA5259 2px;
    border-radius: 50px;
    font-weight: 700;
    background-color: inherit;
}
.sp-button{
    padding: 1.15em 2.6em;
}

.more_link{
    font-size: 0.938rem; /* 18px ÷ 16px = 1.125rem */
    line-height: 1.44;   /* 26 ÷ 18 ≈ 1.44 */
    font-weight: 700;
}
.more_link span{
    position: relative;
    color: #AA5259;
}
.more_link span:after{
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #AA5259;
}
.more_link2{
    font-size: 1.125rem; /* 18px ÷ 16px = 1.125rem */
    line-height: 1.44;   /* 26 ÷ 18 ≈ 1.44 */
    font-weight: 700;
}


/* ホバーアニメーション */
  
  /* 矢印 */
  .arrow-wrap{
    overflow: hidden;
    height: 39.8px;
  }
  .arrow-wrap object{
    transform: translateY(-100%);
    transition: 0.4s ease-in-out;
  }
  .arrow-up:hover .arrow-wrap object{
    transform: translateY(18%);
  }
  /* リンク下線 */
  .more_link:hover span:after{
    animation-name: more_link;
    animation-duration: 0.4s ;
  }
  @keyframes more_link {
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
  }
  /* ボタン */
  a button ,a .contact-box ,a .contact-box p{
    transition: 0.4s ease-in-out;
  }
  a:hover button ,a:hover .contact-box{
    background-color: #AA5259;
    color: #fff;
  }
  a:hover .contact-box p{
    color: #fff;
  }



.button{
.btn-3d-wrap {
  display: block;
  width: 432px;
  height: 104px;
  text-decoration: none;
  position: relative;
  margin: 0 auto;
}

.btn-3d {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 426px;
  height: 98px;
  border-radius: 24px;
  background: #390E0B;
  padding-bottom: 21px;
  transition: height 0.2s ease, padding-bottom 0.2s ease;
  box-sizing: border-box;
  outline: 3px solid rgb(255, 255, 255);
}

.btn-3d-wrap:hover .btn-3d {
  height: 83px;
  padding-bottom: 6px;
}

.btn-3d__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 420px;
  height: 74px;
  border-radius: 22px;
  background: #fff;
}

.btn-3d__icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.btn-3d__text {
  font-size: 28px;
  color: #390E0B;
  font-weight: bold;
}
@media (max-width: 800px){
        padding: 0 1.5rem;
    .btn-3d-wrap {
        width: 100%;
    }

    .btn-3d {
        width: 100%;
    }

    .btn-3d__inner {
        width: calc( 100% - 6px );
    }

    .btn-3d__text {
        font-size: 1.125rem;
    }
}
}




/* その他パーツ */
.box-circle{
    border-radius: 1600px;
    aspect-ratio: 1 / 1;
}










/*
 * アニメーション
*/
/* 近づいたら表示 */
.con{
    opacity: 0;
    visibility: hidden;
    transition: all 1.2s ease;
}

.is-active {
    opacity: 1;
    visibility: visible;
  }



/*個別パーツのフェード*/
/* 回転あり */
.plus-fade-up {
  opacity: 0;
  transform: translate(0%, 20%) rotate(45deg);
  transition: opacity 0.8s ease var(--delay, 0s), 
              transform 0.8s ease var(--delay, 0s);
}
.plus-fade-up.is-visible {
  opacity: 1;
  transform: translate(0%, 0%) rotate(0deg);
}

/* 回転なし */
.fade-up {
  opacity: 0;
  transform: translate(0%, 20%);
  transition: opacity 0.8s ease var(--delay, 0s), 
              transform 0.8s ease var(--delay, 0s);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translate(0%, 0%);
}

/* バウンス付き（5番目用） */
.plus-fade-up.bounce {
  opacity: 0;
  transform: translate(0%, 20%) rotate(45deg) scale(1);
  transition: none;
}
.plus-fade-up.bounce.is-visible {
  animation: rotateAndBounce 1.2s ease var(--delay, 0s) forwards;
}

@keyframes rotateAndBounce {
  0% {
    opacity: 0;
    transform: translate(0%, 20%) rotate(45deg) scale(1);
  }
  40% {
    opacity: 1;
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
  60% {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
  75% {
    transform: translate(0%, 0%) rotate(0deg) scale(1.2);
  }
  88% {
    transform: translate(0%, 0%) rotate(0deg) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
}


/* スマホ表示関連 */
.sp-only{
    display: none;
}
.sp-br{
    display: block;
}
.pc-br{
    display: none;
}
@media (min-width: 800px){
    .pc-br{
        display: block;
    }
    .sp-br{
        display: none;
    }
    .sp-mlr-width,.sp-mlr-padding{
        max-width: none;
    }
}
@media (max-width: 1100px){
    .sp-mlr-padding {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width:985px){
    .imp_pc-only{
        display: none;
    }
}
@media (max-width: 800px){
    .sp-mlr-width{
        max-width: calc( 100% - 3rem );
    }
    .pc-remove{
        display: none;
    }
}
@media screen and (max-width:599px) {
    .sp-only{
        display: block;
    }
    .pc-only{
        display: none;
    }
    .sp-odr-1{
        order: 1;
    }
    .sp-odr-2{
        order: 2;
    }
    .sp-odr-3{
        order: 3;
    }
}



/*
 * キョロちゃん
 */
.kyoro_chan-wrap{
    width: 1100px;
    margin: 0 auto;
    position: relative;
    div,p,img{
        position: absolute;
        display: block;
    }
}
@media (max-width: 1100px){
    .kyoro_chan-wrap{
        width: 100%;
    }
}

.kyoro_chan-020-1{
    min-width: 249.13px;
    min-height: 229.34px;
    margin-bottom: -229.34px;
    top: -340px;
    right: -24px;
    p{
        right: 2.05em;
        top: 0.6em;
        transform: rotate(13.3deg);
        line-height: 1.5;
    }
}
@media (max-width: 1100px){
    .kyoro_chan-020-1{
        min-width: 204.38px;
        min-height: 192.22px;
        margin-bottom: -0px;
        top: -217px;
        right: 1.5rem;
        p{
            right: 1.25em;
            top: 0.0em;
            transform: rotate(13.3deg);
            line-height: 1.3;
        }
    }
}

.kyoro_chan-030-1{
        min-width: 217.75px;
        min-height: 203.76px;
        margin-bottom: -203.76px;
        top: -128px;
        left: 31px;
    p{
        right: 2.05em;
        top:0.9em;
        transform: rotate(13.3deg);
        font-size: 0.875rem;
    }

}
@media (max-width: 1100px){
    .kyoro_chan-030-1{
        position: relative;
            min-width: 210.62px;
            min-height: 178.35px;
            margin-top: 4rem;
            top: 0px;
            left: 2rem;
        p{
            right: 3.05em;
            top:0.5em;
            transform: rotate(13.3deg);
            font-size: 0.875rem;
        }

    }
}

.kyoro_chan-040-1{
        min-width: 247px;
        min-height: 179.12px;
        margin-bottom: -179.12px;
        top: -291px;
        right: 130px;
    p{
        right: 2.05em;
        top: 2.5em;
        transform: rotate(20.3deg);
        font-size: 0.875rem;
        line-height: 1.4;
    }

}
@media (max-width: 1100px){
.kyoro_chan-wrap{
.kyoro_chan-040-1{
    position: relative;
        min-width: 188.93px;
        min-height: 108.34px;
        margin-bottom: 0px;
        top: 0px;
        right: 1.7rem;
        width: 188.93px;
        margin-left: auto;
        margin-right: 0;
    p{
        top: 1.9em;
        right: 1.00em;
        transform: rotate(20.3deg);
        font-size: 1rem;
        line-height: 1.4;
    }

}
}
}
@media (max-width: 800px){
.kyoro_chan-wrap:has(.kyoro_chan-040-1){
    padding: 1rem 0 3rem;
.kyoro_chan-040-1{
    p{
        top: 4em;
        right: 1.00em;
    }

}
}
}

.kyoro_chan-040-2{
        min-width: 245.83px;
        min-height: 155.08px;
        margin-bottom: -155.08px;
        top: -265px;
        right: 120px;
    p{
        right: 0.45em;
        top: 2.2em;
        transform: rotate(13.3deg);
        font-size: 0.8938rem;
        line-height: 1.4;
    }

}
@media (max-width: 1100px){
.kyoro_chan-wrap{
.kyoro_chan-040-2{
    position: relative;
        min-width: 213.27px;
        min-height: 120.31px;
        margin-bottom: 0px;
        top: 0px;
        right: 0rem;
        width: 213.27px;
        margin-left: auto;
        margin-right: 0;
    p{
        top: 2.2em;
        right: 0.8em;
        transform: rotate(20.3deg);
        font-size: 1rem;
        line-height: 1.5;
    }

}
}
}
@media (max-width: 800px){
.kyoro_chan-wrap:has(.kyoro_chan-040-2){
    padding: 2rem 0;
.kyoro_chan-040-2{
    p{
        top: 4.3em;
        right: 0.80em;
    }

}
}
}



.kyoro_chan-080-1{
        min-width: 300.56px;
        min-height: 197.04px;
        margin-bottom: -197.04px;
        top: -217px;
        right: 3px;
    p{
        right: 2.0em;
        top: 1.15em;
        transform: rotate(13.3deg);
        font-size: 1.1875rem;
        line-height: 1;
    }

}
@media (max-width: 800px){
.kyoro_chan-wrap{
.kyoro_chan-080-1{
    position: relative;
        min-width: 234.76px;
        min-height: 137.16px;
        margin-bottom: 0px;
        top: 0px;
        right: 1.8rem;
        width: 213.27px;
        margin-left: auto;
        margin-right: 0;
    p{
        top: 0.4em;
        right: 2.0em;
        transform: rotate(20.3deg);
        font-size: 1rem;
        line-height: 1.5;
    }

}
}
}



























/* 
 *ヘッダー
 */
header {
  width: calc( 100% - 140px );
  max-width: 1494px;
  border-radius: 64px;
  position: sticky;
  z-index: 999;
  top: 20px;

  .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: calc( 100% - 64px );
    margin: 0 auto;
    padding: 17px 0;
    flex-direction: row;
    * {
      color: #fff;
      font-weight: 700;
      margin: 0;
    }

    div,
    nav {
      flex: 1;
    }

    .header-menu ul {
      display: flex;
      justify-content: flex-end;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 2rem;

      li {
        font-size: 18px;
      }
    }
  }

  /* ハンバーガーボタン（デフォルト非表示） */
  .hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  /* 閉じるエリア（デフォルト非表示） */
  .close-area {
    display: none;
  }

  .close-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
  }

  .close-text {
    color: #d2803b;
    font-size: 14px;
    font-weight: 700;
  }

  /* ========================================
     レスポンシブ
  ======================================== */
  @media (max-width: 1288px) {
    .container {
        .header-title {
            flex: 1.5;
        }
    }
  }

  @media (max-width: 1200px) {
    border-radius: 48px;
    transition: border-radius 0.3s ease;
    width: 97%;
    .container {
        width: 100%;
        justify-content: space-between;
        margin-top: 45px;
        padding: 25px 20px;
        

        /* ナビゲーション - アニメーション用設定 */
        .header-menu {
            flex: none !important;
            width: 100% !important;
            order: 3 !important;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            padding-top: 0;
            transition: max-height 0.3s ease, opacity 0.3s ease, padding-top 0.3s ease;

            ul {
                flex-direction: column;
                align-items: center;
                gap: 15px;
                align-items: flex-start;
                width: 80%;
                margin: 0 auto;
            }
        }
    }

    /* タイトル */
    .header-title {
      flex: 1 !important;
      order: 1 !important;
    }

    /* ハンバーガーボタン表示・右端配置 */
    .hamburger-btn {
      display: block !important;
      flex: none !important;
      order: 2 !important;
      margin-left: auto !important;
      transition: opacity 0.3s ease;
    }

    .header-menu-txt {
      text-align: center;
    }

    /* 閉じるエリア - アニメーション用設定 */
    .close-area {
      display: flex !important;
      flex: none !important;
      width: 100% !important;
      justify-content: center !important;
      order: 4 !important;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      padding-top: 0;
      transition: max-height 0.3s ease, opacity 0.3s ease, padding-top 0.3s ease;
    }

    /* ========================================
       メニューオープン時
    ======================================== */
    &.menu-open {
      border-radius: 48px;

      .hamburger-btn {
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
      }

      .header-menu {
        max-height: 300px !important;
        opacity: 1 !important;
        padding-top: 25px !important;
      }

      .close-area {
        max-height: 100px !important;
        opacity: 1 !important;
        padding-top: 20px !important;
      }
    }
  }
    @media (max-width: 800px){
        border-radius: 41px;
        .container {
            margin-top: 22.5px;
            padding: 16px 32px 16px 38px;
        }
        &.menu-open {
            border-radius: 41px;
        }
    }
}
.menu-anchor{
    position: relative;
    height: 0;
}
#services{
    top:0px;
}
#case{
    top:-200px;
}
#advantages{
    top:-200px;
}
#contact{
    top:-50px;
}
@media (max-width: 1100px){
    #services{
        top:-200px;
    }
    #case{
        top:-400px;
    }
    #advantages{
        top:-380px;
    }
    #contact{
        top:-270px;
    }
}




/* 
  FV
*/
.fv{
    .fv-copy{
        margin-top: 67.7px;
        img{
            display: block;
        }
        width: 1100px;
        .fv-copy-logo{
            width: 170px;
        }
        .fv-copy-txt{
            margin-top: 32px;
            width: 712px;
            position: relative;
            z-index: 8;
        }
    }
    @media (max-width: 800px){
        padding-top: 20px;
        .fv-copy{
            margin-top: 22px;
            .fv-copy-logo{
                width: 103px;
            }
            .fv-copy-txt{
                margin-top: 16px;
            }
        }
    }
}
.fv-imgs{
    padding-bottom: min(12.5vw, 200px);
    margin-top: 84px;
    width: 100%;
    background:url("img/010fv-bg.webp");
    background-repeat: repeat;
    background-size: 262px;
    .fv-imgs-wrap{
        position: relative;
        height: 790px;
        img,div{
            display: block;
            border-radius: 60px;
            border: solid 11px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .img-01{
            width: 732px;
            border-color: #390E0B;
            top:-453px;
            right: -1100px;
            z-index: 2;
        }
        .img-02{
            width: 825.4px;
            border-color: #F8D448;
            top: -28px;
            left: -1000px;
            z-index: 2;
        }
        .img-03{
            width: 656px;
            border-color: #C62D27;
            top:324px;
            left: -344px;
            z-index: 3;
        }
        .img-04{
            width: 839px;
            border-color: #D2803B;
            top:117px;
            right: -980px;
            z-index: 4;
        }

        .box-01{
            width: 727px;
            aspect-ratio: 727 / 606;
            background-color: #390E0B;
            border: 0px;
            top:-87px;
            right: -1732px;
            z-index: 1;
        }
        .box-02{
            width: 691px;
            aspect-ratio: 691 / 459;
            background-color: #D1803B;
            border: 0px;
            top:246px;
            left: -1580px;
            z-index: 1;
        }

        .fv-plus-main{
            border: 0px;
            width: 400px;
            top: -200px;
            right: -313px;
            z-index: 7;
        }
        .fv-plus{
            background-color: #fff;
            width: 162px;
            border: solid 8px;
            border-radius:1600px;
            z-index: 6;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            *{
                border: 0px;
            }
            img{
                position: static;
                width: 82px;
                margin: 0;
            }
            p{
                position: static;
                font-size: 1.625rem;
                margin: 0;
                padding: 0;
            }
        }
        .fv-plus-1{
            top: -64px;
            right: -922px;
            border-color: #390E0B;
        }
        .fv-plus-2{
            top: 12px;
            left: -426px;
            border-color: #F8D448;
        }
        .fv-plus-3{
            top: 360px;
            left: -740px;
            border-color: #C62D27;
        }
        .fv-plus-4{
            top: 497px;
            right: -330px;
            border-color: #D2803B;
        }
    }
    .fv-recognition{
        max-width: 880px;
        margin: 4rem auto 2rem;
        position: relative;
        .fv-recognition-side{
            position: absolute;
        }
        .fv-recognition-left{
            width: 628px;
            top:-83px;
            left: -660px;
        }
        .fv-recognition-right{
            width: 525.5px;
            top:-12px;
            right: -546px;
        }
        .container{
            margin-left: 12px;
            gap: 80px;
            .morinaga_recognition{
                max-width: 440px;
            }
            h2{
                margin-top: 53px;
                font-size: 2.4rem;
            }
            p{
                width:366px;
                font-size: 1.25rem;
            }
            span{
                font-size: 0.75em;
            }
            .fv-con > :nth-child(3){
                font-size: 1rem;
            }
        }
        
    }
    @media (max-width: 800px){
        background-size: 112px;
        margin-top: 64px;
        .fv-imgs-wrap{
            height: 530px;
            img,div{
                border-radius: 30px;
                border: solid 6px;
            }
            .img-01{
                width:254.55px;
                top: 107px;
                right: -201px;
                transform-origin: 0% 100%;
                z-index: 2;
            }
            .img-02{
                width: 298.36px;
                border-color: #F8D448;
                top: -33px;
                left: -148px;
                z-index: 1;
            }
            .img-03{
                width: 296.28px;
                top: 339.2px;
                left: 137px;
                object-position: 100% 100%;
                z-index: 3;
            }
            .img-04{
                width: 295.04px;
                top: 215px;
                right: 0;
                left: -181px;
                z-index: 4;
            }

            .box-01{
                width: 248.40px;
                aspect-ratio: 727 / 606;
                top: 182px;
                right: -486px;
            }
            .box-02{
                width: 285.40px;
                aspect-ratio: 691 / 459;
                top: 312px;
                left: -454px;
            }

            .fv-plus-main{
                width: 162.00px;
                top: -258px;
                left: -118px;
            }
            .fv-plus{
                max-width: 93px;
                top: 2px;
                border: solid 6px;
                z-index: 5;
                *{
                    border: 0px;
                }
                img{
                    max-width: 35.75px;
                }
                p{
                    font-size: 1rem;
                }
            }
            .fv-plus-1{
                top: 63px;
                right: -254px;
                border-color: #390E0B;
            }
            .fv-plus-2{
                top: 110px;
                left: -250px;
                border-color: #F8D448;
            }
            .fv-plus-3{
                top: 315px;
                left: 165px;
                border-color: #C62D27;
            }
            .fv-plus-4{
                top: 372px;
                right: 238px;
                border-color: #D2803B;
            }
        }
        .fv-recognition{
            .fv-recognition-side{
                position: static;
            }
            .fv-recognition-side-con{
                flex-direction: row !important;
                flex-wrap: nowrap;
                gap: 1.5rem;
                width: 176%;
                margin: 1.5rem 0;
            }
            .fv-recognition-left,.fv-recognition-right{
                width: clamp( 232px, 36%, 500px );
                flex-shrink: 0;
            }
            .container{
                margin-left: 0;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap:0;
                .morinaga_recognition{
                    min-width: clamp( 387.83px, 100%, 800px );
                }
                .fv-con:has(h2){
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                h2{
                    margin-top: 1.125rem;
                    margin-bottom: 0;
                    font-size: 1.875rem;
                    text-align: center;
                }
                p{
                    margin-top: 0;
                    width:100%;
                    font-size: 1rem;
                }
                .fv-con > :nth-child(3){
                    font-size: 1.25rem;
                }
            }
            
        }
    }
}


/*
Solutions
*/
.solutions{
    background: url("img/020solution-bg.webp");
    background-size:100%;
    background-repeat: no-repeat;
    background-color: #390E0B;
    clip-path: polygon(50% 0, 100% min(12.5vw, 200px), 100% 100%, 0 100%, 0 min(12.5vw, 200px));
    margin-top: max(-12.5vw, -200px);
    padding-top: 12.5vw;
    padding-bottom: 15rem;
    .solutions-question{
        font-size: 2.25rem;
        margin: 0 0 0.875rem;
    }
    .con{
        max-width: 1100px;
        .container:has(.solutions-question-con){
            gap: 6.25rem;
            div{
                display: flex;
                flex-direction: column;
                align-items: center;
            }
        }
        .room-hdg{
            margin-top: 8.5rem;
            h2{
                color: #71514F;
            }
            .hdg_sub-1{
                color: #fff;
                line-height: 1.4;
                margin-bottom: 0;
            }
            .hdg_sub-2{
                max-width: 345px;
                margin: 0.5em 0 0;
            }
        }
    }
    .solutions-contents{
        height: 840px;
        width: 100%;
        text-align: center;
        position: relative;
        .box-circle{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .solutions-pc {
            position: absolute;
            top:0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .solutions-main{
            width: 671px;
            outline: 28px solid rgb(255, 255, 255);
            outline-offset: -28px;
            top: -300px;
            right: -264px;
            img{
                width: 210px;
            }
            h3{
                font-size: 3.75rem;
                line-height: 2;
                margin: 0;
                color: #fff;
            }
            p{
                margin-top: 0;
                color: #F7C193;
            }
        }
        .solutions-results{
                display: flex;
                flex-wrap: wrap;
            .solutions-results-con{
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .solutions-results-title{
                width: 218px;
                background-color: #fff;
                position: relative;
                z-index: 2;
                img{
                    width: 110px;
                }
                h4{
                    font-size: 2rem;
                    line-height: 2;
                    margin: 0;
                }
            }
            .solutions-results-text{
                width: 250px;
                background-color: #5B3634;
                p{
                    margin: 0em;
                    font-size: 1.06rem;
                }
            }

            .results-1{/*新規顧客*/
                top: 213px;
                left: -158px;
                .solutions-results-text{
                    top: 168px;
                    left: -152px;
                }
                p{
                    margin-top: 0.8em;
                }
            }
            .results-2{/*客単価*/
                top: 266px;
                right: -355px;
                .solutions-results-text{
                    top: 178px;
                    left: -37px;
                }
                p{
                    margin-top: 0.5em;
                }
            }
            .results-3{/*話題化*/
                top: 23px;
                left: -492px;
                 > :nth-child(2){
                    top: 47px;
                    left: -401px;
                    p{
                        margin-top: 0;
                    }
                }
                 > :nth-child(3){
                    top: 237px;
                    left: -401px;
                    p{
                        margin-top: 1em;
                    }
                }
            }
            .results-4{/*差別化*/
                top: 135px;
                right: -902px;
                 > :nth-child(2){
                    top: 168px;
                }
                 > :nth-child(3){
                    top: 354px;
                }
            }
        }
    }
    @media (max-width: 1100px){
        background-image: url("img/020solution-bg-sp.webp");
        background-size: 100%;
        background-repeat: no-repeat;
        padding-top: 20vw;
        padding-bottom: 20rem;
        .con:has(.solutions-question) .container{
            display: block;
            margin: 0 auto;
            text-align: center;
            .solutions-question-con{
                display: inline-block;
                max-width: 49%;
            }
            .solutions-question-con:nth-child(3){
                max-width: 55%;
            }
        }
        .solutions-question{
            font-size: 1.625rem;
            margin: 0 0 0.875rem;
            height: auto;
        }
        .solutions-contents{
            display: flex;
            flex-direction: column;
            align-items: center;
            height: auto;
            width: 96%;
            margin: 0 auto;
            gap: 0;
            .solutions-pc{
                position: static;
            }
            .solutions-main{/*clamp*/
                width: 100%;
                outline: 21px solid rgb(255, 255, 255);
                outline-offset: -21px;
                img{
                    width: 34%;
                }
                h3{
                    font-size: 9vw;
                }
                p{
                    font-size: 4.1vw;
                }
            }
            .solutions-results{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 5rem 1rem;
                .solutions-results-con{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: calc(50% - 1rem); /* 2列に */
                    position: static; /* absoluteを解除 */
                }
                .solutions-results-title{
                    width: 73.5%;
                    position: relative;
                    img{
                        width: 38%;
                    }
                    h4{
                        font-size: 5vw;
                        line-height: 2;
                        margin: 0;
                    }
                }
                .solutions-results-text{
                    width: 100%;
                    margin: -2rem;
                    p{
                        margin: 0rem;
                        font-size: 4.2vw;
                        line-height: 1.5;
                    }
                }
                .results-3 {
                    > :nth-child(3){
                        margin-top: -1rem;
                        z-index: -1;
                    }
                }
                .results-4 {
                    > :nth-child(3){
                        margin-top: -1rem;
                        z-index: -1;
                        p{
                            margin-top: 1em;
                        }
                    }
                }
            }
        }
        .button{
            margin-top: 7rem;
        }

    }
}

.slide-bg{
  position: relative;
  z-index: 1;
  padding: 192px 0 141px;
  margin-top: -192px;
  margin-bottom: -141px;
  background: url("img/slide-bg.webp");
  background-size: 1098px auto;
  background-repeat: repeat-x;
}

.slide-bg:has(.slide02-con){
    padding-bottom: 196px;
}

.slide-left {
  display: flex;
  width: max-content;
  animation: slide-scroll-left 50s linear infinite;
  gap: 55px;
}

.slide-right {
  display: flex;
  width: max-content;
  animation: slide-scroll-right 50s linear infinite;
  gap: 55px;
}

.slide-right:has(.slide02-con){
    gap: 1rem;
}

.slide01-con {
  flex-shrink: 0;
}

.slide01-con img {
  display: block;
  width: 210px;
  height: auto;
  pointer-events: none;
}
.slide02-con img {
  display: block;
  width: 263px;
  height: auto;
  pointer-events: none;
  
}
@media (max-width: 800px){
    .slide-bg{
        background: url("img/slide-bg-sp.webp");
        background-size: 100vw;
        background-repeat: no-repeat;
        padding: 23.467vw 0;
        margin-top: -23.467vw;
        margin-bottom: -23.467vw;
    }
    .slide-bg:has(.slide02-con){
        padding: 30vw 0;
        margin-top: -30vw;
        margin-bottom: -30vw;
    }
    .slide01-con{
        max-width: 32.87vw;
        img{
            width: 100%;
        }
    } 
    .slide02-con{
        max-width: 34.163vw;
        img{
            width: 100%;
        }
    }
    
}
@keyframes slide-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes slide-scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.services{
    background: url("img/030services-bottom_bg.webp"),url(img/030services-bg.webp);
    background-size: 228px,375px;
    background-repeat: repeat-x,repeat;
    background-position:50% 100%,50% 0%;
    background-color: #FEF4DD;
    padding: 193px 0px 363px;
    .con{
        max-width: 1200px;
        .room-hdg{
            h2{
                color: #F9D95D;
            }
        }
        .container{
            gap: 6.9%;
            text-align: center;
            div{
                flex-basis: 19.83%;
            }
            img{
                width: 95%;
                max-width: 215.83px;
            }
            p{
                text-align: left;
            }
            .txt-aux{
                font-size: 0.8rem;
            }
            .services-proposal{
                font-size: 2rem;
            }
            .services-proposal-con:first-child{
                z-index: 4;
            }
            .services-proposal-con:nth-child(2){
                z-index: 3;
            }
            .services-proposal-con:nth-child(3){
                z-index: 2;
            }
            .services-proposal-con{
                margin-top: 2rem;
                position: relative;
                *:not(.proposal-bg){
                    position: relative;
                    z-index: 3;
                }
                .proposal-bg{
                    width: 324px;
                    height: auto;
                    aspect-ratio: 1 / 1;
                    background-color: #FFFDF9;
                    left: 50%;
                    position: absolute;
                    z-index: 0;
                    top:30px;
                    left: 50%;
                    transform: translateX(-50%) rotate(45deg);
                    margin: 0 auto;
                }

            }
            h4{
                font-size: 1.4rem;
            }
        }
    }
    .button{
        margin-top: 86px;
    }
    @media (max-width: 1200px){
        background-size: 110px, 221px;
        padding-bottom: 450px;
        .con{
            .services-proposal{
                font-size: 1.375rem;
                text-align: left!important;
            }
            .container{
                flex-direction: column;
                img{
                    width: 45.3%;
                }
                h4{
                    font-size: 1.5rem;
                    margin: 2rem auto;
                }
                p{
                    font-size: 1.0625rem;
                    margin-bottom: 0;
                    max-width: 500px;
                    margin-left: auto;
                    margin-right: auto;
                }
                .services-proposal-con{
                    margin-top: 0;
                    .proposal-bg{
                        width: 75%;
                        max-width: 290px;
                    }

                }
            }
        }
        
        .services-proposal-con:first-child{
            p{
                margin-bottom: 1em;
            }
        }

        .button{
            margin-top: 43px;
        }
    }
    @media (max-width: 420px){
        .services-proposal-con:first-child{
            p{
                margin-bottom: 0em;
            }
        }
    }
}



.case{
    background-image: url("img/040case-bg.webp");
    background-size: 228px;
    background-repeat: repeat;
    background-color: #CC423D;
    background-position: 50% 0%;
    padding-bottom: 308px;
    .con{
        max-width: 1300px;
        .room-hdg{
            h2{
                color: #D76C69;
            }
            .hdg_sub-1{
                color: #FEF7E7;
            }
        }
    }
    
    .case-box{
        background-color: #fff;
        border-radius: 60px;
        text-align: center;
        margin-top: 7.5rem;
        padding: 0 100px 80px;
        p,h4{
            text-align: left;
            max-width: 1000px;
            margin: auto;
        }

        .case-box-title{
            width: 50%;
            border: solid 4px #fff;
            border-radius: 500px;
            margin-left: auto;
            margin-right: auto;
            transform: translateY(-30px);
            background-color: #C62D27;
            h3{
                font-size: 1.375rem;
                line-height: 1;
                margin: 0.8rem 0;
            }
        }

        .case-box-main{
            margin-top: 25px;
            .case-company-logo{
                height: 70px;
                width: auto;
            }
            .case-brand-logo{
                width: 446px;
                margin-top: 19px;
            }
            .case-brand-logo-his{
                width: 311px;
                margin-top: 19px;
            }
            .case-description-1{
                margin-top: 2.625rem;
            }
            .container{
                margin-top: 1rem;
            }
            .case-description-2{
                margin-top: 1.5rem;
            }
            h4{
                margin-top: 2.75rem;
                font-size: 1.125rem;
            }
        }
    }
    .button{
        margin-top: 117px;
    }
    @media (max-width: 1100px){
        background-size: 110px;
        padding-bottom: 208px;
        .case-box{
            padding: 0 24px 80px;
            border-radius: 40px;
            .case-box-title,.case-box-main{
                width: 100%;
            }
        }
            
        .button{
            margin-top: 57px;
        }
    }
    @media (max-width: 800px){
        padding-bottom: calc( 30vw + 3rem );
        .case-box{
            .case-box-title{
                h3{
                    font-size: 1.125rem;
                    line-height: 1.5;
                }
            }
            .case-box-main{
                .case-company-logo:not(.case-company-logo-his){
                    height: auto;
                    width: 77.8%;
                }
                .case-company-logo-his{
                    width: 36%;
                    height: auto;
                    margin-top: 19px;
                }
                .case-brand-logo, .case-brand-logo-his{
                    width: 100%;
                }
                .container{
                    margin-top: 2rem;
                    flex-direction: column;
                    align-items: center;
                    .case-img-con{
                        width: 100vw;
                    }
                }
                .case-description-2{
                    margin-top: 1.5rem;
                }
                h4{
                    margin-top: 2.75rem;
                    font-size: 1.125rem;
                    text-align: center;
                }
                picture img{
                    margin-top: 2rem;
                }
            }
        }
    }
}


.voices{
    background: url("img/050voice-bottom.webp"),url("img/050voice-bg.webp");
    background-size: 100%;
    background-repeat: no-repeat,repeat-y;
    background-position: 50% 101%,0% 0%;
    background-color: #D2803B;
    padding-top: 220px;
    padding-bottom: 17.6875rem;
    .con{
        .room-hdg{
            h2{
                color: #E0A676;
            }
            p{
                margin-left: 0.6em;
            }
        }
    }

    .voices-box{
        width: 1266.73px;
        height: 1312.24px;
        background: url("img/050voice-box-pc.webp");
        background-size: 1266.73px;
        background-position: 50% 0%;
        margin-top: 4rem;
        padding-top: 60px;
        .profile,.description{
            max-width: 800px;
            margin: 0 auto;
        }
        .profile{
            gap: 51px;
            .profile-con-1{
                flex-basis: 37%;
                flex-shrink: 0;
                img{
                    border-radius: 1000px;
                }
            }
            .profile-con-2{
                .company-logo{
                    height: 60.5px;
                }
                .company-name{
                    margin: 1.875rem 0 0;
                    font-size: 1.875rem;
                }
                .name{
                    margin: 0;
                    font-size: 1.25rem;
                }
                .property{
                    padding: 0;
                    li{
                        font-size: 1.125rem;
                        line-height: 1.8;
                    }
                }
            }
        }
        .description{
            position: relative;
            h4{
                font-size: 1.875rem;
                margin: 1.25rem 0 0;
            }
            .description-1{
            }
            img{
                width: 720px;
                position: absolute;
                left: -40%;
                border-radius: 60px;
            }
            .description-2{
                width: 50%;
                padding-left: 2.6rem;
                margin-left: auto;
                margin-right: 0;
            }
        }
        .description-2{
            img{
                left: 55%;
            }
            .description-2{
                margin-left: 0;
                margin-right: auto;
                padding: 0;
            }
        }
        @media (max-width: 1266.73px){
            width: 100%;
        }
    }
    .button{
        padding-top: 7.375rem;
    }
    @media (max-width: 800px){
        background: url("img/050voice-bottom-sp.webp"),url("img/050voice-bg.webp");
        background-size: 100%,160%;
        background-repeat: no-repeat,repeat-y;
        background-position: 50% 101%,0% 0%;
        background-color: #D2803B;
        padding-top: 220px;
        padding-bottom: 4rem;
        .voices-box {
            --bg-unit: calc(100vw * 69.39 / 375);
            --box-color: #E9C09D;
            
            position: relative;
            background: 
            url('img/050voice-box-sp.webp') repeat-y center top / 100% var(--bg-unit),
            repeating-linear-gradient(
                to bottom,
                var(--box-color) 0,
                var(--box-color) 3px,
                transparent 3px,
                transparent calc(var(--bg-unit) - 3px),
                var(--box-color) calc(var(--bg-unit) - 3px),
                var(--box-color) var(--bg-unit)
            );
        }
        
        /* 2つ目以降のvoices-boxに間隔を設定 */
        .voices-box + .voices-box {
            /* 84px + 上の疑似要素分(--bg-unit) + 下の疑似要素分(--bg-unit) */
            margin-top: calc(84px + var(--bg-unit) * 2);
        }
        
        /* 上部の装飾 */
        .voices-box::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 0;
            aspect-ratio: 375 / 43.67;
            width: 100%;
            height: auto;
            background: url('img/050voice-box-sp-top.webp') no-repeat center / 100% 100%;
            transform: translateY(-100%);
            pointer-events: none;
        }
        
        /* 下部の装飾 */
        .voices-box::after {
            content: '';
            position: absolute;
            bottom: 3px;
            left: 0;
            aspect-ratio: 375 / 43.67;
            width: 100%;
            height: auto;
            background: url('img/050voice-box-sp-bottom.webp') no-repeat center / 100% 100%;
            transform: translateY(100%);
            pointer-events: none;
        }

        .voices-box{
            width: 100%;
            height: auto;
            padding: 0 6.4vw;
            margin-top: 10rem;
            .profile{
                flex-direction: column;
                align-items: center;
                .profile-con-1{
                    width: 73%;
                }
                .profile-con-2{
                        text-align: center;
                    .company-logo{
                        width: 68.5%;
                        height: auto;
                    }
                    .company-logo-his{
                        width: 36% !important;;
                    }
                    .company-name{
                        font-size: 1.125rem;
                    }
                    .name{
                        font-size: 1.25rem;
                    }
                    .property{
                        margin-top: 0;
                        li{
                           font-size:1rem; 
                        }
                    }
                }
            }

            .description{
                    position: static;
                h4{
                    font-size: 1.5rem;
                }
                .description-1{
                    font-size: 1rem;
                }
                img{
                    position: static;
                    width: 100%;
                    margin-left: -6.4vw;
                    border-radius: 0 20px 20px 0;
                }
                .img-right{
                    margin-left: 6.4vw;
                    margin-right: -6.4vw;
                    border-radius: 20px 0 0 20px;
                }
                .description-2{
                    width:100%;
                    font-size: 1rem;
                    padding: 0;
                    margin-bottom: 0;
                }
            }
        }
        
        .button{
            padding-top: 6rem;
            margin-bottom: 4rem;
        }
    }
}



.advantages{
    background-color: #F8D448;
    overflow-x: clip;
    .room-hdg{
        h2{
            color: #FBEAA2;
        }
        .hdg_sub-1{
            margin-bottom: 0;
        }
        .hdg_sub-2{
            margin-top: 1em;
        }
    }
    .points{
        max-width: 940px;
        height: 1060px;
        position: relative;
        .container{
            position: relative;
            .points-con{
                position: absolute;
                z-index: 2;
                display: flex;
                flex-direction: column;
                align-items: center;
                .point-number{
                    width: 129px;
                    position: relative;
                    z-index: 3;
                }
                .main-picture{
                    position: absolute;
                    z-index: 3;
                }
                .box-circle{
                    width: 300px;
                    border: solid 2px #fff;
                    position: absolute;
                    z-index: 1;
                }
                h3{
                    position: relative;
                    z-index: 3;
                    font-size: 1.5rem;
                    margin: 1.3313rem 0 0;
                }
                p{
                    position: relative;
                    z-index: 3;
                    font-size: 1.0625rem;
                    line-height: 1.75;
                    margin: 0.6875rem 0 0;
                }
            }
            .point-1{
                width: 316px;
                top: 170px;
                left: 23px;
                .main-picture{
                    width: 205.5px;
                    left: -154px;
                    top: -134px;
                }
                .box-circle{
                    left: -143px;
                    top: -74px;
                }
            }
            .point-2{
                width: 261px;
                top: 63px;
                right: 254px;
                span{
                    display: block;
                    font-size: 0.875rem;
                }
                .main-picture{
                    width: 274.33px;
                    top: 28px;
                    right: -276px;
                }
                .box-circle{
                    left: 147px;
                    top: -51px;
                }
            }
            .point-3{
                width: 300px;
                top: 659px;
                left: 3px;
                .main-picture{
                    width: 224px;
                    top: -152px;
                    right: -157px;
                }
                .box-circle{
                    left: 87px;
                    top: -100px;
                }
            }
            .point-4{
                width: 410px;
                top: 507px;
                right: 26px;
                .main-picture{
                    width: 266px;
                    top: 267px;
                    right: -26px;
                    border-radius: 500px;
                }
                .box-circle{
                    left: 92px;
                    top: 30px;
                }
            }
        }
        .advantages-left{
            width: 740.39px;
            position: absolute;
            top: -120px;
            left: -790px;
        }
        .advantages-right{
            width: 810.13px;
            position: absolute;
            top: -100px;
            right: -900px;
        }
    }
    
    @media (max-width: 1100px){
        .points{
            height: auto;
            .container{
                position: static;
                    flex-direction: column;
                    align-items: center;
                .points-con{
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    align-items: last baseline;
                    left: auto;
                    right: auto;
                    top: auto;
                    bottom: auto;
                    width: 100%;
                    margin-top: 2rem;
                    .point-number{
                        width: 100%;
                        position: static;
                    }
                    .main-picture{
                        display: none;
                    }
                    .box-circle{
                        width: 300px;
                        border: solid 2px #fff;
                        position: absolute;
                        z-index: 1;
                        top:0;
                    }
                    h3,p{
                        padding: 0 24px;
                        position: relative;
                        z-index: 3;
                    }
                    .box-circle{
                        width: clamp( 300px, 80%, 500px);
                        z-index: 1;
                    }
                }
                .point-1{
                    .box-circle{
                        left: -143px;
                    }
                }
                .point-2{
                    .box-circle{
                        top: 100px;
                        left: -70px;
                    }
                }
                .point-3{
                    .box-circle{
                        left: 30px;
                    }
                }
                .point-4{
                    .box-circle{
                        top: 100px;
                        left: -70px;
                    }
                }
            }
        }
    }
    @media (max-width: 800px){
        .room-hdg{
            padding-top: 3rem;
            h2{
                font-size: 3.5625rem;
            }
        }
    }


    .wecan{
        height: 1830.81px;
        background-image: url("img/060advantages-packages.webp");
        background-size: 2039.77px;
        background-position: 50% 50%;
        margin-top: 2rem;
        padding-top: 30.8rem;
        h3,p{
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        h3{
            font-size: 2rem;
            line-height: 2.1;
            .wakuwaku{
                width: 10.9738rem;
                vertical-align: middle;
            }
            .tanoshisa{
                width: 10.9738rem;
                vertical-align: middle;
            }
        }
        p{
            margin-top: 1.8em;
        }
        .button{
            margin-top: 3.1875rem;
        }
        @media (max-width: 800px){
            height: auto;
            background-image: none;
            margin-top: 2rem;
            padding-top: 0;
            h3,p{
                width: 100%;
                padding: 0 1.5rem;
            }
            h3{
                font-size: 1.625rem;
                line-height: 2.1;
                .wakuwaku,.tanoshisa{
                    width: 8.8125rem;
                    vertical-align: middle;
                }
            }
            p{
                margin-top: 0;
                margin-bottom: -2rem;
                text-align: left!important;
                br{
                    display: none;
                }
            }
            .aux-01{
                margin-bottom: -1rem;
            }
            .button{
                margin-top: 3.1875rem;
                margin-bottom: 2rem;
            }
            .wecan-spimg-top{
                max-width: none;
                width: 120vw;
                margin-left: -8vw;
            }
            .wecan-spimg-bottom{
                max-width: none;
                width: 115vw;
                margin-left: -9vw;
            }
        }
    }

    
}

.workflow{
    background: url("img/070workflow-top.webp"),url("img/070workflow-bg.webp");
    background-size: 898px,272.5px;
    background-repeat: repeat-x,repeat;
    padding-top: 268px;
    padding-bottom: 6.25rem;
    .room-hdg{
        h2{
            color: #FADE76;
        }
        .hdg_sub-1{
            margin-bottom: 0;
        }
        .hdg_sub-2{
            margin-top: 1em;
        }
    }
    .arrow-icon-container {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 1100px;
        margin: 0 auto;
    }
    .arrow-icon {
        flex: 1;
        aspect-ratio: 177 / 167;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin-left: -20px; /* 矢印の形状を詰めるためのネガティブマージン */
        display: flex;
        align-items: center;
        justify-content: center;
        p{
            line-height: 1.5;
            padding-left: 0.6em;
        }
        .kome{
            display: block;
            font-size: 0.75rem;
            text-align: right;
            font-weight: 500!important;
            margin-bottom: -1em;
        }
    }
    .con:has(.ex){
        width: 1100px;
        text-align: end;
        .ex{
            font-size: 0.9375rem;
            text-align: left;
            display: inline-block;
        }
    }
    .button{
        margin-top: 4.5rem;
    }

    
    @media (max-width: 800px){
        background-size: 900px,182px;
        padding-top: 12rem;
        padding-bottom: 6.25rem;
        .room-hdg{
            .hdg_sub-2{
                margin-top: 1em;
                margin-bottom: 4em;
            }
        }
        .arrow-icon {
            flex: 1;
            aspect-ratio: 177 / 167;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            margin-left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            p{
                padding: 0em;
                margin: 0em;
                padding-top: 1em;
                text-align: center;
                font-size: 15px;
                line-height: 1.1;
            }
            span{
                font-weight: 500!important;
            }
            .kome{
                display: block;
                font-size: 0.75rem;
                text-align: right;
                font-weight: 500!important;
                margin-bottom: -1em;
            }
        }
        .con:has(.ex){
            width: 100%;
            padding: 0 1.5rem;
            .ex{
                font-size: 0.75rem;
                text-align: left;
            }
        }
        .button{
            margin-top: 4.5rem;
        }
    }


    .arrow-icon:first-child {
        margin-left: 0;
    }
    /* 各色のSVG背景 */
    .arrow-icon--1 {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 177 167' fill='%23FFFFFF'%3E%3Cpath d='M0,0H154l22.5,83.5L154,167H0l22.5-83.5Z'/%3E%3C/svg%3E");
    }
    .arrow-icon--2 {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 177 167' fill='%23F5E2D2'%3E%3Cpath d='M0,0H154l22.5,83.5L154,167H0l22.5-83.5Z'/%3E%3C/svg%3E");
    }
    .arrow-icon--3 {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 177 167' fill='%23EFD3BA'%3E%3Cpath d='M0,0H154l22.5,83.5L154,167H0l22.5-83.5Z'/%3E%3C/svg%3E");
    }
    .arrow-icon--4 {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 177 167' fill='%23EBC6A7'%3E%3Cpath d='M0,0H154l22.5,83.5L154,167H0l22.5-83.5Z'/%3E%3C/svg%3E");
    }
    .arrow-icon--5 {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 177 167' fill='%23E7BC97'%3E%3Cpath d='M0,0H154l22.5,83.5L154,167H0l22.5-83.5Z'/%3E%3C/svg%3E");
    }
    .arrow-icon--6 {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 177 167' fill='%23E0A97A'%3E%3Cpath d='M0,0H154l22.5,83.5L154,167H0l22.5-83.5Z'/%3E%3C/svg%3E");
    }
    .arrow-icon--7 {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 177 167' fill='%23DB9A62'%3E%3Cpath d='M0,0H154l22.5,83.5L154,167H0l22.5-83.5Z'/%3E%3C/svg%3E");
    }

    /* 1100px以下でリボン型に切り替え、縦並び */
    @media (max-width: 800px) {
        .arrow-icon-container {
            flex-direction: column;
            gap: 0px;
        }
        .arrow-icon {
            width: 100%;
            aspect-ratio: 323 / 89;
            margin-left: 0;
            margin-top: -5vw;
        }
        .arrow-icon + .arrow-icon {
            margin-left: 0;
        }
        .arrow-icon--1 {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 323 89' fill='%23FFFFFF'%3E%3Cpath d='M323,0V69L161.5,89,0,69V0l161.5,20Z'/%3E%3C/svg%3E");
        }
        .arrow-icon--2 {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 323 89' fill='%23F5E2D2'%3E%3Cpath d='M323,0V69L161.5,89,0,69V0l161.5,20Z'/%3E%3C/svg%3E");
        }
        .arrow-icon--3 {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 323 89' fill='%23EFD3BA'%3E%3Cpath d='M323,0V69L161.5,89,0,69V0l161.5,20Z'/%3E%3C/svg%3E");
        }
        .arrow-icon--4 {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 323 89' fill='%23EBC6A7'%3E%3Cpath d='M323,0V69L161.5,89,0,69V0l161.5,20Z'/%3E%3C/svg%3E");
        }
        .arrow-icon--5 {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 323 89' fill='%23E7BC97'%3E%3Cpath d='M323,0V69L161.5,89,0,69V0l161.5,20Z'/%3E%3C/svg%3E");
        }
        .arrow-icon--6 {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 323 89' fill='%23E0A97A'%3E%3Cpath d='M323,0V69L161.5,89,0,69V0l161.5,20Z'/%3E%3C/svg%3E");
        }
        .arrow-icon--7 {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 323 89' fill='%23DB9A62'%3E%3Cpath d='M323,0V69L161.5,89,0,69V0l161.5,20Z'/%3E%3C/svg%3E");
        }
    }
}

.contact{
    padding-top: 132px;
    padding-bottom: 370px;
    background: url("img/slide3-top.webp");
    background-size: 1098px;
    background-repeat: repeat-x;
    background-position: 50% 100%;
    .room-hdg{
        h2{
            color: #D2803B;
            opacity: 0.22;
        }
        .hdg_sub-1{
            margin-bottom: 0;
        }
        .hdg_sub-2{
            margin-top: 1em;
        }
    }
    .button{
        margin-top: 6rem;
        .btn-3d-wrap{
            width: 1100px;
            height: 325px;
        }
        .btn-3d{
            width: 1088px;
            height: 319px;
            border-radius: 64px;
            outline: 0px;
        }

        .btn-3d-wrap:hover .btn-3d{
            height: 304px;
        }
        .btn-3d__inner{
            width: 1100px;
            height: 300px;
            border: 6px solid #390E0B;
            background: url("img/080contact-button.webp");
            background-size: 100%;
            border-radius: 60px;
        }
    }
    @media (max-width: 1100px){
        .room-hdg{
            h2{
                font-size: 3.775rem;
            }
        }
        .button{
            margin-top: 2rem;
            padding: 0 10px;
            .btn-3d-wrap{
                aspect-ratio: 355 / 168.5 ;
                width: 100%;
                height: auto;
            }
            .btn-3d{
                aspect-ratio: 355 / 168.5 ;
                width: 100%;
                height: auto;
                border-radius: 32px;
                outline: 0px;
            }

            .btn-3d-wrap:hover .btn-3d{
                aspect-ratio: 355 / 168.5 ;
                height: auto;
            }
            .btn-3d__inner{
                aspect-ratio: 355 / 168.5 ;
                width: 100%;
                height: auto;
                border: 6px solid #390E0B;
                background: url("img/080contact-button-sp.webp");
                background-size: 100%;
                border-radius: 30px;
            }
        }
    }
}

.slide-03{
    background-color: #C62D27;
    padding-bottom: 6.25rem;
    .to-top{
        position: relative;
        width: 100%;
        a{
            position: absolute;
            width: 218.72px;
            top:-250px;
            right: 70px;
            left: auto;
        }
        a:hover{
            animation: Bounce 0.3s ease var(--delay, 0s) forwards;
        }
    }
}
@media (max-width: 1100px){
    .slide-03{
        .to-top{
            a{
                position: absolute;
                width: clamp(120px, 25%, 240px);
                top:-300px;
                right: 0;
                left: 0;
                margin: 0 auto;
            }
        }
    }
}
@media (max-width: 599px){
    .slide-03{
        .to-top{
            a{
                top:-200px;
            }
        }
    }
}

@keyframes Bounce {
  0% {
    transform:scale(1);
  }
  45% {
    transform:scale(1.2);
  }
  88% {
    transform:scale(0.95);
  }
  100% {
    transform:scale(1);
  }
}