@charset "UTF-8";

html {
	min-width: 320px;
	font-size: 62.5%;/*10px*/
}

/*---------------------------------
ヘッダ
----------------------------------*/
#header{
	position: relative;
	z-index: 99;
	width: 100%;
}

/*---------------------------------
ヘッダ
----------------------------------*/
/*---　ヘッダー  ---*/
.header-wrap{
	position: fixed;
	z-index: 100;
	width: 100%;
	margin: 0 auto;
}
	 

/*---　ヘッダ　ロゴ （左側）　---*/
.h-logo{
	width: 240px;
	float: left;
}
.h-logo h1{
	display: block;
	line-height: 1;
	text-align: left;
	background-image:url(../img_frame/h_logo_sp.png);
	background-repeat:no-repeat;
	background-position: left top;
	background-size: contain;
	margin: 10px 0 0 10px;
}
.h-logo h1 a{
	display: block;
	padding: 30% 0 0 0;
}
.h-logo span {
	display:none;
}

/*---------------------------------
toggle
----------------------------------*/
ul.toggle-wrap{
	width: 30%;
	float: right;
	text-align: right;
}
#toggle {
	text-align: center;
	background-color: #f1ca31;
}
.hamburger-box {
	display: block;
	margin: 4px auto;
}
.header-nav{
	display: none;
}


/*---------------------------------
global-nav
----------------------------------*/

/*---　グローバルナビ　---*/
#menu {
	display: none;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index:1;
	background-color: rgba(0,0,0,0.8);
	padding: 80px 0 10px 0;
}

#menu li {
	line-height: 1;
}
#menu li a {
	display: block;
	font-size:1.7rem;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	padding: 15px 0;
}

/*---------------------------------
コンテンツ
----------------------------------*/
#contents{
}

/*----------------------------
ページトップへ
----------------------------*/
.pagetop{
	
}
.pagetop a{
	display: block;
	font-size: 1.5rem;
	text-align: center;
	color: #404040;
	background-color: #ffcc00;
	background-image: url("../img_frame/ico_pagetop.png");
	background-repeat: no-repeat;
	background-position: right 24px center;
	padding: 10px 0.7em 10px 0;
	margin: 30px 0 0 0;
}

/*----------------------------
footer
----------------------------*/
 #footer{
	color: #ffffff;
	text-align: center;
	background-color: #404040;
	padding: 10px 0 0 0;
 }

/*---　フッタ　ロゴ 　---*/
#footer h1{
	display: block;
	width: 160px;
	line-height: 1;
	text-align: left;
	background-image:url(../img_frame/f_logo.png);
	background-repeat:no-repeat;
	background-position: left top;
	background-size: contain;
	margin: 20px auto;
}
#footer h1 a{
	display: block;
	padding: 25% 0 0 0;
}
#footer h1 span {
	display:none;
}
#footer h2 {
	font-size: 1.4rem;
	line-height: 1.4;
	font-weight: normal;
}
#footer h3 {
	display: block;
	width: 200px;
	font-size: 2rem;
	line-height: 1;
	text-indent: 0.5em;
	background:url("../img_frame/ico_mb.png") no-repeat left center;
	margin: 0 auto;
}
#footer p {
	font-size: 1.4rem;
	margin: 30px 0 10px 0;
}

/*---　マウスオーバーアニメーションボタン　---*/
.btn-footer{
	width: 170px;
	font-size: 1.5rem;
	line-height: 1.2;
	text-align: left;
	color: #404040;
	background-color: #ffcc00;
	padding: 10px 0 10px 60px;
	margin: 20px auto;
}
#footer .hvr-sweep-to-right::before {
  background: #ffffff;
}
#footer .hvr-sweep-to-right:hover{
	color: #404040;
}
/*---　マウスオーバーアニメーションボタンの矢印　---*/
.btn-footer .ico-mail{
	position:absolute;
	z-index: 999;
	width: 60px;
	height: 54px;
	top: 0;
	left: 0;
	background-image: url("../img_frame/ico_mail.png");
	background-repeat: no-repeat;
	background-position: center;
}
/*----------------------------
コピーライト
----------------------------*/
.copyright{
	display: block;
	font-size:1.1rem;
	text-align:center;
	color: #ffffff;
	border-top: solid 1px #ffffff;
	padding: 20px 0;
}

/*======================================

	フェードイン

=======================================*/
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 1000ms;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

/*----------------------------
ミディアムサイズ
----------------------------*/
@media only screen and (min-width: 40em){	/* 640px */

} /* end 640px*/



/*----------------------------
ラージサイズ
----------------------------*/

 @media only screen and (min-width: 60em) {	/*960px*/

/*---　ヘッダ　ナビゲーション　---*/
ul.toggle-wrap{
	width: 520px;/*---　修正　元サイズ410px　---*/
	background-color: #404040;
}
.header-nav{
	display: block;
}
.toggle-wrap li{
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1;
	vertical-align: top;
	font-weight: bold;
}
.toggle-wrap li a{
	display: block;
	color: #ffffff;
	transition: all 0.2s;
	padding: 28px 26px;
}
.toggle-wrap li a:hover{
	color: #f1ca31;
	transform: translate(0,-5px);
}

/*class"ani" 追加 */
.toggle-wrap .ani::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 146px;
    z-index: -1;
    content: '';
    background: #f1ca31;
    transform-origin: left top;
    transform: scale(1, 0);
    transition: transform .3s;
}
.toggle-wrap .ani:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
	 
/*追加 Submenu */
@keyframes fade-in {
from {
     opacity: 0;
    }
to {
    opacity: 1;
}
}
.toggle-wrap ol{
	display: none;
    position: absolute;
    top: 70px;
    right: 300;
}
.toggle-wrap .ani:hover ol{
	display:block;
	animation-name: fade-in;
    animation-duration: 1s;
}
.toggle-wrap ol li{
    display:inline-block;
	font-size: 18px;
}
.toggle-wrap ol li a{
    color: #ffffff;
}
.toggle-wrap ol li a:hover{
	color: #000000;
}	 

/*----------------------------
ページトップへ
----------------------------*/
.pagetop a{
	width: 150px;
	margin: 30px 0 0 auto;
}

/*----------------------------
footer
----------------------------*/
.footer-box-wrap{
	position: relative;
	width: 90%;
	max-width: 1020px;
	margin: 0 auto 40px auto;
}
.L-footer-box{
	float: left;
	width: 30%;
	text-align: left;
}
.R-footer-box{
	position:absolute;
	right: 0;
	bottom: 0;
	width: 60%;
	text-align: right;
}
.R-footer-box p{
	text-align: left;
}
.R-footer-box li{
	display: inline-block;
	vertical-align: bottom;
	margin-left: 30px;
}
	 
#footer h3 {
	text-align: left;
	text-indent: 1.2em;
}

/*---　マウスオーバーアニメーションボタン　---*/
.btn-footer{
	margin: 0px auto;
}

/*---　フッタ　ロゴ 　---*/
#footer h1{
	margin: 30px 0;
}


} /* end 960px*/