@charset "utf-8";
/**--------------------------------------------------------
 * sp.css
 *
 * スマホ・タブレット縦向き用（画面幅 999px 以下）
 * 各ページで style.css・shutter.css の後に読み込む。
 * PC 用の style.css は変更せず、ここで上書きする。
 *
 * 画面下の白い帯（#context）は、スマホでは下に固定した細い帯（ロゴ＋メニューボタン）にする。
 * メニューボタン（#sp_menu_btn）の開閉は common.js（#context に .is-sp-open を付ける）。
 -----------------------------------------------------------*/

/* PC ではメニューボタンと、スマホ専用の要素（.sp_only）を出さない */
#sp_menu_btn,
#sp_bar_bg,
.sp_only{
	display:none;
}

/* PC 幅で独自スクロールを使わない端末（iPad の横向き等）では、下の帯を画面下に固定する。
   .is-native-scroll は common.js（tecolabo.scroller.setup）が html に付ける。2026-10-01 */
@media (min-width: 1000px){
	.is-native-scroll .sub #context{
		position:fixed;
		left:0;
		bottom:0;
		margin-top:0;
	}
}

@media (max-width: 999px){

	/* --sp-safe-*：ノッチ等を避ける余白（viewport-fit=cover のとき iPhone の横向きで左右に入る。ふだんは 0）
	   --sp-pad-l/r：左右の余白（通常は --sp-gutter、ノッチの方が大きいときはノッチの幅）。2026-10-01 */
	:root{
		--sp-bar-h:56px;
		--sp-safe-t:env(safe-area-inset-top, 0px);
		--sp-safe-b:env(safe-area-inset-bottom, 0px);
		--sp-safe-l:env(safe-area-inset-left, 0px);
		--sp-safe-r:env(safe-area-inset-right, 0px);
		--sp-gutter:20px;
		--sp-pad-l:max(var(--sp-gutter), var(--sp-safe-l));
		--sp-pad-r:max(var(--sp-gutter), var(--sp-safe-r));
	}

	body, html{
		min-width:0;
	}

	/* #header
	------------------------------------------------------------*/
	#header{
		top:var(--sp-safe-t);
	}
	#url{
		display:none;
	}
	#unavi{
		margin-right:calc(12px + var(--sp-safe-r));
	}

	/* 下に固定した帯・ロゴ・メニュー
	------------------------------------------------------------*/
	/* 帯の白い地（実要素 #sp_bar_bg、各ページの #sp_menu_btn の次に置く）。
	   iPhone Safari（iOS 26 以降）は、画面の下端に接する position:fixed の実要素の background-color から
	   下部アドレスバーの色を決め、擬似要素（::before）は見ない（第三者の検証記事による。Apple の公式資料は未確認）。
	   以前の #context_in::before（bottom:-150px まで伸ばす案）は実機で効果がなかったため置き換えた。 */
	#sp_bar_bg{
		display:block;
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		height:calc(var(--sp-bar-h) + var(--sp-safe-b));
		background-color:#fff;
		box-shadow:0 -2px 6px rgba(0,0,0,0.15);
		z-index:2;
	}

	#context #logo,
	.sub #context #logo,
	.index #context #logo{
		position:fixed;
		left:calc(12px + var(--sp-safe-l));
		bottom:calc(6px + var(--sp-safe-b));
		width:auto;
		height:44px;
		padding:0;
		float:none;
		background:none;
		z-index:3;
	}
	#logo img{
		width:auto;
		height:44px;
	}

	/* メニューボタン */
	#sp_menu_btn{
		display:block;
		position:fixed;
		right:calc(8px + var(--sp-safe-r));
		bottom:calc(6px + var(--sp-safe-b));
		width:44px;
		height:44px;
		padding:0;
		border:none;
		background:none;
		cursor:pointer;
		z-index:3;
	}
	#sp_menu_btn span,
	#sp_menu_btn span::before,
	#sp_menu_btn span::after{
		display:block;
		position:absolute;
		left:11px;
		width:22px;
		height:2px;
		background-color:#333;
		transition:transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
	}
	#sp_menu_btn span{
		top:21px;
	}
	#sp_menu_btn span::before,
	#sp_menu_btn span::after{
		content:"";
		left:0;
	}
	#sp_menu_btn span::before{
		top:-7px;
	}
	#sp_menu_btn span::after{
		top:7px;
	}
	.is-sp-open #sp_menu_btn span{
		background-color:transparent;
	}
	.is-sp-open #sp_menu_btn span::before{
		transform:translateY(7px) rotate(45deg);
	}
	.is-sp-open #sp_menu_btn span::after{
		transform:translateY(-7px) rotate(-45deg);
	}

	/* メニューパネル（グローバルナビの画像を3列に並べる）。開くときは帯の後ろから上がる */
	#context #gnavi,
	.index #context #gnavi,
	.sub #context #gnavi{
		display:block;
		visibility:hidden;
		transform:translateY(100%);
		transition:transform 0.3s ease-out, visibility 0s linear 0.3s;
		position:fixed;
		left:0;
		right:0;
		bottom:calc(var(--sp-bar-h) + var(--sp-safe-b));
		width:auto;
		height:auto;
		max-height:calc(100vh - var(--sp-bar-h));
		max-height:calc(100dvh - var(--sp-bar-h) - var(--sp-safe-b));
		overflow-y:auto;
		float:none;
		padding:16px 0;
		background-color:#fff;
		border-bottom:1px dotted #ccc;
		box-shadow:0 -2px 6px rgba(0,0,0,0.15);
		z-index:1;
	}
	#context.is-sp-open #gnavi{
		visibility:visible;
		transform:translateY(0);
		transition:transform 0.3s ease-out, visibility 0s;
	}
	#gnavi ul,
	.sub #gnavi ul{
		display:grid;
		grid-template-columns:repeat(3, 90px);
		justify-content:center;
		justify-items:center;
		column-gap:16px;
		margin:0;
	}
	#gnavi li,
	.index #gnavi li{
		float:none;
		height:auto;
	}
	.index #gnavi li a{
		display:block;
		height:auto;
	}

	/* ページトップボタン */
	#btn_pagetop{
		position:fixed;
		top:auto;
		right:calc(10px + var(--sp-safe-r)) !important;
		bottom:calc(var(--sp-bar-h) + 10px + var(--sp-safe-b));
		width:40px;
		height:40px;
		z-index:2;
	}
	#btn_pagetop img{
		width:40px;
		height:40px;
	}

	/* 下層ページ：帯の中にあった RECENT TOPICS・コピーライトはページ末尾に置く
	------------------------------------------------------------*/
	.sub #context{
		height:auto;
		margin-top:0;
		padding:0 0 calc(var(--sp-bar-h) + var(--sp-safe-b));
		background:none;
	}
	.sub #context_in,
	.works #context_in,
	.service #context_in,
	.about #context_in,
	.access #context_in,
	.topics #context_in,
	.contact #context_in,
	.general #context_in{
		height:auto;
		overflow:visible;
		padding:8px var(--sp-pad-r) 12px var(--sp-pad-l);
		background:#fff;
	}
	/* 下層ページでは RECENT TOPICS を出さない（トップのみ）。2026-09-26 勝呂さん指示 */
	.sub #news{
		display:none;
	}
	#news_loading,
	#news_line{
		left:100px;
		width:calc(100% - 100px);
	}
	#news_line .news{
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.sub #copy{
		position:static;
		height:auto;
		line-height:1.8;
		text-align:center;
	}

	/* 下層ページ：本文が短く画面に収まるとき（iPad・大きい iPhone 等）、コピーライトの白い帯が
	   画面の途中に浮かないよう、#container を画面の高さ以上にして #context を末尾へ押し下げる。
	   style.css の #container{height:100%} のままだと、中身が画面より長いとき flex の子が縮むため height:auto にする。
	   100dvh：スマホのアドレスバーの伸び縮みに合わせた画面の高さ（非対応ブラウザは 100vh）。2026-09-27 */
	.sub #container{
		display:flex;
		flex-direction:column;
		height:auto;
		min-height:100vh;
		min-height:100dvh;
	}
	.sub #contents{
		flex:1 0 auto;
	}
	.sub #context{
		flex-shrink:0;
	}

	/* 下層ページ：本文
	------------------------------------------------------------*/
	#contents{
		display:flex;
		flex-direction:column;
		height:auto;
		min-height:0;
	}
	#content{
		height:auto !important;
	}
	#scrollbar{
		display:none;
	}

	/* ローカルナビは本文の上 */
	/* ローカルナビと本文は、タブレット幅でも PC と同じ 650px までにして中央に置く */
	#side{
		order:-1;
		position:static;
		box-sizing:border-box;
		width:100%;
		max-width:calc(650px + var(--sp-pad-l) + var(--sp-pad-r));
		margin:0 auto;
		padding:calc(64px + var(--sp-safe-t)) var(--sp-pad-r) 0 var(--sp-pad-l);
	}
	#side .side_title{
		margin-bottom:16px;
	}
	#side .local_navi{
		display:flex;
		flex-wrap:wrap;
		gap:8px 20px;
	}
	/* WORKS は同じ幅（92px）の画像が11個あるので、列をそろえる */
	.works #side .local_navi{
		display:grid;
		grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
		gap:8px 16px;
	}
	#side .local_navi li{
		margin-bottom:0;
	}

	#main{
		width:auto;
		max-width:650px;
		margin:0 auto;
		padding:32px var(--sp-pad-r) 40px var(--sp-pad-l) !important;
		top:auto !important;
	}
	#main img{
		max-width:100%;
		height:auto;
		box-sizing:border-box;
	}
	.section_title h1{
		margin-bottom:1.2em;
	}
	/* SERVICE の文字の大見出しと文字のローカルナビ（2026-10-03） */
	.section_title h1.text_title{
		font-size:2.0em;
		line-height:1.4;
	}
	#side .local_navi.text_navi a{
		font-size:14px;
	}
	/* ローカルナビの左の矢印：文字が大きくなる分、1px 下げる（2026-10-04） */
	#side .local_navi.text_navi li{
		background-position:0 8px;
	}
	/* SERVICE の各領域のリンクの丸い矢印：見出しが大きくなる分、下げる（2026-10-04） */
	.section a.area_link::before,
	.section a.area_link::after{
		top:20px;
	}
	.section{
		font-size:1.5em;
	}

	/* 回り込みの写真は縦に積む */
	.sub_section .figure_l,
	.sub_section .figure_r,
	#main .section .fr,
	#main .section .fl{
		float:none;
		margin:0 0 1em;
		padding-left:0;
	}
	.sub_section .figure_l,
	.sub_section .figure_r{
		padding:10px;
		text-align:center;
	}
	#main .section figure.fr,
	#main .section p.fr{
		text-align:center;
	}

	/* 動画・地図 */
	#main iframe,
	#main video{
		display:block;
		width:100%;
		height:auto;
		aspect-ratio:16 / 9;
	}
	.works #main #main_visual{
		padding:6px;
	}
	#tecolabo_philosophy{
		width:100%;
		height:auto;
	}
	#tecolabo_philosophy video{
		aspect-ratio:auto;
	}
	#map{
		height:auto;
	}
	#map_iframe iframe{
		aspect-ratio:4 / 3;
	}
	#gmap_link{
		position:static;
		margin-top:10px;
		text-align:right;
	}

	/* 表は項目名を上、内容を下に */
	.section table,
	.section table tbody,
	.section table tr,
	.section table th,
	.section table td{
		display:block;
		width:auto !important;
	}
	.section table th{
		padding:0.8em 0 0;
		background:none;
		font-weight:bold;
	}
	.section table td{
		padding:0.2em 0 0.8em;
	}

	/* WORKS 一覧 */
	#works_index li a{
		display:flex;
		gap:16px;
		align-items:flex-start;
	}
	#works_index li span.text_area{
		position:static;
		flex:1;
	}
	#main #works_index .number img{
		margin-top:0.3em;
	}

	/* スマホ専用／PC 専用の要素 */
	.sp_only{
		display:block;
	}
	.pc_only{
		display:none;
	}
	.works #main #main_visual.sp_only{
		text-align:center;
	}

	/* WORKS 詳細のクレジット */
	.works #credit dl dt{
		width:110px;
	}
	.works #credit dl dd{
		padding-left:110px;
	}

	/* ACCESS 周辺の写真（スライダーの位置は location_photo.js で計算） */
	#loaction_photo ul{
		width:auto;
		margin-left:0;
	}
	#loaction_photo ul li{
		width:240px;
	}
	#loaction_photo #slide_view li{
		margin-right:20px;
	}
	#loaction_photo ul li .photo{
		width:auto;
	}
	/* PC では独自スクロールが #container を overflow:hidden にしているが、スマホでは使わないためここで隠す。
	   touch-action:pan-y：縦のスクロールはブラウザに任せ、横の動きは location_photo.js のスワイプに使う */
	#loaction_photo #slide_view{
		overflow:hidden;
		touch-action:pan-y;
	}

	/* CONTACT
	------------------------------------------------------------*/
	.contact #contact_form table tr{
		display:flex;
		flex-wrap:wrap;
		align-items:baseline;
	}
	.contact #contact_form table th{
		width:auto !important;
	}
	.contact #contact_form table td.req{
		width:auto !important;
		padding-left:0.3em;
	}
	.contact #contact_form table td:not(.req){
		flex:0 0 100%;
	}
	.contact select,
	.contact input.text_input,
	.contact textarea.text_input{
		box-sizing:border-box;
		width:100% !important;
		margin-right:0;
		font-size:16px;
	}
	.contact #contact_form #form_btns{
		padding-left:0;
		text-align:center;
	}

	/* トップページ
	------------------------------------------------------------*/
	.index #container{
		height:100vh;
		height:100dvh;
	}
	.top #context{
		bottom:calc(var(--sp-bar-h) + var(--sp-safe-b));
		height:auto;
		padding:0;
		/* filter・backdrop-filter・transform は、中の position:fixed（ロゴ・メニュー）の基準を変えてしまうため外す */
		filter:none;
		-webkit-backdrop-filter:none;
		backdrop-filter:none;
		animation-name:sp-fade-in;
	}
	.top #context_in{
		margin:0;
		padding:0 var(--sp-pad-r) 0 var(--sp-pad-l);
	}
	.index #news{
		float:none;
		width:auto;
	}
	.index #copy{
		float:none;
		height:auto;
		line-height:1.8;
		padding-bottom:6px;
		text-align:right;
	}
	/* キャッチコピー（2026-10-04：実文字＋すりガラスの札に変更。見た目は style.css。ここでは位置・幅・余白・文字の大きさだけ上書き。
	   変更前は画像の比率（aspect-ratio 500/59）で幅を可変にしていた） */
	.index #copy_text{
		right:max(5%, var(--sp-safe-r));
		bottom:calc(var(--sp-bar-h) + var(--sp-safe-b) + 110px);
		max-width:calc(100% - max(5%, var(--sp-safe-l)) - max(5%, var(--sp-safe-r)));
		padding:18px 20px;
		font-size:clamp(26px, 7.5vw, 40px);
	}

	@keyframes sp-fade-in{
		from{ opacity:0; }
		to{ opacity:1; }
	}

}