@charset "utf-8";
/*=======================================================
SHOP - 「建築関連用品」「アルパカ牧場」
=======================================================*/
input, textarea, select, button{
	font: inherit;
	color: inherit;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

input, select{
	vertical-align: middle;
}

.color_red{
 color: #cc0000;
}

.li_indent1{
 margin-top: 0.5em;
}
.li_indent1 li{
 text-indent: -1em;
 padding-left: 1em;
}

.mt_indent1{
 margin-top: 1em;
}
.mt_indent1 li{
 text-indent: -1em;
 padding-left: 1em;
}

.mgn_left1{
 margin-left: 1em;
}
.mgn_left2{
 margin-left: 2em;
}

.mgn_top1{
 margin-top: 1em;
}
.mgn_top05{
 margin-top: 0.5em;
}

/*****
規約リンク
*****/
#terms{
 text-align: right;
}
#terms ul{}
#terms ul li{
 display: inline-block;
 margin-left: 15px;
}
#terms ul li a{
 padding-left: 20px;
 background-image: url("../../img/arrow.png");
 background-repeat: no-repeat;
 background-position: left center;
}

/*****
商品リスト
*****/
article#item_list{
 margin-top: 20px;
 box-sizing: border-box;
}

/*** タブナビゲーション ***/
.tab_nav{
 display: flex;
 text-align: center;
 line-height: 1;
}
.tab_nav li{
 font-size: 1.6rem;
 line-height: 1;
 width: 12em;
 margin-right: 5px;
 box-sizing: border-box;
}
.tab_nav li a{
 display: block;
 padding: 1em 1.5em 1em 0;
 border-top-right-radius: 2em;
}
.tab_nav li a::before{
 content: '▼';
 display: inline-block;
 margin: 0.1em 0.25em 0 0;
 transform: rotateZ(-90deg);
}
.tab_nav li a:hover{
 text-decoration: none;
}
/* 表示中のアクティブクラス */
.tab_nav li a.show_box{
 cursor: default;
}

/* 建築関連用品タブ */
.tab_nav li.nav_green{}
.tab_nav li.nav_green a{
 color: #52B5B7;
 border-top: solid 1px #52B5B7;
 border-right: solid 1px #52B5B7;
 border-left: solid 1px #52B5B7;
}
.tab_nav li.nav_green a:hover{
 background-color: #d4eced;
}
.tab_nav li.nav_green a.show_box{
 color: #fff;
 background-color: #52B5B7;
}

/* アルパカ商品タブ */
.tab_nav li.nav_purple{}
.tab_nav li.nav_purple a{
 color: #88A6FF;
 border-top: solid 1px #88A6FF;
 border-right: solid 1px #88A6FF;
 border-left: solid 1px #88A6FF;
}
.tab_nav li.nav_purple a:hover{
 background-color: #e1e9ff;
}
.tab_nav li.nav_purple a.show_box{
 color: #fff;
 background-color: #88A6FF;
}

/* その他商品タブ */
.tab_nav li.nav_orange{}
.tab_nav li.nav_orange a{
 color: #e4bb8b;
 border-top: solid 1px #e4bb8b;
 border-right: solid 1px #e4bb8b;
 border-left: solid 1px #e4bb8b;
}
.tab_nav li.nav_orange a:hover{
 background-color: #f8eee2;
}
.tab_nav li.nav_orange a.show_box{
 color: #fff;
 background-color: #e4bb8b;
}


/*** 商品一覧 ***/
#item_architecture{}/* 建築関連用品 */
#item_alpaca{}/* アルパカ商品 */
#item_other{}/* その他商品 */

/* タブ表示エリア-商品一覧 */
.tab_box{
 border-style: solid;
 border-width: 4px 1px 1px 1px;
 padding: 4em 2em 2em 2em;
}
.tab_green{
 border-color: #52B5B7;
}
.tab_purple{
 border-color: #88A6FF;
}
.tab_orange{
  border-color: #e4bb8b;
}

.tab_box h2{
 font-size: 2.4rem;
 font-weight: normal;
 line-height: 1;
 margin: 0 0 0 1em;
 padding: 0.5em 1em 0.5em 1.5em;
 border-radius: 0 1em 1em 0;
 box-sizing: border-box;
 font-family: "Meiryo UI";
 position: relative;
}
.tab_box h2 span{
 width: 2em;
 height: 2em;
 position: absolute;
 top: 0;
 left: -1em;
}
.tab_box h2 span img{
 width: 100%;
 height: auto;
}

.tab_green h2{
 background-color: #d4eced;
}
.tab_purple h2{
 background-color: #e1e9ff;
}
.tab_orange h2{
 background-color: #f8eee2;
}
/*.tab_box h2::before{
 content: '';
 display: block;
 width: 2em;
 height: 2em;
 background-repeat: no-repeat;
 background-size: contain;
 background-position: left center;
 position: absolute;
 top: 0;
 left: -1em;
}

#item_architecture.tab_box h2{
 background-color: #d4eced;
}
#item_architecture.tab_box h2::before{
 background-image: url("../img/icon_architecture.png");
}
#item_alpaca.tab_box h2{
 background-color: #e1e9ff;
}
#item_alpaca.tab_box h2::before{
 background-image: url("../img/icon_alpaca.png");
}*/

/* 個別商品 */
.single_item_wrap{
 padding: 4em 0 4em 0;
 border-bottom: dotted 1px #ccc;
}

.single_item_area{
 display: flex;
 /*margin-top: 2em;*/
}

.single_item_area .item_photo{
 width: 50%;
 max-width: 272px;
 margin: 0 28px 0 0;
 box-sizing: border-box;
}
.single_item_area .item_photo img{
 width: 100%;
 height: auto;
 padding: 5px;
 border: solid 1px #ccc;
 box-sizing: border-box;
}
.single_item_area .item_photo2 img{
 width: 80%;
 height: auto;
 padding: 5px;
 border: solid 1px #ccc;
 box-sizing: border-box;
}


.single_item_area .item_detail{
 width: calc(100% - 300px);
}

.item_detail h3{
 font-size: 1.8rem;
 line-height: 1;
 padding: 0 0 0 0.5em;
}
.tab_green .item_detail h3{
 color: #52B5B7;
 border-left: solid 4px #52B5B7;
 font-family: "Meiryo UI";
}
.tab_purple .item_detail h3{
 color: #88A6FF;
 border-left: solid 4px #88A6FF;
}
.tab_orange .item_detail h3{
 color: #e4bb8b;
 border-left: solid 4px #e4bb8b;
}

.item_detail .item_code{
 display: inline-block;
 margin: 1em 0 0.5em 0;
 padding: 0.5em;
 border: solid 1px #ccc;
}

.item_detail .item_price{
 font-size: 1.6rem;
 color: #cc0000;
}
.item_detail .item_price b{
 font-size: 1.25em;
}

.item_detail .free_area{
 margin: 1em 0;
}
.item_detail .free_area p{
 margin-top: 1em;
}
.item_detail .free_area p:first-child{
 margin-top: 0;
}

.item_detail ul.icon_area{}
.item_detail ul.icon_area li{
 display: inline-block;
 font-size: 1.4rem;
 margin-right: 1em;
 padding: 0.5em;
}
.tab_green .item_detail ul.icon_area li{
 color: #52B5B7;
 border: solid 1px #52B5B7;
}
.tab_purple .item_detail ul.icon_area li{
 color: #88A6FF;
 border: solid 1px #88A6FF;
}
.tab_orange .item_detail ul.icon_area li{
 color: #e4bb8b;
 border: solid 1px #e4bb8b;
}


.btn_cart{
 font-size: 1.6rem;
 line-height: 1;
 text-align: center;
 margin-top: 1em;
 padding: 0.5em 1em;
 background-color: #EBEBD7;
}

.btn_cart .cart_in{
 display: inline-block;
}
.btn_cart .cart_in a{
 display: inline-block;
 color: #fff;
 padding: 0.75em 2em 0.75em 4em;
 border-radius: 0.5em;
 background-color: #cc0000;
 background-image: url("../img/icon_cart.png");
 background-repeat: no-repeat;
 background-size: 1.5em auto;
 background-position: 1.5em center;
 transition: background-color 1s;
}
.btn_cart a:hover{
 background-color: #dd5252;
}

.btn_cart .quantity{
 display: inline-block;
 margin-right: 1em;
}
.btn_cart .quantity input{
 width: 6em;
 text-align: right;
}
.btn_cart .type_select{
 display: inline-block;
 margin-right: 2em;
}

/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px) {}

/* スマホ----------------------------- */
@media screen and (max-width: 767px) {
 /*****
 規約リンク
 *****/
 #terms{
  margin: 0 3%;
 }
 
 /*****
 商品リスト
 *****/
 article#item_list{
  width: 94%;
  margin: 40px auto;
 }
 
 /*** タブナビゲーション ***/
 .tab_nav{
  flex-wrap: wrap;
  justify-content: space-between;
 }
 .tab_nav li{
  width: 49%;
  margin-right: 0;
  margin-bottom: 0.5em;
 }
 .tab_nav li a{
  border-top-right-radius: 0;
 }
 .tab_nav li.nav_green a{
  border-bottom: solid 1px #52B5B7;
 }
 .tab_nav li.nav_purple a{
  border-bottom: solid 1px #88A6FF;
 }
 .tab_nav li.nav_orange a{
  border-bottom: solid 1px #e4bb8b;
 }
 .tab_nav li a::before{
  transform: rotateZ(0);
 }
 
 /*** 商品一覧 ***/
 /* タブ表示エリア-商品一覧 */
 .tab_box{
  padding: 2em 1em 1em 1em;
 }
 .tab_box h2{
  font-size: 2rem;
 }
 
 /* 個別商品 */
 .single_item_area{
  display: block;
 }
 
 .single_item_area .item_photo{
  margin: 0 auto 1em auto;
 }

.single_item_area .item_photo2{
  width: 50%;
  height: 50%;
  margin: 0 auto;
 }
 
 .single_item_area .item_detail{
  width: 100%;
 }
 
 .item_detail ul.icon_area li{
  margin-top: 0.5em;
 }
 
 .btn_cart{
  text-align: left;
 }
 .btn_cart .cart_in{
  display: block;
  text-align: center;
 }
 .btn_cart .quantity{
  display: block;
  margin-right: 0;
  margin-bottom: 1em;
 }
 .btn_cart .type_select{
  display: block;
  margin-right: 0;
  margin-bottom: 1em;
 }
}