@charset "utf-8";
/* CSS Document */

/* header */
/* ---------------------------------------------------------------------------- */

header { padding: 15px 0 60px;}
header h1 { text-align: center; font-size: 16px; padding-bottom: 10px;}
header .mainimg { position: relative;}
header h2 {margin-top: -90px; text-align: center; padding-bottom: 20px;}
header .campaign-box { font-weight: bold; font-size: 20px; background: #FBF19D; color: #327538; width: 90%; margin: auto; padding: 30px 10px 20px; text-align: center; line-height: 1.4;}
header .campaign-box .orange { color: #D67A00; text-decoration: underline;}
header .campaign-box .red { text-decoration: none;}
header .campaign-box strong { font-size: 30px;}
header .campaign-box span { font-weight: bold;}

@media screen and (max-width: 767px) {
    header { padding: 15px 0 30px;}
	header h1 { font-size: 15px;}
    header .mainimg { padding: 0 5px;}
    header h2 {max-width: 80%; margin: -30px auto 0; padding: 0;}
	header .campaign-box { font-size: 17px; width: 96%;}
	header .campaign-box strong { font-size: 26px;}
}
/* footer */
/* ---------------------------------------------------------------------------- */

footer { text-align: center; font-size: 15px; padding: 40px 0 20px; }

@media screen and (max-width: 767px) {
	footer { padding: 20px 0 10px; }
}


/* container */
/* ---------------------------------------------------------------------------- */

p {font-size: 18px; line-height: 2; padding-bottom: 40px; text-align: left;}
p:last-child {padding-bottom: 0;}
strong { font-weight: bold;}
h3 { 
	background: #327538;
	border-radius: 30px;
	padding: 5px 40px;
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	display: inline-block;
	margin: 0 auto 20px;
}
h4 {
    font-size: 30px;
    font-weight: bold;
    color: #327538;
    text-align: center;
	padding-bottom: 20px;
}
h5 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
	padding-bottom: 10px;
	line-height: 1.4;
}
.red { color: #D20000; font-size: 20px; font-weight: bold; text-align: center; text-decoration: underline; }
.sec:after {
    content: "";
    display: block;
    border-bottom: 2px #3E2D14 dotted;
    margin: 60px auto;
}
.sec:last-child:after { display: none;}

.flexbox {display: flex; flex-wrap: wrap; align-items: top; justify-content: space-between;}
.flexbox.mid {align-items: center;}
.flexbox.center {justify-content: center;}
.flexbox.reverse {flex-direction: row-reverse;}
.flL {float: left;}
.flR {float: right;}

.taL {text-align: left;}
.taC {text-align: center;}
.taR {text-align: right;}

.sec-list {  margin: 0 auto 0; justify-content: flex-start;}
.sec-list li { width: 300px; max-width: 33%; margin: 0 3% 0 0;}
.sec-list li:last-child { margin-right: 0;}
.sec-list li img { display: block; margin: 0 auto 10px;}
.sec-list li h5 { padding-bottom: 0;}
.sec-list li span { display: block; text-align: center; text-decoration: underline; padding-bottom: 10px;}
.sec-list li p { font-size: 16px; line-height: 1.6;}

.pc-only {display: block;}
.sp-only {display: none;}
.pc-block {display: block;}
.sp-block {display: none;}
.pc-inline {display: inline;}
.sp-inline {display: none;}

@media screen and (max-width: 767px) {
    p {padding-bottom: 20px;}
    h3 { margin: 0 auto 15px;}
    h4 { padding-bottom: 10px;}
	h5 { font-size: 18px;}
    .sec:after {content: ""; display: block; border-bottom: 2px #3E2D14 dotted; margin: 30px auto;}
    .sec-list {}
    .sec-list li { width: 48%; max-width: 48%; margin: 0 2% 15px 0;}
    .sec-list li:nth-child(2n) {margin: 0 0 15px 0;}
    .sec-list li:last-child { margin-right: auto;}
	.pc-only {display: none !important;}
	.sp-only {display: block;}
	.pc-block {display: none !important;}
	.sp-block {display: block;}
	.pc-inline {display: none !important;}
	.sp-inline {display: inline;}
	.pc-hidden {display: block;}
}

/* main */
/* ---------------------------------------------------------------------------- */
.sec01, .sec02, .sec03 {text-align: center;}


.sec01 { margin-bottom: 150px;}
.sec01 .sec strong { font-size: 20px;}
.sec01 .sec strong span { text-decoration: underline; font-weight: bold;}
.sec01 .sec dl {width: 48%; font-size: 18px; line-height: 1.8; text-align: left;}
.sec01 .sec dl:after { content: ""; display: block; clear: both;}
.sec01 .sec dl dt { float: left; width: 60%;}
.sec01 .sec dl dd { float: left; width: 40%;}
.sec01 .sec .img {}
.sec01 .sec .img-max {}

@media screen and (max-width: 767px) {
.sec01 { margin-bottom: 70px;}
.sec01 .sec {padding: 0 10px;}
.sec01 .sec strong { font-size: 18px;}
.sec01 .sec dl {width: 100%; margin-top: 10px;}
.sec01 .sec dl dd {text-align: right;}
.sec01 .sec .img img {margin-bottom: 10px;}
.sec01 .sec .img img:first-child { max-width: 70%;}
.sec01 .sec .img-max { margin: 0 auto;}
}

.sec02 { margin-bottom: 100px;}
.sec02 .sec-list li { width: 217px; max-width: 24%; margin: 0 3% 40px 0;}
.sec02 .sec-list li:nth-of-type(4n) { margin-right: 0;}
.sec02 .btn { text-align: center; padding-top: 20px;}

@media screen and (max-width: 767px) {
    .sec02 { margin-bottom: 70px;}
    .sec02 .sec-list { padding: 0 10px;}
    .sec02 .sec-list li { width: 48%; max-width: 48%; margin: 0 2% 15px 0;}
    .sec02 .sec-list li:nth-of-type(2n) { margin: 0 0 15px 0;}
    .sec02 .btn { padding: 20px 10px 0;}
}

.sec03 { background: #FFF; padding: 40px;}
.sec03 p { padding-bottom: 0;}
.sec03 .red { color: #D20000; font-size: 18px; font-weight: normal; text-align: left; text-decoration: none; }

@media screen and (max-width: 767px) {
    .sec03 {padding: 20px;}
	.sec03 p { padding-bottom: 10px;}
    .sec03 .img {width: 100%;}
}