/* post.css */

.related-post{
    margin-top: 2em;
}

main{
    counter-reset: h2-counter;
    border-radius: var(--rad);
    position: relative;
    overflow: hidden;
}


.post-caption{
    display: flex;
    align-items: center;
    gap: 1em;
    background-color: #03592e;
    padding: 1.5em .75em;
    box-sizing: content-box;
    position: relative;
}

@media screen and (min-width: 767px){
    .post-caption{
        padding: 2.5em calc(2em + 4px);
        margin-top: -.5em;
    }
}

.post-caption::after{
    content:"";
    position:absolute;
    top:-1em;
    left:50%;
    width:2em;
    height:2em;
    transform:translateX(-50%) rotate(-6deg);
    border-radius:50%;
    box-sizing:border-box;

    background:#f2c22a;
    border:3px #fff solid;
    box-shadow:
        0 .22em 0 rgba(0,0,0,.18),
        0 0 0 .14em rgba(255,80,160,.22);
}

.post-caption figure{
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0;
}

.post-caption img{
    padding: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    z-index: 10;
    position: relative;
    display:block;
}

.post-caption figure::before{
    content:"";
    position:absolute;
    inset:0;
    background:#fff;
    border-radius:4px; /* 画像に合わせる */
    z-index:-1;
}

.post-caption h1{
    font-weight: bold;
    font-size: 1.2em;
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1.5;
    color: #fff;
    font-weight: bold;
}

@media screen and (min-width: 767px){
    .post-caption h1{
        font-size: 1.5em;
    }
}


main h2,
.content h3,
section.product h5{
    margin: 2em 0 1.5em;
    font-weight: bold;
}

main .content section h2#game-info{
    margin-top: 1em;
}

@media screen and (min-width: 767px){
    main h2,
    .content h3{
        margin: 3em 0 2em;
    }

    section.product h5{
        margin-top: 2em;
    }

    main h2#terms1{
        margin-top: 1em;
    }

    main .content section h2#game-info{
        margin-top: 1em;
    }
}


main h2,
section.product h5{
    display: block;
    position: relative;
    padding: 1em .5em 1em 3em;
    font-size: 1.1em;
    counter-increment: h2-counter;
    backdrop-filter: blur(14px);
}

main h2::before{
    content: counter(h2-counter);
    position: absolute;
    left: 1em;
    top: 50%;
    transform: translateY(-50%);
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: flex;
    font-size: .8em;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: var(--shadow);
}

.content h3{
    display: block;
    font-size: 1.1em;
    position: relative;
    padding: 1em .5em 1em 1.5em;
    color: #fff;
    background-color: var(--red);
}




@media screen and (min-width: 767px){
    main h2,
    section.product h5{
        padding: 1.25em .5em 1.25em 3em;
        font-size: 1.2em;
    }

    .content h3{
        font-size: 1.2em;
    }

}

.content h4{
    margin: 2em 0 1em;
    margin-left: 1em;
    border-left: .5em #333 solid;
    padding: .5em .5em .5em 1em;
}

.post-caption figure img{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

figure.video{
    max-width: 100%;
    padding: 0 .5em;
}

@media screen and (min-width: 767px){
    figure.video{
        padding: 0 2em;
    }
}

figure.video blockquote{
    text-align: center;
    font-size: .8em;
}

figure.video iframe{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}


.reco{
    margin-top: 3em;
    padding: 2.5em 1em .5em;
    border: 2px #aaa solid;
    background-color: var(--mil-gray);
    border-radius: 4px;
    position: relative;
}

.reco p{
    font-size: .9em;
}

@media screen and (min-width: 767px){
    .reco{
        margin-top: 4em;
        padding: 2.5em 1em 2.5em;
    }

    .reco p{
        font-size: 1em;
    }
}


.reco::before{
    font-size: .9em;
    position: absolute;
    top: calc(-1.25em - 1px);
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    background-color: #111;
    color: #fff;
    border-radius: 999px;
    padding: .5em 1.5em .5em 2.9em;
    font-weight: normal;
    content: "推しポイント！";
}

.reco::after{
    content: "";
    position: absolute;
    top: calc(-1.25em - 1px + .55em);
    left: 50%;
    width: .95em;
    height: .95em;
    transform: translateX(calc(-50% - 3.15em));
    background-color: #fff;
    -webkit-mask-image: url("../assets/icon/ui/lightbulb-regular.svg");
    mask-image: url("../assets/icon/ui/lightbulb-regular.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.page .content h3::after{
    background: #aaa;
}

.page-caption{
    border-radius: .45em .45em 0 0;
    padding: 3em 0 4em;
    background-color: var(--green);
    text-align: center;
}

.page-caption h1{
    color: #fff;
    font-size: 1.2em;
}

@media screen and (min-width: 767px){
    .page-caption h1{
        font-size: 1.5em;
    }
}

.page .content h2:first-child,
.page .content h3:first-child{
    margin-top: 0 !important;
}

.page-content h3{
    background-color: #333;
}

/* パンくず */
.breadcrumb{
    background-color: var(--red);
    padding: 1.5em 1em 2.25em;
}

@media screen and (min-width: 767px){
    .breadcrumb{
        padding: 3em 1em 3.75em;
    }
}

nav.breadcrumb .breadcrumb-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .5em;
}

nav.breadcrumb .breadcrumb-item a{
    font-size: .8em;
    display: inline-block;
    font-weight: bold;
    border-bottom: 1px #fff solid;
    color: #fff;
}

nav.breadcrumb .breadcrumb-sep{
    display: inline-flex;
    align-items: center;
}

nav.breadcrumb .breadcrumb-sep .cp-inline-icon{
    font-size: .8em;
    color: #fff;
    height: 1em;
    width: 1em;
    line-height: 1em;
    display: inline-block;
    text-align: center;
}

@media screen and (min-width: 767px){
    nav.breadcrumb .breadcrumb-item a,
    nav.breadcrumb .breadcrumb-sep .cp-inline-icon{
        font-size: .9em;
    }

    nav.breadcrumb .breadcrumb-sep .cp-inline-icon{
        margin-top: .125em;
    }
}

.cp-inline-icon{
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.cp-icon-angle-right{
    -webkit-mask-image: url("../assets/icon/ui/angle-right-solid.svg");
    mask-image: url("../assets/icon/ui/angle-right-solid.svg");
}

.post-info{
    margin-top: 1.5em;
}

dt.keyword + dd.hr{
    margin: 0;
    padding: 0;
}

/* チップ（カテゴリ/タグ共通） */
dt.keyword + dd a{
    font-size: .9em;
    margin-right: .25em;
    margin-bottom: .5em;
    padding: .4em .85em .45em .6em;
    border-radius: 999px;
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.4;
}

div.keywords{
    margin-top: .5em;
}

/* カテゴリ：タグと同じ構成で赤版 */
div.keywords a.cat-link{
    position: relative;
    padding-left: calc(.5em + 1.5em + 4px);
}

div.keywords a.cat-link::before{
    content: "";
    position: absolute;
    left: .5em;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #fff;
}

div.keywords a.cat-link::after{
    content: "";
    position: absolute;
    left: calc(.5em + .55em);
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 1.05em;
    height: 1.05em;
    background-color: var(--red);
    -webkit-mask-image: url("../assets/icon/ui/folder-regular.svg");
    mask-image: url("../assets/icon/ui/folder-regular.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    font-size: .8em;
}

/* タグ：現状デザイン維持 */
div.keywords a[rel~="tag"]{
    position: relative;
    padding-left: calc(.5em + 1.5em + 4px);
}

div.keywords a[rel~="tag"]::before{
    content: "";
    position: absolute;
    left: .5em;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: #fff;
}

div.keywords a[rel~="tag"]::after{
    content: "";
    position: absolute;
    left: calc(.5em + .5em);
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 1.05em;
    height: 1.05em;
    background-color: var(--sky);
    -webkit-mask-image: url("../assets/icon/ui/hashtag-solid.svg");
    mask-image: url("../assets/icon/ui/hashtag-solid.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    font-size: .8em;
}

main .cp-toc-item{
    border-bottom: 1px #ccc dashed;
}

main .cp-toc-item > a{
    padding: .5em 0 .75em;
}

figcaption.nocaption::before{
    content: "© ";
}


blockquote.sanko{
    padding: 2em 1em;
}

blockquote.sanko{
    margin-top: 2em;
    margin-left: 1em;
    margin-right: 1em;
    position: relative;
    background-color: rgba(230, 230, 230, .5);
    border-radius: 2px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}

blockquote.sanko::before{
    position: absolute;
    content: "参考";
    top: -1.25em;
    left: .25em;
    background-color: #666;
    text-align: center;
    color: #fff;
    line-height: 3.5;
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    font-size: .8em;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .5);
    z-index: 2000;
}

blockquote.sanko::after{
    position: absolute;
    content: "";
    bottom: -.5em;
    right: .25em;
    width: 1em;
    height: 1em;
    background-color: #666;
    -webkit-mask-image: url("../assets/icon/ui/quote-right-solid.svg");
    mask-image: url("../assets/icon/ui/quote-right-solid.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

blockquote.sanko > span > a{
    font-size: 12px;
    text-align: right;
    display: block;
}

blockquote.sanko > span > a::before{
    content: " - ";
}

blockquote.sanko > span > a::after{
    content: "より引用";
}

@media screen and (min-width: 767px){
    blockquote.sanko{
        padding: 2em;
        margin-top: 2em;
    }

    blockquote.sanko::after{
        font-size: 1.5em;
    }

    blockquote.sanko > span > a{
        font-size: .9em;
    }
}

blockquote.sanko ul{
    margin-left: 1em;
    margin-right: 1em;
}

a span.sanko,
span.sanko a{
    font-size: .8em;
    background-color: #fff;
    border: 1px #ccc solid;
    padding: .25em .5em;
    border-radius: 4px;
    word-break: keep-all;
    margin-left: .5em;
    color: #666;
}

a.soto::after{
    content: "外部";
    font-size: .8em;
    padding: .25em .5em;
    border: 1px #ddd solid;
    margin-left: .5em;
    color: #666;
    background-color: var(--max-white);
}

.content > .long li:not(:first-child){
    margin-top: 1em;
}

.content ul,
.content ol,
.content dl,
.post-info dl{
    padding: 1em 1em 1em 2.5em;
}

.post-info dl{
    border-bottom: none;
}

@media screen and (min-width: 767px){
    .content ul,
    .content ol{
        padding: 1em 1em 2em 3.5em;
    }
}

li{
    list-style: none;
    list-style-position: inside;
}

.content > ul li{
    list-style: disc;
}

.content > ol li{
    list-style: decimal;
}

.content dl,
.post-info dl{
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: start;
    padding: 2em .5em;
}

@media screen and (min-width: 767px){
    .content dl{
        padding: 2.5em 1em 2.5em 2em;
    }

    .content dl.game{
        padding: 3.5em 1em 3.5em 2em;
    }

    .post-info dl{
        padding: 3.5em 1em 3.5em 2em;
    }
}

main dl + dl{
    margin-top: -4px !important;
}

main dl dt,
.post-info dl dt{
    align-items: center;
    display: inline;
}

main dl dt span,
.post-info dl dt span{
    white-space: nowrap;
    line-height: inherit;
    padding: .35em 1em;
    border-radius: 2em;
    font-size: .8em;
    line-height: inherit;
}


main dl dd,
.post-info dl dd{
    line-height: inherit;
    padding: 2px .25em;
    margin: 0;
    margin-left: 1.5em;
}

main dl dd::before,
.post-info dl dd::before{
    content: "";
    width: .95em;
    height: .95em;
    background-color: #aaa;
    margin-right: .5em;
    display: inline-block;
    vertical-align: -.12em;
    margin-left: -1.25em;
    -webkit-mask-image: url("../assets/icon/ui/ellipsis-solid.svg");
    mask-image: url("../assets/icon/ui/ellipsis-solid.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}


main dd.sns a{
    padding: .15em .75em;
    border-radius: 2em;
    font-size: .8em;
    text-decoration: none;
    line-height: inherit;
    border: 1px transparent solid;
    transition: .2s;
    display: inline-block;
    line-height: 1.5;
}

main dd.sns a + a{
    margin-left: .5em;
}

@media screen and (min-width: 1181px){
    main dd.sns a:hover{
        box-shadow: none;
        transform: translateY(2px);
    }
}

dd.hr,
dd.table,
dd.table table{
    margin-top: 0;
}

dd.hr{
    grid-column: 1 / -1;   /* 2列ぶち抜き */
    white-space: normal;   /* ←折り返し許可（重要） */
    line-height: inherit;
    width: auto;
    max-width: 100%;
    padding: 0;
    margin: 0;
    min-width: 0;          /* ←親がflex/gridでも潰せるように */
}

dd.hr span{
    border-radius: 2em;
    line-height: inherit;
    margin: .25em 0 0;
    padding: 0 1em;
    display: inline-block;
    background-color: var(--pal-sky);
    color: var(--sky);
    box-shadow: var(--sha-sky);
    font-size: .8em;
}

dd.table{
    grid-column: 1 / -1;   /* 2列ぶち抜き */
    margin: .5em 0 0;
    width: 100%;
    padding: 0 !important;
    margin-left: 0;
    font-size: .8em;
    line-height: inherit;
    padding: .35em 1em;
}

dd.table table{
    margin: .5em 0;
    box-shadow: var(--shadow);
}

dd.table table th,
dd.table table td{
    font-size: .8em;
}

dd.table table th{
    max-width: 50%;
}

@media screen and (min-width: 767px){
    dd.hr{
        margin-top: 1em;
    }

    dd.table{
        margin: .5em 0 1em;
    }

    dd.table table th,
    dd.table table td{
        font-size: .9em;
    }

    dd.table table th{
        width: 25%;
    }

}

main dl dd.hr::before,
dl dd.table::before{
    content: none;         /* 先頭のアイコンを消す */
    margin: 0;
}

dd.hr::after,
dd.hr div::after{
    display: block;
    content: "";
    clear: both;
}




p.note{
    font-size: .8em;
    color: var(--green);
    margin-top: .25em;
    text-align: center;
}

dd span.new{
    padding: 0 .5em;
    margin-left: 4px;
    background-color: var(--red);
    color: #fff;
    display: inline-block;
    font-size: .8em;
    border-radius: 2px;
    box-shadow: var(--shadow);
}

dd.report a{
    font-size: .9em;
    color: var(--red);
}

@media screen and (min-width: 767px){
    dd.report.right{
        margin-right: 1em;
    }
}

table{
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

table caption{
    caption-side: bottom;
    font-size: .9em;
}

table caption i,
table caption span{
    font-size: inherit;
}

table caption a{
    font-size: inherit;
}

th, td{
    border: 1px #ccc solid;
}

th, td{
    padding: .5em 4px;
    border-radius: 2px;
}

th{
    background-color: #eee;
}

td{
    background-color: aliceblue;
}

table.center td,
td.center{
    text-align: center;
}

td.right{
    text-align: right;
}

td.left{
    text-align: left;
}

@media screen and (min-width: 767px){
    th, td{
        padding: .75em 1em;
    }
}

.ads{
    margin: 1em;
    position: relative;
    padding: 1em .5em 3.5em;
}

@media screen and (min-width: 767px){
    .ads{
        margin-top: 2em;
    }
}

div.ads div.myLinkModule{
    margin: auto auto !important;
    position: relative;
}

.ads + .ads{
    margin-top: 1em;
}

.ads + h6{
    margin: 1em 0 0;
    padding: .25em;
}

h6 + .ads{
    margin-top: 0;
}

.ads .heading{
    margin-bottom: 1em;
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.heading span{
    color: var(--gold);
    background-color: var(--pal-gold);
    box-shadow: var(--sha-gold);
    font-size: .8em;
    border-radius: 2em;
    padding: .5em 1em;
}

.ads > .grid{
    display: grid;
    position: relative;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: .5em;
}

.ads::after{
    content: "商品の詳細は、必ず提供元サイトで確認してください";
    color: var(--red);
    position: absolute;
    width: 100%;
    display: block;
    bottom: .75em;
    z-index: 10;
    font-size: .8em;
    text-align: center;
    grid-column: 1;
    grid-template-columns: none;
}

.wcheck{
    margin-top: 1em;
    font-size: .8em;
    color: var(--red);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: .25em;
}

div.wpcf7{
    padding: 0 1em;
}

article div.wpcf7 div.outside{
    padding: 0;
}

@media screen and (min-width: 767px){
    div.wpcf7{
        padding: 2em;
    }

    article div.wpcf7 div.outside{
        padding: 1em 0;
    }
}

div.wpcf7 form p br{
    display: none;
}

div.wpcf7 form div.add-cf7-label{
    margin-top: 1em;
}

div.wpcf7 form div.add-cf7-label > p{
    width: 100%;
    display: block;
    margin-bottom: .5em;
}

div.wpcf7 form p label span.label{
    padding: .4em 1px;
    width: 5em;
    min-width: 5em;
    max-width: 5em;
    flex-grow: 1;
    display: inline-block;
    text-align: center;
    background-color: #eee;
}

/* 03_cf7.css のこの部分を修正 */
div.wpcf7 form div.add-cf7-label > p label{
    display: flex;
    align-items: center;
    gap: .5em;
    width: 100%;
}

div.wpcf7 form div.add-cf7-label > p label input{
    width: 100% !important;
    border: none;
    border-bottom: 1px #ddd solid;
    transition: .2s;
}

div.wpcf7 form div.add-cf7-textarea p label span textarea:focus,
div.wpcf7 form p label span input:focus{
    border-color: var(--mid-sky);
    box-shadow: var(--sha-sky);
}

div.wpcf7 p span.wpcf7-spinner{
    display: none;
}

div.wpcf7 form div.add-cf7-textarea p label > span.textarea{
    padding: .4em 1em;
    display: inline-block;
    background-color: #eee;
}

div.wpcf7 form div.add-cf7-textarea p label span textarea{
    margin-top: .5em;
    width: 100%;
    height: 12em;
    border: 2px #ccc solid;
    border-radius: 2px;
    outline: none;
    padding: .5em;
    resize: none;
    border-width: 1px;
    transition: .2s;
}

div.wpcf7 form > p{
    padding: 0;
    margin-top: 0;
}

span.wpcf7-list-item{
    margin: 0;
}

div.wpcf7 form > p > a{
    color: rgba(240, 0, 90, 1);
}

div.wpcf7 form p input.wpcf7-submit{
    width: 100%;
    color: #fff;
    background-color: #333;
    padding: .5em;
    border: 2px #333 solid;
    margin-top: 1em;
}

span.wpcf7-not-valid-tip{
    display: none !important;
}

@media screen and (min-width: 767px){
    div.wpcf7 form div.add-cf7-submit p{
        text-align: right;
    }

    div.wpcf7 form div.add-cf7-submit p input{
        width: 10em;
        padding: .5em;
        transition: .2s;
    }
}

@media screen and (min-width: 1181px){
    div.wpcf7 form div.submit p input:hover{
        box-shadow: 0 2px 4px -2px #aaa;
        background-color: #fff;
        color: #333;
        border: 2px #333 solid;
    }
}

div.wpcf7 form p label span.wpcf7-form-control-wrap input{
    width: calc(100% - 5.5em);
}

div.accept > p:first-child{
    margin-top: 1em;
}

div.accept p > span{
    display: block;
}

div.accept p > span > span > span{
    margin-left: .25em;
}

main h3::after{
    background-image: linear-gradient(90deg, rgba(248, 15, 15, 1), rgba(207, 63, 245, 1));
}

main h2,
section.product h5{
    background-color: #333;
    color: #fff;
}

.content h2{
    background-color: var(--navy);
}

main h2::before,
section.product h5::before{
    color: #fff;
    background-color: var(--red);
}

.content a,
figcaption a,
table caption a{
    color: var(--pink);
}

main dl dd.sns a{
    color: var(--pale);
    background-color: var(--pal-pale);
    box-shadow: var(--sha-pale);
}

@media screen and (min-width: 1181px){
    main dl dd.sns a:hover{
        border-color: var(--mil-pale);
    }
}

main dl dt span{
    background-color: var(--pal-sky);
    color: var(--sky);
    box-shadow: var(--sha-sky);
}

.post-info span{
    color: inherit;
}

main dl dt.keyword + dd div.keywords a.cat-link{
    background-color: var(--red);
    color: #fff;
    border: 1px var(--red) solid;
}

main dl dt.keyword + dd div.keywords a[rel~="tag"]{
    background-color: var(--sky);
    color: #fff;
    border: 1px var(--sky) solid;
}

p.sky{
    color: rgba(20, 155, 200, 1);
    background-color: rgba(20, 155, 200, .1);
}

p.red{
    color: rgb(179, 99, 139);
    background-color: rgb(210, 150, 180, .1);
    box-shadow: 0 2px 4px -2px rgba(210, 150, 180, 0.5);
}

p.green{
    color: rgba(187, 4, 102, 1);
    background-color: rgba(40, 120, 90, .1);
}