@charset "utf-8";




#splash {
    /*fixedで全面に固定*/
	position: fixed;
	z-index: 99999;
width: 100%;
	height:  100%;
	text-align:center;
	color:#fff;
}

@media only screen and (max-width:1440px) {
    
    #splash {
    /*fixedで全面に固定*/
	position: fixed;
	z-index: 99999;
width: 100vw;
	height: 100vh;
	text-align:center;
	color:#fff;
}
  }  
    
    
#splash #splash_text{}

.akaoni-btn{
	display: flex;
	 frex-direction: column;
  flex-wrap: wrap;
	margin:50px auto;
    justify-content: left;
	list-style:initial;
    text-transform: uppercase;
    max-width: 100%;
}

.akaoni-btn li{font-size: 0.8rem;line-height: 2;
	position: relative;
    cursor: pointer;
    margin: 0 0 0 3%;width: 120px;
}

.akaoni-btn li::after {
    content: '';
    position: absolute;
    bottom:0px;
    left: 0%;
    /*線の形状*/
    width: 50%;
    height: 1px;
    background:#a0a0a0;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.akaoni-btn li.active::after,
.akaoni-btn li:hover::after{
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/*横幅が375px以下になった際の指定*/
@media only screen and (max-width: 375px) {
.akaoni-btn{
    flex-wrap: wrap;
	justify-content: space-between;
}
	
.akaoni-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}	
}


/*スクロールリンクの形状*/
.scroll-top {
	/*表示位置*/
	position: fixed;
	right: 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 1;
}

@keyframes arrowmove{
      0%{bottom:0px;}
     100%{bottom:40px;}
 }


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

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

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

.js-scroll.scroll-top a{
    color: #000;font-weight: 700;
}

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


.js-scroll a::before {
    content: "";
    position: absolute;
    top: 30px;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #000;
    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:1px;
	height: 50px;
	background:#000;
}

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

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


/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
  position: relative;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33.3%;/*横並びで3つ表示*/
height:auto;
  z-index: 1;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content {
  position: relative;
  width: 100%;
  height: 100%;
    padding:15px ;
}

.item-content2 {
  width: 100%;
  height: 50%;
}

.item-content a{
    text-decoration: none;
}

.item-content span{
    display: block;
    text-align: center;
    letter-spacing: 0.05em;
    padding: 10px 0 0 0;
}
.item:nth-last-child(2){
  width:63%;/*横並びで2つ表示*/
}
/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 992px) {
.item {
  width: 49.5%;/*横並びで2つ表示*/
}
  .item:nth-last-child(2) {
  width: 49.5%;
}
    
    .item-content {
        padding: 10px;
    }
    
    .grid img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}
    
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent!important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}

.fancybox-caption__body{
      letter-spacing: 0.1em;  
}




.item{
	opacity: 0;
}

/*===　印象編 4-1 ふわっ（下から）　==*/

.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;
  }
}



.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, #000,#333,#fff);/*グラデーションを定義*/
	background-size: 200% 200%;/*サイズを大きくひきのばす*/
	animation: bggradient 20s ease infinite;
}

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




/* ------------------------------------------------------------------- 
 * g-nav
 * ------------------------------------------------------------------- */
#g-nav {
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position: fixed;
    z-index: -1;
    opacity: 0; /*はじめは透過0*/
    /*ナビの位置と形状*/
    top: 0;
    width: 100%;
    height: 100vh; /*ナビの高さ*/
    background: url("../svg/bg-aka.svg") #0f0f0f right no-repeat;
    background-size: cover;
    /*動き*/
    transition: all 0.3s;
}
/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive {
    opacity: 1;
    z-index: 999;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh; /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#g-nav.panelactive ul {
    display: block;
}
.nav-fix {
    position: fixed;
    top: 0;
    right: 15px;
    z-index: 999;
    padding: 15px;
    transition: 0.2s;
    opacity: 0;
}
.nav-fix img {
    width: 30px;
    margin-top: 0;
    margin-left: 5px
}
@media screen and (max-width: 992px) {
    .nav-fix {
        display: none;
    }
} /*end*/
#g-nav-list {
    display: none;
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list {
    display: block;
}
/*ナビゲーション*/
#g-nav ul {
    opacity: 0;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#g-nav.panelactive ul {
    opacity: 1;
    flex-wrap: wrap;
}
#g-nav.panelactive li {
    text-align: center;
    width: 100%;
}
#g-nav.panelactive li a {
    font-size: 1.2rem;
    padding:4px 0;margin: 5px 0;
    color: #fff;
}

#g-nav.panelactive li a:hover {
color: #b20004;
}

.gnavi div.follow {
    display: flex;

    margin: auto;
    width: 240px;
    padding: 10px 0;
}
.gnavi div.follow .in a, .gnavi div.follow .tw a, .gnavi div.follow .yt a {
    width: 33px;  height:auto;
   margin: auto;
}


.in-img, .tw-img, .yt-img {
    width: 28px;
}

.gnavi div.follow .in a:hover, .gnavi div.follow .tw a:hover, .gnavi div.follow .yt a:hover {
opacity: 0.5;
}


/*===========================================================*/
/*左から右に線
/*===========================================================*/
@media screen and (min-width: 1200px) { /* 1200px以上の場合に適用 */
    .gnavi {
        width: 100%;
        max-width: 50%;
    }
} /*end*/
@media screen and (max-width: 992px) {
    #g-nav {}
    .gnavi {
        width: 100%;
        max-width: 90%;
    }
    
    
    #g-nav.panelactive li a {
    font-size: 1rem;
    padding:4px 0;margin: 3px 0;
    color: #fff;
}
    
    
}
.gnavi {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    text-transform: uppercase;
    font-size: 0.95rem;
    font-weight: 500;
    /*background-color:rgba(0,0,0,0.9);*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000;
}
.gnavi a, .gnavi a:visited {
    display: block;
    padding: 10px 5px;
    color: #fffefb;
    /*background-color:rgba(255,39,98,1);*/
    /*background-color:rgba(0,0,0,1);*/
    text-decoration: none;
}
.gnavi {
    line-height: 1.2;
}
.gnavi span {
    display: block;
    font-size: 0.5rem;
}
.nav01d li a {
    /*線の基点とするためrelativeを指定*/
    position: relative;
}
.nav01d li.current a:hover {
    color: #b20004;
}
.nav01d li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    top: 40px;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 1px;
    background: #b20004;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1); /*X方向0、Y方向1*/

    transform-origin: center top; /*左上基点*/
}
/*現在地の形状の設定*/
.nav01d li.current a::after {
    transform: scale(0.2, 1); /*X方向に0.2スケール拡大*/
}
/*現在地を含むhoverの設定*/
.nav01d li.current a:hover::after, .nav01d li a:hover::after {
    transform: scale(1, 1); /*X方向にスケール拡大*/
}
/*===================================
メニュー
===================================*/
.openbtn {
    position: fixed;
    display: block;
    top: 15px;
    left: 15px;
    z-index: 999999; /*ボタンを最前面に*/
    cursor: pointer;
    width: 60px;
    height: 40px;
    filter: drop-shadow(0px 0px 30px rgba(22, 22, 22, 0.9)) drop-shadow(0px 0px 2px rgba(22, 22, 22, 0.8));
}
.openbtn span {
    display: inline-block;
    transition: all .4s; /*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    background: #fff;
}
.openbtn span:nth-of-type(1) {
    top: 15px;
    width: 90%;
}
.openbtn span:nth-of-type(2) {
    top: 22px;
    width: 90%;
}
.openbtn span:nth-of-type(3) {
    top: 29px;
    width: 90%;
}
/* × */
.openbtn.active span {
    background: #999;
}
.openbtn.active span:nth-of-type(1) {
    top: 15px;
    left: 10px;
    transform: translateY(3px) rotate(-210deg);
    width: 100%;
}
.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
    top: 22px;
    left: 10px;
    transform: translateY(-3px) rotate(210deg);
    width: 100%;
}