html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    scroll-padding-top: 40px;
}

:root {
    --v-space: clamp(35px, 5vw, 45px);
}

body {
    margin: 0;
    background-color: #f3f1ed;
    color: #484848;
    font-family: sans-serif;
}

main {
    background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6, p, figure, ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    line-height: 1.8;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    filter: brightness(90%) contrast(120%);
}

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

@media (max-width: 980px) {
    a {
        font-weight: 600;
    }
}

/* 横幅と左右の余白 */

.w-container {
    width: min(92%, 1166px);
    margin: auto;
    position: relative;
}

@media (min-width: 981px) {
    .w-container {
        width: 80%;
    }
}

body {
    margin: 0;
    background-color: #f3f1ed;
    color: #222222;
    font-family: sans-serif;
}

/* ヘッダー */
.header {
    height: 60px;
    background-color: #a4dbdd;
    position: sticky;
    top: 0;
    z-index:10;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.site {
    display: flex;
    gap: 8px;
}

.site-name {
    text-align: center;
    margin: auto 0;
    font-size: 12px;
    font-weight: bold;
    color: #707070;
    font-family: system-ui;
}

/* ナビゲーションボタン */
.navbtn{
    padding: 0;
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #aaaaaa;
    font-size: 30px;
}

.open .navbtn {
    z-index: 110;
    color: #aaaaaa;
}

navbtn .fa-bars {
    display: revert;
}

.open .navbtn .fa-bars {
    display: none;
}

.navbtn .fa-times {
    display: none;
}

.open .navbtn .fa-times {
    display: revert;
}

@media (min-width: 981px) {
    .navbtn {
        display: none;
    }
}

/* ナビゲーションメニュー：モバイル */
@media (max-width: 980px) {
    .nav {
        position: fixed;
        inset: 0 -100% 0 100%;
        z-index: 100;
        background-color: rgba(164,219,221,0.95);
        transition: transform 0.3s;
    }

    .open .nav {
        transform: translate(-100%, 0);
    }

    .open body {
        overflow: hidden;
    }

    .nav ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        gap: 40px;
        color: #ffffff;
    }
}

/* ナビゲーションメニュー：PC */
@media (min-width: 981px) {
    .nav ul {
        display: flex;
        gap: 40px;
        color: #707070;
    }
}

/* ヒーロー */
.hero {
    height: 650px;
    background-image: url(hero.jpg);
    background-position: center;
    background-size: cover;
}

.hero-container {
    display: grid;
    justify-items: center;
    align-content: center;
    height: 100%;
}

.hero-area {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hero-copy {
    text-align: left;
    margin-bottom: 30px;
}

.hero h1 {
    margin-bottom: 4px;
    font-family: "Montserrat", sans-serif;
    font-size: clamp(58px, 6vw, 78px);
    min-height: 0vw;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: linen;
}

.hero .h1-1 {
    padding-right: 50px;;
}

.hero .h1-2 {
    padding-left: 50px;
}

.hero p {
    font-weight: 600;
    text-align: center;
    color: #fff;
    font-family: cursive;
}

@media (min-width: 768px) {
    .hero-area {
        width: 80%;
    }
}

.fuchidori {
    font-weight: bold;
    font-size: 70px;
    color: rgba(0, 0, 0, 0);
    text-shadow: 3px 3px 0 #ffffff;
    -webkit-text-stroke: 1px hsl(0, 0%, 53%);
    text-stroke: 1px #888;
    padding: 0 0 10px;
}

.fuchidori2 {
    font-weight: bold;
    font-size: 60px;
    color: rgba(0, 0, 0, 0);

    text-shadow: 3px 3px 0 #9db;
    -webkit-text-stroke: 1px #888;
    text-stroke: 1px #888;
}

/* セロテープ風 */
.box5-6 {
    position: relative; /* タイトルをボックス内の左上に配置するための基準 */
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    background-color: rgba(164, 219, 221, 0.7); /* ボックス背景色 */
    border-radius: 4px;
    margin-top: 1em;
    font-family: cursive;
}

.box5-6 .box-title {
    background-color: rgb(255 255 255 / .9); /* テープ背景色と透過 */
    border-left: 2px dotted rgb(0 0 0 / .1); /* テープのギザギザ左 */
    border-right: 2px dotted rgb(0 0 0 / .1); /* テープのギザギザ右 */
    box-shadow: 0 0 5px rgb(0 0 0 / .12); /* テープ影 */
    transform: rotate(-2deg); /* テープの傾き */
    color: #666; /* タイトル文字色 */
    padding: 10px 20px; /* タイトルの余白 */
    line-height: 1; /* タイトルの行の高さ */
    position: absolute; /* 親要素の左上に固定 */
    top: -1em; /* 上端に配置 */
    left: 1em; /* 左端に配置 */
    display: inline-block; /* タイトルの幅を内容に合わせる */
    font-size: 0.9em; /* タイトルのフォントサイズ */
    width: auto; /* タイトル幅を内容に応じて可変にする */
    max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
    white-space: nowrap; /* タイトルを1行に固定 */
    overflow: hidden; /* はみ出した部分を非表示 */
    text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-6 .box-content {
    padding: 2.2em 2em 1.6em; /* コンテンツ内の余白 */
}

/* pタグの余白を0にする */
.box5-6 p {
    margin: 0;
}

.hero-copy-sub {
    margin-bottom: 30px;
}

.hero-copy-sub p {
    background-color: linen;
    opacity: 0.8;
    color: gray;
}

/* お知らせ欄 */
.info-container {
    display: flex;   
    gap: 10px;
    background-color: #484848;
    color: #ffffff;
    padding-left: 20px;
    height: 40px;
    align-items: center;
    font-size: small;
    margin-bottom: 8px;
}

.info-container .info-menu {
    padding-right: 10px;
    border-right: #ffffff 1px solid;
}

.info-container .info-date {
    color: #f3f1ed;
}

/* コンテンツ */
.content {
    padding: var(--v-space) 0;
}

.content h3 {
    color: darkgray;
    margin-bottom: 12px;
    font-size: clamp(18px, 4.2vw, 22px);
}

.content-title {
    margin-bottom: 30px;
}

.content-title h3 {
    margin-bottom: 0;
}

.content-title small {
    color: #707070;
}

.title-en {
    font-size: clamp(16px, 4.2vw, 20px);
    font-weight: 600;
    color: #8ac6cf;
}

@media (min-width: 768px) {
    .content-title {
        text-align: center;
    }

    .content-title h3 {
        font-size: clamp(18px, 5vw, 26px);
    }
}

/* 説明 */
.jim-description h3 {
    font-size: clamp(16px, 3.6vw, 20px);
}

.content-subtitle {
    color: #8ac6cf;
    margin-bottom: 24px;
    font-size: clamp(22px, 4.2vw, 24px);
    font-weight: 700;
}

.content .description p {
    margin-bottom: 16px;
    color: gray;
}

/* マシン紹介 */    
.machine-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.machine-container {
    margin: 0 auto;
    flex: 1;
}

.machine-name {
    text-align: center;
    color: #8ac6cf;
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 28px;
    border-bottom: #8ac6cf 1.2px solid;
    white-space: nowrap
}

.machine-intro img {
    border-radius: 12px;
    margin: 0 auto;
    width: 84%;
    max-width: 360px;
    box-shadow: 14px 10px 0px #f3f1ed;
}

.machine-desc {
    margin: 26px 10px;
    color: gray;
}

@media (min-width: 768px) {
    .machine-list {
        flex-direction: row;
        gap: 26px;
    }

    .machine-intro img {
        width: 96%;
    }

    .machine-name {
        font-size: 16px;
    }
}

@media (min-width: 1024px) {
    .machine-name {
        font-size: 18px;
    }
    
    .machine-desc {
        width: 90%;
        margin: 26px auto;
    }
}

@media (max-width: 767px) {
    .machine-intro {
        max-width: 420px;
    }
}

/* アメニティ */
.amenities h3 {
    margin-bottom: 30px;
}

.amenities-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 10px;
}

.amenities-icon {
    display: grid;
    place-items: center;
    width: 72px;
    aspect-ratio: 1 / 1;
    background-color: #ffffff;
    color: #8ac6cf;
    clip-path: circle(50%);
    font-size: 36px;
}

.amenities-name {
    color: #888;
    text-align: center;
    margin: 8px auto;
    font-size: 10px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .amenities-list {
        justify-content: center;
    }
}

/* 料金 */
.price {
    background-color: #ffffff;
}

.price-menu li {
    display: flex;
    justify-content: space-between;
    background-color:#f1f1f1;
    padding: 10px 20px;
    margin: 10px 0;
    border-radius: 4px;
}

.price-category {
    margin-bottom: 28px;
}

.price-category p {
    margin: 2px 10px;
    color: #484848;
    font-size: small;
}

.price-name {
    margin-left: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #484848;
}

@media (min-width: 768px) {

    .price-menu {
        width: 80%;
        margin: 0 auto;
    }
}

/* 利用までの流れ */
.flow-list {
    display: flex;
    gap: 26px;
    margin: 40px 0;
}

.flow-container {
    flex: 1;
    background-color: #ffffff;
    border-radius: 10px;
}

.flow-image {
    width: 100%;
    height: 160px;
}

.flow-img1 {
    background-image: url(flow-01.jpg);
}

.flow-img2 {
    background-image: url(flow-02.jpg);
}

.flow-img3 {
    background-image: url(flow-03.jpg);
}

.flow-img1, .flow-img2, .flow-img3 {
    border-radius: 10px 10px 0 0;
    background-position: center;
    background-size: cover;
}

.flow-number {
    background-color: #a4dbdd;
    color: #ffffff;
    width: 30px;
    text-align: center;
    font-weight: 600;
    padding: 5px 0;
    margin: 0;
    border: #a4dbdd 1px solid;
    border-radius: 10px 0 10px 0;
}

.flow-container h4 {
    text-align: center;
    color: #707070;
    margin-top: 24px;
    margin-bottom: 8px;
}

.flow-container p {
    padding: 0 20px;
    margin-bottom: 16px;
    color: #484848;
    font-size: 14px;
}

.flow-sup li {
    color: #484848;
    margin-left: 6px;
    margin-bottom: 10px;
    font-size: 14px;
}

.button-panel {
    margin: 0 auto;
    margin-top: 34px;
    width: 100%;
    text-align: center;
}

.flow .btn {
    display: block;
    width: 240px;
    height: 40px;
    line-height: 40px;
    margin: 0px auto;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #a4dbdd;
    color: #ffffff;
    font-size: clamp(16px, 1.7vw, 18px);
    text-align: center;
    text-shadow: 0 0 6px #00000052;
}

@media (min-width: 768px) {
    .flow-list {
        width: 86%;
        margin: 40px auto;
    }

    .flow-sup {
        width: 86%;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .flow-list {
        flex-direction: column;
    }

    .flow-container {
        display: flex;
        max-height: 160px;
    }

    .flow-container p {
        font-size: 12px;
    }

    .flow-img1, .flow-img2, .flow-img3 {
        border-radius: 10px 0 0 10px;
    }

    .flow-image {
        flex: 0.8;
    }

    .flow-content {
        flex: 1;
    }

    .flow-container h4 {
        margin-top: 18px;
    }
}

/* よくある質問 */
.faq {
    background-color: #ffffff;
}

.faq-container {
    width: 92%;
    margin: 0 auto;
    margin-top: 40px;
}

.qa-content {
    margin-bottom: 5px;
    border-bottom: 2px solid #d6dde3;
}

.qa-content summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #707070;
    font-weight: 600;
    cursor: pointer;
    font-size: clamp(14px, 1.8vw, 18px);
    list-style: none;
}

.qa-content summary::-webkit-details-marker {
display:none;
}

.qa-content summary::before,
.qa-content p::before {
    position: absolute;
    left: 0.5em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-content summary::before {
    color: #8ac6cf;
    content: "Q";
}

.qa-content summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
    min-width: 7px;
}

.qa-content[open] summary::after {
    transform: rotate(225deg);
}

.qa-content p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #484848;
    transition: transform .5s, opacity .5s;
    line-height: initial;
    font-size: initial;
    font-size: clamp(14px, 1.8vw, 18px);
}

.qa-content[open] p {
    transform: none;
    opacity: 1;
}

.qa-content p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

.qa .content {
    text-align: initial;
}

.faq-sup {
    margin-top: 30px;
    text-align: right;
}

.faq-sup a {
    color: #8ac6cf;
    padding-left: 4px;
    border-bottom: #8ac6cf 1px solid;
    font-size: 14px;
}

/* 施設情報 */
.facility-container {
    background-color: #ffffff;
    padding: 20px 0;
    border-radius: 6px;
}

.facility-title h3 {
    font-size: clamp(16px, 5vw, 22px);
    font-weight: 600;
    color: #707070;
    text-align: center;
    margin-top: 16px;
}

.facility-content {
    margin: 50px 8%;
    color: #707070;
}

.facility-content h4 {
    color: #8ac6cf;
    margin-bottom: 28px;
}

.hours {
    margin: 20px 0;
}

.hours-title, .address-title {
    color: #8ac6cf;
    margin-bottom: 12px;
    border-bottom: #8ac6cf 1.4px solid;
}

.hours-content {
    margin-left: 4px;
    font-weight: 600;
}

.holidays-content {
    font-size: 14px;
    margin-top: 8px;
    margin-left: 4px;
}

.address-content {
    margin-bottom: 14px;
    margin-left: 4px;
    font-size: 14px;
    font-weight: 600;
}

.address-station {
    margin-left: 4px;
}

.address-station {
    color: #8ac6cf;
}

.address-station p {
    color: #707070;
    margin-left: 10px;
    display: inline-block;
    font-size: 14px;
}

/* Google Mapを囲う要素 */
.map {
    margin-top: 30px;
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%; /* 比率を4:3に固定 */
}

/* Google Mapのiframe */
.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 横幅を指定するための要素 */
.map-wrap {
    max-width: 92%; /* ここに横幅を指定 */
    margin: 0 auto;
}

/* Google Mapを囲う要素 */
.map {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%; /* 比率を4:3に固定 */
}

/* Google Mapのiframe */
.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-width: 768px) {
    .facility-content {
        margin: 50px 12%;
    }

    .facility-content h4 {
        font-size: 20px;
    }

    .address-content {
        font-size: 16px;
    }

    .address-station p {
        font-size: 16px;
    }

    .map {
        margin-top: 40px;
    }

    .map-wrap {
        max-width: 78%; /* ここに横幅を指定 */
        margin: 0 auto;
    }
}


/* フッター */
.footer {
    padding: 70px 0;
    background-color: #ffffff;
    color: #707070;
    font-size: 13px;
}

.footer-container {
    display: grid;
    gap: 50px;
    justify-items: center;
}

.footer-site {
    width: 80px;
}

@media (min-width: 768px) {
    .footer-container {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto auto;
        gap: 20px;
    }

    .footer-container > .footer-site {
        margin-bottom: 20px;
    }

    .footer-container > *:not(footer-sns) {
        justify-self: start;
    }

    .footer-container > .footer-sns {
        grid-column: 2;
        grid-row: 1 / 4;
        justify-self: end;
        align-self: center;
    }
}

/* フッターSNSメニュー */
.footer-sns {
    display: flex;
    gap: 24px;
    font-size: 24px;
}

.footer-sns a {
    display: grid;
    place-items: center;
    width: 36px;
    aspect-ratio: 1 / 1;
    background-color: #cccccc;
    color: #ffffff;
    clip-path: circle(50%);
}

@supports not (aspect-ratio: 1 / 1) {
    .footer-sns a{
        height: 36px;
    }
}

/* フッター：テキストメニュー */
.footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}