@charset "UTF-8";

.wrapper{ width:100%; height:100vh; position:relative; }

.wrapper .logo{
  width:150px; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); z-index:100;
}
		
@media (max-width: 1024px){
.wrapper .logo{
  width:160px; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); z-index:100;
}
}

@media (max-width: 768px){
.wrapper .logo{
  width:110px; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); z-index:100;
}
}

.area_index{
  width:100%; height:inherit; display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center; text-align:center;
}
.area_index > .area_komeko,
.area_index > .area_chiffon{
  width:50%; height:inherit; position:relative; overflow:hidden;
}

.slides{
  position:absolute;
  inset:0;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.slide{
  position:absolute;
  left:0;
  width:100%;
  height:100%;
  margin:0; border:0;
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  image-rendering:auto;
  backface-visibility:hidden;
}

.slide.is-active {
  opacity:1;
  transform:translateY(0);
}

.slide.enter-from-bottom { transform:translateY(100%); }
.slide.enter-from-top    { transform:translateY(-100%); }
.slide.leave-to-top      { transform:translateY(-100%); }
.slide.leave-to-bottom   { transform:translateY(100%); }

.b_layer {
	width:100%;
	height:100%;
	background:rgba(0,0,0,.2);
	position:absolute;
	top:0;
	left:0;
	z-index:2;
}

.content{
	width:100%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	z-index:3;
	color:#fff;
	text-shadow:0 2px 6px rgba(0,0,0,.35);
	letter-spacing: 3px;
}
.content a{
	font-size:1.6rem;
	display:inline-block;
	padding:.8em 3em;
	border:1px solid #fff;
	color:#fff;
	background:rgba(0,0,0,.6);
	transition:all .3s linear;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

.content a:hover {
	background:rgba(255,255,255,1);
	color:#000;
	text-shadow: none;
}



@media (max-width: 768px){
  .area_index > .area_komeko,
  .area_index > .area_chiffon{ width:100%; height:50vh; }
}

h2 {
	font-size:2.6rem;
	margin:0 0 30px;
}

h3 {
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size:4.2rem;
	font-weight:400;
	margin:0 0 50px;
}

@media (max-width: 1024px){
.content{
	width:100%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	z-index:3;
	color:#fff;
	text-shadow:0 2px 6px rgba(0,0,0,.35);
	letter-spacing: 3px;
	line-height:1.4;
}
.content a{
	font-size:1.5rem;
	display:inline-block;
	padding:.7em 2.4em;
	border:1px solid #fff;
	color:#fff;
	background:rgba(0,0,0,.6);
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

	
h2 {
	font-size:2rem;
	margin:0 0 20px;
}

h3 {
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size:2.6rem;
	font-weight:400;
	margin:0 0 20px;
}
}

@media (max-width: 768px){
.content{
	width:100%;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	z-index:3;
	color:#fff;
	text-shadow:0 2px 6px rgba(0,0,0,.35);
	letter-spacing: 3px;
	line-height:1.4;
}
.content a{
	font-size:1.4rem;
	display:inline-block;
	padding:.6em 2em;
	border:1px solid #fff;
	color:#fff;
	background:rgba(0,0,0,.6);
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
	
h2 {
	font-size:1.8rem;
	margin:0 0 20px;
}

h3 {
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size:2.4rem;
	font-weight:400;
	margin:0 0 20px;
}
}


.list_link {
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	font-size:1.1rem;
	color:#FFF;
	position:absolute;
	bottom:20px;
	left:50%;
	transform:translateX(-50%);
	z-index:100;
}


.list_link li {
	display:inline;
	padding:0px 10px;
	text-align:center;
}

.list_link li a {
	display:inline;
	color:#FFF;
}

@media all and (max-width:560px) {
.list_link {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	width:100%;
	font-size:1.1rem;
	color:#FFF;
	position:absolute;
	bottom:20px;
	left:50%;
	transform:translateX(-50%);
	z-index:100;
}


.list_link li {
	display:inline;
	padding:0px 10px;
	text-align:center;
}

.list_link li a {
	display:inline;
	color:#FFF;
}	
}