@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------
header
----------------------------------------------------------*/
#header{
width: 100%;
background: #1F4290;
position: fixed;
z-index: 20;
}
#header .inner{
width: 1000px;
height: 60px;
color: #fff;
margin: 0 auto;
display: flex;
align-items: center;
}
#header .inner .logo{
width: 270px;
}
#header .inner .btn{
width: 100px;
order: 3;
position: relative;
z-index: 2;
}
#header .inner .btn a{
background: #16B583;
font-size: 1.4rem;
font-weight: 600;
text-align: center;
border: 1px solid #16B583;
border-radius: 100px;
padding: 8px 0;
display: block;
position: relative;
transition: 0.3s;
}
#header .inner .btn a::before{
content: "";
width: 18px;
height: 18px;
background: url("/wp-content/themes/divehope/assets/images/common/header_ico_02.webp") top center / 100% auto no-repeat;
position: absolute;
left: -15px;
top: 7px;
z-index: -1;
}
#header .inner .hamburger{
display: none;
}
#header .inner #navigation{
width: 610px;
order: 2;
}
#header .inner #navigation .list01{
display: flex;
align-items: center;
}
#header .inner #navigation .list01 > li{
position: relative;
}
#header .inner #navigation .list01 > li + li{
margin: 0 0 0 20px;
padding: 0 0 0 28px;
}
#header .inner #navigation .list01 > li > a,
#header .inner #navigation .list01 > li > span{
color: #fff;
font-size: 1.6rem;
font-weight: 600;
display: block;
cursor: pointer;
transition: 0.3s;
}
#header .inner #navigation .list01 > li.active > a{
color: #5AC4FA;
}
#header .inner #navigation .list01 > li + li::before{
content: "";
width: 8px;
height: 21px;
background: url("/wp-content/themes/divehope/assets/images/common/header_ico_01.webp") top center / 100% auto no-repeat;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#header .inner #navigation .list01 a{
position: relative;
z-index: 2;
}
#header .inner #navigation .list01 .item{
width: 205px;
padding: 65px 0 0;
position: absolute;
left: -30px;
top: 0;
display: none;
z-index: 1;
}
#header .inner #navigation .list02{
width: 100%;
background: rgba(0,0,0,0.7);
border-radius: 10px;
padding: 5px 25px;
position: relative;
}
#header .inner #navigation .list02::before{
content: "";
width: 15px;
height: 13px;
background: rgba(0,0,0,0.7);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
position: absolute;
left: 58px;
top: -13px;
}
#header .inner #navigation .list02 > li + li{
border-top: 1px solid rgba(255,255,255,0.3);
}
#header .inner #navigation .list02 > li > a{
font-size: 1.4rem;
font-weight: 600;
text-align: center;
padding: 12px 0;
display: block;
position: relative;
transition: 0.3s;
}
#header .inner #navigation .list02 > li > a::before{
content: "";
width: 9px;
height: 11px;
background: url("/wp-content/themes/divehope/assets/images/common/common_ico_01_white.webp") top center / 100% auto no-repeat;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
@media (min-width: 769px){
#header .inner .btn a:hover{
background: #fff;
color: #16B583;
}
#header .inner #navigation .list01 > li > a:hover,
#header .inner #navigation .list02 > li > a:hover{
color: #5AC4FA;
}
#header .inner #navigation .list02 > li a:hover::before{
background: url("/wp-content/themes/divehope/assets/images/common/common_ico_01_blue.webp") top center / 100% auto no-repeat;
}
}
@media (max-width: 768px){
#header .inner{
width: 100%;
height: 6.6rem;
padding: 0 1.5rem;
justify-content: space-between;
}
#header .inner .logo{
width: calc(100% - 23.0rem);
}
#header .inner .logo img{
width: 12.0rem;
height: auto;
}
#header .inner .btn{
width: 9.0rem;
margin: 0 0 0 5.8rem;
order: 2;
}
#header .inner .btn a{
font-size: 1.3rem;
padding: 0.7rem 0;
}
#header .inner .btn a::before{
width: 1.7rem;
height: 1.7rem;
left: -15px;
top: 7px;
}
#header .inner .hamburger{
width: 3.0rem;
display: block;
order: 3;
position: relative;
}
#header .inner .hamburger::before{
content: "";
width: 100%;
height: 0.2rem;
background: #fff;
border-radius: 100px;
position: absolute;
left: 0;
top: 0;
transition: 0.3s;
}
#header .inner .hamburger::after{
content: "";
width: 2.0rem;
height: 0.2rem;
background: #fff;
border-radius: 100px;
position: absolute;
left: 0;
bottom: 0;
transition: 0.3s;
}
#header .inner .hamburger span{
width: 100%;
height: 2.2rem;
display: block;
position: relative;
}
#header .inner .hamburger span::before{
content: "";
width: 2.5rem;
height: 0.2rem;
background: #fff;
border-radius: 100px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
transition: 0.3s;
}
#header .inner .hamburger.active::before{
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
#header .inner .hamburger.active::after{
width: 100%;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
#header .inner .hamburger.active span::before{
opacity: 0;
}
#header .inner #navigation{
width: 100%;
background: rgba(30,60,144,0.8);
order: 4;
position: absolute;
left: 0;
top: 6.6rem;
display: none;
}
#header .inner #navigation .list01{
padding: 4.0rem 4.5rem;
display: block;
}
#header .inner #navigation .list01 > li{
border-bottom: 0.25rem solid #fff;
}
#header .inner #navigation .list01 > li + li{
margin: 0;
padding: 0;
}
#header .inner #navigation .list01 > li:first-child{
border-top: 0.25rem solid #fff;
}
#header .inner #navigation .list01 > li > a,
#header .inner #navigation .list01 > li > span{
text-align: center;
padding: 1.5rem 0;
position: relative;
}
#header .inner #navigation .list01 > li > span::before{
content: "";
width: 1.0rem;
height: 0.2rem;
background: #fff;
border-radius: 100px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#header .inner #navigation .list01 > li > span::after{
content: "";
width: 1.0rem;
height: 0.2rem;
background: #fff;
border-radius: 100px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
transition: 0.3s;
}
#header .inner #navigation .list01 > li > span.active{
color: #5AC4FA;
}
#header .inner #navigation .list01 > li > span.active::before{
background: #5AC4FA;
}
#header .inner #navigation .list01 > li > span.active::after{
transform: translateY(-50%) rotate(90deg);
opacity: 0;
}
#header .inner #navigation .list01 > li > a::before{
content: "";
width: 1.0rem;
height: 1.2rem;
background: url("/wp-content/themes/divehope/assets/images/common/common_ico_01_white.webp") top center / 100% auto no-repeat;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#header .inner #navigation .list01 > li + li::before{
display: none;
}
#header .inner #navigation .list01 .item{
width: 100%;
padding: 0;
position: static;
display: none;
}
#header .inner #navigation .list02{
background: rgba(51,51,51,0.7);
border-top: 0.25rem solid #fff;
border-radius: 0;
padding: 0 2.5rem;
}
#header .inner #navigation .list02::before{
display: none;
}
#header .inner #navigation .list02 > li + li{
border-top: 0.2rem solid rgba(255,255,255,0.3);
}
#header .inner #navigation .list02 > li > a{
padding: 1.5rem 0;
}
#header .inner #navigation .list02 > li > a::before{
width: 1.0rem;
height: 1.2rem;
right: -0.5rem;
}
}

/*----------------------------------------------------------
footer
----------------------------------------------------------*/
#footer{
background: url("/wp-content/themes/divehope/assets/images/common/footer_bg_01.webp") top right / cover no-repeat;
color: #fff;
}
#footer .block{
width: 1000px;
margin: 0 auto;
padding: 30px 0 40px;
display: flex;
}
#footer .block .box01{
width: 100px;
order: 3;
}
#footer .block .box01 .list{
display: flex;
}
#footer .block .box01 .list > li{
width: 40px;
}
#footer .block .box01 .list > li + li{
margin-left: 20px;
}
#footer .block .box02{
width: 230px;
order: 1;
}
#footer .block .box02 .text{
font-size: 1.4rem;
display: flex;
}
#footer .block .box02 .text span{
width: 40px;
display: block;
}
#footer .block .box03{
width: 670px;
order: 2;
}
#footer .block .box03 .text{
font-size: 1.4rem;
}
#footer .copy{
width: 1000px;
font-size: 1.0rem;
text-align: center;
border-top: 1px solid #fff;
margin: 0 auto;
padding: 8px 0;
}
@media (max-width: 768px){
#footer .block{
width: calc(100% - 3.0rem);
padding: 4.0rem 0 2.0rem;
display: block;
}
#footer .block .box01{
width: 100%;
margin: 0 0 2.5rem;
}
#footer .block .box01 .list > li{
width: 4.0rem;
}
#footer .block .box01 .list > li + li{
margin-left: 2.0rem;
}
#footer .block .box02{
width: 100%;
margin: 0 0 2.0rem;
}
#footer .block .box02 .text{
line-height: 1.8;
}
#footer .block .box02 .text span{
width: 4.0rem;
}
#footer .block .box03{
width: 100%;
}
#footer .block .box03 .text{
line-height: 1.8;
}
#footer .copy{
width: calc(100% - 3.0rem);
margin: 0 1.5rem;
padding: 1.5rem 0;
}
}

/*----------------------------------------------------------
wrap
----------------------------------------------------------*/
#wrap{
padding: 59px 0 0;
position: relative;
overflow: hidden;
}
@media (max-width: 768px){
#wrap{
padding: 6.5rem 0 0;
}
}

/*----------------------------------------------------------
float
----------------------------------------------------------*/
.float_reserve{
display: none;
}
@media (max-width: 768px){
.float_reserve{
display: block;
position: fixed;
right: 0;
bottom: 10.0rem;
z-index: 10;
transition: 0.3s;
}
.float_reserve a{
width: 6.5rem;
height: 6.5rem;
background: #15B583;
color: #fff;
font-size: 1.0rem;
font-weight: 600;
text-align: center;
border-radius: 1.0rem 0 0 1.0rem;
padding: 4.3rem 0 0;
display: block;
position: relative;
}
.float_reserve a::before{
content: "";
width: 3.4rem;
height: 3.2rem;
background: url("/wp-content/themes/divehope/assets/images/common/footer_ico_03.webp") top center / 100% auto no-repeat;
position: absolute;
left: 50%;
top: 0.8rem;
transform: translateX(-50%);
}
.float_reserve.active{
transform: translateX(100%);
}
}

.float_scroll{
position: fixed;
right: 40px;
bottom: 40px;
z-index: 9;
}
.float_scroll a{
width: 45px;
height: 45px;
background: #1E4290;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.float_scroll.active{
position: absolute;
}
@media (max-width: 768px){
.float_scroll{
right: 1.5rem;
bottom: 1.5rem;
}
.float_scroll a{
width: 5.0rem;
height: 5.0rem;
}
.float_scroll a img{
width: 2.1rem;
height: auto;
}
}

/*----------------------------------------------------------
hover
----------------------------------------------------------*/
@media (min-width: 769px){
a.hover01{
transition: 0.3s;
}
a.hover01:hover{
opacity: 0.7;
}
	
a.hover02,
a.hover02 *{
transition: 0.3s;
}
a.hover02:hover,
a.hover02:hover *{
color: #5AC4FA!important;
}
}

/*----------------------------------------------------------
bg
----------------------------------------------------------*/
.bg01{
background: #fff;
}
.bg02{
background: #EFF7FD;
}

.wave01,.wave02{
position: relative;
}
.wave01::before{
content: "";
width: 100%;
height: 25px;
background: url("/wp-content/themes/divehope/assets/images/common/common_wave_01_pc.webp") top center / auto 100% repeat-x;
position: absolute;
top: -24px;
z-index: 2;
}
.wave02::before{
content: "";
width: 100%;
height: 25px;
background: url("/wp-content/themes/divehope/assets/images/common/common_wave_02_pc.webp") top center / auto 100% repeat-x;
position: absolute;
top: -24px;
z-index: 2;
}
@media (max-width: 768px){
.wave01::before{
height: 2.4rem;
background: url("/wp-content/themes/divehope/assets/images/common/common_wave_01_sp.webp") top center / auto 100% repeat-x;
top: -2.3rem;
}
.wave02::before{
height: 2.4rem;
background: url("/wp-content/themes/divehope/assets/images/common/common_wave_02_sp.webp") top center / 100% 100% no-repeat;
top: -2.3rem;
}
}

/*----------------------------------------------------------
section
----------------------------------------------------------*/
section .secInner01{
width: 1000px;
margin: 0 auto;
}
@media (max-width: 768px){
section .secInner01{
width: calc(100% - 3.0rem);
}
}

/*----------------------------------------------------------
header
----------------------------------------------------------*/
.breadcrumb{
width: 1000px;
margin: 0 auto;
padding: 25px 0 50px;
display: flex;
flex-wrap: wrap;
}
.breadcrumb.type02{
padding-bottom: 25px;
}
.breadcrumb > li{
font-size: 1.4rem;
margin: 0 20px 0 0;
display: inline-block;
position: relative;
}
.breadcrumb > li::before{
content: ">";
position: absolute;
right: -14px;
}
.breadcrumb > li:last-child{
color: #1E4290;
font-weight: 600;
margin-right: 0;
}
.breadcrumb > li:last-child::before{
display: none;
}
@media (max-width: 768px){
.breadcrumb{
width: calc(100% - 3.0rem);
padding: 2.5rem 0 5.0rem;
}
.breadcrumb.type02{
padding-bottom: 2.5rem;
}
.breadcrumb > li{
margin: 0 1.7rem 0 0;
}
.breadcrumb > li::before{
content: ">";
right: -1.3rem;
}
}

/*----------------------------------------------------------
title
----------------------------------------------------------*/
.titleTypeA01{
font-size: 1.2rem;
font-weight: 600;
text-align: center;
margin: 0 0 25px;
padding: 0 0 24px;
position: relative;
}
.titleTypeA01 span{
font-size: 2.0rem;
margin: 0 0 3px;
display: block;
}
.titleTypeA01::before{
content: "";
width: 52px;
height: 8px;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.titleTypeA01.color01{
color: #707070;
}
.titleTypeA01.color01{
color: #333;
}
.titleTypeA01.color01::before{
background: url("/wp-content/themes/divehope/assets/images/common/common_border_01_black.webp") top center / 100% auto no-repeat;
}
.titleTypeA01.color02{
color: #ddd;
}
.titleTypeA01.color02 span{
color: #fff;
}
.titleTypeA01.color02::before{
background: url("/wp-content/themes/divehope/assets/images/common/common_border_01_white.webp") top center / 100% auto no-repeat;
}
@media (max-width: 768px){
.titleTypeA01{
font-size: 1.4rem;
margin: 0 0 3.5rem;
padding: 0 0 2.6rem;
}
.titleTypeA01 span{
font-size: 2.4rem;
margin: 0;
}
.titleTypeA01::before{
width: 6.3rem;
height: 1.0rem;
}
}

/*----------------------------------------------------------
button
----------------------------------------------------------*/
.btnTypeA01{
text-align: center;
}
.btnTypeA01 a{
background: #15B583;
color: #fff;
font-size: 1.4rem;
font-weight: 600;
border: 1px solid #15B583;
border-radius: 100px;
padding: 13px 40px;
display: inline-block;
position: relative;
transition: 0.3s;
}
.btnTypeA01 a::before{
content: "";
width: 10px;
height: 12px;
background: url("/wp-content/themes/divehope/assets/images/common/common_ico_01_white.webp") top center / 100% auto no-repeat;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
@media (min-width: 769px){
.btnTypeA01 a:hover{
background: #fff;
color: #15B583;
}
.btnTypeA01 a:hover::before{
background: url("/wp-content/themes/divehope/assets/images/common/common_ico_01_green.webp") top center / 100% auto no-repeat;
}
}
@media (max-width: 768px){
.btnTypeA01 a{
font-size: 1.6rem;
padding: 1.3rem 4.0rem;
}
.btnTypeA01 a::before{
width: 12px;
height: 14px;
right: 1.5rem;
}
}

.btnTypeB01{
text-align: center;
}
.btnTypeB01 a{
background: #fff;
color: #1E4290;
font-size: 1.4rem;
font-weight: 600;
border: 1px solid #1E4290;
border-radius: 100px;
padding: 13px 40px;
display: inline-block;
position: relative;
transition: 0.3s;
}
.btnTypeB01 a::before{
content: "";
width: 10px;
height: 12px;
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%);
}
@media (min-width: 769px){
.btnTypeB01 a:hover{
background: #EFF7FD;
}
}
@media (max-width: 768px){
.btnTypeB01 a{
font-size: 1.6rem;
padding: 1.3rem 4.0rem;
}
.btnTypeB01 a::before{
width: 12px;
height: 14px;
right: 1.5rem;
}
}

/*----------------------------------------------------------
block
----------------------------------------------------------*/
.scheduleBlock01{
padding: 75px 0 80px;
}
.scheduleBlock01 .lead{
font-size: 1.4rem;
text-align: center;
margin: 0 0 25px;
}
.scheduleBlock01 .block01{
width: 350px;
margin: 0 auto 30px;
}
.scheduleBlock01 .block01 iframe{
width: 100%;
height: 350px;
}
@media (max-width: 768px){
.scheduleBlock01{
padding: 7.5rem 0 10.0rem;
}
.scheduleBlock01 .lead{
font-size: 1.6rem;
margin: 0 0 2.5rem;
}
.scheduleBlock01 .block01{
width: 100%;
margin: 0 auto 3.0rem;
}
.scheduleBlock01 .block01 iframe{
height: 35.0rem;
}
}