/*********************
 * 縦長(mobile)モード
 *********************/

@media (orientation: portrait){

	/*********************
	 * 画像の切り替え
	 *********************/

	/* use */
	.mobilemode{
		max-width: 100%;
		object-fit: contain;
	}
	/* hide */
	.webmode{
		display: none;
	}

	.imgarea{
		text-align: center;
	}

	/* mail bg */
	#mailbg{
		background-image: url(../../images/9-A.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	/*********************
	 * サイドバー
	 *********************/
	
	#sidebar{
		display: none;
	}

	/*********************
	 * 配置の調整
	 *********************/
	.imgarea{
		max-width: 720px;
		margin: auto;
	}
	.msgarea{
		max-width: 720px;
		text-align: center;
		margin: auto;
	}
	
	h1,h2,h3,h4,h5,h6{
		text-align: center;
	}

	/* Wrapperの差分 */
	#sidebar + #wrapper {
		margin-left: 0;
		padding-top: 0;
	}
	#header + #wrapper > .wrapper > .inner {
		margin: 0 auto;
	}

	.wrapper.fullscreen {
		min-height: 0;
	}

	.spotlights > section > .content {
		padding: 1em;
	}
	
	/**************************
	 * 画面サイズで変わるもの
	 **************************/

	body, input, select, textarea {
		font-size: 13pt;
	}

	/* 説明文 */
	.content {
		padding: 1%;
	}
	.msgarea {
		font-size: 1.8vw;
	}

	/* develop */
	.develop {
		color: black;
		background-color: rgba(63,255,63,0.5);
	}

}