@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;700&family=Playfair+Display:wght@400;700&display=swap');
/* ALL */
body{
	font-family: 'Noto Serif JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-weight: 400;
	background-color: #f2ede4;
	color: #383531;
	width: 100%;
	overflow-x: hidden;
}
body.on #wrap,body.on #menu_bt,body.on #menu_wrap,body.on #page_top{
	animation-name: blurout;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
body.load #wrap,body.load #menu_bt,body.load #menu_wrap,body.load #page_top{
	opacity: 1;
}
.en_font{font-family: 'Playfair Display','Noto Serif JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}

.point_none{pointer-events: none;}
/*.box_img figure{width: 600px;height: 360px;background-color: #000;margin: 0 auto;}*/

.txt_shadow{text-shadow: 0 0px 10px rgba(0,0,0,0.3);}
.txt_shadow-l{text-shadow: 0 0px 30px rgba(0,0,0,0.3);}
.txt_shadow-b{text-shadow: 0 0px 30px rgba(0,0,0,0.3);}

#wrap{box-sizing: border-box;padding-left: 80px;width: 100%;overflow: hidden;}
header #header{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9;
}
header #header nav ul{
	padding-top: 50px;
}
header #header nav ul li{margin: 0 10px}
header #header nav ul li a{
	display: block;
	padding: 5px 15px;
	position: relative;
	overflow: hidden;
}
header #header nav ul li a::after{
	content: "";
	width: 0;
	height: 1px;
	opacity: 0.5;
	background-color: #383531;
	transition: ease 0.3s;
	position: absolute;
	bottom: 0;
	right: 0;
}
header #header nav ul li a:hover::after,header #header nav ul li.on a::after{
	width: 100%;
	right: auto;
	left: 0;
}
header #header nav ul li.on a::after{height: 2px;}

footer #footer_contact a,footer #footer_contact a i,#menu_contact a,#menu_contact a i{transition: ease 0.3s;}
footer #footer_contact a:hover,#menu_contact a:hover{opacity: 0.5;}
footer #footer_contact a:hover i,#menu_contact a:hover i{transform: translateY(-5px);}
footer #footer_txt .logo img{width: 100px;}

#loader{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
	background-color: #f2ede4;
}
#loader .skip{
	position: absolute;
	bottom: 50px;
	right: 50px;
	padding: 10px;
	letter-spacing: 4px;
	cursor: pointer;
	transition: ease 0.3s;
	z-index: 2;
}
#loader > .load_txt{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: ease 1.0s;
	z-index: 2;
}
#loader.end > .load_txt{
	transform: translate(-50%,-50%);
	opacity: 0;
}
#loader > .load_txt > div{
	opacity: 0;
	transform: translateY(30px);
	white-space: nowrap;
}
#loader > .load_txt > div{
	animation-name: topin;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#loader > .load_txt > div:nth-of-type(2){animation-delay: 0.3s}
#loader > .load_txt > div:nth-of-type(3){animation-delay: 0.6s}
#loader.active .load_txt div span{display: inline-block;transition: ease 1s;}
#loader > .load_txt > div.active span.on{}
#loader.active .load_txt div span:nth-of-type(n+1){
	animation-name: load3;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#loader.active .load_txt div span:nth-of-type(3n){
	animation-name: load1;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#loader.active .load_txt div span:nth-of-type(5n){
	animation-name: load2;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#loader.active .load_txt div span.on.active{
	opacity: 0.2;
	animation-name: load4;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#loader.active .load_txt div span.on.active.letter1{animation-delay: 0s;}
/*
#loader.active .load_txt div span.on.active.letter2{animation-delay: 0.3s;}
#loader.active .load_txt div span.on.active.letter3{animation-delay: 0.6s;}
#loader.active .load_txt div span.on.active.letter4{animation-delay: 0.9s;}
#loader.active .load_txt div span.on.active.letter5{animation-delay: 1.2s;}
#loader.active .load_txt div span.on.active.letter6{animation-delay: 1.5s;}
#loader.active .load_txt div span.on.active.letter7{animation-delay: 1.8s;}
#loader.active .load_txt div span.on.active.letter8{animation-delay: 2.1s;}
#loader.active .load_txt div span.on.active.letter9{animation-delay: 2.4s;}
*/
#loader > .load_txt > div.active span:not(.on){
	animation-name: load5;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#loader > .load_txt > div.active span.on.active{
	opacity: 1;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#loader > .load_txt > div.active span.on.active.letter1{animation-name: load4_1;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter2{animation-name: load4_2;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter3{animation-name: load4_3;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter4{animation-name: load4_4;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter5{animation-name: load4_5;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter6{animation-name: load4_6;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter7{animation-name: load4_7;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter8{animation-name: load4_8;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter9{animation-name: load4_9;animation-delay: 0s;}

.video{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.video video{
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#menu_bt{
	position: fixed;
	top: 0;
	left: -80px;
	width: 80px;
	height: 100%;
	background-color:rgba(242,237,228,1);
	z-index: 998;
	transition: ease 0.5s;
}
#menu_bt.on{
	left: 0;
}
#menu_bt div{
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 43px;
	height: 25px;
	transform: translate(-50%,-50%);
	cursor: pointer;
}
#menu_bt div::after{
	content: "MENU";
	position: absolute;
	font-family: 'Playfair Display','Noto Serif JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	width: 100%;
	text-align: center;
	font-size: 12px;
	top: 50%;
	left: 0;
	transform: translateY(15px);
}
#menu_bt div span{
	position: absolute;
	display: block;
	width: 100%;
	height: 1.5px;
	top: 0;
	background-color: #363644;
	transition: ease 0.5s;
}
#menu_bt div span::before,#menu_bt div span::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 1.5px;
	background-color: #363644;
	transform: translateY(10px);
	transition: ease 0.5s;
}

#menu_bt div span::before{top: 0;}
#menu_bt span::after{bottom: -10px;}
#menu_bt span::before{top: 0;}
#menu_bt span::after{bottom: -10px;}
#menu_bt.active{left: 100%;transform: translateX(-100%);}
#menu_bt.active div::after{content: "CLOSE"}
#menu_bt.active div span{transform: translateY(10px) rotate(135deg);}
#menu_bt.active span::before{opacity: 0;transform:  rotate(-45deg) translateX(10px);}
#menu_bt.active span::after{bottom: 0;transform: rotate(-90deg);}

#menu_wrap{
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-right: 30px;
	background-color:rgba(242,237,228,0.9);
	z-index: 997;
	overflow-y: auto;
}
#menu_wrap nav ul li{
	width: 50%;
	background-color: #fff;
	border-right: 6px solid #f2ede4;
	border-bottom: 6px solid #f2ede4;
	box-sizing: border-box;
}
#menu_wrap nav ul li a{
	display: block;
	padding: 20px 10px;
	text-align: center;
	color: #383531;
	position: relative;
	transition: ease 0.6s;
}
#menu_wrap nav ul li a:hover,#menu_wrap nav ul li.on a{
	color: #fff;
}
#menu_wrap nav ul li a::before,#menu_wrap nav ul li a::after{
	content: "";
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: #363644;
	top: 0;
	left: 0;
	transition: ease 0.5s;
	opacity: 0;
	pointer-events: none;
}
#menu_wrap nav ul li a::before{transform: translateY(-50px);}
#menu_wrap nav ul li a::after{transform: translateY(50px);}
#menu_wrap nav ul li a:hover::before,#menu_wrap nav ul li a:hover::after,#menu_wrap nav ul li.on a::before,#menu_wrap nav ul li.on a::after{
	transform: translateY(0);
	opacity: 1;
	border-radius: 0;
}
#menu_wrap nav ul li a span{display: block;position: relative;z-index: 2;}
#menu_wrap nav ul li a span.en{font-size: 20px;letter-spacing: 4px;}
#menu_wrap nav ul li a span.jp{font-size: 13px;letter-spacing: 4px;}
#page_top{
	position: fixed;
	
}
#page_top{
	position: fixed;
	bottom: 20px;
	left: 20px;
	padding-left: 3px;
	height: 150px;
	font-size: 12px;
	letter-spacing: 2px;
	overflow: hidden;
	transition: ease 0.3s;
	z-index: 999;
	opacity: 0;
	cursor: pointer;
}
#page_top.active{
	opacity: 1;
}
#page_top.active.on{opacity: 0;}
#page_top.active:hover{
	opacity: 0.5;
}
#page_top::after{
	content: "";
	width: 1px;
	height: 100%;
	background-color: #383531;
	position: absolute;
	bottom: 0;
	left: 0;
	animation-name: scup;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
}

/* TOP PAGE */
h1{
	position: absolute;
	top: 40px;
	right: 40px;
	width: 240px;
	z-index: 3;
}
.index header{
	height: 100vh;
	min-height: 800px;
	position: relative;
	z-index: 2;
}

#main_img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	min-height: 800px;
	z-index: 1;
}
#main_img::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-image: url("../img/main_img.png");
	background-position: center center;
	background-size: 80% auto;
	background-repeat: no-repeat;
	transition: ease 1.5s;
}
#main_img.on::after{
	transform: scale(1.3);
	opacity: 0;
}
#main_img .txt_box{
	padding: 10px 20px;
	z-index: 3;
	background-color: #f2ede4;
	transition: ease 2s;
}
#main_img.on .txt_box{
	opacity: 0;
}
#main_img .txt_box h2,#main_img .txt_box p{white-space: nowrap}
#main_img .sc_down{
	position: absolute;
	bottom: 20px;
	right: 40px;
	padding-left: 3px;
	height: 150px;
	font-size: 12px;
	letter-spacing: 2px;
	overflow: hidden;
	transition: ease 0.3s;
	z-index: 2;
}
#main_img.on .sc_down{
	opacity: 0;
}
#main_img .sc_down::after{
	content: "";
	width: 1px;
	height: 100%;
	background-color: #383531;
	position: absolute;
	top: 0;
	left: 0;
	animation-name: scdown;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
}
.contents_title{padding: 150px 0; font-size: 60px;position: relative;overflow: hidden;letter-spacing: 20px;}
.contents_title::after{
	content: "";
	background: -moz-linear-gradient(top,  rgba(242,237,228,1) 0%, rgba(242,237,228,0) 50%, rgba(242,237,228,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(242,237,228,1) 0%,rgba(242,237,228,0) 50%,rgba(242,237,228,1) 100%);
	background: linear-gradient(to bottom,  rgba(242,237,228,1) 0%,rgba(242,237,228,0) 50%,rgba(242,237,228,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ede4', endColorstr='#f2ede4',GradientType=0 );
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.contents_title h2{
	position: relative;z-index: 1;
	transform: translateX(-10px);
	transition: ease 0.5s; 
	/*text-shadow: 0 0 30px rgba(0,0,0,0.5),0 20px 1px rgba(0,0,0,0.2),0 -20px 1px rgba(0,0,0,0.2);*/
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
}
.contents_title h2 span{
	position: relative;
	display: inline-block;
	animation-name: contents_title;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	animation-timing-function:cubic-bezier(0.55,0.5,0.45,0.5);
	color: rgba(54,54,68,0.20);
}
.contents_title h2 span:nth-of-type(1){}
.contents_title h2 span:nth-of-type(2){animation-delay: 1s}
.contents_title h2 span:nth-of-type(3){animation-delay: 2s}
.contents_title h2 span:nth-of-type(4){animation-delay: 3s}
.contents_title h2 span:nth-of-type(5){animation-delay: 4s}
.contents_title h2 span:nth-of-type(6){animation-delay: 5s}
.contents_title h2 span:nth-of-type(7){animation-delay: 6s}
.contents_title h2.active{
	text-shadow: 0 0 30px rgba(0,0,0,0.5),0 0px 1px rgba(0,0,0,0.2),0 0px 1px rgba(0,0,0,0.2);
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-o-filter: blur(0px);
	-ms-filter: blur(0px);
	filter: blur(0px);
}
.contents_title h2 span::after{
	position: absolute;
	top: 5px;
	left: 5px;
	font-family: 'Playfair Display','Noto Serif JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-weight: 700;
	color: #363644;
	opacity: 0.2;
	z-index: -1;	
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	filter: blur(1px);
}
#about .contents_title h2 span:nth-of-type(1)::after{content: "A";}
#about .contents_title h2 span:nth-of-type(2)::after{content: "B";}
#about .contents_title h2 span:nth-of-type(3)::after{content: "O";}
#about .contents_title h2 span:nth-of-type(4)::after{content: "U";}
#about .contents_title h2 span:nth-of-type(5)::after{content: "T";}
#about .contents_title h2 span:nth-of-type(6)::after{content: "U";}
#about .contents_title h2 span:nth-of-type(7)::after{content: "S";}
#service .contents_title h2 span:nth-of-type(1)::after{content: "S";}
#service .contents_title h2 span:nth-of-type(2)::after{content: "E";}
#service .contents_title h2 span:nth-of-type(3)::after{content: "R";}
#service .contents_title h2 span:nth-of-type(4)::after{content: "V";}
#service .contents_title h2 span:nth-of-type(5)::after{content: "I";}
#service .contents_title h2 span:nth-of-type(6)::after{content: "C";}
#service .contents_title h2 span:nth-of-type(7)::after{content: "E";}
#flow .contents_title h2 span:nth-of-type(1)::after{content: "F";}
#flow .contents_title h2 span:nth-of-type(2)::after{content: "L";}
#flow .contents_title h2 span:nth-of-type(3)::after{content: "O";}
#flow .contents_title h2 span:nth-of-type(4)::after{content: "W";}
.contents_wrap .more a{
	display: inline-block;
	position: relative;
	padding: 5px 10px;
	transition: ease 0.3s;
}
.contents_wrap .more a span{position: relative;z-index: 1;}
.contents_wrap .more a::before{
	content: "";
	width: 30px;
	height: 1px;
	position: absolute;
	left: 50%;
	bottom: 0px;
	transform: translateX(-50%);
	transition: ease 0.3s;
}
.contents_wrap .more a::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%) scale(0.5);
	opacity: 0;
	z-index: 0;
	transition: ease 0.5s;
}
.contents_wrap .more a:hover::after{
	opacity: 1;
	transform: translate(-50%,-50%) scale(1);
}

#intro .box_img{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 80%;
	height: 100%;
	max-width: 250px;
	min-height: 460px;
	z-index: 1;
}
#intro .txt_box{
	position: relative;
	z-index: 2;
}
#intro.active .box_img{
	animation-name: blurin;
	animation-duration: 0.8s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#intro.active .box_img figure img{
	animation-name: fadeout2;
	animation-duration: 1s;
	animation-delay: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#intro.active .txt_box{
	animation-name: fadein;
	animation-duration: 1.0s;
	animation-delay: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#about .contents_wrap,#about .contents_wrap.active .more a{transition: ease 1s;}
#about .contents_wrap.active{
	background-color: #363644;
	color: #fff;
}
#about .contents_wrap.active .more a{color: #fff;}

#about .more a:hover,#about .contents_wrap.active .more a:hover{color: #363644;}
#service .more a:hover,#flow .more a:hover{color: #f2ede4;}
#about .more a::after,#about .more a::before{background-color: #f2ede4}
#service .more a::before,#flow .more a::before,#service .more a::after,#flow .more a::after{background-color: #363644;}
.contents_wrap .more a:hover::before{transform: translateX(-50%) translateY(5px);opacity: 0;}

#about figure{position: relative;}
#about figure::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image:url("../img/about2.png");
	opacity: 0;
}
#about .contents_wrap.active figure::after{
	animation-name: fadein;
	animation-duration: 2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	animation-delay: 0.8s;
}


#service .contents_wrap.active,#flow .contents_wrap.active{
	animation-name: topin;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#service figure{position: relative;}
#service figure img{opacity: 0;}
#service figure::before,#service figure::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 0;
}
#service figure::before{background-image: url("../img/service2.png");}
#service figure::after{background-image: url("../img/service3.png");}
#service .contents_wrap.active figure img,#service .contents_wrap.active figure::before,#service .contents_wrap.active figure::after{
	animation-name: topin;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#service .contents_wrap.active figure img{
	animation-delay: 0.6s;
}
#service .contents_wrap.active figure::after{
	animation-delay: 1.2s;
}
#flow figure img{opacity: 0;}
#flow figure::before,#flow figure::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	opacity: 0;
}
#flow figure::before{background-image: url("../img/flow2.png");}
#flow figure::after{background-image: url("../img/flow3.png");}
#flow .contents_wrap.active figure img,#flow .contents_wrap.active figure::before,#flow .contents_wrap.active figure::after,#flow .contents_wrap.active .box:nth-of-type(1),#flow .contents_wrap.active .box:nth-of-type(2),#flow .contents_wrap.active .box:nth-of-type(3){
	animation-name: fadein;
	animation-duration: 1.0s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#flow .contents_wrap.active figure::before,#flow .contents_wrap.active .box:nth-of-type(2){
	animation-delay: 0.6s;
}
#flow .contents_wrap.active figure::after,#flow .contents_wrap.active .box:nth-of-type(3){
	animation-delay: 1.2s;
}
#flow .contents_wrap .box{position: relative;padding-top: 60px;}
#flow .contents_wrap .box .no{
	font-size: 36px;
	position: absolute;
	text-shadow: none;
	top: 0;
	left: 0;
	transform: rotate(15deg);
	opacity: 0.6;
}

#column .box_wrap .box{
	position: relative;
	padding-bottom: 70px;
}
#column .box_wrap .box .read_more{
	position: absolute;
	font-size: 12px;
	right: 20px;
	bottom: 20px;
}

/* OTHER */
#loader2{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}
#loader2 div{width: 100%;text-align: center;}
#loader2 div.active{
	animation-name: blurout;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#loader2 h2{
	animation-name: blurin;
	animation-duration: 1.5s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
	font-size: 60px;
	letter-spacing: 20px;
}
#loader2 h2 span{
	position: relative;
	display: inline-block;
	animation-name: contents_title;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	animation-timing-function:cubic-bezier(0.55,0.5,0.45,0.5);
	color: rgba(54,54,68,0.80);
}
#loader2 h2 span:nth-of-type(1){}
#loader2 h2 span:nth-of-type(2){animation-delay: 1s}
#loader2 h2 span:nth-of-type(3){animation-delay: 2s}
#loader2 h2 span:nth-of-type(4){animation-delay: 3s}
#loader2 h2 span:nth-of-type(5){animation-delay: 4s}
#loader2 h2 span:nth-of-type(6){animation-delay: 5s}
#loader2 h2 span:nth-of-type(7){animation-delay: 6s}
#loader2 h2 span:nth-of-type(8){animation-delay: 1s}
#loader2 h2 span:nth-of-type(9){animation-delay: 2s}
#loader2 h2 span:nth-of-type(10){animation-delay: 3s}
#loader2 h2 span:nth-of-type(11){animation-delay: 4s}
#loader2 h2 span:nth-of-type(12){animation-delay: 5s}
#loader2 h2 span:nth-of-type(13){animation-delay: 6s}
#loader2 h2.active{
	text-shadow: 0 0 30px rgba(0,0,0,0.5),0 0px 1px rgba(0,0,0,0.2),0 0px 1px rgba(0,0,0,0.2);
	-webkit-filter: blur(0px);
	-moz-filter: blur(0px);
	-o-filter: blur(0px);
	-ms-filter: blur(0px);
	filter: blur(0px);
}
#loader2 h2 span::after{
	position: absolute;
	top: 5px;
	left: 5px;
	font-family: 'Playfair Display','Noto Serif JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-weight: 700;
	color: #363644;
	opacity: 0.2;
	z-index: -1;	
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	filter: blur(1px);
}
#loader2.page02 h2 span:nth-of-type(1)::after{content: "A";}
#loader2.page02 h2 span:nth-of-type(2)::after{content: "B";}
#loader2.page02 h2 span:nth-of-type(3)::after{content: "O";}
#loader2.page02 h2 span:nth-of-type(4)::after{content: "U";}
#loader2.page02 h2 span:nth-of-type(5)::after{content: "T";}
#loader2.page03 h2 span:nth-of-type(1)::after{content: "S";}
#loader2.page03 h2 span:nth-of-type(2)::after{content: "E";}
#loader2.page03 h2 span:nth-of-type(3)::after{content: "R";}
#loader2.page03 h2 span:nth-of-type(4)::after{content: "V";}
#loader2.page03 h2 span:nth-of-type(5)::after{content: "I";}
#loader2.page03 h2 span:nth-of-type(6)::after{content: "C";}
#loader2.page03 h2 span:nth-of-type(7)::after{content: "E";}
#loader2.page04 h2 span:nth-of-type(1)::after{content: "F";}
#loader2.page04 h2 span:nth-of-type(2)::after{content: "L";}
#loader2.page04 h2 span:nth-of-type(3)::after{content: "O";}
#loader2.page04 h2 span:nth-of-type(4)::after{content: "W";}
#loader2.page05 h2 span:nth-of-type(1)::after{content: "N";}
#loader2.page05 h2 span:nth-of-type(2)::after{content: "E";}
#loader2.page05 h2 span:nth-of-type(3)::after{content: "W";}
#loader2.page05 h2 span:nth-of-type(4)::after{content: "S";}
#loader2.page06 h2 span:nth-of-type(1)::after{content: "C";}
#loader2.page06 h2 span:nth-of-type(2)::after{content: "O";}
#loader2.page06 h2 span:nth-of-type(3)::after{content: "L";}
#loader2.page06 h2 span:nth-of-type(4)::after{content: "U";}
#loader2.page06 h2 span:nth-of-type(5)::after{content: "M";}
#loader2.page06 h2 span:nth-of-type(6)::after{content: "N";}
#loader2.page07 h2 span:nth-of-type(1)::after{content: "I";}
#loader2.page07 h2 span:nth-of-type(2)::after{content: "N";}
#loader2.page07 h2 span:nth-of-type(3)::after{content: "F";}
#loader2.page07 h2 span:nth-of-type(4)::after{content: "O";}
#loader2.page07 h2 span:nth-of-type(5)::after{content: "R";}
#loader2.page07 h2 span:nth-of-type(6)::after{content: "M";}
#loader2.page07 h2 span:nth-of-type(7)::after{content: "A";}
#loader2.page07 h2 span:nth-of-type(8)::after{content: "T";}
#loader2.page07 h2 span:nth-of-type(9)::after{content: "I";}
#loader2.page07 h2 span:nth-of-type(10)::after{content: "O";}
#loader2.page07 h2 span:nth-of-type(11)::after{content: "N";}
#loader2.page08 h2 span:nth-of-type(1)::after{content: "C";}
#loader2.page08 h2 span:nth-of-type(2)::after{content: "O";}
#loader2.page08 h2 span:nth-of-type(3)::after{content: "N";}
#loader2.page08 h2 span:nth-of-type(4)::after{content: "T";}
#loader2.page08 h2 span:nth-of-type(5)::after{content: "A";}
#loader2.page08 h2 span:nth-of-type(6)::after{content: "C";}
#loader2.page08 h2 span:nth-of-type(7)::after{content: "T";}
#loader2.page09 h2 span:nth-of-type(1)::after{content: "P";}
#loader2.page09 h2 span:nth-of-type(2)::after{content: "R";}
#loader2.page09 h2 span:nth-of-type(3)::after{content: "I";}
#loader2.page09 h2 span:nth-of-type(4)::after{content: "V";}
#loader2.page09 h2 span:nth-of-type(5)::after{content: "A";}
#loader2.page09 h2 span:nth-of-type(6)::after{content: "C";}
#loader2.page09 h2 span:nth-of-type(7)::after{content: "Y";}
#loader2.page09 h2 span:nth-of-type(8)::after{content: "P";}
#loader2.page09 h2 span:nth-of-type(9)::after{content: "O";}
#loader2.page09 h2 span:nth-of-type(10)::after{content: "L";}
#loader2.page09 h2 span:nth-of-type(11)::after{content: "I";}
#loader2.page09 h2 span:nth-of-type(12)::after{content: "C";}
#loader2.page09 h2 span:nth-of-type(13)::after{content: "Y";}
#loader2.page10 h2 span:nth-of-type(1)::after{content: "S";}
#loader2.page10 h2 span:nth-of-type(2)::after{content: "I";}
#loader2.page10 h2 span:nth-of-type(3)::after{content: "T";}
#loader2.page10 h2 span:nth-of-type(4)::after{content: "E";}
#loader2.page10 h2 span:nth-of-type(5)::after{content: "M";}
#loader2.page10 h2 span:nth-of-type(6)::after{content: "A";}
#loader2.page10 h2 span:nth-of-type(7)::after{content: "P";}

.other header{margin-bottom: 50px;z-index: 2;}
#page_title{padding:100px 0 20px;position: relative;overflow: hidden;z-index: 1;}
#page_title hgroup{position: absolute;z-index: 2;width: 100%; top: 50%;left: 00%;transform: translate(0,-50%);text-align: center;}
#page_title hgroup h2{font-size: 50px; letter-spacing: 20px;padding-left: 20px; white-space: nowrap;}
#page_title hgroup h3{font-size: 18px; letter-spacing: 2px;}
#page_title figure{
	position: relative;
	overflow: hidden;
	width: 70%;
	z-index: 1;
	max-width: 600px;
}
#page_title.on h2{opacity: 0.2;transition: ease 2s;}
#page_title.on figure{opacity: 0; transition: ease 1.2s;}
#page_title.on.active h2{opacity: 1;text-shadow: 0 0 15px rgba(0,0,0,0.3)}
#page_title.on.active figure{opacity: 0.1;}


#page02 .other_contents .box_wrap .box{position: relative;}
#page02 .other_contents .box_wrap .box p{position: relative;z-index: 2;}
#page02 .other_contents .box_wrap .box figure{
	position: absolute;
	z-index: 1;
	width: 50%;
	top: 0;
	opacity: 0.2;
}
#page02 .other_contents .box_wrap .box:nth-of-type(odd) figure{
	right: -200px;
}
#page02 .other_contents .box_wrap .box:nth-of-type(even) figure{
	left: -200px;
}

#page03 .cate figure img{max-width: 500px;}
#page03 .cate .box figure img{width: 50%;}
#page03 .box.sc_anime.active figure{
	animation-name: fadein;
	animation-duration: 1.6s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

#page04 .box.sc_anime.active{
	animation-name: blurin;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#page04 .box figure {text-align: center;order: 1;}
#page04 .box:nth-of-type(even) figure {order: 2;}
#page04 .box figure img{width: 60%; max-width: 400px;}
#page04 .box .txt_box{
	position: relative;
	order: 2;
}
#page04 .box:nth-of-type(even) .txt_box {order: 1;}

#page04 .box .txt_box .no{
	font-size: 36px;
	text-shadow: none;
	opacity: 0.6;
}
#page04 .box .txt_box h3{font-size: 18px;color: #363644;margin-bottom: 20px;font-weight: 700;}
#page04 .box .txt_box p{font-size: 16px;}
#page04 .box .arrow{order: 3;text-align: left;padding: 30px 0;}
#page04 .box .arrow img{max-width: 150px;}
#page04 .box:nth-of-type(even) .arrow{text-align: right;}


#page06 .other_contents .box .box_title{cursor: pointer;}
#page06 .other_contents .box .box_title p{width: 20%;transition: ease 0.3s;}
#page06 .other_contents .box .box_title h3{white-space: nowrap;overflow: hidden;width: 60%;position: relative;transition: ease 0.3s;}
#page06 .other_contents .box .box_title h3:empty{display: block!important;}
#page06 .other_contents .box .box_title h3::after{
	content: "";
	position: absolute;
	width: 40px;
	height: 100%;
	top: 0;
	right: 0;
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 98%);
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 96%,rgba(255,255,255,1) 98%);
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 96%,rgba(255,255,255,1) 98%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
#page06 .other_contents .box .box_title .news_icon{width: 10%;position: relative;transition: ease 0.3s;}
#page06 .other_contents .box .box_title .news_icon::before,#page06 .other_contents .box .box_title .news_icon::after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 24px;
	height: 2px;
	background-color: #383531;
	border-radius: 3px;
	overflow: hidden;
	transition: ease 0.3s;
}
#page06 .other_contents .box .box_title .news_icon::before{
	transform: translate(-50%,-50%) rotate(90deg);
}
#page06 .other_contents .box .box_title:hover p,#page06 .other_contents .box .box_title:hover h3, #page06 .other_contents .box .box_title:hover .news_icon{opacity: 0.4;}
#page06 .other_contents .box .box_title.active p,#page06 .other_contents .box .box_title.active h3, #page06 .other_contents .box .box_title.active .news_icon{opacity: 0.4;}
#page06 .other_contents .box .box_title.active .news_icon::before{
	transform: translate(-50%,-50%) rotate(0deg);
}
#page06 .other_contents .box .txt_box {}

#page05 .box_wrap .box{box-shadow: 0 0 50px rgba(0,0,0,0.1);margin-bottom: 200px;}
#page05 .box_wrap .box:last-of-type{margin-bottom: 50px;}
#page05 .box_wrap .box.sc_anime.active{
	animation-name: blurin;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
#page05 .pager{padding: 50px;}
#page05 .pager li{margin-left: 20px;font-size: 18px;}
#page05 .pager li a{display: block;padding: 10px;color: #383531;transition: ease 0.3s;}
#page05 .pager li a:hover{opacity: 0.6;transform: translateY(-3px);}

#page07 .box_wrap .box{border-bottom: 1px solid #383531;margin-bottom: 20px;}
#page07 .box_wrap .box h3,#page07 .box_wrap .box p{padding: 5px;position: relative;box-sizing: border-box;}
#page07 .box_wrap .box h3{padding-right: 30px;}
#page07 .box_wrap .box h3::after{
	content: "";
	position: absolute;
	width: 30px;
	height: 5px;
	right: 0;
	bottom: -2px;
	background-color: #f2ede4;
}
#page07 .map iframe{width: 100%;height: 400px;}

#page08 .contact_wrap .box h3{padding-left: 80px;position: relative;width: 30%;box-sizing: border-box;}
#page08 .contact_wrap .box > div,#form_bt > div{width: 70%;}
#page08 .contact_wrap .box.required h3::after{
	content: "必須";
	position: absolute;
	font-family: 'Noto Serif JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	font-size: 14px;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color:rgba(160,7,9,1.00);
}
#page08 .contact_wrap .box input,#page08 .contact_wrap .box textarea{
	border-color: #c1afa2;
	font-family: 'Noto Serif JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
#page08 #form_bt .bt{cursor: pointer;position: relative;width: 300px;height: 60px;background-color: #363644;opacity: 0.7;border-top: 4px double #f2ede4;border-bottom: 4px double #f2ede4;transition: ease 0.3s;}
#page08 #form_bt .bt::after{
	content: "送信";
	font-family: 'Noto Serif JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	letter-spacing: 10px;
}
.g-recaptcha > div{margin: 30px auto;display:inline-block;}
#page08 #form_bt .bt.disabled{pointer-events: none;opacity:0.4;}

#page08 #form_bt .bt input{opacity: 0;position: absolute;z-index: 2;width: 100%;height: 100%;top: 0;
left: 0;border: none;cursor: pointer;}

#page09 .box_wrap .box h4{
	line-height: 2.5;
}
#page09 .box_wrap .box p{font-size: 14px;padding-left: 50px;}

#page10 .box{margin-bottom: 80px;}
#page10 .box a i,#page10 .box a h3,#page10 .box a h4{transition: ease 0.3s;}
#page10 .box a:hover i,#page10 .box a:hover h4{opacity: 1;transform: translateY(-3px)}
#page10 .box a:hover h3{opacity: 0.6;}

/* ANIMATION */
@keyframes scdown {
	0% {
		height: 0;
	}
	70% {
		height: 100%;
		transform: translateY(0);
	}
	100%{
		transform: translateY(100%);
	}
}
@keyframes scup {
	0% {
		height: 0;
	}
	70% {
		height: 100%;
		transform: translateY(0);
	}
	100%{
		transform: translateY(-100%);
	}
}
@keyframes fadein {
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes fadeout2 {
	0% {opacity:1;}
	100% {opacity:0.1;}
}
@keyframes topin {
	0% {opacity:0;transform: translateY(50px);}
	100% {
		opacity:1;transform: translateY(0px);
	}
}
@keyframes blurin {
	0% {
		opacity:0;
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);	
	}
	100% {
		opacity:1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-o-filter: blur(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);	
	}
}
@keyframes blurout {
	0% {
		opacity:1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-o-filter: blur(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);	
	}
	100% {
		opacity:0;
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);	
	}
}
@keyframes page_transition {
	0% {
		opacity:1;
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-o-filter: blur(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);	
	}
	80% {
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);	
	}
	100%{
		opacity:0;		
	}
}

@keyframes load_in {
	0% {opacity:0;transform: translateY(30px);}
	100% {
		opacity:1;transform: translateY(0px);
	}
}

@keyframes scroll_down {
	0% {}
	100% {}
}
@keyframes contents_title {
	0% {transform: translateY(0) skew(0deg,0deg);}
	20% {transform: translateY(6px) skew(8deg,5deg);}
	40% {transform: translateY(8px) skew(5deg,5deg);}
	60% {transform: translateY(6px) skew(2deg,0deg);}
	80% {transform: translateY(4px) skew(-4deg,-5deg);}
	100% {transform: translateY(0) skew(0deg,0deg);}
}

@keyframes load1 {
	0% {opacity:1;}
	10%{opacity:0.3;}
	20%{opacity:1;}
	30%{opacity:0.5;}
	50%{opacity:0.8;}
	100% {opacity: 0.2;}
}
@keyframes load2 {
	0% {opacity:1;}
	10%{opacity:0.6;}
	20%{opacity:0.3;}
	50%{opacity:0.6;}
	100% {opacity: 0.2;}
}
@keyframes load3 {
	0% {opacity:1;}
	30%{opacity:0.3;}
	40%{opacity:0.6;}
	50%{opacity:0.7;}
	100% {opacity: 0.2;}
}
@keyframes load4 {
	0% {opacity:0.2;transform: translate(0,0);text-shadow: 0 0 0 rgba(0,0,0,0.2)}
	100% {opacity: 1;transform: translate(0,-10px);text-shadow: 0 2px 4px rgba(0,0,0,0.2)}
}

@keyframes load4_1 {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(3px,48px)}
}
@keyframes load4_2 {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(143px,0px)}
}
@keyframes load4_3 {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(89px,0px)}
}
@keyframes load4_4 {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(-38px,0px)}
}
@keyframes load4_5 {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(-51px,0px)}
}
@keyframes load4_6 {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(-137px,0px)}
}
@keyframes load4_7 {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(212px,-48px)}
}
@keyframes load4_8 {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(78px,-48px)}
}
@keyframes load4_9 {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(-137px,-48px)}
}
@keyframes load4_1_sp {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(-1px,24px);}
}
@keyframes load4_2_sp {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(76px,0px)}
}
@keyframes load4_3_sp {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(47px,0px)}
}
@keyframes load4_4_sp {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(-22px,0px)}
}
@keyframes load4_5_sp {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(-29px,0px)}
}
@keyframes load4_6_sp {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(-74px,0px)}
}
@keyframes load4_7_sp {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(116px,-24px)}
}
@keyframes load4_8_sp {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(44px,-24px)}
}
@keyframes load4_9_sp {
	0% {transform: translate(0,-10px);}
	100% {transform: translate(-72px,-24px)}
}
@keyframes load5 {
	0% {opacity:0.2;}
	100% {opacity: 0;}
}


/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
.video{
	text-align: center;
}
.video video{
	width: auto;
}
	.contents_title h2{transform: translateY(0)!important;}
	.contents_title h2 span{
		color: rgba(54,54,68,0.50);
	}
}

/* ---------- 1280px ~ 769px ---------- */
@media screen and (min-width:769px) and ( max-width:1280px){
/* ALL */
	
/* TOP PAGE */

/* OTHER */
#page02 .other_contents .box_wrap .box:nth-of-type(odd) figure{
	right: 0px;
}
#page02 .other_contents .box_wrap .box:nth-of-type(even) figure{
	left: 0px;
}

#page08 .contact_wrap .box h3{font-size: 14px;width: 40%;}
#page08 .contact_wrap .box > div,#form_bt > div{font-size: 14px;width: 60%;}
	
#page10 .box a h3.font_24{font-size: 18px;letter-spacing: 2}
#page10 .box a h4.font_14{font-size: 12px;letter-spacing: 1;}

/* ANIMATION */
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/* ALL */
#loader > .load_txt{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	transform: translate(-50%,-50%);
	transition: ease 1.0s;
}
#wrap{box-sizing: border-box;padding-left: 0px;}
#menu_bt{
	position: fixed;
	top: 20px;
	left: auto;
	right: 20px;
	width: 80px;
	height: 80px;
	background-color:rgba(242,237,228,1);
	z-index: 999;
	transition: ease 0.5s;
}
#menu_bt.on{
	left: auto;
}
#menu_bt.active{left: auto;transform: translateX(0);}

#menu_wrap{
	padding-right: 0;
	padding-top: 100px;
	padding-bottom: 50px;
}
#menu_wrap nav ul li a span.en{font-size: 16px;letter-spacing: 4px;}
#menu_wrap nav ul li a span.jp{font-size: 12px;letter-spacing: 4px;}
/* TOP PAGE */
h1{
	position: absolute;
	top: 20px;
	right: auto;
	left: 50px;
	width: 200px;
}
.contents_title{padding: 150px 0; font-size: 40px;position: relative;overflow: hidden;letter-spacing: 14px;}
	#main_img{overflow-x: hidden;}
#main_img::after{
	background-image: url("../img/main_img_tb.png");
	background-size: 100% auto;
}
#main_img .txt_box{word-break: keep-all;top: 40%}
#main_img .sc_down{
	right: 20px;
	height: 120px;
}
/* OTHER */
#loader2 h2{
	font-size: 40px;
	letter-spacing: 16px;
}
#page_title hgroup h2{font-size: 40px; letter-spacing: 16px;padding-left: 16px; white-space: nowrap;}
#page_title hgroup h3{font-size: 16px; letter-spacing: 2px;}

#page02 .other_contents .box_wrap .box:nth-of-type(odd) figure{
	right: -50px;
}
#page02 .other_contents .box_wrap .box:nth-of-type(even) figure{
	left: -50px;
}

#page03 .cate figure img{max-width: 400px;}
#page03 .cate .box figure img{width: 80%;}

#page04 .box .txt_box h3{font-size: 18px;}
#page04 .box .txt_box p{font-size: 14px;}
	
#page06 .box_wrap .box{margin-bottom: 100px;}
#page06 .pager li:not(.prev){display: none;}


	
#page08 .contact_wrap .box h3{font-size: 14px;width: 100%;margin-bottom: 10px;}
#page08 .contact_wrap .box > div,#form_bt > div{font-size: 14px;width: 100%;}
#page08 .contact_wrap .box:not(.required) h3{padding-left: 10px;}
#page09 .box_wrap .box p{font-size: 12px}
	
#page10 .box{width: 100%!important;}
/* ANIMATION */
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/* ALL */
#menu_bt{
	position: fixed;
	top: 10px;
	left: auto;
	right: 10px;
	width: 60px;
	height: 60px;
	background-color:rgba(242,237,228,1);
	z-index: 999;
	transition: ease 0.5s;
}
#menu_bt.on{
	left: auto;
}
#menu_bt.active{left: auto;transform: translateX(0);}
#menu_bt div{
	width: 40px;
	height: 25px;
}
#menu_bt div::after{
	font-size: 10px;
	top: 50%;
	left: 0;
	transform: translateY(8px);
}
#menu_bt div span{
	height: 1px;
}
#menu_bt div span::before,#menu_bt div span::after{
	height: 1px;
}

#menu_wrap{
	padding-top: 50px;
}
#menu_wrap{
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-right: 0;
	background-color:rgba(242,237,228,0.9);
}
#menu_wrap nav ul li{
	width: 100%;
	border-right: none;
	border-bottom: 5px solid #f2ede4;
}
#menu_wrap nav ul li a{
	display: block;
	padding: 10px 5px;
	text-align: center;
	color: #383531;
	position: relative;
	transition: ease 0.6s;
}
#menu_wrap nav ul li a span.en{font-size: 14px;letter-spacing: 2px;}
#menu_wrap nav ul li a span.jp{font-size: 10px;letter-spacing: 1px;}
	
/* TOP PAGE */
#loader > .load_txt{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	transform: translate(-50%,-50%);
	transition: ease 1.0s;
}
#loader > .load_txt > div.active span.on.active.letter1{animation-name: load4_1_sp;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter2{animation-name: load4_2_sp;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter3{animation-name: load4_3_sp;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter4{animation-name: load4_4_sp;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter5{animation-name: load4_5_sp;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter6{animation-name: load4_6_sp;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter7{animation-name: load4_7_sp;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter8{animation-name: load4_8_sp;animation-delay: 0s;}
#loader > .load_txt > div.active span.on.active.letter9{animation-name: load4_9_sp;animation-delay: 0s;}

h1{
	position: absolute;
	top: 15px;
	left: 15px;
	width: 150px;
}

.contents_title{padding: 100px 0; font-size: 28px;position: relative;overflow: hidden;letter-spacing: 10px;transform: translateX(5px);}
.index header,#main_img{min-height: 667px;}
#main_img::after{
	background-image: url("../img/main_img_sp.png");
}
#main_img .txt_box{top: 50%}
#main_img .sc_down{
	right: 20px;
	height: 100px;
	font-size: 10px;
}
#intro figure img{width: 80%; max-width: 150px;}	
	.contents_wrap .box_img{position: relative;z-index: 1;}
	.contents_wrap .txt_box{position: relative;z-index: 2;}
#about figure::after{
	background-image:url("../img/about2_sp.png");
}
#service figure::before{background-image: url("../img/service2_sp.png");}
#service figure::after{background-image: url("../img/service3_sp.png");}
#flow figure::before{background-image: url("../img/flow2_sp.png");}
#flow figure::after{background-image: url("../img/flow3_sp.png");}

#column .box_wrap .box{
	padding-bottom: 50px;
}
#column .box_wrap .box .read_more{
	bottom: 10px;
}

/* OTHER */
#loader2 h2{
	font-size: 18px;
	letter-spacing: 6px;
}
#page_title hgroup h2{font-size: 20px; letter-spacing: 10px;padding-left: 10px; white-space: nowrap;}
#page_title hgroup h3{font-size: 12px; letter-spacing: 2px;}

#page02 .other_contents .box_wrap .box figure{
	position: absolute;
	z-index: 1;
	width: 70%;
	top: 30%;
	opacity: 0.2;
}

#page04 .box .txt_box,#page04 .box figure{width: 100%!important;}
#page04 .box .txt_box:nth-of-type(even){}
#page04 .box figure img{width: 60%;}
#page04 .box .txt_box h3{font-size: 16px;}
#page04 .box .txt_box p{font-size: 12px;}
#page04 .box:nth-of-type(even) figure {order: 1;}
#page04 .box:nth-of-type(even) .txt_box {order: 2;}
#page04 .box .arrow img{max-width: 100px;}


#page05 .other_contents .box .box_title{padding-right: 60px;position: relative;}
#page05 .other_contents .box .box_title p{width: 100%;}
#page05 .other_contents .box .box_title h3{width: 100%;}
#page05 .other_contents .box .box_title h3::after{
	width: 16px;
}
#page05 .other_contents .box .box_title .news_icon{width: 60px;position: absolute;right: 0;top: 0;height: 100%;}
#page05 .other_contents .box .box_title .news_icon::after,#page05 .other_contents .box .box_title .news_icon::before{height: 1px;}

	
#page07 .box_wrap .box{border-bottom: 1px solid #383531;margin-bottom: 20px;}
#page07 .box_wrap .box h3{padding-right: 5px;}
#page07 .box_wrap .box p{padding-left: 15px;padding-top: 0;}

#page07 .map iframe{width: 100%;height: 400px;}

#page08 #form_bt .bt{width: 100%;}

#page09 .box_wrap .box h4{font-size: 14px}	
#page09 .box_wrap .box p{padding-left: 0;}

#page10 .box{margin-bottom: 60px;}
#page10 .box a h3.font_24{font-size: 16px;letter-spacing: 1}
#page10 .box a h4{width: 100%;box-sizing: border-box;padding-left: 40px;padding-top: 10px;}

/* ANIMATION */

}
/* 2021/07/15 */
.insta {
    top:60%; 
    left:50%; 
    transform:translate(-50%,-50%);
}
@media screen and (max-width: 768px){
.insta {
    display: none;
}
}