@charset "utf-8";

/* ---------------------------------------- 
 - #loading
---------------------------------------- */
#loading {
	position: fixed;
	z-index: 1000;
	background-color: #ffffff;
	width:100%;
	height: 100%;
	top:0;
	left: 0;
	animation: disappear 0.8s ease-in-out 0.8s both;
}
@keyframes disappear {
	0% {
		display: block;
		opacity: 1;
	}
	99% {
		display: block;
		opacity: 0;
	}
	100% {
		display: none;
		opacity: 0;
		visibility: hidden;
	}
}
html.onload body div#loading {
	animation-play-state: paused;
}
#loading .loader,
#loading .loader:after {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
#loading .loader {
	display:none;
	z-index: 1000;
	margin: auto;
	margin-top: -25px;
	margin-left: -25px;
	font-size: 5px;
	position: absolute;
	top:50%;
	left:50%;
	text-indent: -9999em;
	border-top: 2px solid rgba(204, 204, 204, 0.2);
	border-right: 2px solid rgba(204, 204, 204, 0.2);
	border-bottom: 2px solid rgba(204, 204, 204, 0.2);
	border-left: 2px solid #ccc;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* ---------------------------------------- 
 - header
---------------------------------------- */
#header{
	background: transparent;
}
#header ul.header_snslist,
#header .header_logo{
	opacity: 0;
	visibility: hidden;
	position: relative;
	overflow: hidden;
	-webkit-transition: .3s;
    transition: .3s;
}
#header.is-active{
	background: linear-gradient(180deg,#fff,transparent);
}
#header.is-active ul.header_snslist,
#header.is-active .header_logo{
	opacity: 1;
    visibility: visible;
}
#header.is-active ul.header_snslist::after,
#header.is-active .header_logo::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
	width: 100%;
    height: 100%;
    background-color: #7b7c7d;
}
#header.is-active ul.header_snslist::after,
#header.is-active .header_logo::after{
    animation: header-overlayIn 0.4s 0.1s cubic-bezier(.77,0,.175,1), header-overlayOut 0.4s 0.7s cubic-bezier(.77,0,.175,1);
    animation-fill-mode: both;
}
#header.is-active ul.header_snslist li,
#header.is-active .header_logo img{
	animation:header-fadeIn 0.1s 0.5s;
	animation-fill-mode: both;
}
@keyframes header-fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes header-overlayIn {
    0% {
      width: 0;
    }
    100% {
      width:  100%;
    }
}
@keyframes header-overlayOut {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(102%);
    }
}

/* ---------------------------------------- 
 - mainvisual
---------------------------------------- */
#mainvisual {
	width: 100%;
	box-sizing: border-box;
    overflow: hidden;
}
#mainvisual_inner{
	position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100vh;
    min-height: 810px; /* 調整 */
    transform: translate(-50%, -50%);
}
#mainvisual .typo {
	position: absolute;	
	color:#191919;
}
#mainvisual .typo.front {
	z-index: 1;
}
#mainvisual .typo.typing {
	z-index: -1;
}
#mainvisual .typo_01 {
	width:49.34%;/*/1366*/
	max-width: 674px;
	top:20%;
	right:-2%;
}
#mainvisual .typo_02 {
	width:6.3%;/*/1366*/
	max-width: 86px;
	top:-1%;
	left:6%;
}
#mainvisual .typo_03 {
	width:41%;/*/1366*/
	max-width: 560px;
	bottom:2%;
	left:-0.5%;
}
#mainvisual .typo_04 {
	width:6.15%;/*/1366*/
	max-width: 84px;
	bottom:-1%;
	right:1%;
}
#mainvisual .typo_05 {
	width:23.28%;/*/1366*/
	max-width: 318px;
	top: 53%;
    right: 28%;
}
#mainvisual .typo_06 {
	width:42.24%;/*/1366*/
	max-width: 577px;
	top:7%;
	left:15%;
}
#mainvisual .typo_07 {
	width:39.31%;/*/1366*/
	max-width: 537px;
	top:42%;
	left:35%;
}
#mainvisual .typo_08 {
	width:36.24%;/*/1366*/
	max-width: 495px;
	bottom:20%;
	left:18%;
}
#mainvisual .typing_01 {
	width:434px;
	top:20%;
	left:12%;
	font-size: 2.0rem;
}
#mainvisual .typing_02 {
	width:300px;
	top:55%;
	left:25%;
	font-size: 2.0rem;
}
#mainvisual .typing_03 {
	width: 35.87%;
    max-width: 490px;
    top: 62%;
    right: 12%;
    font-size: 1.3rem;
	line-height: 2.4;
}
/* フェード表示アニメーション */
#mainvisual .typo {
	overflow: hidden;
}
#mainvisual .typo.fadein::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
	width: 100%;
    height: 100%;
    background-color: #7b7c7d;
}
#mainvisual .typo_01::after,
#mainvisual .typo_03::after,
#mainvisual .typo_05::after{
    animation: typo-overlayIn 0.4s 0.2s cubic-bezier(.77,0,.175,1), typo-overlayOut 0.5s 0.8s cubic-bezier(.77,0,.175,1);
    animation-fill-mode: both;
}
#mainvisual .typo_01 img,
#mainvisual .typo_03 img,
#mainvisual .typo_05 img{
	animation:typo-fadeIn 0.1s 0.6s;
	animation-fill-mode: both;
}
#mainvisual .typo_06::after,
#mainvisual .typo_07::after,
#mainvisual .typo_08::after{
    animation: typo-overlayIn 0.4s 0.7s cubic-bezier(.77,0,.175,1), typo-overlayOut 0.5s 1.2s cubic-bezier(.77,0,.175,1);
    animation-fill-mode: both;
}
#mainvisual .typo_06 img,
#mainvisual .typo_07 img,
#mainvisual .typo_08 img{
	animation:typo-fadeIn 0.1s 1.1s;
	animation-fill-mode: both;
}
#mainvisual .typo_02::after,
#mainvisual .typo_04::after{
    animation: typo-overlayIn-vertical 0.3s 0.5s cubic-bezier(.77,0,.175,1), typo-overlayOut-vertical 0.5s 1.0s cubic-bezier(.77,0,.175,1);
    animation-fill-mode: both;
}
#mainvisual .typo_02 img,
#mainvisual .typo_04 img{
	animation:typo-fadeIn 0.1s 0.8s;
	animation-fill-mode: both;
}
@keyframes typo-fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes typo-overlayIn {
    0% {
      width: 0;
    }
    100% {
      width:  100%;
    }
}
@keyframes typo-overlayOut {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(102%);
    }
}
@keyframes typo-overlayIn-vertical {
    0% {
      height: 0;
    }
    100% {
      height: 100%;
    }
}
@keyframes typo-overlayOut-vertical {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(102%);
    }
}

/*タイピング*/
.jaticker-cursor {
	font-weight: bold;
}
.jaticker-input {
	color: #191919;
	text-decoration: underline;
}
.jaticker-convert {
	color: #191919;
	background-color: #191919;
}
@media screen and (min-width: 1600px) { /* 調整 */
	#mainvisual .typo_01 {
		right:4%;
	}
	#mainvisual .typo_02 {
		left:8%;
	}
	#mainvisual .typo_03 {
		left:4%;
	}
	#mainvisual .typo_04 {
		right:6%;
	}
	#mainvisual .typo_05 {
		right:35%;
	}
	#mainvisual .typo_06 {
		left:18%;
	}
	#mainvisual .typo_07 {
		left:30%;
	}
	#mainvisual .typo_08 {
		left:18%;
	}
	#mainvisual .typing_01 {
		left:18%;
	}
	#mainvisual .typing_02 {
		left:25%;
	}
	#mainvisual .typing_03 {
		width: 50%;
		max-width: 600px;
		right:15%;
		font-size: 1.5rem;
	}
}
@media screen and (max-width: 768px) {
	#mainvisual_inner{
		top: 0;
		left: 0;
		min-height: 100%; /* 調整 */
		transform: translate(0, 0);
	}
	#mainvisual .typo.typing,
	#mainvisual .typing_01 {
		display: none;
	}
	#mainvisual .typo_01 {
		width:70vw;
		top:25%;
	}
	#mainvisual .typo_02 {
		width: 9vh;
		top: 0%;
		left: 3%;
	}
	#mainvisual .typo_03 {
		width: 77vw;
    	bottom: 8%;
		left: -3.5%;
	}
	#mainvisual .typo_04 {
		width: 9vh;
		bottom: 0%;
		right: 2%;
	}
	#mainvisual .typo_05 {		
		width: 70vw;
    	top: 43%;
		right: 0%;
	}
	#mainvisual .typo_06 {
		width: 74vw;
		top: 11%;
		left: 28%;
	}
	#mainvisual .typo_07 {
		width: 57vw;
		top: 38%;
		left: 35%;
	}
	#mainvisual .typo_08 {
		width: 70vw;
		bottom: 17%;
		left: 3%;
	}
}

/* ---------------------------------------- 
 - department
---------------------------------------- */
#department {
	margin-top: 100px;
	margin-bottom: 200px;
	text-align: center;
	color: #7b7c7d;
}
#department .jp {
	display: block;
	font-size: 4.8rem;	
	letter-spacing: 1.0em;
	margin-left: 1.0em;
}
#department .en {
	display: block;
	font-size: 2.0rem;
	letter-spacing: 0.9em;
    margin-left: 0.9em;
}
@media screen and (max-width: 768px) {
	#department {
		margin-top: 150px;
		margin-bottom: 150px;
	}
	#department .jp {
		font-size: 7.8vw;

	}
	#department .en {
		font-size: 3vw;
	}
}

/* ---------------------------------------- 
 - contents（menulist）
---------------------------------------- */
#menulist_inner {
	width:90%;	
	max-width: 1200px;
	margin: 0 auto 140px;
}
#menulist .menubox {
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	width:94%;	
	max-width: 860px;
	padding: 100px 0;
}
#menulist .menubox:nth-child(even) {
	margin-left: auto;
}
#menulist .menubox .menu_visual {
	width: 48%;
	max-width: 400px;
}
#menulist .menu_ttl {
	width: 48%;
	margin-top: 0.5em;
}
#menulist .menu_ttl .ttl-jp {
	font-size:7.0rem;
	color:#7b7c7d;
	line-height: 1.2;
	margin-bottom: 0.6em;
}
#menulist .menu_ttl .ttl-en {
	font-size:2.4rem;
	color:#c9c9ca;
	line-height: 1.2;
	margin-bottom: 0.5em;
}
@media screen and (max-width: 1024px) {
	#menulist .menu_ttl .ttl-jp {
	    font-size: 6.5vw;
	}
	#menulist .menu_ttl .ttl-en {
		font-size: 2.5vw;
	}
}
@media screen and (max-width: 768px) {
	#menulist_inner {
		margin-bottom: 70px;
	}
	#menulist .menubox {
		display: block;
		width: 75%;
		padding: 40px 0;
	}	
	#menulist .menubox .menu_visual {
		width: auto;
	}
	#menulist .menu_ttl {
		width: 100%;
		margin-top: 0;
		margin-bottom: 1.5em;
	}
	#menulist .menu_ttl .ttl-jp {
		font-size:9.067vw;/*34px*/
	}
	#menulist .menu_ttl .ttl-en {
		font-size:4.267vw;/*16px*/
	}
}

/* ---------------------------------------- 
 - contents（news）
---------------------------------------- */
#news {
	width:90%;	
	max-width: 1100px;
	margin: 0 auto;
	padding: 200px 0 100px;
}
#news #news_inner {
	width:100%;
	position: relative;
}
#news .news_ttl .ttl-jp{
	margin-bottom: 0.3em;
	font-size: 6.0rem;
    color: #7b7c7d;
    line-height: 1.2;
}
#news .news_ttl .ttl-en{
	margin-bottom: 0.4em;
	font-size: 2.4rem;
    color: #c9c9ca;
    line-height: 1.2;
}
#news ul.news_menu_list {
	width: 100%;
	margin-top: 40px;
	text-align: left;
}
#news ul.news_menu_list li {
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
	border-bottom: dotted 1px #7b7c7d;
	padding-left:0.5em; 
	padding-right:0.5em; 
}
#news ul.news_menu_list li {
	width: 100%;
	text-decoration: none;
	display: -webkit-flex;
	display: flex;
	align-items: center;
}
#news ul.news_menu_list li .date{
	color:#777;
	font-size: 1.3rem;
	margin-right: 3%;
}
#news ul.news_menu_list li .category{
	color:#7b7c7d;
	font-size: 1.2rem;
	border:solid 1px #7b7c7d;
	margin-right: 3%;
	box-sizing: border-box;
	padding: 0 1.0em;
	height: 20px;
	line-height: 20px;
	min-width: 115px;
	text-align: center;
}
#news ul.news_menu_list li .event{
	color:#fff;
	border:none;
	background: #7b7c7d;
}
#news ul.news_menu_list li .ttl {
    flex: 1;
}
#news ul.news_menu_list li .ttl a{
	text-decoration: none;
}
#news ul.news_menu_list li .ttl a:hover{
	text-decoration: underline;
}
#news .section_btn {
	position: absolute;
	top: 20px;
	right: 0;	
	letter-spacing: 0.05em;
}
#news .section_btn a {
	padding: 7px 35px 7px 10px;
	min-width: 165px;
}
@media screen and (max-width: 768px) {
	#news {
		padding: 75px 0;
	}
	#news .news_ttl .ttl-jp{
		font-size:9.067vw;/*34px*/
	}
	#news .news_ttl .ttl-en{
		font-size:5.333vw;/*20px*/
	}	
	#news ul.news_menu_list {
		margin-top: 20px;
	}
	#news ul.news_menu_list li {
		flex-wrap: wrap;
		margin-bottom: 1.2em;
		padding-bottom: 1.2em;
	}
	#news ul.news_menu_list li .date{
		font-size: 1.2rem;
		margin-right: 3%;
	}
	#news ul.news_menu_list li .category{
		font-size: 1.1rem;
		margin-right: 0;
	}
	#news ul.news_menu_list li .ttl {
		flex: auto;
		width: 100%;
		margin-top: 0.5em;
		font-size: 1.3rem;
	}
	#news .btnMore {
		top: 45px;
		width: 125px;
		min-width: 125px;
		font-size: 1.4rem;
	}
	#news .section_btn {
		position: static;
		margin-top: 25px;
	}
}