@charset "UTF-8";

.text {
  line-height: 1.7em;
}

@media (max-width:768px) {
  .text {
    font-size: 1.8rem;
    /*スマホも文字サイズ*/
  }
}


h2 {
  font-size: 1.85em;
  font-weight: bold;
  text-align: center;
  margin-block-start: 1em;
  margin-block-end: 1em;
  line-height: 1.4;
}

h3 {
  font-size: 1.6em;
  text-align: center;
  margin-block-start: 0em;
  margin-block-end: 1em;
  line-height: 1.4;
}

h4 {
  font-size: 1.35em;
  margin-block-start: 0em;
  margin-block-end: 1em;
  line-height: 1.4;
}

/*----一番大きい見出しテキスト、PCSPテキスト調整----*/
h2.largettl {
  font-size: 2.7em;
}

@media screen and (max-width: 768px) {
  h2.largettl {
    font-size: 2em;
  }
}

.margin-top-2em {
  margin-top: 2em;
}

.margin-top-1em {
  margin-top: 1em;
}

.margin-btm-05em {
  margin-bottom: 0.5em;
}

/*----✓マーク付きデザイン----*/
.checklist ul {
  list-style-type: none;
  font-size: 1.5em;
  padding-left: 0;
  margin: 0;
}

.checklist li {
  position: relative;
  padding-left: 1.8em; /* ✓マークのスペース */
  padding-bottom: 0.6em;
}

.checklist li::before {
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 16px;
  height: 8px;
  border-left: 4px solid #ff6600;
  border-bottom: 4px solid #ff6600;
  transform: rotate(-45deg);
}

div.checklist {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

@media screen and (max-width: 768px) {
  div.checklist {
    margin-left: 3em;
    margin-right: 0;
    width: 85%;
  }
}



/*----角丸ボタン----*/
.minibtn {
  font-weight: bold;
  font-size: 0.8em;
  display: inline-block;
  background: salmon;
  /* 背景色 */
  color: #fff !important;
  /* 文字色 */
  padding: 3px 20px;
  /* 上下の余白、左右の余白 */
  text-decoration: none;
  /* デフォルトで入るリンクの下線を消す */
  border-radius: 10px;
  /* 角を丸くする */
}


/*------------cssだけでカルーセル（-------------*/
/* 全体を中央寄せ */
.carousel {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .carousel {
    margin-top: 1em;
  }
}

/* カルーセルの枠 */
.contains {
  width: 100%;
  max-width: 500px;
  height: auto%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 768px) {
  .contains {
    width: 100%;
    height: auto;
    /*aspect-ratio: 16 / 9;*/
  }
}

/* ラジオボタン非表示 */
.slide_select {
  display: none;
}

/* 各スライド */
.slide {
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transition: opacity 0.5s ease;
}

/* 選択されたスライドのみ表示 */
.slide_select:checked+.slide {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

/* iframe調整 */
iframe {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border: none;
}

/* 前・次ボタン共通（シンプル強調版） */
.scroll_button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  top: 50%;
  /*margin-top: -20px;*/
  background-color: rgba(0, 0, 0, 0.4);
  /* 控えめな背景 */
  border-radius: 50%;
  cursor: pointer;
  z-index: 3;
  transition: background-color 0.2s ease;
}

.scroll_button::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: scale(1);
  transition: transform 0.2s ease;
}

/* ホバー時：矢印が少し大きく */
.scroll_button:hover::before {
  transform: scale(1.3);
}

/* 左矢印 */
.scroll_prev {
  left: 10px;
  transform: translateY(-50%) rotate(-135deg);
}

/* 右矢印 */
.scroll_next {
  right: 10px;
  transform: translateY(-50%) rotate(45deg);
}

/* スライド移動ボタンエリア */
.move_controller {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  z-index: 2;
}

.button_move {
  display: inline-block;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  border-radius: 100%;
  cursor: pointer;
  opacity: 0.5;
  background-color: #fdfdfd;
}

.button_move:hover {
  opacity: 0.75;
}

/* 選択されたボタンの視覚効果（現在地が白くなる） */
/* スライドの枚数（ABC)や設置個数（123)に合わせる */
#Slide1A:checked ~ .move_controller label[for="Slide1A"],
#Slide1B:checked ~ .move_controller label[for="Slide1B"],
#Slide1C:checked ~ .move_controller label[for="Slide1C"],
#Slide2A:checked ~ .move_controller label[for="Slide2A"],
#Slide2B:checked ~ .move_controller label[for="Slide2B"],
#Slide2C:checked ~ .move_controller label[for="Slide2C"]{
  opacity: 1;
}

/* キャプション全体のスタイル（レスポンシブ対応済み） */
.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  /* 半透明の背景 */
  color: #ffffff;
  padding: 0.5em 1em;
  font-size: 0.85em;
  line-height: 1.4;
  box-sizing: border-box;
  z-index: 2;
  text-align: center;
  word-break: break-word;
  /* 長い語句も折り返し */
}

/* モバイル対応（フォントサイズだけ調整） */
@media screen and (max-width: 768px) {
  .caption {
    font-size: 0.85em;
    padding: 0.5em;
  }
}