@charset "utf-8";

/*===============================================
 基本レイアウト css/base.css
===============================================*/
/*=======================================================
 - ～559.9px	：スマートフォン画面(ヘッダーメニューはハンバーガーのみ)
 - 560px ～		：タブレット(小)環境に切り替え(ヘッダーメニューはハンバーガーのみ)
 - ～767.9px	：スマートフォン画面(ヘッダーメニューはハンバーガーのみ)
 - 768px ～		：タブレット・PC環境に切り替え(ヘッダーメニューはハンバーガーのみ)
 - 960px ～		：ヘッダーメニューが2種類に(ハンバーガー + オープン状態)
 - ～1099.9px	：コンテンツ幅最大値(ニュース記事など)
 - ～1399.9px	：サイトデザイン最大幅
●基本割合
・2等分：width:48%
・3等分：width:30.6%;
・4等分：width:22%;
・2分割：width:30%＆66% or 38%＆58%
=======================================================*/
@media screen and (max-width: 559.9px) {
}
@media print, screen and (min-width: 560px) {
}
@media screen and (max-width: 767.9px) {
}
@media print, screen and (min-width: 768px) {
}
@media print, screen and (min-width: 960px) {
}
@media print, screen and (min-width: 1100px) {
}
@media print, screen and (min-width: 1400px) {
}



/*===============================================
 CSS変数
===============================================*/
:root,div,span,p,li,button {
	/* アニメーション効果 */
	--ani_transition: all .25s ease-in-out;

	/* table設定 */
	--table_border_color	: #d9d9d9;
	--table_thead_color		: #ededed;
	--table_th_color		: #f7f7f7;

	/* 色設定 */
	--c-main	: #0160b9;

	/* フォント設定 */
	--english	: 'Josefin Sans', sans-serif;
}



/* ヘッダー高さ */
:root,div,span,p,li,button {
	--header	: 50px;
}
@media (min-width: 960px) {
	:root,div,span,p,li,button {
		--header: 70px;
	}
}


/* コンテンツ最下部マージン */
:root,div,span,p,li,button {
	--ctm		: 50px;
}
@media (min-width: 960px) {
	:root,div,span,p,li,button {
		--ctm	: 130px;
	}
}

/* コンテンツ最上部パディング */
:root,div,span,p,li,button {
	--cwp		: 50px;
}
@media (min-width: 560px) {
	:root,div,span,p,li,button {
		--cwp	: 70px;
	}
}
@media (min-width: 960px) {
	:root,div,span,p,li,button {
		--cwp	: 80px;
	}
}

/*===============================================
 基本要素
===============================================*/
/* Safari clamp関数対策 */
* {
	min-height: 0vw;
}

/* 基本フォントサイズ10px */
html {
	font-size: 62.5%;
}

/* BODY */
body {
	background: #fff;
	color: #000;
	counter-reset: counter;
	font-family:
		'Noto Sans JP',
		'Helvetica Neue',
		Arial,
		'Hiragino Kaku Gothic ProN',
		'Hiragino Sans',
		Meiryo,
		sans-serif;
	font-size: max(1.4rem, min(2vw, 1.6rem));	/* 古いSafari用 */
	font-size: clamp(1.4rem, 2vw, 1.6rem);
	font-weight: 400;
	min-height: 100vh;
	letter-spacing: .06em;
	line-height: 1.6;
	overflow-x: hidden;
	max-width: 100%;
	-webkit-text-size-adjust: 100%;
}

a {
	color: #000;
}

a,
.animation > *,
.puton,
.opacity {
	cursor: pointer;
	transition: var(--ani_transition);
}

a:hover {
	color: #000;
	text-decoration: none;
}

.opacity:hover {
	opacity: .7;
}

/* imgタグ基本設定 */
img {
	display: block;
}

p.center {
	text-align: center;
}

p.right {
	text-align: right;
}



/*===============================================
 全体枠
===============================================*/
.container {
	display: flex;
	flex-direction : column;
	min-height: 100vh;
	overflow-x: hidden;
	/*opacity: 0;*/
	transition: var(--ani_transition);
	padding: var(--header) 0 0;
	position: relative;
	width: 100%;
	max-width: 100%;
}

/* 読み込み完了 */
.container.inview {
	opacity: 1;
}



/*===============================================
 ヘッダー
===============================================*/
.header {
	background: #fff;
	border-bottom: 1px solid #e1e1e1;
	height: var(--header);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

.header_inner {
	align-items: center;
	height: 100%;
	margin: 0 auto;
	width: 95%;
	max-width: 1100px;
}

.header h1 {
	height: 45px;
	width: 50%;
	max-width: 145px;
}

@media screen and (max-width: 959.9px) {
	.header h1 {
		max-height: 35px;
		max-width: 112px;
	}
}

@media screen and (max-width: 559.9px) {
	.header h1 {
		margin: 0 auto;
	}
}

.header h1 a {
	display: block;
	height: 100%;
}

.header h1 a:hover {
	opacity: .7;
}

.header .sub {
	color: #a6a6a6;
	font-size: max(1rem, min(1.1vw, 1.1rem));	/* 古いSafari用 */
	font-size: clamp(1rem, 1.1vw, 1.1rem);
	margin: 0 0 0 1.5em;
	width: 26em;
}

@media screen and (max-width: 559.9px) {
	.header .sub {
		display: none;
	}
}

.header_navi ul li a p {
	font-family: var(--english);
}

.header_navi ul li a span {
	color: #a6a6a6;
}

@media screen and (max-width: 959.9px) {
	.header_navi {
		background: var(--c-main);
		display: none;
		left: 0;
		position: fixed;
		top: 50px;
		width: 100%;
	}

	.header_navi ul {
		width: 100%;
	}

	.header_navi ul li {
		height: 45px;
		padding: 0 20px;
		line-height: 45px;
		border-bottom: 1px solid #fff;
		width: 100%;
	}

	.header_navi ul li a {
		color: #fff;
		display: block;
		text-decoration: none;
	}

	.header_navi ul li a p {
		display: inline-block;
		font-weight: bold;
		margin: 0 1.5em 0 0;
	}

	.header_navi ul li a span {
		display: inline-block;
		font-size: .8em;
	}
}

@media print, screen and (min-width: 560px) and (max-width: 959.9px) {
	.header_navi ul li {
		border-right: 1px dotted #fff;
		width: 50%;
	}

	.header_navi ul li:nth-of-type(2n) {
		border-right: none;
	}

	.header_navi ul li:nth-of-type(5) {
		border-bottom: none;
		margin: 0 auto 0 0;
	}
}

@media print, screen and (min-width: 960px) {
	.header_navi {
		height: 2.5em;
		overflow: hidden;
		width: calc(100% - 145px - 28em * .8);
		max-width: 560px;
	}

	.header_navi ul {
		height: 100%;
		width: 100%;
	}

	.header_navi ul li {
		height: 100%;
		text-align: center;
	}

	.header_navi ul li:not(:last-child) {
		margin: 0 1em 0 0;
	}

	.header_navi ul li a {
		color: #000;
		display: block;
		font-size: max(1.1rem, min(1.3vw, 1.6rem));	/* 古いSafari用 */
		font-size: clamp(1.1rem, 1.3vw, 1.6rem);
		text-decoration: none;
	}

	.header_navi ul li a:hover {
		color: var(--c-main);
	}

	.header_navi ul li a p {
		font-weight: bold;
		letter-spacing: .03em;
	}

	.header_navi ul li a span {
		display: block;
		font-size: .65em;
	}
}

@media print, screen and (min-width: 1100px) {
	.header_navi ul {
		margin: 0 0 0 auto;
	}

	.header_navi ul li:not(:last-child) {
		margin: 0 2em 0 0;
	}
}


/*
 開閉ボタン
===============================================*/
.spopen {
	cursor: pointer;
	display: block;
	height: 24px;
	position: absolute;
	right: 15px;
	top: 13px;
	width: 24px;
}

@media print, screen and (min-width: 960px) {
	.spopen {
		display: none;
	}
}

.spopen span {
	background: #000;
	display: block;
	height: 2px;
	margin: 11px 0 0;
	position: relative;
	text-indent: -9999px;
	width: 24px;
}

.spopen span:before,
.spopen span:after{
	background: #000;
	display: block;
	content: '';
	height: 2px;
	position: absolute;
	top: 50%;
	width: 24px;
}

.spopen span:before{
	margin-top: -10px;
}

.spopen span:after{
	margin-top: 8px;
}

.spopen.close span {
	background: transparent;
	margin: -11px 0 0;
}

.spopen.close span:before,
.spopen.close span:after{
	margin-top: 20px;
}

.spopen.close span:before{
	transform: rotate(-45deg);
}

.spopen.close span:after{
	transform: rotate(-135deg);
}



/*===============================================
 フッター
===============================================*/
.footer {
	background: #323232;
	color: #fff;
	padding: 2em 0 1em;
	width: 100%;
}

.footer_copyright {
	margin: 0 auto .5em;
	width: 90%;
	max-width: 950px;
}

.footer_copyright_img {
	width: 30%;
	max-width: 131px;
}

.footer_copyright_info {
	align-items: flex-start;
	width: 67%;
	min-width: calc(100% - 131px - 2em);
}

.footer_copyright_info address {
	font-size: .8em;
	width: 100%;
}

@media print, screen and (min-width: 768px) {
	.footer_copyright_info address {
		width: calc(100% - 15em);
	}
}
.footer_copyright_info address div {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 .3em;
}

.footer_copyright_info address .address_dealer span:not(:last-child) {
	margin: 0 1em 0 0;
}

.footer .privacy {
	background: url(../images/common/footer_privacy_off.png) .9em center no-repeat #fff;
	border-radius: 5px;
	display: block;
	font-size: .8em;
	font-weight: bold;
	padding: .5em .5em .5em 2.2em;
	text-align: center;
	text-decoration: none;
	width: 14em;
}

.footer .privacy:hover {
	background: url(../images/common/footer_privacy_on.png) .9em center no-repeat #000;
	color: #fff;
}

@media screen and (max-width: 767.9px) {
	.footer .privacy.sp {
		margin: 1em auto 0;
	}

	.footer .privacy.pc {
		display: none;
	}
}

@media print, screen and (min-width: 768px) {
	.footer .privacy.sp {
		display: none;
	}

	.footer .privacy.pc {
		display: block;
	}
}

.footer .copy {
	color: #999;
	font-size: .8em;
	margin: 2em 0 0;
	text-align: center;
	width: 100%;
}



/*===============================================
 コンテンツ大枠
===============================================*/
.wrap {
	align-items: center;
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	height: auto;
	position: relative;
	width: 100%;
}



/*===============================================
 コンテンツ
===============================================*/
.contents {
	flex: 1 0 auto;
	margin: 0 0 5em;
	width: 100%;
}



/*===============================================
 汎用 コンテンツブロック
===============================================*/
.content_wrap {
	/*opacity: 0;*/
	position: relative;
	transition: all .25s ease-in-out;
	width: 100%;
}

.content_wrap.inview {
	opacity: 1;
}


/*
.block→h3 .sblock→h4
●マークアップ
見出しがある：section
ブログ・ニュース等：article
それ以外：div
でタグを使い分ける
*/

.block {
	position: relative;
	width: 100%;
}

.block:not(:last-child) {
	margin: 0 0 4em;
}

@media print, screen and (min-width: 768px) {
	.block:not(:last-child) {
		margin-bottom: 6em;
	}
}

@media print, screen and (min-width: 960px) {
	.block:not(:last-child) {
		margin-bottom: 8em;
	}
}

/* コンテンツ途中 背景あり */
.block.bg {
	background: var(--ba-gray1);
	padding: 4em 0;
}

/* コンテンツ最後の要素 背景あり */
.block:last-child.bg {
	margin: 0 0 calc(-1 *  var(--ctm));
}

/* ブロック内ブロック */
.sblock {
	margin: 0 auto;
	position: relative;
	width: 90%;
	max-width: 1100px;
}

.sblock:not(:last-child) {
	margin: 0 auto 4em;
}

@media print, screen and (min-width: 960px) {
	.sblock {
		width: calc(100% - 140px);
	}
}


/*
 汎用 要素均等整列用
===============================================*/
.box_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.box_wrap.start {
	justify-content: flex-start;
}

.box_wrap.center {
	justify-content: center;
}

.box_wrap.end {
	justify-content: flex-end;
}


/*
 可視要素表示用
===============================================*/
.appear {
	opacity: 0;
	transform: translate(0, 1em);
	transition: all .25s ease-in-out;
}

.appear.inview {
	opacity: 1;
	transform: translate(0, 0);
}



/*===============================================
 パンくず
===============================================*/
.breadcrumb {
	background: #eee;
	height: 40px;
	line-height: 40px;
	margin: 0 0 5em;
	width: 100%;
}

.breadcrumb_inner {
	margin: 0 auto;
	width: 90%;
	max-width: 1100px;
}

.breadcrumb ul {
	font-size: .8em;
	overflow: hidden;
	width: 100%;
}

.breadcrumb li:not(:last-child):after {
	content: '\FF1E';
	display: block;
	margin: 0 .5em;
}

.breadcrumb li a {
	display: block;
	text-decoration: underline;
}

.breadcrumb li:first-child a {
	background: url(../images/common/breadcrumb.png) no-repeat 0 13px;
	padding: 0 0 0 1.5em;
}

.breadcrumb li a:hover {
	text-decoration: none;
}



/*===============================================
 各種タイトル
===============================================*/
h2 {
	color: var(--c-main);
	font-family: var(--english);
	font-size: max(2.6rem, min(5vw, 4rem));	/* 古いSafari用 */
	font-size: clamp(2.6rem, 5vw, 4rem);
	font-weight: bold;
	letter-spacing: 0.09em;
	margin: 0 0 1em;
	position: relative;
	text-align: center;
}

@media print, screen and (min-width: 560px) {
	h2 {
		margin: 0 0 1.2em;
	}
}

h2:first-letter {
	color: #f8e600;
}

h3 {
	color: var(--c-main);
	font-size: max(2.1rem, min(3vw, 2.6rem));	/* 古いSafari用 */
	font-size: clamp(2.1rem, 3vw, 2.6rem);
	font-weight: bold;
	letter-spacing: .09em;
	margin: 0 0 1em;
	text-align: center;
}

p.read {
	font-size: 1.1em;
	letter-spacing: 0.13em;
	line-height: 1.8;
	margin: 0 0 3em;
	text-align: center;
}



/*===============================================
 ページ共通部品
===============================================*/
/*
 ページリンク
===============================================*/
a#pageTop {
	background: url(../images/common/pagetop.png) no-repeat 0 0;
	bottom: 20px;
	height: 75px;
	display: block;
	right: 1em;
	position: fixed;
	text-indent: -9999px;
	transition: opacity .25s ease-in-out;
	width: 75px;
	z-index: 10000;
}

a#pageTop:hover {
	background-position: -75px 0;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* iPad以下 */
	a#pageTop,a#blog {
		margin: 0 0 0 405px;
	}
}



/*
 リンク先用
===============================================*/
span.link {
	width: 1px;
	height: 1px;
	display: block;
	position: absolute;
	top: calc(var(--header) * -1);
}


/*
 アンダーバー
===============================================*/
a.textlink,
a .textlink {
	border-bottom: 1px solid;
	color: var(--c-main1);
}

a.textlink.hover,
a.hover .textlink {
	border-bottom: 1px solid transparent;
}


/*
 小さいボタン
===============================================*/
.small_btn {
	margin: 0 auto;
	position: relative;
	width: fit-content;
	z-index: 2;
}

.small_btn:before {
	background: #000;
	border-radius: 50px;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	top: 5px;
	width: 100%;
}

.small_btn a,
.small_btn > span {
	align-items: center;
	background: #ffe236;
	border: 2px solid #000;
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	font-size: 1.2em;
	font-weight: bold;
	height: 3em;
	justify-content: center;
	margin: 0 auto;
	position: relative;
	text-align: center;
	transition: all var(--cubic) .2s;
	width: 18em;
}

.small_btn a.hover,
.small_btn > span:hover {
	translate: 0 5px;
}

.small_btn a:after,
.small_btn > span:after {
	background: #000;
	content: '';
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	height: .8em;
	margin: 0 0 0 .5em;
	position: absolute;
	right: 1em;
	translate: 0 -50%;
	top: 50%;
	width: .6em;
}


/*
 大きいボタン
===============================================*/
.big_btn {
	aspect-ratio: 1000 / 150;
	margin: 2% auto 0;
	position: relative;
	max-width: 90%;
}

@media print, screen and (min-width: 560px) {
	.big_btn {
		margin: 3% auto 0;
		height: 8%;
	}
}

.big_btn:before {
	background: #000;
	border-radius: 50px;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	top: 5px;
	width: 100%;
	z-index: 1;
}

.big_btn a,
.big_btn > span {
	aspect-ratio: 1000 / 150;
	align-items: center;
	background: #ffe236;
	border: 2px solid #000;
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	font-size: 1.5em;
	font-weight: bold;
	justify-content: center;
	margin: 0 auto;
	position: relative;
	text-align: center;
	transition: all var(--cubic) .2s;
	width: 100%;
	z-index: 2;
}

.big_btn a.hover,
.big_btn > span:hover {
	translate: 0 5px;
}

.big_btn a:after,
.big_btn > span:after {
	background: #000;
	content: '';
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	height: .8em;
	margin: 0 0 0 .5em;
	position: absolute;
	right: 1em;
	translate: 0 -50%;
	top: 50%;
	width: .6em;
}


/*
 ポチありリスト(タイトル有りはdl)
===============================================*/
.list_dl dt {
	font-weight: bold;
	letter-spacing: .06em;
	margin: 0 0 .5em;
}

.list_dl dd,
.list_ul li {
	letter-spacing: .06em;
	line-height: 1.6;
	padding: 0 0 0 1em;
	position: relative;
}

.list_dl dd:not(:last-child),
.list_ul li:not(:last-child) {
	margin: 0 0 .3em;
}

.list_dl dd:before,
.list_ul li:before {
	background: var(--c-main);
	border-radius: 50%;
	content: '';
	display: block;
	height: .5em;
	left: 0;
	position: absolute;
	top: .575em;
	width: .5em;
}

.list_dl dd + dt {
	margin: 1em 0 0;
}

.list_dl + *,
.list_ul + * {
	margin-top: 1em;
}