@charset "UTF-8";

body {
    font-family: "Noto Sans JP", sans-serif;
    color: #000;
}

.u-desktop {
    display: block;
}
.u-mobile {
    display: none;
}

/* ここからヘッダー */

.header {
    padding: 0 100px;
}

/* 画像を表示時に半分のサイズにする */
.header__logo img {
    width: 224px;
    height: auto; /* 高さを自動で調整 */
}

.header__button li img {
    width: 48px;
    height: auto; /* 高さを自動で調整 */
}

.header__button li.header__newimg {
    display: none; /* PC版では新しい画像を非表示にする */
}

.header__menu img {
    width: 40px;
    height: auto;
}

.header__inner {
    max-width: 1312px;
    margin: 0 auto;
}

.header__logo {
    display: flex;
    flex-direction: row; /* ロゴとタイトルを横に並べる */
    align-items: end;
}

h1 {
    font-size: 40px;
    font-weight: 500;
    line-height: 64px;
}

.header__upper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__button ul {
    display: flex;
    /* margin-right: 18px; */
}

.header__button li {
    display: flex; /* アイコンとテキストを横並びに */
    align-items: center; /* アイコンとテキストを垂直方向に中央揃え */
    margin-right: 33px; /* リストアイテム間のスペース */
    border: 3px solid #d062f2;
    font-size: 32px;
    padding: 14px 28px;
}

.header__button li:nth-of-type(3) {
    margin-right: 0;
}

.header__button img {
    margin-right: 0px; /* アイコンとテキストの間のスペース */
}

.header__button a {
    text-decoration: none; /* テキストの下線を削除 */
    display: flex;
    align-items: center;
}

.header__menu {
    margin: 4px 49px 16px;
}

.header__menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header__menu li {
    border-right: 1px solid #000000;
    margin-right: 10px; /* 縦線とアイコン・テキストの間隔 */
    padding-right: 10px; /* アイコンと縦線の間隔 */
    padding-left: 10px; /* 縦線の左側に空間を追加 */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.header__menu li:last-child {
    border-right: none; /* 最後のアイテムの右側のボーダーを取り除く */
}

.header__menu img {
    margin-right: 5px;
}

.header__menu a {
    margin-right: 10px;
    font-size: 28px;
    font-weight: 500;
}

/* ここまでヘッダー */

/* ここからバナー */

/*==================================================
スライダーのためのcss
===================================*/
.slider {
    position: relative;
    z-index: 1;
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height: 100vh; /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    width: 100%;
}
/*　背景画像設定　*/

.slider-item01 {
    background: url(../images/topbanner@2x.jpg);
}

.slider-item02 {
    background: url(../images/papabanner@2x.jpg);
}

.slider-item {
    width: 100%; /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 100vh; /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat; /*背景画像をリピートしない*/
    background-position: center; /*背景画像の位置を中央に*/
    background-size: 100% 100vh; /*背景画像が.slider-item全体を覆い表示*/
}

.slick-next.slick-arrow,
.slick-prev.slick-arrow {
    display: none !important;
}

div.mv img {
    width: 100%;
    height: auto;
    position: center;
    max-width: 100%; /* 親要素の幅を超えないように設定 */
    display: block;
}

/* ここまでバナー */

/* ここから背景 */
.background {
    background-image: url(../images/background-img@2x.jpg);
    background-position: top center; /* 画像を上部中央に配置 */
    background-size: 100% 3954px; /* 元の四角形のサイズに合わせる
    /* width: 100%; */
    /* height: auto; */
    /* position: center; */
    background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
    /* height: 3954px; /* 四角形の高さに合わせてbodyの高さを設定 */
}

/* ここまで背景 */

/* 花のアイコンの大きさ */
.flower__left,
.flower__right {
    width: 48px;
    height: auto;
}

/* 花のアイコンからタイトルへの距離 */
.flower__left {
    margin-right: 20px;
}

.flower__right {
    margin-left: 20px;
}

/* ここからお知らせ */

.news__inner {
    max-width: 1312px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
}

h2 {
    font-size: 40px;
    margin-bottom: 40px;
}

.news__container {
    padding: 50px 78px 224px 77px;
    font-size: 18px;
    letter-spacing: 1.8px; /* 文字間隔を10%に設定 */
    background-color: #ffffff;
    border-radius: 15px;
    display: flex;
}

time {
    margin-right: 25px;
}

/* ここまでお知らせ */

/* ここから初めての方へ */

.first {
    background-color: #ffffff;
    padding: 40px 0;
}

.first__inner {
    max-width: 1312px;
    margin: 0 auto;
    /* padding-top: 40px;
    padding-bottom: 40px; */
}

.first__headline {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.first__headline p {
    font-size: 18px;
    letter-spacing: 1.8px; /* 文字間隔を10%に設定 */
    line-height: normal;
}

.first__headline p + p {
    margin-top: 15px;
}

.first__headline .green {
    border-bottom: 8px solid #a6eab7;
}

.first__feature {
    list-style-type: none; /* リストのデフォルトのスタイルを無効化 */
    padding: 0;
    margin: 0;
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: repeat(2, 1fr); /* 横に2つ並べる */
    gap: 40px 156px; /* アイテム間のスペースを設定 */
    justify-items: center; /* アイテムを中央揃え */
}

.first__feature li {
    text-align: center; /* 画像とキャプションを中央揃え */
}

.first__feature figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.first__feature img {
    max-width: 100%; /* 画像がリスト項目内に収まるようにリサイズ */
    width: 500px;
    height: auto; /* 画像の縦横比を保持 */
}

.first__feature figcaption {
    font-size: 20px; /* キャプションのフォントサイズを設定 */
    line-height: normal; /* 行間をデフォルトに設定 */
    margin-top: 10px; /* 画像とキャプションの間に余白を追加 */
    color: #333; /* キャプションのテキストカラーを設定 */
    width: 100%;
    text-align: center; /* キャプションを中央揃え */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-top: 30px;
}

/* ここからごあいさつ */

.greet {
    padding: 40px 0;
}

.greet__inner {
    max-width: 1312px;
    margin: 0 auto;
    /* padding-top: 40px;
    padding-bottom: 40px; */
}

.greet__container {
    display: flex;
    justify-content: space-between; /* 要素を左右に配置 */
    align-items: flex-start;
}

.greet__portfolio {
    text-align: center;
    margin-right: 98px;
    align-self: flex-start; /* 左側に配置 */
    width: auto; /* 必要に応じて幅を調整 */
}

.greet__portfolio img {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: auto;
}

.greet__portfolio p {
    margin-top: 20px; /* 画像とテキストの間の余白を調整 */
    text-align: center;
    font-size: 24px;
}

.greet__sentence {
    font-size: 18px;
    line-height: 30px;
    background-color: #fff;
    border-radius: 20px;
    padding: 15px 20px;
    margin-bottom: 28px;
}

.greet__sentence p:nth-of-type(3) {
    margin-bottom: 18px;
}

.greet__button {
    text-align: end;
    margin-top: 28px;
    margin-bottom: 40px;
}

.greet__button a {
    font-size: 28px;
    letter-spacing: 2.8px;
    background-color: #fff;
    border: #000 solid 1px;
    border-radius: 20px;
    padding: 26px 97px 26px 98px;
}

/* ここからご予約・営業時間 */

.reservation {
    background-color: #ffffff;
    padding: 40px 0;
}

.reservation__inner {
    max-width: 1312px;
    margin: 0 auto;
    /* padding-top: 40px;
    padding-bottom: 40px; */
}

.reservation__headline {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.reservation__headline p {
    font-size: 20px;
    letter-spacing: 2px; /* 文字間隔を10%に設定 */
    line-height: normal;
}

.reservation__container {
    display: flex;
    justify-content: space-between;
}

.reservation__container h3 {
    font-size: 32px;
    margin-bottom: 30px;
    text-align: center;
}

.reservation__container p {
    font-size: 18px;
    width: 600px;
    height: auto;
}

.reservation__left p:not(:last-child) {
    margin-bottom: 20px; /* 最後のpタグを除いた段落に適用するスタイル */
}

.reservation__right {
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    align-items: center; /* 水平方向に中央揃え */
}

.reservation__right p:not(:last-child) {
    margin-bottom: 20px; /* 最後のpタグを除いた段落に適用するスタイル */
}

.reservation__button {
    margin-top: 40px;
    text-align: center;
}

.reservation__button li {
    display: flex;
    align-items: center; /* 垂直方向に中央揃え */
    justify-content: center; /* 水平方向に中央揃え (必要に応じて調整) */
    border: 3px solid #d062f2;
    font-size: 32px;
    padding: 14px 28px;
    letter-spacing: 3.2px;
    width: 450px;
}

.reservation__button img {
    margin-right: 15px; /* アイコンとテキストの間のスペース */
    width: 48px;
    height: auto;
}

.reservation__button a {
    text-decoration: none; /* テキストの下線を削除 */
}

.reservation__button li:not(:last-child) {
    margin-bottom: 35px;
}

/* ここからアクセス */

.access {
    padding: 40px 0;
}

.access__inner {
    max-width: 1312px;
    margin: 0 auto;
    /* padding-top: 40px;
    padding-bottom: 40px; */
}

.access__inner h2 {
    margin-bottom: 35px;
}

.access__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.access__content p {
    font-size: 18px;
    line-height: 30px;
}

.access__content p:first-of-type {
    margin-bottom: 30px;
}

.access__map {
    width: 640px;
    height: auto;
}

/* ここからリンク */
.link {
    background-color: #fff;
    padding: 40px 0;
}

.link__inner {
    max-width: 1312px;
    margin: 0 auto;
    /* padding-top: 40px;
    padding-bottom: 40px; */
}

.link__title {
    margin-bottom: 25px;
}

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

.link__josanin {
    text-align: center; /* 画像とキャプションを中央揃え */
    margin-left: 226px;
}

.link__josanin img {
    width: 217.06px;
    height: auto;
}

.link__josanin figcaption {
    font-size: 20px; /* キャプションのフォントサイズを設定 */
    line-height: 41px; /* 行間をデフォルトに設定 */
    margin-top: 20px; /* 画像とキャプションの間に余白を追加 */
    color: #000; /* キャプションのテキストカラーを設定 */
    width: 100%;
}

.link__feature img {
    width: 736px;
    height: auto;
}

/* ここからフッター */
.footer {
    padding: 14px 0 13px 0;
    text-align: center;
    background-color: #4f4f4f;
}

.footer small {
    font-size: 16px;
    color: #fff;
}

/*==================================================
ここから下層ページ
===================================*/

/* ここからごあいさつ */

.greet2__inner {
    max-width: 1312px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
}

.greet2__uuper {
    display: flex;
}

.greet2__portfolio {
    text-align: center;
    margin-right: 98px;
    align-self: flex-start; /* 左側に配置 */
    width: auto; /* 必要に応じて幅を調整 */
}

.greet2__portfolio img {
    display: block;
    /* margin: 0 auto; */
    width: 150px;
    height: auto;
    margin-left: 253px;
}

.greet2__portfolio figcaption {
    margin-top: 20px; /* 画像とテキストの間の余白を調整 */
    text-align: center;
    font-size: 24px;
    margin-left: 212px;
}

.greet2__sentence1 {
    background-color: #fcfcfc;
    border-radius: 15px;
    width: 653px;
    height: auto;
    padding: 15px 27px;
    margin-right: 6px;
    margin-bottom: 40px;
}

.greet2__sentence1 p {
    line-height: 30px;
    font-size: 18px;
}

.greet2__sentence1 p:not(:last-of-type) {
    margin-bottom: 18px;
}

.greet2__sentence2 {
    background-color: #fcfcfc;
    border-radius: 15px;
    padding: 15px 27px;
    width: 1309px;
    margin: 0 auto;
    margin-bottom: 60px;
}

.greet2__sentence2 p {
    font-size: 18px;
    line-height: 30px;
}

.greet2__sentence2 p:first-of-type {
    margin-bottom: 18px;
}

.greet2__content {
    background-color: #fcfcfc;
    border-radius: 15px;
    width: 1312px;
    margin: 0 auto;
    padding: 40px 30px;
    margin-bottom: 80px;
}

.greet2__subtitle {
    font-size: 40px;
    padding-bottom: 30px;
    border-bottom: 5px dotted #000000;
    width: 1250px;
    margin-bottom: 60px;
}

.greet2__history {
    display: flex;
}

.greet2__history p {
    margin-right: 214px;
    margin-left: 168px;
    font-size: 32px;
}

.greet2__history ul {
    margin-bottom: 30px;
}

.greet2__history li {
    font-size: 16px;
}

.greet2__history li:not(:last-of-type) {
    margin-bottom: 26px;
}

.greet2__history li:nth-of-type(3) {
    margin-bottom: 6px;
}

.greet2__qualification {
    display: flex;
    border-top: 2px dotted #000000;
    width: 1250px;
    padding-top: 30px;
}

.greet2__qualification p {
    margin-left: 168px;
    margin-right: 310px;
    font-size: 32px;
}

.greet2__qualification li {
    font-size: 16px;
}

.greet2__qualification li:not(:last-of-type) {
    margin-bottom: 23px;
}

.greet2__container {
    background-color: #fcfcfc;
    border-radius: 15px;
    padding: 60px;
    margin-bottom: 100px;
}

.greet2__container1title {
    font-size: 32px;
    line-height: 30px;
    margin-left: 63px;
    margin-bottom: 40px;
}

.greet2__container1 {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}

.greet2__container1 div {
    width: 600px;
}

.greet2__container1 p {
    font-size: 18px;
    line-height: 30px;
}

.greet2__container1 p:not(:last-of-type) {
    margin-bottom: 19px;
}

.greet2__container1 img {
    width: 500px;
    height: auto;
    margin-left: 74px;
}

.greet2__container2title {
    font-size: 32px;
    line-height: 30px;
    margin-left: 732px;
    margin-bottom: 40px;
}

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

.greet2__container2 img {
    width: 500px;
    height: auto;
    margin-right: 74px;
}

.greet2__container2 p {
    font-size: 18px;
    line-height: 30px;
}

.greet2__container2 p:not(:last-of-type) {
    margin-bottom: 19px;
}

/* 下層ページのフッターはtop画と一緒なので、別でコーディング不要 */

/* ===============
ここからtop画レスポンシブ
=============== */

@media screen and (max-width: 767px) {
    .u-desktop {
        display: none;
    }

    .u-mobile {
        display: block;
    }

    .header {
        padding: 0 30px;
    }

    /* .header__inner{
        max-width: 315px;
    } */

    .header__logo {
        flex-direction: column; /* ロゴとタイトルを縦に並べる */
        align-items: center; /* アイテムを中央揃え */
        text-align: center; /* タイトルを中央揃え */
        margin-left: 0;
    }

    .header__logo img {
        margin-right: 0; /* モバイル版では右マージンをゼロにする */
        margin-bottom: 0px; /* ロゴとタイトルの間にスペースを追加 */
        width: 100px;
        height: auto;
    }

    .header__logo h1 {
        font-size: 20px; /* モバイル版でのフォントサイズ調整（必要に応じて変更） */
        white-space: nowrap; /* テキストの折り返しを防ぐ */
        line-height: initial;
    }

    /* ハンバーガーメニュー */

    /*ボタン内側*/
    .openbtn1 span {
        display: inline-block;
        transition: all 0.4s; /*アニメーションの設定*/
        position: absolute;
        /* left: 14px; */
        height: 3px;
        border-radius: 2px;
        background: #000000;
        width: 45px;
    }

    .openbtn1 span:nth-of-type(1) {
        top: 2px;
    }

    .openbtn1 span:nth-of-type(2) {
        top: 11px;
    }

    .openbtn1 span:nth-of-type(3) {
        top: 20px;
    }

    /*activeクラスが付与されると線が回転して×に*/

    .openbtn1.active span:nth-of-type(1) {
        top: 15px;
        left: 0;
        transform: translateY(6px) rotate(-45deg);
        width: 45px;
    }

    .openbtn1.active span:nth-of-type(2) {
        opacity: 0; /*真ん中の線は透過*/
    }

    .openbtn1.active span:nth-of-type(3) {
        top: 26px;
        left: 0;
        transform: translateY(-6px) rotate(45deg);
        width: 45px;
    }
    /* ハンバーガーメニュー */

    .header__menu {
        display: none;
    }

    .header__button ul {
        margin-right: 0;
    }

    .header__button li {
        display: flex;
        align-items: center;
        margin-right: 10px; /* リストアイテム間のスペース */
        border: none;
        padding: initial;
        position: relative; /* 相対位置に設定 */
    }

    .header__button li.header__newimg {
        display: block; /* モバイル版では新しい画像を表示する */
        margin-left: auto; /* 新しい画像を右端に配置 */
        margin-right: 0;
    }

    .header__button a {
        text-indent: -9999px; /* テキストを非表示にする */
        display: flex;
        align-items: center;
    }

    .header__button a span {
        display: none; /* テキストを非表示にする */
    }

    .header__button a#text {
        display: none;
    }

    .header__button img {
        display: block; /* 画像をブロック要素として表示 */
    }

    .header__button li:last-child img {
        margin-right: 0; /* 最後のアイテムの画像にはスペースを設定しない */
    }

    .header__button li img {
        width: 24px;
    }

    /* ここからハンバーガーメニュー */

    /*========= ナビゲーションのためのCSS ===============*/

    /* 初期状態でメニューを非表示にする */
    #g-nav {
        display: none;
    }

    #g-nav {
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position: fixed;
        z-index: 999;
        /*ナビのスタート位置と形状*/
        top: -120%;
        left: 0;
        width: 100%;
        height: 100vh; /*ナビの高さ*/
        background: #fcfcfc;
        /*動き*/
        transition: all 0.6s;
    }

    /* メニューが表示されたときにスタイルを適用 */
    #menuToggle.active + nav#g-nav {
        display: block;
    }

    /*アクティブクラスがついたら位置を0に*/
    #g-nav.panelactive {
        top: 0;
    }

    /*ナビゲーションの縦スクロール*/
    #g-nav.panelactive #g-nav-list {
        /*ナビの数が増えた場合縦スクロール*/
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh; /*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    /*ナビゲーション*/
    #g-nav ul {
        /*ナビゲーション天地中央揃え*/
        position: absolute;
        z-index: 999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    /*リストのレイアウト設定*/

    #g-nav li {
        list-style: none;
        text-align: center;
    }

    #g-nav li a {
        color: #333;
        text-decoration: none;
        padding: 10px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
    }

    /*========= ボタンのためのCSS ===============*/
    .openbtn1 {
        position: relative;
        z-index: 9999; /*ボタンを最前面に*/
        width: 45px;
    }

    .u-mobile nav img {
        width: 20px;
        height: 20px;
    }

    /* ここから背景 */
    .background {
        background-position: top center; /* 画像を上部中央に配置 */
        background-size: auto auto; /* 元の四角形のサイズに合わせる */
        background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
    }

    /* スライダー */
    .slider {
        height: 23vh;
    }

    .slick-list {
        height: inherit;
    }

    .slick-track {
        height: inherit;
    }

    .slider-item {
        background-size: 100% 23vh; /*背景画像が.slider-item全体を覆い表示*/
        height: inherit;
    }

    /* ここまで背景 */

    h2 {
        margin: 0 auto;
        font-size: 32px;
    }

    /* 花のアイコンの大きさ */
    .flower__left,
    .flower__right {
        width: 40px;
        height: auto;
    }

    /* 花のアイコンからタイトルへの距離 */
    .flower__left {
        margin-right: 0;
    }

    .flower__right {
        margin-left: 0;
    }

    /* ここからお知らせ */

    .news {
        padding: 40px 30px;
    }

    .news__inner {
        position: relative;
    }

    .news__title .flower__left {
        position: absolute;
        left: 0;
        margin-left: 0; /* 左端に配置 */
    }

    .news__title .flower__right {
        position: absolute;
        right: 0;
        margin-right: 0; /* 右端に配置 */
    }

    .news__title {
        text-align: center;
        margin-bottom: 40px;
    }

    .news__container {
        display: block;
        padding: 20px 29px 5px 29px;
    }

    .news__container p {
        margin-top: 5px;
    }

    .news__container p.u-mobile.letter-spacing {
        letter-spacing: 1.7px;
        margin-top: 0;
    }

    /* ここから初めての方へ */

    .first {
        padding: 40px 30px;
    }

    .first__inner {
        position: relative;
    }

    .first__title .flower__left {
        position: absolute;
        left: 0;
        margin-left: 0; /* 左端に配置 */
    }

    .first__title .flower__right {
        position: absolute;
        right: 0;
        margin-right: 0; /* 右端に配置 */
    }

    .first__headline {
        display: block;
    }

    .first__headline .green {
        margin-top: -10px;
        background: linear-gradient(transparent 0 80%, #a6eab7 80% 100%);
        border-bottom: 4px solid #a6eab7;
    }

    .first__title {
        text-align: center;
        white-space: nowrap;
        margin-bottom: 40px;
    }

    .first__feature {
        display: block;
        margin-top: 30px;
    }

    .first__feature figcaption {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .first__feature figcaption.last {
        margin-top: 20px;
        margin-bottom: 0px;
    }

    /* ここからごあいさつ(top) */

    .greet {
        padding: 40px 30px;
    }

    .greet__inner {
        position: relative;
    }

    .greet__title .flower__left {
        position: absolute;
        left: 0;
        margin-left: 0; /* 左端に配置 */
    }

    .greet__title .flower__right {
        position: absolute;
        right: 0;
        margin-right: 0; /* 右端に配置 */
    }

    .greet__title {
        text-align: center;
        margin-bottom: 40px;
    }

    .greet__container {
        display: block;
    }

    .greet__portfolio {
        margin: 0 auto;
    }

    .greet__sentence {
        margin-top: 15px;
        background-color: transparent;
    }

    .greet__button {
        text-align: center;
        margin-top: 20px;
    }

    .greet__button a {
        display: block; /* aタグをブロック要素に */
        width: 100%;
        font-size: 28px;
        letter-spacing: 2.8px;
        padding: 20px 61px 20px 60px;
        white-space: nowrap;
    }

    /* ここからご予約・営業時間 */

    .reservation {
        padding: 40px 30px;
    }

    .reservation__inner {
        position: relative;
    }

    .reservation__title .flower__left {
        position: absolute;
        left: 0;
        margin-left: 0; /* 左端に配置 */
    }

    .reservation__title .flower__right {
        position: absolute;
        right: 0;
        margin-right: 0; /* 右端に配置 */
    }

    .reservation__headline {
        display: block;
    }

    .reservation__title {
        text-align: center;
        margin-bottom: 40px;
        /* white-space: nowrap; */
        font-size: 28px;
        line-height: 1.5;
    }

    .reservation__container {
        display: block;
    }

    .reservation__left {
        display: block;
        align-items: center;
        width: 100%;
        margin-bottom: 25px;
    }

    .reservation__container p {
        width: 100%;
    }

    .reservation__button li {
        width: 100%;
        white-space: nowrap;
    }

    /* ここからアクセス */

    .access {
        padding: 40px 30px;
    }

    .access__inner {
        position: relative;
    }

    .access__title .flower__left {
        position: absolute;
        left: 0;
        margin-left: 0; /* 左端に配置 */
    }

    .access__title .flower__right {
        position: absolute;
        right: 0;
        margin-right: 0; /* 右端に配置 */
    }

    .access__title {
        text-align: center;
        margin-bottom: 40px;
    }

    .access__content {
        display: block;
        align-items: center;
    }

    .access__content p {
        margin-right: 0;
    }

    .access__map {
        width: 100%;
    }

    iframe {
        width: 100% !important;
    }

    /* ここからリンク */

    .link {
        padding: 40px 30px;
    }

    .link__inner {
        position: relative;
    }

    .link__title .flower__left {
        position: absolute;
        left: 0;
        margin-left: 0; /* 左端に配置 */
    }

    .link__title .flower__right {
        position: absolute;
        right: 0;
        margin-right: 0; /* 右端に配置 */
    }

    .link__title {
        text-align: center;
        margin-bottom: 40px;
    }

    .link__content {
        display: block;
    }

    .link__josanin {
        margin-bottom: 50px;
        margin-right: auto;
        margin-left: auto;
    }

    .link__josanin figcaption {
        white-space: nowrap;
    }

    .link__content u-mobile {
        display: block;
        align-items: center;
    }

    .link__content p {
        font-size: 18px;
        letter-spacing: 1.8px;
        line-height: 20px;
    }

    .link__content p + p {
        margin-top: 18px;
    }

    /* ここからフッター */

    .footer {
        clear: both; /* floatの影響を受けないようにする */
        /* margin-top: 20px; 上に余白を追加 */
    }
}

/* ===============
ここから下層ページレスポンシブ
=============== */

@media screen and (max-width: 767px) {
    /* .greet2__inner{
        max-width: 315px;
    } */

    .greet2__title {
        text-align: center;
    }

    .greet2__uuper {
        display: block;
        margin-top: 40px;
    }

    .greet2__portfolio {
        margin: 0 auto;
        margin-bottom: 34px;
    }

    .greet2__portfolio img {
        display: block;
        /* margin: 0 auto; */
        width: 150px;
        height: auto;
        margin-left: initial;
    }

    .greet2__portfolio figure {
        display: flex;
        flex-direction: column; /* 垂直方向に子要素を並べる */
        align-items: center; /* 中央揃え */
        margin: 0; /* デフォルトのマージンをリセット */
    }

    .greet2__portfolio figcaption {
        text-align: center; /* figcaption内のテキストを中央揃え */
        margin-top: 20px; /* 画像とキャプションの間のスペース */
        margin-left: initial;
    }

    .greet2__sentence1 {
        width: 315px;
        height: auto;
        padding: 10px 5px;
        margin: 0 auto;
    }

    .greet2__sentence2 {
        width: 315px;
        height: auto;
        padding: 10px 5px;
        margin: 0 auto;
    }

    .greet2__sentence1::before {
        /* content: ""; */
        display: block;
        background-color: #fcfcfc; /* 背景色を設定 */
        padding: 10px 5px; /* 必要に応じてパディングを調整 */
        border-radius: 15px; /* 必要に応じて角を丸くする */
        margin-bottom: 15px; /* 要素間のスペースを調整 */
    }

    .greet2__sentence2::before {
        content: none;
    }

    .greet2__sentence1,
    .greet2__sentence2 {
        position: relative; /* 擬似要素を親要素に相対的に配置 */
        width: 315px;
        height: auto;
    }

    .greet2__content {
        width: 315px;
        padding: 27px 6px 26px 6px;
        margin-bottom: 60px;
        margin-top: 60px;
    }

    .greet2__subtitle {
        font-size: 32px;
        padding-bottom: 27px;
        border-bottom: 5px dotted #000000;
        width: 305px;
        margin-bottom: 27px;
    }

    .greet2__history {
        display: inline-block;
    }

    .greet2__history p {
        margin-right: 149px;
        margin-left: 6px;
        margin-bottom: 26px;
        white-space: nowrap; /* 改行を防ぐ */
    }

    .greet2__history ul {
        margin-bottom: 18px;
    }

    .greet2__history li:not(:last-of-type) {
        margin-bottom: 26px;
    }

    .greet2__history li:nth-of-type(3) {
        margin-bottom: 6px;
    }

    .greet2__qualification {
        display: inline-block;
        border-top: 2px dotted #000000;
        width: 305px;
        padding-top: 27px;
    }

    .greet2__qualification p {
        margin-right: 245px;
        margin-left: 6px;
        margin-bottom: 26px;
        white-space: nowrap; /* 改行を防ぐ */
    }

    .greet2__qualification li {
        font-size: 16px;
    }

    .greet2__qualification li:not(:last-of-type) {
        margin-bottom: 23px;
    }

    .greet2__container {
        padding: 30px 0;
        margin-bottom: 40px;
        margin: 0 auto;
        background-color: transparent;
    }

    .greet2__container-mobile-1,
    .greet2__container-mobile-2 {
        background-color: #fcfcfc;
        margin-inline: 30px;
        border-radius: 15px;
        padding: 30px 1px 
    }

    .greet2__container1title {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 40px;
        text-align: center;
        margin-left: initial;
    }

    .greet2__container1 {
        display: block;
        margin-bottom: 40px;
    }

    .greet2__container1 div {
        width: 305px;
        /* background-color: #fcfcfc; */
        border-radius: 15px;
        height: auto;
        margin: 0 auto;
        /* padding: 30px 5px; */
    }

    div .greet2__container1-img.u-mobile,
    div .greet2__container2-img.u-mobile {
        border-radius: 15px;
        margin-inline: 30px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    div .greet2__container1-img.u-mobile img,
    div .greet2__container2-img.u-mobile img {
        width: 100%;
    }

    .greet2__container1 img {
        width: 305px;
        height: auto;
        margin: 0 auto;
        background-color: transparent;
    }

    .greet2__container2title {
        font-size: 24px;
        line-height: 30px;
        white-space: nowrap; /* 改行を防ぐ */
        text-align: center;
        margin-bottom: 40px;
        margin-left: initial;
    }

    .greet2__container2 {
        display: block;
        align-items: center;
        position: relative;
    }

    .greet2__container2 div.text-wrapper {
        width: 305px;
        background-color: #fcfcfc;
        border-radius: 15px;
        height: auto;
        margin: 0 auto;
        padding: 30px 5px;
    }

    .greet2__container2 > div:first-child {
        float: left;
        width: 100%; /* 幅を100%に設定 */
        margin-bottom: 20px; /* 下に余白を追加 */
    }

    .greet2__container2.u-mobile {
        float: left;
        width: 100%;
    }

    .greet2__container2 img {
        width: 305px;
        height: auto;
        margin: 0 auto;
    }

    .greet2__container2 p {
        margin-bottom: 20px; /* pタグの下にスペースを追加 */
    }

    .greet2__container2 u-mobile {
        background-color: transparent;
    }
}