/* main */
#wrap{ padding: 0; }
.main{ contain: content; position: relative; padding: var(--headerHeight) 0 clamp(90rem, calc( 135 / var(--inr) * 100vw ), 135rem); background: var(--bg) url('/images/main/main-cloud.png') no-repeat 50% 100% / 100% auto; text-align: center; }
.main__deco{ position: absolute; transform: translate(-50%,-50%); }
.d1{ top: 86.3%; left: 11.7%; aspect-ratio: 357/232; width: 357rem; }
.d2{ top: 60.5%; left: 90.1%; aspect-ratio: 334/245; width: 334rem; }
.d3{ top: 8.7%; left: 16.2%; aspect-ratio: 98/66; width: 98rem; }
.d4{ transform: translateX(-50%); top: 0%; left: 75.5%; aspect-ratio: 101/52; width: 101rem; }
.d5{ top: 33.8%; left: 8.5%; aspect-ratio: 126/126; width: 126rem; }
.d6{ top: 21.2%; left: 89.4%; aspect-ratio: 83/69; width: 83rem; }
.d7{ top: 52.4%; left: 38.6%; aspect-ratio: 198/32; width: 198rem; }
.d8{ top: 95%; left: 28.3%; aspect-ratio: 164/158; width: 164rem; }
.d9{ top: 91.5%; left: 90.3%; aspect-ratio: 249/115; width: 249rem; }
.main__deco::before{ content: ''; position: absolute; inset: 0; background: no-repeat 50% / contain; }
.d1::before{ background-image: url('/images/main/main-deco1.png'); }
.d2::before{ background-image: url('/images/main/main-deco2.png'); }
.d3::before{ background-image: url('/images/main/main-deco3.png'); }
.d4::before{ background-image: url('/images/main/main-deco4.png'); }
.d5::before{ background-image: url('/images/main/main-deco5.png'); }
.d6::before{ background-image: url('/images/main/main-deco6.png'); }
.d7::before{ background-image: url('/images/main/main-deco7.png'); }
.d8::before{ background-image: url('/images/main/main-deco8.png'); }
.d9::before{ background-image: url('/images/main/main-deco9.png'); }
.mainH3{ margin-top: 8rem; font-size: clamp(18rem, calc( 27 / var(--inr) * 100vw ), 27rem); letter-spacing: -.01em; color: #222; }
.mainH3__wrapEmphasis{ display: inline-flex; }
.mainH3__emphasis{ position: relative; }
.mainH3__emphasis::before{ content: ''; position: absolute; top: -9rem; left: 50%; transform: translateX(-50%); display: inline-block; width: 6rem; height: 6rem; border-radius: 50%; }
.mainH3__emphasis:nth-child(1)::before{ background: #4585c6; }
.mainH3__emphasis:nth-child(2)::before{ background: #ccc; }
.mainH3__emphasis:nth-child(3)::before{ background: var(--primary); }
.mainH3__emphasis:nth-child(4)::before{ background: #bbb; }
.mainH3__emphasis:nth-child(5)::before{ background: var(--secondary); }
.mainH3__emphasis:nth-child(6)::before{ background: #d9c100; }
.mainH3__emphasis:nth-child(7)::before{ background: #d9c100; }
.mainH3__strong{ font-weight: 800; color: var(--secondary); }
.mainH3__small{ font-size: clamp(16rem, calc( 20 / var(--inr) * 100vw ), 20rem); }
.main__h2{ margin-top: -0.11290323em; font-size: clamp(80rem, calc( 124 / var(--inr) * 100vw ), 124rem); letter-spacing: 0.038em; color: #222; }
.main__p{ margin-top: -.8em; font-size: clamp(16rem, calc( 20 / var(--inr) * 100vw ), 20rem); line-height: 1.7; color: #555; }
.mainUl{--ulColor: #ffe1bd;margin: 64rem auto 0;--index: 2;--gap: clamp(20rem, calc( 60 / var(--inr) * 100vw ), 60rem);display: grid;gap: 25rem var(--gap);grid-template-columns: repeat(var(--index), 1fr);max-width: calc((170rem * var(--index)) + (var(--gap) *  var(--index)));}
.mainUl__a{ position: relative; display: block; transition:0.2s ease;}
.mainUl__a:before{content: ''; position: absolute; top: 1px; left: 0; transform: translateX(-10.6%) scale(0); aspect-ratio: 56/59; width: 31.4%; background: url('/images/main/main-flower.png') no-repeat 50% / contain; z-index: 1; transition:0.2s ease;}
.mainUl__wrapImg{ contain: content; margin: 0 auto; display: block; width: 180rem; height: 180rem; border: 5rem solid var(--ulColor); border-radius: 50%; transition:0.2s ease;}
.mainUl__img{ width: 100%; height: 100%; object-fit: cover; }
.mainUl__strong{ margin-top: 5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; width: max(100%, 11em); padding: 5rem; background: var(--ulColor); border-radius: 15rem; font-size: clamp(16rem, calc( 20 / var(--inr) * 100vw ), 20rem); font-weight: 400; transition:0.2s ease;}
@media(hover:hover){
    .mainUl__a:hover .mainUl__wrapImg{border-color:var(--primary);}
    .mainUl__a:hover .mainUl__strong{background:var(--primary); color:#fff;}
    .mainUl__a:hover:before{transform: translateX(-10.6%) scale(1);}
}
@media(min-width:768px){
    .mainUl{--index: 3;row-gap: 95rem;}
    .mainUl__li:where(:nth-child(6n+1), :nth-child(6n+2), :nth-child(6n+3)) .mainUl__a{ transform: translateX(-33.3%); }
    .mainUl__li:where(:nth-child(6n+4), :nth-child(6n+5), :nth-child(6n+6)) .mainUl__a{ transform: translateX(33.3%); }
    .mainUl__strong{position: absolute;left: 50%;transform: translateX(-50%);}
}
@media(max-width:1279px){
    .d1, .d2{ display: none; }
}
@media(max-width:767px){
    .d3{ top: 4%; }
    .d6{ top: 30%; }
    .d8, .d9{ display: none; }
    .mainUl{ grid-template-columns: repeat(2, 1fr); padding: 0 4vw; max-width: 100%;}
    .main__h2 { line-height: 1.1; padding-block: 28px;}
}
@media (min-width:768px) and (max-width: 1080px) {
    .main {padding: 180rem 0 clamp(90rem, calc( 135 / var(--inr) * 100vw ), 135rem); }
}