@charset "UTF-8";
/* CSS Document */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
 margin:0;
 padding:0;
 border:0;
 outline:0;
 vertical-align:baseline;
 background:transparent;
}

@media screen and (min-width: 414px){
    .br-sp {display: none; }
}

.l-wrapper__inner-border {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    border-top: 5px solid #039eec;
    z-index: 11;
}

.b-wrapper__inner-border {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 5px solid #039eec;
    z-index: 11;
}

.l-wrapper__inner:after {
    right: 0;
}

.l-wrapper__inner:before {
    left: 0;
}

.l-wrapper__inner:before,
.l-wrapper__inner:after {
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    border-left: 5px solid #039eec;
    z-index: 11;
}

#wrapper {
    height: 100vh;
    max-width: 100%;
    position: relative;
    color: #4c4c4c;
}

.main {
    width: 90%;
    position  : absolute;
	top       : 50%;
	left      : 50%;
	transform : translate(-50%, -50%);
    height: auto;
}

.img {
    margin-top: 50px;
    text-align: center;
    position: absolute;
    right: 50%;
    left: 50%;
    bottom: 0;
}

.main ul {
    list-style: none;
    display: table;
    justify-content: center;
    margin: 40px auto 0;
    padding: 0;
    width: 100%;
    max-width: 500px;
}

.main ul li {
    display: table-cell;
    border-radius: 5px;
    padding: 0 10px;
    margin: 0;
    vertical-align: top;
}

.col-1 img {
    width: 75px;
}

.col-2 img {
    width: 77px;
}

.col-3 img {
    width: 89px;
    margin-top: 8px;
}

h1 {
    max-width: 100%;
    text-align: center;
}
h1 img{
    max-width: 100%;
    margin-bottom: 20px;
}
.main h2 {
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    text-align: center;
    font-size: 10px;
    margin-bottom: 6px;
}

.main p {
    margin-bottom: 0;
    font-size: 18px;
    text-align: center;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

/*アニメーション*/
.fadeInUp{
    -webkit-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s;-webkit-animation-name:fadeInUp;animation-name:fadeInUp;visibility:visible !important
}
@-webkit-keyframes fadeInUp{
    0%{
    opacity:0;-webkit-transform:translateY(30px)
    }
    100%{opacity:1;-webkit-transform:translateY(0)
    }
}
@keyframes fadeInUp{
    0%{
        opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px)
    }
    100%{
        opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)
    }
}
/**順番に表示**/
/* .bf{opacity:0;-webkit-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s} */
/* .bf.active:nth-child(1){-webkit-animation:bookfade .4s ease .15s 1 forwards;animation:bookfade .4s ease .15s 1 forwards}.bf.active:nth-child(2){-webkit-animation:bookfade .4s ease .3s 1 forwards;animation:bookfade .4s ease .3s 1 forwards}.bf.active:nth-child(3){-webkit-animation:bookfade .4s ease .45s 1 forwards;animation:bookfade .4s ease .45s 1 forwards}.bf.active:nth-child(4){-webkit-animation:bookfade .4s ease .6s 1 forwards;animation:bookfade .4s ease .6s 1 forwards}.bf.active:nth-child(5){-webkit-animation:bookfade .4s ease .75s 1 forwards;animation:bookfade .4s ease .75s 1 forwards}.bf.active:nth-child(6){-webkit-animation:bookfade .4s ease .9s 1 forwards;animation:bookfade .4s ease .9s 1 forwards}.bf.active:nth-child(7){-webkit-animation:bookfade .4s ease 1.05s 1 forwards;animation:bookfade .4s ease 1.05s 1 forwards}.bf.active:nth-child(8){-webkit-animation:bookfade .4s ease 1.2s 1 forwards;animation:bookfade .4s ease 1.2s 1 forwards}.bf.active:nth-child(9){-webkit-animation:bookfade .4s ease 1.35s 1 forwards;animation:bookfade .4s ease 1.35s 1 forwards}.bf.active:nth-child(10){-webkit-animation:bookfade .4s ease 1.5s 1 forwards;animation:bookfade .4s ease 1.5s 1 forwards}.bf.active:nth-child(11){-webkit-animation:bookfade .4s ease 1.65s 1 forwards;animation:bookfade .4s ease 1.65s 1 forwards}.bf.active:nth-child(12){-webkit-animation:bookfade .4s ease 1.8s 1 forwards;animation:bookfade .4s ease 1.8s 1 forwards}.bf.active:nth-child(13){-webkit-animation:bookfade .4s ease 1.95s 1 forwards;animation:bookfade .4s ease 1.95s 1 forwards}.bf.active:nth-child(14){-webkit-animation:bookfade .4s ease 2.1s 1 forwards;animation:bookfade .4s ease 2.1s 1 forwards}.bf.active:nth-child(15){-webkit-animation:bookfade .4s ease 2.25s 1 forwards;animation:bookfade .4s ease 2.25s 1 forwards}.bf.active:nth-child(16){-webkit-animation:bookfade .4s ease 2.4s 1 forwards;animation:bookfade .4s ease 2.4s 1 forwards}.bf.active:nth-child(17){-webkit-animation:bookfade .4s ease 2.55s 1 forwards;animation:bookfade .4s ease 2.55s 1 forwards}.bf.active:nth-child(18){-webkit-animation:bookfade .4s ease 2.7s 1 forwards;animation:bookfade .4s ease 2.7s 1 forwards}.bf.active:nth-child(19){-webkit-animation:bookfade .4s ease 2.85s 1 forwards;animation:bookfade .4s ease 2.85s 1 forwards}.bf.active:nth-child(20){-webkit-animation:bookfade .4s ease 3s 1 forwards;animation:bookfade .4s ease 3s 1 forwards}.bf.active:nth-child(n+21){-webkit-animation:bookfade 0.4s ease 4s 1 forwards;animation:bookfade 0.4s ease 4s 1 forwards}@-webkit-keyframes bookfade{100%{opacity:1}}@keyframes bookfade{100%{opacity:1}} */

@media only screen and (max-width: 768px){
    
}
@media only screen and (max-width: 540px){
    .main ul li{
        padding: 0;
    }
    .col-1 img {
        width: 75px;
    }
    .col-2 img {
        width: 85px;
    }
    .col-3 img {
        width: 85px;
    }
    .main p{
        font-size: 15px;
    }
}
@media only screen and (max-width: 475px){
    .main ul{
        display: inherit;
        margin: 20px auto 0;
    }
    .main ul li{
       display: inherit;
    }
    .col-1 img {
        width: 55px;
        margin-top: 10px;
    }
    .col-2 img {
        width: 65px;
        margin-top: 10px;
    }
    .col-3 img {
        width: 65px;
        margin-top: 10px;
    }
    
}
@media only screen and (max-width: 375px){
    h1 img {
        max-width: 240px;
        margin-bottom: 10px;
    }
    .main p {
        margin-bottom: 10px;
    }
}
@media only screen and (max-width: 320px){
    h1 img {
        max-width: 200px;
        margin: 10px 0 5px;
    }
    .main p {
        font-size: 14px;
        line-height: 1.75em;
    }
    .main h2{
        font-size: 10px;
    }
}