@charset "utf-8";
/* CSS Document */

/*基本設定 ******************************************************************/
html {
	font-size: 62.5%; scroll-behavior: smooth;
}
body {
	width: 100%;
	min-width: 360px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.5;
	color: #111;
	position: relative;
}
img { width: 100%; }



/*英字フォント ******************/
.font-merri {
	font-family: "Merriweather", serif;
	font-weight: 400;
}



/*見出し関連 ******************/
h1, h2, h3 { font-weight: bold; }
h1,h2 { font-size: 2.8rem; }

/*英字タイトル*/
.en-title {
	font-size: 8rem;
	color: #ffffff;
	white-space: nowrap;
	position: absolute;
}

@media screen and (max-width: 768px){
	h1, h2 { font-size: 2.3rem; }
	.en-title { font-size: 7rem; }
}
@media screen and (max-width: 540px){
	.en-title { font-size: 5rem; }
}



/*背景画像 ******************/
.bg-image {
  width: 100%;
  height: 100%;
	position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0);
  z-index: -1;
}
.bg-image-fixed {
	width: calc(100vw - 324px);
	height: 100%;
	background-size: cover;
	background-position: center;
	position: fixed;
	top: 0;
}

@media screen and (max-width: 1024px){
	.bg-image-fixed { width: 100%; }
}



/*リンク_新しいウィンドウで開く ******************/
a.new-window::after {
	content: "";
	display: inline-block;
	width: .8em;
	height: .8em;
	margin-left: 16px;
	background: url(../images/icon_new-page.png) center / contain no-repeat;
}



/*電話・インスタ ******************/
.tel a,
.insta a {
	display: flex;
	align-items: center;
	gap: 0 12px;
}
.tel .icon,
.insta .icon { width: 32px; }
.tel .tel-no,
.insta .insta-accont {
	font-size: .85em;
	line-height: 1.1;
}
.tel .tel-no { letter-spacing: .1em; }
.insta .insta-accont {
	font-size: 1.2em;
	letter-spacing: .05em;
	font-weight: bold;
}
.tel .tel-no .big {
	font-size: 2em;
	font-weight: bold;
}



/*ページトップボタン ******************/
#pagetop a {
	padding: 5px 16px 6px;
	border-radius: 6px 6px 0 0;
	background: #111;
	border: 2px solid #fff;
	border-bottom: none;
	letter-spacing: 0.05em;
	font-weight: bold;
	color: #fff;
	position: fixed;
	bottom: 0;
	right: calc(320px + 1%);
	z-index: 999;
}

@media screen and (max-width: 1024px){
	#pagetop a {
		padding: 2px 14px 4px;
		border-radius: 0 0 6px 6px;
		border-bottom: 2px solid #fff;
		border-top: none;
		font-size: .95em;
		white-space: nowrap;
		rotate: 90deg;
		transform-origin: right top;
		top: 97%;
		bottom: unset;
		right: 0;
	}
}



/*ふわっと出現 ******************/
.fade-in-item {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease-out, transform 1s ease-out
}
.fade-in-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}



/*ローディング画面 ******************/
#loading {
  width: 100%;
  height: 100%;
  background: #fffffff3;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999999;
}
#loading_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#loading .kvArea { width: 100%; }
#loading .kvArea .img_box { text-align: center; }
#loading .kvArea .img_box img {
	display: inline-block;
  width: auto;
  height: 50vh;
	max-height: 368px;
}
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  opacity: 1;
}
@keyframes fadeUpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}







/*ヘッダー ******************************************************************/
#header {
	position: relative;

	& .wrapper {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 320px;
		height: 100vh;
		height: 100dvh;
		padding: 8vh 0 10vh;
		background: #111;
		color: #fff;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9999;
		overflow-y: scroll;
	}

	& .wrapper::-webkit-scrollbar { width: 16px; }
	& .wrapper::-webkit-scrollbar-track { background-color: #111; }
	& .wrapper::-webkit-scrollbar-thumb {
		border-radius: 10px;
		border: solid 4px transparent;
		box-shadow: inset 0 0 10px 10px #838383;
	}
	& .gnavi {
		width: 86%;
		margin-bottom: 7vh;
	}
	& .gnavi .navi-item a {
		display: block;
		padding: 1.5vh 5%;
		position: relative;
	}
	& .gnavi .navi-item a::before {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-bottom: 1px solid;
		position: absolute;
		bottom: 0;
		left: 0;
		transition: .5s;
	}
	& .gnavi .navi-item a:hover::before { width: 100%; }
	& .gnavi .navi-item a.new-window::after {
		filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(28%) hue-rotate(236deg) brightness(107%) contrast(108%);
	}

	& .tel-insta { width: 86%; }
	& .tel a,
	& .insta a { padding: 8px 12px; }
	& .tel .icon {
		filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(28%) hue-rotate(236deg) brightness(107%) contrast(108%);
	}
}

@media screen and (max-width: 1024px){
	#header {
		& .wrapper {
			background: #fff;
			color: #111;
			right: -320px;
			-webkit-overflow-scrolling: touch;
			transition: all .5s;
			opacity: 0;
		}
		&.open .wrapper {
			right: 0;
			opacity: 1;
		}
		& .wrapper::-webkit-scrollbar-track { background-color: transparent; }
		& .gnavi .navi-item { border-bottom: 1px solid #111; }
		& .gnavi .navi-item a {
			padding: 1.5vh 16px;
			transition-duration: 0.2s;
		}
		& .gnavi .navi-item a::before { content: none; }
		& .gnavi .navi-item a.new-window::after { filter: none; }
		& .gnavi .navi-item a:hover { background: #e4e4e4; }
		& .tel .icon { filter: none; }


		
		/* バーガーメニュー ******************/
		& .toggle_btn {
			display: block;
			width: 46px;
			height: 46px;
			border-radius: 2px;
			background: #111;
			position: fixed;
			top: 22px;
			right: 14px;
			transition: all .5s;
			cursor: pointer;
			z-index: 99999;
		}
		& .toggle_btn span {
			display: block;
			width: 20px;
			height: 2px;
			border-radius: 4px;
			background-color: #fff;
			position: absolute;
			left: 13px;
			transition: all .5s;
		}
		& .toggle_btn span:nth-child(1) { top: 18px; }
		& .toggle_btn span:nth-child(2) { top: 28px; }
		&.open .toggle_btn  { background: none; }
		&.open .toggle_btn span {
			background-color: #111;
			left: 6px;
		}
		&.open .toggle_btn span:nth-child(1) {
			-webkit-transform: translateY(4px) rotate(-315deg);
			transform: translateY(4px) rotate(-315deg);
		}
		&.open .toggle_btn span:nth-child(2) {
			-webkit-transform: translateY(-6px) rotate(315deg);
			transform: translateY(-6px) rotate(315deg);
		}
		& #mask {
			display: none;
			transition: all .5s;
		}
		&.open #mask {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #000;
			opacity: .8;
			z-index: 2;
			cursor: pointer;
		}
	}
}







/*メイン ******************************************************************/
#main {
	width: calc(100% - 324px);
	border-top: 6px solid #111;

	& .top-logo-area {
		padding: 16px 0;
		text-align: center;
	}
	& .top-logo-area img { width: 96px; }
}

@media screen and (max-width: 1024px){
	#main { width: 100%; }
}






/*メイン動画 ******************/
#main-video {
	margin-bottom: 120px;
	padding: 48px 0 120px;
	position: relative;

	&::before,
	&::after {
		content: "";
		display: block;
		width: 75%;
		height: 100%;
		clip-path: polygon(0 0, 100% 0%, 60% 100%, 0% 100%);
		position: absolute;
		top: 0;
		z-index: -1;
		opacity: .8;
	}
	&::before {
		background: #bdbdbd88;
		left: 0;
	}
	&::after {
		background: #86a4bc88;
		right: 0;
		scale: -1 1;
	}
	& video {
		display: block;
		width: 100%;
		max-width: 1024px;
		margin: 0 auto;
		border: 1px solid #9d9d9d;
	}
	& .scroll-mark {
		font-size: 1.1em;
		text-align: center;
		position: absolute;
		bottom: 24px;
		left: 50%;
		translate: -50% 0;
	}
	& .scroll-mark::after {
		content: "";
		width: 1px;
		background: #111;
		position: absolute;
		top: calc(100% + 8px);
		left: 50%;
		translate: -50% 0;
		animation: 1.1s ease infinite scrollAnime;
	}
}

@keyframes scrollAnime {
	0% { height: 0; }
	100% { height: 88px; }
}

@media screen and (max-width: 1024px){
	#main-video {
		& .top-logo-area {
			margin-left: 24px;
			padding: 12px 0;
		}
		& .top-logo-area img { width: 80px; }
	}
}

@media screen and (max-width: 540px){
	#main-video {
		padding: 56px 0 96px;

		& video {
			padding-top: 16px;
			padding-bottom: 16px;
			background: #000;
		}
	}
}

@media screen and (max-width: 440px){
	#main-video { margin-bottom: 240px; }
}







/*インフォメーション ******************************************************************/
#info-list {
	


}






/*ヘアーサロン多磨について ******************************************************************/
#about {
	position: relative;

	& .bg-image-fixed {
		background-image: url(../images/about_bg.webp);
		background-position: 80% center;
	}
	& .wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 64px 0;
		width: 90%;
		max-width: 720px;
		padding: 176px 0 128px;
	}
	& .main-area {
		padding: 56px 9% 64px;
		border-radius: 0 4px 4px 0;
		background: #fffffff4;
		box-shadow: 3px 3px 9px #00000055;
		position: relative;
	}
	& .en-title {
		color: #ffffffcc;
		position: absolute;
		top: 72px;
		left: 0;
	}
	& .main-area h1 {
		margin-bottom: 56px;
		position: relative;
	}
	& .main-area h1::after {
		content: "";
		width: 20%;
		height: 1px;
		background: #111;
		position: absolute;
		left: 0;
		bottom: -28px;
	}
	& .main-area .text {
		background: #ffffffaa;
		text-align: justify;
		line-height: 2.5;
		position: relative;
	}
	& .link-area {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: wrap;
		gap: 16px 4%;
	}
	& .link-item { width: 43.5%; }
	& .link-item a {
		display: block;
		padding: 20px 7%;
		border-radius: 2px;
		box-shadow: 3px 3px 9px #00000055;
		position: relative;
		transition: .5s;
		overflow: hidden;
	}
	& .link-item a::before {
		content: "";
		display: inline-block;
		width: 205%;
		height: 100%;
		background: linear-gradient(90deg, #111 0, #111 50%, #fffffff4 50%, #fffffff4 100%);
		position: absolute;
		left: -105%;
		top: 0;
		transition: .5s;
	}
	& .link-item a span { position: relative; }
	& .link-item a.new-window::after {
		width: 1em;
		height: 1em;
		position: absolute;
		top: 50%;
		right: 24px;
		translate: 0 -50%;
		transition: .5s;
	}

	/*hoverの時*/
	& .link-item:hover a { color: #fff; }
	& .link-item:hover a::before {
		left: 0;
	}
	& .link-item:hover a.new-window::after {
		filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(28%) hue-rotate(236deg) brightness(107%) contrast(108%);
	}
}

@media screen and (max-width: 768px){
	#about {
		& .bg-image-fixed {
			background-image: url(../images/about_bg_sp.webp);
			background-position: 80% center;
		}
    & .en-title { top: 88px; }
	}
}

@media screen and (max-width: 540px){
	#about {
		& .link-item {
			width: 100%;
			max-width: 360px;
		}
    & .en-title { top: 112px; }
	}
}

@media screen and (max-width: 440px){
	#about {
		& .bg-image {
			height: 256px;
			position: relative;
		}
		& .bg-image-fixed { position: relative; }
    & .en-title {
			color: #dbdada;
			top: -40px;
			left: -4%;
			rotate: 90deg;
			transform-origin: bottom left;
		}
		& .wrapper {
			justify-content: flex-start;
			gap: 40px 0;
			width: 85%;
			margin: 40px auto 136px;
			padding: 0;
		}
		& .main-area {
			min-height: auto;
			padding: 0;
			box-shadow: none;
			position: unset;
		}
		& .main-area h1 {
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 101%;
			left: 50%;
			translate: -50% 0;
		}
		& .main-area h1::after {
			left: 50%;
			translate: -50% 0;
		}
		& .link-item a {
			border: 1px solid;
			box-shadow: none;
		}
	}
}







/*スタッフ紹介 ******************************************************************/
#staff {
	margin-bottom: 160px;
	position: relative;

	& .bg-image-fixed {
		background-image: url(../images/staff_bg.webp);
		background-position: right top;
	}
	& .bg-image .en-title {
		font-size: 7.5rem;
		rotate: 90deg;
		position: fixed;
		top: 50%;
		left: calc(50% - 160px);
		translate: -50% -50%;
	}
	& .en-title .border {
		display: inline-block;
		width: 18%;
		height: 1px;
		background: #ffffff;
		position: absolute;
		top: 50%;
		left: 103%;
	}
	& .wrapper {
		width: 92%;
		max-width: 1000px;
		margin: 0 auto;
		padding: 168px 0 148px;
		position: relative;
	}
	& h2 {
		position: absolute;
		top: 104px;
		right: 0;
	}
	& h2::after {
		content: "";
		width: 70%;
		height: 1px;
		background: #111;
		position: absolute;
		right: 0;
		bottom: -32px;
	}
	& .staff-profile {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 80px 104px;
		padding-bottom: 80px;
	}
	& .profile-item {
		display: flex;
		align-items: flex-start;
		gap: 0 4%;
		width: calc((100% - 104px) / 2);
	}
	& .profile-item:nth-child(even) { translate: 0 184px; }
	& .profile-item .img-box { width: 160px; }
	& .profile-item:nth-child(even) .img-box { order: 2; }
	& .profile-item .text-box {
		width: calc(96% - 160px);
		background: #ffffffcc;
	}
	& .profile-item:nth-child(even) .text-box { order: 1; }

	& .profile-item .name {
		margin-bottom: 16px;
		padding: 8px 6%;
		border-top: 3px solid;
		border-bottom: 1px solid;
		font-weight: bold;
		font-size: 1.1em;
		position: relative;
	}
	& .profile-item .name .icon {
		display: inline-block;
		width: 20px;
		height: 20px;
		position: absolute;
		top: 6px;
		right: 6%;
	}
	& .profile-item .profile {
		display: flex;
		margin-bottom: 24px;
		padding: 0 6%;
		line-height: 1.8;
	}
	& .profile-item .profile .title { width: 72px; }
	& .profile-item .profile .text { width: calc(100% - 72px); }
	& .profile-item .coment {
		min-height: 160px;
		padding: 0 6% 32px;
		text-align: justify;
		line-height: 1.6;
	}

	& .link-area {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 16px 2%;
	}
	& .link-item { width: 32%; }
	& .link-item a {
		display: block;
		padding: 20px 8%;
		border-radius: 2px;
		border-top: 3px solid;
		position: relative;
		transition: .5s;
		overflow: hidden;
	}
	& .link-item a::before {
		content: "";
		display: inline-block;
		width: 205%;
		height: 100%;
		background: linear-gradient(90deg, #111 0, #111 50%, #fffffff4 50%, #fffffff4 100%);
		position: absolute;
		left: -105%;
		top: 0;
		transition: .5s;
	}
	& .link-item a span { position: relative; }
	& .link-item a.new-window::after {
		width: 1em;
		height: 1em;
		position: absolute;
		top: 50%;
		right: 5%;
		translate: 0 -50%;
		transition: .5s;
	}

	/*hoverの時*/
	& .link-item:hover a { color: #fff; }
	& .link-item:hover a::before { left: 0; }
	& .link-item:hover a.new-window::after {
		filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(28%) hue-rotate(236deg) brightness(107%) contrast(108%);
	}
}

@media screen and (max-width: 1180px) {
	#staff {
		& .staff-profile { gap: 80px; }
		& .profile-item { width: calc((100% - 80px) / 2); }

		@media screen and (min-width: 1025px){
			& .profile-item {
				justify-content: center;
				gap: 24px 0;
				flex-wrap: wrap;
			}
			& .profile-item .text-box { width: 100%; }
			& .profile-item:nth-child(even) .img-box { order: 1; }
			& .profile-item:nth-child(even) .text-box { order: 2; }
		}
	}
}

@media screen and (max-width: 1024px){
	#staff .bg-image .en-title { left: 50%; }
}

@media screen and (max-width: 960px) and (min-width: 769px){
	#staff {
		& .profile-item {
			justify-content: center;
			gap: 16px 0;
			flex-wrap: wrap;
		}
		& .profile-item .text-box { width: 100%; }
		& .profile-item:nth-child(even) .img-box { order: 1; }
		& .profile-item:nth-child(even) .text-box { order: 2; }
	}
}

@media screen and (max-width: 768px){
	#staff {
		& h2 {
			position: unset;
			margin-bottom: 40px;
			text-align: center;
		}
		& h2::after { content: none; }
		& .bg-image .en-title {
			font-size: 6.5rem;
			transform-origin: right;
			left: unset;
			right: .4em;
			translate: none;
		}
		& .en-title .border { display: none; }
		& .wrapper { padding: 120px 0; }
		& .staff-profile { gap: 48px 5%; }
		& .profile-item { width: 90%; }
		& .profile-item:nth-child(even) { translate: 0; }
		& .profile-item .coment { min-height: 120px; }
		& .link-area { width: 90%; }
		& .link-item { width: 49%; }
	}
}

@media screen and (max-width: 440px){
	#staff {
		& .bg-image .en-title {
			transform-origin: left;
			left: .5em;
			right: unset;
			top: 6vh;
		}
		& .profile-item {
			gap: 16px 0;
			padding: 40px 0;
			border-top: 2px solid;
			position: relative;
		}
		& .staff-profile { gap: 0 104px; }
		& .profile-item { width: 100%; }
		& .profile-item:last-child { border-bottom: 2px solid; }
		& .profile-item .img-box {
			order: 2!important;
			position: absolute;
			top: 40px;
			right: 0;
		}
		& .profile-item .img-box img {
			height: 160px;
			object-fit: cover;
			object-position: top center;
		}
		& .profile-item .text-box {
			order: 1!important;
			width: 100%;
			background: none;
		}
		& .profile-item .name,
		& .profile-item .profile {
			width: calc(98% - 160px);
			padding: 0;
		}
		& .profile-item .name {
			height: 64px;
			border: none;
			text-align: center;
		}
		& .profile-item .name .icon {
			top: 2.5em;
			left: 50%;
			translate: -50% 0;
		}
		& .profile-item .profile {
			justify-content: center;
			gap: 0 16px;
			height: 72px;
		}
		& .profile-item .profile .title,
		& .profile-item .profile .text {
			width: fit-content;
		}
		& .profile-item .coment {
			min-height: auto;
			padding: 16px 6%;
			border-radius: 4px;
			background: #ffffffcc;
		}
		& .link-area {
			justify-content: center;
			gap: 24px 0;
			width: 100%;
		}
		& .link-item {
			width: 90%;
			max-width: 320px;
		}
		& .link-item a { border-top: none; }
	}
}







/*スライダー ******************************************************************/
#slider {
	margin-bottom: 160px;

	& .slick-list { padding: 0 15% 0 0!important; }
	& .slick-slide { margin: 0 8px; }
	& .slick-dots {
		margin-top: 16px;
		text-align: right;
		bottom: -40px;
		right: 2%;
	}
	& .slick-dots li { margin: 0 6px; }
	& .slick-dots li button::before {
		content: "";
		display: block;
		width: 11px;
		height: 11px;
		border-radius: 11px;
		border: 2px solid #111;
		background: #fff;
		opacity: 1; 
	}
	& .slick-dots li.slick-active button:before {
		background: #111;
		opacity: 1;
	}
	& .slick-dots li button:hover::before { background: #ccc; }
}

@media screen and (max-width: 440px){
	#slider {
		& .slick-list { padding: 0 35% 0 0!important; }
		& .slick-dots li { margin: 0 2px; }
		& .slick-dots li button::before {
			width: 8px;
			height: 8px;
			border-width: 1px;
		}
	}
}







/*サロン情報 ******************************************************************/
#saloninfo {
	position: relative;

	& .bg-image-fixed {
		background-image: url(../images/shopinfo-bg.webp);
		background-position: 22% center;
	}
	& .en-title {
		rotate: 90deg;
		top: 50%;
		left: -168px;
		translate: 0 -50%;
		position: fixed;
	}
	& .wrapper {
		display: flex;
		align-items: flex-start;
		width: 94%;
		max-width: 800px;
		margin: 0 auto;
		padding: 160px 0;
		position: relative;
	}
	& .logo-area {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 240px;
		aspect-ratio: 3 / 2;
		background: #111;
	}
	& .logo-area img {
		width: 104px;
		filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(28%) hue-rotate(236deg) brightness(107%) contrast(108%);
	}
	& .main-area {
		width: calc(100% - 240px);
		padding: 40px 6.5%;
		border-radius: 0 4px 4px 4px;
		background: #fffffff3;
		box-shadow: 3px 3px 9px #00000055;
	}
	& .main-area h2 {
		margin-bottom: 40px;
		position: relative;
	}
	& .main-area h2::after {
		content: "";
		width: 20%;
		height: 1px;
		background: #111;
		position: absolute;
		left: 0;
		bottom: -12px;
	}
	& .info-detail1 { margin-bottom: 56px; }
	& .info-item {
		display: flex;
		margin-bottom: 16px;
	}
	& .info-item .title { width: 96px; }
	& .info-item .text { width: calc(100% - 96px); }
	& .calender { margin-bottom: 28px; }
	& .calender-item {
		display: flex;
		gap: 0 2.2%;
		border-bottom: 3px solid;
	}
	& .calender-item.week { padding-bottom: 8px; }
	& .calender-item.open { padding: 20px 0; }
	& .calender-item li {
		width: 12.4%;
		text-align: center;
	}
	& br.max440 { display: none; }
}

@media screen and (max-width: 768px){
	#saloninfo {
		border: none;

		& .en-title {
			left: 50%;
			rotate: none;
			translate: -50% -50%;
		}
		& .wrapper {
			flex-direction: column;
			align-items: center;
			gap: 48px 0;
			padding: 160px 0;
		}
		& .logo-area {
			width: 304px;
			aspect-ratio: 3 / 1.6;
		}
		& .main-area { width: 90%; }
	}
}

@media screen and (max-width: 540px){
	#saloninfo .en-title {
		position: absolute;
		top: unset;
		bottom: -12px;
		left: 0;
		translate: none;
	}
}

@media screen and (max-width: 440px){
	#saloninfo {
		& .bg-image {
			height: 320px;
			position: relative;
		}
		& .bg-image-fixed { position: relative; }
		& .wrapper {
			gap: 24px 0;
			padding: 72px 0 24px;
		}
		& .main-area {
			width: 100%;
			background: none;
			box-shadow: none;
		}
		& br.max440 { display: block; }
	}
}







/*アクセス ******************************************************************/
#access {
	margin-bottom: 144px;
	padding-top: 48px;
	position: relative;

	& h2 {
		width: 88%;
		margin: 0 auto 16px;
	}
	& iframe {
		display: block;
		width: 88%;
		height: 384px;
		margin: 0 auto;
		position: relative;
	}
	& .en-title {
		color: #c8c8c8;
		top: 8px;
		right: 6%;
	}
}

@media screen and (max-width: 540px){
	#access .en-title { top: 32px; }
}

@media screen and (max-width: 440px){
	#access iframe { width: 92%; }
}








/*フッター ******************************************************************/
#footer {
	& .inner { position: relative; }
	& .bg-image-fixed {
		background-image: url(../images/footer-bg.webp);
		background-position: 30% bottom;
		position: unset;
	}
	& .wrapper {
		display: flex;
		align-items: center;
		padding: 64px 0 216px;
	}
	& .tel-insta { margin-left: 7%; }
	& .tel-insta .tel a,
	& .tel-insta .insta a {
		justify-content: center;
		flex-wrap: wrap;
		width: 304px;
		padding: 24px 2%;
		border-radius: 2px;
		background: #ffffffee;
		font-size: 1.2em;
	}
	& .tel-insta .tel a { margin-bottom: 16px; }
	& .tel-insta .text {
		width: 100%;
		margin-bottom: 4px;
		text-align: center;
		font-size: .85em;
		font-weight: bold;
	}
	& .copy { padding: 6px 2% 10px; }
}

@media screen and (max-width: 768px){
	#footer {
		& .bg-image-fixed { background-position: 54% bottom; }
		& .wrapper {
			padding-top: 24px;
			padding-bottom: 240px;
		}
		& .tel-insta { margin-left: 5%; }
		& .tel-insta .tel a,
		& .tel-insta .insta a {
			width: 248px;
			padding-top: 16px;
			padding-bottom: 16px;
			background: #111111ee;
			font-size: 1em;
			color: #fff;
		}
		& .tel-insta .tel a { margin-bottom: 8px; }
		& .tel .icon {
			filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(28%) hue-rotate(236deg) brightness(107%) contrast(108%);
		}
	}
}