@charset "UTF-8";

/*============================================================================================================

                h1 - headline

=============================================================================================================*/

#header-h1 h1 {
font-size:14px;
padding: 4px 16px;
color: #5f6367;
background-color: #FFFFFF;
border-bottom:1px solid #b6b4b6;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: $bg-color;
  line-height: $line-height;
  
  //複数行オプションClass
  &.multiline {
    white-space: normal;
    max-height: 2em * $line-height;
    position: relative;
    &::after {
      content: "…";
      position: absolute;
      display: block;
      bottom: 0;
      right: 0;
      background-color: $bg-color;
    }
  }
}

/*============================================================================================================

                top explain bn - headline

=============================================================================================================*/

#listline {
    /*margin-bottom: 52px;*/
}

.basetop.basetop #listline {
    margin-top: 15px;
}

#listline ul li{
  width: 23.333%;
  float: left;
  margin-left: 2%;
}
#listline ul li:first-child	{
  margin-left: 0;
}
#listline .news-image{
  display:block;
}
#listline .news-image img{
  width:auto;
  height:80px;
  border:solid 1px #cccccc;
}
#listline .news-image a:hover img{
  opacity:0.7;
  filter:alpha(opacity=70);
}
#listline .news-text{
  padding-left:10px;
}
#listline .news-text p{
  margin-bottom:0;
}
.brandtop.brandrop #listline .hBox {
  height: 40px;
  margin-bottom: 80px;
}

.morenext{
  float:right;
}

.morenext a {
  padding: 12px 14px;
}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

/*#listline{
  margin-bottom: 30px;
}*/
#listline ul{
  width: auto;
  margin: 0 auto;
  text-align: center;
}
#listline ul li{
  width: 49%;
}
#listline ul li:nth-child(2n+1){
  margin-left: 0;
  clear: both;
}
#listline .smp-morenext.btn {
  margin: 10px 0 30px;
}

.smp-morenext.btn{
  width: 100%;
  background-color: #fff;
  border-radius: 3px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  border:none;
  font-size: 13px;
  border: 1px solid #cccccc;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

.smp-morenext.btn a{
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.05em;
  display: block;
  font-weight: bold;
  }
  .tab-content .smp-morenext.btn{
    margin-bottom:15px;
  }

}


/*============================================================================================================

                login - headline

=============================================================================================================*/

.loginBox .login-area-subbox .controlLabel{width:170px;}
.login-area-subbox .controls{margin-left:120px;}
*+html .loginBox .login-area-subbox .controls{margin-left:0;}
.loginBox .formOn{text-align:center;}
.loginBox .formOn .btMain{float:none;}

.loginBox h2{
  margin: 20px 0 40px;
  font-weight: bold;
  text-align: center;
}
.loginBox h4{
  margin: 40px 0 40px;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  line-height: 25px;
}
.loginPasswordtext .formOn a#passRemind {
    color: #000000;
}

/* ======smartphone====== */
@media only screen and (max-width: 767px) {

  .loginBox{width:100%;}
  .loginBox .login-area-subbox{height:auto;}
  .loginBox .login-area-subbox .controlLabel{padding-left:0;}

}

/*============================================================================================================

                mypage - headline

=============================================================================================================*/

.mypage-menu{margin-left:-2%;}
.mypage-menu .mypage-menu-select{float:left; width:23%; margin-left:2%; margin-bottom:2%;}
.mypage-menu .mypage-menu-select .btn{display:block; padding:10px 0;}
.mypage-menu .mypage-menu-select .btn i{margin-right:10px;}
.mypage-menu .menu-text-block{height:150px; text-align:center; border:solid 1px #dddddd; cursor:pointer;}
.mypage-menu .menu-text-block:hover{background-color:#f8f8f8; transition: all 0.3s ease 0s;}
.mypage-menu .menu-text-block .menu-title{width:80%; margin:0 auto 10px; padding:10px 0; border-bottom:solid 1px #dddddd;}
.mypage-menu .menu-text-block i{margin-bottom:5px;}
.mypage-menu .menu-text-block .menu-explain{font-size:10px; margin-bottom:0; padding:0 10px;}

.fav-list-table .fav-productBox{width:43%;}

.table.tableList{border-bottom:solid 1px #dddddd;}
.tableList > tbody > tr > th{padding:10px; width:28%;}
.tableList > tbody > tr > td{padding:10px; vertical-align:middle;}
.tableList .radio.inline,
.tableList .checkbox.inline{padding-bottom:5px;}
.tableList select{margin-bottom:0;}

.mail_address_area{
  float:left;
  clear:both;
}

.controlArea .controls .top-input,
.controlArea .controls .second-input{
  width: 49%;
}
.controlArea .controls .top-input .input-front,
.controlArea .controls .second-input .input-front{
  width: 24px;
}

.listNav > li > a{
  -webkit-text-shadow: none;
  -moz-text-shadow: none;
  -ms-text-shadow: none;
  text-shadow: none;
}
body.mypage .formOn {
  padding: 19px 0 20px;
}
body.mypage .login .row {
  margin-left: 0;
}


/* ======smartphone====== */
@media only screen and (max-width: 767px) {

  .mypage-menu{margin-left:0;}
  .mypage-menu .mypage-menu-select{width:49%; margin-left:0; margin-bottom:2%;}
  .mypage-menu .mypage-menu-select:nth-child(2n){margin-left:2%;}
  .mypage-menu .mypage-menu-select .btn{display:none;}
  .mypage-menu .menu-text-block .menu-explain br{display:none;}

  .form-edit-style{border-bottom:solid 1px #dddddd;}
  .form-edit-style .controlArea{border-top:solid 1px #dddddd; padding-top:10px; margin-bottom:10px;}

.mail_address_area{
  clear:both;
  float:none;
  margin-left:5px;
}
body.mypage .formOn {
  padding: 19px 10px 20px;
}
.formOn, .formother .formOn {
  margin: 20px -10px;
  padding: 19px 10px 20px;
}
.formother input.span {
  width: 100%;
}


.form-edit-style{
  border-bottom: 0;
}
.controlArea .controls .top-input,
.controlArea .controls .second-input{
  width: 100%;
}
.controlArea .controls .top-input .input-front,
.controlArea .controls .second-input .input-front{
  width: 10%;
}
.formother .controls #prefecture_id{
  width: 100%;
}
.inputSize select:first-child	{
  width: 25%;
}

.merlist .table.layoutTable .form-part{
  margin-top: 10px;
}
.merlist .table.layoutTable .form-part form,
.merlist .table.layoutTable .form-part .delete-part{
  padding: 2px 8px;
}
.merlist .btn.btSmall{
   width: 100%;
   /*padding: 6px 0;*/
}


}


/* =================================
smartphone tablet
================================= */
@media (max-width: 979px) {

  body.mypage .smaller-container .row .code6 {
    width: 100%;
    margin-left: 0;
  }
  body.mypage .smaller-container .row .code3 {
    width: 100%;
    margin-left: 0;
  }
  body.mypage .smaller-container .row .code9 {
    width: 100%;
  }
  .formother input.span {
    width: 90%;
  }

}


/*============================================================================================================

                mypage point - headline

=============================================================================================================*/

.merlist .code9{
  float:right;
}

ul.outside-slide,
ol.outside-slide{
  margin-left:25px;
}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {


.merlist > .code9{
  float:none;
}

}

/*============================================================================================================

                layoutTable - headline

=============================================================================================================*/

  #wrapper ul.turnup-column2 > li{width:23%; margin-left:2%;}
  #wrapper ul.turnup-column2 > li:nth-child(4n+1){margin-left:0; clear: both;}

  #wrapper ul.turnup-columnqa2 > li{width:40%; margin-left:2%;}
  #wrapper ul.turnup-columnqa2{ padding:0 0 0 0; !important }

/* ======smartphone====== */
@media only screen and (max-width: 767px) {

  #wrapper ul[class*="turnup-column"] > li{float:left; height:auto; margin-left:0; clear:none;}

  #wrapper ul.turnup-column2 > li{width:49%; margin-left:2%;}
  #wrapper ul.turnup-column2 > li:nth-child(2n-1){margin-left:0; clear: both;}

  #wrapper ul.turnup-columnqa2 > li{width:80%; margin-left:2%;}
  #wrapper ul.turnup-columnqa2{ padding:0 0 0 0; !important }

  #wrapper ul.turnup-column3 > li{width:32%; margin-left:2%;}
  #wrapper ul.turnup-column3 > li:nth-child(3n-2){margin-left:0; clear: both;}
  #wrapper ul.turnup-column4 > li{width:25%;}
  #wrapper ul.turnup-column4 > li:nth-child(4n-3){clear: both;}
  #wrapper ul.turnup-column5 > li{width:20%;}
  #wrapper ul.turnup-column5 > li:nth-child(5n-4){clear: both;}
  #wrapper ul.turnup-column6 > li{width:16.6666%;}
  #wrapper ul.turnup-column6 > li:nth-child(6n-5){clear: both;}

  table.layoutTable{border:0;}
  table.layoutTable > thead{display:none;}
  table.layoutTable > tbody > tr > th,
  table.layoutTable > tbody > tr > td{width:100%; float:left; padding:0 0 5px; border:none;}
  table.layoutTable > tbody > tr > th{text-align:left;}

  table.layoutTable{border-bottom:solid 1px #dddddd;}
  table.layoutTable > tbody > tr > td:first-child	,
  table.layoutTable > tbody > tr > th:first-child	{padding-top:10px; border-top:solid 1px #dddddd !important;}
  table.layoutTable > tbody > tr > td:last-child,
  table.layoutTable > tbody > tr > th:last-child{padding-bottom:10px;}

  table.layoutTable > tbody > tr > td.itemprice-part,
  table.layoutTable > tbody > tr > td.nomBox,
  table.layoutTable > tbody > tr > td.totalProductBox{text-align:left;}
  table.layoutTable > tbody > tr > td.itemprice-part .visibleph,
  table.layoutTable > tbody > tr > td.nomBox .visibleph,
  table.layoutTable > tbody > tr > td.totalProductBox .visibleph{float:left;}

}

/*============================================================================================================

                inquiry - headline

=============================================================================================================*/

#inquiry h3{
  font-weight: bold;
  padding: 10px 0;
  border: 1px solid #cdcdcd;
  text-indent: 10px;
  background-color: #ededed;
  position:relative;
  background-image:url("../img/arrow_white_open.png");
  background-position:center right;
  background-repeat:no-repeat;
  margin:0 0 1px;
}

#inquiry h3.open{
  background-image:url("../img/arrow_white_close.png");
}

#inquiry .inquirytxt{
  padding:10px;
  border: 1px solid #cdcdcd;
  display:none;
  margin:0 0 10px;
  display:none;
}

#inquiry .inquirytxt.open{
  display:block;
}

.inquiryList li.first-child	{
  clear:both;
  margin-left:0;
}

#answer-telephone{
  display:none;
}

#answer-telephone.open{
  display:block;
}

p.inquiry_txt_end{
  margin:10px 0;
}
.inquiry-index .ottl p{
  line-height: 24px;
}
.inquiry-index .ottl a{
  text-decoration: underline;
}
body.inquiry .formOn{

}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

#inquiry h3{
  padding: 10px 40px 10px 10px;
　text-indent: 0;
}
.inquiry-index .ottl p{
  line-height: 20px;
}

input#btn_add, input.btn.btSmall.btn-delete{
  width: 100%;
  }

}


/*============================================================================================================

                cart - headline

=============================================================================================================*/

.cartbg {
background-color:#ffffff;
border-radius: 20px;
}

@media (max-width: 767px) {

.cartbg {
background-color:#ffffff;
}

}


.tableBorderless tbody th{width:28%;}
table td.productBox{width:50%;}
table td.itemprice-part{width:16%; text-align:center; vertical-align:middle;}
table td.nomBox{width:16%; text-align:center; vertical-align:middle;}
table td.totalProductBox{width:16%; text-align:center; vertical-align:middle;}
table td.total-gift-part{width:20%; text-align:center; vertical-align:middle;}



.totalPridyctArea{overflow:hidden;}
.totalPridyctArea p{float:right; border:solid 3px #dddddd; margin:0; padding: 10px 7px; width:280px; text-align:center;}
.totalPridyctArea p span{font-size:14px; font-weight:bold; margin-left:10px;}

table .productArea td{border:none; background-color:transparent !important;}
table .productArea td p{margin-bottom:0;}

.point-form{padding:10px 16px; border:solid 1px #dddddd; margin-bottom:20px;}
.point-form table th{text-align:left; font-weight:normal;}
.point-form table td{font-weight:bold; padding-left:20px;}
.point-form .use-point-form{margin-top:10px;}
.point-form .use-point-form span{display:inline-block; font-weight:bold; margin-right:20px;}
.point-form .use-point-form .btn.btMain{margin-right:10px;}

table.confirm-price-box{width:50%; margin-left:auto;}
table.confirm-price-box th{width:45%;}
table.confirm-price-box td{text-align:right;}

.cartBox .tableBorderless,
.cartBox .tableBorderless thead:first-child	 tr:first-child	 > th:first-child	,
.cartBox .tableBorderless tbody:last-child tr:last-child > th:first-child	,
.cartBox .tableBorderless tbody:first-child	 tr:first-child	 > th:first-child	,
.cartBox .tableBorderless tbody:last-child tr:last-child > td:first-child	{
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}


/* =================================
smartphone
================================= */
@media (max-width: 767px) {

body.cart .formOn {
  padding: 10px 0;
  margin: 0;
}
.cartBox .form-edit-style{
  width: 100%;
}
.cartBox .form-edit-style .controls .top-input,
.cartBox .form-edit-style .controls .second-input{
  width:100%;
}

}


/* ======smartphone====== */
@media only screen and (max-width: 767px) {

  table.layoutTable.cartArea > tbody > tr > td.nomBox{padding-top:5px;}
  table.layoutTable.cartArea > tbody > tr > td.nomBox span{padding-top:6px;}
  table.layoutTable.cartArea > tbody > tr > td.nomBox div{display:inline;}
  table.layoutTable.cartArea > tbody > tr > td.nomBox select{display:inline; width:50%; margin-bottom:0;}
  table.layoutTable.cartArea > tbody > tr > td.nomBox input{float:right;}
  table.layoutTable.cartArea > tbody > tr > td.totalProductBox input{float:right;}
  table.layoutTable.cartArea > tbody > tr > td.totalProductBox .btn{float:right;}
  table.layoutTable.cartArea > tbody > tr > td.totalProductBox{padding-top:10px; margin-top:10px; border-top:dotted 1px #dddddd; font-weight:bold;}
  table.layoutTable.cartArea > tbody > tr > td.totalProductBox form{float:right;}

  table.confirm-price-box{width:auto;}
  table.confirm-price-box td{width:40%;}

  #coupon_code, #coupon_code_up{display:inline; width:60%;}
  .inputSize #month, .inputSize #ValidityYear{width:40%;}

  .point-form .use-point-form span{display:block; margin:0 0 3px;}
  .point-form .use-point-form .btn{margin-top:10px; width:48%;}
  .point-form .use-point-form .btn.btMain{margin-right:2%;}

  table td.giftwrapping-part{text-align:left;}
  #optional_services .noshi_prev{float:none; text-align:center; margin:0 0 10px;}
  #optional_services .preview-image-box{float:none; width:auto; margin-bottom:10px;}

.noshi_preview_main .messagesError,
.noshi_preview_block .messagesError{
	padding-top:50px;
}

}



/*============================================================================================================

                agreement - headline

=============================================================================================================*/

body.steer h1.title {
  /*text-align: left;*/
}

.controlSteer .contentHeader{
  margin:30px 0 10px;
}
.controlSteer h3{
  font-weight:bold;
}
.controlSteer .sentence{
  padding: 10px 0;
}
.controlSteer .sentence a{
  text-decoration: underline;
}
.controlSteer .sentence dt{
  float: left;
  width: 2em;
  font-weight: bold;
}
.controlSteer .sentence dd{
  margin-left: 2em;
}
.controlSteer .sentence p,
.controlSteer .sentence li{
  line-height: 24px;
}
.controlSteer ul,
.controlSteer ol {
  margin: 0 0 10px 25px;
}

.steer .site-information{
  margin-bottom:30px;
}
.steer .site-information p{
  /*text-indent:1em;*/
  padding-left:1em;
}
.steer .site-information .ttl{
  font-weight:bold;
  /*text-indent:0;*/
  padding-left:0;
}


.controlSteer .sentence table{
  width:100%;
}

.controlSteer .sentence table th{
  width:8%;
}

.controlSteer .sentence table td{
  width:92%;
}

/*div.sentence p.day{
  text-align: -webkit-right;
}*/


/* =================================
smartphone
================================= */
@media (max-width: 767px) {

body.steer h1.title {
  text-align: center;
  border-bottom: none;
  margin-bottom: 5px;
}
body.steer .smaller-container .row .code3 {
  width: 100%;
  margin-bottom: 0;
}
body.steer .smaller-container .row .code9 {
  width: 100%;
}
body.steer .smaller-container .row .code10 {
  width: 100%;
}
.controlSteer .contentHeader {
  margin: 10px 0;
}
.utilization .controlSteer .contentHeader {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -10px;
  margin-right: -10px;
  padding: 10px;
  cursor: pointer;
}
.utilization .controlSteer section.active .contentHeader {
  background-color: #111;
}
.utilization .controlSteer .contentHeader.first-header{
  border-top: 1px solid #eee;
}
.utilization .controlSteer section .contentHeader h2{
  background: url("../img/arrow_down.png") no-repeat right;
  background-size: 12px;
  font-weight: normal;
  font-size: 12px;
}
.utilization .controlSteer section.active .contentHeader h2{
  background: url("../img/arrow_up_w.png") no-repeat right;
  background-size: 12px;
  font-weight:bold;
  color: #ffffff;
}
.utilization .controlSteer .page-inner{
  display: none;
  margin-left: -10px;
  margin-right: -10px;
  border-bottom: 1px solid #eee;
}
.utilization .controlSteer .page-inner.last-inner{
  border-bottom: 0;
}
.utilization .controlSteer .sentence {
    padding: 10px 10px 5px;
    font-size: 11px;
  line-height: 20px;
}

.controlSteer .sentence table th,
.controlSteer .sentence table td{
  padding:0 0 10px;
  vertical-align:top;
}


.controlSteer .sentence table th{
  width:15%;
}

.controlSteer .sentence table td{
  width:85%;
}
.controlSteer .sentence p,
.controlSteer .sentence li{
  line-height: 20px;
}

}


/* =================================
smartphone tablet
================================= */
@media (max-width: 979px) {

  #local-accordion li p.area {
    width: 98%;
  }

  body.steer .smaller-container .row .code3 {
    width: 724px;
    margin-left: 0;
    margin-bottom: 20px;
  }
  body.steer .smaller-container .row .code9 {
    width: 724px;
  }
  body.steer .smaller-container .row .code10 {
    width: 724px;
    margin-left: 0;
  }

  .tenso-com{
    width: 100%;
    text-align: center;
  }

}

/*============================================================================================================

               list-btn-flex - headline

=============================================================================================================*/

.list-btn-flex ul{
margin:0;
padding:0;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

.list-btn-flex ul li{
list-style:none;
padding-bottom: 4.5rem;
margin-bottom: 0;
position: relative;
}

.review-actions a, .review-actions input.btn, .review-actions button {
  width: 100%;
  box-sizing: border-box;
  display: block;
  position: absolute;
  bottom: 20px;
}
.review-actions a.btn {
  padding: 10px;
}

.reco-actions a, .reco-actions input.btn, .reco-actions button {
  width: 100%;
  box-sizing: border-box;
  display: block;
}
.reco-actions a.btn {
  padding: 10px;
}

.change-actions a, .change-actions input.btn, .change-actions button {
  width: 100%;
  box-sizing: border-box;
  display: block;
  position: absolute;
  bottom: 20px;
}
.change-actions a.btn {
  padding: 10px;
}

/*============================================================================================================

                review - headline

=============================================================================================================*/

.review-img {
  width: 300px;
}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.review-img {
  width: 80%;
  margin: 0 auto;
}

}

.wp-pagenavi {
  font-size: 0;
  text-align: center;
}
.wp-pagenavi > a, .wp-pagenavi > span {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 10px;
  border: solid 1px #000000;
  line-height: 28px;
  font-size: 14px;
  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
  letter-spacing: 0.05em;
}
.wp-pagenavi > a {
  -webkit-transition: 0.3s;
          transition: 0.3s;
  color: #000000;
}
.wp-pagenavi > a:hover,
.wp-pagenavi > span {
  background-color: #000000;
  color: #ffffff;
}

@media screen and (max-width: 767px) {

  .wp-pagenavi {

  }
  .wp-pagenavi > a, .wp-pagenavi > span {
    font-size: 1.2rem;
  }
  .wp-pagenavi > a {
    -webkit-transition: 0s;
            transition: 0s;
  }
  .wp-pagenavi > a:hover {
    background-color: transparent;
    color: #000000;
  }

}


/*============================================================================================================

                cation - headline

=============================================================================================================*/

.cation-img {
  width: 48%;
}

.cation-img2 {
    width: 23%;
}

.cation-video {
  width: 50%;
}

.video {
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

/* =================================
smartphone tablet
================================= */

@media (max-width: 979px) {

.cation-img {
  width: 48%;
}

.cation-img2 {
    width: 25%;
}

}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.cation-img {
  width: 80%;
  margin: 0 auto;
}

.cation-img2 {
  width: 50%;
  margin: 0 auto;
}

}


/*============================================================================================================

                cation youtube - headline

=============================================================================================================*/

.youtube {
  position: relative;
  width: 70%;
  padding-top: 39.5%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

}

/*============================================================================================================

                atobarai - headline

=============================================================================================================*/

.atobarai-img {
  width: 45%;
}

/* =================================
smartphone tablet
================================= */

@media (max-width: 979px) {

.atobarai-img {
  width: 70%;
}


}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.atobarai-img {
  width: 80%;
  margin: 0 auto;
}

}

/*============================================================================================================

                question - headline

=============================================================================================================*/

.qa{
margin:0 0 10px 0;
padding:0 0 10px 0;
border-bottom:1px dashed #000000;
}
.qa dt{
font-weight:bold;
background:url(../img/ic_002.jpg) no-repeat left center;
margin:0 0 10px 0;
padding:15px 0 15px 50px;
color:#000000;
}
.qa dd{
background:url(../img/ic_003.jpg) no-repeat left top;
padding:0 0 20px 50px;
}

.qa ul{
padding-left: 1.5em;
  text-indent: -1em;
  list-style-position: inside;
}

.qa li[

]

/*============================================================================================================

                infomation - headline

=============================================================================================================*/

#infom{
  list-style: none;
  overflow: hidden;
}

#infom li{
  float: left;
}

#infom li a{ display: block; }

#infom .infoimg{
  width: 20%;
}

#infom .infotext
{
  width: 75%;
}

/* =================================
smartphone tablet
================================= */

@media (max-width: 767px) {

#infom .infoimg{
  width: 20%;
}

#infom .infotext
{
  width: 75%;
  padding:0 0 0 10px ;
}

}


.infomation-img {
  width: 70%;
  margin: 0 auto;
  line-height:0;
}

/* =================================
smartphone tablet
================================= */

@media (max-width: 979px) {

.infomation-img {
  width: 80%;
  margin: 0 auto;
}

}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.infomation-img {
  width: 90%;
  margin: 0 auto;
}

}


/*============================================================================================================

                qa - headline

=============================================================================================================*/


.qa-img {
  width: 70%;
  line-height:0;
}

/* =================================
smartphone tablet
================================= */

@media (max-width: 979px) {

.qa-img {
  width: 80%;
}

}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.qa-img {
  width: 90%;
}

}



/*
-----------------------------------------*/
#productImage #main-item .mod_thumlist_photo{
}


#productImage #main-item .mod_thumlist_photo_entry {
  position: relative;
  min-height: 0;
  border: none;
  margin-bottom: 0;
width:100%;
}
#productImage #main-item .mod_thumlist_photo_entry a{
  display: block;
  width: 100%;
  height: 100%;
}

#productImage #main-item .mod_thumlist_photo_entry img{
  position: absolute;
  width: 100%;
  clear:both; 
}


.main-height{
  height:560px;
}

/* =================================
pc
================================= */
@media (max-width: 1200px) {

.main-height{
  height:480px;
}

}

/* =================================
smartphone tablet
================================= */
@media (max-width: 979px) {

.main-height{
  height:750px;
}

}


/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.main-height{
  height:760px;
}

}

/* =================================
smartphone
================================= */
@media (max-width: 700px) {

.main-height{
  height:700px;
}

}

/* =================================
smartphone
================================= */
@media (max-width: 640px) {

.main-height{
  height:640px;
}

}

/* =================================
smartphone
================================= */
@media (max-width: 590px) {

.main-height{
  height:590px;
}

}

/* =================================
smartphone
================================= */
@media (max-width: 520px) {

.main-height{
  height:520px;
}

}

/* =================================
smartphone
================================= */
@media (max-width: 450px) {

.main-height{
  height:450px;
}

}

/* =================================
smartphone
================================= */
@media (max-width: 380px) {

.main-height{
  height:380px;
}

}

/* =================================
smartphone
================================= */
@media (max-width: 320px) {

.main-height{
  height:320px;
}

}


/*============================================================================================================

                infomation - headline

=============================================================================================================*/

.text-next-icon {
  display: inline-block;
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  font-size:18px;
  line-height:16px;
  color: #0d933a;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text_nex__title__icon {
vertical-align: middle;
  position: relative;
  top: -0.1em;
}






/*============================================================================================================

                配送時間帯指定不可地域一覧 - headline

=============================================================================================================*/



/* -----------------------------------
     2box table
-----------------------------------*/
 .box2t table {
  border-collapse: collapse;
  border-spacing: 0;
}

 .box2t caption, th, td {
  text-align: left;
  font-weight: normal;
}

.box2t table tbody th {
  width: 30%;
}
.box2t table tbody td {
  width: 70%;
  text-align: left;
}


.box2t table {
  border: 1px #ddd solid;
  max-width: 100%;
  width:100%;
}
.box2t table th,
.box2t table td {
  padding: 8px 10px;
  border: #ddd solid 1px;
}

.box2t table tbody th {
  background: #f1f2f5;
  color: #000;
  text-align:center;
}


/*============================================================================================================

                商品詳細2BOX - headline

=============================================================================================================*/



/* -----------------------------------
     2box detail table
-----------------------------------*/
 .box2detail table {
  border-collapse: collapse;
  border-spacing: 0;
}

 .box2detail caption, th, td {
  text-align: left;
  font-weight: normal;
}

.box2detail table tbody th {
  width: 45%;
}
.box2detail table tbody td {
  width: 55%;
  text-align: left;
}


.box2detail table {
  border: 1px #ddd solid;
  max-width: 100%;
  width:100%;
}
.box2detail table th,
.box2detail table td {
  padding: 8px 10px;
  border: #ddd solid 1px;
}

.box2detail table tbody th {
  background: #f1f2f5;
  color: #000;
  text-align:center;
}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.box2detail table {
  display:table-row;
}

.box2detail tr {
  display:table-row;
}

.box2detail table th,
.box2detail table td {
  border: #ddd solid 1px;
display: table-cell;
}

}

/*============================================================================================================

                order form card - headline

=============================================================================================================*/

.formcard {
  width:320px;
}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.formcard {
  width:100%;
}

}


.formcard2 {
  width:420px;
}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.formcard2 {
  width:100%;
}

}

.formcard3 {
  width:520px;
}

/* =================================
smartphone
================================= */
@media (max-width: 767px) {

.formcard3 {
  width:100%;
}

}


/*============================================================================================================

                Landingpage main - headline

=============================================================================================================*/

.lp-block {
	display: block;
	text-align: center;
}

.lp-bg-color {
	background-color: #0f0c0b;
}

.lp-bg-color-bs {
	background-color: #ececec;
}

.lp-bg-img {
    width: 100%;
    background: url('../img/landingpage/1/main_bg_pc.jpg') no-repeat center center;
background-size:cover;
}

.lp-bg-img2 {
    width: 100%;
    background: url('../img/landingpage/1/main_bg2_pc.jpg') no-repeat center center;
background-size:cover;
}

.lp-bg-img3 {
    width: 100%;
    background: url('../img/landingpage/1/main_bg3_pc.jpg') no-repeat center center;
background-size:cover;
}

.lp-bg-img5 {
    width: 100%;
    background: url('../img/landingpage/1/main_bg5_pc.jpg') no-repeat top center;
background-size:cover;
}

.lp-bg-img6 {
    width: 100%;
    background: url('../img/landingpage/11/main_bg6_pc.jpg') no-repeat bottom center;
background-size:cover;
}

  .lp-bg-img3-space {
    padding: 0 0 110px 0;
  }

/* =================================
smartphone
================================= */

@media (max-width: 767px) {

.lp-bg-img3 {
    width: 100%;
    background: url('../img/landingpage/1/main_bg3_sp.jpg') no-repeat center center;
background-size:cover;
}

  .lp-bg-img3-space {
    padding: 150px 0 60px 0;
  }

.lp-bg-img5 {
    width: 100%;
    background: url('../img/landingpage/1/main_bg5_sp.jpg') no-repeat top center;
background-size:cover;
}

  .lp-bg-img5-space {
    padding: 150px 0 60px 0;
  }

.lp-bg-img6 {
    width: 100%;
    background: url('../img/landingpage/11/main_bg6_sp.jpg') no-repeat top center;
background-size:cover;
}

}

/* ============================
lp-background-color
============================ */

.lp-bg-white {
	background-color: #FFFFFF;
}

.lp-bg-gray {
	background-color: #f8f9fa;
}

.lp-bg-black {
	background-color: #000000;
}

.deepFocus {
  background-image: -webkit-linear-gradient(top, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%);
  background-image: linear-gradient(-180deg, #EBEBEB 0%, #DCDDDF 48%, #C4C5C7 99%); 
}

.blueHour {
  background: -webkit-linear-gradient(left, #7E898F 0%, #636C75 100%), -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.55) 100%), -webkit-radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.08) 63%);
  background: linear-gradient(90deg, #7E898F 0%, #636C75 100%), radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.55) 100%), radial-gradient(at top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.08) 63%);
}

.darkAmber {
  background-image: -webkit-linear-gradient(top, #15140F 0%, #34312C 97%);
  background-image: linear-gradient(-180deg, #15140F 0%, #34312C 97%); 
}

.prelude {
  background-image: -webkit-radial-gradient(51% 96%, #E7E9E4 10%, #D4D6D1 96%);
  background-image: radial-gradient(51% 96%, #E7E9E4 10%, #D4D6D1 96%); 
}

.fullMoon {
  background-image: -webkit-linear-gradient(#DEDFE3 2%, #AEB3B9 95%), -webkit-radial-gradient(33% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(#DEDFE3 2%, #AEB3B9 95%), radial-gradient(33% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: screen; 
}

.twinPeaks {
  background-image: -webkit-linear-gradient(left, #F4F4F4 4%, #DFDEDC 99%);
  background-image: linear-gradient(to right, #F4F4F4 4%, #DFDEDC 99%); 
}

.comet {
  background-color: #646770;
  background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), -webkit-radial-gradient(at 50% 87%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), radial-gradient(at 50% 87%, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
  background-blend-mode: multiply,normal; 
}

.cosmos {
  background-color: #797572;
  background-image: -webkit-linear-gradient(263deg, rgba(255, 255, 255, 0.2) 0%, #000000 100%), -webkit-linear-gradient(18deg, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0.25) 100%), -webkit-radial-gradient(47% 102%, rgba(255, 255, 255, 0.5) 0%, rgba(21, 24, 32, 0.6) 120%);
  background-image: linear-gradient(-173deg, rgba(255, 255, 255, 0.2) 0%, #000000 100%), linear-gradient(72deg, rgba(255, 255, 255, 0.25) 25%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(47% 102%, rgba(255, 255, 255, 0.5) 0%, rgba(21, 24, 32, 0.6) 120%);
  background-blend-mode: multiply; 
}

.graphite {
  background: #282828;
  background-image: -webkit-linear-gradient(right, #7B7F82 2%, #303136 100%), -webkit-radial-gradient(50% 116%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%), -webkit-linear-gradient(149deg, rgba(255, 255, 255, 0.5) 7%, rgba(87, 87, 87, 0.5) 68%, rgba(85, 85, 85, 0.5) 76%, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(-90deg, #7B7F82 2%, #303136 100%), radial-gradient(50% 116%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(-59deg, rgba(255, 255, 255, 0.5) 7%, rgba(87, 87, 87, 0.5) 68%, rgba(85, 85, 85, 0.5) 76%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: normal,multiply,multiply; }

.silverStone {
  background: #989898;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), -webkit-radial-gradient(at top center, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 120%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), radial-gradient(at top center, rgba(255, 255, 255, 0.4) 0%, rgba(0, 0, 0, 0.4) 120%);
  background-blend-mode: multiply,multiply; 
}

.youngForest {
  background: -webkit-linear-gradient(top right, #E2E8E6 0%, #CDD3CD 100%), -webkit-linear-gradient(right, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.12) 100%);
  background: linear-gradient(to bottom left, #E2E8E6 0%, #CDD3CD 100%), linear-gradient(to left, rgba(255, 255, 255, 0.12) 0%, rgba(0, 0, 0, 0.12) 100%);
  background-blend-mode: screen; 
}

.mirror {
  background: #C9CCD3;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: lighten; 
}

.autumn {
  background-image: -webkit-radial-gradient(27% 185%, #F9F6F1 0%, #D7D0C5 100%);
  background-image: radial-gradient(27% 185%, #F9F6F1 0%, #D7D0C5 100%); }

/*============================================================================================================

                Landingpage text - headline

=============================================================================================================*/

/* ============================
text only content
============================ */

.lp-text {
	padding:120px 0 140px 0;
    font-weight:bold;
	font-size: 28px;
}

.lp-text-title {
    font-weight:bold;
	font-size: 70px;
}

@media only screen and (max-width: 767px)
{

.lp-text {
	padding:80px 30px 100px 30px;
    font-weight:bold;
	font-size: 18px;
	text-align: left;
}

.lp-text-title {
    font-weight:bold;
	font-size: 60px;
}

}

/* ============================
content text color change
============================ */

.lp-text-c {
	padding:120px 0 40px 0;
    font-weight:bold;
	font-size: 20px;
}

.lp-text-c-mv {
	padding:120px 0 40px 0;
    font-weight:bold;
	font-size: 20px;
}

.lp-mv {
	padding:60px 0px 0px 0px;
}

.lp-text-title-c {
    font-weight:bold;
	font-size: 30px;
}

@media only screen and (max-width: 767px)
{

.lp-text-c {
	padding:140px 30px 40px 30px;
    font-weight:bold;
	font-size: 16px;
	text-align: left;
}

.lp-text-c-mv {
	padding:0px 30px 40px 30px;
    font-weight:bold;
	font-size: 16px;
	text-align: left;
}

.lp-mv {
	padding:50px 0px 60px 0px;
}

.lp-text-title-c {
    font-weight:bold;
	font-size: 26px;
}

}

/* ============================
content text color same
============================ */

.lp-text-s {
	padding:10px 0 40px 0;
    font-weight:bold;
	font-size: 20px;
}

.lp-text-title-s {
    font-weight:bold;
	font-size: 30px;
}

@media only screen and (max-width: 767px)
{

.lp-text-s {
	padding:20px 30px 40px 30px;
    font-weight:bold;
	font-size: 16px;
	text-align: left;
}

.lp-text-title-s {
    font-weight:bold;
	font-size: 26px;
}

}

/*============================================================================================================

                Landingpage BUY - headline

=============================================================================================================*/


.lp-buy-box {
	width: 100%;
	background-image: -webkit-linear-gradient(#DEDFE3 2%, #AEB3B9 95%), -webkit-radial-gradient(33% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
	background-image: linear-gradient(#DEDFE3 2%, #AEB3B9 95%), radial-gradient(33% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
	background-blend-mode: screen; 
	padding: 80px 0;
	font-weight: bold;
}

.lp-buy-border{
	width: 100%;
	margin: 0 auto;
}

.lp-buy-box .lp-buy-border {
	padding: 50px 0 30px 0;
	background: #fff;
	width: 90%;
	min-width: 767px;
	max-width: 1200px;
}

.lp-buy-box-min{
	min-width: 767px;
}

.lp-buy-space {
	margin: 0 auto;
}

.lp-buy-item {
	float: left;
	margin: 15px 0 0 0;
	padding: 0 10px 30px 50px;
	max-width: 120px;
}

.lp-buy-text {
	float: left;
	margin-bottom: 0;
	margin-left: 40px;
	margin-right: 0px;
	line-height: 60px;
}

.lp-buy-text-1 {
    font-weight:bold;
	font-size: 40px;
	padding: 0.1px 0;/*上下の余白*/
	border-bottom: solid 1px #333333;/*下線*/

}

.lp-buy-text-1s {
    font-weight:bold;
	font-size: 30px;
}

.lp-buy-text-2 {
    font-weight:bold;
	font-size: 60px;
}

.lp-buy-text-3 {
    font-weight:nomal;
	font-size: 24px;
}

.lp-buy-text-4 {
    font-weight:nomal;
	font-size: 24px;
	line-height:30px;
}

.lp-buy-text-5 {
    font-weight:nomal;
	font-size: 18px;
	line-height:28px;
	padding:10px 0 0 0;
}

.lp-buy-box dl {
	float: left;
	color: #55535b;
	margin-left: 40px;
}

.lp-buy-box dt {
	display: inline-block;
	padding: 10px 25px;
	font-size: 24px;
	text-align: center;
	background: #0d933a;
	color: #FFFFFF;
	float: left;
}

.lp-buy-box dd {
	font-size: 18px;
	text-align: left;
	float: left;
	margin-top: 5px;
	margin-left: 10px;
}

.lp-buy-area:after {
	content:" ";
	display:block;
	clear:both;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.lp-buy-box {
	width: 100%;
	background-image: -webkit-linear-gradient(#DEDFE3 2%, #AEB3B9 95%), -webkit-radial-gradient(33% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
	background-image: linear-gradient(#DEDFE3 2%, #AEB3B9 95%), radial-gradient(33% 100%, rgba(255, 255, 255, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
	background-blend-mode: screen; 
	padding: 5% 0;
	font-weight: bold;
}

.lp-buy-box .lp-buy-border {
	padding: 0 0;
	background: #fff;
	width: 90%;
	min-width: 10%;
}

.lp-buy-box-min{
	width: 100%;
	min-width: 10%;
}


.lp-buy-border{
	width: 100%;
	margin: 0 auto;
}

.lp-buy-space {
	width: 100%;
	margin: 0 auto;
	padding: 8% 0;
}

.lp-buy-item {
	margin: 0 auto 20px;
	padding: 0 0 0 0;
	max-width: 100px;
	float: none;
}

.lp-buy-item-w {
	margin: 0 auto 20px;
	padding: 0 0 0 0;
	max-width: 200px;
	float: none;
}

.lp-buy-text {
	float: none;
	margin-bottom: 0;
	margin-left: 0px;
	margin-right: 0px;
	text-align: center;
}

.lp-buy-text-1 {
    font-weight:bold;
	font-size: 34px;
	padding: 0.1px 0;/*上下の余白*/
	border-bottom: solid 1px #333333;/*下線*/
}

.lp-buy-text-1s {
    font-weight:bold;
	font-size: 18px;
}

.lp-buy-text-2 {
    font-weight:bold;
	font-size: 50px;
}

.lp-buy-text-5 {
    font-weight:nomal;
	font-size: 14px;
	line-height:24px;
	padding:20px 0 0 0;
}

.lp-buy-text img{
	max-width: 206px;
}

.lp-buy-box dl {
	color: #55535b;
	float: none;
	width: 95%;
	margin: 0 auto;
}

.lp-buy-box dt {
	display: inline-block;
	padding: 4% 0;
	margin: 20px 0 30px 0;
	width: 100%;
	text-align: center;
	background: #0d933a;
	color: #FFFFFF;
}

.lp-buy-box dd {
	text-align: left;
	margin-top: 10px;
	line-height: 1.5;
	font-weight: normal;
	float: none;
}

.lp-buy-area:after {
	content:" ";
	display:none;
	clear:none;
}

}

/*============================================================================================================

                Landingpage BUY BOTTON - headline

=============================================================================================================*/

/* ============================
lp-bt-box
============================ */

.lp-bt-box{
width:420px;
box-sizing: border-box;
float: right;
padding: 40px 75px 20px 0px;

}

.lp-bt-box ul{
margin: 0;
}

.lp-bt-box li{
display:inline;
margin: 0;
padding: 0;
}

.lp-bt-box li a{
display:block;
background-color:#000000;
padding: 24px 10px;
text-decoration:none;
color:#ffffff;
width: 100%;
margin:0;
text-align:center;
font-size:22px;
font-weight: 700;
border-radius: 50px;
box-sizing: border-box;
float: right;
cursor: pointer;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
-webkit-tap-highlight-color: transparent;
transition: .3s;
vertical-align:middle;
}

.lp-bt-box li a:hover{
background-color:#333333;
}

.bt__lp__icon {
vertical-align: middle;
  position: relative;
  top: -0.1em;
  left: 0.5em;
}

.lp-bt-icon {
  display: inline-block;
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  font-size:30px;
  line-height:30px;
  color: #FFFFFF;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =================================
tablet
================================= */
@media only screen and (max-width: 1199px)
{

.lp-bt-box{
width:420px;
box-sizing: border-box;
float: left;
padding: 30px 40px 20px 40px;
}

}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.lp-bt-box{
width:100%;
padding: 20px 10%;
}

.lp-bt-box li a{
background-color:#000000;
padding: 15px 10px;
text-decoration:none;
color:#ffffff;
width: 100%;
margin:0;
font-size:18px;
font-weight: 700;
border-radius: 50px;
box-sizing: border-box;
}

}



/*============================================================================================================

                Landingpage CARE - headline

=============================================================================================================*/

.lp-care-pad {
	padding: 120px 40px 30px 40px;
	max-width: 1058px;
	margin: 0 auto 0;
}

.lp-care-box {
	border: 7px solid #0d933a;
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
}

.lp-care-text-1 {
    font-weight:nomal;
	font-size: 30px;
	line-height:36px;
	text-align: center;
	padding:20px 0 20px 0;
}

.lp-care-text-2 {
    font-weight:nomal;
	font-size: 18px;
	line-height:28px;
	padding: 0px 0 40px 0;
	text-align: center;
}

.lp-care-box dl {
	color: #55535b;
}

.lp-care-box dt {
	padding: 20px 25px;
	font-size: 32px;
    font-weight:nomal;
	text-align: center;
	background: #0d933a;
	color: #FFFFFF;
	margin: 0 auto 0;
	width:140px;
}

.lp-care-box dd {
	font-size: 18px;
	text-align: left;
	margin-top: 5px;
}

.lp-care-title {
    display: flex;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
    font-weight:nomal;
	font-size: 24px;
	line-height:30px;
	padding: 40px 60px 30px 60px;
}

.lp-care-title:before,
.lp-care-title:after {
    border-top: 1px solid;
	border-color: #000000;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}

.lp-care-title:before {
    margin-right: 0.5em;
}

.lp-care-title:after {
    margin-left: 0.5em;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.lp-care-pad {
	padding: 60px 10px 20px 10px;
	max-width: 1058px;
	margin: 0 auto 0;
}

.lp-care-box {
	border: 10px solid #0d933a;
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
}

.lp-care-text-1 {
    font-weight:nomal;
	font-size: 28px;
	line-height:36px;
	text-align: center;
	padding:20px 0 20px 0;
}

.lp-care-text-2 {
    font-weight:nomal;
	font-size: 14px;
	line-height:24px;
	padding:0px 20px 40px 20px;
	text-align: left;
}

.lp-care-box dl {
	color: #55535b;
	float: none;

}

.lp-care-box dt {
	padding: 25px 25px;
	font-size: 30px;
    font-weight:nomal;
	text-align: center;
	background: #0d933a;
	color: #FFFFFF;
	margin: 0 auto 0;
}

.lp-care-box dd {
	text-align: left;
	margin-top: 10px;
	line-height: 1.5;
	font-weight: normal;
	float: none;
}

}


/*============================================================================================================

                Landingpage ITEM - headline

=============================================================================================================*/


#lp-item-area {
	padding: 0 40px 110px 40px;
}

#lp-item-box {
	width: 100%;
	max-width: 1058px;
	margin: 0 auto 0;
    overflow: hidden;
}


#lp-item-box ul{
list-style:none;
margin: 0 0 0 -2%;
}


#lp-item-box ul li{
float:left;
  padding: 0 0 20px 0 ;
  margin-left: 2%;
  width: -webkit-calc(100% / 2 - 2%);
  width: calc(100% / 2 - 2%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */

}

.lp-item-relative {
    position: relative;
    width: 100%;
	height: auto;
}

/* 古いIEで非対応 ---------------------
.lp-item-absolute {
	position: absolute;
	top: 50%;
	left: 12%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	-moz-transform: translateY(-50%) translateX(-50%);
	-o-transform: translateY(-50%) translateX(-50%);
	display:inline-block;
	width: 10%;
	z-index: 3;
}

.lp-item-text {
    position: absolute;
	top: 82%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	-moz-transform: translateY(-50%) translateX(-50%);
	-o-transform: translateY(-50%) translateX(-50%);
	display:inline-block;
    color: #fff;
    background: rgba(0,0,0,.6);
    width: 100%;
    padding: 1em 0;
    overflow: hidden;
	z-index: 2;
}
---------------------------------------*/

.lp-item-absolute {
	position: absolute;
	top: 6%;
	left: 8%;
	display:inline-block;
	width: 10%;
	z-index: 3;
}

.lp-bg-black {
    color: #fff;
    background: rgba(0,0,0,.6);
}

.lp-bg-gold {
    color: #fff;
    background: rgba(171,145,0,.6);
}

.lp-bg-pearlwhite {
    color: #fff;
    background: rgba(190,190,190,.6);
}

.lp-bg-silver {
    color: #fff;
    background: rgba(137,137,137,.6);
}

.lp-bg-pink {
    color: #fff;
    background: rgba(241,67,186,.6);
}

.lp-bg-blue {
    color: #fff;
    background: rgba(0,35,124,.6);
}

.lp-item-text {
    position: absolute;
	top: 73%;
	left: 0%;
	display:inline-block;
    width: 100%;
    padding: 0.7em 0;
    overflow: hidden;
	z-index: 2;
}

.lp-item-text p {
    margin: 0;
    padding: 0 0.8em;
    font-size: 100%;
    text-align: center;
}

.lp-item-text2 {
    padding: 10px 0 0 0;
}

.lp-item-bg {
	border-radius: 10px;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#lp-item-area {
	padding: 0 20px 20px 20px;
}

#lp-item-box {
	width: 100%;
	margin: 0 auto 0;
    overflow: hidden;
}

#lp-item-box ul li{
float:left;
  padding: 0 0 40px 0 ;
  margin-left: 2%;
  width: -webkit-calc(100% / 1 - 2%);
  width: calc(100% / 1 - 2%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */

}

.lp-item-absolute {
	position: absolute;
	top: 6%;
	left: 8%;
	display:inline-block;
	width: 10%;
	z-index: 3;
}

.lp-item-text {
    position: absolute;
	top: 73%;
	left: 0%;
	display:inline-block;
    width: 100%;
    padding: 0.5em 0;
    overflow: hidden;
	z-index: 2;
}

.lp-item-text p {
    margin: 0;
    padding: 0 0.8em;
    font-size: 100%;
    text-align: center;
}

.lp-item-bg {
	border-radius: 10px;
	width:100%;
}

}



/*============================================================================================================

                Landingpage USE - headline

=============================================================================================================*/

#lp-use-area {
	padding: 0 40px 110px 40px;
}

#lp-use-box {
	width: 100%;
	max-width: 800px;
	margin: 0 auto 0;
    overflow: hidden;
}


#lp-use-box ul{
list-style:none;
margin: 0 0 0 -2%;
}


#lp-use-box ul li{
float:left;
  margin-left: 2%;
  width: -webkit-calc(100% / 3 - 2%);
  width: calc(100% / 3 - 2%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
padding: 0 0 20px 0;
}

.lp-use-relative {
    position: relative;
    width: 100%;
	height: auto;
}

.lp-use-text {
    position: absolute;
	top: 5%;
	left: 5%;
    color: #fff;
    background: rgba(0,0,0,.3);
    padding: 0.5em 0.65em;
    overflow: hidden;
	z-index: 2;
	border-radius: 10px;
}

.lp-use-text p {
    margin: 0;
    font-size: 30px;
    text-align: center;
}

.lp-use-text2 {
    padding: 10px 0 0 0;
    text-align: left;
}

.lp-use-bg {
	border-radius: 10px;
}

.lp-use-title {
	padding: 10px 0 10px 0;
    font-size: 20px;
    text-align: center;
	font-weight: bold;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#lp-use-area {
	padding: 0 20px 20px 20px;
}

#lp-use-box {
	width: 100%;
	margin: 0 auto 0;
    overflow: hidden;
}

#lp-use-box ul li{
float:left;
  padding: 0 0 40px 0 ;
  margin-left: 2%;
  width: -webkit-calc(100% / 2 - 2%);
  width: calc(100% / 2 - 2%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */

}

.lp-use-text {
    position: absolute;
	top: 5%;
	left: 5%;
    color: #fff;
    background: rgba(0,0,0,.3);
    padding: 0.5em 0.7em;
    overflow: hidden;
	z-index: 2;
	border-radius: 10px;
}

.lp-use-text p {
    margin: 0;
    font-size: 24px;
    text-align: center;
}

.lp-use-bg {
	border-radius: 10px;
	width:100%;
}

}



/*============================================================================================================

                landingpage detail form  - headline

=============================================================================================================*/

#lp-post-content table{
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    display: block;
  }

#lp-post-content table tbody td {
  width: 100%;
  font-size: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: #ddd solid 1px;
}

#lp-post-content table tbody th {
  width: 100%;
  box-sizing: border-box;
  background: #fafafc;
  color: #000;
  text-align:center;
  padding: 8px 10px;
  border: #ddd solid 1px;
}

#lp-post-content tbody {
display:block;
}

#lp-post-content tr {
display:block;
}

#lp-post-content th {
display:block;
}

#lp-post-content td {
display:block;
}

.detail-list-flex ul{
margin:0;
padding:0;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

.detail-list-flex ul li{
list-style:none;
padding-bottom: 0rem;
margin-bottom: 0;
position: relative;
}

/*============================================================================================================

                Landingpage detail BT - headline

=============================================================================================================*/

.lp-detail-bt {
	max-width: 1184px;
	width:80%;
	text-align: center;
	margin:0 auto 0;
}

/*============================================================================================================

                商品詳細追加分 - headline

=============================================================================================================*/

/* =================================
予約受付
================================= */

.yoyaku {
	width:100%;
	text-align: center;
	font-size: 24px;
}



/*============================================================================================================

                important text - headline

=============================================================================================================*/

.important-text-pad {
	max-width: 1058px;
	margin: 0 auto 0;
}

.important-text-box {
	border: 7px solid #df328c;
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
}

.important-text-1 {
    font-weight:nomal;
	font-size: 20px;
	line-height:36px;
	text-align: center;
	padding:20px 0 20px 0;
}

.important-text-2 {
    font-weight:nomal;
	font-size: 14px;
	line-height:28px;
	padding:0px 20px 0px 20px;
	text-align: left;
}

.important-text-box dl {
	color: #55535b;
}

.important-text-box dt {
	padding:5px 10px;
	font-size: 16px;
	line-height: 36px;
    font-weight:nomal;
	text-align: center;
	background: #df328c;
	color: #FFFFFF;
	margin: 0 auto 0;
	width:140px;
}

.important-text-box dd {
	font-size: 18px;
	text-align: left;
	margin-top: 5px;
}

.important-text-title {
    display: flex;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
    font-weight:nomal;
	font-size: 24px;
	line-height:30px;
	padding: 40px 60px 30px 60px;
}

.important-text-title:before,
.important-text-title:after {
    border-top: 1px solid;
	border-color: #000000;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}

.important-text-title:before {
    margin-right: 0.5em;
}

.important-text-title:after {
    margin-left: 0.5em;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{
.important-text-pad {
	max-width: 1058px;
	margin: 0 auto 0;
}

.important-text-box {
	border: 10px solid #df328c;
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
}

.important-text-1 {
    font-weight:nomal;
	font-size: 24px;
	line-height:36px;
	text-align: center;
	padding:20px 0 20px 0;
}

.important-text-2 {
    font-weight:nomal;
	font-size: 12px;
	line-height:24px;
	padding:0px 20px 0px 20px;
	text-align: left;
}

.important-text-box dl {
	color: #55535b;
	float: none;

}

.important-text-box dt {
	padding: 0px 0px;
	font-size: 14px;
    font-weight:nomal;
	text-align: center;
	background: #0d933a;
	color: #FFFFFF;
	margin: 0 auto 0;
}

.important-text-box dd {
	text-align: left;
	margin-top: 10px;
	line-height: 1.5;
	font-weight: normal;
	float: none;
}

}

/*============================================================================================================

                important text box detail - headline

=============================================================================================================*/

.important-padding {
	padding: 10px 0 10px 0;
}

.important-text-box-detail {
	border: 1px solid #dddddd;
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
	border-radius: 10px;
}

.important-text-box-detail dl {
	color: #55535b;
}

.important-text-box-detail dt {
	padding:5px 10px;
	font-size: 20px;
	line-height: 36px;
    font-weight:nomal;
	text-align: center;
	background: #FFFFFF;
	color: #000000;
	margin: 0 auto 0;
	border-radius: 0px;
}

.important-text-box-detail dd {
	font-size: 18px;
	text-align: left;
	margin-top: 5px;
}

.important-text-1-detail {
    font-weight:nomal;
	font-size: 20px;
	line-height:36px;
	text-align: center;
	padding:0px 0 20px 0;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.important-padding {
	padding: 20px 10px 0 10px;
}

.important-text-box-detail {
	border: 1px solid #dddddd;
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
	border-radius: 10px;
}

.important-text-box-detail dl {
	color: #55535b;
	float: none;

}

.important-text-box-detail dt {
	padding: 0px 0px;
	font-size: 18px;
    font-weight:nomal;
	text-align: center;
	margin: 0 auto 0;
}

.important-text-box-detail dd {
	text-align: left;
	margin-top: 10px;
	line-height: 1.5;
	font-weight: normal;
	float: none;
}

.important-text-1-detail {
    font-weight:nomal;
	font-size: 20px;
	line-height:36px;
	text-align: center;
	padding:0px 0 20px 0;
}

}

/*============================================================================================================

                important2 text - headline

=============================================================================================================*/

.important2-text-pad {
	max-width: 1058px;
	margin: 0 auto 0;
}

.important2-text-box {
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
}

.important2-text-1 {
    font-weight:nomal;
	font-size: 20px;
	line-height:36px;
	text-align: center;
	padding:20px 0 20px 0;
}

.important2-text-2 {
    font-weight:nomal;
	font-size: 14px;
	line-height:28px;
	padding:0px 20px 0px 20px;
	text-align: left;
}

.important2-text-box dl {
	color: #55535b;
}

.important2-text-box dt {
	padding:0px 0px;
	font-size: 16px;
	line-height: 36px;
    font-weight:nomal;
	text-align: center;
	border: 3px solid #000000;
	color: #000000;
	margin: 0 auto 0;
	width:140px;
}

.important2-text-box dd {
	font-size: 18px;
	text-align: left;
	margin-top: 5px;
}

.important2-text-title {
    display: flex;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
    font-weight:nomal;
	font-size: 24px;
	line-height:30px;
	padding: 40px 60px 30px 60px;
}

.important2-text-title:before,
.important2-text-title:after {
    border-top: 1px solid;
	border-color: #000000;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}

.important2-text-title:before {
    margin-right: 0.5em;
}

.important2-text-title:after {
    margin-left: 0.5em;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{
.important2-text-pad {
	max-width: 1058px;
	margin: 0 auto 0;
}

.important2-text-box {
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
}

.important2-text-1 {
    font-weight:nomal;
	font-size: 24px;
	line-height:36px;
	text-align: center;
	padding:20px 0 20px 0;
}

.important2-text-2 {
    font-weight:nomal;
	font-size: 12px;
	line-height:24px;
	padding:0px 20px 0px 20px;
	text-align: left;
}

.important2-text-box dl {
	color: #55535b;
	float: none;

}

.important2-text-box dt {
	padding: 0px 0px;
	font-size: 14px;
    font-weight:nomal;
	text-align: center;
	background: #0d933a;
	color: #FFFFFF;
	margin: 0 auto 0;
}

.important2-text-box dd {
	text-align: left;
	margin-top: 10px;
	line-height: 1.5;
	font-weight: normal;
	float: none;
}

}

/*============================================================================================================

                landingpage detail form myModal  - headline

=============================================================================================================*/

.myModal-next-icon {
  display: inline-block;
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  font-size:18px;
  line-height:16px;
  color: #0d933a;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.myModal_nex__title__icon {
vertical-align: middle;
  position: relative;
  top: -0.1em;
}

.myModal_popUp,
input[name="myModal_switch"],
#myModal_open + label ~ label {
  display: none;
}

#myModal_open + label,
#myModal_close-button + label {
  cursor: pointer;
  color: #0d933a;
  font-size: 14px;
}

.myModal_popUp {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
#myModal_open:checked ~ #myModal_close-button + label{
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#myModal_open:checked + label ~ .myModal_popUp {
  background: #fff;
  display: block;
  width: 90%;
  height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 998;
      border-radius: 10px;
}

#myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
  width: calc(100% - 40px);
  height: calc(100% - 20px - 44px );
  padding: 10px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling:touch;
}

#myModal_open:checked + label + #myModal_close-overlay + label {
  background: rgba(0, 0, 0, 0.70);
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  z-index: 997;
}

#myModal_open:checked ~ #myModal_close-button + label {
  display: block;
  background: #fff;
  text-align: center;
  font-size: 25px;
  line-height: 44px;
  width: 90%;
  height: 44px;
  position: fixed;
  bottom: 10%;
  left: 5%;
  z-index: 999;
}

#myModal_open:checked ~ #myModal_close-button + label::before {
  content: '×';
}
#myModal_open:checked ~ #myModal_close-button + label::after {
  content: 'CLOSE';
  margin-left: 5px;
  font-size: 80%;
}

@media (min-width: 768px) {
  #myModal_open:checked + label ~ .myModal_popUp {
    width: 600px;
    height: 600px;
  }
  #myModal_open:checked + label ~ .myModal_popUp > .myModal_popUp-content {
    height: calc(100% - 20px);
  }
  #myModal_open:checked ~ #myModal_close-button + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 50%;
    margin-left: 240px;
    margin-top: -285px;
    overflow: hidden;
  }
  #myModal_open:checked ~ #myModal_close-button + label::after {
    display: none;
  }
}

    /*ボタンの装飾--------------*/

    #myModal_open:checked ~ #myModal_close-button + label {
      background: #000000;
      color: #fff;
      box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
      transition: .3s ;
    }

    /*ボタン共通
    /*
    #myModal_open + label,
    #myModal_open:checked ~ #myModal_close-button + label {
      background: #000000;
      color: #fff;
      box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
      transition: .3s ;
    }
    #myModal_open + label:hover,
    #myModal_open:checked ~ #myModal_close-button + label:hover {
      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
    }
*/
    /*開くボタン*/
    /*
    #myModal_open + label {  width: 120px;
      margin: 0 auto;
      padding: 5px 10px;
      text-align: center;
      display: block;
      font-size: 12px;
      color: #FFFFFF;
      letter-spacing: 1px;
      font-weight: bold;
      border-radius: 10px;
    }
*/

    /*閉じるボタン*/
    #myModal_open:checked ~ #myModal_close-button + label::before {
  content: "\f081";
  font-family: 'icomoon';
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  font-size:24px;
  line-height:24px;
  color: #FFFFFF;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    }

    @media (min-width: 768px) {
      #myModal_open:checked ~ #myModal_close-button + label::before {
        margin-right: 0;
      }
      #myModal_open:checked ~ #myModal_close-button + label {
        box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
        border-radius: 50%;
      }
    }

/*============================================================================================================

                landingpage detail form myModal2  - headline

=============================================================================================================*/

.myModal2-next-icon {
  display: inline-block;
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  font-size:18px;
  line-height:16px;
  color: #0d933a;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.myModal2_nex__title__icon {
vertical-align: middle;
  position: relative;
  top: -0.1em;
}

.myModal2_popUp,
input[name="myModal2_switch"],
#myModal2_open + label ~ label {
  display: none;
}

#myModal2_open + label,
#myModal2_close-button + label {
  cursor: pointer;
  color: #0d933a;
  font-size: 14px;
}

.myModal2_popUp {
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
#myModal2_open:checked ~ #myModal2_close-button + label{
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#myModal2_open:checked + label ~ .myModal2_popUp {
  background: #fff;
  display: block;
  width: 90%;
  height: 80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 998;
      border-radius: 10px;
}

#myModal2_open:checked + label ~ .myModal2_popUp > .myModal2_popUp-content {
  width: calc(100% - 40px);
  height: calc(100% - 20px - 44px );
  padding: 10px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling:touch;
}

#myModal2_open:checked + label + #myModal2_close-overlay + label {
  background: rgba(0, 0, 0, 0.70);
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  z-index: 997;
}

#myModal2_open:checked ~ #myModal2_close-button + label {
  display: block;
  background: #fff;
  text-align: center;
  font-size: 25px;
  line-height: 44px;
  width: 90%;
  height: 44px;
  position: fixed;
  bottom: 10%;
  left: 5%;
  z-index: 999;
}

#myModal2_open:checked ~ #myModal2_close-button + label::before {
  content: '×';
}
#myModal2_open:checked ~ #myModal2_close-button + label::after {
  content: 'CLOSE';
  margin-left: 5px;
  font-size: 80%;
}

@media (min-width: 768px) {
  #myModal2_open:checked + label ~ .myModal2_popUp {
    width: 600px;
    height: 600px;
  }
  #myModal2_open:checked + label ~ .myModal2_popUp > .myModal2_popUp-content {
    height: calc(100% - 20px);
  }
  #myModal2_open:checked ~ #myModal2_close-button + label {
    width: 44px;
    height: 44px;
    left: 50%;
    top: 50%;
    margin-left: 240px;
    margin-top: -285px;
    overflow: hidden;
  }
  #myModal2_open:checked ~ #myModal2_close-button + label::after {
    display: none;
  }
}

    /*ボタンの装飾--------------*/

    #myModal2_open:checked ~ #myModal2_close-button + label {
      background: #000000;
      color: #fff;
      box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
      transition: .3s ;
    }

    /*ボタン共通
    /*
    #myModal2_open + label,
    #myModal2_open:checked ~ #myModal2_close-button + label {
      background: #000000;
      color: #fff;
      box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
      transition: .3s ;
    }
    #myModal2_open + label:hover,
    #myModal2_open:checked ~ #myModal2_close-button + label:hover {
      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
    }
*/
    /*開くボタン*/
    /*
    #myModal2_open + label {  width: 120px;
      margin: 0 auto;
      padding: 5px 10px;
      text-align: center;
      display: block;
      font-size: 12px;
      color: #FFFFFF;
      letter-spacing: 1px;
      font-weight: bold;
      border-radius: 10px;
    }
*/

    /*閉じるボタン*/
    #myModal2_open:checked ~ #myModal2_close-button + label::before {
  content: "\f081";
  font-family: 'icomoon';
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  font-size:24px;
  line-height:24px;
  color: #FFFFFF;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    }

    @media (min-width: 768px) {
      #myModal2_open:checked ~ #myModal2_close-button + label::before {
        margin-right: 0;
      }
      #myModal2_open:checked ~ #myModal2_close-button + label {
        box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
        border-radius: 50%;
      }
    }

/*============================================================================================================

                landingpage main color  - headline

=============================================================================================================*/

/* グラデーション背景gradient-editor ---------------------*/

.bg-black {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#393939+0,555555+50,393939+100 */
background: #393939; /* Old browsers */
background: -moz-linear-gradient(top, #393939 0%, #555555 50%, #393939 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #393939 0%,#555555 50%,#393939 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #393939 0%,#555555 50%,#393939 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#393939', endColorstr='#393939',GradientType=0 ); /* IE6-9 */
}

.bg-gold {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b7a95d+0,e8df9e+50,b7a95d+100 */
background: #b7a95d; /* Old browsers */
background: -moz-linear-gradient(top, #b7a95d 0%, #e8df9e 50%, #b7a95d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b7a95d 0%,#e8df9e 50%,#b7a95d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b7a95d 0%,#e8df9e 50%,#b7a95d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7a95d', endColorstr='#b7a95d',GradientType=0 ); /* IE6-9 */
}

.bg-white {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e2ed+0,ffffff+50,e0e2ed+100 */
background: #e0e2ed; /* Old browsers */
background: -moz-linear-gradient(top, #e0e2ed 0%, #ffffff 50%, #e0e2ed 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e0e2ed 0%,#ffffff 50%,#e0e2ed 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e0e2ed 0%,#ffffff 50%,#e0e2ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e2ed', endColorstr='#e0e2ed',GradientType=0 ); /* IE6-9 */
}

.bg-silver {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bab7c9+0,e3e0ed+50,bab7c9+100 */
background: #bab7c9; /* Old browsers */
background: -moz-linear-gradient(top, #bab7c9 0%, #e3e0ed 50%, #bab7c9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #bab7c9 0%,#e3e0ed 50%,#bab7c9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #bab7c9 0%,#e3e0ed 50%,#bab7c9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bab7c9', endColorstr='#bab7c9',GradientType=0 ); /* IE6-9 */
}

.bg-pink {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ed97d4+0,fdbdea+50,ed97d4+100 */
background: #ed97d4; /* Old browsers */
background: -moz-linear-gradient(top, #ed97d4 0%, #fdbdea 50%, #ed97d4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ed97d4 0%,#fdbdea 50%,#ed97d4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ed97d4 0%,#fdbdea 50%,#ed97d4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed97d4', endColorstr='#ed97d4',GradientType=0 ); /* IE6-9 */
}

.bg-blue {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#01217e+0,1b42b6+50,01217e+100 */
background: #01217e; /* Old browsers */
background: -moz-linear-gradient(top, #01217e 0%, #1b42b6 50%, #01217e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #01217e 0%,#1b42b6 50%,#01217e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #01217e 0%,#1b42b6 50%,#01217e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#01217e', endColorstr='#01217e',GradientType=0 ); /* IE6-9 */
}


/* 単色背景 ---------------------
.bg-black {
    background-color: #4b4b4b;
}

.bg-gold {
    background-color: #cec179;
}

.bg-white {
    background-color: #ebedf6;
}

.bg-silver {
    background-color: #c1c1c1;
}

.bg-pink {
    background-color: #efa0d8;
}

.bg-blue {
    background-color: #0f34a1;
}
---------------------------------------*/


#lp-main-area {
	padding: 0 0px 0px 0px;
}

#lp-main-box {
	width: 100%;
	margin: 0 auto 0;
    overflow: hidden;
    background-color: #0f34a1;
}


#lp-main-box ul{
list-style:none;
	width: 100%;
margin: 0 0 0 0;

}


#lp-main-box ul li{
float:left;
  padding: 140px 0 140px 0 ;
  width: -webkit-calc(100% / 6 - 0.01% );
  width: calc(100% / 6 - 0.01% );
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 0.01% ) 0.01%はIEでずれるため */
}

.lp-main-relative {
    position: relative;
    width: 100%;
	height: auto;
}

.lp-main-bg {
    width: 45%;
  max-width: 85px;
	border-radius: 0px;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#lp-main-box ul li{
float:left;
  padding: 150px 0 120px 0 ;
  width: -webkit-calc(100% / 6 - 0.01% );
  width: calc(100% / 6 - 0.01% );
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 0.01% ) 0.01%はIEでずれるため */
}

.lp-main-bg {
    width: 67%;
	border-radius: 0px;
}

}

/*============================================================================================================

                landingpage list item color  - headline

=============================================================================================================*/

#lp-item2-area {
	padding: 0 40px 50px 40px;
}

#lp-item2-box {
	width: 100%;
	max-width: 1058px;
	margin: 0 auto 0;
}


#lp-item2-box ul{
list-style:none;
margin: 0 0 0 -2%;
}


#lp-item2-box ul li{
float:left;
  padding: 0 0 30px 0 ;
  margin-left: 2%;
  width: -webkit-calc(100% / 6 - 2.01%);
  width: calc(100% / 6 - 2.01%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

.lp-item2-relative {
    position: relative;
    width: 100%;
	height: auto;
}

.lp-item2-bg {
	border-radius: 0px;
    width: 50%;
  max-width: 65px;
}

.lp-item2-text-new {
  padding:0 0 10px 0;
}

.lp-item2-text-name {
    padding: 5px 0 0 0;
	font-size:11px;
	text-align: left;
}

.label-new-hidden{
  border: 1px solid #fff;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#lp-item2-area {
	padding: 0 20px 20px 20px;
}

#lp-item2-box {
	width: 100%;
	margin: 0 auto 0;
    overflow: hidden;
}

#lp-item2-box ul li{
float:left;
  padding: 0 0 20px 0 ;
  margin-left: 2%;
  width: -webkit-calc(100% / 4 - 2.01%);
  width: calc(100% / 4 - 2.01%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

.lp-item2-bg {
	border-radius: 0px;
    width: 37%;
}

.lp-item2-text-name {
    padding: 5px 0 0 0;
	font-size:11px;
}

}

/*============================================================================================================

                landingpage periodic  - headline

=============================================================================================================*/

#lp-periodic-area {
	padding: 110px 40px 0px 40px;
}

#lp-periodic-box {
	width: 100%;
	max-width: 1058px;
	margin: 0 auto 0;
}


/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#lp-periodic-area {
	padding: 40px 0px 0px 0px;
}

#lp-periodic-box {
	width: 100%;
	margin: 0 auto 0;
    overflow: hidden;
}

}


/*============================================================================================================

                lp-important text - headline

=============================================================================================================*/

.lp-important-text-pad {
	max-width: 1058px;
	margin: 0 auto 0;
}

.lp-important-text-box {
	border: 7px solid #0d933a;
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
}

.lp-important-text-1 {
    font-weight:nomal;
	font-size: 20px;
	line-height:36px;
	text-align: center;
	padding:20px 0 20px 0;
}

.lp-important-text-2 {
    font-weight:nomal;
	font-size: 14px;
	line-height:28px;
	padding:0px 20px 0px 20px;
	text-align: left;
}

.lp-important-text-box dl {
	color: #55535b;
}

.lp-important-text-box dt {
	padding:5px 10px;
	font-size: 16px;
	line-height: 36px;
    font-weight:nomal;
	text-align: center;
	background: #0d933a;
	color: #FFFFFF;
	margin: 0 auto 0;
	width:80%;
}

.lp-important-dt-title{
    font-size: 2.9rem;
}

.lp-important-text-box dd {
	font-size: 18px;
	text-align: left;
	margin-top: 5px;
}

.lp-important-text-title {
    display: flex;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
    font-weight:nomal;
	font-size: 24px;
	line-height:30px;
	padding: 40px 60px 30px 60px;
}

.lp-important-text-title:before,
.lp-important-text-title:after {
    border-top: 1px solid;
	border-color: #000000;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}

.lp-important-text-title:before {
    margin-right: 0.5em;
}

.lp-important-text-title:after {
    margin-left: 0.5em;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{
.lp-important-text-pad {
	max-width: 1058px;
	margin: 0 auto 0;
}

.lp-important-text-box {
	border: 10px solid #0d933a;
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
}

.lp-important-text-1 {
    font-weight:nomal;
	font-size: 24px;
	line-height:36px;
	text-align: center;
	padding:20px 0 20px 0;
}

.lp-important-text-2 {
    font-weight:nomal;
	font-size: 12px;
	line-height:24px;
	padding:0px 20px 0px 20px;
	text-align: left;
}

.lp-important-text-box dl {
	color: #55535b;
	float: none;

}

.lp-important-text-box dt {
	padding: 5px 5px;
	font-size: 14px;
    font-weight:nomal;
	text-align: center;
	background: #0d933a;
	color: #FFFFFF;
	margin: 0 auto 0;
}

.lp-important-dt-title{
    font-size: 2.4rem;
}

.lp-important-text-box dd {
	text-align: left;
	margin-top: 10px;
	line-height: 1.5;
	font-weight: normal;
	float: none;
}

}


/*============================================================================================================

                japan map shop  - headline

=============================================================================================================*/

.japan_map img{
    max-width: 100%;
    width: 100%;
}

.japan_map{
width: 96%;
padding:10px;
border:1px solid #ddd;

}

#search_map_left{
float:left;
width:65%;

}

#search_map_right{
float:left;
width:34%;

padding: 0 0 0 1%;
}

.search_box{
padding:10px;
border:1px solid #ddd;
}

.searchOn .btMain{
float:none;
padding: 11px 20px 11px 20px;
}

/* =================================
smartphone tablet
================================= */

@media (max-width: 979px) {

.japan_map{
width: 90%;
margin:0 auto 0;
}

#search_map_left{
float:none;
width:100%;
height: auto;
}

#search_map_right{
float:none;
width:93%;
height: auto;
margin:0 auto 0;
padding: 30px 0 0px 0;
}



}


/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.japan_map{
width: 98%;
padding:0px;
border:none;
margin:0 auto 0;
}


}

/* =================================
icon
================================= */
.search-pc-icon {
  display: inline-block;
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  font-size:22px;
  line-height:16px;
  color: #000000;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.search_pc__title__icon {
vertical-align: middle;
  position: relative;
  top: -0.1em;
}

/*============================================================================================================

                shop detail  - headline

=============================================================================================================*/

.shop_detail {
    padding: 0px 25px 0px 0;
}

.shop_detail article {
    padding: 10px 25px 10px 0;
    border-bottom: 1px #ddd solid;
    background-color: #fff;
    display: block;
}

.shop_detail article > div {
    border-left: 5px #0d933a solid;
    padding-left: 10px;
}

.shop_detail article h3 {
    font-size: 20px;
    padding: 10px 0;
    border: none;
    background: none;
    color: #000;
}

.mapOn .btMain{
float:left;
padding: 3px 12px 1px 7px;
}

.next-link-icon {
  display: inline-block;
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  text-transform: none;
  font-size:19px;
  line-height:24px;
  color: #FFFFFF;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.next_link__title__icon {
vertical-align: middle;
  position: relative;
  top: -0.05em;
}

.shopbackOn .btMain{
float:none;
background-color: #b2b2b2;
padding: 11px 25px 11px 25px;
}

/*============================================================================================================

                column1  - headline

=============================================================================================================*/

#column1_center{
float:center;
width:100%;

}

padding: 0 0 0 0;
}

/* =================================
smartphone tablet
================================= */

@media (max-width: 767px) {

#column1_center{
float:none;
width:100%;
height: auto;
}

}

/*============================================================================================================

                lp column1  - headline

=============================================================================================================*/
.lp-column1 {
	padding: 0px 0px 0px 0px;
	max-width: 1058px;
	margin: 0 auto 0;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.lp-column1 {
	padding: 0px 0px 0px 0px;
	max-width: 1058px;
	margin: 0 auto 0;
}

}

/*============================================================================================================

                column2  - headline

=============================================================================================================*/

#column2_left{
float:left;
width:50%;

}

#column2_right{
float:left;
width:50%;

padding: 0 0 0 0;
}

/* =================================
smartphone tablet
================================= */

@media (max-width: 767px) {

#column2_left{
float:none;
width:100%;
height: auto;
}

#column2_right{
float:none;
width:100%;
height: auto;
margin:0 auto 0;
padding: 0px 0 0px 0;
}

}

/*============================================================================================================

                lp column2  - headline

=============================================================================================================*/
.lp-column2 {
	padding: 0px 0px 0px 0px;
	max-width: 1058px;
	margin: 0 auto 0;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.lp-column2 {
	padding: 0px 0px 0px 0px;
	max-width: 1058px;
	margin: 0 auto 0;
}

}

/*============================================================================================================

                index column2  - headline

=============================================================================================================*/
.index-column2 {
	padding: 0px 0px 0px 0px;
	max-width: 1112px;
	width: 84%;
	margin: 0 auto 0;
}


/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.index-column2 {
	padding: 0px 0px 0px 0px;
	width: 92%;
	margin: 0 auto 0;
}

}


/* =================================
main-img-box
================================= */
.main-area-box{
border-top: 1px solid #000;
}

.main-img-box{
padding: 40px 0 50px 0;
}

.main-img-title{
marign: 0 auto 0;
text-align: center;
font-size: 39px;
line-height: 55px;
font-weight: bold;
}

.main-img-title strong{
 font-size: 24px;
}

.main-img-box2{
padding: 0px 0px 70px 0;
}

.column-box-text-center{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-evenly;
align-items: center;
}

.column-box-text{
font-size: 16px;
line-height: 26px;
padding: 20px;
}

.main-img-detail{
font-size: 22px;
line-height: 30px;
font-weight: bold;
}

.main-detail-title{
 font-size: 40px;
line-height: 55px;
font-weight: bold;
}

.main-detail-kana{
 font-size: 14px;
line-height: 23px;
}

.main-detail-text{
 font-size: 16px;
line-height: 26px;
padding: 20px 40px 0 40px ;
}

.main-detail-list{
 font-size: 16px;
 line-height: 26px;
 padding: 40px 0 0 0 ;
}

.main-detail-border-top{
 border-top: 1px solid #000;
 padding: 16px;
 width: 80%;
 margin: 0 auto 0;
}

.main-detail-border-bottom{
 border-top: 1px solid #000;
 border-bottom: 1px solid #000;
 padding: 16px;
 width: 80%;
 margin: 0 auto 0;
}

.main-detail-bt-box{
flex-direction: row;
display: flex;
justify-content: center;
align-items: center;
gap: 5%;
}

.main-detail-price{

}

.main-detail-cart{
display: block;
}

.main-detail-add-cart{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
cursor: pointer;
position: relative;
display: inline-block;
font: 12px/1 ITCAvantGardeStd-Demi,sans-serif;
min-width: 10.625rem;
padding: 1.125rem .75rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: background-color .25s ease-out,color .25s ease-out;
transition: background-color .25s ease-out,color .25s ease-out;
vertical-align: middle;
letter-spacing: .0625rem;
background-color: #000;
border: 1px solid transparent;
color: #fff
}

.main-detail-btn{
color: #fff
background-color: #000;
display: block;
}

.main-detail-add-cart-lp{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 60px;
cursor: pointer;
position: relative;
display: inline-block;
font: 24px/1 ITCAvantGardeStd-Demi,sans-serif;
min-width: 240px;
padding: 20px 20px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
-webkit-transition: background-color .25s ease-out,color .25s ease-out;
transition: background-color .25s ease-out,color .25s ease-out;
vertical-align: middle;
letter-spacing: .0625rem;
background-color: #000;
border: 1px solid transparent;
color: #fff
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{
.main-img-title{
font-size: 22px;
line-height: 28px;
}

.main-img-title strong{
 font-size: 16px;
 font-weight: bold;
}

.main-img-box2{
padding: 0px 0px 60px 0;
}

.column-box-text-center{
display: inline;
justify-content: space-evenly;
align-items: center;
}

.column-box-text{
font-size: 13px;
line-height: 24px;
padding: 40px 0 40px 0;
}

}



/*============================================================================================================

                column3  - headline

=============================================================================================================*/

#column3_left{
float:left;
width:33.3%;

}

#column3_center{
float:left;
width:33.3%;

}

#column3_right{
float:left;
width:33.3%;

padding: 0 0 0 0;
}

/* =================================
smartphone tablet
================================= */

@media (max-width: 767px) {

#column3_left{
float:none;
width:100%;
height: auto;
}

#column3_center{
float:none;
width:100%;
height: auto;
}

#column3_right{
float:none;
width:100%;
height: auto;
margin:0 auto 0;
padding: 0px 0 0px 0;
}

}

/*============================================================================================================

                lp column3  - headline

=============================================================================================================*/
.lp-column3 {
	padding: 0px 0px 0px 0px;
	max-width: 1058px;
	margin: 0 auto 0;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.lp-column3 {
	padding: 0px 0px 0px 0px;
	max-width: 1058px;
	margin: 0 auto 0;
}

}



/*============================================================================================================

                stampcard  - headline

=============================================================================================================*/

.stamp-text-c {
    font-weight:bold;
	font-size: 18px;
}

.stamp-text-title-c {
    font-weight:bold;
	font-size: 24px;
}

@media only screen and (max-width: 767px)
{

.stamp-text-c {
    font-weight:bold;
	font-size: 16px;
	text-align: left;
}

.stamp-text-title-c {
    font-weight:bold;
	font-size: 26px;
}

}

/* =================================
stamp12
================================= */

#stamp-item-area {

}

#stamp-item-box {
	width: 65%;
	max-width: 1058px;
	margin: 0 auto 0;
}


#stamp-item-box ul{
list-style:none;
}


#stamp-item-box ul li{
float:left;
  width: -webkit-calc(100% / 6);
  width: calc(100% / 6);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

.stamp-item-relative {
    position: relative;
    width: 100%;
	height: auto;
}

.stamp-item-bg {
	border-radius: 0px;
    width: 50%;
  max-width: 65px;
}

.stamp-item-text-new {
  padding:0 0 10px 0;
}

.stamp-item-text-name {
    padding: 5px 0 0 0;
	font-size:11px;
	text-align: left;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#stamp-item-area {
}

#stamp-item-box {
	width: 100%;
	margin: 0 auto 0;
    overflow: hidden;
}

#stamp-item-box ul li{
float:left;
  width: -webkit-calc(100% / 4);
  width: calc(100% / 4);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

.stamp-item-bg {
	border-radius: 0px;
    width: 37%;
}

.stamp-item-text-name {
    padding: 5px 0 0 0;
	font-size:11px;
}

}

/* =================================
stamp text
================================= */

#stamp-text-area {

}

#stamp-text-box {
	width: 65%;
	max-width: 1058px;
	margin: 0 auto 0;
}


#stamp-text-box ul{
list-style:none;
}


#stamp-text-box ul li{
float:left;
border: 1px solid #e5e5e5;
padding: 5px 5px 5px 5px;
  width: -webkit-calc(100% / 3 - 12px);
  width: calc(100% / 3 - 12px);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#stamp-text-area {
	margin: 0 auto 0;
	text-align: center;
}

#stamp-text-box {
	width: 100%;
	margin: 0 auto 0;
    overflow: hidden;
}

#stamp-text-box ul li{
float:left;
border: 1px solid #e5e5e5;
padding: 5px 5px 5px 5px;
  width: -webkit-calc(100% / 3 - 12px);
  width: calc(100% / 3 - 12px);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

}

/*============================================================================================================

                landingpage list item color  - headline

=============================================================================================================*/

#present-area {
	padding: 0 40px 50px 40px;
}

#present-box {
	width: 100%;
	max-width: 1058px;
	margin: 0 auto 0;
}


#present-box ul{
list-style:none;
margin: 0 0 0 -2%;
}


#present-box ul li{
float:left;
  padding: 0 0 30px 0 ;
  margin-left: 2%;
  width: -webkit-calc(100% / 6 - 2.01%);
  width: calc(100% / 6 - 2.01%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

.present-relative {
    position: relative;
    width: 100%;
	height: auto;
}

.present-bg {
	border-radius: 0px;
    width: 50%;
  max-width: 65px;
}

.present-text-new {
  padding:0 0 10px 0;
}

.present-text-name {
    padding: 5px 0 0 0;
	font-size:11px;
	text-align: left;
}

.label-new-hidden{
  border: 1px solid #fff;
}

/* =================================
tablet
================================= */
@media only screen and (max-width: 979px)
{

#present-area {
	padding: 0 20px 20px 20px;
}

#present-box {
	width: 100%;
	margin: 0 auto 0;
    overflow: hidden;
}

#present-box ul li{
float:left;
  padding: 0 0 20px 0 ;
  margin-left: 2%;
  width: -webkit-calc(100% / 4 - 2.01%);
  width: calc(100% / 4 - 2.01%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

.present-bg {
	border-radius: 0px;
    width: 37%;
}

.present-text-name {
    padding: 5px 0 0 0;
	font-size:11px;
}

}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#present-area {
	padding: 0 20px 20px 20px;
}

#present-box {
	width: 100%;
	margin: 0 auto 0;
    overflow: hidden;
}

#present-box ul li{
float:left;
  padding: 0 0 20px 0 ;
  margin-left: 2%;
  width: -webkit-calc(100% / 3 - 2.01%);
  width: calc(100% / 3 - 2.01%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

.present-bg {
	border-radius: 0px;
    width: 37%;
}

.present-text-name {
    padding: 5px 0 0 0;
	font-size:11px;
}

}

/*============================================================================================================

                background_attachment

=============================================================================================================*/

.bg_attachment_fixed {
  position: relative;
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  z-index: 50;
}

.bg_attachment_fixed .bg_attachment_fixed-content {
  position: absolute;
  left:72%;
  top: 48%;
  bottom: auto;
  right: auto;
  width: 100%;
  margin: 0 auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.bg-att-img {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url('../img/landingpage/1/main_bg3_pc.jpg');
    background-size: cover;
    width: 100%;
    height: 933px;
    padding-top: 66.6%;
/*  padding-top:画像の高さ ÷ 画像の幅 × 100 */
}

.bg-att-padding {
  padding:30px 30px 0 30px;
}

.bg-att-img5 {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url('../img/landingpage/1/main_bg5_pc.jpg');
    background-size: cover;
    width: 100%;
    height: 933px;
    padding-top: 66.6%;
/*  padding-top:画像の高さ ÷ 画像の幅 × 100 */
}

/* =================================
smartphone tablet
================================= */
@media (max-width: 979px) {

.bg_attachment_fixed .bg_attachment_fixed-content {
  position: absolute;
  left:72%;
  top: 48%;
  bottom: auto;
  right: auto;
  width: 100%;
  margin: 0 auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.bg-att-padding {
  padding:30px 30px 0 30px;
}

}

/* =================================
smartphone
================================= */

@media (max-width: 767px) {

  .bg-att-img {
    width: 100%;
    background: url('../img/landingpage/1/main_bg3_sp.jpg') no-repeat center center;
background-size:cover;
  }

  .bg-att-img5 {
    width: 100%;
    background: url('../img/landingpage/1/main_bg5_sp.jpg') no-repeat center center;
background-size:cover;
  }

  .bg_attachment_fixed {
    background-attachment: scroll;
  min-height: 100vh;
  }

.bg_attachment_fixed .bg_attachment_fixed-content {
  position: absolute;
  left:50%;
  top: 55%;
  bottom: auto;
  right: auto;
  width: 100%;
  margin: 0 auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.bg-att-padding {
  padding:30px 30px 30 30px;
}

}

/*============================================================================================================

                Product introduction  - headline

=============================================================================================================*/

#product-item-area {
	padding: 0 40px 50px 40px;
}

#product-item-box {
	width: 100%;
	max-width: 1058px;
	margin: 0 auto 0;
}


#product-item-box ul{
list-style:none;
margin: 0 0 0 -2%;
}


#product-item-box ul li{
float:left;
  padding: 0 0 30px 0 ;
  margin-left: 2%;
  width: -webkit-calc(100% / 2 - 2.01%);
  width: calc(100% / 2 - 2.01%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

.product-item-relative {
    position: relative;
    width: 100%;
	height: auto;
}

.product-item-bg {
	border-radius: 0px;
    width: 50%;
  max-width: 65px;
}

.product-item-text-new {
  padding:0 0 10px 0;
}

.product-item-text-name {
    padding: 5px 0 0 0;
	font-size:11px;
	text-align: left;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#product-item-area {
	padding: 0 20px 20px 20px;
}

#product-item-box {
	width: 100%;
	margin: 0 auto 0;
    overflow: hidden;
}

#product-item-box ul li{
float:left;
  padding: 0 0 20px 0 ;
  margin-left: 2%;
  width: -webkit-calc(100% / 2 - 2.01%);
  width: calc(100% / 2 - 2.01%);
/*  (100% / 2 - 2%) 2で2BOX、3で3BOX 自動計算 */
/*  (100% / 6 - 2.01%) 2.01%はIEでずれるため */
}

.product-item-bg {
	border-radius: 0px;
    width: 37%;
}

.product-item-text-name {
    padding: 5px 0 0 0;
	font-size:11px;
}

}

/*============================================================================================================

                landingpage content  - headline

=============================================================================================================*/

.lp-content-area {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto 0;
}

.lp-movie-1box {
	width: 768px;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.lp-movie-1box {
	width: 100%;
}

}

/*============================================================================================================

                news - headline

=============================================================================================================*/

.title2{
font-size: 24px;
text-align: center;
max-width: 1120px;
width:90%;
background-color:#333333;
border:#333333 1px solid;
color: #ffffff;
margin: 0 auto 0;
padding: 16px 0px;
}

.infobox{
max-width: 1120px;
width:90%;
height:9.3em;
overflow:auto;
border:#333333 1px solid;
background-color:#fff;
margin: 0 auto 0;
}

.news-title{
font-size:calc(10px + .25vw);
padding:10px 20px 10px 20px
}

.date_m{
margin-right:16px
}

.newsline{
width:96%
}

hr.infostyle{
			display: block;
            border-top: 1px dashed #aaaaaa;
			width: 97%;
			margin: 0 auto 0;
}

.notice-box-index{
max-width: 1120px;
background-color:#eeeeee;
margin: 0 auto 0;
}

.title-notice{
font-size: 24px;
text-align: center;
max-width: 1120px;
width:90%;
color: #ffffff;
background-color:#333333;
border:#333333 1px solid;
margin: 0 auto 0;
padding: 16px 0px;
}

.notice-box2{
max-width: 1120px;
width:90%;
overflow:auto;
border:#333333 1px solid;
background-color:#eeeeee;
margin: 0 auto 0;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.notice-pb{
padding: 0 0 30px 0;
}

}

/*============================================================================================================

                レビューページ項目 - headline

=============================================================================================================*/

.paginate{
  display:block;
  text-align:center;
}

.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: inline-flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
  margin: 10px 0;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.6rem 1.2rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #000;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-link:hover {
  color: #ffffff;
  text-decoration: none;
  background-color: #000000;
  border-color: #000000;
}

.page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.page-link:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.page-item{
  margin:0 1rem;

}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #000;
  border-color: #000;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #dee2e6;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

/*============================================================================================================

                landingpage teiki  - headline

=============================================================================================================*/

.lp-teiki-head-bg{
background-color:#000000;
}

.lp-teiki-head{
margin: 0 auto 0;
max-width:1200px;
}

#lp-periodic-area2 {
	padding: 60px 40px 0px 40px;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#lp-periodic-area2 {
	padding: 40px 0px 0px 0px;
}

}

/*============================================================================================================

                サイドありメインimg角丸なし用  - headline

=============================================================================================================*/
.expalin-no-radius {
  width: 804.994px;
  float: right;
}

@media (min-width: 980px) and (max-width: 1200px) {
.smaller-container .row .expalin-no-radius,.expalin-no-radius {
width: 700px;
}
}

/* =================================
smartphone tablet
================================= */
@media (max-width: 979px) {

  #contentBody .row .expalin-no-radius{
    width: 100%;
    margin-left: 0;
  }
}


/*============================================================================================================

                WEBページVIDEOタグ用 video-cover  - headline

=============================================================================================================*/

/* video-cover-text */
.video-cover-text{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-cover-text .main-copy{
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  letter-spacing: .2em;
}

.video-cover-text .sub-copy{
  color: #fff;
  font-size: 20px;
  text-align: center;
}

/* video */
.video-cover{
  width: 100%;
  height: 100vh;
  background: url(../img/landingpage/14/web_club.jpg) no-repeat center/cover;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

/*=========
.video-cover::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #10394b;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}
==========*/

.video-cover video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (min-width: 768px) {
  /* video-cover-text */
  .video-cover-text{
    min-width: 960px;
  }

  .video-cover-text .main-copy{
    font-size: 60px;
  }

  .video-cover-text .sub-copy{
    font-size: 30px;
  }

  /* video */
  .video-cover{
    min-width: 960px;
  }
}

/*============================================================================================================

                WEBページYouTubeタグ用 「id」web-youtube  - headline

=============================================================================================================*/

/* YouTube */
#youtube-area{
/*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
}

/*=========
#youtube-area::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #10394b;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}
==========*/

/* YouTube */
#youtube-area2{
/*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
}

/*=========
#youtube-area2::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #10394b;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}
==========*/

/* YouTube */
#youtube-area3{
/*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
}

/*=========
#youtube-area3::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #10394b;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}
==========*/

/* YouTube */
#youtube-area4{
/*天地中央配置*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*縦横幅指定*/
  width: auto;
  height: auto;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
}

/*=========
#youtube-area4::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #10394b;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}
==========*/

/*============================================================================================================

                WEB動画矢印  - headline
説明：height: 100vh;は画面全体表示、top: calc(100% - 58px);はtopから100%なので一番下配置を意味する。
-50pxは上に50px上げることを意味する。全画面に対し、一番下から50px上げた場所という指定。
横指定のleft: calc(50% - 90px);は画面を見て調整する。
中央ロゴを配置しない場合は横指定の-110pxは矢印サイズ40pxの半分の-20pxほどで良い。

=============================================================================================================*/

.web_movie_arrows *, .web_movie_arrows *:before, .web_movie_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.web_movie_arrows {
	position: relative;
	display: flex;
	height: 100vh;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.web_movie_arrows .web_movie_arrow,
.web_movie_arrows .web_movie_arrow:before {
	position: absolute;
	left: calc(50% - 90px);
	content: '';
}
.web_movie_arrows .web_movie_arrow {
	top: calc(100% - 10%);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);

}
.web_movie_arrows .web_movie_arrow:before {
	top: calc(100% - 10%);
	width: 40px;
	height: 40px;
	-webkit-animation: arrow-move10 2s infinite ease-in-out;
	animation: arrow-move10 2s infinite ease-in-out;
	border-width: 0 2px 2px 0;
	border-style: solid;
	border-color: transparent #df328c #df328c transparent;
}
@-webkit-keyframes arrow-move10 {
	0% {
		opacity: 0.3;
	}
	5% {
		opacity: 1;
	}
	100% {
		transform: translate(8px, 8px);
		opacity: 0;
	}
}
@keyframes arrow-move10 {
	0% {
		opacity: 0.3;
	}
	5% {
		opacity: 1;
	}
	100% {
		transform: translate(8px, 8px);
		opacity: 0;
	}
}

/*============================================================================================================

                LPボタン  - headline

=============================================================================================================*/

	.lp-btn-box {
	max-width: 1184px;
	width:60%;
	text-align: center;
	margin:0 auto 0;
	}

/* =================================
smartphone tablet
================================= */
@media (max-width: 979px) {

	.lp-btn-box {
	width:70%;
	}
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{
	.lp-btn-box {
	width:80%;
	}
}


  .lp-btn-white-on{
    background-color: #ffffff;
	display: block;
  }

  .lp-btn-white-on:hover img{
	opacity: 0.7;
	transition: 500ms;
	cursor: pointer;
  }

/*============================================================================================================

                MP4動画スマホ縮小全表示版  - headline

=============================================================================================================*/


.mv-slid {

	width: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	/* height: calc(100vh - 90px); */

}

#mv-tab {

	width: 100%;

	height: 100%;

	position: relative;

}


@media (max-width: 900px) {
	.mv-sliders {

		top: 15vw;

	}

	.mv-sliders a {

		font-size: 15px;

	}
}


@media (max-width: 1200px) {
	.mv-sliders {

		top: 13vw;

	}
}

.mv-sliders {

	position: absolute;

	width: 100%;

	left: 0px;

	top: 9.564vw;

	z-index: 5;

}

.wrap-mvView {

	width: 100%;

	position: relative;

	z-index: 0;

}

.wrap-mvView>div {

	position: absolute;

	left: 0;

	top: 0;

	width: 100%;

}



.wrap-mvView,

.wrap-mvView>div {

	height: 57.331vw;

}

.slide-mv-index {

	position: absolute;

	left: 0;

	top: 0;

	background-size: cover;

	background-position: center center;

}

video,audio,canvas {
    display: inline-block;
    *display: inline;
    *zoom:1}

audio:not([controls]) {
    display: none
}

video {
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
}

/*============================================================================================================

                WEBルーレット（動画再生ボタン）  - headline

=============================================================================================================*/


.roulette video {
  width: 40%;
  height: auto;
  margin: 0 auto 0
}


/* =================================
smartphone tablet
================================= */
@media (max-width: 1039px) {

.roulette video {
  width: 50%;
  height: auto;
}
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{
.roulette video {
  width: 100%;
  height: auto;
}
}


.roulette {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

/* =================================　※再生ボタン付き(ul li)
ul.roulette video {
  background: rgb(255,255,255,0);
  width: 100%;
  height: auto;
}
ul.roulette li {
  width: 23.6%;
  margin-bottom: 24px;
  position: relative;
  padding: 0;
}
ul.roulette {
  display: flex;
  justify-content: space-between;
  list-style: none;
}
ul.roulette li::before {
  content: "\f04b";
  font-weight: 900;
  color: #fff;
  font-size: 40px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
ul.roulette li.noplay::before {
  content: "";
  animation: removing 1s both;
}
@keyframes removing {
  from {
    content: "\f04c";
  }
}
@media screen and (max-width: 928px) {
  ul.roulette li.noplay::before,
  ul.roulette li::before {
    content: "";
  }
}
@-moz-document url-prefix() {
  ul.roulette li.noplay::before,
  ul.roulette li::before {
    content: "";
  }
}
.fas {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Free",sans-serif;
  font-weight: 900;
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.eot");
  src: url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff2") format("woff2"),url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.woff") format("woff"),url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.ttf") format("truetype"),url("//use.fontawesome.com/releases/v5.11.2/webfonts/fa-solid-900.svg#fontawesome") format("svg")
}
================================= */

/*============================================================================================================

                リセットボタン  - headline

=============================================================================================================*/

	.reset-btn-area {
	width:40%;
	text-align: center;
	margin:0 auto 0;
	}

	.reset-btn-box {
	width:90%;
	margin:0 auto 0;
	padding: 10px 0 60px 0;
	}

/* =================================
smartphone tablet
================================= */
@media (max-width: 1039px) {

	.reset-btn-area {
	width:50%;
	}

	.reset-btn-box {
	width:80%;
	}
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

	.reset-btn-area {
	width:100%;
	}

	.reset-btn-box {
	width:80%;
	}
}


  .reset-btn-white-on{

	display: block;
  }

  .reset-btn-white-on:hover img{
	opacity: 0.7;
	transition: 500ms;
	cursor: pointer;
  }


/*============================================================================================================

                ルーレットムービー【採用版】【再生／停止ボタン配置】  - headline

=============================================================================================================*/

/*CSS*/
#movie {
  width:100%;
  height:auto;
  position:relative;
}
#movie::before {
  display:block;
  content:'';
  width:100%;height:0;
  padding-top:56.25%; /* ※1)ココがアスペクト比（縦横比）*/
}
#movie video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;top:0;left:0;right:0;bottom:0;
}
#roulette-movie-button {
  width:300px;height:300px;
  position:absolute;left:20px;bottom:40px;/*親要素に対する位置指定*/
  cursor:pointer;/*カーソルを指に変更*/
  z-index:1;
}
.roulette-movie-button {
  display:flex;justify-content:center;align-items:center;/*#video-buttonの中央に配置*/
}
.roulette-movie-button span {
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:#CF000F;font-size:1.2rem;
}
.roulette-movie-button span i {
  font-size:2.6vw;/*アイコンの大きさを指定*/
}


/* =================================
pc
================================= */
#roulette-movie-button {
  width:138px;
  position:absolute;left:53.4%;top:426px;/*親要素に対する位置指定*/
  cursor:pointer;/*カーソルを指に変更*/
  z-index:1;
}

/* =================================
smartphone tablet
================================= */
@media (max-width: 1039px) {

#roulette-movie-button {
  width:16.5%;
  position:absolute;left:58%;top:51vw;/*親要素に対する位置指定*/
  cursor:pointer;/*カーソルを指に変更*/
  z-index:1;
}

}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

#roulette-movie-button {
  width:33.5%;
  position:absolute;left:65%;top:102vw;/*親要素に対する位置指定*/
  cursor:pointer;/*カーソルを指に変更*/
  z-index:1;
}

}


/*============================================================================================================

                マインドゲーム40出演者  - headline

=============================================================================================================*/
/* =================================
pc
================================= */
.syokai {
  width:40%;
  text-align: left;
}

/* =================================
smartphone
================================= */
@media only screen and (max-width: 767px)
{

.syokai {
  width:80%;
  text-align: center;
  margin: 0 auto 0;
}

}