@charset "UTF-8";
/* CSS Document */
@media (min-width: 768px) {}
@media (max-width: 767.98px) {}





/* common */
html{ background-color: black;}
body{ position:relative; background-color: black; color: white;}
img{ max-width:100%;}
a{ transition: .3s;}
.container{ z-index: 1; position: relative;}
@media (min-width: 768px) {
.pcnone{ display: none !important;}
main{ min-width: 1054px;}
.container{ width: 1054px; max-width: inherit;}
}
@media (max-width: 767.98px) {
.spnone{ display:none !important;}
.container { padding-right: 10px; padding-left: 10px;}
.row { margin-right: -10px; margin-left: -10px;}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto{ padding-right: 10px; padding-left: 10px;}
}





/* header */
header{ position: fixed; left: 0; top: 0; z-index: 20; width: 100%;}
header,.overlayMenuBtn{ transition: 1s;}
@media (min-width: 768px) {
header{ min-width: 1054px;}
.overlayMenu,.overlayMenuBtn{ display: none;}
#header_sns{ background-color: black; position: relative; height: 50px; text-align: right; padding: 0 10px; font-size: 0; margin: 0;}
#header_sns>li{ display: inline-block; height: 50px;}
#header_sns>li>span{ display: table; width: 50px; height: 50px;}
#header_sns>li>span>a{ display: table-cell; vertical-align: middle; text-align: center;}
#header_sns>li>span>a:hover{ opacity: 0.7;}
#header_sns>li:first-child{ position: absolute; left: 10px; top: 0;}
/*#header_sns>li:first-child>span>a{ border: 2px solid red; border-radius: 50%; color: red; font-size: 38px; line-height: 1em; transform: scale(0.8,0.8);}*/
header>div{ padding-bottom: 20px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 40%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 40%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=0 );}
header>div>h1{ margin: 0; text-align: center; padding: 22px 0 6px;}
header>div>ul{ text-align: center; padding: 0; margin: 0; font-size: 0;}
header>div>ul>li{ width: 165px; display: inline-block; font-size: 16px;}
header>div>ul>li>a{ color: white; font-weight: bold; position: relative; display: inline-block; line-height: 1em; padding: 1em;}
header>div>ul>li>a:hover{ text-decoration: none;}
header>div>ul>li>a::after{ position: absolute; content: ""; display: block; width: 80px; bottom: 0; left: calc(50% - 40px); height: 5px; transform: scale(0,1); transform-origin: center; transition: .3s;}
header>div>ul:hover>li>a.active::after{ transform: scale(0,1);}
header>div>ul>li>a:hover::after,
header>div>ul>li>a.active::after,
header>div>ul:hover>li>a.active:hover::after{ transform: scale(1,1);}


header>div>ul.itoshima_2021{}
header>div>ul.itoshima_2021>li:nth-child(5){ width: 230px;}
}
@media (max-width: 767.98px) {
header ul{ display: none;}
header{ display: table; height: 80px; background-color: black;}
header>div{ display: table-row;}
header>div>h1{ display: table-cell; text-align: center; vertical-align: middle;}
header>div>h1>a>img{ width: 145.5px;}
body{ padding-top: 80px;}
.overlayMenuBtn{ position: fixed; top: 0; right: 10px; width: 50px; cursor: pointer; z-index: 30; padding-top: 30px; height: 80px;}
.overlayMenuBtn::before{ content: "MENU"; display: block; width: 100%; text-align: center; font-size: 15px; color: white; position: absolute; line-height: 1em; top: 10px;}
.overlayMenuBtn span{ display: block; height: 3px; background: white; position:absolute; width: 100%; left: 0;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;}
.overlayMenuBtn span:nth-child(1){ bottom: 47px;}
.overlayMenuBtn span:nth-child(2){ bottom: 33.5px;}
.overlayMenuBtn span:nth-child(3){ bottom: 17px;}
.open.overlayMenuBtn span{ background-color: white;}
.open.overlayMenuBtn span:nth-child(1) { bottom: 32px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);}
.open.overlayMenuBtn span:nth-child(2) { width: 0; left: 50%;}
.open.overlayMenuBtn span:nth-child(3) { bottom: 32px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);}
.overlayMenu { display: none; position: fixed; width: 100%; height: 100vh; overflow: auto; top: 0; left: 0; background-color: rgba(0,0,0,0.80); z-index: 10; padding-top: 80px;}
.overlayMenuInner { color: white;}
.overlayMenuInner .common_title_02>span::before,
.overlayMenuInner .common_title_02>span::after{ background-color: white;}
.overlayMenu ul:first-child{ padding: 0 20px 20px; list-style: none;}
.overlayMenu ul:first-child li{ border-bottom: 1px solid white;}
.overlayMenu ul:first-child li a{ color: white; font-size: 18px; display: block; line-height: 3em; padding-left: 0.5em;}

.overlayMenu ul:last-child{ padding: 0; text-align: center; list-style: none; display: flex; justify-content: center;}
.overlayMenu ul:last-child li{ width: 60px; margin: 0 10px;}
.overlayMenu ul:last-child li a{}
}





/* footer */
footer{ position: relative;}
#footer_logo{ text-align: center;}
footer ul{ padding: 0; list-style: none; text-align: center;}
footer ul a{ color: white; font-weight: bold;}
footer ul a:hover{ color: white; text-decoration: none;}
#page_top{ background-color: #e34236; z-index: 1;}
#page_top::after,
#page_top::before{ content:"";  width: 0; height: 0; border-style: solid; position: absolute; left: 50%;}
#page_top::after{ border-color: transparent transparent #ffffff transparent; z-index: 2;}
#page_top::before{ border-color: transparent transparent #e34236 transparent; z-index: 3;}
#contact_mail_btn{ text-align: center; line-height: 0;}
#contact_mail_btn>a{ color: white; font-weight: bold; font-size: 0;}
#contact_mail_btn>a:hover{ opacity: 0.7;}
#contact_mail_btn>a>span{ display: inline-block; vertical-align: middle;}
#copy{ text-align: center; color: black; background-color: white; margin: 0;}
@media (min-width: 768px) {
footer{ padding-top: 20px; min-width: 1054px; margin-top: 100px;}
#footer_logo{ position: absolute; top: 0; left: 50%; width: 120px; margin-left: -60px;}
#footer_logo img{ width: 120px; height: auto;}
footer ul{ font-size: 0; margin: 0 auto 100px; padding-left: 0;}
footer ul>li{ font-size: 14px; display: inline-block; margin: 0 30px; line-height: 1em;}
footer ul>li:first-child{ margin-left: 0;}
footer ul>li:last-child{ margin-right: 0;}
footer ul>li:nth-child(2){ margin-right: 110px;}
footer ul>li:nth-child(3){ margin-left: 110px;}

footer ul.itoshima_2021>li:nth-child(2){ margin-right: 30px;}
footer ul.itoshima_2021>li:nth-child(3){ margin-left: 30px; margin-right: 110px;}
footer ul.itoshima_2021>li:nth-child(4){ margin-left: 110px;}
footer ul.itoshima_2021>li:nth-child(5){ margin-right: 50px;}



#page_top{ width: 60px; height: 60px; position: fixed; right: 0; bottom: 0;}
#page_top::after,
#page_top::before{ border-width: 0 15px 15px 15px; margin-left: -15px; }
#page_top::after{ top: 20px;}
#page_top::before{ top: 21px;}
#contact_mail_btn{ position: absolute; top: 70px; width: 300px; left: calc(50% - 150px);}
#contact_mail_btn>a>span{ font-size: 14px; line-height: 19px; padding: 0 0.3em;}
#copy{ font-size: 8px; line-height: 60px;}
}
@media (max-width: 767.98px) {
footer{ margin-top: 20px;}
#footer_logo{ padding: 15px 0;}
#footer_logo img{ width: 125px; height: auto;}
footer ul{ display: flex; justify-content: center; margin: 0;}
footer ul li{ width: 16.66%; font-size: 7px;}
footer ul.itoshima_2021{ flex-wrap: wrap;}
footer ul.itoshima_2021 li:nth-child(5){ width: 100%; margin-top: 5%;}
#page_top{ width: calc(100% - 70px); margin: 25px auto; height: 30px; position: relative;}
#page_top::after,
#page_top::before{ border-width: 0 8px 8px 8px; margin-left: -8px; }
#page_top::after{ top: 10px;}
#page_top::before{ top: 11px;}

#contact_mail_btn{ margin-top: 25px;}
#contact_mail_btn>a>span{ font-size: 7px; line-height: 12px; padding: 0 0.3em;}
#contact_mail_btn>a>span>img{ height: 12px; width: auto;}

#copy{ font-size: 7px; line-height: 30px;}
}





#ad_box{ position: relative; background-repeat: no-repeat; background-size: contain;}
#ad_box>a{ position: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%; padding: 27px 48px;}
/*
#ad_box>a::before{ content: ""; border-style: solid; border-color: white; display: block; height: 100%; width:100%;}
#ad_box>a::after{ position: absolute; right: 0; bottom: 0; content: "AD"; text-align: center; background-color: white; color: black; font-weight: bold;}
*/
@media (min-width: 768px) {
#ad_box{ width: 900px; margin-right: 60px; margin-left: auto; margin-top: 60px;}
#ad_box.size16by9{ height: 506px;}
#ad_box>a{ padding: 27px 48px;}
/*
#ad_box>a::before{ border-width: 5px;}
#ad_box>a::after{ width: 48px; height: 27px; line-height: 27px; font-size:16px; }
*/
}
@media (min-width: 1480px) {
#ad_box{ margin-right:auto; margin-left: calc(50% - 220px);}
}
@media (max-width: 767.98px) {
#ad_box{ width: calc(100% - 20px); margin: 30px auto 0;}
#ad_box.size16by9{ padding-top: 56.25%;}
#ad_box>a{ padding: 8px 16px;}
/*#ad_box>a::before{ border-width: 2px;}
#ad_box>a::after{ width: 16px; height: 8px; line-height: 8px; font-size:6px; }
*/
}






/* page list */
#page_midashi{ margin: 0; text-align: center; line-height: 1em; border-bottom-style: solid; position: relative;}
#page_midashi strong,
#page_midashi small{ display: block; line-height: 1em;}
#page_midashi strong{ letter-spacing: 1em; padding-left: 1em;}
#page_midashi small{ font-weight: bold; margin: 1em;}
#page_list{ padding: 0; list-style: none; display: flex; flex-wrap: wrap;}
#page_list>li{ text-align: center; position: relative;}
#page_list>li>a{ text-decoration: none; display: block;}
#page_list>li>a:hover{ opacity: 0.7;}
#page_list>li>a>div{ width: 100%; padding: 56.25% 0 0 0; background-repeat: no-repeat; background-position: center; background-size: cover;}
#page_list>li>a>p{ margin: 0; padding: 0 0.5em;}
#page_list>li>a>p>small,
#page_list>li>a>p>strong,
#page_list>li>a>time{ display: block; line-height: 1.6em; color: white;}
#page_list>li>a>p>small{ font-weight: bold;}
#page_list>li>a>time{ position: absolute; left: 0; bottom: 0; width: 100%;}
@media (min-width: 768px) {
#page_midashi{ padding-top: 230px; border-bottom-width: 5px;}
#page_midashi strong{ font-size: 40px;}
#page_midashi small{ font-size: 18px;}
#page_leed{ width: 980px; margin: 50px auto; font-size: 18px; text-align: center;}
#page_list{ width: 960px; margin: 0 auto; padding: 0;}
#page_list>li{ width: 320px; margin: 0 0 50px; padding-bottom: 2em;}
#page_list>li>a>p>small{ font-size: 12px; margin: 1.2em 0;}
#page_list>li>a>p>strong{ font-size: 16px; margin: 1em 0;}
#page_list>li>a>time{ font-size: 12px; margin: 0;}
}
@media (max-width: 767.98px) {
#page_midashi{ padding-top: 20px; border-bottom-width: 2.5px;}
#page_midashi strong{ font-size: 20px;}
#page_midashi small{ font-size: 9px;}
#page_leed{ margin: 25px auto;}
#page_list{margin: 0 auto; padding: 0;}
#page_list>li{ width: 50%; margin: 0 0 30px; padding-bottom: 1em;}
#page_list>li>a>p>small{ font-size: 6px; margin: 1.5em 0 0;}
#page_list>li>a>p>strong{ font-size: 13px; margin: 0.6em 0;}
#page_list>li>a>time{ font-size: 6px; margin: 0;}
}



@keyframes midashi {
from { width:100%;}
to { width:0;}
}

#page_midashi::after { content: ""; height: 5px; background-color: white; position: absolute; right: 0;
animation-name: midashi;
animation-duration: 1s;
animation-timing-function: ease-in;
}
@media (min-width: 768px) {
#page_midashi::after { height: 5px; bottom: -5px;}
}
@media (max-width: 767.98px) {
#page_midashi::after { height: 2.5px; bottom: -2.5px;}

}




/* page detail */
#page_back{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-repeat: no-repeat; background-position: center top; background-size: 100% auto; z-index: 0;}
#page_back.interview{ background-image: url("../../page/images/page_back_interview.png");}
#page_back.music{ background-image: url("../../page/images/page_back_music.png");}
#page_back.culture{ background-image: url("../../page/images/page_back_culture.png");}
#page_back.sakaba{ background-image: url("../../page/images/page_back_sakaba.png");}
#page_back.itoshima_meguru{ background-image: url("../../page/images/page_back_itoshima_meguru.png");}



#page_detail{ color: black; background-color: white;}
#page_title{ font-weight: bold;}
#page_detail time{ font-weight: bold; margin: 1em 0 3em; display: block; line-height: 1em;}
#profile_box{}
#profile_box>div{}
#profile_img{}
#profile_text{}
#profile_sp>div:last-child::before{ display: block; font-weight: bold; content:"Writer Profile";}
#profile_text h2{ font-weight: bold;}
#profile_text h2 small{ font-weight: bold;}
#profile_text p{ margin: 0;}
#profile_text p#profile_sns{ line-height: 16px; margin: 10px 0;}
#profile_text p#profile_sns a{ display: inline-block;}
#profile_text p#profile_sns a:hover{ opacity: 0.7;}
#detail_soundcloud_box{ font-size: 0;}
@media (min-width: 768px) {
#page_detail{ padding: 30px 60px 0; margin-bottom: 90px;}
#page_title{ font-size: 37px;}
#page_detail time{ font-size: 12px;}
#detail_box{ font-size: 18px; padding-bottom: 1em;}
#profile_box{ display: flex; justify-content: space-between; align-items: center;}
#profile_box>div{}
#profile_img{ width: 205px;}
#profile_text{ width: 680px;}
#profile_sp>div:last-child::before{ font-size: 12px;}
#profile_sp>div:first-child{display: none;}
#profile_text h2{ font-size: 26px; margin: 2px 0 5px;}
#profile_text h2 small{ font-size: 12px;}
#profile_text p{ font-size: 14px;}
#profile_text p#profile_sns a{ margin: 0 10px 0 5px;}
#detail_soundcloud_box iframe{ margin: 20px 0 40px;}
}
@media (max-width: 767.98px) {
#page_detail{ padding: 10px 10px 0; margin-bottom: 60px;}
#page_title{ font-size: 18px;}
#page_detail time{ font-size: 10px;}
#detail_box{ font-size: 14px; padding-bottom: 1em;}
#profile_box{}
#profile_box>div{}
#profile_img{ display: none;}
#profile_text{}
#profile_sp{ display: flex; align-items: center; justify-content: space-between;}
#profile_sp>div{ width: calc(50% - 5px);}
#profile_sp>div:first-child{}
#profile_sp>div:last-child{}
#profile_sp>div:last-child::before{ font-size: 10px;}
#profile_text h2{ font-size: 20px; margin: 2px 0 0;}
#profile_text h2 small{ font-size: 10px; display: block; margin-top: 2px;}
#profile_text p{ font-size: 12px; padding: 0.5em 0 1em;}
#profile_text p#profile_sns a{ margin: 0 10px 0 5px;}
#detail_soundcloud_box iframe{ height: 100px; margin: 20px 0 40px;}
}






@media (min-width: 768px) {}
@media (max-width: 767.98px) {}






@media (min-width: 768px) {}
@media (max-width: 767.98px) {}






@media (min-width: 768px) {}
@media (max-width: 767.98px) {}





/* hover-color */

header>div>ul>li:nth-child(1)>a:hover,
header>div>ul>li:nth-child(1)>a.active,
header>div>ul:hover>li:nth-child(1)>a.active:hover,
footer ul li:nth-child(1) a:hover,
#top_trend_box .interview small,
#page_list .interview small{ color: #e34236;}
header>div>ul>li:nth-child(1)>a::after{ background-color: #e34236;}
#page_midashi.interview{ border-bottom-color: #e34236;}

header>div>ul>li:nth-child(2)>a:hover,
header>div>ul>li:nth-child(2)>a.active,
header>div>ul:hover>li:nth-child(2)>a.active:hover,
footer ul li:nth-child(2) a:hover,
#top_trend_box .music small,
#page_list .music small{ color: #42a951;}
header>div>ul>li:nth-child(2)>a::after{ background-color: #42a951;}
#page_midashi.music{ border-bottom-color: #42a951;}

header>div>ul>li:nth-child(3)>a:hover,
header>div>ul>li:nth-child(3)>a.active,
header>div>ul:hover>li:nth-child(3)>a.active:hover,
footer ul li:nth-child(3) a:hover,
#top_trend_box .culture small,
#page_list .culture small{ color: #5182f5;}
header>div>ul>li:nth-child(3)>a::after{ background-color: #5182f5;}
#page_midashi.culture{ border-bottom-color: #5182f5;}

header>div>ul>li:nth-child(4)>a:hover,
header>div>ul>li:nth-child(4)>a.active,
header>div>ul:hover>li:nth-child(4)>a.active:hover,
footer ul li:nth-child(4) a:hover,
#top_trend_box .sakaba small,
#page_list .sakaba small{ color: #ffe21f;}
header>div>ul>li:nth-child(4)>a::after{ background-color: #ffe21f;}
#page_midashi.sakaba{ border-bottom-color: #ffe21f;}

header>div>ul>li:nth-child(5)>a:hover,
header>div>ul>li:nth-child(5)>a.active,
header>div>ul:hover>li:nth-child(5)>a.active:hover,
footer ul li:nth-child(5) a:hover,
#top_trend_box .itoshima_meguru small,
#page_list .itoshima_meguru small{ color: #419ff6;}
header>div>ul>li:nth-child(5)>a::after{ background-color: #419ff6;}
#page_midashi.itoshima_meguru{ border-bottom-color: #419ff6;}
#page_midashi.itoshima_meguru strong{ letter-spacing: .1em; padding-left: .1em;}


header>div>ul:hover>li>a.active{ color: white;}


@media (min-width: 768px) {}
@media (max-width: 767.98px) {}






.autoload {
	text-align: center;
}
/* loading */
.loading3 {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 200em;
	border: 3px solid #fff;
	border-right-color: transparent;
	-webkit-animation: spin 0.5s infinite linear;
	-moz-animation: spin 0.5s infinite linear;
	-ms-animation: spin 0.5s infinite linear;
	animation: spin 0.5s infinite linear;
	line-height: 1;
}
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); opacity: 0.4; }
	50%  { -webkit-transform: rotate(180deg); opacity: 1; }
	100%   { -webkit-transform: rotate(360deg); opacity: 0.4; }
}
@-moz-keyframes spin {
	0% { -moz-transform: rotate(0deg); opacity: 0.4; }
	50%  { -moz-transform: rotate(180deg); opacity: 1; }
	100%   { -moz-transform: rotate(360deg); opacity: 0.4; }
}
@-ms-keyframes spin {
	0% { -ms-transform: rotate(0deg); opacity: 0.4; }
	50%  { -ms-transform: rotate(180deg); opacity: 1; }
	100%   { -ms-transform: rotate(360deg); opacity: 0.4; }
}
@keyframes spin {
	0% { transform: rotate(0deg); opacity: 0.4; }
	50%  { transform: rotate(180deg); opacity: 1; }
	100%   { transform: rotate(360deg); opacity: 0.4; }
}