@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 #9b2b3b !important;}
[class^="raku2_validate_bubble"] {background-color: #9b2b3b;}
[class^="raku2_validate_bubble"]::before {background-color: #9b2b3b;}
#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: #9b2b3b;}
/*#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: #9b2b3b;}
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 #9b2b3b;}
.total_price>#total_inctax,
.teiki_first_total>#teiki_first_total_inctax,
.teiki_second_total>#total_inctax {font-size: 150%; color: #9b2b3b;}

#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 #9b2b3b; background-color: #9b2b3b; 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: #9b2b3b;}

#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 #9b2b3b; background-color: #9b2b3b; color: #ffffff; padding: 20px 0; border-radius: 50px;}
#button_lower>.btn_area>ul>li>input[type="button"]:hover {background: #ffffff; color: #9b2b3b;}
#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 #9b2b3b; background-color: #9b2b3b; color: #ffffff; padding: 20px 0; border-radius: 50px;}
#undercolumn_shopping>form>#button_upper>.btn_area>ul>li>input[type="button"]:hover {background: #ffffff; color: #9b2b3b;}*/

/*/////////////////// LP ///////////////////*/
#feature {width: 100%; margin: 80px auto; padding: 0 0;}
#feature>.inner {max-width: 800px; margin: 0 auto; padding: 50px 0; background-color: #f2eeea;}
#feature>.inner>h2 {margin: 0 auto 20px; padding: 0; font-size: 20px; font-weight: 600; color: #9b2b3b !important; text-align: center; line-height: 1.8; letter-spacing: 0.02em; background: none;}
#feature>.inner>img {width: 100%;}
#feature>.inner>p {width: 90%; margin: 20px auto 0; padding: 0; font-size: 15px; font-weight: 400; color: #232323; text-align: justify; line-height: 1.8; letter-spacing: 0.02em;}
#feature>.inner>.flex-wrap {width: 90%; margin: 50px auto 30px; display: flex; flex-wrap: wrap; justify-content: space-between;}
#feature>.inner>.flex-wrap>.img-content {width: 40%;}
#feature>.inner>.flex-wrap>.img-content>img {width: 100%;}
#feature>.inner>.flex-wrap>.text-content {width: 55%;}
#feature>.inner>.flex-wrap>.text-content>h3 {margin: 0 auto 15px; padding: 0; font-size: 20px; font-weight: 600; color: #9b2b3b; text-align: justify; line-height: 1.8; letter-spacing: 0.02em;}
#feature>.inner>.flex-wrap>.text-content>h3>span {font-size: 80%;}
#feature>.inner>.flex-wrap>.text-content>h4 {margin: 0 auto 10px; padding: 0; font-size: 16px; font-weight: 600; color: #9b2b3b; text-align: justify; line-height: 1.5; letter-spacing: 0.02em;}
#feature>.inner>.flex-wrap>.text-content>p {margin: 0 auto 10px; padding: 0; font-size: 13px; font-weight: 400; color: #232323; text-align: justify; line-height: 1.6; letter-spacing: 0.01em;}
#feature>.inner>.flex-wrap>.text-content>p>b {font-size: 110%; color: #9b2b3b;}

@media only screen and (max-width: 1000px) {
#feature>.inner {max-width: 92%;}	
#feature>.inner>h2 {font-size: 18px;}
#feature>.inner>img {width: 100%;}
#feature>.inner>p {font-size: 14px;}
#feature>.inner>.flex-wrap {display: block;}
#feature>.inner>.flex-wrap>.img-content {width: 100%; margin: 0 auto 15px;}
#feature>.inner>.flex-wrap>.img-content>img {width: 100%;}
#feature>.inner>.flex-wrap>.text-content {width: 100%;}
#feature>.inner>.flex-wrap>.text-content>h3 {font-size: 18px;}
#feature>.inner>.flex-wrap>.text-content>h4 {font-size: 15px;}
#feature>.inner>.flex-wrap>.text-content>p {font-size: 12px;}
}