@charset "utf-8";

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

/*------------------------------------
fv
--------------------------------------*/
.kv {
background: #cee5fd;
background:image-set(url("../images/bg-top.webp") type("image/webp"),
url("../images/bg-top.jpg") type("image/jpg")) left center no-repeat #cee5fd;
background-size:cover;
overflow: hidden;
position: relative;
}

@media (min-width: 768px) and (max-width: 1199.9px) {
.kv::before {
position:absolute;
content: "";
right:0;
bottom:0;
width: 100vw;
height: 800px;
background:url("../images/kv_balloon.svg") left -20rem bottom -20rem no-repeat,
url("../images/kv_balloon.svg") right -17rem bottom -18rem no-repeat;
background-size: 37rem, 38rem;
z-index: 2;
}
.kv::after {
position:absolute;
content: "";
right:0;
bottom:0;
width: 100vw;
height: 800px;
background:image-set(url("../images/kira-right.webp") type("image/webp"),
url("../images/kira-right.png") type("image/png")) left calc(50% + 38rem) top 21rem no-repeat,
image-set(url("../images/kira-left.webp") type("image/webp"),
url("../images/kira-left.png") type("image/png")) right calc(50% + 50rem) top 22rem no-repeat;
background-size: 75rem, 69rem;
z-index: 3;
}
}

@media (min-width: 992px) and (max-width: 1199.9px) {
.kv::before {
background:url("../images/kv_balloon.svg") left -20rem bottom -25rem no-repeat,
url("../images/kv_balloon.svg") right -18rem bottom -20rem no-repeat;
background-size: 40rem, 41rem;
}
.kv::after {
background:image-set(url("../images/kira-right.webp") type("image/webp"),
url("../images/kira-right.png") type("image/png")) left calc(50% + 40rem) top 21rem no-repeat,
image-set(url("../images/kira-left.webp") type("image/webp"),
url("../images/kira-left.png") type("image/png")) right calc(50% + 51rem) top 22rem no-repeat;
background-size: 80rem, 78rem;
}
}


.main-img {
position: relative;
z-index: 10;
margin:5rem auto 2rem;
}
.main-img img {
max-width: 700px;
margin: auto;
}


@media (min-width: 1200px)  {
.main-img img {
max-width: 800px;
}
}

@media (min-width: 1600px)  {
.main-img img {
max-width: 100%;
}
}



.cs-obi {
padding: .5rem .2rem;
text-align: center;
z-index: 3;
position: absolute;
bottom: 0;
width: 100vw;
background: #b58363;
position: relative;
}
.cs-obi img {
position: relative;
max-width: 700px;
z-index: 10;
}


@media (min-width: 1200px)  {
.cs-obi::before {
position:absolute;
content: "";
right:0;
bottom:0;
width: 100vw;
height: 800px;
background:url("../images/kv_balloon.svg") left -20rem bottom -31rem no-repeat,
url("../images/kv_balloon.svg") right -18rem bottom -31rem no-repeat;
background-size: 43rem, 44rem;
z-index: 5;
}
.cs-obi::after {
position:absolute;
content: "";
right:0;
bottom:0;
width: 100vw;
height: 800px;
background:image-set(url("../images/kira-right.webp") type("image/webp"),
url("../images/kira-right.png") type("image/png")) left calc(50% + 40rem) top 21rem no-repeat,
image-set(url("../images/kira-left.webp") type("image/webp"),
url("../images/kira-left.png") type("image/png")) right calc(50% + 51rem) top 22rem no-repeat;
background-size: 80rem, 78rem;
z-index: 6;
}
}

@media (min-width: 1600px)  {
.cs-obi img {
max-width: 100%;
}
.cs-obi::before {
background:url("../images/kv_balloon.svg") left -17rem bottom -33rem no-repeat,
url("../images/kv_balloon.svg") right -13rem bottom -33rem no-repeat;
background-size: 48rem, 49rem;
}
.cs-obi::after {
background:image-set(url("../images/kira-right.webp") type("image/webp"),
url("../images/kira-right.png") type("image/png")) left calc(50% + 50rem) top 16rem no-repeat,
image-set(url("../images/kira-left.webp") type("image/webp"),
url("../images/kira-left.png") type("image/png")) right calc(50% + 69rem) top 11rem no-repeat;
background-size: 82rem, 80rem;
}
}



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


/*キャンペーン内容*/
h2.content-title {
padding:1.5rem .5rem;
text-align: center;
background: #b58363;
color:#fff;
margin-bottom: 0;
}
@media (max-width: 575.98px) {
h2.content-title {
font-size: 2rem;
}
}



/*キャンペーン条件*/
h3.line-heading {
margin: 3rem 0;
padding: .4rem 0 .4rem 1rem;
border-left: 14px solid #b58363;
line-height: 1;
}
.lead-title {
position: relative;
text-align: center;
padding: 1.2rem;
margin-bottom: 6rem;
}
.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, #949393 0, #949393 1px, transparent 0, transparent 50%);
background-size: 8px 8px;
}
@media (max-width: 575.98px) {
.lead-title {
margin-bottom: 4rem;
}
}

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

.bikou {
text-align: center;
font-size: 1.4rem;
}
@media (min-width:768px){
.bikou {
font-size: 1.6rem;
}
}


/*サブコンテンツ*/
ul.list-disc.blue-marker li::marker {
color: #1f8ede;
}

.marker {
background:linear-gradient(transparent 60%, rgba(255,141,154,0.7) 40%);
}
.sp-point > .marker {
background:linear-gradient(transparent 40%, rgba(253,200,103,0.75) 80%);
}


/*他のキャンペーン*/
h2.sub-title2 {
padding: 1.5rem;
text-align: center;
color: #fff;
background: #5c8bca;
line-height: 1.4;
margin-bottom: 0;
}

/*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: 4rem 0;
}
}


/*キャンペーン内容*/
.gift-area {
position: relative;
padding: 3rem 1.5rem;
background: #fff;
border:2px solid #c29d49;
margin:5rem auto 3rem;
}
@media (min-width: 992px) {
.gift-area {
padding: 3rem;
margin:7rem auto 3rem;
}
}

.ribon {
position: absolute;
bottom: calc(100% - 37px);
left: 50%;
transform: translateX(-50%);
}
.ribon img {
height: auto !important;
}

@media (max-width: 991.9px) {
.ribon img {
max-width: 250px;
}
}
@media (max-width: 767.9px) {
.ribon {
margin-top:1rem;
}
}

h3.gift-title {
text-align: center;
font-size: 3rem;
line-height: 1.4;
margin: 1.5rem auto;
color: #6c68c3;
}
.gift-price {
display: block;
font-size: 3rem;
color: #f96592;
}
.gift-price > span {
font-size: 1.4em; 
line-height: 1.2;
}
.gift-title-m {
display: block;
font-size: 2.6rem; 
}
.gift-title-s {
display: block;
font-size: 2rem;
}
@media (min-width: 992px) {
h3.gift-title {
font-size: 3.4rem;
}
.gift-price {
font-size: 3.4rem;
}
.gift-title-m {
font-size: 3rem; 
}
.gift-title-s {
font-size: 2.2rem;
}
}

p.gift-text {
text-align: center;
}
@media (max-width: 991.9px) {
p.gift-text {
font-size:1.6rem;
}
}



.present-img {
flex-wrap: wrap;
width: 100%;
border:2px solid #c29d49;
border-top:0;
}
.present-img > div  {
width: 50%;
}
@media (min-width: 768px) {
.present-img > div {
width: 25%;
}
}


/*取引開始までの流れ */
#flow.cp-article {
background: #cce3f5;
padding: 3rem 1rem;
}
@media (min-width: 576px)  {
#flow.cp-article {
padding: 6rem 0 5rem;
}
}

.flow-inner {
padding: 5rem 1.5rem 3rem;
background: #fff;
border-radius: 3rem;
filter: drop-shadow(0 7px 5px rgba(153, 180, 201, .4)) 
drop-shadow(0 -7px 5px rgba(153, 180, 201, .4));
}
@media (min-width: 992px)  {
.flow-inner {
padding: 5rem .5rem 3rem;
}
}

p.flow-btn-ttl {
font-weight: bolder;
font-size: 1.8rem;
line-height: 1.2;
}
@media (min-width: 992px)  {
p.flow-btn-ttl {
font-size: 2rem;
}
}


/*サブコンテンツ */
.sub-article {
position: relative;
overflow: hidden;
padding: 3rem 1rem;
background-color: #f1fcff;
background-image: radial-gradient(#ceeaff 7%, transparent 7%), 
radial-gradient(#ceeaff 7%, transparent 7%);
background-size: 60px 60px;
background-position: 10px 10px, 40px 40px;
}
@media (min-width: 576px)  {
.sub-article {
padding: 6rem 0 5rem;
}
}

.sub-article-inner {
position: relative;
padding: 5rem 1rem 3rem;
background: #fff;
border-radius: 3rem;
margin:7rem auto 6rem;
filter: drop-shadow(0 7px 5px rgba(180, 197, 207, .5)) 
drop-shadow(0 -7px 5px rgba(180, 197, 207, .5));
}


.sub-article-no {
position:absolute; 
display: inline-block;
top:-8px; 
left:0;
padding:10px 20px 10px 30px;
border-radius: 0 0 20px 0;
background: #2b59ad; 
color:#fff;
text-align: center;
font-size: 1.6rem;
white-space: nowrap;
line-height: 1.2;
}
.sub-article-no:before {
position: absolute;
content: url(../images/point.svg);
top: -42px;
left: -9px;
width: 70px;
height: auto;
transform: rotate(346deg);
filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, .25))
}

@media (min-width: 992px)  {
.sub-article-no {
left:-8px;
padding:20px 30px 20px 45px;
font-size: 1.8rem;
}
.sub-article-no:before {
top: -35px;
left: -25px;
width: 80px;
}
}

.sub-article-no > .en {
font-size: 1.4em;
font-weight: bolder;
letter-spacing:1px;
}
.sub-article-no > .en > span {
font-size: 1.5em;
line-height: 1;
}

h2.sub-title {
padding: 1.5rem .5rem;
text-align: center;
margin-bottom: 3rem;
}

h2.recommend-point {
padding: .5rem 0;
text-align: center;
font-size: 2.2rem;
margin: 2rem auto 1.5rem;
}
@media (min-width:768px){
h2.recommend-point {
margin: 3rem auto 4rem;
font-size: 3rem;
}
}

h3.recommend-sub {
color:#1f8ede;
letter-spacing: 1px;
margin-bottom: 2rem;
}
@media (min-width:576px){
h3.recommend-sub {
letter-spacing: 2px;
}
}

.sp-pointlist {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.sp-pointlist li {
width: 24%;
}
@media (max-width:991.98px){
.sp-pointlist li {
width: 42%;
}
.sp-pointlist li:first-of-type,
.sp-pointlist li:nth-of-type(3) {
margin-right: 25px;
}
}

.sp-point {
position: relative;
padding: .8rem;
background: #e1f0ff;
font-size: 1.6rem;
font-weight: bold;
letter-spacing: 1px;
line-height: 1.4;
box-shadow: 2px 2px 0px #77ace1;
border-radius: 1.2rem;
margin-top: -7rem;
flex-grow: 1;
}
@media (min-width: 992px) {
.sp-point {
padding: 1rem 1.5rem;
font-size: 1.8rem;
letter-spacing: 2px;
line-height: 1.5;
margin: -11rem 1.5rem 0;
}
}

.sp-point:before {
content: "";
position: absolute;
bottom: 100%;
right: calc(50% - 1rem);
border:1rem solid transparent;
border-bottom: 1.8rem solid #e1f0ff;
}

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

/*取引開始までの流れ*/
.btn-flow-outline,
.btn-flow-outline:focus {
position: relative;
display: block;
margin: .5rem 1rem;
padding: 1rem .8rem;
background: #fff;
border: 2px solid #2b59ad;
border-radius: 50rem;
text-align: center;
font-weight: bolder;
font-size: 2.2rem;
color: #2b59ad;
line-height: 1.2;
vertical-align: middle;
transition: all .3s ease-in-out;
}
@media (min-width: 768px) {
.btn-flow-outline,
.btn-flow-outline:focus {
margin: .5rem 5rem;
}
}

.btn-flow-outline:after, 
.btn-flow-outline:focus:after {
display: inline-block;
position: absolute;
font-family: 'icomoon';
font-size: 2rem;
content: "\e912";
color: #2b59ad;
transform: rotate(90deg);
margin: auto;
top: 0;
bottom: 0;
height: 1em;
right: 1rem;
transition: .2s;
}

.btn-flow-outline:hover, 
.btn-flow-outline:active {
color: #658ed9;
border: 2px solid #658ed9;
background: #f5faff;
}
.btn-flow-outline:hover:after, 
.btn-flow-outline:active:after {
right: 0.6rem;  
color: #658ed9;
}

.btn-flow-outline > div {
gap: 10px;
}

/*サブコンテンツ*/
.text-blue-frame {
display: inline-block;
position: relative;
color: #fff;
background-color: #1f8ede;
border-radius: 50rem;
padding: 0.4rem 3.2rem 0.25rem 2rem;
transition: all .3s ease-in-out;
}
.text-blue-frame:after {
display: inline-block;
position: absolute;
font-family: 'icomoon';
content: "\e912";
font-size: 1.5rem;
transform: rotate(90deg);
margin: auto;
top:0;
bottom: 0;
height: 1em;
right: .4rem;
transition: .2s;
}
.text-blue-frame:hover,
.text-blue-frame:focus {
color: #fff;
background-color: #4aa6e9;
}
.text-blue-frame:hover:after {
right: 0rem ; 
color: #fff;
}