﻿@charset "utf-8";

/*////////////////////////////////////////////////////////

/css/character/style.css

/////////////////////////////////////////////////////////*/
/* ----------------------------------------------- 
	
	1: Font 

	2: contents
	
	3: rilakkuma　sumikko
	
 ----------------------------------------------- */

/* --------------------------------------------
1: Font
-------------------------------------------- */

/* --------------------------------------------
2: contents
-------------------------------------------- */

/* キャラクター一覧 */
#character_wrapper .ttl img{width: 100%;margin: 1em auto;}
.character_name{font-size: 1.2rem;text-align: center;display: inline-block;margin: 0 auto;}

.character_in li{display: inline-block;width: calc((100% - 1.5rem) /6);padding: 1em .5em;box-sizing: border-box;vertical-align: top;text-align: center;}
.character_in li img{width: 100%;}
#character_wrapper .minute{background-color: #ffe9e9;display: table;padding: .5em;margin: 1rem auto;border-radius: 10px;font-weight: bold;font-size: 1.2rem;}
#character_wrapper .minute br{display: none;}
@media only screen and (max-device-width: 0), screen and (max-width: 500px){#character_wrapper .minute br{display: block;}}
@media only screen and (max-device-width: 0), screen and (max-width: 900px){
.character_in li{width: calc((100% - 1.1rem) /5);}
}
@media only screen and (max-device-width: 0), screen and (max-width: 768px){
.character_in li{width: calc((100% - 1.1rem) /4);}
}

@media only screen and (max-device-width: 0), screen and (max-width: 500px){
.character_in li{width: calc((100% - 1.1rem) /2);}
#character_wrapper .minute{text-align: center;}
}

.pagination li.pre a,.pagination li.next a{background-color: inherit;}
.pagination li.pre,.pagination li.next{margin: 0;}
.pagination{text-align: center;font-size: 1.5em;}
.pagination li{display: inline-block;margin: .5em;}
.pagination li a{padding:.2em .5em;background-color:#edf7fb;border-radius: 10px;}
.pagination li span{padding:.2em .5em;font-weight: bold;background-color:#d1eef8;border-radius: 10px;}

.popular{text-align: right;}
.popular p{background-color: #d0edf7;border-radius: 6px;padding: .5em;display: inline-block;}
select_wrap{float: right;}
#select{display: inline-block;width: 100%;}
.select_wrap{float: right;}
.select{display: inline-block;vertical-align: middle;}
.custom-select-wrapper{position: relative;display: inline-block;user-select: none;}
.custom-select-wrapper select{display: none;}
.custom-select{position: relative;display: inline-block;margin: 1em;}
.custom-select-trigger{position: relative;display: block;padding:1em 3rem 1em 1rem;font-size: 1.2rem;color: #fff;background:#6fcbeb;border-radius: 10px;cursor: pointer;width: 9rem;font-weight: bold;}
.custom-select-trigger:after{position: absolute;display: block;content: '';width: 10px; height: 10px;top: 50%; right:1rem;margin-top: -3px;
border-bottom: 1px solid #fff;border-right: 1px solid #fff;transform: rotate(45deg) translateY(-50%);transition: all .4s ease-in-out;transform-origin: 50% 0;}

.custom-select.opened .custom-select-trigger:after {margin-top: 3px;transform: rotate(-135deg) translateY(-50%);}
.custom-options {position: absolute;display: block;top: 100%; left: 0; right: 0;min-width: 100%;margin: 15px 0;border: 1px solid #b5b5b5;border-radius: 10px;box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0,.07);background: #fff;transition: all .4s ease-in-out;opacity: 0;visibility: hidden;pointer-events: none;transform: translateY(-15px);z-index: 10;}
.custom-select.opened .custom-options {opacity: 1;visibility: visible;pointer-events: all;transform: translateY(0);}
.custom-options:before {position: absolute;display: block;content: '';bottom: 100%; right: 25px;width: 7px; height: 7px;margin-bottom: -4px;border-top: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;background: #fff;transform: rotate(45deg);transition: all .4s ease-in-out;}
.option-hover:before {background: #f9f9f9;}
.custom-option {position: relative;display: block;padding: 0 1em;border-bottom: 1px solid #b5b5b5;color:#405d6a;line-height:4rem;cursor: pointer;transition: all .4s ease-in-out;}
.custom-option:first-of-type {border-radius: 4px 4px 0 0;}
.custom-option:last-of-type {border-bottom: 0;border-radius: 0 0 4px 4px;}
.custom-option:hover,.custom-option.selection {background: #6fcbeb;color: #FFF;}

.select_form{display: inline-block;vertical-align: middle;}
.search_container{box-sizing: border-box;padding:.5rem;border-radius:50px;overflow: hidden;background: #FFFFFF;border: 1px solid #6fcbeb;display: table;}
.search_container input[type="text"]{border: none;height: 2.0em;background: #FFFFFF;display: table-cell;}
.search_container input[type="text"]:focus {outline: 0;}
.search_container input[type="submit"]{cursor: pointer;font-family: FontAwesome;font-size:1.7rem;border: none;background: none;color:#6fcbeb;display: table-cell;outline : none;}
.search_container ::-webkit-input-placeholder {color: #fff;}

@media only screen and (max-device-width: 0), screen and (max-width: 500px){
.select_wrap{float: none;}
#select{margin: 1em auto 0 auto;text-align: center;font-size: 1.7rem;}
.search_container{text-align: left;margin: 0 auto;display: flex;
    width: 100%;
    box-sizing: border-box;}
.select_form{display: flex;}
.search_container input[type="text"]{width: 23rem;box-sizing: border-box;}
.select {margin: 0 auto;display:grid !important;width: 80%;font-size: 1.7rem;font-weight: bold;}
.custom-select-trigger{padding: .4em 3rem .4em 1rem;width: 14rem;font-size: inherit;}
}

/* キャラクターページ */

#character_introduction{margin: 1em auto;}
.character_introductionin{padding: 0 1em;text-align: center;}
.character_introduction_name{font-size: 2rem;font-weight: bold;}
.character_introduction_release{margin: .5rem;}
.character_introduction_sentence{font-size: 1.3rem;line-height: 2rem;width: 80%;margin: 0 auto;}

.flex-direction-nav a{color:rgb(255 255 255 / 0%) !important;}
.flexslider2 .slides{display: none;}
.flexslider2 .flex-viewport .slides{display: block !important;text-align: center;}
.character_sliderin{position: relative;margin:0 auto 2rem auto;padding: 1rem;box-sizing:border-box;}
.flexslider2 .slides li{box-sizing: border-box;}
.flexslider2 .flex-control-nav{bottom: -.5rem;width: 62%;margin: 0 auto;left: 0;right: 0;display: none;}
.flexslider2 .flex-direction-nav{height:auto;}

.official_bannerin{text-align: center;}
.official_bannerin li{display: inline-block;margin: .5rem;}
.official_bannerin li a{display: block;overflow: hidden;}
.official_bannerin li a img{width: 100%;}

.common_bannerin{text-align: center;}
.common_bannerin li{display: inline-block;margin: .5rem;}
.common_bannerin li a{display: block;overflow: hidden;}
.common_bannerin li a img{width: 100%;}

.character_lists{text-align: center;margin-top: 1rem;}
.character_lists a{background-color: #6fcbeb;display: inline-block;margin: 0 auto;padding: .5rem;border-radius: 7px;color: #FFF;}


@media only screen and (max-device-width: 0), screen and (max-width: 500px){
.flexslider2 img{width: 100%;}
.official_bannerin li{margin: .5rem auto;width: calc((100% - 2.5rem) /2);}
}

.slick-prev,.slick-next{width: 51px !important;height: 51px !important;z-index: 10;}
.slick-prev{left: 0 !important;}
.slick-next{right: 0 !important;}
.slick-prev:before,.slick-next:before{width: 51px;height: 51px;outline: 0;content:' ' !important;display: block;}
.slick-prev:before{background: url(../../img/top_slider_prev.png) no-repeat;background-size: contain;}
.slick-next:before{background: url(../../img/top_slider_next.png) no-repeat;background-size: contain;}

.multiple-items .slick-slide img {max-width: 300px;width: 100%;}
.slick-list {width: 85%;margin: 0 auto !important;}

@media only screen and (max-device-width: 0), screen and (max-width: 768px){
.slick-prev,.slick-next{width: 40px !important;height: 40px !important;}
.slick-prev{left: -.5rem !important;}
.slick-next{right: -.5rem !important;}
.slick-prev:before, .slick-next:before{height: 40px;max-width: 40px;}
}

@media only screen and (max-device-width: 0), screen and (max-width: 500px){
.slick-prev,.slick-next{width: 25px !important;height: 25px !important;}
.slick-prev:before, .slick-next:before{height: 25px;max-width: 25px;}

}

.character_sns{margin: 0 auto;text-align: left;width: 30%;}
.character_sns li{margin: .5em;display:flex;align-items: center;}
.character_sns li a{display: inline-block;vertical-align: middle;margin-right: .5rem;}
.character_sns li span{vertical-align: middle;}

@media only screen and (max-device-width: 0), screen and (max-width: 500px){
.character_sns{width: 100%;}
.character_sns li a img{width: 100%;max-width: 42px;}
.character_sns li span{display: inline-block;width: 80%;}
}
@media only screen and (max-device-width: 0), screen and (max-width: 768px){
.character_sns{width: 90%;}
}

/* --------------------------------------------
3: rilakkuma　sumikko
-------------------------------------------- */
#subnavi{margin: 0 auto;padding: .5rem;}
.subnavi_in ul{margin: 0 auto;text-align: center;width: 100%;display: flex;}
.subnavi_in li{border-radius: 10px;display: block;width: calc((100% - 8em) /6);padding: 1em .5em;box-sizing: border-box;display: inline-block;margin: .5em; vertical-align: top;    width: calc(100% /6);}
.subnavi_in li a{display: block;}
.subnavi_in li img{display: block;margin:0 auto .5rem auto;}
.subnavi_in li:hover{cursor: pointer;opacity: .8;}

#character_news{width: 100%;margin: 1em auto 0 auto;text-align: center;}
.character_news_wrapperin{width: 100%;position: relative;}
.character_newsin{width: 70%;margin:auto;}
.character_newsin h2{margin: 0 auto;}
.character_newsin h2 img{width: 100%;}
.h2_news_ttl_bg{width: 100%;height: 2.98%;display: block;margin: 0 auto;}

#news{width: 100%;margin: 1em auto 0 auto;text-align: center;}
.news_top:after {content: '';width: 100%;margin: 0 auto;background: url(../../img/news_line.png);background-repeat: repeat-x;background-position: bottom;visibility: inherit;height: 8px;}
.news_top{position: relative;}
.news_top .character01{position: absolute;bottom: 0;left: .5em;width: 27%;z-index: 5;}
.news_top .character01 img{width: 100%;    max-width: 365px;}
.news_top .character02{position: absolute;bottom: 0;right: .5em;width: 27%;z-index: 5;}
.news_top .character02 img{width: 100%;    max-width: 365px;}
.news_top img{vertical-align: bottom;}
.newsin{z-index: 3;position: relative;margin-top: -5px;width:100%;
background-image: linear-gradient(#f6fbfd 2px, transparent 0),
                    linear-gradient(90deg, #f6fbfd 2px, transparent 0),
                    linear-gradient(#f6fbfd 1px, transparent 0),
                    linear-gradient(90deg, #f6fbfd 1px, transparent 0);
background-size: 40px 40px, 40px 40px, 20px 20px, 20px 20px;background-color: #FFF;margin: 0 auto;
}
.newsin:after{content: '';background: url(../../img/news_line.png);background-repeat: repeat-x;background-position: bottom;width:100%;visibility: inherit;height: 8px;}

.news_list{max-width: 1600px;padding:1em 0;margin: 0 auto;}
#entry_list_more li{width:calc((100% - 7em) / 5 );display: inline-block;margin: .5em;text-align: left;vertical-align: top;}

#entry_list_more li .news{color:#ff6e6e;font-family: font_bold;}
#box_img a{display: block;overflow: hidden;}
#box_img img{transition: all 0.6s ease 0s;}
#box_img img:hover{cursor: pointer;transform: scale(1.1, 1.1);}
#entry_list_more li img{height: 100%;max-height: 300px;width: 100%;object-fit:contain;}
#more_btn{margin-top: 1em;}
#more_btn img{max-width: 142px;width: 100%;cursor: pointer;}
#close_btn{margin-top: 1em;}
#close_btn img{max-width: 142px;width: 100%;cursor: pointer;}
.news_top_time{padding: .5em;}
.title{display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;overflow: hidden;padding: 0 .5em;}

#sub3{margin: 1em auto;}
#sub3 ul{width: 100%;margin: 0 auto;text-align: center;}
#sub3 li{border-radius: 10px;display: block;padding: 1em .5em;box-sizing: border-box;display: inline-block;margin: .3em; vertical-align: top;overflow: hidden;width: calc((100% - 5em) /6);}
#sub3 li a{display: block;}
#sub3 li img{display: block;margin: 0 auto;width: 100%;height: auto;}
#sub3 li:hover{cursor: pointer;opacity: .8;}

#sub4{width: 100%;padding: 1em;box-sizing: border-box;text-align: center;}
.sub4in{display: inline-block;width: 100%;margin: 1em auto;}
#sub4 .sub4_left{width:70%;display: inline-block;}
#sub4 .sub4_left .twitter{display: inline-block;width: 48%;}
#sub4 .sub4_left .facefook{display: inline-block;width: 48%;margin-left: 1em;}
#sub4 .sub4_left .facefook iframe{width: 100%;}
#sub4 .sub4_right{width:20%;display: inline-block;}
#sub4 .sub4_right img{width: 100%;}

.movie_youtube{margin: 2em auto;text-align: center;width: 70%;}
.movie_youtube iframe{width: 100%;}

.character_sns_rilakkuma_sumikko{margin: 0 auto;text-align: center;width: 30%;display: flex;justify-content: center;}
.character_sns_rilakkuma_sumikko li{margin: .5em;/*display: inline-block;*/border-radius: 50px;padding: .1rem .2rem;}
.character_sns_rilakkuma_sumikko li a{display: inline-block;vertical-align: middle;}
.character_sns_rilakkuma_sumikko li span{display: inline-block;}
.character_sns_rilakkuma_sumikko li img{width:100%;}

.banner_ensemble{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.banner_ensemble li img{
	width: 95%;
	border:1px solid #ccc;
}

@media only screen and (max-device-width: 0), screen and (max-width: 768px){
.header_logo_rlk_smg{width: 100%;}
.header_character_left{display: none !important;}
.character_sns_rilakkuma_sumikko {width: 90%;}
.banner_ensemble{
display: block;
}
.banner_ensemble li img{
	width: 95%;
	border:1px solid #ccc;
}
}

@media only screen and (max-device-width: 751px), screen and (max-width: 768px){
#entry_list_more li{width: calc((100% - 2.5em) / 2 );}
#more_btn img{width: 30%;}
#close_btn img{width: 30%;}

.sns{display: none;}
.modalWrapper{width:90%;padding: 5em 0;}
.subnavi_in li{width: calc((100% - 3em) /3);margin: 0.3em;}
.subnavi_in ul{font-size: 1.2rem;display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;justify-content: center;}
.subnavi_in li img{width: 50%;}

}

@media only screen and (max-device-width: 0), screen and (max-width: 500px) {
#searchform{padding: 0 .5em;box-sizing: border-box;}
#keywords{width: 70%;}
#searchBtn{width: 9%;margin-left: .5em;}
.character_newsin{width: 100%;}

#sub3 li{width: calc((100% - 3em) /3);margin: .3em;border-radius: 0;padding: 0;}

.sub4in{display: block;}
#sub4 .sub4_left {width: 100%;display: block;margin: 0 auto;}
#sub4 .sub4_left .twitter{display: block;width: 90%;text-align: center;margin: 0 auto 15px;overflow: auto;}
#sub4 .sub4_left .facefook{display: block;width: 90%;text-align: center;margin: 0 auto;}
#sub4 .sub4_right {width: 60%;display: block;margin: 1em auto;}

.movie_youtube{position: relative;width: 90%;padding-top: 56.25%;}
.movie_youtube iframe{position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;}

.character_sns li{margin: .2em;}

}

@media only screen and (max-device-width: 0), screen and (max-width: 400px) {
.news_wrapper{margin-top: 0;}
}






/* --------------------------------------------
3: Responsive
-------------------------------------------- */


