@charset "UTF-8";
/********************************************************************************

common-sp.css

********************************************************************************/
/*============================================================
 css変数
*============================================================*/
:root {
	--common-inner-max-width: 100%;           /* 通常サイト幅 */
	--common-inner-max-width-wide: 100%;      /* ワイドサイト幅 */
	--common-inner-padding: 16px;               /* 通常サイト幅内余白 */
	--common-inner-padding-wide: 16px;          /* ワイドサイト幅内余白 */
}

/*============================================================
 system
*============================================================*/
/* pc-sp display switch
---------------------------------------- */
.forPC {
    display: none;
}
.forSP {
    display: inherit;
}

/*============================================================
 format
*============================================================*/
/* コンテンツ内
---------------------------------------- */
h1 {
	font-size: 32px;
}
h2 {
	font-size: 24px;
}
h3 {
	font-size: 18px;
}

main .block .parts-boxes .contents {
	width: 100%;
}
main .block .parts-boxes .img {
	width: 100%;
}
main .block .block-title {
	font-size: 24px;
}
main .block .block-title-low {
	font-size: 18px;
}

/*============================================================
 ページヘッダー(下層)
*============================================================*/
#page-header {
	margin-top: 32px;
	margin-bottom: 48px;
}
#page-header h1 {
	font-size: 32px;
}
#page-header .img {
	right: 24px;
	top: 92px;
	max-width: 180px;
}
#page-header .img:before {
	width: 85px;
	height: 111px;
	right: auto;
	left: -115px;
	top: auto;
	bottom: 0;
	z-index: -1;
}
#page-header.unique .page-title {
	min-height: 128px;
}
.single #page-header .page-title {
	margin-bottom: 8px;
}

/*============================================================
 パンくずリスト
*============================================================*/
#breadcrumb {
	display: none;
}


/*============================================================
 共通ブロック
*============================================================*/
/* 共通設定
---------------------------------------- */
.block-common .inner dl dt {
	float: none;
	margin-bottom: 8px;
}
.block-common .inner dl dd {
	margin-left: 0;
}

/* コラム
---------------------------------------- */
.block-column {
	--gap: 24px;
}

/* リンク
---------------------------------------- */
.block-link {
	gap: 24px;
}
.block-link .item {
	gap: 24px;
}
.block-link .item-contents h3 {
	font-size: 20px;
}

/*============================================================
 下層ページ下部リンクエリア
*============================================================*/
#other-link {
	padding: 64px 0 40px;
}
/*#other-link .block .feature-list {
	justify-content: center;
}
#other-link .block .feature-list .item {
	width: 100%;
	max-width: 480px;
}*/
#other-link .block .link .img {
	width: 200px;
}
#other-link .block .link .info {
	width: calc(100% - 224px);
	padding-right: 16px;
}

/*============================================================
 価格・プラン
*============================================================*/
#price-list .leading {
	text-align: center;
	padding: 20px 16px 16px;
}
#price-list .leading:before {
	right: calc(50% - 200px);
}
#price-list .leading p {
	20px;
}
#price-list .leading p > span {
	font-size: 48px;
}
#price-list .list {
	gap: 24px;
}
#price-list .item {
	min-width: 240px;
}
#price-list .item .title span {
	right: -4px;
}
#price-list .item .contents {
	min-height: 334px;
}
#price-list .item .contents .row .value .small {
	font-size: 16px;
}
#price-list .item .contents > p {
	font-size: 14px;
}
#price-list .item .contents .add {
	font-size: 14px;
}

/*============================================================
 シュミレーション
*============================================================*/
#simulation {
	padding: 40px 16px;
}
#simulation .radio {
	justify-content: center;
}
#simulation .select {
	justify-content: center;
}
#simulation .select select {
	color: var(--common-color-text);
}

/*============================================================
 アーカイブページのカテゴリー
*============================================================*/
#category {
	margin-bottom: 40px;
}
#category .list {
	padding: 12px 40px;
}
#category .item {
}
#category .item.all:before {
	top: 7px;
}
#category .item h2 {
	font-size: 14px;
}
#category .item a {
	font-size: 14px;
}

/*============================================================
 CTA
*============================================================*/
#cta .inner {
	padding: 40px 16px 48px;
}
#cta .lead {
	font-size: 20px;
}
#cta .accent {
	font-size: 24px;
}

/*============================================================
 目次
*============================================================*/
#toc_container ul li a {
	font-size: 14px;
}

/*============================================================
 footer
*============================================================*/
#site-footer {
	padding-top: 48px;
}
#site-footer .main {
	justify-content: center;
}
#site-footer #fnav {
	width: 100%;
}
#site-footer #fnav .menu-list {
	justify-content: center;
}
#site-footer #fnav .btn-list {
	justify-content: center;
}

/* メニューリスト
---------------------------------------- */
#site-footer #fnav .menu-list {
    text-align: center;
}

@media screen and (max-width: 480px) {
	/*============================================================
	 format
	*============================================================*/
	#main-contents {
		padding-top: 48px;
	}
	
	/*============================================================
	 ページヘッダー(下層)
	*============================================================*/
	#page-header.unique {
		padding-bottom: 180px;
	}
	#page-header h1 {
		font-size: 24px;
	}
	#page-header .img {
		right: 6px;
	}
	
	/*============================================================
	 共通ブロック
	*============================================================*/
	/* リンク
	---------------------------------------- */
	.block-link .item {
		padding: 16px;
		gap: 16px;
	}
	.block-link .item-img {
		width: 120px;
		height: 120px;
	}
	.block-link .item-contents {
		width: calc(100% - 144px);
	}
	.block-link .item-contents p {
		display: none;
	}
		
	/* 共通フレーム
	---------------------------------------- */
	.block-frame {
		padding: 0 16px 24px;
	}
	.block-frame h3 {
		margin-bottom: 24px;
	}
	
	/*============================================================
	 下層ページ下部リンクエリア
	*============================================================*/
	#other-link {
		background: none;
		background-color: var(--common-color-background1);
		position: relative;
	}
	#other-link:before {
		content: "";
		position: absolute;
		background: url(../images/common/other-link-nami-sp.webp) no-repeat center top / cover;
		top: 0;
		left: 0;
		width: 100%;
		height: 8vw;
	}
	#other-link .block .link .img {
		width: 100%;
	}
	#other-link .block .link .info {
		width: 100%;
	}
	
	/*============================================================
	 価格・プラン
	*============================================================*/
	#price-list .leading:before {
		right: -20px;
	}
	#price-list .leading p {
		font-size: 18px;
	}
	#price-list .leading p > span {
		line-height: 1.2;
	}
	
	/*============================================================
	 シュミレーション
	*============================================================*/
	#simulation .radio {
		flex-direction: column;
		align-items: center;
	}
	
	#category .item h2 {
		text-align: center;
	}


	/*============================================================
	 footer
	*============================================================*/
	#site-footer #fnav .outer-link-list {
		max-width: 330px;
		margin: 0 auto;
		justify-content: flex-start;
	}

}