@charset "UTF-8";

#sub #mainVisual img {
height: auto;
display: block;
}

:root {
--mn-green: #8ad7d6;
--mn-yellow: #fff6e3;
--mn-blue: #f1f8f8;
--mn-text: #444;
}

#mnIntro,
#mnQuality,
#mnPhotoPlan {
width: 90%;
max-width: 1150px;
margin: 6rem auto 0;
text-align: center;

}

@media screen and (max-width: 1024px) {
    #mnIntro, #mnQuality, #mnPhotoPlan {
        /* width: 96%; */
    }
}
#mnIntro{
padding: 0 2rem;
}

#mnIntro {
width: 100%;
max-width: 1700px;
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(340px, 500px) minmax(180px, 1fr);
gap: clamp(28px, 4vw, 80px);
align-items: center;
}

#mnIntro .introPhotos {
display: grid;
gap: clamp(22px, 3vw, 42px);
}

#mnIntro .introPhotosLeft {
align-self: start;
}

#mnIntro .introPhotosRight {
align-self: self-start;
}

#mnIntro .introPhotosLeft figure:nth-child(2) {
width: 68%;
margin-left: 5%;
}

#mnIntro .introPhotosRight figure:nth-child(1) {
width: 72%;
    margin-left: 0%;
}
#mnIntro .introPhotosRight figure:nth-child(2) {
width: 95%;
    margin-left: 5%;
}

#mnIntro figure img {
display: block;
width: 100%;
height: auto;
}

/* h2はkids/omiya.htmlと同じ表示にするため、サイズ・行間・配置・右上の線画像は
   common.css の main h2（2rem／span 1rem／中央配置／右上80×52の線画像）をそのまま使う。
   ここではページ独自の色だけ指定する */
#mnIntro h2,
#mnQuality h2,
#mnPhotoPlan h2 {
color: var(--mn-green);
}
#mnIntro h2:not(.txtTtl):after{
  display: none;
}

#mnIntro h2 span,
#mnQuality h2 span,
#mnPhotoPlan h2 span {
color: #e8c469;
}

.introPhotosSp {
display: none;
}

#mnIntro .introLead {
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.7;
    text-align: left;
    max-width: 330px;
    margin: 2.5rem auto;
    color: var(--mn-text);
}

#mnIntro .introBody {
margin-top: 2.4rem;
text-align: left;
}

#mnIntro .introBody p {
margin-top: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
font-size: 1.3rem;
}

#mnQuality .lead,
#mnPhotoPlan .lead {
margin-top: 3rem;
font-size: 1.45rem;
font-weight: 600;
color: #444;
}

#mnQuality ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-top: 2rem;
text-align: left;
}

#mnQuality li {
background: #FEF6E3;
clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%, 0 52px);
padding: 2.2rem 1.3rem 2rem;
}

#mnQuality h3 {
font-size: 1.9rem;
font-weight: 700;
text-align: center;
color: #444;
line-height: 1.3;
}

#mnQuality h3::after {
content: "";
    display: block;
    width: min(100%, 150px);
    height: 18px;
    margin: 1rem auto 0;
    background-image: radial-gradient(#c9c5be 1px, transparent 1.5px);
    background-position: 0 0;
    background-size: 10px 10px;
}

#mnQuality figure {
margin-top: 1.2rem;
background: #333;
overflow: hidden;
}

#mnQuality figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

#mnQuality p {
    margin-top: 1.2rem;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.6;
  }

#mnQuality .noteBox {
background: #fff;
padding: .8rem 1rem;
    font-size: 1.3rem;
line-height: 1.6;
}

.mnPlanList {
align-items: start;
}

/* PC時に左右のplanDetailの上端を揃える
（figure・リード文・planDetailの3行をsubgridで共有） */
@supports (grid-template-rows: subgrid) {
@media screen and (min-width: 813px) {
.mnPlanList article {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}

.mnPlanList .planDetail {
align-self: start;
}
}
}

/* ベースは common.css の planList 共通。ここは色などページ独自分のみ */
.planLeadText h3 {
color: #8ad7d6;
}

/* リード文の左右に少し余白 */
.mnPlanList .planLeadText p {
padding: 0 1rem;
}

.mnPlanList .planDetail > figure,
.mnPlanList .demoGrid {
margin-top: 1.6rem;
}

.demoGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}

.demoGrid figure {
background: #333;
aspect-ratio: 1 / 1;
overflow: hidden;
}

/* common.cssの .planDetail > ul （線付きリスト）の打ち消し */
.mnPlanList .planDetail > .baseLabels {
margin-top: .65rem;
}

.mnPlanList .planDetail > .baseLabels > li,
.mnPlanList .planDetail > .baseLabels > li:last-child {
border: 0;
padding: 0;
}

.baseLabels {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: .65rem;
margin-left: 0;
padding-left: 0;
list-style: none !important;
text-align: center !important;
font-weight: 700;
line-height: 1.25;
}

.baseLabels li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 0;
padding: 0;
list-style: none !important;
font-size: 1.8rem !important;
font-weight: 800 !important;
line-height: 1.35 !important;
text-align: center;
}

.baseLabels li::marker {
content: "";
font-size: 0;
}

.baseLabels span {
display: block;
font-size: 1.35rem;
font-weight: 600;
}

/* ニューボーン：ポーズ選択まわり */
.newbornPlan .planDetail > .poseTitle {
margin-top: 1.8rem;
}

.poseBlock {
padding-bottom: 1.8rem;
border-bottom: 1px solid #ccc;
}

.poseBlock + .poseBlock {
margin-top: 2rem;
}

.planInner .poseBlock figure {
margin-top: 0;
}

.poseBlock h4 {
margin-top: 1.2rem;
}

/* プラン内の本文系テキストを .planLeadText p（1.3rem / 行間1.6 / 太さ500）に統一
（③planSub ④⑤planNotes ⑥caption ⑦⑧planInner内p ⑨priceList dd） */
.mnPlanList .planSub,
.mnPlanList .planNotes li,
.mnPlanList .caption,
.mnPlanList .caption p,
.mnPlanList .planInner > p:not(.planPrice),
.mnPlanList .priceList dd {
font-size: 1.3rem;
font-weight: 500;
line-height: 1.6;
}

/* planDetail内の大きすぎる文字をページ全体のバランスに合わせて縮小
（プラン名h4・価格・価格リストdt。本文1.3rem < dt 1.45rem < 価格・プラン名1.6rem < 見出しh3） */
.mnPlanList .poseBlock h4 {
font-size: 1.6rem;
line-height: 1.5;
}

.mnPlanList .planPrice {
font-size: 1.6rem;
}

.mnPlanList .planPrice span {
font-size: 1.3rem;
}

.mnPlanList .priceList dt {
font-size: 1.45rem;
}

/* =======================================
picGallery
======================================= */
#picGallery {
position: relative;
padding: 0 0 3rem;
margin: 8rem auto 0;
}

#gallery {
width: 90% !important;
max-width:1280px !important;
margin: 5rem auto 3rem;
}

#gallery .item:nth-child(-n+10) {
display: block;
}

#gallery .item {
width: 19%;
margin: .5%;
display: none;
}

#gallery + p a {
background: #fff;
color: #9cd8d8;
width: 90%;
max-width:380px;
display: block;
padding: .5rem;
text-align: center;
margin: 0 auto;
border-radius: 30px;
font-weight: 600;
}

#picGallery:after {
content: "";
width: 100%;
display: block;
height: 60%;
background: #9CD8D8;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}

/* =======================================
#bnrList banner
======================================= */
#bnrList {
display: flex;
flex-wrap:wrap;
max-width: 1280px;
margin: 5rem auto;
justify-content: center;
}

#bnrList li {
width: 31%;
margin: 0 1%;
}

@media screen and (max-width: 1080px) {
#mnIntro {
display: block;
/* width: 90%; */
/* max-width: 760px; */
}

#mnIntro > .introPhotos {
display: none;
}

.introPhotosSp {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 2rem;
align-items: center;
}

.introPhotosSp figure {
overflow: hidden;
}

.introPhotosSp img {
display: block;
width: 100%;
height: auto;
}

#gallery .item {
width: 32%;
}
}

/* タブレット（〜1020px）：#mnQuality を2列に。gap 18px のため1カラム幅 = calc(50% - 9px） */
@media screen and (max-width: 1020px) {
#mnQuality ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
/* max-width: 640px; */
margin-left: auto;
margin-right: auto;
}

/* 2列時：3つ目のカードを中央に配置 */
#mnQuality li:nth-child(3) {
grid-column: 1 / -1;
width: calc(50% - 9px);
margin-left: auto;
margin-right: auto;
}
}

/* 720px未満：#mnQuality を1列に戻す（3つ目の中央指定も解除） */
@media screen and (max-width: 719px) {
#mnQuality ul {
grid-template-columns: 1fr;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}

#mnQuality li:nth-child(3) {
grid-column: auto;
width: auto;
}
}

@media screen and (max-width: 812px) {
#gallery {
margin-top: 50px;
}

#picGallery {
margin: 5rem auto 0;
}
}

@media screen and (max-width: 480px) {
#mnIntro,
#mnQuality,
#mnPhotoPlan {
/* width: 86%; */
}
#mnIntro{
  padding: 0 1rem;
}
/* スマホ：h2はkids.cssと同じ1.5rem（spanはcommon.cssの1remのまま）。
   フォトギャラリーのh2も含めて全h2をそろえる */
#mnIntro h2,
#mnQuality h2,
#mnPhotoPlan h2,
#picGallery h2 {
font-size: 1.5rem;
}

.introPhotosSp {
gap: 10px;
}

#mnIntro .introLead {
font-size: 1.05rem;
text-align: center;
}

#mnIntro .introBody p {
font-size: 1.15rem;
line-height: 1.6;
}

#mnQuality .lead,
#mnPhotoPlan .lead {
font-size: 1.05rem;
line-height: 1.8;
}

#mnQuality h3 {
font-size: 1.35rem;
}

#mnQuality p {
font-size: 1.15rem;
}

#mnQuality .noteBox {
font-size: 1.15rem;
}

/* プラン内の本文系テキスト：スマホも .planLeadText p（1.15rem / 行間1.6）に統一 */
.mnPlanList .planSub,
.mnPlanList .planNotes li,
.mnPlanList .caption,
.mnPlanList .caption p,
.mnPlanList .planInner > p:not(.planPrice),
.mnPlanList .priceList dd {
font-size: 1.15rem;
}

/* スマホ：「お好きなポーズをお選びください。」を1行で表示 */
.mnPlanList .planSub {
white-space: nowrap;
}

/* スマホ：プラン名h4・価格・価格リストdtを本文1.15remとのバランスで縮小 */
.mnPlanList .poseBlock h4,
.mnPlanList .planPrice {
font-size: 1.4rem;
}

.mnPlanList .planPrice span {
font-size: 1.15rem;
}

.mnPlanList .priceList dt {
font-size: 1.25rem;
}

.baseLabels li {
font-size: 1.3rem !important;
}

.baseLabels span {
font-size: 1rem;
}

.mnPlanList .planDetail {
padding: 2rem 1rem;
}

.mnPlanList .planDetail .planInner {
padding: 1.6rem 1rem;
}

#gallery {
display: flex;
flex-wrap:wrap;
justify-content: space-between;
margin-top: 30px;
}

#gallery p {
width: 49% !important;
}

#picGallery {
margin: 50px auto 0;
}

#bnrList li {
width: 48%;
margin-bottom: 1rem;
}

#bnrList li:last-child {
margin-bottom: 0;
}
}