/*--------------------------------------------------------------
# ブランドカラー・カスタムプロパティ
# 旧サイト style.css から抽出
--------------------------------------------------------------*/
:root {
--color-black: #000000;
--color-white: #ffffff;
--color-text: #393939;
--color-text-sub: #727171;
--color-text-gray: #707070;
--color-gold-dark: #8b831d;
--color-gold-main: #a0994b;
--color-gold-light: #e6dc6e;
--color-gold-bright: #ffea00;
--color-bg-light: #f7f8f8;
--color-bg-cream: #f4f3ec;
--color-bg-beige: #fffcde;
--color-border: #dbdbdb;
--color-border-mid: #acb1c1;
--color-border-gray: #bababa;
--font-sans: 'Noto Sans JP', sans-serif;
--font-heading: 'Oswald', sans-serif;
--breakpoint-mobile: 750px;
--grad-gold: linear-gradient(to left, #a0994b 0%, #000 100%);
--grad-gold-bright: linear-gradient(to left, #ffea00 0%, #8b831d 100%);
--wrap-width: 1100px;
--wrap-padding: 0 40px;
}
/*--------------------------------------------------------------
# リセット・ベース
--------------------------------------------------------------*/
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 62.5%; /* 1rem = 10px */
}
body {
font-family: var(--font-sans);
font-size: 1.6rem;
color: var(--color-text);
background-color: var(--color-white);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
color: inherit;
text-decoration: none;
}
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}
/*--------------------------------------------------------------
# レイアウト共通
--------------------------------------------------------------*/
.wrap {
max-width: var(--wrap-width);
margin: 0 auto;
}
.flex {
display: flex;
}
/*--------------------------------------------------------------
# ヘッダー
--------------------------------------------------------------*/
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 30px;
transition: background 0.3s ease;
}
#header.on {
/* スクロール時にお問い合わせ箇所へかかる網掛けはエンドユーザー要望により非表示（#90）。
復活させる場合は background-color を rgba(0, 0, 0, 0.7) に戻す。 */
background-color: transparent;
}
#header.open {
/* ドロワー開放時 */
}
.header-logo a img {
width: 130px;
height: auto;
}
.header-content {
display: flex;
align-items: center;
gap: 20px;
}
.header-content .btn a {
display: inline-block;
border: 1px solid var(--color-white);
color: var(--color-white);
padding: 8px 20px;
font-size: 1.3rem;
letter-spacing: 0.05em;
transition: background 0.3s, color 0.3s;
}
.header-content .btn a:hover {
background-color: var(--color-white);
color: var(--color-black);
}
/* 主 CTA（ご予約）は塗りで強調し、副 CTA（お問い合わせ）と優先度を分ける（#112） */
.header-content .btn-reserve a {
background-color: var(--color-white);
color: var(--color-black);
font-weight: bold;
}
.header-content .btn-reserve a:hover {
background-color: transparent;
color: var(--color-white);
}
/* ハンバーガーメニュー */
.nav-toggle {
display: flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
padding: 5px;
}
.nav-toggle span {
display: block;
width: 28px;
height: 2px;
background-color: var(--color-white);
transition: transform 0.3s, opacity 0.3s;
}
#header.open .nav-toggle span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#header.open .nav-toggle span:nth-child(2) {
opacity: 0;
}
#header.open .nav-toggle span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* ドロワーナビ */
#drawer {
position: fixed;
top: 0;
right: -100%;
width: 320px;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
z-index: 999;
display: flex;
align-items: center;
padding: 80px 40px 40px;
transition: right 0.4s ease;
}
#header.open #drawer {
right: 0;
}
#drawer nav ul {
margin-bottom: 30px;
}
#drawer nav ul li a {
display: block;
color: var(--color-white);
font-family: var(--font-heading);
font-size: 1.5rem;
letter-spacing: 0.1em;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
transition: color 0.3s;
}
#drawer nav ul li a:hover {
color: var(--color-gold-light);
}
/* ドロワー背景 */
#drawer-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 998;
pointer-events: none;
display: none;
}
#header.open #drawer-bg {
display: block;
}
#drawer-bg img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease;
}
#drawer-bg img.on {
opacity: 0.3;
}
/*--------------------------------------------------------------
# 施設ページ共通 CTA（お問い合わせ誘導）
--------------------------------------------------------------*/
.facility-cta {
background-color: var(--color-bg-cream);
padding: 90px 0;
text-align: center;
}
.facility-cta .wrap {
padding: 0 40px;
}
.facility-cta-heading {
font-size: 28px;
font-weight: bold;
letter-spacing: 0.08em;
line-height: 1.6;
color: var(--color-text);
}
.facility-cta-lead {
margin-top: 18px;
font-size: 15px;
line-height: 1.9;
color: var(--color-text-sub);
}
.facility-cta-btn {
margin-top: 36px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.facility-cta-btn a {
display: inline-block;
min-width: 320px;
max-width: 100%;
padding: 20px 48px;
background-color: var(--color-gold-main);
color: var(--color-white);
font-size: 16px;
letter-spacing: 0.12em;
border: 1px solid var(--color-gold-main);
transition: background-color 0.3s ease, color 0.3s ease;
}
.facility-cta-btn a:hover {
background-color: transparent;
color: var(--color-gold-dark);
}
/* 副 CTA（お問い合わせ）は枠線のみにして主 CTA と優先度を分ける（#112） */
.facility-cta-btn .facility-cta-btn-secondary {
background-color: transparent;
color: var(--color-gold-dark);
border-color: var(--color-gold-main);
}
.facility-cta-btn .facility-cta-btn-secondary:hover {
background-color: var(--color-gold-main);
color: var(--color-white);
}
/*--------------------------------------------------------------
# 団体利用 日帰りプラン一覧（details アコーディオン / View More）
--------------------------------------------------------------*/
.cl-group-daytrip .daytrip-plan-list {
max-width: 960px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.daytrip-plan-item {
margin-bottom: 16px;
border: 1px solid #e2e2e2;
background-color: var(--color-white);
}
.daytrip-plan-summary {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 24px;
position: relative;
}
.daytrip-plan-item.has-detail .daytrip-plan-summary {
list-style: none;
cursor: pointer;
padding-right: 140px;
}
.daytrip-plan-summary::-webkit-details-marker {
display: none;
}
.daytrip-plan-img {
flex: 0 0 200px;
max-width: 200px;
}
.daytrip-plan-img img {
display: block;
width: 100%;
height: 140px;
object-fit: cover;
}
.daytrip-plan-body {
flex: 1 1 auto;
}
.daytrip-plan-title {
margin: 0 0 8px;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
color: var(--color-text);
}
.daytrip-plan-capacity {
display: inline-block;
margin: 0 0 8px;
padding: 2px 12px;
font-size: 13px;
color: var(--color-gold-dark);
border: 1px solid var(--color-gold-main);
border-radius: 2px;
}
.daytrip-plan-text {
margin: 0 0 10px;
font-size: 15px;
line-height: 1.8;
color: var(--color-text-sub);
}
.daytrip-plan-price {
margin: 0;
font-size: 15px;
font-weight: 500;
line-height: 1.7;
color: var(--color-text);
}
.daytrip-plan-more {
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
font-size: 13px;
letter-spacing: 0.12em;
color: var(--color-gold-main);
white-space: nowrap;
}
.daytrip-plan-more::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-left: 8px;
border-right: 2px solid var(--color-gold-main);
border-bottom: 2px solid var(--color-gold-main);
transform: translateY(-2px) rotate(45deg);
transition: transform 0.25s ease;
}
.daytrip-plan-item[open] .daytrip-plan-more::after {
transform: translateY(2px) rotate(225deg);
}
.daytrip-plan-detail {
padding: 0 24px 24px;
font-size: 15px;
line-height: 1.9;
color: var(--color-text-sub);
}
.daytrip-plan-detail p {
margin: 0 0 1em;
}
.daytrip-plan-detail a {
color: var(--color-gold-dark);
text-decoration: underline;
}
/* 団体利用: プラン一覧末尾「各プランの詳しいご利用例を見る」導線（#72） */
.daytrip-plan-morelink {
margin: 32px 0 0;
text-align: center;
}
.daytrip-plan-morelink-btn {
display: inline-flex;
align-items: center;
padding: 14px 40px;
border: 1px solid var(--color-gold-main);
color: var(--color-gold-dark);
font-size: 15px;
letter-spacing: 0.08em;
transition: background-color 0.25s ease, color 0.25s ease;
}
.daytrip-plan-morelink-btn::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-left: 12px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateX(-2px) rotate(-45deg);
}
.daytrip-plan-morelink-btn:hover {
background-color: var(--color-gold-main);
color: var(--color-white);
}
/* 団体宿泊ページ下部「日帰りでのご利用をお考えの方へ」→ /party/ への案内（#138）。
日帰りの訴求は /party/ に一本化し、ここでは受け渡しだけを行う。 */
.cl-group-daytrip-link .text {
max-width: 800px;
margin: 0 auto;
text-align: center;
line-height: 2;
}
/*--------------------------------------------------------------
# 団体利用 ご利用例ページ（page-cloudlodge-group-case.php / #72）
--------------------------------------------------------------*/
.cl-group-cases .wrap {
max-width: 900px;
}
.cl-group-case {
padding: 40px 0;
border-bottom: 1px solid var(--color-border);
}
.cl-group-case:last-of-type {
border-bottom: none;
}
.cl-group-case-title {
font-size: 22px;
line-height: 1.5;
color: var(--color-text);
}
.cl-group-case-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
margin: 12px 0 0;
}
.cl-group-case-plan,
.cl-group-case-capacity {
display: inline-block;
padding: 4px 14px;
background-color: var(--color-bg-cream);
color: var(--color-text-sub);
font-size: 13px;
letter-spacing: 0.04em;
}
.cl-group-case-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin: 24px 0 0;
}
.cl-group-case-image img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 3 / 2;
}
.cl-group-case-body {
margin: 24px 0 0;
font-size: 15px;
line-height: 1.9;
color: var(--color-text-sub);
}
.cl-group-case-schedule {
margin: 28px 0 0;
}
.cl-group-case-subhead {
font-size: 16px;
letter-spacing: 0.06em;
color: var(--color-text);
margin: 0 0 12px;
padding-left: 12px;
border-left: 3px solid var(--color-gold-main);
}
.cl-group-case-schedule-list {
list-style: none;
margin: 0;
padding: 0;
}
.cl-group-case-schedule-list li {
display: flex;
gap: 16px;
padding: 8px 0;
border-bottom: 1px dashed var(--color-border);
font-size: 15px;
line-height: 1.7;
}
.cl-group-case-schedule-time {
flex: 0 0 84px;
color: var(--color-gold-dark);
font-weight: 700;
}
.cl-group-case-schedule-body {
color: var(--color-text-sub);
}
.cl-group-case-price {
margin: 20px 0 0;
font-size: 16px;
color: var(--color-text);
}
.cl-group-case-back {
margin: 40px 0 0;
text-align: center;
}
.cl-group-case-back a {
color: var(--color-gold-dark);
font-size: 15px;
text-decoration: underline;
}
/*--------------------------------------------------------------
# スタジオ プラン一覧（details アコーディオン / View More）
--------------------------------------------------------------*/
.studio-plan-list {
margin: 0 auto;
padding: 0;
list-style: none;
}
.studio-plan-item {
margin-bottom: 12px;
border: 1px solid #e2e2e2;
background-color: var(--color-white);
}
.studio-plan-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
position: relative;
}
.studio-plan-item.has-detail .studio-plan-summary {
list-style: none;
cursor: pointer;
}
.studio-plan-summary::-webkit-details-marker {
display: none;
}
.studio-plan-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 18px;
}
.studio-plan-name {
font-size: 17px;
font-weight: bold;
line-height: 1.5;
color: var(--color-text);
}
.studio-plan-sub {
font-size: 14px;
color: var(--color-text-sub);
}
.studio-plan-lead-price {
font-size: 15px;
font-weight: 500;
color: var(--color-gold-dark);
}
.studio-plan-more {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
font-size: 13px;
letter-spacing: 0.12em;
color: var(--color-gold-main);
white-space: nowrap;
}
.studio-plan-more::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-left: 8px;
border-right: 2px solid var(--color-gold-main);
border-bottom: 2px solid var(--color-gold-main);
transform: translateY(-2px) rotate(45deg);
transition: transform 0.25s ease;
}
.studio-plan-item[open] .studio-plan-more::after {
transform: translateY(2px) rotate(225deg);
}
.studio-plan-detail {
padding: 0 24px 24px;
}
/* 注記（旧 .box .flex .item 相当）。アコーディオン化で .box が無くなり
幅・背景が当たらず、複数件が区切りなく横に流れていた（#182）。
1 件なら全幅、複数なら 2 列に並べ、奇数の余りは全幅に伸ばす。 */
.studio-plan-detail .flex {
flex-wrap: wrap;
gap: 10px;
}
.studio-plan-detail .flex .item {
flex: 1 1 calc(50% - 5px);
min-width: 0;
background-color: #f7f8f8;
}
.studio-plan-detail .flex .item dl {
margin: 0;
padding: 16px 20px;
font-size: 15px;
line-height: 1.7;
color: var(--color-gold-dark);
}
.studio-plan-detail .flex .item dt {
font-weight: normal;
}
.studio-plan-detail .flex .item dd {
display: none;
}
.studio-plan-detail .flex .item a {
display: inline-block;
color: inherit;
text-decoration: underline;
}
.studio-plan-detail .price-list {
margin-top: 8px;
}
.studio-plan-detail .att {
margin-top: 8px;
font-size: 13px;
color: var(--color-text-sub);
}
/*--------------------------------------------------------------
# 共通 FAQ セクション（details アコーディオン / 施設ページ再利用）
--------------------------------------------------------------*/
.geimori-faq .geimori-faq-list {
max-width: 900px;
margin: 0 auto;
}
.geimori-faq-item {
border-bottom: 1px solid #e2e2e2;
}
.geimori-faq-q {
list-style: none;
cursor: pointer;
padding: 22px 44px 22px 8px;
position: relative;
font-size: 16px;
font-weight: 500;
line-height: 1.7;
color: var(--color-text);
}
.geimori-faq-q::-webkit-details-marker {
display: none;
}
.geimori-faq-q::before {
content: "Q";
color: var(--color-gold-main);
font-weight: bold;
margin-right: 12px;
}
.geimori-faq-q::after {
content: "";
position: absolute;
top: 50%;
right: 12px;
width: 12px;
height: 12px;
border-right: 2px solid var(--color-gold-main);
border-bottom: 2px solid var(--color-gold-main);
transform: translateY(-70%) rotate(45deg);
transition: transform 0.25s ease;
}
.geimori-faq-item[open] .geimori-faq-q::after {
transform: translateY(-30%) rotate(225deg);
}
.geimori-faq-a {
padding: 0 8px 24px 32px;
font-size: 15px;
line-height: 1.9;
color: var(--color-text-sub);
}
.geimori-faq-a p {
margin: 0 0 1em;
}
.geimori-faq-a a {
color: var(--color-gold-dark);
text-decoration: underline;
}
.geimori-faq-links {
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.geimori-faq-links li {
margin: 0 0 6px;
}
.geimori-faq-links a::before {
content: "\2192\0020";
}
/* FAQ 一覧ページへの導線（#109） */
.geimori-faq-all {
max-width: 900px;
margin: 32px auto 0;
text-align: center;
}
.geimori-faq-all a {
display: inline-block;
padding: 12px 32px;
border: 1px solid var(--color-gold-main);
color: var(--color-gold-dark);
font-size: 14px;
letter-spacing: 0.08em;
transition: background-color 0.3s ease, color 0.3s ease;
}
.geimori-faq-all a::after {
content: "\0020\2192";
}
.geimori-faq-all a:hover {
background-color: var(--color-gold-main);
color: var(--color-white);
opacity: 1;
}
/*--------------------------------------------------------------
# フッター
--------------------------------------------------------------*/
#footer-btn {
display: none; /* JS で表示制御（モバイル・スクロール時） */
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 900;
}
#footer-btn .flex {
display: flex;
}
#footer-btn .footer-btn-item {
flex: 1;
}
#footer-btn .footer-btn-item a {
display: block;
text-align: center;
background-color: var(--color-black);
color: var(--color-white);
padding: 14px 10px;
font-size: 1.3rem;
}
#footer {
background-color: var(--color-black);
color: var(--color-white);
}
.footer-access {
padding: 60px 0;
background-color: #fff;
color: #000;
}
.footer-access .title-text {
font-family: var(--font-heading);
font-size: 3.0rem;
letter-spacing: 0.1em;
margin-bottom: 30px;
}
.footer-access .intro-box {
margin-bottom: 30px;
}
.footer-access .intro-box .top {
font-size: 1.8rem;
margin-bottom: 10px;
}
.footer-content {
position: relative;
padding: 60px 0 40px;
}
#pagetop {
position: absolute;
top: -24px;
right: 40px;
}
#pagetop a img {
width: 48px;
height: 48px;
}
.footer-ttl-text {
font-family: var(--font-heading);
font-size: 1.8rem;
margin-bottom: 15px;
}
.footer-content .logo-img {
margin-top: 20px;
}
.footer-content .logo-img img {
height: 50px;
width: auto;
}
.sns-link {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.sns-link li a img {
width: 28px;
height: 28px;
}
.footer-content .link li {
margin-bottom: 8px;
font-size: 1.3rem;
}
.footer-content .link li a:hover {
color: var(--color-gold-light);
}
.footer-content .page-link {
margin-top: 15px;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.footer-content .page-link li a {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
}
.copyright-text {
text-align: center;
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.5);
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/*--------------------------------------------------------------
# ニュース一覧
--------------------------------------------------------------*/
.archive-header {
padding: 80px 0 40px;
}
.archive-title {
font-family: var(--font-heading);
font-size: 3.5rem;
letter-spacing: 0.15em;
}
.news-list {
border-top: 1px solid var(--color-border);
}
.news-list-item {
border-bottom: 1px solid var(--color-border);
}
.news-list-link {
display: flex;
align-items: baseline;
gap: 20px;
padding: 20px 10px;
transition: opacity 0.3s;
}
.news-list-link:hover {
opacity: 0.7;
}
.news-date {
font-family: var(--font-heading);
font-size: 1.4rem;
color: var(--color-text-sub);
white-space: nowrap;
}
/*--------------------------------------------------------------
# ニュース詳細
--------------------------------------------------------------*/
.news-detail {
padding: 80px 0 60px;
}
.news-header {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--color-border);
}
.news-meta {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
font-size: 1.4rem;
color: var(--color-text-sub);
}
.news-title {
font-size: 2.4rem;
line-height: 1.5;
}
.news-thumbnail {
margin-bottom: 40px;
}
.news-content {
font-size: 1.6rem;
line-height: 1.9;
}
.news-navigation {
margin-top: 60px;
padding-top: 30px;
border-top: 1px solid var(--color-border);
}
/*--------------------------------------------------------------
/*--------------------------------------------------------------
# 旧サイト style.css 移植（@charset/@import 除去済み）
--------------------------------------------------------------*/
/* ========================================
■ 必須設定
======================================== */
/* reset
----------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body { line-height: 1; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: inherit; }
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del { text-decoration: line-through; }
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
th {
text-align: left;
vertical-align: top;
font-weight: normal;
}
td {
text-align: left;
vertical-align: top;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
input, select, textarea, img { vertical-align:middle; }
ul, dl, ol { list-style: none; }
em { font-style: normal; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
/* 共通設定
----------------------------- */
html { font-size: 16px; }
body {
font-family: 'Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #393939;
line-height: 1.75;
background: #fff;
font-weight: 500;
-webkit-text-size-adjust: 100%;
letter-spacing: 0.08em;
}
a {
text-decoration: none;
transition: 0.3s ease;
}
a:hover {
opacity: .6;
text-decoration: none;
transition: 0.3s ease;
}
img,
video,
object {
max-width: 100%;
height: auto;
vertical-align: bottom;
border: none;
}
/* ========================================
■ General
======================================== */
.wrap {
position: relative;
max-width: 1100px;
margin: 0 auto;
}
/* form reset
----------------------------- */
/* placeholder */
:placeholder-shown { color: #ccc; }
::-webkit-input-placeholder { color: #ccc; }/* Google Chrome, Safari, Opera 15+, Android, iOS */
:-moz-placeholder { color: #ccc; opacity: 1; }/* Firefox 18- */
::-moz-placeholder { color: #ccc; opacity: 1; }/* Firefox 19+ */
:-ms-input-placeholder { color: #ccc; }/* IE 10+ */
/* セレクトボックス */
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 1rem;
}
select::-ms-expand {
display: none;
}
@media all and (-ms-high-contrast:none){
select {
font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
}
/* 数字入力 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance:textfield;
}
/* GENERAL */
.oswald{
font-family: 'Oswald','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.body-wrap{
overflow-x: hidden;
min-width: 1120px;
}
.flex{
display: flex;
flex-wrap: wrap;
}
.ps-ab{
position: absolute;
}
.ps-re{
position: relative;
z-index: 0;
}
.btn a{
color: #fff;
font-size: 15px;
font-weight: bold;
letter-spacing: 0.12em;
display: inline-block;
background-color: #000;
overflow: hidden;
}
.btn a span{
position: relative;
z-index: 1;
padding: 10px 30px;
display: inline-block;
}
.btn a span::before{
content: "";
background: linear-gradient(to left, #a0994b 0%, #000 100%);
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transition: .3s;
transform: translateY(100%);
}
.btn a:hover{
opacity: 1;
}
.btn a:hover span::before{
transform: translateY(0);
}
.vert{
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.padding-top{
padding-top: 180px;
}
.padding-bottom{
padding-bottom: 180px;
}
.padding-tb{
padding: 180px 0;
}
.title{
margin-bottom: 60px;
text-align: center;
}
.title-text{
font-size: 54px;
font-weight: bold;
line-height: 1.5;
letter-spacing: 0.12em;
font-family: 'Oswald','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.title-text::after{
content: "";
display: block;
margin: 10px auto 0;
background-color: #E6DC6E;
width: 8px;
height: 55px;
}
.more a,
.view-more a{
font-size: 15px;
letter-spacing: 0.12em;
color: #000;
transition: .8s;
font-family: 'Oswald','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.view-more a{
max-width: 800px;
margin: 0 auto;
position: relative;
border: 1px solid #000;
height: 80px;
display: flex;
align-items: center;
padding-left: 308px;
}
.view-more a span.line{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.view-more a span.line::before,
.view-more a span.line::after{
content: "";
position: absolute;
background-color: #fff;
transition: .8s;
z-index: 1;
}
.view-more a span.line.tb::before,
.view-more a span.line.tb::after{
width: 0;
height: 1px;
}
.view-more a span.line.lr::before,
.view-more a span.line.lr::after{
height: 0;
width: 1px;
}
.view-more a span.line.tb::before{
top: -1px;
left: 0;
}
.view-more a span.line.tb::after{
bottom: -1px;
right: 0;
}
.view-more a span.line.lr::before{
bottom: 0;
left: -1px;
}
.view-more a span.line.lr::after{
top: 0;
right: -1px;
}
.more a span.arrow,
.view-more a span.arrow{
width: 100px;
height: 1px;
background-color: #000;
margin-right: 10px;
display: inline-block;
vertical-align: middle;
position: relative;
border-radius: 10px;
transform: translateY(2px);
transition: .8s;
}
.more a span.arrow::before,
.view-more a span.arrow::before{
content: "";
position: absolute;
transform: rotate(35deg);
width: 12px;
height: 1px;
top: 0;
right: 0;
background-color: #000;
transform-origin: bottom right;
}
.view-more a:hover{
opacity: 1;
border: 1px solid transparent;
}
.more a:hover{
opacity: 1;
}
.more a:hover span.arrow,
.view-more a:hover span.arrow{
width: 60px;
}
.view-more a:hover span.line.tb::before,
.view-more a:hover span.line.tb::after{
width: 100%;
background-color: #000;
}
.view-more a:hover span.line.lr::before,
.view-more a:hover span.line.lr::after{
height: 100%;
background-color: #000;
}
.gradient-btn a{
color: #fff;
font-size: 15px;
font-weight: bold;
letter-spacing: 0.12em;
background-color: #000;
display: block;
padding: 24px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.gradient-btn a span{
position: relative;
z-index: 1;
}
.gradient-btn a::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #a0994b 0%, #000 100%);
opacity: 0;
transform: translateY(100%);
transition: .5s;
}
.gradient-btn a:hover{
opacity: 1;
}
.gradient-btn a:hover::before{
transform: translateY(0);
opacity: 0.6;
}
br.s-up{
display: none;
}
/* HEADER */
#header.on .header-logo img{
-webkit-filter: brightness(0) grayscale(100%) invert(0);
-moz-filter: brightness(0) grayscale(100%) invert(0);
-o-filter: brightness(0) grayscale(100%) invert(0);
-ms-filter: brightness(0) grayscale(100%) invert(0);
filter: brightness(0) grayscale(100%) invert(0);
}
#header.on:not(.open) .nav-toggle span{
background-color: #000;
}
#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
#header .header-logo{
transition: .5s;
}
#header .header-logo img{
transition: .3s;
}
#header .header-content{
display: flex;
flex-wrap: wrap;
align-items: center;
}
#header .header-content .btn{
margin-right: 40px;
}
#header .header-content .btn a{
display: block;
}
.nav-toggle-wrap{
width: 60px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 3;
}
.nav-toggle{
position: relative;
width: 40px;
height: 20px;
cursor: pointer;
}
.nav-toggle span{
position: absolute;
height: 2px;
transition: .3s;
background-color: #fff;
transform: translateX(-50%);
left: 50%;
}
.nav-toggle span:nth-of-type(1){
width: 100%;
top: 0;
}
.nav-toggle span:nth-of-type(2){
width: 75%;
top: 9px;
}
.nav-toggle span:nth-of-type(3){
width: 100%;
top: 18px;
}
.open .nav-toggle span:nth-of-type(1){
transform: translate(-50%,9px) rotate(45deg);
}
.open .nav-toggle span:nth-of-type(2){
opacity: 0;
}
.open .nav-toggle span:nth-of-type(3){
transform: translate(-50%,-9px) rotate(-45deg);
}
@media screen and (min-width: 751px){
#header:not(.open) .nav-toggle:hover span:nth-of-type(1){
top: 2px;
}
#header:not(.open) .nav-toggle:hover span:nth-of-type(3){
top: 16px;
}
}
#header.open .header-logo{
opacity: 0;
visibility: hidden;
}
/* DRAWER */
#drawer-bg{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: .5s;
}
#drawer-bg img{
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: .5s;
}
#drawer-bg img.on{
opacity: 1;
}
#drawer{
position: fixed;
top: 0;
right: 0;
width: 63%;
height: 100%;
z-index: 2;
padding-left: 120px;
padding-top: 110px;
transition: .5s;
opacity: 0;
visibility: hidden;
}
#drawer::before{
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
transition: .5s;
background-color: rgba(0,0,0,.85);
z-index: -1;
}
#drawer nav{
display: flex;
flex-wrap: wrap;
}
#drawer ul:first-child{
margin-right: 236px;
}
#drawer ul li:not(:last-child){
margin-bottom: 60px;
}
#drawer ul li a{
color: #fff;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.12em;
}
#header.open #drawer,
#header.open #drawer-bg{
opacity: 1;
visibility: visible;
}
#header.open #drawer::before{
width: 100%;
}
/* #214 で「HOME」を足し、左カラムが 6 項目になった。画面の高さが低いノート PC でも
最下段（Cloud Lodge）が切れないように、縦が狭いときだけ余白を詰める。
通常の高さの画面では従来どおりの間隔。 */
@media screen and (min-width: 751px) and (max-height: 820px){
#drawer{
padding-top: 60px;
}
#drawer ul li:not(:last-child){
margin-bottom: 40px;
}
}
/* FOOTER */
#pagetop{
position: absolute;
top: 20px;
right: 20px;
}
#pagetop a{
width: 68px;
height: 68px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
position: relative;
background-color: #fff;
}
#pagetop a::before{
content: "";
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
background: linear-gradient(#a0994b 0%, #000 100%);
transition: .5s;
border-radius: 50%;
opacity: 0;
}
@media screen and (min-width: 751px){
#pagetop a:hover{
opacity: 1;
}
#pagetop a:hover::before{
opacity: 1;
}
#pagetop a:hover img{
-webkit-filter: brightness(0) grayscale(100%) invert(1);
-moz-filter: brightness(0) grayscale(100%) invert(1);
-o-filter: brightness(0) grayscale(100%) invert(1);
-ms-filter: brightness(0) grayscale(100%) invert(1);
filter: brightness(0) grayscale(100%) invert(1);
}
}
#pagetop a img{
position: relative;
z-index: 1;
transition: .5s;
}
#footer-btn{
display: none;
}
#footer{
margin-top: 180px;
}
#footer .footer-access{
text-align: center;
}
#footer .footer-access .intro-box .text.top{
font-size: 30px;
letter-spacing: 0.12em;
font-weight: bold;
margin-bottom: 15px;
}
#footer .footer-access .text.md{
font-size: 20px;
font-weight: bold;
margin: 100px 0 80px;
}
#footer .footer-access .box .text.top{
font-weight: bold;
color: #8B831D;
font-size: 20px;
}
#footer .footer-access .box .text:not(.top){
margin: 20px 0;
}
#footer .footer-access .box:last-child{
padding-top: 60px;
margin-top: 60px;
position: relative;
}
#footer .footer-access .box:last-child::before{
content: "";
position: absolute;
top: 0;
left: 50%;
width: 100%;
max-width: 1000px;
transform: translateX(-50%);
height: 1px;
background-color: #DBDBDB;
}
#footer .footer-access .box ul li{
padding-left: 20px;
margin-bottom: 5px;
}
#footer .footer-access .box ul li .leftheader,
#footer .footer-access .box ul li .rightdata {
display: inline-block;
text-align: left;
}
#footer .footer-access .box ul li .leftheader {
width: 150px;
}
#footer .footer-access .box ul li .rightdata {
width: 200px;
}
#footer .footer-access .box ul li:last-child{
margin-bottom: 0;
}
#footer .footer-access .box ul li::before{
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #E6DC6E;
margin-right: 10px;
margin-left: -20px;
display: inline-block;
position: relative;
top: -2px;
}
#footer .footer-access .box ul li.nonmaru::before {
background-color: #fff;
}
#footer .footer-access .map iframe{
width: 100%;
vertical-align: bottom;
height: 500px;
}
#footer .footer-content{
margin-top: 140px;
background-color: #000;
color: #fff;
position: relative;
padding: 140px 0 100px;
}
#footer .footer-content .flex{
justify-content: space-between;
}
#footer .footer-content .footer-ttl-text a{
color: #fff;
font-size: 22px;
}
#footer .footer-content .l-cont .text{
font-size: 12px;
margin: 10px 0 30px;
}
#footer .footer-content .r-cont{
text-align: right;
}
#footer .footer-content .r-cont .text{
padding-right: 45px;
font-size: 12px;
margin-bottom: 20px;
}
#footer .footer-content .sns-link,
#footer .footer-content .page-link{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
}
#footer .footer-content .sns-link{
padding-right: 15px;
margin-bottom: 30px;
}
#footer .footer-content .sns-link li:not(:last-child){
margin-right: 20px;
}
#footer .footer-content .link{
display: inline-block;
text-align: left;
margin-bottom: 40px;
}
#footer .footer-content .link li a{
font-size: 12px;
letter-spacing: 0.08em;
color: #fff;
}
#footer .footer-content .page-link li a{
color: #fff;
font-size: 12px;
}
#footer .footer-content .page-link li:not(:last-child)::after{
content: "／";
padding: 0 4px;
font-size: 11px;
}
#footer .copyright-text{
font-size: 12px;
margin-top: -23px;
}
/* TOP */
.mv{
position: relative;
}
.mv img.mv-img{
width: 100%;
}
.mv .mv-text{
position: absolute;
transform: translateX(-50%);
top: 18%;
left: 50%;
font-size: 1.75vw;
color: #fff;
font-weight: bold;
letter-spacing: 0.5em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.mv .mv-text span{
padding: 0 18px;
display: block;
}
.mv .mv-text span + span{
border-right: 1px solid #fff;
}
.mv .scroll-bar{
position: absolute;
bottom: 40px;
left: 30px;
}
.mv .scroll-bar .scroll-text{
color: #fff;
font-size: 12px;
letter-spacing: 0.12em;
margin-bottom: 3px;
}
.mv .scroll-bar .arw-wrap{
overflow: hidden;
}
.mv .scroll-bar span.arw{
display: block;
animation: scroll 2.5s ease-in-out infinite normal;
}
@keyframes scroll {
0% {
transform: translateY(-100%)
}
30% {
transform: translateY(0%)
}
75% {
transform: translateY(0%)
}
85% {
transform: translateY(100%)
}
100% {
transform: translateY(100%)
}
}
.mv .scroll-bar span.arw img{
width: 8px;
margin: 0 auto;
display: block;
}
/*--------------------------------------------------------------
# 利用目的ナビ（ヒーロー直下 3分割）
--------------------------------------------------------------*/
.home-usage-nav{
display: flex;
gap: 40px;
width: 100%;
margin: 56px 0;
padding: 0 24px;
}
.home-usage-nav .usage-card{
position: relative;
display: block;
flex: 1 1 0;
height: 520px;
overflow: hidden;
color: var(--color-white);
}
.home-usage-nav .usage-card img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.home-usage-nav .usage-card::before{
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.05) 55%);
transition: background 0.4s ease;
}
.home-usage-nav .usage-card:hover img{
transform: scale(1.06);
}
.home-usage-nav .usage-card:hover::before{
background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.2) 60%);
}
.home-usage-nav .usage-label{
position: absolute;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
padding: 48px 20px;
text-align: center;
}
.home-usage-nav .usage-label .ja{
display: block;
font-size: 28px;
font-weight: bold;
letter-spacing: 0.18em;
line-height: 1.4;
}
.home-usage-nav .usage-label .en{
display: block;
margin-top: 8px;
font-size: 13px;
letter-spacing: 0.3em;
opacity: 0.85;
}
.home-usage-nav .usage-label .usage-desc{
display: block;
max-width: 22em;
margin: 14px auto 0;
font-size: 13px;
font-weight: normal;
line-height: 1.7;
letter-spacing: 0.04em;
opacity: 0.9;
}
.home-usage-nav .usage-arrow{
display: block;
width: 40px;
height: 1px;
margin: 18px auto 0;
background: var(--color-white);
transition: width 0.3s ease;
}
.home-usage-nav .usage-card:hover .usage-arrow{
width: 64px;
}
.home-sec01{
padding-top: 100px;
}
.news-content .news-box{
width: 23.6%;
margin-right: 1.8666%;
}
.news-content .news-box:nth-of-type(4n){
margin-right: 0;
}
.news-content .news-box:nth-of-type(n + 5){
margin-top: 1.8666%;
}
.news-content .news-box a{
display: block;
position: relative;
}
.news-content .news-box a:hover{
opacity: 1;
}
.news-content .news-box a:hover .thumb img{
transform: scale(1.1);
}
.news-content .news-box .thumb{
height: 334px;
overflow: hidden;
}
.news-content .news-box .thumb img{
width: 100%;
height: 100%;
object-fit: cover;
transition: 1s;
will-change: transform;
}
.news-content .news-box .news-meta{
position: absolute;
top: 20px;
left: 0;
padding: 10px 20px;
background-color: #000;
color: #fff;
}
.news-content .news-box .news-meta .date{
margin-bottom: 5px;
}
.news-content .news-box .news-meta .date,
.news-content .news-box .news-meta .cat{
font-size: 11px;
}
.news-content .news-box .excerpt{
position: absolute;
font-size: 12px;
padding: 10px 20px;
right: 0;
bottom: 20px;
background-color: #000;
color: #fff;
max-width: 88.4%;
letter-spacing: 0.08em;
}
.home-sec01 .view-more{
margin-top: 80px;
}
.home-sec02 .text.top{
font-size: 44px;
font-weight: bold;
letter-spacing: 0.5em;
line-height: 1.5;
margin: 0 auto 100px;
width: 200px;
}
.home-sec02 .text:not(.top){
max-width: 800px;
margin: 0 auto;
}
.home-sec02 .img{
margin-top: 100px;
}
.home-sec02 .img img{
width: 100%;
}
.home-sec03 .img-box{
margin: 0 -133px;
}
.home-sec03 .img-box .img img{
width: 100%;
}
.home-sec03 .img-box .flex{
margin-top: 8px;
}
.home-sec03 .img-box .flex .img{
width: 50%;
}
/* 位置は .is-right / .is-left モディファイアで決定（Facilities 全 4 施設を 1-2-3-4 の通し番号で扱うため） */
/* Cloud Lodge は単独で .cont に入っているため :not(:last-child) では下余白が付かない。
ベースルールとして全 .box に margin-bottom を当てたうえで、セクション最終 box (Starlight) のみ打ち消す */
.home-sec03 .box{
position: relative;
margin-bottom: 140px;
}
.home-sec03 .wrap > .cont:last-child > .box:last-child{
margin-bottom: 0;
}
.home-sec03 .box:first-child{
margin-top: -60px;
}
/* 画像が .box の内側にある Birch/Starlight のみ .ttl を絶対配置で画像に重ねる */
.home-sec03 .box:not(:first-child) .ttl{
position: absolute;
top: 60px;
}
/* 右寄せ (Cloud Lodge=1, Birch Terrace=3) */
.home-sec03 .box.is-right .ttl{
right: 0;
text-align: right;
}
.home-sec03 .box.is-right .ttl-text::before{
right: 0;
transform: translateX(100%);
}
.home-sec03 .box.is-right > .img img{
transform: translateX(-133px);
}
/* 左寄せ (芸森スタジオ=2, Starlight Camp=4) */
.home-sec03 .box.is-left .ttl{
left: 0;
}
.home-sec03 .box.is-left .ttl-text::before{
left: 0;
transform: translateX(-100%);
}
.home-sec03 .box.is-left > .img{
text-align: right;
}
.home-sec03 .box.is-left > .img img{
transform: translateX(133px);
}
.home-sec03 .box .ttl-text{
display: inline-block;
padding: 15px 70px 30px 90px;
background-color: rgba(247,248,248,.88);
position: relative;
font-size: 20px;
letter-spacing: 0.08em;
}
.home-sec03 .box .ttl-text::before{
content: "";
height: 100%;
position: absolute;
top: 0;
width: calc((100vw - 1100px)/2);
background-color: rgba(247,248,248,.88);
}
.home-sec03 .box .ttl-text span{
font-size: 60px;
font-weight: bold;
line-height: 1.3;
letter-spacing: 0.12em;
display: block;
font-family: 'Oswald','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.home-sec03 .box .ttl-text span::after{
content: "";
display: block;
height: 16px;
background-color: #E6DC6E;
margin-bottom: 5px;
}
.home-sec03 .box .text-box{
margin: 60px auto 0;
max-width: 800px;
}
.home-sec03 .box .text-box .text.top{
font-size: 30px;
line-height: 1.5;
margin-bottom: 40px;
letter-spacing: 0.12em;
font-weight: bold;
}
.home-sec03 .box .text-box .more{
margin-top: 60px;
}
/* PAGE */
.page-mv{
height: 600px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.page-mv .wrap{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.page-mv .page-title{
color: #fff;
font-family: 'Oswald','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 60px;
font-weight: bold;
letter-spacing: 0.12em;
}
/* BreadCrumbs */
.breadcrumbs{
margin-top: 10px;
}
.breadcrumbs span,
.breadcrumbs span a{
font-size: 12px;
color: #BABABA;
}
/* PAGE MENU */
.page-menu-sec{
margin: 30px 0 100px;
}
.page-menu-sec ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.page-menu-sec ul li{
border-left: 1px solid #DBDBDB;
}
.page-menu-sec ul li:last-child{
border-right: 1px solid #DBDBDB;
}
.page-menu-sec ul li a{
display: block;
padding: 0 64px 0 30px;
position: relative;
font-size: 12px;
color: #727171;
line-height: 1.7;
}
.page-menu-sec ul li a span{
font-size: 20px;
letter-spacing: 0.12em;
font-family: 'Oswald','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
display: block;
font-weight: bold;
color: #000;
transition: .3s;
}
.page-menu-sec ul li a::after{
content: "";
width: 20px;
height: 20px;
position: absolute;
transform: translateY(-50%);
top: 50%;
right: 30px;
transition: .3s;
background: url(../img/common/page-menu-arrow.svg) no-repeat center center / contain;
}
.page-menu-sec ul li a:hover{
opacity: 1;
}
.page-menu-sec ul li a:hover::after{
top: 60%;
}
.page-menu-sec ul li a:hover span{
color: #8B831D;
}
/* CloudLodge Group */
.cloudlodge-group-mv{
background-image: url(../img/cloudlodge-group/mv.png);
}
/* CloudLodge */
.cloudlodge-mv{
background-image: url(../img/cloudlodge/mv.png);
}
.cloud-sec01 .img-box .img.n1{
text-align: right;
}
/* イントロ2画像は施設トップ（section-intro を共有）と同じ 516×311 の枠に統一する。
object-fit: cover で編集者がアップロードした任意比率の画像をトリミングし、旧実装で
実寸表示され staggered 配置が崩れていた問題を解消する（施設トップの 516×311 画像は無変更）。 */
.cloud-sec01 .img-box .img.n1 img,
.cloud-sec01 .img-box .img.n2 img{
width: 516px;
max-width: 100%;
aspect-ratio: 516 / 311;
height: auto;
object-fit: cover;
}
.cloud-sec01 .img-box .img.n1 img{
transform: translateX(133px);
}
.cloud-sec01 .img-box .img.n2 img{
transform: translateX(-133px);
}
.cloud-sec01 .text-img{
position: absolute;
top: 0;
left: 0;
transform: translateX(-50%);
z-index: 1;
}
/* 縦書きキャッチは絶対配置だったため、文字数が増えると高さが確保されず、下の横書き見出し
（.text-box .text.top）に重なっていた（#175）。2画像と同じグリッドセルに重ねて置き、
1行目の高さを「キャッチ or 画像」の高いほうに合わせることで、長いキャッチでも
.text-box が必ずその下に来るようにする。見た目（中央・上から30px）は従来どおり。 */
.cloud-sec01 .wrap{
display: grid;
grid-template-columns: 1fr;
}
.cloud-sec01 .ttl-text{
grid-area: 1 / 1;
justify-self: center;
margin-top: 30px;
font-size: 30px;
font-weight: bold;
letter-spacing: 0.8em;
white-space: nowrap;
}
.cloud-sec01 .img-box{
grid-area: 1 / 1;
}
.cloud-sec01 .text-box{
grid-area: 2 / 1;
text-align: center;
margin-top: 90px;
}
.cloud-sec01 .text-box .text.top{
font-size: 30px;
font-weight: bold;
line-height: 2.2;
letter-spacing: 0;
}
.cloud-sec01 .text-box .text:not(.top){
line-height: 2;
margin: 50px 0 60px;
}
.cloud-sec02 .flex{
justify-content: space-between;
align-items: center;
}
.cloud-sec02 .flex .text-box{
width: 100%;
max-width: 370px;
}
.cloud-sec02 .flex .text-box .sub-text{
color: #8B831D;
font-weight: bold;
}
.cloud-sec02 .flex .text-box .name{
font-size: 30px;
font-weight: bold;
letter-spacing: 0.12em;
}
.cloud-sec02 .flex .text-box .text{
margin: 30px 0 50px;
}
.cloud-sec02 .flex:nth-of-type(odd) .text-box{
margin-right: 20px;
}
.cloud-sec02 .flex:nth-of-type(even) .text-box{
margin-left: 20px;
}
.cloud-sec02 .flex:nth-of-type(odd) .img img{
transform: translateX(-133px);
}
.cloud-sec02 .flex:nth-of-type(even){
flex-direction: row-reverse;
}
.cloud-sec02 .flex:nth-of-type(even) .img img{
transform: translateX(133px);
}
.cloud-sec02 .view-more,
.cloud-sec03 .view-more{
margin-top: 100px;
}
.cloud-sec04 .large-img,
.cloud-sec03 .large-img{
margin: 0 -133px;
}
.cloud-sec04 .large-img img,
.cloud-sec03 .large-img img{
width: 100%;
}
.cloud-sec03 .flex{
margin: 60px -113px 80px;
justify-content: space-between;
}
.cloud-sec03 .flex .img img{
width: 100%;
}
.video-wrap{
width: 100%;
max-width: 560px;
aspect-ratio: 16 / 9;
margin: 0 auto;
}
.video-wrap iframe{
width: 100%;
height: 100%;
display: block;
}
.cloud-sec03 .text{
line-height: 2;
text-align: center;
}
.cloud-sec04 .flex{
margin-top: 60px;
justify-content: space-between;
align-items: center;
}
.cloud-sec04 .flex .img img{
transform: translateX(-133px);
}
.cloud-sec04 .flex .text-box{
margin-right: 60px;
}
.cloud-sec04 .flex .text-box .more{
margin-top: 60px;
}
/* birchterrace */
.birchterrace-mv{
background-image: url(../img/birchterrace/mv.png);
}
.birch-sec01 .img-box .img.n1{
text-align: right;
}
.birch-sec01 .img-box .img.n1 img{
transform: translateX(133px);
}
.birch-sec01 .img-box .img.n2 img{
transform: translateX(-133px);
}
.birch-sec01 .text-img{
position: absolute;
top: 0;
left: 0;
transform: translateX(-50%);
z-index: 1;
}
.birch-sec01 .ttl-text{
position: absolute;
transform: translate(-50%);
top: 30px;
left: 50%;
font-size: 30px;
font-weight: bold;
letter-spacing: 0.8em;
white-space: nowrap;
}
.birch-sec01 .text-box{
text-align: center;
margin-top: 90px;
}
.birch-sec01 .text-box .text.top{
font-size: 30px;
font-weight: bold;
line-height: 2.2;
letter-spacing: 0;
}
.birch-sec01 .text-box .text:not(.top){
line-height: 2;
margin: 50px 0 60px;
}
.birch-sec02 .flex{
justify-content: space-between;
align-items: center;
}
.birch-sec02 .flex .text-box{
width: 100%;
max-width: 370px;
}
.birch-sec02 .flex .text-box .sub-text{
color: #8B831D;
font-weight: bold;
}
.birch-sec02 .flex .text-box .name{
font-size: 30px;
font-weight: bold;
letter-spacing: 0.12em;
}
.birch-sec02 .flex .text-box .text{
margin: 30px 0 50px;
}
.birch-sec02 .flex:nth-of-type(odd) .text-box{
margin-right: 20px;
}
.birch-sec02 .flex:nth-of-type(even) .text-box{
margin-left: 20px;
}
.birch-sec02 .flex:nth-of-type(odd) .img img{
transform: translateX(-133px);
}
.birch-sec02 .flex:nth-of-type(even){
flex-direction: row-reverse;
}
.birch-sec02 .flex:nth-of-type(even) .img img{
transform: translateX(133px);
}
.birch-sec02 .view-more,
.birch-sec03 .view-more{
margin-top: 100px;
}
.birch-sec04 .large-img,
.birch-sec03 .large-img{
margin: 0 -133px;
}
.birch-sec04 .large-img img,
.birch-sec03 .large-img img{
width: 100%;
}
.birch-sec03 .flex{
margin: 60px -113px 80px;
justify-content: space-between;
}
.birch-sec03 .flex .img img{
width: 100%;
}
.birch-sec03 .text{
line-height: 2;
text-align: center;
}
.birch-sec04 .flex{
margin-top: 60px;
justify-content: space-between;
align-items: center;
}
.birch-sec04 .flex .img img{
transform: translateX(-133px);
}
.birch-sec04 .flex .text-box{
margin-right: 60px;
}
.birch-sec04 .flex .text-box .more{
margin-top: 60px;
}
/* Environment */
.environment-mv{
background-image: url(../img/concept/img01.png);
}
/* CONCEPT */
.concept-mv{
background-image: url(../img/concept/mv.png);
}
.concept-sec01 .large-img{
margin: 0 -113px;
}
.concept-sec01 .large-img,
.concept-sec01 .img{
text-align: center;
}
.concept-sec01 .text-box{
padding: 80px 0;
text-align: center;
}
.concept-sec01 .text-box .text.top{
color: #8B831D;
font-size: 32px;
font-weight: bold;
letter-spacing: 0.12em;
margin-bottom: 20px;
}
.concept-sec01 .text-box .text.top small{
display: block;
color: #000;
font-size: 20px;
letter-spacing: 0.08em;
}
.concept-sec01 .text-box .text:not(.top){
line-height: 2;
}
.concept-sec01 .text-box.adjust{
margin-top: -80px;
background-color: #fff;
position: relative;
z-index: 1;
}
.concept-sec02 .text{
max-width: 900px;
line-height: 2;
margin: 0 auto 100px;
}
.concept-sec02 .spend-slider-wrap{
margin-left: calc((100vw - 1100px)/2);
padding-left: 80px;
padding-bottom: 55px;
position: relative;
z-index: 0;
}
.concept-sec02 .spend-slider-wrap::before{
content: "";
z-index: -1;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 85%;
background-color: #E6DC6E;
}
.concept-sec02 .spend-slider-item{
margin-right: 40px;
}
.concept-sec02 .spend-slider-item .en-name{
font-size: 44px;
font-weight: bold;
letter-spacing: 0.12em;
line-height: 1.2;
position: relative;
font-family: 'Oswald','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.concept-sec02 .spend-slider-item .en-name::before{
content: "";
height: 70px;
width: 1px;
background-color: #fff;
position: absolute;
top: -10px;
left: 0;
transform-origin: left bottom;
transform: rotate(45deg);
z-index: -1;
}
.concept-sec02 .spend-slider-item .name{
color: #8B831D;
}
.concept-sec02 .spend-slider-wrap .spend-slider-nav{
position: absolute;
transform: translateY(-50%);
top: 40%;
right: 20px;
cursor: pointer;
transition: .3s;
}
.concept-sec02 .spend-slider-wrap .spend-slider-nav:hover{
opacity: .6;
}
.concept-sec03 .wrap > .text{
text-align: center;
line-height: 2;
margin-bottom: 140px;
}
.concept-sec03 .flex{
justify-content: space-between;
}
.concept-sec03 .flex .box{
width: 45.45%;
position: relative;
}
.concept-sec03 .flex .box:nth-of-type(even){
margin-top: 75px;
margin-bottom: 80px;
}
.concept-sec03 .flex .box:nth-of-type(2){
margin-bottom: 80px;
}
.concept-sec03 .flex .box .num{
font-family: 'Oswald','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height: 1;
letter-spacing: 0.12em;
color: #E6DC6E;
font-size: 100px;
font-weight: bold;
position: absolute;
transform: translateY(-50%);
top: 0;
right: 0;
}
.concept-sec03 .flex .box .text.top{
font-size: 24px;
font-weight: bold;
letter-spacing: 0.12em;
margin: 15px 0 20px;
line-height: 1.6;
}
.concept-sec03 .flex .box .text.top span{
border-bottom: 3px solid #E6DC6E;
}
/* studio room */
.studio-mv{
background-image: url(../img/studio/mv.png)
}
.studio-room-mv{
background-image: url(../img/studio/room/mv.jpg);
}
/* GUEST ROOM */
.guest-mv{
background-image: url(../img/guest/mv.png);
}
.attention-box{
background-color: #FFFCDE;
max-width: 720px;
margin: 0 auto;
padding: 20px 60px;
}
.attention-box .attention-box-text{
text-align: center;
font-weight: bold;
color: #8B831D;
font-weight: bold;
}
.guest-sec01 .text{
text-align: center;
line-height: 2;
max-width: 900px;
margin: 0 auto 40px;
}
.room-sec .room-slider-wrap,
.service-sec .service-slider-wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.room-sec .room-main-slider-wrap,
.service-sec .service-main-slider-wrap{
max-width: 880px;
width: 100%;
}
/* 画像 1 枚の部屋はサムネイル列なしでメイン画像を中央に置く（#255）。 */
.room-sec .room-slider-wrap.is-single{
justify-content: center;
}
.room-sec .room-slider-wrap.is-single .room-slider-item img{
max-width: 100%;
margin: 0 auto;
}
.room-sec .room-thumb-img,
.service-sec .service-thumb-img{
max-width: 186px;
width: 100%;
}
.room-sec .room-thumb-img ul,
.service-sec .service-thumb-img ul{
height: 100%;
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.room-sec .room-thumb-img ul li:not(:last-child),
.service-sec .service-thumb-img ul li:not(:last-child){
margin-bottom: 0;
}
.room-sec .room-thumb-img ul li,
.service-sec .service-thumb-img ul li{
flex: 1;
min-height: 0;
position: relative;
overflow: hidden;
cursor: pointer;
}
.room-sec .room-thumb-img ul li img,
.service-sec .service-thumb-img ul li img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.room-sec .flex{
margin-top: 60px;
justify-content: space-between;
}
.room-sec .flex .text-box{
width: 100%;
max-width: 500px;
}
.room-sec .flex .text-box .text.top{
font-size: 30px;
font-weight: bold;
letter-spacing: 0.12em;
margin-bottom: 30px;
line-height: 1.5;
}
.room-sec .flex .text-box .text:not(.top){
line-height: 2;
}
.room-sec .flex .text-box .gradient-btn{
margin-top: 60px;
}
.room-sec .flex .text-box .gradient-btn a{
background-color: #8B831D;
}
.room-sec .flex .text-box .gradient-btn a::before{
background: linear-gradient(to left, #ffea00 0%, #8b831d 100%);
}
.room-sec .flex .desc{
max-width: 470px;
width: 100%;
}
.room-sec .flex .desc{
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.room-sec .flex .desc dl{
display: flex;
flex-wrap: wrap;
padding: 35px 0;
}
.room-sec .flex .desc dl dt{
width: 100%;
max-width: 200px;
color: #8B831D;
font-size: 20px;
font-weight: bold;
}
.room-sec .flex .desc dl dd{
width: 100%;
max-width: calc(100% - 200px);
}
.room-sec .flex .desc dl:not(:last-child){
border-bottom: 1px dashed #BABABA;
}
.guest-sec03{
background-color: #F7F8F8;
}
.guest-sec04 .att{
text-align: center;
margin-top: 100px;
}
.guest-sec05{
background-color: #FFFCDE;
}
.guest-sec05 .box:not(:last-child){
margin-bottom: 80px;
}
.guest-sec05 .ttl-text{
font-weight: bold;
font-size: 30px;
letter-spacing: 0.12em;
text-align: center;
margin-bottom: 40px;
}
.guest-sec05 .option-list,
.service-sec09 .option-list{
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.guest-sec05 .option-list dl,
.service-sec09 .option-list dl{
display: flex;
flex-wrap: wrap;
padding: 40px 0;
}
.guest-sec05 .option-list dl:not(:last-child),
.service-sec09 .option-list dl:not(:last-child){
border-bottom: 1px dashed #BABABA;
}
.guest-sec05 .option-list dl dt,
.service-sec09 .option-list dl dt{
width: 100%;
max-width: calc(100% - 470px);
font-weight: bold;
font-size: 20px;
color: #8B831D;
}
.guest-sec05 .option-list dl dd,
.service-sec09 .option-list dl dd{
width: 100%;
max-width: 470px;
}
.guest-sec05 .option-list dl dd .gradient-btn a{
max-width: 320px;
}
/* CloudLodge プラン一覧 */
.cloudlodge-plan-mv{
background-image: url(../img/cloudlodge-plan/mv.png);
}
.cloudlodge-plan-sec02 .plan-list-item{
padding: 100px 0;
border-bottom: 1px solid #000;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.cloudlodge-plan-sec02 .plan-list-item:first-child{
padding-top: 0;
}
.cloudlodge-plan-sec02 .plan-list-item:last-child{
border-bottom: none;
}
.cloudlodge-plan-sec02 .plan-list-item .img{
width: 100%;
max-width: 450px;
}
.cloudlodge-plan-sec02 .plan-list-item .text-box{
width: 100%;
max-width: calc(100% - 500px);
}
.cloudlodge-plan-sec02 .plan-list-item .text-box .name{
font-size: 24px;
font-weight: bold;
letter-spacing: 0.12em;
}
.cloudlodge-plan-sec02 .plan-list-item .text-box ul li{
padding-left: 1em;
}
.cloudlodge-plan-sec02 .plan-list-item .text-box ul li::before{
content: "・";
margin-left: -1em;
}
.cloudlodge-plan-sec02 .plan-list-item .text-box ul{
margin: 20px 0;
padding-bottom: 20px;
border-bottom: 1px dashed #BABABA;
}
.cloudlodge-plan-sec02 .plan-list-item .text-box .price-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.cloudlodge-plan-sec02 .plan-list-item .text-box .price-box dl{
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 20px;
}
.cloudlodge-plan-sec02 .plan-list-item .text-box .price-box dl dt{
font-size: 20px;
font-weight: bold;
margin-right: 20px;
position: relative;
bottom: -4px;
}
.cloudlodge-plan-sec02 .plan-list-item .text-box .price-box dl dd{
font-size: 30px;
letter-spacing: 0.12em;
font-weight: bold;
}
.cloudlodge-plan-sec02 .plan-list-item .text-box .gradient-btn{
margin-top: 40px;
}
.cloudlodge-plan-sec02 .plan-list-item .text-box .gradient-btn a{
max-width: 300px;
}
/* CloudLodge 予約 */
.cloudlodge-reserve-sec01 .text{
text-align: center;
}
.cloudlodge-reserve-sec02 .reserve-detail dl{
display: flex;
flex-wrap: wrap;
padding: 40px 0;
border-bottom: 1px dashed #BABABA;
}
.cloudlodge-reserve-sec02 .reserve-detail dl:first-child{
padding-top: 0;
}
.cloudlodge-reserve-sec02 .reserve-detail dl:last-child{
border-bottom: none;
padding-bottom: 0;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dt{
font-size: 20px;
font-weight: bold;
color: #8B831D;
width: 100%;
max-width: calc(100% - 710px);
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd{
width: 100%;
max-width: 710px;
font-size: 20px;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd .select-box{
display: inline-block;
position: relative;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd .select-box::before{
content: "";
position: absolute;
width: 10px;
height: 8px;
transform: translateY(-50%);
top: 50%;
right: 10px;
background: url(../img/common/select-arrow.svg) no-repeat center center / contain;
pointer-events: none;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd .select-box select{
border: 1px solid #BABABA;
-webkit-appearance: none;
appearance: none;
box-shadow: none;
border-radius: 5px;
width: 280px;
height: 50px;
font-size: 14px;
padding: 0 20px;
letter-spacing: 0.1em;
cursor: pointer;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd .flex{
justify-content: space-between;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd .flex .item span{
font-weight: bold;
margin-right: 13px;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd .flex .item select{
width: 240px;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd input[type="checkbox"]{
display: none;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd label{
cursor: pointer;
position: relative;
font-size: 16px;
margin-bottom: 25px;
display: inline-block;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd label:last-child{
margin-bottom: 0;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd label::before{
content: "";
width: 20px;
height: 20px;
border: 1px solid #727171;
border-radius: 2px;
display: inline-block;
margin-right: 14px;
vertical-align: middle;
position: relative;
top: -2px;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd label::after{
content: "";
position: absolute;
top: 11px;
left: 6px;
width: 12px;
height: 9px;
transition: .3s;
opacity: 0;
background: url(../img/common/select-check.svg) no-repeat center center / contain;
}
.cloudlodge-reserve-sec02 .reserve-detail dl dd input[type="checkbox"]:checked + label::after{
opacity: 1;
}
.cloudlodge-reserve-sec03{
background-color: #F7F8F8;
}
/* ミニマル・スタックド：table をブロック化しラベル上・入力横幅いっぱいに（#44） */
.form-wrap table,
.form-wrap table tbody,
.form-wrap table tr,
.form-wrap table th,
.form-wrap table td{
display: block;
width: 100%;
}
.form-wrap table tr{
margin-bottom: 26px;
}
.form-wrap table tr:last-child{
margin-bottom: 0;
}
.form-wrap table th,
.form-wrap table td{
padding: 0;
border: none;
text-align: left;
}
/* 見出しは「ラベル → バッジ」の並びにする。バッジが先頭にあると視線が
ラベルより先に必須表示へ行き、項目名が読み取りにくいため（#148）。
CF7 は wpautop でセルの中身を で包むため、その
も flex にしないと
バッジ（span）が並べ替えの対象にならない。 */
.form-wrap table th{
color: var(--color-text);
font-weight: 600;
font-size: 15px;
line-height: 1.6;
margin-bottom: 10px;
}
.form-wrap table th,
.form-wrap table th > p{
display: flex;
align-items: center;
gap: 10px;
}
.form-wrap table th > p{
margin: 0;
}
.form-wrap table th span{
order: 2;
border-radius: 999px;
margin-left: 0;
color: #fff;
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.6;
vertical-align: middle;
padding: 2px 10px;
}
/* 必須はサイトのアクセント（ゴールド）に合わせる。任意は白地の枠線で
「必須ではない」ことを色の強さで伝える。 */
.form-wrap table th span.must{
background-color: var(--color-gold-dark);
}
.form-wrap table th span.any{
background-color: #fff;
color: #8a8a8a;
border: 1px solid #d8d8d8;
padding: 1px 9px;
}
.form-wrap table td .sample{
display: block;
margin-top: 8px;
margin-bottom: 0;
font-size: 12.5px;
line-height: 1.7;
letter-spacing: 0.04em;
color: #8b8b8b;
}
.form-wrap table td input[type="text"],
.form-wrap table td input[type="email"],
.form-wrap table td input[type="tel"],
.form-wrap table td input[type="number"],
.form-wrap table td input[type="date"],
.form-wrap table td select,
.form-wrap table td textarea{
-webkit-appearance: none;
appearance: none;
box-shadow: none;
width: 100%;
max-width: 100%;
border: 1px solid #e2e0d8;
background-color: #fbfaf7;
border-radius: 10px;
padding: 0 18px;
height: 56px;
font-size: 16px;
color: var(--color-text);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
/* 数値・日付は入力の長さが決まっているため、横いっぱいには広げない。 */
.form-wrap table td input[type="number"]{
max-width: 200px;
}
.form-wrap table td input[type="date"]{
max-width: 260px;
}
/* プルダウンは appearance:none で矢印が消えるため、自前の三角を描く。 */
.form-wrap table td select{
padding-right: 44px;
background-image: linear-gradient( 45deg, transparent 50%, #888 50% ), linear-gradient( 135deg, #888 50%, transparent 50% );
background-position: calc( 100% - 22px ) calc( 50% - 2px ), calc( 100% - 16px ) calc( 50% - 2px );
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
cursor: pointer;
}
.form-wrap table td textarea{
padding: 16px 18px;
height: 180px;
line-height: 1.8;
resize: vertical;
}
.form-wrap table td input[type="text"]::placeholder,
.form-wrap table td input[type="email"]::placeholder,
.form-wrap table td input[type="tel"]::placeholder,
.form-wrap table td input[type="number"]::placeholder,
.form-wrap table td textarea::placeholder{
color: #b5b5b5;
}
.form-wrap table td input[type="text"]:focus,
.form-wrap table td input[type="email"]:focus,
.form-wrap table td input[type="tel"]:focus,
.form-wrap table td input[type="number"]:focus,
.form-wrap table td input[type="date"]:focus,
.form-wrap table td select:focus,
.form-wrap table td textarea:focus{
outline: none;
background-color: #fff;
border-color: var(--color-gold-main);
box-shadow: 0 0 0 3px rgba(160, 153, 75, 0.18);
}
.form-wrap table td .address-box .text{
font-weight: 600;
color: var(--color-gold-dark);
margin-bottom: 8px;
}
.form-wrap table td .address-box span.space{
display: block;
height: 16px;
}
/* 選択肢（ラジオ・チェックボックス・同意）。
Contact Form 7 6.x は
を出力する。input と label は兄弟にならないため `input:checked + label::after` は
当たらず、input を display:none にするとクリックできる要素が残らないまま
「選択できないフォーム」になる（CF7 6.1.5 でローカル実測）。
マークアップの形に依存しないよう、input 自身を appearance:none で描画する。 */
.form-wrap table td .wpcf7-list-item{
display: inline-block;
margin: 4px 28px 4px 0;
}
.form-wrap table td .wpcf7-list-item:last-child{
margin-right: 0;
}
.form-wrap table td .wpcf7-list-item label{
display: inline-flex;
align-items: center;
cursor: pointer;
font-weight: 400;
}
.form-wrap table td input[type="radio"],
.form-wrap table td input[type="checkbox"],
.form-wrap .agree-box input[type="checkbox"]{
-webkit-appearance: none;
appearance: none;
flex: none;
width: 20px;
height: 20px;
margin: 0 8px 0 0;
padding: 0;
border: 1px solid #c4c4c4;
background-color: #fff;
position: relative;
vertical-align: middle;
cursor: pointer;
transition: border-color 0.2s ease;
}
.form-wrap table td input[type="radio"]{
border-radius: 50%;
}
.form-wrap table td input[type="checkbox"],
.form-wrap .agree-box input[type="checkbox"]{
border-radius: 2px;
}
.form-wrap .agree-box input[type="checkbox"]{
border-color: #727171;
margin-right: 14px;
}
.form-wrap table td input[type="radio"]:checked,
.form-wrap table td input[type="checkbox"]:checked,
.form-wrap .agree-box input[type="checkbox"]:checked{
border-color: var(--color-gold-main);
}
.form-wrap table td input[type="radio"]::after,
.form-wrap table td input[type="checkbox"]::after,
.form-wrap .agree-box input[type="checkbox"]::after{
content: "";
position: absolute;
transition: .3s;
opacity: 0;
}
.form-wrap table td input[type="radio"]::after{
top: 4px;
left: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--color-gold-main);
}
.form-wrap table td input[type="checkbox"]::after,
.form-wrap .agree-box input[type="checkbox"]::after{
top: 4px;
left: 3px;
width: 12px;
height: 9px;
background: url(../img/common/select-check.svg) no-repeat center center / contain;
}
.form-wrap table td input[type="radio"]:checked::after,
.form-wrap table td input[type="checkbox"]:checked::after,
.form-wrap .agree-box input[type="checkbox"]:checked::after{
opacity: 1;
}
.form-wrap table td input[type="radio"]:focus-visible,
.form-wrap table td input[type="checkbox"]:focus-visible,
.form-wrap .agree-box input[type="checkbox"]:focus-visible{
outline: 2px solid var(--color-gold-main);
outline-offset: 2px;
}
/* 同意チェック。CF7 の acceptance も list-item 構造で出力される。
送信ボタンの直前に置かれる最後の関門なので、枠で囲って独立させる（#148）。 */
.form-wrap .agree-box{
margin-top: 40px;
padding: 20px 24px;
background-color: #f7f6f1;
border: 1px solid #eae7dc;
border-radius: 12px;
text-align: center;
}
.form-wrap .agree-box .wpcf7-list-item{
margin: 0;
}
.form-wrap .agree-box label{
display: inline-flex;
align-items: center;
cursor: pointer;
position: relative;
font-size: 15px;
letter-spacing: 0.04em;
}
/* 条件表示（#45）。条件を満たさない設問行は隠す。
サーバー側が初期状態として付与し、以降は geimori.js が切り替える。 */
.form-wrap tr.is-cond-hidden {
display: none;
}
.form-wrap .submit-btn-wrap{
margin-top: 40px;
text-align: center;
}
.form-wrap .submit-btn{
display: inline-block;
max-width: 360px;
width: 100%;
background-color: #1a1a1a;
border-radius: 999px;
position: relative;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.form-wrap .submit-btn::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--color-gold-dark) 0%, var(--color-gold-main) 100%);
opacity: 0;
transition: opacity 0.35s ease;
}
.form-wrap .submit-btn:hover{
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.form-wrap .submit-btn:hover::before{
opacity: 1;
}
.form-wrap .submit-btn::after{
content: "\2192";
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
color: #fff;
font-size: 16px;
z-index: 1;
pointer-events: none;
transition: transform 0.2s ease;
}
.form-wrap .submit-btn:hover::after{
transform: translate(4px, -50%);
}
.form-wrap .submit-btn input{
background: none;
border: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
color: #fff;
font-size: 15px;
font-weight: bold;
letter-spacing: 0.14em;
display: block;
width: 100%;
text-align: center;
padding: 21px 0;
position: relative;
z-index: 1;
cursor: pointer;
}
/* 送信中は押せないので見た目でも伝える（CF7 は送信中 submit を disabled にする）。 */
.form-wrap .submit-btn input:disabled{
cursor: wait;
opacity: 0.6;
}
/* ---- Contact Form 7 のバリデーション・送信結果（#148）----
CF7 既定の赤枠・素の文字のままだとフォームだけ様式が古く見えるため、
入力欄と同じ角丸・余白の言語にそろえる。 */
.form-wrap .wpcf7-not-valid-tip{
display: block;
margin-top: 8px;
color: #b8453a;
font-size: 12.5px;
line-height: 1.7;
}
.form-wrap table td .wpcf7-not-valid{
border-color: #dfb2ab;
background-color: #fdf8f7;
}
.form-wrap .wpcf7-response-output{
margin: 32px 0 0;
padding: 16px 20px;
border: 1px solid #e2e0d8;
border-radius: 12px;
font-size: 14px;
line-height: 1.9;
text-align: center;
}
.form-wrap form.invalid .wpcf7-response-output,
.form-wrap form.unaccepted .wpcf7-response-output,
.form-wrap form.payment-required .wpcf7-response-output{
border-color: #e6ccc7;
background-color: #fdf8f7;
color: #a8443a;
}
.form-wrap form.sent .wpcf7-response-output{
border-color: #d3e0cd;
background-color: #f6faf4;
color: #3f7a43;
}
.form-wrap .wpcf7-spinner{
margin: 16px auto 0;
display: block;
}
.cloudlodge-reserve-sec03{
padding-bottom: 100px;
}
.cloudlodge-reserve-sec04{
padding-top: 100px;
}
/* お問い合わせ */
.contact-mv{
background-image: url(../img/contact/mv.png);
}
/* 用途選択・入力の全体をクリーム地に置き、フォームを白いカードとして浮かせる（#148）。
入力に集中してもらうため、この 2 セクションだけ地の色を変える。 */
.contact-sec01,
.contact-sec02,
.contact-branch-sec{
background-color: var(--color-bg-cream);
}
/* セクション間で余白が相殺されて地の色が途切れないよう、余白は padding で持つ。 */
.contact-sec01{
padding-top: 64px;
padding-bottom: 44px;
}
.contact-sec01 .text{
text-align: center;
margin-bottom: 0;
line-height: 2;
}
.contact-sec02{
padding-bottom: 120px;
}
.contact-sec02 .form-wrap{
max-width: 760px;
margin: 0 auto;
padding: 56px 56px 60px;
background-color: var(--color-white);
border: 1px solid rgba(0, 0, 0, 0.04);
border-radius: 18px;
box-shadow: 0 18px 44px rgba(26, 24, 16, 0.07);
}
/* ---- 進行ステップ（#148）----
「いま何段階目か」を示して、フォームの長さに対する心理的な負担を下げる。 */
.contact-steps{
list-style: none;
padding: 0;
margin: 0 auto 44px;
max-width: 620px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.contact-step{
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
letter-spacing: 0.06em;
color: #9c9887;
white-space: nowrap;
}
.contact-step::after{
content: "";
display: block;
width: 40px;
height: 1px;
margin-left: 8px;
background-color: #d8d4c4;
}
.contact-step:last-child::after{
display: none;
}
.contact-step-num{
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid #d8d4c4;
background-color: transparent;
font-size: 12px;
font-weight: bold;
line-height: 1;
}
.contact-step.is-current{
color: var(--color-black);
font-weight: bold;
}
.contact-step.is-current .contact-step-num{
background-color: var(--color-gold-main);
border-color: var(--color-gold-main);
color: #fff;
}
.contact-step.is-done{
color: var(--color-gold-dark);
}
.contact-step.is-done .contact-step-num{
border-color: var(--color-gold-main);
color: var(--color-gold-dark);
}
/* ---- 用途選択（#105・#148 でカードを 2 列化）---- */
.contact-branch-sec{
padding-top: 4px;
padding-bottom: 120px;
}
.contact-branch-heading{
text-align: center;
font-size: 20px;
font-weight: bold;
letter-spacing: 0.08em;
margin-bottom: 32px;
}
.contact-branch-list{
max-width: 880px;
margin: 0 auto;
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.contact-branch-item{
display: flex;
}
.contact-branch-card{
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
position: relative;
overflow: hidden;
padding: 30px 68px 30px 32px;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 16px;
background-color: var(--color-white);
box-shadow: 0 6px 20px rgba(26, 24, 16, 0.05);
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
/* hover で左端にゴールドの帯を伸ばし、選択できることを示す。 */
.contact-branch-card::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(to bottom, var(--color-gold-main), var(--color-gold-dark));
transform: scaleY(0);
transform-origin: top center;
transition: transform 0.3s ease;
}
.contact-branch-card:hover{
border-color: rgba(160, 153, 75, 0.5);
box-shadow: 0 14px 32px rgba(26, 24, 16, 0.1);
transform: translateY(-3px);
opacity: 1;
}
.contact-branch-card:hover::before{
transform: scaleY(1);
}
.contact-branch-card-label{
display: block;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.06em;
color: var(--color-black);
}
.contact-branch-card-desc{
display: block;
margin-top: 10px;
font-size: 13px;
line-height: 1.9;
color: var(--color-text-sub);
}
/* お電話でのお問い合わせ（#260）。用途ボタンの下。 */
.contact-tel-box{
max-width: 880px;
margin: 48px auto 0;
padding: 28px 20px;
text-align: center;
background-color: var(--color-white);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 16px;
box-shadow: 0 6px 20px rgba(26, 24, 16, 0.05);
}
.contact-tel-heading{
margin: 0 0 8px;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.08em;
color: var(--color-black);
}
.contact-tel-number{
margin: 0;
}
.contact-tel-number a{
font-size: 32px;
font-weight: bold;
letter-spacing: 0.1em;
color: var(--color-gold-dark);
}
.contact-tel-note{
margin: 8px 0 0;
font-size: 13px;
color: var(--color-text-sub);
}
@media (max-width: 750px){
.contact-tel-box{
margin-top: 32px;
}
.contact-tel-number a{
font-size: 26px;
}
}
.contact-branch-card-arrow{
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: #f4f3ec url(../img/common/page-menu-arrow.svg) no-repeat center center / 16px 16px;
transition: background-color 0.25s ease, transform 0.2s ease;
}
.contact-branch-card:hover .contact-branch-card-arrow{
background-color: var(--color-bg-beige);
transform: translateY(-50%) translateX(4px);
}
/* 用途選択後のヘッダー（見出し・選び直しリンク） */
.contact-branch-current{
text-align: center;
font-size: 24px;
font-weight: bold;
letter-spacing: 0.08em;
margin-bottom: 16px;
}
.contact-branch-back{
text-align: center;
margin-top: 24px;
margin-bottom: 0;
font-size: 13px;
}
.contact-branch-back a{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 20px;
border: 1px solid #ddd9c9;
border-radius: 999px;
background-color: var(--color-white);
color: var(--color-text-sub);
text-decoration: none;
letter-spacing: 0.06em;
transition: border-color 0.2s ease, color 0.2s ease;
}
.contact-branch-back a::before{
content: "\2190";
font-size: 13px;
line-height: 1;
}
.contact-branch-back a:hover{
border-color: var(--color-gold-main);
color: var(--color-gold-dark);
opacity: 1;
}
/* フォーム未設定時の案内 */
.contact-branch-notice{
text-align: center;
line-height: 2;
}
.contact-branch-admin-note{
margin-top: 16px;
padding: 12px 16px;
border: 1px solid #c00;
color: #c00;
font-size: 13px;
line-height: 1.8;
}
/* GALLERY */
.gallery-mv{
background-image: url(../img/gallery/mv.png);
}
/* ---- Gallery grid（gallery ページ・各施設の出し分け共通 / #40）---- */
.gallery .gallery-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
}
/* カテゴリー絞り込みの非表示（#108）。サーバー側の初期表示と JS の切替で同じクラスを使う。 */
.gallery-item.is-hidden {
display: none;
}
.gallery .gallery-item {
flex-basis: calc( 20% - 8px );
overflow: hidden;
cursor: pointer;
}
.gallery .gallery-item img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
transition: opacity 0.3s ease;
}
.gallery .gallery-item img:hover {
opacity: 0.85;
}
.gallery-empty {
text-align: center;
color: #888;
padding: 40px 0;
}
/* ---- Gallery modal（拡大表示・共通）---- */
#gallery-modal {
display: none;
position: fixed;
inset: 0;
z-index: 9000;
background: rgba( 0, 0, 0, 0.85 );
align-items: center;
justify-content: center;
}
#gallery-modal.is-open {
display: flex;
}
#gallery-modal-inner {
position: relative;
max-width: 90vw;
max-height: 90vh;
}
#gallery-modal-img {
display: block;
max-width: 100%;
max-height: 85vh;
object-fit: contain;
}
#gallery-modal-caption {
color: #fff;
text-align: center;
margin-top: 8px;
font-size: 0.9em;
}
.gallery-modal-close {
position: absolute;
top: -36px;
right: 0;
background: none;
border: none;
color: #fff;
font-size: 2rem;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
/* ギャラリーページ内フィルターの選択状態 */
.page-menu-sec a.current span {
color: #8B831D;
}
/* STARLIGHT CAMP */
.camp-mv{
background-image: url(../img/camp/camp-top-img01.jpg);
}
/* SERVICE */
.service-mv{
background-image: url(../img/service/mv.png);
}
.service-sec01 .text{
text-align: center;
line-height: 2;
}
.service-sec .text-box{
margin-top: 50px;
}
.service-sec .text-box .text.top{
font-size: 30px;
font-weight: bold;
letter-spacing: 0.12em;
margin-bottom: 30px;
}
.service-sec03,
.service-sec05,
.service-sec07{
background-color: #F7F8F8;
}
.service-sec09{
background-color: #FFFCDE;
}
/* 芸森スタジオ 機材一覧 */
.studio-equipment-mv{
background-image: url(../img/studio-equipment/mv.png);
}
/* 芸森スタジオ プラン一覧 */
.studio-plan-mv{
background-image: url(../img/studio-plan/mv.png);
}
.studio-plan-sec01 .text{
text-align: center;
line-height: 2;
}
.studio-plan-sec02 .label-text,
.register-sec02 .label-text{
text-align: center;
background-color: #E6DC6E;
border-radius: 10px;
margin-bottom: 65px;
font-size: 30px;
font-weight: bold;
letter-spacing: 0.12em;
padding: 18px 0;
position: relative;
}
.studio-plan-sec02 .label-text::before,
.register-sec02 .label-text::before{
content: "";
width: 28px;
height: 24px;
position: absolute;
transform: translate(-50%,100%);
left: 50%;
bottom: 0;
background: url(../img/studio-plan/balloon-tail.svg) no-repeat center center / contain;
}
.studio-plan-sec02 .ttl-text{
font-size: 24px;
font-weight: bold;
letter-spacing: 0.12em;
border-bottom: 1px solid #727171;
border-left: 10px solid #000;
padding: 17px 10px 17px 15px;
margin-bottom: 30px;
}
.studio-plan-sec02 .cont:not(:last-child){
margin-bottom: 100px;
}
.studio-plan-sec02 .box:not(:last-child){
margin-bottom: 60px;
}
.studio-plan-sec02 .box .flex{
justify-content: space-between;
}
.studio-plan-sec02 .box .flex .item{
background-color: #F7F8F8;
width: 48.6%;
}
.studio-plan-sec02 .box .flex .item dl{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 30px 22px;
font-size: 20px;
color: #8B831D;
height: 100%;
line-height: 1.6;
}
.studio-plan-sec02 .box .price-list table{
width: 100%;
}
.studio-plan-sec02 .box .price-list table tr.border-none td{
border-bottom: none;
}
.studio-plan-sec02 .box .price-list table tr.border-none td{
padding-bottom: 0;
}
.studio-plan-sec02 .box .price-list table tr.border-none + tr td{
padding-top: 20px;
}
.studio-plan-sec02 .box .price-list table th,
.studio-plan-sec02 .box .price-list table td{
padding: 30px 22px;
border-bottom: 1px dashed #BABABA;
}
.studio-plan-sec02 .box .price-list table th{
font-size: 20px;
font-weight: bold;
}
.studio-plan-sec02 .box .price-list table th small{
display: block;
font-size: 16px;
font-weight: normal;
}
.studio-plan-sec02 .box .price-list table td.price{
letter-spacing: 0.12em;
color: #8B831D;
font-weight: bold;
text-align: right;
}
.studio-plan-sec02 .box .price-list table td{
font-size: 20px;
}
.studio-plan-sec02 .box .price-list .att{
margin-top: 10px;
color: #FF7600;
text-align: right;
}
.studio-plan-sec02 .box .text{
text-align: center;
}
.studio-plan-sec02 .box .tel-box{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 30px 20px;
background-color: #FFFCDE;
margin-top: 100px;
}
.studio-plan-sec02 .box .tel-box .tel-text{
font-size: 20px;
font-weight: bold;
color: #8B831D;
margin-right: 40px;
}
.studio-plan-sec02 .box .tel-box .tel-link a{
font-size: 44px;
font-weight: bold;
color: #8B831D;
letter-spacing: 0.12em;
}
/* 電話番号の代わりにお問い合わせフォームへのボタンを置く場合（#259 団体利用）。 */
.studio-plan-sec02 .box .tel-box .tel-link--form a{
display: inline-block;
padding: 16px 48px;
border-radius: 999px;
background-color: #8B831D;
color: #fff;
font-size: 18px;
letter-spacing: 0.08em;
transition: opacity 0.25s ease;
}
.studio-plan-sec02 .box .tel-box .tel-link--form a:hover{
opacity: 0.8;
}
/* Starlight Camp 会員登録 */
.register-mv{
background-image: url(../img/register/mv.png);
}
.register-sec01 .text{
text-align: center;
line-height: 2;
}
.register-sec02 .box{
background-color: #F4F3EC;
height: 263px;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 60px;
margin-bottom: 80px;
}
.register-sec02 .box:last-child{
margin-bottom: 0;
}
.register-sec02 .box.adjust{
height: 338px;
}
.register-sec02 .box .num{
position: absolute;
top: -40px;
left: 60px;
font-size: 100px;
line-height: 1;
color: #E6DC6E;
font-weight: bold;
letter-spacing: 0.12em;
font-family: 'Oswald','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.register-sec02 .box .text.top{
position: absolute;
top: 100px;
left: 60px;
white-space: nowrap;
font-size: 30px;
letter-spacing: 0.12em;
font-weight: bold;
}
.register-sec02 .box .text.top span{
position: relative;
z-index: 0;
}
.register-sec02 .box .text.top span::before{
content: "";
z-index: -1;
width: 100%;
height: 12px;
background-color: #E6DC6E;
position: absolute;
bottom: 0;
left: 0;
}
.register-sec02 .box .text-box{
max-width: 450px;
margin-left: auto;
}
.register-sec02 .box .text-box .text{
font-weight: 500;
}
.register-sec02 .box .text-box .text span{
color: #FF7600;
font-weight: bold;
font-size: 20px;
letter-spacing: 0.08em;
}
.register-sec02 .box .text-box .text.normal{
font-weight: normal;
}
.register-sec02 .box .text-box .large-text{
font-size: 20px;
font-weight: bold;
line-height: 1.6;
margin: 20px 0;
padding-bottom: 20px;
border-bottom: 1px dashed #BABABA;
}
.register-sec02 .box .text-box .large-text span{
color: #FF7600;
}
.register-sec03 .box{
background-color: #FFFCDE;
padding: 20px;
text-align: center;
}
.register-sec03 .box .text{
font-weight: bold;
font-size: 30px;
letter-spacing: 0.12em;
}
.register-sec03 .box .text span{
font-size: 20px;
margin-right: 20px;
letter-spacing: 0.08em;
position: relative;
top: -3px;
}
.register-sec03 .box .text small{
display: block;
font-size: 20px;
font-weight: normal;
letter-spacing: 0.08em;
}
.register-sec04{
background-color: #F7F8F8;
}
.register-sec04 .text.top{
text-align: center;
margin-bottom: 20px;
}
.register-sec04 .agree-box{
text-align: center;
margin-top: 40px;
background-color: #F4F3EC;
padding: 40px 20px;
}
.register-sec04 .agree-box .agree-text{
margin-bottom: 20px;
}
.register-sec04 .agree-box .agree-text a{
color: #8B831D;
text-decoration: underline;
font-weight: bold;
}
.register-sec04 .agree-box .agree-text a::after{
content: "";
width: 12px;
height: 10px;
background: url(../img/common/icon-link.svg) no-repeat center center / contain;
display: inline-block;
margin-left: 5px;
vertical-align: middle;
position: relative;
top: -3px;
}
.register-sec04 .agree-box label{
margin-bottom: 0;
}
.register-sec04 .agree-box label::before{
background-color: #fff;
}
/* NEWS 一覧 */
.news-mv{
background-image: url(../img/news/mv.png);
}
.news-archive-sec .cat-menu{
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 20px 60px;
border: 1px solid #707070;
margin-bottom: 80px;
}
.news-archive-sec .cat-menu .text{
font-size: 24px;
font-weight: bold;
letter-spacing: 0.12em;
width: 100%;
max-width: 180px;
}
.news-archive-sec .cat-menu ul{
display: flex;
flex-wrap: wrap;
padding-left: 85px;
width: 100%;
max-width: calc(100% - 180px);
border-left: 1px solid #707070;
}
.news-archive-sec .cat-menu ul li a{
font-weight: bold;
color: #000;
}
.news-archive-sec .cat-menu ul li a.current{
pointer-events: none;
}
.news-archive-sec .cat-menu ul li a:hover,
.news-archive-sec .cat-menu ul li a.current{
color: #8B831D;
}
.news-archive-sec .cat-menu ul li{
margin-left: 39px;
margin-bottom: 20px;
}
.news-archive-sec .cat-menu ul li:first-child{
margin-left: -25px;
}
.pagenavi-wrap{
margin-top: 60px;
}
.pagenavi{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.pagenavi span{
margin: 0 12px;
}
.pagenavi span.nav-arrow{
width: 100px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
display: inline-block;
}
.pagenavi .nav-arrow a{
display: block;
width: 100%;
height: 100%;
}
.pagenavi .nav-arrow a:hover{
opacity: 1;
}
@media screen and (min-width: 751px){
.pagenavi .nav-arrow a:hover::before{
width: 60px;
}
.pagenavi .nav-arrow.prev a:hover::after{
left: 40px;
}
.pagenavi .nav-arrow.next a:hover::after{
right: 40px;
}
}
.pagenavi .nav-arrow a::before{
content: "";
width: 100%;
height: 1px;
transform: translateY(-50%);
top: 50%;
background-color: #000;
position: absolute;
bottom: 0;
transition: .8s;
}
.pagenavi .nav-arrow.prev a::before{
right: 0;
}
.pagenavi .nav-arrow.next a::before{
left: 0;
}
.pagenavi .nav-arrow.prev a::after,
.pagenavi .nav-arrow.next a::after{
content: "";
position: absolute;
width: 12px;
height: 1px;
top: 50%;
background-color: #000;
transition: .8s;
}
.pagenavi .nav-arrow.prev a::after{
transform: translateY(-50%) rotate(-35deg);
left: 0;
transform-origin: bottom left;
}
.pagenavi .nav-arrow.next a::after{
transform: translateY(-50%) rotate(35deg);
right: 0;
transform-origin: bottom right;
}
.pagenavi .nav-arrow.prev{
margin-right: 48px;
}
.pagenavi .nav-arrow.next{
margin-left: 48px;
}
.pagenavi a.page,
.pagenavi span.excerpt{
width: 36px;
height: 36px;
border: 1px solid #727171;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0;
color: #000;
transition: .3s;
}
.pagenavi a.page:hover{
opacity: 1;
transform: scale(1.1);
}
.pagenavi span.current{
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.pagenavi span.current::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 3px;
width: 100%;
background-color: #E6DC6E;
}
/* NEWS 詳細 */
.single-header .meta{
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 30px;
}
.single-header .meta .date{
margin-right: 30px;
}
.single-header .single-title{
font-weight: bold;
font-size: 30px;
letter-spacing: 0.12em;
color: #8B831D;
position: relative;
line-height: 1.5;
padding-bottom: 40px;
}
.single-header .single-title::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 8px;
background-color: #E6DC6E;
}
.single-header{
margin-bottom: 80px;
}
.single-body .wp-block-image{
margin-bottom: 50px;
}
.single-body p{
margin: 30px 0 40px;
font-weight: 500;
}
.single-body h2{
color: #8B831D;
font-size: 24px;
font-weight: bold;
line-height: 1.5;
padding: 20px;
background-color: #F4F3EC;
letter-spacing: 0.12em;
margin: 50px 0 30px;
}
.single-body h3{
font-size: 20px;
font-weight: bold;
color: #8B831D;
line-height: 1.5;
border-left: 8px solid #E6DC6E;
padding: 15px 0 15px 15px;
margin: 40px 0 30px;
}
.single-body h4{
color: #8B831D;
font-size: 18px;
font-weight: bold;
line-height: 1.5;
border-top: 1px solid #8B831D;
border-bottom: 1px solid #8B831D;
padding: 15px 0;
margin: 40px 0;
}
.single-body h5{
color: #8B831D;
font-size: 18px;
font-weight: bold;
border-bottom: 1px dashed #707070;
padding-bottom: 15px;
line-height: 1.5;
margin: 40px 0;
}
.single-body h6{
font-weight: bold;
color: #8B831D;
margin: 40px 0;
}
.single-body h6::before{
content: "";
width: 20px;
height: 4px;
display: inline-block;
background-color: #E6DC6E;
margin-right: 15px;
vertical-align: middle;
}
.single-body ul{
margin: 40px 0;
}
.single-body ul li{
padding-left: 20px;
}
.single-body ul li::before{
content: "";
margin-right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background-color: #E6DC6E;
vertical-align: middle;
position: relative;
top: -3px;
margin-left: -20px;
}
.single-body ol{
counter-reset: count;
margin: 40px 0;
}
.single-body ol li{
counter-increment: count;
padding-left: 1.7em;
}
.single-body ol li::before{
content: counter(count)".";
margin-right: 0.3em;
margin-left: -1.4em;
font-size: 18px;
font-weight: bold;
color: #8B831D;
}
.single-body a{
color: #8B831D;
text-decoration: underline;
}
.single-body table{
width: 100%;
margin: 40px 0;
border-top: 1px solid #727171;
border-bottom: 1px solid #727171;
}
.single-body table td{
padding: 20px;
}
.single-body table td:first-child{
background-color: #F7F8F8;
color: #8B831D;
font-size: 18px;
font-weight: bold;
}
.single-body table tr + tr td{
border-top: 1px solid #BABABA;
}
.single-nav{
margin-top: 100px;
border-top: 4px solid #727171;
padding-top: 40px;
position: relative;
text-align: center;
}
.single-nav .back{
display: inline-block;
}
.single-nav a{
font-size: 15px;
font-weight: bold;
letter-spacing: 0.12em;
color: #000;
font-family: 'Oswald','Noto Sans JP',"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.single-nav .nav-btn{
position: absolute;
top: 40px;
}
.single-nav .nav-btn a:hover{
opacity: 1;
}
@media screen and (min-width: 751px){
.single-nav .nav-btn a:hover span{
width: 20px;
}
}
.single-nav .nav-btn.prev{
left: 20px;
}
.single-nav .nav-btn.next{
right: 20px;
}
.single-nav .nav-btn span{
width: 30px;
display: inline-block;
height: 8px;
position: relative;
top: -2px;
transition: .3s;
}
.single-nav .nav-btn span::before{
content: "";
width: 100%;
height: 1px;
bottom: 0;
position: absolute;
background-color: #000;
}
.single-nav .nav-btn span::after{
content: "";
width: 12px;
height: 1px;
background-color: #000;
position: absolute;
bottom: 0;
}
.single-nav .nav-btn.prev span{
margin-right: 15px;
}
.single-nav .nav-btn.prev span::before{
left: 0;
}
.single-nav .nav-btn.prev span::after{
transform-origin: bottom left;
transform: rotate(-35deg);
left: 0;
}
.single-nav .nav-btn.next span{
margin-left: 15px;
}
.single-nav .nav-btn.next span::before{
right: 0;
}
.single-nav .nav-btn.next span::after{
transform-origin: bottom right;
transform: rotate(35deg);
right: 0;
}
.news-other-sec{
background-color: #F7F8F8;
padding: 60px 0;
}
.news-other-sec .text.top{
font-weight: bold;
font-size: 20px;
margin-bottom: 40px;
}
/* ============================================================
CloudLodge 客室ページ: お知らせボックス
（旧 room.blade.php の inline style から移植）
============================================================ */
.cl-notice{
margin: 0 0 1.5rem;
}
.cl-notice__inner{
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
padding: 1rem 1.2rem;
}
.cl-notice__title{
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 0.6rem;
}
.cl-notice__text{
margin: 0;
line-height: 1.9;
font-size: 0.95rem;
color: #333;
}
.cl-notice__link{
font-weight: 700;
text-decoration: underline;
}
/* 個人宿泊のご予約導線（#95）。お知らせの直後に置き、
「制限中」の案内から次の行動へつなげる。 */
.cl-booking{
margin: 0 0 2rem;
}
.cl-booking__inner{
background-color: var(--color-bg-cream);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 28px 32px;
text-align: center;
}
.cl-booking__title{
font-size: 17px;
font-weight: bold;
letter-spacing: 0.06em;
margin: 0 0 10px;
}
.cl-booking__text{
margin: 0;
font-size: 14px;
line-height: 1.9;
color: var(--color-text-sub);
}
.cl-booking__btn-wrap{
margin: 20px 0 0;
}
.cl-booking__btn{
display: inline-block;
min-width: 280px;
max-width: 100%;
padding: 16px 32px;
border-radius: 999px;
background-color: var(--color-gold-main);
color: var(--color-white);
font-size: 15px;
font-weight: bold;
letter-spacing: 0.08em;
transition: background-color 0.25s ease, transform 0.2s ease;
}
.cl-booking__btn:hover{
background-color: var(--color-gold-dark);
transform: translateY(-2px);
opacity: 1;
}
.cl-booking__note{
margin: 14px 0 0;
font-size: 12.5px;
line-height: 1.8;
color: var(--color-text-sub);
}
@media (max-width: 750px){
.cl-booking__inner{
padding: 22px 18px;
}
.cl-booking__btn{
min-width: 0;
width: 100%;
padding: 15px 20px;
}
}
/* ============================================================
汎用: テーブル価格セル右寄せ
（旧 group/index.blade.php の inline style から移植）
============================================================ */
.text-right{
text-align: right;
}
/*--------------------------------------------------------------
# 日帰り利用 Party Space ページ（page-party.php / #75・#77）
--------------------------------------------------------------*/
/* ヒーロー */
.party-hero {
position: relative;
}
.party-hero-img {
display: block;
width: 100%;
height: 60vh;
min-height: 320px;
max-height: 640px;
object-fit: cover;
}
.party-hero-inner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.28);
}
.party-hero-title {
margin: 0;
color: var(--color-white);
font-size: 48px;
font-weight: 700;
letter-spacing: 0.08em;
text-align: center;
}
/* カテゴリへのアンカーボタン列 */
.party-plan-nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
max-width: var(--wrap-width);
margin: 0 auto;
padding: 24px 20px 0;
}
.party-plan-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1 1 0;
min-width: 160px;
padding: 16px 20px;
border: 1px solid var(--color-border);
color: var(--color-text);
font-size: 16px;
letter-spacing: 0.04em;
transition: background-color 0.25s ease, color 0.25s ease;
}
.party-plan-nav-btn + .party-plan-nav-btn {
border-left: none;
}
.party-plan-nav-btn:hover {
background-color: var(--color-gold-main);
color: var(--color-white);
}
.party-plan-nav-arrow {
font-size: 11px;
}
/* カテゴリセクション */
.party-plans {
margin-top: 8px;
}
.party-plan {
padding-bottom: 64px;
}
.party-plan-title-band {
margin: 48px 0 32px;
padding: 18px 20px;
background-color: var(--color-bg-cream);
text-align: center;
}
.party-plan-title {
margin: 0;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-text);
}
.party-plan-gallery {
margin-bottom: 32px;
}
.party-plan-gallery .room-main-slider {
margin: 0;
padding: 0;
list-style: none;
}
.party-plan-gallery .room-slider-item img {
width: 100%;
display: block;
}
.party-plan-detail {
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
margin-top: 28px;
}
.party-plan-desc {
flex: 1 1 340px;
font-size: 15px;
line-height: 1.9;
color: var(--color-text-sub);
}
.party-plan-spec {
flex: 1 1 320px;
margin: 0;
}
.party-plan-spec-row {
display: flex;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid var(--color-border);
}
.party-plan-spec-row dt {
flex: 0 0 140px;
font-weight: 700;
color: var(--color-text);
}
.party-plan-spec-row dd {
flex: 1 1 auto;
margin: 0;
color: var(--color-text-sub);
}
.party-plan-more {
margin: 28px 0 0;
text-align: center;
}
.party-plan-more-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 48px;
background-color: var(--color-gold-light);
color: var(--color-text);
font-size: 15px;
letter-spacing: 0.06em;
transition: background-color 0.25s ease;
}
.party-plan-more-btn:hover {
background-color: var(--color-gold-main);
color: var(--color-white);
}
@media (max-width: 750px) {
.party-hero-title {
font-size: 32px;
}
.party-plan-nav {
flex-direction: column;
}
.party-plan-nav-btn {
flex: 1 1 auto;
}
.party-plan-nav-btn + .party-plan-nav-btn {
border-left: 1px solid var(--color-border);
border-top: none;
}
.party-plan-spec-row dt {
flex-basis: 100px;
}
}
/* =========================================================
日帰り利用 プラン詳細：当日の流れ タイムライン（page-party-plan.php）
中央線に沿った時刻ノード＋左右注釈（吹き出し／画像カード）。
モックの配色（橙/緑/黄）はサイトの gold・cream 基調へ馴染ませている。
========================================================= */
.party-timeline-sec {
padding-bottom: 64px;
}
.party-timeline-band {
margin: 40px 0 8px;
padding: 16px 20px;
background-color: var(--color-gold-main);
text-align: center;
}
.party-timeline-band-title {
margin: 0;
color: var(--color-white);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.08em;
}
.party-timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 40px 0 8px;
list-style: none;
}
/* 中央の縦線（全ノードを貫く連結線）。 */
.party-timeline::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 4px;
transform: translateX(-50%);
background-color: var(--color-gold-light);
}
.party-timeline-node {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
column-gap: 32px;
position: relative;
}
.party-timeline-node + .party-timeline-node {
margin-top: 20px;
}
/* 中央の時刻マーカー（線の上に乗せる）。 */
.party-timeline-center {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
}
.party-timeline-marker {
position: relative;
display: inline-flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 4px 12px;
min-width: 140px;
max-width: 340px;
padding: 12px 24px;
background-color: var(--color-gold-light);
border-radius: 999px;
text-align: center;
box-shadow: 0 0 0 6px var(--color-white);
}
.party-timeline-time {
font-size: 18px;
font-weight: 700;
color: var(--color-text);
}
.party-timeline-label {
font-size: 15px;
font-weight: 700;
color: var(--color-text);
}
/* 左右の注釈エリア（中央線側へ寄せる）。空のサイドは高さ 0。 */
.party-timeline-aside {
display: flex;
}
.party-timeline-aside--left {
justify-content: flex-end;
}
.party-timeline-aside--right {
justify-content: flex-start;
}
.party-timeline-card {
position: relative;
max-width: 380px;
margin-top: 6px;
padding: 14px 16px;
background-color: var(--color-bg-cream);
border: 1px solid var(--color-gold-main);
border-radius: 10px;
}
.party-timeline-card-text {
margin: 0;
font-size: 14px;
line-height: 1.8;
color: var(--color-text);
}
.party-timeline-card--image .party-timeline-card-text {
margin-bottom: 10px;
font-weight: 700;
text-align: center;
}
.party-timeline-card-image img {
display: block;
width: 100%;
border-radius: 6px;
}
/* 吹き出しのしっぽ（中央線へ向ける）。rotate した小さな四角で表現。 */
.party-timeline-aside--left .party-timeline-card::after,
.party-timeline-aside--right .party-timeline-card::after {
content: "";
position: absolute;
top: 20px;
width: 12px;
height: 12px;
background-color: var(--color-bg-cream);
transform: rotate(45deg);
}
.party-timeline-aside--left .party-timeline-card::after {
right: -7px;
border-top: 1px solid var(--color-gold-main);
border-right: 1px solid var(--color-gold-main);
}
.party-timeline-aside--right .party-timeline-card::after {
left: -7px;
border-bottom: 1px solid var(--color-gold-main);
border-left: 1px solid var(--color-gold-main);
}
.party-timeline-back {
margin: 32px 0 0;
text-align: center;
font-size: 14px;
}
.party-timeline-back a {
color: var(--color-gold-dark);
}
.party-timeline-back a:hover {
text-decoration: underline;
}
@media (max-width: 900px) {
/* 1 カラムへ集約。線を左端へ寄せ、マーカー→左注釈→右注釈の順で縦積み。 */
.party-timeline {
max-width: 560px;
padding-top: 24px;
}
.party-timeline::before {
left: 16px;
}
.party-timeline-node {
grid-template-columns: 1fr;
row-gap: 12px;
padding-left: 48px;
}
.party-timeline-node + .party-timeline-node {
margin-top: 28px;
}
.party-timeline-center {
order: -1;
justify-content: flex-start;
}
.party-timeline-marker {
box-shadow: none;
min-width: 0;
max-width: 100%;
padding: 6px 0;
background-color: transparent;
border-radius: 0;
justify-content: flex-start;
text-align: left;
gap: 2px 10px;
}
/* 線上のノード点（中央線 left:16px の上に重ねる）。 */
.party-timeline-marker::before {
content: "";
position: absolute;
left: -39px;
top: 8px;
width: 14px;
height: 14px;
background-color: var(--color-gold-light);
border: 3px solid var(--color-white);
border-radius: 50%;
}
.party-timeline-aside--left,
.party-timeline-aside--right {
justify-content: flex-start;
}
.party-timeline-card {
max-width: 100%;
width: 100%;
margin-top: 0;
}
/* しっぽはスマホでは非表示（縦積みのため）。 */
.party-timeline-aside--left .party-timeline-card::after,
.party-timeline-aside--right .party-timeline-card::after {
display: none;
}
}
/* =========================================================
日帰り利用 プラン詳細：ご利用の目安（page-party-plan.php）
料金・定員表（一覧ページ /party/ の .party-plan-spec を流用）と
ご利用可能箇所の見取り図 PDF のダウンロードボタン。
========================================================= */
.party-plan-info {
max-width: 800px;
margin: 48px auto 0;
}
.party-plan-info-title {
margin: 0 0 16px;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.06em;
text-align: center;
color: var(--color-text);
}
/* 一覧ページでは 2 カラムの右側に入るが、詳細ページでは単独ブロックとして使う。 */
.party-plan-spec--detail {
flex: none;
width: 100%;
border-top: 1px solid var(--color-border);
}
.party-plan-spec--detail .party-plan-spec-row dt {
flex-basis: 200px;
}
.party-plan-spec-note {
margin: 12px 0 0;
font-size: 13px;
line-height: 1.8;
color: var(--color-text-sub);
}
.party-plan-floorplan {
margin-top: 32px;
text-align: center;
}
/* 見取り図は複数枚登録できる（#103）。横に並べ、入りきらなければ折り返す。 */
.party-plan-floorplan-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.party-plan-floorplan-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 40px;
background-color: var(--color-gold-light);
color: var(--color-text);
font-size: 15px;
letter-spacing: 0.06em;
transition: background-color 0.25s ease;
}
.party-plan-floorplan-btn:hover {
background-color: var(--color-gold-main);
color: var(--color-white);
}
/* 準備中（#257）。押せないことが分かるよう淡色にし、ホバーで色を変えない。 */
.party-plan-floorplan-btn.is-preparing,
.party-plan-floorplan-btn.is-preparing:hover {
background-color: var(--color-border);
color: var(--color-text-sub);
cursor: default;
}
.party-plan-floorplan-size {
font-size: 12px;
opacity: 0.75;
white-space: nowrap;
}
.party-plan-floorplan-note {
margin: 10px 0 0;
font-size: 13px;
color: var(--color-text-sub);
}
/* 提携フォトグラファー等の紹介（#253）。タイムラインとご利用の目安の間。 */
.party-plan-staff {
max-width: 800px;
margin: 48px auto 0;
}
.party-plan-staff-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 24px;
}
.party-plan-staff-item {
display: flex;
align-items: flex-start;
gap: 32px;
padding: 28px 32px;
background-color: var(--color-white);
border: 1px solid var(--color-border);
}
/* アーティスト写真のため切り抜かず、元の縦横比のまま全体を見せる（#256）。 */
.party-plan-staff-photo {
flex: 0 0 220px;
}
.party-plan-staff-photo img {
width: 100%;
height: auto;
display: block;
}
.party-plan-staff-body {
flex: 1;
min-width: 0;
}
.party-plan-staff-name {
margin: 0 0 12px;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-text);
}
.party-plan-staff-text {
margin: 0;
font-size: 15px;
line-height: 1.9;
color: var(--color-text);
overflow-wrap: anywhere;
}
.party-plan-staff-link {
display: inline-flex;
align-items: center;
margin-top: 16px;
padding: 10px 28px;
background-color: var(--color-gold-light);
color: var(--color-text);
font-size: 14px;
letter-spacing: 0.06em;
transition: background-color 0.25s ease;
}
.party-plan-staff-link:hover {
background-color: var(--color-gold-main);
color: var(--color-white);
}
@media (max-width: 750px) {
.party-plan-staff {
margin-top: 36px;
}
.party-plan-staff-item {
flex-direction: column;
align-items: center;
gap: 16px;
padding: 24px 20px;
}
.party-plan-staff-photo {
flex-basis: auto;
width: 220px;
max-width: 100%;
}
.party-plan-staff-name {
text-align: center;
}
.party-plan-staff-body {
width: 100%;
}
.party-plan-staff-link {
display: flex;
justify-content: center;
}
.party-plan-info {
margin-top: 36px;
}
.party-plan-info-title {
font-size: 18px;
}
.party-plan-spec--detail .party-plan-spec-row {
flex-direction: column;
gap: 4px;
}
.party-plan-spec--detail .party-plan-spec-row dt {
flex-basis: auto;
}
/* SP は 1 枚ずつ縦に積む（複数枚でも押し間違えないよう幅いっぱいにする）。 */
.party-plan-floorplan-list {
flex-direction: column;
gap: 10px;
}
.party-plan-floorplan-btn {
width: 100%;
justify-content: center;
padding: 14px 20px;
}
}
/*--------------------------------------------------------------
# コラム（column CPT / #107）
一覧・詳細の骨格はニュース（news-*）のスタイルを流用し、
ここではコラム固有の要素だけを定義する。
--------------------------------------------------------------*/
.column-archive-lead {
max-width: 900px;
margin: 0 auto 40px;
text-align: center;
}
.column-archive-lead .text {
font-size: 15px;
line-height: 1.9;
color: var(--color-text-sub);
}
/* 記事冒頭のダミー注記（公開前の確認用。校閲後に削除する） */
.column-notice {
margin: 0 0 32px;
padding: 16px 20px;
border: 1px solid var(--color-gold-main);
background-color: #faf7f0;
font-size: 13px;
line-height: 1.8;
color: var(--color-text-sub);
}
.column-notice strong {
color: var(--color-gold-dark);
}
/* 記事末尾から施設ページへ戻す導線 */
.column-facility-link {
margin: 48px 0 0;
text-align: center;
}
.column-facility-link a {
display: inline-block;
padding: 12px 32px;
border: 1px solid var(--color-gold-main);
color: var(--color-gold-dark);
font-size: 14px;
letter-spacing: 0.08em;
transition: background-color 0.3s ease, color 0.3s ease;
}
.column-facility-link a::after {
content: "\0020\2192";
}
.column-facility-link a:hover {
background-color: var(--color-gold-main);
color: var(--color-white);
opacity: 1;
}
/* 施設ページ・プラン詳細ページに差し込む関連コラムセクション */
.column-related-sec .text.top {
/* 見出しの直下にリード文が続くため、news-other-sec 既定の 40px を詰める */
margin-bottom: 16px;
}
.column-related-lead {
margin: 0 auto 32px;
max-width: 900px;
text-align: center;
font-size: 15px;
line-height: 1.9;
color: var(--color-text-sub);
}
.column-related-all {
margin: 32px auto 0;
text-align: center;
}
.column-related-all a {
display: inline-block;
padding: 12px 32px;
border: 1px solid var(--color-gold-main);
color: var(--color-gold-dark);
font-size: 14px;
letter-spacing: 0.08em;
transition: background-color 0.3s ease, color 0.3s ease;
}
.column-related-all a::after {
content: "\0020\2192";
}
.column-related-all a:hover {
background-color: var(--color-gold-main);
color: var(--color-white);
opacity: 1;
}
@media (max-width: 750px) {
.column-archive-lead {
margin-bottom: 28px;
text-align: left;
}
.column-archive-lead .text,
.column-related-lead {
font-size: 14px;
}
.column-related-lead {
text-align: left;
}
.column-facility-link a,
.column-related-all a {
display: block;
padding: 14px 20px;
text-align: center;
}
}
/*--------------------------------------------------------------
# CloudLodge 個人宿泊のリクエスト（#104・試作）
--------------------------------------------------------------*/
/* 団体利用ページ下部の控えめな導線。主役（団体宿泊）より弱く見せる。 */
.cl-group-personal {
padding: 80px 0 0;
}
.cl-group-personal-box {
max-width: 760px;
margin: 0 auto;
padding: 32px 40px;
border: 1px solid var(--color-border);
border-radius: 14px;
background-color: var(--color-bg-cream);
text-align: center;
}
.cl-group-personal-heading {
font-size: 17px;
font-weight: bold;
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.cl-group-personal-text {
font-size: 14px;
line-height: 1.9;
color: var(--color-text-sub);
}
.cl-group-personal-link {
margin-top: 16px;
}
.cl-group-personal-link a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
letter-spacing: 0.06em;
color: var(--color-gold-dark);
text-decoration: underline;
}
.cl-group-personal-link a::after {
content: "\2192";
transition: transform 0.2s ease;
}
.cl-group-personal-link a:hover {
opacity: 1;
}
.cl-group-personal-link a:hover::after {
transform: translateX(4px);
}
.cl-stay-request-lead {
padding: 80px 0 0;
}
.cl-stay-request-lead-text {
max-width: 760px;
margin: 0 auto;
text-align: center;
font-size: 16px;
line-height: 2.2;
}
.cl-stay-request-heading {
font-size: 24px;
font-weight: bold;
letter-spacing: 0.08em;
line-height: 1.6;
margin-bottom: 24px;
}
.cl-stay-request-heading--center {
text-align: center;
margin-bottom: 40px;
}
.cl-stay-request-text {
font-size: 15px;
line-height: 2.1;
color: var(--color-text);
}
/* 背景セクション：本文と写真を左右に並べる。 */
.cl-stay-request-reason {
padding: 80px 0 0;
}
.cl-stay-request-reason-inner {
display: flex;
align-items: center;
gap: 48px;
}
.cl-stay-request-reason-body {
flex: 1 1 0;
min-width: 0;
}
.cl-stay-request-reason-image {
flex: 0 0 40%;
}
.cl-stay-request-reason-image img {
width: 100%;
height: auto;
border-radius: 12px;
display: block;
}
/* 流れ：番号つきの 3 カード。 */
.cl-stay-request-flow {
padding: 90px 0 0;
}
.cl-stay-request-flow-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.cl-stay-request-flow-item {
position: relative;
padding: 32px 28px 30px;
background-color: var(--color-white);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(26, 24, 16, 0.05);
}
.cl-stay-request-flow-num {
display: block;
font-size: 30px;
line-height: 1;
color: var(--color-gold-main);
margin-bottom: 14px;
}
.cl-stay-request-flow-title {
font-size: 17px;
font-weight: bold;
line-height: 1.6;
margin-bottom: 10px;
}
.cl-stay-request-flow-body {
font-size: 14px;
line-height: 1.9;
color: var(--color-text-sub);
}
/* 受付ルール：定義リストを 2 カラムの表として見せる。 */
.cl-stay-request-rules {
padding: 90px 0 0;
}
.cl-stay-request-rule-list {
max-width: 760px;
margin: 0 auto;
}
.cl-stay-request-rule-row {
display: flex;
gap: 24px;
padding: 18px 4px;
border-bottom: 1px solid var(--color-border);
}
.cl-stay-request-rule-row:first-child {
border-top: 1px solid var(--color-border);
}
.cl-stay-request-rule-row dt {
flex: 0 0 180px;
font-weight: bold;
font-size: 15px;
line-height: 1.9;
}
.cl-stay-request-rule-row dd {
flex: 1 1 0;
min-width: 0;
font-size: 15px;
line-height: 1.9;
color: var(--color-text-sub);
}
/* 宿泊可能日：状態つきの日付チップを並べる（実データとは連動しない試作）。 */
.cl-stay-request-calendar {
padding: 90px 0 0;
}
.cl-stay-request-legend {
list-style: none;
padding: 0;
margin: 0 0 24px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
font-size: 13px;
color: var(--color-text-sub);
}
.cl-stay-request-legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.cl-stay-request-chip {
display: block;
width: 14px;
height: 14px;
border-radius: 4px;
border: 1px solid var(--color-border);
background-color: #f2f2f0;
}
.cl-stay-request-chip--open {
background-color: var(--color-gold-main);
border-color: var(--color-gold-main);
}
.cl-stay-request-chip--gathering {
background-color: var(--color-bg-beige);
border-color: var(--color-gold-main);
}
.cl-stay-request-days {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.cl-stay-request-day {
padding: 20px 12px 18px;
text-align: center;
border: 1px solid var(--color-border);
border-radius: 14px;
background-color: var(--color-white);
}
.cl-stay-request-day--open {
border-color: var(--color-gold-main);
background-color: rgba(160, 153, 75, 0.08);
}
.cl-stay-request-day--gathering {
border-color: var(--color-gold-main);
background-color: var(--color-bg-beige);
}
.cl-stay-request-day--closed {
color: #a9a9a9;
background-color: #f7f7f5;
}
.cl-stay-request-day-date {
display: block;
font-size: 20px;
line-height: 1.2;
margin-bottom: 8px;
}
.cl-stay-request-day-state {
display: block;
font-size: 12px;
letter-spacing: 0.06em;
}
.cl-stay-request-day-note {
display: block;
margin-top: 6px;
font-size: 11px;
line-height: 1.5;
color: var(--color-gold-dark);
}
.cl-stay-request-calendar-note {
margin-top: 24px;
text-align: center;
font-size: 13px;
line-height: 1.9;
color: var(--color-text-sub);
}
/* リクエスト導線 */
.cl-stay-request-cta {
padding: 80px 0 0;
text-align: center;
}
.cl-stay-request-cta-btn {
display: inline-block;
min-width: 320px;
max-width: 100%;
padding: 20px 40px;
border-radius: 999px;
background-color: var(--color-gold-main);
color: var(--color-white);
font-size: 16px;
font-weight: bold;
letter-spacing: 0.08em;
transition: background-color 0.25s ease, transform 0.2s ease;
}
.cl-stay-request-cta-btn:hover {
background-color: var(--color-gold-dark);
transform: translateY(-2px);
opacity: 1;
}
.cl-stay-request-cta-note {
margin-top: 18px;
font-size: 13px;
line-height: 1.9;
color: var(--color-text-sub);
}
.cl-stay-request-closing {
padding: 70px 0 100px;
}
.cl-stay-request-closing-text {
text-align: center;
font-size: 15px;
line-height: 2.2;
color: var(--color-text-sub);
}
@media (max-width: 750px) {
.cl-group-personal {
padding-top: 56px;
}
.cl-group-personal-box {
padding: 24px 20px;
}
.cl-stay-request-lead {
padding-top: 48px;
}
.cl-stay-request-lead-text {
text-align: left;
font-size: 15px;
line-height: 2;
}
.cl-stay-request-heading {
font-size: 20px;
}
.cl-stay-request-heading--center {
margin-bottom: 28px;
}
.cl-stay-request-reason,
.cl-stay-request-flow,
.cl-stay-request-rules,
.cl-stay-request-calendar {
padding-top: 56px;
}
.cl-stay-request-reason-inner {
flex-direction: column;
gap: 24px;
}
.cl-stay-request-reason-image {
flex-basis: auto;
width: 100%;
}
.cl-stay-request-flow-list {
grid-template-columns: 1fr;
gap: 16px;
}
.cl-stay-request-flow-item {
padding: 24px 20px;
}
.cl-stay-request-rule-row {
flex-direction: column;
gap: 4px;
padding: 14px 2px;
}
.cl-stay-request-rule-row dt {
flex-basis: auto;
font-size: 14px;
}
.cl-stay-request-rule-row dd {
font-size: 14px;
}
.cl-stay-request-days {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.cl-stay-request-day {
padding: 14px 8px;
}
.cl-stay-request-day-date {
font-size: 17px;
}
.cl-stay-request-cta {
padding-top: 56px;
}
.cl-stay-request-cta-btn {
min-width: 0;
width: 100%;
padding: 18px 20px;
}
.cl-stay-request-closing {
padding: 48px 0 72px;
}
}