@charset "utf-8";

/* ----------------------------------------------------------------------
COMMON
---------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    overflow-x:hidden;
}

body {
    margin: 0;
    padding: 0;
    line-height: 2.2em;
    color: #333;
    font-size: 10px;
    font-size: 1.0rem;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    background:url(/special/hellow/img/ft_bg_01.jpg) no-repeat bottom center;
    background-size:100% auto;
    overflow-x:hidden;
}

li {
    list-style-type:none;
}

a {
    text-decoration:none;
    color:#333;
}

p,a {
    font-size:1.4rem;
}

img {
    max-width:100%;
    width:auto;
    height:auto;
}

.img {
    line-height:0;
}

.txt-c {
    text-align:center;
}

.txt-r {
    text-align:right;
}

.cf:after {
    display:block;
    clear:both;
    content:'';
}

.d-iblock {
    display:inline-block;
}

.pc a {
    transition:.5s;
}

.br-sp {
    display:none;
}

@media (max-width: 700px) {
    body {
        background-size:1500px auto;
    }
}

@media (max-width: 500px) {
    .br-sp {
        display:block;
    }
}


#progress {
    width:100%;
    height:3px;
    position:fixed;
    z-index:10;
    top:0;
    left:0;
    display:block;
}

#progressBar {
    width: 100%;
    height:5px;
    display: block;
    background: #F77777;
}

#loader-bg {
    background-color: #fefefe;
    z-index: 1001;
    position: relative;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow:hidden;
}

#loader-bg .logo {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-135px;
    margin-top:-100px;
    z-index:200;
    text-align:center;
    font-size:1.2rem;
    width:270px;
}

#loading {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align:center;
}

#loader-bg p {
    color:#F77777;
}

@media screen and (max-width:500px) {
    #loader-bg .logo img {
        width:200px;
        height:auto;
    }
}

@media screen and (max-width:400px) {
    #loader-bg .logo img {
        width:180px;
    }
}


/* ----------------------------------------
layout
---------------------------------------- */
.l-wrapper {
    max-width:2000px;
    width:96%;
    margin:0 auto;
}

.l-container {
    max-width:1200px;
    width:96%;
    margin:0 auto;
}

.l-top {
    width:87%;
    float:right;
}

@media (max-width: 767px) {
    .l-top {
        width:92%;
    }
}

@media (max-width: 500px) {
    .l-top {
        width:96%;
    }
}

/*
l-flex
---------- */
.l-flex {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:        flex;

    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

.l-flex-reverse {
    flex-direction:row-reverse;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:reverse;
    -webkit-flex-direction:row-reverse;
    -ms-flex-direction:row-reverse;
}

.l-flex-start {
    -webkit-box-pack:start;
    -webkit-justify-content:flex-start;
    -ms-flex-pack:start;
    justify-content:flex-start;
}

.l-flex-wrap {
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.l-flex-alignc {
    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;
}

.l-flex-2 > * {
    width:48%;
}

.l-flex-3 > * {
    width:32%;
}

.l-flex-3 .img img {
    width:100%;
    height:auto;
}

.l-flex-4 > * {
    width:24%;
}

/* ----------------------------------------
typo
---------------------------------------- */
.t-note {
    font-size:1.1rem;
}

/* ----------------------------------------
area
---------------------------------------- */
/*
header
---------- */
header {

}

/*
footer
---------- */
footer {
    color:#fff;
    padding:50% 0 30px;
}

footer a {
    color:#fff;
}

footer .logo {
    width:204px;
    display:inline-block;
}

footer li {
    display:inline-block;
    margin-left:12px;
}

footer li a:before {
    content:"";
    display:inline-block;
    width:7px;
    height:10px;
    background:url(/special/hellow/img/co_ar_right_01.png) no-repeat center center;
    background-size:contain;
    margin-right:7px;
}


@media (max-width: 1100px) {
    footer .l-flex {
        display:block;
    }

    footer .info {
        text-align:center;
        margin-bottom:20px;
    }

    footer ul {
        text-align:center;
    }
}

@media (max-width: 700px) {
    footer {
        padding:70% 0 30px;
    }

    footer li {
        display:block;
        margin:0 0 5px 0;
    }

    footer li:last-child {
        margin-bottom:0;
    }
}

@media (max-width: 500px) {
    footer {
        padding:100% 0 30px;
    }
}



.rlogo {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100%;
    left: auto;
}


.rFt {
    background:#fff;
    padding:10px 0;
}



.btn-p {
    display:inline-block;
    background:rgba(247,119,119,0.7);
    color:#fff;
    margin-bottom:100px;
    border-radius:5px;
    padding:15px 35px 15px 20px;
    margin-top:50px;
    position:relative;
    max-width:94%;
    line-height:1.4em;
}

.btn-p:after {
    content:"";
    display:inline-block;
    width:9px;
    height:13px;
    background:url(/special/hellow/img/co_ar_right_01.png) no-repeat center center;
    background-size:contain;
    position:absolute;
    right:10px;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

small {
    font-size:1.3rem;
}

.copyright { font-size: 1.2rem; }