﻿@charset "utf-8";

/* ============================================================
	研究所TOP 記事詳細
	============================================================ */


/* 記事メイン
	============================================================ */
@media screen and (min-width: 751px) {
	#article {
		width: 800px;
		margin: 5px auto 0;
		color: #333333;
		font-size: 17px;
		line-height: 24px;
		position: relative;
	}
	#article #subhead{
		font-size: 15px;
		line-height: 15px;
		display: block;
		overflow: hidden;
		margin: 20px 0 40px 0;
	}
	#article .cat {
	   float: left;
	   display: inline-block;
	}
	#article .date {
		float: right;
		display: inline-block;
	}
	#article h1 {
		font-size: 36px;
		line-height: 48px;
		margin: 15px 0;
		font-weight: normal;

	}
	#article #author {
		text-align: center;
		margin:40px auto 20px;
		font-size: 16px;
	}
	#article .subTitle {
		font-size: 20px;
		margin-top: 10px;
	}
	#article #date {
		font-size: 17px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	#blog_title {
		font-size: 17px;
		font-weight: bold;
	}
	#article #top_text {
		font-size: 17px;
		line-height: 24px;
		margin: 40px 0 40px;
		padding: 19px 0 18px;
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
	}
	#article .blockTemplateArea:after {
		content: "";
		display: block;
		clear: both;
	}
	#article .blockTemplateArea .headLv2-A{
		margin: 40px 0 40px;
	}
	#article .blockTemplateArea .headLv2-A h2 {
		font-size: 22px;
		line-height:26px;
		border-left:8px solid;
		padding-left:12px;
	}
	#article .blockTemplateArea .headLv3-A{
		margin: 40px 0 40px;
	}
	#article .blockTemplateArea .headLv3-A h3 {
		font-size: 20px;
		line-height:26px;
	}
	#article .figureBlock,  #article .figureBlock-floated-L,  #article .figureBlock-floated-R,  #article .figureBlock-floated-L + p {
		margin: 25px 0 20px;
	}
	#article .blockTemplateArea .figureBlock-floated-L {
		padding-right: 30px;
	}
	#article .blockTemplateArea .figureBlock table tr > td:first-child {
		padding-left: 0;
	}

	#article .chushaku p{
		margin-top:5px;
		margin-bottom:1.5em;
		font-size: 14px;
		line-height:20px;
		color: #666;
	}

	#article .inyo{
		margin: 30px 0;
	}

	#article .inyo p{
		background-color:#f7f7f7;
		padding:20px;
		margin: 10px;
		font-size: 16px;
		line-height:22px;
	}

	#article .kakomi{
	    margin: 2rem 0;
		padding: 2rem 1rem;
		border: 2px  #ddd solid;
	}

	#article .articleBottom{
	/*
		margin: 40px auto 20px;
		width:700px;
	*/
		margin: 40px 80px 20px;
	}
	#article .figureBlock td + td {
		margin-left : 10px;
	}
	#article .figureBlock td.twtf{
		width:288px;
		height: 114px;
		border:3px solid #55acee;
		text-align:center;
		vertical-align: inherit;
	}
	#article .figureBlock td.lineff{
		width:288px;
		height: 114px;
		border:3px solid #55acee;
		text-align:center;
		vertical-align: inherit;
	}
	#article_sns {
		width: 1000px;
		margin: 0 auto;
		height: 25px;
		text-align: center;
		padding: 15px 0 20px;
		border-bottom: 1px dotted #aeaeae;
	}

	#article_sns li {
		display: inline-block;
		margin: 0 3px;
	}
}


@media screen and (max-width: 750px) {
	#article{
		margin: 0px 10px 20px;
		min-width : 300px;
	}

	#article .cat {
		text-align: left;
		float: left;
		/* margin:1px 0; */
	}

	#article .date {
		text-align:right;
		margin:0;
		line-height: 12px;
		/* margin:8px 0; */
	}
	#article h1 {
		font-size: 1.3rem;
		padding-top: 10px;
		line-height: 1.7rem;
	}
	#article #author {
		text-align: center;
		font-size: 0.8rem;
		margin-bottom: 0.5rem;
	}
	#article #author img{
		width:70px;
	}
	#article #top_text {
		font-size: 14px;
		line-height: 17px;
		margin-top: 1rem;
		padding: 1rem 0;
		border-top: 1px solid #d2d2d2;
		/* border-bottom: 1px solid #d2d2d2; */
	}
	#article .chushaku p {
		padding-bottom:10px;
		font-size: 12px;
		line-height:17px;
		color: #666;
	}
	#article .inyo {
		margin: 0 0 20px;
	}
	#article .inyo p {
		background-color:#f7f7f7;
		padding: 10px;
		margin: 5px;
		font-size: 14px;
		line-height:22px;
	}
	#article .kakomi {
	    margin: 2rem 0;
		padding: 2rem 1rem;
		border: 2px  #ddd solid;
	}
	#article .articleBottom {
		margin: 40px auto 20px;
	}
	#article .figureBlock {
		text-align: center;
	}
	#article .figureBlock tr,
	#article .figureBlock th {
		display: block;
		width:100%;
	}
	#article .figureBlock td{
		margin-top:10px;
		display: inline-block;
	}
	#article .figureBlock td.fbf{
		width: 300px;
		display: inline-block;
		margin: 10px auto;
	}
	#article .figureBlock td.twtf{
		display: inline-block;
		width: 288px;
		height: 118px;
		border:3px solid #55acee;
		padding: 3px;
		text-align:center;
		vertical-align: inherit;
	}
	#article .figureBlock td.linef {
		display: inline-block;
		width: 288px;
		height: 118px;
		border:3px solid #55acee;
		padding: 3px;
		text-align:center;
		vertical-align: inherit;
	}
	#article .figureBlock-floated-L,
	#article .figureBlock-floated-R {
		padding: 0;
		width: 100%;
		margin-bottom: 0;
		text-align: center;
	}
}


/* 本文領域
	============================================================ */
/* 陣でイタリック装飾した際に、イタリックではなく、少し大きい文字を表示するようにする */
.blockTemplateArea p em {
	font-style : normal !important;
	font-size : 1.5rem;
	line-height : 4rem;
}
/**
  * bulmaスタイルのキャンセル
  *
  * 画像の横並びレイアウトが崩れないようにするため
  */
.blockTemplateArea .image img {
	width : auto;
}
@media screen and (min-width: 751px) {
	.blockTemplateArea:after {
		content: "";
		display: block;
		clear: both;
	}
	.blockTemplateArea .headLv2-A{
		margin: 40px 0 40px;
	}
	.blockTemplateArea .headLv2-A h2 {
		font-size: 22px;
		line-height:26px;
		border-left:8px solid;
		padding-left:12px;
	}
	.blockTemplateArea .headLv3-A{
		margin: 40px 0 40px;
	}
	.blockTemplateArea .headLv3-A h3 {
		font-size: 20px;
		line-height:26px;
	}
	.blockTemplateArea .figureBlock-floated-L {
		padding-right: 30px;
	}
	.blockTemplateArea .figureBlock table tr > td:first-child {
		padding-left: 0;
	}
}
@media screen and (max-width: 750px) {
	.blockTemplateArea div,
	.blockTemplateArea span,
	.blockTemplateArea object,
	.blockTemplateArea iframe,
	.blockTemplateArea h1,
	.blockTemplateArea h2,
	.blockTemplateArea h3,
	.blockTemplateArea h4,
	.blockTemplateArea h5,
	.blockTemplateArea h6,
	.blockTemplateArea p,
	.blockTemplateArea blockquote,
	.blockTemplateArea pre,
	.blockTemplateArea a,
	.blockTemplateArea abbr,
	.blockTemplateArea acronym,
	.blockTemplateArea address,
	.blockTemplateArea em,
	.blockTemplateArea font,
	.blockTemplateArea img,
	.blockTemplateArea strong,
	.blockTemplateArea sub,
	.blockTemplateArea sup,
	.blockTemplateArea dl,
	.blockTemplateArea dt,
	.blockTemplateArea dd,
	.blockTemplateArea ol,
	.blockTemplateArea ul,
	.blockTemplateArea li,
	.blockTemplateArea fieldset,
	.blockTemplateArea form,
	.blockTemplateArea label,
	.blockTemplateArea legend,
	.blockTemplateArea table,
	.blockTemplateArea caption,
	.blockTemplateArea tbody,
	.blockTemplateArea tfoot,
	.blockTemplateArea thead,
	.blockTemplateArea tr,
	.blockTemplateArea th,
	.blockTemplateArea td {
		margin: 0;
		padding: 0;
		font-size: 14px;
		line-height:1.6em;
	}
	#article .blockTemplateArea {
		padding: 0;
	}
	#article .blockTemplateArea p{
		/* padding-top:5px; */
	}
	#article .blockTemplateArea p.caption{
		margin:0;
		padding:0;
	}
	.blockTemplateArea table {
		width: 100%;
	}
	.blockTemplateArea .figureBox td.figureBox-textArea {
		margin:0;
		padding:0;
	}
	.blockTemplateArea .figureBox td.figureBox-figureArea {
		margin:0;
		padding:0;
	}
	.blockTemplateArea .figureBlock p.caption{
		font-size:13px;
		margin:2px 0 0;
		padding:0 0 6px;
		text-align:left;
		color:#747474;
	}
	.blockTemplateArea table tbody {
		display: -webkit-box;
	}
	.blockTemplateArea table tr, 
	.blockTemplateArea table th,
	.blockTemplateArea table td {
		display: block;
	}
	.blockTemplateArea table.puregrid,
	.blockTemplateArea table.puregrid tbody,
	.blockTemplateArea table.puregrid tr{
	    width:100%;
		display:table;
	}
	.blockTemplateArea table.puregrid td {
		width:50%;
		display:flex;
	}
	.blockTemplateArea .headLv2-A{
		margin: 40px 0 20px;
	}
	.blockTemplateArea .headLv2-A h2 {
		font-size: 18px;
		line-height:22px;
		border-left:6px solid;
		padding-left:10px;
		font-weight: bold;
	}
	.blockTemplateArea .headLv3-A{
		margin: 40px 0 20px;
	}
	.blockTemplateArea .headLv3-A h3 {
		font-size: 16px;
		line-height:20px;
	}
}


/* カテゴリ名
	============================================================ */
@media screen and (min-width: 751px) {
	#subhead{
		font-size: 15px;
		line-height: 15px;
		display: block;
		overflow: hidden;
		margin: 20px 0 40px 0;
	}
}
@media screen and (max-width: 750px) {
	#article #subhead{
		display: block;
		margin: 8px 0;
		width: 100%;
		height: 12px;
	}
}

/* カードリンク
	============================================================ */
a.card-link {
	padding : 0.5rem;
	display : table;
	white-space : inherit;
	border-radius : 0;
}
a.card-link .columns {
	margin-right : -.75rem;
	margin-left : -.75rem;
	margin-top : -.75rem;
}
a.card-link .columns:last-chiled {
	margin-bottom : -.75rem;
}

a.card-link hr {
	margin : 1rem 0;
}

a.card-link .card-link-image {
	padding-right : 0!important;
}

a.card-link .card-link-content {
	text-align : left;
}
@media screen and (min-width: 751px) {
	a.card-link {
		margin : 1rem 0;
		width : 80%;
	}
	a.card-link .card-link-content .title {
		font-size : 1.4rem;
		font-weight : 400;
		margin-bottom : 0;
		color : #444;
	}
	a.card-link .card-link-content .desc {
		font-size : 1rem;
	}
	a.card-link .column {
		padding : 1.5rem;
	}
}
@media screen and (max-width: 750px) {
	a.card-link {
		margin : 1rem auto;
	}
	a.card-link .card-link-content .title {
		font-size : 1rem;
		font-weight : bold;
		margin-bottom : 0;
		color : #444;
	}
	a.card-link .card-link-content .desc {
		font-size : 0.8rem;
	}
	a.card-link .column {
		padding : 0.75rem;
	}
}