@charset "utf-8";


/* #070D44 */
*{ padding:0; margin:0; font-style:normal; font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,arial,'ＭＳ Ｐゴシック',sans-serif;}
h1,h2,h3,h4,h5,ul,li,dt,dd,th,td,img{ list-style:none; margin:0; padding:0; border:none; }
ul,li,dl,dt,dd{ font-size:85%; list-style:none; margin:0; padding:0; line-height:150%;}

h1{ font-size:80%; line-height: 24px; color:#fff;}
h2{ margin:0px; padding:0px;font-size:80%; }
h3{ text-align:left; background: url(https://xcyq4j9l.user.webaccel.jp/common/mark-rogo.gif) no-repeat; text-indent:35px; background-color:#fff; color:#070D44; font-weight:bold;  line-height: 24px;}
h4{ font-size:0.9em; margin:12px 0 3px;; color:black; text-decoration:underline; }
h4:before { clear:both; }
h5{ font-size:0.8em; color:white; background-color:#666; padding:1px 5px; display:inline; font-weight: normal; }
p{ font-size:0.9em; list-style:none; margin:0; padding:0; line-height:155%;}

html { overflow:scroll; }
body { background-color:#070D44; }
div{ margin:0; padding:0;}
form{ margin:0px;}
img{ border:none; margin:0; padding:0; }


input[type='text']{ border:1px solid #CCC; font-size:1.2em; padding:6px 8px; background-color:#FFFF66/*#FFBF00*/; }
input[type='text'].readonly{ background-color:#ffc; border:none; }
textarea { overflow: auto; font-size:1.0em; border:1px solid #CCC; padding:6px 6px; background-color:#FFFF66/*#FFBF00*/; }
	/*#email_address{ width:100%; max-width:500px; }*/
	#message{ width:100%; max-width:500px; }


input[type='password']{ border:1px solid #CCC; font-size:16px; padding:6px 8px; background-color:#FFFF66/*#FFBF00*/; }
input[type='radio']{border:none;cursor:pointer; }
input[type='submit']{font-size:16px; *border:none; padding:2px 5px; cursor:pointer; margin:2px 0;}
input[type='submit'].small{font-size:12px; *border:none; padding:1px 3px; cursor:pointer; margin:2px 0;}
input[type='submit'].mini{font-size:11px; *border:none; padding:1px 2px; cursor:pointer; margin:0;}

/* 2015.03.28
input[type='button']{font-size:16px; *border:none; padding:2px 5px; cursor:pointer; margin:2px 0;}
input[type='button'].small{font-size:12px; *border:none; padding:1px 3px; cursor:pointer; margin:2px 0;}
input[type='button'].mini{font-size:11px; *border:none; padding:1px 2px; cursor:pointer; margin:0;}
*/

input[type="checkbox"]{ font-size: 100%; width: 1em; margin: 0; padding: 0; opacity: 0; font-weight: bold;}
/*
input[type="checkbox"]+label:before{ display: inline-block; content: ""; vertical-align: top; background-color: white; color: black; width: 1.5em; height: 1.5em;
	border-style: solid; border-width: 0.1em; border-color:gray;
	margin-left: -1em; margin-top: 0.25em; margin-right: 0.25em; }
input[type="checkbox"]+label:before{ content: '☆'; border-radius: 0.1875em; }
input[type="checkbox"]:checked+label:before{ content: '★' line-height: 1.5; font-weight: bold;}
input[type="checkbox"]:focus+label:before{ outline: 1px dotted; }
*/
input[type="checkbox"]+label:before{ display: inline-block; content: ""; vertical-align: top; color: gray; width: 1.5em; height: 1.5em;
	margin-left: -0.5em; margin-top: 0.25em; margin-right: 0.25em; font-size:2em; }
input[type="checkbox"]+label:before{ content: '☆';/*☆*/ color:gray;}
input[type="checkbox"]:checked+label:before{ content: '★';/*☆*/ font-weight: bold; color:black;}/*"\2714"*/



button{background:none; border:none; cursor:pointer;}
select{font-size:20px;margin:0px; padding:2px 0; background-color:#FFFF66/*#FFBF00*/; }
option{font-size:11px;margin:5px; padding:2px 2px; }
pre { overflow: auto; white-space: pre-wrap; word-wrap: break-word; }


a.unread{ color:blue; #15c;}

/* ライン */
.line-white{ border-top:1px solid white; margin:1px 0; }
.line-main{ border-top:1px solid #070D44; margin:1px 0; }

/* リンク画像を白くする */
a:hover img { opacity:0.7; filter:alpha(opacity=70); /* IE6・7 */ -ms-filter: "alpha( opacity=70 )"; /* IE8 */ }
button:hover img { opacity:0.7; filter:alpha(opacity=70); /* IE6・7 */ -ms-filter: "alpha( opacity=70 )"; /* IE8 */ }

/* タブの微調整 */
.ui-helper-reset { font-size:80%; }
.ui-tabs .ui-tabs-nav{ padding:0px;}

/* ui-stateの微調整 */
.ui-state-button{ background-color:#F60; color:#FFF; border:1px solid #F30; }

/* 表(jqgrid)の微調整*/
.ui-jqgrid-labels{ font-size:70%; font-weight:normal;}
.ui-jqgrid-title{ font-size:80%; }
.ui-datepicker-trigger{ cursor:pointer; }
div.checker{ margin-right:0px; }

.button-ui { padding:5px 10px; cursor:pointer; }
.button-ui-leftnavi { padding:5px 10px; cursor:pointer; margin:0 25px 10px 5px; font-weight:bold; }
.button-ui-mark { margin-right:6px; cursor:pointer; }

/* メッセージ */
ul.error{ background:#FF0; color:#F00; padding:5px; margin:5px 0; border:2px solid #F00;}
ul.message{ background:#F9C; color:#F00; padding:5px; margin:5px 0; border:2px solid #F00;}


/* 背景色 */
.back-blue{ background-color:#6CF;}
.back-green{ background-color:#0F0;}
.gray{ background-color:#666; }
.attention{ background-color:#FF0; }
.mail{ width:500px; }

#loader {display:none; }

/*
#loginForm {
	position:absolute; top:40%; left:50%; width:480px; height:170px; margin:-80px 0 0 -250px;
	padding:10px; background:#F6F6F6; color:black; text-align:center; }
*/

#loginForm {
	padding:10px; background:#F6F6F6; color:black; text-align:center; }


/* pager */
.pager-count{ margin-top:5px; line-height:normal; padding:2px 4px; border:1px solid #ccc; background-color:#eee; color:#666; }
	span.pager-sum{ font-size:18px; color:#000; font-weight:bold; }	/* pager トータル件数 */
	span.pager-ken{ font-size:18px; color:#000; font-weight:bold; }	/* pager 件数 */
	span.pager-comment{ font-size:12px; margin-right:10px;}			/* pager 件数 */
#pager-under-count{ margin-top:3px; padding-left:4px; }
.pager{ margin:0 0; }



/* 一般 */
.right{float:right;}
.left{float:left;}
.center{text-align:center;}
.hidden{ display:none; }
.clear { clear:both; }
.price{ color:red;}
.rate{ color:red;}
.red{ color:#F00; }
.bold{ font-weight:bold; font-size:150%; }

.logo { height:50px; margin:0; }
.logo-small { width:150px; margin:5px; }

.l{ text-align:left; }
.r{ text-align:right; }
.c{ text-align:center; }
.vc{ vertical-align:middle; }
.m{ vertical-align:middle; }
.b{ font-weight:bold; }
.i{ font-size:16px; }
.auto{ width:auto; }

.area-copyright{ clear: both; padding-top:15px; }
.copyright{ color:white; font-size:small; }

.text-over{ white-space: nowrap;}


table{ width:100%; border-collapse:collapse; color:#000; }
table caption{ color:#000; text-align:left; color:#fff; line-height:15px; font-size:100%; border:#ccc; padding:3px 5px; font-weight:bold;}
table th{ font-weight:normal; padding:2px 3px;}
table td{ font-weight:normal; padding:0px 3px; vertical-align:top;}

iframe{ border:none;}


/* layout */
#wrapper 	{ /*max-width:1600px;*/ width:100%; margin:0 auto; }

/* header */
#wrapper-header{ width:auto; padding:5px 20px 0; margin:0 auto; }
	.area-logo{ margin:0; display: inline; }

	.nav-headsub { display:block; float:right; margin-bottom:10px; }
	.nav-headsub ul li{ float:left; color:white;}
	.nav-headsub ul li a { color:#ccc; display:block; cursor:pointer; padding:2px 5px; font-size:1.2em; }
	.nav-headsub ul li a:hover { color:yellow; }
	.nav-headsub ul li p { display:block; padding:2px 5px; }

	.nav-head { display:block; float:right; margin-top:0px; border-top:1px solid #F7F7D6; border-left:1px solid #F7F7D6; }
	.nav-head ul li{ float:left; text-align: center; background-color: #070F57; border-right: 1px solid #F7F7D6;}
	.nav-head ul li a{ display: block; text-decoration: none; color: white;  line-height: 15px; padding:8px 12px; }
	.nav-head ul li a:hover{ background-color: #454E9E; }
	.nav-head ul li.current{ background-color: #454E9E; }


/* footer */
#wrapper-footer{ width:auto; background-color:#070D44; }
	#area-section-footer{ padding:20px 30px; text-align: center;}

	.nav-footer { text-align: center; }
	.nav-footer ul li{ color:white; display: inline-block;}
	.nav-footer ul li a { color:#ccc; cursor:pointer; padding:2px 6px; }
	.nav-footer ul li a:hover { color:yellow; }
	.nav-footer ul li p { padding:2px 5px; }



/* ***************************************************   */
/* contents ******************************************   */
/* ***************************************************   */
#wrapper-content{ display:block; width:auto; background-color:#FFF; padding:0; }

		/* 全てで利用 */
		.area-section{ width:100%; margin:15px 0 30px; }
		.area-section:after { clear:both; }
		.area-section div { margin:6px; }

		.area-point { border:1px solid /*#FFBF00*/ #999; padding:5px 6px; margin:5px 3px; width:95%; max-width:1000px; display:block; }
		.area-point:after { clear:both; }
		.area-point p { color:#333; padding:6px; }
		.area-point p.s { font-size:0.7em; }
		.area-point img { margin:10px 0; }

		.area-form { border:none; margin:5px 0px; width:95%; max-width:1000px; display:block; text-align: left; }
		.area-form:after { clear:both; }
		.area-form ul li {  margin:0 0 15px 0px; padding:2px 8px 0; border-left:8px solid #ccc;  }
		.area-form ul li div {  color:#333; font-size:1.2em; padding:0px; }
		.area-form ul li p { font-size:0.9em; padding:0 10px; colog:gray; }

		.area-form-login { border:none; margin:5px 0px; display:block; text-align: left; }
		.area-form-login ul li {  margin:0 0 15px 0px; padding:2px 8px 0; border-left:8px solid #ccc;  }
		.area-form-login ul li div {  color:#333; font-size:1.2em; padding:0px; }
		.area-form-login ul li p { font-size:0.9em; padding:0 10px; colog:gray; }
		.area-form-login ul li input[type='text'],input[type='password']{ width:96%; }

		.button-position-r{ text-align: right; margin-right:15px; }
		.button-position-l{ text-align: left; margin-left:5px; }
		.button-position-c{ text-align: center; }

			.button{ padding:10px 20px; text-decoration:none; background-color: #FF8400; color: #070D44; border-style: none; font-weight: bold; }
			.button:before{ content: '▶';/*►*/ margin-right: 3px;}
			.button:hover{ background-color: #FDA94F; }

			.button-mini{ font-size: 0.8em; padding:4px 4px; text-decoration:none; background-color: #FF8400; color: #070D44; border-style: none; font-weight: bold; }
			.button-mini:before{ content: '▶';/*►*/ margin-right: 2px;}
			.button-mini:hover{ background-color: #FDA94F; }

			.button-option{ font-size: 0.9em; padding:4px 5px; text-decoration:none; background-color: #FF8400; color: #070D44; border-style: none; font-weight: bold; margin-bottom:3px;}
			.button-option:before{ content: '▶';/*►*/ margin-right: 2px;}
			.button-option:hover{ background-color: #FDA94F; }

			.button-cancel{ font-size: 0.7em; padding:4px 8px; text-decoration:none; background-color: #cfcfcf; color: #070D44; border-style: none; margin-top:8px;}
			.button-cancel:hover{ background-color: #efefef; }

			.button-big{ font-size: 1.4em; padding:15px 30px; text-decoration:none; background-color: #FF8400; color: #070D44; border-style: none; margin-top:10px; }
			.button-big:before{ content: '▶';/*►*/ margin-right: 2px;}
			.button-big:hover{ background-color: #FDA94F; }

				.button-off{ background-color: #cfcfcf; color: #070D44;}
				.button-off:hover{ background-color: #efefef; }

				.button-return{ background-color: #FFaa00; color: #070D44;  }
				.button-return:before{ content: '◀'; }
				.button-return span{ font-size: 75%;}

			.button-img{ display:inline-block; }
		.text-over{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

	/* レフトナビ */
	#area-section-left{ width:190px; margin:0 auto; float:left; padding:5px; }
		.area-category{ width:100%; margin:0 0 30px 0; }
		.area-category div { font-size:0.7em; padding:8px 8px; background-color:#070D44; color:white; }
		.area-category p { font-size:0.9em; overflow: hidden; text-overflow: ellipsis; }
		.area-category ul { }
		.area-category ul li{ border-bottom: 1px #bfbfbf dotted; text-align: left; }
		.area-category ul li a{ color:black; text-decoration: none; padding:8px 3px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		.area-category ul li.current{ background-color: #AAEEFF; }
		.area-category ul li a:hover{ background-color: #AAEEFF; }
		.area-category ul li a:before{ content: '▶'; font-size:0.7em; margin-right: 2px;}

		/*calendar*/
		.calendar { font-size:0.8em; }
		.calendar table{ width:95%; background-color:#ffffff; text-align:center; color:#000; margin: 0 auto 10px; }
		.calendar table caption{ margin:1px 0; padding:3px 1px 3px 1px; color:#FFF; text-align:center; font-weight:normal; }
		.calendar table th{ border:1px solid #ddd; background-color:#E7E7E7; }
		.calendar table td{ border:1px solid #ddd; }
		.calendar p{ margin: 3px auto; width:95%; }
			.importday{ color:$666; background-color:#FeF; }
			.importedday{ color:$666; background-color:#ffe; }
			.today{ background-color:orange; }
			.stopday{ color:black; background-color:#FeF; }
			.workday{ color:black;  }
			.shipday{ background-color:lime; }
			.space{ margin:0 3px; width:18px; display: inline-block; }

			.holiday{ background-color:#E7E7E7; }
			.saturday{ color:#00F; }
			.sunday{ color:#F00; }


	/* パンくずエリア */
	#area-section-pankuzu{ }
		.ul-pankuzu-default{ }
		.ul-pankuzu-default ul { }
		.ul-pankuzu-default ul li { float:left; }
		.ul-pankuzu-default ul li.arrow{ padding:3px; }
		.ul-pankuzu-default ul li.current{ padding:3px; }
		.ul-pankuzu-default ul li a { display:block; padding:3px 4px; text-decoration: underline; }
		.ul-pankuzu-default ul li a:hover { cursor:pointer; }

		/* オーダー時パンくず */
		.ul-pankuzu-order { text-align: center; margin:0 auto; max-width:700px; }
		.ul-pankuzu-order ul { margin:0 5px; font-size:1.0em; }
		.ul-pankuzu-order ul li{ float:left; padding:4px 6px; background-color:white; margin-right:8px; border:1px solid gray; width:90px; }
		.ul-pankuzu-order ul li.current{ background-color:#AAEEFF; }

		.layout-pankuzu{ width:100%; padding:5px 0 5px; }






	/* メイン */
	#area-section-main{ clear: both; }
		.layout-normal{ width:80%; width:calc(100% - 210px); float:right; } /* calc対応してないブラウザは80%*/
		.layout-order{ width:100%; }



	/* 生地検索フィルタ */
	#area-section-filter{ }
		.area-move{ margin:0 auto; display: block; float:right; color:white; opacity: 0.8; z-index:2000;}
		.area-move:hover{ opacity: 1.0; }

		.search{ background-color: black; color:white; padding:10px 12px; float: right; border: 3px solid white;}

		.area-filter{ background-color: black; padding:6px 12px; float:right; border: 3px solid white; width:80%; text-align:center; }
		.area-filter-category{ width:auto; height:55px; display: inline-block; float: left; margin-right:8px; }
		.area-filter-category .title{ font-size:0.6em; }
		.area-filter-category ul{  }
		.area-filter-category ul li{ float:left; margin-right:4px; }
		.area-filter-category ul li img{ cursor:pointer; }
		.area-filter-category ul li.text{ /*float:none;*/ font-size:140%; margin-right:15px; }

	/* トップページスクリーン */
	#area-section-topscreen{ width:100%: height:660px; background-image:url(https://xcyq4j9l.user.webaccel.jp/top/background.gif); background-repeat:repeat-x; text-align: center; }
		.area-topscreen{ width:auto: margin:0px auto; }
		/*.area-topscreen h2{ color:#070D44; font-size:100%; text-align: left; position: absolute; margin: 10px 15px;}*/

		.area-topscreen-catchside{ width:50%; min-width:500px; max-width: 700px; display: inline-block; padding:15px; text-align: left; vertical-align:top; }
		.area-topscreen-catchside h2{ color:#070D44; font-size:100%; position: absolute;}
		.area-topscreen-catchside img{ margin:50px 0; }
		.area-topscreen-catchside .lead{ margin:0 0 0 30px; }

		.area-topscreen-imageside{ width:36%; display: inline-block; vertical-align: bottom; }
		.area-topscreen-imageside img{ width:100%; max-width:380px; }
			.topscreen-p { font-size:1em; }
			.topscreen-link { margin:15px; font-size:1em; }

	/* バナー */
	#area-section-banner{ width:100%; margin:0 auto; padding:10px 0; }
		.area-banner{ width:auto: margin:0px auto; }

		.ul-banner { text-align: center; }
		.ul-banner ul { width:auto; margin:0 auto; display: inline-block; vertical-align: top; }
		.ul-banner ul li{ margin:0 5px; display: inline-block;}
		.ul-banner ul li a{ display: inline-block; }

		.ul-banner ul li.text {}
		.ul-banner ul li.text p { width:100%; border:1px solid gray; background-color:white; display: inline-block; }

		.ul-banner ul li img{ width:100%; }
		.ul-banner ul li.col4 { width:23%; }
		.ul-banner ul li.col5 { width:18%; }



	/* ガイドページ */
		.area-guide h2{ font-size:1.0em; background-color: #070D44; text-align: center; width:100%; max-width: 1000px; padding:30px 0; color:white; line-height: 2em; }
		.area-guide h2 img{ background-color: white; text-align: center; width:100%; max-width:685px; padding:0px; margin:0 auto;}

	/* howtoページ */
		.area-howto h2{ font-size:1.0em; background-color: #070D44; text-align: center; width:100%; max-width: 1000px; padding:30px 0; color:white; line-height: 2em; }
		.area-howto h2 img{ background-color: white; text-align: center; width:100%; max-width:685px; padding:0px; margin:0 auto;}
		.area-howto ul li{ padding:10px; margin-left:15px; font-size: 100%; }
		.area-howto p{ padding:15px; }



	/* マイページ */
		.area-account{}
		.area-account .row{ margin:0 0 15px 0px; padding:2px 8px 0; border-left:8px solid #ccc;  }
		.area-account .item{ float:left; margin-top:8px; }
		.area-account .title{ padding:6px 10px; background-color:#ddd; font-size:80%; display:inline; margin-right:0px; }
		.area-account .cont{ display:inline; }
		.area-account .cont input[type='submit']{ font-size:12px; }



	/* オーダーフォーム */
		/* ステップエリア */
		.area-step{ width:auto; max-width:1500px; background:#FFF; padding:30px; margin:0 auto 35px; }
			.ul-orderflow li{ font-size:1em; }

		/* 生地枠(t top/ o option) */
		.area-kiji ul { text-align:center; }
		.area-kiji ul li{ display: inline-block; width:200px; padding:15px 15px; border:none; margin:5px; position: relative; vertical-align: top; }
		.area-kiji ul li a{ text-decoration: none; color: black; }
		.area-kiji ul li a:hover{ text-decoration: underline; }
		.area-kiji .select{ background-color: #FFE4B5;  }
		.area-kiji .mark-img{ text-align: left; position: absolute; top:10px; left:15px; z-index:101;}
		.area-kiji .mark-stock{ position: absolute; top:25px; left:150px; z-index:101;}
		.area-kiji .mark-check{ margin: 6px 0; /*position: absolute; top:5px; left:150px; z-index:101; font-size:1.2em; */}
		.area-kiji .mark-check{ float:left; }

			/* toppage向け */
			.area-kiji-t ul {  }
			.area-kiji-t ul li{ height:260px; }

			/* option 向け */
			.area-kiji-o ul {  }
			.area-kiji-o ul li{ height:380px; }
			.area-kiji-o .rate{ font-size: 1.4em; float:right; text-align: right; }
			.area-kiji-o .rate span{ font-size: 0.7em; }
			.area-kiji-o .material{ clear: both; }

			.area-kiji-77 ul li{ height:210px; }


			/* 生地ハイスライド時 */
			.area-kijidetail th{ background-color: #ccc; border:3px solid white; }
			.area-kijidetail .caption{ position: absolute; top:-130px; margin:0 15px 0 10px; padding:5px; background-color:white; opacity:0.6; }

		/* デザイン変更 */
		.area-style{ width:auto; max-width:1500px; background:#FFF; padding:3px; margin:0 auto; }

		/* カートテーブル */
		.area-cart { width:auto; max-width:1500px; background:#FFF; padding:3px; margin:0 auto; }
		.area-cart tr.attention { background-color: #FC6; font-size: 1.4em; }
			.cart-item { clear: both; margin:13px 5px 0; border-left:2px solid #ccc; border-right:2px solid #ccc; }
			.cart-item-title { margin-left:3px; }
			.cart-item-detail { font-size:0.7em; }

			.cart-item-detail-list { border-right:1px solid #ccc; width:auto; float:left; padding: 0 4px 0; height:320px; text-align: center; }
			.cart-item-detail-list .title{ margin:0 10px 6px; padding:2px; background-color: #ddd; }

			.cart-item-total { width:auto; }
			.cart-item-total table{ width:auto; }
			.cart-item-total tr{ }
			.cart-item-total th{ background-color:#ddd; border:4px solid white; padding:1px 6px; text-align:center; color:#666; font-size:0.8em; }
			.cart-item-total td{ vertical-align: middle; padding:10px; font-size:1em; }

			.cart-coupon { margin:5px auto 40px; text-align: center; }
				.area-coupon { width:auto; }
			.cart-next { width:auto; margin:8px auto 25px; text-align: center; }


		/* シャツ見本枠 */
		.area-sampleshirt-t ul { text-align:center; }
		.area-sampleshirt-t ul li{ display: inline-block; width:300px; height:420px; padding:10px; border:none; margin:5px; position: relative; vertical-align: top; }
		.area-sampleshirt-t ul li a{ text-decoration: none; color: black; }
		.area-sampleshirt-t ul li a:hover{ text-decoration: underline; }
		.area-sampleshirt-t .lead { font-size:1.0em; text-align: left; }
		.area-sampleshirt-t img { width:300px; cursor:pointer; }


		/* オプション枠 */
		.area-option-unit .area-option-unit-name{ background-color: #FFFF66; padding:3px 5px; margin:0 5px; border:1px solid #ccc; }
		.area-option-unit .point { padding:10px 10px; }
		.area-option-unit ul { text-align:center; }
		.area-option-unit ul li{ display: inline-block; padding:5px 5px; border:none; margin:5px; position: relative; vertical-align: top; }
		.area-option-unit ul li label:hover{ text-decoration: underline; }
			.area-collar-style-unit ul li{ width:150px; }
			.area-collar-size-unit ul li{ width:250px; }
			.area-cleric-unit img { margin:5px 10px 5px 5px; }
			.area-cleric-unit .area-option-unit-name { font-size:1.4em; padding:10px; }
			.area-stitch-unit img { margin:5px 10px 5px 5px; }
			.area-stitch-unit .area-option-unit-name { font-size:1.4em; padding:10px; }
			.area-stitchColor-unit ul li{ width:55px; }
			.area-stitchColor-unit .area-option-unit-name { font-size:0.7em; padding:5px; }
			.area-keeper-unit img { margin:5px 10px 5px 5px; }
			.area-keeper-unit .area-option-unit-name { font-size:1.4em; padding:10px; }

			.area-cuff-style-unit ul li{ width:175px; }
			.area-cuff-style-unit ul li img{ width:135px; }
			.area-cuff-size-unit ul li{ width:250px; }

			.area-button-color-unit ul li{ width:115px; }
			.area-button-color-unit ul li img{ width:100px; }
			.area-button-line-unit ul li{ width:115px; }
			.area-button-line-unit ul li img{ width:40px; }
			.area-button-sewing-unit ul li{ width:200px; }
			.area-button-sewing-unit ul li img{ width:170px; }

			.area-front-style-unit ul li{ width:300px; }
			.area-front-pocket-unit ul li{ width:180px; }
			.area-front-pocket-unit ul li img{ width:150px; }

			.area-back-tuck-unit ul li{ width:200px; }
			.area-back-tuck-unit ul li img{ width:170px; }
			.area-back-tuck-unit ul li{ width:200px; }
			.area-back-tuck-unit ul li img{ width:170px; }

			.area-name-style-unit .area-option-unit-name { font-size:1.4em; padding:10px; }

		/* オプション（ページ） */
		.area-option{ max-width:1500px; background:#FFF; padding:3px; margin:0 auto; }
			.area-option .list-k{ }
			.area-option .list-k h3{ background: none; text-indent: 0px; font-weight: normal; font-size: 12px; /*color:#666;*/ }
			.area-option .list-k img{ width:100%; max-width:200px; }
			.area-option .list-j .tablearea{ max-width:50%; }
			.area-option .list-k table{ }
			.area-option .list-k table th { background-color: #eee; padding:3px 5px; font-size:0.8em; border:2px white solid; }
			.area-option .list-k table td { background-color: #fff; padding:3px 5px; font-size:0.8em; border:2px white solid; }

			.area-option .detail-m{ width:95%; max-width:600px;  }
			.area-option .detail-m img{ width:100%; }

			.area-option .detail-s{ max-width:180px; }
			.area-option .detail-s img{ max-width:70px; float: left; padding:0 5px 5px 0; }

			.area-option .detail-m-o{ width:75%; max-width:600px;  }
			.area-option .detail-m-o img{ width:100%; max-width:200px; }

			.area-option .list-j{ }
			.area-option .list-j h3{ background: none; text-indent: 0px; font-weight: normal; font-size: 12px; /*color:#666;*/ }
			.area-option .list-j img{ width:100%; max-width:300px; }
			.area-option .list-j .tablearea{ max-width:50%; }
			.area-option .list-j table{ }
			.area-option .list-j table th { background-color: #eee; padding:3px 5px; font-size:0.8em; border:2px white solid; }
			.area-option .list-j table td { background-color: #fff; padding:3px 5px; font-size:0.8em; border:2px white solid; }

		/* サイズ */
		.area-size{ text-align: center; max-width:1500px; background:#FFF; padding:3px; margin:0 auto; }
		.area-size h4{ margin:0px; text-decoration: none; }
		.area-size h5{ display: block; }
		.area-size .area-measureType span{ background-color: red; padding:3px; color:white; } /* オススメ */
		.area-size .point{ padding:10px; background-color: #ddd; }

			.area-measureType{ width:30%; float:left; text-align: center; padding:10px; margin-bottom:10px;  }
			.area-measureType img{ width:100%; max-width:300px; position:relative; }
			.area-measureType-select{ border:3px solid #FFBF00; background-color:#FAEBD7; }
			.area-measureType-select:after{ background-color: red; color:white; padding:3px 4px;  content:"[選択中]"; font-size:0.8em;  }

			.area-measureLogin{ width:80%; max-width:480px; min-width:380px; border:3px solid #ccc; margin:0 auto; display: inline-block; padding:10px; }

			.help{ border:solid 1px black; padding:2px 8px; background-color: blue; color:yellow; font-size:1.0em; font-weight:bold;  }

		/* サイズの注意事項 */
		.area-size .note{ padding:20px; text-align: left; background-color: #ddd; }
			.area-size .note{ padding:20px; text-align: left; background-color: #ddd; }
			.area-size .note ul { text-align:center; }
			.area-size .note ul li{ display: inline-block; padding:5px 5px; margin:5px; }
			.area-size .note ul li.l{ display: inline-block; padding:5px 5px; margin:5px; }

		.area-size .area-form { margin:5px auto; max-width:1400px; }
		.area-size .area-form ul { padding:5px 0; }
		.area-size .area-form ul li { float:left; margin:0 0 15px 8px; width:28%; }
		.area-size .area-form ul li img{ width:100%;}
		.area-size .area-form ul li div {  color:#333; font-size:1.2em; padding:0px; }
		.area-size .area-form ul li p { font-size:0.9em; padding:0 10px; colog:gray; }
		.area-size .area-form ul li input[type='text']{ width:100px; }




		.area-size ul.items { font-size:0.8em; padding:5px 8px; }
		.area-size ul.items li { float:left; margin:6px 0 0 0;  }
		.area-size ul.items li .cont { border-bottom:solid #ddd 1px; }


		/* お客様情報 */
		.area-customer{ text-align: center; max-width:1500px; background:#FFF; padding:3px; margin:0 auto; }
		.area-customer .area-form { margin:5px auto; max-width:1400px; }
		.area-customer .area-form ul { padding:5px 0; }
		.area-customer .area-form ul li div{ margin: 6px; }
		.area-customer .area-form ul li input[type='text'],textarea{ width:96%; }
		.area-customer .area-form ul li .col{ }
		.area-customer .area-form ul li .row{ display:inline-block; }
		.area-customer .area-form .name input[type='text']{ max-width:200px; }
		.area-customer .area-form .postno input[type='text']{ max-width:100px; }
		.area-customer .area-form .post input[type='text']{ max-width:400px; }
		.area-customer .area-form .telno input[type='text']{ max-width:180px; }
		.area-customer .area-form .email input[type='text']{ max-width:480px; }
		.area-customer .area-form .password input[type='password']{ max-width:260px; }
		.area-customer .area-form .memo{ width:100%; }
		.area-customer .area-form .memo textarea{ max-width:800px; height:120px; }


		/* ご注文最終確認 */
		.area-confirm{ max-width:1500px; background:#FFF; padding:3px; margin:0 auto; }
		.area-confirm { margin:5px auto; max-width:1400px; }

			.area-confirm { width:auto; }
			.area-confirm table{ width:auto; }
			.area-confirm tr{ }
			.area-confirm th{ background-color:#ddd; border:4px solid white; padding:10px; text-align:center; color:#666; font-size:0.8em; }
			.area-confirm td{ border:4px solid white; padding:10px; vertical-align: middle;  font-size:1em; }

			.area-confirm .confirm{ background-color: #CCFFCC; }
/*
			.area-confirm .row{ float:left; margin-right:12px;  }
			.area-confirm .title{ background-color:#ddd; border:4px solid white; padding:10px; text-align:center; color:#666; font-size:0.8em;  }
			.area-confirm .cont{ vertical-align: middle; padding:10px; font-size:1em; }
*/

		/* 完了 */
		.area-credit{ max-width:1500px; background:#FFF; padding:3px; margin:0 auto; }
		.area-credit { margin:5px auto; max-width:1400px; }

	/* その他 */
	.divtable{ text-align: center; margin:0px auto; }
	.divtable-col3{ display: inline-block; width:30%; vertical-align: top; text-align: left; }

	#canvas-contents{ clear:both;}

	/* (720px～) ipad / タブレット / NotePC / 小さ目モニタ */
	@media screen and (max-width: 1023px){
		.layout-normal{ width:100%; float:none;  }

		/* レフトナビ */
		#area-section-left{ width:100%; float:none; text-align: center; padding: 0px; }
			.area-category{ width:24%; display: inline-block; vertical-align: top; }

		.area-guide{ padding:15px; }
		.area-guide h2{ font-size:1.0em; background-color: #070D44; text-align: center; width:100%; max-width: 1000px; padding:30px 0; color:white; line-height: 2em; }
		.area-guide h2 img{ background-color: white; text-align: center; width:100%; max-width:685px; padding:0px; margin:0 auto;}

		/* header */
		#wrapper-header{ padding:3px 0 0; margin:0 auto; }
			h1{ margin:3px 3px 5px 3px; }
			.area-logo{ margin:0 auto; display: block; text-align: center; }

			.nav-headsub { display:block; float:right; }
			.nav-headsub ul li{ float:left; color:white;}
			.nav-headsub ul li a { color:#ccc; display:block; cursor:pointer; padding:2px 5px; font-size:1.2em; }
			.nav-headsub ul li a:hover { color:yellow; }
			.nav-headsub ul li p { display:block; padding:2px 5px; }

			.nav-head { width:100%; display:inline-block; float:none; border:none; text-align: center; font-size:0.95em; }
			.nav-head ul { }
			.nav-head ul li{ display:inline-block; float:none; width:16%; border:none; vertical-align: top;  }
			.nav-head ul li a{ height:30px; padding:0; line-height: 30px; }

		/* トップページスクリーン */
		#area-section-topscreen{ }
			.area-topscreen-catchside{ width:50%; min-width:300px; max-width: 700px; display: inline-block; padding:15px; text-align: left; vertical-align:top; }
			.area-topscreen-catchside h2{ color:#070D44; font-size:100%; position: absolute;}
			.area-topscreen-catchside img{ margin:40px 0 30px; width:100%; }
			.area-topscreen-catchside .lead{ margin:0 0 0 30px; }

			.area-topscreen-imageside{ width:36%; display: inline-block; vertical-align: bottom; }
			.area-topscreen-imageside img{ width:100%; max-width:380px; }
				.topscreen-p { font-size:0.95em; }
				.topscreen-link { margin:15px; font-size:1em; }

			/* 生地枠(t top/ o option) */
			.area-kiji ul { }
			.area-kiji ul li{ padding:8px; }

		/* オプションページ*/
			.area-option .detail-s{ max-width:100%; }
	}

	/* タブレット枠つくる(520～800) http://s-ej.com/glossary/resolution.html？*/


	/* スマホ iphone3横版(320px～) */
	@media screen and (max-width: 719px){
		h1{ font-size:0.7em; line-height: 15px;}
		h3 { font-size:0.7em; line-height: 15px;}

		/* レフトナビ */
		#area-section-left{ }
			.area-category{ width:100%; display: block; text-align: left; }
			iframe{ width:100%; }

		/* header */
		#wrapper-header{ }
			.nav-headsub { margin-top:0px; font-size:0.8em; }

			.nav-head { }
			.nav-head ul { }
			.nav-head ul li{ width:30%; }
			.nav-head ul li.device-none{ display: none; }

		/* トップページスクリーン */
		#area-section-topscreen{ }
			.area-topscreen-catchside{ width:auto; min-width:0; max-width: none;
				background-image: url(https://xcyq4j9l.user.webaccel.jp/top/catch.jpg); background-size: contain; background-repeat: no-repeat; background-position: right bottom; }
			.area-topscreen-catchside h2{ font-size:0.7em; line-height: 15px;
    			text-shadow: 0 1px 0 #eee, 1px 0 0 #eee, 0 -1px 0 #eee, -1px 0 0 #eee, -1px -1px 0 #eee, 1px -1px 0 #eee, -1px 1px 0 #eee, 1px 1px 0 #eee;}
			.area-topscreen-catchside img{ margin:25px 0 5px; width:65%; }
			.area-topscreen-catchside .lead{ margin:0px; padding:5px; font-size:0.7em; line-height: 10px;
    			text-shadow: 0 1px 0 #eee, 1px 0 0 #eee, 0 -1px 0 #eee, -1px 0 0 #eee, -1px -1px 0 #eee, 1px -1px 0 #eee, -1px 1px 0 #eee, 1px 1px 0 #eee; }

			.area-topscreen-imageside{ display:none; }
		/* バナー */
		#area-section-banner{ }
			/* バナー部*/
			.ul-banner ul li.col4 { width:46%; }
			.ul-banner ul li.col5 { width:46%; }

		/* 生地 */
			/* 生地枠(t top/ o option) */
			.area-kiji ul { text-align:center; }
			.area-kiji ul li{ width:90%; padding:10px; margin:0px; height:auto; }
			.area-kiji img { width:100%; max-width:280px; margin: 0 auto; }

			/* シャツ見本枠 */
			.area-sampleshirt-t ul li{ width:100%; padding:0px; margin:3px; height:auto; }
			.area-sampleshirt-t img { width:100%; margin: 0 auto; }


			.area-section div{ margin:3px; }


		/* 採寸ページ */
			.area-measureType{ width:90%; text-align: left; padding:10px; margin-bottom:10px;  }
			.area-measureType p { font-size:1.0em; }
			.area-measureType img{ width:20%; max-width:300px; float:left; }

			.area-measureLogin{ width:90%; max-width:480px; min-width:0px; border:3px solid #ccc; margin:0 auto; display: inline-block; padding:10px; }


			.area-size .area-form ul li { margin:0 0 15px 8px; width:92%; }
			.area-size .area-form ul li img{ width:90%;}

		/* オーダー時パンくず */
		.ul-pankuzu-order { }
		.ul-pankuzu-order ul { font-size:0.8em; margin:0 auto; }
		.ul-pankuzu-order ul li{ float:left; padding:2px 2px; background-color:white; margin-right:2px; border:1px solid gray; width:13%; height:45px; }

		/* オプションp */
		.area-option .list-k .tablearea{ max-width:100%; }
		.area-option .list-j .tablearea{ max-width:100%; }
			.area-option .detail-s{ max-width:100%; }
	}
	.slick-prev{ left:3px; }
	.slick-next{ right:3px; }
	.slick-prev:before, .slick-next:before{ color:black; }
	.slick-slider{ margin-bottom: 0px; }


table.list{ width:auto; background:#FFF; padding:3px; }
table.list caption{ }
table.list tr{ }
table.list th{ text-align:center; background-color:#ddd; color:#666; border: solid 1px #ccc; font-weight:normal; line-height:16px; }
table.list td{ border:solid 1px #ccc; }





/* tip 使い方：<div id="bless" class="n" style="top:-10px; width:140px;"> */
#bless { cursor: default; background-color: #333; /* fallback for browsers that dont support rgba */
	background-color: rgba(0, 0, 0, 0.8); border-radius: 6px; color: #FFF; /*display: none;*/ padding: 10px; position: relative;  white-space: nowrap; z-index: 2; font-size:12px; }
#bless.n:before, #bless.e:before, #bless.s:before, #bless.w:before,#bless.ne:before, #bless.nw:before, #bless.se:before, #bless.sw:before {
	content: ""; position: absolute; }
#bless.n:before, #bless.s:before {
	border-right: 5px solid transparent; border-left: 5px solid transparent; left: 50%; margin-left: -5px; }
#bless.e:before, #bless.w:before {
	border-bottom: 5px solid transparent; border-top: 5px solid transparent; margin-top: -5px; top: 50%; }
#bless.n:before {
	border-top: 10px solid rgba(0, 0, 0, 0.8); bottom: -10px; }
#bless.e:before {
	border-right: 10px solid rgba(0, 0, 0, 0.8); left: -10px; }
#bless.s:before {
	border-bottom: 10px solid rgba(0, 0, 0, 0.8); top: -10px; }
#bless.w:before {
	border-left: 10px solid rgba(0, 0, 0, 0.8); right: -10px; }
#bless.ne:before, #bless.se:before {
	border-right: 10px solid transparent; border-left: 0; left: 10px; }
#bless.nw:before, #bless.sw:before {
	border-left: 10px solid transparent; border-right: 0; right: 10px; }
#bless.ne:before, #bless.nw:before {
	border-top: 10px solid rgba(0, 0, 0, 0.8); bottom: -10px; }
#bless.se:before, #bless.sw:before {
	border-bottom: 10px solid rgba(0, 0, 0, 0.8); top: -10px; }