@charset "UTF-8";

@media (max-width: 779px) {
	body.menuopen {
		overflow: hidden;
	}
	.break {
		display: inline;
	}
	.PC {
		display: none;
	}
	.SP {
		display: block;
	}
	.lnkbtn {
		font-size: 15px;
	}
	.lnk {	
		font-size: 12px;
	}
	.lnk a, .lnk p {
		padding: .4em 1.2em;
	}
	.lnk .icon-map {
		margin-right: 7px;
	}
	.lnk .icon-map svg {
		height: 12px;
	}
	.icon-arrow {
		width: 35px;
		margin-right: 15px;
	}
	.icon-arrow::before {
		width: 35px;
	}
	.icon-arrow::after {
		left: 29px;
	}
	a:hover .icon-arrow, a:hover .icon-arrow::before {
		width: 75px;
	}
	a:hover .icon-arrow::after {
		left: 69px;
	}

	.header-logo {
		top: 7px;
		left: 10px;
		height: 90px;
		z-index: 10;
	}
	.page .header-logo, .header-logo.-resize {
		top: 5px;
		left: 10px;
		height: 40px;
	}
	.globalnav-wrap {
		position: fixed;
		top: 0;
		right: 0;
		width: 100vw;
		height: 0;
		background: #FFF;
		overflow: hidden;
		transition: .5s linear;
	}
	body.menuopen .globalnav-wrap {
		height: 100vh;
	}
	#globalnav {
		position: inherit;
		top: auto;
		right: auto;
		font-size: 6vw;
		height: 0;
		width: 100vw;
		padding: 0;
		letter-spacing: 0;
		overflow: hidden;
		transform: translateY(0);
		transition: .5s linear;
	}
	body.menuopen #globalnav {
		height: 100vh;
	}
	#globalnav ul {
		position: absolute;
		top: 14vh;
		left: 50%;
		display: block;
		height: auto;
		width: 47vw;
		margin: auto;
		transform: translateX(-50%)
	}
	#globalnav ul li {
		display: block;
		margin-left: 0;
		height: auto;
		margin-bottom: 40px;
	}
	#globalnav ul li ul.childNav {
		position: relative;
		display: block;
		top: auto;
		right: auto;
		left: auto;
		width: auto;
		height: auto;
		padding-bottom: 0;
		margin: 20px 20px 30px;
		font-size: 3.5vw;
		letter-spacing: 0;
		font-weight: bold;
		background: transparent;
		transform: translate(0, 0);
	}
	#globalnav ul li ul.childNav::before {
		display: none;
	}
	#globalnav ul li ul.childNav li {
		margin: 20px 0 0;
		padding: 0 0 0 30px;
		height: auto;
		background: transparent;
	}
	#globalnav ul li ul.childNav li::before {
		top: 50%;
		left: 0;
		width: 20px;
		transform: translateY(-50%);
	}


	.sec {
		padding: 70px 5.5%;
	}
	#ACCESS.sec {
		padding-top: 40px;
		padding-bottom: 0;
	}
	.section-head {
		margin-bottom: 40px;
	}
	.page .section-head {
		margin-bottom: 30px;
	}
	.section-head h1, .section-head h2 {
		min-height: 110px;
		padding-left: 45px;
		margin-right: calc(50% - 50vw);
	}
	.section-head h1::before, .section-head h2::before {
		height: 110px;
	}
	.section-head h1::after, .section-head h2::after {
		top: 5px;
		left: 5px;
		width: 20px;
		height: 105px;
	}
	.section-head h1 .en-B, .section-head h2 .en-B {
		font-size: 50px;
	}
	.section-head h1 span.jpn, .section-head h2 span.jpn {
		height: 110px;
		width: 25px;
		font-size: 12px;
		letter-spacing: .1em;
	}
	.section-head h1 span.jpn::before, .section-head h1 span.jpn::after,
	.section-head h2 span.jpn::before, .section-head h2 span.jpn::after {
		left: calc(50% - 3px);
		width: 6px;
		height: 6px;
	}
	.section-head h1 span.jpn::after, .section-head h2 span.jpn::after {
		left: calc(50% + 3px);
	}



	/* GALLERY */
	#GALLERY.sec {
		padding: 30px 0;
	}
	.galler-swiper-wrapper .swiper-wrapper .swiper-slide {
		width: 175px;
	}




	/* ACCESS */
	.section-head.-access, .page.news .section-head.-access {
		width: 100%;
		margin-bottom: 30px;
	}
	.content.-access {
		width: 100%;
	}
	.access-map {
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		padding-top: 60%; 
	}
	.section-head-access-txt {
		margin: 20px 0 0 45px;
	}
	.section-head-access-txt .lnk {
		margin-top: 15px;
	}
	.section-head-access-txt dl {
		margin-top: 20px;
		padding-right: 0;
	}
	.section-head-access-txt dl dt {
		padding: 20px 0 10px 25px;
		font-size: 15px;
	}
	.section-head-access-txt dl dt.-last {
		margin-top: 20px;
	}
	.section-head-access-txt dl dt .icon-access {
		position: absolute;
		display: block;
		top: 14px;
		left: 0;
		width: 17px;
	}




	/* ONLINESHOP */
	#ONLINESHOP.sec {
		padding: 30px 5.5%;
	}
	#ONLINESHOP.sec a.onlineshop-btn {
		width: 100%;
		padding: 5%;
		border: solid 5px #FFF;
	}
	#ONLINESHOP h2 {
		width: 100%;
	}
	#ONLINESHOP h2 span.jpn {
		font-size: 10px;
		letter-spacing: 0;
	}
	#ONLINESHOP h2 p.en {
		font-size: 10vw;
		margin-left: 15px;
	}
	#ONLINESHOP a.onlineshop-btn .lnkbtn {
		justify-content: center;
		width: 100%;
		padding-right: 15px;
		margin-top: 10px;
	}
	
	.breadcrumb {
		bottom: 10px;
		left: 5.5%;
		font-size: 8px;
	}
	.breadcrumb ul {
		display: flex;
	}
	.breadcrumb ul li {
		padding-left: 11px;
		margin-left: 3px;
	}
	.breadcrumb ul li:first-child {
		padding-left: 0;
		margin-left: 0;
	}
	.breadcrumb ul li::before {
		width: 4px;
		height: 4px;
	}



	#aside {
		position: fixed;
		top: auto;
		bottom: 0;
		right: auto;
		left: 0;
		width: 100vw;
		height: 51px;
		border-top: 1px dashed rgba(255,255,255,0);
		font-size: 15px;
		overflow: hidden;
		transition: 0.5s linear;
		z-index: 9999;
	}
	body.menuopen #aside {
		border-top: 1px dashed #000;
	}
	#aside.fadeout {
		height: 0;
		transition: 0.3s linear;
	}
	.aside-link {
		top: 0;
		left: auto;
		right: 0;
		width: 100px;
		transform: translateY(0);
	}
	.aside-link ul {
		display: flex;
		flex-wrap: wrap;
	}
	.aside-link li {
		width: 50px;
	}
	.aside-onlineshop {
		position: absolute;
		width: calc(100% - 100px);
		height: 100%;
		left: 0;
		bottom: 0;
		transform: translateX(0);
		background: #FFF;
	}
	.aside-onlineshop a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 0;
	}
	.aside-onlineshop span {
		position: relative;
		left: auto;
		top: auto;
		transform: translateY(0);
	}
	.aside-onlineshop .icon-arrow {
		position: relative;
		top: auto;
		height: 10px;
		width: 50px;
		margin-right: 30px;
		transform: translateY(0);
	}
	.aside-onlineshop .icon-arrow::before, .aside-onlineshop .icon-arrow::after {
		top: 50%;
		right: 0;
		left: auto;
		width: 50px;
		height: 2px;
		transform: translateY(-50%);
	}
	.aside-onlineshop .icon-arrow::after {
		top: 50%;
		width: 7px;
		height: 7px;
		transform: translateY(-50%) rotate(45deg);
	}
	.aside-onlineshop p {
		display: block;
		width: auto;
		writing-mode: unset !important;
	}
	.aside-onlineshop .icon-blank {
		bottom: auto;
		margin-left: 10px;
	}
	.aside-onlineshop a:hover .icon-arrow, .aside-onlineshop a:hover .icon-arrow::before {
		height: 2px;
		width: 50px;
	}
	.aside-onlineshop a:hover .icon-arrow::after {
		top: 50%;
		left: auto;
		right: 0;
	}
	

	.NavMenu {
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 50px;
		cursor: pointer;
		background: rgba(255,255,255,0);
		z-index: 999;
	}
	.menubar {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 10px;
		width: 40px;
		transform: translate(-50%, -50%);
	}
	.menubar::before,
	.menubar::after {
		content: '';
		position: absolute;
		display: block;
		left: 0;
		right: 0;
		width: 100%;
		height: 2px;
		background: #000;
		transform: rotate(0);
		-webkit-transition: -webkit-transform .5s cubic-bezier(1,0,0,1) 0s;
		transition: .5s cubic-bezier(1,0,0,1) 0s;
	}
	.menubar::before {
		top: 0;
	}
	.menubar::after {
		top: 8px;
	}
	.menuopen .NavMenu .menubar::before,
	.menuopen .NavMenu .menubar::after,
	.menuopen .NavMenu:hover .menubar::before,
	.menuopen .NavMenu:hover .menubar::after {
		top: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);	
	}
	.menuopen .NavMenu .menubar::after,
	.menuopen .NavMenu:hover .menubar::after {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);	
	}
	.NavMenu:hover, .menuopen .NavMenu:hover {
		background: rgba(255,255,255,.12);
	}
	.menuopen .NavMenu {	
		background: rgba(255,255,255,.09);
	}
	.NavMenu:hover .menubar::before {
		top: -1px;
	}
	.NavMenu:hover .menubar::after {
		top: 9px;
	}





	.footer-wrapp {
		position: relative;
		padding: 30px 5.5% 0;
	}
	.totop {
		display: none;
	}
	.footer-content {
		flex-direction: column-reverse;
	}
	.footer-logos {
		margin: auto;
	}
	.footer-logo {
		width: 110px;
	}
	.footer-logo-txt {
		margin-left: 7vw;
		font-size: 12px;
	}
	.footer-logo-txt-title {
		font-size: 18px;
	}
	.footer-logo-txt ul li .lnk {
		/*position: inherit;
		right: auto;
		bottom: auto;*/
		width: 120px;
		margin-top: 3px;
	}
	.footer-logo-txt ul li .lnk a {
		font-size: 11px;
	}
	.footer-logo-txt ul li .lnk .icon-map svg {
		height: 11px;
	}
	.footer-nav {
		width: 100%;
	}
	.footer-nav ul {
		display: flex;
		justify-content: center;
		margin-top: 0;
		margin-bottom: 50px;
		font-size: 13px;
		line-height: 1;
	}
	.footer-nav ul li {
		margin-left: auto;
	}
	.footer-nav ul.childfootNav {
		margin-top: 10px;
		margin-bottom: 0;
		font-size: 10px;
		letter-spacing: 0;
	}
	.footer-nav ul.childfootNav li {
		margin-top: 7px;
		padding-left: 10px;
	}
	.footer-nav ul.childfootNav li::before {
		width: 7px;
		height: 7px;
	}
	.footer-lnk {
		margin-top: 60px;
		text-align: center;
	}
	.footer-lnk ul {
		justify-content: center;
	}
	.footer-lnk ul li {
		margin: 0 10px;
	}
	.copyright {
		margin-top: 10px;
		padding: 15px 0;
		font-size: 10px;
		text-align: center;
	}
	
}