@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 */
.mod-articleDetail {
color: #333;
letter-spacing: 0.02em;
line-height: 2;
}

.mod-articleDetail p {
line-height: 1.9;
padding: 0 20px 20px 15px;
font-size: 115.4%;
}

.mod-articleDetail h1 {
border-radius: 0;
display: block; 
width: 698px;
height: 285px;
background: url(../img/img_head.jpg) no-repeat left top;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}

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

/* madorinoKami */
.mod-articleDetail .madorinoKami {
background-color: #f4f4f4;
padding: 20px 10px 20px;
margin: 0 20px 30px;
}

.mod-articleDetail .madorinoKami dl {
display: flex;
flex-wrap: nowrap;
width: 100%;
}

.mod-articleDetail .madorinoKami dt {
width: 232px;
}

.mod-articleDetail .madorinoKami dd {
padding: 10px 20px 0 10px;
font-size: 115.4%;
line-height: 1.6;
}

/* kamimadoriMenu */
.mod-articleDetail .kamimadoriMenu {
background-color: #fbf2d5;
margin: 0 20px 20px;
padding: 0px 20px;
}

.mod-articleDetail .kamimadoriMenuInner {
position: relative;
top: -20px;
}

.mod-articleDetail .kamimadoriMenu .title {
display: block;
width: 238px;
height: 64px;
background: url(../img/title_menu.png) no-repeat left top;
margin: 0 auto;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
position: relative;
top: -10px;
}

.mod-articleDetail .kamimadoriMenu p {
text-align: center;
font-size: 126.7%;
padding-bottom: 0px;
position: relative;
top: -10px;
}

.mod-articleDetail .kamimadoriMenu ul {
background-color: #fff;
text-align: center;
padding: 12px 0 5px;
}

.mod-articleDetail .kamimadoriMenu li {
display: inline;
font-size: 184.6%;
font-weight: normal;
padding: 0 24px;
}

.mod-articleDetail .kamimadoriMenu li a {
color: #000;
text-decoration: underline;
}

.mod-articleDetail .kamimadoriMenu li a:hover {
color: #e95283;
}

.mod-articleDetail .kamimadoriMenu li.menu01:before {
content: "1";
color: #fff;
display: inline-block;
width: 46px;
height: 38px;
background: url(../img/icon_menu.png) no-repeat left top;
}

.mod-articleDetail .kamimadoriMenu li.menu02:before {
content: "2";
color: #fff;
display: inline-block;
width: 46px;
height: 38px;
background: url(../img/icon_menu.png) no-repeat left top;
}

.mod-articleDetail .kamimadoriMenu li.menu03:before {
content: "3";
color: #fff;
display: inline-block;
width: 46px;
height: 38px;
background: url(../img/icon_menu.png) no-repeat left top;
}

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

/* sectionHead */
.mod-articleDetail .sectionBlock .sectionHead {
border: #e95283 6px solid;
box-shadow: 3px 3px 0px 0px #fadbe1;
margin-bottom: 30px;
}

.mod-articleDetail .sectionBlock .sectionHead h2 {
padding: 0;
margin: 0;
line-height: 1;
display: flex;
flex-wrap: nowrap;
width: 100%;
}

.mod-articleDetail .sectionBlock .sectionHead h2 span.icon {
background: #e95283 url(../img/icon_title.png) no-repeat 2px 8px;
color: #e95283;
display: block;
width: 64px;
padding: 24px 0 0 20px;
box-sizing: border-box;
font-size: 215.4%;
}

.mod-articleDetail .sectionBlock .sectionHead h2 span.txt {
width: 582px;
padding: 16px 0 14px 14px;
font-size: 230.7%;
color: #000;
font-weight: normal;
line-height: 1.2;
}

.mod-articleDetail .sectionBlock .sectionHead h2 span.txt em {
background: linear-gradient(transparent 70%, #ffdbe5 0%);
font-weight: normal;
}

/* caseSection */
.mod-articleDetail .sectionBlock .caseSection {
display: flex;
flex-wrap: nowrap;
flex-direction: row-reverse;
width: 100%;
}

.mod-articleDetail .sectionBlock .caseSection .paisenImg {
width: 298px;
position: relative;
}

.mod-articleDetail .sectionBlock .caseSection .paisenImg:before {
content: "";
display: block;
width: 54px;
height: 54px;
background: url(../img/icon_arrow_left.png) no-repeat left top;
position: absolute;
top: 100px;
left: -20px;
}

.mod-articleDetail .sectionBlock .caseSection .solutionBox {
width: 360px;
}

.mod-articleDetail .sectionBlock .caseSection .solutionBox .solutionHead {
display: flex;
flex-wrap: nowrap;
width: 100%;
margin-bottom: 10px;
}

.mod-articleDetail .sectionBlock .caseSection .solutionBox .solutionHead span {
display: block;
width: 80px;
height: 80px;
background: url(../img/icon_kaiketsu.png) no-repeat left top;
box-sizing: border-box;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}

.mod-articleDetail .sectionBlock .caseSection .solutionBox .solutionHead h3 {
width: 280px;
box-sizing: border-box;
font-size: 184.6%;
line-height: 1.4;
padding: 6px 0 6px 8px;
}

.mod-articleDetail .sectionBlock .caseSection .solutionBox .txt {
background-image: url(../img/img_kakko_lt.png), url(../img/img_kakko_rb.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
padding: 20px 0 0 5px;
}

.mod-articleDetail .sectionBlock .caseSection .solutionBox .txt p {
line-height: 2;
}

/* madoriSection */
.mod-articleDetail .sectionBlock .madoriSection h3 {
position: relative;
display: block;
width: 220px;
height: 90px;
background: url(../img/title_madori.png) no-repeat left top;
z-index: 2;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}

.mod-articleDetail .sectionBlock .madoriSection .img {
z-index: 1;
margin-top: -30px;
display: block;
box-sizing: border-box;
}

.mod-articleDetail .sectionBlock .madoriSection .img img,
.mod-articleDetail .sectionBlock .madoriSection .img02 img {
max-width: 100%;
}

.mod-articleDetail .sectionBlock .madoriSection p.txt_right {
text-align: right;
font-size: 86.7%;
padding: 0 5px 15px 0;
margin: 0;
}

.mod-articleDetail .sectionBlock .madoriSection .madoriDetail {
display: flex;
flex-wrap: nowrap;
width: 100%;
margin-bottom: 30px;
}

.mod-articleDetail .sectionBlock .madoriSection .madoriDetail .img {
width: 190px;
margin: 0;
}

.mod-articleDetail .sectionBlock .madoriSection .madoriDetail .txt {
width: 468px;
}

/* pointBox */
.mod-articleDetail .sectionBlock .pointBox {
display: flex;
flex-wrap: nowrap;
width: 100%;
margin-bottom: 20px;
}

.mod-articleDetail .sectionBlock .pointBox .leftBox {
width: 320px;
margin-right: 18px;
}

.mod-articleDetail .sectionBlock .pointBox .rightBox {
width: 320px;
}

.mod-articleDetail .sectionBlock .pointBox span {
display: block;
background-color: #e95283;
text-align: center;
color: #fff;
font-size: 184.6%;
border-radius: 40px;
line-height: 1;
padding: 7px 0 5px 0;
margin-bottom: 18px;
}

.mod-articleDetail .sectionBlock .pointBox h4 {
color: #e95283;
font-size: 153.8%;
line-height: 1.5;
margin-bottom: 10px;
padding: 0 5px;
}

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

/* sourceBlock */
.mod-articleDetail .sourceBlock {
padding: 0 30px 25px;
line-height: 1.8;
}

/* seriesListBlock */
.mod-articleDetail .seriesListBlock {
padding: 0px 20px;
margin-bottom: 50px;
}

.mod-articleDetail .seriesListBlock .seriesHead {
background-image: url(../img/line_slash.jpg), url(../img/bg_dot_gray.jpg);
background-repeat: repeat-x, repeat;
background-position: left top, left top;
}

.mod-articleDetail .seriesListBlock .seriesHead h2 {
padding: 20px 0px 15px 75px;
background: url(../img/icon_kamisama.png) no-repeat 7px 20px;
font-size: 215.4%;
line-height: 1.5;
letter-spacing: -0.02em;
}

.mod-articleDetail .seriesListBlock .seriesHead h2 span {
display: inline;
background-color: #78a7d9;
color: #fff;
font-size: 71.4%;
border-radius: 40px;
line-height: 1;
padding: 5px 18px 4px 18px;
margin-bottom: 10px;
margin-left: 15px;
}

.mod-articleDetail .seriesListBlock .seriesList {
padding: 8px 0 6px 0;
background: url(../img/line_slash02.jpg) repeat-x left bottom;
}

.mod-articleDetail .seriesListBlock .seriesList a {
display: flex;
flex-wrap: nowrap;
width: 100%;
color: #222;
}

.mod-articleDetail .seriesListBlock .seriesList a:hover {
display: flex;
flex-wrap: nowrap;
width: 100%;
color: #222;
background-color: #ececec;
}

.mod-articleDetail .seriesListBlock .seriesList .img {
width: 110px;
margin-right: 10px;
}

.mod-articleDetail .seriesListBlock .seriesList .txt {
width: 470px;
margin-right: 6px;
}

.mod-articleDetail .seriesListBlock .seriesList .arrow {
margin-top: 40px;
}

.mod-articleDetail .seriesListBlock .seriesList .txt span.seriesSub {
display: inline-block;
background-color: #231815;
text-align: center;
color: #fff;
font-size: 138.5%;
border-radius: 30px;
line-height: 1;
padding: 7px 15px 5px 15px;
margin-top: 18px;
margin-bottom: 12px;
}

.mod-articleDetail .seriesListBlock .seriesList .txt span.seriesSub span {
color: #fff799;
}

.mod-articleDetail .seriesListBlock .seriesList li {
float: left;
font-size: 153.8%;
margin-right: 18px;
}

.mod-articleDetail .seriesListBlock .seriesList li span {
display: inline-block;
width: 42px;
height: 36px;
color: #fff;
font-size: 110%;
background: url(../img/icon_series_num.png) no-repeat left top;
text-align: center;
margin-right: 5px;
}