@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap");
* { box-sizing: border-box; }

body { line-height: 1; background: #FFF; color: #000; font-size: clamp(14.5px, 1.2vw, 16px); width: 100%; overflow-x: hidden; padding: 0; margin: 0; font-family: "Zen Maru Gothic", sans-serif; }

#app { display: block; width: 100vw; }

img { max-width: 100%; height: auto; }

a { cursor: pointer; }

p { line-height: 1.8; margin-top: 0; }

.red { color: #CE0010; }

.br-tb { display: none; }
@media (max-width: 768px) { .br-tb { display: block; } }

.br-sp { display: none; }
@media (max-width: 480px) { .br-sp { display: block; } }

.mb { display: block; margin-bottom: clamp(50px, 7%, 150px); }

.max1080 { max-width: 1080px; margin-left: auto; margin-right: auto; }
@media (max-width: 1080px) { .max1080 { padding-left: 15px; padding-right: 15px; } }

.max1260 { max-width: 1260px; margin-left: auto; margin-right: auto; }
@media (max-width: 1260px) { .max1260._px { padding-left: 15px; padding-right: 15px; } }

.fs-small { font-size: 80%; }

.photo { font-size: 0; overflow: hidden; }
.photo a img { transition: all linear 0.3s; }
.photo a:hover img { transform: scale(1.05, 1.05); }

.hover-opacity { transition: all linear 0.3s; }
.hover-opacity:hover { opacity: 0.8; }

.flex-col3 { display: flex; flex-wrap: wrap; }
.flex-col3 li { width: 33.3%; padding: 2%; }
@media (max-width: 480px) { .flex-col3 { flex-wrap: wrap; }
  .flex-col3 li { width: 100%; margin-bottom: 1em; } }

.title { display: block; font-family: "Zen Maru Gothic", sans-serif; font-weight: 600; font-size: clamp(16px, 2vw, 20px); margin-bottom: clamp(30px, 5%, 60px); padding-top: 5em; position: relative; text-align: center; color: #000; }
.title:before { display: block; width: 100%; position: absolute; top: 0; left: 0; text-align: center; content: attr(title); font-family: "Zen Maru Gothic", sans-serif; font-size: 400%; font-weight: 900; }
@media (max-width: 480px) { .title { padding-top: 4em; }
  .title:before { font-size: 320%; } }

.bg1 { background: #FAD4DC; }

.header { display: block; background: #fff; position: relative; z-index: 1; }
.header .logo { width: 264px; padding: 10px; }

.content { position: relative; z-index: 1; }

@keyframes floating { 0% { transform: translateY(0); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0); } }
body { background: url("../images/mv_pc.jpg") no-repeat; background-size: 100%; background-position: top 50px center; }

.mainvisual { margin: 0; font-size: 0; padding: clamp(60px, 10%, 150px) 20px; }
@media (max-width: 640px) { .mainvisual { padding-top: 30px; } }
.mainvisual .mv_content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mainvisual .mv_content .mv_banner { position: relative; }
.mainvisual .mv_content .mv_banner h1 { display: block; width: 65vw; max-width: 800px; margin: -2% auto 0; }
.mainvisual .mv_content .mv_banner h1 img { width: 100%; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)); }
.mainvisual .mv_content .mv_banner .cp_link { display: block; position: absolute; bottom: -5%; right: -3vw; width: 12vw; max-width: 150px; filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.8)); animation: floating 3s ease-in-out infinite; }
@media (max-width: 640px) { .mainvisual .mv_content { align-items: flex-start; }
  .mainvisual .mv_content .mv_banner h1 { width: 90vw; margin: -2% auto 0 -6vw; }
  .mainvisual .mv_content .mv_banner .cp_link { bottom: -6%; right: -3%; width: 22vw; max-width: 200px; } }

.box_test { display: block; background: rgba(255, 255, 255, 0.5); padding-top: clamp(30px, 10%, 50px); }
@media (max-width: 480px) { .box_test { padding-top: 0; } }

.navi { padding: 0 10px; }
.navi ul { display: flex; width: fit-content; justify-content: center; align-items: stretch; margin: 0 auto; padding: 0; }
.navi ul li { padding: 0 15px; list-style-type: none; }
.navi ul li a { display: flex; justify-content: center; align-items: center; width: 180px; height: 180px; text-align: center; color: #000; text-decoration: none; position: relative; font-family: "Zen Maru Gothic", sans-serif; border-radius: 180px; transition: all linear 0.3s; }
.navi ul li a:after { display: block; background: url("../images/arrow1.png") no-repeat; background-size: 16px; content: ""; position: absolute; bottom: 10px; width: 16px; height: 10px; left: calc(50% - 8px); transition: all linear 0.3s; }
.navi ul li a:hover { transform: scale(1.03, 1.03); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); }
.navi ul li a span { display: block; font-size: 15px; line-height: 1.3; font-weight: bold; margin-bottom: 8px; }
.navi ul li a span br { display: none; }
.navi ul li a b { font-size: 30px; }
.navi ul li:nth-of-type(1) a { background: #B9CDED; }
.navi ul li:nth-of-type(2) a { background: #EDAAB8; }
.navi ul li:nth-of-type(3) a { background: #F2E4C5; }
.navi ul li:nth-of-type(4) a { background: #D0E6D0; }
@media (max-width: 860px) { .navi ul li { padding: 0 5px; }
  .navi ul li a { width: 160px; height: 160px; }
  .navi ul li a span { margin-bottom: 5px; }
  .navi ul li a span br { display: block; } }
@media (max-width: 700px) { .navi ul { display: block; width: 100%; max-width: 400px; margin: 0 auto; }
  .navi ul li { display: block; margin-bottom: 10px; }
  .navi ul li a { width: 100%; height: auto; padding: 10px 30px; border-radius: 30px; }
  .navi ul li a:after { position: absolute; bottom: calc(50% - 10px); width: 12px; height: 12px; background-size: 12px; background-position: center center; left: auto; right: 15px; transform: rotate(-90deg); }
  .navi ul li a div { display: flex; align-items: center; justify-content: center; }
  .navi ul li a div span { margin-bottom: 0; margin-right: 5px; font-size: 14px; }
  .navi ul li a div span br { display: none; }
  .navi ul li a b { font-size: 18px; } }

.area01 { padding-top: clamp(50px, 10%, 100px); padding-bottom: clamp(30px, 5%, 80px); background: rgba(255, 255, 255, 0.5); }
@media (max-width: 1080px) { .area01 { padding-bottom: 0; } }
.area01 .tab_wrap { display: flex; justify-content: center; align-items: flex-end; padding: 0 10px; }
.area01 .tab_wrap .tab { display: block; padding: 10px clamp(15px, 6%, 30px); margin: 0 5px; border-top-left-radius: 10px; border-top-right-radius: 10px; font-weight: bold; font-size: clamp(16px, 1.5vw, 18px); letter-spacing: 0.05em; font-family: "Zen Maru Gothic", sans-serif; font-weight: 900; position: relative; cursor: pointer; text-align: center; color: rgba(0, 0, 0, 0.4); }
.area01 .tab_wrap .tab:after { display: block; background: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 100%); opacity: 0.3; content: ""; width: 100%; height: 10px; position: absolute; bottom: 0; left: 0; }
.area01 .tab_wrap .tab.active { color: white; padding-bottom: 20px; }
.area01 .tab_wrap .tab.active:after { display: none; }
.area01 .tab_wrap .tab._r { background: #627CB3; }
.area01 .tab_wrap .tab._l { background: #D899C3; }
.area01 .tab_wrap .tab._b { background: #C6BA81; }
@media (max-width: 480px) { .area01 .tab_wrap { display: none; } }
.area01 .tabcontent_wrap { max-width: 1080px; margin: 0 auto; }
.area01 .tabcontent_wrap .tabcontent { display: block; padding: clamp(20px, 3%, 40px); color: #fff; display: none; }
@media (max-width: 480px) { .area01 .tabcontent_wrap .tabcontent { display: block; } }
.area01 .tabcontent_wrap .tabcontent._r { background: #627CB3; }
.area01 .tabcontent_wrap .tabcontent._l { background: #D899C3; }
.area01 .tabcontent_wrap .tabcontent._b { background: #C6BA81; }
.area01 .tabcontent_wrap .tabcontent h3 { display: block; text-align: center; font-weight: bold; font-size: clamp(18px, 2.5vw, 25px); margin-bottom: 1em; line-height: 1.5; }
.area01 .tabcontent_wrap .tabcontent h3 span { font-size: 150%; padding: 0 5px; }
@media (max-width: 480px) { .area01 .tabcontent_wrap .tabcontent h3 { font-family: "Zen Maru Gothic", sans-serif; } }
.area01 .tabcontent_wrap .tabcontent.active { display: block; }
.area01 .tabcontent_wrap .tabcontent ul { display: flex; justify-content: space-between; padding: 0; }
.area01 .tabcontent_wrap .tabcontent ul li { width: 31%; list-style-type: none; line-height: 1.5; }
.area01 .tabcontent_wrap .tabcontent ul li .photo { margin-bottom: 15px; }
.area01 .tabcontent_wrap .tabcontent ul li .photo img { border: #fff 3px solid; }
.area01 .tabcontent_wrap .tabcontent ul li b { display: block; text-align: center; font-size: clamp(18px, 1.7vw, 22px); margin-bottom: 10px; }
@media (max-width: 640px) { .area01 .tabcontent_wrap .tabcontent ul li { width: 32%; } }
@media (max-width: 480px) { .area01 .tabcontent_wrap .tabcontent ul { flex-wrap: wrap; }
  .area01 .tabcontent_wrap .tabcontent ul li { width: 100%; } }

.area02 { background: rgba(234, 208, 219, 0.3); padding: clamp(30px, 5%, 60px) 15px; }
.area02 .sub-t { display: block; text-align: center; font-size: clamp(20px, 2vw, 28px); text-align: center; }
.area02 .waku_top { display: block; padding: clamp(15px, 4%, 30px); max-width: 1260px; margin: 0 auto 60px; background: rgba(234, 208, 219, 0.5); border-radius: 10px; }
.area02 .ribbon { /*display: flex;
justify-content: center;
align-items: stretch;
width: fit-content;*/ display: block; text-align: center; margin: 0 auto clamp(15px, 3%, 30px); }
.area02 .ribbon strong { /*background: #DE94A4;
padding: 8px 5px;*/ color: #000; font-weight: bold; font-size: clamp(18px, 2.5vw, 25px); }
.area02 .ribbon:before, .area02 .ribbon:after { width: 20px; background: url("../images/ribbon.png") no-repeat; content: ""; background-size: cover; background-position: left center; }
.area02 .ribbon:after { background-position: right center; }
.area02 .tokuten { display: flex; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 0; }
.area02 .tokuten li { list-style-type: none; background: #fff; border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); padding: 10px 10px 5px; width: 23%; }
.area02 .tokuten li em { display: flex; align-items: center; justify-content: center; background: #0C3D8C; font-style: normal; font-weight: bold; font-weight: bold; font-size: clamp(15px, 1.5vw, 20px); color: #fff; padding: 5px; text-align: center; margin-bottom: 15px; border-radius: 3px; }
.area02 .tokuten li em span { font-size: clamp(20px, 2.5vw, 30px); margin-left: 3px; }
.area02 .tokuten li b { display: block; font-size: clamp(13px, 1.3vw, 18px); line-height: 1.3; text-align: center; margin-bottom: 0.5em; }
.area02 .tokuten li strong { display: block; font-size: clamp(16px, 1.5vw, 23px); text-align: center; line-height: 1.3; }
.area02 .tokuten li:nth-of-type(4) em { background: #a3204f; }
@media (max-width: 640px) { .area02 .tokuten { flex-wrap: wrap; justify-content: center; }
  .area02 .tokuten li { width: 46%; margin: 2%; padding: 10px; } }
.area02 .sub { display: block; text-align: center; }
.area02 .sub .double img { width: clamp(200px, 40%, 250px); }
.area02 .sub h3 { display: block; text-align: center; font-size: clamp(18px, 3vw, 23px); line-height: 1.6; font-weight: bold; margin: 0.3em auto 1em; }
.area02 .waku { display: block; background: rgba(255, 255, 255, 0.7); padding: clamp(30px, 4%, 40px) clamp(20px, 4%, 40px); border-radius: 10px; max-width: 980px; margin: 0 auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
.area02 .waku .sub_t { display: block; text-align: center; border-bottom: #ccc 1px solid; padding-bottom: 2em; margin-bottom: 2em; }
.area02 .waku .sub_t b { font-size: clamp(15px, 1.5vw, 18px); }
.area02 .waku .sub_t strong { display: flex; justify-content: center; align-items: center; font-size: clamp(22px, 3vw, 28px); margin: 0.5em; font-weight: 900; }
@media (max-width: 480px) { .area02 .waku .sub_t strong { display: block; margin: 0.7em 0; }
  .area02 .waku .sub_t strong span { display: block; margin-top: 3px; } }
.area02 .waku em { display: block; font-style: normal; font-weight: bold; text-align: center; }
.area02 .waku ul { padding: 0; }
.area02 .waku ul li { list-style-type: none; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.4; margin-bottom: 8px; padding-left: 20px; }
.area02 .waku ul li:before { display: block; width: 20px; content: "※"; margin: 0 0 -1.4em -20px; }
.area02 .waku ul li ul.disc { margin: 1em; }
.area02 .waku ul li ul.disc li { list-style-type: disc !important; padding-left: 0; margin-left: 0; margin-bottom: 0; }
.area02 .waku ul li ul.disc li:before { display: none; }

.area03 { background: url("../images/bg_group.png") no-repeat; background-size: cover; background-position: center bottom; padding: clamp(20px, 3%, 40px) 15px; }
.area03 .sub_t { display: flex; justify-content: center; align-items: center; }
.area03 .sub_t h3 { font-family: "Noto Serif JP", serif; color: #E8C16A; font-size: clamp(22px, 5vw, 45px); font-weight: 600; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8); }
.area03 .sub_t .icon { width: 20%; padding-left: 15px; max-width: 120px; }
@media (max-width: 480px) { .area03 .sub_t { flex-wrap: wrap; flex-direction: column-reverse; }
  .area03 .sub_t h3 { display: block; width: 100%; text-align: center; font-size: 27px; margin: 0 0 10px; }
  .area03 .sub_t .icon { width: 100%; text-align: center; }
  .area03 .sub_t .icon img { width: 70px; } }
.area03 .linkbanner { padding: 0; display: flex; align-items: flex-start; flex-wrap: wrap; }
.area03 .linkbanner li { list-style-type: none; width: calc(16.666% - 20px); margin: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); }
.area03 .linkbanner li a { text-decoration: none; }
.area03 .linkbanner li a img { width: 100%; height: auto; transition: all linear 0.3s; }
.area03 .linkbanner li a:hover img { opacity: 0.6; }
.area03 .linkbanner li p { background: rgba(255, 255, 255, 0.7); margin: 0; padding: 10px; font-size: 12px; line-height: 1.4; }
.area03 .linkbanner li p a { color: #000; }
.area03 .linkbanner li p:first-of-type { min-height: 88px; }
@media (max-width: 950px) { .area03 .linkbanner li p:first-of-type { min-height: 104px; } }
.area03 .linkbanner li p:last-of-type { display: block; padding: 0; }
.area03 .linkbanner li p:last-of-type a { display: block; width: 100%; background: #001153; color: #fff; text-align: center; font-weight: bold; padding: 5px; transition: all linear 0.3s; }
.area03 .linkbanner li p:last-of-type a:hover { color: rgba(255, 255, 255, 0.5); }
@media (max-width: 1080px) { .area03 .linkbanner li { width: calc(20% - 20px); } }
@media (max-width: 768px) { .area03 .linkbanner li { width: calc(25% - 14px); margin: 7px; }
  .area03 .linkbanner li p { font-size: 11px; padding: 7px; } }
@media (max-width: 480px) { .area03 .linkbanner li { width: calc(33.3333% - 14px); } }
@media (max-width: 430px) { .area03 .linkbanner li { width: calc(50% - 14px); }
  .area03 .linkbanner li p:first-of-type { min-height: 76px; } }

.area04 { padding: clamp(20px, 3%, 40px) 15px clamp(40px, 5%, 80px); }
.area04 .youtube { width: 100%; aspect-ratio: 16 / 9; max-width: 560px; margin: 0 auto; }
.area04 .youtube iframe { width: 100%; height: 100%; }

footer { display: block; background: #FAD4DC; padding: 20px 10px 120px; text-align: center; }
@media (max-width: 480px) { footer { padding-bottom: 80px; } }
footer address { display: block; text-align: center; font-size: 11px; font-style: normal; }

.fixed_btn { display: block; background: rgba(163, 32, 79, 0.9); padding: 20px 10px; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 1; transform: translateY(100%); /* 最初は下に隠す */ transition: transform 0.4s ease; }
.fixed_btn.is-show { transform: translateY(0); }
.fixed_btn a { display: block; background: #fff; padding: 8px 30px 5px; color: #E0949A; color: #a3204f; text-decoration: none; width: fit-content; margin: 0 auto; border-radius: 40px; transition: all linear 0.3s; }
.fixed_btn a:hover { box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.8); transform: scale(1.03, 1.03); }
.fixed_btn a b { display: block; text-align: center; font-size: clamp(18px, 2vw, 23px); font-weight: bold; }
.fixed_btn a p { display: block; text-align: center; font-size: clamp(10px, 0.9vw, 14px); font-weight: bold; margin: 0; }
@media (max-width: 480px) { .fixed_btn { background: #de94a4; padding: 0; }
  .fixed_btn a { background: rgba(150, 29, 38, 0.9); width: 100%; border-radius: 0; padding: 8px 5px 5px; background: none; color: #fff; }
  .fixed_btn a b { margin-bottom: 2px; } }