@charset "utf-8";



.col_w{
	color: #fff;
}




/* ---------------------------------------
* common
------------------------------------------ */

.btn.sp{
	display: none;
}

.sp{
	display: none;
}

svg{
	width: 100%;
	height: 100%;
}

:root {
	--primary: #3BC633;
	--primary02: #0E6138;
	--bg01: #F4F7F5;
	--bg02: #F8F8F8;
	--accent:#02DDAC;
}

.tac{
	text-align: center;
}

.bg-b{
	background-repeat: repeat-y;
	background-size: cover;
	background-image: url(../img/common/bg.webp);
}

.bg-g{
	background-color: #F7F7F7;
}

.txtSlide {
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	width: 100%;
}

.txtSlideInner {
	will-change: transform;
	animation: txtSlideAnim linear infinite;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-play-state: running;
}

.txtSlideInner span {
	display: block;
	font-weight: 900;
	font-size: 2rem;
	text-transform: uppercase;
	white-space: nowrap;
	letter-spacing: normal;
	line-height: 100%;
}

@keyframes txtSlideAnim {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-200%);
	}
}

.txtSlideBrand .txtSlideInner{
	column-gap: 2rem;
}

.txtSlideBusiness .txtSlideInner,.txtSlidBrand .txtSlideInner{
	column-gap: 6rem;
}

.txtSlideBrand span{
	font-size: clamp(20px,10rem,120px);
}

.txtSlideBusiness span{
	font-size: clamp(20px,14rem,140px);
	color: #EDF0EE;
}

.txtSlidBrand02{
	position: absolute;
	left: 0;
	bottom: 6rem;
}

.txtSlidBrand02 span{
	font-size: clamp(20px,16rem,160px);
	color: rgba(255,255,255,.1);
	padding-right: 16rem;
	position: relative;
}

.txtSlidBrand02 span::after{
	content: "";
	width: 10rem;
	height: 1.4rem;
	background-color: rgba(255,255,255,.1);
	position: absolute;
	right: 0;
	top: 50%;
	transform:translatey(-50%);
}

/* ---------------------------------------
* TOP
------------------------------------------ */

.mv{
	padding: 14rem 0 4rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/top/mvbg.webp);
	position: relative;
}

.mvWrap{
	position: relative;
	z-index: 2;
}

.mvShape{
	width: 139rem;
	position: absolute;
	right: 0;
	top: 8rem;
}

.mvTxt{
	align-items: flex-end;
}

.mvTxt h2{
	font-size: clamp(48px,8.6rem,86px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: normal;
	color: var(--primary);
	-webkit-text-stroke: 1px #000;
}

.mvTxt p{
	font-size: clamp(14px,2rem,24px);
	font-weight: 700;
	line-height: 1.6;
}

.custom-carousel {
	position: relative;
	width: 100%;
	margin: 4rem auto 0;
	height: 54rem;
	overflow: hidden;
}

.carousel-track {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	position: relative;
}

.carousel-slide {
	position: absolute;
	top: 0; 
	left: 50%;
	transform: translateX(-50%) scale(0.75);
	opacity: 0;
	transition: 
		transform 0.7s cubic-bezier(.77,0,.18,1),
		opacity 0.7s,
		z-index 0s;
	width: 76rem;
	z-index: 1;
	pointer-events: none;
	/* clip-path: inset(0 30% 0 30% round 30px); */
}

.carousel-slide a{
	display: block;
}

.carousel-slide.active {
	transform: translateX(-50%) scale(1);
	opacity: 1;
	z-index: 2;
	pointer-events: auto;
	/* clip-path: inset(0 0 0 0 round 30px); */
}
.carousel-slide.left {
	transform: translateX(-165%) scale(0.85);
	opacity: 1;
	z-index: 1;
}
.carousel-slide.right {
	transform: translateX(65%) scale(0.85);
	opacity: 1;
	z-index: 1;
}


.carousel-img {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 10px;
	position: relative;
	border: solid 1px #000;
	transition: all .5s;
}

.carousel-slide a:hover .carousel-img{
	border-radius: 300px;
}

.carousel-img::after{
	content: "";
	display: block;
	padding-top: 56.75%;
}

.carousel-caption {
	position: absolute;
	left: -4rem;
	bottom: -4rem;
	width: 70%;
	border-radius: 16px;
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.6s, transform 0.6s;
}
.carousel-slide.active .carousel-caption {
	opacity: 1;
	transform: translateY(0);
}
.carousel-label {
	display: inline-block;
	padding: 1rem 2rem;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: normal;
	background-color: #fff;
	border: solid 1px #000;
	border-bottom: unset;
	border-radius: 10px 10px 0 0;
}
.carousel-title {
	font-weight: 600;
	line-height: 160%;
	letter-spacing: normal;
	font-size: 2rem;
	background-color: #fff;
	border: solid 1px #000;
	border-radius: 0 10px 10px 10px;
	padding: 2rem;
}

.carousel-arrow {
	position: absolute;
	top: 35%;
	background: #111;
	color: #fff;
	border-radius: 8px;
	display: inline-block;
	padding: 1.6rem;
	z-index: 10;
	cursor: pointer;
}

.carousel-arrow .icon{
	width: 1.6rem;
	height: 1.6rem;
	position: relative;
}

.carousel-arrow .icon svg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.carousel-arrow.prev { 
	left: 23rem; 
}
.carousel-arrow.next { 
	right: 23rem; 
}

.carousel-pagination {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.carousel-pagination .dot {
	cursor: pointer;
	display: inline-block;
	width: 9px; height: 9px;
	margin: 0 7px;
	background: #222;
	border-radius: 50%;
	opacity: 0.4;
	transition: opacity 0.3s;
}
.carousel-pagination .dot.active {
	opacity: 1;
}



.section-about{
	padding-bottom: 27rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/top/aboutbg.webp);
	background-position: center;
}


.aboutWrap{
	padding-left: 10rem;
}

.about-l{
	width: 46%;
}

.about-r{
	width: 54%;
	padding-top: 6rem;
}

.about-r p{
	font-weight: 700;
	font-size: clamp(14px,1.8rem,18px);
}

.about-r p:not(:last-of-type){
	padding-bottom: 3rem;
}

.section-topProject{
	background-color: var(--bg01);
}

.topProjectSide{
	display: flex;
	align-items: flex-start;
	padding: 8rem 1.5rem 0;
	border-right: solid 1px #000;
}

.topProjectSide h2{
	font-weight: 700;
	color: #0E6138;
	writing-mode: vertical-rl;
	white-space: noWrap;
	font-size: clamp(48px,12rem,120px);
	line-height: 100%;
}

.topProjectCont{
	flex: 1;
}

.topProjectMain{
	padding: 6rem 4rem;
}

.projectMainImg{
	width: 60%;
}

.projectMainImg .img{
	border-radius: 10px;
	border: solid 1px #000;
	width: 100%;
	padding-top: 56%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.projectMainTxt{
	width: 35%;
}

.projectMainTxt h2{
	font-size: clamp(14px,2.4rem,28px);
	font-weight: 700;
	line-height: 1.6;
	padding: 1rem 0 2rem;
}

.projectMainPara{
	font-weight: 500;
	font-size: clamp(12px,1.4rem,16px);
}

.btnProject{
	margin: 6rem 4rem 6rem auto;
}

.section-business{
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/top/b-bg02.webp);
}

.businessTxt p{
	font-weight: 500;
}

.businessTxt p:not(:last-of-type){
	padding-bottom: 3rem;
}

.business-list{
	column-gap: 3rem;
}

.business-listItem{
	padding: 1rem;
	background-color: #fff;
	border-radius: 10px;
	width: calc((100% - (3rem * 2)) / 3);
}

.business-listInner{
	padding: 3rem 3rem 3rem;
	border: solid 1px #000;
	border-radius: 5px;
}

.business-listTtl p{
	font-size: clamp(12px,1.4rem,16px);
	font-weight: 700;
	line-height: 1.6;
	color: var(--primary);
	letter-spacing: normal;
	padding-bottom: 1rem;
}

.business-listTtl h3{
	font-size: clamp(18px,2.8rem,32px);
	line-height: 100%;
	font-weight: 700;
}

.business-listImg{
	padding: 2rem 0;
}

.business-listInner>p{
	font-size: clamp(12px,1.4rem,14px);
}

.btnBusiness{
	margin: 0 auto;
}

.section-brand{
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/top/brand.webp);
}

.brnadTtl{
	display: inline-block;
	padding-bottom: 4rem;
	position: relative;
}

.brnadTtl::after{
	content: "";
	display: block;
	width: 100%;
	height: 4rem;
	position: absolute;
	left: 0;
	bottom: 0;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-image: url(../img/top/bar.webp);
}

.topNews-l{
	width: 20%;
}

.topNews-r{
	width: 78.7%;
}

.btnNews{
	margin-left: auto;
}

/* ---------------------------------------
* ABOUT
------------------------------------------ */

.sideIndex{
	z-index: 10;
	position: fixed;
	left: 4rem;
	bottom: 3rem;
	width: 18rem;
	padding: 3rem 2rem;
	border-radius: 10px;
	background-color: #fff;
	border: solid 1px #000;
	transition: all 0.3s;
}	

.sideIndex.active{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.sideIndex-listItem:not(:last-of-type) a{
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: dashed 1px #E5E5E5;
}

.sideIndex-listItem a span{
	display: block;
}

.sideIndex-listItem a span:first-of-type{
	font-size: clamp(12px,1.4rem,14px);
	font-weight: 700;
	line-height: 160%;
}

.sideIndex-listItem a span:last-of-type{
	width: 1.8rem;
	height: 1.8rem;
	position: relative;
}

.sideIndex-listItem a span:last-of-type svg{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.section-mission{
	margin-top: -6rem;
	padding: 18rem 16rem 10rem 28rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/about/missionbg.webp);
	position: relative;
}

.missionWrap{
	position: relative;
}

.missionsubImg{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 20%;
}

.missiontree{
	position: absolute;
	z-index: 1;
}

.missiontree01{
	width: 10%;
	left: 3rem;
	bottom: 4rem;
}

.missiontree02{
	width: 20%;
	right: 0;
	bottom: 0;
}

.mission-l{
	width: 46%;
}

.missionTxt p{
	font-weight: 700;
}

.missionTxt p:not(:last-of-type){
	padding-bottom: 3rem;
}

.mission-r{
	width: 46%;
}

.section-mess{
	padding: 12rem 6rem 0 26rem;
}

.mess-l{
	width: 33.9%;
}

.messName{
	padding-top: 2rem;
}

.messName p:first-of-type{
	font-weight: 600;
	font-size: clamp(12px,1.2rem,14px);
	padding-bottom: 0.4rem;
	line-height: 160%;
	font-weight: 700;
}

.messName p:last-of-type span{
	display: block;
	font-size: clamp(12px,2rem,20px);
	line-height: 160%;
	font-weight: 700;
}

.messName p:last-of-type span:last-of-type{
	color: #9C9C9C;
	font-size: clamp(12px,1.2rem,14px);
	letter-spacing: normal;
}

.mess-r{
	width: 58.9%;
}

.messTxt{
	padding-top: 3rem;
}

.messTxt p{
	letter-spacing: .05em;
	font-size: clamp(12px,1.4rem,16px);
}

.messTxt p:not(:last-of-type){
	padding-bottom: 2rem;
}

.section-origin{
	padding: 10rem 6rem 0 26rem;
}

.originWrap{
	background-image: url(../img/about/originbg.webp);
	background-size: cover;
	background-repeat: no-repeat;
	padding: 8rem 6rem;
	border-radius: 10px;
}

.origin-l{
	width: 46%;
}

.origin-r{
	padding-top: 1rem;
	width: 50%;
}

.originTxt{
	padding-top: 2rem;
}

.originTxt p{
	font-size: clamp(12px,1.4rem,14px);
}

.originTxt p:not(:last-of-type){
	padding-bottom: 2rem;
}

.section-company{
	border-radius: 20px 20px 0 0;
	background-color: #fff;
	padding: 12rem 6rem 0 26rem;
	position: relative;
}

.comtree{
	width: 30%;
	position: absolute;
	left: 16rem;
	bottom: -16rem;
	z-index: 2;
}

.companycont{
	padding-top: 2rem;
	width: 58.9%;
	margin-left: auto;
}

.com-defList{
	padding-bottom: 2.4rem;
	margin-bottom: 2.4rem;
	position: relative;
	border-bottom: solid 1px #E0E0E0;
}

.com-defList::before{
	content: "";
	display: block;
	width: 6rem;
	height: 1px;
	background-color: #000;
	position: absolute;
	left: 0;
	bottom: 0;
}

.com-defList:last-of-type{
	margin-bottom: 0;
}

.com-defTtl,.com-defDesc{
	line-height: 160%;
}

.com-defTtl{
	flex: 0 0 12rem;
	width: 12rem;
}

.com-defDesc{
	flex: 1 1 auto;
}

.com-defDesc a{
	display: block;
	text-decoration: underline;
	padding-top: 0.6rem;
}

.section-client{
	position: relative;
	padding: 20rem 6rem 14rem 26rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/about/clientbg.webp);
}

.clientop{
	position: absolute;
	left: 0;
	top: 0;
}

.clientWrap{
	padding-top: 4rem;
}

.clientWrap02{
	padding-top: 6rem;
}

.client-list{
	column-gap: .5rem;
	row-gap: .5rem;
}

.client-listItem{
	width: calc((100% - (.5rem * 4)) / 5);
}

.clientCaution{
	text-align: right;
	color: rgba(255,255,255,.7);
	font-size: clamp(12px,1.4rem,14px);
}


/* ---------------------------------------
* Business
------------------------------------------ */

.section-what,.section-strength{
	padding-left: 26rem;
	padding-right: 6rem;
}

.whatCont{
	padding-top: 4rem;
	margin-top: 2rem;
	border-top: solid 1px #D9D9D9;
}

.what-l{
	width: 37.5%;
	padding-top: 1rem;
}

.what-r{
	width: 58.9%;
}

.what-r p{
	font-weight: 600;
	font-size: clamp(12px,1.4rem,14px);
}

.what-r p:not(:last-of-type){
	padding-bottom: 2rem;
}

.busiSlide{
	overflow: hidden;
}

.busiSlideCont{
	width: calc(334rem + 4rem ) * 3;
}

.busiSlideTxt{
	width: 334rem;
}

.section-sol{
	margin-top: -3rem;
	padding-left: 16rem;
	position: relative;
	z-index: 2;
}

.solWrap{
	border-radius: 20px 0 0 20px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/busienss/solbg.webp);
	padding: 12rem 6rem 12rem 10rem;
}

.sol-list{
	margin-top: 4rem;
	padding-top: 6rem;
	border-top: solid 1px rgba(255,255,255,.4);
}

.sol-listItem:not(:last-of-type){
	margin-bottom: 6rem;
	padding-bottom: 6rem;
	border-bottom: solid 1px rgba(255,255,255,.4);
}

.sol-listImg{
	width: 44.6%;
}

.sol-listTxt{
	width: 50%;
}

.sol-listNum p:first-of-type{
	display: inline-block;
	line-height: 160%;
	letter-spacing: normal;
	font-weight: 700;
	font-size: clamp(12px,1.4rem,14px);
	padding: .3rem 1rem .2rem;
	background-color: #fff;
	border-radius: 5px;
	border: solid 1px #000;
}

.sol-listNum p:last-of-type{
	padding-left: 1.2rem;
	font-weight: 700;
	font-size: clamp(12px,1.8rem,18px);
}

.sol-listPara{
	padding-top: 6rem;
}

.sol-listPara h3{
	font-weight: 700;
	font-size: clamp(16px,2.4rem,28px);
	line-height: 160%;
	letter-spacing: normal;
}

.sol-listPara p{
	padding: 2rem 0 0;
	font-weight: 500;
}

.st-listItem:not(:last-of-type){
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom: solid 1px rgba(0,0,0,.5);
}

.st-listTtl{
	width: 53.5%;
}

.st-listTtl p:first-of-type{
	display: inline-block;
	line-height: 160%;
	letter-spacing: normal;
	font-weight: 700;
	font-size: clamp(12px,1.4rem,14px);
	padding: .3rem 1rem .2rem;
	background-color: #fff;
	border-radius: 5px;
	border: solid 1px #000;
}

.st-listTtl p:last-of-type{
	font-weight: 700;
	font-size: clamp(16px,2.4rem,28px);
	line-height: 160%;
	letter-spacing: normal;
	padding-left: 3rem;
}

.st-listTxt{
	width: 46.4%;
}

.st-listTxt p{
	font-size: clamp(12px,1.4rem,14px);
	padding-top: 1rem;
}

/* ---------------------------------------
* Brand
------------------------------------------ */

.section-modorinae{
	padding: 18rem 0 14rem;
	background-color: #5A9170;
	margin-top: -6rem;
	position: relative;
}

.section-kimmitz{
	padding: 12rem 0 14rem;
	background-color: #76C0BB;
	position: relative;
}

.section-modorinae .sectionInner_l, .section-kimmitz .sectionInner_l{
	position: relative;
	z-index: 2;
}

.brnadCont{
	padding-left: 10rem;
}

.brnadCont-l{
	width: 37.7%;
}

.brnadContTtl p{
	font-weight: 700;
	padding-bottom: 2rem;
	line-height: 160%;
}

.brnadContTtl h2{
	width: 69.5%;
}

.brnadCont-l>p{
	padding-top: 3rem;
}

.brnadCont-r{
	width: 54%;
}

/* ---------------------------------------
* Project
------------------------------------------ */

.headTtl_project{
	padding: 36rem 0;
	background-color: unset;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/project/bg.webp);
	border-radius: unset;
}

.headTtl_project h1{
	font-size: clamp(48px,8.6rem,96px);
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.6;
}

.headTtl_project p{
	font-size: clamp(20px,2.8rem,32px);
	font-weight: 700;
	line-height: 1.6;
}

.project-list{
	border-top: solid 1px #000;
	/* border-bottom: solid 1px #000; */
}

/* .section-project .project-list{
border-bottom: solid 1px #000;
} */

.project-listItem{
	width: calc(100% / 3);
	border-right: solid 1px #000;
	border-bottom: solid 1px #000;
}

.project-listItem:nth-of-type(-n+3) {
	border-bottom: solid 1px #000;
}

/* .project-listItem:nth-last-child(-n+3) {
border-bottom: unset;
} */


.project-listItem a{
	display: block;
	padding: 4rem;
}

.project-listImg .img,.projectOther-listImg .img{
	width: 100%;
	border-radius: 10px;
	border: solid 1px #000;
	width: 100%;
	padding-top: 56%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transition: all .5s;
}

.project-listItem a:hover .project-listImg .img,.projectOther-listItem a:hover .projectOther-listImg .img{
	border-radius: 200px;
}

.project-listTxt{
	padding-top: 2rem;
}

.project-listItem h3,.projectOther-listItem h3{
	font-size: clamp(16px, 2rem, 20px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .1em;
	padding-bottom: 2rem;
}

.clientTag{
	padding: .5rem 1rem .3rem;
	border-radius: 5px;
	border: solid 1px #000;
	display: inline-block;
	font-weight: 700;
	font-size: clamp(12px,1.4rem,16px);
	line-height: 1.6;
}

.projectOther-list{
	column-gap: 3rem;
}

.projectOther-listItem{
	width: calc((100% - (3rem * 2)) / 3);
}


/* ---------------------------------------
* News
------------------------------------------ */

.newsSide{
	width: 15.15%;
}

.newsCategory{
	width: 100%;
	position: sticky;
	left: 0;
	top: 24rem;
	padding-top: 2rem;
	border-top: solid #E6E6E6 1px;
}

.newsCategory p{
	font-weight: 600;
	font-size: clamp(12px,1.4rem,14px);
	line-height: 1;
}

.newsCate-list{
	padding-top: 3rem;
}

.newsCate-listItem:not(:last-of-type){
	margin-bottom: 1rem;
}

.newsCate-listItem a{
	display: inline-block;
	padding: .8rem 1.6rem;
	border-radius: 100px;
	border: solid 1px #E6E6E6;
	font-size: clamp(12px,1.4rem,14px);
	line-height: 1;
	transition: all .3s;
}

.newsCate-listItem a.current,.newsCate-listItem a:hover{
	background-color: #363934;
	color: #fff;
}

.newsCont{
	width: 78.78%;
}

.news-listItem:not(:last-of-type){
	margin-bottom: 2rem;
}

.news-listItem a{
	position: relative;
	padding: 3rem;
	background-color: #F7F7F7;
	border-radius: 10px;
}

.news-listImg{
	width: 32.6%;
}

.news-listImg .img{
	width: 100%;
	padding-top: 54%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 10px;
}

.news-listTxt{
	width: 63.2%;
}

.news-listTtl .day{
	font-weight: 400;
	letter-spacing: normal;
	color: #7C7C7C;
	padding-bottom: 2rem;
	line-height: 1;
}

.news-listTtl h3{
	line-height: 1.6;
	font-size: clamp(14px,1.8rem,18px);
}

.news-tagList{
	column-gap: 1rem;
}

.news-tagListItem{
	display: inline-block;
	padding: .8rem 1.6rem;
	line-height: 1;
	color: #757575;
	background-color: #E5E5E5;
	border-radius: 5px;
	font-size: clamp(12px,1.4rem,14px);
}

.newsBtn{
	position: absolute;
	right: 4rem;
	bottom: 3rem;
	width: 3rem;
	height: 3rem;
	transition: all .3s;
}

.news-listItem a:hover .newsBtn{
	right: 3rem;
}

.newsBtn svg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

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

	/* ---------------------------------------
	* common
	------------------------------------------ */

	.btn.sp{
		display: block;
	}

	.sp{
		display: block;
	}

	.pc{
		display: none;
	}

	.bg-b{
		background-repeat: repeat-y;
		background-size: 100% auto;
	}

	.txtSlideBrand .txtSlideInner{
		column-gap: 2rem;
	}

	.txtSlideBusiness .txtSlideInner,.txtSlidBrand .txtSlideInner{
		column-gap: 4rem;
	}

	.txtSlideBrand span{
		font-size: 6.4rem;
	}

	.txtSlideBusiness span{
		font-size: 8rem;
	}

	.txtSlidBrand02{
		bottom: 2rem;
	}

	.txtSlidBrand02 span{
		font-size: 8rem;
		padding-right: 12rem;
	}

	.txtSlidBrand02 span::after{
		width: 8rem;
		height: 1.2rem;
	}

	/* ---------------------------------------
	* TOP
	------------------------------------------ */

	.mv{
		padding: 10rem 0 0;
		background-image: url(../img/top/mvbg.webp);
	}


	.mvShape{
		width: 139rem;
		right: 0;
		top: 8rem;
	}

	.mvTxt h2{
		font-size:4.8rem;
	}

	.mvTxt p{
		font-size: 1.4rem;
		padding-top: 2rem;
	}

	.mvSlide {
		width: calc(100% - 4rem);
		margin: 0 auto;
	}

	.custom-carousel{
		height: auto;
		padding-bottom: 8rem;
	}

	.carousel-slide {
		display: none !important;
		opacity: 0;
		pointer-events: none;
		position: static !important;
		transform: translateY(40px);
		transition: opacity 0.6s, transform 0.6s cubic-bezier(.77,0,.18,1);
		z-index: 1;
	}

	.carousel-slide.sp-visible {
		display: block !important;
	}

	.carousel-slide.sp-animate {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		z-index: 2;
	}
	/* 画像ラップ、アスペクト比維持も自動化したい場合 */
	.carousel-img {
		width: 95%;
		margin: 0 auto;
		position: relative;
		border-radius: 20px;
		overflow: hidden;
	}

	/* 画像アスペクト比を維持したい場合は↓を残す。消せば中身高さに追従（imgタグ利用なら不要） */
	.carousel-img::after {
		content: "";
		display: block;
		padding-top: 65%;
	}

	/* imgタグ利用の場合は下を利用 */
	.carousel-img img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 20px;
	}

	/* 矢印は非表示 */
	.carousel-arrow {
		display: none;
	}

	.carousel-caption {
		position: relative;
		left: 0;
		width: 100%;
		padding: 0;
		bottom: 0;
	}

	.carousel-slide.sp-animate .carousel-caption{
		opacity: 1;
		transform: translateY(-0);
		margin: -3rem auto;
		width: 100%;
	}

	.carousel-label {
		padding: 1rem 1rem;
		font-size: 1rem;
	}
	.carousel-title {
		font-size: 1.6rem;
	}

	.section-about{
		padding-top: 10rem;
		padding-bottom: 16rem;
		background-image: url(../img/top/aboutbg-sp.webp);
	}


	.aboutWrap{
		padding-left: 0;
	}

	.about-l{
		width: 100%;
	}

	.about-r{
		width: 100%;
		padding-top: 3rem;
	}

	.about-r p{
		font-size: 1.4rem;
	}

	.about-r p:not(:last-of-type){
		padding-bottom: 2rem;
	}

	.topProjectSide{
		display: block;
		padding: 3rem 2rem;
		border-right: unset;
		border-bottom: solid 1px #000;
	}

	.topProjectSide h2{
		writing-mode: unset;
		font-size: 4.8rem;
		line-height: 100%;
	}

	.topProjectCont{
		flex: 1;
	}

	.topProjectMain{
		padding: 4rem 2rem;
	}

	.projectMainImg{
		width: 100%;
	}

	.projectMainTxt{
		width: 100%;
		padding-top: 2rem;
	}

	.projectMainTxt h2{
		font-size: 2rem;
		padding: 1rem 0 2rem;
	}

	.projectMainPara{
		font-size: 1.4rem;
	}

	.topProjectCont>.btnWrap{
		padding: 4rem 3rem;
	}

	.btnProject{
		margin: 0 auto;
	}

	.section-business{
		background-image: url(../img/top/business.webp);
	}

	/* .businessTxtWrap{
	text-align: left;
} */

	.businessTxt p{
		padding: 0 1rem;
		text-align: left;
	}

	.businessTxt p:not(:last-of-type){
		padding-bottom: 2rem;
	}

	.business-listItem{
		padding: 1rem;
		width: 100%;
	}

	.business-listItem:not(:last-of-type){
		margin-bottom: 2rem;
	}

	.business-listInner{
		padding: 2rem;
	}

	.business-listTtl p{
		font-size: 1.2rem;
		padding-bottom: 1rem;
	}

	.business-listTtl h3{
		font-size: 2rem;
	}

	.business-listImg{
		padding: 2rem 0;
	}

	.business-listInner>p{
		font-size: 1.4rem;
	}

	.section-brand{
		padding-top: 8rem;
		background-image: url(../img/top/brand-sp.webp);
	}

	.brnadTtl{
		padding-bottom: 3rem;
	}

	.brnadTtl::after{
		height: 3rem;
	}

	.topNews-l{
		width: 100%;
	}

	.topNews-r{
		width: 100%;
		padding-top: 3rem;
	}

	.brnandTxt{
		text-align: left;
		padding: 2rem 1rem 0;
	}

	.btnNews{
		margin: 0 auto;
	}


	/* ---------------------------------------
	* ABOUT
	------------------------------------------ */

	.sideIndex{
		display: none;
		z-index: 10;
		position: fixed;
		left: 4rem;
		bottom: 3rem;
		width: 18rem;
		padding: 3rem 2rem;
		border-radius: 10px;
		background-color: #fff;
		border: solid 1px #000;
	}	

	.sideIndex-listItem:not(:last-of-type) a{
		padding-bottom: 1rem;
		margin-bottom: 1rem;
		border-bottom: dashed 1px #E5E5E5;
	}

	.sideIndex-listItem a span:first-of-type{
		font-size: 1.2rem;
	}

	.sideIndex-listItem a span:last-of-type{
		width: 1.8rem;
		height: 1.8rem;
	}

	.section-mission{
		margin-top: -2rem;
		padding: 8rem 2rem 10rem 2rem;
		background-image: url(../img/about/missionbg.webp);
	}


	.missiontree01{
		width: 16%;
		left: 2rem;
		bottom: 2rem;
	}

	.missiontree02 {
		width: 29%;
		right: 0rem;
		bottom: 1rem;
	}


	.mission-l{
		width: 100%;
	}

	.missionTxt p:not(:last-of-type){
		padding-bottom: 3rem;
	}

	.mission-r{
		width: 100%;
		display: flex;
		column-gap: 1rem;
		padding-top: 3rem;
	}

	.mission-r .img{
		width:((100% - (1rem * 1)) / 2);
	}

	.section-mess{
		padding: 8rem 2rem 0 2rem;
	}

	.mess-l{
		width: 100%;
	}

	.messName{
		padding-top: 2rem;
	}

	.messName p:first-of-type{
		font-size: 1.1rem;
		padding-bottom: 0.4rem;
	}

	.messName p:last-of-type span{
		font-size: 1.4rem;
	}

	.messName p:last-of-type span:last-of-type{
		font-size: 1.1rem;
	}

	.mess-r{
		width: 100%;
		padding-top: 3rem;
	}

	.messTxt{
		padding-top: 2rem;
	}

	.messTxt p{
		font-size: 1.4rem;
	}

	.messTxt p:not(:last-of-type){
		padding-bottom: 1rem;
	}

	.section-origin{
		padding: 6rem 2rem 0 2rem;
	}

	.originWrap{
		background-image: url(../img/about/originbg-sp.webp);
		padding: 3rem 2rem 4rem;
	}

	.origin-l{
		width: 100%;
	}

	.origin-r{
		padding-top: 2rem;
		width: 100%;
	}

	.originTxt{
		padding-top: 2rem;
	}

	.originTxt p{
		font-size: 1.4rem;
	}

	.originTxt p:not(:last-of-type){
		padding-bottom: 1.6rem;
	}

	.section-company{
		padding: 8rem 2rem 8em 2rem;
	}

	.comtree{
		width: 40%;
		left: 0;
		bottom: -10rem;
	}

	.companycont{
		padding: 3rem 1rem 0;
		width: 100%;
	}

	.com-defList::before{
		width: 4rem;
	}

	.com-defList:last-of-type{
		margin-bottom: 0;
	}

	.com-defTtl{
		width: 100%;
	}

	.com-defDesc{
		padding-top: 1rem;
	}

	.section-client{
		padding: 8rem 2rem 8rem 2rem;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url(../img/about/clientbg.webp);
	}

	.clientop{
		position: absolute;
		left: 0;
		top: -1px;
	}

	.clientWrap{
		padding-top: 4rem;
	}

	.clientWrap02{
		padding-top: 6rem;
	}

	.client-list{
		column-gap: .5rem;
		row-gap: .5rem;
	}

	.client-listItem{
		width: calc((100% - (.5rem * 1)) / 2);
	}

	.clientCaution{
		font-size: 1.2rem;
	}


	/* ---------------------------------------
	* Business
	------------------------------------------ */

	.section-what,.section-strength{
		padding-left: 2rem;
		padding-right: 2rem;
		padding-top: 8rem;
	}

	.whatCont{
		padding-top: 4rem;
		margin-top: 2rem;
	}

	.what-l{
		width: 100%;
		padding-top: 3rem;
	}

	.what-r{
		width: 100%;
	}

	.what-r p{
		font-size: 1.4rem;
	}

	.what-r p:not(:last-of-type){
		padding-bottom: 1.6rem;
	}

	.busiSlideCont{
		width: calc(160rem + 2rem ) * 3;
	}

	.busiSlideTxt{
		width: 160rem;
	}

	.section-sol{
		margin-top: -1rem;
		padding-left: 2rem;
	}

	.solWrap{
		background-repeat: repeat-y;
		background-size: 100% auto;
		padding: 6rem 3rem 8rem 3rem;
	}

	.sol-list{
		margin-top: 3rem;
		padding-top: 4rem;
	}

	.sol-listItem:not(:last-of-type){
		margin-bottom: 4rem;
		padding-bottom: 4rem;
		border-bottom: solid 1px rgba(255,255,255,.2);
	}

	.sol-listImg{
		width: 100%;
	}

	.sol-listTxt{
		width: 100%;
		padding-top: 3rem;
	}

	.sol-listNum p:first-of-type{
		font-size: 1.1rem;
		padding: .3rem .8rem .2rem;
	}

	.sol-listNum p:last-of-type{
		padding-left: 1rem;
		font-size: 1.6rem;
	}

	.sol-listPara{
		padding-top: 2rem;
	}

	.sol-listPara h3{
		font-size: 2rem;
	}

	.sol-listPara p{
		padding: 1rem 0 2rem;
		font-weight: 500;
	}

	.st-listItem:not(:last-of-type){
		padding-bottom: 3rem;
		margin-bottom: 3rem;
		border-bottom: solid 1px rgba(0,0,0,.2);
	}

	.st-listTtl{
		width: 100%;
	}

	.st-listTtl p:first-of-type{
		font-size: 1.2rem;
	}

	.st-listTtl p:last-of-type{
		font-size: 1.8rem;
		padding-left: 0;
		padding-top: 1rem;
	}

	.st-listTxt{
		width: 100%;
	}

	.st-listTxt p{
		font-size: 1.4rem;
		padding-top: 2rem;
	}

	/* ---------------------------------------
	* Brand
	------------------------------------------ */

	.section-modorinae{
		padding: 8rem 0 8rem;
		margin-top: -2rem;
	}

	.section-kimmitz{
		padding: 6rem 0 8rem;
	}

	.brnadCont{
		display: flex;
		flex-direction: column-reverse;
		padding-left: 0;
	}

	.brnadCont-l{
		width: 100%;
		padding-top: 2rem;
	}

	.brnadContTtl p{
		padding-bottom: .8rem;
	}

	.brnadContTtl h2{
		width: 60%;
	}

	.brnadCont-l>p{
		padding-top: 3rem;
	}

	.brnadCont-r{
		width: 100%;
	}

	/* ---------------------------------------
	* Project
	------------------------------------------ */

	.headTtl_project{
		background-position: bottom;
		padding: 16rem 0 20rem;
		background-image: url(../img/project/bgsp.webp);
	}

	.headTtl_project h1{
		font-size: 4rem;
		color: #10643A;
	}

	.headTtl_project p{
		font-size: 1.6rem;
		color: #0F0F0F;
	}

	.project-list{
		border-top: solid 1px #000;
	}

	.project-listItem{
		width: 100%;
		border-right: unset;
		border-bottom: solid 1px #000;
	}

	.project-listItem:nth-of-type(-n+3) {
		border-bottom: solid 1px #000;
	}

	.project-listItem a{
		padding: 4rem 3rem;
	}

	.project-listTxt{
		padding-top: 2rem;
	}

	.project-listItem h3,.projectOther-listItem h3{
		font-size: 1.8rem;
		padding-bottom: 2rem;
	}

	.clientTag{
		padding: .4rem 1rem .3rem;
		font-size: 1.2rem;
	}


	.topProjectCont .project-listItem a{
		display: block;
		padding: 3rem 2rem;
	}

	.topProjectCont .project-listImg{
		width: 100%;
	}

	.topProjectCont .project-listTxt{
		padding-top: 2rem;
		width: 100%;
	}

	.topProjectCont .project-listItem h3 {
		font-size: 1.6rem;
	}

	.project-listItem h3 br{
		display: none;
	}

	.projectOther-listItem{
		width: 100%;
	}

	.projectOther-listItem:not(:last-of-type){
		margin-bottom: 4rem;
	}

	/* ---------------------------------------
	* News
	------------------------------------------ */

	.newsSide{
		width: 100%;
	}

	.newsCategory{
		position: unset;
		padding-top: 2rem;
	}

	.newsCategory p{
		font-size: 1.4rem;
	}

	.newsCate-list{
		padding-top: 2rem;
		display: flex; 
		flex-wrap: wrap;
		column-gap: .4rem;
		row-gap: .6rem;
	}

	.newsCate-listItem:not(:last-of-type){
		margin-bottom: 0;
	}

	.newsCate-listItem a{
		padding: .8rem 1.6rem;
		font-size: 1.2rem;
	}

	.newsCont{
		padding-top: 4rem;
		width: 100%;
	}

	.news-listItem:not(:last-of-type){
		margin-bottom: 3rem;
	}

	.news-listItem a{
		padding: 2rem 2rem;
	}

	.news-listImg{
		width: 100%;
	}

	.news-listTxt{
		padding-top: 2rem;
		width: 100%;
	}

	.news-listTtl .day{
		font-size: 1.2rem;
		padding-bottom: 1rem;
	}

	.news-listTtl h3{
		font-size: 1.6rem;
	}

	.news-tagList{
		column-gap: .4rem;
	}

	.news-tagListItem{
		padding: .8rem 1.2rem;
		font-size: 1.2rem;
	}

	.newsBtn{
		right: 2rem;
		bottom: 2rem;
	}

	.news-listItem a:hover .newsBtn{
		right: 2rem;
	}




}