/* ===================================================================
CSS information

 file name  :  detail.css

=================================================================== */
sup {
	font-size: 70%;
	vertical-align: top;
	position: relative;
	top: -0.1em;
}
sub {
	font-size: 70%;
	vertical-align: bottom;
	position: relative;
	bottom: -0.1em;
}

.display_pc {
  display:block !important;
}
.display_sp {
  display:none !important;
}
@media only screen and (max-width: 1024px) {
.display_pc {
  display:none !important;
}
.display_sp {
  display:block !important;
}
}
#content-wrap {
    max-width: 1130px;
    width: 100%;
    padding: 0 50px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.details{
  padding: 48px 50px 58px;
    border: 1px solid #aaa;
}

@media only screen and (max-width: 1024px) {
#content-wrap {
    width: 100%;
    padding: 0 0;
    margin: 0 auto;
    display: block;
}  
.details{
    margin: 5px auto 0;
    padding: 18px 4.6875% 5%;
    border: none;
  }

.details .detail-content {
    font-size: 1.0rem;
    line-height: 1.65;
    margin-top:0;
}
.details .tag-sns-wrapper .sns {
    margin-top:0;
    padding-top:20px;
}
.details .detail-header h1 .h1_title {
        font-size: calc(40*(100vw / 640));
        line-height: calc(60*(100vw / 640));
}
.details .detail-content h3{
    font-size: calc(36 *(100vw / 640));
    line-height: calc(50 *(100vw / 640));
    padding-left: 20px;
    margin-bottom: 16px;
}
.details .tag-sns-wrapper .tag ul li a {
    font-size: calc(24*(100vw / 640));
}
.details .detail-footer .relation .ttl {
    text-indent: 0;
    padding-top: 25px;
}
}




/* 縦画像用 */
.details img.img65 {
    display:block !important;
    width: 65% !important;
    margin: 0;
}
@media only screen and (max-width: 640px) {
.details img.img65 {
    display:block !important;
    width: 65% !important;
}
}



/* 目次用 */
.details .mokuji {
    font-weight: 500;
    line-height: 1;
    margin: 0 0 10px;
}
.detail__midashi {
    margin:0;
    padding-left:20px;
}
.detail__midashi li {
    padding-bottom:10px;
    line-height:1.5;
    font-weight: 500;
    font-size: 16px !important;
}
.detail__midashi li:last-child {
    padding-bottom:0;
}
@media screen and (max-width:640px) {
.details .mokuji {
    text-align:center;
}
}



/* あなたへのおすすめ記事用 */
@media only screen and (max-width: 1024px) {
    .details .detail-footer .relation .ttl {
        padding-top: 5px;
        font-size:16px;
    }
}