@charset "utf-8";

body {
font-family:'roboto',"Hiragino Kaku Gothic ProN",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
font-size: 1.8rem;/* 1.4rem=14px */
}

/*------------------------------------
fv
--------------------------------------*/
.kv {
background: #59CDFE;
background:linear-gradient(0deg,rgba(89, 205, 254, 1) 0%, rgba(70, 192, 250, 1) 26%, rgba(16, 137, 250, 1) 70%, rgba(0, 91, 231, 1) 100%);
overflow: hidden;
position: relative;
}

.main-img {
position: relative;
z-index: 3;
margin:-5rem auto -2.5rem -21rem;
}
.main-img img {
max-width: 1080px;
margin: auto;
height: auto;
}

@media (min-width: 768px)  {
.kv:after {
position: absolute;
content: "";
top: 0;
right: 0;
height: 1200px;
width: 100vw;
background:
image-set(url("../images/cloud-r.webp") type("image/webp"),
url("../images/cloud-r.png") type("image/png")) right -16rem top no-repeat;
background-size:79rem;
}
}

@media (min-width: 992px)  {
.kv:after {
background:
image-set(url("../images/cloud-r.webp") type("image/webp"),
url("../images/cloud-r.png") type("image/png")) right -16rem top no-repeat;
background-size:97rem;
}
.main-img img {
max-width: 1280px;
}
}


@media (min-width: 1200px)  {
.kv:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 1200px;
width: 100vw;
background:
image-set(url("../images/cloud-l.webp") type("image/webp"),
url("../images/cloud-l.png") type("image/png")) left -15rem top no-repeat;
background-size:87rem;
}
.kv:after {
background:
image-set(url("../images/cloud-r.webp") type("image/webp"),
url("../images/cloud-r.png") type("image/png")) right -16rem top no-repeat;
background-size:105rem;
}
.main-img {
margin:-6rem auto -2.5rem -22rem;
}
.main-img img {
max-width: 100%;
}
}

@media (min-width: 1600px)  {
.kv:before {
background:
image-set(url("../images/cloud-l.webp") type("image/webp"),
url("../images/cloud-l.png") type("image/png")) left top no-repeat;
background-size:88rem;
}
.kv:after {
background:
image-set(url("../images/cloud-r.webp") type("image/webp"),
url("../images/cloud-r.png") type("image/png")) right -8rem top no-repeat;
background-size:106rem;
}
}


.top-comment {
font-size: 1.4rem;
line-height:1.4;
max-width: 994px;
margin: auto;
}
@media (min-width: 576px) {
.top-comment {
font-size: 1.6rem;
}
}

/*------------------------------------
text common
--------------------------------------*/
.text-c-l {font-size:1.4rem !important}
.text-l-xl {font-size:1.8rem}
.text-xs2l-xxl {font-size:2.3rem}
@media (min-width: 992px) {
.text-l-xl {font-size:2rem}
.text-xs2l-xxl {font-size:2.55rem}
} 
@media (min-width: 576px) {
.text-c-l {font-size:1.6rem !important}
}

.btn-outline, .btn-outline:focus {
font-size: 1.6rem;
}


h3.line-heading {
margin: 3rem 0;
padding: .4rem 0 .4rem 1rem;
border-left: 14px solid #949393;
/*border-left: 14px solid #7896c0;*/
line-height: 1;
}

.lead-title {
position: relative;
text-align: center;
padding: 1.2rem;
/*line-height: 1;*/
margin-bottom: 6rem;
/*color: #405e88;*/
}
.lead-title span {
position: relative;
padding: 1rem 1.4rem;
}
.lead-title span:before {
content: "";
width: 100%;
position: absolute;
bottom: -1rem;
left:0;
height: 6px;
/*background-image:repeating-linear-gradient(45deg, #7896c0 0, #7896c0 1px, transparent 0, transparent 50%);*/
background-image: repeating-linear-gradient(45deg, #949393 0, #949393 1px, transparent 0, transparent 50%);
background-size: 8px 8px;
}
@media (max-width: 575.98px) {
.lead-title {
margin-bottom: 4rem;
}
}

.step-text {
display: inline-block;
font-weight: bolder;
text-align: center;
font-size: /*1.8rem*/1.7rem;
}
.step-text span.p-l	{
font-size: 1.2em;
}
.step-text span.p-s {
font-size: .6em;
}
@media (min-width: 992px) {
.step-text {
font-size: 2.2rem;
}
}

.step-ttl {
position: relative;
display: inline-block;
padding: .8rem 1.5rem;
background: #7b5ff5;
color: #fff; 
font-weight: bold; 
text-align: center; 
border-radius: .5rem;
margin-bottom: 1rem;	
}

.step-ttl::before {
position: absolute;
content: "";
background-color: #7b5ff5;
bottom: -10px;
height: 15px;
margin: auto;
right: 0;
left: 0;
width: 24px;
clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

.arrow_expl > div:first-of-type {
min-width: 260px;
}
@media (max-width: 767.98px) {
.arrow_expl:first-of-type{
margin-bottom: 1rem;
}
}
.icon-arrow-right2 {
font-size: 2rem;
}

/*.cashback-area {
position: relative;
padding:1.5rem 0;
background: #fff;
border:1px solid #3d3d3d;
}
@media (min-width: 992px) {
.cashback-area {
padding:3rem;
}
}*/

.cashback-qa {
display: flex;
align-items: center;
margin:0 auto 1.5rem;
border-radius: 50rem;
font-size: 1.8rem;
font-weight: bolder;
}
.cashback-qa span.head {
margin-right: .5rem;
font-size: 2em;
font-weight: normal;
color: #e95a01;
}
.qa2 span.head  {
font-size: 2em;
color: #22a3a1;
}
@media (min-width: 992px) {
.cashback-qa  {
font-size: 2rem;
}
}

.cashback-sub_a {
position: relative;
display: inline-block;
line-height: 1.2;
background: #0a68da;
margin-right: .5rem;
padding: .5rem 1.5rem .5rem 3.5rem;
border-radius: .5rem;
color: #fff;
font-weight: bold;
}
.cashback-sub_a:before {
display: inline-block;
position: absolute;
font-family: 'icomoon';
content: "\ea70";
font-size: 2rem;
margin: auto;
top: -6px;
bottom: 0;
height: 1em;
left: .8rem;
}

.cashback-sub_b {
position: relative;
display: inline-block;
line-height: 1.2;
background: #dc2d0f;
margin-right: .5rem;
padding: .5rem 1.5rem .5rem 3.5rem;
border-radius: .5rem;
color: #fff;
font-weight: bold;
}
.cashback-sub_b:before {
display: inline-block;
position: absolute;
font-family: 'icomoon';
content: "\ea29";
margin: auto;
top: -4px;
bottom: 0;
height: 1em;
left: .8rem;
}

.attention-title:before {
font-size: 3rem;
}

.cashback-title {
margin-bottom:2rem;
/*padding:1rem 0.5rem 1.2rem;*/
padding: 0 .5rem 1.2rem;
/*background: #3d3d3d;*/
text-align: center;
/*color: #fff;*/
}

.case {
width: auto;
margin:0 0 1.5rem;
/*border:2px solid #295060;  */
}
.case .case-title {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
font-weight: bolder;
background: #11518b;
color: #fff;
}
.case .case-text {
padding: 1.5rem 0;
background: #fff;
text-align: left;
}

/*@media (min-width: 768px) {
.case .case-text {
padding: 1.5rem;
}
}*/

.text-blue-frame {
display: inline-block;
position: relative;
color: #fff;
background-color: #1f8ede;
border-radius: 50rem;
padding: 0.4rem 2.6rem 0.25rem 1.5rem;
transition: all .3s ease-in-out;
}
.text-blue-frame:after {
display: inline-block;
position: absolute;
font-family: 'icomoon';
content: "\e912";
transform: rotate(90deg);
margin: auto;
top:0;
bottom: 0;
height: 1em;
right: .2rem;
transition: .2s;
}

.text-blue-frame:hover,
.text-blue-frame:focus {
color: #fff;
background-color: #4aa6e9;
}

.text-blue-frame:hover:after {
right: -.2rem ;	
color: #fff;
}

.cp-date {
text-align: center;
font-size: 2rem;
font-weight: bolder;
line-height: 1.4;
margin-bottom: 3rem;
}
@media (min-width: 576px)  {
.cp-date {
font-size: 2.4rem;
}
}


/*club off fukidashi*/
.lead-title-sub {
position: relative;
display: inline-block;
text-align: center;
padding: 1.2rem;
margin: auto 0;
width: 82vw;
font-weight: bolder;
font-size: 2rem;
line-height: 1.2;
}

.lead-title-sub:before,
.lead-title-sub:after {
position: absolute;
content: "";
top:5rem;
bottom: 0;
height: 5rem;
}
.lead-title-sub:before {
border-left: solid 3px;
left: 0;
transform: rotate(-30deg);
}
.lead-title-sub:after {
border-right: solid 3px;
right: 0;
transform: rotate(30deg);
}

@media (min-width: 390px)  {
.lead-title-sub {
width: 85vw;
}
.lead-title-sub:before {
border-left: solid 3px;
}
.lead-title-sub:after {
border-right: solid 3px;
}
.lead-title-sub:before,
.lead-title-sub:after {
top: 3rem;
height: 5rem;
}
}

@media (min-width: 400px)  {
.lead-title-sub {
width: 360px;
}
.lead-title-sub:before {
border-left: solid 4px;
}
.lead-title-sub:after {
border-right: solid 4px;
}
.lead-title-sub:before,
.lead-title-sub:after {
top: 2rem;
height: 4rem;
}
}

@media (min-width: 768px)  {
.lead-title-sub {
width: 500px;
}
.lead-title-sub {
font-size: 2.5rem;
}
.lead-title-sub:before,
.lead-title-sub:after {
top: 1.8rem;
height: 7rem;
}
}

@media (min-width: 992px)  {
.lead-title-sub {
font-size: 3rem;
}
}


.lead-title-sub span {
display: inline-block;
font-size: .8em;
line-height: 1.2;
}
@media (min-width: 370px)  {
.d-xxl-block {
display: none;
}
}@media (min-width: 400px)  {
.d-xxl-block2 {
display: none;
}
}

/*------------------------------------
Contents
--------------------------------------*/
.cp-article {
position: relative;
overflow: hidden;
padding: 3rem 0;
}

@media (min-width: 576px)  {
.cp-article {
padding: 6rem 0 5rem;
}
}

.cp-article-inner {
padding: 5rem 3rem;
border-radius: 3.5rem;
background: #fff;
margin-bottom: 3rem;
}
.cp-article-inner:nth-of-type(2) {
margin-bottom: 6rem;
}

.cp-main-inner {
padding: 5rem 3rem;
border-radius: 3.5rem;
background: #fff;
border: 3px solid #2859c0;
margin-bottom: 3rem;
}

@media (max-width: 767.98px)  {
.cp-article-inner,
.cp-main-inner {
width: 95%;
padding: 3rem 1.5rem;
}
}

.bg-article1 {
background: #63adef;
background: linear-gradient(120deg, rgba(77, 125, 244, .8), rgba(255, 255, 255, 0)), 
linear-gradient(185deg, rgba(255, 144, 247, .8), rgba(255, 255, 255, 0)), 
linear-gradient(340deg, rgba(160, 250, 174, .8), rgba(255, 255, 255, 0));
}

.bg-article2 {
position: relative;
margin-top: -40px;
}

.bg-article2:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100vw;
height: calc(100% + 9rem);
background: #cca7da;
background: linear-gradient(140deg, rgba(255, 199, 125, .8), rgba(255, 255, 255, 0)), 
linear-gradient(185deg, rgba(101, 246, 236, 1), rgba(255, 255, 255, 0)), 
linear-gradient(340deg, rgba(68, 64, 201, .8), rgba(255, 255, 255, 0));
z-index: -1;
}



.bg-main {
filter:drop-shadow(0 7px 1px rgba(0, 0, 0, .1)) drop-shadow(0 -7px 1px rgba(0, 0, 0, .1));
}


h2.sub-title {
/*padding: 1.5rem ;*/
padding: 1.5rem 0;
text-align: center;
/*color: #fff;
background: #536b97;*/
line-height: 1.4;
margin-bottom:3rem;
}

h2.sub-title2 {
padding: 1.5rem;
text-align: center;
color: #fff;
background: #5c8bca;
line-height: 1.4;
margin-bottom: 0;
}

.sub-title-icon {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
justify-content: center;
/*flex-flow: column;*/
text-align: center;
line-height: 1.4;
/*font-size: 2rem;*/
font-weight: bolder;
/*margin-bottom: 0;*/
}
.sub-title-icon span.ttl {
display: inline-block;
text-align: left;
font-size: 1.4rem;
white-space: nowrap;
}

.flag {
content: '';
display: inline-block;
width: /*110px*/ 90px;
height: /*53px*/ 43px;
vertical-align: middle;
margin-right: .5rem;
}
.icon-ccypair1 {
background: url(../images/tryjpy.svg) no-repeat;
background-size: contain;
}
.icon-ccypair2 {
background: url(../images/mxnjpy.svg) no-repeat;
background-size: contain;
}


.swap-amount {
font-weight: bolder;
font-size: 2.6rem;
line-height: 1.2;
margin-bottom: 0;
display: flex;
}
.swap-amount > span.amount {
font-size: 3em;
line-height: 1;
color: #f567ca;
text-align: right;
}
.swap-amount span.text-small {
font-size: .6em;
margin-left: .5rem;
display: flex;
align-items: end;
;
}

.dflex-box li {
display: flex;
flex-flow: column wrap;
width: 50%;
}



@media (max-width: 575.98px) {
.sub-title-icon {font-feature-settings: "palt";}
/*.flag {
width: 50%;
max-height: 50px;
}*/
.swap-amount {
font-size: 1.8rem;
align-items: end;
}
.swap-amount > span.amount {
font-size: 14vw;
min-width: 26vw;
}
.swap-amount span.text-small {
font-size: .5em;
margin-left: 0;
}

}


@media (min-width: 768px)  {
/*.flag {
width: 91px;
max-height: 48px;
}*/
.sub-title-icon span.ttl {
font-size: /*1.6rem*/  1.8rem;
}
.swap-amount > span.amount {
min-width: 134px;
}
.dflex-box li {
flex-flow: row wrap;
}
.dflex-box li > div:first-of-type {
width: 42%;
}
.dflex-box li > div:nth-of-type(2) {
width: 55%;
}
.dflex-box li.d-one > div:first-of-type {
width: 54%;
}
.dflex-box li.d-one > div:nth-of-type(2) {
width: 45%;
}
}

@media (max-width: 991.98px)  {
.unit-txt {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: end;
align-items: end;
flex-flow: column-reverse;
}
.swap-amount {
justify-content: center;
}
}

@media (min-width: 992px) {
/*.flag {
width: 110px;
height: 53px;
}*/
/*.sub-title-icon span.ttl {
font-size: 2rem;
}*/
.swap-amount {
align-items: baseline;
}
.swap-amount > span.amount {
font-size: 3.5em;
min-width: 154px;
}
.dflex-box li:first-of-type {
width: 45%;
}
}

/*table*/
.cp-table {
margin: auto;
width: 100%;
line-height: 1.2;
font-size: 1.5rem;
}
.cp-table th {
padding: 1rem 0;
background: #21639e;
color: #fff;
font-weight: normal;
width: 33%;
border: 1px solid gray;
}
.cp-table td {
padding: .8rem;
color: #e34f28;
border: 1px solid gray;
}
.cp-table td > span:first-of-type {
font-size: 2.8rem;
font-weight: bolder;
}
.cp-table td > span:nth-of-type(2) {
font-size: 0.8em;
}
.cp-table td:first-of-type > span:first-of-type {
font-size: 4rem;
}

@media (min-width: 768px)  {
.cp-table {
font-size: 1.8rem;
}
.cp-table th {
padding: 1rem;
}
.cp-table td > span:first-of-type {
font-size: 4rem;
}
.cp-table td:first-of-type > span:first-of-type {
font-size: 6.5rem;
}
}

@media (min-width: 1200px)  {
.cp-table {
width: 80%;
}
.cp-table td {
padding: 1.2rem;
}
}

/*カレンダー*/
.calender-month {
font-size: 2.5rem;
font-weight: bolder;
}

.calendar {
width:100%;
height:auto;
border-collapse: collapse;
}

.calendar th,
.calendar td {
width: 10%;
border: 1px solid #000;
text-align: center;
padding: 2px 6px;
font-size: 14px;
font-weight: bold;
align-content: start !important;
}

.calendar th {
padding: 6px 10px;
}

@media (max-width: 768px) {
.calendar th,
.calendar td {
padding: 1% 0;
font-size: 1.3rem;
}
.calendar th {
padding: 3px 6px;
}
.calendar th:first-of-type,
.calendar td:first-of-type,
.calendar th:last-of-type,
.calendar td:last-of-type {
width: 5%;	
}
}

.calendar .sun {
color: #e17f7e;
background: #f8e4e2;
}

.calendar .sun-n {
color: #e17f7e;
}

.calendar .sat {
color: #7ab6f3;
background: #e7f6fd;
}

.calendar .sat-n {
color: #7ab6f3;
}

.calendar .mute {
color: #aaa;
}
.calendar .bigamount {
background-color: rgb(247 173 191 / 20%);
}

.calendar .biggestamount {
background-color: rgb(247 173 191 / 60%);
}

.calendar-date {
display:block;
}

.calendar-incen {
display: block;
font-size:1.4rem;
color:#d30a0a;
letter-spacing: -0.05em;
line-height: 1.2;
}

@media (min-width: 768px) {
.calendar-incen {
font-size:1.8rem;
letter-spacing: normal;
}
}

.calendar-incen-small::before,.calendar-incen-big::before {
margin: 0 auto;
content: "";
background: url(../images/small-mny.svg) no-repeat;
display: block;
height: 2.2em;
width: 3em;
}

.calendar-incen-big::before {
background: url(../images/big-mny.svg) no-repeat;
height: 2.4em;
width: 3em;
}


@media (min-width: 768px) {
.calendar-incen-small::before {
height: 2.9em;
width: 3.7em;
}
}

@media (min-width: 768px) {
.calendar-incen-big::before {
height: 3em;
width:3.5em;
}
}


/*------------------------------------
btn,icon
--------------------------------------*/
.btn-dblue:after,
.btn-orange:after {
font-weight: normal;
}

.btn-orange {
padding: 10px;
font-size: 2rem;
font-weight: bold;
}

.btn-dblue {
padding: 6px 0 8px;
font-size:2rem ;
font-weight: bold;
}

.btn-outline {
padding: 1.1rem 3rem 1.1rem .8rem;
}
.btn-outline > span {
display: block;
font-size: 1.2em;
font-weight: bolder;
}
@media (min-width: 370px){
.btn-outline .d-xs-none {
display: none;
}
}
@media (max-width: 575.98px){
.btn-outline {
padding: 1.1rem 3rem 1.1rem 1.5rem;
}
}

@media (min-width: 992px) {
.btn-orange {
padding: 20px;
font-size: 2.5rem;
}
.btn-dblue {
padding: 4px 0 8px;
font-size:2.5rem ;
}
} 

@media (min-width: 768px) {
.btn-orange {
padding: 20px;
}
}

@media (max-width: 575.98px) {
.btn-outline-sm-2l, .btn-dblue-s-sm-2l, .btn-dblue-sn-sm-2l {
padding-right: 3rem !important;
}
}