@charset "UTF-8";
*, *:before, *:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
-webkit-box-sizing: border-box;
   }

body {
	margin: 0;
	background-image: url("../img/bg.png");
	background-size: 10%;
}
  
.inner {
  max-width: 1100px;
  width: 100%;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  margin: 0 auto;
}
  @media only screen and (max-width: 640px) {
    .inner {
      padding-left: 4%;
      padding-right: 4%; } 
body {
background-image: none;
}
}

.max-inner {
  max-width: 1300px;
  width: 100%;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  margin: 0 auto; }
  @media only screen and (max-width: 640px) {
    .max-inner {
      padding-left: 4%;
      padding-right: 4%; } }

.cta-inner {
  max-width: 700px;
  width: 100%;
  padding-left: 5rem;
  padding-right: 5rem;
  margin: 0 auto; }
  @media only screen and (max-width: 640px) {
    .cta-inner {
      padding-left: 15%;
      padding-right: 15%; } }
  @media only screen and (max-width: 320px) {
    .cta-inner {
      padding-left: 10%;
      padding-right: 10%; } }

img {
  display: block;
  width:100%; }

.cover {
  object-fit: contain;
  width: 100%;
  height: 100%; }
.width80 {
  width: 80%;
  height: 80%; 
margin: auto;}
.width70 {
  width: 70%;
  height: 70%; 
margin: auto;}

.pc {
  display: block;
max-width: 70%;
margin: auto;

}
  @media only screen and (max-width: 640px) {
    .pc {
      display: none; } }

.sp {
  display: block;
}
  @media only screen and (min-width: 641px) {
    .sp {
      display: none; } 
}

.effect-fade {
  opacity: 1; }

.cta-btn:hover img {
  opacity: .6; }

.effect-fade.effect {
  opacity: 1;
  -webkit-animation: bound 1s ease-in;
  -moz-animation: bound 1s ease-in;
  animation: bound 1s ease-in; }
@keyframes bound {
  /** 開始時は１倍の大きさ */
  from {
    transform: scale(1); }
  /** 0%～25%にかけて1.15倍する */
  25% {
    transform: scale(1.15); }
  /** 25%～50%にかけて0.95倍する */
  50% {
    transform: scale(0.95); }
  /** 50%～75%にかけて1.05倍する */
  75% {
    transform: scale(1.05); }
  /** 終了時は元の大きさに戻す */
  to {
    transform: scale(1); } }
.cta {
  padding: 5rem 0 4rem;
  background: #132040; }
  @media only screen and (max-width: 640px) {
    .cta {
      padding: 2rem 0 2rem; } }
  .cta_box {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 70px 10px 10px;
    padding: 0 2rem 2rem; }
    @media only screen and (max-width: 640px) {
      .cta_box {
        border-radius: 70px 10px 10px;
        padding: 0 1rem 1rem; } }
    .cta_box_title {
      position: relative;
      top: -.5rem;
      left: -6rem;
      width: 135%;
      margin: 0 auto; }
      @media screen and (min-width: 414px) and (max-width: 640px) {
        .cta_box_title {
          width: 140%;
          top: -.5rem;
          left: -4rem; } }
      @media screen and (min-width: 375px) and (max-width: 413px) {
        .cta_box_title {
          width: 150%;
          top: -.5rem;
          left: -4rem; } }
      @media screen and (min-width: 319px) and (max-width: 374px) {
        .cta_box_title {
          width: 150%;
          top: -.5rem;
          left: -4rem; } }
      @media only screen and (max-width: 320px) {
        .cta_box_title {
          top: -.5rem;
          left: -4rem;
          width: 150%; } }
    .cta_box_item {
      position: relative;
      top: -1rem; }
      .cta_box_item img {
        width: 100%; }
    .cta_box_btn {
      text-align: center; }
      .cta_box_btn img {
        width: 100%;
        transition: .3s; }
        .cta_box_btn img:hover {
          opacity: .6; }

.cta-btn {
  /*background: #306FB5;*/
  /*padding: 1rem; */
padding: 0 1rem; }
  .cta-btn a img {
    /*width: 50%;*/
	   width: 70%;
    margin: 0 auto;
    transition: .3s; }
    @media only screen and (max-width: 640px) {
      .cta-btn a img {
        width: 100%; } 

.cta-btn a img:hover {
      opacity: .6; }}



.voice1 {
  background-repeat: no-repeat;
  background-size: cover; }
  .voice1_flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 3rem 0; }
    @media only screen and (max-width: 640px) {
      .voice1_flex {
        padding: 2rem 0; } }
    @media only screen and (min-width: 641px) {
      .voice1_flex_card {
        width: 30%; }
        .voice1_flex_card:nth-child(n+4) {
          margin-top: 2rem; } }
    @media only screen and (max-width: 640px) {
      .voice1_flex_card {
        width: 49%; }
        .voice1_flex_card:nth-child(n+3) {
          margin-top: 1rem; } }

.voice2 {
  background-repeat: no-repeat;
  background-size: cover; }
  .voice2_flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 4rem 0; }
    @media only screen and (max-width: 640px) {
      .voice2_flex {
        padding: 3rem 0; } }
    @media only screen and (min-width: 641px) {
      .voice2_flex_card {
        width: 45%; }
        .voice2_flex_card:nth-child(n+3) {
          margin-top: 2rem; } }
    @media only screen and (max-width: 640px) {
      .voice2_flex_card {
        width: 100%; }
        .voice2_flex_card:nth-child(n+2) {
          margin-top: 2rem; } }

.confor {
	width:66%;
	margin:0 auto;
}
    @media only screen and (max-width: 640px) {
.confor {
	width:100%;
	margin:0 auto;}}

.confor img#OffAmazonPaymentsWidgets1,
.confor img#OffAmazonPaymentsWidgets0 {
	display:inline;
}

#ukokkei-landing-page-form .shipment-frequency-ibox .frequency-period-label{
	padding-right:15px !important;
}

#ukokkei-landing-page-form .shipment-frequency-ibox .radio-group-options{
	padding:0 15px 0 15px !important;
}


.faq {
  /*padding-bottom: 5rem;*/ }
  .faq_title {
    margin-bottom: 3rem; }
  .faq_card-pc img {
    width: 100%; }
    .faq_card-pc img:nth-child(n+2) {
      margin-top: 2rem; }
  .faq_card-sp img {
    width: 100%; }
    .faq_card-sp img:nth-child(n+2) {
      margin-top: 1.5rem; }

.contact {
  /*height: 300px;*/
  text-align: center;
  line-height: 300px; }

footer {
  padding: 2rem 0 0; 
width: 70%;
margin: auto;}
  footer .footer_link {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    border-bottom: solid 1px #333333;
    padding-bottom: 2rem; }
    footer .footer_link a {
      width: 30%;
      text-decoration: none;
      color: #facbd1;
      font-weight: 600;
      letter-spacing: .1rem;
      transition: .3s; }
      @media only screen and (max-width: 640px) {
		  footer {
width: 100%;}
        footer .footer_link a {
          font-size: 14px; } }
      @media only screen and (max-width: 320px) {
        footer .footer_link a {
          font-size: 12px; } }
      footer .footer_link a:hover {
        opacity: .6; }
  footer .copyright {
    display: block;
    text-decoration: none;
    color: #facbd1;
    padding: 1rem 0;
    text-align: center;
    transition: .3s; }
    footer .copyright:hover {
      opacity: .3; }


.product-prodcut {
	position: relative;
}
.product-prodcut a {
	position: absolute;
	top: 35%;
/*	left: 50%;*/ /*20211108*/
	left: 27%;
/*	width: 26%;*/
width: 50%;
}
.product-prodcut a:hover {
	opacity: .8;
	cursor: pointer;
}
.product-prodcut a .order {
	width: 100%;
}
.product-prodcut_sp {
	position: relative;
}
.product-prodcut_sp a {
	position: absolute;
	top: 60%;
/*	right: 18%;*/ /*20211108*/
		right: 9%;
/*	width: 60%;*/
		width: 80%;
}
.product-prodcut_sp a:hover {
	opacity: .8;
	cursor: pointer;
}
.product-prodcut_sp a .order_sp {
	width: 100%;
}
/*--追加*/
.product-prodcut .pc{
	background-color: #ddecef;
}
.product-prodcut .sp{
	background-color: #ddecef;
}
.note{
	text-align:center;
	font-size:80%;
}
.note_w{
	text-align:center;
	font-size:80%;
	color:#FFF;
}
.note-sp{
	display:none;
}

 @media only screen and (max-width: 640px)  {
.note,
.note_w{
	font-size:50%;
}
.note-sp{
	display: inline;
}
}
/** 補足 bg*/
.bg_colors70{
	/*background-color: #ddecef;*/
		background-image: url("../img/bg_colors.png");
	background-size: 140%;
	background-position: center center;
	/*padding-bottom: 50px;
	margin-bottom: 25px;*/
	padding-bottom: 7rem;
	margin-bottom: 0rem;
}
/* 背景がブルーの販売ボタン */
.support{
	background-color: #0E0031;
	max-width: 70%;
margin: auto;
}
.support_wh{
	max-width: 70%;
margin: auto;
	background-color: #ffffff;
}
.bg_footer{
	background-color: #e6011a;
} /** footer color*/

/** 補足 ブルーbtn*/
 @media only screen and (max-width: 1100px)  {
.bg_colors70{
		 padding-bottom: 2rem;
		 }

.stock dl{
  padding: 0 250px !important;
}
}
}
	 
 @media only screen and (max-width: 800px)  {
	 	 .bg_colors70{
		 padding-bottom: 2rem;
}

}
 @media only screen and (max-width: 700px)  {
	 	 .bg_colors70{
		 padding-bottom: 1.3rem;
}
}
 @media only screen and (max-width: 640px)  {
	 /* 販売ボタン */
.support{
	background-color: #020c39;
	max-width: 100%;
}
.support_wh{
	max-width: 100%;
}
.support.cta-btn a img{
width:100%;
}
.bg_colors70{
	/*background-color: #ddecef;*/
	background-image: url("../img/bg_colors.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	padding-bottom: 60px;
	margin-bottom: 20px;
}
}
 @media only screen and (max-width: 414px)  {
	 	 .bg_colors70{
		 padding-bottom: 1rem;
		 margin-bottom: 0.9rem;
}
}
/** 補足 FAQ*/
.bg_white100{
	background-color: #ffffff;
}
.q_a dl{
  margin-bottom: 10px;
}
.q_a dl dt img{
width:100%;
}
.q_a dl dd img{
width:100%;
}
.q_a dl dt:hover img{
  filter:alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
}
.q_a dl dd{
  display: none;
}
div.q_a {
padding-bottom: 1rem;
}
/** 補足 在庫状況*/
.stock{
  /*margin: 120px 0 70px;*/
	margin: 0 0 0;
	padding: 120px 0 70px;  /*調整で追加*/
  color: #737373;
	/*background: #ffffff;*/
}
.stock div{
	text-align:center;
}
.stock div p{
  display: inline-block;
  /*margin-left: 40px;*/
}
.stock dl{
  padding: 0 350px;
}
.stock dt{
  display: inline-block;
  vertical-align: middle;
}
.stock dd{
  display: inline-block;
  vertical-align: middle;
  font-size:200%;
}

img.tit{
	display: inline-block;
	width:auto;
}
/** 補足 sp **/
@media only screen and (max-width: 740px) {
  .stock{
    margin: 20px 0 40px;
	  padding: 0 0 0;  /*調整で追加*/
  }
  .stock div{
    width: 90%;
    margin: 0 auto;
  }
  .stock div .tit{
    width: 40%;
  }
  .stock div p{
    display: inline-block;
    /*margin-left: 30px;*/
    font-size: 12px;
  }
  .stock dl{
    width: 90%;
    margin: 0 auto;
    padding: 15px 0 !important;
  }
  .stock dt{
    /*padding: 0px 40px 0px 10px;*/
  }
  .stock dt img:hover{
    opacity: 1;
  }
  .stock dd{
    margin: -30px 0 0 0;
    font-size: 20px;
  }
  .stock img{
width:100%;
  }
	.h40_sp{
		margin-top: 40px;
	}
	.pt-30_sp0 {
  padding-top: auto;
}
}

/** 返金保証 **/
.caution2{padding-right: 30px;
	background-color: #ffffff;
}
.security{padding: 0 15px 5px;}

/** 調整 **/
.bg_wh{
	background-color: #ffffff;
	width:70%;
	margin: auto;
}
.pb-30{
	padding-bottom: 30px;
}
/** 補足 調整**/
.bg_wh_pt30_pb30 {
/*  padding-top: 30px;*/
background-color: #ffffff;
max-width: 70%;
margin: auto;
/*	padding-bottom: 30px;*/
}
.bg_wh_pt30_pb30 img{
max-width: 100%;
width: 100%;
}

@media only screen and (max-width: 640px)  {
	.bg_wh_pt30_pb30 {
max-width: 100%;
margin: auto;
	}
	.security{padding: 0 30px 5px;}
}
@media only screen and (min-width: 640px) {
.bg_zaiko{
		background-image: url("../img/bg_70wh.png");
	/*background-size: 140%;*/
	background-size: 100%;
	background-position: center center;
/*	padding-bottom: 4.5rem;
	margin-bottom: 2rem;*/
}
}
.anime img{
padding-left: 20px;
	padding-right: 20px;
	background-color: #ffffff;
}
@media only screen and (max-width: 640px)  {
	.anime img{
padding-left: 10px;
	padding-right: 10px;
}
}