@charset "UTF-8";
/* 1rem = 16px
    1px = 0.0625rem(1/16)

    PCbasewidth = 1580px（デザインは1920px幅、中身の幅が1580px）
    PC : 1px = 1/1580*100cqi = 0.0632911cqi

    SPbasewidth = 750px
    SP : 1px = 1/750*100cqi = 0.133333cqi */

/* --------------------------------------------------------------------- */
/*      COMMON 
/* --------------------------------------------------------------------- */
:root {
	--c-wht: #fff;
	--c-navy: #0d3779;
	--c-black: #221714;
	--c-txt: #231815;
	--c-beige: #f6f2ef;
	--c-yellow2: #ffce15;
	--c-black2: #040000; /* SCROLLのアイコン */
}

body {
	background: var(--c-wht);
	font-size: 100%;
	font-family: "Noto Sans JP","BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
	font-weight: 500;
	line-height: 1;
	color: var(--c-txt);
	position: relative;
	font-feature-settings: "palt";
}

/* ページ内リンクはスクロールして移動（動きを減らす設定のときは一瞬で移動） */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

img {
	height: auto;
}

img[src$=".svg"] {
	width: 100%;
}

/* img_box：画像を囲む要素。行の高さで画像の下にすき間ができないようにし、画像をブロックにする */
.img_box {
	line-height: 0;
	img {
		display: block;
	}
}

/* parts_box：イラストのパーツを重ねて配置する（MV・サービス。位置・幅は各セクションで画像全体に対する%） */
.parts_box {
	position: relative;
	img {
		position: absolute;
	}
}
/* 登場アニメーション前は隠しておく（js/script.jsで表示。動きを減らす設定のときは最初から表示。JS無効のときは noscript.css で表示） */
@media (prefers-reduced-motion: no-preference) {
	.parts_box img {
		visibility: hidden;
	}
}

/* PC：.containerはデザイン（1920px）の中身の幅1580pxまで。PCのcqiは1580px基準（1px = 0.0632911cqi、px ÷ 15.8）
   ・1580px以上：文字・画像の大きさはデザインと同じ。画面を狭くすると左右の余白だけが狭くなる
   ・1579px以下：全体（文字・画像・余白）が画面幅に合わせて縮む */
.container {
	max-width: 1580px;
	container: contents_area / inline-size;
	margin-inline: auto;
	line-height: 1.4;
}

/* 文中のテキストリンク：hoverで下線（ボタンは各ボタンの指定で下線を消す） */
main a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.kome {
	margin-left: 1em;
}
.kome:before {
	content: "※";
	text-indent: 1em;
	margin-left: -1em;
}

.disc li:before {
	content: "";
	width: .2em;
	height: .2em;
	border-radius: 9999px;
	background: var(--c-txt);
	margin-right: 0.5em;
	margin-left: -.7em;
	display: inline-block;
	position: relative;
	top: -.2em;
}
@media screen and (min-width: 791px) {
	.disc li:before {
		width: .3em;
		height: .3em;
		margin-left: -.8em;
	}
}

.header02 {
	line-height: 0;
	img {
		width: 49.28cqi; /* 369.6px（SVG 315pxをデザインの88px表示に合わせて拡大） */
	}
}
.header02 + p {
	margin-top: 1.627cqi; /* 12.2px */
	font-size: 4cqi; /* 30px */
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
}

/* PC：見出し（左寄せ） */
@media screen and (min-width: 791px) {
	.header02 img {
		width: 19.936cqi; /* 315px */
	}
	.header02 + p {
		margin-top: -0.158cqi; /* -2.5px */
		padding-left: 0.341cqi; /* 5.4px */
		font-size: 1.456cqi; /* 23px */
		font-weight: 400;
		letter-spacing: 0.07em;
		text-align: left;
	}
	/* 見出しの左の位置（各セクションのSPの位置を上書きする。package・contactは各セクションで指定） */
	:is(.service, .news, .works) .container > .inner :is(.header02, .header02 + p) {
		margin-left: 9.152cqi; /* 144.6px */
	}
	:is(.profile, .message) .container > .inner :is(.header02, .header02 + p) {
		margin-left: 9.487cqi; /* 149.9px */
	}
}

/* block_sp：SPのときだけ表示 / block_pc：PCのときだけ表示 */
.block_sp {
	display: block;
}

.block_pc {
	display: none;
}

@media screen and (min-width: 791px) {
	.block_pc {
		display: block;
	}

	.block_sp {
		display: none;
	}
}

/* fadeInUp：画面に入ったら下からふわっと表示（js/script.jsで .is-show を付ける）
   使い方：<div class="fadeInUp">…</div>
   個別に調整したいときは、要素にCSS変数を上書きする
   ・待ち時間（両方）：style="--fiu-delay: 0.2s;"
   ・待ち時間（PCのみ）：style="--fiu-delay-pc: 0.2s;"（SPは --fiu-delay の値＝指定がなければ0s）
   ・待ち時間（SPのみ）：style="--fiu-delay-sp: 0.2s;"（PCは --fiu-delay の値＝指定がなければ0s）
   ・PCとSPで別々に：style="--fiu-delay-sp: 0.2s; --fiu-delay-pc: 0.4s;" */
.fadeInUp {
	--fiu-distance: 30px; /* 動く距離 */
	--fiu-duration: 0.8s; /* 表示にかける時間 */
	--fiu-delay: 0s; /* 表示を始めるまでの待ち時間（PC・SP共通） */
	/* 実際に使う待ち時間：SPは --fiu-delay-sp、なければ --fiu-delay */
	--fiu-delay-now: var(--fiu-delay-sp, var(--fiu-delay));
}
/* PC：実際に使う待ち時間は --fiu-delay-pc、なければ --fiu-delay */
@media screen and (min-width: 791px) {
	.fadeInUp {
		--fiu-delay-now: var(--fiu-delay-pc, var(--fiu-delay));
	}
}
/* 動きを減らす設定のときは最初から表示（ここでは隠さない） */
@media (prefers-reduced-motion: no-preference) {
	.fadeInUp {
		opacity: 0;
		transform: translateY(var(--fiu-distance));
		transition:
			opacity var(--fiu-duration) ease-out var(--fiu-delay-now),
			transform var(--fiu-duration) ease-out var(--fiu-delay-now);
	}
	.fadeInUp.is-show {
		opacity: 1;
		transform: none;
	}
}
/* ----------------------------------------------------------------------- */
/*      PAGE STYLE
/* ----------------------------------------------------------------------- */

/* ----------- header ----------- */
/* SP基準 750px：1px = 0.133333cqi */
.header {
	position: relative;
	z-index: 100;
	height: 18.557cqi; /* 139.2px（ロゴ上の余白を半分にした分、160pxから縮小） */
	> .container {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
		height: 18.557cqi; /* 139.2px */
	}
	h1 {
		--logo-top: 2.777cqi; /* 20.8px（デザインの41.65pxの半分）。左下へ移動するときの計算にも使う */
		position: absolute;
		top: var(--logo-top);
		left: 7.016cqi; /* 52.62px */
		width: 23.467cqi; /* 176px */
		line-height: 0;
		a {
			display: block;
			position: relative;
		}
		img {
			display: block;
			transition: opacity 0.3s ease;
		}
		/* 白いロゴ（紺・黒の部分を白にしたもの）。青地の上に来たら切り替える */
		.logo_wht {
			position: absolute;
			inset: 0;
			opacity: 0;
		}
	}
	/* ロゴが青地（お問い合わせ）の上にあるときは白いロゴにする（.is-logo-dark は js/script.js で付ける） */
	&.is-logo-dark h1 {
		img {
			opacity: 0;
		}
		.logo_wht {
			opacity: 1;
		}
	}
	/* ロゴ：JSが動くときは画面に固定し、スクロールに合わせて左下へ移動（動きは js/script.js）
	   左下の位置（bottom）で固定しておき、ヘッダーの位置まで上にずらしておく（左下に着いたらずらす量が0）。
	   左下にいる間は画面下に付いたままなので、スマホのアドレスバーが出入りしても固定したボタンと一緒になめらかに動く
	   --logo-p：移動の進み具合（0＝ヘッダーの位置、1＝左下）
	   --logo-x：左下での横の移動量／--logo-bottom：左下での画面下からの距離／--logo-h：ロゴの高さ／--logo-scale：左下での大きさ（どれもJSで計算） */
	&.is-logo-fixed h1 {
		position: fixed;
		top: auto;
		bottom: var(--logo-bottom, 0px);
		transform-origin: 0 100%; /* 左下を基準に縮める */
		translate:
			calc(var(--logo-p, 0) * var(--logo-x, 0px))
			calc((1 - var(--logo-p, 0)) * (var(--logo-bottom, 0px) + var(--logo-top) + var(--logo-h, 0px) - 100dvh));
		scale: calc(1 - var(--logo-p, 0) * (1 - var(--logo-scale, 1)));
	}
	/* メニューを開いたときは、左下へ移動中・移動後のロゴは隠す（メニューに重なるため） */
	&.is-open.is-logo-moved h1 {
		visibility: hidden;
	}
	.hmb_menu {
		position: absolute;
		top: 2.183cqi; /* 16.4px（ロゴと一緒に20.8px上げる） */
		right: 9.293cqi; /* 69.7px */
		width: 13.333cqi; /* 100px */
		height: 10.667cqi; /* 80px */
		cursor: pointer;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 8.067cqi; /* 60.5px */
			height: 2.5px;
			background: #000;
			transition: transform 0.3s ease, width 0.3s ease;
		}
		&::before {
			transform: translate(-50%, -50%) translateY(-1.288cqi); /* 中心から-9.66px */
		}
		&::after {
			transform: translate(-50%, -50%) translateY(1.288cqi); /* 中心から+9.66px */
		}
	}
	> nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--c-beige);
		padding: 32.587cqi 0 15cqi 14.773cqi; /* 上244.4px / 下112.5px / 左110.8px */
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		li + li {
			margin-top: 9.16cqi; /* 68.7px（項目ピッチ140px） */
		}
		li a {
			display: block;
			font-size: 4.533cqi; /* 34px */
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0.05em;
			span {
				display: block;
				margin-bottom: 1.773cqi; /* 13.3px */
				font-family: "Times New Roman", "Noto Serif", serif;
				font-size: 3.2cqi; /* 24px */
				font-weight: 400;
				letter-spacing: 0.05em;
				color: var(--c-navy);
			}
		}
		.btn_cta {
			margin: 15.333cqi 0 0 -5.973cqi; /* 上115px / 左-44.8px（左端を66pxに揃える） */
		}
	}
	/* 開いた状態 */
	&.is-open {
		> .container {
			position: fixed;
		}
		.hmb_menu {
			&::before,
			&::after {
				width: 7.347cqi; /* 55.1px */
			}
			&::before {
				transform: translate(-50%, -50%) rotate(26.85deg);
			}
			&::after {
				transform: translate(-50%, -50%) rotate(-26.85deg);
			}
		}
		> nav {
			opacity: 1;
			visibility: visible;
		}
	}
}
/* メニュー表示中は背面をスクロールさせない */
html.is-menu-open {
	overflow: hidden;
}

/* PC用の社名・メニューはSPでは非表示 */
.header {
	.name01,
	.gnav_pc {
		display: none;
	}
}

/* PC：1px = 0.0632911cqi（1580px基準） */
@media screen and (min-width: 791px) {
	.header {
		height: min(7.595vw, 120px); /* 120px（.headerはコンテナの外なのでcqiが使えないためvwで指定。1580px以下で縮む：vw = px ÷ 15.8） */
		max-width: 1920px; /* 広い画面では1920pxで止めて中央に（ロゴ・メニューが画面の端に離れすぎないように） */
		margin-inline: auto;
		> .container {
			position: static; /* ロゴ・メニューの位置は画面幅（.header）基準、大きさは1580px基準のcqi */
			height: auto;
		}
		h1 {
			--logo-top: 1.76cqi; /* 27.8px */
			left: 2.924cqi; /* 46.2px */
			width: 11.138cqi; /* 176px */
		}
		/* 画面に固定したときも、ヘッダー（最大1920px・中央寄せ）の中と同じ位置から始める */
		&.is-logo-fixed h1 {
			left: calc(max(0px, (100% - 1920px) / 2) + 2.924cqi); /* 46.2px */
		}
		.name01 {
			display: block;
			position: absolute;
			top: 3.019cqi; /* 47.7px */
			left: 16.267cqi; /* 257px */
			font-size: 1.075cqi; /* 17px */
			font-weight: 700;
			line-height: 1;
			letter-spacing: 0.05em;
		}
		.hmb_menu,
		#gnav {
			display: none;
		}
		.gnav_pc {
			display: flex;
			align-items: center;
			position: absolute;
			top: 3.399cqi; /* 53.7px */
			right: 4.348cqi; /* 68.7px */
			a {
				display: block;
				transition: opacity 0.3s ease;
				&:hover {
					opacity: 0.6;
				}
			}
		}
		.menu01 {
			display: flex;
			gap: 3.691cqi; /* 58.3px */
			font-size: 1.075cqi; /* 17px */
			font-weight: 700;
			line-height: 1;
			letter-spacing: 0.06em;
		}
		/* 電話・メール（左に点線の区切り） */
		.icon01 {
			position: relative;
			display: flex;
			gap: 0.848cqi; /* 13.4px */
			margin-left: 2.165cqi; /* 34.2px */
			padding-left: 2.203cqi; /* 34.8px */
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 0.128cqi; /* 2px */
				height: 0.718cqi; /* 11.35px */
				background: url(../images/header_line.svg) no-repeat center / contain;
				transform: translateY(-50%);
			}
			img {
				display: block;
				width: 2.62cqi; /* 41.4px */
			}
		}
	}
}

/* ----------- mv ----------- */
.mv {
  padding-top: 3.177cqi; /* 23.8px（ロゴ下からイラストまでの余白を半分に：デザインの74.35px→37.2px） */
	.container > .inner {
		padding-bottom: 23.373cqi; /* 175.3px（固定したお問い合わせボタンの元の場所：上の余白60.3px＋高さ115px） */
		/* イラスト（パーツを重ねて配置。基準はmv_base_sp.png＝1500×1280px。位置・幅は画像に対する%） */
		> .img01 {
			aspect-ratio: 1500 / 1280; /* 750×640px */
			line-height: 0;
			.img01_02 {
				top: 47.5%; /* 608px */
				left: 25.933%; /* 389px */
				width: 15.553%; /* 233.3px */
			}
			.img01_03 {
				top: 37.5%; /* 480px */
				left: 6.733%; /* 101px */
				width: 16.098%; /* 241.5px */
			}
			.img01_04 {
				top: 14.141%; /* 181px */
				left: 5.867%; /* 88px */
				width: 11.095%; /* 166.4px */
			}
			.img01_05 {
				top: 1.328%; /* 17px */
				left: 19.467%; /* 292px */
				width: 20.804%; /* 312.1px */
			}
			.img01_06 {
				top: 22.422%; /* 287px */
				left: 25.333%; /* 380px */
				width: 13.225%; /* 198.4px */
			}
			.img01_07 {
				top: 7.422%; /* 95px */
				left: 41.067%; /* 616px */
				width: 14.117%; /* 211.8px */
			}
			.img01_08 {
				top: 27.734%; /* 355px */
				left: 43.333%; /* 650px */
				width: 18.426%; /* 276.4px */
			}
			.img01_09 {
				top: 40.625%; /* 520px */
				left: 46.267%; /* 694px */
				width: 11.393%; /* 170.9px */
			}
			.img01_10 {
				top: 3.203%; /* 41px */
				left: 58.467%; /* 877px */
				width: 25.955%; /* 389.3px */
			}
			.img01_11 {
				top: 34.766%; /* 445px */
				left: 65.933%; /* 989px */
				width: 14.266%; /* 214px */
			}
			.img01_12 {
				top: 54.688%; /* 700px */
				left: 59.533%; /* 893px */
				width: 12.631%; /* 189.5px */
			}
			.img01_13 {
				top: 26.562%; /* 340px */
				left: 82.533%; /* 1238px */
				width: 15.603%; /* 234px */
			}
			.img01_15 {
				top: 49.141%; /* 629px */
				left: 76.067%; /* 1141px */
				width: 15.95%; /* 239.2px */
			}
			.img01_01 {
				top: 53.359%; /* 683px */
				left: 2.667%; /* 40px */
				width: 79.798%; /* 1197px */
			}
		}
		> p {
			padding-left: 8.8cqi; /* 66px */
			padding-right: 6cqi; /* 45px */
		}
		>.catch01 {
			margin-top: 3.787cqi; /* 28.4px */
			font-size: 7.2cqi; /* 54px */
			font-weight: 500;
			line-height: 1.52; /* 82px */
			letter-spacing: 0.05em;
		}
		>.txt01 {
			margin-top: 4.387cqi; /* 32.9px */
			padding-right: 9.3cqi; /* 69.75px */
			font-size: 3.733cqi; /* 28px */
			font-weight: 400;
			line-height: 1.786; /* 50px */
			letter-spacing: 0.05em;
		}
		/* お問い合わせボタン：ずっと画面下に固定（お問い合わせが画面に入ったら下に隠す。.is-hide は js/script.js で付ける） */
		> .btn_cta {
			position: fixed;
			left: 0; /* 左の位置（66px）は > p の padding-left で付いている */
			bottom: calc(1.778cqi + env(safe-area-inset-bottom)); /* 画面下から13.3px */
			z-index: 50; /* ヘッダー（ロゴ・メニュー）より後ろ */
			transition: translate 0.4s ease, visibility 0.4s;
			&.is-hide {
				translate: 0 calc(100% + 1.778cqi + env(safe-area-inset-bottom)); /* 画面の下へ */
				visibility: hidden;
			}
		}
		> .scroll01 {
			display: none;
		}
	}
}

/* MVの文字・ボタン・SCROLL：ページを開いたら上から順番に、その位置でフェードイン（右のイラストの動きとは連動しない）
   CSSのアニメーションなので、JSが無効でも最後は表示される */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.mv .container > .inner {
		> .catch01,
		> .txt01,
		> .btn_cta,
		> .scroll01 {
			animation: fadeIn 2s ease-out both;
		}
		> .txt01 {
			animation-delay: 0.5s;
		}
		> .btn_cta {
			animation-delay: 1s;
		}
		> .scroll01 {
			animation-delay: 1.5s;
		}
	}
}

/* PC：MV */
@media screen and (min-width: 791px) {
	.mv {
		padding: 0;
		/* 画面の高さが足りないときは、MV全体（文字・ボタン・イラスト）を同じ比率のまま縮めて、
		   ヘッダー＋MVのイラスト下端までが1画面に収まるようにする。
		   MVの中はすべて.containerの幅基準（cqi）なので、.containerの最大幅を絞るだけで全体が縮む。
		   ・0.4623：MVの上端〜イラスト下端（730.5px）÷ 1580px
		   ・min(7.595vw, 120px)：ヘッダーの高さ / 20px：イラストの下に残す余白
		   ・1000px：これより小さくすると文字が小さくなりすぎるので、縮めるのはここまで */
		> .container {
			max-width: min(1580px, max(1000px, calc((100vh - min(7.595vw, 120px) - 20px) / 0.4623)));
			max-width: min(1580px, max(1000px, calc((100svh - min(7.595vw, 120px) - 20px) / 0.4623)));
		}
		.container > .inner {
			position: relative;
			padding-top: 8.07cqi; /* 127.5px（ヘッダー下から見出し上端まで） */
			padding-bottom: 17.595cqi; /* 278px（.mvはコンテナの外なので余白は.innerに付ける） */
			/* イラスト（基準はmv_base_pc.png＝1521×1327px。位置・幅は画像に対する%） */
			> .img01 {
				position: absolute;
				top: 4.241cqi; /* 67px */
				left: 48.766cqi; /* 770.5px */
				width: 48.132cqi; /* 760.5px */
				aspect-ratio: 1521 / 1327; /* 760.5×663.5px */
				.img01_02 {
					top: 48.078%; /* 638px */
					left: 24.392%; /* 371px */
					width: 16.226%; /* 246.8px */
				}
				.img01_03 {
					top: 37.227%; /* 494px */
					left: 4.405%; /* 67px */
					width: 16.795%; /* 255.5px */
				}
				.img01_04 {
					top: 13.414%; /* 178px */
					left: 3.485%; /* 53px */
					width: 11.576%; /* 176.1px */
				}
				.img01_05 {
					top: 0.377%; /* 5px */
					left: 17.686%; /* 269px */
					width: 21.704%; /* 330.1px */
				}
				.img01_06 {
					top: 21.854%; /* 290px */
					left: 23.734%; /* 361px */
					width: 13.798%; /* 209.9px */
				}
				.img01_07 {
					top: 6.631%; /* 88px */
					left: 40.171%; /* 611px */
					width: 14.728%; /* 224px */
				}
				.img01_08 {
					top: 27.28%; /* 362px */
					left: 42.472%; /* 646px */
					width: 19.224%; /* 292.4px */
				}
				.img01_09 {
					top: 40.392%; /* 536px */
					left: 45.562%; /* 693px */
					width: 11.886%; /* 180.8px */
				}
				.img01_10 {
					top: 2.261%; /* 30px */
					left: 58.251%; /* 886px */
					width: 27.079%; /* 411.9px */
				}
				.img01_11 {
					top: 34.439%; /* 457px */
					left: 66.075%; /* 1005px */
					width: 14.883%; /* 226.4px */
				}
				.img01_12 {
					top: 54.71%; /* 726px */
					left: 59.369%; /* 903px */
					width: 13.178%; /* 200.4px */
				}
				.img01_13 {
					top: 26.074%; /* 346px */
					left: 83.3%; /* 1267px */
					width: 16.278%; /* 247.6px */
				}
				.img01_15 {
					top: 49.133%; /* 652px */
					left: 76.529%; /* 1164px */
					width: 16.64%; /* 253.1px */
				}
				.img01_01 {
					top: 53.429%; /* 709px */
					left: 0.131%; /* 2px */
					width: 83.251%; /* 1266.2px */
				}
			}
			> p {
				margin-left: 10.076cqi; /* 159.2px */
				padding: 0;
			}
			>.catch01 {
				width: fit-content;
				margin-top: 0;
				padding-bottom: 1.449cqi; /* 22.9px */
				border-bottom: dotted 2.7px var(--c-black);
				font-size: 2.848cqi; /* 45px */
				line-height: 1.76; /* 79.2px */
				letter-spacing: 0.1em;
				color: var(--c-black);
			}
			>.txt01 {
				width: 29.747cqi; /* 470px（「まで、」で折り返す幅） */
				margin-top: 1.677cqi; /* 26.5px */
				padding-right: 0;
				font-size: 1.299cqi; /* 20.52px */
				font-weight: 500;
				line-height: 2.149; /* 44.1px */
				letter-spacing: 0.1em;
				color: var(--c-black);
			}
			> .btn_cta {
				position: static; /* PCは画面下に固定しない */
				margin-top: 3.88cqi; /* 61.3px */
				&.is-hide {
					translate: none;
					visibility: visible;
				}
			}
			/* SCROLL */
			> .scroll01 {
				display: block;
				position: absolute;
				top: 51.601cqi; /* 815.3px */
				left: 0;
				right: 0;
				width: 3.411cqi; /* 53.9px */
				margin-inline: auto; /* 中央寄せ（translateだと0.5px単位の位置になり、にじんで見えるため） */
				line-height: 0;
				svg {
					display: block;
					width: 100%;
					height: auto;
				}
				/* アイコンはHTMLに直接書いたSVG（scroll.svgと同じ形）。ホバーで丸の色を反転する */
				.scroll_bg {
					fill: var(--c-wht);
					transition: fill 0.3s;
				}
				.scroll_ring,
				.scroll_txt {
					fill: var(--c-black2);
				}
				.scroll_arw {
					fill: none;
					stroke: var(--c-black2);
					stroke-width: 3px;
					stroke-linecap: round;
					stroke-linejoin: round;
					transition: stroke 0.3s;
				}
				a:hover {
					.scroll_bg {
						fill: var(--c-black2);
					}
					.scroll_arw {
						stroke: var(--c-wht);
					}
				}
			}
		}
	}
}

/* ----------- btn_cta ----------- */
.btn_cta {
	margin-top: 8.04cqi; /* 60.3px */
	a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 81.904cqi; /* 614.3px */
		height: 15.333cqi; /* 115px */
		padding: 0 5.65cqi 0 4.8cqi; /* 右42.4px / 左36px */
		border: 1px solid var(--c-navy);
		border-radius: 0.8cqi; /* 6px */
		background: var(--c-navy);
		color: var(--c-wht);
		font-size: 4.133cqi; /* 31px */
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.08em;
		white-space: nowrap;
		transition: background-color 0.3s ease, color 0.3s ease;
		/* ホバーで色を反転（白地に紺の文字・矢印） */
		&:hover {
			background: var(--c-wht);
			text-decoration: none;
			color: var(--c-navy);
			&::after {
				background-image: url(../images/btn_arw_on.svg); /* 紺の矢印 */
			}
		}
	}
	a::after {
		content: "";
		flex-shrink: 0;
		margin-left: auto;
		width: 5.085cqi; /* 38.1px */
		aspect-ratio: 30.81 / 8.26;
		background: url(../images/btn_arw.svg) no-repeat center / contain;
	}
}

/* PC：btn_cta */
@media screen and (min-width: 791px) {
	.btn_cta {
		a {
			width: 33.19cqi; /* 524.4px */
			height: 5.456cqi; /* 86.2px */
			padding: 0 2.259cqi 0 2.443cqi; /* 右35.7px / 左38.6px */
			border-radius: 0.286cqi; /* 4.5px */
			font-size: 1.431cqi; /* 22.62px */
		}
		a::after {
			width: 1.949cqi; /* 30.8px */
		}
	}
}

/* ----------- service ----------- */
.service {
	padding: 15.867cqi 0 13.52cqi; /* 上119px / 下101.4px */
	.container > .inner {
		.header02 {
			margin-left: 30.401cqi; /* 228px */
		}
		> section {
			margin-top: 10.187cqi; /* 76.4px */
			> ul,
			.txt01,
			.header03 {
				padding-left: 6.5cqi; /* 48.75px */
				padding-right: 3.5cqi; /* 26.25px */
			}
			.header03 {
				font-size: 5.867cqi; /* 44px */
				font-weight: 500;
				line-height: 1.591; /* 70px */
				letter-spacing: 0.02em;
			}
			> div {
				margin-top: 10.013cqi; /* 75.1px */
				line-height: 0;
			}
			/* イラスト（パーツを重ねて配置。基準はsrv_base@2x.png＝1501×886px。位置・幅は画像に対する%でSP・PC共通） */
			> .img01 {
				aspect-ratio: 1501 / 886;
				.img01_01 {
					top: 34.312%; /* 304px */
					left: 6.729%; /* 101px */
					width: 85.983%; /* 1290.6px */
				}
				.img01_02 {
					top: 1.354%; /* 12px */
					left: 3.264%; /* 49px */
					width: 17.605%; /* 264.3px */
				}
				.img01_03 {
					top: 0.451%; /* 4px */
					left: 21.919%; /* 329px */
					width: 18.916%; /* 283.9px */
				}
				.img01_04 {
					top: 0.564%; /* 5px */
					left: 41.572%; /* 624px */
					width: 17.77%; /* 266.7px */
				}
				.img01_05 {
					top: 1.467%; /* 13px */
					left: 60.36%; /* 906px */
					width: 17.033%; /* 255.7px */
				}
				.img01_06 {
					top: 1.242%; /* 11px */
					left: 78.748%; /* 1182px */
					width: 17.288%; /* 259.5px */
				}
			}
			> ul {
				margin-top: 5.467cqi; /* 41px */
				padding-left: 10.8cqi; /* 文字頭 81px */
				font-size: 3.733cqi; /* 28px */
				font-weight: 400;
				line-height: 1.786; /* 50px */
				letter-spacing: 0.05em;
			}
		}
		> section + section {
			margin-top: 15.8cqi; /* 118.5px */
			> div {
				margin-top: 8.333cqi; /* 62.5px */
			}
			/* イラスト（パーツを重ねて配置。基準はsrv_base02@2x.png＝1501×1124px。位置・幅は画像に対する%でSP・PC共通） */
			> .img02 {
				aspect-ratio: 1501 / 1124;
				.img02_01 {
					top: 28.025%; /* 315px */
					left: 18.987%; /* 285px */
					width: 57.011%; /* 855.7px */
				}
				.img02_02 {
					top: 7.651%; /* 86px */
					left: 4.664%; /* 70px */
					width: 29.127%; /* 437.2px */
				}
				.img02_03 {
					top: 2.847%; /* 32px */
					left: 41.506%; /* 623px */
					width: 18.567%; /* 278.7px */
				}
				.img02_04 {
					top: 9.253%; /* 104px */
					left: 69.62%; /* 1045px */
					width: 15.56%; /* 233.6px */
				}
				.img02_05 {
					top: 35.231%; /* 396px */
					left: 84.877%; /* 1274px */
					width: 12.541%; /* 188.2px */
				}
				.img02_06 {
					top: 61.299%; /* 689px */
					left: 75.217%; /* 1129px */
					width: 17.255%; /* 259px */
				}
				.img02_07 {
					top: 81.317%; /* 914px */
					left: 34.91%; /* 524px */
					width: 18.186%; /* 273px */
				}
				.img02_08 {
					top: 67.883%; /* 763px */
					left: 3.997%; /* 60px */
					width: 16.666%; /* 250.2px */
				}
			}
			.txt01 {
				margin-top: 8.653cqi; /* 64.9px */
				font-size: 3.733cqi; /* 28px */
				font-weight: 400;
				line-height: 1.786; /* 50px */
				/* 3つ＋2つの横並び：幅で4つ目を折り返す（1行目+4つ目 ≒ 650px > 内幅597.5px ≥ 2行目 ≒ 567px） */
				ul {
					width: 82.667cqi; /* 620px */
					padding-left: 3cqi; /* 22.5px */
					letter-spacing: 0.05em;
				}
				li {
					display: inline-block;
					margin-right: 5.04cqi; /* 37.8px（点の分を含む項目間） */
					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
}

/* PC：service */
@media screen and (min-width: 791px) {
	.service {
		padding: 0;
		.container > .inner {
			padding: 0.88cqi 0 0; /* 上13.9px */
			> section {
				display: grid;
				grid-template-columns: auto 1fr;
				margin-top: 7.418cqi; /* 117.2px */
				.header03 {
					grid-column: 1 / -1;
					padding: 0 0 0 10cqi; /* 158px */
					font-size: 2.532cqi; /* 40px */
					line-height: 1;
					letter-spacing: 0.1em;
				}
				> div:not(.txt01) {
					margin: 5.419cqi 0 0 10.177cqi; /* 上85.6px / 左160.8px */
				}
				> .img01 {
					width: 49.627cqi; /* 784.1px */
				}
				> ul {
					margin: 19.723cqi 0 0 1.126cqi; /* 上311.6px（見出し下から） / 左17.8px */
					padding: 0 0 0 0.8em;
					font-size: 1.266cqi; /* 20px */
					font-weight: 500;
					line-height: 2.65; /* 53px */
					letter-spacing: 0.2em;
					color: var(--c-black);
				}
			}
			> section + section {
				margin-top: 8.151cqi; /* 128.8px */
				.header03 {
					padding-left: 10.076cqi; /* 159.2px */
					line-height: 1.98; /* 79.2px */
					letter-spacing: 0.2em;
				}
				> div:not(.txt01) {
					grid-column: 2;
					grid-row: 2;
					margin: 11.424cqi 7.462cqi 0 0; /* 上180.5px（見出し下から） / 右117.9px */
				}
				> .img02 {
					width: 45.722cqi; /* 722.4px */
				}
				.txt01 {
					grid-column: 1;
					grid-row: 2;
					margin-top: 3.88cqi; /* 61.3px */
					padding: 0 1.297cqi 0 10.076cqi; /* 右20.5px / 左159.2px */
					font-size: 1.266cqi; /* 20px */
					font-weight: 500;
					line-height: 2.3; /* 46px */
					letter-spacing: 0.09em;
					color: var(--c-black);
					/* 3つ＋2つ：幅で4つ目を折り返す（1行目+4つ目 ≒ 500px > 450px ≥ 2行目 ≒ 406px） */
					ul {
						width: 28.48cqi; /* 450px */
						padding-left: 0.8em;
						letter-spacing: 0.1em;
					}
					li {
						margin-right: 1.519cqi; /* 24px */
					}
				}
			}
		}
	}
}

/* ----------- news ----------- */
.news {
	padding: 16.538cqi 0 15.16cqi; /* 上124px / 下113.7px */
	background: var(--c-beige);
	.container > .inner {
		/* 見出し（.head01で囲んでいる） */
		.header02 {
			margin-left: 34.525cqi; /* 258.94px */
		}
		> .img01 {
			display: none;
		}
		dl {
			margin: 9.577cqi 6.536cqi 0 6.688cqi; /* 上71.8px / 右49px / 左50.2px */
			border-top: dotted 2px var(--c-black);
			> div {
				padding: 8.463cqi 0 9.089cqi; /* 上63.5px / 下68.2px（ピッチ235.8px） */
				border-bottom: dotted 2px var(--c-black);
			}
		}
		dt,
		dd {
			font-size: 3.733cqi; /* 28px */
			font-weight: 400;
			line-height: 1;
		}
		dd {
			margin-top: 6.413cqi; /* 48.1px */
		}
	}
}

/* PC：news（左に見出し＋イラスト、右にリスト） */
@media screen and (min-width: 791px) {
	.news {
		padding: 0;
		background: none;
		/* news.html（お知らせ一覧）：上の余白は2/3、下はお問い合わせが続くので余白を付ける */
		&.news02 .container > .inner {
			padding-top: 6.928cqi; /* 109.5px（トップページの164.2pxの2/3） */
			padding-bottom: 7.595cqi; /* 120px（.newsはコンテナの外なので余白は.innerに付ける） */
		}
		.container > .inner {
			display: grid;
			grid-template-columns: 32.696cqi 1fr; /* 左列516.6px */
			grid-template-rows: auto auto 1fr;
			padding: 10.392cqi 0 0; /* 上164.2px */
			/* 見出し（.head01）は左列に自動で入る */
			> .img01 {
				grid-column: 1;
				display: block;
				margin: 4.431cqi 0 0 8.797cqi; /* 上70px / 左139px */
				img {
					width: 20.538cqi; /* 324.5px */
				}
			}
			dl {
				grid-column: 2;
				grid-row: 1 / 4;
				align-self: start;
				margin: 0 9.437cqi 0 0; /* 右149.1px */
				> div {
					padding: 3.722cqi 0 3.962cqi; /* 上58.8px / 下62.6px */
				}
			}
			dt {
				font-size: 1.075cqi; /* 17px */
				letter-spacing: 0.05em;
			}
			dd {
				margin-top: 1.747cqi; /* 27.6px */
				font-size: 1.266cqi; /* 20px */
			}
			> .btn_news {
				grid-column: 1 / -1; /* 全体の横幅の中央 */
				grid-row: 4;
			}
		}
	}
}

/* ----------- btn_news ----------- */
.btn_news {
	margin-top: 12.68cqi; /* 95.1px */
	a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 73.333cqi; /* 550px */
		height: 12.667cqi; /* 95px */
		margin-left: 12.363cqi; /* 92.7px */
		padding: 0 6.107cqi 0 6.933cqi; /* 右45.8px / 左52px */
		border: 1px solid var(--c-navy);
		background: var(--c-navy);
		color: var(--c-wht);
		font-size: 3.733cqi; /* 28px */
		font-weight: 400;
		line-height: 1;
		letter-spacing: 0.1em;
		white-space: nowrap;
		transition: background-color 0.3s ease, color 0.3s ease;
		/* ホバーで色を反転（白地に紺の文字・矢印） */
		&:hover {
			background: var(--c-wht);
			text-decoration: none;
			color: var(--c-navy);
			&::after {
				background-image: url(../images/btn_arw_news_on.svg); /* 紺の矢印 */
			}
		}
	}
	a::after {
		content: "";
		flex-shrink: 0;
		margin-left: auto;
		width: 1.908cqi; /* 14.31px */
		aspect-ratio: 14.31 / 25.44;
		background: url(../images/btn_arw_news.svg) no-repeat center / contain;
	}
}

/* PC：btn_news（ニュース一覧の下・全体の横幅の中央） */
@media screen and (min-width: 791px) {
	.btn_news {
		margin-top: 3.797cqi; /* 60px */
		a {
			width: 26.582cqi; /* 420px */
			height: 4.431cqi; /* 70px */
			margin-inline: auto;
			padding: 0 2.215cqi 0 2.532cqi; /* 右35px / 左40px */
			font-size: 1.139cqi; /* 18px */
		}
		a::after {
			width: 0.633cqi; /* 10px */
		}
	}
}

/* ----------- works ----------- */
.works {
	padding: 18.107cqi 0 17.24cqi; /* 上135.8px / 下129.3px（スライド画像上端まで） */
	overflow-x: clip; /* 各ブロックを揺らしたときのはみ出しで横スクロールさせない */
	.container > .inner {
		.header02 {
			margin-left: 32.801cqi; /* 246px */
		}
		> section {
			position: relative;
			margin-top: 5.373cqi; /* 40.3px */
			rotate: var(--works-sway, 0deg); /* 船のような揺れ（角度はscript.jsで変える。fadeInUpのtransformとぶつからないようにrotateで傾ける） */
			> div {
				margin-left: 1.333cqi; /* 10px */
				img {
					width: 96.867cqi; /* 726.5px */
				}
			}
			.header03,
			> ul {
				position: absolute;
			}
			.header03 {
				font-size: 5.333cqi; /* 40px */
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0.05em;
			}
			> ul {
				padding-left: 1.867cqi; /* 14px（文字頭まで） */
				font-size: 3.467cqi; /* 26px */
				font-weight: 400;
				line-height: 1.615; /* 42px */
				letter-spacing: 0.05em;
			}
		}
		/* 印刷物 */
		> .item01 {
			.header03 {
				top: 11.133cqi; /* 83.5px */
				left: 56.439cqi; /* 423.3px */
			}
			> ul {
				top: 18.171cqi; /* 136.3px */
				left: 56.439cqi; /* 423.3px */
			}
		}
		/* 販促ツール */
		> .item02 {
			margin-top: 9.133cqi; /* 68.5px */
			> div {
				margin-left: 2cqi; /* 15px */
			}
			.header03 {
				top: 11.213cqi; /* 84.1px */
				left: 18.008cqi; /* 135.1px */
			}
			> ul {
				top: 18.253cqi; /* 136.9px */
				left: 18.008cqi; /* 135.1px */
				/* 「・化粧箱 ・販促什器」（.inline01）は1行に並べる */
				.inline01 {
					display: inline-block;
				}
				.inline01 + .inline01 {
					margin-left: 1.3em; /* 点（左に0.7emはみ出す）の前に0.6emあける */
				}
			}
		}
		/* ノベルティ */
		> .item03 {
			margin-top: 8.8cqi; /* 66px */
			.header03 {
				top: 17.407cqi; /* 130.6px */
				left: 52.727cqi; /* 395.5px */
			}
			> ul {
				top: 24.444cqi; /* 183.3px */
				left: 52.727cqi; /* 395.5px */
				padding-left: 2.307cqi; /* 17.3px（文字頭まで） */
			}
		}
	}
}


/* PC：works（3つの円弧を左右にずらして重ねる） */
@media screen and (min-width: 791px) {
	.works {
		padding: 0;
		.container > .inner {
			position: relative;
			height: 75.778cqi; /* 1197.3px（3つのブロックを含む高さ） */
			padding: 8.988cqi 0 0; /* 上142px */
			.header02 + p {
				letter-spacing: 0.1em;
			}
			> section {
				position: absolute;
				width: 45.949cqi; /* 726px */
				margin: 0;
				> div {
					margin-left: 0;
				}
				.header03,
				> ul {
					transform: translateX(-50%);
					white-space: nowrap;
					text-align: center;
				}
				.header03 {
					font-size: 2.278cqi; /* 36px */
					letter-spacing: 0.1em;
				}
				> ul {
					padding-left: 0;
					font-size: 1.391cqi; /* 22px */
					line-height: 1.545; /* 34px */
					letter-spacing: 0;
					li::before {
						margin-left: 0;
					}
				}
			}
			/* 印刷物 */
			> .item01 {
				top: 16.253cqi; /* 256.8px */
				left: 23.861cqi; /* 377px */
				.header03 {
					top: 5.259cqi; /* 83.1px */
					left: 32.5cqi; /* 513.5px（中心） */
				}
				> ul {
					top: 8.854cqi; /* 139.9px */
					left: 32.5cqi; /* 513.5px（中心） */
					/* 「・POP ・冊子」（.inline01）は1行に並べる */
					.inline01 {
						display: inline-block;
						margin-inline: 0.29em;
					}
				}
			}
			/* 販促ツール */
			> .item02 {
				top: 49.671cqi; /* 784.8px */
				left: 7.215cqi; /* 114px */
				margin: 0;
				> div {
					margin-left: 0;
				}
				.header03 {
					top: 6.816cqi; /* 107.7px */
					left: 14.176cqi; /* 224px（中心） */
				}
				> ul {
					top: 10.411cqi; /* 164.5px */
					left: 14.176cqi; /* 224px（中心） */
					/* 「・化粧箱 ・販促什器」（.inline01）は1行に並べる（SPの2つ目の左の余白も上書きする） */
					.inline01,
					.inline01 + .inline01 {
						margin-inline: 0.29em;
					}
				}
			}
			/* ノベルティ */
			> .item03 {
				top: 38.468cqi; /* 607.8px */
				left: 51.203cqi; /* 809px */
				margin: 0;
				.header03 {
					top: 9.197cqi; /* 145.3px */
					left: 15.57cqi; /* 246px（中心） */
				}
				> ul {
					top: 12.791cqi; /* 202.1px */
					left: 15.57cqi; /* 246px（中心） */
					padding-left: 0;
				}
			}
		}
	}
}

/* ----------- slide（無限ループスライダー：動きは script.js） ----------- */
.slide {
	overflow: hidden;
	.slide_list {
		display: flex;
		width: max-content;
		margin-left: -10.077cqi; /* -75.6px（デザインどおり左端を見切れさせる） */
		> div {
			flex-shrink: 0;
			width: 49.467cqi; /* 371px */
			margin-right: 4.421cqi; /* 33.16px（ピッチ404.16px） */
		}
		img {
			display: block;
		}
		p {
			margin-top: 3.555cqi; /* 26.7px */
			font-size: 3.333cqi; /* 25px */
			font-weight: 400;
			line-height: 1;
		}
		span {
			display: flex;
			align-items: center;
			justify-content: center;
			width: fit-content;
			min-width: 14.091cqi; /* 105.7px */
			height: 5.425cqi; /* 40.7px */
			margin-top: 1.979cqi; /* 14.8px */
			padding-inline: 1.333cqi; /* 10px */
			border: 0.187cqi solid var(--c-txt); /* 1.4px */
			border-radius: 0.867cqi; /* 6.5px */
			font-size: 3.2cqi; /* 24px */
			font-weight: 500;
			letter-spacing: 0.05em;
		}
	}
}

/* PC：slide（.slideはコンテナの外なので、vw と上限px を min() で指定。1580px以下で縮む：vw = px ÷ 15.8） */
@media screen and (min-width: 791px) {
	.slide {
		padding-top: min(5.829vw, 92.1px);
		.slide_list {
			margin-left: max(-8.901vw, -140.63px); /* デザインどおり左端を見切れさせる */
			> div {
				width: min(23.481vw, 371px);
				margin-right: min(2.099vw, 33.16px); /* ピッチ404.16px */
			}
			p {
				margin-top: min(1.11vw, 17.54px);
				font-size: min(1.455vw, 22.99px);
				letter-spacing: 0.048em;
			}
			span {
				min-width: min(4.943vw, 78.1px);
				height: min(1.778vw, 28.1px);
				margin-top: min(1.127vw, 17.8px);
				padding-inline: min(0.316vw, 5px);
				border-width: 1px;
				border-radius: min(0.215vw, 3.4px);
				font-size: min(1.149vw, 18.15px);
			}
		}
	}
}

/* ----------- package ----------- */
/* 右上の黄色い円の文字を回転させる */
@keyframes rotate01 {
	to {
		transform: rotate(360deg);
	}
}
.package {
	padding: 30.876cqi 0 11.72cqi; /* 上231.6px（スライド下端から枠上端） / 下87.9px */
	overflow-x: clip; /* 画像のはみ出しで横スクロールさせない */
	.container > .inner {
		position: relative;
		isolation: isolate;
		width: 93.333cqi; /* 700px（枠SVGの幅） */
		margin-left: 3.251cqi; /* 24.4px */
		padding: 38.875cqi 0 19.201cqi; /* 上291.6px（見出し上端まで） / 下144px */
		background:
			url(../images/pck_bg_top_sp.svg) no-repeat left top / 100% auto,
			url(../images/pck_bg_bottom_sp.svg) no-repeat left bottom / 100% auto;
		/* 枠の左右の線（上下60pxずつを除いて縦に繰り返し） */
		&::before {
			content: "";
			position: absolute;
			inset: 8cqi 0; /* 60px */
			z-index: -1;
			background: url(../images/pck_bg_middle_sp.svg) repeat-y left top / 100% auto;
		}
		/* 右上の黄色い円 */
		> .catch01 {
			position: absolute;
			top: -14.055cqi; /* -105.4px */
			left: 41.811cqi; /* 313.6px */
			z-index: 1;
			width: 45.72cqi; /* 342.9px */
			aspect-ratio: 1;
			border-radius: 50%;
			background: var(--c-yellow2);
			> p:first-child {
				position: absolute;
				top: 1.713cqi; /* 12.8px */
				left: 1.713cqi; /* 12.8px */
				width: 42.294cqi; /* 317.2px */
				img {
					/* 輪の文字をゆっくり回転（1周30秒。動きを減らす設定のときは止める） */
					@media (prefers-reduced-motion: no-preference) {
						animation: rotate01 30s linear infinite;
					}
				}
			}
			> p:last-child {
				position: absolute;
				inset: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				img {
					width: 33.449cqi; /* 250.9px */
				}
			}
		}
		/* 見出し（.head01で囲んでいる） */
		.header02 {
			margin-left: 7.609cqi; /* 57.1px（画面左から81.5px） */
			img {
				width: 76.477cqi; /* 573.6px */
			}
		}
		.header02 + p {
			margin-top: 3.127cqi; /* 23.5px */
			letter-spacing: 0.05em;
		}
		/* メインのイラスト */
		> .img01 {
			display: flex;
			justify-content: center;
			margin-top: 8.44cqi; /* 63.3px */
			line-height: 0;
			img {
				flex-shrink: 0;
				width: 77.6cqi; /* 582px */
			}
		}
		> .catch02,
		> .txt01 {
			padding-left: 6.74cqi; /* 50.5px（画面左から74.9px） */
			padding-right: 4.32cqi; /* 32.4px */
		}
		> .catch02 {
			margin-top: 6.587cqi; /* 49.4px */
			font-size: 6cqi; /* 45px */
			font-weight: 500;
			line-height: 1;
		}
		> .txt01 {
			margin-top: 4.88cqi; /* 36.6px */
			font-size: 3.733cqi; /* 28px */
			font-weight: 400;
			line-height: 1.679; /* 47px */
			color: var(--c-black);
		}
		/* 01〜03 */
		> section {
			margin-inline: 4.777cqi 4.933cqi; /* 左35.8px / 右37px（点線の端） */
			border-bottom: dotted 2.5px var(--c-black);
			> div {
				display: flex;
				justify-content: center;
				line-height: 0;
				img {
					flex-shrink: 0;
					max-width: none; /* reset.cssの max-inline-size: 100% を解除してはみ出させる */
				}
			}
			.header03 {
				display: flex;
				align-items: flex-start;
				padding-left: 3.741cqi; /* 28.1px（画面左から88.3px） */
				font-size: 6cqi; /* 45px */
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0.05em;
				/* 番号（下の黄色い線もSVGに含む） */
				span {
					flex-shrink: 0;
					width: 15.251cqi; /* 114.4px（番号の頭から見出し文字の頭まで） */
					margin-top: -0.784cqi; /* -5.9px（数字と見出しのベースラインをそろえる） */
					line-height: 0;
					img {
						width: auto;
						height: 9.324cqi; /* 69.9px（数字の高さをデザインの67pxに合わせて1.35倍） */
					}
				}
			}
			> p {
				margin-top: 5.4cqi; /* 40.5px */
				padding-left: 4.851cqi; /* 36.4px（画面左から96.6px） */
				font-size: 4cqi; /* 30px */
				font-weight: 400;
				line-height: 1.8; /* 54px */
				letter-spacing: 0.05em;
			}
		}
		> .item01 {
			margin-top: 2.96cqi; /* 22.2px */
			padding-bottom: 10.327cqi; /* 77.45px */
			> div img {
				width: 107.667cqi; /* 807.5px */
			}
			.header03 {
				margin-top: 1.485cqi; /* 11.1px */
			}
		}
		> .item02 {
			padding: 5.357cqi 0 9.949cqi; /* 上40.2px / 下74.6px */
			> div img {
				width: 102.173cqi; /* 766.3px */
			}
			.header03 {
				margin-top: 2.699cqi; /* 20.2px */
			}
		}
		> .item03 {
			padding: 0.184cqi 0 9.347cqi; /* 上1.4px / 下70.1px */
			> div img {
				width: 89.053cqi; /* 667.9px */
			}
			.header03 {
				margin-top: 5.004cqi; /* 37.5px */
			}
		}
		/* 年間10万箱 */
		> .box01 {
			width: 73.008cqi; /* 547.6px */
			margin: 12.093cqi 0 0 10.263cqi; /* 上90.7px / 左77px（画面左から101.3px） */
			padding: 7.925cqi 0 3.965cqi 6.253cqi; /* 上59.4px / 下29.7px / 左46.9px */
			border-radius: 1.92cqi; /* 14.4px */
			background: var(--c-yellow2);
			.num01 {
				font-size: 5.964cqi; /* 44.73px */
				font-weight: 400;
				line-height: 1.529; /* 68.4px */
				> span {
					font-size: 11.927cqi; /* 89.45px */
					line-height: 0; /* 大きい文字で行の高さを広げない */
					> span {
						font-size: 9.811cqi; /* 73.58px */
						vertical-align: 0.804cqi; /* 6.03px 上げる */
					}
				}
			}
			.txt02 {
				margin-top: 2.353cqi; /* 17.65px */
				font-size: 3.733cqi; /* 28px */
				font-weight: 400;
				line-height: 1.714; /* 48px */
			}
		}
	}
}

/* PC：package */
@media screen and (min-width: 791px) {
	.package {
		padding: 0;
		.container > .inner {
			display: grid;
			grid-template-columns: 22.215cqi 26.372cqi minmax(0, 1fr); /* 01〜03の列 351px / 416.7px / 残り */
			width: 81.171cqi; /* 1282.5px（枠SVGの幅） */
			margin: 16.343cqi 0 0 9.405cqi; /* 上258.2px（スライダー下から枠上端） / 左148.6px（.containerの左端から。デザインでは画面の左端から318.6px） */
			padding: 8.572cqi 4.77cqi 7.617cqi 4.87cqi; /* 上135.4px / 右75.4px / 下120.4px / 左76.9px */
			background:
				url(../images/pck_bg_top_pc.svg) no-repeat center top / 100% auto,
				url(../images/pck_bg_bottom_pc.svg) no-repeat center bottom / 99.805% auto; /* 下のSVGだけ幅1280px */
			&::before {
				inset: 4.431cqi 0; /* 70px */
				background: url(../images/pck_bg_middle_pc.svg) repeat-y center top / 100% auto;
			}
			> *:not(section) {
				grid-column: 1 / -1;
			}
			/* 右上の黄色い円 */
			> .catch01 {
				top: -5.935cqi; /* -93.8px */
				left: 52.034cqi; /* 822.2px（グリッドの内側から） */
				width: 20.265cqi; /* 320.2px */
				> p:first-child {
					top: 0.759cqi; /* 12px */
					left: 0.759cqi; /* 12px */
					width: 18.746cqi; /* 296.2px */
				}
				> p:last-child img {
					width: 15.308cqi; /* 241.9px */
				}
			}
			.header02 {
				margin-left: 0;
				img {
					width: 34.025cqi; /* 537.6px */
				}
			}
			.header02 + p {
				margin-top: 1.195cqi; /* 18.9px */
				padding-left: 0;
				letter-spacing: 0.1em;
			}
			/* メインのイラスト（右） */
			> .img01 {
				position: absolute;
				top: 14.793cqi; /* 233.7px */
				left: 36.611cqi; /* 578.5px（グリッドの内側から） */
				margin: 0;
				img {
					width: 35.189cqi; /* 556px */
				}
			}
			> .catch02,
			> .txt01 {
				padding: 0;
			}
			> .catch02 {
				margin-top: 6.275cqi; /* 99.2px */
				font-size: 2.532cqi; /* 40px */
				letter-spacing: 0.2em;
			}
			> .txt01 {
				width: 32.278cqi; /* 510px */
				margin-top: 2.419cqi; /* 38.2px */
				font-size: 1.266cqi; /* 20px */
				font-weight: 500;
				line-height: 2.3; /* 46px */
				letter-spacing: 0.05em;
			}
			/* 01〜03（横3列・間に点線） */
			> section {
				border-bottom: none;
				> div {
					display: block;
				}
				.header03 {
					align-items: center;
					padding-left: 0;
					font-size: 1.772cqi; /* 28px */
					span {
						width: 4.572cqi; /* 72.2px（番号の頭から見出し文字の頭まで） */
						margin-top: 0;
						img {
							height: 3.279cqi; /* 51.8px */
						}
					}
				}
				> p {
					margin-top: 1.871cqi; /* 29.6px */
					padding-left: 0;
					font-size: 1.266cqi; /* 20px */
					line-height: 1.85; /* 37px */
				}
			}
			/* 余白はSPの .item01〜03 の指定を上書きするので、クラスで指定する */
			> .item01,
			> .item02,
			> .item03 {
				margin: 5.519cqi 0 0; /* 上87.2px */
				padding: 0.458cqi 0 1.058cqi; /* 上7.2px / 下16.7px */
				.header03 {
					margin-top: 2.054cqi; /* 32.5px */
				}
			}
			> .item02,
			> .item03 {
				border-left: dotted 2px var(--c-black);
			}
			> .item01 > div img {
				width: 25.918cqi; /* 409.5px */
				margin-left: -3.025cqi; /* -47.8px */
			}
			> .item02 {
				padding-left: 2.313cqi; /* 36.5px */
				> div img {
					width: 25.918cqi; /* 409.5px */
					margin-left: -2.169cqi; /* -34.3px */
				}
			}
			> .item03 {
				padding-left: 2.291cqi; /* 36.2px */
				> div img {
					width: 25.886cqi; /* 409px */
					margin-left: -2.43cqi; /* -38.4px */
				}
			}
			/* 年間10万箱（横長） */
			> .box01 {
				display: flex;
				align-items: center;
				width: auto;
				height: 7.77cqi; /* 122.8px */
				margin: 5.411cqi 0 0; /* 上85.5px */
				padding: 0 0 0 5.428cqi; /* 左85.8px */
				border-radius: 1.013cqi; /* 16px */
				background: rgba(255, 206, 21, 0.7);
				.num01 {
					font-size: 1.963cqi; /* 31px */
					font-weight: 500;
					line-height: 1;
					white-space: nowrap;
					br {
						display: none;
					}
					> span {
						font-size: 3.924cqi; /* 62px */
						letter-spacing: 0.025em;
						> span {
							font-size: 3.228cqi; /* 51px */
							vertical-align: 0;
						}
					}
				}
				.txt02 {
					position: relative;
					width: 32.582cqi; /* 514.8px（区切り線から箱の右端まで） */
					margin: 0 0 0 auto;
					padding-left: 3.539cqi; /* 55.9px */
					font-size: 1.266cqi; /* 20px */
					font-weight: 500;
					line-height: 1.8; /* 36px */
					&::before {
						content: "";
						position: absolute;
						top: 50%;
						left: 0;
						width: 2px;
						height: 3.616cqi; /* 57.2px */
						background: var(--c-txt);
						transform: translateY(-50%);
					}
				}
			}
		}
	}
}

/* ----------- profile ----------- */
.profile {
	padding: 15.223cqi 0 17.067cqi; /* 上114.2px / 下128px */
	background: var(--c-beige);
	.container > .inner {
		.header02 {
			margin-left: 32.22cqi; /* 241.7px */
		}
		.header02 + p {
			letter-spacing: 0.05em;
		}
		dl {
			margin: 10.901cqi 6.744cqi 0 6.589cqi; /* 上81.8px / 右50.6px / 左49.4px */
			border-bottom: 0.16cqi solid var(--c-black); /* 1.2px */
			font-size: 3.733cqi; /* 28px */
			font-weight: 400;
			line-height: 1.571; /* 44px */
			letter-spacing: 0.1em;
			> div {
				display: grid;
				grid-template-columns: 28.767cqi 1fr; /* 項目名の列 215.8px */
				padding: 3.733cqi 0 3.733cqi 0.572cqi; /* 上下28px / 左4.3px */
				border-top: 0.16cqi solid var(--c-black); /* 1.2px */
			}
		}
	}
}

/* PC：profile */
@media screen and (min-width: 791px) {
	.profile {
		padding: 0;
		background: none;
		.container > .inner {
			padding: 7.26cqi 0 7.147cqi; /* 上114.7px / 下112.9px */
			.header02 + p {
				letter-spacing: 0.1em;
			}
			dl {
				width: 68.408cqi; /* 1080.8px */
				margin: 3.981cqi 0 0 22.089cqi; /* 上62.9px / 左349px */
				border-bottom: none;
				font-size: 1.266cqi; /* 20px */
				line-height: 2.15; /* 43px */
				letter-spacing: 0.05em;
				> div {
					grid-template-columns: 18.575cqi 1fr; /* 項目名の列 293.5px */
					padding: 2.025cqi 0; /* 32px */
					border-top: none;
					border-bottom: 1px solid var(--c-txt);
				}
				dd br {
					display: none;
				}
			}
		}
	}
}

/* ----------- message ----------- */
.message {
	padding: 17.648cqi 0 13.853cqi; /* 上132.4px / 下103.9px */
	.container > .inner {
		/* 見出し（.head01で囲んでいる） */
		.header02 {
			margin-left: 25.435cqi; /* 190.8px */
		}
		.header02 + p {
			margin-top: 1.2cqi; /* 9px */
		}
		/* キャッチ・写真・本文（.box01で囲んでいる） */
		> .box01 > .catch01,
		> .box01 > .catch02 {
			padding-left: 8.045cqi; /* 60.3px */
			letter-spacing: 0.05em;
		}
		> .box01 > .catch01 {
			margin-top: 13.336cqi; /* 100px */
			padding-left: 8.727cqi; /* 65.4px */
			font-size: 3.733cqi; /* 28px */
			font-weight: 500;
			line-height: 1;
			color: var(--c-navy);
		}
		> .box01 > .catch02 {
			margin-top: 3.775cqi; /* 28.3px */
			font-size: 5.6cqi; /* 42px */
			font-weight: 500;
			line-height: 1.667; /* 70px */
		}
		/* 写真と名前（.photo01で囲んでいる） */
		.img01 {
			width: 60.053333cqi; /* 450.4px */
			margin: 12.285cqi auto 0; /* 上92.1px */
			border-radius: 4.4cqi; /* 33px */
			overflow: hidden;   
		}
		/* 代表取締役 目黒 裕久（中心を画面左から485pxに） */
		.name01 {
			margin-top: 5.635cqi; /* 42.3px */
			font-size: 5.733cqi; /* 43px */
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0.2em;
			text-align: center;
			br {
				display:   none;
			}
			span {
				display: block;
				margin-bottom: 2.243cqi; /* 16.8px */
				font-size: 2.933cqi; /* 22px */
			}
		}
		> .box01 > .txt01 {
			margin-top: 11.48cqi; /* 86.1px */
			padding-inline: 7.227cqi 9.6cqi; /* 左54.2px / 右72px */
			font-size: 3.733cqi; /* 28px */
			font-weight: 400;
			line-height: 2.143; /* 60px */
			letter-spacing: 0.05em;
		}
	}
}

/* PC：message */
@media screen and (min-width: 791px) {
	.message {
		padding: 0;
		background: rgba(246, 242, 239, 0.7);
		.container > .inner {
			padding: 8.145cqi 9.494cqi 15.918cqi 0; /* 上128.7px / 右150px / 下251.5px */
			/* 見出し（.head01で囲んでいる） */
			.header02 + p {
				margin-top: -0.158cqi; /* -2.5px */
				letter-spacing: 0.1em;
			}
			/* キャッチ・写真・本文（.box01で囲んでいる）：左列に写真と名前、右列にキャッチと本文 */
			> .box01 {
				display: grid;
				grid-template-columns: 22.39cqi minmax(0, 1fr); /* 左列353.8px（本文の左端は702.8px） */
				margin-left: 22.089cqi; /* 349px */
				> .catch01,
				> .catch02,
				> .txt01 {
					grid-column: 2;
					padding: 0;
				}
				> .catch01 {
					grid-row: 1;
					margin-top: 3.353cqi; /* 53px */
					font-size: 1.456cqi; /* 23px */
					letter-spacing: 0.2em;
				}
				> .catch02 {
					grid-row: 2;
					margin-top: 1.813cqi; /* 28.6px */
					font-size: 2.848cqi; /* 45px */
					line-height: 1.489; /* 67px */
					letter-spacing: 0.1em;
				}
				> .txt01 {
					grid-row: 3;
					margin-top: 1.918cqi; /* 30.3px */
					font-size: 1.266cqi; /* 20px */
					line-height: 2.3; /* 46px */
					letter-spacing: 0.1em;
				}
				> .photo01 {
					grid-column: 1;
					grid-row: 1 / span 3;
					align-self: start;
				}
			}
			.img01 {
				width: 16.27215cqi; /* 257.1px */
				margin: 3.399cqi 0 0 0.263cqi; /* 上53.7px / 左4.2px（名前の左端に合わせる） */
				border-radius: 0;
			}
			/* 代表取締役 目黒 裕久 */
			.name01 {
				margin: 2.816cqi 0 0; /* 上44.5px（写真の下から） */
				padding: 0;
				font-size: 2.225cqi; /* 35.15px */
				letter-spacing: 0.1em;
				text-align: left;
				white-space: nowrap;
				span {
					display: inline;
					margin: 0 0.888cqi 0 0; /* 右14px */
					font-size: 1.022cqi; /* 16.15px */
					vertical-align: 0.457cqi; /* 7.2px */
				}
			}
		}
	}
}

/* ----------- contact ----------- */
.contact {
	padding: 13.693cqi 0 16.333cqi; /* 上102.7px / 下122.5px */
	background: var(--c-navy);
	color: var(--c-wht);
	.container > .inner {
		> .header02 {
			margin-left: 8.8cqi; /* 66px */
			img {
				width: 55.147cqi; /* 413.6px（文字の高さをデザインの88pxに合わせて1.16倍） */
			}
		}
		> .header02 + p {
			margin-top: 5.107cqi; /* 38.3px */
			padding-left: 8.716cqi; /* 65.4px */
			letter-spacing: 0.08em;
			text-align: left;
			color: var(--c-wht);
		}
		/* 文章＋ポケットのイラスト */
		> .box01 {
			position: relative;
			margin-top: 16.347cqi; /* 122.6px */
			.txt01 {
				padding-left: 8.607cqi; /* 64.6px */
				font-size: 3.733cqi; /* 28px */
				font-weight: 400;
				line-height: 1.786; /* 50px */
				letter-spacing: 0.1em;
			}
			> div {
				position: absolute;
				top: -7.492cqi; /* -56.2px */
				left: 55.333cqi; /* 415px */
				width: 36.933cqi; /* 277px */
			}
		}
		/* お電話・メールでのお問い合わせ */
		> .tit01 {
			font-size: 4cqi; /* 30px */
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0.05em;
		}
		> .box01 + .tit01 {
			margin: 17.235cqi 6.667cqi 0; /* 上129.3px / 左右50px（線の端） */
			padding: 14.321cqi 0 0 2.133cqi; /* 上107.4px / 左16px */
			border-top: 0.2cqi solid var(--c-wht); /* 1.5px */
		}
		> .tel01 + .tit01 {
			margin-top: 14.747cqi; /* 110.6px */
			padding-left: 8.8cqi; /* 66px */
		}
		/* 電話番号・メールアドレス（SVG画像） */
		> .tel01,
		> .mail01 {
			padding-left: 8.8cqi; /* 66px */
			a {
				display: inline-block;
				transition: opacity 0.3s ease;
				&:hover {
					opacity: 0.8;
				}
			}
		}
		> .tel01 {
			margin-top: 6.067cqi; /* 45.5px */
			img {
				width: 72.975cqi; /* 547.3px */
			}
		}
		> .mail01 {
			margin-top: 6.067cqi; /* 45.5px */
			img {
				width: 82.588cqi; /* 619.4px */
			}
		}
	}
}

/* PC：contact */
@media screen and (min-width: 791px) {
	.contact {
		padding: 0;
		.container > .inner {
			padding: 9.619cqi 0 7.93cqi; /* 上152px / 下125.3px */
			> .header02 {
				margin-left: 9.494cqi; /* 150px */
				img {
					width: 19.747cqi; /* 312px */
				}
			}
			> .header02 + p {
				margin-top: 4.241cqi; /* 67px */
				padding-left: 9.344cqi; /* 147.6px */
				font-size: 1.647cqi; /* 26px */
				font-weight: 500;
				letter-spacing: 0.2em;
			}
			> .box01 {
				margin-top: 1.456cqi; /* 23px */
				.txt01 {
					padding-left: 9.272cqi; /* 146.5px */
					font-size: 1.391cqi; /* 22px */
					line-height: 2.136; /* 47px */
					letter-spacing: 0.2em;
				}
				> div {
					top: -12.525cqi; /* -197.9px */
					left: 66.456cqi; /* 1050px */
					width: 23.923cqi; /* 378px */
				}
			}
			> .tit01 {
				display: none;
			}
			> .tel01,
			> .mail01 {
				padding-left: 9.367cqi; /* 148px */
			}
			> .tel01 {
				margin-top: 4.627cqi; /* 73.1px */
				img {
					width: 29.152cqi; /* 460.6px */
				}
			}
			> .mail01 {
				margin-top: 3.475cqi; /* 54.9px */
				img {
					width: 51.082cqi; /* 807.1px */
				}
			}
		}
	}
}

/* ----------- footer ----------- */
.footer {
	padding: 9.773cqi 0 8cqi; /* 上73.3px / 下60px */
	text-align: center;
	.container > .inner {
		> div {
			width: 35.224cqi; /* 264.2px（ロゴ176pxを1.5倍） */
			margin-inline: auto;
		}
		.name01 {
			margin-top: 9.844cqi; /* 73.8px */
			font-size: 4.933cqi; /* 37px */
			font-weight: 500;
			line-height: 1;
			letter-spacing: 0.05em;
		}
		.address01 {
			margin-top: 4.889cqi; /* 36.7px */
			font-size: 3.333cqi; /* 25px */
			font-weight: 400;
			letter-spacing: 0.05em;
		}
		.copy01 {
			margin-top: 5.704cqi; /* 42.8px */
			font-size: 3.333cqi; /* 25px */
			font-weight: 400;
			line-height: 1;
		}
	}
}

/* PC：footer */
@media screen and (min-width: 791px) {
	.footer {
		padding: 0;
		.container > .inner {
			padding: 5.044cqi 0; /* 上下79.7px */
			> div {
				width: 11.138cqi; /* 176px */
			}
			/* 社名と住所は1行に並べる */
			.name01,
			.address01 {
				display: inline-block;
				margin-top: 3.658cqi; /* 57.8px */
				font-size: 1.075cqi; /* 17px */
				font-weight: 400;
				line-height: 1;
				letter-spacing: 0.1em;
			}
			.address01 {
				margin-left: 1em;
				br {
					display: none;
				}
			}
			.copy01 {
				margin-top: 2.525cqi; /* 39.9px */
				font-size: 0.949cqi; /* 15px */
				letter-spacing: 0.05em;
			}
		}
	}
}