@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(min-width:1000px){

/*STYLE*/
.sp {
display:none;
}

.cts {
width:1000px;
}

.titles {
padding-bottom:25px;
text-align:center;
}

.titles h2 {
font-size:350%;
font-weight:600;
line-height:120%;
}

.titles .subtitle {
font-size:135%;
font-weight:600;
}

.titles .cate_title {
    position:relative;
    display:inline-block;
    margin-bottom:15px;
}

.titles .cate_title .cate {
    font-size:110%;
    font-weight:600;
    color:#e60032;
    position:relative;
}

.titles .cate_title .line {
    height:1px;
    background:#e60032;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}





/*HEADER*/
header {
    width:100%;
    height:60px;
    position:fixed;
    top:0;
    left:0;
    display:flex;
    align-items:center;
    z-index:9999;
}

header .cts {
    width:calc(100% - 60px);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

header h1 {
    font-size:110%;
    font-weight:600;
}

header .header_cta {

}

header .header_cta a {
    display:flex;
    justify-content:center;
    align-items:center;
    background:#e60032;
    width:150px;
    height:36px;
    border-radius:6px;
}

header .header_cta a img {
    width:25px;
    margin-right:10px;
}

header .header_cta a p {
    font-size:90%;
    font-weight:500;
    color:#fff;
}





/*MV*/
#mv {
    width:calc(100% - 60px);
    margin:60px auto 50px;
    background:linear-gradient(45deg,#3b3b3b,#646464,#535456,#3d3d3d,#3d3d3d);
    border-radius:6px;
}

#mv .cts {
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
}

#mv .photo {
    width:550px;
}

#mv .copies {
    position:absolute;
    left:500px;
}

#mv .copies .maincopy {
}

#mv .copies .maincopy p {
    font-size:420%;
    line-height:100%;
    letter-spacing:3px;
    margin-bottom:15px;
    color:#fff;
}

#mv .copies .subcopy {
    font-size:90%;
    letter-spacing:2px;
    margin-bottom:20px;
    color:#fff;
}

#mv .copies .colors {
    display:flex;
}

#mv .copies .colors .color {
    width:20px;
    height:20px;
    margin-right:8px;
}

#mv .copies .colors .color:first-child {
    background:#12284e;
}

#mv .copies .colors .color:nth-child(2) {
    background:#faebb4;
}



/*INTRO*/
#intro {
    width:calc(100% - 60px);
    margin:0 auto 100px;
    padding:70px 0;
    border-radius:6px;
    text-align:center;
    position:relative;
}

#intro .bg {
    width:100%;
    height:100%;
    background:url(../img/intro_bg.png) center / cover;
    border-radius:6px;
    text-align:center;
    position:absolute;
    top:0;
    left:0;
}

#intro .element {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:10px;
}

#intro .element p {
    font-size:120%;
    font-weight:500;
    line-height:100%;
    padding:10px 12px;
    border:#1e3c64 1px solid;
    background:#fff;
    color:#1e3c64;
    margin:0 6px;
}

#intro .subcopy {
    font-size:200%;
    font-weight:700;
    margin-bottom:5px;
}

#intro .maincopy {
    display:flex;
    justify-content:center;
    align-items:flex-end;
    margin-bottom:15px;
}

#intro .maincopy .copy {
    font-size:350%;
    font-weight:600;
    line-height:100%;
}

#intro .maincopy .copy:nth-child(2) {
    color:#e60032;
    background:#f5e100;
    padding:10px 5px 5px;
    margin:0 5px;
}

#intro .maincopy .copy .number {
    font-size:150%;
}

#intro .tx {
    display:flex;
    justify-content:center;
    align-items:center;
}

#intro .tx p {
    font-size:135%;
    font-weight:700;
    background:#fff;
    display:inline-block;
    padding:5px 0;
}

#intro .tx p .underline {
    border-bottom:#e60032 1px solid;
    color:#e60032;
}


/*ABOUT*/
#about {
    padding-bottom:100px;
}

#about .titles h2 {
    font-weight:600;
}

#about .copy {
    font-size:110%;
    text-align:center;
    margin-bottom:30px;
}

#about .photo {
    width:500px;
    margin:auto;
}



/*WORRY*/
#worry {
    padding:100px 0;
    position:relative;
}

#worry .bg {
    width:100%;
    height:400px;
    background:#fef2f5;
    position:absolute;
    left:0;
    bottom:0;
    z-index:-1;
}

#worry .photo {
    width:500px;
    margin:0 auto 30px;
}

#worry .worry {
    width:800px;
    margin:0 auto 70px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}

#worry .worry li {
    width:49%;
    display:flex;
    align-items:center;
    background:#f4f5f7;
    padding:12px 18px;
    margin-bottom:15px;
}

#worry .worry li img {
    width:20px;
    margin-right:10px;
}

#worry .worry li p {
    font-size:110%;
    font-weight:500;
}

#worry .mirai {
    position:relative;
    border:#e60032 1px solid;
    border-radius:6px;
    padding:50px;
    background:#fff;
}

#worry .mirai .arrow {
    width:100px;
    position:absolute;
    top:-50px;
    left:0;
    right:0;
    margin:auto;
}

#worry .mirai .details {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

#worry .mirai .details .illust {
    width:350px;
}

#worry .mirai .details .detail {
    width:500px;
}

#worry .mirai .details .detail .tx {
    font-size:135%;
    font-weight:600;
    margin-bottom:12px;
}

#worry .mirai .details .detail .result {
}

#worry .mirai .details .detail .result li {
    width:100%;
    display:flex;
    align-items:center;
    background:#fef2f5;
    padding:12px 18px;
    margin-bottom:12px;
}

#worry .mirai .details .detail .result li img {
    width:20px;
    margin-right:10px;
}

#worry .mirai .details .detail .result li p {
    font-size:110%;
    font-weight:500;
}

#worry .mirai .summary {
    font-size:180%;
    font-weight:700;
    line-height:160%;
    color:#e60032;
    text-align:center;
}






/*GUIDE*/
#guide {
    padding:100px 0;
    position:relative;
}

#guide .bg {
    width:100%;
    height:275px;
    background:#d3cbb4;
    position:absolute;
    left:0;
    bottom:0;
}

#guide .cts {
    width:100%;
}

#guide .guide_slider {
    position:relative;
}

#guide .guide_slider .swiper-wrapper {
}

#guide .guide_slider .swiper-slide {
    border:#cbab4b 10px solid;
}




/*POINT*/
#point {
    padding:100px 0;
}

#point .points {
    width:900px;
    margin:0 auto 35px;
    display:flex;
    justify-content:space-between;
}

#point .points .point {
    width:30%;
}

#point .points .point .number {
    font-size:250%;
    font-weight:600;
    line-height:100%;
    color:#e60032;
    text-align:center;
    margin-bottom:10px;
}

#point .points .point .details {

}

#point .points .point .details .icon {
    width:135px;
    margin:0 auto 15px;
}

#point .points .point .details .detail {
}

#point .points .point .details .detail .item {
    font-size:135%;
    font-weight:600;
    line-height:100%;
    color:#e60032;
    text-align:center;
    margin-bottom:10px;
}

#point .points .point .details .detail .tx {
}

#point .column {
    background:#faf5f0;
    padding:35px 60px 0;
    display:flex;
    justify-content:space-between;
    flex-direction:row-reverse;
    align-items:center;
    border-radius:6px;
}

#point .column .letter {
    width:620px;
    background:url(../img/letter_bg.svg);
    background-size:10px 50px;
    margin-bottom:35px;
}

#point .column .letter p {
    font-size:110%;
    line-height:50px;
}

#point .column .photo {
    width:230px;
}



/*MESSAGE*/
#message {
    padding:100px 0;
    display:none;
}

#message .details {
    width:900px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    flex-direction:row-reverse;
}

#message .photo {
    width:350px;
}

#message .detail {
    width:500px;
}

#message .detail .letter {
    background:url(../img/letter_bg.svg);
    background-size:10px 50px;
    margin-bottom:30px;
}

#message .detail .letter p {
    line-height:50px;
}

#message .detail .sign {
    width:150px;
    margin:0 0 0 auto;
}



/*CTA*/
.cta {
    background:#1e3c64;
    padding:75px 0 50px;
}

.cta .sales {
    width:700px;
    border:#fff 3px solid;
    position:relative;
    padding:40px 25px 20px;
    text-align:center;
    margin:0 auto 30px;
}

.cta .sales .limited {
    width:330px;
    height:50px;
    background:url(../img/cta_limited.svg) center no-repeat;
    background-size:100% 100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:absolute;
    top:-25px;
    left:0;
    right:0;
    margin:auto;
}

.cta .sales .limited p {
    font-size:120%;
    color:#fff;
}

.cta .sales .before {
    font-size:150%;
    color:#fff;
    margin-bottom:20px;
}

.cta .sales .before .tax {
    font-size:50%;
}

.cta .sales .after {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:15px;
}

.cta .sales .after .sale {
    border:#f5e100 2px solid;
    color:#f5e100;
    font-size:180%;
    font-weight:600;
    line-height:100%;
    padding:8px 10px;
    margin-right:15px;
    margin-bottom:15px;
    transform:rotate(-2deg);
}

.cta .sales .after .price {
    line-height:100%;
    color:#f5e100;
}

.cta .sales .after .price .number {
    font-size:600%;
}

.cta .sales .after .price .yen {
    font-size:200%;
    font-weight:700;
}

.cta .sales .after .price .tax {
    font-size:80%;
}

.cta .sales .tx {
    font-size:150%;
    font-weight:500;
    line-height:100%;
    color:#fff;
}

.cta .summary {
    font-size:135%;
    color:#fff;
    text-align:center;
    margin-bottom:30px;
}

.cta .cta_btn {
    text-align:center;
}

.cta .cta_btn .btn {
    display:inline-block;
    animation:cta 1s infinite alternate;
}

.cta .cta_btn .btn a {
    width:500px;
    height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#f5e100;
    position:relative;
    padding:0 15px;
    border-radius:100vw;
}

.cta .cta_btn .btn a .arrow {
    width:8px;
    height:8px;
    border:transparent 8px solid;
    border-right:transparent 12px solid;
    border-left:#e60032 12px solid;
    position:absolute;
    right:30px;
}

.cta .cta_btn .btn a .copies {
}

.cta .cta_btn .btn a .copies .btn_limited {
    display:flex;
    justify-content:center;
    align-items:flex-end;
    margin-bottom:10px;
}

.cta .cta_btn .btn a .copies .btn_limited img {
    width:20px;
}

.cta .cta_btn .btn a .copies .btn_limited p {
    font-size:120%;
    font-weight:600;
    line-height:100%;
    padding:0 10px;
    color:#e60032;
}

.cta .cta_btn .btn a .copies .copy {
    font-size:200%;
    font-weight:600;
    line-height:100%;
    color:#e60032;
}















/*BACK TO TOP*/
.BackToTop {
position:fixed;
width:50px;
height:50px;
right:15px;
bottom:15px;
z-index:100;
display:none;
}



/*FOOTER*/
footer {
padding:30px 0;
}

footer .copyright {
font-size:60%;
font-size:300;
text-align:center;
color:#b4b4b4;
}





/*----- INVIEW -----*/
.fadeIn {
    opacity:0;
    transition:1s;
}

.fadeIn.show {
    opacity:1;
}

.fadeInUp {
    opacity:0;
    transform:translate(0,30%);
    transition:1s;
}

.fadeInUp.show {
    opacity:1;
    transform:translate(0,0);
}




/*----- SWIPER -----*/
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
    width:50px;
    height:50px;
    background:#e60032;
}

.swiper-button-prev {
    left:0;
}

.swiper-button-next {
    right:0;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: "";
    height: 0;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
    width:20px;
    height:20px;
    border-left:2px #fff solid;
    border-bottom:2px #fff solid;
    transform:rotate(45deg);
    left:20px;
}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {
    width:20px;
    height:20px;
    border-top:2px #fff solid;
    border-right:2px #fff solid;
    transform:rotate(45deg);
    right:20px;
}

.swiper-slide-active {
  opacity: 1;
}

.swiper-slide-next,
.swiper-slide-prev {
  opacity: 0.5;
}

/* Swiper ページネーション位置調整 */
.swiper-pagination {
  position: absolute; /* デフォルト */
  bottom: -40px !important;       /* 下からの距離 */
  left: 0;
  text-align: center; /* ドットを中央寄せ */
}

/* 通常（非アクティブ）ドット */
.swiper-pagination-bullet {
  background: #fff;   /* グレー */
  opacity: 0.5;       /* 少し透過 */
  border-radius:0;
  width:10px;
  height:10px;
}

/* アクティブ中のドット */
.swiper-pagination-bullet-active {
  background: #e60032;  /* オレンジなど好きな色 */
  opacity: 1;           /* はっきり表示 */
}




}