@charset "utf-8";

/*===============================================

【コンテンツエリア内のスタイルシート記述の約束】
コンテンツエリアのＣＳＳセレクタは他のエリアと
重複を防ぐため、セレクタの先頭に必ず
「#cts_CR_企業番号_商品番号」
を指定してください。
例）
#cts_CR_99999999_1 p { width:100%;margin: 0 auto; }

テンプレートVer：20240401
===============================================*/

/*PC/SP共通の指定*/
@import url("https://use.typekit.net/jxo6jvm.css");

/* --- 1. フェードイン（下からふわっと浮き上がる） --- */
#cts_CR_00007468_1 .fade_set {
	transform: translateY(20px);
	opacity: 0;
}

#cts_CR_00007468_1 .fade_set_on {
	transform: translateY(20px);
	opacity: 0;
	animation: fade_view .6s forwards cubic-bezier(.1, .48, .58, 1) .2s;
}

@keyframes fade_view {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}
	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}

/* --- 2. スライドイン（左からスライドして表示） --- */
#cts_CR_00007468_1 .slide_set {
	transform: translateX(-30px);
	opacity: 0;
}

#cts_CR_00007468_1 .slide_set_on {
	transform: translateX(-30px);
	opacity: 0;
	animation: slide_view .6s forwards cubic-bezier(.1, .48, .58, 1) .2s;
}

@keyframes slide_view {
	0% {
		transform: translateX(-30px);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

/* --- 3. メイン要素用（拡大しながらフェード） --- */
#cts_CR_00007468_1 .main_set {
	transform: scale(0.95);
	opacity: 0;
}

#cts_CR_00007468_1 .main_set_on {
	transform: scale(0.95);
	opacity: 0;
	animation: main_view .7s forwards cubic-bezier(.1, .48, .58, 1) .3s;
}

@keyframes main_view {
	0% {
		transform: scale(0.95);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
#cts_CR_00007468_1 {
	
/*********
共通
**********/
	background-color: #F5F5F5;
	h1{
		color: #333;
		font-family: "Noto Sans JP";
		font-size: 20px;
		font-style: normal;
		font-weight: 700;
		line-height: 155%; /* 31px */
		letter-spacing: -0.2px;	
	}
	h2{
		margin: 0;
		padding: 0;
	}
	h3{
		color: #6B812B;
		font-family: "Noto Sans JP";
		font-size: 13px;
		font-style: normal;
		font-weight: 500;
		line-height: 170%; /* 22.1px */
		margin: 0;
		padding: 0;
	}
	strong{
		font-weight: 700;
	}
/*********
KV
**********/
	.kv img{
		width: 100%;
	}
	.kv .read{
		margin: 56px 40px 56px;
		display: flex;
		flex-direction: column;
		gap: 32px;
	}
	.about{
		margin: 0;
		color: #333;
		font-family: "Noto Sans JP";
		font-size: 12px;
		font-style: normal;
		font-weight: 700;
		line-height: 200%;
	}
	.about span{
		font-weight: 900;
	}
	.arrow-down {
		width: 20px;
		height: 14px;
		background-color: #ffffff;
		clip-path: polygon(50% 100%, 0 0, 100% 0);
	}
/*********
DATA
**********/
	.data{
		background-image: url(/ts/ori-tab/00007468/1/img/data_bk.webp);
		background-repeat: no-repeat;
		background-size: cover;
		padding: 20px 40px;
	}
	.data .title{
		margin-bottom: 40px;
		text-align: center;
	}
	.data .title img{
		width: auto;
		max-width: 100%;
		margin: 0 auto;
	}
	.data .card_box{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}
	.data .card{
		display: flex;
		width: auto;
		min-height: 140px;
		padding: 12px 8px 12px;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		border-radius: 8px;
		background: #FFF;
	}
	.data .card_long{
		width: 100%;
	}
	.data .card.card--full{
		grid-column: 1 / -1;
	}
	.data .card .card_title{
		margin: 0;
		color: #333;
		text-align: center;
		font-family: "Noto Sans JP";
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: 165%;
		letter-spacing: 0.64px;
	}
	.data .card .card_detail{
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
	}
	.data .card .area{
		display: flex;
		gap: 8px;
	}
	.data .card .area .area_unit{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: end;
	}
	.data .card .area .area_unit .unit{
		color: #6B812B;
		text-align: center;
		font-family: "Noto Sans JP";
		font-size: 18px;
		font-style: normal;
		font-weight: 700;
		letter-spacing: 2.34px;
	}
	.data .card .area .sales_label{
		padding: 3px;
	}

	.data .card .card_detail--chart{
		padding: 0 4px 4px;
	}
	.data .card .card_detail--sales{
		justify-content: flex-start;
		align-items: center;
		padding: 0 0 0 33px;
	}
	.data .card .line{
		width: 100%;
		height: 2px;
		background: rgba(107, 129, 43, 0.60);
	}
	.data .card .icon{
		width: 50px;
		height: 50px;
		margin-right: 13px;
		flex-shrink: 0;
		max-width: none;
	}
	.data .card .icon2{
		width: 60px;
		height: 49.412px;
		flex-shrink: 0;
		max-width: none;
	}
	.data .card .age_chart{
		width: 100%;
		max-width: 260px;
		height: auto;
		margin: 0 auto;
	}
	.data .card .card_values--stack{
		display: flex;
		gap: 3px;
		align-items: flex-start;
	}
	.data .card .card_values--stack .card_text{
		font-size: 64px;
		letter-spacing: -0.96px;
	}
	.data .card .card_text{
		margin: 0;
		color: #6B812B;
		font-family: "Noto Sans JP";
		font-size: 64px;
		font-style: normal;
		font-weight: 700;
		line-height: 100%;
		letter-spacing: -1.28px;
	}
	.data .card .card_text .aa{
		margin-left: -6px;

	}
	.data .card  .gender_rate{
		display: flex;
		gap: 10px;
	}
	.data .card .card_text--ratio{
		font-size: 56px;
		letter-spacing: 0;
	}
	.data .card .card_text span{
		color: #6B812B;
		font-family: "Noto Sans JP";
		font-size: 20px;
		font-style: normal;
		font-weight: 700;
		line-height: 165%;
		letter-spacing: 0.8px;
		margin-left: 2.28px;
	}
	.data .card .sales_rows{
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-width: 0;
		align-items: flex-end;
	}
	.data .card .sales_row{
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 16px;
		flex-wrap: nowrap;
	}
	.data .card .icon9{
		width: 60px;
		height: 57.313px;
	}
	.data .card .sales_label{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 4px 8px;
		background: #333;
		color: #FFF;
		font-family: "Noto Sans JP";
		font-size: 12px;
		font-weight: 700;
		line-height: 1.4;
		text-align: center;
	}
	
/*********
position
**********/
	.position{
		padding: 54px 40px 100px;
	}
	.position_img{
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;
		max-width: 100%;
		padding-bottom: 17px;
		-webkit-overflow-scrolling: touch;
	}
	.position_img img{
		width: 1156px;
		max-width: none;
		height: auto;
	}
	.position h1{
		line-height: 165%; /* 33px */
		letter-spacing: 0;
		margin: 0 0 42px;
	}
	.position .detail{
		background-image: url(/ts/ori-tab/00007468/1/img/background.png);
		background-repeat: no-repeat;
		background-size: cover;
		padding: 20px 60px;		
	}
	.position .detail{
		color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 22px;
	}
	.position .detail .flow1{
		width: 100%;
		display: flex;
		gap: 34px;
		justify-content:space-between;
	}
	.box{
		display: flex;
		min-width: 160px;
		padding: 18px 19px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 3px;
		align-self: stretch;
		border-radius: 0 8px 0 0;
		border: 1px solid #6B812B;
		background: #FFF;
		color: #6B812B;
	}
	.box p{
		margin: 0;
		padding: 0;
	}
	.box p:first-child {
		color: #6B812B;
		font-family: "Noto Sans JP";
		font-size: 15px;
		font-style: normal;
		font-weight: 700;
		line-height: 160%; /* 24px */
	}
	.box p:nth-child(2) {
		color: #6B812B;
		text-align: center;
		font-family: "Noto Sans JP";
		font-size: 12px;
		font-style: normal;
		font-weight: 700;
		line-height: 160%; /* 19.2px */
	}
	.position .detail .flow1 .photo{
		height: 89px;
		align-self: stretch;
	}

	.position .detail .flow2{
		background-color: #ffffff;
		color: #6B812B;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;
		padding: 18px 24px;
	}
	.position .detail .flow2 .item-box{
		display: flex; 
		gap: 12px;
	}
	.position .detail .flow2 .item-box .item{
		color: #ffffff;
		border-radius: 0 0 0 8px;
		background: #6B812B;
		display: flex;
		padding: 18px 24px;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		flex: 1 0 0;
		align-self: stretch;
	}
	.position .detail .flow3{
		width: 100%;
		display: flex;
		gap: 34px;
		justify-content:space-between;
	}
	.product{
		width: auto;
		height: 89px;
		display: flex;
	}
	.position .detail .flow4{
		width: 100%;
		display: flex;
		
	}
	.position .detail .flow4 .text{
		width: 400px;
		margin: 0 34px 0 24px;
	}

/*********
interview
**********/
	.interview{
		padding: 0 40px 56px 40px;
		display: flex;
		flex-direction: column;
		gap: 32px;
	}
	.interview .interview_title{
		margin: 0;
		color: #333;
		font-size: 20px;
		font-weight: 700;
		line-height: 155%;
		letter-spacing: -0.2px;
	}
	.interview .senpai{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}
	.interview .senpai_profile{
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding-top: 4px;
	}
	.interview .senpai_join{
		margin: 0;
		color: #6B812B;
		font-family: "Noto Sans JP";
		font-size: 13px;
		font-style: normal;
		font-weight: 500;
		line-height: 170%;
	}
	.interview .senpai_name{
		margin: 0;
		color: #333;
		font-family: "Noto Sans JP";
		font-size: 22px;
		font-style: normal;
		font-weight: 700;
		line-height: 150%; /* 33px */
		letter-spacing: -0.22px;

	}
	.interview .senpai_photo{
		width: auto;
		max-width: 360px;
		height: 180px;
		flex-shrink: 0;
		object-fit: cover;
	}
	.interview .read{
		margin: 0;
		padding-right: 40px;
		color: #333;
		font-family: "Noto Sans JP";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 195%;
		letter-spacing: 0;
	}
	.interview .projectCaseStudy{
		background-image: url(/ts/ori-tab/00007468/1/img/background.png);
		background-repeat: no-repeat;
		background-size: cover;
		color: #FFF;
		padding: 28px;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}
	.interview .projectCaseStudy h2{
		color: #FFF;
		font-family: "Noto Sans JP";
		font-size: 17px;
		font-style: normal;
		font-weight: 700;
		line-height: 165%;
		letter-spacing: 0;
	}
	.interview .projectCaseStudy dl{
		margin: 0;
		display: grid;
		grid-template-columns: 120px 1fr;
		column-gap: 20px;
		row-gap: 8px;
	}
	.interview .projectCaseStudy dl dt{
		float: none;
		clear: none;
		width: auto;
		margin: 0;
		padding: 0;
		color: #FFF;
		font-size: 13px;
		font-weight: 700;
		line-height: 190%;
		letter-spacing: 0;
	}
	.interview .projectCaseStudy dl dd{
		margin: 0;
		padding: 0;
		color: #FFF;
		font-size: 13px;
		font-weight: 700;
		line-height: 190%;
		letter-spacing: 0;
	}
	.interview .projectCaseStudy_body{
		margin: 0;
		color: #FFF;
		font-family: "Noto Sans JP";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 185%;
		letter-spacing: 0;
	}
	.interview .schedule{
		width: 100%;
		max-width: 100%;
	}
/*********
career
**********/
	.career{
		padding: 0 40px 56px;
		display: flex;
		flex-direction: column;
		gap: 28px;

	}
	.career .read{
		color: #333;
		font-family: "Noto Sans JP";
		font-size: 12px;
		font-style: normal;
		font-weight: 400;
		line-height: 185%; /* 22.2px */	
	}
	.career img{
		width: 100%;
	}
	.career h2{
		color: #333;
		font-family: "Noto Sans JP";
		font-size: 22px;
		font-style: normal;
		font-weight: 700;
		line-height: 155%; /* 34.1px */
		letter-spacing: -0.22px;
	}

/*********
footer
**********/
	.footer{
		background-image: url(/ts/ori-tab/00007468/1/img/background.png);
		background-repeat: no-repeat;
		background-size: cover;
		color: #FFF;
		padding: 28px 40px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		align-items: center;
	}
	.footer p{
		color: #F2F6E8;
		text-align: center;
		font-family: "Noto Sans JP";
		font-size: 13px;
		font-style: normal;
		font-weight: 500;
		line-height: 190%; /* 24.7px */
	}
	.footer a{
		padding: 14px 55px;
		background-color: #fff;
		display: flex;
		justify-content: center;
		width: fit-content;
	}
	.footer a img{
		width: 136px;
		height: auto;	
	}
}


/*▼▼768px以上の表示　主にPC用▼▼*/
@media screen and (min-width: 768px) {
	#cts_CR_00007468_1 {
		.sp-only {
			display: none;
		}
	}
}

/*▼▼767px以下の表示　SP用 ▼▼*/
@media screen and (max-width:767px) {
	#cts_CR_00007468_1 {
		/* background-position: bottom 0 left 0, top 3000px left 0; */

		.pc-only {
			display: none;
		}
/*********
DATA
**********/
		.data{
			padding: 32px 15.5px 32px 10.5px;
		}
		.data .card_box {
			grid-template-columns: 1fr;
			gap: 20px;
    	}
		.data .card .card_text{
			font-size: 55.224px;
		}
		.data .card .card_values--stack .card_text{
			font-size: 48px;
		}
		.data .card .area .area_unit .unit{
			font-size: 12px;
			line-height: 165%; /* 19.8px */
			letter-spacing: 1.56px;		
		}
		.data .card .age_chart{
			max-width: 176px;
		}
		.data .card .card_detail--sales{
			padding: 0 0 0 0;
			position: relative;
			justify-content: center;
		}
		.data .card .card_text--sales{
			font-size: 48px;
		}
		.data .card .card_text--sales span{
			line-height: 1.1;
			margin-bottom: 10px;
		}
		.data .card .icon9{
			position: absolute;
			top: 0;
			right: 42px;
		}
		.card_text--sales span {
			display: inline-block;
			vertical-align: middle; /* 数字の横中央に揃える場合（下揃えなら bottom） */
			line-height: 1.1;       /* 万と円の上下の間隔 */
			text-align: center;
		}
		.data .card .sales_rows{
			margin-top: 28px;
		}
		.data .card .sales_row{
			flex-direction: column;
			align-items: flex-start;
			gap: 0;
		}
/*********
position
**********/
		.position{
			padding: 38px 10px 50px;
		}
		.position h1{
			margin:0 0 42px;
		}

/*********
interview
**********/
		.interview{
			padding: 0 10px 40px;
			gap: 16px;
		}
		.interview .senpai{
			flex-direction: column;
			align-items: stretch;
			padding-right: 0;
			gap: 16px;
		}
		.interview .senpai_photo{
			width: 100%;
			max-width: none;
			height: auto;
		}
		.interview .senpai_name{
			font-size: 22px;
		}
		.interview .read{
			padding-right: 0;
		}
		.interview .projectCaseStudy{
			margin-right: 0;
			/* padding: 24px 16px; */
		}
		.interview .projectCaseStudy dl{
			grid-template-columns: 1fr;
			row-gap: 4px;
		}
		.interview .projectCaseStudy dl dd{
			margin-bottom: 10px;
		}
		.interview .schedule{
			margin-right: 0;
		}
/*********
career
**********/
		.career{
			padding: 0 10px 50px;
			gap: 14px;
		}
/*********
footer
**********/
		.footer{
			padding: 28px 18.5px;
		}
		.footer a{
			/* width: 100%; */
		}
	}
}