@charset "utf-8";

@media screen and (max-width: 1000px) {
	/* 上部ページメニュー
	------------------------------*/
	.menu li,
	.menu li:last-child {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		width: 44%;
		/*min-height: 50px;*/
		padding: 5px;
		margin-right: 6%;
	}
	.menu li:nth-child(n + 3) {
		margin-top: 2%;
	}
	.menu li::before,.menu li.on::before {
	    border-width: 35.35px;
	}
	.menu li::after {
	    border-right-width: 25px;
	    border-bottom-width: 25px;
	    top: 50%;
	    right: -8%;
	    -webkit-transform: translateY(-50%) rotate(45deg);
	    transform: translateY(-50%) rotate(45deg);
	}

	/* 購入項目
	-----------------------------------------------*/
	.cart .quantity,
	.cart .subtotal {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	}
	.cart .quantity .change,
	.cart .subtotal .delete {
		margin: 5px;
	}
}

@media screen and (max-width: 768px) {
	body {
    	min-width: 320px;
    }
    body .ui-datepicker {
		max-width: 250px;
	}
	.text span {
		display: inline-block;
		margin: 1px 3px;
	}

	/* header
	---------------------------------------*/
	header#header {
		margin-bottom: 20px;
	}

	/* footer
	---------------------------------------*/
	footer {
		text-align: center;
	}

	/*　見出し　
	-------------------------------------*/
	h3 {
		padding-right: 15px;
		margin-bottom: 20px;
	}

	/*　テーブル　
	-------------------------------------*/
	.content table {
		width: 100%;
	}
	.content tr th,.content tr td,
	#datebox th, #datebox td {
		display: block;
		width: 100%;
		padding: 10px 10px 9px;
	}
	.content table th,.content table tr:not(:last-child) td {
		border-bottom: none;
	}
	.content td.payment .btn, .content td.time .btn {
		margin-top: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
	.content td.time .btn {
		margin-top: 10px;
	}
	.content td.payment .btn label,
	.content td.time .btn label {
		width: 32%;
		padding: 10px 15px;
		margin: 5px 1% 5px 0;
		text-align: center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	}
	.content td.payment .btn label:nth-of-type(3n),
	.content td.time .btn label:nth-of-type(2n) {
		margin-right: 0;
	}
	.content td.time .btn label {
		width: 49%;
	}

	/* リンクボタン
	-----------------------------------------------*/
	.link_btn {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.link_btn input {
		width: 200px;
		padding: 12px 15px 10px;
	}
	.link_btn .left, .link_btn .right {
		width: 100%;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.link_btn .left {
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2;
	}
	.link_btn .right {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
		margin-bottom: 30px;
	}

	/* 購入項目
	-----------------------------------------------*/
	.grand_total .total.last dl.last {
		width: 100%;
	}
	/* 共通 */
	.cart .box > div,
	#cart .total,
	.cart .box .noitem {
		position: relative;
		width: 100%;
		padding: 15px 20px 15px 130px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    -webkit-box-align: center;
	    -ms-flex-align: center;
	    align-items: center;
	}
	.cart .form_box .box, .cart .box {
		flex-wrap: wrap;
	}
	.cart .option, .cart .price,
	.cart .quantity, .cart .subtotal {
		max-width: 100%;
	}
	.cart .box .noitem {
		padding-left: 20px;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	/*　商品一覧　*/
	.cart li.title {
		display: none;
	}
	.cart .box div+div {
		border-left: none;
		border-top: 1px dashed #CCC;
	}
	.cart .box > div::before {
		content: '商品名';
		width: 110px;
	    height: 100%;
	    /*max-width: 200px;*/
	    max-height: calc(100% - 0px);
	    background: #DDD;
	    padding: 10px;
	    text-align: center;
	    overflow: hidden;
		position: absolute;
	    left: 0;
		top: 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
	.cart .box .noitem::before {
		display: none;
	}
	.cart form:nth-child(2n) .box > div::before {
		background: #ccc;
	}
	.cart .box > div.option::before {
		content: 'オプション';
	}
	.cart .box > div.price::before {
		content: '単価';
	}
	.cart .box > div.quantity::before {
		content: '数量';
	}
	.cart .box > div.subtotal::before {
		content: '小計';
	}

	.cart .box > div >div,
	.cart .box > div > dl {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		text-align: left;
	}
	.cart .box > .price {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
	.cart .box > div > dl {
		width: 33.333%;
    	padding-right: 20px;
	}
	.cart .product .data {
		padding: 0;
	}
	.cart .box > div.option {
		min-height: 56px;
	}
	.cart .box > .quantity,
	.cart .box > div.subtotal {
		justify-content: space-between;
	}

	/*　小計一覧　*/
	#cart .total {
		padding: 0px 0px 0px;
	}
	.total dl {
		width: 50%;
	}
	.total dl.last {
		width: 100%;
		border-left: none;
	}

	/* 送料無料まで～
	----------------------------------------------*/
	.postage {
		width: 100%;
	}

	/* お客様情報 お届け先情報入力
	-------------------------------------------------*/
	p.check {
		margin-bottom: 15px;
	}

	/* 内容確認画面
	-------------------------------------------------*/
	#check .cart .quantity {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
	#check .cart .subtotal {
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}
}

@media screen and (max-width: 520px) {
	/* table
	-------------------------------------*/
	.content td.payment .btn, td.time .btn {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.content td.payment .btn label, td.time .btn label {
		width: 49%;
		padding: 10px 9px;
		margin-right: 0;
	}
}

@media screen and (max-width: 480px) {
	/* .content
	----------------------------------*/
	.content h2,
	.content h2.attention {
		font-size: 1.8rem;
	}

	/* 上部ページメニュー
	------------------------------*/
	.menu li {
		font-size: 1.2rem;
		/*min-height: 42px;*/
	}
	.menu li::before,.menu li.on::before {
		border-width: 30px;
		right: -15px;
	}
	.menu li::after {
		border-width: 15px;
	}

	/* リンクボタン
	-----------------------------------------------*/
	.link_btn input {
		width: 100%;
		max-width: 320px;
	}
	.link_btn .right .next {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
		margin: 0 auto 15px;
	}
	.link_btn .right .prev {
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2;
	}

	/* 購入項目
	-----------------------------------------------*/
	.grand_total .total {
		width: 100%;
	}
	.cart .box > div,
	.cart .box .noitem {
		padding: 10px 10px 10px 90px;
	}
	.cart .box .noitem {
		padding-left: 10px;
		font-size: 1.6rem;
	}
	.cart .box > div::before {
		width: 80px;
		padding: 5px;
	}
	.cart .box > div > dl {
		width: 100%;
		padding-right: 0;
	}
	.total dt, .total dd {
		padding: 5px;
	}

	/* thanks
	-------------------------------------*/
	.thanks {
		padding: 12px 10px 10px;
	}

}