﻿/*----------------------------------------------------------------------------------------------------------------------------------- 
 Base
-----------------------------------------------------------------------------------------------------------------------------------*/
body {
	text-align: center;
}

.content-asset h1,
.content-asset h2,
.content-asset h3,
.content-asset h4,
.content-asset h5,
.content-asset h6,
.content-asset p,
.content-asset ul,
.content-asset ol,
.content-asset li,
.content-asset dl,
.content-asset dt,
.content-asset dd,
.content-asset th,
.content-asset td
{
	margin: 0;
	padding: 0;
	list-style: none;
	color: #555555;
	line-height: 1.4;
}

#pageContents {
	font-family: "ＭＳ Ｐゴシック", sans-serif;
	font-size: 12.2px;
	max-width:96vw;
	width: 720px;
	margin: auto;
	font-size: 12.2px;
	text-align: left;
}

.pageTtl {
	margin-bottom: 20px;
}

.clearfix, .flWrap, .boxWrap, #hdr, #columnWrap, #gnav, #ftrList,
	.ftrWrap, .orderBg, .serviceBg {
	display: inline-block;
	zoom: 1;
}

.pdT20 {
	padding-top: 20px;
}

.both {
	clear: both;
}

/*Other
-------------------------------------------------------------*/
/*Link
--------------*/
a {
	color: #666666;
	outline: none;
}

a:link {
	text-decoration: none;
}

a:visited {
	color: #666666;
	text-decoration: none;
}

a:hover {
	color: #666666;
	text-decoration: underline;
}

a:active {
	color: #666666;
}

#ftrLink a:hover {
	text-decoration: none;
}

.icnArw {
	background: url(../images/hajimete/icn_arw_01.gif) no-repeat left;
	padding-left: 12px;
}

#main .breadcrumbs {
	margin-left: 13px;
	padding-left: 0;
	text-align: left;
}

/*Title
--------------*/
#ttlField {
	height: 38px;
	border-bottom: 6px solid rgb(221, 221, 221);
	display: inline-block !important;
	width: 100%;
}

#ttlField p {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 31px;
	width: 50%;
	margin-bottom: 5px;
	float: left;
	font-size: 22px;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
	width: 50%;
}

#ttlField ul {
	text-align: right;
	width: 50%;
	float: right;
}

#ttlField ul li {
	float: right;
}

#ttlField ul li img {
	width: 95%;
}


/*order
-------------------------------------------------------------*/
.order {
	width: 100%;
	clear: both;
	background-color: rgb(255, 242, 225);
	border: 1px solid rgb(181, 181, 181);
	border-radius: 2px;
}

.orderBg {
	margin: 0;
}

.orderList li {

	background: url(../images/hajimete/icn_arw_01.gif) no-repeat left;
	no-repeat left 3px;
	padding-left: 12px;
}

.order {
	margin-bottom: 20px;
	text-align: center;
}

.order .orderBg {
	padding: 25px 0 17px 0;
}

.order .orderList {
	float: left;
	margin-right: 50px;
	margin-top: 3px;
}

.order .orderBtn {
	float: right;
}


/*----------------------------------------------------------------------------------------------------------------------------------- 
 Mobie
-----------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
	#pageContents {
		max-width: 93vw;
		margin: auto;
	}
}


@media only screen and (max-width: 390px) {
	#ttlField {
		height: auto;
	}
	#ttlField p {
		width: 100%;
		margin-bottom: 0;
		line-height: 23px;
		font-size: 18px;
	}	
	#ttlField ul {
		width: 100%;
		margin-top: 0;
		float: left;
		text-align: left;
	}
	#ttlField ul li {
		float: left;
	}
	.boxWrap .flL {
		width: 100%;
	}
	.boxWrap .flR {
		width: 100%;
		text-align: center;
	}
	.boxTtl {
		width: auto;
	}
	.order .orderList {
		margin-right: 10px;
	}

	.flL, .boxL {
		margin-bottom: 10px;
	}
	.flR, .boxR {
		margin: auto;
		float: none;
	}
	
}

@media only screen and (max-width: 325px) {
	.order .orderList {
		float: none;
		text-align: center;
		margin-bottom: 5px;
	}
	.order .orderBtn {
		float: none;
		text-align: center
	}
}

@media only screen and (max-width: 260px) {
	.boxTtl img {
		width: 100%;
	}
	.order img {
		width: 100%;
	}
}


/*Table*/


/*Customize for Price page*/
#print-button > ul > li{
    display: inline-block;
	list-style-type: none;
	width:19.3%;
	height:auto;
}

@media only screen and (max-width: 460px) {
	#print-button > ul > li{
		width:32%;
	}
}
@media only screen and (max-width: 768px) {
	.pageTtl{
		margin-bottom:10px! important;
	}
}
img{
	max-width:100%;
	height:auto;
}
#print-button > ul{
	margin-left:5px;
}


#price > pageSection > .priceLLink{
	display: inline-block;
	width:30%;
}
#price > pageSection > .multipurposeTable{
		display: inline-block;
	width:70%;
}


/*link
------------*/
.priceLLink{
	width:210px;
}
.priceLLink ul{
	margin-top:10px;width:200px;
	}
	
.priceLLink li{
	background:url(../images/price/icn_arw_03.gif) no-repeat left 3px;
	padding-left:12px;
	margin-bottom:5px;
}	

/*table
--------------*/	
div.multipurposeTable table {
	width:100%;
	border-top: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
}

div.multipurposeTable table th,
div.multipurposeTable table td{
	padding: 7px;
	border-bottom: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
}

div.multipurposeTable table th {
	color: #365f01;
	white-space: nowrap;
	background: #e8f7bc;
	text-align: center;
	font-weight: normal;
}

div.multipurposeTable table th.leftTh {
	color: #66442a;
	background: #f8f4ec;
	text-align: left;
}

div.multipurposeTable table td,div.multipurposeTable table td p {
	color: #66442a;
	vertical-align: middle;
}

.txtRed{
	color:#f91e5c !important;
}
.txtGrey{
	color:#000000 !important;
}
.noteIndnt{
margin-left: 1.5em;
text-indent: -1em;
}
.post{
	padding:3px;
	margin:2px 0;
	background:#fff4f7;
}
dl.list309 dt {
  clear: left;
  float: left;
  margin: 0 0 0.15.5em;
  width: 13em;
  padding-left: 5px;
  color: #000;
}

dl.list309 dd {
  margin-left: 15em;
}
.bgcolor01{
	background:#f2f2f2;
}
.bgcolor02{
	background:#f2f2f2;
}

#delivery_table {
	border-top: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	margin-bottom:5px;
}

#delivery_table th,
#delivery_table td{
	padding: 7px;
	border-bottom: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
}

#delivery_table th {
	color: #365f01;
	white-space: nowrap;
	background: #e8f7bc;
	text-align: left;
	font-weight: normal;
}

#delivery_table th.leftTh {
	color: #66442a;
	background: #f8f4ec;
	text-align: left;
}


/*11.04.19è¿½åŠ 
--------------*/	


/* External Icon ---------------- */
ul li a img.extIcn{
margin-left:5px;
padding-bottom: 4px;
vertical-align: middle;
vertical-align/*\**/: bottom\9;	/* IE7,8 */
padding-bottom/*\**/: 1px\9;	/* IE7,8 */
_vertical-align:middle; /* IE6 */
_padding-bottom:4px; /* IE6 */
}


.txtS img.extIcn{
margin-left:4px;
padding-bottom: 5px;
vertical-align: middle;
}


.flR.noTable .orderList li a img.extIcn{
margin-left:5px;
padding-bottom: 4px;
vertical-align: middle;
vertical-align/*\**/: bottom\9;	/* IE7,8 */
padding-bottom/*\**/: 1px\9;	/* IE7,8 */
_vertical-align:middle; /* IE6 */
_padding-bottom:4px; /* IE6 */
}

#main .breadcrumbs {
	max-width: 740px
}

* {
  box-sizing: border-box;
}
.img-contain {
  float:left;
  width:30%;
}

.table-contain {
  overflow:auto;
  float:left;
  width:70%;
  margin-botton:15px;
}


.secTtl, .secTtl > img, .pageSection, table{
	max-width:100%;
}

.secTtl{
	margin-top:15px;
	margin-bottom:15px;
}

@media only screen and (max-width:768px) {
  /* For mobile phones: */
  .secTtl > img{
  	min-height:25px;
  }
  .img-contain, .table-contain {
    width:100%;
  }
   .img-contain{
  	display:flex;
  }
  .img-contain {
    margin-bottom:10px;
  }
  .img-contain > ul {
  	align-self: flex-end;
    margin-left:20px;
  }
  .img-contain > #img{
  	width:70%;
  }
  .img-contain > #img > img{
  	min-width:120px;
  	min-height: 65px;
  	width:100%;
  }

}
@media only screen and (max-width:450px) {

  .img-contain > #img{
  	width:90%;
  }
}
.mgB15 {
    margin-bottom: 15px;
}
