@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 30px;
font-size: 115.4%; /* 15px */
}

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

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




/* h1 ************************************************ */

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

margin: 0;
}

.mod-articleDetail h2.head {
margin: 20px 0;
border-left: #b7cdea 20px solid;
padding: 17px 24px;
line-height: 1.3;
font-weight: bold;
font-size: 246.2%; /* 32px; */
}

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




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

.mod-articleDetail .description {
padding: 0 20px;
}




/* imgColumn img2Column ************************************************ */

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

.mod-articleDetail .img2Column {
display: flex;
margin-bottom: 30px;
}

.mod-articleDetail .img2Column .left {
width: 324px;
margin-right: 10px;
}

.mod-articleDetail .img2Column .right {
width: 324px;
}

.mod-articleDetail .imgColumn span,
.mod-articleDetail .img2Column .left span,
.mod-articleDetail .img2Column .right span {
display: block;
margin-top: 10px;
border-left: #b7cdea 5px solid;
padding: 4px 0 4px 8px;
line-height: 1.5;
color: #666;
}




/* dataBlock ************************************************ */

.mod-articleDetail .dataBlock p {
padding: 15px 0 30px 30px;
line-height: 1.6;
}




/* 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 20px 30px;
}

.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 */
}




/* seriesListBlock ************************************************ */

.mod-articleDetail .seriesListBlock {
background-color: #b7cdea;
padding: 25px 20px 10px 20px;
}

.mod-articleDetail .seriesListBlock h3 {
font-size: 169.2%;
border-bottom: #282828 2px solid;
margin-bottom: 20px;
padding-bottom: 15px;
font-weight: bold;
}

.mod-articleDetail .seriesListBlock ul {
display: flex;
flex-wrap: wrap;
width: 100%;
}

.mod-articleDetail .seriesListBlock ul li {
margin-right: 20px;
font-size: 107.7%;
width: 206px;
margin-bottom: 30px;
line-height: 1.5;
letter-spacing: 0.02em;
}

.mod-articleDetail .seriesListBlock ul li a {
color: #000;
text-decoration: none;
}

.mod-articleDetail .seriesListBlock ul li a:hover {
color: #666;
text-decoration: underline;
}

.mod-articleDetail .seriesListBlock ul li img {
margin-bottom: 10px;
}

.mod-articleDetail .seriesListBlock ul li:nth-child(3n) {
margin-right: 0px;
}