/**
 * 600px以下、共通
 */
@media screen and (max-width: 600px){
	#footer #nav_bottom ul{
		flex-direction: column;
		height: auto;

	}
	#footer #nav_bottom ul li{
		margin-bottom: 10px;
	}
	#footer #nav_bottom ul li a{
		text-align: left;
	}
}


/**
 * 960px以下、共通
 */
@media screen and (max-width: 960px){

	.btn_hmbg {
		display: block;

	}




	/**
	 * common
	 */
	h2{
		font-size: 1.50rem;
	}
	.long-text p{
		font-size: 1.00rem;
	}
	figcaption{
		text-align: center;
	}


	/**
	 * layout
	 */
	body{
		background: rgb(255, 255, 255);
	}
	 #wrapper{
	 	width: 95%;
	 	margin: 100px auto 0 auto;
	 }
		main > article{
			padding: 30px 0;
		}

		#header{
			position: fixed;
			top: 0;
			left: 0;
		}

		#gnav{
			display: none;
			position: fixed;
			top: 100px;
			left: 0;
			width: 100%;
			height: auto;
			margin: 0;
			background: rgba(255, 255, 255, 0.85);
			border: none;
			border-radius: 0;
		}
			#gnav > ul{
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				width: 100%;
				border: 1px solid rgb(220, 220, 220);

			}
				#gnav > ul > li{
					width: 100%;
					border: none;
				}
					#gnav > ul > li:last-child{
						border: none;
					}
						#gnav > ul > li > a{
							display: block;
							width: 100%;
							height: 100%;
							background: none;
							color: rgb(137, 3, 9);
							font-family: serif;
							line-height: 50px;
							text-align: center;
						}
							#gnav > ul > li > a.active,
							#gnav > ul > li > a:hover{
								background-color: rgba(137, 3, 9, 0.5);
								color: rgb(255, 255, 255);
							}

	/**
	 * detail history.php > #area_history
	 */
		#area-history > .article-sub div figure{
			width: 100%;
			text-align: center;
		}
			#area-history > .article-sub div figure.right{
				float: none;
				margin-left: 0;
			}
			#area-history > .article-sub div figure.left{
				float: none;
				margin-right: 0;
			}



		/**
		 * detail index.php > #topimage
		 */
		#topimage {
			margin-top: 100px;
		}




		#topimage-msg-always{
			z-index: 999999;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: center;
			max-width: 100%;
			height: 100%;
		}
			#topimage-msg-always > p{
				max-width: 85%;
/*
				min-height: 1.5rem;
*/
				margin: 0 auto;

				transform: translateY(50px);
				color: rgb(255, 255, 255);
				font-family: serif;
				font-size: 2.00rem;
				font-weight: bold;
				opacity: 0;
				text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8);
			}
				#topimage-msg-always > p.tml_title{
					font-size: 2.00rem;
				}
				#topimage-msg-always > p.tml_main{
					margin: 30px auto 20px;
					font-size: 1.75rem;
				}
				#topimage-msg-always > p.tml_sub{
					font-size: 1.25rem;
				}
				#topimage-msg-always > p.toUp{
					transform: translateY(0);
					transition-duration: 1s;
					opacity: 1;
				}



	/**
	 * detail concept.php > #area_concept
	 */
				#area-concept > .article-sub > ul > li#kokoroe p{
					width: 95%;
					margin-right: auto;
					margin-left: auto;

		}


		#area-concept > .article-sub  table.table
		#area-concept > .article-sub  table.table tr,
		#area-concept > .article-sub  table.table tr th,
		#area-concept > .article-sub  table.table tr td{
			display: block;
			width: 95%;
			text-align: left;
			text-align-last: left;
		}
		#area-concept > .article-sub  table.table{
			width: 100%;
		}

					#area-concept > .article-sub > ul > li#kokoroe p#signature{
						font-size: 1.25rem;
					}

}

/**
 * 601px以上、且つ961px以下
 */
@media screen and (min-width: 601px) and (max-width: 960px){
	/**
	 * detail history.php > #area_history
	 */
				#area-history > .article-sub div figure img{
					width: 75%;
				}


	/**
	 * detail index.php > #area_news

			#area-gallery > .article-sub > ul > li{
				position: relative;
				width: calc((100% - 30px) / 3);
				margin-bottom: 15px;
			}
	 */


	/**
	 * detail profile.php > #area_profile
	 */
			#area-profile > .article-sub > ul,
			#area-profile > .article-sub > ul > li,
			#area-profile > .article-sub > ul > li._blk_2,
			#area-profile > .article-sub > ul > li:not(._blk_2)
			{
				display: block;
				width: 100%;
			}

			#area-profile > .article-sub > ul > li._blk_2 dl{
				flex-direction: column-reverse !important;
				flex-wrap: wrap !important;
				justify-content: space-between !important;
			}
}

/**
 * 481px以上、且つ600px以下
 */
@media screen and (min-width: 481px) and (max-width: 600px){
	/**
	 * detail history.php > #area_history
	 */
				#area-history > .article-sub div figure img{
					width: 90%;
				}
	/**
	 * detail index.php > #area_news
	 */

			#area-gallery > .article-sub > ul > li{
				position: relative;
				width: calc((100% - 20px) / 2);
				margin-bottom: 15px;
			}


	/**
	 * detail profile.php > #area_profile
	 */
			#area-profile > .article-sub > ul,
			#area-profile > .article-sub > ul > li,
			#area-profile > .article-sub > ul > li._blk_2,
			#area-profile > .article-sub > ul > li:not(._blk_2)
			{
				display: block;
				width: 100%;
			}

			#area-profile > .article-sub > ul > li._blk_2 dl{
				flex-direction: column-reverse !important;
				flex-wrap: wrap !important;
				justify-content: space-between !important;

			}

}




/**
 * 481px以上、且つ600px以下
 */
@media screen and (max-width: 480px){

	/**
	 * detail index.php > #area_news
	 */

			#area-gallery > .article-sub > ul > li{
				position: relative;
				width: 100%;
				margin-bottom: 15px;
			}



	/**
	 * detail profile.php > #area_profile
	 */
			#area-profile > .article-sub > ul,
			#area-profile > .article-sub > ul > li,
			#area-profile > .article-sub > ul > li._blk_2,
			#area-profile > .article-sub > ul > li:not(._blk_2)
			{
				display: block;
				width: 100%;
			}

			#area-profile > .article-sub > ul > li._blk_2 dl{
				flex-direction: column-reverse !important;
				flex-wrap: wrap !important;
				justify-content: space-between !important;

			}

			#area-profile > .article-sub > ul > li dl dt h3{
				width: 85%;



}