TEST-web-siteの5のcssコーディング

@charset "utf-8";

/*---------------サイトの基本設定---------------*/

/*cssのリセット*/
こちらはノーマライズするときは要らない html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  background: transparent;
}

/*html&bodyの設定*/
html {
  font-size: 62.5%; /* 1rem = 10px */
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  font-family: "YakuHanJPs_Noto", "Roboto", "Noto Sans JP", "游ゴシック Medium",
    "游ゴシック体", "Yu Gothic Medium", "YuGothic", "ヒラギノ角ゴ ProN",
    "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック",
    "MS PGothic", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.8;
  width: 100%;
  height: 100%;
}

/* Box Sizing の設定 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* - -  h1.h2.h3....  - - */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  color: #000;
  overflow-wrap: break-word;
}

/* -- a -- */
a {
  text-decoration: none;
  outline: none;
  color: #000;
}

a,
a > img {
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

/* -- img -- */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* -- ul -- */
ul {
  list-style: none;
}
li {
  list-style: none;
}

/* -- :hover -- */
a:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
  cursor: pointer;
}

/* -- inputの設定 --*/
input[type="text"] {
  font-size: 1rem;
}
input[type="submit"] {
  padding: 8px;
  border: #efefef;
  color: #000;
  background-color: aliceblue;
}

/*--  フォーム要素の設定  --*/
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

/*--テーブルのborder-collapse*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

@charset "utf-8";

/*---------------rootの基本設定---------------*/
:root {
  /* カラーパレット */
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --bg-beige: #f3f0e8;
  --text-color: #333;
  --white--: #ffffff;
  --gold--: #b49f68;
  --black--: #000000;
  --footer-bg: #222222;
  --mv-border-color: #765a3f;
  --hb-span-color: #dd742c;
  --border--: #a5a5a5;

  /* フォントサイズ */
  --font-small: 12px; /* 12px */
  --font-medium: 16px; /* 16px */
  --font-large: 20px; /* 20px */

  /* スペーシング */
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
}
/*---------------設定終了---------------*/

/*---------------デバイス別表示・非表示---------------*/
/* PC専用（769px以上で表示） */
.pc-only {
  display: block;
}
@media screen and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

/* タブレット専用（768px〜1024px） */
.tablet-only {
  display: none;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .tablet-only {
    display: block;
  }
}

/* スマホ専用（500px以下で表示） */
.sp-only {
  display: none;
}
@media screen and (max-width: 500px) {
  .sp-only {
    display: block !important;
  }
}

/* モバイル専用（768px以下で表示：タブレット+スマホ） */
.mobile-only {
  display: none;
}
@media screen and (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }
}
/*---------------デバイス別表示・非表示の設定終了---------------*/

/*---------------全体のフォント設定---------------*/
body {
  font-family: "Noto Serif JP", "Helvetica Neue", Arial, sans-serif;
}
/*---------------全体のフォント設定終了---------------*/

@charset "utf-8";

/*---------------bodyフェードイン設定---------------*/

body {
  opacity: 0;
  transition: opacity 1s ease;
}
body.body-fadein {
  opacity: 1;
}

/*---------------headerの設定-------------------------------*/

.header_design {
  position: absolute;
  top: 0;
  width: 100%;
  height: 160px;
  z-index: 999;
}
.header_inner_design {
  width: 100%;
  height: 100%;
  margin-inline: auto;
  padding-block: min(0.69vw, 10px);
  padding-inline: min(1.39vw, 20px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.header_logo_design img {
  width: min(11.11vw, 160px);
}
.header_nav_design {
  display: flex;
  align-items: center;
}
.header_nav_design ul {
  list-style: none;
  display: flex;
  gap: min(1.39vw, 20px);
  margin-top: 20px;
  margin-right: min(1.39vw, 20px);
  padding: 0;
}
.header_nav_design ul li {
  position: relative;
  display: inline-flex;
  gap: 10px;
}
.header_nav_design ul li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-color);
  font-size: min(1.11vw, 16px);
  font-weight: 500;
}
.header_nav_design ul li ::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--gold--);
  border-radius: 50%;
}
.header_nav_design ul li a:hover {
  color: var(--primary-color);
}
.header_btn_design .btn_basic {
  background-color: var(--gold--);
  color: var(--white--);
  font-size: min(1.11vw, 16px);
  padding-block: min(0.69vw, 10px);
  padding-inline: min(1.39vw, 20px);
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
}
.header_btn_design .btn_basic:hover {
  background-color: var(--black--);
}
/*---------------headerの設定終了-------------------------------*/

/*---------------header_hideの設定-------------------------------*/

.header_hide {
  position: fixed;
  top: 0;
  width: 100%;
  height: 160px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-40px);
  transition: opacity 0.6s, transform 0.6s;
}
.header_hide.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.header_hide_inner_design {
  width: 100%;
  height: 100%;
  margin-inline: auto;
  padding-block: min(0.69vw, 10px);
  padding-inline: min(1.39vw, 20px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.header_hide_logo_design img {
  width: 100px;
  display: none;
}
.header_hide_nav_design {
  display: flex;
  align-items: center;
  padding-inline: 30px;
  margin-top: 20px;
  border-radius: 6.25rem;
  box-shadow: 0 0 6px rgba(118, 90, 63, 0.2);
  background-color: var(--white--);
}
.header_hide_nav_design ul {
  list-style: none;
  display: flex;
  gap: min(2.08vw, 30px);
  margin-block: 20px;
  margin-right: min(1.39vw, 20px);
  padding: 0;
}
.header_hide_nav_design ul li {
  position: relative;
  display: inline-flex;
  gap: 10px;
}
.header_hide_nav_design ul li a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-color);
  font-size: min(1.11vw, 16px);
  font-weight: 500;
}
.header_hide_nav_design ul li ::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--gold--);
  border-radius: 50%;
}
.header_hide_nav_design ul li a:hover {
  color: var(--primary-color);
}
.header_btn_design .btn_basic {
  background-color: var(--gold--);
  color: var(--white--);
  font-size: min(1.11vw, 16px);
  padding-block: min(0.69vw, 10px);
  padding-inline: min(1.39vw, 20px);
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
}
.header_btn_design .btn_basic:hover {
  background-color: var(--black--);
}

/*---------------ハンバーガーメニューの設定-------------------------------*/

/*ハンバーガーナビの設定*/
/*========= ナビゲーションのためのCSS ===============*/
.g-nav {
  /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
  position: fixed;
  z-index: 999;
  /*ナビのスタート位置と形状*/
  top: 0;
  right: -120%;
  width: 100%;
  /*半分とか調整をする際は、g-nav-listも合わせる*/
  height: 100vh;
  /*ナビの高さ*/
  background: #faf5e7;
  /*動き*/
  transition: all 0.6s;
}
.g-nav.panelactive {
  right: 0;
}
.g-nav.panelactive .g-nav-list {
  /*ナビの数が増えた場合縦スクロール*/
  position: fixed;
  z-index: 999;
  width: 100%;
  /*半分とか調整をする際は、g-navも合わせる*/
  height: 100vh;
  /*表示する高さ*/
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.g-nav ul {
  /*ナビゲーション天地中央揃え*/
  position: absolute;
  z-index: 999;
  left: 0;
  width: 100%;
  margin-top: 100px;
  padding: 6rem 23px 15%;
}
.g-nav li {
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  list-style: none;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.3125rem 1.5rem;
  width: 100%;
  border-bottom: 5px dotted #fff;
}
.g-nav li li:not(:first-child) {
  margin-top: 20px;
}
.g-nav li a {
  color: #000;
  text-decoration: none;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.g-nav li a::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #e6b422; /* お好みで色変更 */
  /* contentの代わりに画像での矢印を表示 
  display: block;
  width: 1rem;
  height: 1rem;
  background: url(../images/drawer_arrow.png) no-repeat center center / contain;
  */
}
body.no-scroll,
html.no-scroll {
  overflow: hidden !important;
}
/*---------------navi内のボタンの設定---------------*/
/*ボタン設定*/
.g_nav_btn {
  width: 80%;
  margin: 50px auto;
}
.g_nav_btn_link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: min(2.08vw, 16px);
  padding-bottom: min(2.08vw, 16px);
  padding-left: min(1.3vw, 10px);
  padding-right: min(1.3vw, 10px);
  font-size: min(3.72vw, 16px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  border-radius: min(0.78vw, 6px);
  transition: all 0.3s ease;
  background-color: var(--gold--);
  color: var(--white--);
}

/*========= ボタンのためのCSS ===============*/
.openbtn {
  position: relative;
  z-index: 9999;
  /*ボタンを最前面に*/
  top: 0px; /*デザインによって位置調整*/
  right: 10px;
  cursor: pointer;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #d1d1b2;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(118, 90, 63, 0.2);
  cursor: pointer;
}
.openbtn span {
  display: inline-block;
  transition: all 0.4s;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 3px;
  border-radius: 2px;
  background-color: var(--hb-span-color);
  width: 45%;
}
.openbtn span:nth-of-type(1) {
  transform: translate(-50%, -10px);
}
.openbtn span:nth-of-type(2) {
  transform: translate(-50%, 0);
}
.openbtn span:nth-of-type(2)::after {
  content: "Menu"; /*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top: 5px;
  left: 0px;
  color: var(--text-color);
  font-size: 1rem;
  text-transform: uppercase;
}
.openbtn.active span:nth-of-type(1) {
  top: 18px;
  left: 25px;
  transform: translateY(6px) rotate(-45deg);
  width: 30%;
}
.openbtn.active span:nth-of-type(2) {
  top: 30px;
  left: 25px;
  transform: translateY(-6px) rotate(45deg);
  width: 30%;
}
.openbtn.active span:nth-of-type(2)::after {
  content: "Close"; /*3つ目の要素のafterにClose表示を指定*/
  transform: translateY(0) rotate(-45deg);
  top: 10px;
  left: 10px;
}

/*---------------mv_designの設定-------------------------------*/

.mv_top_wrapper_design {
  position: relative;
  aspect-ratio: 1440 / 875; /* 画像の比率に合わせて調整 */
  padding-block: 80px 90px;
}

.mv_top_wrapper_design::before {
  content: "";
  position: absolute;
  top: 5.55%;
  left: 0;
  width: 100%;
  aspect-ratio: 1440 / 800; /* 画像の比率に合わせて調整 */
  background-image: url("../images/image_2.png"); /* デフォルトの画像 */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  margin: auto;
  transition: background-image 0.5s ease-in-out;
}

.mv_top_wrapper_design::after {
  content: "";
  position: absolute;
  bottom: 1.57%;
  left: 0;
  width: 100%;
  aspect-ratio: 1440 / 800; /* 画像の比率に合わせて調整 */
  background-image: url("../images/image_1.png"); /* デフォルトの画像 */
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  margin: auto;
  transition: background-image 0.5s ease-in-out;
}

/*-----------------mv_designの画像アニメ-------------------------------*/

/*---------------mv-topの基本設定---------------*/
.mv_top_wrapper_design_mv {
  position: relative;
  /*padding-top: min(2.08vw, 30px);
  padding-inline: min(2.08vw, 30px);
  padding-bottom: min(2.08vw, 30px);*/ /*paddingさせたい場合はコメントアウト解除*/
  overflow-x: hidden; /* 横スクロールを防止 */
  max-width: 100vw; /* 画面幅を超えないように */
}

/*---------------mv-topコンテンツの基本設定---------------*/
.mv_top_content_design {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overflow-x: hidden; /* 横スクロールを明示的に防止 */
  -webkit-mask-image: url("../images/mask.png");
  -webkit-mask-size: 100% 100%;
  mask-image: url("../images/mask.png");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center center;
}

.mv_top_content_design ul {
  /*position: relative;*/ /*/*余白させたい場合はコメントアウト解除*/
  width: 100%;
  aspect-ratio: 2 / 1; /* 2:1の比率を維持 */
  margin-inline: auto;
}

.mv_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0; /* グラデーションより下に配置 */
}

.mv_image.active {
  opacity: 1;
}

/*---------------mv_designの設定終了-------------------------------*/
.mv-title {
  position: absolute;
  top: 10%;
  left: 40%;
  transform: translate(-50%);
  text-align: left;
  color: var(--text-color);
  font-size: clamp(24px, 2.5vw, 72px);
  font-weight: bold;
  z-index: 4;
}
.mv-title-line-mask {
  overflow: hidden;
  display: block;
  width: fit-content;
  padding-right: 5px;
  padding-bottom: 5px;
}
.mv-title-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(150%);
  transition: opacity 0.6s, transform 1s ease-in-out;
  line-height: 1.4;
  background-color: #fff;
  padding: 0.1875rem 0.875rem 0.3125rem;
  border: 1px solid var(--mv-border-color);
  box-shadow: 5px 5px 0 var(--mv-border-color);
}
.mv-title-char {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s;
}
.mv-title-char.show {
  opacity: 1;
  transform: translateY(0);
}

.mv-title-line:nth-child(2) {
  margin-top: 20px;
}

.mv-title-line.show {
  opacity: 1;
  transform: translateY(0);
}

/*---------------product_designの基本設定-------------------------------*/

.product_design_section {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
  padding-block: 50px;
  background-color: #faf5e7;
}

.product_design_section::before {
  content: "";
  display: block;
  width: 100%;
  height: 4rem;
  position: absolute;
  top: -20px;
  left: 0;
  background-image: url("../images/top_wave.png");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}

.product_design_section::after {
  content: "";
  display: block;
  width: 100%;
  height: 4rem;
  position: absolute;
  bottom: -20px;
  left: 0;
  background-image: url("../images/bottom_wave.png");
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  z-index: 0;
}

.product_design_inner {
  max-width: 1150px;
  width: 100%;
  margin-inline: auto;
  padding-inline: min(2.08vw, 30px);
  padding-bottom: 100px;
  text-align: center;
}

.section_title_design {
  font-size: min(4vw, 40px); /*1000pxでのvw算出*/
  font-weight: bold;
  color: var(--text-color);
  text-align: center;
  margin-bottom: min(1.39vw, 20px);
}

.section_title_design span {
  display: block;
  color: #dd742c;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.tl_sub {
  font-size: min(1.7999999999999998vw, 18px); /*1000pxでのvw算出*/
  color: var(--text-color);
  margin-top: min(3.33vw, 50px);
  margin-bottom: min(3.33vw, 50px);
  line-height: 1.8;
}

.product_design_items {
  margin: 0 auto;
  padding: 0px;
}

.product_design_item a {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  text-align: left;
  background-color: #fff;
  padding: 30px;
}

.product_design_item:not(:first-child) {
  margin-top: 50px;
}

.product_design_item img {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 400 / 300;
  border-radius: 1.5rem;
  overflow: hidden;
}

.product_design_item_title {
  font-size: 2rem;
  padding-bottom: 1.5rem;
}

.product_design_inner p {
  font-size: min(1.7999999999999998vw, 18px); /*1000pxでのvw算出*/
  color: var(--text-color);
  line-height: 1.8;
}

.product_design_item_more {
  margin-top: 20px;
  text-align: right;
}

.c_btn {
  display: inline-block;
  font-size: min(1.5vw, 15px); /*1000pxでのvw算出*/
  font-weight: 700;
  padding: 0.5625rem 5rem 0.5625rem 0;
  position: relative;
  color: var(--text-color);
}

.c_btn::after {
  content: "";
  position: absolute;
  right: 0;
  top: 48%;
  transform: translateY(-48%);
  width: 40px; /*円の大きさを調整*/
  height: 40px; /*円の大きさを調整*/
  border-radius: 50%;
  background-color: var(--gold--);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.c_btn::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent; /*三角形の大きさを調整*/
  border-bottom: 8px solid transparent; /*三角形の大きさを調整*/
  border-left: 12px solid var(--white--); /*三角形の大きさを調整*/
  z-index: 1;
  pointer-events: none;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*矢印を画像で作る時はコチラ*/
/*.c_btn::after {
  content: "";
  position: absolute;
  right: 0;
  top: 48%;
  transform: translateY(-48%);
  width: 40px; /* 画像の大きさ */
/*height: 40px; /* 画像の大きさ */
/*border-radius: 50%;
  background-image: url("../images/arrow.png"); /* 矢印画像のパス */
/*background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* 矢印画像の大きさを調整 */
/*display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}*/

/*コンテンツで矢印を作る時はコチラ*/
/*.c_btn::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 48%;
  transform: translateY(-48%);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--white--);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--gold--);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}*/

.c_btn:hover::after {
  right: -5px;
}

.c_btn:hover::before {
  right: 7px;
}

@media (hover: hover) {
  .c_btn:hover::after {
    right: -5px;
  }
  .c_btn:hover::before {
    right: 7px;
  }
}

.btn_more {
  margin-top: min(3.33vw, 50px);
  text-align: center;
  position: relative;
}

.btn_more a {
  display: inline-block;
  font-size: min(2vw, 20px); /*1000pxでのvw算出*/
  font-weight: 700;
  margin: 0 auto;
  position: relative;
}

/*矢印を画像で作る時はコチラ*/
.btn_more a::after {
  content: "";
  position: absolute;
  right: -55px;
  top: 48%;
  transform: translateY(-48%);
  width: 40px; /* 画像の大きさ */
  height: 40px; /* 画像の大きさ */
  border-radius: 50%;
  background-image: url("../images/arrow.png"); /* 矢印画像のパス */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* 矢印画像の大きさを調整 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn_more a:hover::after {
  right: -60px;
}
@media (hover: hover) {
  .btn_more a:hover::after {
    right: -60px;
  }
}

.product_design_image_group {
  width: 100%;
  max-width: 1300px; /*画像全体の最大幅*/
  height: 100%;
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}

.product_design_image_1 {
  position: absolute;
  width: min(25vw, 360px);
  top: -5%;
  left: 0%;
  z-index: 1;
}

.product_design_image_2 {
  position: absolute;
  width: min(14.93vw, 215px);
  top: 0%;
  right: 0%;
  z-index: 1;
}

.product_design_image_3 {
  position: absolute;
  width: min(25vw, 360px);
  bottom: -2%;
  left: 0%;
  z-index: 1;
}

.product_design_image_4 {
  position: absolute;
  width: min(25vw, 360px);
  bottom: -2%;
  right: 0%;
  z-index: 1;
}

/*---------------product_designの基本設定終了-------------------------------*/

/*---------------recommend_productの基本設定-------------------------------*/
.recomend_product_section {
  width: 100%;
}

.recomend_product_inner {
  max-width: 1150px;
  width: 100%;
  margin-inline: auto;
  padding-inline: min(2.08vw, 30px);
  padding-top: 50px;
  padding-bottom: 100px;
  text-align: center;
}

.section_title_recomend {
  font-size: min(4vw, 40px); /*1000pxでのvw算出*/
  font-weight: bold;
  color: var(--text-color);
  text-align: center;
  margin-bottom: min(1.39vw, 20px);
}

.section_title_recomend span {
  display: block;
  color: #dd742c;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.tl_sub_recomend {
  font-size: min(1.7999999999999998vw, 18px); /*1000pxでのvw算出*/
  color: var(--text-color);
  margin-top: min(3.33vw, 50px);
  margin-bottom: min(3.33vw, 50px);
  line-height: 1.8;
}

.recomend_product_wrapper {
  width: 100%;
}

.product_recomend_items {
  display: flex;
  align-items: stretch;
  gap: 50px;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.product_recomend_item {
  width: 100%;
  min-width: 350px;
  text-align: center;
  padding: 0px;
  border-radius: 1.5rem;
  box-shadow: 0 0 20px rgba(118, 90, 63, 0.1);
}

.product_recomend_item img {
  width: 100%;
  aspect-ratio: 400 / 300;
  border-radius: 1.5rem;
  border-bottom-left-radius: 0rem;
  border-bottom-right-radius: 0rem;
  overflow: hidden;
  margin: 0 auto;
}

.product_recomend_item_title_wrapper {
  padding: 10px;
}

.product_recomend_item_title {
  font-size: min(1.3888888888888888vw, 20px);
  padding-block: 1.5rem;
}

.product_recomend_item_text {
  font-size: min(1.25vw, 18px);
  color: var(--text-color);
  line-height: 1.8;
  text-align: left;
}

.product_recomend_item_more {
  margin-top: 20px;
  text-align: right;
}

/* カルーセルボタン */

/* カルーセルコントロール横並び用 */
.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
}
.carousel-prev,
.carousel-next {
  position: static;
  transform: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.carousel-prev:hover,
.carousel-next:hover {
  opacity: 1;
}

/*---------------footerの基本設定-------------------------------*/

.p_footer {
  background-image: url("../images/footer_1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding-top: min(2.083333333333333vw, 30px); /*高さ調整*/
}
.p_footer_inner {
  width: 100%;
  margin-inline: auto;
  text-align: center;
  position: relative;
}
.p_footer_inner::before {
  content: "";
  display: block;
  position: absolute;
  left: 5.8%;
  bottom: 0.69%;
  width: min(20vw, 288px); /*288px(1440pxで)*/
  padding-top: 11.11111%; /*高さを調整*/
  background-image: url("../images/ft_neta2.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 10;
}
.p_footer_inner::after {
  content: "";
  display: block;
  position: absolute;
  right: 5.8%;
  bottom: 0.69%;
  width: min(20vw, 288px); /*288px(1440pxで)*/
  padding-top: 11.11111%; /*高さを調整*/
  background-image: url("../images/ft_neta1.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 10;
}
.ft_logo {
  width: min(13.88vw, 200px);
  margin-top: min(2.08vw, 30px);
  margin-inline: auto;
}
.ft_logo a img {
  width: 100%;
}
.ft_nav {
  width: 100%;
}
.ft_nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.ft_nav li {
  font-size: 15px;
  list-style: none;
}
.ft_copyright {
  display: block;
  width: 100%;
  background-image: url("../images/footer_2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding-block: 40px;
  margin-top: 3.125rem;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  position: relative;
}

/*---------------768px以下のレスポンシブル設定-------------------------------*/

@media screen and (max-width: 768px) {
  .header_logo_design img {
    width: min(20.83vw, 160px);
  }
  .mv_top_wrapper_design_mv {
    margin-top: 0px; /* ヘッダー分の余白 */
  }
  .mv_top_wrapper_design::before {
    top: 5.55%;
    left: 0;
    width: 100%;
    aspect-ratio: 0.72; /* 画像の比率に合わせて調整 */
    background-image: url("../images/image_1_sp.png"); /* デフォルトの画像 */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    margin: auto;
    transition: background-image 0.5s ease-in-out;
  }
  .mv_top_wrapper_design::after {
    content: "";
    position: absolute;
    bottom: 1.57%;
    left: 0;
    width: 100%;
    aspect-ratio: 0.72; /* 画像の比率に合わせて調整 */
    background-image: url("../images/image_2_sp.png"); /* デフォルトの画像 */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    margin: auto;
    transition: background-image 0.5s ease-in-out;
  }
  .mv_top_content_design {
    -webkit-mask-image: url("../images/mask_sp.png");
    -webkit-mask-size: 100% 100%;
    mask-image: url("../images/mask_sp.png");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: center center;
  }
  .mv_top_content_design ul {
    aspect-ratio: 0.72; /* 画像の比率に合わせて調整 */
  }
  .mv-title {
    position: absolute;
    top: 60%;
    left: 40%;
    transform: translate(-50%);
    text-align: left;
    color: var(--text-color);
    font-size: min(4.44vw, 25px);
    font-weight: bold;
    z-index: 4;
  }
  .product_design_section::before {
    top: -10px;
  }
  .product_design_section::after {
    bottom: -10px;
  }
  .c_btn {
    font-size: min(1.953125vw, 15px);
  }
  .c_btn::after {
    right: 0;
    top: 48%;
    transform: translateY(-48%);
    width: 30px; /*円の大きさを調整*/
    height: 30px; /*円の大きさを調整*/
  }
  .c_btn::before {
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent; /*三角形の大きさを調整*/
    border-bottom: 6px solid transparent; /*三角形の大きさを調整*/
    border-left: 9px solid var(--white--); /*三角形の大きさを調整*/
  }
  .btn_more {
    margin-top: min(6.510416666666667vw, 50px);
  }

  /*product_design_image_groupの調整*/
  .product_design_item {
    gap: 20px;
  }
  .product_design_item:not(:first-child) {
    margin-top: 20px;
  }
  .tl_sub {
    font-size: min(1.953125vw, 15px);
  }
  .product_design_inner p {
    font-size: min(1.953125vw, 15px);
  }
  .product_design_item_title {
    font-size: min(2.34vw, 18px);
    padding-bottom: 1.5rem;
  }
  .btn_more a {
    font-size: min(2.34375vw, 18px);
  }
  /*矢印を画像で作る時はコチラ*/
  .btn_more a::after {
    right: -40px;
    top: 48%;
    transform: translateY(-48%);
    width: 30px; /* 画像の大きさ */
    height: 30px; /* 画像の大きさ */
  }
  .product_design_image_group {
    width: 100%;
    height: 100%;
  }

  .product_design_image_1 {
    position: absolute;
    width: min(16.927083333333336vw, 130px);
    top: -3%;
    left: 5%;
    z-index: 1;
    margin: 0;
  }

  .product_design_image_2 {
    position: absolute;
    width: min(16.927083333333336vw, 130px);
    top: 0%;
    right: 0%;
    z-index: 1;
    margin: 0;
  }

  .product_design_image_3 {
    position: absolute;
    width: min(36.25vw, 280px);
    bottom: 0%;
    left: 0%;
    z-index: 1;
    margin: 0;
  }

  .product_design_image_4 {
    position: absolute;
    width: min(36.25vw, 280px);
    bottom: 0%;
    right: 0%;
    z-index: 1;
    margin: 0;
  }
  /*---------------recommend_productの調整-------------------------------*/

  .recomend_product_wrapper {
    overflow-x: hidden;
  }
  .recomend_product_inner {
    padding-inline: min(3.90625vw, 30px);
  }

  .section_title_recomend {
    font-size: min(3.90625 vw, 30px);
    margin-bottom: min(2.604166666666667vw, 20px);
  }

  .section_title_recomend span {
    font-size: 1.75rem;
  }

  .tl_sub_recomend {
    font-size: min(2.34375vw, 18px);
    margin-top: min(6.510416666666667vw, 50px);
    margin-bottom: min(6.510416666666667vw, 50px);
  }

  .product_recomend_item_title {
    font-size: min(2.604166666666667vw, 20px);
    padding-block: 1.5rem;
  }

  .product_recomend_item_text {
    font-size: min(2.083333333333333vw, 16px);
  }

  .product_recomend_item_more {
    margin-top: 20px;
    text-align: right;
  }
  /*---------------footerの設定-------------------------------*/
  .p_footer {
    background-image: url("../images/ft_sp_1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-top: min(1.3020833333333335vw, 10px); /*高さ調整*/
  }
  .p_footer_inner::before {
    content: "";
    display: block;
    position: absolute;
    left: 2%;
    bottom: 15.69%;
    width: min(28.515625vw, 219px); /*219px(768pxで)*/
    padding-top: 9%; /*高さを調整*/
    background-image: url("../images/ft_sp_neta2.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 10;
  }
  .p_footer_inner::after {
    content: "";
    display: block;
    position: absolute;
    right: 2%;
    bottom: 15.69%;
    width: min(28.515625vw, 219px); /*219px(768pxで)*/
    padding-top: 11.71875%; /*高さを調整*/
    background-image: url("../images/ft_sp_neta1.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 10;
  }
  .ft_logo {
    width: min(19.53125vw, 150px);
    margin-top: min(2.08vw, 30px);
    margin-inline: auto;
  }
  .ft_logo a img {
    width: 100%;
  }
  .ft_nav {
    width: 100%;
  }
  .ft_nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .ft_nav li {
    font-size: 15px;
    list-style: none;
  }
  .ft_copyright {
    display: block;
    width: 100%;
    background-image: url("../images/ft_sp_2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-top: 20px; /*高さ調整*/
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    position: relative;
  }
}

/*---------------450px以下のレスポンシブル設定-------------------------------*/

@media (max-width: 450px) {
  .product_design_section::before {
    top: -5px;
  }
  .product_design_section::after {
    bottom: -5px;
  }
  .product_design_image_1 {
    top: 0%;
  }
  /*product_design_image_groupの調整*/
  .product_design_inner p {
    font-size: min(2.66vw, 12px);
  }
  .product_design_item_title {
    font-size: min(3.33vw, 15px);
    padding-bottom: 1.5rem;
  }
  .c_btn {
    font-size: min(2.666666666666667vw, 15px); /*450pxで12pxのvw算出*/
  }
  .c_btn::after {
    right: 0;
    top: 48%;
    transform: translateY(-48%);
    width: 30px; /*円の大きさを調整*/
    height: 30px; /*円の大きさを調整*/
  }
  .c_btn::before {
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent; /*三角形の大きさを調整*/
    border-bottom: 6px solid transparent; /*三角形の大きさを調整*/
    border-left: 9px solid var(--white--); /*三角形の大きさを調整*/
  }
  .product_design_item img {
    width: 100%;
    width: min(133.33333333333331vw, 600px);
    aspect-ratio: 400 / 300;
  }
  .btn_more a {
    font-size: min(3.3333333333333335vw, 15px);
  }
  .product_design_image_1 {
    position: absolute;
    width: min(22.22222222222222vw, 100px);
    top: -3%;
    left: 5%;
    z-index: 1;
    margin: 0;
  }

  .product_design_image_2 {
    position: absolute;
    width: min(22.22222222222222vw, 100px);
    top: -1%;
    right: 0%;
    z-index: 1;
    margin: 0;
  }

  .product_design_image_3 {
    position: absolute;
    width: min(44.44444444444444vw, 200px);
    bottom: 0%;
    left: 0%;
    z-index: 1;
    margin: 0;
  }

  .product_design_image_4 {
    position: absolute;
    width: min(44.44444444444444vw, 200px);
    bottom: 0%;
    right: 0%;
    z-index: 1;
    margin: 0;
  }
  /*---------------recommend_productの基本設定-------------------------------*/
  .product_recomend_item {
    width: 100%;
    min-width: 280px;
  }

  .product_recomend_item img {
    width: 100%;
    aspect-ratio: 400 / 300;
  }

  .recomend_product_inner {
    padding-inline: min(6.666666666666667vw, 30px);
  }

  .section_title_recomend {
    font-size: min(4.444444444444445vw, 20px);
    margin-bottom: min(4.444444444444445vw, 20px);
  }

  .section_title_recomend span {
    font-size: 1.75rem;
  }

  .tl_sub_recomend {
    font-size: min(3.3333333333333335vw, 15px);
    margin-top: min(11.11111111111111vw, 50px);
    margin-bottom: min(11.11111111111111vw, 50px);
  }

  .product_recomend_item_title {
    font-size: min(3.5555555555555554vw, 16px);
    padding-block: 1.5rem;
  }

  .product_recomend_item_text {
    font-size: min(3.3333333333333335vw, 15px);
  }

  .product_recomend_item_more {
    margin-top: 20px;
    text-align: right;
  }
  /*---------------footerの設定-------------------------------*/
  .p_footer {
    background-image: url("../images/ft_sp_1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-top: min(2.2222222222222223vw, 10px); /*高さ調整*/
  }
  .p_footer_inner::before {
    content: "";
    display: block;
    position: absolute;
    left: 2%;
    bottom: 5.69%;
    width: min(48.66666666666667vw, 219px); /*219px(768pxで)*/
    padding-top: 15%; /*高さを調整*/
    background-image: url("../images/ft_sp_neta2.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 10;
  }
  .p_footer_inner::after {
    content: "";
    display: block;
    position: absolute;
    right: 2%;
    bottom: 6.69%;
    width: min(48.66666666666667vw, 219px); /*219px(768pxで)*/
    padding-top: 15%; /*高さを調整*/
    background-image: url("../images/ft_sp_neta1.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 10;
  }
  .ft_logo {
    width: min(33.33333333333333vw, 150px);
    margin-top: min(2.08vw, 30px);
    margin-inline: auto;
  }
  .ft_logo a img {
    width: 100%;
  }
  .ft_nav {
    width: 100%;
    padding-bottom: 80px;
  }
  .ft_nav ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem 6.25rem;
    max-width: 16.9375rem;
    max-height: 6.9375rem;
    margin-inline: auto;
  }
  .ft_nav li {
    font-size: min(3.3333333333333335vw, 15px);
    list-style: none;
  }
  .ft_copyright {
    display: block;
    width: 100%;
    background-image: url("../images/ft_sp_2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-block: 0px;
    padding-top: 10px; /*高さ調整*/
    color: #fff;
    font-size: min(2.666666666666667vw, 12px);
    font-weight: 400;
    text-align: center;
    position: relative;
  }
  /*---------------footerの設定終了-------------------------------*/
}

@media (max-width: 250px) {
  .product_recomend_item {
    min-width: 100px;
  }

  .product_recomend_item img {
    max-width: 100px;
  }
}

/*=============== アイテムのふわっとアニメーションの設定 ===============*/

/* 共通 */
.fadein-effect {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fadein-effect.is-visible {
  opacity: 1;
  transform: none;
}

/* 下から */
.fadein-up {
  transform: translateY(40px);
}
.fadein-up.is-visible {
  transform: translateY(0);
}

/* 上から */
.fadein-down {
  transform: translateY(-40px);
}
.fadein-down.is-visible {
  transform: translateY(0);
}

/* 左から */
.fadein-right {
  transform: translateX(-40px);
}
.fadein-right.is-visible {
  transform: translateX(0);
}

/* 右から */
.fadein-left {
  transform: translateX(40px);
}
.fadein-left.is-visible {
  transform: translateX(0);
}

/*=============== アイテムのふわっとアニメーションの設定の終了 ===============*/