@charset "UTF-8";
/* CSS Document */
	/* リセット */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

body {
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	background-color: #f9f9f9;
	color: #333;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	padding-top: 60px;
	box-sizing: border-box;
	font-size: 1rem;
}

h2 {
	background-repeat: repeat;
	background-position: 10% center;
	background-size: 100% 100%;
	text-align: center;
	background-image: url("images/frame_y.png");
	padding: 14px 0;
	font-size: 1.7rem;
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

h2.visible {
  opacity: 1;
  transform: translateY(0);
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1rem;
	font-weight: bold;
}

/*spanで改行*/
.br_span {
	display: inline-block;
}

.br_span_u{
	display: inline-block;
	color: #5d4f4d;
	border-bottom: 2px dotted #5d4f4d;
}

.container {
	max-width: 800px;
	margin: 0 auto;
}

/*インスタの埋め込み------------------------*/
.insta_post {
	margin: 0 auto;
	width: fit-content;
}

/*背景がわずかに揺れて微かに光る----------------------------*/
.bg-gradient {
  position: relative;
  background: linear-gradient(
    135deg,
    #eef6f6,  /* ほぼ白の光 */
    #b4e1dc,  /* ガラスの縁っぽい色 */
    #7fa6a1,  /* 奥行きのあるブルーグリーン */
  );
  background-size: 500% 500%;
  animation: subtleGlow 290s ease-in-out infinite;
}

@keyframes subtleGlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


.bg-gradient::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.15),
    transparent 60%
  );
  animation: glowMove 15s ease-in-out infinite;

  pointer-events: none;  /* ← ★ hoverブロックしない */
}

@keyframes glowMove {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(10px, -10px); }
  100% { transform: translate(0,0); }
}

/*画像がキラッと光る----------------------------*/
.shine-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.shine-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  
  /* ★ 20秒の周期で1回だけ光る */
  animation: shine 20s linear infinite;
}

/* 30秒の中で最初の1%だけ動く → 残りはそのまま */
@keyframes shine {
  0% {
    left: -75%; /* スタート */
  }
  2% {
    left: 125%; /* すぐ光が走る */
  }
  3% {
    left: 125%; /* ここで動き終わる */
  }
  100% {
    left: 125%; /* ずっと同じ位置で止まる */
  }
}



/*-------------------------------------*/

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background: #ccc7c3;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	z-index: 9999;
}


.logo img {
	height: 42px;
	margin-top: 7px;
}

/* =========================
   ハンバーガートグルボタン
========================= */
.menu-toggle {
  width: 30px;
  height: 25px;
  position: relative;
  cursor: pointer;
  z-index: 10000;
}

.menu-toggle span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #8d8178;
  border-radius: 2px;
  opacity: 1;
  left: 0;
  transition: 0.3s ease-in-out;
}

.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 11px; }
.menu-toggle span:nth-child(3) { top: 22px; }

/* ×に変形する */
.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 11px;
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 11px;
}

/* =========================
   ナビゲーションメニュー
========================= */
.nav {
  position: absolute;
  top: 60px;
  right: 0;
  width: 300px;
border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
background: rgba(255, 255, 255, 0.6); /* 半透明で背景を透かす */
  backdrop-filter: blur(6px); /* ← ブラー */
  -webkit-backdrop-filter: blur(6px); /* Safari対応 */
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.3); /* 薄い境界線でガラス感UP */
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);

  /* 初期は閉じている */
  max-height: 0;          /* 高さゼロで隠す */
  opacity: 0;             /* フェードアウト */
  overflow: hidden;       /* 中身を隠す */
  transform: translateY(-5px); /* 少し上から */
  transition:
    max-height 0.4s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
  z-index: 9998;
}

/* メニュー開いたとき */
.nav.active {
  max-height: 700px; /* 実際の高さより少し大きめにする */
  opacity: 1;
  transform: translateY(0);
}

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

.nav li {
  border-bottom: 1px solid #ddd;
}

/* 最後のliだけボーダーを消す */
.nav li:last-child {
  border-bottom: none;
}

.nav li a {
  display: block;
  padding: 15px 20px;
  text-decoration: none;
  color: #333;
}

wrapper {
	width: 800px;
}

/*ヘッダーのスライドショー　ここから----------------*/
.slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0;   /* 念のためリセット */
	padding: 0;
}

/* すべてのスライドはデフォルト非表示 */
.slide {
	position: absolute;   /* ←重ねる */
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0; /* ← 画像下にできる微妙な余白を消す */
	opacity: 0;           /* 非表示 */
	transition: opacity 1s ease; /* フェードアニメーション */
	pointer-events: none; /* 非アクティブはクリック無効 */
}

/* 表示中のスライドだけ見える */
.slide.active {
  opacity: 1;
  position: relative;   /* 表示中だけレイアウトに参加 */
  pointer-events: auto;
}

.responsive-slide {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16/9; /* PCは横長 */
}

.slide img,
.responsive-slide {
  display: block;     /* インライン要素の隙間防止 */
  width: 100%;
  height: auto;
}

/* ロゴ中央固定 */
.slider-title {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;          /* スライダー全幅と同じにする */
  text-align: center;   /* 中央寄せ */
  transform: translateY(-50%); /* 縦中央寄せ */
  z-index: 10;
  pointer-events: none; /* スライド操作の邪魔をしない */
}

.slider-title img {
  display: block;
  width: 100%; /* ロゴ画像そのもののサイズにフィット */
  height: auto;
}

/*ヘッダーのスライドショー　ここまで----------------*/

.main_image {
	width: 100%;
	height: 580px;
	background: #ccc;
}

section {
	padding: 40px 20px;
}

/*あなたに必要な姿見は？　ここから--------------------------------*/
#your_needs {
	background: #e5e3e1;
	width: 100%;
	color: #2f2725;
}

#your_needs .container {
	padding: 20px;
	color: #2f2725;
}

#your_needs h2 {
  margin-bottom: 20px;
}

#your_needs h3 {
	text-align: center;
	margin-bottom: 30px;
	opacity: 0;
	transition: opacity 1s ease 0.5s;
	color: #8d8178;
}

#your_needs h4 {
	color: #4e4745;
	text-decoration: underline;
	margin-bottom: 20px;
}

#your_needs h3.visible {
  opacity: 1;
}

#your_needs .three-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-bottom: 60px;
}

#your_needs .icon-box {
	width: 120px;
	height: 120px;
	background-color: #ad9f68;
	border-radius: 20px;
	position: relative;
	opacity: 0;
	transform: translateY(30px) scale(0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex-direction: column;
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	color: #ffffff;
	font-size: 1.4rem
}

#your_needs .icon-box.visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

#your_needs .icon-box .icon-circle {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 30px;
	background: white;
	border: 1px solid #90824c;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#your_needs .icon-circle span {
  color: #90824c;
  font-weight: bold;
}

#your_needs .icon-label {
  line-height: 1.4;
  margin-top: 10px;
}

#your_needs .bounce-delay-1 {
  transition-delay: 0.2s;
}

#your_needs .bounce-delay-2 {
  transition-delay: 0.4s;
}

#your_needs .bounce-delay-3 {
  transition-delay: 0.6s;
}

.stand_mirror, .wall_mirror {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.stand_mirror.visible, .wall_mirror.visible {
  opacity: 1;
  transform: translateY(0);
}

.stand_mirror .image-circle,
.wall_mirror .image-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #aaa;
  background-size: cover;
  background-position: center;
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}

.stand_mirror .image-circle.left {
	left: 0;
	background-image: url("images/image_1_round.png");
	border: 1px solid #ad9f68; 
}

.wall_mirror .image-circle.right {
	right: 0;
	background-image: url("images/image_2_round.png");
	border: 1px solid #ad9f68;
}

.text-box {
  background-color: #fff;
  border: 1px solid #ad9f68;
  border-radius: 15px;
  padding: 30px 60px;
  margin: 0 20px;
  flex: 1;
  z-index: 1;
}

.stand_mirror .text-box {
  margin-left: 160px;
}

.wall_mirror .text-box {
  margin-right: 160px;
}
/*あなたに必要な姿見は？　ここまで--------------------------------*/

/*全身が映る鏡のサイズについて　ここから--------------------------------*/
#zenshin_size {
	background: #ffffff;
}

#zenshin_size h2 {
	margin-bottom: 20px;
}

.qna {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 40px;
}

.qna-item {
	display: flex;
	align-items: flex-start;
}

.qna-item.a {
	flex-direction: row;
	margin-left: 30px;
}
.qna-item.b {
	flex-direction: row-reverse;
	margin-right: 30px;
}

.icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color: #ccc;
	flex-shrink: 0;
}

.icon img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	flex-shrink: 0;
}

.bubble {
	position: relative;
	max-width: 70%;
	padding: 30px 30px;
	border-radius: 10px;
	background-color: #e0e0e0;
	margin: 8px 10px;
}

.qna-item.a .bubble {
	background-color: #e4ebeb;
}

.qna-item.a .bubble::before {
	content: '';
	position: absolute;
	top: 10px;
	left: -20px;
	border: 10px solid transparent;
	border-right-color: #e4ebeb;
}

.qna-item.b .bubble {
	background-color: #ece7ed;
}

.qna-item.b .bubble::before {
	content: '';
	position: absolute;
	top: 10px;
	right: -20px;
	border: 10px solid transparent;
	border-left-color: #ece7ed;
}

.qna_kaisetsu_img {
	margin: 0 auto;
}

.qna_kaisetsu_img img {
	max-width: 600px;
	margin: 0 auto;
}

.box-wrapper {
	position: relative;
	display: inline-block;
}

.qna_ketsuron {
	width: 80%;
	margin: 0 auto;
	margin-top: 80px;
	margin-bottom: 60px;
	text-align: center;
	background: #ad9f68;
	border-radius: 20px;
	color: #ffffff;
	font-size: 1.5rem;
	position: relative;
	z-index: 1;
}

.qna_ketsuron dl {
	padding: 30px 0;
}

.qna_ketsuron dt,dd {
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

/* ありがとう(あおい)画像 */
.overlay-img {
	position: absolute;
	top: -10px;
	right: -10px;
	left: auto;
	width: 220px;
	z-index: 2;
	pointer-events: none;
	
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s ease;
}

/* 表示状態（ボヨンと出現） */
.overlay-img.visible {
	opacity: 1;
	transform: scale(1);
	animation: bounce-in 0.6s ease-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}


/* ボヨンアニメーション */
@keyframes bounce-in {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.qna_ketsuron dl {
	font-size: 2rem;
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

.qna_ketsuron dt, dd {
	font-size: 1.6rem;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: bold;
}

.qna_ketsuron p {
	font-size: 1.1rem;
	margin-top: 30px;
	
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
/*全身が映る鏡のサイズについて　ここまで--------------------------------*/

/*ミラーの品質について　ここから--------------------------------*/
#mirror_quality {
	background: #8d8178;
}

#mirror_quality h2 {
	margin-bottom: 20px;
	background-image: url("images/frame_lbe.png");
	color: #ffffff;
}

.mirror_quality_textbox {
	align-items: center;
	background: #e5e3e1;
	border: 1px solid #2f2725;
	border-radius: 20px;
	padding: 50px;
	max-width: 800px;
	margin: 0 auto;
	margin-bottom: 40px;
}

.mirror_quality_textbox h3 {
	text-align: center;
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

.mirror_quality_textbox dl {
	margin-bottom: 40px;
}

.mirror_quality_textbox dt {
	font-size: 1.2rem;
	font-weight: bold;
	color: #5d4f4d;
	text-align: center;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

.mirror_quality_textbox dd {
	margin-top: 20px;
	font-size: 1rem;
	line-height: 1.8rem;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: normal;
}

.mirror_quality_textbox ul {
	margin-top: 20px;
	list-style-type: none;
	font-weight: bold;
}

.mirror_quality_textbox li {
	font-weight: normal;
	font-size: 1rem;
}

.mirror_bottom_grid {
	width: 70%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 20px;
	align-items: center;
}

.mirror_bottom_grid img {
  width: 100%;
  border-radius: 8px;
}

.mirror_bottom_grid .text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #2f2725;
}

.mirror_bottom_grid .text a {
	text-decoration: none;
	padding: 20px 40px;
	background: #2f2725;
	color: #ffffff;
	border-radius: 12px;
}

.mirror_bottom_grid .text a:hover {
	background: #ad9f68;
}
/*ミラーの品質について　ここまで--------------------------------*/

/*光(明るさ)について　ここから--------------------------------*/
#brightness {
	position: relative;
	width: 80%;
	margin: 0 auto;
	margin-top: 60px;
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 20px;
	align-items: center;
	color: #ffffff;
}

#brightness h3 {
	line-height: 1.3;
	margin-bottom: 20px;
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

#brightness .text {
	width: 140%;
	padding: 40px 140px 40px 40px;
}

#brightness img {
	position: absolute;
	width: 40%;
	top: -10px;
	right: -30px;
}
/*光(明るさ)について　ここまで--------------------------------*/

/*フレームについて　ここから--------------------------------*/
#frame {
	padding: 60px 20px;
	background: #e5e3e1;
}

#frame h2 {
  color: #2f2725;
  margin-bottom: 40px;
}

#frame h3 {
	color: #5d4f4d;
	margin: 5px 0 15px 0;
	font-size: 1.3rem;
}

.frame_contents_box {
	border: 1px solid #ad9f68;
	border-radius: 12px;
	padding: 30px 30px 0px 30px;
	margin-bottom: 40px;
	color: #2f2725;
	line-height: 1.6;
}

.frame-description-box {
	margin-bottom: 50px;
}

.frame-description-box h3 {
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

.frame-image-row {
	width: 80%;
	display: flex;
	gap: 20px;
	margin: 0 auto;
	margin-bottom: 80px;
	flex-wrap: nowrap;
}

.frame-image-item {
  flex: 1;
  text-align: center;
}

.frame-image-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.frame-image-item p {
  margin-top: 8px;
  color: #2f2725;
}
/*フレームについて　ここまで--------------------------------*/

/*姿見の活用方法　ここから--------------------------------*/
#look_wider {
	background: #ffffff;
	width: 100%;
	margin: 0 auto;
}

#look_wider.container {
	padding:0 40px;
}

#look_wider h2 {
  color: #2f2725;
  margin-bottom: 40px;
}

#look_wider h3 {
	color: #5d4f4d;
	margin-bottom: 5px;
	text-align: center;
}

.look_wider_wrapper {
	width: 80%;
	margin: 0 auto;
}

#look_wider li {
	font-size: 1.3rem;
	font-weight: bolder;
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

#look_wider p {
	margin-bottom: 30px;
}
/*姿見の活用方法　ここまで--------------------------------*/

/*姿見の種類について　ここから--------------------------------*/
#mirror_kinds {
	padding: 60px 20px;
	background: #ccc7c3;
}

#mirror_kinds h2 {
	margin-bottom: 40px;
	background-image: url("images/frame_be.png");
}

.mirror-kind-item {
	background-color: #ffffff;
	border: 1px solid #ad9f68;
	border-radius: 20px;
	margin-bottom: 15px;
	padding: 20px;
}

.mirror-kind-grid {
	display: grid;
	grid-template-columns: 50% 50%;
	gap: 20px;
	align-items: start;
}

.mirror-image img {
	width: 100%;
	border-radius: 8px;
}

.mirror-image a {
	text-decoration: none;
}

.mirror-image a:hover {
	font-weight: bold;
}

.product-name {
	text-align: center;
	margin-top: 8px;
	color: #2f2725;
	font-size: 0.8rem;
}

.mirror-description {
	color: #2f2725;
	line-height: 1.6;
	padding: 0 10px;
}

.mirror-description dt {
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 1.4rem;
}

.mirror-description dd {
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: normal;
}

/* 初期状態は透明で少し下にずらす */
.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease, transform 1s ease;
}

/* 表示可能範囲に来たらアニメーションで表示 */
.fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

#mirror_kinds dt {
	text-align: center;
	font-weight: bold;
	margin: 20px 0 10px 0;
}

#mirror_kinds dd {
	font-size: 1rem;
	margin-bottom: 20px;
}
/*姿見の種類について　ここまで--------------------------------*/

/*取り付け金具が同梱　ここから--------------------------------*/
.kakemakuri {
	padding: 20px 20px 100px 20px;
	background: #ccc7c3;
}

.kakemakuri h2 {
	background-image: none;
	transform: none;
	transition: none;
	opacity: 1;
	margin-top: -15px;
}

.kakemakuri h3 {
	text-align: center;
	color: #5d4f4d;
}

.kakemakuri p {
	display: block;
	width: 80%;
	margin: 0 auto;
	padding: 20px 50px 50px 50px;
}
/*取り付け金具が同梱　ここまで--------------------------------*/

/*ミラーのお手入れについて　ここから--------------------------------*/
#maintenance {
  position: relative;
  background-image: url('https://www.sennoki.com/pic-labo/maintenance_bg_img.jpg');
  background-size: cover;         /* PCは全画面を埋める */
  background-position: center;
  background-attachment: fixed;  /* PCは固定表示 */
  color: #2f2725;
  padding: 60px 0;
  overflow: hidden;
}

/* 透過ボックス */
.maintenance-overlay {
	background-color: rgba(255, 255, 255, 0.4);
	width: 48%;
	padding: 40px;
	border-radius: 12px;
	margin-left: auto;
	margin-right: 2%;
}

.maintenance-overlay h2 {
	background-image: none;
	transform: none;
	transition: none;
	opacity: 1;
	border-top: 1px solid #ad9f68;
	border-bottom: 1px solid #ad9f68;
	margin-bottom: 30px;
}

.maintenance-overlay dt {
	font-size: 1.2rem;
	text-align: center;
	margin-bottom: 30px;
	font-weight: bold;
}

.maintenance-overlay dd {
	font-size: 1rem;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-weight: normal;
}

/*画像にホバーすると浮く*/
.hover-card {
	margin-top: -30px;
	border-radius: 8px;
	padding: 20px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-8px);
}

.link_box {
	text-align: center;
	margin: 0 auto;
	margin-bottom: 20px;
}

.link_box a {
	margin-top: -40px;
}

/* リンクスタイル */
.maintenance-overlay a {
	display: inline-block;
	margin-top: 20px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background-color: #2f2725;
	padding: 10px 20px;
	border-radius: 12px;
	transition: background-color 0.3s ease;
}

.maintenance-overlay a:hover {
	background-color: #ad9f68;
}

.maintenance-overlay img{
	display: block;
	width: 45%;
	margin: 0 auto;
	margin-top: 50px;
	filter: drop-shadow(4px 4px 4px #8d8178);
}


/*画像リンクの背景色を消す*/
.hover-card a {
	background-color: transparent;
}

.hover-card a:hover {
	background-color: transparent;
}
/*ミラーのお手入れについて　ここまで--------------------------------*/

/*自社一貫生産　ここから--------------------------------*/
#jisha_ikkan { 
	background: #ffffff;
	padding-top: 100px;
}


.jisha_ikkan .ikkan_image,
.jisha_ikkan .ikkan_explanation {
	width: 100%;
	margin-bottom: 20px;
}


.ikkan_image {
	text-align: center;
}
.ikkan_image img {
	width: 80%;
	margin: 0 auto;
	margin-top: 20px;
}

#jisha_ikkan h3 {
	text-align: center;
	color: #5d4f4d;
}

.ikkan_explanation {
	width: 80%;
	margin: 0 auto;
	margin-top: 20px;
}

.ikkan_explanation p {
	margin-top: 20px;
}

.arms {
	margin-top: 100px;
}
/*自社一貫生産　ここまで--------------------------------*/

/*安全性　ここから--------------------------------*/
#safety {
	background: #ffffff;
}

#safety .container {
	width: 40%;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 60px;
	background: #ad9f68;
	border-radius: 20px;
	padding: 30px;
	color: #ffffff;
}

#safety h3 {
	width: 50%;
	text-align: center;
	color: #ffffff;
	border-top: 1px solid #90824c;
	border-bottom: 1px solid #90824c;
	margin: 0 auto;
	padding: 10px 0;
	font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

#safety ul {
	display: block;
	width: 70%;
	margin: 0 auto;
	padding: 40px 0 ;
}

#safety li {
	list-style-type: none;
	font-size: 1.2rem;
}
/*安全性　ここまで--------------------------------*/

/*SNS　ここから--------------------------------*/
#sns {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 600px;
	margin: 0 auto;
	margin-bottom: 40px;
}

.row {
	display: grid;
	gap: 20px;
}

.row-1 {
	grid-template-columns: 1fr;
}

.row-2 {
	grid-template-columns: 1fr 1fr;
	width: 60%;
}

#sns .icon-box {
	padding: 20px;
	text-align: center;
}

#sns .row-1 img {
	width: 100%;
	object-fit: contain;
	margin-right: 10px;
}

#sns .row-1 img:hover {
	opacity: 0.8;
}

#sns .row-2 {
	margin: 0 auto;
	margin-top: -30px;
}

#sns .row-2 img {
	width: 100%;
}
/*SNS　ここまで--------------------------------*/

/*Page Top ボタン　ここから--------------------------------*/
/* Page Top ボタンの基本 */
.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  background: #2F2725;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  cursor: pointer;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 9999;
}

/* 表示状態 */
.page-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ホバーで少し浮く */
.page-top:hover {
  transform: translateY(-5px) scale(1.05);
}

/* ふわふわアニメーション */
@keyframes floating {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}
.page-top.floating {
  animation: floating 2.5s ease-in-out infinite;
}
/*Page Top ボタン　ここまで--------------------------------*/

footer {
	text-align: center;
	background: #2f2725;
	height: 60px;
	width: 100%;
	color: #ccc7c3;
	font-size: 0.75rem;
	line-height: 3.7rem;
}

footer p {
	display: inline-block;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

　 【レスポンシブ　ここから】

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media (max-width: 1024px) {
	.responsive-slide {
		aspect-ratio: 4/3;
	}
	
  .frame-image-row {
    gap: 16px;
  }
	
	#safety .container {
		width: 60%;
	}
}

@media (max-width: 820px) {
	h2 {
		font-size: 1.5rem;
	}
	
	h3 {
		font-size: 1.2rem;
	}
	
	h4 {
		font-size: 1.1rem;
	}
	
	.bubble {
		max-width: 60%;
	}
	
	#your_needs .image-circle {
		width: 140px;
		height: 140px;
	}
	
	#your_needs .text-box {
		padding: 30px 40px;
	}
	
	.stand_mirror, .wall_mirror {
		width: 100%;
	}
	
	.stand_mirror .text-box {
		margin-left: 100px;
	}

	.wall_mirror .text-box {
		margin-right: 100px;
	}

	.qna_ketsuron {
		width: 70%;
		padding: 20px 0;
		font-size: 1.3rem;
	}
	
	.overlay-img {
		top: 0px;
		right: 10px;
		width: 180px;
	}

	.qna_ketsuron dl {
		text-align: center;
		width: 80%;
		padding: 30px 0;
		margin: 0 auto;
		margin-top: 0px;
	}
	
	.qna_ketsuron dl, dt, dd {
		font-size: 1.35rem;
	}

	.qna_ketsuron p {
		font-size: 0.9rem;
		margin-top: 35px;
	}
	
	.mirror_bottom_grid {
		width: 90%;
	}
	
	.maintenance-overlay {
		width: 90%;
		margin: 0 auto;
	}
	
	.link_box a {
		margin-top: 0px;
	}
	
	#safety .container {
		width: 70%;
		padding: 30px 0;
	}
	
	#safety li {
		font-size: 1rem;
	}

}

@media (max-width: 768px) {
  #maintenance {
    background-attachment: scroll;   /* ← 固定やめる */
    background-size: cover;        /* ← 画像全体を収めるならcontain */
    background-repeat: no-repeat;    /* ← 繰り返さない */
    background-position: center center; /* ← 中央寄せにする */
  }
	
	.frame_contents_box {
		margin-bottom: 40px;
	}
}

@media (max-width : 640px ){
	
	h2 {
		font-size: 1.5rem;
	}
	
	h3 {
		font-size: 1.2rem;
	}
	
	h4 {
		font-size: 1.1rem;
	}
	
	.qna_kaisetsu_img img {
	max-width: 100%;
	margin: 0 auto;
}
	
	.insta_post {
		width: 95%
	}
	
	.responsive-slide {
		aspect-ratio: 3/4;
	}
	
	.logo img {
		height: 34px;
		margin-top: 7px;
	}
	
/*ハンバーガーメニューに関する記述　ここから------------------------*/
  .nav {
    width: 100%; /* モバイルでは全幅にする */
  }

  .nav li a {
    padding: 15px;
  }

/*ハンバーガーメニューに関する記述　ここまで------------------------*/
	
	#your_needs .text-box h4 {
		font-size: 0.9rem;
		text-align: center;
	}
	
	#your_needs .image-circle {
		width: 200px;
		height: 200px;
		margin-bottom: -25px;
	}

	#your_needs .text-box {
		width: 110%;
		padding: 45px 30px 60px 30px;
		font-size: 0.95rem;
		text-align: left;
	}
	
	.qna_ketsuron {
		width: 90%;
		max-width: 640px;
		padding: 20px 0;
		font-size: 1.3rem;
		background: #ad9f68;
		background-image: none;
		margin-top: 90px;
		border-radius: 20px;
	}
	
	.qna_ketsuron .text a {
		font-size: 1rem;
	}
	
	.overlay-img {
		top: -15px;
		right: 0px;
		width: 155px;
		transform: translateX(-50%) scale(0.6);
	}
	
	.overlay-img.visible {
		transform: translateX(-50%) scale(1.1);
	}
	
	.qna_ketsuron {
		width: 85%;
	}

	.qna_ketsuron dl {
		margin: 0 auto;
		margin-top: -20px;
		padding: 30px 0;
		font-size: 1.25rem;
	}
	
	.qna_ketsuron dt,dd {
		font-size: 1.1rem;
	}

	.qna_ketsuron p {
		font-size: 0.8rem;
		margin-top: 25px;
	}
	
	.stand_mirror,
	.wall_mirror {
		flex-direction: column;
		align-items: center;
		text-align: center;
		position: relative;
	}

	.stand_mirror .image-circle,
	.wall_mirror .image-circle {
		position: relative !important; /* ← 優先度を上げる */
		top: auto;
		left: auto;
		right: auto;
		transform: none !important;
		margin-bottom: 15px;
	}

	.stand_mirror .text-box,
	.wall_mirror .text-box {
		margin: 0;
		width: 100%;
	}
	
	.mirror_bottom_grid {
		width: 90%;
	}
	
	.mirror_bottom_grid .text a {
		padding: 20px 20px;
		font-size: 0.75rem;
	}
	
	.a_short a {
		padding: 20px 20px;
		font-size: 0.75rem;
	}
	
	#brightness {
		width: 90%;
		margin-top: 200px;
		display: block;
		margin-bottom: 50px;
	}

	#brightness .text {
		width: 100%;
		margin-top: 280px;
		padding: 0px;
		font-size: 0.9rem;
		text-align: center;
	}

	#brightness img {
		position: absolute;
		width: 40%;
		top: -220px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	
	#look_wider li {
		font-size: 1.2rem;
	}
	
	.frame-image-item p {
		font-size: 0.7rem;
	}
	
	.frame-image-row {
		width: 85%;
		gap: 12px;
		margin-bottom: 40px;
	}
	
	.frame_contents_box {
		padding: 15px;
	}
	
	.mirror-kind-grid {
		grid-template-columns: 100%;
	}

	.mirror-image,
	.mirror-description {
		width: 100%;
	}

	.product-name {
		margin-bottom: 10px;
	}
	
	.kakemakuri p {
		width: 90%;
	}
	
	.link_box a {
		margin-top: -10px;
	}
	
	.ikkan_explanation {
		width: 90%;
	}
	
	#safety .container {
		width: 95%;
		padding: 20px 0;
	}
	
	#safety ul {
		margin: 0 auto;
		
	}
	
	#safety li {
		font-size: 1.0rem;
	}
	
	.row-1 {
		width: 80%;
		margin: 0 auto;
	}
	
	.row-2 {
		width: 55%;
	}
}

@media (max-width: 420px) {
	
	.logo img {
		height: 30px;
		margin-top: 7px;
	}
	
	h2 {
		font-size: 1.1rem;
	}
	
	.nav li a {
    font-size: 14px;
    padding: 12px 16px;
  }
	
	#your_needs h3 {
		font-size: 1.3rem;
	}
	
	#your_needs .image-circle {
		width: 200px;
		height: 200px;
		margin-bottom: -20px;
	}

	#your_needs .text-box {
		width: 115%;
		padding: 30px 25px 50px 25px;
		font-size: 0.95rem;
	}
	
	.text-box h4 {
		text-align: center;
		font-size: 0.92rem;
	}

	#your_needs .icon-box {
		width: 100px;
		height: 100px;
	}

	#your_needs .icon-label {
		font-size: 1rem;
	}

  .three-icons {
    gap: 6px !important;
  }
	
	.qna-item.a {
		width: 100%;
	margin-left: 0px;
	}
	
	.qna-item.b {
		width: 100%;
		margin-right: 0px;
	}
	
	.bubble {
		max-width: 80%;
		padding: 25px 20px;
		border-radius: 10px;
		margin: 8px 10px;
		font-size: 0.9rem;
	}
	
	#zenshin_size .icon {
		width: 70px;
		height: 70px;
	}
	
	#zenshin_size .icon img {
		width: 70px;
		height: 70px;
	}
	
	.qna_ketsuron {
		width: 100%;
		max-width: 400px;
		padding-top: 20px;
		background: #ad9f68;
		background-image: none;
		margin: 0 auto;
		margin-top: 80px;
		margin-bottom: 50px;
		border-radius: 20px;
	}
	
	.overlay-img {
		top: 0px;
		right: -10px;
		width: 120px;
	}

	.qna_ketsuron dt, dd {
		font-size: 1.1rem;
	}
	
	.qna_ketsuron p {
		font-size: 0.75rem;
		margin-top: 15px;
		}
	
	.mirror_bottom_grid {
		width: 100%;
	}
	
	#mirror_quality section {
		padding: 40px 10px;
	}
	
	.mirror_quality_textbox {
		padding: 30px;
	}

	.mirror_quality_textbox h3 {
		text-align: center;
	}

	.mirror_quality_textbox dl {
		margin-bottom: 40px;
	}

	.mirror_quality_textbox dt {
		font-size: 1.1rem;
		font-weight: bold;
		text-align: center;
	}

	.mirror_quality_textbox dd {
		margin-top: 20px;
		font-size: 0.9rem;
		line-height: 1.6rem;
	}
	
	.mirror_quality_textbox li {
		font-size: 0.9rem;
	}

	.mirror_bottom_grid {
		width: 100%;
	}

	.mirror_bottom_grid .text {
	  font-size: 0.8rem;
	  line-height: 1.6;
	}

	.mirror_bottom_grid .text a {
		text-decoration: none;
		padding: 20px 10px;
		background: #2f2725;
		color: #ffffff;
		border-radius: 12px;
		font-size: 0.75rem;
	}
	
	.mirror_bottom_grid.a_short a {
		font-size: 0.7rem;
	}
	
	#brightness {
		margin-top: -30px;
	}
	
	#brightness .text {
		font-size: 0.82rem;
	}

	#brightness img {
		position: absolute;
		width: 55%;
		top: -210px;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
	}
	
	.frame_contents_box {
		font-size: 0.9rem;
	}
	
	.frame-image-item p {
		font-size: 0.7rem;
	}
	
	.frame-image-row {
		width: 100%;
		gap: 10px;
	}
	
	#look_wider h3,
	.kakemakuri h3 {
		font-size: 1rem;
	}
	
	#look_wider li {
		font-size: 1rem;
	}
	
	.insta_post {
		max-width: 360px;
	}
	
	.kakemakuri {
		padding: 0px 0px 60px 0px;
	}
	
	.kakemakuri p {
		width: 100%;
		padding: 0 20px 60px 20px;
	}
	
	.maintenance-overlay {
		padding: 30px 20px;
	}
	
	.maintenance-overlay dt {
		font-size: 0.9rem;
	}

	.maintenance-overlay dd {
		font-size: 0.9rem;
	}
	
	.hover-card img {
		width: 70%;
	}
	
	.link_box a {
		margin-top: -30px;
	}
	
	.ikkan_explanation p {
		font-size: 0.9rem;
	}
	
	.arms {
		margin-top: 70px;
	}
	
	#safety {
		margin-top: -30px;
	}
	
	#safety .container {
		width: 100%;
		padding: 30px 0;
	}
	
	#safety ul {
		width: 90%;
		margin: 0 auto;
		padding: 20px 12px;
	}
	
	#safety li {
		font-size: 0.9rem;
		
	}
	
	.row-1 {
		width: 98%;
		margin: 0 auto;
	}
	
	.row-2 {
		width: 75%;
	}
}