@charset "utf-8";
/* ============================================================
   TOP PAGE v20
   Hero下を3セクションへ再構成
     01 AI × Embedded        — What ailia Enables
     02 Model Engineering    — From Model Engineering to AI Computing
     03 Technology & Engagement
   ※図版はdocxの下書きを暫定で配置（デザイナー差し替え前提）
   ============================================================ */

/* ============================== PC ============================== */
@media screen and (min-width:768px) {

	/* ---------- セクション外枠 ---------- */
	#enables {
		background: url("../img/about_bg_pc.jpg") no-repeat center center;
		background-size: cover;
		padding: 150px 0;
	}

	#engineering {
		background: url("../img/lineup_bg_pc.jpg") no-repeat center center;
		background-size: cover;
		padding: 150px 0;
	}

	#technology {
		background: url("../img/wp_bg_pc.jpg") no-repeat center center;
		background-size: cover;
		padding: 150px 0;
	}

	.v20sec .contentshead h2 {
		/* 「Engagement」など長い単語が26%幅の見出し列からはみ出さないサイズ */
		font-size: 40px;
		line-height: 1.2;
	}

	.v20sec .contentshead .titlelabel {
		letter-spacing: 0.02em;
	}

	#enables .contentsinner .contentspic {
		top: 220px;
		left: -90px;
		width: 482px;
	}

	#engineering .contentsinner .contentspic {
		top: 210px;
		left: -78px;
		width: 462px;
	}

	#technology .contentsinner .contentspic {
		top: 260px;
		left: -84px;
		width: 382px;
	}

	/* ---------- 白パネル（#aboutと同じ見え方） ---------- */
	.v20sec .contentsinner .bodyinner .v20panel {
		background: #fff;
		border-radius: 50px 0 0 0;
		position: relative;
	}

	.v20sec .contentsinner .bodyinner .v20panel::after {
		content: '';
		position: absolute;
		top: 0;
		right: -100%;
		background: #fff;
		height: 100%;
		width: 100%;
	}

	.v20sec .v20panelinner {
		padding: 100px 40px 100px 100px;
	}

	/* ---------- 見出し・本文 ---------- */
	.v20catch {
		font-size: 32px;
		font-weight: 500;
		color: #171C61;
		line-height: 1.7;
		letter-spacing: 0.02em;
		margin: 0 0 30px 0;
	}

	.v20lead {
		font-size: 16px;
		line-height: 2;
		letter-spacing: -0.02em;
		margin: 0 0 30px 0;
	}

	.v20lead:last-child {
		margin: 0;
	}

	.v20subhead {
		font-size: 20px;
		font-weight: 500;
		color: #171C61;
		line-height: 1.6;
		letter-spacing: 0.05em;
		border-left: 4px solid #171C61;
		padding: 0 0 0 15px;
		margin: 0 0 25px 0;
	}

	.v20block {
		margin: 100px 0 0 0;
	}

	/* ---------- 図版 ---------- */
	.v20fig {
		margin: 50px 0 0 0;
		padding: 30px 30px 20px 30px;
		background: #F8F8FA;
		border-radius: 8px;
	}

	.v20fig .v20figbody img {
		width: 100%;
		height: auto;
		display: block;
	}

	.v20fig figcaption {
		font-size: 13px;
		line-height: 1.8;
		color: #575D7F;
		text-align: center;
		margin: 15px 0 0 0;
	}

	.v20fig .v20fignote {
		font-size: 11px;
		color: #8A8FA8;
		text-align: center;
		margin: 5px 0 0 0;
	}

	/* ---------- 実績の数字 ---------- */
	.v20stats {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		border-top: 1px solid #E1E3EC;
		border-bottom: 1px solid #E1E3EC;
		padding: 30px 0;
		margin: 40px 0 0 0;
	}

	.v20stats li {
		width: 31%;
		box-sizing: border-box;
	}

	.v20stats .statnum {
		font-size: 40px;
		font-weight: 500;
		color: #171C61;
		line-height: 1;
		letter-spacing: 0.02em;
	}

	.v20stats .statnum .unit {
		font-size: 22px;
		margin: 0 0 0 4px;
	}

	.v20stats .statlabel {
		font-size: 13px;
		line-height: 1.7;
		color: #4A4F6B;
		margin: 12px 0 0 0;
	}

	.v20stats .statlink {
		margin: 8px 0 0 0;
	}

	.v20stats .statlink a {
		display: inline-block;
		font-size: 13px;
		font-weight: bold;
		color: #171C61;
		padding: 0 22px 0 0;
		position: relative;
	}

	.v20stats .statlink a::after {
		content: '→';
		position: absolute;
		top: 0;
		right: 0;
		transition: 0.2s;
	}

	.v20stats .statlink a:hover {
		color: #005CD9;
	}

	.v20stats .statlink a:hover::after {
		right: -4px;
	}

	/* ---------- Special Movie ---------- */
	.v20movie {
		max-width: 640px;
	}

	.v20movie a {
		display: block;
		position: relative;
		line-height: 0;
	}

	.v20movie img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* transformを使わずに中央へ置く。common.cssのhover時scaleと競合するため */
	.v20movie .play {
		display: block;
		position: absolute;
		top: calc(50% - 40px);
		left: calc(50% - 40px);
		width: 80px;
	}

	.v20movie .play img {
		width: 100%;
	}

	/* ---------- まず試す ---------- */
	.v20try {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.v20try .tryitem {
		width: 48.5%;
		box-sizing: border-box;
		border: 1px solid #E1E3EC;
		border-radius: 8px;
		padding: 25px;
		display: flex;
		flex-direction: column;
	}

	.v20try .trytitle {
		font-size: 18px;
		font-weight: 500;
		color: #171C61;
		line-height: 1.6;
		margin: 0 0 10px 0;
	}

	.v20try .trytext {
		font-size: 14px;
		line-height: 1.9;
	}

	.v20try .trypic {
		margin: 20px 0 0 0;
	}

	.v20try .trypic img {
		width: 100%;
		height: auto;
		display: block;
	}

	.v20try .trybtns {
		display: flex;
		flex-wrap: wrap;
		margin: 20px 0 0 0;
	}

	.v20try .trybtns li {
		width: 48%;
		margin: 0 4% 0 0;
	}

	.v20try .trybtns li:last-child {
		margin: 0;
	}

	.v20try .trybtns img {
		width: 100%;
		height: auto;
		display: block;
	}

	.v20try .trystart {
		margin: 20px 0 0 0;
	}

	.v20try .trystart img {
		width: 100%;
		height: auto;
		display: block;
		transition: 0.2s;
	}

	.v20try .trystart a:hover img {
		opacity: 0.85;
	}

	/* ---------- Whitepaper（Section 03に少数だけ残す） ---------- */
	.v20wp {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.v20wp li {
		width: 31%;
		box-sizing: border-box;
	}

	.v20wp .thumb {
		position: relative;
		box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
	}

	.v20wp .thumb img {
		width: 100%;
		height: auto;
		display: block;
	}

	.v20wp .thumb .over {
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: url("../img/dlicon.png") no-repeat center 40% rgba(87, 93, 127, 0.8);
		background-size: 47px auto;
		color: #fff;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
		padding: 72% 0 0 0;
		transition: 0.2s;
	}

	.v20wp a:hover .over {
		opacity: 1;
	}

	.v20wp .wptitle {
		font-size: 14px;
		line-height: 1.8;
		color: #171C61;
		margin: 18px 0 0 0;
	}

	/* ---------- カード ---------- */
	.v20cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.v20cards .v20card {
		width: 31%;
		box-sizing: border-box;
		border: 1px solid #E1E3EC;
		border-radius: 8px;
		padding: 25px 25px 30px 25px;
		background: #fff;
		/* カード内リンクをカード下端に揃えるため */
		display: flex;
		flex-direction: column;
	}

	.v20cards.col2 .v20card {
		width: 48.5%;
		margin: 0 0 25px 0;
	}

	.v20card .cardlabel {
		display: inline-block;
		/* カードがflexコンテナなので、ラベルが横いっぱいに伸びないようにする */
		align-self: flex-start;
		font-size: 12px;
		font-weight: bold;
		letter-spacing: 0.08em;
		background: #171C61;
		color: #fff;
		border-radius: 4px;
		padding: 6px 10px;
		margin: 0 0 15px 0;
	}

	.v20card .cardtitle {
		font-size: 18px;
		color: #171C61;
		line-height: 1.6;
		letter-spacing: 0.03em;
		margin: 0 0 10px 0;
	}

	.v20card .cardtext {
		font-size: 14px;
		line-height: 1.9;
	}

	.v20card .cardlink {
		/* 高さの違うカードでもリンクの行を下端で揃える */
		margin: 20px 0 0 0;
		padding: 20px 0 0 0;
		margin-top: auto;
	}

	.v20card .cardlink a {
		display: inline-block;
		font-size: 14px;
		font-weight: bold;
		color: #171C61;
		padding: 0 24px 0 0;
		position: relative;
	}

	.v20card .cardlink a::after {
		content: '→';
		position: absolute;
		top: 0;
		right: 0;
		transition: 0.2s;
	}

	.v20card .cardlink a:hover {
		color: #255aa3;
	}

	.v20card .cardlink a:hover::after {
		right: -4px;
	}

	/* ---------- STEP ---------- */
	.v20steps {
		border-top: 1px solid #E1E3EC;
	}

	.v20steps li {
		display: flex;
		align-items: flex-start;
		border-bottom: 1px solid #E1E3EC;
		padding: 25px 0;
	}

	.v20steps .stepno {
		width: 140px;
		flex-shrink: 0;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 0.08em;
		color: #575D7F;
		line-height: 1.8;
	}

	.v20steps .steptext {
		flex: 1;
	}

	.v20steps .steptitle {
		font-size: 18px;
		color: #171C61;
		line-height: 1.6;
		margin: 0 0 8px 0;
	}

	.v20steps .stepbody {
		font-size: 14px;
		line-height: 1.9;
	}

	/* ---------- 製品カード ---------- */
	.v20products {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.v20products li {
		width: 23.5%;
		box-sizing: border-box;
	}

	.v20products li a {
		display: block;
		border: 1px solid #E1E3EC;
		border-radius: 8px;
		padding: 20px;
		height: 100%;
		box-sizing: border-box;
		transition: 0.2s;
	}

	.v20products li a:hover {
		border-color: #171C61;
		transform: translateY(-3px);
	}

	.v20products .prodname {
		font-size: 16px;
		font-weight: bold;
		color: #171C61;
		margin: 0 0 8px 0;
	}

	.v20products .prodtext {
		font-size: 13px;
		line-height: 1.8;
		color: #4A4F6B;
	}

	/* ---------- リンクバー ---------- */
	.v20linkbar {
		margin: 30px 0 0 0;
	}

	.v20linkbar a {
		display: block;
		background: #F3F4F7;
		border-radius: 8px;
		padding: 22px 60px 22px 30px;
		font-size: 16px;
		font-weight: bold;
		color: #171C61;
		position: relative;
		transition: 0.2s;
	}

	.v20linkbar a::after {
		content: '→';
		position: absolute;
		top: 50%;
		right: 30px;
		transform: translateY(-50%);
		font-size: 18px;
		transition: 0.2s;
	}

	.v20linkbar a:hover {
		background: #E9EAEF;
	}

	.v20linkbar a:hover::after {
		right: 22px;
	}

	/* ---------- CTA ---------- */
	.v20cta {
		display: flex;
		flex-wrap: wrap;
		margin: 45px 0 0 0;
	}

	.v20cta li {
		margin: 0 20px 15px 0;
	}

	.v20btn {
		display: inline-block;
		font-size: 16px;
		font-weight: bold;
		line-height: 1;
		letter-spacing: 0.05em;
		background: #171C61;
		color: #fff;
		border: 2px solid #171C61;
		border-radius: 50px;
		padding: 18px 50px;
		transition: 0.2s;
	}

	.v20btn:hover {
		background: #005CD9;
		border-color: #005CD9;
		color: #fff;
	}

	.v20btn.ghost {
		background: transparent;
		color: #171C61;
	}

	.v20btn.ghost:hover {
		background: #171C61;
		color: #fff;
	}

	/* ---------- 相談導線 ---------- */
	.v20entry {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.v20entry li {
		width: 31%;
		box-sizing: border-box;
	}

	.v20entry li a {
		display: block;
		border: 1px solid #E1E3EC;
		border-radius: 8px;
		padding: 25px 20px;
		height: 100%;
		box-sizing: border-box;
		text-align: center;
		transition: 0.2s;
	}

	.v20entry li a:hover {
		border-color: #171C61;
		background: #F8F8FA;
	}

	.v20entry .entrytarget {
		font-size: 12px;
		font-weight: bold;
		letter-spacing: 0.08em;
		color: #575D7F;
		margin: 0 0 10px 0;
	}

	.v20entry .entrycta {
		font-size: 16px;
		font-weight: bold;
		color: #171C61;
		line-height: 1.6;
	}

	/* ---------- Section 03 に内包したBlogブロック ---------- */
	#technology #blog {
		background: none;
		padding: 0;
	}

	#technology #blog .contentsinner {
		display: block;
		min-width: 0;
		max-width: none;
		margin: 0;
	}

	#technology #blog .contentsinner .contentsbody {
		width: 100%;
	}

	#technology #blog .contentsinner .bodyinner .item {
		background: none;
		border-radius: 0;
	}

	#technology #blog .contentsinner .bodyinner .item::after {
		display: none;
	}

	#technology #blog .contentsinner .item .iteminner {
		padding: 0;
	}

	#technology #blog .item .postlist .postinner {
		margin: 0;
	}

	#technology #blog .item .postlist .post {
		margin: 0 0 35px 0;
	}

	#technology #blog .item .postlist .post .title {
		font-size: 18px;
	}

	/* APIのサムネイルは縦横比がまちまちなので16:9に揃える */
	#technology #blog .item .postlist .post .pic {
		width: 44%;
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 6px;
		background: #F3F4F7;
	}

	#technology #blog .item .postlist .post .pic img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	#technology #blog .item .postlist .post .textarea {
		width: 52%;
	}

	#technology #blog .item .linkbtn {
		margin: 10px 0 0 0;
	}

	#technology #blog .item .linkbtn a {
		font-size: 16px;
	}

	/* ---------- Case（量産・採用事例のカルーセル） ---------- */
	#engineering .contentsfoot {
		margin: 100px 0 0 0;
	}

	/* カルーセルが全幅なので見出しは中央寄せ。左寄せにするとスクロールナビと重なる */
	#engineering .contentsfoot .casehead {
		margin: 0 auto 30px auto;
		text-align: center;
	}

	#engineering .contentsfoot .caselabel {
		font-size: 28px;
		font-weight: 500;
		color: #575D7F;
		line-height: 1;
		letter-spacing: 0.02em;
	}

	#engineering .contentsfoot .casetitle {
		font-size: 14px;
		color: #575D7F;
		line-height: 1.2;
		letter-spacing: 0.05em;
		margin: 10px 0 0 0;
	}

	#engineering .lineupslide li {
		padding: 0 5%;
	}

	#engineering .lineupslide li .textarea {
		margin: 15px 0 0 0;
	}

	#engineering .lineupslide li .label {
		font-size: 14px;
		font-weight: bold;
		color: #575D7F;
		line-height: 1.2;
		margin: 0 0 5px 0;
		letter-spacing: 0.05em;
	}

	#engineering .lineupslide li .text {
		font-size: 18px;
		font-weight: bold;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#engineering .contentsfoot .morebtn {
		display: none;
	}

	/* ---------- Closing ---------- */
	/* 右側に人物写真が入る背景なので、元のPhilosophyと同じく左寄せで文字を逃がす */
	#philosophy .v20closing {
		text-align: left;
		max-width: 700px;
	}

	#philosophy .v20closing .closingtitle {
		font-size: 40px;
		font-weight: 500;
		color: #171C61;
		line-height: 1.4;
		letter-spacing: 0.04em;
		margin: 0 0 45px 0;
	}

	#philosophy .v20closing .closingtext {
		/* 元のPhilosophy本文（.lead）と同じ字送りに揃える */
		font-size: 17px;
		line-height: 2.4;
		letter-spacing: 0.02em;
		color: #575D7F;
	}
}

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

	#enables {
		background: url("../img/about_bg_sp.jpg") no-repeat center center;
		background-size: cover;
		padding: 8% 5% 10% 5%;
	}

	#engineering {
		background: url("../img/lineup_bg_sp.jpg") no-repeat center center;
		background-size: cover;
		padding: 8% 5% 10% 5%;
	}

	#technology {
		background: url("../img/wp_bg_sp.jpg") no-repeat center center;
		background-size: cover;
		padding: 8% 5% 10% 5%;
	}

	.v20sec .contentshead h2 {
		font-size: 28px;
		line-height: 1.2;
	}

	#enables .contentsinner .contentspic,
	#engineering .contentsinner .contentspic,
	#technology .contentsinner .contentspic {
		display: none;
	}

	.v20sec .contentsinner .bodyinner .v20panel {
		background: #fff;
		border-radius: 20px 20px 0 0;
		position: relative;
	}

	.v20sec .v20panelinner {
		padding: 10% 8%;
	}

	.v20catch {
		font-size: 20px;
		font-weight: 500;
		color: #171C61;
		line-height: 1.7;
		margin: 0 0 6% 0;
	}

	.v20lead {
		font-size: 12px;
		line-height: 2;
		margin: 0 0 6% 0;
	}

	.v20lead:last-child {
		margin: 0;
	}

	.v20subhead {
		font-size: 16px;
		font-weight: 500;
		color: #171C61;
		line-height: 1.6;
		border-left: 3px solid #171C61;
		padding: 0 0 0 10px;
		margin: 0 0 5% 0;
	}

	.v20block {
		margin: 12% 0 0 0;
	}

	.v20fig {
		margin: 8% 0 0 0;
		padding: 5%;
		background: #F8F8FA;
		border-radius: 8px;
	}

	/* 図版はSPだと縮小しすぎて読めないので、画像だけ横スクロールさせる */
	.v20fig .v20figbody {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.v20fig .v20figbody img {
		display: block;
		height: auto;
		width: 100%;
		min-width: 560px;
	}

	.v20fig figcaption {
		font-size: 11px;
		line-height: 1.8;
		color: #575D7F;
		margin: 3% 0 0 0;
	}

	.v20fig .v20fignote {
		font-size: 10px;
		color: #8A8FA8;
		margin: 1% 0 0 0;
	}

	.v20stats {
		border-top: 1px solid #E1E3EC;
		border-bottom: 1px solid #E1E3EC;
		padding: 6% 0;
		margin: 8% 0 0 0;
	}

	.v20stats li {
		margin: 0 0 5% 0;
	}

	.v20stats li:last-child {
		margin: 0;
	}

	.v20stats .statnum {
		font-size: 28px;
		font-weight: 500;
		color: #171C61;
		line-height: 1;
	}

	.v20stats .statnum .unit {
		font-size: 16px;
		margin: 0 0 0 4px;
	}

	.v20stats .statlabel {
		font-size: 11px;
		line-height: 1.7;
		color: #4A4F6B;
		margin: 2% 0 0 0;
	}

	.v20stats .statlink {
		margin: 2% 0 0 0;
	}

	.v20stats .statlink a {
		display: inline-block;
		font-size: 11px;
		font-weight: bold;
		color: #171C61;
		padding: 0 18px 0 0;
		position: relative;
	}

	.v20stats .statlink a::after {
		content: '→';
		position: absolute;
		top: 0;
		right: 0;
	}

	.v20movie a {
		display: block;
		position: relative;
		line-height: 0;
	}

	.v20movie img {
		width: 100%;
		height: auto;
		display: block;
	}

	.v20movie .play {
		display: block;
		position: absolute;
		top: calc(50% - 25px);
		left: calc(50% - 25px);
		width: 50px;
	}

	.v20movie .play img {
		width: 100%;
	}

	.v20try .tryitem {
		border: 1px solid #E1E3EC;
		border-radius: 8px;
		padding: 5%;
		margin: 0 0 4% 0;
	}

	.v20try .tryitem:last-child {
		margin: 0;
	}

	.v20try .trytitle {
		font-size: 15px;
		font-weight: 500;
		color: #171C61;
		line-height: 1.6;
		margin: 0 0 2% 0;
	}

	.v20try .trytext {
		font-size: 12px;
		line-height: 1.9;
	}

	.v20try .trypic {
		margin: 5% 0 0 0;
	}

	.v20try .trypic img,
	.v20try .trybtns img,
	.v20try .trystart img {
		width: 100%;
		height: auto;
		display: block;
	}

	.v20try .trybtns {
		display: flex;
		flex-wrap: wrap;
		margin: 5% 0 0 0;
	}

	.v20try .trybtns li {
		width: 48%;
		margin: 0 4% 0 0;
	}

	.v20try .trybtns li:last-child {
		margin: 0;
	}

	.v20try .trystart {
		margin: 5% 0 0 0;
	}

	.v20wp {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.v20wp li {
		width: 48%;
		box-sizing: border-box;
		margin: 0 0 6% 0;
	}

	.v20wp .thumb {
		position: relative;
		box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3);
	}

	.v20wp .thumb img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* SPはhoverが無いのでダウンロード表記を常時出す */
	.v20wp .thumb .over {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background: rgba(87, 93, 127, 0.9);
		color: #fff;
		text-align: center;
		font-size: 10px;
		font-weight: bold;
		padding: 5px 0;
	}

	.v20wp .wptitle {
		font-size: 12px;
		line-height: 1.7;
		color: #171C61;
		margin: 4% 0 0 0;
	}

	.v20cards .v20card {
		border: 1px solid #E1E3EC;
		border-radius: 8px;
		padding: 5%;
		margin: 0 0 4% 0;
	}

	.v20cards .v20card:last-child {
		margin: 0;
	}

	.v20card .cardlabel {
		display: inline-block;
		align-self: flex-start;
		font-size: 11px;
		font-weight: bold;
		background: #171C61;
		color: #fff;
		padding: 3px 8px;
		margin: 0 0 3% 0;
	}

	.v20card .cardtitle {
		font-size: 15px;
		font-weight: 500;
		color: #171C61;
		line-height: 1.6;
		margin: 0 0 2% 0;
	}

	.v20card .cardtext {
		font-size: 12px;
		line-height: 1.9;
	}

	.v20card .cardlink {
		margin: 4% 0 0 0;
	}

	.v20card .cardlink a {
		display: inline-block;
		font-size: 12px;
		font-weight: bold;
		color: #171C61;
		padding: 0 20px 0 0;
		position: relative;
	}

	.v20card .cardlink a::after {
		content: '→';
		position: absolute;
		top: 0;
		right: 0;
	}

	.v20steps {
		border-top: 1px solid #E1E3EC;
	}

	.v20steps li {
		border-bottom: 1px solid #E1E3EC;
		padding: 5% 0;
	}

	.v20steps .stepno {
		font-size: 11px;
		font-weight: bold;
		letter-spacing: 0.08em;
		color: #575D7F;
		margin: 0 0 2% 0;
	}

	.v20steps .steptitle {
		font-size: 15px;
		color: #171C61;
		line-height: 1.6;
		margin: 0 0 2% 0;
	}

	.v20steps .stepbody {
		font-size: 12px;
		line-height: 1.9;
	}

	.v20products li {
		margin: 0 0 3% 0;
	}

	.v20products li a {
		display: block;
		border: 1px solid #E1E3EC;
		border-radius: 8px;
		padding: 5%;
	}

	.v20products .prodname {
		font-size: 14px;
		font-weight: bold;
		color: #171C61;
		margin: 0 0 2% 0;
	}

	.v20products .prodtext {
		font-size: 12px;
		line-height: 1.8;
		color: #4A4F6B;
	}

	.v20linkbar {
		margin: 5% 0 0 0;
	}

	.v20linkbar a {
		display: block;
		background: #F3F4F7;
		border-radius: 8px;
		padding: 5% 12% 5% 5%;
		font-size: 13px;
		font-weight: bold;
		color: #171C61;
		position: relative;
	}

	.v20linkbar a::after {
		content: '→';
		position: absolute;
		top: 50%;
		right: 5%;
		transform: translateY(-50%);
	}

	.v20cta {
		margin: 8% 0 0 0;
	}

	.v20cta li {
		margin: 0 0 3% 0;
	}

	.v20btn {
		display: block;
		text-align: center;
		font-size: 13px;
		font-weight: bold;
		line-height: 1;
		background: #171C61;
		color: #fff;
		border: 2px solid #171C61;
		border-radius: 50px;
		padding: 5% 3%;
	}

	.v20btn.ghost {
		background: transparent;
		color: #171C61;
	}

	.v20entry li {
		margin: 0 0 3% 0;
	}

	.v20entry li a {
		display: block;
		border: 1px solid #E1E3EC;
		border-radius: 8px;
		padding: 5%;
		text-align: center;
	}

	.v20entry .entrytarget {
		font-size: 11px;
		font-weight: bold;
		color: #575D7F;
		margin: 0 0 2% 0;
	}

	.v20entry .entrycta {
		font-size: 14px;
		font-weight: bold;
		color: #171C61;
		line-height: 1.6;
	}

	#technology #blog {
		background: none;
		padding: 0;
	}

	#technology #blog .contentsinner .bodyinner .item {
		background: none;
		border-radius: 0;
	}

	#technology #blog .contentsinner .item .iteminner {
		padding: 0;
	}

	#technology #blog .item .postlist .post .pic {
		aspect-ratio: 16 / 9;
		overflow: hidden;
		border-radius: 6px;
		background: #F3F4F7;
	}

	#technology #blog .item .postlist .post .pic img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* ---------- Case（SPでは縦積み＋もっと読む） ---------- */
	#engineering .contentsfoot {
		margin: 12% 0 0 0;
	}

	#engineering .contentsfoot .casehead {
		margin: 0 10% 6% 10%;
	}

	#engineering .contentsfoot .caselabel {
		font-size: 22px;
		font-weight: 500;
		color: #575D7F;
		line-height: 1;
	}

	#engineering .contentsfoot .casetitle {
		font-size: 11px;
		color: #575D7F;
		line-height: 1.2;
		margin: 5px 0 0 0;
	}

	#engineering .lineupslide {
		margin: 0 10%;
	}

	#engineering .lineupslide li {
		margin: 0 0 8% 0;
	}

	#engineering .lineupslide .lineupmore {
		display: none;
	}

	#engineering .lineupslide li .textarea {
		margin: 15px 0 0 0;
	}

	#engineering .lineupslide li .label {
		font-size: 11px;
		font-weight: bold;
		color: #575D7F;
		line-height: 1.2;
		margin: 0 0 2% 0;
		letter-spacing: 0.05em;
	}

	#engineering .lineupslide li .text {
		font-size: 14px;
		font-weight: bold;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#engineering .contentsfoot .morebtn {
		text-align: center;
	}

	#engineering .contentsfoot .morebtn.close {
		display: none;
	}

	#engineering .contentsfoot .morebtn a {
		display: inline-block;
		font-weight: bold;
		font-size: 14px;
		padding: 5% 10%;
		color: #003779;
	}

	#engineering .contentsfoot .morebtn .ul {
		display: inline-block;
		padding: 0 0 5px 0;
		border-bottom: 2px solid #003779;
	}

	#philosophy .v20closing {
		text-align: left;
	}

	#philosophy .v20closing .closingtitle {
		font-size: 24px;
		font-weight: 500;
		color: #171C61;
		line-height: 1.4;
		margin: 0 0 8% 0;
	}

	#philosophy .v20closing .closingtext {
		font-size: 13px;
		line-height: 2.2;
		color: #575D7F;
	}
}

/* ============================================================
   XDデザイン反映（ailia_top_renewal20260925）
   上の v20 スタイルを上書きする。
   ============================================================ */

/* ============================== 共通 ============================== */

/* 見出しは太字 */
.v20catch,
.v20subhead,
#philosophy .v20closing .closingtitle {
	font-weight: bold;
}

/* ---------- 図版：薄紫の枠＋白い台紙 ---------- */
.v20fig {
	background: #EDECF5;
	border-radius: 8px;
}

.v20fig .v20figbody {
	background: #fff;
	border-radius: 4px;
}

.v20fig .v20figbody img {
	width: 100%;
	min-width: 0;
	height: auto;
	display: block;
}

.v20fig figcaption {
	color: #8A8FA8;
}

/* 拡大できる図 */
.v20fig--zoom .figzoom {
	display: block;
	position: relative;
	cursor: zoom-in;
}

.v20fig--zoom .figzoom__badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(23, 28, 97, 0.85);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.05em;
	padding: 6px 10px 6px 8px;
	border-radius: 20px;
	pointer-events: none;
}

/* 虫めがねアイコン */
.v20fig--zoom .figzoom__badge::before {
	content: '';
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M15.5 15.5 22 22M10 7v6M7 10h6'/%3E%3C/svg%3E");
}

/* ---------- 拡大オーバーレイ（js/figzoom.js） ---------- */
body.figzoom-lock {
	position: fixed;
	left: 0;
	right: 0;
	overflow: hidden;
}

.figzoom-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.5);
}

.figzoom-overlay.is-open {
	display: block;
	animation: figzoomIn 0.2s ease;
}

@keyframes figzoomIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.figzoom-stage {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.figzoom-scroller {
	background: #fff;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.figzoom-scroller img {
	display: block;
	height: auto;
	margin: 0 auto;
}

.figzoom-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.figzoom-close span,
.figzoom-close span::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	margin: -1px 0 0 -10px;
	background: #171C61;
	transform: rotate(45deg);
}

.figzoom-close span::before {
	content: '';
	transform: rotate(90deg);
}

.figzoom-hint {
	display: none;
	color: #fff;
	text-align: center;
	font-size: 12px;
	margin: 12px 0 0 0;
}

/* ============================== PC ============================== */
@media screen and (min-width:768px) {

	.v20catch {
		letter-spacing: 0.04em;
	}

	.v20subhead {
		font-size: 20px;
		border-left-width: 8px;
		padding-left: 16px;
	}

	/* ---------- 図版 ---------- */
	.v20fig {
		padding: 20px 20px 16px 20px;
	}

	.v20fig .v20figbody {
		padding: 20px;
	}

	.v20fig figcaption {
		font-size: 12px;
		margin: 14px 0 0 0;
	}

	.v20fig--zoom .figzoom__badge {
		opacity: 0;
		transition: 0.2s;
	}

	.v20fig--zoom .figzoom:hover .figzoom__badge {
		opacity: 1;
	}

	.figzoom-scroller {
		padding: 60px 40px;
	}

	.figzoom-scroller img {
		width: 100%;
		max-width: 1600px;
	}

	/* ---------- アイリアが持つ３つの力：ラベルを帯に ---------- */
	#enables .v20cards:not(.col2) .v20card {
		padding: 0 0 25px 0;
		overflow: hidden;
	}

	#enables .v20cards:not(.col2) .v20card .cardlabel {
		display: block;
		align-self: stretch;
		text-align: center;
		font-size: 13px;
		padding: 12px 10px;
		margin: 0 0 20px 0;
	}

	#enables .v20cards:not(.col2) .v20card .cardtitle,
	#enables .v20cards:not(.col2) .v20card .cardtext {
		padding: 0 20px;
	}

	/* ---------- 進め方：左に紺のラベル、間に矢印 ---------- */
	.v20steps {
		border-top: none;
	}

	.v20steps li {
		align-items: stretch;
		border: 1px solid #E1E3EC;
		border-radius: 6px;
		padding: 0;
		margin: 0 0 40px 0;
		position: relative;
		background: #fff;
	}

	.v20steps li:last-child {
		margin: 0;
	}

	/* ステップ間の↓ */
	.v20steps li:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 70px;
		bottom: -32px;
		width: 12px;
		height: 24px;
		background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24' fill='none' stroke='%23171C61' stroke-width='1.5'%3E%3Cpath d='M6 0v22M1 17l5 5 5-5'/%3E%3C/svg%3E");
		transform: translateX(-50%);
	}

	.v20steps .stepno {
		width: 150px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #171C61;
		color: #fff;
		font-size: 14px;
		border-radius: 5px 0 0 5px;
		padding: 20px 0;
	}

	.v20steps .steptext {
		padding: 20px 25px;
	}

	.v20steps .steptitle {
		font-size: 17px;
		margin: 0 0 4px 0;
	}

	.v20steps .stepbody {
		font-size: 13px;
		line-height: 1.8;
	}

	/* ---------- まず試す：左テキスト／右画像の2段 ---------- */
	.v20try {
		display: block;
	}

	.v20try .tryitem {
		width: 100%;
		border: none;
		border-radius: 0;
		padding: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto 1fr;
		column-gap: 30px;
		align-items: start;
		margin: 0 0 100px 0;
	}

	.v20try .tryitem:last-child {
		margin: 0;
	}

	.v20try .trytitle,
	.v20try .trytext,
	.v20try .trybtns {
		grid-column: 1;
	}

	.v20try .trytext {
		font-size: 13px;
	}

	.v20try .trypic,
	.v20try .trystart {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin: 0;
		align-self: center;
	}

	.v20try .trypic img {
		border-radius: 6px;
	}

	.v20try .trybtns {
		align-self: start;
		margin: 20px 0 0 0;
	}

	.v20try .trybtns li {
		width: 46%;
	}

	/* ---------- 具体例：1列 ---------- */
	#engineering .v20cards.col2 .v20card {
		width: 100%;
		padding: 25px 25px 25px 25px;
	}

	#engineering .v20cards.col2 .v20card:last-child {
		margin: 0;
	}

	#engineering .v20card .cardtext {
		font-size: 13px;
	}

	#engineering .v20card .cardlink {
		padding: 15px 0 0 0;
	}

	/* ---------- CASE ---------- */
	#engineering .contentsfoot .caselabel {
		font-weight: 600;
		text-transform: uppercase;
	}

	/* ---------- Technology：1枚の枠に2×2 ---------- */
	#technology .v20cards.col2 {
		border: 1px solid #E1E3EC;
		border-radius: 8px;
		padding: 25px 25px 5px 25px;
		margin: 40px 0 0 0;
	}

	#technology .v20cards.col2 .v20card {
		border: none;
		border-radius: 0;
		padding: 0;
		margin: 0 0 20px 0;
		width: 48%;
	}

	#technology .v20card .cardlabel {
		font-size: 11px;
		margin: 0 0 10px 0;
	}

	#technology .v20card .cardtext {
		font-size: 13px;
		line-height: 1.8;
	}

	/* ---------- 相談導線：ラベル＋ボタン ---------- */
	.v20entry li a,
	.v20entry li a:hover {
		border: none;
		background: none;
		padding: 0;
	}

	.v20entry .entrytarget {
		color: #171C61;
		margin: 0 0 8px 0;
	}

	.v20entry .entrycta {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 56px;
		box-sizing: border-box;
		padding: 8px 15px;
		font-size: 14px;
		line-height: 1.4;
		background: #171C61;
		color: #fff;
		border: 2px solid #171C61;
		border-radius: 6px;
		transition: 0.2s;
	}

	.v20entry li:nth-child(2) .entrycta {
		background: #fff;
		color: #171C61;
	}

	.v20entry li a:hover .entrycta {
		background: #005CD9;
		border-color: #005CD9;
		color: #fff;
	}

	.v20entry + .v20linkbar {
		margin: 25px 0 0 0;
	}
}

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

	.v20subhead {
		border-left-width: 5px;
		padding-left: 12px;
	}

	.v20fig {
		padding: 4%;
	}

	.v20fig .v20figbody {
		padding: 4%;
		overflow: visible;
	}

	.v20fig figcaption {
		text-align: center;
	}

	.v20fig--zoom .figzoom__badge {
		font-size: 10px;
		right: 4px;
		bottom: 4px;
		padding: 5px 8px 5px 6px;
	}

	/* 拡大時は文字が読める高さにして横スクロール */
	.figzoom-scroller {
		padding: 20px;
	}

	.figzoom-scroller img {
		width: auto;
		max-width: none;
		height: min(42vh, 360px);
	}

	.figzoom-hint {
		display: block;
	}

	/* 横向きのときは高さに合わせる */
	@media (orientation: landscape) {
		.figzoom-scroller img {
			height: calc(100vh - 110px);
		}
	}

	.figzoom-close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
	}

	/* ---------- ３つの力：ラベルを帯に ---------- */
	#enables .v20cards:not(.col2) .v20card {
		padding: 0 0 5% 0;
		overflow: hidden;
	}

	#enables .v20cards:not(.col2) .v20card .cardlabel {
		display: block;
		text-align: center;
		padding: 8px;
		margin: 0 0 4% 0;
	}

	#enables .v20cards:not(.col2) .v20card .cardtitle,
	#enables .v20cards:not(.col2) .v20card .cardtext {
		padding: 0 5%;
	}

	/* ---------- 進め方 ---------- */
	.v20steps {
		border-top: none;
	}

	.v20steps li {
		display: flex;
		border: 1px solid #E1E3EC;
		border-radius: 6px;
		padding: 0;
		margin: 0 0 28px 0;
		position: relative;
	}

	.v20steps li:last-child {
		margin: 0;
	}

	.v20steps li:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 36px;
		bottom: -24px;
		width: 10px;
		height: 20px;
		background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 24' fill='none' stroke='%23171C61' stroke-width='1.5'%3E%3Cpath d='M6 0v22M1 17l5 5 5-5'/%3E%3C/svg%3E");
		transform: translateX(-50%);
	}

	.v20steps .stepno {
		width: 72px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #171C61;
		color: #fff;
		font-size: 10px;
		border-radius: 5px 0 0 5px;
		margin: 0;
	}

	.v20steps .steptext {
		flex: 1;
		padding: 4% 5%;
	}

	/* ---------- まず試す ---------- */
	.v20try .tryitem {
		border: none;
		border-radius: 0;
		padding: 0;
		margin: 0 0 8% 0;
	}

	/* ---------- CASE ---------- */
	#engineering .contentsfoot .caselabel {
		font-weight: 600;
		text-transform: uppercase;
	}

	/* ---------- Technology：1枚の枠 ---------- */
	#technology .v20cards.col2 {
		border: 1px solid #E1E3EC;
		border-radius: 8px;
		padding: 5%;
		margin: 6% 0 0 0;
	}

	#technology .v20cards.col2 .v20card {
		border: none;
		border-radius: 0;
		padding: 0;
		margin: 0 0 5% 0;
	}

	#technology .v20cards.col2 .v20card:last-child {
		margin: 0;
	}

	/* ---------- 相談導線 ---------- */
	.v20entry li a {
		border: none;
		padding: 0;
	}

	.v20entry .entrytarget {
		color: #171C61;
	}

	.v20entry .entrycta {
		display: block;
		font-size: 13px;
		background: #171C61;
		color: #fff;
		border: 2px solid #171C61;
		border-radius: 6px;
		padding: 4% 3%;
	}

	.v20entry li:nth-child(2) .entrycta {
		background: #fff;
		color: #171C61;
	}
}

/* ---------- News：左右の余白 ---------- */
.newsListSection .cw {
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0 40px;
}

@media screen and (max-width:767px) {
	.newsListSection .cw {
		padding: 0 5%;
	}
}

/* ---------- Technical Blog：XDに合わせる ---------- */
/* サムネイルは図版が多いので切り抜かず、枠付きで全体を見せる */
#technology #blog .item .postlist .post a {
	display: block;
	color: inherit;
}

#technology #blog .item .postlist .post .pic {
	aspect-ratio: 16 / 10;
	border: 1px solid #D9DBE3;
	border-radius: 0;
	background: #fff;
	box-sizing: border-box;
}

#technology #blog .item .postlist .post .pic img {
	object-fit: contain;
	transition: 0.3s;
}

#technology #blog .item .postlist .post a:hover .pic img {
	transform: scale(1.03);
}

#technology #blog .item .postlist .post .date {
	font-weight: 500;
	color: #4A4F6B;
}

#technology #blog .item .postlist .post .title {
	font-weight: bold;
	color: #171C61;
	text-decoration: none;
	letter-spacing: 0.03em;
	transition: 0.2s;
}

#technology #blog .item .postlist .post a:hover .title {
	color: #005CD9;
}

#technology #blog .item .postlist .post .text {
	color: #333;
}

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

	#technology #blog .item .postlist .postinner {
		align-items: flex-start;
	}

	#technology #blog .item .postlist .post {
		margin: 0 0 40px 0;
	}

	#technology #blog .item .postlist .post .pic {
		width: 49%;
	}

	#technology #blog .item .postlist .post .textarea {
		width: 46%;
		padding: 0;
	}

	#technology #blog .item .postlist .post .date {
		font-size: 12px;
		margin: 0 0 10px 0;
	}

	#technology #blog .item .postlist .post .title {
		font-size: 17px;
		line-height: 1.7;
		margin: 0 0 12px 0;
	}

	#technology #blog .item .postlist .post .text {
		font-size: 13px;
		line-height: 1.9;
	}
}

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

	#technology #blog .item .postlist .post .date {
		font-size: 11px;
	}

	#technology #blog .item .postlist .post .title {
		font-size: 14px;
	}

	#technology #blog .item .postlist .post .text {
		font-size: 12px;
		line-height: 1.8;
	}
}

/* ---------- まず試す：左列の人物写真 ---------- */
/* .v20block--try を基準に、左の見出し列（contentsinnerの左26%）まで張り出させる。
   leftは「パネル左余白100px＋見出し列26%」をブロック幅の%に換算し、人物の足が切れない位置に調整した値 */
@media screen and (min-width:768px) {

	.v20block--try {
		position: relative;
	}

	#engineering .contentsinner .v20block--try .v20trypic {
		top: -60px;
		left: calc(-35.14% - 180px);
		width: 480px;
		pointer-events: none;
	}

	#engineering .contentsinner .v20block--try .v20trypic img {
		width: 100%;
		height: auto;
		display: block;
	}
}

@media screen and (max-width:767px) {
	#engineering .contentsinner .v20block--try .v20trypic {
		display: none;
	}
}