@charset "utf-8";

/* sub visual */
.sub-visual {background-image:url("../image/sub_05/sub_visual.jpg");}

/* 05 */
.instruction-wrap {text-align:left;}
.instruction-wrap .import {color:#ad0e0e !important;}
.instruction-wrap > h3 { font-family:'twaysky'; letter-spacing:-0.06em; line-height:1.4;}
.instruction-wrap > h3 mark {display:inline-block; position:relative;}
.instruction-wrap > h3 mark:after {content:''; display:inline-block; width:100%; height:19px; background-color:#f7d279; position:absolute; bottom:20px; left:0; z-index:-1;}
.instruction-wrap > h3 span {color:#05426d;}

.instruction-wrap .tit-1 {padding:0 1.568em; font-size:1.542em;}
.instruction-wrap .tit-1 mark {font-size:1.622em;}
.instruction-wrap .tit-2 {padding:0 .967em; font-size:2.5em;}

.instruction-wrap .col-group {padding:2.667em 2.417em; border-bottom:1px solid #ccc;}
.instruction-wrap .col-group h4 {font-weight:800; font-size:1.25em; color:#0c3660; text-transform:uppercase;}
.instruction-wrap .col-group ul {width:100%; height:auto; font-size:.917em;}
.instruction-wrap .col-group ul li {width:100%; padding-left:1.455em; margin-top:1.455em; line-height:1.6; position:relative;}
.instruction-wrap .col-group ul li:before {content:''; display:block; width:3px; height:3px; background-color:#0c3660; position:absolute; top:.636em; left:.636em;}
.instruction-wrap .col-group ul li strong {font-weight:800;}

.instruction-wrap .gray-box {width:100%; height:auto; max-width:1284px; padding:1.667em; margin:2em auto 0; background-color:#f8f8f8; border:1px solid #959393;}
.instruction-wrap .gray-box mark {font-weight:800;}
.instruction-wrap .gray-box ol {margin-top:1.2em; font-weight:600; font-size:.833em; line-height:1.4;}
.instruction-wrap .gray-box ol li {}

.part2 .col-1 ol {width:100%; height:auto; margin-top:2.182em; display:flex; flex-wrap:wrap; text-align:center; font-weight:600; font-size:.917em;}
.part2 .col-1 ol li {width:33%; padding:.727em 0; margin:1px; background-color:#0c3660; color:#fff;}

.part3 .col-1 {padding-top:0 !important;}
.part3 .col-1 ul li ul {margin-top:1.091em; font-weight:800;}
.part3 .col-1 ul li ul li {padding-left:0; margin-top:0;}
.part3 .col-1 ul li ul li:before {display:none;}

.part3 .col-2 .gray-box {padding:1.455em; display:flex; align-items:center;}
.part3 .col-2 .gray-box p {line-height:1.4; }
.part3 .col-2 .gray-box p:first-child {width:30%; text-align:center;}
.part3 .col-2 .gray-box p:last-child {width:70%; white-space:pre-line;}

.part3 .col-3 ul li strong {display:block; margin-top:1.091em;}
.part3 .col-3 ul li ul {margin-top:1.091em;}
.part3 .col-3 ul li ul li {padding-left:0; margin-top:0;}
.part3 .col-3 ul li ul li:before {display:none;}

.part4 figure {width:100%; height:auto; text-align:center;}
.part4 .col-1 figure figcaption {font-weight:800; font-size:.917em; margin-top:.727em;}

.part4 .col-2 ul {}
.part4 .col-2 ul li:nth-child(1) figure {margin:1.455em 0;}
.part4 .col-2 ul li:nth-child(1) figcaption {display:none;}

.part4 .col-2 ul li ul {margin-top:8px;}
.part4 .col-2 ul li ul li {padding-left:0; margin-top:0;}
.part4 .col-2 ul li ul li:before {display:none;}
.part4 .col-2 ul li ul li ul {margin:8px 0 1.091em;}

.part4 .col-2 table {width:100%; height:auto; text-align:center; font-weight:600; font-size:.727em;}
.part4 .col-2 table th, .part4 .col-2 table td {padding:6px; background-color:#0c3660; color:#fff; border:2px solid #fff;}

.part4 .col-2 ul li:nth-child(3) .gray-box {margin-top:1.333em;}
.part4 .col-2 ul li:nth-child(3) em {font-weight:600; font-size:.75em;}

.part4 .col-2 ul li:nth-child(4) figure {margin:2em 0;}
.part4 .col-2 ul li:nth-child(4) figcaption {font-weight:600; font-size:.667em;}

@media screen and (max-width: 1366px) {
	.instruction-wrap > h3 mark {display:inline; background-color:#f7d279;}
	.instruction-wrap > h3 mark:after {display:none;}
	.instruction-wrap .tit-1, .instruction-wrap .tit-2 {padding:0;}
	.instruction-wrap .col-group {padding:2em 0;}
	.part3 .col-2 .gray-box p {white-space:normal !important;}
}
@media screen and (max-width: 926px) {
	.instruction-wrap .tit-2 {font-size:2em;}
	.part3 .col-2 .gray-box {display:block; text-align:center;}
	.part3 .col-2 .gray-box p img {width:128px;}
	.part3 .col-2 .gray-box p {width:100% !important;}
}
@media screen and (max-width: 667px) {
	.instruction-wrap .tit-1 {font-size:1.5em;}
	.instruction-wrap .tit-2 {font-size:1.5em;}
	.part2 .col-1 ol li {width:49.33%;}
}