@charset "UTF-8";

/* ============================================================
   インナー幅 共通ラッパー
   ============================================================ */
.l-inner {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ============================================================
   siteHeader: PCヘッダー新デザイン (Figma: 71:978)
   ============================================================ */
.siteHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 90px;
    background: #fff;
    position: relative;
    z-index: 200;
    margin: 0;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

.siteHeader_logo {
    width: 289px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

.siteHeader_logo a {
    display: block;
}

.siteHeader_logo img {
    width: 100%;
    height: auto;
    display: block;
}

.siteHeader_tagline {
    font-size: 13px;
    color: #2a2a2a;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.siteHeader_right {
    display: flex;
    align-items: center;
    gap: 40px;
}

.siteHeader_nav {
    display: flex;
    align-items: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.siteHeader_navItem {
    position: relative;
}

.siteHeader_navLink {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    color: #2a2a2a;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.3s;
    cursor: pointer;
}

.siteHeader_navLink a {
    color: #2a2a2a;
    text-decoration: none;
    transition: color 0.3s;
}

.siteHeader_navLink:hover,
.siteHeader_navLink:hover a {
    color: #9e7825;
    text-decoration: none;
}

.navIcon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.navIcon--add {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.navIcon--add span {
    position: absolute;
    background: #2a2a2a;
    border-radius: 1px;
    transition: transform 0.3s ease;
}
.navIcon--add span:nth-child(1) {
    width: 14px;
    height: 2px;
}
.navIcon--add span:nth-child(2) {
    width: 2px;
    height: 14px;
}
.siteHeader_navItem--dropdown.is-open .navIcon--add span:nth-child(2) {
    transform: rotate(90deg) scaleX(0);
}

/* 島一覧ドロップダウン */
.siteHeader_navItem--dropdown {
    position: static;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.headerDropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 300;
    padding: 16px 0 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    pointer-events: none;
}

.headerDropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.headerDropdown_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.headerDropdown_item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff1d3;
    border-radius: 4px;
    padding: 16px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 2;
    color: #2a2a2a;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.3s, color 0.3s;
}

.headerDropdown_item:hover {
    background: #f0e4c0;
    color: #9e7825;
    text-decoration: none;
}

.headerDropdown_allLink {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px 0;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 13px;
    color: #1482BD;
    text-decoration: underline;
    text-align: right;
}

.headerDropdown_allLink:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* 問い合わせCTAボタン */
.headerCta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: #9e7825;
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    font-family: "Zen Kaku Gothic New", sans-serif;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1.5;
    transition: background 0.3s;
}

.headerCta:hover {
    background: #7a5c1e;
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   fv_watchBtn: 動画1ループ終了後に表示するボタン (Figma: 193:888)
   ============================================================ */
.fv_watchBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 320px;
    height: 64px;
    padding: 10px 24px;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
    box-sizing: border-box;
}

.fv_watchBtn.is-visible {
    opacity: 1;
    visibility: visible;
}

.fv_watchBtn:hover {
    background: rgba(0, 0, 0, 0.6);
}

.fv_watchBtn_text {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 24px;
    color: #fff;
    white-space: nowrap;
    line-height: 1.5;
}

.fv_watchBtn_icon {
    font-size: 24px;
    color: #fff;
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0;
}

/* ============================================================
   ytModal: YouTubeモーダル (Figma: 193:934)
   ============================================================ */
.ytModal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.ytModal.is-open {
    opacity: 1;
    visibility: visible;
}

.ytModal_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.ytModal_inner {
    position: relative;
    width: 960px;
    max-width: calc(100vw - 48px);
    z-index: 1;
}

.ytModal_video {
    position: relative;
    width: 100%;
    aspect-ratio: 960 / 534;
}

.ytModal_video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.ytModal_close {
    position: absolute;
    top: -54px;
    right: 0;
    width: 42px;
    height: 42px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.3s;
}

.ytModal_close:hover {
    opacity: 0.7;
}

.ytModal_close .material-symbols-outlined {
    font-size: 42px;
    color: #fff;
}

/* ============================================================
   fvSection: ファーストビュー (Figma: 71:1007)
   ============================================================ */
.fvSection {
    position: relative;
    width: 100%;
    height: calc(100vh - 90px);
    overflow: hidden;
}

.fv_video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.fv_catch {
    position: absolute;
    bottom: 50px;
    left: 64px;
    z-index: 1;
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: clamp(28px, 3.333vw, 48px);
    color: #fff;
    line-height: 1.5;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* FV内の search_box：元スタイルの top:50%/right:20px を上書き */
.fvSection .search_box {
    top: auto;
    bottom: 24px;
    right: 24px;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    width: clamp(240px, 24vw, 346px);
    max-width: none;
    padding: clamp(12px, 1.39vw, 20px);
    z-index: 1;
}

.fvSection .search_label {
    font-size: clamp(9px, 0.76vw, 11px);
}

.fvSection .search_box select,
.fvSection .search_box input.input_date {
    height: clamp(34px, 3.06vw, 44px);
    font-size: clamp(13px, 1.11vw, 16px);
    padding: 0 clamp(8px, 0.83vw, 12px);
}

.fvSection .search_flex {
    gap: clamp(6px, 0.69vw, 10px);
    margin-top: clamp(10px, 1.04vw, 15px);
}

.fvSection .search_button {
    height: clamp(38px, 3.33vw, 48px);
    font-size: clamp(13px, 1.11vw, 16px);
}

.fv_searchInner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fv_searchField {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fv_searchRow {
    display: flex;
    gap: 10px;
}

.fv_searchRow .fv_searchField {
    flex: 1;
}

.fv_searchLabel {
    font-size: 12px;
    color: #2a2a2a;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    display: block;
}

.fv_searchSelect,
.fv_searchInput {
    width: 100%;
    height: 38px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 14px;
    color: #2a2a2a;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    box-sizing: border-box;
}

.fv_searchSelect {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}

.fv_searchSelect.is-selected {
    color: #9e7825;
    border-color: #9e7825;
}

.fv_searchBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    background: #9e7825;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: "Zen Kaku Gothic New", sans-serif;
    transition: background 0.3s;
}

.fv_searchBtn:hover {
    background: #7a5c1e;
}

.fv_searchBtn img {
    width: 18px;
    height: 18px;
}

/* ============================================================
   topAbout: サービス概要 (Figma: 71:1014)
   ============================================================ */
.topAbout {
    padding: 120px 0;
}
.topAbout > .l-inner {
    display: flex;
    gap: 56px;
    align-items: flex-start;
}

.topAbout_head {
    width: 440px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.topAbout_eyebrow {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 24px;
    color: #9e7825;
    line-height: 1.5;
    margin: 0;
}

.topAbout_title {
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: 36px;
    color: #2a2a2a;
    line-height: 1.5;
    margin: 0;
}

.topAbout_body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.topAbout_text {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 2.0;
    color: #2a2a2a;
    margin: 0;
}

.topAbout_eyebrow .small {
    font-size: 20px;
}

/* ============================================================
   topNews: お知らせ (Figma: 71:1022)
   ============================================================ */
.topNews {
    padding: 80px 0;
    background: #f8f8f8;
}
.topNews > .l-inner {
    display: flex;
    gap: 56px;
    align-items: flex-start;
}

.topNews_head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.topNews_eyebrow {
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: 20px;
    color: #9e7825;
    line-height: 1.5;
    margin: 0;
}

.topNews_title {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 40px;
    color: #2a2a2a;
    line-height: 1.5;
    margin: 0;
    white-space: nowrap;
}

.topNews_list {
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 200px;
    overflow-y: auto;
}

.topNews_list::-webkit-scrollbar {
    width: 6px;
}

.topNews_list::-webkit-scrollbar-track {
    background: transparent;
}

.topNews_list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 16px;
}

.topNews_item {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    padding-bottom: 8px;
    padding-top: 8px;
    border-bottom: 1px solid #ccc;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #2a2a2a;
}

.topNews_item:first-child {
    padding-top: 0;
}

.topNews_date {
    flex-shrink: 0;
    width: 90px;
}

.topNews_text {
    flex: 1;
    min-width: 0;
}

.topNews_text a {
    color: #0066cc;
    text-decoration: underline;
}

.topNews_text a:hover {
    color: #004499;
    text-decoration: underline;
}

/* ============================================================
   topIsland: 選べる無人島一覧 (Figma: 71:1034)
   ============================================================ */
.topIsland_section {
    background: #f6f1e5;
    padding: 80px 0;
}

.topIsland_head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    margin-bottom: 56px;
}

.topIsland_eyebrow {
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: 20px;
    color: #9e7825;
    line-height: 1.5;
    margin: 0;
}

.topIsland_title {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 40px;
    color: #2a2a2a;
    line-height: 1.5;
    margin: 0;
}

.topIsland_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.topIsland_card {
    width: calc((100% - 48px) / 3);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.topIsland_card > a {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.topIsland_img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 0;
}

.topIsland_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.topIsland_card:hover .topIsland_img img {
    transform: scale(1.03);
}

.topIsland_name {
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 24px;
    color: #2a2a2a;
    line-height: 1.5;
    margin: 0;
}

.topIsland_desc {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
    color: #2a2a2a;
    line-height: 1.5;
    margin: 0;
}

.topIsland_tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.topIsland_tag {
    border: 1px solid #9e7825;
    border-radius: 40px;
    padding: 2px 8px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #9e7825;
    line-height: 1.5;
    white-space: nowrap;
}

.topIsland_more {
    display: block;
    text-align: center;
    margin-top: 40px;
    font-size: 16px;
    color: #9e7825;
    text-decoration: none;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
}

.topIsland_more:hover {
    text-decoration: underline;
}

/* ============================================================
   topFlow: 体験の流れ (Figma: 71:1157)
   ============================================================ */
.topFlow {
    background: #fff;
    padding: 80px 0;
}
.topFlow > .l-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    width: 100%;
}

.topFlow_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.topFlow_eyebrow {
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: 20px;
    color: #9e7825;
    line-height: 1.5;
    margin: 0;
}

.topFlow_title {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 40px;
    color: #2a2a2a;
    line-height: 1.5;
    margin: 0;
}

.topFlow_imgWrap {
    width: 100%;
}

.topFlow_img {
    width: 100%;
    height: auto;
    display: block;
}


.topFlow_footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.topFlow_note {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2a2a2a;
    text-align: center;
    line-height: 1.5;
    margin: 0;
}

.topFlow_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 64px;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    background: #fff;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2a2a2a;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
    white-space: nowrap;
}

.topFlow_btn:hover {
    opacity: 0.6;
    text-decoration: none;
}

/* ============================================================
   topVoice: 無人島の体験談 (Figma: 71:1257)
   ============================================================ */
.topVoice {
    background: #eef5fb;
    padding: 80px 0;
}
.topVoice > .l-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    width: 100%;
}

.topVoice_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.topVoice_eyebrow {
    font-family: "Shippori Mincho", serif;
    font-weight: 700;
    font-size: 20px;
    color: #9e7825;
    line-height: 1.5;
    margin: 0;
}

.topVoice_title {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 40px;
    color: #2a2a2a;
    line-height: 1.5;
    margin: 0;
}

.topVoice_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
}

.topVoice_card {
    width: calc((100% - 48px) / 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.topVoice_cardLink {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.topVoice_img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin: 0;
}

.topVoice_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.topVoice_card.has-link:hover .topVoice_img img {
    transform: scale(1.03);
}

.topVoice_btn {
    position: relative;
    z-index: 2;
}

.topVoice_body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.topVoice_info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.topVoice_cardTitle {
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 20px;
    color: #2a2a2a;
    line-height: 1.5;
    margin: 0;
}

.topVoice_desc {
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-size: 14px;
    color: #2a2a2a;
    line-height: 1.5;
    margin: 0;
}

.topVoice_meta {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
    color: #9e7825;
    line-height: 1.5;
    margin: 0;
}

.topVoice_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 40px;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    background: transparent;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2a2a2a;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
    white-space: nowrap;
}

.topVoice_btn:hover {
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   topOceanImg: 全幅海の画像 (Figma: 71:1355)
   ============================================================ */
.topOceanImg {
    width: 100%;
    overflow: hidden;
}

.topOceanImg img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   topCta: CTAセクション (Figma: 71:1337)
   ============================================================ */
.topCta {
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    background: #fff;
}

.topCta_card {
    background: #f6f1e5;
    border-radius: 40px;
    padding: 64px;
    width: 1140px;
    max-width: calc(100% - 80px);
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.topCta_cardLeft {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.topCta_catchCopy {
    font-family: "Shippori Mincho", serif;
    font-weight: 800;
    font-size: 40px;
    color: #9e7825;
    line-height: 1.5;
    margin: 0;
}

.topCta_catchCopy .small {
    font-size: 32px;
}

.topCta_cardText {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2a2a2a;
    line-height: 1.7;
    margin: 0;
}

.topCta_cardRight {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
}

.topCta_mainBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 340px;
    height: 72px;
    background: #9e7825;
    border-radius: 4px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.3s;
}

.topCta_mainBtn:hover {
    background: #7a5c1e;
    color: #fff;
    text-decoration: none;
}

.topCta_faqLink {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #9e7825;
    text-decoration: underline;
    text-align: center;
}

.topCta_faqLink:hover {
    color: #7a5c1e;
    text-decoration: underline;
}

.topCta_planRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 900px;
    max-width: calc(100% - 80px);
}

.topCta_planText {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2a2a2a;
    line-height: 1.5;
    margin: 0;
}

.topCta_planBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 63px;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    background: #fff;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #2a2a2a;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.3s, color 0.3s;
}

.topCta_planBtn:hover {
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   instagram: インスタグラムセクション (Figma: 193:3416)
   ============================================================ */
.instagram .l-inner {
    padding-block: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
}

#sb_instagram #sbi_images .sbi_item {
    aspect-ratio: 4 / 5;
}

.instagram h2.title40 {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 32px;
    color: #2a2a2a;
    margin: 0;
    line-height: 1.5;
}

/* ============================================================
   siteFooter: フッター (Figma: 193:842)
   ============================================================ */

/* 旧フッタースタイルをリセット */
footer.siteFooter {
    padding-bottom: 0;
}

.siteFooter {
    background: url('../images/bg_footer.png') center top / cover no-repeat;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.siteFooter_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 80px 40px;
    width: 100%;
    box-sizing: border-box;
}

.siteFooter_logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.siteFooter_logoText {
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    font-size: 60px;
    color: #fff;
    line-height: 1;
    margin: 0;
    letter-spacing: -0.02em;
}

.siteFooter_tagline {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #fff;
    line-height: 1;
    margin: 0;
}

.siteFooter_btnRow {
    display: flex;
    gap: 16px;
    align-items: center;
}

.siteFooter_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 320px;
    height: 64px;
    border: 1px solid #fff;
    border-radius: 4px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.3s;
}

.siteFooter_btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    text-decoration: none;
}

.siteFooter_bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.siteFooter_privacy {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}

.siteFooter_privacy:hover {
    text-decoration: underline;
    color: #fff;
}

.siteFooter_copy {
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    margin: 0;
}

/* ============================================================
   SP ナビゲーション ドロワー (Figma: 193:4119) — PC/SP共通定義
   ============================================================ */
.spNavOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10010;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.spNavOverlay.is-open {
    opacity: 1;
    visibility: visible;
}

.spNav {
    position: fixed;
    top: 0;
    right: 0;
    width: 240px;
    height: 100dvh;
    background: #2a2a2a;
    z-index: 10011;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.spNav.is-open {
    transform: translateX(0);
}

.spNav_close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding: 16px 16px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    box-sizing: border-box;
}

.spNav_close .material-symbols-outlined {
    font-size: 28px;
}

.spNav_inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}

.spNav_section {
    display: flex;
    flex-direction: column;
}

.spNav_accordionBtn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
    text-align: left;
    width: 100%;
}

.spNav_accordionBtn a {
    color: #fff;
    text-decoration: none;
}

.spNav_accordionIcon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    flex-shrink: 0;
}
.spNav_accordionIcon span {
    position: absolute;
    background: #fff;
    border-radius: 1px;
    transition: transform 0.3s ease;
}
.spNav_accordionIcon span:nth-child(1) {
    width: 14px;
    height: 2px;
}
.spNav_accordionIcon span:nth-child(2) {
    width: 2px;
    height: 14px;
}
.spNav_accordionBtn.is-open .spNav_accordionIcon span:nth-child(2) {
    transform: rotate(90deg) scaleX(0);
}

.spNav_islandList {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.spNav_islandList.is-open {
    max-height: 600px;
}

.spNav_islandList li {
    padding: 10px 0 0 28px;
}

.spNav_islandList a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

.spNav_islandList_allItem a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.spNav_nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.spNav_navItem {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.spNav_itemIcon {
    font-size: 20px;
    color: #fff;
}

.spNav_itemLabel {
    flex: 1;
}

.spNav_cta {
    display: block;
    margin-top: 16px;
    background: #9e7825;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

.spNav_footerLinks {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spNav_footerLink {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 14px;
}

/* ============================================================
   SP ヘッダー・FV用グローバル (PC では非表示)
   ============================================================ */
.spHeader {
    display: none;
}

.fv_spBr {
    display: none;
}

/* ============================================================
   中間ブレークポイント（769px〜1199px）ヘッダー縮小
   ============================================================ */
@media (min-width: 961px) and (max-width: 1199px) {
    .siteHeader {
        padding: 0 20px;
    }

    .siteHeader_logo {
        width: 230px;
    }

    .siteHeader_tagline {
        font-size: 10px;
        white-space: normal;
    }

    .siteHeader_right {
        gap: 20px;
    }

    .siteHeader_nav {
        gap: 16px;
    }

    .siteHeader_navLink {
        font-size: 14px;
        gap: 2px;
    }

    .navIcon {
        width: 20px;
        height: 20px;
    }
}

/* ============================================================
   SP レスポンシブ
   ============================================================ */
@media (max-width: 960px) {
    /* SP ナビゲーション有効化 */
    .sp {
        display: block;
    }

    .sidebarIconToggle {
        display: none;
    }

    .siteHeader {
        display: none;
    }

    /* SP ヘッダー (Figma: 193:3084) */
    .spHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        height: 70px;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 200;
        width: 100%;
        box-sizing: border-box;
    }

    .spHeader_logo {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 220px;
    }

    .spHeader_logo a {
        display: block;
    }

    .spHeader_logo img {
        width: 100%;
        height: auto;
        display: block;
    }

    .spHeader_tagline {
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 500;
        font-size: 9.9px;
        color: #2a2a2a;
        line-height: 1.4;
        margin: 0;
    }

    .spHeader_hamburger {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 32px;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        flex-shrink: 0;
    }

    .spHeader_hamburger span {
        display: block;
        width: 32px;
        height: 3px;
        background: #9e7825;
    }

    /* SP FV (Figma: 193:3092) */
    .fv_spBr {
        display: block;
    }

    .fvSection {
        position: relative;
        min-height: calc(100vh - 70px);
        height: auto;
        overflow: visible;
        padding-bottom: 0;
    }

    .fv_video {
        height: calc(100vh - 30px);
        min-height: 500px;
    }

    /* SP: 動画1ループ終了後のボタン */
    .fv_watchBtn {
        top: 20%;
        transform: translateX(-50%);
        width: min(280px, calc(100% - 32px));
        height: 56px;
    }

    .fv_watchBtn_text {
        font-size: 20px;
    }

    /* SP: YouTubeモーダル */
    .ytModal_inner {
        max-width: calc(100vw - 32px);
    }

    .ytModal_close {
        top: -46px;
        right: 0;
    }

    .ytModal_close .material-symbols-outlined {
        font-size: 36px;
    }

    .fv_catch {
        position: absolute;
        top: auto;
        left: 15px;
        bottom: 90px;
        font-size: 44px;
        background: none;
        padding: 0;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }

    .fvSection .search_box {
        top: auto;
        right: auto;
        bottom: -180px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        width: 370px;
        max-width: calc(100% - 30px);
        border-radius: 8px;
        box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
        padding: 20px;
    }

    /* SP: l-inner に左右15pxのpadding */
    .l-inner {
        padding: 0 15px;
    }

    /* SP About (Figma: 193:3099) */
    .topAbout {
        padding: 236px 0 56px;
    }
    .topAbout > .l-inner {
        flex-direction: column;
        gap: 24px;
    }

    .topAbout_head {
        width: 100%;
        gap: 16px;
    }

    .topAbout_eyebrow {
        font-size: 20px;
    }

    .topAbout_title {
        font-size: 32px;
    }

    .topAbout_text {
        font-size: 16px;
        line-height: 2;
    }

    /* SP News (Figma: 193:3105) */
    .topNews {
        padding: 56px 0;
    }

    .topNews > .l-inner {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .topNews_head {
        align-items: center;
        text-align: center;
    }

    .topNews_eyebrow {
        font-size: 16px;
    }

    .topNews_title {
        font-size: 32px;
    }

    .topNews_item {
        gap: 8px;
    }

    .topNews_list {
        max-height: 352px;
        overflow-y: scroll;
    }

    /* SP Island (Figma: 193:3122) */
    .topIsland_section {
        padding: 56px 15px;
    }

    .topIsland_head {
        gap: 4px;
        margin-bottom: 24px;
    }

    .topIsland_eyebrow {
        font-size: 16px;
    }

    .topIsland_title {
        font-size: 32px;
    }

    .topIsland_card {
        width: 100%;
    }

    .topIsland_img {
        aspect-ratio: 16 / 9;
    }

    /* SP Flow (Figma: 71:1157 画像ベース) */
    .topFlow {
        padding: 56px 15px;
        gap: 24px;
    }

    .topFlow_eyebrow {
        font-size: 16px;
    }

    .topFlow_title {
        font-size: 32px;
    }

    .topFlow_note {
        font-size: 14px;
    }

    .topFlow_btn {
        width: 100%;
        max-width: 320px;
    }

    /* SP Voice (Figma: 193:3348) */
    .topVoice {
        padding: 56px 15px;
        gap: 24px;
    }

    .topVoice_head {
        gap: 4px;
    }

    .topVoice_eyebrow {
        font-size: 16px;
    }

    .topVoice_title {
        font-size: 32px;
    }

    .topVoice_card {
        width: 100%;
    }

    .topVoice_img {
        aspect-ratio: 16 / 9;
    }

    /* SP Instagram (Figma: 193:3416) */
    .instagram .l-inner {
        padding-block: 56px;
        gap: 40px;
    }

    /* SP CTA (Figma: 193:3419) */
    .topCta {
        padding: 56px 15px;
        gap: 56px;
    }

    .topCta_card {
        flex-direction: column;
        border-radius: 40px;
        padding: 40px 24px;
        max-width: 100%;
        gap: 24px;
    }

    .topCta_cardRight {
        gap: 24px;
        width: 100%;
    }

    .topCta_catchCopy {
        font-size: 30px;
        letter-spacing: 0;
    }

    .topCta_catchCopy .small {
        font-size: 24px;
    }

    .topCta_mainBtn {
        width: 100%;
    }

    .topCta_planRow {
        flex-direction: column;
        gap: 24px;
        text-align: center;
        width: 312px;
        max-width: 100%;
    }

    .topCta_planText {
        text-align: left;
    }

    .topCta_planText br {
        display: none;
    }

    .topCta_planBtn {
        width: 100%;
    }

    /* SP フッター */
    .siteFooter_inner {
        padding: 64px 24px;
        gap: 32px;
    }

    .siteFooter_logoText {
        font-size: 40px;
    }

    .siteFooter_tagline {
        font-size: 14px;
    }

    .siteFooter_btnRow {
        flex-direction: column;
        width: 100%;
    }

    .siteFooter_btn {
        width: 100%;
    }
}

/* --- ロゴ h1/p ラッパーのリセット --- */
.siteHeader_logo h1,
.siteHeader_logo .siteHeader_logoText,
.spHeader_logo h1,
.spHeader_logo .spHeader_logoText {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: normal;
    line-height: 1;
}