@charset "UTF-8";

/*==========
  flex
==========*/
.flex-start {
  display:flex;
  justify-content: flex-start;
}
.flex-end {
  display:flex;
  justify-content: flex-end;
}
.flex-center {
  display:flex;
  justify-content: flex-center;
}

 /* 画像 */
.f-image img { margin:35px auto; display:block; max-width:100%; height:auto; }

.border-dashed {
    margin : 3em 0 1.5em ;
    padding : 1em 1.5em ;
    line-height : 1.8 ;
    border : dashed 2px #333; 
}


ul.inline {
  list-style:none;
  padding-left:0;
}
ul.inline > li {
  display:inline;
}
ul.inline > li:not(:nth-child(1)):before {
  content:" / ";
  color:silver;
}

ul.inline a {
font-family: "M PLUS Rounded 1c";
	color: #333;
	font-size:12px;
	text-decoration: none;
}
/*================================================
  ガイド
 ================================================*/
.guide_box {
  margin:0 auto 100px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #eee;
  color: #333;
  text-align:center;
}
.guide_box p {
  margin-top: 10px;
  margin-bottom: 20px;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  line-height: 2;
}

@media screen and (max-width:979px) {
.guide_box p {
  font-size: 12px;
  line-height: 2;
}

}

/*================================================
■ アイテムボックス
================================================*/
.item {
  width: 80%;
  margin-top:30px;
}
.item-img {
  padding: 0;
  margin: 0 auto;
  width: 100%;
}
.item-text {
  padding: 0;
}
.item h3 {
  margin: 8px 0 8px;
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  font-weight:700;
  line-height: 2;
  letter-spacing: 1px;
  color: #403a39;
}
.item-text p {
  font-size: 12px;
  margin-bottom:50px;
  color: #333;
}
.item-label0 {
  display: inline-block;
  padding: 4px 10px;
  margin-right: 10px;
  border-radius: 3px;
  background: #999;
  font-size: 12px;
  line-height: 1.1;
  color: #fff;
}
.item-label2 {
  display: inline-block;
  padding: 4px 10px;
  margin-right: 10px;
  border-radius: 3px;
  background: #c6a86f;
  font-size: 12px;
  line-height: 1.1;
  color: #fff;
}
.item-label3 {
  display: inline-block;
  padding: 4px 10px;
  margin-right: 10px;
  border-radius: 3px;
  background: #cc4844;
  font-size: 12px;
  line-height: 1.1;
  color: #fff;
}
.item-label4 {
  display: inline-block;
  padding: 4px 10px;
  margin-right: 10px;
  border-radius: 3px;
  background: #98816f;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
}
.item-label5 {
  display: inline-block;
  padding: 4px 10px;
  margin-right: 10px;
  border-radius: 3px;
  background: #c9bc9c;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
}

.items {
display:-webkit-box;
display:-ms-flexbox;
display: flex;  
-ms-flex-pack: justify;
-webkit-box-pack: justify;
-webkit-justify-content: censpace-betweenter;
  justify-content: space-between;
}
.items .item {
  width: 30%;
}

/*+++++ アイテム３ボックス +++++*/

.items3 .item {
  width: 100%;
  flex-direction: column;
}

@media ( min-width : 600px ){
.items3 {
display:-webkit-box;
display:-ms-flexbox;
  display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
  flex-wrap: wrap;

-ms-flex-pack: justify;
-webkit-box-pack: justify;
-webkit-justify-content: censpace-betweenter; 
  justify-content: space-between;
}
.items3 .item {
  width: 30%;
}
}

/*================================================
  ■■■■■ 商品 ■■■■■
 ================================================*/
 /*スマホ用にflex-direction: column;を指定*/
.goods {
  width: 100%;
}
.goods-img {
  padding: 0;
}
.goods-body {
  padding: 0;
}
.goods-title {
  margin: 0 0 8px;
  font-size: 20px;
  color: #ef5350;
}

.goods h3 {
  margin: 8px 0 8px;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight:700;
  line-height: 2;
  letter-spacing: 1px;
  color: #403a39;
}
.goods-text p {
  margin-bottom: 50px;
  font-size: 12px;
  line-height: 1.6;
  color: #666;
}

.goods a {
	color: #333;
	text-decoration: none;
}

/*++++++++++*/
.goods-item1 {
  display: flex;
  flex-direction: column;
}
.goods-item1 .goods {
  width: 100%;
}
/*++++++++++*/
.goods-item2 {
  flex-direction: column;
}
.goods-item2 .goods {
  width: 100%;
}
/*++++++++++*/
.goods-item3 {
  flex-direction: column; /* column; SP用に縦一列に並ぶ */
}
.goods-item3 .goods {
  width: 100%;
}
/*++++++++++*/
.goods-item4 {
  margin:80px auto;
}
.goods-item4 .goods {
  display: flex;
  flex-direction: column; /* column; SP用に縦一列に並ぶ */
  margin: 0 0 24px;
  width: 100%;
}
.goods-item4 .goods:nth-child(odd) {
  width: 100%;
}
.goods-item4 .goods-img {
  padding: 0; 
}

@media screen and (min-width: 600px) {
.goods-item2 {
  display: flex;
  flex-direction: row; /* row; PC用に左右に並ぶ */
  flex-wrap: wrap; /* woap; で改行ありになる */
  justify-content: space-between; /* 両端は端っこにくっつけて間は均等にする */
}
.goods-item2 .goods {
  width: 47%;
}
/*++++++++++*/
/*左右に並べるため、親要素にflex-direction: row;を指定する。*/
.goods-item3 {
  display: flex;
  flex-direction: row; /* row; PC用に左右に並ぶ */
  flex-wrap: wrap; /* woap; で改行ありになる */
  justify-content: space-between; /* 両端は端っこにくっつけて間は均等にする */
}
.goods-item3 .goods {
  width: 30%;
}
/*++++++++++*/
.goods-item4 .goods {
  display: flex;
  margin: 0 0 24px;
  flex-direction: row; /* row; PC用に左右に並ぶ */
}
.goods-item4 .goods:nth-child(odd) {
  flex-direction: row-reverse;
}
.goods-item4 .goods-img {
  width: 50%;
  padding: 0 5px;
}
}

/*=====サムネイル/オンマウス枠=====*/
.thumbnail {
  width: 100%;
}
.thumbnail a {
  position: relative;
  display: block;
  line-height: 0;
}
.thumbnail a img {
  width: 100%;
}
.thumbnail a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.thumbnail a:hover:after {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 0px 8px inset;
}

/*================================================
  ■■■■■ 製品 ■■■■■
 ================================================*/

.product {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: solid 1px #e5ded6;
  padding:20px;
  margin-bottom: 50px;
  border-radius: 25px;
}
.product_spec {
  width: 100%;
  line-height: 1.8;
}
/*h2*/
.product .product_name {
  margin-top: 0;
  margin-bottom: 5px;
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight:700;
  line-height: 2;
  border-bottom: 1px solid #000;
  letter-spacing: 1px;
  text-align:center;
}
/*h3*/
.product .product_catch {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  text-align:center;
  font-weight:bold;
  letter-spacing: 2px;
}
.product_spec p {
  margin-top: 0;
  margin-bottom: 30px;
  text-align: left;
  color: #333;
}
.product_Image {
  width: 100%;
  margin: 0;
}
.product_Image-Fluid {
  width: 100%;
  max-width: 100%;
}
.product_ImageCaption {
  color: #999;
  font-size: 10px;
  text-align:left;
  margin: 10px 0;
}
.product_spec .icon {
  text-align:center;
  margin-bottom: 20px;
}
/*===== BTN =====*/
.product_spec a{
  margin: 20px auto;
  display: block;
  text-decoration: none;
  height:45px;
  width: 200px;
  font-size: 12px;
  line-height: 45px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  background: #5a4e45;
  border-radius: 22px;
  border: 1px solid #5a4e45;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
.product_spec a:hover{
  color: #5a4e45;
  border: dashed 1px #5a4e45;
  background: none;
}
.product_spec a:active{
  -ms-transform: translateY(2px);
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}

@media all and (min-width: 600px) {
.product {
display: flex;
flex-direction: column;
flex: 0 0 auto;
}
.product-Reverse {
display: flex;
flex-direction: column;
}
.product_description {
flex-basis: 100%;
}
.product_Image {
width: 70%;
margin:0 auto;
}
.product_spec {
width: 70%;
padding: 20px;
margin:0 auto;
}
.product_spec-Reverse {
width: 70%;
padding: 20px;
margin:0 auto;
}
.product_spec h2 {
margin-top: 0;
margin-bottom: 10px;
font-size: 24px;
text-align:center;
}
.product_spec h3 {
margin-bottom: 10px;
color: #555;
}
.product_spec p {
color: #333;
line-height: 1.6;
}
}

@media all and (min-width: 900px) {
.product {
display: flex;
flex-direction: row;
margin-bottom: 80px;
padding: 30px;
max-width: 1000px;
background: #fff;
}
.product-Reverse {
flex-direction: row-reverse;
}  
.product_description {
flex-basis: 40%;
}
.product_spec {
width: 70%;
padding:0 0 0 20px;
}
.product_spec-Reverse {
width: 70%;
padding:20px 30px 0 0;
}
.product_spec h2 {
font-size: 24px;
}
.product_spec p {
text-align: justify;
color: #666;
line-height:2;
}
.product_Image{
flex-basis: 60%;
}
.figure {
max-width:600px;
max-height:400px;
}
}

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

  item data

==============================*/
/* カートボタン */
.cart-btn{
display: inline-block;
margin-top: 20px;
padding: 15px 50px 15px 50px;
background: #98816f;
border: 2px solid #98816f;
font-size: 14px;
color: #fff;
font-weight: bold;
text-decoration: none;
border-radius: 5px;
transition: background 0.5s,color 0.5s;
}
.cart-btn:hover{
  background: #c6a86f;
  border: 2px solid #c6a86f;
  color: #fff;
}


.item_price {
	margin-top: 7px;
	font-family: 'Noto Serif JP', serif;
	font-size: 14px;
}
.item_price strong {
	font-size: 18px;
	letter-spacing: 1px;
}
.item_price span {
	padding-left: 4px;
	font-size: 12px;
}
.item_cart dl {
padding: 12px 0;
border-bottom: 1px solid #ccc;
}
.item_cart dt {
padding-bottom: 5px;
}

@media screen and (min-width: 768px) {
.item_cart dt {
clear: left;
float: left;
width: 30%;
}
.item_cart dd {
margin-left: 10%;
}
}

/*================================================
■■  バナー
================================================*/
/* 2カラム（スマートフォンでは1カラム) two-Col*/
.bnr {
	overflow:hidden;
	margin-bottom:30px;
}
.bnr_inner {
	overflow:hidden;
	margin-right:-5%;
}
.bnr_inner div {
	width:45%;
	float:left;
	margin-right:5%;
}
.bnr_inner div:nth-child(2n+1) {
	clear:both;
}
.bnr_inner img {
	width:100%;
	margin-bottom:0.5em;
	border-radius:5px;
}
@media screen and (max-width:767px) {
	.bnr {
		margin-right:0;
		margin-bottom:30px;
	}
	.bnr_inner {
		margin-right:0;
	}
	.bnr_inner div {
		float:none;
		width:100%;
	}
}
/*================================================
 ■■ ポイント
 ================================================*/
.point {
  display:flex;
  flex-direction: column;/*スマホ用にflex-direction: column;を指定*/
  margin-bottom: 20px;
  padding:20px;
}
.point .text {
  width: 100%;
  line-height: 1.8;
  text-align: justify;
}
/*h2*/
.point-ttl {
  font-family: 'EB Garamond', serif;
  font-weight:700;
  font-size: 32px;
  line-height: 1.8;
  margin: 0 0 20px 0;
}
/*h3*/
.point-subttl {
  font-family: 'Noto Serif JP', serif;
  font-weight:700;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 20px 0;
}
.point .pict {
  margin:auto;
  min-height: 0%;
}
.point .pict img {
  width: 100%;
  height:auto;
}

@media (min-width:768px) {
.point {
width: 100%;
flex-direction: row-reverse; /*左右に並べるため、親要素にflex-direction: row;を指定*/
padding: 20px 0 70px;
border-bottom: 1px dotted #333;
}
/*h2*/
.point-ttl {
  font-weight:700;
  font-size: 36px;
  line-height: 1.8;
  margin: 0 0 20px 0;
}
/*h3*/
.point-subttl {
  font-size: 22px;
  line-height: 1.6;
}
.point .text {
box-sizing: border-box; /*PD含む*/
max-width: 520px;
padding: 0 70px 0 0;
}
.point p {
font-size: 13px;
line-height: 1.8;
margin-bottom: 25px;
}
.point .pict {
width: 480px; /*画像ボックスの幅*/
text-align: right;
}
.point .pict img {
width:100%;
max-width: 480px;
height: auto;
border-radius: 25px;
}
.point:nth-child(even) .pict {
margin-left: 0;
margin-right: 0;
}
 /* バッジ */
.point_badge img {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 105px;
	height: 69px;
}

}

/*================================================
 ■■ アナウンスボックス
 ================================================*/

.announce-box {
  display:flex;
  flex-direction: column;/*スマホ用にflex-direction: column;を指定*/
  margin:0 auto;
  padding:70px 0 20px;
  width: 80%
}
.announce-box .text {
  width: 100%;
  line-height: 1.8;
  text-align: justify;
}
.announce-box h3 {
  margin: 20px 0 0 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight:700;
  line-height:1.4;
}
.announce-box h4 {
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  color:#98816f;
  margin: 0 0 10px 0;
}
.announce-box p {
  margin: 20px 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 12px;
}

.announce-box .pict {
  margin:auto;
  text-align: center;
  min-height: 0%;
}
.announce-box .pict img {
  max-width: 100%;
  height:auto;
}

@media (min-width:768px) {
.announce-box {
width: 100%;
flex-direction: row; /*左右に並べるため、親要素にflex-direction: row;を指定する。*/
justify-content: space-between;
}
.announce-box:nth-child(even) {
flex-direction: row-reverse;
}/*flex-direction: row-reverse;を指定して交互*/
  
.announce-box .text {
text-align: left;
width: 720px;
margin-left:30px;
}
.announce-box:nth-child(even) .text {
text-align: right;
}

.announce-box .pict {
width: 380px; /*画像ボックスの幅*/
max-width: 100%;
}
.announce-box .pict img {
max-width: 100%;　/*画像の幅*/
height:auto;
}
.announce-box:nth-child(even) .pict {
margin-left: 0;
margin-right: 3%;
}

}

 /*================================================
  ■ about 98816f 9f8856
 ================================================*/
.catch {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 100%;
  margin: 0 auto 20px;
  
  background-color: #fff;
}
.catch .photo {
  width: 100%;
}
.catch .description	{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 90%;
  font-size: 14px;
  padding:20px;
}
.catch .description .text {
  margin-bottom: 50px;
}
.catch .description h3 {
  margin-top:0;
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-family: 'Noto Serif JP', serif;
  font-weight:700;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 3px;
  color:#98816f;
}
.catch .description p {
  margin-bottom: 25px;
  font-family: 'Noto Serif JP', serif;
  font-weight:400;
  font-size: 14px;
  line-height: 1.8;
}
.catch .description .btn {
  align-self: flex-end;
}
.catch .description .btn a {
  background-color: #98816f;
  color: #fff;
  padding: 12px 35px;
  text-decoration: none;
  display: inline-block;
}

@media (min-width:768px) {
.catch {
flex-direction: row;
max-width: 1000px;
margin-bottom: 50px;
}
.catch .description h3 {
margin-bottom: 30px;
font-size: 22px;
line-height: 1.8;
}
.catch .description p {
  font-size: 14px;
  line-height: 2.4;
}
.catch .photo {
max-width:500px;
}
.catch .description	{
display: flex;
flex-direction: column;
max-width:500px;
font-size: 14px;
flex-basis: 35%;
margin:0 auto;
}
.catch-Reverse {
flex-direction: row-reverse;
}
}

/*================================================
 *  テーブル
 ================================================*/

#price_box{
margin:80px auto;
background: #fff;
}
#price_box .price_table {
width:100%;
    background: #fff;
	margin:30px auto;
	border: solid #ddd;
	border-width: 1px;
font-family: 'Noto Serif JP', serif;
font-size: 12px;
font-weight:400;
}
#price_box .list_table_tr:nth-child(even) {
    background: #f8f8f8;
}
#price_box .list_table_ttl,
#price_box .list_table_txt {
    padding: 12px 16px;
    line-height: 1.4;
}
#price_box .list_table_ttl {
    text-align: left;
    border-right: 1px #ddd solid;
}

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

#price_box .price_table {
font-size: 12px;
}

    #price_box .price_table tr .list_table_ttl,
    #price_box .price_table tr .list_table_txt,
    #price_box .list_return tr .list_table_ttl,
    #price_box .list_return tr .list_table_txt {
        border: none;
        display: block;
		width: 100%;
    }
    #price_box .price_table tr .list_table_ttl,
    #price_box .list_return tr .list_table_ttl {
        padding-bottom: 5px;
    }
    #price_box .price_table tr .list_table_txt,
    #price_box .list_return tr .list_table_txt {
        padding-top: 5px;
    }

}

/*================================================
 *  テーブル
================================================*/

#table_box{
width: 700px;
}

#table_box table{
width: 100%;
border-collapse: collapse;
border: solid #CCC;
border-width: 1px;
}
#table_box table tr th,
#table_box table tr td{
padding: 0.5em;
text-align: left;
vertical-align: top;
border: solid #CCC;
border-width: 1px;
}
#table_box table tr th{
width: 35%;
background: #eee;
}

@media screen and (max-width:768px){
#table_box{
width: 100%;
}
#table_box table,
#table_box table tbody,
#table_box table tr,
#table_box table tr th,
#table_box table tr td{
display: block;
}
#table_box table{
width: 100%;
border-width: 0 0 1px 0;
}
#table_box table tr th,
#table_box table tr td{
width: 90%;
padding: 3% 5%;
}
#table_box table tr td{
border-width: 0px 1px 0px 1px;
}
}

/*================================================
 *  +++++
 ================================================*/ 
 /** 比率でパッディング指定 **/
/* +++++ */
.block_bg{
  background: url('../images/1000.jpg') center;
  background-size: cover;
  width: 100%;
  padding-top: 20%;
}

/* +++++ */
.block_bg {
  background: url("../images/1000.jpg") center;
  background-size: cover;
  width: 50%;
  padding-top: 33%;
  position: relative;
  top: 0;
  left: 0;
}

@media screen and (max-width:767px) {
.block_bg {
  background-size: cover;
  position: relative;
  width: 100%;
  padding-top: 66.6666%;
  top: 0;
  left: 0;
}
}

/***比率指定-1000**/
/* +++++ */
.block_bg1000 {
  background: url("../images/1000-2.jpg") center;
  background-size: cover;
  position: relative;
  width: 100%;
  padding-top: 66.6666%;

  top: 0;
  left: 0;
}