@charset "utf-8";

.test-img {
	max-width: fit-content;
}

/*===========================================================*/
/* Count up*/
/*===========================================================*/

/* Loading背景画面設定　*/

#splash {
    /*fixedで全面に固定*/
	position: fixed;
	z-index: 99999;
	width: 100%;
	height: 100%;
	font-family: 'Mamelon', sans-serif;
	text-align:center;
	color:#656565;
}

header#top-header {
	padding: 15px 0 13px 0;
	display: flex;
	backdrop-filter: blur(10px);
	background: rgb(255,255,255, 0.7);
	justify-content: space-between;
	-webkit-box-align: center;
	align-items: center;
	position: sticky;
	top: 0;
	left: 0;
	text-decoration: none;
	filter: drop-shadow(10px 10px 10px rgba(0,80,160,0.1));
    transition: all 0.4s ease-in-out;
	z-index: 10000;
}

#top-header-h-logo img {
    display: flex;
    width: 318px;
    padding: 0 0 3px 33px;
}

#top-header-nav ul {
	display: flex;
	flex-wrap:no-wrap;
	align-items: center;
	float: right;
	padding-right: 24px;
}

#top-header-nav ul li{
	display: flex;
	padding: 0 15pt 0 15pt;
}

#top-header-nav ul li:not(:nth-child(5)){
	border-right: solid 1.5px black;
}

#top-header-nav ul li a {
	font-weight: 600;
	color: #000;
	display: flex;
	text-decoration: none;
	position: relative;
}

#top-header-nav ul li a:hover{
    color:#f2770f;
    transform: translate(5,5) ;
    font-weight: 800;
}

#top-header-inquirybtn {
	display: inline-block;
	float: right;
	margin: 0pt 4pt 0pt 4pt;
	padding: 5px 20px;
	border-radius:30px;
	font-size: 12pt;
	font-weight: 800;
	text-decoration: none;
	border:6px solid #91c94f;
	color: #000;
	outline: none;
	transition: all 0.4s ease-out;
}

#top-header-inquirybtn a {
	color: #000;
}

#top-header-inquirybtn:hover {
    transform: translate(-2px,-2px);
    background-size: 200% auto;
    border:6px solid #f2d53a;
    background-position: center;
    text-decoration: none;
    color: #000;
    text-shadow: 4px 2px 4px rgb(0,0,0,0.5);
    box-shadow: 5px 5px 5px rgb(0,0,0,0.2);
}


/*===========================================================*/
/* Navigation appear from the right if clicked */
/*===========================================================*/

/*========= CSS for navigation ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    text-align:center;
    z-index: 999;
    /*ナビのスタート位置と形状*/
    top:0pt;
    right: -69%;
    width: 23%;
    height: 100vh;/*ナビの高さ*/
    backdrop-filter: blur(12px) contrast(1);
    background: rgba(0,20,20,0.4);
    filter: drop-shadow(-5px 0px 10px rgba(0,70,70,0.9));
    transition: all 0.3s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.gradient{
    display: inline-block;
    margin: 50pt 10pt 11pt 10pt;
    letter-spacing: 0.1rem;
    line-height: 1.2;
    padding: 16px 30px;
    border-radius:25px;
    font-family: 'Mamelon', sans-serif;
    font-size: 16pt;
    text-decoration: none;
    border:6px solid #91c94f;
    outline: none;
    transition: all 0.4s ease-out;
}

.gradient:hover{
    transform: translate(-2px,-2px);
    background-size: 200% auto;
    border:6px solid #f2d53a;
    background-position: center;
    text-shadow: 4px 2px 4px rgb(0,0,0,0.8);
    box-shadow: 5px 5px 5px rgb(0,0,0,0.3);
}

.gradient a {
	color: #fff;
	font-family: "Noto sans-serif";
	font-size: 12pt;
}

.more {
	font-family: 'Hind Siliguri', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	color: #727272;
	text-align: right;
}
.more a {
	text-decoration: none;
	transition: .3s;
}
.more span::after,
.more a::after {
	content: "";
	width: 10px;
	height: 2px;
	background: #727272;
	margin-left: 10px;
	display: inline-block;
	position: relative;
	top: -4px;
	transition: .3s;
}
.moreWt,
.moreWt a {
	color: #fff;
}
.moreWt span::after,
.moreWt a::after {
	background: #fff;
}
.more a:hover,
.more a:hover::after {
	opacity: .2;
}



/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
    #g-nav,
    #g-nav.panelactive {
        width:50%;
    }
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top: 30%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: center;
}

#g-nav li a{
	position: relative;
	color: #fff;
	text-decoration: none;
	padding: 0 2px 26px 2px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: normal;
	font-family: "Noto sans-serif";
	font-size: 12pt;
	width: 100%;
	transition: all 0.4s;
}

#g-nav li a:hover{
    color:#f2d53a;
    font-weight: normal;
    transform: translate(-2px,-2px);
    text-shadow: 4px 2px 4px rgb(0,0,0,0.4);
}


/*===========================================================*/
/* 3本線が×に*/
/*===========================================================*/
.openbtn{
	position:fixed;
	z-index: 9999;/*ボタンを最前面に*/
	top: 10px;
	right: 0px;
	cursor: pointer;
	width: 70px;
	height: 70px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 15px;
    height: 5px;
    border-radius: 2px;
    background-color: #91c94f;
    width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:26px;
}

.openbtn span:nth-of-type(3) {
	top:37px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 40%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 40%;
}


/*===========================================================*/
/* 電話・メールボタン */
/*===========================================================*/
.mailbtn{
	height: 60pt;
	width: 60pt;
	text-align: center;
	align-items: center;
	padding: 4pt 0 0 13pt;
	font-size: 34pt;
	display: flex;
	position: fixed;
	border-radius: 20pt;
	background: #279f00;
	opacity: 0.7;
	right: 20pt;
	bottom: 16pt;
	cursor: pointer;
	transition: all 0.5s;
	z-index: 99999;
}

.mailbtn a{
	color: #fff;
}

.mainbtn.isActive{
	opacity: 0.8;
	transition: all 0.5s;
}



/*===========================================================*/
/* スクロール途中からリンクボタンの形状が変化 */
/*===========================================================*/

/*スクロールリンクの形状*/
.scroll-top {
	/*表示位置*/
	position: fixed;
	left: 20px;
	bottom: 10px;
	z-index: 2;
	/*はじめは非表示*/
	opacity: 0;
	visibility: hidden; 
	transition: opacity .5s, visibility .5s; /*それぞれに0.5秒の変化のアニメーション*/
	/*縦書き*/
	-webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	/*改行禁止*/
    white-space: nowrap;
	/*矢印の動き*/
	animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{bottom:20px;}
      50%{bottom:25px;}
     100%{bottom:20px;}
}


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
	opacity: 1;
	visibility: visible;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
    position: relative;
    text-decoration: none;
    color: #666;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    display: block;
}

/*スクロールリンクの形状*/

.js-scroll.scroll-top a{
    color: #aaa;
    font-weight: 600;
}

.js-scroll a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:2px;
	height: 50px;
	background:#aaa;
}


.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 2px;
    height: 20px;
    background: #aaa;
    transform: skewX(-31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-scroll a::before{
	right:-11px;
}


/*ページトップリンクの形状*/

.js-pagetop a::after{
	content:"";
	position: absolute;
	top:0;
	right:0;
	width:2px;
	height: 70px;
	background:#666;
}

.js-pagetop a::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 2px;
    height: 20px;
    background: #666;
    transform: skewX(31deg);
}

/*Edge IE11 hack*/
_:-ms-lang(x), .js-pagetop a::before{
	right:0;
}

/*===========================================================*/
/* 動きを組み合わせて全画面で見せる*/
/*===========================================================*/

#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}


/*===========================================================*/
/*  順番に現れる（CSS x jQuery） */
/*===========================================================*/

.item{
	opacity: 0;
}

/*===　ふわっ（下から）　==*/

.fadeUp {
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

/*ギャラリーのプラグインとの兼ね合いでtransform: translateY(100px);は使用せずmarginで代用*/
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	margin-top:100px;
  }

  to {
    opacity: 1;
	margin-top:0;
  }
}

/*===========================================================*/
/*  テキストがバラバラに出現 */
/*===========================================================*/

.TextRandomAnime span{
	opacity: 0;
}
.TextRandomAnime.appearRandomtext span{ 
	animation:text_randomanime_on .5s ease-out forwards;
}

@keyframes text_randomanime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

.TextRandomAnime.appearRandomtext span:nth-child(2n) {
	animation-delay: 0.7s;/* spanのついた2の倍数の文字列の変化を0.7秒遅らせる*/
}
.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
	animation-delay: 0.35s;/* spanのついた3の倍数＋1の文字列の変化を0.35秒遅らせる*/
}

/*===========================================================*/
/*  画像が拡大*/
/*===========================================================*/

.img-box{
    overflow: hidden;
}

.grid img{
	transform: scale(1);
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.grid a:hover img{/*hoverした時の変化*/
	transform: scale(1.1);/*拡大の値を変更したい場合はこの数値を変更*/
}


/*===========================================================*/
/*  グラデーションが時間変化*/
/*===========================================================*/

#splash{
	background:linear-gradient(45deg, #1d1348,#152511,#443d00);/*グラデーションを定義*/
	background-size: 200% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 5s ease infinite;
}

@keyframes bggradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}