@charset "UTF-8";
/* CSS Document */

body{
/*background: -moz-linear-gradient(top, #FFF, #fad0c4 30%, #fdeff2 60%, #f4b3c2);特集記事だけグラデーション表示 */
/*background: -webkit-linear-gradient(top, #FFF, #fad0c4 30%, #fdeff2 60%, #f4b3c2);特集記事だけグラデーション表示 */
/*background: linear-gradient(to bottom, #FFF, #fad0c4 30%, #fdeff2 60%, #f4b3c2); 特集記事だけグラデーション表示 */

animation: fadeIn 9s ease 0s 1 normal;          /*特集記事だけフェードイン表示 */
-webkit-animation: fadeIn 2s ease 0s 1 normal; /*特集記事だけフェードイン表示 */

color: #000;/*特集記事だけ文字色黒色 */
}

/*p {
font-family:'游明朝','Yu Mincho','Hiragino Mincho ProN','ヒラギノ明朝 ProN','ToppanBunkyuMinchoPr6N-Regular','凸版文久明朝 Pr6N レギュラー','Times New Roman','Avenir',serif;
}  artcleのフォントを変更したい時はここで設定*/

/*h2,h3 {
font-family:'游明朝','Yu Mincho','Hiragino Mincho ProN','ヒラギノ明朝 ProN','ToppanBunkyuMinchoPr6N-Regular','凸版文久明朝 Pr6N レギュラー','Times New Roman','Avenir',serif;
}　artcleのフォントを変更したい時はここで設定*/


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}   /*特集記事だけフェードイン表示 */
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}	/*特集記事だけフェードイン表示 */
}


.container p{
	color: #000;/*現状は黒色。文章を少し薄くするとき#383c3 */
}
.container h3{
	color:#000;/*見出しは黒色 */
}

/*each_artcle1の左右余白調整 */
.each_artcle1{
    margin: 12em 12em;
    padding: 0;
	border-top:2px solid #FFF;
	border-bottom:2px solid #FFF;
}

/*each_artcle1の800px以下での左右余白調整 */
@media screen and (max-width:800px) {
	.each_artcle1{
    margin:0;
    padding: 0;
}
}
/*each_artcle2の左右余白調整 */
.each_artcle2{
    margin: 12em 12em;
    padding: 0;
}

/*each_artcle2の800px以下での左右余白調整 */
@media screen and (max-width:800px) {
	.each_artcle2{
    margin:0;
    padding: 0;
}
}


/* サムネイルイメージをヘッダーの背景画像として表示。500px以下で高さ表示割合調整 */
.back_image{
	position:relative;/* レイヤー画像、テキストとの位置関係 */
	width:100%;
	height:0;
	padding-top:calc(1000 / 1500 * 50%);/*高さ表示割合調整 */
	/* background-image:url(../image/hiyou.png); 画像はHTMLで指定 */
	 /*text-align:  center;     文字中央寄せ */
    /* padding:  150px;  余白指定 */
    border: solid 1px;      /* 枠線指定 */
	background-repeat:no-repeat; /* 背景の繰り返し設定 */
	background-size:cover; /*画像のサイズ指定 */
	background-position:center center;/* 画像の位置指定 */
}/* 使用停止中 */


@media (max-width: 500px) {
	.back_image{
	position:relative;/* レイヤー画像、テキストとの位置関係 */
	width:100%;
	height:0;
	padding-top:calc(1000 / 1500 * 100%);/*高さ表示割合調整 */
	/*background-image:url(../image/hiyou.png);  画像はHTMLで指定 */
	 /*text-align:  center;     文字中央寄せ */
    /* padding:  150px;  余白指定 */
    border: solid 1px;      /* 枠線指定 */
	background-repeat:no-repeat; /* 背景の繰り返し設定 */
	background-size:cover; /*画像のサイズ指定 */
	background-position:center center;/* 画像の位置指定 */
	}/* 使用停止中 */
	}


/* layer_1→レイヤー画像　layer_2→見出しテキスト　layer_3→日付テキスト */
.layer_1,.layer_2,.layer_3{
	position:absolute;/* 親要素に対しての絶対位置 */
} 
.layer_1{
	left:0;/* 始まり箇所 */
	top:0;/* 始まり箇所 */
	z-index:10;/* 重なり順（後ろ） */
}
.layer_2{
	/*left:0; 始まり箇所 */
	/*top:0; 始まり箇所 */
	z-index:20;/* 重なり順（前） */
	color:#FFF;/* 文字色指定 */
	top: 50%;/* 中央配置 */
	left: 50%;/* 中央配置 */
	transform: translateY(-50%) translateX(-50%);/* 中央配置 */
	-webkit- transform: translateY(-50%) translateX(-50%);/* 中央配置 */
	margin: auto;/* 中央配置 */
	font-size:2em;
}
.layer_3{
	/*left:0; 始まり箇所 */
	/*top:0; 始まり箇所 */
	z-index:20;/* 重なり順（前） */
	color:#FFF;/* 文字色指定 */
	top: 80%;/* 中央から少し下配置 */
	left: 50%;/* 中央配置 */
	transform: translateY(-50%) translateX(-50%);/* 中央配置 */
	-webkit- transform: translateY(-50%) translateX(-50%);/* 中央配置 */
	margin: auto;/* 中央配置 */
	font-size:1.3em;
}

/* デバイスサイズに合わせて見出しと日付テキストの大きさを変える */
@media (max-width: 799px) {
	.layer_2,.layer_3{
		font-size:1em;
	}
}
@media (min-width: 1500px) {
	.layer_2{
		font-size:3em;
	}
}
@media (min-width: 1500px) {
	.layer_3{
		font-size:2.3em;
	}
}

/* レイヤー画像を親div（back_image）の大きさに合わせて表示 */
.layer_1{
	/*max-width:100%;*/
	height:100%;
	width:100%;
}


/* 記事画像に */
.at_image{
	display:block;/* 画像の枠線が消えるの対策 */
	border:solid 1px #383c3c;/* 枠線指定 */
	max-width:100%;/* 親divの大きさに合わせて表示 */
	height:auto;/* 親divの大きさに合わせて表示 */
	width /***/:auto;/* 親divの大きさに合わせて表示 */
	opacity:1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

figure:hover .at_image {
	/* opacity:.6; ホバー時の画像不透明度だが使用していない.9ぐらいならOK */
	background: rgba(0,0,0,.1);
}

/* h3は見出しなので多少修正した */
h3{
	text-align:center;
	color:#FFF;
}

@media (max-width: 500px) {
	h3{
		font-size:1.3em;
	}
}


.link_color{
	color:#383c3c;/* リンクの色を本文と同じにした */
}
.link_color:hover{
	color:#eb6ea5;/* hover時の色はspecialと同じにした */
}



.yohaku{
	margin-bottom:80px;/*小見出しと文章の間に余白をつけた*/
}

@media (max-width: 500px) {
	.yohaku{
		margin-bottom:40px;/*500以下は余白を小さくする*/
	}
}




/*相互会話用のCSS*/

.kaiwa2{
	text-align:left;
}

.kaiwa2 a img{
	border-radius:15px;
}


.kaiwa3{
	line-height:2;
}

.kaiwa4{
	text-align:right;
}

.kaiwa4 a img{
	border-radius:15px;
}


.kaiwa5{
	line-height:2;
	text-align:right;
}