@charset "utf-8";

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

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

/* .lp-header {
    background:url( "../images/bg-r-m_v2.png")right bottom no-repeat,
    url( "../images/bg-top_B_v2.png")left bottom no-repeat #5a7aa2;
    background-size:auto 100%,cover;
    overflow: hidden;
    position: relative;
    } */
    .lp-header {
        background:url( "../images/bg-top_v2.jpg")center bottom no-repeat;
        /* background-size:auto 100%,cover; */
        background-size:cover;
        overflow: hidden;
        position: relative;
        }


        .main-img {
            position: relative;
            z-index: 3;
            margin: 6.5rem auto 9rem;
            }

    /* .main-img img {
    max-width: 340px;
    } */

    @media screen and (min-width: 768px) and (max-width: 991px){
        .main-img img {
            max-width: 690px;
            }
            }

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

    @media (min-width: 1200px) {
    .main-img {
    position: relative;
    z-index: 3;
    margin: 6.5rem auto 9rem;
    }
    .main-img img {
    max-width: 100%;
    }
    }

    @media (min-width: 1400px) {
    .lp-header {
    background:url( "../images/bg-top_v2.jpg")right bottom no-repeat;
    background-size:cover;
    overflow: hidden;
        position: relative;
    }
    .main-img {
        margin: 6.5rem auto 9rem;
    }
    }

    @media (min-width: 1600px) {
    .lp-header {
    background:url( "../images/bg-top_v2.jpg")right bottom no-repeat;
    background-size:cover;
    overflow: hidden;
        position: relative;
    }

    .main-img {
        margin: 6.5rem auto 9rem;
        }
    }

    @media (min-width: 1800px) {
    .lp-header {
    background:url( "../images/bg-top_v2.jpg")right bottom no-repeat;
    background-size:cover;
    overflow: hidden;
        position: relative;
    }

    .main-img {
        margin: 6.5rem auto 9rem;
        }
    }



/*------------------------------------
text common
--------------------------------------*/

.indent_style > li{
    list-style-type: disc;   /* ● に戻す */
    display: list-item;      /* li表示に戻す */
    margin-left: 1.5em;      /* 適度なインデントを手動で追加 */
}

.indent_style > li::marker{
    color: #4390e0 !important;
}

@media (max-width: 575.98px) {
h2 {
font-size: 2.2rem;
}
}

.topic-title {
text-align: center;
font-weight: bolder;
font-size: 1.8rem;
}

@media (min-width: 992px) {
.topic-title {
font-size: 2.2rem;
}
}

h3.line-heading {
margin: 3rem 0;
padding: .4rem 0 .4rem 1rem;
/*border-left: 14px solid #949393;*/
border-left: 14px solid #2e3192;
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;
}
}

.lead-title-sub {
position: relative;
text-align: center;
padding: 1.2rem;
}
.lead-title-sub span {
font-size: .7em;
line-height: 1.2;
}
@media (min-width: 360px)  {
.d-xxl-block {
display: none;
}
}
@media (min-width: 390px)  {
.d-xxl-block2 {
display: none;
}
}

.content-title {
position: relative;
padding: 1.5rem 0;
margin-bottom: 0;
text-align: center;
background:#2e3192;
color: #fbe68c;
}


.content-title2 {
position: relative;
padding: 1.5rem 0;
margin-bottom: 0;
text-align: center;
background:#12456a;
color:#fff;
}

.flow-title {
margin: 3rem auto 0;
text-align: center;
color:#084493;
}
.flow-subtitle {
text-align: center;
color:#084493;
margin-bottom: 3rem;
}

@media (max-width: 575.98px){
.content-title {
font-size: 2rem;
}
}


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


.gift-ttl {
font-size: 3rem;
line-height: 1.2;
color: #484b4e;
margin: 0.5rem auto;
letter-spacing:2px;
font-feature-settings:"palt";
}
.gift-ttl span {
font-size: /*.6em*/.65em;
/*vertical-align: top;*/
}
.gift-ttl-2 {
font-size: 2.65rem;
line-height: 1.2;
color: #484b4e;
margin: 1.5rem auto 1rem;
/*font-feature-settings:"palt";*/
}
.gift-ttl-3 {
font-size: 2.8rem;
line-height: 1.2;
color: #484b4e;
margin: 0 auto;
}
.gift-ttl-sub {
font-size: 2.3rem;
font-weight: bolder;
line-height: 1.2;
color: #484b4e;
margin: 0 auto;
}
.gift-text-s {
text-align: left;
margin: 0 auto 1rem;
}

.present-ribon {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
.ribon img {
width: 220px;
}

@media (min-width: 768px) {
.gift-ttl-sub {
margin: 0 auto /*2rem*/1rem;
}
.ribon img {
width: 260px;
}
}

@media (min-width: 992px) {
.gift-ttl {
font-size: 3.6rem;
}
.gift-ttl-2 {
font-size: 3.8rem;
}
.gift-ttl-3 {
font-size: 3.8rem;
}
.gift-ttl-sub {
font-size: 3rem;
margin: 0 auto /*2rem*/1rem;
}
.gift-text-s {
margin-bottom: 3rem;
}
.ribon img {
width: 300px;
}
.mb-lg-6 {
margin-bottom: 4rem !important;
}
}

/*キャンペーン期間*/
.cp-date {
text-align: center;
font-size: 2.5rem;
font-weight: bolder;
line-height: 1.4;
margin-bottom: 3rem;
}
@media (max-width: 991.98px)  {
.cp-date {
font-size: 2rem;
font-feature-settings: "palt";
}
}
@media (min-width: 360px) and (max-width: 767.98px) {
.cp-date .d-xs-block {
display: block !important ;
}
}

/* .plus-search {position: relative;}
.plus-search:before {
position: absolute;
font-family: 'icomoon';
content: "\eb12";
font-size: 7rem;
color:rgba(252,252,252,1);
right: 3rem;
bottom: 1rem;
z-index: 2;
} */

/*------- modal,slick -------*/
.slick-slide img {
margin: auto;
max-width: 100%;
}
.slick-next {
right: 6%;
}
.slick-prev {
left: -9%;
}
.slick-next::before {
content: "\e90c";
font-size: 3.5rem;
}
.slick-prev::before {
content: "\e90b";
font-size: 3.5rem;
}


@media (min-width: 768px) {
.modal-lg {
max-width: 600px;
margin: 1.75rem auto;
}
.slick-next {
right: 4%;
}
.slick-prev {
left: -5%;
}
}
@media (min-width: 992px) {
.modal-lg, .modal-xl {
max-width: 800px;
}
.slick-next {
right: 3%;
}
.slick-prev {
left: -3.5%;
}
}

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

.flow-btn {
width: 90%;
}
.flow-btn a {
display: block;
width: 100%;
padding:.8rem .4rem;
text-align: center;
border:2px solid /*#1f8ede*//*#bbc4d0*/#485e9a;
border-radius: .8rem;
background: #eaf6ff;
color: #434343;
box-shadow: 3px 3px 0 /*#bbc4d0*/#485e9a;
transition: .2s;
}
.flow-btn a:hover {
border:2px solid /*#4aa6e9*//*#bbc4d0*/#485e9a;
background: /*#f7fbff*/#f0f9ff;
color: #434343;
box-shadow: 1px 1px 0 /*#bbc4d0*/#485e9a;
transition: .2s;
}
@media (min-width: 768px){
.flow-btn {
width: 45%;
}
.flow-btn a{
max-width: 480px;
padding: 1.4rem;
}
}

@media (max-width: 575.98px){
.flow-btn a p {font-size: 1.6rem}
}

.fixed-btn {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
width: 100%;
padding: 0.8rem 1.5rem;
text-align: center;
background-color: rgba(223,223,223,0.6);
}


/*------------------------------------
Contents
--------------------------------------*/

.sp-point {
position: relative;
padding: .8rem;
min-height: 110px;
background: #f4f7fd;
font-size: 1.6rem;
font-weight: bold;
line-height: 1.4;
box-shadow: 1px 1px 1px #bbc4d0;
}
@media (min-width: 992px) {
.sp-point {
padding: 1rem 1.5rem;
font-size: 2rem;
line-height: 1.5;
margin: auto 3rem;
}
}
.sp-point:before {
content: "";
position: absolute;
bottom: 100%;
right: calc(50% - 2rem);
border:2rem solid transparent;
border-bottom: 2rem solid #f4f7fd;
}

.recommend-point {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
margin: 3rem 0 1.5rem ;
color: /*#084493*/#886042;
padding: .5rem 0 ;
text-align: center;
}

.recommend-icon {
width: 138px;
height: auto;
margin: auto auto 1.5rem;
transform: rotate(-15deg);
}

@media (min-width:768px){
.recommend-point {
flex-flow: row wrap;
align-items: flex-end;
margin: 3rem 0 7rem -5rem;
}
.recommend-icon {
margin: auto 1.5rem 0 0;
}
.reicon-l {
margin-right: 0;
}
}
@media (min-width:992px){
.recommend-point span {
min-width: 480px;
}
.recommend-icon {
width: 160px;
margin-right: /*9rem*/ 5rem;
}
.reicon-l {
margin-right: 1rem;
}
}



@media (min-width: 992px){
.max-lg-950 {
max-width: 950px;
}
}

.recommend-1000 {
position: relative;
margin-top: 6.5rem;
}
.recommend-fukidashi {
position: absolute;
top: -6rem;
left: 0;
right: 0;
z-index: 3;
}
.recommend-fukidashi img {
max-width: 450px;
width: 100%;
}

@media (min-width: 768px){
.recommend-1000 {
margin-top: 5rem;
}
}
@media (min-width: 992px){
.recommend-1000 {
margin-top: 0;
}
.recommend-fukidashi {
top: /*-6rem*/ 0;
left: /*calc(50% + 250px)*/calc(50% + 290px);
transform: rotate(20deg);
max-width: 225px;
width: 100%;
}
}

.cp-article {
position: relative;
overflow: hidden;
padding: 3rem 0;
background:/*#f6f0ee*/#f0f3f4;
}

.cp-article2 {
position: relative;
background: #f3eada;
padding: 3rem 0;
}

.cp-article3 {
position: relative;
padding: 3rem 0;
}

.present-img {
flex-wrap: wrap;
width: 100%;
}
.present-img > div  {
width: 50%;
}
@media (min-width: 768px) {
.present-img > div {
/* width: 33.333333%; */
width: 25%;
}
}