/*画面の横幅が767pxまで Landscape phones and down
 ※ 仕様書「SP_メイン」「SP_レンタルスペース」（幅375px）の数値で作成
*/
@media (max-width: 767px) {

.PC{
	display:none;
}
.SP{
	display:block;
}
.PC-inline{
	display:none;
}
.SP-inline{
	display:inline;
}

a{
	outline: none;
}
a:hover {
	opacity: 1;
}

/* コンテンツ基本
------------------------------------------------------------ */
body{
	-webkit-text-size-adjust: 100%;
	width:100%;
	min-width:100%;
	font-size:10px;
	line-height:16px;
}

/*コンテンツ幅（左右24px）*/
.content-inner{
	width:auto;
	margin:0 24px;
	text-align:left;
}
.content-innerS{
	width:auto;
	margin:0 24px;
	text-align:left;
}
.content-full-inner{
	width:100%;
}


/* ページトップ
------------------------------------------------------------ */
.pagetop{
	position:fixed;
	bottom:12px; /* 画面右下（RENTAL SPACEボタンと重ならない位置） */
	right:12px;
	display:none;
	z-index:1000;
}

.pagetop a,
.pagetop span{
	display: block;
	text-indent: -9999px;
	margin: 0 auto;
	width: 40px;
	height: 40px;
	background: url(../images/btn_pagetop.png) center center no-repeat;
	background-size: cover;
}


/* ============================================================
 ヘッダー
============================================================ */
.header-logo{
	top:28px;
	left:31px;
	margin:0;
	padding:0;
	font-size:17px;
	width: 210px;
	letter-spacing:.15em;
}

/* メニューボタン
------------------------------------------------------------ */
#menuBtn{
	top:32px;
	right:24px;
	width:34px;
	height:9px;
	margin:0;
	padding:0;
}
/* クリック範囲を広げる */
#menuBtn:before{
	content:"";
	position:absolute;
	top:-15px;
	left:-10px;
	right:-10px;
	bottom:-15px;
}
#panel-btn-icon{
	top:0;
}
#panel-btn-icon:before{
	top:0;
}
#panel-btn-icon:after{
	top:8px;
}
#menuBtn.open #panel-btn-icon:before,
#menuBtn.open #panel-btn-icon:after{
	top:4px;
}

/* ナビ（パネル）
------------------------------------------------------------ */
/* メニュー表示中はロゴを隠す */
body:has(#menuBtn.open) .header-logo{
	opacity:0;
	visibility:hidden;
}
/* SPは全画面（白）で表示。 */
#navi{
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:auto;
	max-width:none;
	height:auto;
	max-height:none;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;
	margin:0;
	padding:52px 15% 0;
	border:none;
	border-radius:0;
	background:#fff;
}
/* メニュー要素はクローズボタン領域を除いた画面の上下中央に配置
   （高さが足りない場合は上から並び、メニュー内をスクロール） */
.navi-inner{
	display:flex;
	flex-direction:column;
	justify-content:center;
	min-height:100%;
	padding:20px 0;
}
/* メニュー表示中は RENTAL SPACE ボタンを非表示 */
body:has(#menuBtn.open) .rental-fixed{
	display:none;
}
.navi-list li{
	font-size:18px;
	line-height:20px;
}
.navi-list li + li{
	margin-top:24px;
}
.navi-sns{
	margin-top:18px;
	padding:14px 0;
}
.navi-sns dl + dl{
	margin-top:14px;
}
.navi-sns dt{
	font-size:12px;
	line-height:13px;
}
.navi-sns dd{
	margin-top:3px;
}
.navi-sns .c-insta--s{
	font-size:14px;
}
.navi-mail{
	margin-top:22px;
}
.navi-mail a{
	/* 基本18px */
	font-size:clamp(12px, calc((70vw - 25px) / 14.5), 18px);
	line-height:20px;
	padding:0 0 6px 25px;
	/* PC用指定の解除 */
	background-position:left center;
}


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

/* セクション余白 */
.c-section{
	padding-top:70px;
}
.bg-beige{
	padding-bottom:70px;
}
.bg-beige .c-section + .c-section{
	padding-top:70px;
}
.bg-gray{
	padding-bottom:62px;
}
.bg-gray .c-section + .c-section{
	padding-top:70px;
}

/* 英字見出し */
.c-title{
	font-size:24px;
	margin:0;
	padding:0;
}
.c-title--l{
	font-size:24px;
}
.c-title--s{
	font-size:24px;
}

/* 下線付き小見出し */
.c-subtitle{
	font-size:14px;
	margin:0;
	padding:0 0 3px;
	white-space:nowrap;
}
.c-subtitle--recycle{
	padding-right:24px;
	background-size:16px 15px;
}

/* 本文 */
.c-text{
	font-size:10px;
	line-height:16px;
	margin-top:12px;
}
.c-text p + p{
	margin-top:16px;
}

/* 注釈 */
.c-note{
	font-size:8px;
	line-height:12px;
	margin-top:6px;
}

/* 画像＋テキスト レイアウト（SPは 見出し → 画像 → テキスト の縦積み）
------------------------------------------------------------ */
.c-media{
	position:relative;
	/* PC用指定の解除（PCはgrid） */
	display:block;
}
.c-media__head{
	margin-bottom:34px;
}
.c-media__img{
	position:relative;
	width:100%;
	aspect-ratio:795 / 552;
	border-radius:48px;
	margin:0 0 25px;
	/* PC用指定の解除 */
	top:auto;
	height:auto;
}
.c-media__text{
	position:relative;
}

/* 画像スライダー */
.c-img-slider .slick-dots{
	bottom:10px;
}
.slick-dots li{
	margin:0 8px;
}

/* Instagramリンク */
.c-sns{
	position:static;
	margin-top:12px;
}
.c-insta{
	font-size:12px;
	line-height:14px;
	padding:0 0 0 20px;
	background-size:14px 14px;
}
.c-insta--s{
	font-size:12px;
	line-height:16px;
	padding-left:22px;
	background-size:16px 16px;
}
.c-insta--white{
	font-size:12px;
	line-height:16px;
	padding-left:24px;
	background-size:16px 16px;
}

.footer-sns .c-insta{
	font-size: 14px;
	padding-bottom: 0.2em;
}

/* 小ボタン（詳しくはこちら）：見出しの右に配置 */
.c-btn-s{
	position:absolute;
	top:0;
	right:0;
	left:auto;
	width:116px;
	font-size:10px;
	padding:11px 0 11px 12px;
	border-width:1.5px;
	border-radius:3px;
	background-position:right 12px center;
	background-size:9px 9px;
}

/* ボタン */
.c-btn-area{
	margin-top:24px;
}
.c-btn{
	width:100%;
	font-size:12px;
	padding:17px 34px 17px 16px;
	border-radius:4px;
	background-position:right 16px center;
	background-size:11px 11px;
}
.c-btn + .c-btn{
	margin-top:10px;
}
/* 文字＋外部リンクアイコンを中央揃え */
.c-btn--center{
	font-size:12px;
	padding:17px 0;
}
.c-btn--center span{
	background-size:11px 11px;
	padding-right:20px;
}
.c-btn--gray.c-btn--center{
	font-size:10px;
	padding:18px 0;
}
.c-btn--gray.c-btn--center span{
	padding-right:14px;
}

/* 営業日カレンダー（幅に合わせて可変） */
.c-calendar{
	margin-top:12px;
}
.c-calendar li{
	/*width:calc((100% - 21px) / 8);*/
	width:38px;
	height:26px;
	margin-right:3px;
	font-size:14px;
	line-height:26px;
}
.c-calendar--l{
	margin-top:6px;
}
.c-calendar--l li{
	/*width:calc((100% - 28px) / 8);*/
	width:38px;
	height:26px;
	margin-right:4px;
	font-size:14px;
	line-height:24px;
}

/* 営業情報（SPは 見出し＋値 を横並び） */
.c-info{
	margin-top:20px;
}
.c-info__item dt{
	display:inline-block;
	width:63px;
	font-size:12px;
}
.c-info__item dt.is-ja{
	font-size:12px;
}
.rental-detail .c-info__item dt.is-ja{
	font-size:12px;
}
.c-info__item dd{
	display:inline-block;
	font-size:12px;
	margin-top:0;
}
.c-info__item + .c-info__item,
.c-info__row + .c-info__item,
.c-info__item + .c-info__row{
	margin-top:6px;
}
/* SPは縦積み（.c-info__row--sp-inline のみ横並び） */
.c-info__row .c-info__item{
	display:block;
}
.c-info__row .c-info__item:first-child{
	width:auto; /* PC用指定の解除 */
}
.c-info__row .c-info__item + .c-info__item{
	margin-top:6px;
}
.c-info__row--sp-inline .c-info__item{
	display:inline-block;
}
.c-info__row--sp-inline .c-info__item + .c-info__item{
	margin:0 0 0 28px;
}
.c-info__row--sp-inline .c-info__item + .c-info__item dt{
	width:auto;
	margin-right:9px;
}

/* 利用日 */
.c-schedule dt{
	font-size:12px;
	margin-top:14px;
}
.c-schedule dd .c-note{
	margin-top:4px;
}

/* ラベル */
.c-relation{
	margin-top:24px;
}
.c-label{
	font-size:14px;
	line-height:16px;
	padding:6px 0;
}
.c-label--s{
	width:142px;
	font-size:14px;
	line-height:15px;
	padding:6px 0;
}

/* 関連リンク */
.c-links{
	margin-top:20px;
}
.c-links dt{
	font-size:12px;
	line-height:12px;
}
.c-links dt:after{
	margin-left:6px;
}
.c-links dd{
	margin:12px 0 0 84px;
}
.c-links dd + dt{
	margin-top:12px;
}
.c-links li,
.c-linklist li{
	font-size:12px;
	line-height:22px;
}
.c-links a,
.c-linklist a{
	padding-right:14px;
}
.c-linklist{
	margin:14px 0 0 4px;
}

/* 利用案内 */
.c-guide{
	margin-top:28px;
}
.c-guide dt{
	font-size:12px;
	padding-bottom:7px;
}
.c-guide dd{
	font-size:10px;
	line-height:16px;
	margin-top:14px;
}
.c-guide dd + dt{
	margin-top:24px;
}

/* 利用例 */
.c-usecase{
	margin-top:14px;
}
.c-usecase dt{
	font-size:12px;
}
.c-usecase dd{
	margin-top:10px;
}
.c-usecase + .c-accordion{
	margin-top:28px; /* SPは「設備・ご利用情報」の後に表示されるため .c-accordion と同じ余白 */
}
.c-usecase li{
	font-size:10px;
	line-height:17px;
}

/* アコーディオン */
.c-accordion{
	margin-top:28px;
	border-radius:28px;
}
.c-accordion__btn{
	font-size:14px;
	padding:20px 40px 20px 44px;
	background-position:right 44px center;
	background-size:13px 13px;
}
.c-accordion__body{
	padding:0 20px 24px;
	/* PC用指定の解除 */
	margin-top:0;
}
.c-accordion__list dt{
	font-size:12px;
	padding:20px 0 0 20px;
}
.c-accordion__list dt:before{
	top:23px;
	left:6px;
}
.c-accordion__list dd{
	font-size:10px;
	line-height:16px;
	padding:8px 0 18px 20px;
}


/* ============================================================
 メインビジュアル
============================================================ */
/* SPは幅100％・縦横比 39:26 で表示（高さ100vhは使わない） */
.mv,
.mv-slider__item img{
	height:auto;
}
.mv-slider__item img{
	width:100%;
	aspect-ratio:39 / 26;
}
.mv .slick-dots{
	bottom:14px;
}
.mv .slick-dots li{
	margin:0 6px;
}
.mv .slick-dots button{
	width:7px;
	height:7px;
}

/* ============================================================
 RENTAL SPACE 予約ボタン（追従）
 SPはタップでレンタルスペースへ移動（メニュー非表示）
============================================================ */
.rental-fixed{
	right:16px;
	bottom:62px;
	width:72px;
}
.rental-fixed__btn{
	width:72px;
	height:72px;
	font-size:9px;
	line-height:13px;
	padding:0;
	box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.rental-fixed__menu{
	right:28px;
	bottom:calc(100% + 12px);
}
.rental-fixed__menu li + li{
	margin-top:16px;
}
.rental-fixed__menu a{
	font-size:9.6px;
	line-height:11px;
	padding-right:20px;
}
.rental-fixed__menu a:after{
	top:2px;
	width:10px;
	height:10px;
}


/* ============================================================
 ABOUT
============================================================ */
.about{
	padding-bottom:62px;
}
.about-main .c-media__head,
.about-counter .c-media__head{
	margin-bottom:34px;
}
.about-architect{
	position:relative;
	margin-top:24px;
}
.about-architect__img{
	width:118px;
}
.about-architect figcaption{
	font-size:6px;
	line-height:6px;
	margin-top:6px;
}
.about-architect__profile{
	position:absolute;
	top:auto;
	bottom:14px;
	left:126px;
	width:90px;
}
.about-architect__profile dt{
	font-size:8px;
}
.about-architect__profile dd{
	font-size:6px;
	line-height:10px;
	margin-top:6px;
}

/* 上下中央配置の微調整 */
.c-media--center .c-media__text{
	padding-top:0;
}

/* INFORMATION 見出し：SPは列に収まるので ABOUT と同じ指定に戻す */
.about-counter .c-title{
	letter-spacing:var(--en-ls);
	font-size:24px;
	margin-right:0;
}

/* INFORMATION のリンク先 */
.about-counter__anchor{
	top:-90px;
}

/* 総合窓口：館内MAPボタンを見出しの右に */
.about-counter{
	margin-top:70px;
}
.about-counter .c-btn-area{
	position:absolute;
	top:0;
	right:0;
	margin-top:0;
}
.about-counter .c-btn{
	width:116px;
	font-size:10px;
	padding:12px 30px 12px 12px;
	background-size:9px 9px;
	background-position:right 12px center;
}

/* 3つのポイント */
.about-point{
	margin-top:26px;
	padding:40px 34px 26px;
}
.about-point__label{
	top:-12px;
	width:160px;
	font-size:12px;
	padding:6px 0;
}
.about-point__list.flex-block{
	flex-direction:column;
	gap:16px;
}
.about-point__list .flexbox{
	flex:0 1 auto; /* PC用指定の解除 */
}
.about-point__title{
	font-size:12px;
	line-height:16px;
	padding-left:43px;
}
.about-point__num{
	width:34px;
	height:16px;
	font-size:9px;
	line-height:16px;
}
.about-point p{
	font-size:8px;
	line-height:14px;
	margin-top:10px;
}


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


/* ============================================================
 RENTAL SPACE
============================================================ */
.rental{
	padding-bottom: 70px;
}
.rental-head__lead{
	width:auto;
	font-size:14px;
	line-height:23px;
	margin-top:10px;
}

/* スライダー（中央：縦長／左右：縦書きラベル） */
.rental-slider{
	margin-top:30px;
	padding:0;
}
.rental-slider__item{
	width:293px;
	padding:0 24px;
}
/* 左右のスライドは高さを縮める（幅は同じ） */
.rental-slider__img{
	height:272px;
	margin:32px 0;
	border-radius:30px;
	transform:none;
	transition:height .5s, margin .5s;
}
.rental-slider .is-center .rental-slider__img{
	height:336px;
	margin:0;
	transform:none;
}
/* 縦書きラベル：左のスライドは右端、右のスライドは左端に表示 */
.rental-slider__label{
	top:50%;
	left:auto;
	right:50px;
	width:auto;
	transform:translate(50%,-50%) rotate(90deg);
	font-size:12px;
	white-space:nowrap;
	/* PC用指定の解除 */
	padding:0;
	text-align:center;
}
.rental-slider .slick-slide:not(.is-left) .rental-slider__label{
	right:auto;
	left:50px;
	transform:translate(-50%,-50%) rotate(90deg);
	/* PC用指定の解除 */
	text-align:center;
}
.rental-slider__arrow{
	width:33px;
	height:33px;
	margin-top:-16px;
	background-size:9px 12px;
}
.rental-slider__arrow--prev{
	left:calc(50% - 150px);
}
.rental-slider__arrow--next{
	left:calc(50% + 117px);
}

/* 詳細（SPは タイトル → ボタン → 本文 → 情報 → 利用案内 の順） */
.rental-detail{
	width:auto;
	margin:31px 0 0;
}
.rental-detail__body{
	display:flex;
	flex-direction:column;
	/* PC用指定の解除 */
	justify-content:normal;
	align-items:normal;
}
.rental-detail__main,
.rental-detail__side{
	display:contents;
}
.rental-detail__main .c-title{
	order:1;
	font-size:20px;
	margin-top:0;
}
.rental-detail__side .c-btn-area{
	order:2;
	display:flex;
	gap:10px;
	margin-top:24px;
}
.rental-detail__side .c-btn{
	flex:1;
	width:auto;
	margin-top:0;
}
.rental-detail .c-text{
	order:3;
	margin-top:24px;
}
.rental-detail .c-info{
	order:4;
	margin-top:20px;
}
.rental-detail .c-usecase{
	order:4; /* .c-info の後（同じorderはHTML順） */
}
.rental-detail .c-guide{
	order:5;
}
.rental-detail .c-accordion{
	order:6;
}


/* ============================================================
 CIRCULATION
============================================================ */
.circulation .c-media__head{
	padding-top:0;
	margin-bottom:34px;
}


/* ============================================================
 ACCESS（SPは中央揃え）
============================================================ */
.access{
	padding-bottom:60px;
}
.access .c-media__head{
	margin-bottom:24px;
	text-align:center;
}
.access .c-media__text{
	text-align:center;
}
.access .c-label--s{
	margin-left:auto;
	margin-right:auto;
}
.access-info__zip{
	display:block;
	font-size:14px;
	line-height:24px;
}
.access-info dd{
	font-size:14px;
	line-height:24px;
	margin-top:12px;
}
.access-info dd + dt{
	margin-top:24px;
}


/* ============================================================
 フッター
 SPは ナビ（写真の上）→ SNS → お問い合わせ → ロゴ・運営設計 の順
============================================================ */
/* 背景画像は幅100％・高さauto（上部に表示）、下は背景色 */
#footer{
	padding:62px 0 30px;
	background:#7c7877 url(../images/footer_bg_sp.jpg) center top / 100% auto no-repeat;
}

.footer-inner{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-end;
}
.footer-top,
.footer-bottom{
	display:contents;
}
.footer-nav{
	order:1;
	width:100%;
	margin-top:0;
	/* PC用指定の解除 */
	position:static;
	top:auto;
	left:auto;
}
.footer-nav ul{
	display:grid;
	grid-template-columns:150px 1fr; /* INFORMATION が右の列に重ならない幅 */
	grid-auto-flow:row dense;
	row-gap:19px;
}
.footer-nav li{
	grid-column:1;
	font-size:12px;
	line-height:17px;
	/* PC用指定の解除 */
	float:none;
	margin-right:0;
}
.footer-nav li:nth-child(7){
	clear:none; /* PC用指定の解除 */
}
/* 右の列：GALLERY・SPACE・DAY CAMP */
.footer-nav li:nth-child(6),
.footer-nav li:nth-child(7),
.footer-nav li:nth-child(8){
	grid-column:2;
}
.footer-sns{
	order:2;
	width:100%;
	margin-top:150px;
	/* PC用指定の解除 */
	position:static;
	top:auto;
	left:auto;
}
.footer-sns dl{
	/* PC用指定の解除 */
	float:none;
	width:auto;
}
.footer-sns dl + dl{
	margin-top:10px;
}
.footer-sns dt{
	font-size:12px;
}
.footer-sns dd{
	margin-top:6px;
	font-size: 14px;
}
.footer-contact{
	order:3;
	width:100%;
	margin-top:10px;
	padding-bottom:14px;
	border-bottom:1px solid rgba(255,255,255,.6);
}
.footer-contact__lead{
	font-size:12px;
	line-height:20px;
}
.footer-contact__list{
	margin-top:14px;
	/* PC用指定の解除 */
	position:static;
}
.footer-contact__list li{
	font-size:14px;
	line-height:16px;
}
.footer-contact__list li + li{
	margin-top:14px;
}
.footer-contact__mail a{
	padding-left:24px;
}
.footer-contact__mail a:after{
	margin-left:3px;
}
.footer-contact__tel{
	background:url(../images/icon_tel_white.svg) left 0.2em / 17px 17px no-repeat;
	padding-bottom: 0;
	padding-left:24px;
	background-size:17px 17px;
	/* PC用指定の解除 */
	position:static;
	top:auto;
	left:auto;
}
.footer-contact__tel a{
	display: block;
}
/* 営業時間：電話番号の下の行に、アイコンの左端からそろえて表示 */
.footer-contact__hours{
	display:block;
	margin:10px 0 0 -24px;
}

.footer-logo{
	order:4;
	margin-top:16px;
	font-size:16px;
	line-height:20px;
	letter-spacing:.2em;
	width: 210px;
	display: block;
}

/* 運営（Add Wall ロゴ） */
.footer-credit{
	order:5;
	margin:16px 0 0 auto;
	width: 77px;
	/* PC用指定の解除 */
	position:static;
	top:auto;
	left:auto;
}

/* メニュー表示中の背景 */
/* メニュー表示中の背景ぼかしはSPでは使わない（全画面メニューのため） */
#shadows{
	display:none !important;
}

/* ポップアップ */
.c-modal__box{
	width:343px;
	padding:22px 20px 32px;
	border-radius:18px;
}
.c-modal__close{
	top:0;
	right:4px;
	background-size:15px 15px;
}
.c-modal__title{
	font-size:14px;
}
.c-modal__text{
	font-size:11px;
	line-height:19px;
	margin-top:16px;
}
.c-modal .c-info{
	margin-top:22px;
	margin-left:5px;
}

}