title.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

body {
    font: 75%/1.5em "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Lucinda Grande", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background: url(../images/contentBG.jpg) 50% 50% repeat;
    background-size: cover;
    min-height: 880px;
    position: relative !important;
}

html >

/**/
body {
    font-size: 10px;
}

a:focus {
    outline: none;
}

#main {
    display: block;
    width: 100%;
    max-width: 900px;
    height: 100%;
    max-height: 840px;
    margin: 0px auto 50pt auto;
    padding-top: 20pt;
    box-sizing: border-box;
    position: relative;
    top: 0px;
}

#main .birthdayBox {
    display: block;
    width: 560px;
    height: 0;
    margin: 0px auto;
    margin-top: 0;
    padding-top: 240pt;
    background: url(../images/title.png) 50% 50% no-repeat;
    background-position-y: 0;
    background-size: contain;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

#main .decoration {
    display: none;
    width: 640pt;
    height: 480pt;
    background: url(../images/2022/ribon_square.png) 0 0 no-repeat;
    margin: 0 auto;
    margin-top: -110pt;
    background-size: contain;
    position: relative;
}

#main.listView .birthdayBox {}

#map_canvas,
#list_canvas {
    display: block;
    width: 540px;
    height: 320px !important;
    z-index: 10;
    position: inherit !important;
    background-color: white;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0;
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    opacity: 1;
    border: 10px solid white;
}
#list_canvas {
    height: auto !important;
    margin-bottom: 80pt;
}

#main .GMapNoSupport {
    z-index: 2;
    display: block;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: -660px;
    width: 600px;
    font-size: 120%;
    color: black;
    text-align: center;
    padding-top: 180px;
    height: 220px;
    background-image: url(../images/2009/noMapSupport.jpg);
    font-weight: bold;
    line-height: 1.6em;
}

#list_canvas .items-frame {
    display: flex;
    flex-wrap: wrap;
}

center.tbox0.title {
    text-align: left;
}

center.tbox0.title h2 {
    font-size: 13pt;
    line-height: 18pt;
}

#main p.desc {
    display: block;
    font-weight: bold;
    font-size: 120%;
    text-align: center;
    margin: 10px 0;
}

#main .contribute {
    height: auto;
    width: 100%;
    display: block;
    position: inherit;
    margin-top: 30px;
    text-align: center;
}

#main p.photo {
    display: none;
}

#main .button {
    display: block;
    width: 200px;
    height: 100px;
    padding: 0;
    margin: 0 auto;
    background: url(../images/button.png) no-repeat;
    background-size: contain;
    z-index: 20;
    position: relative;
    behavior: expression(IEPNGFIX.fix(this));
}

.tbox0 {
    color: #888811;
    margin: 0px 0px 0px 0px;
    padding: 10px 14px 10px 14px;
    text-align: center;
    width: 112px;
    height: 140px;
}

.pageNavi {
    margin: 0 auto;
    display: block;
    width: 100%;
    height: 70px;
    position: relative;
    z-index: 20;
    background-color: white;
}

.pageNavi .arrow {
    position: absolute;
}

.pageNavi .arrow.left {
    left: 30%;
}

.pageNavi .arrow.right {
    right: 30%;
}

.pageNavi .total {
    position: absolute;
    top: 5px;
    width: 100%;
    text-align: center;
    font-size: 0.8rem;
    display: block;
    z-index: -1;
}

.tbox1 {
    margin: 0 auto 0 auto;
    clear: initial;
    overflow-x: auto;
    overflow-y: hidden;
    display: block;
    width: 100%;
    height: 40px;
    position: absolute;
    top: 30px;
    -webkit-overflow-scrolling: touch;
    border-top: solid 1px silver;
    border-bottom: solid 1px silver;
    background-color: rgba(128, 128, 128, 0.11);
}

.pagenation {
    position: relative;
    bottom: initial;
    display: block;
    box-sizing: content-box;
    margin-left: 10px;
    position: relative;
    bottom: 0px !important;
    height: 30px;
    padding-top: 5px;
}

.pagenation .pageNo {
    display: inline-block;
    padding: 3px;
    float: left;
    width: 24px;
    box-sizing: border-box;
    margin-top: 0px;
    padding-top: 7px;
}

.pagenation .pageNo.current {
    background-color: silver;
    color: white;
    padding: 3px;
    padding-top: 7px;
    float: left;
    width: 24px;
    box-sizing: border-box;
    height: 30px;
}

a#modalPopup.link {
    display: block;
    height: 100%;
    position: relative;
    text-indent: -9999px;
}


#main form {
    text-align: center;
    display: block;
    margin-top: 0px;
    padding: 1px 40px;
    background-color: #ffffffb0;
    border-radius: 6pt;
}

#footer {
    display: block;
    margin-bottom: 20px;
    margin-top: 10px;
    text-align: center;
    color: #cd3000;
}

#footer .mwsLogo {
    display: block;
    width: 140pt;
    height: 80pt;
    margin: 0 auto;
}

#footer .mwsLogo a {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 50%;
    background: url(../images/01-30-mws.png) 0 0 no-repeat;
    background-size: contain;
    overflow: hidden;
}

#footer .mws a,
.backToMap {
    font-weight: bold;
    color: rgb(255, 84, 84);
    text-decoration: none;
    font-size: 140%;
    line-height: 2em;
    display: block;
}

#footer .mws a:hover {
    text-decoration: underline;
}

#footer p.copyright {
    text-align: right;

    font-size: 100%;
}

a#modalPopup {
    padding: 0;
    margin: 0;
}

#modalForm .form {
    border-right: 1px solid #d6d7da;
    padding-right: 20px;
    height: 350px !important;
}

#modal_overlay {
    background-color: #000;
}

#qtplayerDisc1,
#qtplayerDisc2,
#qtplayerDVD {
    width: 620px;
    background-color: #090909;
    filter: alpha(opacity=90);
    /* IE */
    opacity: 0.9;
    text-align: center;
}

#modalForm .mobile {
    display: block;
    position: relative;
    width: 140px;
    margin-left: 477px;
    margin-top: -306px;
}

#modalForm .mobile .header {
    font-weight: bold;
    font-size: 120%;
    display: block;
}

#modalForm .mobile .qrCode {
    display: block;
    border: 1px solid gray;
    margin: 10px 0;
    padding: 0;
}

#modalForm .mobile .desc {
    display: block;
    width: 130px;
    line-height: 1.6em;
}

#modalForm .guide {
    display: block;
    width: 620px;
    list-style-type: none;
    padding-left: 0;
    border-top: 1px solid #c7c8cc;
    padding-top: 10px;
    margin-top: 35px;
}

#modalForm .guide .step {
    display: block;
    float: left;
    width: 153px;
    margin-right: 13px;
    font-size: 100%;
    color: #4c4c4c;
    line-height: 1.6em;
    background-repeat: no-repeat;
}

#modalForm .guide .arrow {
    display: block;
    float: left;
    width: 45px;
    height: 35px;
    margin-top: 30px;
    margin-right: 22px;
    text-indent: -9999px;
    background: url(../images/guideArrow.gif) no-repeat;
}

#modalForm .guide .end {
    margin: 0;
}

*:first-child + html #modalForm p.closeBox a {
    margin-top: -10px;
}

*:first-child + html #modalForm .mobile .header {
    font-weight: bold;
    font-size: 100%;
    display: block;
}

*:first-child + html #modalForm .guide {
    margin: 53px 0 0;
}

*:first-child + html #modalForm .guide .step {
    font-size: 100%;
}

*:first-child + html #modalForm p.closeBox a {
    margin-top: -10px;
}

*:first-child + html #main form {
    margin-top: 10px;
}


* html #modalForm .mobile .header {
    font-weight: bold;
    font-size: 100%;
    display: block;
}

* html #modalForm .guide {
    margin: 53px 0 0;
}

* html #modalForm p.closeBox a {
    margin-top: -10px;
}

#modalForm .content {
    display: block;
    width: 620px;
    height: 470px;
    margin-top: 80px;
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
    border: solid 1px silver;
    background-color: white;
    border-radius: 10px;
    position: relative;
}

#modalThanks.motoLink {
    position: absolute;
    top: 20px;
    right: 40px;
    display: none;
    background-image: url(../images/2022/baroon_fromMoto.png);
    height: 115px;
    font-size: 1em;
    color: rgb(152, 0, 0);
    text-decoration: none;
    width: 170px;
    padding-top: 40px;
    padding-left: 5px;
    text-align: center;
    font-weight: bold;
    line-height: 1.6em;
    z-index: 20;
}

#modalForm p.messge span i {
    text-align: right;
    display: block;
    font-weight: normal;
    font-style: normal;
    margin-top: 10px;
}

#modalThanks.motoLink:hover {
    text-decoration: underline;
}

#modalForm .title {
    display: block;
    padding: 0;
    margin: -20px 0 0;
    font-size: 1.3em;
    font-weight: bold;
    color: #ff3a00;
    width: 300px;
}

#modalForm .messge {
    position: relative;
    background: url(../images/2012/Birthday-Map.jpg) no-repeat;
    height: 400px;
    width: 600px;
}

#modalForm .messge span {
    position: relative;
    display: block;
    width: 390px;
    height: 240px;
    overflow: scroll;
    top: 27px;
    left: 140px;
    padding-right: 20px;
    line-height: 1.6em;
    font-size: 1.1em;
    overflow-x: hidden
}

#modalForm,
#modalMotoThanks {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10;
    -webkit-overflow-scrolling: touch;
}

#modalMotoThanks {
    z-index: 100;
}

#modalMotoThanks .content {
    width: 300pt;
    height: auto;
    padding: 18pt;
    background-color: white;
    margin: 0 auto;
    box-shadow: 0px 3px 10px white;
    position: absolute;
    left: calc(50% - 150pt);
    top: 220pt;
}

#modalMotoThanks .title {
    display: none;
}

#modalMotoThanks .message {
    font-size: 1.3em;
    line-height: 2em;
}

#modalForm .closeBox,
#modalMotoThanks .closeBox {
    width: 50px;
    mobil height: 50px;
    display: block;
    position: absolute;
    top: -30px;
    right: -20px;
    margin: 0px;
    padding: 0px;
}

#modalForm .closeBox a,
#modalMotoThanks .closeBox {
    background: url(../images/closeButton_black.png) no-repeat 100%;
    width: 50px;
    height: 0px;
    display: block;
    padding-top: 50px;
    overflow: hidden;
}

td.inside {
    text-align: left;
}

/*============================
#media-query
============================*/

/* smartPhone */
@media only screen and (min-width: 300px) and (max-width: 667px) {
    body {
        min-height: inherit;
        background: url(../images/contentBG-mobile.jpg) 0% 100% repeat;
    }

    #main {
        width: 100%;
        height: 100vh;
        max-height: inherit;
        margin: 0;
        padding-top: 0;
        background-position: 50% -30pt;      
    }

    #main.listView {}

    #main .birthdayBox {
        width: 95vw;
        height: 0;
        margin: 20pt auto;
        padding-top: 50vw;
        padding-bottom: 0;
        background-position-x: center;
        background-position-y: 0;
        background-size: contain;
        z-index: -1;
        left: 0vw;
    }

    #main .decoration {
        width: 100%;
        height: 100%;
        background-position: inherit;
        margin-top: inherit;
        background-size: 100%;
        padding-top: 1;
    }

    #map_canvas,
    #list_canvas {
        width: 90%;
        height: 50vh !important;
        box-sizing: border-box;
    }
    #list_canvas {
        height: auto !important;
        top: -40pt;
        margin-top: 0;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    #main .contribute {
        width: 100%;
        margin-top: inherit;
        text-align: center;
        z-index: 10;
        bottom: 0;
        overflow: hidden;
    }

    #main.listView .contribute {
        margin-top: 0%;
        bottom: inherit;
        position: inherit;

    }

    #main.listView .birthdayBox {
        height: auto !important;
    }

    #main .button {
        width: 190px;
        height: 80px;
        background-size: contain;
        margin: 10pt auto;
    }

    #main form {
        background-color: #ffffffcc;
        border-radius: 0;
        height: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .tbox0 {
        padding: 10pt 0;
        width: 26%;
        height: 150px;
        box-sizing: border-box;
    }

    #footer {
       margin-top: 0pt;
       padding-bottom: 20px;
    }

    #list_canvas .items-frame {
        justify-content: space-around;
    }

    .pageNavi {
        width: 100%;
    }

    .pageNavi .arrow.left {
        left: 10%;
    }

    .pageNavi .arrow.right {
        right: 10%;
    }

    #modalForm {
        width: 100%;
        height: 100%;
    }

    #modalForm .content {
       width: 85%;
        height: 400px;
    }

    iframe.form {
        width: 100%;
        overflow: hidden;
        border-right: none!important;
        box-sizing: border-box;
        padding: 0 !important;
    }

    #modalForm .mobile {
        display: none;
    }

    #modalForm .guide {
        display: none;
    }

    #modalForm .closeBox {
        width: 22pt;
        top: -10pt;
        right: -10pt;
    }

    #modalForm .closeBox a {
        background-size: contain;
        width: 22pt;
        padding-top: 22pt;
    }

    #modalMotoThanks .content {
        top: 200pt;
        width: 232pt;
        box-sizing: border-box;
        left: calc(50% - 116pt);
    }
    
    #modalThanks.motoLink {
        top: 110px;
        right: 0;
    }	
    
    #footer,
    #footer .mws a,
    .backToMap {
        color: rgb(255, 84, 84);
    }
}

/* tablet */
@media only screen and (min-width: 720px) and (max-width: 1112px) {}

@media only screen and (min-width: 720px) and (max-width: 1112px) and (orientation: portrait) {
    body {
        background: url(../images/contentBG-mobile.jpg) 50% no-repeat;
        background-size: cover;
        height: 100vh;
    }
    #main .button {
        width: 200px;
        height: 80px;
        margin-bottom: 30px;
    }
    #map_canvas, #list_canvas {
        top: -5vh;
    }
    #main .birthdayBox {
        width: 70%;
        margin-bottom: 20pt;
        padding-top: 235pt;
        background: url(../images/title.png) 50% no-repeat;
        background-size: contain;
    }
    #map_canvas, #list_canvas {
        width: 70%;
        margin-top: 0;
        top: 0;
    }
}

@media only screen and (min-width: 720px) and (max-width: 1112px) and (orientation: landscape) {}

/* Retina */
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx) {}

@media screen and (-webkit-min-device-pixel-ratio:3),
(min-resolution: 3dppx) {}