@charset "utf-8";
/*
Theme Name: F-CHAN SP
Version: 2023.02.10
*/
/*---------------------------------------------------------
reset
---------------------------------------------------------*/
html{
	font-size: 62.5%;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: "Hiragino Sans", "Meiryo", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Helvetica Neue", "Helvetica", sans-serif;
	font-feature-settings: "palt";
	box-sizing:border-box;
}
.air{
	display:block;
	font-family: 'Air Americana', sans-serif;
	font-weight:300;
}
.air::first-letter{
	color:#E50065;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
img{
	width:100%;
	max-width:100%;
	height:auto;
	vertical-align: bottom;
}
_:lang(x)::-internal-media-controls-overlay-cast-button, img {
	image-rendering: -webkit-optimize-contrast;
}
a:hover img {
	opacity: 0.6;
}
body {
	background-color: #fff;
	-webkit-text-size-adjust: none;
	font-size: 1.6rem;
	font-weight:300;
	color: #000C46;
	line-height: 1.8;
	position:relative;
}
a {
	color: #000C46;
	outline: none;
	text-decoration:none;
}
a:hover{
	color:#e50065;
}
.sp {
	display: none;
}
.container{
	width:96%;
	margin:auto;
	position:relative;
}
/*---------------------------------------------------------
header
---------------------------------------------------------*/
header{
	font-size: 1rem;
	position:relative;
	padding:10px 15px;
}
header .container{
	display:flex;
	justify-content:space-between;
	align-items:end;
	width:100%;
	box-sizing: border-box;
	position:unset;
}
header h1{
	width:36%;
	z-index: 9999;
}
header h1 img{
	vertical-align: top;
}
#subbox{
	margin:0 2rem 0 auto;
}
#subbox ul{
	display:flex;
}
#subbox li:nth-child(2){
	margin:0 10px;
}
#subbox li a{
	display:flex;
	flex-direction:column;
	justify-content:end;
	font-size:.7rem;
	font-weight:600;
	text-align:center;
	height:100%;
}
#subbox li:nth-child(1) img{
	max-width:28px;
}
#subbox li:nth-child(2) img{
	max-width:28px;
}
#subbox li:nth-child(3) img{
	max-width:21px;
}
#subbox li img{
	display:block;
	margin: 0 auto;
}
#subbox li span{
	padding:5px 0;
	line-height: 1;
}
#toggle{
	width:24px;
	height:18px;
	position:relative;
	z-index:9999;
	margin-bottom: 15px;
}
/* ハンバーガーメニューの大きさ指定 */
#toggle-box {
	position: relative;
	width:24px;
	height:18px;
	cursor: pointer;
}
#toggle-box > span {
	width: 100%;
	height: 2px;
	left: 0;
	right: 0;
	margin: auto;
	display: block;
	background: #000C46;
	position: absolute;
	transition: transform .3s ease-in-out;
}
#toggle-box > span:nth-child(2){
	background:#E50065;
}
#toggle-box > span:nth-child(1) {
	top: 0;
}
#toggle-box > span:nth-child(2) {
	top: 50%;
	transform: translatey(-50%);
}
#toggle-box > span:nth-child(3) {
	bottom: 0;
}
/* ハンバーガーメニュークリックで、「×」マークにアニメーション */
.is-open #toggle-box > span:nth-child(1) {
	top: 50%;
	transform: rotate(45deg) translatey(-50%);
}
.is-open #toggle-box > span:nth-child(2) {
	width: 0;
}
.is-open #toggle-box > span:nth-child(3) {
	top: 50%;
	transform: rotate(-45deg) translatey(-50%);
	bottom:unset;
}
#nav-content {
	display: block;
	z-index: 10;
	overflow: auto;
	width: 100%;
	height: 100%;
	background: #fff;
	color: #000;
	position: fixed;
	top: 0;
	left: 0;
	transform: translateY(-100%);
	transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	padding:60px 30px;
}
header ul{
	display: block;
	height: 100%;
}
#nav-content ul li {
	margin-bottom:1em;
}
#nav-content ul li a{
	display:block;
	font-size:1.6rem;
	font-weight:600;
	padding-left:3rem;
	text-decoration:none;
}
#nav-content ul li.news > a{
	background:url("img/news.svg") no-repeat left center;
}
#nav-content ul li.column > a{
	background:url("img/column.svg") no-repeat left center;
}
#nav-content ul li.mov > a{
	background:url("img/mov.svg") no-repeat left center;
}
#nav-content ul li.game > a{
	background:url("img/game.svg") no-repeat left center;
}
#nav-content ul li.shop > a{
	background:url("img/cart.svg") no-repeat left center;
}
.is-open {
	overflow: hidden;
}
.is-open #nav-content {
	z-index: 10;
	transform: translateY(0);
}
.fw li:hover > .submenuWrap{
	display:block;
}
#nav-content ul.sub-menu li{
	position:relative;
	margin-left:1em;
}
#nav-content ul.sub-menu li a::before{
	content:"└ ";
}
#nav-content ul.sub-menu li a{
	font-size:1.4rem;
	font-weight:400;
}
/*---------------------------------------------------------
Slider
---------------------------------------------------------*/
.slides > li{
	position:relative;
}

#slider ul.slides li .ttl{
	background: rgba(0,0,0,0.5);
	border: 1px solid #fff;
	width: 94%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	margin: auto;
	padding: 0.5rem 1rem;
	z-index: 2;
}
#slider ul.slides li h2 a{
	color:#fff;
	font-size: 1.8rem;
	font-weight: 500;
}
#slider .flexslider.loading .slides ul li a{
	display:none;
}
.flexslider {
	margin: 0 ;
}
.flex-control-nav {
	bottom: 10px;
}
.flex-control-paging li a{
	width:10px;
	height:10px;
	background: #fff;
	box-shadow:none;
}
.flex-control-paging li a.flex-active {
	background: #E50065;
}
@media screen and (min-width:768px) and ( max-width:900px) {
	#slider ul.slides li h2 {
		font-size: 1.8rem;
	}
}
@media screen and (min-width:901px) and ( max-width:1100px) {
	#slider ul.slides li h2 {
		font-size: 2.4rem;
	}
}

@media screen and (min-width:1100px) and ( max-width:1200px) {
	#slider ul.slides li h2 {
		font-size: 3rem;
	}
}
@media screen and (min-width:1200px){
	#slider ul.slides li .metadata{
		bottom:20%;
	}
}
/*---------------------------------------------------------
main
---------------------------------------------------------*/
main{
	display:block;
	width:96%;
	margin:0 auto 60px;
}
/*---------------------------------------------------------
main section
---------------------------------------------------------*/
main #main_wrap{
	background:#fff;
	width:100%;
	padding:30px 10px 50px 10px;
}
main h2{
	margin-bottom:20px;
}
main h2 span{
	display:block;
	font-size:1.2rem;
	font-weight:600;
	line-height:1;
}
main h2 strong{
	font-size:4.8rem;
	line-height: 1;
}
#news,#column,#hihyo{
	margin-bottom:80px;
}
#special{
	margin-bottom:0;
}
.articles article{
	font-size: 1.4rem;
	width:32%;
	margin-bottom:20px;
}
.articles article figure{
	margin-bottom:1rem;
}
.articles article{
	display:flex;
	width:100%;
}
.articles article figure{
	width:34%;
	max-width:120px;
	margin-right:2rem;
	margin-bottom:0;
}
.articles article .meta{
	flex:1;
}
.articles article .cat_date{
	display: flex;
	justify-content: space-between;
	font-size: 1rem;
	line-height: 1;
	margin-bottom:1rem;
}
.articles article .cat_date a.cat{
	background:#E50065;
	border-radius:20px;
	color:#fff;
	padding:2px 5px;
}
.articles article h3{
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.3;
	margin-bottom: 1rem;
}
.articles article p{
	opacity:0.5;
}
p.readmore{
	margin-top:40px;
	text-align:center;
}
#special .ttl{
	display:flex;
	justify-content:space-between;
	align-items:center;
	position:relative;
	margin-bottom:30px;
}
#special .ttl strong{
	font-size:6rem;
	font-weight:200;
}
#special .ttl::before,
#special .ttl::after{
	content:"";
	background:#000C46;
	width:30%;
	height:1px;
}
#special .special-slide{
	position:relative;
}
.slick-slide{
	margin:0 10px;
}
/*---------------------------------------------------------
aside
---------------------------------------------------------*/
aside{
	width:96%;
	margin:30px auto 0;
}
aside h2 {
	text-align:center;
	margin:0;
}
/*---------------------------------------------------------
sidebar
---------------------------------------------------------*/
.googlesearch{
	margin-bottom:20px;
}
.gsib_a {
	padding: 0 5px!important;
}
.sns ul{
	display:flex;
	justify-content: center;
	margin-bottom:1.2rem;
}
.sns ul li{
	max-width:32px;
	margin: 0 2rem;
}
.sidead{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 250px;
	background: gray;
	margin: auto;
	color: #fff;
	margin-bottom:40px;
}
.ranking{
	margin-bottom:40px;
}
/*-- tab --*/
/*タブ切り替え全体のスタイル*/
.tabs {
	width: 100%;
	margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
	width: calc(100%/3);
	height: 5rem;
	border-bottom: 1px solid #E50065;
	line-height: 5rem;
	font-size: 1rem;
	text-align: center;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
	cursor:pointer;
}
.tab_item:hover {
	opacity: 0.5;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 1.5rem;
	padding-bottom:0;
	clear: both;
	overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#daily:checked ~ #daily_content,
#weekly:checked ~ #weekly_content,
#monthly:checked ~ #monthly_content {
	display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
	color: #E50065;
}
ul.rank {
	counter-reset: wpp-ranking;
}
ul.rank li{
	display:flex;
	flex-wrap:wrap;
	border-bottom:1px solid #ccc;
	padding-bottom:5px;
	margin-bottom:5px;
}
ul.rank figure{
	width:50px;
	height:50px;
}
ul.rank figure img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}
ul.rank li .ttl{
	display:flex;
	flex:1;
}
ul.rank li h3 a{
	display:block;
	font-size:1.4rem;
	font-weight:600;
	line-height: 1.5;
	vertical-align:top;
}
/* 順位を表示する記述１ */
ul.rank li .ranking-box {
	position: relative;
	padding-left: 5px;
}
/* 順位を表示する記述２ */
ul.rank li .ranking-box:before {
	content: counter(wpp-ranking, decimal);
	counter-increment: wpp-ranking;
	background:#E50065;
	color:#fff;
	border-radius:4px;
	font-size: 1.4rem;
	line-height: 1;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 20px;
	height: 20px;
	margin-right:5px;
	z-index: 1;
}
.wpp-date{
	display:block;
	width:100%;
	color:#aaa;
	font-size:1rem;
	text-align:right;
}
/*---------------------------------------------------------
Single / Page
---------------------------------------------------------*/
#main_wrap.single{
	padding:20px 0 ;
}
#main_wrap.single a{
	color:#E50065;
}
#main_wrap.single a:hover{
	color:#000C46;
}
.breadcrumb{
	background:#000C46;
	color:#fff;
	display:flex;
	flex-wrap:wrap;
	font-size:1rem;
	font-weight:400;
}
.breadcrumb.container{
	width:100%;
	padding:1rem 2%;
}
.breadcrumb a{
	color:#fff;
}
#heading{
	border-bottom:1px solid #eee;
	padding-bottom:1rem;
	margin-bottom:1rem;
}
#heading .cat_date{
	display:flex;
	justify-content:space-between;
	font-size:1rem;
	margin-bottom:1rem;
}
#heading .cat_date a{
	background:#E50065;
	border-radius:20px;
	color:#fff;
	font-weight:500;
	padding:0 10px;
}
#heading .description {
	font-size: 1.3rem;
	margin: 1rem 0;
}
#heading .rights{
	display: flex;
	flex-direction: column;
	font-size: 1rem;
	text-align: right;
}
#heading .rights span{
	display:inline-block;
	margin-left:1rem;
}
h1.entry_title{
	font-size: 2.2rem;
	font-weight: 600;
	line-height: 1.5;
}
.entry{
	margin-top:4rem;
}
.entry p{
	line-height: 1.8;
	margin-bottom: 2.5rem;
}
.photo_main {
	padding: 1em;
	margin: 1em 0;
	text-align: center;
	overflow: hidden;
	outline: 1px solid #ddd;
	border-top: 1px solid #fff;
	background: #f0f0f0;
}
.photo_zu {
	margin: 1em 0;
	padding: 7px;
	background: #eee;
	line-height: 1.3;
	box-shadow: 0 0 3px #aaa;
	font-size: 12px;
	color: #666;
}
.photo_main p,
.photo_zu p{
	font-size:1rem;
	margin-bottom: 0;
}
.entry h1{
	font-size:3.6rem;
	font-weight:700;
}
.entry h2{
	font-size:2.4rem;
	font-weight:700;
}
.entry h3{
	font-size:2.4rem;
	font-weight:500;
}
.entry h1::first-letter,
.entry h2::first-letter{
	color:#E50065;
}
.entry .nextpage{
	display:table;
	border:1px solid #000C46;
	font-size:1.3rem;
	text-align:center;
	padding:1rem 2rem;
	margin:3rem auto;
}
.entry .nextpage a{
	display:block;
}
.entry .tags{
	border-bottom:1px solid #eee;
	font-size:1.2rem;
	padding-bottom:1rem;
	margin-bottom:3rem;
}
#main_wrap.single .entry .tags a{
	display:inline-block;
	background:#E50065;
	border-radius:3rem;
	color:#fff;
	line-height:1.5;
	padding:0 1rem;
}
#main_wrap.single .entry .tags a:hover{
	opacity:0.65;
}
.pager{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}
.post-page-numbers{
	background: #000C46;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-weight:600;
	width: 3rem;
	height: 3rem;
	margin: 0 0.5rem 1rem;
}
.post-page-numbers span{
	color:#fff;
}
.post-page-numbers:hover{
	background:#E50065;
}
.post-page-numbers.current{
	background:#E50065;
	color:#fff;
}
/*---------------------------------------------------------
footer
---------------------------------------------------------*/
#from_kanzen{
	background:#f0f0f0;
	padding:20px 0 40px;
}
#from_kanzen h2{
	font-size:2rem;
	font-weight:800;
}
#from_kanzen ul{
	background:#fff;
	border-top:1px solid #000C46;
	border-bottom:1px solid #000C46;
	padding:1rem 1rem 0;
}
#from_kanzen ul li:not(:last-child){
	border-bottom:1px dashed #000C46;
	margin-bottom: 1rem;
}
#from_kanzen ul li a{
	display:flex;
	font-size:1.2rem;
	margin-bottom:1rem;
}
#from_kanzen ul li span:first-child{
	width:9em;
}
#from_kanzen ul li span:last-child{
	flex:1;
}
footer {
	width: 100%;
	background: #000C46;
	color:#fff;
	font-size: 1.2rem;
	font-weight: 300;
	padding:2rem 2% 2rem;
	box-sizing:border-box;
}
footer a{
	color:#fff;
}
footer a:hover{
	color:#E50065;
}
footer ul.container{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin:30px auto 0;
}
footer ul li{
	padding:0 1rem;
	border-right:1px solid #fff;
	margin-bottom:1rem;
}
footer ul li:last-child{
	border-right:0;
}
footer .copy{
	font-size:1rem;
	max-width:1200px;
	width:96%;
	text-align:center;
	margin:3rem auto;
}

#page_top{
	width: 38px;
	height: 38px;
	position: fixed;
	right: 36px;
	bottom: -100px;
	z-index:9999;
}

/*---------------------------------------------------------
Media Queries
---------------------------------------------------------*/


@media screen and (max-width: 767px) {

}