@charset "utf-8";

/* ----------------------------------------------------------------------
INDEX
---------------------------------------------------------------------- */
body{
    border-top:5px solid #fff;
    overflow-x:hidden;
}

body.open {
    border-top:5px solid #F77777;
    transition:0.5s;
    opacity:1;
}

.img > img {
    box-shadow: 0 0 12px 0 rgba(0,0,0,0.27);
}


/*
header
---------- */
header {
    position:relative;
    padding-top:250px;
    margin-bottom:150px;
}

h1 {
   position:absolute;
    top:30px;
    width:505px;
    max-width:70%;
    z-index:1;
}

.mainvisual {
    position:relative;
}

.mainvisual .img{
    width:33%;
    height:auto;
}

.mainvisual .img img {
    width:100%;
}

.mainvisual .img:nth-child(2){
    margin-top:10%;
}

.mainvisual .img:nth-child(3){
    margin-top:20%;
}

@media (max-width: 767px) {
    header {
        padding-top:35%;
        margin-bottom:100px;
    }
    h1 {
        top:15px;
    }
    .mainvisual .l-flex {
        display:block;
    }

    .mainvisual .img {
        width:70%;
    }

    .mainvisual .img:nth-child(2){
        margin-top:0%;
        margin-left:15%
    }

    .mainvisual .img:nth-child(3){
        margin-top:0%;
        margin-left:30%
    }
}

@media (max-width: 767px) {
    header {
        padding-top:30%;
        margin-bottom:70px;
    }
    h1 {
        max-width:60%;
    }
}

/*
intro
---------- */
#intro {
    margin-bottom:200px;
    position:relative;
}

#intro p {
    width:684px;
    max-width:70%;
}

#intro:after {
    position:absolute;
    left:2%;
    bottom:-300px;
    content:"";
    background:url(/special/hellow/img/co_ar_down_01.png) no-repeat bottom center;
    display:inline-block;
    width:24px;
    height:238px;
    background-size:contain;
}

@media (max-width: 767px) {
    #intro {
        margin-bottom:150px;
        left:-4%;
    }

    #intro p {
        max-width:96%;
    }

    #intro:after {
        bottom:-210px;
        height:180px;
        left:0;
    }
}

/*
sec-youtube
---------- */
#sec-youtube {
    width:80%;
    float:right;
    margin-bottom:200px;
    position:relative;
}

#sec-youtube .img img:first-child {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.27);
}

.btn-play {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.pc #sec-youtube a:hover {
    opacity:0.7;
}

@media (max-width: 767px) {
    #sec-youtube {
        margin-bottom:100px;
        width:92%;
    }

    .btn-play {
        width:100px;
        height:100px;
    }
}

/*
lideimg
---------- */
.slideimg {
    clear:both;
    margin-bottom:200px;
    position:relative;
    right:-3%;
}

.item {
    padding:0 0 0 5px;
}

.item img {
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.17);
}

.slideimg:before {
    width:calc(110%);
    height:80px;
    display:inline-block;
    background:#F5E5E5;
    position:absolute;
    bottom:-50px;
    left:-30px;
    content:"";
}

@media (max-width: 767px) {
    .slideimg {
        margin-bottom:300px;
    }
}

@media (max-width: 500px) {
    .slideimg {
        margin-bottom:200px;
    }

    .slideimg:before {
        bottom:-20px;
        left:-10px;
    }
}

/*
sec-story
---------- */
#sec-story {
    position:relative;
}

#sec-story h2 {
    width:32px;
    position:absolute;
    left:-11%;
    top:5%;
    z-index:1;
}

#sec-story section {
    margin-bottom:600px;
}

#sec-story section:last-child {
    margin-bottom:600px;
}

#sec-story h3 {
    text-align:center;
}

#sec-story h3 .num {
    margin-bottom:40px;
    display:block;
}

#sec-story h3 .txt {
    display:block;
}


#sec-story .l-flex {
    margin-bottom:70px;
}

#sec-story section .main {
    padding-top:200px;
    margin-bottom:70px;
    position:relative;
    background:#fff;
}

#sec-story section .main:before {
    content:"";
    display:inline-block;
    width:100%;
    height:60%;
    background:rgba(249,151,151,.17);
    position:absolute;
    bottom:-150px;
    z-index:0;
}

#sec-story section .img a {
    background:#fff;
    line-height:0;
    display:inline-block;
    box-shadow: 0 0 12px 0 rgba(0,0,0,0.27);
}

.pc #sec-story section .main img {
    transition:.5s;
}

.pc #sec-story section .img a:hover {
    box-shadow:none;
}

.pc #sec-story section .img a:hover img {
    opacity:0.7;
}

#sec-story section:nth-child(odd) .main:before {
    right:-150px;
}

#sec-story section:nth-child(even) .main:before {
    left:-150px;
}

#sec-story section .main img {
    position:relative;
    z-index:1;
}

#sec-story h4 {
    font-size:3rem;
    line-height:1.7em;
    margin-bottom:20px;
    padding:10px 30px;
    position:relative;
    display:inline-block;
}

#sec-story h4:before {
    content:"";
    display:inline-block;
    width:21px;
    height:16px;
    background:url(/special/hellow/img/co_ic_01.png) no-repeat;
    position:absolute;
    top:0;
    left:0;
}

#sec-story h4:after {
    content:"";
    display:inline-block;
    width:21px;
    height:16px;
    background:url(/special/hellow/img/co_ic_02.png) no-repeat;
    position:absolute;
    bottom:0;
    right:0;
}

#sec-story h4 + p {
    padding-left:20px;
    color:#666;
}


#sec-story .thumb {
    position:absolute;
    right:-7%;
    width:1200px;
}

#sec-story .thumb .img {
    width:40%;
    display:inline-block;
}

#sec-story .thumb .img:nth-child(odd){
    margin-right:15px;
    display:inline-block;
}

#sec-story .thumb .img:nth-child(3){
    top:100px;
    left:2%;
    position:relative;
}

.btn-next {
    width:150px;
    height:150px;
    border-radius:75px;
    background: rgba(247,119,119,0.7);
    display:inline-block;
    text-align:center;
    margin-right:100px;
    box-shadow: 0 0 12px 0 rgba(0,0,0,0.27);
    vertical-align:top;
    padding-top:54px;
    top:-30px;
    position:relative;
}

.pc .btn-next:hover {
    background: rgba(247,119,119,0.5);
    box-shadow:none;
}

.btn-next img {
    width:26px;
    height:42px;
    margin-right:0 !important;
}

@media (max-width: 1200px) {
    #sec-story section {
        margin-bottom:500px;
    }

    #sec-story section:last-child {
        margin-bottom:500px;
    }

    #sec-story .thumb {
        width:110%;
    }

    #sec-story .thumb .img {
        width:37%;
        height:auto;
    }

    #sec-story h4 {
        font-size:2.4rem;
    }

    .btn-next {
        width:90px;
        height:90px;
        border-radius:45px;
        padding-top:33px;
        margin-right:20px;
    }

    .btn-next img {
        width:14px;
        height:23px;
    }
}

@media (max-width: 767px) {
    #sec-story section {
        margin-bottom:200px;
    }

    #sec-story .l-flex {
        margin-bottom:50px;
    }

    #sec-story section:last-child {
        margin-bottom:200px;
    }

    #sec-story h2 {
        left:10%;
        top:9%;
        width: 16px;
    }

    #sec-story section .main {
        margin-bottom:30px;
    }

    #sec-story h4 {
        font-size:2.1rem;
    }

    #sec-story section .main {
        padding-top:150px;
    }

    #sec-story .thumb {
        position:relative;
        right:0;
    }

    #sec-story .thumb .img {
        width:35%;
    }

    #sec-story .thumb .img:nth-child(3) {
        top:70px;
    }
}

@media (max-width: 400px) {
    #sec-story section {
        margin-bottom:100px;
    }

    #sec-story section:last-child {
        margin-bottom:100px;
    }

    #sec-story h2 {
        left:10%;
        top:7%;
        width: 16px;
    }

    #sec-story section .main {
        margin-bottom:20px;
    }

    #sec-story h4 {
        font-size:1.7rem;
    }

    #sec-story section .name img {
        width:15px;
    }

    #sec-story section .main {
        padding-top:120px;
    }

    .btn-next {
        width:70px;
        height:70px;
        border-radius:35px;
        padding-top:24px;
    }

    #sec-story .thumb .img:nth-child(3) {
        top:30px;
    }

}


.line {
    left:100px;
    position:relative;
    max-width:50%;
}

.line.first {
    margin-bottom:100px;
}


/*
sec-story
---------- */
.pc aside a:hover {
    opacity:0.7;
    box-shadow:none;
}

aside .img a {
    box-shadow: 0 0 12px 0 rgba(0,0,0,0.27);
    line-height:0;
    display:block;
}

#aside-meets .l-container {
    margin-bottom:70px;
    padding:70px 0;
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;
}

#aside-meets .logo {
    line-height:0;
    margin-bottom:20px;
}

#aside-meets .logo img {
    width:369px;
}

#aside-meets h3 {
    font-size:1.8rem;
    border-bottom:3px solid #DDC300;
    margin-bottom:40px;
}

#aside-meets .btn {
    background:#DDC300;
    display:inline-block;
    padding:15px 30px;
    color:#fff;
}

#aside-meets .btn:after {
    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-left:7px;
}

#aside-meets .img {
    margin-bottom:20px;
}

#aside-meets .txt {
    padding-right:100px;
}



@media (max-width: 1200px) {
    #aside-meets .logo img {
        width:270px;
    }

    #aside-meets .txt {
        padding:0 0 0 30px;
    }
}

@media (max-width: 767px) {
    #aside-meets .logo img {
        width:240px;
    }

    #aside-meets .img {
        margin-bottom:0;
    }

    #aside-meets .l-flex {
        display:block;
        position:relative;
    }

    #aside-meets .link {
        text-align:center;
    }

    #aside-meets .txt {
        padding:20px 0;
        text-align:center;
    }

    #aside-meets .txt p {
        font-size:1.3rem;
    }

    #aside-meets h3 {
        display:inline;
        font-size:1.6rem;
        margin-bottom:20px;
        line-height:2.1em;
    }

    #aside-meets .btn {
        margin-top:20px;
    }
}


/*
sec-article
---------- */
#sec-article {
    position:relative;
    margin-bottom:100px;
}

#sec-article:before {
    content:"";
    width:140%;
    height:250px;
    background:rgba(249,151,151,.17);
    position:absolute;
    bottom:0;
    left:-20%;
}

#sec-article h2 {
    position:absolute;
    left:0;
    top:0;
}

#sec-article .article-box {
    padding:170px 0 150px 100px;
    position:relative;
}


#sec-article article {
    padding:10px;
    transition:.5s;
    transform: translateY(0);
}

#sec-article article a {
    display:block;
    padding:20px 20px 40px;
    background: #fff url(../img/top/co_tri_01.png) no-repeat 98% 98%;
    background-size:25px 25px;
    box-shadow:0 0 12px 0 rgba(0,0,0,0.27);
}

#sec-article article:nth-child(even){
    transform: translateY(-20px);
    position:relative;
}

#sec-article article h3 {
    font-size:1.8rem;
    font-weight:bold;
}

#sec-article .mainvisual {
    margin-bottom:10px;
}

#sec-article .mainvisual .img {
    width:100%;
}

#sec-article .name {
    text-align: center;
    color: #777;
    margin-top: 3px;
}

#sec-article .icon {
    width:40%;
    max-width:100px;
    display:block;
    margin:-20px auto 0;
}

#sec-article .slick-track {
    padding:20px 0;
}

#sec-article .slick-prev {
    position:absolute;
    right:-20px;
    top:40%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:none;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index:1;
}

#sec-article .slick-prev:before {
    content:"";
    width:70px;
    height:70px;
    background:url(/special/hellow/img/co_bt_01.png) no-repeat center center;
    display:block;
    background-size:contain !important;
    transform:rotateZ(180deg);
}

#sec-article .slick-next {
    position:absolute;
    left:90px;
    top:40%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background:none;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

#sec-article .slick-next:before {
    content:"";
    width:70px;
    height:70px;
    background:url(/special/hellow/img/co_bt_01.png) no-repeat center center;
    display:block;
    background-size:contain !important;
}

@media (max-width: 1200px) {
    #sec-article article {
        margin-left:15px;
        transform: translateY(0) !important;
    }
    #sec-article .slick-next:before,#sec-article .slick-prev:before {
        width:60px;
        height:60px;
    }
}

@media (max-width: 767px) {
    #sec-article h2 {
        width:42px;
    }

    #sec-article .article-box {
        padding:70px 0 60px 60px;
    }

    #sec-article .slick-prev {
        right:-13px;
    }

    #sec-article .slick-next {
        left:53px;
    }
    #sec-article .slick-next:before,#sec-article .slick-prev:before {
        width:50px;
        height:50px;
    }
}

@media (max-width: 400px) {
    #sec-article .article-box {
        padding:70px 0 60px 50px;
    }

    #sec-article article a {
        padding:15px 15px 35px;
    }
}

.btn-article {
    position:absolute;
    top:-100px;
    right:10px;
    width:220px;
    animation: fuwa 5s linear infinite;
    z-index:10;
}

@keyframes fuwa {
    0% {-webkit-transform:translate(0, 0) rotate(-2deg);}
    50% {-webkit-transform:translate(1px, -15px) rotate(2deg);}
    100% {-webkit-transform:translate(0, 0)rotate(-2deg);}

}

@media (max-width: 1200px) {
    .btn-article {
        width:200px;
    }
}

@media (max-width: 900px) {
    .btn-article {
        width:180px;
        top:-70px;
        right:0;
    }
}

@media (max-width: 767px) {
    .btn-article {
        width:150px;
        top:-50px;
        right:0;
    }
}

@media (max-width: 500px) {
    .btn-article {
        width:120px;
        top:-30px;
        right:0;
    }
}

@media (max-width: 400px) {
    .btn-article {
        width:100px;
    }
}