@charset "utf-8";
/* *********************************************** 
initialize
************************************************ */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
		box-sizing:border-box;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
/*
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
*/
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}
button, input, select, textarea {
  font-family : inherit;
  font-size   : 1em;
}
textarea {
	width:100%;
}

/* *********************************************** 
clearfix 
************************************************ */
.clearfix:before,
.clearfix:after {
	content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

/* *********************************************** 
IE7
************************************************ */
*:first-child+html section,
*:first-child+html aside,
*:first-child+html article,
*:first-child+html div {
	hasLayout: true;
}

/* *********************************************** 
link
************************************************ */
a:link,
a:visited {
	color:#36F;
}
a:hover,
a:active {
	color:#F36;
}

/* ***********************************************
共通部品
************************************************ */
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}

.ml4emb {margin-left:4em; display:inline-block;}

.ti1 {text-indent: 1em;}
.ti2 {text-indent: 2em;}
.ti3 {text-indent: 3em;}
.ti4 {text-indent: 4em;}
.ti5 {text-indent: 5em;}
.ti70px {text-indent: 70px;}

.c-f33 {color: #F33;}
.c-c00 {color: #C00;}
.c-f33b {color: #F33; font-weight: bold;}

.sp-rmks1 {
	color: #f33;
}


.fs08em {font-size:0.8em;}

.img-responsive {
	width:100%;
	height:auto;
}

/* *********************************************** 
body
************************************************ */
body {
	z-index:1;
	width: 100%;
	box-sizing: border-box;
	margin:0;
	padding:0;
	border:0;
	color: #333;
	background-color:#FFF;
	font-size:1em;
	line-height:1.5em;
	text-align: left;
	font-family: "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo",sans-serif;
}
body, button, input, select, textarea, label {
    font-family: "ヒラギノ角ゴ Pro", ヒラギノ角ゴ, "Hiragino Sans", ヒラギノ角ゴシック, メイリオ, Meiryo, sans-serif;
}
/* *********************************************** 
wrap
************************************************ */
#wrap {
	margin:0;
	padding:0;
	box-sizing: border-box;
	width: 800px;
	text-align: left;
	background-color:#FFF;
	z-index:1;
}
#wrap-inner {
	width:100%;
	box-sizing: border-box;
	margin:0;
	padding:0 40px;
	background-color: #fff;
}

/* *********************************************** 
header,footer
************************************************ */
header {
	margin:0;
	padding:0;
	border:0;
	box-sizing: border-box;	
	width: 100%;
	height:100px;
}
footer {
	margin: 0;
	padding:0;
	box-sizing: border-box;	
	width: 100%;
	background-color:#cc0000;
	color:#FFF;
	font-weight: normal;
	text-align:center;
	font-size: 1em;
}
footer {
	margin-top:20px;
	font-size:0.85em;
}
.footer-rmk {
	font-weight:normal;
}

.homelink,.homelink2 {
	margin:10px 0 0 0;
	box-sizing: border-box;	
	width: 100%;
	text-align: center;
}
.homelink p,.homelink2 p {
	font-size:0.85em;
}
.homelink2 {
	margin: 30px 0 0 0;
}

/* *********************************************** 
h1
************************************************ */
h1 {
	font-weight: normal;
	font-style:normal;
}

/* *********************************************** 
h2
************************************************ */
h2 {
	box-sizing:border-box;
	margin: 0;
	font-weight: 600;
	font-size: 1.1em;
	letter-spacing:0.1em;
	border-left: 5px solid #c22;
	padding: 3px 0 0 7px;
	line-height: 1.5em;
/*	background-color:#FEEED6; */
}
.h2-sprmks1 {
	margin-left: 1em;
	font-size: 0.8em;
	font-weight:normal;
}

/* *********************************************** 
section
************************************************ */
#sec-intr,#sec-a,#sec-o,#sec-u,#sec-ct,#sec-cf {
	margin:50px 0 0 0;
	padding: 0;
	width:100%;
	box-sizing:border-box;
}
#sec-intr {margin:20px 0 0 0;}

/* *********************************************** 
初期非表示
************************************************ */
#umoji,#bonji,#honzon,#ublank,#sec-cf {
	display:none;
}

/* *********************************************** 
intro
************************************************ */
#order-flow {
	margin:10px 0 0 0;
}

/*
#intr1 {
	margin: 10px 0 0 0;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-items: center;
}
.intr11 {
	box-sizing:border-box;
	margin: 0 0 0 0;
	padding: 5px;
	width:100%;
	border-width: 1px;
	border-style:solid;
	border-color: #999;
	border-radius: 100px;
	text-align:center;
}
.intr12 {
	width:100%;
	height:36px;
	text-align:center;
}
#intr2 {
	margin:20px 0 0 0;
}	
*/
	
/* *********************************************** 
grid
************************************************ */
.sp-g {
	display: grid;
	grid-template-columns: 70px 1fr;
	grid-template-rows: auto;
	box-sizing:border-box;
	margin: 10px 0 0 0;
	padding: 0;
	width:100%;
	border: 1px solid #666;
	border-radius: 15px;
}
.sp-e1,.sp-e2 {
  display: grid;
  align-items: center;
  justify-items: center;
}
.sp-e1 {
	border-radius: 15px 0 0 15px;
	background-color:#f4f4f4;
}
.sp-e2 {
	border-left: 1px solid #666;
	padding: 25px;
}
.sp-eh1 {
	font-weight:bold;
	}
.sp-e22 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	width: 100%;
	height: 100%;	
}
.sp-e23 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:auto;
}
.sp-e24 {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 1fr 1fr;
	grid-gap: 10px 10px;
	width: 100%;
	height: 100%;
}
.sp-e25 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 10px 10px;
	width: 100%;
}
.sp-e31 {
	margin: 10px 0 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 0 80px;
}
.sp-e32 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 0 20px;
}
.sp-e33 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 0 20px;
}
.sp-e41 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 0 40px;
}

/* font */
#font1 {
	margin: 0 0 0 40px;
	min-width: 8em;
}
#font2 {
	margin: 0 40px 0 0;
	min-width: 8em;
}
.sp-himo-com {
	width: 90%;
	text-align:left;
}

/* himo */
#himoc, #himok {
	margin: 10px 0 0 0;
}

/* coating */
#coatimg {
	margin: 10px 0 0 0;
}
.opchg {
	display:inline-block;
	margin: 0 0 0 0.5em;
}

/* grid parts */
.sel {}
.selfr {
	padding: 10px;
	box-sizing:border-box;
	text-align:center;
	cursor:pointer;
	border: 4px solid #bbb;
	border-radius :10px;
}
/*	background-color:#FF3; */
.sp-cap,.sp-cap2 {
	font-size: 0.85em;
	line-height: 1.2em;
}
.sp-cap2 {
	margin:5px 0 0 0;
}

/* bottom */
.selfrbtn {
	padding: 8px 1em;
	font-size: 1em;
	line-height: 1em;
	text-align:center;
	border-radius :100px;
	cursor:pointer;
	border: 4px solid #bbb;
}
/* border: 4px solid #f30; */

/* error msg */
.emsg {display:none;}

/* *********************************************** 
omote
************************************************ */
.sp-o {
	box-sizing:border-box;
	margin: 5px 0 0 0;
	padding: 25px;
	width:100%;
	border: 1px solid #666;
	border-radius: 20px;
}

.moji-com1 {
	margin-bottom: 10px;
	font-size:0.85em;
}
.moji-com1:before {content:"※";}

.sp-o1,.sp-o2 {
	display: grid;
	grid-template-columns: 120px 1fr;
	grid-template-rows:auto;
	grid-gap: 0 20px;
}
.sp-o1 {margin: 0;}
.sp-o2 {margin: 20px 0 0 0;}
.sp-ocom {
	margin: 5px 0 0 0;
	font-size:0.85em;
	line-height: 1.5em;
}

/* *********************************************** 
ura
************************************************ */
.sp-u {
	box-sizing:border-box;
	margin: 10px 0 0 0;
	padding: 25px;
	width:100%;
	border: 1px solid #666;
	border-radius: 20px;
}
.sp-u1 {
	margin: 0;
	display: grid;
	grid-template-columns: 20px 1fr 1fr 1fr 1fr 20px;
	grid-template-rows: auto;
	grid-gap: 0 20px;
}
.h-center {
	width:100%;
	text-align:center;
}
.moji-com2 {
	margin: 30px 0 0 0;
	font-size:0.85em;
}
.moji-com2:before {content:"※";}


.sp-u2 {
	margin: 10px 0 0 0;
	display: grid;
	grid-template-columns: 120px 1fr;
	grid-template-rows:auto;
	grid-gap: 0 20px;
}
.sp-u3 {
	margin: 10px 0 0 0;
	width:100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows:1fr 1fr;
	grid-gap: 15px 0px;
  align-items: flex-start;
  justify-items: center;
}
.sp-u31 {
	padding: 10px;
	box-sizing:border-box;
	text-align:center;
	cursor:pointer;
	border: 4px solid #bbb;
	border-radius :10px;
}
.sp-u31 p {
	font-size: 0.85em;
	line-height: 1.2em;
}
.sp-u4 {
	margin: 30px 0 0 0;
	width:100%;
	text-align:center;
}
.sp-u41 {
}

/* ***********************************************
表示・非表示の初期設定
************************************************ */
#sec-sh,#sec-sp,#sec-ct,#sec-cf,#sec-dn,#sec3,#sec4,#sec5,#sec6,#sec7,#sec8,#sec9,#sec10 {
	width:100%;
	margin: 40px 0 0 0;
/*	display:none; */
}
#go0,#go1,#go2,#go3,#go4,#go5,#go6,#go7,#go8,#go9 {
	display:none;
}
#sec-sh {	display:block;} /* 商品一覧 */

/* p */
.rem0 {
	margin:20px 0 0 0;
	padding:20px;
	background-color: #eee;
	height:5em;
}

/* ***********************************************
セクション見出し
************************************************ */
.sec-h {
	box-sizing:border-box;
	width:100%;
/*	border-bottom: 1px solid #666; */
	padding: 0 0 2px 0;
}

.sec-htitle {
	float:left;
	width:20em;
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight:bold;
	text-align:left;
	box-sizing:border-box;
	border-left: 7px solid #cc0000;
	padding:0 0 0 10px;
}

/* ***********************************************
ボタン
************************************************ */
.btn-normal,.btn-exec {
	width:10em;
	box-sizing:border-box;
	text-align: center;
	cursor:pointer;
	font-size: 0.9em;
}
.btn-normal {
	border:1px solid #666;
	background-color:#eee;
}
.btn-exec {
  background-color: #cc0000;
  color: #FFF;
}

/* ホームへ移動 */
.btn-home-f {
	margin: 30px 0 0 0;
	text-align:center;
}
.btn-home {
	margin: 0 auto;
}

/* 商品一覧へ戻る */
.btn-shlist {
	float: right;
	display: none;
}

/* 入力内容を確認する */
#btn-check-f {
	width:100%;
	box-sizing:border-box;
	margin:0;
	padding: 20px 0 20px 0;
	text-align:center;
}
#btn-check {
	margin: 0 auto;
}

/* 確認画面の修正、送信 */
#btn-cf {
	width:100%;
	box-sizing:border-box;
	margin:20px 0 0 0;
	list-style:none;
	display: flex;
	justify-content: space-between;
}
#btn-modify {
	float:left;
	margin-left: 10%;
}
#btn-submit {
	float:right;
	margin-right: 10%;
}

/* sec-sh (shohin) */
#sh {
	margin: 0;
	width:100%;
	box-sizing:border-box;
}

/* ***********************************************
画面：仕様入力、お客様情報入力
************************************************ */

/* お客様情報 */
#ct {
	width: 100%;
	margin: 10px 0 0 0;
}

#ct,#ct td {
	border: 1px solid #666;
	border-collapse:collapse;
	box-sizing:border-box;
}
#ct td {
	margin:0;
	padding: 10px 10px 10px 20px;
	text-align:left;
	vertical-align:middle;
}
#ct .td1 {
	width: 35%;
	background-color:#f4f4f4;
}
#ct .td2 {
	width: 65%;
	padding: 10px 20px 10px 20px;
}
#ct .td2 p {
	margin: 5px 0 0 0;
	font-size: 0.95em;
}
#ct-pcode {
	width: 8em;
	margin: 0 10px 0 10px;
}

.ct-rem {
	margin: 0;
	font-size: 0.9em;
	color: #666;
}

#jname,#kname,#telno,#faxno,#request,#addr {
	width: 100%;
	box-sizing:border-box;
	resize:none;
}

/* *********************************************** 
エラーメッセージ
************************************************ */
.errmsg {
	display:none;
	color:#F30;
	font-size:0.9em !important;
}

/* *********************************************** 
画面：入力内容の確認
************************************************ */
.cf {
	width: 100%;
	margin: 0;
	box-sizing: border-box;	
}
.cf-header {
	margin: 20px 0 0 0;
	font-weight:bold;
}

.cf,.cf-td1,.cf-td2 {
	border: 1px solid #666;
	border-collapse:collapse;
	box-sizing:border-box;
}
.cf-td1,.cf-td2 {
	margin:0;
/*	padding: 10px 10px 10px 20px; */
	padding: 5px 5px 5px 10px;
	text-align:left;
	vertical-align:middle;
}
.cf-td1 {
	width: 35%;
	background-color:#f4f4f4;
}
.cf-td2 {
	width: 65%;
	padding: 5px 5px 5px 10px;
}

#cf-mjopt {
	width: 100%;
	box-sizing: border-box;	
	margin: 10px 0 0 0;
}
.cf-mjtd1,.cf-mjtd2 {
	width: 10em;
	border: 1px solid #666;
	border-collapse:collapse;
	box-sizing:border-box;
	margin:0;
	padding: 3px 3px 3px 10px;
	text-align:left;
	vertical-align:middle;
}
.cf-mjtd1 {
	width: 10em;
	background-color:#f4f4f4;
}
.cf-mjtd2 {
	width: 65%;
}
.cf-rmks1 {
	font-size:0.8em;
	line-height: 1.2em;
	margin: 0 3px 0 0;
	padding:5px;	
	box-sizing:border-box;
	border:1px solid #666;
	background-color:#FF6;
}

/* *********************************************** 
画面：送信完了
************************************************ */
#dn-msg {
	margin: 20px 0 0 0;
}
p#dn-msg {
	margin: 10px 0 0 0;
	line-height:2em;
}
#dn-response {
	list-style:decimal;
	margin:0 0 0 1.5em;
}
#dn-response li {
	padding: 20px 40px 0 0;
}
#dn-contact-f {
	margin:20px 0 0 0;
	text-align:center;
}
#dn-contact {
	width: 80%;
	border:1px solid #666;
	border-radius:5px;
	box-sizing:border-box;
	margin: 0 auto;
	padding:20px;
	background-color:#f4f4f4;
}
/* *********************************************** 
css end.
************************************************ */