@charset "utf-8";

/* -- 初期化 -- */
	img, table, tr, td{ margin:0; padding:0; border:0; }


/* -- 基本設定 -- */

/* -- 共通設定 -- */

html{
	font-size:62.5%;
	overflow-y:scroll;
	scroll-behavior:smooth;
}

body{
	width:100%;
	margin:0;
	padding:0;
	background:#ffffff;
	font-size:1.6rem;	/* -- Chromeバグ対応 -- */
	color:#333333;
	line-height:2.4rem;
	text-decoration:none;
	text-align:center;
	font-family:Meiryo, "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", sans-serif;
	animation: fadeIn 2s ease 0s 1 normal;         /* -- ふわっと表示設定 -- */
	-webkit-animation: fadeIn 2s ease 0s 1 normal; /* -- ふわっと表示設定（旧 safari 対策） -- */
}
@keyframes fadeIn { /* -- ふわっと表示設定 -- */
	100% {opacity: 1}
	0% {opacity: 0}
}
@-webkit-keyframes fadeIn { /* -- ふわっと表示設定（旧 safari 対策） -- */
	0% {opacity: 0}
	100% {opacity: 1}
}

/* -- テキスト -- */
h1{ font-size:2.1rem; }	/* -- rem はルート(html)に相対的にサイズ指定するため -- */
h2{ font-size:1.8rem; }
h3{ font-size:1.6rem; }
h1, h2, h3, strong{
	font-weight:bold;
	margin:0;
}

h1 {
	position:absolute;
	top:-100px;
	white-space:nowrap;
}

/* -- リンク -- */
a{ text-decoration:none; }
a:link{ color:#1156B0; }
a:visited{ color:#1156B0; }
a:hover{ color:orange; }
a:active{ color:red; }

/* -- 文字色指定 -- */
.gray{ color:lightgrey; }

/* -- 日/En 切り替えリンク -- */
#lang_switch{
	text-align: right;
	position:relative;
	right:2rem;
	top:-6rem;
	font-size:1.3rem;
}
	/* -- 今こっち -- */
	#this_lang{ border-bottom:solid 2px dodgerblue; }

/* -- ページトップへのリンク（▲） -- */
#to_top{
	position:fixed;
	right:2rem;
	bottom:3rem;
}

/* -- ヘッダーエリア -- */
header{
	top:0;
	line-height:0;
	width:100%;
	background-color:white;
	z-index:1;
}
	/* -- ロゴマーク -- */
	#yastudio{ margin:9px auto 0; }

	/* -- ナビゲーションリンクエリア -- */
	nav{
		width:100%;
		background-color:white;
		z-index:1;
	}

	/* -- ナビゲーションリンクブロック -- */
	#g_navi{
		margin:0 auto;
		text-align:center;
		line-height:3.6rem;
		z-index:2;
	}

	/* -- ナビゲーションリンク今ここ表示 -- */
	#here{ border-bottom:solid 3px gold; }
	.here{ border-bottom:solid 3px gold; }


/* -- 車アイコンの位置調整 -- */
	#icons{ margin:5px 0; }
	.t_icon{
		vertical-align:-0.7rem;
		margin:1rem 1rem 0.5rem;
	}


/* -- コンテンツエリア -- */
article{
	width:100%
	z-index:0;
}

/* -- サブタイトルの左右に伸びるフェードライン -- */
.sub_c_title {
	position:relative;
	display:inline-block;
	padding:0 30%;
	text-align:center;
	color:#393939;
	font-weight:bold;
	font-size:1.8rem;
	margin:1rem 0 0;
	z-index:1;
}
.sub_c_title:before, .sub_c_title:after {
	content:'';
	position:absolute;
	top:48%;
	display:inline-block;
	width:32%;
	height:2px;
	background-color:#696969;
	z-index:2;
}
.sub_c_title:before {
	left:0;
	background:linear-gradient(-45deg, transparent, #969696 10%, #969696 30%, transparent);
	z-index:2;
}
.sub_c_title:after {
	right:0;
	background:linear-gradient(-45deg, transparent, #969696 70%, #969696 90%, transparent);
	z-index:2;
}

/* -- 区切り線（テキスト有り/無し）左右に伸びるフェードライン -- */
.hr-title{
	clear:both;
	line-height:1em;
	position:relative;
	outline:0;
	border:0;
	color:black;
	text-align:center;
	height:2rem;
	opacity:.8;
	font-size:110%;
	font-weight:bold;
	margin:1rem;
}
.hr-title:before{
	content:'';
	background:-webkit-linear-gradient(left, transparent, #818078, transparent);
	background:linear-gradient(to right, transparent, #818078, transparent);
	position:absolute;
	left:0;
	top:50%;
	width:80%;
	height:2px;
	margin-left:10%;
}
.hr-title:after{
	content:attr(data-content);
	position:relative;
	display:inline-block;
	color:black;
	padding:0 1rem;
	line-height:2rem;
	color:#000000;
	background-color:#ffffff;
}


/* -- 説明エリア -- */
.explanation{
	display:block; /* -- 改行させるため -- */
	margin:1.5rem auto 0;
	text-align:center;
	line-height:1.8em;
}

/* -- 短文用 -- */
.text{
	display:inline-block;
	font-size:1.5rem;
	line-height:2.5rem;
	color:#333333;
	text-align:left;
	margin:0 1rem 1rem;
	max-width:620px;
}
.c_text{
	text-align:center;
	font-size:1.5rem;
	color:#333333;
}


/* -- サンプル画像の縁取り -- */
.sample_img{ border:solid 1px gainsboro; }


/* -- コンテンツ終了（- END -）表示 -- */
#end{
	font-size:1.3rem;
	color:#666666;
	margin:2rem auto;
	max-width:620px;
}

/* -- フッターエリア -- */
footer{
	width:100%;
	font-size:1.2rem;
	text-align:center;
	background-color:gainsboro;
	z-index:1;
}