@charset "utf-8";
/* WSYS-11250 【フロント】2000万人突破キャンペーン 第2弾 20240801 N.Kita */

/* 共通幅設定 */
.million_inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background: #fff;
}

/* apply_btn */
.apply_area {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.apply_area  .apply_btn {
    font-size: 3.2rem;
}
.apply_area  .module-base_btn {
    min-width: 480px;
}
.apply_area .theme-cv_btn {
    box-shadow: 0px 4px 0px rgba(134, 6, 6, .7);
}
.apply_area .theme-cv_btn:after {
    content: "\f0da";
    font-size: 4rem;
    right: 50px;
}

/* campaign_period */
/* WSYS-11391 【フロント】2000万人突破キャンペーン第2弾 終了対応 20240905 M.Shimizu */
.campaign_period {
    margin: 10px auto 40px;
    text-align: center;
}
.campaign_period p {
    display: inline-block;
    padding: 30px 40px;
    background: #999;
    color: #333;
    font-size: 2.4rem;
    font-weight: 600;
}

/* kv */
.kv {
    position: relative;
}
/* WSYS-11391 【フロント】2000万人突破キャンペーン第2弾 終了対応 20240905 M.Shimizu */
.kv .apply_area {
    position: absolute;
    right: 60px;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.kv .apply_area ._note {
    text-shadow: 3px 3px 2px #fff,
        -3px -3px 2px #fff,
        -3px 3px 2px #fff,
        3px -3px 2px #fff,
        3px 0px 2px #fff,
        -3px 0px 2px #fff,
        0px 3px 2px #fff,
        0px -3px 2px #fff;
}

/* period */
/* WSYS-11391 【フロント】2000万人突破キャンペーン第2弾 終了対応 20240905 M.Shimizu */
.period .campaign_period {
    width: 100%;
    margin: 0;
}
.period .campaign_period p {
    width: 100%;
    padding: 20px 30px;
}

/* prize */
.prize {
    background: repeating-linear-gradient(-45deg, #fcf4cf, #fcf4cf 8px, #feffe3 8px, #feffe3 13px);
}
.prize ._inner {
    padding: 60px 80px;
}
.prize_head {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.prize .prize_head ._subtitle {
    width: 360px;
    padding-bottom: 10px;
}
.prize .prize_head ._title {
    width: 560px;
}
.prize .prize_list {
    display: flex;
    flex-wrap: wrap;
    gap: 80px 20px;
    padding: 60px 0;
}
.prize .prize_item {
    position: relative;
    background: #fff;
    border-radius: 25px;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.4) 8px 8px;
}
.prize .prize_item.item-a,
.prize .prize_item.item-b {
    width: calc((100% - 20px)/2);
}
.prize .prize_item.item-c,
.prize .prize_item.item-d,
.prize .prize_item.item-e {
    width: calc((100% - 40px)/3);
}
.prize .prize_item ._prizeーnumber {
    position: absolute;
    top: 20px;
    left: 30px;
    transform: translate(-50%, -50%);
    padding: 15px;
    color: #fff;
    border: 5px solid #fff;
    border-radius: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-weight: 700;
}
.prize .prize_item.item-a ._prizeーnumber {
    background-color: #e64370;
}
.prize .prize_item.item-b ._prizeーnumber {
    background-color: #0071bc;
}
.prize .prize_item.item-c ._prizeーnumber {
    background-color: #39b54a;
}
.prize .prize_item.item-d ._prizeーnumber {
    background-color: #f7931e;
}
.prize .prize_item.item-e ._prizeーnumber {
    background-color: #9a5fc4;
}

.prize .prize_item.item-a ._prizeーnumber,
.prize .prize_item.item-b ._prizeーnumber {
    width: 150px;
    height: 150px;
}
.prize .prize_item.item-c ._prizeーnumber,
.prize .prize_item.item-d ._prizeーnumber,
.prize .prize_item.item-e ._prizeーnumber {
    width: 130px;
    height: 130px;
}
.prize .prize_item ._prizeーnumber > p {
    padding: 3px 0;
    width: 100%;
    text-align: center;
}
.prize .prize_item ._prizeーnumber ._award {
    border-bottom: 3px solid #fff;
}
.prize .prize_item.item-a ._prizeーnumber ._award,
.prize .prize_item.item-b ._prizeーnumber ._award {
    font-size: 3rem;
}
.prize .prize_item.item-c ._prizeーnumber ._award,
.prize .prize_item.item-d ._prizeーnumber ._award,
.prize .prize_item.item-e ._prizeーnumber ._award {
    font-size: 2.8rem;
}
.prize .prize_item.item-a ._prizeーnumber ._award strong,
.prize .prize_item.item-b ._prizeーnumber ._award strong {
    font-size: 5rem;
}
.prize .prize_item.item-c ._prizeーnumber ._award strong,
.prize .prize_item.item-d ._prizeーnumber ._award strong,
.prize .prize_item.item-e ._prizeーnumber ._award strong {
    font-size: 3.7rem;
}
.prize .prize_item.item-a ._prizeーnumber ._number-of-people strong,
.prize .prize_item.item-b ._prizeーnumber ._number-of-people strong {
    font-size: 4rem;
}
.prize .prize_item.item-c ._prizeーnumber ._number-of-people strong,
.prize .prize_item.item-d ._prizeーnumber ._number-of-people strong,
.prize .prize_item.item-e ._prizeーnumber ._number-of-people strong {
    font-size: 2.4rem;
}
.prize .prize_item ._product-image {
    padding-bottom: 10px;
}
.prize .prize_item ._product-detail {
    width: 95%;
    margin: 0 auto;
}
.prize .prize_item.item-b ._product-image {
    width: 92%;
    height: 239.13px;
    margin: 0 auto;
}
.prize .prize_item:nth-child(n+3) ._product-detail ._product-name {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.prize .prize_item.item-c ._product-detail ._product-name {
    border-bottom: 5px dashed #39b54a;
}
.prize .prize_item.item-d ._product-detail ._product-name {
    border-bottom: 5px dashed #f7931e;
}
.prize .prize_item.item-e ._product-detail ._product-name {
    border-bottom: 5px dashed #9a5fc4;
}
.prize .prize_item ._product-detail > ._note {
    padding-top: 10px;
}
.prize .prize_item ._product-detail ._product-name ._subname {
    font-size: 2.8rem;
    line-height: 1;
    font-weight: 700;
    height: 81px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.prize .prize_item.item-c ._product-detail ._product-name ._subname {
    color: #39b54a;
}
.prize .prize_item.item-d ._product-detail ._product-name ._subname {
    color: #f7931e;
}
.prize .prize_item.item-e ._product-detail ._product-name ._subname {
    color: #9a5fc4;
}
.prize .prize_item ._product-detail ._product-name ._subname ._note {
    font-size: 1.4rem;
    color: #333333;
    padding-top: 5px;
}
.prize .prize_item ._product-detail ._text {
    font-size: 1.7rem;
    font-weight: 700;
    padding-top: 15px;
}
.prize .prize_item.item-a ._product-detail ._text,
.prize .prize_item.item-b ._product-detail ._text {
    font-size: 2.8rem;
}

/* step */
.step {
    position: relative;
    background: #fbc056;
    z-index: 1;
}
.step::before,
.step::after {
    position: absolute;
    z-index: -1;
}
.step::before {
    content: "";
    background: url(../../images/contents/cp/20million202408/step_before.png) no-repeat;
    background-size: contain;
    top: 0;
    right: 0;
    width: 485px;
    height: 353px;
}
.step::after {
    content: "";
    background: url(../../images/contents/cp/20million202408/step_after.png) no-repeat;
    background-size: contain;
    bottom: 0;
    left: 0;
    width: 656px;
    height: 376.5px;
}
.step ._inner {
    position: relative;
    padding: 60px 40px;
}
.step ._inner::before {
    z-index: 2;
    content: "";
    background: url(../../images/contents/cp/20million202408/step_before_hiyori.png) no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0px;
    left: 120px;
    width: 370px;
    height: 823.9311px;
}
.step .step_head {
    position: sticky;
    z-index: 2;
    padding-bottom: 40px;
}
.step .step_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 0 40px 350px;
    width: 90%;
    margin: 0 auto;
}
.step .step_item.item01 {
    background: #29abe2;
    border: 5px solid #29abe2;
}
.step .step_item.item02 {
    background: #0071bc;
    border: 5px solid #0071bc;
}
.step .step_item.item03 {
    background: #00417d;
    border: 5px solid #00417d;
}
.step .step_item ._detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 20px 40px;
    background: #fff;
}
.step .step_item.item02 ._detail,
.step .step_item.item03 ._detail {
    position: relative;
}
.step .step_item.item02 ._detail ._detail-culmun p {
    padding-bottom: 65px;
}
.step .step_item.item02 ._detail ._detail-culmun img {
    position: absolute;
    bottom: 10px;
    left: 40px;
    width: 434px;
    height: 105px;
}
.step .step_item.item03 ._detail img {
    position: absolute;
    bottom: 5px;
    right: 70px;
    width: 91.2px;
    height: 125.6px;
}
.step .step_item ._detail p {
    font-size: 2.3rem;
}
.step .step_item.item01 ._detail img,
.step .step_item.item02 ._detail img {
    width: 200px;
    height: auto;
}
.step .step_item ._num {
    padding: 0 10px 5px;
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
}
.step .campaign_period {
    padding-left: 350px;
    width: 90%;
    margin: 0 auto;
    z-index: 2;
}

/* notice */
.notice {
    z-index: 1;
    position: relative;
    background: repeating-linear-gradient(-45deg, #f15f22, #f15f22 10px, #f24e29 10px, #f24e29 15px);
}
.notice::before {
    z-index: -1;
    content: "";
    background: url(../../images/contents/cp/20million202408/notice_bg.png) no-repeat;
    background-size: cover;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    max-width: 1200px;
    height: 900px;
}
.notice ._inner {
    position: relative;
    padding: 60px 0;
    width: 750px;
    margin: 0 auto;
}
.notice ._inner::before {
    content: "";
    background: url(../../images/contents/cp/20million202408/notice_before.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 60px;
    left: -190px;
    width: 196.5px;
    height: 350.5px;
}
.notice ._inner::after {
    content: "";
    background: url(../../images/contents/cp/20million202408/notice_after.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 20px;
    right: -230px;
    width: 269px;
    height: 328px;
}
.notice .notice_detail {
    background: #fff;
    border: 10px solid #f0dc50;
    border-radius: 20px;
    margin-bottom: 40px;
}
.notice .notice_detail h2 {
    font-size: 3.4rem;
    background: #f0dc50;
    padding: 0px 5px 10px;
    text-align: center;
}
.notice .notice_content {
    padding: 30px 20px;
}
.notice .notice_detail dl {
    padding-bottom: 20px;
}
.notice .notice_detail dl dt {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.notice .notice_detail dl dd {
    margin-left: 1rem;
}
.notice .notice_detail dl dd>ul>li {
    padding-left: 1.9rem;
    padding-bottom: .8rem;
    position: relative;
}
.notice .notice_detail dl dd>ul>li::before {
    background: #333333;
    border-radius: 50%;
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 5px;
    left: 0;
}
.notice .notice_detail dl dd>ul>li>ul>li {
    margin-left: 2rem;
    list-style: disc;
}

/* sns */
.sns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
.sns .sns_txt {
    font-size: 2rem;
    font-weight: 600;
    padding-bottom: 2rem;
}
.sns .sns_iconBox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.sns .sns_iconBox .snslg {
    width: 7rem;
}
.sns .sns_iconBox .snslg a {
    display: block;
    transition: all .3s;
}
.sns .sns_iconBox .snslg a:hover {
    opacity: .8;
}

/* special */
.special {
    position: relative;
    z-index: 0;
}
.special::before,
.special::after {
    position: absolute;
}
.special::before {
    z-index: -1;
    content: "";
    background: url(../../images/contents/cp/20million202408/special_before.png)no-repeat;
    background-size: contain;
    top: 10px;
    left: -30px;
    width: 500px;
    height: 590px;
}
.special::after {
    z-index: -1;
    content: "";
    background: url(../../images/contents/cp/20million202408/special_after.png)no-repeat;
    background-size: contain;
    background-position: right bottom;
    bottom: 0;
    right: 0;
    width: 934.5px;
    height: 603px;
}
.special ._inner {
    padding: 60px 40px;
}
.special .special_head h2 {
    font-size: 3.8rem;
    text-align: center;
    color: #0071bc;
}
.special .special_head h2 ._marker {
    background: linear-gradient(transparent 70%, #fffb87 70%);
}
.special .special_movie {
    text-align: center;
    padding: 40px 0;
}
.special .special_movie iframe {
    border-radius: 10px;
}
.special .special-page_btn {
    display: flex;
    justify-content: center;
}

/* START public/common/css/page/guide_novice.cssのCSSを流用 */
/* novice_about */
/* Heading */
.novice_head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.novice_head ._title {
    font-size: 3.8rem;
    display: inline-block;
}
.novice_head ._accenttitle {
    font-size: 1.8rem;
    color: #fff;
    padding: 5px 25px;
    background: #3071b8;
    display: inline-block;
    border-radius: 50px;
    margin-bottom: 5px;
}
.novice_head ._title ._marker {
    background: linear-gradient(transparent 70%, #fff844 70%);
}
.novice_about {
    position: relative;
}
.novice_about::before {
    content: "";
    background: url(../../images/contents/cp/20million202408/novice_about_before.png) no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -80px;
    right: 100px;
    width: 200px;
    height: 692.8px;
}
.novice_about_inner {
    padding: 60px 0;
}
.novice_about {
    content: "";
    background-image: url(../../images/contents/novice/novice_about_bg.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 1200px;
}
.novice_about_head h2 {
    font-size: 3.4rem;
    text-align: center;
}
.novice_about_content {
    margin: 40px 0 0 0;
    padding-right: 280px;
}
.novice_about_head ._subtitle:before,
.novice_about_head ._subtitle:after {
    position: relative;
    display: inline-block;
    content: "";
    background: #29aae1;
    width: 2px;
    height: 1.5em;
    margin: 0 1em;
    margin-top: -.2em;
    vertical-align: middle;
}
.novice_about_head ._subtitle:before {
    transform: rotate(-35deg);
}
.novice_about_head ._subtitle:after {
    transform: rotate(35deg);
}
.novice_about_detail {
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.novice_about_detail ._warp {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}
.novice_about_detail ._image {
    width: 25%;
}
.novice_about_detail h3._head {
    font-size: 2.4rem;
    text-align: center;
    color: #0059bc;
}
.novice_about_detail ._medal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 30px;
    text-align: center;
}
.novice_about_detail ._medal img {
    width: 45%;
}
.novice_about_detail ._note {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    max-width: 750px;
    margin: 0 auto;
}
.novice_about_detail ._note p {
font-size: 1.2rem;
text-shadow: 2px 2px 0 #FFF,
    -2px -2px 0 #FFF,
    -2px 2px 0 #FFF, 2px -2px 0 #FFF,
    0px 2px 0 #FFF,  0 -2px 0 #FFF,
    -2px 0 0 #FFF, 2px 0 0 #FFF;
}
.novice_about_howto ._warp {
    max-width: 750px;
    padding: 25px 20px 20px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    border: 2px solid #1b1464;
    position: relative;
}
.novice_about_howto ._head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%  , -50%);
    font-size: 2.3rem;
    font-weight: 700;
    color: #1b1464;
    width: 100%;
    text-align: center;
    text-shadow: 3px 3px 2px #fff,
        -3px -3px 2px #fff,
        -3px 3px 2px #fff,
        3px -3px 2px #fff,
        3px 0px 2px #fff,
        -3px 0px 2px #fff,
        0px 3px 2px #fff,
        0px -3px 2px #fff
}
.novice_about_howto ._text {
    text-align: center;
    font-size: 1.4rem;
}

/* novice_reason */
.novice_reason {
    background: repeating-linear-gradient(-45deg, #e5f5fe, #e5f5fe 2px, #fff 0, #fff 6px);
}
.novice_reason ._inner {
    padding: 60px 40px;
}
.novice_reason_head ._subtitle {
    font-size: 2rem;
    color: #fff;
    padding: 5px 25px;
    background: #3071b8;
    display: inline-block;
    border-radius: 50px;
}
.novice_reason_content {
    position: relative;
    padding: 40px 0 0 0;
}
.novice_reason_content::before {
    content: "";
    background: url(../../images/contents/novice/novice_tabifly_image04.png) no-repeat;
    background-size: cover;
    width: 140.5px;
    height: 132px;
    position: absolute;
    left: 30px;
    top: -76px;
    z-index: 10;
}
.novice_reason_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.novice_reason_item {
    position: relative;
    width: calc((100% - 20px ) / 2);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
}
.novice_reason_item:nth-child(1),
.novice_reason_item:nth-child(4) {
    border: 2px solid #008ae1;
}
.novice_reason_item:nth-child(2),
.novice_reason_item:nth-child(3) {
    border: 2px solid #00b8bf;
}
.novice_reason_item:before {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 0;
    height: 0;
    border-radius: 15px 0;
}
.novice_reason_item:nth-child(1):before,
.novice_reason_item:nth-child(4):before {
    border-top: 90px solid #008ae1;
    border-right: 90px solid transparent;
}
.novice_reason_item:nth-child(2):before,
.novice_reason_item:nth-child(3):before {
    border-top: 90px solid #00b8bf;
    border-right: 90px solid transparent;
}
.novice_reason_item::after {
    position: absolute;
    top: 0px;
    left: 12px;
    width: 0;
    height: 0;
    font-size: 4rem;
    color: #fff;
    font-family: serif;
}
.novice_reason_item:nth-child(1)::after {
    content: "1";
}
.novice_reason_item:nth-child(2)::after {
    content: "2";
}
.novice_reason_item:nth-child(3)::after {
    content: "3";
}
.novice_reason_item:nth-child(4)::after {
    content: "4";
}
.novice_reason_item ._image {
    width: 210px;
    padding-bottom: 20px;
}
.novice_reason_item ._title {
    font-size: 2.4rem;
    text-align: center;
    padding-bottom: 15px;
}
.novice_reason_item:nth-child(1) ._title,
.novice_reason_item:nth-child(4) ._title {
    color: #008ae1;
}
.novice_reason_item:nth-child(2) ._title,
.novice_reason_item:nth-child(3) ._title {
    color: #00b8bf;
}
.novice_reason_item ._text {
    text-align: center;
}
.novice_reason_item ._text .text_pink {
    color: #ee2b6c;
    font-weight: 700;
}
/* E N D public/common/css/page/guide_novice.cssのCSSを流用 */

/* endArea */
.endArea {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: #fff;
}
.endArea .copyright_text {
    font-size: 1.3rem;
}