@charset "utf-8";
/*------------------------------------------------------------------------------------------
*
*
    index_pc.css
*
*
------------------------------------------------------------------------------------------ */
br.sp{display: none !important;}

.device-sp{ display: none !important;}

.device-pc main p + *{
    margin-top: 0 !important;
}

#contents_area p, ul, li, div{
    padding: 0;
    margin: 0;
}

.device-pc main{
    width: inherit;
    padding: 0;
}

#contents_area{
    font-family: '秀英丸ゴシック L' !important;
    font-weight: normal !important;
    background-image:url(../images/img_bg.png);
    background-position: center top;
    overflow: hidden;
    opacity: 0;
}

#contents_area.on{ opacity: 1; transition: opacity .3s ease;}

#contents_area a{ color: #4c6ea9;}

.is_sp #contents_area a.touch,
.is_pc #contents_area a:hover{ text-decoration: underline;}


/* --------------------------------------------------
*
    #main_visual
*
-------------------------------------------------- */
#main_visual{
    width: 1000px;
    height: 651px;
    margin: 30px auto 5px auto;
    text-align: center;
    position: relative;
}

#main_visual h1 img{
    width: 939px;
    height: auto;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity .6s ease;
}

#main_visual h1 img.i06{
    opacity: 0;
    transform: scale(.85) rotate(-3deg) translateX(-25px) translateY(25px);
    transition: opacity .45s ease .35s, transform .45s ease .35s;
}

#main_visual h1 img.i07{
    opacity: 0;
    transform: scale(1.0) rotate(0) translateX(-5px);
    transition: opacity .8s ease, transform .8s ease;
}

#main_visual h1.on img{
    opacity: 1;
}

#main_visual h1.on img.i06,
#main_visual h1.on img.i07{
    opacity: 1;
    transform: scale(1) rotate(0deg) translate(0);
}

#main_visual h1 img.i01{
    animation: mv_anim_rotate_left .5s ease-in infinite alternate;
    -webkit-animation: mv_anim_rotate_left .5s ease-in infinite alternate;
}

#main_visual h1 img.i02{
    animation: mv_anim_rotate_right .7s ease-out infinite alternate;
    -webkit-animation: mv_anim_rotate_right .7s ease-out infinite alternate;
}

#main_visual h1 img.i03{
    animation: mv_anim_rotate_right 1s ease infinite alternate;
    -webkit-animation: mv_anim_rotate_right 1s ease infinite alternate;
}

#main_visual h1 img.i04{
    animation: mv_anim_rotate_right .8s ease-in infinite alternate;
    -webkit-animation: mv_anim_rotate_right .8s ease-in infinite alternate;
}

#main_visual h1 img.i05{
    animation: mv_anim_rotate_left .6s ease infinite alternate;
    -webkit-animation: mv_anim_rotate_left .6s ease infinite alternate;
}

@keyframes mv_anim_rotate_left{
    0%{ transform: rotate(-2deg);}
    100%{ transform: rotate(0deg);}
}

@keyframes mv_anim_rotate_right{
    0%{ transform: rotate(2deg);}
    100%{ transform: rotate(0deg);}
}

/* --------------------------------------------------
*
    #section_yodogawa
*
-------------------------------------------------- */
#section_yodogawa{
    margin: 0 0 90px 0;
    text-align: center;
}

#section_yodogawa p{
    line-height: 2em;
}



/* --------------------------------------------------
*
    #section_techo
*
-------------------------------------------------- */
#section_techo{
    width: 1000px;
    margin: 0 auto 100px auto;
    position: relative;
}

#section_techo ul{
    width: 880px;
    letter-spacing: -.40em;
    position: absolute;
    top: 10px;
    left: 80px;
}

#section_techo li{
    box-sizing: border-box;
    border-radius: 100%;
    display: inline-block;
    letter-spacing: normal;
    transition: transform .15s ease .0s;
    position: relative;
    cursor: pointer;
}

#section_techo li a{
    display: block;
    position: relative;
}

#section_techo li a:after{
    width: 100%;
    height: 100%;
    border-radius: 45%;
    border: 2px dashed #fff;
    opacity: 0;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.1);
    transition: transform .15s ease 0s, opacity .15s ease 0s, border .15s ease 0s;
    -webkit-transform: scale(1.1);
    -webkit-transition: transform .15s ease 0s, opacity .15s ease 0s, border .15s ease 0s;
    cursor: pointer;
}

.is_sp #section_techo li.touch a:after,
.is_pc #section_techo li:hover a:after{
    border-radius: 100%;
    opacity: 1;
    transform: scale(1);
    transition: transform .25s ease .05s, opacity .25s ease .05s, border .25s ease .05s;
    -webkit-transform: scale(1);
    -webkit-transition: transform .25s ease .05s, opacity .25s ease .05s, border .25s ease .05s;
}

#section_techo li img{
    transition: transform .15s ease .0s, border .15s ease .0s;
    -webkit-transition: transform .15s ease .0s, border .15s ease .0s;
}

.is_sp #section_techo li.touch,
.is_pc #section_techo li:hover{
    animation: ico_anim_scale .25s ease;
    -moz-animation: ico_anim_scale .25s ease;
    -webkit-animation: ico_anim_scale .25s ease;
    transition: transform .15s ease .05s, border .3s ease .05s;
}

.is_sp #section_techo li.touch img,
.is_pc #section_techo li:hover img{
    animation: ico_anim .5s ease;
    -moz-animation: ico_anim .5s ease;
    -webkit-animation: ico_anim .5s ease;
    transition: transform .15s ease .05s;
}

@keyframes ico_anim{
    0%{ transform: skew(0);}
    20%{ transform: skew(-11deg);}
    40%{ transform: skew(8deg);}
    60%{ transform: skew(-6deg);}
    100%{ transform: skew(4deg);}
}

@keyframes ico_anim_scale{
    0%{ transform: scale(1);}
    50%{ transform: scale(1.06);}
    100%{ transform: scale(1);}
}


/* --------------------------------------------------
*
    #section_comment
*
-------------------------------------------------- */
#section_comment{
    width: 570px;
    margin: 0 auto 40px auto;
    transform-origin: right bottom !important;
    -webkit-transform-origin: right bottom !important;
}

#section_comment li{
    margin: 0 0 20px 0;
}

#section_comment .comment{
    margin: 0 0 25px 0;
    padding: 25px 0 25px 25px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 15px;
    border: 3px solid #ff6ea9;
    position: relative;
}

#section_comment .comment:after{
    content: '';
    width: 18px;
    height: 23px;
    display: block;
    background-image:url(../images/parts_comment_arrow.png);
    background-repeat: no-repeat;
    background-size: 18px;
    position: absolute;
    bottom: -21px;
    right: 50px;
}

#section_comment .comment p{
    line-height: 1.9em;
}

#section_comment .ico{
    text-align: right;
}

#section_comment .ico img{
    width: 74px;
    height: auto;
}


/* --------------------------------------------------
*
    #section_share
*
-------------------------------------------------- */
#section_share .btn_banner{
    text-align: center;
}

#section_share .btn_banner p{
    margin: 0 0 15px 0 !important;
}

#section_share .btn_banner p.notes{
    margin: 50px 0 60px 0 !important;
    font-size: 14px;
}

#section_share .btn_banner img{
    width: 410px;
    height: auto;
    transition: opacity .15s ease .0s;
}

.is_sp #section_share .btn_banner a.touch img,
.is_pc #section_share .btn_banner a:hover img{
    opacity: .7;
    transition: opacity .15s ease .05s;
}

#section_share ul{
    font-size: 0;
    text-align: center;
}

#section_share li{
    margin: 0 10px 25px 10px;
    display: inline-block;
    vertical-align: middle;
}

#section_share li a{
    transition: opacity .15s ease .0s;
}

#section_share li a:hover{
    opacity: .7;
    transition: opacity .15s ease .05s;
}

#section_share li img{
    width: 70px;
    height: auto;
}

#section_share li.btn_techo img{
    width: 250px;
}

#section_share .btn_magazine_top{
    margin: 0 0 100px 0;
    text-align: center;
}