@charset "UTF-8";

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

/* ローディング画面のスタイル */
#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fffdf7;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loading.loaded {
    opacity: 0;
    visibility: hidden;
}

/* ローディング画面のコンテンツ */
.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.loading-logo {
    width: 300px; /* ロゴのサイズ */
    height: auto;
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeInLoading 1.2s ease forwards;
}

.loading-subtitle {
    font-family: "Kiwi Maru", serif;
    font-size: 1.3em;
    color: #b17d40;
    letter-spacing: 0.1em;
    margin-top: 10px;
    opacity: 0;
    animation: fadeInLoading 1.2s ease forwards 0.1s; /* ロゴとほぼ同時に表示 */
}

@keyframes fadeInLoading {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
html {
    scroll-behavior: smooth;
}

body{
    background-color: #fffdf7;
}

/* サイト全体を囲むラッパー：はみ出した装飾を隠す */
.wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.flex{
    display: flex;
    align-items: center;
}

header.flex {
    margin-top: 0;
    justify-content: space-between;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

.logo-header {
    width: 30%;
    height: auto;
}

.yellow-rect.header-rect {
    background-color: rgba(255, 252, 239, 0.95);
    margin-top: 0;
    margin-left: 30px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.yellow-rect.header-rect:hover {
    transform: translateY(-5px);
    opacity: 0.8;
}

.header-kaiinn-link {
    text-decoration: none;
    z-index: 10;
}

.header-wave-bg {
    position: fixed;
    top: 0px;
    left: 0;
      width: 100%;
    height: 100%; /* ヘッダーより少し長くして波を見せる */
    z-index: -1; /* 文字や画像の下に配置 */
    pointer-events: none; /* クリックを邪魔しないようにする */
    filter: blur(3px); /* 境目をぼかす */
}

.header-wave-bg svg {
    width: 100%;
    height: 35%;
    transform: rotate(180deg);
    margin-top: 0;
}

.header-wave-bg2 {
    position: fixed;
    top: 40px;
    left: 0;
      width: 100%;
    height: 35%; /* ヘッダーより少し長くして波を見せる */
    z-index: -1; /* 文字や画像の下に配置 */
    pointer-events: none; /* クリックを邪魔しないようにする */
    filter: blur(20px); /* 境目をぼかす */
    transition: opacity 0.5s ease;
}

.header-wave-bg2 svg {
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
}

/* スクロールした時に波を薄くする */
header.scrolled .header-wave-bg,
header.scrolled .header-wave-bg2 {
    opacity: 0.35;
}


.member-btn{
    margin-right: 120px;
    margin-top: 45px;
    width: 160px;
    height: auto;
    display: block;
    text-decoration: none;
    position: relative;
    z-index: 10;
    opacity: 0.85;
    animation: float-btn 3s ease-in-out infinite; /* ふわふわ動くアニメーション */
    transition: opacity 0.3s ease;
}

/* ホバー時にくっきりさせる */
.member-btn:hover {
    opacity: 0.8;
}

.member-btn img {
    width: 80%;
    height: auto;
    rotate: -20deg;
    transition: transform 0.3s ease;
}

.member-btn:hover img {
    transform: scale(1.1) rotate(20deg);
}

.member-btn-text {
    position: absolute;
    top: 47%;
    left: 40%;
    transform: translate(-50%, -50%) rotate(-10deg);
    width: 100%;
    text-align: center;
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    font-weight: bold;
    font-size: 1.2em;
    transition: transform 0.3s ease;
}

.member-btn:hover .member-btn-text {
    transform: translate(-50%, -50%) rotate(10deg);
}

h1{
    color: #b17d40;
    letter-spacing: 0.2em;
    font-size: 1.2em;
    font-weight: 100;
	z-index: 3;
    font-family: "Kiwi Maru", serif;
    line-height: 1.6;
}

h2{
    color: #b17d40;
    letter-spacing: 0.2em;
    font-size: 1.2em;
    font-weight: 100;
    font-family: "Kiwi Maru", serif;
}
    
/* --- ハンバーガーメニュー --- */
.hamburger-menu {
    margin-right: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 30; /* メニューを最前面に */
}

.icon-container {
    width: 36px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.menu-text {
    color: #b17d40;
    font-size: 18px;
    margin-top: 4px;
    letter-spacing: 0.05em;
    font-family: "Kiwi Maru", serif;
    font-weight: 100;
}

.hamburger-menu .line {
    width: 100%;
    height: 2px;
    background-color: #b17d40;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- ナビゲーションメニュー --- */
.nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 500px; /* 幅を広げて、文字の開始位置を左へずらす */
    height: 120vh;
    background-color: rgba(255, 253, 247); /* 背景色を少し透明にする */
    transition: right 0.4s ease;
    z-index: 20;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%);
    mask-image: linear-gradient(to right, transparent, black 15%);
    justify-content: center; /* 中央寄せ */
    align-items: center; /* 上下中央揃え */
    padding-top: 250px;
    padding-left: 150px;
}
.nav-bg-extra {
    display: none;
}

/* メニュー横の大きな画像 */
.nav-main-img {
    position: absolute; /* 背景として配置 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせてトリミング */
    opacity: 0.15; /* 透明度を上げて薄くする */
    pointer-events: none; /* クリックを邪魔しない */
}

.nav-menu ul {
    list-style: none;
    position: relative; /* 画像の上に文字を表示 */
    z-index: 1;
}

.nav-menu li {
    margin-bottom: 20px;
}

.nav-menu li a {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    color: #b17d40;
    text-decoration: none;
    font-size: 18px;
    font-family: "Kiwi Maru", serif;
    width: fit-content; /* リンクの幅を中身（アイコン＋文字）に合わせる */
    position: relative;
}

.nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 10px; /* 文字と画像のすぐ下に配置（padding分を考慮） */
    left: 20px; /* 左のpadding分空ける */
    width: 0;
    height: 9px; /* クレヨン風にするため少し太くする */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="6"><path d="M 0 3 C 5 0, 5 6, 10 3 S 15 0, 20 3" stroke="%23b17d40" fill="transparent" stroke-width="1.5"/></svg>') repeat-x;
    background-size: 20px 6px;
    transition: width 0.4s ease-out; /* 幅が伸びるアニメーション */
}

.nav-icon {
    width: 12%;
    height: auto;
    margin-right: 10px;
    filter: blur(1px);
    opacity: 0.7;
}



/* 双葉の画像をランダムな向きに傾ける */
.nav-menu li:nth-child(1) .nav-icon {
    transform: rotate(-15deg);
}

.nav-menu li:nth-child(2) .nav-icon {
    transform: rotate(10deg);
}

.nav-menu li:nth-child(3) .nav-icon {
    transform: rotate(-25deg);
}

.nav-menu li:nth-child(4) .nav-icon {
    transform: rotate(5deg);
}

.nav-menu li:nth-child(5) .nav-icon {
    transform: rotate(-18deg);
}

.nav-menu li a:hover::after {
    width: 55%;
}


/* --- JavaScriptで付与するクラスによるスタイルの切り替え --- */

/* メニューが開いている時のスタイル */
.nav-menu.open {
    right: 0; /* 画面内にスライドイン */
}

/* ハンバーガーアイコンを「×」印にするアニメーション */
.hamburger-menu.open .line:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.hamburger-menu.open .line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.open .line:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* ファーストビュー */
.fv-container {
    display: grid;
    position: relative; /* 蜂のアニメーションの基準点にする */
    /* 1つの大きなセルを作成して、そこに全員集合させる */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 100%;
    min-height: 600px; /* 最低限の高さを確保 */
    height: 80vh;      /* 画面の高さの80% */
    padding: 20px;     /* 画面端との余白 */
    overflow: visible;
    margin-top: 230px;
    margin-left: 30px;
}

/* 画像とタイトルを同じ場所（1行1列目）に重ねる設定 */
.fv-img, .fv-img2, .title-container {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-family: BIZ UDGothic, sans-serif;
}

.fv-img{
    /* 左上に配置 */
    align-self: start;
    justify-self: start;
    width: 40%;
    height: auto;
    margin-top: -80px;
    margin-left: 30px;
    mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}
.fv-img2 {
    /* 右下に配置 */
    align-self: end;
    justify-self: end;
   width: 28%;
    height: auto;
    margin-right: 380px;
    margin-bottom: -40px;
    mask-image: radial-gradient(ellipse at center, rgb(255, 255, 255) 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}
.title-container {
    place-self: center;
    z-index: 2;
    margin-top: -350px;
    margin-left: 360px;
}

.title-jp {
    padding-top: 0.2em;
}

.title-jp p:nth-child(2) {
    padding-left: 3em;
    padding-top: 0.7em;
}

.title-en p:nth-child(1) {
    padding-left: 4em;
    padding-top: 0.5em;
}
.title-en p:nth-child(2) {
    padding-left: 12.8em;
    padding-top: 0.3em;
}

.title-en p {
    font-family: sans-serif;
    opacity: 0.3;
    font-size: 2.4em;
    color: #b17d40;
    line-height: 1.1;
    font-weight: 440;
    white-space: nowrap;
}
.title-container p {
    font-family: "Kiwi Maru", serif;
    font-size: 2.1em;
    color: #b17d40;
    font-weight: 100;
    line-height: 1.6;
}

/* 波の形 */
.wave-divider {
    display: block; /* SVGの下にできる隙間を消す */
    width: 100%;
    height: auto;
    margin-top: -100px;
}

.wave-content {
    background-color: #9ec7d0; /* SVGのfillと同じ色 */
    padding-top: 100px;
    min-height: 500px; /* 必要に応じて高さを調整 */
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center;   /* 水平方向の中央揃え */
    justify-content: flex-start; /* 上寄せに変更 */
    gap: 40px; /* 要素間の余白を追加 */
}

.wave-content p {
    color: #fff;
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 100;
}

.wave-text1{
    font-size: 1.5em;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(-30px); /* 上から降りてくる開始位置 */
    transition: opacity 1s ease, transform 1s ease;
}

.wave-text2{
    line-height: 2.5;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease, transform 1s ease;
    transition-delay: 0.3s; /* 2行目は少し遅れて表示 */
}

.wave-text1.visible,
.wave-text2.visible {
    opacity: 1;
    transform: translateY(0);
}

.wave-divider-bottom {
    display: block;
    width: 100%;
    height: auto;
    transform: rotate(180deg); /* 上下反転させて、波が下に向くようにする */
    margin-top: -1px; /* ブラウザによってできる1pxの隙間を埋める */
}

/* 波のアニメーション */
.header-wave-bg2 path,
.header-wave-bg path,
.wave-divider path,
.wave-divider-bottom path,
.insta-wave-bg path,
.insta-wave-bottom path {
    transform-origin: center bottom;
    transform-box: fill-box;
}

/* 回転していない波 */
.wave-divider path,
.insta-wave-bg path {
    animation: wave-sway 3s ease-in-out infinite alternate;
}

/* 180度回転している波：逆再生して動きを揃える */
.header-wave-bg2 path,
.header-wave-bg path,
.wave-divider-bottom path,
.insta-wave-bottom path {
    animation: wave-sway 3s ease-in-out infinite alternate-reverse;
}

@keyframes wave-sway {
    0% { transform: scale(1.1, 1) translate(-4%); }
    100% { transform: scale(1.1, 1) translate(4%); }
}

/* 会員ボタンの浮遊アニメーション */
@keyframes float-btn {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* 蜂のマウス追従用スタイル */
#chasing-bee {
    position: absolute; /* .fv-containerを基準に配置 */
    top: 0;
    left: 0;
    width:  6%;
    height: auto;
    z-index: 999; /* 他の要素より手前に表示 */
    pointer-events: none; /* 蜂がクリックなどの邪魔をしないようにする */
    display: none; /* JavaScriptで表示を制御するため初期状態は非表示 */
}

/* about */

.about-container {
    position: relative;
    text-align: center;
    margin-top: 60px;
}

.about-text{
    font-size: 3.6em;
    opacity: 0.2;
    color: #b17d40;
    transform: scaleY(1.3);
    letter-spacing: 0.1em;
}

.about-text2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    font-size: 1.3em;
}

.about-img{
    width: 30%;
}
.about-body {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    margin-top: 40px;
    position: relative;
    margin-left: 80px;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease, transform 1s ease;
}

.about-body.visible {
    opacity: 1;
    transform: translateY(0);
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about-title{
    font-size: 1.5em;
    font-family: "Kiwi Maru", serif;
    font-weight: 100;
    color: #b17d40;
    letter-spacing: 0.1em;
}

.nakami{
    font-size: 1em;
    color: #b17d40;
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 100;
    letter-spacing: 0.1em;
    line-height: 2.1em;
}

.ibitu {
    position: absolute;
    bottom: -150px;
    left: -200px;
    width: 600px;
    height: auto;
    z-index: -1;
    opacity: 0.5;
}

.ibitu2 {
    position: absolute;
    bottom: -170px;
    right: -100px;
    width: 500px;
    height: auto;
    z-index: -1;
    opacity: 0.5;
}

/* member */
.member-container {
    position: relative;
    text-align: center;
    margin-top: 60px;
}

.member-text{
    font-size: 3.6em;
    opacity: 0.2;
    color: #b17d40;
    transform: scaleY(1.3);
    letter-spacing: 0.05em;
}

.member-text2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    font-size: 1.3em;
}

.member-body {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 130px;
    margin-top: 40px;
    position: relative;
    opacity: 0;
    transform: translateX(-50px); /* 左に配置 */
    transition: opacity 1s ease, transform 1s ease;
}

.member-body.visible {
    opacity: 1;
    transform: translateX(0);
}

/* memberセクションの背景装飾の向きと位置を調整 */
.member-body .ibitu {
    transform: rotate(30deg);
    bottom: -200px;
    left: -200px;
}

/* 追加したSVGを右端に配置 */
.member-body .ibitu-right {
    left: auto;
    right: -400px;
    bottom: -550px;
    transform: rotate(50deg);
}

.member-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    position: relative;
}

.tiiki-img {
    width: 60%;
}

.member-name {
    font-size: 1.5em;
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    border-bottom: 1.5px dashed #b17d40;
    padding-bottom: 15px;
    display: inline-block;
    margin-top: -100px;
}

.member-desc {
    color: #b17d40;
    line-height: 1.8;
    margin-top: 40px;
    font-family: "BIZ UDGothic", sans-serif;
    font-size: 1.05em;
    font-weight: 100;
}

.member-img{
    width: 22%;
}

.inaho{
    width: 40%;
    position: absolute;
    top: 0;
    right: -80px;
    transform: rotate(25deg);
}

.member-desc2{
    color: #b17d40;
    line-height: 1.8;
    margin-top: 30px;
    font-family: "BIZ UDGothic", sans-serif;
    font-size: 1.05em;
    font-weight: 100;
}


/* member2 */
.member-body2{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 130px;
    margin-top: 70px;
    margin-right: 60px;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.member-body2.visible {
    opacity: 1;
    transform: translateX(0);
}

.member-img2 {
    width: 22%;
}

.tiiki-img2{
    width: 35%;
}

.member-name {
    font-size: 1.5em;
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    border-bottom: 1.5px dashed #b17d40;
    padding-bottom: 15px;
    display: inline-block;
    margin-top: -100px;
}

.member-desc {
    color: #b17d40;
    line-height: 1.8;
    margin-top: 40px;
    font-family: "BIZ UDGothic", sans-serif;
    font-size: 1.05em;
    font-weight: 100;
}

.member-body3{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 130px;
    margin-top: 70px;
    margin-right: 150px;
    position: relative;
}

/* member3の背景装飾 */
.member-body3 .ibitu {
    left: -100px;
    bottom: -150px;
    transform: rotate(-120deg);
}

.member-img3{
    width: 25%;
}

.usi{
    width: 50%;
    position: absolute;
    top: 0;
    right: -20px;
    transform: rotate(2deg);
}

.member-desc2{
    color: #b17d40;
    line-height: 1.8;
    margin-top: 30px;
    font-family: "BIZ UDGothic", sans-serif;
    font-size: 1.05em;
    font-weight: 100;
}

/* member4 */
.member-body4 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 130px;
    margin-top: 70px;
    position: relative;
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease, transform 1s ease;
}

.member-body4.visible {
    opacity: 1;
    transform: translateX(0);
}

/* member4の背景装飾 */
.member-body4 .ibitu {
    left: auto;
    right: -200px;
    bottom: -100px;
    transform: rotate(40deg);
}

.member-img4 {
    width: 20%;
}

.tiiki-img4{
    width: 40%;
}

.tomato-img{
    width: 32%;
    position: absolute;
    top: 0;
    right: -20px;
    transform: rotate(2deg);
}

/* もっと見るボタン */
#more-members {
    display: none;
}

/* 上からふわっと表示させるアニメーション */
.fade-in-down {
    animation: fadeInDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
        max-height: 0;
        overflow: hidden;
    }
    99% {
        overflow: hidden; /* 開ききる直前までは隠しておく */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        max-height: 2000px;
        overflow: visible; /* 開ききったら装飾を表示する */
    }
}

.show-more-container {
    display: block;
}

.show-more-container {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 80px; /* フッターとの余白 */
    position: relative;
    z-index: 5;
}

#show-more-btn {
    background-color: #b17d40;
    color: #fffdf7;
    border: none;
    padding: 15px 60px;
    font-family: "Kiwi Maru", serif;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: 50px;
    transition: background-color 0.3s;
}

#show-more-btn:active {
    background-color: #9a6a32; /* タップ時に少し暗い色 */
}

#show-more-btn:hover {
    background-color: #9a6a32; /* 少し暗い色 */
}

/* メンバー画像のホバーエフェクト */
.member-img-box {
    position: relative;
    /* widthは各クラス(member-img等)で指定されます */
    overflow: hidden;
}

.member-img-box > img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s ease, filter 0.8s ease;
}

.insta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 253, 247, 0.9); /* 温かみのある白に変更 */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: clip-path 1s cubic-bezier(0.19, 1, 0.22, 1), opacity 1s ease;
    clip-path: circle(0% at 50% 50%); /* 中心から円形で広がるマスク */
}

.member-img-box:hover > img {
    transform: scale(1.05); /* 画像を少し拡大 */
    filter: blur(4px); /* 画像をぼかす */
}

.member-img-box:hover .insta-overlay {
    clip-path: circle(100% at 50% 50%); /* 円を広げて全体を表示 */
    opacity: 1;
}

.insta-logo {
    width: 40%; /* インスタロゴの大きさ */
    height: auto;
}

/* インタビュー　セクション */
/* 波　背景 */
.wave-content2 {
    background-color: #e9efd9;
    text-align: center;
}

.interview-container {
    position: relative;
    text-align: center;
    margin-top: 0;
    padding-top: 60px;
}

.interview-text {
    font-size: 3.6em;
    opacity: 0.2;
    color: #b17d40;
    transform: scaleY(1.3);
    letter-spacing: 0.01em;
}

.interview-text2 {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    font-size: 1.3em;
}

/* 吹き出し */

.hukidasi-img {
    margin-top: 30px;
    width: 44%;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease, transform 1s ease;
}

.hukidasi-img.visible {
    opacity: 1;
    transform: translateY(0);
}

.nameboard{
    width: 85%;
}

.wood-honda {
    width: 130%;
    margin-top: 15px;
}

.nameboard-container {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.interview-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 140px;
    margin-top: 90px;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease, transform 1s ease;
}

.interview-row.visible {
    opacity: 1;
    transform: translateX(0);
}

.interview-bubble {
    position: relative;
    background-color: #fff;
    padding: 40px;
    border-radius: 80px;
    width: fit-content;
    text-align: left;
    font-family: "Kiwi Maru", serif;
    font-size: 1.1em;
    color: #b17d40;
    line-height: 2.1;
    letter-spacing: 0.05em;
}

.interview-bubble::before {
    content: "";
    position: absolute;
    top: 55%;
    left: -25px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
}

.interview-bubble::after {
    content: "";
    position: absolute;
    top: 68%;
    left: -55px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
}

.bubble-deco-tomato {
    position: absolute;
    top: -40px;
    right: -30px;
    width: 30%;
    transform: rotate(20deg);
}

.activity-text {
    text-align: center;
    margin-top: 60px;
    font-size: 1.1em;
    color: #b17d40;
    line-height: 2.1;
    letter-spacing: 0.07em;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease, transform 1s ease;
}

.activity-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.activity-images {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-top: 50px;
    margin-bottom: 100px;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease, transform 1s ease;
}

.activity-images.visible {
    opacity: 1;
    transform: translateY(0);
}

.activity-img-box {
    position: relative;
    width: 34%;
    cursor: pointer;
}

.activity-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 2;
    background-color: rgba(255, 253, 247, 0.5);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.activity-badge {
    width: 160px;
    height: 80px;
    background-color: rgba(255, 253, 247, 0.95);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(177, 125, 64, 0.4);
}

.activity-badge p {
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin: 0;
}

.activity-img-box:hover .activity-overlay {
    opacity: 1;
}

.activity-img {
    width: 100%;
    height: auto;
}

.activity-img-box2 {
    position: relative;
    width: 34%;
}

.activity-img2 {
    width: 100%;
    height: auto;
}

.morimoto-img {
    position: absolute;
    top: -160px;
    left: -50px;
    width: 34%;
    transform: rotate(-45deg);
    opacity: 0;
}

.morimoto-img.visible {
    animation: 
        tilt-in-morimoto 1s ease-out forwards,
        sway-morimoto 1s ease-in-out 1s infinite alternate;
}

@keyframes tilt-in-morimoto {
    0% { transform: rotate(-45deg); opacity: 0; }
    100% { transform: rotate(-30deg); opacity: 0.8; }
}

@keyframes sway-morimoto {
    0% { transform: rotate(-30deg); }
    100% { transform: rotate(-20deg); } /* ゆらゆらと右へ傾き続ける */
}

.yasaikago-img {
    position: absolute;
    top: -170px;
    right: -60px;
    width: 40%;
    transform: rotate(0deg);
    opacity: 0;
}

.yasaikago-img.visible {
    animation: 
        tilt-in-yasaikago 1s ease-out forwards,
        sway-yasaikago 2s ease-in-out 1s infinite alternate;
}

@keyframes tilt-in-yasaikago {
    0% { transform: rotate(0deg); opacity: 0; }
    100% { transform: rotate(15deg); opacity: 1; }
}

@keyframes sway-yasaikago {
    0% { transform: rotate(15deg); }
    100% { transform: rotate(25deg); } /* ゆらゆらと右へ傾き続ける */
}

/* footer contents */
.insta-wave-bg {
    margin-top: -100px;
    line-height: 0; /* SVGの下に隙間ができないようにする */
    position: relative;
    z-index: 1;
}

.insta-wave-bg svg {
    display: block;
    width: 100%;
    height: auto;
}

.insta-content {
    background-color: #9ec7d0; /* 波と同じ色 */
    color: #fff;
    text-align: center;
    padding-bottom: 50px;
    position: relative;
    z-index: 3; /* 手の画像より手前に表示 */
    margin-top: -1px; /* SVGとの隙間を埋める */
}
.insta-container {
    margin-top: -100px;
    margin-top: 0;
}
.insta-container p {
  color: #fff;
  line-height: 2;
}
.insta-account {
    background-color: rgba(255, 255, 255, 0.207);
    display: inline-block;
    padding: 22px 25px;
    border-radius: 15px;
    font-family: "BIZ UDGothic", sans-serif;
    letter-spacing: 0.09em;
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 30px;
    text-decoration: none;
    color: #fff;
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 1s ease, transform 1s ease;
}

.insta-account.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ギャラリースライダー用スタイル */
.gallery-slider {
    width: 100%;
    /* max-width: 400px; */ /* 幅制限を解除して画面いっぱいに */
    margin: 40px auto 0; /* 上の余白と中央揃え */
    padding-bottom: 50px; /* ページネーション用の下余白 */
    padding-top: 20px;
}

/* 動きを等速（リニア）にする */
.gallery-slider .swiper-wrapper {
    transition-timing-function: linear;
}

.gallery-slider .swiper-slide img {
    width: 100%;
    height: 300px; /* 画像の高さを統一 */
    object-fit: cover; /* 画像の比率を保ったままトリミング */
    border-radius: 5px; /* ポラロイドっぽく角丸は控えめに */
    border: 12px solid #fff;
    opacity: 0.8;
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2); /* ふんわりした影 */
}

/* 奇数番目の画像を左に傾ける */
.gallery-slider .swiper-slide:nth-child(odd) img {
    transform: rotate(-3deg);
}

/* 偶数番目の画像を右に傾ける */
.gallery-slider .swiper-slide:nth-child(even) img {
    transform: rotate(3deg);
    margin-top: 10px; /* 少し段差をつける */
}

/* 特定の画像の位置調整（顔が見切れる場合など） */
.gallery-slider .swiper-slide img.object-pos-top {
    object-position: top;
}

/* 矢印の色を白にする */
.swiper-button-next,
.swiper-button-prev {
    color: #fff;
}

/* ページネーション（下の点々）の色 */
.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
}
.swiper-pagination-bullet-active {
    opacity: 1;
}

/* インスタグラム下の波 */
.insta-wave-bottom {
    line-height: 0;
    width: 100%;
    position: relative;
    z-index: 3; /* 手の画像より手前に表示 */
    pointer-events: none;
    margin-top: -1px; /* 上の背景との隙間を埋めるために少し重ねる */
}

.insta-wave-bottom svg {
    display: block;
    width: 100%;
    height: auto;
}

/* footer */
footer {
    width: 100%;
    margin-top: -1px; /* 波との隙間を埋める */
    position: relative;
    z-index: 2; /* 波（z-index: 1）より手前に表示 */
}

.footer-content {
    background-color: #fffdf7; /* 波と同じ薄緑色 */
    min-height: 380px; /* フッターの高さを確保 */
    padding: 20px 20px 0 20px;
}

/* footer */

.footer-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.hand-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 35%;
  margin-top: -229px; /* 水色の背景に届くまで上に移動 */
  position: relative;
  z-index: 10; /* 波より手前に表示して隠れないようにする */
  transform: translateX(-250px);
}

.hand-img-wrapper {
    position: relative; /* 子要素を絶対配置するための基準 */
    width: 100%;
}

.hand {
  width: 88%;
  display: block;
  transform: rotate(-8deg);
}

.back-to-top {
    position: absolute; /* 画像の上に重ねる */
    top: 86%; /* 位置調整：画像の中央より少し下 */
    left: 27%;
    transform: translate(-50%, -50%); /* 中央寄せ */
    background-color: rgba(255, 255, 255, 0.8); /* 白色の半透明 */
    border-radius: 20px;
    padding: 15px 25px;
    color: #b17d40;
    text-decoration: none;
    font-family: "Kiwi Maru", serif;
    font-weight: bold;
    letter-spacing: 0.1em;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.back-to-top:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translate(-50%, -60%);
    box-shadow: 0 5px 15px rgba(177, 125, 64, 0.2);
}

.footer-sns {
    position: absolute;
    top: -10px; /* 白い背景の上端から上に伸ばす */
    left: 5%; /* 画面の左端に配置 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    z-index: 10;
}

.sns-label {
    display: flex;
}

.vertical-line {
    width: 1.2px;
    height: 120px;
    background-color: #b17d40;
    position: relative;
}

.vertical-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
    background-color: #b17d40;
    transform-origin: bottom left;
    transform: rotate(45deg);
}

.sns-label p {
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-top: -70px; /* 文字だけ上に移動 */
    transform: rotate(90deg);
    margin-left: -75px;
    text-orientation: upright;
}

.sns-icons {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.sns-icons img {
    width: 40px;
    height: auto;
    transition: transform 0.3s ease;
}

.sns-icons a:hover img {
    transform: scale(1.2);
}

.footer-text-area {
    display: flex;
    gap: 40px; /* 左右の文字の間隔 */
    margin-top: 40px;
    margin-right: 100px; /* 全体を少し左寄りに配置 */
}

.footer-text-left {
    display: flex;
    flex-direction: column;
    margin-left: 30px;
}

.text-logo {
    width: 180px; /* ロゴの幅を調整 */
    margin-bottom: 10px; /* 下の文字との間隔 */
    margin-top: 0;
    margin-right: 0;
}

.sitemap-text {
    margin-top: 0;
    margin-right: 0;
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 3.5;
}

.sitemap-text a,
.sitemap-text2 a {
    color: #b17d40;
    text-decoration: none;
    display: inline-block; /* アニメーションのため */
    transition: transform 0.3s ease, color 0.3s ease;
}

.sitemap-text a:hover,
.sitemap-text2 a:hover {
    transform: translateY(-2px);
    color: #9a6a32; /* 少し濃い色に */
}

.sitemap-text2 {
    margin-top: 18px;
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    font-weight: bold;
    letter-spacing: 0.1em;
    line-height: 3.5;
}

.footer-kaiinn-container {
    position: absolute;
    top: -59px; /* 上からの位置 */
    right: 15%; /* 右からの位置 */
    width: 35%; /* 画像のサイズ */
    z-index: 10;
}

.footer-kaiinn {
    width: 140%;
    height: auto;
	opacity: 0.9;
    -webkit-mask-image: linear-gradient(to bottom right, black 60%, transparent 100%);
    mask-image: linear-gradient(to bottom right, black 60%, transparent 100%);
}

.kaiinn-info {
    position: absolute;
    top: 45%;
    left: 48%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-kaiinn-text {
    position: relative;
    margin: 0;
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    font-size: 1.7em;
    letter-spacing: 0.1em;
    white-space: nowrap;
    top: 120px;
}

.footer-kaiinn-text::before,
.footer-kaiinn-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 50px;
    height: 2px;
    background-color: #b17d40;
}

.footer-kaiinn-text::before {
    left: -60px;
    transform: translateY(-50%) rotate(45deg);
}

.footer-kaiinn-text::after {
    right: -60px;
    transform: translateY(-50%) rotate(-45deg);
}

.kaiinn-link {
    text-decoration: none;
    margin-top: 170px; /* 文字と図形の間隔を空ける */
}

.yellow-rect {
    width: 300px;
    height: 75px;
    border-radius: 30px;
    background-color: #fffcef;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 30px;
    transition: all 0.3s ease;
}

.yellow-rect:hover {
    transform: translateY(-5px);
    opacity: 0.8;
}

.yellow-rect:active {
    background-color: #e0d6c1; /* タップ時に少し暗い色 */
}

.rect-text {
    color: #b17d40;
    font-family: "Kiwi Maru", serif;
    font-weight: bold;
    font-size: 1.2em;
    white-space: nowrap;
}

.circle-icon {
    width: 50px;
    height: 50px;
    background-color: #9dc9d0;
    border-radius: 50%; /* 丸くする */
    margin-left: 30px; /* 文字との間隔 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fffdf7;
    font-size: 1.8em;
    padding-bottom: 4px; /* 矢印の高さ位置調整 */
    transform: rotate(-135deg);
}

/* タブレットサイズ　レスポンシブ */
@media (max-width: 1024px) {
    .wrapper {
        overflow-x: hidden;
    }

    /* ヘッダー調整 */
    .logo-header {
        width: 28%;
        margin-top: 10px;
    }
    .header-text h1 {
        font-size: 1em;
    }
    .header-text h2 {
        font-size: 1em;
    }
    .yellow-rect.header-rect {
        padding: 10px 15px;
        margin-right: 10px;
        width: auto;
        height: auto;
    }
    .rect-text {
        font-size: 1em;
    }
    .circle-icon {
        width: 40px;
        height: 40px;
        font-size: 1.4em;
        margin-left: 15px;
    }
    .member-btn {
        width: 130px;
        margin-right: 20px;
        margin-top: 30px;
    }

    /* ファーストビュー調整 */
    .fv-container {
        margin-top: 150px;
        margin-left: 0;
        padding: 0 20px;
        height: auto;
        min-height: 600px;
    }
    .fv-img {
        width: 50%;
        margin-top: -40px;
    }
    .title-container {
        margin-top: -100px;
        margin-left: 0;
        text-align: center;
        width: 100%;
    }
    .title-jp p, .title-en p {
        display: inline-block;
        font-size: 1.8em;
        margin: 0 5px;
        padding: 0;
    }
    .title-jp p:nth-child(2),
    .title-en p:nth-child(1),
    .title-en p:nth-child(2) {
        padding: 0;
    }
    .title-en p {
        font-size: 1.5em;
    }
    .fv-img2 {
        width: 25%;
        margin-right: 10px;
        margin-bottom: 0;
    }

    /* About & Member 共通調整 */
    .about-body, 
    .member-body, 
    .member-body2, 
    .member-body3, 
    .member-body4 {
        gap: 40px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .about-img, 
    .member-img, 
    .member-img2, 
    .member-img3, 
    .member-img4 {
        width: 20%;
    }
    .member-info, .about-content {
        width: 55%;
    }
    
    /* 個別のマージンリセット */
    .member-body2 { margin-right: 20px; }
    .member-body3 { margin-right: 20px; }

    /* Interview 調整 */
    .interview-row {
        gap: 40px;
    }
    .nameboard-container {
        width: 25%;
    }
    .interview-bubble {
        padding: 30px;
        font-size: 1em;
    }

    /* Activity 調整 */
    .activity-images {
        gap: 30px;
    }
    .activity-img-box, .activity-img-box2 {
        width: 45%;
    }

    /* Footer 調整 */
    .hand-container {
        transform: translateX(-50px);
        width: 45%;
    }
    .footer-text-area {
        margin-right: 0;
        gap: 20px;
    }
    .footer-kaiinn-container {
        width: 50%;
        right: 2%;
    }
    .footer-kaiinn-text {
        font-size: 1.4em;
        top: 80px;
    }
    .kaiinn-link {
        margin-top: 120px;
    }
    .footer-sns {
        left: 2%;
        gap: 50px;
    }
    
    a:active {
        background-color: #e0d6c1;
        color: #9a6a32;
    }

    /* タッチデバイスでのメンバー画像リンク対応 */
    /* ホバーではなく常時リンクエリアを有効にする */
    .insta-overlay {
        opacity: 1;
        clip-path: none;
        background-color: transparent; /* 背景を透明にして画像を見せる */
        align-items: flex-end; /* アイコンを下へ */
        justify-content: flex-end; /* アイコンを右へ */
        padding: 10px;
    }
    .insta-logo {
        width: 36px; /* アイコンを控えめなサイズに */
        background-color: rgba(255, 255, 255, 0.8); /* 視認性確保のため背景追加 */
        border-radius: 8px;
        padding: 4px;
    }
    .member-img-box:hover > img {
        filter: none; /* ぼかし解除 */
        transform: none; /* 拡大解除 */
    }
}

/* スマホサイズ レスポンシブ */
@media screen and (max-width: 767px) {
    /* --- 全体設定 --- */
    .wrapper {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    .loading-logo{
        width: 40%;
    }

    .loading-subtitle{
        font-size: 1em;
    }

    /* --- ヘッダー --- */
    header.flex {
        position: relative; /* 固定を解除してコンテンツが隠れないようにする */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        height: auto;
        background-color: #fffdf7;
        margin-top: 40px;
    }

    .header-wave-bg{
        height: 30%;
    }

    .header-wave-bg2{
        height: 280px !important;
    }
    .header-left {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        margin-bottom: 0;
    }

    .logo-header {
        width: 24%;
    }

    .header-kaiinn-link {
        margin-right: 0;
        transform: scale(0.7); /* ボタン全体を少し縮小 */
        transform-origin: left center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.7);
        margin: 0;
    }
    
    .yellow-rect.header-rect {
        margin-top: 0;
        margin-left: 5px;
        margin-left: 0;
    }

    .yellow-rect.header-rect:active {
        background-color: #e0d6c1; /* タップ時に少し暗い色 */
    }

    /* ハンバーガーメニュー */
    .hamburger-menu {
        position: relative;
        top: auto;
        right: auto;
        transform: scale(0.7);
        margin: 0;
    }

    .hamburger-menu:active {
        transform: scale(0.65);
    }

    /* --- ファーストビュー --- */
    .fv-container {
        display: flex; /* Grid解除 */
        flex-direction: column;
        height: auto; /* 高さ自動 */
        margin-top: 100px;
        min-height: auto;
    }


    /* 要素の配置リセット */
    .fv-img, .fv-img2, .title-container {
        grid-column: auto;
        grid-row: auto;
        position: static;
        margin: 0;
        width: 100%;
        text-align: center;
    }

    .fv-img {
        order: 1;
        width: 60%;
        margin: 0;
        margin-left: -28px;
        margin-top: 60px;
    }

    .title-container {
        position: absolute;
        top: 0px;
        left: 30px;
        width: auto;
        margin: 0;
        transform: none;
        text-align: left;
        white-space: nowrap;
    }

    .title-container p {
        padding: 0 !important; /* PCのpadding解除 */
        text-align: left;
        font-size: 1.0em; /* 文字サイズ縮小 */
        float: left;
        margin-right: 0.5em;
    }

    .wave-divider{
        pointer-events: none;
        margin-top: -50px;
    }

    .title-container p:nth-child(3) {
        clear: left;
    }

    .fv-img2 {
        order: 3;
        width: 48%;
        margin: 0 auto;
        position: relative;
        top: -170px;
        margin-bottom: -170px;
        left: 100px;
    }

     .header-wave-bg, .header-wave-bg2 {
        top: 0px; /* 波の位置を下げる */
        height: 100%; /* 波の高さを調整 */
    }
    



    #chasing-bee {
        width: 10%; /* スマホでの蜂のサイズを調整 */
    }

    .wave-content{
        height: 50px;
    }
    .wave-text1{
        font-size: 1em;
    }

    .wave-text2{
        font-size: 0.75em;
    }
    /* --- About & Member --- */

    .about-text{
        font-size: 3em;
    }
    .about-text2{
        font-size: 1.2em;
    }

    .about-title{
        font-size: 1.2em;
    }

    .nakami{
        font-size: 0.75em;
        font-size: 0.87em;
    }

    .bee-about{
        width: 8%;
    }
    .about-body, 
    .member-body, 
    .member-body2, 
    .member-body3, 
    .member-body4 {
        flex-direction: column;
        gap: 40px;
        margin: 40px 20px;
        margin-right: 20px; /* PCのマージン解除 */
    }

    .about-img{
        width: 50%;
    }
    .about-img, 
    .member-img, 
    .member-img2, 
    .member-img3, 
    .member-img4 {
        width: 60%;
        margin: 0 auto;
    }
    
    .member-text{
        font-size: 3em;
    }

    .member-text2{
        font-size: 1.2em;
    }
 
    .member-img-box, .member-img-box2, .member-img4 {
        width: 60%;
        margin: 0 auto;
    }

    .member-info {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .member-name {
        margin-top: 0; /* ネガティブマージン解除 */
        font-size: 1.3em;
    }
    
    .tiiki-img, .tiiki-img2, .tiiki-img4 {
        width: 40%;
        margin-top: -20px;
    }
    
    .member-name{
        font-size: 1.3em;
        margin-top: -30px;
    }
    
    .member-desc{
        font-size: 1em;
    }
    
    .member-desc2{
        font-size: 1em;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .tiiki-img2{
        width: 22%;
    }
    /* 装飾アイコンの位置調整 */
    .inaho, .usi, .tomato-img {
        width: 500px;
        right: 4%;
        width: 50px;
        right: 10%;
        top: -30px;
    }

    /* --- Interview --- */
   .interview-text{
    font-size: 3em;
   }

   .interview-text2{
    font-size: 1.2em;
   }
    .interview-row {
        flex-direction: column;
        gap: 20px;
        margin-top: 40px;
    }

    .hukidasi-img{
        width: 60%;
    }
    .nameboard-container {
        width: 50%;
    }

    .interview-bubble {
        width: 90%;
        margin: 0 auto;
        font-size: 0.9em;
        padding: 20px;
    }
    
    /* 吹き出しのしっぽ調整（簡易的に非表示） */
    .interview-bubble::before, 
    .interview-bubble::after {
        display: none;
    }

    .wood-honda{
        width: 110%;
    }

    .interview-bubble{
        font-size:0.87em;
        padding: 20px 20px;
        width: 80%;
        margin-bottom: 30px;
    }

    .interview-bubble p{
        margin-left: 30px;
    }


    .bubble-deco-tomato{
        width: 25%;
    }
    /* --- Activity --- */
    .activity-images {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 50px;
    }

    .activity-img{
        width: 80%;
        margin-left: 60px;
    }

    .activity-img2{
        width: 80%;
        margin-left: 60px;
        margin-bottom: 40px;
    }
    .activity-text{
        font-size: 0.9em;
    }

    .activity-img-box, .activity-img-box2 {
        width: 80%;
    }

    .morimoto-img, .yasaikago-img {
        display: none;
        display: none; /* 装飾過多のため非表示 */
    }

    .insta-account{
        font-size: 1.2em;
    }

    /* ギャラリースライダー調整 */
    .gallery-slider .swiper-slide img {
        height: 180px; /* 高さを小さくする */
        border-width: 6px; /* 枠線を少し細くする */
    }

    /* --- Footer --- */
    .footer-visual {
        flex-direction: column;
        align-items: center;
        padding-bottom: 30px;
    }

    .hand-container {
        width: 100%;
        max-width: 350px;
        transform: none; /* PCの位置調整解除 */
        margin-top: 0;
        margin-bottom: 20px;
        margin-top: -100px;
    }

    .hand-img-wrapper {
        display: flex;
        justify-content: center;
    }

    .hand {
        width: 80%;
    }

    .back-to-top {
        left: 50%;
        top: 85%;
        transform: translate(-50%, -50%);
        font-size: 1em;
    }
    .back-to-top:hover {
        transform: translate(-50%, -60%);
    }

    .footer-text-area {
        flex-direction: column;
        margin-right: 0;
        gap: 30px;
        text-align: center;
        align-items: center;
        width: 100%;
    }

    .footer-text-left {
        margin-left: 0;
        align-items: center;
        width: 100%;
    }

    .text-logo {
        width: 200px;
        margin-bottom: 20px;
    }

    .sitemap-text, .sitemap-text2 {
        line-height: 2.5;
        font-size: 1.1em;
    }
    
    .sitemap-text2 {
        margin-top: 0;
    }

    .footer-kaiinn-container {
        position: static; /* 絶対配置解除 */
        width: 100%;
        margin-top: 40px;
        display: flex;
        justify-content: center;
    }

    .footer-kaiinn {
        display: none;
    }

    .kaiinn-info {
        position: static;
        transform: none;
        width: auto;
    }

    .footer-kaiinn-text {
        display: none;
    }
    
    .footer-kaiinn-text::before,
    .footer-kaiinn-text::after {
        display: none; /* 線を消す */
    }

    .kaiinn-link {
        margin-top: 0;
        transform: scale(0.9);
    }

    .footer-sns {
        position: static;
        flex-direction: row;
        gap: 40px;
        margin-top: 50px;
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .sns-label {
        display: none;
    }

    .sns-icons {
        flex-direction: row;
        gap: 40px;
    }
    
    /* 背景の波などの調整 */
    .ibitu, .ibitu2, .ibitu-right {
        opacity: 0.2; /* 薄くする */
        width: 100%;
        left: 0;
        right: 0;
    }
    .ibitu, .ibitu2, .ibitu-right {
        display: none;
    }

    a:active {
        background-color: #e0d6c1; /* タップ時に少し暗い色 */
        color: #9a6a32;
    }
}



/* headerの高さを調整してください。*/
/*スマホ表示でファーストビューのタイトル位置を調整してください。 */