@charset 'utf-8';

header ul li strong { display:none;}
header h1 { width:auto; font-size:11px; color: #fff; margin:20px 0 0 20px; line-height:50px; line-height:1.7em; }
header strong a { display:none; }
header ul li.logo { display:none; }
.MB span { display:block; width:40px; height:1px; margin:30px 0 0 10px; background:#fff; overflow:visible; position:relative; transition:0.4s; }
.MB span:before,.MB span:after { content:""; display:block; width:40px; height:1px; background:#fff; position:absolute; transition:0.4s; }


.top_video-wrapper { width: 100%;  height:100vh; margin:0 0 50px 0;  position:relative;color:#fff;  letter-spacing:0.1em; }
.top_video-wrapper header { position:absolute; top:0; background:none; }
.top_video-wrapper .copy { width:100%; text-align:center; position:absolute; top:5%; font-size:30px; }
.top_video-wrapper .place { width:100%; text-align:center; position:absolute; top:65%; font-size:30px; }
.top_video-wrapper .place span { font-size:20px; line-height:3em; }

/*スクロールアイコン*/
.top_video-wrapper a.scroll {width:100%; display:inline-block; padding-top: 60px; color:#fff; margin-top:30px; }
.top_video-wrapper a.scroll span {position: absolute;top: 0;left: 50%;width: 24px;height: 24px;margin-left: -12px;border-left: 2px solid #fff;border-bottom: 2px solid #fff;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);box-sizing: border-box;}
.top_video-wrapper h2.min { width:100%; font-size:30px; position:absolute; z-index:100; top: 30%; line-height:1.7em; }
.top_video-wrapper h2.min strong { width:100%; display:inline-block; font-size:150px; line-height:1.2em;font-weight: 400;font-style: normal;}
.top_video { width: 100%; height: 100vh; min-width: 1000px; position: relative; margin: 0 auto; z-index: -1; display: block; -o-object-fit: cover; object-fit: cover; font-family: 'object-fit: cover;' }
.top_video-wrapper h2.min strong img { width:auto; }
.top_lead { width:1000px; margin:50px auto 30px auto; text-align:center; }
.top_lead strong { width:100%; font-size:25px; letter-spacing:0.1em; margin:0 0 20px 0; display:block; }

.contents_item { width:100%; height:auto; margin:0 0 100px 0; float:left; clear:none; }
.contents_item li { width:48%; height:auto; margin:0 1%; float:left; clear:none;  }
.contents_item li.right { width:48%; height:auto; margin:0 1%; float:right; clear:none;  }
.contents_item li .li_image { width:100%; }
.contents_item li .waku{
	background: none;
	border: 1px solid #a79062;	/* 線の太さ・種類・色 */
	margin: 50px 10px 10px 10px; /* 外側の余白 */
	padding: 30px; /* 内側の余白 */
	position: relative;
	text-align:center;
}
.contents_item li .waku:after{
	background: none;
	border: 1px solid #a79062;	/* 線の太さ・種類・色 */
	content: '';
	position: absolute;
	top: 6px;
	left: 6px;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.contents_item li .waku h2 { margin:0; }
.contents_item li .waku h2 img { width:50%; margin:0; }
.square h2 { font-family: mrsheffield-pro, sans-serif;}


/*四角を描く*/

.square{ width: 900px; height: 600px;margin: 0 auto 100px auto; padding:30px 0; position:relative;
  background-image:
    linear-gradient(00deg, #a79062, #a79062),
    linear-gradient(00deg, #a79062, #a79062),
    linear-gradient(00deg, #a79062, #a79062),
    linear-gradient(00deg, #a79062, #a79062);
    background-repeat: no-repeat;
    background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
    background-position: left bottom, left top, right top, right bottom;
    animation: square_anim 2s linear forwards;
}
@keyframes square_anim{
  00%{
    background-size:
      1px 0, 0 1px,
      1px 0, 0 1px;
  }
  25%{
    background-size:
      1px 100%, 0 1px,
      1px 0, 0 1px;
  }
  50%{
    background-size:
      1px 100%, 100% 1px,
      1px 0, 0 1px;
  }
  75%{
    background-size:
      1px 100%, 100% 1px,
      1px 100%, 0 1px;
  }
  100%{
    background-size:
      1px 100%, 100% 1px,
      1px 100%, 100% 1px;
  }
}
/*四角を描く　ここまで*/
.square p { width:100%; text-align:center; position:absolute; top:20%; z-index:100; }
.square ul { width:50%; margin:20px auto; position:absolute; bottom:0px; left:0; right:0; }
.square ul li { width:49%; float:left; clear:none;  margin:0 0.5%; }
.square ul li small { float:left; clear:none; }
.square ul li.long { width:100%; float:left; clear:none;  margin:0 0.5%; text-align:center; }
.square ul li img { width:100%; }
.square h2 { margin-bottom:0; }
.square h2 span { float:none; margin-left:10px; }






@media screen and (max-width: 740px){
.MB {width:60px; height:70px; padding:5px 0 10px 0; float:right; position:fixed; z-index:500; right:2.5%; top:0; cursor:pointer; }
.MB span { display:block; width:40px; height:1px; margin:30px 0 0 10px; background:#fff; overflow:visible; position:relative; transition:0.4s; }
.MB span:before,.MB span:after { content:""; display:block; width:40px; height:1px; background:#fff; position:absolute; transition:0.4s; }
.MB span:before { margin:-16px 0 0 0; }
.MB span:after { margin:16px 0 0 0; }
.contents_item { margin:0 0 50px 0; }

.square {width:90%; height: auto; border:none; background-image:none; 　}
.square p { width:100%; text-align:center; position:relative; top:20%; z-index:100; float:left; clear:none; }
.square ul { width:100%; position:relative; float:left; clear:none; margin:10vh 0 0 0; }
.contents_item { flex-wrap:wrap;}
.contents_item li { width:100%; height:auto; margin:0; float:left; clear:none;  }
.contents_item li.right { width:100%; height:auto; margin:0; float:left; clear:none;  }
.top_video { width: 100%; height: 100vh; min-width:100%; }
.top_video-wrapper h2.min { width:100%; font-size:5vw; position:absolute; z-index:100; top: 20%; line-height:1.7em; }
.top_video-wrapper h2.min strong { width:100%; display:inline-block; font-size:25vw;line-height:1.2em;font-weight: 400;font-style: normal;
font-family: source-han-serif-japanese, "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.top_video-wrapper h2.min strong img { width:90%; margin:10px 0 0 0; }

.top_video-wrapper .place { width:100%; text-align:center; position:absolute; top:50%; font-size:20px; line-height:1.7em; }
.top_video-wrapper .place span { font-size:5vw; line-height:1.7em; }
.contents_item li .waku { 5 }
header h1 { width:75%; font-size:11px; color: #fff; margin:20px 0 0 2.5%; line-height:1.7em; }
header ul li img { display:none; }
header ul li.logo { display:none; }
.contents_item li .li_image { width:100%;margin:0 0 0 0%; }
.contents_item li small { width:90%;margin:30px 0 0 5%;}
.contents { width:100%; margin:0 auto; }
.contents_item li .waku { width:90%; margin:50px 5% 20px 5%; }


}