@charset "utf-8";
/*共通*/
html {
	scroll-behavior: auto;
}
body {
	background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(218, 217, 214, 1));
	font-family: 'A1 Mincho', 'Noto Serif JP', 'Noto Serif', sans-serif;
	color: #000;
	font-weight: 300;
	letter-spacing: 0.08em;
	overflow-x: hidden;
}
.fade-in-target {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.fade-in-target.is-visible {
	opacity: 1;
}
.js-fadein{
	opacity: 0;
	transform: translateY(40px);
	transition: all 1s;
}
.hidden {
    animation: fade .2s ease-in-out forwards;
    pointer-events:none;/* 重要 */
}

@keyframes fade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.visible {
    animation: fadeOut .2s ease-in-out forwards;
    pointer-events:all;/* 重要 */
}

@keyframes fadeOut {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.copy_sp {
	font-family: Baskerville, baskerville Old face, Garamond, Times New Roman, serif;
	letter-spacing: 0.08em;
	font-size: 22px;
    line-height: 1.4;
}
.pc {
	display: none;
}
a {
	color: #000;
	transition: 0.2s;
}
a:hover {
	opacity: 0.6;
}
img {
	width: 100%;
}
.header_logo, .menu_logo {
	width: 104px;
}
.main-visual {
	overflow: hidden;
	position: relative;
	height: 100vh;
}
/*英文サイト*/
.en .catchcopy {
    writing-mode: unset;
    width: 100%;
    height: auto;
    line-height: 1.4;
    font-family: Baskerville, baskerville Old face, Garamond, Times New Roman, serif;
    letter-spacing: 0.08em;
    font-size: 22px;
}
.en .state_sp {
    padding-right: 24px;
        max-width: 400px;
}
.en .footer_menu ul li:nth-child(2) {
	line-height: 1.2;
    margin-top: 7px;
    margin-bottom: 7px;
}
.en .gnavi_main li {
    line-height: 1.4;
}
.en .gnavi {
    padding-right: 24px;
}
.en #privacy h1 span {
    display: block;
    font-size: 0.8em;
    margin-top: 16px;
    line-height: 1.2;
}
@media screen and (min-width: 768px) {
.en .MV_sp .MV_logo {
    width: 300px;
    opacity: 1;
}
	.en .catchcopy {
    font-size: 24px;
}
	.en .about_img_sp.parallax-container {
    width: 456px;
    height: 672px;
        right: -16%;

	}
	   .en .about_sp {
        margin-top: 200px;
        margin-bottom: 200px;
max-width: 736px;
        margin-left: auto;
        margin-right: auto;
	}
	.en .copy_sp {
    top: 200px;
	    left: 0;
	    font-size: 24px;
	}
.en .state_sp {
    font-weight: 500;
    font-size: 14px;
    line-height: 32px;
        padding-left: 0;
        padding-right: 0;
	}
	.en .about_img_sp .parallax-image {
    top: 0;
        background-image: url(../images/state_02_pc.jpg);
	}
.en .footer_menu ul li:nth-child(2) {
    line-height: unset;
    margin-top: 0;
    margin-bottom: 0;
}
	
}


/*ヘッダー*/
header {
	position: fixed;
	z-index: 100;
	left: 16px;
	top: 16px;
}
/*ハンバーガー*/
.navToggle.active {
	position: fixed;
	z-index: 10000;
}
.navToggle {
	width: 46px;
	height: 15px;
	cursor: pointer;
	position: fixed;
	top: 15px;
	right: 16px;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.navToggle span {
	display: block;
	font-size: 10px;
}
.navToggle span:nth-child(1) {
	margin-right: 5px;
	width: 6px;
	height: 6px;
	background: #000;
	border-radius: 50%;
}
.navToggle span:nth-child(2) {
	font-weight: 500;
	letter-spacing: 0.08em;
}
.navToggle span:nth-child(3) {
	display: none;
}
.navToggle.active {
	width: 50px;
}
.navToggle.active span:nth-child(3) {
	display: block;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: #fff;
}
.navToggle.active span:nth-child(1) {
	background: #fff;
}
.navToggle.active span:nth-child(2) {
	display: none;
}
/*メニュー*/
.gnavi {
	height: 100vh;
	background: url( "../images/menu_bg_filter.png") left top/100% no-repeat, url("../images/menu_bg.jpg") 37% 49% / 262% no-repeat;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	width: 100%;
	box-sizing: border-box;
	transform: translateY(-100vh);
	opacity: 0;
	transition: opacity 0.8s;
	transition: all 0.3s;
	overflow: auto;
	padding-left: 24px;
}
.gnavi.active {
	transform: translateY(0);
	opacity: 1;
	transition: opacity 0.8s;
}
.gnavi a {
	color: #fff;
}
.gnavi .menu_logo {
	position: absolute;
	top: 16px;
	left: 16px;
}
.gnavi_inner {
    margin: 50vh auto 0;
    transform: translateY(-50%);
}
.gnavi_main {
	font-size: 14px;
	margin-bottom: 56px;
}
.gnavi_main li {
	margin-bottom: 24px;
}
.gnavi_main li:last-child {
	margin-bottom: 0;
}
.gnavi_link {
	font-size: 12px;
}
.gnavi_link li {
	margin-bottom: 24px;
}
.gnavi_link li:last-child {
	margin-bottom: 0;
}
.gnavi_link li a {
	position: relative;
}
.gnavi_link li a::after {
	position: absolute;
	display: block;
	content: url("../images/svg/arrow_w.svg");
	width: 14px;
	height: 10px;
    top: 0;
    right: -18px;
    transform: rotate(-45deg);
}
.lang {
	font-size: 14px;
	font-weight: 500;
	display: flex;
    position: absolute;
}
.lang.pc {
    display: none;
}
.gnavi_lang {
    left: 50%;
    transform: translateX(-50%);
    bottom: 112px;
	color: #fff;
}
.MV {
	height: 100vh;
	position: relative;
}
.MV .MV_image {
	height: 100%;
	width: 100%;
	position: absolute;
}
.MV .MV_image img {
	height: 100%;
	object-fit: cover;
}
.MV_logo img, .MV_logo svg {
	display: block;
}
/*スマホメインビジュアル*/
.MV_sp .MV_logo {
	width: 240px;
	position: absolute;
	top: 50%;
	  transform: translateX(-50%) translateY(-50%);
	left: 50%;
	opacity: 0.6;
}
.bg-image {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  background: url("../images/MV.jpg") center/cover no-repeat;
	  transform-origin: center center;
	  transition: filter 0.5s ease;
	}
.visual-inner {
	text-align: center;
	height: 100%;
}
.catchcopy {
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	writing-mode: vertical-rl;
	display: inline-block;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 0.1em;
}
.catchcopy span {
	display: inline-block;
	opacity: 0;
	transform: translateY(-20px);
}
.about_sp {
	opacity: 0;
	transform: translateY(50px);
}
/*スマホアバウト*/
.about_sp {
	margin-top: 63px;
	margin-bottom: 136px;
	position: relative;
}
.copy_sp {
    position: absolute;
    top: -13px;
    left: 24px;
}
.state_sp {
	font-weight: 500;
	font-size: 12px;
	line-height: 28px;
    padding-top: 315px;
    padding-left: 24px;
}
.state_sp p {
	margin-bottom: 28px;
}
.state_sp p:last-child {
	margin-bottom: 0;
}
.about_img_sp.parallax-container {
	position: absolute;
	width: 70%;
	height: 400px;
	overflow: hidden;
	top: 0;
	z-index: -1;
	right: 0;
}
.about_img_sp .parallax-image {
	position: absolute;
	top: -20%;
	left: 0;
	width: 100%;
	height: 110%; /* 画像を少し大きめにして動かす余地をつくる */
	background-image: url('../images/state_02.jpg');
	background-size: cover;
	background-position: left top;
	transform: translateY(0);
	transition: transform 0.2s linear;
}
/*インフォメーション*/
.info {
	padding-top: 136px;
	padding-bottom: 136px;
	background: url("../images/info_bg_filter.png") left top/cover no-repeat, url("../images/info_bg.jpg") center top/cover no-repeat;
}
section {
	margin-bottom: 136px;
}
#news, store {
	margin-bottom: 0;
}
section:last-child {
	margin-bottom: 0;
}
/*アフターサービス*/
#after {
	margin-left: 24px;
	margin-right: 24px;
	height: 370px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.after_inner {
    z-index: 1;
}
#after.parallax-container {
	position: relative;
	overflow: hidden;
	top: 0;
	right: 0;
}
.after_bg.parallax-image {
	position: absolute;
	top: -20%;
	width: 100%;
	height: 140%; /* 画像を少し大きめにして動かす余地をつくる */
	background-image: url('../images/after_sp.jpg');
	background-size: cover;
	background-position: center;
	transform: translateY(0);
	transition: transform 0.2s linear;
}
.after_copy {
	font-size: 14px;
	text-align: center;
	margin-bottom: 24px;
}
.after_title {
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
	margin-bottom: 50px;
}
.info_link a {
	font-size: 14px;
	font-weight: 500;
	position: relative;
	width: 256px;
	height: 34px;
	display: block;
	margin: 0 auto;
	border-bottom: solid 0.5px #000;
}
.info_link a::after {
	position: absolute;
	display: block;
	content: ">";
	font-family: Helvetica;
	font-weight: bold;
	right: 0;
	top: 0;
	width: 1em;
	height: auto;
}
/*ニュース*/
.info_title {
	color: #B7B7B7;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
}
#news .info_title {
	margin-bottom: 32px;
}
.news_copy {
	color: #fff;
	font-size: 14px;
	text-align: center;
	margin-bottom: 64px;
}
@keyframes infinity-scroll-left {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
}
.news_slider_wrap {
	display: flex;
	overflow: hidden;
	margin-bottom: 64px;
}
.news_slider_list {
	display: flex;
	animation: infinity-scroll-left 40s infinite linear 0s both;
}
.news_slider_list li {
	width: calc(100vw / 1.5);
	margin-right: 16px;
}
.news_slider_list img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
#news .info_link a, #store .info_link a {
    border-bottom: solid 0.5px #fff;
    color: #fff;
}
/*店舗情報*/
#store {
	color: #fff;
	padding-top: 136px;
}
#store .info_title {
	margin-bottom: 64px;
}
.store_map {
	padding-left: 24px;
	padding-right: 24px;
	margin-bottom: 42px;
}
.store_address {
	font-size: 14px;
	line-height: 2;
	text-align: center;
	margin-bottom: 64px;
}
.store_address .Gmap a {
	color: #fff;
	font-size: 12px;
	position: relative;
	text-decoration: underline;
}
.store_address .Gmap a::after {
	position: absolute;
	display: block;
	content: url("../images/svg/arrow_w.svg");
	width: 14px;
	height: 10px;
    top: -2px;
    right: -16px;
    transform: rotate(-45deg);
}
.info_text {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 64px;
	padding-left: 24px;
    padding-right: 24px;
    display: flex;
    justify-content: center;
}
/*コンタクト*/
#contact {
	padding-top: 136px;
}
#contact .info_title {
	margin-bottom: 56px;
}
.c-form {
	padding-left: 24px;
	padding-right: 24px;
}
.c-form__item {
	margin-bottom: 16px;
}
.c-form__label {
	display: block;
	font-size: 14px;
}
.c-form__input {
    padding-top: 16px;
    padding-bottom: 16px;
    border: none;
    background: none;
    border-bottom: solid 0.5px #000;
    width: 100%;
}
::placeholder{
	color:#C4C4C4;
}
.c-form__item #field-message {
    padding-bottom: 96px;
	margin-bottom: 48px;
	vertical-align: baseline;
}
.c-form__agree {
	font-size: 10px;
	text-align: center;
	margin-bottom: 24px
}
.c-form__agree a {
	text-decoration: underline;
}
button {
	border: none;
    background: none;
}
button.info_link {
	color: #000;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	position: relative;
	width: 256px;
	height: 34px;
	display: block;
	margin: 0 auto;
	border-bottom: solid 0.5px #000;
    text-align: left;
    padding-bottom: 10px;
}
button.info_link:hover {
	opacity: 0.6;
}
button.info_link::after {
	position: absolute;
	display: block;
	content: ">";
	font-family: Helvetica;
	font-weight: bold;
	right: 0;
	top: 0;
	width: 1em;
	height: auto;
}
/*パーテーション*/
.partition.parallax-container {
	position: relative;
	height: 80px;
	overflow: hidden;
	top: 0;
}
.partition.top .parallax-image {
	position: absolute;
	top: -30%;
	width: 100%;
	height: 180%; /* 画像を少し大きめにして動かす余地をつくる */
	background-image: url( "../images/partition_top.jpg");
	background-size: cover;
	background-position: center;
	transform: translateY(0);
	transition: transform 0.2s linear;
}	
.partition.bottom .parallax-image {
	height: 180%; /* 画像を少し大きめにして動かす余地をつくる */
	background-image: url( "../images/partition_bottom.jpg");
	background-size: cover;
	background-position: center;
	transform: translateY(0);
	transition: transform 0.2s linear;
	color: #000;
}	
/*フッター*/
footer {
	height: 100vh;
	background: url("../images/footer_bg_filter.png") left top/cover no-repeat, url("../images/info_bg.jpg") left top/cover no-repeat;
	display: flex;
    justify-content: center;
    align-items: center;
	color: #E0E0E0;
}
footer a {
	color: #E0E0E0;
}
.footer_wrap {
	text-align: center;
	
}
.footer_logo {
	width: 264px;
	margin: 0 auto 80px;
}
.footer_logo img {
	mix-blend-mode: soft-light;
	opacity: 0.8;
}
.footer_logo a:hover img {
	mix-blend-mode: unset;
	opacity: 1;
}
.footer_logo a:hover {
	opacity: 1;
}
.footer_menu {
	font-size: 12px;
	line-height: 2;
	margin-bottom: 36px;
}
.footer_link {
	font-size: 12px;
	line-height: 2;
	margin-bottom: 72px;
}
.footer_link a {
	position: relative;
	margin-right: 12px;
}
.footer_link a::after {
	position: absolute;
	display: block;
	content: url("../images/svg/arrow_g.svg");
	width: 12px;
	height: 8px;
    top: -4px;
    right: -10px;
    transform: rotate(-45deg);
}
.footer_privacy {
	margin-bottom: 72px;
}
.footer_privacy a {
	font-size: 10px;
	mix-blend-mode: soft-light;
}
.footer_privacy a:hover {
	mix-blend-mode: hard-light;
	opacity: 1;
}
.copyright {
	font-size: 10px;
	mix-blend-mode: soft-light;
}
/*アフターサービスページ*/
#subpage .MV {
    display: flex;
    align-items: center;
    justify-content: center;
	position: static;
	height: 400px;
	margin-bottom: 56px;
}
#subpage .MV .MV_image {
    height: 400px;
}
#subpage .MV_title {
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	line-height: 1.6;
	z-index: 1;
}
#subpage .MV_title span {
	display: block;
}
#subpage .MV_title span.pc {
	display: none;
}
#subpage section {
	padding-left: 24px;
	padding-right: 24px;
}
.text_wrap dl {
	margin-bottom: 48px;
}
.text_wrap dt {
	font-size: 16px;
	margin-bottom: 24px;
	line-height: 1.6;
}
.text_wrap dd {
	font-size: 14px;
	line-height: 1.8;
}
.text_wrap dd:last-child {
	margin-top: 24px;
}
.text_wrap p {
	font-size: 14px;
	line-height: 1.8;
}
#subpage #contact {
	position: relative;
}
#subpage #contact::before {
	position: absolute;
	width: calc(100% - 48px);
	height: 0.3px;
	content: "";
	display: block;
	top: 0;
	left: 24px;
	background: #000;
}
/*アフターサービスページend*/
/*プライバシーポリシーページ*/
#privacy {
	margin-top: 80px;
}
#privacy h1 {
	margin-bottom: 46px;
	text-align: center;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.08em;
}
#privacy .text_wrap p {
	margin-bottom: 46px;
}
/*プライバシーポリシーページend*/


@media screen and (min-width: 768px) {
	.pc {
		display: block;
	}
	.lang.pc {
		display: flex;
	}
	.sp {
		display: none;
	}
	header {
		left: 36px;
		top: 36px;
	}
	.header_logo, .menu_logo {
		width: 128px;
	}
	.navToggle span {
		font-size: 12px;
	}
	.navToggle {
		width: 60px;
		height: 17px;
		top: 40px;
		right: 36px;
	}
	.navToggle span:nth-child(1) {
		margin-right: 8px;
		width: 8px;
		height: 8px;
	}
	.navToggle.active {
		width: 63px;
	}
.gnavi .menu_logo {
		top: 36px;
		left: 36px;
	}
	.gnavi_inner {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.gnavi_main {
		margin-bottom: 0;
		margin-right: 122px;
	}
	.gnavi_link {
		margin-right: 16px;
	}
	.gnavi {
		background: url(../images/menu_bg_filter.png) left top / 100% no-repeat, url(../images/menu_bg.jpg) right 54% / 111% no-repeat;
	}
	.gnavi_lang {
		bottom: 148px;
	}
	.header_lang {
		display: flex;
		top: 41px;
		right: 120px;
		position: fixed;
    }
	.MV_logo {
		width: 440px;
		position: absolute;
		opacity: 0.6;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

/*PCメインビジュアル*/
	.MV_logo_pc {
		opacity: 0.6;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.MV_pc .MV_copy {
		writing-mode: vertical-rl;
		font-size: 22px;
		letter-spacing: 0.08em;
		position: absolute;
		top: 160px;
		left: 50%;
		transform: translateX(-50%);
	}
	.MV_pc .MV_state {
		writing-mode: vertical-rl;
		font-size: 16px;
		letter-spacing: 0.08em;
		line-height: 3.2;
		position: absolute;
		top: 160px;
		left: 50%;
		transform: translateX(-50%);
	}
	.MV_pc .MV_state p {
		margin-left: 32px;
	}
	.MV_pc .MV_state p:last-child {
		margin-left: 0;
	}
	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		background-position: center;
		background-size: cover;
		opacity: 0;
		transform: scale(1);
	}
	.bg1 { background-image: url("../images/MV.jpg"); opacity: 1; }
	.bg2 { background-image: url("../images/MV_img02.jpg"); }
	.bg3 { background-image: url("../images/MV_img03.jpg"); }
	.logo_pc {
		display: block;
	}
	.catchcopy_pc {
		writing-mode: vertical-rl;
		display: inline-block;
	}
	.catchcopy_pc span {
		display: inline-block;
		opacity: 0;
		transform: translateY(20px);
	}
	.statement_pc {
		display: none;
		opacity: 0;
	}
	.content {
		opacity: 0;
		transform: translateY(20px);
	}		
	.info_text {
		text-align: center;
	}


/*PCメインビジュアルend*/
	#subpage .info_title {
		display: none;
	}
	.text_wrap {
		width: 640px;
		margin: 0 auto;
	}
	.text_wrap.after p {
		text-align: center;
		text-decoration: underline;
	}
	.after_title span.pc {
		display: inline;
		font-size: 16px;
	}
	.after_copy {
	    margin-bottom: 18px;
	}
	.info {
	    padding-top: 224px;
		padding-bottom: 224px
	}
	section {
		margin-bottom: 200px;
		position: relative;
	}
	#after {
		margin: 0 auto 200px;
		padding-top: 0;
		padding-bottom: 0;
		width: 736px;
		height: 412px;
	}
	.after_bg.parallax-image {
		background-image: url( "../images/after.jpg");
	}
	#news .info_title {
		margin-bottom: 36px;
	}
	.news_copy {
		margin-bottom: 80px;
	}
	.news_slider_list li {
		width: calc(100vw / 4.5);
		margin-right: 1.2%;
	}
	.news_slider_wrap {
		margin-bottom: 80px;
	}
	#store {
		padding-top: 200px;
	}
	.store_map {
		padding-left: 0;
		padding-right: 0;
		width: 530px;
		margin: 0 auto 64px;
	}
	.store_address {
		margin-bottom: 80px;
	}
	.partition.parallax-container {
		height: 160px;
	}
	.c-form {
		padding-left: 29%;
		padding-right: 29%;
		box-sizing: border-box;
	}
	#subpage #contact::before {
		width: 100%;
		left: 0;
	}
	#subpage .MV {
		height: 560px;
		}
	#subpage .MV .MV_image {
		height: 560px;
	}
	#subpage .MV_title span {
		display: inline;
	}
	#subpage .MV_title span.pc {
		display: inline;
	}
	#subpage .MV_title {
		padding-left: 32vw;
	}
	#privacy {
		margin-top: 168px;
	}
}
@media screen and (min-width: 1280px) {
	#contact {
		padding-top: 200px;
	}
	#contact .info_title {
		top: 208px;
	}
	.c-form__item {
	    margin-bottom: 40px;
	}
    .c-form__item #field-message {
        padding-top: 16px;
        padding-bottom: 80px;
        margin-bottom: 48px;
		font-family: san-serif;
    }
	.c-form__label {
		display: inline-block;
		width: 25%;
	}
	.c-form__message {
		vertical-align: top;
	    padding-top: 16px;
	}
	.c-form__input {
	    width: 73%;
	}
	#store .info_title, #contact .info_title, #subpage .info_title {
		margin-bottom: 0;
		writing-mode: vertical-rl;
		position: absolute;
		left: 188px;
		display: block;
	}
}