/******************************************************************************/
/* スマートフォン用スタイルシート - last update: 25.04.02 */


@media only screen and (max-width: 860px) {

/******************************************************************************/
/* header - ヘッダの枠組み */

#header {
	float: none;
	width: 100%;
	max-width: 860px;
	height: auto;
	margin: 40px 0px 20px 0px;
	padding: 0px 0px 14.28% 0px;
	background: url(../img/header_bg.png) no-repeat center top;
	background-size: contain;
}

#header a {
	display: none;
}


/******************************************************************************/
/* wrapper - コンテンツ領域の枠組み */

#wrapper {
	width: auto !important;
}


/******************************************************************************/
/* menu - グローバルメニューの枠組み */

#menu {
	float: none;
	width: 100%;
	height: auto;
	background: none;
	margin: 0px;
	padding: 0px;
	top: 0px;
	left: 0px;
	position: absolute;
	z-index: 999;
}

#menu li {
	float: none;
}

#menu span {
	display: inline;
}

#menu .menubar {
	display: block;
	pointer-events: all;
	width: 100%;
	height: 40px;
	padding: 0px;
	background: url(../img/phone/menubar_bg.png) no-repeat left top;
}

#menu .menubar span {
	display: none;
}

#menu .toggle {
	width: 100%;
	height: 0;
	padding: 0px;
	transition: .2s;
}

#menu input:checked + .toggle {
	height: auto;
	padding: 0px;
}

#menu .toggle li {
	margin: 0px 0px 1px 0px;
	line-height: 0;
	visibility: hidden;
	opacity: 0;
	transition: padding .2s, line-height .2s, visibility .1s, opacity .1s;
}

#menu input:checked + .toggle li {
	visibility: visible;
	opacity: 1;
}

#menu .toggle li.poster {
	margin: 0px auto 1px 0px;
	text-align: left;
}

#menu .toggle li.ban {
	margin: 0px auto 1px 0px;
	text-align: left;
}

#menu .update {
	display: none;
}


/******************************************************************************/
/* maincontent - メインコンテンツの枠組み */

#maincontent {
	clear: both;
	float: none;
	width: 100%;
}

#maincontent .text {
	background: url(../img/phone/text_bg.png) repeat left top;
	padding: 20px 0px 5px 0px;
}

#maincontent p,
#maincontent ul {
	margin: 0px 3% 15px 3%;
}

#maincontent .whatsnew {
	width: 100%;
	height: auto;
	margin: 0px auto;
	overflow-y: visible;
}


/******************************************************************************/
/* maincontent .hr - コンテンツページ本文の区切り線 */

#maincontent .hr {
	width: 96%;
	margin: 0px auto 25px auto;
}


/******************************************************************************/
/* メインコンテンツ - 見出し背景 */

#maincontent h2 {
	background: #00AFEA url(../img/phone/h2_bg.png) no-repeat left top;
	width: auto;
	height: auto;
	line-height: 160%;
	padding: 6px 0px 5px 5%;
	letter-spacing: 0.25em;
}

#maincontent h3 {
	margin: 0px 2% 15px 2%;
}

#maincontent h4 {
	margin: 0px 3% 10px 3%;
}

#maincontent h5 {
	margin: 0px 3% 0px 3%;
}


/******************************************************************************/
/* maincontent .mainvisual - メインビジュアル */

#maincontent .mainvisual {
	background: url(../img/mainvisual_bg.png) no-repeat center top;
	background-size: contain;
	width: 100%;
	max-width: 637px;
	height: auto;
	margin: 0px auto 20px auto;
	padding: 0px 0px 42.857% 0px;
}


/******************************************************************************/
/* .table_normal - テーブル（汎用） */

#maincontent .table_normal {
	margin: 0px 15px 15px 15px;
}

#maincontent .table_normal td {
	padding-right: 5px;
}


/******************************************************************************/
/* メインコンテンツ - テーブル（幅固定、枠線なし） */

#maincontent .table_fix {
	margin: 0px 2% 15px 2%;
	width: 96%;
}


/******************************************************************************/
/* メインコンテンツ - テーブル（幅固定、枠線あり） */

#maincontent .table_border {
	margin: 0px 2% 15px 2%;
	width: 96%;
}


/******************************************************************************/
/* メインコンテンツ - テーブル（参加申込フォーム） */

#maincontent .table_form {
	margin: 0px 2% 15px 2%;
	width: 96%;
}

#maincontent .table_form td.h {
	width: 25%;
}

#maincontent .table_form td.d {
	width: auto;
	max-width: 510px;
}

#maincontent .table_dsub td {
	line-height: 120%;
	vertical-align: top;
	padding: 5px 2px;
}

#maincontent .table_dsub input {
	width: 80%;
}

#maincontent .w150 {
	width: 15%;
}

#maincontent .w180 {
	width: 20%;
}

#maincontent .w280 {
	width: 65%;
}

#maincontent .w360 {
	width: 90%;
}


/******************************************************************************/
/* メインコンテンツ - テーブル（囲み枠） */

#maincontent .table_box {
	margin: 0px 2% 15px 2%;
	width: 96%;
}


/******************************************************************************/
/* メインコンテンツ - Googleマップ */

#maincontent .gmap {
	margin: 0px 2% 15px 2%;
	width: 96%;
}

#maincontent .gmap iframe {
	width: 100%;
}


/******************************************************************************/
/* .box_frame - 動画埋め込み枠用 */

#maincontent .box_frame {
	width: 100%;
	margin: 0px auto 15px auto;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
 
#maincontent .box_frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/******************************************************************************/
/* jumptop - PAGE TOPボタンの枠組み */
/* 今回はjquery.scrollUp.jsを使用 */

#scrollUp {
    right: 0px;
}


/******************************************************************************/
/* footer - フッタの枠組み */

#footer {
	clear: both;
	width: 100%;
	height: auto;
	line-height: 160%;
	padding: 20px 0px;
	background: #004055;
	color: #FFFFFF;
	border-top: 3px double #FFFFFF;
	border-bottom: 3px double #FFFFFF;
}


}		/* end of 860px */


@media only screen and (max-width: 540px) {

/******************************************************************************/
/* #maincontent .table_form - 登録フォーム等 */

#maincontent .table_form {
	width: 100%;
	margin: 0px 0px 15px 0px;
	border-top: 1px solid #999999;
}

#maincontent .table_form td {
	display: inline-block;
	padding: 10px 2%;
}

#maincontent .table_form td.h2,
#maincontent .table_form td.h22 {
	width: 96%;
	border: 0px none;
}

#maincontent .table_form td.time,
#maincontent .table_form td.time2,
#maincontent .table_form td.h {
	width: 96%;
	border: 0px none;
}

#maincontent .table_form td.event,
#maincontent .table_form td.event2,
#maincontent .table_form td.d {
	width: 96%;
	border-top: 0px none;
	border-right: 0px none;
	border-bottom: 1px solid #999999;
	border-left: 0px none;
}

#maincontent .table_dsub td {
	line-height: 120%;
	padding: 5px 2px;
}


/******************************************************************************/
/* メインコンテンツ - 画像のフローティング */

.greet_photo {
	width: 25%;
	height: auto;
	max-width: 150px;
}


}		/* end of 540px */