*{
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

html{
    font-size: 15px;
}

@media screen and (min-width: 767px){
    html{
        font-size: 20px;
    }
}

body{
    font-family: 'Noto Sans', 'Helvetica Neue', Arial, 'Noto Sans JP', "BIZ UDGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    line-height: 1.7;
    color: #333;
    overflow-x: hidden;
    flex-direction: column;
    margin-right: 250px;
}




main{
    padding-right: 40px;
}

@media screen and (min-width: 767px){
    
}

footer{
    background-color: #00416A;
    padding: 0 0 150px;
    width: calc(100% - 40px);
    text-align: center;
    color: #ffffffce;
}

.footer_box{
    padding: 10px 20px 0;
    font-size: 0.8rem;
}

h1{
    font-size: 1.3rem;
}

@font-face {
    font-family: "kawaii";
    src: url(/assets/font/KTEGAKI.ttf) format("truetype");
}

/*ヘッダー部分処理*/



/*メイン部分処理*/

/*サイトマップ*/
.sidebar_nav{
    position: fixed;
    top: 0;
    width: 80%;
    height: 100%;
    z-index: 201;
    transition: all 0.1s;
    left: -80%;
    opacity: 0;
    background-image: url(/assets/img/background_img.jpg);
}

.sidebar_inner{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.sidebar_inner_map{
    width: 90%;
}

.sidebar_close{
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}

.toggle_btn{
    display: block;
    position: fixed;
    width:7rem;
    height: 7rem;
    bottom: 2rem;
    left: 2rem;
    z-index: 50;
    cursor: pointer;
    color: #1774e5;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff,
  -1px 1px 0 #fff,  1px -1px 0 #fff,
  1px 0 0 #fff, -1px  0 0 #fff,
  0 1px 0 #fff,  0 -1px 0 #fff;
}

.button_map{
    width: 100%;
    height: 100%;
}

.toggle_btn_text{
    position: absolute;
    font-size: 3rem;
    font-family: "Potta One";
    text-align: center;
    left: -1rem;
    top: 1.25rem;
    width: 9rem;
}
@media screen and (max-width: 767px){
    .toggle_btn{
        display: block;
    }
}


.open .sidebar_nav{
    left: 0;
    opacity: 1;
}

.open .toggle_btn{
    display: none;
}

#mask{
    display: none;
    transition: 0.2s;
}

.open #mask{
    position: fixed;
    display: block;
    z-index: 200;
    opacity: 0.7;
    width: 100%;
    height: 100vh;
    background-color: #333;
    cursor: pointer;
}

/*縦書き*/

/*l=>r*/
.vertical_l{
    writing-mode: vertical-lr;
}

/*r=>l*/
.vertical_r{
    writing-mode: vertical-rl;

}


/*swiper処理*/
.swiper {
    width: 100%;
}




.swiper-slide{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
}

/* 前へ次への矢印カスタマイズ */

.swiper-button-prev:after,
.swiper-button-next:after {
  content: ""; /*ここでデフォルトの矢印を上書き*/
  width: 10px;
  height: 44px;
  border: 0;
  background-color: #474f85;
  border-radius: 5%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;

}
/* 前への矢印カスタマイズ */
.swiper-button-prev:before {
    content: "";
    top: 0;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 40%;
    border-bottom: 20px solid transparent;
    border-right: 5px solid #6E75A4;
    border-top: 20px solid transparent;
    z-index: 20;
}

.swiper-button-prev:after{
    right: 0;
}

/* 次への矢印カスタマイズ */
.swiper-button-next:before {
    content: "";
    top: 0;
    bottom: 0;
    position: absolute;
    left: 40%;
    right: 0;
    border-bottom: 20px solid transparent;
    border-left: 5px solid #6E75A4;
    border-top: 20px solid transparent;
    z-index: 20;
}

.swiper-button-next:after{
    left: 0;
}

/*モーダルウィンドウ設定*/


@keyframes popup {
    from{
        transform: translateY(150%);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.modalClose {
    font-size: 1.3rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
    height: 1.5rem;
    width: 1.5rem;
    line-height: 1.5rem;
    text-decoration: none;
    background: rgb(51, 51, 51, 0.5);
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
}


.modalOpen{
    font-size: 1.1rem;
    
    border-radius: 49% 42% 71% 25% / 54% 50% 39% 32%;
    padding: 0.5em;
    margin: 15px 0;
    border: none;
    cursor: pointer;
    
    position: relative;
}





/*年表*/

.historyBar_nav{

    position: fixed;
    top: 0;
    right: 0;
    width: 290px;
    height: 100%;
    z-index: 150;
    transition: all 0.1s;
}

.historyBar_inner{
    display: flex;
}
.historyBar_toggle_list{
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    z-index: 151; 
    font-size: 1.1rem;
    
}

.historyBar_toggle_list li{
    height: 25vh;
    text-align: center;
    padding-top: 1vh;
}

.historyBar_contants{
    width: 250px;
    height: 100vh;
    position: relative;
    z-index: 150;
}

.historyBar_slide{
    z-index: 150;
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
}
.historyBar_slide1{
    background-color: #FFFFFF;
}
.historyBar_slide2{
    background-color: #FFFFFF;
}

.historyBar_slide3{
    background-color: #FFFFFF;   
}

.historyBar_slide4{
    background-color: #FFFFFF;   
}

.historyBar_toggle{
    border-radius: 5% 0 0 5%;
}

.historyBar_toggle1{
    background-image: linear-gradient(90deg, #FFD700 0%, #FFD700 80%, #ffffff 95%);
    z-index: 151;
    
}
.historyBar_toggle2{
    background-image: linear-gradient(90deg, #87CEEB 0%, #87CEEB 80%, #ffffff 95%);
    font-size: 2vh
}

.historyBar_toggle3{
    background-image: linear-gradient(90deg, #7EC8E3 0%, #7EC8E3 80%, #ffffff 95%);

}

.historyBar_toggle4{
    background-image: linear-gradient(90deg, #6ABD45 0%, #6ABD45 80%, #ffffff 95%);
    
}

.historyBar_btn_list{
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 40px;
    right: 0px;
    height: 100%;
    z-index: 151;
    cursor: pointer;
    transition: all 0.1s;
}

.historyBar_btn_list li{
    height: 25vh;
}
@media screen and (max-width: 767px){
    .historyBar_nav{
        right: -250px;
        opacity: 1;
    }
    body{
        margin-right: 0;
    }
    .historyBar_btn_list{
        display: block;
    }
}

.historyBar_content{
    display: flex;
    font-size: 1.7vh;

}

.date{
    width: 45px;
}

.event{
    width: 205px;

}

.event_slide1{
    width: 205px;
    border-bottom: 1px solid #FFD700;
}

.event_slide2{
    width: 205px;
    border-bottom: 1px solid #87CEEB;
}

.event_slide3{
    width: 205px;
    border-bottom: 1px solid #7EC8E3;
}

.event_slide4{
    width: 205px;
    border-bottom: 1px solid #6ABD45;
}

.open2 .historyBar_nav{
    right: 0;
    opacity: 1;
}

.open2 .historyBar_btn_list{
    display: none;
}
#maskH{
    display: none;
    transition: 0.2s;
}

.open2 #maskH{
    position: fixed;
    display: block;
    z-index: 100;
    opacity: 0.7;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: #333;
    cursor: pointer;
}

.historyBar_slide.active2{
    z-index: 151;
}


/*containts*/

/*トップ画面*/

article{
    width: 100%;
    height: 26.6rem;
    position: relative;
}




.topVisual_swiper {
    width: 100%;
    height: 100%;
}

.topVisual{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}


.topVisual_picture{
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.topVisual_text{
    position: absolute;
    padding-left: 20px;
    bottom: 1rem;
    z-index: 2;
    overflow: hidden;
}

.topVisual_title{
    font-size: 2.6rem;
    font-family: "Damion";
    color: #fff;
    
}

.topVisual_subtitle{
    font-size: 1.2rem;
    color: #ffffff;
    
}

.introduce{
    background-image: url(/assets/img/background_img.jpg);
    height: 13.3rem;
    padding-bottom: 3.33rem;

}

.introduce_text{
    
    font-size: 1.5rem;
    position: relative;
    padding-left: 20px;
    top: 5%;
    
}




/*メインコンテンツ*/


.content{
    background-color: #fff;
    background-image: url(/assets/img/background_img.jpg);
    padding: 0  0 1px;
}

.Map{
    margin: 0px;
}

.content_title{
    background: linear-gradient(120deg, #3783e0 0, #5798e7 50%, #fff 100%);
    color: #fff;
    margin: 0px;padding-left: 1rem;
    
}

.content_title_text{
    margin: 0;
}

/*マップ*/

.map_picture{
    width: 100%;
}


.map_box{
    position: relative;
}

.map_caption{
    font-size: 1rem;
}

a{
    position: absolute;
}

.link1 {
    top: 16.2%;    /* 上からの位置 */
    left: 76.9%;   /* 左からの位置 */
    width: 3.4%;   /* 横幅 */
    height: 35.8%; /* 縦幅 */
}

.link2{
    top: 32.1%;
    left: 69.1%;
    width: 3.4%;
    height: 24.9%;
}

.link3{
    top: 35.3%;
    left: 60.2%;
    width: 3.3%;
    height: 35.7%;
}

.link4{
    top: 22.4%;
    left: 49.2%;
    width: 3.5%;
    height: 40.5%;
}

.link5{
    top: 29.8%;
    left: 37.7%;
    width: 3.5%;
    height: 36%;
}

.link6{
    top: 43%;
    left: 28%;
    width: 3.7%;
    height: 18.1%;
}

.link7{
    top: 41.1%;
    left: 6%;
    width: 3.6%;
    height: 43.3%;
}

.link8{
    top: 12.8%;
    left: 87.7%;
    width: 3.3%;
    height: 8.6%;
}

.link9{
    top: 63.8%;
    left: 15.5%;
    width: 3.3%;
    height: 14.6%;
}

.link1e {
    top: 38%;    /* 上からの位置 */
    left: 60%;   /* 左からの位置 */
    width: 37%;   /* 横幅 */
    height: 5%; /* 縦幅 */
}

.link2e{
    top: 51%;
    left: 59%;
    width: 24%;
    height: 5%;
}

.link3e{
    top: 79%;    /* 上からの位置 */
    left: 58%;   /* 左からの位置 */
    width: 37%;   /* 横幅 */
    height: 4.5%; /* 縦幅 */
}

.link4e{
    top: 65%;    /* 上からの位置 */
    left: 53%;   /* 左からの位置 */
    width: 45%;   /* 横幅 */
    height: 4.5%; /* 縦幅 */
}

.link5e{
    top: 60%;    /* 上からの位置 */
    left: 21%;   /* 左からの位置 */
    width: 46%;   /* 横幅 */
    height: 4%; /* 縦幅 */
}

.link6e{
    top: 51.5%;    /* 上からの位置 */
    left: 17.5%;   /* 左からの位置 */
    width: 24%;   /* 横幅 */
    height: 4.5%; /* 縦幅 */
}

.link7e{
    top: 71.5%;    /* 上からの位置 */
    left: 7%;   /* 左からの位置 */
    width: 24%;   /* 横幅 */
    height: 4.5%; /* 縦幅 */
}

.link8e{
    top: 16%;    /* 上からの位置 */
    left: 82.5%;   /* 左からの位置 */
    width: 12%;   /* 横幅 */
    height: 4.5%; /* 縦幅 */
}

.link9e{
    top: 86.5%;    /* 上からの位置 */
    left: 8%;   /* 左からの位置 */
    width: 33%;   /* 横幅 */
    height: 4.5%; /* 縦幅 */
}


/*メッセージのデザイン*/
.message{
    position: relative;
    margin: 15px;
    border-radius: 5%;
    
    padding: 15px;
    box-shadow: 1px 1px 15px -1px #333;
}

@media screen and (min-width: 767px){
    .message{
        max-width: 640px;
        margin: 15px auto;   
    }
}



.message_header{
    height: 3rem;
}
.message_text{
    margin: 4px;
    
    font-family: "kawaii";
}

.message_font{
    font-family: "Hina Mincho";
}




/*コラムのデザイン*/
.note{
    width: 100%;
    margin: 2rem 0;
    padding: 2rem 0;
    font-family: "Hina Mincho";
    background-color: #a83f3f;
}

.note_title{
    font-size: 1.4rem;
    margin: 0.5rem;
    
}


/*テープ付きのやつ*/

.note_box{
    width: 80%;
    min-width: 290px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}

@media screen and (min-width: 767px){
    .note_box{
        max-width: 640px;
    }
}

.note_text{
    position: relative;
    height: 100%;
    padding: 30px 20px;
    background-color: #fff;
    border:10px double #1774e5;  
}

.ribbon{
    position: absolute;
    height: 30px;/*リボンの高さ*/
    line-height: 30px;/*リボンの高さ*/
    padding: 0 50px;/*横の大きさ*/
    box-sizing: border-box;
    z-index: 1;
    transform:rotate(-45deg);
    
}


.ribbon:before, .ribbon:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}
  
.ribbon:before {
    top: 0;
    left: -0.5px;
    border-width: 15px 0px 15px 5px;
    border-color: transparent transparent transparent #a83f3f;
    border-style: solid;
}
  
.ribbon:after {
    top: 0;
    right: -0.5px ;
    border-width: 15px 5px 15px 0px;
    border-color: transparent #a83f3f transparent transparent;
    border-style: solid;
}

.ribbon_front{
    top: 5px;
    left: -27px;
}

.ribbon_back{
    top: calc(100% - 35px);
    left: calc(100% - 73px); 
}


/*コンテンツごとのトップビジュアル*/
.subcontent_body{
    margin: 2rem 0 ;
    max-width: 640px;
}

@media screen and (min-width: 767px){
    .subcontent_body{
        margin: 2rem auto ;
        max-width: 640px;
    }
}


.subcontent_img{
    width: 100%;
    max-width: 640px;
    aspect-ratio: 1 / 0.5;
    position: relative;
}
.subtitle{
    position: relative;
}

.subtitle_box{
    position: absolute;
    background-color: rgb(255, 255, 255, 0.7);
    width: 100%;
    bottom: 2rem;
}

.subtitle_box::before{
    content: "";
    height: 0.2rem;
    width: 100%;
    background-color: rgb(255, 255, 255, 0.7);
    position: absolute;
    top: -0.2rem;
}
.subtitle_box::after{
    content: "";
    height: 0.2rem;
    width: 100%;
    background-color: rgb(255, 255, 255, 0.7);
    position: absolute;
    bottom: -0.2rem;
}
.subtitle_text{
    opacity: 1;   
    margin: 0 ;
    padding-left: 10%;
    border-top: solid 0.1rem #333333;
    border-bottom: solid 0.1rem #333333;
}

.subcontent_title_img{
    width: 100%;
    
}

.subcontent_swiper{
    width: 90%;
    padding: 20px 0;
}



.subcontent_swiper-slide{
    width: 80%;
}

.swiper_img{
    width: 100%;
    
}

.img_vertical{
    max-height: 60%;
    width: 60%;
}
figcaption{
    font-size: 0.5rem;
    background-color: #FFFFFF;
    width:100%;
    text-align: center;
}

.subcontent_text{
    margin: 1rem 3rem ;
    position: relative;
}
.solo_body{
    height: 60%;
    width: 100%;
    margin-bottom: 1.3rem;
}

.solo_content{
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 1 / 0.5;
    position: relative;
}

.solo_img{
    width: 80%;
}

.solo_figure{
    position: relative;
    
}

.solo_figcaption{
    width: 80%;
    margin: 0 auto;
}

.vertical_figcaption{
    width: 60%;
    margin: 0 auto;
    font-size: 0.4rem;
    height: 0.5rem;
}
/*ガイドポイント1*/


.subcontent_body1_1::before{
    content: "";
    background-color: #81e0a9;
    width: 100vw;
    height: 30px;
    position: absolute;
    bottom: 0; 
    left: 0;
}

.subcontent_body1_2::before{
    content: "";
    background-color: #248F51;
    width: 100vw;
    height: 30%;
    position: absolute;
    top: 20%; 
    left: 0;
}

.subcontent_body1_3::before{
    content: "";
    background-color: #2087ba;
    width: 80%;
    aspect-ratio: 1 / 0.7;
    position: absolute;
    top: 0;
    left: 0;
}

.subcontent_body1_4::before{
    content: "";
    background-color: #68b7a1;
    width: 100%;
    aspect-ratio: 1 / 0.6;
    position: absolute;
    top: calc(0% - 20px);
    left: 0;
}

#modalOpen{
    background-color: #CCFFFF;
    box-shadow: 0 2px 7px #CCFFFF;
    left: 60%;
}

#modalClose{
    z-index: 201;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}

#modal_option{
    display: none;
    text-align: center;
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    background-color: rgb(51, 51, 51, 0.5);
    height: 100vh;
    width: 100%;
}

.modal{
    
    margin:10% auto;
    animation-name: popup;
    animation-duration: 0.3s;
    width: 300px;
    
}

.modal_box{
    padding: 1rem;
    background-image: url("/assets/img/background_img.jpg");
    border: solid 0.2rem #2d9ae8;
    box-shadow: 0 2px 7px black;
    
}
.modal_img{
    width: 100%;
}

.modal_text{
    padding: 0.5rem;
    
}
/*メッセージ１*/

.message1{
    background-color: #FFB6C1;
}

.message_text1{
    background-image: repeating-linear-gradient( #FFB6C1 0rem, #FFB6C1 1.43rem, #f790c3 1.5rem);
}

/*リボン１*/
.ribbon_color1{
    background-image: repeating-linear-gradient(90deg, #2E8B57 0px, #2E8B57 10px, #ffffff 10px, #ffffff 20px);
}    


/*ガイドポイント2*/

.subcontent_body2_1::before{
    content: "";
    background-color: #a2f49f;
    width: 80%;
    aspect-ratio: 1 / 0.7;
    position: absolute;
    top: 0;
    right: 0;
}

.subcontent_body2_2::before{
    content: "";
    background-color: #4db6f2;
    width: 80%;
    aspect-ratio: 1 / 0.7;
    position: absolute;
    bottom: 0;
    left: 0;
}

.subcontent_body2_3::before{
    content: "";
    background-color: #3e702a;
    width: 100%;
    aspect-ratio: 1 / 0.3;
    position: absolute;
    top: 15%;
    right: 0;
}

.subcontent_body2_4::before{
    content: "";
    background-color: #edc073;
    width: 100%;
    aspect-ratio: 1 / 0.5;
    position: absolute;
    top: -10px;
    right: 0;
}
/*ガイドポイント３*/

.subtitle_box3{
    position: relative;
    bottom: -0.2rem;
    width: 100%;
}

.subtitle_text3{
    font-size: 1.2rem;
}
.subcontent_body3_1::before{
    content: "";
    background-color: #77d0be;
    width: 100%;
    aspect-ratio: 1 / 0.4;
    position: absolute;
    bottom: 30%;
    right: 0;
}



/*ガイドポイント４*/
.subcontent_body4_1::before{
    content: "";
    background-color: #007ccf;
    width: 100%;
    aspect-ratio: 1 / 0.4;
    position: absolute;
    top: 20%;
    right: 0;
}

.subcontent_body4_2::before{
    content: "";
    background-color: #77d0be;
    width: 100%;
    aspect-ratio: 1 / 0.2;
    position: absolute;
    top: 10%;
    right: 0;
}

/*メッセージ２*/
.message2{
    background-color: #ADD8E6;
}

.message_text2{
    background-image: repeating-linear-gradient( #ADD8E6 0rem, #ADD8E6 1.43rem, #33b3de 1.5rem);
}

/*にのしま うわさ話２*/

#galerieOpen{
    background-color: #CCFFCC;
    box-shadow: 0 2px 7px #CCFFCC;
    left: 60%;
}

#galerieClose{
    z-index: 201;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}

#galerie_option{
    display: none;
    text-align: center;
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    background-color: rgb(51, 51, 51, 0.5);
    height: 100vh;
    width: 100%;
}

.modal_swiper{
    margin:40% auto;
    background-color: #ffffff;
    box-shadow: 0 2px 7px black;
}

#photoOpen{
    background-color: #CCFFFF;
    box-shadow: 0 2px 7px #CCFFFF;
    left: 60%;
}
#photoClose{
    z-index: 201;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}
#photo_option{
    display: none;
    text-align: center;
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    background-color: rgb(51, 51, 51, 0.5);
    height: 100vh;
    width: 100%;
}

.photo_modal{

    margin:40% auto;
    background-color: aliceblue;
    box-shadow: 0 2px 7px black;
}

/*リボン２*/
.ribbon_color2{
    background-image: repeating-linear-gradient(90deg, #00416A 0px, #00416A 10px, #ffffff 10px, #ffffff 20px);
}    

/*リボン３*/
.ribbon_color3{
    background-image: repeating-linear-gradient(90deg, #00CED1 0px, #00CED1 10px, #ffffff 10px, #ffffff 20px);
}    

/*ガイドポイント５*/
.subtitle5_1{
    font-size: 1.05rem;
}

.subcontent_body5_1::before{
    content: "";
    background-color: #82be84;
    width: 100%;
    aspect-ratio: 1 / 0.4;
    position: absolute;
    top: -10px;
    right: 0;
}

.subcontent_body5_2::before{
    content: "";
    background-color: #199ece;
    width: 100vw;
    height: 50%;
    position: absolute;
    bottom: -1rem;
    right: 0;
}

/*ガイドポイント６*/

.subtitle_box6{
    position: relative;
    bottom: -0.2rem;
    width: 100%;
}



.subcontent_body6_1::before{
    content: "";
    background-color: #d8c057;
    width: 80%;
    aspect-ratio: 1 / 0.5;
    position: absolute;
    top: -10px;
    left: 0;
}

/*メッセージ３*/
.message3{
    background-color: #FFFFE0;
}

.message_text3{
    background-image: repeating-linear-gradient( #FFFFE0 0rem, #FFFFE0 1.43rem, #ffff7f 1.5rem);
}


/*ガイドポイント７*/

/*慰霊碑と慰霊の広場*/

.subtitle_box7{
    position: relative;
    bottom: -0.2rem;
    width: 100%;
    margin: 0;
}


.subcontent7_1_prologue{    
    margin: 0;
    background-image: url("/assets/img/spot7_6.jpg");
    background-size: cover;
    background-position: center center;
    padding: 20px 0;
}

.subcontent7_1_prologue_text{
    color: #fff;
    text-align: center;
    font-size: 1.5rem;
    left: 50%;
    font-family: "Hina Mincho";
    position: relative;
    text-shadow:
    0.1rem 0.1rem 0.1rem #000, -0.1rem -0.1rem 0.1rem #000,
           -0.1rem 0.1rem 0.1rem #000,  0.1rem -0.1rem 0.1rem #000;
}

.solo_figcaption7{
    width: 100%;
}
.subcontent7_title1{
    margin-top: 25px;
    font-size: 1.6rem;
}

.subcontent7_title1_text{
    position: relative;
    margin-bottom: 0.1rem;
    padding: 0.1rem 0.5em;

    margin: 0 1em;
    
}

.subcontent7_title1_text:before {
    content: "";
    position: absolute;
    bottom: 0.5rem;
    left: 0rem;
    right: 0rem;
    height: 1px;
    width: 100%;
    box-shadow: 3px 10px 7px 1px #333333;
}

.subcontent7_title1_text_under{
    margin-left: 5em;
    padding-right: 1em;
}

.subcontent_body7_2{
    display: flex;
    margin: 20px 0;
    
}

@media screen and (min-width: 767px){
    .subcontent_body7_2{
        margin: 20px auto;
        width: 700px;
        
    }
}

.subcontent_body7_2_text{
    width: 55%;
    margin: 10px 2.5%;
}

.subcontent_body7_2_img{
    width: 35%;
    height: 100%;
    margin: 10px 2.5%;
    position: relative;
}

.circle_fit{
    width: 100%;
    aspect-ratio: 1 /1;
    border-radius: 50%;
    object-fit:cover;
    position: relative;
    z-index: 1;
}

.square_fit{
    width: 100%;
    aspect-ratio: 1 /1;
    border-radius: 3%;
    object-fit:cover;
    position: relative;
    z-index: 1;
}

.subcontent_body7_2_img::before{
    

    display: block;
    position: absolute;
    
    content: "";
}

.circle_background::before{
    width: 50%;
    aspect-ratio: 1 /1;
    border-radius: 50%;

    object-fit:cover;
}

.square_background::before{
    width: 50%;
    aspect-ratio: 1 /1;
    border-radius: 3%;

    object-fit:cover;
}

.circle1::before{
    background-color: #6E75A4;
    bottom: 0.3rem;
    left: -0.3rem;
}

.circle2::before{
    background-color: #82A282;
    bottom: 0.3rem;
    right: -0.3rem;
    
}

.square1::before{
    background-color: #8B81C3;
    right: -0.3rem;
    top: -0.3rem;
    

}

.square2::before{
    background-color: #00416A;
    left: -0.3rem;
    bottom: -0.3rem;
    
}

.square3::before{
    background-color: #FEDFE1;
    left: -0.5rem;
    bottom: -0.5rem;
}




/*碑文*/
#hibunClose{
    z-index: 201;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
}


#modal_option_hibun{
    display: none;
    text-align: center;
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    background-color: rgb(51, 51, 51, 0.5);
    height: 100vh;
    width: 100%;
}

.hibun{
    background-color: #fff;
    margin:20% auto 0;
    /*box-shadow: 0 2px 7px #fff;*/
    animation-name: popup;
    animation-duration: 0.3s;    
}

.hibun_body{
    position: relative;
    z-index: 201;
    padding: 0 1.5em;
    border-top: solid 0.133rem black;
    border-bottom: solid 0.133rem black;
    width: 80%;
    height: 60%;
    min-width: 300px;
    max-width: 26.6rem;
}

.hibun_body:before, .hibun_body:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 0.133rem;
    height: calc(100% + 1.33rem);
    background-color: black;
}

.hibun_background{
    position: fixed;
    z-index: 200;
    top: 0;
    margin: calc(20% - 1.33rem) calc(10% - 1.33rem);
    padding: 1.6rem;
    background-color: #fff;
    width: calc(80% + 2.66rem);
    height: calc(60% + 2.66rem);
    min-width: 21.33rem;
    max-width: 29.33rem;
    animation-name: popup;
    animation-duration: 0.3s;  
}
.hibun_body:before {left: 0.66rem;}
.hibun_body:after {right: 0.66rem;}
.hibun_body p {
    margin: 0.66rem; 
    padding: 0.66rem;
}

#hibunOpen{
    background-color: #FFCCCC;
    box-shadow: 0 2px 7px #FFCCE5;
    left: 60%;  
}

@media screen and (min-width: 667px){
    .hibun_background{
        margin: calc(20% - 1.33rem) calc(50% - 14.665rem);  
    }
}


/*メッセージ4*/
.message4{
    background-color: #E6E6FA;
}

.message_text4{
    background-image: repeating-linear-gradient( #E6E6FA 0rem, #E6E6FA 1.43rem, #ababf8 1.5rem);
}

/*平和資料館*/

.subcontent_title7_2{
    display: flex;
}

.subcontent_title7_2_img{
    width: 55%;
    margin: 5px 0px 5px 5px ;
    aspect-ratio: 5 / 4;
}

.subcontent_title7_2_text{
    margin: auto 5px;
    font-size: 1.15rem;
}

.subcontent_body7_3_prologue{
    display: flex;
    margin: 20px 0;
}

.subcontent_body7_3_prologue_text{
    width: 60%;
    margin: 5px;
}

.subcontent_body7_3_prologue_img{
    width: 35%;
    height: 35%;
    margin: 5px;
}

.font_size08rem{
    font-size: 0.8rem;
}

@media screen and (min-width: 667px){
    .subcontent_title7_2_text{
        margin: auto 5px;
        font-size: 2rem;
        padding-left: 2rem;
    }
    .subcontent_body7_3_prologue{
        width: 640px;
        margin: 5px auto;
    }
}


/*メッセージ5*/
.message5{
    background-color: #90EE90;
}

.message_text5{
    background-image: repeating-linear-gradient( #90EE90 0rem, #90EE90 1.43rem, #6ceb6c 1.5rem);
}


/*リボン４*/
.ribbon_color4{
    background-image: repeating-linear-gradient(90deg, #7EC8E3 0px, #7EC8E3 10px, #ffffff 10px, #ffffff 20px);
}    

.language-switch {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lang-btn {
    padding: 5px 10px;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    min-width: 105px;
    text-align: center;
    display: inline-block;
    margin-bottom: 5px;
    background-color: #fff;
    border: 3px solid #333;
    border-radius: 3px;
}

.lang-btn:last-child {
    margin-bottom: 0;
}

.lang-btn.active {
    background: #333;
    color: white;
    border-radius: 3px;
}

.lang-btn:not(.active):hover {
    background: #eee;
    border-radius: 3px;
}