@charset "utf-8";

/* 全体 */
:root {
  /* カラーパレット */
  --main-color: #1d454d;
  --accent-color: #ea5532;
  --bg-color: #F7F5EE;
  --sub-color: #c7a085;
  --line-color:#FFDC7B;
  --color-gray: #656565;
  --color-black: #000;
  --color-white: #fff;
}
#top {
  height: auto;
}
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.section_contents {
  width: 100%;
  margin: 0 auto;
  line-height: 2.5;
  font-size: clamp(14px, 1.2vw, 18px);
  padding: 5% 2%;
  box-sizing: border-box;
}

/* コンテンツタイトルの装飾 */
:root {
  --arrow-color: var(--main-color); 
  --arrow-depth: 30px; /* 矢印の先端の「深さ（凹凸の幅）」を固定 */
  --chevron-width: 40px; /* 右パーツの横幅 */
}
.arrow-banner {
  display: flex;
  align-items: center;
  gap: 10px; /* パーツ間の隙間 */
  height: 80px; /* 高さを指定 */
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  overflow: hidden;
}
.arrow-body {
  flex: 1;
  height: 100%;
  background-color: var(--arrow-color);
  /* calcを使って右端から30px手前から斜めにする */
  clip-path: polygon(
    0 0, 
    calc(100% - var(--arrow-depth)) 0, 
    100% 50%, 
    calc(100% - var(--arrow-depth)) 100%, 
    0 100%
  );
  display: flex;
  align-items: center;
  padding-left: 20px;
  /* 右の斜め部分＋余裕分の余白（固定px） */
  padding-right: calc(var(--arrow-depth) + 15px);
  box-sizing: border-box;
  border-radius: 0 !important;
}
/* 右側パーツ */
.chevron {
  width: 40px;
  height: 100%;
  background-color: var(--arrow-color);
  /* 凹凸の深さをメインと同じ30px（幅に対する割合）で指定 */
  clip-path: polygon(0 0, 35% 0, 100% 50%, 35% 100%, 0 100%, 65% 50%);
  flex-shrink: 0;
  border-radius: 0 !important;
}
.contents_title {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--color-white) !important;
  font-size: 24px;
  font-weight: bold;
  line-height: 1 !important;
  white-space: nowrap;
}
.ver1 {
  animation: blink1 2.5s infinite;
}
.ver2 {
  animation: blink2 2.5s infinite;
}
@keyframes blink1 {
    0%   { opacity: 1; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes blink2 {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ページトップに戻るボタン */
.pagetop-btn_01 {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 52px;
  height: 52px;
  background: var(--accent-color);
  color: var(--color-white);
  border-radius: 50%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  cursor: pointer;
  text-decoration: none;
}
.pagetop-btn_01::before {
  content: "↑";
  font-size: 24px;
  line-height: 1;
}

/* ファーストビュー*/
.firstview {
  text-align: center;
  margin: 6% 0 10%;
}
.topic_title {
  font-size: clamp(16px, 4vw, 30px);
  line-height: 1.5;
}
.sub {
  font-size: clamp(14px, 3vw, 25px);
  white-space: nowrap;
}
.box1 {
  margin-top: 4vw;
  position: relative;
  display: inline-block;
  z-index: -1;
}
.top_image {
  display: block; /* 余計な隙間をなくす */
  width: 100%; /* コンテナいっぱいに広げる */
  max-width: 600px; /* 必要に応じて最大幅を設定 */
  height: auto;
  border: none;
  align-items: center;
}
.box1::before {
  content: "";
  position: absolute; /* 親コンテナを基準に絶対配置 */
  z-index: -1; /* 画像の後ろに配置 */
  border: 2px solid var(--color-gray); /* 枠線の太さと色（お好みの色に） */
  /* ズレの設定：親コンテナから外側にずらす */
  /* ここを調整して、ズレ方を変更してください */
  top: 3vw;      /* 上へのズレ */
  left: 3vw;     /* 左へのズレ */
  right: -3vw;    /* 右へのズレ */
  bottom: -3vw;   /* 下へのズレ */
}
.top_frame {
  display: flex;
  justify-content: center;
}
.frame_text {
  writing-mode: vertical-rl;       /* 縦書き（右から左へ） */
  text-align: end;
  margin: 0 0 0 3vw;
  color: var(--color-gray);
  font-size: clamp(12px, 2.5vw, 18px);
}

/* 背景 */
#contents {
  position: relative;
  background-color: var(--bg-color);
  z-index: 0;
}
#contents::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(#d7d1c4 0.6px, transparent 0.6px);
  background-size: 12px 12px;
  opacity: .4;
  pointer-events: none;
  z-index: -1;
}
.section_contents {
  background-color: var(--bg-color);
}
body {
  background-image:
    radial-gradient(
      rgba(215, 209, 196, 0.5) 0.8px,
      transparent 0.8px
    );
  background-size: 12px 12px;
}

/* ホームに戻る */
a.btn-flat {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0.5rem 1.5rem;
  color: var(--color-black); /* 初期状態の文字色：黒 */
  border-radius: 0;
  background: var(--color-white); /* 初期状態の背景色：白 */
  text-decoration: none;
  /* 文字色の変化も滑らかにする */
  transition: color 0.5s ease-in-out;
  margin-top: 5%;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 600;
  letter-spacing: .1em;
  box-sizing: border-box;
  max-width: 100%;
}
a.btn-flat span {
  position: relative;
  z-index: 1;
}
a.btn-flat:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-color);
  transform-origin: left center;
  transform: translateX(calc(-100% + 7px));
  transition: transform 0.5s ease-in-out;
}
/* ホバー時の変化 */
a.btn-flat:hover {
  color: var(--color-white); /* ホバー時の文字色：白 */
}
a.btn-flat:hover:before {
  transform: translateX(0); /* オレンジが全画面へ伸びる */
}

/* フッター */
.copyright {
  background-color: var(--main-color);
  color: var(--color-white);
  text-align: center;
}
.copyright .small {
  margin: 0;
  padding: 2em 0;
}

/* レスポンシブ */
/* PC用　画面幅が960px以上の場合に適用 */
@media (min-width: 960px) {
  .section_contents {
    font-size: clamp(15px, 1.2vw, 18px);
  }
  .firstview {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
  }
  .topic_title {
    text-align: left;
    margin-top: 4%;
  }
  .topic_title br {
    display: block;
  }
  .contents_title {
    margin-top: 10vw;
  }
  .box1::before {
    top: 15px;      /* 上へのズレ */
    left: 15px;     /* 左へのズレ */
    right: -15px;    /* 右へのズレ */
    bottom: -15px;   /* 下へのズレ */
  }
  .frame_text {
    margin: 0 0 0 1.5vw;
  }
  .btn-flat {
    padding: 1rem 6rem;
  }
}
/* PC用　画面幅が1700px以上の場合に適用 */
@media (min-width: 1700px) {
  .top_image {
    max-width: 40vw;
  }
  .firstview {
    gap: 20px;
  }
  .contents_title {
    margin-top: 8vw;
  }
 .frame_text {
    margin: 0 0 0 1vw;
  }
}

/* スマホ・タブレット用　画面幅が450px以下の場合に適用 */
@media (max-width: 450px) {
  .contents_title {
    margin-top: 18vw;
  }
  .box1::before {
    border: 1.5px solid var(--color-gray);
  }
}
/* スマホ用　画面幅が470px以下の場合に適用 */
@media (max-width: 470px) { 
  .arrow-body {
    flex: 0.7;
  }
  .contents_title {
    font-size: 19px;
  }
}