/****************
変数設定　色・幅
*****************/
:root {
    --site-width: 1920px;
    --kvcontents-width: 1370px;
    --contents-width: 1200px;
    --subcontents-width: 1000px;
    --blue-color: #106a9d;
    --blue2-color: #f0faff;
    --blue3-color: #448aca;
    --orange-color: #f3774a;
    --orange2-color: #facd89;
    --orange3-color: #fff2de;
    --yellow-color: #fff799;
    --lightBlue-color: #f1f5f8;
    --green-color: #15aca3;
    --red-color: #ea5463;
}

body {
	line-height:1.5em;
	letter-spacing: 0.1em;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	-webkit-text-size-adjust: 100%;
	height:100%;
	background-color:#ffffff;
	color:#333333;
    font-weight: 500;
}
html{
    font-size: 18px;
}
@media screen and (max-width:1200px){
	html{
		font-size: 1.5vw;
	}
}
@media screen and (max-width:750px){
	html{
		font-size: 3.5vw;
	}
}
@media screen and (max-width:480px){
	html{
		font-size: 3.5vw;
	}
}
/*************
フォント
*************/
.kozuka{ font-family: '小塚ゴシック Pro','Kozuka Gothic Pro',sans-serif; }
.jost{ font-family: "Jost", sans-serif; font-style: italic; }
.noto-serif-jp{ font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-style: normal }

/*************
色
*************/
.blue{
    color: var(--blue-color);
}
.orange{
    color: var(--orange-color);
}
.under-line-orange{
    border-bottom: 1px solid var(--orange-color);
}
.yellow{
    color: var(--yellow-color);
}

/*************
文字関連
*************/
p{
	font-size:1rem;
	text-align:justify;
	margin-bottom: 0.5em;
	line-height: 1.75;
}
b{
    font-weight: bold;
}
h1, .h1{
	font-size:5rem;
	margin-bottom: 1em;
	line-height: 1.8;
    font-weight: bold;
}
h2, .h2{
	font-size:1.4rem;
	margin-bottom: 0.5em;
    line-height: 1.25;
    font-weight: bold;
}
h3, .h3{
	font-size:1.5rem;
	margin-bottom: 0.5em;
	line-height: 1.4;
    font-weight: bold;
}
.text-center{
    text-align: center;
}
.text-left{
	text-align: left;
}
.text-right{
	text-align: right;
}
.text-just{
	text-align: justify;
}
.text p{
    margin-bottom: 1em;
}
.text p:last-of-type{
    margin-bottom: 0;
}
dd{
    font-size:1rem;
	text-align:justify;
	margin-bottom: 0.5em;
	line-height: 1.8;
}
li{
    font-size:1rem;
	text-align:justify;
	margin-bottom: 0.5em;
	line-height: 1.8;
}
.font-150{
    font-size: 150%;
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.text-vertical{
    writing-mode: vertical-rl;
}
/*************
画像関連
*************/
picture{
    display: block;
}
img{
    max-width: 100%;
    height:auto;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.image img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
video{
    display: block;
    max-width: 100%;
}

/*************

*************/
.full-none{
    display: none;
}
.w100{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.flex-wrap{
    display: flex;
    flex-wrap: wrap;
}
.float-wrap::after{
    content: "";
    display: block;
    clear: both;
}
.float-wrap .float-left{
    float: left;
}
.float-wrap .float-right{
    float: right;
}
.mb-1em{
    margin-bottom: 1em !important;
}
.pt-0{
    padding-top: 0 !important;
}
.bold{
    font-weight: bold;
}
.full_none{
    display: none;
}
.inline-block{
    display: inline-block;
}
/**************************
スクロールアニメーション
**************************/
.scroll-wrap{
	opacity: 0;
	transition: all 1s ease-in-out;
}
.scroll-wrap.slow{
	transition: all 1.5s ease-in-out;
}
.scroll-wrap.fast{
	transition: all 0.5s ease-in-out;
}
.scroll-wrap.is-active{
	opacity: 1;
}
/**left-right**/
.scroll-wrap.left-right{
	transform: translateX(-25%);
}
.scroll-wrap.left-right.is-active{
	transform: translateX(0%);
}
/**right-left**/
.scroll-wrap.right-left{
	transform: translateX(25%);
}
.scroll-wrap.right-left.is-active{
	transform: translateX(0%);
}
/**bottom-top**/
.scroll-wrap.bottom-top{
	transform: translateY(25%);
}
.scroll-wrap.bottom-top.is-active{
	transform: translateY(0%);
}
/**top-bottom**/
.scroll-wrap.top-bottom{
	transform: translateY(-25%);
}
.scroll-wrap.top-bottom.is-active{
	transform: translateY(0%);
}
/*-------------------------------
ページトップへスクロール
--------------------------------*/
#page-top {
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: 999999;
    background-color: var(--blue-color);
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 5px;
    max-width: 65px;
}
/*************************
グルーバルナビゲーション
*************************/
header{
	overflow: hidden;
}
/**ハンバーガーアイコン**/
#nav_icon{
	position: fixed;
    top: 0;
    right: 0%;
    z-index: 9999999999;
    cursor: pointer;
    background-color: var(--orange-color);
    border-radius: 0 0 0 3.5em;
    width: 5em;
    height: 4.5em;
    font-size: 1rem;
}
#nav_icon::after{
    content: "menu";
    position: absolute;
    bottom: 20%;
    color: #ffffff;
    right: 5%;
}
#nav_icon .menu-ic{
	display: block;
    width: 2em;
    height: 0.1em;
    background-color: #ffffff;
    position: absolute;
    top: 28%;
    right: 15%;
    margin-left: auto;
    margin-right: auto;
    transition: 0.5s;
}
#nav_icon .menu-ic:before{
	content: "";
	display: block;
	width: 2em;
    height: 0.1em;
	background-color: inherit;
	position: absolute;
	top: -0.75em;
	transition: 0.5s;
}
#nav_icon .menu-ic:after{
	content: "";
	display: block;
	width: 2em;
    height: 0.1em;
	background-color: inherit;
	position: absolute;
	bottom: -0.75em;
	transition: 0.5s;
}
header .nav-contents{
	width: 480px;
    max-width: 100%;
    height: 100dvh;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    right: -480px;
    transition: 0.5s;
    margin-left: auto;
    margin-right: 0;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
    padding: 7em 2% 2% 2%;
	overflow: auto;
	z-index: 999999999;
}
header .nav-contents ul{

}
header .nav-contents ul li{
    font-size: 1.25rem;
    border-bottom: 0.2em dotted var(--orange-color);
    margin-bottom: 1em;
    padding-bottom: 0.5em;
}
header .nav-contents ul li:before{
    content: "●";
    color: var(--orange-color);
    margin-right: 0.5em;
}


/**オープン時**/
body.drawer-opened #nav_icon .menu-ic{
	width: 0;
	transition: 0s;
    right: 0.5em;
    left: 0;
}
body.drawer-opened #nav_icon .menu-ic::before{
	transform: rotate(45deg);
	top: 0em;
}
body.drawer-opened #nav_icon .menu-ic::after{
	transform: rotate(-45deg);
	bottom: 0em;
}
body.drawer-opened header .nav-contents{
	right: 0;
    opacity: 1;
	pointer-events: auto;
}
/*******************
フローティングバナー
*******************/
.bottom-fixed{
    position: fixed;
    bottom: -15%;
    width: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(0,5,8,0.2);
    z-index: 999999;
    transition: 0.5s;
}
.bottom-fixed.UpMove{
    bottom: 0;
}
.bottom-fixed .contents{
    width: var(--contents-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.bottom-fixed .contents .cta-wrap{
    background: transparent;
    padding: 1rem 0;
}
/*************
modal
*************/
@keyframes show{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.modal-btn{
    cursor: pointer;
}
body.modal-active{
    overflow: hidden;
}
#modal-wrap{
    display: none;
    position: fixed;
    width: 100%;
    height: 100dvh;
    background-color: rgb(51 51 51 / 80%);;
    z-index: 9999999;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999999999;
    transition: all .3s ease-in-out;
}
#modal-wrap .close{
    color: #ffffff;
    font-size: 3rem;
    font-weight: bold;
    position: absolute;
    top: 2%;
    right: 2%;
    cursor: pointer;
}
#modal-wrap .modal{
    display: none;
    position: absolute;
    width: 95%;
    max-width: 1300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transition: all .3s ease-in-out;
}
#modal-wrap .modal-contents{
    position: relative;
    width: 100%;
    height: 100%;
}
/********************
header
*********************/
header{
    max-width: var(--site-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/********************
main
*********************/
main{
    max-width: var(--site-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
/********************
フッター　footer
*********************/
footer{
    width: var(--site-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
footer .footer-nav{
    background-color: var(--blue-color);
    box-sizing: border-box;
    padding: 2rem 0;
}
footer .footer-nav .nav-contents{
    width: var(--subcontents-width);
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
footer .footer-nav .nav-contents .logo{

}
footer .footer-nav .nav-contents .logo h2{
    background-color: #ffffff;
    border-radius: 1rem;
    box-sizing: border-box;
    padding: 1rem;
    max-width: 210px;
}
footer .footer-nav .nav-contents .nav{
    width: 68%;
    margin-left: auto;
    margin-right: 0;
}
footer .footer-nav .nav-contents .nav ul{
    margin-right: 2em;
}
footer .footer-nav .nav-contents .nav ul:last-of-type{
    margin-right: 0;
}
footer .footer-nav .nav-contents .nav li{

}
footer .footer-nav .nav-contents .nav li a{
    color: #ffffff;
}
footer .copybg{
    background-color: #000000;
    box-sizing: border-box;
    padding: 0.75rem 0;
}
footer .copybg p{
    color: #ffffff;
    font-size: 0.8rem;
    margin-bottom: 0;
}
/********************
section
*********************/
section{
    box-sizing: border-box;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    
}
section .contents{
    max-width: var(--contents-width);
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
section h2{
    font-size: 2.4rem;
    margin-bottom: 0.25em;
}
section h3{
    
}
section .contents .text{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
section .contents > *:last-of-type{
    margin-bottom: 0;
}
/********************
btn
*********************/
.btn{
    display: block;
    color: #ffffff;
    font-size: 1.25rem;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
    box-sizing: border-box;
}
.btn.btn-blue{
    background-color: var(--blue-color);
    padding: 0.5em 1.5em;
    padding-right: 2em;
    font-weight: 500;
    position: relative;
    margin-top: 1em;
    overflow: hidden;
}
.btn.btn-blue span{
    position: relative;
    z-index: 1;
}
.btn.btn-blue::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    background-color: color-mix(in srgb, var(--blue-color) 50%, #009688);
    transition: all 0.25s ease-in-out;
}
.btn.btn-blue:hover:before{
    content: "";
    left: 0%;
}
.btn.btn-blue::after{
    content: "→";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.75em;
    margin: auto;
    line-height: 1;
    height: 1em;
    transition: all 0.25s ease-in-out;
}
.btn.btn-blue:hover::after{
    right: 0.5em;
}
/********************
cta-wrap
*********************/
.cta-wrap{
    background-color: #f6f1ec;
}
.cta-wrap .contents{
    background-image: url('../img/cta_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding: 2.5rem 0;
}
.cta-wrap .cta-block{

}
.cta-wrap .cta-block h3{
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
    font-weight: bold;
    color: var(--red-color);
    margin-bottom: 0;
    font-size: 1.15rem;
}
.cta-wrap .cta-block h3 span{
    outline: 2px solid var(--red-color);
    background-color: #ffffff;
    width: 1.75em;
    height: 1.75em;
    display: inline-block;
    line-height: 1;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 0.4em 0;
    text-align: center;
    margin-left: -0.2em;
    vertical-align: middle;
    position: relative;
}
.cta-wrap .cta-block h3 span:before{
    content: "";
    display: block;
    width: 5px;
    height: 1em;
    background-color: #ffffff;
    position: absolute;
    left: -2px;
}
.cta-wrap .cta-block h3 span:first-of-type::before{
    display: none;
}
.cta-wrap .cta-block p.sub{
    color: var(--green-color);
    font-size: 1.5rem;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
    font-weight: bold;
    position: relative;
    margin-bottom: 0.25em;
    text-shadow: #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px;
}
.cta-wrap .cta-block p.sub::before{
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.5em;
    vertical-align: middle;
    background-color: var(--green-color);
    margin-right: 0.5em;
    transform: rotate(-30deg);
    box-shadow: 0px 2px 5px #fff, 0px 2px 5px #fff, 0px 2px 5px #fff, 0px 2px 5px #fff;
}
.cta-wrap .cta-block p.sub::after{
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.5em;
    vertical-align: middle;
    background-color: var(--green-color);
    margin-left: 0.5em;
    transform: rotate(30deg);
    box-shadow: 0px 2px 5px #fff, 0px 2px 5px #fff, 0px 2px 5px #fff, 0px 2px 5px #fff;
}
.cta-wrap .cta-block .btn.btn-cta{
    display: block;
    font-size: 1.5rem;
    border-radius: 1.5em;
    background-color: var(--orange-color);
    padding: 1em 3.5em;
    font-weight: 500;
    position: relative;
    box-shadow: 0 5px 0 color-mix(in srgb, var(--orange-color) 80%, #000);
    overflow: hidden;
}
.cta-wrap .cta-block .btn.btn-cta::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    background-color: color-mix(in srgb, var(--orange-color) 50%, #ffc107);
    transition: all 0.25s ease-in-out;
}
.cta-wrap .cta-block .btn.btn-cta:hover:before{
    content: "";
    left: 0%;
}
.cta-wrap .cta-block .btn.btn-cta span{
    position: relative;
    z-index: 1;
}
.cta-wrap .cta-block .btn::after{
    content: "→";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.5em;
    margin: auto;
    line-height: 1;
    height: 1em;
    transition: all 0.25s ease-in-out;
}
.cta-wrap .cta-block .btn:hover::after{
    right: 1em;
}
.cta-wrap .cta-block p.annotation{
    font-size: 0.75rem;
    margin-top: 1em;
    width: max-content;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 600;
    text-shadow: #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px, #fff 0 0 15px;
}
/********************
main-visual
*********************/
#main-visual{
    position: relative;
    margin: auto;
    padding-top: 2rem;
    padding-bottom: 6rem;
    background-image: repeating-linear-gradient(90deg, #f5f5f5, #f5f5f5 1px, transparent 1px, transparent 20px), repeating-linear-gradient(0deg, #f5f5f5, #f5f5f5 1px, #fff 1px, #fff 20px);
}
#main-visual .contents{
    position: relative;
    width: var(--kvcontents-width);
    max-width: 100%;
}
#main-visual .contents::before{
    content: "";
    display: block;
    aspect-ratio: 317 / 1369;
    width: 10rem;
    background-image: url("../img/bg_ic001.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: -12rem;
}
#main-visual .contents::after{
    content: "";
    display: block;
    aspect-ratio: 499 / 1244;
    width: 14rem;
    background-image: url(../img/bg_ic002.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    right: -15rem;
    margin-top: 5rem;
}
#main-visual #kv{
    position: relative;
    margin-left: 0;
    margin-right: auto;
    display: block;
    width: max-content;
    max-width: calc( 100% - 14rem );
}
#main-visual .text-wrap{
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    width: 14rem;
    max-width: 98%;
    margin-left: auto;
    margin-right: 0;
    z-index: 1;
}
#main-visual .text-wrap h1{
    margin: auto;
    font-size: 1rem;
    margin-bottom: 1em;
    max-width: 210px;
    margin: auto;
}
#main-visual .text-wrap .text{
    flex-direction: row-reverse;
}
#main-visual .text-wrap h2{
    font-size: 1.75rem;
    font-weight: bold;
    line-height: 1.5;
    margin-left: 0.5em;
}
#main-visual .text-wrap h2 span{

}
#main-visual .text-wrap p{
    font-size: 1rem;
    font-weight: 600;
}
#main-visual .text-wrap h3{
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
    font-weight: bold;
    color: var(--blue-color);
    margin-bottom: 0;
    font-size: 1.15rem;
    line-height: 2;
    margin-top: 0.5em;
    margin-bottom: 1em;
}
#main-visual .text-wrap h3 span{
    outline: 2px solid var(--blue-color);
    background-color: #ffffff;
    width: 1.75em;
    height: 1.75em;
    display: inline-block;
    line-height: 1;
    border-radius: 50%;
    box-sizing: border-box;
    padding: 0.4em 0;
    text-align: center;
    margin-left: -0.2em;
    vertical-align: middle;
    position: relative;
}
#main-visual .text-wrap h3 span:before{
    content: "";
    display: block;
    width: 5px;
    height: 1em;
    background-color: #ffffff;
    position: absolute;
    left: -2px;
}
#main-visual .text-wrap h3 span:first-of-type::before{
    display: none;
}
/********************
section1
*********************/
#section1{
    counter-reset: number 0;
    background-image: url("../img/section1_bg.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding-bottom: 3.5rem;
}
#section1 .wave {
    display: block;
    width: 100%;
    height: 2rem;
    mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 50"><path d="M 0 35 Q 16.25 35 32.5 17.5 Q 65 -17.5 97.5 17.5 Q 113.75 35 130 35 Q 146.25 35 162.5 17.5 Q 195 -17.5 227.5 17.5 Q 243.75 35 260 35 L 130 50 L 0 50 Z"></path></svg>');
    mask-repeat: repeat;
    mask-position: top left;
    background-image: url("../img/section1_bg.png");
    position: absolute;
    top: -2rem;
}
#section1 h2{
    font-weight: normal;
    font-size: 2rem;
    position: relative;
    margin-top: 3em;
}
#section1 h2::before{
    counter-increment: number 1;
    content: counter(number, decimal-leading-zero);
    background-image: url(../img/check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 3em;
    height: 3em;
    position: absolute;
    top: -3em;
    writing-mode: initial;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    box-sizing: border-box;
    padding-top: 1.15em;
    color: #f3774a;
    font-family: "Jost", sans-serif; font-style: italic;
}
#section1 .item{
    margin-top: 5rem;
    margin-bottom: 5rem;
    position: relative;
}
#section1 .item:nth-of-type(2n) .flex-wrap{
    flex-flow: row-reverse;
}
#section1 .item:first-of-type{
    margin-top: 0;
}
#section1 .item:last-of-type{
    margin-bottom: 0;
}
#section1 .item .text-wrap{
    width: 11rem;
    box-sizing: border-box;
    padding: 0% 2%;
}
#section1 .item:nth-of-type(2n) .flex-wrap .text-wrap{
    margin-left: 0;
    margin-right: auto;
}
#section1 .item .img-wrap{
    /*width: calc( 100% - 12rem );*/
    width: calc(100% - 12rem);
    margin-left: 0;
    margin-right: auto;
}
#section1 .item:nth-of-type(2n) .img-wrap{
    margin-left: auto;
    margin-right: 0;
}
#section1 .item .img-wrap video{
    border-radius: 15px;
    width: 100%;
}
#section1 .item:nth-of-type(1)::before{
    content: "";
    display: block;
    background-image: url("../img/bg_ic003.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 12rem;
    aspect-ratio: 614 / 494;
    position: absolute;
    bottom: 0;
    left: -12rem;
}
#section1 .item:nth-of-type(2)::before{
    content: "";
    display: block;
    background-image: url("../img/bg_ic004.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 13rem;
    aspect-ratio: 566 / 495;
    position: absolute;
    bottom: -1rem;
    right: -7rem;
}
#section1 .item:nth-of-type(3)::before{
    content: "";
    display: block;
    background-image: url("../img/bg_ic005.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 13rem;
    aspect-ratio: 554 / 383;
    position: absolute;
    bottom: 2rem;
    left: -13rem;
}
/********************
section2
*********************/
#section2{
    background-image: url("../img/section2_bg.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
#section2 h2{
    position: relative;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
    max-width: 100%;
    line-height: 1;
}
#section2 h2::before{
    content: "";
    background: radial-gradient(circle farthest-side, #000, #000 70%, transparent 60%, transparent);
    background-size: 0.3em 0.3em;
    width: 0.3em;
    height: 1.5em;
    position: absolute;
    left: -0.5em;
    top: 0;
    bottom: -0.35em;
    margin: auto;
    display: block;
    line-height: 1;
    transform: rotate(-30deg);
    z-index: 1;
}
#section2 h2::after{
    content: "";
    background: radial-gradient(circle farthest-side, #000, #000 70%, transparent 60%, transparent);
    background-size: 0.3em 0.3em;
    width: 0.3em;
    height: 1.5em;
    position: absolute;
    right: -0.5em;
    top: 0;
    bottom: -0.35em;
    margin: auto;
    display: block;
    line-height: 1;
    transform: rotate(30deg);
    z-index: 1;
}
#section2 h2 span{
    display: inline-block;
    vertical-align: bottom;
    box-sizing: border-box;
    padding: 0.1em;
    color: #ffffff;
    margin-right: 0.2em;
    border-radius: 5px;
}
#section2 h2 span:nth-of-type(1){
    background-color: var(--blue-color);
}
#section2 h2 span:nth-of-type(2){
    background-color: var(--green-color);
}
#section2 h2 span:nth-of-type(3){
    background-color: var(--red-color);
}
#section2 .section2-wrap{
    justify-content: space-between;
    margin-top: 9rem;
}
#section2 .section2-wrap .item{
    width: 32%;
    border: 2px solid currentColor;
    position: relative;
    border-top: none;
    background-color: #ffffff;
}
#section2 .section2-wrap .item::before{
    content: "";
    width: calc(100% + 4px);
    height: 7rem;
    position: absolute;
    top: -7rem;
    left: -2px;
    right: -2px;
    margin: auto;
    border-radius: 50% / 100% 100% 0 0;
    border: 2px solid currentColor;
    border-bottom: none;
    background-color: #ffffff;
}
#section2 .section2-wrap .item .inner{
    box-sizing: border-box;
    padding: 2% 4%;
    margin-top: -8rem;
}
#section2 .section2-wrap .item:nth-of-type(1){
    border-color: var(--blue3-color);
    color: var(--blue3-color);
}
#section2 .section2-wrap .item:nth-of-type(2){
    border-color: var(--green-color);
    color: var(--green-color);
}
#section2 .section2-wrap .item:nth-of-type(3){
    border-color: var(--red-color);
    color: var(--red-color);
}
#section2 .section2-wrap .item .img-wrap{
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
#section2 .section2-wrap .item .img-wrap img{
    height: 100%;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: none;
}
#section2 .section2-wrap .item .text-wrap{

}
#section2 .section2-wrap .item .text-wrap h3{
    font-size: 1.5rem;
    margin-bottom: 0.25em;
    line-height: 1.25;
    margin-top: 0.5em;
    position: relative;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
#section2 .section2-wrap .item .text-wrap h3:first-letter{
    font-size: 125%;
}
#section2 .section2-wrap .item .text-wrap h3 .ic{
    position: absolute;
    width: 0.1em;
    height: 0.5em;
    background-color: currentColor;
    top: -0.25em;
    left: -0.25em;
    transform: rotate(-45deg);
}
#section2 .section2-wrap .item .text-wrap h3 .ic::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(35deg);
    position: absolute;
    top: 0.1em;
    left: 0.4em;
    background-color: currentColor;
}
#section2 .section2-wrap .item .text-wrap h3 .ic::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-35deg);
    position: absolute;
    top: 0.1em;
    left: -0.4em;
    background-color: currentColor;
}
#section2 .section2-wrap .item .text-wrap h4{
    font-weight: 500;
    margin-bottom: 0.5em;
    font-size: 1.2rem;
}
#section2 .section2-wrap .item .text-wrap p{
    color: #333333;
}
/********************
section3
*********************/
#section3{
    background-image: url("../img/section3_bg.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
#section3 .section3-wrap{

}
#section3 .section3-wrap .item{
    position: relative;
}
#section3 .section3-wrap .item .flex-wrap{
    align-items: center;
}
#section3 .section3-wrap .item:nth-of-type(2n) .flex-wrap{
    flex-direction: row-reverse;
}
#section3 .section3-wrap .item .img-wrap{
    width: 60%;
}
#section3 .section3-wrap .item .text-wrap{
    width: 40%;
    box-sizing: border-box;
    padding: 0% 3%;
}
#section3 .section3-wrap .item .text-wrap h2{
    position: relative;
    padding-left: 0.75em;
    color: var(--blue3-color);
    border-bottom: 0.1em dotted var(--blue3-color);
    padding-bottom: 0.25em;
}
#section3 .section3-wrap .item:nth-of-type(2n) .text-wrap h2{
    color: var(--red-color);
    border-bottom: 0.1em dotted var(--red-color);
}
#section3 .section3-wrap .item .text-wrap h2::before{
    content: "";
    display: block;
    background-image: url(../img/section3_ic001.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    aspect-ratio: 34 / 380;
    position: absolute;
    top: 0;
    left: 0;
}
#section3 .section3-wrap .item:nth-of-type(2n) .text-wrap h2::before{
    background-image: url(../img/section3_ic002.png);
}
#section3 .section3-wrap .item .text-wrap p{
    color: var(--blue3-color);
    font-weight: 600;
}
#section3 .section3-wrap .item:nth-of-type(2n) .text-wrap p{
    color: var(--red-color);
}
#section3 .section3-wrap .item:nth-of-type(1)::before{
    content: "";
    display: block;
    background-image: url(../img/bg_ic007.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 13rem;
    aspect-ratio: 544 / 286;
    position: absolute;
    bottom: 0rem;
    left: -13rem;
}
#section3 .section3-wrap .item:nth-of-type(1)::after{
    content: "";
    display: block;
    background-image: url(../img/bg_ic006.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 11rem;
    aspect-ratio: 204 / 139;
    position: absolute;
    top: 1rem;
    right: -3rem;
}
#section3 .section3-wrap .item:nth-of-type(2)::after{
    content: "";
    display: block;
    background-image: url(../img/bg_ic008.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 11rem;
    aspect-ratio: 424 / 306;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -10rem;
}
/********************
qa
*********************/
#qa{

}
#qa h2{

}
#qa h2::before{
    content: "ーQ&Aー";
    display: block;
    font-size: 80%;
    color: var(--blue-color);
    text-align: center;
    font-family: "Jost", sans-serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.25em;
    margin-bottom: 0.25em;
}
#qa .qa-wrap{
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#qa .qa-wrap dl{
    margin-bottom: 1rem;
}
#qa .qa-wrap dl:last-of-type{
    margin-bottom: 0;
}
#qa .qa-wrap dl dt{
    position: relative;
    background-color: var(--blue2-color);
    box-sizing: border-box;
    padding: 1em;
    padding-left: 3em;
}
#qa .qa-wrap dl.accordion-wrap dt{
    cursor: pointer;
    padding-right: 3em;
}
#qa .qa-wrap dl dt::before{
    content: "Q";
    display: block;
    background-color: var(--blue-color);
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    position: absolute;
    left: 1em;
    line-height: 1.5;
}
#qa .qa-wrap dl.accordion-wrap dt::after{
    content: "＋";
    display: block;
    position: absolute;
    right: 0.5em;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1em;
    line-height: 1;
    font-weight: bold;
    font-size: 175%;
}
#qa .qa-wrap dl.accordion-wrap dt.active::after{
    content: "－";
}
#qa .qa-wrap dl dd{
    position: relative;
    background-color: var(--orange3-color);
    box-sizing: border-box;
    padding: 1em;
    padding-left: 3em;
}#qa .qa-wrap dl.accordion-wrap dd{
    display: none;
}
#qa .qa-wrap dl dd::before{
    content: "A";
    display: block;
    background-color: var(--orange-color);
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    position: absolute;
    left: 1em;
    line-height: 1.5;
}
#qa .qa-wrap dl dd p{
    font-weight: 500;
}

/*****************************************************************
@メディアクエリ
1705pxまで適用
*****************************************************************/
@media screen and (min-width: 751px) and (max-width: 1340px) {
    #main-visual .text-wrap p {
        font-size: 0.85rem;
    }
    #section3 .section3-wrap .item .text-wrap h2{
        font-size: 2.25rem;
    }
}

/*****************************************************************
@メディアクエリ
sm:1200pxまで適用
*****************************************************************/
@media screen and (max-width: 1200px) {
    /********************
    main-visual
    *********************/
    
}

/*****************************************************************
@メディアクエリ
xs:750pxまで適用
*****************************************************************/
@media screen and (max-width: 750px) {
    .sp-none{
        display: none;
    }
    .full-none{
        display: block;
    }
    /********************
    cta-wrap
    *********************/
    .cta-wrap .contents{
        width: 100%;
    }
    /********************
    main-visual
    *********************/
    #main-visual{
        padding-bottom: 4rem;
    }
    #main-visual #kv{
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 3rem;
    }
    #main-visual .text-wrap{
        position: relative;
        width: 95%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    #main-visual .text-wrap h1{
        width: 25%;
        position: absolute;
        top: 0;
        left: 5%;
    }
    #main-visual .text-wrap h3{
        position: absolute;
        top: 2rem;
        left: 5%;
        font-size: 1rem;
    }
    #main-visual .text-wrap h2{
        width: 35%;
        position: relative;
        margin-left: auto;
        margin-right: 5%;
    }
    #main-visual .text-wrap .text {
        display: block;
    }
    #main-visual .text-wrap p {
        font-size: 1.05rem;
        font-weight: bold;
        writing-mode: unset;
        text-align: center;
        margin-top: 10rem;
    }
    /********************
    section1
    *********************/
    #section1 {
        padding-bottom: 3.5rem;
    }
    #section1 .contents{
        margin-top: -2.5rem;
    }
    #section1 h2{
        writing-mode: unset;
        text-align: center;
        margin-bottom: 0.5em;
        font-size: 1.65rem;
        margin-right: -0.5em;
        font-weight: 600;
    }
    #section1 h2::before {
        background-image: url(../img/check_sp.png);
        width: 5em;
        height: auto;
        aspect-ratio: 426 / 96;
        position: absolute;
        top: -1.5em;
        left: 0;
        right: 0;
        margin: auto;
        text-align: right;
        padding-top: 0;
        font-size: 120%;
        line-height: 1;
        background-position: bottom;
        padding-bottom: 0.4em;
        padding-right: 0.9em;
        font-weight: 400;
    }
    #section1 .item{
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 6rem;
        margin-bottom: 6rem;
    }
    #section1 .item .flex-wrap{
        display: block;
    }
    #section1 .item .flex-wrap .text-wrap{
        width: 100%;
        padding: 0;
    }
    #section1 .item:nth-of-type(2n) .flex-wrap .text-wrap {
        margin-left: auto;
        margin-right: auto;
    }
    #section1 .item .flex-wrap .img-wrap{
        width: 100%;
    }
    #section1 .item:nth-of-type(1)::before {
        width: 7.5rem;
        position: absolute;
        bottom: auto;
        left: auto;
        top: -6rem;
        right: -0.5rem;
    }
    #section1 .item:nth-of-type(2)::before {
        width: 6.5rem;
        position: absolute;
        bottom: auto;
        right: auto;
        top: -4.5rem;
        left: -1rem;
    }
    #section1 .item:nth-of-type(3)::before{
        width: 7rem;
        position: absolute;
        bottom: auto;
        left: auto;
        top: -5rem;
        right: -0.5rem;
    }
    /********************
    section2
    *********************/
    #section2 h2{
        font-size: 2rem;
        padding-left: 0.1em;
        padding-right: 0.1em;
    }
    #section2 h2::before{
        left: -0.75em;
    }
    #section2 h2::after{
        right: -0.75em;
    }
    #section2 .section2-wrap{
        margin-top: 0;
        display: block;
    }
    #section2 .section2-wrap .item::before{
        display: none;
    }
    #section2 .section2-wrap .item{
        width: 100%;
        border-top: 2px solid;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        position: relative;
    }
    #section2 .section2-wrap .item .inner{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 0;
    }
    #section2 .section2-wrap .item:nth-of-type(2n) .inner{
        flex-direction: row-reverse;
    }
    #section2 .section2-wrap .item .inner .img-wrap{
        position: absolute;
        left: 68%;
        height: 105%;
    }
    #section2 .section2-wrap .item:nth-of-type(2n) .inner .img-wrap{
        left: 0%;
    }
    #section2 .section2-wrap .item:nth-of-type(1) .inner .img-wrap{
        left: 60%;
    }
    #section2 .section2-wrap .item .inner .text-wrap{
        width: 65%;
    }
    #section2 .section2-wrap .item .text-wrap h4 {
        font-weight: 600;
        margin-bottom: 0.5em;
        font-size: 1rem;
    }
    #section2 .section2-wrap .item .text-wrap p {
        font-weight: 600;
        line-height: 1.65;
    }
    /********************
    section3
    *********************/
    #section3 .section3-wrap .item{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    #section3 .section3-wrap .item:first-of-type{
        margin-top: 0;
    }
    #section3 .section3-wrap .item:last-of-type{
        margin-bottom: 0;
    }
    #section3 .section3-wrap .item .flex-wrap{
        display: block;
    }
    #section3 .section3-wrap .item .img-wrap {
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    #section3 .section3-wrap .item .text-wrap {
        width: 100%;
    }
    #section3 .section3-wrap .item .text-wrap h2{
        font-size: 2.1rem;
    }
    #section3 .section3-wrap .item .text-wrap p{
        font-weight: 600;
    }
    #section3 .section3-wrap .item:nth-of-type(1)::before{
        display: none;
    }
    #section3 .section3-wrap .item:nth-of-type(1)::after{
        display: none;
    }
    #section3 .section3-wrap .item:nth-of-type(2)::after{
        display: none;
    }
    /********************
    qa
    *********************/
    #qa{

    }
    #qa h2{
        margin-bottom: 0.5em;
        font-size: 1.65rem;
    }
    #qa h2::before{
        font-size: 90%;
    }
    #qa .qa-wrap{
        margin-bottom: 0;
    }
    #qa .qa-wrap dl dt {
        font-size: 0.9rem;
    }
    #qa .qa-wrap dl.accordion-wrap dt::after{
        right: 0.25em;
    }
    #qa .qa-wrap dl dd p{
        font-size: 0.9rem;
        line-height: 1.5;
    }
    /********************
    フッター　footer
    *********************/
    footer .footer-nav .nav-contents .nav {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    footer .footer-nav .nav-contents .nav ul{
        width: 50%;
        margin-right: 0;
    }
    footer .footer-nav .nav-contents .nav ul:last-of-type{
        margin-left: auto;
        margin-right: auto;
    }
    footer .footer-nav .nav-contents .nav li {
        font-size: 0.85rem;
        text-align: center;
    }
    footer .footer-nav .nav-contents .logo{
        width: 100%;
    }
    footer .footer-nav .nav-contents .logo h2{
        width: 35%;
        margin-left: auto;
        margin-right: auto;
    }
    /*-------------------------------
    ページトップへスクロール
    --------------------------------*/
    #page-top {
        position: fixed;
        bottom: 13%;
        right: 2%;
        width: 10%;
        padding: 2%;
    }
}
/*****************************************************************
@メディアクエリ
xs:550pxまで適用
*****************************************************************/
@media screen and (max-width: 550px) {
    
    /********************
    qa
    *********************/
    #qa .qa-wrap dl dt{
        font-size: 1rem;
    }
    #qa .qa-wrap dl dd p {
        font-size: 1rem;
    }
}