@charset "utf-8";
/* CSS Document */

/* =====================================
GPU最適化
===================================== */

html,
body {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}


img {
  display: block;
  max-width: 100%;
  height: auto;

  backface-visibility: hidden;
  transform: translateZ(0);
}

/* GSAP対象 */
.fade-up,
.seq-img,
.bg-right,
.right-front,
.left-img01,
.right-img01,
.concept-text,
.product,
.recruit,
.news,
.contact {

  will-change: transform, opacity;

  backface-visibility: hidden;
}



#contents {
padding-top: 30px;
padding-bottom: 0%;
  overscroll-behavior-y: none; /* スクロールが親要素に伝わるのを防ぐ */ /* スクロールが親要素に伝わるのを防ぐ */
}


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

#contents .mv {
width: calc(100% - 300px);
padding-left: 300px;
margin-bottom: 5%;
z-index: -1;
}

/*-----------------------------------------*/
#contents .news-block {
width: calc(100% - 300px);
padding-left: 300px;
	margin-bottom: 80px;
}

#contents .news-block dl {
	background: #003F10;
	color: #FFF;
	padding: 1.3em 1em;
	border-radius: 6px;
}

#contents .news-block dt {
	width: 13%;
	float: left;
}

/*----------------------------------------*/
#contents .concept-block {
	min-height: 600px;
	background: #FFF;
}
#contents .concept1 {
height: 500px;         /* スクロール幅 */
width: calc(100% - 300px);
position: relative;
padding-left: 300px;
padding-right: 30px;
margin-bottom: 160px;
}

#contents .concept1 h2 {
color: #003F10;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 500;
font-size: clamp(3.125rem, 1.989rem + 5.68vw, 6.25rem);
writing-mode: vertical-rl;
line-height: 100%;
position: absolute;
top: 30%;
left: 320px;
z-index: 1;
text-shadow: 2px 3px 3px rgba(255, 255, 255, 1), 2px 3px 3px rgba(255, 255, 255, 1);
}

#contents .concept1 h3 {
margin-bottom: 8%;
font-weight: normal;
font-size: clamp(0rem, -0.909rem + 4.55vw, 2.5rem);
line-height: 170%;
text-shadow: 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 3px rgba(255, 255, 255, 1);
color: #003F10;
}

#contents .concept1 p span {
  background-color: #FFFFFF;
/*/*text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.9), 0px 0px 5px rgba(255, 255, 255, 0.9);*/
}

/* ========== 初期状態（ふわっと出る前） ========== */
/*.left-img01,*/
.right-img01,
.concept-text {
opacity: 1;
}

.left-img01{
/*transform:
translateY(30px)
scale(0.95);*/
}



/* 配置はあなたのデザインに合わせて調整 */
.left-img01 {
width: 24%;
position: absolute;
top: 0;
left: 300px;
}

.right-img01 {
width: 24%;
position: absolute;
bottom: 30px;
right: 30px;
}

.concept-text {
  position: absolute;
  left: 35%;
  top: 25%;
  width: 650px;
}

.more-btn {
  display: inline-block;
  padding: 10px 40px;
  background: #003F10;
  border-radius: 30px;
  color: white;
  text-decoration: none;
margin-top: 15px;
}


/*----------------------------------------*/
.sequence-section {
  position: relative;
/*  min-height: 50vh; *//* スクロールで順番に変化させるため長め */
width: calc(100% - 300px);
padding-left: 300px;
padding-right: 30px;
/*margin-bottom: 120px;*/
}

/* 固定エリア */
.sequence-wrapper {
display: grid;
grid-template-columns: repeat(19, 1fr);
grid-template-rows: repeat(20, minmax(50px, auto));
}

.sequence-wrapper {
  contain: layout paint;
}

/* 初期状態：透明で非表示 */
.seq-img,
.bg-right,
.right-front {
  opacity: 1;
}

/* 右背景 */
.bg-right {
grid-column: 10 / 20 ;
grid-row: 1 / 14;


	background-image: url("../images/concept_bg.png");
background-size: contain; /* 画像全体を表示 */
background-repeat: no-repeat;
background-position: center 40px;
	z-index: -1;
}



.step2 {
grid-column: 9 / 12 ;
grid-row: 1 / 6;
}

.step1 { 
grid-column: 2 / 7 ;
grid-row: 8 / 20;	
	/*
width: 26%;
position: absolute;
top: 0px;
left: 40px;*/
}


.right-front {
grid-column: 15 / 20 ;
grid-row: 10 / 20;	
}

/* 画像の配置（あなたのデザインに合わせて調整可能） */
/*.step1 { 
width: 26%;
position: absolute;
top: 460px;
left: 40px;
}*/

/*
.right-front {
width: 20%;
position: absolute;
top: 560px;
right: 10%;
}*/



/*----------------------------------------*/
/*----------------------------------------*/
/*.sequence-section2 {
  position: relative;
  height: 500px;  スクロールで順番に変化させるため長め 
width: calc(100% - 330px);
padding-left: 300px;
padding-right: 30px;
}*/

/* 固定エリア
.sequence-wrapper2 {
  position: relative;
  height: 500px;
  width: 100%;
margin-top: -200px;
} */



/* 画像の配置（あなたのデザインに合わせて調整可能） */


.seq-img,
.bg-right,
.right-front,
.left-img01,
.right-img01,
.concept-text {
  will-change: transform, opacity;
  backface-visibility: hidden;
/*  transform: translateZ(0);*/
}

/*.step-bg,
.step-1,
.step-2,
.step-right,
.is-inview {
  opacity: 1;
  transform: translate3d(0,0,0);
}*/

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


#contents .concept2 {
grid-column: 1 / 9 ;
grid-row: 1 / 10;	
/*width: calc(100% - 330px);
padding-left: 300px;
padding-right: 30px;
margin-bottom: 120px;*/
/*display: flex;
justify-content: space-between;*/

}

#contents .concept2 .box1 h3 {
margin-bottom: 6%;
font-weight: normal;
font-size: clamp(0rem, -0.909rem + 4.55vw, 2.5rem);
line-height: 170%;
/*text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.8);*/
}

#contents .concept2 .box1 p {
margin-bottom: 8%;
font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
line-height: 220%;
/*text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.8);*/
font-weight: bold;
}

/*#contents .concept2 .box1 img {
width: 80%;
margin-left: 6%;
}

#contents .concept2 .inbox {
flex: 1;
background: url("../images/concept_bg.png") no-repeat center center;
background-size: 100%;
position: relative;
}

#contents .concept2 .box2 {
width: 40%;
position: absolute;
top: -40px;
left: 40px;
}

#contents .concept2 .box2 img {
width: 100%;
max-width: 308px;
height: auto;
}

#contents .concept2 .box3 {
width: 35%;
position: absolute;
bottom: 0;
right: 0;
}

#contents .concept2 .box3 img {
width: 100%;
max-width: 351px;
height: auto;
}
*/

@media screen and (max-width: 1356px){
#contents .concept2 {
grid-column: 1 / 11 ;
grid-row: 1 / 11;	
}

.step1 { 
grid-column: 2 / 7 ;
grid-row: 9 / 20;	
	}

.step2 {
grid-column: 11 / 14 ;
grid-row: 1 / 6;
}
}


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

#contents .product { 
position: relative;
/*	margin-right: -250px;
	padding-right: 250px;
	background: url(../images/product_bg.png) no-repeat left;*/
width: calc(100% - 300px);
padding-left: 300px;
/*	background-color: #DFEAE3;
	border-radius: 0px 10px 10px 0px;*/
}

#contents .product-wrapper {
display: grid;
grid-template-columns: repeat(40, 1fr); 
grid-template-rows: repeat(17, minmax(60px, auto));
/*min-height: 1300px;*/
position: relative;	
/*background:
url(../images/product_bg.png)
no-repeat
center center;
background-size: cover;
background-position: center;*/
	background-color:#DFEAE3;
	border: #DFEAE3 1px solid;
	border-radius: 10px;
/*	margin-left: 5%;*/

}




#contents .product h2 {
color: #003F10;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 500;
font-size: clamp(3.125rem, 1.989rem + 5.68vw, 6.25rem);
writing-mode: vertical-rl;
line-height: 100%;
position: absolute;
top: -5%;
right: 10px;
z-index: 1;
}

#contents .product h3 {
  grid-column: 24 / 38;
  grid-row: 2 / 4;
  place-items: center;
display: grid;
}

#contents .product .box1 {
  grid-column: 3 / 20;
  grid-row: 3 / 9;
}

#contents .product .box2 {
  grid-column: 22 / 39;
  grid-row: 7 / 14;
}

#contents .product .box3 {
  grid-column: 3 / 20;
  grid-row: 11 / 16;
}


@media screen and (max-width: 1230px){
#contents .product { 
	margin-right: 0px;
	padding-right: 0px;
background: none;
}	
	
	
#contents .product .box1 {
  grid-column: 3 / 20;
  grid-row: 3 / 9;
}

#contents .product .box2 {
  grid-column: 22 / 39;
  grid-row: 7 / 14;
}

#contents .product .box3 {
  grid-column: 3 / 20;
  grid-row: 11 / 16;
}
}

#contents .product .box1 .inbox,
#contents .product .box2 .inbox,
#contents .product .box3 .inbox{
	position: absolute;
	background: #EEEEEE;
	color: #003F10;
	padding: 15px;
	top:280px;
	left: 25px;
	min-width: 290px;
	border-radius: 10px;
}

/*@media screen and (max-width:1700px)
{
#contents .product h3 {
position: absolute;
	top:130px;
	right:10%;
	max-width: 568px;
width: 34%;
}

#contents .product .box1 {
position: absolute;
	top:70px;
	left:18%;
	max-width: 568px;
width: 34%;
}

#contents .product .box2 {
position: absolute;
	top:300px;
	right:10%;
	max-width: 568px;
width: 34%;
}

#contents .product .box3 {
position: absolute;
	top:600px;
	left:18%;
	max-width: 568px;
width: 34%;
}
	
#contents .product .box1 .inbox,
#contents .product .box2 .inbox,
#contents .product .box3 .inbox{
	position: absolute;
	background: #EEEEEE;
	color: #003F10;
	padding: 15px;
	top:50%;
	left: 25px;
	min-width: 290px;
	border-radius: 10px;
}	
}


*/
#contents .product h4 {
	border-bottom: #003F10 1px solid;
	padding-bottom: 5px;
	font-size: 160%;
	margin-bottom: 10px;
}

#contents .product h5 {
	font-size: 102%;
	line-height: 100%;
	font-weight: normal;
}

#contents .product p {
	margin-top: 20px;
}

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

#contents .recruit {

width: calc(100% - 300px);
padding-left: 300px;
/*padding-right: 30px;
min-height: 800px;
	margin-top: 120px;*/
}


#contents .recruit { 
position: relative;
}

#contents .recruit-wrapper{
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, minmax(80px, auto));
/*min-height: 1300px;*/
position: relative;
}

#contents .recruit h2 {
color: #003F10;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 500;
font-size: clamp(3.125rem, 1.989rem + 5.68vw, 6.25rem);
writing-mode: vertical-rl;
line-height: 100%;
  grid-column: 1;
  grid-row: 2 / 6;
z-index: 1;
text-shadow: 2px 3px 3px rgba(255, 255, 255, 1), 2px 3px 3px rgba(255, 255, 255, 1);
}

#contents .recruit h3 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 250%;
  grid-column: 6 / 10;
  grid-row: 2;
}

#contents .recruit h4 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 240%;
  grid-column: 7 / 12;
  grid-row: 3;
}



	
#contents .recruit .box1 {

  grid-column: 2 / 5;
  grid-row: 2 / 5;
}

#contents .recruit .box2 {
  grid-column: 1 / 3;
  grid-row: 7 / 10;
}

#contents .recruit .box3 {
  grid-column: 7 / 9;
  grid-row: 8;
}

#contents .recruit .box4 {
  grid-column: 9 / 11;
  grid-row: 5 / 7;
}

#contents .recruit .txt {
  grid-column: 4 / 8;
  grid-row: 6 / 8;
}


@media screen and (max-width: 1356px){
#contents .recruit h3 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 250%;
  grid-column: 6 / 10;
  grid-row: 2;
}

#contents .recruit h4 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 240%;
  grid-column: 7 / 12;
  grid-row: 3;
}
	
#contents .recruit .txt {
  grid-column: 4 / 9;
  grid-row: 6 / 9;
}	
}

@media screen and (max-width: 1200px){
#contents .recruit h3 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 270%;
  grid-column: 5 / 10;
  grid-row: 2;
}

#contents .recruit h4 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 270%;
  grid-column: 6 / 12;
  grid-row: 3;
}
}



@media screen and (max-width: 1000px){
#contents .recruit h3 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 240%;
  grid-column: 5 / 10;
  grid-row: 2;
}

#contents .recruit h4 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 240%;
  grid-column: 6 / 12;
  grid-row: 3;
}
}

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

#contents .contact {
width: calc(100% - 300px);
/*padding-top: 4%;*/
padding-left: 300px;
/*padding-right: 30px;
border-top: solid 1px #003F10;*/

}

#contents .contact .contact-wrapper{
border-top: solid 1px #003F10;
padding-top: 6%;
margin-bottom: 40px;
}



#contents .contact h2 {
color: #003F10;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 500;
font-size: clamp(1rem, 0.136rem + 4.32vw, 3.375rem);
line-height: 100%;

	width: fit-content;
/*/*float: left;*/
}

#contents .contact .inbox {
width: 100%;
margin-left: auto;
padding: 0px 0px 0px 0px;
}

#contents .contact .txt_s {
color: red;
font-size: 80%;
line-height: 160%;
margin-top: 20px;
	margin-bottom: 15px;
}

#contents .contact .btn {
width: 264px;
height: 64px;
border-radius: 32px;
background: #003F10;
font-size: 120%;
line-height: 100%;
text-align: center;
/*transition: 0.4s;*/
}

#contents .contact .btn a {
text-decoration: none;
padding-top: 23px;
box-sizing: border-box;
display: block;
height: 100%;
	color: #FFF;
	margin-bottom: 100px;
}
#contents .contact .btn:hover {
opacity: 0.7;
}


/* =========================================
TABLET
========================================= */
@media screen and (max-width: 1200px){

#contents .mv,
#contents .concept1,
.sequence-section,
#contents .recruit,
#contents .contact{
  width: calc(100% - 300px);
  padding-left: 300px;
}

#contents .concept1 h2,
#contents .product h2,
#contents .recruit h2{
  font-size: 4rem;
}

.concept-text{
  width: 55%;
  left: 38%;
}

#contents .product-wrapper{
  grid-template-rows: repeat(16, minmax(60px, auto));
}
	
#contents .product .box3 {
  grid-column: 3 / 24;
  grid-row: 11 / 16;
	

}

@media screen and (max-width: 1230px){
#contents .product .box1 {
  grid-column: 3 / 20;
  grid-row: 3 / 9;
}

#contents .product .box2 {
  grid-column: 23 / 39;
  grid-row: 7 / 14;
}

#contents .product .box3 {
  grid-column: 3 / 20;
  grid-row: 10/ 16;
}
}
/* タブレットレイアウト : 768 px ～ 959 px*/
@media screen and (max-width:959px)
{

#contents {
padding-top: 0px;
padding-bottom: 0%;
}
/*----------------------------------------*/
#contents .mv {
  width: 96%;
  padding-left: 0px;
	margin-left: auto;
	margin-right: auto;
}
	
	
/*-----------------------------------------*/
#contents .news-block {
  width: 92%;
padding-left: 0px;
	margin-bottom: 60px;
	margin-left: auto;
	margin-right: auto;
}

	#contents .news-block dt {
		width: 100%;
	}
	
	
#contents .concept1,
.sequence-section,
#contents .recruit,
#contents .contact{
  width: 92%;
  padding-left: 0px;
	margin: 0 auto;
}

#contents .concept1 {
height: 500px;         /* スクロール幅 */
  width: 92%;
  padding-left: 0px;
	margin: 0 auto;
position: relative;

margin-bottom: 160px;
}

#contents .concept1 h2 {
color: #003F10;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 500;
font-size: clamp(3.125rem, 1.989rem + 5.68vw, 6.25rem);
writing-mode: vertical-rl;
line-height: 100%;
position: absolute;
top: 30%;
left: 10px;
z-index: 1;
text-shadow: 2px 3px 3px rgba(255, 255, 255, 1), 2px 3px 3px rgba(255, 255, 255, 1);
}

#contents .concept1 h3 {
margin-bottom: 8%;
font-weight: normal;
font-size: clamp(0rem, -0.909rem + 4.55vw, 2.5rem);
line-height: 170%;
text-shadow: 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 3px rgba(255, 255, 255, 1);
color: #003F10;
}

#contents .concept1 p {
text-shadow: 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 3px rgba(255, 255, 255, 1), 0px 0px 3px rgba(255, 255, 255, 1);
}
	
.left-img01 {
width: 24%;
position: absolute;
top: 0;
left: 5%;
}

.right-img01 {
width: 30%;
position: absolute;
bottom: 0px;
right: 2%;
}
.concept-text {
  position: absolute;
  left: 15%;
  top: 25%;
  width: 65%;
}	


	
	
	
	
/* 右背景 */
.bg-right {
grid-column: 9 / 20 ;
grid-row: 1 / 14;
background-image: url("../images/concept_bg.png");
background-size: contain; /* 画像全体を表示 */
background-repeat: no-repeat;
background-position: center 60px;
	z-index: -1;
}

#contents .concept2 {
grid-column: 1 / 10 ;
grid-row: 1 / 12;

}

.step2 {
grid-column: 10 / 14 ;
grid-row: 1 / 6;
}

.step1 { 
grid-column: 2 / 7 ;
grid-row: 8 / 20;	
	/*
width: 26%;
position: absolute;
top: 0px;
left: 40px;*/
}


.right-front {
grid-column: 15 / 20 ;
grid-row: 10 / 20;	
}	
	
	
#contents .product {
    width:90%;
    padding-left: 0px;
	margin: 0 auto;
}
	
#contents .product h3 {
  grid-column: 22 / 38;
  grid-row: 2 / 4;
  place-items: center;
display: grid;
}

#contents .product .box1 {
  grid-column: 3 / 20;
  grid-row: 2 / 9;
}

#contents .product .box2 {
  grid-column: 22 / 39;
  grid-row: 5 / 12;
}

#contents .product .box3 {
  grid-column: 3 / 20;
  grid-row: 10 / 15;
}	
	
/*----------------------------------------*/



#contents .recruit h2 {
color: #003F10;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 500;
font-size: clamp(3.125rem, 1.989rem + 5.68vw, 6.25rem);
writing-mode: vertical-rl;
line-height: 100%;
  grid-column: 1;
  grid-row: 2 / 6;
z-index: 1;
text-shadow: 2px 3px 3px rgba(255, 255, 255, 1), 2px 3px 3px rgba(255, 255, 255, 1);
}

#contents .recruit h3 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 270%;
  grid-column: 3 / 10;
  grid-row: 2;
}

#contents .recruit h4 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 270%;
  grid-column: 5 / 12;
  grid-row: 3;
}

#contents .recruit .box1 {

  grid-column: 2 / 5;
  grid-row: 3 / 8;
}

#contents .recruit .box2 {
  grid-column: 1 / 4;
  grid-row: 7 / 10;
}

#contents .recruit .box3 {
  grid-column: 7 / 10;
  grid-row: 8;
}

#contents .recruit .box4 {
  grid-column: 9 / 11;
  grid-row: 5 / 7;
}

#contents .recruit .txt {
  grid-column: 3 / 9;
  grid-row: 5 / 10;
}







}

/* =========================================
SP
========================================= */
@media screen and (max-width: 767px){

/* =========================
全体
========================= */

body{
  overflow-x: hidden;
}

#contents{
  padding-top: 0;
}

/* =========================
共通横幅
========================= */

	#contents .mv {
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
#contents .concept1,
.sequence-section,
#contents .recruit,
#contents .contact{
  width: 92%;
  padding-left: 0;
  padding-right: 0;
}

#contents .contact{
  width: 92%;
  padding-left: 0;
  padding-right: 0;
	margin-top: 30px;
	margin-bottom: 20px;
}	
	
/* =========================
MV
========================= */

/*#contents .mv img{
  width: 100%;
  height: auto;
}*/

/* =========================
CONCEPT
========================= */
/*
#contents .concept1{
  height: auto;
  margin-bottom: 80px;
  padding: 20px;
}

#contents .concept1 h2{
  writing-mode: horizontal-tb;
  position: static;
  font-size: 2.5rem;
  margin-bottom: 30px;
}

.left-img01,
.right-img01,
.concept-text{
  position: static;
  width: 100%;
}

.left-img01,
.right-img01{
  margin-bottom: 20px;
}

.concept-text{
  width: 100%;
}
*/
	#contents .concept1 h2 {
		top: 100px;
		left: 0;
	}	
	
#contents .concept1 h3{
  font-size: 1.3rem;
  line-height: 1.7;
}
	
	#contents .concept1 p {
		width: 60%;
	}
	
	.left-img01 {
		left: 0;
		width: 34%;
	}
	
	.right-img01 {
		right: 0;
	}
	
	.concept-text{
  width: 80%;
}

/* =========================
SEQUENCE
========================= */
/*
.sequence-wrapper{
  display: block;
  padding: 20px;
}

.bg-right{
  display: none;
}

.step1,
.step2,
.right-front{
  width: 100%;
  margin-bottom: 20px;
}
*/
/* 固定エリア */
.sequence-wrapper {
display: grid;
grid-template-columns: repeat(19, 1fr);
grid-template-rows: repeat(20, minmax(34px, auto));
}

.sequence-wrapper {
  contain: layout paint;
}


#contents .concept2 {
grid-column: 1 / 18 ;
grid-row: 1 / 16;	
/*width: calc(100% - 330px);
padding-left: 300px;
padding-right: 30px;
margin-bottom: 120px;*/
/*display: flex;
justify-content: space-between;*/

}

#contents .concept2 .box1 h3 {
margin-bottom: 6%;
font-weight: normal;
font-size: 1.4rem;
line-height: 170%;
/*text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.8);*/
}

#contents .concept2 .box1 p {
margin-bottom: 8%;
font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
line-height: 220%;
/*text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.8);*/
font-weight: bold;
}
	
	
/* 右背景 */
.bg-right {
grid-column: 1 / 20!important ;
grid-row: 11 / 20!important;
background-image: url("../images/concept_bg.png");
background-size: contain; /* 画像全体を表示 */
background-repeat: no-repeat;
background-position: center 0px;
}



.step2 {
grid-column: 15 / 20 ;
grid-row: 1 / 6;
}

.step1 { 
grid-column: 1 / 7 ;
grid-row: 9 / 20;	
	/*
width: 26%;
position: absolute;
top: 0px;
left: 40px;*/
}


.right-front {
grid-column: 14 / 20 ;
grid-row: 14 / 20;	
}

/* 画像の配置（あなたのデザインに合わせて調整可能） */
/*.step1 { 
width: 26%;
position: absolute;
top: 460px;
left: 40px;
}*/

/*
.right-front {
width: 20%;
position: absolute;
top: 560px;
right: 10%;
}*/
	
	
	
	
/* =========================
PRODUCT
========================= */

#contents .product{
  padding: 20px 0 20px 0px;
}

#contents .product-wrapper{
  display: block;
  margin-left: 0;
  padding: 30px 20px;
}

#contents .product h2{
  position: static;
  writing-mode: horizontal-tb;
  font-size: 2.5rem;
  margin-bottom: 30px;
}

#contents .product h3{
  display: block;
  margin-bottom: 30px;
}

#contents .product .box1,
#contents .product .box2,
#contents .product .box3{
  margin-bottom: 40px;
}

#contents .product .box1 .inbox,
#contents .product .box2 .inbox,
#contents .product .box3 .inbox{
  position: static;
  min-width: auto;
  margin-top: 15px;
}

/* =========================
RECRUIT
========================= */
#contents .recruit-wrapper{
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(14, minmax(50px, auto));
/*min-height: 1300px;*/
position: relative;
}

#contents .recruit h2 {
color: #003F10;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 500;
font-size: clamp(3.125rem, 1.989rem + 5.68vw, 6.25rem);
writing-mode: vertical-rl;
line-height: 100%;
  grid-column: 1;
  grid-row: 2 / 6;
z-index: 1;
text-shadow: 2px 3px 3px rgba(255, 255, 255, 1), 2px 3px 3px rgba(255, 255, 255, 1);
}

#contents .recruit h3 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 180%;
  grid-column: 2 / 11;
  grid-row: 3;
}

#contents .recruit h4 {
background: #003F10;
	color: #FFF;
	padding: 0.7em;
	width: fit-content;
	font-weight: bolder;
	font-size: 180%;
  grid-column: 4 / 11;
  grid-row: 4;
}

#contents .recruit .box1 {

  grid-column: 8 / 11;
  grid-row: 1 / 4;
}

#contents .recruit .box2 {
  grid-column: 1 / 3;
  grid-row: 6 / 10;
}

#contents .recruit .box3 {
  grid-column: 7 / 11;
  grid-row: 11 / 15;
}

#contents .recruit .box4 {
  grid-column: 1 / 4;
  grid-row: 10 / 14;
}

#contents .recruit .txt {
  grid-column: 4 / 11;
  grid-row: 6 / 9;
}	
	
	
	
	
/*
#contents .recruit{
  padding: 20px;
}

#contents .recruit-wrapper{
  display: block;
}

#contents .recruit h2{
  writing-mode: horizontal-tb;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

#contents .recruit h3,
#contents .recruit h4{
  font-size: 2rem;
  margin-bottom: 10px;
}

#contents .recruit .txt{
  margin: 30px 0;
}

#contents .recruit .box1,
#contents .recruit .box2,
#contents .recruit .box3,
#contents .recruit .box4{
  margin-bottom: 20px;
}
*/
/* =========================
CONTACT
========================= */

#contents .contact{
  padding: 30px 0px;
}

#contents .contact h2{
  float: none;
  margin-bottom: 20px;
}

#contents .contact .inbox{
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
}

#contents .contact .btn{
  width: 100%;
}

/* =========================
FOOTER
========================= */

footer .inbox{
  display: block;
}

footer .f_logo{
  margin-bottom: 20px;
}

}