/******************************************
                初期設定
******************************************/

html {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: min(2.08vw,20px);
    font-weight: 500;
    line-height: 1.8;
    color: #5B2D2D;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}


body {
    min-height: 100svh;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}

main {
    width: 100%;
    height: auto;
}

.inner {
    width: 90%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
}
.pc {
    display: block;
}

.sp {
    display: none;
}

.back {
    position: relative;
    background: #fff;
    overflow: hidden;
    z-index: 1;
}

.line-break {
    display: inline-block;
}
.line-break-sp {
    display: inline-block;
}

@media screen and (max-width:768px) {

    html {
        font-size: min(3.75vw, 18px);
    }
    
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .line-break-sp {
    display: initial;
    }
}

/*-------------------- ヘッダー --------------------*/

header {
    position: relative;
    color: #11864D;
    z-index: 10;
}

h1 {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-150%);
}

.icon {
    position: fixed;
    top: 0;
    left: 0;
    width: 26%;
    max-width: 370px;
    aspect-ratio: 288 / 130;
    align-content: center;
    height: auto;
    border-radius: 0 0 3em 0;
    background: #fff;
    padding: 1em 1em 1em .5em;
    z-index: 5;
}

.icon a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icon img {
    width: 25%;
    height: auto;
}

.icon-text {
    text-align: center;
}

.text-j {
    font-weight: 600;
    font-size: min(2.08vw,24px);
    border-bottom: min(.2vw,2.5px) solid #11864D;
}
.text-e {
    font-weight: 600;
    font-size: min(1.3vw,18px);
    padding: 0 .5em;
}

.head_inner {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: end;
    align-items: center;
    padding: .8em 1em;
    gap: 1.5em;
    background: #fff;
}

nav ul {
    display: flex;
    gap: 1.5em;
    font-size: min(1.56vw,16px);
}

nav ul li {
    position: relative;
}

nav ul li::before {
    position: absolute;
    content: "";
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #11864D;
    transition: .3s ease;
    transform: scaleX(0);
    transform-origin: left;
}
nav ul li:hover::before {
    transform: scaleX(1);
}

.tel {
    display: flex;
    width: 18%;
    max-width: 190px;
    align-items: center;
    justify-content: flex-end;
    font-size: min(2.34vw, 25px);
}

.tel img {
    width: 1.3em;
    margin-right: .1em;
    height: auto;    
}

.tel p {
    padding-bottom: .2em;
    font-weight: 600;
    line-height: 1;
}


@media screen and (max-width: 768px) {

    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, .7);
        transition: .5s ease;
    }
    /* スクロール時に付与される非表示クラス */
    header.is-hidden {
        transform: translateY(-100%);
    }

    .icon {
        padding: 0 0 0 .5em;
        aspect-ratio: initial;
        width: auto;
        border-radius: initial;
        max-height: 60px;
        background: initial;
    }
    .icon img {
        width: auto;
        height: 13vw;
        max-height: 60px;
        padding: .2em .5em .2em 0;
    }

    .text-j {
        font-size: min(5vw,26px);
        border-bottom: none;
    }
    .text-e {
        display: none;
    }

    .head-sp {
        position: relative;
        width: 100%;
        height: 13vw;
        max-height: 60px;
    }
    .navi-sp {
        position: absolute;
        top: 0;
        right: 0;
        width: 13vw;
        height: 13vw;
        max-width: 60px;
        max-height: 60px;
        margin: 0 0 0 auto;
        background: #11864D;
        transition: 0.5s ease;
        border-radius: 0 0 0 .8em;
        z-index: 101;
    }
    .navi-sp::before {
        position: absolute;
        content: "";
        width: 70%;
        height: auto;
        aspect-ratio: 1 / 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: url(../img/menu01.webp?0916) no-repeat center / contain;

    }
    .navi-sp.active {
        background: #fff;
    }
    .navi-sp.active::before {
        background: url(../img/menu02.webp?0916) no-repeat center / contain;
    }

    
    .head_inner {
        display: none;
    }

    /* メニューを押した後 */
	.nav-sp-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 100;

        /* ▼ 追加：常時、中身を上下左右中央に配置する設定にしておく */
        display: flex;
        justify-content: center;
        align-items: center;

        /* 右側に */
        visibility: hidden; /*表示しない*/
        transform: translate(100%,0);
        transition: transform .8s ease, visibility .8s;
	}
	.nav-sp-wrap.active{
        visibility: visible; /*表示する*/
        transform: translate(0,0);
        transition: .8s ease;
    }

    /* 背景表示 */
	.nav-back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #F5F5EE;
	}


    /* メニュー中身 */
	.navi_botton {
		position: relative;
		width: 100%;
		height: auto;
        font-weight: 600;
        text-align: center;
        opacity: 0;
        transition: opacity 0.4s ease;
        max-height: 100vh;
        overflow-y: auto;
        color: #5B2D2D;
        transition: opacity 0.4s ease;
	}
    .nav-sp-wrap.active .navi_botton {
        opacity: 1;
    }

    .navi_botton li {
        text-align: left;
        width: 80%;
        max-width: 400px;
        font-size: min(5vw,20px);
        margin: 0 auto min(10vw, 50px);
    }

    .navi_botton li a {
        position: relative;
        display: block;
        line-height: 1;
        padding-bottom: .5em;
        padding-left: 1.5em;
    }
    .navi_botton li:nth-child(8) a {
        display: flex;
        width: 100%;
        margin: 0 auto .5em;
        justify-content: center;
        align-items: end;
        padding-left: 0;

    }
    .navi_botton li a::after {
        position: absolute;
        content: "";
        top: calc(50% - .25em);
        left: 0;
        transform: translate(0,-50%);
        width: 1em;
        height: 1em;
        border-radius: 50%;
        background: url(../img/illust_01.webp) no-repeat center / contain;
    }
    .navi_botton li a::before {
        position: absolute;
        content: "";
        bottom: -4px;
        left: 0;
        width: 100%;
        height: 3px;
        background-image: linear-gradient(to right, #FFC800 60%, transparent 60%);
        background-size: 29px 100%;
        background-repeat: repeat-x;
    }
    li:nth-child(8) a::before,
    li:nth-child(8) a::after {
        display: none;
    }

    .navi_botton .sp-tel {
        display: flex;
        font-size: min(9.575vw,40px);
        justify-content: center;
    }
    .sp-tel a {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sp-tel a img {
        width: 1.2em;
    }
}

/*-------------------- FV --------------------*/

.fv {
    position: relative;
    margin-bottom: 5vw;
    margin-top: 62px;
}

.fv-slider {
    width: 90%;
    margin-left: auto;
    /* 【修正】autoをやめ、aspect-ratioから出る高さと87vhの小さい方を明示 */
    height: min(calc(90vw * 7 / 12), 87vh);
}

.fv-slider .splide__track,
.fv-slider .splide__list,
.fv-slider .splide__slide {
  width: 100%;
  height: 100%;
}

.splide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ページネーション */

.fv-slider .splide__pagination {
    bottom: 0;
    right: 0;
    left: initial;
    transform: translateY(100%);
}

.fv-slider .splide__pagination__page {
    width: 2vw;
    max-width: 25px;
    height: auto;
    aspect-ratio: 91 / 85;
    background: url(../img/icon_02.webp) no-repeat center / contain;
    opacity: 1;
    transition: .3s ease;
    margin: .4em;
    border-radius: 0;
}

.fv-slider .splide__pagination__page.is-active {
    background: url(../img/icon_01.webp) no-repeat center / contain;

}

.fv-text {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(10%,15%);
    width: 41%;
    max-width: 787px;
    height: auto;
    filter: blur(10px);
    animation: 2.5s fv ease forwards;
    opacity: 0;
}
@keyframes fv {
  0% {
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
  }
  80%, 100% {
    opacity: 1;
  }
}


.f-group {
    position: absolute;
}
.group-a {
    bottom: 33%;
    left: 7%;
}



/* ----------足跡---------- */

#fv .foot-0 {
    animation: fv-walk01 .8s 1s ease forwards;
}
@keyframes fv-walk01 {
  0% {
    transform: translate(0%, 20%) ;
    opacity: 0;
  }
  100% {
    transform: translate(0%,0%) ;
  }
  80%, 100% {
    opacity: 1;
  }
}
#fv .foot-01 {
    animation: fv-walk02 .8s 1.3s ease forwards;
}
@keyframes fv-walk02 {
  0% {
    transform: translate(-150%, -120%) rotate(-20deg);
    opacity: 0;
  }
  100% {
    transform: translate(-150%, -150%) rotate(-20deg);
  }
  80%, 100% {
    opacity: 1;
  }
}
#fv .foot-02 {
    animation: fv-walk03 .8s 1.6s ease forwards;
}
@keyframes fv-walk03 {
  0% {
    transform: translate(-50%, -300%) rotate(-10deg);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -350%) rotate(-10deg);
  }
  80%, 100% {
    opacity: 1;
  }
}
#fv .foot-03 {
    animation: fv-walk04 .8s 1.9s ease forwards;
}
@keyframes fv-walk04 {
  0% {
    transform: translate(-250%, -400%) rotate(-20deg);
    opacity: 0;
  }
  100% {
    transform: translate(-250%, -450%) rotate(-20deg);
  }
  80%, 100% {
    opacity: 1;
  }
}

.foot {
    position: absolute;
    top: 0%;
    left: 0%;
    aspect-ratio: 97 / 82;
    width: 2vw;
    max-width: 38px;
    height: auto;
    opacity: 0;
}

/* ----------基本の足跡アニメ---------- */
.walk.active .foot-0 {
    animation: walk0 .8s ease forwards;
}
@keyframes walk0 {
  0% {
    transform: translate(0%, 20%) ;
    opacity: 0;
  }
  100% {
    transform: translate(0%,0%) ;
  }
  80%, 100% {
    opacity: 1;
  }
}

.foot-01 {
    transform: translate(-150%, -150%) rotate(-20deg);
}
.walk.active .foot-01 {
    animation: walk01 .8s .3s ease forwards;
}
@keyframes walk01 {
  0% {
    transform: translate(-150%, -120%) rotate(-20deg);
    opacity: 0;
  }
  100% {
    transform: translate(-150%, -150%) rotate(-20deg);
  }
  80%, 100% {
    opacity: 1;
  }
}

.foot-02 {
    transform: translate(-50%, -350%) rotate(-10deg);
}
.walk.active .foot-02 {
    animation: walk02 .8s .6s ease forwards;
}
@keyframes walk02 {
  0% {
    transform: translate(-50%, -300%) rotate(-10deg);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -350%) rotate(-10deg);
  }
  80%, 100% {
    opacity: 1;
  }
}
.foot-03 {
    transform: translate(-250%, -450%) rotate(-20deg);
}
.walk.active .foot-03 {
    animation: walk03 .8s .9s ease forwards;
}
@keyframes walk03 {
  0% {
    transform: translate(-250%, -400%) rotate(-20deg);
    opacity: 0;
  }
  100% {
    transform: translate(-250%, -450%) rotate(-20deg);
  }
  80%, 100% {
    opacity: 1;
  }
}


@media screen and (max-width: 768px) {

    .fv {
        margin-top: min(13vw,60px);
    }
    
    .fv-slider {
        height: min(calc(90vw * 900 / 707), 87vh);
    }

    .splide__slide img {
        object-position: top left;
    }

    .fv-text {
        width: 65%;
    }

    .fv-slider .splide__pagination__page {
        width: 3vw;
    }

    .group-a {
        display: none;
    }

    .foot {
        width: 4vw;
    }
}

@media screen and (min-width: 1920px) {
    
    .splide img {
        object-position: top;
    }

}



/*-------------------- 共通 --------------------*/

.sec {
    padding: min(17vw,250px) 0;
}
h2 {
    font-size: min(3.9vw,50px);
    line-height: 1.5;
    color: #11864D;
    margin-bottom: 1em;
    text-align: center;
    opacity: 0;
    transform: translate(0,-20px);
}

h3 {
    text-align: center;
    font-size: min(3.125vw,30px);
    line-height: 1.2;
    color: #11864D;
    opacity: 0;
    transform: translate(0,-20px);
}

h3.move.active,
h2.move.active {
    animation: title 1s ease forwards;
}
@keyframes title {
    0% {
        opacity: 0;
        transform: translate(0%, 20px);
    }
    80% {
        opacity: 1;;
    }
    100% {
        opacity: 1;
        transform: translate(0%, 0%);
    }
}

.blank,
.blank01{
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0,-100%);
    width: 100%;
}
.blank {
    height: 17vw;
    max-height: 120px;

}
.blank01 {
    height: 20vw;
    max-height: 170px;
}

.botton {
    display: block;
    margin: 0 auto;
    text-align: center;
    background: #11864D;
    padding: .5em;
    width: 50%;
    max-width: 550px;
    font-size: min(3.125vw,30px);
    border-radius: 1em;
    color: #fff;
    border: solid min(.7vw,3px)  #11864D;
}

.botton:hover {
    background: #fff;
    border: solid min(.7vw,3px)  #11864D;
    color: #11864D;
}

.botton p {
    position: relative;
    display: inline;
    margin-left: -1.5em;
}
.botton p::before {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(150%,-50%);
    content: "";
    border-radius: 50%;
    width: 1.3em;
    height: 1.3em;
    background: #fff;
    transition: .3s ease;
}
.botton:hover p::before {
    background: #11864D;
    transform: translate(175%,-50%);
}
.botton p::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0%;
    transform: translate(300%,-50%) rotate(45deg);
    width: min(1.5vw,15px);
    height: min(1.5vw,15px);
    color: #11864D;
    border-top: min(.3vw,2.5px) solid ;
    border-right: min(.3vw,2.5px) solid;
    transition: .3s ease;
}
.botton:hover p::after {
    color: #fff;
    transform: translate(360%,-50%) rotate(45deg);
}

.illust {
    position: absolute;
    height: auto;
}

@media screen and (max-width:768px) {
    
    h2 {
        font-size: min(6.875vw,35px);
    }

    .botton {
        font-size: min(5.625vw,26px);
        width: 90%;
        max-width: 350px;
    }
    .botton p::after {
        transform: translate(310%,-50%) rotate(45deg);
        width: min(2.6vw,12px);
        height: min(2.6vw,12px);
        border-top: min(.5vw,2.5px) solid ;
        border-right: min(.5vw,2.5px) solid;
    }
    .botton:hover p::after {
        transform: translate(370%,-50%) rotate(45deg);
    }

    .blank01 {
        height: 10vw;
    }
}

/*-------------------- about --------------------*/

.about {
    position: relative;
    overflow: hidden;
    padding:min(22vw, 250px) 0 min(23vw, 400px);
}

.foots02 {
    position: absolute;
    bottom: 0;
    right: 10%;
    width: 20%;
    height: auto;
    aspect-ratio: 97 / 82;
    z-index: 5;
    transform: rotate(45deg);
}

.about-inner {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin:  0 auto;
    align-items: center;
    z-index: 1;
}
.about-inner::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 10%;
    transform: translate(0%,-50%);
    width: 120%;
    height: auto;
    aspect-ratio: 1069 / 610;
    background: url(../img/back_0.webp) no-repeat center / contain;
    z-index: -1;
}

.illust01 {
    top: 0%;
    right: 10%;
    transform: translate(0,-100%);
    width: 10%;
    opacity: 0;
}
.move.active.illust01 {
    animation: move .8s ease-out forwards;
}
@keyframes move {
  0% {
    transform: translate(40%,-80%);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0,-100%);
  }

}

.about-inner h2 {
    margin-bottom: .3em;
    text-align: left;
}

.about-pic {
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: calc((100% - 1em) / 2);
}

/* トランス20px */
@keyframes trans20 {
    0% {
        opacity: 0;
        transform: translate(0%,20px);
    }
    80% {
        opacity: 1;;
    }
    100% {
        opacity: 1;
        transform: translate(0%,0%);
    }
}

.about-main {
    width: 100%;
}
.about-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 2em 2em 0;
}

.pic-inner {
    display: flex;
    width: 83.3%;
    gap: 2em;
    margin: 0 0 0 auto;
}
.pic-inner img {
    width: 50%;
    border-radius: min(2vw, 2em);
}

.inner-text {
    position: relative;
    width: calc((50% - 1em) * 0.833);
    margin-left: 2em;
    text-align: justify;
}

.inner-text h2, 
.inner-text p {
    transform: translate(0%,-20px);
    opacity: 0;
}
.inner-text.move.active h2 {
    animation: trans20 1s ease forwards;
}
.inner-text.move.active p {
    animation: trans20 1s .4s ease forwards;
}

.group-b {
    bottom: -28%;
    right: 10%;
    transform: rotate(60deg);
}


@media screen and (min-width: 1440px) {
    
    .about-main img {
    border-radius: 2em ;
    }

}


@media screen and (max-width:768px) {
    
    .about-inner {
        display: block;
    }
    .about-inner::before {
        width: 200%;
        max-width: 1450px;
        top: 0;
        transform: translate(0,-10%);
    }
    .illust01 {
        width: 14%;
        transform: translate(0,-125%);
    }
    @keyframes move {
        0% {
            transform: translate(40%,-145%);
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        transform: translate(0,-125%);
        }

    }

    .about-pic {
        flex-direction: row;
        width: 95%;
        margin-bottom: 2em;
        gap: 1.5em;
    }

    .about-main {
        width: 60%;
    }
    .about-main img {
        border-radius: 0 1em 1em 0;
    }

    .pic-inner {
        flex-direction: column;
        width: 40%;
        gap: 1.5em;
        margin: initial;
    }
    .pic-inner img {
        width: 100%;
    }

    .inner-text {
        width: 90%;
        margin: 0 auto;
    }

    .group-b {
        bottom: initial;
        top: 15%;
        right: 10%;
        transform: rotate(0deg);
    }
}


/*-------------------- reception --------------------*/

.reception {
    position: relative;
    padding: min(14vw,150px) 0;
    width: 100%;
    height: auto;
    align-content: center;
    background: #F8F5E3;
}
.reception::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    transform: translate(0,-40%);
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 200;
    background: url(../img/back_00_01.webp) no-repeat center / cover;
}
.reception::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    transform: translate(0,50%) scale(-1,-1);
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 200;
    background: url(../img/back_00_01.webp) no-repeat center / cover;
}

.reception .inner {
    position: relative;
    text-align: center;
}

.illust02 {
    width: 8%;
    max-width: 150px;
    top: 0%;
    right: 0%;
    transform: translate(-100%,-120%);
    opacity: 0;
}
.move.active.illust02 {
    animation: move02 .8s ease-out forwards;
}
@keyframes move02 {
  0% {
    transform: translate(-100%,-100%);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-100%,-120%);
  }

}
.illust03 {
    width: 7%;
    max-width: 110px;
    bottom: 0%;
    left: 0%;
    transform: translate(100%,70%);
    z-index: 5;
    opacity: 0;
}
.move.active.illust03 {
    animation: move03 .8s ease-out forwards;
}
@keyframes move03 {
  0% {
    transform: translate(80%,70%);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(100%,70%);
  }
}

.rec-inner {
    text-align: center;
}

.rec-text {
    font-size: min(3.125vw,30px);
    margin-bottom: 2em;
    line-height: 1.3;
}
.rec-text span {
    position: relative;
    font-size: min(3.9vw, 50px);
    font-weight: 600;
    padding: 0 .3em;
    margin-right: .2em;
}

.rec-text span::before {
    position: absolute;
    content: "";
    bottom: -.2em;
    left: 0;
    width: 100%;
    height: min(.6vw,7px);
    background-image: linear-gradient(to right, #FFC800 70%, transparent 70%);
    background-size: 41px 100%;
    background-repeat: repeat-x;
}

.tel-flex {
    display: flex;
    width: 100%;
    margin: 0 auto .5em;
    justify-content: center;
    align-items: end;
    font-size: min(6.5vw,72px);
}

.reception .tel-num01::before,
.reception .tel-num02::before,
.sec_f .tel-num01::before, 
.sec_f .tel-num02::before {
    font-size: min(2.08vw, 20px);
}

.tel-flex img {
    width: 1.3em;
    margin-right: .1em;
    height: auto;
}

.tel-flex p {
    color: #11864D;
    font-size: min(6.5vw,72px);
    line-height: 1;
}

.p-25 {
    font-size: min(2.6VW,25px);
    margin-bottom: .3em;
    line-height: 1.5;
}

.group-c {
    top: 15%;
    left: 10%;
    transform: rotate(45deg);
}
.group-d {
    bottom: 0%;
    right: 10%;
    z-index: 5;
    transform: rotate(5deg);
}

@media screen and (max-width: 768px) {

    .reception .tel-num01::before,
    .reception .tel-num02::before,
    .sec_f .tel-num01::before, 
    .sec_f .tel-num02::before {
        font-size: min(3.75vw, 18px);
    }
    .p-25 {
        font-size: min(5vw,22px);
    }

    .rec-text {
        font-size: min(5vw,26px);
        margin-bottom: 1.5em;
    }
    .rec-text span {
        margin-right: 0;
        line-height: 2.5;
        font-size: min(6.875vw, 35px);
    }

    .rec-text span::before {
        height: min(.8vw,5px);
        background-size: min(6vw,32px) 100%;
    }

    .tel-flex p {
        font-size: min(9.375vw,55px);
    }

    .illust02 {
        transform: translate(-70%, -120%);
        width: 12%;
    }
    .illust03 {
        transform: translate(70%, 50%);
        width: 12%;
    }
    @keyframes move03 {
        0% {
        transform: translate(50%, 50%);
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        transform: translate(70%, 50%);
        }
    }


    .group-d {
        bottom: 5%;
    }
}

/*-------------------- point --------------------*/

.point .inner {
    position: relative;
}

.point-flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4em;
}

.point-item {
    height: auto;
    text-align: center;
    align-content: center;
    line-height: 1.5;
    opacity: 0;
    transform: scale(.8);
}

/* --------- ズームインアニメ--------- */

.move.active.point-item,
.move.active.kind-cont {
    animation: up 1s ease forwards;
}
@keyframes up {
    0% {
        opacity: 0;
        transform: scale(.8);
    }
    80% {
        opacity: 1;;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.point-item01 {
    background: url(../img/illust_05.webp) no-repeat center / contain;
    width: 65%;
    max-width: 600px;
    aspect-ratio: 62 / 32;
    margin: 0 auto;
}
.point-item02 {
    background: url(../img/illust_06.webp) no-repeat center / contain;
    width: 49%;
    aspect-ratio: 52 / 27;
}

.point-item-text {
    font-size: min(3.125vw, 30px);
}

.point-cont {
    text-align: center;
    margin-bottom: 3em;
}

.point-this{
    position: relative;
    font-size: min(3.645vw,40px);
    display: inline-block;
    padding: 0 .5em;
    z-index: 1;
    transform: translate(0,-100%);
    opacity: 0;
}
.move.active.point-this {
    animation: trans20 1.5s ease forwards;
}


.point-this::before {
    position: absolute;
    content: "";
    width: 100%;
    height: .5em;
    bottom: 10%;
    left: 0;
    background: #FFE4AD;
    z-index: -1;
}∂
.point-this01 {
    position: relative;
}
.point-this01::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    left: initial;
    transform: translate(50%,-50%);
    width: 12%;
    height: auto;
    aspect-ratio: 188 / 149;
    background: url(../img/illust_07.webp) no-repeat center / contain;
    opacity: 0;
}
.move.active.point-this01::after {
    animation: asirai .4s .8s ease forwards;
}
@keyframes asirai {
    0% {
        opacity: 0;
        transform: translate(70%,-70%);
    }
    80% {
        opacity: 1;;
    }
    100% {
        opacity: 1;
        transform: translate(50%,-50%);
    }
}

.triangle {
    width: 6%;
    margin: 0 auto;
}
.triangle img {
    display: block;
    margin: 0 auto 1em;
    width: 100%;
    opacity: 0;
    transform: translate(0,-20px);
}
.triangle.move.active img:nth-child(1) {
    animation: trans20 1s ease forwards;
}
.triangle.move.active img:nth-child(2) {
    animation: trans20 1s .4s ease forwards;
}
.triangle.move.active img:nth-child(3) {
    animation: trans20 1s .8s ease forwards;
}

.group-e {
    top: 30%;
    left: 0%;
    transform: translateX(-50%) rotate(70deg);
}
.group-f {
    bottom: 20%;
    right: 0%;
}

.point-this02,
.point-this03 {
    display: none;
}

@media screen and (max-width: 768px) {
    .point-flex {
        display: block;
        margin-bottom: 0;
    }

    .point-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        height: auto;
        min-height: calc(90vw * 32 / 150);
    }
    .point-item02:nth-child(2) {
        margin-bottom: 2em;
        background: url(../img/illust_05.webp) no-repeat center / contain;
    }

    .point-item-text {
        font-size: min(5vw, 26px);
    }

    .point-this {
        font-size: min(6.25vw,30px);
    }

    .point-this01 {
        display: none;
    }
    .point-this02 {
        display: inline-block;
    }
    .point-this02::after {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        left: initial;
        transform: translate(50%, -50%);
        width: 15%;
        height: auto;
        aspect-ratio: 188 / 149;
        background: url(../img/illust_07.webp) no-repeat center / contain;
    }
    .point-this03 {
        display: inline-block;
    }

    .group-e {
        top: 35%;
        transform: translateX(-50%) rotate(50deg);
    }
    .group-f {
        bottom: 45%;
    }
}

/*-------------------- 選ばれる --------------------*/

.reason {
    position: relative;
    background: #F5F5EE;
    margin: min(10vw,100px) 0;
    text-align: justify;
    z-index: 3;
}
.reason::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    transform: translate(0,-100%);
    width: 100%;
    height: auto;
    aspect-ratio: 2560 / 447;
    object-fit: cover;
    z-index: -1;
    background: url(../img/back_01_01.webp) no-repeat center top / cover;
}
.reason::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    transform: translate(0,100%);
    width: 100%;
    height: auto;
    aspect-ratio: 2560 / 350;
    object-fit: cover;
    z-index: -1;
    background: url(../img/back_01_02.webp) no-repeat center bottom / cover;
}
.reason h3.move.active {
    animation: trans20 1s ease forwards;
} 
.r-text p {
    opacity: 0;
    transform: translate(0,20px);
}
.r-text.move.active p {
    animation: trans20 1s .5s ease forwards;
} 
.r-text.move.active .min-bottom {
    animation: trans20 1s .8s ease forwards;
} 


.r-text h3 {
    position: relative;
    text-align: left;
    color: #5B2D2D;
    line-height: 1.5;
    margin-bottom: .5em;
    opacity: 0;
    transform: translate(0,20px);
}
.r-text.move.active h3 {
    animation: trans20 1s ease forwards;
}



.reason-title {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.reason-inner {
    width: 83.3%;
    margin: 0 auto;
}
.reason-title h3,
.reason-title h2 {
    text-align: left;
}
.reason-inner.move.active h3 {
    animation: trans20 1s ease forwards;
} 
.reason-inner.move.active h2 {
    animation: trans20 1s .5s ease forwards;
} 

.r-left {
    display: flex;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.box {
    position: relative;
    aspect-ratio: 652 / 398;
    width: calc((100% - 1em) / 2);
    background: #FFF;
    border: min(.7vw,4px) solid #9DC93A;
    border-radius: 0 2em 2em 0;
    padding: 2em 0;
    border-width: min(.7vw,4px) min(.7vw,4px) min(.7vw,4px) 0;
    align-content: center;
}

.illust04 {
    position: absolute;
    top: 0;
    right: 0%;
    transform: translate(-250%,-240%);
    width: 4%;
    height: auto;
    opacity: 0;
}
.move.active.illust04 {
    animation: move04 .8s ease-out forwards;
}
@keyframes move04 {
  0% {
    transform: translate(-220%,-240%);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-250%,-240%);
  }
}
.illust05 {
    position: absolute;
    top: 0;
    right: 15%;
    transform: translate(0,-102%);
    width: 10%;
    height: auto;
}

.box-img {
    display: block;
    width: 50%;
    height: auto;
    margin: 0 auto;
}

.rever-over {
    position: relative;
    width: 100vw;
    aspect-ratio: 144 / 130;
    max-height: 1200px;
    background: url(../img/back_02.webp) no-repeat center / cover; 
}

.rever {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    flex-direction: row-reverse;
}
.r-pic {
    position: relative;
    width: 50%;
}
.illust06 {
    position: absolute;
    top: 0;
    right: 10%;
    transform: translate(0,-100%);
    width: 15%;
    height: auto;
}

.r-pic-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 2em 0 0 2em;
}
.l-pic-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 0 2em 2em 0 ;
}

.r-text {
    position: relative;
    padding-top: 4em;
    width: calc(50% * 0.833);
    width: calc((50% - 1em) * 0.833);
    margin-left: 2em;
}
.num {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-23%,20%);
    width: 35%;
    max-width: 150px;
}

.num00 {
    width: 40%;
    max-width: 170px;
}

.l-text {
    position: relative;
    margin-left: 0;
    margin-right: 2em;
}
.illust07 {
    position: absolute;
    top: 0;
    right: 0%;
    transform: translate(-80%,-35%);
    width: 14%;
    height: auto;
    opacity: 0;
}
.move.active.illust07 {
    animation: move07 .8s ease-out forwards;
}
@keyframes move07 {
  0% {
    transform: translate(-60%,-15%);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-80%,-35%);
  }
}
.illust08 {
    position: absolute;
    top: 0;
    right: 0%;
    transform: translate(0%,100%);
    width: 11%;
    height: auto;
    opacity: 0;
}
.move.active.illust08 {
    animation: move08 .8s .3s ease-out forwards;
}
@keyframes move08 {
  0% {
    transform: translate(20%,120%);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0%,100%);
  }
}


.illust10 {
    position: absolute;
    top: 0;
    left: 15%;
    transform: translate(0,-100%);
    width: 10%;
    height: auto;
}

.r-left-illust {
    position: relative;
}

.illust09 {
    position: absolute;
    bottom: 0%;
    right: 10%;
    transform: translate(0,230%);
    width: 4%;
    height: auto;
    z-index: 5;
    opacity: 0;
}
.move.active.illust09 {
    animation: move09 .8s ease-out forwards;
}
@keyframes move09 {
  0% {
    transform: translate(0,260%);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0,230%);
  }
}

.min-bottom.botton {
    width: 80%;
    font-size: min(2.6VW, 25px);
    margin: 2em 0 0 auto;
    transform: translate(0,-20px);
    opacity: 0;
}
.min-bottom.botton p {
    opacity: 1;
    transform: translate(0,0);
}
.min-bottom.botton p::before {
    width: 1.3em;
    height: 1.3em;
}
.min-bottom.botton p::after {
    transform: translate(290%, -50%) rotate(45deg);
    width: min(1.3vw, 13px);
    height: min(1.3vw, 13px);
}
.min-bottom.botton:hover p::after {
    transform: translate(350%, -50%) rotate(45deg);
}

.group-g {
    top: -8%;
    left: 10%;
    transform: rotate(130deg);
}
.group-h {
    bottom: 10%;
    right: 20%;
    transform: rotate(-10deg) ;
}
.group-i {
    bottom: -8vw;
    left: 5%;
    transform: rotate(100deg);
    z-index: 5;
}


.walk.active .foot-00 {
    animation: walk00 .8s ease forwards;
}
@keyframes walk00 {
  0% {
    transform: translate(0%, -40%) ;
    opacity: 0;
  }
  100% {
    transform: translate(0%,0%) ;
  }
  80%, 100% {
    opacity: 1;
  }
}
.foot-04 {
    transform: translate(-210%, 40%) rotate(-10deg);
}
.walk.active .foot-04 {
    animation: walk04 .8s .3s ease forwards;
}
@keyframes walk04 {
  0% {
    transform: translate(-210%, -10%) rotate(-10deg);
    opacity: 0;
  }
  100% {
    transform: translate(-210%, 40%) rotate(-10deg);
  }
  80%, 100% {
    opacity: 1;
  }
}
.foot-05 {
    transform: translate(-180%, -180%) rotate(-10deg);
}
.walk.active .foot-05 {
    animation: walk05 .8s .6s ease forwards;
}
@keyframes walk05 {
  0% {
    transform: translate(-180%, -230%) rotate(-10deg);
    opacity: 0;
  }
  100% {
    transform: translate(-180%, -180%) rotate(-10deg);
  }
  80%, 100% {
    opacity: 1;
  }
}
.foot-06 {
    transform: translate(-380%, -130%) rotate(-10deg);
}
.walk.active .foot-06 {
    animation: walk06 .8s .9s ease forwards;
}
@keyframes walk06 {
  0% {
    transform: translate(-380%, -180%) rotate(-10deg);
    opacity: 0;
  }
  100% {
    transform: translate(-380%, -130%) rotate(-10deg);
  }
  80%, 100% {
    opacity: 1;
  }
}

@media screen and (max-width:768px) {

    .reason-inner{
        width: 90%;
    }
    
    .r-left {
        display: block;
    }
    .box {
        width: 90%;
        margin: 0 auto;
        border: min(.7vw, 4px) solid #9DC93A;
        border-radius: 2em 2em;
    }

    .r-text.move.active p {
        animation: trans20 1s ease forwards;
    }

    .r-text {
        width: 90%;
        margin: 0 auto;
        padding-top: 1em;
    }
    .r-left h3 {
        padding-left: 3.7em;
    }
    .num {
        top: 8%;
        width: 20%;
        max-width: 85px;
        transform: translate(0%,20%);
    }
    .num00 {
        width: 22%;
        max-width: 100px;
    }

    .r-pic {
        width: 90%;
        margin: 0 auto;
    }
    .r-pic-img,
    .l-pic-img  {
        border-radius: 2em;
    }

    .rever-over {
        aspect-ratio: 144 / 230;
        max-height: 800px;
        background: url(../img/back_02.webp) no-repeat right center / cover;
    }

    .min-bottom.botton {
        width: 90%;   
        margin: 2em auto 0 auto;
        font-size: min(5.625vw, 26px);
    }
    .min-bottom.botton p::after {
        transform: translate(310%, -50%) rotate(45deg);
        width: min(2.6vw, 12px);
        height: min(2.6vw, 12px);
        border-top: min(.5vw, 2.5px) solid;
        border-right: min(.5vw, 2.5px) solid;
    }
    .min-bottom.botton:hover p::after {
        transform: translate(380%, -50%) rotate(45deg);
    }

    .r-left-illust {
        padding: 2em 0;
    }
    .illust04 {
        right: 0;
        transform: translate(-50%, -150%);
        width: 9%;
    }
    @keyframes move04 {
        0% {
        transform: translate(-20%, -150%);
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        transform: translate(-50%, -150%);
        }
    }
    .illust05 {
        right: 10%;
        transform: translate(0,-102%);
        width: 8%;
        height: auto;
    }
    .illust06 {
        width: 13%;
    }
    .illust07 {
        transform: translate(-75%,-120%);
        max-width: 80px;
    }
    @keyframes move07 {
        0% {
        transform: translate(-55%,-100%);
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        transform: translate(-75%,-120%);
        }
    }
    .illust08 {
        transform: translate(0%,-40%);
        max-width: 60px;
    }
    @keyframes move08 {
        0% {
        transform: translate(20%,-20%);
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        transform: translate(0%,-40%);
        }
    }

    .illust09 {
        transform: translate(0,100%);
        width: 10%;
    }
    @keyframes move09 {
        0% {
        transform: translate(0,70%);
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        transform: translate(0,100%);
        }
    }

    .illust10 {
        left: initial;
        right: 0;
    }

    .group-g {
        top: -3%;
        left: 10%;
    }
    .group-h {
        bottom: 5%;
        right: 8%;
        transform: rotate(5deg);
    }
    .group-i {
        left: 10%;
    }

}

@media screen and (min-width: 1441px) {

    .rever-over {
        width: 100vw;
        aspect-ratio: 256 / 190;
        max-height: 1350px;
        background: url(../img/back_02_1920.webp) no-repeat center center / cover; 
    }
    
    .box,
    .r-pic img {
        border-radius: 2em ;
    }

    .box {
        border-width: 4px
    }


}

@media screen and (min-width: 1921px) {
    
    .reason::before {
        max-height: 316px;
        padding: min(8vw,150px);
        height: 0;
    }
    .reason::after {
        padding: min(8vw,150px);
        max-height: 316px;
        height: 0;
    }    

    .illust04 {
        top: -9%;
        transform: translate(-250%,0%);
        width: 4%;
        max-width: 90px;
    }
    @keyframes move04 {
        0% {
        transform: translate(-220%,0%);
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 1;
        transform: translate(-250%,0%);
        }
    }
    .illust05 {
        width: 10%;
    }
    .illust06 {
        width: 18%;
    }
    .illust09 {
        bottom: -13%;
        transform: translate(0%,0%);
        width: 4%;
        max-width: 80px;
    }
    @keyframes move09 {
        0% {
        transform: translate(0%,-30%);
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            transform: translate(0%,0%);
        }
    }

    
}

/*-------------------- kind --------------------*/

.kind {
    padding: min(16vw, 300px) 0 min(14vw, 150px);
}

.kind-flex {
    display: flex;
    gap: 1em;
    margin-bottom: 3em;
}

.kind-cont {
    height: auto;
    text-align: center;
    align-content: center;
    line-height: 1.5;
    width:calc((100% - 2em)/ 3 );
    aspect-ratio: 38 / 24;
    transition: .3s ease;
    opacity: 0;
    transform: scale(.8);
}

.kind-cont01 {
    background: url(../img/illust_16.webp) no-repeat center / contain;
}
.kind-cont02 {
    background: url(../img/illust_17.webp) no-repeat center / contain;
}
.kind-cont03 {
    background: url(../img/illust_18.webp) no-repeat center / contain;
}

.kind-name {
    position: relative;
    display: inline;
    font-size: min(3.125vw,30px);
    transform: scale(1);
    margin-left: -1em;
    transition: .3s ease;
}
.kind-cont:hover {
    transform: scale(1.1);
}

.kind-name::before {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(125%,-50%);
    content: "";
    border-radius: 50%;
    width: 1.3em;
    height: 1.3em;
    background: #fff;
    transition: .3s ease;
}
.kind-cont:hover .kind-name::before {
    transform: translate(150%,-50%);
    background: #5B2D2D;
}
.kind-name::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0%;
    transform: translate(230%,-50%) rotate(45deg);
    width: min(1.5vw,15px);
    height: min(1.5vw,15px);
    border-top: min(.3vw,2.5px) solid ;
    border-right: min(.3vw,2.5px) solid;
    transition: .3s ease;
}
.kind-cont:hover .kind-name::after {
    transform: translate(290%,-50%) rotate(45deg);
    color: #fff;
}

.group-j {
    bottom: 2%;
    right: 10%;
    transform: rotate(0deg);
    z-index: 5;
}

@media screen and (max-width:768px) {

    .kind-flex {
        display: block;
        margin-bottom: 2em;
    }

    .kind-cont {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: calc(90vw * 142 / 678);
        margin: 0 auto 1em;
    }
    .kind-cont::before {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(-100%,-50%);
        content: "";
        border-radius: 50%;
        width: 1.5em;
        height: 1.5em;
        background: #fff;
        transition: .3s ease;
    }

    .kind-cont::after {
        position: absolute;
        content: "";
        top: 50%;
        right: 0%;
        transform: translate(-375%,-50%) rotate(45deg);
        width: min(2vw,10px);
        height: min(2vw,10px);
        border-top: min(.4vw,2.5px) solid ;
        border-right: min(.4vw,2.5px) solid;
        transition: .3s ease;
    }


    .kind-cont01 {
        background: url(../img/illust_16_sp.webp) no-repeat center / contain;
    }
    .kind-cont02 {
        background: url(../img/illust_17_sp.webp) no-repeat center / contain;
    }
    .kind-cont03 {
        background: url(../img/illust_18_sp.webp) no-repeat center / contain;
    }

    .kind-name {
        position: static;
        font-size: min(5vw, 24px);
    }

    .kind-name::before {
        display: none;
    }
    .kind-name::after {
        display: none;
    }

}

/*-------------------- 最後のアーチ部分 --------------------*/
.over {
    position: relative;
    width: 100%;
}

/* 2. セクション本体：ベースの白〜グリーングラデーション */
.merchandise {
    position: relative;
    padding-top: min(12vw, 150px);
    background-color: #ffffff;
    /* 
      【修正】グラデーションを h2 のある上部エリア（85%付近）まで延長 
      最下部(0%)のみどりから、上部に向かってなだらかに白へ抜けます
    */
    background-image: linear-gradient(to top, #eff7eb 0%, #eff7eb 25%, #ffffff 85%);
    background-repeat: no-repeat;
    z-index: 1;
}

/* 
  【ポイント】セクション内のドット柄レイヤー
*/
.merchandise::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;

    /* 
      【修正】ドット半径を約5倍（2.5px → 12px）に拡大
      間隔を 32px → 96px に拡張（千鳥配置のオフセットは半分の 48px）
    */
    background-image: 
        radial-gradient(#e4f0de min(1.5vw,12px), transparent min(1.5vw,12px)),
        radial-gradient(#e4f0de min(1.5vw,12px), transparent min(1.5vw,12px));
    background-size: 96px 96px;
    /* 境目で下のアーチと綺麗に繋がるよう、下端（bottom）基準で配置 */
    background-position: center bottom, calc(50% + 48px) calc(100% - 48px);

    /* 
      【修正】ドットが消えるマスクも h2（上部85%付近）まで延長
    */
    -webkit-mask-image: linear-gradient(to top, black 25%, transparent 85%);
    mask-image: linear-gradient(to top, black 25%, transparent 85%);
}

/* 3. ギザギザの半円（アーチ） */
.arch {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 257 / 35;
    margin: 0;
    padding: 0;
    top: -1px;
    display: block;
    background-color: #eff7eb;

    /* ギザギザ形状マスク */
    -webkit-mask-image: url('../img/back_04_01.webp');
    mask-image: url('../img/back_04_01.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    mask-position: top center;
}

/* アーチ部分のドット柄 */
.arch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    /* セクション側と完全に同じサイズ・間隔・位置関係で設定 */
    background-image: 
        radial-gradient(#e4f0de min(1.5vw,12px), transparent min(1.5vw,12px)),
        radial-gradient(#e4f0de min(1.5vw,12px), transparent min(1.5vw,12px));
    background-size: 96px 96px;
    /* セクションの下端とぴったり噛み合うよう、上端（top）基準かつ同じ横軸(center)で配置 */
    background-position: center top, calc(50% + 48px) 48px;
}


/*-------------------- 商品リンク --------------------*/

.merchandise.move.active h3 {
    animation: trans20 1s ease-out forwards;
}
.merchandise.move.active h2 {
    animation: trans20 1s .4s ease-out forwards;
}

.illust11 {
    bottom: 30%;
    left: 10%;
    width: 6%;
    opacity: 0;
}
.move.active.illust11 {
    animation: move11 .8s ease-out forwards;
}
@keyframes move11 {
  0% {
    transform: translate(20%,0%);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0%,0%);
  }
}
.illust12 {
    bottom: 20%;
    left: 18%;
    width: 6%;
    opacity: 0;
}
.move.active.illust12 {
    animation: move12 .8s .6s ease-out forwards;
}
@keyframes move12 {
  0% {
    transform: translate(20%,0%);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0%,0%);
  }
}

.merchandise-flex {
    display: flex;
    gap: 2em;
    max-width: 1440px;
    margin: 0 auto 10vw;
}

.merchandise-flex-img {
    width: calc((100% - 8em) / 5);
    height: auto;
    border-radius: 1em;
    filter: drop-shadow(5px 5px 6px #bbb);
}
.merchandise-flex-img:nth-child(2),
.merchandise-flex-img:nth-child(4) {
    transform: translateY(50%);
}

.group-k {
    bottom: 10%;
    left: 5%;
    transform: rotate(60deg);
    z-index: 5;
}

@media screen and (max-width:768px) {

    h3 {
        font-size: min(5.625vw, 26px);
    }

    .illust11 {
        width: 9%;
        left: 8%;
    }
    .illust12 {
        width: 9%;
        bottom: 18%;
    }

    /* アーチ */
    .merchandise::before {

        /* 
        【修正】ドット半径を約5倍（2.5px → 12px）に拡大
        間隔を 32px → 96px に拡張（千鳥配置のオフセットは半分の 48px）
        */
        background-image: 
            radial-gradient(#e4f0de min(3vw,10px), transparent min(3vw,10px)),
            radial-gradient(#e4f0de min(3vw,10px), transparent min(3vw,10px));
        background-size: 96px 96px;
        /* 境目で下のアーチと綺麗に繋がるよう、下端（bottom）基準で配置 */
        background-position: center bottom, calc(50% + 48px) calc(100% - 48px);

        /* 
        【修正】ドットが消えるマスクも h2（上部85%付近）まで延長
        */
        -webkit-mask-image: linear-gradient(to top, black 25%, transparent 85%);
        mask-image: linear-gradient(to top, black 25%, transparent 85%);
    }

    
    .arch::before {
        /* セクション側と完全に同じサイズ・間隔・位置関係で設定 */
        background-image: 
            radial-gradient(#e4f0de min(3vw,10px), transparent min(3vw,10px)),
            radial-gradient(#e4f0de min(3vw,10px), transparent min(3vw,10px));
        background-size: 96px 96px;
        /* セクションの下端とぴったり噛み合うよう、上端（top）基準かつ同じ横軸(center)で配置 */
        background-position: center top, calc(50% + 48px) 48px;
    }

    .merchandise-flex {
        margin: 0 auto 17vw;
    }

    .merchandise-flex-img {
        width: calc((100% - 4em) / 3);
    }

    .group-k {
        display: none;
    }

}

@media screen and (min-width: 1920px) {
    .over {
        overflow-x: hidden;
        width: 100%;
    }

    .illust11 {
        max-width: 120px;
    }
    .illust12 {
        max-width: 130px;
    }

}

/*-------------------- mount --------------------*/

.mount {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    height: min(calc(100vw * 110 / 120), 1360px);
    background: url(../img/back_07.webp) no-repeat center bottom / cover;
    z-index: -2;
}

.mount-space {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 500;
}

@media screen and (max-width:768px) {
    .mount {
        /* 幅 100vw に対する高さと、上限 950px の小さい方を採用 */
        height: min(calc(100vw * 1200 / 700), 1100px);
        background: url(../img/back_07_768.webp) no-repeat center top / cover;
    }

    .mount-space {
        aspect-ratio: 768 / 380;
    }
    
}

@media screen and (min-width: 1920px) {
    
    .mount {
        aspect-ratio: 1400 / 900;
        max-height: 1220px;
        background: url(../img/back_07_1920.webp) no-repeat center bottom / cover;
    }

}

/*-------------------- footer --------------------*/

footer {
    position: relative;
    padding: min(10vw,150px) 0 min(4vw,50px);
    overflow: hidden;
}
/* お問い合わせ */
footer::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    transform: translateX(45%);
    width: 112vw;
    height: auto;
    aspect-ratio: 1615 / 945;
    background: url(../img/back_06.webp) no-repeat center / contain;
    z-index: -1;
}
/* アイコン */
footer::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    transform: translateX(-50%);
    width: 112vw;
    height: auto;
    aspect-ratio: 1615 / 945;
    background: url(../img/back_05.webp) no-repeat center / contain;
    z-index: -1;
}

.footer-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* 左 */
.footer-menu {
    width: 50%;
    max-width: 420px;
    text-align: center;
}

.footer-icon {
    display: block;
    width: 52%;
    margin-bottom: 1em;
    color: #11864D;
    transition: .3s ease;
    transform: scale(1);
}
.footer-icon:hover {
    transform: scale(1.1);
}

.footer-icon img {
    width: 35%;
    height: auto;
}

footer nav ul {
    flex-wrap: wrap;
    gap: .5em 2em;
    margin-bottom: 1em;
    color: #11864D;
}

/* 右 */
.footer-tel {
    position: relative;
    width: 42%;
}

.footer-tel h3 {
    margin-bottom: .5em;
    opacity: 1;
    transform: translate(0,0);
}

.footer-tel-cont {
    border-radius: 2em;
    padding: 1em 0 0;
}

.footer-tel-cont .tel-flex {
    padding: 0 1em 1em;
    width: 100%;
    margin: 0;
    font-size: min(3.51vw,45px);
}

.footer-tel-cont .tel-flex img {
    width: 1.4em;
    height: auto;
}

.footer-tel-cont .tel-flex p {
    line-height: 1;
    font-size: min(3.51vw,45px);
}

.tel-num01,
.tel-num02 {
    position: relative;
}
.tel-num01::before {
    position: absolute;
    content: "サンキュー";
    top: 0;
    left: 50%;
    transform: translate(-50%,.100%);
    font-size: min(1.3vw,13px);
    width: 5.2em;
}
.tel-num02::before {
    position: absolute;
    content: "ココロニ";
    top: 0;
    left: 50%;
    transform: translate(-50%,.100%);
    font-size: min(1.3vw,13px);
    width: 4.2em;
}

.tel-wrap {
    position: relative;
    display: flex;
    justify-content: space-around;
    padding: .5em 0;
    text-align: center;
}
.tel-wrap::before {
    position: absolute;
    content: "";
    top: 0;
    left: 51%;
    height: 100%;
    width: min(.2vw,3px);
    background-image: linear-gradient(to bottom, #11864D 70%, transparent 70%);
    background-size: 100% 12px;
    background-repeat: repeat-y;
}


.copy {
    text-align: left;
    font-size: min(1.3vw, 12px);
}

.group-foot {
    top: 35%;
    right: 5%;
}

@media screen and (max-width: 768px) {
    
    footer::after {
        display: none;
    }
    footer::before {
        width: 200vw;
        right: 50%;
        transform: translateX(50%);
    }
    
    .footer-flex {
        flex-direction: column-reverse;
    }
    .footer-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: initial;
        margin-bottom: 1em;
        /* background: #ccc; */
    }
    .footer-icon {
        width: 32%;
        max-width: 170px;
        margin-bottom: 0;
    }
    .footer-icon img {
        width: 45%;
    }
    .footer-menu nav {
        width: 64%;
    }

    .footer-tel-cont {
        background: #fff;
        padding: 1.8em 1.5em 1.5em;
    }

    .footer-tel {
        width: 100%;
        max-width: 550px;
        margin: 0 auto 2em;
    }

    .footer-tel .tel-flex {
        font-size: min(8.75vw,35px);
        padding: 0 0 5vw;
    }

    .footer-tel-cont .tel-flex p {
        font-size: min(8.75vw,35px);
    }

    .tel-num01::before,
    .tel-num02::before {
        font-size: min(3.125vw,12px);
    }

    footer nav ul {
        font-size: min(3.125vw, 15px);
        gap: .5em 1.5em;
        margin-bottom: 0;
    }

    .copy {
        text-align: center;
        font-size: min(3.125vw, 14px);
    }

    .group-foot {
        top: 20%;
        right: 8%;
        z-index: 1;
    }

}


@media screen and (min-width: 1920px) {
    
    footer {
            padding: 9vw 0 min(4vw,50px);
    }

}


/******************************************

                施設紹介

******************************************/

.fv_lower {
    position: relative;
    width: 85%;
    height: min(calc(90vw * 7 / 12), 87vh);
    margin: 0 auto min(15vw,288px) ;
    padding-top: 62px;
    z-index: 2;
}

.fv_lower_img {
    width: 100%;
    height: 100%;
    border-radius: 2em;
    object-fit: cover;
}
.title_back {
    position: absolute;
    bottom: 5%;
    left: 2%;
    z-index: 1;
}
.title_back::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    transform: translate(20%,-40%);
    width: 55vw;
    max-width: 950px;
    aspect-ratio: 1394 / 775;
    z-index: -1;
    background: url(../img/title.webp) no-repeat center / contain;
}
.title_back h2 {
    font-size: min(4.55vw,55px);
    margin-bottom: initial;
    opacity: 1;
}

.facility {
    position: relative;
    z-index: 1;
}
.facility::before {
    position: absolute;
    content: "";
    top: 8%;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1440 / 971;
    z-index: -1;
    background: url(../img/02/02_back.webp) no-repeat center / cover;
}

.group-top {
    bottom: -135%;
    right: -15%;
    transform: rotate(60deg);
}

.illust13 {
    top: 6%;
    left: 8%;
    width: 7%;
    max-width: 130px;
}

.facility p {
    line-height: 1.5;
}
.tree {
    position: absolute;
    width: 10%;
    height: auto;
}

.tree_r {
    animation: tree 4s ease-out infinite;
}
@keyframes tree {
  0% {
/* 初期位置（やや傾き・伸び） */
    transform: rotate(0deg) scaleY(1);  }
  50% {
/* 途中で少し縦に伸び縮み・しなりをプラス */
    transform: rotate(-5deg) scaleY(1.02);  }
  100% {
/* 反対側へ揺れる */
    transform: rotate(0deg) scaleY(1);  }
}
.tree_l {
    animation: tree01 4s ease-out infinite;
}
@keyframes tree01 {
  0% {
/* 初期位置（やや傾き・伸び） */
    transform: rotate(0deg) scaleY(1) scaleX(-1);  }
  50% {
/* 途中で少し縦に伸び縮み・しなりをプラス */
    transform: rotate(5deg) scaleY(1.02) scaleX(-1);  }
  100% {
/* 反対側へ揺れる */
    transform: rotate(0deg) scaleY(1) scaleX(-1);  }

}

.tree_01 {
    top: 0;
    right: 0;
}

.tree_02 {
    top:40%;
    left: 0;
    transform: scaleX(-1);
}
.tree_03 {
    bottom: 15%;
    right: 0;
}

.sec00 {
    position: relative;
    z-index: 2;
    background: #fff;
}

/* ----------アーチ部分---------- */

.arch01 {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 257 / 35;
    margin: 0;
    padding: 0;
    top: -1px;               /* セクションとの隙間防止 */
    display: block;
    background-color: #ffffff; /* 単色の白背景 */

    /* index側（.arch）と完全に同じマスク指定にする */
    -webkit-mask-image: url('../img/back_04_01.webp');
    mask-image: url('../img/back_04_01.webp');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    mask-position: top center;
}

.illust_64 {
    right: 15%;
    bottom: 12%;
    width: 10%;
    max-width: 200px;
}

.fac_top {
    width: 70%;
    max-width: 700px;
    margin: 0 auto min(10vw,100px);
    text-align: center;
}
.fac_top .kari {
    position: relative;
    display: block;
    border-radius: 2em;
    margin-bottom: 1em;
    background: #A8A8A8;
    width: 100%;
    height: auto;
    aspect-ratio: 700 / 390;
}
.fac_top span p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: min(4.55vw, 50px);
}

.fac_top .name {
    position: relative;
    display: inline-block;
    padding: 0 1em;
    font-size: min(3.385vw, 40px);
    margin-bottom: .5em;
    z-index: 1;
}

.fac_top .name::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    transform: translateY(2px);
    width: 100%;
    height: 20px;
    aspect-ratio: 400 / 32;
    z-index: -1;
    background: url(../img/02/illust_25.webp) no-repeat center / 100% 20px;
}
.name_text {
    text-align: left;
    font-size: min(2.6VW, 25px);
}
.time {
    padding: 1em;
    margin: 1em 0 .5em;
    background: #fff;
    border-radius: 1em;
    font-size: min(2.6VW, 25px);
    font-weight: 600;
    border: solid 3px #9DC93A;
}
.fac_top .anno {
    text-align: left;
    text-indent: -1em;
    padding-left: 1em;
}

.inner_0 {
    position: relative;
    width: 90%;
    margin: 0 auto;
}
.inner_table {
    position: relative;
    width: 90%;
    margin: 0 auto;
}


.fac_flex {
    display: flex;
    gap: 2em;
    margin-bottom: min(10vw,100px);
}

.flex_box {
    width: 50%;
    text-align: center;
}

.fac_flex02 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.fac_flex02 .flex_box {
    width: calc((100% - 3em) / 3);
    margin-bottom: 2em;
}
.fac_flex02 .flex_box:nth-child(4),
.fac_flex02 .flex_box:nth-child(5),
.fac_flex02 .flex_box:nth-child(6)
 {
    margin-bottom: 0;
}

.flex_box_in {
    position: relative;
}
.illust14 {
    top: 0;
    right: 0;
    transform: translate(30%,-75%);
    width: 20%;
}

.flex_box img {
    width: 100%;
    border-radius: 2em;
    margin-bottom: .5em;
}
.flex_box p {
    text-align: justify;
}
.box_name {
    position: relative;
    display: inline-block;
    padding: 0 1em;
    font-size: min(3.125vw, 30px);
    margin-bottom: .5em;
    margin-top: .5em;
    z-index: 1;
    opacity: 0;
    transform: translate(0,-20px);
}
.box_name::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 14px;
    z-index: -1;
    background: url(../img/02/illust_26.webp) no-repeat center / 100% 14px;
}
.box_name.move.active{
    animation: trans20 1s ease-out forwards;
}

.group-l {
    top: -10%;
    right: -8%;
    transform: rotate(25deg);
}
.group-m {
    bottom: 0%;
    left: 3%;
    transform: rotate(60deg);
}

@media screen and (min-width:1921px) {
    
    .facility::before {
        top: 5%;
        aspect-ratio: 1440 / 850;
    }
}

@media screen and (max-width:768px) {

    .fv_lower {
        height: min(calc(180vw * 7 / 12), 87vh);
        padding-top: min(13vw,60px);
        width: 90%;
    }

    .fv_lower_img01 {
        object-position: 30%;
    }
    
    .facility::before {
        top: 1%;
    }

    .fac_flex {
        position: relative;
    }

    .fac_flex::before {
        position: absolute;
        content: "";
        top: 75%;
        left: 50%;
        width: 100vw;
        height: auto;
        aspect-ratio: 1440 / 971;
        transform: translate(-50%,-35%) scale(-1,-1);
        z-index: -1;
        background: url(../img/02/02_back.webp) no-repeat center / cover;
    }

    .title_back::before {
        width: 85vw;
        max-width: 500px;
    }

    .title_back h2 {
        font-size: min(7.5vw, 35px);
    }

    .fac_top {
        width: 100%;
        max-width: 600px;
    }
    .fac_top .name {
        font-size: min(6.25vw, 30px);
    }

    .name_text {
        font-size: min(4.375vw, 20px);
    }
    
    .time {
        font-size: min(4.375vw, 20px);
    }

    .box_name {
        font-size: min(4.375vw, 22px);
    }

    .illust13 {
        top: -1%;
        left: 4%;
        width: 10%;
    }
    .illust14 {
        width: 14%;
        transform: translate(0%,-80%);
    }

    .illust_64 {
        width: 15%;
    }

    .inner_0 {
        width: 100%;
        max-width: 600px;
    }
    .inner_table {
        width: 100%;
    }

    .fac_flex {
        display: block;
    }
    .fac_flex .flex_box {
        width: 100%;
    }
    .fac_flex .flex_box:nth-child(1) {
        margin-bottom: 3em;
    }
    
    .box_name {
        font-size: min(5.625vw, 26px);
    }
    .tree {
        width: 15%;
    }
    .tree_01 {
        transform: translate(0,-100%);
    }

    .fac_flex02 .flex_box {
        width: calc((100% - 2em) / 2);
    }

    .fac_flex02 .flex_box:nth-child(4) 
     {
        margin-bottom: 2em;
    }

    .tree_02 {
        top: -2%;
        transform: translate(-5vw, 0) scaleX(-1);
    }

    .group-top {
        bottom: -50%;
        right: -30%;
    }
    .group-l {
        top: 0%;
        right: 0%;
    }

    .group-m {
        bottom: initial;
        top: 44%;
        left: 6%;
    }

}

@media screen and (max-width:520px) {

    .inner_0 {
        width: 100%;
    }

    .group-top {
        right: -15%;
        bottom: -30%;
    }

    .tree_03 {
        bottom: 0;
        top: 55%;
    }

    .fac_flex02 .flex_box {
    width: calc((100% - 1.5em) / 2);
    }
    .group-l {
        transform: rotate(40deg);
        right: 0%;
    }

    .group-m {
        top: 45%;
    }

}

/******************************************

                葬儀の流れ

******************************************/

.title_back_right {
    left: initial;
    right: 2%;
}
.title_back_right::before {
    right: initial;
    left: 0;
    transform: scaleX(-1) translate(20%, -40%);
}
.title_back_right .group-top {
    right: initial;
    left: -25%;
    transform: rotate(0deg);
}

.sec_f {
    text-align: center;
    margin-bottom: min(15vw,200px);
}

.flow_tel {
    max-width: 100px;
}

.f_title {
    position: relative;
    display: inline-block;
    transform: translateX(1em);
}
.f_title::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0%;
    transform: translate(-120%,-50%);
    height: auto;
}
.f_title01::before {
    width: 1.8em;
    aspect-ratio: 256 / 218;
    background: url(../img/num_01.webp) no-repeat center / contain;
}
.f_title02::before {
    width: 2.1em;
    aspect-ratio: 297 / 218;
    background: url(../img/num_02.webp) no-repeat center / contain;
}
.f_title03::before {
    width: 2em;
    aspect-ratio: 300 / 218;
    background: url(../img/num_03.webp) no-repeat center / contain;
}
.f_title04::before {
    width: 2em;
    aspect-ratio: 305 / 218;
    background: url(../img/03/num_04.webp) no-repeat center / contain;
}
.f_title05::before {
    width: 2em;
    aspect-ratio: 296 / 218;
    background: url(../img/03/num_05.webp) no-repeat center / contain;
}
.f_title.move.active {
    animation: fun_title 1s ease forwards;
}
@keyframes fun_title {
    0% {
        opacity: 0;
        transform: translate(1em, 20px);
    }
    80% {
        opacity: 1;;
    }
    100% {
        opacity: 1;
        transform: translate(1em, 0%);
    }
}

.arrow {
    display: block;
    margin: 0 auto;
    width: 7%;
    max-width: 70px;
    height: auto;
}

.sec_f02 {
    position: relative;
    margin: 16vw 0 18vw;
    z-index: 1;
}
.sec_f02 {
    text-align: center;
}
.sec_f02::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200%;
    max-width: 2300px;
    height: auto;
    aspect-ratio: 1800 / 900;
    z-index: -1;
    background: url(../img/03/03_back01.webp) no-repeat center / cover;
}


/* ----------準備---------- */

 .ready {
    position: relative;
    margin: 2em auto 0;
    width: 80%;
    max-width: 700px;
 }

 .num_flex {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-bottom: 3em;
 }
.num_flex::before {
    content: "";
    position: absolute;
    /* 丸の中心に合わせる（丸の幅 3em の半分） */
    left: 1.5em;
    transform: translateX(-50%);
    
    /* 1つ目の丸の中心から、次の項目の丸の中心まで伸ばす */
    top: 1.5em;
    height: 100%; /* 下の要素の top: 1.5em 付近まで自動で伸びる */
    
    width: min(.7vw,3px);
    background-color: #aaa;
    z-index: 1; /* 丸の裏を通す */
}
.num_flex:last-child::before {
    display: none; /* 最後の丸からは下へ線を伸ばさない */
}

 .r_num {
    position: relative;
    width: 3em;
    height: 3em;
    background: #fff;
    border-radius: 50%;
    border: solid min(.7vw,3px) #11864D;
    color: #11864D;
    z-index: 2;
 }
.r_num::before {
    position: absolute;
    font-size: 2em;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-55%);
}
.r_num01::before {
    content: "1";
}
.r_num02::before {
    content: "2";
}
.r_num03::before {
    content: "3";
}
.r_num04::before {
    content: "4";
}

 .ready-cont {
    width: 85%;
    text-align: justify;
    opacity: 0;
    transform: translate(0,-20px);
 }
.ready.move.active .num_flex:nth-child(1) .ready-cont {
    animation: trans20 1.5s ease forwards;
}
.ready.move.active .num_flex:nth-child(2) .ready-cont {
    animation: trans20 1.5s .5s ease forwards;
}
.ready.move.active .num_flex:nth-child(3) .ready-cont {
    animation: trans20 1.5s 1s ease forwards;
}
.ready.move.active .num_flex:nth-child(4) .ready-cont {
    animation: trans20 1.5s 1.5s ease forwards;
}

 .r_ttitle {
    color: #11864D;
    font-size: min(2.6vw, 25px);
 }

.inner_illust {
position: relative;
}

 .illust_42 {
    top: 0;
    right: 5%;
    width: 8%;
 }
 .illust_43 {
    bottom: -3%;
    left: 5%;
    width: 6%;
 }
 .group-n {
    top: 7%;
    left: 3%;
    transform: rotate(75deg);
 }
 .group-o {
    bottom: 10%;
    right: 5%;
    transform: rotate(-15deg);
 }

@media screen and (min-width:1920px) {

    .illust_42 {
        top: 0;
        right: -15%;
        width: 10%;
    }
    .illust_43 {
        bottom: 0;
        left: -15%;
        width: 8%;
    }
    .group-n {
        top: 10%;
        left: -15%;
    }
    .group-o {
        bottom: 10%;
        right: -15%;
    }
}

@media screen and (max-width:768px) {

    .fv_lower_img02 {
        object-position: right;
    }

    .choise_100 {
        width: 100%;
    }

    .f_title01 {
        margin-bottom: 0;
    }

    .sec_f02 {
        margin: min(25vw,200px) 0 min(25vw,200px);
    }
    
    .sec_f02::before {
        height: 180vw;
        max-height: 950px;
        width: auto;
        max-width: initial;
    }

    .ready {
        width: 100%;
    }

    .num_flex {
        gap: 1em;
        padding-bottom: 2rem;
    }
    .num_flex:last-child {
        padding-bottom: 0;
    }

    .r_ttitle {
        font-size: min(5vw, 22px);
    }

     .group-n {
        top: -5%;
    }
     .group-o {
        bottom: 5%;
    }

     .illust_42 {
        top: 0%;
        right: 0;
        transform: translate(0,-100%);
        width: 12%;
    }
     .illust_43 {
        width: 9%;
        bottom: 0;
        transform: translate(0,120%);
        left: 0%;
    }
}



 .sec_f03 {
    position: relative;
    text-align: center;
    padding: min(15vw,200px) 0;
    z-index: 3;
 }
 .sec_f03:last-child {
    padding: 8vw 0  0;
 }

.inner_00 {
    position: relative;
    width: 80%;
    margin: 0 auto;
}

 .illust_44 {
    top: 0;
    right: -15%;
    width: 14%;
 }

 .group-p {
    bottom: 0%;
    left: 10%;
    transform: rotate(100deg);
 }
 .group-q {
    bottom: -5%;
    right: 10%;
 }

@media screen and (max-width:768px) {
     .illust_44 {
        right: -13%;
        width: 14%;
    }
}

@media screen and (max-width:520px) {
    
    .inner_00 {
        width: 100%;
    }
    .illust_44 {
        right: 0%;
    }
}

/* ---------------方法選択--------------- */

.choise_100 {
    position: relative;
}

/* タブボタンの横並びコンテナ */
.button_group {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1; 
}

/* ボタン共通デザイン */
.tab_btn {
    line-height: 1.4;
    width: calc((100% - 1em) / 3);
    padding: .8em 1em;
    border-radius: 1em 1em 0 0; 
    font-size: min(3.125vw, 30px);
    background: #fff;            
    border: solid min(.7vw,3px) #B4D585;
    border-bottom: none;
    transition: background 0.2s, color 0.2s;
}

/* 選択されているボタン */
.tab_btn.is-active {
    background: #B4D585;
}

/* 基本はすべてのパネルを非表示にする */
.choise_panel {
    display: none;
}

/* is-active が付いたパネルだけを表示する */
.choise_panel.is-active {
    display: block;
}

.choise {
    background: #B4D585;
    border-radius: 0 0 2em 2em;
    padding: 2em;
}

.choise_inner {
    background: #fff;
    padding: 2em 1.5em;
    border-radius: 2em;
}

h4 {
    font-size: min(3.645vw,40px);
    color: #11864D;
    margin-bottom: .5em;
}
.choise_flex {
    display: flex;
    gap: 2em;
    margin-bottom: 2em;
}

.choise_text {
    width: 50%;
}

.choise_sub {
    background: #DFEBCD;
    padding: .5em 1em;
    border-radius: 1em;
    margin-bottom: .5em;
    font-size: min(2.6VW, 25px);
    line-height: 1.5;
}

.choise_cont {
    text-align: justify;
    padding: 0 .5em;
    margin-bottom: 2em;
}

.choise_text .botton {
    margin: 0 0 0 auto;
    font-size: min(2.6VW, 25px);
    width: 90%;
    max-width: 350px;
}
.choise_flex .botton p::after {
    width: min(1.4vw, 13.5px);
    height: min(1.4vw, 13.5px);
    transform: translate(275%, -50%) rotate(45deg);
}
.choise_flex .botton:hover p::after {
    transform: translate(325%, -50%) rotate(45deg);
} 

.choise_img {
    align-content: center;
    padding: 1.5em;
    width: 50%;
    border-radius: 1em;
    border: solid min(.7vw,3px) #B4D585;
}
.choise_img img {
    width: 100%;
    height: auto;
    aspect-ratio: 703 / 572;
    object-fit: contain;
}

.flow {
    position: relative;
    padding: 2em 1.5em;
    border-radius: 1em;
    background: #F5F5EE;
}

h5 {
    font-size: min(3.125vw, 30px);
    margin-bottom: 1em;
}

.flow_flex {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.flow_box {
    line-height: 1.5;
    text-align: justify;
    border-radius: 1em;
    padding: 1em;
    background: #fff;
    width: calc((100% - 4em) / 3);
    transform: translate(0,-20px);
    opacity: 0;
}
.move.active.flow_box {
    animation: trans20 1s ease forwards;
}

.flow_cont {
    color: #11864D;
    font-size: min(2.34vw, 25px);
    text-align: center;
    margin-bottom: .5em;
}

.flow_botom {
    margin-bottom: 1em;
}

.flow_box .botton {
    width: 100%;
    font-size: min(2.08vw, 20px);
}
.flow_box .botton p::after {
    transform: translate(270%, -50%) rotate(45deg);
    width: min(1.15vw, 11px);
    height: min(1.15vw, 11px);
    border-top: min(.3vw, 2.2px) solid;
    border-right: min(.3vw, 2.2px) solid;
}

.flow_box .botton:hover p::after {
    transform: translate(325%, -50%) rotate(45deg);
}

.illust15 {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(-25%,0);
    width: 12%;
    height: auto;
}

/* 納骨について */
.banner_cont {
    position: relative;
    display: flex;
    gap: 2em;
    z-index: 1;
    padding: 3em 3em 3em 0;
}

.banner_cont::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(50% - 51vw);
    z-index: -1;
    background: url(../img/03/03_back02.webp) no-repeat 100% 100% / 100% 100%;
}

.banner_reverce {
    flex-direction: row-reverse;
    padding: 3em 0 3em 3em ;
}

.banner_reverce::before {
    left: 0;
    right: calc(50% - 51vw);
    background: url(../img/03/03_back03.webp) no-repeat 100% 100% / 100% 100%;
}

 .illust_45 {
    top: 0;
    left: 0;
    width: 8%;
    transform: translate(0,-90%);
 }
 .illust_55 {
    top: 0;
    right: -5%;
    width: 7%;
    transform: translate(0,-90%);
 }
 .illust_57 {
    bottom: 12%;
    right: -5%;
    width: 7%;
 }

.group-x {
    bottom: 10%;
    left: 5%;
    transform: rotate(50deg);
    z-index: 10;
}

.banner_text {
    width: 40%;
}
.banner_text h4 {
    text-align: left;
    font-size: min(3.645vw, 40px);
    color: #5B2D2D;
}
.banner_text .botton {
    width: 100%;
    font-size: min(2.6VW, 25px);
    opacity: 1;
}
.banner_text .botton p::after {
    transform: translate(290%, -50%) rotate(45deg);
    width: min(1.3vw, 13px);
    height: min(1.3vw, 13px);
}
.banner_text .botton:hover p::after {
    transform: translate(350%, -50%) rotate(45deg);
}

.banner_img {
    display: flex;
    width: 60%;
    gap: 2em;
    filter: blur(10px);
    opacity: 0;
}
.banner_cont.move.active .banner_img,
.banner_cont.move.active .banner_img_box,
.banner_cont.move.active .banner_img_00 {
    animation: 2s fv ease forwards;
}

.banner_img img {
    object-fit: cover;
    width: 50%;
    height: auto;
    border-radius: 1em;
}

.banner_img_box {
    width: 50%;
    filter: blur(10px);
    opacity: 0;
}
.banner_img_box img {
    width: 100%;
    margin-bottom: .5em;
}

.banner_text_00 {
    width: 57%;
    text-align: left;
}

.banner_img_00 {
    width: 43%;
    filter: blur(10px);
    opacity: 0;
}
.banner_img_00 img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 1em;
}

.botton_sp {
    display: none;
}

@media screen and (max-width:1200px) {
    
    .flow_box {
        width: calc((100% - 2em) / 2);

    }

    .illust_none {
        display: none;
    }
}

@media screen and (max-width:768px) {
    
    h4 {
        font-size: min(6.25vw, 30px);
    }

    .choise {
        padding: 1.5em;
    }

    .choise_inner {
        padding: 1.5em;
    }

    .choise_flex {
        flex-direction: column-reverse;
    }

    .choise_text {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    .choise_img {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }

    .choise_text .botton {
        font-size: min(5vw, 22px);
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
    

    .choise_sub {
        font-size: min(5vw, 22px);
    }

    .tab_btn {
        font-size: min(4.06vw, 20px);
        padding: .8em .5em;
    }

    .flow {
        padding: 1.5em 1em;
    }

    h5 {
        font-size: min(5.625vw, 26px);
    }

    .flow_cont {
        font-size: min(5vw, 22px);
    }

    .flow_box .botton {
        font-size: min(3.75vw, 18px);
    }

    .flow_box .botton p::after {
        transform: translate(270%, -50%) rotate(45deg);
        width: min(2vw, 10px);
        height: min(2vw, 10px);
        border-top: min(.4vw, 2.2px) solid;
        border-right: min(.4vw, 2.2px) solid;
    }
    .flow_box .botton:hover p::after {
        transform: translate(320%, -50%) rotate(45deg);
    }

    .flow_flex {
        gap: 1em;
    }

    .flow_box {
        width: calc((100% - 1em) / 2);
    }

    .banner_cont {
        gap: 1em;
        flex-direction: column;
        padding: 3em;
    }

    .choise_text .botton p::after {
        transform: translate(300%, -50%) rotate(45deg);
        width: min(2.4vw, 11px);
        height: min(2.4vw, 11px);
        border-top: min(.5vw, 2.5px) solid;
        border-right: min(.5vw, 2.5px) solid;
    }
    .choise_text .botton:hover p::after {
        transform: translate(355%, -50%) rotate(45deg);
    }

    .botton_pc {
        display: none;
    }

    .botton_sp {
        display: block;
        width: 100%;
        font-size: min(5vw, 22px);
        opacity: 1;
    }
    .botton_sp p::after {
        transform: translate(280%, -50%) rotate(45deg);
    }
    .botton_sp:hover p::after {
        transform: translate(330%, -50%) rotate(45deg);
    }

    .banner_text {
        display: flex;
        width: 100%;
        gap: 2em;
    }

    .banner_text h4 {
        margin: 0 auto;
        font-size: min(6.25vw, 30px);
        margin-bottom: 0;
        text-align: center;
    }

    .banner_text .botton {
        font-size: min(3.75vw, 20px);
        width: 55%;
        max-width: 290px;
        margin: initial;
    }
    .banner_text .botton p::after {
        width: min(1.6vw, 12px);
        height: min(1.5vw, 12px);
        transform: translate(265%, -50%) rotate(45deg);
    }

    .banner_img {
        width: 100%;
    }
    .banner_img_00 {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
    }

    .banner_text_00 {
        display: block;
    }

    .banner_cont .sp {
        text-align: left;
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
    }

    .not_inner {
        width: 100%;
    }

    .illust_none_768 {
        display: none;
    }

    .group-q {
        bottom: -2%;
    }
    .group-x {
        left: 10%;
        bottom: 20%;
    }
    .illust_45 {
        width: 10%;
        left: 5%;
    }
    .illust_55 {
        right: 2%;
        width: 10%;
    }
    .illust_57 {
        bottom: 35%;
        right: 2%;
        width: 9%;
    }
}

@media screen and (max-width:620px) {

        .flow_box {
        width: 100%;
    }

    .illust15 {
        display: none;
    }
}

@media screen and (max-width:520px) {



    .banner_cont {
        padding: 2em;
    }

    .banner_reverce {
        padding: 2em;
    }

    .illust_none_520 {
        display: none;
    }
}


/******************************************

                料金について

******************************************/

.sec_price {
    position: relative;
    background: #fff;
    padding-bottom: min(15vw,150px);
    z-index: 3;
}
.sec_price:nth-child(5) {
    padding-bottom: 0;
}

.sec_price01::before,
.sec_price02::before,
.sec_price03::before {
    position: absolute;
    content: "";
    left: 50%;
    transform: translate(-50%,0);
    z-index: -1;
}
.sec_price01::before {
    top: 8%;
    width: 100%;
    max-height: 1300px;
    height: auto;
    aspect-ratio: 1440 / 896;
    height: min(calc(100vw * 896 / 1440), 1300px);
    background: url(../img/04/04_back01.webp) no-repeat center / cover;
}
.sec_price02::before {
    top: 0%;
    width: 100%;
    max-height: 1800px;
    height: auto;
    aspect-ratio: 1440 / 1364;
    height: min(calc(100vw * 1364 / 1440), 1800px);
    background: url(../img/04/04_back02.webp) no-repeat center / cover;
}
.sec_price03::before {
    top: 15%;
    width: 100%;
    max-height: 1800px;
    height: auto;
    aspect-ratio: 1440 / 1364;
    height: min(calc(100vw * 1364 / 1440), 1800px);
    background: url(../img/04/04_back03.webp) no-repeat center / cover;
}

.price_cont {
    position: relative;
    background: #B4D585;
    width: 30%;
    border-radius: .5em .5em 0 0;
    font-size: min(3.9vw, 50px);
    text-align: center;
}


/* 火葬の表 */
.scroll_inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.table_top {
    position: relative;
}
.tax {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-25%,-100%);
}


.table_green {
    width: 100%;
    background: #fff;
    border: solid min(1vw,4px) #B4D585;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0 15px 15px 15px;
    overflow: hidden;
}

.table_green th {
    font-size: min(2.34vw, 23px);
}

th {
    text-align: center;
    align-content: center;
}
th span {
    font-weight: 400;
    font-size: min(2.08vw, 20px);
    padding-left: .5em;
}
.table_green th {
    border-right: solid min(.4vw,2px) #B4D585;
}
.table_green th:last-child {
    border-right: initial;
}
.table_green tr th {
    background: #DFEBCD;
}
.table_green  th:nth-child(1) {
    width: 40%;
}
.table_green tr th:nth-child(2),
.table_green tr th:nth-child(3),
.table_green tr th:nth-child(4) {
    width: 20%;
}


.table_green th,
.table_green td {
    padding: .7em;
}

tr td:nth-child(2),
tr td:nth-child(3),
tr td:nth-child(4) {
    text-align: center;
    font-size: min(2.6VW, 25px);
    vertical-align: middle;
}
.table_green td {
    border-right: solid min(.4vw,2px) #B4D585;
    border-bottom: solid min(.4vw,2px) #B4D585;
    text-align: justify;
    vertical-align: middle;
    font-size: min(2.34vw, 23px);
}
.table_green tr td:last-child {
    border-right: none;
}
.table_green tr:last-child td {
    border-bottom: none;
}
.table_green td.slant {
    background: linear-gradient(
        to top left,
        transparent calc(50% - min(.2vw, 1px)),
        #B4D585 calc(50% - min(.2vw, 1px)),
        #B4D585 calc(50% + min(.2vw, 1px)),
        transparent calc(50% + min(.2vw, 1px))
    )
}


.small {
    font-size: min(2.08vw, 20px);
    font-weight: 400;
}
.animal {
    line-height: 1.2;
    font-weight: 400;
    font-size: min(2.08vw, 20px);
}


.anno00 {
    font-weight: 400;
    line-height: 1.5;
    margin-top: .5em;
    margin-bottom: 1.5em;
    text-align: justify;
}
.maru_text {
    line-height: 1.5;
}
.maru {
    color: #B4D585;
}

.illust16 {
    width: 20%;
    bottom: 0;
    transform: translate(-20%,0);
    right: 0;
}

/*---------- 墓地 ----------*/
.price_orange {
    background: #F4C21C;
}

.price_box {
    position: relative;
    padding: 2em 1.5em;
    background: #fff;
    border: solid min(1vw, 4px) #F4C21C;
    border-radius: 0 2em 2em 2em;
}

.grave {
    display: flex;
    flex-wrap: wrap;
    gap: 4em 2em;
    margin-top: 2em;
}
.grave_box {
    line-height: 1.5;
    text-align: center;
    width: calc((100% - 2em) / 2);
    transform: translate(0,-20px);
    opacity: 0;
}
.move.active.grave_box {
    animation: trans20 1s ease forwards;
}

.grave_kind {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: min(3.125vw, 30px);
    padding: 0 .5em;
    margin-bottom: .5em;
    font-weight: 600;
}
.grave_kind::before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(2vw,20px);
    z-index: -1;
    background: url(../img/02/illust_26.webp) no-repeat center / 100% 20px;
}
.size {
    font-size: min(2.34vw, 23px);
    margin-bottom: .4em;
    font-weight: 600;
}
.grave_box img {
    width: 100%;
    height: auto;
    border-radius: 2em;
    margin-top: .8em;
    margin-bottom: .8em;
}


.table_orange {
    width: 100%;
    /* 重要ポイント1：collapse ではなく separate にする */
    border-collapse: separate;
    border-spacing: 0;
    
    /* 重要ポイント2：外枠の線と角丸 */
    border: solid min(.7vw,3px) #F4C21C;
    overflow: hidden; /* 角の背景色がはみ出ないようにクリップ */
    border-radius: .8em;

}

.table_orange th {
    width: 50%;
    padding: .8em 0;
    background: #FFF0D1;
    font-size: min(2.34vw, 23px);
}
.table_orange tr:nth-child(1) th ,
.table_orange tr:nth-child(1) td {
    border-bottom: solid min(.4vw, 2px) #F4C21C;
}

.grave_box table td span {
    font-weight: 400;
    font-size: min(2.08vw, 20px);
}


/* 霊座 */
.price_green {
    border: solid min(1vw, 4px) #B4D585;
}

.grave_green {
    width: 100%;
    /* 重要ポイント1：collapse ではなく separate にする */
    border-collapse: separate;
    border-spacing: 0;
    
    /* 重要ポイント2：外枠の線と角丸 */
    border: solid min(.7vw,3px) #B4D585;
    overflow: hidden; /* 角の背景色がはみ出ないようにクリップ */
    border-radius: .8em;
}

.grave_green th {
    width: 50%;
    padding: .8em .5em;
    background: #DFEBCD;
}
.grave_green tr:nth-child(1) th ,
.grave_green tr:nth-child(1) td {
    border-bottom: solid min(.4vw, 2px) #B4D585;
}

.price_green .grave_kind::before {
    background: url(../img/02/illust_25.webp) no-repeat center / 100% 20px;
}
.text_left {
    text-align: justify;
}

/*---------- 合同 ----------*/

.price_box_flex {
    position: relative;
    display: flex;
    padding: 2em 1.5em;
    gap: 2em;
    background: #fff;
    border: solid min(1vw, 4px) #F4C21C;   
    border-radius: 0 2em 2em 2em; 
}

.price_box_text {
    position: relative;
    width: 50%;
}

.price_box_img {
    width: 50%;
}
.price_box_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2em;
}

.group-u {
    top: -2%;
    left: 6%;
    transform: rotate(85deg);
}
.group-v {
    bottom: 2%;
    right: 6%;
    transform: rotate(15deg);
}
.group-w {
    bottom: 2%;
    left: 5%;
    transform: rotate(45deg);
}

.illust_52 {
    top: 0%;
    left: 3%;
    transform: translate(0,150%);
    width: 4%;
    max-width: 90px;
}
.illust_53 {
    top: 0%;
    right: 3%;
    transform: translate(0,700%);
    width: 6%;
    max-width: 135px;
}
.illust_54 {
    top: min(58vw,1000px);
    left: 2%;
    width: 6%;
}
.illust_63 {
    top: min(5vw,100px);
    right: 3%;
    width: 3%;
}
.illust_56 {
    top: 0%;
    right: 10%;
    transform: translate(0,-100%);
    width: 6%;
}
.illust_62 {
    top: min(80vw,1600px);
    left: 2%;
    transform: translate(0,-100%);
    width: 7%;
}
.illust_58 {
    top: min(115vw,2100px);
    right: 2%;
    width: 7%;
}
.illust_60 {
    bottom: -2%;
    left: 3%;
    width: 7%;
}
.illust_61 {
    bottom: 3%;
    right: 0%;
    width: 18%;
}

@media screen and (min-width:1920px) {

    .illust_58 {
        top: min(120vw,2090px);
    }
}

@media screen and (max-width:1200px) {
    
    .illust_52 {
        top: min(9vw,75px);
    }
    .illust_53 {
        top: min(20vw,50px);
    }

    .illust_54 {
        top: min(62vw,700px);
    }
    .illust_58 {
        top: min(126vw,1450px);
    }

}


@media screen and (max-width:768px) {

    .sp_scroll {
        width: 95%;
        margin: 0 0 0 auto ; 
    }

    .tax {
        right: 5%;
        transform: translate(0%,-100%);
    }

    .scroll_inner {
        width: 100%;
    }
    .sp_inner {
        width: 95%;
        margin: 0 auto 0 0;
    }

    .price_cont {
        width: 50%;
        font-size: min(6.875vw, 35px);
    }

    .scroll {
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translate(150%,-50%);
        font-size: min(5.625vw, 26px);
        line-height: 1;
    }
    .scroll::before {
        position: absolute;
        content: '▶';
        bottom: 50%;
        right: 0;
        transform: translate(100%, 50%);
        width: 1em;
        height: 1em;
        aspect-ratio: 1 / 1;
        animation: scroll 3s ease infinite;
    }
    @keyframes scroll {
        0% {
            transform: translate(100%, 50%);
        }
        50% {
            transform: translate(150%, 50%);
        }
        100% {
            transform: translate(100%, 50%);
        }
    }


    .table_scloll {
        overflow-x: auto;
        padding-right: 5vw;
        width: 100%;
    }


    .table_green {
        width: 200%;
        max-width: 1100px;
    }

    .table_green th,
    .table_green td,
    .table_orange th,
    .grave_green th {
        font-size: min(4.375vw, 20px);
    }

    tr td:nth-child(2),
    tr td:nth-child(3),
    tr td:nth-child(4) {
        font-size: min(5vw, 22px);
    }

    /* フォント18~12px */
    .animal,
    .small,
    .anno00,
    .grave_box table td span,
    th span {
        font-size: min(3.75vw, 18px);
    }

    .grave {
        flex-direction: column;
    }

    .grave_kind {
        font-size: min(5.625vw, 26px);
    }

    .size {
        font-size: min(4.375vw, 20px);
    }

    .price_box {
        padding: 2em 3em;
    }

    .grave_box {
        width: 100%;
        margin: 0 auto;
    }
    .grave table {
        width: 100%;
    }

    .illust_none_sp {
        display: none;
    }

    .illust_56 {
        width: 7%;
    }
    .illust_60 {
        left: 8%;
        width: 8%;
    }
    .illust_61 {
        bottom: -15%;
        right: -15%;
        width: 20%;
    }
    .illust_63 {
        top: 0;
        right: 2%;
        transform: translate(0,-40%);
        width: 7%;
        max-width: 45px;
    }
    .group-w {
        bottom: 1%;
    }

}

@media screen and (max-width:520px) {

    .price_box_flex {
        flex-direction: column-reverse;
    }

    .price_box {
        padding: 2em 1.5em;
    }

    .price_box_text {
        width: 100%;
    }
    .price_box_img {
        width: 90%;
        margin: 0 auto;
    }

    .illust_60 {
        width: 10%;
    }
    .illust_61 {
        top: 0;
        bottom: initial;
        transform: translate(0,-100%);
        right: -5%;
        width: 12%;
    }
}


/******************************************

                商品紹介

******************************************/

.item {
    position: relative;
    z-index: 5;
}

.iteb_box {
    position: relative;
    text-align: center;
}

.item_kind {
    position: relative;
    display: inline-block;
    color: #5B2D2D;
    z-index: 1;
}
.item_kind::before {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    width: 3em;
    height: auto;
    aspect-ratio: 278 / 184;
    transform: translate(50%,0);
    z-index: -1;
    background: url(../img/05/illust_46.webp) no-repeat center / contain;
}

.item_flex01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 8em;
}

.item_box01 {
    text-align: center;
    width: calc((100% - 2em) / 2);
    margin-bottom: 3em;
    opacity: 0;
    transform: translate(0,-20px);
}
.move.active.item_box01,
.move.active.item_box03 {
    animation: trans20 1s ease-out forwards;
}

.item_box02 {
    margin-bottom: 0;
}
.item_box01 img,
.item_box03 img {
    width: 100%;
    border-radius: 1em;
    margin-bottom: .6em;
}
.item_box02 img {
    width: 50%;
    margin-bottom: .5em;
}

.item_name {
    font-size: min(3.125vw, 30px);
}
.item_name span {
        font-size: min(2.34vw, 23px);
}

.item_flex02 {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}
.item_name01 {
    line-height: 1.2;
    margin-bottom: .3em;
    font-size: min(2.6vw, 25px);
}

.item_box03 {
    text-align: center;
    margin-bottom: 1em;
    width: calc((100% - 4em) / 3);
    opacity: 0;
    transform: translate(0,-20px);
}
.item_right {
    display: inline-block;
    text-align: right;
}

.anno {
    font-size: min(1.69vw, 16px);
    text-align: justify;
    line-height: 1.3;
    text-indent: -1em;
    padding-left: 1em;
}

.tree_04 {
    top: 0%;
    right: 0;
}
.tree_05 {
    top: 25%;
    left: 0;
    transform: scaleX(-1);
}
.tree_06 {
    bottom: 30%;
    right: 0;
}
.tree_07 {
    top: -2%;
    left: 0;
    transform: scaleX(-1);
}

.group-r {
    top: 28%;
    right: 5%;
    transform: rotate(40deg);
}
.group-s {
    bottom: 28%;
    left: 4%;
    transform: rotate(40deg);
}

.illust_46 {
    top: 0;
    left: 0;
    width: 30%;
    transform: translate(10%,-80%)scalex(-1);
}
.illust_65 {
    bottom: 13%;
    right: 20%;
    width: 6%;
    max-width: 120px;
    transform: scaleX(-1);
}

@media screen and (max-width:768px) {

    .item_flex01 {
        display: block;
    }

    .item_box01 {
        width: 100%;
        margin-bottom: 3em;
    }

    .item_name {
        font-size: min(5.625vw, 26px);
    }

    .item_name span {
        font-size: min(4.375vw, 20px);
    }

    .item_box03 {
        text-align: center;
        width: calc((100% - 2em) / 2);
    }

    .item_name01 {
        font-size: min(4.375vw, 20px);
    }

    .anno {
        font-size: min(3.125vw, 13px);
    }

    .tree_05 {
        top: 35%;
    }
    .tree_06 {
        bottom: 52%;
        right: 0;
    }
    .group-s {
        bottom: 55%;
        left: 8%;
    }

    .illust_65 {
        width: 10%;
    }
}

@media screen and (max-width:520px) {

    .item_box01 {
        width: 100%;
    }

    .item_box02 {
        margin-bottom: 2em;
    }

    .tree_04 {
        top: 17%;
    }

    .tree_05 {
        top: 34%;
    }
}



/******************************************

                アクセス

******************************************/

.map_img {
    position: relative;
    margin-bottom: 1em;
}

iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 2em;
}

.adress {
    text-align: center;
    font-size: min(3.125vw, 30px);
    margin-bottom: 2em;
    line-height: 1.5;
}

.method {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 2em 0;
}

.method-flex {
    display: flex;
    flex-wrap: wrap;
}

.method01 {
    position: relative;
    width: max-content;
    padding-right: 30px;
}
.method01::before {
    position: absolute;
    content: "";
    top: 0;
    right: 0%;
    height: 100%;
    width: min(.2vw, 3px);
    background-image: linear-gradient(to bottom, #11864D 70%, transparent 70%);
    background-size: 100% 12px;
    background-repeat: repeat-y;    
}
.method02 {
    width: max-content;
    text-align: justify;
    padding-left: 30px;
}

.method_title {
    display: flex;
    color: #11864D;
    font-size: min(2.6VW, 25px);
    margin-bottom: .5em;
}
.method_title img {
    width: auto;
    height: 2em;
    padding-right: .5em;
}

.illust_50 {
    bottom: 0;
    right: 0;
    transform: translate(100%,50%) scaleX(-1);
    width: 11%;
    opacity: 0;
}
.illust_50.move.active {
    animation: move30 1s ease forwards;
}
@keyframes move30 {
    0% {
        opacity: 0;
        transform: translate(150%,80%) scaleX(-1);
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(100%,50%) scaleX(-1);
    }
}

.tree_08 {
    top: 0;
    left: 0;
    transform: scaleX(-1);
}
.tree_09 {
    top: 0;
    right: 0;
}
.group-t {
    bottom: 0;
    left: 8%;
    transform: rotate(90deg);
}

@media screen and (max-width:768px)  {

    .adress {
        font-size: min(5.625vw, 26px);
    }

    .map .inner_0 {
        width: 80%;
    }
    .method {
        display: block;
        padding: 0;
    }
    .method::before {
        display: none;
    }
    .method01 {
        position: relative;
        width: 100%;
        margin-bottom: 3em;
    }
    .method01::before {
        position: absolute;
        content: "";
        top: initial;
        bottom: -1.5em;
        left: 50%;
        transform: translateX(-50%);
        height: min(.8vw,3px);
        width: 110%;
        background-image: linear-gradient(to right, #11864D 70%, transparent 70%);
        background-size: 14px 100%;
        background-repeat: repeat-x;    
    }
    .method02 {
        width: 100%;
        padding-left: 0;
    }

    .method_title {
        font-size: min(5vw, 22px);
    }
}

@media screen and (max-width:520px)  {
    .map .inner_0 {
        width: 90%;
    }

    .tree_08 {
        transform: translate(0,-100%) scaleX(-1);
    }
    .tree_09 {
        top: 50%;
    }

    .illust_50 {
        transform: translate(30%,120%) scaleX(-1);
    }
}

/******************************************

                FAQ

******************************************/

.faq {
    position: relative;
    padding-bottom: 1em;
}

.panel-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: .5em 3.5em .5em 1.5em;
    background: #11864D;
    color: #fff;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 2em;
}
.panel_q {
    display: flex;
    align-items: center;
    line-height: 1.5;
}
.q_30,
.panel_item span {
    font-size: min(3.125vw, 30px);
    padding-right: .8em;
    font-weight: 600;
}

/* プラスアイコン */
.plus {
    position: absolute;
    width: 2em;
    height: 2em;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
}
.plus::before,
.plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 70%;
    background-color: #fff;
    transition: 0.2s ease;
}
.plus::before {
transform: translate(-50%, -50%) rotate(90deg);
}
.plus::after {
transform: translate(-50%, -50%) rotate(180deg);
}
.panel-header.active .plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
} 

/* アンサー */
.panel_cont {
    height: 0;
    overflow: hidden;
    transition: height .3s ease-out;
}
.panel_cont.active {
    height: auto;
    margin-bottom: 1em;
}
.panel_item {
    display: flex;
    align-items: baseline;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding: 0 1.5em 0 1.5em ;
    transform: translateY(-5px);
}
.answer {
    text-align: justify;
    line-height: 1.5;
}

.group-y {
    bottom: 0;
    left: 3%;
    transform: rotate(45deg);
}


@media screen and (max-width:768px)  {

    .q_30,
    .panel_item span {
        font-size: min(5.625vw, 26px);
    }

}