@charset "UTF-8";

/*common
------------------------------------------------------------------------------------------------------------------------------------ */
html { font-size: 62.5%; } /* 10px */
body { color: #262626; line-height: 1.8; font-size: 1.6rem; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", "Yu Gothic", "Helvetica Neue", "Helvetica", "Arial", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.pc_only { display: block; }
.sp_only { display: none; }

@-webkit-keyframes flash {	0% { opacity: .4;}	100% { opacity: 1;}}
@keyframes flash { 0% { opacity: .4;} 100% { opacity: 1;}}
a { color: #262626; cursor: pointer;}
a:hover { opacity: 1; -webkit-animation: flash 1s; animation: flash 1s;}

@media screen and (max-width:767px) {
body { line-height: 1.8; font-size: 1.5rem;}
.pc_only { display: none; }
.sp_only { display: block; }
img { width: 100%; height: auto;}
}

@media screen and (max-width:320px) {
html { font-size: 53.3%; } /* 8.5px */
}



/*common_parts
------------------------------------------------------------------------------------------------------------------------------------ */
/* header */
header { display: flex; justify-content: space-between; width: 100%; padding: 10px 50px; box-sizing: border-box;}
header p:first-child { padding-top: 13px;}
@media only screen and (max-width: 767px) {
	header { width: auto; padding: 11px 10px 11px 12px;}
	header p:first-child { padding-top: 4px;}
	header p:first-child img { width: 217px; height: auto;}
	header p:last-child img { width: 82px; height: auto;}
}


/* footer */
footer { display: flex; justify-content: space-between; padding: 40px 50px; background: #262626; color: #757575; font-size: 1.5rem;}
footer ul li { display: inline-block; line-height: 1;}
footer ul li:first-child { margin-right: 25px; padding-right: 25px; border-right: solid 1px #fff;}
footer ul li a { text-decoration: none; color: #fff;}
@media only screen and (max-width: 767px) {
	footer { display: block; padding: 25px 0; text-align: center; font-size: 1.1rem;}
	footer ul { margin-bottom: 15px;}
	footer ul li { font-size: 1.4rem;}
	footer ul li:first-child { margin-right: 15px; padding-right: 15px;}
}


/* layout */
#contents section.section_detail { padding: 70px 0 80px; text-align: center;}
#contents section .inner { width: 1000px; margin: 0 auto;}
#contents section h2 { display: inline-block; margin-bottom: 60px; font-weight: normal; font-size: 3.6rem;}
#contents section h2::after { content: ""; display: block; width: 300px; height: 1px; margin: 15px auto 0; background: #f5831f;}
#contents section h3 { margin-bottom: 35px; padding: 10px 0 8px; border: solid 4px #f5831f; border-radius: 100px; color: #f5831f; font-weight: bold; font-size: 2rem;}
#contents section h4 { display: inline-block; margin-bottom: 25px; padding: 10px 50px; background: #f6f6f6; border-radius: 100px; color: #f5831f; font-size: 1.8rem;}
#contents section ul.att { margin: 0 0 40px;}
#contents section ul.att li { margin: 0 0 0 1em; text-indent: -1em; font-size: 1.3rem;}
#contents section ul.att li::before { content: "※";}
@media only screen and (max-width: 767px) {
	#contents section.section_detail { padding: 50px 0;}
	#contents section .inner { width: 100%; padding: 0 20px; box-sizing: border-box;}
	#contents section h2 { display:block; width: 100%; margin-bottom: 40px; line-height: 1.4; font-size: 2.9rem; box-sizing: border-box;}
	#contents section h2::after { width: 160px; margin: 20px auto 0;}
	#contents section h3 { margin-bottom: 35px; padding: 14px 0 12px; border-radius: 20px; line-height: 1.5; font-size: 2rem;}
	#contents section h4 { padding: 10px 35px; font-size: 1.7rem;}
	#contents section ul.att { margin: 0 0 50px;}
	#contents section ul.att li { font-size: 1.4rem;}
	#contents section .colon { display: none;}
}


/* module */
.cmn_btn_comment { display: inline-block; margin-bottom: 15px; padding: 0 45px; background: url("../images/section01_line_l.png") 0 0 no-repeat ,url("../images/section01_line_r.png") right 0 no-repeat; font-weight: bold; font-size: 1.8rem;}
.cmn_btn a { position: relative; display: inline-block; width: 500px; padding: 15px 0; background: #f5831f; border-radius: 100px; box-shadow: 0 5px 10px 0 rgba(82,82,82,0.5); text-decoration: none; text-align: center; color: #fff; font-weight: bold; font-size: 2rem;}
.cmn_btn a::after { content: ""; display: block; position: absolute; right: 15px; top: 0; bottom: 0; margin: auto; width: 17px; height: 17px; background: url("../images/cmn_btn_arrow.png") 0 0 no-repeat;}
@media only screen and (max-width: 767px) {
	.cmn_btn_comment { display: inline-block; margin-bottom: 20px; padding: 0 45px; background: url("../images/section01_line_l_sp.png") 0 0 no-repeat ,url("../images/section01_line_r_sp.png") right 0 no-repeat; background-size: auto 56px; line-height: 1.7; font-size: 1.7rem;}
	.cmn_btn a { width: 100%; font-size: 1.9rem;}
}


/*contents
------------------------------------------------------------------------------------------------------------------------------------ */
/* section-main */
#section-main { position: relative; height: 500px; background: url("../images/main.jpg") center top no-repeat; background-size: cover;}
#section-main .block_ttl { position: absolute; top: 50%; left: 0; width: 100%; padding: 0 50px; transform: translate(0,-50%); box-sizing: border-box;}
#section-main .block_ttl div { width: 620px;}
#section-main .block_ttl div h1 { margin-bottom: 5px; line-height: 1.4; font-size: 5rem;}
#section-main .block_ttl div p.read01 { margin-bottom: 20px; color: #f5831f; font-weight: bold; font-size: 2.4rem;}
#section-main .block_btn { display: flex; justify-content: center; position: absolute; bottom: 37px; width: 100%;}
#section-main .block_btn .cmn_btn a { width: 400px; margin: 0 20px; font-size: 1.8rem;}
@media only screen and (max-width: 767px) {
	#section-main { height: auto; padding: 62vw 0 30px; background:#efece4 url("../images/main_sp.jpg") 0 0 no-repeat; background-size: cover;}
	#section-main .block_ttl { position: static; padding: 0; transform: translate(0,0);}
	#section-main .block_ttl div { width: 100%; box-sizing: border-box;}
	#section-main .block_ttl div h1 { margin-bottom: 5px; text-align: center; line-height: 1.3; font-size: 2.9rem;}
	#section-main .block_ttl div p.read01 { margin-bottom: 18px; text-align: center; line-height: 1.8; font-size: 1.6rem;}
	#section-main .block_btn { position: static; padding: 0 10px; box-sizing: border-box;}
	#section-main .block_btn .cmn_btn { width: 50%; padding: 0 10px; box-sizing: border-box;}
	#section-main .block_btn .cmn_btn a { width: 100%; margin: 0; padding:10px 10px 10px 0; border-radius: 10px; line-height: 1.4; font-size: 1.5rem; box-sizing: border-box;}
	#section-main .block_btn .cmn_btn:last-child a { padding: 21px 10px 20px;}
	#section-main .block_btn .cmn_btn a::after { right: 5px;}
}


/* section01 */
#section01 .inner ul.task { display: flex; justify-content: space-between; margin-bottom: 25px;}
#section01 .inner ul.task li { width: 300px;}
#section01 .inner ul.task li .ph { margin-bottom: 20px;}
#section01 .inner ul.task li .ttl { margin-bottom: 20px; color: #f5831f; font-weight: bold; font-size: 1.7rem;}
#section01 .inner ul.task li .txt { text-align: left;}
#section01 .inner .arrow { margin-bottom: 25px;}
#section01 .inner #area_security { margin-bottom: 20px;}
#section01 .inner #area_security ul.counterplan { display: flex; justify-content: space-between; width: 690px; margin: 0 auto 20px;}
#section01 .inner #area_security ul.counterplan li .icon { margin-bottom: 15px;}
#section01 .inner #area_security ul.counterplan li .ttl { line-height: 1.6; color: #f5831f; font-weight: bold;}
#section01 .inner .realization { margin-bottom: 60px; padding: 22px 0 20px; background: #ffeacc; border-radius: 10px; line-height: 1.5; color: #f5831f; font-weight: bold; font-size: 2.6rem;}
#section01 .inner .clearpass { margin-bottom: 50px;}
#section01 .inner .clearpass p { text-align: left;}
#section01 .inner .area_function h4 { margin-bottom: 30px;}
#section01 .inner .area_function ul.function { display: flex; justify-content: space-between; margin-bottom: 60px;}
#section01 .inner .area_function ul.function li { width: 300px; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px 0 rgba(82,82,82,0.5); box-sizing: border-box;}
#section01 .inner .area_function ul.function li .ttl { margin-bottom: 18px; padding: 20px 0 15px; background: #ffeacc; line-height: 1.6; font-weight: bold; font-size: 2rem;}
#section01 .inner .area_function ul.function li .ttl span { display: block; font-size: 1.5rem;}
#section01 .inner .area_function ul.function li .txt { padding: 0 8px; text-align: left;}
@media only screen and (max-width: 767px) {
	#section01 .inner ul.task { display: block; margin-bottom: 25px;}
	#section01 .inner ul.task li { width: 100%; margin-bottom: 35px;}
	#section01 .inner ul.task li .ph { width: 75%; margin: 0 auto 25px;}
	#section01 .inner ul.task li .ttl { margin-bottom: 15px; line-height: 1.8; font-size: 1.6rem;}
	#section01 .inner ul.task li .txt { padding: 0 10px;}
	#section01 .inner .arrow { margin-bottom: 35px;}
	#section01 .inner .arrow img { width: 133px; height: auto;}
	#section01 .inner #area_security ul.counterplan { width: 100%; flex-wrap: wrap; margin: 0 auto 40px;}
	#section01 .inner #area_security ul.counterplan li { width: 50%; margin-bottom: 25px;}
	#section01 .inner #area_security ul.counterplan li:nth-child(3),
	#section01 .inner #area_security ul.counterplan li:nth-child(4) { margin-bottom: 0;}
	#section01 .inner #area_security ul.counterplan li .icon { margin-bottom: 15px;}
	#section01 .inner #area_security ul.counterplan li .icon img { width: auto; height: 97px;}
	#section01 .inner #area_security .txt { padding: 0 10px; text-align: left;}
	#section01 .inner .realization { margin-bottom: 50px; font-size: 2.4rem;}
	#section01 .inner .area_function h4 { padding: 10px 30px;}
	#section01 .inner .area_function ul.function { display: block; margin-bottom: 40px;}
	#section01 .inner .area_function ul.function li { width: 100%; margin-bottom: 30px; padding: 15px 15px 20px; box-shadow: 0 0 5px 0 rgba(82,82,82,0.5);}
	#section01 .inner .area_function ul.function li:last-child { margin-bottom: 0;}
	#section01 .inner .area_function ul.function li .ttl { margin-bottom: 18px; padding: 15px 0; border-radius: 3px; line-height: 1.4; font-size: 1.8rem;}
	#section01 .inner .area_function ul.function li .txt { line-height: 1.6;}
}


/* section02 */
#section02 { background: #262626; color: #fff;}
#section02 .read { margin-bottom: 40px; text-align: left;}
@media only screen and (max-width: 767px) {
	#contents section#section02.section_detail { padding: 55px 0 10px;}
	#section02 .read { padding: 0 10px;}
	#section02 picture { display: block; padding: 0 10px;}
}

/* section03 */
#section03 { background: #f6f6f6;}
#section03 .inner .read { margin-bottom: 40px; text-align: left;}
#section03 .inner h3 { margin-bottom: 25px; background: #fff;}
#section03 .inner .ttl { margin-bottom: 30px; font-weight: bold; font-size: 2rem;}
#section03 .inner > div  { margin-bottom: 70px;}
#section03 .inner > div > div  { display: flex; justify-content: space-between;}
#section03 .inner > div > div div  { padding-right: 40px; text-align: left; line-height: 2;}
#section03 .inner > div > div div .txt01  { margin-bottom: 20px;}
@media only screen and (max-width: 767px) {
	#section03 .inner .ttl { margin-bottom: 15px; line-height: 1.6;}
	#section03 .inner > div  { margin-bottom: 50px;}
	#section03 .inner > div > div  { display: block;}
	#section03 .inner > div > div div  { margin-bottom: 25px; padding: 0 10px; line-height: 1.8;}
	#section03 .inner > div > div .img  { padding: 0 10px;}
}


/* section04 */
#section04 { background: url("../images/section04_bg.jpg") center center no-repeat; background-size: cover; color: #fff;}
#section04 .inner .read { margin-bottom: 40px; text-align: left;}
#section04 .inner .block_detail { display: flex; justify-content: space-between; align-items: center; margin-bottom: 80px; color: #262626;}
#section04 .inner .block_detail.block_detail02 { margin-bottom: 0;}
#section04 .inner .block_detail div { width: 430px; padding: 20px; background: #fff; border-radius: 10px; box-sizing: border-box;}
#section04 .inner .block_detail.block_detail02 div { width: 475px;}
#section04 .inner .block_detail div .ttl { margin-bottom: 20px; padding: 25px 0; background: #ffeacc; border-radius: 10px; font-weight: bold; font-size: 1.8rem;}
#section04 .inner .block_detail div .ttl.l1 { padding: 41px 0;}
#section04 .inner .block_detail div ul { padding: 0 8px; text-align: left;}
#section04 .inner .block_detail div ul li { padding: 0 0 5px 1em; text-indent: -1em;}
#section04 .inner .block_detail div ul li::before { content: "●"; color: #ffc491;}
#section04 .inner .block_detail div .txt {  padding: 0 8px; text-align: left;}
@media only screen and (max-width: 767px) {
	#section04 { background: url("../images/section04_bg_sp.jpg") center center no-repeat; background-size: cover;}
	#section04 .inner .read { padding: 0 10px;}
	#section04 .inner .block_detail { display: block; margin-bottom: 60px; color: #262626;}
	#section04 .inner .block_detail.block_detail02 { margin-bottom: 0;}
	#section04 .inner .block_detail div { width: 100%; padding: 15px;}
	#section04 .inner .block_detail.block_detail02 div { width: 100%; margin-bottom: 20px;}
	#section04 .inner .block_detail.block_detail02 div:last-child { margin-bottom: 0;}
	#section04 .inner .block_detail div .ttl { padding: 15px 0; font-size: 1.7rem;}
	#section04 .inner .block_detail div .ttl.l1 { padding: 15px 0;}
	#section04 .inner img { width: 64%; margin: 20px 0;}
}


/* section05 */
#section05 .inner h3 { margin-bottom: 25px;}
#section05 .inner .ttl { margin-bottom: 30px; font-weight: bold; font-size: 2rem;}
#section05 .inner > div  { margin-bottom: 70px;}
#section05 .inner > div:nth-child(2)  { margin-bottom: 0;}
#section05 .inner > div > div  { display: flex; justify-content: space-between;}
#section05 .inner > div > div div  { padding-right: 40px; line-height: 2; text-align: left;}
#section05 .inner > div > div div .txt01  { margin-bottom: 20px;}
#section05 .inner > div .read { margin-bottom: 40px; text-align: left;}
#section05 .inner ul.function { display: flex; justify-content: space-between; margin-bottom: 60px;}
#section05 .inner ul.function li { width: 475px; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px 0 rgba(82,82,82,0.5); line-height: 2; box-sizing: border-box;}
#section05 .inner ul.function li .ttl { margin-bottom: 18px; padding: 30px 0 25px; background: #ffeacc; line-height: 1.6; font-weight: bold; font-size: 1.8rem;}
#section05 .inner ul.function li .ttl span { display: block; font-size: 1.5rem;}
#section05 .inner ul.function li .txt { padding: 0 8px; text-align: left;}
@media only screen and (max-width: 767px) {
	#section05 .inner .ttl { margin-bottom: 15px; line-height: 1.6;}
	#section05 .inner > div  { margin-bottom: 50px;}
	#section05 .inner > div .read  { padding: 0 10px;}
	#section03 .inner > div .img  { padding: 0 10px;}
	#section05 .inner > div:nth-child(2)  { margin-bottom: 0;}
	#section05 .inner > div > div  { display: block;}
	#section05 .inner > div > div div  { margin-bottom: 25px; padding: 0 10px; line-height: 1.8;}
	#section05 .inner ul.function { display: block; margin-bottom: 40px;}
	#section05 .inner ul.function li { width: 100%; margin-bottom: 30px; padding: 15px; box-shadow: 0 0 5px 0 rgba(82,82,82,0.5);}
	#section05 .inner ul.function li:last-child { margin-bottom: 0;}
	#section05 .inner ul.function li .ttl { margin-bottom: 18px; padding: 15px 0 10px;font-size: 1.7rem;}
}



/* end css
------------------------------------------------------------------------------------------------------------------------------------ */