@charset "utf-8";

/*-----------------------------------------------------------
--------------  02_00.htm メニューバー　-----------------------
--------------------------------------------------------------*/
.int_02_00_all {
    padding: 0 2em;
    background-color: white;
    box-sizing: border-box;
}

.int_02_00_all ul {
    list-style: none;
    margin: 0;
    padding: .5em 2em 1em;
    display: flex;
    flex-wrap: wrap;
}

.int_02_00_all ul li {
    margin: 1em 0;
    width: 50%;
    box-sizing: border-box;
    background-repeat: no-repeat;
}

.int_02_00_all ul p {
    font-size: 2vw;
    margin: 0;
    line-height: 8;
    text-indent: 1em;
    font-family: 'hiraginokakugoW7';
    background: linear-gradient(to left, rgba(255, 255, 255, .3), rgba(255, 255, 255, .5), white, white);
    vertical-align: baseline;
}

.int_02_00_all ul li:nth-of-type(1) {
    background-image: url(img/02_01_img/01_01.png);
    background-color: rgb(255, 200, 255, 1);
    background-size: 60%;
    background-position: 110% 50%;
}

.int_02_00_all ul li:nth-of-type(2) {
    background-image: url(img/02_02_img/02_history_01.jpg);
    background-color: rgb(255, 200, 255, 1);
    background-size: 100%;
    background-position: 100% 60%;
}

.int_02_00_all ul li:nth-of-type(3) {
    background-image: url(img/02_03_img/04_libraly.jpg);
    background-color: rgb(255, 200, 255, 1);
    background-size: 100%;
    background-position: 100% 50%;
}

.int_02_00_all ul li:nth-of-type(4) {
    background-image: url(img/02_04_img/006.jpg);
    background-color: rgb(255, 200, 255, 1);
    background-size: 80%;
    background-position: 150% 50%;
}



/*--------------------------------------------------------------------
-------------------　マスコット紹介　------------------------------------
---------------------------------------------------------------------*/
.charactor-all {
    width: 100%;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.head-img {
    width: 100%;
    height: 39vw;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.title-rogo {
    width: 33vw;
    height: 24vw;
    margin: 0 0 0 10%;
}

.chara-res {
    width: 50%;
    margin-left: -5%;
}

.charas-info {
    margin-top: -6.5%;
    line-height: 1.3;
    padding: .5em;
    box-sizing: border-box;
    text-shadow:
        #fff .1vw .1vw 0,
        #fff -.1vw .1vw 0,
        #fff .1vw -.1vw 0,
        #fff -.1vw -.1vw 0,
        #fff .1vw 0 0,
        #fff -.1vw 0 0,
        #fff 0 .1vw 0,
        #fff 0 -.1vw 0;
    background-color: rgba(255, 255, 255, .8);
}

.h2-info {
    font-size: 3vw;
    margin: 0;
    text-indent: 1em;
    font-family: 'hiraginokakugoW7';
}

.h3-info {
    font-size: 1.4vw;
    text-indent: 1em;
    font-weight: bold;
    margin: 0 1em 0;
}

/*-----------------下段-----------------*/

.charactor {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto 1em;
    padding-bottom: 1em;
    box-sizing: border-box;
}

.model {
    width: 46%;
    height: 25vw;
    margin: 2vw 1vw 0;
    box-shadow: 0 0 .5vw rgba(0, 0, 0, 1);
    border-radius: 1vw;
    background-color: white;
    text-shadow:
        rgba(255, 255, 255, .8) .1vw .1vw 0,
        rgba(255, 255, 255, .8) -.1vw .1vw 0,
        rgba(255, 255, 255, .8) .1vw -.1vw 0,
        rgba(255, 255, 255, .8) -.1vw -.1vw 0,
        rgba(255, 255, 255, .8) .1vw 0 0,
        rgba(255, 255, 255, .8) -.1vw 0 0,
        rgba(255, 255, 255, .8) 0 .1vw 0,
        rgba(255, 255, 255, .8) 0 -.1vw 0;
}

.model img {
    height: 80%;
}

.white-bale {
    width: 45vw;
    height: 24vw;
    display: flex;
    align-items: center;
    padding: .5vw;
    border-radius: 1vw;
    background: radial-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 1));
}

h1 {
    font-size: 3vw;
    margin: 0;
    font-family: 'hiraginokakugoW7';
}

.chara-prof {
    line-height: 1.4;
}

.chara-prof>h3 {
    margin: 0 0 0 .5em;
    text-indent: 1em;
    font-size: 1.4vw;
    font-weight: normal;
}

.chara-voice {
    margin: 0;
    font-size: 1.6vw;
    font-weight: bold;
}

.model-01 {
    background-image: url(img/02_01_img/01_01.png);
    background-repeat: no-repeat;
    background-size: 50vw;
    background-position: 10vw -8vw;
}

.model-02 {
    background-image: url(img/02_01_img/02_01.png);
    background-repeat: no-repeat;
    background-size: 35vw;
    background-position: 17vw 1vw;
}

.model-03 {
    background-image: url(img/02_01_img/03_01.png);
    background-repeat: no-repeat;
    background-size: 30vw;
    background-position: 19vw -3vw;
}

.model-04 {
    background-image: url(img/02_01_img/04_01.png);
    background-repeat: no-repeat;
    background-size: 25vw;
    background-position: 22vw -2vw;
}

.model-05 {
    background-image: url(img/02_01_img/05_01.png);
    background-repeat: no-repeat;
    background-size: 40vw;
    background-position: 10vw -1vw;
}

/*----------------------------------------------------------------
--------------------　史料館　--------------------------------------
-----------------------------------------------------------------*/
.main-photo {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    padding: .5em 0;
    margin: 0 auto;
    background: white;
}

.main-photo01,
.main-photo02 {
    width: 50%;
    padding: 1%;
    box-sizing: border-box;
}

.main-top-photo {
    width: 100%;
    border-radius: .5em;
}

.main-top-topic>h1 {
    font-size: 2.2vw;
    margin: 0;
    font-family: 'hiraginokakugoW7';
}

.main-top-topic>h2 {
    font-size: 1.3vw;
    margin: 0;
    line-height: 1.6;
    text-indent: 1em;
    font-weight: normal;
}

.main-top-topic {
    margin: 0 1em;
}

.main-sub-photo-f {
    width: 100%;
}

.main-sub-photo {
    width: 33%;
    margin: 1%;
    border-radius: .5em;
}

/*---------------　 下段写真（上）　--------------*/
.photo-01,
.second-photo {
    display: flex;
    justify-content: center;
    padding: .5em 0;
    margin: auto;
}

.second-photo {
    background-color: white;
}

.photo-01 {
    width: 32%;
    margin: 0 .5% .5%;
    align-items: center;
    border-radius: .5em;
    box-shadow: 0 0 .2em rgba(0, 0, 0, .7);
    background: linear-gradient(to left, rgba(240, 240, 230, .5), rgba(220, 240, 210, 1));
}

.photo-01>div {
    width: 50%;
    padding: 2%;
    box-sizing: border-box;
}

.second-photo img {
    margin: 0;
    width: 100%;
    padding: .2em;
    box-sizing: border-box;
    border-radius: .5em;
    box-shadow: 0 0 .3em rgba(0, 0, 0, .5);
    background-color: white;
}

/*------------　下段文字　----------*/
.pocket>h3 {
    margin: 0;
    font-size: 1.6vw;
    font-family: 'hiraginokakugoW7';
}

h4 {
    font-size: 1.2vw;
    margin: .5em 0 0;
    text-indent: 1em;
    line-height: 1.5;
    font-weight: normal;
}

/*-------　資料館見学を希望される方へ　--------*/
.last-contetnts {
    width: 100%;
    margin: 0 auto;
    padding: 1em;
    box-sizing: border-box;
    background-color: white;
    color: black;
}

.last-contetnts p:nth-of-type(1) {
    margin: 0;
    padding: .3em 0;
    font-size: 2.2vw;
    font-family: 'hiraginokakugoW7';
}

.last-contetnts p {
    margin: 0;
    font-size: 1.4vw;
    line-height: 1.5;
    text-indent: 1em;
}

.last-contetnts p:nth-of-type(3),
.last-contetnts p:nth-of-type(4),
.last-contetnts p:nth-of-type(5),
.last-contetnts p:nth-of-type(6) {
    font-size: 1.5vw;
    color: red;
    font-weight: bold;
}

.last-contetnts p:nth-last-of-type(1) {
    font-size: 1.9vw;
    font-weight: bold;
    text-align: right;
}

.last-tell a {
    color: black;
}

/*----------------------------------------------------------------
--------------------　駐屯地の沿革　---------------------------------
------------------------------------------------------------------*/
.history-photo {
    display: flex;
    margin: 0 auto;
    background-color: white;
}

.main-photo-box,
.history {
    width: 50%;
    padding: 2%;
    box-sizing: border-box;
}

.history-photo ul {
    list-style: none;
}

.main-photo-box {
    border-radius: 1em;
    margin: 1%;
    box-shadow: 0 0 .3em rgba(0, 0, 0, .3);
    background-image: url(img/02_03_img/04_libraly.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 150%;
}


.history li h1 {
    margin: 0;
    text-indent: .5em;
    font-size: 2.2vw;
}

.history li p {
    margin: .7em;
    font-size: 1.3vw;
}

.sta-index {
    background-color: white;
    width: 100%;
    padding: 0 3% 1em;
    margin: 0 auto;
    box-sizing: border-box;
}

.sta-index dt {
    font-size: 1.8vw;
    font-weight: bold;
    line-height: 1.8;
}

.sta-index dd {
    margin: 0;
    text-indent: 1em;
    font-size: 1.4vw;
    line-height: 1.6;
}


/*--------------------------------------------------------------
--------------------　見どころ　----------------------------------
----------------------------------------------------------------*/

.map-all {
    width: 100vw;
    background-image: url(img/02_04_img/map.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: white;
}

.map-01,
.map-02,
.map-03,
.map-04,
.map-05,
.map-06,
.map-07,
.map-08 {
    position: absolute;
    padding: 0;
    background-size: cover;
}

.map-01 img,
.map-02 img,
.map-03 img,
.map-04 img,
.map-05 img,
.map-06 img,
.map-07 img,
.map-08 img {
    position: absolute;
    padding: 0;
}

/*-------------- ナツメの木 ----------------*/
.map-01 img {
    width: 8vw;
    height: 8vw;
}

.map-01 {
    width: 8vw;
    height: 8vw;
    margin: 14.9vw 0 0 43vw;
    background-image: url(img/02_04_img/01s.png);
}

/*----------------　史料館　-----------------*/
.map-02 img {
    width: 12vw;
    height: 8vw;
}

.map-02 {
    width: 12vw;
    height: 8vw;
    margin: 31vw 0 0 6.5vw;
    background-image: url(img/02_04_img/02s.png);
}

/*----------------　留魂碑　-----------------*/
.map-03 img {
    width: 12vw;
    height: 8vw;
}

.map-03 {
    width: 12vw;
    height: 8vw;
    margin: 24.3vw 0 0 18vw;
    background-image: url(img/02_04_img/03s.png);
}

/*----------------　売　店　-----------------*/
.map-04 img {
    width: 9vw;
    height: 6vw;
}

.map-04 {
    width: 9vw;
    height: 6vw;
    margin: 9vw 0 0 42vw;
    background-image: url(img/02_04_img/04s.png);
}

/*----------------　戦　車　-----------------*/
.map-05 img {
    width: 10.5vw;
    height: 7vw;
}

.map-05 {
    width: 10.5vw;
    height: 7vw;
    margin: 6.6vw 0 0 33vw;
    background-image: url(img/02_04_img/05s.png);
}

/*----------------　20聯隊碑　-----------------*/
.map-06 img {
    width: 10.5vw;
    height: 7vw;
}

.map-06 {
    width: 10.5vw;
    height: 7vw;
    margin: 12vw 0 0 50vw;
    background-image: url(img/02_04_img/06s.png);
}

/*----------------　鎮国之碑　-----------------*/
.map-07 img {
    width: 12vw;
    height: 8vw;
}

.map-07 {
    width: 12vw;
    height: 8vw;
    margin: 31.5vw 0 0 28vw;
    background-image: url(img/02_04_img/07s.png);
}

/*---------------　ヘ　リ　-----------------*/
.map-08 img {
    width: 10.8vw;
    height: 8vw;
}

.map-08 {
    width: 10.8vw;
    height: 8vw;
    margin: 33.7vw 0 0 18vw;
    background-image: url(img/02_04_img/08s.png);
}

/*---------- インラインフレーム ----------*/
div iframe {
    width: 29vw;
    height: 50vw;
    border: 0;
    margin: 9vw 0 0 63vw;
}

/*---------- 　アイコン用ホバーアクション　 -----------*/
/*マウスホバーアクション*/
map-all a {
    text-decoration: none;
}

.map-all a:hover img {
    opacity: .7;
    -webkit-opacity: .7;
    -moz-opacity: .7;
    -o-opacity: .7;
    filter: alpha(opacity=.7);
    /*IE it 8*/
    -ms-filter: "alpha(opacity=.7)";
    /*IE it 8*/
}

.map-all a img {
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}

/*--------------------------------------------------------------------------------
　最大サイズ到達時に適用
----------------------------------------------------------------------------------*/

@media screen and (min-device-width: 1040px) {


    /*-----------------------------------------------------------
--------------  02_00.htm メニューバー　-----------------------
--------------------------------------------------------------*/
    .int_02_00_all {
        width: 1000px;
    }

    .int_02_00_all ul p {
        font-size: 20px;
    }

    /*--------------------------------------------------------------------
-------------------　マスコット紹介　------------------------------------
---------------------------------------------------------------------*/
    .charactor-all {
        width: 1000px;
        background-color: white;
    }

    .head-img {
        width: 1000px;
        height: 390px;
    }

    .title-rogo {
        width: 330px;
        height: 240px;
    }

    .h2-info {
        font-size: 30px;
    }

    .h3-info {
        font-size: 14px;
    }


    .model {
        height: 250px;
        margin: 20px 10px 0;
        box-shadow: 0 0 5px rgba(0, 0, 0, 1);
        border-radius: 10px;
    }

    .white-bale {
        width: 450px;
        height: 240px;
        padding: 5px;
        border-radius: 10px;
    }

    h1 {
        font-size: 30px;
    }

    .chara-prof>h3 {
        font-size: 14px;
    }

    .chara-voice {
        font-size: 16px;
    }

    .model-01 {
        background-size: 500px;
        background-position: 100px -80px;
    }

    .model-02 {
        background-size: 350px;
        background-position: 170px 10px;
    }

    .model-03 {
        background-size: 300px;
        background-position: 190px -30px;
    }

    .model-04 {
        background-size: 250px;
        background-position: 220px -20px;
    }

    .model-05 {
        background-size: 400px;
        background-position: 100px -10px;
    }





    /*----------------------------------------------------------------
--------------------　史料館　--------------------------------------
-----------------------------------------------------------------*/
    .main-photo,
    .second-photo,
    .last-contetnts {
        width: 1000px;
    }

    .last-contetnts p:nth-of-type(1),
    .main-top-topic>h1 {
        font-size: 22px;
    }

    .last-contetnts p:nth-last-of-type(1) {
        font-size: 19px;
    }

    .pocket>h3 {
        font-size: 16px;
    }

    .last-contetnts p:nth-of-type(3),
    .last-contetnts p:nth-of-type(4),
    .last-contetnts p:nth-of-type(5),
    .last-contetnts p:nth-of-type(6) {
        font-size: 15px;
    }

    .last-contetnts p {
        font-size: 14px;
    }

    .main-top-topic>h2 {
        font-size: 13px;
    }

    h4 {
        font-size: 12px;
    }

    /*----------------------------------------------------------------
--------------------　駐屯地の沿革　---------------------------------
------------------------------------------------------------------*/
    .history-photo,
    .sta-index {
        width: 1000px;
    }


    .history li h1 {
        font-size: 22px;
    }

    .sta-index dt {
        font-size: 18px;
    }

    .sta-index dd {
        font-size: 14px;
    }

    .history li p {
        font-size: 13px;
    }



    .map-all {
        width: 1000px;
        margin: auto;
    }

    /*-------------- ナツメの木 ----------------*/
    .map-01 img {
        width: 80px;
        height: 80px;
    }

    .map-01 {
        width: 80px;
        height: 80px;
        margin: 149px 0 0 430px;
    }

    /*----------------　史料館　-----------------*/
    .map-02 img {
        width: 120px;
        height: 80px;
    }

    .map-02 {
        width: 120px;
        height: 80px;
        margin: 310px 0 0 65px;
    }

    /*----------------　留魂碑　-----------------*/
    .map-03 img {
        width: 120px;
        height: 80px;
    }

    .map-03 {
        width: 120px;
        height: 80px;
        margin: 243px 0 0 180px;
    }

    /*----------------　売　店　-----------------*/
    .map-04 img {
        width: 90px;
        height: 60px;
    }

    .map-04 {
        width: 90px;
        height: 60px;
        margin: 90px 0 0 420px;
    }

    /*----------------　戦　車　-----------------*/
    .map-05 img {
        width: 105px;
        height: 70px;
    }

    .map-05 {
        width: 105px;
        height: 70px;
        margin: 66px 0 0 330px;
    }

    /*----------------　20聯隊碑　-----------------*/
    .map-06 img {
        width: 105px;
        height: 70px;
    }

    .map-06 {
        width: 105px;
        height: 70px;
        margin: 120px 0 0 500px;
    }

    /*----------------　鎮国之碑　-----------------*/
    .map-07 img {
        width: 120px;
        height: 80px;
    }

    .map-07 {
        width: 120px;
        height: 80px;
        margin: 315px 0 0 280px;
    }

    /*---------------　ヘ　リ　-----------------*/
    .map-08 img {
        width: 108px;
        height: 80px;
    }

    .map-08 {
        width: 108px;
        height: 80px;
        margin: 337px 0 0 180px;
    }

    /*---------- インラインフレーム ----------*/
    div iframe {
        width: 290px;
        height: 500px;
        margin: 90px 0 0 630px;
    }

}

/*--------------------------------------------------------------------------------
　最大サイズ到達時に適用
----------------------------------------------------------------------------------*/

@media screen and (min-device-width: 1921px) {


    /*-----------------------------------------------------------
--------------  02_00.htm メニューバー　-----------------------
--------------------------------------------------------------*/
    .int_02_00_all {
        width: 1280px;
    }

    .int_02_00_all ul p {
        font-size: 25.6px;
    }

    /*--------------------------------------------------------------------
-------------------　マスコット紹介　------------------------------------
---------------------------------------------------------------------*/
    .charactor-all {
        width: 1280px;
        background-color: white;
    }

    .head-img {
        width: 1280px;
        height: 499.2px;
    }

    .title-rogo {
        width: 422.4px;
        height: 307.2px;
    }

    .h2-info {
        font-size: 38.4px;
    }

    .h3-info {
        font-size: 17.92px;
    }


    .model {
        height: 320px;
        margin: 25.6px 12.8px 0;
        box-shadow: 0 0 6.4px rgba(0, 0, 0, 1);
        border-radius: 12.8px;
    }

    .white-bale {
        width: 576px;
        height: 307.2px;
        padding: 6.4px;
        border-radius: 12.8px;
    }

    h1 {
        font-size: 38.4px;
    }

    .chara-prof>h3 {
        font-size: 17.92px;
    }

    .chara-voice {
        font-size: 20.48px;
    }

    .model-01 {
        background-size: 640px;
        background-position: 128px -102.4px;
    }

    .model-02 {
        background-size: 448px;
        background-position: 217.6px 12.8px;
    }

    .model-03 {
        background-size: 384px;
        background-position: 243.2px -38.4px;
    }

    .model-04 {
        background-size: 320px;
        background-position: 281.6px -25.6px;
    }

    .model-05 {
        background-size: 512px;
        background-position: 128px -12.8px;
    }





    /*----------------------------------------------------------------
--------------------　史料館　--------------------------------------
-----------------------------------------------------------------*/
    .main-photo,
    .second-photo,
    .last-contetnts {
        width: 1280px;
    }

    .last-contetnts p:nth-of-type(1),
    .main-top-topic>h1 {
        font-size: 28.16px;
    }

    .last-contetnts p:nth-last-of-type(1) {
        font-size: 24.32px;
    }

    .pocket>h3 {
        font-size: 20.48px;
    }

    .last-contetnts p:nth-of-type(3),
    .last-contetnts p:nth-of-type(4),
    .last-contetnts p:nth-of-type(5),
    .last-contetnts p:nth-of-type(6) {
        font-size: 19.2px;
    }

    .last-contetnts p {
        font-size: 17.92px;
    }

    .main-top-topic>h2 {
        font-size: 16.64px;
    }

    h4 {
        font-size: 15.36px;
    }

    /*----------------------------------------------------------------
--------------------　駐屯地の沿革　---------------------------------
------------------------------------------------------------------*/
    .history-photo,
    .sta-index {
        width: 1280px;
    }


    .history li h1 {
        font-size: 28.16px;
    }

    .sta-index dt {
        font-size: 23.04px;
    }

    .sta-index dd {
        font-size: 17.92px;
    }

    .history li p {
        font-size: 16.64px;
    }



    .map-all {
        width: 1280px;
        margin: auto;
    }

    /*-------------- ナツメの木 ----------------*/
    .map-01 img {
        width: 102.4px;
        height: 102.4px;
    }

    .map-01 {
        width: 102.4px;
        height: 102.4px;
        margin: 190.72px 0 0 550.4px;
    }

    /*----------------　史料館　-----------------*/
    .map-02 img {
        width: 153.6px;
        height: 102.4px;
    }

    .map-02 {
        width: 153.6px;
        height: 102.4px;
        margin: 396.8px 0 0 83.2px;
    }

    /*----------------　留魂碑　-----------------*/
    .map-03 img {
        width: 153.6px;
        height: 102.4px;
    }

    .map-03 {
        width: 153.6px;
        height: 102.4px;
        margin: 311.04px 0 0 230.4px;
    }

    /*----------------　売　店　-----------------*/
    .map-04 img {
        width: 115.2px;
        height: 76.8px;
    }

    .map-04 {
        width: 115.2px;
        height: 76.8px;
        margin: 115.2px 0 0 537.6px;
    }

    /*----------------　戦　車　-----------------*/
    .map-05 img {
        width: 134.4px;
        height: 89.6px;
    }

    .map-05 {
        width: 134.4px;
        height: 89.6px;
        margin: 84.48px 0 0 422.4px;
    }

    /*----------------　20聯隊碑　-----------------*/
    .map-06 img {
        width: 134.4px;
        height: 89.6px;
    }

    .map-06 {
        width: 134.4px;
        height: 89.6px;
        margin: 153.6px 0 0 640px;
    }

    /*----------------　鎮国之碑　-----------------*/
    .map-07 img {
        width: 153.6px;
        height: 102.4px;
    }

    .map-07 {
        width: 153.6px;
        height: 102.4px;
        margin: 403.2px 0 0 358.4px;
    }

    /*---------------　ヘ　リ　-----------------*/
    .map-08 img {
        width: 138.24px;
        height: 102.4px;
    }

    .map-08 {
        width: 138.24px;
        height: 102.4px;
        margin: 431.36px 0 0 230.4px;
    }

    /*---------- インラインフレーム ----------*/
    div iframe {
        width: 371.2px;
        height: 640px;
        margin: 115.2px 0 0 806.4px;
    }

}