@charset "UTF-8";
/*common*/
#wrapper {
	width: 100%;
	margin-top: 110px;
	
}
#container {
	background:url(../img/bg.png);
	animation: fadein 0.6s ease-in both;
	-webkit-animation: fadein 0.6s ease-in both;
}
 @keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#index #container {
	animation: fadein 1.2s ease-in both;
	-webkit-animation: fadein 1.2s ease-in both;
}
 @keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#container .content-inner {
	max-width: 1024px;
	width: 100%;
	padding: 4% 0;
	margin: 0 auto;
	text-align: left;
}

#container .content-inner p{
	margin: 0 0 4%;
	line-height:1.6;
}


/*nav*/
/* header */
#top-head {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 0;
	height: 110px;
	background: rgba(255,255,255,0.95);
	z-index: 100;
	/*transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;*/
	
	/*border-top:solid 3px #222222;*/
	font-size:0;
	position:fixed;
	top:0;
	

}
#top-head a, #top-head {
	color: #222222;
	text-decoration: none;
}
#top-head .inner {
	width: 100%;
	/*max-width: 1024px;*/
	text-align: center;
	margin: 0 auto;
	position:relative;
}
#top-head .inner:after {
	content: "";
	clear: both;
	display: block;
}

#top-head .inner>.fl{
	width: 28%;
}
#top-head .inner>.fr{
	width: 53%;
	float:right;
	 text-align:right;
	 margin-right:15%;
}

#top-head h1.logo a {
	background: url(../img/icon-logo-sake.png) no-repeat left top;
	background-size: 50% auto;
	display: block;
	width: 100%;
	width:330px;
	height: 0;
	padding-top: 80px;
	overflow: hidden;
	text-align: left;
	margin: 15px 0 0 20px;
	transition: background-size 0.2s ease-in;
	-webkit-transition: background-size 0.2s ease-in;
	-moz-transition: background-size 0.2s ease-in;

}
#top-head .menu>ul {
	list-style: none;
	letter-spacing: 0.29em;
	width:100%;
	margin-right:200px;
}
#top-head .menu >ul >li {
	display:inline-block;
	vertical-align:top;
	 text-align:right;
	width: 18%;
	max-width:140px;
}
#top-head .menu ul li a.hdln{
	position:relative;
	text-align: center;
	display:block;
	padding:18px 0 0;
	height:110px;
	font-size:1.3rem;
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	color:#14249c;
}
#top-head .menu ul li a.hdln p{
	display:inline-block;
	padding:0 15px;
	background-color:#f1f2f8;
	border-radius:20px;
	-webkit-border-radius:20px;
	line-height:1.2;}

#top-head .menu ul li a.hdln span{
	display:block;
	background:url(../img/icon-sprite.png) no-repeat;
	background-size:450%;
	width:60px;
	height:40px;
	text-align:center;
	margin:0 auto 10px;
	
	
	 -moz-transition: -moz-transform 0.2s ease-in;
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
}
#top-head .menu ul li a.hdln:hover span{
	 -moz-transform: translateY(-3px);
	 -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
	
	
	}
#top-head .menu ul li.index a.hdln span{
	background-position:10px 5px;	
}
#top-head .menu ul li.how a.hdln span{
	background-position:-55px 5px;	
}
#top-head .menu ul li.see a.hdln span{
	background-position:-135px 5px;	
}
#top-head .menu ul li.go a.hdln span{
	background-position:-210px 5px;	
}

#top-head .menu >ul >li a.hdln:hover {
	background-color:#e0e2ef;
}


#top-head .menu ul li.active a.hdln,
#top-head .menu ul li.active a.hdln:hover{
	background-color:#14249c;
	/*color:#fff;*/
}
#top-head .menu ul li.index.active a.hdln span{
	background-position:10px -40px;	
}
#top-head .menu ul li.how.active a.hdln span
{
	background-position:-55px -40px;	
}
#top-head .menu ul li.see.active a.hdln span{
	background-position:-135px -38px;	
}
#top-head .menu ul li.go.active a.hdln span{
	background-position:-210px -38px;	
}


#top-head .jss a{
	position:absolute;
	display:block;
	top:15px;
	right:10px;
	background:url(../img/icon-logo-jss.png) no-repeat;
	background-size:80%;
    width: 140px;
    height: 0;
    padding:60px 0 0;
    overflow: hidden;
	transition: background-size 0.2s ease-in;
	-webkit-transition: background-size 0.2s ease-in;
	-moz-transition: background-size 0.2s ease-in;

}

/*font-------------------------------*/
/*カテゴリタイトル*/
h2 {
	margin-bottom: 1rem;
	font-size: 3rem;
	font-weight:bold;
	line-height: 1.4;
	position:relative;
}
h2:after {
	display:block;
	width:35px;
	height:2px;
	margin:2.5rem 0;
	background-color:#555;
	content: '';	
}
h2.txt-c:after {
	margin:20px auto 40px;
	text-align:center;
}
/*大タイトル*/	
h3 {
	margin-bottom: 4%;
	font-size: 3rem;
	text-align: left;
	font-weight: bold;
	line-height: 1.2;
	border-bottom:solid 1px #555555;
	padding-bottom:1rem;}
	
	

h3 img{
	width:4%;
	min-width:30px;
	margin-bottom:0.5rem;}
	

	
/*サブタイトル*/	
h4 {
	margin-bottom: 4rem;
	padding-bottom:1rem;
	font-size: 2.2rem;
	text-align: left;
	font-weight: bold;
	border-bottom: solid 1px #555555;
	color:#1a65ba;
}
/*サブサブタイトル*/
h5 {
	font-size: 1.8rem;
	font-weight: bold;
	line-height:1.4;
	margin-bottom: 1.5rem;
}




/*ストライプ枠*/
.box-stripe{
	border: #ddd solid 12px;
   padding: 3rem 3rem 0;
   border-image: url("../img/boder-stripe.png") 12 12 round;
   background-color:#fff;}


.box-stripe .fl,
.box-stripe .fr{
	margin-bottom:4%;}
   
   
/*btn common------------------------------*/
#container .link-btn {
	text-align: center;
	display: block;
}
#container .link-btn a {
	font-weight: bold;
	margin: 0 auto;
	text-align: center !important;
	font-size: 1.8rem;
	width: 240px;
	padding: 20px 0;
	display: block;
	color: #fff;
	position: relative;
	background: #d41927;
}
#container .link-btn a:hover {
	opacity: .80;
	filter: alpha(opacity=80);
	-ms-filter: “alpha(opacity=80) ”
}
#container .link-btn a:after {
	position: absolute;
	top: 45%;
	right: 8%;
	display: block;
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -3px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
/*btn-more01*/
.btn-more01 {
	color: #d41927;
	text-decoration: none;
	background: #fff;
	border: solid 1px #d41927;
	width: 180px;
	padding: 10px 20px;
	position: relative;
	overflow: hidden;
	text-align: center;
	display: inline-block;
	-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	font-size: 1.1rem;
	margin:0 !important;
}
.box a:hover{
	text-decoration:none;
}

.btn-more01::after {
	font-family: 'FontAwesome';
	content: '\f178';
	color: #d41927;
	width: 100%;
	height: 10%;
	position: absolute;
	top: 25%;
	right: -40%;
	-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}

.btn-more01::before {
	font-family: 'FontAwesome';
	content: '\f178';
	color: #fff;
	width: 100%;
	height: 10%;
	position: absolute;
	top: 25%;
	right: 80%;
	-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.btn-more01 span {
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
	margin-left: -50px;
}
/*btn-more02*/
.btn-more02 {
	color: #fff;
	text-decoration: none;
	border: solid 1px #fff;
	padding: 0 3px;
	position: relative;
	overflow: hidden;
	text-align: center;
	display: inline-block;
	-webkit-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	font-size: 1.1rem;
	width: 20px;
	height: 20px;
}
.box a:hover .btn-more02, .btn-more02:hover {
	background-color: #d41927;
	border: solid 1px #d41927;
	color: #fff;
	text-decoration: none !important;
}
.btn-more02::before {
	font-family: 'FontAwesome';
	content: '\f178';
	color: #fff;
	width: 100%;
	position: absolute;
	right: 200%;
	-webkit-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
}
.box a:hover .btn-more02::before, .btn-more02:hover::before {
	right: 0%;
}
.btn-more02 span {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.box a:hover .btn-more02 span, .btn-more02:hover span {
	margin-left: 30px;
}

/*テキストリンクbtn common*/
.txt-link{
	color:#1a65ba;
	margin-top:2% !important;
	font-weight:bold;
	font-size:1.6rem;
	text-decoration:none !important;
	line-height:1.4 !important;}

a:hover .txt-link{
	text-decoration:none !important;} 
	
 	a.txt-link-under{
	text-decoration: underline !important;}
	

a:hover.txt-link-under{
	text-decoration:none !important;} 
	
	

/*movieボタン*/
.movie-btn{
	position:relative;}
		
a:hover .movie-btn img.movie-thum{
	opacity:0.8;
	position:relative;}
	
.movie-btn span.icon-start img{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:40px;
	max-width:60px;
	margin: auto;
	z-index:10;
	-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	}
.movie-btn span.icon-time{
	position:absolute;
	bottom:0;
	right:0;
	z-index:10;
	background-color:rgba(0,0,0,0.4);
	color:#fff;
	padding:0 5px;
	}
	
a:hover .movie-btn span.icon-start img{
	width:48px !important;}
		
/*scalebox*/
.scalebox{
	overflow:hidden;}

.scalebox img{
	 -moz-transition: -moz-transform 0.2s ease-in;
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
}
a:hover .scalebox img{
	 -moz-transform: scale(1.05);
	 -webkit-transform: scale(1.05);
    transform: scale(1.05);}
	



/*右矢印*/
span.link-arrow{
	position: relative;
	padding-right: 1em;
	
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	font-weight:bold;
	display:block;
	}

span.link-arrow:after{
	
	position: absolute;
/*	top: 50%;
	right: -7px;
	content: '';
	margin-top: -5px;
	border: 7px solid transparent;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-color: #14249c;*/
	
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;



	top: 50%;
	right: 10px;
	display: block;
	content: '';
	width: 8px;
	height: 8px;
	margin-top: -2px;
	border-top: 2px solid #14249c;
	border-right: 2px solid #14249c;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);


}

a:hover span.link-arrow{
	
	padding: 0 .5em;}
a:hover span.link-arrow:after{
	right: 17px;
	opacity: 0;
	}
	
		
 
/*page-top---------------------*/
#page-top {
	position:fixed;
	bottom:30px;
	right:80px;
	
	
	
}
.page-top-inner {
	
  position: relative;
  height: 50px;}
  
.page-top-inner p{
position: absolute;
  left: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: auto;
  background: rgba(224,226,239,0.7) ;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  overflow: hidden;
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
}
#page-top a {
	
	font-size:2rem;
	text-align:center;
	margin:0 auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: #14249c;
  background: transparent;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index:100;

}
#page-top p:hover a {
  top: -3px;
  left: -3px;
	

}

.page-top-inner p:hover {
  background: rgba(187,193,233,0.8) ;

}

/*footer-----------------------*/
#container #footer .footer-inner {
	background:url(../img/top/contact-bg.jpg) no-repeat;
	background-size:cover;
	background-attachment:fixed;
	text-align: center;
	padding:0;
}

#container #footer .footer-inner a:link {
	color: #fff !important;
	text-decoration: none;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#container #footer .footer-inner a:visited {
	color: #fff !important;
}
#container #footer .footer-inner p {
	text-align: center;
	margin: 2rem auto;
}
ul.contact-info li {
	border: solid 1px #fff;
	padding: 15px;
	width: 50%;
	margin: 0 auto 10px;
	font-size: 1.6rem;
}
ul.contact-info li span {
	display: inline-block;
	width: 30%;
}
ul.contact-info li.contact-btn {
	border: none;
	padding: 0;
}
ul.contact-info li.contact-btn a {
	text-align: center;
	margin: 20px auto 10px;
	border: solid 1px #14249c;
	background-color: #14249c;
	display: block;
	padding: 15px;
	position:relative;

}

ul.contact-info li.contact-btn a:before {
	content:"\f003";
	display:inline-block;
  font-family: FontAwesome;

}


ul.contact-info li.contact-btn a:hover:before {
	content:"\f2b7";
  font-family: FontAwesome;
	color: #14249c !important;

}
#container #footer .footer-inner ul.contact-info li.contact-btn a:hover {
	border: solid 1px #07495e;
	background-color: rgba(255,255,255,0.8);
	color: #14249c !important;
}


/*footer-menu*/
.footer-menu{
	background-color:#000;
	line-height:1.4;
	}
	.footer-menu ul.fl4{
		border-bottom:solid 1px #666666;
	padding-bottom:1rem;
	margin-bottom:1rem;
}


.footer-menu ul.fl4 li {
    float: left;
    margin-right: 2%;
    width: 22.7%;
}

#container .footer-menu a:link,
#container .footer-menu a:visited{
	color:#cccccc;
	}
	.footer-menu a:hover{
		opacity:0.7;}

.footer-menu dt{
	font-weight:bold;
	margin-bottom:1rem;
	color:#909090;
	background-color:#292929;
	border-radius:20px;
	-webkit-border-radius:20px;
	padding:1px 5px 1px 7px;
	}
.footer-menu dd{
	padding:0.5rem 0.5rem 0.8rem;
	font-size:90%;
	}
	
.footer-menu .sub{
	color:#707070;
	font-weight:bold;}
	
.footer-menu .bdr-btm{
	border-bottom:solid 1px #666666;
	padding-bottom:0.8rem;
	margin-bottom:0.5rem;}



.footer-menu ul.fl4>li:nth-child(2),
.footer-menu ul.fl4>li:nth-child(3){
	border-right:solid 1px #666666;
	padding-right:2%;
}

	
.footer-menu-sub li{
	display:inline-block;
	color:#959595;
	line-height:1.4;
	font-size:80%;
	}
/*footer-address*/
.footer-address{
	background-color:#fff;
	}


#container .footer-address .content-inner{
	   padding: 2% 4%;
	   line-height:1.4;
position: relative;
overflow: hidden;
	}  
	
.footer-address ul{
float:left;
left:50%;
position:relative;
margin-bottom:2rem;
	}
.footer-address ul li{
float:left;
left:-50%;
position:relative;
	}



.footer-address ul li img{
	max-width:120px;
	display:block;
	text-align:center;
	margin:0 20px;
	}
	
/*copyright*/
.copyright {
	clear:both;
	display:block;
	text-align: center;
	margin: 0 auto;
	padding-top:2rem;
	border-top: solid 1px #d8d8d8;
	font-size: 1.1rem;
	vertical-align: middle;
}

/*モーダル系------------------*/
/*large-btn クリックで拡大*/
.large-btn{
	position:absolute;
	bottom:0;
	right:0;
	color:#fff;
	background-color:rgba(0,0,0,0.5);
	font-size:2rem;
	padding:1rem;}

 /*boxer*/
 #boxer.mobile .boxer-close::before, #boxer.mobile .boxer-close:hover::before {
    font-size: 40px;
}
#boxer.mobile .boxer-close, #boxer.mobile .boxer-close:hover {
    height: 40px;
    right: 3%;
    top: 20%;
    width: 40px;
}
.boxer-meta{
	display:none;}
 
 
/*スマホでtoggleへ------------------*/

.brewing.accdn dd{
	padding: 2%;
	background-color: #ededed;
	text-align:left;
		position:relative;
}





.toggle {
	display: none;
	position:relative;
}


.toggle:after {
	position: absolute;
	right: 20px;
	top: 15px;
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	margin-top: -2px;
	border-top: 2px solid #555;
	border-right: 2px solid #555;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}

.toggle.opened:after {
	top: 17px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


.toggle-block li{
	margin-bottom:4%;
		}
		
.toggle-block dt{
		border-bottom:solid 1px #555;
		margin:0 15px ;
		padding:15px 0 10px;
		}

.toggle-block dd{
		padding:15px;
		}
				

/*second 第二階層--------------------------------------------------------*/
/*second title*/
#how .second-title {
	background: url(../howto/img/title-bg-how.jpg) no-repeat center center;
	background-size:cover;
}
#see .second-title {
	background: url(../seeto/img/title-bg-see.jpg) no-repeat center center;
	background-size:cover;}
#go .second-title {
	background: url(../goto/img/title-bg-go.jpg) no-repeat center center;
	background-size:cover;
	

}
/*third*/
/*#see*/
#see .culture .third-title {
	background: url(../seeto/img/title-bg-see-culture.jpg) no-repeat center center;
}
#see .basic .third-title {
	background: url(../seeto/img/title-bg-see-basic.jpg) no-repeat center center;
}
/*#how*/
#how .appeal .third-title {
	background: url(../howto/img/title-bg-how-appeal.jpg) no-repeat center center;
}
#how .ingredients .third-title {
	background: url(../howto/img/title-bg-how-ingre.jpg) no-repeat center center;
}
#how .brewing .third-title {
	background: url(../howto/img/title-bg-how-process.jpg) no-repeat center center;
}
#how .type .third-title {
	background: url(../howto/img/title-bg-how-type.jpg) no-repeat center center;
}
#how .temperature .third-title {
	background: url(../howto/img/title-bg-how-temperature.jpg) no-repeat center center;
}
#how .aroma .third-title {
	background: url(../howto/img/title-bg-how-aroma.jpg) no-repeat center center;
}
#how .sakeset .third-title {
	background: url(../howto/img/title-bg-how-set.jpg) no-repeat center center;
}
#how .mixsing .third-title {
	background: url(../howto/img/title-bg-how-mix.jpg) no-repeat center center;
}
#how .label .third-title {
	background: url(../howto/img/title-bg-how-label.jpg) no-repeat center center;
}
#how .matching .third-title {
	background: url(../howto/img/title-bg-how-match.jpg) no-repeat center center;
}
#how .manner .third-title {
	background: url(../howto/img/title-bg-how-manner.jpg) no-repeat center center;
}
#how .more .third-title {
	background: url(../howto/img/title-bg-how-more.jpg) no-repeat center center;
}
#how .data .third-title {
	background: url(../howto/img/title-bg-how-data.jpg) no-repeat center center;
}



/*#go*/
#go .jssic .third-title {
	background: url(../goto/img/title-bg-go-jssic.jpg) no-repeat center center;
}
/*about*/
.about .third-title {
	background: url(../img/title-bg-about.jpg) no-repeat center center;
}
/*contact*/
.contact .third-title {
	background: url(../img/title-bg-contact.jpg) no-repeat center center;
}

.third-title {
	background-size:cover !important;
}



.layerTransparent{
	background-color:rgba(0,0,0,0.1);}

.title-inner {
	max-width:1024px;
	padding:10rem 0;
	margin:0 auto;
}

.third-title .title-inner {
	padding:6rem 0;
}
.third-title.twoline .title-inner{
	padding:4rem 0;
}

.title-inner h1 {
	color: #fff;
	text-align: left;
	font-size: 5rem;
	font-weight:bold;
	line-height:1;
}
.title-inner h1 span {
	font-size: 2.8rem;
	margin:0 0 1rem;
	display:block;
}
/*breadcrumb*/
.breadcrumb{
	background-color:#f3f3f3;
	padding:1rem;
	font-size:80%;
}
.breadcrumb ul{
	background-color:#f3f3f3;
	max-width:1024px;
	text-align:left;
	margin:0 auto;
}


.breadcrumb ul li{
	display:inline-block;
	margin-right:5px;

}
.breadcrumb ul li a {
    color: #1a65ba;
	position:relative;
	padding-right:16px;
	}
.breadcrumb ul li.link {
	position:relative;
	}
	

.breadcrumb ul li.link:after {
	position: absolute;
	top: 0;
	right: -3px;
	display: block;
	content: '/';
	width: 8px;
	height: 8px;
	color:#555555;}	

	
.breadcrumb ul li img{
	width:15px;
	vertical-align:middle;

}
/*contents-menu*/	
.contents-menu ul li p.txt-link{
	padding:1rem 1rem;
	margin:0 !important;
	text-align:center;
	position:relative;
	}
.contents-menu ul li a .txt-link img{
	position:absolute;
	left:15px;
	top:5px;
	width:40px;}

.contents-menu ul li{
	margin-bottom:0rem;}
	
.contents-menu ul li a{
	display:block;
/*	background-color:#fff;*/
	padding:5px 0;
	border-bottom:1px solid #eee;
	
}

/*table*/
.table-form {
border-collapse: collapse;
  width: 100%;
	background: #fff;
}
.table-form th, .table-form td {
	padding: 10px;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
	margin: 0;
	vertical-align: middle;
	word-break: keep-all;
}
/*sitemap*/
.sitemap .footer-menu.sitemap{
	  background-color: #fff;}
#container .footer-menu.sitemap dd a:link,
#container .footer-menu.sitemap dd a:visited {
    color: #555555;
	margin:15px;
	display:block;
}
.footer-menu.sitemap dd {
    padding: 0 0 0 20px;
}


 .footer-menu.sitemap dd.sub{
    padding:10px 10px 0 15px;
}
.footer-menu.sitemap dt {
    background-color: #909090;
    border-radius: 20px;
    font-weight: bold;
    margin: 3rem 0 1rem;
    padding: 5px 5px 5px 10px;
}
#container .footer-menu.sitemap dt a,
#container .footer-menu.sitemap dt a:link,
#container .footer-menu.sitemap dt a:visited{
    color: #fff !important;
	display:block;
}




/*contact*/
.contact .table-form th{
	font-weight:bold;
	width:30%;
	}
	
	
.contact .table-form th,
.contact .table-form td{
	background-color:#f3f3f3;
	border:none;
	margin-bottom:3px;
	border-bottom:solid 3px #fff;
	padding:4%;
	}
.contact .table-form textarea, .contact .table-form select {
	width: 80%;
	border: solid 1px #ddd;
	padding: 0.8rem 0;
}
.contact .table-form input {
	border: solid 1px #ddd;
	width: 80%;
	padding:10px;
}

input[type="submit"] {
	background-color:#3d489a;
	color:#fff;
	padding:5px 60px;
	text-align:center;
	margin:30px auto;
}

input[type="submit"]:hover {
	background-color:#5965bc;
}

/*-------------------------------*/

/*@media screen and (min-width : 1025px)pc以上

-------------------------------*/
@media screen and (min-width : 1025px) {
.menu__second-level {
	visibility: hidden;
	opacity: 0;
	z-index: 1;
}
/**/
li.menu__mega .menu__second-level {
	position: fixed;
	top: 130px;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 20px 2%;
	background: rgba(0,0,0,0.8);
	-webkit-transition: top .4s ease,opacity .4s ease;
	transition: top .4s ease,opacity .4s ease;
}
li.menu__mega:hover .menu__second-level {
	top: 110px;
	visibility: visible;
	opacity: 1;
}
.second-level-inner {
	max-width: 1024px;
	margin: 20px auto;
}
#top-head .menu .menu__second-level .cat a {
	font-size: 1.4rem;
	border: solid 1px #959595;
	text-align: center;
	display: block;
	padding: 10px;
	font-weight: bold;
	margin-bottom: 1rem;/*background-color:4b4b4b;*/

}
#top-head .menu .menu__second-level p.sub-cat {
	text-align: center;
	padding: 10px;
	font-size: 1.4rem;
	color: #959595 !important;
	font-weight: bold;
	border-bottom: solid 1px #959595;
	margin-bottom: 1rem;
}
#top-head .menu .menu__second-level a {
	text-align: center;
	display: block;
	padding: 10px;
	font-size: 1.4rem;
	color: #fff !important;
}
#top-head .menu .menu__second-level p.cat a:hover {
	background-color: #5e5e5e;
	opacity: 1;
}
#top-head .menu .menu__second-level a:hover {
	background-color: #5e5e5e;/*opacity:0.7;*/
}
.fixed li.menu__mega .menu__second-level {
	top: 85px;
}
.fixed li.menu__mega:hover .menu__second-level {
	top: 65px;
}	



	/* Fixed */
.fixed #top-head {
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	height: 65px;
/* box-shadow: 0 1px 2px 0px #b9b9b9;
    -webkit-box-shadow: 0 1px 2px 0px #b9b9b9;
    -moz-box-shadow: 0 1px 2px 0px #b9b9b9;*/
}
.fixed #top-head h1.logo a {
	background-size: 115px auto;
}
.fixed #top-head .menu ul li a.hdln span{
	margin:0 auto 10px;}

.fixed #top-head .menu ul li a.hdln{
	height:65px;
}

.fixed #top-head .jss a{
	background-size:60%;

}

.fixed #top-head .menu ul li a.hdln{
	padding:8px;
}
.fixed #top-head .menu ul li a.hdln p{
	display:none;
}

/*box*/
.box a:hover .btn-more01, .btn-more01:hover {
	background-color: #d41927;
	color: #fff;
	text-decoration: none !important;
}
	

.box a:hover .btn-more01::after, .btn-more01:hover::after {
	right: -130%;
}
.box a:hover .btn-more01::before, .btn-more01:hover::before {
	right: 40%;
}	

.box a:hover .btn-more01 span, .btn-more01:hover span {
	margin-left: 0;
}

	
}

/*-------------------------------*/

/*@media screen and (min-width : 1024px)

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

#wrapper, #container {
	margin-top: 110px;
}
/*.content-inner*/
#container .content-inner {
	padding: 8% 4%;/*左右の余白追加*/
}
#container .content-inner.tab-pdg0{
	padding: 8% 0;/*左右の余白追加しない*/
	}

/*font*/
.title-inner h1 {
	margin:0 4%;
}

/*nav*/
/* header */
/* Fixed reset */
#top-head, .fixed #top-head {
	height: 110px;
	
/* box-shadow: 0 1px 2px 0px #b9b9b9;
    -webkit-box-shadow: 0 1px 2px 0px #b9b9b9;
    -moz-box-shadow: 0 1px 2px 0px #b9b9b9;*/
}


#top-head .inner, .fixed #top-head .inner {
	margin: 0 auto;
	text-align: left;
}


#top-head .inner .fl,
#top-head .inner .fr{
	float:none;
	width:100%;
}
#top-head .menu ul {
    margin-right: 0;
}
#top-head .menu ul li{
    width: 25%;
	max-width:inherit;
}
#top-head .menu ul li a.hdln {
    height: auto;
    padding: 5px 0;
/*	background-color:#eee;*/
	border-right:solid 1px #ddd;
	border-top:solid 1px #ddd;
	border-bottom:solid 1px #ddd;
}
#top-head .menu ul li a.hdln p{
	padding:0 15px;
	background-color: inherit;}
	

#top-head .menu ul li a.hdln span{
	background-size:350%;
	height:30px;
	margin:0 auto 0px;
	
}
#top-head .menu ul li.active a.hdln,
#top-head .menu ul li.active a.hdln:hover{
	color:#fff;
}
#top-head .menu ul li.index a.hdln span{
	background-position:14px 3px;	
}
#top-head .menu ul li.how a.hdln span{
	background-position:-38px 3px;	
}
#top-head .menu ul li.see a.hdln span{
	background-position:-100px 3px;	
}
#top-head .menu ul li.go a.hdln span{
	background-position:-158px 3px;	
}

#top-head .menu ul li.index.active a.hdln span{
	background-position:14px -32px;	
}
#top-head .menu ul li.how.active a.hdln span
{
	background-position:-38px -32px;	
}
#top-head .menu ul li.see.active a.hdln span{
	background-position:-100px -32px;	
}
#top-head .menu ul li.go.active a.hdln span{
	background-position:-158px -32px;	
}

#top-head h1.logo a,
.fixed #top-head h1.logo a {
	margin: 10px 100px 0 auto !important;
	text-align: right;
	background: url(../img/icon-logo-sake.png) no-repeat right top;
	background-size: 50% auto;
	padding-top: 40px;
	width:140px;

}
#top-head .jss a{
    right: 10px;
    top: 0;
    width: 80px;
}

/*footer-----------------------*/
#container #footer .footer-inner {
	background-attachment:inherit;
}

/*第二階層*/
/*contents-menu*/
#container .content-inner.contents-menu{
    padding: 4% 0;
}
}
/*-------------------------------*/

/*@media screen and (min-width : 768px)

-------------------------------*/
@media screen and (max-width : 768px) {
/*#top-head*/

#top-head .menu ul li a.hdln {
    padding: 6px 0;
}

/*page-top*/
#page-top a.arrow-top img {
	/*	border:solid 1px #ffc478;*/
	height: 50px;
 margin: 20px auto;
 padding: 10px;
 width: 50px;
}

/*btn-more01*/
.btn-more01 {
	width: 100%;
}
/*footer*/
.footer-menu ul.fl4>li{
	margin-bottom:30px;
}

.footer-menu ul.fl4>li:nth-child(2){
	border-right:none;
	padding-right:0;
}
.footer-menu ul.fl4>li:nth-child(3){
	border-right:none;
}
.footer-menu dt {
    margin-bottom:2rem;
}

.footer-menu dd {
    padding: 0.5rem 0.5rem 1.5rem;
}

/*第二階層*/
.second-title {
/* height:180px;*/
 background-size:auto 180px;
}
	
/*contact*/
/*.table-form*/
.contact .table-form {
 width: 100%;
 border: none;
 border:solid 1px #aaaaaa;
}
.contact .table-form th {
 width: 100%;
 display: block;
 border: none;
 background-color: #e2e2e2;
 padding: 1.5% 3%;
}
.contact .table-form td {
 width: 100%;
 display: block;
 border: none;
 padding: 20px 10px;
}
 .contact .table-form textarea, .contact .table-form select, .contact .table-form input {
 width:94%;
}
/*contents-menu*/
.contents-menu ul li{
    width: 50%;
	margin-right: 0;
	 margin-bottom: 0;}
.contents-menu ul li a .txt-link img{
	left:15px;
	top:5px;
	width:30px;}	

/*contact*/
.contact .table-form td{
	background-color:#fff;
	}
}

/*-------------------------------*/

/*@media screen and (min-width : 640px)

-------------------------------*/
@media screen and (max-width : 640px) {	
#top-head h1.logo a,
.fixed #top-head h1.logo a {
	margin: 10px 70px 0 auto !important;
	background-size: 35% auto;
	padding-top:30px;

}
#wrapper, #container {
    margin-top: 100px;
}
#top-head, .fixed #top-head {
    height: 100px;
}

#top-head .jss a{
    width: 50px;
}


/*font*/
h2 {
 font-size:3rem;
}
h3,
h4 {
 font-size:2rem;
}


/*tite*/
/*.second-title {
    height: 240px;
}*/

.title-inner {
	padding:9rem 0;
}

.third-title.twoline .title-inner {
	padding:5rem 0 3rem;
}


.title-inner h1 span {
    margin: 0 0 0.5rem;
}


/*スマホでtoggleへ------------------*/
.toggle-block li{
		position:relative;
		}	
.toggle-block li .toggle{
		position: absolute;
		top:0;
		right:0;
		width:100%;
		height:100%;
		display: block;
		width: 100%;
		/*background: #eee;*/
		text-align:right;
		color:#555555;
		border-bottom:solid 1px #bbbbbb;
		}
		
.toggle-block li .toggle i{
	font-size:80%;
	position:absolute;
	top:20px;
	right:10px;
		}	
	
.toggle-block dl {
		margin-bottom:15px;
		}
		
	.toggle-block dt{
		border-bottom:none;
		margin-bottom:10px;
		padding-bottom:5px;
		padding-right:20px;
		}

	.toggle-block dd{
		padding:0;
		}	
	.toggle-block dd .toggle-contents{
		padding:15px;
		background-color:#eee;}			
.toggle-contents {
		display: none;
	}

/*.table-form.resp*/
.table-form.resp {
    border-top: 1px solid #999;
  }
  .table-form.resp td {
    display: block;
    border-bottom: none;
  }
  .table-form.resp th {
    display: block;
    border-top: none;
    border-bottom: none;
    width: 100%;
  }
  
  
 /*contents-menu*/
 	#container .content-inner.contents-menu {
    padding: 0;
}


.contents-menu ul li{
    width: 50% !important;
	float: left !important;}
	
	.contents-menu ul li:nth-child(odd){
		border-right:solid 1px #eee;
		}
.contents-menu ul li p.txt-link {
    margin: 0 !important;
    padding-left: 60px;
    position: relative;
    text-align: left;
}
.contents-menu ul li p{
	font-size:1.4rem !important;}
	

/*footer*/

.footer-address ul{
float:none;
left:inherit;
margin-bottom:2rem;
	}
.footer-address ul li{
float:none;
left:inherit;
text-align:center;
	}
.footer-address ul li img{
	display:block;
	text-align:center;
	margin:0 auto 10px;
	}
	}

/*-------------------------------*/

/*@media screen and (min-width : 414px) iPhone 6 Plus

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

}
	
/*-------------------------------*/

/*@media screen and (min-width : 374px) under iPhone 6 (375px)

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

h2 {
 font-size:2rem;
}


 .second-content ul.contact-info li span {
 display:block;
 width:100%;
}
.contact .table-form input.input-half {
    width: 22%;
}

}
	
/*-------------------------------*/

/*@media screen and (min-width : 320px) iPhone 5

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

.second-title .title-inner {
    padding: 12rem 0 6rem;
	height:200px;
}
.see .second-title .title-inner {
    padding: 8rem 0 10rem;
}
 #footer .menu ul li a {
 margin: 5px 0;
}
}