/*========================================
  イベント・見学会 詳細ページ
  デザイン幅 1600px
========================================*/
.event-detail {
    padding-bottom: 180px;
}

/*----------------------------------------
  ページ見出し
----------------------------------------*/
.event-detail__head {
    padding-top: 33.3px;
    text-align: center;
}

.event-detail__icon {
    display: block;
    width: 40px;
    height: auto;
    margin: 0 auto;
}

.event-detail__page-title {
    margin-top: 9.5px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-indent: 0.08em;
}

.event-detail__line {
    display: block;
    width: 153.23px;
    height: auto;
    margin: 24.5px auto 0;
}

/*----------------------------------------
  タイトル帯（上下を罫線で挟む）
----------------------------------------*/
.event-detail__title-block {
    max-width: 1200px;
    margin: 18.9px auto 0;
    padding: 22px 0 17px 64px;
    border-top: 2px solid gray;
    border-bottom: 2px solid gray;
}

.event-detail__title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
}

.event-detail__date {
    margin-top: 11px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
}

/*----------------------------------------
  メインスライダー（common.css の .slider を2枚並びに差し替える）
  スライドの左右の余白は padding で持たせる。
  margin にすると slick が入れる幅の指定に足されて崩れるため
----------------------------------------*/
.event-detail .slider {
    /* 524.5px の正方形が2枚＋間隔38.88px＋両端19.44px */
    max-width: 1126.76px;
    margin-top: 55px;
}

.event-detail .slider__item {
    width: auto;
    margin: 0;
    padding: 0 19.44px;
    background: none;
}

/* デザインの枠は正方形が写真で埋まっているので、
   他ページのスライダー（contain）と違って cover で切り抜く */
.event-detail .slider__frame {
    aspect-ratio: 1;
    overflow: hidden;
    background: #eae8e9;
}

.event-detail .slider__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 矢印は slide_prev2 / slide_next2（影なしの塗り）。
   位置はスライドの外側で、左右対称に置く */
.event-detail .slider__arrow {
    /* デザインではスライドの中心より少し下 */
    margin-top: 6px;
    width: 21.05px;
    height: 83.55px;
}

.event-detail .slider__arrow img {
    filter: none;
}

.event-detail .slider__arrow--prev {
    left: -19.12px;
}

.event-detail .slider__arrow--next {
    right: -19.12px;
}

.event-detail .slider .slick-dots {
    margin-top: 28.5px;
}

.event-detail .slider .slick-dots li.slick-active button::before {
    background: #a7ce7a;
}

/*----------------------------------------
  本文（薄いピンクの帯・全幅）
----------------------------------------*/
.event-detail__body {
    margin-top: 62px;
    padding: 83.5px 0;
    background: #fcefec;
}

.event-detail__body-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 56px;
}

.event-detail__body-title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

/* 本文は文ごとに改行を入れて組むので、その途中で折り返らない幅にしておく */
.event-detail__text {
    max-width: 1000px;
    margin-top: 25px;
    font-size: 24px;
    letter-spacing: 0.02em;
    line-height: 44px;
}

/* 2つ目以降の段落は一回り小さい */
.event-detail__text--small {
    margin-top: 38px;
    font-size: 20px;
    line-height: 38px;
}

.event-detail__points {
    max-width: 1000px;
    margin-top: 36px;
    padding-left: 38px;
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 38px;
    list-style: disc;
}

.event-detail__spec-title {
    margin-top: 48.8px;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 1;
}

.event-detail__spec {
    margin-top: 9.2px;
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 38px;
}

/*----------------------------------------
  本文（管理画面のリッチエディタで書いた内容）

  どのタグで来ても読めるよう、上のデザイン用クラスと同じ大きさに揃える
----------------------------------------*/
.event-detail__rich > *:first-child {
    margin-top: 0;
}

.event-detail__rich h1,
.event-detail__rich h2,
.event-detail__rich h3 {
    margin-top: 48px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.event-detail__rich h3 {
    font-size: 24px;
}

.event-detail__rich p {
    max-width: 1000px;
    margin-top: 25px;
    font-size: 24px;
    letter-spacing: 0.02em;
    line-height: 44px;
}

.event-detail__rich ul,
.event-detail__rich ol {
    max-width: 1000px;
    margin-top: 36px;
    padding-left: 38px;
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 38px;
}

.event-detail__rich ul {
    list-style: disc;
}

.event-detail__rich ol {
    list-style: decimal;
}

.event-detail__rich a {
    text-decoration: underline;
}

.event-detail__rich img {
    max-width: 100%;
    height: auto;
    margin-top: 25px;
}

.event-detail__rich blockquote {
    max-width: 1000px;
    margin-top: 25px;
    padding-left: 24px;
    border-left: 4px solid #c4c2c3;
}

/*----------------------------------------
  Architectural data ／ Company data
----------------------------------------*/
.event-detail__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.event-detail__data-title,
.event-detail__company-title {
    padding-left: 20px;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1;
}

.event-detail__data-section {
    margin-top: 97.4px;
}

.event-detail__data-title {
    color: #8cb4eb;
}

.event-detail__company-section {
    margin-top: 89px;
}

.event-detail__company-title {
    color: #a7ce7a;
}

.event-detail__data,
.event-detail__company-data {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.event-detail__data tr + tr th,
.event-detail__data tr + tr td,
.event-detail__company-data tr + tr th,
.event-detail__company-data tr + tr td {
    border-top: 1px solid #ccc;
}

.event-detail__data th,
.event-detail__data td,
.event-detail__company-data th,
.event-detail__company-data td {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 34px;
    /* 住所の行は地図のぶん背が高くなるので、文字は上に揃える */
    vertical-align: top;
}

/* 表の上罫線が見出しの下線を兼ねるので、見出し側には引かない */
.event-detail__data {
    margin-top: 9.8px;
    border-top: 3px solid #8cb4eb;
    border-bottom: 3px solid #8cb4eb;
}

.event-detail__data th,
.event-detail__data td {
    padding: 12.4px 0;
}

.event-detail__data th {
    width: 175.5px;
    padding-left: 37.5px;
    background: #e9f3ff;
}

.event-detail__data td {
    padding-left: 59px;
}

.event-detail__link {
    color: #8cb4eb;
    word-break: break-all;
    transition: opacity 0.3s;
}

.event-detail__map {
    display: block;
    width: 891px;
    max-width: 100%;
    margin: 5.5px 0 22.5px;
    aspect-ratio: 891 / 363;
    overflow: hidden;
}

.event-detail__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.event-detail__company-data {
    margin-top: 10.1px;
    border-top: 3px solid #a7ce7a;
    border-bottom: 3px solid #a7ce7a;
}

.event-detail__company-data th,
.event-detail__company-data td {
    padding: 12.4px 0;
}

.event-detail__company-data th {
    width: 192.5px;
    padding-left: 27.5px;
    background: #eaf9d7;
}

.event-detail__company-data td {
    padding-left: 33px;
}

.event-detail__sns {
    display: flex;
    align-items: center;
    gap: 34.9px;
}

.event-detail__sns a {
    display: block;
    width: 29px;
    transition: opacity 0.3s;
}

.event-detail__sns img {
    display: block;
    width: 100%;
    height: auto;
}

/*----------------------------------------
  問い合わせボタン ＋ 注記
----------------------------------------*/
.event-detail__contact {
    margin-top: 73px;
}

.event-detail__company-section + .event-detail__contact {
    margin-top: 55px;
}

.event-detail__contact-btns {
    display: flex;
    justify-content: center;
    gap: 23px;
}

.event-detail__contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 412px;
    height: 70px;
    border-radius: 7.73px;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.21em;
    line-height: 1;
    text-indent: 0.21em;
    transition: opacity 0.3s;
}

.event-detail__contact-btn--tel {
    background: #a7ce7a;
}

.event-detail__contact-btn--accent {
    background: #e28383;
}

.event-detail__contact-note {
    max-width: 813px;
    margin: 22.1px auto 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 24.7px;
}

/*----------------------------------------
  直近の見学会情報
  カードは common.css の .event__* をイベント一覧と共用する
----------------------------------------*/
.event-detail__events {
    margin-top: 136px;
}

.event-detail__events-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    text-align: center;
}

.event-detail__events .event__list {
    margin-top: 36.5px;
}

@media (hover: hover) {
    .event-detail__contact-btn:hover,
    .event-detail__link:hover,
    .event-detail__sns a:hover {
        opacity: 0.7;
    }
}

/*========================================
  SP / タブレット（1023px 以下）
========================================*/
@media screen and (max-width: 1023px) {
    .event-detail {
        padding-bottom: 40px;
    }

    .event-detail__head {
        padding-top: 8px;
    }

    .event-detail__icon {
        width: 34px;
    }

    .event-detail__page-title {
        margin-top: 10px;
        font-size: 20px;
    }

    .event-detail__line {
        width: 110px;
        margin-top: 12px;
    }

    .event-detail__title-block {
        max-width: none;
        margin: 16px 16px 0;
        padding: 14px 0 12px;
        /* 左右にも枠が出ないよう、上下だけ細くする */
        border-top-width: 1px;
        border-bottom-width: 1px;
    }

    .event-detail__title {
        font-size: 18px;
        line-height: 1.5;
    }

    .event-detail__date {
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.5;
    }

    /* 2枚並びだと1枚が小さくなりすぎるので、1枚ずつ見せる */
    .event-detail .slider {
        max-width: none;
        margin-top: 24px;
    }

    .event-detail .slider__item {
        padding: 0 8px;
    }

    .event-detail .slider__arrow {
        width: 18px;
        height: auto;
        aspect-ratio: 2105/8355;
    }

    /* PC用の位置指定（画面外）を打ち消して、common.css と同じ位置に戻す */
    .event-detail .slider__arrow--prev {
        left: 22px;
    }

    .event-detail .slider__arrow--next {
        right: 22px;
    }

    .event-detail .slider .slick-dots {
        margin-top: 16px;
    }

    /* ---- 本文 ---- */
    .event-detail__body {
        margin-top: 28px;
        padding: 28px 0;
    }

    .event-detail__body-inner {
        max-width: none;
        padding: 0 16px;
    }

    .event-detail__body-title {
        font-size: 17px;
        line-height: 1.5;
    }

    .event-detail__text {
        max-width: none;
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.8;
    }

    .event-detail__text--small {
        margin-top: 18px;
        font-size: 13px;
        line-height: 1.8;
    }

    .event-detail__points {
        max-width: none;
        margin-top: 16px;
        padding-left: 22px;
        font-size: 13px;
        line-height: 1.8;
    }

    .event-detail__spec-title {
        margin-top: 22px;
        font-size: 13px;
    }

    .event-detail__rich h1,
    .event-detail__rich h2 {
        margin-top: 24px;
        font-size: 17px;
        line-height: 1.5;
    }

    .event-detail__rich h3 {
        margin-top: 24px;
        font-size: 15px;
    }

    .event-detail__rich p {
        max-width: none;
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.8;
    }

    .event-detail__rich ul,
    .event-detail__rich ol {
        max-width: none;
        margin-top: 16px;
        padding-left: 22px;
        font-size: 13px;
        line-height: 1.8;
    }

    .event-detail__spec {
        margin-top: 6px;
        font-size: 13px;
        line-height: 1.8;
    }

    /* ---- Architectural data ／ Company data ---- */
    .event-detail__inner {
        max-width: none;
        padding: 0 16px;
    }

    .event-detail__data-section,
    .event-detail__company-section {
        margin-top: 32px;
    }

    .event-detail__data-title,
    .event-detail__company-title {
        padding-left: 0;
        font-size: 18px;
    }

    .event-detail__data th,
    .event-detail__data td,
    .event-detail__company-data th,
    .event-detail__company-data td {
        padding: 10px 0;
        font-size: 13px;
        line-height: 1.7;
    }

    .event-detail__data th {
        width: 92px;
        padding-left: 10px;
    }

    .event-detail__data td {
        padding-left: 12px;
    }

    .event-detail__company-data th {
        width: 100px;
        padding-left: 10px;
    }

    .event-detail__company-data td {
        padding-left: 12px;
    }

    .event-detail__map {
        width: 100%;
        margin: 8px 0 4px;
        aspect-ratio: 16 / 10;
    }

    .event-detail__sns {
        gap: 16px;
    }

    .event-detail__sns a {
        width: 22px;
    }

    /* ---- 問い合わせ ---- */
    .event-detail__contact {
        margin-top: 28px;
    }

    .event-detail__contact-btns {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .event-detail__contact-btn {
        width: 100%;
        max-width: 320px;
        height: 52px;
        font-size: 16px;
        letter-spacing: 0.1em;
        text-indent: 0.1em;
    }

    .event-detail__contact-note {
        max-width: none;
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.7;
    }

    /* ---- 直近の見学会情報 ---- */
    .event-detail__events {
        margin-top: 40px;
    }

    .event-detail__events-title {
        font-size: 18px;
    }

    .event-detail__events .event__list {
        margin-top: 18px;
    }
}

/*----------------------------------------
  画像モーダル。他の詳細ページと違い、ここでは PC 幅でも開く
  （中身のスタイルは common.css で共用）
----------------------------------------*/
.image-modal {
    display: flex;
}

.slider__item {
    cursor: zoom-in;
}

/* PC は画面に余裕があるので、もう少し大きく見せる */
@media screen and (min-width: 1024px) {
    .image-modal__content {
        max-width: 900px;
    }

    .image-modal__image img {
        max-height: 70vh;
    }
}