@charset "utf-8";

/*===============================================
●tablet.css 画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){
#t{
}
/*topphoto-mobile*/
#tm{
	display:none;
}
/*topphoto-mobile*/

#header{
	display:none;
/*	
width:100%;
max-height:4em;
height:auto;
text-align:center;
float:left;
background:#fff;*/
}
#header img{
vertical-align: middle;
width:30%;
}
.logo:hover,
.logo:active {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
/*#header h1{
color:#00367a;
font-size:200%;
position:relative;
top:-0.5em;
background:#fff;
}*/
#header_tb {
	width:100%;

margin:0;
padding:0;
}
#header_tb h1{
color:#00367a;
font-size:250%;
background:#fff;
dispaly:block;
line-height:1em;
}
#header_smt {

}
.title h2{
font-size:150%;
font-weight:normal;
color:#000;
width:100%;
background:#fff;
float:left;
height:1em;
margin:0;
padding:0;
}

h1{


}
h2{
color:#000;
font-size:xx-large;
font-weight:normal;
/*font-size:200%;clear:both;
width:100%;
background:#00367a;*/
}
h3{
font-size:x-large;
font-weight:normal;
}
/*table仕様*/
.spec {
	dispaly:table-cell;
  width: 100%;/*auto*/
  border-spacing: 0;
  margin-top:1em;
  margin-bottom:1em;
  font-size:medium;
}
.spec caption{
border-top: 1px solid #eeeeed;
border-bottom:1px solid #eeeeed;
color:#616161;
font-weight: bold;
text-align: left;
padding: 0.5em;

background:#faf9f9;
}
.spec th {
  padding: 0.5em;/* padding: 8px 15px;*/
  font-weight: bold;
  border-bottom:1px solid #eeeeed;
  text-align:left;
}
.spec_bold {
  padding: 0.5em;/* padding: 8px 15px;*/
  font-weight: bold;
}
.spec tr td {
   padding: 0.5em;/* padding: 8px 15px;*/
  border-bottom: 1px solid #eeeeed;
  text-align: left;
}
.spec tr td:last-child {

}
.spec tr {
  background: #fff;
}
.spec tr:nth-child(2n+1) {
  /*background: #f1f6fc;*/
}
.spec tr:hover {
 /* background: #bbd4ee;
  cursor:pointer;*/
}
.spec a:link{
color:#376ab1;
}
.spec a:hover{
	color:#0099ff;
}
.spec a:visited{
	color:#376ab1;
}

/*table仕様*/
img{
max-width: 100%;
height: auto;
width:auto;　/*auto;*/
}
.colum{
max-width:100%;/*width:90%;*/
margin:0;
padding:0;
text-align:left;
float:left;
margin:5% 0% 5% 0%;/*margin:2% 5% 2% 5%;*/

font-size:large;
}
img.img_medium{
width:40%;
}
.padding{
padding:1em;
}
.colum_small{
max-width:90%;
margin:0;
padding:0;
text-align:left;
float:left;
margin:0% 5% 0% 5%;

font-size:large;
}
.colum_left{
width:50%;/*70%*/
float:left;
margin:5%;

}
.colum_right{
width:40%;
    margin-left: auto;
	
	float:right;

}

.colum_right img{
	width:400px;
	}
.colum a:link{
	color:#376ab1;
}
.colum a:visited{
	color:#376ab1;
}
.colum a:hover{
	color:#0099ff;
}
.glay{
background:#ededed;
}
.blue{
color:#00367a;
}
.border_glay{
border:solid 2px #e5e5e5;
}
.left {
    margin-right: auto;
		float:left;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.right {
    /*margin-left: auto;*/
		float:right;
		
}

.colum_button{
	display:table;/*display: inline-block;*/
	text-align: center;
	text-decoration: none;
	outline: none;
	clear:both;
width:auto;	
color:#000;
padding:0.5em 1em 0.5em 1em;
margin:2% 0 2% 0;
background:#afbd22;
font-size:large;
}


.colum_button::before,
.colum_button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.colum_button:hover {
color:#000;
background:#ccdb37;
	text-decoration: none;
}

#wrapper{
padding:0;
margin:0;
color:#000;
width:100%;
max-width:768px;/*width: 100%;*/
max-height:auto;


}



/*----------index.html topphoto-----------*/
.topp{
width:768px;
height:256px;/*max-height:600px;*/
margin:0 0 2% 0;
padding:0;
float:left;

}
.topp2{
position:relative;
top:-250px;/*top:-130px;*/
right:0; /*right:0;*/	
font-size:x-large;
text-align: left;
width:auto;
height:120px;
padding:0.2em 1em 0.5em 1em;
float:left;
/*background: rgba(255,255,255,0.7);*/
}

.topp2 h1{
font-size:200%;
line-height:0.5em;
float:left;
margin-right:1em;
}
.topp2_button{
	/*display: inline-block;*/
	text-align: center;
	text-decoration: none;
	outline: none;
	float:left;
	
color:#000;
padding:0.5em 1.5em 0.5em 1.5em;
margin:4% 0 2% 0;
background:#afbd22;
font-size:large;
}
.topp2_button::before,
.topp2_button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.topp2_button:hover {
color:#000;
background:#ccdb37;
}

/*----------index.html topphoto-----------*/



/*----------topphoto-----------*/
.topphoto{
width:768px;
height:384px;/*max-height:384px;*/
margin:0;
padding:0;
float:left;

}
.topphoto2{
position:relative;
top:-250px;
right:20px;	
font-size:x-large;
text-align: left;
width:80%;
height:200px;
padding:0.2em 1% 0.5em 1%;

background: rgba(255,255,255,0.4);
}
.topphoto2 h1{
font-size:xx-large;
}

.topphoto2_button{
	display:block;/*display: inline-block;*/
	text-align: center;
	text-decoration: none;
	outline: none;
	float:left;

color:#000;
padding:0.5em 1.5em 0.5em 1.5em;
margin:2% 0 2% 0;
background:#afbd22;
font-size:large;
}
.topphoto2_button::before,
.topphoto2_button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.topphoto2_button:hover {
color:#000;
background:#ccdb37;
}
/*----------topphoto-----------*/


/*----------subphoto-----------*/
.subphoto{
width:29%;/*width:200px344px;*/
height:auto;/*height:250px;*/
margin:0px 2% 0px 2%;/*margin:0px 20px 0px 20px;*/
padding:0;
float:left;

/*overflow: hidden;*/
}
.subphoto img{
auto;/*width:200px;*/
}

.subphoto2{
position:relative;
top:-30px;
right:0px;	
text-align: left;
width:auto;/*width:200px;*/
height:auto;/*150px*/
padding:0;

/*background: rgba(255,255,255,0.4);*/

}
.subphoto2 h3{
font-size:large;
font-weight:normal;
}

/*subbuttonの基本*/
.sbutton {
	display: block;/*display: inline-block;*/
	width:auto;/*width: 100%;*/
	height: 2.5em;/*height: 54px;*/
	text-align: center;
	text-decoration: none;
	line-height: 2.5em;/*54px;*/
	outline: none;
}
.sbutton::before,
.sbutton::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.sbutton,
.sbutton::before,
.sbutton::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
/*subbuttonの基本*/


.subphoto2_button {
	position: relative;
	z-index: 2;
background:#afbd22;
background:#afbd22;
	color:#000;
	line-height: 2.5em;/*50px;*/
}
.subphoto2_button:hover {
	background-color: #fff;
	border-color: #ccdb37;
	color: #000;
	border-style:solid;
}
.subphoto2_button::before,
.subphoto2_button::after {
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #ccdb37;
}
.subphoto2_button::before {
	right: 0;
}
.subphoto2_button::after {
	left: 0;
}
.subphoto2_button:hover::before,
.subphoto2_button:hover::after {
	width: 0;
	background-color: #ccdb37;
}

.hover15 figure {
	position: relative;
}
.hover15 figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.hover15 figure:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 100%;
		height: 100%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 100%;
		height: 100%;
		opacity: 0;
	}
}
/*----------subphoto-----------*/

/*--下部ボタンスペース--------*/
#button_space{
width:100%;
}
/*--下部ボタンスペース--------*/

/*--ショップボタン--------*/
.shop_button {
	display:table;/*display: inline-block;*/
	width: 48%;/*width: 200px;*/
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
	float:left;
	
color:#fff;
padding:0.5em;
margin:0 2% 2% 0;
background:#00367a;
font-size:x-large;
}
.shop_button::before,
.shop_button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.shop_button,
.shop_button::before,
.shop_button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.shop_button:hover {
color:#fff;
background:#1f568c;
}
/*--ショップボタン--------*/

/*--お問い合わせボタン--------*/
.ct_button {
	display:table;/*display: inline-block;*/
	width: 48%;/*width: 200px;*/
	height: 54px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
	float:left;
	
color:#fff;
padding:0.5em;
margin:0 2% 2% 0;
background:#00367a;
font-size:x-large;
}
.ct_button::before,
.ct_button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.ct_button,
.ct_button::before,
.ct_button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.ct_button:hover {
color:#fff;
background:#1f568c;
}
/*--お問い合わせボタン--------*/

footer{
height: auto;
width:100%;　/*auto;*/
max-width:100%;/*width: 100%;*/
float:left;
line-height: 2em;
font-size:small;
}
footer h4 a:link{
	color:#000;
		text-decoration:none;
}
footer h4 a:hover{
color: #999;
text-decoration:underline;
}
footer h4 a:visited{
		color:#000;
	text-decoration:none;
}

#copy{
	font-size:xx-small;
	color:#FFF;
	float:left;
	height: auto;
	padding:0.5em 0 0.5em 0;
width:100%;　/*auto;*/
max-width:100%;/*width: 100%;*/
}




.bggreen{
background:#afbd22;
}
.white{
	color:#fff;
}
.glay{
background:#ededed;
}
.bgblack{
background:#000;
}
.bgblack:a{
color:#809ebf;
}
.bgblue{
	background:#00367a;
}
.blue{
color:#00367a;
}
.border_glay{
border:solid 2px #e5e5e5;
}

.main{
display:table;
width:100%;
text-align:left;
float:left;
margin:3% 0 3% 0;
background:#FFF;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);	

}
.h3{
font-size:large;
}
.colum{
padding:0 2% 2% 2%;	
display:inline-table;

	position:inherit;
}
.main h3{
	padding:2%;
	margin-top:-1em;

}


.sub_main{
width:100%;
text-align:left;
float:left;
margin:2% 0 2% 0;
background:#00367a;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);	


}
.h4{
font-size:x-large;
}
.sub_colum{
padding:2% 2% 2% 2%;	
background:#FFF;
display:table-cell;
width:24%;

height:6em;
}
.sub_photo {
display:table-cell;
float:left;
margin:0;
padding:0;
width:22%;	
}
.sub_main h3{
	font-size:medium;
	padding:1%;


width:18%;

display:table-cell;

}
.sub_main h4{
	width:94%;
	font-size:large;
	padding:1%;

display:table-cell;

}


.extra_main{
width:100%;
text-align:left;
float:left;
margin:2% 0 2% 0;
background:#00367a;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);	


}
.extra_h4{
font-size:x-large;


}
.extra_colum{
padding:2% 2% 2% 2%;	
background:#FFF;
display:table-cell;


float:left;
}
.extra_photo {
display:table-cell;
float:left;
margin:0;
padding:0;
width:27%;

}
.extra_main h3{
	font-size:large;
	padding:2%;
width:46%;


display:table-cell;

}
.extra_main h4{
	width:98%;
	font-size:x-large;
	padding:1% 0 0 1%;

display:table;

}
.colum_photo{
width:100%;

}
.colum_photo img{
width:30%;
}
.colum_photo img:hover,
.colum_photo img:active {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

.colum_photo_medium{
width:100%;

}
.colum_photo_medium img{
width:23%;
}
.colum_photo_medium img:hover,
.colum_photo_medium img:active {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}


.colum_photo_small{
	width:47%;
	margin:1%;
	float:left;
	padding-bottom:2%;

background:#fff;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);	
}
.colum_photo_small h3{
	font-size:large;
	text-align:center;
	width:auto;
	padding:1%;
	
}
.colum_photo_small img{
width:45%;
	text-align:center;
}
.colum_photo_small img:hover,
.colum_photo_small img:active {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
.colum_photo_small ul{
		text-align:left;

}
.colum_small_button{
	display:table;/*display: inline-block;*/
	text-align: center;
	text-decoration: none;
	outline: none;
	clear:both;
width:90%;	
color:#000;
padding:2% 2% 2% 2%;
margin:2% 0 2% 0;
background:#afbd22;
font-size:large;
}


.colum_small_button::before,
.colum_small_button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.colum_small_button:hover {
color:#000;
background:#ccdb37;
	text-decoration: none;
}

.colum_photo_xsmall{
	width:100%;
	display:table;
}

.colum_photo_xsmall img{
	width:16%;
}
.colum_photo_xsmall img:hover,
.colum_photo_xsmall img:active {
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
/*～以下、画面の横幅が768pxまでの場合のスタイル記入～*/
}