@charset "utf-8";

/*===============================================
●共通
===============================================*/
#pageTitle {
	position: relative;
	z-index: 1;
	background-image: url(../../images/mainframe/pagetitle.png), url("../../images/index/mainBkg.jpg");
	background-repeat: no-repeat, repeat-x;
	background-position: center center, center center;
}
#pageTitle h1 {
	font-weight: bold;
	text-align: center;
}
#pageTitle div {
	font-weight: 700;
	text-align: center;
	line-height: 1.1em;
	font-family: 'Roboto Condensed', sans-serif;
}

.tit02 {text-align: center;}
.tit02 span {
	display: inline-block;
	font-weight: bold;
	line-height: 1.5em;
	border-bottom: #000 1px solid;
}
.tit03 {font-weight: bold;}
.tit03 span {
	display: inline-block;
	padding-bottom: 0.5em;
	border-bottom: #ccc 1px solid;
}

/* column3
---------------------------------------- */
.column3 #column3Box .flexBox section {border: #ccc 1px solid;}
.column3 #column3Box a {
	display: block;
	text-decoration: none;
}
.column3 #column3Box .image span {
	display: block;
	width: 100%;
	height: 80%;
}
.column3 #column3Box .image span:after {
	content: "";
	display: block;
	width: 100%;
	padding-top: 80%;
}
.column3 #column3Box .catBox {
	display: flex;
	align-items: center;
}
.column3 #column3Box .catBox p {
	width: 5em;
	margin-right: 0.8em;
	text-align: center;
	color: #fff;
	font-weight: bold;
	padding: 0.2em 0;
}
.column3 #column3Box .catBox p.cat1 {background-color: #e51844;}
.column3 #column3Box .catBox p.cat3 {background-color: #333e96;}
.column3 #column3Box .catBox p.cat4 {background-color: #20a23b;}
.column3 #column3Box .catBox time {
	color: #999;
	font-family: 'Roboto Condensed', sans-serif;
}

/* pdfList
---------------------------------------- */
.pdfList li {line-height: 2em;}
.pdfList li img {
	display: inline-block;
	width: 20px;
	margin-right: 0.5em;
}

/* catPhoto
---------------------------------------- */
.catPhoto {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	padding-bottom: 2em;
	margin-bottom: 2em;
	border-bottom: #ccc 1px solid;
}
.catPhoto li {
	width: 32%;
	margin-right: 2%;
}
.catPhoto li:last-child {margin-right: 0;}

/* question
---------------------------------------- */
.qaList dt .dtText {
	display: inline-block;
	font-weight: bold;
	padding-bottom: 0.3em;
	border-bottom: #ccc 1px solid;
}
.qaList dd {
	padding-left: 2em;
	border-bottom: #000 1px solid;
}
.qaList dd .icon {
	font-weight: bold;
	color: #da1c1c;
	margin-left: -1em;
}

/* photoBox
---------------------------------------- */
.photoBox a,
.photoBox span,
.catPhoto a {
	display: block;
	width: 100%;
	height: 80%;
}
.photoBox a:after,
.photoBox span:after,
.catPhoto a:after {
	content: "";
	display: block;
	width: 100%;
	padding-top: 80%;
}

/* pager
---------------------------------------- */
.pager .number {display: none;}
.pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.pager ul li {
	width: 2em;
	line-height: 2em;
	margin: 0 0.3em;
	text-align: center;
	border: #ccc 1px solid;
	background-color: #fff;
}
.pager ul li a {
	display: block;
	width: 100%;
	line-height: 2em;
	text-decoration: none;
	box-sizing: border-box;
}
.pager ul li.currentpage {
	color: #fff;
	background-color: #70941a;
}
.pager ul li.next,
.pager ul li.prev {
	display: block!important;
	width: 3em;
}
.pager ul li.disabled {
	color: #ccc;
	border-color: #eee;
}

/* 動画
---------------------------------------- */
.youtubeBox li {
	position: relative;
}
.youtubeBox li iframe {
	position: absolute;
	width: 100%!important;
	height: 100%!important;
	top: 0;
	left: 0;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* 全般
	---------------------------------------- */
	#container {padding-bottom: 3em;}
	#pageTitle {
		padding: 6.28em 0 2em;
		background-size: 75%, cover;
	}
	#pageTitle h1 {font-size: 1.15em;}
	#pageTitle div {font-size: 2.85em;}
	.catDesc {
		line-height: 1.5em;
		margin-bottom: 1.5em;
	}
	.tit02 {
		font-size: 1.25em;
		margin-bottom: 0.5em;
	}
	.tit03 {
		font-size: 1.1em;
		margin-bottom: 0.5em;
	}
	.articleDesc {
		line-height: 1.5em;
		margin-bottom: 1.5em;
	}
	.linkText {margin-bottom: 0.7em;}
	
	#formArea {margin-bottom: 2em;}
	
	/* default
	---------------------------------------- */
	.default #contents section {margin-bottom: 2.5em;}
	
	/* column3
	---------------------------------------- */
	.column3 #column3Box .flexBox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.column3 #column3Box section {
		width: 49%;
		position: relative;
		padding: 0.7em;
		margin: 0 2% 2% 0;
	}
	.column3 #column3Box section:nth-child(even) {margin-right: 0;}
	.column3 #column3Box section .image {margin-bottom: 0.7em;}
	.column3 #column3Box section .catBox p {font-size: 0.8em;}
	.column3 #column3Box section h3 {
		font-weight: bold;
		font-size: 1.1em;
		margin: 0.7em 0 2.8em;
	}
	.column3 #column3Box .catBox p.cat1 {padding: 0 2px;}
		.column3 #column3Box .catBox time {font-size: 0.9em;}

	/* sideways
	---------------------------------------- */
	.sideways1 #container .flexWrapper {margin-bottom: 2em;}
	.sideways1 .photoBox {margin-bottom: 0.7em;}
	.sideways1 .textBox {margin-bottom: 0.7em;}
	.flexWrapper .articleDesc {margin-bottom: 0;}
	.flexWrapper .pdfList {padding-top: 0.7em;}
	
	/* question
	---------------------------------------- */
	.qaList dt,
	.qaList dd {line-height: 1.5em;}
	.qaList dt {
		padding-bottom: 0.5em;
		margin-bottom: 0.5em;
	}
	.qaList dd {
		padding-left: 1em;
		padding-bottom: 1em;
		margin-bottom: 1em;
	}
	
	/* table
	---------------------------------------- */
	.tableStyle {border-top: #000 1px solid;}
	.tableStyle tr {
		width: 100%;
		display: block;
		padding-bottom: 0.7em;
		border-bottom: #000 1px solid;
	}
	.tableStyle th,
	.tableStyle td {
		display: block;
		width: 100%;
		padding: 0.5em;
		line-height: 1.5em;
		vertical-align: top;
	}
	.tableStyle th {
		padding: 0.3em 0.5em;
		font-weight: bold;
		border-bottom: #ddd 1px solid;
	}
	
	/* photoBox
	---------------------------------------- */
	ul.photoBox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0.75em 0 1.5em;
	}
	ul.photoBox li {
		width: 32%;
		margin: 0 2% 2% 0;
	}
	.photoBox li:last-child,
	.photoBox li:nth-child(3n) {margin-right: 0;}

	/* 動画
	---------------------------------------- */
	.youtubeBox li {
		padding-top: 56.25%;
	}
	.youtubeBox li:not(:last-child) {
		margin-bottom: 1em;
	}
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){
	
	#pageTitle {
		background-size: 75%, 90%;
		padding: 10em 0 3.5em;
	}
	#pageTitle h1 {font-size: 1.25em;}
	#pageTitle div {font-size: 5em;}
	.catDesc {
		font-size: 1.15em;
		line-height: 1.7em;
		margin-bottom: 2.5em;
	}
	.tit02 {
		font-size: 1.5em;
		margin-bottom: 1.5em;
	}
	.tit03 {
		font-size: 1.25em;
		margin-bottom: 0.7em;
	}
	.articleDesc {
		font-size: 1.15em;
		line-height: 1.7em;
		margin-bottom: 3em;
	}
	.linkText {margin-bottom: 1em;}
	
	#formArea {margin-bottom: 4em;}
	
	/* default
	---------------------------------------- */
	.default #contents section {margin-bottom: 4em;}
	
	/* column3
	---------------------------------------- */
	#container .flexWrapper {flex-wrap: wrap;}
	.column3 #column3Box .flexBox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.column3 #column3Box section {
		width: 31%;
		position: relative;
		padding: 1em;
		margin: 0 3.5% 3.5% 0;
	}
	.column3 #column3Box section:nth-child(3n) {margin-right: 0;}
	.column3 #column3Box section .image {margin-bottom: 1em;}
	.column3 #column3Box section h3 {
		font-weight: bold;
		font-size: 1.25em;
		margin: 0.7em 0 2.8em;
	}
	.column3 #column3Box .catBox time {font-size: 1.1em;}
	/* sideways
	---------------------------------------- */
	.sideways1 #container .flexWrapper {
		display: flex;
		align-content: space-between;
		align-items: flex-start;
		margin-bottom: 3em;
	}
	.sideways1 .photoBox {
		width: 35%;
		margin-right: 5%;
		margin-bottom: 1em;
	}
	.sideways1 .textBox {width: 60%;}
	.sidewaysBox .flexWrapper {width: 48%;}
	.sidewaysBox .flexWrapper:nth-child(odd) {margin-right: 4%;}
	
	/* photoBox
	---------------------------------------- */
	ul.photoBox {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		margin: 1.5em 0 3em;
	}
	ul.photoBox li {
		width: 18.4%;
		margin-right: 2%;
	}
	.photoBox li:last-child {margin-right: 0;}
	
	/* question
	---------------------------------------- */
	.qaList dt,
	.qaList dd {
		font-size: 1.15em;
		line-height: 1.5em;
	}
	.qaList dt {
		padding: 1em 0;
		margin-bottom: 1em;
	}
	.qaList dd {
		padding: 0 0 1.5em 1em;
		margin-bottom: 1.5em;
	}
	
	/* table
	---------------------------------------- */
	.tableStyle tr {background-color: #fff;}
	.tableStyle th,
	.tableStyle td {
		font-size: 1.15em;
		padding: 1em;
		line-height: 1.5em;
		vertical-align: top;
	}
	.tableStyle th {
		width: 15em;
		font-weight: bold;
		border-bottom: #000 1px solid;
	}
	.tableStyle td {border-bottom: #ddd 1px solid;}
	.btnTable {
		width: 440px;
		margin: 0 auto;
	}
	.btnTable td p {width: 200px;}
	.btnTable td p.btn02 {margin-right: 40px;}

	/* 動画
	---------------------------------------- */
	.youtubeBox {
		display: flex;
		flex-wrap: wrap;
	}
	.youtubeBox li {
		width: 32%;
		padding-top: 18.75%;
	}
	.youtubeBox li:not(:nth-child(3n)) {
		margin-right: 2%;
	}
	.youtubeBox li:not(:nth-child(-n+3)) {
		margin-top: 1em;
	}
}

/*===============================================
●画面の横幅が860px以上(PCのみ)
===============================================*/
@media screen and (min-width: 860px){
	
	/* 全般
	---------------------------------------- */
}