@charset "UTF-8";

/*================================mainvisual================================*/
.mainvisual{
position: relative;
width: 100%;
max-width: 1920px;
height: 1080px;
margin: auto;
background: url(../images/bg-mainvisual.jpg) no-repeat top center;
}
.mainvisual .inner{
position: relative;
width: 1200px;
margin: auto ;
}
.mainvisual .logo{
position: absolute;
top:224px;
left: 0;
width: 524px;
height: 164px;
z-index: 2;
}
.mainvisual .logo img{
width: 100%;
height: auto;
}
.mainvisual .catch{
width: 640px;
position: absolute;
top:416px;
left: 0;
z-index: 2;
white-space: nowrap;
letter-spacing: 0;
}
.mainvisual .catch > span:nth-child(1){
display: flex;
align-items: center;
height: 75px;
background: #fff;
border-radius: 15px;
padding: 0 24px;
margin-bottom: 24px;
color:#000;
font-size: 31px;
font-weight: 700;
filter: drop-shadow(0 11px 6px RGBA(0,0,0,0.22));
}
.mainvisual .catch > span:nth-child(1) span:nth-child(1){
color:#f29601;
font-size: 38px;
font-weight: 700;
padding-bottom:5px;
}
.mainvisual .catch > span:nth-child(3){
display: flex;
align-items: center;
height: 90px;
background: #88d037;
border-radius: 15px;
padding: 0 24px;
color:#fff;
font-size: 38px;
font-weight: 700;
filter: drop-shadow(0 11px 6px RGBA(0,0,0,0.22));
}
.mainvisual .catch > span:nth-child(3) span:nth-child(1){
color:#ffff00;
font-size: 51px;
font-weight: 900;
}
.mainvisual .lead{
position: absolute;
top:640px;
left: 0;
z-index: 2;
}
.mainvisual .lead p{

color: #fff;
font-size: 26px;
letter-spacing: 0;
line-height: 1.6;
}
.mainvisual .lead ul{
display: flex;
gap: 12px;
margin-top: 40px;
}
.mainvisual .lead ul li{
display: flex;
align-items: center;
justify-content: center;
height: 56px;
border-radius: 56px;
color: #fff;
font-size: 22px;
padding: 0 28px;
}
.mainvisual .lead ul li:nth-child(1){
background: #6dbde9;
}
.mainvisual .lead ul li:nth-child(2){
background: #88d037;
}
.mainvisual .mv_parts01{
position: absolute;
top:613px;
left: 935px;
z-index: 2;
transition: 0.3s;
}
.mainvisual .mv_parts01:hover{
opacity: 0.8;
}
.mainvisual .mv_parts02{
position: absolute;
top:648px;
left: 435px;
z-index: 2;
}
.mainvisual .mainvisual_slider{
position: relative;
border-radius: 50%;
width: 742px;
height:742px;
position: absolute;
top:158px;
left:508px;
z-index: 1;
background: #ddd;
overflow: hidden;
}

@media  only screen and (max-width: 768px) {
.mainvisual{
position: relative;
width: 100%;
max-width: 100%;
height: auto;
background: #f29601 url(../images/bg-mainvisual.jpg) no-repeat top center;
}
.mainvisual .inner{
width: 100%;
padding:80px 0 90px;
}
.mainvisual .logo{
display: none;
}
/*
.mainvisual .logo{
position: initial;
width: 60%;
height: auto;
margin: 20px auto;
}
.mainvisual .logo img{
width: 100%;
height: auto;
}
*/
.mainvisual .catch{
width: 100%;
position: initial;
z-index: 2;
white-space: nowrap;
letter-spacing: 0;
padding: 0 20px;
text-align: center;
margin-top: 4vw;
}
.mainvisual .catch > span:nth-child(1){
display: inline-block;
height: auto;
border-radius: 2vw;
padding: 3vw 4vw ;
margin-bottom: 3vw;
font-size: 3.5vw;
filter: drop-shadow(0 6px 3px RGBA(0,0,0,0.22));
}
.mainvisual .catch > span:nth-child(1) span:nth-child(1){
font-size: 5vw;
padding-bottom:0.8vw;
padding-right: 1vw;
}
.mainvisual .catch > span:nth-child(3){
display: inline-block;
height: auto;
border-radius: 2vw;
padding: 3vw 4vw ;
margin-bottom: 3vw;
font-size: 3.5vw;
filter: drop-shadow(0 6px 3px RGBA(0,0,0,0.22));
}
.mainvisual .catch > span:nth-child(3) span:nth-child(1){
color:#ffff00;
font-size: 5vw;
font-weight: 900;
}
.mainvisual .lead{
position: initial;
margin-top: 0;
padding: 0 2vw;
text-align: center;
}
.mainvisual .lead p{
font-size:4vw;
}
.mainvisual .lead ul{
display: flex;
gap: 2vw;
margin-top: 2vw;
padding: 0 20px;
}
.mainvisual .lead ul li{
width: calc((100% - 2vw) / 2);
height: 10vw;
border-radius: 10vw;
font-size: 4vw;
padding: 0;
}
.mainvisual .mv_parts01{
position: initial;
margin-top: 5vw;
text-align: center;
}
.mainvisual .mv_parts01 img{
width: 100%;
max-width: 280px;
height: auto;
}
.mainvisual .mv_parts02{
width: 50vw;
position: absolute;
top: 74vw;
left: 4vw;
}
.mainvisual .mv_parts02 img{
width: 100%;
max-width: 100%;
height: auto;
}
.mainvisual .mainvisual_slider{
width:calc(100vw - 40px);
height:calc(100vw - 40px);
position: initial;
transform: initial;
margin: auto;
}
.mainvisual .mainvisual_slider img{
width:100%;
height:auto;
}
}

/*=============================== how_to_use ================================*/
.how_to_use{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
padding: 130px 0 180px;
background: url(../images/bg-sct01-base.jpg) repeat-y center top;
z-index: 0;
}
.how_to_use::before {
content: "";
position: absolute;
top: -178px;
left: 50%;
transform: translateX(-50%);
width:1920px;
height: 180px;
background: url(../images/bg-sct01-top.png) no-repeat top center;
}
.how_to_use .inner{
width: 1200px;
margin: auto ;
}
.how_to_use .inner h2{
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
margin-bottom: 54px;
}
.how_to_use .inner h2 a{
color:var(--c-primary);
text-decoration: none;
transition: 0.3s;
}
.how_to_use .inner h2 a:hover{
color:var(--c-primary);
opacity: 0.8;
}
.how_to_use .inner h2::before{
content: "";
width: 172px;
height: 76px;
position: absolute;
top: 46px;
left: -210px;
z-index: 1;
pointer-events: none;
background: url(../images/bg-h2-howto.svg) no-repeat;
}
.how_to_use .inner h2::after{
content: "";
width: 172px;
height: 76px;
position: absolute;
top: 46px;
left: 200px;
z-index: 1;
background: url(../images/bg-h2-howto.svg) no-repeat;
transform: scale(-1, 1);
}
.how_to_use .inner h2 span:nth-child(1){
display: block;
text-align: center;
font-size: 3rem;
font-weight: 700;
padding-top: 46px;
margin-bottom: 12px;
background: url(../images/icon/icon-flag-o.svg) no-repeat top center;
}
.how_to_use .inner h2 span:nth-child(2){
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
line-height: 0;
width: 158px;
height:30px ;
background: url(../images/parts-h3-bottom-o.svg) no-repeat;
margin: auto;
}
.how_to_use .inner ol{
display: flex;
justify-content: center;
gap: 90px;
counter-reset: num;
}
.how_to_use .inner ol li{
position: relative;
width: 285px;
}
.how_to_use .inner ol li:nth-child(1),.how_to_use .inner ol li:nth-child(3){
margin-top: 100px;
}
.how_to_use .inner ol li:nth-child(1):after{
content: "";
position: absolute;
top: 92px;
right: -92px;
width: 88px;
height: 50px;
background: url(../images/parts-howto-arrow.svg) no-repeat;
}
.how_to_use .inner ol li:nth-child(2):after{
content: "";
position: absolute;
top: 186px;
right: -90px;
width: 88px;
height: 50px;
background: url(../images/parts-howto-arrow.svg) no-repeat;
transform: rotate(38deg);
}
.how_to_use .inner ol li figure{
position: relative;
width: 285px;
height: 285px;
border-radius: 50%;
background: #fff;
}
.how_to_use .inner ol li figure img{
display: block;
width: 100%;
height: auto;
}
.how_to_use .inner ol li:nth-child(1) figure img{
position: absolute;
top: 24px;
left: -10px;
}
.how_to_use .inner ol li:nth-child(2) figure img{
position: absolute;
top: 24px;
left: -28px;
}
.how_to_use .inner ol li:nth-child(3) figure img{
position: absolute;
top: 14px;
left: 6px;
}
.how_to_use .inner ol li p{
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-top: 20px;
}
.how_to_use .inner ol li p span{
display: block;
font-size: 1.6rem;
font-weight: 400;
line-height: 1.3;
margin-top: 10px;
}
.how_to_use .inner ol li .comment{
position: relative;
display: block;
font-size: 1.7rem;
line-height: 1.3;
white-space: nowrap;
transform: rotate(-10deg);
letter-spacing: 0;
z-index: 1;
}
.how_to_use .inner ol li .comment::before{
position: absolute;
top: -42px;
left: -16px;
content: "";
width: 72px;
height: 112px;
background: url(../images/parts-howto-comment.svg) no-repeat;
}
.how_to_use .inner ol li:nth-child(2) .comment{
position: absolute;
top:40px;
left:210px;
}
.how_to_use .inner ol li:nth-child(3) .comment{
position: absolute;
top:40px;
left:210px;
}
.how_to_use .inner ol li::before{
counter-increment: num 1;
content: counter(num, decimal-leading-zero);
display: flex;
align-items: center;
justify-content: center;
width: 90px;
height: 90px;
color: #fff;
font-size: 5.3rem;
font-weight: 700;
background: #f29601;
border-radius: 50%;
padding-bottom: 6px;
position: absolute;
top: -10px;
left: -5px;
z-index: 1;
}
@media  only screen and (max-width: 768px) {
.how_to_use{
width: 100%;
max-width:  100%;
padding: 20px 0 68px;
background: url(../images/bg-sct01-base.jpg) repeat-y center top;
}
.how_to_use::before {
content: "";
position: absolute;
top: -70px;
width:768px;
height: 72px;
background: url(../images/bg-sct01-top.png) no-repeat top center;
background-size: 100% auto;
}
.how_to_use .inner{
width: 100%;
padding: 0 20px;
}
.how_to_use .inner h2{
position: initial;
transform: initial;
margin-bottom: 50px;
background: url(../images/bg-h2-howto-sp.svg) no-repeat bottom center;
background-size: auto 60px;
}
.how_to_use .inner h2::before{
display: none;
}
.how_to_use .inner h2::after{
display: none;
}
.how_to_use .inner h2 span:nth-child(1){
font-size: 2rem;
}
.how_to_use .inner h2 span:nth-child(2){
font-size: 1.4rem;
}
.how_to_use .inner ol{
display: block;
}
.how_to_use .inner ol li{
position: relative;
width: 100%;
margin:0 auto 50px;
}
.how_to_use .inner ol li:nth-child(1),.how_to_use .inner ol li:nth-child(3){
margin-top: 50px;
}
.how_to_use .inner ol li:nth-child(1):after{
display: none;
}
.how_to_use .inner ol li:nth-child(2):after{
display: none;
}
.how_to_use .inner ol li:nth-child(1) figure img{
position: absolute;
top: 7vw;
left: 0;
}
.how_to_use .inner ol li:nth-child(2) figure img{
position: absolute;
top: 7vw;
left: -6vw;
}
.how_to_use .inner ol li:nth-child(3) figure img{
position: absolute;
top: 5vw;
left: 1vw;
}
.how_to_use .inner ol li figure{
width: 80vw;
height: 80vw;
margin: auto;
}
.how_to_use .inner ol li p{
font-size: 1.8rem;
margin-top: 16px;
}
.how_to_use .inner ol li p span{
display: block;
font-size: 1.4rem;
margin-top: 8px;
}
.how_to_use .inner ol li .comment{
font-size: 4vw;
}
.how_to_use .inner ol li .comment::before{
position: absolute;
top: -8vw;
left: -4vw;
content: "";
width: 15vw;
height: 27vw;
background: url(../images/parts-howto-comment.svg) no-repeat;
background-size: 100% auto;
}
.how_to_use .inner ol li:nth-child(2) .comment{
position: absolute;
top:0;
left:60vw;
}
.how_to_use .inner ol li:nth-child(3) .comment{
position: absolute;
top:-2vw;
left:50vw;
transform: rotate(-20deg);
}
.how_to_use .inner ol li::before{
width: 18vw;
height: 18vw;
font-size: 9vw;
padding-bottom: 1vw;
position: absolute;
top: 2vw;
left: 8vw;
}
}

/*=============================== choose ================================*/
.choose{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
padding: 100px 0 210px;
background: #fff;
z-index: 0;
}
.choose::before {
content: "";
position: absolute;
top: -180px;
left: 50%;
transform: translateX(-50%);
width:1920px;
height: 180px;
background: url(../images/bg-sct02-top.png) no-repeat top center;
}
.choose .inner{
width: 1200px;
margin: auto ;
}
.choose .inner h2{
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
margin-bottom: 54px;
}
.choose .inner h2::before{
content: "";
width: 688px;
height: 95px;
position: absolute;
top: 72px;
left: 70%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
background: url(../images/bg-h2-choose.svg) no-repeat;
}
.choose .inner h2 span:nth-child(1){
display: block;
text-align: center;
font-size: 3rem;
font-weight: 700;
padding-top: 46px;
margin-bottom: 12px;
background: url(../images/icon/icon-flag-b.svg) no-repeat top center;
}
.choose .inner h2 span:nth-child(2){
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
line-height: 0;
width: 158px;
height:30px ;
background: url(../images/parts-h3-bottom-b.svg) no-repeat;
margin: auto;
}
.choose .inner ul{
position: relative;
width: 670px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 35px;
margin: auto;
}
.choose .inner ul::before{
content: "";
width: 774px;
height: 172px;
position: absolute;
top: 220px;
left: 48%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
background: url(../images/bg-choose.svg) no-repeat;
}
.choose .inner .lead{
text-align: center;
font-size: 1.6rem;
margin-bottom: 46px;
}
.choose .inner ul li{
width: 200px;
text-align: center;
}
.choose .inner ul li figure{
position: relative;
width: 200px;
height: 200px;
background: #faf2cc;
border-radius: 50%;
}
.choose .inner ul li img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
width: 285px;
height: 285px;
}
.choose .inner ul li:nth-child(1) img{
position: absolute;
top: 46%;
left: 48%;
}
.choose .inner ul li:nth-child(2) img{
position: absolute;
top: 44%;
left: 50%;
}
.choose .inner ul li:nth-child(3) img{
position: absolute;
top: 50%;
left:60%;
}
.choose .inner ul li:nth-child(4) img{
position: absolute;
top: 54%;
left:40%;
}
.choose .inner ul li:nth-child(5) img{
position: absolute;
top: 54%;
left:50%;
}
.choose .inner ul li p{
font-size: 2rem;
font-weight: 700;
line-height: 1.3;
margin-top: 16px;
}
.choose .inner > p{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 800px;
height: 64px;
color: #f29601;
font-size: 2.4rem;
font-weight: 700;
border: 4px solid #f29601;
border-radius: 64px;
margin:50px auto 0;
}
.choose .inner > p::before{
content:"";
position: absolute;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
width: 23px;
height: 19px;
background: url(../images/parts-choose-arrow.svg) no-repeat;
}
.choose .inner .btn a{
display: flex;
align-items: center;
justify-content: center;
width: 288px;
height: 70px;
background: #f29601 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
border-radius: 80px;
color: #fff;
font-size: 1.6rem;
font-weight: 500;
text-decoration: none;
margin:50px auto 0;
transition: 0.3s;
}
.choose .inner .btn a:hover{
background: #88d037 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
}

@media  only screen and (max-width: 768px) {
.choose{
position: relative;
width: 100%;
max-width: 100%;
padding: 20px 0 100px;
}
.choose::before {
content: "";
position: absolute;
top: -70px;
width:768px;
height: 72px;
background: url(../images/bg-sct02-top.png) no-repeat top center;
background-size: 100% auto;
}
.choose .inner{
width: 100%;
padding: 0 20px;
}
.choose .inner h2{
position: initial;
transform: initial;
margin-bottom: 50px;
}
.choose .inner h2::before{
content: "";
width: 320px;
height: 100px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
background: url(../images/bg-h2-choose-sp.svg) no-repeat;
background-size: 100% auto;
}
.choose .inner h2 span:nth-child(1){
font-size: 2rem;
}
.choose .inner h2 span:nth-child(2){
font-size: 1.4rem;
}
.choose .inner ul{
display: flex;
gap: 12px;
width: 100%;
}
.choose .inner ul::before{
content: "";
width: 774px;
height: 172px;
position: absolute;
top: 220px;
left: 48%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
background: url(../images/bg-choose.svg) no-repeat;
}
.choose .inner .lead{
font-size: 1.6rem;
line-height: 1.5;
margin-bottom: 40px;
}
.choose .inner ul li{
position: relative;
width:calc((100% - 12px) / 2);
margin:0 auto 10px;
}
.choose .inner ul li figure{
width: calc(50vw - 30px);
height:  calc(50vw - 30px);
 margin: auto;
}
.choose .inner ul li figure img {
width: 120%;
height: auto;
position: absolute;
top: 50%!important;
left:50%!important;
}
.choose .inner ul li p{
font-size: 4vw;
margin-top: 10px;
}
.choose .inner > p{
text-align: left;
width: 80%;
height: auto;
font-size: 1.4rem;
line-height: 1.3;
border: 3px solid #f29601;
border-radius: 58px;
padding: 14px 20px;
margin:40px auto 0;
}
.choose .inner .btn a{
width: 80%;
height: 60px;
background: #f29601 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
border-radius: 60px;
font-size: 1.4rem;
margin:50px auto 0;
}
}

/*=============================== point ================================*/
.point{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
padding: 100px 0 210px;
background: url(../images/bg-sct03-base.jpg) repeat-y center top;
z-index: 0;
}
.point::before {
content: "";
position: absolute;
top: -180px;
left: 50%;
transform: translateX(-50%);
width:1920px;
height: 180px;
background: url(../images/bg-sct03-top.png) no-repeat top center;
}
.point .inner{
width: 1200px;
margin: auto ;
}
.point .inner h2{
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
margin-bottom: 54px;
}
.point .inner h2 a{
color:var(--c-primary);
text-decoration: none;
transition: 0.3s;
}
.point .inner h2 a:hover{
color:var(--c-primary);
opacity: 0.8;
}
.point .inner h2 span:nth-child(1){
display: block;
text-align: center;
font-size: 3rem;
font-weight: 700;
padding-top: 46px;
margin-bottom: 12px;
background: url(../images/icon/icon-flag-g.svg) no-repeat top center;
}
.point .inner h2 span:nth-child(2){
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
line-height: 0;
width: 158px;
height:30px ;
background: url(../images/parts-h3-bottom-g.svg) no-repeat;
margin: auto;
}
.point .inner .lead{
width: 500px;
margin: auto ;
}
.point .inner h3{
text-align: center;
margin: 50px 0 30px ;
}
.point .inner ul{
display: flex;
justify-content: center;
gap: 30px;
}
.point .inner ul li{
width: 236px;
text-align: center;
}
.point .inner ul.type01 {
    flex-wrap: wrap;
}
.point .inner ul.type01 li:nth-child(1) {
    margin-left: 236px;
}
.point .inner ul.type01 li:nth-child(2) {
    margin-right: 236px;
}
.point .inner ul li figure{
background: #ddd;
width: 236px;
height: 160px;
border: 5px solid #fff;
overflow: hidden;
filter: drop-shadow(0 5px 15px RGBA(0, 0, 0, 0.22));
}
.point .inner ul li:nth-child(odd) figure{
transform: rotate(6deg);
}
.point .inner ul li:nth-child(even) figure{
transform: rotate(-6deg);
}
.point .inner ul li p{
display: inline-block;
margin-top: 16px;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.3;

}
.point .inner ul li p span{
display: inline-block;
padding: 0 15px 4px;
background: linear-gradient(transparent 50%, #fff100 50%);
}
.point .inner .btn a{
display: flex;
align-items: center;
justify-content: center;
width: 288px;
height: 70px;
background: #f29601 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
border-radius: 80px;
color: #fff;
font-size: 1.6rem;
font-weight: 500;
text-decoration: none;
margin:50px auto 0;
transition: 0.3s;
}
.point .inner .btn a:hover{
background: #88d037 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
}
@media  only screen and (max-width: 768px) {
.point{
width: 100%;
max-width: 100%;
margin: auto;
padding: 20px 0 100px;
background: url(../images/bg-sct03-base.jpg) repeat-y center top;
}
.point::before {
content: "";
position: absolute;
top: -70px;
width:768px;
height: 72px;
background: url(../images/bg-sct03-top.png) no-repeat top center;
background-size: 100% auto;
}
.point .inner{
width: 100%;
padding: 0 20px;
}
.point .inner h2{
position: initial;
transform: initial;
margin-bottom: 50px;
}
.point .inner h2 span:nth-child(1){
font-size: 2rem;
}
.point .inner h2 span:nth-child(2){
font-size: 1.4rem;
}
.point .inner .lead{
width: 100%;
max-width: 500px;
}
.point .inner .lead img{
width: 100%;
height: auto;
}
.point .inner h3{
text-align: center;
margin: 60px 0 20px ;
}
.point .inner h3 img{
width: 100%;
height: auto;
}
.point .inner ul{
flex-wrap: wrap;
gap: 20px 10px;
}
.point .inner ul li{
width: calc((100% - 10px) / 2);
}
.point .inner ul.type01 li:nth-child(1),
.point .inner ul.type01 li:nth-child(2){
	margin: 0;
}
.point .inner ul li figure{
background: #ddd;
width: 100% ;
height: auto;
border: 4px solid #fff;
}
.point .inner ul li:nth-child(odd) figure{
transform: initial;
}
.point .inner ul li:nth-child(even) figure{
transform: initial;
}
.point .inner ul li figure img{
width: 100%;
height: auto;
}
.point .inner ul li p{
margin-top: 8px;
font-size: 1.4rem;
}
}

/*=============================== voice ================================*/
.voice{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
padding: 100px 0 210px;
background: url(../images/bg-sct01-base.jpg) repeat-y center top;
z-index: 0;
}
.voice::before {
content: "";
position: absolute;
top: -180px;
left: 50%;
transform: translateX(-50%);
width:1920px;
height: 180px;
background: url(../images/bg-sct01-top.png) no-repeat top center;
}
.voice .inner{
width: 1200px;
margin: auto;
}
.voice .inner h2{
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
margin-bottom: 54px;
}
.voice .inner{
width: 1200px;
margin: auto;
}
.voice .inner h2{
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.voice .inner h2 a{
color:var(--c-primary);
text-decoration: none;
transition: 0.3s;
}
.voice .inner h2 a:hover{
color:var(--c-primary);
opacity: 0.8;
}
.voice .inner h2::before{
content: "";
width: 398px;
height: 130px;
position: absolute;
top: 16px;
left: 62%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
background: url(../images/bg-h2-voice.svg) no-repeat;
}
.voice .inner h2 span:nth-child(1){
display: block;
text-align: center;
font-size: 3rem;
font-weight: 700;
padding-top: 46px;
margin-bottom: 12px;
background: url(../images/icon/icon-flag-o.svg) no-repeat top center;
}
.voice .inner h2 span:nth-child(2){
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
line-height: 0;
width: 158px;
height:30px ;
background: url(../images/parts-h3-bottom-o.svg) no-repeat;
margin: auto;
}
.voice .inner .balloon{
display: flex;
align-items: center;
justify-content: center;
width: 372px;
height: 392px;
font-size: 1.8rem;
font-weight: 700;
padding-bottom: 30px;
background: url(../images/parts-voice-balloon.svg) no-repeat;
}
.voice .inner .balloon:nth-of-type(2){
background: url(../images/parts-voice-balloon2.svg) no-repeat;
margin-top: 90px;
}
.voice .inner .balloon .wrap{
text-align: center;
}
.voice .inner .balloon .wrap > span{
display: inline-block;
padding-bottom: 8px;
margin-top: 20px;
background: url(../images/line-dashed.png) repeat-x bottom center;
}
.voice .inner .balloon .wrap > span span{
color: #f29601;
font-size: 2.3rem;
}
.voice .inner .btn a{
display: flex;
align-items: center;
justify-content: center;
width: 288px;
height: 70px;
background: #f29601 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
border-radius: 80px;
color: #fff;
font-size: 1.6rem;
font-weight: 500;
text-decoration: none;
margin:50px auto 0;
transition: 0.3s;
}
.voice .inner .btn a:hover{
background: #88d037 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
}

@media  only screen and (max-width: 768px) {
.voice{
position: relative;
width: 100%;
max-width:100%;
padding: 20px 0 100px;
background: url(../images/bg-sct01-base.jpg) repeat-y center top;
z-index: 0;
}
.voice::before {
content: "";
position: absolute;
top: -70px;
width:768px;
height: 72px;
background: url(../images/bg-sct01-top.png) no-repeat top center;
background-size: 100% auto;
}
.voice .inner{
width: 100%;
padding: 0 20px;
}
.voice .inner h2{
position: initial;
transform: initial;
margin-bottom: 50px;
}
.voice .inner h2::before{
content: "";
width: 320px;
height: 100px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
background: url(../images/bg-h2-voice-sp.svg) no-repeat;
background-size: 100% auto;
}
.voice .inner h2 span:nth-child(1){
font-size: 2rem;
}
.voice .inner h2 span:nth-child(2){
font-size: 1.4rem;
}
.voice .inner .layout_container{
display: block;
}
.voice .inner .balloon{
width: 70vw;
height: 74vw;
font-size: 4vw;
padding-bottom: 4vw;
background: url(../images/parts-voice-balloon2.svg) no-repeat;
background-size: 100% auto;
margin: auto;
}
.voice .inner .balloon:nth-of-type(2){
background: url(../images/parts-voice-balloon.svg) no-repeat;
background-size: 100% auto;
margin-top:5vw;
}
.voice .inner .balloon .wrap > span{
display: inline-block;
padding-bottom: 2vw;
margin-top: 3vw;
background: url(../images/line-dashed.png) repeat-x bottom center;
}
.voice .inner .balloon .wrap > span span{
font-size:5vw;
}
.voice .inner .btn a{
width: 80%;
height: 60px;
background: #f29601 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
border-radius: 60px;
font-size: 1.4rem;
margin:50px auto 0;
}
}

/*=============================== faq ================================*/
.faq{
position: relative;
width: 100%;
max-width: 1920px;
margin: auto;
padding: 130px 0 70px;
background: url(../images/bg-sct04-base.jpg) repeat-y center top;
z-index: 0;
}
.faq::before {
content: "";
position: absolute;
top: -180px;
left: 50%;
transform: translateX(-50%);
width:1920px;
height: 180px;
background: url(../images/bg-sct04-top.png) no-repeat top center;
}
.faq .inner{
width: 1200px;
margin: auto;
}
.faq .inner h2{
position: absolute;
top: -60px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.faq .inner h2 a{
color:var(--c-primary);
text-decoration: none;
transition: 0.3s;
}
.faq .inner h2 a:hover{
color:var(--c-primary);
opacity: 0.8;
}
.faq .inner h2::before{
content: "";
width: 380px;
height: 186px;
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
background: url(../images/bg-h2-faq.svg) no-repeat;
}
.faq .inner h2 span:nth-child(1){
display: block;
text-align: center;
font-size: 3rem;
font-weight: 700;
padding-top: 46px;
margin-bottom: 12px;
background: url(../images/icon/icon-flag-b.svg) no-repeat top center;
}
.faq .inner h2 span:nth-child(2){
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
line-height: 0;
width: 158px;
height:30px ;
background: url(../images/parts-h3-bottom-b.svg) no-repeat;
margin: auto;
}
.faq .inner dl{
width: 900px;
margin:0 auto 30px;
}
.faq .inner dl dt{
position: relative;
display: block;
font-size: 2rem;
font-weight: 700;
padding: 30px 88px;
cursor:pointer;
background: #faf2cc url(../images/icon/icon-q.png) no-repeat left 20px center;
border-radius: 20px;
}
.faq .inner dl dd{
display: block;
font-size: 1.6rem;
padding: 30px 30px 30px 88px;
line-height: 1.6;
background: #faf2cc url(../images/icon/icon-a.png) no-repeat left 20px center;
border-radius: 20px;
}
.faq .inner .open dt{
margin-bottom: 10px;
}
.faq .inner #accordion *.open i {
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 32px;
height: 32px;
background: url(../images/icon/icon-accordion-arrow.svg) no-repeat center;
background-size: 32px;
margin: auto;
transform: rotate(0deg);
}
.faq .inner #accordion * i {
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 32px;
height: 32px;
background: url(../images/icon/icon-accordion-arrow.svg) no-repeat center;
background-size: 32px;
margin: auto;
transition: 0.5s;
transform: rotate(180deg);
}
.faq .inner .btn a{
display: flex;
align-items: center;
justify-content: center;
width: 288px;
height: 70px;
background: #f29601 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
border-radius: 80px;
color: #fff;
font-size: 1.6rem;
font-weight: 500;
text-decoration: none;
margin:50px auto 0;
transition: 0.3s;
}
.faq .inner .btn a:hover{
background: #88d037 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
}
@media  only screen and (max-width: 768px) {
.faq{
position: relative;
width: 100%;
max-width: 100%;
padding: 20px 0 80px;
background: url(../images/bg-sct04-base.jpg) repeat-y center top;
z-index: 0;
}
.faq::before {
content: "";
position: absolute;
top: -72px;
width:768px;
height: 72px;
background: url(../images/bg-sct04-top-sp.png) no-repeat top center;
background-size: 100% auto;
}
.faq .inner{
width: 100%;
padding: 0 20px;
}
.faq .inner h2{
position: initial;
transform: initial;
 margin-bottom: 80px;
}
.faq .inner h2::before{
content: "";
width: 320px;
height: 100px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
pointer-events: none;
background: url(../images/bg-h2-faq-sp.svg) no-repeat;
background-size: 100% auto;
}
.faq .inner h2 span:nth-child(1){
font-size: 2rem;
}
.faq .inner h2 span:nth-child(2){
font-size: 1.4rem;
}
.faq .inner dl{
width: 100%;
margin:0 auto 15px;
}
.faq .inner dl dt{
font-size: 1.5rem;
line-height: 1.3;
padding: 10px 50px;
background: #faf2cc url(../images/icon/icon-q.png) no-repeat left 16px center;
background-size: 24px auto;
border-radius: 10px;
}
.faq .inner dl dd{
font-size: 1.4rem;
line-height: 1.3;
padding: 10px 10px 10px 50px;
background: #faf2cc url(../images/icon/icon-a.png) no-repeat left 16px center;
background-size: 24px auto;
border-radius: 10px;
}
.faq .inner #accordion *.open i {
display: block;
position: absolute;
top: 4px;
bottom: 0;
right: 10px;
width: 20px;
height: 20px;
background: url(../images/icon/icon-accordion-arrow.svg) no-repeat center;
background-size: 20px;
}
.faq .inner #accordion * i {
display: block;
position: absolute;
top: 2px;
bottom: 0;
right: 10px;
width: 20px;
height: 20px;
background: url(../images/icon/icon-accordion-arrow.svg) no-repeat center;
background-size: 20px;
}
.faq .inner .btn a{
width: 80%;
height: 60px;
background: #f29601 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
border-radius: 60px;
font-size: 1.4rem;
margin:50px auto 0;
}
}

/*=============================== location ================================*/
.location{
position: relative;
width: 100%;
max-width: 1920px;
height: 1216px;
padding: 48px 0 0;
margin: auto;
background: url(../images/bg-location.jpg) no-repeat center top;
z-index: 0;
}
.location .inner{
width: 1200px;
margin: auto;
}
.location .inner h2{
position: relative;
z-index: 2;
margin-bottom: 54px;
}
.location .inner h2 a{
color:var(--c-primary);
text-decoration: none;
transition: 0.3s;
}
.location .inner h2 a:hover{
color:var(--c-primary);
opacity: 0.8;
}
.location .inner h2 span:nth-child(1){
display: block;
text-align: center;
font-size: 3rem;
font-weight: 700;
padding-top: 46px;
margin-bottom: 12px;
background: url(../images/icon/icon-flag-g.svg) no-repeat top center;
}
.location .inner h2 span:nth-child(2){
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
font-weight: 700;
line-height: 0;
width: 158px;
height:30px ;
background: url(../images/parts-h3-bottom-g.svg) no-repeat;
margin: auto;
}
.location .inner .wrap{
position: relative;
width: 600px;
margin-top: -258px;
margin-left: auto;
padding-top: 608px;
}
.location .inner .wrap::before{
position: absolute;
top: 0;
left: 60px;
content: "";
width: 505px;
height: 713px;
background: url(../images/parts-location-ok.png) no-repeat;
}
.location .inner .wrap .parts01{
position: absolute;
top: 400px;
right: -28px;
}
.location .inner .catch{
position: relative;
z-index: 1;
}
.location .inner .catch > span:nth-of-type(1){
display: inline-flex;
align-items: center;
background: #fff;
border-radius: 20px;
height: 68px;
padding: 0 24px;
margin-bottom: 10px;
font-size: 3.2rem;
font-weight: 700;
}
.location .inner .catch > span:nth-of-type(2){
display: inline-flex;
align-items: center;
background: #fff;
border-radius: 20px;
height: 68px;
padding: 0 24px 0 24px;
font-size: 3.2rem;
font-weight: 700;
margin-left: 80px;
}
.location .inner .catch > span:nth-of-type(2) span:nth-of-type(1){
color: #f29601;
font-size: 4.2rem;
}
.location .inner h3{
margin-top: 24px;
margin-left: 150px;
}
.location .inner ul{
display: flex;
gap: 16px;
margin-top: 8px;
margin-left: 100px;
margin-bottom: 30px;
}
.location .inner ul li{
width: 221px;
}
.location .inner .btn a{
display: flex;
align-items: center;
justify-content: center;
width: 288px;
height: 70px;
background: #f29601 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
border-radius: 80px;
color: #fff;
font-size: 1.6rem;
font-weight: 500;
text-decoration: none;
margin-left: 184px;
transition: 0.3s;
}
.location .inner .btn a:hover{
background: #88d037 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
}
@media  only screen and (max-width: 768px) {
.location{
position: relative;
width: 100%;
max-width:  100%;
height: auto;
padding: 50px 0 80px;
margin: auto;
background: #a9d5ff url(../images/bg-location-sp.jpg) no-repeat center bottom;
background-size: 100% auto;
z-index: 0;
}
.location .inner{
width: 100%;
padding: 0 20px;
}
.location .inner h2{
position: relative;
top: initial;
left: initial;
z-index: 1;
transform: initial;
margin-bottom: 50px;
}
.location .inner h2 span:nth-child(1){
font-size: 2rem;
}
.faq .inner h2 span:nth-child(2){
font-size: 1.4rem;
}
.location .inner .wrap{
position: relative;
width: 100%;
margin-top: 0;
margin-left: initial;
padding-top: 0;
}
.location .inner .wrap::before{
position: absolute;
top: -78vw;
left: 50%;
transform: translateX(-50%);
content: "";
width: 80vw;
height: 90vw;
background: url(../images/parts-location-ok.png) no-repeat;
background-size: 100% auto;
}
.location .inner .wrap .parts01{
width: 100%;
max-width:261px;
position: initial;
margin: auto;
}
.location .inner .wrap .parts01 img{
width: 100%;
height: auto;
}
.location .inner .catch{
text-align: center;
margin-bottom: 40px;
white-space: nowrap;
margin-top: 70vw;
}
.location .inner .catch > span:nth-of-type(1){
border-radius: 3vw;
height: 14vw;
padding: 0 3vw;
margin-bottom: 10px;
font-size: 4.5vw;
}
.location .inner .catch > span:nth-of-type(2){
border-radius: 3vw;
height: 14vw;
padding: 0 3vw;
font-size: 4.5vw;
margin-left: 0;
}
.location .inner .catch > span:nth-of-type(2) span:nth-of-type(1){
font-size: 6vw;
}
.location .inner h3{
width: 90%;
max-width:337px;
margin: 50px auto 0;
}
.location .inner h3 img{
width: 100%;
height: auto;
}
.location .inner ul{
display: block;
gap: 16px;
margin-top: 16px;
margin-left: 0;
}
.location .inner ul li{
width: 100%;
max-width: 221px;
margin:16px auto;
}
.location .inner ul li img{
width: 100%;
height: auto;
}
.location .inner .btn a{
width: 80%;
height: 60px;
background: #f29601 url(../images/icon/icon-arrow01.svg) no-repeat right 20px center;
border-radius: 60px;
font-size: 1.4rem;
margin:40% auto 0;
}
}