@charset "utf-8";

/* 注意
----------------------------------------------- *
 * paddingとmarginはpx、font-sizeは%
 * パスの指定は相対で。例：background-image: url(../img/thumb.png);
----------------------------------------------- */

/* 本番環境入稿時に削除 */
body {
    color: #000;
    background-color: #f7fafa;
    line-height: 1;
}
.mod-articleDetail {
    font-size: 13px;
}
/* 基本設定 */
body {
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
a {
    text-decoration: none;
}
.mod-articleDetail p {
    line-height: 1.3;
}
.ui-frame-orange-bar {
    border-top: none;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0 0;
}
.headerContents,
.rankingContents,
.reportContents,
.otherRankingContents {
    margin-bottom: 20px;
}



/* LP content
--------------------------------------------------------------------- */
/* font */
/*
font-size: 84.6%; 11px
font-size: 92.3%; 12px
font-size: 100% !important; 13px
font-size: 107.7%; 14px
font-size: 115.4%; 15px
font-size: 123.1%; 16px
font-size: 184.6%; 24px */

.mod-articleDetail {
color: #333;
font-feature-settings: "palt";
/* text-align: justify; */
letter-spacing: 1px;
}

.mod-articleDetail p {
line-height: 1.8;
margin: 0;
padding: 0 0.5px 0;
font-size: 115.4%; /* 15px */
}

.mod-articleDetail .sp {
display: none;
}




/* bg head ************************************************ */

.mod-articleDetail .gimonBg {
background: url(../img/bg.jpg) repeat-y center top;
}

.mod-articleDetail h1 {
border-radius: 0;
padding-block-start: calc(380 / 698 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
background: url(../img/img_head.png) no-repeat center top;
background-size: cover;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
line-height: 0;

margin: 0;
}

/* contentInner */
.mod-articleDetail .contentInner {
margin: 0;
padding: 0 20px 30px 20px;
}




/* description ************************************************ */

.mod-articleDetail .description {
background-color: #fff;
border-radius: 10px;
padding: 20px 20px;
margin-bottom: 30px;
}

.mod-articleDetail .description p {
padding: 0;
margin: 0;
}


/* blockInner */
.mod-articleDetail .blockInner {
background-color: #fff;
border-radius: 10px;
padding: 20px;
}


/* sectionBlock  */
/*
.mod-articleDetail .sectionBlock {
}
*/


/* h2 */
.mod-articleDetail h2 {
border-radius: 0;
padding-block-start: calc(217 / 618 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
background: url(../img/title.png) no-repeat center top;
background-size: cover;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
line-height: 0;

margin: 0 0 20px 0;
}


/* mangaBlock */
.mod-articleDetail .mangaBlock img {
max-width: 100%;
}


/* h3 */
.mod-articleDetail h3 {
padding: 0;
margin: 0;
line-height: 1.3;
font-size: 215.4%; /* 28px; */
font-weight: bold;
}


/* h4 */
.mod-articleDetail .imgTitle h4 {
margin: 0;
padding: 0;
}


/* h5 */
.mod-articleDetail h5.txtTitle {
margin: 0;
padding: 0;
font-size: 169.2%; /*22px; */
}




/* imgTitle ************************************************ */

.mod-articleDetail .imgTitle {
text-align: center;
}

.mod-articleDetail .imgTitle01 img {
max-width: 100%;
}

.mod-articleDetail .imgTitle02 img {
width: 518px;
}




/* frameBox ************************************************ */

.mod-articleDetail .frameBox {
display: flex;
border: #000 2px solid;
border-radius: 10px;
padding: 20px 20px 10px;
box-sizing: border-box;
margin: 0 0 20px 0;
}

.mod-articleDetail .frameBox img {
max-width: 100%;
}

.mod-articleDetail .frameBox .left {
width: 150px;
margin-right: 18px;
}

.mod-articleDetail .frameBox .right {
width: 410px;
}

.mod-articleDetail .frameBox .right h6 {
padding: 0 0 14px 0;
border-bottom: #000 2px dotted;
margin: 0 0 15px 0;
}

.mod-articleDetail .frameBox .right p {
line-height: 1.9;
}




/* questionnaireBlock ************************************************ */
.mod-articleDetail .questionnaireBlock {
margin-bottom: 30px;
}

.mod-articleDetail .questionnaireBlock h5 {
margin-bottom: 10px;
}

.mod-articleDetail .questionnaireBlock img {
max-width: 100%;
}

.mod-articleDetail .questionnaireBlock .questionnaireInner {
display: flex;
}

.mod-articleDetail .questionnaireBlock .questionnaireInner .img {
width: 218px;
margin-right: 15px;
}

.mod-articleDetail .questionnaireBlock .questionnaireInner .txt {
width: 375px;
}




/* floatBox ************************************************ */

.mod-articleDetail .floatBox .img {
width: 290px;
float: right;
margin-left: 10px;
}

.mod-articleDetail .floatBox .img img {
max-width: 100%;
}

.mod-articleDetail .floatBox h5 {
margin-bottom: 18px;
font-size: 169.2%; /* 22px; */
}

.mod-articleDetail .floatBox h5 span {
color: #3ba8b6;
}

.mod-articleDetail .floatBox p {
margin-bottom: 30px;
}




/* pickupBlock ************************************************ */

.mod-articleDetail .pickupBlock {
padding: 30px 0 0 0;
}

.mod-articleDetail .pickupRed {
position: relative;
background-color: #f8d5df;
border: #ef8fb1 5px solid;
border-radius: 10px;
}

.mod-articleDetail .pickupBlue {
position: relative;
background-color: #c2e6eb;
border: #55bfcd 5px solid;
border-radius: 10px;
}

.mod-articleDetail .pickupInner {
padding: 15px;
}

.mod-articleDetail .pickupRed:before {
position: absolute;
top: -30px;
left: -5px;
content: "";
width: 160px;
height: 58px;
background: url(../img/icon_pickup_red.png) no-repeat left top;
background-size: cover;
}

.mod-articleDetail .pickupBlue:before {
position: absolute;
top: -30px;
left: -5px;
content: "";
width: 160px;
height: 58px;
background: url(../img/icon_pickup_blue.png) no-repeat left top;
background-size: cover;
}

.mod-articleDetail .pickupRed h4 {
padding: 0;
margin: 0 0 10px 0;
color: #e14080;
text-align: center;
font-weight: normal;
line-height: 1.4;
font-size: 184.6%; /* 24px; */
}

.mod-articleDetail .pickupBlue h4 {
padding: 0;
margin: 0 0 10px 0;
color: #185db1;
text-align: center;
font-weight: normal;
line-height: 1.4;
font-size: 184.6%; /* 24px; */
}

.mod-articleDetail .pickupBlock p {
padding: 0;
margin: 0;
line-height: 1.5;
}




/* honneBlock ************************************************ */

.mod-articleDetail .honneBlock {
background: #fffbc6;
background-image: url(../img/decoration_top.png), url(../img/icon_voicetitle.png);
background-repeat: no-repeat, no-repeat;
background-position: center top, left top;
background-size: 218px 48px, 170px 100px;
box-shadow: 2px 2px 0px 0px #b2b2b2;
padding-bottom: 1px;
}

.mod-articleDetail .honneBlock h3 {
padding: 52px 0 0 182px;
margin-bottom: 30px;
}

.mod-articleDetail .honneBlock h3 .color {
color: #e9518e;
}

.mod-articleDetail .honneBlock .flexLeft,
.mod-articleDetail .honneBlock .flexRight {
display: flex;
margin: 0 20px 20px;
}

.mod-articleDetail .honneBlock .flexRight {
flex-direction: row-reverse;
}

.mod-articleDetail .honneBlock .flexLeft .img,
.mod-articleDetail .honneBlock .flexRight .img {
width: 78px;
}

.mod-articleDetail .honneBlock .flexLeft .txt,
.mod-articleDetail .honneBlock .flexRight .txt {
width: 500px;
background-color: #fff;
padding: 18px;
border-radius: 10px;
}

.mod-articleDetail .honneBlock .flexLeft img,
.mod-articleDetail .honneBlock .flexRight img {
max-width: 100%;
}

.mod-articleDetail .honneBlock .flexLeft .txt p,
.mod-articleDetail .honneBlock .flexRight .txt p {
padding: 0;
}




/* mangaartistBlock ************************************************ */
.mod-articleDetail .mangaartistBlock {
display: flex;
background-color: #e9518e;
border-radius: 10px;
padding: 20px 10px 20px 20px;
}

.mod-articleDetail .mangaartistBlock .img {
width: 86px;
margin-right: 16px;
}

.mod-articleDetail .mangaartistBlock .img img {
max-width: 100%;
}

.mod-articleDetail .mangaartistBlock .txt {
width: 486px;
color: #fff;
}

.mod-articleDetail .mangaartistBlock .txt h4 {
padding: 0 0 10px 0;
margin: 0;
font-size: 138.5%; /* 18px */
}

.mod-articleDetail .mangaartistBlock .txt p {
padding: 0;
font-size: 107.7%; /* 14px */
}




/* sourceBlock ************************************************ */

/* btnGroup */
.mod-articleDetail .sourceBlock .btnGroup {
padding: 20px 0 20px 20px;
}

.mod-articleDetail .sourceBlock .btnGroup ul {
display: flex;
padding: 0;
margin: 0;
}

.mod-articleDetail .sourceBlock .btnGroup li {
width: 206px;
margin-right: 20px;
}

.mod-articleDetail .sourceBlock .btnGroup li a {
display: block;
align-items: center;
width: 206px;
margin-right: 20px;
text-align: center;
background: #ed6103 url(../img/icon_arrow_br_white01.png) no-repeat 97% 95%;
background-size: 12px 12px;
border-radius: 10px;
box-sizing: border-box;
color: #fff;
line-height: 1.2;
padding: 25px 0;
box-shadow:2px 2px 6px 3px #ddd;
font-size: 200%; /* 26px */
}

.mod-articleDetail .sourceBlock .btnGroup li a:hover {
background-color: #999;
}

.mod-articleDetail .sourceBlock .btnGroup li a span {
font-size: 69.2%; /* 26px → 18px; */
}

/* sourceGroup */
.mod-articleDetail .sourceBlock .sourceGroup {
padding: 20px;
}

.mod-articleDetail .sourceBlock .sourceGroup ul,
.mod-articleDetail .sourceBlock .sourceGroup li {
padding: 0;
margin: 0;
}

.mod-articleDetail .sourceBlock .sourceGroup li {
line-height: 1.5;
font-size: 107.7%; /* 14px */
}




/* seriesBlock ************************************************ */

.mod-articleDetail .seriesBlock {
background-color: #fae1bc;
padding: 25px 20px;
}

.mod-articleDetail .seriesBlock h3 {
padding-bottom: 15px;
margin-bottom: 20px;
border-bottom: #282828 2px solid;
font-size: 169.2%; /* 22px */
}


.mod-articleDetail .seriesBlock ul {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
}

.mod-articleDetail .seriesBlock ul li {
width: 317px;
margin-right: 22px;
box-sizing: border-box;
}

/* リンクがある場合 */
.mod-articleDetail .seriesBlock ul li a {
display: flex;
flex-wrap: wrap;
width: 317px;
background: #fff url(../img/icon_arrow_br_pink01.png) no-repeat 98% 95%;
background-size: 20px 20px;
padding: 10px 0 10px 10px;
box-shadow: 2px 2px 0px 0px #b2b2b2;
box-sizing: border-box;
margin-bottom: 10px;
color: #333;
}

.mod-articleDetail .seriesBlock ul li a:hover {
background-color: #eee;
}

.mod-articleDetail .seriesBlock ul li:nth-child(2n) {
margin-right: 0;
}


.mod-articleDetail .seriesBlock ul li a .img {
width: 102px;
}

.mod-articleDetail .seriesBlock ul li a .img img {
max-width: 90px;
border: none;
}

.mod-articleDetail .seriesBlock ul li a .txt {
width: 205px;
line-height: 1.3;
font-size: 140%; /* 19px */
}

.mod-articleDetail .seriesBlock ul li a .txt span.subhead {
display: inline-block;
padding: 2px 10px;
margin: 2px 0 10px 0;
border-radius: 20px;
background-color: #e9518e;
color: #fff;
font-size: 73.7%; /* 14px */
}

/* リンクがなしの場合 */
.mod-articleDetail .seriesBlock ul li span.nolinik {
opacity: 0.5;

display: flex;
flex-wrap: wrap;
width: 317px;
background: #fff url(../img/icon_arrow_br_pink01.png) no-repeat 98% 95%;
background-size: 20px 20px;
padding: 10px 0 10px 10px;
box-shadow: 2px 2px 0px 0px #b2b2b2;
box-sizing: border-box;
margin-bottom: 10px;
color: #333;
}

.mod-articleDetail .seriesBlock ul li:nth-child(2n) span.nolinik {
margin-right: 0;
}

.mod-articleDetail .seriesBlock ul li span.nolinik .img {
width: 102px;
}

.mod-articleDetail .seriesBlock ul li span.nolinik .img img {
max-width: 90px;
border: none;
}

.mod-articleDetail .seriesBlock ul li span.nolinik .txt {
width: 205px;
line-height: 1.3;
font-size: 140%; /* 19px */
}

.mod-articleDetail .seriesBlock ul li span.nolinik .txt span.subhead {
display: inline-block;
padding: 2px 10px;
margin: 2px 0 10px 0;
border-radius: 20px;
background-color: #e9518e;
color: #fff;
font-size: 73.7%; /* 14px */
}




/* common ************************************************ */

.mod-articleDetail div {
margin: 0;
	}

.mod-articleDetail li {
list-style: none;
}

.mod-articleDetail .bold {
font-weight: bold;
}

.mod-articleDetail .center {
text-align: center;
}

.mod-articleDetail .colorRed {
color: #e9518e;
}


/* txtIndent large */
.mod-articleDetail .txtIndent {
text-indent: 1rem;
display: inline-block;
}

.mod-articleDetail .large {
font-size: 106.7%; /* 15px; → 16px */
}


/* padding bottom */
.mod-articleDetail p {
padding-bottom: 10px;
}


/* margin bottom */
.mod-articleDetail .mangaBlock img,
.mod-articleDetail .pickupRed,
.mod-articleDetail .pickupBlue,
.mod-articleDetail .seriesBlock {
margin-bottom: 50px;
}

.mod-articleDetail h3,
.mod-articleDetail .imgTitle h4,
.mod-articleDetail .fullImg,
.mod-articleDetail .flex2column {
margin-bottom: 30px;
}

.mod-articleDetail h5.txtTitle,
.mod-articleDetail .honneBlock {
margin-bottom: 20px;
}