@charset "utf-8";
/* CSS Document */
/*----------------------------------------------------------
menuBlock
----------------------------------------------------------*/
.menuBlock01{
padding: 0 0 70px;
}
.menuBlock01 .title{
border-radius: 10px;
margin: 0 0 40px;
overflow: hidden;
}
.menuBlock01 .menuList{
width: 940px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.menuBlock01 .menuList > li{
width: 300px;
}
.menuBlock01 .menuList > li a{
color: #1E4290;
font-size: 1.4rem;
font-weight: 600;
text-align: center;
border: 1px solid #1E4290;
border-radius: 100px;
padding: 12px 0;
display: block;
position: relative;
transition: 0.3s;
}
.menuBlock01 .menuList > li a::before{
content: "";
width: 9px;
height: 11px;
background: url("/wp-content/themes/divehope/assets/images/common/common_ico_01_navy.webp") top center / 100% auto no-repeat;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
}
@media (min-width: 769px){
.menuBlock01 .menuList > li a:hover{
background: #EFF7FD;
}
}
@media (max-width: 768px){
.menuBlock01{
padding: 0 0 6.0rem;
}
.menuBlock01 .title{
border-radius: 1.0rem;
margin: 0 0 4.0rem;
}
.menuBlock01 .menuList{
width: 100%;
padding: 0 1.5rem;
display: block;
}
.menuBlock01 .menuList > li{
width: 100%;
margin: 0 0 2.0rem;
}
.menuBlock01 .menuList > li:last-child{
margin-bottom: 0;
}
.menuBlock01 .menuList > li a{
font-size: 1.8rem;
padding: 1.2rem 0;
}
.menuBlock01 .menuList > li a::before{
width: 1.0rem;
height: 1.2rem;
right: 2.0rem;
}
}

/*----------------------------------------------------------
section
----------------------------------------------------------*/
/* -- section01 -- */
.section01{
padding: 75px 0 80px;
}
.section01 .leadBlock01{
margin: 0 0 60px;
}
.section01 .leadBlock01 p{
font-size: 1.4rem;
text-align: center;
}
.section01 .leadBlock01 p + p{
margin-top: 20px;
}
.section01 .block01{
margin: 0 0 35px;
display: flex;
flex-wrap: wrap;
}
.section01 .block01 .box01{
width: 480px;
}
.section01 .block01 .box01 + .box01{
margin: 0 0 0 40px;
}
.section01 .block01 .box01 .title01{
text-align: center;
margin: 0 0 16px;
}
.section01 .block01 .box01 .title01 span{
color: #1E4290;
font-size: 1.8rem;
font-weight: 600;
line-height: 2.6rem;
padding: 0 20px;
display: inline-block;
position: relative;
}
.section01 .block01 .box01 .title01 span::before{
content: "";
width: 9px;
height: 100%;
background: url("/wp-content/themes/divehope/assets/images/plan/sec01_ico_01.webp") top center / 100% auto repeat-y;
position: absolute;
left: 0;
top: 0;
}
.section01 .block01 .box01 .title01 span::after{
content: "";
width: 9px;
height: 100%;
background: url("/wp-content/themes/divehope/assets/images/plan/sec01_ico_01.webp") top center / 100% auto repeat-y;
position: absolute;
right: 0;
top: 0;
}
.section01 .block01 .box01 .image01{
border-radius: 10px;
margin: 0 0 25px;
}
.section01 .block01 .box01 .text01{
font-size: 1.4rem;
margin: 0 0 15px;
}
.section01 .block01 .box01 .notes01 > li{
font-size: 1.2rem;
padding: 0 0 0 15px;
position: relative;
}
.section01 .block01 .box01 .notes01 > li::before{
content: "＊";
position: absolute;
left: 0;
top: 0;
}
.section01 .block01 .box01 .table01{
width: 100%;
margin: 0 0 18px;
}
.section01 .block01 .box01 .table01 table{
background: #fff;
}
.section01 .block01 .box01 .table01 table th{
width: 240px;
font-size: 1.4rem;
font-weight: 600;
text-align: center;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 8px 0;
vertical-align: middle;
}
.section01 .block01 .box01 .table01 table td{
width: 120px;
color: #1E4290;
font-size: 1.6rem;
font-weight: 600;
text-align: center;
padding: 8px 0;
border-top: 1px solid #1E4290;
border-bottom: 1px solid #1E4290;
vertical-align: middle;
}
.section01 .block01 .box01 .table01 table tr:first-child th,
.section01 .block01 .box01 .table01 table tr:first-child td{
font-size: 1.4rem;
}
.section01 .block01 .box01 .table01.type02 table td{
width: 240px;
}
.section01 .block02{
margin: 0 0 35px;
}
.section01 .block02 .title01{
background: #1E4290;
color: #fff;
font-size: 1.4rem;
font-weight: 600;
text-align: center;
padding: 10px 0;
position: relative;
cursor: pointer;
transition: 0.3s;
}
.section01 .block02 .title01::before{
content: "";
width: 10px;
height: 1px;
background: #fff;
border-radius: 100px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.section01 .block02 .title01::after{
content: "";
width: 10px;
height: 1px;
background: #fff;
border-radius: 100px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
transition: 0.3s;
}
.section01 .block02 .title01.active::after{
transform: translateY(-50%) rotate(180deg);
opacity: 0;
}
.section01 .block02 .accBlock{
display: none;
}
.section01 .block02 .blockInner01{
background: #fff;
border: 1px solid #1E4290;
padding: 30px;
display: flex;
flex-wrap: wrap;
}
.section01 .block02 .blockInner01 .box01{
width: 50%;
margin: 0 0 20px;
display: grid;
grid-template-columns: 110px 1fr;
grid-auto-rows: minmax(min-content, auto);
}
@media (min-width: 769px){
.section01 .block02 .blockInner01 .box01:nth-last-of-type(-n+2){
margin-bottom: 0;
}
}
.section01 .block02 .blockInner01 .box01 .image{
margin: 0 10px 0 0;
display: block;
grid-row: 1 / 6;
}
.section01 .block02 .blockInner01 .box01 .item01{
line-height: 1.4;
grid-column: 2;
}
.section01 .block02 .blockInner01 .box01 .ttl01{
font-size: 1.4rem;
font-weight: 600;
margin: 0 0 5px;
}
.section01 .block02 .blockInner01 .box01 [class^="text"]{
font-size: 1.4rem;
}
.section01 .block02 .blockInner01 .box01 [class^="text"] span{
margin: 0 0 0 15px;
display: inline-block;
}
@media (max-width: 768px){
.section01{
padding: 7.5rem 0 8.0rem;
}
.section01 .leadBlock01{
margin: 0 0 6.5rem;
}
.section01 .leadBlock01 p{
font-size: 1.6rem;
text-align: left;
}
.section01 .leadBlock01 p + p{
margin-top: 2.0rem;
}
.section01 .block01{
margin: 0 0 2.5rem;
display: block;
}
.section01 .block01 .box01{
width: 100%;
}
.section01 .block01 .box01 + .box01{
margin: 5.0rem 0 0;
}
.section01 .block01 .box01 .title01{
margin: 0 0 1.5rem;
}
.section01 .block01 .box01 .title01 span{
font-size: 2.2rem;
padding: 0 2.0rem;
}
.section01 .block01 .box01 .title01 span::before{
width: 0.9rem;
}
.section01 .block01 .box01 .title01 span::after{
width: 0.9rem;
}
.section01 .block01 .box01 .image01{
border-radius: 1.0rem;
margin: 0 0 3.0rem;
}
.section01 .block01 .box01 .text01{
font-size: 1.6rem;
margin: 0 0 2.0rem;
}
.section01 .block01 .box01 .notes01 > li{
font-size: 1.4rem;
padding: 0 0 0 1.5rem;
}
.section01 .block01 .box01 .table01{
width: calc(100% + 1.5rem);
margin: 0 0 1.8rem;
overflow-x: scroll;
}
.section01 .block01 .box01 .table01 table{
width: 49.0rem;
margin: 0 1.5rem 0 0;
}
.section01 .block01 .box01 .table01 table th{
width: 24.5rem;
font-size: 1.6rem;
padding: 0.8rem 0;
}
.section01 .block01 .box01 .table01 table td{
width: 12.25rem;
font-size: 1.8rem;
padding: 0.8rem 0;
}
.section01 .block01 .box01 .table01 table tr:first-child th,
.section01 .block01 .box01 .table01 table tr:first-child td{
font-size: 1.6rem;
}
.section01 .block01 .box01 .table01.type02 table{
width: 36.75rem;
}
.section01 .block01 .box01 .table01.type02 table td{
width: 12.25rem;
}
.section01 .block02 .title01{
font-size: 1.4rem;
padding: 1.0rem 0;
}
.section01 .block02 .title01::before{
width: 1.0rem;
right: 2.0rem;
}
.section01 .block02 .title01::after{
width: 1.0rem;
right: 2.0rem;
}
.section01 .block02 .blockInner01{
padding: 2.0rem 1.5rem;
display: block;
}
.section01 .block02 .blockInner01 .box01{
width: 100%;
margin: 0 0 1.5rem;
grid-template-columns: 12.0rem 1fr;
}
.section01 .block02 .blockInner01 .box01:last-of-type{
margin-bottom: 0;
}
.section01 .block02 .blockInner01 .box01 .image{
width: 10.5rem;
height: auto;
margin: 0 1.5rem 0 0;
}
.section01 .block02 .blockInner01 .box01 .item01:last-child{
margin-top: 0.5rem;
grid-column: 1 / -1;
}
.section01 .block02 .blockInner01 .box01 .ttl01{
margin: 0 0 0.5rem;
}
.section01 .block02 .blockInner01 .box01 [class^="text"] span{
margin: 0;
display: block;
}
.section01 .block02 .blockInner01 .closeBtn{
text-align: center;
margin: 3.0rem 0 0;
}
.section01 .block02 .blockInner01 .closeBtn span{
font-size: 1.4rem;
font-weight: 600;
line-height: 1.0;
padding: 0 2.0rem 0 0;
display: inline-block;
position: relative;
}
.section01 .block02 .blockInner01 .closeBtn span::before{
content: "";
width: 1.0rem;
height: 1px;
background: #333;
position: absolute;
right: 0;
top: 50%;
transform: rotate(-45deg) translateY(-50%);
}
.section01 .block02 .blockInner01 .closeBtn span::after{
content: "";
width: 1.0rem;
height: 1px;
background: #333;
position: absolute;
right: 0;
top: 50%;
transform: rotate(45deg) translateY(-50%);
}
}