@charset "utf-8";



/*=====================================================================
webフォント
======================================================================= */

 @font-face {font-family: "AlternateGotNo3D"; src: url("//db.onlinewebfonts.com/t/eba4a2167165405be603f0c6cea6b521.eot"); 
     src: url("//db.onlinewebfonts.com/t/eba4a2167165405be603f0c6cea6b521.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/eba4a2167165405be603f0c6cea6b521.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/eba4a2167165405be603f0c6cea6b521.woff") format("woff"), url("//db.onlinewebfonts.com/t/eba4a2167165405be603f0c6cea6b521.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/eba4a2167165405be603f0c6cea6b521.svg#AlternateGotNo3D") format("svg"); } 

.en{font-family: "AlternateGotNo3D";}


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

#navigation{display: none;}

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

/* スクロール追従 portamento.jsで付与されるスタイルの設定 */
#portamento_container {}
#portamento_container .floatPanel {position:absolute; }
#portamento_container .floatPanel.fixed {position:fixed; margin-top: -10px; z-index: 100;}


.floatPanel h1{width: 125px; margin: 0 auto 0 auto;}
.floatPanel h1 img{width: 100%; padding-top: 80px;} 

.floatPanel .sns {
    width: 230px;
    height: 90px;
    position: absolute;
    top: 0; right: 0;
    background-color: #FFFF5F;
    
/*　box要素縦中央 */
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向右揃え（Safari用） */
 justify-content: center; /* 横方向右揃え */
}


.floatPanel .sns ul {font-size: 0; margin: 0; padding: 0; text-align: right;}
.floatPanel .sns ul li {display: inline-block; margin: 0 22px 0 22px;}
.floatPanel .sns ul li a{ font-size: 1.1rem; color: #000000; transition: all 0.3s ease;}
.floatPanel .sns ul li a:hover{ color: #99951C; transition: all 0.1s ease;}
    

.floatPanel .menu {position: absolute; top: 80px; left: 80px;}
.floatPanel .menu ul{margin: 0; padding: 0;}
.floatPanel .menu ul li {margin:0 0 18px 0; padding: 0;}

.floatPanel .menu ul li a{font-size: 22px; text-decoration:  none; position: relative; z-index: 100; padding: 4px;}

.floatPanel .menu ul li a .show {display: inline;}

.floatPanel .menu ul li .hide {
       display: none;
    position: absolute;
    font-size: 11px;
    color: #333;
    margin:7px 0 0 25px;
    font-family: 'Noto Sans JP';
    font-weight: 500;
    width: 180px;
}

.floatPanel .menu ul li a:hover .hide {
  display:inherit;

}



.floatPanel .menu ul li a::after{
  position: absolute;
     z-index: -1;
  bottom:0;
  left: 0;
  content: '';
  width: 100%;
  height: 30px;
  background: #FFFF5F;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .35s;
   
}
.floatPanel .menu ul li a:hover::after{
  transform-origin: left top;
  transform: scale(1, 1);
}


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


.bg-img ul {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;/*font-weight: normal;*/
}

.slides {
  position: relative;
}
.slides>li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slides>li.wipeCurrentSlide {
  animation-duration: 3.8s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-name: scaleAnim;
}
/*@media all and (-ms-high-contrast: none){
  .slides>li.wipeCurrentSlide {
    animation-name: none;
  }
}*/
.slides>li>img {
  width: 100%;
}

.img-change img {
  display: none;
}

@keyframes scaleAnim {
  0% {
    transform: scale(1.00) rotate(0.1deg);
  }
  100% {
    transform: scale(1.06) rotate(0.1deg);
  }
}

/*=====================================================================
#main-visual
======================================================================= */
#main-visual {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.iphone.portrait #main-visual,
.ipad.portrait #main-visual,
.android.portrait #main-visual {
  height: 32.68%;
}


/*.bg-img
------------------------------------------------------------------------ */
#main-visual .bg-img {
  width: 100%;
  height: 100%;
	overflow: hidden;
}
#main-visual .bg-img ul {
  width: 100%;
  height: 100%;
}
#main-visual .bg-img ul li {
  width: 100%;
  height:100%;
  background-size: cover;
  background-position: center center;
}


#slideshow_sp {
}


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

}

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

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

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

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


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

#hamburger{
display: none;
}



/*.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: 980px;
  padding: 0;}



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

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

#pickup{width: 980px; margin: 0 auto 80px auto;}
#pickup.detail{margin-bottom: -60px;}

#pickup .newsblock{width: 440px; float: left;}
#pickup .newsblock:nth-child(odd){margin-right: 90px;}
#pickup .newsblock:nth-child(1){margin-bottom: 70px;}
#pickup .newsbg{
    width: 440px;
    height: 350px;
    background-color: #FFFF5F;
    background-image:url("../images/bg30.gif"), url("../images/bg30.gif");
    background-position: right  top, left bottom;
    background-size: 30px auto, 30px auto;
    background-repeat: no-repeat, no-repeat;
}
#pickup .newsimage_sp{display: none;}
#pickup .newsimage{
    width: 410px;
    height: 320px;
    background-color: #FFF;
        position: relative;
}

#pickup .newsimage .catename{
    position: absolute; bottom: 30px; 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{width: 410px; margin-top: 30px; font-size: 18px; font-weight: 700; line-height: 180%;}
#pickup .newsttl_sp{display: none;}

#pickup .newsbody{width: 410px; margin-top: 20px; font-size: 14px; font-weight: 400; line-height: 180%;}


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

#upcoming .newsarea{display:flex; flex-wrap: wrap; width: 980px; margin: 0 auto;}
#upcoming .newsblock{width: 286px; }

#upcoming .newsblock:nth-child(3n-1){margin: 0 61px 0 61px;}

#upcoming .newsblock{margin-bottom:60px;}


#upcoming .newsimage{
    width: 286px;
    height: 190px;
    background-color: #FFF;
}

#upcoming .newsimage_sp{
    display: none;
}


#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{margin-top: 20px; font-size: 15px; font-weight: 700; line-height: 180%;}
#upcoming .newsttl_sp{display: none;}

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

#upcoming .btn03{
	display: block;
	width: 100%;
}

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

#itemslide{width:100%; min-width:1140px; margin:0 0 130px 80px;}
.slideritem{ width:100%; min-width:1140px; }
.slideitemblock{ width:240px;  margin: 0 40px 0 0;}
.slideitemblock .mainimage{ width:240px;}
.slideitemblock .mainimage_sp{display:none;}
.slideitemblock .mainimage img{width:100%;}
.slideitemblock .mainimage a{transition: 0.3s ease-out;}
.slideitemblock .mainimage a:hover{opacity: 0.4; transition: 0.1s ease-out;}
.slideitemblock .linksbody{font-size: 12px; line-height: 180%; margin-top: 10px;}
.slideitemblock .linksttl{font-size: 14px; font-weight: 500; margin-top: 30px;}


/* BTN */
.btn01 a{
    width: 205px;
    height: 44px;
    margin:30px 0 0 205px;
    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 85px;}


.btn01 a:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #99951C;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
}

.btn01 a:hover:after {
	left: 0%;
	right: auto;
	width: 100%;

}
.btn01 a:active {top: 0;}



.btn02 a{
    display: block;
    float: right;
    width: 130px;
    margin:25px 0 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: 340px;
    height: 60px;
    margin:0 auto 0 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 {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #99951C;
  transition: all 0.35s cubic-bezier(0.215, 0.61, 0.325, 1) 0s;
}

.btn03 a:hover:after {
	left: 0%;
	right: auto;
	width: 100%;

}
.btn03 a:active {top: 0;}


/* 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: 80px 0 0 0;
    background-image:url("../images/bg01.gif");
    background-position: right 0 top 80px;
    background-size: 34px auto;
    background-repeat: no-repeat;
}

.newsdetail{
    width: 980px;
margin: 0 auto;
}

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

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

.news_article{width: 980px;}
.news_article .left{float: left; width: 380px; margin-right: 60px;}
.news_article .left img{width: 100%; margin-bottom: 30px;}
.news_article .left img:last-child{margin-bottom: 0;}
.news_article .right{float: left; width: 540px; 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-bottom: 15px;}

.outline{
    width: 100%; 
    background-color: #FFFF5F; 
    background-image:url("../images/bg300.gif"); 
    background-position: left 0 top 0; 
    background-repeat: repeat-y;
}
.outline_body{width:  900px; padding: 40px; margin: 60px auto 0 auto; background-color: #FFFF5F;}
.outline_body .left{float: left; width: 260px; margin-right: 40px;}
.outline_body .photo.in:before{background-color:#FFFF5F!important; }

.outline_body .right{float: left; width: 600px;}
.outline_body .right .read{font-size: 14px; font-weight: 500;}
.outline_body .right .body{font-size: 12px; line-height: 180%;}
.outline_body .right .cap{font-size: 11px; line-height: 180%;}


#about{width: 100%;}
#about .detailarea{
    width: 100%; 
    background-color: #FFFF5F;
    background-image:url("../images/bg300.gif"); 
    background-position: left 0 top 0; 
    background-repeat: repeat-y;
}
#about .detailarea .detailbody{
    width: 860px;
    margin: 0 auto 60px auto;
    padding: 60px 0 20px 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: 220px; margin-right: 60px;}
#about .detailarea .detailbody .left img{width: 100%;}
#about .detailarea .detailbody .right{float: left; width: 580px; font-size: 14px; line-height: 220%;}



#about .detailbody02{
    width: 860px;
    margin: 0 auto;
}
#about .detailbody02 .left{float: left; width: 540px; margin-right: 60px;}
#about .detailbody02 .left img{width: 100%;}
#about .detailbody02 .right{float: left; width: 260px; font-size: 14px; line-height: 220%;}


#links{width: 100%;}
#links .newsarea{width: 980px; margin: 0 auto;}
#links .newsblock{width: 286px; float: left;}

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

#links .newsblock{margin-bottom:60px;}

#links .newsimage{
    width: 286px;
    height: 190px;
    background-color: #FFF;
}
#links .newsimage img{width: 286px;height: auto;}

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


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


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

.btn_scroll {
	overflow: hidden;
	position: absolute;
	top: -80px;
	right: 72px;
	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: 980px; margin: 120px 0 0 0; padding: 60px 0 80px 0; background-color: #FFFF5F; position: relative;}
footer .menu{width: 100%; margin-bottom: 30px;}
footer .menu ul {padding: 0; margin: 0 0 0 80px;}
footer .menu ul li{float: left; padding: 0;}
footer .menu .logo{width: 68px; margin-right: 40px;}
footer .menu .logo img{width: 100%; height: auto;}
footer .menu .link{margin:16px 50px 0 0;}
footer .menu a{display: block; text-decoration: none; transition: all 0.3s ease; font-size: 17px;}
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: 10px; }
footer .menu a p{margin-top: 5px; padding: 0;}

footer .left{width: 70%; float: left;  }
footer .left .dscription{margin-left: 80px; font-size: 10px; line-height: 180%;}
footer .left .dscription span{font-weight: bold;}

footer .right{width: 30%; float: left; text-align: right;}
footer .right .sns {margin-right: 80px;}
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.1rem; 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:30px 80px 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;
}

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



/* 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;}


/*---------------------------------------------------
	ページネーション
---------------------------------------------------*/


.pagination {
    font-family: "AlternateGotNo3D";
    font-weight: bold;
	clear: both;
	padding: 20px 0;
	position: relative;
	font-size: 16px;
	line-height: 14px;
        text-align: center;
}
.pagination-box {
	display: inline-block;
}
.pagination span, .pagination a {
	display: block;
	float: left;
	margin: 1px 1px 1px 0;
	padding: 12px 15px;
	text-decoration: none;
	width: auto;
	color: #fff; /* 通常の文字色 */
	background: #333; /* 通常の背景色 */
}
.pagination a:hover{
	color: #fff; /* マウスホバー時の文字色 */
	background: #99951C; /* マウスホバー時の背景色 */
}
.pagination .current{
	padding: 12px 15px;
	color: #FFF; /* 現在のページの文字色 */
        background: #DDD; /* 現在のページの背景色 */
}
@media only screen and (max-width: 768px) {
.pagination {
	font-size: 13px;
	line-height: 10px;
    margin-bottom: 30px;
}
.pagination span, .pagination a {
	padding: 11px 13px;
}
.pagination .current{
	padding: 11px 13px;
}
}