@charset "utf-8";

/**************************************************
 *	フロントページ補正（レイアウト補正）
 **************************************************/
 div#page > div#content > main{
	 padding:0;
 }

/**************************************************
 *	フロントページ共通設定（Utilities）
 **************************************************/
 
 
/* 汎用クラス
-------------------------------------*/
.jg-text-pink { color: #f36; }
.jg-text-small { font-size: 0.8em; }
.jg-block { display: block; }
.jg-container { margin: 0 auto; padding: 0 20px; }

/* accessibility */
.jg-screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


/**************************************************
 *	フロントページヘッダー（Page Title）
 **************************************************/

/* ページタイトル
-------------------------------------*/
.jg-front-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px 0;
}

.jg-front-title {
    font-size: 32px;
    color: #333;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.jg-front-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #f36;/* プロジェクトカラーのピンク */
}


/**************************************************
 *	メイン看板セクション（Hero Section）
 **************************************************/

/* ヒーロー全体レイアウト
-------------------------------------*/
.jg-hero {
	position: relative;
	width: 100%;
	min-height: 500px;
	padding: 80px 0;
	text-align: center;
	background: url(../img/print-mainKanbanBg.jpg) center center no-repeat;
	background-size: cover;
	background-attachment: scroll;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
}

/* PC寄りだけ背景固定（任意） */
@media (hover: hover) and (pointer: fine) {
	.jg-hero {
		background-attachment: fixed;
	}
}

.jg-hero__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
/*
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.35) 55%,
		rgba(0, 0, 0, 0.60) 100%
	);
*/
	z-index: 1;
}

.jg-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
}

/* headings */
.jg-hero__label {
	display: inline-block;
	background: #ff007b;
	color: #fff;
	padding: 4px 15px;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 15px;
	border-radius: 4px;
}

.jg-hero__title {
	font-size: clamp(28px, 5vw, 48px);
	line-height: 1.25;
	margin-bottom: 20px;
	font-weight: 900;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	letter-spacing: 0.02em;
}

.jg-hero__title span {
	font-size: 0.8em;
	display: block;
	color: rgba(255, 255, 255, 0.92);
}

/* フィーチャーリスト（特徴）
-------------------------------------*/
.jg-hero__features {
	max-width:900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 0 auto 40px auto;
    padding: 0;
}

/* items */
.jg-hero__feature-item {
	flex: 0 1 calc(50% - 15px);
	background: rgba(255, 0, 100, 0.7);
	color: #fff;
	padding: 15px;
	font-size: 20px;
	border-radius: 10px;
	box-sizing: border-box;
}
/* backdrop-filter 対応環境のみ */
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
	.jg-hero__feature-item {
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}
}

/* description text */
.jg-hero__description { margin-top: 30px; }
.jg-hero__text--small { font-size: 16px; color: #666; }
.jg-hero__text--large { font-size: 22px; font-weight: bold; color: #333; margin-top: 10px; }

/* 説明テキスト */
.jg-hero__text--main {
	font-size: clamp(16px, 2.0vw, 20px);
	font-weight: bold;
	margin-bottom: 10px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.jg-hero__text--sub {
	font-size: clamp(13px, 1.6vw, 15px);
	opacity: 0.92;
	margin-bottom: 40px;
	line-height: 1.8;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
@media (max-width: 860px) {
	.jg-hero__feature-item {
		font-size:16px;
	}
}
@media (max-width: 768px) {
	.jg-hero__features {
		gap: 6px;
	}
	.jg-hero__feature-item {
		flex: 0 1 100%;
		padding: 18px 0;
	}
}
@media (max-width: 380px) {
	.jg-hero__title span {
		font-size:18px;
	}
}
@media (max-width: 340px) {
	.jg-hero__title{
		font-size:26px;
	}
	.jg-hero__title span {
		font-size:16px;
	}
	.jg-hero__feature-item {
		font-size:14px;
	}
	.jg-main-nav__title{
		font-size:26px!important;
	}
}
/* CTAボタン
-------------------------------------*/
.jg-hero__btn {
	display: inline-block;
	background: #ff007b;
	color: #fff;
	padding: 18px 40px;
	font-size: 18px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 50px;
	transition: transform 0.3s ease, background 0.3s ease;
	box-shadow: 0 5px 15px rgba(255, 0, 123, 0.3);
}

.jg-hero__btn:hover {
	background: #e6006f;
	transform: translateY(-3px);
}

/* フォーカス可視化（キーボード対応） */
.jg-hero__btn:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.85);
	outline-offset: 4px;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce) {
	.jg-hero__btn {
		transition: none;
	}
	.jg-hero__btn:hover {
		transform: none;
	}
}
@media (max-width: 768px) {
	.jg-hero__btn {
		padding: 16px 28px;
		font-size: 16px;
	}
}



/**************************************************
 *	メインナビゲーション（Navigation Guide）
 **************************************************/

/* ナビ全体コンテナ */
.jg-main-nav {
    background: #f9f9f9; /* 少し明るくして清潔感を */
    padding: 60px 20px;
    margin: 50px 0 80px;
    text-align: center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* headings */
.jg-main-nav__header {
    margin-bottom: 40px;
}
.jg-main-nav__title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.jg-main-nav__lead {
    font-size: 15px;
    color: #666;
    font-weight: 500;
}

/* ナビリスト */
ul.jg-main-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* 3列レイアウト（PC） / 2列（スマホ） */
li.jg-main-nav__item {
    flex: 1 0 calc((100% - (15px * 2)) / 3);
    min-width: 280px; /* 極端に小さくなるのを防ぐ */
}

/* link style */
a.jg-main-nav__link {
    width: 100%;
    padding: 30px 20px; /* 少し余白を広げて高級感を */
    position: relative;
    background: #fff;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 12px; /* 角丸を少し強めて今っぽく */
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    overflow: hidden; /* 大きな数字を枠内に収める */
}

/* ホバー演出 */
a.jg-main-nav__link:hover {
    border-color: #ff69b4;
    transform: translateY(-5px); /* 動きを少し大きく */
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

/* リンク内のspan要素をすべてブロック化 */
.jg-main-nav__link span {
    display: block;
    line-height: 1.4;
    position: relative; /* 数字より手前に出すため */
    z-index: 2;
}

/* 1. 番号表記（デザインの主役：色を濃く視認性アップ版） */
.jg-main-nav__number {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 50px; 
    font-weight: 300;
    font-family: 'Montserrat', 'Arial Black', sans-serif;
    color: #e0e0e0; /* 視認性を高めた濃いめのグレー */
    letter-spacing: -1px;
    line-height: 0.9;
    z-index: 1 !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: block; /* 追加 */
}

/* 2. メインラベル（数字に負けないよう縁取りを追加） */
.jg-main-nav__label {
    position: relative;
    z-index: 2;
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 6px;
    color: #333;
    /* 数字と重なっても読めるように白い縁取りを入れる */
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
}

/* 3. リード文（少し濃くして読みやすく） */
.jg-main-nav__link .jg-main-nav__lead {
    position: relative;
    z-index: 2;
    font-size: 12px;
    color: #555; 
    margin-top: 2px;
    font-weight: 500;
    text-shadow: 1px 1px 0 #fff;
}

/* 4. ホバー時の数字の変化（連動して動くように追加） */
a.jg-main-nav__link:hover .jg-main-nav__number {
    color: #ffc1d9; /* 華やかなピンクグレー */
    transform: scale(1.1) rotate(-3deg);
}

/* 数字が濃くなった分、文字の可読性を守る設定 */
.jg-main-nav__label,
.jg-main-nav__lead {
    position: relative;
    z-index: 2; /* 必ず数字より手前に */
    /* 背景の数字が濃い場合、文字に微細な白い光彩をつけると読みやすさが安定します */
    text-shadow: 0 0 10px #fff, 0 0 5px #fff;
}

/* メインラベル */
.jg-main-nav__label {
    font-size: 19px; /* わずかに調整 */
    font-weight: 800;
    margin-bottom: 6px;
    color: #333;
}

/* リード文 */
.jg-main-nav__link .jg-main-nav__lead {
    font-size: 12px; /* 補足情報を少し小さくして強弱をつける */
    color: #888;
    margin-top: 2px;
}

/* 矢印（右下に配置・下方へのスクロールを誘導） */
.jg-main-nav__link::after {
    content: "↓"; /* 下向きで正解です */
    position: absolute;
    right: 18px;
    bottom: 15px;
    font-size: 20px;
    font-weight: 700;
    color: #eee; /* 通常時は数字と同様、控えめな色に */
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ホバー時に矢印が「ピョコッ」と下に動く演出 */
a.jg-main-nav__link:hover::after {
    color: #ff69b4; /* テーマカラーのピンクに */
    transform: translateY(10px); /* 下に5px動かして「この先を見て」と促す */
}

/* 【例外】00番だけは外部リンクなので、右上の斜め矢印のままにします */
a.jg-main-nav__link[target="_blank"]::after {
    content: "↗";
    transform: none;
}
a.jg-main-nav__link[target="_blank"]:hover::after {
    transform: translate(px, -3px); /* 外部リンクは右上へ動かす */
}

/**************************************************
 *	セクションナビゲーション（jg-sec-nav）
 **************************************************/
.jg-sec-nav {
	position: fixed;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) translateX(12px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	z-index: 9998;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), 
				transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), 
				visibility 0.4s;
}

.jg-sec-nav.is-show {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
	pointer-events: auto;
}

/* ナビ項目：ガラスモーフィズム */
.jg-sec-nav__item {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	
	/* ガラス質感と繊細な輪郭 */
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	
	font-family: "Questrial", sans-serif;
	font-size: 10px;
	font-weight: 500;
	color: #444;
	text-decoration: none;
	
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover：ブランドカラーへの変化 */
.jg-sec-nav__item:hover {
	color: #fff;
	background: #e91e63; /* ブランドピンク */
	border-color: #e91e63;
	transform: scale(1.15);
	box-shadow: 0 6px 16px rgba(233, 30, 99, 0.3);
}

/* 現在地（アクティブ） */
.jg-sec-nav__item.is-current {
	color: #fff;
	background: #000;
	border-color: #000;
	transform: scale(1.1);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* モバイル対応 */
@media (max-width: 768px) {
	.jg-sec-nav {
		right: 12px;
		gap: 8px;
	}
	.jg-sec-nav__item {
		width: 30px;
		height: 30px;
		font-size: 9px;
	}
	/* モバイルでのhover変形を抑制 */
	.jg-sec-nav__item:hover {
		transform: none;
	}
	.jg-sec-nav{
		width:100%;
		top:30px;
		right:0;
		display:flex;
		flex-direction:row;
		justify-content:center;
	}
}


/**************************************************
 *	セクションパーツ（共通 ＋ Step-1：注文の流れ）
 **************************************************/

/* 1. 共通セクション設定
-------------------------------------*/
.jg-section {
    margin-bottom: 120px;
    padding: 0 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* セクションヘッダー：SEOと視認性を重視 */
.jg-section__header {
    text-align: center;
    margin-bottom: 60px;
}

.jg-section__title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    border-bottom: none; /* 下線を廃止し、Step表記でアクセント */
}

/* Step-X という小さな補足 */
.jg-section__title-step {
    display: block;
    font-size: 50px;
	font-family: "Montserrat", sans-serif;
	font-weight:300;
    color: #e91e63; /* テーマカラーのピンク */
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.jg-section__title-label {
    display: block;
    color: #333;
}

.jg-section__lead {
    font-size: 16px;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Step-1：ステップリスト
-------------------------------------*/
.jg-step-list {
    padding: 0;
    margin: 0;
    position: relative;
}

/* 垂直の進行線（PC・タブレット用） */
@media (min-width: 769px) {
	.jg-step-list::before {
		content: "";
		position: absolute;
		left: 30px;
		top: 90px;
		bottom: 90px;
		width: 2px;
		background: #eee;
		z-index: 1;
	}
}

.jg-step-list__item {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
	gap:25px;
    z-index: 2;
}

.jg-step-list__item:last-child {
    margin-bottom: 0;
}

/* 数字バッジ：正円を維持しつつスッキリさせる */
.jg-step-list__number {
    flex: 0 0 60px;
    height: 30px;
    background: #fff;
    border: 2px solid #e91e63;
    color: #e91e63;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
	font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(233, 30, 99, 0.1);
}

/* コンテンツエリア：テキスト量に応じて柔軟に広がる */
.jg-step-list__content {
	height:150px;
    flex: 1;
    background: #fdfdfd;
    padding: 20px 25px;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
	display:flex;
	flex-wrap:nowrap;
	flex-direction:column;
	justify-content:center;
}

.jg-step-list__item:hover .jg-step-list__content {
    transform: translateX(5px);
    background: #fff;
    border-color: #e91e63;
}

.jg-step-list__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #222;
    border-bottom: none; /* 以前の下線を廃止 */
    padding-bottom: 0;
}

.jg-step-list__text {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* レスポンシブ（スマホ） */
@media (max-width: 768px) {
    .jg-section { margin-bottom: 80px; }
    
    .jg-section__title { font-size: 26px; }
    
    .jg-step-list__item {
        flex-direction: column; /* 縦並びにして可読性を確保 */
		gap:20px;
    }
    
    .jg-step-list__number {
        flex:0 0 30px;
		padding:5px;
    }
    
    .jg-step-list__content {
        width: 100%;
        padding: 15px;
    }
}


/**************************************************
 * 02：プリントデザイン ＆ 入稿
 **************************************************/

/* 1. 情報ボックス（完全版下の説明）
-------------------------------------*/
.jg-info-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.jg-info-box__title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

.jg-info-box__lead {
    font-size: 14px;
    color: #888;
    text-align: center;
    margin-bottom: 30px;
}

/* チェックリスト（jg-check-list）*/
.jg-check-list {
    list-style: none;
    padding: 0;
    max-width: 600px;
    margin: 0 auto 30px;
}

.jg-check-list__item {
    padding: 12px 0 12px 35px;
    position: relative;
    border-bottom: 1px solid #f5f5f5;
    font-size: 16px;
    color: #444;
}

.jg-check-list__item::before {
    content: "✔";
    position: absolute;
    left: 5px;
    color: #e91e63;
    font-weight: bold;
    font-size: 18px;
}

.jg-check-list__item:last-child {
    border-bottom: none;
}

.jg-text-remarks {
    text-align: center;
    font-size: 13px;
    background: #fff5f8;
    padding: 10px;
    border-radius: 4px;
    margin-top: 20px;
}

/* 2. リンクグリッド（アクション分岐）
-------------------------------------*/
.jg-link-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.jg-link-card {
    flex: 1;
    min-width: 300px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* リンクカードタイトル（矢印アイコン）*/
.jg-link-card__title {
    background: #f8f8f8 url(../img/print-arrow.png) center center no-repeat;
    background-size: 60px auto;
    padding: 50px 20px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #eee;
    color: #333;
}
.jg-link-card__body {
    padding: 30px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.jg-link-card__text {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    text-align: center;
    line-height: 1.6;
}

/* デザインサポートカード（強調）*/
.jg-link-card--support {
    border-style: dashed;
    background: #fafafa;
}

.jg-link-card--support .jg-link-card__title {
    background-color: #fff5f8;
}

/* 3. ボタンパーツ（jg-btn）
-------------------------------------*/
.jg-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    padding: 15px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: center;
    box-sizing: border-box;
}

.jg-btn__main {
    font-size: 16px;
    font-weight: 700;
    display: block;
}

.jg-btn__sub {
    font-size: 11px;
    opacity: 0.8;
    display: block;
    margin-top: 2px;
}

/* ボタン：プライマリ（黒 → ピンク）*/
.jg-btn--primary {
    background: #333;
    color: #fff !important;
    border: none;
}

.jg-btn--primary .jg-btn__main,
.jg-btn--primary .jg-btn__sub {
    color: #fff;
}

.jg-btn--primary:hover {
    background: #e91e63;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);
}

/* ボタン：セカンダリ（白 × 黒）*/
.jg-btn--secondary {
    background: #fff;
    color: #333;
    border: 2px solid #333;
}

.jg-btn--secondary:hover {
    border-color: #e91e63;
    color: #e91e63;
    transform: translateY(-2px);
}

/* ボタン：アウトライン */
.jg-btn--outline {
    background: transparent;
    border: 1px solid #ccc;
    color: #666;
}

.jg-btn--outline:hover {
    background: #fff;
    border-color: #e91e63;
    color: #e91e63;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.jg-btn--outline:hover .jg-btn__main,
.jg-btn--outline:hover .jg-btn__sub {
    color: #e91e63;
}

@media (max-width: 768px) {
    .jg-info-box { padding: 25px 15px; }
    .jg-link-card { min-width: 100%; }
}

/**************************************************
 * 03：デザイン制作サポート
 **************************************************/

/* 情報ボックス（jg-info-box）
-------------------------------------*/
.jg-info-box {
    background: #fff;
    border: 1px solid #eee;
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.jg-info-box__title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

.jg-info-box__lead {
    font-size: 14px;
    color: #888;
    text-align: center;
    margin-bottom: 30px;
}

/* チェックリスト（jg-check-list）*/
.jg-check-list {
    list-style: none;
    padding: 0;
    max-width: 650px;
    margin: 0 auto 35px;
}

.jg-check-list__item {
    padding: 12px 0 12px 35px;
    position: relative;
    border-bottom: 1px solid #f5f5f5;
    font-size: 16px;
    color: #444;
    line-height: 1.6;
}

.jg-check-list__item::before {
    content: "✔";
    position: absolute;
    left: 5px;
    color: #e91e63;
    font-weight: bold;
    font-size: 18px;
}

/* “できない”項目の強調（元データの none を継承） */
.jg-check-list__item--no {
    color: #999;
}
.jg-check-list__item--no::before {
    content: "✖";
    color: #bbb;
}

/* サポート詳細（jg-support-details）
-------------------------------------*/
.jg-support-details {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 30px 25px;
    margin-top: 40px;
}

.jg-support-details__title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 25px;
}

/* 料金・キャンペーンの2カラム */
.jg-support-details__offer {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

/* 料金ボックス */
.jg-support-price-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px 25px;
    text-align: center;
    min-width: 240px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.03);
}

.jg-support-price-box__label {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.jg-support-price-box__value {
    font-size: 26px;
    font-weight: 700;
    color: #e91e63;
    margin-bottom: 10px;
}

.jg-support-price-box__value span {
    font-size: 32px;
}

/* キャンペーンボックス */
.jg-support-campaign {
    background: #fff5f8;
    border: 1px solid #f8c6d5;
    border-radius: 10px;
    padding: 20px 25px;
    text-align: center;
    min-width: 240px;
}

.jg-support-campaign__badge {
    display: inline-block;
    background: #e91e63;
    color: #fff;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.jg-support-campaign__text {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}

/* 説明文 */
.jg-support-details__text {
    text-align: center;
    font-size: 15px;
    color: #555;
    margin-bottom: 25px;
}

/* 注意書き */
.jg-support-details__note {
    text-align: center;
    font-size: 13px;
    color: #999;
    margin-top: 10px;
}

/* CTAボタン */
.jg-support-details__cta {
    text-align: center;
    margin-top: 20px;
}
.jg-support-details__cta .jg-btn {
    margin-left: auto;
    margin-right: auto;
}

/* レスポンシブ
-------------------------------------*/
@media (max-width: 768px) {
    .jg-info-box { padding: 25px 15px; }

    .jg-support-details {
        padding: 25px 15px;
    }

    .jg-support-details__offer {
        flex-direction: column;
        align-items: center;
    }

    .jg-support-price-box,
    .jg-support-campaign {
        width: 100%;
        max-width: 350px;
    }
}


/**************************************************
 * 04：プリントの種類 ＆ ギャラリー
 **************************************************/

/* プリント技法解説（jg-print-type）
-------------------------------------*/
.jg-print-type {
    margin-bottom: 80px;
}

.jg-print-type__group-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px;
}

.jg-print-type__desc {
    text-align: center;
    font-size: 15px;
    color: #666;
    margin-bottom: 40px;
}

/* 技法グリッド */
.jg-print-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
    padding: 0;
}

.jg-print-grid__item {
    flex: 1 0 calc(33.333% - 20px);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.jg-print-grid__item:hover {
    border-color: #e91e63;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.jg-print-grid__body {
    padding: 25px;
}

.jg-print-grid__title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #333;
    border-left: 4px solid #e91e63;
    padding-left: 12px;
    line-height: 1.2;
}

.jg-print-grid__text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}
/* スペック情報ブロック（概要と区切る） */
.jg-print-grid__feature {
    display: block;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px dotted #ddd;
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

/* スペックラベル（質感・用途・メリットなど） */
.jg-print-grid__feature-label {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: #e91e63; /* テーマカラーのピンク */
    padding: 2px 6px;
    border-radius: 3px;
    margin-bottom: 6px;
    margin-right: 4px;
    line-height: 1.2;
    vertical-align: middle;
    letter-spacing: 0.05em;
}

/* タイトル内の補足（DTGなど）を整える */
.jg-print-grid__title span {
    font-size: 0.7em;
    font-weight: 500;
    color: #f36;
    margin-left: 5px;
	display:block;
}


/**************************************************
 * 5：プリント実績（jg-print-examples）
 **************************************************/

/* ギャラリーグリッド */
.jg-example-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* PCは5枚並び */
    gap: 15px;
    list-style: none;
    padding: 0;
}

.jg-example-figure {
    margin: 0;
    text-align: center;
}

/* 画像ラッパー：ホバー演出の土台 */
.jg-example-img-wrap {
    overflow: hidden;
    border-radius: 8px;
    background: #f0f0f0;
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    margin-bottom: 10px;
    border: 1px solid #eee;
}

.jg-example-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.jg-example-figure:hover img {
    transform: scale(1.1); /* ホバーでズーム */
}

.jg-example-caption {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    letter-spacing: 0.1em;
}

/* レスポンシブ
-------------------------------------*/
@media (max-width: 1024px) {
    .jg-example-grid { grid-template-columns: repeat(3, 1fr); }
    .jg-print-grid__item { flex: 1 0 calc(50% - 20px); }
}

@media (max-width: 768px) {
    .jg-print-grid__item { flex: 1 0 100%; }
    .jg-example-grid { grid-template-columns: repeat(2, 1fr); }
    .jg-print-examples__title { font-size: 22px; }
}


/**************************************************
 * 06：プリント価格（jg-section--price）
 **************************************************/

/* セクション内の余白微調整（他セクションと統一） */
.jg-section--price .jg-price {
	margin-top: 20px;
}

/* 価格ブロック全体 */
.jg-price {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 30px 25px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* 見出し部分 */
.jg-price__header {
	text-align: center;
	margin-bottom: 20px;
}

.jg-price__title {
	font-size: 22px;
	font-weight: 700;
	color: #333;
	margin: 0 0 8px;
}

.jg-price__sub {
	font-size: 13px;
	color: #666;
	line-height: 1.6;
	margin: 0 auto;
	max-width: 820px;
}

/* テーブルラッパー：横スクロール対応 */
.jg-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 10px;
}

/* 価格テーブル */
.jg-price-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 860px; /* スマホで無理に潰れないように */
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
	overflow: hidden; /* 角丸を効かせる */
}

/* ヘッダー行 */
.jg-price-table thead th {
	background: #f7f7f7;
	color: #333;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	padding: 14px 10px;
	border-bottom: 1px solid #eee;
	white-space: nowrap;
}

/* 行見出し（左列） */
.jg-price-table tbody th[scope="row"] {
	background: #fcfcfc;
	color: #333;
	font-size: 13px;
	font-weight: 700;
	text-align: left;
	padding: 14px 12px;
	border-bottom: 1px solid #f0f0f0;
	white-space: nowrap;
}

/* 数値セル */
.jg-price-table tbody td {
	text-align: center;
	font-size: 14px;
	color: #333;
	padding: 14px 10px;
	border-bottom: 1px solid #f0f0f0;
	white-space: nowrap;
}

/* 縦罫線（軽く） */
.jg-price-table thead th + th,
.jg-price-table tbody td,
.jg-price-table tbody th[scope="row"] + td {
	border-left: 1px solid #f2f2f2;
}

/* 最終行のボーダーを消す */
.jg-price-table tbody tr:last-child th,
.jg-price-table tbody tr:last-child td {
	border-bottom: none;
}

/* ホバーで行を追いやすく */
.jg-price-table tbody tr:hover th,
.jg-price-table tbody tr:hover td {
	background: #fff5f8; /* うっすらピンク */
}

/* colspn行（説明が長い行）の読みやすさ */
.jg-price-table tbody td[colspan] {
	text-align: left;
	white-space: normal;
	line-height: 1.6;
	padding: 14px 14px;
}

/* テーブル内注記 */
.jg-price-table__note {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #777;
}

/* 価格に関する注意事項 */
.jg-price-notes {
	margin-top: 18px;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 16px 18px;
}

.jg-price-notes__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jg-price-notes__item {
	position: relative;
	padding-left: 18px;
	font-size: 13px;
	color: #555;
	line-height: 1.7;
	margin: 6px 0;
}

.jg-price-notes__item::before {
	content: "※";
	position: absolute;
	left: 0;
	top: 0;
	color: #e91e63;
	font-weight: 700;
}

/* スマホ最適化 */
@media (max-width: 768px) {
	.jg-price {
		padding: 22px 14px;
	}

	.jg-price__title {
		font-size: 20px;
	}

	.jg-price__sub {
		font-size: 12px;
	}

	/* スクロールできることが分かるように余白 */
	.jg-table-wrapper {
		padding-bottom: 6px;
	}

	/* テーブルの文字を少しだけ詰める */
	.jg-price-table thead th,
	.jg-price-table tbody th[scope="row"],
	.jg-price-table tbody td {
		padding: 12px 8px;
		font-size: 13px;
	}
}



/**************************************************
 *	07: ご注文の前に（決定版CSS）
 **************************************************/

/* リスト全体のレイアウト：PCでは2カラム、スマホでは1カラム */
.jg-notice__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
}

/* 各注意点項目のボックス */
.jg-notice__item {
    background: #fff;
    border: 1px solid #eee;
    padding: 30px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* 項目タイトル */
.jg-notice__item-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 15px 0;
    color: #222;
    line-height: 1.4;
    display: flex;
    align-items: center;
}

/* タイトル前のアクセントドット */
.jg-notice__item-title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #f36;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 本文テキスト */
.jg-notice__item-text {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    margin: 0;
}

/* テキスト内の強調（strongタグ用） */
.jg-notice__item-text strong {
    color: #d00;
    font-weight: 800;
    background: linear-gradient(transparent 70%, #ffdce5 70%);
}

/* レスポンシブ調整（タブレット以下） */
@media (max-width: 900px) {
    .jg-notice__grid {
        grid-template-columns: 1fr; /* 1列にする */
        gap: 15px;
    }
    
    .jg-notice__item {
        padding: 20px;
    }
    
    .jg-notice__item-title {
        font-size: 16px;
    }
}

/* 共通パーツ（もし未設定なら） */
.jg-section__number {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 900;
    color: #f36;
    display: block;
    text-align: center;
    margin-bottom: 5px;
}
.jg-section__title-text {
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 800;
    color: #222;
    text-align: center;
    display: block;
}

/**************************************************
 * 08：無料お見積り（sec-8）
 **************************************************/

/* セクションヘッダー余白 */
.jg-section--estimate .jg-section__header {
	margin-bottom: 55px;
}

/* リード内 strong を自然に強調（やりすぎない） */
.jg-section--estimate .jg-section__lead strong {
	color: #e91e63;
	font-weight: 800;
}

/* 全体ラッパ */
.jg-section--estimate .jg-estimate {
	max-width: 1000px;
	margin: 0 auto;
}

/**************************************************
 * サブ：チェックリスト
 **************************************************/

/* チェックリストボックス（サブ扱いなので “薄いカード”） */
.jg-section--estimate .jg-estimate__checklist {
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 14px;
	padding: 30px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.03);
	margin-bottom: 28px;
}

/* 見出し */
.jg-section--estimate .jg-estimate__checklist-title {
	margin: 0 0 22px;
	text-align: center;
	font-size: 20px;
	font-weight: 800;
	color: #333;
	letter-spacing: 0.02em;
}

/* 2カラムのカードグリッド */
.jg-section--estimate .jg-request-checklist__list {
	list-style: none;
	padding: 0;
	margin: 0;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

/* カード */
.jg-section--estimate .jg-request-checklist__item {
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: 12px;
	padding: 18px 18px 16px;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ほんのりホバー（PCだけで自然に） */
@media (hover: hover) {
	.jg-section--estimate .jg-request-checklist__item:hover {
		transform: translateY(-2px);
		border-color: rgba(233, 30, 99, 0.35);
		box-shadow: 0 10px 18px rgba(0,0,0,0.06);
	}
}

/* 各カード見出し */
.jg-section--estimate .jg-request-checklist__title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 800;
	color: #222;
	position: relative;
	padding-left: 30px;
	line-height: 1.35;
}

/* チェックアイコン */
.jg-section--estimate .jg-request-checklist__title::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff5f8;
	border: 1px solid rgba(233, 30, 99, 0.25);
	color: #e91e63;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 900;
	padding-top:3px;
}

/* 【例】の表示を “入力欄っぽく” */
.jg-section--estimate .jg-request-checklist__value {
	margin: 0 0 8px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px dashed #e6e6e6;
	background: #fcfcfc;
	color: #e91e63;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.6;

	/* コピーしやすい雰囲気 */
	word-break: break-word;
}

/* 注釈 */
.jg-section--estimate .jg-request-checklist__note {
	margin: 0;
	font-size: 12px;
	color: #777;
	line-height: 1.6;
}

/**************************************************
 * CTA（ここが主役）
 **************************************************/

.jg-section--estimate .jg-request-checklist__cta {
	margin-top: 18px;
	padding-top: 22px;
	border-top: 1px solid #eee;

	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* CTAのボタンを揃える */
.jg-section--estimate .jg-request-checklist__cta .jg-btn {
	width: 100%;
	max-width: 420px;
}

/* 大ボタン（primary）を一段強く */
.jg-section--estimate .jg-btn--large {
	padding: 18px 22px;
	border-radius: 999px;
}

/* ラベル（上の小文字） */
.jg-section--estimate .jg-btn__label {
	display: block;
	font-size: 12px;
	opacity: 0.9;
	margin-bottom: 3px;
}

/* メイン文字 */
.jg-section--estimate .jg-btn--large .jg-btn__main {
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.02em;
}

/* secondary をCTAらしく */
.jg-section--estimate .jg-btn--secondary {
	border-width: 2px;
}

/**************************************************
 * レスポンシブ
 **************************************************/
@media (max-width: 900px) {
	.jg-section--estimate .jg-request-checklist__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.jg-section--estimate .jg-estimate__checklist {
		padding: 20px 14px;
	}

	.jg-section--estimate .jg-estimate__checklist-title {
		font-size: 18px;
		margin-bottom: 18px;
	}

	.jg-section--estimate .jg-request-checklist__item {
		padding: 16px 14px;
	}

	.jg-section--estimate .jg-request-checklist__cta {
		padding-top: 18px;
		margin-top: 14px;
	}

	.jg-section--estimate .jg-request-checklist__cta .jg-btn {
		max-width: 100%;
	}
}