@charset "utf-8";
html {
font-size: 62.5%;
line-height: 1.8;
}
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] select, html[lang="ja"] textarea {
font-family: YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:500;
}
body{
color:#000;
font-size: 1.4rem;
background:#fff;
-webkit-text-size-adjust: 100%;
}
.robot{
font-family: 'Roboto',YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
/*共通*/
.btn a{
width: 100%;
height: 80px;
line-height: 80px;
border-radius: 50px;
}
.btn.middle a{
height: 60px;
line-height: 60px;
}
@media screen and (max-width:767px){
.btn.middle a{
height: 45px;
line-height: 45px;
}
}
.btn.thin a{
height: 35px;
line-height: 35px;
}
.btn a:hover{
background: #000;
}
.btn a .arrow{
width: 7px;
height: 7px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg) translate(0,-75%);
top: 50%;
right: 10%;
transition: border 0.3s ease;
}
.btn.thin a .arrow{
width: 4px;
height: 4px;
}
/*discription*/
.discription{
top: 28px;
left: calc(240px + 2vw);
white-space: nowrap;
z-index: 100;
}
@media screen and (max-width:767px){
.discription{
position: static;
padding:5px 2% 0;
}
#index .discription{
background: #F0F0F0;
}
}
/*header*/
#header{
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
#header .logo{
top: 20px;
left: 2%;
}
@media screen and (max-width:767px){
#header .logo{
top:10px;
left: 3%;
}
}
#header .logo img{
width: 230px;
}
@media screen and (max-width:767px){
#header .logo img{
width: 184px;
}
}
#header .contactBox{
top: 20px;
right: 2%;
}
@media screen and (max-width:767px){
#header .contactBox{
top: 8px;
right: 2%;
width: 184px;
}
}
#header .contactBox .tel{
top: 4px;
}
@media screen and (max-width:980px){
#header .contactBox .tel{
margin-right: 0;
top: 6px;
}
}
#header .contactBox .btn a{
width : 145px;
margin-left: 15px;
}

/*topArea*/
.topArea{
padding-top: 100px;
}
@media screen and (max-width:980px){
.topArea{
padding-top: 70px;
}
}
.topArea .bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80%;
}
.topArea .hukidashi .txtIn{
padding: 0 30px;
}
@media screen and (max-width:980px){
.topArea .hukidashi{
font-size: 5vw;
}
}
.topArea .hukidashi .txtIn:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: #d3101e;
transform: rotate(-30deg);
}
.topArea .hukidashi .txtIn:after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #d3101e;
transform: rotate(30deg);
}
.topArea .hukidashi .num{
font-size: 206%;
}
.topArea .ttl .big{
font-size: 130%;
}
@media screen and (max-width:980px){
.topArea .ttl{
font-size: 5.5vw;
}
.topArea .ttl .big.ls{
letter-spacing: -0.07em;
}
}
.topArea .bgImage{
max-width: 1110px;
padding-top: 708px;
}
@media screen and (max-width:1110px){
.topArea .bgImage{
padding-top: 63.78378378%;
}
}
@media screen and (max-width:980px){
.topArea .bgImage{
max-width: 500px;
padding-top: 867px;
}
}
@media screen and (max-width:767px){
.topArea .bgImage{
padding-top: 173.33333333%;
}
}
.topArea .bgImage .parts{
top: 0;
left: 50%;
transform: translate(-50%,0);
width: 117.117117117%;
max-width: 117.117117117%;
}
@media screen and (max-width:980px){
.topArea .bgImage .parts{
width: 102.666666%;
max-width:102.666666%;
}
}
.topArea .bgImage .hukidashi{
opacity: 0;
white-space: nowrap;
animation: hukidashi 12s infinite;
}
@media screen and (max-width:980px){
.topArea .bgImage .hukidashi{
animation: hukidashiSp 12s infinite;
}
}
.topArea .bgImage .hukidashi:nth-of-type(2),
.topArea .bgImage .hukidashi:nth-of-type(5){
animation-delay: 0s;
}
.topArea .bgImage .hukidashi:nth-of-type(3),
.topArea .bgImage .hukidashi:nth-of-type(6){
animation-delay: 4s;
}
.topArea .bgImage .hukidashi:nth-of-type(4),
.topArea .bgImage .hukidashi:nth-of-type(7){
animation-delay: 8s;
}
@keyframes hukidashi {
0% { opacity: 0; top: -10px;}
7% { opacity: 1; top: 0;}
33.33333% { opacity: 1; top: 0;}
40.33333% { opacity: 0; top: 0;}
41% { opacity: 0; top: -10px;}
100% { opacity: 0; top: -10px;}
}
@keyframes hukidashiSp {
0% { opacity: 0; top: 0;}
7% { opacity: 1; top: 0;}
33.33333% { opacity: 1; top: 0;}
40.33333% { opacity: 0; top: 0;}
41% { opacity: 0; top:0;}
100% { opacity: 0; top: 0;}
}
.topArea .frame{
bottom: 0;
left: 50%;
transform: translate(-50%,0);
width: 320px;
}
@media screen and (max-width:1110px){
.topArea .frame{
width: 28.82882882%;
}
}
@media screen and (max-width:980px){
.topArea .frame{
width: 300px;
bottom: 120px;
}
}
@media screen and (max-width:767px){
.topArea .frame{
width: 60%;
bottom: 14%;
}
}
.topArea .frame .video{
top: 16%;
left: 5%;
width: 90%;
height: auto;
}
/*lead*/
@media screen and (max-width:767px){
.lead{
font-size: 1.8rem;
}
}
/*pointArea*/
.pointArea{
padding-top: 30px;
}
.pointSlide{
max-width: 750px;
width: 85%;
}
.pointSlide .slick-list{
overflow: visible;
}

.pointSlide .pointTtl{
width: 70%;
max-width: 300px;
height: 60px;
line-height: 60px;
border-radius: 30px;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
}
@media screen and (max-width:767px){
.pointSlide .pointTtl{
height: 40px;
line-height: 40px;
font-size: 2rem;
}
}
.pointSlide li{
margin: 0 25px;
padding: 100px 20px 50px;
}
@media screen and (max-width:767px){
.pointSlide li{
margin: 0 10px;
padding: 50px 20px 30px;
border-radius: 20px;
}
}
.pointSlide .img{
width: 60.7142%;
}
@media screen and (max-width:767px){
.pointSlide .img{
width: 100%;
margin-bottom: 10px;
}
}
.pointSlide .note{
min-height: 5.4em;
}
@media screen and (max-width:767px){
.pointSlide .note{
font-size: 1.2rem;
min-height: 7.2em;
}
}
.pointSlide .slick-prev,
.pointSlide .slick-next{
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
border-radius: 30px;
background: #d3101e;
cursor: pointer;
}
@media screen and (max-width:767px){
.pointSlide .slick-prev,
.pointSlide .slick-next{
width: 40px;
height: 40px;
}
}
.pointSlide .slick-next{
right: -50px;
}
.pointSlide .slick-prev{
left: -50px;
}
@media screen and (max-width:980px){
.pointSlide .slick-next{
right: -15px;
}
.pointSlide .slick-prev{
left:-15px;
}
}
.pointSlide .slick-prev:before,
.pointSlide .slick-next:before{
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
width: 8px;
height: 8px;
}
@media screen and (max-width:767px){
.pointSlide .slick-prev:before,
.pointSlide .slick-next:before{
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
width: 6px;
height: 6px;
}
}
.pointSlide .slick-prev:before{
transform: translate(-39%,-50%) rotate(135deg);
}
.pointSlide .slick-next:before{
transform: translate(-59%,-50%) rotate(-45deg);
}
/*priceBox*/
.priceBox{
box-sizing: border-box;
width: 47.5%;
padding: 65px 20px 50px;
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.05), -5px -5px 8px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width:767px){
.priceBox{
width: 100%;
padding: 45px 20px 30px;
border-radius: 20px;
}
.priceBox:first-child{
margin-bottom: 50px;
}
}
.priceBox .priceTtl{
width: 75%;
max-width: 300px;
height: 60px;
line-height: 60px;
border-radius: 30px;
top: 0;
left: 50%;
transform: translate(-50%,-50%);
}
@media screen and (max-width:767px){
.priceBox .priceTtl{
height: 40px;
line-height: 40px;
font-size: 2rem;
}
}
.priceBox .num{
font-size: 232%;
margin-right: 5px;
}
.priceBox .planBox{
box-sizing: border-box;
width: 47.5%;
padding: 20px;
}
@media screen and (max-width:767px){
.priceBox .planBox{
width: 48.5%;
padding: 20px 15px;
}
}
.priceBox .planBox .num{
font-size: 162.5%;
margin-right:3px;
}
/*flowArea*/
.flowArea{
padding: 100px 0;
}
@media screen and (max-width:767px){
.flowArea{
padding: 70px 0;
}
}
.flow .lineBox{
width: 160px;
}
@media screen and (max-width:767px){
.flow .lineBox{
width: 40px;
}
}
.flow .lineBox:after{
content: "";
position: absolute;
top: 100px;
left: 59px;
width: 1px;
height: calc(100% - 185px);
background: #d3101e;
}
@media screen and (max-width:980px){
.flow .lineBox:after{
top: 143px;
height: calc(100% - 270px);
}
}
@media screen and (max-width:767px){
.flow .lineBox:after{
left: 10px;
top: 107px;
height: calc(100% - 203px);
}
}
.flowBox{
width: calc(100% - 160px);
}
@media screen and (max-width:767px){
.flowBox{
width: calc(100% - 40px);
}
}
.flow .flowContent{
box-sizing: border-box;
padding: 50px;
box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.05), -5px -5px 8px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width:767px){
.flow .flowContent{
padding: 30px 25px;
border-radius: 20px;
}
}
.flow .flowContent:before{
content: "";
position: absolute;
top: 50%;
left: -110px;
transform: translate(0,-50%);
width: 20px;
height: 20px;
border: 1px solid #d3101e;
background: #F0F0F0;
border-radius: 50%;
box-sizing: border-box;
}
@media screen and (max-width:767px){
.flow .flowContent:before{
left: -40px;
}
}
.flow .flowContent:after{
content: "";
position: absolute;
top: 50%;
left: -107px;
transform: translate(0,-50%);
width: 14px;
height: 14px;
background: #d3101e;
border-radius: 50%;
box-sizing: border-box;
}
@media screen and (max-width:767px){
.flow .flowContent:after{
left: -37px;
}
}
.flowIn .num{
width: 60px;
height: 60px;
line-height: 60px;
margin-right: 20px;
}
@media screen and (max-width:767px){
.flowIn .num{
width: 50px;
height: 50px;
line-height: 50px;
margin-right: 15px;
}
}
.flowIn .ttl{
width: calc(46% - 80px);
}
@media screen and (max-width:980px){
.flowIn .ttl{
width: calc(100% - 80px);
}
}
@media screen and (max-width:767px){
.flowIn .ttl{
font-size: 2rem;
}
}
.flowIn .note{
width:54%;
}
@media screen and (max-width:980px){
.flowIn .note{
width:100%;
margin-top:15px;
}
}
@media screen and (max-width:767px){
.flowIn .note{
font-size: 1.3rem;
}
}
/*contactArea*/
@media screen and (max-width:767px){
.contactArea .contactLead{
font-size: 2.5rem;
line-height: 1.5;
}
}
.contactArea .btnOtrer{
max-width: 900px;
}
.contactArea .btnBox{
width: 45%;
}
@media screen and (max-width:980px){
.contactArea .btnBox{
width: 48.5%;
}
.contactArea .btnBox .note{
font-size: 1.5rem;
}
}
@media screen and (max-width:767px){
.contactArea .btnBox{
width: 100%;
}
.contactArea .btnBox:first-child{
margin-bottom: 40px;
}
.contactArea .btnBox .note{
margin-bottom: 20px;
}
}
.contactArea .btnBox .icon{
width: 20px;
margin-right:15px;
top: -2px;
}
@media screen and (max-width:980px){
.contactArea .telNote{
font-size: 1.5rem;
}
}
.contactArea .telIcon{
width: 14px;
margin-right: 10px;
top: -2px;
}
.contactArea .telInfo{
padding-left: 24px;
}
/*footer*/
#footer{
padding: 80px 0 30px;
}
@media screen and (max-width:767px){
#footer{
padding: 60px 0 30px;
}
}
#footer .logo{
width: 200px;
margin-bottom: 60px;
}
@media screen and (max-width:767px){
#footer .logo{
margin-bottom: 30px;
}
}
#footer .fNavi{
top: 0;
right: 0;
}
@media screen and (max-width:767px){
#footer .fNavi{
position: static;
margin-left: 0;
margin-bottom: 30px;
}
}
#footer .fNavi .navi{
margin-left: 3em;
}
@media screen and (max-width:767px){
#footer .fNavi .navi{
margin-right: 2em;
margin-left: 0;
line-height: 2.5;
}
}
/*fixBtn*/
.fixBtn{
z-index: 100;
bottom: 10px;
left: 3%;
width: 94%;
}
.fixBtn .btn{
width: 48.5%;
max-width: 350px;
}
.fixBtn .btn:first-child{
margin-right: 3%;
}
/*basePage*/
.basePage{
padding-top: 130px;
min-height: calc(100vh - 100px);
}
@media screen and (max-width:767px){
.basePage{
padding-top: 100px;
}
}
/*grecaptcha*/
.grecaptcha-badge {
  visibility: hidden;
}