@charset "UTF-8";

/* layout
----------------------------- */
.co_container_box_inner {
width: 965px;
margin: 0 auto;
}
.contents_right {
width: 770px;
float: right;
padding-bottom: 10px;
background: #d7e7ff;
}
.contents_right * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* common
----------------------------- */
.imgBlock {
width: 100%;
text-align: center;
}
.imgBlock.title {
margin: 0 auto 20px;
}
.imgBlock a {
display: block;
}
.imgBlock img {
width: 100%;
max-width: 770px;
height: auto;
}
.underline {
text-decoration: underline;
text-underline-position: under;
text-decoration-line: underline;
text-decoration-skip-ink: none;
}
.indent_1em {
padding-left: 1em;
text-indent: -1em;
}

/* header
--------------------------------------- */
.head_area {
margin: 0 auto 35px;
}
.head_area img {
width: 770px;
height: 320px;
}
.head_area .lead_text {
margin-bottom: 18px;
padding: 10px 0 10px;
background: #000;
line-height: 1.2;
text-align: center;
font-weight: bold;
font-size: 16px;
color: #fff;
}

/* toplead
----------------------------- */
.toplead {
margin: 0 auto 60px;
}
.toplead.imgBlock a + a {
margin-top: 60px;
}
.toplead.imgBlock img {
max-width: 700px;
}

/* title_area
----------------------------- */
.title_area a {
text-decoration: none;
}
.title_area .contents_inner {
display: flex;
width: 720px;
margin: 0 auto 10px;
text-align: center;
}
.title_area .container {
width: 220px;
margin: 0 auto 30px;
text-align: center;
}
.title_area .text_box {
height: 130px;
margin-bottom: 13px;
}
.title_area .rank_num {
margin: 0 auto 8px;
border-radius: 8px;
}
.title_area .rank_num.rank01 {
background: #e8c32b;
}
.title_area .rank_num.rank02 {
background: #85888c;
}
.title_area .rank_num.rank03 {
background: #b07545;
}
.title_area .rank_num img {
width: 100%;
max-width: 160px;
height: auto;
}
.title_area .title_name {
margin-bottom: 5px;
line-height: 20px;
text-align: center;
color: #333;
}
.title_area .title_name a{
font-size:18px;
font-weight: bold;
color: #333;
}
.title_area .author_name {
line-height: 20px;
text-align: center;
color: #626d77;
}
.title_area .author_name a {
font-size: 16px;
color: #626d77;
}
.title_area .thum_box a {
display: block;
}
.title_area .thum_box img {
width: 100%;
max-width: 300px;
border-radius: 3px;
}
.title_area .sale {
height: 26px;
margin: 0 auto;
background: #fb4646;
line-height: 26px;
font-size: 16px;
color: #fff;
}
.title_area .hashtag {
margin: 13px 0;
text-align: center;
}
.title_area .hashtag a {
display: block;
max-width: 180px;
height: 34px;
margin: 0 auto;
padding: 0 4px;
background: #eef5ff;
border: 1px solid #666;
border-radius: 16px;
line-height: 32px;
text-align: center;
font-size: 14px;
color: #666;
}
.title_area .hashtag a + a {
margin-top: 8px;
}
.title_area .btn_box {
margin: 0 auto;
text-align: center;
}
.title_area .btn_box a{
display: block;
max-width: 180px;
height: 34px;
margin: 0 auto;
padding-top: 2px;
background: #fef102;
border: 1px solid #333;
border-radius: 16px;
line-height: 32px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #333;
}
.title_area .contents_inner.other {
flex-wrap: wrap;
}
.title_area .other .container {
display: flex;
flex-wrap: wrap;
width: 23%;
margin: 0 1% 40px;
}
.title_area .other .thum_box {
width: 100%;
}
.title_area .other .text_box {
width: 100%;
height: auto;
margin: auto auto 0;
}

/* detail_area
----------------------------- */
.detail_area {
margin: 0 10px 15px;
background: #fff;
border: 1px solid #1a1a1a;
text-align: left;
}
.detail_area p {
padding: 0 10px;
font-size: 16px;
}
.detail_area p.indent_1em {
padding: 0 10px 0 24px;
text-indent: -14px;
}
.detail_title {
height: auto;
margin-bottom: 10px;
padding: 8px 5px;
background: #1a1a1a;
line-height: 30px;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
}
.detail_contents{
padding: 15px;
background: #fff;
line-height: 1.4;
text-align: left;
color: #333;
}
.detail_contents dt{
font-size: 16px;
font-weight:bold;
}
.detail_area dt {
font-size: 16px;
font-weight:bold;
}
.detail_contents dd{
font-size: 16px;
}
.detail_contents dd + dt {
margin-top: 10px;
}

/* btn_areas(sns)
----------------------------- */
.btn_areas {
margin: 10px;
}
.btn_areas img:hover {
opacity:0.7;
}

/* end
----------------------------- */
.end_area {
margin: 40px auto;
text-align: center;
}
.end_area p {
font-size: 18px;
font-weight: bold;
color: #eb141b;
}