@charset "utf-8";
/* Contents Detail */
.heading{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 80px;}

@media screen and (max-width: 768px){
    .heading{margin-bottom: 50px;}    
}

.detail{width: 70%; border-radius: 10px; background: #fff; box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.2); padding: min(4vw,50px);}
.detail [class*="topic"]{line-height: 1.1; font-weight: bold; margin-bottom: 10px;}
.detail [class*="topic"]:before{content: ""; width: 1em; height: 1em; margin-right: 8px; display: inline-block; position: relative; top: 1px;}
.detail .topic01:before{background: url("../img/common/ic-book.svg") no-repeat center center/100% auto;}
.detail .topic02:before{background: url("../img/common/ic-raido.svg") no-repeat center center/100% auto;}
.detail .topic03:before{background: url("../img/common/ic-movie.svg") no-repeat center center/100% auto;}

.detail .m-tit1{margin-bottom: 10px;}
.detail .name{font-size: 2rem; line-height: 1.6;}
.detail .date{font-size: 2.2rem; line-height: 1.6; font-weight: bold;}
.detail .inner{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; width: 100%; margin-top: 30px;}

.detail .img{width: 37.84%; position: relative; line-height: 1;}
.detail .img img{width: 100%;}
.detail [class*="cate"]{min-width: 5.5em; padding: 4px; border: 1px solid #fff; text-align: center; position: absolute; top: 12px; right: 12px; color: #fff; font-size: 1.4rem; line-height: 1.2; font-weight: bold; z-index: 10;}
.detail .cate01{background: #2AA4E6;}
.detail .cate02{background: #E57139;}

.detail .photo{border-radius: 10px; overflow: hidden;}

.detail .slider-for{border-radius: 10px; overflow: hidden; margin-bottom: 10px;}

.detail .slider-nav{display: flex; flex-wrap: wrap; margin: 0 -2px}
.detail .slider-nav .slick-slide{width: calc(25% - 4px) !important; margin: 0 2px 4px;}

.detail .slider-nav .thumb{border-radius: 4px; overflow: hidden; position: relative; border: 1px solid #fff; cursor: pointer;}
.detail .slider-nav .thumb:after{content: ""; padding-bottom: 100%; display: block;}
.detail .slider-nav .thumb img{width: 100%; object-position: top; position: absolute; top: 0; left: 0;}
.detail .slider-nav .slick-current .thumb{border: 1px solid #222;}

.detail .slider-nav .slick-track, 
.detail .slider-nav .slick-list {width: 100% !important;
-webkit-transform: translate3d(0, 0, 0) !important;
-moz-transform: translate3d(0, 0, 0) !important;
-ms-transform: translate3d(0, 0, 0) !important;
-o-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;}

.detail .info{width: 55.41%; margin-top: -8px;}
.detail .info-price span{font-size: 2.6rem; line-height: 1; font-weight: bold; display: inline-block;}
.detail .info-publish{font-size: 1.6rem; margin-top: 10px;}

.detail .info-btn{max-width: 768px; margin-top: 25px;}
.detail .info-btn li{margin-bottom: 10px;}
.detail .info-btn li:last-of-type{margin-bottom: 20px;}
.detail .info-btn a{height: 56px;}
.detail .info-btn span{width: 100%; font-size: 1rem;}

.detail .info-btn a.btn-cart:before{content: ""; background: #fff; width: 16px; height: 20px; margin-right: 8px;
mask: url("../img/common/ic-cart.svg") no-repeat center center/100% auto; -webkit-mask: url("../img/common/ic-cart.svg") no-repeat center center/100% auto;}
.detail .info-btn a.btn-cart:hover:before{background: #4B4594;}

.detail .info-addbox a{width: 220px; height: 46px; border: 1px solid #4B4594; color: #4B4594; border-radius: 46px; display: flex; justify-content: center; align-items: center; background: #fff; font-size: 1.6rem; font-weight: bold; text-align: center; transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}
.detail .info-addbox a:before{content: ""; background: #4B4594; width: 18px; height: 16px; margin-right: 8px; transition: .4s cubic-bezier(0.37, 0, 0.63, 1); mask: url("../img/common/ic-box.svg") no-repeat center center/100% auto; -webkit-mask: url("../img/common/ic-box.svg") no-repeat center center/100% auto;}
.detail .info-addbox a:hover{background: #4B4594; color: #fff;}
.detail .info-addbox a:hover:before{background: #fff;}

.detail .intro{font-size: 1.6rem; margin-top: 30px;}
.detail .intro-tit{color: #4B4594; font-size: 2.6rem; line-height: 1.6; font-weight: bold; margin-bottom: 5px;}
.detail .intro-txt p{margin-bottom: 1em;}

.detail .intro-txt h1{font-size: 2.8rem;}
.detail .intro-txt h2{font-size: 2.6rem;}
.detail .intro-txt h3{font-size: 2.4rem;}
.detail .intro-txt h4{font-size: 2.2rem;}
.detail .intro-txt h5{font-size: 2rem;}
.detail .intro-txt h6{font-size: 1.8rem;}

@media screen and (max-width: 1200px){
    .detail{width: 100%; margin-bottom: 50px;}    
}

@media screen and (max-width: 768px){
    .detail{padding: 25px 25px 30px; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2);}    
    .detail .inner{margin-top: 25px;}
    .detail .img{width: 100%; margin-bottom: 25px;}
    .detail .info{width: 100%; margin: 0;}    
    .detail .name{font-size: 1.8rem;}
    .detail .date{font-size: 1.9rem;}
    .detail [class*="cate"]{top: 8px; right: 8px; font-size: 1.2rem; padding: 2px 0;}    
    .detail .intro-tit{font-size: 2.1rem;}
    
    .detail .intro-txt h1{font-size: 2.6rem;}
    .detail .intro-txt h2{font-size: 2.4rem;}
    .detail .intro-txt h3{font-size: 2.2rem;}
    .detail .intro-txt h4{font-size: 2rem;}
    .detail .intro-txt h5{font-size: 1.8rem;}
    .detail .intro-txt h6{font-size: 1.6rem;}
    
    .detail .info-addbox a{font-size: 1.4rem; height: 42px; margin: 0 auto;}
}

/* Sidebar */
.sidebar{width: 26%; padding: 30px; border-radius: 10px; background: #fff; box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.2);}
.sidebar-info {margin-bottom: 35px; font-size: 1.4rem; line-height: 1.8;}
.sidebar-info .img{width: 80%; max-width: 200px; border-radius: 100%; margin: 0 auto 5px; overflow: hidden;}
.sidebar-info .author{font-size: 1.6rem; line-height: 1.6; font-weight: bold;}
.sidebar-info .name{font-size: 2.4rem; line-height: 1.6; font-weight: bold;}
.sidebar-info .name span{font-size: 1.6rem;}
.sidebar-info .desc{margin-top: 12px;}

.sidebar-bnr{margin-bottom: 25px;}
.sidebar-bnr a{transition: .4s; display: inline-block;}
.sidebar-bnr a:hover{box-shadow: 0 7px 7px -7px rgba(0, 0, 0, 0.4); transform: translateY(-2px);}

.sidebar-sns .tit{font-size: 1.8rem; line-height: 1.4; font-weight: bold; margin-bottom: 5px;}
.sidebar-sns .list{display: flex;}
.sidebar-sns .list li:not(:last-of-type){margin-right: 20px;}
.sidebar-sns .list a:hover{opacity: .8;}

@media screen and (max-width: 1200px){
    .sidebar{width: 100%; padding: 40px 50px;}    
}

@media screen and (max-width: 768px){
    .sidebar{padding: 25px 25px 30px; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2);}    
    
    .sidebar-info .name{font-size: 2.2rem;}
        
    .sidebar-bnr{text-align: center;}
        
    .sidebar-sns{text-align: center;}
    .sidebar-sns .list{justify-content: center;}
}

/* Keyword */
.keyword{margin-bottom: 80px;}
.keyword-list li{margin: 0 12px 6px 0; display: inline-block; vertical-align: top;}
.keyword-list li a{font-size: 1.3rem; line-height: 1.6; font-weight: bold; color: #6F6F6F; background: #EBE9E6; padding: 2px 8px; display: block; transition: .4s;}
.keyword-list li a:hover{background: #6F6F6F; color: #fff;}

@media screen and (max-width: 768px){
    .keyword{margin-bottom: 50px;}
}

/* Contents List */
.contents{padding-bottom: 30px;}
.contents-list{display: flex; flex-wrap: wrap; align-items: flex-start;}
.contents-list .item{position: relative; padding-bottom: 45px;}
.contents-list .img{border-radius: 10px; overflow: hidden; position: relative; line-height: 1; transition: .4s;}
.contents-list .img a:hover{opacity: .8;}

.contents-list [class*="cate"]{min-width: 5.5em; padding: 4px; border: 1px solid #fff; text-align: center; position: absolute; top: 12px; right: 12px; color: #fff; font-size: 1.4rem; line-height: 1.2; font-weight: bold;}
.contents-list .cate01{background: #2AA4E6;}
.contents-list .cate02{background: #E57139;}
.contents-list .outer{position: relative; padding: 15px 0 0 0;}
.contents-list .txt{margin-bottom: 10px;}
.contents-list .tit{font-size: 2rem; line-height: 1.6; font-weight: bold; text-decoration: underline; text-underline-offset: 0.2em; margin-bottom: 10px;}
.contents-list .inner a:hover .tit{text-decoration: none; color: #4B4594;}

.contents-list .hashtag{font-size: 1.3rem; line-height: 1.6; font-weight: bold; color: #6F6F6F;}
.contents-list .hashtag a:not(:last-of-type){margin-right: 1em;}
.contents-list .hashtag a{text-decoration: underline;}
.contents-list .hashtag a:hover{text-decoration: none;}

.contents-list .btn{position: absolute; bottom: 0; right: 0;}
.contents-list .btn a{width: 170px; height: 34px; border: 1px solid #4B4594; background: #fff; text-align: center; font-weight: bold; font-size: 1.6rem; display: flex; justify-content: center; align-items: center; border-radius: 34px; color: #4B4594; transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}
.contents-list .btn a:after{content: ""; position: absolute; top: 50%; right: 10px; width: 14px; height: 14px; margin-top: -7px; background: #4B4594; mask: url("../img/common/ic-arrow.svg") no-repeat top left/100% 100%; -webkit-mask: url("../img/common/ic-arrow.svg") no-repeat top left/100% 100%; transition: .4s cubic-bezier(0.37, 0, 0.63, 1);}

.contents-list .btn a:hover{background: #4B4594; color: #fff;}
.contents-list .btn a:hover:after{background: #fff; right: 5px;}

.contents-list .item.soon{padding-bottom: 0;}
.contents-list .item.soon a{pointer-events: none;}
.contents-list .item.soon .outer{opacity: .2;}
.contents-list .item.soon .img:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.8); z-index: 1; display: block;}
.contents-list .item.soon .img:after{content: "COMING SOON"; font-size: min(2.8vw,3rem); line-height: 1; font-weight: bold; font-family: "Afacad", sans-serif; letter-spacing: 0.04em; background: #fff; color: #4B4594; display: flex; justify-content: center; align-items: center;
position: absolute; top: 50%; right: 0; left: 0; width: 90%; max-width: 307px; height: 2.13em; margin: 0 auto; border-radius: 2.2em;
transform: translateY(-50%); text-align: center; z-index: 7; box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.3); opacity: 1;}
.contents-list .item.soon .btn{display: none;}

.contents-list .item.end{padding-bottom: 0;}
/*
.contents-list .item.end a{pointer-events: none;}
.contents-list .item.end .outer{opacity: .2;}
*/
.contents-list .item.end .img:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.8); z-index: 1; display: block;}
.contents-list .item.end .img:after{content: "このイベントは\A終了しました"; font-size: min(2.6vw,2.6rem); line-height: 1.23; font-weight: bold; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; z-index: 10; white-space:pre;}
.contents-list .item.end .btn{display: none;}

@media screen and (min-width: 769px){
    .contents-list .item{width: 30%; margin: 0 5% 60px 0;}
    .contents-list .item:nth-of-type(3n){margin-right: 0;}
}

@media screen and (max-width: 768px){
    .contents-list .item{width: calc(50% - 10px); margin: 0 20px 40px 0;}
    .contents-list .item:nth-of-type(2n){margin-right: 0;}
    
    .contents-list .img{border-radius: 6px;}
    .contents-list [class*="cate"]{top: 8px; right: 8px; font-size: 1.2rem; padding: 2px 0;}
    
    .contents-list .tit{font-size: 1.6rem;}
    .contents-list .txt{font-size: 1.4rem;}
    .contents-list .hashtag{font-size: 1.1rem;}
    .contents-list .btn a{width: 120px; height: 30px; font-size: 1.4rem; padding-right: 5px;}
    .contents-list .btn a:after{width: 12px; height: 12px; margin-top: -6px;}
    
    .contents-list .item.soon .img:after{font-size: min(4.6vw,3rem);}
    .contents-list .item.end .img:after{font-size: min(4.6vw,3rem);}
}


/* contents/detail.html (Video)*/
.product-btn{display: flex; justify-content: center; margin: 50px 0;}
.product-btn li{margin: 0 10px;}

@media screen and (max-width: 768px){
    .product-btn{margin: 40px 0; padding: 0 5px;}
    .product-btn li{margin: 0 5px;}
}