@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');
@font-face {
  font-family: 'RyuminLight';
  src: url('../fonts/RyuminLight.woff') format('woff'), url('../fonts/RyuminLight.woff2') format('woff2'), url('../fonts/RyuminLight.otf') format('opentype'), url('../fonts/RyuminLight.ttf') format('truetype');
}

abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: bottom;background:transparent;}
body,html {width: 100%;background-color: #000;}
body {line-height: 1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
li,ol,ul {list-style: none;}
blockquote,q {quotes: none;}
blockquote:after,blockquote:before,q:after,q:before {content: '';content: none;}
a {margin: 0;padding: 0;font-size: 100%;vertical-align: baseline; background: transparent;}
ins {background-color: #ff9;color: #000;text-decoration: none;}
mark {background-color: #ff9;color: #000;font-style: italic;font-weight: bold;}
del {text-decoration: line-through;}
abbr[title],dfn[title] {border-bottom: 1px dotted;cursor: help;}
table {border-collapse: collapse;border-spacing: 0;}
hr {display: block;height: 1px; border: 0;border-top: 1px solid #cccccc;margin: 1em 0;padding: 0;}
input,select {vertical-align: middle;}
img {border: none;vertical-align: top;zoom: 1;width: auto;}
html {font-size: 62.5%;}
body {-webkit-text-size-adjust: 100%;-moz-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-o-text-size-adjust: 100%;text-size-adjust: 100%;font-family: "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", Arial, Helvetica, Verdana, sans-serif;font-size: 13px;font-size: 1.3rem;line-height: 1.6;color: #303030;}
.cf:after {content: '.';display: block;clear: both;height: 0;visibility: hidden;}
.pc {display: block;}
.sp {display: none;}
.site {position: relative;}
h1 {
	font-size: 3.6rem;
	font-weight: 500;
}
h2 {
	font-size: 2.8rem;
	font-weight: 500;
}
h3 {
	font-size: 2.4rem;
	font-weight: 500;
}
h4 {
	font-size: 1.8rem;
	font-weight: 500;
}
h5 {
	font-size: 1.6rem;
	font-weight: 500;
}
.pc {display: block;}
.sp {display: none;}

@media(max-width:768px) {
h1 {
	font-size: 3.0rem;
	font-weight: 500;
}
h2 {
	font-size: 2.4rem;
	font-weight: 500;
}
h3 {
	font-size: 2.1rem;
	font-weight: 500;
}
h4 {
	font-size: 1.6rem;
	font-weight: 500;
}
h5 {
	font-size: 1.4rem;
	font-weight: 500;
}
.pc {display: none;}
.sp {display: block;}
}
input[type="submit"],
input[type="button"] {
border-radius: 0;
-webkit-box-sizing: content-box;
-webkit-appearance: button;
appearance: button;
border: none;
box-sizing: border-box;
cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

@keyframes fadeIn { /*animation-nameで設定した値を書く*/

  0% {height: 0; top:-130px;} /*アニメーション開始時は不透明度0%*/

  100% {height: 130px; top:0;} /*アニメーション終了時は不透明度100%*/

}
.wrap {width: 100%;}
.mv {width: 100%;margin: 0 auto 0;position: relative;}
.mv .sns {position: fixed;width: 40px;top:0;right: 0;z-index: 100;}
.mv .sns .hotpepper {border-bottom: solid 1px #FFF;}
.mv .sns .hotpepper a {}
.mv .sns .hotpepper a img {}
.mv .sns .line {}
.mv .sns .line a {}
.mv .sns .line a img {}
.mv {}
.mv img {width: 100%;height: auto;}
.mv .logo {position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}
.mv .mask {position: absolute;left: 0;bottom: 0;}
.mv .scroll_btn {position: absolute;left: 90px;top: 560px;}
.content {width: 100%;margin: 0 auto 0;padding: 80px 0 184px;}
.content .col2 {display: flex;justify-content: space-between;}
.first {}
.first .col_l {height: 600px;writing-mode: vertical-rl;font-family: 'RyuminLight', serif;color: #FFF;font-size: 18px;letter-spacing: 0.20em;width: 410px;display: flex;justify-content: center;align-content: flex-end;}
.first .col_r {width: 35.625%}
.first .col_r img {width: 100%;height: auto;}
.second {padding-bottom: 60px;}
.second .col_l {width: 48.67%;}
.second .col_l img {width: 100%;height: auto;}
.second .col_r {width: 27.42%; padding: 94px 64px 0 0;}
.second .col_r img {width: 100%;height: auto;}
.col_one {position: relative;}
.col_one .ph {width: 33.52%; margin-left: calc(50% - 105px);}
.col_one .ph img {width: 100%;height: auto;}
.col_one .txt {font-family: 'RyuminLight', serif;color: #FFF;font-size: 14px;letter-spacing: 0.15em;display: inline-block;position: absolute;left: 60%;top:-148px;line-height: 3.0}
.service {background-color: #333333;padding: 156px 0 217px;position: relative;}
.service .col3 {width: 1100px;margin: 0 auto 0;position: relative;display: flex;justify-content: space-between;}
.service .col3 .col {width: 330px;font-family: 'RyuminLight', serif;color: #FFF;}
.service .col3 .col .tit {font-size: 30px;letter-spacing: 0.1em;}
.service .col3 .col .read {font-size: 18px;height: 64px;}
.service .col3 .col .ph {margin: 0 auto 8px;}
.service .col3 .col .ph img {}
.service .col3 .col .txt {font-size: 14px;text-align: justify;}
.yoyaku {width: 540px;background-color: #333;border: solid 1px #FFF;position: absolute;left: calc(50% - 270px);bottom: -64px;}
.yoyaku .tit {font-family: 'RyuminLight', serif;color: #FFF;font-size: 14px;letter-spacing: 0.05em;text-align: center;padding-top: 16px;}
.yoyaku .col2 {display: flex;justify-content: center;align-content: center;}
.yoyaku .col2 a {margin: 16px;}
.yoyaku .col2 a img {}
.yoyaku .txt {width: 100%;line-height: 30px;background-color: #FFF;color: #000;text-align: center;font-size: 14px;font-weight: 700;}
footer {padding: 160px 0 }
footer .in {width: 540px;margin: 0 auto 0;}
footer .in .col2 {display: flex;flex-wrap: wrap;justify-content: space-between;margin-bottom: 48px;font-family: 'RyuminLight', serif;}
footer .in .col2 .col {width: 260px;height: 40px;margin-bottom: 24px; box-sizing: border-box;border:solid 1px #FFF;line-height: 38px;text-align: center;}
footer .in .col2 .col a {color: #FFF;text-decoration: none;letter-spacing: 0.1em;}
footer .in .add {font-family: 'RyuminLight', serif;color: #FFF;font-size: 12px;letter-spacing: 0.15em;text-align: center;margin-bottom: 16px;}
footer .in .time {font-family: 'RyuminLight', serif;color: #FFF;font-size: 14px;letter-spacing: 0.15em;text-align: center;margin-bottom: 64px;}
footer .in .logo {width: 130px; margin: 0 auto 40px;}
footer .in .logo img {}
footer .in .copy {font-family: 'RyuminLight', serif;color: #FFF;font-size: 12px;letter-spacing: 0.05em;text-align: center;margin-bottom: 16px;}

@media(max-width:768px) {

	.wrap {width: 100%;overflow: hidden;}
	.mv {width: 100%;margin: 0 auto 0;position: relative;}
	.mv .mask {width: 32%;height: auto; position: absolute;left: 0;bottom: 0;}
	.mv .mask img {width: 100%;height: auto;}
	.content {width: 100%;margin: 0 auto 0;padding: 10% 0 40%;}
	.content .col2 {display: flex;justify-content: space-between;}
	.first {margin-bottom: -10rem;}
	.first .col_l {height: auto;writing-mode: vertical-rl;font-family: 'RyuminLight', serif;color: #FFF;font-size: 4.0vw;letter-spacing: 0.20em;width: 30%;display: flex;justify-content: center;align-content: flex-end;z-index: 10;padding-top: 5rem;white-space: nowrap;}
	.first .col_r {width: 67.5%}
	.first .col_r img {width: 100%;height: auto;}
	.content .col2.second {padding-bottom: 60px;display: block;}
	.second .col_r {padding: 12% 0 0 0;width: 80%;margin-left: 30%;}
	.second .col_r img {width: 100%;height: auto;}
	.second .col_l {width: 85%;margin-top: 0%;}
	.second .col_l img {width: 100%;height: auto;}
	.col_one {position: relative;padding-top: 50%;}
	.col_one .ph {width: 89%;margin-right: 30%;margin-left: -14%}
	.col_one .ph img {width: 100%;height: auto;}
.col_one .txt {font-family: 'RyuminLight', serif;color: #FFF;font-size: 4.0vw;letter-spacing: 0.15em;display: inline-block;position: absolute;left: 17%;top:0%;line-height: 2.3;}
.service {background-color: #333333;padding: 20% 0 25%;position: relative;}
.service .col3 {width: 100%;margin: -38% auto 0;position: relative;display:block;}
.service .col3 .col {width: 90%;font-family: 'RyuminLight', serif;color: #FFF;}
	.service .col3 .col:nth-child(1){margin-left: 10%;margin-bottom: 30%;}
	.service .col3 .col:nth-child(2){margin-right: 10%;margin-bottom: 30%;}
	.service .col3 .col:nth-child(2) .txt_img {margin-left: 10%;text-align: right;}
	.service .col3 .col:nth-child(2) .ph {width: 82.4%; margin: -31% 17.6% 8px 0;}
	.service .col3 .col:nth-child(2) .txt {font-size: 3.6vw;letter-spacing: 0.08em;width: 82.4%;margin-left: 7%;margin-right: 0;box-sizing: border-box;padding-right: 7%;padding-left: 0;}
	.service .col3 .col:nth-child(3){margin-left: 10%;margin-bottom: 15%;}
	.service .col3 .col:nth-child(3) .ph {width: 82.4%; margin: -25% 0 8px 17.6%;}
.service .col3 .col .tit {font-size: 30px;}
.service .col3 .col .read {font-size: 18px;height: 64px;}
.service .col3 .col .ph {width: 82.4%; margin: -10% 0 8px 17.6%;}
.service .col3 .col .ph img {width: 100%;height: auto;}
.service .col3 .col .txt {font-size: 3.6vw;letter-spacing: 0.1em;width: 82.4%;margin-left: 17.6%; box-sizing: border-box;padding-right: 10%;}
.yoyaku {width: 84%;background-color: #333;border: solid 1px #FFF;position: absolute;left: 8%;bottom: -72px;box-sizing: border-box;}
.yoyaku .tit {font-family: 'RyuminLight', serif;color: #FFF;font-size: 14px;letter-spacing: 0.05em;text-align: center;}
.yoyaku .col2 {display: flex;justify-content: center;align-content: center;}
.yoyaku .col2 a {margin: 5% 3%;}
	.yoyaku .col2 a:first-child {width: 30%;}
	.yoyaku .col2 a:nth-child(2) {width: 10%;}
.yoyaku .col2 a img {width: 100%;height: auto;}
.yoyaku .txt {width: 100%;line-height: 30px;background-color: #FFF;color: #000;text-align: center;font-size: 4vw;font-weight: 700;}
footer {padding: 40% 0 0;}
footer .in {width: 80%;margin: 0 auto 0;}
footer .in .col2 {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 0 auto 48px;width: 90%;}
footer .in .col2 .col {width: 100%;height: 40px;margin-bottom: 24px; box-sizing: border-box;border:solid 1px #FFF;line-height: 38px;text-align: center;}
footer .in .col2 .col a {color: #FFF;text-decoration: none;}
footer .in .add {font-family: 'RyuminLight', serif;color: #FFF;font-size: 12px;letter-spacing: 0.05em;text-align: center;margin-bottom: 16px;}
footer .in .time {font-family: 'RyuminLight', serif;color: #FFF;font-size: 14px;letter-spacing: 0.05em;text-align: center;margin-bottom: 64px;}
footer .in .logo {width: 30%; margin: 0 auto 40px;}
footer .in .logo img {width: 100%;height: auto;}
footer .in .copy {font-family: 'RyuminLight', serif;color: #FFF;font-size: 3.0vw;letter-spacing: 0.05em;text-align: center;margin-bottom: 16px;}
}

/*HOME*/

@media(max-width:768px) {
}

/*Footer*/
footer {}
footer .in {}
@media(max-width:768px) {
}


.fadein_up {
  opacity: 0;
  transform: translate3d(0px, 30px, 0px);
  transition: opacity 1000ms ease, transform 1000ms ease;
}
.fadein_up.fadein_up__active {
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
}

.randomAnime {
	visibility: hidden;
}