@charset "utf-8";

/* ============================
pp_contents.css　もくじ
-------------------------------
1.ブレイクポイント
2.メインビジュアル＋タイトル
3.ページコピー　#contents-copy
4.ページ内上部リンク
5.コンテンツ下部パディング
6.小部品
============================== */

/* ===========================
1.ブレイクポイント
============================== */
@media screen and (min-width: 30em) { /* 480px */
}
@media screen and (min-width: 40em) { /* 640px */
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
}
@media screen and (min-width: 64em) {/* 1024px */
}
@media screen and (min-width: 80em) {/* 1280px */
}

/* ===========================
2.メインビジュアル＋タイトル
============================== */
#main_visual {
	position: relative;
	background-size: cover;
	background-position: center center;
	background-color: var(--color-light-gray);
}
#main_visual .main_visual_inner {
	display: flex;
	flex-direction: column;
	padding: 8px 0 2px;
}
#main_visual #contents-header {
	margin: 10px 0;
	text-align: center;
}
#main_visual #contents-header .cont-header-band {
	display: flex;
	flex-direction: column;
	min-height: 92px;
	justify-content: center;
	padding: 10px 0;
	background-color: #f5f5f544;
}
#main_visual #contents-header .cont-header-band > *:first-child {
	margin-top: 0;
}
#main_visual #contents-header .cont-header-band > *:last-child {
	margin-bottom: 0;
}
#main_visual #contents-header .ttl {
	text-align: center;
	color: var(--color-black);
	text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff;
}
#main_visual #contents-header .subcopy {
	font-size: 18px;
	color: var(--color-black);
	text-align: center;
	font-weight: 600;
	text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff;
}
#main_visual #contents-header .subcopy em {
	font-style: normal;
}
@media screen and (min-width: 30em) { /* 480px */
	#main_visual .main_visual_inner {
		padding: 13px 0 2px;
	}
	#main_visual #contents-header {
		margin: 16px 0;
	}
	#main_visual #contents-header .cont-header-band {
		padding: 16px 0;
		min-height: 107px;
	}
	#main_visual #contents-header .ttl {
		font-size: 32px;
	}
	#main_visual #contents-header .subcopy {
		font-size: 20px;
	}
}
@media screen and (min-width: 40em) { /* 640px */
	#main_visual .main_visual_inner {
		padding: 13px 0 2px;
	}
	#main_visual #contents-header {
		margin: 20px 0;
	}
	#main_visual #contents-header .cont-header-band {
		padding: 20px 0;
		min-height: 121px;
	}
	#main_visual #contents-header .ttl {
		font-size: 34px;
	}
	#main_visual #contents-header .subcopy {
		font-size: 22px;
	}
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
	#main_visual #contents-header .cont-header-band {
		min-height: 127px;
	}
	#main_visual #contents-header .ttl {
		font-size: 36px;
	}
	#main_visual #contents-header .subcopy {
		font-size: 24px;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#main_visual #contents-header .cont-header-band {
		min-height: 135px;
	}
	#main_visual #contents-header .ttl {
		font-size: 40px;
	}
	#main_visual #contents-header .subcopy {
		font-size: 26px;
	}
}

/* ===========================
3.ページコピー　#contents-copy
============================== */
#contents-copy {
	margin: 20px auto;
}
#contents-copy .copy {
	text-align: center;
	line-height: 1.7;
}
@media screen and (min-width: 30em) { /* 480px */
	#contents-copy {
		margin: 20px auto 30px;
	}
	#contents-copy .copy {
		font-size: 15px;
	}
}
@media screen and (min-width: 40em) { /* 640px */
	#contents-copy {
		margin: 40px auto 40px;
	}
	#contents-copy .copy {
		font-size: 16px;
	}
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
	#contents-copy {
		margin: 60px auto 50px;
	}
	#contents-copy .copy {
		font-size: 18px;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#contents-copy {
		margin: 70px auto 60px;
	}
	#contents-copy .copy {
		font-size: 20px;
	}
}

/* ===========================
4.ページ内上部リンク
============================== */
#innerNav {
	margin: 30px auto;
}
#innerNav .nav_wrapper {
	border: #222 solid 1px;
	border-radius: 12px;
	padding: 5px 11px;
}
#innerNav .nav_wrapper .nav_list .list_item {
	border-bottom: #222 solid 1px;
}
#innerNav .nav_wrapper .nav_list .list_item:last-child {
	border-bottom: none;
}
#innerNav .nav_wrapper .nav_list .list_item a {
	display: flex;
	justify-content: space-between;
	padding: 0.75em 0;
	width: 100%;
	color: #000;
}
#innerNav .nav_wrapper .nav_list .list_item a::after {
	content: '＞';
	padding-left: 0.25em;
}
#innerNav .nav_wrapper .nav_list .list_item a:hover {
	color: var(--primary-color);
	text-decoration: none;
}
@media screen and (min-width: 30em) { /* 480px */
	#innerNav.first-child {
		margin: 40px auto;
	}
	#innerNav .nav_wrapper .nav_list .list_item a {
		padding: 0.75em 0.75em;
	}
}
@media screen and (min-width: 40em) { /* 640px */
	#innerNav.first-child {
		margin: 50px auto;
	}
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
	#innerNav {
		margin: 30px auto 60px;
	}
	#innerNav.first-child {
		margin: 60px auto 60px;
	}
	#innerNav .nav_wrapper {
		border: none;
		padding: 0 0;
	}
	#innerNav .nav_wrapper .nav_list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		column-gap: 2%;
		row-gap: 16px;
	}
	#innerNav .nav_wrapper .nav_list .list_item {
		border: #222 solid 1px;
		width: 49%;
		transition: all 0.3s;
	}
	#innerNav .nav_wrapper .nav_list .list_item:hover {
		border: var(--primary-color) solid 1px;
	}
	#innerNav .nav_wrapper .nav_list .list_item:last-child {
		border-bottom: #222 solid 1px;
	}
	#innerNav .nav_wrapper .nav_list .list_item:last-child:hover {
		border-bottom: var(--primary-color) solid 1px;
	}
	#innerNav .nav_wrapper .nav_list .list_item a {
		padding-right: 0.75em;
		padding-left: 0.75em;
		transition: all 0.3s;
	}
	#innerNav .nav_wrapper .nav_list .list_item a:hover {
		background-color: var(--primary-color);
		color: #fff;
		text-decoration: none;
	}
	#innerNav .nav_wrapper .nav_list.has_third .list_item {
		width: 32%;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#innerNav.first-child {
		margin: 70px auto 60px;
	}
	#innerNav .nav_wrapper .nav_list {
		column-gap: 3%;
		row-gap: 16px;
	}
	#innerNav .nav_wrapper .nav_list .list_item {
		width: 48.5%;
	}
	#innerNav .nav_wrapper .nav_list .list_item a {
		padding-right: 1.5em;
		padding-left: 1.5em;
	}
	#innerNav .nav_wrapper .nav_list.has_third .list_item {
		width: 31.33%;
	}
}
/* ===========================
5.コンテンツ下部パディング
============================== */
#page_contents .content_wrapper {
	padding-bottom: 10px;
}
@media screen and (min-width: 30em) { /* 480px */
	#page_contents .content_wrapper  {
		padding-bottom: 16px;
	}
}
@media screen and (min-width: 40em) { /* 640px */
	#page_contents .content_wrapper  {
		padding-bottom: 20px;
	}
}
@media screen and (min-width: 48em) { /* 768px：PC用 */
	#page_contents .content_wrapper  {
		padding-bottom: 30px;
	}
}
@media screen and (min-width: 64em) {/* 1024px */
	#page_contents .content_wrapper  {
		padding-bottom: 40px;
	}
}
@media screen and (min-width: 80em) {/* 1280px */
	#page_contents .content_wrapper  {
		padding-bottom: 60px;
	}
}
/* ===========================
6.小部品
============================== */
.section_copy a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
/* ===========================
その他臨時
============================== */