@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* ulの点を消す */
ul {
list-style-type: none;
}
.entry-card-thumb, .widget-entry-card-thumb, .related-entry-card-thumb, .carousel-entry-card-thumb {
margin:0;
}
/* サイト名の調整 */
.logo-text {
padding: 10px 0 0;
}
.site-name-text{
font-size: 30px;
}
.tagline {
margin: 0.2em 1em;
}
/* FireFoxの横幅対応 */
#container {
overflow-x: hidden;
}
/* ウィンドウサイズ変更時のアニメーション抑制 */
/* .a-wrap {
transition-duration: 0s;
transition: all 0s ease;
} */
@keyframes tab-index-show {
}
/* h3調整 */
#main div.entry-content.cf h3{
background: #ecedef;
color: #333333;
margin-left:1rem;
line-height: 1;
height:40px;
}
/* 関連投稿の左肩のカテゴリ表示 */
.related-entry-card .cat-label{
font-size: 13px;
}
/* ウィジェットのタイトルを消す */
.main-widget-label{
display:none;
}
/* インデックスタブの文字の大きさ */
.index-tab-buttons .index-tab-button {
font-size:16px;
}
/*トップページ*/
/* メインの縦分割 */
.no-scrollable-main .main {
height:auto;
}
#main_bottom {
margin-top: 3rem;
}
div.entry-content h2{
background: #393f4c;
padding: 0.5rem;
color: white;
border-left: 5px solid orange;
}
/* 「新着記事ヘッダー」 */
h2.new_post ,
h2.insert-section-title{
line-height:2.5;
padding-left:1rem;
}
/* 管理人のひとこと */
#content-bottom-in{
top:10px;
left:20px;
position:absolute;
width: initial;
}
#content-bottom-in .speech-name{
color:white;
}
#content-bottom-in .speech-icon img, .speech-icon amp-img {
border:0px;
margin-bottom: -10px;
}
#content-bottom-in .speech-person {
min-width:60px;
width:60px;
}
#content-bottom-in .speech-balloon{
margin:1rem;
}
/* #==================== インデックス上 メニュー ========================== */
/* BOXメニュー */
#content-top-in {
background: white;
width: 100vw;
}
.content-top.wwa{
margin: 0 0 3.3rem;
}
#content-top-in .widget-content-top {
margin:0;
display: flex;
justify-content: center;
}
#content-top-in .widget-content-top .top_box_menu {
margin:0;
max-width: 750px;
width: 100%;
}
#content-top-in .widget_custom_html {
position:absolute;
right:0;
left:0;
margin:auto;
line-height: 1.2;
margin-top: 0.4rem;
}
.top_box_menu .box-menu{
padding: 0;
min-height: 0;
width: 20%;
min-width: 100px;
}
.top_box_menu .box-menu:hover{
box-shadow:none;
opacity: 0.8;
}
.top_box_menu .box-menu-icon *{
margin: 0.3rem 0 0.1rem;
max-width: 100%;
max-height: 30px;
}
/* カテゴリラベル */
.cat-label {
/*
display:none;
*/
border-bottom-right-radius: 7px;
font-size: 13px;
}
.contents_top_notice_sp{
display:none;
}
/* #==================== インデックス下 ランダム4列 ========================== */
.bottom_entry_cards {
display: flex;
justify-content: left;
flex-wrap: wrap;
}
.bottom_entry_cards a.widget-related-entry-card-link {
width: 19%;
min-width: 240px;
margin:0.3rem;align-content
}
.products_entry_cards {
display: flex;
justify-content: left;
flex-wrap: wrap;
}
.products_entry_cards a.widget-entry-card-link {
width:19%;
min-width: 240px;
margin:0.3rem;align-content
}
/*ウィジェット*/
.bottom_entry_cards .widget-related-entry-card-date{
display:block;
font-size: 0.9em;
text-align: right;
line-height: 1;
}
.bottom_entry_cards .widget-related-entry-card-date::before{
font-family: "Font Awesome 5 Free";
content: "\f017";
font-size: 0.7em;
line-height: 1;
}
.bottom_entry_cards .widget-related-entry-card-content.card-content{
margin-bottom:0;
}
.bottom_entry_cards a.widget-related-entry-card-link{
display: inline-block;
}x
.related-entry-card {
max-height: 320px;
}
.related-entry-card-thumb img {
max-height: 200px;
object-fit: cover;
}
/* #==================== インデックス4列 ========================== */
/* videoタグ */
.ect-vertical-card .mp4-thumb,
#related-entries .mp4-thumb{
width: 100%;
max-height: 98%;
object-fit: cover;
}
.mp4-thumb{
width: 100%;
height: 100%;
object-fit: cover;
}
/* 日付表示の大きさ固定 */
.entry-card-wrap .post-date{
width:80px;
}
.post-date .fa.fa-clock-o{
width:10px;
}
.post-date .entry-date{
width:57px;
}
.widget-related-entry-cards{
display:flex;
flex-wrap:wrap;
}
.ect-3-columns,
.widget-related-entry-cards {
justify-content: left;
}
.ect-3-columns .entry-card-wrap,
#main_bottom .widget-related-entry-cards .widget-related-entry-card-link {
width: 19%;
min-width: 235px;
margin:0.3rem;
}
.ect-3-columns .entry-card-snippet {
max-height: 4em;
overflow: hidden;
}
.ect-3-columns .ad-area {
width: 19%;
}
.device_icons {
display: flex;
justify-content: space-between;
padding: 0 10%;
}
.device_icons img{
margin:0 5px;
/* width: 22px; */
width: 100%;
object-fit: contain;
/* margin: -5px 0 5px;*/
}
/* カードのフォントサイズ */
.entry-card-title,
.bottom_entry_cards .widget-related-entry-card-title {
font-size: 14px;
font-weight: normal;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin: 0;
}
.ranking-visible .popular-entry-card-thumb,
.ect-vertical-card .entry-card-thumb {
aspect-ratio: 4 / 3;
}
.entry-card-thumb img {
width: 100%;
height: 171px;
background: #555;
}
/* 関連投稿の左寄せ */
.rect-vertical-card .related-list {
justify-content: left;
}
.list{
row-gap: 0.1rem;
}
/* #==================== サイドバー ========================== */
.popular-entry-card-title,
.widget-entry-card-title {
font-size: 14px;
}
/* サイドバーヘッダー */
h3.widget-title, .wp-block-heading,
h2.main-widget-title, .wp-block-heading {
background:#393f4c;
color:white;
border-left:5px solid orange;
height:45px
}
/* ブロック要素にアイコンバッジを表示 */
/* アイコン部 */
.live-badge{
display: block;
position: relative;
}
.live-badge:before {
position: absolute;
display: inline-block;
bottom: 0px;
right: 0px;
font-weight: bold;
background-color: #f00;
border-radius: 10%;
font-size: 0.9rem;
line-height: 0.8;
min-width: 1em;
padding: 5px 5px 3px 1.5rem;
border: 1px solid #fff;
color:white;
background-image:url("https://dan-scripts.com/wp-content/uploads/liveicon.webp?1");
background-repeat: no-repeat;
background-position: left;
background-size: 1.2rem;
background-position-x: 0.2rem;
content: "LIVE";
}
.DLsite_imglist img{
margin-bottom:2px;
}
/* #==================== 各投稿ページのURL一覧表 ========================== */
.post_url_table img{
width: 64px;
vertical-align: top;
}
.post_url_table th img{
max-width: 32px;
width: 99%;
}
.post_url_table td img{
height: 64px;
width: 64px;
margin-right: 0.5rem;
object-fit: contain;
/* border-radius:50%; */
}
.post_url_table .url_row{
line-height:1.4;
}
.post_url_table .url_row td div{
display: flex;
align-items: center;
}
.post_url_table .url_row td.has_device_1{
background: mistyrose;
}
.post_url_table .url_row td.has_device_2{
background: paleturquoise;
}
.post_url_table .url_row td:first-child{
min-width:190px;
}
.post_url_table .url_row .is_free_img {
width:32px;
height:32px;
margin:0;
}
table.post_url_table tr,
table.post_url_table tr td{
border:none;
}
table.post_url_table th {
background-color: #393f4c;
color: white;
}
/* 投稿ページのURL一覧表 */
.csv_link_sm{
display:none;
}
/* 投稿の下のタグデザイン */
.entry-tags a{
border:1px solid lightgrey;
border-width:0px 1px 1px 0px;
}
/* 機器 */
a.tag-type-1{ background:#f4c75f33; }
a.tag-type-1 .fa-tag:before { color:#f4c75f;}
/* CSV制作者 */
a.tag-type-2{ background:#7a98ce33; }
a.tag-type-2 .fa-tag:before { color:#7a98ce;}
/* サークル */
a.tag-type-3{ background:#20948B33; }
a.tag-type-3 .fa-tag:before { color:#20948B;}
/* 声優 */
a.tag-type-4{ background:#EC96A433; }
a.tag-type-4 .fa-tag:before { color:#EC96A4;}
/* 投稿ページのFANZAリンクロゴ */
.linklogo::before{
width: 50px;
margin: 0 2px 3px;
padding: 1px 5px 0px;
vertical-align: bottom;
display: inline-block;
border-radius: 5px;
}
.linklogo_fanza::before {
content: url('data:image/svg+xml;utf-8,');
background: #ee2737;
}
.linklogo_dlsite::before {
content: url('data:image/svg+xml;utf-8,');
background: #052a83;
}
.linklogo_fantia::before {
content: url('data:image/svg+xml;utf-8,');
background: #d47b25;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1634px以下*/
@media screen and (max-width: 1634px){
.ect-3-columns .entry-card-wrap,
#main_bottom .widget-related-entry-cards .widget-related-entry-card-link {
width: 32%;
max-width: 300px;
margin: 0.2rem;
}
.entry-card-thumb img {
height: initial;
}
.main_wrap{
margin: 0 .5%;
}
.main_wrap {
width: 77%;
}
.main {
width: 98%;
}
.sidebar {
width:20%;
padding:20px;
}
}
/*1449px以下*/
@media screen and (max-width: 1449px){
/*必要ならばここにコードを書く*/
.sidebar {
width:20%;
padding:17px;
}
/* .entry-card-thumb img {
height: 214px;
} */
.entry-card-thumb img {
height: initial;
}
}
/*1023px以下*/
@media screen and (max-width: 1120px){
/*必要ならばここにコードを書く*/
.ect-3-columns .entry-card-wrap,
#main_bottom .widget-related-entry-cards .widget-related-entry-card-link {
width: 45%;
margin: 0.3rem;
}
.entry-card-thumb img {
height: initial;
}
/* ひとこと消す */
#content-bottom-in{
display:none;
}
/* 下部のスペシャルコンテンツ消す */
#main_bottom {
display:none;
}
}
/*1023px以下*/
@media screen and (max-width: 1023px){
.main_wrap {
width: 98%;
}
.csv_link_md {
display: none;
}
.csv_link_sm{
display:block;
}
/* バナー 2列*/
.banner_wrapper {
display:flex;
flex-wrap:wrap;
}
.banner_wrapper > div {
width:49%;
}
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
/* 18歳未満消す */
.contents_top_notice{
display:none;
}
/* 18歳未満sp 出す */
.contents_top_notice_sp{
display:block;
}
/* BOXメニュー sp */
#content-top-in {
padding: 0;
}
#content-top-in .widget-content-top .top_box_menu {
margin:0;
}
.top_box_menu .box-menu{
min-width: 50px;
}
.content-top.wwa{
margin: 0 0 5rem;
}
}
/*550px以下*/
@media screen and (max-width: 550px){
/*必要ならばここにコードを書く*/
/* インデックス */
.ect-3-columns .entry-card-wrap {
width: 46%; /* 2colmun */
/* width: 92%; */ /* 1colmun */
min-width: 150px;
max-width: initial;
min-height: 200px;
margin: 0.3rem;
padding: 0.2rem;
}
#main_bottom .widget-related-entry-cards .widget-related-entry-card-link {
width: 47%;
min-width: 150px;
max-width: initial;
margin: 0.3rem;
padding: 0.2rem;
}
.ect-vertical-card .entry-card-wrap .entry-card-thumb {
/* height:65%; */
}
#main .list article figure img {
height: 100%;
}
.ect-vertical-card .entry-card-wrap .entry-card-content {
margin: 5px 0 0;
padding-bottom: 0.2em;
}
/* 宣伝欄 */
.products_entry_cards a.widget-entry-card-link.a-wrap {
width:48%;
max-width: initial;
margin: 0.3rem;
}
/* 各投稿内のamazonリンク */
.amazon_block .wp-block-columns .wp-block-column .wp-block-columns .wp-block-column{
max-width: 45%;
}
#sidebar .popular-entry-cards,
#sidebar .new-entry-cards{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
#sidebar .popular-entry-cards a.popular-entry-card-link,
#sidebar .new-entry-cards a.new-entry-card-link{
width:49.5%;
}
#sidebar .popular-entry-cards a.popular-entry-card-link:first-child,
#sidebar .new-entry-cards a.new-entry-card-link:first-child{
width:100%;
}
/* DLsiteリンク */
/*
#sidebar .DLsite_imglist > a{
width:49.5%;
display:block;
}
#sidebar .DLsite_imglist > a:first-child{
width:100%;
}
*/
/* インデックスの中央寄せ化 */
.ect-3-columns,
.widget-related-entry-cards {
justify-content: center;
}
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
/* ####===================================================== 声優一覧用 ==================================================== */
#actor_area .actor_list {
display: flex;
flex-wrap: wrap;
padding-left:38px;
}
#actor_area a:Hover{
opacity:0.8;
}
#actor_area .actor {
/*width:300px;*/
}
#actor_area .actor_name{
font-weight: bold;
text-align: center;
font-size: 18px;
color: #555;
}
#actor_area .actor_img{
object-fit: cover;
width: 150px;
height: 150px;
}
/*550px以下*/
@media screen and (max-width: 550px){
#actor_area li {
margin: 0;
width: 33%;
}
#actor_area .actor_name{
font-size: 13px;
}
#actor_area .actor_img{
width: 100%;
height: auto;
aspect-ratio: 1;
}
}
/*------------------- 各商品ページ内の声優一覧 ----------------------*/
.voice_actor_table .voice_actor_area{
display:flex;
flex-wrap:wrap;
}
.voice_actor_table .voice_actor{
margin-right:1rem;
width:200px;
}
/* ####===================================================== 声優一覧用 ==================================================== */
/* ####===================================================== 詳細検索用 ==================================================== */
.tagWrapper h4 {
margin: 0;
}
div.tagAreaTop {
margin: 5px 5px 5px;
}
.child_categorys {
padding: 0.5rem 0 0 1.5rem;
}
.tagArea label {
user-select: none;
}
.tagArea label:hover {
background: #E8F9FF;
}
.checkbox-002 {
display: flex;
flex-wrap: wrap;
gap: .5em 2em;
border: none;
margin: 5px 5px 2rem;
}
.checkbox-002 label {
display: flex;
align-items: center;
gap: 0 .5em;
position: relative;
cursor: pointer;
width: 20%;
min-width: 250px;
}
.checkbox-002 label::before {
width: 18px;
height: 18px;
border-radius: 3px;
border: 2px solid #d6dde3;
content: '';
}
.checkbox-002 label:has(:checked)::after {
position: absolute;
top: 6px;
left: 7px;
transform: rotate(45deg);
width: 5px;
height: 10px;
border: solid #1fa2ff;
border-width: 0 3px 3px 0;
content: '';
}
.checkbox-002 label:has(.indeterminate)::after {
position: absolute;
top: 13px;
left: 3px;
width: 16px;
height: 2px;
border: solid #ccc;
border-width: 0 0 2px 0;
content: '';
}
.checkbox-002 label:has(:checked) {
background: #e4f1ff;
}
.checkbox-002 input {
display: none;
}
.button-003 {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
margin: 0 auto;
padding: .9em 2em;
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
background-color: #2589d0;
color: #fff;
font-weight: 600;
font-size: 1em;
cursor: pointer;
}
.button-003:hover {
background-color: #1579c0;
}
/* .search-submit-btn {
width: 100px;
margin: 0 auto;
padding: .9em 2em;
border: none;
border-radius: 5px;
box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
background-color: #2589d0;
color: #fff;
cursor: pointer;
}
.search-submit-btn:hover {
background-color: #1579c0;
} */
.inputGroup {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
z-index: 30;
}
.searchInput {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: var(--cocoon-basic-border-radius);
border-bottom-left-radius: var(--cocoon-basic-border-radius);
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 70%;
}
.filterBtn {
width: 120px;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border: 1px solid var(--cocoon-basic-border-color);
margin-left: -1px;
cursor: pointer;
}
.searchBtn {
width: 120px;
border-top-right-radius: var(--cocoon-basic-border-radius);
border-bottom-right-radius: var(--cocoon-basic-border-radius);
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border: 1px solid #2589d0;
margin-left: -1px;
background-color: #2589d0;
color: #fff;
cursor: pointer;
}
.searchBtn:hover {
background-color: #1579c0;
}
.searchBtnLabel {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
form:has(.ac-check:not(:checked)) .filterCardArea:has(.selectTermArea:not(:empty)) {
display: flex!important;
}
.filterCardArea{
display: none!important;
}
.ac-check:checked+.ac-content {
height: 100%;
opacity: 1;
visibility: visible;
display: block;
}
.ac-content {
height: 0;
transition: .3s;
opacity: 0;
visibility: hidden;
border-width: 1px;
border-style: solid;
border-color: var(--cocoon-custom-border-color);
border-top-width: 0;
border-bottom-left-radius: var(--cocoon-basic-border-radius);
border-bottom-right-radius: var(--cocoon-basic-border-radius);
margin-bottom: 1rem;
position: relative;
padding: 0.5rem;
z-index: 10;
display: table-column;
}
.tab-001 {
display: flex;
flex-wrap: wrap;
}
.tab-001>label.tabLabel {
flex: 1 1;
order: -1;
min-width: 90px;
padding: .7em 1em .5em;
border-bottom: 1px solid #f0f0f0;
border-radius: 0;
background-color: #e9f0f6;
color: #535353;
font-size: .9em;
text-align: center;
cursor: pointer;
user-select: none;
}
.tab-001>label.tabLabel:hover {
opacity: .8;
}
.tab-001 input {
display: none;
}
.tab-001>div.tab {
display: none;
min-height: 230px;
width: 100%;
padding: 0.5em 0.5em;
background-color: #fff;
border-color: #fff var(--cocoon-custom-border-color) var(--cocoon-custom-border-color) var(--cocoon-custom-border-color) ;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.tab-001 label.tabLabel {
display: flex;
justify-content: center;
align-items: center;
border-color: #f0f0f0 var(--cocoon-custom-border-color) #fff;
border-style: solid;
border-width: 4px 1px 1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tab-001 label.tabLabel:has(:checked) {
background-color: #fff;
border-color: #2589d0 var(--cocoon-custom-border-color) #fff;
border-style: solid;
border-width: 4px 1px 1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #333333;
}
.tab-001 label.tabLabel:has(:checked)+div.tab {
display: block;
}
.tabLabel:has(+ .tab > .tagArea label > input:checked) > .tabIcon,
.tabLabel:has(+ .tab > .tagArea > label > input:checked) > .fa-stack > .tabIcon,
.tabLabel:has(+ .tab > .tab-001 > .tab input:checked) > .tabIcon
{
color:#20d214;
}
.optionsArea {
width: 100%;
padding: 0px 1em;
background-color: #fff;
border-color: var(--cocoon-custom-border-color);
border-style: solid;
border-width: 1px;
border-radius: 5px;
color: #333333;
margin: 1rem 0px 1rem!important;
padding: 1.5em 1em;
}
.tabTitleSm{
font-weight: bold;
font-size: 18px;
margin-top: 6px;
margin-bottom: 12px;
}
/* 検索欄のチェックマーク*/
.filterChecked {
display: none !important;
}
form:has(.tab input:checked:not([name='f2'])) .inputGroup .filterChecked,
form:has(.optionsArea input:checked:not([name='f2'])) .inputGroup .filterChecked {
display: block !important;
}
/* 選択Tag表示関連*/
.filterCardArea{
border-width: 0px;
border-style: solid;
border-color: var(--cocoon-custom-border-color);
border-radius: var(--cocoon-basic-border-radius);
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.5rem;
z-index: 1;
min-height: 45px;
background-color: #e9f0f6;
display: flex;
}
.selectTermArea {
display: flex;
justify-content: left;
flex-wrap: wrap;
flex-grow: 1;
}
.selectTerm {
border-width: 1px;
border-style: solid;
border-color: var(--cocoon-custom-border-color);
border-radius: var(--cocoon-basic-border-radius);
background-color: #f9fafc;
font-size: 12px;
margin-top: 0.125rem;
margin-bottom: 0.125rem;
margin-left: 0.2rem;
margin-right: 0.2rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.15rem;
min-width: 80px;
min-height: 30px;
display: flex;
justify-content: left;
align-items: center;
}
.selectTermDelBtn{
margin-left: 2rem;
margin-right: 0.2rem;
width:16px;
height:16px;
border: none;
background-color: transparent;
color: #999;
cursor: pointer;
}
.termCrear{
margin-left: auto;
}
.termCrearBtn{
margin-left: 2rem;
margin-right: 0.2rem;
width:16px;
height:16px;
border: none;
background-color: transparent;
color: #999;
cursor: pointer;
}
.searchBtnBox {
display: flex;
justify-content: center;
}
.searchBtnBottom {
width:200px;
height:50px;
margin:2px;
border-radius: var(--cocoon-basic-border-radius);
border: 1px solid #2589d0;
background-color: #2589d0;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.searchBtnBottom:hover {
background-color: #1579c0;
}
.searchResetBtn {
width:200px;
height:50px;
margin:2px;
border-radius: var(--cocoon-basic-border-radius);
background: none #404453;
border: 1px solid #404453;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.searchResetBtn:hover {
background-color: #585c6b;
}
/*1530px以下 では消える*/
@media screen and (width <= 1530px ) {
.respXlOnly {
display: none;
}
}
/* MD のみ*/
@media screen and ( width <= 1023px ) {
.respMdOnly {
display: none;
}
}
@media screen and (1530px < width ) {
.respMdOnly {
display: none;
}
}
/* SM のみ*/
@media screen and (1023px < width ) {
.respSmOnly {
display: none;
}
}
/*1023px以下では消える*/
@media screen and ( width <= 1023px ){
.respEl {
display: none;
}
}
/* ####===================================================== 詳細検索用ここまで ==================================================== */
/* ####===================================================== クリエイターリスト用 ==================================================== */
body {
--color--admin: #999999;
--color--free: #2891E2;
--color--paid: #FB6E65;
--color--voice: #2891E2;
--color--3d: #FB65B0;
--color--2d: #FBAF65;
--color--anime: #ffcdc5;
--color--real: #EEFB64;
--color--game: #FBAF65;
--color--device: #ADCB07;
}
.bold{
font-weight:bold;
}
/* ゲージの色 */
.color-bg-free{
background: var(--color--free);
}
.color-bg-paid{
background: var(--color--paid);
}
.color-bg-voice{
background: var(--color--voice);
}
.color-bg-3d{
background: var(--color--3d);
}
.color-bg-2d{
background: var(--color--2d);
}
.color-bg-anime{
background: var(--color--anime);
}
.color-bg-real{
background: var(--color--real);
}
.color-bg-game{
background: var(--color--game);
}
.color-bg-admin{
background: var(--color--admin);
}
/* 凡例 */
.color-free{
color: var(--color--free);
}
.color-paid{
color: var(--color--paid);
}
.color-voice{
color: var(--color--voice);
}
.color-3d{
color: var(--color--3d);
}
.color-2d{
color: var(--color--2d);
}
.color-anime{
color: var(--color--anime);
}
.color-real{
color: var(--color--real);
}
.color-game{
color: var(--color--game);
}
/* ゲージ */
.gauge_area {
margin:0 0 0.8rem;
}
.gauge{
width: 100%;
height: 7px;
display: flex;
flex-wrap: nowrap;
border-radius: 1rem;
overflow: hidden;
}
.gauge_element {
height: 100%;
border: 0 solid white;
border-width: 0 1px 0;
}
.gauge_element:first-child {
border-width: 0 1px 0 0;
}
.gauge_element:last-child {
border-width: 0 0 0 1px;
}
/*ゲージ下の凡例*/
ul.type_list{
display: flex;
flex-wrap: wrap;
justify-content: left;
padding: 0;
margin:0;
}
ul.type_list li.d-inline{
margin-right:1rem;
}
/* クリエイターリスト */
.creator_list{
display: flex;
flex-wrap: wrap;
padding:1rem;
}
.creator *{
user-select: none;
}
.creator_list .creator {
width:400px;
height:220px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(0, 0, 0, 0.20);
border-radius: 4px;
transition-duration: 0.3s;
margin:0.3rem;
}
.creator_list .creator:hover {
background-color: transparent;
/*transform: translateY(-4px);*/
box-shadow: 0 0 2px 5px rgba(0, 0, 0, 0.20);
transition-duration: 0.3s;
}
a.link{
text-decoration: none;
display: block;
padding: 1rem;
color: initial;
}
.creator_name{
font-weight:bold;
font-size:20px;
border-bottom:1px solid #555555;
padding-left:1rem;
}
.creator_img {
padding: 0 1rem 0 0;
}
.post_count_area{
display: flex;
bottom: 0;
position: absolute;
align-items: end;
}
.post_count2{
font-size:20px;
line-height: 1.2;
}
.post_count3{
margin-right: 0.5rem;
}
/* パネル */
.panels {
display: flex;
flex-wrap: wrap;
font-size:12px;
padding: 0.5rem;
}
.panel {
display:inline-block;
}
.left {
width:30%;
position: relative;
}
.right{
width:68%;
}
.device_row{
display: flex;
align-items: center;
justify-content: space-around;
}
.device_img {
display: inline-block;
height:30px;
margin:0 5px 0;
opacity: 0.8;
}
.dev_rate_area {
text-align: center;
font-weight:bold;
}
@media screen and (max-width: 834px) {
.article ul,
.article ol {
padding: 0;
}
.creator_name {
font-size: 18px;
}
.post_count1{
width:99%;
}
.post_count_area {
flex-wrap: wrap;
justify-content: center;
}
.type_list span{
font-size:11px;
}
a.link {
padding: 0.5rem;
}
.left {
width: 27%;
}
.right{
width: 72%;
}
.creator_img {
padding-right: 3px;
}
.panels {
padding: 0.3rem;
}
.DLsite_imglist img{
width:49%;
}
}
/* ####===================================================== クリエイターリスト用 ==================================================== */
/* ####===================================================== ピックアップクリエイター用 ==================================================== */
.pickup_creator_list{
display:flex;
flex-wrap: nowrap;
margin-bottom:0;
border-bottom:1px solid darkgray;
}
.pickup_creator_post{
display:flex;
padding: 1.2rem;
max-height:440px;
margin-bottom:0;
max-width: 60%;
}
.pickup_creator_post a{
max-height: 220px;
min-width:220px;
width: 30%;
margin:5px;
}
.pickup_creator_post a .widget-entry-card {
height: 100%;
}
.pickup_creator_post a .widget-entry-card > figure{
height: 100%;
}
.pickup_creator_post a .widget-entry-card > figure > video{
height: 100%;
}
.pickup_creator_post a .widget-entry-card > figure > img{
object-fit: cover;
height: 100%;
}
.pickup_creator_list .new-entry-cards{
margin:0;
}
/*1530px以下 では消える*/
@media screen and (width <= 1634px){
.pickup_creator_post a:nth-child(3) {
display:none;
}
}
@media screen and ( width <= 1366px ) {
.pickup_creator_post a:nth-child(2) {
display:none;
}
}
@media screen and ( width <= 782px ) {
.pickup_creator_post{
display:none;
}
.pickup_creator_list .creator_list{
padding:0;
}
}
@media screen and ( width <= 450px ) {
.pickup_creator_list .creator_area,
.pickup_creator_list .creator{
width:100%;
}
}
/* ####===================================================== ピックアップクリエイター用ここまで ==================================================== */