﻿
/* window-size + 17px */
/*  Clear Fix
--------------------------------------- */
.clearfix:after
{
display: table;
clear: both; 
content: '';
}


/*  Base
--------------------------------------- */
html
{
overflow-y: scroll;
}

body
{
font-family: 'Noto Sans Japanese', serif;
font-size: 12px;
line-height: 1.5;
color: #333;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-print-color-adjust: exact;
-webkit-font-smoothing: antialiased;
}


/*  Links
--------------------------------------- */
a
{
color: #000;
text-decoration: none; 
}
a:link,
a:visited
{
text-decoration: none; 
}
a:active,
a:hover,
a:focus
{
outline: none;
}

a:hover {
opacity: 0.7;
}


/* -------------------------------------------------------------------

Base Style

-------------------------------------------------------------------- */
/*  Universal Reset
--------------------------------------- */
html,
body,
div,
main,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
svg,
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,
picture,
button
{
zoom: 1; 
margin: 0;
padding: 0;
vertical-align: top;
border: 0;
background: transparent;
}

/*  HTML5 Display Definitions
--------------------------------------- */
main,
section,
nav,
article,
aside,
hgroup,
menu,
summary,
svg,
header,
footer,
figure,
figcaption,
details,
picture
{
display: block;
}

audio:not([controls])
{
display: none;
}

[hidden]
{
display: none;
}

/*  Typography
--------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6
{
font-size: 100%;
font-weight: normal; 
line-height: 1.5;
}

em
{
font-weight: bold; 
font-style: normal;
}

strong,
b
{
font-weight: bold; 

color: #f91e1e;
}

sup
{
font-size: 65%; 
line-height: 0;

position: relative;
top: -4px;

vertical-align: middle;
}

sub
{
font-size: 65%; 
line-height: 0;

position: relative;
top: 0;

vertical-align: middle;
}

pre
{
font-family: monospace, sans-serif;

white-space: pre-wrap;
word-wrap: break-word;
}

/*  Horizontal Rule
--------------------------------------- */
hr
{
display: none;
}

/*  Embedded Content
--------------------------------------- */
img
{
vertical-align: top; 
border: 0;
}

svg:not(:root)
{
overflow: hidden;
}

/*  List Content
--------------------------------------- */
ul,
ol
{
list-style: none;
}

/*  Tables
--------------------------------------- */
table
{
width: 100%; 

border-collapse: collapse;

border: 0 none;
}

table th,
table td
{
font-size: 1em;
font-weight: normal; 

text-align: left;
vertical-align: top;

border: 0 none;
}

/*  Forms
--------------------------------------- */
input::-moz-focus-inner,
button::-moz-focus-inner
{
padding: 0; 

border: 0;
}

fieldset
{
border: 0 none;
}

legend
{
display: none;
}

label
{
cursor: pointer;
}

input
{
font-family: 'Noto Sans Japanese', serif;
vertical-align: middle;
border-radius: 0;
border-radius: 0; 
outline: none;
}

input[type='text'],
input[type='tel'],
input[type='url'],
input[type='image'],
input[type='email'],
input[type='search'],
input[type='password']
{
-webkit-appearance: none;
}

input[type='checkbox'],
input[type='radio']
{
box-sizing: border-box; 
padding: 0;
}

textarea
{
font-family: 'Noto Sans Japanese', serif;
resize: none;
vertical-align: top;
border-radius: 0;
outline: 0;
-webkit-appearance: none;
}

select
{
font-family: 'Noto Sans Japanese', serif;
line-height: normal;

outline: none;
}

button
{
font-size: 100%;
}

.pcHide {
display:none;
}

img {
max-width:100%;
}


@media screen and (max-width: 828px) {
.pcHide {
display:inherit;
}

.spHide {
display:none !important;
}

img {
width: 100%;
max-width: inherit;
}

a:hover {
opacity: 1;
}

}

/*  header
--------------------------------------- */

header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
background: #111;
}

header .nav {
display: flex;
align-items: center;
}

header .login a {
display: flex;
justify-content: center;
align-items: center;
width: 75px;
height: 80px;
color: #fff;
font-size: 14px;
font-weight: 500;
}

header .account a {
display: flex;
justify-content: center;
align-items: center;
width: 260px;
height: 80px;
color: #fff;
font-size: 14px;
font-weight: 500;
background: url("../image/bg_hd_01.png") no-repeat center;
}

header .sns {
display: flex;
justify-content: space-between;
align-items: center;
width: 68px;
margin-left: 30px;
}



/*  main
--------------------------------------- */

.kv {
position: relative;
text-align: center;
background: #111;
}

.kv h1 {
margin: 0 0 30px;
}

.kv .bonus {
position: relative;
margin: 0 0 46px;
}

.kv .bonus .img {
width: 67.7vw;
margin: 0 auto;
}

.kv .bonus .btn {
position: absolute;
top: 5.3125vw;
left: 0;
right: 0;
width: 32.8125vw;
margin: 0 auto;
}

.kv .device {
position: absolute;
top: calc(34.895vw - 50px);
left: 44.5625vw;
display: flex;
justify-content: space-between;
align-items: center;
width: 538px;
padding: 9px 20px;
color: #FDD884;
font-size: 14px;
font-weight: bold;
background: #111;
border: 1px solid #FDD884;
box-sizing: border-box;
}

.kv .device ul {
display: flex;
justify-content: space-between;
align-items: center;
}

.kv .device ul li {
margin-right: 10px;
padding: 5px 9px 4px 24px;
border-right: 1px solid #FDD884;
background: url("../image/ico_apple_01.png") no-repeat left center;
}

.kv .device ul li.win {
background: url("../image/ico_win_01.png") no-repeat left center;
}

.kv .device ul li.android {
margin-right: 0;
padding: 5px 0 4px 24px;
border-right: none;
background: url("../image/ico_android_01.png") no-repeat left center;
}

.kv .bnr {
border-top: 10px solid #265E54;
}


@media screen and (min-width: 1920px) {

.kv .device {
top: 620px;
left: 859px;
}

.kv .bonus .img {
width: auto;
}

.kv .bonus .btn {
top: 102px;
width: auto;
}

}


@media screen and (max-width: 1200px) {
.kv .device {
left: 39.5625vw;
}
}

@media screen and (max-width: 1050px) {
.kv .device {
top: calc(34.895vw - 20px);
right: 0;
left: 0;
margin: auto;
}
}

.about {
padding: 60px 0;
text-align: center;
}

.about h2 {
margin: 15px 0 0;
padding: 11px 0;
background: #111;
}

.about .aboutBox {
padding: 35px 0 0;
background: url("../image/bg_about_01.png") no-repeat left top;
}

.about .aboutBox .lead {
margin: 0 0 48px;
font-size: 20px;
font-weight: bold;
line-height: 1.9;
}

.about .tabMenu {
display: flex;
justify-content: center;
flex-flow: row-reverse;
padding: 0 74px;
}

.about .tabMenu.tabM2 {
flex-flow: inherit;
}

.about .tabMenu li {
margin: 0 15px;
cursor: pointer;
}

.about .tabWrap {
position: relative;
max-width: 1148px;
margin: 0 auto;
padding: 0 74px;
box-sizing: border-box;
}

.about .tabWrap .sideFix {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}

.about .tabWrap .sideFix.fixed {
position: fixed;
}

.about .tabWrap .sideFix.fixed.end {
position: absolute;
top: auto;
bottom: 0;
}

.about .tabWrap .sideFix .center {
position: relative;
max-width: 1148px;
margin: 0 auto;
}

.about .tabWrap .sideFix ul {
position: absolute;
top: 0;
left: 0;
}

.about .tabWrap .sideFix.fixed.end ul {
top: auto;
bottom: 0;
}

.about .tabWrap .sideFix li {
cursor: pointer;
}

.about .tabBox .tabBoxInner {
border: 10px solid #2aa32f;
}

.about #back01 .tabBoxInner {
display: block;
border: 10px solid #C3312A;
}

.about .tabBox .feature01 {
padding: 6px 30px 62px;
}

.about .tabBox .feature01 .step {
margin: 30px 0 23px;
}

.about .tabBox .feature02 {
padding: 0 30px 62px;
}

.about .tabBox .feature02 .txt {
margin: 20px 0 30px;
}

.about .tabBox .acc {
background: #F0F7F0;
border-radius: 5px;
}

.about #back01 .acc {
background: #F9EBEA;
}

.about .tabBox .acc h4 {
position: relative;
cursor: pointer;
}

.about .tabBox .acc h4:hover {
opacity: 0.7;
}

.about .tabBox .acc h4:after {
content: '';
position: absolute;
top: 0;
right: 27px;
bottom: 0;
width: 26px;
height: 15px;
margin: auto 0;
background: url("../image/ico_arw_01.png") no-repeat center;
background-size: contain;
}

.about .tabBox .acc h4:hover:after {
  animation: flash 1s linear infinite;
}

@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.about .tabBox .acc h4.open:hover:after {
  animation: none;
}

.about .tabBox .acc h4.open {
box-shadow: 0 3px 0 #c6e2cb;
}

.about #back01 .acc h4.open {
box-shadow: 0 3px 0 #e4c5c3;
}

.about .tabBox .acc h4.open:after {
background: url("../image/ico_arw_02.png") no-repeat center;
background-size: contain;
}

.about .tabBox .acc p {
display: none;
padding: 25px 30px 28px;
font-size: 18px;
font-weight: 500;
text-align: left;
}

.about .tabBox .acc p span {
display: block;
margin: 12px 0 0;
font-size: 14px;
font-weight: 500;
line-height: 1.22;
}

.about .tabBox .feature03 {
padding: 0 30px 65px;
}

.about #back01 .feature03 h3 {
margin-right: -11px;
}

.feature003{
margin-bottom: 2%;
}

.about .tabBox .feature03 .note01 {
margin: 5px auto 0;
color: #8d0300;
font-size: 14px;
font-weight: bold;
text-align: right;
}
.about .tabBox .feature03 .note01 span {
display: inline-block;
padding: 0 0.3em;
background: #8d0300;
color: #fff293;
border-radius: 5px;
line-height: 1.7;
}
.about .tabBox .feature03 .note02 {
margin: 5px 0 0;
text-align: left;
font-size: 13px;
}
.about .tabBox .feature03 .txt01 {
margin: 18px 0 16px;
}

.about .tabBox .feature03 .txt02 {
margin: 18px 0 16px;
}

.about .tabBox .feature03 .flexBox {
display: flex;
justify-content: space-between;
}

.about .tabBox .feature03 .flexBox .bonus {
width: 47.826%;
}

.about .tabBox .feature03 .flexBox .bonus .bnr {
margin: 20px 0;
}

.about .tabBox .feature03 .flexBox .bonus .flow {
margin: 30px 0;
}

.about .tabBox .feature03 .acc p {
padding: 12px 30px 28px;
font-size: 16px;
line-height: 1.6875;
}

.about .tabBox .feature03 .acc h4:after {
right: 16px;
}

.about .tabBox .feature04 {
position: relative;
padding: 0 30px 60px;
}

.about .tabBox .feature04 .cs {
display: none;
/*position: absolute;
top: -19px;
right: 3px;*/
}

.about .tabBox .feature04 .img {
margin: 30px 0;
}

.about .tabBox .feature04 .note {
margin: 20px auto 0;
font-size: 14px;
font-weight: 500;
}

.about .tabBox .feature05 {
padding: 0 30px 58px;
}

.about .tabBox .feature05 .img01 {
margin: 30px 0;
}

.about .tabBox .feature05 .img02 {
margin: 15px 0;
}

.about .tabBox .feature05 .provide01 {
padding: 20px 0 15px;
}

.about .tabBox .feature05 .provide02 {
margin: 0 0 40px;
}

.about .tabBox .feature05 .provide03 {
display: none;
text-align: center;
}

.about .tabBox .feature05 .provide04 {
margin: 20px 0 16px;
}

.about .tabBox .feature05 .provide05 {
margin: 0 0 16px;
}

.about .tabBox .feature05 .txt04 {
position: relative;
margin: 40px 0 0;
}

.about .tabBox .feature05 .txt04 .cs {
position: absolute;
top: -48px;
width: 90px;
right: 184px;
}

.about .tabBox .feature05 .img04 {
margin: 45px 0 30px;
}

.about #back01 .feature05 .img04 {
margin: 30px 0;
}

.about .tabBox .feature06 {
padding: 6px 30px 30px;
}

.about .tabBox .feature06 .flexBox {
display: flex;
justify-content: space-between;
margin: 30px 0 0;
}

.about .tabBox .feature06 .flexBox .bonus {
width: 47.826%;
}

.about .tabBox .feature06 .flexBox .bonus .bnr {
margin: 18px 0 0;
}

.about .tabBox .feature06 .flexBox .bonus .flow {
margin: 20px 0 30px;
}

.about .tabBox .feature06 .acc p {
padding: 22px 30px;
font-size: 16px;
line-height: 1.6875;
}

.about .tabBox .feature06 .acc p span {
margin: 6px 0 0;
line-height: 1.72;
}

.about .tabBox .feature06 .acc p .red {
display: inline;
margin: 0;
color: #C3312A;
font-size: 16px;
font-weight: bold;
}

.about .tabBox .feature06 .lead {
margin: 15px 0 0;
}

.about .tabBox .feature07 {
padding: 0 30px 60px;
}

.about .tabBox .feature07 .txt01 {
margin: 14px 0 20px;
}

.about .tabBox .feature07 .txt02 {
margin: 22px 0 0;
}

.about .tabBox .feature07 .note {
max-width: 800px;
margin: 5px auto 0;
font-size: 14px;
font-weight: 500;
text-align: right;
}

.about .tabBox .feature03 .acc h4:after ,
.about .tabBox .feature06 .acc h4:after {
right: 16px;
}

.about .tabBox .moreBox {
padding: 30px 30px 40px;
}

.about .tabBox .moreBox .txt01 {
margin: 23px 0 36px;
}

.about .tabBox .moreBox .img02 {
margin: 30px 0 25px;
}

.about .tabBox .moreBox .txt04 {
margin: 20px 0 38px;
}

.about .tabBox .moreBox .txt05 {
margin: 0 0 5px;
text-align: center;
}

.about .tabBox .moreBox .txt06 {
margin: 30px 0 5px;
text-align: center;
}

.about .tabBox .moreBox .acc .accInner {
display: none;
padding: 20px 30px 45px;
font-size: 18px;
font-weight: 500;
text-align: left;
}

.about .tabBox .moreBox .acc .accInner p {
display: block;
padding: 0;
}

.about .tabBox .moreBox .acc .accInner p .green {
display: inline;
margin: 0;
color: #2AA32F;
font-size: 18px;
font-weight: 500;
}

.about .tabBox .moreBox .acc .accInner p .red {
display: inline;
margin: 0;
color: #C3312A;
font-size: 18px;
font-weight: 500;
}

.about .tabBox .back a {
display: block;
padding: 33px 0 13px;
background: #2aa32f;
}

.about #back01 .back a {
background: #C3312A;
}

.reason .bnr {
position: relative;
}

.reason .bnr > picture img {
width: 100%;
height: 400px;
object-fit: cover;
}

.reason .bnr a {
position: absolute;
left: 0;
right: 0;
bottom: 45px;
width: 478px;
margin: 0 auto;
}

.support {
padding: 55px 0 15px;
text-align: center;
}

.support h2 {
margin: 15px 0 30px;
padding: 11px 0;
background: #111;
}

.support .lead {
max-width: 800px;
margin: 16px auto 20px;
padding: 0 0 40px;
font-size: 18px;
font-weight: 500;
line-height: 1.778;
text-align: left;
background: url("../image/bg_tri_01.png") no-repeat center bottom;
}

.support .txt01 {
margin: 0 0 26px;
}

.charm {
padding: 60px 0;
text-align: center;
}

.charm h2 {
margin: 15px 0 45px;
padding: 11px 0;
background: #111;
}

.charm .note {
max-width: 996px;
margin: 2px auto 6px;
font-size: 14px;
text-align: right;
}

.charm .more {
position: relative;
margin: 56px 0 0;
padding: 11px 0;
background: #111;
}

.charm .more:after {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -70px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 30px 70px 0 70px;
border-color: #111 transparent transparent transparent;
}

.charm .moreBox {
padding: 56px 0 26px;
background: #21D04A;
}

.charm .moreBox h3 {
margin: 0 40px 25px 0;
}

.charm .moreBox .txt01 {
margin: 22px 0 26px;
}

.charm .moreBox .txt02 {
margin: 22px 0 0;
}

.regi {
padding: 55px 0 0;
text-align: center;
}

.regi h2 {
margin: 2px 0 25px;
padding: 0 0 26px;
background: url("../image/bg_regi_01.png") no-repeat center;
}

.regi .step {
position: relative;
max-width: 1240px;
margin: 0 auto 80px;
padding: 0 27px;
box-sizing: border-box;
}

.regi .step a {
position: absolute;
top: 144px;
left: 57px;
display: block;
}

.regi .bnr {
background: #111;
}

.regi .bnr img {
max-width: 100%;
height: 300px;
object-fit: cover;
}

.regi .benefit {
padding: 30px 0 40px;
background: #111;
}

.regi .benefit p {
position: relative;
max-width: 1340px;
margin: 0 auto;
padding: 0 20px;
}

.regi .benefit p a {
position: absolute;
left: 0;
right: 0;
bottom: 50px;
width: 630px;
margin: 0 auto;
}

.faq {
padding: 60px 0;
text-align: center;
}

.faq h2 {
margin: 15px 0 40px;
padding: 11px 0;
background: #111;
}

.faq dl {
max-width: 950px;
margin: 0 auto 20px;
padding: 0 15px;
box-sizing: border-box;
}

.faq dl dt {
position: relative;
padding: 13px 60px 13px 30px;
color: #fff;
font-size: 24px;
font-weight: bold;
text-align: left;
background: -moz-linear-gradient(left, #218D39 0%, #33BA25 100%);
background: -webkit-gradient(linear, left center, right center, from(#218D39), to(#33BA25));
background: -webkit-linear-gradient(left, #218D39 0%, #33BA25 100%);
background: -o-linear-gradient(left, #218D39 0%, #33BA25 100%);
background: -ms-linear-gradient(left, #218D39 0%, #33BA25 100%);
background: linear-gradient(to right, #218D39 0%, #33BA25 100%);
border-radius: 5px;
cursor: pointer;
}

.faq dl dt:hover {
opacity: 0.7;
}

.faq dl dt:after {
content: '';
position: absolute;
top: 0;
right: 27px;
bottom: 0;
width: 26px;
height: 15px;
margin: auto 0;
background: url("../image/ico_arw_01.png") no-repeat center;
background-size: contain;
}

.faq dl dt:hover:after {
  animation: flash 1s linear infinite;
}

.faq dl dt.open:hover:after {
  animation: none;
}

.faq dl dt.open {
box-shadow: 0 3px 0 #c6e2cb;
}

.faq dl dt.open:after {
background: url("../image/ico_arw_02.png") no-repeat center;
background-size: contain;
}

.faq dl dd {
display: none;
padding: 15px 30px 32px;
font-size: 16px;
font-weight: 500;
line-height: 2;
text-align: left;
background: #F0F7F0;
border-radius: 5px;
}

.sum {
padding: 0;
background: #F0F0F0;
}

.sum h2 {
text-align: center;
}

.sum .lead {
max-width: 900px;
margin: 0 auto;
padding: 25px 15px 60px;
font-size: 16px;
font-weight: 500;
line-height: 1.75;
box-sizing: border-box;
}

.sum .bnr {
position: relative;
text-align: center;
background: #111;
}

.sum .bnr > picture img {
max-width: 100%;
height: 300px;
object-fit: cover;
}

.sum .bnr a {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
display: block;
width: 478px;
margin: 0 auto;
}




/*  footer
--------------------------------------- */

footer {
margin: 0 0 122px;
padding: 38px 0 45px;
text-align: center;
background: #111;
}

footer .copy {
margin: 32px 0 0;
color: #fff;
font-size: 13px;
font-weight: 500;
}



/*  fix
--------------------------------------- */

.btmFix {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 44px 0 16px;
text-align: center;
border-top: 2px solid #eb1f44;
background: #111 url("../image/img_fix_01.png") no-repeat center top;
z-index: 999;
}

.btmFix a {
display: inline-block;
}



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

.regi .benefit p a {
bottom: 3.73vw;
width: 47vw;
}

}



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

.regi .step a {
top: 13.2258vw;
left: calc(2.42vw + 27px);
width: 25.32258vw;
}


}



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

/*  header
--------------------------------------- */

header {
padding: 0 0 0 4.83vw;
}

header .logo {
width: 30.9178744vw;
}

header .nav {
display: flex;
align-items: center;
}

header .account a {
width: 50.2415459vw;
height: 15.459vw;
font-size: 3.38164vw;
background: url("../image/bg_hd_01.png") no-repeat center;
background-size: auto 100%;
}



/*  main
--------------------------------------- */

.kv {
padding: 0 0 4.831vw;
}

.kv h1 {
margin: 0 0 1.2vw;
}

.kv .bonus {
position: relative;
margin: 0 0 4.831vw;
}

.kv .bonus .img {
width: 100%;
margin: 0 auto;
}

.kv .bonus .btn {
position: absolute;
top: 35vw;
left: 0;
right: 0;
width: 82.1256vw;
margin: 0 auto;
}

.kv .device {
position: static;
display: block;
width: 90.3382vw;
margin: 0 auto;
padding: 1.93vw 0 2.415459vw;
font-size: 2.9vw;
}

.kv .device p {
margin: 0 0 1.45vw;
}

.kv .device ul {
justify-content: center;
}

.kv .device ul li {
margin-right: 2.9vw;
padding: 0 2.9vw 0 4.3478vw;
background: url("../image/ico_apple_01.png") no-repeat left center;
background-size: 2.9vw auto;
}

.kv .device ul li.win {
background: url("../image/ico_win_01.png") no-repeat left center;
background-size: 2.9vw auto;
}

.kv .device ul li.android {
margin-right: 0;
padding: 0 0 0 4.3478vw;
border-right: none;
background: url("../image/ico_android_01.png") no-repeat left center;
background-size: 2.9vw auto;
}

.about {
padding: 9vw 0;
text-align: center;
}

.about .ttl {
width: 92.27vw;
margin: 0 auto;
}

.about h2 {
width: 52.174vw;
margin: 3.6232vw 0 0;
padding: 2.174vw 23.913vw;
background: #111;
}

.about .aboutBox {
padding: 3.38164vw 0 0;
background: url("../image/bg_about_01.png") no-repeat left top;
background-size: 82.1256vw auto;
}

.about .aboutBox .lead {
margin: 0 0 8vw;
font-size: 3.38164vw;
font-weight: bold;
line-height: 1.86;
}

.about .tabMenu {
display: none;
}

.about .tabWrap {
max-width: 90.338165vw;
margin: 0 auto;
padding: 0;
}

.about .tabBox {
margin: 0 0 2.415459vw;
}

.about .tabBox .tabBtn {
position: relative;
}

.about .tabBox .tabBtn:after {
content: '';
position: absolute;
top: 0;
right: 4.831vw;
bottom: 0;
width: 4.831vw;
height: 3.14vw;
margin: auto 0;
background: url("../image/ico_arw_01.png") no-repeat center;
background-size: contain;
}

.about .tabBox .tabBtn.open:after {
background: url("../image/ico_arw_02.png") no-repeat center;
background-size: contain;
}

.about .tabBox .tabBoxInner {
display: none;
border: 1.93236715vw solid #2aa32f;
}

.about #back01 .tabBoxInner {
border: 1.93236715vw solid #C3312A;
}
	
.about .tabBlockM2 #back01 .tabBoxInner {
display: none;
}
.about .tabBlockM2 #back02 .tabBoxInner {
display: block;
}

.about .tabBox .feature01 {
padding: 0.966vw 4.831vw 6.382vw;
}

.about .tabBox .feature01 h3 {
margin: 0 -4.347826vw 0 -2.4155vw;
}

.about .tabBox .feature01 .step {
margin: 4.831vw 0 3.6232vw;
}

.about .tabBox .feature02 {
padding: 0.966vw 4.831vw 7.382vw;
}

.about .tabBox .feature02 h3 {
margin: 0 -4.347826vw 0 -2.4155vw;
}

.about .tabBox .feature02 .txt {
margin: 2.4155vw -1.93236715vw 7.24637vw;
}

.about .tabBox .acc {
background: #F0F7F0;
border-radius: 5px;
}

.about #back01 .acc {
background: #F9EBEA;
}

.about .tabBox .acc h4 {
position: relative;
cursor: pointer;
}

.about .tabBox .acc h4:hover {
opacity: 1;
}

.about .tabBox .acc h4:after {
content: '';
position: absolute;
top: 0;
right: 2.415459vw;
bottom: 0;
width: 3.6232vw;
height: 2.415459vw;
margin: auto 0;
background: url("../image/ico_arw_01.png") no-repeat center;
background-size: contain;
}

.about .tabBox .acc h4.open {
box-shadow: 0 3px 0 #c6e2cb;
}

.about #back01 .acc h4.open {
box-shadow: 0 3px 0 #e4c5c3;
}

.about .tabBox .acc h4.open:after {
background: url("../image/ico_arw_02.png") no-repeat center;
background-size: contain;
}

.about .tabBox .acc p {
padding: 3.623vw 4.831vw 4.831vw;
font-size: 3.14vw;
font-weight: 500;
line-height: 1.6154;
text-align: left;
}

.about .tabBox .acc p span {
display: block;
margin: 3.14vw 0 0;
font-size: 2.657vw;
font-weight: 500;
line-height: 1.55;
}

.about .tabBox .feature03 {
margin: 0 0 -4.5vw;
padding: 0.966vw 4.831vw 0;
}

.about .tabBox .feature03 h3 {
margin: 0 -4.347826vw 0 -2.4155vw;
}

.about #back01 .feature03 h3 {
margin-right: -4.347826vw;
}

.about .tabBox .feature03 .note01 {
margin: 1.2vw auto 0;
font-size: 2.667vw;
}

.about .tabBox .feature03 .note02 {
margin: 1.2vw 0 0;
font-size: 2.667vw;
}

.about .tabBox .feature03 .txt01 {
margin: 3.6232vw 0;
}

.about .tabBox .feature03 .txt02 {
margin: 2.4155vw 0 4.831vw;
}

.about .tabBox .feature03 .flexBox {
display: block;
}

.about .tabBox .feature03 .flexBox .bonus {
width: 100%;
margin: 0 0 11.21vw;
}

.about .tabBox .feature03 .flexBox .bonus:nth-child(2) > h4 {
margin: 0 -1.691vw;
}

.about .tabBox .feature03 .flexBox .bonus .bnr {
margin: 1.932vw 0 3.864vw;
}

.about .tabBox .feature03 .flexBox .bonus .flow {
margin: 3.623vw 0 7.246vw;
}

.about .tabBox .feature03 .acc p {
padding: 3.623vw 4.831vw 4.831vw;
font-size: 3.14vw;
line-height: 1.6154;
}

.about .tabBox .feature03 .acc h4:after {
right: 16px;
}

.about .tabBox .feature04 {
padding: 0.966vw 4.831vw 6.382vw;
}

.about .tabBox .feature04 h3 {
margin: 0 -4.347826vw 0 -2.4155vw;
}

.about .tabBox .feature04 .img {
margin: 3.8647343vw 0;
}
	
.about .tabBox .feature04 .cs {
position: absolute;
top: 13.8647343vw;
right: 0;
width: 14vw;
}

.about .tabBox .feature04 .note {
margin: 3.8647343vw auto 0;
font-size: 2.667vw;
}

.about .tabBox .feature04 .txt {
margin: 0 -0.9662vw;
}

.about .tabBox .feature05 {
padding: 0.966vw 4.831vw 3.382vw;
}

.about .tabBox .feature05 h3 {
margin: 0 -4.347826vw 0 -2.4155vw;
}

.about .tabBox .feature05 .img01 {
margin: 3.8647343vw 0;
}

.about .tabBox .feature05 .txt01 {
margin: 0 -0.7246377vw;
}

.about #back01 .feature05 .img02 {
margin: 0;
}

.about .tabBox .feature05 .img02 {
margin: 0 0 2.4155vw;
}

.about .tabBox .feature05 .provide01 {
padding: 4.34vw 0;
}

.about .tabBox .feature05 .provide02 {
margin: 0 0 7.24637vw;
}

.about .tabBox .feature05 .provide04 {
margin: 4.347vw -1.45vw;
}

.about .tabBox .feature05 .provide05 {
margin: 0 0 1.2vw;
}

.about .tabBox .feature05 .txt02 {
margin: 0 -0.7246377vw 2.415459vw;
}

.about #back02 .feature05 .txt03 {
margin: -4.821vw 0 0 -2.4155vw;
}

.about .tabBox .feature05 .txt04 {
margin: 7.246377vw -4.347826vw 2.4155vw;
}
	
.about .tabBox .feature05 .txt04 .cs {
position: absolute;
top: -5.864734vw;
right: 12.864734vw;
width: 12vw;
}

.about .tabBox .feature05 .img04 {
margin: 45px -2.415459vw 30px;
}

.about #back01 .feature05 .img04 {
margin: 7.2463vw -2.415459vw 6.03864vw;
}

.about .tabBox .feature06 {
padding: 0.966vw 4.831vw 3.382vw;
}

.about .tabBox .feature06 h3 {
margin: 0 -4.347826vw 0 -2.4155vw;
}

.about .tabBox .feature06 .flexBox {
display: block;
margin: 4.831vw 0 0;
}

.about .tabBox .feature06 .flexBox .bonus {
width: 100%;
margin: 0 0 7.246377vw;
}

.about .tabBox .feature06 .flexBox .bonus .bnr {
margin: 2.4155vw 0 0;
}

.about .tabBox .feature06 .flexBox .bonus .flow {
margin: 4.831vw 0;
}

.about .tabBox .feature06 .acc p {
padding: 3.623vw 4.831vw 4.831vw;
font-size: 3.14vw;
line-height: 1.6154;
}

.about .tabBox .feature06 .acc p span {
margin: 4.14vw 0 0;
line-height: 1.545;
}

.about .tabBox .feature06 .acc p .red {
display: inline;
margin: 0;
color: #C3312A;
font-size: 3.14vw;
font-weight: bold;
}

.about .tabBox .feature06 .lead {
margin: -3.623vw 0 0;
}

.about .tabBox .feature07 {
padding: 0.966vw 4.831vw 3.382vw;
}

.about .tabBox .feature07 h3 {
margin: 0 -4.347826vw 0 -2.4155vw;
}

.about .tabBox .feature07 .txt01 {
margin: 1.2077vw 0 2.4155vw;
}

.about .tabBox .feature07 .txt02 {
margin: 2.9vw 0 0;
}

.about .tabBox .feature07 .note {
max-width: inherit;
margin: 1.2vw auto 0;
font-size: 2.667vw;
text-align: right;
}

.about .tabBox .feature03 .acc h4:after ,
.about .tabBox .feature06 .acc h4:after {
right: 2.4155vw;
}

.about .tabBox .moreBox {
padding: 4.831vw 4.831vw 4.831vw;
}

.about .tabBox .moreBox .txt01 {
margin: 3.623vw -1.691vw 7.246vw;
}

.about .tabBox .moreBox .img02 {
margin: 4.831vw 0;
}

.about .tabBox .moreBox .txt04 {
margin: 6.04vw 0 7.246vw;
}

.about .tabBox .moreBox .txt05 {
width: 75.6vw;
margin: 0 auto 2.4155vw !important;
text-align: center;
}

.about .tabBox .moreBox .txt06 {
width: 70.773vw;
margin: 3.6232vw auto 2.4155vw !important;
text-align: center;
}

.about .tabBox .moreBox .acc .accInner {
padding: 3.6232vw 0 4.831vw;
font-size: 3.14vw;
font-weight: 500;
text-align: left;
}

.about .tabBox .moreBox .acc .accInner p {
display: block;
margin: 0 4.831vw;
}

.about .tabBox .moreBox .acc .accInner p .green {
display: inline;
margin: 0;
color: #2AA32F;
font-size: 3.14vw;
font-weight: 500;
}

.about .tabBox .moreBox .acc .accInner p .red {
display: inline;
margin: 0;
color: #C3312A;
font-size: 3.14vw;
font-weight: 500;
}

.about .tabBox .back a {
display: block;
padding: 4.831vw 0 2.4155vw;
background: #2aa32f url("../image/ico_arw_02.png") no-repeat right 7.2463vw top 7vw;
background-size: 3.6232vw auto;
}

.about #back01 .back a {
padding: 4.831vw 0 2.4155vw;
background: #C3312A url("../image/ico_arw_02.png") no-repeat right 7.2463vw top 7vw;
background-size: 3.6232vw auto;
}

.about .tabBox .back a img {
width: 10.1445vw;
}

.reason .bnr {
position: relative;
}

.reason .bnr > picture img {
width: 100%;
height: auto;
object-fit: inherit;
}

.reason .bnr a {
bottom: 4.83vw;
width: 90.3381643vw;
}

.support {
padding: 9.178744vw 0 3.623vw;
}

.support .ttl {
width: 82.61vw;
margin: 0 auto;
}

.support h2 {
width: 52.174vw;
margin: 3.6232vw 0 2.9vw;
padding: 2.174vw 23.913vw;
background: #111;
}

.support .img {
width: 95.17vw;
margin: 0 auto;
}

.support .lead {
max-width: 90.33817vw;
margin: 2.41546vw auto 3.8647vw;
padding: 0 0 6.04vw;
font-size: 3.38163vw;
font-weight: 500;
line-height: 2;
text-align: left;
background: url("../image/bg_tri_01_sp.png") no-repeat center bottom;
background-size: 63.77vw auto;
}

.support .txt01 {
width: 79.227vw;
margin: 0 auto 2.41546vw;
}

.support .txt02 {
width: 90.33817vw;
margin: 0 auto;
}

.charm {
padding: 7.3vw 0 3.623vw;
}

.charm .ttl {
width: 55.55556vw;
margin: 0 auto;
}

.charm h2 {
width: 71.98vw;
margin: 3.6232vw auto 4.5vw;
padding: 2.174vw 14.01vw;
background: #111;
}

.charm .table {
width: 89.855vw;
margin: 0 auto;
}

.charm .note {
max-width: 89.855vw;
margin: 0.5vw auto 3vw;
font-size: 2.415459vw;
text-align: right;
}

.charm .lead {
width: 93.72vw;
margin: 0 auto;
}

.charm .more {
position: relative;
width: 14.5vw;
margin: 4.5vw 0 0;
padding: 1.8116vw 42.75vw;
background: #111;
}

.charm .more:after {
content: "";
position: absolute;
bottom: -3.8647343vw;
left: 50%;
margin-left: -8.9372vw;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 3.8647343vw 8.9372vw 0 8.9372vw;
border-color: #111 transparent transparent transparent;
}

.charm .moreBox {
padding: 4.831vw 0 2.9vw;
background: #21D04A;
}

.charm .moreBox h3 {
width: 90.821256vw;
margin: 0 auto 4.831vw;
}

.charm .moreBox .txt01 {
width: 96.1353vw;
margin: 2.9vw auto;
}

.charm .moreBox .txt02 {
width: 46.377vw;
margin: 2.9vw auto 0;
}

.regi {
padding: 5.3vw 0 0;
}

.regi .ttl {
width: 45.9vw;
margin: 0 auto;
}

.regi h2 {
margin: -3.8647vw 0 4.831vw;
padding: 0;
background: none;
}

.regi .step {
position: relative;
max-width: inherit;
margin: 0 auto 7.24638vw;
padding: 0;
box-sizing: border-box;
}

.regi .step a {
position: absolute;
top: 15.63285vw;
left: 0;
right: 0;
display: block;
width: 75.84541vw;
margin: 0 auto;
}

.regi .bnr {
background: #111;
}

.regi .bnr img {
width: 100%;
max-width: inherit;
height: auto;
object-fit: inherit;
}

.regi .benefit {
padding: 2.9vw 0 4.83vw;
background: #111;
}

.regi .benefit p {
position: relative;
width: 90.33817vw;
max-width: inherit;
margin: 0 auto;
padding: 0;
}

.regi .benefit p a {
position: absolute;
left: 0;
right: 0;
bottom: 9.179vw;
width: 82.1256vw;
margin: 0 auto;
}

.faq {
padding: 6.5vw 0 9.623vw;
}

.faq .ttl {
width: 54.1063vw;
margin: 0 auto;
}

.faq h2 {
width: 34.78261vw;
margin: 3.6232vw auto 4.5vw;
padding: 2.174vw 32.608695vw;
background: #111;
}

.faq dl {
max-width: 90.338165vw;
margin: 0 auto 2.415459vw;
padding: 0;
}

.faq dl dt {
position: relative;
padding: 2.415459vw 7.73vw 2.415459vw 3.864735vw;
color: #fff;
font-size: 3.38165vw;
font-weight: bold;
text-align: left;
line-height: 1.43;
background: -moz-linear-gradient(left, #218D39 0%, #33BA25 100%);
background: -webkit-gradient(linear, left center, right center, from(#218D39), to(#33BA25));
background: -webkit-linear-gradient(left, #218D39 0%, #33BA25 100%);
background: -o-linear-gradient(left, #218D39 0%, #33BA25 100%);
background: -ms-linear-gradient(left, #218D39 0%, #33BA25 100%);
background: linear-gradient(to right, #218D39 0%, #33BA25 100%);
border-radius: 5px;
cursor: pointer;
}

.faq dl dt:hover {
opacity: 1;
}

.faq dl dt:after {
content: '';
position: absolute;
top: 0;
right: 2.415459vw;
bottom: 0;
width: 3.6232vw;
height: 2.415459vw;
margin: auto 0;
background: url("../image/ico_arw_01.png") no-repeat center;
background-size: contain;
}

.faq dl dt.open {
box-shadow: 0 3px 0 #c6e2cb;
}

.faq dl dt.open:after {
background: url("../image/ico_arw_02.png") no-repeat center;
background-size: contain;
}

.faq dl dd {
display: none;
padding: 3.6232vw 4.831vw;
font-size: 3.14vw;
font-weight: 500;
line-height: 1.62;
text-align: left;
background: #F0F7F0;
border-radius: 5px;
}

.sum {
padding: 6.7633vw 0 0;
background: #F0F0F0;
}

.sum h2 {
width: 83.57488vw;
margin: 0 auto;
}

.sum .lead {
max-width: 90.338165vw;
margin: 0 auto;
padding: 4.3478vw 0 7.246vw;
font-size: 3.14vw;
font-weight: 500;
line-height: 1.62;
box-sizing: border-box;
}

.sum .bnr {
position: relative;
text-align: center;
background: #111;
}

.sum .bnr > picture img {
width: 100%;
max-width: inherit;
height: auto;
object-fit: inherit;
}

.sum .bnr a {
position: absolute;
bottom: 4.831vw;
left: 0;
right: 0;
display: block;
width: 82.1256vw;
margin: 0 auto;
}



/*  footer
--------------------------------------- */

footer {
margin: 0 0 11.0772vw;
padding: 4.3478vw 0 4.831vw;
text-align: center;
background: #111;
}

footer h2 {
width: 30.92vw;
margin: 0 auto;
}

footer .copy {
margin: 2.4155vw 0 0;
color: #fff;
font-size: 3.14vw;
font-weight: 500;
}



/*  fix
--------------------------------------- */

.topFix {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}

.topFix ul {
display: flex;
}

.topFix ul li {
width: 47.584541vw;
}

.topFix ul li:first-child {
width: 52.415459vw;
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.16));
}

.btmFix {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 0;
text-align: center;
border-top: none;
background: none;
z-index: 999;
}

}

