@charset "utf-8";
/* ------------------------------------------------------------ index */

#firstview { background: url(../images/index/fv.jpg) left center no-repeat; background-size: cover; position: relative; min-height: 500px; text-align: center;}
#firstview h2 { position: absolute; top: 40%; left: 0; right: 0;}
#firstview a { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;}

#section3,
#section4,
#section5 { padding: 0 0 30px; }

#intro { padding: 20px 0 0;}
#intro img { float: left; width: 50%; height: auto;}
#intro .text_box { float: left; padding: 10% 0 5% 0; box-sizing: border-box; -webkit-box-sizing: border-box; width: 50%; } 
#intro .text_box p { line-height: 45px; padding: 0 30% 50px 40%; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; background: url(../images/index/bg_01.gif) right 50px no-repeat; box-sizing: border-box; -webkit-box-sizing: border-box;}

#reassurance { padding: 150px 0 80px; background: url(../images/index/bg_00.gif) 15% 90% no-repeat;}
#reassurance ul { margin: 0 0 0 -60px;}
#reassurance ul li { float: left; width: 520px; margin: 0 0 40px 60px;}
#reassurance ul li div { padding: 30px 0;}
#reassurance ul li h4 { font-size: 26px; text-align: center; padding: 0 0 20px;}
#reassurance ul li h4 span { font-family: 'GaramondPremrPro'; display: block; font-size: 16px; line-height: 100%;}
#reassurance ul li div p { letter-spacing: 1px; line-height: 26px;}

#quality .box { color: #fff;}
#quality .box div.bg { background: #000; float: left; box-sizing: border-box; width: 50%; height: 430px; padding: 70px; }
#quality .box div.bg div.right { width: 468px; float: right; }
#quality .box div.bg div.left { width: 468px; float: left; }
#quality .box div.bg1 { background: url(../images/index/pic_06.jpg) no-repeat center center; background-size: cover; float: left; width: 50%; height: 430px; padding: 0; }
#quality .box div.bg2 { background: url(../images/index/pic_07.jpg) no-repeat center center; background-size: cover; float: left; width: 50%; height: 430px; padding: 0; }
#quality .box div.bg3 { background: url(../images/index/pic_08_.jpg) no-repeat center center; background-size: cover; float: left; width: 50%; height: 430px; padding: 0; }
#quality .box div.bg4 { background: url(../images/index/pic_09.jpg) no-repeat center center; background-size: cover; float: left; width: 50%; height: 430px; padding: 0; }
#quality .box div h4 { font-size: 26px; font-weight: bold; line-height: 150%; }
#quality .box div p { font-size: 14px; padding: 30px 0; }
#quality #summary { background: url(../images/index/bg_02.jpg) center center no-repeat; background-size: cover; padding: 160px 0 215px; margin: 25px 0 0;}
#quality #summary h4 { padding: 0 1010px 0 0; line-height: 45px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}

#catalog { padding: 0 0 50px; text-align: center;}
#catalog div { background: #f7f7f8; padding: 115px 0 50px;}
#catalog a { font-size: 14px; border: 1px solid #000; background: url(../images/index/btn_arw.png) 94% center no-repeat; display: inline-block; *display: inline; *zoom: 1; width: 250px; height: 60px; line-height: 60px; margin: 50px 0 0;}

#cases { background: #f7f7f8; padding: 100px 0 85px;}
#cases .cases_photo { width: 980px; margin: 0 auto;}
#cases .cases_photo .m_photo { height: 551px; }
#cases h4 { text-align: center; font-size: 20px; padding: 25px 0;}
#cases ul li { float: left; width: 245px; height: auto; }
#cases ul li img { width: 100%; height: auto; }
#cases .btncase { text-align: center; }
#cases a.btn { font-size: 14px; border: 1px solid #000; display: inline-block; *display: inline; *zoom: 1; width: 250px; height: 60px; line-height: 60px; margin: 50px 0 0; background: url(../images/index/btn_arw_02.png) 94% center no-repeat }

#catalog02 { padding: 75px 0 100px; text-align: center;}
#catalog02 h3 { padding: 0 0 50px; line-height: 41px; font-size: 22px;}
#catalog03 { padding: 75px 0 100px; text-align: center;}

#point { padding: 0 0 90px;}
#point h3.point.top { background: url(../images/index/bg_03.jpg) center center no-repeat; padding: 290px 0 295px; background-size: cover;}
#point .intro { text-align: center; padding: 95px 0 180px;}
#point .intro h4 { font-size: 40px; padding: 0 0 50px; letter-spacing: 3px;}
#point .intro h5 { font-size: 24px; padding: 40px 0; letter-spacing: 3px;}
#point .intro p { line-height: 40px;}
#point #satisfy { max-height: 1060px;}
#point #satisfy img { float: right; width: 50%; height: auto;}
#point #satisfy .text_box { float: left; width: 50%; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 3% 0 0 18%;}
#point #satisfy .text_box h4 { font-size: 40px; padding: 0 0 5%; letter-spacing: 5px;}
#point #satisfy .text_box p { line-height: 40px;}
#point #satisfy .text_box h5 { font-size: 24px; padding: 4% 0;}
#point #safety { padding: 50px 0 0;}
#point #safety h3.point { background: url(../images/index/bg_04.jpg) left center no-repeat; text-align: left; padding: 210px 0 200px 20%;}
#point #safety .safety_intro { padding: 80px 0 100px;}
#point #safety .safety_intro h4 { font-size: 40px; letter-spacing: 2px; float: left; width: 546px; padding: 0 55px 0 0;}
#point #safety .safety_intro p { float: right; padding: 0 0 0 70px; font-size: 16px; line-height: 40px; border-left: 1px solid #e5e5e5;}
#point #safety  #check div { float: left; width: 520px;}
#point #safety #check .schedule { margin: 0 60px 0 0;}
#point #safety #check h4 { text-align: center; background: #000; color: #fff; font-size: 22px; letter-spacing: 2px; padding: 15px 0; margin: 0 0 25px;}
#point #safety #check dl dt { border-bottom: 1px solid #e5e5e5; font-size: 18px; padding: 0 0 10px;}
#point #safety #check dl dd { padding: 15px 0 30px;}
#point #safety p.btn { padding: 60px 0 0;}
#point #safety p.btn a { border: 1px solid #000; width: 250px; height: 60px; line-height: 60px; background: url(../images/index/btn_arw_02.png) 94% center no-repeat; color: #000; letter-spacing: 2px; padding: 0 40px 0 0; box-sizing: border-box; -webkit-box-sizing: border-box;}
 
#reserve { text-align: center; padding: 0 0 125px;}
#reserve h3 { font-size: 22px; letter-spacing: 2px; padding: 0 0 55px;}

.breath img { width: 100%; height: auto;}

#exhibition { padding: 120px 0 75px;}
#exhibition ul { margin: 0 0 0 -40px;}
#exhibition ul li { float: left; width: 530px; margin: 0 0 25px 40px;}
#exhibition ul li:last-of-type{ float:none; margin-left:auto; margin-right:auto; }
#exhibition ul li div { padding: 20px 0;}
#exhibition ul li div h4 { font-size: 18px; padding: 0 0 20px;}
#exhibition ul li div h4 span { font-size: 14px; color: #cccccc; margin: 0 0 0 20px; letter-spacing: 2px;}
#exhibition ul li div p { font-size: 14px;}

@media only screen and (min-width:641px){
.sp {display: none; }
.pad {margin: 0;}
.contact { background: url(../images/index/bg_05.jpg) center top no-repeat; background-size: cover; text-align: center; padding: 60px 0 60px; }
.contact h3.h3 { color: #fff;}
.contact .inner_box { width: 850px; margin: 0 auto; background: #fff;}
.contact .inner_box dl { border-top: 1px solid #666; display: table; width: 100%; }
.contact .inner_box dl dt { display: table-cell; vertical-align: middle; font-size: 38px; padding: 10px 10px; border-right: 1px solid #e5e5e5; text-align: center; line-height: 1; width: 60%;}
.contact .inner_box dl dd { display: table-cell; vertical-align: middle; font-size: 16px; padding: 10px 10px; text-align: center;line-height: 1; }

.contact {
	background: #e3e3e3!important;
}

.contact .inner_box {
	border: 1px solid #666;
	position: relative;
}

.img01 {
	position: absolute;
	top: -25px;
	left: -50px;
}

.img02 {
	position: absolute;
	top: -15px;
	right: -15px;
}

.btnBox {
	padding: 20px;
}
.catalogBtn {
	float: left;
	width: calc(50% - 10px);
}
.catalogBtn a {
	display: block;
	color: #fff;
	background: #ae1010;
	text-align: center;
	padding: 20px 0;
}
.reserveBtn {
	float: right;
	width: calc(50% - 10px);
}
.reserveBtn a {
	display: block;
	color: #fff;
	background: #085a00;
	text-align: center;
	padding: 20px 0;
}
.btnBox img {
}

}

@media only screen and (max-width:640px){
.pc {display: none; }
.contact { background: url(../images/index/bg_05.jpg) center top no-repeat; background-size: cover; text-align: center; padding: 20px 20px 20px; }
.contact h3.h3 { color: #fff;}
.contact .inner_box { width: 100%; margin: 0 auto; background: #fff;}
.contact .inner_box dl { border-top: 1px solid #666; display: table; width: 100%; }
.contact .inner_box dl dt { display: table-cell; vertical-align: middle; font-size: 22px; padding: 10px 10px; border-right: 1px solid #e5e5e5; text-align: center; line-height: 1; width: 57%;}
.contact .inner_box dl dd { display: table-cell; vertical-align: middle; font-size: 10px; padding: 10px 10px; text-align: center;line-height: 1; }
.btnBox {
	padding: 10px;
}

.contact {
	background: #e3e3e3!important;
}

.contact .inner_box {
	border: 1px solid #666;
	position: relative;
}

.catalogBtn {
	float: left;
	width: calc(50% - 5px);
}
.catalogBtn a {
	display: block;
	color: #fff;
	background: #ae1010;
	text-align: center;
	padding: 10px 0;
}
.reserveBtn {
	float: right;
	width: calc(50% - 5px);
}
.reserveBtn a {
	display: block;
	color: #fff;
	background: #085a00;
	text-align: center;
	padding: 10px 0;
}

.img01 {
	position: absolute;
	top: -35px;
	left: -20px;
	width: 100px;
	height: auto;
}

.img02 {
	position: absolute;
	top: -10px;
	right: -15px;
	width: 120px;
	height: auto;
}

.txtimg {
	width: auto!important;
	height: 18px!important;
}

.txtimg3 {
	width: auto!important;
	height: 12px!important;
	margin-top: 5px;
}

#contact .inner_box p.attention { background: #f3f3f3; font-size: 14px; width: 700px; margin: 35px auto 65px; padding: 35px 0;}
#contact .inner_box p.attention span { color: #f0000e;}




#contents { background: #fff; padding: 0 75px 90px;}
#contents table { width: 100%; font-size: 14px; }
#contents table th { text-align: left; padding: 10px 0; width: 195px; vertical-align: middle; }
#contents table td { padding: 10px 0; text-align: left;}
#contents table th span { color: #f0000e;}
#contents table td select { width: 505px; padding: 15px 10px; background: url(../images/index/select_btn.gif) 97% center no-repeat; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; -webkit-box-sizing: border-box;}
#contents table tr.date td select { width: 85px; padding: 10px; background: url(../images/index/select_btn.gif) 80% center no-repeat;}
#contents table tr.date td span { padding: 0 20px 0 5px;}
#contents table tr.date td select.time { width: 122px;}
#contents table tr.text th { vertical-align: text-top;}
#contents table textarea,
#contents table input[type="text"] { width: 505px; padding: 15px 0 15px 15px; box-sizing: border-box; -webkit-box-sizing: border-box; border: none; background: #f3f3f3;}
#contents p.btn { padding: 30px 0 0;}
#contents input[type="submit"] { background: #000; border: none; color: #fff; width: 260px; height: 60px; line-height: 60px; cursor: pointer; font-size: 14px;}

/* ------------------------------------------------------------ check */
.note { text-align: center; padding: 50px 3% 60px;}
.note h3 { font-size: 24px; padding: 0 0 15px; }
.note p { padding: 0 0 15px; font-size: 16px; }
.note p.caution { color: #d20000; }
.note p.alert span { display: block;}
.note p.btn { padding: 30px 0 0;}
.note p.btn a,
.note p.btn input[type="submit"] { border: none; color: #fff; width: 260px; height: 50px; line-height: 50px; cursor: pointer; font-size: 16px; display: inline-block; *display: inline; *zoom: 1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.note p.btn a { background: #b4b5b8; }
.note p.btn input[type="submit"] { background: #a42424; margin: 0 0 5px;}
#thanks { padding: 70px 0; }
.note table { margin: 0 auto; }
.note table th { text-align: left; padding: 5px 15px;}
.note table td { text-align: left; padding: 5px 15px;}

/*
@media only screen and (max-width:1435px){

#firstview h2 { position: absolute; top: -75px; left: 1%;}
}
*/


/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){


#section3,
#section4,
#section5 { padding: 0; }


#firstview { background: url(../images/index/fv_sp_.jpg) center center no-repeat; background-size: cover; position: relative; min-height: inherit; text-align: center;}
#firstview h2 { position: absolute; top: -15px; left: 10%;} 
#firstview h2 img { width: 70px; height: auto;}

#firstview img.fv { width: 100%; height: auto;}
#firstview a { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;}
#firstview a img { width: 25px; height: auto;}

#intro { padding: 10px 0 0;}
#intro img { float: none; width: 100%; height: auto;}
#intro .text_box { float: none; padding: 30px 0 0; box-sizing: border-box; -webkit-box-sizing: border-box; width: 100%; } 
#intro .text_box p { line-height: 38px; padding: 0 38% 30px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; background: url(../images/index/bg_01.gif) center 50px no-repeat; background-size: 180px auto;}

#reassurance { padding: 40px 0 40px; background: url(../images/index/bg_00.gif) 15% 98% no-repeat; background-size: 180px auto;}
#reassurance ul { margin: 0;}
#reassurance ul li { float: none; width: 100%; margin: 0 0 20px;}
#reassurance ul li img { width: 100%; height: auto;}
#reassurance ul li div { padding: 15px 0;}
#reassurance ul li h4 { font-size: 18px; text-align: center; padding: 0 0 10px;}
#reassurance ul li h4 span { font-family: 'GaramondPremrPro'; display: block; font-size: 14px; line-height: 100%;}
#reassurance ul li div p { letter-spacing: 1px; line-height: 24px;}

#quality #summary { background: url(../images/index/bg_02.jpg) center center no-repeat; background-size: cover; padding: 70px 0; margin: 15px 0 0;}
#quality #summary .inner { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
#quality #summary h4 { padding: 0 ; line-height: 35px;}
#quality .box div.bg { float: none; box-sizing: border-box; width: 100%; height: inherit; margin: 0 auto; padding: 25px 6%; }
#quality .box img { width: 100%; height: auto; }
#quality .box div.bg div.right { width: inherit; float: none; }
#quality .box div.bg div.left { width: inherit; float: none; }
#quality .box div.bg1 { background: none; float: none; width: inherit; height: inherit; padding: 0; }
#quality .box div.bg2 { background: none; float: none; width: inherit; height: inherit; padding: 0; }
#quality .box div.bg3 { background: none; float: none; width: inherit; height: inherit; padding: 0; }
#quality .box div.bg4 { background: none; float: none; width: inherit; height: inherit; padding: 0; }
#quality .box div h4 { font-size: 20px; line-height: 34px; padding: 0 0 5px;}
#quality .box div p { font-size: 14px; padding: 3% 0 0; }

#catalog { padding: 0 0 20px; text-align: center;}
#catalog div { background: #f7f7f8; padding: 50px 0 20px;}
#catalog div img { width: 100%; height: auto;}
#catalog a { font-size: 12px; border: 1px solid #000; background: url(../images/index/btn_arw.png) 94% center no-repeat; display: inline-block; *display: inline; *zoom: 1; width: 250px; height: 50px; line-height: 50px; margin: 25px 0 0;}

#cases { background: #f7f7f8; padding: 50px 0 60px;}
#cases .cases_photo { width: 100%; margin: 0 auto;}
#cases .cases_photo .m_photo { height: auto; }
#cases img { width: 100%; height: auto;}
#cases h4 { text-align: center; font-size: 16px; padding: 15px 0;}
#cases ul li { float: left; width: 50%;}

#catalog02 { padding: 35px 3% 20px; text-align: center;}
#catalog02 h3 { padding: 0 0 25px; line-height: 35px; font-size: 16px;}
#catalog02 img { width: 100%; height: auto;}
#catalog03 { padding: 0; text-align: center;}
#catalog03 img { width: 100%; height: auto; }


#point { padding: 0 0 40px;}
#point h3.point.top { background: url(../images/index/bg_03.jpg) center center no-repeat; padding: 70px 0; background-size: 700px auto;}
#point .intro { text-align: center; padding: 40px 3% 50px;}
#point .intro h4 { font-size: 18px; padding: 0 0 25px; letter-spacing: 3px;}
#point .intro h5 { font-size: 16px; padding: 20px 0; letter-spacing: 3px;}
#point .intro p { line-height: 30px;}
#point #satisfy { max-height: inherit;}
#point #satisfy img { float: none; width: 100%; height: auto;}
#point #satisfy .text_box { float: none; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 30px 4% 0;}
#point #satisfy .text_box h4 { font-size: 20px; padding: 0 0 15px; letter-spacing: 5px;}
#point #satisfy .text_box p { line-height: 30px;}
#point #satisfy .text_box h5 { font-size: 16px; padding: 10px 0;}
#point #safety { padding: 30px 0 0;}
#point #safety h3.point { background: url(../images/index/bg_04.jpg) left center no-repeat; text-align: left; padding: 100px 0 100px 20%; background-size: 700px auto;}
#point #safety .safety_intro { padding: 20px 0 20px;}
#point #safety .safety_intro h4 { font-size: 20px; letter-spacing: 2px; float: none; width: 100%; padding: 0 0 15px;}
#point #safety .safety_intro p { float: none; padding: 20px 0; font-size: 14px; line-height: 30px; border-left: none; border-top: 1px solid #e5e5e5;}
#point #safety  #check div { float: none; width: 100%;}
#point #safety  #check div img { width: 100%; height: auto;}
#point #safety #check .schedule { margin: 0 0 15px;}
#point #safety #check h4 { text-align: center; background: #000; color: #fff; font-size: 16px; letter-spacing: 2px; padding: 10px 0; margin: 0 0 15px;}
#point #safety #check dl dt { border-bottom: 1px solid #e5e5e5; font-size: 14px; padding: 0 0 10px;}
#point #safety #check dl dd { padding: 10px 0 20px;}
#point #safety p.btn { padding: 15px 0 0;}
#point #safety p.btn a { border: 1px solid #000; width: 250px; height: 50px; line-height: 50px; background: url(../images/index/btn_arw_02.png) 97% center no-repeat; color: #000; letter-spacing: 2px;}

#reserve { text-align: center; padding: 0 3% 60px;}
#reserve h3 { font-size: 14px; letter-spacing: 2px; padding: 0 0 25px;}
#reserve img { width: 100%; height: auto;}

.breath img { width: 100%; height: auto;}

#exhibition { padding: 30px 0 35px;}
#exhibition ul { margin: 0;}
#exhibition ul li { float: none; width: 100%; margin: 0 0 15px;}
#exhibition ul li img { width: 100%; height: auto;}
#exhibition ul li div { padding: 10px 0;}
#exhibition ul li div h4 { font-size: 16px; padding: 0 0 10px;}
#exhibition ul li div h4 span { font-size: 12px; color: #cccccc; margin: 0 0 0 10px; letter-spacing: 2px;}
#exhibition ul li div p { font-size: 12px;}

#contact { background: url(../images/index/bg_05.jpg) center top no-repeat; background-size: cover; text-align: center; padding: 60px 0; margin: 0 0 15px;}
#contact h3.h3 { color: #fff;}
#contact .inner_box { width: 94%; margin: 0 auto; background: #fff;}
#contact .inner_box dl { border-bottom: 2px solid #000;}
#contact .inner_box dl dt { float: none; width: 100%; font-size: 14px; padding: 15px 0; border-right: none; border-bottom: 1px solid #e5e5e5; margin: 15px 0 0;}
#contact .inner_box dl dd { font-size: 28px; line-height: 100%; padding: 15px 0;}
#contact .inner_box dl dd small { font-size: 16px; line-height: 100%;}
#contact .inner_box dl dd span { display: block; font-size: 12px; line-height: 100%;}
#contact .inner_box p.attention { background: #f3f3f3; font-size: 12px; width: 94%; margin: 15px auto ; padding: 15px 3%;}
#contact .inner_box p.attention span { color: #f0000e;}





#contents { background: #fff; padding: 15px 3% 20px;}
#contents table { width: 100%;}
#contents table th { text-align: left; padding: 15px 0 5px; width: 100%; vertical-align: middle; display: block;}
#contents table td { padding: 5px 0 10px; display: block; text-align: left;}
#contents table td select { width: 100%; padding: 10px 0 10px 10px; background: url(../images/index/select_btn.gif) 98% center no-repeat; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; -webkit-box-sizing: border-box; background-size: 9px auto;　border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border: 1px solid #dcdcdc;}
#contents table tr.date td select { width: 25%; padding: 10px;  background: url(../images/index/select_btn.gif) 90% center no-repeat; margin: 0 5px 10px; background-size: 9px auto; }
#contents table tr td select.prefecture { width: 30%;}
#contents table textarea,
#contents table input[type="text"] { width: 97%; padding: 10px 0 10px 3%;  -webkit-appearance: none;-moz-appearance: none; appearance: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; }
#contents table textarea { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; }

#contents input[type="submit"] { background: #284e6d; border: none; color: #fff; width: 200px; height: 40px; line-height: 40px; cursor: pointer; }

.note { text-align: center; padding: 25px 3% 30px;}
.note h3 { font-size: 20px; padding: 0 0 15px; }
.note p { padding: 0 0 15px; font-size: 14px; }
.note p.caution { color: #d20000; }
.note p.small { text-align: left;}
.note p.btn { padding: 30px 0 0;}
.note p.btn a,
.note p.btn input[type="submit"] { border: none; color: #fff; width: 260px; height: 50px; line-height: 50px; cursor: pointer; font-size: 16px; display: inline-block; *display: inline; *zoom: 1; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.note p.btn a { background: #b4b5b8; margin: 0 0 5px;}
.note p.btn input[type="submit"] { background: #a42424; margin: 0 0 5px;}
#thanks { padding: 70px 0; }
.note table { width: 100%; }
.note table th { text-align: left; padding: 5px 15px; display: block; background: #e5e5e5; text-align: center; }
.note table td { text-align: left; padding: 5px 15px; display: block; text-align: center; }
}