@charset "UTF-8";
/* CSS Document */


#wrapper{
}

/*「#home_body 」のサイズ位置 PC＋SP--------------------------------  */
	
#home_body{
	width: auto;
	max-height: 100vh;
	height:  100vh;
	display: flex;
	position: relative;
	}

/*「#home_body 」のスマホ対応 ----------------  */
@media not all and (min-width: 780px){
#home_body{
	display: block;
	}
}


/*「.image img 」のサイズ位置 PC＋SP--------------------------------  */
.image img {
	width: 100%;
	height: 100vh;
	display: block;
	object-fit: cover;
}


/*「.image」のスマホ対応 ----------------  */
@media not all and (min-width: 780px){
	
.image img {
    height: 100vh;
    object-fit: cover;
}
.image {
  margin-right: 0;
  margin-left: 0;
}

}




/*「.contents_left 」について-----------------------------------------  */
	
/*「.contents_left 」のサイズ位置 PC＋SP  */
.contents_left {
	margin-right: auto;
	margin-left: auto;
	width: 50%;
	position: relative;
	margin-bottom: -30px;
}

.contents_left .image {
	padding-right: 50%;
	position: relative;
	width: 100%;
	height: 100vh;
}
.contents_left .image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100vh;
  opacity: 0;
  animation :slideshow 32s linear infinite;
}

/*contents_left の SlideアニメのCSS-----------------------------------------*/

@keyframes slideshow{
  0%{
    opacity: 0;
  }
  3%{
    opacity: 1;
  }
  20%{
    opacity: 1
  }
  35%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}



.contents_left .image img:nth-child(2){
  animation-delay: 8s;
}
.contents_left .image img:nth-child(3){
  animation-delay: 16s;
}
 
.contents_left .image img:last-child{
  animation-delay: 24s;
}
	
/*SlideアニメのCSS  ここまで  */
.contents_right .image img {
	width: 100%;
	height: 100vh;
/*	↑ 1119新宿にて、追加。天地がととのう*/
}

@media not all and (min-width: 780px){
.contents_left {
    width: 100%;
	overflow: hidden;
	/* ↑ 右に飛び出た写真をカット overflow: hidden;  */
	}
	
.contents_left .image {
	padding-right: 0;
	}
}

.scroll{
	display: none;
}

@media not all and (min-width: 780px){
	.scroll{
		display: block;
		position: absolute;
		right: 30px;
		bottom:  70px;
	}
}

/*　scrollマークのCSS----------------------*/

.scroll .txt {
    display: block;
    height: 6em;
	color: #fff;
	font-family: serif;
    text-align: right;
    padding-bottom: 5px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.scroll .line {
    display: block;
    height: 50px;
    width: 1px;
    margin-left: 5px;
    position: relative;
    overflow: hidden;
    background-color: #fff;
}
.scroll .line span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 3px;
    background: -webkit-gradient(linear,left bottom,left top,from(#fff),color-stop(#999),to(#fff));
    background: linear-gradient(0deg,#fff,#999,#fff);
    -webkit-animation: drop 1.5s cubic-bezier(.5,.05,.6,.15) infinite;
    animation: drop 1.5s cubic-bezier(.5,.05,.6,.15) infinite;
    z-index: 1;
}
@-webkit-keyframes drop {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    to {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
}
 
@keyframes drop {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%)
    }
    to {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }
}

/*　scrollマークのCSS　 ここまで----------------------*/





/*「.contents_right 」について-----------------------------------------  */


/*「.contents_right 」のサイズ位置 PC＋SP  */
.contents_right {
	margin-right: auto;
	margin-left: auto;
	width: 50%;
	overflow: hidden;
	/* ↑ 右に飛び出た写真をカット overflow: hidden;  */
	position: relative;
}

/* ↓ 写真が重ならないようにpadding-left: 50%  */
/*
.contents_right .image {
	padding-left: 50%;
}
*/

@media not all and (min-width: 780px){
.contents_right {
	width: 100%;
	overflow: visible;
	}

.contents_right .image {
	padding-left: 0;
	}
}




/*===================================
	right_block内
====================================*/


#right_block {
	position: absolute;
	top:0px;
	left: 0px;
	margin: 70px 30px 0px 60px;
}

@media not all and (min-width: 780px){
	#right_block{
		margin: 40px 30px 0px 30px;
	}
}

#right_block p {
	font-family: sans-serif;
	color: white;
	font-size: 90%;
	line-height: 25px;
	margin-bottom: 20px;
	letter-spacing: 0.05em;
}

.SP_kaigyo{
	display: none;
}
@media not all and (min-width: 740px){
	.SP_kaigyo{
		display: block;
	}
}


#right_block h2 {
	color: white;
	font-size: 130%;
	font-family: 'Heebo', sans-serif;
	letter-spacing: 0.05em;
	margin: 60px 0px 15px 0px;
}

/*
#right_block .twitter_block {
	height: 360px;
	overflow-y: scroll;
}
*/

@media not all and (min-width: 780px){
	
.twitter_block{
	margin-bottom: 70px;
	}

body{
	background-color: #555555;
	}
/* ↑ スマホサイズ時の飛び出したツイッターバックに濃いグレーを敷く*/

}



/*===================================
	header内
====================================*/

#header_block{
	position: absolute;
	top:0px;
	left: 0px;
	margin-left: 55px;
}
@media not all and (min-width: 780px){
	#header_block{
		margin-left: 30px;
	}
}

#header_block .image{
	position: absolute;
	top:0px;
	left: 0px;
}

#header_block .main_title p {
	color: white;
/*	font-size: 130%;*/
	font-size: 110%;
	padding: 70px 0px 15px 0px;
	font-family: 'Hina Mincho', serif;
	letter-spacing: 0.1em;
}

#header_block .main_title h1 a {
	font-family: 'Heebo', sans-serif;
	color: white;
/*	font-size: 260%;*/
	font-size: 210%;
	letter-spacing: 0.05em;
}

/*
#header_block .main_title h1 .sp{
	display: none;
}
*/

@media not all and (min-width: 780px){
	#header_block .main_title h1 .sp{
	display: block;
	}
}

#header_block nav {
	font-family: sans-serif;
	padding-top: 50px;
}

#header_block nav li a{
	color: white;
	font-size: 115%;
}
#header_block nav li{
	padding-top: 20px;
	letter-spacing: 0.1em;
}

#header_block .sns_mark {
	 margin-top: 200px;
}

#header_block .sns_mark img {
	width: 27px;
	height: 27px;
}

#header_block .sns_mark li {
	padding: 0px 15px 20px 0px;
}


@media not all and (min-width: 780px){
	#header_block .sns_mark ul {
	display: flex;
	}
	#header_block .sns_mark {
	margin-top: 70px;
	}
}

/* ↓ navのホバー時にボールド指示*/
/*
#header_block .trans-BOLD:hover {
	font-weight: bold;
}
*/

/* ↓ SNSマークのホバー時に少し大きくなる*/
#header_block .largement:hover img {
	width: 32px;
	height: 32px;
}

/* ↓ navのホバー時に下線指示*/
#header_block nav a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

#header_block nav a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: translate(-100%, 0);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
  content: "";
}

#header_block nav a:hover:after {
  transform: translate(0, 0);
}
/* navの下線--ここまで*/


	
/*「#footer 」について-----------------------------------------  */

#footer {
	position: fixed;
	bottom: 0px;
	background-color: black;
	width: 100%;
	height: 40px;
	z-index: 3;
	}
#footer p {
	font-family: sans-serif;
	color: white;
	font-size: 70%;
	text-align: center;
	padding-top: 12px;
	letter-spacing: 0.1em;
	}