/* =========================================
   Base / 基本設定
========================================= */

html{
	scroll-behavior:smooth;
	overflow-x:hidden;
	/* html側だけでoverflow-xを制御する。
	   CSSの仕様上、overflow-xだけを指定するとoverflow-yは
	   自動的にautoへ変換される（html自身がスクロールの
	   起点になるので、これは想定通り・問題なし）。 */
}

body{
	font-family:var(--font-base);
	font-size:var(--font-base-size);
	font-weight:300;
	line-height:var(--line-height);
	color:var(--color-text);
	background:var(--color-white);
	/* 以前はここにもoverflow-x:hiddenを指定していたが、
	   html側と合わせて指定すると、上記と同じ仕様により
	   body側のoverflow-yも自動的にautoへ変換されてしまい、
	   html・bodyの両方が別々のスクロールコンテナに
	   分裂してしまっていた。
	   その結果、grm-cf-page（お問い合わせページ等の
	   左右2カラムレイアウト）で左カラムに使っている
	   position:stickyの基準がずれてしまい、スクロールしても
	   左カラムが追従せず、途中で見えなくなる不具合の原因に
	   なっていた。横スクロール防止はhtml側の指定だけで
	   十分効くため、body側のoverflow-x:hiddenは削除。 */
}

a{
	color:inherit;
	text-decoration:none;
	transition:.3s;
}

img{
	max-width:100%;
	height:auto;
	vertical-align:middle;
}

table{
	width:100%;
}

h1,
h2,
h3,
h4,
h5,
h6{
	line-height:1.4;
	font-weight:300;
	letter-spacing:.04em;
}

h1{
	font-size:var(--font-xl);
}

h2{
	font-size:24px;
}

h3{
	font-size:20px;
}


/* =========================================
   Fade In / スクロールで出現するフェードイン
   ・grm-core.js の IntersectionObserver が要素に
   　「.fade」クラスを見て監視し、画面内に入ったタイミングで
   　「.active」クラスを付与する（サイト全体で使える共通仕様）。
========================================= */
.fade{
	opacity:0;
	transform:translateY(24px);
	transition:opacity .8s ease, transform .8s ease;
}

.fade.active{
	opacity:1;
	transform:translateY(0);
}

/* =========================================
   Page Top / ページトップへ戻るボタン
   ・表示/非表示・クリック時のスムーズスクロールは
     assets/js/grm-core.js（#page_top制御）が担当。
     footer.php の #page_top と対で機能する。
========================================= */
#page_top{
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:900;
	display:flex;
	align-items:center;
	justify-content:center;
	width:48px;
	height:48px;
	border-radius:var(--radius-full);
	background:var(--color-main);
	color:#fff;
	font-size:18px;
	opacity:0;
	visibility:hidden;
	transform:translateY(10px);
	transition:opacity .3s, transform .3s, visibility .3s;
}

#page_top.show{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

#page_top:hover{
	opacity:.8;
}