@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");

.post-content {
  max-width: 960px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: #333;
  container-type: inline-size;
  container-name: post;
}

.post-content img{
  max-width: 100%;
}

.post-content .mv{
  display: block;
  width: 100%;
  margin: 0;
  vertical-align: bottom;
}

.post-content .sec1{
  background-image: url("https://cms-edusta-prod.s3.ap-northeast-1.amazonaws.com/sites/4/2026/08/07102209/bg1.png");
  background-size: cover;
  background-position: center;
  padding:15px 0;
}

.post-content .wrap{
  padding:0 15px;
  box-sizing: border-box;
  width: 100%;

}

.post-content .sec1 .t1{
  margin:10px 0;
}

.post-content .sec1 .t1 img{
  width: 148px;
}

.post-content .sec1 p{
  font-size: 14px;
  font-weight: 500;
  margin:0;
  color:#fff;
}

.post-content .button{
  display: block;
  width: 100%;
  margin:20px auto 0;
  background: #FF8465;
  color:white;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  padding:15px 0;
  padding-right: 20px;
  box-sizing: border-box;
  position: relative;
  font-size: 17px;
  font-weight: bold;
  border:2px solid #fff;
  line-height: 1.4;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.3);
  animation: btn_animation 2s ease-in-out infinite;
  transform-origin: center center;
}

/* 控えめな2拍のハートビート */
@keyframes btn_animation {
  0%,
  100% {
    transform: scale(1);
  }
  12% {
    transform: scale(1.04);
  }
  24% {
    transform: scale(1);
  }
  36% {
    transform: scale(1.06);
  }
  50% {
    transform: scale(1);
  }
}

.post-content .button.type2{
  padding:9px 0;
  border-radius: 50px;
}

.post-content .button::before{
  content: "";
  position: absolute;
  top:50%;
  right: 10px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: url("https://cms-edusta-prod.s3.ap-northeast-1.amazonaws.com/sites/4/2026/08/07102040/arrow.png") no-repeat center center;
  background-size: contain;
}

.post-content .sec1 .t2{
  margin:20px 0 10px;
}

.post-content .sec1 .t2 img{
  width: 56px;
}

.post-content .sec1 .index__flex{
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  margin-bottom: 2px;
  padding:5px 0;
  text-decoration: underline;
}

.post-content .sec1 .index__flex img{
  width: 32px;
  margin-right: 10px;
}

.post-content .sec1 .index__flex p{
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  color:#333;
}

.post-content .sec2{
  padding:0 0 50px;
  background-image: url("https://cms-edusta-prod.s3.ap-northeast-1.amazonaws.com/sites/4/2026/08/07102727/bg2-scaled.png");
  background-size: cover;
  background-position: center;
}

.post-content .sec3{
  padding:0 0 50px;
  background-image: url("https://cms-edusta-prod.s3.ap-northeast-1.amazonaws.com/sites/4/2026/08/07103100/bg3-scaled.jpg");
  background-size: cover;
  background-position: center;
}

.post-content .sec4{
  padding:0 0 30px;
  background-image: url("https://cms-edusta-prod.s3.ap-northeast-1.amazonaws.com/sites/4/2026/08/07102817/bg4-scaled.png");
  background-size: cover;
  background-position: center;
}

/* タイトル帯：デザイン 750×260 に合わせる（画像実寸も 750×260） */
.post-content .sec__title{
  position: relative;
  width: 100%;
  aspect-ratio: 750 / 260;
  padding: 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.post-content .sec__title.ver2{
  position: relative;
  top: -20px;
}

.post-content .sec__title.ver3{
  margin:30px 0 25px;
  padding: 0;
}

/* 375幅で現行SP相当 → 750幅で2倍 → 960幅で上限 */
.post-content .sec__title.ver3 h2{
  /* 帯の高さ 55% 付近に配置（translateY による下げは不要） */
  position: absolute;
  top: 55%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  width: 100%;
  font-size: clamp(24px, 6.4cqi, 61.44px); /* 48@750 */
}

.post-content .sec__title.size2 h2{
  font-size: clamp(14px, 4cqi, 38px); /* 30@750 */
}

.post-content .sec__title img{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

.post-content .sec__title h2{
  text-align: center;
  margin: 0;
  font-size: clamp(18px, 4.8cqi, 46.08px); /* 36@750 / 46@960 */
  color:#30415E;
  line-height: 1.5;
  position: relative;
  z-index: 2;
  /* 上部の装飾を避けるため、やや下へ（前回の中間程度） */
  transform: translateY(clamp(11px, 3.2cqi, 30px));
  font-weight: bold;
}

.post-content .sec__title h2 span{
  font-size: clamp(22px, 5.8667cqi, 56.32px); /* 44@750 / 56@960 */
}

.post-content .sec2 .sec2__content{
  background-image: url("https://cms-edusta-prod.s3.ap-northeast-1.amazonaws.com/sites/4/2026/08/07102157/bg.png");
  background-size: cover;
  background-position: center;
  padding:25px 10vw;
}

.post-content .sec2 .sec2__content p.right{
  text-align: right;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.post-content .sec2 .sec2__content h3{
  background: white;
  color:#30415E;
  text-align: center;
  margin:0 0 15px;
  padding:7px 0;
  font-weight: bold;
  font-size: 18px;
}

.post-content .sec2 .sec2__content p{
  font-size: 14px;
  font-weight: 500;
  margin:0 0 20px;
}

.post-content .sec2 .sec2__content ul{
  list-style: none;
  padding:0;
  margin:0;
}

.post-content .sec2 .sec2__content ul li{
  font-size: 14px;
  font-weight: 500;
  margin:0 0 10px;
  color:#333;
  padding-left: 16px;
  position: relative;
}

.post-content .sec2 .sec2__content ul li:last-child{
  margin-bottom: 0;
}

.post-content .st__textbox{
  width: calc(100% + 30px);
  margin:0 -15px;
  box-sizing: border-box;
  padding:15px;
  background: rgba(255, 255, 255, 0.6);
}

.post-content .sec2 .sec2__content ul li::before{
  content: "";
  position: absolute;
  top:50%;
  left: 0;
  background: #32CDCE;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.post-content .st__area{
  padding-top: 40px;
}

.post-content .st__area.ver2{
  padding-top: 0;
}

.post-content .st__img{
  width: 100%;
  margin:15px 0 10px;
  line-height: 1;
  vertical-align: bottom;
}

.post-content .st__area .st__img:first-child{
  margin-top: 0;
}

.post-content .st__name{
  font-size: 16px;
  font-weight: 500;
  margin:0 0 5px;
  padding-bottom: 5px;
  border-bottom: 2px solid #60B7F0;
}

.post-content .st_info{
  font-size: 14px;
  font-weight: 500;
  margin:0;
  color:#333;
}

.post-content .qa__area{
  padding:35px 0;
}

.post-content .qa__area.pt0{
  padding-top: 0;
}

.post-content .qa__area .qa__title{
  font-size: 14px;
  font-weight: bold;
  color:#E06445;
  padding-left: 36px;
  position: relative;
  margin:30px 0 20px;
}

.post-content .qa__area .qa__title:first-child{
  margin-top: 0;
}

.post-content .qa__area .qa__title:before{
  content: "";
  position: absolute;
  top:50%;
  left: 0;
  background: #E06445;
  transform: translateY(-50%);
  width: 25px;
  height: 1px;
}

.post-content .qa__area .qa__flex{
  display: flex;
  align-items: start;
  margin-bottom: 15px;
}

.post-content .qa__area .qa__flex.last{
  margin-bottom: 0;
}

.post-content .qa__area .qa__flex .qa__img{
  width: 60px;
  margin-right: 10px;
}

.post-content .qa__area .qa__flex .qa__text{
  width: calc(100% - 70px);
  padding-bottom: 7px;
  border-bottom: 1px solid white;
}

.post-content .qa__area .qa__flex .qa__text.border-none{
  border-bottom: none;
}

.post-content .qa__area .qa__flex .qa__text .qa__name{
  font-size: 14px;
  font-weight: bold;
  margin:0 0 3px;
  color:#333;
}

.post-content .qa__area .qa__flex .qa__text .qa__a{
  font-size: 14px;
  font-weight: 500;
  margin:0;
  color:#333;
}

.post-content .wide__img{
  width: calc(100% + 30px);
  max-width: none;
  margin:0 -15px;
  display: block;
  line-height: 1;
  vertical-align: bottom;
}

.post-content .sec2__text{
  width: calc(100% + 30px);
  font-size: 12px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.5);
  margin:0 -15px 30px;
  padding:10px;
  box-sizing: border-box;
}

.post-content .title__img{
  width: 100%;
  margin: 0;
  line-height: 1;
  vertical-align: bottom;
}

.post-content .deco__area{
  background-image: url("https://cms-edusta-prod.s3.ap-northeast-1.amazonaws.com/sites/4/2026/08/07103137/deco.png");
  background-size: cover;
  background-position: top;
  padding:20px;
  margin-top: 20px;
}

.post-content .deco__area p{
  font-size: 14px;
  font-weight: 500;
  margin:0;
  color:#333;
}

.post-content .w__imgbox{
  padding:25px 65px;
}

.post-content .w__imgbox img{
  width: 100%;
}

.post-content .mt__plus{
  margin-top: 40px;
}

.post-content .t4{
 width: 83px;
 margin:30px 0 10px;
}

.post-content .sec3__text{
  font-size: 13px;
  font-weight: 500;
  margin:0;
}

.post-content .footer__info{
  background: #32CDCE;
  padding:15px 0;
  color:white;
  line-height: 1.7;
}

.post-content .footer__info h3{
  font-size: 22px;
  font-weight: 500;
  margin:0 0 15px;
}

.post-content .footer__info p.finfo__text{
  font-size: 14px;
  font-weight: 500;
  margin:0;
}

.post-content .footer__info p.finfo__text span{
  font-weight: bold;
}

.post-content .footer__info p.finfo__text.border__plus{
  border-top: 1px solid white;
  padding-top: 10px;
  margin-top: 10px;
}

.post-content .footer__info h3.type2{
  margin-top: 20px;
}

.post-content .footer__info .finfo__text2{
  font-size: 12px;
  margin:10px 0 0;
  text-align: right;
  opacity: 0.5;
  line-height: 1.3;
}




@media screen and (min-width: 540px) {
  /*
    540px〜960px で可変（960px超は上限で固定）
    計算式: clamp(min, min + (100vw - 540px) * (max - min) / 420, max)
    ※ 420 = 960 - 540
    セレクタは上部と同一（上書きが確実に効くように）
  */

  .post-content {
    --sec-pad-x: clamp(15px, calc(15px + (100vw - 540px) * 15 / 420), 30px);
  }

  /* --- sec1 --- */
  .post-content .sec1 {
    padding: clamp(15px, calc(15px + (100vw - 540px) * 15 / 420), 30px) 0;
  }

  .post-content .wrap {
    padding: 0 var(--sec-pad-x);
  }

  .post-content .sec1 .t1 img {
    width: clamp(148px, calc(148px + (100vw - 540px) * 72 / 420), 220px);
  }

  .post-content .sec1 p {
    font-size: clamp(14px, calc(14px + (100vw - 540px) * 4 / 420), 18px);
  }

  .post-content .button {
    margin: clamp(20px, calc(20px + (100vw - 540px) * 12 / 420), 32px) auto 0;
    padding: clamp(15px, calc(15px + (100vw - 540px) * 5 / 420), 20px) 0;
    padding-right: clamp(20px, calc(20px + (100vw - 540px) * 8 / 420), 28px);
    font-size: clamp(18px, calc(18px + (100vw - 540px) * 6 / 420), 24px);
  }

  .post-content .button.type2 {
    padding: clamp(9px, calc(9px + (100vw - 540px) * 3 / 420), 12px) 0;
  }

  .post-content .button::before {
    width: clamp(20px, calc(20px + (100vw - 540px) * 8 / 420), 28px);
    height: clamp(20px, calc(20px + (100vw - 540px) * 8 / 420), 28px);
  }

  .post-content .sec1 .t2 {
    margin: clamp(20px, calc(20px + (100vw - 540px) * 12 / 420), 32px) 0 10px;
  }

  .post-content .sec1 .t2 img {
    width: clamp(56px, calc(56px + (100vw - 540px) * 28 / 420), 84px);
  }

  .post-content .sec1 .index__flex {
    padding: clamp(5px, calc(5px + (100vw - 540px) * 5 / 420), 10px) 0;
  }

  .post-content .sec1 .index__flex img {
    width: clamp(32px, calc(32px + (100vw - 540px) * 16 / 420), 48px);
    margin-right: clamp(10px, calc(10px + (100vw - 540px) * 6 / 420), 16px);
  }

  .post-content .sec1 .index__flex p {
    font-size: clamp(14px, calc(14px + (100vw - 540px) * 4 / 420), 18px);
  }

  /* --- sec2 / 共通パーツ --- */
  .post-content .sec2 {
    padding: 0 0 clamp(80px, calc(80px + (100vw - 540px) * 20 / 420), 100px);
  }

  .post-content .sec__title {
    margin-bottom: clamp(20px, calc(20px + (100vw - 540px) * 10 / 420), 30px);
  }

  .post-content .sec__title.ver3 {
    margin: clamp(40px, calc(40px + (100vw - 540px) * 10 / 420), 50px) 0 clamp(25px, calc(25px + (100vw - 540px) * 5 / 420), 30px);
  }

  .post-content .sec2 .sec2__content {
    padding: clamp(25px, calc(25px + (100vw - 540px) * 10 / 420), 35px) clamp(90px, calc(90px + (100vw - 540px) * 40 / 420), 130px);
  }

  .post-content .sec2 .sec2__content p.right {
    font-size: clamp(14px, calc(14px + (100vw - 540px) * 4 / 420), 18px);
  }

  .post-content .sec2 .sec2__content h3 {
    margin: 0 0 clamp(15px, calc(15px + (100vw - 540px) * 5 / 420), 20px);
    padding: clamp(7px, calc(7px + (100vw - 540px) * 3 / 420), 10px) 0;
    font-size: clamp(16px, calc(16px + (100vw - 540px) * 4 / 420), 20px);
  }

  .post-content .sec2 .sec2__content p {
    font-size: clamp(14px, calc(14px + (100vw - 540px) * 4 / 420), 18px);
    margin: 0 0 clamp(20px, calc(20px + (100vw - 540px) * 8 / 420), 28px);
  }

  .post-content .sec2 .sec2__content ul li {
    font-size: clamp(14px, calc(14px + (100vw - 540px) * 4 / 420), 18px);
    margin: 0 0 clamp(10px, calc(10px + (100vw - 540px) * 4 / 420), 14px);
    padding-left: clamp(16px, calc(16px + (100vw - 540px) * 6 / 420), 22px);
  }

  .post-content .sec2 .sec2__content ul li::before {
    width: clamp(8px, calc(8px + (100vw - 540px) * 2 / 420), 10px);
    height: clamp(8px, calc(8px + (100vw - 540px) * 2 / 420), 10px);
  }

  .post-content .st__textbox {
    width: calc(100% + 2 * var(--sec-pad-x));
    margin: 0 calc(var(--sec-pad-x) * -1);
    padding: clamp(15px, calc(15px + (100vw - 540px) * 5 / 420), 20px);
  }

  .post-content .st__area {
    padding-top: clamp(40px, calc(40px + (100vw - 540px) * 16 / 420), 56px);
  }

  .post-content .st__img {
    margin: clamp(15px, calc(15px + (100vw - 540px) * 5 / 420), 20px) 0 clamp(10px, calc(10px + (100vw - 540px) * 4 / 420), 14px);
  }

  .post-content .st__area .st__img:first-child {
    margin-top: 0;
  }

  .post-content .st__name {
    font-size: clamp(16px, calc(16px + (100vw - 540px) * 4 / 420), 20px);
    margin: 0 0 clamp(5px, calc(5px + (100vw - 540px) * 3 / 420), 8px);
    padding-bottom: clamp(5px, calc(5px + (100vw - 540px) * 3 / 420), 8px);
  }

  .post-content .st_info {
    font-size: clamp(14px, calc(14px + (100vw - 540px) * 4 / 420), 18px);
  }

  .post-content .qa__area {
    padding: clamp(35px, calc(35px + (100vw - 540px) * 15 / 420), 50px) 0;
  }

  .post-content .qa__area .qa__title {
    font-size: clamp(14px, calc(14px + (100vw - 540px) * 4 / 420), 18px);
    padding-left: clamp(36px, calc(36px + (100vw - 540px) * 10 / 420), 46px);
    margin: clamp(30px, calc(30px + (100vw - 540px) * 10 / 420), 40px) 0 clamp(20px, calc(20px + (100vw - 540px) * 8 / 420), 28px);
  }

  .post-content .qa__area .qa__title:before {
    width: clamp(25px, calc(25px + (100vw - 540px) * 7 / 420), 32px);
  }

  .post-content .qa__area .qa__flex {
    margin-bottom: clamp(15px, calc(15px + (100vw - 540px) * 5 / 420), 20px);
  }

  .post-content .qa__area .qa__flex .qa__img {
    width: clamp(60px, calc(60px + (100vw - 540px) * 20 / 420), 80px);
    margin-right: clamp(10px, calc(10px + (100vw - 540px) * 6 / 420), 16px);
  }

  .post-content .qa__area .qa__flex .qa__text {
    width: calc(100% - clamp(70px, calc(70px + (100vw - 540px) * 26 / 420), 96px));
    padding-bottom: clamp(7px, calc(7px + (100vw - 540px) * 3 / 420), 10px);
  }

  .post-content .qa__area .qa__flex .qa__text .qa__name {
    font-size: clamp(14px, calc(14px + (100vw - 540px) * 4 / 420), 18px);
    margin: 0 0 clamp(5px, calc(5px + (100vw - 540px) * 3 / 420), 8px);
  }

  .post-content .qa__area .qa__flex .qa__text .qa__a {
    font-size: clamp(14px, calc(14px + (100vw - 540px) * 4 / 420), 18px);
  }

  .post-content .wide__img {
    width: calc(100% + 2 * var(--sec-pad-x));
    margin: 0 calc(var(--sec-pad-x) * -1);
  }

  .post-content .sec2__text {
    width: calc(100% + 2 * var(--sec-pad-x));
    font-size: clamp(12px, calc(12px + (100vw - 540px) * 3 / 420), 15px);
    margin: 0 calc(var(--sec-pad-x) * -1) clamp(30px, calc(30px + (100vw - 540px) * 10 / 420), 40px);
    padding: clamp(10px, calc(10px + (100vw - 540px) * 4 / 420), 14px);
  }

  .post-content .t4 {
    width: clamp(83px, calc(83px + (100vw - 540px) * 30 / 420), 113px);
    margin: clamp(30px, calc(30px + (100vw - 540px) * 10 / 420), 40px) 0 10px;
  }

  .post-content .sec3__text {
    font-size: clamp(13px, calc(13px + (100vw - 540px) * 3 / 420), 16px);
  }

  .post-content .deco__area{
    padding:30px 20px 20px;
  }

  /* --- footer__info --- */
  .post-content .footer__info {
    padding: clamp(15px, calc(15px + (100vw - 540px) * 10 / 420), 25px) 0;
  }

  .post-content .footer__info h3 {
    font-size: clamp(22px, calc(22px + (100vw - 540px) * 6 / 420), 28px);
    margin: 0 0 clamp(15px, calc(15px + (100vw - 540px) * 5 / 420), 20px);
  }

  .post-content .footer__info p.finfo__text {
    font-size: clamp(14px, calc(14px + (100vw - 540px) * 4 / 420), 18px);
  }

  .post-content .footer__info p.finfo__text.border__plus {
    padding-top: clamp(10px, calc(10px + (100vw - 540px) * 4 / 420), 14px);
    margin-top: clamp(10px, calc(10px + (100vw - 540px) * 4 / 420), 14px);
  }

  .post-content .footer__info h3.type2 {
    margin-top: clamp(20px, calc(20px + (100vw - 540px) * 8 / 420), 28px);
  }

  .post-content .footer__info .finfo__text2 {
    font-size: clamp(12px, calc(12px + (100vw - 540px) * 3 / 420), 15px);
    margin: clamp(10px, calc(10px + (100vw - 540px) * 4 / 420), 14px) 0 0;
  }
}