@charset'utf-8';

/*==============================
	Common
==============================*/
[id^='aromic-'] { margin:0 auto; padding:3em 0; }

/*Font*/
.font-m { font-family:'游明朝',YuMincho,'Hiragino Mincho ProN','Hiragino Mincho Pro','ＭＳ 明朝','Lucida Sans Unicode', 'Lucida Grande', Arial, Helvetica, 'ヒラノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', sans-serif; font-weight:400; }



/*==============================
	タイトル　h1~
==============================*/
/*h1*/
[id^='aromic-'] h1.title {
	font-family: 'Plus Jakarta Sans', 'Zen Kaku Gothic New', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	position:relative;
	bottom:-.5em;
	width:96%;
	max-width:1000px;
	margin:0 auto;
	text-align:center;
	font-size:1.3em;
}
[id^='aromic-'] h1.title span {
	position:relative;
	top:-.5em;
	padding:0 1em;
	letter-spacing:2px;
	background:#fff;
}
[id^='aromic-'] h1.title:before {
	content:'';
	display:block;
	width:60%;
	height:1px;
	margin:0 auto;
	background:#333;
}

[id^='aromic-'] h1 + .sub-title,
[id^='aromic-'] h1.sub-title {
	text-align:center;
	font-size:1.2em;
	font-weight:500;
	letter-spacing:2px;
}
[id^='aromic-'] h1 + .sub-title { margin:.5em auto 2em; }
[id^='aromic-'] h1.sub-title { margin-bottom:1em; }


@media screen and (max-width:767px) {
[id^='aromic-'] h1.title { font-size:1.2em; }
[id^='aromic-'] h1 + .sub-title { font-size:1em; }
[id^='aromic-'] h1.sub-title { font-size:1.1em; }
[id^='aromic-'] h1.title:before { width:calc(100% - 2em); max-width:460px; }
[id^='aromic-'] h1.title span { padding:0 .6em; }
}



/*==============================
	ボタン　button
==============================*/
/*common*/
[id^='aromic-'] .button {
	position:relative;
	margin-top:1em;
	padding-right:.8em;
	text-align:right;
	font-size:.9em;
	line-height:1.5em;
	transition:.3s;
}
[id^='aromic-'] .button:after {
	position:absolute;
	top:50%;
	right:0;
	content:'';
	display:block;
	width:.4em;
	height:.4em;
	border-top:1px solid;
	border-right:1px solid;
	transform:translate(-25%,-50%) rotate(45deg);
}
[id^='aromic-'] .button:hover { opacity:.7; }