/******************************************************************************/
/* phone.css - last update: 25.06.03 */


/******************************************************************************/
@media screen and (max-width:960px) {
/******************************************************************************/


	/**************************************************************************/
	/* ホームページ全体 */

	img {
		max-width: 100% !important;
		height: auto;
		width /***/: auto;
		margin-left: auto;
		margin-right: auto;
	}


	/**************************************************************************/
	/* #header - ヘッダ */

	#header {
		background: #FFFFFF;
		height: 55px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	}

	#header h1 a {
		top: 10px;
		left: 10px;
		height: 35px;
	}


	/******************************************************************************/
	/* #header .header_menu - ヘッダメニュー */

	#header .header_menu1 a,
	#header .header_menu2 a {
		position: static;
		top: auto;
		right: auto;
		width: 200px;
		height: 39px;
		line-height: 39px;
		padding: 1px 0 0 0;
		font-size: 15px;
	}

	#header .header_menu1 a {
		margin: 10px auto 5px auto;
	}

	#header .header_menu2 a {
		margin: 0 auto;
	}


	/**************************************************************************/
	/* #header .header_search - サイト内検索 */

	#header .header_search {
		top: 60px;
		right: 7px;
	}


	/**************************************************************************/
	/* #global_menu - グローバルメニュー */


#global_menu {
	position: fixed;
	top: 0;
	right: -330px;
	bottom: auto;
	left: auto;
	display: block;
	background: #D8EEFC;
	width: 100%;
	max-width: 330px;
	height: 100%;
	margin: 0;
	padding: 0;
	align-items: normal;
	justify-content: normal;
	letter-spacing: 0;
	overflow: auto;
	transition: 0.3s ease-out;
	z-index: 400;
}

#global_menu.active {
	right: 0;
}

#global_menu ul.menu_base {
	position: static;
	display: block;
	margin-top: 100px;
}

#global_menu ul li:first-child {
	border-top: 1px dotted #999999;
}

#global_menu ul li {
	border-bottom: 1px dotted #999999;
}

#global_menu ul li a {
	display: block;
	height: auto;
	line-height: 22px;
	padding: 15px 10px 13px 12%;
	color: #003555;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-decoration: none;
}


#global_menu ul li a.s,
#global_menu ul li a:hover {
	background: #009FFF;
	color: #FFFFFF;
}



/**********************************************************/
/* #global_menu .up_menu - アコーディオンメニュー */

#global_menu ul li a.up_menu {
	position: relative;
	background-image: none;
}

#global_menu ul li a.up_menu::after {
	content: "▼";
	display: block;
	position: absolute;
	top: 16px;
	right: 26px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	color: #003555;
	font-size: 11px;
	text-align: center;
}

#global_menu ul li a.s::after,
#global_menu ul li a:hover::after {
	color: #FFFFFF;
}

#global_menu ul li a.up_menu.active {
	background: #009FFF;
	color: #FFFF33;
}

#global_menu ul li a.up_menu.active::after {
	content: "▲";
	color: #FFFFFF;
}

#global_menu div.sub_menu {
	display: none;
}

#global_menu ul li ul li {
	border-bottom: none;
}

#global_menu ul li li:first-child {
	border-top: none;
}

#global_menu ul li ul {
	margin-bottom: 13px;
}

#global_menu ul li ul li a {
	border-bottom: none;
	line-height: 23px;
	padding: 5px 30px 5px 35px;
	font-weight: normal;
}

#global_menu ul li ul li a::before {
	content: "・ ";
	color: #003555;
}

#global_menu ul li ul li a.s,
#global_menu ul li ul li a:hover {
	background: #80CFFF;
	color: #FFFFFF;
}

#global_menu ul li ul li a.s::before,
#global_menu ul li ul li a:hover::before {
	color: #FFFFFF;
}


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

	#mainvisual {
		min-height: 300px;
		max-height: 500px;
	}

	/**************************************************************************/
	/* #mainvisual .mainpanel - メインパネル */

	#mainvisual .mainpanel ul li {
		padding: 0.5%;
	}

	#mainvisual .mainpanel ul li a div {
		bottom: 50%;
		margin: 0 0 -0.8em 0;
		color: #FFFFFF;
		font-size: clamp(12px, 1.4vw, 16px);
		text-shadow: -2px -2px 3px #000000,
			 2px -2px 3px #000000,
			-2px  2px 3px #000000,
			 2px  2px 3px #000000;
	}


	/**************************************************************************/
	/* #keyvisual - キービジュアル */

	#keyvisual {
		height: 260px;
		padding-top: 140px;
	}


	/**************************************************************************/
	/* #maincontent - メインコンテンツ */


	#maincontent .content_wrapper h2 {
		padding: 10px 10px 20px 3.5%;
	}

	#maincontent .content_wrapper h2::after {
		width: 30%;
	}

	#maincontent h4 {
		margin-right: 10px;
		margin-left: 10px;
	}


	/**************************************************************************/
	/* #maincontent .sidecontent - サイドコンテンツ */

	#maincontent .sidecontent {
		clear: both;
		float: none;
		width: 100%;
		margin: 0 0 25px 0;
	}


	/**************************************************************************/
	/* .sidemenu - サイドメニュー */


	#maincontent .sidemenu {
		clear: both;
		float: none;
		width: 100%;
		max-width: 960px;
		margin: 0 0 25px 0;
		text-align: center;
	}

	#maincontent .sidemenu .menu {
		background: #D8EEFC;
		margin: 0 0 15px 0;
		padding: 1.5em 0 1.25em 0;
	}

	#maincontent .sidemenu .menu li {
		display: inline;
		white-space: nowrap;
	}

	#maincontent .sidemenu .menu a,
	#maincontent .sidemenu .menu a:visited,
	#maincontent .sidemenu .menu a:hover {
		position: relative;
		display: inline;
		width: auto;
		height: auto;
		line-height: 160%;
		margin: 0px 25px 0px 0px;
		padding: 0px 0px 0px 20px;
		text-decoration: underline;
	}

	#maincontent .sidemenu .menu a,
	#maincontent .sidemenu .menu a.s,
	#maincontent .sidemenu .menu a:visited {
		background: none;
		color: #3399FF;
	}

	#maincontent .sidemenu .menu a:hover {
		background: none;
		color: #FF9966;
	}

	#maincontent .sidemenu .menu a.s {
		font-weight: bold;
	}

	#maincontent .sidemenu .menu a::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 0px;
		display: block;
		background: #3399FF;
		width: 5px;
		height: 5px;
		border-radius: 100%;
	}

	#maincontent .sidemenu .ban {
		display: inline-block;
		width: 100%;
		max-width: 220px;
		height: auto;
		line-height: 100%;
		margin: 0 2px 5px 2px;
	}

	#maincontent .sidemenu .ban img {
		width: 100%;
		max-width: 220px;
		height: auto;
	}

	#maincontent .sidemenu .poster {
		max-width: 180px;
		height: auto;
		line-height: 100%;
		margin: 5px auto 10px auto;
	}

	#maincontent .sidemenu .poster img {
		width: 100%;
		max-width: 180px;
		height: auto;
	}


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

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

	#maincontent .w150 {
		width: 15%;
	}

	#maincontent .w180 {
		width: 20%;
	}

	#maincontent .w240 {
		width: 35%;
	}

	#maincontent .w280 {
		width: 65%;
	}

	#maincontent .w360 {
		width: 90%;
	}


	/**************************************************************************/
	/* #maincontent .service - サービス案内 */

	#maincontent .service {
		padding: 20px 10px 0 10px;
	}

	#maincontent .service .container {
		width: 49%;
	}


	/**************************************************************************/
	/* #footer - フッタ */

	#footer .footer_menu ul {
		padding: 25px 0;
	}


	/**************************************************************************/
	/* .pagetop - PAGE TOP ボタン */

	.pagetop {
		right: 0;
	}


	/**************************************************************************/
	/* .ham_menu - ハンバーガーメニュー */

	.ham_menu {
		position: fixed;
		top: 8px;
		right: 8px;
		display: block;
		width: 40px;
		height: 40px;
		padding: 5px 0;
		cursor: pointer;
		z-index: 450;
	}

	.ham_menu span {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		background: rgba(0, 159, 255, 1);
		width: 30px;
		height: 3px;
		margin-left: -15px;
	}

	.ham_menu span {
		transition: 0.3s linear;
		transform: rotate(0deg);
	}

	.ham_menu span.ham1 {
		transform: translateY(-8px);
	}

	.ham_menu span.ham3 {
		transform: translateY(8px);
	}

	.ham_menu:hover {
		cursor: pointer;
	}

	.ham_menu:hover span.ham1 {
		transform: translateY(-10px);
	}

	.ham_menu:hover span.ham3 {
		transform: translateY(10px);
	}

	.ham_menu.opened span {
		background: rgba(0, 159, 255, 1);
	}

	.ham_menu.opened span.ham1 {
		transform: rotate(-45deg) translateY(0);
	}

	.ham_menu.opened span.ham2 {
		background: rgba(0, 159, 255, 0);
		transform: translateX(50px);
	}

	.ham_menu.opened span.ham3 {
		transform: rotate(45deg) translateY(0);
	}


	/**************************************************************************/
	/* .shadow_layer - 陰影レイヤー */

	.shadow_layer {
		position: fixed;
		display: block;
		background: #003555;
		width: 100%;
		height: 100%;
		opacity: 0.80;
		filter: alpha(opacity=80);
		z-index: 300;
	}


}	/* end of ~960px */




/******************************************************************************/
@media screen and (max-width:640px) {
/******************************************************************************/


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

	#mainvisual #catchcopy {
		padding: 15px 0;
	}



	/**************************************************************************/
	/* #keyvisual - キービジュアル */

	#keyvisual {
		height: 180px;
		padding-top: 100px;
	}


	/**************************************************************************/
	/* #maincontent - メインコンテンツ */

	#maincontent {
		padding-top: 20px;
		padding-bottom: 20px;
	}


	/**************************************************************************/
	/* #maincontent .whatsnew - 新着情報 */


#maincontent .whatsnew_menu li a {
	font-size: clamp(12px, 3.0vw, 16px);
	letter-spacing: 0.1em;
	text-indent: 1.0em;
}



#maincontent .whatsnew_menu li a::before {
	margin: -3px 0 0 -3.0em;
	border-top: 7px solid #FFFFFF;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}


	/**************************************************************************/
	/* .table_whatsnew - お知らせ欄本文 */

#maincontent .table_whatsnew {
	height: 480px;
	font-size: clamp(14px, 1.6vw, 16px);
}

#maincontent .table_whatsnew th {
	display: inline-block;
	width: 100%;
	padding: 0 0 0 0;
}

#maincontent .table_whatsnew td {
	display: inline-block;
	width: 100%;
	padding: 0 0 0.8em 0;
}

.wntag::after {
	top: 2px;
	right: auto;
	left: 8em;
}


	/**************************************************************************/
	/* #mainvisual .mainpanel - メインパネル */

	#mainvisual .mainpanel ul li {
		width: 49.5%;
		margin: 2px 0;
		padding: 0.25%;
	}

	#mainvisual .mainpanel ul li a div {
		font-size: clamp(10px, 3.0vw, 16px);
	}




	/**************************************************************************/
	/* #maincontent .service - サービス案内 */

	#maincontent .service {
		padding: 20px 10px 20px 10px;
	}

	#maincontent .service .container {
		width: 100%;
		padding: 5px;
	}

	#maincontent .service .container img {
		padding: 5px;
	}


	/**************************************************************************/
	/* #maincontent .box_normal - 汎用囲み枠 */

	#maincontent .box_normal {
		margin: 20px 0;
		border-radius: 0;
	}


	/**************************************************************************/
	/* #maincontent .box_symple - シンプル囲み枠 */

	#maincontent .box_symple {
		margin: 20px 0;
		border-radius: 0;
	}


	/**************************************************************************/
	/* #leadcontent - 誘導枠 */

	#leadcontent {
		background: url(../img/photo/distopia.jpg) no-repeat center center;
		background-size: cover;
		padding: 0 0 100% 0;
	}

	#leadcontent .bg-video {
		display: none;
	}

	#leadcontent h3 {
		letter-spacing: 0;
	}

	#leadcontent p {
		margin: 1.5em 2.5% 2em 2.5%;
		text-align: left;
	}


	/**************************************************************************/
	/* #loopcontent - ループ枠 */

	#loopcontent .loop_wrapper {
		width: 400%;
	}


	/**************************************************************************/
	/* #footer - フッタ */

	#footer .footer_menu li {
		padding: 0 1em;
		border: 0 none;
	}

	#footer .footer_menu li:first-child {
		border: 0 none;
	}

	#footer .footer_menu ul li a {
		text-decoration: underline;
	}


}	/* end of ~640px */




/******************************************************************************/
@media screen and (max-width:480px) {
/******************************************************************************/


	/**************************************************************************/
	/* #keyvisual - キービジュアル */

	#keyvisual.bg1 {
		background-image: url(../img/keyvisual/001s.jpg);
	}

	#keyvisual.bg2 {
		background-image: url(../img/keyvisual/002s.jpg);
	}

	#keyvisual.bg3 {
		background-image: url(../img/keyvisual/003s.jpg);
	}

	#keyvisual.bg4 {
		background-image: url(../img/keyvisual/004s.jpg);
	}

	#keyvisual.bg5 {
		background-image: url(../img/keyvisual/005s.jpg);
	}

	#keyvisual.bg6 {
		background-image: url(../img/keyvisual/006s.jpg);
	}

	#keyvisual.bg7 {
		background-image: url(../img/keyvisual/007s.jpg);
	}

	#keyvisual.bg8 {
		background-image: url(../img/keyvisual/008s.jpg);
	}

	#keyvisual.bg9 {
		background-image: url(../img/keyvisual/009s.jpg);
	}

	#keyvisual.bg10 {
		background-image: url(../img/keyvisual/010s.jpg);
	}


	/**************************************************************************/
	/* #maincontent .whatsnew - 新着情報 */

#maincontent .whatsnew_menu li {
	margin: 0;
}


	/**************************************************************************/
	/* .table_whatsnew - お知らせ欄本文 */

#maincontent .table_whatsnew {
	height: 360px;
}

	/**************************************************************************/
	/* #maincontent .introduction - 導入枠 */

	#maincontent .introduction h3 {
		letter-spacing: 0;
	}

	#maincontent .introduction h3 span {
		letter-spacing: 0.05em;
	}


	/**************************************************************************/
	/* #maincontent .table_border - 汎用テーブル（枠線あり） */

	#maincontent .table_border {
		width: 100%;
	}

	#maincontent .table_border th,
	#maincontent .table_border td {
		display: block;
		width: 100% !important;
		padding: 15px 3%;
	}

	#maincontent .table_border th,
	#maincontent .table_border td {
		border: 0 none;
	}

	#maincontent .table_border tr:first-child td {
		border-top: 1px solid #9CADB8;
	}

	#maincontent .table_border td:last-child {
		border-bottom: 1px solid #9CADB8;
	}

	#maincontent .table_border td.w15p {
		width: 100%;
	}


	/**************************************************************************/
	/* #maincontent .table_form - 汎用テーブル（枠線あり） */

	#maincontent .table_form {
		width: 100%;
		border-top: 1px solid #9CADB8;
	}

	#maincontent .table_form th,
	#maincontent .table_form td {
		display: block;
		width: 100% !important;
		padding: 15px 3%;
	}

	#maincontent .table_form td {
		border-top: 0px none;
		border-right: 0px none;
		border-bottom: 1px solid #9CADB8;
		border-left: 0px none;
	}

	#maincontent .table_form th {
		padding-bottom: 0;
		border: 0 none;
	}

	#maincontent .table_form tr:first-child td {
		border-top: 0 none;
	}


	/**************************************************************************/
	/* .pagetop - PAGE TOP ボタン */

	.pagetop a {
		width: 80px;
		height: 80px;
		line-height: 80px;
		font-size: 12px;
	}



}	/* end of ~480px */