body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #fff;
    background-color: #020204;
    line-height: 1.6;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

button {
    padding: 0;
    font-family: inherit;
    appearance: none;
    cursor: pointer;
    background-color: transparent;
    border: none;
}

.pc {
    display: block;
}

.pc .main-visual img {
    width: 100%;
    object-fit: cover;
}

.sp {
    display: none;
}

@media screen and (max-width: 799px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
}


/*==================================
  750pxの枠組み (コンテナ)
==================================*/
.container {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
}

.section {
    padding: 30px 20px;
    text-align: center;
}

.wrap-bk {
    padding: 20px 20px 40px;
    background-color: rgb(165 126 238 / 30%);
    margin: 20px 0;
}

main {
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

/*==================================
  タイポグラフィ
==================================*/
.h1-title {
    /* h1のクラス名 */
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 5px;
}

.h2-title {
    /* h2のクラス名 */
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", serif;
    font-size: clamp(1.25rem, 1.065rem + 0.93vw, 1.875rem);
    color: #fff;
    margin: 20px 0;
    padding-bottom: 5px;
    display: inline-block;
    text-shadow: 0px 0px 10px rgb(131 145 255);
}

.h3-title {
    /* h3のクラス名 */
    font-size: 1.6rem;
    margin: 20px 0;
}

/*==================================
  ヘッダー / メインビジュアル
==================================*/
.main-header {
    position: relative;
    overflow: hidden;
}

.main-visual {
    width: 70%;
    margin: 0 auto;
}

@media screen and (max-width: 799px) {
    .main-visual {
        width: 100%;
    }
}

.main-visual img {
    width: 100%;
    object-fit: cover;
}

.lead {
    background: linear-gradient(90deg, #341847, #203E71);
    margin: 0 0 40px;
}

.lead p {
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", serif;
    font-size: clamp(1.25rem, 0.954rem + 1.48vw, 2.25rem);
    text-align: center;
    padding: 1rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.header-content {
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    z-index: 10;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
}

.intro {
    width: 100%;
    margin: 0 0 40px;
    text-align: center;
}

.intro-content {
    /*background: linear-gradient(#fdf6eef0, #fdf6eef0), url(../img/noise.png);
    background-repeat: repeat;
    box-shadow: inset 0 0 50px rgb(193 178 132);*/
    padding: 3rem 1rem;
    margin: 0 10px;
}

.intro-content h2 {
    color: #fff;
    border-bottom: 1px solid #fff;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", serif;
    font-size: clamp(1.25rem, 1.065rem + 0.93vw, 1.875rem);
    margin: 0 0 2rem;
    padding-bottom: 5px;
    display: inline-block;
}

.intro p {
    color: #fff;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro", serif;
    font-size: clamp(1rem, 0.926rem + 0.37vw, 1.25rem);
    word-break: keep-all;
    overflow-wrap: break-word;
    line-break: loose;
}

/*==================================
  イベント情報
==================================*/
.event-info {
    background-color: #020204;
    border: solid #ccc 50px;
    display: inline-block;
    padding: 30px;
    border-image-source: url(../img/frame.png);
    border-image-slice: 80;
    border-image-width: 70px;
    border-image-outset: 0px;
    border-image-repeat: round;
    width: calc(100% - 20px);
    margin: 30px 10px;
}

.event-details-list {
    margin: 0 auto 30px;
    text-align: left;
}

.dl-item {
    display: flex;
    padding: 15px 10px;
    margin-bottom: 10px;
    align-items: center;
}

@media screen and (max-width: 474px) {
    .dl-item {
        display: block;
    }
}

.dl-item:last-child {
    border-bottom: none;
}

.event-details-list dt {
    font-weight: bold;
    width: 30%;
    margin: 0 5% 0 0;
    min-width: 80px;
    color: #fff;
    font-size: 1rem;
    border: 1px solid #735ab2;
    padding: 8px;
    text-align: center;
}

@media screen and (max-width: 474px) {
    .event-details-list dt {
        width: 100%;
        margin: 0 0 5% 0;
    }
}

.event-details-list dd {
    width: 65%;
    /* ddの幅を調整 */
    font-size: 1.1rem;
    font-weight: normal;
    color: #fff;
}

@media screen and (max-width: 474px) {
    .event-details-list dd {
        width: 100%;
    }
}



/*==================================
  ボタンのスタイル 
==================================*/
.button-grad {
    position: relative;
    display: block;
    width: 100%;
    max-width: 320px;
    height: 64px;
    padding: 2px;
    font-family: sans-serif;
    font-size: 16px;
    text-align: center;
    overflow-wrap: anywhere;
    background: linear-gradient(135deg, #735ab2, #47EFEF);
    border-radius: 32px;
    margin: 0 auto;
}

.button-grad::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(135deg, #735ab2, #47EFEF);
    border-radius: 32px;
    opacity: 0;
    filter: blur(8px);
}

.button-grad_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: #1e1e30;
    border-radius: 32px;
}

@media (any-hover: hover) {
    .button-grad::before {
        transition: opacity 0.2s;
    }

    .button-grad:hover::before {
        opacity: 1;
    }
}

.text_bubble {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    background-color: #020204;
    line-height: 1.5;
    color: #ffffff;
}

.text_bubble::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40%;
    border-style: solid;
    border-width: 20px 0 0 20px;
    border-color: #ffffff transparent transparent;
    translate: -50% 100%;
    transform: skew(15deg);
    transform-origin: top;
}

.text_bubble::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 40%;
    border-style: solid;
    border-width: 17.6px 0 0 17.6px;
    border-color: #020204 transparent transparent;
    translate: calc(-50% + 0.4px) 100%;
    transform: skew(15deg);
    transform-origin: top;
}

.button-icon img {
    width: 50%;
    margin: 20px auto;
}

/*==================================
  SNSアイコン
==================================*/

.sns-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.sns-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    font-weight: bold;
    font-size: 1rem;
    color: #000;
}

/*==================================
  8. フッター
==================================*/
.footer {
    background-color: #341847;
    color: #fff;
    padding: 15px 20px;
    text-align: center;
    font-size: 0.8rem;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.footer-text {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 750px;
    margin: 0 auto;
}

.footer-text img {
    max-width: 30%;
}

.copyright {
    color: #ccc;
    margin-top: 10px;
}

/*==================================
  ポップアップ（モーダル）の基本スタイル
==================================*/

/* モーダルの背景 */
.modal {
    display: none;
    /* デフォルトでは非表示 */
    position: fixed;
    /* 画面に固定 */
    z-index: 1;
    /* 他の要素の上に表示 */
    left: 0;
    top: 0;
    width: 100%;
    /* 全幅 */
    height: 100%;
    /* 全高さ */
    overflow: auto;
    /* スクロール可能 */
    background-color: rgb(255, 255, 255);
    /* 背景色 */
    background-color: rgba(0, 0, 0, 0.6);
    /* 透過 */
}

/* モーダルコンテンツ */
.modal-content {
    background-color: #fefefe;
    margin: 2% auto;
    padding: 20px;
    width: 95%;
    max-width: 800px;
    border-radius: 10px;
}

.modal-content span {
    color: #020204;
    display: flex;
    justify-content: end;
}

.modal-content span p {
    cursor: pointer;
}

/* DL（定義リスト）全体 */
.contact-data-list {
    margin: 0 auto 30px;
    text-align: left;
}

/* DT/DDのペア（dl-group） */
.dl-group {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

/* TEL/E-mailのラベル（dt） */
.dl-group dt {
    border: 1px solid #fff;
    padding: 2px 5px;
    min-width: 4rem;
    width: 15%;
    margin: 0 1rem 0;
    text-align: center;
}

/* 値（dd） */
.dl-group dd {
    order: 2;
    margin-left: 0;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
    display: inline-block;
    width: 85%;
}

/* 受付時間（dd） */
.dl-group span {
    font-size: 1.2rem;
    font-weight: normal;
}

@media screen and (max-width: 474px) {
    .dl-group {
        display:block;
        text-align: center;
    }
    .dl-group dt {
        min-width: 1rem;
        margin: 15px 0 5px 0;
        width: 100%;
    }
    .dl-group dd {
        font-size: 1.6rem;
    }
    .dl-group span {
        display: block;
        font-size: .9rem;
    }
}