@charset "UTF-8";
/* CSS Document */

/*/////////////////// Effect ///////////////////*/
.bounce>a>img {animation: anime1 0.5s ease 0s infinite alternate; transform-origin:center;}
@keyframes anime1 {
  from {transform: scale(0.90,0.90);}
  to {transform: scale(1,1);}
}

/*/////////////////// Design ///////////////////*/
.maildm_regist_area {display: none;}
.layout_lowertext {width: 980px; margin: 0 auto 80px;}
.layout_lpmain table,
.layout_lowertext table {border-top: none; border-left: none;}
.layout_lpmain table th,
.layout_lowertext table th {border-right: none; border-bottom: 1px solid #232323; color: #232323; background-color: #ffffff; text-align: right;}
.layout_lpmain table td,
.layout_lowertext table td {padding: 10px 0; border-right: none; border-bottom: 1px solid #232323; color: #232323; background-color: #ffffff; line-height: 1.5; letter-spacing: 0.01em;}
.layout_lpmain table th,
.layout_lpmain table td {font-size: 13px;}
.layout_lowertext table th,
.layout_lowertext table td {font-size: 14px;}
.layout_lpmain table th,
.layout_lowertext table th {width: 22%; padding: 10px 1%; text-align: left;}
.layout_lpmain table th span,
.layout_lowertext table th span {font-size: 80%;}
div#order p {margin: 10px 0 10px; padding: 0;}

.kiyaku_text_detail {width: 90%;}
.step li {font-size: 10px;}
#calender_area .off {color: #c37070; /*background-color: #e7e7e7;*/}
#calender_area .firstDate {background-color: #ffff00; border-radius: 50%;}
#calender_area .nextDate {background-color: #8bb43c !important; color: #ffffff; border-radius: 50%;}
div#undercolumn_shopping #periodArea .raku2_since,
#calender_area .raku2_since {background-color: #8bb43c; color: #ffffff;}
.step li:before {top: -20px;}
.step li:after {top: -20px;}
div#order h4 {background: #686868;}
.raku2_validate_target {background-color: #ffffff !important;}
.raku2_validate_focus {background-color: #ffffff !important; border: 2px solid #ED5B75 !important;}
[class^="raku2_validate_bubble"] {background-color: #ED5B75;}
[class^="raku2_validate_bubble"]::before {background-color: #ED5B75;}
#first_date_label,
#next_period_label {color: #000000 !important;}
/*button.raku2_incomplete {line-height: 1.0em; border-radius: 25px; padding: 15px 25px; margin: 10px; font-size: 110%; min-width: 220px; background: #ffffff; color: #c61616; border: 2px solid #c61616; display: inline-flex;  align-items: center; text-align: center; justify-content: center;}*/
span[class^="raku2_valid_circle"] {background-color: #ED5B75;}
/*#order input[type="button"],
#order input[type="submit"] {width: 450px; border: solid 3px #429c00; background: linear-gradient(to bottom, #429c00, #0b7800); box-shadow: 0 1px 2px #ccc; color: #ffffff; padding: 15px 0; border-radius: 30px;}
#order input[type="button"]:hover,
#order input[type="submit"]:hover {background: #ffffff; color: #0b7800;}*/
.astep_on {color: #ED5B75;}
div.astep1_nonmenber::after,
div.astep1_3::after,
div.astep2_3::after,
div.astep3_3::after,
div.astep4_3::after,
div.astep1_3_csv::after,
div.astep2_3_csv::after,
div.astep3_3_csv::after,
div.astep4_3_csv::after,
div.astep1_4::after,
div.astep2_4::after,
div.astep3_4::after,
div.astep4_4::after {border-bottom: 3px solid #ED5B75;}
.total_price>#total_inctax,
.teiki_first_total>#teiki_first_total_inctax,
.teiki_second_total>#total_inctax {font-size: 150%; color: #ED5B75;}

#order>form>#no_login_disp>.order-in>.next-box>span>input[type="button"],
#order>form>#no_login_disp>.order-in>.next-box>span>input[type="submit"] {width: 350px; border: solid 1px #ED5B75; background-color: #ED5B75; color: #ffffff; padding: 15px 0; border-radius: 30px;}
#order>form>#no_login_disp>.order-in>.next-box>span>input[type="button"]:hover,
#order>form>#no_login_disp>.order-in>.next-box>span>input[type="submit"]:hover {background: #ffffff; color: #ED5B75;}

#order>form>#no_login_conf>.next-box>input[type="button"],
#order>form>#no_login_conf>.next-box>input[type="submit"],
#order>form>#conf>input[type="submit"] {width: 450px; border: solid 3px #239a17; background: linear-gradient(to bottom, #0b7800, #429c00); box-shadow: 0 1px 2px #ccc; color: #ffffff; padding: 25px 0; border-radius: 50px;}
#order>form>#no_login_conf>.next-box>input[type="button"]:hover,
#order>form>#no_login_conf>.next-box>input[type="submit"]:hover,
#order>form>#conf>input[type="submit"]:hover {background: #ffffff; color: #429c00;}
#order>form>#conf>.fa-angle-right:before {color: #ffffff;}
#order>form>#conf:hover>.fa-angle-right:before {color: #429c00;}

/*画面メッセージ設定>ご注文完了ボタンの上で再設定
#button_lower>.btn_area>ul>li>input[type="button"] {width: 450px; border: solid 1px #ED5B75; background-color: #ED5B75; color: #ffffff; padding: 20px 0; border-radius: 50px;}
#button_lower>.btn_area>ul>li>input[type="button"]:hover {background: #ffffff; color: #ED5B75;}
#undercolumn_shopping>form>#button_upper>.btn_area {margin: 30px auto 100px;}
#undercolumn_shopping>form>#button_upper>.btn_area>ul>li>input[type="button"] {width: 450px; border: solid 1px #ED5B75; background-color: #ED5B75; color: #ffffff; padding: 20px 0; border-radius: 50px;}
#undercolumn_shopping>form>#button_upper>.btn_area>ul>li>input[type="button"]:hover {background: #ffffff; color: #ED5B75;}*/

/*/////////////////// LP ///////////////////*/
#feature {width: 100%; margin: 0 auto; padding: 80px 0; background-color: #FEEEED;}
#feature>.inner {max-width: 1000px; margin: 0 auto;}
#feature>.inner>.flex-wrap {margin: 0 auto 80px; display: flex; flex-wrap: wrap; justify-content: space-between;}
#feature>.inner>.flex-wrap>.products-main {width: calc(530 / 1000 * 100%);}
#feature>.inner>.flex-wrap>.products-main>.main-head,
#feature>.inner>.products-other>.main-head {margin: 0 auto; font-family: "YakuHanMP", "Noto Serif JP", sans-serif; font-size: min(calc(40 / 1000 * 100vw), 40px); line-height: 1.4; color: #ED5B75; font-weight: 400; margin-bottom: calc(20 / 530 * 100%);}
#feature>.inner>.flex-wrap>.products-main>.main-head sup,
#feature>.inner>.products-other>.main-head sup {font-size: min(calc(20 / 1000 * 100vw), 20px); line-height: 1;}
#feature>.inner>.flex-wrap>.products-main>.main-caution,
#feature>.inner>.products-other>.main-caution {font-family: "YakuHanMP", "Noto Serif JP", sans-serif; font-size: min(calc(9 / 980 * 100vw), 9px); margin-bottom: calc(30 / 530 * 100%);}
#feature>.inner>.flex-wrap>.products-main>.main-text,
#feature>.inner>.products-other>.main-text {color: #000000; font-family: "YakuHanMP", "Noto Serif JP", sans-serif; font-size: min(calc(14 / 980 * 100vw), 14px); line-height: calc(30 / 14); margin-bottom: calc(30 / 530 * 100%);}
#feature>.inner>.flex-wrap>.products-main>.main-list {margin: 0; background-color: #ffffff; padding: 1.3em; list-style: none;}
#feature>.inner>.flex-wrap>.products-main>.main-list>li {color: #000000; font-family: "YakuHanMP", "Noto Serif JP", sans-serif; font-size: min(calc(14 / 980 * 100vw), 14px); line-height: calc(30 / 14); text-indent: -1em; padding-left: 1em;}
#feature>.inner>.flex-wrap>.products-main>.main-list>li.right-text {text-align: right; margin-bottom: 0.5em;}
#feature>.inner>.flex-wrap>.products-main>.main-list>li>span {color: #ED5B75;}
#feature>.inner>.flex-wrap>.prducts-image {width: calc(360 / 1000 * 100%);}
#feature>.inner>.flex-wrap>.prducts-image>img {width: 100%;}
#feature>.inner>.products-main.products-other>.main-head {margin-bottom: calc(20 / 1000 * 100%);}
#feature>.inner>.flex-wrap>.flex-wrap>.flex-itemList {width: 100%; display: flex; margin: 0 auto; padding: 0; justify-content: space-between; list-style: none;}
#feature>.inner>.flex-wrap>.flex-wrap>.flex-itemList>li {width: calc(320 / 1000 * 100%);}
#feature>.inner>.flex-wrap>.flex-wrap>.flex-itemList>li>img {width: 100%;}
#feature>.inner>.flex-wrap>.flex-wrap>.flex-itemList>li>.sub-head {font-family: "YakuHanMP", "Noto Serif JP", sans-serif; font-size: min(calc(24 / 1000 * 100vw), 24px); margin: 1em auto 0.5em; padding: 0; font-weight: 400; color: #ED5B75;}
#feature>.inner>.flex-wrap>.flex-wrap>.flex-itemList>li>.main-text {font-family: "YakuHanMP", "Noto Serif JP", sans-serif; font-size: min(calc(14 / 1000 * 100vw), 14px); line-height: calc(30 / 14); margin-top: 0.5em; font-weight: 400; color: #000000;}
#feature>.inner>.flex-wrap>.explain-wrap {display: flex; justify-content: space-between; width: 100%; margin-bottom: calc(100 / 1000 * 100%);}
#feature>.inner>.flex-wrap>.explain-wrap>dl {width: calc(470 / 1000 * 100%); margin: 0 auto; padding: 0; text-align: center; border-radius: 10px; overflow: hidden;}
#feature>.inner>.flex-wrap>.explain-wrap>dl>dt {font-family: "YakuHanMP", "Noto Serif JP", sans-serif; font-size: min(calc(22 / 980 * 100vw), 22px); line-height: 1; background-color: #ED5B75; padding: 1em 0; color: #ffffff;}
#feature>.inner>.flex-wrap>.explain-wrap>dl>dd {background-color: #ffffff; margin: 0 auto; padding: 2em 0;}
#feature>.inner>.flex-wrap>.explain-wrap>dl>dd>ul {padding: 0; margin: 0; list-style-type: none;}
#feature>.inner>.flex-wrap>.explain-wrap>dl>dd>ul>li {font-family: "YakuHanMP", "Noto Serif JP", sans-serif; font-size: min(calc(14 / 980 * 100vw), 14px); color: #000000; line-height: calc(30 / 14);}

@media only screen and (max-width: 1000px) {
#feature>.inner {max-width: 92%;}	
#feature>.inner>.flex-wrap {display: block;}
#feature>.inner>.flex-wrap>.products-main {width: 100%;}
#feature>.inner>.flex-wrap>.products-main>.main-head,
#feature>.inner>.products-other>.main-head {font-size: 35px;}
#feature>.inner>.flex-wrap>.products-main>.main-caution,
#feature>.inner>.products-other>.main-caution {font-size: 12px;}
#feature>.inner>.flex-wrap>.products-main>.main-text,
#feature>.inner>.products-other>.main-text {font-size: 15px;}
#feature>.inner>.flex-wrap>.products-main>.main-list {margin: 0 auto 20px;}
#feature>.inner>.flex-wrap>.products-main>.main-list>li {font-size: 15px;}
#feature>.inner>.flex-wrap>.prducts-image {width: 100%;}
#feature>.inner>.flex-wrap>.flex-wrap>.flex-itemList {display: block;}
#feature>.inner>.flex-wrap>.flex-wrap>.flex-itemList>li {width: 100%; margin: 0 auto 40px;}
#feature>.inner>.flex-wrap>.flex-wrap>.flex-itemList>li>.sub-head {font-size: 24px; margin: 0.5em auto 0.2em;}
#feature>.inner>.flex-wrap>.flex-wrap>.flex-itemList>li>.main-text {font-size: 15px;}
#feature>.inner>.flex-wrap>.explain-wrap {display: block;}
#feature>.inner>.flex-wrap>.explain-wrap>dl {width: 100%; margin: 0 auto 40px;}
#feature>.inner>.flex-wrap>.explain-wrap>dl>dt {font-size: 20px;}
#feature>.inner>.flex-wrap>.explain-wrap>dl>dd>ul>li {font-size: 14px;}
}

/*/////////////////// AD ///////////////////*/
.bgpink {background-color: #FEEEED;}
.bgglay {background-color: #f8f8f8;}
#adlp {width: 100%; margin: 0 auto 80px; padding: 0 0; text-align: center; background-color: #f8f8f8;}
#adlp>.lpmain {width: 100%; max-width: 750px; margin: 0 auto; overflow: hidden; margin: 0 auto; padding: 0;}
#adlp>.lpmain>section {position: relative;}
#adlp>.lpmain>section,
#adlp>.lpmain>section>h1,
#adlp>.lpmain>section>h2 {width: 100%; margin: 0 auto; padding: 0;}
#adlp>.lpmain>section>img,
#adlp>.lpmain>section>h1>img,
#adlp>.lpmain>section>h2>img {width: 100%; margin: 0 auto; padding: 0;}
#adlp>.lpmain>section>.cta__box {padding: 0; margin: 0 auto; position: relative;}
#adlp>.lpmain>section>.cta__box>.cta__box__btn {position: absolute; top: 10px; left: 0; right: 0; margin: 0 auto; width: 90%;}
#adlp>.lpmain>.tanpin_btn {margin: 60px auto; padding: 0;}
#adlp>.lpmain>.tanpin_btn>a>img {width: 100%; margin: 0 auto; padding: 0;}
.movieArea_lp {position: absolute;top: 52%; left: 0; right: 0; margin: 0 auto; width: calc(690 / 750 * 100%);}
.copy-link {position: relative; /*display: flex;*/
  input {padding: 0; font-size: 10px; color: #ffffff; border: none; outline: none; width: 100%; height: 0; background-color: #ffffff; text-align: center;}
  button {padding: 0; background: none; font-size: 10px; color: #ffffff; outline: none; border: none; cursor: pointer; width:100%;
    &::before {
      content: "クーポンコードをコピーしました"; position: absolute; top: 400px; left: 50%; transform: translate(-50%, -50%); background: #ED5B75; border-radius: 10px; padding: 15px 20px; font-size: 14px; display: none;
    }
  }
  &.active button::after,
  &.active button::before {display: block;}
}

/*/////////////////// FAQ ///////////////////*/
#faqArea {width: 100%; margin: 0 auto !important; padding: 80px 0 50px !important; background-color: #ffd4d8;}
#faqArea>img {width: 250px !important; margin: 0 auto 50px !important; padding: 0;}
#faqArea>.detail-accordion {width: 90%; margin: 0 auto 10px; padding: 0 0 0;}
#faqArea>.detail-accordion>.faq-toggle {display: none;}
#faqArea>.detail-accordion>.faq-Label {width: 100%; margin: 0 auto; padding: 0; display: block; color: #565656; font-size: 15px; text-align: center; background-color: #ffffff;}
#faqArea>.detail-accordion>.faq-Label::before{content:"＋"; font-size: 20px; position: absolute; top:calc( 50% - 10px ); right: 30px;}
#faqArea>.detail-accordion>.faq-Label,
#faqArea>.detail-accordion>.faq-content {-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
#faqArea>.detail-accordion>.faq-content {width: 100%; margin: 0 auto 0; padding: 0; height: 0; overflow: hidden;}
#faqArea>.detail-accordion>.faq-content>p {margin: 0 auto 10px; padding: 0; font-size: 13px; line-height: 1.5; letter-spacing: 0.01em; text-align: justify;}
#faqArea>.detail-accordion>.faq-toggle:checked + .faq-Label + .faq-content {height: auto; padding: 0; transition: all .3s; background-color: #ffffff;}
#faqArea>.detail-accordion>.faq-toggle:checked + .faq-Label::before {content:"−";}
#faqArea>.detail-accordion>.faq-Label>img,
#faqArea>.detail-accordion>.faq-content>img {width: 95%; margin: 0 auto; padding: 0;}

/*/////////////////// StepSlider ///////////////////*/
.slideWrap {width: 100%; display: block; margin: 0 auto 0; padding: 0; position: absolute; top: 57%; left: 50%; transform: translateX(-50%);}
.slideWrap>.step-slider {width: 100%; max-width: 100%;}
.step-slide>a>img {width: 90%; margin: 0 auto; align-items: center; justify-content: center;}
/* arrow */
.slideWrap>.step-slider>.slick-arrow {background-size: contain; background-repeat: no-repeat;  width: min(calc(49 / 750 * 100vw), 49px); height: min(calc(126 / 750 * 100vw), 116px); font-size: 0; border: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer;}
.slideWrap>.step-slider>.slick-arrow::before {content: '';}
.slideWrap>.step-slider>.slick-prev {background-image: url(/user_data/packages/raku2pc/img/lp/ad/teikitrial/slide_prev.png); left: 0;}
.slideWrap>.step-slider>.slick-next {background-image: url(/user_data/packages/raku2pc/img/lp/ad/teikitrial/slide_next.png); right: 0;}
/* arrow 
.slideWrap>.step-slider>.slick-arrow {z-index: 2; top: 50%; margin-top: -10px; width: 10px; height: 10px; border-top: 2px solid #000000; border-right: 2px solid #000000; opacity: .8;}
.slideWrap>.step-slider>.slick-arrow::before {content: '';}
.slideWrap>.step-slider>.slick-prev {left: 0; transform: rotate(-135deg);}
.slideWrap>.step-slider>.slick-next {right: 0; transform: rotate(45deg);}*/
/* dots */
.slideWrap>.step-slider.slick-dots {bottom: -25px;}
.slideWrap>.step-slider>.slick-dots li,
.slideWrap>.step-slider>.slick-dots li button,
.slideWrap>.step-slider>.slick-dots li button::before{width: 12px; height: 12px;}
.slideWrap>.step-slider>.slick-dots li {margin: 0 7px;}
.slideWrap>.step-slider>.slick-dots li button {background-color: #fff; opacity: .8; border-radius: 100%;}
.slideWrap>.step-slider>.slick-dots li.slick-active button {opacity: .4;}
.slideWrap>.step-slider>.slick-dots li button::before {content: '';}