@charset "UTF-8";

/*=====================================================================================================================
========================================================================================================================スマートフォン=====767px以下*/
@media only screen and (max-width: 767px) {

.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	}


/* ▼キャプション付き画像全体を囲むボックスの装飾 */
figure {
    /*display: inline-block;*/   /* インラインブロック化 */
    margin: 0px 0px 1em 0px; /* 外側に余白を追加(※下に1em) */
}

/* ▼画像に対する装飾 */
figure img {
    width: 100%;         /* css指定サイズに収める */
    margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */
}
/* ▼キャプションに対する装飾 */
figcaption {
    font-size: 0.9em;        /* 文字サイズを90%に */
    text-align: center;      /* 中身をセンタリング */
		margin-bottom: 2em;
}


/*H イラストに対してのテキスト回り込み　写真につける。PCも30%*/
#topics .phot_left {
	margin-right: 2%;
	padding-bottom: 1%;
	float: left;
	width: 30%;
}

/*H イラストに対してのテキスト回り込み　写真につける。PCも30%*/
#topics .phot_right {
	margin-left: 2%;
	padding-bottom: 1%;
	float: right;
	width: 30%;
}
/*K 回り込み 写真につける　spは48% pcも48% 対するテキストはclassなし*/
#topics .phot_left48 {
	margin-right: 2%;
	padding-bottom: 1%;
	float: left;
	width: 48%;
}
/*K 回り込み 写真につける　spは48% pcも48% 対するテキストはclassなし*/
#topics .phot_right48 {
	margin-left: 2%;
	padding-bottom: 1%;
	float: right;
	width: 48%;
}	
/*C pcも100%max960px*/
#topics .photo1 {
	width: 100%;
	margin: 0 0.1%;
}
	
/*A spは100% pcは48%*/
#topics .photo1_s2 {
	width: 100%;
	display: block;
}

/*D pcも48%max380px*/
#topics .photo2 {
	width: 48%;
	margin-right: 2%;
	padding-bottom: 1%;
	float: left;
}

/*G pcは23%max260px*/
#topics .photo2_s4 {
	width: 48%;
	margin: 0 0.1%;
	float: left;
}

/*F pcも30%max260px*/
#topics .photo3 {
	width: 30%;
	margin: 0 1.5%;
	float: left;
}
/*J pcも23%max260px*/
#topics .photo4 {
	width: 23%;
	margin: 0 0.1%;
	float: left;
}

/*E 回り込み写真および単独写真　spは100% pcは30%*/
#topics .photo_sp100_pc30 {
	width: 100%;
	margin: 0 0.1%;
}

/*L 回り込み写真および単独写真　spは100% pcは48%*/
#topics .photo_sp100_pc48 {
	width: 100%;
	margin: 0 0.1%;
}
#topics .column_mini .illust {
width: 100%;
text-align: center;
}
#topics .illust img {
width: 50%;
}
#topics .illust_mini {
	width: 100%;
	margin-right: 2%;
	padding-bottom: 1%;
	text-align: center;
	display: inline-block;
}
#topics .illust_mini img {
width: 30%;
}

/**/
}

/*=====================================================================================================================
======================================================================================================================タブレット＆パソコン==768px以上*/
@media only screen and (min-width: 768px) {

.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	}


/* ▼キャプション付き画像全体を囲むボックスの装飾 */
figure {
    /*display: inline-block;*/   /* インラインブロック化 */
    margin: 0px 0px 1em 0px; /* 外側に余白を追加(※下に1em) */
}
/* ▼画像に対する装飾 */
figure img {
    width: 100%;          /* css指定サイズに収める */
    margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */
}
/* ▼キャプションに対する装飾 */
figcaption {
    font-size: 0.9em;        /* 文字サイズを90%に */
    text-align: center;      /* 中身をセンタリング */
}


/*H 回り込み イラストにつける　spは30% pcも30% 対するテキストはclassなし*/
#topics .phot_left {
	margin-right: 2%;
	padding-bottom: 1%;
	float: left;
	width: 30%;
}
/*H 回り込み イラストにつける　spは30% pcも30% 対するテキストはclassなし*/
#topics .phot_right {
	margin-left: 2%;
	padding-bottom: 1%;
	float: right;
	width: 30%;
}

/*K 回り込み 写真につける　spは48% pcも48% 対するテキストはclassなし*/
#topics .phot_left48 {
	margin-right: 2%;
	padding-bottom: 1%;
	float: left;
	width: 48%;
}
/*K 回り込み 写真につける　spは48% pcも48% 対するテキストはclassなし*/
#topics .phot_right48 {
	margin-left: 2%;
	padding-bottom: 1%;
	float: right;
	width: 48%;
}
	
/*C spは100% pcも100%*/
#topics .photo1 {
	width: 100%;
	margin: 0 auto;
}
	
/*A I spは100% pcは48%*/
#topics .photo1_s2 {
	width: 48%;
	margin: 0 1%;
	float: left;
}
/*B E 回り込み写真または写真3枚並び　spは1枚100% pcは3枚30%*/
#topics .photo_sp100_pc30 {
	width: 30%;
	margin-right: 2%;
	padding-bottom: 1%;
	float: left;
}

/*L 回り込みおよび写真　spは100% pcは48%*/
#topics .photo_sp100_pc48 {
	margin-right: 2%;
	padding-bottom: 1%;
	float: left;
	width: 48%;
}
	
/*D spは48% pcも48%*/
#topics .photo2 {
	width: 48%;
	margin-right: 2%;
	padding-bottom: 1%;
	float: left;
}

/*G spは48% pcは23%max260px*/
#topics .photo2_s4 {
	width: 23%;
	margin: 0 1%;
	float: left;
}

/*F spは30% pcは30%max260px*/
#topics .photo3 {
	width: 30%;
	max-width: 260px;
	margin: 0 1.5%;
	float: left;
}
	
/*J spは23% pcは23%max260px*/
#topics .photo4 {
	width: 23%;
	max-width: 260px;
	margin: 0 0.1%;
	float: left;
}
#topics .column_mini .illust {
width: 100%;
text-align: center;
}
#topics .illust img {
width: 50%;
}
#topics .illust_mini {
	width: 48%;
	margin-right: 2%;
	padding-bottom: 1%;
	text-align: center;
	display: inline-block;
}
#topics .illust_mini img {
width: 50%;
}


/*	*/
}

/*====================================================================================================================================
====================================================================================================================================PC====960px以上*/
@media only screen and (min-width: 960px) {

}