@charset "utf-8";

/*----------------------------------------------------------
wrap
----------------------------------------------------------*/
#wrapper{
padding: 55px 0 0;
}
@media (max-width: 768px){
#wrapper{
padding: 4.6rem 0 0;
}
}

.contents01{
width: 1000px;
margin: 0 auto;
padding: 80px 0;
}
@media (max-width: 768px){
.contents01{
width: 100%;
padding: 4.0rem 2.0rem;
}
}

/*----------------------------------------------------------
header
----------------------------------------------------------*/
.drawer-overlay{
background: rgba(0,0,0,0.4);
z-index: 2;
}
#header{
width: 100%;
background: var(--color_blue01);
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
padding: 10px 20px;
position: fixed;
left: 0;
top: 0;
z-index: 10;
}
#header .hamburger01{
width: 40px;
height: 30px;
padding: 0;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
#header .hamburger01::before{
content: "";
width: 100%;
height: 4px;
background: #fff;
border-radius: 100px;
position: absolute;
right: 0;
top: 0;
transition: 0.3s;
}
#header .hamburger01::after{
content: "";
width: 100%;
height: 4px;
background: #fff;
border-radius: 100px;
position: absolute;
right: 0;
bottom: 0;
transition: 0.3s;
}
#header .hamburger01 span{
width: 100%;
height: 100%;
transition: 0.3;
}
#header .hamburger01 span::before{
content: "";
width: 100%;
height: 4px;
background: #fff;
border-radius: 100px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.drawer-open #header .hamburger01 span::before{
opacity: 0;
}
.drawer-open #header .hamburger01::before{
background: var(--color_blue01)!important;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.drawer-open #header .hamburger01::after{
background: var(--color_blue01)!important;
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
.drawer--right .drawer-nav{
overflow: auto;
right: -400px;
}
.drawer-nav{
width: 400px;
}
#header #gnav{
background: var(--color_blue02);
padding: 60px 20px 20px;
}
#header #gnav .menu01{
margin: 0 0 30px;
}
#header #gnav .menu01 > li a{
font-size: 1.6rem;
font-weight: bold;
border-bottom: 1px solid var(--color_blue01);
padding: 17px 20px 15px 38px;
display: block;
position: relative; 
}
#header #gnav .menu01 > li a::before{
content: "";
width: 26px;
height: 24px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
#header #gnav .menu01 > li.ico_house a::before{
background: url("/assets/images/common/menu_ico_house01.webp") top center / 100% auto no-repeat;
}
#header #gnav .menu01 > li.ico_book a::before{
background: url("/assets/images/common/menu_ico_book01.webp") top center / 100% auto no-repeat;
}
#header #gnav .menu01 > li.ico_star a::before{
background: url("/assets/images/common/menu_ico_star01.webp") top center / 100% auto no-repeat;
}
#header #gnav .menu01 > li.ico_question a::before{
background: url("/assets/images/common/menu_ico_question01.webp") top center / 100% auto no-repeat;
}
#header #gnav .menu01 > li.ico_airplane a::before{
background: url("/assets/images/common/menu_ico_airplane01.webp") top center / 100% auto no-repeat;
}
#header #gnav .menu01 > li a::after{
content: "";
width: 10px;
height: 12px;
background: var(--color_blue01);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#header #gnav .btn01 a{
background: linear-gradient(#1fbab1,#25c071);
color: #fff;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
padding: 20px 0;
display: block;
position: relative;
}
#header #gnav .btn01 a::before{
content: "";
width: 10px;
height: 12px;
background: #fff;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
#header #gnav .btn01 a img{
margin: 4px auto 0;
display: block;
}
@media (max-width: 768px){
#header{
width: 100%;
box-shadow: 0 0.5rem 1.0rem rgba(0,0,0,0.2);
padding: 1.0rem 2.0rem;
}
#header .logo01 a img{
width: 10.0rem;
height: auto;
}
#header .hamburger01{
width: 3.0rem;
height: 2.3rem;
right: 2.0rem;
}
#header .hamburger01::before,
#header .hamburger01::after,
#header .hamburger01 span::before{
height: 0.2rem;
}
.drawer--right .drawer-nav{
right: -100%;
}
.drawer-nav{
width: 100%;
}
#header #gnav{
background: var(--color_blue02);
padding: 6.0rem 2.0rem 2.0rem;
}
#header #gnav .menu01{
margin: 0 0 2.0rem;
}
#header #gnav .menu01 > li a{
padding: 1.2rem 2.0rem 1.0rem 3.5rem;
}
#header #gnav .menu01 > li a::before{
width: 2.0rem;
height: 1.8rem;
}
#header #gnav .menu01 > li a::after{
width: 0.9rem;
height: 1.0rem;
}
#header #gnav .btn01 a{
font-size: 1.4rem;
padding: 1.5rem 0 1.3rem;
}
#header #gnav .btn01 a::before{
width: 0.9rem;
height: 1.0rem;
right: 1.0rem;
}
#header #gnav .btn01 a img{
width: 25.0rem;
height: auto;
margin: 0.6rem auto 0;
}
}

/* clarity */
html[clarity-highlight] #gnav{
display: none!important;
}

/*----------------------------------------------------------
footer
----------------------------------------------------------*/
#footer{
background: #002e45;
}
#footer .footerInner{
width: 1000px;
margin: 0 auto;
padding: 60px 0;
}
#footer .footerInner .btn01{
text-align: center;
margin: 0 0 30px;
}
#footer .footerInner .btn01 a{
background: #fff;
color: var(--color_blue01);
font-size: 2.0rem;
font-weight: bold;
border-radius: 100px;
padding: 17px 60px 15px 100px;
display: inline-block;
position: relative;
}
#footer .footerInner .btn01 a::before{
content: "";
width: 36px;
height: 30px;
background: url("/assets/images/common/menu_ico_airplane01.webp") top center / 100% auto no-repeat;
position: absolute;
left: 50px;
top: 50%;
transform: translateY(-50%);
}
#footer .footerInner .list01{
margin: 0 0 30px;
display: flex;
align-items: center;
justify-content: center;
}
#footer .footerInner .list01 > li.logo01{
margin: 0 60px 0 0;
}
#footer .footerInner .list01 > li a{
display: block;
}
#footer .footerInner .list02{
display: flex;
align-items: center;
justify-content: center;
}
#footer .footerInner .list02 > li{
padding: 0 30px;
position: relative;
}
#footer .footerInner .list02 > li::before{
content: "";
width: 1px;
height: 15px;
background: #fff;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#footer .footerInner .list02 > li:last-child::before{
display: none;
}
#footer .footerInner .list02 > li a{
color: #fff;
font-size: 1.6rem;
text-decoration: underline;
}
#footer .copyright{
background: var(--color_black01);
color: #fff;
font-size: 1.2rem;
text-align: center;
padding: 15px 0 13px;
}
@media (max-width: 768px){
#footer .footerInner{
width: 100%;
padding: 3.0rem 0;
}
#footer .footerInner .btn01{
margin: 0 0 2.5rem;
}
#footer .footerInner .btn01 a{
font-size: 1.6rem;
padding: 1.5rem 3.5rem 1.2rem 6.0rem;
}
#footer .footerInner .btn01 a::before{
width: 2.0rem;
height: 1.8rem;
left: 3.0rem;
}
#footer .footerInner .list01{
margin: 0 0 2.5rem;
}
#footer .footerInner .list01 > li.logo01{
margin: 0 3.0rem 0 0;
}
#footer .footerInner .list01 > li.logo01 a img{
width: 10.2rem;
height: auto;
}
#footer .footerInner .list01 > li.logo02 a img{
width: 15.0rem;
height: auto;
}
#footer .footerInner .list02 > li{
padding: 0 2.0rem;
}
#footer .footerInner .list02 > li::before{
height: 1.5rem;
}
#footer .footerInner .list02 > li a{
font-size: 1.2rem;
}
#footer .copyright{
font-size: 1.0rem;
padding: 1.5rem 0 1.3rem;
}
}

/*----------------------------------------------------------
breadcrumbs01
----------------------------------------------------------*/
.breadcrumbs01{
width: 100%;
padding: 20px 20px 0;
}
.breadcrumbs01 .list01{
display: flex;
flex-wrap: wrap;
}
.breadcrumbs01 .list01 > li{
font-size: 1.4rem;
margin: 0 10px 0 0;
padding: 0 15px 0 0;
position: relative;
}
.breadcrumbs01 .list01 > li::before{
content: "";
width: 7px;
height: 7px;
border-right: 1px solid var(--color_black01);
border-top: 1px solid var(--color_black01);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.breadcrumbs01 .list01 > li:last-child{
margin: 0;
padding: 0;
}
.breadcrumbs01 .list01 > li:last-child::before{
display: none;
}
.breadcrumbs01 .list01 > li a{
color: var(--color_blue01);
text-decoration: underline;
display: inline;
}
@media (max-width: 768px){
.breadcrumbs01{
padding: 1.5rem 2.0rem 0;
overflow-x: scroll;
word-break: keep-all;
white-space: nowrap;
}
.breadcrumbs01 .list01{
flex-wrap: nowrap;
}
.breadcrumbs01 .list01 > li{
font-size: 1.0rem;
margin: 0 1.0rem 0 0;
padding: 0 1.5rem 0 0;
display: inline-block;
}
.breadcrumbs01 .list01 > li::before{
width: 0.5rem;
height: 0.5rem;
}
}

/*----------------------------------------------------------
pageTopBtn
----------------------------------------------------------*/
#pageTopBtn{
position: fixed;
right: 30px;
bottom: 30px;
z-index: 2;
}
#pageTopBtn a{
width: 50px;
height: 50px;
background: rgba(0,0,0,0.5);
border-radius: 100px;
display: block;
position: relative;
cursor: pointer;
}
#pageTopBtn a::before{
content: "";
width: 25px;
height: 20px;
background: #fff;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
@media (max-width: 768px){
#pageTopBtn{
right: 1.0rem;
bottom: 1.0rem;
}
#pageTopBtn a{
width: 4.0rem;
height: 4.0rem;
}
#pageTopBtn a::before{
width: 1.8rem;
height: 1.5rem;
}
}

/*----------------------------------------------------------
title
----------------------------------------------------------*/
.titleTypeA01{
font-size: 2.6rem;
font-weight: bold;
text-align: center;
margin: 0 0 60px;
padding: 0 0 20px;
position: relative;
}
.titleTypeA01::before{
content: "";
width: 60px;
height: 6px;
background: var(--color_blue01);
border-radius: 100px;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
@media (max-width: 768px){
.titleTypeA01{
font-size: 2.0rem;
margin: 0 0 4.0rem;
padding: 0 0 2.0rem;
}
.titleTypeA01::before{
width: 5.0rem;
height: 0.6rem;
}
}

/*----------------------------------------------------------
button
----------------------------------------------------------*/
.btnTypeA01{
text-align: center;
}
.btnTypeA01 a{
background: linear-gradient(#ffc000, #ff9600);
color: #fff;
font-size: 2.0rem;
font-weight: bold;
border-radius: 100px;
padding: 15px 160px 13px;
display: inline-block;
position: relative;
}
.btnTypeA01 a::before{
content: "";
width: 14px;
height: 18px;
background: #fff;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 768px){
.btnTypeA01 a{
font-size: 1.8rem;
padding: 1.2rem 0 1.0rem;
display: block;
}
.btnTypeA01 a::before{
width: 1.0rem;
height: 1.2rem;
right: 2.0rem;
}
}