@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
    /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
    /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
    /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
    /*必要ならばここにコードを書く*/
}




.scrollable-table th.noscroll, .scrollable-table td.noscroll {
    /* テキストを折り返す設定 */
    white-space: normal;
}


/* PageSpeed Insights キー リクエストのプリロード 改善対応 */
/*
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src:url("https://anime-song-info.com/wp-content/themes/cocoon-master/webfonts/fontawesome5/webfonts/fa-regular-400.woff2") format("woff2"),
         url("https://anime-song-info.com/wp-content/themes/cocoon-master/webfonts/fontawesome5/webfonts/fa-solid-900.woff2") format("woff2");
  font-display: swap;
 }
*/



/**********************/
/*   VOD 一覧          */
/**********************/
ul.vodList{
    border: 0;
    list-style-type: none;
    display: inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 10px auto;
    padding: 0;
    width: 100%;
    /*place-content: space-between space-evenly;*/
}
li.vodItem{
    position: relative;
    width: 30%;
    height: 30px;
    padding: 0;
    margin: .5em 1% .4em 0;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
    font-weight: 500;
    font-size: .8em;
    border-radius: 6px;
    border: 0;
    text-shadow: initial;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: list-item;
}
li.vodItem:hover{
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}
li.vodItem a{
    color: rgba(0,0,0,.54);
    text-indent: 0;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    position: relative;
    display: block;
    text-decoration: none;
    width: 100%;
    padding: 0;
    padding-right: 18px;
    padding-left: 6px;
    margin: 0;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
li.vodItem a::after{
    display: inline-block;
    font-family: "mchic", "Font Awesome 5 Free";
    content: "\f054";
    right: 5%;
    position: absolute;
    font-size: 13px;
    line-height: 30px;
    font-weight: 900;
}
li.vodItem a{
    color: #fff;
}
li.vodAmazonVideo a
,li.vodanime_houdai a
,li.vodAnimeTimes a
{
    color : rgba(0,0,0,.54);
}

li.vodhulu{
    background: #66AA33;
}
li.vodbandai a
, li.vodcrank-in a
, li.vodvideomarket a
{
    font-size: 11px!important;
}

li.vodhulu{
    background: #66AA33;
}
li.vodnetflix{
    background: #DC0611;
}
li.vodAmazonVideo
,li.vodAnimeTimes
{
    background: #FFC266;
}
li.vodabema{
    background: #79C944;
}

li.vodd_anime{
    background: #EB5528;
}
li.vodfod{
    background: #FF3F3F;
}
li.vodU-NEXT{
    background: #0570BF;
}
li.vodd_tv{
    background: #CA0E30;

}
li.vodd_tv_ch{
    background: #00A2E6;
}
li.vodtsutaya_tv{
    background: #09235D;
}
li.vodtsutaya_tv a{
    color:#F9C432;
}
li.vodhikaritv{
    background: #01A2E6;
}
li.vodmusic_jp{
    background: #BC3038;
}
li.vodsmart_pass{
    background: #FF8B4C;
}
li.vodrakuten{
    background: #bf0000;
}
li.vodTELASA{
    background: #E9580A;
}
li.voddmm{
    background: #4DB4DD;
}
li.vodanime_houdai{
    background: #F1C612;
}
li.vodAnimeFesta{
background: #f85d69;
}
li.vodbandai
, li.vodanitv
, li.vodTver
, li.vodvideopass
, li.vodvideomarket
, li.vodyoutube
, li.vodgoogle_play
, li.vodgyao
, li.vodjcom
, li.vodniconico
, li.vodps_video
, li.vodgeotv
, li.vodhappy
, li.vodmoviefull
, li.vodcrank-in
, li.vodComicFesta
, li.vodmilplus
, li.vodactvila
, li.vodcocoroplus
, li.vodflat-flat
, li.vodvidex
, li.vodjanbari
, li.vodmbs_dizm
, li.vodanimax
, li.vodtenohira
, li.vodcu-ntv
, li.vodmilplus
, li.voddisney
, li.vodParavi
{
    background: #537791;
    /*background: #AAD6EC;*/
}

@media screen and (max-width: 480px){
    ul.vodList{
        margin-top: 0!important;
    }
    li.vodItem{
        /*width: 30%;*/
        width: 45%;
        /*height: 30px;*/
        height: 50px;

        margin-top: 0.5em!important;
        margin-bottom: 0.5em!important;
    }

    li.vodItem a,
    li.vodItem a:after
    {
        line-height: 50px;
    }
}

/**********************/
/*   VOD 一覧          */
/**********************/







/*********************/
/*  SongDL list      */
/*********************/
ul.dgsList{
    border: 0;
    list-style-type: none;
    display: inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 10px auto;
    padding: 0;
    width: 100%;
    place-content: space-between space-evenly;
}
li.dgsSong
, li.dgsNotItem{
    position: relative;
    width: 48%;
    height: 30px;
    padding: 0;
    margin: .5em 1% .4em 0;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
    font-weight: 500;
    font-size: .8em;
    border-radius: 6px;
    border: 0;
    text-shadow: initial;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: list-item;
}
li.dgsAmazonLink
, li.dgsAmazonUnlLink{
    background: #FFC266;
}
li.dgsAplMscLink{
    background: #FF2F56;
}
li.dgsITunesLink{
    background: #4AC2D2;
}
li.dgsRecochokuLink{
    background: #E5006E;
}
li.dgsSpotifyLink{
    background: #1ed760;
}
li.dgsLineMusicLink{
    background: #06C755;
}
li.dgsNotItem{
    background: #adadad;
}
li.dgsSong:hover{
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}
li.dgsSong a, li.dgsNotItem span{
    color: rgba(0,0,0,.54);
    text-indent: 0;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    position: relative;
    display: block;
    text-decoration: none;
    width: 100%;
    padding: 0 18px;
    margin: 0;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
li.dgsAplMscLink a
, li.dgsITunesLink a
, li.dgsLineMusicLink a
, li.dgsRecochokuLink a{
    color: #fff;
}
li.dgsSpotifyLink a
{
    color: #010d06;
}

li.dgsSong a::after
, li.dgsNotItem span::after{
    display: inline-block;
    font-family: "mchic", "Font Awesome 5 Free";
    content: "\f054";
    right: 5%;
    position: absolute;
    font-size: 13px;
    line-height: 30px;
    font-weight: 900;
}
li.dgsNotItem span::after{
    content: "";
}
dd.dgsListDD{
    /*margin-inline-start: 0;*/
    margin: 0;
}
dt.dgsListDt > div {
    padding: 10px;
    margin-bottom: 1px;
}
/*********************/
/*  SongDL list      */
/*********************/








/************************************
** ボックスナビ START
** https://ponhiro.com/box-nav/
************************************/
.p-nav{
    margin:2em 0;/* 全体外余白 */
    padding:0;/* 全体内余白 */
}
.p-nav ul{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    list-style:none;
    margin:0;
    padding:0;
    border:none;
}
.p-nav ul li{
    -ms-flex-preferred-size: calc(100%/4);/* 4列 */
    flex-basis: calc(100%/4);/* 4列 */
    margin:0;
    padding:0;
    text-align:center;
    box-shadow: inset 1px 1px 0 0 #e0ddd1, 1px 1px 0 0 #e0ddd1, 1px 0 0 0 #e0ddd1;/* 罫線 */
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    min-height:100px;/* 最低の高さ */
    cursor:pointer;
    background:#fff;/* 背景色 */
}
.p-nav ul li:hover{
    z-index:2;
    box-shadow: inset 2px 2px 0 0 #f6a068, 2px 2px 0 0 #f6a068, 2px 0 0 0 #f6a068, 0 2px 0 0 #f6a068;/* 罫線(マウスホバー) */
    transition: 0.35s ease-in-out;
}
.p-nav ul li:before{
    content:unset !important;
}
.p-nav ul li a{
    display:block;
    padding: 0.5em 1em;/* 内余白 */
    text-decoration:none;
    width:100%;
}
.p-nav ul li a:hover{
    background:none;
    opacity:1;
}
.p-nav ul li a img{
    max-width:50% !important;/* 画像横幅 */
    height: auto !important;
    filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.1));/* 画像影 */
    display: inline-block;
}
.p-nav .p-nav-title{
    display: block;
    color: #666;/* 文字色 */
    font-size: 0.7em;/* 文字大きさ */
    letter-spacing: 1px;
    font-weight: 600;/* 文字太さ */
    text-align: center;
    line-height: 1.5;/* 文字行間高さ */
}
/* サイドバー */
.sidebar .p-nav ul li{
    -ms-flex-preferred-size: calc(100%/2);/* 2列 */
    flex-basis: calc(100%/2);/* 2列 */
}
/* スマホ */
@media screen and (max-width: 559px) {
    .p-nav ul li{
        -ms-flex-preferred-size: calc(100%/2);/* 2列 */
        flex-basis: calc(100%/2);/* 2列 */
    }
}
/* fontawesome */
.p-nav ul li a i,.p-nav ul li a svg{
    font-size: 40px;/* アイコン大きさ */
    padding: 10px 0;/* アイコン余白 */
    color: #AAD6EC;/* アイコン色 */
    display:inline-block;
}
/* fontawesome(2番目) */
.p-nav ul li:nth-of-type(2) a i,.p-nav ul li:nth-of-type(2) a svg{
    color:#AAD6EC;/* アイコン色 */
}
/* fontawesome(3番目) */
.p-nav ul li:nth-of-type(3) a i,.p-nav ul li:nth-of-type(3) a svg{
    color:#AAD6EC;/* アイコン色 */
}
/* fontawesome(4番目) */
.p-nav ul li:nth-of-type(4) a i,.p-nav ul li:nth-of-type(4) a svg{
    color:#AAD6EC;/* アイコン色 */
}
/************************************
** ボックスナビ END
************************************/










/** サイドバーのボタンの矢印を消す */
.not-btn-arw::after{
    content: "" !important;
}




/***************************
右下 目次へボタンカスタマイズ
************************** */
.gttbtn {
    width: 60px; /* 横幅 */
    height: 60px; /* 高さ */
    flex-direction: column;

    border-radius: 50%; /* 丸くする */
    color:black;
    box-shadow: 0 0 1px 1px rgba(255,255,255,.8);
}

/*.myTocBtnFnt{*/
/*	margin-top: 2px;*/
/*}*/

@media screen and (max-width: 1023px) {
    .mobile-button-fmb .go-to-top-button {
        display: flex;
    }
}
.go-to-top{
    z-index: 2;
    /* 	bottom: 75px; */
    opacity: .6;
}


/***************************
テーブルの囲いdivが縦スクロール付くのを外す
************************** */
.scrollable-table {
    overflow-y: hidden!important;
    overflow-x:auto!important;
}




/*__MY_CUSTOM_STYLE_CSS_MANAGER_TOP_START__*/
/*** 上のコメントは変更しないで下さい ***/

/*** 下のコメントは変更しないで下さい ***/
/*__MY_CUSTOM_STYLE_CSS_MANAGER_TOP_END__*/

/*__MY_CUSTOM_STYLE_CSS_MANAGER_MIDDLE_START__*/
/*** 上のコメントは変更しないで下さい ***/
.blogcard {
    padding: 1rem;
    color: #666;
    position: relative;
    /*
    border-color: #68d6cb !important;
    */
}

a.blogcard-wrap:hover{
    background-color: transparent!important;
    opacity: 0.8;
}

a.blogcard-wrap:hover img.blogcard-thumb-image{
    transform: scale(1.1);
    transition: .3s;
}

.blogcard-thumbnail {
    line-height: 0;
    margin-right: 1rem;
    overflow: hidden;
}

.blogcard-title{
    margin-bottom: .5rem;
}

.blogcard-snipet{
    font-size: 70%;
    line-height: 1.7;
    padding-right: 10%;
}

@media screen and (max-width: 480px){
    .blogcard-thumbnail{
        width: 40%;
    }
    .blogcard-snipet{
        display: none;
    }
}

.internal-blogcard-footer{
    display: none;
}
/*
.blogcard::before{
	content: 'あわせて読みたい';
	position: absolute;
	top: -.8rem;
	left: auto;
	font-size: 50%;
	background-color: #68d6cb;
	padding: .6em 1em;
	font-weight: bold;
	color: #fff;
	border-radius: 2px;
}
*/
.internal-blogcard::after{
    content: '続きを読む \00bb';
    position: absolute;
    bottom: .5rem;
    right: 1rem;
    font-size: 70%;
    background-color: #1967d2;
    padding: .4em 3em;
    font-weight: bold;
    color: #fff;
    border-radius: 2px;
}








.external-blogcard-footer{
    display: none;
}
.external-blogcard::after{
    content: '続きを読む \00bb';
    position: absolute;
    bottom: .5rem;
    right: 1rem;
    font-size: 70%;
    background-color: #1967d2;
    padding: .4em 3em;
    font-weight: bold;
    color: #fff;
    border-radius: 2px;
}

/*768px以下*/
@media screen and (max-width: 768px){
    .blogcard {
        border-color:initial!important;
        border:initial;
    }
}




/* 画像に枠線を付ける */
img.waku {
    border: solid 1px #808080; /* 枠線のスタイル 太さ 色 */
    box-shadow: 0px 0px 5px #808080; /* 影の水平方向の距離 垂直方向の距離 ぼかしの距離 色 */
}



/* 目次をセンター */
.toc {
    margin: 0 auto 1em;
    width: 90%;
}


/* サイドバーの目次 */
.toc-widget-box > .toc  {
    width: 100%;
}

.toc-widget-box > .toc li {
    padding-top:3px;
    padding-bottom:3px;
}
/*
.toc-widget-box > .toc li > a {
   text-decoration: none;
   border-bottom: 1px solid black;
}
*/
.toc-widget-box{
    /*height: calc(100vh - 200px);*/
    max-height: 60vh;
    overflow-y: auto;
}


.toc ul, .toc ol {
    padding-left: 10px;
}


/* strong */
.strong {
    font-weight: bold;
}


/*** color効果 ***/
a {
    color: #1a0dab;
}

/*.cat-label{*/
/*    color: #292b2b;*/
/*}*/

/*.kjk_fixed_headline {*/
/*  width: 100%;*/
/*  position: fixed;*/
/*  top: 0;*/
/*  padding-left: 10px;*/
/*!*  background-color: #f7f7f7;*!*/
/*  background-color: #AAD6EC;*/
/*  color: #252525;*/

/*  font-size: 14px;*/
/*  font-weight: bold;*/
/*!*  z-index: 50; *!*/
/*  z-index: 2;*/
/*  */
/*  border-left: none;*/
/*  !*border-bottom: 3px solid #dadada;*!*/
/*  border-bottom: 1px solid #EEF9FF;*/
/*  text-align: left;*/
/*}*/

/*.kjk_fixed_headline_inner{*/
/*  !*width: 1236px;*!*/
/*  !*margin: 0 auto;*!*/
/*  display: block;*/
/*}*/

.sidebar-scroll {
    top: 20px;
}


.mch-box-LR-pad {
    padding-left:20px;
    padding-right:20px;
}

.mch-box31 .mch-box-title{
    margin: -15px -15px 15px;
    padding: 8px 4px;
    /*    background: #5fc2f5;*/
    background: #42af69;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
    line-height: 1.5;
}
.mch-box-title {
    font-weight: 700;
}
.mch-box31{
    margin: 2em 0;
    padding: 0 15px 10px;
    /*    background: #edf6ff;*/
    background: #f9ffeb;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.mch-btn_linkamazon>a {
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
    background-color: #ffc266!important;
    color: #3a4d66!important;
    font-weight: 700!important;
}


/*** 下のコメントは変更しないで下さい ***/
/*__MY_CUSTOM_STYLE_CSS_MANAGER_MIDDLE_END__*/

/*__MY_CUSTOM_STYLE_CSS_MANAGER_BOTTOM_START__*/
/*** 上のコメントは変更しないで下さい ***/

/*** 下のコメントは変更しないで下さい ***/
/*__MY_CUSTOM_STYLE_CSS_MANAGER_BOTTOM_END__*/





/**
https://web.monogusa-note.com/cocoon-back-toc-auto
 */
/* 目次に戻るリンクを機能させる */
.toc-checkbox {
    height: 0;
    overflow: hidden;
    display: block;
    visibility: hidden;
}

a.no-ext > span::before{
    content: none;
}


#notice-area{
    font-weight: 700;
}

/*#notice-area:before {*/
/*    font-family: "Font Awesome 5 Free";*/
/*    !*content: "\f06b";*!*/
/*}*/

/* 通知エリア */
#notice-area-wrap{
    box-shadow: 0 3px 6px rgba(0,0,0,.18);
}

/*
#notice-area:before {
    font-family: "FontAwesome";
    content: "\f270";
}
#notice-area:after {
    content: "クリックして見に行く";
    font-weight: 500;
    border: 3px solid #80cbc4;
    border-radius: 5px;
    padding: 2px 10px;
    margin-left: 5px;
}
#notice-area:after {
    content: "30日(月)24時まで";
    font-weight: 500;
    border: 3px solid #3a4d66;
    border-radius: 5px;
    padding: 2px 10px;
    margin-left: 5px;
}
*/
/*
@media screen and (max-width: 650px){

    #notice-area:after {
        display: block;
    }

}
*/




        /*<editor-fold desc="作品ランキング折りたたみ">*/
        .animeranking-read-more-3 {
            position: relative;
        }

        .animeranking-read-more-3 div.ani-rank {
            position: relative;
            /*max-height: 100px; !* 開く前に見せたい高さを指定 *!*/
            max-height: 400px; /* 開く前に見せたい高さを指定 */
            margin-bottom: 10px;
            overflow: hidden;
            transition: max-height 1s;
        }

        .animeranking-read-more-3:has(:checked) div.ani-rank {
/*             max-height: 300vh; */
            max-height: 70vh;
            overflow-y: auto; /* 開いた後はスクロールを有効にする */
        }

        .animeranking-read-more-3 div.ani-rank::after {
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff);
            content: '';
        }

        .animeranking-read-more-3:has(:checked) div.ani-rank::after {
            content: none;
        }

        .animeranking-read-more-3 label.ani-rank {
            display: flex;
            align-items: center;
            gap: 0 4px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            padding: .4em 1.2em;
            border-radius: 25px;
            background-color: #2589d0;
            color: #fff;
            font-size: .7em;
        }

        .animeranking-read-more-3 label.ani-rank:hover {
            border:1px solid #2589d0;
            background-color: #fff;
            color: #2589d0;
            cursor: pointer;
        }
        .animeranking-read-more-3:has(:checked) label.ani-rank {
            display: none;
        }
        .animeranking-read-more-3 label.ani-rank::after {
            display: inline-block;
            width: 10px;
            height: 5px;
            background-color: #fff;
            clip-path: polygon(0 0, 100% 0, 50% 100%);
            content: '';
        }
        .animeranking-read-more-3 label.ani-rank:hover::after{
            background-color: #2589d0;
        }

        .animeranking-read-more-3 input.ani-rank {
            display: none;
        }
        /*</editor-fold>*/