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


/* tokushuBlock ************************************************ */
.mod-articleDetail .tokushuBlock {
background-color: #fffcf5;
padding-bottom: 10px;
letter-spacing: 0.08em;
}


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

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


/* mokujiBlock ************************************************ */
.mod-articleDetail .mokujiBlock {
margin: 0 20px 50px 20px;
border: #d2d2d2 4px solid;
background-color: #fff;
padding: 20px 25px 15px 25px;
}

.mod-articleDetail .mokujiBlock .title {
text-align: center;
font-size: 200%; /* 26px */
padding: 0 0 20px 0;
}

.mod-articleDetail .mokujiBlock ul li {
list-style: disc;
margin: 0 0 0 20px;
font-size: 146.15%; /* 19px */
padding: 0 0 16px 0;
}

.mod-articleDetail .mokujiBlock ul li a {
color: #333;
text-decoration: underline;
}


/* sectionBlock ************************************************ */
.mod-articleDetail .sectionBlock {
margin: 0 20px 50px;
border-top: #d2d2d2 5px solid;
border-left: 0;
border-right: #e8e8e8 1px solid;
border-bottom: #e8e8e8 1px solid;
background-color: #fff;
padding: 30px 20px 0 20px;
}

/* headTitle */
.mod-articleDetail .sectionBlock .headBox {
text-align: center;
}

.mod-articleDetail .sectionBlock .headBox h2 {
text-align: center;
display: inline-block;
border-bottom: #ed6103 4px solid;
margin-bottom: 30px;
padding: 0 20px 10px 20px;
font-size: 215.38%; /* 28px */
font-weight: bold;
line-height: 1.2;
}

.mod-articleDetail .sectionBlock .headBox h2 span {
display: block;
font-size: 71.42%; /* 28px → 20px */
font-weight: normal;
padding: 0 0 5px 0;
}

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


/* table */
.mod-articleDetail .sectionBlock table.table01 {
border-top: #4c4c4c 2px solid;
border-left: #4c4c4c 2px solid;
border-right: 0;
border-bottom: 0;
margin-bottom: 40px;
}

.mod-articleDetail .sectionBlock table.table01 th {
border-top: 0;
border-left: 0;
border-right: #4c4c4c 2px solid;
border-bottom: #4c4c4c 2px solid;
font-size: 146.15%; /* 19px */
padding: 12px 10px 10px;
background-color: #f4f4f4;
}

.mod-articleDetail .sectionBlock table.table01 td {
border-top: 0;
border-left: 0;
border-right: #4c4c4c 2px solid;
border-bottom: #4c4c4c 2px solid;
padding: 8px 10px;
font-size: 115.4%; /* 15px */
line-height: 1.5;
}

.mod-articleDetail .sectionBlock table.table01 td.td01 {
background-color: #d6e6fe;
}

.mod-articleDetail .sectionBlock table.table01 td.td02 {
background-color: #f9eecc;
}

.mod-articleDetail .sectionBlock table.table01 td.td03 {
background-color: #f3d7d8;
}

.mod-articleDetail .sectionBlock table.table01 td.td04 {
background-color: #e8e6f7;
}

.mod-articleDetail .sectionBlock table.table01 td span {
display: block;
margin: 0 0 0 0.5em;
text-indent: -0.5em;
}

.mod-articleDetail .sectionBlock table.table01 th:nth-of-type(1) {
width: 25%;
}

.mod-articleDetail .sectionBlock table.table01 th:nth-of-type(2) {
width: 25%;
}


/* table */
.mod-articleDetail .sectionBlock table.table02 {
border-top: #4c4c4c 2px solid;
border-left: #4c4c4c 2px solid;
border-right: 0;
border-bottom: 0;
margin-bottom: 50px;
}

.mod-articleDetail .sectionBlock table.table02 th {
border-top: 0;
border-left: 0;
border-right: #4c4c4c 2px solid;
border-bottom: #4c4c4c 2px solid;
font-size: 115.4%; /* 15px */
padding: 14px 10px 12px;
background-color: #f4f4f4;
width: 35%;
text-align: left;
}

.mod-articleDetail .sectionBlock table.table02 td {
border-top: 0;
border-left: 0;
border-right: #4c4c4c 2px solid;
border-bottom: #4c4c4c 2px solid;
padding: 14px 10px 12px;
font-size: 115.4%; /* 15px */
line-height: 1.5;
}

.mod-articleDetail .sectionBlock table.table02 td span {
display: block;
}


/* btnBox */
.mod-articleDetail .sectionBlock .btnBox {
display: flex;
justify-content: center;
margin-bottom: 50px;
}

.mod-articleDetail .sectionBlock .btnBox .btn a {
text-align: center;
border-radius: 6px;
background: #ed6103 url("../img/icon_arrow.png") no-repeat 97% center;
box-shadow: 1.414px 1.414px 2px 0px rgba(31, 31, 31, 0.2);
width: 510px;
display: block;
padding: 15px 0 13px;
color: #fff;
font-size: 176.92%; /* 23px */
line-height: 1.3;
}

.mod-articleDetail .sectionBlock .btnBox .btn a span {
display: block;
font-size: 78.26%; /* 23px → 18px */
}

.mod-articleDetail .sectionBlock .btnBox .btn a:hover {
background-color: #999;
}


/* yomitaiBox */
.mod-articleDetail .sectionBlock .yomitaiBox {
margin-bottom: 50px;
}

.mod-articleDetail .sectionBlock .yomitaiBox h3 {
background-color: #ffab00;
color: #fff;
font-size: 146.15%; /* 19px */
padding: 9px 15px 7px;
}

.mod-articleDetail .sectionBlock .yomitaiBox ul {
border-left: #a5a5a5 1px dotted;
border-right: #a5a5a5 1px dotted;
border-bottom: #a5a5a5 1px dotted;
padding: 20px 6px 12px;
}

.mod-articleDetail .sectionBlock .yomitaiBox ul li {
list-style: disc;
margin: 0 0 0 2em;
text-indent: 0em;
font-size: 107.7%; /* 14px */
line-height: 1.3;
padding: 0 0 10px 0;
}

.mod-articleDetail .sectionBlock .yomitaiBox ul li a {
text-decoration: underline;
}


/* imgBox */
.mod-articleDetail .sectionBlock .imgBox {
margin-bottom: 40px;
display: flex;
justify-content: center;
}

.mod-articleDetail .sectionBlock .imgBox img {
width: 500px;
}


/* grayBox */
.mod-articleDetail .sectionBlock .grayBox {
border: #d2d2d2 4px solid;
padding: 25px 20px 0;
margin-bottom: 20px;
}

.mod-articleDetail .sectionBlock .grayBoxEnd {
border: #d2d2d2 4px solid;
padding: 25px 20px 0;
margin-bottom: 40px;
}

.mod-articleDetail .sectionBlock .grayBox h3,
.mod-articleDetail .sectionBlock .grayBoxEnd h3 {
font-size: 161.54%; /* 21px */
color: #333;
text-align: center;
padding: 0 0 15px 0;
}

.mod-articleDetail .sectionBlock .grayBox .btnBox,
.mod-articleDetail .sectionBlock .grayBoxEnd .btnBox {
margin-bottom: 20px;
}


.mod-articleDetail .sectionBlock .grayBoxEnd ul.matome {
margin: 0 0 10px 0;
}

.mod-articleDetail .sectionBlock .grayBoxEnd ul.matome li {
list-style: disc;
margin: 0 0 0 20px;
font-size: 130.77%; /* 17px */
padding: 0 0 12px 0;
line-height: 1.5;
}

.mod-articleDetail .sectionBlock .grayBoxEnd ul.matome li span {
color: #ed6103;
text-decoration: underline;
}


/* doubleBox */
.mod-articleDetail .sectionBlock .doubleBox {
border: #ed6103 2px solid;
padding: 3px;
margin-bottom: 30px;
}

.mod-articleDetail .sectionBlock .doubleBoxInner {
border: #ed6103 1px solid;
padding: 20px 25px;
}

.mod-articleDetail .sectionBlock .doubleBoxInner h3 {
font-size: 161.54%; /* 21px */
color: #333;
padding: 0 0 15px 10px;
}

.mod-articleDetail .sectionBlock .doubleBox ul li {
font-size: 161.54%; /* 21px */
line-height: 1.7;
}

.mod-articleDetail .sectionBlock .doubleBox ul li span {
font-size: 71.43%; /* 21px → 15px */
line-height: 1.5;
}

.mod-articleDetail .sectionBlock .doubleBox ul.check li {
background: url("../img/icon_check.jpg") no-repeat 18px top;
font-size: 130.77%; /* 17px */
padding: 0 0 8px 50px;
}


/* qaBox */
.mod-articleDetail .sectionBlock .qaBox {
padding-bottom: 30px;
}

.mod-articleDetail .sectionBlock .qaBox .qaInner {
border-bottom: #d2d2d2 1px solid;
margin-bottom: 20px;
}

.mod-articleDetail .sectionBlock .qaBox .qaInner h3 {
display: flex;
margin: 0 0 20px 0;
}

.mod-articleDetail .sectionBlock .qaBox .qaInner h3 span.q {
font-size: 176.92%; /* 23px */
display: block;
background-color: #b797df;
color: #fff;
width: 36px;
height: 36px;
text-align: center;
padding: 6px 0 0 0;
box-sizing: border-box;
}

.mod-articleDetail .sectionBlock .qaBox .qaInner h3 span.qtitle {
font-size: 146.15%; /* 19px */
display: block;
box-sizing: border-box;
margin: 0 0 0 18px;
padding: 4px 0 0 0;
line-height: 1.5;
width: 92%;
}