@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');


/* =================== */
/*       pubulic       */
/* =================== */
html {
	font-size:clamp(10px, 1.04vw, 25px); /* デザインベース1920pxの時の20px */
	scroll-padding-top:150px;
	scroll-behavior:smooth;
}
body {
	position:relative;
	-webkit-text-size-adjust:100%;
	font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style:normal;
	letter-spacing:.05em;
	color:#1A1816;
}
body.child-nav-on::after {
	content:"";
	width:100%;
	height:100%;
	background:rgba(0,0,0,.5);
	display:block;
	position:absolute;
	top:0;
	left:0;
}

.en-font {
	font-family:"Inter", sans-serif;
}


main { position:relative; }



img {
  width:100%;
  height:auto;
  max-width:100%;
}

a { transition:0.5s ease all; }


.sp-on { display:none; }

.flex-box {
	display:-webkit-box;
	display:flex;
	-webkit-box-pack:justify;
	justify-content:space-between;
	align-items:center;
}



.inner-box {
	width:79.8rem;
	margin:0 auto;
}
.max-w-box {
	max-width:2500px;
	margin:0 auto;
	position:relative;
}


h2,h3,h4 { font-weight:100; }


.grecaptcha-badge { visibility:hidden; }


.hvr-arrow-anime.is-active .arrow::before,
.hvr-arrow-anime.is-active .arrow::after,
a.is-active .hvr-arrow-anime .arrow::before,
a.is-active .hvr-arrow-anime .arrow::after {
  animation:.3s ease-in-out 1.5 transformLeftRight;
}
.hvr-arrow-anime .arrow.normal-size {
  position: relative;
  display: inline-block;
  width:2.4rem;
  height:2.4rem;
  border:.1rem solid #1A1816;
  border-radius:100vmax;
  margin-right:.7rem;
  overflow:hidden;
}
.hvr-arrow-anime .arrow.mini-size {
	position: relative;
  display: inline-block;
  width:1.6rem;
	height:1.6rem;
  border:.1rem solid #1A1816;
  border-radius:100vmax;
  margin-right:.7rem;
  overflow:hidden;
}
.hvr-arrow-anime .arrow::before,
.hvr-arrow-anime .arrow::after {
  content:"";
  position:absolute;
  top:calc(50% - .05rem);
  right:calc(50% - .25rem);
  width:.5rem;
  height:.1rem;
  background:#1A1816;
  transform-origin:calc(100% - .05rem) 50%;
}
.hvr-arrow-anime .arrow.mini-size::before,
.hvr-arrow-anime .arrow.mini-size::after {
	width:.4rem;
	right:calc(50% - .2rem);
}
.hvr-arrow-anime .arrow::before { transform:rotate(45deg); }
.hvr-arrow-anime .arrow::after { transform:rotate(-45deg); }
.hvr-arrow-anime.white .arrow { border:.1rem solid #fff; }
.hvr-arrow-anime.white .arrow::before,
.hvr-arrow-anime.white .arrow::after { background:#fff; }

@keyframes transformLeftRight {
  0% {
    right:110%;
  }
  100% {
    right:-10%;
  }
}

.dot-title-design {
	display:flex;
	align-items:flex-start;
}
.dot-title-design.white { color:#fff; }
.dot-title-design::before {
	content:"";
	width:.6rem;
	height:.6rem;
	background:#6F0B65;
	border-radius:100vmax;
	display:block;
	margin-right:.8rem;
	margin-top:.7em;
}
.dot-title-design.white::before { background:#fff; }
.dot-title-design .en-font {
	font-weight:500;
	font-size:5.6rem;
	display:block;
}
.dot-title-design .jp {
	display:block;
	font-size:1.2rem;
	font-weight:500;
	color:#716D67;
	margin-top:.8rem;
}
.dot-title-design.white .jp { color:#fff; }

.line-btn-design { text-align:right; }
.line-btn-design .btn-wrap { display:inline-block; }
.line-btn-design a,
.line-btn-design .btn-wrap > div {
	display:flex;
	align-items:center;
}
.line-btn-design .name .name-in {
	padding-bottom:.5rem;
	border-bottom:.1rem solid #B2ADA5;
	font-weight:700;
	font-size:1.2rem;
	position:relative;
}
.line-btn-design.white .name .name-in { color:#fff; border-bottom:.1rem solid #fff; }
.line-btn-design .name .name-in::before {
	content:"";
	width:100%;
	height:.1rem;
	position:absolute;
	left:0;
	bottom:-.1rem;
	background:#1A1816;
	transform: scaleX(0);     /* 最初は幅0 */
  transform-origin: left;   /* 左から右へ伸びる */
}
.line-btn-design.is-hover a:hover .name .name-in::before,
a.is-hover .line-btn-design .btn-wrap > div .name .name-in::before {
	/*animation:transformLine .65s linear forwards;*/
	animation:transformLine .25s cubic-bezier(0, 0, 0.3, 1) forwards;
}
.line-btn-design.is-leave a .name .name-in,
a.is-leave .line-btn-design .btn-wrap > div .name .name-in { border-bottom:.1rem solid #1A1816; }
.line-btn-design.is-leave.white a .name .name-in,
a.is-leave .line-btn-design.white .btn-wrap > div .name .name-in { border-bottom:.1rem solid #1A1816; }
.line-btn-design.is-leave a .name .name-in::before,
a.is-leave .line-btn-design .btn-wrap > div .name .name-in::before {
	/*animation:transformLine .65s linear forwards;*/
	animation:transformLine .25s cubic-bezier(0, 0, 0.3, 1) forwards;
	background:#B2ADA5;
}
.line-btn-design.is-leave.white a .name .name-in::before,
a.is-leave .line-btn-design.white .btn-wrap > div .name .name-in::before {
	/*animation:transformLine .65s linear forwards;*/
	animation:transformLine .25s cubic-bezier(0, 0, 0.3, 1) forwards;
	background:#fff;
}

@keyframes transformLine {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  100% {
    transform: scaleX(1); /* 右端まで重なる */
    opacity: 1;
  }
}






/* =================== */
/*       #header       */
/* =================== */
#header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:100;
}
#header .header-inner-box {
	padding:1.6rem 1.725rem 0;
	transition:background 1s ease;
}
#header.fixed .header-inner-box { background:#fff; }
body.child-nav-on #header .header-inner-box { background:#fff; transition:none; }
#header #site-logo { width:9.25rem; padding-bottom:1.6rem; }
#header #site-logo a:hover { opacity:.5; }
#header #hamburger { display:none; }
#header nav { width:61.7rem; align-items:flex-start; }
#header #main-content-nav .parent-link { padding:.6rem 0; font-size:.8rem; }
#header #main-content-nav .parent-link a { display:flex; align-items:center; }
#header #main-content-nav .parent-link a:hover { opacity:.5; }
#header #main-content-nav > li.has-child:hover .sub-nav-box { display:flex; }
#header #main-content-nav .parent-link .arrow {
  position: relative;
  display: inline-block;
  width:.805rem;
  height:.455rem;
  margin-left:.5rem;
  transition:0.5s ease all;
}
#header #main-content-nav .parent-link .arrow.sp-on { display:none; }
#header #main-content-nav > li.has-child:hover .parent-link .arrow { transform:rotate(180deg); }
#header #main-content-nav .parent-link .arrow::before,
#header #main-content-nav .parent-link .arrow::after {
  content:"";
  position:absolute;
  bottom:0;
  left:calc(50% - .05rem);
  width:.1rem;
  height:.6rem;
  background-color:#1A1816;
  transform-origin:50% calc(100% - .05rem);
}
#header #main-content-nav .parent-link .arrow::before { transform:rotate(45deg); }
#header #main-content-nav .parent-link .arrow::after { transform:rotate(-45deg); }
#header #main-content-nav > li { padding:0 1.2rem; padding-bottom:1.6rem; }
#header #main-content-nav .sub-nav-box {
	width:100%;
	position:fixed;
	top:5.3rem;
	left:0;
	background:#fff;
	display:none;
	justify-content:center;
	padding:1.6rem 0;
}
#header #main-content-nav .sub-nav-box .l-box {
	display:flex;
	align-items:flex-end;
	margin-right:7.5rem;
}
#header #main-content-nav .sub-nav-box .pic {
	width:15rem;
	margin-right:1.2rem;
}
#header #main-content-nav .sub-nav-box .pic img { border-radius:.2rem; }
#header #main-content-nav .sub-nav-box .parent-name .en-font {
	font-size:.9rem;
	color:#716D67;
	display:block;
	margin-bottom:.5rem;
}
#header #main-content-nav .sub-nav-box .parent-name .arrow { vertical-align:middle; margin-right:.3rem; }
#header #main-content-nav .sub-nav-box .parent-name .jp {
	font-size:1.4rem;
	font-weight:700;
	vertical-align:middle;
}
#header #main-content-nav li.products .sub-nav-box .child-link-list {
	display:flex;
	flex-wrap:wrap;
	width:30rem;
}
#header #main-content-nav li.products .sub-nav-box .child-link-list li { width:10rem; }
#header #main-content-nav .sub-nav-box .child-link-list li { margin-bottom:.5rem; }
#header #main-content-nav .sub-nav-box .child-link-list li:last-child { margin-bottom:0; }
#header #main-content-nav .sub-nav-box .child-link-list li .arrow { vertical-align:middle; margin-right:.3rem; }
#header #main-content-nav .sub-nav-box .child-link-list li .jp {
	font-size:.9rem;
	font-weight:700;
	vertical-align:middle;
}
#header #sub-content-nav li { margin-left:.6rem; }
#header #sub-content-nav .icon-link { width:1.2rem; margin-right:1.2rem; }
#header #sub-content-nav .icon-link a:hover { opacity:.5; }
#header #sub-content-nav .txt-btn-link a {
	color:#fff;
	font-size:.8rem;
	display:flex;
	align-items:center;
	padding:.6rem .8rem;
	border-radius:.2rem;
}
#header #sub-content-nav .contact-link a { background:#000; }
#header #sub-content-nav .recruit-link a { background:#6F0B65; }
#header #sub-content-nav .txt-btn-link .arrow {
  position: relative;
  display: inline-block;
  width:1rem;
  height:1rem;
  background:#fff;
  border-radius:100vmax;
  margin-right:.5rem;
}
#header #sub-content-nav .txt-btn-link .arrow::before,
#header #sub-content-nav .txt-btn-link .arrow::after {
  content:"";
  position:absolute;
  top:calc(50% - .05rem);
  right:calc(50% - .15rem);
  width:.35rem;
  height:.1rem;
  background-color:#000;
  transform-origin:calc(100% - .05rem) 50%;
}
#header #sub-content-nav .txt-btn-link .arrow::before { transform:rotate(45deg); }
#header #sub-content-nav .txt-btn-link .arrow::after { transform:rotate(-45deg); }
#header #sub-content-nav .recruit-link .arrow::before,
#header #sub-content-nav .recruit-link .arrow::after { background:#6F0B65; }
#header #sub-content-nav2 { display:none; }







/* =================== */
/*         footer      */
/* =================== */
#footer {
	background:#F4F3EF;
	border-radius:1.2rem 1.2rem 0 0;
	padding:5.6rem 0 1.8rem;
}
#footer .footer-main-box { align-items:flex-start; }
#footer .footer-logo {
	width:17rem;
	margin-bottom:2rem;
}
#footer address { margin-left:1.6rem; }
#footer address .name {
	font-size:1rem;
	font-weight:700;
	line-height:1.5;
}
#footer address .add {
	font-size:.9rem;
	line-height:1.6;
	margin-top:2rem;
	margin-bottom:.8rem;
}
#footer address .tel,
#footer address .fax {
	font-size:.9rem;
	line-height:1.6;
}
#footer .inst-icon {
	width:1.6rem;
	margin:1.6rem 0 1.8rem 1.6rem;
}
#footer .inst-icon a:hover { opacity:.8; }
#footer .contact-link { margin-left:1.6rem; }
#footer .contact-link a {
	color:#fff;
	font-size:.8rem;
	display:flex;
	align-items:center;
	padding:.6rem .7rem;
	border-radius:.2rem;
	background:#000;
	width:8.2rem;
	box-sizing:border-box;
}
#footer .contact-link .arrow {
  position: relative;
  display: inline-block;
  width:1rem;
  height:1rem;
  background:#fff;
  border-radius:100vmax;
  margin-right:.5rem;
}
#footer .contact-link .arrow::before,
#footer .contact-link .arrow::after {
  content:"";
  position:absolute;
  top:calc(50% - .05rem);
  right:calc(50% - .15rem);
  width:.35rem;
  height:.1rem;
  background-color:#000;
  transform-origin:calc(100% - .05rem) 50%;
}
#footer .contact-link .arrow::before { transform:rotate(45deg); }
#footer .contact-link .arrow::after { transform:rotate(-45deg); }
#footer .karakamiya { margin-top:3rem; margin-left:1.6rem; }
#footer .karakamiya a {
	display:flex;
	align-items:center;
	font-size:.9rem;
}
#footer .karakamiya a img {
	width:1.8rem;
	margin-right:.5rem;
}
#footer .karakamiya a:hover { opacity:.8; }
#footer .r-box { width:47.2rem; }
#footer .r-box .footer-nav {
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:flex-start;
}
#footer .r-box .footer-nav > li:nth-child(1),
#footer .r-box .footer-nav > li:nth-child(4) { width:16rem; }
#footer .r-box .footer-nav > li {
	width:calc((100% - 16rem - 8.4rem) / 2);
	margin-right:4.2rem;
	margin-bottom:3.2rem;
}
#footer .r-box .footer-nav > li:nth-child(3n) { margin-right:0; }
#footer .r-box .footer-nav > li .parent-name {
	padding-bottom:.7rem;
	border-bottom:.1rem solid #716D67;
	margin-bottom:1.2rem;
}
#footer .r-box .footer-nav > li .parent-name:nth-child(2) { margin-top:3.2rem; }
#footer .r-box .footer-nav > li .parent-name a {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}
#footer .r-box .footer-nav > li .parent-name a .arrow.normal-size { width:1.6rem; height:1.6rem; }
#footer .r-box .footer-nav > li .parent-name .en-font {
	font-size:1rem;
	font-weight:600;
	color:#716D67;
	display:block;
}
#footer .r-box .footer-nav > li .parent-name .jp {
	font-size:1.4rem;
	display:block;
	margin-top:.3rem;
}
#footer .r-box li .chils-list li {
	font-size:.9rem;
	margin-bottom:.8rem;
}
#footer .r-box li .chils-list li a {
	display:flex;
	align-items:center;
}
#footer .r-box li .chils-list li a .arrow.mini-size { width:1rem; height:1rem; margin-right:.3rem; }
#footer .r-box li .chils-list li a .arrow.mini-size::before,
#footer .r-box li .chils-list li a .arrow.mini-size::after {
  width:.3rem;
  right:calc(50% - .15rem);
}
#footer .r-box li .chils-list li a:hover { opacity:.8; }
#footer .r-box li .chils-list.products { display:flex; flex-wrap:wrap; }
#footer .r-box li .chils-list.products li { width:50%; }
#footer .r-box li .chils-list.products li:nth-child(1) { order:1; }
#footer .r-box li .chils-list.products li:nth-child(2) { order:3; }
#footer .r-box li .chils-list.products li:nth-child(3) { order:5; }
#footer .r-box li .chils-list.products li:nth-child(4) { order:7; }
#footer .r-box li .chils-list.products li:nth-child(5) { order:9; }
#footer .r-box li .chils-list.products li:nth-child(6) { order:11; }
#footer .r-box li .chils-list.products li:nth-child(7) { order:13; }
#footer .r-box li .chils-list.products li:nth-child(8) { order:15; }
#footer .r-box li .chils-list.products li:nth-child(9) { order:2; }
#footer .r-box li .chils-list.products li:nth-child(10) { order:4; }
#footer .r-box li .chils-list.products li:nth-child(11) { order:6; }
#footer .r-box li .chils-list.products li:nth-child(12) { order:8; }
#footer .r-box li .chils-list.products li:nth-child(13) { order:10; }
#footer .r-box li .chils-list.products li:nth-child(14) { order:12; }
#footer .r-box li .chils-list.products li:nth-child(15) { order:14; }
#footer .r-box li .chils-list.products li:nth-child(16) { order:16; }
#footer .footer-sub-box {
	margin-top:1rem;
	align-items:flex-end;
}
#footer .footer-sub-box small {
	font-size:.8rem;
	margin-bottom:.6rem;
	color:#716D67;
}
#footer .footer-sub-box .footer-sub-nav {
	width:47.2rem;
	flex-wrap:wrap;
	justify-content:flex-start;
	font-size:.8rem;
}
#footer .footer-sub-box .footer-sub-nav li { margin-bottom:.6rem; }
#footer .footer-sub-box .footer-sub-nav li::after {
	content:"";
	width:.05rem;
	height:1em;
	background:#1A1816;
	display:inline-block;
	margin:0 .8rem;
}
#footer .footer-sub-box .footer-sub-nav li:last-child::after { display:none; }
#footer .footer-sub-box .footer-sub-nav li a:hover { opacity:.8; }






/* =================== */
/*      body.index     */
/* =================== */
body.index #fv {
	height:100vh;
	min-height:53rem;
	position:relative;
	background:#F4F3EF;
}
body.index #fv .fv-pic-wrap {
	height:100vh;
	min-height:53rem;
	display:flex;
	justify-content:center;
	align-items:center;
}
body.index #fv .fv-pic-box {
	width:calc(100% - 12.6rem - 12.6rem);
	display:grid;
  row-gap:1.2rem;
	column-gap:1.2rem;
	grid-template-rows:1fr 1fr 1fr;
	grid-template-columns:1fr 1fr 1fr 1fr;
	margin:0 auto;
	height:100vh;
	min-height:53rem;
	box-sizing:border-box;
	padding:.6rem 0;
}
body.index #fv .fv-pic-box .item-in {
	animation:fadeIn 1s ease-in-out 1s forwards;
	opacity:0;
}
@keyframes fadeIn {
  to {
    opacity:1;
  }
}
body.index #fv .fv-pic-box .item-in {
	width:100%;
	height:100%;
	position:relative;
	overflow:hidden;
}
body.index #fv .fv-pic-box .item-in::before {
	content:"";
	width:100%;
	height:100%;
	background:#F4F3EF;
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
  animation:fadeIn2 1s ease-in-out .5s forwards;
  opacity:0;
}
@keyframes fadeIn2 {
	from {
		opacity:1;
	}
  to {
  	opacity:0;
    transform: translateX(100%);
  }
}
body.index #fv .fv-pic-wrap .item .swiper {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
body.index #fv .fv-pic-wrap .item .swiper-slide {
	width:100%;
	height:100%;
	position:relative;
}
body.index #fv .fv-pic-wrap .item .swiper-slide::before {
	content:"";
	width:100%;
	height:100%;
	background:url(../img/mask.png) no-repeat;
	background-size:cover;
	display:block;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
  transition:1s ease;
}
body.index #fv .fv-pic-wrap .item .swiper-slide.swiper-slide-active::before {
	opacity:0;
}
body.index #fv .fv-pic-wrap .item .swiper-slide.swiper-slide-next::before {
	opacity:1;
}
body.index #fv .fv-pic-wrap .item .swiper-slide img {
	transition:clip-path .5s ease-in-out;
	width:100%;
	height:100%;
	object-fit:cover;
}
/*body.index #fv .fv-pic-wrap .item .swiper-slide.swiper-slide-next img {
  clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
body.index #fv .fv-pic-wrap .item .swiper-slide.swiper-slide-active img {
  clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}*/
body.index #fv .fv-pic-wrap .item {
	background-image:linear-gradient(0deg, transparent calc(100% - 1px), #fff calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #fff calc(100% - 1px));
  background-repeat:repeat;
  background-position:top left;
  border:1px solid #fff;
  border-top:0;
  position:relative;
}
body.index #fv .fv-pic-wrap .item1 {
	grid-row:1 / span 1;
	grid-column:1 / span 1;
  background-size:2.4rem 2.4rem;
}
body.index #fv .fv-pic-wrap .item2 {
	grid-row:1 / span 1;
	grid-column:2 / span 2;
	background-size:1.08rem 1.2rem;
}
body.index #fv .fv-pic-wrap .item3 {
	grid-row:1 / span 2;
	grid-column:4 / span 1;
	background-size:2.8rem 1.2rem;
}
body.index #fv .fv-pic-wrap .item4 {
	grid-row:2 / span 2;
	grid-column:1 / span 1;
	background-size:2.4rem 1.2rem;
}
body.index #fv .fv-pic-wrap .item5 {
	grid-row:2 / span 1;
	grid-column:2 / span 1;
	background-size:2.4rem 1.2rem;
}
body.index #fv .fv-pic-wrap .item6 {
	grid-row:3 / span 1;
	grid-column:2 / span 1;
	background-size:2.4rem 1.2rem;
}
body.index #fv .fv-pic-wrap .item7 {
	grid-row:2 / span 1;
	grid-column:3 / span 1;
	background-size:2.4rem 2.4rem;
}
body.index #fv .fv-pic-wrap .item8 {
	grid-row:3 / span 1;
	grid-column:3 / span 2;
	background-size:1.08rem 1.2rem;
}
body.index #fv .copy-left {
	width:12.6rem;
	height:26.9rem;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto 0;
}
body.index #fv .copy-right {
	width:12.6rem;
	height:31.15rem;
	position:absolute;
	right:0;
	top:0;
	bottom:0;
	margin:auto 0;
}
body.index #fv .micro-copy {
	font-size:.6rem;
	line-height:1.3;
	color:#716D67;
	position:absolute;
	right:5rem;
	bottom:1.2rem;
}
body.index #fv .swiper-pagination {
	position:absolute;
	top:calc(100% - 1.5rem);
	left:1.3rem;
	width:10rem;
	height:2px;
	display:flex;
	justify-content:space-between;
}
body.index #fv .swiper-pagination .swiper-pagination-bullet {
	background:#DFDBD4;
	width:calc((100% - 1rem) / 3);
	height:2px;
	border-radius:2px;
	opacity:1;
	position:relative;
	margin:0;
}
body.index #fv .swiper-pagination .swiper-pagination-bullet::before {
	content:"";
	width:0;
	height:100%;
	background:#716D67;
	display:block;
	position:absolute;
	top:0;
	left:0;
	transition:none;
}
body.index #fv .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
	width:100%;
	transition:3s linear;
}


body.index .clr-bk-box {
	background:#F4F3EF;
	padding-top:8rem;
}
body.index #product-sec { margin:0 auto 8rem; }
body.index #product-sec .copy {
	font-size:1.8rem;
	font-weight:700;
	display:flex;
	align-items:center;
	margin-bottom:1.2rem;
	margin-top:3.2rem;
}
body.index #product-sec .copy::before {
	content:"";
	width:4.4rem;
	height:.2rem;
	background:#1A1816;
	display:block;
	margin-right:.8rem;
}
body.index #product-sec .copy.sp-on { display:none; }
body.index #product-sec .txt {
	font-size:1rem;
	line-height:2;
	font-weight:700;
	margin-top:1.4rem;
	margin-bottom:1.6rem;
}
body.index #product-sec .pic {
	border-radius:1.2rem;
	overflow:hidden;
}

body.index #business-sec .pic {
	width:31.2rem;
	position:relative;
	aspect-ratio:7.68 / 14.08;
	border-radius:1.2rem;
	overflow:hidden;
}
body.index #business-sec .pic img {
	transition-duration:1s;
  transition-property:opacity;
  height:0;
  width:100%;
  position:absolute;
  top:0;
  left:0;
}
body.index #business-sec .pic img.on { opacity:1; height:100%; }
body.index #business-sec .txt-box { width:39.3rem; }
body.index #business-sec ol {
	border-top:.1rem solid #B2ADA5;
	margin-top:3.2rem;
	margin-bottom:2.4rem;
}
body.index #business-sec li { border-bottom:.1rem solid #B2ADA5; }
body.index #business-sec li a {
	display:flex;
	padding:2.4rem 1.6rem 2.4rem 1.8rem;
	position:relative;
}
body.index #business-sec li a::before {
	content:"";
	width:0;
	background:#fff;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}
body.index #business-sec li a:hover::before {
	animation:transformBk 2.1s linear forwards;
	width:100%;
}
@keyframes transformBk {
  0% {
    width:0;
  }
  100% {
    widht:100%;
  }
}
body.index #business-sec li .list-txt-box {
	margin:0 1.2rem;
	position:relative;
}
body.index #business-sec li .num {
	font-size:1.2rem;
	font-weight:600;
	color:#888;
	padding-top:.4rem;
	position:relative;
}
body.index #business-sec li h3 {
	font-size:2rem;
	font-weight:700;
}
body.index #business-sec li .txt {
	font-size:1rem;
	font-weight:700;
	line-height:1.8;
	margin-top:1.2rem;
	width:27.8rem;
}
body.index #business-sec li .arrow {
	position:absolute;
	top:2.4rem;
	right:1.6rem;
}
body.index #business-sec .karakamiya { margin-top:3rem; }
body.index #business-sec .karakamiya a {
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:.9rem;
	padding:.5rem 1rem;
	border:1px solid #000;
	border-radius:.2rem;
	width:17rem;
	box-sizing:border-box;
	margin-left:calc(100% - 17rem);
}
body.index #business-sec .karakamiya a img {
	width:1.8rem;
	margin-right:.5rem;
}
body.index #business-sec .karakamiya a:hover { opacity:.8; }

body.index #information-sec {
	/*background:url(../img/information_bk.svg) no-repeat left top;*/
	padding:16rem 0;
	position:relative;
}
body.index #information-sec .wave {
	width:48.35rem;
	position:absolute;
	left:0;
	bottom:-5rem;
}
body.index #information-sec .inner-box { justify-content:flex-end; }
body.index #information-sec .cont-box {
	width:63.6rem;
	background:rgba(244, 243, 239, 0.80);
	border-top:.1rem solid #716D67;
	border-bottom:.1rem solid #716D67;
	padding:3.2rem 3.5rem;
	align-items:flex-start;
	position:relative;
	z-index:1;
}
body.index #information-sec .dot-title-design .en-font { font-size:3.2rem; }
body.index #information-sec .dot-title-design .jp { font-size:1rem; margin-top:.5rem; }
body.index #information-sec .txt-box { width:29.25rem; }
body.index #information-sec .news-link {
	margin-bottom:2.4rem;
	justify-content:flex-start;
	padding-bottom:1rem;
	border-bottom:.05rem dashed #716D67;
}
body.index #information-sec .news-link time {
	border:.05rem solid #716D67;
	font-size:.6rem;
	color:#716D67;
	padding:.3rem;
	border-radius:.1rem;
	margin-right:.8rem;
}
body.index #information-sec .news-link .title {
	font-size:1rem;
	font-weight:700;
	width:23em;
	/*overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;*/
  line-height:1.3;
}
body.index #information-sec .news-link a:hover { opacity:.8; }

body.index #philosophy-sec { position:relative; }
body.index #philosophy-sec .bk {
	position:sticky;
	top:0;
	left:0;
	width:100%;
	height:100vh;
}
body.index #philosophy-sec .bk img {
	width:100%;
	height:100%;
	object-fit:cover;
}
body.index #philosophy-sec .cont-box {
	z-index:1;
	padding:8rem 0;
}
body.index #philosophy-sec .txt-box {
	width:49.8rem;
	/*position:absolute;
	top:8rem;
	left:0;
	right:0;*/
	margin:0 auto;
	position:relative;
	margin-top:-98vh;
}
body.index #philosophy-sec h2 {
	width:6.15rem;
	margin:0 auto;
}
body.index #philosophy-sec .txt {
	font-size:1.2rem;
	line-height:2.5;
	font-weight:700;
	text-align:center;
	margin-top:7.6rem;
	color:#fff;
}
body.index #philosophy-sec .line-btn-design {
	text-align:center;
	margin-top:5rem;
}
body.index #philosophy-sec .pic-box {
	width:calc((100% - 49.8rem) / 2);
	position:absolute;
}
body.index #philosophy-sec .pic-box.l-pic-box {
	top:5.1rem;
	left:0;
}
body.index #philosophy-sec .pic-box.r-pic-box {
	top:21rem;
	right:0;
}
body.index #philosophy-sec .pic-box .pic1 {
	width:14.25rem;
	margin-left:3.3rem;
}
body.index #philosophy-sec .pic-box .pic2 {
	width:16.75rem;
	margin-top:29rem;
}
body.index #philosophy-sec .pic-box .pic3 {
	width:14.25rem;
	margin:21rem auto 0;
}


body.index #company-sec { margin:8rem auto; }
body.index #company-sec ul {
	margin-top:3.2rem;
	margin-bottom:2.4rem;
}
body.index #company-sec li { width:calc((100% - 1.2rem) / 2); }
body.index #company-sec li a {
	padding:8rem 3.2rem 2.4rem;
	display:block;
	border-radius:.8rem;
	position:relative;
}
body.index #company-sec li:nth-child(1) a {
	background:#F4F3EF url(../img/company_bk1.svg) no-repeat right top;
	background-size:90%;
}
body.index #company-sec li:nth-child(2) a {
	background:#F4F3EF url(../img/company_bk2.svg) no-repeat right top;
	background-size:90%;
}
body.index #company-sec li:nth-child(1) a:hover { background-size:100%; }
body.index #company-sec li:nth-child(2) a:hover { background-size:100%; }
body.index #company-sec li h3 .en-font {
	font-size:1rem;
	font-weight:700;
	margin-bottom:.8rem;
	display:block;
	color:#716D67;
}
body.index #company-sec li h3 .jp {
	font-size:2rem;
	font-weight:700;
	display:block;
}
body.index #company-sec li .txt {
	font-size:1rem;
	line-height:1.5;
	font-weight:700;
	margin-top:1.6rem;
}
body.index #company-sec li .arrow {
	position:absolute;
	right:3.2rem;
	bottom:2.6rem;
}

body.index #recruit-sec { padding-top:3.6rem; margin-bottom:8rem; }
body.index #recruit-sec .pic {
	position:relative;
	z-index:1;
	border-radius:1.2rem;
	overflow:hidden;
	aspect-ratio:15.96 / 6.16;
}
body.index #recruit-sec .pic img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:0.5s ease all;
}
body.index #recruit-sec a:hover .pic img { transform:scale(1.02); }
body.index #recruit-sec .txt-box {
	background:#4A0746;
	position:relative;
	padding:18rem 0 5.6rem 11.15rem;
	border-radius:1.2rem;
	justify-content:flex-start;
	width:89.4rem;
	margin:-14rem -4.8rem 0;
}
body.index #recruit-sec .txt-box::before {
	content:"";
	width:100%;
	height:100%;
	background:url(../img/recruit_bk.png) no-repeat;
	background-size:cover;
	position:absolute;
	left:0;
	top:0;
	mix-blend-mode:soft-light;
}
body.index #recruit-sec .txt-box .l-box {
	position:relative;
	width:26rem;
	margin-right:10rem;
}
body.index #recruit-sec .txt-box .l-box ul {
	flex-wrap:wrap;
	justify-content:flex-start;
	margin-top:3.2rem;
	margin-left:1.6rem;
}
body.index #recruit-sec .txt-box .l-box li {
	font-size:.8rem;
	color:#fff;
	margin-bottom:.8rem;
}
body.index #recruit-sec .txt-box .l-box li::after {
	content:"";
	width:.05rem;
	height:1em;
	background:#fff;
	display:inline-block;
	margin:0 .8rem;
}
body.index #recruit-sec .txt-box .l-box li:last-child::after { display:none; }
body.index #recruit-sec .txt-box .r-box {
	position:relative;
	width:27.8rem;
}
body.index #recruit-sec .txt-box .r-box .line-btn-design {
	margin-top:3.6rem;
	text-align:left;
}





@media screen and (max-width: 960px) {
	.inner-box { width:95%; max-width:750px; }
	#header nav { width:max(540px, 70%); }
	body.index #recruit-sec .txt-box { width:105%; margin:-14rem -2.5% 0; padding:18rem 2.5% 5.6rem; justify-content:center; }
	body.index #philosophy-sec .txt-box { width:40rem; }
	body.index #philosophy-sec .pic-box { width:calc((100% - 40rem) / 2); }
	body.index #business-sec .txt-box { width:37rem; }
}



@media screen and (max-width: 750px) {
	.pc-on { display:none; }
	.sp-on { display:initial; }

	body.open { overflow:hidden; }
	.inner-box { width:91.5%; }
	#header nav { opacity:0; transition: 0.5s ease all; display:block; position:fixed; top:0; left:100%; background:#F4F3EF; padding:80px 0; }
	#header .header-inner-box { padding:12px; background:#F4F3EF; transition:none; }
	#header.fixed .header-inner-box { background:#F4F3EF; }
	#header #site-logo { width:128px; padding-bottom:0; position:relative; z-index:1; }
	#header #hamburger {
		display:block;
		width:40px;
		height:40px;
		cursor:pointer;
		z-index:10000;
		position:fixed;
		right:16px;
		top:6px;
		background:#6F0B65;
		border-radius:4px;
	}
	#header #hamburger .inner_line {
		display:block;
		width:28px;
		height:1.5px;
		transition:1s;
		background:#fff;
		position:absolute;
		left:6px;
		border-radius:1.5px;
	}
	#header #hamburger .inner_line span { transition:all .4s; }
	#header #hamburger #line1 { top:16px; }
	#header #hamburger #line2 { bottom:15px; width:20px }
	#header #hamburger.open #line1 { transform:translateY(3px) rotate(-45deg); }
	#header #hamburger.open #line2 { transform:translateY(-4px) rotate(45deg); width:28px; }
	#header.open nav { opacity:1; width:100%; height:100vh; overflow-y:auto; left:0; }
	#header #main-content-nav { display:block; width:91.5%; margin:0 auto; }
	#header #main-content-nav .parent-link { font-size:16px; }
	#header #main-content-nav > li { padding:0; margin-bottom:40px; }
	#header #main-content-nav > li.sp-on { display:block; }
	#header #main-content-nav > li.has-child:hover .sub-nav-box { display:none; }
	#header #main-content-nav .parent-link { padding-bottom:8px; border-bottom:1px solid #716D67; position:relative; }
	#header #main-content-nav .parent-link a { display:block; width:calc(100% - 30px); }
	#header #main-content-nav .parent-link .en-font { display:block; font-size:12px; margin-bottom:4px; color:#716D67; }
	#header #main-content-nav .parent-link .arrow::before,
	#header #main-content-nav .parent-link .arrow::after { animation:none; }
	#header #main-content-nav .parent-link .arrow {
	  position: absolute;
	  display: inline-block;
	  width:25px;
	  height:25px;
	  border:.1rem solid #1A1816;
	  border-radius:100vmax;
	  overflow:hidden;
	  right:0;
	  bottom:8px;
	}
	#header #main-content-nav .parent-link .arrow::before,
	#header #main-content-nav .parent-link .arrow::after {
	  content:"";
	  position:absolute;
	  top:calc(50% - .05rem);
	  right:calc(50% - .25rem);
	  left:initial;
	  width:.5rem;
	  height:.1rem;
	  background:#1A1816;
	  transform-origin:calc(100% - .05rem) 50%;
	}
	#header #main-content-nav .parent-link .arrow::before { transform:rotate(45deg); }
	#header #main-content-nav .parent-link .arrow::after { transform:rotate(-45deg); }
	#header #main-content-nav .parent-link .arrow.sp-on { display:inline-block; transition:none; }
	#header #main-content-nav .has-child .parent-link .arrow::before,
	#header #main-content-nav .has-child .parent-link .arrow::after {
		width:10px;
		right:6px;
		transform-origin:inherit;
	}
	#header #main-content-nav .has-child .parent-link .arrow::before { transform:rotate(0deg); }
	#header #main-content-nav .has-child .parent-link .arrow::after { transform:rotate(90deg); }
	#header #main-content-nav > li.has-child.open .sub-nav-box { display:block; position:initial; background:none; padding:0; margin-top:16px; }
	#header #main-content-nav .sub-nav-box .l-box { display:none; }
	#header #main-content-nav li.products .sub-nav-box .child-link-list { display:block; width:100%; }
	#header #main-content-nav li.products .sub-nav-box .child-link-list li { width:100%; }
	#header #main-content-nav .sub-nav-box .child-link-list li { margin-bottom:12px; }
	#header #main-content-nav .sub-nav-box .child-link-list li .jp { font-size:14px; }
	#header #main-content-nav .has-child.open .parent-link .arrow::after { transform:rotate(180deg); }
	#header #sub-content-nav { display:block; width:91.5%; margin:0 auto; }
	#header #sub-content-nav .icon-link { display:none; }
	#header #sub-content-nav .txt-btn-link { margin:40px 0; }
	#header #sub-content-nav .txt-btn-link a { width:100%; line-height:42px; padding:0; border-radius:4px; font-size:16px; justify-content:center; }
	#header #sub-content-nav .txt-btn-link .arrow { width:20px; height:20px; }
	#header #sub-content-nav .txt-btn-link .arrow::before, #header #sub-content-nav .txt-btn-link .arrow::after { width:6px; right:calc(50% - 3px); }
	#header #sub-content-nav .recruit-link { display:none; }
	#header #sub-content-nav2 { display:block; width:91.5%; margin:0 auto; border-top:1px solid #716D67; }
	#header #sub-content-nav2 li { font-size:12px; padding:12px 0; border-bottom:1px solid #716D67; line-height:1.6; }

	body.index #fv { height:100vh; min-height:inherit; padding-top:156px; display:flex; flex-wrap:wrap; }
	body.index #fv .fv-pic-wrap { height:calc(100% - 156px); min-height:inherit; width:91.5%; order:2; margin:0 auto; display:block; }
	body.index #fv .copy-left { position:initial; order:3; width:227px; height:auto; margin-left:calc(100% - 227px - 4.25%); margin-top:24px; }
	body.index #fv .copy-right { position:initial; order:1; width:232px; height:auto; margin-left:4.25%; }
	body.index #fv .fv-pic-box { height:100%; min-height:inherit; padding:10px 0; width:100%; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr 1fr; row-gap:4px; column-gap:4px; }
	body.index #fv .swiper-pagination { position:initial; width:120px; margin-left:calc(100% - 140px); }
	body.index #fv .micro-copy { bottom:initial; top:88px; right:16px; font-size:10px; }
	body.index #fv .fv-pic-wrap .item5 { grid-column:1 / span 1; }
	body.index #fv .fv-pic-wrap .item6 { grid-row:2 / span 1; }
	body.index #fv .fv-pic-wrap .item3 { grid-row:2 / span 2; grid-column:3 / span 1; }
	body.index #fv .fv-pic-wrap .item8 { grid-row:4 / span 1; grid-column:2 / span 2; }
	body.index #fv .fv-pic-wrap .item7 { grid-row:3 / span 1; grid-column:2 / span 1; }
	body.index #fv .fv-pic-wrap .item4 { grid-row:3 / span 2; }

	.dot-title-design .en-font { font-size:32px; }
	.dot-title-design .jp { font-size:16px; }
	.line-btn-design .name .name-in { font-size:16px; }
	.hvr-arrow-anime .arrow.normal-size { width:32px; height:32px; }

	body.index #product-sec .copy { font-size:20px; line-height:1.3; align-items:flex-start; display:flex !important; margin-bottom:20px; }
	body.index #product-sec .copy::before { width:24px; margin-top:13px; }
	body.index #product-sec .copy.pc-on { display:none !important; }
	body.index #product-sec .txt { font-size:16px; line-height:1.8; margin-left:60px; }
	body.index #product-sec .pic { margin-top:24px; }

	body.index #business-sec .inner-box > .flex-box { display:block; }
	body.index #business-sec .txt-box { width:100%; }
	body.index #business-sec .pic { display:none; }
	body.index #business-sec .pic.sp-on { display:block; width:100%; aspect-ratio:auto; margin-bottom:24px; border-radius:10px; overflow:hidden; }
	body.index #business-sec .pic img { position:initial; opacity:1; height:auto; transition:none; }
	body.index #business-sec li a { padding:40px 0; flex-wrap:wrap; }
	body.index #business-sec li a::before { display:none; }
	body.index #business-sec li h3 { font-size:24px; }
	body.index #business-sec li .txt { font-size:16px; width:100%; }
	body.index #business-sec li .num { font-size:16px; width:44px; text-align:right; padding-right:4px; }
	body.index #business-sec li .list-txt-box { width:calc(100% - 44px - 24px); }
	body.index #business-sec li .arrow { display:none; }
	body.index #business-sec .karakamiya a { font-size:16px; padding:7px 0; width:270px; margin-left:calc(100% - 270px); }
	body.index #business-sec .karakamiya a img { width:30px; }

	body.index #information-sec .cont-box { width:100%; display:block; padding:48px 16px 36px; }
	body.index #information-sec .dot-title-design { margin-bottom:24px; }
	body.index #information-sec .dot-title-design .jp { font-size:16px; }
	body.index #information-sec .news-link { display:block; margin-bottom:48px; }
	body.index #information-sec .news-link time { font-size:10px; padding:0 3px; margin-right:0; }
	body.index #information-sec .news-link .title { font-size:16px; width:100%; margin-top:15px; }
	body.index #information-sec .wave { opacity:.4; width:100%; bottom:-20px; }

	body.index #philosophy-sec .pic-box { width:50%; }
	body.index #philosophy-sec .pic-box .pic1 { width:88px; margin-left:16px; }
	body.index #philosophy-sec .pic-box .pic3 { width:112px; margin-left:60px; }
	body.index #philosophy-sec .txt-box { width:91.5%; z-index:1; }
	body.index #philosophy-sec .txt { font-size:16px; }

	body.index #company-sec { margin-bottom:56px; }
	body.index #company-sec ul { display:block; }
	body.index #company-sec li { width:100%; margin-bottom:16px; }
	body.index #company-sec li a { border-radius:10px; padding:48px 16px 16px; }
	body.index #company-sec li h3 .en-font { font-size:14px; }
	body.index #company-sec li h3 .jp { font-size:24px; }
	body.index #company-sec li .txt { font-size:16px; line-height:1.6; }
	body.index #company-sec li .arrow { margin-right:0; right:16px; bottom:inherit; top:66px; }

	body.index #recruit-sec { padding-top:0; position:relative; }
	body.index #recruit-sec .inner-box { background:#4A0746; padding:16px 16px 44px; border-radius:10px; }
	body.index #recruit-sec .inner-box::before {
		content:"";
    width:100%;
    height:100%;
    background:url(../img/recruit_bk.png) no-repeat;
    background-size:cover;
    position:absolute;
    left:0;
    top:0;
    mix-blend-mode:soft-light;
	}
	body.index #recruit-sec .txt-box { width:100%; margin:0 auto; padding:40px 0 0; display:block; }
	body.index #recruit-sec .pic { border-radius:0; aspect-ratio:2.79 / 1.7; padding:16px 16px 0; box-sizing:content-box; }
	body.index #recruit-sec .pic img { border-radius:10px; }
	body.index #recruit-sec .dot-title-design .jp { text-align:left; }
	body.index #recruit-sec .txt-box .l-box ul { display:none; }
	body.index #recruit-sec .txt-box .r-box { width:100%; }
	body.index #recruit-sec .txt-box .r-box .copy { width:247px; margin:32px auto 40px; }
	body.index #recruit-sec .txt-box .r-box .line-btn-design { text-align:right; }

	#footer { padding:40px 0 24px; border-radius:10px 10px 0 0; }
	#footer .footer-main-box { display:block; }
	#footer .footer-logo { margin-bottom:24px; }
	#footer address { margin-left:0; }
	#footer address .name { font-size:16px; line-height:1.35; }
	#footer address .add { font-size:14px; margin:40px 0 20px; }
	#footer address .tel, #footer address .fax { font-size:14px; }
	#footer .inst-icon { width:24px; margin:24px 0; }
	#footer .contact-link { margin-left:0; }
	#footer .contact-link a { width:100%; line-height:42px; padding:0; border-radius:4px; font-size:16px; justify-content:center; }
	#footer .contact-link .arrow { width:20px; height:20px; }
	#footer .contact-link .arrow::before, #footer .contact-link .arrow::after { width:6px; right:calc(50% - 3px); }
	#footer .karakamiya { margin-left:0; }
	#footer .karakamiya a { font-size:16px; }
	#footer .karakamiya a img { width:30px; }
	#footer .r-box { width:100%; margin-top:60px; }
	#footer .r-box .footer-nav { display:block; }
	#footer .r-box .footer-nav > li:nth-child(1), #footer .r-box .footer-nav > li:nth-child(4) { width:100%; }
	#footer .r-box .footer-nav > li { width:100%; margin-right:0; margin-bottom:40px; }
	#footer .r-box .footer-nav > li .parent-name { padding-bottom:10px; margin-bottom:24px; }
	#footer .r-box .footer-nav > li .parent-name .en-font { font-size:14px; }
	#footer .r-box .footer-nav > li .parent-name .jp { font-size:20px; margin-top:4px; }
	#footer .r-box .footer-nav > li .parent-name:nth-child(2) { margin-top:40px; }
	#footer .r-box li .chils-list li { font-size:16px; }
	#footer .r-box li .chils-list.products { display:block; }
	#footer .r-box li .chils-list.products li { width:100%; }
	#footer .r-box li .chils-list li a .arrow.mini-size { width:20px; height:20px; }
	#footer .r-box li .chils-list li a .arrow.mini-size::before,
	#footer .r-box li .chils-list li a .arrow.mini-size::after { width:.4rem; right:calc(50% - .2rem); }
	#footer .r-box .footer-nav > li .parent-name a .arrow.normal-size { width:32px; height:32px; }
	#footer .footer-sub-box { flex-wrap:wrap; }
	#footer .footer-sub-box .footer-sub-nav { width:100%; font-size:12px; order:1; }
	#footer .footer-sub-box .footer-sub-nav li { margin-bottom:8px; }
	#footer .footer-sub-box .copy { order:2; margin-top:40px; width:100%; }
	#footer .footer-sub-box small { font-size:12px; margin-bottom:0; text-align:center; width:100%; display:block; }




}