@charset "UTF-8";


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* 共通 */
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.p_concept #wrapper{
	overflow: clip;
}


/* @media (hover: none) and (pointer: coarse) {
	.p_concept #wrapper{
		overflow: hidden;
	}
} */


.main_ttl{
	text-align: center;
	line-height: 1.5;
	margin-bottom: 80px;
}
.main_ttl .ja{
	color:#685d5b;
    font-size: min(4.6vw, 366%);
	font-weight: 400;
	letter-spacing: 0.25em;
	margin-bottom: .2em;
}

@media only screen and (max-width: 767px) {
	.main_ttl{
		margin-bottom: 6%;
	}
	.main_ttl .ja{
        font-size: 6vw;
	}
	.main_ttl .en{
		font-size: 3vw;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* 企業理念（mission） */
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*========共通========*/
.mission{
	text-align: left;
	padding-bottom: 120px;
}
.mission img{
	width: 100%;
}

/*========intro========*/
.mission .intro{
	display: flex;
	align-items: center;
	gap:6%;
}
.mission .intro .img_wrap{
	width: 45%;
}
.mission .intro .ttl{
	color:#88cb7f;
	font-size: min(3.6vw, 300%);
	letter-spacing: 0.25em;
	line-height: 1.5;
	margin-bottom: .5em;
}
.mission .intro .txt{
    color: #544337;
	font-weight: bold;
    font-size: min(1.9vw, 133%);
	letter-spacing: 0.15em;
    line-height: 2.5;
}

/*========flex_item========*/
.mission .flex_item{
	display: flex;
	align-items: center;
	gap:4%;
	margin-top: 90px;
}
.mission .flex_item.--right{
	justify-content: flex-end;
}
.mission .flex_item.--left{
	justify-content: flex-start;
}
.mission .flex_item .ttl{
	color: #544337;
    font-size: min(2.8vw, 166%);
	letter-spacing: 0.18em;
	line-height: 1.5;
	padding-bottom: 1em;
	margin-bottom: 1.5em;
	border-bottom: 1px solid;
	border-image: linear-gradient(
		to right,
		rgba(84, 67, 55, 1),
		rgba(84, 67, 55, 0)
	) 1;
}
.mission .flex_item .img_wrap{
	width: 40%;
}
.mission .flex_item .cont_wrap{
	max-width: 45%;
}
.mission .last_item .img_wrap img{
	width: 65%;
}

@media only screen and (max-width: 1320px){
	.mission .flex_item .cont_wrap{
		max-width: 53%;
	}
	.mission .last_item .img_wrap{
		text-align: center;
	}
	.mission .last_item .img_wrap img{
		width: 80%;
	}
}


@media only screen and (max-width: 767px) {
	/*========共通========*/
	.mission{
		padding: 0 3% 12% 3%;
	}

	/*========intro========*/
	.mission .intro{
		flex-direction: column;
		gap: 2em;
	}
	.mission .intro .cont_wrap{
		text-align: center;
	}
	.mission .intro .img_wrap{
		width: 80%;
	}
	.mission .intro .ttl{
        font-size: 5.2vw;
	}
	.mission .intro .txt{
        font-size: 3.5vw;
	}

	/*========flex_item========*/
	.mission .flex_item{
		flex-direction: column;
		gap:2em;
		margin-top: 16%;
	}
	.mission .flex_item.--right,
	.mission .flex_item.--left{
		justify-content: center;
	}
	.mission .flex_item .ttl{
        font-size: 4.8vw;
		text-align: center;
		padding-bottom: .5em;
		margin-bottom: 1em;
	}
	.mission .flex_item .img_wrap{
		width: 80%;
	}
	.mission .flex_item .cont_wrap{
		max-width: 100%;
	}
	.mission .flex_item.--left .img_wrap{
		order:2;
	}
	.mission .flex_item.--left .cont_wrap{
		order: -1;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* 企業ビジョン（vision） */
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.vision{
	color:#fff;
	padding:120px 0;
	background-color: #88cb7f;
	background-image: url(../images/concept/bg1.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;
}
.vision .main_ttl .ja{
	color:#fff;
}
.vision .cont1_ttl{
	font-size: min(3.6vw, 300%);
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0.25em;
	margin-bottom: 1em;
}
.vision .cont1_wrap{
	display: flex;
	gap:6%;
}
.vision .cont1_item{
	width: 33%;
	position: relative;
	z-index: 1;
}
.vision .cont1_item::after{
	content: "";
    display: inline-block;
    width: 90%;
    height: 100%;
    aspect-ratio: 280 / 539;
    background-color: rgba(84, 67, 55, .3);
    position: absolute;
    top: 8%;
    left: 15%;
    z-index: -1;
}
.vision .cont1_item .img_wrap img{
	width: 100%;
}
.vision .cont1_item .ttl{
	color:#544337;
	font-size: min(2.8vw, 166%);
	font-weight: bold;
    letter-spacing: 0.18em;
    line-height: 1.5;
	margin: 1em 0;
}
.vision .cont1_item .txt{
	font-weight: bold;
}

@media only screen and (max-width: 767px) {
	.vision{
		padding:12% 0;
	}
	.vision .cont1{
		margin-bottom: 16%;
	}
	.vision .cont1_ttl{
        font-size: 5.2vw;
	}
	.vision .cont1_wrap{
		flex-direction: column;
		gap:4em;
	}
	.vision .cont1_item{
		width: 100%;
	}
	.vision .cont1_item::after{
        width: 80%;
		height: 100%;
        aspect-ratio: auto;
		top: 8%;
		left: 15%;
	}
	.vision .cont1_item .img_wrap{
		width: 80%;
		margin-inline: auto;
	}
	.vision .cont1_item .ttl{
		font-size: 4.8vw;
		margin: 1em 0;
		width: 90%;
        margin-inline: auto;
	}
	.vision .cont1_item .txt{
		width: 90%;
        margin-inline: auto;
	}
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* ７つのフィロソフィー（philosophy） */
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.philosophy{
	padding-top:120px;
	background-color: #f7f7f7;
}
.philosophy .phi_intro{
	text-align: center;
}
.area_sticky{
	margin-top: 100px;
	display: flex;
	gap:4%;
	justify-content: flex-start;
	align-items: flex-start;
	position: relative;
}
.area_sticky .img_wrap{
	display: block;
	position: -webkit-sticky;
	position: sticky;
	width: 35%;
	/* top:120px;
	height: 100vh; */
}
.area_sticky .img_wrap .sticky_img{
	width: 100%;
	height:calc(100% / 3);
    object-fit: cover;
}
.area_sticky .img_wrap::after{ /*グラデ*/
	content: "";
    display: inline-block;
    width: 100vw;
    height: 330px;
	background-image: linear-gradient(0deg, #f7f7f7, transparent);
    position: absolute;
    bottom: 0;
	z-index: -1;
}
.area_sticky .img_wrap .rotate{ /*回転*/
	position: absolute;
    bottom: 140px;
	width: 165px;
	height:165px;
	z-index:1;
	right: calc(53% - 50vw);
    margin-right: calc(53% - 50vw);
}
.area_sticky .img_wrap .rotate .circle_txt{
	animation: rotation 20s linear infinite;
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.area_sticky .img_wrap .rotate .circle_arrow{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.area_sticky .cont_wrap{
    padding-bottom: 220px;
	width: 65%;
}
.area_sticky .cont_item{
	display: flex;
	gap: 3em;
	text-align: left;
	margin-right: 15%;
    margin-top: 90px;
}
.area_sticky .cont_item .ttl_wrap{
	color:#88cb7f;
	display: flex;
	gap:2em;
}
.area_sticky .cont_item .ttl_wrap .num{
	font-size: min(4.3vw,333%);
	position: relative;
}
.area_sticky .cont_item .ttl_wrap .num::before{
	content:"";
	display: inline-block;
	width: 1px;
	height: 40px;
	background-color: #88cb7f;
	position: absolute;
	transform: rotate(25deg);
    right: -47%;
    top: 6%;
}
.area_sticky .cont_item .ttl_wrap .ja{
	font-size: min(4.3vw,333%);
	line-height: 1.5;
	writing-mode: vertical-lr;
	margin-top: 24px;
	text-wrap: nowrap;
}
.area_sticky .cont_item .txt_wrap{
    margin-top: 40px;
}
.area_sticky .cont_item .l_txt{
	color: #544337;
	font-size: min(2.8vw, 166%);
	font-weight: bold;
    letter-spacing: 0.18em;
    line-height: 1.5;
	margin-bottom: 1em;
}


@media only screen and (max-width: 1300px){
	.area_sticky .cont_wrap{
		padding-bottom: 320px;
	}
}

@media only screen and (max-width: 959px){
	.area_sticky .cont_item{
		gap: 1.5em;
		margin-right: 4%;
	}
	.area_sticky .cont_item .ttl_wrap{
		gap:1em;
	}
	.area_sticky .cont_wrap{
		padding-bottom: 360px;
	}
}


@media only screen and (max-width: 767px) {
	.philosophy{
		padding:12% 0;
	}
	.philosophy .main_ttl{
		padding:0 3%;
	}
	.philosophy .phi_intro{
		text-align: left;
		padding:0 3%;
	}
	.area_sticky{
		margin-top: 10%;
		flex-direction: column;
		gap:2em;
	}
	.area_sticky .img_wrap{
		display: flex;
		height: auto;
		position: relative;
		width: 100%;
	}
	.area_sticky .img_wrap .sticky_img{
		height: auto;
		width: calc(100% / 3);
	}
	.area_sticky .img_wrap::after{ /*グラデ*/
		display: none;
	}
	.area_sticky .img_wrap .rotate{ /*回転*/
		display: none;
	}
	.area_sticky .cont_wrap{
		padding:0 3%;
		width: auto;
	}
	.area_sticky .cont_item{
        gap: 1.2em;
		margin-right: 0;
		margin-top: 8%;
	}
	.area_sticky .cont_item:first-of-type{
		margin-top: 0;
	}
	.area_sticky .cont_item .ttl_wrap .num{
        font-size: 6vw;
	}
	.area_sticky .cont_item .ttl_wrap .num::before{
		width: 1px;
		height: 1em;
	}
	.area_sticky .cont_item .ttl_wrap .ja{
		font-size: 7vw;
        margin-top: .8em;
	}
	.area_sticky .cont_item .txt_wrap{
        margin-top: 10%;
	}
	.area_sticky .cont_item .l_txt{
		font-size: 4.5vw;
	}
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* 創業の歴史・精神（history） */
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.history{
	padding:120px 0;
}
.history .main_ttl{
	margin-bottom: 60px;
}
.history .his_box{
	margin-top: 120px;
}
.history .his_box:first-of-type{
	margin-top: 0;
}
.history .his_box_ttl{
	color:#fff;
	font-size: min(2.8vw, 166%);
	letter-spacing: 0.18em;
    line-height: 1.5;
	text-align: center;
	background-color: rgba(84, 67, 55, .3);
	padding: 1em;
	margin-bottom: 80px;
}
.history .his_box_item{
	display: flex;
	gap:4%;
	max-width: 1100px;
	margin-inline: auto;
	margin-top: 100px;
}
.history .his_box_item:first-of-type{
	margin-top: 0;
}
.history .his_box_item .txt{
	width: 65%;
}
.history .his_box_item .img_wrap{
	width: 35%;
	position: relative;
}
.history .his_box_item .img_wrap img{
	width: 100%;
}
.history .his_box_item .img_wrap.--right::before,
.history .his_box_item .img_wrap.--left::before{
	content:"";
	background-image: url(../images/concept/deco_dot.svg);
	display: inline-block;
	width: 32vw;
	height: 200px;
	position: absolute;
    top: 33%;
	z-index: -1;
}
.history .his_box_item .img_wrap.--right::before{
	right: 100%;
	margin-right: calc(50% - 50vw);
}
.history .his_box_item .img_wrap.--left::before{
	left: 100%;
	margin-left: calc(50% - 50vw);
}
.history .his_outro{
    font-size: min(2.8vw, 166%);
    text-align: center;
    font-weight: bold;
    line-height: 2;
    color: #544337;
    letter-spacing: 0.1em;
    margin-top: 80px;
}

@media only screen and (max-width: 767px) {
	.history{
		padding:12% 0;
	}
	.history .main_ttl{
		margin-bottom: 6%;
	}
	.history .his_box{
		margin-top: 12%;
	}
	.history .his_box_ttl{
        font-size: 4.8vw;
		padding: .5em;
		margin-bottom: 8%;
	}
	.history .his_box_item{
		flex-direction: column;
		gap:2em;
        margin-top: 12%;
	}
	.history .his_box_item .txt{
		width:100%;
	}
	.history .his_box_item .img_wrap{
		width: 80%;
		margin-inline: auto;
		order:-1;
	}
	.history .his_box_item .img_wrap.--right::before,
	.history .his_box_item .img_wrap.--left::before{
		width: 80vw;
		height: 200px;
		top: 55%;
	}
	.history .his_box_item .img_wrap.--right::before{
		right: 0;
	}
	.history .his_box_item .img_wrap.--left::before{
		left: 0;
	}
	.history .his_outro{
		font-size: 3.8vw;
		text-align: left;
		margin-top: 12%;
	}
}