@charset "utf-8";

/*-----------------------------------------------
 *	見出し
-----------------------------------------------*/
.subhd-blue {font-size: 26px;}
.bg_blue{background: #356ec2;padding: 15px 0 10px;}
@media only screen and (max-width: 1024px) {

}
@media only screen and (max-width: 960px) {
}
@media only screen and (max-width: 568px) {
#second-visualcontents h1 {font-size: 20px;padding: 1em 0;}
.subhd-blue {font-size: 18px;}
}
/*-----------------------------------------------
 *	Heading settings
-----------------------------------------------*/
.policy_wrapper {background: url("../img/departure/bg-note.png") left repeat #fff;border: #3674ca 4px solid;outline: #c0d4f0 12px solid;outline-offset: -16px;padding: 35px;margin:0 0 2vw 0;}
.policy_wrapper h2 {background: #fff;font-size: 28px;font-weight: bold;position: relative;padding: .75em 1em;margin-top: .5em;margin-bottom: 1em;text-align: center;}
.policy_wrapper h2::before,.policy_wrapper h2::after {position: absolute;left: 0;content: '';width: 100%;height: 6px;box-sizing: border-box;}
.policy_wrapper h2::before {top: 0;border-top: 2px solid #84a4d1;border-bottom: 1px solid #84a4d1;}
.policy_wrapper h2::after {bottom: 0;border-top: 1px solid #84a4d1;border-bottom: 2px solid #84a4d1;}
.policy_wrapper h3 .en_txt::after {content: '―';padding-left: 5px;}

.policy_wrapper h4 {font-size: 22px;font-weight: bold;font-family: 'Noto Sans JP';margin-bottom: 15px;}
.policy_wrapper p {margin-bottom: 32px;}
.policy_wrapper p:last-of-type {margin-bottom: 0;}
.policy_wrapper p strong {color: #da6272;font-weight: bold;}
.policy_wrapper li strong {color: #da6272;font-weight: bold;}
.policy_wrapper a {color: #3674ca;font-weight: bold;text-decoration: underline;text-underline-offset: 8px;}
.policy_wrapper a:hover{text-decoration: none;}
.policy_wrapper p.reference_txt{color: #999;text-align: center;margin: -20px 0 30px 0;}
@media only screen and (max-width: 1024px) {
.policy_wrapper h2 span{font-size: 26px;}
.policy_wrapper h3 .en_txt{font-size: 22px;}
}
@media only screen and (max-width: 960px) {
.policy_wrapper {padding: 4vw;margin-top: 35px;}
.policy_wrapper h2 {font-size: 22px;}
.policy_wrapper h3 .en_txt{font-size: 17px;}
.policy_wrapper p {margin-bottom: 26px;}
.policy_wrapper p.reference_txt {margin-bottom: 30px;}
}
@media only screen and (max-width: 568px) {
.policy_wrapper {outline: #c0d4f0 8px solid;outline-offset: -12px;padding: 20px;margin-bottom: 6vw;}
.policy_wrapper h2 {font-size: 18px;padding: 0.7em 0.5em 0.5em;}
.policy_wrapper h3 .en_txt {display: block;font-size: 18px;margin: 0 0 5px 0;}
.policy_wrapper h3 .en_txt::before {content: '―';padding-right: 5px;}
.policy_wrapper h3 .en_txt::after {content: '―';padding-left: 5px;}
.policy_wrapper h4 {font-size: 18px;margin-bottom: 10px;}
.policy_wrapper p {line-height: 1.78;margin-bottom: 18px;}
.policy_wrapper p.reference_txt {margin-bottom: 20px;}
}
/*-----------------------------------------------
 *	Contents
-----------------------------------------------*/
.policy_contents .ttl_content_top{color: #fff;font-size: 32px;font-weight: bold;margin-bottom: 0;text-align: center;}
.policy_contents .ttl_content_top span{font-size: 32px;margin-bottom: 0;line-height: 1.4;}
.policy_contents h3 span{color: #356ec2;margin: 0 10px 0 0;}
.img_contents{background: #c0d4f0;padding: 40px;border-radius: 0 0 10px 10px;margin: 0 0 30px 0;}

@media screen and (max-width: 960px) {
.img_contents{padding: 4vw 4vw 3.5vw;}
}
@media screen and (max-width: 640px) {
.policy_contents .ttl_content_top {font-size: 20px;border-radius: 10px 10px 0 0;}
}
/*-----------------------------------------------
 *	Pillar
-----------------------------------------------*/
.policy_contents .pillar_ttl{font-size: 28px;line-height: 1.4;border-radius: 10px 10px 0 0;}
.policy_contents .pillar_ttl span{font-size: 38px;}
@media screen and (max-width: 640px) {
.policy_contents .pillar_ttl {font-size: 18px;}
.policy_contents .pillar_ttl span {font-size: 24px;}
}
/*-----------------------------------------------
 *	Number List
-----------------------------------------------*/
ol.num_list{counter-reset:list;list-style-type:none; display: table;border-collapse: separate;width: 100%;
  border-spacing: 0 10px;}
ol.num_list li{background: #fff;border-radius:10px;margin: 0 0 20px 0;font-weight: bold;font-size:28px;padding: 10px 0;display: table-row;counter-increment: table-ol;}
ol.num_list li:last-child{margin: 0;}
ol.num_list li span{margin-left: 1em;display: block;}

ol.num_list li:before{counter-increment: list;content: counter(list);display: table-cell;font-size: 32px;color: #fff;background: #356ec2;border-radius: 10px 0 0 10px;padding: 13px 25px;text-align: center;}
@media screen and (max-width: 1024px) {
ol.num_list li{font-size:26px;}
}
@media screen and (max-width: 960px) {
ol.num_list li{font-size:18px;}
ol.num_list li:before {font-size: 24px;padding: 13px 20px;}
}
@media screen and (max-width: 640px) {
ol.num_list li {font-size: 16px;}
ol.num_list li span {margin-left: .75em;line-height: 1.4;padding: 6px 0 0;}
ol.num_list li:before {font-size: 18px;padding: 14px 10px;vertical-align: middle;}
}
/*-----------------------------------------------
 *	Normal List
-----------------------------------------------*/
.list_box{background: #fff;border: #84a4d1 2px solid;padding: 20px;margin: 0 0 30px 0;}
.list_box li{padding: 0 0 0 1em;position: relative;}
.list_box li:before {content:  "";width: 7px;height: 7px;display: inline-block;background-color: #356ec2;border-radius: 50%;margin-right: 10px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.list_box li em{font-weight: normal;color: #333;}
.list_box li strong{color: #da6272;}
.list_box li:not(:last-child){margin-bottom: 10px;}
@media screen and (max-width: 640px) {
.list_box {padding: 15px;}
}
/*-----------------------------------------------
 *	Head List
-----------------------------------------------*/
.head_box{position: relative;margin: 40px 0 30px 0;}
.head_box .box-title {position: absolute;display: inline-block;top: -20px;left: 15px;padding: .5em 1em;line-height: 1;background: #356ec2;color: #fff;font-weight: bold;}

/*-----------------------------------------------
 *	Band List
-----------------------------------------------*/
.band_box{margin: 40px 0 30px 0;padding: 0;}
.band_box ul{padding: 20px;}
.band_box .band-title {display: block;padding: .75em 1em;line-height: 1;background: #356ec2;color: #fff;font-size: 18px;font-weight: bold;text-align: center;}
@media screen and (max-width: 640px) {
.band_box {margin: 20px 0;}
.band_box .band-title {font-size: 17px;line-height: 1.6;}
}
/*-----------------------------------------------
 *	Circle List
-----------------------------------------------*/
.circle_list{border: #84a4d1 2px solid;counter-reset: list-counter;float:left;padding: 20px;margin: 0 0 30px 0;width: 100%;box-sizing: border-box;}
.circle_list li{margin: .5em 0;}
.circle_list li:before{content: counter(list-counter);counter-increment: list-counter;width: 1em;height: 1em;line-height: 1;padding: .5em;margin-right: 1em;border-radius: 50%;background: #356ec2;color: #fff;font-size: 18px;font-weight: bold;text-align: center;display: inline-block;}
@media screen and (max-width: 640px) {
.circle_list {padding: 10px 15px;margin: 0 0 20px 0;}
.circle_list li:before {font-size: 16px;}
}
/*-----------------------------------------------
 *	Step Flow
-----------------------------------------------*/
.step_wrap {border: #84a4d1 2px solid;counter-reset: count;margin: 2em 0;padding: 30px;position: relative;}
.step_content {padding: 1.3em 0 .3em 1em;margin: 0 0 1em 1em;position: relative;border-top: solid 2px #ddd;}
.step_content::before {content: "";display: block;position: absolute;bottom: 0;left: -10px; border-style: solid;border-width: 17px 8px 0 8px;border-color: #ddd transparent transparent transparent;}
.step_content::after {content: "";display: block; height: calc(100% - 36px);border-left: dashed 4px #ddd;position: absolute;top: 16px;left: -4px;}
.step_label {padding: 3px 20px 3px 15px; color: #fff;font-weight: bold;position: absolute; top: -18px;left: -20px;background: #356ec2;border-radius: 20px;z-index: 1;}
.step_label::after {counter-increment: count;content: counter(count);position: relative; left: .3em;}
.step_title {font-weight: bold;font-size: 20px;}
.step_body {margin-top: .5em;padding: 0 0 1em;}
.step_wrap > :last-child {margin: 0 0 0 1em;}
.step_wrap .step_content:last-of-type .step_body{padding: 0;}
.step_wrap > :last-child::before, .step_wrap > :last-of-type::after {display: none;}
@media screen and (max-width: 640px) {
.step_wrap {padding: 30px 30px 30px 20px;}
.step_title {font-size: 16px;}
}