@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #5D9AB2;
	--accent-color: #BF6A7A;
	--dark-main-color: #2B5566;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
	--ink:#1d2b36;
    --muted:#4b778b;
    --sunday:#c64232;
    --line:#e5e7ea;
    --maxw:950px;
}

/* 基本設定： フォントサイズ */
@media (max-width: 599px) {
	:root {
		font-size: 14px;
	}
}

@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 16px;
	}
}

@media (min-width: 800px) {
	:root {
		font-size: 18px;
	}
}

body {font-size: 16px;}


/* 基本設定： ページ全体 */
body {
	margin: 0;
	font-family: 'メイリオ',
		'Hiragino Kaku Gothic Pro', 
		sans-serif;
}


/* コンテンツA： ヒーローイメージ */
.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 450px;
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(img/workshop.jpg); /*画像に半透明の黒を載せてる */
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
	text-align: center;
}

.conA.compact {
	height: 450px;
	min-height: 0;
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(img/balloon.jpg);
}

.conA h1 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 15vw;
	letter-spacing: 0.2em;
	margin-left: 0.2em;
}

.conA h2 {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Hiragino Mincho Pro",
               "Yu Mincho", "YuMincho", "MS PMincho", serif;
  font-weight: 300;         /* 細め（Webフォントで有効） */
  letter-spacing: 0.2em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt"; /* 字間がきれいに */
  font-size:18px;
}

.conA img {
	width: 30%;
}



 /* デスクトップ版（768px以上のサイズ） */
@media (min-width: 768px) {
	.conA h1 {
		font-size: 115px;
}
	.conA h2 {
		font-size: 29px;
		letter-spacing: 0.4em;
}
}

/* コンテンツB：アイコン上のテキスト */
.of .container {
	max-width: 800px;
	max-width: var(--middle-width);
	margin-left: auto;
	margin-right: auto;
	padding: 30px 10px;
}

.of h1 {
	padding-left: 0.5rem;
	border-left: solid 0.75rem #BF6A7A;
	border-left: solid 0.75rem var(--accent-color);
	font-size: 2rem;
}

.of p {
	font-size: 1rem;
	padding-top: 30px;
	line-height: 2;
}

.of img {
	max-width: 100%;
}


/* コンテンツB： 概要（アイコン＋テキスト） */
.conB .container {
	padding-top: 80px;
	padding-bottom: 20px;
}
.conB .text {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 60px;
	text-align: center;
}

.conB h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}
.conB p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
	word-break: keep-all;      /* 単語途中での改行を避ける */
	line-break: strict;        /* 日本語の禁則処理を厳格に */
	overflow-wrap: break-word; /* 英語長文は改行する */
}
.conB a {
	color: var(--main-color, #5D9AB2);
	text-decoration: none;
}

.conB a:hover	{
	text-decoration: underline;
}
.conB .icon {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 40px;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
	background-color: var(--icon-bk-color,  #ddd);
	color: var(--icon-color, #fff);
}


 /* デスクトップ版（768px以上のサイズ） */
@media (min-width: 768px) {
.conB .container {
	display: flex;
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin-right: auto;
}
.conB .text {
	flex: 1;
}
}

 /* 催事情報 */
.conB2 .container {
	padding-top: 2px;
}
.conB2 .text {
	padding: 20px;
}
.conB2 h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}
.conB2 p {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}
.conB2 a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #BF6A7A;
	background-color: var(--accent-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}
.conB2 a:hover	{
	background-image: linear-gradient(
		rgba(255,255,255,0.2),
		rgba(255,255,255,0.2)
	);
}
.conB2 .photo {
	min-height: 200px;
	background-image: url(img/saijiimg.jpg);
	background-position: center;
	background-size: cover;
}

/* デスクトップ版（768px以上のサイズ） */
@media (min-width: 768px) {
	.conB2 .container {
		display: flex;
		flex-direction: row-reverse;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.conB2 .photo {
		flex: 0 0 400px;
	}

	.conB2 .text {
		flex: 1;
		padding: 50px;
	}
}

/* ===== 事業紹介（横並び） ===== */
.biz {
  background: #fff;
  padding: 60px 16px 70px;/* 上、左右、下 */
  border-top: 1px solid var(--gray-color, #e5e7ea);
}
.biz .container {
  max-width: var(--large-width, 1000px);
  margin-left: auto;
  margin-right: auto;
}
.biz__title {
  margin: 0 0 36px;
  text-align: center;
  font-size: 1.6rem;
  color: #333;
  position: relative;
}
.biz__title::after{
  content:"";
  display:block;
  width:60px; height:3px;
  margin:10px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--main-color, #5D9AB2), var(--accent-color, #BF6A7A));
}
.biz__list{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.biz__item a{
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: center;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--gray-color, #e5e7ea);
  border-radius: 14px;
  padding: 16px 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 150px;
}
.biz__item a:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--main-color, #5D9AB2) 50%, #ffffff);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
}
.biz__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #000;   /* 黒一色 */
  color: #fff;        /* アイコンは白 */
  flex-shrink: 0;
}
.biz__icon i {
  font-size: 22px;
  line-height: 1;
}


.biz__label{
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #2d3a41;
}

/* スマホ微調整 */
@media (max-width: 480px){
  .biz {
  padding: 28px 12px
  ;
}
  .biz__label{ font-size: .92rem; }
}


/* 会社沿革 */
.conB3 {
	background-color: #5D9AB2;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
}

.conB3 .text {
	padding: 20px;
}

.conB3 h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}

.conB3 p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}

.conB3 a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #BF6A7A;
	background-color: var(--accent-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}

.conB3 a:hover	{
	background-image: linear-gradient(
		rgba(255,255,255,0.2),
		rgba(255,255,255,0.2)
	);
}

.conB3 .photo {
	min-height: 200px;
	background-image: url(img/honsya.jpg);
	background-position: center;
	background-size: cover;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.4rem;
  position: relative;
}
.timeline::before {
  content:"";
  position: absolute;
  left: .55rem;
  top: .25rem;
  bottom: .25rem;
  width: 2px;
  background: rgba(255,255,255,0.4);
}
.timeline__item {
  position: relative;
  margin: 0 0 20px 0;
  padding-left: .8rem;
}
.timeline__item::before {
  content:"";
  position: absolute;
  left: -1.2rem;
  top: .35rem;
  width: 12px;
  height: 12px;
  border: 3px solid var(--main-color);
  background: var(--accent-color);
  border-radius: 999px;
}
.timeline__year {
  display: inline-flex;
  align-items: center;
  gap: .4ch;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-radius: 999px;
  padding: .3rem .8rem;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  margin-right: .6rem;
}
.timeline__month {
  font-size: .85em;
}
.timeline__meta {
  display: inline-block;
  opacity: 0.8;
  font-size: .9rem;
  margin: .2rem 0 .4rem 0;
}
.timeline__content {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: .7rem 1rem;
  font-size: 14px;
  line-height: 1.6;
}

/* デスクトップ版（768px以上のサイズ） */
@media (min-width: 768px) {
  .conB3 .container {
    display: flex;
    max-width: 1000px;
    max-width: var(--large-width);
    margin-left: auto;
    margin-right: auto;
  }

  .conB3 .photo {
    flex: 3;
    margin-top: 40px;      /* 上の余白を追加 */
    margin-bottom: 40px;   /* 下の余白を追加 */
  }

  .conB3 .text {
    flex: 2;
    padding: 50px;
  }
}


/* スマホ（767px以下）のときだけ別の写真に切り替え */
@media (max-width: 767px) {
  .conB3 .photo {
    background-image: url(img/honsya2.jpg); 
  }
}

/* コンテンツC： 概要（画像＋テキスト：逆配置）*/
.conC {
	background-color: #5D9AB2;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
}
.conC .container {
	padding-top: 2px;
}
.conC .text {
	padding: 20px;
}
.conC h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}
.conC p {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}

.conC .photo {
	min-height: 200px;
	background-image: url(img/jewelr01.jpg);
	background-position: center;
	background-size: cover;
}

/* デスクトップ版（768px以上のサイズ） */
@media (min-width: 768px) {
	.conC .container {
		display: flex;
		flex-direction: row-reverse;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.conC .photo {
		flex: 0 0 400px;
	}

	.conC .text {
		flex: 1;
		padding: 50px;
	}
}

/* ====== conD（取り扱い商品画像一覧） 全体 ====== */
.conD {
  background-color: #fff; /* 背景は白 */
  padding: 50px 20px;
}

.conD .text > h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 40px;
  color: #333;
  position: relative;
}

.conD .text > h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #5aa1b7, #bf6a7a);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ====== リストのレイアウト ====== */
.conD ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ====== 各カード ====== */
.conD li {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.conD li:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.conD a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* ====== 画像部分 ====== */
.conD .photo {
  flex: 1 1 auto;
  background-position: center;
  background-size: cover;
  height: 180px;
  transition: transform 0.4s ease;
}

.conD li:hover .photo {
  transform: scale(1.05);
}

/* ====== テキスト部分 ====== */
.conD .text .text {
  padding: 16px 18px;
  background: #fff;
}

.conD .text .text h2 {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.conD li:hover .text .text h2 {
  color: #5aa1b7; /* アクセントカラーに変化 */
}

/* ====== レスポンシブ ====== */
@media (min-width: 768px) {
  .conD .photo {
    height: 200px;
  }
  .conD .text .text h2 {
    font-size: 1.1rem;
  }
  .conD ul {
    grid-template-columns: repeat(4, 1fr);
  }
  .conD {
  	max-width: 1000px;
  	margin-left: auto;                     /* 左右中央寄せ */
    margin-right: auto;
  }
}



/* =================================== 協会バナー：横並び 450px 固定幅 ===== */
.association-banners .container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;           /* 画面が狭いときは折り返し */
  justify-content: center;   /* 中央寄せ */
  gap: 20px;
}

.association-banners .banner-link {
  display: block;
  width: 450px;             
  flex: 0 0 450px;           
}


.association-banners .banner-link img {
  width: 100%;
  height: auto;
  max-width: none;           
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* スマホで窮屈なら、1カラムに（任意） */
@media (max-width: 480px) {
  .association-banners .banner-link {
    width: min(100%, 450px);
    flex-basis: min(100%, 450px);
  }
}

/* =========================================== 法的情報 ===== */
.legal-info {
  padding: 28px 16px 40px;
  background: linear-gradient(180deg, #fafbfd, #f6f8fb);
}

.legal-info .container {
  max-width: var(--large-width, 1000px);
  margin: 0 auto;
}

.legal-card {
  background: #fff;
  border: 1px solid var(--line, #e5e7ea);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: clamp(18px, 3vw, 28px);
}

/* 行ごとのレイアウト（PCは横並び） */
.legal-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
}

.legal-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #0f172a;               /* 深い紺（黒より柔らかい） */
  color: #fff;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.legal-icon i { font-size: 24px; }

/* タイトル＆本文 */
.legal-title {
  margin: 2px 0 6px;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 800;
  color: var(--ink, #1d2b36);
  letter-spacing: .02em;
}
.legal-text {
  margin: 0;
  color: #2f3c43;
  line-height: 1.8;
  font-size: 14px;
}

/* 区切り線（カード内） */
.legal-divider {
  border: none;
  height: 1px;
  margin: clamp(14px, 3vw, 20px) 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,.08) 10%,
    rgba(0,0,0,.08) 90%,
    transparent 100%
  );
}

/* リンク */
.legal-link {
  color: var(--main-color, #5D9AB2);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  margin-left: .4em;
  transition: opacity .2s ease, border-color .2s ease;
}
.legal-link:hover { opacity: .8; border-color: transparent; }

/* レスポンシブ：モバイルは縦並び＆アイコン少し小さく */
@media (max-width: 560px) {
  .legal-item {
    grid-template-columns: 48px 1fr;
    gap: 12px;
  }
  .legal-icon {
    width: 48px; height: 48px;
  }
  .legal-icon i { font-size: 20px; }
}





/* --------------------------------------------------------------------------------------------------------------------------フッター */
footer {
	color: #fff;
	color: var(--text-bright-color);
	background-color: #2B5566;
	background-color: var(--dark-main-color);
}
footer .container {
	padding: 40px 20px;
}
/* デスクトップ版（768px以上のサイズ） */
@media (min-width: 768px) {
	footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.footA {
		flex: 0 0 40%;
	}

	.footB {
		flex: 0 0 60%;
	}

	.footC {
		flex: 0 0 100%;
	}
}


/* フッターA： サイト情報 */
.footA {
	margin-bottom: 30px;
}
.footA h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;
	letter-spacing: 0.2em;
}
.footA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
}
.footA a {
	color: inherit;
	text-decoration: none;
}

/* ====== footB: フッターメニュー（新バージョン） ====== */
.footB {
  margin: 30px 0;
}

.footB ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 中央揃え */
  gap: 20px;               /* 各リンク間の余白 */
  padding: 0;
  margin: 0;
  list-style: none;
}

.footB a {
  display: inline-block;
  padding: 8px 20px;
  color: #fff;
  color: var(--text-bright-color);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.footB a:hover {
  background-color: rgba(255,255,255,0.15); /* ホバー時に淡い背景 */
  transform: translateY(-2px);              /* 浮き上がり感 */
}

/* フッターC： コピーライト */
.footC {
	font-size: 12px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}

/* フッターD： コピーライト */
.footD {
	margin-top: 20px;
}
.footD ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footD a {
	display: block;
	margin-right: 8px;
	padding: 0px;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	border: solid 1px currentColor;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
}
.footD a:hover {
	background-color: rgba(0,0,0,0.3);
}

/* --------------------------------------------------------------------------------------------------------------------------ヘッダー */
header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: rgba(255,255,255,0.9);
}
.nohero header {
	position: static;
	border: solid 1px #ddd;
	border-bottom: solid 1px var(--gray-color);
}

/* ヘッダーA: サイト名 */
.headA {
	display: inline-block;
	line-height: 70px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #5D9AB2;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	text-decoration: none;
}

/* ヘッダーB： ナビゲーションメニュー */
.headB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.headB a {
	display: block;
	padding: 15px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
}

.headB a:hover {
	background-color: rgba(0,0,0,0.3);
}

/* デスクトップ版（768px以上のサイズ） */
@media (min-width: 768px) {
	header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.headB ul {
		display: flex;
	}
}


/* ヘッダーC： トグルボタン */

@media (max-width: 767px) {
	/* 小さい画面用の設定 */
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.headC {
		margin-right: 10px;
		padding: 0;
		border: none;
		outline: none;
		background: none;
		font-size: 28px;
		opacity: 0.5;
		cursor: pointer;
	}

	.headC:hover {
		opacity: 0.3;
	}

	.headB {
		display: none;
	}
}

@media (min-width: 768px) {
	/* 大きい画面用の設定 */
	.headC {
		display: none;
	}

	.headB {
		display: block !important;
	}
}

/* -------------------------------------------------------コンテンツページ: 記事 ----------------------------------------------------------*/
/* セクション共通 */
.hero-block {
  position: relative;
  max-width: 950px;
  margin: 0 auto 40px;
  border-radius: 8px;
  overflow: hidden;
}

.hero-block picture img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* 半透明ボックス */
.hero__content-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;               /* 3つ共通の幅 */
  max-width: 600px;         /* 最大幅を固定 */
  padding: 20px;
  background: rgba(255,255,255,0.85);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.hero__content-box h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.hero__content-box p {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: #444;
  line-height: 1.5;
}

/* CTAボタン共通 */
.hero__cta {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(135deg, #5D9AB2, #BF6A7A);
  color: #fff;
  font-weight: bold;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero__cta:hover {
  background: linear-gradient(135deg, #BF6A7A, #5D9AB2);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* ========= ユーティリティ ========= */
.u-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);overflow:hidden;border:0}
:root{
  --ink:#1d2b36; --muted:#4b778b; --line:#e5e7ea;
  --brand:#5D9AB2; --accent:#BF6A7A; --bg:#f7f8fa;
  --radius:16px; --radius-sm:12px; --shadow:0 10px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}

/* ========= 導入セクション ========= */
.kv-lite{
  background: linear-gradient(180deg, rgba(29,43,54,.85), rgba(29,43,54,.6)),
              url(img/workshop.jpg) center/cover no-repeat;
  color:#fff;
  padding: clamp(50px,10vw,120px) 16px;
  text-align:center;
}
.kv-lite__inner{max-width:900px;margin:0 auto}
.kv-lite__eyebrow{letter-spacing:.2em;opacity:.8;margin:0 0 .4rem;font-weight:700}
.kv-lite__title{margin:.2rem 0 1rem;font-size:clamp(22px,4.2vw,40px);line-height:1.3}
.kv-lite__lead{margin:0 auto;max-width:48ch;line-height:1.9;opacity:.95}

  
/* ========= 見出し ========= */
.section-title{
  font-size: clamp(20px,3.2vw,28px);
  margin: 28px auto 18px;
  text-align: center;
  color: var(--ink);
}

/* ========= カードグリッド ========= */
.container{max-width:1000px;margin:0 auto;padding:0 16px}
.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr); /* ★ 2列固定に変更 */
  list-style: none;
  padding: 10px 0 24px;
  margin: 0;
}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex}
.card__link{display:flex;flex-direction:column;color:inherit;text-decoration:none;outline-offset:4px}
.card__link:focus-visible{box-shadow:0 0 0 3px #0002, 0 0 0 6px var(--brand)}
.card__media{position:relative;aspect-ratio:16/9;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.02)}
.card__body{
  padding:18px; display:grid; gap:10px;
}
.card__title{
  font-size: clamp(18px,2.4vw,22px);
  margin: 0 auto;
  color: var(--ink);
  
}
.card__text {
	margin: 30px 10px;           /* 上下 左右 */
	color: #2f3c43;
	line-height: 1.7
}

/* ========= ボタン ========= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* 中央揃え */
  gap: 0.6em;
  line-height: 1;
  text-decoration: none;
  font-weight: 700;
}

/* --- ピル型ボタン --- */
.btn--pill {
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.btn--pill:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

/* --- ソリッドボタン --- */
.btn--solid {
  padding: 14px 22px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
}

/* --- ゴーストボタン --- */
.btn--ghost {
  padding: 14px 22px;
  border-radius: 10px;
  border: 2px solid var(--accent);
  color: var(--accent);
  background: #fff;
}
.btn--ghost:hover {
  background: #fff0;
  box-shadow: inset 0 0 0 999px rgba(191, 106, 122, 0.08);
}

/* --- フォーカス時（アクセシビリティ対応） --- */
.btn:focus-visible {
  outline: 3px solid #0000;
  box-shadow: 0 0 0 3px #0002, 0 0 0 6px var(--accent);
}


/* ========= 問い合わせセクション ========= */
.cta-wide {
  padding: 46px 0;
  background: linear-gradient(135deg, #f6f8fb, #eef4f7);
}

.cta-wide__inner {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.cta-wide__title {
  margin: 0;
  font-size: clamp(20px, 3vw, 26px);
  color: var(--ink);
}

.cta-wide__lead {
  margin: 0 0 12px;
  opacity: 0.8;
}

.cta-wide__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}


/* ========= 低視差・省アニメ派生 ========= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}



/* レスポンシブ */
@media (max-width: 768px) {
  .hero__content-box {
    width: 90%;
    padding: 15px;
  }
  .hero__content-box h2 {
    font-size: 1.3rem;
  }
  .hero__content-box p {
    font-size: 0.9rem;
  }
  .hero__cta {
    font-size: 0.9rem;
    padding: 10px 20px;
  }
  .cards {
    grid-template-columns: 1fr; /* ★ 縦並び */
  }
}

/* スマホ（480px以下） */
@media (max-width: 480px) {
  .kv-lite .kv-lite__lead{
    font-size: 11px !important;
    line-height: 1.7;
  }
}

/* ---------------------------------------------------------------------店舗情報 ---------------------------------------*/
.shop-block{
    padding: clamp(20px,3vw,32px) 12px;
  }

  .shop-wrap{
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr .9fr;
    gap: clamp(20px,4vw,40px);
    align-items: start;
  }

  /* 左カラム */
  .shop-text h2{
    font-size: clamp(24px,3.2vw,36px);
    margin: 0 0 .6rem;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--ink);
  }
  .shop-text p{
    margin: .6rem 0 1rem;
    line-height: 1.9;
    color: #333;
    font-size: clamp(14px,1.7vw,16px);
  }
  .note-line{
    color:#9aa5ad;
    letter-spacing:.1em;
    margin: 1rem 0;
  }

  .shop-meta{
    margin: .2rem 0 1rem;
  }
  .shop-meta > div{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem .6rem;
    margin: .25rem 0;
    font-size: clamp(14px,1.7vw,16px);
  }
  .shop-meta dt{ color:#5a6a73; }
  .shop-meta dd{ margin:0; color:#2f3c43; }

  .shop-notes{
    margin: .6rem 0 0;
    padding-left: 1em;
    display: grid;
    gap: .5rem;
    font-size: clamp(13px,1.6vw,15px);
    color:#2f3c43;
  }
  .shop-notes li{ list-style: "◆ "; }

  /* 右カラム */
 /* 店舗タイトルに縦線 */
.shop-text h2 {
  font-size: clamp(24px, 3.2vw, 36px);
  margin: 0 0 .6rem;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--ink);
  padding-left: 12px;                 /* 左に余白を追加 */
  border-left: 4px solid #e57373;     /* ピンクの縦線 */
}

/* 店舗写真サイズ調整（スマホでも小さめ） */
.shop-photo {
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  max-width: 260px;   /* 写真を常に小さめ固定 */
}

.shop-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* レスポンシブ */
@media (max-width: 900px) {
  .shop-wrap {
    grid-template-columns: 1fr;
    justify-items: center;   /* 中央寄せ */
  }
  .shop-photo {
    margin-top: .2rem;
    margin-left: auto;
    margin-right: auto;
  }
}

  /* カレンダー */
  .calendar{
    padding-top: 6px;
  }
  .cal-head{
    display:flex; justify-content:flex-start; align-items:baseline;
    gap:.6rem; margin: 0 0 .4rem;
  }
  .cal-month{
    font-size: clamp(16px,2vw,18px);
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .06em;
  }

  .cal-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: clamp(10px,2vw,16px);
    padding: 0; margin: 0;
    list-style: none;
  }
  .cal-week{
    font-weight: 700;
    color: var(--muted);
    margin-bottom: .4rem;
    font-size: clamp(14px,1.8vw,18px);
  }
  .cal-week .sun{ color: var(--sunday); }

 /* ベース */
.cal-days li{
  font-size: clamp(16px,2.2vw,22px);
  color: #4f92a8;        /* 平日の色（ベース） */
}
.cal-days li.muted{ opacity:.35; }

/* 土日（ヘッダー＆ボディ） */
.cal-week .sun, .cal-days li.sun { color: #d9534f !important; }
.cal-week .sat, .cal-days li.sat { color: #337ab7 !important; }

/* 定休日（水曜）をJSで .closed 付与したときの例 */
.cal-days li.closed {
  color: #999;
  text-decoration: line-through;
}

  /* レスポンシブ */
  @media (max-width: 900px){
    .shop-wrap{
      grid-template-columns: 1fr;
    }
    .shop-photo{ margin-top: .2rem; }
    .calendar{ padding-top: 10px; }
  } 

/* Googleマップエリア */
.shop-map {
  margin-top: 14px;
  width: 100%;
  max-width: 260px;        /* 写真と同じ幅に揃える */
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.shop-map iframe {
  width: 100%;
  height: 200px;           /* 必要なら調整可 */
  border: 0;
}

/* スマホ時は中央寄せ */
@media (max-width: 900px) {
  .shop-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .shop-map {
    max-width: 320px;     /* スマホでは少し大きめで見やすく */
  }
}


/* -------------------------------------お問い合わせページ：問い合わせ先 --------------------------------------------------------------------*/
.post {
	padding-top: clamp(24px, 4vw, 56px);
}

.contact {
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 20px;
	border: solid 1px var(--gray-color);
	text-align: center;
}
.contact span {
	text-align: center;
	display: inline-block;
	margin-bottom: 20px;
	font-size: 2.2rem;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: conter;
	background-color: #509AB2;
	background-color: var(--main-color);
	color: #fff;
	color: var(--icon-color);
}
.contact h2 {
	font-size: 1.2rem;
	margin-top: 0;
}
.contact a {
	font-size: 1.4rem;
	color: inherit;
	text-decoration: none;
}
.location h2 {
  background-color: var(--main-color);       /* ver(--main-color) → var() */
}
.listB a:hover { opacity: 0.8; 
}

/* デスクトップ版（768px以上のサイズ） */
@media (min-width: 768px) {
.contact-wrap{
	display: flex;
}
.contact {
	flex: 1;
}
.contact:first-child {
	margin-right: 20px;
}
}

/* お問い合わせページ：地図 */
.location iframe {
	width: 100%;
	height: 400px;
	vertical-align: bottom;
}
.location h2 {
	margin: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #509AB2;
	background-color: ver(--main-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 1.5rem;
	text-align: center;
}

/* 記事一覧A */
.listA h1 {
text-align: center;
}
.listA .container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin: 30px auto;
}
.listA article {
	flex: 1 1 300px;
	display: flex;
}

.listA a {
	flex: 1;
	margin: 10px;
	display: block;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	color: inherit;
	text-decoration: none;
}
.listA a:hover {
	opacity; 0.8;
}

.listA .photo {
	min-height: 150px;
	background-position: center;
	background-size: cover;
}
.listA .text {
	margin:10px;
}
.listA h2 {
	font-size: 18px;
}
.listA p {
	font-size: 14px;
	opacity: 0.8;
}


/* 記事一覧B */
.listB h1 {
text-align: center;
}
.listB .container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin: 30px auto;
}
.listB article {
	flex: 1 1 384px;
	display: flex;
}

.listB a {
	flex: 1;
	margin: 10px;
	display: flex;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	color: inherit;
	text-decoration: none;
}
.listB a:hover {
	opacity; 0.8;
}

.listB .photo {
	flex: 2;
	min-height: 0px;
	background-position: center;
	background-size: cover;
}
.listB .text {
	flex: 3;
	margin:10px;
}
.listB h2 {
	font-size: 18px;
}
.listB p {
	font-size: 14px;
	opacity: 0.8;
}
/* デスクトップ版（384px以下のサイズ） */
@media (max-width: 384px) {
	.listB .photo {
	flex: 1;
	}
	.listB p {
	display:none;
	}
}


/* 記事一覧C */
.listC h1 {
text-align: center;
}
.listC .container {
	display: flex;
	flex-wrap: wrap;
	max-width: none;
	margin: 2px auto;
}
.listC article {
	flex: 1 1 250px;
	display: flex;
}

.listC a {
	position: relative;
	flex: 1;
	margin: 2px;
	display: block;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	background-color: currentColor;
	color: inherit;
	text-decoration: none;
}
.listC a:hover {
	opacity: 0.8;
}

.listC .photo {
	min-height: 250px;
	background-position: center;
	background-size: cover;
	opacity: 0.6;
}
.listC .text {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 10px;
	color: #fff;
	color: var(--text-bright-color);
}
.listC h2 {
	margin: 0;
	font-size: 18px;
}
.listC p {
	margin: 0;
	font-size: 14px;
	opacity: 0.8;
}
/* ---------------------------------------------------------------------問い合わせページ-------------------------------------*/

input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
  font: inherit;
  padding: 10px 12px;
  border: 1px solid #d9dfe3;
  border-radius: 8px;
  outline: none;
  transition: box-shadow .2s, border-color .2s;
  background: #fff;
}
textarea{ resize: vertical; }

input:focus, textarea:focus{
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px rgba(93,154,178,.2);
}

.fieldset{
  margin: 0; padding: 10px 12px;
  border: 1px dashed #d9dfe3; border-radius: 8px;
}
.fieldset legend{ font-weight: 700; padding: 0 6px; }
.fieldset label{ margin-right: 12px; font-weight: 600; }

.agree{ font-weight: 600; }

.btn-submit{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 22px;
  background: var(--main-color);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .05s ease, opacity .2s ease, box-shadow .2s ease;
}
.btn-submit:hover{ opacity: .92; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.btn-submit:active{ transform: translateY(1px) scale(.99); }

/* honeypotは不可視 */
.hp-field{ position: absolute; left: -5000px; height: 0; width: 0; overflow: hidden; }

/* レスポンシブ */
@media (max-width: 600px) {
  .contact-wrap {
    flex-direction: column;
    gap: 16px;
  }
}

/* デスクトップ版（1000px以上のサイズ） */
@media (min-width: 1000px) {
	.listC article {
	flex: 1 1 25%;
	}
}



/* ---------------------------------------------------------------------イベント情報ページ-------------------------------------*/

/* ============ 催事ページ ============ */
.events{max-width:1000px;margin:0 auto;padding:24px 16px 80px;box-sizing:border-box;color:#16303b;}
/* タイトル帯（やさしい和モダン） */
/* ============ 催事ページ タイトル背景付き ============ */
/* ヒーロー帯全体 */
.events-hero {
  position: relative;
  height: clamp(240px, 45vw, 380px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: url("img/eventimg.jpg") center/cover no-repeat;
  border-radius: 14px;
  overflow: hidden;
  margin: 24px 0;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}

.events-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

.events-hero__inner {
  position: relative;
  z-index: 2;
  padding: 0 16px;
  max-width: 1000px;
  width: 100%;
}

/* 見出し部分（画像＋タイトル横並び） */
.events-hero__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap; /* モバイルで縦積み */
  margin-bottom: 12px;
}

.events-hero__heading img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.events-hero__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(24px, 5vw, 40px);
  letter-spacing: 0.08em;
  text-shadow: 0 4px 14px rgba(0,0,0,0.6);
  color: #fff;
}

/* サブコピー */
.events-hero__sub {
  display: inline-block;
  padding: .45em 1.4em;
  background: rgba(200,90,43,.85);
  border-radius: 999px;
  font-size: clamp(13px, 2.6vw, 16px);
  font-weight: 700;
  letter-spacing: .12em;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}



/* リード文 */
.events-lead{margin:18px 0 26px;text-align:center;}
.events-lead p{margin:0;line-height:1.9;color:#294b57}

/* カレンダー（レスポンシブ埋め込み） */
.events-cal{margin:10px 0 30px;}
.events-cal__frame{position:relative;width:100%;aspect-ratio:1000/620;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.06);}
.events-cal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.events-cal__note{display:block;margin-top:6px;color:#6b7c86;font-size:12px}

/* セクション見出し */
.events-sec__heading{
  margin:42px 0 14px;text-align:center;color:#2B5566;font-weight:800;
  font-size:clamp(18px,3.2vw,20px);letter-spacing:.2em;position:relative;
}
.events-sec__heading::after{
  content:"";display:block;width:180px;max-width:60%;height:2px;
  margin:10px auto 0;background:linear-gradient(90deg,transparent, #5D9AB2, transparent);
}

/* 催事ブロック */
.event-block{
  display:grid;grid-template-columns: 1.2fr .8fr;gap:18px;
  background:#fff;border:1px solid #e5e7ea;border-radius:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);padding:16px;margin-bottom:24px;
}
.event-block__map iframe{width:100%;height:260px;border:0;border-radius:10px;}
.event-title{margin:.2rem 0 1rem;font-size:clamp(18px,3vw,20px)}
.event-title__link{color:#1f3d48;text-decoration:none;border-bottom:2px solid rgba(93,154,178,.35);padding-bottom:2px}
.event-title__link:hover{opacity:.9}

.event-dl{display:grid;grid-template-columns: 100px 1fr;gap:10px 14px;margin:0}
.event-dl dt{font-weight:700;color:#2B5566}
.event-dl dd{margin:0;color:#294b57;line-height:1.7}
.event-link{color:#BF6A7A;text-decoration:underline}

/* 下部CTAリンク */
.events-cta{margin:32px 0 8px;text-align:left}
.events-cta__lead{font-weight:700;color:#2B5566;margin:0 0 8px}
.events-cta__links{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.events-cta__links a{text-decoration:none;color:#1f3d48;border-bottom:1px dashed rgba(31,61,72,.35)}
.events-cta__links a:hover{opacity:.85}

/* レスポンシブ */
@media (max-width: 900px){
  .event-block{grid-template-columns:1fr;gap:12px}
  .event-block__map iframe{height:220px}
}
@media (max-width: 520px){
  .events{padding:20px 12px 64px}
  .event-dl{grid-template-columns: 90px 1fr}
  .events-cal__frame{aspect-ratio: 16 / 10;}
}


/* ---------------------------------------------------------------------個人情報取り扱いについて-------------------------------------*/

/* ===== ページ見出し（薄グラデの帯） ===== */
.page-head {
  padding: clamp(48px, 8vw, 96px) 16px 28px;
  background: linear-gradient(180deg, rgba(29,43,54,.08), rgba(29,43,54,.02));
  border-bottom: 1px solid var(--gray-color, #e5e7ea);
}
.page-head .container {
  max-width: var(--large-width, 1000px);
  margin: 0 auto;
}
.page-eyebrow {
  margin: 0 0 6px;
  letter-spacing: .18em;
  font-weight: 700;
  color: #6b7a86;
  font-size: 12px;
}
.page-title {
  margin: 0 0 6px;
  font-size: clamp(22px, 3.6vw, 28px);
  color: var(--ink, #1d2b36);
  letter-spacing: .02em;
}
.page-lead {
  margin: 0;
  color: #3a4a54;
  opacity: .9;
  line-height: 1.8;
  font-size: 14px;
}

/* ===== ポリシー本文 ===== */
.policy .container {
  max-width: var(--large-width, 1000px);
  margin: 0 auto;
  padding: 24px 16px 60px;
}
.policy-section { margin: 0 0 26px; }
.policy-h2 {
  margin: 0 0 10px;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 800;
  color: var(--ink, #1d2b36);
  letter-spacing: .02em;
}
.policy p { margin: 0; color: #2f3c43; line-height: 1.9; font-size: 14px; }
.policy p + p { margin-top: .8em; }

.policy-list {
  margin: .6em 0 0;
  padding-left: 1.2em;
  line-height: 1.9;
  color: #2f3c43;
  font-size: 14px;
}
.policy-list li { margin: .2em 0; }

/* 区切り */
.policy-divider {
  border: 0;
  height: 1px;
  margin: 18px 0 26px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.08) 12%, rgba(0,0,0,.08) 88%, transparent);
}

/* モバイル微調整 */
@media (max-width: 480px){
  .page-lead { font-size: 13px; line-height: 1.8; }
}


















/* アレンジ: ヘッダーの色 */
.head-color {
	background-color: #5D9AB2;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
}

.head-color .headA {
	background-color: transparent;
	color: inherit;
}

.head-color .headC {
	color: inherit;
}

/* アレンジ: ヘッダーとヒーローイメージを一体化 */
.head-hero {
	background-color: transparent;
	color: #fff;
	color: var(--text-bright-color);
}

.head-hero .headA {
	background-color: transparent;
	color: inherit;
}

.head-hero .headC {
	color: inherit;
	opacity: 1;
}

@media (max-width: 767px) {
	.head-hero .headB {
	background-color: rgba(0,0,0,0.6);
	}
}


/* アレンジ: ヘッダーを画面上部に固定 */
.head-fixed,
.nohero .head-fixed {
	position: fixed;
}
.nohero .head-fixed + * {
	margin-top: 70px;
}


/* アレンジ: 関連記事メニュー */
.related {
	background-color: #5D9AB2;
	background-color: var(--main-color);
	padding: 30px 0;
}
.related ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.related li {
	flex: 1 1 100%;
	display: flex;
}

.related a {
	flex: 1;
	margin: 10px;
	display: block;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	background-color: rgba(255,255,255,0.5);
	color: inherit;
	text-decoration: none;
}

.related a:hover {
	opacity: 0.8;
}

.related .photo {
	min-height: 100px;
	background-position: center;
	background-size: cover;
}

.related .text {
	margin: 10px;
}

.related h2 {
	font-size: 18px;
}

.related p {
	font-size: 14px;
	opacity: 0.8;
}

@media (min-width: 600px) and (max-width: 899px) {
	.related li {
		flex: 1 1 50%;
	}
}

@media (min-width: 900px) {
	.related li {
		flex: 1 1 25%;
	}
}