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


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


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

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


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

	#header {
		height: 55px;
	}

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


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

	#global_menu {
		position: fixed;
		top: 0;
		right: -330px;
		display: block;
		background: #F7FFFA;
		width: 100%;
		max-width: 330px;
		height: 100%;
		overflow: auto;
		transition: 0.3s ease-out;
		z-index: 400;
	}

	#global_menu.active {
		right: 0;
	}

	#global_menu ul {
		position: static;
		display: block;
		margin-top: 60px;
	}

	#global_menu ul li a {
		display: block;
		line-height: 22px;
		padding: 15px 10px 15px 15%;
		border-bottom: 1px dotted #999999;
		color: #406A50;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 0.1em;
		text-decoration: none;
	}

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

	#global_menu ul li a:hover {
		background: #006A28;
		color: #FFFFFF;
	}

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


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

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


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

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


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

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

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


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

	#footer .footer_logo {
		width: 100%;
		height: 0;
		padding: 0 0 8% 0;
	}

	#footer .footer_menu {
		width: 100%;
		padding: 20px 0 0 0;
		text-align: center;
	}


	/**************************************************************************/
	/* .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, 149, 56, 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, 149, 56, 1);
	}

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

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

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


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

	.shadow_layer {
		position: fixed;
		display: block;
		background: #1E3C29;
		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 {
		width: 90%;
		height: 40%;
	}

	#mainvisual #catchcopy h2 {
		margin: 0 0 15px 0.4em;
	}

	#mainvisual #catchcopy p {
		margin: 0 1em;
	}


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

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


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

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


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

	#maincontent .whatsnew li {
		padding: 1em 1.5em;
		text-indent: 0;
	}

	#maincontent .whatsnew li span.ymd {
		display: block;
		margin-right: 0;
	}


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

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

	#maincontent .introduction br.cl {
		display: none;
	}


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

	#maincontent .mainpanel ul li {
		width: 100%;
		padding: 0;
		border: 0px none;
	}

	#maincontent .mainpanel ul li a div {
		font-size: clamp(24px, 5.6vw, 36px);
	}


	/**************************************************************************/
	/* #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%;
	}


}	/* 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 .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 td {
		border-bottom: 2px solid #408058;
	}

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

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


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

	#maincontent .table_form {
		width: 100%;
	}

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

	#maincontent .table_form td {
		border-bottom: 1px dotted #999999;
	}

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

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


}	/* end of ~480px */