@charset "utf-8";

.share .title_box{
	margin-bottom: 80px;
}
.details_cnt{
	margin-bottom: 60px;
}
/*================================
    パンクズ
=================================*/
.breadcrumb{
	margin-bottom: 60px;
}
.breadcrumb ul{
	overflow: hidden;
}
.breadcrumb li{
	float: left;
	margin-right: 20px;
	padding-right: 26px;
	background: url(/common/img/pc/ico/ico_breadcrumb.png) no-repeat;
    background-position: center right;
}
.breadcrumb li:last-child{
	margin-right: 0;
	padding-right: 0;
	background: none;
}
/*================================
    ページャー
=================================*/
.pager{
	margin-top: 20px;
}
.pager .pagination {
	text-align: center;
}
.pager .pagination li {
	display: inline;
	margin: 0 2px;
	padding: 0;
	display: inline-block;
	background:#EFEFEF;
	width: 50px;
	height: 50px;
	text-align: center;
	position: relative;
	border-radius: 10px;
	box-sizing: border-box;
}
.pager .pagination li a{
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	display:table;
	color: #000;
	text-decoration: none;
	border: 1px solid #000;
	border-radius: 10px;
}
.pager .pagination li a span{
	display:table-cell;
	vertical-align:middle;
}
.pager .pagination li a:hover,
.pager .pagination li a.active{
	color: #333;
	background: #B4B4B5;
	border-radius: 10px;
	border: 1px solid #B4B4B5;
}
.pager .pagination li.pre,
.pager .pagination li.next{
	width: 100px;
}
.details .pager .pagination li {
	width: 80px;
	height: 40px;
}
.details .pager .pagination li.pre,
.details .pager .pagination li.next {
    width: 130px;
}
/*================================
    sns関連
=================================*/
.sns_box{
	padding-top: 20px;
	text-align: left;
	border-top: 1px solid #000;
}
.sns_box ul{
	overflow: hidden;
	display: inline-block;
}
.sns_box li{
	float: left;
	margin-left: 20px;
}
.sns_box li:first-child{
	margin-left: 0;
}
.sns_box p{
	font-size: 18px;
	padding-bottom: 10px;
}
#idea_detail .sns_box{
	padding-top: 60px;
}
/*================================
    details_cnt
=================================*/
.details_cnt figure{
	overflow: hidden;
}
.details_cnt .modal_box{
	width: 55%;
	float: left;
	overflow: hidden;
}
.details_cnt .modal_box ul{
	margin: -5px;
	overflow: hidden;
}
.details_cnt .modal_box ul li{
	margin: 5px;
	float: left;
    width: calc((100% - 50px) / 5);
}
.details_cnt .modal_box ul li:first-child{
	width: 100%;
}
.details_cnt figcaption{
	width: 40%;
	margin-left: 5%;
	float: left;
}
/*================================
   order_box
=================================*/
.order_box{
	margin-bottom: 20px;
}
.order_box dl{

}
.order_box dt{
	font-size: 18px;
	font-weight: bold;
}
.order_box dd{
	padding-top: 10px;
}
.order_box ul{
	overflow: hidden;
}
.order_box li{
	float: left;
	margin-left: 20px;
	height: 50px;
	box-sizing: border-box;
}
.order_box li:first-child{
	margin-left: 0;
	width: 60px;
}
.order_box input{
	border-radius: 5px;
	padding: 5px 10px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.order_box .cart_btn{
    width: 200px;
}
.order_box .cart_btn input{
    background: #333;
    color: #fff;
    text-align: center;
}
/*================================
    form_box フォーム関連
=================================*/
.form_list{
	border-bottom: 1px solid #333;
	margin-top: 40px;
}
.form_list dl{
	display: table;
}
.form_list dt{
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}
.form_list dd{
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}
.form_list > li{
	border-top: 1px solid #333;
}
.form_list > li > dl{
	width: 100%;
}
.form_list > li > dl > dt{
	width: 30%;
	background: #ddd;
	padding: 20px;
}
.form_list > li > dl > dd{
	width: 70%;
	padding: 20px;
}
.form_list > li > dl > dd > ul{
	overflow: hidden;
}
.form_list > li > dl > dd > ul > li{
	float: left;
	margin-left: 10px;
}
.form_list > li > dl > dd > ul > li:first-child{
	margin-left: 0;
}
.name_list li dl dt{
	padding-right: 10px;
}
.cent_box{
	margin-top: 40px;
	text-align: center;
}
.question_cont dt{
	vertical-align: top;
}
input,
button,
textarea,
select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
textarea{
	width: 600px;
	height: 300px;
	display:block;
}
input[type="text"],
input[type="checkbox"],
textarea{
	border: 1px solid #333;
	background: #fff;
	border-radius: 5px;
	padding: 5px;
}
input[type="submit"]{
	border-radius: 10px;
	background: #333;
	color: #fff;
	padding: 10px 70px;
	font-size: 18px;
}
/*===============================================
●tablet.css 画面の横幅が750pxまで
===============================================*/
@media screen and (max-width: 750px){
	.style-d #main .inner {
	    padding: 0 40px;
	}
	.contents-style {
	    margin-top: 40px;
	}
	h2.share-title {
	    font-size: 30px;
	}
	.share .title_box {
	    margin-bottom: 60px;
	}
/*================================
    list-box
=================================*/
	.list-box > ul > li {
	    margin-top: 80px;
	}
	.list-box > ul > li:first-child{
		margin-top: 0;
	}
	.list-box .img-box {
	    height: auto;
	}
	.product_name,
	.price{
		font-size: 24px;
		font-weight: bold;
	}
/*================================
    details_cnt
=================================*/
	.details_cnt .modal_box {
	    width: 100%;
	    float: none;
	}
	.details_cnt figcaption {
	    width: 100%;
	    margin-left: 0;
	    float: none;
	}
/*================================
   order_box
=================================*/
	.order_box {
	    margin-bottom: 60px;
	}
	.order_box dt {
	    font-size: 24px;
	}
	.order_box li {
	    margin-left: 40px;
	    height: 96px;
	}
	.order_box li:first-child {
	    width: 120px;
	}
	.order_box .cart_btn {
	    width: 340px;
	}
	input[type="submit"] {
	    font-size: 30px;
	    font-weight: bold;
	}
	.order_box  input[type="text"]{
		font-size: 42px;
	    padding: 20px;
	}
/*================================
    sns_box
=================================*/
	.sns_box p {
	    font-size: 24px;
	}
/*================================
    パンクズ
=================================*/
	.breadcrumb{
	    margin-bottom: 0;
	    padding: 30px 0;
	}
	.breadcrumb a{
		font-size: 20px;
	}
	.breadcrumb li{
		margin-right: 20px;
		padding-right: 37px;
		background: url(/common/img/sp/ico/ico_breadcrumb.png) no-repeat;
	    background-position: right 2px;
	}
/*================================
    ページャー
=================================*/
  .pager .pagination li{
    display: none;
  }

  .pager .pagination li.pre,
  .pager .pagination li.next{
    display: inline-block;
    width: 40%;
    height: 50px;
    text-align: center;
  }

  .pager .pagination li.pre a,
  .pager .pagination li.next a{
    width: 100%;
    text-align: center;
  }

  .pager .pagination li.pre span::after{
    content: "";
  }

  .pager .pagination li.next span::before{
    content: "";
  }
/*================================
    form_box フォーム関連
=================================*/
	.form_box > p{
		font-size: 24px;
	}
	.form_list{
		border-bottom: 1px solid #333;
		margin-top: 40px;
	}
	.form_list dl{
		display: table;
	}
	.form_list dt{
		display: table-cell;
		vertical-align: middle;
		text-align: left;
	}
	.form_list dd{
		display: table-cell;
		vertical-align: middle;
		text-align: left;
	}
	.form_list > li{
		border-top: 1px solid #333;
	}
	.form_list > li > dl{
		width: 100%;
	}
	.form_list > li > dl > dt,
	.form_list > li > dl > dd{
	    width: 100%;
	    display: block;
	    box-sizing: border-box;
	}
	.form_list > li > dl > dt{
		font-size: 24px;
	}
	.form_list > li > dl > dd > ul{
		overflow: hidden;
	}
	.form_list > li > dl > dd > ul > li{
		float: left;
	    margin-left: 45px;
	}
	.form_list > li > dl > dd > ul > li:first-child{
		margin-left: 0;
	}
	.name_list li dl dt{
	    font-size: 24px;
	    padding-right: 20px;
	}
	.cent_box{
		margin-top: 40px;
		text-align: center;
	}
	.question_cont dt{
		vertical-align: top;
	}
	.form_box input[type="text"]{
		width: 100%;
		height: 75px;
		font-size: 24px;
		padding: 20px;
		box-sizing: border-box;
	}
	.form_box .name_list input[type="text"]{
		width: 240px;
		box-sizing: border-box;
	}
	.form_box textarea{
	    width: 100%;
	    height: 320px;
	    display: block;
		font-size: 24px;
	    padding: 20px;
	    box-sizing: border-box;
	}
	.form_box input[type="checkbox"]{

	}
	.form_box input[type="submit"] {
	    border-radius: 5px;
	    padding: 25px 140px;
	}
}