@charset "UTF-8";

html {
    font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
    background: none ;
}
  
html,body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

  
@media (max-width:1000px)
{
    /** BG **/
    body {
        background-image: url(../img/page_bg.png);
        background-repeat: repeat ;
        background-attachment: fixed ;
        position: relative;
        z-index: 1;
    }

    #cont_bg {
        position: relative;
        z-index: 0;
    }
    #cont_bg:before{
        position:fixed;
        top:0;
        left:0;
        width:100vw;
        height:100vh;
        content:'';
        background-image: url(../img/header_top_bg.png);
        background-repeat: no-repeat;
        background-size:40vw;
        background-position:top right;
        z-index:-1;
    }

    /* ヘッダー */
    header{
        width: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }

    #header_bk{
        width:100%;
        height:0;
        position: absolute;
        top:0;
        z-index: -1;
    }

    #header_div{
        padding: 0 0 20px 0;
        width: 100%;
        margin:0 auto;
        /* background-color: rgba(255,255,255,0.6); */
    }

    #header_logo {
        width: 100%;
        height:100%;
        margin: 0 auto;
        display: table;
        box-sizing: border-box;
        background-image: url(../img/logo.png);
        background-repeat: no-repeat;
        background-position: top left;
        background-size: contain;
        color:#000000;
        text-decoration:none;
    }

    #header_logo:before{
        content:'';
        display:block;
        padding-top:44%;
    }

    #header_text{
        box-sizing: border-box;
        font-size:16px;
        text-indent:2em;
    }

    main{
        width:90%;
        min-width:300px;
        box-sizing: border-box;
        margin:20px auto;
    }

    article{
        width:100%;
        box-sizing: border-box ;
        margin: 0 auto;
        font-size:0;
    }

    article.ishibumi h1{
        font-size: calc(24px + 0.25vw) ;
        padding-top:20px;
        padding-bottom: 5px;
        margin-top:0;
        margin-bottom: 5px;
        border-bottom: 2px solid #656565 ;
        font-family: Arial, Helvetica,serif, sans-serif;
    }

    article.ishibumi h1 span.h1span{
        display:none;
    }

    article.ishibumi div.spaddress{
        font-size:calc(16px + 0.25vw);
        margin-bottom: 10px;
    }

    article.ishibumi div.images{
        margin:10px auto;
        box-sizing: border-box;
    }

    article.ishibumi div.images div.monument{
        width:100%;
        box-sizing: border-box;
    }

    article.ishibumi div.images div.monument img{
        width:100%;
    }

    article.ishibumi div.imgtitle {
        font-size:16px;
        text-align:center;
    }

    article.maintext{
        margin:30px auto;
        box-sizing:border-box;
        display:flex;
        width:100%;
        flex-flow:row wrap;
    }

    article.maintext div.text{
        font-size:16px;
        line-height:28px;
        box-sizing: border-box;
        order:2;
        margin:30px auto;
    }

    article.maintext div.map{
        width:100%;
        order:1;
    }

    article.maintext div.map img{
        width:100%;
    }

    article.mapframe{
        margin:30px auto;
        box-sizing: border-box ;
        vertical-align: top; 
    }
    article.mapframe h2{
        font-size:calc(16px + 0.25vw);
    }
    article.mapframe div.mapdiv{
        box-sizing: border-box;
        width:100%;
        background-color:#FFFFFF;
    }
    article.mapframe div.mapdiv img{
        width:100%;
    }

    div.pagers{
        width:300px;
        margin:5px auto;
        text-align: center;
        font-size:0;
    }
    div.pagers div.pager{
        font-size:14px;
        width:100px;
        display:inline-block;
    }
    div.pagers a{
        color:#000000;
        text-decoration: none;
    }
    div.pagers a:hover{
        text-decoration: underline;
    }
    article.maparticle{
        margin:30px auto;
        padding:5px 0;
        font-size:calc(14px + 0.25vw);
        background-color:rgba(255,255,255,0.6);
        min-width:150px;
        line-height: 28px;
    }
    
    article.maparticle h3{
        border-bottom: 2px solid #656565 ;
        font-size: 16px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        display:block;
        width:100%;
        position: absolute;
        top:0;
        height: 20px;
        text-align: left;
    }
    article.maparticle div.mapmovie{
        position: relative;
        box-sizing: border-box;
        width: 100%;
        padding-top:calc(100% * 9/16 + 58px);
    }
    iframe.iframemapmovie{
        position:absolute;
        top:58px;
        right:0;
        width:100%;
        height:calc(100% - 58px);
    }

    article.maparticle div.mymap{
        position: relative;
        box-sizing: border-box;
        width: 100%;
        padding-top:calc(100% + 58px);
    }

    iframe.iframemap{
        position:absolute;
        top:58px;
        right:0;
        width:100%;
        height:calc(100% - 58px);
    }
}

@media (min-width:1001px)
{
    /** BG **/
    body {
        background-image: url(../img/page_bg.png);
        background-repeat: repeat ;
        background-attachment: fixed ;
        position: relative;
        z-index: 1;
    }
    #cont_bg {
        background-image: url(../img/header_top_bg.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: calc(50% + 300px) center;
        position: relative;
        z-index: 0;
        height: 100%;
    }

    /* ヘッダー */
    header{
        width: 100%;
        height:540px;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }

    #header_bk{
        /* background-color: rgba(255,255,255,0.6); */
        width:100%;
        height:500px;
        position: absolute;
        top:0;
        z-index: -1;
    }

    #header_div{
        padding: 80px 0 20px 0;
        width: 1000px;
        margin:0 auto;
        height:440px;
    }

    #header_logo {
        width: 1000px;
        height:440px;
        margin: 0 auto;
        display: table;
        box-sizing: border-box;
        background-image: url(../img/logo.png);
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 800px 352px;
        color:#000000;
        text-decoration:none;
    }

    #header_text{
        margin:280px 0 0 30px;
        box-sizing: border-box;
        font-size:24px;
    }

    main {
        box-sizing: border-box;
        margin: 0 auto;
        padding: 80px 0;
        width: 1000px;
        position: relative;
        z-index: 2;
    }

    article {
        box-sizing: border-box ;
        width: 1000px;
        margin: 0 auto;
    }

    article.ishibumi{
        background-color: rgba(252,252,252,0.9);
        padding:10px 20px;
    }

    article.ishibumi h1{
        border-bottom: 2px solid #656565 ;
        font-size: 34px ;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-family: Arial, Helvetica,serif, sans-serif;
        line-height:34px;
    }
    article.ishibumi h1 span.h1span{
        font-size:18px;
    }
    article.ishibumi div.address{
        font-size:24px;
    }

    article.ishibumi div.images{
        max-width:950px;
        margin:10px auto;
        font-size:0;
        box-sizing: border-box ;
    }
    article.ishibumi div.images div.monument{
        text-align: center;
        min-width:634px;
        max-width:950px;
        box-sizing: border-box ;
        vertical-align: top;
        margin:0 auto;
    }
    article.ishibumi div.images div.monument img{

    }
    article.ishibumi div.imgtitle {
        text-align:center;
    }

    article.maintext {
        margin:30px auto;
        font-size:0;
        box-sizing: border-box ;
        vertical-align: top;
    }
    article.maintext div.text{
        display:inline-block;
        padding:0 10px 0 20px;
        font-size:16px;
        line-height:28px;
        width:calc(100% - 382px);
        box-sizing: border-box ;
        vertical-align: top;
    }
    article.maintext div.map{
        display:inline-block;
        width:382px;
        box-sizing: border-box ;
        vertical-align: top;
    }
    article.maintext div.map img{
        width:382px;
    }

    article.mapframe{
        width:805px;
        margin:30px auto;
        padding:30px;
        font-size:0;
        box-sizing: border-box ;
        vertical-align: top; 
    }
    article.mapframe h2{
        font-size:24px;
    }
    article.mapframe div.mapdiv{
        box-sizing: border-box;
        background-color:#FFFFFF;
    }
    article.mapframe div.mapdiv img{
        width:745px;
    }
    div.pagers{
        width:360px;
        margin:50px auto;
        text-align: center;
        font-size:0;
    }
    div.pagers div.pager{
        font-size:16px;
        width:120px;
        display:inline-block;
    }
    div.pagers a{
        color:#000000;
        text-decoration: none;
    }
    div.pagers a:hover{
        text-decoration: underline;
    }

    article.maparticle{
        margin-top:30px;
        padding:80px;
        font-size:16px;
        line-height: 28px;
        background-color:rgba(255,255,255,0.6);
    }
    
    article.maparticle h3{
        text-align: left;
        font-size:24px;
        border-bottom:2px solid #656565;
        margin-bottom:20px;
    }
    article.maparticle div.mapmovie{
        width: 100%;
        text-align: center;
        margin:0;
    }
    iframe.iframemapmovie{
        width:800px;
        height:450px;
        margin:0 auto;
    }
    article.maparticle div.mymap{
        width: 100%;
        text-align: center;
        margin:0;
    }
    iframe.iframemap{
        width:800px;
        height:450px;
        margin:0 auto 20px auto;
    }
}