/* ================================================================================
   ABOUT PAGE (scoped by body slug: .about)
   - 元CSS準拠（推測でカラム数など変更しない）
   - migration safe: momo-* / c-* 両対応（必要な範囲のみ）
================================================================================ */


/* ==================================================
   ページヘッダー
================================================== */
.about .momo-page-header,
.about .c-page-header {
  background-color: #fef4f7;
  padding: 60px 20px 40px;
  text-align: center;
}

.about .momo-page-title,
.about .c-page-title {
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.about .momo-page-subtitle,
.about .c-page-subtitle {
  font-size: 18px;
  color: #666;
}


/* ==================================================
   見出し
================================================== */
.about .momo-section-title,
.about .c-section-title {
  color: #333;
}


/* ==================================================
   モモとは（理念）
================================================== */
.about .momo-about-mission,
.about .c-about-mission {
  padding: 80px 20px;
  background-color: #fff;
}

.about .momo-about-mission-inner,
.about .c-about-mission__inner {
  max-width: 900px;
  margin: 0 auto;
}

.about .momo-mission-content p,
.about .c-about-mission__content p {
  font-size: 18px;
  line-height: 2;
  color: #333;
  margin-bottom: 20px;
}

/* ✅ インライン排除（元HTML：style="margin-top:40px; text-align:center;"） */
.about .momo-about-mission-cta {
  margin-top: 40px;
  text-align: center;
}

/* ✅ About内だけの “mt-8” 吸収 */
.about .mt-8 {
  margin-top: 40px;
}


/* ==================================================
   活動内容
   ※元CSS：2列 / margin-top: 40px（ここは絶対に変えない）
================================================== */
.about .momo-activities,
.about .c-activities {
  padding: 80px 20px;
  background-color: #fff;
}

.about .momo-activities-inner,
.about .c-activities__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.about .momo-activities-grid,
.about .c-activities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.about .momo-activity-card,
.about .c-activity-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.about .momo-activity-card:hover,
.about .c-activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 25px rgba(0,0,0,0.15);
}

.about .momo-activity-image,
.about .c-activity-image {
  width: 100%;
  /* height: 200px; */
  overflow: hidden;
}

.about .momo-activity-image img,
.about .c-activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about .momo-activity-content,
.about .c-activity-content {
  padding: 30px 20px;
}

.about .momo-activity-title,
.about .c-activity-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.about .momo-activity-description,
.about .c-activity-description {
  font-size: 16px !important;
  text-align: left;
  line-height: 1.8;
  color: #666;
  margin-bottom: 20px;
}


/* ==================================================
   代表者メッセージ
================================================== */
.about .momo-message,
.about .c-message {
  padding: 80px 20px;
  background-color: #fef4f7;
}

.about .momo-message-inner,
.about .c-message__inner {
  max-width: 900px;
  margin: 0 auto;
}

.about .momo-message-content,
.about .c-message__content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  margin-top: 60px;
}

.about .momo-message-photo,
.about .c-message__photo {
  text-align: center;
}

.about .momo-message-photo img,
.about .c-message__photo img {
  width: 100%;
  max-width: 240px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.about .momo-message-role,
.about .c-message__role {
  font-size: 14px;
  color: #666;
}

.about .momo-message-name-text,
.about .c-message__name-text {
  font-size: 20px;
  font-weight: 700;
  color: #333;
}

.about .momo-message-title,
.about .c-message__title {
  font-size: 24px;
  font-weight: 700;
  color: #eb6e8f;
  margin-bottom: 30px;
}

.about .momo-message-text p,
.about .c-message__text p {
  font-size: 16px;
  line-height: 2;
  color: #333;
}


/* ==================================================
   Responsive（元CSS準拠）
================================================== */
@media (max-width: 1024px) {
  .about .momo-about-mission,
  .about .c-about-mission,
  .about .momo-message,
  .about .c-message,
  .about .momo-activities,
  .about .c-activities {
    padding: calc(40px + 40 * (100vw - 768px) / 256) 20px;
  }
  .about .momo-message-content,
  .about .c-message__content {
    gap: calc(10px + 30 * (100vw - 768px) / 256);
  }

  .about .momo-activity-content,
  .about .c-activity-content {
    display: flex;
		flex-direction: column;
		/*flex: 1;*/
		height: 100%;
    padding: 30px calc(0.1px + 19.9 * (100vw - 768px) / 256);
  }
  .about .momo-activity-content .momo-btn,
  .about .c-activity-content .momo-btn {
    min-width: calc(288px + 36 * (100vw - 768px) / 256);
    margin-top: auto;
    padding: 12px;
  }
}

@media (max-width: 767px) {
  .about .momo-about-mission,
  .about .c-about-mission,
  .about .momo-message,
  .about .c-message,
  .about .momo-activities,
  .about .c-activities {
    padding: 40px 20px;
  }
  .about .momo-activities-grid,
  .about .c-activities-grid,
  .about .momo-message-content,
  .about .c-message__content {
    grid-template-columns: 1fr;
  }
}


/* ==================================================
   About: title variations (subtitle代用を廃止)
   - calc()で可変（SP〜TABの自然な伸縮）
================================================== */
.about .is-mission-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #eb6e8f !important;
  text-align: center;
  margin-bottom: 40px !important;
}

.about .is-mission-title::before,
.about .is-mission-title::after {
  content: none !important;
}

.about .is-mini-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #eb6e8f !important;
  text-align: center;
  margin-bottom: 40px !important;
}

@media (max-width: 768px) {
  .about .is-mission-title {
    font-size: calc(20px + 4 * (100vw - 320px) / 448) !important;
  }

  .about .is-mini-title {
    font-size: calc(18px + 2 * (100vw - 320px) / 448) !important;
  }
}


/*===============================================================================================*/
/*=== [SELF REFACTORING & additional style]
=================================================================================================*/

.about .mv {
  background-color: #fef4f7;
	padding: 100px 20px;
	text-align: center;
}
.about .mv .inner {
  max-width: 900px;
}
.about .mv .h1.ttl span {
  position: relative;
}
.about .mv .inner:after,
.about .mv h1.ttl:before,
.about .mv h1.ttl:after,
.about .mv h1.ttl span:before,
.about .mv h1.ttl span:after {
  position: absolute;
  display: block;
  content: "";
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: contain;
}
.about .mv .inner:after {
  top: -30px;
	right: 106px;
	width: 140px;
	height: 302px;
  background-image: url(../../img/chara-1.webp);
}
.about .mv h1.ttl:before {
  bottom: -134px;
	left: -164px;
	width: 101.5px;
	height: 76.5px;
  background-image: url(../../img/chara-5.webp);
}
.about .mv h1.ttl:after {
  bottom: -74px;
	left: 291px;
	width: 110px;
	height: 80.5px;
  background-image: url(../../img/chara-2.webp);
}
.about .mv h1.ttl span:before {
  bottom: -139px;
	left: -35px;
	width: 111.5px;
	height: 105px;
  background-image: url(../../img/chara-4.webp);
}
.about .mv h1.ttl span:after {
  bottom: -161px;
	left: 108px;
	width: 105.5px;
	height: 135px;
  background-image: url(../../img/chara-3.webp);
}

@media (max-width: 1024px) {
  .about .mv {
    padding: calc(40px + 60 * (100vw - 768px) / 256) 20px;
  }
  .about .mv .inner:after {
    top: calc(-15px - 15 * (100vw - 768px) / 256);
    right: calc(72px + 34 * (100vw - 768px) / 256);
    width: calc(102px + 38 * (100vw - 768px) / 256);
    height: calc(218px + 84 * (100vw - 768px) / 256);
  }
  .about .mv h1.ttl:before {
    bottom: calc(-90px - 44 * (100vw - 768px) / 256);
    left: calc(-60px - 104 * (100vw - 768px) / 256);
    width: calc(78.5px + 23 * (100vw - 768px) / 256);
    height: calc(59.5px + 17 * (100vw - 768px) / 256);
  }
  .about .mv h1.ttl span:before {
    bottom: calc(-94px - 45 * (100vw - 768px) / 256);
    left: calc(38px - 78 * (100vw - 768px) / 256);
    width: calc(78.5px + 33 * (100vw - 768px) / 256);
    height: calc(74px + 31 * (100vw - 768px) / 256);
  }
  .about .mv h1.ttl span:after {
    bottom:calc(-77px - 84 * (100vw - 768px) / 256);
    left: calc(142px - 34 * (100vw - 768px) / 256);
    width: calc(78.5px + 27 * (100vw - 768px) / 256);
    height: calc(64px + 71 * (100vw - 768px) / 256);
  }
  .about .mv h1.ttl:after {
    bottom: calc(-48px - 26 * (100vw - 768px) / 256);
    left: calc(286px + 5 * (100vw - 768px) / 256);
    width: calc(86px + 24 * (100vw - 768px) / 256);
    height: calc(62.5px + 18 * (100vw - 768px) / 256);
  }
}
@media (max-width: 768px) {
  .about .mv {
    padding: calc(20px + 20 * (100vw - 320px) / 448) 20px;
  }
  .about .mv h1.ttl {
    margin-left: calc(-9.99px + 9.99 * (100vw - 320px) / 448);
  }
  .about .mv h1.ttl:before {
		bottom: calc(-32px - 58 * (100vw - 320px) / 448);
		left: calc(-11px - 49 * (100vw - 320px) / 448);
		width: calc(38.25px + 40.25 * (100vw - 320px) / 448);
		height: calc(29.75px + 29.75 * (100vw - 320px) / 448);
	}
  .about .mv h1.ttl span:before {
    bottom: calc(-31px - 63 * (100vw - 320px) / 448);
    left: calc(40px - 2 * (100vw - 320px) / 448);
    width: calc(37.5px + 41 * (100vw - 320px) / 448);
    height: calc(35px + 39 * (100vw - 320px) / 448);
  }
  .about .mv h1.ttl span:after {
    bottom: calc(-25px - 52 * (100vw - 320px) / 448);
    left: calc(88px + 54 * (100vw - 320px) / 448);
    width: calc(36.5px + 42 * (100vw - 320px) / 448);
    height: calc(30px + 34 * (100vw - 320px) / 448);
  }
/*
  .about .mv h1.ttl:after {
    bottom: calc(-48px - 26 * (100vw - 768px) / 256);
    left: calc(286px + 5 * (100vw - 768px) / 256);
    width: calc(86px + 24 * (100vw - 768px) / 256);
    height: calc(62.5px + 18 * (100vw - 768px) / 256);
  }
*/
  .about .mv h1.ttl:after {
    bottom: calc(-14px - 34 * (100vw - 320px) / 448);
    left: calc(155px + 131 * (100vw - 320px) / 448);
    width: calc(40px + 46 * (100vw - 320px) / 448);
    height: calc(29px + 33.5 * (100vw - 320px) / 448);
  }
  .about .mv .inner:after {
    top: calc(6px - 21 * (100vw - 320px) / 448);
    right: calc(0.1px + 71.9 * (100vw - 320px) / 448);
    width: calc(48px + 54 * (100vw - 320px) / 448);
    height: calc(103px + 115 * (100vw - 320px) / 448);
  }
}

.about h2.ttl {
  font-size: 30px !important;
}

/*==========================*/
/*=== [INTRO]
=============================*/
.about .intro {
  padding-top: 80px;
}
.about .intro h2.ttl {
  font-size: 28px !important;
}
.about .intro .content p {
  line-height: 1.8;
}
.about .intro .content p small {
  display: block;
  line-height: 1.8em;
}

@media (max-width: 1024px) {
  .about .intro h2.ttl {
    font-size: calc(22px + 6 * (100vw - 768px) / 256) !important;
  }
}
@media (max-width: 768px) {
  .about .intro {
    padding-top: calc(40px + 40 * (100vw - 320px) / 448);
  }
  .about .intro h2.ttl {
    font-size: calc(18px + 4 * (100vw - 320px) / 448) !important;
    margin-bottom: calc(20px + 20 * (100vw - 320px) / 448) !important;
  }
  .about .intro .content p {
    font-size: calc(16px + 2 * (100vw - 320px) / 448) !important;
    line-height: 1.8;
    margin-bottom: calc(16px + 4 * (100vw - 320px) / 448) !important;
  }
}

/*==========================*/
/*=== [MESSAGE]
=============================*/
.about .message .txt h3.ttl {
  color: #eb6e8f !important;
	font-size: 24px !important;
}
.about .message .txt h3.ttl:after {
  display: none;
}
.about .message .txt h3.ttl br {
  display: none;
}
.about .momo-message-text p, .about .c-message__text p {
	font-size: 18px;
}
.about .message .content .name-txt {
  font-weight: 500;
}

@media (max-width: 1024px) {
  .about .message .txt h3.ttl {
    margin-bottom: calc(20px + 10 * (100vw - 768px) / 256) !important;
  }
}
@media (max-width: 1023px) {
  .about .message .txt h3.ttl br {
    display: block;
  }
}
@media (max-width: 768px) {
  .about .message h2.ttl {
    font-size: calc(24px + 6 * (100vw - 320px) / 448) !important;
  }
  .about .message .content {
    margin-top: calc(30px + 30 * (100vw - 320px) / 448);
  }
  .about .message .content .name-txt {
    font-size: calc(16px + 4 * (100vw - 320px) / 448);
  }
  .about .message .txt h3.ttl {
    font-size: calc(18px + 2 * (100vw - 320px) / 448) !important;
  }
  .about .message .txt p {
    font-size: calc(16px + 2 * (100vw - 320px) / 448);
  }
}

/*==========================*/
/*=== [ACTIVITIES]
=============================*/
.about .activities h2.ttl {
  margin-bottom: 16px !important;
}
.about .activities .grid {
  grid-template-columns: 1fr;
  margin-top: 0;
}
.about .activities .card {
  display: flex;
  flex-direction: row;
  margin: 0;
  border: none;
  border-radius: 0;
  border-bottom: 5px dotted #c6b1b5;
  box-shadow: none;
  transition: none;
}
.about .activities .card:nth-child(odd) {
  flex-direction: row-reverse;
}
.about .activities .card:nth-child(even) {
  flex-direction: row;
}
.about .activities .card .imgWrap {
  width: 100%/*calc(100% - 10px)*/;
  max-width: 600px;
  margin-bottom: 0;
}
.about .activities .card .imgWrap img {
  width: 100%;
  object-fit: contain;
}
/*
.about .activities .card:nth-child(4) .imgWrap img {
  object-fit: cover;
}*/
.about .activities .card .content {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 600px;
}
.about .activities .card h3.ttl {
  margin-bottom: 24px;
  font-size: 24px !important;
  font-weight: 500;
  /*text-align: left;*/
}
.about .activities .card h3.ttl span {
  position: relative;
  display: inline-block;
  /*padding-left: 80px;*/
}
.about .activities .card h3.ttl span:before {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
	left: -84px/*-5px*/;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: contain;
}
.about .activities .card:first-child h3.ttl span:before {
	width: 70px;
	height: 56px;
	background-image: url(../../img/chara-3.png);
}
.about .activities .card:nth-child(2) h3.ttl span:before {
	width: 68px;
	height: 64px;
	background-image: url(../../img/chara-4.png);
}
.about .activities .card:nth-child(3) h3.ttl span:before {
  top: 18px;
	width: 80px;
	height: 60px;
	background-image: url(../../img/chara-5.png);
}
.about .activities .card:nth-child(4) h3.ttl span:before {
  top: 20px;
	width: 70px;
	height: 56px;
	background-image: url(../../img/chara-2.png);
}
.about .activities .card h3.ttl:after {
  display: none;
}
.about .activities .card .desc {
  margin-bottom: 24px;
  color: #333;
  font-size: 18px !important;
}

/*@media (max-width: 1440px) {
  .about .activities .card .imgWrap {
		width: calc(416px + 1024 * (100vw - 1024px) / 416);
	}
}*/
@media (max-width: 1023px) {
  .about .activities .card {
    width: 80%;
    margin: auto;
  }
  .about .activities .card .imgWrap {
    display: none;
  }
}
@media (max-width: 768px) {
  .about .activities .grid {
    gap: calc(10px + 20 * (100vw - 320px) / 448);
  }
  .about .activities h2.ttl {
    font-size: calc(24px + 6 * (100vw - 320px) / 448) !important;
  }
  .about .activities .card .content {
    padding: calc(0.1px + 29.9 * (100vw - 320px) / 448) 0 calc(15px + 15 * (100vw - 320px) / 448);
  }
  .about .activities .card h3.ttl {
    margin-bottom: calc(12px + 12 * (100vw - 320px) / 448) !important;
    font-size: calc(18px + 6 * (100vw - 320px) / 448) !important;
  }
  .about .activities .card h3.ttl span {
    /*padding-left: calc(20px + 60 * (100vw - 320px) / 448);*/
  }
  .about .activities .card h3.ttl span:before {
  }
  .about .activities .card:first-child h3.ttl span:before {
    left: calc(-44px - 40 * (100vw - 320px) / 448);
    width: calc(40px + 30 * (100vw - 320px) / 448);
    height: calc(32px + 24 * (100vw - 320px) / 448);
  }
  .about .activities .card:nth-child(2) h3.ttl span:before {
    left: calc(-46px - 22 * (100vw - 320px) / 448);
    width: calc(40px + 28 * (100vw - 320px) / 448);
    height: calc(38px + 26 * (100vw - 320px) / 448);
  }
  .about .activities .card:nth-child(3) h3.ttl span:before {
    top: 16px ;
    left: calc(-44px - 40 * (100vw - 320px) / 448);
    width: calc(45px + 35 * (100vw - 320px) / 448);
    height: calc(34px + 26 * (100vw - 320px) / 448);
  }
  .about .activities .card:nth-child(4) h3.ttl span:before {
    top: calc(14px + 6 * (100vw - 320px) / 448);
    left: calc(-44px - 40 * (100vw - 320px) / 448);
    width: calc(44px + 26 * (100vw - 320px) / 448);
    height: calc(32px + 24 * (100vw - 320px) / 448);
  }
  .about .activities .card .desc {
    font-size: calc(16px + 2 * (100vw - 320px) / 448) !important;
  }
}
@media (max-width: 767px) {
  .about .activities .card {
    justify-content: center;
    width: 100%;
    padding: calc(8px + 16 * (100vw - 320px) / 447);
  }
}