@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap');

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: "RocknRoll One","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
text-align:left;
color:#191919;
min-width:1080px;
}
@media screen and (max-width:767px){
html,body{ font-size:4vw; min-width:240px; max-width:767px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}
figure.img img{ padding:8px; background:#fff; box-shadow:rgba(0, 0, 0, 0.2) 0 0 5px 2px;}
@media screen and (max-width:767px){
figure.img img{ padding: 1.25vw;}
}

/*youtube*/
.youtube{ position:relative; width:100%; padding-top:56.25% !important;}
.youtube iframe{ position: absolute; top:0; right:0; width:100% !important; height:100% !important;}

/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}
.black{ color:#191919;}
.red{ color: #f1204a;}
.blue{ color: #2dccd3;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
header{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 0; position: relative; overflow: hidden; background: url("../images/fv_bg.jpg") center center; background-size: cover;}
header:before{ content: ""; width: 320px; height: 320px; background: url("../images/bg01.png"); background-size: 100%; position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;}
header:after{ content: ""; width: 360px; height: 360px; background: url("../images/bg02.png"); background-size: 100%; position: absolute; right: 0; bottom: 0; z-index: 5; pointer-events: none;}
#fv{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
#fv h1{ margin-bottom: 60px;}
#fv h1 img{ width: 200px;}
#fv h2{ display: flex; align-items: center; justify-content: center; font-size: 3.2rem; position: relative; margin-bottom: 40px;}
#fv h2:before{ content: ""; width: 48px; height: 48px; background: url("../images/fv_tit_ico.png"); background-size: 100%; position: absolute; left: -36px; top: -12px;}
#fv h2:after{ content: ""; width: 48px; height: 48px; background: url("../images/fv_tit_ico2.png"); background-size: 100%; position: absolute; right: -36px; bottom: -12px;}
#fv p{ font-size: 1.6rem; line-height: 2em;}
@media screen and (max-width:767px){
header{ padding: 12.5% 0 22.5%;}
header:before{ width: 40vw; height: 40vw;}
header:after{ width: 40vw; height: 40vw;}
#fv h1{ margin-bottom: 7.5%;}
#fv h1 img{ width: 25vw;}
#fv h2{ font-size: 2.4rem; letter-spacing: 0.2em; margin-bottom: 7.5%;}
#fv h2:before{ width: 7.5vw; height: 7.5vw; left: -2.5vw; top: -2.5vw;}
#fv h2:after{ width: 7.5vw; height: 7.5vw; right: -3.75vw; bottom: -2.5vw;}
#fv p{ font-size: 1.4rem; letter-spacing: 0.1em; line-height: 1.75em;}
}

header:before{ animation: header_ico01 ease-in-out 1.0s alternate infinite; animation-delay: 0s;}
header:after{ animation: header_ico02 ease-in-out 1.0s alternate infinite; animation-delay: 0s;}
@keyframes header_ico01{
0%{ left: 0;}
100%{ left: -1.875vw;}
}
@keyframes header_ico02{
0%{ right: 0;}
100%{ right: -1.875vw;}
}


/*fv_slide*/
#fv_slide_wrap{ overflow: hidden;}
#fv_slide{ display: flex; width: calc((360px*5)*3); box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
#fv_slide ul{ display: flex; width: calc(360px*5);}
@media screen and (max-width:767px){
#fv_slide{ width: calc((50vw*5)*3);}
#fv_slide ul{ width: calc(50vw*5);}
}

#fv_slide{ position: relative; animation: fv_slide linear 10.0s infinite; animation-delay: 0s;}
@media screen and (max-width:767px){
#fv_slide{ position: relative; animation: fv_slide_smp linear 10.0s infinite; animation-delay: 0s;}
}
@keyframes fv_slide{
0%{ left: 0;}
100%{ left: calc(-360px*5);}
}
@keyframes fv_slide_smp{
0%{ left: 0;}
100%{ left: calc(-50vw*5);}
}


/*liver_slide*/
#liver_slide_wrap{ overflow: hidden;}
#liver_slide{ display: flex; width: calc((360px*8)*3); box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
#liver_slide ul{ display: flex; width: calc(360px*8);}
#liver_slide ul li{ position: relative; z-index: 1; cursor: pointer;}
#liver_slide ul li:after{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.9); opacity: 0; position: absolute; left: 0; top: 0; z-index: 1; transition: 0.3s;}
#liver_slide ul li p{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: auto; text-align: center; font-size: 1.2rem; color: #fff; text-decoration: underline; z-index: 3; opacity: 0; transition: 0.3s;}
#liver_slide ul li:hover:after{ opacity: 1.0;}
#liver_slide ul li:hover p{ opacity: 1.0;}
@media screen and (max-width:767px){
#liver_slide{ width: calc((33.33vw*8)*3);}
#liver_slide ul{ width: calc(33.33vw*8);}
#liver_slide ul li p{ font-size: 0.9rem;}
}

#liver_slide{ position: relative; animation: liver_slide linear 16.0s infinite; animation-delay: 0s;}
@media screen and (max-width:767px){
#liver_slide{ position: relative; animation: liver_slide_smp linear 16.0s infinite; animation-delay: 0s;}
}
@keyframes liver_slide{
0%{ left: 0;}
100%{ left: calc(-360px*8);}
}
@keyframes liver_slide_smp{
0%{ left: 0;}
100%{ left: calc(-33.33vw*8);}
}


/*フッター*/
p.copyright{ background: #191919; color: #fff; text-align: center; font-size: 0.8rem; padding: 0.5em;}


/*fixed_ban*/
#fixed_ban{ display: flex; align-items: center; justify-content: center; background: #06c755; position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; z-index: 3; overflow: hidden; box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px 2px;}
#fixed_ban a{ display: flex; align-items: center; justify-content: center; width: 540px; height: 80px; background: #06c755; color: #fff; font-size: 1.6rem; letter-spacing: 0.1em; position: relative; z-index: 1; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px;}
#fixed_ban a:after{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.1); position: absolute; left: 0; top: 0;}
#fixed_ban a i{ margin-right: 0.25em; margin-top: 0.125em;}
@media screen and (max-width:767px){
#fixed_ban a{ width: 100%; height: 15vw; font-size: 1.4rem; letter-spacing: 0.1em;}
}

#fixed_ban a{ animation: fixed_ban ease-in-out 0.5s alternate infinite; animation-delay: 0s;}
@keyframes fixed_ban{
0%{ transform: scale(1.0);}
100%{ transform: scale(1.05);}
}


/*メイン*/
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:1000px;}
@media screen and (max-width:767px){
.maincontent{ padding:0; margin:0 auto; width:92.5%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; letter-spacing: 0.1em;}



/*lead*/
#lead01{ background: url("https://www.transparenttextures.com/patterns/brushed-alum-dark.png") #000; color: #fff;}
#lead02{ background: url("https://www.transparenttextures.com/patterns/brushed-alum-dark.png") #2dccd3; color: #fff;}
#lead03{ background: url("https://www.transparenttextures.com/patterns/brushed-alum-dark.png") #f1204a; color: #fff;}

.lead{ padding: 80px 0;}
.lead dl{ display: flex; align-items: center; justify-content: space-between;}
.lead dl dd{ width: 320px;}
.lead dl dt{ width: calc(100% - 400px); text-align: center;}
.lead dl dt h3{ font-size: 2rem; border-bottom: 8px double #fff; margin-bottom: 20px; padding-bottom: 0.25em;}
.lead dl dt p{ font-size: 1.2rem;}
.lead dl dt ul{ text-align: left; font-size: 1.5rem; line-height: 1.5em;}
.lead dl dt ul li{ border-bottom: 2px dotted #fff; padding: 0.5em 0.5em 0.5em 1.75em; position: relative;}
.lead dl dt ul li:first-child{ border-top: 2px dotted #fff;}
.lead dl dt ul li i{ position: absolute; left: 0.5em; top: 0.6em; line-height: 1.5em;}
.lead h4{ background: #191919; color: #fff; text-align: center; font-size: 1.6rem; line-height: 1.5em; padding: 0.5em; margin-top: 40px; position: relative;}
.lead h4:before{ content: ""; width: 80px; height: 40px; border-left: 4px solid #2dccd3; border-top: 4px solid #2dccd3; position: absolute; left: -8px; top: -8px;}
.lead h4:after{ content: ""; width: 80px; height: 40px; border-right: 4px solid #2dccd3; border-bottom: 4px solid #2dccd3; position: absolute; right: -8px; bottom: -8px;}

#lead01.lead dl{ flex-direction: row-reverse;}
#lead03.lead dl{ flex-direction: row-reverse;}
#lead02 dl dd img{ border: 8px solid #fff; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px; transform: rotate(5deg);}
#lead03 dl dd img{ border: 8px solid #fff; box-shadow:rgba(0, 0, 0, 0.25) 0 0 5px 2px; transform: rotate(-5deg);}
@media screen and (max-width:767px){
.lead{ padding: 12.5% 0;}
.lead dl{ display: block;}
.lead dl dd{ width: 60%; margin: 7.5% auto 0;}
.lead dl dt{ width: 100%;}
.lead dl dt h3{ font-size: 1.5rem; border-width: 1.25vw; margin-bottom: 3.75%;}
.lead dl dt p{ font-size: 1rem; text-align: justify;}
.lead dl dt ul{ font-size: 1.1rem;}
.lead h4{ font-size: 1.1rem; margin-top: 7.5%;}
.lead h4:before{ width: 15vw; height: 7.5vw;}
.lead h4:after{ width: 15vw; height: 7.5vw;}
}



/*why*/
#why{ padding: 80px 0; background: url("../images/why_bg.png");}
#why h2{ text-align: center; font-size: 2.4rem; margin-bottom: 40px; overflow: hidden;}
#why h2 strong{ display: inline-block; position: relative;}
#why h2 strong:before{ content: ""; width: 480px; height: 4px; background: #191919; position: absolute; left: -500px; top: 50%;}
#why h2 strong:after{ content: ""; width: 480px; height: 4px; background: #191919; position: absolute; right: -500px; top: 50%;}

#why dl{ display: flex; align-items: center; justify-content: space-between;}
#why dl dt{ width: calc(100% - 280px);}
#why dl dd{ width: 240px;}
#why dl dt p{ line-height: 2em;}
#why dl dt p strong{ font-size: 110%; text-decoration: underline;}
#why dl dd figure{ margin: 80px auto;}
@media screen and (max-width:767px){
#why{ padding: 12.5% 0;}
#why h2{ font-size: 1.6rem; margin-bottom: 5%;}
#why h2 strong:before{ width: 50vw; height: 0.75vw; left: -52.5vw;}
#why h2 strong:after{ width: 50vw; height: 0.75vw; right: -52.5vw;}

#why dl{ display:block;}
#why dl dt{ width: 100%;}
#why dl dd{ width: 100%; display: flex; align-items: center; margin-top: 7.5%;}
#why dl dd figure{ margin: 0 3.75%;}
}



/*feature*/
#feature{ padding: 80px 0; background: url("../images/feature_bg.jpg"); background-size: cover;}
#feature h2{ color: #fff; text-align: center; font-size: 2.4rem; margin-bottom: 40px; overflow: hidden;}
#feature h2 strong{ display: inline-block; position: relative;}
#feature h2 strong:before{ content: ""; width: 480px; height: 4px; background: #fff; position: absolute; left: -500px; top: 50%;}
#feature h2 strong:after{ content: ""; width: 480px; height: 4px; background: #fff; position: absolute; right: -500px; top: 50%;}

#feature ul{ display: flex; flex-wrap: wrap; width: calc(100% + 40px); margin: -20px 0 -20px -20px;}
#feature ul li{ display: flex; flex-direction: column; width: calc(50% - 40px); margin: 20px; background: #fff; padding: 20px; position: relative; z-index: 1;}
#feature ul li:before{ content: ""; width: 80px; height: 40px; border-left: 4px solid #2dccd3; border-top: 4px solid #2dccd3; position: absolute; left: -8px; top: -8px;}
#feature ul li:after{ content: ""; width: 80px; height: 40px; border-right: 4px solid #f1204a; border-bottom: 4px solid #f1204a; position: absolute; right: -8px; bottom: -8px;}
#feature ul li h3{ display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; text-align: center; background: #191919; color: #fff; margin: 15px auto 10px; font-size: 1.6rem; position: relative;}
#feature ul li h3.min{ font-size: 1.33rem; letter-spacing: 0;}
#feature ul li h3:before{ content: ""; width: 0; height: 0; border-style: solid; border-color: #2dccd3 transparent transparent transparent; border-width: 20px 20px 0px 0px; position: absolute; left: -4px; top: -4px;}
#feature ul li h3:after{ content: ""; width: 0; height: 0; border-style: solid; border-color: transparent transparent #f1204a transparent; border-width: 0px 0px 20px 20px; position: absolute; right: -4px; bottom: -4px;}
#feature ul li p{ font-size: 1rem; text-align: justify; line-height: 1.5em;}
@media screen and (max-width:767px){
#feature{ padding: 12.5% 0;}
#feature h2{ font-size: 1.6rem; margin-bottom: 5%;}
#feature h2 strong:before{ width: 50vw; height: 0.75vw; left: -52.5vw;}
#feature h2 strong:after{ width: 50vw; height: 0.75vw; right: -52.5vw;}

#feature ul{ display: block; width: 100%; margin: 0;}
#feature ul li{ width: 100%; margin: 7.5% auto 0; padding: 3.75% 3.75% 5%;}
#feature ul li:before{ width: 15vw; height: 7.5vw;}
#feature ul li:after{ width: 15vw; height: 7.5vw;}
#feature ul li h3{ height: 12.5vw; margin: 3.75% auto 2.5%; font-size: 1.4rem;}
#feature ul li h3.min{ font-size: 1.25rem; letter-spacing: 0;}
#feature ul li h3:before{ border-width: 5vw 5vw 0 0;}
#feature ul li h3:after{ border-width: 0 0 5vw 5vw;}
#feature ul li p{ font-size: 1rem;}
}



/*flow*/
#flow{ padding: 120px 0 80px; background: url("../images/flow_bg.png");}
#flow .maincontent{ background: rgba(255,255,255,0.9); padding: 120px 40px 40px; box-shadow:rgba(0, 0, 0, 0.2) 0 0 10px 5px; position: relative;}
#flow figure.ico{ position: absolute; left: 0; right: 0; top: -80px; margin: auto;}
#flow figure.ico2{ width: 160px; position: absolute; right: -40px; top: 60px; z-index: 3;}

#flow h2{ text-align: center; font-size: 2.4rem; margin-bottom: 40px; overflow: hidden;}
#flow h2 strong{ display: inline-block; position: relative;}
#flow h2 strong:before{ content: ""; width: 480px; height: 4px; background: #191919; position: absolute; left: -500px; top: 50%;}
#flow h2 strong:after{ content: ""; width: 480px; height: 4px; background: #191919; position: absolute; right: -500px; top: 50%;}

#flow dl{ display: flex; align-items: center; margin-bottom: 60px;}
#flow dl:last-child{ margin-bottom: 0;}
#flow dl dt{ width: 180px; margin-right: 40px; position: relative;}
#flow dl dt:after{ content: ""; width: 0; height: 0; border-style: solid; border-color: #06c755 transparent transparent transparent; border-width: 20px 30px 0px 30px; position: absolute; left: 0; right: 0; bottom: -40px; margin: auto;}
#flow dl dd{ width: calc(100% - 220px); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
#flow dl dd strong.step{ display: flex; align-items: center; justify-content: center; background: #06c755; color: #fff; font-size: 1.2rem; padding: 0.125em 0.75em; margin-bottom: 10px;}
#flow dl dd h3{ font-size: 1.8rem; line-height: 1em; color: #06c755; text-decoration: underline; margin-bottom: 20px;}
#flow dl dd p{ font-size: 1rem; line-height: 1.5em;}

#flow dl:nth-child(2) dt:after{ border-color: #2dccd3 transparent transparent transparent;}
#flow dl:nth-child(3) dt:after{ border-color: #2dccd3 transparent transparent transparent;}
#flow dl:nth-child(4) dt:after{ border-color: #f1204a transparent transparent transparent;}
#flow dl:nth-child(5) dt:after{ display: none;}

#flow dl:nth-child(2) dd strong.step{ background: #2dccd3;}
#flow dl:nth-child(2) dd h3{ color: #2dccd3;}
#flow dl:nth-child(3) dd strong.step{ background: #2dccd3;}
#flow dl:nth-child(3) dd h3{ color: #2dccd3;}
#flow dl:nth-child(4) dd strong.step{ background: #f1204a;}
#flow dl:nth-child(4) dd h3{ color: #f1204a;}
#flow dl:nth-child(5) dd strong.step{ background: #191919;}
#flow dl:nth-child(5) dd h3{ color: #191919;}
@media screen and (max-width:767px){
#flow{ padding: 17.5% 0 12.5%;}
#flow .maincontent{ padding: 12.5% 3.75% 5%;}
#flow figure.ico{ width: 50vw; top: -10vw;}
#flow figure.ico2{ width: 12.5vw; right: 2.5vw; top: -5vw;}
#flow h2{ font-size: 1.6rem; margin-bottom: 5%;}
#flow h2 strong:before{ width: 50vw; height: 0.75vw; left: -52.5vw;}
#flow h2 strong:after{ width: 50vw; height: 0.75vw; right: -52.5vw;}
#flow dl{ align-items: flex-start; position: relative; margin-bottom: 12vw;}
#flow dl dt{ width: 16.25vw; margin-right: 3.75vw; position: static;}
#flow dl dt:after{ border-width: 4vw 6vw 0px 6vw; bottom: -8vw;}
#flow dl dd{ width: calc(100% - 20vw);}
#flow dl dd strong.step{ font-size: 1rem; margin-bottom: 3.75%;}
#flow dl dd h3{ font-size: 1.6rem; margin-bottom: 5%;}
#flow dl dd p{ width: calc(100% + 20vw); margin-left: -20vw; font-size: 1rem;}
}



/*qa*/
#qa{ padding: 80px 0; background: url("../images/qa_bg.png");}
#qa h2{ text-align: center; font-size: 2.4rem; margin-bottom: 40px; overflow: hidden;}
#qa h2 strong{ display: inline-block; position: relative;}
#qa h2 strong:before{ content: ""; width: 480px; height: 4px; background: #191919; position: absolute; left: -500px; top: 50%;}
#qa h2 strong:after{ content: ""; width: 480px; height: 4px; background: #191919; position: absolute; right: -500px; top: 50%;}

#qa .qa_list{ padding: 40px; background: rgba(255,255,255,0.9); box-shadow:rgba(0, 0, 0, 0.1) 0 0 10px 5px; position: relative;}
#qa .qa_list figure.ico{ width: 210px; position: absolute; right: 0; bottom: 0; z-index: 3;}
#qa .qa_list dl{ padding: 30px; border-bottom: 4px dotted #191919;}
#qa .qa_list dl:nth-child(2){ border-top: 4px dotted #191919;}
#qa .qa_list dl dt{ padding-left: 80px; margin-bottom: 20px; position: relative;}
#qa .qa_list dl dt span.ico{ display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #2dccd3; color: #fff; font-size: 1.8rem; line-height: 1em; font-weight: bold; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#qa .qa_list dl dt p{ font-size: 1.25rem; line-height: 1.5em; color: #2dccd3;}
#qa .qa_list dl dd{ margin-left: 80px; padding-left: 80px; position: relative;}
#qa .qa_list dl dd span.ico{ display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #f1204a; color: #fff; font-size: 1.8rem; line-height: 1em; font-weight: bold; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#qa .qa_list dl dd p{ font-size: 1rem; line-height: 1.5em; color: #f1204a;}
@media screen and (max-width:767px){
#qa{ padding: 12.5% 0;}
#qa h2{ font-size: 1.6rem; margin-bottom: 5%;}
#qa h2 strong:before{ width: 50vw; height: 0.75vw; left: -52.5vw;}
#qa h2 strong:after{ width: 50vw; height: 0.75vw; right: -52.5vw;}

#qa .qa_list{ padding: 5% 3.75% 0;}
#qa .qa_list figure.ico{ width: 33.33%; position: static; margin-top: 5%;}
#qa .qa_list dl{ padding: 3.75% 0; border-bottom: 2px dotted #191919;}
#qa .qa_list dl:nth-child(2){ border-top: 2px dotted #191919;}
#qa .qa_list dl dt{ padding-left: 10vw; margin-bottom: 2.5%;}
#qa .qa_list dl dt span.ico{ width: 7.5vw; height: 7.5vw; font-size: 1.2rem;}
#qa .qa_list dl dt p{ font-size: 1rem;}
#qa .qa_list dl dd{ margin-left: 0; padding-left: 10vw;}
#qa .qa_list dl dd span.ico{ width: 7.5vw; height: 7.5vw; font-size: 1.2rem;}
#qa .qa_list dl dd p{ font-size: 0.9rem;}
}






@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}