@charset "UTF-8";
/* ==================================================
FONT
================================================== */
html { font-size: 62.5%; }
body,
#allWrap {
font-family: noto-sans, sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1rem;
line-height: 1.2;
letter-spacing: 0;
color: #2E2E2E;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
/*font-feature-settings: "palt", "liga";*/
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; /* iPhoneの文字サイズバグの回避 */
}
/* Adobe Fonts
■Noto Sans Regular
font-family: noto-sans, sans-serif;
font-weight: 400;
■Noto Sans Medium
font-family: noto-sans, sans-serif;
font-weight: 500;
■Noto Sans SemiBold
font-family: noto-sans, sans-serif;
font-weight: 600;
■Noto Sans Bold
font-family: noto-sans, sans-serif;
font-weight: 700;
■Noto Sans Condensed Medium
font-family: noto-sans-condensed, sans-serif;
font-weight: 500;
*/
/* Google Fonts
■Oswald Regular
font-family: 'Oswald', sans-serif;
font-weight: 400;
■Oswald Semi-bold
font-family: 'Oswald', sans-serif;
font-weight: 600;
*/
#allWrap { font-size: 1.6rem; }
/* ==================================================
LINK
================================================== */
a { outline: 0; transition: opacity 0.4s ease-out 0s, color 0.4s ease-out 0s, background-color 0.4s ease-out 0s; }
a:link { text-decoration: none; color: inherit; }
a:visited { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; color: inherit; opacity: 0.7; }
a:active { text-decoration: none; color: inherit; }
:focus { outline: 0; }
/* ==================================================
VIEW SWITCH
================================================== */
/* View Switch
------------------------------ */
@media screen and (min-width: 901px) {
.spOnly { display: none !important; }
}
@media screen and (max-width: 900px) {
.pcOnly { display: none !important; }
}
/* ==================================================
PAGE BASE
================================================== */
body {
}
#allWrap {
width: 100%;
text-align: center;
overflow: hidden;
position: relative;
/*animation: intro-fadein 1s ease-in 1s both;*/
}
/*@keyframes intro-fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}*/
/* RESET CSS CUSTOM */
i {
display: inline-block;
}
::before, ::after {
/*display: inline-block;*/
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
input[type="search"] {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 1px solid #000;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: 0 0 0 rgba(0,0,0,0) inset;
width: 100%;
height: 100%;
background: none;
text-indent: 0px;
position: relative;
}
/**/
@media screen and (min-width: 901px) {
body,
#allWrap {
/*min-width: 1180px;*/
}
#hdrWrap, #hamburgerNav {
/*min-width: 1180px;*/
}
}
@media screen and (max-width: 900px) {
body,
#allWrap {
min-width: 480px;
}
#hdrWrap, #hamburgerNav {
min-width: 480px;
}
}
#trendingList li {
animation: list-fadein 0.8s ease 0s both;
}
@keyframes list-fadein {
0% { opacity: 0; max-height: 0; transform: scale(0.85); }
100% { opacity: 1; max-height: 1000px; transform: scale(1); }
}
/* ==================================================
OTHERS
================================================== */
/* scrollto */
.scrollto {}
/* clrfix */
.clrfix::before, .clrfix::after { display: table; content: ''; }
.clrfix::after { clear: both; }
/* iOS フルサイズディスプレイ対応 */
@media screen and (max-width: 768px) {
.vfit-cover {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
}
/* ==================================================
SVG
================================================== */
.svgStyle {
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
a .svgStyle {
display: block;
width: 100%;
height: 100%;
}
/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
font-size: 32px;
color: red;
}
========================================== */
.icon-lock {
width: 0.6953125em;
}
.icon-navi {
width: 0.625em;
}
.icon-facebook {
width: 1.005859375em;
}
.icon-apple {
width: 0.814453125em;
}
.icon-radiko {
width: 0.9404296875em;
}
.icon-jmekun {
width: 0.87109375em;
}
.icon-jwave {
width: 8.564453125em;
}
/* 呼び出しソースサンプル
▼ホーム
▼南京錠
▼虫眼鏡
▼メール
▼時計
▼マイク
▼LINE
▼Twitter
▼Facebook
▼mixi
▼LinkedIn
▼Apple
▼はてなブックマーク
▼J-WAVEコメント
▼Instagram
▼YouTube
▼Spotify
▼radiko
▼radiko 丸囲み付き
▼J-meくん
▼J-WAVEロゴ
*/
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* =========================================================
HEADER
========================================================= */
@media screen and (min-width: 901px) {
#hdrWrap {
position: fixed;
width: 100%;
height: 110px;
background: #fff;
z-index: 10000;
top: 0;
left: 0;
border-bottom: 1px solid #000;
transition: all 0.3s ease 0s;
}
.scrDown #hdrWrap {
height: 60px;
}
#pageHome #hdrWrap {
height: 146px;
}
#pageHome.scrDown #hdrWrap {
height: 60px;
}
#hdrWrap .siteTitle {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
height: 60px;
padding: 0 20px 0 30px;
}
#pageHome #hdrWrap .siteTitle {
height: 96px;
}
#pageHome.scrDown #hdrWrap .siteTitle {
height: 60px;
}
#hdrWrap .siteTitle::after {
content: "";
display: block;
width: 216px;
}
#hdrWrap .siteTitle .txt {
width: 216px;
}
#hdrWrap .siteTitle .txt img {
display: block;
width: 216px;
height: 12px;
}
#hdrWrap .siteTitle .logo {
width: calc(100% - 492px);
max-width: 212px;
}
#pageHome #hdrWrap .siteTitle .logo {
max-width: 302px;
}
#pageHome.scrDown #hdrWrap .siteTitle .logo {
max-width: 212px;
}
#hdrWrap .siteTitle .logo a {
display: block;
}
#hdrWrap .siteTitle .logo a img {
display: block;
margin: 0 auto;
}
#pageHome #hdrWrap,
#pageHome #hdrWrap .siteTitle,
#pageHome #hdrWrap .siteTitle .logo {
transition: all 0.3s ease 0s;
}
/* HEADER NAVIGATION
------------------------------ */
#hdrNav {
border-top: 1px solid #E6E6E6;
height: 50px;
transition: all 0.3s ease 0s;
opacity: 1;
}
.scrDown #hdrNav {
overflow: hidden;
height: 0;
border-top: 0 solid #E6E6E6;
opacity: 0;
}
#hdrNav > ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
height: 50px;
transition: all 0.3s ease 0s;
}
.scrDown #hdrNav > ul {
height: 0;
}
#hdrNav > ul > li {
margin: 0 15px;
height: 100%;
}
#hdrNav > ul > li > a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-family: noto-sans-condensed, sans-serif;
font-weight: 500;
letter-spacing: 0.08em;
}
#hdrNav > ul > li > a::after {
content: "";
position: absolute;
bottom: calc(50% - 12px);
left: 0;
right: 0;
margin: 0 auto;
width: 0%;
height: 1px;
background: #000;
transition: all 0.3s ease 0s;
opacity: 0;
}
#hdrNav > ul > li > a:hover {
opacity: 1;
}
#hdrNav > ul > li > a:hover::after {
width: 100%;
opacity: 1;
}
/* CATEGORY ACCORDION */
#hdrNav ul li .accordion {
width: 100%;
position: relative;
}
#hdrNav ul li .accordion .trigger {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
font-family: noto-sans-condensed, sans-serif;
font-weight: 500;
letter-spacing: 0.08em;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.scrDown #hdrNav ul li .accordion .trigger {
height: 0;
}
#hdrNav ul li .accordion .trigger::after {
content: "";
position: absolute;
bottom: calc(50% - 12px);
left: 0;
right: 0;
margin: 0 auto;
width: 0%;
height: 1px;
background: #000;
transition: all 0.3s ease 0s;
opacity: 0;
}
#hdrNav ul li .accordion:hover .trigger {
opacity: 1;
}
#hdrNav ul li .accordion:hover .trigger::after {
width: 100%;
opacity: 1;
}
#hdrNav ul li .accordion ul {
position: absolute;
z-index: 1;
top: 48px;
left: -20px;
width: 220px;
height: 0;
background: #fff;
padding: 0 0;
border: 1px solid #000;
border-top: 0;
border-bottom: 0;
text-align: left;
overflow: hidden;
transition: all 0.7s ease 0s, top 0.3s ease 0s;
}
.scrDown #hdrNav ul li .accordion ul {
top: 0;
}
#hdrNav ul li .accordion ul::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #000;
}
#hdrNav ul li .accordion ul::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #000;
}
#hdrNav ul li .accordion:hover ul {
height: 282px;
padding: 22px 0;
opacity: 1;
}
#hdrNav ul li .accordion:hover ul::before {
opacity: 1;
}
#hdrNav ul li .accordion ul li:not(:last-child) {
margin-bottom: 18px;
}
#hdrNav ul li .accordion ul li a {
font-size: 1.4rem;
font-weight: 600;
display: block;
position: relative;
padding: 0 22px;
}
#hdrNav ul li .accordion ul li a::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
width: 4px;
height: 0;
background: #000;
transition: all 0.3s ease 0s;
opacity: 0;
}
#hdrNav ul li .accordion ul li a:hover {
opacity: 1;
}
#hdrNav ul li .accordion ul li a:hover::before {
height: 100%;
opacity: 1;
}
#hdrNav ul li .accordion ul li a em {
display: block;
letter-spacing: 0.12em;
margin-bottom: 3px;
}
#hdrNav ul li .accordion ul li a span {
display: block;
font-size: 1.1rem;
letter-spacing: 0.01em;
font-weight: 700;
color: #888;
}
/* =========================================================
HAMBURGER NAVIGATION
========================================================= */
#hamburgerNav {
position: relative;
}
/* HEADER BUTTON
------------------------------ */
#hamburgerBtn {
position: absolute;
z-index: 100;
width: 40px;
height: 40px;
top: -100px;
right: 20px;
transition: all 0.3s ease 0s;
}
.scrDown #hamburgerBtn {
top: -50px;
}
#pageHome #hamburgerBtn {
top: -119px;
right: 20px;
}
#pageHome.scrDown #hamburgerBtn {
top: -50px;
}
#hamburgerBtn a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
#hamburgerBtn a em {
position: absolute;
width: 16px;
height: 2px;
background: #000;
top: calc(50% - 1px);
left: calc(50% - 8px);
transition: all 0.5s ease 0s;
}
#hamburgerBtn a em::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #000;
top: -6px;
left: 0;
transition: all 0.5s ease 0s;
}
#hamburgerBtn a em::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #000;
top: 6px;
left: 0;
transition: all 0.5s ease 0s;
}
#hamburgerBtn a:hover {
opacity: 1;
}
/**/
#hamburgerBtn a:hover em {
width: 24px;
left: calc(50% - 12px);
}
/*#hamburgerBtn a:hover em::before {
width: 24px;
left: calc(50% - 12px);
}
#hamburgerBtn a:hover em::after {
width: 6px;
left: calc(50% - 3px);
}*/
/**/
/**/
#hamburgerBtn.menuOpen a:hover em {
width: 16px;
left: calc(50% - 8px);
}
#hamburgerBtn.menuOpen a em {
background: rgba(0, 0, 0, 0);
transform: rotate(180deg);
}
#hamburgerBtn.menuOpen a em::before {
top: 0;
left: 0;
transform: rotate(45deg);
}
#hamburgerBtn.menuOpen a em::after {
top: 0;
left: 0;
transform: rotate(-45deg);
}
/**/
/* HEADER CLOSE
------------------------------ */
#hamburgerClose {
display: none;
}
#hamburgerClose a {}
#hamburgerClose a em {}
/* HEADER MENU
------------------------------ */
#hamburgerBody {
width: 290px;
position: fixed;
height: calc(100vh - 100px);
top: 110px;
left: calc(100vw + 100px);
background: #fff;
border: 1px solid #000;
border-top: 0;
border-right: 0;
text-align: left;
transition: top 0.3s ease 0s, left 0.7s ease 0s;
}
.scrDown #hamburgerBody {
height: calc(100vh - 50px);
top: 60px;
}
#pageHome #hamburgerBody {
height: calc(100vh - 136px);
top: 146px;
}
#pageHome.scrDown #hamburgerBody {
height: calc(100vh - 50px);
top: 60px;
}
#hamburgerBody .inner {
padding: 12px 0 0;
overflow-y: scroll;
height: 100%;
-webkit-overflow-scrolling: touch;
}
/**/
#hamburgerBody.menuOpen {
left: calc(100% - 290px);
}
/**/
#hamburgerBody .head {
padding: 40px 0 20px;
}
#hamburgerBody .head .homeLink {
display: none;
}
#hamburgerBody .head .homeLink a {}
#hamburgerBody .group {
margin-bottom: 25px;
}
#hamburgerBody .group dt {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.06em;
padding: 0 43px 0 37px;
margin-bottom: 15px;
}
#hamburgerBody .group dd {}
#hamburgerBody .group dd ul {
background: #F5F5F5;
padding: 20px 43px 18px 37px;
}
#hamburgerBody .group dd ul li {
/*! margin-bottom: 18px; */
font-size: 1.3rem;
font-weight: 600;
letter-spacing: 0.12em;
}
#hamburgerBody .group dd ul li:not(:last-child) {
margin-bottom: 18px;
}
#hamburgerBody .group dd ul li a {}
#hamburgerBody .group dd ul li a em {
display: block;
margin-bottom: 5px;
}
#hamburgerBody .group dd ul li a span {
display: block;
font-size: 1.1rem;
font-weight: 600;
color: #888;
letter-spacing: 0.06em;
}
#hamburgerBody .foot {
padding: 0 43px 140px 37px;
}
#hamburgerBody .foot .mailEntry {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.06em;
margin-bottom: 30px;
}
#hamburgerBody .foot .mailEntry a {}
#hamburgerBody .foot .links {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
#hamburgerBody .foot .links li {
width: 18px;
height: 18px;
}
#hamburgerBody .foot .links li a {
width: 100%;
height: 100%;
}
#hamburgerBody .foot .links li a .svgStyle {
display: block;
}
#hamburgerBody .foot .links .jtop {
width: 113px;
}
#hamburgerBody .foot .links .jtop a {}
#hamburgerBody .foot .links .jtop a .svgStyle {}
/* ### 検索フォーム ### */
#searchBox {
/*! margin-bottom: 32px; */
padding: 0 43px 0 37px;
}
#searchBox .mt-site-search-container {
width: 100%;
height: 36px;
box-sizing: border-box;
border: 1px solid #707070;
border-radius: 4px;
overflow: hidden;
position: relative;
background-color: #fff;
}
#searchBox .mt-site-search-container input[type="search"] {
box-sizing: border-box;
margin: 0;
padding: 0 42px 0 12px;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) inset;
width: 100%;
height: 34px;
background: none !important;
text-indent: 0px !important;
position: relative;
}
#searchBox .mt-site-search-container .mt-site-search-form__button {
display: block;
text-indent: -10000px;
overflow: hidden;
width: 34px;
height: 34px;
background-color: #707070;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22layer%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20style%3D%22enable-background%3Anew%200%200%2032%2032%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22search%22%20class%3D%22st0%22%20d%3D%22M23.183%2C20.391c1.555-2.123%2C2.484-4.731%2C2.484-7.557C25.668%2C5.758%2C19.91%2C0%2C12.834%2C0S0%2C5.758%2C0%2C12.834%20s5.758%2C12.834%2C12.834%2C12.834c2.827%2C0%2C5.435-0.93%2C7.557-2.484L29.208%2C32L32%2C29.208L23.183%2C20.391z%20M12.834%2C21.719%20c-4.899%2C0-8.885-3.986-8.885-8.885s3.986-8.885%2C8.885-8.885s8.885%2C3.986%2C8.885%2C8.885S17.733%2C21.719%2C12.834%2C21.719z%22%2F%3E%3C%2Fsvg%3E');
background-size: 18px 18px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
border: 0;
}
#mt-site-search {}
/* ### ----- ### */
}
@media screen and (max-width: 900px) {
#hdrWrap {
position: fixed;
width: 100%;
height: 75px;
background: #fff;
z-index: 10000;
top: 0;
left: 0;
border-bottom: 1px solid #000;
}
#pageHome #hdrWrap {
height: 150px;
}
#pageHome.scrDown #hdrWrap {
height: 75px;
}
#hdrWrap .siteTitle {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
height: 75px;
padding: 0 60px 8px;
max-width: 320px;
margin: 0 auto;
}
#pageHome #hdrWrap .siteTitle {
height: 98px;
max-width: 480px;
}
#pageHome.scrDown #hdrWrap .siteTitle {
height: 75px;
max-width: 320px;
}
#hdrWrap .siteTitle::after {
content: "";
display: block;
width: 216px;
}
#hdrWrap .siteTitle .txt {
width: 202px;
order: 2;
margin: 0 auto;
}
#pageHome #hdrWrap .siteTitle .txt {
width: 216px;
height: 12px;
}
#pageHome.scrDown #hdrWrap .siteTitle .txt {
width: 202px;
}
#hdrWrap .siteTitle .txt img {
width: 202px;
height: 11px;
display: block;
}
#pageHome #hdrWrap .siteTitle .txt img {
width: 216px;
height: 12px;
}
#pageHome.scrDown #hdrWrap .siteTitle .txt img {
width: 202px;
height: 11px;
}
#hdrWrap .siteTitle .logo {
width: 100%;
max-width: 212px;
order: 1;
margin: 0 auto;
}
#pageHome #hdrWrap .siteTitle .logo {
max-width: 278px;
}
#pageHome.scrDown #hdrWrap .siteTitle .logo {
max-width: 212px;
}
#hdrWrap .siteTitle .logo a {
display: block;
}
#hdrWrap .siteTitle .logo a img {
display: block;
margin: 0 auto;
}
#pageHome #hdrWrap,
#pageHome #hdrWrap .siteTitle,
#pageHome #hdrWrap .siteTitle .txt,
#pageHome #hdrWrap .siteTitle .txt img,
#pageHome #hdrWrap .siteTitle .logo {
transition: all 0.3s ease 0s;
}
/* HEADER NAVIGATION
------------------------------ */
#hdrNav {
display: none;
}
#pageHome #hdrNav {
display: block;
border-top: 1px solid #E6E6E6;
height: 50px;
transition: all 0.3s ease 0s;
opacity: 1;
}
#pageHome.scrDown #hdrNav {
height: 0;
overflow: hidden;
border-top: 0px solid #E6E6E6;
opacity: 0;
}
#hdrNav > ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
height: 50px;
}
#pageHome #hdrNav > ul {
padding-right: 30px;
padding-left: 5px;
height: 50px;
}
#pageHome.scrDown #hdrNav > ul {
height: 0;
}
#pageHome.scrDown #hdrNav > ul {}
#hdrNav > ul > li {
margin: 0 15px;
height: 100%;
}
#pageHome #hdrNav > ul > li {
margin: 0 10px;
}
#pageHome.scrDown #hdrNav > ul > li {}
#hdrNav > ul > li > a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-family: noto-sans-condensed, sans-serif;
font-weight: 500;
letter-spacing: 0.08em;
}
#pageHome #hdrNav > ul > li > a {
font-size: 1.4rem;
}
#pageHome.scrDown #hdrNav > ul > li > a {}
#hdrNav > ul > li > a::after {
content: "";
position: absolute;
bottom: calc(50% - 12px);
left: 0;
right: 0;
margin: 0 auto;
width: 0%;
height: 1px;
background: #000;
transition: all 0.3s ease 0s;
opacity: 0;
}
#hdrNav > ul > li > a:hover {
opacity: 1;
}
#hdrNav > ul > li > a:hover::after {
width: 100%;
opacity: 1;
}
/* CATEGORY ACCORDION */
#hdrNav ul li .accordion {
width: 100%;
position: relative;
}
#hdrNav ul li .accordion .trigger {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
font-family: noto-sans-condensed, sans-serif;
font-weight: 500;
letter-spacing: 0.08em;
cursor: pointer;
}
#pageHome #hdrNav ul li .accordion .trigger {
font-size: 1.4rem;
}
#pageHome.scrDown #hdrNav ul li .accordion .trigger {
height: 0;
}
#hdrNav ul li .accordion .trigger::after {
content: "";
position: absolute;
bottom: calc(50% - 12px);
left: 0;
right: 0;
margin: 0 auto;
width: 0%;
height: 1px;
background: #000;
transition: all 0.3s ease 0s;
opacity: 0;
}
#hdrNav ul li .accordion:hover .trigger {
opacity: 1;
}
#hdrNav ul li .accordion:hover .trigger::after {
width: 100%;
opacity: 1;
}
#hdrNav ul li .accordion ul {
position: absolute;
z-index: 1;
top: 48px;
left: -20px;
width: 230px;
height: 0;
background: #fff;
padding: 0 0;
border: 1px solid #000;
border-top: 0;
text-align: left;
overflow: hidden;
transition: all 0.7s ease 0s, top 0.3s ease 0s;
}
#pageHome #hdrNav ul li .accordion ul {
top: 50px;
}
#pageHome.scrDown #hdrNav ul li .accordion ul {
top: 0;
}
#hdrNav ul li .accordion ul::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #000;
}
#hdrNav ul li .accordion:hover ul {
height: 282px;
padding: 22px 0;
}
#hdrNav ul li .accordion ul li:not(:last-child) {
margin-bottom: 18px;
}
#hdrNav ul li .accordion ul li a {
font-size: 1.4rem;
font-weight: 600;
display: block;
position: relative;
padding: 0 22px;
}
#hdrNav ul li .accordion ul li a::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
width: 4px;
height: 0;
background: #000;
transition: all 0.3s ease 0s;
opacity: 0;
}
#hdrNav ul li .accordion ul li a:hover {
opacity: 1;
}
#hdrNav ul li .accordion ul li a:hover::before {
height: 100%;
opacity: 1;
}
#hdrNav ul li .accordion ul li a em {
display: block;
letter-spacing: 0.12em;
margin-bottom: 3px;
}
#hdrNav ul li .accordion ul li a span {
display: block;
font-size: 1.1rem;
letter-spacing: 0.06em;
font-weight: 700;
color: #888;
}
#pageHome #hdrNav,
#pageHome #hdrNav > ul,
#pageHome #hdrNav > ul > li,
#pageHome #hdrNav > ul > li > a,
#pageHome #hdrNav ul li .accordion .trigger {
transition: all 0.3s ease 0s;
}
/* =========================================================
HAMBURGER NAVIGATION
========================================================= */
#hamburgerNav {
position: relative;
}
/* HEADER BUTTON
------------------------------ */
#hamburgerBtn {
position: absolute;
z-index: 100;
width: 40px;
height: 40px;
top: -55px;
right: 15px;
}
#pageHome #hamburgerBtn {
top: -44px;
right: 15px;
transition: all 0.3s ease 0s;
}
#pageHome.scrDown #hamburgerBtn {
top: -55px;
right: 15px;
}
#hamburgerBtn a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
#hamburgerBtn a em {
position: absolute;
width: 20px;
height: 2px;
background: #000;
top: calc(50% - 1px);
left: calc(50% - 10px);
transition: all 0.5s ease 0s;
}
#hamburgerBtn a em::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #000;
top: -7px;
left: 0;
transition: all 0.5s ease 0s;
}
#hamburgerBtn a em::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #000;
top: 7px;
left: 0;
transition: all 0.5s ease 0s;
}
#hamburgerBtn a:hover {
opacity: 1;
}
/**/
#hamburgerBtn a:hover em {
width: 24px;
left: calc(50% - 12px);
}
/*#hamburgerBtn a:hover em::before {
width: 24px;
left: calc(50% - 12px);
}
#hamburgerBtn a:hover em::after {
width: 6px;
left: calc(50% - 3px);
}*/
/**/
/**/
#hamburgerBtn.menuOpen a:hover em {
width: 16px;
left: calc(50% - 8px);
}
#hamburgerBtn.menuOpen a em {
background: rgba(0, 0, 0, 0);
transform: rotate(180deg);
}
#hamburgerBtn.menuOpen a em::before {
top: 0;
left: 0;
transform: rotate(45deg);
}
#hamburgerBtn.menuOpen a em::after {
top: 0;
left: 0;
transform: rotate(-45deg);
}
/**/
/* HEADER CLOSE
------------------------------ */
#hamburgerClose {
width: 30px;
height: 30px;
}
#hamburgerClose a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
#hamburgerClose a em {
position: absolute;
width: 20px;
height: 2px;
background: rgba(112, 112, 112, 0);
top: calc(50% - 1px);
left: calc(50% - 10px);
transition: all 0.5s ease 0s;
}
#hamburgerClose a em::before,
#hamburgerClose a em::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #707070;
top: 0;
left: 0;
transition: all 0.5s ease 0s;
}
#hamburgerClose a em::before {
transform: rotate(45deg);
}
#hamburgerClose a em::after {
transform: rotate(-45deg);
}
/* HEADER MENU
------------------------------ */
#hamburgerBody {
width: 100%;
position: fixed;
height: 100vh;
top: 0;
left: calc(100% + 50px);
background: #fff;
border: 1px solid #000;
border-top: 0;
border-right: 0;
text-align: left;
transition: left 0.6s ease 0s;
z-index: 1001;
}
#hamburgerBody .inner {
padding: 167px 0 0;
overflow-y: scroll;
height: 100vh;
-webkit-overflow-scrolling: touch;
}
/**/
#hamburgerBody.menuOpen {
left: 0;
}
/**/
#hamburgerBody .head {
padding: 25px 25px 16px;
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #fff;
height: 167px;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
border-bottom: 1px solid #EDEDED;
z-index: 200;
}
#hamburgerBody .head .homeLink {
height: 30px;
width: 100px;
}
#hamburgerBody .head .homeLink a {
height: 100%;
width: 100%;
text-align: center;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
#hamburgerBody .head .homeLink a::after {
content: "トップ";
font-weight: 700;
font-size: 1.9rem;
letter-spacing: 0.06em;
margin-left: 10px;
}
#hamburgerBody .head .homeLink a .svgStyle {
width: 20px;
height: 20px;
display: inline-block;
}
#hamburgerBody .group {}
#hamburgerBody .group dt {
font-size: 1.8rem;
letter-spacing: 0.06em;
padding: 0 5.2%;
font-weight: 700;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
position: relative;
border-top: 1px solid #EDEDED;
border-bottom: 1px solid #EDEDED;
margin-top: -1px;
cursor: pointer;
}
#hamburgerBody .group dt::after {
content: "";
display: block;
width: 12px;
height: 12px;
border-bottom: 2px solid #2E2E2E;
border-right: 2px solid #2E2E2E;
transform: rotate(45deg);
transition: transform 0.6s ease 0s;
}
#hamburgerBody .group dd {
border-top: 1px solid #EDEDED;
border-bottom: 0 solid #EDEDED;
margin-top: -1px;
max-height: 0;
min-height: 0;
overflow: hidden;
transition: max-height 0.6s ease 0s;
}
/**/
#hamburgerBody .group.menuOpen {}
#hamburgerBody .group.menuOpen dt {}
#hamburgerBody .group.menuOpen dt::after {
transform: rotate(225deg);
}
#hamburgerBody .group.menuOpen dd {
border-bottom: 1px solid #EDEDED;
max-height: 230px;
}
/**/
#hamburgerBody .group dd ul {
background: #F5F5F5;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
padding: 0 5.2%;
}
#hamburgerBody .group dd ul li {
font-size: 1.8rem;
letter-spacing: 0.08em;
width: calc(50% - 13px);
height: 76px;
border-bottom: 1px solid #EDEDED;
font-weight: 700;
}
#hamburgerBody .group:nth-child(1) dd ul li:nth-child(5) {
border-bottom: 0;
}
#hamburgerBody .group:nth-child(2) dd ul li:nth-child(3),
#hamburgerBody .group:nth-child(2) dd ul li:nth-child(4) {
border-bottom: 0;
}
#hamburgerBody .group:nth-child(3) dd ul li:nth-child(3),
#hamburgerBody .group:nth-child(3) dd ul li:nth-child(4) {
border-bottom: 0;
}
#hamburgerBody .group dd ul li a {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: column;
}
#hamburgerBody .group dd ul li a em {
margin: 0 0 5px 0;
width: 100%;
padding: 0;
}
#hamburgerBody .group dd ul li a span {
font-size: 1.25rem;
font-weight: 600;
color: #888;
letter-spacing: 0.01em;
width: 100%;
margin: 0;
padding: 0;
}
#hamburgerBody .foot {
padding: 0;
}
#hamburgerBody .foot .mailEntry {
font-size: 1.8rem;
letter-spacing: 0.06em;
padding: 0 5.2%;
font-weight: 700;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
position: relative;
border-top: 1px solid #EDEDED;
border-bottom: 1px solid #EDEDED;
margin-top: -1px;
}
#hamburgerBody .foot .mailEntry a {}
#hamburgerBody .foot .links {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
padding: 50px 5.2% 50px;
max-width: 520px;
margin: 0 auto;
}
#hamburgerBody .foot .links li {
width: 28px;
height: 28px;
}
#hamburgerBody .foot .links li a {
width: 100%;
height: 100%;
}
#hamburgerBody .foot .links li a .svgStyle {
display: block;
}
#hamburgerBody .foot .links .jtop {
width: 184px;
}
#hamburgerBody .foot .links .jtop a {}
#hamburgerBody .foot .links .jtop a .svgStyle {}
/* ### 検索フォーム ### */
#searchBox {
/*! margin-bottom: 32px; */
/*! padding: 0; */
width: 100%;
margin-top: 15px;
}
#searchBox .mt-site-search-container {
width: 100%;
height: 50px;
box-sizing: border-box;
border: 1px solid #707070;
border-radius: 6px;
overflow: hidden;
position: relative;
background-color: #fff;
}
#searchBox .mt-site-search-container input[type="search"] {
box-sizing: border-box;
margin: 0;
padding: 0 42px 0 12px;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) inset;
width: 100%;
height: 48px;
background: none !important;
text-indent: 0px !important;
position: relative;
}
#searchBox .mt-site-search-container .mt-site-search-form__button {
display: block;
text-indent: -10000px;
overflow: hidden;
width: 50px;
height: 50px;
background-color: #707070;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22layer%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20style%3D%22enable-background%3Anew%200%200%2032%2032%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath%20id%3D%22search%22%20class%3D%22st0%22%20d%3D%22M23.183%2C20.391c1.555-2.123%2C2.484-4.731%2C2.484-7.557C25.668%2C5.758%2C19.91%2C0%2C12.834%2C0S0%2C5.758%2C0%2C12.834%20s5.758%2C12.834%2C12.834%2C12.834c2.827%2C0%2C5.435-0.93%2C7.557-2.484L29.208%2C32L32%2C29.208L23.183%2C20.391z%20M12.834%2C21.719%20c-4.899%2C0-8.885-3.986-8.885-8.885s3.986-8.885%2C8.885-8.885s8.885%2C3.986%2C8.885%2C8.885S17.733%2C21.719%2C12.834%2C21.719z%22%2F%3E%3C%2Fsvg%3E');
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
border: 0;
}
#mt-site-search {}
/* ### ----- ### */
}
/* ==================================================
FOOTER
================================================== */
@media screen and (min-width: 901px) {
#ftrWrap {
background: #303030;
}
#ftrWrap .pagetopBtn {
background: #fff;
border-top: 1px solid #E1E1E1;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
#ftrWrap .pagetopBtn a {
display: inline-block;
position: relative;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1;
padding-right: 45px;
}
#ftrWrap .pagetopBtn a::after {
content: "";
display: block;
width: 18px;
height: 18px;
border-top: 2px solid #2E2E2E;
border-right: 2px solid #2E2E2E;
transform: rotate(-45deg);
position: absolute;
top: calc(50% - 4px);
right: 0;
}
#ftrWrap .inner {
padding: 70px 0 45px;
}
#ftrWrap .ttl {
margin-bottom: 45px;
}
#ftrWrap .ttl a {
display: block;
max-width: 208px;
margin: 0 auto 24px;
}
#ftrWrap .ttl a img {}
#ftrWrap .ttl .txt {
max-width: 216px;
margin: 0 auto;
}
#ftrWrap .ttl .txt img {
display: block;
}
#ftrWrap ul.sns {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
margin-bottom: 45px;
}
#ftrWrap ul.sns li {
width: 22px;
height: 22px;
margin: 0 16px;
}
#ftrWrap ul.sns li a {
width: 100%;
display: block;
height: 100%;
}
#ftrWrap ul.sns li a .svgStyle {
fill: #808080;
display: block;
width: 100%;
height: 100%;
}
#ftrWrap ul.links {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
margin-bottom: 30px;
}
#ftrWrap ul.links li {
border-right: 1px solid #808080;
padding: 0 20px;
}
#ftrWrap ul.links li:first-child {
border-left: 1px solid #808080;
}
#ftrWrap ul.links li a {
font-size: 1.2rem;
color: #808080;
letter-spacing: 0.08em;
display: block;
}
#ftrWrap .copyright {
font-size: 1.2rem;
color: #808080;
letter-spacing: 0.12em;
}
#ftrWrap .copyright i {}
#ftrWrap .copyright i b {
display: inline-block;
margin: 0 4px 0 2px;
}
/* フッターメニュー（SPのみ）
------------------------------ */
#ftrNav {
display: none;
}
#ftrNav .head {}
#ftrNav .head .navTitle {}
#ftrNav .head .comment {}
#ftrNav ul {}
#ftrNav ul li {}
#ftrNav ul li a {}
#ftrNav ul li i {}
}
@media screen and (max-width: 900px) {
#ftrWrap {
background: #303030;
}
#ftrWrap .pagetopBtn {
background: #F5F5F5;
border-top: 1px solid #E1E1E1;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
#ftrWrap .pagetopBtn a {
display: inline-block;
position: relative;
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1;
padding-right: 60px;
font-size: 1.8rem;
}
#ftrWrap .pagetopBtn a::after {
content: "";
display: block;
width: 18px;
height: 18px;
border-top: 2px solid #2E2E2E;
border-right: 2px solid #2E2E2E;
transform: rotate(-45deg);
position: absolute;
top: calc(50% - 4px);
right: 0;
}
#ftrWrap .inner {
padding: 50px 0 40px;
}
#ftrWrap .ttl {
margin-bottom: 38px;
}
#ftrWrap .ttl a {
display: block;
max-width: 256px;
margin: 0 auto 22px;
}
#ftrWrap .ttl a img {}
#ftrWrap .ttl .txt {
max-width: 216px;
margin: 0 auto;
}
#ftrWrap .ttl .txt img {
display: block;
}
#ftrWrap ul.sns {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
margin-bottom: 34px;
}
#ftrWrap ul.sns li {
width: 22px;
height: 22px;
margin: 0 16px;
}
#ftrWrap ul.sns li a {
width: 100%;
display: block;
height: 100%;
}
#ftrWrap ul.sns li a .svgStyle {
fill: #808080;
display: block;
width: 100%;
height: 100%;
}
#ftrWrap ul.links {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
max-width: 420px;
margin: 0 auto 10px;
}
#ftrWrap ul.links li {
border-right: 1px solid #808080;
padding: 0 16px;
margin-bottom: 20px;
border-left: 1px solid #808080;
margin-left: -1px;
}
#ftrWrap ul.links li:first-child {
border-left: 1px solid #808080;
}
#ftrWrap ul.links li a {
font-size: 1.4rem;
color: #808080;
letter-spacing: 0.08em;
display: block;
}
#ftrWrap .copyright {
font-size: 1.2rem;
color: #808080;
letter-spacing: 0.12em;
}
#ftrWrap .copyright i {}
#ftrWrap .copyright i b {
display: inline-block;
margin: 0 4px 0 2px;
}
/* フッターメニュー（SPのみ）
------------------------------ */
#ftrNav {
background: #fff;
}
#ftrNav .head {
padding: 70px 0 30px;
}
#ftrNav .head .navTitle {
font-weight: 600;
font-size: 2.9rem;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
#ftrNav .head .comment {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.15em;
line-height: 1.6;
}
#ftrNav ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
#ftrNav ul li {
width: calc(100% / 2);
text-align: left;
height: 58px;
font-size: 1.6rem;
letter-spacing: 0.02em;
border-top: 1px solid #E2E2E2;
font-weight: 600;
}
#ftrNav ul li a {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
padding: 0 35px 0 20px;
position: relative;
}
#ftrNav ul li a::after {
content: "";
display: block;
position: absolute;
top: calc(50% - 5px);
right: 20px;
width: 10px;
height: 10px;
border-bottom: 2px solid #C1C1C1;
border-right: 2px solid #C1C1C1;
transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0);
}
#ftrNav ul li i {
font-size: 1.2rem;
margin-top: -20px;
color: #888;
width: 100%;
}
}
/* ==================================================
CONTENTS
================================================== */
.color-music { color: #21C8DE; }
.color-social { color: #2CB86B; }
.color-entertainment { color: #8456C7; }
.color-culture { color: #F49A4B; }
.color-lifestyle { color: #FD6D7C; }
#cntWrap {
}
@media screen and (min-width: 901px) {
.subDirectory #cntWrap {
padding-top: 110px;
margin-bottom: 90px;
}
}
@media screen and (max-width: 900px) {
.subDirectory #cntWrap {
padding-top: 75px;
}
}
#mainWrap {
}
/* slick CUSTOM
------------------------------ */
.slider {
opacity: 0;
transition: opacity .3s linear;
}
.slider.slick-initialized {
opacity: 1;
}
@media screen and (max-width: 900px) {
/*#voiceSlider,*/
#trendingSlider,
#rankingSlider {
opacity: 1;
}
}
/* .slider 共通設定 */
.sliderWrap .slider {
/*! margin-bottom: 20px; */
}
.sliderWrap .slider .list {
}
.slider + .sliderController {
position: relative;
text-align: center;
}
.sliderController .arrows {
position: absolute;
/*top: -5px;*/
top: 0;
width: 100%;
height: 0;
}
@media screen and (max-width: 900px) {
.sliderController .arrows {
display: none;
}
}
.sliderController .dots {
height: 100%;
position: relative;
}
.slider + .sliderController {
position: relative;
text-align: center;
height: 30px;
display: inline-block;
}
/* アロー */
.slick-prev, .slick-next {
background-repeat: no-repeat !important;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22layer%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%228px%22%20height%3D%2218px%22%20viewBox%3D%220%200%208%2018%22%20style%3D%22enable-background%3Anew%200%200%208%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20id%3D%22path%22%20points%3D%220.834%2C0%208%2C9%200.834%2C18%200%2C17.389%206.68%2C9%200%2C0.611%20%22%2F%3E%3C%2Fsvg%3E') !important;
background-position: 50% !important;
width: 30px !important;
height: 30px !important;
top: 0;
transform: none;
transition: all 0.4s ease 0s;
}
.bg-dark .slick-prev, .bg-dark .slick-next {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22layer%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%228px%22%20height%3D%2218px%22%20viewBox%3D%220%200%208%2018%22%20style%3D%22enable-background%3Anew%200%200%208%2018%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpolygon%20id%3D%22path%22%20class%3D%22st0%22%20points%3D%220.834%2C0%208%2C9%200.834%2C18%200%2C17.389%206.68%2C9%200%2C0.611%20%22%2F%3E%3C%2Fsvg%3E') !important;
}
.slick-prev:hover, .slick-next:hover {
opacity: 0.5;
}
.slick-prev {
left: 0 !important;
transform: rotate(180deg) !important;
}
.slick-next {
right: 0 !important;
}
.slick-prev::before, .slick-next::before {
display: none !important;
}
.slick-prev::before {
}
.slick-prev::after {
}
.slick-next::before {
}
/* ドット */
.slick-dots {
position: relative !important;
width: auto;
display: inline-flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
/*! transform: translateX(-50%); */
padding: 0 40px;
margin: 0 auto;
bottom: 0;
height: 100%;
/*! z-index: 10; */
/*! background: #000; */
}
.slick-dots li {
margin: 0 1px !important;
width: 18px !important;
height: 18px !important;
}
@media screen and (max-width: 900px) {
.slick-dots li {
width: 28px !important;
height: 18px !important;
}
}
.slick-dots li button {
width: 100% !important;
height: 100% !important;
}
.slick-dots li button::before {
display: none !important;
}
.slick-dots li button::after {
content: "";
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 9px;
height: 9px;
border-radius: 10px;
border: 1px solid #2e2e2e;
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: all 0.4s ease 0s;
}
@media screen and (max-width: 900px) {
.slick-dots li button::after {
top: 5px;
left: 10px;
width: 9px;
height: 9px;
}
}
.slick-dots li.slick-active,
.slick-dots li.slick-active button {
pointer-events: none;
}
.slick-dots li.slick-active button::after {
background-color: #2e2e2e;
}
.slick-dots li button:hover::after {
background-color: #D2D2D2;
}
.bg-dark .slick-dots li button::after {
border: 0;
background-color: #9A9A9A;
}
.bg-dark .slick-dots li.slick-active button::after {
background-color: #fff;
}
.bg-dark .slick-dots li button:hover::after {
background-color: #c1c1c1;
}
/* 最後のリストから最初に戻る時の逆再生挙動を制御 */
.slick-slider div {
/*transition: none;*/
/*transition: transform 0 ease 0s*/
}
/* スライドリストを囲む親ブロック */
.windowResize .slick-track {
/*transition: transform 1s ease 0s !important;*/
}
/* ###################################################################
########## PC ########################################################
################################################################### */
@media screen and (min-width: 901px) {
.headTitle {
padding: 75px 0 38px;
}
.headTitle .ttl {
font-weight: 600;
font-size: 3.6rem;
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.headTitle .sub {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.14em;
}
/*TOPのみ*/
#pageHome .headTitle {
/*! padding: 78px 0 25px; */
}
/**/
/* TRENDING AREA
------------------------------ */
#trendingArea {
position: relative;
margin-bottom: 90px;
}
/*TOPのみ*/
#pageHome #trendingArea::before {
content: "";
display: block;
width: 100%;
height: 340px;
/*background: #FBF5E9;*/
background: #DAF0EB;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#pageHome #trendingArea .headTitle {
padding-top: 40px;
}
#pageHome #trendingArea .ttl {
font-size: 2.6rem;
}
#pageHome #trendingArea .sub {}
/**/
#trendingList {
width: 100%;
max-width: 1134px;
margin: 0 auto 40px;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
flex-direction: row;
}
#trendingList li {
max-width: 328px;
width: calc(100% / 3 - 50px);
margin: 0 25px 50px;
text-align: left;
border-bottom: 1px solid #e1e1e1;
padding-bottom: 22px;
}
#trendingList li .relatedPct {}
#trendingList li .relatedPct .pct {
margin-bottom: 20px;
position: relative;
padding-top: 66.286%;
width: 100%;
height: 0;
overflow: hidden;
background: #fff url(/asset/img/bg_s.jpg) no-repeat 50% 50%;
background-size: cover;
}
#trendingList li .relatedPct .pct img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.01);
height: 100%;
width: auto;
max-width: 10000px;
}
#trendingList li .relatedPct .credit {}
#trendingList li .relatedPct .credit .caption {
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
#trendingList li .relatedPct .credit .caption > div {}
#trendingList li .relatedPct .credit .caption .category {
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.06em;
}
#trendingList li .relatedPct .credit .caption .date {
font-size: 1.1rem;
letter-spacing: 0.04em;
color: #b1b1b1;
}
#trendingList li .relatedPct .credit .comment {
font-size: 1.5rem;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.05em;
}
/* hover */
#trendingList li > a {}
#trendingList li > a:hover {
opacity: 1;
}
#trendingList li > a .pct img {
transition: all 1s ease 0s;
}
#trendingList li > a:hover .pct img {
transform: translate(-50%, -50%) scale(1.06);
filter: brightness(110%) contrast(110%) saturate(120%);
}
/* MOREボタン */
#trendingArea .btn {}
#trendingArea .btn a,
#trendingArea .page_more {
border: 1px solid #2e2e2e;
width: 240px;
height: 50px;
margin: 0 auto;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
/*font-weight: 6;*/
font-weight: 400;
letter-spacing: 0.15em;
cursor: pointer;
}
/* Ad BANNER AREA
------------------------------ */
#adbannerArea_m {
display:none !important;
}
#adbannerArea {
margin-bottom: 80px;
}
#adbannerArea2 {
margin-top: 80px;
margin-bottom: 80px;
}
#adbannerArea .inner {}
#adbannerArea .adSet,
#adbannerArea2 .adSet {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
/*! margin-bottom: 90px; */
}
/*TOPのみ*/
#pageHome #adbannerArea .adSet {
margin-bottom: 90px;
}
/**/
#adbannerArea .insertAd {
/*
height: 250px;
width:300px;
*/
}
#adbannerArea .adSet .insertAd,
#adbannerArea2 .adSet .insertAd {
height: 280px;
width:336px;
}
#adbannerArea .adSet .insertAd:not(:first-child) {}
#adbannerArea .adSet .insertAd img {}
/* FEATURE AREA
------------------------------ */
#featureArea {
background: #222;
padding-bottom: 50px;
}
#featureArea .headTitle {
color: #fff;
}
#featureArea .headTitle .ttl {
}
#featureArea .headTitle .sub {
}
#featureArea .sliderWrap {
}
#featureSlider {
max-width: 1170px;
margin: 0 auto 40px;
width: 96%;
}
#featureSlider .list {
width: 394px;
/*! max-width: 390px; */
}
#featureSlider .list a {
border-radius: 6px;
overflow: hidden;
display: block;
background: #fff;
margin: 0 auto;
width: 310px;
}
#featureSlider .list a:hover {
opacity: 1;
}
#featureSlider .list a .pct {
position: relative;
padding-top: 66.286%;
width: 100%;
height: 0;
overflow: hidden;
background: #fff url(/asset/img/bg_s.jpg) no-repeat 50% 50%;
background-size: cover;
}
#featureSlider .list a .pct img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.01);
height: 100%;
width: auto;
max-width: 10000px;
transition: all 1s ease 0s;
}
#featureSlider .list a:hover .pct img {
transform: translate(-50%, -50%) scale(1.06);
filter: brightness(110%) contrast(110%) saturate(120%);
}
#featureSlider .list a .txt {
text-align: left;
padding: 20px;
}
#featureSlider .list a .txt .ttl {
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.625;
margin-bottom: 12px;
}
#featureSlider .list a .txt p {
color: #858585;
font-weight: 500;
font-size: 1.4rem;
letter-spacing: 0.04em;
line-height: 1.64;
}
#featureArea .sliderController {
}
/* RANKING AREA
------------------------------ */
#rankingArea {
background: #E6E6E6;
padding-bottom: 50px;
}
#rankingArea .headTitle {
}
#rankingArea .headTitle .ttl {
}
#rankingArea .headTitle .sub {
}
#rankingArea .sliderWrap {
}
#rankingSp {
display: none;
}
#rankingSlider {
max-width: 1120px;
margin: 0 auto 40px;
width: 100%;
}
#rankingSlider .list {
margin: 12px 0;
width: 224px;
padding: 0 12px;
}
#rankingSlider .list a {
background: #fff;
display: block;
position: relative;
max-height: 400px;
transition: all 0.3s ease 0s;
}
#rankingSlider .list a:hover {
opacity: 1;
}
#rankingSlider .list a .number {
position: absolute;
bottom: -14px;
right: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 3rem;
}
#rankingSlider .list a .pct {
overflow: hidden;
position: relative;
padding-top: 66.286%;
width: 100%;
height: 0;
background: #fff url(/asset/img/bg_s.jpg) no-repeat 50% 50%;
background-size: cover;
}
#rankingSlider .list a .pct img {
transition: all 1s ease 0s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.01);
height: 100%;
width: auto;
max-width: 10000px;
}
#rankingSlider .list a:hover .pct img {
transform: translate(-50%, -50%) scale(1.06);
filter: brightness(110%) contrast(110%) saturate(120%);
}
#rankingSlider .list a .txt {
font-weight: 500;
font-size: 1.3rem;
letter-spacing: 0.04em;
text-align: left;
line-height: 1.7;
padding: 15px 16px 50px;
overflow: hidden;
}
#rankingArea .sliderController {
}
/* PHOTO AREA
------------------------------ */
#photoArea {
}
#photoArea .headTitle {
}
#photoArea .headTitle .ttl {
}
#photoArea .headTitle .sub {
}
#photoArea .sliderWrap {
}
#photoSlider {
}
#photoSlider .list {
width: 220px;
padding: 0 10px;
}
#photoSlider .list .set {
}
#photoSlider .list .set a {
display: block;
overflow: hidden;
position: relative;
padding-top: 66.286%;
width: 100%;
height: 0;
background: #fff url(/asset/img/bg_s.jpg) no-repeat 50% 50%;
background-size: cover;
}
#photoSlider .list .set a:hover {
opacity: 1;
}
#photoSlider .list .set a:nth-child(1) {
margin-bottom: 20px;
transform: translateX(-25%);
}
#photoSlider .list .set a:nth-child(2) {
transform: translateX(25%);
}
#photoSlider .list .set a img {
display: block;
transition: all 1s ease 0s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.01);
height: 100%;
width: auto;
max-width: 10000px;
}
#photoSlider .list .set a:hover img {
transform: translate(-50%, -50%) scale(1.06);
filter: brightness(110%) contrast(110%) saturate(120%);
}
#photoArea .sliderController {
/*display: none;*/
}
/* 共通エリア全体のWrapper
------------------------------ */
#subWrap {
width: 100%;
margin-top: 120px;
margin-bottom: 120px;
}
/* ###################################################### */
}
/* //@media */
@media screen and (min-width: 901px) and (max-width: 1120px) {
#rankingSlider .list {
}
}
/* ###################################################################
########## SP ########################################################
################################################################### */
@media screen and (max-width: 900px) {
.headTitle {
padding: 0px 0 30px;
}
.headTitle .ttl {
font-weight: 600;
font-size: 2.9rem;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.headTitle .sub {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: 0.15em;
line-height: 1.6;
}
/* TOPのみ */
#pageHome .headTitle {
padding: 70px 0 30px;
}
/**/
/* TRENDING AREA
------------------------------ */
#trendingArea {
position: relative;
margin-bottom: 90px;
}
/*TOPのみ*/
#pageHome #trendingArea::before {
display: none;
}
#pageHome #trendingArea .headTitle {
padding-top: 40px;
}
#pageHome #trendingArea .ttl {
font-size: 2.4rem;
}
#pageHome #trendingArea .sub {}
/**/
/**/
#trendingList {
width: 100%;
margin: 0 auto 70px;
display: block;
}
#trendingList li {
max-width: 480px;
width: 100%;
margin: 0 auto;
text-align: left;
border-bottom: 25px solid #F2F2F3;
padding-bottom: 25px;
}
#trendingList li .relatedPct {}
#trendingList li .relatedPct .pct {
margin-bottom: 20px;
position: relative;
padding-top: 66.286%;
width: 100%;
height: 0;
overflow: hidden;
background: #fff url(/asset/img/bg_s.jpg) no-repeat 50% 50%;
background-size: cover;
}
#trendingList li .relatedPct .pct img {
/*! width: 100%; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: auto;
max-width: 10000px;
}
#trendingList li .relatedPct .credit {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
}
#trendingList li .relatedPct .credit .caption {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
padding: 0 25px;
width: 100%;
order: 2;
}
#trendingList li .relatedPct .credit .caption > div {}
#trendingList li .relatedPct .credit .caption .category {
font-size: 1.3rem;
font-weight: 500;
letter-spacing: 0.06em;
margin-right: 10px;
}
#trendingList li .relatedPct .credit .caption .date {
font-size: 1.3rem;
color: #858585;
}
#trendingList li .relatedPct .credit .comment {
font-size: 2.1rem;
font-weight: 400;
line-height: 1.6;
padding: 0 25px 15px;
width: 100%;
order: 1;
/*! font-weight: 600; */
}
/* hover */
#trendingList li > a {}
#trendingList li > a:hover {
opacity: 1;
}
#trendingList li > a .pct img {
transition: all 1s ease 0s;
}
#trendingList li > a:hover .pct img {
transform: translate(-50%, -50%) scale(1.05);
}
/* MOREボタン */
#trendingArea .btn {}
#trendingArea .btn a,
#trendingArea .page_more {
width: 240px;
height: 50px;
margin: 0 auto;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
letter-spacing: 0.15em;
background: #272727;
color: #fff;
font-size: 1.7rem;
}
/* Ad BANNER AREA
------------------------------ */
#adbannerArea,#adbannerArea2 {display:none;}
#adbannerArea_m {margin-bottom: 70px;}
#adbannerArea_m .inner {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
padding: 0 25px;
}
#adbannerArea_m .adSet {
display: block;
order: 2;
}
/*TOPのみ*/
#pageHome #adbannerArea .adSet {
display:block;
}
/**/
#adbannerArea_m .adSet .insertAd {
width: 100%;
height: 280px;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
#adbannerArea_m .adSet .insertAd:not(:first-child) {
margin: 25px auto 0;
}
#adbannerArea_m .adSet .insertAd img {}
/* FEATURE AREA
------------------------------ */
#featureArea {
background: #222;
padding-bottom: 50px;
}
#pageArticle #featureArea {
padding-top: 50px;
}
#featureArea .headTitle {
color: #fff;
}
#featureArea .headTitle .ttl {
}
#featureArea .headTitle .sub {
}
#featureArea .sliderWrap {
}
#featureSlider {
max-width: 100%;
margin: 0 auto 40px;
width: 100%;
}
#featureSlider .list {
width: 400px;
/*! max-width: 380px; */
}
#featureSlider .list a {
border-radius: 6px;
overflow: hidden;
display: block;
background: #fff;
margin: 0 auto;
width: 380px;
}
#featureSlider .list a:hover {
opacity: 1;
}
#featureSlider .list a .pct {
position: relative;
padding-top: 66.286%;
width: 100%;
height: 0;
overflow: hidden;
background: #fff url(/asset/img/bg_s.jpg) no-repeat 50% 50%;
background-size: cover;
}
#featureSlider .list a .pct img {
transition: all 1s ease 0s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.01);
height: 100%;
width: auto;
max-width: 10000px;
}
#featureSlider .list a:hover .pct img {
transform: translate(-50%, -50%) scale(1.06);
}
#featureSlider .list a .txt {
text-align: left;
padding: 20px;
}
#featureSlider .list a .txt .ttl {
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.625;
margin-bottom: 12px;
}
#featureSlider .list a .txt p {
color: #858585;
font-weight: 500;
font-size: 1.4rem;
letter-spacing: 0.04em;
line-height: 1.64;
}
#featureArea .sliderController {
}
/* RANKING AREA
------------------------------ */
#rankingArea {
/*! padding-bottom: 50px; */
}
#pageArticle #rankingArea {
padding-top: 50px;
}
#rankingArea .headTitle {
}
#rankingArea .headTitle .ttl {
}
#rankingArea .headTitle .sub {
}
#rankingArea .sliderWrap {
}
#rankingSp {
width: calc(100% - 50px);
/*! padding: 0 25px; */
border-top: 1px solid #E7E7E7;
margin: 0 auto;
}
#rankingSp .list {
border-bottom: 1px solid #E7E7E7;
padding: 5px 0;
}
#rankingSp .list a {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
#rankingSp .list a:hover {
opacity: 1;
}
#rankingSp .list a .number {
width: 34px;
height: 34px;
background: #333333;
border-radius: 5px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
font-weight: 700;
}
#rankingSp .list:nth-child(1) a .number { background: #D2C372; }
#rankingSp .list:nth-child(2) a .number { background: #BABABA; }
#rankingSp .list:nth-child(3) a .number { background: #BF966D; }
#rankingSp .list a .pct {
display: none;
}
#rankingSp .list a .pct img {
}
#rankingSp .list a:hover .pct img {
}
#rankingSp .list a .txt {
text-align: left;
width: calc(100% - 45px);
line-height: 1.5;
font-size: 1.7rem;
/*font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.7;*/
}
#rankingSlider {
display: none;
}
#rankingArea .sliderController {
display: none;
}
/* PHOTO AREA
------------------------------ */
#photoArea {
}
#pageArticle #photoArea {
padding-top: 50px;
}
#photoArea .headTitle {
}
#photoArea .headTitle .ttl {
}
#photoArea .headTitle .sub {
}
#photoArea .sliderWrap {
}
#photoSlider {
}
#photoSlider .list {
width: 174px;
padding: 0 5px;
}
#photoSlider .list .set {
width: 100%;
}
#photoSlider .list .set a {
display: block;
padding-top: 66.286%;
width: 100%;
height: 0;
overflow: hidden;
background: #fff url(/asset/img/bg_s.jpg) no-repeat 50% 50%;
background-size: cover;
}
#photoSlider .list .set a:hover {
opacity: 1;
}
#photoSlider .list .set a:nth-child(1) {
margin-bottom: 10px;
transform: translateX(-25%);
}
#photoSlider .list .set a:nth-child(2) {
transform: translateX(25%);
}
#photoSlider .list .set a img {
display: block;
transition: all 1s ease 0s;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.01);
height: 100%;
width: auto;
max-width: 10000px;
}
#photoSlider .list .set a:hover img {
transform: translate(-50%, -50%) scale(1.06);
}
#photoArea .sliderController {
/*display: none;*/
}
/* 共通エリア全体のWrapper
------------------------------ */
#subWrap {
width: 100%;
margin-top: 70px;
}
/* ###################################################### */
}
/* //@media */
@media screen and (max-width: 900px) and (min-width: 481px) {
#adbannerArea {
margin-bottom: 50px;
}
#trendingList {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
flex-direction: row;
}
#trendingList li {
width: calc(100% / 2 - 30px);
margin: 0 15px;
border-bottom: 1px solid #F2F2F3;
padding-bottom: 25px;
margin-bottom: 40px;
}
#trendingList li .relatedPct .credit .caption {
padding: 0;
order: 1;
}
#trendingList li .relatedPct .credit .comment {
font-size: 1.8rem;
padding: 20px 0 0;
order: 2;
}
#adbannerArea .adSet {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
}
#adbannerArea .adSet .insertAd,
#adbannerArea .adSet .insertAd:not(:first-child) {
margin: 0 15px 30px;
}
/* ###################################################### */
}
/* //@media */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/*
####################################################################################################
########## HTML コメントアウト記述ルール ##############################################################
####################################################################################################
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
////////////////////////////////////////////////////////////////////
///// メインコンテンツエリア（編集エリア） /////////////////////////
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
==================== 大ブロックエリア ====================
==================== //大ブロックエリア ====================
***** 中ブロックエリア ***************
***** //中ブロックエリア ***************
#ID名
//#ID名
.class名
//.class名
[memo]
//[memo]
※※※※※ INCLUDE - HEADER ※※※※※
#include virtual="/common/inc_header.html"
※※※※※ //INCLUDE - HEADER ※※※※※
※※※※※ INCLUDE - FOOTER ※※※※※
#include virtual="/common/inc_footer.html"
※※※※※ //INCLUDE - FOOTER ※※※※※
[ id/class Name List ]
wrap > area > group > set > box or block
[ memmo ]
TOPページ →
Newsページ(第2階層) →
*/
/* #################################################################################################### */
/* ########## CSS コメントアウト記述ルール ########################################################## */
/* #################################################################################################### */
/* //////////////////////////////////////////////////////////////////// */
/* ///// ブロック区切り /////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */
/* ==================================================
大見出し
================================================== */
/* 中見出し（他、説明など）
------------------------------ */
/* ### 小見出し 1 ### */
/* ### ----- ### */
/* 小見出し 2 */
/* ----- */
/**/