@charset "utf-8";

/*--------------------------------
reset
--------------------------------*/
html,body,div,p,img,iframe,a,span,blockquote,q,address,cite,
pre,code,em,small,strong,b,i,
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer,time,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,
table,tbody,thead,tfoot,th,tr,td,
form,fieldset,legend,label,select,input,textarea,button{
    margin: 0;
    padding: 0;
    border: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: baseline;
}
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer{
    display: block;
}
ul li{
    list-style-type: none;
}
h1,h2,h3,h4,h5,h6{
    font-weight: 500;
}
body{
    line-height: 1;
      position:relative;
}

a{
    text-decoration: none;
}
img{
    vertical-align:top;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
select,option,input:not([type=checkbox]):not([type=radio]),textarea,button{
    font: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}
blockquote::before,blockquote::after,q::before,q::after{
    content: '';
    content: none;
}
[type=submit],[type=button],[type=reset],[type=file],button{
    cursor: pointer;
}
:focus{
    outline: none;
}

/*--------------------------------
base
--------------------------------*/
body{
    font-size: 16px;
    line-height: 2.0;
    font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    color: #323232;
    background:#FFF;
}

html,body,.wrap{
}
img{
    max-width: 100%;
    height: auto;
}
.wrap {
    margin: auto;
    max-width: 768px;
    position:relative;
}
.wrap:before{
    margin: auto;
    max-width: 768px;
    content:"";
    display:block;
    position:fixed;
    z-index:-1;
    width:100%;
    height:100vh;
    background:url(../images_g/bg.webp) center no-repeat;
    background-size:cover;
    background-position:center top;
}
/*--------------------------------
contents
--------------------------------*/
.top{
    display:table;
    overflow:hidden;
    z-index: 1;
    position:relative;
}
.top img{
    display:block;
}
.intro{
    margin:8% 3%;
    padding:3%;
    background:rgba(0,0,0,0.5);
    /*background:rgba(255,255,255,0.5);*/
    color:#FFF;
    font-size: 4.0vmin;
    border-radius:12px;
}

.app{
    margin:8% 3%;
    background:#FFF;
    border-radius:12px;
}
.app-img{
    position:relative;
}
.app-img .icon{
    width:15%;
    position:absolute;
    top:3%;
    right:3%;
}
.app-img .thumb{
    width:100%;
    border-top-right-radius:12px;
    border-top-left-radius:12px;
}
.app-info{
    margin:3%;
    display:table;
    background-color:#e4e4e4;
    /*border:2px solid #f033a2;*/
    border-radius:12px;
}
.app-info-ic{
    padding:10px;
    width:25%;
    display:table-cell;
    text-align:center;
}
.app-info img{
    width:80%;
}
.app-info-txt{
    padding:3% 3% 3% 0px;
    display:table-cell;
    color:#333;
    vertical-align:middle;
    font-size: 3.0vmin;
    line-height:160%;
}
.app-title{
    display:block;
    margin-bottom:2%;
    font-size: 4.0vmin;
    font-weight:bold;
}
.app-cate{
    margin:3% 3% 0 3%;
}

.app-info-btn{
    padding:3% 3% 3% 0px;
    width:30%;
    display:table-cell;
    vertical-align:middle;
}
.app-txt{
    padding:3% 5%; 5% 5%;
    font-size: 4.0vmin;
}
.app-btn{
    padding: 0% 15% 5% 15%;
}
.app-btn button{
    padding:3%;
    width:100%;
    color:#FFF;
    font-size:4.0vmin;
    background:#fe4dbd;
    border-radius:999px;
    box-shadow: 0px 5px 0px 0px rgba(206, 39, 130, 0.9);
}

.closing{
    position: relative;
    z-index: 2;
    padding: 12% 3% 3% 3%;
}
.pt{
    margin-top: 5%;
    opacity:0;
}
.btn{
    padding: 5% 3%;
    width:100%;
    animation: btn 2s ease-out infinite;
}
.btn a{
    display:block;
}
footer{
    padding: 1%;
    background:#e653a9;
    color:#FFF;
    font-size:3.5vmin;
    text-align:center;
}
/*--------------------------------
Font
--------------------------------*/
.bold{
    font-weight:bold;
}
.bold-red{
    color:#ea2a3d;
    font-weight:bold;
}
/*--------------------------------
Marker
--------------------------------*/
.marker{
  font-weight:bold;
  background: linear-gradient(transparent 40%, #f9f0b6 60%);
  line-height: 1;
}
.marker-orange{
    font-weight: bold;
    background: linear-gradient(transparent 40%, #e8631a 60%);
    line-height: 1;
}
.marker-lightpink{
    font-weight: bold;
    background: linear-gradient(transparent 40%, #fed1f3 60%);
    line-height: 1;
}
.bold{
    font-weight: bold;
}
.pink{
    color: #e43987;
}
/*--------------------------------
Blocks
--------------------------------*/
.bl-pink{
    display:inline-block;
    padding:1.5%;
    background:#f83c64;
    color:#FFF;
    font-size:3.0vmin;
    border-radius:4px;
    line-height:125%;
}
.bl-blue{
    display:inline-block;
    padding:1.5%;
    background:#216ee2;
    color:#FFF;
    font-size:3.0vmin;
    border-radius:4px;
    line-height:125%;
}
.bl-orange{
    display:inline-block;
    padding:1.5%;
    background:#e55f0e;
    color:#FFF;
    font-size:3.0vmin;
    border-radius:4px;
    line-height:125%;
}
.bl-black{
    display:inline-block;
    padding:1.5%;
    background:#333333;
    color:#FFF;
    font-size:3.0vmin;
    border-radius:4px;
    line-height:125%;
}
.bl-green{
    display:inline-block;
    padding:1.5%;
    background:#289e30;
    color:#FFF;
    font-size:3.0vmin;
    border-radius:4px;
    line-height:125%;
}