/* =========================================
   Front Page / トップページ
   ※ designstudio-l.jp 参考版
========================================= */
.grm-front-section {
	margin: 160px 0 0 0 !important;
}
.h2-front {
	max-width: 920px;
	margin: 0 auto 48px;
	text-align: center;
	font-size: clamp(25px, 4.5vw, 32px);
	line-height: 1.2;
	font-weight: 100;
	letter-spacing: .05em;
}

/* =========================================
   休業日カレンダー（grm-holidayプラグイン）
   ・サイト全体の「細い」トーンに合わせて
   　年月・曜日・日付の文字を全て細くする
========================================= */
.grm-holiday-month-title{
	font-weight: 300;
}
.grm-holiday-week-cell{
	font-weight: 300;
}
.grm-holiday-cell{
	font-weight: 300;
}
.grm-holiday-cell.is-closed{
	font-weight: 400;
}

/* =========================================
   Blogスライダーのカード文字サイズ固定
   ・下の「Root Font Scaling」でフロントページ全体の
   　html文字サイズをvwで可変にしているが、card.css側の
   　.grm-card-title等はrem指定のため、この可変サイズの
   　影響を受けてTalk/Projectカード等（px固定）より
   　文字が大きく見えてしまっていた。
   　スライダーのカードだけは他のカードと同じ見た目に
   　したいので、px固定に戻して打ち消す。
========================================= */
.grm-slider-card .grm-card-title{
	font-size:14px;
}
.grm-slider-card .grm-card-date{
	font-size:13px;
}
.grm-slider-card .grm-card-excerpt{
	font-size:13.5px;
}
.grm-slider-card .grm-card-noimage{
	font-size:12px;
}

/* =========================================
   フロントページ「Blog」セクションのカード文字サイズ固定
   ・#blog-slider内のカードは上記.grm-slider-cardのクラスが
   　付いておらず、Root Font Scalingの影響をそのまま受けて
   　ブログ一覧ページ（.grm-cat-grid、page.css）のカードより
   　文字が大きく見えてしまっていたため、同じ値で打ち消す。
========================================= */
#blog-slider .grm-card-title{
	font-size:14px;
}
#blog-slider .grm-card-date{
	font-size:13px;
}
#blog-slider .grm-card-excerpt{
	font-size:13.5px;
}

/* =========================================
   Root Font Scaling / フォントの流動スケール
   ※ designstudio-l.jp と同じ考え方で、
   　768 / 1024 / 1366px の各幅で 1rem=14px に
   　なるよう vw で滑らかに補間する。
   　（このページ内でのみ有効にするため front.css に限定）
========================================= */
html{
	font-size:3.7333333333vw;
}
@media screen and (min-width:768px){
	html{ font-size:1.8229166667vw; }
}
@media screen and (min-width:1024px){
	html{ font-size:1.3671875vw; }
}
@media screen and (min-width:1366px){
	html{ font-size:1.0204081633vw; }
}

/* =========================================
   Hero + Works / ヒーロー＋制作実績
   ※ designstudio-l.jp のホーム実装を移植。
   　.grm-hero-mv: landscape時 width:40% / margin:0 20% 0 40%
   　→ ページ左40%を見出し・ナビ用に空け、
   　　実際の実績画像はその右の40%、
   　　キャプションはさらに右の20%（overflowで配置）。
========================================= */
.grm-hero-mv{
	position:relative;
	width:90%;
	margin:0 auto;
}
@media(orientation:landscape){
	.grm-hero-mv{
		width:40%;
		margin:0 20% 0 40%;
	}
}

/* ---- 固定ナビ（サービス／実績／対談 等へのページ内リンク） ---- */
/* メインコピー（.grm-hero-maincopy）と位置を入れ替え、
   ナビは左下・メインコピーは左上に配置している。 */
.grm-hero-nav-fixed{
	display:none;
}
@media(orientation:landscape){
	.grm-hero-nav-fixed{
		display:block;
		position:fixed;
		bottom:min(5vw, 6vh);
		left:5%;
		font-size:2vw;
		z-index:5;
		transition:opacity .3s;
	}
	@media(min-width:1024px){
		.grm-hero-nav-fixed{
			font-size:1vw;
		}
	}
	@media(max-height:700px){
		.grm-hero-nav-fixed{
			display:none;
		}
	}
}

.grm-hero-nav-fixed ul{
	list-style:none;
	margin:0;
	padding:0;
}

.grm-hero-nav-fixed > ul > li{
	margin-top:.75em;
}

.grm-hero-nav-fixed > ul > li:first-child{
	margin-top:0;
}

.grm-hero-nav-fixed a{
	color:var(--color-main);
	text-decoration:none;
}

.grm-hero-nav-fixed a:hover{
	text-decoration:underline;
}

.grm-hero-nav-sub{
	list-style:none;
	margin:.5em 0 0 1em;
	padding:0;
}

.grm-hero-nav-sub li{
	margin-top:.35em;
	font-size:.85em;
}

/* 特定の項目を固定ナビ（.grm-hero-nav-fixed）にだけ出したくない場合は、
   Appearance > Menus の対象項目「CSSクラス」欄に
   「grm-hero-nav-hide」を指定する（PHP側 grm_render_hero_nav() が
   　その項目自体を出力しないようにする。以前あったhref="/privacy"
   　を狙い撃ちするCSSの応急処置は、この仕組みに置き換えて削除した）。 */

/* ---- 固定見出し（「らしさ」をかたちにする） ---- */
.grm-hero-maincopy{
	position:relative;
	width:26.15vw;
	margin:0 5% 15vw auto;
	writing-mode:vertical-rl;
}
/* メインコピーを囲む h1（SEO用）。テーマ共通の h1 の指定をすべて打ち消し、
   箱も作らないので、中の .main の見た目・位置は h1 が無い時と同じ */
.grm-hero-maincopy h1.grm-hero-h1{
	all:unset;
	display:contents;
}
.grm-hero-maincopy .main {
	font-size: min(13vw, 9vh);
	white-space: nowrap;
	display: block;
	line-height: 130%;
	font-family: var(--font-mincho);
	font-weight: 400; /* フォント自体は400のままで大丈夫です */
	-webkit-font-smoothing: antialiased; /* MacやiPhone等の液晶画面で、文字の輪郭を削って一段と細く滑らかに描写させます */
	-moz-osx-font-smoothing: grayscale;
}
.grm-hero-maincopy .sub{
	font-size:min(3vw, 2vh);
	white-space:nowrap;
	display:block;
	padding-top:11em;
	font-family:var(--font-mincho);
}
@media screen and (orientation:portrait) and (min-width:768px){
	.grm-hero-maincopy .main{
		font-size:10vw;
	}
	.grm-hero-maincopy .sub{
		font-size:min(2.5vw, 2vh);
	}
}
@media(orientation:landscape){
	/* ナビ（.grm-hero-nav-fixed）と位置を入れ替え、
	   メインコピーは左上・ナビは左下に配置している。 */
	.grm-hero-maincopy{
		position:fixed;
		left:5%;
		top:min(12.5vw, 20vh);
		width:auto;
		margin:0;
		writing-mode:horizontal-tb;
		z-index:5;
		transition:opacity .3s;
	}
	.grm-hero-maincopy .main{
		font-size:4.5vw;
		line-height:1em;
		margin-bottom:1.1rem;
		white-space:normal;
	}
	.grm-hero-maincopy .sub{
		font-size:1.1vw;
		letter-spacing:.1em;
		padding-top:0;
		white-space:normal;
		display:block;
		color:var(--color-sub);
	}
}

/* ---- 「実績一覧」までスクロールしたらフェードアウト ---- */
.grm-hero-maincopy.is-hidden,
.grm-hero-nav-fixed.is-hidden{
	opacity:0;
	visibility:hidden;
}

/* ---- メインビジュアル（2026） ----
   ・スマホ（縦長）: .grm-hero-mv（幅90%）からはみ出させて画面幅いっぱい。
   ・PC（横長）: .grm-hero-mv は左40%の位置から始まるため、
   　左へ6.6667vwずらして「左1/3を空けた残り2/3幅（右端まで）」に配置。
   　ヘッダー分の余白（.head-margin）を打ち消してページ最上部から表示する。 */
.grm-hero-visual{
	width:100vw;
	margin-left:calc(50% - 50vw);
}
.grm-hero-visual img{
	display:block;
	width:100%;
	height:auto;
}
@media(orientation:landscape){
	.grm-hero-visual{
		width:66.6667vw;
		margin:-100px 0 0 -6.6667vw;
	}
	@media(max-width:991px){
		.grm-hero-visual{
			margin-top:-70px;
		}
	}
}

/* ---- 実績一覧 ---- */
.grm-works-list{
	margin-top:24vw;
}
@media(orientation:landscape){
	.grm-works-list{
		margin-top:14vw;
	}
}

.grm-works-item{
	position:relative;
}

.grm-works-item + .grm-works-item{
	margin-top:15vw;
}
@media(orientation:landscape){
	.grm-works-item + .grm-works-item{
		margin-top:max(5vh, (100vh - 26.6vw) / 2 - 5.5vw);
	}
}

.grm-works-item > a{
	display:block;
	color:inherit;
	text-decoration:none;
}

.grm-works-img{
	position:relative;
	overflow:hidden;
}

.grm-works-img img{
	display:block;
	width:100%;
	height:auto;
	object-fit:cover;
	transition:transform .4s;
}

.grm-works-item:hover .grm-works-img img{
	transform:scale(1.03);
}

.grm-works-text{
	width:90%;
	margin:1em auto 0;
}
@media(orientation:landscape){
	.grm-works-text{
		position:absolute;
		left:100%;
		bottom:0;
		width:20vw;
		margin:0;
		padding:0 5%;
	}
}

.grm-works-eyebrow{
	font-size:0.857143rem;
	margin-bottom:.1em;
	color:var(--color-sub);
}
@media(orientation:landscape){
	.grm-works-eyebrow{
		font-size:.89vw;
		margin-bottom:1em;
	}
}

/* 実績カードの会社名：■client表記（上の行）＋文字を少し大きく */
.grm-works-eyebrow--client{
	font-size:1rem;
}
@media(orientation:landscape){
	.grm-works-eyebrow--client{
		font-size:1.05vw;
	}
}

.grm-works-client-mark{
	display:block;
	font-size:.75em;
	margin-bottom:.3em;
	color:var(--color-sub);
}

/* 先頭のCONCEPT紹介カード：見出しとして大きく */
.grm-works-eyebrow--concept{
	font-size:1.2rem;
	font-weight:300;
	letter-spacing:.05em;
	color:var(--color-main, inherit);
}
@media(orientation:landscape){
	.grm-works-eyebrow--concept{
		font-size:1.8vw;
	}
}

.grm-works-title{
	font-size:1rem;
	line-height:1.8;
}
@media(orientation:landscape){
	.grm-works-title{
		font-size:.89vw;
	}
}

.grm-works-cat{
	font-size:0.571429rem;
	margin-top:.75em;
	letter-spacing:.05em;
	color:var(--color-sub);
	text-transform:uppercase;
}
@media(orientation:landscape){
	.grm-works-cat{
		font-size:.63vw;
	}
}

.grm-works-more{
	margin-top:60px;
	text-align:center;
}
@media(orientation:landscape){
	/* .grm-hero-mv は landscape 時 margin:0 20% 0 40%（左40%・右20%）と
	   左右非対称に配置されているため、text-align:centerだとその
	   カラム自身の中心＝画面中心より右（40%と20%の差の半分＝10vw分）に
	   ずれる。逆に前回試した「要素の外に飛び出して中央寄せ」する方法
	   （width:100vwやtranslateX(-50%)での中央寄せ）は、ボタンが画面の
	   外側にはみ出してしまい、フロントページが左右にスライドできて
	   しまう不具合の原因になっていたため使わない。
	   ここではボタンをカラムの外にはみ出させず、ズレの分（10vw）だけ
	   左へ動かすだけで揃える。 */
	.grm-works-more{
		transform:translateX(-10vw);
	}
}

.grm-works-more a{
	display:inline-block;
	padding:15px 48px;
	border:1px solid var(--color-main);
	border-radius:var(--radius-full);
	color:var(--color-main);
	text-decoration:none;
	transition:.3s;
}

.grm-works-more a:hover{
	background:var(--color-main);
	color:#fff;
}

/* =========================================
   Horizontal Scroll / 横スクロールカルーセル
========================================= */
.grm-hscroll{
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:thin;
	padding-bottom:10px;
}

.grm-hscroll-track{
	display:flex;
	gap:var(--gap);
	padding:0 15px;
	width:max-content;
}

@media(min-width:1230px){
	.grm-hscroll-track{
		padding:0 calc((100vw - var(--container)) / 2);
	}
}

.grm-section-more{
	margin-top:40px;
	text-align:center;
}
/* 【修正】「Blog一覧ボタンの上が開きすぎ」との指摘で、
   横スクロールカルーセル時代に付けていた80pxの追加余白
   （#blog-slider専用の上書き）を廃止し、他セクションと同じ
   標準の40pxに戻した。 */

/* =========================================
   Blog Panel / フロントページ「Blog」のカードグリッド
   ・【修正】「横スライドはいらない、横4列で」→「横3列に変えて」
   　との指定で、横スクロールカルーセル（.grm-hscroll）をやめ、
   　このテーマ既存のグリッドユーティリティ.grow-3-t2-s1
   　（PC3列・タブレット2列・スマホ1列、grid.css）に乗せる
   　静止グリッドに変更した。
   ・「Review押したときはReviewの中の新しいもの4つにしたい」との
   　指定で、チップごとに専用のWP_Query（新着4件）を用意し、
   　.grm-blog-panelを丸ごと出し分ける方式にした（1つのプールを
   　JSでフィルターするだけだと、選んだカテゴリーの投稿が
   　最初のクエリに4件そろっているとは限らないため）。
========================================= */
.grm-blog-panel{
	display:none;
}
.grm-blog-panel.is-active{
	display:block;
}

/* =========================================
   Blog / ブログ（カテゴリーチップ）
   ・「frontにツールチップを同じようにつけて」との指定で、
   　grm-theme-nagayo側の.grm-blog-chip（front-page.php／
   　front.css）と同じ見た目・仕組みをそのまま流用。
========================================= */
.grm-blog-chips{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
	margin:24px 0 40px;
}
.grm-blog-chip{
	display:inline-block;
	padding:9px 20px;
	border-radius:var(--radius-full);
	border:1px solid var(--color-border);
	background:transparent;
	font-size:12px;
	font-family:inherit;
	color:var(--color-sub);
	cursor:pointer;
	transition:.25s;
}
.grm-blog-chip.is-active,
.grm-blog-chip:hover{
	background:var(--color-main);
	border-color:var(--color-main);
	color:#fff;
}

/* =========================================
   Tag List / タグ一覧
========================================= */
.grm-tag-list{
	display:flex;
	flex-wrap:wrap;
	gap:6px 14px;
	list-style:none;
	margin:14px 0 0;
	padding:0;
}

.grm-tag-list li{
	font-size:11px;
	letter-spacing:.05em;
	color:var(--color-sub);
	text-transform:uppercase;
}

.grm-card-eyebrow{
	font-size:12px;
	color:var(--color-sub);
	margin-bottom:8px;
}

/* =========================================
   Service Slider / サービス（フェード切り替え）
   ・PC(1024px以上): 画像47% + テキスト35%（左右並び）
   ・それ以外: 画像→テキストの順に縦積み
========================================= */
.grm-service-slider{
	position:relative;
	width:90%;
	margin:0 auto;
}
@media screen and (min-width:1024px){
	.grm-service-slider{
		width:100%;
	}
}

.grm-service-track{
	position:relative;
}

.grm-service-item{
	display:none;
	opacity:0;
	transition:opacity .6s ease;
}

.grm-service-item.is-active{
	display:flex;
	flex-direction:column;
	opacity:1;
}

@media screen and (min-width:1024px){
	.grm-service-item.is-active{
		flex-direction:row;
		align-items:center;
	}
}

.grm-service-img{
	width:100%;
}
@media screen and (min-width:1024px){
	.grm-service-img{
		width:47%;
	}
}

.grm-service-img img{
	display:block;
	width:100%;
	height:auto;
	object-fit:cover;
}

.grm-service-text{
	margin-top:24px;
}
@media screen and (min-width:1024px){
	.grm-service-text{
		width:35%;
		margin:0 auto 0 5%;
	}
}

.grm-service-title{
	font-size:1.2rem;
	font-weight:400;
	margin-bottom:.75em;
}

.grm-service-desc{
	font-size:.9rem;
	line-height:1.9;
	color:var(--color-sub);
}

.grm-service-link{
	display:inline-block;
	margin-top:1.5em;
	font-size:.85rem;
	color:var(--color-main);
	text-decoration:underline;
}

.grm-service-control{
	position:absolute;
	right:0;
	bottom:0;
	width:32px;
	height:32px;
	border:1px solid var(--color-border);
	background:#fff;
	cursor:pointer;
}

.grm-service-control::before,
.grm-service-control::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:3px;
	height:10px;
	background:var(--color-main);
	transform:translate(-4px,-50%);
}

.grm-service-control::after{
	transform:translate(3px,-50%);
}

.grm-service-control.is-paused::before{
	width:0;
	height:0;
	background:transparent;
	border-style:solid;
	border-width:6px 0 6px 9px;
	border-color:transparent transparent transparent var(--color-main);
	transform:translate(-3px,-50%);
}

.grm-service-control.is-paused::after{
	display:none;
}

/* =========================================
   Talk Card / クライアント対談
========================================= */
.grm-talk-card .grm-card-body,
.grm-project-card .grm-card-body{
	padding:20px 4px !important;
	background:transparent;
}

.grm-talk-card .grm-card-title{
	font-size:16px;
	font-weight:500;
	line-height:1.7;
	white-space:normal;
	margin:8px 0 12px;
}

.grm-talk-card .grm-card-excerpt{
	font-size:12px;
	line-height:1.9;
}

/* =========================================
   Project Card / 社内プロジェクト
========================================= */
.grm-project-card .grm-card-title{
	font-size:15px;
	font-weight:500;
	line-height:1.7;
	white-space:normal;
	margin:8px 0 12px;
}