@charset "utf-8";

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* Reset
------------------------------------------------------------ */
html {overflow-y: scroll;}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd
{	margin: 0;padding: 0;border: 0;outline: 0;font-size: 1em;}
address,caption,cite,code,dfn,em,strong,th,var {	font-style: normal;}
a {
	margin: 0;
	padding: 0;
	overflow: hidden;
	outline: none;
	color: #323232;
	text-decoration:none;
	transition: all 0.2s ease-in-out;
}
a:hover,a:active,a:visited{color:#ff6000;}
img {	vertical-align: bottom;-webkit-user-select: none;-moz-user-select: none;-khtml-user-select: none;-webkit-user-drag: none;-khtml-user-drag: none;}
/* normalize.css --END-- */

@font-face {
  font-family: 'myfont';
  src: url('/assets/font/ttlmyfont01.woff') format('woff');
}
@font-face {
  font-family: 'font-h';
  src: url('/assets/font/helvetica.woff') format('woff');
}
@font-face {
  font-family: 'font-h-it';
  src: url('/assets/font/helvetica_it.woff') format('woff');
}

/* Base
------------------------------------------------------------ */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	overflow:auto;
	-webkit-font-smoothing: antialiased;
}
body {
	margin: 0;
	background: #fff;
	color: #323232;
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow: hidden;
	width: 100vw;
  height: 100vh;
  animation: bugfix infinite 1s;
  -webkit-animation: bugfix infinite 1s;
}
ul {	list-style: none;}
ol {	margin-left: 1.5em;}
fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}
body, #page, #wrap, #content {    height: 100%;}
img, object, embed {
	max-width: 100%;
	width: 100%;
}
img {
	height: auto;
	vertical-align: bottom;
}
#wrap {
    overflow: hidden;
}

/* Link
------------------------------------------------------------ */
a:link {	color: #323232;	text-decoration: none;}
a:visited {	color: #323232;	text-decoration: none;}
a:hover {	color: #6a6e62;	text-decoration: none;}

/* Layout
------------------------------------------------------------ */
#container{position: relative;}
.contents{
	width: 95vw;
	margin: auto;
}
.underpage{ padding-top: 6em;}

/*-----下層ページメイン--
.under .imgarea {position: relative;}
.under .imgarea {
    display: block;
    padding: 0 clamp(40px, calc(100 / 1214 * 100vw), 100px);
    position: relative;
    width: 100%;
}
.under .imgarea .imgarea-in{
    width: 100%;
    height: 120%;
    left: 0;
    top: -10%;
    position: fixed;
    inset: 0;
    z-index: -1;
}
.under .imgarea .imgarea-in img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
    width: 100%;
}
---*/
.under #mainimage{
	position: relative;
	overflow: visible;
}
.under .imgarea .imgarea-in{position: relative;}
.under .imgarea .imgarea-in img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.px-area{
	position: relative;
}
.px-area .px-area-in{
	display: block;
	padding: 0 clamp(40px, calc(100 / 1214 * 100vw), 100px);
	position: relative;
	width: 100%;
}
.px-area .contents{
	align-items: center;
	aspect-ratio: 1214 / 664;
	display: flex;
	height: auto;
	justify-content: flex-start;
	margin: 0 auto;
	position: relative;
	width: min(100%, 1214px);
}
.px-area .about-ttl .ttl04 h2{
	position: relative;
	padding: 0em 1.5em 0em 0.5em;
	color: #fff;
	/* background: linear-gradient(to right, #ff934c, #fc686f); */
	font-size: 3em;
	font-weight: 900;
	font-family: "M PLUS 1", sans-serif;
	border-bottom: 1px solid #fff;
}
.px-area .about-ttl h3{
	padding: 0.5em 0em 0em 1em;
	font-size: 1.5em;
	color: #fff;
}
.px-area .btnarea{
    position: absolute;
    right: 0;
    bottom: 10%;
}
.px-area .btnarea .btn03 a{
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 10em;
  height: 10em;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  background: none;
  border: #fff 1px solid;
  transition: color .4s, border-color .4s;
  z-index: 0;
}
.px-area .btnarea .btn03 a::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: linear-gradient(to right, #ff934c, #fc686f);
  transform: translate(-50%, -50%);
  transition: width .5s ease, height .5s ease;
  z-index: -1;
}
.px-area .btnarea .btn03 a:hover::before{
  width: 150%;
  height: 150%;
}
.px-area .btnarea .btn03 a:hover{
  border-color: transparent;
}
.px-area .px-area-bg{
    width: 100%;
    height: 120%;
    left: 0;
    top: -10%;
    position: fixed;
    inset: 0;
    z-index: -1;
}
.px-area .px-area-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
}
.px-area .about-bg img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
    width: 100%;
}

.clum02{
	display: flex;
  flex-wrap: wrap;
}
.clum02-rev{
	display: flex;
  flex-wrap: wrap;
	flex-direction: row-reverse;
}
.clum03,.clum04{
	display: flex;
  flex-wrap: wrap;
}
.clum03 li{width: 33.3%;}
.clum04 li{width: 24.99%;}

#TOP .grecaptcha-badge,
#concept .grecaptcha-badge,
#business .grecaptcha-badge,
#works .grecaptcha-badge,
#column .grecaptcha-badge,
#member .grecaptcha-badge,
#news .grecaptcha-badge,
#company .grecaptcha-badge,
#spaceproduce .grecaptcha-badge,
#rental .grecaptcha-badge{
    visibility: hidden;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
}
@media screen and (max-width: 520px) {
.clum03 li,
.clum04 li {
	width: 50%;
	margin-bottom: 2%;
}
.under .imgarea{ padding-top: 50px;}
.px-area .contents{
	align-items: flex-start;
	aspect-ratio: 1214 / 1200;
	display: flex;
	height: auto;
	justify-content: flex-start;
	margin: 0 auto;
	position: relative;
	width: min(100%, 1214px);
	padding-top: 5%;
}
.px-area .px-area-in {
    padding: 0 clamp(20px, calc(60 / 1214 * 100vw), 20px);
}
.px-area .about-ttl .ttl04 h2 {
    padding: 0em 0.5em 0em 0.5em;
    font-size: 1.5em;
}
.px-area .about-ttl h3 {
    padding: 0.5em 0em 0em 1em;
    font-size: 1em;
}
.px-area .btnarea .btn03 a{
		width: 7em;
		height: 7em;
		font-size: 0.8em;
}
.px-area .px-area-bg img{ height: 100%;}

}
/*-----page-----*/
.sp{display: none;}
@media only screen and (max-width: 1024px) {}
@media only screen and (max-width: 767px) {
.sp{display: block;}
}

/*-----header-----*/
header{
	position: fixed;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0.5em 1em;
	background: #fff;
	z-index: 9;
	overflow: hidden;
}

header .logoarea{ flex-grow: 1;}
header .logoarea .logoimage{ display: inline-block;}
header .logoarea a{
	display: flex;
	justify-content: flex-start;
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho", "MS PMincho", serif;
}
header .logoarea img{
	width: 53px;
  height: 47px;
}
header .logoarea .logotxt{ margin-left: 0.5em;}
header .logoarea .logotxt .catch{
		font-size: 0.7em;
    display: block;
	}
header .logoarea .company{
	letter-spacing: 0.1em;
  font-size: 1.2em;
}
header .g-txtnavarea{}
header .g-txtnavarea ul{
	display: flex;
	justify-content: flex-start;
}
header .g-txtnavarea li{margin-right: 1em;}
header .g-txtnavarea a{font-weight: bold;}

header .h-convarea{ flex-grow: 2;}

header .h-convarea ul{
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}
header .h-convarea li{}
header .h-convarea li:first-child{margin-right: 2%;}
header .h-convarea ul li a{
	position: relative;
	background: #ff6000;
	padding: 0.5em;
	display: block;
	width: 10em;
	text-align: center;
	letter-spacing: 0.1em;
	min-width: 12em;
	color: #fff;
	font-weight: bold;
	border-radius: 6px;
	border: 1px solid #ff6000;
	z-index: 1;
}
header .h-convarea ul li a::before{
	content: "";
	position: absolute;
	top: 55%;
	right: 5%;
	transform: translateY(-55%);
	width: 9px;
	height: 19px;
	background: url(../img/common/arr-r02.png) 50% 50% no-repeat;
	background-size: contain;
	transition: all 0.4s;
}
header .h-convarea ul li a::after{
	content: '';
	background: #fff;
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  transform: scale(0, 1);
	  transform-origin: left top;
	  transition: .4s cubic-bezier(0.45, 0, 0.55, 1);
	  z-index: -1;
}
header .h-convarea ul li a:hover{color:#ff6000;}
header .h-convarea ul li a:hover::after{transform: scale(1, 1);}
header .h-convarea ul li a:hover::before{
	right: 3%;
	background: url(../img/common/arr-r03.png) 50% 50% no-repeat;
	background-size: contain;
}
header .gNavarea{margin-left: 1%;}
/*　ハンバーガーボタン */
  .hamburger {
  	width: 60px;
  	height: 60px;
  	justify-content: center;
  	align-items: center;
  	flex-direction: column;
  	cursor: pointer;
  	margin-left: auto;
  	display: flex;
  	transition: all 0.4s;
  	position: relative;
		z-index: 30;
			right: 1%;
			top: 0%;
  }
  .checkbox:checked ~ .hamburger {}
  .hamburger .bar {
    width: 40px;
    height: 1px;
    background: #393939;
    border-radius: 2px;
    display: block;
    position: absolute;
  }
  .hamburger .bar-top {
    transform: translate(0, -12px) rotate(0);
    transition: all 0.4s;
  }
  .hamburger .bar-middle {
    transition: all 0.4s;
    opacity: 1;
  }
  .hamburger .bar-bottom {
    transform: translate(0, 12px) rotate(0);
    transition: all 0.4s;
  }

  .checkbox:checked ~ .hamburger .bar-middle {
    opacity: 0;
  }
  .checkbox:checked ~ .hamburger .bar-top {
    transform: translate(0, 0) rotate(-45deg);
  	background: #fff;
  }

  .checkbox:checked ~ .hamburger .bar-bottom {
    transform: translate(0, 0) rotate(45deg);
  	background: #fff;
  }

  .checkbox {
    display: none;
  }

  .nav-menu {
		display: none;
		width: 100%;
		height: 100%;
    opacity: 0;
    color: #333;
    top: 0;
    left: 0;
    transition: all 0.3s;
  	z-index: -1;
  }
  .nav-menu ul.gnav-sp {
  	position: absolute;
  	top: 40%;
  	left: 50%;
  	transform: translate(-50%,-40%);
  	width: 60%;
  }

  .nav-menu ul.gnav-sp li {
  	padding: 20px 10px;
  	border-bottom: 0.5px solid #fff;
  }

  .nav-menu ul.gnav-sp a{
    text-align: center;
  	font-size: 1.1em;
  	font-weight: 600;
  	color: #fff;
  }
  .nav-menu a:hover {}
  .checkbox:checked ~ .nav-menu {
		position: fixed;
		display: block;
		 -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
		background: rgb(255 96 0 / 90%);
		width: 100%;
		height: 100%;
    opacity: 1;
		z-index: 20;
		-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
  }

  .h_conarea-sp{display: none;}
.nav-menu-in{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.nav-area{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	width: 80%;
}
.nav-m-in{
}
.nav-left{width: 90%;}
.nav-right{
	width: 90%;
	margin-top: 1em;
}

.nav-m-in ul{
	color: #fff;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: column;
}
.nav-m-in.nav-left ul li{}
.nav-m-in ul.nav-clum2 {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
	padding: 1em 0;
}

.nav-m-in ul li a{
	position: relative;
	color: #ffffff;
	font-weight: 900;
	font-family: "M PLUS 1", sans-serif;
	padding: 1em 0em 1em 2.6em;
	display: table;
	text-align: left;
	letter-spacing: 0.2em;
	font-size: 1.2em;
	transition: all 0.3s ease-in-out;
}
.nav-m-in ul li a::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 2em;
	height: 1px;
	background: #fff;
	transition: all 0.3s ease-in-out;
}
.nav-m-in ul li a:hover{
	padding: 1em 0em 1em 3em;
	color: #000;
}
.nav-m-in ul li a:hover:before{
	    width: 2.4em;
			background: #000;
}
.nav-m-in ul.h-nav-in{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-left: 2%;
	}
.nav-m-in ul.h-nav-in > li{    margin-right: 3%;}
.nav-m-in ul.h-nav-in > li a{
	font-size: 0.9em;
	padding: 0.5em 0em 0.5em 1.6em;
}
.nav-m-in ul.h-nav-in > li a::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1em;
	height: 1px;
	background: #fff;
	transition: all 0.3s ease-in-out;
}
.nav-clum2{}
.nav-m-in ul.nav-clum2 li{
	width: 45%;
	border-bottom: none;
}
.nav-m-in ul.nav-clum2 li:first-child{
	margin-right: 2%;
}
.nav-m-in ul.nav-clum2 li a{
	display: block;
	background: #fff;
	color: #fc6a6e;
	text-align: center;
	font-size: 1em;
	padding: 1em;
	border-radius: 10px;
	transition: all 0.3s ease-in-out;
}
.nav-m-in ul.nav-clum2 li a::before{
	content: "";
	display: none;
}
.nav-m-in ul.nav-clum2 li a span{
	font-size: 0.8em;
	margin-left: 0.5em;
	letter-spacing: 0.1em;
}
.nav-m-in ul.nav-clum2 li a:hover{
	background:#000;
	color: #fff;
}
header .h-convarea ul.h-conv-sp{display:none;}


@media screen and (max-width: 1024px) {
	header {padding: 0.1em 0.5em;}
	header .logoarea {}
	header .logoarea a { align-items: center;}
	header .logoarea img {
    width: 35px;
    height: max-content;
}
header .logoarea .logotxt {
    margin-left: 0.3em;
    line-height: 1em;
}
header .logoarea .logotxt .catch {
    font-size: 0.5em;
    display: block;
}
header .logoarea .company {
    letter-spacing: 0;
    font-size: 0.8em;
}
header .h-convarea ul.h-conv-pc{display: none;}
header .h-convarea ul.h-conv-sp{
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}
header .h-convarea ul.h-conv-sp li{}
header .h-convarea ul.h-conv-sp li:first-child {
	margin-right: 0;
	border-right: 1px solid #fff;
}
header .h-convarea ul li a{
	width: 3em;
	min-width: 3em;
	border-radius: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
header .h-convarea ul li a::before{display: none;}
header .gNavarea {margin-left: 2%;}
.hamburger{
	height: 55px;
	width: 40px;
}
.hamburger .bar {width: 38px;}
.nav-menu-in {align-items: flex-end;}
.nav-area {
	width: 95%;
	padding-left: 5%;
}
.nav-left {width: 98%;}
	.nav-m-in ul li a{
		padding: 0.5em 0em 0.5em 2.6em;
		font-size: 1em;
	}
	.nav-m-in ul.nav-clum2 {margin-bottom: 0em;}
	.nav-m-in ul.nav-clum2 li {
		width: 100%;
	  margin-bottom: 10%;
	}

	.nav-m-in.nav-left ul li {width: 100%;}
	.nav-m-in ul.h-nav-in { margin-left: 5%;}
	.nav-m-in ul.h-nav-in > li{
		width: 49%;
		margin-right: 1%;
	}
	.nav-m-in ul.h-nav-in > li:nth-child(2n){
		margin-right: 0%;
	}
	.nav-right {width: 95%;}
	.nav-m-in ul.nav-clum2 li {width: 100%;	}
	.nav-m-in ul.nav-clum2 li:first-child {
		margin-right: 0;
		margin-bottom: 3%;
	}
	.nav-m-in .nav-clum2 li a span {
    font-size: 0.7em;
    margin-left: 0;
    display: block;
}
.nav-m-in ul.s-nav li {width: 25%;}

}

/* タイトル
------------------------------------------------------------ */

.ttl01{
	display: flex;
	align-items: center;
	position: relative;
	font-weight: 900;
	font-family: "M PLUS 1", sans-serif;
	font-size: 1.5em;
	letter-spacing: 0.1em;
}
.ttl01 .ttl-en{
	font-size: 2.3em;
	color: #ff8e50;
	margin-right: 4%;
	-webkit-text-stroke: 2px currentColor;
	letter-spacing: 0.1em;
}
.ttl01 .ttl-jp{
	font-size: 0.9em;
  letter-spacing: 0em;
  -webkit-text-stroke: 0.5px rgb(50 50 50);
}
.ttl02{
	position: relative;
	width: 100%;
	height: 180px;
}
.ttl02 h2{
	position: absolute;
	top: 5%;
	left: 0%;
	color: rgb(255 142 80 / 25%);
	font-size: 9em;
	font-weight: 900;
	font-family: "M PLUS 1", sans-serif;
	letter-spacing: 0.2em;
	transform: translate(-3%, -16%);
}
.ttl02 h3{
	font-weight: 900;
	font-family: "M PLUS 1", sans-serif;
	text-align: center;
	font-size: 2em;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.ttl03{
	display: flex;
	align-items: baseline;
	position: relative;
	font-weight: 900;
	font-family: "M PLUS 1", sans-serif;
	font-size: 1.5em;
	letter-spacing: 0.1em;
}
.ttl03 .ttl-en{
	font-size: 2.3em;
	background: linear-gradient(to right, #ff934c, #fc686f);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	margin-right: 1%;
	letter-spacing: 0.1em;
}
.ttl03 .ttl-jp{
	font-size: 1.6em;
	letter-spacing: 0em;
	-webkit-text-stroke: 0.5px rgb(50 50 50);
}
.under #mainimage .m-txt h2 {
    position: absolute;
    bottom: 6%;
    left: 5%;
    font-size: 3em;
    font-weight: 900;
    font-family: "M PLUS 1", sans-serif;
		letter-spacing: 0.1em;
    z-index: 2;
}
.under #mainimage .m-txt h2 span {
		display: inline-block;
    padding: 0.2em 1.5em 0.2em 0.5em;
    color: #fff;
    background: linear-gradient(to right, #ff934c, #fc686f);
		line-height: 1em;
}
.under #mainimage .m-txt h2 span:first-child {
	display: table;
	padding: 0.2em 2em 0.2em 0.5em;
}
.under #mainimage .m-txt h2 span:last-child {
	display: table;
	font-size: 0.8em;
}
.ttl04{}
.ttl05{}
.ttl06{}
@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
	.ttl01 .ttl-en {font-size: 2em;}
	.ttl01 .ttl-jp {font-size: 0.8em;}
	.ttl02 {
    height: 130px;
}
	.ttl02 h2 {
	    top: 0%;
	    left: 0%;
	    font-size: 3em;
	}
	.ttl02 h3 {
    font-size: 1.3em;
    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -70%);
    width: 100%;
}
.ttl03 { font-size: 1.2em;}
.ttl03 .ttl-en {font-size: 2em;}
.ttl03 .ttl-jp {font-size: 1.2em;}
.under #mainimage .m-txt h2 { font-size: 1.6em;}
.under #mainimage .m-txt h2 span:first-child { padding: 0.2em 1em 0.2em 0.5em;}
.under #mainimage .m-txt h2 span { padding: 0.2em 1em 0.2em 0.5em;}


}
/* ボタン
------------------------------------------------------------ */

.btn01 a{
	position: relative;
	display: block;
	min-width: 12em;
	padding: 0.5em;
	border: 1px solid #323233;
	border-radius: 10px;
	box-sizing: border-box;
	font-size: 1em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.2s ease-in-out;
}
.btn01 a:hover {
	color: #fff;
	background: #ff6000;
	border: 1px solid #ff6000;
}
.btn01 a::after {
    content: '';
    background: #ff6000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .4s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
}
.btn01 a:hover::after { transform: scale(1, 1);}

.btn02 a{
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 4em;
	height: 4em;
	border-radius: 50px;
	bottom: 3%;
	right: 5%;
	margin: auto;
	background: linear-gradient(to right, #ff934c, #fc686f);
	transition: 0.4s;
}
.btn02 a::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../img/common/arr-r02.png) 50% 50% no-repeat;
    background-size: contain;
	}
.btn02 a:hover{background: #fff;}
.btn02 a:hover::before {
    content: "";
    width: 20px;
    height: 20px;
    background: url(../img/common/arr-r.png) 50% 50% no-repeat;
    background-size: contain;
}
.btn03 a{
	width: 4em;
	height: 4em;
	border-radius: 50px;
	bottom: 3%;
	right: 5%;
	margin: auto;
	background: linear-gradient(to right, #ff934c, #fc686f);
	transition: 0.4s;
}
.btn03 a:hover{
	background: #fff;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
}
@media screen and (max-width: 520px) {
	.btn01 a{font-size: 0.9em;}
}

/* ぱんくずエリア
------------------------------------------------------------ */
.pankuzarea{
	margin-left: 7.5%;
	margin-bottom: 5%;
}
.pankuzarea ul{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.pankuzarea ul li::after{
	content: "＞";
	padding: 0 0.5em;
	color: #323232;
}
.pankuzarea ul li:last-child:after{
	content: "";
}
.pankuzarea ul li{color: #6a6e62;}

.pankuzarea ul li a{
	position: relative;
	color: #323232;
	transition: all 0.2s ease-in-out;
}
.pankuzarea ul li a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #323232;
bottom: -1px;
transform: scale(0, 1);
transform-origin: left top;
transition: transform 0.3s;
}
.pankuzarea ul li a:hover{
	color: #6a6e62;
}
.pankuzarea ul li a:hover::after {
transform: scale(1, 1);
transform-origin: right top;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
}
@media screen and (max-width: 520px) {
	.pankuzarea{
		margin: 0 auto 5%;
    font-size: 0.7em;
    width: 90%;
	}
}
/* ページネーション
------------------------------------------------------------ */
.archive .pagearea {
    width: 100%;
    margin: auto;
}
.archive .pagearea .pagearea-in{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
	width: 90%;
	margin: auto;
}
.archive .pagearea .pagearea-in .page-numbers{
  margin-right: 1em;
  margin-bottom: 1em;
}
.archive .pagearea .pagearea-in .page-numbers{
  display: block;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #979696;
  padding: 0.3em 1em;
  font-size: 1.2em;
  color: #979696;
  padding: 0.5em 1em;
  transition: all 0.3s ease-in-out;
}
.archive .pagearea .pagearea-in .page-numbers:hover{
  background: #6a6e62;
  color: #fff;
}
.archive .pagearea .pagearea-in .page-numbers.current{
  display: block;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #6a6e62;
  padding: 0.3em 1em;
  font-size: 1.2em;
  background: #6a6e62;
  color: #fff;
  padding: 0.5em 1em;
}
.detall .pagearea{
	width: 85%;
	margin: 0 auto 6em;
}
.detall .pagearea .pagearea-in{
	align-items: center;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.detall .pagearea .pagearea-in a{
	position: relative;
	font-family: myfont;
	font-size: 1.2em;
	color: #6a6e62;
	transition: all 0.3s ease-in-out;
}
.detall .pagearea .pagearea-in a:hover{
	color: #aaa;
}
.detall .pagearea .pagearea-in a.p-all{
	background: #6a6e62;
	padding: 0.2em 3em;
	color: #fff;
	border: 1px solid #6a6e62;
}
.detall .pagearea .pagearea-in a.prev{ padding-left: 1.3em;}
.detall .pagearea .pagearea-in a.prev::before{
	content: "";
    display: inline-block;
    position: absolute;
    margin: auto;
    color: #6a6e62;
    vertical-align: middle;
    line-height: 1;
    width: 0.5em;
    height: 0.5em;
    border: 0.13em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateX(25%) rotate(-135deg);
    top: 11px;
    left: 5px;
    transition: all 0.3s ease-in-out;
}
.detall .pagearea .pagearea-in a.prev:hover:before{
  left: 0px;
}
.detall .pagearea .pagearea-in a.next{ padding-right: 1.3em;}
.detall .pagearea .pagearea-in a.next::before{
	content: "";
	display: inline-block;
	position: absolute;
	margin: auto;
	color: #6a6e62;
	vertical-align: middle;
	line-height: 1;
	width: 0.5em;
	height: 0.5em;
	border: 0.13em solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	transform: translateX(10%) rotate(45deg);
	top: 12px;
	right: 10px;
	transition: all 0.3s ease-in-out;
}
.detall .pagearea .pagearea-in a.p-all:hover{
	background: #fff;
	color: #6a6e62;
}
.detall .pagearea .pagearea-in a.next:hover:before{
	right: 5px;
}


@media screen and (min-width:521px) and ( max-width:1024px) {
}
@media screen and (max-width: 520px) {
	.detall .pagearea{
		width: 95%;
		margin: 0 auto 6em;
	}
}
@media screen and (max-width: 375px) {
}


/* 外部サイト　external
------------------------------------------------------------ */
.external .contents{
padding: 0 clamp(30px, calc(80 / 1800 * 100vw), 80px);
position: relative;
width: 100%;
}
.external .exarea-in{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.external .exarea-in .exbox{
position: relative;
width: 45%;
border-radius: 20px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
transition: .4s ease;
}
.external .exarea-in .exbox:first-child{}
.external .exarea-in .exbox a{
padding: 2em 1.6em 6em 1.6em;
display: block;
transition: 0.4s
}
.external .exarea-in .exbox a:hover{
background: #ededed;
border-radius: 20px;
}
.external .exarea-in .exbox a .img{
position: relative;
overflow: hidden;
margin: 0;
aspect-ratio: 1 / 0.5;
}
.external .exarea-in .exbox a .img img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.external .exarea-in .exbox a:hover .img img{ transform: scale(1.06);}
.external .exarea-in .exbox .txt{
margin-top: 1em;
min-height: 8em;
}
.external .exarea-in .exbox .txt h3{
font-weight: 900;
font-family: "M PLUS 1", sans-serif;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
}
.external .exarea-in .exbox a .btn02-2{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 4em;
height: 4em;
border-radius: 50px;
bottom: 3%;
right: 5%;
margin: auto;
background: linear-gradient(to right, #ff934c, #fc686f);
transition: all 0.3s ease-in-out;
}
.external .exarea-in .exbox a .btn02-2::before{
	content: "";
	width: 20px;
	height: 20px;
	background: url(../img/common/linkicon02.png) 50% 50% no-repeat;
	background-size: contain;
}
.external .exarea-in .exbox a:hover .btn02-2{
	background: #fff;
}
.external .exarea-in .exbox a:hover .btn02-2::before{
		content: "";
		width: 20px;
		height: 20px;
		background: url(../img/common/linkicon03.png) 50% 50% no-repeat;
		background-size: contain;
}

.external .rentalarea{
background: #ececec;
padding: 6em 0;
}
.external.rental .ttl04 {color: #505050;}
.external .rentalarea-in {
	margin: auto;
	padding: 3em 0;
}
.external .rentalarea .clum03 li {margin-bottom: 5%;}
.external .rentalarea .clum03 li a {
	text-align: center;
	transition-duration: 0.6s;
}
.external .rentalarea .clum03 li a:hover{ color: #989898;}
.external .rentalarea a .w-img figure {
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: #000;
}
.external .rentalarea .clum03 li figure {margin: 0.2%;}
.external .rentalarea a .w-img figure img {
	display: block;
	transition-duration: 0.6s;
}
.external .rentalarea a:hover .w-img figure img{
transform: scale(1.1);
transition-duration: 0.6s;
opacity: 0.5;
}
.external .rentalarea .clum03 li .catlist{
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 font-size: 0.8em;
 width: 95%;
 margin: 0 auto 0.3em;
}
.external .rentalarea .clum03 li .catlist p{
	padding: 0.5em 2em;
	background: #636e4c;
	font-size: 1.1em;
	font-weight: bold;
	color: #fff;
	margin: 1em auto 0.5em;
}
.external .rentalarea .clum03 li .catlist p.space{background: #636e4c;}
.external .rentalarea .clum03 li .catlist p.gallery{background: #ce9712;}
.external .w-txt .title {
	width: 95%;
	margin: auto;
}
.external .rentalarea .btn02 {
	margin: auto;
	width: 100%;
	text-align: center;
	padding: 2em 0 0em;
}
@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
.external .contents {
	padding: 0 clamp(10px, calc(80 / 1800 * 100vw), 80px);
	position: relative;
	width: 100%;
}
	.external .exarea-in .exbox {width: 100%;}
	.external .exarea-in .exbox:first-child { margin-bottom: 15%;}
	.external .exarea-in .exbox a {padding: 1.5em 0.5em 6em 0.5em;}
	.external .exarea-in .exbox .txt p{font-size: 0.9em;}

}
@media screen and (max-width: 375px) {
}
/* コンバージョン
------------------------------------------------------------ */
#conversion { padding: 6em 0;}
#conversion .convarea{
	width: 94%;
	padding: 1em 1em 3em 1em;
	margin: auto;
	background: #fff;
	border-radius: 20px;
}
#conversion .ttl04{color: #505050;}
#conversion ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 1em 0 0;
}
#conversion .convarea-in li{
	position: relative;
	width: 28%;
}
#conversion .convarea-in li:first-child{margin-right: 2%;}
#conversion .convarea-in li a{
	position: relative;
	display: block;
	border: 1px solid #ff924e;
	padding: 1em 0;
	text-align: center;
	color: #ff924e;
	font-weight: 900;
	font-family: "M PLUS 1", sans-serif;
	letter-spacing: 0.1em;
	border-radius: 12px;
	transition: all 0.3s ease-in-out;
}
#conversion .convarea-in li a:hover{
	background: #ff924e;
  color: #FFF;
}
#conversion .convarea-in li span{
text-align: center;
display: block;
font-size: 0.9em;
margin-top: 0.5em;
}
#conversion .convarea-in li:first-child a::before{
	content: "";
	position: absolute;
	top: 30%;
	left: 5%;
	width: 30px;
	height: 28px;
	background: url(../img/common/tellicon03.png) 50% 50% no-repeat;
	background-size: contain;
	transition: all 0.4s ease-in-out;
}
#conversion .convarea-in li:first-child a:hover:before{
	content: "";
	background: url(../img/common/tellicon02.png) 50% 50% no-repeat;
	background-size: contain;
}
#conversion .convarea-in li:nth-child(2) a::before{
	content: "";
	position: absolute;
	top: 25%;
	left: 5%;
	width: 30px;
	height: 28px;
	background: url(../img/common/mailicon03.png) 50% 50% no-repeat;
	background-size: contain;
	transition: all 0.4s ease-in-out;
}
#conversion .convarea-in li:nth-child(2) a:hover:before{
	content: "";
	background: url(../img/common/mailicon02.png) 50% 50% no-repeat;
	background-size: contain;
}
#conversion li a .txt{transition: all 0.3s ease-in-out;}
#conversion li a:hover .txt{
}
@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
	#conversion .convarea {
	    width: 95%;
	    padding: 1em 1em 2em 1em;
	}
	#conversion .convarea .titlearea .ttl03{
		font-size: 1.2em;
		flex-direction: column;
		line-height: 2.1em;
	}
		#conversion .convarea .titlearea .ttl03 .ttl-jp{ letter-spacing: 0.3em;}
	#conversion .convarea .titlearea p{font-size: 0.9em;}

	#conversion ul {padding: 2em 0 0;}
	#conversion .convarea-in li {
		    width: 100%;
		    margin-bottom: 0.5em;
	}
	#conversion .convarea-in li:first-child {margin-right: 0%;}
	#conversion .convarea-in li a {padding: 0;}
	#conversion li:last-child { margin-bottom: 0em;}
	#conversion li a .txt {
			padding: 1.2em 0 0;
			min-height: 4em;
	}
#conversion li a .m-icon, #conversion li a .t-icon {
    top: 15%;
    left: 10%;
}

}

/* フッター
------------------------------------------------------------ */
footer{
	position: relative;
	min-height: 1500px;
}
#footer{}
.footer-bg {
	min-height: 1500px;
    position: relative;
    overflow: hidden;
		display: flex;
    flex-direction: column;
}
.footer-bg::before {
    content: "";
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    background: url("/assets/img/common/bg.jpg") center / cover no-repeat;
		transform: translateY(var(--parallax-y, 0));
		z-index: -1;
}
.footerArea{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	background: rgb(0 0 0 / 65%);
	padding: 4em 2em 0em;
	margin-top: auto;
	color: #fff;
}

.footerabout{
	width: 30%;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 320px;
	justify-content: space-between;
	border-right: 1px solid #fff;
	padding: 1em 0;
}
.footerabout .spec-nav{
	margin-bottom: 2em;
  line-height: 1.5em;
}
.footerabout .footerabout-txt dt{
	min-width: 4em;
}
.footerabout .logoimage{}
.footerabout .logoimage a{
	display: flex;
  align-items: center;
	color: #fff;
	font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho", "MS PMincho", serif;
	}
.footerabout .logoimage a img{ width: 12%;}
.footerabout .logoimage a .logotxt{margin-left: 3%;}
.footerabout .logoimage a .logotxt .catch{
	font-size: 0.7em;
  display: block;
	}
.footerabout .logoimage a .logotxt .company{
	font-size: 1.2em;
}
.footerabout .footerabout-txt dl{
	display: flex;
}
.footerabout .footerabout-txt dl dt{
	width: 5em;
	flex-shrink: 0;
	text-align: justify;
	text-align-last: justify;
	position: relative;
	padding-right: 1em;
}
.footerabout .footerabout-txt dl dt::after{
	content: "：";
	position: absolute;
	right: 0;
}
.footerabout .footerabout-txt dl dd{ margin-left: 0.3em;}
.footernavi {
	position: relative;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 65%;
	padding: 3em 0 2em;
}
.footernavi{ }
.footernavi ul.f-nav{}
.footernavi ul.f-nav > li {padding-bottom: 1em;}
.footernavi ul.f-nav-in {margin-top: .3em;}
.footernavi ul.f-nav-in > li {
    padding-bottom: .2em;
    position: relative;
    padding-left: 1em;
}
.footernavi ul.f-nav-in > li::before {
    content: "-";
    position: absolute;
    left: 0;
}
.footernavi ul.f-nav li::before{}
.footernavi ul.f-nav li a{
	position: relative;
	color: #fff;
	font-size: 0.9em;
	font-weight: bold;
}
.footernavi ul.f-nav li a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #fff;
bottom: -1px;
transform: scale(0, 1);
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}

.footernavi ul.f-nav li a:hover::after {
transform: scale(1, 1);      /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: right top; /*右から左に向かう*/
}
.footerabout{}
.f-snsarea{
	width: 50px;
	margin: auto;
	padding: 3em 0;
	text-align: center;
}
.f-snsarea a{transition: all 0.3s ease-in-out;}
.footerabout .f-ttl{
	width: 120px;
	margin: auto;
	text-align: center;
	}
.footerabout ul.spec-nav {
	color: #fff;
	font-size: 0.9em;
	text-align: center;
	margin: auto;
  padding: 3em 0 6em;
	}

footer .copy{
	width: 100%;
	padding: 5em 0 0.5em;
	text-align: center;
	font-size: 0.7em;
}

@media screen and (min-width:521px) and ( max-width:1024px) {}
@media screen and (max-width: 520px) {
	#footer{}
	.footer-bg {}
	.footerArea {
    padding: 2em 1em 0em;
}

.footernavi {
	justify-content: flex-start;
	width: 100%;
	padding: 2em 0 0em;
}
.footernavi ul.f-nav {
	width: 100%;
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
}
.footernavi ul.f-nav:first-child > li {
	width: 48%;
}
.footernavi ul.f-nav:first-child > li:first-child{
	width: 100%;
}
.footernavi ul.f-nav > li {
    padding-bottom: 1em;
}
.footernavi ul.f-nav-in {
    margin-top: .3em;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.footernavi ul.f-nav-in > li {
    padding-bottom: .2em;
    position: relative;
    padding-left: 1em;
    margin-right: 1em;
}
.footerabout {
		width: 100%;
		min-height: 290px;
    padding: 0;
    border-right: none;
		justify-content: flex-start;
		border-bottom: 1px solid #fff;
}
.footerabout-txt{ margin: 3% 0;}
.footerabout-in {}
.footerabout-in .f-ttl {
	position: relative;
	width: 35%;
	text-align: center;
	margin: auto;
	}
.footerabout ul.spec-nav {
	    margin-top: 1em;
			padding: 1em 0 3em;
	    font-size: 0.8em;
	    text-align: center;
	}

	footer .copy {}

}

/* topへ戻る
------------------------------------------------------------ */
  #page_top{
		text-align: end;
		position: fixed;
		bottom: 45%;
		right: 3%;
		opacity: 0;
		visibility: hidden;
		transition: opacity .4s, visibility .4s;
}
#page_top.is-show {
    opacity: 1;
    visibility: visible;
		z-index: 9;
}
  #page_top a {
		position: relative;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		border: 1px solid #ff904e;
		background: linear-gradient(to right, #ff934c, #fc686f);
		display: flex;
		justify-content: center;
		color: #fff;
}
  #page_top a:hover{
		color: #ff904e;
		background: #fff;
	}
	 #page_top a .page-top-text{
			position: absolute;
			bottom: 15%;
			font-weight: bold;
			letter-spacing: 0.1em;
	 }
  #page_top a::before {
		content: "";
    position: absolute;
		top: 22%;
    width: 28px;
    height: 20px;
    background: url(../img/common/arr-u02.png) 50% 50% no-repeat;
    background-size: contain;
    transition: all 0.4s;
}
  #page_top a:hover:before {
			content: "";
			background: url(../img/common/arr-u03.png) 50% 50% no-repeat;
			background-size: contain;
	}

  #page_top a::after {}
  #page_top a:hover:after {}

	@media screen and (min-width:521px) and ( max-width:1024px) {}
	@media screen and (max-width: 520px) {
		#page_top { bottom: 5%;}
		#page_top a {
		    width: 55px;
		    height: 55px;
				font-size: 0.8em;
		}
		#page_top a::before {
    content: "";
    top: 10%;
    width: 16px;
    height: 12px;
}
#page_top a .page-top-text {bottom: 24%;}

	}