@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{}


/*数字カウント*/

.progressbar-text{    font-family: "EB Garamond", serif;
    font-size:2rem;
}

.progressbar-text span{
    font-size:1rem;
}


@media only screen and (max-width:992px) {
.progressbar-text{
    font-size:2rem;
}
.progressbar-text span{
    font-size:1rem;
}

}

#wrapper { width: 100%; overflow: hidden; }
main { width: 100%; }

#main-area::before {
    content: "";
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: -1;
    width: 100%; height: 100vh;
background-color: #d2000f;background-image: url("../../img/R.jpg");
    background-size: cover;
}



/*
---------------------------------------------
h2
---------------------------------------------
*/

.header_logo{
    width: 100%;
    max-width: 150px;
    margin: 1.5rem auto;
    text-align: center;
}

@media screen and (max-width: 992px) {
.header_logo{
    max-width: 100px;
    }
}/**/









.akaoni-btn{
	display: flex;
	 frex-direction: column;
  flex-wrap: wrap;
	margin:5px 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: 32.3%;/*横並びで3つ表示*/ padding:0 0.3% 0;
height:auto;
  z-index: 1;
}
.item:last-child {padding:0 0 0 0 ;}


/*内側のボックスの高さが崩れないように維持*/
.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;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
	width:100%;
	height:auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 992px) {
.item {
  width:47.5%;/*横並びで2つ表示*/
}

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







.mt-1, .pt-1 {
  padding-top: 0.5rem;
}
.mt-2, .pt-2 {
  padding-top: 1rem;
}
.mt-3, .pt-3 {
  padding-top: 1.5rem;
}
.mt-4, .pt-4 {
  padding-top: 2rem;
}
.mt-5, .pt-5 {
  padding-top: 2.5rem;
}
.mb-1, .pb-1 {
  padding-bottom: 0.5rem;
}
.mb-2, .pb-2 {
  padding-bottom: 1rem;
}
.mb-3, .pb-3 {
  padding-bottom: 1.5rem;
}
.mb-4, .pb-4 {
  padding-bottom: 2rem;
}
.mb-5, .pb-5 {
  padding-bottom: 2.5rem;
}
/* ------------------------------------------------------------------- 
 * e.t.c
/*-------------------------------------------------------------------*/
.pc {
  display: block !important;
}
.sp {
  display: none !important;
}
/* ------------------------------------------------------------------- 
 * responsive:
 *  e.t.c
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
} /*end*/