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

/*----------------------------------------------------------
title
----------------------------------------------------------*/
.titleTypeA01{
color: #082950;
font-size: 3.9rem;
font-weight: bold;
text-align: center;
line-height: 1.0;
letter-spacing: 3px;
margin: 0 0 60px;
padding: 0;
}
@media (max-width: 768px){
.titleTypeA01{
font-size: 2.4rem;
line-height: 1.6;
margin: 0 0 2.0rem;
}
}

/*----------------------------------------------------------
button
----------------------------------------------------------*/
.btnTypeA01{
text-align: center;
margin: 0 auto;
}
.btnTypeA01 .btn{
margin: 0 0 10px;
}
.btnTypeA01 .btn a{
background: #ff9300;
color: #fff;
font-size: 2.4rem;
font-weight: bold;
line-height: 1.0;
border-bottom: 5px solid #ef5000;
border-radius: 5px;
padding: 25px 80px 22px;
display: inline-block;
position: relative;
}
.btnTypeA01 .btn.line a{
background: #00b900;
border-bottom: 5px solid #058c2d;
}
.btnTypeA01 .btn a::before{
content: "";
width: 12px;
height: 12px;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
position: absolute;
right: 20px;
top: 50%;
margin-top: -8px;
transform: rotate(45deg);
}
.btnTypeA01 .notes{
font-size: 1.6rem;
}
.btnTypeA01 .login a{
color: #082950;
font-size: 1.6rem;
text-decoration: underline;
padding: 0 0 0 17px;
display: inline-block;
position: relative;
}
.btnTypeA01 .login a::before{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #082950;
position: absolute;
left: 0;
top: 7px;
}
@media (max-width: 768px){
.btnTypeA01 .btn{
margin: 0 0 0.8rem;
}
.btnTypeA01 .btn a{
font-size: 1.8rem;
border-bottom: 0.5rem solid #ef5000;
border-radius: 0.5rem;
padding: 2.0rem 1.0rem 1.7rem 0;
display: block;
}
.btnTypeA01 .btn.line a{
border-bottom: 0.5rem solid #058c2d;
}
.btnTypeA01 .btn a::before{
width: 0.8rem;
height: 0.8rem;
border-right: 2px solid #fff;
border-top: 2px solid #fff;
right: 1.5rem;
margin-top: -0.4rem;
}
.btnTypeA01 .notes{
font-size: 1.2rem;
}
.btnTypeA01 .login a{
font-size: 1.2rem;
padding: 0 0 0 1.5rem;
}
.btnTypeA01 .login a::before{
border-width: 0.6rem 0 0.6rem 1.0rem;
top: 7px;
}
}

@media (min-width: 769px){
.btn a:hover{
background: #ffad00!important;
}
.line .btn a:hover,
.line.btn a:hover{
background: #1bdd1b!important;
}
}

/*----------------------------------------------------------
mv
----------------------------------------------------------*/
#mainVisual{
width: 100%;
position: relative;
overflow: hidden;
}
#mainVisual .inner{
width: 890px;
height: 605px;
margin: 0 auto;
padding: 40px 0 0;
position: relative;
z-index: 10;
}
#mainVisual .inner::before{
content: "";
width: 210px;
height: 268px;
background: url("../img/webp/top/mv_img_01.webp") no-repeat;
background-size: 100% auto;
position: absolute;
left: 50px;
    bottom: 20px;
}
#mainVisual .inner .title{
text-align: center;
margin: 0 0 50px;
}
#mainVisual .inner .title img{
width: 697px;
}
#mainVisual .inner .text01{
text-align: center;
margin: 0 auto 40px;
}
#mainVisual .inner .text01 img{
width: 507px;
}
#mainVisual .inner .text02{
text-align: right;
margin: 0 auto 40px;
padding: 0 7px 0 0;
}
#mainVisual .inner .text02 img{
width: 580px;
}
#mainVisual .inner .btn{
text-align: right;
}
#mainVisual .inner .btn a{
background: #ff9300;
color: #fff;
font-size: 3.2rem;
font-weight: bold;
line-height: 1.0;
border-bottom: 7px solid #ef5000;
border-radius: 5px;
padding: 33px 70px 33px 25px;
display: inline-block;
position: relative;
}
#mainVisual .inner .btn a::before{
content: "";
width: 20px;
height: 20px;
border-right: 3px solid #fff;
border-top: 3px solid #fff;
position: absolute;
right: 30px;
top: 50%;
margin-top: -12px;
transform: rotate(45deg);
}
#mainVisual .inner .btn a span{
font-size: 2.8rem;
margin: 0 10px 0 0;
display: inline-block;
}
#mainVisual .inner .btn a b{
font-size: 3.8rem;
}
#mainVisual .inner .login{
text-align: center;
margin: 10px 0 0 300px;
}
#mainVisual.line .inner .btn a{
background: #00b900;
text-align: center;
border-bottom: 7px solid #058c2d;
padding: 33px 70px;
}
#mainVisual.line .inner .btn a span{
margin: 0 0 10px;
display: block;
}
#mainVisual .inner .login a{
color: #fff;
font-size: 1.8rem;
text-decoration: underline;
padding: 0 0 0 17px;
display: inline-block;
position: relative;
}
#mainVisual .inner .login a::before{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
left: 0;
top: 7px;
}
/* -- particle animation -- */
#mainVisual .particls_bg{
position: absolute;
top: 0;
left: 0;
z-index: 1;
overflow: hidden;
}
#mainVisual .bg_cover{
width: 100%;
height: 605px;
background: rgba(0,0,0,0.4);
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
@media (max-width: 768px){
#mainVisual .inner{
width: 100%;
height: 40.0rem;
padding: 2.0rem 0 0;
}
#mainVisual.line .inner{
height: 39.0rem;
}
#mainVisual .inner::before{
width: 13.3rem;
height: 17.0rem;
left: 1.0rem;
bottom: 0;
}
#mainVisual.line .inner::before{
left: 1.5rem;
}
#mainVisual .inner .title{
margin: 0 0 2.0rem;
padding: 0 3.0rem;
}
#mainVisual .inner .title img{
width: 100%;
}
#mainVisual .inner .text01{
margin: 0 auto 1.5rem;
padding: 0 4.75rem;
}
#mainVisual .inner .text01 img{
width: 100%;
}
#mainVisual .inner .text02{
margin: 0 3.0rem 3.0rem;
padding: 0;
}
#mainVisual .inner .text02 img{
width: 100%;
}
#mainVisual .inner .btn{
padding: 0 8.9% 0 40.8%;
}
#mainVisual .inner .btn a{
font-size: 2.0rem;
text-align: center;
line-height: 1.4;
border-bottom: 1.0rem solid #ef5000;
border-radius: 0.5rem;
padding: 1.5rem 2.0rem 1.2rem 0;
display: block;
}
#mainVisual .inner .btn a::before{
width: 1.6rem;
height: 1.6rem;
right: 1.5rem;
margin-top: -0.8rem;
}
#mainVisual .inner .btn a span{
font-size: 1.8rem;
margin: 0;
display: block;
}
#mainVisual .inner .btn a b{
font-size: 2.3rem;
}
#mainVisual.line .inner .btn{
padding: 0 4% 0 35%;
}
#mainVisual.line .inner .btn a{
border-bottom: 1.0rem solid #058c2d;
padding: 1.5rem 0 1.2rem;
}
#mainVisual.line .inner .btn a span{
font-size: 1.5rem;
margin: 0 0 0.5rem;
}
#mainVisual.line .inner .btn a b{
font-size: 2.4rem;
}
#mainVisual .inner .login{
margin: 0.5rem 0 0;
padding: 0 8.9% 0 40.8%;
}
#mainVisual .inner .login a{
font-size: 1.4rem;
padding: 0 0 0 1.5rem;
}
#mainVisual .inner .login a::before{
border-width: 0.6rem 0 0.6rem 1.0rem;
top: 7px;
}
/* -- particle animation -- */
#mainVisual .bg_cover{
height: 40.0rem;
}
}

/*----------------------------------------------------------
section
----------------------------------------------------------*/
.sectionA01{
width: 100%;
height: 220px;
background: url("../img/webp/top/secA01_bg_01.webp");
position: relative;
}
.sectionA01::before{
content: "";
width: 973px;
height: 108px;
background: url("../img/webp/top/secA01_img_01_pc.webp") no-repeat;
background-size: 100% auto;
position: absolute;
left: 50%;
bottom: 0;
margin-left: -486.5px;
}
.sectionA01 .text{
width: 890px;
position: absolute;
left: 50%;
top: -25px;
margin-left: -445px;
z-index: 10;
}
.sectionA01 .text::after{
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 14px 7px 0 7px;
border-color: #ffffff transparent transparent transparent;
position: absolute;
left: 50%;
bottom: -13px;
margin-left: -7px;
}
.sectionA01 .text span{
background: #fff;
color: #ff6f00;
font-size: 36px;
text-align: center;
line-height: 1.0;
letter-spacing: 3px;
border-radius: 10px;
padding: 25px 0 30px;
display: block;
}
.sectionA01 .text span b{
font-weight: normal;
display: inline-block;
position: relative;
}
.sectionA01 .text span b::before{
content: "";
width: 100%;
height: 8px;
background: url("../img/webp/top/secA01_ico_01.webp") repeat-x;
background-size: auto 100%;
position: absolute;
left: 0;
bottom: -12px;
}
@media (max-width: 768px){
.sectionA01{
height: 17.0rem;
background: url("../img/webp/top/secA01_img_01_sp.webp") no-repeat;
background-size: cover;
background-position: bottom center;
}
.sectionA01::before{
display: none;
}
.sectionA01 .text{
width: 100%;
text-align: center;
left: 0;
top: -1.3rem;
margin-left: 0;
}
.sectionA01 .text::after{
border-width: 1.4rem 0.7rem 0 0.7rem;
bottom: -13px;
margin-left: -7px;
}
.sectionA01 .text span{
font-size: 1.5rem;
letter-spacing: 1px;
border-radius: 0.5rem;
padding: 1.5rem 2.3rem;
display: inline-block;
}
.sectionA01 .text span b::before{
height: 0.4rem;
bottom: -0.7rem;
}
}

.sectionB01{
width: 100%;
background: url("../img/webp/top/secB01_bg_01.webp");
padding: 70px 0;
}
.sectionB01 .secInner{
width: 1000px;
margin: 0 auto 60px;
display: flex;
position: relative;
z-index: 1;
}
.sectionB01 .secInner .textBlock{
width: 620px;
padding: 20px 0 0 60px;
order: 2;
}
.sectionB01 .secInner .textBlock .image{
display: none;
}
.sectionB01 .secInner .textBlock .text{
color: #082950;
font-size: 1.6rem;
line-height: 1.8;
}
.sectionB01 .secInner .textBlock .text + .text{
margin-top: 25px;
}
.sectionB01 .secInner .imageBlock{
width: 380px;
order: 1;
}
.sectionB01 .secInner .imageBlock .text{
color: #082950;
font-size: 1.6rem;
font-weight: bold;
text-align: right;
position: absolute;
right: 0;
bottom: 0;
}
.sectionB01 .secInner .imageBlock .text::before{
content: "";
width: 160px;
height: 170px;
background: url("../img/webp/top/secB01_img_02.webp") no-repeat;
background-size: 100% auto;
position: absolute;
right: -105px;
bottom: -10px;
z-index: -1;
}
@media (max-width: 768px){
.sectionB01{
background-size: 3.8rem 3.8rem;
padding: 4.0rem 0 2.0rem;
}
.sectionB01 .secInner{
width: 100%;
margin: 0 auto 4.0rem;
padding: 0 1.5rem;
display: block;
}
.sectionB01 .secInner .textBlock{
width: 100%;
padding: 0;
order: 1;
}
.sectionB01 .secInner .textBlock .image{
width: 11.5rem;
margin: 0 -0.8rem 0px 0.5rem;
float: right;
display: inline-block;
}
.sectionB01 .secInner .textBlock .text{
font-size: 1.2rem;
}
.sectionB01 .secInner .textBlock .text + .text{
margin-top: 1.5rem
}
.sectionB01 .secInner .imageBlock{
width: 100%;
margin: 4.0rem 0 0;
order: 2;
}
.sectionB01 .secInner .imageBlock .image{
margin: 0 0 3.0rem;
}
.sectionB01 .secInner .imageBlock .text{
font-size: 1.4rem;
text-align: left;
padding: 0 1.5rem;
position: relative;
}
.sectionB01 .secInner .imageBlock .text::before{
width: 14.9rem;
height: 15.7rem;
background: url("../img/webp/top/secB01_img_02.webp") no-repeat;
background-size: 100% auto;
right: 0;
bottom: -2.3rem;
}
.sectionB01 .btnTypeA01{
padding: 0 1.5rem;
}
}

.sectionC01{
width: 100%;
background: #d9f0ee;
text-align: center;
padding: 100px 0;
}
.sectionC01 .list{
margin: 0 auto 60px;
display: inline-block;
position: relative;
}
.sectionC01 .list > li{
color: #082950;
font-size: 1.9rem;
text-align: left;
margin: 0 0 15px;
padding: 0 0 0 40px;
position: relative;
}
.sectionC01 .list > li::before{
content: "";
width: 30px;
height: 26px;
background: url("../img/webp/top/secC01_ico_01.webp") no-repeat;
background-size: 100% auto;
position: absolute;
left: 0;
top: 0;
}
.sectionC01 .text{
color: #082950;
font-size: 2.8rem;
font-weight: bold;
}
@media (max-width: 768px){
.sectionC01{
padding: 4.0rem 0 5.0rem;
}
.sectionC01 .list{
margin: 0 auto 4.0rem;
}
.sectionC01 .list > li{
font-size: 1.1rem;
margin: 0 0 1.0rem;
padding: 0 0 0 2.5rem;
}
.sectionC01 .list > li::before{
width: 2.0rem;
height: 1.7rem;
top: -0.1rem;
}
.sectionC01 .text{
font-size: 1.6rem;
}
}


.sectionD01{
width: 100%;
background: #ffe286;
padding: 50px 0 60px;
position: relative;
}
.sectionD01::before{
content: "";
width: 50%;
height: 170px;
background: #fff0b9;
-webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
clip-path: polygon(100% 50%, 0 0, 0 100%);
position: absolute;
left: 0;
top: -85px;
z-index: 2;
}
.sectionD01::after{
content: "";
width: 50%;
height: 170px;
background: #fff0b9;
-webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
clip-path: polygon(0 50%, 100% 0, 100% 100%);
position: absolute;
right: 0;
top: -85px;
z-index: 2;
}
.sectionD01 .secInner{
width: 853px;
background: url("../img/webp/top/secD01_bg_02_pc.webp"),url("../img/webp/top/secD01_bg_01_pc.webp");
background-repeat: no-repeat,no-repeat;
background-size: 100% auto,100% auto;
background-position: bottom center,top center;
margin: 0 auto 20px;
padding: 20px 110px 70px;
}
.sectionD01 .secInner .title{
width: 225px;
color: #082950;
font-size: 1.9rem;
font-weight: bold;
text-align: center;
line-height: 1.6;
margin: 0 auto 30px;
padding: 65px 0 0;
position: relative;
}
.sectionD01 .secInner .title::before{
content: "";
width: 15px;
height: 22px;
background: url("../img/webp/top/secD01_ico_01.webp") no-repeat;
background-size: 100% auto;
position: absolute;
left: 50%;
top: 30px;
margin-left: -7.5px;
}
.sectionD01 .secInner .text01{
olor: #082950;
font-size: 1.3rem;
line-height: 1.8;
}
.sectionD01 .secInner .text02{
color: #082950;
font-size: 1.2rem;
line-height: 1.8;
padding: 0 125px 0 0;
position: relative;
}
.sectionD01 .secInner .text02::before{
content: "";
width: 101px;
height: 101px;
background: url("../img/webp/top/secD01_img_02.webp") no-repeat;
background-size: 100% auto;
position: absolute;
right: 5px;
bottom: -12px;
}
.sectionD01 .secInner .image{
width: 510px;
margin: 0 auto;
}
@media (max-width: 768px){
.sectionD01{
padding: 4.0rem 0;
}
.sectionD01::before{
height: 7.0rem;
top: -3.5rem;
}
.sectionD01::after{
height: 7.0rem;
top: -3.5rem;
}
.sectionD01 .btnTypeA01{
padding: 0 1.5rem;
}
.sectionD01 .secInner{
width: 100%;
background: url("../img/webp/top/secD01_bg_02_sp.webp"),url("../img/webp/top/secD01_bg_01_sp.webp");
background-repeat: no-repeat,no-repeat;
background-size: 100% auto,100% auto;
background-position: bottom center,top center;
margin: 0 auto 0.5rem;
padding: 3.0rem 0 4.0rem;
}
.sectionD01 .secInner .title{
width: 100%;
font-size: 1.45rem;
margin: 0 auto 1.5rem;
padding: 3.0rem 0 0;
}
.sectionD01 .secInner .title::before{
width: 1.3rem;
height: 2.0rem;
top: 0;
margin-left: -0.65rem;
}
.sectionD01 .secInner .text01{
font-size: 1.2rem;
padding: 0 3.0rem;
}
.sectionD01 .secInner .text02{
font-size: 1.05rem;
padding: 0 3.0rem;
}
.sectionD01 .secInner .text02::before{
width: 8.6rem;
height: 8.5rem;
right: 3.0rem;
bottom: 0;
}
.sectionD01 .secInner .image{
width: 100%;
padding: 0 2.0rem;
}
}

.sectionE01{
width: 100%;
background: #f2f2e9;
padding: 120px 0 55px;
}
.sectionE01 .title{
text-align: center;
margin: 0 0 65px;
}
.sectionE01 .title span{
color: #082950;
font-size: 3.0rem;
text-align: center;
line-height: 1.4;
letter-spacing: 3px;
display: inline-block;
position: relative;
}
.sectionE01 .title span::before{
content: "";
width: 100px;
height: 108px;
background: url("../img/webp/top/secE01_ico_01.webp") no-repeat;
background-size: 100% auto;
position: absolute;
left: -134px;
top: -47px;
}
.sectionE01 .title span::after{
content: "";
width: 80px;
height: 104px;
background: url("../img/webp/top/secE01_ico_02.webp") no-repeat;
background-size: 100% auto;
position: absolute;
right: -107px;
top: -42px;
}
.sectionE01 .list{
width: 918px;
margin: 0 auto 70px;
}
.sectionE01 .list > li{
width: 306px;
text-align: center;
float: left;
}
.sectionE01 .list > li .image{
width: 228px;
margin: 0 auto 15px;
}
.sectionE01 .list > li .text{
color: #082950;
font-size: 1.4rem;
text-align: center;
line-height: 1.6;
margin: 0;
padding: 0;
}
.sectionE01 .list > li .text b{
color: #f46003;
font-weight: normal;
}
@media (max-width: 768px){
.sectionE01{
padding: 5.0rem 0 4.0rem;
}
.sectionE01 .btnTypeA01{
padding: 0 1.5rem;
}
.sectionE01 .title{
margin: 0 0 3.0rem;
}
.sectionE01 .title span{
font-size: 2.0rem;
padding: 0 0 0 1.2rem;
}
.sectionE01 .title span::before{
width: 6.0rem;
height: 6.5rem;
left: -6.6rem;
top: -3.3rem;
}
.sectionE01 .title span::after{
width: 4.7rem;
height: 6.0rem;
right: -5.8rem;
top: -2.4rem;
}
.sectionE01 .list{
width: 100%;
margin: 0 auto 2.0rem;
padding: 0 1.5rem;
}
.sectionE01 .list > li{
width: 100%;
padding: 0 0 1.0rem;
float: none;
display: table;
}
.sectionE01 .list > li:last-child{
padding-bottom: 0;
}
.sectionE01 .list > li .image{
width: 48%;
margin: 0;
display: table-cell;
vertical-align: middle;
}
.sectionE01 .list > li .text{
width: 52%;
font-size: 1.1rem;
text-align: left;
padding: 0 0 0 1.5rem;
display: table-cell;
vertical-align: middle;
}
}