@charset "UTF-8";
html{font-size: 100%;}
a{text-decoration: none;}
img{max-width: 100%;}
/*レイアウト*/
.wrapper{max-width: 1020px;margin: auto;padding: 0 1.5rem;}
.align-center{text-align: center;}
/*ヘッダーとホーム*/
.page-header{padding-top: .5rem;}
.logo{width: 400px; border-style: outset;border-color: #b5b5b5; border-width: 5px;}
.lang-select{position: absolute;top: 15px;right: 20px; text-decoration: underline;}
.main-nav{display: flex;justify-content: center;gap: 2.5rem;font-size:  0.7rem;list-style: none;}
.main-nav a{color: #000000;}
.main-nav a:hover{color: #0bd;}
.main-nav li{text-align: center;}
body{color: #000000;background-color: #c3f2ff;font-family: "M PLUS Rounded 1c", sans-serif;font-weight: 300;font-style: normal;}
.backwhite{background-color: #fff; border-radius: 16px;}
.japanniwa{padding-bottom: 20px;}
.img-frame{
    position: relative;
    width: 90%;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 16px;
 }
 .img-frame::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(78, 78, 78, 0.5);
 }
 .img-01,
 .img-02,
 .img-03,
 .img-04,
 .img-05,
 .img-06{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
 }
 .img-01{
    background-image: url(images/index.picture/IMG_9352.jpg);
    animation: slide-animation-01 23s infinite;
 }
 .img-02{
    background-image: url(images/index.picture/IMG_8357.JPG);
    animation: slide-animation-02 23s infinite;
 }
 .img-03{
    background-image: url(images/index.picture/IMG_0710.jpg);
    animation: slide-animation-03 23s infinite;
 }
 .img-04{
    background-image: url(images/index.picture/IMG_6210.jpg);
    animation: slide-animation-04 23s infinite;
 }
 .img-05{
    background-image: url(images/index.picture/sengoku.JPG);
    animation: slide-animation-05 23s infinite;
 }
 .img-06{
    background-image: url(images/index.picture/鶴岡八幡宮.jpg);
    animation: slide-animation-06 23s infinite;
 }
 .msg{
    font-size: 15px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
 }
 @keyframes slide-animation-06 {
    0% {opacity: 1;}
    17% {opacity: 1;}
    21%{opacity: 0;}
    37% {opacity: 0;}
    90% {opacity: 0}
    100% {opacity: 1;}
  }
 @keyframes slide-animation-05 {
    0% {opacity: 0;}
    16% {opacity: 0;}
    20%{opacity: 1;}
    33%{opacity: 1;}
    37% {opacity: 0;}
    90% {opacity: 0}
    100% {opacity: 0;}
  }
  @keyframes slide-animation-04 {
    0%{opacity: 0;}
    32%{opacity: 0;}
    36%{opacity: 1;}
    49%{opacity: 1;}
    53%{opacity: 0;}
    100%{opacity: 0;}
  }
  @keyframes slide-animation-03 {
    0% {opacity: 0;}
    48%{opacity: 0;}
    52%{opacity: 1;}
    65%{opacity: 1;}
    69% {opacity: 0;}
    100% {opacity: 0;}
  }
  @keyframes slide-animation-02 {
    0% {opacity: 0;}
    64%{opacity: 0;}
    68%{opacity: 1;}
    81%{opacity: 1;}
    85% {opacity: 0}
    100% {opacity: 0;}
  }
  @keyframes slide-animation-01 {
    0%{opacity: 0;}
    80%{opacity: 0;}
    84%{opacity: 1;}
    99%{opacity: 1;}
    100%{opacity: 0;}

  }
 @media screen and (max-width: 900px){
 .img-frame{
     width: 100%;
     height: 500px;
 }
 }
.item{border-radius: 5px;border:0.2px solid #000;margin-bottom: 10px;}
.item:hover{opacity: 0.7;}
.itemx{border-radius: 4px;border:0.2px solid #000;margin-bottom: 10px;}
.itemx:hover{opacity: 0.7;}
.about{margin:auto;}
.news{height: 80px;background-color: rgb(236, 234, 234);
	overflow-y: scroll;border-style: double;}
.btn{display: inline-block;
    font-size: 1.5rem;
    background-color: rgb(70, 201, 224);
    color: #fff;
    border-radius: 8px;
    padding: .75rem 1.5rem;
}
.btn:hover{background-color: rgb(0, 139, 163);}
.btn2{display: inline-block;
    font-size: 1.2rem;
    background-color: #ff8000;
    color: #fff;
    border-radius: 8px;
    padding: .75rem 1.5rem;
}
.btn2:hover{background-color: #ff4400;}
.btn3{display: inline-block;
    font-size: 1.2rem;
    background-color: #0095ff;
    color: #fff;
    border-radius: 8px;
    padding: .75rem 1.5rem;
}
.btn3:hover{background-color: #002aff;}
.email{padding: 1.5rem 2.5rem 2.5rem;}

/*目次*/
.mokuji{background-color: #e4f0f9; margin-bottom: 100px;padding: 1em 1em 1em 2em;border: 1px solid #999;margin:30px 0}
.mokuji div {display: flex;align-items: left;margin: 0;padding: 5px 0;}


/*写真・図*/
.picture{border-radius: 8px;}/*最初の6枚*/
.mihon{display: grid;grid-template-columns: repeat(2,1fr);gap: .2rem .2rem}/*最初の６枚の２枚ずつ指定*/
.imagezu{border-radius: 6px;border-style: solid;border-width: 2px;}/*イメージ図*/
.scroll-content{display: flex;
    max-width: 1000px;
    margin: auto;
    overflow-x: auto;
    list-style: none;
    padding-left: 0;
}/*写真の横スクロール*/
.scroll-content li {
    width: 35%;
    margin: 2px;
    flex-shrink: 0;
    text-align: center;}/*横スクロールの項目について*/
.scroll-content img {
    width: 100%;
    max-width: 340px;
    max-height: 255px;
    object-fit: cover;} /* 横スクロールの写真のスタイル */

/*文字*/
.hukudai{font-size: 24px;}
h2{font-size: 50px ;text-align:center;font-family: "Zen Maru Gothic", serif;font-weight: 500;font-style: normal;;padding-top: 10px;}
h3{border-bottom: 1px solid; margin: 0 10px 0;font-family: "Zen Maru Gothic", serif;font-weight: 500;font-style: normal}
.niteiru{background-color: #91bade;}
.keturon{font-size: larger;text-decoration: underline;}
details{background-color: #e2effb;}
.museumu-list{column-count: 2;}
strong{font-weight: bold;}
.syosai{text-align: center;}
.syosai a{color: #007d89;}
.syosai a:hover{color: #0bd;}

/*質問コーナー*/
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
    margin: 10px 0;
  }

/*表*/
.deta{font-size: 20px;}
.bunya{justify-content: left;}
.table-scroll{overflow-y:auto;height: 500px;}
.table-scroll2{overflow-y:auto;height: 280px;}
.table-scroll3{overflow-x:auto; width: 650px;}
thead{position:sticky;top:0;left: 0;border-top: none;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;}
tbody{overflow-x: hidden;
    overflow-y: scroll;}
.table-scroll table{width: 800px;border-collapse:separate; }
.table-scroll2 table{width: 800px;border-collapse:separate; }
.table-scroll3 table{width: 650px;border-collapse: separate;}
table,th,td{border-style: solid; border-color: #000000; border-width: 1px;}
ul li{word-break: break-all;}


/*地図*/
iframe{width: 100%;}

/*戻るボタン*/
.modoru{text-align: center;}
.modoru a{color: #000000;}
.modoru a:hover{color: #0bd;}

/*デスクトップ版*/
@media(min-width:1000px){
    .page-title{font-size: 5rem;}
    .heading-large{font-size: 4rem;}
    .page-header{
        display: flex;
        justify-content: space-between;
        padding-top: 1.5rem;
    }
    .main-nav{font-size: 1.5rem;padding-top: 2rem;}
    .backwhite p{margin:auto;}
    .msg{font-size: 27px;}
    .japanniwa{width: 600px; margin: auto;}
    .news{width: 800px;margin: auto;}
    .item{width: 700px; height: 140px;border-radius: 16px;border:1px solid #000;}
    .mokuji{width: 400px;margin-left: 80px;}
    .mihon{gap: 0.5rem 1rem;grid-template-columns: repeat(3,1fr);}
    .imagezu{width: 600px;margin-left: 100px;margin-bottom: 10px; margin-top: 10px;}
    .grid{gap: 0 2rem;grid-template-columns: repeat(2,1fr);}
    h2{font-size: 20px;}
    .hukudai{font-size: 40px;}
    .honbun{margin: 10px 90px;}
    table{margin: auto;}
    iframe{margin: auto;width: 840px;}
    .map{width: 400px;}
    .museumu-list{column-count: 3;}
    .itemyoko{display: grid;grid-template-columns: repeat(2, 1fr);gap: .1rem .3rem;}
    .itemyokot{display: grid;grid-template-columns: repeat(4, 1fr);;gap: .1rem .3rem;}
    .item{width: 90%; height: fit-content;}
    .yokonarabi{display: flex;justify-content: space-between;}
    .post{width: 50%;}
    .sidebar{width: 49%;}
    .sticky{position: -webkit-sticky;position: sticky;top: 0;}
}
/*スマホ版の表*/
@media(max-width:450px){
    .table-scroll{overflow-x: scroll;}
    .table-scroll3{overflow-x: scroll; width: 100%;}
    h2{font-size: 20px;}
    .img-frame{
        position: relative;
        width: 100%;
        height: 150px;
        overflow: hidden;
        margin: 0 auto;
     }
     .scroll-content li {
        width: 50%;
      }
    .itemyokot{display: grid;grid-template-columns: repeat(2, auto);;gap: .1rem .3rem;}
    
     @media screen and (max-width: 430px){
        .img-frame{
            width: 100%;
            height: 150px;
        }
    }
}