@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description :
===================================================================== */

/* =====================================================================
*    top
* =================================================================== */

.next .inner {
    padding: 43.5% 0 24%;
}

@media screen and (min-width:768px){
    .next {
        position: relative;
    }

    .next::after {
        content: "";
        display: block;
        width: 100%;
        padding-top: 29.27%;
        background: url(../images/bg_yellow.jpg) repeat center top;
        background-size: 18.18% auto;
        position: absolute;
        left: 0;
        bottom: 0;
    }

	.next .inner {
        padding: 17.82% 0 15.64%;
        z-index: 2;
    }
}

@media screen and (min-width:1100px){
    .next::after {
        padding-top: 322px;
        background-size: 200px auto;
    }

    .next .inner {
        padding: 196px 0 172px;
    }
}

/* .banner
---------------------------------------------------------- */
.banner {
    background: url(../images/bg_yellow.jpg) repeat left top;
    background-size: 32% auto;
}

.banner .banner_box {
    width: 92%;
    margin: 0 auto;
    padding: 5.33% 0 20%;
}

.banner .banner_box a {
    display: block;
}

@media screen and (min-width:768px){
	.banner {
        background: url(../images/bg_yellow.jpg) repeat center top;
        background-size: 18.18% auto;
    }

    .banner .banner_box {
        width: 37.64%;
        padding: 2.73% 0 9.09%;
    }

    .banner .banner_box a {
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .banner .banner_box a:hover {
        opacity: 0.7;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }
}

@media screen and (min-width:1100px){
    .banner {
        background-size: 200px auto;
    }
}

/* .next
---------------------------------------------------------- */
.next {
    background: url(../images/bg_content_sp.png) no-repeat left bottom #e6311a;
    background-size: 100% auto;
}

.sec_ttl {
    width: 100%;
    background: url(../images/bg_ttl_sp.png) no-repeat left top;
    background-size: 100% auto;
    padding: 43.333% 0 0;
    margin: -13.47% 0 0;
    position: absolute;
    top: 0;
    left: 0;
}

.sec_ttl img {
    width: 80.8%;
    margin: 0 auto;
}

.next_theme_box {
    width: 92%;
    margin: 0 auto;
    position: relative;
}

.next_theme_box::before, .next_theme_box::after {
    content: "";
    display: block;
    width: 100%;
    padding-top: 8.7%;
    background: url(../images/bg_makimono1_sp.png) no-repeat left top;
    background-size: 100% auto;
}

.next_theme_box::after {
    padding-top: 5.8%;
    background: url(../images/bg_makimono2_sp.png) no-repeat left top;
    background-size: 100% auto;
}

.next_theme_box .next_theme_bg {
    width: 97.1%;
    margin: 0 auto;
    padding: 0.8% 2.24%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: url(../images/bg_makimono3_sp.png) repeat left top;
    background-size: 34.33% auto;
}

.next_theme_box .next_theme_bg .next_theme_inner {
    padding: 7.81%;
    background: url(../images/bg_white.png) repeat left top;
    background-size: 31.75% auto;
}

.next_theme_inner .next_date_box {
    color: #e6311a;
    font-size: 1.45rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    margin: 0 0 8%;
    position: relative;
}

.next_theme_inner .next_date_box::before, .next_theme_inner .next_date_box::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 0.4rem solid #000;
    padding: 0 0 10%;
}

.next_theme_inner .next_date_box::before {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 0 2.4%;
    padding: 0;
}

.next_theme_inner .next_theme_list {
    background: url(../images/line_dot.png) repeat-x left bottom;
    background-size: 3.4% auto;
    padding: 0 0 8%;
    margin: 0 0 8%;
}

.next_theme_inner .next_theme_list li {
    color: #58800a;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.5;
    padding: 0 0 0 0.7em;
    margin: 0 0 4% 1.2em;
    text-indent: -0.7em;
    position: relative;
}

.next_theme_inner .next_theme_list li:last-child {
    margin-bottom: 0;
}

.next_theme_inner .next_theme_list li:before {
    content: "●";
    display: inline-block;
    width: 0.7em;
    color: #e6311a;
}

.next_theme_inner .next_theme_list li p {
    color: #333;
    font-size: 1.1rem;
    font-weight: normal;
    line-height: 1.5;
    padding: 0 0 0 0.7em;
    margin: 1% 0 4% 0.8em;
    text-indent: -0.7em;
    position: relative;
}

.next_theme_inner .next_theme_list li p:before {
    content: "―";
    display: inline-block;
    width: 0.7em;
}

.next_theme_inner .next_cast {
    padding: 0 0 0 3%;
}

.next_theme_inner .next_cast dt {
    position: relative;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    margin: 0 0 2%;
}

.next_theme_inner .next_cast dt:before {
    content: "■";
    display: inline-block;
    width: 1.5em;
    color: #e6311a;
    font-size: 0.95rem;
}

.next_theme_inner .next_cast dd {
    font-size: 0.97rem;
    line-height: 1.5;
    margin: 0 0 5% 1.5em;
}

.next_date_box_subttl {
    margin: 0 3.64% 8%;
    padding: 5% 10%;
    background-color: #58800a;
    color: #fffce8;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}

.next_cast .next_date_box_subttl {
    margin: 3% 0;
}

@media screen and (min-width:768px){
	.next {
        background: url(../images/bg_content_pc.png) repeat-x center bottom #e6311a;
        background-size: 7.27% auto;
    }

    .sec_ttl {
        width: 93.09%;
        background: url(../images/bg_ttl_pc.png) no-repeat left top;
        background-size: 100% auto;
        padding: 20% 0 2%;
        margin: -6.55% auto 0;
        right: 0;
    }

    .sec_ttl img {
        width: 41.41%;
    }

    .next_theme_box {
        width: 93.09%;
    }

    .next_theme_box::before, .next_theme_box::after {
        padding-top: 0.98%;
        background: url(../images/bg_makimono1_pc.png) no-repeat left top;
        background-size: 100% auto;
    }

    .next_theme_box .next_theme_bg {
        width: 100%;
        padding: 0;
        background: url(../images/bg_makimono2_pc.png) repeat-y left top;
        background-size: 100% auto;
    }

    .next_theme_box .next_theme_bg2 {
        width: 92.19%;
        margin: 0 0 0 4.88%;
        padding: 1.47%;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: url(../images/bg_makimono3_pc.png) repeat-y left top;
        background-size: 100% auto;
    }

    .next_theme_box .next_theme_bg .next_theme_inner {
        padding: 1.6% 5.47% 5.47%;
        background: url(../images/bg_white.png) repeat left top;
        background-size: 31.75% auto;
    }

    .next_theme_inner .next_date_box {
        margin: 0 0 5.5%;
        padding: 3.77% 0 5.44%;
        background: url(../images/bg_date.png) repeat left top;
        background-size: 100% auto;
        font-size: 2.4rem;
    }

    .next_theme_inner .next_date_box::before, .next_theme_inner .next_date_box::after {
        display: none;
    }

    .next_theme_inner .next_theme_list {
        background-size: 1.1% auto;
        padding: 0 0 5.3%;
        margin: 0 0 5.3%;
    }

    .next_theme_inner .next_theme_list li {
        margin: 0 0 1% 1.6em;
        font-size: 1.7rem;
    }

    .next_theme_inner .next_theme_list li:before {
        position: relative;
        top: -1px;
    }

    .next_theme_inner .next_theme_list li p {
        font-size: 1.5rem;
        margin: 0.5% 0 0 0.8em;
    }

    .next_theme_inner .next_cast {
        padding: 0 0 0 2%;
    }

    .next_theme_inner .next_cast dt {
        font-size: 1.5rem;
        margin: 0 0 0.5%;
    }

    .next_theme_inner .next_cast dt:before {
        font-size: 1.5rem;
    }

    .next_theme_inner .next_cast dd {
        font-size: 1.5rem;
        margin: 0 0 2% 1.5em;
    }
    
    .next_date_box_subttl {
        margin: 0 2.46% 3%;
        padding: 2% 2% 1.5%;
        font-size: 1.9rem;
    }
    
    .next_cast .next_date_box_subttl {
        margin: 1% 0;
    }
}

@media screen and (min-width:1100px){
    .next {
        background: url(../images/bg_content_pc.png) repeat-x center bottom #e6311a;
        background-size: 80px auto;
    }

    .next_theme_box {
        width: 1024px;
    }
}

/* #backnumber
---------------------------------------------------------- */
.backnumber_bnr {
    padding: 0 0 4px;
    position: relative;
}

.backnumber_bnr::before, .backnumber_bnr::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 2px solid #000;
    padding: 0 0 9.28%;
}

.backnumber_bnr::before {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
}

.backnumber_bnr a {
    display: block;
    width: 90.54%;
    margin: 0 auto;
}

.backnumber_list_ttl {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 5.57% 0;
}

.backnumber_list {
    width: 92.76%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.backnumber_list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 48%;
    margin: 0 4% 4% 0;
}

.backnumber_list li:nth-child(even) {
    margin-right: 0;
}

.backnumber_list li:last-child {
    margin-right: 0;
}

.backnumber_list li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    padding: 15.2% 0;
    background: url(../images/btn_backnumber_link1.png) no-repeat left top, url(../images/btn_backnumber_link2.png) no-repeat left bottom #58800a;
    background-size: 100% auto;
}

@media screen and (min-width:768px){
    .backnumber_bnr {
        padding: 0 0 3px;
    }

    .backnumber_bnr::before, .backnumber_bnr::after {
        border-width: 1px;
    }

    .backnumber_bnr::after {
        padding: 0 0 3.69%;
    }

    .backnumber_bnr a {
        width: 100%;
        position: relative;
    }

    .backnumber_bnr a::before, .backnumber_bnr a::after {
        content: "";
        display: block;
        width: 100%;
        padding-top: 13.51%;
        background: url(../images/bnr_mydo_pc.png) no-repeat left top;
        background-size: 100% auto;
    }

    .backnumber_bnr a::after {
        background: url(../images/bnr_mydo_pc_hover.png) no-repeat left top;
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .backnumber_bnr a:hover::after {
        opacity: 1;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .backnumber_bnr a img {
        display: none;
    }

    .backnumber_list_ttl {
        font-size: 1.9rem;
        padding: 3.69% 0;
    }

    .backnumber_list {
        width: 100%;
    }

    .backnumber_list li {
        width: 22.97%;
        margin: 0 2.7% 0 0;
    }

    .backnumber_list li:nth-child(even) {
        margin: 0 2.7% 0 0;
    }

    .backnumber_list li:last-child {
        margin: 0;
    }

    .backnumber_list li a {
        padding: 15% 0;
        font-size: 1.4rem;
        line-height: 1.6;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .backnumber_list li a:hover {
        background-color: #000;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }
}

@media screen and (min-width:1100px){

}

/* .news
---------------------------------------------------------- */
.news {
    background: #e6311a;
    background-size: 100% auto;
}

.news .inner {
    padding: 43.5% 0 13.33%;
}

.news .news_box {
    width: 86.67%;
    margin: 0 auto;
}

.news .news_box .news_list {

}

.news .news_box .news_list li {
    margin: 0 0 1.54%;
}

.news .news_box .news_list li a {
    display: block;
    padding: 3% 7%;
    border: 0.4rem solid #000;
    background: url(../images/bg_white.png) repeat left top;
    background-size: 30.77% auto;
    color: #58800a;
    font-size: 1.2rem;
    line-height: 1.4;
    text-decoration: none;
    position: relative;
}

.news .news_box .news_list li a .news_txt {
    font-weight: bold;
}

.news .news_box .news_list li a .news_date {
    display: block;
    color: #e6311a;
    font-size: 1.05rem;
    font-weight: bold;
    text-align: right;
}

.news .news_box .news_list li a::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 1.8rem 1.8rem;
    border-color: transparent transparent #000 transparent;
    position: absolute;
    right: -1px;
    bottom: -1px;
}

@media screen and (min-width:768px){
    .news .inner {
        padding: 18.73% 0 4.55%;
    }

    .news .news_box {
        width: 93.09%;
    }

    .news .news_box .news_list li {
        margin: 0 0 0.98%;
    }

    .news .news_box .news_list li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 2.2% 5% 2%;
        border: 0.5em solid #000;
        font-size: 1.6rem;
    }

    .news .news_box .news_list li a::after {
        border-width: 0 0 1em 1em;
    }

    .news .news_box .news_list li a .news_txt {
        display: block;
        width: 85%;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }

    .news .news_box .news_list li a .news_date {
        width: 15%;
        font-size: 1.4rem;
    }

    .news .news_box .news_list li a:hover .news_txt {
        color: #333;
        -webkit-transition: 0.2s ease;
        transition: 0.2s ease;
    }
}

@media screen and (min-width:1100px){
    .news .inner {
        padding: 206px 0 50px;
    }
}

/* .last_sec
---------------------------------------------------------- */
@media screen and (min-width:768px){
    .news.last_sec .inner {
        padding: 17.82% 0 4.55%;
    }
}

@media screen and (min-width:1100px){
    .news.last_sec .inner {
        padding: 196px 0 50px;
    }
}