@charset "utf-8";

/* 共通部分 */
html {
    scroll-behavior: smooth;
}

img {
    width: 100%;
}

body {
    background-image: url(../img/Frame\ 23.jpg);
    background-size: cover;
    color: white;
    text-align: center;
    /* max-width: 57%; */
    margin-right: auto;
    margin-left: auto;
    font-family: 'Zen Old Mincho', serif;
}

header,
main {
    max-width: 68.75rem;
    margin-right: auto;
    margin-left: auto;
}

a {
    text-decoration: none;
}

.substratum-header {
    height: 230px;
}

.pagetitle {
    margin: 0 auto;
    width: 425px;
}

.pagetitle img {
    width: 100%;
}

li {
    list-style-type: none;
}

/* 視覚的に非表示 */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 共通部分はここまで */


/* オーディオモーダル */
.audio-banner {
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(47, 51, 70, 1));
    /* background: linear-gradient(135deg, #2D4C6F 0%, #1E2D40 100%); */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #E0E8F0;
    z-index: 100000;
    backdrop-filter: blur(5px);
    animation: fadeIn 1s ease forwards;
}

.audio-banner-content {
    background: rgba(255 255 255 / 0.1);
    padding: 40px 50px;
    border: 1px solid rgba(255 255 255 / 0.2);
    /* ボーダーも透明度を上げて統一感を出す */
    border-radius: 18px;
    box-shadow: 0 0 30px rgba(45, 76, 111, 0.6);
    max-width: 480px;
    text-align: center;
    animation: fadeScaleUp 1.2s ease forwards;
    border: 1px solid rgba(255 255 255 / 0.3);
    backdrop-filter: saturate(180%) blur(10px);
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        /* 半透明の暗いオーバーレイ */
        url('../img/Frame\ 23.jpg');
    /* ここにコンテンツボックス用の画像パスを指定 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    color: #E0E8F0;
}

.banner-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: 0.15em;
    color: #A3CCE5;
    text-shadow: 0 0 10px #6D90B3;
    animation: gentleBloom 4s ease-in-out infinite alternate;
}

.banner-message {
    font-size: 0.8rem;
    line-height: 1.6;
    margin-bottom: 35px;
    color: #DDE8F0;
    user-select: none;
}

.banner-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.banner-buttons button {
    cursor: pointer;
    border: 2px solid #A3CCE5;
    background: transparent;
    color: #A3CCE5;
    font-size: 1rem;
    padding: 12px 30px;
    flex-shrink: 0;
    border-radius: 25px;
    transition: all 0.35s ease;
    box-shadow: 0 0 15px rgba(163, 204, 229, 0.7);
    min-width: 140px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 25px;
    box-sizing: border-box;
    margin: 0;
}

/* ボタン内の画像のスタイル */
.banner-buttons button img {
    height: 1em;
    width: auto;
    vertical-align: middle;
}

/* ホバー時のスタイル（そのまま利用） */
.banner-buttons button:hover {
    background: #8AB6D6;
    color: #141E30;
    box-shadow: 0 0 25px #A3BEE0;
}

.banner-buttons button:hover {
    background: #A3CCE5;
    color: #1E2D40;
    box-shadow: 0 0 25px #C6E0F0;
}

.floating-flowers {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.floating-flowers span {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at center, #a7c7e7, #5b81b8);
    border-radius: 50% 50% 50% 70% / 60% 60% 40% 40%;
    opacity: 0.3;
    filter: drop-shadow(0 0 6px #8ab6d6);
    animation: floatFlower 15s linear infinite;
    transform-origin: center;
}

.floating-flowers span:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
    width: 20px;
    height: 20px;
}

.floating-flowers span:nth-child(2) {
    top: 65%;
    left: 15%;
    animation-delay: 5s;
    width: 15px;
    height: 15px;
}

.floating-flowers span:nth-child(3) {
    top: 40%;
    left: 55%;
    animation-delay: 8s;
    width: 18px;
    height: 18px;
}

.floating-flowers span:nth-child(4) {
    top: 25%;
    left: 75%;
    animation-delay: 12s;
    width: 17px;
    height: 17px;
}

.floating-flowers span:nth-child(5) {
    top: 80%;
    left: 80%;
    animation-delay: 2s;
    width: 16px;
    height: 16px;
}

/* アニメーション定義 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeScaleUp {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(15px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes gentleBloom {
    0% {
        text-shadow: 0 0 8px #BCDDEB, 0 0 15px #6D90B3;
    }

    100% {
        text-shadow: 0 0 22px #E0E8F0, 0 0 32px #A3CCE5;
    }
}

@keyframes floatFlower {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }

    50% {
        transform: translateY(-25px) rotate(15deg);
        opacity: 0.6;
    }
}

/* ここからフェードアウト用 */
.fade-out {
    animation: fadeOut 0.6s forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

#audio-toggle {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 99999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0a245c27;
    box-shadow: 0 0 10px rgba(138, 182, 214, 10);
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    background-image: url('data:image/svg+xml;utf8,\<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<path d="M3 10v4h4l5 5V5L7 10H3z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}

#audio-toggle.muted {
    background-color: #0d0f7273;
    background-image: url('data:image/svg+xml;utf8,\<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<path d="M16.5 12l5-5-1.5-1.5-5 5-5-5L9 7l5 5-5 5 1.5 1.5 5-5 5 5 1.5-1.5-5-5z"/></svg>');
    background-position: 29% center;

    box-shadow: 0 0 10px rgba(138, 182, 214, 10);
}

/* オーディオモーダルここまで */

/* ハンバーガー */

header button img {
    display: block;
    width: 100%;
    height: auto;
    transition: filter 0.3s ease-in-out;
}

.instagram-svg img {
    display: block;
    max-width: 100%;
    height: auto;
    transition: filter 0.3s ease-in-out;
}

.top-right-icons {
    margin: 0 40px;
    display: block;
    position: fixed;
    top: 50px;
    right: 0%;
    display: flex;
    align-items: center;
    gap: 20%;
    width: 7%;
    height: 32px;
    z-index: 1000;
}

.instagram-svg:hover img {
    /* 明るさを少し下げ、彩度も少し下げる */
    filter: brightness(0.6) saturate(0.7);
}

.hamburger:hover img {
    /* 明るさを少し下げ、彩度も少し下げる */
    filter: brightness(0.6) saturate(0.7);
}

.hamburger {
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
}

.menu {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 380px;
    height: 100%;
    background-color: white;
    box-shadow: 0 2px 8px rgba(191, 197, 240, 0.134);
    padding: 30px 20px;
    z-index: 1001;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
    left: 100%;
}

.menu.show {
    left: calc(100% - 380px);
}

.menu ul {
    width: 100%;
    list-style: none;
    margin-top: 20px;
    padding: 0;
}

.menu li {
    text-align: left;
    margin: 0 0 12px 6px;
    font-size: 1.15rem;
}

.furu-sato-portar {
    margin: 0 0 12px 6px;
}

.menu-li-first {
    margin: 100px 0 20px 20px;
}

.menu-a-first {
    font-size: 1.75rem;
    font-weight: 600;
}

.menu a {
    text-decoration: none;
    color: #4E67B0;
    font-weight: 400;
}

.menu-banner p {
    font-size: 1.2rem;
    color: #9a9b9c;
    font-weight: 400;
    text-align: left;
    margin: 20px 0 10px 20px;
}

/* ハンバーガー閉じ */
.menu button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    float: right;
}

.menu button img {
    margin-left: 80%;
    display: block;
    width: 54px;
    height: 64px;
    transition: filter 0.3s ease-in-out;
}

.menu button:hover img {
    transform: scaleY(-2px);
}

/* リスト内のaタグのホバー時のスタイル */
.menu a:hover {
    color: #243153;
}

/* オーバーレイのスタイル */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 3, 20, 0.8);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.overlay.show {
    display: block;
    opacity: 1;
}

/* ハンバーガーここまで */

/* ヘッダー */
header {
    height: 200px;
    padding-top: 50px;
}

.header-top {
    font-size: 1.25rem;
    word-break: keep-all;
    white-space: normal;
}

.header-top span {
    display: inline;
}

.logo img {
    display: block;
}

.header-logoarea {
    margin-top: 155px;
    display: flex;
    flex-wrap: wrap;
    max-width: 900px;
    align-items: center;
    gap: 0;
    margin: 152px auto 0px;
    box-sizing: border-box;
}

.header-logoarea-item {
    flex: 1 1 300px;
    box-sizing: border-box;
    max-width: 26.625rem;
}

/* ロゴ画像の調整 */
.logo {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.header-message {
    max-width: 21rem;
    word-break: break-word;
    display: block;
    margin: 0 auto;
}

.client-name {
    display: block;
    transition: color 0.3s ease;
}

.client-name:hover {
    filter: brightness(0.6) saturate(0.5);
}

.header-message div {
    display: flex;
    align-items: center;
}

.header-message p {
    width: 23rem;
    line-height: 180%;
    font-size: 1rem;
    text-align: left;
}

.client-name-item {
    width: 5rem;
}

/* ジョーロのCSS */
.watering-can {
    position: fixed;
    right: 20px;
    top: 0;
    width: 150px;
    height: auto;
    z-index: 1000;
    will-change: top, right, transform;
}

.scroll-to-top img {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: bottom right;
}

.scroll-to-top:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}

html {
    scroll-behavior: smooth;
}

/* line-drawing img のCSS (変更なし) */
.line-drawing img {
    transition: opacity 2s ease, transform 0.8s ease;
    transform: scale(1);
    opacity: 1;
}

.line-drawing img.switching {
    opacity: 0;
    transform: scale(0.95);
}

.line-drawing img.switched {
    opacity: 1;
    transform: scale(1);
}

.header-message p {
    font-size: 1rem;
    line-height: 180%;
    letter-spacing: 0.05em;
}

.header-message div {
    margin-top: 30px;
}

.header-message {
    max-width: 21rem;
}

.line-drawing {
    display: block;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
}

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

.brand-concept {
    width: 45%;
    height: auto;
    margin: 0 auto 60px;
}

/* 新しく追加するテキストアニメーション用CSS */
.fade-in-once {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-once.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.top-section1 {
    padding-top: 437px;
}

.top-section1 p {
    font-size: 1.5rem;
    line-height: 3;
    text-align: center;
    max-width: 923px;
}

.top-section2 p {
    margin: 0 auto;
    font-size: 1.5rem;
    line-height: 3;
    text-align: center;
    max-width: 923px;
}

.prevent-break {
    text-align: center;
    margin: 0 auto;
}

.material-page-link img {
    margin-top: 40px;
    width: 40%;
    transition: color 0.3s ease;
}

.material-page-link img:hover {
    filter: brightness(0.6) saturate(0.5);
}

/* メインナビゲーション */
.main-nav li a {
    color: white;
    width: 100%;
    height: auto;
}

.main-nav li {
    list-style: none;
    padding: 56px auto 56px;
    width: 100%;
    height: 160px;
    align-content: center;
}

/* ナビゲーションリンクの基本スタイルにトランジションを追加 */
.main-nav li a {
    color: white;
    width: 100%;
    height: auto;
    transition: color 0.3s ease;
}

/* ナビゲーションリンクにホバーした時のスタイル */
.main-nav li a:hover {
    color: rgba(255, 255, 255, 0.6);
}

.main-nav {
    font-size: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.main-nav>.nav-item {
    padding: 10px;
    text-align: center;
    justify-content: center;
    position: relative;
}

.main-nav>.nav-item1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 1px;
    background-color: #fff;
    transform: translateX(50%);

}

.main-nav>.nav-item2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 1px;
    background-color: #fff;
    transform: translateX(50%);

}

.nav-item1::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -5px;
    width: 1px;
    height: 50%;
    background-color: #fff;
    transform: translateY(-50%);
}

.nav-item3::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -5px;
    width: 1px;
    height: 50%;
    background-color: #fff;
    transform: translateY(-50%);
}

/* メインナビゲーションここまで */


/* バナー */
.banner {
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 156px;
    object-fit: cover;
    margin: 205px auto 433px;
}

.banner-item {
    width: 49%;
    height: auto;
}

.banner-item img {
    max-width: 100%;
    height: auto;
}

/* バナー */


.flower {
    display: block;
    width: 122.27;
    height: auto;
}

/* メインここまで */


/* フッター */
footer {
    background-color: white;
}

footer .instagram {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.27%;
    background-image: url(../img/fotter-backgraundimage1.svg);
    background-size: cover;
    background-position: center;
}

.instagram p {
    font-size: 2rem;
    color: white;
    line-height: 150%;
    letter-spacing: 0.04em;
}

.instagram-logo {
    display: block;
    width: 48px;
    height: 48px;
}



.footer-logoarea-container {
    background-color: white;
}

.footer-logoarea {
    display: flex;
    align-items: center;
    gap: 2%;
    width: 50%;
    margin: 0 auto;
    padding: 60px 0 0 0;
}

.footer-logoarea-item {
    flex: 1;
    min-width: 200px;
}

.footer-logo {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.footer-logo img {
    height: 100%;
    max-height: 310px;
    /* 例：上限を設定 */
    width: auto;
    object-fit: contain;
}

.footer-text {
    color: #4E67B0;
    max-width: 484px;
    line-height: 1.8;
    text-align: left;
}

.footer-access {
    margin: 20px 0;
}





footer .earth-message-erea {
    height: 1486px;
    font-size: 2.5rem;
    color: #555;
    background-color: #fff;
    padding-top: 407px;
}

.copylight {
    height: 90px;
    background-image: url(../img/fotter-backgraundimage2.svg);
    background-position: center;
    background-size: cover;
    align-content: center;
    margin-top: 90px;
}

/* フッターここまで */

.arrow-area {
    height: 150px;
    align-content: center;
}

.arrow-area img {
    display: block;
    width: 8.91%;
    height: auto;
    margin: 0 auto;
}

.ordermade-top {
    font-size: 2.5rem;
    font-weight: normal;
}

.ordermade-top-textarea {
    text-align: left;
    font-size: 1.25rem;
    max-width: 800px;
    line-height: 2.0;
    margin: 90px auto 120px;
}

.ordermade-top-text2 {
    margin-top: 30px;
}

.ordermade-section-top {
    font-weight: normal;
    font-size: 2rem;
    color: #4E67B0;
}

/* ★変更・追加：ordermade-sectionのアニメーションスタイル */
.ordermade-section {
    opacity: 0;
    /* 最初は透明 */
    transform: translateY(-50px);
    /* 上にずらして初期表示 */
    transition: opacity 1s ease-out, transform 1s ease-out;
    /* アニメーション */

    /* 既存のレイアウトスタイルはそのまま残します */
    background-color: white;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    height: 323px;
    color: #3e3e3e;
    align-content: center;
    box-shadow: -5px -5px 20px 0px rgba(255, 255, 255, 0.5), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
    overflow-y: hidden;
    /* 元々のオーバーフロー設定 */
}

/* ★追加：ordermade-sectionが見えたとき */
.ordermade-section.is-visible {
    opacity: 1;
    /* 不透明に */
    transform: translateY(0);
    /* 元の位置に */
}

.ordermade-section>div {
    width: 57%;
    height: fit-content;
    display: flex;
    margin: 0 auto;
    flex-direction: row;
    /* 既存 */
    align-items: center;
    /* 既存 */
    justify-content: center;
    /* 既存 */
    height: 100%;
    /* 既存 */
    gap: 90px;
    /* 既存 */
    padding: 15px 0 15px;
}

.ordermade-section6 {
    margin-bottom: 360px;
}

.ordermade-section div img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ordermade-section>div>img {
    flex: 0 0 35%;
    max-width: 25%;
    height: auto;
    display: block;
    max-height: 100%;
    text-align: center;
}

/* テキスト：65% */
.ordermade-section>div>.ordermade-section-textarea {
    flex: 0 0 65%;
    box-sizing: border-box;
    text-align: left;
    width: 65%;
    height: fit-content;
}

.ordermade-section-textarea p {
    margin-top: 19px;
    font-size: 1rem;
    line-height: 2.0;
}

.ordermade-section-textarea {
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.material-section1,
.material-section2,
.material-section3 {
    margin: 0 auto;
    text-align: left;
}

.material-section1 {
    padding-bottom: 360px;
}

.material-section2,
.material-section3 {
    padding-top: 90px;
    padding-bottom: 360px;
}

.material-section-text {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    width: 68.73%;
    line-height: 200%;
}

.material-section-text2 {
    margin: 0 auto;
}

.material-section1 p {
    font-size: 1.25rem;
}

.material-h1 {
    font-size: 2.5rem;
    font-weight: normal;
    margin-bottom: 60px;
    line-height: 150%;
}

.material-line-height {
    margin-top: 40px;
}

/* ★変更：drycotton-areaのアニメーションスタイル */
.drycotton-area {
    width: 100vw;
    position: relative;
    left: 50%;
    /* 既存のtransformとアニメーション用のtransformを結合 */
    transform: translateX(-50%) translateY(-50px);
    /* 初期状態 */
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* ★追加：drycotton-areaが見えたとき */
.drycotton-area.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    /* 元の位置 */
}

.drycotton-area img {
    width: 100%;
    object-fit: cover;
    display: block;
    height: 635px;
}

.cotton-material {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 10.55%;
    margin: 100px 0 100px;
}

.cotton-material-item {
    width: 29.09%;
    height: auto;
    background-color: white;
    border-radius: 10px;
    padding-top: 48px;
    padding-bottom: 48px;
    text-align: center;
    box-sizing: border-box;
    min-width: 0;
    box-shadow: -5px -5px 20px 0px rgba(255, 255, 255, 0.5), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

.cotton-material-img1 img,
.cotton-material-img2 img {
    display: block;
    max-width: 100%;
}

.cotton-material-img1 {
    margin: 20px auto 20px;
    justify-items: center;
    width: 71.88%;
    height: auto;
}

.cotton-material-img2 {
    margin: 20px auto 17.5px;
    justify-items: center;
    width: 59.38%;
    height: auto;
}

.cotton-material-item p {
    color: #3e3e3e;
    overflow-wrap: break-word;
    max-width: 68.13%;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cotton-material-item-p1 {
    font-size: 1.5rem;
    margin-right: auto;
    margin-left: auto;
    width: 218px;
}

.cotton-material-item-p2 {
    font-size: 1rem;
    line-height: 1.75;
    width: 225px;
    text-align: left;
}

/* ★変更：image-rowのアニメーションスタイル */
.image-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100vw;
    position: relative;
    left: 50%;
    /* 既存のtransformとアニメーション用のtransformを結合 */
    transform: translateX(-50%) translateY(-50px);
    /* 初期状態 */
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* ★追加：image-rowが見えたとき */
.image-row.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    /* 元の位置 */
}

.image-row img {
    width: 100%;
    height: 635px;
    object-fit: cover;
    display: block;
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 素材の良さのページはここまで */

/* 制作事例(gallery)ページはここから */
.gallery-top {
    font-size: 2.5rem;
    font-weight: normal;
}

.gallery-top-text {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    line-height: 2;
    margin-top: 58px;
    margin-bottom: 130px;
    text-align: left;
    width: 74%;
    margin-right: auto;
    margin-left: auto;
}

.gallery-img-container {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background-color: white;
    padding-top: 70px;
    padding-bottom: 100px;
    padding-right: 4.09%;
    padding-left: 4.09%;
    box-shadow: -5px -5px 20px 0px rgba(255, 255, 255, 0.5), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
    margin-bottom: 360px;
}

.gallery-img-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 横3列 */
    gap: 85px;
    /* 画像の間隔 */
    max-width: 57%;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

/* ★ここから追加・変更 */
.gallery-img-grid div {
    /* 拡大時に画像がはみ出さないように、親要素で非表示にする */
    overflow: hidden;
    /* transitionを適用して、拡大・縮小を滑らかにする */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    box-shadow: 0px 5px 20px 0px rgba(68, 53, 2, 0.2);
    /* 既存のシャドウ */
}

.gallery-img-grid img {
    width: 100%;
    height: 100%;
    display: block;
    /* transitionを適用して、拡大・縮小を滑らかにする */
    transition: transform 0.3s ease-out;
}

/* カーソルがdivに重なったときのスタイル */
.gallery-img-grid div:hover {
    /* 親要素ごと少しだけ手前に浮き上がらせる */
    transform: translateY(-5px);
    /* ホバー時のシャドウを強調して、より浮き上がっているように見せる */
    box-shadow: 0px 10px 30px 0px rgba(68, 53, 2, 0.4);
}

/* カーソルがdivに重なったときに、中のimgを拡大する */
.gallery-img-grid div:hover img {
    transform: scale(1.05);
    /* 1.05倍に拡大 */
}

/* ★ここまで追加・変更 */

/* 制作事例ページはここまで */





/* アクセスページはここから */

.access-top-textarea {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    background-color: white;
    padding: 37px 0;
    box-shadow: -5px -5px 20px 0px rgba(255, 255, 255, 0.5), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

.access-top-inner {
    width: 46.98%;
    margin: 0 auto;
    text-align: left;
    color: #3e3e3e;
}

.access-top-textarea-p1 {
    font-size: 1.5rem;
    margin-bottom: 19px;
    color: #4E67B0;
}

.access-top-textarea-p1 span {
    display: inline;
}

.access-top-textarea-p2 {
    font-size: 1rem;
    line-height: 2;
}


.access-top {
    font-size: 2.5rem;
    font-weight: normal;
}

.access-section {
    padding-top: 157px;
    padding-bottom: 360px;
}

.map-container {
    margin: 90px auto 90px;
    /* left: 50%;
    margin-left: -50vw;
    position: relative;
    width: 100vw; */
    height: 500px;
}

.map-container iframe {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 80%;
    height: 100%;
    border: none;
}

.info-table {
    margin: 0 auto;
    max-width: 650px;
    border-collapse: collapse;
    color: white;
    text-shadow: 0px 0px 10px rgba(4, 0, 109, 1);
}

.info-table th,
.info-table td {
    text-align: left;
    padding: 0.3rem 0;
    vertical-align: top;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

.info-table td span {
    font-size: 1rem;
}

.info-table th {
    font-weight: normal;
    font-size: 1.5rem;
    width: 150px;
}

.info-table td {
    font-size: 1.25rem;
}

/* アクセスページの情報テーブル内の mailto リンクだけ白に */
.info-table td a[href^="mailto:"] {
    color: #fff;
    text-decoration: none;
}

.info-table td a[href^="mailto:"]:link,
.info-table td a[href^="mailto:"]:visited {
    color: #fff;
}

.access-img {
    margin-top: 120px;
    width: 74.36%;
    height: auto;
    border-radius: 50%;
    box-shadow: -1px -1px 5px 0px rgba(255, 255, 255, 0.5), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

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

/* アクセスページはここまで */




/* プロフィールページはここから */
.profile-top {
    font-weight: 400;
    font-size: 2.5rem;
}

.profile-section1 {
    padding-top: 58px;
    padding-bottom: 256px;
}

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

.profile-section1-img {
    display: block;
    width: 54.55%;
    height: auto;
    margin: 0 auto;
}

.profile-section1-textarea {
    max-width: 620px;
    letter-spacing: -0.011em;
    margin: 58px auto 0;
    text-align: center;
}

.profile-section1-text1 {
    font-size: 1.5rem;
}

.profile-section1-text2 {
    font-size: 3rem;
    margin-top: 5px;
}

.profile-section1-text3 {
    font-size: 1.5rem;
    margin-top: 30px;
    line-height: 2.3;
}

.profile-section2-top {
    font-size: 2.5rem;
    font-weight: normal;
}

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

.profile-section2 {
    margin: 0 auto;
    padding-bottom: 358px;
}

.profile-section2-img {
    margin: 58px 0 110px;
}

.profile-section2-text {
    font-size: 1.5rem;
    line-height: 3;
    max-width: 820px;
    margin: 0 auto;
    letter-spacing: -0.022rem;
    word-break: break-word;
}

.profile-section2-img,
.profile-section2-text,
.twins-img,
.bird-img {

    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.profile-section2-img.is-visible,
.profile-section2-text.is-visible,
.twins-img.is-visible,
.bird-img.is-visible {

    opacity: 1;
    transform: translateY(0);
}

.twins-img {
    display: block;
    width: 25%;
    height: auto;
    margin: 30px auto;
}

.bird-img {
    display: block;
    width: 40%;
    height: auto;
    margin: 30px auto;
}

/* プロフィールページはここまで */

/* オーダーメイドの流れはここから */
/* .order-flow {
    display: flex;
    flex-wrap: nowrap;             
    scrollbar-width: none;         
    -ms-overflow-style: none;      
    width: 75.27%;
    height: auto;
    gap: 5%;                       
    align-items: center;
    margin: 0 auto 315px;
}

.order-flow::-webkit-scrollbar {
    display: none;
}

.order-flow a {
    flex: 0 0 12.82%; 
    display: block;
}

.order-flow img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: -3px -3px 20px 0px rgba(0, 0, 0, 0.5), 3px 3px 5px 0px rgba(0, 0, 0, 0.5);     
} */
/* ── オーダーメイドの流れ（フロー） ───────────────────── */
.order-flow {
    list-style: none;
    /* 番号を消す */
    margin: 0 auto 315px;
    padding: 0;

    display: flex;
    flex-wrap: nowrap;
    /* 折り返さず横並び */
    gap: 4%;
    /* 画像の間隔 */
    align-items: center;
    text-align: center;
    width: 75.27%;
    height: auto;

    overflow-x: auto;
    /* 横スクロール対応 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

/* Chrome / Safari のスクロールバー非表示 */
.order-flow::-webkit-scrollbar {
    display: none;
}

/* 各ステップ（li）の幅を指定 */
.order-flow>li {
    flex: 0 0 12.82%;
    list-style-type: none;
    /* 念のため番号削除 */
}

/* クリック領域 */
.order-flow a {
    display: block;
}

/* 画像の見た目 */
.order-flow img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: -3px -3px 20px 0 rgba(0, 0, 0, 0.5),
        3px 3px 5px 0 rgba(0, 0, 0, 0.5);
    transition: filter 0.3s ease-in-out, transform 0.3s ease-out;
}

/* ホバー時 */
.order-flow a:hover img,
.order-flow a:focus-visible img {
    filter: brightness(0.8) saturate(0.8);
    transform: translateY(-2px);
}

/* order-flow の数字を完全に消す（カウンター対策） */
.order-flow {
    list-style: none !important;
    counter-reset: unset !important;
}

.order-flow li {
    list-style-type: none !important;
    counter-increment: unset !important;
}

.order-flow li::marker {
    content: "" !important;
}

.order-flow li::before {
    content: "" !important;
    /* ← ここがポイント */
}

.arrow-area {
    height: 150px;
    align-content: center;
}

.arrow-area img {
    display: block;
    width: 8.91%;
    height: auto;
    margin: 0 auto;
}

.ordermade-top {
    font-size: 2.5rem;
    font-weight: normal;
}

.ordermade-top-textarea {
    text-align: left;
    font-size: 1.25rem;
    max-width: 800px;
    line-height: 2.0;
    margin: 90px auto 120px;
}

.ordermade-top-text2 {
    margin-top: 30px;
}

.ordermade-section-top {
    font-weight: normal;
    font-size: 2rem;
    color: #4E67B0;
}

.ordermade-section.is-visible {
    opacity: 1;
    /* 不透明にする */
    transform: translateY(0);
    /* 元の位置に戻す */
}

.ordermade-section {
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    background-color: white;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    height: 323px;
    color: #3e3e3e;
    align-content: center;
    box-shadow: -5px -5px 20px 0px rgba(255, 255, 255, 0.5), 5px 5px 10px 0px rgba(0, 0, 0, 0.3);
}

.ordermade-section>div {
    width: 57%;
    height: fit-content;
    display: flex;
    margin: 0 auto;
}

.ordermade-section6 {
    margin-bottom: 360px;
}

.ordermade-section div img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 画像＋テキストを横並びに（PC時） */
.ordermade-section>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 90px;
}

/* 画像：35% */
.ordermade-section>div>img {
    flex: 0 0 30%;
    max-width: 25%;
    height: auto;
    display: block;
    max-height: 100%;
    text-align: center;
}

/* テキスト：65% */
.ordermade-section>div>.ordermade-section-textarea {
    flex: 0 0 70%;
    box-sizing: border-box;
    text-align: left;
    width: 65%;
    height: fit-content;
}

.ordermade-section-top {
    font-size: 2rem;
}

.ordermade-section-textarea p {
    margin-top: 19px;
    font-size: 1rem;
    line-height: 2.0;
}

.ordermade-section {
    overflow-y: hidden;
    /* 横はみ出し防止 */
}

.ordermade-section>div {
    width: 57%;
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
}

.ordermade-section-textarea {
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}



/* オーダーメイドの流れはここまで */





/* よくあるご質問はここから */
.faq-body {
    background-repeat: no-repeat;
    /* 画像が繰り返されないようにする */
    background-position: top;
    /* 画像を中央上部に配置 */
    background-attachment: fixed;
    /* スクロールできるようにする（デフォルト値） */

    /* === ここが重要です === */
    background-size: cover;
    /* 画像が要素全体を覆うように拡大縮小し、縦横比を維持 */
}

.faq-top {
    font-size: 2.5rem;
    font-weight: normal;
    margin-bottom: 160px;
}

.faq-question {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 82.73%;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    text-align: left;
    min-height: 48px;
    /* 高さの最低値を確保 */
    color: white;
    border-bottom: 1px solid white;
    margin: 0 auto;
    letter-spacing: 0.05em;
    text-shadow: 0px 0px 10px rgba(4, 0, 109, 1);
}

.text-qa {
    font-size: 2rem;
    padding-right: 1.25rem;
    text-shadow: 0px 0px 10px rgba(4, 0, 109, 1);
}

.text-answer {
    padding-top: 5px;
    text-shadow: 0px 0px 10px rgba(4, 0, 109, 1);
}

.instagram-button1 {
    padding: 20px 20px;
    /* 上下左右のパディングを減らしてサイズダウン */
    font-size: 0.9rem;
    /* フォントサイズも少し小さく */
    background-color: transparent;
    /* 背景を透明に */
    border: 1px solid white;
    /* 白い枠線 */
    border-radius: 5px;
    text-decoration: none;
    color: white;
    /* テキストの色も白に */
    font-weight: normal;
    transition: all 0.3s ease;
    /* ホバー時のトランジション効果 */
    flex-wrap: nowrap;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5),
        /* 軽い光彩 */
        0 0 20px rgba(255, 255, 255, 0.2);
    /* さらに広い軽い光彩 */
}

.instagram-button1:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* ホバー時にわずかに背景を白く */
    border-color: white;
    /* 枠線の色を維持 */
    transform: translateY(-2px);
    /* 少し上に移動するアニメーション */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
        /* 強い光彩 */
        0 0 30px rgba(255, 255, 255, 0.4),
        /* 広い光彩 */
        0 0 45px rgba(255, 255, 255, 0.1);
    /* さらに広い非常に薄い光彩 */
}

.toggle-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.toggle-icon::before,
.toggle-icon::after {
    content: "";
    position: absolute;
    background-color: white;
    transition: all 0.3s ease;
    left: 0;
    right: 0;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
}

/* 横線（-） */
.toggle-icon::after {
    transform: translateY(-50%);
}

/* 縦線（|） */
.toggle-icon::before {
    transform: rotate(90deg);
}

/* 開いたとき：縦線を透明にしてマイナスにする */
.faq-item.active .toggle-icon::before {
    opacity: 0;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 16px;
    /* 初期状態：上下のパディングは0 */
    width: 82.73%;
    text-align: left;
    font-size: 1.25rem;
    margin: 48px auto 0;
    line-height: 200%;
}

.faq-answer p {
    display: flex;
    letter-spacing: 0.1em;
    padding-bottom: 80px;
}

.faq-item.active .faq-answer {
    max-height: 2000px;
    /* 十分大きな数値（必要に応じて調整） */
    padding: 16px;
}

.faq-message {
    margin: 115px 0 50px;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

.question-text {
    flex: 1;
    padding-right: 12px;
    /* ＋アイコンとの間に余白 */
    word-break: break-word;
    /* 長いテキストでも折返し */
}


/* ボタンコンテナ */
.contact-buttons {
    display: flex;
    justify-content: center;
    /* ボタンを中央に配置 */
    gap: 5%;
    /* ボタン間のスペース */
    flex-wrap: wrap;
    /* 小さい画面で折り返すように */
    width: 100%;
    margin: 0 auto 360px;
}

/* 各ボタンの共通スタイル */
.contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    /* サイズ調整 */
    padding: 30px 20px;
    /* 上下左右のパディングを減らしてサイズダウン */
    font-size: 1.2rem;
    /* フォントサイズも少し小さく */
    min-width: 17.5rem;
    /* ボタンの最小幅を調整 */
    max-width: 400px;
    background-color: transparent;
    /* 背景を透明に */
    border: 1px solid white;
    /* 白い枠線 */
    border-radius: 5px;
    text-decoration: none;
    color: white;
    /* テキストの色も白に */
    font-weight: normal;
    transition: all 0.3s ease;
    /* ホバー時のトランジション効果 */
    flex-grow: 1;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5),
        /* 軽い光彩 */
        0 0 20px rgba(255, 255, 255, 0.2);
    /* さらに広い軽い光彩 */
    letter-spacing: 0.05em;
}

.contact-button i {
    margin-right: 8px;
    /* アイコンとテキストの間隔を調整 */
    font-size: 1.2em;
    /* アイコンのサイズも少し小さく */
}

/* ホバー時のスタイル */
.contact-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* ホバー時にわずかに背景を白く */
    border-color: white;
    /* 枠線の色を維持 */
    transform: translateY(-2px);
    /* 少し上に移動するアニメーション */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
        /* 強い光彩 */
        0 0 30px rgba(255, 255, 255, 0.4),
        /* 広い光彩 */
        0 0 45px rgba(255, 255, 255, 0.1);
    /* さらに広い非常に薄い光彩 */
}


/* よくあるご質問はここまで */


/* メディアクエリー */
@media(max-width:768px) {

    /* 共通 */
    header,
    main {
        max-width: 91%;
        margin-right: auto;
        margin-left: auto;
    }

    .footer-logoarea {
        flex-direction: column;
        height: unset;
        font-size: 0.75rem;
        padding: 25px 0 0 0;
        width: 100%;
    }

    .footer-logo {
        margin-bottom: 25px;
    }

    .footer-logo img {
        height: 150px
    }

    .footer-text {
        max-width: 256px;
        text-align: center;
    }

    header {
        height: 125px;
        padding-top: 20px;
    }

    .header-top {
        text-align: left;
        font-size: 0.75rem;
    }

    .header-top span {
        display: block;
    }

    .pagetitle {
        width: 75%;
    }

    footer .instagram {
        height: 120px;
        gap: 1%;
    }

    .instagram p {
        font-size: 1.125rem;
        width: 17.25rem;
        letter-spacing: 0.04em;
    }

    .instagram-logo {
        width: 24px;
        height: 24px;
        margin-bottom: 2rem;
    }

    .copylight {
        height: 60px;
        font-size: 0.75rem;
    }

    /* ハンバーガー */
    .top-right-icons {
        margin: 0 20px;
        width: 19.93%;
        gap: 22.03%;
        top: 23.86px;
    }

    .menu ul li {
        /* margin: 10px 0; */
        font-size: 1rem;
    }

    .menu {
        width: 100%;
        /* モバイル版では全幅 */
        left: 100%;
        /* モバイル版では全幅で画面外に配置 */
    }

    .menu.show {
        left: 0;
        /* showクラスが付いたら画面内に表示 */
    }

    .menu-li-first {
        margin: 0 0 20px 20px;
    }

    .menu-a-first {
        font-size: 1.5rem;
    }

    .menu-banner p {
        font-size: 1rem;
        margin: 0 0 10px 5px;
    }

    .menu-banner img {
        width: 100%;
    }

    .menu button img {
        margin-left: 90%;
        display: block;
        width: 30px;
        height: 30px;
    }

    .menu ul {
        margin-top: 0px;
    }

    /* ハンバーガー */



    /* オーディオ */
    .banner-buttons {
        flex-direction: column;
        /* ボタンを縦方向に並べる */
        align-items: stretch;
        /* ボタンの幅を親要素に合わせる */
    }

    .banner-buttons button {
        width: 100%;
        /* 親要素の幅いっぱいに広げる */
        /* min-widthは不要になる可能性もありますが、残しておくと安心です */
        max-width: unset;
        /* 必要に応じて max-width をリセット */
    }




    /* オーディオ */
    /* 共通 */


    /* トップページ */
    .top-header {
        height: 533px;
    }

    .watering-can {
        width: 90px;
    }

    .header-message {
        text-align: left;
        width: 100%;
    }

    .header-logoarea {
        margin-top: 30px;
        flex-direction: column;
        align-items: center;
        max-width: 69.27%;
    }

    .header-logoarea-item {
        margin: 0 auto;
        flex: none;
        max-width: 100%;
        /* 例えば、ロゴやメッセージの最大幅を調整 */

    }

    .logo {
        max-width: 100%;
        height: auto;
        padding-left: 2.5rem;
        margin: 20px 0 20px;
    }

    .header-message div {
        width: 100%;
        /* 親要素 (header-message) の幅いっぱいに広げる */
        margin-top: 20px;
        /* 上マージンを調整 */
    }

    .header-message p {
        width: 100%;
        /* 親要素の幅に合わせる */
        font-size: 0.625rem;
        /* フォントサイズを調整 */
        line-height: 1.8;
        /* 行間を調整 */
    }


    .signature .client-name {
        /* .signature内の.client-name画像を特定 */
        max-width: 100%;
        /* モバイルでのサイン画像の幅を調整 */
        height: auto;
        margin: 0 auto;
        /* 中央寄せ */
    }

    .prevent-break {
        word-break: unset;
    }

    .brand-concept {
        margin-top: 48px;
    }

    .top-section1 {
        padding-top: unset;
    }

    .top-section1 p {
        font-size: 0.813rem;
        margin-top: 38px auto 7px;
        line-height: 2.25;
        max-width: 100%;
        margin: 0 auto;
    }

    .top-section2 p {
        font-size: 0.813rem;
        margin-top: 38px;
        line-height: 2.25;
        max-width: 100%;
        text-align: center;
    }

    .main-nav-area {
        padding-bottom: unset;
    }

    .main-nav {
        display: flex;
        flex-direction: column;
        font-size: 1.2rem;
    }

    .nav-item1::before {
        width: unset;
    }

    .nav-item3::before {
        width: unset;
    }

    .main-nav>.nav-item3::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 1px;
        background-color: #fff;
        transform: translateX(50%);
    }

    .nav-item {
        height: 160px;
    }




    /* バナー */
    .banner {
        flex-direction: column;
        width: 100%;
        justify-content: unset;
        gap: 20px;
        height: auto;
        object-fit: cover;
        margin: 30px auto 90px;
    }

    .banner-item {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .banner-item img {
        max-width: 90%;
        height: auto;
    }


    /* バナー */

    .section1 p,
    .section2 p {
        width: 92%;
        margin: 0 auto;
        font-size: 13px;
    }

    .material-page-link img {
        width: 60%;
    }

    /* トップページ */



    /* 制作事例ページ */
    .gallery-top {
        font-size: 1.5rem;
    }

    .gallery-top-text {
        font-size: 1rem;
    }

    .gallery-top-text {
        font-size: 1rem;
        margin-bottom: 60px;
        text-align: left;
        width: 100%;
    }

    .gallery-img-grid {
        grid-template-columns: 1fr;
        /* 縦に1列 */
        gap: 35px;
        /* 画像の間隔 */
        max-width: 78.21%;
        padding: 65px 0;
    }

    .gallery-img-grid img {
        max-width: 100%;
        margin: 0 auto;
    }

    .gallery-img-container {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    /* 制作事例ページ */




    /* プロフィールページ */
    .profile-top,
    .profile-section2-top {
        font-size: 1.5rem;
    }

    .profile-section1 {
        padding: unset;
    }

    .profile-section1-img {
        margin-top: 58px;
        width: 55.87%;
    }

    .profile-section1-text1 {
        width: 100%;
        font-size: 1rem;
    }

    .profile-section1-text2 {
        font-size: 1.5rem;
    }

    .profile-section1-text3 {
        font-size: 1rem;
        width: 85.2%;
        margin: 25px auto 90px;
    }

    .profile-section2-text {
        width: 100%;
        line-height: 2.99;
        font-size: 1rem;
    }

    .profile-section2-img {
        margin: 58px 0 58px;
    }

    .profile-section2 {
        padding-bottom: 180px;
    }

    /* プロフィールページ */

    /* よくあるご質問ページ */
    .faq-top {
        font-size: 1.5rem;
        margin-bottom: 58px;
    }

    .faq-question {
        font-size: 1rem;
        line-height: 2.25;
        width: 95%;
    }

    .faq-answer {
        font-size: 0.9rem;
        line-height: 2.0;
        margin-top: 22px;
        width: 95%;
    }

    .faq-message {
        margin: 80px auto 40px;
        font-size: 1rem;
        padding: 16px;
    }

    .text-qa {
        font-size: 1rem;
        padding-right: 1.125rem;
    }


    .contact-buttons {
        flex-direction: column;
        /* 縦並びにする */
        align-items: center;
        /* 中央揃え */
        margin-bottom: 180px;
        gap: 20px;
    }

    .contact-button {
        width: 50%;
        /* 幅を調整 */
        max-width: 90%;
        /* 最大幅を設定 */
        font-size: 0.9rem;
    }

    .instagram-button1 {
        padding: 15px 10px;
        /* 上下左右のパディングを減らしてサイズダウン */
        font-size: 0.8rem;
        /* フォントサイズも少し小さく */
        display: inline-block;
        width: auto;
    }

    /* よくあるご質問ページ */

    /* アクセスページ */

    .access-top-textarea {
        padding: 30px 0;
    }

    .access-top-inner {
        width: 91%;
        margin: 0 auto;
        text-align: left;
    }

    .access-top-textarea-p1 {
        font-size: 1.25rem;
        margin-bottom: 19px;
    }

    .access-top-textarea-p1 span {
        display: block;
        /* 改行される */
        margin-top: 0.3rem;
        /* 任意：行間の余白調整 */
    }

    .access-top-textarea-p2 {
        font-size: 0.875rem;
    }

    .access-top {
        font-size: 1.5rem;
        margin-top: 58px;
    }

    .access-section {
        padding-top: 0px;
        padding-bottom: 180px;
    }

    .map-container {
        margin: 50px auto 50px;
        height: 300px;
    }

    .map-container iframe {
        width: 100%;
    }

    .info-table {
        max-width: 100%;
    }

    .info-table td span {
        font-size: 0.875rem;
    }

    .info-table th {
        font-size: 1rem;
        width: 75px;
    }

    .info-table td {
        font-size: 1rem;
    }

    .access-img {
        margin-top: 58px;
        width: 100%;
    }

    /* アクセスページ */



    /* 素材の良さ(material)ページはここから*/
    .material-section1,
    .material-section2,
    .material-section3 {
        margin: 0 auto;
        text-align: left;
    }

    .material-section1 {
        padding-bottom: 90px;
    }

    .material-section2,
    .material-section3 {
        padding-top: 45px;
        padding-bottom: 100px;
    }

    .material-section3 {
        margin-bottom: 80px;
    }

    .material-section-text {
        font-size: 1rem;
        letter-spacing: 0.1em;
        width: 100%;
        line-height: 2.0;
    }

    .material-section1 p {
        font-size: 1.25rem;
    }

    .material-h1 {
        font-size: 1.5rem;
        line-height: 1.5;
    }

    .material-h1-pc {
        text-align: center;
        width: 100%;
        margin: 0 auto 60px;
    }

    .material-line-height {
        margin-top: 30px;
    }

    .substratum-header {
        height: 125px;
    }

    /* 一枚の画像を挿入 */

    .drycotton-area img {
        height: 200px;
    }

    .cotton-material {
        flex-direction: column;
        gap: 30px;
        margin: 45px auto;
    }

    .cotton-material-item {
        width: 89.39%;
        margin: 0 auto;
    }

    .image-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2列レイアウト */
    }

    .image-row img {
        aspect-ratio: 1 / 1;
        /* 正方形にする */
        height: 200px;
        width: 100%;
        object-fit: cover;
        display: block;
    }

    /* 1番目と4番目の画像を非表示にする */
    .image-row img:nth-child(1),
    .image-row img:nth-child(4) {
        display: none;
    }

    /* 素材の良さのページはここまで */

    /* オーダーメイドの流れページはここから */


    .order-flow {
        width: 100%;
        gap: 4.5%;
        margin: 0 auto 100px;
    }

    .arrow-area {
        height: 100px;
    }

    .arrow-area img {
        width: 27.37%;
    }

    .ordermade-top-textarea {
        font-size: 1rem;
        max-width: 100%;
        margin: 58px auto 70px;
    }

    .ordermade-top-text2 {
        margin-top: 20px;
    }

    .ordermade-section-top {
        font-size: 1.5rem;
    }

    .ordermade-section-textarea p {
        font-size: 1rem;
    }

    .ordermade-section>div {
        width: 88.55%;
        height: fit-content;
        flex-direction: column;
        padding: unset;
    }

    .ordermade-section6 {
        margin-bottom: 180px;
    }


    .ordermade-section {
        height: 520px;
        padding: 40px 0 50px;
    }

    .ordermade-section>div {
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    .ordermade-section>div>.ordermade-section-textarea {
        width: 88.55%;
        flex: unset;
    }

    .ordermade-section>div>.ordermade-section-textarea {
        margin-top: 19px;
        text-align: center;
    }

    .ordermade-section>div>img {
        width: 41.9%;
        max-width: 40%;
        max-height: 194px;
    }


    /* オーダーメイドの流れページはここから */
}

/* modalウインドウ(START)ーーーーーーーーーーーーー */
.ft-modal[hidden] {
    display: none;
}

.ft-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
}

.ft-modal__panel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 900px);
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    /* border-radius: 16px; */
    padding: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    z-index: 1001;
    text-align: left;
}


.ft-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #4E67B0;
}

.ft-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

#ft-modal-title {
    color: #4E67B0;
    margin-bottom: 16px;
    margin-top: 2rem;
    font-size: 1.5rem;
}

.ft-modal__sub {
    color: #4E67B0;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.ft-modal__help {
    color: #4E67B0;
    margin-top: 8px;
    text-align: right;
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    #ft-modal-title {
        margin-top: 2rem;
        font-size: 1.25rem;
    }
    .ft-modal__help {
        text-align: left;
    }
}

.ft-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    text-decoration: none;
    color: #4E67B0;
    border: 1px solid #4E67B0;
    /* border-radius: 12px; */
    transition: .2s;
}

.ft-card a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

.ft-card__logo {
    height: 28px;
    /* filter: grayscale(1); */
    opacity: .9;
}

.ft-card__name {
    font-weight: 600;
}

.ft-card__note {
    font-size: .85rem;
    color: #4E67B0;
}

/* modalウインドウ（END）ーーーーーーーーーーーーー */
/* ── 基本（共通） ───────────────────────────── */

.furusato-accordion {
    margin: 0;
}

.furusato-trigger {
    display: block;
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    cursor: pointer;
    line-height: 0;
    /* 画像周りの余白を消す */
    box-sizing: border-box;
}

.furusato-trigger img,
/* 汎用 */
.furusato-banner-img {
    /* 明示クラスがある場合 */
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    border-radius: 6px;
    float: none;
    /* 既存float対策 */
}

.furusato-caret {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 20px;
    opacity: .6;
    transition: transform .2s ease;
}

.furusato-trigger[aria-expanded="true"] .furusato-caret {
    transform: rotate(45deg);
    opacity: .9;
}

/* サブメニュー */
.furusato-menu {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

/* ── ハンバーガーメニュー内に入った時の上書き ───────────────── */
/* これだけは必ず入れてください */
[hidden] {
    display: none !important;
}

/* 横スクロール防止 */
.menu {
    overflow-x: hidden;
}

/* メニュー下部のバナー配置をリセット */
.menu .menu-banner {
    display: block;
    /* flex 等を無効化 */
    text-align: left;
    /* padding: 0 20px;*/
    box-sizing: border-box;
}

/* ふるさと納税アコーディオン全体 */
.menu .furusato-accordion,
.menu .furusato-trigger {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* margin 折り畳みで「coming soon…」が食い込むのを防止 */
.menu .furusato-accordion {
    display: flow-root;
    /* BFC化で食い込み防止 */
    margin-bottom: 1.5rem;
}

/* ふるさと納税バナー画像を幅いっぱいに */
.menu .furusato-banner-img,
.menu .furusato-trigger img {
    display: block;
    width: 100% !important;
    /* 既存ルールを上書き */
    max-width: 100% !important;
    height: auto;
    margin: 0 auto;
    margin-bottom: 0.7rem;
}

/* ▼ ハンバーガーメニュー閉じるボタン専用 ▼ */
#close-menu img {
    margin-left: 85%;
    display: block;
    width: 50px;
    height: 60px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#close-menu:hover img {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
}

/* ▲ ここまで閉じるボタン専用 ▲ */

/* —— スムース開閉用（CSS） —— */
.furusato-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    overflow: hidden;
    height: 0;
    /* 閉じ時 */
    transition: height .28s ease;
    will-change: height;
}

.furusato-menu.is-open {
    opacity: 1;
    /* 開時。高さはJSで制御（0px⇔scrollHeight） */
}

@media (prefers-reduced-motion: reduce) {
    .furusato-menu {
        transition: none;
    }
}

.furusato-list a {
    display: block;
    background: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    color: #4E67B0;
}

/* リンクのホバー時（共通） */
.menu a:hover {
    color: #243153;
}

/* プラスアイコン（caret）のスタイル */
.furusato-caret {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 20px;
    opacity: 0.6;
    transition: transform .2s ease;
}

.furusato-trigger[aria-expanded="true"] .furusato-caret {
    transform: rotate(45deg);
    opacity: 0.9;
}

/* ハンバーガーのフォーカスの上書き */
/* ===== ハンバーガーメニュー専用：スマホの青い囲み消す ===== */
.hamburger,
#close-menu {
  -webkit-tap-highlight-color: transparent;
}

.hamburger img,
#close-menu img {
  pointer-events: none;
}

.hamburger:focus,
#close-menu:focus,
.hamburger:focus-visible,
#close-menu:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.hamburger::-moz-focus-inner,
#close-menu::-moz-focus-inner {
  border: 0;
}