/* cf */
.cf::after {
content: "";
display: block;
clear: both;
}
/* reset CSS */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}


/* CSS Document */

.clearfix::after{
content: "";
display: block;
clear: both;
}

header{width:100%; display: inline-block; background-image: url("img/head_background.jpg"); background-repeat: repeat-x;}
header .con{width: 1000px; margin:0 auto; text-align:left;}
header p{margin:13px 0 15px; font-weight:bold; font-size:13px;}

body {
font-family: "メイリオ", 'Meiryo', "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", 'Hiragino Kaku Gothic Pro', 'sans-serif';
margin: 0px;
}

#g-navi ul{
list-style: none;
display:flex;
justify-content: center;
align-items: center;
max-width:1000px;
margin:15px auto;

}
#g-navi li{margin:0 1px; 
justify-content: center;
align-items: center;
display: flex;
width:20%;
border-top:solid 1px #003399;
border-bottom:solid 1px #003399;


/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100 */
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgb(30,87,153) 0%, rgb(41,137,216) 50%, rgb(32,124,202) 51%, rgb(125,185,232) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(30,87,153) 0%,rgb(41,137,216) 50%,rgb(32,124,202) 51%,rgb(125,185,232) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(30,87,153) 0%,rgb(41,137,216) 50%,rgb(32,124,202) 51%,rgb(125,185,232) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

}

@media screen and (max-width: 768px) {
nav#g-navi ul{
display: flex;
flex-wrap:wrap;
}
nav#g-navi li{
width:calc(33% - 2px);
margin:2px 1px;
	}
}


#g-navi li:hover{

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+7,e1ffff+12,fdffff+12,e6f8fd+30,c8eefb+54,bee4f8+75,b1d8f5+100;Blue+Pipe+%232 */
background: rgb(225,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(225,255,255) 0%, rgb(225,255,255) 7%, rgb(225,255,255) 12%, rgb(253,255,255) 12%, rgb(230,248,253) 30%, rgb(200,238,251) 54%, rgb(190,228,248) 75%, rgb(177,216,245) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgb(225,255,255) 0%,rgb(225,255,255) 7%,rgb(225,255,255) 12%,rgb(253,255,255) 12%,rgb(230,248,253) 30%,rgb(200,238,251) 54%,rgb(190,228,248) 75%,rgb(177,216,245) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgb(225,255,255) 0%,rgb(225,255,255) 7%,rgb(225,255,255) 12%,rgb(253,255,255) 12%,rgb(230,248,253) 30%,rgb(200,238,251) 54%,rgb(190,228,248) 75%,rgb(177,216,245) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=0 ); /* IE6-9 */

}

#g-navi li:first-child{border-radius:10px 0 0 10px ;
border-left:solid 1px #003399;}
#g-navi li:last-child{border-radius:0 10px 10px 0 ;
border-right:solid 1px #003399;}


#g-navi li a{padding:15px 10px; height:20px;width: 100%; text-align: center;font-weight:bold; text-decoration: none; color:#fff; font-size:16px;}
#g-navi li a:hover{text-decoration: underline; color:#003399;}

@media screen and (max-width: 768px) {
#g-navi li:first-child{border-radius:10px 0px 0px 0px;}
#g-navi li:nth-child(3){border-radius:0px 10px 0px 0px;}
#g-navi li:nth-child(4){border-radius:0px 0px 0px 10px;}
#g-navi li:last-child{border-radius:0px 0px 10px 0px;}
	#g-navi li a{padding:15px 6px;font-size: 15px;}
}



.pankuzu_wrap{width:100%; background-color: #efefef;  padding: 5px 0; margin-bottom:20px;}
.pankuzu_wrap nav{max-width:1000px; margin:0 auto;}
.breadcrumb {
padding-left:10px;
margin-left:0;
}

.breadcrumb li{
display:inline;
list-style: none;
font-weight: bold;
	font-size:13px;
}

.breadcrumb li:after {/* >を表示*/
content: '>';
padding: 0 3px;
color: #555;
}

.breadcrumb li:last-child:after {
content: '';
}

.breadcrumb li a {
text-decoration: none;
/*color: #52b5ee;色*/
}

.breadcrumb li a:hover {
text-decoration: underline;
}

/* font */
.f-blue{color:#0000ff;}
.f-red{color:#ff0000;}
.f-bold{font-weight:bold;}

.top-img-wrap{width:100%; text-align:center;background: url(img/top-img-back.gif);}
.fade_img{max-width:1000px; width:100%;margin:0 auto;}

.top-img-wrap .small{width:100%; max-width:1000px;}

.map-wrapper{max-width:1000px; margin:0 auto;}
.map-wrapper .box{display: flex; flex-direction:row; justify-content:space-between;}

.map-wrapper .image {max-width:60%;}
.map-wrapper .image img{width: 100%;}
.map-wrapper .txt {max-width:39%; font-size:15px; line-height: 20px;}
.map-wrapper h2{border-bottom:4px dotted #0033cc; font-size:22px; padding-bottom:15px; margin:30px 0 15px 0; font-weight: bold;}
.map-wrapper h3{margin-bottom:10px; font-size:17px;}
.map-wrapper ul{margin-top:30px; font-size:14px;}

@media screen and (max-width: 768px) {
	
.map-wrapper h2{padding-left:10px; box-sizing: border-box;}
.map-wrapper .box{display: flex; flex-direction:column-reverse; justify-content:space-between;}
.map-wrapper .image,.map-wrapper .txt{margin:0 auto;}
.map-wrapper .image {max-width:96%;}
.map-wrapper .image img{width: 100%;}
.map-wrapper .txt {max-width:96%;}	
	
	
}


footer{background-image: url("img/footer_background.jpg"); width:100%;height:30px;}

.address-wrap{width:100%; border-top:1px solid #efefef; margin:50px 0px 20px; padding:0 5px; box-sizing: border-box;}
.address{max-width:1000px; width:100%; margin:20px auto 0; font-size:14px; line-height:20px; display:flex; align-items: center;}
.address .name{font-size:28px; font-weight: bold;}	
.address .title{ display:inline-block; paddin-bottom:15px; margin-bottom:10px;}
.address .txt{font-size:12px;}
.address .description{margin-left: 40px;}

.sp-only{display:none;}
@media screen and (max-width: 768px) {
.sp-only{display:inline-block;}
.address .title-wrap{width:45%;}
.address .description{margin-left:0px; width:55%;}
}


/* calender.html */

#calender {
text-align: center;
width: 100%;
background-color: #FFFFFF;
background-image: url(../img/bar2_background.gif);
background-repeat: repeat-x;
background-position: left bottom;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px;
}
#calender {
max-width: 720px;
text-align: left;
margin-right: auto;
margin-left: auto;
margin-top: 25px;
margin-bottom: 10px;
}

#calender table {
font-size: 0.85em;
margin: 0px;
padding: 0px;
border-top: 2px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 2px solid #999999;
}


@media screen and (max-width: 720px) {
.calender-table-wrap{display:block; max-width:720px; overflow-x: scroll;margin-left: 10px;}
	
	
	
}

#calender table caption {
font-size: 1.4em;
font-weight: bold;
line-height: normal;
text-align: left;
padding-top: 1px;
padding-bottom: 1px;
color: #333333;
}
#calender td {
margin: 0px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
background-color: #FEFFE3;
text-align: center;
vertical-align: middle;
padding: 5px;
}
#calender th {
margin: 0px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
background-color: #FEFFE3;
text-align: center;
vertical-align: middle;
font-weight: normal;
padding:13px 5px;
}
#calender .Title {
background-color: #FFE09B;
font-size: 1em;
font-weight: bold;
}
#calender .Entry {
background-color: #CCFF99;
white-space: nowrap;
font-size: 1em;
}

#calender table img {
width: 25px;
height: auto;
}

#calender ul{margin-top: 20px;}
#calender li{line-height:20px; font-size:14px;}
#calender ul.txt li{font-size:13px!important;color: blue;}


/* pricelist.html */

#pricelist .table-wrap{margin-top:20px;}
#pricelist table{margin-top:20px;}
#pricelist table tbody td:first-child{width:180px; max-width:300px;}
#pricelist table tbody th:nth-child(2){width:180px; max-width:300px;}
#pricelist table tbody th:nth-child(3){width:180px; max-width:300px;}
#pricelist ul.txt li{font-size:13px!important;color: blue;}

#pricelist {
text-align: center;
width: 100%;
background-color: #FFFFFF;
background-image: url(../img/bar2_background.gif);
background-repeat: repeat-x;
background-position: left bottom;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 30px;
padding-left: 0px;
}
#pricelist {
max-width: 720px;
text-align: left;
margin-right: auto;
margin-left: auto;
margin-top: 25px;
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
	#pricelist {padding: 0 10px;box-sizing: border-box;}
}
#pricelist table {
font-size: 0.85em;
margin: 0px;
padding: 0px;
border-top: 2px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 2px solid #999999;
}
#pricelist table caption {
font-size: 1.4em;
font-weight: bold;
line-height: normal;
text-align: left;
padding-top: 1px;
padding-bottom: 1px;
color: #333333;
}
#pricelist td {
margin: 0px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
background-color: #FEFFE3;
text-align: center;
vertical-align: middle;
padding: 5px;
}
#pricelist th {
margin: 0px;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
background-color: #FEFFE3;
text-align: center;
vertical-align: middle;
font-weight: normal;
padding: 5px;
}
#pricelist .Title {
background-color: #FFE09B;
font-size: 1em;
font-weight: bold;
}
#pricelist .Entry {
background-color: #CCFF99;
white-space: nowrap;
font-size: 1em;
}

#pricelist table img {
width: 25px;
height: auto;
}

#pricelist ul{margin-top: 20px;}
#pricelist li{line-height:20px; font-size:14px;}








/* 仕掛け図 */

#shikakezu{display:flex; justify-content:space-between; max-width:1000px; margin:0 auto;}
#shikakezu .img-wrap{width: 385px;}
#shikakezu .img-wrap img{max-width: 385px;width: 100%;}
#shikakezu .img-wrap p{font-size:13px; line-height:18px;}
#shikakezu .description{width: 335px;}
#shikakezu .description section{margin:20px 0 0 0;}
#shikakezu h2 {border-bottom: solid 3px skyblue;position: relative;padding-bottom:5px;font-weight: bold;font-size: 18px;margin-bottom: 5px;}

@media screen and (max-width: 768px) {
#shikakezu {padding:0 10px; box-sizing: border-box;}
#shikakezu .description{width: 100%;}
#shikakezu .img-wrap{width: 100%;}
#shikakezu .img-wrap img{max-width: none; width: 100%;}
}


#shikakezu h2:after {position: absolute;content: " ";display: block;border-bottom: solid 3px #3399ff;bottom: -3px;width: 20%;}

@media screen and (max-width: 768px) {
#shikakezu h2:after {position: absolute;content: " ";display: block;border-bottom: solid 3px #3399ff;bottom: -3px;width: 20%;}
}

#shikakezu .description p{line-height:20px; font-size:15px;}

#shikakezu .side-nav{max-width: 200px; width: 100%; margin-top: 20px;}
#shikakezu .side-nav ol{text-align: center;}
#shikakezu .side-nav li{  background: #fafafa; border-left: solid 5px #7db4e6;border-bottom: solid 2px #d7d7d7;margin-bottom: 4px;}
#shikakezu .side-nav li:hover{  background: #66ccff;border-left: solid 5px #7db4e6;border-bottom: solid 2px #d7d7d7;margin-bottom: 4px;}


#shikakezu .side-nav li a{display: inline-block; width: 100%; padding:10px ; box-sizing: border-box; font-weight: bold; text-decoration: none; color:#000099;} 
#shikakezu .side-nav li a:hover{color:#fff;}
#shikakezu .side-nav li a.off{color:#A4A4A4;}


@media screen and (max-width: 768px) {

#shikakezu {flex-direction: column;}	
#shikakezu .side-nav{max-width: 100%;}
#shikakezu .side-nav ul{width: 100%; display: flex;flex-direction:row;flex-wrap:wrap;}
#shikakezu .side-nav li{width:calc(100% / 3); box-sizing: border-box;}
	
	
}