@charset "UTF-8";

h2.sub_title {position: relative;font-weight:bold;margin: 170px auto 100px;text-align: center;}
h2.sub_title span {font-size: 2.333em;font-weight: 700;align-items: center;text-transform: uppercase;}
h2.sub_title span::before{ content: ''; display: inline-block; width: 1px; height: 53px; background-color:var(--base_navy); position: absolute; top:-85px; left: 50%; transform: translateX(-50%);}
@media screen and (max-width:999px){
h2.sub_title { margin: 140px auto 50px;}
h2.sub_title span {font-size: 1.9em;}
}
@media screen and (max-width: 767px) {
h2.sub_title { margin: 25vw auto 8vw;}
h2.sub_title span {font-size: 1.6em;}
h2.sub_title span::before { height: 8vw; top:-12vw;}
}

.heard{ max-width: 1200px;  width: 100%; margin: 100px auto 0; padding: 100px 50px; box-sizing: border-box; background-image: url("images/heard_back.jpg");background-image: url(images/heard_back.jpg);background-image: image-set(url(images/heard_back.jpg) 1x, url(images/heard_back@2x.jpg) 2x);background-image: -webkit-image-set(url(images/heard_back.jpg) 1x, url(images/heard_back@2x.jpg) 2x);background-size: cover;background-position: center;}
.heard h2.heard_title {font-size: 2.1em;font-weight: 700; text-align: center;margin: 0 0 60px;}
.heard h2.heard_title span{font-size: 1.66em; border-bottom: 1px solid var(--base_navy); padding: 0 0 10px; margin: 0 0 0 10px;}
.heard .heard_block{ width: 100%; max-width: 900px; margin: 0 auto; display:flex; flex-wrap:wrap;}
.heard .heard_block .heard_pic {width: 170px;text-align: center;}
.heard .heard_block .heard_pic img{width: 100%;height: auto;margin: 0 0 16px;}
.heard .heard_block .heard_pic p.name {font-size: 1.6em;line-height: 2;font-weight: 700; color: #fff;padding: 0 1em; display: inline-block; background: var(--base_navy);margin: auto; text-align: center;border-radius: 100vh;}
.heard .heard_block .heard_text { width: calc(100% - 210px); margin: 0 0 0 40px; padding: 50px; box-sizing: border-box; background: #fff; border-radius: 30px;}
.heard .heard_block .heard_text p.text{font-size: 1.7em;line-height: 2;font-weight: 700;font-feature-settings: "palt";}
.heard .heard_block .heard_text p.text span {background: linear-gradient(transparent 55%, #bad8f2 50%);display: inline;padding: 0 2px 8px;}
@media screen and (max-width:999px){
.heard{ width: calc(100% + 100px); margin: 10% 0 0 -50px; padding: 70px 50px;}
.heard h2.heard_title {font-size: 1.8em;}
.heard .heard_block .heard_text { padding: 40px;}
.heard .heard_block .heard_text p.text{ font-size: 1.5em;}
}
@media screen and (max-width: 767px) {
.heard{ width: calc(100% + 60px); margin: 10% 0 0 -30px; padding: 50px 30px;}
.heard h2.heard_title{ font-size: 1.6em; margin: 0 0 20px;}
.heard h2.heard_title span{ font-size: 1.4em; display: table; padding: 10px 0; margin: auto; text-align: center;}
.heard .heard_block .heard_pic{ margin: 0 auto 20px;}
.heard .heard_block{ display: block;}
.heard .heard_block .heard_text{ width:100%; margin: auto; padding: 30px;}
.heard .heard_block .heard_text p.text{font-size: 1.3em;}
}


ul.structure { width: 100%; max-width: 1000px;margin: auto; border-top: 1px solid var(--base_navy);display:flex;flex-wrap:wrap;font-feature-settings: "palt";}
ul.structure li {position: relative;border-bottom: 1px solid var(--base_navy);text-align: center;}
ul.structure li .more {position: absolute;right: 20px;bottom: 20px;}
ul.structure li .more .btn_more {color: var(--base_navy);}
ul.structure li .more .btn_more .more_btn{ width: 120px; height: 42px; border-top: 1px solid var(--base_navy);border-left: 1px solid var(--base_navy); box-sizing: border-box; font-size: 1.8em; position: relative;}
ul.structure li .more .btn_more .more_btn p{ display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center;}
ul.structure li .more .btn_more .more_btn p .arrow{ position: relative; display: inline-block; width: 17px; height: 2px; margin:0; border-radius: 9999px; background-color: var(--base_navy); margin-right: 15px;}
ul.structure li .more .btn_more .more_btn p .arrow::before,
ul.structure li .more .btn_more .more_btn p .arrow::after { content: ""; position: absolute; top: calc(50% - 1px); right: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: var(--base_navy); transform-origin: calc(100% - 1px) 50%;}
ul.structure li .more .btn_more .more_btn p .arrow::before{transform: rotate(45deg);}
ul.structure li .more .btn_more .more_btn p .arrow::after{transform: rotate(-45deg);}

ul.structure li.wide1{ width: 100%; padding: 30px 30px 60px 30px; display: flex; justify-content: center; align-items: center;}
ul.structure li.wide2{ width:calc(50% - 1px);margin: 20px 0;padding: 40px 0 80px;}
ul.structure li.wide2_border::before {content: '';display: inline-block;width: 1px;height: calc(100% - 20px);background-color:var(--base_navy);position: absolute;top:0;right: 0;}
ul.structure li.wide2 .structure_tetle_block{ margin-bottom: 15px;}
h3.structure_tetle {font-size: 2.2em;font-weight: 700; display: inline-block;text-align: center;}
h3.structure_tetle span{ font-size: .68em;margin: 0 0 10px; font-weight: 100; color: var(--main_blue); display: inline-block; padding-left: 15px; position: relative; font-weight: 700;}
h3.structure_tetle span:before{ content: ''; display: block; width: 10px; height: 10px; border-radius: 50vh; background-color: var(--main_blue); position: absolute; top: 2px; left: 0;}
h3.structure_tetle span:after{ content: ''; display: block; width: 4px; height: 4px; border-radius: 50vh; background-color: #fff; position: absolute; top: 5px; left:3px;}
.structure_tetle_block {}
.structure_tetle_block:after {  content: '';display: inline-block;width: 100px;height: 100px;background-size: contain;vertical-align: middle;margin: -30px 0 0 10px;}
ul.structure li.wide1 .structure_tetle_block{ vertical-align: middle; position: relative; margin: -70px 70px 0 0;}
ul.structure li.wide1 .structure_tetle_block:after { content: '';display: inline-block;width: 100px;height: 100px;background-size: contain;vertical-align: middle;margin: inherit;position: absolute;bottom: -100px;left: 50%;transform: translateX(-50%);-webkit- transform: translateX(-50%);}
ul.structure li.wide1 .structure_text {display: inline-block;vertical-align: middle;}

.icon01:after {background-image: url("images/icon1.svg");}
.icon02:after {background-image: url("images/icon2.svg");}
.icon03:after {background-image: url("images/icon3.svg");}
.icon04:after {background-image: url("images/icon4.svg");}
.icon05:after {background-image: url("images/icon5.svg");}
.icon06:after {background-image: url("images/icon6.svg");}

ul.structure li .structure_text {display: inline-block;}
ul.structure li .structure_text ul{padding: 0;}
ul.structure li .structure_text ul li{ border: none; text-align: left; margin-bottom: 20px;}
ul.structure li .structure_text ul li:last-child{ margin-bottom: 0;}
ul.structure li .structure_text ul li .structure_sub_title {font-size: 2.7em;line-height: 1.4;font-weight: 700; padding: 0 0 0 44px;}
ul.structure li .structure_text ul li .structure_sub_title span { font-size: 1.75em;background: linear-gradient(transparent 70%, #bad8f2 50%);display: inline;padding: 0 2px 8px;}
ul.structure li .structure_text ul li .structure_sub_title:before{ content: ''; display: inline-block; width: 34px; height: 34px; background-size: contain; vertical-align: middle; background-image: url("images/check.svg"); position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
ul.structure li .structure_text ul li .structure_comment{font-size: 1.4em;line-height: 1.4;font-weight: 700; color: #7b8793;padding: 0;margin: 0 44px;}
ul.structure li .structure_text ul li .structure_sub_title b{ font-size: 0.7em;}

@media screen and (max-width:999px){
ul.structure{ width: 100%;}
ul.structure li.wide1{ padding: 30px 0 70px;}
ul.structure li .structure_text ul li .structure_sub_title{ font-size: 2.3em;}
ul.structure li .structure_text ul li .structure_sub_title span{ font-size: 1.5em;}
ul.structure li .structure_text ul li .structure_comment{ font-size: 1.3em; padding: 5px 0 0;}
}

@media screen and (min-width: 768px) {
ul.structure li .more .btn_more{ cursor: pointer;}
ul.structure li .more .btn_more:hover {background-color: transparent;}
ul.structure li .more .btn_more:hover p {color: #fff;}
ul.structure li .more .btn_more::before {position: absolute;top: 0;left: 0;z-index: -1;width: 0;height: 100%;background-color: var(--main_blue);content: '';transition: width .3s ease;}
ul.structure li .more .btn_more:hover::before {width: 100%;color: #fff;}
ul.structure li .more .btn_more:hover .more_btn p .arrow,
ul.structure li .more .btn_more:hover .more_btn p .arrow::before,
ul.structure li .more .btn_more:hover .more_btn p .arrow::after {background-color: #fff;}
}

@media screen and ( max-width: 767px) {
ul.structure li .more{ position: inherit; right: inherit; bottom:inherit; text-align: right; padding: 10px 0 0;}
ul.structure li .more .btn_more{ display: inline-block;}
ul.structure li .more .btn_more .more_btn{ width: 102px; height: 36px; font-size: 1.4em;}

ul.structure li.wide1{ width: 100%; padding: 5% 0 7%; display: block;}
ul.structure li.wide2{ width:100%; margin:0; padding: 5% 0 7%;}
ul.structure li.wide2_border {padding: 5% 0 7%;}
ul.structure li.wide2_border::before {content: '';display: inline-block;width:inherit;height:inherit;background-color:inherit;position: inherit;top:inherit;right: inherit;}
ul.structure li.wide2 .structure_tetle_block{ margin-bottom: 0;}
.structure_tetle_block:after {  content: '';display: inline-block;width: 80px;height: 80px;background-size: contain;vertical-align: middle;margin: -30px 0 0 10px;}
ul.structure li.wide1 .structure_tetle_block {margin: inherit;}
ul.structure li.wide1 .structure_tetle_block:after {  content: '';display: inline-block;width: 80px;height:80px;background-size: contain;vertical-align: middle;margin: -30px 0 0 10px;position: inherit;bottom: inherit;left: inherit;transform: inherit;-webkit- transform: inherit;}
ul.structure li.wide1 .structure_text {width: 100%;}
h3.structure_tetle {font-size: 2em;}
ul.structure li .structure_text {width: 100%;}
ul.structure li .structure_text ul.structure_list{ padding: 10px 0 0;}
ul.structure li .structure_text ul.structure_list li.structure_sub_title {font-size: 2em;line-height: 1.4;font-weight: 700; padding: 0 0 0 44px;}
ul.structure li .structure_text ul.structure_list li.structure_sub_title span {font-size: 1.75em;background: linear-gradient(transparent 70%, #bad8f2 50%);display: inline;padding: 0 2px 8px;}
ul.structure li .structure_text ul.structure_list li.structure_comment {font-size: 1.3em;margin: 0 0 0 44px;}
ul.structure li .structure_text ul li{ margin-bottom: 10px;}
ul.structure li .structure_text ul li .structure_sub_title{ font-size: 2em;}
}
@media screen and (max-width:376px) {
ul.structure li .structure_text ul.structure_list li.structure_sub_title {font-size: 1.8em;}
ul.structure li .structure_text ul.structure_list li.structure_sub_title span {font-size: 1.5em;}
}

.modal{ display: none; height: 100vh; position: fixed; top: 0; width: 100%; z-index: 9999;}
.modal__bg{ background: rgba(0,0,0,0.8); height: 100vh; position: absolute; width: 100%;}
.modal__content{ background: #fff; left: 50%; padding: 50px; box-sizing: border-box; position: absolute; top: 50%; transform: translate(-50%,-50%); width: calc(100% - 100px); max-width: 1200px; height: auto; max-height: 80vh; position: relative;}
.modal__content .modal_back{ position: relative; height: 100%; max-height: calc(80vh - 100px); padding: 50px; box-sizing: border-box; overflow-y: auto;}
.modal__content .modal_back h3.modal_tetle {font-size: 3.5em;font-weight: 700;text-align: left;vertical-align: middle;margin: 0 0 50px;}
.modal__content .modal_back h3.modal_tetle span{ font-size: .42em; font-weight: 700; margin: 0 0 10px; color: var(--main_blue); display: inline-block; padding-left: 15px;margin: -5px 0 0 35px; position: relative;vertical-align: middle;}
.modal__content .modal_back h3.modal_tetle span:before{ content: ''; display: block; width: 10px; height: 10px; border-radius: 50vh; background-color: var(--main_blue); position: absolute; top: 2px; left: 0;}
.modal__content .modal_back h3.modal_tetle span:after{ content: ''; display: block; width: 4px; height: 4px; border-radius: 50vh; background-color: #fff; position: absolute; top: 5px; left:3px;}
.modal__content .modal_back ul.modal_icon {margin:0 auto 35px;}
.modal__content .modal_back ul.modal_icon li {width: 220px;display: inline-block;vertical-align: top;margin:0 -8px;}
.modal__content .modal_back ul.modal_icon li img {width: 100%;height: auto;vertical-align: top;}
.modal__content .modal_back ul.modal_icon li p.text {font-size: 1.3em;line-height: 1.46;font-weight: 700; color: #7b8793; margin:-5px 24px auto;text-align: left;font-feature-settings: "palt";}
.modal__content .modal_back p.modal_text { font-size: 1.5em; line-height: 2.13; font-weight: 700; text-align: left; font-feature-settings: "palt"; width: 100%;}
.modal__content .modal_back p.modal_text span{ display: inline-block; white-space: nowrap;}
.modal__content .modal_back h4{ font-size: 1.7em;font-weight: 700;margin: 0 0 20px;text-align: left;}
.modal__content .close_btn { width: 40px; height: auto; position: absolute; top: -20px; right: -20px;}
.modal__content .close_btn img{ width: 100%; height: auto;}

@media screen and (max-width:999px){
.modal__content{ height: auto; padding: 25px;}
.modal__content .modal_back{ max-height: calc(80vh - 50px); padding: 25px;}
.modal__content .modal_back h3.modal_tetle { font-size: 3.2em;}
.modal__content .modal_back p.modal_text{ font-size: 1.4em; line-height: 1.8;}
.modal__content .modal_back ul.modal_icon li{ width: 170px;}
}

@media screen and (min-width: 768px) {
.modal__content .close_btn:hover{ cursor: pointer;}
}

@media screen and (max-width: 767px) {
.modal__content{ width: calc(100% - 30px); max-height: 80vh; padding: 15px;}
.modal__content .modal_back{ max-height: calc(80vh - 30px); padding: 15px;}
.modal__content .modal_back h3.modal_tetle{ font-size: 2.3em; margin: 0 0 5%;}
.modal__content .modal_back h3.modal_tetle span{ margin: 10px 0 0 0; display: block; font-size: .6em;}
.modal__content .modal_back h3.modal_tetle span:before{ top: 0; left: 0;}
.modal__content .modal_back h3.modal_tetle span:after{ top: 3px; left:3px;}
.modal__content .modal_back ul.modal_icon { margin:0 auto 2.5%;}
.modal__content .modal_back ul.modal_icon li{ width: 50%; max-width: 220px; display: inline-block; vertical-align: top; margin:0 -1%;}
.modal__content .modal_back p.modal_text {font-size: 1.3em;line-height: 1.8;}
.modal__content .modal_back p.modal_text span{ display: inline-block; white-space: wrap;}
.modal__content .modal_back h4.modal_sub_etle {font-size: 2.1em;margin: 0 0 5%;}
.modal__content .close_btn { top: -20px; right: -10px;}
}