@charset "utf-8";
/*==============================
common
==============================*/

section img {display: block;}
#pcBg {position: fixed;background: url("../images/bg.jpg") no-repeat; background-position: top center; width: 100%;height: 100%;z-index: -1;}
#content {background: #fff; max-width: 600px; margin: 0 auto;}
@media screen and (min-width: 751px) {
#l-wrapper {min-width:750px;}
#content {box-shadow: 6px 0px 5px -5px rgb(28 10 0 / 10%), -6px 0px 5px -5px rgb(28 10 0 / 10%);}
.spOnly { display: none;}
}
@media screen and (max-width: 750px) {
.pcOnly { display: none;}
}

/*==============================
 section common
==============================*/
.inner {width: 100%;}
.h2unline {text-align: left;padding-bottom: calc(15em / 16);font-size: 2.8rem;border-bottom: 1px solid #bebebe;margin-bottom: calc(30em / 16);}
@media screen and (min-width: 751px) {
.inner {max-width: 750px; margin: 0 auto;}
}
@media screen and (max-width: 750px) {
.h2unline {font-size: 2.4rem;}
}


/*==============================
  p-floating
==============================*/
#floating {position: fixed;width: 90%;bottom: 0;left: 0;right: 0;margin: auto;z-index: 1000;display: none;}
#floating a {}

@media screen and (min-width: 751px) {
#floating {max-width: 550px;}
}
@media screen and (max-width: 750px) {
}


/*==============================
  header
==============================*/
#fv .fvMain {position: relative;}
#fv .fvMain .fvball{position: absolute;width: 32%;z-index: 1;}
#fv .fvMain .fvball.fvball01{bottom: 3.125%;left: 4%;}
#fv .fvMain .fvball.fvball02{bottom: -2.083%;left: 0;right: 0;margin: 0 auto;}
#fv .fvMain .fvball.fvball03{bottom: 4.166%;right: 4%;}
#fv .fvMain .fukidashi{position: absolute;top: 77.7%;left: 0;right: 0;margin: auto;width: 20%;}
#fv .fv_ctaBtn {position: relative;}
#fv .fv_ctaBtn .ctaBtn {position: absolute;width:93.06%;top:0;left: 0;right: 0;margin: 0 auto;}
#fv .fv_ctaBtn .ctaBtn a {opacity: 1;transition: .5s;}
#fv .fv_ctaBtn .ctaBtn a:hover {opacity: .8;}
#fv .fvMain .fvball.fvball01 img {animation: move-y1 1.5s infinite alternate ease-in-out;}
@keyframes move-y1 {
0% { transform: translateY(-4%);}
100% { transform: translateY(4%);}
}
#fv .fvMain .fvball.fvball02 img {animation: move-y2 1.7s infinite alternate ease-in-out;}
@keyframes move-y2 {
0% { transform: translateY(-4%);}
100% { transform: translateY(4%);}
}
#fv .fvMain .fvball.fvball03 img {animation: move-y2 1.6s infinite alternate ease-in-out;}
@keyframes move-y2 {
0% { transform: translateY(-4%);}
100% { transform: translateY(4%);}
}



/*==============================
  privilege
==============================*/

#privilege,
#coupon {background-image: -moz-linear-gradient( 0deg, rgba(244,172,85,0.99608) 0%, rgb(240,133,13) 75%, rgb(234,123,0) 100%);background-image: -webkit-linear-gradient( 0deg, rgba(244,172,85,0.99608) 0%, rgb(240,133,13) 75%, rgb(234,123,0) 100%);background-image: -ms-linear-gradient( 0deg, rgba(244,172,85,0.99608) 0%, rgb(240,133,13) 75%, rgb(234,123,0) 100%);}


/*==============================
  ukomiStar
==============================*/
#ukomiStar .inner {background: #fbf8f3;}
#ukomiStar h2 {width: 73.33%; padding: calc(100em/16) 0 calc(50em/16);margin: 0 auto;text-align: center;}
#ukomiStar .ukomiCode .review-summary-container .starRating span {font-size: 2.8rem;}
#ukomiStar .ukomiCode .review-summary-container .starRating .reviewNumber {line-height: 1;}

/*==============================
  point
==============================*/
#point {background: url("../images/point_bg.jpg") repeat-y;background-size: 100% auto;}
#point .pointMain h3 {position: relative;}
#point .pointMain h3 .point_fukidadhi {position: absolute;left: 0;right: 0;margin: auto;width: 32%;top: 8%;}
#point .point_tit {position: relative;}
#point .point_tit .unLine {position: absolute;left: 0;right: 0;margin: 0 auto;bottom:13%;}
#point .point_tit .unLine p {position: relative;height: 100%;width: 100%;}
#point .point_tit .unLine p img {width: auto;height: 100%;}
#point .point_tit .unLine.point01Line {width: 72.66%;bottom:10%;height:1.5%; }
#point .point_tit .unLine.point01Line p {background: url( "../images/point01_line.png") left top no-repeat; background-size: auto 100%;}
#point .point_tit .unLine.point02Line {width: 68.73%;bottom:10%;height:1.4%; }
#point .point_tit .unLine.point02Line p {background: url( "../images/point02_line.png") left top no-repeat; background-size: auto 100%;}
#point .point_tit .unLine.point03Line {width: 76.06%;bottom:12%;height:1.5%; }
#point .point_tit .unLine.point03Line p {background: url( "../images/point03_line.png") left top no-repeat; background-size: auto 100%;}
#point .point01 .box,
#point .point03 .box {position:relative;}
#point .point03 .box {overflow: hidden;}
#point .point01 .box .icon {position: absolute;width: 18.66%;left: 0.53%;top: -6.17%;}
#point .point03 .box_difference01 .icon01 {position: absolute;width: 26.66%;left: 0;right: 0;margin: auto;top: 47.11%;}
#point .point03 .box_difference01 .icon01 img {margin-top: -50%;opacity: 0;}
#point .point03 .box_difference02 .icon02 {position: absolute;width: 22.66%;left: 0.66%;top: 50.49%;}
#point .point03 .box_difference02 .icon02 img {margin-left: -50%;margin-top: -50%;opacity: 0;transition: opacity .3s ease-out, margin .3s ease-out; }


/*==============================
  worry
==============================*/
#worry h2 {position: relative;}
#worry h2 .icon {position: absolute;width: 16%;left: 0;right: 0;margin: auto;top: -15%;}
#worry .worryImg {position: relative;}
#worry .worryImg .worry_ball {position: absolute;}
#worry .worryImg .worry_ball.worry_ball01 {left: 4%;width: 32%;top:54.40%;}
#worry .worryImg .worry_ball.worry_ball02 {right: 0;left: 0;margin: auto;width: 32%;top:64.40%;z-index: 2;}
#worry .worryImg .worry_ball.worry_ball03 {right: 4%;width: 32%;top:54.40%;}
#worry .worryImg .worry_ball.worry_ball01 img {animation: move-y1 1.7s infinite alternate ease-in-out;}
@keyframes move-y1 {
0% { transform: translateY(-4%);}
100% { transform: translateY(4%);}
}
#worry .worryImg .worry_ball.worry_ball02 img {animation: move-y2 1.5s infinite alternate ease-in-out;}
@keyframes move-y2 {
0% { transform: translateY(-4%);}
100% { transform: translateY(4%);}
}
#worry .worryImg .worry_ball.worry_ball03 img {animation: move-y2 1.3s infinite alternate ease-in-out;}
@keyframes move-y2 {
0% { transform: translateY(-4%);}
100% { transform: translateY(4%);}
}


/*==============================
  uservoice
==============================*/
#uservoice {background: url("../images/uservoice_bg.jpg") repeat-y;background-size: 100% auto;}

/*==============================
  development
==============================*/
#development {background: url("../images/point_bg.jpg") repeat-y;background-size: 100% auto;}
#development .developmentBall {position: relative;}
#development .developmentBall p {position: absolute; width: 30.66%;top:52%;left: 0;right:0;margin: 0 auto;}
#development .developmentManufa h3 {position: relative;}
#development .developmentManufa h3 .ball {position: absolute;left: 0;right: 0;margin: auto;width: 20%;top: -6%;}


/*==============================
  coupon
==============================*/
#coupon .copy-coupon {width: 81.33%;top:48.33%;left: 0;right: 0;margin: 0 auto;}

/*==============================
  contact
==============================*/
#contact .contactTell {position: relative;}
#contact .contactTell a {position: absolute;width: 50%;margin: 0 auto;top:0;left: 0;right: 0;}
@media screen and (min-width: 751px) { 
#contact a[href*="tel:"] {pointer-events: none;cursor: default;text-decoration: none;}
}

/*==============================
review
==============================*/
#review{padding: calc(75em/10) 0 calc(60em/10);background: #fbf8f3;}
#review .inner {width: 95%;margin: auto;}
#review .ukomiLink {position: relative;min-width: 190px;margin: calc(50em/16) auto 0;cursor: pointer;width: 33.3%;}
#review .ukomiLink .txt {font-size: 2.2rem;letter-spacing: 0.2rem; font-weight: bold;color: #442513;padding-right: 25px;display: inline-block;padding-bottom: 10px;border-bottom: 1px solid #442513;width: 100%;}
#review .ukomiLink a {}
#review .ukomiLink:after{content: '';width: 9px;height: 9px;border: 0px;border-top: solid 2px #442513;border-right: solid 2px #442513;-ms-transform: rotate(45deg);-webkit-transform: rotate(135deg);transform: rotate(135deg);position: absolute;top: 50%;right: 10px;margin-top: -8px;}
#review .ukomiLink.active:after{
content: ''; width: 9px;height: 9px;border: 0px;border-top: solid 2px #442513;border-right: solid 2px #442513;-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);position: absolute;top: 50%;right: 10px;margin-top: -3px;}
#review .review-container {margin-bottom: 0;}
#review .reviewWidget_title {padding-bottom: calc(15em/16);}
#review h2 {width: 73.33%; padding: 0 0 calc(60em/16);margin: 0 auto;text-align: center;}
#review .ukomiCode .review-summary-container .starRating span {font-size: 2.8rem;}
#review .ukomiCode .review-summary-container .starRating .reviewNumber {line-height: 1;}
#review .ukomiReview {padding-top: 10%;}
#review .u-komi-sorting-btn-form-data:nth-of-type(5) {display:none!important;}

@media screen and (max-width: 750px) {
#review.reviewWidget_title {margin-top: 0;font-size: 2.4rem;}
#review .ukomiLink .txt {font-size: 1.8rem;}	
}



/*==============================
 ukomiGallery
==============================*/
#ukomiGallery {margin: calc(75em/16) 0 0;}
#ukomiGallery .inner {width: 94%;margin: 0 auto;}
@media screen and (max-width: 750px) {
}


/*==============================
 form
==============================*/
#form {padding: 0;}
#form .p-form__bodyColorBtm { display: flex; justify-content: space-between; margin: 0;}
#form .p-form__bodyBtn { background-color: #fff;width: 100%; margin: 0 auto; background-color: transparent; text-align: center;}
#form .item_block_flex { width: 100%; margin: 0;}
#form .formColor,
#form .formSize {position: relative;}
#form .radio_content.type2.mt_type01,
#form .radio_content.type2.mt_type02 {padding: 0;margin: 0;}
#form .formColor label {position: relative;}
#form .formColor label::before {position: absolute;content: "";width:25px;height: 25px;border-radius: 50%;left: 0;right: 0;top:15%;margin: 0 auto;}
#form .formColor label.ColorP::before {background: #cdbebc;}
#form .formColor label.ColorB::before {background: #12061c;}
#form .formColor label.Colorg::before {background: #c2c3c5;}
#form .formSize .radio_content.secount fieldset {top:17.4%;}
#form .formColor .radio_content.secount fieldset {top:22.4%;}
#form .radio_content.type2 fieldset {display: flex;justify-content: space-between;}
#form .radio_content.secount fieldset {position: absolute; width: 74.66%;left: 0;right: 0;margin: 0 auto;}
#form .radio_content.secount fieldset .radio-inline__label { width: 32.14%; padding: calc(36em/16) 0 ; border: solid 1px #eaeaea;border-radius: 5px; font-weight: 600;margin: 0;}
#form .formColor .radio_content.secount fieldset .radio-inline__label {padding: calc(50em/16) 0 calc(15em/16) ;}
#form .radio_content.secount fieldset .radio-inline__label:first-of-type {margin-left: 0;}
#form .radio-inline__input:checked + .radio-inline__label {border: solid 2px #442513; background: #442513;}
#form .cart_in_block {position: relative;}
#form .buttonCartin {position: absolute;width: 77.06%;top:0;left: 0;right: 0; margin: 0 auto ;text-align: center;}
#form .form_txtLink {position: absolute;width: 30.8%;left: 0;right: 0;bottom: 15%; text-align: center;margin: 0 auto;}
#form .form_set .formBtn {position: relative;}
#form .form_set .formBtn .buttonCartin {position: absolute;width: 93.06%;top:2%;left: 0;right: 0; margin: 0 auto ;text-align: center;}
@media screen and (max-width: 750px) {
#form .form_txtLink {bottom: 10%;}
}

#form .induction_price {position: relative;}
#form .cta_downarr {position: absolute;width: 17.46%;top:46%;left: 17%;animation: arrow-move 2s infinite ease-in-out;}
@keyframes arrow-move {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0);}
  48% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

/*==============================
 faq
==============================*/
#faq {padding: calc(80em/16) 0 0;background: #fff;;}
#faq .inner {width: 90%;margin: 0 auto;}
#faq .faq_contents h2{text-align: center;font-size: 2.8rem;font-weight: 600; padding-bottom: calc(40em/16);/*border-bottom: 1px solid #bebebe;*/letter-spacing: 0.4rem;color: #442513;}
#faq .faq_contents .faq_content{margin-bottom: 5rem;margin: 0 auto;}
#faq .faq_contents .faq_content.faq02,
#faq .faq_contents .faq_content.faq03 {margin-top: calc(60em/16);}
#faq .faq_contents .faq_content h3{font-size: 2rem;font-weight: bold;margin-bottom: calc(20em/16);}
#faq .faq_contents .faq_content .faq_content_block{padding: 0;}
#faq .faq_contents .faq_content .faq_content_block .faq_block{margin-bottom: 1rem;}
#faq .faq_content .faq_content_block .faq_block .faq_txt a {color: #4d3fe1; text-decoration: underline;}
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_tit{text-align: left; border: solid 1px #d6d6d6;margin-bottom: 0rem;font-size: 1.6rem;padding: 1.4rem;border-left: solid 7px #f28e1e;background: #ffffff;border-radius: 4px;position: relative;cursor: pointer;line-height: 1.8;}
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_tit.active,
#faq .faq_contents .faq_content2 .faq_content_block .faq_block .faq_tit.active{
font-weight: bold;color: #f28e1e;border-radius: 4px 4px 0 0;z-index: 10;}
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_tit:after{content: '';width: 9px;height: 9px;border: 0px;border-top: solid 2px #f28e1e;border-right: solid 2px #f28e1e;-ms-transform: rotate(45deg);-webkit-transform: rotate(135deg);transform: rotate(135deg);position: absolute;top: 50%;right: 20px;margin-top: -8px;}
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_tit.active:after{
content: ''; width: 9px;height: 9px;border: 0px;border-top: solid 2px #f28e1e;border-right: solid 2px #f28e1e;-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);position: absolute;top: 50%;right: 20px;margin-top: -3px;}
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_txt{line-height: 1.8;padding: 1.5rem;background: #f7f7f7;border: solid 1px #ccc;border-top: none;text-align: left;}
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_txt p .txt_link{display: block;margin-top: 1rem;}
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_txt p .underline{border-bottom: solid 1px #000;}
#faq .faq_contents .faq_content2 .faq_content_block .faq_block .faq_txt .block,
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_txt .block{
margin-top: 1.5rem;border: solid 1px #ccc;background: #fff;padding: 1rem;border-radius: 6px;}
#faq .c_red{color: #ff0000;}
#faq .bold{font-weight:bold;}
#faq .faq_contents .faq_content.block{display: block;}
#faq .ba_img{text-align: center;margin-top: 3rem;display: inline-block;background: #fff;padding: 1.5rem;border: solid 1px #ccc;border-radius: 5px;margin-bottom: 20px;}
#faq .ba_img .flex{display: flex;justify-content: center;}
#faq .ba_img .flex > div {margin: 0 1rem;text-align: center;}
#faq .ba_img .flex > div img{max-width: 15rem;margin-bottom: 0.5rem;}
#faq .ba_img .flex > div p{}

@media all and (max-width: 750px){
#faq .faq_contents .faq_content .faq_content_block {padding: 0rem;}
#faq .faq_contents h2 {text-align: center;font-size: 2.4rem;padding: 1.4rem 0;margin-bottom: 3rem;max-width: 100%;width: 100%;}
#faq .ba_img{text-align: center;margin-top: 3rem;display: inline-block;background: #fff;padding: 3%;border: solid 1px #ccc;border-radius: 5px;}
#faq .ba_img .flex{display: flex;justify-content: center;}
#faq .ba_img .flex > div {margin: 0 1%;text-align: center;width: 48%;}
#faq .ba_img .flex > div img{max-width: 100%;margin-bottom: 0.5rem;}
#faq .ba_img .flex > div p{}
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_tit{padding-right: 4rem;}
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_txt p,
#faq .faq_contents .faq_content .faq_content_block .faq_block .faq_txt{font-size: 1.7rem;}
}

/*==============================
 footer
==============================*/
#footer .inner {width: calc(340 / 375* 100%);margin: 0 auto; }
#footer .cm-f__guide { display: block; padding: calc(120em/48) calc(73em/48); }
#footer .cm-f__guideTitle { margin: 0 0 calc(90em/49); font-size: calc(49em/48); }
#footer .cm-f__guideList { display: block; margin-bottom: calc(-78em/48); }
#footer .cm-f__guideListItem { font-size: calc(37em/48); margin-bottom: calc(78em/48); }
#footer .cm-f__btm {text-align: center; margin-top: calc(114em/48); flex-direction: column-reverse; }
#footer .cm-f__btmContactBlock { text-align: center;}
#footer .cm-f__btmContactBlock:not(:first-of-type) { margin-top: calc(133em/48); }
#footer .cm-f__btmContactBlock .title { font-size: calc(30em/48); }
#footer .cm-f__btmContactBlock .body { display: block; margin-top: calc(37em/48); }
#footer .cm-f__btmContactBlock:nth-of-type(1) .body__tel img { width: calc(626/680*100%); }
#footer .cm-f__btmContactBlock:nth-of-type(2) .body__tel img { width: calc(630/680*100%); }
#footer .cm-f__btmContactBlock .body__txt { margin: calc(55em/22) 0 0; font-size: calc(22em/48); justify-content: center; }
#footer .cm-f__btmContactBtn { margin: calc(45em/16) auto 0; font-size: calc(30em/48); }
#footer .cm-f__btmLogo { margin-top: calc(200em/48); text-align: center; }
#footer .cm-f__btmLogo img { width: calc(296/680*100%); }
#footer .cm-f__copy { margin: calc(105em/48) 0 0 calc(-35/680*100%); width: calc(750/680*100%); border-top-width: 1px; padding: calc(40em/48) calc(20em/48) 0; }
#footer .cm-f__copy small { font-size: calc(14em/48); }

@media screen and (min-width: 751px) {
#footer .cm-f__guideTitle {font-size: calc(17em / 16);}
#footer .cm-f__guideList { display: flex; justify-content: space-between;flex-wrap: wrap;}
#footer .cm-f__guideListItem {font-size: calc(14em / 16); margin-bottom: calc(22em / 14); }
#footer .cm-f__btmContactBlock:nth-of-type(1) .body__tel img,
#footer .cm-f__btmContactBlock:nth-of-type(2) .body__tel img {width:41.33%;}
#footer .cm-f__btmContactBlock .title {font-size: calc(17em / 16);}
#footer .cm-f__btmContactBlock .body__txt {font-size: calc(17em / 16); margin: calc(25em/22) 0 0;}
#footer .cm-f__btmContactBtn {width: 35%; margin-top: calc(60em / 16);}
#footer .cm-f__btmContactBtn .target {font-size: calc(26em / 16);}
#footer .cm-f__btmContactBtn .txt {font-size: calc(26em / 16); margin-top: calc(12em / 17);}
#footer .cm-f__btmLogo {width: 46.93%;text-align: center;margin: calc(200em/48) auto 0;}
#footer .cm-f__copy {margin-top: calc(105em / 16); padding-top: calc(40em / 16);}
#footer .cm-f__copy small { font-size: calc(14em/16); }
}