@import "base.css";
/*
 * Webフォント
 * ・Zen Kaku Gothic New … 本文
 * ・Zen Old Mincho      … ロゴ（ロゴ画像支給後は不要）
 * ・Michroma            … 英字見出し（デザインは「Wedding Gothic ATF Wide」。近い字形の代替フォント。
 *                         Adobe Fonts を利用する場合は index.html に kit を読み込み、--en-ls を .02em に変更）
 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@600;700&display=swap');

/* 英字見出し用：Michroma（OFL）をデザインの文字サイズに合わせて縮小（size-adjust） */
@font-face{
	font-family:'Michroma-adj';
	src:url(fonts/michroma.woff2) format('woff2');
	font-weight:400;
	font-style:normal;
	font-display:swap;
	size-adjust:95.7%;
}

/* ============================================================
 共通設定（色・フォント）
 ※ PC用の font-size / margin / padding も含めて style.css に記載
   （PC専用の基本設定のみ desktop.css）
   スマホは mobile.css（767px以下）で上書き
============================================================ */
:root{
	--font-ja: 'Zen Kaku Gothic New', sans-serif;
	--font-en: 'wedding-gothic-atf', 'Michroma-adj', sans-serif;
	--en-ls: .15em;               /* 英字見出しの字間（代替フォント用の補正値） */
	--font-logo: 'Zen Old Mincho', serif;

	--color-text: #221714;       /* 本文 */
	--color-title: #231815;      /* 見出し・罫線 */
	--color-dark: #484848;       /* ボタン・SNS */
	--color-footer: #251e1c;     /* フッター・枠線 */
	--color-beige: #e8e8dc;      /* LIBRALY〜SHOP 背景 */
	--color-gray: #dddddd;       /* SUEKI〜CIRCULATION 背景／休業日 */
	--color-gray-dark: #aaaaaa;  /* グレー背景上の休業日 */
	--color-holiday: #ff0000;    /* 日・祝 */
}

a{
	color:inherit;
	text-decoration:none;
	cursor:pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

body{
	color:var(--color-text);
	margin:0;
	padding:0;
	font-family: var(--font-ja);
	font-weight: 500;
	font-feature-settings: "palt"; /* プロポーショナルメトリクス（デザインと同じ字詰め） */
	background-color:#fff;
	text-align:center;
	position:relative;
	-webkit-font-smoothing: antialiased;
}

ul,ol{
	list-style:none;
}

/* 慣性スクロール（Lenis）推奨設定 */
html.lenis,
html.lenis body{
	height:auto;
}
.lenis.lenis-smooth{
	scroll-behavior:auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent]{
	overscroll-behavior:contain;
}
.lenis.lenis-stopped{
	overflow:hidden;
}

#main-wrapper{
	position:relative;
	overflow-x:clip; 
}


/* ============================================================
 ヘッダー
============================================================ */
#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:1020;
	background:none;
	border:none;
}
#header-inner{
	position:relative;
}

/* ロゴ（画像）*/
.header-logo{
	position:fixed;
	z-index:1040;
	font-family:var(--font-logo);
	font-weight:700;
	line-height:1;
	white-space:nowrap;
	width: 340px;
}
.header-logo a{
	display:block;
}
.header-logo img{
	display:block;
	transition:filter .4s;
}
.is-logo-black .header-logo img{
	filter:brightness(0);
}

/* メニューボタン（ハンバーガー）
------------------------------------------------------------ */
#menuBtn{
	display:block;
	position:fixed;
	z-index:1050;
	cursor:pointer;
	top:60px;
	right:62px;
	width:66px;
	height:13px;
	margin:0;
	padding:0;
}
#panel-btn{
	position:relative;
	width:100%;
	height:100%;
}
#panel-btn-icon,
#panel-btn-icon:before,
#panel-btn-icon:after{
	display:block;
	position:absolute;
	left:0;
	width:100%;
	height:1px;
	background:var(--color-title);
	transition:.3s;
}
#panel-btn-icon{
	top:0;
	background:transparent;
}
#panel-btn-icon:before,
#panel-btn-icon:after{
	content:"";
}
#panel-btn-icon:before{
	top:0;
}
#panel-btn-icon:after{
	top:12px;
}
/* 開いた時は × に */
#menuBtn.open #panel-btn-icon:before,
#menuBtn.open #panel-btn-icon:after{
	top:6px;
}
#menuBtn.open #panel-btn-icon:before{
	transform:rotate(10deg);
}
#menuBtn.open #panel-btn-icon:after{
	transform:rotate(-10deg);
}
/* クリック範囲を広げる */
#menuBtn:before{
	content:"";
	position:absolute;
	top:-15px;
	left:-10px;
	right:-10px;
	bottom:-15px;
}

/* ナビ（パネル）
------------------------------------------------------------ */
#navi{
	display:none;
	position:fixed;
	z-index:1030;
	background:#fff;
	border:1px solid var(--color-footer);
	border-radius:8px;
	text-align:left;
	top:26px;
	right:40px;
	width:309px;
	margin:0;
	padding:78px 41px 30px 40px;
}
.navi-list a{
	font-family:var(--font-en);
	-webkit-text-stroke:.3px #000; /* デザインの線の太さに合わせて補強 */
	color:#000;
	letter-spacing:var(--en-ls);
}
.navi-list li{
	font-size:14px;
	line-height:16px;
}
.navi-list li + li{
	margin-top:18.5px;
}
/* SNS：上下を点線（グレー）で区切る */
.navi-sns{
	background:
		radial-gradient(circle, #9a9a9a 0.9px, transparent 1.2px) left top / 6px 3px repeat-x,
		radial-gradient(circle, #9a9a9a 0.9px, transparent 1.2px) left bottom / 6px 3px repeat-x;
	margin-top:23px;
	padding:13px 0 10px;
}
.navi-sns dt{
	letter-spacing:.07em;
	font-size:10px;
	line-height:11px;
}
.navi-sns dl + dl{
	margin-top:9px;
}
.navi-sns dd{
	margin-top:3px;
}
.navi-sns .c-insta--s{
	font-size:12px;
}
/* メールアドレス：アイコン＋テキスト、下線は全幅 */
.navi-mail a{
	display:block;
	border-bottom:1px solid var(--color-footer);
	background:url(../images/icon_mail_black.svg) left center / 19px 15px no-repeat;
	font-family:var(--font-ja);
	font-weight:400;
	letter-spacing:.04em;
	white-space:nowrap;
	color:var(--color-footer);
	font-size:16px;
	line-height:18px;
	padding:0 0 4px 26px;
	background-position:left top 2px;
}
.navi-mail{
	margin-top:24px;
}

/* メニュー表示中の背景（ぼかし） */
#shadows{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	z-index:1001;
	background:rgba(255,255,255,.05);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
}

/* ポップアップ（GALLERY 予約について）
 .js-modal-open[data-modal="#id"] で開く／.js-modal-close・背景・Escで閉じる（scripts.js）
 背景のぼかしはメニュー表示中（#shadows）と同じ
------------------------------------------------------------ */
.c-modal{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1100;
	background:rgba(255,255,255,.05);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
}
/* 背景クリックで閉じる用 */
.c-modal__bg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.c-modal__box{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	box-sizing:border-box;
	max-width:calc(100% - 32px);
	max-height:calc(100% - 32px);
	overflow-y:auto;
	background:#fff;
	border:1px solid var(--color-text);
	border-radius:22px;
	text-align:left;
	width:365px;
	padding:25px 25px 41px;
}
/* 閉じる（×）… タップ範囲44px、×は17px（中心：上から24px・右から28px） */
.c-modal__close{
	position:absolute;
	top:2px;
	right:6px;
	width:44px;
	height:44px;
	border:0;
	background:url(../images/icon_close_black.svg) center / 17px 17px no-repeat;
	font-size:0;
	cursor:pointer;
}
.c-modal__title{
	font-weight:500;
	line-height:1;
	letter-spacing:0;
	color:var(--color-title);
	font-size:15px;
}
.c-modal__text{
	letter-spacing:0;
	font-size:12px;
	line-height:21px;
	margin-top:21px;
}
.c-modal .c-info{
	margin-top:28px;
	margin-left:6px;
}


/* ============================================================
 共通パーツ
============================================================ */

/* 背景色ブロック */
.bg-beige{
	background:var(--color-beige);
	padding-bottom:200px;
}
.bg-gray{
	background:var(--color-gray);
	padding-bottom:100px;
}

/* 英字見出し（h2・h3共通）
 .c-title--l … 大（RENTAL SPACE）
 .c-title--s … 小（長い単語用）
------------------------------------------------------------ */
.c-title{
	font-family:var(--font-en);
	font-weight:400;
	line-height:1;
	letter-spacing:var(--en-ls);
	color:#000;
	font-size:42px;
	margin:0;
	padding:0;
}
.c-title--s{
	letter-spacing:calc(var(--en-ls) - .07em);
	font-size:30px;
}
.c-title--l{
	font-size:55px;
}

/* 下線付き小見出し */
.c-subtitle{
	display:inline-block;
	font-weight:500;
	line-height:1;
	letter-spacing:.03em;
	color:var(--color-title);
	border-bottom:1px solid var(--color-title);
	font-size:20px;
	margin:0;
	padding:0 0 4px;
	white-space:nowrap;
}
/* 英字部分（字間を広め） */
.c-subtitle span,
.c-subtitle--en{
	letter-spacing:.08em;
}
/* リサイクルアイコン付き */
.c-subtitle--recycle{
	background:url(../images/icon_recycle.svg) right top / 23px 22px no-repeat;
	padding-right:31px;
}

/* 本文 */
.c-text{
	text-align:justify;
	font-size:13px;
	line-height:26px;
	margin-top:16px;
}
.c-text p + p{
	margin-top:26px;
}

/* 注釈 */
.c-note{
	letter-spacing:0;
	color:var(--color-title);
	font-size:12px;
	line-height:20px;
	margin-top:4px;
}

/* 画像＋テキスト レイアウト
 .c-media--left   … 画像左・テキスト右
 .c-media--center … テキストを画像に対して上下中央
------------------------------------------------------------ */
.c-media{
	position:relative;
	text-align:left;
	display:grid;
	grid-template-columns:309px 795px;
	grid-template-rows:auto 1fr;
	justify-content:space-between;
}
.c-media__img{
	overflow:hidden;
	/* Safari の角丸はみ出し対策 */
	-webkit-mask-image:-webkit-radial-gradient(white, black);
	grid-column:2;
	grid-row:1 / 3;
	align-self:start;
	position:relative;
	/* top:max(100px, calc(50vh - 276px)); 画面の上下中央で固定 */
	width:795px;
	height:552px;
	border-radius:108px;
}
.c-media__img img,
.c-img-slider img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
.c-media__img a{
	display:block;
	height:100%;
}
.c-media__img iframe{
	background:#eee;
	display:block;
	width:100%;
	height:100%;
	border:0;
}
.c-media__head{
	grid-column:1;
	grid-row:1;
	margin-bottom:112px;
}
.c-media__text{
	grid-column:1;
	grid-row:2;
}
/* 画像左・テキスト右 */
.c-media--left{
	grid-template-columns:795px 309px;
}
.c-media--left .c-media__head,
.c-media--left .c-media__text{
	grid-column:2;
}
.c-media--left .c-media__img{
	grid-column:1;
}
/* テキストを画像に対して上下中央に */
.c-media--center{
	grid-template-rows:1fr auto auto 1fr;
}
.c-media--center .c-media__head{
	grid-row:2;
}
.c-media--center .c-media__text{
	grid-row:3;
	padding-top:5px;
}
.c-media--center .c-media__img{
	grid-row:1 / 5;
}

/* 画像スライダー（About / Local Goods） */
.c-img-slider,
.c-img-slider .slick-list,
.c-img-slider .slick-track,
.c-img-slider .slick-slide,
.c-img-slider .slick-slide > div,
.c-img-slider .slick-slide > div > div{
	height:100%;
}
.c-img-slider .slick-dots{
	position:absolute;
	left:0;
	width:100%;
	text-align:center;
	line-height:0;
	bottom:20px;
}

/* スライダードット（共通） */
.slick-dots li{
	display:inline-block;
	margin:0 12px;
}
.slick-dots button{
	display:block;
	width:8px;
	height:8px;
	border:1px solid #fff;
	border-radius:50%;
	background:transparent;
	text-indent:-9999px;
	overflow:hidden;
	cursor:pointer;
}
.slick-dots .slick-active button{
	border-color:#000;
	background:#fff;
}

/* Instagramリンク */
.c-sns{
	position:relative;
	line-height:1;
	margin-top:16px;
}
.c-insta{
	display:inline-block;
	background:url(../images/icon_instagram.svg) left center / 16px 16px no-repeat;
	color:var(--color-dark);
	letter-spacing:.03em;
	line-height:1;
	font-size:16px;
	padding:0 0 0 24px;
}
.c-insta--s{
	background-image:url(../images/icon_instagram_black.svg);
	color:#000;
	letter-spacing:.02em;
	font-size:12px;
	line-height:16px;
	padding-left:22px;
}
.c-insta--white{
	background-image:url(../images/icon_instagram_white.svg);
	color:#fff;
	letter-spacing:.12em;
	font-size:12px;
	line-height:16px;
	padding-left:22px;
}

.footer-sns .c-insta{
	vertical-align: middle;
	padding-bottom: 0.5em;
}

/* 小ボタン（詳しくはこちら） */
.c-btn-s{
	display:inline-block;
	border:1px solid #000;
	background:#fff url(../images/icon_external_black.svg) right 8px center / 10px 10px no-repeat;
	color:var(--color-title);
	line-height:1;
	letter-spacing:.02em;
	position:absolute;
	top:0;
	left:162px;
	width:100px;
	font-size:10px;
	padding:3px 0 3px 7px;
}

/* ボタン（濃）／.c-btn--gray（淡） */
.c-btn{
	display:block;
	border-radius:6px;
	letter-spacing:0 !important;
	background:var(--color-dark) url(../images/icon_external_white.svg) right 24px center / 14px 14px no-repeat;
	color:#fff;
	line-height:1;
	letter-spacing:.08em;
	white-space:nowrap;
	width:228px;
	font-size:18px;
	padding:23px 50px 23px 22px;
}
/* リンクなし（PDF準備中など） */
.c-btn.is-disabled{
	cursor:default;
}
.c-btn--gray{
	background-color:var(--color-gray);
	background-image:url(../images/icon_external_gray.svg);
	color:var(--color-dark);
}
.c-btn + .c-btn{
	margin-top:16px;
}
/* button要素で使う場合（GALLERYの予約ポップアップ） */
button.c-btn{
	border:0;
	font-family:inherit;
	font-weight:inherit;
	cursor:pointer;
}
/* 文字＋外部リンクアイコンを中央揃え（RENTAL SPACE のボタン）
 アイコンは中の span の背景。濃：予約はこちら／淡（.c-btn--gray）：詳細・レンタル品はこちら
------------------------------------------------------------ */
.c-btn--center{
	text-align:center;
	background-image:none;
	font-size:16px;
	padding:24px 0;
}
.c-btn--center span{
	display:inline-block;
	background:url(../images/icon_external_white.svg) right center / 14px 14px no-repeat;
	padding-right:26px;
}
.c-btn--gray.c-btn--center{
	font-size:14px;
	padding:25px 0;
}
.c-btn--gray.c-btn--center span{
	background-image:url(../images/icon_external_gray.svg);
	padding-right:17px;
}

/* 営業日カレンダー
 .is-close … 休業日（×表示） / .is-holiday … 日祝（赤）
 .c-calendar--l … 大きいサイズ（レンタル利用日）
------------------------------------------------------------ */
.c-calendar{
	font-size:0;
	line-height:0;
	white-space:nowrap;
	margin-top:24px;
}
.c-calendar li{
	display:inline-block;
	width: 35px;
	height: 25px;
	background: url(../images/calender_bg_w.png) center top no-repeat;
	background-size: 100% 100%;
	text-align:center;
	letter-spacing:.02em;
	color:#000;
	vertical-align:top;
	line-height: 1;
	width: 12%;
}
.c-calendar li{
	font-weight:500;
	width:36px;
	height:25px;
	margin-right:3px;
	font-size:13px;
	line-height:25px;
}
.c-calendar li span{
	display: inline-block;
	position: relative;
}
.c-calendar li:last-child{
	margin-right:0 !important;
}
.c-calendar .is-holiday{
	color:var(--color-holiday);
}
.c-calendar .is-close{
	color:transparent;
	background: url(../images/calender_bg_g.png) center center no-repeat;
	background-size: 100% 100%;
}
.bg-beige .c-calendar .is-close{
	background: url(../images/calender_bg_g.png) center center no-repeat;
	background-size: 100% 100%;
}
.bg-gray .c-calendar .is-close{
	background: url(../images/calender_bg_g_drak.png) center center no-repeat;
	background-size: 100% 100%;
}
.c-calendar--l li{
	background: url(../images/calender_bg_w_border.png) center center no-repeat;
	background-size: 100% 100%;
	font-weight:500;
	width:45px;
	height:32px;
	margin-right:4px;
	font-size:16px;
	line-height:31px;
}
.c-calendar--l .is-close{
	border-color:transparent;
}
.c-calendar--l{
	margin-top:8px;
}

/* 営業情報（OPEN / TEL など）
 .c-info__row … 2つ横並び
------------------------------------------------------------ */
.c-info__item dt{
	font-family:var(--font-en);
	line-height:1;
	letter-spacing:var(--en-ls);
	color:#000;
	font-size:14px;
}
.c-info__item dt.is-ja{
	font-family:var(--font-ja);
	letter-spacing:.1em;
	font-size:18px;
}
.c-info__item dd{
	line-height:1;
	letter-spacing:.1em;
	color:#000;
	font-size:18px;
	margin-top:8px;
}
.c-info{
	margin-top:26px;
}
.c-info__item + .c-info__item,
.c-info__row + .c-info__item,
.c-info__item + .c-info__row{
	margin-top:24px;
}
.c-info__row{
	position:relative;
	font-size:0; /* inline-block の隙間対策 */
}
.c-info__row .c-info__item{
	display:inline-block;
	vertical-align:top;
	margin-top:0;
}
.c-info__row .c-info__item:first-child{
	width:162px;
}

/* 利用日（見出し＋カレンダー） */
.c-schedule dt{
	line-height:1;
	letter-spacing:.08em;
	color:var(--color-title);
	font-size:16px;
	margin-top:24px;
}
.c-schedule dd .c-note{
	margin-top:3px;
}

/* ラベル（枠線付き角丸） */
.c-label{
	display:block;
	border:.85px solid var(--color-title);
	border-radius:100px;
	text-align:center;
	font-weight:500;
	letter-spacing:.1em;
	color:#000;
	font-size:14px;
	line-height:16px;
	padding:5px 0;
}
.c-label--s{
	border-color:#000;
	letter-spacing:0;
	color:var(--color-text);
	width:147px;
	font-size:13px;
	line-height:14px;
	padding:5px 0;
}

/* 関連リンク */
.c-links dt{
	display:flex;
	align-items:center;
	letter-spacing:.1em;
	color:#000;
	font-size:12px;
	line-height:12px;
}
/* 点線（リーダー） */
.c-links dt:after{
	content:"";
	flex:1;
	height:2px;
	background:radial-gradient(circle, var(--color-text) 0.8px, transparent 1px) left center / 6px 2px repeat-x;
	margin-left:8px;
}
.c-links a,
.c-linklist a{
	display:inline-block;
	background:url(../images/icon_external_black.svg) right center / 10px 10px no-repeat;
	letter-spacing:.07em;
	color:#000;
	padding-right:14px;
}
/* 関連リンク */
.c-links{
	margin-top:24px;
}
.c-links dd{
	margin:12px 0 0 81px;
}
.c-links dd + dt{
	margin-top:12px;
}
.c-links li,
.c-linklist li{
	font-size:12px;
	line-height:22px;
}
.c-linklist{
	margin:19px 0 0 6px;
}

/* 利用案内（見出し＋本文） */
.c-guide dt{
	line-height:1;
	letter-spacing:.08em;
	color:var(--color-title);
	border-bottom:1px solid var(--color-text);
	font-size:16px;
	padding-bottom:8px;
}
.c-guide dd{
	text-align:justify;
	font-size:13px;
	line-height:20px;
	margin-top:12px;
}
/* 利用案内 */
.c-guide{
	margin-top:24px;
}
.c-guide dd + dt{
	margin-top:28px;
}

/* 利用例（見出し＋リスト）RENTAL SPACE 各スペース */
.c-usecase dt{
	line-height:1;
	letter-spacing:.08em;
	color:var(--color-title);
	font-size:16px;
}
.c-usecase li{
	letter-spacing:.06em;
	font-size:13px;
	line-height:22px;
}
.c-usecase li::before{
	content:"・";
}
.c-usecase{
	margin-top:20px;
}
.c-usecase + .c-accordion{
	margin-top:27px;
}
.c-usecase dd{
	margin-top:14px;
}

/* アコーディオン（閉：ピル型／開：角丸） */
.c-accordion{
	overflow:hidden;
	background:var(--color-beige);
	margin-top:33px;
	border-radius:32px;
}
.c-accordion__btn{
	display:block;
	width:100%;
	border:none;
	background:url(../images/icon_plus.svg) right center / 16px 16px no-repeat;
	font-family:var(--font-ja);
	font-weight:500;
	line-height:1;
	letter-spacing:.08em;
	color:var(--color-title);
	text-align:left;
	cursor:pointer;
	font-size:16px;
	padding:24px 34px 24px 35px;
	background-position:right 34px center;
}
.c-accordion.is-open .c-accordion__btn{
	background-image:url(../images/icon_minus.svg);
}
.c-accordion__body{
	display:none;
	margin-top:-3px;
	padding:0 34px 31px 34px;
}
/* 点線：2pxの点を8px間隔で（デザインに合わせて背景で描画） */
.c-accordion__list{
	background:radial-gradient(circle, #555 1px, transparent 1.2px) left bottom / 8px 3px repeat-x;
}
.c-accordion__list dt{
	position:relative;
	background:radial-gradient(circle, #555 1px, transparent 1.2px) left top / 8px 3px repeat-x;
	line-height:1;
	letter-spacing:.02em;
	color:var(--color-title);
	font-size:16px;
	padding:30px 0 0 33px;
}
.c-accordion__list dt:before{
	content:"";
	position:absolute;
	width:8px;
	height:8px;
	border:.66px solid #000;
	border-radius:50%;
	background:#fff;
	top:34px;
	left:17px;
}
.c-accordion__list dd{
	letter-spacing:0;
	color:var(--color-title);
	font-size:12px;
	line-height:21px;
	padding:14px 30px 28px 33px;
}



/* セクション余白 */
.c-section{
	padding-top:200px;
}
/* ボタン */
.c-btn-area{
	margin-top:26px;
}
/* ラベル */
.c-relation{
	margin-top:32px;
}


/* ============================================================
 メインビジュアル
============================================================ */
.mv,
.mv-slider__item img{
	height:100vh;
	height:100svh; /* スマホのアドレスバー分を除いた高さ */
}
.mv{
	position:relative;
}
.mv-slider__item img{
	display:block;
	width:100%;
	object-fit:cover;
}
.mv .slick-dots{
	position:absolute;
	z-index:1000;
	left:0;
	width:100%;
	text-align:center;
	line-height:0;
	bottom:38px;
}
.mv .slick-dots button{
	border-color:#000;
}

/* ============================================================
 RENTAL SPACE 予約ボタン（追従）
 ホバーで「Gallery／Space／Day Camp」が右から左へ伸びて表示
============================================================ */
.rental-fixed{
	position:fixed;
	z-index:1035; /* メニュー表示中も背景（#shadows:1001）・メニュー（#navi:1030）より前面でクリック可能に */
	right:70px;
	bottom:38px;
	width:159px;
}
/* 丸ボタン：自動で回転 */
.rental-fixed__btn{
	display:block;
	border:none;
	border-radius:50%;
	background:#f7f7f7;
	font-family:var(--font-ja);
	font-weight:500;
	text-align:center;
	letter-spacing:.6em;
	color:#000;
	cursor:pointer;
	animation:rental-rotate 6s linear infinite;
}
/* 文字を円の中心に配置（末尾の字間ぶんを左に足して左右均等に） */
.rental-fixed__btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:159px;
	height:159px;
	font-size:13.6px;
	line-height:20.5px;
	padding:0;
}
.rental-fixed__btn span{
	display:block;
	padding-left:.6em;
}
@keyframes rental-rotate{
	from{
		transform:rotate(0deg);
	}
	to{
		transform:rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce){
	.rental-fixed__btn{
		animation:none;
	}
}
.rental-fixed__menu{
	position:absolute;
	text-align:right;
	white-space:nowrap;
	visibility:hidden;
	transition:visibility 0s .5s;
	right:71px;
	bottom:calc(100% + 19px);
}
.rental-fixed__menu a{
	position:relative;
	display:inline-block;
	letter-spacing:.08em;
	color:#000;
	/* 右から左へ伸びる（clip-path） */
	clip-path:inset(0 0 0 100%);
	transition:clip-path .45s cubic-bezier(.22,1,.36,1);
}
.rental-fixed__menu li:nth-child(2) a{
	transition-delay:.06s;
}
.rental-fixed__menu li:nth-child(1) a{
	transition-delay:.12s;
}
/* メニュー横の丸 */
.rental-fixed__menu a:after{
	content:"";
	position:absolute;
	right:0;
	width:12px;
	height:12px;
	border-radius:50%;
	background:#f7f7f7;
	transition:background .3s;
	top:2px;
}
/* ロールオーバー：文字間が広がり、文字・丸ともに淡いベージュに */
.rental-fixed__menu a{
	transition:clip-path .45s cubic-bezier(.22,1,.36,1), color .3s, letter-spacing .3s;
	font-size:14.7px;
	line-height:16px;
	padding-right:27px;
}
.rental-fixed__menu a:hover{
	color:#fcf6e6;
	letter-spacing:.3em;
	opacity:1;
}
.rental-fixed__menu a:hover:after{
	background:#fcf6e6;
}
/* クリック（タップ）で表示（JSで .is-open を付与） */
.rental-fixed.is-open .rental-fixed__menu{
	visibility:visible;
	transition:visibility 0s;
}
.rental-fixed.is-open .rental-fixed__menu a{
	clip-path:inset(0 0 0 0);
}
.rental-fixed__menu li + li{
	margin-top:25px;
}


/* ============================================================
 ABOUT
============================================================ */
.about-architect{
	position:relative;
	margin-top:42px;
}
.about-architect figcaption{
	letter-spacing:.08em;
	color:var(--color-text);
	white-space:nowrap;
	font-size:8.6px;
	line-height:9px;
	margin-top:7px;
}
.about-architect__profile dt{
	line-height:1;
	letter-spacing:.08em;
	color:var(--color-title);
	font-size:14px;
}
.about-architect__profile dd{
	letter-spacing:-.025em;
	text-align:justify;
	font-size:10px;
	line-height:16px;
	margin-top:5px;
}
.about-architect__img{
	width:147px;
}
.about-architect__profile{
	position:absolute;
	top:139px;
	left:162px;
	width:147px;
}

/* 3つのポイント */
.about-point{
	position:relative;
	border:1px solid #8b8b8b;
	border-radius:12px;
	text-align:left;
	margin-top:77px;
	padding:64px 81px 43px;
}
.about-point__label{
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	background:#fff;
	border:1px solid var(--color-text);
	border-radius:100px;
	text-align:center;
	font-weight:500;
	line-height:1;
	letter-spacing:.08em;
	color:var(--color-title);
	font-size:16px;
	top:-13px;
	width:171px;
	padding:5px 0;
}
.about-point__label span{
	display: inline-block;
	text-align: center;
	padding-bottom: 0.1em;
}
.about-point__title{
	position:relative;
	font-weight:500;
	letter-spacing:.08em;
	color:var(--color-title);
	font-size:16px;
	line-height:20px;
	padding-left:45px;
}
.about-point__num{
	position:absolute;
	left:0;
	top:0.1em;
	width:34px;
	/*
	border-radius:50%;
	background:#000;
	*/
	font-family:var(--font-en);
	text-align:center;
	color:#fff;
	line-height:20px;
	height:20px;
	font-size:14px;
}

.about-point p{
	text-align:justify;
	font-size:12px;
	line-height:22px;
	margin-top:19px;
}
.about-point__list.flex-block{
	gap:55px;
}
.about-point__list .flexbox{
	flex:1;
}



.about{
	padding-bottom:200px;
}
/* 見出し下の余白（ABOUT・INFORMATION 共通） */
.about-main .c-media__head,
.about-counter .c-media__head{
	margin-bottom:48px;
}
/* 総合窓口 */
.about-counter{
	margin-top:64px;
}
/* INFORMATION のリンク先：見出しが固定ロゴと重ならない位置で止まるよう上にずらす */
.about-counter__anchor{
	position:absolute;
	left:0;
	top:-120px;
}
/* INFORMATION：ABOUT と同じ文字サイズ（42px）で1行に
 ・字間を詰め、テキスト列（309px）の右へはみ出してよいよう右にネガティブmargin
 ・1440px未満の画面では右端で切れないよう文字サイズを少しずつ縮める（1440px以上は42px） */
.about-counter .c-title{
	white-space:nowrap;
	letter-spacing:.03em;
	font-size:min(42px, calc(4.975vw - 29.55px));
	margin-right:-120px;
}


/* ============================================================
 CAFE / SHOP
============================================================ */
.shop .c-media__head{
	margin-bottom:117px;
}
.cafe-chanooto{
	margin-top:64px;
}
.shop-local{
	margin-top:128px;
}


/* ============================================================
 RENTAL SPACE
============================================================ */
.rental-head{
	text-align:left;
}
.rental-head__lead{
	color:var(--color-text);
	font-size:22px;
	line-height:40px;
	margin-top:19px;
}


/* スライダー */
.rental-slider{
	position:relative;
	margin-top:90px;
	padding:30px 0 29px;
}
.rental-slider__item{
	position:relative;
	cursor:pointer;
	width:770px;
	padding:0 28px;
}
.rental-slider__img{
	position:relative;
	overflow:hidden;
	-webkit-mask-image:-webkit-radial-gradient(white, black);
	transform:scale(.89);
	transition:transform .5s;
	height:496px;
	border-radius:60px;
}
.rental-slider__img img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
/* 左右スライドの暗幕 */
.rental-slider__img:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(35,24,21,.45);
	transition:opacity .5s;
}
.rental-slider__label{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	transform:translateY(-50%);
	font-family:var(--font-en);
	line-height:1;
	letter-spacing:var(--en-ls);
	color:#fff;
	transition:opacity .5s;
	box-sizing:border-box;
	padding:0 100px;
	font-size:18px;
	text-align:right;
}
/* 中央のスライド（.is-center は scripts.js で付与。slick-center は複製スライドに正しく付かないため使わない） */
.rental-slider .is-center .rental-slider__img{
	transform:scale(1);
}
.rental-slider .is-center .rental-slider__img:after,
.rental-slider .is-center .rental-slider__label{
	opacity:0;
}
/* 矢印 */
.rental-slider__arrow{
	position:absolute;
	top:50%;
	z-index:5;
	border:1px solid var(--color-footer);
	border-radius:50%;
	background:#fff url(../images/icon_arrow_prev.svg) center / 13px 17px no-repeat;
	text-indent:-9999px;
	overflow:hidden;
	cursor:pointer;
	width:49px;
	height:49px;
	margin-top:-24px;
}
.rental-slider__arrow--next{
	background-image:url(../images/icon_arrow_next.svg);
	left:calc(50% + 381px);
}
/* 右側のスライドはラベル左寄せ（.is-left＝中央より左にあるスライド。scripts.js で位置から判定） */
.rental-slider .slick-slide:not(.is-left) .rental-slider__label{
	text-align:left;
}
.rental-slider__arrow--prev{
	left:calc(50% - 430px);
}

/* 詳細 */
.rental-detail{
	text-align:left;
	width:714px;
	margin:83px auto 0;
}
.rental-detail .slick-list{
	transition:height .4s;
}
.rental-detail .c-info__item dt.is-ja{
	font-size:15.5px;
}
.rental-detail__body{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
}
.rental-detail__main{
	width:400px;
}
.rental-detail__side{
	width:228px;
}
.rental-detail__side .c-btn-area{
	margin-top:0;
}
.rental-detail .c-text{
	margin-top:18px;
	letter-spacing: 0em !important;
}
.rental-detail .c-info{
	margin-top:26px;
}



.rental{
	padding-top:197px;
	padding-bottom:130px;
}


/* ============================================================
 CIRCULATION
============================================================ */
/* 見出しが小さいぶん余白を調整（デザインでは画像上端より20px下から開始） */
.circulation .c-media__head{
	padding-top:20px;
	margin-bottom:112px;
}


/* ============================================================
 ACCESS
============================================================ */
.access-info dd{
	letter-spacing:0;
	font-size:13px;
	line-height:26px;
	margin-top:18px;
}
.access-info__zip{
	display:block;
	font-size:13px;
	line-height:22px;
}
.access-info dd + dt{
	margin-top:41px;
}



.access{
	padding-bottom:200px;
}
.access .c-media__head{
	margin-bottom:65px;
}


/* ============================================================
 フッター
============================================================ */
#footer{
	position:relative;
	background:url(../images/footer_bg.jpg) center / cover no-repeat;
	color:#fff;
	padding:751px 0 44px;
}
#footer:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(37,30,28,.6);
}
.footer-inner{
	position:relative;
	text-align:left;
}
.footer-top{
	position:relative;
	border-bottom:1px solid #fff;
	padding-bottom:18px;
	display: flex;
}
.footer-logo{
	font-family:var(--font-logo);
	font-weight:700;
	line-height:33px;
	white-space:nowrap;
	font-size:31px;
	letter-spacing:.195em;
	display: none;
}
.footer-logo a{
	color:#fff;
}
.footer-nav a{
	font-family:var(--font-en);
	letter-spacing:calc(var(--en-ls) - .03em);
	color:#fff;
}
.footer-nav{
	width:640px; /* 2行に収まる幅（ブラウザの最小フォント設定12pxでも折り返さないよう余裕あり）（1行目：ABOUT〜GALLERY／2行目：SPACE〜ACCESS） */
}
.footer-nav li{
	float:left;
	margin-right:20px;
	font-size:10px;
	line-height:20px;
}
.footer-nav li:nth-child(7){
	clear:left;
}
.footer-sns dt{
	line-height:1;
	letter-spacing:.24em;
	font-size:10px;
}
.footer-sns{
	position:absolute;
	top:5px;
	left:891px;
}
.footer-sns dl{
	float:left;
	width:138px;
}
.footer-sns dd{
	margin-top:0px;
}
.footer-contact__lead{
	letter-spacing:.12em;
	font-size:11px;
	line-height:22px;
}
.footer-contact__list li{
	letter-spacing:.1em;
	line-height:18px;
	font-size:15px;
}
.footer-contact__mail a{
	display:inline-block;
	background:url(../images/icon_mail_white.svg) left center / 17px 13px no-repeat;
	color:#fff;
	padding-bottom: 0.3em;
	padding-left:25px;
}
.footer-contact__mail a:after{
	content:"";
	display:inline-block;
	width:10px;
	height:10px;
	background:url(../images/icon_external_white.svg) center center / contain no-repeat;
	vertical-align: middle;
	margin-left:3px;
}
.footer-contact__tel{
	background:url(../images/icon_tel_white.svg) left center / 12px 12px no-repeat;
	padding-bottom: 0.2em;
	position:absolute;
	top:0;
	left:300px;
	padding-left:17px;
}
.footer-contact__tel a{
	color:#fff;
}
/* 営業時間（PCは電話番号の右、SPは下の行） */
.footer-contact__hours{
	margin-left:.4em;
}
.footer-contact__list{
	position:relative;
	margin-top:3px;
}



.footer-bottom{
	position:relative;
	padding-top:10px;
}
/* 運営（Add Wall ロゴ）…「運営設計」の文字を削除。ロゴは削除前と同じ位置・サイズ */
.footer-credit{
	position:absolute;
	top:35px;
	left:1054px;
	width:146px;
}
.footer-credit img{
	display:block;
	width:100%;
}


/* ============================================================
 flex 汎用（テンプレート既存）
============================================================ */
.flex-block{
	display: flex;
	gap:20px;/*余白*/
	/*justify-content: center; /* 水平方向の中央寄せ */
	/*align-items: center; /* 垂直方向の中央寄せ */
	/*flex-direction: row-reverse; /* 子要素を右から左に並べる（デフォルトrow） */
}
.flex-cell2 .flexbox{
	flex: 50%;
}
.flex-cell3 .flexbox{
	flex: 33.3333%;
}
.flex-cell4 .flexbox{
	flex: 25%;
}
.flex-cell5 .flexbox{
	flex: 20%;
}

/*折り返し*/
.flex-wrap{
	display: flex;
	flex-wrap: wrap;
	gap:20px 20px;/*縦 横 余白*/
}
.flex-wrap.flex-cell2 .flexbox{
	width:calc((100% - 20px) / 2);
}
.flex-wrap.flex-cell3 .flexbox{
	width:calc((100% - 20px * 2) / 3);
}
.flex-wrap.flex-cell4 .flexbox{
	width:calc((100% - 20px * 3) / 4);
}
.flex-wrap.flex-cell5 .flexbox{
	width:calc((100% - 20px * 4) / 5);
}