/**********************************************************************
Overwrite @media Query
**********************************************************************/

html { background: #ddd; }
body.app { position: relative; width: 100%; max-width: 600px; margin: 0 auto; background: #fff; min-height: 100vh; font-size: 14px; font-weight: 350; }

	body.app #header { left: 50%; transform: translateX(-50%); background:#fff; max-width: 600px; margin: 0 auto; }
	body.app #header .header-in { padding: 0 10px; max-width: 600px; }

	body.app #header #gnb { position:fixed; top:0px; left:100%; width:40%; height:100vh; display: block; background:#fff; overflow-y:scroll; transition:left .3s, opacity .3s, visibility .3s; margin-top:0; padding-top:70px; padding-bottom: 2rem; border-left:1px solid #bba28e; z-index:3; opacity: 0; visibility: hidden; }
	body.app #header #gnb .menu { padding-top: 0; padding-bottom: 1rem; }
	body.app #header #gnb .menu > ul { display: block; }
	body.app #header #gnb .menu > ul  > li { margin: 0; }
	body.app #header #gnb .menu > ul  .link1 { color:#222; }
	body.app #header #gnb .menu > ul > li .link1::after { display: none; }
	body.app #header #gnb .menu > ul > li:hover .link1::after { display: none; }

	body.app #header #gnb .menu > ul  > li > a:hover { }
	body.app #header #gnb .menu > ul  > li > a > span { position:absolute; display:block; width:24px; height:24px; right:10px; top:10px; background:none; border:1px solid #ccc; border-radius:100%; }
	body.app #header #gnb .menu > ul  > li > a > span > span { position:absolute; display:block; width:6px; height:6px; top:50%; left:50%; background:none; border-left:1px solid #555; border-bottom:1px solid #555; transform: translate(-50%, -50%) rotate(-45deg); }
	body.app #header #gnb .menu > ul  .sub li { }
	body.app #header #gnb .menu > ul  .sub a { line-height:1.6; }
	body.app #header #gnb .menu2 { position: relative; display:block; padding-left:20px; padding-top: 0; left:auto; top:auto; transition:none; visibility: visible; opacity: 1; }
	body.app #header #gnb .menu2 ul li { text-align:left; }
	body.app #header #gnb .menu2 ul li a { display: inline-block; line-height:1.6; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; }

	body.app #header #member-mobile { display: block; margin-bottom: 1rem; }
	body.app #header #member-mobile .more { display: flex; padding-left: 1rem; }
	body.app #header #member-mobile a { display: block; font-size: 1rem; color: #444; margin-right: 1rem; padding: .25rem 1rem; border: 1px solid #444; border-radius: 1rem; }
	body.app #header #member-mobile a.admin { position: absolute; left: 1rem; top: 1rem; }

	body.app #header #member { display: none; }
	body.app #header #btn-mobile { display:flex; align-items:center; }

	body.app #header.open #gnb { visibility: visible; opacity: 1; left:60%; }
	body.app #header.open #btn-mobile-open span:nth-child(1) { top:15px; left:-2px; transform:rotate(135deg); width:110%; }
	body.app #header.open #btn-mobile-open span:nth-child(2) { left:-100px; opacity:0; }
	body.app #header.open #btn-mobile-open span:nth-child(3) { top:15px; left:-2px; transform:rotate(-135deg); width:110%; }

	body.app #header.mobile { overflow: visible; }
	body.app #header.mobile.open { overflow: visible; }

	/* #left { display:none; } */
	body.app #left .left-list ul.d1 li.d1 { display:none; }
	body.app #left .left-list ul.d1 li.d1.on { display:block; }


	body.app #header #logo { width: 240px; height:50px; }
	body.app #header #logo.ratio--1 { width: 70px; }
	body.app #header #logo.ratio--2 { width: 110px; }
	body.app #header #logo.ratio--3 { width: 150px; }
	body.app #header #logo.ratio--4 { width: 190px; }


	body.app #header #gnb { width:60%; }
	body.app #header.open #gnb { left:40%; }

	body.app.index #wrapper { padding-top: 50px; }

	/* main page */

	body.app #visual.has-3 { padding-bottom:65%; }
	body.app #visual .text .t1 { font-size: 2.0rem; }
	body.app #visual .visuals .visual-dots { height:20px; bottom:1.5%; }
	body.app #visual .visuals .visual-dots li button { width: 12px; height: 12px; border-radius:12px; }
	body.app #visual .visuals .visual-dots li.slick-active button { width:36px; }


	body.app .index-news .in { padding-left:10px; padding-right:10px; }
	body.app .index-news .sc-title { margin-bottom: 1rem; }
	body.app .index-news .sc-title .title { font-size: 2rem; }

	body.app .index-bbs .in { padding-left:10px; padding-right:10px; }
	body.app .index-bbs .sc-title { margin-bottom: 2rem; }
	body.app .index-bbs .sc-title .title { font-size: 2rem; }
	body.app .index-bbs .in-box { padding: 1.0rem 1.5rem; }

	body.app #business .in { padding-left:10px; padding-right:10px; }
	body.app #business .sc-title .title { font-size:2rem; }

	body.app #business .bizz .list.list--3 { flex-wrap : wrap; }

	body.app #business .bizz .list.list--3 li { width: calc((100% - 1rem) / 2); margin-right: 1rem; margin-bottom: 1rem; }
	body.app #business .bizz .list.list--3 li:nth-child(3n) { margin-right: 1rem; }
	body.app #business .bizz .list.list--3 li:nth-child(n + 4) { margin-bottom: 1rem; }
	body.app #business .bizz .list.list--3 li:nth-child(2n) { margin-right: 0; }
	body.app #business .bizz .list.list--3 li:nth-child(n + 5) { margin-bottom: 0; }

	body.app #business .bizz .list.list--5 li { width: calc((100% - 1rem) / 2); margin-right: 1rem; margin-bottom: 1rem; }
	body.app #business .bizz .list.list--5 li:nth-child(3n) { margin-right: 1rem; }
	body.app #business .bizz .list.list--5 li:nth-child(n + 4) { margin-bottom: 1rem; }
	body.app #business .bizz .list.list--5 li:nth-child(2n) { margin-right: 0; }
	body.app #business .bizz .list.list--5 li:nth-child(n + 5) { margin-bottom: 0; }

	body.app #business .bizz .list.list--6 li { width: calc((100% - 1rem) / 2); margin-right: 1rem; margin-bottom: 1rem; }
	body.app #business .bizz .list.list--6 li:nth-child(3n) { margin-right: 1rem; }
	body.app #business .bizz .list.list--6 li:nth-child(n + 4) { margin-bottom: 1rem; }
	body.app #business .bizz .list.list--6 li:nth-child(2n) { margin-right: 0; }
	body.app #business .bizz .list.list--6 li:nth-child(n + 5) { margin-bottom: 0; }



	body.app #relation .in { padding-left:10px; padding-right:10px; }
	body.app #relation .sc-title .title { font-size:2rem; }

	body.app #relation #ul_relation.static.static--1 .slide-item  { width: 66%; }
	body.app #relation #ul_relation.static.static--2 .slide-item  { width: calc((100% - 1rem) / 2); }
	body.app #relation #ul_relation.static.static--3 .slide-item  { width: calc((100% - 1rem) / 2); margin-bottom: 1rem; }
	body.app #relation #ul_relation.static.static--4 .slide-item  { width: calc((100% - 1rem) / 2); margin-bottom: 1rem; }
	body.app #relation #ul_relation.static.static--5 .slide-item  { width: calc((100% - 1rem) / 2); margin-bottom: 1rem; }

	body.app #relation #ul_relation.static.static--3 .slide-item:nth-child(3n)  { margin-right: 1rem; }
	body.app #relation #ul_relation.static.static--4 .slide-item:nth-child(3n)  { margin-right: 1rem; }
	body.app #relation #ul_relation.static.static--5 .slide-item:nth-child(3n)  { margin-right: 1rem; }
	body.app #relation #ul_relation.static.static--3 .slide-item:nth-child(2n)  { margin-right: 0rem; }
	body.app #relation #ul_relation.static.static--4 .slide-item:nth-child(2n)  { margin-right: 0rem; }
	body.app #relation #ul_relation.static.static--5 .slide-item:nth-child(2n)  { margin-right: 0rem; }



	body.app #cs-wrap .in { padding-left:10px; padding-right:10px; }
	body.app #cs-wrap .sc-title .title { font-size:2rem; }
	body.app #cs-wrap .list li .box.box-address dl { font-size: 1.1rem; }

	body.app #sub-visual { height: 240px; }


	/**********
	Popup Zone
	**********/
	body.app #popup { padding:20px 10px 0; }
	body.app #popup .popup-inner { width: 100%; margin-left: auto; margin-right: auto; }


	/**********
	Paignation (bootstrap)
	**********/
	body.app .pagination>li>a, .pagination>li>span { padding: 4px 8px; }




	/**********
	Content
	**********/

	body.app #wrapper { padding-bottom: 4rem; }
	body.app #content { padding-top: 4rem; }
	#content.container { width: 100%; }


	/**********
	Footer
	**********/

	#footer { padding: 1rem 0; }
	#footer .inner { width: 100%; padding-left: 1rem; padding-right: 1rem; }


@media screen and (max-width: 400px) {
	body.app #wrapper { padding-bottom: 2rem; }
	body.app #content { padding-top: 2rem; }
	body.app .container { padding-left: .5rem; padding-right: .5rem; }
	
}