@charset "utf-8";

/* article header */

.article__header--mv {
    background-image: url(../images/main-gallery02.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 70%;
    aspect-ratio: 375/392;
    display: flex;
    align-items: flex-end;
    padding: 0 0 100px 30px;
}

.article__header--title {
    font-size: 3rem;
    line-height: 1.2;
    font-family: 'Old Standard TT', serif;
    font-style: italic;
    color: var(--primary-white);
}

.article__header--title::after{
    content:"";
    display:block;
    width: 100px;
    height: 1px;
    background: var(--primary-white);
    margin-top: 10px;
}

/* pc 768px 始*/
@media screen and (min-width:768px) {
.article__header--mv {
    padding: 0 0 140px 60px;
    aspect-ratio: auto;
    height: clamp(320px, 55vh, 550px);
    background-position: center 65%;
}
.article__header--title {
    font-size: 4.5rem;
}

.article__header--title::after {
    margin-top: 15px;
}
} /* pc 768px 終*/

/* pc １４４０px 始*/
@media screen and (min-width:1440px){
.article__header--mv{
    padding: 0 0 160px 100px;
    height: clamp(420px, 50vh, 700px);
    background-position: center 70%;
}
.article__header--title {
    font-size: 7rem;
}
} /* pc １４４０px 終*/


/* ここから内容  オーダーメイドプラン　*/
.main {
  margin: 0 auto 30px;
}

.plan__order {
    background-color: var(--primary-green);
    padding:  var(--contentPadding);
    margin: 20px 15px;
    text-align: center;
}
.plan__order h3 {
    color: var(--primary-white);
    font-weight: normal;
}
.plan__title {
    color: var(--primary-brown);
    text-align: center;
    font-size: 2.6rem;
    font-weight: normal;
    padding: 20px 16px;
}

.plan__list {
    font-size: 1.8rem;
}

.plan__item {
    font-size: 1.6rem;
}

.plan__media img,
.movie {
    display: block;
    width: 100%;
    height: auto;
}

.movie {
    aspect-ratio: 16 / 9;
}

.price,
.price__plan {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 32px;
    color: var(--primary-brown);
    font-size: 2rem;
    margin: 24px auto 0;
    white-space: nowrap;
}

.price {
    background-color: var(--primary-white);
}

.plan__topic {
    background-color: var(--primary-white);
    margin: 20px 0;
    font-size: 1.8rem;
    padding: 24px var(--contentPadding);
    text-align: left;
}

.plan__group dt {
    margin-top: 20px;
    color: var(--primary-green);
}

.plan__group dd {
    color: var(--primary-black);
    margin-top: 10px;
}

.plan__group dd::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--primary-green);
    margin-top: 10px;
}

.plan__group:last-child dd::after {
  content: none;
}


.plan__content--icon {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background-color: var(--primary-lightGray);
    list-style: none;
    margin: 0;
}
.plan__icon {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    font-size: 1.4rem;
    white-space: nowrap;
    line-height: 1.2;
}

.plan__icon img {
    width: 36px;
    height: 36px;
    display: block;
    object-fit: contain;
}

/* オーダープラン　pc 768px 始 */
@media screen and (min-width:768px) {
.plan__order {
        margin: 50px 4.2%;
}

.plan__title {
        font-size: 3.5rem;
        padding-bottom: 40px;
}

.plan__list {
        font-size: 2.2rem; 
}

.plan__item {
        font-size: 1.8;
}

.price,
.price__plan {
    padding: 14px 36px;
    font-size: 2.6rem;
    margin: 30px auto 0;
}

/* 共通：オーダープランの白ボックス */

/* ① タブレット(768〜)：2カラム + 「含まれるもの」は下に横長で置く */
@media (min-width: 768px) {
.plan__topic--order {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 40px;
    align-items: start;
    padding: 32px 40px;
}

.plan__group--shots    { grid-column: 1; grid-row: 1; }
.plan__group--delivery { grid-column: 2; grid-row: 1; }

.plan__group--location { grid-column: 1; grid-row: 2; }
.plan__group--movie    { grid-column: 2; grid-row: 2; }

  /* 含まれるもの：2カラム全部使って下に */
.plan__group--includes{
    grid-column: 1 / -1;
    grid-row: 3;
    background: var(--primary-lightGray);
    padding: 18px 18px 14px;
}

.plan__group--includes,
.plan__group--movie dd::after{
    content: none;
}
.plan__group--location dd::after{
    content: none;
}

  /* アイコンは横4つでOK（2×2でもOK） */
.plan__group--includes .plan__content--icon{
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 16px;
}
.plan__icon img {
    width: 52px;
    height: 52px;
    
}
}

/* ② PC(1024〜)：カンプ通り 3カラム（右に「含まれるもの」固定） */
@media (min-width: 1024px){
  .plan__topic--order{
    grid-template-columns: 1fr 1fr 320px;
  }

  .plan__group--includes{
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  /* 右のアイコンは2×2がカンプっぽい */
  .plan__group--includes .plan__content--icon{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 22px;
    justify-items: center;
  }
}

}

/* ここからフォトプランとムービープラン */

.plan__cards{
  display: grid;
  gap: 24px;
  margin: 20px 15px;
}

.plan__photoPlan,
.plan__movie {
    border: 1px solid var(--primary-green);
    margin: 10px 15px;
    padding: var(--contentPadding);
}

.price__plan {
    background-color: var(--primary-lightGray);
}

.plan__photoPlan,
.plan__movie {
    text-align: center;
}

/* フォト,ムービープラン　pc 768px 始 */
@media screen and (min-width: 768px){
  .plan__cards{
    grid-template-columns: repeat(2, 1fr);
    max-width: 1100px;
    margin: 40px auto;
  }
  
}

/* ここからoption */

.option {
    border: 1px solid var(--primary-brown);
    margin: 20px 15px;
    padding: var(--contentPadding);
    color: var(--primary-brown);
    text-align: center;
    font-size: 2rem;
    line-height: 1;

}

.sub__title {
    font-size: 2.8rem;
    padding: 20px 16px;
    text-align: center;
    font-family: 'Roboto Mono', monospace;;
}

.sub__topic {
    position: relative;
    display: inline-block;
    padding-bottom: 10px; /* 文字と線の距離 */
}
.sub__topic::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background-color: var(--primary-green);
}

.shop__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 10px;
    list-style: none;
    margin: 0;
}

.shop__item {
    flex: 0 1 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; 
    text-align: center;
    gap: 6px;
    font-size: 1.4rem;
    white-space: normal;
    line-height: 1.2;

}

.shop__item img{
    width: 120px;
    height: auto;
    display: block;
    object-fit: contain;
}

.option__list {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.option__photo {
    flex: 1;
    margin-top: 40px;
    max-width: clamp(148px, 40vh, 360px);
}

.option__photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.option__description {
    margin: 25px auto 0;
    padding: 0 20px;        /* ←左右少し余白 */
    text-align: left;       /* ←長文は左寄せの方が読みやすい */
    max-width: 32em;
}

.lead__txt {
    font-size: 1.6rem;
    margin-top: 20px;

    font-size: 1.5rem;
    line-height: 1.9;   /* ←1.8〜2.0がきれい */
    letter-spacing: 0.02em;
    margin-bottom: 1.2;
}

.option__description p:last-child {
    margin-bottom: 0;
}


.option__note{
    margin-top: 15px;
    font-size: 1.25rem;
}

.price__plan {
    margin-top: 25px;
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.08em;
}


/* Option pc 始 */
@media screen and (min-width:768px) {
.sub__title {
    font-size: 3.5rem;
    padding: 30px 22px;
}

.sub__topic {
    font-size: 2.4rem;
    padding-bottom: 25px;
}
.sub__topic::after{
    width: 100%;
    height: 2px;
 
}

.shop__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 40px;
    padding: 32px 32px;
}

.shop__item {
    gap: 8px;
    font-size: 2rem;
    line-height: 1.4;

}
.shop__item img{
    width: 160px;
    height: auto;
}

.option__description {
    text-align: center;
    max-width: 65em;
}

.lead__txt {
    font-size: 2.4rem;
    margin-top: 40px;
}

.option__note{
    margin-top: 20px;
    font-size: 2rem;
}
} /* Option pc 終*/

/* ここから Other */

.other__group {
    background-color: var(--primary-lightGray);
    margin: 20px 15px;
    padding: var(--contentPadding);
    line-height: 1.5;
}

.price__item {
    padding-left: 20px;
}
.other__price {
    font-size: 1.2rem;
}

.other__list{
    font-size: 1.6rem;
    list-style: disc;
    padding-left: 1.2em; /* 黒丸の位置 */
    margin: 0;
}

/* other pc 始 */

@media screen and (min-width:768px) {
  .other__group{
    background-color: var(--primary-lightGray);
    max-width: 1100px;
    margin: 40px auto;
    padding: 40px 60px;
  }

  .other__list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 80px;
    row-gap: 28px;
  }

  .other__item{
    font-size: 2.4rem; /* 2.6ren になってたので修正 */
    line-height: 1.6;
  }

  /* 出張料金の中のリスト */
  .price__list{
    list-style: none;
    padding-left: 0;
    margin: 12px 0 0;
  }
  .price__item{
    font-size: 2.2rem;
    line-height: 1.6;
  }

  .other__price{
    font-size: 1.6rem;
    margin-left: 8px;
  }
}
/* other pc 終 */