@charset "utf-8";
/* スマホオンライン */


h1 {
	text-align:center;
	margin:0 auto;
	border-bottom:2px solid #DDD;
	padding:15px;
	font-size:120%;
}

h1.free_order_info {
	/*background:#FFF url(images/bg_title_fd.png) no-repeat top left;*/
	background: none;
}

h1.select_order_info {
	/*background:#FFF url(images/bg_title_sd.png) no-repeat top left;*/
	background: none;
}

h1 span {
	text-align:center;
	font-size:85%;
	font-family:Tw Cen MT, Futura, Century Gothic;
}

nav.OrderSts {
	width:100%;
	overflow:hidden;
	margin-bottom:15px;
}

nav.OrderSts ul {
	display:block;
	text-align:center;
	margin:0 auto;
}

nav.OrderSts ul li {
	float:left;
	display:block;
	text-align:center;
	font-weight:bold;
	font-size:85%;
	width:20%;
	-moz-background-size:contain;
	background-size:contain;
	padding:40px 0 15px 0;
	height:55px;
}

nav.OrderSts ul li.step01 { background:url(images/step01.gif) no-repeat; }
nav.OrderSts ul li.step02 { background:url(images/step02.gif) no-repeat; }
nav.OrderSts ul li.step03 { background:url(images/step03.gif) no-repeat; }
nav.OrderSts ul li.step04 { background:url(images/step04.gif) no-repeat; }
nav.OrderSts ul li.step05 { background:url(images/step05.gif) no-repeat; }

nav.OrderSts ul li.step01-now,
nav.OrderSts ul li.step02-now,
nav.OrderSts ul li.step03-now,
nav.OrderSts ul li.step04-now,
nav.OrderSts ul li.step05-now { color:#FFF; }

nav.OrderSts ul li.step01-now { background:url(images/step01_on.gif) no-repeat; }
nav.OrderSts ul li.step02-now { background:url(images/step02_on.gif) no-repeat; }
nav.OrderSts ul li.step03-now { background:url(images/step03_on.gif) no-repeat; }
nav.OrderSts ul li.step04-now { background:url(images/step04_on.gif) no-repeat; }
nav.OrderSts ul li.step05-now { background:url(images/step05_on.gif) no-repeat; }

section {
	clear:both;
	margin-top:20px;
	text-align:center;
	margin: 0 auto;
}

dl {
	border-left:2px solid #DDD;
	border-right:2px solid #DDD;
	width:98%;
	padding:0;
}

dl dt {
	background:#D7F0F7;
	padding:10px;
}

dl dt.img_caution {
	background:#45B9DA;
	color:#FFF;
	font-weight:bold;
	padding:10px;
}


dl dd {
	padding:10px;
	background:#FFF;
}

dl em {
	color: #CC0000;
	font-size: 85%;
}

.btop { border-top:2px solid #DDD; }
.bbottom { border-bottom:2px solid #DDD; }
.orange { color:#FF5C26; }
.red { color:#D80000; }
.blue { color:#45B8D8; }
.text10 { font-size:90%; }
.btn_help { float:right; width:25%; }
.text-left { text-align:left; }

.btn {
	float:left;
	width:100%;
	margin-top:30px;
}

.btn02 {
	width:100%;
	text-align:center;
	margin-top:30px;
}

.btn input,
.btn02 input { width:48%; }

.btn_selectform {
	clear:both;
	margin-top:10px;
	padding:8px 10px 13px 0;
	background:#BBE6F0;
	color:#45B8D8;
	font-weight:bold;
	font-size:85%;
	text-align:center;
	border-radius:50px;
	-moz-border-radius:50px;
	-o-border-radius:50px;
	-webkit-border-radius:50px;
	width:80%;
}

.btn_selectform a {
	text-decoration:none;
	color:#45B8D8;
}

.btn_selectform a:before {
	content:url(/sp/common/images/icon_btn.png);
	margin: 10px;
    position: relative;
	top:4px;
}

.img_clr {
	float:left;
}

.img_clr:after {
	content:"";
	clear:both;
}

/* 202507追記 */
.att {
	color: #f00;
	font-weight:bold;
	border:2px solid #ff0000;
	padding:6px;
	margin-bottom:10px;
}

.lead {margin-top:30px;}

@media screen and (min-width:769px) {

a:link    { color:#444; }
a:visited { color: #444; }
a:hover { color:#0099CC; text-decoration:none; }
.att { padding:6px 20px; }
.att p {
	text-align: left !important;
}

nav.OrderSts {
	width:100%;
	overflow:hidden;
	margin-bottom:15px;
}

nav.OrderSts ul {
	display:block;
	text-align:center;
	margin:0 auto;
	width:100%;
}

nav.OrderSts ul li {
	float:left;
	display:block;
	text-align:center;
	font-weight:bold;
	font-size:85%;
	width:20%;
	-moz-background-size:contain;
	background-size:contain;
	padding:40px 0 15px 0;
	height:55px;
}

nav.OrderSts ul li.step01 { background:url(images/step01.gif) no-repeat #D7F0F7; }
nav.OrderSts ul li.step02 { background:url(images/step02.gif) no-repeat #D7F0F7; }
nav.OrderSts ul li.step03 { background:url(images/step03.gif) no-repeat #D7F0F7; }
nav.OrderSts ul li.step04 { background:url(images/step04.gif) no-repeat #D7F0F7; }
nav.OrderSts ul li.step05 { background:url(images/step05.gif) no-repeat #D7F0F7; }

nav.OrderSts ul li.step01-now,
nav.OrderSts ul li.step02-now,
nav.OrderSts ul li.step03-now,
nav.OrderSts ul li.step04-now,
nav.OrderSts ul li.step05-now { color:#FFF; }

nav.OrderSts ul li.step01-now { background:url(images/step01_on.gif) no-repeat #45B9DA; }
nav.OrderSts ul li.step02-now { background:url(images/step02_on.gif) no-repeat #45B9DA; }
nav.OrderSts ul li.step03-now { background:url(images/step03_on.gif) no-repeat #45B9DA; }
nav.OrderSts ul li.step04-now { background:url(images/step04_on.gif) no-repeat #45B9DA; }
nav.OrderSts ul li.step05-now { background:url(images/step05_on.gif) no-repeat #45B9DA; }
	
ul li {list-style: none;}

.btn,
.btn02 {
	width:80%;
	margin:30px auto 0 auto !important;
	display: flex;
	justify-content: center;
	float:none;
}
.btn input,
.btn02 input { width:40%; }
	
	dl {
		display: flex;
		justify-content: space-between;
	}
	dl dt ,dl dd{box-sizing: border-box;}
	dl dt {width:25%;}
	dl dd {width:75%;}
	dl dt.img_caution,
	dl dt.selectTdt {width:100%;}
	dl.mailadd {flex-wrap:wrap;}
	dl.mailadd dd {width:100%;}
	dl dd.frameselect {width:250px;}
	dl dd.kittyframe {width:calc(75% - 250px);}
	dl dd.selectT{border-right:1px solid #DDD; border-bottom:1px solid #DDD
}
	span.pic a {margin:0 auto!important;}
	textarea {max-width:100%;}
	.bbottomPC { border-bottom:1px solid #DDD; }
}

.sma {font-size:85%;}