body {margin:0px;font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "Lucida Grande", "Hiragino Kaku Gothic Pro", Osaka, Verdana, "ＭＳ Ｐゴシック", sans-serif;}

#wrapper {width:100%;min-width:1000px;max-width:3000px;background: url("../images/pc_header.jpg") top center no-repeat;text-align:left;font-size: 18px;line-height: 1.6;color: #222;}
header {position:relative;margin:0px auto;width:1000px;height:1648px;}
h1 {margin: 0px;padding: 0px;color:#fce701;font-size:42px;line-height: 1.3;}
h1 .small {font-size:36px;}
h1 .point {display: inline-block;border-bottom: 6px solid #e1a8e5;}
h2 {margin: 0px;padding: 0px;color:#ffffff;font-size:33px;line-height: 1.4;text-align:center;}
h3 {margin: 0px;padding: 20px 0px;font-size:32px;line-height: 1.4;text-align:center;}
.nowrap {white-space:nowrap;}
.headerboxarea {position:absolute;top:30px;left:50px;display: flex;}
.iconbtn_white {padding: 8px 40px;background: #ffffff;font-size: 17px;border-radius: 17px;display: flex;justify-content: center;align-items: center;cursor: pointer;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);}
.iconbtn_white img {margin-right: 8px;}
#xlink img, #maillink img {height: 25px;}
#snsinfo {position:absolute;top:80px;left:5px;color:#ffffff;}
#mainappeal {position:absolute;top:150px;left:0px;width:100%;text-align:center;}
#mainappealsub {font-size:28px;}
#familyimg {display:none;}
#appstorelink {position:absolute;top:660px;left:0px;width:100%;text-align:center;text-decoration:none;}
.googleplaylogo, .appstorelogo {height: 70px;}
#appstoreunderappeal {position:absolute;top:740px;color:#ffffff;width:100%;text-align:center;font-size:18px;line-height:1.3;}
.servicestartdate{font-size:14px;}
.datetxt{font-size:14px;}
.downloadcnt{font-size:26px;font-weight:bold;}
#apptitlearea {position:absolute;top:810px;left:50px;}
#apptitle {font-size:26px;line-height:1;}
#apptitlesub {font-weight:normal;font-size:34px;line-height:2;text-align:left;}
#appimage {display: none;}

#contents {margin-top:40px;margin-bottom: 80px;}
article {margin-top:80px;}
#aboutuserbox {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;margin: 20px auto 0px auto;width: 95%;max-width: 1200px;}
#aboutuserbox .userinfo {margin: 20px 0px 20px 0px;box-sizing: border-box;width: 48%;}
#aboutuserbox .userinfo h4 {margin: 0px;color: #4db8c5;font-size: 26px;}
#aboutuserbox .userinfobox {margin-top: 10px;border: 5px solid #f5f5f5;padding: 15px;border-radius: 10px;}

#appstory {width: 95%;max-width: 1200px;margin: 20px auto 0px auto;
    font-size: 16px;
    padding-left: 20px;
    line-height: 2;
    background-image: linear-gradient( #eee 0.1px, transparent 0.1em );
    background-size: auto 2rem;
    border-bottom: 1px solid #eee;
}

#appinfoimgbox {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;margin: 0px auto;width: 95%;max-width: 1200px;}
.appinfo {box-sizing: border-box;width:48%;margin-top:30px;}
.appinfo img {width:100%;border: solid 2px #eee;padding: 10px;border-radius: 5px;}

#appinfoimgbox2 {margin: 0px auto;width: 95%;max-width: 1200px;}
.appinfo2 img {width:100%;}

#sitelink {width: 95%;max-width: 1200px;margin: 20px auto 0px auto;}
#sitelink a {color: #0a8ec9;text-decoration: none;}
#sitelink a:hover {text-decoration: underline;}

#uphist {overflow: auto;width: 90%;max-width: 1200px;height: 600px;background: #ffffff;margin: 10px auto;padding: 0px;}
#uphist dl {display: flex;flex-wrap: wrap;justify-content: space-between;width: 100%;}
#uphist dt {padding: 15px 0px;width: 160px;font-size: 18px;}
#uphist dd {padding: 15px 0px;width: calc(100% - 210px);font-size: 16px;}

footer {padding:70px 0px 30px 0px;text-align: center;background: #000;color: #ffffff;}
#footerappeal {font-size:28px;}
#footerappstorelink {margin:40px 0px;}


/*------------------------------------------*/
@media screen and (max-width:1000px){

    #wrapper {width:100%;min-width:600px;max-width:1000px;background: url("../images/tab_header.jpg") top center no-repeat;text-align:left;font-size: 16px;}
    header {width:600px;height:1336px;}
    h1 {margin: 0px;padding: 0px;color:#fce701;font-size:40px;line-height: 1.3;}
    h1 .small {font-size:36px;}
    h2 {font-size:30px;line-height: 1.4;text-align:center;}
    h3 {margin: 0px;padding: 20px 0px;font-size:28px;line-height: 1.4;text-align:center;}
    .headerboxarea {position:absolute;top:18px;left:0px;display: flex;}
    .iconbtn_white {padding: 5px 30px;background: #ffffff;font-size: 15px;border-radius: 15px;display: flex;justify-content: center;align-items: center;cursor: pointer;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);}
    .iconbtn_white img {margin-right: 8px;}
    #xlink img, #maillink img {height: 20px;}
    #snsinfo {position:absolute;top:60px;left:5px;color:#ffffff;}
    #mainappeal {position:absolute;top:115px;left:0px;width:100%;text-align:center;}
    #mainappealsub {font-size:24px;}
    #familyimg {display:none;}
    #appstorelink {position:absolute;top:570px;left:0px;width:100%;text-align:center;text-decoration:none;}
    .googleplaylogo, .appstorelogo {height: 64px;}
    #appstoreunderappeal {position:absolute;top:650px;color:#ffffff;width:100%;text-align:center;font-size:18px;line-height:1.3;}
    .servicestartdate{font-size:14px;}
    .datetxt{font-size:14px;}
    .downloadcnt{font-size:26px;font-weight:bold;}
    #apptitlearea {position:absolute;top:750px;left:50px;}
    #apptitle {font-size:22px;line-height:1;}
    #apptitlesub {font-weight:normal;font-size:24px;line-height:2;text-align:center;}

    #appimage {display: block;text-align: center;margin-bottom:30px;}
    #appimage img {width: 90%;}

    #contents {margin-top:40px;margin-bottom: 80px;}
    article {margin-top:60px;}

    #aboutuserbox {width: 95%;max-width: 1200px;}
    #aboutuserbox .userinfo {margin: 20px 0px 10px 0px;box-sizing: border-box;width: 48%;}
    #aboutuserbox .userinfo h4 {margin: 0px;color: #4db8c5;font-size: 22px;}
    #aboutuserbox .userinfobox {margin-top: 10px;border: 5px solid #f5f5f5;padding: 15px;border-radius: 10px;}

    #appstory {width: 95%;max-width: 1200px;margin: 20px auto 0px auto;
        font-size: 16px;
        padding-left: 20px;
        line-height: 2;
        background-image: linear-gradient( #eee 0.1px, transparent 0.1em );
        background-size: auto 2rem;
        border-bottom: 1px solid #eee;
    }

    #appinfoimgbox {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;margin: 0px auto;width: 95%;max-width: 1200px;}
    .appinfo {box-sizing: border-box;width:48%;margin-top:30px;}
    .appinfo img {width:100%;}

    #sitelink {width: 95%;max-width: 1200px;margin: 20px auto 0px auto;}

    #uphist {overflow: auto;width: 90%;max-width: 1200px;height: 600px;background: #ffffff;margin: 10px auto;padding: 0px;}
    #uphist dl {display: flex;flex-wrap: wrap;justify-content: space-between;width: 100%;}
    #uphist dt {padding: 15px 0px;width: 160px;font-size: 18px;}
    #uphist dd {padding: 15px 0px;width: calc(100% - 210px);font-size: 16px;}

    footer {padding:70px 0px 30px 0px;text-align: center;background: #000;color: #ffffff;}
    #footerappeal {font-size:28px;}
    #footerappstorelink {margin:40px 0px;}

}

/*------------------------------------------*/
@media screen and (max-width:600px){

    #wrapper {width: 100%;min-width: 300px;max-width:600px;background: none;text-align:left;font-size: 15px;}
    header {background: #4db8c5;width: 100%;height: 1150px;}
    h1 {margin: 0px;padding: 0px;color:#fce701;font-size:30px;line-height: 1.3;}
    h1 .small {font-size:22px;}
    h2 {font-size:20px;line-height: 1.4;text-align:center;}
    h3 {margin: 0px;padding: 15px 0px;font-size:22px;line-height: 1.4;text-align:center;background: #f5f5f5;}
    .headerboxarea {position:absolute;top:18px;left:20px;display: flex;}
    .iconbtn_white {padding: 4px 15px;background: #ffffff;font-size: 13px;border-radius: 10px;display: flex;justify-content: center;align-items: center;cursor: pointer;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);}
    .iconbtn_white img {margin-right: 7px;}
    #xlink img, #maillink img {height: 14px;}
    #snsinfo {position:absolute;top:60px;left:10px;color:#ffffff;font-size:13px;}
    #mainappeal {position:absolute;top:110px;left:0px;width:100%;text-align:center;}
    #mainappealsub {font-size:16px;}
    #familyimg {position:absolute;top:230px;display: block;width:100%;text-align: center;}
    #familistinfo {position:absolute;bottom:0px;display: block;width: 100%;height: 300px;background: #ffffff url("../images/familistinfo.png") bottom center no-repeat;background-size: cover;}
    #familyimg img {width: 300px;}
    #appstorelink {position:absolute;top:550px;left:0px;width:100%;text-align:center;text-decoration:none;}
    .googleplaylogo, .appstorelogo {height: 45px;}
    #appstoreunderappeal {position:absolute;top:610px;color:#ffffff;width:100%;text-align:center;font-size:15px;line-height:1.3;}
    .servicestartdate{font-size:12px;}
    .datetxt{font-size:12px;}
    .downloadcnt{font-size:22px;font-weight:bold;}
    #apptitlearea {position:absolute;top:730px;left:0px;text-align:center;width:100%;}
    #apptitle {font-size:20px;line-height:1;}
    #apptitlesub {font-weight:normal;font-size:20px;line-height:2;text-align:center;}

    #appimage {display: block;text-align: center;margin-bottom:30px;}
    #appimage img {width: 100%;}

    #contents {margin-top:40px;margin-bottom: 80px;}
    article {margin-top:50px;}

    #aboutuserbox {width: 90%;max-width: 600px;}
    #aboutuserbox .userinfo {margin: 20px 0px 10px 0px;box-sizing: border-box;text-align: left;width: 100%;}
    #aboutuserbox .userinfo h4 {margin: 0px;color: #4db8c5;font-size: 20px;text-align: center;}
    #aboutuserbox .userinfobox {margin-top: 10px;border: 5px solid #f5f5f5;padding: 13px;border-radius: 10px;}

    #appstory {width: 90%;max-width: 600px;margin: 20px auto 0px auto;
        font-size: 16px;
        padding-left: 20px;
        line-height: 2;
        background-image: linear-gradient( #eee 0.1px, transparent 0.1em );
        background-size: auto 2rem;
        border-bottom: 1px solid #eee;
    }

    #appinfoimgbox {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;margin: 10px auto 0px auto;width: 95%;max-width: 600px;}
    .appinfo {box-sizing: border-box;width:100%;margin-top:10px;}
    .appinfo img {width:100%;}

    #sitelink {width: 90%;max-width: 600px;margin: 20px auto 0px auto;}

    #uphist {overflow: auto;width: 90%;height: 400px;background: #ffffff;margin: 10px auto;padding: 0px;}
    #uphist dl {display: flex;flex-wrap: wrap;justify-content: space-between;}
    #uphist dt {padding: 15px 0px 0px 0px;font-size: 16px;}
    #uphist dd {padding: 10px 0px 15px 0px;width: 100%;font-size: 14px;}

    footer {padding:50px 0px 30px 0px;text-align: center;background: #000;color: #ffffff;font-size:13px;}
    #footerappeal {font-size:20px;}
    #footerappstorelink {margin:20px 0px;}

}