@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:#ffedd5;
overflow: hidden;
position: relative;
}

.cp-area {
position: relative;
text-align: center;
padding: 2rem 0 3rem;
background: #0098d7;
}
.cp-area img {
max-width: 80vw;
}


@media (min-width: 768px) {
.kv {
background:image-set(url("../images/sand.webp") type("image/webp"),
url("../images/sand.png") type("image/png")) left top repeat #ffedd5;
background-size:80%;
}
.kv:before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 50rem;
width: 50rem;
background:image-set(url("../images/illust-l.webp") type("image/webp"),
url("../images/illust-l.png") type("image/png")) left -7rem top -5rem no-repeat;
background-size: 24rem;
z-index: 3;
}

.main-img {
position: relative;
z-index: 2;
margin:.5rem -10rem 4rem auto;
}
.main-img img { 
margin:auto;
max-width: 85vw;
}
.main-img:after {
position: absolute;
content: "";
bottom: -4rem;
right: 9rem;
height: 25rem;
width: 25rem;
background:image-set(url("../images/illust-r.webp") type("image/webp"),
url("../images/illust-r.png") type("image/png")) right bottom no-repeat;
background-size: 11rem;
}
.cp-area {
padding: 2rem 0 3rem;
}
.cp-area img {
max-width: 80vw;
}
.cp-area:before {
position: absolute;
content: "";
top: -7rem;
left: 0;
height: 14rem;
width: 2200px;
background:image-set(url("../images/wave.webp") type("image/webp"),
url("../images/wave.png") type("image/png")) right -1px bottom -1px repeat-x;
background-size: 45%;
}
}


@media (min-width: 992px) {
.kv:before {
background:image-set(url("../images/illust-l.webp") type("image/webp"),
url("../images/illust-l.png") type("image/png")) left -5rem top -5rem no-repeat;
background-size: 28rem;
}
.main-img img { 
max-width: 78vw;
}
.cp-area img {
max-width: 65vw;
}
.main-img:after {
background:image-set(url("../images/illust-r.webp") type("image/webp"),
url("../images/illust-r.png") type("image/png")) right bottom no-repeat;
background-size: 13rem;
}
}

@media (min-width: 1200px) {
.kv {
background:image-set(url("../images/sand.webp") type("image/webp"),
url("../images/sand.png") type("image/png")) left top repeat #ffedd5;
background-size:50%;
}
.kv:before {
background:image-set(url("../images/illust-l.webp") type("image/webp"),
url("../images/illust-l.png") type("image/png")) left -3rem top -6rem no-repeat;
background-size: 30rem;
}
.main-img:after {
bottom: -4rem;
left: calc(50% + 26rem);
background:image-set(url("../images/illust-r.webp") type("image/webp"),
url("../images/illust-r.png") type("image/png")) right bottom no-repeat;
background-size: 14rem;
}
.main-img {
margin:2rem -19rem 5rem auto;
}
.main-img img { 
max-width: 100%;
}
.cp-area {
padding: 2rem 0 3rem;
}
.cp-area img {
max-width: 100%;
}
}



@media (min-width: 1400px) {
.kv:before {
background:image-set(url("../images/illust-l.webp") type("image/webp"),
url("../images/illust-l.png") type("image/png")) left -3rem top -6rem no-repeat;
background-size: 37rem;
}

.main-img:after {
bottom: -4rem;
left: calc(50% + 45rem);
background:image-set(url("../images/illust-r.webp") type("image/webp"),
url("../images/illust-r.png") type("image/png")) right bottom no-repeat;
background-size: 16rem;
}
.cp-area:before {
top: -12rem;
height: 20rem;
width: 100vw;
background:image-set(url("../images/wave.webp") type("image/webp"),
url("../images/wave.png") type("image/png")) right -1px bottom -1px repeat-x;
background-size: 70%;
}
}



/*イントロ*/
.intro {
background: linear-gradient(to bottom, #fff 0 5rem, #0098d7 0 100%);
overflow: hidden;
position: relative;
padding-top: 5rem;
}

.intro:before {
position: absolute;
content: "";
top: -5rem;
left: 0;
height: 14rem;
width: 2200px;
background:image-set(url("../images/wave.webp") type("image/webp"),
url("../images/wave.png") type("image/png")) right -1px bottom -1px repeat-x #fff;
background-size: 30%;
}

.intro-img {
position: relative;
z-index: 2;
margin:2rem auto;
}

.item {
position: absolute;
bottom: -8rem;
left: calc(50% + 21rem);
width: 270px;
z-index: 2;
}

@media (min-width: 768px) {
.intro-img {
margin:4rem auto;
}
.intro-img img{
max-width: 90%;
}
.intro:before {
top: -4rem;
height: 14rem;
width: 2200px;
background:image-set(url("../images/wave.webp") type("image/webp"),
url("../images/wave.png") type("image/png")) right -1px bottom -1px repeat-x #fff;
background-size: 45%;
}
}


@media (min-width: 992px) {
.intro-img img { 
max-width: 600px;
}
.item {
bottom: -8rem;
left: calc(50% + 25rem);
width: 330px;
}
}

@media (min-width: 1200px) {
.intro-img {
margin:6rem auto;
}
.intro-img img { 
max-width: 100%;
}
}

@media (min-width: 1400px) {
.intro {
background: linear-gradient(to bottom, #fff 0 100px, #0098d7 0 100%);
padding-top: 5rem;
}
.intro:before {
top: -8rem;
height: 20rem;
width: 100vw;
background:image-set(url("../images/wave.webp") type("image/webp"),
url("../images/wave.png") type("image/png")) right -1px bottom -1px repeat-x;
background-size: 70%;
}
}

@media (min-width: 1700px) {
.intro {
background: linear-gradient(to bottom, #fff 0 150px, #0098d7 0 100%);
padding-top: 5rem;
}
.intro:before {
top: -3rem;
height: 20rem;
width: 100vw;
background:image-set(url("../images/wave.webp") type("image/webp"),
url("../images/wave.png") type("image/png")) right -1px bottom -1px repeat-x;
background-size: 70%;
}
}
/*イントロ end*/

.top-comment {
font-size: 1.4rem;
line-height:1.4;
}

@media (min-width: 576px) {
.top-comment {
font-size: 1.6rem;
}
}



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

.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;
}
}

.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;
}
}

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

h2.sub-title_inner {
padding: 1.5rem;
text-align: center;
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;
}

h2.title-icon {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.4;
/*font-size: 2rem;*/
font-weight: bolder;
margin-bottom: 0;
color: #fff;
background: #76674b;
padding: 1.5rem;
}
h2.title-icon span.ttl {
display: inline-block;
text-align: left;
white-space: nowrap;
}

.sub-title-icon {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: 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;
}

.icon-flag {
content: '';
display: inline-block;
width: 100px;
height: 48px;
background: url(../images/usdjpy.svg) no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 1.5rem;
}

.flag {
content: '';
display: inline-block;
width: 110px;
height: 53px;
vertical-align: middle;
}

.swap-amount {
font-weight: bolder;
font-size: 2.6rem;
line-height: 1.2;
margin-bottom: 0;
display: flex;
align-items: baseline;
}
.swap-amount > span.amount {
font-size: 3em;
line-height: 1;
color: #f3712e;
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;
align-items: center;
width: 50%;
}


@media (max-width: 575.98px) {
.sub-title-icon {font-feature-settings: "palt";}
.flag {
/*width: 50%;*/width: 91px;
max-height: 50px;
}
.swap-amount {
font-size: 1.8rem;
padding-left: 0;
}
.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;
}
.swap-amount > span.amount {
min-width: 134px;
}
.dflex-box li {
flex-flow: row wrap;
}
.dflex-box li > div:first-of-type {
width: 45%;
}
.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;*/
font-size: 3rem;
}
.swap-amount > span.amount {
/*font-size: 3.5em;*/
font-size: 4.2em;
min-width: 154px;
}
.dflex-box li:first-of-type {
width: 45%;
}
}



/*------------------------------------
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;
}
}