@charset 'UTF-8';

	/* 商品詳細
	============================================================================== */
	
	figure { margin: 0; }
	figcaption { margin: 10px 0; }
	figcaption p { margin: 0; padding: 0; }

	.item_send_layout,
	.item_send_layout * { box-sizing: border-box; }
	.item_send_layout { margin: 0; padding: 0; /* width: 770px; */ font-size: 12px; font-size: 1.2rem; }
	.item_send_layout a { text-decoration: none; border-bottom: 1px solid; }
	.item_send_layout ul { margin: 0; padding: 0; list-style: none; }
	.item_send_layout .none { display: none; }
	.item_send_layout p { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
	.item_send_layout h2 { margin: 0 0 5px; font-size: 1.2em; }

	.item_send_contents { border:1px solid #ccc; padding: 5px 5px; }


	.today_view_content {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-box;
		display: -webkit-flexbox;
		display: -moz-flexbox;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		/*
		font-family: 'M+ P Type-2 (basic latin) Medium', 'M+ Type-2 (general-j) Medium', Quicksand,游ゴシック体,"Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
		transform: rotate(0.001deg)\9;
		*/
	}
	@-moz-document url-prefix() {
		transform: rotate(0.001deg);
	}
	.today_view_content .on {
		color: #E40060;
	}
	.today_view_content .off {
		color: #0e98f9;
	}

	.today_view_cate {
		display: block;
		display: table-cell\9;
		width: 50%;
	}
	.today_view_layout_mark {
		width: 100px;
		max-width: 100px;
		display: table-cell;
		vertical-align: top;
	}
	.today_view_layout_detail {
		display: table-cell;
		vertical-align: top;
	}
	.today_view_layout_collect  {
		display: table;
		width: 100%;
	}
	.today_view_layout_piece {
		display: table-cell;
		vertical-align: top;
	}

	/* タイトル */
	.today_view_title {
		font-size: 2.2rem;
		line-height: 1;
		width: 7rem;
		display: inline-block;
		vertical-align: middle;
		margin: 0 0 5px;
	}

	/* 可不 */
	.today_view_mark {
		text-align: center;
		position: relative;
		padding: 15px 0 0 0;
	}
	.today_view_mark:before {
		content: "";
		display: block;
		border: 12px solid transparent;
		border-top: 8px solid #1E257C;
		position: absolute;
		top: 0;
		left: 38%;
		left: calc( 50% - 12px );
	}
	.today_view_mark .icon {
		font-size: 1.4rem;
	}
	.today_view_mark .icon em {
		font-size: 2.2rem;
		line-height: 2.6rem;
		display: block;
		font-style: normal;
	}
	.today_view_mark .off em {
		font-size: 1.8rem;
		line-height: 2.6rem;
	}

	/* 受付 */
	.today_view_itemsend { font-size: 1.6rem; line-height: 1; margin: 0 0 5px; }

	/* 最短お届け */
	.today_view_shortest {
		display: inline-block;
		vertical-align: middle;
		font-size: 1.3rem;
		width: 65%;
		width: calc( 100% - 7.5em );
		max-width: 200px;
		/*border: 1px solid #ccc;*/
		border-radius: 5px;
		margin: 0 0 5px;
		padding: 2px 0;
		text-align: center;
	}
	.today_view_shortest strong {
		/*color: #E40060;*/
		font-weight: normal;
	}
	#item_send_normal .today_view_shortest {
		color: #fff;
		background-color: #04AA72;
	}
	#item_send_yakou .today_view_shortest {
		color: #fff;
		background-color: #1E257C;
	}
	#item_send_today .today_view_shortest {
		color: #fff;
		background-color: #E40060;
	}

	/* お届け地域 */
	.today_view_area {
		/* line-height: 1; */
		line-height: 1.2;
		margin: 0 0 5px;
		max-width: 300px;
	}
	.area_service {
		/*
		font-size: 1.4rem;
		line-height: 1.4;
		*/
	}
	.today_view_itemsend_area dl,
	.today_view_itemsend_area dt,
	.today_view_itemsend_area dd { margin: 0; padding: 0; }
	.today_view_itemsend_area dt,
	.today_view_itemsend_area dd { display: inline-block; vertical-align: top; }
	.today_view_itemsend_area dt { width: 5.5rem; display: none; }
	.today_view_itemsend_area dd { width: calc( 100% - 6rem ); width: auto; }
	
	.today_view_itemsend_area dd:before {
		content: "●";
		display: inline-block;
	}

	.today_view_itemsend_area {
		margin: 5px 0;
	}
	.area_service_icon {
		display: block;
		margin: 0 0 5px;
		padding: 0 5px;
		border-radius: 5px;
		text-align: center;
	}
	.area_youhin .area_service_icon {
		background-color: #ffd2e6;
	}
	.area_seitai .area_service_icon {
		background-color: #cce4ff;
	}
	.area_yamaguchi .area_service_icon {
		background-color: #dfffcf;
	}
	.area_airline .area_service_icon {
		background-color: #ffe1be;
	}

	/* 手数料 */
	.today_view_commission {
		line-height: 1;
		margin: 0 0 5px;
		max-width: 300px;
	}
	/* お支払い */
	.today_view_pay {
		/* line-height: 1; */
		line-height: 1.2;
		margin: 0 0 5px;
		max-width: 300px;
	}
	/**/
	.today_view_content .headline {
		font-size: 2rem;
		line-height: 1.5;
	}
	#item_send_special .headline {
		margin: 0 0 10px;
		width: 100%;
	}
	

	/* 通常便 */
	.today_view_cate.normal {
		width: 100%;
		display: table;
		border-bottom: 1px dashed #ccc;
		margin: 0 0 15px;
		padding: 0 0 5px;
	}
	.today_view_cate.normal .detail_main {
		width: 330px;
	}

	.today_view_content.normal {}
	.today_view_content.normal .icon {
		width: 120px;
		vertical-align: top;
		display: table-cell\9;
	}
	.today_view_content.normal .comment {
		width: 83%;
		width: calc( 100% - 120px );
		vertical-align: top;
		display: table-cell\9;
	}
	.today_view_content.normal .title {
		font-size: 2rem;
		line-height: 1.5;
	}
	.today_view_content.normal .time {
		font-size: 1.4rem;
		line-height: 1.5;
	}

	.today_view_graph_wrap {
		position: relative;
		max-width: 320px;
	}
	.today_view_graph_option {
		/* margin: 0 0 5px; */
		position: absolute;
		bottom: 32px;
		right: 0;
	}
	.today_view_graph_option ul {
		/*
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flexbox;
		display: -o-flex;
		display: flex;
		-webkit-justify-content: flex-end;
		-moz-justify-content: flex-end;
		-ms-flex-pack: end;
		-o-justify-content: flex-end;
		justify-content: flex-end;
		*/
	}
	.today_view_graph_option li { padding: 0 10px 0 0; }
	.today_view_graph_option li:before { content: "■"; }
	.today_view_graph_option .youhin:before { color: #04aa72; }
	.today_view_graph_option .seitai:before { color: #00a0d8; }


	/* 通常便only */
	#item_send_normal_only .time {
		color: #E40060;
	}

	/* 注意書き */
	.today_view_caution {
		max-width: 758px;
	}
	.today_view_caution li {
		display: inline;
	}
	.today_view_caution li:before {
		content: "/";
		margin: 0 5px 0 0;
	}
	.today_view_caution li:first-child:before {
		content: "";
		margin: 0;
	}

	.today_view_graph {
		max-width: 300px;
		max-height: 95px;
	}
	.today_view_graph canvas {
		width: 280px;
		height: 90px;
	}
	
	/* 店舗別配送サービス（あす楽・あすつく） */
    .today_view_cate.service {
    	width: 100%;
    	border-top: 1px dashed #ccc;
    	padding: 10px 0;
    }

	/* タイムテーブル
	---------------------------*/
    .item_send_timetable {
        display: table;
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }
    .item_send_timetable dl,
    .item_send_timetable dt,
    .item_send_timetable dd,
    .item_send_timetable ul,
    .item_send_timetable li {
        margin: 0;
        padding: 0;
    }
    .item_send_timetable dl {
        display: table-row;
    }
    .item_send_timetable dt {
        display: table-cell;
        width: 45%;
        padding: 5px;
        border-top: 1px solid #eee;
    }
    .item_send_timetable dd {
        display: table-cell;
        width: 55%;
        border-top: 1px solid #eee;
    }
    .item_send_timetable dl:first-child dt,
    .item_send_timetable dl:first-child dd {
    	border-top: none;
    }
    
    .item_send_timetable ul {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .item_send_timetable li {
        display: block;
        width: 33.3%;
        width: -webkit-calc( 100% / 3 );
        width: calc( 100% / 3 );
        border-left: 1px dashed #ccc;
        padding: 5px;
        text-align: center;
    }
    .stop_tojitu li:nth-child(3) { position: relative; }
    .stop_tojitu li:nth-child(3):before {
    	content: "";
    	background-color: rgba(0,0,0,.3);
    	z-index: 100;
    	position: absolute;
    	top: 0;
    	left: 0;
    	bottom: 0;
    	right: 0;
    }
    .stop_yakou li:nth-child(2) { position: relative; }
    .stop_yakou li:nth-child(2):before {
    	content: "";
    	background-color: rgba(0,0,0,.3);
    	z-index: 100;
    	position: absolute;
    	top: 0;
    	left: 0;
    	bottom: 0;
    	right: 0;
    }
    .stop_yakou .time_table_icon li:before {
    	background-color: rgba(0,0,0,0);
    }
    .stop_yakou .time_table_nowtime li:before {
    	background-color: rgba(0,0,0,0);
    }
    
    
    #delivery_zone_title {
        border-top: 5px solid #eee;
    }
    #delivery_zone dl:nth-child(2) { background-color: #ffd9d9; }
    #delivery_zone dl:nth-child(3) { background-color: #ffd2e6; }
    #delivery_zone dl:nth-child(4) { background-color: #f8ddff; }
    #delivery_zone dl:nth-child(5) { background-color: #d3d4ff; }
    #delivery_zone dl:nth-child(6) { background-color: #cce4ff; }
    #delivery_zone dl:nth-child(7) { background-color: #bae1d3; }
    #delivery_zone dl:nth-child(8) { background-color: #dfffcf; }
    #delivery_zone dl:nth-child(9) { background-color: #f6ffc7; }
    #delivery_zone dl:nth-child(10) { background-color: #ffe1be; }
    
    .time_table_nowtime .icon {
    	display: block;
        font-family: 'M+ Type-2 (general-j) Regular', sans-serif;
        margin: 0 auto;
        padding: 2px 0;
        width: 6em;
        border-radius: 3px;
    }
    .time_table_nowtime .on {
    	color: #fff;
        background-color: #FF1744;
        
    }
    .time_table_nowtime .off {
    	color: #fff;
        background-color: #0e98f9;
    }
    .time_table_nowtime .none {
    	display: none;
    }

	/* パーツ
	--------------------------------- */
	.none { display: none; }
	.color_today { color: #E40060; }
	.color_night { color: #1E257C; }
	.color_normal { color: #04AA72; }

	#today_comment_button a {
		display: block;
		color: #555;
		text-decoration: none;
		background-color: #eee;
		border: none;
		border-radius: 5px;
		margin: 0;
		padding: 10px;
		text-align: center;
		position: relative;
	}
	#today_comment_button a:after {
		content: "";
		display: block;
		border: 6px solid rgba(0,0,0,0);
		border-top: 6px solid #fff;
		position: absolute;
		top: 50%;
		right: 20px;

	}

	/* 夜行便無し
	--------------------------------- */
	.not_night_send #item_send_yakou {
		display: none;
	}
	.not_night_send #item_send_today {
		width: 100%;
	}
	.not_night_send #item_send_today .today_view_layout_detail {
		width: 100%;
		position: relative;
	}
	.not_night_send #item_send_today .today_view_layout_detail .today_view_graph {
		position: absolute;
		top: 5px;
		right: 5px;
	}

	/* font
	--------------------------------- */
	.today_view_title {
		font-family: 'M+ P Type-2 (basic latin) Medium', 'M+ Type-2 (general-j) Medium', Quicksand,游ゴシック体,"Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
		transform: rotate(0.001deg)\9;
	}
	.today_view_itemsend {
		font-family: 'M+ P Type-2 (basic latin) Medium', 'M+ Type-2 (general-j) Medium', Quicksand,游ゴシック体,"Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
		transform: rotate(0.001deg)\9;	
	}
	.today_view_mark {
		font-family: 'M+ P Type-2 (basic latin) Medium', 'M+ Type-2 (general-j) Medium', Quicksand,游ゴシック体,"Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
		transform: rotate(0.001deg)\9;	
	}
	/* 通常便のみ */
	.today_view_content .headline {
		font-family: 'M+ P Type-2 (basic latin) Medium', 'M+ Type-2 (general-j) Medium', Quicksand,游ゴシック体,"Yu Gothic",YuGothic,"ヒラギノ角ゴシック Pro","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
		transform: rotate(0.001deg)\9;		
	}

	/* smartphone
	--------------------------------- */
	@media screen and ( max-width: 736px ) {

		.item_send_layout { width: auto; margin: 0 5px; }
		.item_send_layout img { max-width: 100%; height: auto; }
		.today_view_graph {
			position: relative;
			padding-top: calc( 90 / 280 * 100% );
			overflow: hidden;
		}
		.today_view_graph canvas {
			/* 
			width: 100%;
			height: 100%;
			*/
			position: absolute;
			top: 0;
			left: 0;
		}
		#item_send_special .headline {
			width: auto;
		}
        .item_send_timetable img {
            max-width: 100%;
            height: auto;
        }
		.today_view_layout_piece h2 {
			padding: 0;
		}

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

		.today_view_cate {
			width: 100%;
			margin: 0 0 5px;
			display: table;
		}
		.today_view_cate.normal .detail_main {
			width: auto;
		}
		.today_view_layout_mark {
			width: 110px;
		}
		
		.today_view_pay {
			max-width: none;
		}
		.today_view_area {
			max-width: none;
		}
		.today_view_graph_wrap {
			max-width: 350px;
		}
		.today_view_graph {
			padding-top: 0;
		}
		.today_view_graph canvas {
			position: relative;
		}
		.today_view_layout_piece {
			display: block;
		}
		/* タイムテーブル */
		
        .item_send_timetable,
        .item_send_timetable dl,
        .item_send_timetable dt,
        .item_send_timetable dd {
            display: block;
            width: auto;
        }
        .item_send_timetable dt {
            background-color: #eee;
            border-radius: 5px;
        }
        .item_send_timetable ul li:first-of-type {
            border-left: none;
        }
        .time_table_icon dt {
            background: none;
            padding: 0;
        }
        #delivery_zone dt {
        	background-color: rgba(0,0,0,.1);
        	border-radius: 0;
        }
        #delivery_zone_title dt {
        	background-color: rgba(0,0,0,0);
			background-image: -moz-linear-gradient(top, #eee, #fff);
			background-image: -webkit-linear-gradient(top, #eee, #fff);
			background-image: linear-gradient(to bottom, #eee, #fff);
        }
        #delivery_zone_title dd {
        	display: none;
        }

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


	}

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


		.today_view_layout_mark {
			width: 25%;
			padding: 0 10px 0 0;
		}
		.today_view_content .headline { line-height: 1.2; }

		.today_view_content.normal:not(.none) {
			display: block;
			overflow: hidden;
		}
		.today_view_content.normal .icon {
			width: 25%;
			padding: 0 10px 0 0;
			float: left;
		}
		.today_view_content.normal .comment {
			width: auto;
		}

		.today_view_graph {
			position: relative;
			padding-top: calc( 90 / 280 * 100% );
			overflow: hidden;
		}
		.today_view_graph canvas {
			/*
			width: 100%;
			height: 100%;
			*/
			width: 252px;
			height: 81px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.today_view_graph_option {
			position: relative;
			bottom: 0;
			right: 0;
		}
		.today_view_graph_option ul {
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-ms-flex-pack: end;
			-webkit-justify-content: flex-end;
			justify-content: flex-end;
			margin: 0 0 10px;
		}

	}

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



	}

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

		.today_view_shortest {
			width: auto;
		}
		.today_view_mark .icon em {
			font-size: 1.8rem;
		}
		.today_view_mark .icon.off em {
			font-size: inherit;
			line-height: inherit;;
		}
		/*
		.today_view_layout_mark {
			width: 20%;
			padding: 0;
		}
		*/
		.today_view_graph { display: none; }
		.today_view_graph_option { display: none; }

	}