@media screen and (max-width: 1000px) {
  header .headermodal #modal .mheadernavli {
    padding: 5px 10px 5px;
  }
}

@media screen and (max-width: 992px) {
}

@media screen and (max-width: 820px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
  header .headermodal #modal .mheadernav {
    margin-top: 20px;
  }
  #title-box {
    margin-bottom: 70px;
  }
  .fv .fvbuttonbox {
    display: flex;
    bottom: 0;
  }
  header .headermodal #modal .modalinr {
    width: 100%;
    height: auto;
  }
  /*   header .headermodal #modal .modalinbtnbox {
    margin-left: 20px;
    margin-right: 20px;
  } */
  .cselect {
    width: 100%;
  }

  #sec01 {
    padding-top: 70px;
  }
  #sec01 .titleh2 {
    font-size: 2.8rem;
  }
  #sec01 .text {
    font-size: 1.4rem;
    padding: 0 15px;
    margin-top: 20px;
  }
  #sec01 .imgbox {
    margin-top: 50px;
    overflow: hidden;
  }
  /*  #sec01 .imgbox img {
    width: 790px;
    margin-left: -160px;
  }
 */
  #sec02 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  #sec02 .box {
    flex-wrap: wrap;
  }
  #sec02 .boxl {
    width: 100%;
  }
  #sec02 .boxm {
    width: 100%;
  }
  #sec02 .boxr {
    width: 100%;
    margin-top: 20px;
    padding-left: 0;
  }
  #sec02 .boxl,
  #sec04 .boxl,
  #sec06 .boxl {
    writing-mode: horizontal-tb;
  }
  #sec02 .titleh2 {
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
  }
  #sec02 .text {
    font-size: 1.3rem;
  }
  #sec02 .boxr .titleh3 {
    font-size: 1.2rem;
  }
  #sec02 .boxr .loctitle,
  #kawahisa5 .loctitle {
    font-size: 0.9rem;
    padding: 5px;
  }
  #sec02 .boxr .titleh3,
  #kawahisa5 .loctitle {
    gap: 5px;
  }

  #sec03 {
    padding-top: 65px;
    padding-bottom: 65px;
  }
  #sec03 .boxlistin {
    padding: 45px 20px 20px;
  }
  #sec03 .titleh2 {
    font-size: 2.8rem;
  }
  #sec03 .subtitke {
    font-size: 1.4rem;
  }
  #sec03 .titleh3 {
    font-size: 1.8rem;
  }

  #sec04 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  #sec04 .box {
    flex-wrap: wrap;
  }
  #sec04 .boxl {
    width: 100%;
  }
  #sec04 .boxr {
    width: 100%;
    margin-top: 20px;
    padding-left: 0;
  }
  #sec04 .titleh2 {
    width: 100%;
    writing-mode: horizontal-tb;
    margin-bottom: 40px;
    text-align: center;
  }

  #sec05 {
    padding-top: 65px;
    padding-bottom: 65px;
  }
  #sec05 .titleh2 {
    font-size: 2.8rem;
  }
  #sec05 .titleh3 {
    font-size: 2rem;
  }

  #sec06 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  #sec06 .box {
    flex-wrap: wrap;
  }
  #sec06 .boxl {
    width: 100%;
  }
  #sec06 .boxr {
    width: 100%;
    margin-top: 20px;
    padding-left: 0;
  }
  #sec06 .titleh2 {
    width: 100%;
    writing-mode: horizontal-tb; /* 
    margin-bottom: 40px; */
    text-align: center;
  }
  #sec06 .boxbtn {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  #sec06 .boxbtnf {
    width: 100%;
  }
  #sec06 .boxbtnr {
    width: 100%;
  }

  footer {
    padding-bottom: 100px;
  }
  footer .footerbottom {
    flex-wrap: wrap;
  }
  footer .footerbottoml {
    width: 100%;
    text-align: center;
  }
  footer .footerbottomr {
    width: 100%;
    text-align: center;
  }
  footer .box {
    padding-top: 55px;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  footer .footerleft {
    margin-top: 55px;
    width: 100%;
    text-align: center;
  }
  footer .footerright {
    width: 100%;
  }
  footer .headernav {
    flex-wrap: wrap;
  }
  footer .headernavli a {
    /* width: 100%; */
    writing-mode: horizontal-tb;
    width: fit-content;
    margin: auto;
  }
  footer .headernavli {
    width: 50%;
    padding: 15px 0;
    text-align: center;
  }

  #about1 {
    padding-top: 0;
    padding-bottom: 70px;
  }
  #about1 .subtitke {
    font-size: 1.4rem;
    margin-top: 20px;
  }
  #about1 .titleh3 {
    font-size: 2rem;
  }
  #about1 .imgbox {
    margin-top: 20px;
  }
  #about1 .imgbox img {
    width: 60%;
  }
  #about2 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  #about2 .box {
    flex-wrap: wrap;
  }
  #about2 .boxl {
    width: 100%;
  }
  #about2 .boxr {
    width: 100%;
    margin-top: 0px;
    padding-left: 0;
  }

  #about2 .titleh3 {
    font-size: 2rem;
    margin-top: 30px;
  }
  #about2 .subtitke {
    font-size: 1.4rem;
    margin-top: 15px;
  }
  #about2 .bottom {
    margin-top: 10px;
  }
  #about3 {
    padding-top: 0;
    padding-bottom: 70px;
  }
  #about3 .titleh2 {
    width: 100%;
    writing-mode: horizontal-tb;
    margin-bottom: 0;
    text-align: center;
  }

  #about3 .box {
    flex-wrap: wrap;
  }
  #about3 .boxl {
    width: 100%;
    writing-mode: horizontal-tb;
  }
  #about3 .boxr {
    width: 100%;
    margin-top: 10px; /* 
    padding-left: 0;
    margin-right: -20px; */
  }
  #about3 .inboxul:after {
    top: 64px;
    left: 11.5px;
    height: calc(100% - 62px);
  }
  /*   #about3 .inboxli1 {
    width: 310px;
  } */
  #about3 .dlbox {
    padding: 20px;
    margin: 30px 10px;
    width: calc(100% - 50px);
  }
  #about3 .inboxli {
    flex-direction: column;
  }
  #about3 .year::after {
    left: 15px;
    height: calc(100% + 200px);
    transition: 0.3s;
  }
  #about3 .inboxli:not(:first-child) .year::after {
    height: calc(100% + 80px);
    transition: 0.3s;
  }

  #about3 .inboxli .dtbox.active + .ddbox + .year::after,
  #about3 .inboxli .dtbox.active ~ .ddbox + .year::after, /* 兄弟要素のセレクタ*/
  #about3 .dtbox.active ~ .year::after, /*間接兄弟結合子*/
  #about3 .inboxli:has(.dtbox.active) .year::after {
    height: calc(100% + 300px);
    transition: 0.3s;
  }

  #about3 .year {
    padding: 25px 30px 0 50px;
    font-size: 2.8rem;
  }

  #about3 .yearlineabs img {
    margin-left: -31px;
    margin-top: -4px;
    position: absolute;
  }
  #about3 .dlbox {
    margin: 0px 20px 0px 50px;
  }
  #about3 .dtbox {
    font-size: 1.8rem;
  }
  #about3 .ddbox {
    font-size: 1.4rem;
    line-height: 1.8em;
  }
  #about4 {
    padding-top: 0;
    padding-bottom: 70px;
  }
  #about4 .bottom {
    margin-top: 30px;
  }
  #about4 .titleh2 {
    font-size: 2rem;
  }
  #about4 .listul {
    flex-direction: column;
    background: #fff;
    padding: 20px;
    position: relative;
    align-items: center;
    margin-top: 30px;
  }

  #about4 .listul:after {
    content: "";
    position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    left: 10px;
    top: 10px;
    border: 1px solid #d6d6d6;
  }
  #about4 .listli {
    max-width: 100%;
    margin-bottom: 0;
    background: none;
    width: 190px;
  }
  #about4 .listli1 {
    display: flex;
    align-items: center;
    gap: 15px;
    border: none;
    padding: 0;
  }
  #about4 .titleh4 {
    margin-top: 0;
  }
  #about4 .imgbox {
    width: 1.5em;
    height: 1.5em;
    display: flex;
  }
  #about4 .imgbox img {
    height: auto;
  }
  #about4 .subtitke {
    margin-top: 30px;
    font-size: 1.5rem;
  }

  #contact {
    padding-bottom: 0;
  }
  #contact .inbox {
    flex-wrap: wrap;
  }
  #contact .inboxl {
    width: 100%;
    padding-top: 0;
  }
  #contact .inboxr {
    width: 100%;
    padding-top: 10px;
  }

  #maiko {
    padding-bottom: 0;
  }
  #maiko .text {
    font-size: 1.5rem;
    line-height: 2em;
  }
  #maiko .listli {
    line-height: 1.8em;
  }
  #maiko .listli:not(:last-child) {
    margin-bottom: 0.5em;
  }
  #maiko .inbox {
    flex-wrap: wrap;
  }
  #maiko .inboxl {
    width: 100%;
    padding-top: 0;
  }
  #maiko .inboxr {
    width: 100%;
    padding-top: 10px;
  }
  #maiko .whitebox {
    flex-wrap: wrap;
    padding: 30px 30px;
  }
  #maiko .whiteboxl {
    width: 100%;
    margin-bottom: 10px;
  }
  #maiko .titleh3 {
    margin-top: 70px;
  }
  #maiko .maikobox {
    margin-top: 40px;
  }
  #maiko .whiteboxr {
    width: 100%;
  }
  #maiko .cselect {
    width: 100%;
  }

  #archievelocation .box {
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  #archievelocation .boxl {
    width: 100%;
  }
  #archievelocation .box a {
    flex-wrap: wrap;
  }
  #archievelocation .boxr {
    width: 100%;
    padding-left: 0;
    padding: 30px 25px;
  }
  #archievelocation .titleh3 {
    font-size: 2rem;
  }
  #archievelocation .text {
    font-size: 1.3rem;
  }
  #archievelocation .taxo {
    font-size: 1.3rem;
  }
  #archievelocation .bottom {
    margin-top: 5px;
  }

  #archievelocation .bottom .parts__btn {
    font-size: 1.4rem;
    padding: 25px 60px 25px 0px;
  }
  #archievelocation .listul {
    flex-wrap: wrap;
  }
  #archievelocation .listli {
    width: 100%;
  }
  #archievelocation .listul {
    margin-top: 60px;
  }
  #archievelocation .listli {
    margin-bottom: 20px;
  }
  #archievelocation .listli .titleh3 {
    padding: 20px 25px;
    font-size: 1.8rem;
  }
  #archievelocation .loctitle {
    padding: 5px 15px;
  }

  #archieveplan .listli {
    width: 100%;
  }
  #archieveplan .option {
    flex-wrap: wrap;
    margin-bottom: 70px;
  }
  #archieveplan .optionl {
    width: 100%;
    margin-bottom: 8px;
  }
  #archieveplan .optionr {
    width: 100%;
  }
  #archieveplan .venue-title {
    padding-top: 0;

    font-size: 2rem;
  }
  #archieveplan .listul {
    margin-bottom: 70px;
  }

  .popup {
    margin-left: 0;
  }
  .popup2,
  .popup4,
  .popup6,
  .popup8,
  .popup10 {
    margin-top: 0px;
  }

  #kawahisa1 {
  }
  #kawahisa .imgbox {
    /* width: 790px; */
    margin-bottom: 70px;
    margin-top: 10px;
  }
  #kawahisa2 {
    padding-top: 70px;
    padding-bottom: 60px;
  }
  #kawahisa2 .listul {
    flex-wrap: wrap;
    margin-top: 40px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #kawahisa2 .listli {
    width: 100%;
  }
  #kawahisa2 .c-note {
    margin-top: -5px;
  }
  #kawahisa3 {
    padding-top: 70px;
    padding-bottom: 0;
  }
  #kawahisa3 .box {
    flex-wrap: wrap;
  }

  #kawahisa3 .boxl {
    width: 100%;
    writing-mode: horizontal-tb;
  }
  #kawahisa3 .boxr {
    width: 100%;
  }
  #kawahisa3 .titleh2 {
    width: 100%;
    writing-mode: horizontal-tb;
    margin-bottom: 40px;
    text-align: center;
    letter-spacing: 0;
  }

  #kawahisa5 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  #kawahisa3 .inbox {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  #kawahisa3 .inboxl {
    width: 100%;
    margin-right: 0;
  }
  #kawahisa3 .inboxr {
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }
  #kawahisa3 .text {
    margin-top: 20px;
  }
  #kawahisa5 .listlibox img {
    aspect-ratio: 4 / 3;
  }

  #kawahisa4 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  #kawahisa4 .titleh3 {
    margin-top: 40px;
  }
  #kawahisa4 .box {
    margin-top: 25px;
    flex-wrap: wrap;
  }
  #kawahisa4 .boxl {
    width: 100%;
  }
  #kawahisa4 .boxr {
    width: 100%;
  }
  #kawahisa4 .inboxl {
    width: 110px;
  }
  #kawahisa4 .inboxr {
    width: calc(100% - 110px);
  }

  #kawahisa5 .titlebox {
    flex-wrap: wrap;
  }
  #kawahisa5 .titleh4 {
    width: 100%;
    text-align: center;
  }
  #kawahisa5 .linkh4 {
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }
  #kawahisa5 .listul {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 40px;
  }
  #kawahisa5 .titleh5 {
    padding: 15px 10px;
    font-size: 1.4rem;
  }

  .fvbuttonbox {
    position: fixed;
    bottom: 10px;
    right: 0px;
    left: 0; /* 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; */
    z-index: 8;
    padding: 0 10px;
  }

  .fvbuttonbox .fvbtn1,
  .fvbuttonbox .fvbtn2 {
    width: 48.7%;
  }
  header .headermodal #modal {
    height: 100vh;
  }
  header .headermodal #modal .modalinbtn {
    font-size: 1.7rem;
    padding: 10px 20px;
  }
  #kawahisa1 .text {
    font-size: 14px;
    margin-top: 20px;
  }
  /*  #title-box.title-box2 img,
  #title-box.title-box2 {
    height: 400px;
  } */

  #title-box.title-box3 {
    aspect-ratio: 3 / 4;
  }
  #title-box.title-box3 .titleboxarea {
    bottom: 50px;
  }
  #title-box .titleboxarea {
    bottom: 30px;
  }
  .fv,
  .fv li img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
}

@media screen and (max-width: 480px) {
  #archieveplan .listopul {
    flex-wrap: wrap;
  }
  /*   #archieveplan .listopli {
    width: 48%;
    margin-bottom: 10px;
  } */
}

@media screen and (max-width: 400px) {
  #sec01 .text,
  #about1 .subtitke {
    font-size: 1.2rem;
  }
}