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

@media print {
table {
/* 自動計算をオフにする */
table-layout: fixed; 
width: 100%;
border-collapse: collapse; 
}
}

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

.main-img {
position: relative;
z-index: 3;
margin:6rem -1rem 6rem auto;
}
.main-img img {
height: auto;
margin: auto;
max-width: 930px;
}


@media (min-width: 992px) {
.main-img {
margin:7rem -1rem 7rem auto;
}
.main-img img {
max-width: 1000px;
}
}
/*
@media (min-width: 1200px) {
.main-img {
margin:5rem auto;
}
.main-img img {
max-width: 780px;
margin-left:-13rem;
}
}
*/

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


.cs-obi {
position: absolute;
bottom: 0;
width: 100vw;
padding: .8rem .2rem;
text-align: center;
z-index: 5;
background: #0ba3d5;
}
.cs-obi img {
max-width: 680px;
}

@media (min-width: 1200px)  {
.cs-obi img {
max-width: 100%;
}
}



/*------------------------------------
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: #434b4f;
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 #079bcc;
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;
}
}


/*他のキャンペーン*/
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;
}
}

/*table*/
.cp-table {
margin: auto;
width: 100%;
line-height: 1.2;
font-size: 1.5rem;
}
.cp-table td {
padding: .8rem;
border: 1px solid gray;
text-align: left;
}
.cp-table th {
padding: 1.5rem 0;
border: 1px solid gray;
}


@media (min-width: 768px) {
.cp-table {
font-size: 1.7rem;
}
.cp-table th {
background: #38618e;
color: #fff;
border-right: 1px solid #fff;
}
.cp-table th:nth-of-type(1) {
width: 18%;
}
.cp-table th:nth-of-type(2) {
width: 18%;
}
.cp-table th:nth-of-type(3) {
width: 38%;
}
.cp-table th:nth-of-type(4) {
width: 26%;
border-right: 1px solid gray;
}

.cp-table tr td:first-of-type {
text-align: center;
font-weight:bolder;
}
.cp-table td .list-disc {
margin-bottom: 0;
}
.cp-table td .list-disc li:last-of-type {
padding-bottom: 0;
}
}

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


/*table　SP*/
@media (max-width: 767.9px)  {
.cp-table th {
width: 30%;
padding: 1rem .25rem;
}
.cp-table tr:nth-of-type(1) th,
.cp-table tr:nth-of-type(5) th,
.cp-table tr:nth-of-type(9) th {
background: #38618e;
color: #fff;
width: 100%;
}
}


.top-comment {
font-size: 1.4rem;
line-height:1.4;
}
.top-comment li {
text-indent: -3.6rem;
padding-left: 3.5rem;
}
@media (min-width: 576px) {
.top-comment {
font-size: 1.6rem;
}
.top-comment li {
text-indent: -4.1rem;
padding-left: 4rem;
}
}



/*サブコンテンツ */
h2.sub-title {
padding: 1.5rem .5rem;
text-align: center;
margin-bottom: 3rem;
}

.cp-article-inner {
padding: 5rem 3rem;
border-radius: 3.5rem;
background: #fff;
margin: 3rem auto;
}


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



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