@charset "utf-8";

/* responsive Start */
/*===================================================================== */



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


/*=====================================================================
メニュー
======================================================================= */

.floatPanel {width: 100%; min-width: 100%;}

.floatPanel .sns{display: none;}
.floatPanel .menu{display: none;}
    
.floatPanel h1{width: 70px; margin: 0 auto 0 auto;}
.floatPanel h1 img{width: 100%; padding-top: 30px;} 

/*=====================================================================
ドロワーメニュー
======================================================================= */


#navigation{
    display: none;
  position: fixed;
  width: 100%;
    min-width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #FFFF5F;
  z-index: 9001;
}

    
#navigation .navigation_inner{
  width: 100%;
  height: 98%;
    position: relative;;
    margin: 0 auto 0 auto;
    background-color: #FFFF5F;
}

#navigation .navigation_inner h1{width: 70px; margin: 10px auto 0 auto;}
#navigation .navigation_inner h1 img{width: 100%; margin-top: 20px;}

    
#navigation .navigation_inner .menu{width: 85%; margin:0 auto 20px auto;}
#navigation .navigation_inner .menu ul {width: 100%; padding: 0; margin: 0 0 0 0;}
#navigation .navigation_inner .menu ul li{float: none; padding: 0;}
#navigation .navigation_inner .menu .link{margin:20px 0 0 0;}
#navigation .navigation_inner .menu a{display: inherit; text-decoration: none; transition: all 0.3s ease; font-size: 26px;}
#navigation .navigation_inner .menu a:hover{text-decoration: none; color: #99951C; transition: all 0.1s ease;}
#navigation .navigation_inner .menu a .jp{font-family: 'Noto Sans JP'; font-weight: 500; font-size: 12px; }
#navigation .navigation_inner .menu a p{margin-top: 5px; padding: 0;}


#navigation .navigation_inner .navi_foot{width:85%; text-align: right; position: absolute; bottom: 30px; right: 30px;}
#navigation .navigation_inner .navi_foot .sns {margin-right: 0;}
#navigation .navigation_inner .navi_foot .sns ul {font-size: 0; margin: 0; padding: 0; text-align: right;}
#navigation .navigation_inner .navi_foot .sns ul li {display: inline-block; margin: 0 0 0 45px;}
#navigation .navigation_inner .navi_foot .sns ul li a{ font-size: 1.3rem; color: #000000; transition: all 0.3s ease;}
#navigation .navigation_inner .navi_foot .sns ul li a:hover{ color: #99951C; transition: all 0.1s ease;}

#navigation .navigation_inner .navi_foot  .copyright{
    margin:16px 0 0 0;
    font-size: 10px;
    letter-spacing: .02em;
    font-family: 'Roboto', sans-serif;
}
    

/*=====================================================================
slider
======================================================================= */

    

/*logo
------------------------------------------------------------------------ */
#main-visual .logo {
  position: absolute;
  top: 45%;
  left: 50%;
  margin-left: -57px;
    margin-top: -70px;
z-index: 10;

}

#main-visual .logo img{width: 115px; height: auto;}

#main-visual .copyarea{
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 10;
    top: 58%;
    left: 0%;
}

#main-visual .copy01{
    display: inline-block; 
    font-size: 11px; 
    font-weight: 500;
    background-color: #FFFF5F;
    padding: 5px 8px 4px 10px;
    z-index: 10;
    letter-spacing: -.02em;
}

#main-visual .copy02{
    display: inline-block; 
    font-size: 11px; 
    font-weight: 500;
    background-color: #FFFF5F;
    margin-top: 12px;
    padding: 5px 3px 4px 10px;
    z-index: 10;
    letter-spacing: -.02em;
}


#slideshow_sp {
}

 
#slideshow {

}

    
/*=====================================================================
	# Navigation
======================================================================= */

#hamburger{
    display: inherit;
	position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9999;
}

.menuarea{ width:43px; height: 100%; position: absolute; top: 38px; right:40px; z-index: 99999; text-align: center; display: block;}
.menuarea a{ width:43px; height: 20px; }
.menuarea a:hover .menu-line span{opacity: 0.6;}

/* ハンバーガーメニュー*/
.menu-line,
.menu-line span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-line {
  position: relative;
	z-index: 2;
  top:0;
  width: 43px;
  height:20px;
}
.menu-line span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000000;

}
.menu-line span:nth-of-type(1) {
  top: 0;
}
.menu-line span:nth-of-type(2) {
  top: 10px;
}


/* アニメーション*/
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(5px) rotate(-25deg);
  transform: translateY(5px) rotate(-25deg);
}
.menu-trigger.active span:nth-of-type(2) {
    -webkit-transform: translateY(-5px) rotate(25deg);
  transform: translateY(-5px) rotate(25deg);
}




/*.scroll_down
------------------------------------------------------------------------ */

.scroll_down {
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 99;
	width: 36px;
	height: 100px; 
}

.scroll_down .txt {
    font-family: 'AlternateGotNo3D', sans-serif;
  display: block;
	color: #FFFF5F;
  transform: rotate(90deg) scale(0.7);
  transform-origin: 0 100%;
  width: 100px;
  height: 36px;
  
  letter-spacing: 0.1em;
	margin: -36px 0 0 0;
  line-height: 1;
}

.scroll_down a{
	text-decoration: none;
}

.scroll_down a:hover {
	opacity: 0.8;
	transition: 0.1s ease-out;
}


.scroll_down .bar {
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 3px;
  height: 100px;
  background-color: #FFFF5F; }

.scroll_down .bar i {
	display: block;
	position: absolute;
	width: 3px;
	background-color: #000000; }



/*=====================================================================
02. layout
======================================================================= */


#wrap {
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
  padding: 0;}



/*=====================================================================
03. Index
======================================================================= */

.subtttl{width: 100%; text-align: center; margin: 10px 0 40px 0;}
.subtttl .en{font-size: 36px;}
.subtttl .jp{font-size: 12px; font-family: 'Noto Sans JP'; font-weight: 500; margin-top: 3px;}

#pickup{width: 100%; margin: 0 auto 0 auto;}
#pickup.detail{margin-bottom: 0;}

#pickup .newsblock{width: 100%; float: none; margin-bottom: 30px!important;}
#pickup .newsblock:nth-child(odd){margin-right: 0;}
#pickup .newsblock:nth-child(1){margin-bottom: 0;}
#pickup .newsbg{
    width: 100%;
    height: auto;
    background-color: #FFFF5F;
    background-image:url("../images/bg30.gif"), url("../images/bg30.gif");
    background-position: right  0, left 0;
    background-size: 7.5% auto, 7.5% auto;
    background-repeat: no-repeat, repeat-y;
}

#pickup .newsimage{
display: none;
}
    
#pickup .newsimage_sp{
    width: 85%;
    height: auto;
    margin: 0 auto;
    background-color: #FFFF5F;
        position: relative;
    display: inherit;
    padding-bottom: 30px;
    
    background-image:url("../images/bg30.gif");
    background-position: left bottom;
    background-size: 9% auto;
    background-repeat: repeat-y;
}
    
#pickup .newsimage_sp img{
    width: 100%;
height: auto;
}

#pickup .newsimage_sp .catename{
    position: absolute; bottom: 60px; left: 0; z-index: 100;
    display: inline; background-color: #000; color: #FFF; padding: 13px 10px 13px 10px; font-size: 15px; line-height: 0;
}

#pickup .newsttl{display: none;}

#pickup .newsttl_sp{display: inherit; width: 85%; margin: 20px auto 0 auto; font-size: 18px; font-weight: 700; line-height: 180%;}
#pickup .newsbody{width: 85%; margin:20px auto 0 auto;; font-size: 14px; font-weight: 400; line-height: 180%;}


#upcoming{
    width: 100%;
    background-image:url("../images/bg01.gif");
    background-position: right top 10px;
    background-size: 15px 500px;
    background-repeat: no-repeat;
}
#upcoming.detail{background-image:none;}

#upcoming .newsarea{width: 85%; margin: 0 auto;}
#upcoming .newsblock{width: 100%; float: none;}

#upcoming .newsblock:nth-child(2){margin: 0;}
#upcoming .newsblock:nth-child(3n+2){margin: 0;}

#upcoming .newsblock{margin-bottom:30px!important;}

#upcoming .newsimage{
    display: none;
}

#upcoming .newsimage_sp{
    display: inherit;
    width: 100%;
    background-color: #FFF;
    
}
    
#upcoming .newsimage_sp img{
    width: 100%;
    height: auto;
}

#upcoming .newsdate{
    display: inline-block;
    padding: 6px 10px 6px 10px;
    font-family: Helvetica, "sans-serif";
    font-size: 14px; 
    font-weight: bold;
    letter-spacing: .02em;
    margin-top: 30px; 
    line-height: 100%; 
    background-color: #000; 
    color: #FFF;
}
    #upcoming .newsttl{display: none;}
#upcoming .newsttl_sp{display: inherit;margin-top: 12px; font-size: 15px; font-weight: 700; line-height: 180%;}

#upcoming .newsbody{ margin-top: 10px; font-size: 14px; font-weight: 400; line-height: 200%;}


#index_links{width: 100%; margin-top:0;}
#index_links .links_title {margin:0 0 20px  30px; position: relative; padding-top: 24px;}
#index_links .links_title:before{content: ""; position: absolute; top: 0; left: -96px; width: 295px; height: 3px; background-color: #000;}
#index_links .links_title .en{font-size: 24px;}
#index_links .links_title .jp{font-size: 12px; margin-top:7px;}

#itemslide{width:100%; min-width:100%; margin:0 0 80px 0;}
.slideritem{ width:100%; min-width:100%; }
.slideitemblock{ width:85%;  margin: 0 auto;}
    
.slideitemblock .mainimage{ display: none;}

.slideitemblock .mainimage_sp{display: inherit; width:85%; margin: 0 auto;}
.slideitemblock .mainimage_sp img{width:100%; height: auto;}
.slideitemblock .mainimage_sp a{transition: 0.3s ease-out;}
.slideitemblock .mainimage_sp a:hover{opacity: 0.4; transition: 0.1s ease-out;}
    
.slideitemblock .linksbody{width:85%; font-size: 13px; line-height: 180%; margin: 10px auto 0 auto;}
.slideitemblock .linksttl{width:85%; font-size: 16px; font-weight: 500; margin: 30px auto 0 auto;}


/* BTN */
.btn01 a{
    width:42%;
    height: 44px;
    margin:20px 0 0 50% ;
    color: #FFF;
    background-color: #000;
    text-decoration: none;
    text-indent: 20px;
    line-height:0;
    outline: none !important;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
    position: relative;
    z-index:1;    
    /*　box要素縦中央 */
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
}

.btn01 a img{width: 49px; margin: -5px 0 0 25px;}


.btn01 a:after {
 content: none;

}

.btn01 a:hover:after {
 content: none;


}
.btn01 a:active { content: none;}



.btn02 a{
    display: block;
    float: right;
    width: 100px;
    margin:20px 20px 0;
    text-decoration: none;
    font-size: 15px;
    line-height: 100%;
    transition: 0.3s ease-out;
}
.btn02 a .txt{display: block; float: left; width: 50%; }
.btn02 a .image{display: block; float: left; width: 50%; margin:-3px 0 0 0; text-align: right;}
.btn02 a img{width: 69px; height: auto;}

.btn02 a:hover{
    opacity: 0.4;
    transition: 0.1s ease-out;
}


.btn03 a{
    width: 85%;
    height: 60px;
    margin:0 auto 40px auto;
    color: #FFF;
    background-color: #000;
    text-decoration: none;
    line-height:0;
    outline: none !important;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
    position: relative;
    z-index:1;

    /*　box要素縦中央 */
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向右揃え（Safari用） */
 justify-content: center; /* 横方向右揃え */
}


.btn03 a:after {
content: none;
}

.btn03 a:hover:after {
content: none;

}
.btn03 a:active {content: none;}


/* Hover Image */
a.hoverimg {
  display: block;
  transition: 0.4s ease-out;
}

a.hoverimg:hover {
  transform: scale(1.04) rotate(0.1deg);
  opacity: 0.5;
	transition: 0.2s ease-out;
}




/*=====================================================================
04. Detail
======================================================================= */

.articlearea{
    width: 100%;
    margin: 30px 0 0 0;
    background-image:url("../images/bg01.gif");
    background-position: right 0 top 0;
    background-size: 10px 500px;
    background-repeat: no-repeat;
}

.newsdetail{
    width: 85%;
margin: 0 auto;
}

.news_mainvisual{width: 100%;}
.news_mainvisual img{width: 100%;}

.news_ttl{margin: 30px 0;}
.news_ttl .catename{display: inline; background-color: #000; color: #FFF; padding: 5px 8px 5px 10px; margin: 0; font-size: 13px; line-height: 0; }
.news_ttl .ttl{display: block; font-size: 20px; font-weight: 500; line-height: 180%; margin-top: 20px;}

.news_article{width: 100%;}
.news_article .left{float: none; width: 100%; margin-right: 0;}
.news_article .left img{width: 100%; margin-bottom: 30px;}
.news_article .left img:last-child{margin-bottom: 0;}
.news_article .right{float: none; width: 100%; font-size: 14px; line-height: 220%;}

.news_article .right .readarea{text-align: right;}
.news_article .right .readcopy{display: inline-block; background-color: #FFFF5F; font-size: 12px; font-weight: 500; padding: 10px 12px; line-height: 100%; margin:30px 0 15px 0;}

.outline{
    width: 100%; 
    margin-bottom:30px;
    background-color: #FFFF5F; 
    background-image:url("../images/bg300.gif"); 
    background-position: left 0 top 0; 
    background-repeat: repeat-y;
}
.outline_body{width: 85%; padding: 30px; margin: 25px auto 0 auto; background-color: #FFFF5F;}
.outline_body .left{float: none; width: 100%; margin-right: 0;}
.outline_body .left img{width: 100%; height: auto;}
.outline_body .photo.in:before{background-color:#FFFF5F!important; }

.outline_body .right{float: none; width: 100%; margin-top: 20px;}
.outline_body .right .read{font-size: 15px; font-weight: 500;}
.outline_body .right .body{font-size: 13px; line-height: 180%;}
.outline_body .right .cap{font-size: 12px; line-height: 180%;}


#about{width: 100%; margin: 0 auto;}
#about .detailarea{
    width: 100%; 
    background-color: #FFFF5F;
    background-image:none; 
    background-position: left 0 top 0; 
    background-repeat: repeat-y;
}
#about .detailarea .detailbody{
    width: 100%;
    margin: 0 auto 30px auto;
    padding:25px 0 25px 0;
    background-color: #FFFF5F;
background-image:url("../images/bg30.gif"); 
    background-position: left 0 top 0;
    background-size: 90px;
    background-repeat: repeat-y;
}

#about .detailarea .detailbody .left{float: left; width: 30%; margin:0 6%;}
#about .detailarea .detailbody .left img{width: 100%;}
#about .detailarea .detailbody .right{float: left; width: 50%; font-size: 15px; line-height: 200%;}



#about .detailbody02{
    width: 85%;
    margin: 0 auto;
}
#about .detailbody02 .left{float: none; width: 100%; margin:0 0 30px 0;}
#about .detailbody02 .left img{width: 100%;}
#about .detailbody02 .right{float: none; width: 100%; font-size: 15px; line-height: 220%; margin-bottom: 10px;}


#links{width: 85%; margin: 0 auto;}
#links .newsarea{width: 100%; margin: 0 auto;}
#links .newsblock{width: 100%; float: none;}

#links .newsblock:nth-child(2){margin: 0 0 0 0;}
#links .newsblock:nth-child(3n+2){margin: 0 0 0 0;}

#links .newsblock{margin-bottom:30px!important;}

#links .newsimage{
    width: 100%;
    height: auto;
    background-color: #FFF;
}
#links .newsimage img{width: 100%;height: auto;}

#links .newsttl{margin-top: 20px; font-size: 15px; font-weight: 700; line-height: 180%;}
#links .newsbody{ display: none;}
#links .newsbody_sp{display: inherit;margin-top: 17px; font-size: 13px; font-weight: 400; line-height: 220%;}


/*=====================================================================
05. Footer
======================================================================= */


/*.btn_scroll
------------------------------------------------------------------------ */

.btn_scroll {
	overflow: hidden;
	position: absolute;
	top: 40px;
	right: 20px;
	z-index: 99;
	width: 30px;
	height: 160px; 
}

.btn_scroll .txt {
  font-family: 'AlternateGotNo3D', sans-serif;
  display: block;
	color: #000;
  transform: rotate(90deg) scale(0.8);
  transform-origin: 0 100%;
  width: 160px;
  height: 30px;
  
  letter-spacing: 0.1em;
	margin: 80px 0 0 0;
  line-height: 1;
}

.btn_scroll a{
	text-decoration: none;
    display: block;
}

.btn_scroll a:hover {
	opacity: 0.6;
	transition: 0.1s ease-out;
}


.btn_scroll .bar {
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 3px;
  height: 160px;
  background-color: #000000; }

.btn_scroll .bar i {
	display: block;
	position: absolute;
	width: 3px;
	background-color: #99951C; }




footer{width: 100%;  min-width:auto; margin: 0 0 0 0; padding: 40px 0 60px 0; background-color: #FFFF5F; position: relative;}
footer .menu{width: 85%; margin:0 auto 20px auto;}
footer .menu ul {width: 61%; padding: 0; margin: 0 0 0 0;}
footer .menu ul li{float: none; padding: 0;}
footer .menu .logo{width: 80px; margin-right: 0;}
footer .menu .logo img{width: 100%; height: auto;}
footer .menu .link{margin:16px 0 0 0;}
footer .menu a{display: inherit; text-decoration: none; transition: all 0.3s ease; font-size: 22px;}
footer .menu a:hover{text-decoration: none; color: #99951C; transition: all 0.1s ease;}
footer .menu a .jp{font-family: 'Noto Sans JP'; font-weight: 500; font-size: 12px; }
footer .menu a p{margin-top: 5px; padding: 0;}

footer .left{width: 85%; margin: 0 auto; float: none;}
footer .left .dscription{margin-left:0; font-size: 12px; line-height: 200%;}
footer .left .dscription span{font-weight: bold;}

footer .right{width:85%; margin: 20px auto 0 auto; float: none; text-align: right;}
footer .right .sns {margin-right: 0;}
footer .right .sns ul {font-size: 0; margin: 0; padding: 0; text-align: right;}
footer .right .sns ul li {display: inline-block; margin: 0 0 0 45px;}
footer .right .sns ul li a{ font-size: 1.3rem; color: #000000; transition: all 0.3s ease;}
footer .right .sns ul li a:hover{ color: #99951C; transition: all 0.1s ease;}




footer .right .copyright{
    margin:26px 0 0 0;
    font-size: 10px;
    letter-spacing: .02em;
    font-family: 'Roboto', sans-serif;
}


/* スクロール時のトランジション
------------------------------------------------------------------------ */

#wrap .photo {
  overflow: hidden;
  position: relative;
}

#wrap .photo.in:before {
  animation: img-wrap 1.0s cubic-bezier(.4, 0, .2, 1) forwards;
	 animation-delay: 0.4s;
  background: #FFF;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

    
    
/* 404
------------------------------------------------------------------------ */

.notfoundttl {width: 100%; text-align: center; font-size: 14px; margin:100px 0 40px;}
.notfoundttl h2{font-size: 22px; margin-bottom: 10px;  }

.notfound_btn{width: 180px; margin: 0 auto  0 auto;}

.notfound_btn  a{
	 width: 180px; 
	padding: 11px 0 7px 0;
    font-size: 12px;
	border-radius: 18px;
	background-color: #000; 
	text-align: center; text-decoration: none;color: #FFF; 
	transition: all 0.3s ease;
/*　box要素縦中央 */
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */

}

.notfound_btn  a:hover{background-color: #FFFF5F; color: #000; transition: all 0.1s ease;}



    
/* responsive End */
/*===================================================================== */
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}