@charset "UTF-8";

#echire {
  max-width: 980px;
  width: 100%;
  margin: 0 auto 30px;
  text-align: center;
}
#echire img {
  width: 100%;
}
#echire .header{
  margin-bottom: 40px;
}
#echire .header .title-h1{
  margin: 0 auto;
}
#echire .inner {
  padding: 0 20px 50px;
}
#echire .header .title-h2 {
  position: relative;
  margin-bottom: 50px;
  padding-top: 60px;
  font-size: 2.5rem;
  line-height: 1.5;
  color: #006eb1;
  letter-spacing: 0.05em;
  font-weight: 400;
  text-align: center;
}
#echire .header p {
  margin: 15px;
  text-align: center;
}
/*商品紹介*/
#echire .product-section {
  text-align: left;
  background: #e5e5e5;
  padding: 15px 40px;
  margin-bottom: 50px;
}

#echire.reward .product-section{
  background: #210f0f;
}
#echire .product-section .c-title__global {
  padding: 0;
}
#echire .recommender {
  display: flex;
  gap: 0 50px;
  align-items: center;
  padding: 40px 46px;
}
#echire .recommender::after{
  display:none;
}
.recommender .product-img {
  width: 30%;
}
.recommender .product-img img {
  height: 100%;
  border-radius: 50%;
  border: 3px #191919 solid; /* 外枠 */
  padding:6px;
  background: #fff; /* 内枠 */
  box-sizing: border-box;
}
.reward .recommender .product-img img{
  border: 3px #e2b866 solid;
}
#echire .recommender .product-ex-area{
  width: calc((100% - 50px) - 30%);
}
#echire.reward .product-section .product-ex-area{
  color: #fff;
}
#echire .recommender .product-ex-area .product-name {
  font-weight: 600;
  font-size: 23px;
  margin-bottom: 15px;
}
#echire .recommender .product-ex-area .buyer-ex {
  font-size: 18px;
}

/*おすすめ商品*/
.c-product-section h2 {
  font-size: 25px;
  text-align: center;
  color: #191919;
}
.reward .c-product-section h2{
  color: #fff;
}
.c-product-section .c-product-list {
  display: flex;
  /* flex-wrap: wrap; */
  gap: 22px;
  margin: 25px 0;
  flex-direction: column;
}
.c-product-section .c-product-list .c-product-box {
  background: #fff;
  border-radius: 10px;
  /*min-height: 300px;*/
  width: 100%;
  box-sizing: border-box;
}
.c-product-section .c-product-list .c-product-box a {
  display: flex;
  gap: 26px;
  align-items: center;
  padding: 2.5vw 30px;
  height: 100%;
  width: 100%;
  text-decoration: none;
  box-sizing: border-box;
}
 .c-product-section .c-product-list .c-product-box .-product-img {
   width: calc((100% - 26px) - 60%);
   aspect-ratio: 1 / 1;
 }
 .c-product-section .c-product-list .c-product-box .-product-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .c-product-section .c-product-list .c-textbox {
   width: 60%;
 }
 .c-product-section .c-product-list .c-textbox .c-text {
   font-size: 21px;
   color: #a38b21;
   margin: 0 0 5px 0;
 }
 .c-product-section .c-product-list .c-textbox .c-text-bold {
   font-size: 21px;
   font-weight: bold;
   color: #191919;
   margin-bottom: 10px;
 }
 .c-product-section .c-product-list .c-textbox .c-price__text {
   font-size: 18px;
   color: #191919;
   margin-bottom: 10px;
 }
 .c-product-section .c-product-list .c-textbox .c-price__text .c-price__text__strong {
   font-size: 21px;
   color: #191919;
   font-weight: 600;
 }
 .c-product-section .c-product-list .c-textbox .c-ex {
   color: #191919;
   font-size: 17px;
   font-weight: bold;
   border-bottom: 3px solid #191919;
   padding: 0 0.2em 0.15em 0.2em;
   margin: 16px 0 16px 0;
   position: relative;
   display: inline-block;
 }
 .c-product-section .c-product-list .c-textbox .c-ex::before {
   content: '';
   background-color: #fff;
   width: 20px;
   height: 3px;
   position: absolute;
   left: 30px;
   bottom: -3px;
 }
 .c-product-section .c-product-list .c-textbox .c-ex::after {
   content: '';
   background-color: #191919;
   width: 15px;
   height: 3px;
   transform: rotate(50deg);
   position: absolute;
   left: 25px;
   bottom: -8px;
 }
.c-product-section .c-product-list .c-textbox .c-ex-tx{
   color: #191919;
}


/*レスポンシブ（SP）*/
@media screen and (max-width: 785px) {
  #echire {
    width: 100%;
    margin: 0 auto;
  }
  /*ヘッダー*/
  #echire .header {
    margin-bottom: 25px;
    width: 100%;
  }
  #echire .header .text {
    margin-top: 30px;
    font-size: 14px;
  }
  #echire .inner {
    padding: 20px;
  }
 #echire .header .title-h2 {
    margin-bottom: 20px;
    font-size: 1.3rem;
    padding-top: 20px;
  }
  #echire .header p {
  margin: 15px 0;
  text-align: center;
}
  /*商品紹介*/
  #echire .product-section{
    padding: 5px 20px 35px;
  }
  #echire .recommender{
    flex-direction: column;
    padding: 0;
    gap: 18px;
  }
  .recommender .product-img{
    width: 50%;
  }
  #echire .recommender .product-ex-area{
    width: 100%;
  }
  #echire .recommender .product-ex-area .buyer-name{
    margin-bottom: 5px;
    font-size: 18px;
    text-align: center;
  }
  #echire .recommender .product-ex-area .buyer-ex{
    font-size: 13px;
    text-align: center;
  }
  
  /*おすすめ商品*/
  .c-product-section{
    margin-top: 5px;
  }
  .c-product-section h2{
    font-size: 20px;
  }
  .c-product-section .c-product-list{
    margin: 15px 0 0;
  }
  .c-product-section .c-product-list::after{
    display: none;
  }
  .c-product-section .c-product-list .c-product-box{
    padding: 0;
  }
  .c-product-section .c-product-list .c-product-box a{
    flex-direction: column;
    gap: 20px;
    padding: 25px 20px;
  }
  .c-product-section .c-product-list .c-product-box .-product-img{
    width: 100%;
    aspect-ratio: auto;
  }
  .c-product-section .c-product-list .c-product-box .-product-img img{
    aspect-ratio: 7 / 4;
  }
  .c-product-section .c-product-list .c-product-box .c-textbox{
    width: 100%;
  }
  .c-product-section .c-product-list .c-product-box .c-textbox p{
    margin: 0;
  }
  .c-product-section .c-product-list .c-textbox .c-text{
    margin-bottom: 5px;
    font-size: 16px;
  }
  .c-product-section .c-product-list .c-textbox .c-text-bold{
    margin: 8px 0 0;
    font-size: 16px;
  }
  .c-product-section .c-product-list .c-textbox .c-price{
    margin: 5px 0 12px;
  }
  .c-product-section .c-product-list .c-textbox .c-price__text{
    margin-bottom: 0;
    font-size: 13px;
  }
  .c-product-section .c-product-list .c-textbox .c-price__text .c-price__text__strong{
    font-size: 16px;
  }
  .c-product-section .c-product-list .c-textbox .c-ex{
    font-size: 15px;
  }
  .c-product-section .c-product-list .c-textbox .c-ex-tx{
    margin: 10px 0 0;
    font-size: 14px;
  }
  .c-product-section .c-product-list .c-product-box .c-textbox .c-ex-tx{
    margin-top: 16px;
  }


}
#echire .notes .notes-item .notes_title{
  text-align: center;
}
#echire .notes .notes-item .notes_inner{
  border: 1px dashed #ccc;
  width: 80%;
  margin: auto;
  margin-bottom:15px;
  padding: 20px;
  border-radius: 16px;
  box-sizing: border-box;
}
#echire .notes .notes-item .notes_inner .vertical-ft {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 18px;
}
.notes-item h2{
  font-size: 20px;
  color: #006eb1;
}
#echire .notes .notes-item .notes_text{
  text-align: left;
  margin-top: 20px;
}
.notes{
  padding: 10px 0;
}
.notes .text_imp a{
  color: #d93600;
}
.notes .text_imp{
  font-size: 18px;
  color: #8c6524;
}
.notes .text_imp span{
  font-size: 22px;
}
#echire .txt_attention{
  margin: 0;
  color: #d43013;
}
#echire .txt_attention li{
  margin: 0;
}
@media screen and (max-width: 599px){
  #echire .notes .notes-item .notes_inner{
  width: 100%;
    }
  }
/*＿＿＿＿＿＿購入ボタン＿＿＿＿＿＿*/
.buy_button{
  margin-top: 5px;
  margin-bottom:15px;
  text-align: center;
  transition: .3s all;
}
.buy_button a{
  padding: 10px 45px 10px 30px;
  text-decoration: none;
  color: #fff;
  background-color: #135f83;
  position: relative;
  font-weight: bold;
  font-size: 18px;
  transition: .3s all;
  border-radius: 40px;
}
.buy_button a::after{
  content: "";
  display: block;
  position: absolute;
  top: 37%;
  right: 25px;
  width: 10px;
  height: 10px;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: rotate(-135deg);
  transition: .3s all;
}
.buy_button a:hover::after{
  content: "";
  display: block;
  position: absolute;
  top: 37%;
  right: 10px;
  width: 10px;
  height: 10px;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: rotate(-135deg);
}

/*-----------------------------------
ご注文から受取りまでの流れ
-----------------------------------*/
#echire_flow .echire_order_box {
  display: flex;
	gap: 35px;
}
#echire_flow .echire_order_box::after{
	display: none;
}
#echire_flow .echire_order_title{
  font-size: 20px;
  line-height: 1.2;
  color: #8c6524;
  text-align: left;
  font-weight: 600;
	border-bottom: 2px solid #8c6524;
	padding-bottom: 3px;
}
#echire_flow .echire_order_title span{
  font-size: 15px;
}
#echire_flow .echire_order_title .number{
	margin-right: 10px;
  font-size: 27px;
  line-height: 0;
}
#echire_flow .echire_order_item {
  width: calc((100% - 70px) / 3);
  padding: 30px 15px 15px;
  border: 1px solid #8c6524;
  position: relative;
  font-size: 16px;
}
#echire_flow .echire_order_box .echire_order_item:nth-of-type(3n){
  margin-right: 0;
}
#echire_flow .echire_order_box .echire_order_item:nth-of-type(n+2):before{
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-left: 2px solid #8c6524;
  border-top: 2px solid #8c6524;
  position: absolute;
  top: 50%;
  left: -8%;
  transform: rotate(135deg) translateY(-50%);
}
#echire_flow .echire_order_item .echire_order_inner {
  margin: 12px 0 0;
}
#echire_flow .echire_order_item .echire_order_inner p {
  margin-bottom: 3px;    
}
#echire_flow .echire_order_item .echire_order_inner.list p{
	text-indent: -1em;
	padding-left: 1em;
}
#echire_flow .echire_attention{
  margin-top: 15px;
}
#echire_flow .echire_attention .txt-attention{
	text-indent: -1em;
	padding-left: 1em;
}

@media screen and (max-width: 599px){
	#echire_flow .echire_order_box{
		flex-direction: column;
	}
	#echire_flow .echire_order_title{
		font-size: 17px;
	}
	#echire_flow .echire_order_title .number{
		font-size: 22px;
	}
	#echire_flow .echire_order_item{
		width: 100%;
		box-sizing: border-box;
		padding: 22px 15px 15px;
		font-size: 15px;
	}
	#echire_flow .echire_order_box .echire_order_item:nth-of-type(n+2):before{
		left: 50%;
    transform: rotate(225deg) translateY(-50%);
	}
	#echire_flow .echire_order_box .echire_order_item:nth-of-type(2):before{
		top: -20%;
	}
	#echire_flow .echire_order_box .echire_order_item:nth-of-type(3):before{
		top: -10%;
	}
	#echire_flow .echire_order_item .echire_order_inner{
		margin: 10px 0 0;
	}
}