@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
  --height: 266;
  --scale: 623.328004;
  --longside: 523;
  --bezier: cubic-bezier(0.4, 0.16, 0.34, 0.94);
}

body {
  font-family: Helvetica Neue,Helvetica,Arial,Verdana,Roboto,"游ゴシック",Yu Gothic,"游ゴシック体",YuGothic,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,Meiryo UI,"メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS PGothic,sans-serif;
  font-size: 1.4rem;
  color: #413b32;
  font-weight: 600;
  position: relative;
  line-height: 1;
  letter-spacing: .1em;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  background: #fff;
}

/*見出し*/
.head-wrap {
  margin-bottom: 50px;
}
.head-ttl {
  font-weight: 600;
  font-size: 3pc;
  line-height: 56px;
  letter-spacing: 0.024em;
  text-align: center;
  margin-bottom: 8px;
}
.head-txt {
  font-size: 1pc;
  line-height: 28px;
  text-align: center;
}

/* マウスストーカー */
#stkr{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 40px;
  /*background: rgba(0, 0, 0, 0.5);*/
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  transition: 0.2s;
  transition-timing-function: ease-out;
  pointer-events: none;
  z-index: 999;
}

ul {
  list-style: none;
}
.ja {
  font-family: "游ゴシック",Yu Gothic,"游ゴシック体",YuGothic,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,Meiryo UI,"メイリオ",Meiryo,"ＭＳ Ｐゴシック",MS PGothic,sans-serif
}
.en {
  font-family: "Montserrat", sans-serif;
}
.moderat {
  font-family: "Moderat_Regular";
  display: block;
}
.jp-txt {
  font-family: 'Noto Serif JP', serif;
}

.garyu-in {
  padding: 0 20%;
  box-sizing: border-box;
}
.garyu-title {
  position: relative;
  font-size: 4vw;
  font-weight: 700;
  line-height: 1.1;
}
.garyu-title .ol {
  display: block;
  text-align: left;
}
.garyu-title .ol strong {
  font-size: 24px;
}
section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 0;
}

p {
  font-size: 14px;
}
a {
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
a,span {
  color: #413b32;
}
ul {
  padding: 0;
  margin: 0;
}
h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  margin: 0rem 0 2rem;
  letter-spacing: 2px;
}


h3 {
  font-size: 16px;
  margin: 0;
}
.link-area {
  margin: 0 auto;
}
.btn {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0 50px 0 38px;
  color: #f9f8f7;
  background: #111;
  border: #111 1px solid;
  font-size: 15px;
  font-family: "Moderat_Regular";
  font-weight: normal;
  line-height: 55px;
  letter-spacing: 0.075em;
  text-align: center;
  text-decoration: none;
  position: relative;
  z-index: 1;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.btn:before {
  position: absolute;
  top: 0px;
  right: 11px;
  z-index: 2;
  font-family: 'themify';
  content: "\e649";
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn:hover {
  background: #f9f8f7;
  color: #111;
}


.btn-wrap  {
  width: 540px;
  line-height: 100px;
}

.btn-wrap .stkr-target {
  display: block;
  position: relative;
  z-index: 1;
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.4em;
}
.btn-wrap .stkr-target span {
  display: block;
  position: relative;
  z-index: 2;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -webkit-font-smoothing: subpixel-antialiased;
  transition: all 0.3s ease 0s;
}
.btn-wrap .stkr-target:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 6px solid #000;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  transform-origin: 0 50% 0;
}
.btn-wrap .stkr-target span:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 85%;
  width: 27px;
  height: 7px;
  margin: auto;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: url(https://www.dot-st.com/static/docs/jeanasis/pages/media/img/common/new/icon_arrowRight-white.png) 87% center no-repeat;
  background-size: 100%;
  content: "";
}
.btn-wrap .stkr-target:after {
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
}

.btn-wrap .stkr-target:hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: -webkit-transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
    -webkit-transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.btn-wrap .stkr-target:hover span {
  color: #000;
}

.btn-wrap .stkr-target:hover span:after {
  background: url(https://www.dot-st.com/static/docs/jeanasis/pages/media/img/common/new/icon_arrowRight-black.png) 87% center no-repeat;
  background-size: 100%;
}




.title {
	text-align: center;
	font-size: 2.6rem;
	color: #413b32;
	line-height: 1.3;
	letter-spacing: .2em;
}
.title .jp-txt {
  font-size: 16px;
}
.en {
  display: block;
  line-height: 1.2;
  font-size: 48px;
  font-weight: 500;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: .05em;
}
.part-ttl02>* {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 30px;
}
.parag {
  line-height: 2;
  font-size: 16px;
}
.btn .label-default {
  color: #fff;
}

.text-body-secondary {
  color: #413b32 !important;
}
.top-bar {
  background: #413b32;
  color: #fff;
  text-align: center;
  padding: 5px;
}
.container {
  max-width: 1320px;
}
.pickup-wrap .label-default {
  color: #413b32;
}
/*ヒーローイメージ*/


.hero-image {
  max-width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 100px;
}
.hero-image video {
  /*width: 100%;*/
  width: 1400px;
  margin: 0 auto;
}

.hero-image .main-wrap {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  opacity: 1; /* 初期状態で表示 */
  transition: opacity 1s ease; /* フェードの効果を1秒で設定 */
}
.hero-image .main-wrap.hidden {
  opacity: 0; /* 非表示状態 */
}
.hero-image .main-wrap .main-title {
  font-family: Archivo, sans-serif;
  letter-spacing: .05em;
  text-align: center;
}
.hero-image .main-wrap .main-title span {
  display: block;
}
.hero-image .main-wrap .main-title .t1 {
  font-size: 4vw;
  letter-spacing: .08em;
  color: #fff;
  margin-bottom: 10px;
}
.hero-image .main-wrap .main-title .t2 {
  font-size: 2vw;
  letter-spacing: .05em;
  color: #fff;
}
.hero-image .main-wrap .main-title .t3 {
  font-size: 4vw;
  letter-spacing: .05em;
  color: #fff;
}
.hero-image .main-wrap .main-title .t4 {
  font-size: 4vw;
  letter-spacing: .05em;
  color: #fff;
}


/*ヘッダー下のキャッチ*/
.crafting-title {
  background: #fff;
}
.service-craft ul {
  display: flex;
  justify-content: space-between;
}
.service-craft ul li {
  width: calc((100% / 4) - 10px);
  background: #fff;
  padding: 40px 15px;
  border-radius: 5px;
}

.service-craft ul li img {
  width: auto;
  margin: 0 auto 30px;
}
.service-craft ul li h3 {
  color: #f38300;
  font-size: 20px;
  text-align: center;
  margin-bottom: 15px;
}
.service-craft ul li p {
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}


/*craft*/

@media screen and (min-width: 1280px) {

	.mainContents {
		position: relative;
		overflow: hidden;
	}

	/*.mainContents::after {
		position: absolute;
		content: "";
		top: auto;
		bottom: 0;
		right: 0;
		left: auto;
		width: calc((((1440px - (var(--wcalc-gap) * 9)) / 10) * 9) + (var(--wcalc-gap) * 8) + ((100vw - var(--scrollbar-width) - 1440px) / 2));
		height: calc(100% - 60px);
		background-color: #f7f5f2;
		border-radius: 5px 0 0 5px;
		z-index: 0;
	}*/

}


.crafting-wrap {
	position: relative;
	margin-bottom: 20px;
	padding: 30px 0;
	z-index: 1;
}

.crafting-wrap:last-child {
	margin-bottom: 0;
}

.crafting-wrap::after {
	position: absolute;
	content: "";
	width: calc(100% - 25px);
	height: 100%;
	background-color: #f7f5f2;
	border-radius: 5px 0 0 5px;
	top: 0;
	left: 50px;
	z-index: -1;
}

@media screen and (min-width: 768px) {

	.crafting-wrap {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.crafting-wrap::after {
		width: calc(100vw - var(--scrollbar-width) - 50px - 50px);
	}

}

@media screen and (min-width: 1280px) {

	.crafting-wrap {
		display: flex;
		justify-content: space-between;
		margin-bottom: 0;
		padding: 20px 0 45px;
	}

	.crafting-wrap::after {
		display: none;
	}

	.crafting-wrap.sub {
		padding-top: 0;
		padding-bottom: 50px;
	}

}



.crafting-item {
	margin-bottom: 20px;
}

.crafting-item:last-child {
	margin-bottom: 0;
}

@media screen and (min-width: 768px) {

	.crafting-item {
		width: calc(50% - 10px);
	}

}

@media screen and (min-width: 1280px) {

	.crafting-item {
		position: relative;
		margin-bottom: 0;
	}

	.crafting-item.-ambulatory      {--bgc: #77bd31;}
	.crafting-item.-hospitalization { --bgc: #6fbdde; }
	.crafting-item.-check-up        { --bgc: #a799fc; }
	.crafting-item.-rehabilitation  { --bgc: #fb8c96; }
	.crafting-item.-service         { --bgc: #fba64a; }

	.main .crafting-item {
		width: calc((((100% - (40px * 9)) / 10) * 3) + (40px * 1));
	}

	.sub .crafting-item {
		width: calc(33.33% - ((40px * 2) / 3));
	}


	.main .crafting-item:nth-child(even)::after {
		top: 180px;
	}

	/* safari はblurの負荷がかかりすぎるので表示しない */
	.is_safari .main .crafting-item::after {
		display: none;
		content: none;
	}
}



.mainContents__anchor {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: rgba(255,255,255,1);
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 8px 8px 20px rgba(0,0,0,.1);
	transition: box-shadow 0.2s ease;
}

.mainContents__anchor:hover {
	box-shadow: 2px 2px 8px rgba(0,0,0,.15);
	transition-duration: 0.2s;
}

.sub .mainContents__anchor {
	position: relative;
	z-index: 1;
}

.mainContents__hoverelm {
	display: none;
}

@media screen and (min-width: 1280px) {


	.-loaded a.mainContents__anchor:hover {
		color: #fff;
	}
  .-loaded a.mainContents__anchor:hover span {
    color: #fff;
  }

	/* ---------------------------------------- */

	.main .mainContents__anchor {
		display: block;
		z-index: 2;
		height: 100%
	}

	/* ブラウザの拡大表示を行うとscaleで拡大させるとChromeなどでずれるためtransformでの拡大を使用しない方法に変更 */
	.mainContents__hoverelm {
		position: absolute;
		inset: 0 -100%;
		display: block;
		width: calc(var(--scale) * 1px);
		height: calc(var(--scale) * 1px);
		margin: auto;
		z-index: 1;
		mix-blend-mode: multiply;
	}

	.mainContents__hoverelm::before,
	.mainContents__hoverelm::after {
		position: absolute;
		inset: 0;
		margin: auto;
		display: block;
		background-color: var(--bgc);
		width: 0;
		height: 0;
		border-radius: 100%;
		transition: 0.4s cubic-bezier(.77,0,.18,1);
		transition-property: opacity, translate, width, height;
		z-index: 2;
		opacity: 0;
		content: "";
	}

	.mainContents__anchor:hover .mainContents__hoverelm::before,
	.mainContents__anchor:hover .mainContents__hoverelm::after {
		width: calc(var(--scale) * 1px);
		height: calc(var(--scale) * 1px);
		transition-duration: 0.4s;
		transition-timing-function: cubic-bezier(.19,1,.22,1);
		translate: 0 0;
	}

	.mainContents__anchor:hover .mainContents__hoverelm::before {
		opacity: 0.5;
	}

	.mainContents__anchor:hover .mainContents__hoverelm::after {
		opacity: 0.8;
		transition-duration: 0.8s;
		transition-delay: 0.2s;
	}

	/* ---------------------------------------- */

	.sub .mainContents__anchor {
		height: 120px;
	}

	.sub .mainContents__anchor:hover {
		color: #fff;
	}

	.sub .mainContents__anchor::before {
		position: absolute;
		inset: 0;
		left: calc((var(--longside) - var(--scale)) / 2 * 1px);
		width: 0;
		height: 0;
		border-radius: 50%;
		margin: auto;
		background-color: var(--color-link);
		transition: 0.4s cubic-bezier(.77,0,.18,1);
		transition-property: opacity, translate, width, height;
		z-index: 2;
		opacity: 0;
		content: "";
	}

	.sub .mainContents__anchor:hover::before {
		width: calc(var(--scale) * 1px);
		height: calc(var(--scale) * 1px);
		opacity: 1;
		transition-duration: 0.8s;
		transition-timing-function: cubic-bezier(.19,1,.22,1);
	}

}



.mainContents__img {
	position: relative;
	width: 90px;
	height: 90px;
	overflow: hidden;
	z-index: 1;
}

.mainContents__img img {
	width: 100%;
	vertical-align: bottom;
	transition: transform 1s cubic-bezier(.17,.84,.44,1);
}

.mainContents__img-fg {
	display: none;
}

@media screen and (min-width: 768px) {

	.mainContents__img {
		width: 110px;
		height: 110px;
	}

}

@media screen and (min-width: 1280px) {

	.mainContents__img {
		width: 100%;
		height: 256px;
		background-color: #77bd31;
	}

	.mainContents__img img {
		object-fit: cover;
	}

	.-loading .mainContents__img img {
		opacity: 0;
	}

	.-loaded .mainContents__img img {
		opacity: 1;
		transition-delay: 0s, 1s;
		transition-property: transform, opacity;
	}

	.no-object-fit .mainContents__img img {
		height: auto;
	}

	a:hover .mainContents__img img {
		transform: scale(1.1);
	}

	.mainContents__img-fg {
		position: absolute;
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		display: block;
		width: calc(100% - 40px);
		height: 50px;
		margin: auto;
		border-radius: 10px 10px 0 0;
		padding: 20px 15px 0;
		background-color: #fff;
		box-sizing: border-box;
		
		--w: 20px;
	}

	.mainContents__img-fg::before,
	.mainContents__img-fg::after {
		position: absolute;
		content: "";
		display: block;
		width: var(--w);
		height: var(--w);
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		bottom: 0%;
	}

	.mainContents__img-fg::before {
		left: calc(var(--w) * -1);
		background-image: var(--round-out-corner-RB);
	}

	.mainContents__img-fg::after {
		right: calc(var(--w) * -1);
		background-image: var(--round-out-corner-LB);
	}

	.mainContents__img-fg {
		
	}

	.mainContents__indicator {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 25px;
		height: 25px;
		margin: auto;
		opacity: 1;
		z-index: 1;
	}

	.-loaded .mainContents__indicator {
		opacity: 0;
		transition: opacity 0.5s ease-out 0.5s;
	}

	.mainContents__indicator__inner {
		position: absolute;
		top: -24px;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		display: block;
		margin: auto;
		z-index: 9999;
		background-image: url(/common/images/indicator_w.png);
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 25px 300px;
		animation: indicatorAnimation 0.75s steps(12) infinite;
	}

}



.mainContents__txt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 90px);
	height: 90px;
	padding: 10px;
	padding-left: 20px;
	box-sizing: border-box;
	transition: color .5s cubic-bezier(.65,.05,.36,1);
	z-index: 2;
}

@media screen and (min-width: 768px) {

	.mainContents__txt {
		width: calc(100% - 110px);
		height: 110px;
	}

}

@media screen and (min-width: 1280px) {

	.mainContents__txt {
		height: 100%;
	}

	.main .mainContents__txt {
		position: relative;
		flex-direction: column;
		width: 100%;
		height: auto;
		padding: 55px 15px 25px;
		z-index: 3;
	}

	.main a:hover .mainContents__txt::after {
		width: 100%;
	}

	.sub .mainContents__txt {
		width: calc(100% - 100px);
		padding: 0;
	}

}



.mainContents__ttl {
	text-align: left;
}

.mainContents__ttl span {
	display: block;
}

.mainContents__ttl .ja {
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.4;
}

.mainContents__ttl .en {
	font-size: .8rem;
	font-family: 'Open Sans', sans-serif;
	margin-top: 5px;
	opacity: 0.6;
}


@media screen and (min-width: 768px) {

	.mainContents__ttl .ja {
		font-size: 1.6rem;
	}

}

@media screen and (min-width: 1280px) {

	.main .mainContents__ttl {
		text-align: center;
	}

	.mainContents__ttl .ja {
		font-size: 1.1rem;
	}

}


.mainContents__des {
	display: none;
	margin-top: 10px;
	padding: 10px;
	text-align: center;
	font-feature-settings: "palt";
	line-height: 1.8;
}

.mainContents__des > * {
	margin-top: 10px;
}

.mainContents__des > *:first-child {
	margin-top: 0;
}


@media screen and (min-width: 768px) {

	.mainContents__des {
		
	}

}

@media screen and (min-width: 1280px) {

	.mainContents__des {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		min-height: calc(3em * 1.8);
		box-sizing: border-box;
	}

}



.mainContents__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 90px;
	height: 90px;
	z-index: 2;
	border-right: 0.6px solid rgba(0,0,0,0.2);
	box-sizing: border-box;
}

.mainContents__icon .icon {
	position: relative;
	stroke-width: 0.8;
	z-index: 1;
}

.mainContents__icon svg {
	width: 36px;
	height: 36px;
}

.mainContents__icon svg .color_1 {
	stroke: #4B5663;
	transition: stroke .4s cubic-bezier(.65,.05,.36,1);
}

.mainContents__icon svg .color_2 {
	stroke: #768EC6;
	transition: stroke .4s cubic-bezier(.65,.05,.36,1);
}

.main .mainContents__icon {
	display: none;
}

@media screen and (min-width: 768px) {

	.mainContents__icon {
		width: 110px;
		height: 110px;
	}

	.mainContents__icon .icon {
		stroke-width: 0.6;
	}

	.mainContents__icon svg {
		width: 70px;
		height: 70px;
    margin-left: 13px;
	}

}

@media screen and (min-width: 1280px) {

	.mainContents__icon {
		width: 100px;
		height: 100%;
		border-right: none;
	}

	a:hover .mainContents__icon svg .color_1,
	a:hover .mainContents__icon svg .color_2 {
		stroke: #fff;
	}

	.mainContents__icon::before {
		content: "";
		position: absolute;
		inset: 0;
		width: 0px;
		height: 0px;
		margin: auto;
		border-radius: 100%;
		background-color: #4769b7;
		transition: 0.4s cubic-bezier(.77,0,.18,1);
		transition-property: opacity, translate, width, height;
		z-index: 1;
		opacity: 0;
	}

	a:hover .mainContents__icon::before {
		width: 80px;
		height: 80px;
		opacity: 1;
		transition-duration: 0.8s;
		transition-delay: 0.2s;
		transition-timing-function: cubic-bezier(.22,1.42,.35,.99);
	}

	.main .mainContents__icon {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		transform: translateY(-50%);
		display: block;
		height: auto;
		margin: auto;
		transition: 0.4s cubic-bezier(.77,0,.18,1);
	}

	.main .mainContents__icon::before {
		background-color: var(--bgc);
	}

	.main a:hover .mainContents__icon {
		color: var(--bgc);
	}

	.main a:hover .mainContents__icon::before {
		background-color: #fff;
		transition-delay: 0.4s;
	}

}




.mainContents__more {
	display: flex;
	align-items: center;
}

.mainContents__more .lbl {
	font-size: .8rem;
	padding-right: 40px;
	opacity: 0;
	transition: 0.5s cubic-bezier(.77,0,.18,1);
	transition-property: opacity, transform;
	display: none;
}

.mainContents__more .icon {
	width: 24px;
	height: 24px;
}

@media screen and (min-width: 1280px) {

	.mainContents__more {
		position: relative;
		height: 24px;
	}

	.main .mainContents__more {
		margin-top: 10px;
	}

	.mainContents__more .icon {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
		transition: transform 0.5s cubic-bezier(.77,0,.18,1);
		stroke-width: 1.3;
    line-height: 1.6;
	}

	.sub .mainContents__more .icon {
		left: auto;
		right: 20px;
	}

	.mainContents__more .lbl {
		display: block;
		transform: translateX(1em);
	}

	a:hover .mainContents__more .lbl {
		opacity: 1;
		transform: translateX(0);
	}

	.main a:hover .mainContents__more .icon {
		transform: translateX(30px);
	}

}



/*craft*/




/*plan*/
.plan-wrap {
  background: #fff;
}
.journal {
  position: relative;
  max-width: 1200px;
  margin: 0 auto 0;
  padding-bottom: 150px;
}
.journal__title,
.latest__titleWrap {
  position: absolute;
  z-index: -1;
}
.journal .btn-wrap {
  margin: 0 auto;
}
.latest__titleWrap {
  z-index: 1;
  top: 0;
  left: 40px;
}

.latest__title {
  margin-bottom: 25px;
  writing-mode: vertical-rl;
  font-size: 46px;
  color: #000;
  font-weight: 700;
}

.journal__title {
  top: 42%;
  left: 0;
  margin: auto;
  text-align: center;
}

.latestNewsList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto 95px;
  list-style: none;
}

.latestNewsList li {
  width: 32.2%;
  opacity: 0;
}

.latestNewsListWrap .latestNewsList li {
  opacity: 1;
}

.latestNewsList a {
  display: block;
  position: relative;
}

.latestNewsList img {
  display: block;
  width: 100%;
  z-index: 0;
  -webkit-transition: -webkit-transform 10s linear 0s;
  transition: -webkit-transform 10s linear 0s;
  transition: transform 10s linear 0s;
  transition: transform 10s linear 0s, -webkit-transform 10s linear 0s;
}


.latestNewsList__img {
  position: relative;
  margin-bottom: 7px;
  overflow: hidden;
  z-index: 0;
}

.latestNewsList .latestNewsList__title {
  display: block;
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 5px;
  font-size: 18px;
  letter-spacing: 0.04em;
  word-break: break-word;
  word-wrap: break-word;
}

.latestNewsList .latestNewsList__title:after {
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: #000;
  content: "";
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: -webkit-transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
    -webkit-transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.latestNewsList a:hover .latestNewsList__title:after {
  -webkit-transform-origin: 100% 50% 0;
  transform-origin: 100% 50% 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: -webkit-transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
    -webkit-transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.latestNewsList__read {
  display: block;
}

.latestNewsList__read span {
  display: inline-block;
  position: relative;
  padding-right: 18px;
  background: url(/static/docs/jeanasis/pages/media/img/fashion/btn_backnumber.png) right 2px no-repeat;
  background-size: 10px;
  font-weight: 900;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: -webkit-transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  transition: transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
    -webkit-transform 0.45s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.latestNewsList a:hover .latestNewsList__read span {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

.arrowIcon.active {
  display: block;
  position: relative;
  width: 10px;
  height: 10px;
  margin: 17px auto 0;
  opacity: 0;
  -webkit-animation: anchor 2s linear infinite normal;
  animation: anchor 2s linear infinite normal;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  animation-delay: 0s;
}

.arrowIcon.active:after {
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 10px 5px 0;
  border-color: #000 transparent transparent;
  content: "";
}

.arrowIcon01.active {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.arrowIcon02.active {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.arrowIcon02.active:after {
  border-color: #000 transparent transparent;
}

.arrowIcon03.active {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.arrowIcon02.active:after {
  border-color: #000 transparent transparent;
}

@keyframes anchor {
  30% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

@-webkit-keyframes anchor {

  30%,
  70% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }
}

.swicthImg-pc {
  display: block;
}

.swicthImg-sp {
  display: none;
}

@media (min-width: 750px) {
  .latestNewsList__img:before {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 290px;
    background: #000;
    content: "";
    z-index: 1;
    -webkit-transition: opacity 0.45s ease 0s;
    transition: opacity 0.45s ease 0s;
  }

  .latestNewsList a:hover .latestNewsList__img:before {
    opacity: 0.4;
  }

  .latestNewsList a:hover .latestNewsList__img img {
    -webkit-transform: scale(1.1) rotate(2.8deg);
    transform: scale(1.1) rotate(2.8deg);
  }
}

@media (max-width: 1150px) {
  .swicthImg-pc {
    display: none;
  }

  .swicthImg-sp {
    display: block;
    max-width: 100px;
    margin-right: 13px;
  }

  .latest__titleWrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: static;
    max-width: 900px;
    max-height: 25px;
    margin: 0 auto 15px;
  }

  .arrowWrap {
    position: relative;
    left: 10px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  .arrowIcon {
    margin-top: 10px;
  }

  .latest__title {
    margin-bottom: 0;
  }

  .arrowIcon01 {
    margin-top: 0;
  }
}

@media (max-width: 750px) {
  .latestNewsList img {
    -webkit-transition: -webkit-transform 1s linear 0s;
    transition: -webkit-transform 1s linear 0s;
    transition: transform 1s linear 0s;
    transition: transform 1s linear 0s, -webkit-transform 1s linear 0s;
  }

  .journal__title {
    top: auto;
    bottom: 30px;
  }

  .latestNewsList {
    display: block;
  }

  .latestNewsList li {
    width: 100%;
    max-width: 580px;
    margin: 0 auto 25px;
  }

  .latestNewsList a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
  }

  .latestNewsList__img {
    position: relative;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    width: 100%;
    height: 0;
    margin: 0 auto 10px;
    padding-top: 62%;
    overflow: hidden;
  }

  .latestNewsList__img img {
    position: absolute;
    top: 60%;
    left: 50%;
    width: 100%;
    height: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .latestNewsList__img-top65 img {
    top: 65%;
  }


  .latestNewsList__read {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    width: 100%;
    font-size: 3.2vw;
  }

  .latestNewsList__title {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    font-size: 8vw;
  }
}


/*plan*/









.item-wrap ul {
  display: flex;
  flex-wrap: wrap;
}
.item-wrap li {
  width: calc((100% / 4) - 10px);
  border-right: 1px solid #fff;
  text-align: center;
}
.item-wrap li:last-child {
  border-right:0;
}


.card {
  background: transparent;
  margin-bottom: 50px;
}

.gender {
  display: block;
  margin-top: 5px;
}

.d-block {
  font-size: 14px;
  color: #413b32;
}

.card-product-body-overlay .card-product-view-btn a {
  font-size: 14px;
}


.info-wrap .en {
  letter-spacing: 4px;
}
.info-wrap .txt_area {
  color: #413b32;
  display: flex;
  align-items: center;
}

.info-wrap .media_list {
  border-top: solid 1px #e1e1e1;
  border-bottom: solid 1px #e1e1e1;
}
.info-wrap .media_list li {
}
.info-wrap .media_list li + li {
  border-top: solid 1px #e1e1e1;
}
.info-wrap .txt_area .media_cate {
  width: 8%;
  font-size: 14px;
}
.info-wrap .txt_area .media_cate a {
  color: #413b32;
  display: block;
  text-align: center;
}
.info-wrap .txt_area .date {
  margin-right: 30px;
  font-size: 14px;
}
.info-wrap .media_list a {
  position: relative;
  line-height: 1.8;
  display: block;
  padding: 20px 30px;
}
.info-wrap .media_list a:hover {
  background: #fff;
  -webkit-transition: all 0.35s ease;
  -moz-transition: all 0.35s ease;
  -ms-transition: all 0.35s ease;
  -o-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.info-wrap .media_list a:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 2.9411%;
  width: 1.9607%;
  padding-top: 0.4901%;
  margin-top: -0.24505%;
  height: auto;
  background: url(/images/icon-arrow.png) center no-repeat;
  background-size: contain;
}


.info-wrap .media_ttl h3 a {
  color: #413b32;
}



.reason {

}
.reason section {
  background: #fff;
  position: relative;
  max-width: 100%;
}

.reason .right {
  width: 100%;
  max-width: 1180px;
  margin: auto;
  padding-top: min(135px, 11.4vw);
  position: relative;
}
.reason .right .txt {
  border-bottom: none;
  margin-top: 0;
  font-size: 42px;
  color: #767676;
  margin-bottom: min(82px, 6.9vw);
  padding-left: min(22px, 2.6vw);
}
.reason .right .txt h3 {
  font-size: 58px;
  font-weight: 500;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: .05em;
  margin-bottom: 15px;
}
.reason .right .txt h3 span {
  color: #767676;
}
.reason .right .txt h4 {
  font-size: 16px;
}
.reason .right .detail {
  display: flex;
  color: #767676;
}
.reason .right .detail .child:first-child {
  width: 53%;
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;
}
.reason .right .detail .child:last-child {
  width: 52%;
}
.reason .right .detail .child h4 {
  margin-bottom: 20px;
  font-size: 24px;
}
.reason .right .detail .child p {
  line-height: 2.5;
  font-size: 16px;
}
.reason .right .detail .child .img-box {
  width: 100%;
}

.reason .right .detail .child .img-box img {
  width: 100%;
}

.reason-sub .right {
  background: #f2f3f5;
  width: 1382px;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
}
.reason-sub .left {
  width: 100%;
  max-width: 1180px;
  margin: auto;
  padding-top: min(135px, 11.4vw);
  position: relative;
  background: transparent;
}



/* レイアウト反転時のスタイル */
.reason.reverse .left {
  left: auto;
  right: 0;
  z-index: 1; /* テキストより後ろに配置 */
}
.reason.reverse .right {
  position: relative; /* テキストを前面に表示 */
  z-index: 2;
  padding-left: min(22px, 2.6vw);
  padding-right: 0;
  max-width: 100%;
}
.reason.reverse .right .txt {
  text-align: right;
}
.reason.reverse .right .detail {
  display: flex;
  flex-direction: row-reverse;
  position: relative;
  z-index: 2; /* テキスト部分を前面に配置 */
}
.reason.reverse .right .detail p {
  text-align: left;
}
.reason.reverse .right .detail .child:first-child {
  margin: auto;
  text-align: right;
}
.reason.reverse .right .detail .child:last-child {
  margin-left: 0;
  margin-right: auto;
}
.reason.reverse .left .img {
  position: relative;
  z-index: 1; /* テキストより後ろ */
}







/* Service Section */
.contct-service {
  background: #fff;
}
.service-list {
  padding-top: 100px;
  max-width: 100%;
  padding-bottom: 0;
}
.service-list ul {
  display: flex;
  justify-content: space-between;
}

.service-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6vw;
  width: calc((100% / 3) - 0px);
  min-height: 800px;
}
.service-list li.space {
  /* ホバー時の謎のスクロールの対策 */
  padding: 0;
  width: 0.1px;
}

@media (max-width: 768px) {
  .service-list li.space {
    display: none;
  }
}
.service-list li:nth-child(1) {
  background-color: #ececec;
}
.service-list li:nth-child(2) {
  background-color: #f3f3f3;
}
.service-list li:nth-child(3) {
  background-color: #fbfbfb;
}

.service-list li .post-link {
  color: #f39800;
  text-decoration: none;
}

.service-list li > * {
  position: relative;
  z-index: 10; /* 前面 */
}

.service-list li .post-link:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}
.service-list li h4 {
  text-align: center;
}
.service-list li h4 .en {
  font-size: 38px;
}
.service-list li .service-about {
  max-height: 0;
  opacity: 0;
  padding-top: 48px;
  overflow: hidden;
  transition: 
    max-height 0.5s cubic-bezier(0.4, 0.16, 0.34, 0.94), /* 高さの遷移時間を短縮 */
    opacity 0.5s 0.4s linear; /* 透明度の遷移時間も短縮 */
}
.service-list li .service-about p {
  margin-bottom: 20px;
  line-height: 30px;
}
.service-list li .service-about .btn-wrap {
  width: 100%;
  line-height: 70px;
}
.service-list li:hover .service-about {
  max-height: 616px; /* 展開時の高さ */
  opacity: 1;
}

.service-list li .service-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5; /* 背景 */
  transition: all 0.3s;
}

.service-list li:hover .service-back {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.service-list li .particles-js-canvas-el {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* 最背面 */
}




/*法人サポート*/
.houjin-support {
  overflow: hidden;
  position: relative;
  background-image: url(/img/houjin.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover; 
  max-width: 100%;
}
.houjin-support .houjin-wrap {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 190px 40px 190px 40px;
}

.houjin-support .houjin-wrap h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 40px;
}

.houjin-support .houjin-bg {
  display: flex;
  position: absolute;
  left: 0;
  font-size: 10rem;
  word-break: normal;
  animation: recruit_move infinite linear 35s both;
  width: 1920px;
  bottom: -30px;
  font-size: 13rem;
  text-transform: uppercase;
  word-break: normal;
}
.houjin-support .houjin-bg span {
  color: rgba(255, 255, 255, 0.3);
}
@keyframes recruit_move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}






.brand-wrap ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.brand-wrap li {
  width: calc((100% / 5) - 10px);
  margin-bottom: 10px;
}

#footer{
	background: #413b32;
	color: #fff;
	padding-top: 80px;
	padding-bottom: 60px;
	text-align: center;
	margin-top: 120px;
}

#footer a{
	color: #fff;
}
#footer h1{
	padding-bottom: 15px;
	font-weight: 600;
	font-size: 14px;
  letter-spacing: 2px;
}
#footer .logo{
	display: block;
	width: 200px;
	margin: 0 auto;
}
#footer .sns{
	display: flex;
	justify-content: space-between;
	width: 200px;
	padding-right: 7px;
	margin: 20px auto;
}
#footer .sns a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid #fff;
	border-radius: 100%;
}
#footer .sns img{
	display: block;
	width: 16px;
}
#footer .address{
	font-size: 14px;
}
#footer .tel-btn{
	font-weight: 900;
	width: 250px;
	margin: 18px auto 20px;
	display: block;
}
#footer .tel-btn span{
	font-size: 24px;
  color: #fff;
}
#footer .tel-btn p{
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 16px;
	background: #fff;
	color: #412124;
	font-size: 12px;
	margin-top: 5px;
}
.privacy-link a{
	text-decoration: underline;
	font-size: 12px;
}
.privacy-link a:hover{
	text-decoration: none;
}
#footer .sitemap{
	font-size: 14px;
	letter-spacing: 0;
	display: flex;
	justify-content: space-between;
	padding: 70px 0 60px;
	text-align: left;
	font-weight: 600;
}
#footer .sitemap li{
	margin-bottom: 1.5em;
}
#footer .sitemap .child{
	margin-top: 1.5em;
	padding-left: .75em;
}
#footer .sitemap .child a{
	padding-left: 1em;
	position: relative;
}
#footer .sitemap .child a:before{
	content: "";
	width: .5em;
	height: 1px;
	background: #fff;
	display: block;
	position: absolute;
	left: 0;
	top: .75em;
}
#copyrights{
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
}

@media (min-width: 768px) {
  .visible-xs {
      display:none!important
  }
}
@media (max-width: 767px) {
  .hidden-xs {
      display:none!important
  }
  .visible-xs {
      display:block!important
  }
}


/*ABOUT*/
.about section {
  padding: 0;
}
.about-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
}
.about-area .img-area {
  width: calc((100% / 2) - 20px);
}
.about-area .txt-area {
  width: calc((100% / 2) - 20px);
}
.about-area .txt-area .headline {
  margin: 0;
  position: relative;
  z-index: 0;
}
.about-area .txt-area h2 {
  font-size: 24px;
  font-weight: normal;
  letter-spacing: 0.05em;
  letter-spacing: 0.1em;
  font-feature-settings: "palt" 1;
  line-height: 1;
  text-align: left;
}
.about-area .txt-area p {
  margin: 35px 0 0 -1%;
  font-size: 56px;
  font-weight: normal;
  line-height: 1.5;
}
.about-area .description-area p {
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
}
.about-area .description-area .link-area {
  margin-top: 50px;
}


/*feature-area*/
.feature-area .img-area {
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature-area .bnr-area {
  width: calc((100% / 1 ) - 10px);
  text-align: center;
}
.feature-area .txt {
  margin-top: 15px;
}



/*sample.html*/
.about-area {
  position: relative;
  width: 100%;
  height: 838px;
}
.about-area .about-body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  position: relative;
  z-index: 2;
}
.about-area .about-body .about-wrap {
  position: relative;
  background-color: #fff;
  width: 60%;
  padding: 4.5%;
  left: 10%;
  box-sizing: border-box;
}
.about-wrap .support-body {
  margin: 30px .25em 40px;
}
.about-wrap .support-body p {
  line-height: 1.8;
}



.btn-anime {
  display: inline-block;
  color: #ffffff;
  padding: 32px;
  position: relative;
  letter-spacing: 1px;
}
.btn__circle, .btn__text, .btn__white-circle {
  position: absolute;
}
.btn__circle {
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 100%;
  width: 100%;
  box-shadow: 0 0 1px 1px #413b32;
  transition: 0.4s linear;
}
.btn__white-circle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 56px;
  height: 56px;
  border-radius: 100%;
  background: #000;
  color: #fff;
  display: flex;
  transition: 0.4s ease-in-out;
}
.btn__white-circle svg {
  width: 24px;
  height: 24px;
  margin: auto;
}
.btn__text {
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  z-index: 2;
  padding: 24px 8px;
  transition: 0.4s linear;
}
.btn-anime:hover .btn__circle {
  transform: scale(0);
}
.btn-anime:hover .btn__white-circle {
  transform: translate(-50%, -50%) scale(1);
}
.btn-anime:hover .btn__text {
  transform: translate(40px, -50%);
}




.about-bg {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  position: absolute;
  background-image: url('/img/about-bg-1.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}




/*product*/
.about-area .about-body .about-wrap {
  position: relative;
  background-color: #fff;
  width: 60%;
  padding: 4.5%;
  left: 10%; /* デフォルトは左寄せ */
  right: auto;
  box-sizing: border-box;
}
.about-area.mirrored .about-body {
  margin-left: auto;
  width: 80%;
}
/* mirrored 用スタイル（右寄せ） */
.about-area.mirrored .about-body .about-wrap {
  left: auto; /* 左寄せを無効化 */
  right: 10%; /* 右寄せに設定 */
  justify-content: flex-end;
  margin-left: auto;
}

.about-area.mirrored .about-body .garyu-in {
  padding: 10% 20%;
}

.about-area.mirrored .about-bg {
  background-image: url('/img/about-bg-2.jpg'); /* 背景画像を別に設定 */
}



/*ガリュウクラフトとは*/
.concept-wrap {
  background: #fff;
}
.concept {
  position: relative;
  max-width: 1400px;
  margin: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 150px;
  padding-bottom: 150px;
  height: 790px;
  overflow: hidden;
}
.concept .txt .title {
  position: relative;
  z-index: 7;
  font-family: Oswald;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-align: left;
  margin-bottom: 30px;
}
.concept .txt .title span {
  display: block;
  font-weight: 900;
  font-size: 36px;
  color: #000;
  margin-right: 0.07em;
}
.concept .txt .detail {
  font-size: 14px;
  margin-bottom: 50px;
}
.concept .txt .detail p {
  font-size: 16px;
  line-height: 2.3;
  position: relative;
  z-index: 1;
  width: 46%;
}
.concept .left {
  position: absolute;
  left: 0;
}
.concept .concept-bg {
  position: absolute;
  right: 0;
  top: 60px;
}
.concept .concept-bg .video {
  width: 48%;
  margin-left: auto;
}
.concept .concept-bg img {
  width: 100%;
  margin-left: auto;
}
.concept .btn-wrap  {
  width: 540px;
  margin-left: 140px;
}


.brand {
  background: #fff;
}
.brand .brand-wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

.brand .brand-wrap li {
  width: calc((100% / 5 ) - 10px);
  transition: .6s;
  border: solid 1px #e6e6e6;
  box-sizing: border-box;
  position: relative;
}
.brand .brand-wrap ul:before {
  content: "";
  display: block;
  width: calc((100% / 5 ) - 10px);
  order: 1;
}
.brand .brand-wrap ul:after {
  content: "";
  display: block;
  width: calc((100% / 5 ) - 10px);
}


.brand .brand-wrap li img {
  margin: 0 auto;
}


/*CONTACT*/
.contact-wrap {
  position: relative;
  overflow: hidden; /* 画像が親要素外に出ないようにする */
}

.contact-wrap .wrap::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(/img/contact-bg.jpg);
  background-size: cover;
  background-attachment: fixed; /* 背景を固定 */
}



.contact-wrap .conts {
  font-size:40px;
  text-align:center; 
  padding:5% 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-wrap .conts .left {
  text-align: left;
  color: #fff;
}
.contact-wrap .conts .left h3 {
  font-size: 54px;
  margin-bottom: 10px;
}
.contact-wrap .conts .left .jp-txt {
  font-size: 18px;
  margin-bottom: 30px;
}
.contact-wrap .conts .left p:last-child {
  line-height: 1.7;
}
.contact-wrap .conts .right {
  width: 40%;
}
.contact-wrap .conts .right .tel-wrap {
  margin-bottom: 20px;
}
.contact-wrap .conts .right .tel-wrap a,
.contact-wrap .conts .right .mail-wrap a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #fff;
  padding: 20px;
  color: #fff;
}
.contact-wrap .conts .right .tel-txt {
  font-size: 16px;
  text-align: left;
  line-height: 1.6;
}
.contact-wrap .conts .right .phone {
  font-size: 26px;
  display: flex;
  align-items: center;
}
.contact-wrap .conts .right .phone i {
  font-size: 18px;
  padding-right: 5px;
}
.contact-wrap .conts .right .mail-wrap a {
  font-size: 16px;
  justify-content: flex-start;
}
.contact-wrap .conts .right .mail-wrap a .fa-envelope {
  padding-right: 10px;
}
.contact-wrap .conts .right .mail-wrap a .ti-arrow-top-right {
  margin-left: auto;
  color: #fff;
}
.contact-wrap .conts .right .mail-wrap a .ti-arrow-top-right:hover {
  color: #000;
}
.contact-wrap .conts .right .mail-wrap a:hover span,
.contact-wrap .conts .right .mail-wrap a:hover .ti-arrow-top-right:before {
  color: #000;
}
.contact-wrap .conts .right a {
  transition: all 0.3s ease 0s;
}
.contact-wrap .conts .right a:hover {
  background: #fff;
  color: #000;
}

.forty .concept .txt .detail {
  margin-bottom: 100px;
}
.garyu .concept .txt .detail {
  margin-bottom: 140px;
}
.newera .concept .txt .detail {
  margin-bottom: 140px;
}


/*footer*/

footer {  padding:100px 3.5% 60px;color: #fffaf3;position: relative; z-index: 0; }
footer:after {position: absolute;top: 0;left: 0;right: 0;bottom: 0;content: "";background: #413b32; z-index: -1;}

@media screen and (max-width: 960px) {
footer { padding:100px 3.5% 140px; }
}
@media screen and (max-width:738px) {
footer { padding: 70px 5% 35px;}
}
@media screen and (max-width: 560px) {
footer {  padding: 70px 6% 25px; }
}

/* .inner */
footer .inner { padding: 0 0 0 38%;font-size: 0; position: relative; z-index: 1;}

@media screen and (max-width: 1100px) {
footer .inner { padding: 0 0 0 40%; }
}
@media screen and (max-width: 960px) {
footer .inner { padding: 0 0 0 40%; }
}
@media screen and (max-width: 738px) {
footer .inner { padding: 0; }
}

/* .txt_title_menu */
footer .txt_title_menu { margin: 0 0 25px; color: #c2bdb7;font-size: 16px; font-family: 'Cormorant Garamond', serif; font-weight: 500;line-height: 1;font-feature-settings : "palt" 1; letter-spacing: 0.025em;}
	
@media screen and (max-width: 960px) {
footer .txt_title_menu { margin:  0 0 15px; font-size: 16px; }
}
@media screen and (max-width: 738px) {
footer .txt_title_menu { margin:  0 0 25px; font-size: 15px; }	
}

/* ------------------------------------------------
   .nav_area
   ------------------------------------------------ */   
footer .nav_area {text-align: left; font-size: 0; display: flex;}
footer .nav_box {display: inline-block; text-align: left;}
footer .nav_box:first-child {width: 27.333%}
footer .nav_box:nth-child(2) { width: 42.333%}
footer .nav_box:last-child { margin: 0;width: 27.333%}

@media screen and (max-width: 960px) {
footer .nav_box,
footer .nav_box:last-child{display:block; margin: 40px 0 0;}
footer .nav_box:first-child,
footer .nav_box:nth-child(2),
footer .nav_box:last-child {width: 100%}
footer .nav_box:first-child {margin: 0;}
}
@media screen and (max-width: 738px) {
footer .nav_box,
footer .nav_box:last-child {margin: 40px 0 0;}
footer .nav_box:first-child {margin: 0;float: left;width: 50%;}
footer .nav_box:nth-child(2) {margin: 0; float: right; width: 50%;}
footer .nav_box:last-child { margin: 40px 0 0;  float: right;width: 50%;}
}
@media screen and (max-width: 738px) {
footer .nav_box:first-child,
footer .nav_box:nth-child(2) {margin: 0; float: none; width: calc((100% / 3) - 30px); display: inline-block;}
footer .nav_box:nth-child(2) {float: none; width: calc((100% / 3) - 10px); display: inline-block;}
footer .nav_box:last-child { margin: 35px 0 0; float: none; display: block; width: calc((100% / 3) - 10px); }
}

/* .footer_nav_list */
footer ul.footer_nav_list { list-style: none; line-height: 0; }
footer ul.footer_nav_list li { display: block; margin: 5px 0 0; padding: 0;}
footer ul.footer_nav_list li a { display: inline-block; font-size: 14px; font-family:"Moderat_Regular";font-weight: normal;letter-spacing: 0.05em; line-height: 1.7;position: relative; z-index: 0; color: #fff;}
footer ul.footer_nav_list li a:after { position: absolute; bottom: -1px; right: 0px; left: 0; height: 1px; content: ""; background: #fffaf3; z-index: 0; transition: transform .3s cubic-bezier(.215, .61, .355, 1);transform-origin: right center;transform:scaleX(0)}
footer ul.footer_nav_list li a:hover:after { transform-origin: left center;transform:scaleX(1)}

@media screen and (max-width: 960px) {
footer ul.footer_nav_list { margin: -10px 0 0;  font-size: 0; }
footer ul.footer_nav_list li { display: inline-block; margin: 10px 7.5% 0 0; padding: 0;}
footer ul.footer_nav_list li a {font-size: 14px; }
footer ul.footer_nav_list li a:after { display: none;}
}
@media screen and (max-width: 738px) {
footer ul.footer_nav_list li { display: block; margin: 10px 7.5% 0 0; padding: 0;}
footer .nav_box:first-child ul.footer_nav_list li a {font-size: 14px; line-height: 1; }
footer .nav_box:nth-child(2) ul.footer_nav_list li a,
footer .nav_box:last-child ul.footer_nav_list li a{ font-size: 16px; line-height: 1.1;}
}
@media screen and (max-width: 738px) {
footer ul.footer_nav_list li { margin: 10px 0 0; }
footer .nav_box:first-child ul.footer_nav_list li a {font-size: 14px; line-height: 1.1; }
footer .nav_box:nth-child(2) ul.footer_nav_list li a,
footer .nav_box:last-child ul.footer_nav_list li a{ font-size: 14px; line-height: 1.6;}
}


/* ------------------------------------------------
   .nav_area_2
   ------------------------------------------------ */   
footer .nav_area_2 { margin: 55px 0 0; font-size: 0; position: relative; z-index: 0;}

/* .sns_area */
footer .sns_area { display: inline-block; width: 50%; margin-left: 27.333%  }
footer ul.footer_sns_list { list-style: none; font-size: 0;line-height: 0;}
footer ul.footer_sns_list li { display: inline-block; margin: 0 3vw 0 0; padding: 0;}
footer ul.footer_sns_list li a { display: block; padding: 0; color: #fff; font-size: 14px;font-family:"Moderat_Regular";font-weight: normal;letter-spacing: 0.05em;  line-height: 22px; position: relative; z-index: 0;}
footer ul.footer_sns_list li a.tiktok i,
footer ul.footer_sns_list li a.instagram i {
  padding-right: 5px;
}
footer ul.footer_sns_list li a:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: "";z-index: 0;}
footer ul.footer_sns_list li a:after { position: absolute; bottom: -1px; right: 0; left:20px; height: 1px; content: ""; background: #fffaf3; z-index: 0; transition: transform .3s cubic-bezier(.215, .61, .355, 1);transform-origin: right center;transform:scaleX(0)}
footer ul.footer_sns_list li a:hover:after { transform-origin: left center;transform:scaleX(1)}

@media screen and (max-width: 960px) {
footer .nav_area_2 { margin: 40px 0 0;}
footer .sns_area { display: block; width: 100%; margin: 0  }
footer ul.footer_sns_list { margin: -10px 0 0;}
footer ul.footer_sns_list li { margin: 10px 7.5% 0 0; }
footer ul.footer_sns_list li a { padding: 0 0 0 21px;font-size: 14px;}
footer ul.footer_sns_list li a:after {display: none;}
}
@media screen and (max-width: 738px) {
footer .sns_area { display: inline-block;margin: 0 0 0 50%; width: 50%; }
footer ul.footer_sns_list { margin: -10px 0 0; line-height: 0;}
footer ul.footer_sns_list li { display: block; margin: 10px 7.5% 0 0; }
footer ul.footer_sns_list li a { padding: 0 0 0 24px; font-size: 16px; line-height: 1.2;}
footer ul.footer_sns_list li a.note:before { left: 1px;}
}
@media screen and (max-width: 738px) {
footer .nav_area_2 { margin: 35px 0 0;}
footer .sns_area { margin: 0; width: 50%; }
footer ul.footer_sns_list li a { padding: 0 0 0 24px; font-size: 15px; line-height: 1.2;}
}


/* .info_area */
footer .info_area { position: absolute; bottom: 0; left:69.666%; left: 0; z-index: 0;}
footer ul.footer_nav_list li a.privacy {font-size: 13px;}

@media screen and (max-width: 960px) {
footer .info_area { position: static; margin: 40px 0 0;}
footer ul.footer_nav_list li a.privacy {font-size: 14px;}
}
@media screen and (max-width: 738px) {
footer .info_area { position: absolute; top: -58px; left: 0;width: 50%;margin:0;}
footer ul.footer_nav_list li a.privacy {font-size: 14px;}
}
@media screen and (max-width: 738px) {
footer .info_area { position: absolute;width: 47.5%;  top: auto; left: auto; right: 0; bottom: 0; }
footer ul.footer_nav_list li a.privacy {font-size: 14px;}
}


/* ------------------------------------------------
   .logo_area
   ------------------------------------------------ */   
footer .logo_area { position: absolute; top: 145px; left: 6%; width: 400px; }
footer .logo_area .logo_inner {text-align: center;}
footer .logo_area  p.txt_copy { margin: 20px 0 0;color: #c2bdb7; font-size:13px;font-family:"Moderat_Regular";font-weight: normal;font-feature-settings : "palt" 1; letter-spacing: 0.025em; line-height:1; position: relative; z-index: 0;}
footer .logo_area p.txt_copy span { margin-right: 3px;}
@media screen and (max-width: 1024px) {
footer .logo_area { left: 5%;width: 220px;  }
}
@media screen and (max-width: 960px) {
footer .logo_area { left: 5%;width: 200px;  }
}
@media screen and (max-width: 768px) {
footer .logo_area { width: 180px; }
footer .nav_area { align-items: baseline; justify-content: space-between; }
}
@media screen and (max-width: 738px) {
footer .logo_area { position: static; margin: 65px 0 0; width: 100%;}
footer .logo_area .logo_img { width: 50%; }
footer .logo_area  p.txt_copy { margin: 65px 0 0; font-size:13px;text-align: left}
}
@media screen and (max-width: 738px) {
footer .logo_area { margin: 50px 0 0;}
footer .logo_area .logo_img { width: 70%; max-width: 350px; }
footer .logo_area  p.txt_copy { margin: 55px 0 0; font-size:13px;}
}

/*scroll up*/
#scrollUp { position: absolute; bottom: 40px; right: 3.5%; z-index: 1000; }
#scrollUp a { width: 55px; height: 55px; display: block; border:#736e6e 1px solid; color: #fff; text-align: center; -webkit-border-radius: 100%; border-radius: 100%; position:relative; z-index:1;} 
#scrollUp a:before { position:absolute; top:0; left:0; right:0; bottom:0; font-size: 18px; font-family:themify;content:"\e648"; line-height: 52px; letter-spacing: 0; z-index: 0;}

@media only screen and (max-width: 960px) {
#scrollUp a { width: 50px; height: 50px; } 
#scrollUp a:before { font-size: 16px; line-height: 47px;}
}
@media only screen and (max-width: 738px) {
#scrollUp { bottom: 20px; right: 3.5%; }
#scrollUp a { width: 46px; height: 46px; } 
#scrollUp a:before { font-size: 15px; line-height: 42px;}
}
@media screen and (min-width: 960px) {
#scrollUp a:hover { background: #fffaf3; color: #2c2a2a; border-color:#fffaf3;} 
}

#relation-chat-launcher {
  bottom: 110px !important;
  height: 38px !important;
  width: 38px !important;
}


/*access*/

.access {
  background: #fff;
  padding: 50px 0;
}
.access .title h2 {
  text-align: center;
}
.access .access-wrap {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 50px;
  border-radius: 20px;
}
/*
.access .access-wrap .left,
.access .access-wrap .right {
  width: calc((100% / 2) - 10px);
  margin-bottom: 50px;
}
*/
.access .access-wrap .right img {
  margin-left: auto;
  border-radius: 10px;
}
.access .access-wrap .bottom {
  width: 100%;
}
.access .access-wrap .left h3 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 20px; 
}
.access .access-wrap .left .access-txt {
  margin-top: 50px;
}
.access .access-wrap .left p {
  margin-bottom: 20px;
}






@media only screen and (max-width: 738px) {
  .en {
    font-size: 8vw;
  }
  .title {
    padding: 0 20px;
  }
  .title .jp-txt {
    font-size: 3.5vw;
  }
  .btn-wrap {
    width: 80%;
    line-height: 60px;
  }
  .btn-wrap .stkr-target {
    font-size: 12px;
  }
  .concept .btn-wrap {
    width: 80%;
    margin: 0 auto;
  }
  section {
    max-width: 100%;
  }
  .hero-image {
    height: 100vh; /* 縦フルサイズ */
    overflow: hidden; /* オーバーフローを隠す */
  }

  .hero-image video {
    height: 100%; /* 縦フルサイズ */
    width: auto; /* アスペクト比を保つ */
    object-fit: cover; /* 動画を拡大して隙間を埋める */
  }

  .hero-image .main-wrap {
    width: 100%;
    top: 50%; /* センタリング */
  }
  .hero-image .main-wrap .main-title .t1 {
    margin-bottom: 0;
  }
  .hero-image .main-wrap .main-title .t1,
  .hero-image .main-wrap .main-title .t2 {
    font-size: 16vw; /* フォントサイズを調整 */
  }
  .garyu-title {
    font-size: 8vw;
    margin-bottom: 25px;
  }
  .garyu-in {
    padding: 0 5%;
  }
  .about-area {
    position: relative;
    width: 100%;
    height: 838px;
    overflow: hidden; /* コンテンツが背景を超えないように */
  }
  .about-area .about-bg {
    display: none;
  }
  .about-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/about-bg-sp-1.jpg');
    background-position: center;
    background-size: cover;
    z-index: 1;
    transform: translateZ(0); /* スマホでもスムーズに固定されるように */
    will-change: transform; /* パフォーマンス向上 */
  }

  .about-area .about-body {
    position: relative;
    z-index: 2; /* 背景より前面に表示 */
  }
  
  .about-area.mirrored::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/about-bg-sp-2.jpg');
    background-position: center;
    background-size: cover;
    z-index: 1;
    transform: translateZ(0); /* スマホでもスムーズに固定されるように */
    will-change: transform; /* パフォーマンス向上 */
  }


  .about-area.mirrored .about-body {
    width: 100%;
  }
  .about-area .about-body .about-wrap {
    width: 90%;
    left: 20px;
    padding: 10% 3%;
  }
  .about-area.mirrored .about-body .about-wrap {
    right: 20px;
  }
  
 
  .about-area.mirrored .about-body .garyu-in {
    padding: 10%;
  }
  .about-wrap .support-body {
    margin: 0 .25em 40px;
  }
  .about-wrap .btn__text {
    font-size: 5vw;
    line-height: 1.3;
  }
  .reason .left {
    width: 90.7vw;
    height: calc(100% - 8.4vw);
  }
  .reason .right {
    width: 100%;
    max-width: 1180px;
    margin: auto;
    padding-top: min(135px, 11.4vw);
    position: relative;
    padding: 10px;
  }
  .reason .right .detail .child .img-box {
    width: 100%;
  }
  .reason .right .txt h3 {
    font-size: 28px;
  }
  .reason .right .detail .child h4 {
    font-size: 16px;
  }
  .reason .right .detail .child p {
    font-size: 12px;
  }
  .service-list ul {
    flex-wrap: wrap;
  }
  .contact-wrap .conts {
    flex-wrap: wrap;
    padding: 0 20px;
  }
  .reason .right .detail .child:first-child {
    width: 100%;
  }
  .reason .right .detail .child:last-child {
    width: 100%;
  }
  .reason.reverse .right {
    padding-left: min(22px, 0vw);
  }
  .reason.reverse .right .detail .child:last-child {
    padding-left: 0;
    padding-right: 10px;
  }
  .contact-wrap .conts .left {
    margin-bottom: 20px;
  }
  .contact-wrap .conts .right,
  .contact-wrap .conts .left {
    width: 100%;
  }
  .contact-wrap .conts .left h3,
  .contact-wrap .conts .left .jp-txt {
    text-align: center;
  }
  .concept .concept-bg img {
    width: 85%;
  }
  .concept {
    padding: 30px;
    height: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
   .concept .txt {
    width: 100%;
  }
  .concept .txt .detail p {
    width: 100%;
    font-size: 2vw;
  }
  .concept .txt .title span {
    font-size: 5vw
  }
  .concept .txt .title {
    margin-top: 50px;
  }
  .crafting-wrap {
    padding: 0 10px 30px;
  }
  .crafting-wrap::after {
    background: #fff;
    left: 0;
  }
  .plan-wrap {
    margin-top: -1px;
  }
  .mainContents__ttl .ja {
    font-size: 4vw;
  }
  .mainContents__ttl .en {
    font-size: 3vw;
  }
  .brand .brand-wrap {
    padding: 0 20px;
  }
  .brand .brand-wrap li {
    width: calc((100% / 3) - 10px);
  }
  .service-list li:hover .service-about {
    max-height: 500px; /* 展開時の高さ */
    opacity: 1;
  }
  .service-list li:hover .service-about p {
    margin-bottom: 20px;
  }
  .service-list li .service-about {
    opacity: 1;
    transition:none;
    max-height: 500px;
  }
  .houjin-support .houjin-bg {
    font-size: 9rem;
  }
  .latest__title {
    writing-mode: inherit;
    font-size: 6vw;
  }
  .journal {
    padding: 0 20px;
  }
  .concept .left {
    left: 5px;
  }
  .concept .left img {
    height: 540px;
  }
  .contact-wrap .conts .right .tel-wrap a, .contact-wrap .conts .right .mail-wrap a {
    padding: 20px 10px;
  }
  .contact-wrap .conts .right .tel-txt {
    font-size: 3.5vw;
  }
  .contact-wrap .conts .right .phone {
    font-size: 4.5vw;
  }
  .contact-wrap .conts .right .mail-wrap a {
    font-size: 4vw;
  }
  .concept .concept-bg {
    position: unset;
    margin-bottom: 30px;
  }
  .newera .concept .txt .detail {
    margin-bottom: 30px;
  }
  .concept .concept-bg .video {
    width: 100%;
  }
  .forty .concept .txt .detail {
    margin-bottom: 30px;
  }
  .reason .right .detail {
    flex-wrap: wrap;
  }
 
  .service-list li {
    width: 100%;
  }
  .access {
    background: #ebebeb;
  }
  .access .access-wrap {
    padding: 20px;
    margin: 15px;
  }
  .access .access-wrap .left h3 {
    font-size: 16px;
  }
  .access .access-wrap .left p { 
    line-height: 1.6;
  }
  footer .nav_box:first-child ul.footer_nav_list li a,
  footer .nav_box:nth-child(2) ul.footer_nav_list li a, footer .nav_box:last-child ul.footer_nav_list li a {
    font-size: 3vw;
  }
  footer .logo_area p.txt_copy {
    text-align: center;
  }
  
}