@charset "UTF-8";
/* =====================================
	全体設定
===================================== */

html{
    font-size: 62.5%;
}

a{
	color:#393939;
	text-decoration:none;
    transition: 0.3s all ease;
}

a:hover{
	opacity: 0.6;
}

.sp{
	display:none !important;
}

body{
	position: relative;
	margin: 0 auto;
    background: linear-gradient(90deg, #b0e0ff, #e6f4ff);
	font-size: 2.0rem;
	font-family: "Noto Sans JP", serif;
    font-weight: normal;
    font-style: normal;
	color: #393939;
    line-height: 1.67;
	text-align: left;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;/*Chrome,Safari*/
	-ms-text-size-adjust: 100%;/*EgdeMobile*/
	-moz-text-size-adjust: 100%;/*firefox*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "palt";
    letter-spacing: 0.02em;
}

img{
    max-width: 100%;
}

sup{
    font-size: 60%;
}


/* =====================================
	main
===================================== */

.left{
    width: calc((100% - 750px) / 2);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
}

.left a{
    width: 100%;
    max-width: 249px;
    margin-left: 5.520833vw;
}

.left a img{
    width: 100%;
}

.right{
    width: calc((100% - 750px) / 2);
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
}

.right ul{
    margin: 0 3.3854167vw 0 auto;
}

.right ul li{
    line-height: 1;
    margin-bottom: 30px;
}

.right ul li:nth-child(3){
    margin-bottom: 40px;
}

.right ul li:nth-child(4){
    margin-bottom: 15px;
}

.right ul li:last-child{
    margin-bottom: 0;
}

main{
    width: 750px;
    margin: 0 auto;
}

.visual{
    padding-bottom: 49px;
}

.visual h1 img{
    margin-bottom: 21px;
}

.btn-area{
    width: min(89.067vw, 668px);
    margin: 0 auto;
    background: rgba(255, 255, 255, .5);
    border-radius: 20px;
    box-shadow: 2px 2px 20px 0px rgba(5, 71, 154, .5);
    padding: 30px;
    display: flex;
    justify-content: space-between;
}

.btn-area li{
    width: 48.35526%;
}

#sec01{
    padding-top: 52px;
}

#sec01 .wrap{
    width: min(80vw, 600px);
    margin: 0 auto 80px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .5);
    position: relative;
    padding-bottom: 100px;
}

#sec01 .wrap .bg{
    width: 341px;
    height: 52px;
    position: absolute;
    top: -52px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

#sec01 .wrap .bg::before{
    content: "";
    display: inline-block;
    width: 341px;
    height: 341px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    position: absolute;
    top: 0;
    left: 0;
}

#sec01 .wrap h2 img{
    margin: 0 auto 48px;
    transform: translateY(-12px);
}

#sec01 .wrap ul li{
    position: relative;
    margin-bottom: 80px;
}

#sec01 .wrap ul li:last-child{
    margin-bottom: 0;
}

#sec01 .wrap ul li img{
    filter: drop-shadow(2px 2px 20px rgba(5,71,154,0.2));
}

#sec01 .wrap ul li img{
    margin: 0 -110px 0 auto;
    max-width: none;
}

#sec01 .wrap ul li:nth-child(odd) img{
    margin: 0 0 0 -110px;
}

#sec01 .wrap ul li:nth-child(1)::before{
    content: "";
    background: url("../img/illust01.png") no-repeat center;
    background-size: contain;
    width: 395px;
    height: 301px;
    position: absolute;
    top: 49px;
    right: -200px;
    z-index: 100;
}

#sec01 .wrap ul li:nth-child(2)::before{
    content: "";
    background: url("../img/illust02.png") no-repeat center;
    background-size: contain;
    width: 447px;
    height: 265px;
    position: absolute;
    top: 9px;
    left: -183px;
    z-index: 100;
}

#sec01 .wrap ul li:nth-child(3)::before{
    content: "";
    background: url("../img/illust03.png") no-repeat center;
    background-size: contain;
    width: 505px;
    height: 326px;
    position: absolute;
    top: -17px;
    right: -180px;
    z-index: 100;
}

#sec01 .wrap ul li:nth-child(4)::before{
    content: "";
    background: url("../img/illust04.png") no-repeat center;
    background-size: contain;
    width: 287px;
    height: 363px;
    position: absolute;
    top: -49px;
    left: -57px;
    z-index: 100;
}

#sec01 .wrap ul li:nth-child(5)::before{
    content: "";
    background: url("../img/illust05.png") no-repeat center;
    background-size: contain;
    width: 263px;
    height: 382px;
    position: absolute;
    top: -61px;
    right: -23px;
    z-index: 100;
}

#sec02{
    margin: 120px 30px 100px;
}

#sec02 .wrap{
    width: 668px;
    margin: 0 auto;
    border-radius: min(5.4945vw, 40px);
    filter: drop-shadow(2px 2px 20px rgba(5,71,154,0.5));
}

#sec02 .wrap .tab{
    width: 100%;
    display: flex;
}

#sec02 .wrap .tab li{
    cursor: pointer;
    position: relative;
}

#sec02 .wrap .tab li.active{
    cursor: default;
}

#sec02 .wrap .tab li:nth-child(1){
    width: 49.8503%;
}

#sec02 .wrap .tab li:nth-child(2){
    width: 50.1497%;
}

#sec02 .wrap .tab li img + img{
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.3s all ease;
}

#sec02 .wrap .tab li.active img + img{
    opacity: 0;
}

#sec02 .wrap .tab-cnt{
    width: 100%;
}

#sec02 .wrap .tab-cnt li{
    width: 100%;
    border-radius: 0 0 min(5.4945vw, 40px) min(5.4945vw, 40px);
    border: min(0.824176vw, 6px) solid #27beca;
    border-top: none;
    background: #fff;
    padding: 43px min(3.98352vw, 29px) 60px;
    display: none;
}

#sec02 .wrap .tab-cnt li.active{
    display: block;
}

#sec02 .wrap .tab-cnt li .more{
    cursor: pointer;
    margin: 39px auto 0;
}

#sec02 .wrap .tab-cnt li .more + div{
    display: none;
}

#sec02 .wrap .tab-cnt li .more + div img{
    margin-top: 30px;
}

#sec03 h2 img{
    margin: 0 auto;
}

#sec03 ul{
    margin: 60px auto 0;
    padding: 0 41px;
}

#sec03 ul li{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#sec03 ul li:nth-child(2){
    flex-direction: row-reverse;
    margin-top: 20px;
}

#sec03 ul li .txt-area{
    width: 59.88%;
}

#sec03 ul li:nth-child(2) .txt-area{
    width: 53.1437%;
}

#sec03 ul li .txt-area h3{
    margin-left: -10px;
}

#sec03 ul li .txt-area p{
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.67;
    margin-top: 14px;
}

#sec03 ul li .txt-area p strong{
    color: #ff6000;
    font-weight: 500;
    background: linear-gradient(transparent 20%, #fff 20%, #fff 88%, transparent 88%);
}

#sec03 ul li:nth-child(2) .img-area img{
    width: 260px;
}

#sec04 > p img{
    margin: 80px auto 0;
}

#sec04 .wrap{
    margin: -106px auto 80px;
    width: 600px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .5);
    padding: 126px 0 60px;
}

#sec04 .wrap img{
    margin: 0 auto;
}

#sec04 .wrap .txt01{
    padding: 30px;
}

#sec04 .wrap .txt01 img{
    margin: 50px auto 40px;
}

#sec04 .wrap .txt02{
    width: 112.33%;
}

#sec04 .wrap .txt02 img{
    width: 100%;
    margin-left: -6.165%;
}


/* =====================================
	footer
===================================== */

footer{
    width: 100%;
    padding: 42px 0;
    background: #fff;
    margin-top: 100px;
}

footer .wrap{
    width: 100%;
    max-width: 750px;
    padding: 0 51px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1;
    font-weight: 500;
    color: #1e003b;
}

footer .wrap .logo img{
    width: 252px;
    margin-top: 15px;
}

footer .wrap .sns{
    display: flex;
    align-items: center;
}

footer .wrap .sns dt{
    margin-right: 20px;
}

footer .wrap .sns dd:last-child{
    margin-left: 10px;
}

@media screen and (max-width:1400px){

.left{
    display: none;
}

.right{
    width: calc(100% - 790px);
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 100;
}

main{
    width: 750px;
    margin: 0 0 0 40px;
}

}

@media screen and (max-width:1100px){

.right{
    display: none;
}

main{
    margin: 0 auto;
}

}

@media screen and (max-width:768px){

.pc{
	display:none !important;
}

.sp{
	display:block !important;
}

a:hover{
	opacity: 1;
}

body{
    font-size: 2.67vw;
    width: 100%;
    overflow-x: hidden;
    letter-spacing: 0;
}

/* =====================================
	main
===================================== */

main{
    width: 100%;
    overflow-x: hidden;
}

.visual{
    padding-bottom: 6.533vw;
}

.visual h1 img{
    margin-bottom: 2.8vw;
}

.btn-area{
    width: 89.067vw;
    border-radius: 2.67vw;
    box-shadow: 0.267vw 0.267vw 2.67vw 0px rgba(5, 71, 154, .5);
    padding: 4vw;
}

#sec01{
    padding-top: 6.933vw;
}

#sec01 .wrap{
    width: 80vw;
    margin: 0 auto 10.67vw;
    border-radius: 5.33vw;
    padding-bottom: 13.33vw;
}

#sec01 .wrap .bg{
    width: 45.467vw;
    height: 6.933vw;
    top: -6.933vw;
}

#sec01 .wrap .bg::before{
    width: 45.467vw;
    height: 45.467vw;
}

#sec01 .wrap h2 img{
    margin: 0 auto 6.4vw;
    transform: translateY(-1.6vw);
    width: 56.133vw;
}

#sec01 .wrap ul li{
    margin-bottom: 10.67vw;
}

#sec01 .wrap ul li img{
    width: 86.533vw;
    filter: drop-shadow(0.267vw 0.267vw 2.67vw rgba(5, 71, 154, .5));
}

#sec01 .wrap ul li img{
    margin: 0 0 0 auto;
    transform: translateX(8.137vw);
}

#sec01 .wrap ul li:nth-child(odd) img{
    margin: 0 0 0 -14.67vw;
    transform: translateX(0);
}

#sec01 .wrap ul li:nth-child(1)::before{
    width: 52.67vw;
    height: 40.133vw;
    top: 6.533vw;
    right: -26.67vw;
}

#sec01 .wrap ul li:nth-child(2)::before{
  width: 59.6vw;
  height: 35.33vw;
  top: 1.2vw;
  left: -24.4vw;
}

#sec01 .wrap ul li:nth-child(3)::before{
  width: 60.597vw;
  height: 39.123vw;
  top: -2.27vw;
  right: -16vw;
}

#sec01 .wrap ul li:nth-child(4)::before{
  width: 38.27vw;
  height: 48.4vw;
  top: -6.53vw;
  left: -7.6vw;
}

#sec01 .wrap ul li:nth-child(5)::before{
  width: 35.07vw;
  height: 50.93vw;
  top: -8.13vw;
  right: -3.07vw;
}

#sec02{
    margin: 16vw 4vw 13.33vw;
}

#sec02 .wrap{
    width: 89.067vw;
    border-radius: 5.4945vw;
    filter: drop-shadow(0.267vw 0.267vw 2.67vw rgba(5, 71, 154, .5));
}

#sec02 .wrap .tab li{
    cursor: pointer;
}

#sec02 .wrap .tab li:nth-child(1){
    width: auto;
    height: 55.86666666666667vw;
}

#sec02 .wrap .tab li:nth-child(2){
    width: auto;
    height: 55.86666666666667vw;
}

#sec02 .wrap .tab-cnt li{
    border-radius: 0 0 5.4945vw 5.4945vw;
    border: 0.824176vw solid #27beca;
    border-top: none;
    padding: 5.733vw 3.98352vw 8vw;
}

#sec02 .wrap .tab-cnt li .more{
    margin: 5.2vw auto 0;
    width: 35.733vw;
}

#sec02 .wrap .tab-cnt li .more + div img{
    margin-top: 4vw;
}

#sec03 h2 img{
    width: 79.467vw;
}

#sec03 ul{
    margin: 8vw auto 0;
    padding: 0 5.467vw;
}

#sec03 ul li{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#sec03 ul li:nth-child(2){
    margin-top: 6vw;
}

#sec03 ul li .txt-area{
    width: 59.88%;
}

#sec03 ul li:nth-child(2) .txt-area{
    width: 53.1437%;
}

#sec03 ul li .txt-area h3{
    margin-left: -1.33vw;
    width: 26vw;
}

#sec03 ul li .txt-area p{
    font-size: 3.2vw;
    margin-top: 1.867vw;
}

#sec03 ul li:nth-child(1) .img-area img{
    width: 29.33vw;
}

#sec03 ul li:nth-child(2) .img-area img{
    width: 36vw;
}

#sec04 > p img{
    margin: 10.67vw auto 0;
    width: 89.067vw;
}

#sec04 .wrap{
    margin: -14.133vw auto 10.67vw;
    width: 80vw;
    border-radius: 5.33vw;
    padding: 16.8vw 0 8vw;
}

#sec04 .wrap img{
    width: 40vw;
}

#sec04 .wrap .txt01{
    padding: 4vw;
}

#sec04 .wrap .txt01 img{
    margin: 6.67vw auto 5.33vw;
    width: 59.733vw;
}


/* =====================================
	footer
===================================== */

footer{
    padding: 5.6vw 0;
    margin-top: 13.33vw;
}

footer .wrap{
    max-width: 100%;
    padding: 0 6.8vw;
}

footer .wrap .logo img{
    width: 33.6vw;
    margin-top: 2vw;
}

footer .wrap .sns dt{
    margin-right: 2.67vw;
}

footer .wrap .sns dd img{
    width: 5.733vw;
}

footer .wrap .sns dd:last-child{
    margin-left: 1.33vw;
}

}