@charset "utf-8";
/* ============================================================
   基本スタイル
============================================================ */
.contact {
    text-align: right;
}
/* ============================================================
   ヘッダー
============================================================ */
nav a.current {
    color: #a3282e;
    font-weight: bold;
}
/* ============================================================
   メインビジュアル
============================================================ */
.main-visual {
    position: relative;
    width: 100%;
    height: 135vh;
    background-image: url("../images/top_img-min.png");
    background-size: cover; /* 高さ100%、横は自動縮小 */
    background-position: right bottom; /* 右下寄せ */
    background-repeat: no-repeat;
    background-color: #ffffff;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(120px, 15vh, 180px) 12% 0 0;
    box-sizing: border-box;
    overflow: hidden; /* はみ出し対策 */
}
.main-copy {
    position: relative;
    width: 60%;
    min-width: 300px;
    max-width: 800px;
    box-sizing: border-box;
}
.copy-img {
    position: relative;
    z-index: 1;
    width: 40%;
    max-width: 170px;
    max-height: 50vh; /* 画面高さ内に収める */
    height: auto;
    display: block;
    margin-left: auto; /* 右寄せ */
    margin-right: 0;
    object-fit: contain; /* 縦横比を維持して収める */
}
/* 機関車 */
.bg-deco {
    position: absolute;
    top: clamp(150px, 20vh, 165px);
    right: clamp(0px, 5vw, 40px);
    width: 50%;
    height: auto;
    min-width: 350px;
    z-index: 0;
}
/* 左下の飾り */
.decoration-left-bottom {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 50%;
    max-width: 350px;
    height: auto;
    z-index: 10;
    pointer-events: none;
}
/* 共通：最初は非表示 */
.bg-deco,
.main-copy,
.decoration-left-bottom,
.site-header {
  opacity: 0;
  transition: opacity 0.8s ease;
}

/* 表示用クラス */
.show {
  opacity: 1;
}
/* ============================================================
   各セクション共通
============================================================ */
.about-tabiyado {
    background-image: url("../images/top_haikei.png");
    background-position: center 150px;
    background-repeat: no-repeat;
    background-size: contain;
}
.tabiyado-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.headline-block {
    display: flex;
    flex-wrap: wrap;
    padding: 80px 5px 40px;
}
h2.gradient-line {
    margin-bottom: 20px;
    padding: 0 0 15px 10px;
    padding-bottom: 15px;
    width: 100%;
    display: inline-block;
    position: relative;
}
h2.gradient-line::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #a3282e, rgba(255, 255, 255, 0.3));
}
h2.gradient-line img {
    width: 135px;
}
.section_title {
    margin-bottom: 20px;
}
.headline-block .text, .headline-block .image {
    flex: 1 1 50%;
    max-width: 600px;
    position: relative;
}
.text p {
    padding-right: 10px;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-weight: bold;
}
.headline-block .image img {
    width: calc(100% + 20px);
    margin-right: -20px;
    max-width: none;
    display: block;
}
/* ============================================================
   ご案内 (#info)
============================================================ */
/* 固定ヘッダー対策 */
section#info {
    scroll-margin-top: 100px;
}
/* 特徴リスト */
.features {
    padding-bottom: 100px;
}
.features ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, 270px);
    grid-auto-rows: auto;
    grid-gap: 16px;
    justify-content: center;
}
.features li {
    max-width: 270px;
}
/* 全幅画像 */
.full-width {
    width: 100%;
    margin-top: 20px;
}
/* 部屋・施設の画像 */
.rooms img, .group-use img, .longstay img {
    width: 100%;
    margin: 10px 0;
}
/* ============================================================
   お部屋紹介 .rooms
============================================================ */
.rooms, .group-use, .longstay {
    margin-bottom: 120px;
}
.room-images {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding-bottom: 30px;
}
.room-images img {
    flex: 1 1 auto;
    min-width: 0;
}
.room-highlights {
    padding: 10px 20px;
    border: 1px solid #d06578;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-weight: bold;
}
.highlights_title {
    margin-bottom: 20px;
}
.highlights_title img {
    max-width: 250px;
}
.room-highlights li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 5px;
}
.room-highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 12px;
    height: 12px;
    background-color: #eec3c4;
    border-radius: 50%;
}
/* ============================================================
   合宿・団体 .group-use
============================================================ */
.group-use .room-highlights {
    border: 1px solid #2b9496;
}
.group-use .room-highlights li::before {
    background-color: #bddad2;
}
.group-use .room-images img {
    flex: 0 1 60%;
    max-width: 100%;
    height: auto;
}
/* ============================================================
   高齢者・要介護 .longstay
============================================================ */
.longstay .room-highlights {
    border: 1px solid #76ac2c;
}
.longstay .room-highlights li::before {
    background-color: #d9e2c8;
}
.longstay .room-images {
    margin-right: 10px;
    padding-bottom: 0;
}
.longstay .headline-block .text {
    flex: 1 1 55%;
    max-width: 700px;
}
.longstay .headline-block .image {
    flex: 1 1 45%;
    max-width: 400px;
}
/* 介護サービス説明 */
.care-service-description {
    margin: 30px 10px 20px 0;
    padding: 10px;
    font-size: 0.8rem;
    font-weight: 300 !important;
    font-family: "ヒラギノ角ゴ ProN W3", "メイリオ", sans-serif !important;
    background-color: #eff3de;
    text-align: justify;
}
/* ============================================================
   ボタン
============================================================ */
.btn {
    display: block;
    max-width: 250px;
    margin: 0 auto 150px;
    padding: 10px 20px;
    background-color: #a3282e;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background-color: #c61037;
}
/* ============================================================
   レスポンシブ（スマホ対応）
============================================================ */
@media screen and (max-width: 768px) {
    .main-visual {
        height: 110vh;
        background-image: url("../images/top_s.png");
        background-position: center bottom;
    }
    .bg-deco {
        top: clamp(80px, 100vh, 240px);
    }
    .decoration-left-bottom {
        bottom: 0px;
    }
    .about-tabiyado {
        background-image: url("../images/top_haikei_s.png");
        background-position: center 400px;
    }
    .rooms, .group-use, .longstay {
        margin-bottom: 50px;
    }
    .group-use .room-images img {
        flex: 1 1 auto;
    }
    .headline-block {
        flex-direction: column;
        gap: 2rem;
    }
    .headline-block .text, .headline-block .image {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .headline-block .image {
        max-width: 100%;
        overflow: hidden;
    }
    .headline-block .image img {
        width: 100% !important;
        height: auto;
        max-width: 100% !important;
        margin-right: 0 !important;
        display: block;
    }
    .longstay .headline-block .image {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .rooms .headline-block, .group-use .headline-block, .headline-block .headline-block {
        padding-bottom: 5px;
    }
}
@media screen and (max-width: 600px) {
    .features ul {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 12px;
    }
    .features li {
        max-width: 100%;
    }
}
@media screen and (max-width: 428px) {
    .decoration-left-bottom {
        max-width: 150px;
    }
}
/* ============================================================
   施設案内ページ
============================================================ */
.sub-visual {
    height: 40vh;
    background: url("../images/sub_header.jpg") no-repeat center center;
    background-size: cover;
}
.section {
    padding-bottom: 25vh;
}
.tabiyado-wrapper {
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-weight: bold;
}
.page-title {
    position: relative;
    display: flex;
    align-items: center;
    margin: 2rem 0 5rem;
    padding: 0 0 15px 10px;
}
/* グラデーション下線 */
.page-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #8B0000, #ffffff);
    z-index: 0;
}
/* 葉っぱを枠からはみ出させる */
.right-img {
    position: absolute;
    right: 0;
    bottom: -40px;
    height: 200px;
    z-index: 2;
}
.title-img {
    height: 45px;
}
/* 画像グリッド */
.img-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 15vh;
}
.img-grid figure {
    width: 30%;
    text-align: center;
}
.img-grid img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 10px;
}
/* アイコン付き見出し */
.with-icon {
    position: relative;
    margin-bottom: 10px;
    padding-left: 32px;
    font-weight: bold;
    font-family: "Yu Mincho", "游明朝", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
.with-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    background: url("../images/sisetsu_yuge.png") no-repeat center/contain;
}
/* テーブル */
.table-wrap {
    margin-bottom: 15vh;
}
.info-table {
    border-collapse: collapse;
    text-align: center;
    font-size: 0.95rem;
}
.table-wrap.room-info {
    margin-bottom: 10vh;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-wrap.room-info .info-table {
    min-width: 600px;
}
.info-table th, .info-table td {
    border-bottom: 1px solid #8B0000;
    padding: 0.5rem 2rem;
}
.info-table thead th {
    background-color: #8B0000;
    color: #fff;
    font-weight: bold;
}
.info-table tbody th {
    width: 20%;
    color: #8B0000;
    font-weight: bold;
    text-align: center;
}
/* メニューリスト */
.menu-list {
    margin: 0;
    padding: 0;
}
.menu-list div {
    display: flex;
    margin-bottom: 0.75rem;
}
.menu-list dt {
    flex: 0 0 4em;
    font-weight: bold;
}
.menu-list dt::after {
    content: "／";
    margin: 0 0.3em;
    color: #333;
}
.menu-list dd {
    flex: 1;
    margin: 0;
    line-height: 1.5;
}
/* 見出し */
.section-title {
    margin-bottom: 1rem;
    font-weight: 700;
    color: #6e0000;
}
/* コンテナ */
.spot-columns {
    display: flex;
    gap: 2rem;
}
.spot-col {
    flex: 1;
}
/* アクセス */
.access-title {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: #600;
}
.access-item {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.access-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 50px;
    padding: 5px;
    background-color: #77282e;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.access-label .small {
    font-size: 0.75em;
    display: block;
}
.access-text {
    flex: 1;
    margin-left: 1rem;
    font-size: 1rem;
    color: #333;
}
/* 各スポット */
.spot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 2rem 0.8rem 0.8rem;
    border-bottom: 1px solid #8B0000;
}
.spot .name {
    color: #222;
}
.spot .time {
    white-space: nowrap;
    color: #8B0000;
    font-weight: 600;
}
/* 施設案内レスポンシブ */
@media screen and (max-width: 768px) {
    .sub-visual {
        height: 35vh;
        background: url("../images/sub_header_s.jpg") no-repeat center center;
        background-size: cover;
    }
    .img-grid figure {
        width: 100%;
    }
    .img-grid img {
        width: 100%;
        height: auto;
    }
    .right-img {
        height: 130%;
        bottom: 0;
    }
    .with-icon::before {
        top: 0;
        transform: none;
    }
    .spot-columns {
        flex-direction: column;
        gap: 0;
    }
    .info-table th {
        padding: 10px;
    }
}
/* ============================================================
   会社概要
============================================================ */
.company-profile {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 10vh;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.6;
}
.company-profile th, .company-profile td {
    border: 1px solid #ddd;
    padding: 0.75rem 1rem;
    vertical-align: top;
}
.company-profile th {
    width: 25%;
    background-color: #77282e;
    color: #fff;
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
}
.company-profile td {
    color: #444;
}
.company-profile td ul {
    list-style: none; /* デフォルトの黒丸を消す */
    margin: 0; /* ブラウザの余白を消す */
    padding: 0; /* 左のインデントを消す */
}
.business-list {
    list-style: none; /* デフォルトの黒丸を消す */
    margin: 0;
    padding: 0;
}
.business-list li {
    position: relative;
    padding-left: 1.2em; /* 左側に余白 */
    line-height: 1.6; /* 読みやすく */
    word-break: break-word; /* スマホでも折り返し */
}
.business-list li::before {
    content: "・"; /* 中黒マーク */
    position: absolute;
    left: 0;
    color: #333; /* 必要ならアクセントカラーに変更可 */
}
/* スマホ対応（カード風） */
@media screen and (max-width: 477px) {
    .company-profile, .company-profile tbody, .company-profile tr, .company-profile th, .company-profile td {
        display: block;
        width: 100%;
    }
    .company-profile th {
        padding: 0.2rem 0.5rem;
        font-size: 1rem;
        background-color: #77282e;
        color: #fff;
        border: #77282e solid 1px;
    }
    .company-profile td {
        padding: 0.75rem;
    }
}

/* 表示アニメーション */
/* 初期状態：透明＆少し下にずらす */
.fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示されたらふわっと */
.fade-in-section.show {
  opacity: 1;
  transform: translateY(0);
}