@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;
}

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


/* bgcolor ************************************************ */
.bgcolor {
background-color: #fffbe7;
}


/* h1 ************************************************ */
.mod-articleDetail h1 {
border-radius: 0;
padding-block-start: calc(270 / 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;
}


/* description ************************************************ */
.mod-articleDetail .description {
padding: 30px 30px 0;
}

.mod-articleDetail .description p {
padding-bottom: 30px;
}


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

.mod-articleDetail .sectionBlock p {
line-height: 1.7;
padding: 0 10px 20px;
}


/* headTitle */
.mod-articleDetail .sectionBlock .headTitle {
border: #000 4px solid;
background-color: #fff;
padding: 14px 27px 18px 27px;
margin-bottom: 30px;
position: relative;
}

.mod-articleDetail .sectionBlock .headTitle h2 {
display: inline;
color: #41bdce;
font-weight: bold;
line-height: 1.6;
font-size: 207.7%; /* 27px */
}

.mod-articleDetail .sectionBlock .headTitle h2 span {
display: inline;
color: #333;
font-weight: bold;
background: linear-gradient(transparent 86%, #41bdce 0%);
letter-spacing: 0.1em;
font-size: 111.1%; /* 27px → 30px */
}


/* madoriBox */
.mod-articleDetail .sectionBlock .madoriBox,
.mod-articleDetail .sectionBlock .madoriBox > p {
padding-bottom: 30px;
}


/* madoriList */
.mod-articleDetail .sectionBlock .madoriList {
border-top: #000 5px solid;
background-color: #fff;
margin-bottom: 30px;
}

.mod-articleDetail .sectionBlock .madoriList h3 {
padding: 20px 12px 20px;
line-height: 1;
font-weight: bold;
}

.mod-articleDetail .sectionBlock .madoriList h3 span.num {
color: #41bdce;
font-weight: bold;
padding-right: 10px;
font-size: 338.5%; /* 44px */
}

.mod-articleDetail .sectionBlock .madoriList h3 span.title {
position: relative;
top: -6px;
font-size: 200%; /* 28px */
}

.mod-articleDetail .sectionBlock .madoriList .full img {
margin-bottom: 20px;
}

.mod-articleDetail .sectionBlock .madoriList .full p {
padding: 0 20px 20px;
}

.mod-articleDetail .sectionBlock .madoriList .madori {
padding: 0 20px 20px;
}


/* note */
.mod-articleDetail p.note {
padding: 0 20px 20px;
font-size: 100%; /* 13px */
}


/* matomeBox */
.mod-articleDetail .sectionBlock .matomeBox {
border: #000 4px solid;
background-color: #fff;
padding: 28px 22px 18px;
margin-bottom: 40px;
text-align: center;
}

.mod-articleDetail .sectionBlock .matomeBox h4 {
color: #333;
display: inline-block;
font-weight: bold;
margin-bottom: 20px;
background: linear-gradient(transparent 80%, #dcdcdc 0%);
font-size: 184.6%; /* 24px */
}

.mod-articleDetail .sectionBlock .matomeBox p {
text-align: left;
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 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: #edf4f8;
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;
}