@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

::before,
::after {
    box-sizing: inherit;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    width: 100%;
    margin: auto;
    letter-spacing: 0.8px;
    background-color: #f7e6c7;
    color: #414c25;
    font-weight: 500;
}

p,span {
    font-weight: 500;
}

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

.pad-1rem {
    padding-left: 1rem;
    padding-right: 1rem;
}

.anchor {
    margin-top: -140px;
    padding-top: 140px;
}

.inblock {
    display: inline-block;
}
.indent {
    text-indent: -10px;
    display: inline-block;
}

.header {
    position: fixed;
    top: 0;
    width: 100%;
    margin: auto;
    z-index: 100;
    padding: 20px 110px 20px 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s all;
    background-color: #414c25;
}
.header.is-scroll {
    padding: 5px 110px 5px 4%;
    /* background-color: #333333; */
    /* background-color: #434c2d; */
}
.h-logo img {
    transition: 0.3s all;
}
.header.is-scroll.is-section .h-logo img {
    filter: sepia(100%) hue-rotate(330deg) saturate(300%) brightness(1.2) contrast(0.8);
}
.header.is-scroll.is-section.is-open .h-logo img {
    filter: none;
}
.h-logo {
    position: relative;
    z-index: 100;
    transition: 0.3s all;
}
.h-link {
    background-color: #f7e6c7;
    border-radius: 50px;
    width: 273px;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #414c25;
    font-weight: bold;
    font-size: 24px;
    transition: 0.3s all;
    position: relative;
    z-index: 100;
}
.h-link:hover {
    color: #758747;
}

.top {
    position: relative;
    background-image: url(../img/main.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 1450px;
    padding-left: 1rem;
    padding-right: 1rem;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}
/* .top .symbol {
    position: absolute;
    top: 0; bottom: 20%;
    left: 0; right: 0;
    margin: auto;
    z-index: 2;
    max-width: 50%;
    will-change: transform;
} */

@keyframes infinityLoop {
    0% {
        transform: translate(0, 0);
    }
    12.5% {
        /* 右上へ大きく移動 */
        transform: translate(70px, -20px);
    }
    25% {
        /* 右端の頂点 */
        transform: translate(100px, 0);
    }
    37.5% {
        /* 右下へ */
        transform: translate(70px, 20px);
    }
    50% {
        /* 中央通過 */
        transform: translate(0, 0);
    }
    62.5% {
        /* 左上へ大きく移動 */
        transform: translate(-70px, -20px);
    }
    75% {
        /* 左端の頂点 */
        transform: translate(-100px, 0);
    }
    87.5% {
        /* 左下へ */
        transform: translate(-70px, 20px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* スライダー全体のスタイル */
.main-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* ロゴ(z-index: 2)より下に配置 */
}

/* 各スライドの画像設定 */
.slider-item {
    width: 100%;
    height: 1450px; /* .top と同じ高さに合わせる */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* ロゴとニュースの重なり順を確実に上にする */
.top .symbol,
.top .news {
    z-index: 2;
}


#news {
    padding-top: 200px;
    margin-top: -200px;
}
#news a {
    position: relative;
    border-radius: 60% 40% 50% 50% / 70% 50% 50% 30%;
}
.top .news img {
    /* position: absolute; */
    /* bottom: 80px; */
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    z-index: 2;
    border-radius: 48% 45%;
    max-width: 100%;
    /* transition: 0.3s all; */
}
.top .news img:hover {
    /* filter: hue-rotate(120deg); */
}
.sec1 {
    position: relative;
    text-align: center;
    padding-top: 160px;
    padding-bottom: 150px;
    overflow-x: clip;
}
.sec1::before {
    content: "";
    position: absolute;
    top: -10vw; /* アーチの高さの半分 */
    left: 0;
    width: 100%;
    height: 10vw;
    background: #f7e6c7;
    clip-path: ellipse(60% 100% at 50% 100%);
    z-index: 1;
}
.sec1 .about {
    max-width: 60%;
    margin: auto;
}
.sec1 .name {
    max-width: 70%;
    margin: 30px auto 0;
}
.name-wrap {
    position: relative;
    max-width: 800px;
    margin: auto;
}
.sec1-list {
    position: relative;
    width: 100%;
    margin: auto;
    text-align: left;
    padding-top: 80px;
    line-height: 2.2;
    text-shadow: 1px 1px 0px #f7e6c7;
}
.sec1-list li {
    position: relative;
    max-width: 420px;
    width: 100%;
    margin: auto;
    padding-top: 40px;
}
.sec1-list .ttl {
    font-size: 24px;
    border-bottom: solid 1px #414c25;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    line-height: 1.5;
}
.sec1-list .ttl2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.7;
}
.sec1-list .ttl2 span {
    display: inline-block;
}
.sec1-list p {
    padding-top: 25px;
    padding-bottom: 25px;
}
.sec1-list .vision p {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 14px;
}
.sec1-list .vision .ttl {
    margin-bottom: 0;
}
.sec1-list .vision .vision-ttl {
    font-size: 19px;
    text-indent: -10px;
    display: inline-block;
}
.sec1-list .under {
    border-bottom: solid 1px #414c25;
}
.abimg {
    position: absolute;
    z-index: 10;
}
.ab-1 {
    top: 10%;
    /* left: 2%; */
    right: 87%;
}
.ab-2 {
    top: 28%;
    /* right: -25%; */
    left: 92%;
}
.ab-3 {
    top: 66%;
    /* right: 0%; */
    left: 82%;
}

.ab-4 {
    left: 13%;
    margin-top: -1.5%;
}
.ab-5 {
    right: 7%;
    margin-top: -5%;
}
.ab-6 {
    left: 4.5%;
    margin-top: -2%;
}
.ab-8 {
    margin-top: -7%;
    right: 16%;
}
.ab-9 {
    margin-top: 3%;
    right: 28%;
}
.ab-10 {
    margin-top: -11%;
    left: 17%;
}
.ab-11 {
    margin-top: 11%;
}
.ab-12 {
    margin-top: -6%;
    right: 2%;
}
.bg-img {
    position: absolute;
    max-width: 1430px;
    width: 100%;
    left: 0; right: 0;
    margin: -200px auto 0;
    z-index: -1;
}
.pic {
    position: relative;
    z-index: 5;
}
.pic-1 {
    margin-left: 5%;
}
.pic-2 {
    margin-left: auto;
    margin-right: 4%;
}
.pic-3 {
    margin-top: -4%;
}
.pic-4 {
    margin-left: auto;
}
.pic-5 {
    margin-top: -3%;
    margin-left: 5%;
}

.sec2 {
    position: relative;
    margin-top: 10vw;
    background-color: white;
    padding-top: 50px;
    padding-bottom: 100px;
}
.sec2::before {
    content: "";
    position: absolute;
    top: -10vw; /* アーチの高さの半分 */
    left: 0;
    width: 100%;
    height: 10vw;
    background: white;
    clip-path: ellipse(60% 100% at 50% 100%);
}
.area {
    margin: 0 auto 90px;
}
.guide {
    margin: 0 auto 60px;
}
.area-list {
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 35px;
    column-gap: 2%;
    margin: auto;
}
.area-list img {
    margin: auto;
}
.area-list .txt {
    max-width: 410px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 22px 4% 30px;
    margin: auto;
}
.area-list .ttl {
    padding-bottom: 13px;
}
.area-list .ttl .en {
    font-size: 41px;
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
    line-height: 1;
}
.area-list .ttl .jp {
    font-weight: bold;
    display: inline-block;
}
.area-list p {
    font-size: 14px;
}

.footer {
    text-align: center;
}
.map {
    position: relative;
    width: 100%;
    /* padding-top: 56.25%; */
    padding-top: 490px;
    height: 0;
    margin-bottom: 25px;
}
@media screen and (max-width: 600px) {
    .map {
        padding-top: 350px;
    }
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.f-ttl {
    font-size: 30px;
    font-weight: bold;
    margin-top: 90px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}
.f-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    padding: 25px 10px;
    max-width: 524px;
    width: 100%;
    background-color: #414c25;
    border-radius: 50px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s all;
    pointer-events: none;
}
.f-tel:hover {
    background-color: #758747;
}
.footer .time {
    font-weight: 500;
    margin-bottom: 100px;
}
.f-logo {
    position: relative;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    display: block;
    background-color: #414c25;
    margin-top: 10vw;
    padding-bottom: 5vw;
}
.f-logo::before {
    content: "";
    position: absolute;
    top: -5vw; /* アーチの高さの半分 */
    left: 0;
    width: 100%;
    height: 10vw;
    background-color: #414c25;
    clip-path: ellipse(60% 100% at 50% 100%);
}
.f-logo img {
    position: relative;
    max-width: 30%;
    z-index: 5;
    margin: auto;
}

.map {
    object-fit: contain;
}

.f-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    max-width: 700px;
    margin: 35px auto 0;
}
.f-list a {
    color: #f7e6c7;
    font-weight: bold;
    text-decoration: none;
}



.fade-in-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.5s cubic-bezier(0.2, 1, 0.3, 1), transform 3s cubic-bezier(0.2, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}
.fade-in-item.keep {
    transform: translateY(0);
}
.fade-in-item.is-active {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-item.fuwa {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
    transition: opacity 1.5s cubic-bezier(0.33, 1, 0.68, 1), 
                transform 2.5s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: opacity, transform; /* パフォーマンス向上 */
}
.fade-in-item.fuwa.is-active {
  opacity: 1;
  transform: translateY(0) scale(1.0);
}

/* #news img:hover {
  animation: poyoyon 0.8s ease-in-out forwards;
} */

@keyframes poyoyon {
  0%   { transform: scale(1.0, 1.0); }
  30%  { transform: scale(1.2, 0.8); } /* 横に潰れる */
  50%  { transform: scale(0.9, 1.1); } /* 縦に伸びる反動 */
  70%  { transform: scale(1.05, 0.95); } /* 小さく反動 */
  100% { transform: scale(1.0, 1.0); } /* 元に戻る */
}



/* メニューの基本スタイル */
.full-menu {
  position: fixed;
  top: 50px;
  left: 0;
  width: 100%;
  height: 0; /* 最初は高さを0に */
  /* background-color: #434c2d; */
  background-color: #f7e6c7;
  overflow: hidden;
  transition: all 0.25s ease-in-out; /* にゅっと動く速度 */
  z-index: 20;
  padding-top: 40px;
  
  /* 下部をアーチ状に切り抜く設定 (初期値) */
  clip-path: ellipse(150% 100% at 50% 0%);
}

/* メニューが開いた時の状態 */

.header.is-open + .full-menu {
  height: 390px; /* メニューの広がる高さ */
  clip-path: ellipse(80% 100% at 50% 0%); /* アーチを維持 */
}
.header.is-scroll.is-open + .full-menu {
    height: 340px;
}

/* リストの装飾 */
.menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  row-gap: 30px;
  height: 100%;
  list-style: none;
  color: white;
  padding-bottom: 50px;
}
.menu-list a {
    color: white;
    font-weight: bold;
    font-size: 28px;
    text-decoration: none;
}
/* ×ボタンのスタイル（簡易版） */
.menu-trigger {
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 1000;
  /* ここに三本線から×にするスタイルを記述 */
}

#infinity-item {
  position: absolute;
  top: 350px;
  /* left: 50%;
  right: 50%;
  margin: auto;
  transform: translate(-50%, -50%);
  will-change: transform; */

    margin: auto;
    z-index: 2;
    max-width: 50%;
}

.sp-img1, .sp-img2, .sp-img {
    display: none;
}

.logo-mask {
    width: 102px;
    height: 111px;
    background-color: #f7e6c7; /* 通常時の色（白） */
    
    /* マスクの設定 */
    -webkit-mask-image: url('../img/logo.svg?v2');
    mask-image: url('../img/logo.svg?v2');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;    
    transition: background-color 0.3s ease; /* 色変化を滑らかに */
}
/* スクロールして is-active がついた時 */
.header.is-scroll.is-section .logo-mask {
    background-color: #f7e6c7; /* 指定のベージュに100%正確に変わります */
}


@media screen and (max-width: 1400px) {
    .bg-img { margin-top: -14.285714vw; }

    .ab-1 { width: 6.7857142vw; }
    .ab-2 { width: 19.071428vw; }
    .ab-3 { width: 10.642857vw; }

    .ab-4 { width: 12.785714vw; }
    .ab-5 { width: 6.714285vw; }
    .ab-6 { width: 17.42857vw; }
    .ab-8 { width: 6.5vw; }
    .ab-9 { width: 4.357142vw; }
    .ab-7 { width: 24.42857vw; margin-left: 20%; }
    .ab-10 { width: 8.214285vw; }
    .ab-11 { width: 8.357142vw; }
    .ab-12 { width: 29.857142vw; }

    .pic-1 { width: 29.285714vw; }
    .pic-2 { width: 23.142857vw; }
    .pic-3 { width: 28.428571vw; }
    .pic-4 { width: 27.071428vw; }
    .pic-5 { width: 23.142857vw; }

}

@media screen and (max-width: 1000px) {
    .map {
        height: 255px;
        object-fit: cover;
    }
}

@media screen and (max-width: 900px) {
    .abimg, .pic {
        opacity: 0.75;
    }
    .pic-5 {
        margin-left: auto;
        margin-right: 5%;
    }
    .ab-10 { left: auto; right: 17%; }
    .ab-11 { right: 0; }

    .is-open .full-menu {
        padding-top: 50px;
    }
}

@media screen and (max-width: 768px) {
    body {
        font-size: 15px;
    }
    .anchor {
        padding-top: 120px;
        margin-top: -120px;
    }
    .h-logo img {
        width: 175px;
    }
    .top, .slider-item {
        height: 188.8vw;
    }
    .top .news img {
        bottom: 10.4166vw;
    }
    .area-list .ttl .en {
        font-size: 32px;
    }
    .h-link {
        font-size: 17px;
        height: 50px;
        width: 155px;
        height: 45px;
        /* display: none; */
    }
    .header,
    .header.is-scroll {
        padding: 5px 75px 5px 6%;
    }
    .header.is-open + .full-menu {
        height: 290px !important;
        clip-path: ellipse(90% 100% at 50% 0%);
    }
    .menu-list {
        row-gap: 25px;
        padding-bottom: 45px;
    }
    .logo-mask {
        height: 83px;
        width: 76px;
    }
    #infinity-item {
        top: 0;
        bottom: 25%;
        margin: auto;
    }
    .pic-3 {
        margin-left: auto;
    }
    .ab-1 {
        right: 81%;
    }
    .ab-2 {
        left: 88%;
    }
    .ab-3 {
        left: 80%;
    }
    .ab-6 {
        left: auto;
        right: 4.5%;
    }
    .sec1-list .vision .vision-ttl {
        font-size: 17px;
    }
    .sec1 {
        padding-top: 60px;
    }
    .sec1::before {
        top: -20vw;
        height: 20vw;
        clip-path: ellipse(80% 100% at 50% 100%);
    }
    .sec1 .name {
        margin-top: 20px;
    }
    .f-tel {
        pointer-events: auto;
    }
    .f-list {
        row-gap: 10px;
        justify-content: center;
    }
    .f-list li {
        padding: 0 20px;
    }
    .menu-list a img {
        transform: scale(0.8);
    }
}

@media screen and (max-width: 480px) {
    .is-open .full-menu {
        clip-path: ellipse(100% 100% at 50% 0%);
    }
    .abimg, .pic {
        opacity: 0.8;
    }
    .top .symbol {
        bottom: 30%;
    }
    .top .news img {
        max-width: 95%;
    }
    .sec1-list {
        padding-top: 110px;
        text-align: center;
    }
    .sec1 .about {
        max-width: 70%;
    }
    .sec1 .name {
        max-width: 90%;
    }
    .ab-3 {
        left: 84%;
    }
    .area-list {
        grid-template-columns: 1fr;
    }
    .f-ttl {
        font-size: 24px;
        margin-bottom: 30px;
    }
    .f-tel {
        padding: 12px 10px;
        font-size: 26px;
    }

    .pic-1 {
        width: 38.0714282vw;
    }
    .pic-2 {
        width: 30.0857141vw;
        margin-right: 1%;
    }
    .pic-3 {
        width: 36.9571423vw;
        margin-right: 1%;
    }
    .pic-4 {
        width: 35.1928564vw;
    }
    .pic-5 {
        width: 30.0857141vw;
    }
    .bg1 {
        padding-top: 30px;
    }
    .bg2 {
        padding-top: 174px;
    }
    .bg3 {
        padding-top: 98px;
    }
    .bg4 {
        padding-top: 57px;
        padding-right: 6px;
    }
    .bg5 {
        padding-top: 75px;
    }

    .ab-1 {
        width: 8.82142846vw;
    }
    .ab-2 {
        width: 24.7928564vw;
    }
    .ab-3 {
        width: 13.8357141vw;
    }
    .ab-4 {
        width: 16.6214282vw;
    }
    .ab-12 {
        margin: -100px auto 0;
        left: 0;
    }
    /* .area-list .ttl .en img {
        transform: scale(0.8);
    } */
    .bg-img,
    .ab-1, .ab-2, .ab-3, .ab-7 {
        display: none;
    }

    .sp-img1, .sp-img2, .sp-img {
        position: relative;
        display: block;
        z-index: -1;
    }
    .sp-img1 {
        padding-top: 30px;
        margin-bottom: -40px;
    }
    .sp-01 {
        max-width: 44%;
        margin-left: auto;
        margin-right: 11%;
    }
    .sp-02 {
        position: absolute;
        left: 9%;
        bottom: 3px;
        max-width: 16%;
    }
    .sp-03 {
        position: absolute;
        right: 0;
        bottom: 30px;
        max-width: 16%;
    }
    .sp-04 {
        max-width: 57%;
        margin-left: 1%;
    }
    .sp-05 {
        position: absolute;
        right: 20%;
        top: 35px;
        max-width: 25%;
    }
    .sp-06 {
        position: absolute;
        top: 40%;
        right: 4%;
        max-width: 24%;
    }
    .sp-07 {
        margin: 70px auto 0;
    }
    .sec1-list {
        padding-top: 0;
    }
    .sp-08 {
        margin: 0 2% 0 auto;
        max-width: 60%;
    }
    .sp-09 {
        margin: -5% 11% 0 auto;
        max-width: 43%;
    }
    .sp-10 {
        margin: 15px auto 0 11%;
        max-width: 45%;
    }
    .sp-11 {
        position: absolute;
        left: 0;
        margin-top: -22%;
        max-width: 16%;
    }
    .sp-12 {
        position: absolute;
        right: 14%;
        max-width: 17%;
        margin-top: -24%;
    }
    .sp-13 {
        max-width: 56%;
        margin: 25px auto 0;
    }
    .sp-14 {
        margin: 27% 0 0 12%;
        max-width: 56%;
    }
    .sp-15 {
        position: absolute;
        z-index: 1;
        margin: 10% 0 0 17%;
        max-width: 15%;
    }
    .sp-16 {
        position: absolute;
        margin: 33% 0 0 0;
        max-width: 10%;
    }
    .sp-17 {
        margin: 10% 8% 0 auto;
        max-width: 67%;
    }
    .sec1 {
        padding-bottom: 100px;
    }
}


.fade-in-item.is-active.yura1 { animation: yurayura1 4s linear 2.5s infinite; }
.fade-in-item.is-active.yura2 { animation: yurayura2 4s linear 2.5s infinite; }
.fade-in-item.is-active.yura3 { animation: yurayura3 4s linear 2.5s infinite; }


@keyframes yurayura1 {
  0% { transform: translateY(0) scale(1.0) rotate(0deg); }
  33% { transform: translateY(-4px) scale(1.01) rotate(1deg); }
  66% { transform: translateY(2px) scale(0.99) rotate(-1deg); }
  100% { transform: translateY(0) scale(1.0) rotate(0deg); }
}
@keyframes yurayura2 {
  0% { transform: translate(0, 0) scale(1.0) rotate(0deg); }
  33% { transform: translate(-1.5px, 1.5px) scale(1.01) rotate(0.05deg); }
  66% { transform: translate(1.5px, -1.5px) scale(0.99) rotate(-0.05deg); }
  100% { transform: translate(0, 0) scale(1.0) rotate(0deg); }
}
@keyframes yurayura3 {
  0% { transform: translateY(0) scale(1.0); }
  50% { transform: translateY(-10px) scale(1.01); }
  100% { transform: translateY(0) scale(1.0); }
}