@charset "utf-8";
/*------------------------------------------------------------------------------------------
*
*
    index_sp.css
*
*
------------------------------------------------------------------------------------------ */
body, html{
    width: inherit;
    height: inherit;
    min-height: inherit;
    position: relative;
}

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

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

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

#page{ background: none;}


header[role="extra"] h1{
    width: 150px;
    top: 7px;
    left: 70px !important;
}

#contents_area{
    font-family: '秀英丸ゴシック L' !important;
    font-size: 15px;
    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;}

br.sp{ display: block !important;}

/* --------------------------------------------------
*
    #main_visual
*
-------------------------------------------------- */
#main_visual{
    margin: 5px auto 25px auto;
    text-align: center;
    position: relative;
}

#main_visual h1 img{
    width: 100%;
    transition: opacity .6s ease;
}

/* --------------------------------------------------
*
    #section_yodogawa
*
-------------------------------------------------- */
#section_yodogawa{
    margin: 0 0 45px 0;
    padding: 0 15px;
    text-align: left;
}

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

/* --------------------------------------------------
*
    #section_techo
*
-------------------------------------------------- */
#section_techo{
    margin: 0 auto 10px auto;
    padding: 0 0 20px 0;
    position: relative;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

#section_techo .bg{
    width: 784px;
    position: relative;
    left: -20px;
}

#section_techo ul{
    width: 680px;
    letter-spacing: -.40em;
    position: absolute;
    top: 5px;
    left: 40px;
}

#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{
    width: 84px;
    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{
    margin: 0 auto 40px auto;
    padding: 0 10px;
    transform-origin: right bottom !important;
    -webkit-transform-origin: right bottom !important;
}

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

#section_comment .comment{
    margin: 0 0 25px 0;
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    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{
    padding: 0 20px;
}

#section_share .btn_banner .img img{
    width: 100%;
    max-width: 360px;
    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 .btn_banner img{
    width: 410px;
    height: auto;
}

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

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

#section_share li:last-child{
    margin-bottom: 20px;
}

#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: 55px;
    height: auto;
}

#section_share li.btn_techo{
    display: block;
    text-align: center;
}

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

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