@charset "utf-8";

/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("theme.css");
@import url("inview.css");

/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
    0% {
        right: -200px;
    }
    100% {
        right: 0px;
    }
}

/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*全体の設定
---------------------------------------------------------------------------*/
body * {
    box-sizing: border-box;
}
html {
    font-size: clamp(14px, 0.29vw + 11.9px, 16px); /*基準フォント。最小14px〜最大16pxに可変（14px未満にしない）。下でrem管理しているものも連動します。*/
    overflow-x: visible;
}
body {
    margin: 0;
    padding: 0;
    font-family: var(--base-font); /*フォント指定。theme.cssのbase-fontを読み込みます。*/
    -webkit-text-size-adjust: none;
    background: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/
    color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
    line-height: 2; /*行間*/
    overflow-x: hidden;
}

/*リセット*/
figure {
    margin: 0;
}
dd {
    margin: 0;
}
nav,
ul,
li,
ol {
    margin: 0;
    padding: 0;
}
nav ul {
    list-style: none;
}

/*table全般の設定*/
table {
    border-collapse: collapse;
}

/*画像全般の設定*/
img {
    border: none;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/*videoタグ*/
video {
    max-width: 100%;
}

/*iframeタグ*/
iframe {
    width: 100%;
}

/*他*/
input {
    font-size: 1rem;
}

/*section
---------------------------------------------------------------------------*/
section {
    padding: 0 var(--content-space-l); /*上下、左右へのsection内の余白。左右については、theme.cssの--content-space-lを読み込みます。*/
    margin: var(--content-space-l) 0; /*上下、左右へのsectionの外側にとるマージン。上下については、theme.cssの--content-space-lを読み込みます。*/
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
    color: inherit;
    transition: 0.3s; /*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
    filter: brightness(1.1); /*少しだけ明るくする*/
    text-decoration: none;
}

/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
    animation: opa1 0.2s 0.2s both; /*0.2(2つ目の数字)秒待機後、0.2(1つ目の数字)秒かけてフェードイン*/
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダー*/
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem; /*ロゴとメニューブロックの間に空けるスペース。2文字分。*/
    height: 100px; /*ヘッダーの高さ。お好みで。*/
    padding-inline: var(--content-space-s); /*左右の余白。theme.cssのcontent-space-sを読み込みます*/
}

/*ロゴ画像*/
header .logo {
    margin: 0;
    flex-shrink: 0;
}
header .logo img {
    display: block;
    width: 250px; /*ロゴの幅。お好みで。*/
}

/*メニューオーバーレイ（メニュー領域外クリックで閉じる用）
---------------------------------------------------------------------------*/
#menubar-overlay {
    display: none;
    position: fixed;
    z-index: 99; /*#menubar(100)の下、ページの上*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /*半透明の黒。お好みで濃さを調整。*/
}

/*noscroll（メニュー表示中のスクロール禁止用）*/
body.noscroll {
    overflow: hidden;
}

/*大きな端末で見たメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar > nav > ul {
    display: flex;
    gap: 1.5rem; /*メニュー同士に空けるスペース。1.5文字分。*/
    font-size: max(14px, 0.8rem); /*文字サイズ80%*/
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li a {
    display: block;
    text-decoration: none;
}

/*大きな端末で見た場合のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウン全体*/
.large-screen #menubar ul ul {
    text-shadow: none;
    position: absolute;
    z-index: 100;
    animation: opa1 0.5s 0.1s both; /*0.1秒待機後、0.5秒かけてフェードイン表示*/
}

/*メニュー１個あたり*/
.large-screen #menubar ul ul a {
    background: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。。*/
    color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
    padding: 0.2rem 1rem; /*上下に0.2文字分、左右に1文字分の余白*/
    border-radius: 100px; /*角を丸く。大きければ適当でOK。*/
    margin-top: 5px; /*メニュー同士の間に空けるスペース*/
    border: 1px solid var(--bg-border-color); /*枠線の幅、線種、最後は色の指定でtheme.cssのbg-border-colorを読み込みます。。*/
}

/*小さな端末で見たメニュー（開閉メニュー）
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
    animation: animation1 0.2s both;
    position: fixed;
    overflow: auto;
    z-index: 100;
    right: 0px;
    top: 0px;
    width: 50%; /*画面の半分の幅*/
    height: 100%;
    padding: 100px var(--content-space-l) 50px; /*上下に100px、左右にtheme.cssのcontent-space-lで指定しているサイズ、下に50pxの余白*/
    background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

.small-screen #menubar {
    display: none;
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    .small-screen #menubar {
        width: 100%; /*幅を100%に*/
    }
} /*追加指定ここまで*/

/*メニュー１個あたり*/
.small-screen #menubar a {
    display: block;
    text-decoration: none;
    margin-bottom: 1rem; /*下に１文字分のスペースを空ける*/
    padding: 1rem 2rem; /*メニュー内の余白。上下に１文字分、左右に２文字分。*/
    border-radius: 5px; /*角を少し丸くする*/
    background: #fff;
    color: #333;
}

/*子メニュー（ドロップダウンメニュー）*/
.small-screen #menubar ul ul a {
    margin-left: 2rem; /*左に２文字分のスペースを空ける*/
    padding: 0.5rem 1.5rem; /*メニュー内の余白。上下に0.5文字分、左右に1.5文字分。*/
}

/*ドロップダウンのアイコン*/
a.ddmenu::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f078"; /*このアイコンを使う*/
    margin-right: 1em; /*アイコンとメニューテキストとの間に空けるスペース。1文字分。*/
    font-size: max(14px, 0.7em); /*アイコンサイズ。70%*/
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}

/*ドロップダウン共通（デフォルトで非表示。チラつかないよう念の為。）
---------------------------------------------------------------------------*/
#menubar ul ul {
    display: none;
}

/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
    display: none; /* デフォルトは非表示 */
    animation: opa1 0s 0.2s both;
    cursor: pointer;
    position: fixed;
    z-index: 101;
    right: 0px; /*右からの配置場所*/
    top: 0px; /*上からの配置場所*/
    width: 70px; /*ボタンの幅*/
    height: 70px; /*ボタンの高さ*/
    border-bottom-left-radius: 10px; /*左下の角だけ丸くする*/
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
    display: block;
    transition: 0.3s;
    position: absolute;
    left: 18px;
    width: 35px;
    height: 1px; /*線の高さ*/
    background: var(--bg-inverse-color); /*線の色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
    background: #fff; /*背景色*/
}
#menubar_hdr.ham span {
    background: #333; /*線の色*/
}

/*以下変更不要*/
#menubar_hdr span:nth-of-type(1) {
    top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
    top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
    top: 44px;
}
#menubar_hdr.ham span:nth-of-type(1) {
    transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
    opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
    transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
    display: flex;
}

/*メイン画像
---------------------------------------------------------------------------*/
.mainimg * {
    margin: 0;
    padding: 0;
}
.mainimg .slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

/*メイン画像ブロック全体*/
.mainimg {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    .mainimg {
        display: flex;
        flex-direction: column-reverse; /*縦積み。上下を入れ替える。*/
    }
} /*追加指定ここまで*/

/*3枚の画像を入れるボックス*/
.mainimg .image {
    position: relative;
}

/*３枚の画像の共通設定*/
.mainimg .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s; /*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
    overflow: hidden;
}

/*１枚目画像（変更不要）*/
.mainimg .img1 {
    position: relative;
    width: 100%;
    height: auto;
}

/*画像全般（変更不要）*/
.mainimg .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /*画像をコンテナのサイズに合わせてクリップ*/
    object-position: center; /*画像の中心を基準に*/
    transform: scale(1); /*開始時点での画像サイズ。100%。*/
    transform-origin: center;
    will-change: transform;
}

/*徐々に拡大*/
.mainimg .slide.zoom img {
    transform: scale(1.07); /*終了時点での画像サイズ。107%。*/
}

/*メイン画像全体に重ねる装飾シルエット（bg1.svg）*/
.mainimg .mainimg-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    /*縦積みになるので装飾シルエットは非表示に*/
    .mainimg .mainimg-shape {
        display: none;
    }
} /*追加指定ここまで*/

/*テキストブロック（写真の上に重ねる）*/
.mainimg .text {
    position: absolute;
    left: 0px;
    width: 35%; /*テキストブロックの幅。SVGの白い面の幅とのバランスで調整。*/
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding-left: 5vw; /*左に5%の余白をあける*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    /*テキストブロックは写真の下に通常配置で並べる*/
    .mainimg .text {
        position: static;
        width: 100%;
        padding: 1rem;
        align-items: center;
        text-align: center;
    }
} /*追加指定ここまで*/

/*見出し*/
.mainimg .text h1 {
    font-weight: normal;
    font-size: max(18px, 3vw); /*文字サイズ。18pxより小さくならない。3は可変サイズなのでお好みで。*/
    line-height: 1.5; /*行間を狭く*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    /*見出しの改行を無効にして１行にする*/
    .mainimg .text h1 br {
        display: none;
    }
} /*追加指定ここまで*/

/*説明文*/
.mainimg .text p {
    font-size: max(14px, 0.8rem); /*文字サイズ80%*/
}

/*マップ画像*/
.mainimg .map {
    display: block;
    margin: 0 auto;
    width: 80%; /*幅*/
}

/*メイン画像上の縦書きテキスト*/
.mainimg .mainimg-text {
    position: absolute;
    right: 5vw; /*右からの配置場所。画面幅100%=100vw。*/
    top: 5vw; /*上からの配置場所。画面幅に合わせて移動したいので、vhじゃなくvwにしています。*/
    z-index: 3;
    writing-mode: vertical-rl;
    text-orientation: upright;
}
.mainimg .mainimg-text p {
    margin: 10px; /*各行の外側に空けるスペース*/
}
.mainimg .mainimg-text p:last-child {
    margin-top: 40px; /*2行目だけ、上のスペースを広くする*/
}
.mainimg .mainimg-text span {
    display: inline-block;
    font-size: max(14px, 0.8rem); /*文字サイズ80%*/
    line-height: 1; /*行間*/
    letter-spacing: 0.2em; /*文字間隔を少し広く*/
    padding: 1rem 0.6rem; /*余白。黒帯と文字のバランス。*/
    background: #fff; /*背景色*/
    color: #333; /*文字色*/
}

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.mainimg .slide-indicators {
    text-align: center;
    position: absolute;
    z-index: 3;
    width: 100%;
    bottom: 2vw; /*ボタンの配置場所*/
    left: 0px;
}
/*１個あたり*/
.mainimg .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc; /*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.mainimg .indicator.active {
    background: #d00000; /*アクティブ時のボタン色*/
}

/*contents
---------------------------------------------------------------------------*/
#contents {
    flex: 1;
    min-height: 0;
}

/*main
---------------------------------------------------------------------------*/
main {
    container-type: inline-size;
}

/*h2見出し*/
main h2 {
    color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*補足用*/
main h2 .hosoku {
    display: block;
    font-size: max(14px, 0.6em); /*文字サイズ。親要素の60%*/
    color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
    opacity: 0.6; /*透明度。色が60%出た状態。*/
}

/*縦書き用*/
main h2.tate {
    writing-mode: vertical-rl;
    text-orientation: upright;
    width: fit-content;
    margin: 0 auto;
    letter-spacing: 0.1em; /*文字間隔を少し広く*/
    margin-bottom: 1rem; /*下に空けるスペース。1文字分。*/
}

/*main内で使用するul,ol要素（リストタグ）*/
main ul,
main ol {
    margin-left: 2rem;
    margin-right: 2rem;
}

/*grid1（「さんぷるみさきエリアについて」ブロック）
---------------------------------------------------------------------------*/
.grid1 * {
    margin: 0;
    padding: 0;
}

/*ブロック全体*/
.grid1 {
    display: grid;
    grid-template-columns: 28% minmax(0, 1fr) 28%; /*左が28%、右が28%、中央は残りを使う*/
    gap: 2rem; /*中のボックス同士に空けるスペース。2文字分。*/
    align-items: center; /*天地中央*/
    text-align: center; /*テキストをセンタリング*/
}

/*画像ブロック共通*/
.grid1 .image1,
.grid1 .image2 {
    position: relative;
}

/*テキストブロック*/
.grid1 .text {
    display: flex;
    flex-direction: column; /*縦積み*/
    gap: 2rem; /*テキストブロック直下のブロック同士に空けるスペース。2文字分。*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    /*ブロック全体*/
    .grid1 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /*２列に*/
        grid-template-areas:
            "img1 img2" /*１行目：「img1」と「img2」を左右に並べる*/
            "text text"; /*２行目：「text」を２マス分まとめて配置*/
    }

    .grid1 .image1 {
        grid-area: img1;
    } /*1枚目画像 → 上の「img1」エリアへ*/
    .grid1 .text {
        grid-area: text;
    } /*テキスト →上の「text」エリアへ*/
    .grid1 .image2 {
        grid-area: img2;
    } /*2枚目画像 →上の「img2」エリアへ*/

    /*画像ブロックの幅を少し狭く（画像を小さくするため）*/
    .grid1 .image1,
    .grid1 .image2 {
        width: 70%; /*幅。お好みで。*/
        justify-self: center;
    }
} /*追加指定ここまで*/

/*.textブロック内の３カラムブロック*/
.grid1 .column {
    display: flex;
    font-size: max(14px, 0.8rem); /*文字サイズ80%*/
}

/*.textブロック内の３カラムブロック直下のdiv*/
.grid1 .column > div {
    flex: 1;
    min-width: 0;
    padding-inline: 1rem; /*左右に1文字分の余白*/
}
/*最後のdiv以外に、右側に線を入れる*/
.grid1 .column > div:not(:last-child) {
    border-right: 1px solid var(--bg-border-color);
}

/*アイコン*/
.grid1 .column i {
    font-size: 2rem; /*アイコンサイズ*/
    color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*.image1の装飾画像*/
.grid1 .image1 .kazari {
    position: absolute;
    left: -2vw; /*左からの配置。マイナスがついているので本来の向きと逆に。*/
    top: -2vw; /*上からの配置。マイナスがついているので本来の向きと逆に。*/
    width: 50%; /*画像幅*/
    z-index: 1;
}

/*.image2の装飾画像*/
.grid1 .image2 .kazari {
    position: absolute;
    right: 0; /*右からの配置。*/
    top: -2vw; /*上からの配置。マイナスがついているので本来の向きと逆に。*/
    width: 50%; /*画像幅*/
    z-index: 1;
}

/*grid1内の画像（マスク適用先・基本スタイル）*/
.grid1 .image {
    aspect-ratio: 1 / 1; /*アスペクト比1:1の正方形*/
}
.grid1 .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* マスク対応ブラウザだけ「切り抜き」に切り替え */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .grid1 .image.mask1,
    .grid1 .image.mask2 {
        overflow: hidden;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 100% 100%;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100% 100%;
        /* 明示的に透過（アルファ）でマスクする指定を追加 */
        -webkit-mask-source-type: alpha;
        mask-mode: alpha;
    }

    .grid1 .image.mask1 {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='black' d='M100.9,51c-61.3,36.3-47.4,92.5-66.1,142.8-18.7,50.3-62.8,141.6,85.9,251.6,148.8,110,304.1-5.9,335-64.4,30.9-58.5,25.3-113.5,32-141.6,6.6-28.1,20.9-80.8-17.6-126.4s-83.2-49.1-104.8-58.3-19.3-41.3-59.4-43.5c-56.1-3.1-84.8,24.6-102.5,24.6s-45.2-18.7-102.5,15.2Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='black' d='M100.9,51c-61.3,36.3-47.4,92.5-66.1,142.8-18.7,50.3-62.8,141.6,85.9,251.6,148.8,110,304.1-5.9,335-64.4,30.9-58.5,25.3-113.5,32-141.6,6.6-28.1,20.9-80.8-17.6-126.4s-83.2-49.1-104.8-58.3-19.3-41.3-59.4-43.5c-56.1-3.1-84.8,24.6-102.5,24.6s-45.2-18.7-102.5,15.2Z'/%3E%3C/svg%3E");
    }

    .grid1 .image.mask2 {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='black' d='M100.5,52C14.2,117.7,4.6,265.1,24.5,308.7c19.9,43.6,43.6,53.6,53.6,68.5,10,15,29.9,98.4,150.8,113.4s245.5-53.6,260.4-118.4-10-72.3-12.5-98.4c-2.5-26.2,32.4-97.2-8.7-153.3s-89.7-57.3-147-73.5c-57.3-16.2-110.9-78.5-220.5,5Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='black' d='M100.5,52C14.2,117.7,4.6,265.1,24.5,308.7c19.9,43.6,43.6,53.6,53.6,68.5,10,15,29.9,98.4,150.8,113.4s245.5-53.6,260.4-118.4-10-72.3-12.5-98.4c-2.5-26.2,32.4-97.2-8.7-153.3s-89.7-57.3-147-73.5c-57.3-16.2-110.9-78.5-220.5,5Z'/%3E%3C/svg%3E");
    }
} /*追加指定ここまで*/

/*list1にlist-autoを付けた時：サムネイル横スライドショー化
---------------------------------------------------------------------------*/
/*ブロック全体（gridを解除して横スクロール表示に切り替え）*/
.list1.list-auto {
    display: block; /*.list1のgridを解除*/
    overflow-x: hidden;
    padding-bottom: 50px; /*下に空けるスペース。インジケーター分の確保です。*/
    position: relative;
}

/*画像たちを囲むブロック（JSが自動挿入）*/
.list1.list-auto .img {
    display: flex;
}

/*１個あたりのボックス：4列で表示する為の指示*/
.list1.list-auto .list {
    flex: 0 0 23%; /*４枚表示する為には25%指定だが、左右のマージン分（計2%）を差し引く。*/
    max-width: 23%; /*上記と同じ内容だが念の為追加*/
    margin: 0 1%; /*左右へのマージン*/
}

/*画面幅800px以下の追加指定*/
@media screen and (max-width: 800px) {
    /*2列配置に変更する*/
    .list1.list-auto .list {
        flex: 0 0 48%;
        max-width: 48%;
    }
} /*追加指定ここまで*/

/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体（JSが自動挿入）*/
.list1.list-auto .slide-indicators-parts {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 0px; /*下からのボタンの配置場所*/
    left: 0px;
}

/*１個あたり*/
.list1.list-auto .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc; /*未アクティブ時のボタン色*/
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

/*アクティブボタン色*/
.list1.list-auto .indicator.active {
    background: var(--primary-color); /*アクティブ時のボタン色。theme.cssのprimary-colorを読み込みます。*/
}

/*bg1-primary-partsの上でのアクティブボタン色*/
.bg1-primary-parts .list1.list-auto .indicator.active {
    background: var(--primary-inverse-color); /*アクティブ時のボタン色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*list1（「おすすめスポット」ブロックと、「さんぷるみさきの味覚と体験」ブロックで使用）
---------------------------------------------------------------------------*/
.list1 * {
    margin: 0;
    padding: 0;
}

/*ボックス全体*/
.list1 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /*4列*/
    gap: 1.5rem; /*ボックス同士の間に空けるスペース。1.5文字分。*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    .list1 {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /*2列*/
    }
} /*追加指定ここまで*/

/*ボックス１個あたり*/
.list1 .list {
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /*ボックスの影。右へ0、下へ0、ぼかす量は5px。0,0,0は黒のことで0.2は20%色が出た状態。*/
    background: #fff; /*背景色*/
    color: #333; /*文字色*/
    border-radius: 10px; /*角を丸くする*/
    overflow: hidden;
}

/*画像ブロック*/
.list1 .image {
    position: relative;
}
.list1 .image a img {
    transition: 0.5s; /*マウスオンにかける時間。0.5秒。*/
}
.list1 .image a:hover img {
    transform: scale(1.05); /*マウスオン時の拡大率。105%。*/
}

/*テキストボックス*/
.list1 .list .text {
    flex: 1;
    min-width: 0;
    padding: 1rem; /*ボックス内の余白。1文字分。*/
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /*画像とテキストブロックの間にとる余白。0.5文字分。*/
}

/*説明だけ小さめにする*/
.list1 .list p {
    font-size: max(14px, 0.75em); /*文字サイズ。75%。*/
    line-height: 1.5; /*行間*/
}

/*.list1用のアイコン
---------------------------------------------------------------------------*/
/*icon1*/
.list1 .icon1 {
    display: block;
    pointer-events: none;
    font-size: max(14px, 0.7rem); /*文字サイズ70%*/
    text-align: center;
    position: absolute;
    border-radius: 999px; /*カプセル型にする。適当に数字が大きければOK。*/
    left: 5px; /*ボックスの左からの配置*/
    top: 5px; /*ボックスの上からの配置*/
    padding: 0 0.5rem; /*アイコン内の余白。上下は0、左右に0.5文字分。*/
    background: #fff; /*背景色*/
    color: #333; /*文字色*/
}

/*icon2*/
.list1 .icon2 {
    display: block;
    pointer-events: none;
    text-align: center;
    border-radius: 999px; /*カプセル型にする。適当に数字が大きければOK。*/
    background: var(--light-color); /*背景色。theme.cssのlight-colorを読み込みます。*/
    color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
    width: 60px; /*幅。*/
    line-height: 60px; /*高さ。*/
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px; /*本来の場所より下にずらす*/
    font-size: 24px; /*アイコンサイズ*/
}

/*「四季の見どころ」セクションの背景画像（波の画像）
---------------------------------------------------------------------------*/
.kazari3 {
    background: url("../images/kazari3.webp") no-repeat center top / 100%;
    margin-top: -5vw;
    padding-top: 5vw;
}

/*effects-overlay（「四季の見どころ」ブロック）
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.effects-overlay .list {
    position: relative;
    overflow: hidden;
    margin-bottom: 1px; /*下に1pxのスペース*/
}

/*テキストブロック*/
.effects-overlay .text {
    position: relative;
    z-index: 1;
    color: #fff; /*文字色*/
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); /*文字の影。右へ、下へ、ぼかす量、0,0,0は黒のことで0.5は色が50%出た状態。*/
    padding: 5vw; /*余白。画面はば100% = 100vwです。*/
    width: 50%; /*幅*/
}

/*画面幅600px以下の追加指定*/
@media (max-width: 600px) {
    /*テキストブロック*/
    .effects-overlay .text {
        width: 100%; /*幅*/
    }
} /*追加指定ここまで*/

/*逆向き（テキスト右配置）*/
.effects-overlay .list.reverse .text {
    margin-left: auto;
}

/*h4見出し*/
.effects-overlay .text h4 {
    font-family: var(--accent-font), var(--base-font); /*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
    font-size: max(24px, 7vw);
    font-weight: normal; /*デフォルトの太字を標準に*/
    margin-top: 0;
    margin-bottom: 2rem;
}

/*段落（p）*/
.effects-overlay .text p {
}

/*1つ目（春）の背景画像*/
.effects-overlay .image1 {
    background: url("../images/season-spring.jpg") no-repeat center center / cover;
}

/*2つ目（夏）の背景画像*/
.effects-overlay .image2 {
    background: url("../images/season-summer.jpg") no-repeat center center / cover;
}

/*3つ目（秋）の背景画像*/
.effects-overlay .image3 {
    background: url("../images/season-autumun.jpg") no-repeat center center / cover;
}

/*4つ目（冬）の背景画像*/
.effects-overlay .image4 {
    background: url("../images/season-winter.jpg") no-repeat center center / cover;
}

/*マウスオン用のアニメーション*/
.effects-overlay .list::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); /*写真に重ねておく半透明の黒い色。0,0,0は黒のことで0.6は色が60%出た状態。*/
    transition: transform 0.3s 0.1s; /*アニメーションの速度（0.3秒）と待機時間（0.1秒）。*/
}
.effects-overlay .list:hover::before {
    transform: translateX(100%); /*マウスオンで半透明の黒を右側へ出す*/
}
.effects-overlay .list.reverse:hover::before {
    transform: translateX(-100%); /*マウスオンで半透明の黒を左側へ出す*/
}

/*おすすめモデルコースブロック
---------------------------------------------------------------------------*/
#course {
    background-image: url("../images/map1.webp");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 30%;
    padding-right: 30%;
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    #course {
        background: none;
        padding-right: var(--content-space-l);
    }
} /*追加指定ここまで*/

/*list2（「おすすめモデルコース」ブロック）
---------------------------------------------------------------------------*/
.list2 * {
    margin: 0;
    padding: 0;
}

/*ボックス全体*/
.list2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /*4列*/
    gap: 5rem; /*ボックス同士の間に空けるスペース。5文字分。*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    .list2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /*2列*/
        gap: 1rem;
    }
} /*追加指定ここまで*/

/*時刻*/
.list2 .time {
    background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
    border-radius: 999px; /*角を丸く（カプセル型）する。大きければ適当でOK。*/
    width: fit-content;
    margin: 0 auto 1rem; /*最後の1remは、時刻とその下の写真との間に空けるスペースです。1文字分。*/
    padding: 0 1rem; /*時刻ボックス内の余白。上下は0で左右に1文字分。*/
}

/*画像ブロック*/
.list2 .image {
    border-radius: 10px; /*角を丸く*/
    overflow: hidden;
}

/*h4見出し*/
.list2 h4 {
    color: var(--primary-color); /*文字色。theme.cssのprimary-colorを読み込みます。*/
}

/*文章*/
.list2 .text p {
    font-size: max(14px, 0.8em); /*文字サイズ。親要素の80%。*/
    line-height: 1.5; /*行間*/
}

/*最後のリスト以外に「人物」アイコンを入れる*/
.list2 > div:not(:last-child)::after {
    font-family: "Font Awesome 6 Free";
    content: "\f554"; /*Font Awesomeのこのマークを表示させます*/
    font-weight: 900;
    position: absolute;
    right: -4rem;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-color);
    opacity: 0.5; /*色を50%だけ出す*/
    line-height: 1;
    font-size: 2.4rem;
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    .list2 > div:not(:last-child)::after {
        content: ""; /*アイコンを消す*/
    }
} /*追加指定ここまで*/

/*アクセス情報ブロック
---------------------------------------------------------------------------*/
/*ブロック全体*/
#access {
    background-image: url("../images/map1.webp"); /*背景画像（地図）の読み込み*/
    background-repeat: no-repeat;
    background-position: left center; /*左側、上下中央に配置*/
    background-size: 30%; /*幅*/
    padding-left: 30%; /*ブロックの左側に空けるスペース*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    #access {
        background: none; /*背景を非表示に*/
        padding-left: var(--content-space-l);
    }
} /*追加指定ここまで*/

/*list3（アクセス情報ブロック内の３段ブロック）
---------------------------------------------------------------------------*/
.list3 * {
    margin: 0;
    padding: 0;
}

/*ブロック全体*/
.list3 {
    border: 1px solid var(--bg-border-color); /*枠線の幅、線種、色はtheme.cssのbg-border-colorを読み込みます。*/
    border-radius: 10px; /*角を丸くする*/
}

/*３つのブロック*/
.list3 > div {
    padding-block: 1rem; /*上下に1文字分の余白。*/
    display: flex;
    align-items: center;
    gap: 1rem;
}

/*３つのブロックのうち、最後のブロック以外に、下線を入れる*/
.list3 > div:not(:last-child) {
    border-bottom: 1px solid var(--bg-border-color);
}

/*アイコンを入れているボックス*/
.list3 .image {
    width: 6rem; /*幅。6文字分。*/
    text-align: center;
    border-right: 1px solid var(--bg-border-color); /*右側の線の幅、線種、色はtheme.cssのbg-border-colorを読み込みます。*/
}

/*アイコン*/
.list3 i {
    font-size: 3rem; /*アイコンのサイズ*/
    color: var(--primary-color); /*アイコンの色。theme.cssのprimary-colorを読み込みます。*/
    opacity: 0.7; /*色を70%だけ出す*/
}

/*テキストブロック*/
.list3 .text {
    flex: 1;
    min-width: 0;
}
/*説明文*/
.list3 .text p {
    font-size: max(14px, 0.8em); /*文字サイズ。親要素の80%。*/
}

/*「旅のご相談・資料請求はこちら」ブロック
---------------------------------------------------------------------------*/
#contact * {
    margin: 0;
    padding: 0;
}

/*ブロック全体*/
#contact {
    background: url("../images/contact-bg.svg") no-repeat center bottom / cover; /*背景画像の読み込み。下寄せにして家・木が隠れないように*/
    padding-block: var(--content-space-l); /*上下の余白。theme.cssのcontent-space-lを読み込む。*/
}

/*テキストブロック*/
#contact .text {
    background: #fff; /*背景色*/
    border-radius: 5vw 5vw 0 5vw; /*角を丸くする。左上、右上、右下、左下。右下だけ角をなくして吹き出し風に。*/
    padding: 3vw 5vw; /*上下、左右への余白。*/
    width: 50%; /*ブロック幅*/
}

/*画面幅700px以下の追加指定*/
@media (max-width: 700px) {
    #contact .text {
        width: 88%; /*ブロック幅*/
        padding: 7vw 6vw; /*縦方向の余白を広めに確保*/
    }
} /*追加指定ここまで*/

/*form-simple
---------------------------------------------------------------------------*/
.contact-form-block {
    width: 100%;
}

.form-global-error {
    border: 1px solid #f0c2c2;
    background: #fff4f4;
    color: #9b2e2e;
}

.js-ajax-form[hidden] {
    display: none !important;
}

.form-row + .form-row {
    margin-top: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.55rem;
    font-weight: 700;
    color: #1f2947;
    line-height: 1.5;
}

.required-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: max(14px, 0.72rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #fff;
    background: #d94c4c;
    vertical-align: middle;
}

.contact-form-inner input[type="text"],
.contact-form-inner input[type="email"],
.contact-form-inner input[type="file"],
.contact-form-inner select,
.contact-form-inner textarea {
    width: 100%;
    appearance: none;
    border: 1px solid #d6dbeb;
    border-radius: 16px;
    padding: 0.95rem 1rem;
    background: #fff;
    font: inherit;
    line-height: 1.6;
    color: #222;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
    box-sizing: border-box;
}

.contact-form-inner input[type="file"] {
    padding: 0.8rem 1rem;
    cursor: pointer;
}

.contact-form-inner input[type="file"]::file-selector-button {
    margin-right: 0.9rem;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    background: #eef2ff;
    color: #2f55d4;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.contact-form-inner textarea {
    resize: vertical;
    min-height: 12em;
}

.contact-form-inner input[type="text"]:focus,
.contact-form-inner input[type="email"]:focus,
.contact-form-inner input[type="file"]:focus,
.contact-form-inner select:focus,
.contact-form-inner textarea:focus {
    outline: none;
    border-color: #5d7bff;
    box-shadow: 0 0 0 4px rgba(93, 123, 255, 0.12);
}

.select-inline-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.select-inline {
    width: 100%;
}

.check-group,
.radio-group {
    display: grid;
    gap: 0.7rem;
}

.check-item,
.radio-item,
.check-single {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.6;
}

.check-item input,
.radio-item input,
.check-single input {
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.form-help-text,
.form-file-reset-text {
    margin: 0.45rem 0 0;
    font-size: max(14px, 0.92rem);
    line-height: 1.6;
}

.form-row.is-error input[type="text"],
.form-row.is-error input[type="email"],
.form-row.is-error input[type="file"],
.form-row.is-error select,
.form-row.is-error textarea {
    border-color: #d94c4c;
    background: #fff8f8;
}

.form-row.is-error .form-label,
.form-row.is-error .check-single,
.form-row.is-error .check-item,
.form-row.is-error .radio-item {
    color: #972f2f;
}

.form-error-text {
    margin: 0.45rem 0 0;
    font-size: max(14px, 0.92rem);
    line-height: 1.6;
    color: #b23838;
}

.form-actions {
    margin-top: 1.8rem;
    text-align: center;
}

/*個人情報保護方針への同意テキスト*/
.privacy-note {
    margin-top: 1.5rem;
    font-size: max(14px, 0.9rem);
}
.privacy-note a {
    color: var(--primary-color);
    text-decoration: underline;
}

/*送信ボタン*/
.submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13em;
    min-height: 56px;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, #2f55d4 0%, #5d7bff 100%);
    color: #fff;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease,
        box-shadow 0.2s ease;
    box-shadow: 0 12px 24px rgba(47, 85, 212, 0.18);
}

.submit-button:hover {
    transform: translateY(-1px);
}

.submit-button:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 767px) {
    .contact-form-inner {
        border-radius: 22px;
    }

    .select-inline-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .js-date-select-group[data-date-mode="ymd"] .select-inline-group {
        grid-template-columns: 1fr;
    }

    .submit-button {
        width: 100%;
        min-width: 0;
    }
}

/*郵便番号・都道府県はPCで少し短くする*/
@media (min-width: 768px) {
    .h-adr input[name="postal_code"],
    .h-adr input[name="address_pref"] {
        width: min(100%, 10rem);
    }
}

/*プルダウンを見た目でわかりやすくする*/
.h-adr select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 0.8rem auto;
    cursor: pointer;
}

/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news * {
    margin: 0;
    padding: 0;
}

/*日付*/
dl.news dt {
    display: flex;
}

/*アイコン*/
dl.news dt span {
    display: inline-block;
    line-height: 1;
    width: 6rem; /*幅*/
    padding: 0.3rem 0; /*上下に0.3文字分、左右に0の余白*/
    background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
    text-align: center;
    transform: scale(0.8); /*サイズを80%に*/
    border-radius: 3px; /*角を少し丸く*/
}
/*アイコン（primary背景色の上でアイコンが同化しないように）*/
.bg1-primary-parts dl.news dt span {
    background: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/
    color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*アイコンを目立たせる場合（accent-color）*/
dl.news dt span.accent-color {
    background: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/
    color: var(--accent-inverse-color); /*文字色。theme.cssのaccent-inverse-colorを読み込みます。*/
}
/*アイコンを目立たせる場合（accent背景色の上でアイコンが同化しないように）*/
.bg1-accent-parts dl.news dt span.accent-color {
    background: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/
    color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*画面幅900px以上の追加指定*/
@media (min-width: 900px) {
    dl.news {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr); /*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
        align-items: start;
    }
} /*追加指定ここまで*/

/*フッター
---------------------------------------------------------------------------*/
footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
footer p {
    margin: 0;
}
footer a {
    text-decoration: none;
}

/*フッターの上に線を入れる*/
footer {
    border-top: 1px solid var(--bg-border-color);
}

/*フッターボックス全体（1カラム）*/
#footer-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /*デフォルトは1カラム*/
    gap: 2rem; /*footer直下のボックスの間に空けるスペース。２文字分。*/
    align-items: start;
    font-size: max(14px, 0.8rem); /*文字サイズ80%*/
    padding: var(--content-space-s); /*ボックス内の余白。theme.cssのcontent-space-sを読み込みます。*/
}

/*画面幅700px以上：2カラム*/
@media (min-width: 700px) {
    #footer-box {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
} /*追加指定ここまで*/

/*ロゴの最大幅*/
footer .logo {
    max-width: 300px;
}

/*footer内の各ブロック共通レイアウト（縦並び）*/
#footer-box > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*幅いっぱいに伸ばすブロック（.fill）
ulメニューを横並びにしたい場合などに使用。HTML内では中央位置に配置する想定。*/
#footer-box > .fill {
    flex-direction: row; /*縦並びから横並びに上書き*/
    gap: 3rem; /*中身（ulメニュー等）同士の間に空けるスペース。3文字分。*/
}

/*画面幅700px以下：3つのメニューを横並びから縦積みにして、ラベルの折り返しを防ぐ*/
@media (max-width: 700px) {
    #footer-box > .fill {
        flex-direction: column; /*縦積みに*/
        gap: 1.75rem;
    }

    /*各メニュー内の項目を少し詰めて読みやすく*/
    #footer-box > .fill ul li {
        line-height: 1.8;
    }

    /*見出しと項目の区切りを分かりやすく*/
    footer .title {
        padding-bottom: 0.3em;
        border-bottom: 1px solid var(--bg-border-color);
    }
} /*追加指定ここまで*/

/*画面幅1000px以上：PC時のみ各ブロックを左端／中央／右端に配置*/
@media (min-width: 1000px) {
    #footer-box > .fill {
        justify-self: center; /*中央寄せ*/
    }

    #footer-box > div:last-of-type:not(.fill) {
        justify-self: end; /*右寄せ。.fillが最後にある場合は除外*/
    }
} /*追加指定ここまで*/

/*メニューの見出し*/
footer .title {
    font-weight: bold;
    margin-bottom: 0.5em;
    white-space: nowrap; /*「サービス案内」などの見出しを1行に収める*/
}

/*事業所番号（介護保険／障がい福祉の2系統）。PCは横並び、スマホは改行*/
.num-line {
    display: inline-block;
}
.num-line + .num-line {
    margin-left: 1.2em;
}
@media (max-width: 700px) {
    .num-line {
        display: block;
    }
    .num-line + .num-line {
        margin-left: 0;
    }
}

/*お問い合わせの受付時間（電話番号の下）*/
.tel-block {
    line-height: 1.6;
}
.tel-note {
    font-size: max(14px, 0.9em);
    color: #666;
}

/*SNSアイコン*/
footer .sns {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /*アイコン同士のマージン的な要素。１文字分。*/
}
footer .sns i {
    font-size: 30px; /*アイコンサイズ*/
    color: var(--primary-color);
}

/*Copyright
---------------------------------------------------------------------------*/
/*ブロック全体*/
#copyright {
    background: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
    padding: 1rem var(--content-space-s); /*ブロック内の余白。上下に1文字分、左右はtheme.cssのcontent-space-sを読み込みます。*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/*メニューブロック*/
#copyright ul {
    margin: 0;
    padding: 0;
    display: flex;
    font-size: max(14px, 0.8rem); /*文字サイズ*/
}

/*メニュー１個あたり*/
#copyright ul li {
    padding-inline: 0.5rem; /*左右に空ける余白。0.5文字分。*/
}

/*最後のメニュー以外に、右側の線を入れる*/
#copyright ul li:not(:last-child) {
    border-right: 1px solid var(--primary-border-color);
}

/*ボタン
---------------------------------------------------------------------------*/
.btn a {
    display: inline-block;
    text-decoration: none;
    background: var(--primary-color); /*背景色。theme.csのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color); /*文字色。theme.csのprimary-inverse-colorを読み込みます。*/
    border: 1px solid var(--primary-color); /*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
    padding: 0.4rem 2rem !important; /*上下に0.4文字分、左右に2文字分の余白*/
    border-radius: 999px; /*ボタンをカプセル状にする。大きければ適当でOK。*/
}

/*背景が白いタイプのボタン*/
.btn.inverse a {
    background: var(--primary-inverse-color); /*背景色。theme.csのprimary-inverse-colorを読み込みます。*/
    color: var(--primary-color); /*文字色。theme.csのprimary-colorを読み込みます。*/
}

/*アクセントカラー版*/
.btn.accent a {
    background: var(--accent-color); /*背景色。theme.csのaccent-colorを読み込みます。*/
    color: var(--accent-inverse-color); /*文字色。theme.csのaccent-inverse-colorを読み込みます。*/
    border: 1px solid var(--accent-color); /*枠線の幅、線種、var以降は色の指定で、theme.cssのaccent-colorを読み込みます。*/
}

/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news * {
    margin: 0;
    padding: 0;
}

/*日付*/
dl.news dt {
    display: flex;
}

/*画面幅900px以上の追加指定*/
@media (min-width: 900px) {
    dl.news {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr); /*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
        gap: 0 2rem; /*2remが、日付とテキストとの間に空けるスペース。お好みで。*/
        align-items: start;
    }
} /*追加指定ここまで*/

/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
    text-decoration: none;
    display: block;
    background: rgba(0, 0, 0, 0.5);
    color: #ccc;
    text-align: right;
    padding: 0.5rem 1rem;
    font-size: max(14px, 0.8rem);
}
.pr a::before {
    font-family: "Font Awesome 6 Free";
    content: "\e2ca";
    font-weight: 900;
    margin-right: 0.5em;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
    display: block;
}

/*ボタンの設定*/
.pagetop a {
    display: block;
    text-decoration: none;
    text-align: center;
    z-index: 99;
    animation: opa1 1s 0.4s both;
    position: fixed; /*スクロールに追従しない(固定で表示)為の設定*/
    right: 20px; /*右からの配置場所指定*/
    bottom: 20px; /*下からの配置場所指定*/
    color: #fff; /*文字色*/
    font-size: 1.5rem; /*文字サイズ*/
    background: rgba(0, 0, 0, 0.2); /*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
    width: 60px; /*幅*/
    line-height: 60px; /*高さ*/
    border-radius: 50%; /*円形にする*/
}

/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
    background-color: var(--bg-inverse-color); /*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
    color: var(--bg-color); /*背景色。theme.cssのbg-colorを読み込みます。*/
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
    background-color: var(--primary-color); /*背景色。theme.cssのprimary-colorを読み込みます。*/
    color: var(--primary-inverse-color); /*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}

/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
    background-color: var(--light-color); /*背景色。theme.cssのlight-colorを読み込みます。*/
    color: var(--light-inverse-color); /*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*bg1-light2
---------------------------------------------------------------------------*/
.bg1-light2-parts {
    background-color: var(--light2-color); /*背景色。theme.cssのlight-colorを読み込みます。*/
    color: var(--light2-inverse-color); /*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}

/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
    background-color: var(--accent-color); /*背景色。theme.cssのaccent-colorを読み込みます。*/
    color: var(--accent-inverse-color); /*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
    padding-top: var(--content-space-l); /*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
    padding-bottom: var(--content-space-l); /*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
}

/*背景色が続く場合に隙間を空けない*/
.bg-parts + .bg-parts {
    margin-top: calc(-1 * var(--content-space-l)) !important;
}

/*section内で画面両サイドいっぱいまで広げる場合（marginのみでもいいが安定版に）
---------------------------------------------------------------------------*/
.bleed-x-parts {
    --bleed-x: var(--content-space-l); /*エイリアスに*/
    width: calc(100% + (var(--bleed-x) * 2)); /*section内容の幅＋両サイドpadding（対象要素の幅）*/
    margin-left: calc(var(--bleed-x) * -1);
    margin-right: calc(var(--bleed-x) * -1);
    max-width: none;
}

/*左右によせる専用
---------------------------------------------------------------------------*/
.bleed-left-parts {
    width: calc(100% + var(--content-space-l));
    margin-left: calc(-1 * var(--content-space-l));
}
.bleed-right-parts {
    width: calc(100% + var(--content-space-l));
    margin-right: calc(-1 * var(--content-space-l));
}

/*その他
---------------------------------------------------------------------------*/
.color-check,
.color-check a {
    color: #c3547b !important;
}
.l {
    text-align: left !important;
}
.c {
    text-align: center !important;
}
.r {
    text-align: right !important;
}
.ws {
    width: 100%;
    display: block;
}
.wl {
    width: 100%;
    display: block;
}
.padding-x {
    padding: 0 var(--content-space-l);
}
.mt0 {
    margin-top: 0px !important;
}
.mt20 {
    margin-top: 20px !important;
}
.mt1rem {
    margin-top: 1rem !important;
}
.mt3rem {
    margin-top: 3rem !important;
}
.mb0 {
    margin-bottom: 0px !important;
}
.mb1rem {
    margin-bottom: 1rem !important;
}
.mb3rem {
    margin-bottom: 3rem !important;
}
.mb30 {
    margin-bottom: 30px !important;
}
.look {
    display: inline-block;
    padding: 0px 10px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border-radius: 3px;
    margin: 5px 0;
    word-break: break-all;
}
.small {
    font-size: max(14px, 0.75em);
}
.large {
    font-size: 2em;
    letter-spacing: 0.1em;
}
.pc {
    display: none;
}
.dn {
    display: none !important;
}
.block {
    display: block !important;
}
.is-clip {
    overflow: hidden;
}

/*大きな画面の場合*/
.large-screen .ws {
    width: 50%;
}
.large-screen .sh {
    display: none;
}
.large-screen .pc {
    display: block;
}

/*===========================================================================
ヘルパーステーションの杜：カスタム追記
===========================================================================*/

/*見出しは丸ゴシックで親しみやすく*/
h2,
h3,
h4,
.mainimg .text h1 {
    font-family: var(--heading-font);
}

/*ファーストビューの対応エリアマップ*/
.mainimg .map {
    width: 92%;
    max-width: 360px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    padding: 10px 12px 6px;
}
.mainimg .text .map-note {
    font-size: max(14px, 0.72rem);
    color: #5a6b72;
    text-align: center;
    margin-top: -0.4rem;
}

/*画面幅700px以下：マップは中央・少し小さく*/
@media (max-width: 700px) {
    .mainimg .map {
        max-width: 300px;
        margin: 0 auto;
    }
    .mainimg .text .map-note {
        font-size: max(14px, 0.78rem);
    }
}

/*対応エリアセクションのマップ*/
.area-map-wrap {
    max-width: 620px;
    margin: 1.5rem auto 2rem;
    padding: 1.2rem;
    background: var(--light-color);
    border-radius: 18px;
}
.area-map-wrap img {
    display: block;
    width: 100%;
    height: auto;
}

/*対応エリアの地区バッジ*/
.area-badge {
    display: inline-block;
    margin-left: 0.6em;
    padding: 0.15em 0.7em;
    font-size: max(14px, 0.7rem);
    font-weight: bold;
    line-height: 1.4;
    color: #fff;
    background: var(--primary-color);
    border-radius: 999px;
    vertical-align: middle;
}
.area-badge.gray {
    background: #9aa6ab;
}

/*事業所情報テーブル（dl）*/
dl.info-table {
    max-width: 760px;
    margin: 1.5rem auto 2rem;
    border-top: 1px solid var(--bg-border-color);
}
dl.info-table dt,
dl.info-table dd {
    margin: 0;
    padding: 0.9rem 0.5rem;
    border-bottom: 1px solid var(--bg-border-color);
}
dl.info-table dt {
    font-weight: bold;
    color: var(--primary-color);
}
/*画面幅700px以上：左右2カラムの定義リスト*/
@media (min-width: 700px) {
    dl.info-table {
        display: grid;
        grid-template-columns: 200px 1fr;
    }
    dl.info-table dt {
        padding-left: 1rem;
    }
}

/*Googleマップ埋め込み*/
.map-embed {
    max-width: 900px;
    margin: 1.5rem auto 0.5rem;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    line-height: 0;
}
.map-embed iframe {
    display: block;
}

/*旧テンプレートのベンチ背景画像（map1.webp）を解除し、コンテンツをフル幅に*/
#course,
#access {
    background-image: none;
}
#course {
    padding-right: var(--content-space-l);
}
#access {
    padding-left: var(--content-space-l);
}

/*===========================================================================
ファーストビュー：PCでは「左テキスト／右写真」の2カラムにして
写真が白いシェイプで隠れないようにする（実写スライド対応）
===========================================================================*/
@media (min-width: 701px) {
    .mainimg {
        display: grid;
        grid-template-columns: minmax(340px, 38%) 1fr; /*左：テキスト、右：写真*/
        align-items: center;
        column-gap: clamp(1rem, 3vw, 3rem);
    }

    /*テキストブロックを通常配置（写真の上に重ねない）*/
    .mainimg .text {
        position: static;
        width: auto;
        height: auto;
        padding: 2.5rem clamp(1rem, 3vw, 3rem);
    }

    /*テンプレートの白い装飾シルエットは非表示（写真を覆わない）*/
    .mainimg .mainimg-shape {
        display: none;
    }

    /*写真ブロックの角を少し丸めて整える*/
    .mainimg .image {
        border-radius: 16px;
        overflow: hidden;
    }

    /*縦書きキャッチは写真の右上に重ねる*/
    .mainimg .mainimg-text {
        top: 1.5vw;
        right: 1.5vw;
    }
}

/*<small>タグ（コピーライト等）もブラウザ既定で14px未満にならないように*/
small {
    font-size: max(14px, 0.85em);
}

.service-image {
    aspect-ratio: 1 / 1;
}
.service-image img {
    width: 100%;
    height: 100%;
}

/*policy-block（プライバシーポリシー等の規約文ページ）
---------------------------------------------------------------------------*/
.policy-block {
    max-width: 760px;
    margin: 0 auto;
}
.policy-block h3 {
    margin-top: 2.2rem;
    color: var(--primary-color);
}
.policy-block p,
.policy-block ul {
    line-height: 1.9;
}
.policy-block ul {
    margin-left: 1.5rem;
    list-style: disc;
}
.policy-block ul li:not(:last-child) {
    margin-bottom: 0.4rem;
}

/*Instagram埋め込み（EmbedSocial）
---------------------------------------------------------------------------*/
.instagram-embed {
    max-width: 900px;
    margin: 0 auto;
}
.instagram-embed iframe {
    display: block;
    width: 100%;
    height: 1200px;
    border: 0;
}
@media (max-width: 700px) {
    .instagram-embed iframe {
        height: 1600px; /*狭い画面では投稿が縦積みになり高さが必要な為、大きめに確保*/
    }
}

/*#contact（ご相談・お問い合わせカード）：スマホでの折り返し調整
---------------------------------------------------------------------------*/
#contact h2 {
    line-height: 1.4; /*2行になった時に間延びしないよう調整*/
}
#contact .tel-block {
    margin-bottom: 1.4rem; /*受付時間とボタンの間に余白を確保*/
}
@media (max-width: 700px) {
    #contact .tel-block .large {
        font-size: 1.6em; /*電話番号が箱からはみ出して折り返すのを防ぐ*/
        letter-spacing: 0.03em;
        white-space: nowrap;
    }
}