@charset "UTF-8";
/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
/* FontAwesome（外部読み込み） */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");
/*====================
  変数定義
====================*/
/*====================
  Mixin（メディアクエリ管理）
====================*/
/*====================
  共通: デバイス表示制御（PC/SP）
====================*/
.pc_none {
  display: none;
}

.sp_none {
  display: block;
}

@media (max-width: 768px) {
  .pc_none {
    display: block;
  }
  .sp_none {
    display: none;
  }
}
/*====================
  ベース設定（BASE）
====================*/
html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
}

body {
  font-family: "Noto sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
  color: #000000;
  background-color: #ffffff;
}

/* リンク設定 */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a:hover {
  opacity: 0.6;
}

/* 外部リンクアイコン */
a.blank::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  vertical-align: middle;
  content: "\f08e"; /* FontAwesomeの外部リンクアイコン */
  padding-left: 3px;
}

/* 画像 */
img {
  max-width: 100%;
  height: auto;
}

/*======================================*/
.header {
  padding: 20px;
  text-align: left;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 90px;
  background-color: #ffffff;
  z-index: 100;
}
@media (max-width: 768px) {
  .header {
    padding: 10px;
    height: 45px;
  }
  .header h1 img {
    width: 70px;
  }
}

.mvTitle {
  background-color: #06c755;
  text-align: center;
  padding: 108px 5% 28px 5%;
}
@media (max-width: 768px) {
  .mvTitle {
    padding: 54px 5% 14px 5%;
  }
}

main {
  background-image: url(../img/bg.png);
  background-size: 100% auto;
  background-repeat: repeat-y;
}

.friendsBt,
.note,
.add,
.good,
.about,
.poss,
.confirm,
.point,
.pointNote {
  max-width: 1130px;
  margin: 0 auto;
  background-color: #ffffff;
}
@media (max-width: 768px) {
  .friendsBt,
  .note,
  .add,
  .good,
  .about,
  .poss,
  .confirm,
  .point,
  .pointNote {
    background-color: rgba(255, 255, 255, 0);
  }
}

.friendsBt {
  padding: 60px 5%;
}
.friendsBt a {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 860px;
  height: 160px;
  border-radius: 80px;
  border: none;
  color: white;
  font-size: 6em;
  font-weight: bold;
  margin: 0 auto;
  background: url(../img/bt_arrow.png) 90% center/20px 40px no-repeat, linear-gradient(to right, #ff0000, #f08c1e);
}
@media (max-width: 768px) {
  .friendsBt {
    padding: 30px 5%;
  }
  .friendsBt a {
    font-size: 2.6em;
    height: 60px;
    border-radius: 30px;
    background: url(../img/bt_arrow.png) 90% center/10px 20px no-repeat, linear-gradient(to right, #ff0000, #f08c1e);
  }
}

.good {
  padding: 60px 5% 200px 5%;
}
.good figure {
  text-align: center;
}
.good ul {
  background-image: url(../img/good_list.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 800px;
  margin: 40px auto;
}
.good ul li {
  padding: 0 50px;
  font-size: 3.2em;
  font-weight: bold;
}
.good ul li b {
  color: #06c755;
}
.good ul li span {
  color: #e61c24;
}
.good .goodBt a {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 860px;
  height: 160px;
  border-radius: 80px;
  border: none;
  color: white;
  font-size: 6em;
  font-weight: bold;
  margin: 0 auto;
  background: url(../img/bt_arrow.png) 90% center/20px 40px no-repeat, linear-gradient(to right, #06c755, #d2d921);
}
@media (max-width: 768px) {
  .good {
    padding: 30px 5% 100px 5%;
  }
  .good ul {
    margin: 20px auto;
  }
  .good ul li {
    padding: 0 18px;
    font-size: 1.4em;
  }
  .good .goodBt a {
    font-size: 2.6em;
    height: 60px;
    border-radius: 30px;
    background: url(../img/bt_arrow.png) 90% center/10px 20px no-repeat, linear-gradient(to right, #06c755, #d2d921);
  }
}

.about .aboutBox {
  background-color: #f7f7ca;
  max-width: 1060px;
  margin: 0 auto;
  text-align: center;
  border-radius: 20px;
  position: relative;
}
.about .aboutBox .aboutTitle {
  position: absolute;
  left: 0;
  top: -77px;
  width: 100%;
}
.about .aboutBox .aboutTitle h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(../img/about_title.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 756px;
  height: 178px;
  padding: 0 0 20px 0;
  font-size: 5.8em;
  line-height: 1em;
  font-weight: bold;
  text-align: center;
  margin: 0 auto;
  color: #e61c24;
}
.about .aboutBox .aboutTitle h2 span {
  font-size: 0.6em;
  padding: 0.4em 0 0 0;
}
.about .aboutBox h3 {
  padding: 140px 0 0 0;
  font-size: 3em;
  font-weight: bold;
  line-height: 1.8em;
}
.about .aboutBox h3 span {
  font-size: 1.4em;
}
.about .aboutBox ul {
  padding: 15px 0 0 0;
}
.about .aboutBox li {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  font-size: 1.8em;
  font-weight: bold;
  color: #e61c24;
  background-image: url(../img/about_txt_bg.png);
  background-size: 356px 9px;
  background-repeat: repeat-x;
  background-position: bottom;
}
.about .aboutBox figure {
  padding: 90px 0 80px 0;
}
.about .aboutBox h4 {
  font-size: 4.8em;
  font-weight: bold;
  background-image: url(../img/about_title_bg.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 260px;
  margin: 0 auto;
}
.about .aboutBox h5 {
  font-size: 4em;
  font-weight: bold;
  padding: 30px 0 80px 0;
}
.about .aboutBox h5 span {
  background-image: url(../img/about_txt_bg.png);
  background-repeat: repeat-x;
  background-position: bottom;
  padding: 0 0 8px 0;
}
.about .aboutBox h5 b {
  font-size: 1.4em;
  color: #e61c24;
}
@media (max-width: 768px) {
  .about .aboutBox {
    margin: 0 5%;
  }
  .about .aboutBox .aboutTitle {
    top: -77px;
    width: 100%;
    padding: 0 5%;
  }
  .about .aboutBox .aboutTitle h2 {
    height: 178px;
    padding: 0 0 10px 0;
    font-size: 2.6em;
  }
  .about .aboutBox .aboutTitle h2 span {
    font-size: 0.6em;
    padding: 0.4em 0 0 0;
  }
  .about .aboutBox h3 {
    padding: 70px 0 0 0;
    font-size: 1.5em;
  }
  .about .aboutBox h3 span {
    font-size: 1.4em;
  }
  .about .aboutBox ul {
    padding: 8px 0 0 0;
  }
  .about .aboutBox li {
    font-size: 1.1em;
    letter-spacing: 0;
    background-size: 178px 5px;
  }
  .about .aboutBox figure {
    padding: 45px 5% 30px 5%;
  }
  .about .aboutBox h4 {
    font-size: 2.4em;
    background-size: 50% auto;
  }
  .about .aboutBox h5 {
    font-size: 1.8em;
    padding: 15px 0 40px 0;
  }
  .about .aboutBox h5 span {
    background-image: url(../img/about_txt_bg.png);
    background-size: 356px 9px;
    padding: 0 0 4px 0;
  }
  .about .aboutBox h5 b {
    font-size: 1.4em;
    color: #e61c24;
  }
}

.poss {
  padding: 100px 0 60px 0;
}
.poss h2 {
  font-size: 4.2em;
  font-weight: bold;
  background-image: url(../img/poss_bg.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 1024px;
  margin: 0 auto;
  color: #a08c14;
  text-align: center;
  padding: 20px 0;
}
.poss h2 span {
  font-size: 1.4em;
}
@media (max-width: 768px) {
  .poss {
    padding: 30px 5% 20px 5%;
  }
  .poss h2 {
    background-image: url(../img/poss_bg_sp.png);
    font-size: 2.2em;
    background-size: 100% auto;
    padding: 10px 0;
  }
  .poss h2 span {
    font-size: 1.3em;
  }
}

.confirm h2 {
  font-size: 4.2em;
  font-weight: bold;
  background-image: url(../img/confirm_bg.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 674px;
  margin: 0 auto;
  text-align: center;
  padding: 80px 0 100px 0;
}
.confirm h2 span {
  color: #e61c24;
}
.confirm h2 b {
  font-size: 1.4em;
}
@media (max-width: 768px) {
  .confirm {
    padding: 0 5%;
  }
  .confirm h2 {
    font-size: 2.1em;
    background-size: 100% auto;
    max-width: 337px;
    padding: 40px 0 50px 0;
  }
  .confirm h2 b {
    font-size: 1.4em;
  }
}

.point table {
  max-width: 1000px;
  margin: 0 auto;
  background-color: #fff;
  border-top: solid 1px #000;
}
.point table tr {
  border-bottom: solid 1px #000;
}
.point table th {
  background-color: #b19c3e;
  color: #fff;
  font-size: 2.8em;
  line-height: 1.4em;
  padding: 30px 0;
}
.point table th:nth-child(2) {
  border-left: solid 1px #000;
  border-right: solid 1px #000;
}
.point table td {
  padding: 30px;
  font-size: 2.3em;
}
.point table td:nth-child(2) {
  text-align: center;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
}
.point table td:nth-child(3) {
  text-align: center;
}
.point table td sup {
  font-size: 0.6em;
}
.point table td div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.point table td p {
  font-size: 0.7em;
  line-height: 1.4em;
  text-indent: -1em;
  padding: 0 0 0 1em;
}
.point table td p:first-child {
  padding: 20px 0 0 1em;
}
@media (max-width: 768px) {
  .point {
    padding: 0 5%;
  }
  .point table {
    max-width: 1000px;
    margin: 0 auto;
    border-top: solid 1px #000;
  }
  .point table th {
    font-size: 1.4em;
    padding: 15px 0;
  }
  .point table td {
    padding: 15px 12px;
    font-size: 1.2em;
  }
  .point table td p {
    font-size: 0.6em;
    padding: 0 0 0 1em;
  }
  .point table td p:first-child {
    padding: 10px 0 0 1em;
  }
  .point table td img {
    width: 85px;
  }
  .point table td:last-child {
    white-space: nowrap;
  }
}

.pointNote {
  padding: 20px 0 80px 0;
}
.pointNote ul {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 0 30px 0;
}
.pointNote ul li {
  font-size: 1.8em;
  text-indent: -1em;
  padding-left: 1em;
}
.pointNote p {
  font-size: 1.8em;
  max-width: 1000px;
  margin: 0 auto;
}
.pointNote .pointNoteBt {
  font-size: 2.6em;
  text-align: center;
  padding: 1em 0 2em 0;
}
.pointNote .pointNoteBt a {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .pointNote {
    padding: 10px 5% 40px 5%;
  }
  .pointNote ul {
    padding: 0 0 15px 0;
  }
  .pointNote ul li {
    font-size: 1.3em;
  }
  .pointNote p {
    font-size: 1.3em;
  }
  .pointNote .pointNoteBt {
    font-size: 1.8em;
  }
}

.add h2 {
  text-align: center;
  font-weight: bold;
  font-size: 7em;
  letter-spacing: 0.05em;
  background-image: url(../img/add_title.png);
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  max-width: 1010px;
  margin: 0 auto 40px auto;
  padding: 10px 0;
}
.add h2 span {
  color: #06c755;
}
.add h2 small {
  font-size: 0.6em;
}
.add .addBox {
  background-color: #fff;
  border: solid #06c755 10px;
  border-radius: 10px;
  max-width: 1060px;
  margin: 0 auto;
  text-align: center;
}
.add .addBox h3 {
  font-size: 4em;
  font-weight: bold;
  padding: 46px;
}
.add .addBox p {
  font-size: 1.8em;
  padding: 46px 0 30px 0;
}
@media (max-width: 768px) {
  .add {
    padding: 0 5%;
  }
  .add h2 {
    font-size: 3.5em;
    margin: 0 auto 20px auto;
    padding: 5px 0;
    line-height: 0.8em;
  }
  .add h2 small {
    line-height: 0.8em;
  }
  .add .addBox {
    border: solid #06c755 5px;
    border-radius: 5px;
  }
  .add .addBox h3 {
    font-size: 2em;
    padding: 23px;
  }
  .add .addBox p {
    font-size: 1.2em;
    padding: 23px 0 15px 0;
  }
  .add .addBox figure {
    padding: 0 15%;
  }
}

.note {
  padding: 60px 5% 40px 5%;
  max-width: 100%;
}
.note p {
  font-size: 1.3em;
  text-align: left;
}
@media (max-width: 768px) {
  .note {
    padding: 30px 3% 20px 3%;
  }
  .note p {
    font-size: 0.8em;
    letter-spacing: 0;
  }
}

.footer {
  background-color: #ebebeb;
  text-align: center;
  padding: 40px 5%;
}
.footer address {
  font-size: 1.8em;
}
@media (max-width: 768px) {
  .footer {
    padding: 20px 5%;
  }
  .footer address {
    font-size: 1.2em;
  }
}

.mv {
  line-height: 0;
  overflow: hidden;
  position: relative;
}
.mv::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px; /* グラデの高さ */
  background: linear-gradient(to bottom, #ebebeb, #ffffff);
}

.mv01,
.mv02,
.mv03,
.mv04 {
  background-image: url(../img/mv01.webp?250724);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute; /* ← left:0 を right:0 に変更 */
  width: 262%;
  aspect-ratio: 7860/2854;
  contain: paint; /* 再ペイント範囲を限定 */
  will-change: transform; /* GPU レイヤ固定 */
}
@media (max-width: 768px) {
  .mv01,
  .mv02,
  .mv03,
  .mv04 {
    width: 524%;
  }
}

.mv01 {
  top: -262%; /* 右上スタート */
  left: 0%;
  animation: slide-re 48s linear infinite;
}

.mv02 {
  top: -236%; /* 右上スタート */
  left: 0%;
  animation: slide-20deg-ru2ld 48s linear infinite;
}

.mv03 {
  bottom: 0%; /* 右上スタート */
  left: 50%;
  animation: slide-re 48s linear infinite;
}

.mv04 {
  bottom: 0%; /* 右上スタート */
  left: 75%;
  animation: slide-20deg-ru2ld 48s linear infinite;
}

@media (max-width: 768px) {
  .mv01 {
    top: -144%; /* 右上スタート */
    left: 0%;
  }
  .mv02 {
    top: -129%; /* 右上スタート */
    left: 0%;
  }
  .mv03 {
    bottom: -1%; /* 右上スタート */
    left: 0%;
  }
  .mv04 {
    bottom: -1%; /* 右上スタート */
    left: 50%;
  }
}
/* ===== 20°を右上→左下に変換したキーフレーム =====
      X方向：マイナス (−cos20° ≒ −0.94)
      Y方向：プラス  (＋sin20° ≒  0.342)
*/
@keyframes slide-20deg-ru2ld {
  from {
    transform: translate(0, 0); /* 右上端 */
  }
  to {
    transform: translate(-133.48vmax, 48.564vmax); /* 下方向へ */
  }
}
@keyframes slide-re {
  from {
    transform: translate(-133.48vmax, 48.564vmax); /* 下方向へ */
  }
  to {
    transform: translate(0, 0); /* 右上端 */
  }
}/*# sourceMappingURL=home.css.map */

/*250616調整*/
.point table td div.disney_logo{
  margin-bottom: 1em;
}
/*250715調整*/
.kv_sp img{
  width: 100%;
}