@charset "utf-8";

/*-------------------------------------------
  mainvisual
-------------------------------------------*/
.mainvisual {
  background: linear-gradient(#e1fafd, #a7d8fe);
  padding: 4% 0;
}
.mainvisual_contents {
  position: relative;
}
.mainvisual_text {
  font-size: clamp(3.5rem, calc(100vw * 70 / 1200), 7rem);
  font-weight: 900;
  line-height: 1.4;
}
.mainvisual_text span {
  font-size: clamp(4.2rem, calc(100vw * 82 / 1200), 8.2rem);
}
.mainvisual_text span.w-80 {
  font-size: clamp(4.1rem, calc(100vw * 80 / 1200), 8rem);
}
.mainvisual_img {
  text-align: right;
}
/* 
.mainvisual_medals {
  display: flex;
  position: absolute;
  gap: 10px;
  bottom: 0;
}
.mainvisual_medal {
  position: relative;
  width: clamp(105px, calc(100vw * 209 / 1200), 209px);
}

.mainvisual_medal p {
  color: #292929;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 53%;
  transform: translateY(-50%);
  font-weight: 900;
  font-size: 3rem;
  font-size: clamp(1.6rem, calc(100vw * 30 / 1200), 3rem);
  letter-spacing: 0;
  line-height: 1.36;
  text-shadow: 1px 1px 5px #fff, -1px 1px 5px #fff, 1px -1px 5px #fff,
    -1px -1px 5px #fff;
} */
 .mainvisual_medals {
  display: flex;
  position: absolute;
  gap: 10px;
  bottom: 0;
}

.mainvisual_medal {
  position: relative;
  width: clamp(105px, calc(100vw * 209 / 1200), 209px);
  perspective: 1000px;
  flex-shrink: 0;
}

.medal-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.mainvisual_medal:hover .medal-inner {
  transform: rotateY(180deg);
}

/* 表裏共通 */
.medal-front {
  position: absolute;
  inset: 0; /* top, right, bottom, left:0 の省略形 */
  backface-visibility: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.medal-back {
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.medal-front img,
.medal-back img {
  width: 100%;
  height: auto;
  display: block; /* ← これが高さ反映のポイント */
}

.medal-front p,
.medal-back p {
  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 900;
  font-size: clamp(1.6rem, calc(100vw * 30 / 1200), 3rem);
  line-height: 1.36;
  color: #292929;
  text-shadow: 1px 1px 5px #fff, -1px 1px 5px #fff,
               1px -1px 5px #fff, -1px -1px 5px #fff;
               
}

/* 裏面は180度回転 */
.medal-back {
  transform: rotateY(180deg);
}
.mainvisual_medals {
  display: flex;
  position: absolute;
  gap: 10px;
  bottom: 0;
}

/* ======================================================
　　特徴
====================================================== */
.feature {
  padding: 0;
  padding-bottom: -15%;
}

.feature_bg {
  height: 404px;
  height: 21vw;
  max-height: 404px;
  background: url(../images/top_feature-img1.png) no-repeat center center;
  background-size: cover;
}
.feature_contents {
  transform: translateY(-15%);
}

.feature_title {
  font-size: clamp(2.7rem, calc(100vw * 48 / 1200), 4.8rem);
  text-align: center;
  font-family: "Kosugi Maru", sans-serif;
  text-shadow: 2px 2px 20px #fff, -2px 2px 13px #fff, 2px -2px 13px #fff,
    -2px -2px 13px #fff;
}
.feature_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 117px;
  margin-top: clamp(40px, calc(100vw * 40 / 1200), 40px);
}
.feature_text {
  flex-basis: 67.5%;
  font-size: clamp(1.4rem, calc(100vw * 24 / 1200), 2.4rem);
  line-height: 2;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.feature_img {
  flex-basis: 26.25%;
}
.feature_bottom {
  display: flex;
  gap: 20px;
  max-width: 1000px;
  margin: 50px auto 0;
}
.feature_item {
  font-weight: 500;
  border-radius: 30px 30px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  justify-content: space-between;
}
.feature_item-head {
  text-align: center;
  font-size: clamp(1.6rem, calc(100vw * 24 / 1200), 2.4rem);
  line-height: 1.58;
  background-color: #1f65b7;
  color: #fff;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.feature_item-body {
  background-color: #fcfad7;
  font-size: clamp(1.2rem, calc(100vw * 16 / 1200), 1.6rem);
  line-height: 1.75;
  padding: clamp(15px, calc(100vw * 30 / 1200), 30px)
    clamp(13px, calc(100vw * 26 / 1200), 26px);
}
/* ======================================================
　　お知らせ
====================================================== */
.news {
  background-color: #e4f3fe;
}
.news_lists {
  margin-top: clamp(40px, calc(100vw * 108 / 1200), 108px);
}
.news_list {
  display: flex;
  font-size: clamp(1.3rem, calc(100vw * 20 / 1200), 2rem);
}
.news_list:nth-of-type(n + 2) {
  margin-top: clamp(20px, calc(100vw * 50 / 1200), 50px);
}
.news_list .date {
  width: 25%;
}
.news_list .title {
  font-size: clamp(1.3rem, calc(100vw * 20 / 1200), 2rem);
  width: 75%;
}
.btn {
  background-color: #1f65b7;
  display: inline-block;
  color: #fff;
  margin: 0 auto;
  font-size: clamp(1.4rem, calc(100vw * 20 / 1200), 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 120px;
  min-height: 34px;
  border-radius: 20px;
  border-radius: clamp(10px, calc(100vw * 20 / 1200), 20px);
  margin-top: clamp(10%, calc(100vw * 80 / 1200), 80px);
  font-weight: 700;
}
.news_btn {
  width: clamp(140px, calc(100vw * 200 / 1200), 200px);
  height: clamp(40px, calc(100vw * 60 / 1200), 60px);
}
.title-pc {
  display: inline;
}
.title-sp {
  display: none;
}
/* ======================================================
　　Instgram
====================================================== */
.instgram {
  background-color: #fcfbea;
}
.instgram .section-title::before,
.instgram .section-title::after {
  display: none;
}
.instgram_contents {
  margin-top: 5%;
}
.instgram_btn {
  width: clamp(260px, calc(100vw * 340 / 1200), 340px);
  height: clamp(40px, calc(100vw * 60 / 1200), 60px);
}
/* ======================================================
　　cta
====================================================== */
.cta {
  text-align: center;
}
.cta_title {
  font-size: clamp(2.3rem, calc(100vw * 40 / 1200), 4rem);
  font-family: "Kosugi Maru", sans-serif;
}
.cta_contents {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10%;
  margin-top: 40px;
}
.cta_contact {
  justify-self: flex-end;
}
.cta_img1 {
  width: clamp(136px, calc(100vw * 170 / 1200), 170px);
}
.cta_tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.cta_tel img {
  width: clamp(34.5px, calc(100vw * 42 / 1200), 42px);
}
.cta_tel a {
  line-height: 1;
  font-weight: 800;
  font-size: clamp(3.5rem, calc(100vw * 48 / 1200), 4.8rem);
}
.cta_time {
  margin-top: 20px;
  font-size: clamp(2rem, calc(100vw * 24 / 1200), 2.4rem);
}
.cta_img2 {
  width: clamp(103px, calc(100vw * 201 / 1200), 201px);
  flex-shrink: 1;
}
.cta_bottom {
  margin-top: 40px;
  font-size: clamp(1.6rem, calc(100vw * 18 / 1200), 1.8rem);
  font-weight: 500;
}