/* ------------------------------------------------------------------
- 変数
------------------------------------------------------------------ */
:root{
    /*-------カラー---------*/

    --primaryColor:#88164A;
    --bgColor:#F7EEEE;

    /*-------フォント---------*/
    --primaryFont: YakuHanJP,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
    --secondaryFont:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;

   /*-------フォントサイズ---------*/
    --fz14:calc(14 / 16 * 1rem);
    --fz18:calc(18 / 16 * 1rem);
    --fz20:calc(20 / 16 * 1rem);
    --fz22:calc(22 / 16 * 1rem);
    --fz24:calc(24 / 16 * 1rem);
    --fz29:calc(29 / 16 * 1rem);
    --fz32:calc(32 / 16 * 1rem);

    --fz16SP:clamp(0.875rem, 0.505rem + 1.67vw, 1rem);

}

/* ------------------------------------------------------------------
- Layout
------------------------------------------------------------------ */
body{
    font-family: var(--primaryFont);
    font-weight: 500;
    line-height: 1.53;
    letter-spacing: 0.11em;
    font-feature-settings: "palt";
    color:#000000;
}
.l-container{
    position: relative;
    width: 100%;
    max-width: 1112px;
    margin-inline: auto;
    padding-inline: 2.5rem;
}
.l-container.-large{
    max-width: 1240px;
}
.l-container.-small{
    max-width: 1000px;
}
@media screen and (max-width: 475px) {
    .l-container{
        padding-inline: 1.875rem;
    }

    }


/* ------------------------------------------------------------------
- Common
------------------------------------------------------------------ */

.c-titleBox{
    text-align: center;
}
.c-titleLogo{
    width: 9.063rem;
    margin-inline: auto;
}
.c-title{
    font-size: var(--fz29);
    font-weight: 600;
    padding-top: 1.875rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}
@media screen and (max-width: 475px) {
    .c-titleLogo{
        width: 7.188rem;
    }
    .c-title{
        font-size: var(--fz24);
        padding-top: 1.5rem;
    }
}
/* ------------------------------------------------------------------
- Utility
------------------------------------------------------------------ */


/* ------------------------------------------------------------------
- Project
------------------------------------------------------------------ */

 /* - hero
------------------------------------------------------------------ */
.p-hero{
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible !important;
}
.p-hero__bg{
    position: absolute;
    width: 100%;
    height: 40.679rem;
    background: url("../img/hero_bg.webp") no-repeat  center top/cover;
}
.p-hero__bg img{
    height: 100%;
}
.p-hero__container{
    padding-block: 7.8rem;
}
.p-hero__titleBox{
    text-align: center;
}
.p-hero__logo{
    width: 18.75rem;
    margin-inline: auto;
}
.p-hero__logo img{
    width: 100%;
}
.p-hero__title{
    font-family: var(--secondaryFont);
    font-size: 2.5rem;
    color: #fff;
    margin-top: 0.956em;
}
.p-hero__accordion dl{
    list-style: none;
}
.p-accordion__summary{
    position: relative;
    list-style: none;
    margin-top: 3.125rem;
    padding: 1.5em 0;
    text-align: center;
    font-size: var(--fz20);
    font-weight: 700;
    color: #fff;
    background-color: var(--primaryColor);
    border-radius: 10px;
    transition: border-radius ease-out 0.3s;
}
summary::-webkit-details-marker {
    display:none;
  }

.p-accordion__summary::after{
    content: '';
    position: absolute;
    top: 1.65em;
    right: calc(50% - 10em);
    width: 14px;
    height: 14px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(135deg);
    transition: ease 0.4s;
}
.p-accordion__summary.is-open {
    border-radius: 10px 10px 0 0;
}
.p-accordion__summary.is-open::after{
    transform: rotate(315deg);
    margin-top: 8px;
  }
  

/*-------アコーディオン中身--------*/

.p-accordion__contents {
    position: relative;
    display: none;
  }

.p-accordion__form{
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    color: #fff;
    background-color: var(--primaryColor);
    padding: 0.75rem 3rem 3rem;
    border-radius: 0 0 10px 10px;
}
.p-form__list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.07vw;
    width: 100%;
    max-width: 950px;
    margin-inline: auto;
}
.p-form__item{
    display: grid;
    grid-template-columns: minmax(5rem, auto) 1fr;
    gap: calc(12 / 16 * 1em);
    align-items: center;
}
.p-form__item.-location{
    grid-column:1/3;
}
.p-form__item label,.p-form__unit{
    font-size: var(--fz20);
    font-weight: 500;
    text-align: right;
}
.p-form__item.-anotherLocation label{
    font-size: var(--fz14);
}
.p-form__item input,.p-form__item select{
    box-sizing: border-box;
    background-color: #fff;
    height: 2.5rem;
    border-radius: 5px;
    padding: 0.625rem 1rem;
    width: 100%;
    max-width: 100%;
    color: #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p-form__selectWrapper.-date{
    display: grid;
    grid-template-columns: 5em 1em 4em 1em 4em 1em;
    gap: 0.5rem;
    align-items: center;
}
.p-form__selectBox{
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 100%;
    overflow: hidden;
}
.p-form__selectBox::before{
    content: '';
    position: absolute;
    top: 16px;
    right: 10px;
    width: 9px;
    height: 9px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(135deg);
}
.p-form__selectBox select {
    width: 100%;
}

.p-form__item input::placeholder {
    color: #BA9EAB;
    font-size: var(--fz14);
}

.p-form__submit{
    display: block;
    font-size: var(--fz20);
    font-weight: 700;
    line-height: 1;
    width: 100%;
    max-width: 300px;
    margin: 1.5em auto 0;
    padding: 1.25em;
    text-align: center;
    border:  1px solid #fff;
    border-radius: 10px;
}
@media screen and (min-width: 947px) {
    .p-form__submit:hover{
        opacity: 0.8;
        transition: 0.5s;
    }
}
@media screen and (max-width: 946px) {
    .p-form__list {
        grid-template-columns: 1fr;
        gap: 4.1vw;
    }
    .p-form__item.-location {
        grid-column: auto;
    }
    .p-form__item {
        grid-template-columns: 1fr;
        gap: 0.274em;
    }
    .p-form__item label, .p-form__unit {
        text-align: left;
    }
}
@media screen and (max-width: 475px) {
    .p-hero__bg{
        height: 26.938rem;
    }
    .p-hero__container{
        padding-block: 5.6rem;
    }
    .p-hero__logo{
        width: 11.563rem;
    }
    .p-hero__title{
        font-size: var(--fz25);
    }
    .p-accordion__summary{
        font-size: var(--fz16SP);
        padding: 1.25em;
    }
    .p-accordion__summary::after{
        top: calc(1.25em + 0.2em);
        width: 10px;
        height: 10px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
    }
    details[open] .p-accordion__summary::after{
        transform: rotate(315deg);
        margin-top: 0.3em;
      }
      .p-form__item label,.p-form__unit{
        font-size: var(--fz16SP);
        font-weight: 500;
    }
    .p-form__selectBox select{
        font-size: var(--fz16SP);
    }
    .p-form__item.-anotherLocation label{
        font-size: 0.75rem;
    }
    .p-form__selectBox::before{
        right: 0.5em;
    }
    .p-accordion__form{
        padding: 0.75rem 1.25em 1.25em;
    }
    .p-form__item input, .p-form__item select{
        padding: 0.625rem 0.5em;
    }
    .p-form__selectWrapper.-date {
        grid-template-columns: 4.5em 1em 3em 1em 3em 1em;
    }
    .p-form__submit{
        font-size: var(--fz16SP);
    }
}
/*-------検索結果--------*/

.is-hidden-before-submit{
   display: none;
} 
.p-accordion__term{
    background-color: #EDEDED;
    color: #6A6A6A;
    margin-top: 3.75rem;
    padding: 2em 2.5em;
    border-radius: 5px;
}
.p-term__list{
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem; 
    margin: 0 auto;
}

.p-term__item dl{ 
    display: flex;
    gap: 1rem;
    width: fit-content;
}
.p-term__item dt{
    white-space: nowrap;
}
.p-accordion__result{
    margin-top: 2.5rem;
}
.p-result__title{
    font-size: var(--fz20);
    font-weight: 700;
}
.p-result__count{
    padding-left: 2em;
}
.p-result__list{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-top:  3px solid #EDEDED;
    border-bottom:  3px solid #EDEDED;
    margin-top: 1.75rem;
    padding-block: 2.5rem;
}
.p-result__item dl,.p-archive__item dl{
    display: grid;
    grid-template-columns: minmax(11.25rem, auto) 1fr;
}
.p-result__item dl dt,.p-archive__item dl dt{
    order: 2;
}
.p-result__item dl dd,.p-archive__item dl dd{
    order: 1;
}
@media screen and (min-width: 947px) {
    .p-result__item dt a:hover,.p-archive__item dt a:hover{
        color: var(--primaryColor);
    }
}
@media screen and (max-width: 946px) {
    .p-term__list{
        flex-direction: column;
    }
    .p-term__item dt {
        min-width: 3.5em;
    }
}
@media screen and (max-width: 475px) {
    .p-accordion__term{
        margin-top: 2.5rem;
        padding: 1.25em;
    }
    .p-term__item dl,.p-archive__item dl{
        grid-template-columns: 1fr;
        gap: 0;
    }
    .p-result__item{
        grid-template-columns: 1fr;
    }
    .p-result__item dl{
        grid-template-columns: 1fr;
    }
    .p-result__item dl dt{
        padding:0.5rem 0 0 0 ;
    }
}




 /* - archive
------------------------------------------------------------------ */

.p-archive{
    position: relative;
    display: block;
    padding: 5rem 0 3.75rem;
    text-align: center;
}
.p-archive__container{
    margin-top: 5rem;
}
.p-archive__selectText{
    padding-bottom: 1.5rem;
}
.p-archive__selectWrapper{
    text-align: center;
}
.p-archive__selectBox {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    padding: 0.5rem;
    text-align: center;
    border: 3px solid #A81A4C;
    background-color: #fff;
    border-radius: 5px;
}
.p-archive__selectBox select{
    position: relative;
    width: 100%;
    text-align-last:center;
}
.p-archive__selectBox::before{
    content: '';
    position: absolute;
    top: 20px;
    right: 24px;
    width: 9px;
    height: 9px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(135deg);
    z-index: 2;
}
.p-archive__selectBox select{
    font-size: var(--fz22);
}
.p-archive__content{
    margin-top: -2.2rem;
    padding: 6.5rem 0 8.5rem;
    background-color: var(--bgColor);
}
.p-archive__yearTitle{
    font-size: var(--fz22);
    font-weight: 700;
    color: var(--primaryColor);
    margin-bottom: 2rem;
}
.p-archive__yearTitle strong{
    font-size: var(--fz32);
}
.p-archive__list{
    display: flex;
    flex-direction: column;
    padding: 4.5rem;
    background-color: #fff;
    border-radius: 10px;
    text-align: left;
}
.p-archive__item dl{
    display: grid;
    grid-template-columns: minmax(11.25rem, auto) 1fr;
}
.p-archive__item dl dt{
    order: 2;
}
.p-archive__item dl dd{
    order: 1;
}
.p-archive__item dd{
    padding-block: 1rem;
    border-right: 3px solid var(--bgColor);
}
.p-archive__item dt{
    padding:1rem 0 1rem 3.25rem;
}


@media screen and (max-width: 475px) {
    .p-archive{
        padding-block: 4rem 2.5rem;
    }
    .p-archive__container{
        margin-top: 2.5rem;
    }
    .p-archive__content{
        padding-block: 5rem;
        margin-top: -1.75rem;
    }
    .p-archive__yearTitle{
        font-size: var(--fz18);
        margin-bottom: 1rem;
    }
    .p-archive__yearTitle strong{
        font-size: var(--fz24);
    }
    .p-archive__list{
        padding: 2.5rem 1.25rem;
        gap: 2.5rem;
    }
    .p-archive__item dl{
        grid-template-columns: 1fr;
        gap: 0;
    }
    .p-archive__item dd{
        padding-block: 0;
        border-right: none;
    }
    .p-archive__item dt{
        padding:0.5rem 0 0 0 ;
    }
}

 /* - lineup
------------------------------------------------------------------ */

.p-lineup{
    position: relative;
    display: block;
    /* - ボタンはみ出してる分padding足す */
    padding: 3.75rem 0 calc(1.875rem + 3.75rem);
}
.p-lineup__list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    /* - ボタンはみ出してる分padding足す */
    gap: calc(1.875rem + 3.5rem) 2rem;
    margin-top: 5rem;
}
.p-lineup__item a{
    position: relative;
    display: block;
}
.p-lineup__btn{
    position: absolute;
    left: 50%;
    transform: translateX( -50%);
    bottom: -1.875rem;
    width: 100%;
    max-width: 10rem;
    padding: 1rem;
    box-shadow: 0 0 5px rgba(0,0,0,0.35);
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
}
.p-lineup__btn p{
    position: relative;
    font-size: var(--fz14);
    font-weight: 600;
}
.p-lineup__btn p strong{
    font-size: var(--fz18);
}
.p-lineup__btn p::after{
    content: '';
    position: absolute;
    top: 0.7rem;
    right: 0.5rem;
    width: 7px;
    height: 7px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
    z-index: 2;
}
@media screen and (min-width: 947px) {
    .p-lineup__item a:hover, .p-specialPage__item a:hover, .footer__item a img:hover{
        opacity: 0.5;
        transition: 0.3s;
    }
}
@media screen and (max-width: 475px) {
    .p-lineup{
        padding: 2.5rem 0 calc(1.375rem + 2.5rem);
    }
    .p-lineup__btn{
        bottom: -1.375rem;
    }
    .p-lineup__list{
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        /* - ボタンはみ出してる分padding足す */
        gap: calc(1.375rem + 3.5rem) 2rem;
        margin-top: 3.25rem;
    }
    .p-lineup__btn{
        padding: 0.5rem;
    }
}
/* - specialPage
------------------------------------------------------------------ */
.p-specialPage{
    position: relative;
    padding: 3.75rem 0 7.5rem;
}
.p-specialPage__list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 5rem;
}
@media screen and (max-width: 475px) {
    .p-specialPage{
        padding-block: 5rem; 
    }
    .p-specialPage__list{

        gap: 1rem;
        margin-top: 3.25rem;
    }
    .p-lineup__btn{
        padding: 0.5rem;
    }
}
/* - footer
------------------------------------------------------------------ */
.p-footer{
    color: #fff;
    background-color: var(--primaryColor);
}
.footer__list{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px, 1fr));
    gap: clamp(2rem, 0.19rem + 6.1vw, 4rem);
    padding-block: 6.5rem;
}
.footer__item{
    text-align: center;
}
.footer__item figcaption{
    padding-bottom: 1rem;
    font-size: var(--fz18);
    font-weight: 600;
}
@media screen and (max-width: 475px) {
    .footer__list{
        gap: 4rem;
        padding-block: 5rem;
    }
}