@charset "UTF-8";

/* ================================== */
/* 今回のサンプル(A～D)の共通デザイン */
/* ================================== */
/* 以下のCSSは、描画領域の横幅に関係なく、常に適用されます。 */
/* 描画領域の横幅が600px・850px以上になった際には、別途HTMLソース側に記述したCSSで装飾を上書きする形(＝モバイルファースト)でレスポンシブ・ウェブデザインを実現しています。 */
@media screen and (max-width: 768px){
	.pc {
		display:none;
	}
}
@media screen and (min-width: 769px){
	.sp {
		display:none;
	}
}
	/* -------------------------- */
	/* ▼ページ周囲の余白をなくす */
	body {
		padding: 0;
		margin: 0;
	}

	#main-image {
		margin:0 auto;
		max-width:1150px;
		clear:both;
	}
	#main-image img{
		width:100%;
	}

	/* -------------------- */
	/* ▼メインカラムの装飾 */
	/* -------------------- */
	.main-column {
		background: #ffffff;	/* 背景色(淡い黄色) */
		padding: 1px 0px;		/* 内側の余白(上下に1px) */
	}
	.main-column2 {
		background: #ECEDDD;	/* 背景色(茶) */
		padding: 50px 0px;		/* 内側の余白(上下に1px) */
		text-align:center;
	}
	.main-column2 h2{
		text-align:center;
	}		
	.main-column2 p{
		padding: 1px 3%;		/* 内側の余白(上下に1px) */
		text-align:center;
	}
@media screen and (max-width: 768px){
	.main-column2 p {
		text-align:left;
		font-size:14px;
		}
	.main-column3 img.sealimg{
		width:90%;
	}
}
	.main-column3 {
		background: #fff;	/* 背景色(白) */
		padding: 0px 0px;		/* 内側の余白(上下に1px) */
		text-align:center;
		margin-bottom:30px;
		clear:both;
	}
	.main-column3 h3{
		text-align:center;
		color:#1D3F79;
		font-size:24px;
		margin:1em;
	}
@media screen and (max-width: 768px){
	.main-column3 h2{
		text-align:left;
		margin: 0 3% 0 3%;
	}
	.main-column3 h2#products{
		text-align: center;
	}
	.main-column3 h3{
		text-align:left;
		color:#1D3F79;
		font-size:24px;
		margin:1em;
	}
	.main-column3 p {
		text-align:left;
		margin: 0 3% 0 3%;
	}
}

	.main-column4 {
		background: #496695;	/* 背景色(ブルー) */
		padding: 10px 0px;		/* 内側の余白(上下に10px) */
		clear:both;
	}
	.tel {
		margin:25px 0 25px 50px;
		float:left;
	}
	.buy {
		float:right;
		margin:40px 180px 0 0;
	}	
@media screen and (max-width: 768px){
	.tel {
		margin:25px auto;
		float:none;
		text-align:center;
	}
	.tel img{
		margin-bottom:15px;
	}
	.buy {
		float:none;
		text-align:center;
		margin:0 0 25px 0;
	}
}

@media screen and (max-width: 768px){
}
	.main-box {
		margin: 1em;
		line-height: 1.5;
	}
	.main-box ul li {
		line-height: 1.8;
	}
	.main-box h3 {
		margin-top: 1em;
		padding-top: 1em;
	}
	.left-column {
		background: #ffffff;	/* 背景色(淡い黄色) */
		padding: 1px 0px;		/* 内側の余白(上下に1px) */
		width:46%;
		float:left;
	}
	.left-column p{
		text-align:left;
	}
	
	/* -------------------- */
	/* ▼サイドカラムの装飾 */
	/* -------------------- */
	.r-column {
		background: #ffffff;	/* 背景色(淡い緑色) */
		padding: 1px 0px;
		margin-left:25px;
		width:46%;
		float:right;
	}
	.r-column p{
		text-align:left;
	}
	.side-column {
		background-color: #fffffff;	/* 背景色(淡い緑色) */
		padding: 1px 0px;			/* 内側の余白(上下に1px) */
	}
	.side-box {
		margin: 1em;
		border: 1px solid white;
		border-radius: 0px 0px 10px 10px;
		background-color: #ffffff;
	}
	.side-box h2 {
		margin: 0px;
		padding: 0px 5px;
		font-size: 1.2em;
		background-color: green;
		color: white;
	}
	.side-box p {
		padding: 0px 0.5em;
	}
@media screen and (max-width: 768px){
	.r-column {
		background: #ffffff;	
		padding: 1px 0px;
		width:100%;
	
	}
	.left-column {
		background: #ffffff;
		padding: 1px 0px;
		width:100%;
	}
}
	/* -------------------- */
	/* ▼2カラムの装飾 */
	/* -------------------- */
.liquid3{
  padding: 0px;
  width:100%;
  margin-bottom:30px;
}

.liquid-col3{
  float: left;
  width: 60%;
}
.liquid-col3 ul{
	line-height:180%;
	margin-left:6em;
	}
.liquid-col3.cen{
  float: left;
  width: 40%;
  text-align:left;
}
.liquid-col3.cen2{
  float: left;
  width: 60%;
}
@media screen and (max-width: 768px){
.liquid3{
  padding: 0px;
  width:100%;
  margin-bottom:30px;
}
.liquid-col3{
  width: 100%;
}
.liquid-col3 ul{
	line-height:180%;
	margin-left:1.2em;
	}
.liquid-col3.cen{
  width: 100%;
  text-align: center;
}
.liquid-col3.cen2{
  width: 100%;
}
}
.liquid2{
  padding: 0px;
  width:100%;
  margin-bottom:30px;
}
.liquid-col2{
  float: left;
  width: 50%;
}
.liquid-col2 ul{
	line-height:180%;
	margin-left:6em;
	}
.liquid-col2.cen{
  float: left;
  width: 50%;
  text-align:left;
}
.liquid-col2.cen2{
  float: left;
  width: 50%;
}
.liquid-col2 p {
	margin-left:120px;
	margin-top:10px;
	margin-bottom:20px;
}
.liquid-col-inner2{
  width:80%;
  margin-left:10%;
}
.liquid-col-inner2 h3{
	font-size:20px;
	color:#1D3F79;
	margin-bottom:0.5em;
	background:url(../images/ex.png) no-repeat left;
	padding-left:70px;
	padding-top:35px;
	padding-bottom:35px;
			
}
.liquid-col-inner2 h3 span {
	margin-right:20px;
	color:#FFF;
	margin-left:-53px;
	font-size:24px;
}
.liquid-col-inner2 p{
	line-height:160%;
	margin-left:5.5em;
}
@media screen and (max-width: 768px){
.liquid2{
  padding: 0px;
  width:100%;
  margin-bottom:30px;
}
.liquid-col2{
  width: 100%;
}
.liquid-col2 ul{
	line-height:180%;
	margin-left:0.5em;
	}
.liquid-col2.cen{
  width: 100%;
  text-align:left;
}
.liquid-col2.cen2{
	width:100%;
}
.liquid-col2.cen2 img{
	width:100%;
}
.liquid-col2 p {
	margin-left:0.5em;
}
.liquid-col-inner2{
  width:100%;
  margin:0;
}
.liquid-col-inner2 h3{
	font-size:20px;
	color:#1D3F79;
	margin-bottom:0.5em;
	background:url(../images/ex.png) no-repeat left;
	padding-left:70px;
	padding-top:35px;
	padding-bottom:35px;
			
}
.liquid-col-inner2 h3 span {
	margin-right:20px;
	color:#FFF;
	margin-left:-53px;
	font-size:24px;
}
.liquid-col-inner2 p{
	line-height:160%;
	margin-left:0.5em;
}
}
.page-cover3 h3{
	font-size:24px;
	background:no-repeat left url(../images/voice.png);
	padding-left:65px;
	padding-top:25px;
	padding-bottom:25px;
	}
@media screen and (max-width: 768px){
.page-cover3 h3{
	text-align:left;
	font-size:24px;
	background:no-repeat left url(../images/voice.png);
	padding-left:60px;
	padding-top:25px;
	padding-bottom:25px;
	}
}
@media screen and (max-width: 768px) and (min-width: 481px){
  .liquid-col2{
    width: 100%;
  }

}
@media screen and (max-width: 480px){
  .liquid-col2{
    width: 100%;
  }

}


	/* -------------------- */
	/* ▼3カラムの装飾 */
	/* -------------------- */
.spec-clomun-a {
	float:left;
	width:310px;
	border:#999 1px solid;
	background-color:#ECEDDD;
	padding:25px;
}
.spec-clomun-a ul{
	text-align:left;
	font-size:12px;
	line-height:150%;
	list-style-type:decimal;
	background-color:#FFF;
	padding:25px 45px 25px 45px;
}

.spec-clomun-b {
	float:left;
	width:750px;
	margin-left:25px;
}
.spec-clomun-b1 {
	float:left;
	width:310px;
	border:#999 1px solid;
	background-color:#ECEDDD;
	padding:25px;	
}
.spec-clomun-b1 ul{
	text-align:left;
	font-size:12px;
	margin-bottom:5px;
	line-height:150%;
	list-style-type:decimal;
	background-color:#FFF;
	padding:25px 45px 25px 45px;	
}
.spec-clomun-b2 {
	float:left;
	width:310px;
	margin-left:25px;	
	border:#999 1px solid;
	background-color:#ECEDDD;
	padding:25px;	
}
.spec-clomun-b2 ul{
	text-align:left;
	font-size:12px;
	line-height:150%;
	list-style-type:decimal;
	background-color:#FFF;
	padding:25px 45px 25px 45px;	
}
@media screen and (max-width: 768px){
.spec-clomun-a,.spec-clomun-b,.spec-clomun-b1,.spec-clomun-b2{
    width: 100%;
	margin-left:0px !important;
	padding:0 !important;
  }
.spec-clomun-a,.spec-clomun-b1,.spec-clomun-b2 {
	border:none;
}
}
	/* -------------------- */
	/* ▼4カラムの装飾 */
	/* -------------------- */

.liquid{
  padding: 10px;
  background-color:#ECEDDD:
}
.liquid-col{
  box-sizing: border-box;
  float: left;
  width: 25%;
}
.liquid-col-inner{
  background: #ECEDDD;
  text-align:center;
}
.liquid-col-inner p{
	color:#486694;
	margin:3em;
}
.liquid-col-inner p.left{
	text-align:left;
	color: #333;
	line-height:150%;
}

@media screen and (max-width: 768px) and (min-width: 481px){
  .liquid-col{
    width: 100%;
  }
}
@media screen and (max-width: 768px){
.liquid{
  padding:0;
  background-color:#ECEDDD:
}	
}
@media screen and (max-width: 480px){
  .liquid-col{
    width: 100%;
  }
}


	/* ------------------ */
	/* ▼ヘッダ部分の装飾 */
	.pageheader {
		margin: 0px;
		height:90px;
		border-bottom: 1px solid #005CA2;
		max-width:1150px;
		margin:0 auto;
		position: relative;
	}

	.head-tel {
		position:absolute;
		top:5px;
		right:130px;
	}

	.head-inq {
		position:absolute;
		top:20px;
		right:0px;
	}
	.head-sub-copy {
		font-size:12px;
		color:#476693;
		clear:both;
	}
@media screen and (max-width: 768px){
	.pageheader {
		margin: 0px;
		border-bottom: 1px solid #005CA2;
		margin:0 auto;
		position: relative;
		height:auto;
	}
	h1 img {
		width:30%;
	}
	.head-tel {
		right:17%;
	}
	.head-tel img{
		width:55%;
		float:right;
		margin-top:5px;
	}
	.head-inq {
		right:1%;
		top:5%;
	}
	.head-inq img{
		width:50%;
		float:right;		
	}
	.head-sub-copy {
		font-size:12px;
		color:#476693;
		clear:both;
		margin-top:5px;
		margin-bottom:5px;
	}	
}
	/* ------------------ */
	/* ▼フッタ部分の装飾 */
.pagefooter {
		background-color: #ffffff;
		margin: 0px;
		padding: 1em;
		clear:both;
	}

.pagefooter ul {
  font-size: 0;
  margin-top:1em;
  margin-bottom:2.5em;
}
.pagefooter ul li{
	display: inline-block;
	font-size: 14px;
	margin-right: 2px;
    margin-left: 2px;
    border: transparent solid 2px;
    border-left-color: #f00;
    vertical-align: 2px;
} 
.pagefooter ul li a{
	text-decoration:none;
	color:#666;
}
.qanda dt {
	color:#1D407A;
	font-size:24px;
	padding-left:55px;
	padding-top:12px;
	padding-bottom:12px;
	margin-bottom:0.5em;
	background-image:url(../images/q.png);
	background-repeat:no-repeat;
	background-position:left;
}

.qanda dd {
	margin-left:55px;
	font-size:18px;
	margin-bottom:3em;
}

.priva {
	margin:0 15px;
	line-height:150%;
}
.priva dt {
	color:#1D407A;
	font-size:24px;
	padding-left:55px;
	padding-top:12px;
	padding-bottom:12px;
	margin-bottom:0.5em;
	background:none;
}
.priva dd {
	margin-left:55px;
	font-size:18px;
	margin-bottom:3em;
}
.priva li {
	list-style-type: disc;
	list-style-position: outside;
	padding-left: 20px;
	text-indent: -20px;
}


/* ================================================================================================================ */
/* アコーディオン */
/* ================================================================================================================ */
#acMenu  h4 {
	margin-bottom:15px;
	color:#6C3905;
}
#acMenu div{
    display:block;
    cursor:pointer;
	text-align:left;
	background-color:#FFF;
	padding:8px;
	border:1px solid #ECEDDD;
    }
#acMenu div:hover {
	background-color:#CCD7E6;
}
#acMenu ul{
    display:none;
    }
@media screen and (max-width: 768px){
#acMenu div{
	width:100%;
	margin:0 !important;
	padding:8px 0px 8px 0px;
}
#acMenu  h4 {
	margin:10px;
}
}
/* ================================================================================================================ */
/* beasic style */
/* ================================================================================================================ */
body {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic", sans-serif;
	-webkit-text-size-adjust: 100%;
}
h2 {
	color:#6D3905;
	font-size:40px;
	margin-top:1em;
	margin-bottom:1em;
	filter:dropshadow(color=#ffffff,offX= 0,offY=-1)
	dropshadow(color=#ffffff,offX= 1,offY= 0)
	dropshadow(color=#ffffff,offX= 0,offY= 1)
	dropshadow(color=#ffffff,offX=-1,offY= 0);
 
-webkit-text-stroke-color: #ffffff;
-webkit-text-stroke-width: 1px;
 
text-shadow: white 1px 1px 0px, white -1px 1px 0px,
             white 1px -1px 0px, white -1px -1px 0px;
}
@media screen and (max-width: 768px){
h2 {
	color:#6D3905;
	font-size:30px;
	margin-top:0;
	margin-bottom:1em;
	filter:dropshadow(color=#ffffff,offX= 0,offY=-1)
	dropshadow(color=#ffffff,offX= 1,offY= 0)
	dropshadow(color=#ffffff,offX= 0,offY= 1)
	dropshadow(color=#ffffff,offX=-1,offY= 0);
 
-webkit-text-stroke-color: #ffffff;
-webkit-text-stroke-width: 1px;
 
text-shadow: white 1px 1px 0px, white -1px 1px 0px,
             white 1px -1px 0px, white -1px -1px 0px;
}	
}
a:link {
	color:#496695;
}
a:hover {
	color:#0066CC;
}

h2 .small {
	font-size:20px;
}
.blue {
	color:#1D3F79;
}
.t-right {
	text-align:right;
}
.t-center {
	text-align: center;
}
.t20-180 {
	font-size:20px;
	line-height:180%;
}
.bold {
	font-weight:bold;
}
.mt25 {
	margin-top:25px !important;
}
.mt50 {
	margin-top:50px !important;
}
.att {
	font-size:11px;
	color:#666;
}
.att-red {
	font-size:11px;
	color:#F00;
}
.price-red {
	border-bottom:#F00 1px dotted;
}
.point {
	font-size:20px;
	color:#496695;
	font-weight:bold;
}
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}
@media screen and (max-width: 768px){
#wrap {
	overflow:hidden;
	}
}

/*mailform */
#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
	margin-bottom:25px;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
@media only screen and (max-width:768px){
	#formWrap {
		width:100%;
		margin:3%;
	}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:0px;
}	
table.formTable th{
	width:90%;
	margin-top:1em;	
	}
    .formTable { margin: 0 -10px; }
    .formTable th,
    .formTable td{
    display: block;
    border-top: none;	
    }
	.formTable th {
		border-top: none !important;
		background:none !important;
	}	

	.formTable td {
		border-top: 5px !important;
		background:none !important;		
	}
	.formTable td .txt{	
    background-color: #fff;
    padding:5px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    -webkit-border-radius: 5px;
	font-size: 1.5rem;
    margin: 0 auto;
	width:90%;
	}

table.formTable td {
	border: none;

}		
table.formTable th {
	padding:0;	
	border: none;
}		
table.formTable th.check {
	padding:0;
	background-color:#f1f1f1 !important;
	padding:2%;
	width:100%;
}
   .formTable tr:first-child th   { border-top: 1px solid #ddd; }
}



/*goto top*/
.page-top
{
	margin: 0 ;
	padding: 0 ;
}
 
.page-top p
{
	margin: 0 ;
	padding: 0 ;

	position: fixed ;
	right: 16px ;
	bottom: 16px ;
}
 
.move-page-top
{
	display: block ;
	background: #D36015 ;
	width: 50px ;
	height: 50px ;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;

	color: #fff ;
	line-height: 50px ;
	text-decoration: none ;
	text-align: center ;

	-webkit-transition:all 0.3s ;
	-moz-transition:all 0.3s ;
	transition:all 0.3s ;
}

.move-page-top:hover
{
	opacity: 0.85 ;
}


.gFooterSocial {
    padding-bottom: 10px;
    text-align: center;
    font-size: 0;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
.gFooterSocial li:first-child {
    margin-left: 0;
}

li, ol, ul, dl, dt, dd {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#sharebtn {
	width:100%;
	text-align:center;
}
#sharebtn ul{
	margin-top:25px;
}
#sharebtn ul li{
    list-style-type:none;
    margin-left: 10px;
	display:inline-block;
    font-size: 0;
}
#sharebtn ul li img {
	width:44px;
}



* {
  box-sizing: border-box;
}

.form-text {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    max-width: 400px;
}

.contact-sex + .contact-sex {
    margin-left: 10px;
}

.contact-sex-txt {
    margin-left: 5px;
}

.form-select {
    width: 180px;
    height: 40px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.contact-skill {
    display: block;
}

.contact-skill + .contact-skill {
    margin-top: 10px;
}

.contact-skill-txt {
    margin-left: 5px;
}

.form-textarea {
    width: 100%;
    padding: 10px;
    height: 200px;
    border-radius: 5px;
    border: 1px solid #ccc;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.zipno {
	width:30% !important;
    padding: 10px !important;
    border-radius: 5px !important;
    border: 1px solid #ccc !important;
    appearance: none;	
	}
	
.table-responsive {
	line-height:150%;

}
.tokusyo_table {
	padding:15px;
	line-height:150%;
	margin:auto;
	margin-bottom:2em;
}
.tokusyo_table td {
	padding:10px;
}