@charset "utf-8";
/* ==========================================================================
   responsive.css ― スマホ・タブレット表示の調整＋見出しのテキスト化（2026-08-21）
   既存の style.css は触らず、この1枚を後から読み込んで上書きする方針。
   ・A) 見出しのテキスト化ほか、全幅共通の調整
   ・B) 0〜3) 画面幅ごとの調整（メディアクエリ）
   ========================================================================== */

/* --------------------------------------------------------------------------
   A) 全幅共通 ― 見出しを画像からテキストへ（2026-08-21）
      旧：service_ti.png / work_title.png / voice_title.png / sec1_copy.png /
          company_title.png / info_ti.png / top_copy.png の7枚の文字画像
      新：本文と同じフォントで組む。スマホで潰れず、検索エンジンにも読まれる。
      ※画像ファイルはサーバーに残してある（戻すときはHTMLだけ差し替えればよい）
   -------------------------------------------------------------------------- */

/* 左右に線が伸びる見出し（サービス／制作事例／お客様の声） */
h2.lines-on-sides {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	font-size: 2.1em;      /* 本文0.85emに対して約2.5倍のジャンプ率 */
	font-weight: 500;
	line-height: 1.35;
}

h2.lines-on-sides::before,
h2.lines-on-sides::after {
	content: "";
	-webkit-flex: 1 1 0;
	flex: 1 1 0;
	height: 1px;
	background: currentColor;
	opacity: 0.4;
}

h2.lines-on-sides > span {
	padding: 0 0.9em;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	white-space: nowrap;
}

/* 「教えてください。あなたの会社のことを。」 */
.wrapper.style1 h2.sec_copy {
	color: #fff;
	font-size: 1.9em;
	font-weight: 400;
	letter-spacing: 0.32em;
	text-indent: 0.32em;
	line-height: 1.6;
	margin: 0 0 1.1em;
	padding: 0;
}

/* 会社概要＝青い帯に白抜き */
#cta h2.company_ti {
	margin: 0 0 1.2em;
	padding: 0;
}

#cta h2.company_ti > span {
	display: block;
	background: #035b84;
	color: #fff;
	font-size: 1.5em;
	font-weight: 500;
	letter-spacing: 0.45em;
	text-indent: 0.45em;
	line-height: 2.7;
	text-align: center;
}

/* お知らせ＝白地に青文字 */
.company_right .info h2.info_ti {
	margin: 0;
	padding: 0.85em 0;
	background: #fff;
	color: #035b84;
	font-size: 1.4em;
	font-weight: 500;
	letter-spacing: 0.45em;
	text-indent: 0.45em;
	line-height: 1.6;
	text-align: center;
}

/* ※メインビジュアルのコピーは本人指示（2026-08-21）で画像 top_copy.png のまま。
   テキスト化はここでは行わない。 */

/* 「事例をもっとみる」ボタン／下層ページ works.html（2026-08-21） */
.works_more {
	text-align: center;
	margin: 2.5em 0 0;
	padding: 0;
}

.works_more a {
	display: inline-block;
	width: auto;          /* style.css の .style3 a（224x177の枠）を打ち消す */
	height: auto;
	border: solid 2px currentColor;
	border-radius: 2em;
	padding: 0.75em 2.4em;
	color: inherit;
	text-decoration: none;
	font-size: 0.85em;
	letter-spacing: 0.15em;
	text-indent: 0.15em;
	line-height: 1.4;
}

.works_more a:hover {
	/* style.css の .style3 a:hover が display:block と 3px の青枠をかけてくるので、
	   ホバーしたときだけ横幅いっぱいに伸びてしまう。ここで全部打ち消す。 */
	display: inline-block;
	width: auto;
	height: auto;
	border: solid 2px currentColor;
	opacity: 0.65;
}

/* ボタンが2つ並ぶとき（事例をもっとみる／印刷物・その他 など） */
.works_more a + a {
	margin-left: 0.8em;
}

/* 印刷物ページ：日付と説明文 */
.print_date {
	display: block;
	margin-top: 0.4em;
	font-size: 0.85em;
	opacity: 0.75;
}

.works_desc,
.print_desc {
	font-size: 0.72em;
	line-height: 1.8;
	text-align: left;
	margin: 0.6em 0 0;
	padding: 0 0.4em;
	opacity: 0.9;
}

/* ============================================================
   制作事例の個別ページ（works/*.html）
   ============================================================ */
/* style.css の「.style3 a」（制作事例サムネ用の224x177の枠）が
   個別ページのパンくず等のリンクにも当たってしまうので打ち消す */
.case_page a {
	display: inline;
	width: auto;
	height: auto;
	border: 0;
}

.case_page a:hover {
	border: 0;
}

.case_page .case_fig a,
.case_page .case_fig a:hover {
	display: block;
}

.case_page .works_more a,
.case_page .works_more a:hover {
	display: inline-block;
	border: solid 2px currentColor;
}

.case_inner {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 1.25em;
	box-sizing: border-box;
	text-align: left;
}

.case_breadcrumb {
	font-size: 0.7em;
	opacity: 0.75;
	margin: 0 0 2em;
}

.case_breadcrumb a {
	text-decoration: none;
	border-bottom: solid 1px currentColor;
}

.case_head {
	margin: 0 0 1.6em;
}

.case_cat {
	font-size: 0.8em;
	letter-spacing: 0.2em;
	margin: 0 0 0.4em;
	opacity: 0.85;
}

.case_title {
	font-size: 2.2em;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

.case_fig {
	margin: 0 0 1.6em;
}

.case_fig a,
.case_fig a:hover {
	display: block;
	width: auto;
	height: auto;
	border: 0;
}

.case_fig img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.case_fig figcaption {
	font-size: 0.7em;
	opacity: 0.7;
	margin-top: 0.6em;
}

.case_spec {
	margin: 2em 0;
	padding: 1.2em 1.4em;
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.8em;
	line-height: 1.9;
	overflow: hidden;
}

.case_spec dt {
	float: left;
	clear: left;
	width: 8em;
	font-weight: 700;
	opacity: 0.8;
}

.case_spec dd {
	margin: 0 0 0.5em 8em;
}

.case_spec ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.case_body p {
	font-size: 0.85em;
	line-height: 2;
	text-align: left;
	margin: 0 0 1.2em;
}

.case_voice {
	margin: 2.5em 0 0;
	padding: 1.4em;
	background: #fff;
	color: #333;
}

.case_voice__label {
	margin: 0 0 0.8em;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #035b84;
}

.case_voice__body {
	overflow: hidden;
}

.case_voice__photo {
	float: right;
	width: 150px;
	margin: 0 0 0.8em 1.2em;
}

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

.case_voice__body p {
	font-size: 0.8em;
	line-height: 1.95;
	margin: 0 0 0.6em;
	text-align: left;
}

.case_voice__name {
	text-align: right;
	font-weight: 700;
	opacity: 0.8;
}

/* ============================================================
   下層ページの白背景バージョン（body に light を付けたページ）
   ============================================================ */
body.light .wrapper.style3 {
	background-color: #ffffff;
	background-image: none;
	color: #333333;
}

body.light .page_spacer {
	background: #ffffff;
}

body.light h2.lines-on-sides {
	color: #035b84;
}

body.light .works_page .major p {
	color: #555555;
}

body.light .tile > a {
	border: solid 1px #e1e8ed;
}

body.light .tag_btn {
	color: #035b84;
	border-color: #b9cdd8;
}

body.light .tag_btn.is-on {
	color: #ffffff;
	border-color: #035b84;
}

body.light .tile__tag {
	color: #5b7c8d;
	border-color: #cfdde5;
	opacity: 1;
}

body.light .tile__date {
	color: #8aa2b0;
	opacity: 1;
}

body.light .tile__cat {
	color: #6b8494;
	opacity: 1;
}

body.light .tile__name {
	color: #035b84;
}

body.light .works_more a,
body.light .works_more a:hover {
	color: #035b84;
	border-color: #035b84;
}

/* 個別ページ */
body.light .case_breadcrumb {
	color: #6b8494;
	opacity: 1;
}

body.light .case_breadcrumb a {
	color: #035b84;
}

body.light .case_cat {
	color: #6b8494;
	opacity: 1;
}

body.light .case_title {
	color: #035b84;
}

body.light .case_fig img {
	border: solid 1px #e1e8ed;
	box-shadow: none;
}

body.light .case_fig figcaption {
	color: #6b8494;
	opacity: 1;
}

body.light .case_spec {
	background: #f2f6f8;
	color: #333333;
}

body.light .case_spec dt {
	color: #035b84;
	opacity: 1;
}

body.light .case_voice {
	background: #f2f6f8;
	border: solid 1px #dbe6ec;
}

/* ============================================================
   制作事例・印刷物の一覧＝画像を画面いっぱいに並べるグリッド（2026-08-22）
   ============================================================ */
.tile_page {
	padding-left: 0;
	padding-right: 0;
}

.tile_page > .major {
	padding: 0 1.25em;
}

/* タグでの絞り込み */
.tag_filter {
	max-width: 1200px;
	margin: 0 auto 2em;
	padding: 0 1.25em;
	text-align: center;
}

.tag_btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-block;
	margin: 0 0.35em 0.6em 0;
	padding: 0.55em 1.1em;
	border: solid 1px currentColor;
	border-radius: 2em;
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 0.75em;
	letter-spacing: 0.06em;
	line-height: 1.3;
	cursor: pointer;
}

.tag_btn span {
	margin-left: 0.5em;
	font-size: 0.85em;
	opacity: 0.6;
}

.tag_btn.is-on {
	background: #035b84;
	border-color: #035b84;
	color: #fff;
}

.tag_btn.is-on span {
	opacity: 0.75;
}

.tile.is-hide {
	display: none;
}

/* タイル上の小さなタグと日付 */
.tile__meta {
	margin: 0 0 0.35em;
	line-height: 1.6;
}

.tile__tag {
	display: inline-block;
	margin: 0 0.35em 0.25em 0;
	padding: 0.15em 0.6em;
	border: solid 1px currentColor;
	border-radius: 1em;
	font-size: 0.6em;
	letter-spacing: 0.05em;
	opacity: 0.8;
}

/* 日付の表示は停止中（2026-08-22 本人指示）。
   新しい実績が5件以上たまったら、この display:none を消せば出る。
   日付そのものは各タイルの data-date に残してあり、並び順も日付順のまま。 */
.tile__date {
	display: none;
	font-size: 0.62em;
	opacity: 0.6;
	letter-spacing: 0.05em;
}

.tile_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3px;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tile_grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.tile_grid--top {
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}

.tile {
	margin: 0;
	padding: 0 0 1.4em;
	box-sizing: border-box;
	text-align: left;
}

/* 画像は枠いっぱい。style.css の .style3 a（224x177の枠）を打ち消す */
.tile > a,
.tile > a:hover {
	display: block;
	width: auto;
	height: auto;
	border: 0;
	overflow: hidden;
	background: #ffffff;
}

.tile > a img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: opacity 0.25s ease, -webkit-transform 0.4s ease;
	transition: opacity 0.25s ease, transform 0.4s ease;
}

.tile > a:hover img {
	opacity: 0.85;
	-webkit-transform: scale(1.03);
	transform: scale(1.03);
}

.tile__cap {
	padding: 0.9em 1em 0;
}

.tile__cat {
	margin: 0 0 0.25em;
	font-size: 0.68em;
	letter-spacing: 0.1em;
	line-height: 1.5;
	opacity: 0.75;
}

.tile__name {
	margin: 0;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.6;
	text-align: left;
}

/* 一覧カードから個別ページへの「詳しくみる」 */
.works_detail {
	text-align: center;
	margin: 0.6em 0 0;
	font-size: 0.72em;
}

.works_detail a,
.works_detail a:hover {
	display: inline-block;
	width: auto;
	height: auto;
	border: 0;
	border-bottom: solid 1px currentColor;
	text-decoration: none;
	padding: 0.2em 0;
	letter-spacing: 0.08em;
}

/* 下層ページはヘッダーが固定なので、その高さぶん先頭に余白を入れる */
.page_spacer {
	height: 6.5em;
	background: #035b84;
}

.works_page .major p {
	text-align: center;
	font-size: 0.85em;
}

/* 制作事例・お客様の声のカードを中央寄せに（トップは3件・2件なので左に寄ってしまうため） */
.works_row,
.voice_row {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}

.works_row::before,
.works_row::after,
.voice_row::before,
.voice_row::after {
	display: none;
}

.works_cell,
.voice_cell {
	float: none;
}

/* ============================================================
   メインビジュアル（2026-08-23）
   ・ノートパソコンから湯気のようにシンボルが立ちのぼる
   ・スクロールするとメインビジュアルはその場に留まり、
     下から次のセクションが覆いかぶさる
   位置と大きさは index.html のJSが背景画像の拡大率に合わせて計算する
   ============================================================ */

/* --- 覆いかぶさる動き --- */
#banner {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 0;
}

/* 後ろのセクションがメインビジュアルの上に重なって上がってくる */
body.index #main,
body.index #cta,
body.index #footer {
	position: relative;
	z-index: 1;
}
/* ページトップボタンは position:fixed のまま（z-index 200 で十分手前にある）。
   ここで position:relative にすると、スマホで流し込みに戻って画面からはみ出す */

/* --- 湯気のシンボル --- */
#banner_sym {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	z-index: 3;            /* キャッチコピーの手前を通ってよい */
}

#banner_sym i {
	position: absolute;
	display: block;
	background: url(../images/symbol.webp) no-repeat center center;
	background-size: contain;
	opacity: 0;
	will-change: transform, opacity;
	-webkit-transform: translate(0, 0) scale(0.2);
	transform: translate(0, 0) scale(0.2);
}

/* パソコンの画面から出て、左右に揺れながらのぼって消える */
@-webkit-keyframes sym-steam {
	0%   { opacity: 0;    -webkit-transform: translate(0, 0) scale(0.2); }
	12%  { opacity: 0.62; }
	35%  { -webkit-transform: translate(var(--wx), calc(var(--ty) * 0.35)) scale(0.72); }
	65%  { opacity: 0.5;  -webkit-transform: translate(calc(var(--tx) * 0.7), calc(var(--ty) * 0.68)) scale(0.95); }
	100% { opacity: 0;    -webkit-transform: translate(var(--tx), var(--ty)) scale(1.18); }
}
@keyframes sym-steam {
	0%   { opacity: 0;    transform: translate(0, 0) scale(0.2); }
	12%  { opacity: 0.62; }
	35%  { transform: translate(var(--wx), calc(var(--ty) * 0.35)) scale(0.72); }
	65%  { opacity: 0.5;  transform: translate(calc(var(--tx) * 0.7), calc(var(--ty) * 0.68)) scale(0.95); }
	100% { opacity: 0;    transform: translate(var(--tx), var(--ty)) scale(1.18); }
}

#banner_sym.is-on i {
	-webkit-animation-name: sym-steam;
	animation-name: sym-steam;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

#banner .inner {
	position: relative;
	z-index: 2;
}

#banner #top_arw {
	z-index: 4;
}

/* 動きを減らす設定の人には出さない */
@media (prefers-reduced-motion: reduce) {
	#banner_sym {
		display: none;
	}
	#banner {
		position: relative;
		top: auto;
	}
}

/* 電話番号（2026-08-21 テキスト化。スマホはタップで発信できる） */
.company .fr a[href^="tel:"] {
	color: #035b84;
	text-decoration: none;
	font-weight: 700;
}

.company .fr .tel_note {
	display: inline-block;
	margin-left: 0.6em;
	font-size: 0.85em;
	font-weight: 400;
}

/* フッターのお問合わせブロック（旧 footer_info.png をテキスト化） */
#footer #footer_info2 .footer_cta {
	background: #9abdce;
	color: #035b84;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-align: center;
	line-height: 2.2;
	margin: 0 0 0.5em;
}

#footer #footer_info2 .footer_tel {
	margin: 0;
	font-size: 1.9em;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

#footer #footer_info2 .footer_tel a {
	color: #fff;
	text-decoration: none;
	display: inline-block;
}

#footer #footer_info2 .footer_hours {
	margin: 0.2em 0 0.8em;
	font-size: 0.75em;
	letter-spacing: 0.05em;
}


/* サービスのサムネイル：右上と左下の2角だけ丸く（2026-08-23）
   ※対角にRを付ける。左上と右下は角のまま。全6サービスに効く */
.service_cell img {
	border-top-right-radius: 14px;
	border-bottom-left-radius: 14px;
}

/* ============================================================
   スクロールアニメーション（2026-08-23）
   ・印付けと発火は js/motion.js（HTMLは触らない）
   ・.js-reveal は motion.js が <html> に付ける。
     JSが動かない／「動きを減らす」設定の人には最初から見えている
   ============================================================ */

.js-reveal [data-reveal] {
	opacity: 0;
	will-change: opacity, transform;
	-webkit-transition: opacity 1s ease, -webkit-transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js-reveal [data-reveal="up"] {
	-webkit-transform: translateY(28px);
	transform: translateY(28px);
}

/* ぽわん＝少し行き過ぎてから戻る（cubic-bezierの4つ目が1超え） */
.js-reveal [data-reveal="pop"] {
	-webkit-transform: scale(0.55) translateY(14px);
	transform: scale(0.55) translateY(14px);
	-webkit-transition: opacity 0.7s ease, -webkit-transform 0.95s cubic-bezier(0.34, 1.5, 0.5, 1);
	transition: opacity 0.7s ease, transform 0.95s cubic-bezier(0.34, 1.5, 0.5, 1);
}

.js-reveal [data-reveal].is-in {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}

/* ============================================================
   「教えてください。あなたの会社のことを。」の丸写真（2026-08-23）
   1枚だった sec1_img.webp を 01intro.psd から
   ・写真の丸5枚（sec1_img1〜5）
   ・円に沿った「クライアントの思い」の文字5枚（sec1_txt1〜5）
   に分けて書き出したもの（tools/split_intro.py が生成。％もあのスクリプトの出力）
   並びはPSDのまま（組どうしを8%だけ広げ、文字を数pxずらしてある）。
   ★条件（2026-08-23 本人指示）：文字×文字＝重ねない／文字×写真＝重ねない／写真×写真＝重なってよい。
     tools/split_intro.py が実際の絵のピクセルで判定して、重なりゼロになる位置を出している。
     並びを変えると崩れるので、％を手で書き換えないこと。
   ぽわんと1つずつ出て、そのあとふわふわ漂い続ける。
   ============================================================ */

.intro_pops {
	position: relative;
	width: calc(100% - 2em);  /* 左右に少しだけ余白（文字が画面の端にくっつかないように） */
	max-width: 1789px;        /* 書き出した画像の原寸。これ以上は引き伸ばしになるので止める */
	margin: 0 auto;
	padding-top: 25.158%;     /* 文字まで入れた外接矩形の縦横比 */
}

.intro_pop {
	position: absolute;
	display: block;
}

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

/* 文字はどの写真よりも手前（1.5倍にして重なっても隠れないように） */
.intro_txt {
	z-index: 2;
}

/* --- 写真の丸 --- */
.ip1 { left:  1.150%; top: 27.778%; width: 17.499%; }
.ip2 { left: 21.180%; top:  5.778%; width: 17.331%; }
.ip3 { left: 39.793%; top: 26.000%; width: 18.002%; }
.ip4 { left: 60.469%; top: 30.222%; width: 18.561%; }
.ip5 { left: 81.271%; top:  9.778%; width: 18.729%; }

/* --- 円に沿った文字（写真と同じ中心・同じ倍率で貼りついている） --- */
.it1 { left:  0.000%; top: 21.541%; width: 17.219%; }
.it2 { left: 19.950%; top:  0.000%; width: 12.467%; }
.it3 { left: 45.439%; top: 20.444%; width: 11.740%; }
.it4 { left: 57.860%; top: 26.627%; width: 11.181%; }
.it5 { left: 80.377%; top:  3.675%; width: 14.983%; }

/* --- 出る順番（写真 → そのすぐあとに文字。motion.js側のずらしは使わない） --- */
.js-reveal .ip1 { -webkit-transition-delay: 0s;    transition-delay: 0s; }
.js-reveal .ip2 { -webkit-transition-delay: 0.16s; transition-delay: 0.16s; }
.js-reveal .ip3 { -webkit-transition-delay: 0.32s; transition-delay: 0.32s; }
.js-reveal .ip4 { -webkit-transition-delay: 0.48s; transition-delay: 0.48s; }
.js-reveal .ip5 { -webkit-transition-delay: 0.64s; transition-delay: 0.64s; }
.js-reveal .it1 { -webkit-transition-delay: 0.30s; transition-delay: 0.30s; }
.js-reveal .it2 { -webkit-transition-delay: 0.46s; transition-delay: 0.46s; }
.js-reveal .it3 { -webkit-transition-delay: 0.62s; transition-delay: 0.62s; }
.js-reveal .it4 { -webkit-transition-delay: 0.78s; transition-delay: 0.78s; }
.js-reveal .it5 { -webkit-transition-delay: 0.94s; transition-delay: 0.94s; }

/* --- 出たあとの、ふわふわ ---
   外側の span ＝出る動き（transform）／内側の img ＝漂う動き（animation）と役割を分けてある。
   写真とその文字は同じ秒数・同じずらしにして、一緒に漂わせる */
@-webkit-keyframes intro-float {
	0%, 100% { -webkit-transform: translateY(0) rotate(0deg); }
	50%      { -webkit-transform: translateY(-9px) rotate(-0.8deg); }
}
@keyframes intro-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-9px) rotate(-0.8deg); }
}

.intro_pop img {
	-webkit-animation: intro-float 6.5s ease-in-out infinite;
	animation: intro-float 6.5s ease-in-out infinite;
}

.ip1 img, .it1 img { -webkit-animation-duration: 6.2s; animation-duration: 6.2s; -webkit-animation-delay:  0s;   animation-delay:  0s; }
.ip2 img, .it2 img { -webkit-animation-duration: 7.4s; animation-duration: 7.4s; -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.ip3 img, .it3 img { -webkit-animation-duration: 5.8s; animation-duration: 5.8s; -webkit-animation-delay: -2.3s; animation-delay: -2.3s; }
.ip4 img, .it4 img { -webkit-animation-duration: 7.9s; animation-duration: 7.9s; -webkit-animation-delay: -3.0s; animation-delay: -3.0s; }
.ip5 img, .it5 img { -webkit-animation-duration: 6.7s; animation-duration: 6.7s; -webkit-animation-delay: -4.2s; animation-delay: -4.2s; }

@media (prefers-reduced-motion: reduce) {
	.intro_pop img {
		-webkit-animation: none;
		animation: none;
	}
}

@media screen and (max-width: 980px) {
	/* スマホ・タブレット（2026-08-23）：横1列だと小さくなりすぎるので、
	   3段ぶんの縦長の箱に、そろえずばらばらに置く。文字もPCと同じように出す。
	   ここの％も tools/split_intro.py の出力（重なりゼロを実測で確認済み）。手で書き換えないこと */
	.intro_pops {
		width: 100%;          /* 親（.wrapper.style1 > footer）が既に左右1.25emの余白を持っている */
		max-width: 460px;
		padding-top: 154.642%;
	}

	.ip1 { left:  6.378%; top: 17.870%; width: 43.796%; }
	.ip2 { left: 53.602%; top:  2.353%; width: 43.376%; }
	.ip3 { left: 40.225%; top: 38.708%; width: 45.055%; }
	.ip4 { left:  6.392%; top: 64.866%; width: 46.454%; }
	.ip5 { left: 53.126%; top: 71.679%; width: 46.874%; }

	.it1 { left:  3.538%; top: 15.434%; width: 43.096%; }
	.it2 { left: 50.523%; top:  0.000%; width: 31.203%; }
	.it3 { left: 54.147%; top: 36.392%; width: 29.384%; }
	.it4 { left:  0.000%; top: 63.386%; width: 27.985%; }
	.it5 { left: 52.316%; top: 67.467%; width: 37.499%; }
}

/* --------------------------------------------------------------------------
   B) 画面幅ごとの調整
   -------------------------------------------------------------------------- */

/* PC表示ではハンバーガーボタンは出さない（既定） */
#nav_toggle {
	display: none;
}

/* --------------------------------------------------------------------------
   0-a) コンテナ幅の拡張（2026-08-23）
        style.css / skel.css が 950px 固定にしている箱を、
        下層ページ（.case_inner）と同じ「最大1040px・左右1.25em余白」に揃える。
        style.css 側は書き換えず、ここで上書きする（戻しやすくするため）。
   -------------------------------------------------------------------------- */
.company_row,
.service_row,
.works_row,
.voice_row,
.row,
#header_inner,
.style2 h2,
.style3 h2,
.style4 h2 {
	width: 100%;
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.25em;
	padding-right: 1.25em;
	box-sizing: border-box;
}

/* 会社概要：950px内訳の固定幅（左624px／右300px）→ 割合に */
.company_left {
	width: 64%;
}

.company_right {
	width: 33%;
	right: auto;
}

.company_right .info {
	width: 100%;
}

/* --------------------------------------------------------------------------
   0) ノートPCの狭い幅（〜1040px）：ヘッダーが左右余白ぶんはみ出すのを止める
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1040px) {

	#header,
	#header.alt {
		padding-left: 1em;
		padding-right: 1em;
	}

	#header_inner {
		width: 100%;
		max-width: 1040px;
		box-sizing: border-box;
	}
}

/* --------------------------------------------------------------------------
   1) タブレット以下（〜980px）：コンテナを画面幅に合わせて伸縮させる
   -------------------------------------------------------------------------- */
@media screen and (max-width: 980px) {

	.company_row,
	.service_row,
	.works_row,
	.voice_row,
	.row,
	#header_inner,
	.style2 h2,
	.style3 h2,
	.style4 h2 {
		width: 100%;
		max-width: 1040px;
		padding-left: 1.25em;
		padding-right: 1.25em;
		box-sizing: border-box;
	}

	.wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	/* 制作実績のサムネイル枠が224px固定ではみ出すのを解除 */
	.style3 a,
	.style3 a:hover {
		width: auto;
		height: auto;
	}

	/* 会社概要：左624px固定 → 割合に */
	.company_left { width: 62%; }
	.company_right { width: 34%; right: auto; }
	.company_right .info { width: 100%; }

	/* 見出し画像が画面端にくっつかないように */
	.wrapper.style1 > div,
	.wrapper.style1 > footer {
		padding-left: 1.25em;
		padding-right: 1.25em;
		box-sizing: border-box;
	}

	/* 背景イラストが本文に重ならないように控えめに */
	.wrapper.style2 { background-size: 15em; }
	.wrapper.style4 { background-size: 15em; }

	/* ---- ヘッダー：白い帯＋ハンバーガー（左）／ロゴ（中央）／お問合わせ（右上） ----
	   PC版のヘッダーは position:absolute でメニューを右端に置く作りだが、
	   幅が狭いとロゴと重なるため、980px以下では独立した白い帯に組み替える。 */
	#header,
	#header.alt {
		position: relative;
		background: #fff;
		color: #333;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
		padding: 0.8em 1em 0.6em;
		text-align: center;
	}

	/* ロゴ＝中央。左右に「ハンバーガーぶん」「お問合わせボタンぶん」の余白を確保して、
	   その残りの真ん中に置く（狭い画面で重ならないように） */
	#header h1,
	#header.alt h1 {
		background-image: url(../images/header_logo2.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-origin: content-box;
		background-size: auto 28px;
		padding: 0 116px 0 52px;
		box-sizing: border-box;
	}

	#header h1 a {
		width: 100%;
		height: 40px;
	}

	/* ---- ハンバーガーボタン（左） ---- */
	#nav_toggle {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 44px;
		height: 40px;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	#nav_toggle span {
		display: block;
		width: 24px;
		height: 2px;
		margin: 5px auto;
		background: #035b84;
		border-radius: 2px;
		-webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	/* 開いている間は×印にする */
	body.nav-open #nav_toggle span:nth-child(1) {
		-webkit-transform: translateY(7px) rotate(45deg);
		transform: translateY(7px) rotate(45deg);
	}

	body.nav-open #nav_toggle span:nth-child(2) {
		opacity: 0;
	}

	body.nav-open #nav_toggle span:nth-child(3) {
		-webkit-transform: translateY(-7px) rotate(-45deg);
		transform: translateY(-7px) rotate(-45deg);
	}

	/* ---- メニュー本体 ---- */
	#header nav,
	#header.alt nav {
		position: static;
		right: auto;
		top: auto;
		margin: 0;
	}

	#header nav ul {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#header nav ul li {
		display: block;
		margin: 0;
	}

	/* お問合わせ（最後の項目）だけは畳まず、右上に固定 */
	#header nav ul li:last-child {
		position: absolute;   /* 基準は #header_inner（style.cssで position:relative） */
		right: 0;
		top: 0;
		height: 40px;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
	}

	#header nav ul li:last-child a,
	#header.alt nav ul li:last-child > a {
		padding: 0;
		border: 0;
	}

	#header nav ul li a img {
		display: block;
		width: 104px;
		height: auto;
	}

	/* お問合わせ以外＝ハンバーガーで開閉する部分 */
	#header nav ul li:not(:last-child) {
		display: none;
		text-align: left;
		border-top: solid 1px #e3edf2;
	}

	body.nav-open #header nav ul li:not(:last-child) {
		display: block;
	}

	body.nav-open #header nav {
		margin-top: 0.8em;
	}

	#header nav ul li a,
	#header.alt nav ul li > a {
		color: #035b84;
		display: block;
		font-size: 1em;
		line-height: 1.3em;
		padding: 0.95em 0.6em;   /* タップ領域を44px以上確保 */
	}

	/* ヘッダーが固定でなくなるぶん、メインビジュアル上部の余白を詰める */
	#banner {
		padding-top: 2.5em;
	}

	/* 下向き矢印は #banner の左右paddingぶん右にずれて横スクロールの原因になるので基準を戻す */
	#banner #top_arw {
		left: 0;
	}
}

/* --------------------------------------------------------------------------
   2) スマホ（〜736px）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 736px) {

	/* ---- 全体 ---- */
	body, input, select, textarea {
		font-size: 11.5pt;
		line-height: 1.9em;
	}

	.wrapper,
	.wrapper.style1,
	.wrapper.style2,
	.wrapper.style3,
	.wrapper.style4 {
		padding: 2.5em 0;
	}

	/* 背景イラストはスマホでは邪魔になるので消す */
	.wrapper.style1,
	.wrapper.style2,
	.wrapper.style4 {
		background-image: none;
	}

	/* ---- メインビジュアル ---- */
	#banner {
		height: auto;
		min-height: 430px;
		padding: 2.5em 1.25em 4.5em;
		background-position: center bottom;
	}

	#banner .inner {
		display: block;
		padding: 0;
	}

	#banner .inner p {
		font-size: 0.85em;
		line-height: 1.9em;
	}

	#banner #top_arw {
		bottom: 0.8em;
	}

	/* ---- 私たちについて ---- */
	.wrapper.style1 header p {
		font-size: 0.9em;
		text-align: left;
		padding: 0 1.25em;
	}

	/* 一覧グリッド：スマホは2列（トップの事例は1列で大きく） */
	.tile_grid,
	.tile_grid--4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 2px;
	}

	.tile_grid--top {
		grid-template-columns: 1fr;
		gap: 1.2em;
	}

	.tag_filter {
		padding: 0 0.8em;
	}

	.tag_btn {
		font-size: 0.8em;
		padding: 0.6em 1em;
	}

	.tile {
		padding-bottom: 1.2em;
	}

	.tile__cap {
		padding: 0.7em 0.7em 0;
	}

	.tile__name {
		font-size: 0.82em;
	}

	/* 制作事例の個別ページ */
	.case_title {
		font-size: 1.6em;
	}

	.case_spec dt {
		float: none;
		width: auto;
	}

	.case_spec dd {
		margin: 0 0 0.8em 0.8em;
	}

	.case_voice__photo {
		float: none;
		width: 200px;
		margin: 0 auto 1em;
	}

	/* 下層ページ：スマホではヘッダーが固定でないので余白は不要 */
	.page_spacer {
		height: 0;
	}

	.works_more a {
		display: block;
		max-width: 20em;
		margin: 0 auto;
		padding: 0.9em 1.2em;
		font-size: 0.9em;
	}

	.works_more a + a {
		margin: 0.8em auto 0;
	}

	/* ---- 見出し（テキスト化済み）をスマホ用の大きさに ---- */
	h2.lines-on-sides {
		font-size: 1.55em;
	}

	h2.lines-on-sides > span {
		padding: 0 0.6em;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
		white-space: normal;   /* 長い見出しは折り返す（横スクロール防止） */
	}

	.wrapper.style1 h2.sec_copy {
		font-size: 1.4em;
		letter-spacing: 0.16em;
		text-indent: 0.16em;
		padding: 0 0.4em;
	}

	#cta h2.company_ti > span,
	.company_right .info h2.info_ti {
		font-size: 1.3em;
		letter-spacing: 0.25em;
		text-indent: 0.25em;
	}

	/* フッターの電話番号はタップ領域を広げる */
	#footer #footer_info2 .footer_tel a {
		padding: 0.2em 0;
	}

	/* 会社概要のTEL補足は折り返す */
	.company .fr .tel_note {
		display: block;
		margin-left: 0;
	}

	/* ---- サービス：3列 → 1列 ---- */
	.service_cell,
	.service_row .service_cell:last-child {
		width: 100%;
		float: none;
		margin-bottom: 2em;
	}

	.service_row header,
	.service_row p {
		width: 100%;
	}

	.service_cell img {
		display: block;
		margin: 0 auto;
	}

	.wrapper.style2 p {
		font-size: 0.9em;
	}

	/* ---- 制作実績：4列 → 2列 ---- */
	.works_cell,
	.works_row .works_cell:last-child {
		width: 50%;
		float: left;
		margin-bottom: 1.5em;
	}

	.works_row header,
	.works_row p {
		width: 100%;
	}

	.works_row .name {
		font-size: 0.7em;
		line-height: 1.5em;
	}

	.works_cell img {
		display: block;
		margin: 0 auto;
	}

	/* ---- お客様の声：3列 → 1列 ---- */
	.voice_cell,
	.voice_row .voice_cell:last-child {
		width: 100%;
		float: none;
		margin-bottom: 2.5em;
	}

	.voice_row header,
	.voice_row p {
		width: 100%;
		padding-left: 0;
	}

	.wrapper.style4 p {
		font-size: 0.9em;
		line-height: 1.9em;
	}

	.voice_cell .fit img {
		display: block;
		margin: 0 auto;
	}

	/* ---- 会社紹介：左右2カラム → 縦積み ---- */
	.company_left,
	.company_right {
		width: 100%;
		float: none;
		right: auto;
	}

	.company_right {
		margin-top: 2.5em;
	}

	/* 会社概要の表：見出しと内容を上下に */
	dl.company,
	dl.company_end {
		font-size: 0.9em;
		line-height: 1.7em;
	}

	.company .fl,
	.company_end .fl,
	.company .fr,
	.company_end .fr {
		width: 100%;
		float: none;
	}

	.company .fr,
	.company_end .fr {
		padding-left: 0.5em;
	}

	#cta {
		padding: 2.5em 0;
	}

	/* 「ご訪問可能エリア」はHTML側のインラインstyle(0.7em)で小さすぎるため、
	   スマホだけ読める大きさに上書きする */
	.company_left > p[style] {
		font-size: 0.82em !important;
		line-height: 1.7em !important;
	}

	/* ---- フッター：3カラム → 縦積み ---- */
	#footer {
		padding: 2em 0 1.5em;
	}

	#footer .row > div,
	#footer .row > div.fr {
		width: 100%;
		float: none;
		margin-bottom: 1.8em;
	}

	#footer #footer_navi {
		font-size: 0.85em;
	}

	#footer #footer_navi ul {
		margin: 0;
		padding: 0;
	}

	#footer #footer_navi a {
		display: block;
		padding: 0.6em 0 0.6em 2.6em;   /* タップ領域確保 */
		background-position: 4px 50%;
	}

	#footer #footer_info,
	#footer #footer_info2 {
		border-left: 0;
		padding-left: 0;
		font-size: 0.85em;
	}

	#footer #footer_info2 li {
		display: inline-block;
		margin: 0 0.5em 0.5em 0;
	}

	#footer #footer_info2 li a {
		display: inline-block;
		padding: 0.25em 0;
	}

	#footer .copyright {
		font-size: 0.7em;
	}

	/* ---- ページトップボタン（スマホではJSが .pagetop のまま残すため、
	        CSSが無く見えなかった。丸ボタンとして常時表示する） ---- */
	.pagetop {
		position: fixed;
		right: 12px;
		bottom: 12px;
		z-index: 200;
		margin: 0;
	}

	.pagetop a {
		display: block;
		width: 48px;
		height: 48px;
		background: url(../images/btn_totop.png) no-repeat center center;
		background-size: 48px 48px;
		opacity: 0.85;
	}
}

/* --------------------------------------------------------------------------
   3) 小さいスマホ（〜380px）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 380px) {

	#header nav ul li a,
	#header.alt nav ul li > a {
		padding: 0.95em 0.5em;
		font-size: 0.95em;
	}

	/* 狭い画面ではロゴとお問合わせボタンを一回り小さくして重なりを防ぐ */
	#header h1,
	#header.alt h1 {
		background-size: auto 24px;
		padding-right: 100px;
		padding-left: 48px;
	}

	#header nav ul li a img {
		width: 90px;
	}

	.company_row,
	.service_row,
	.works_row,
	.voice_row,
	.row {
		padding-left: 0.9em;
		padding-right: 0.9em;
	}
}