@charset "utf-8";

:root {
	--pcp: / 1400 * 100%;
	--pcv: / 1400 * 100vw;
	
	--spp: / 375 * 100%;
	--spv: / 375 * 100vw;
}

/* -------------------------------------------------
	font
------------------------------------------------- */

/*
font-family: adobe-garamond-pro, serif;
font-weight: 400;
font-style: normal;

font-family: adobe-garamond-pro, serif;
font-weight: 400;
font-style: italic;
*/


@font-face {
	font-family: 'Zen Old Mincho';
	font-weight: 500;
	font-style: normal;
	src: url('../font/Zen_Old_Mincho/ZenOldMincho-Medium.ttf') format('truetype');
}

/* -------------------------------------------------
	reset
------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	vertical-align: top;
	box-sizing: border-box;
}

html {
}

body {
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	position: relative;
	font-family: 'adobe-garamond-pro', 'Zen Old Mincho', serif;
	font-weight: 500;
	letter-spacing: 0.045em;
	overflow: hidden;
}

p, h1, h2, h3, h4, th, td, li, dt, dd, figcaption, input, select, textarea {
	font-weight: 500;
	letter-spacing: 0.045em;
}

img {
	border: none;
	max-width: 100%;
	height: auto;
}

iframe {
	border: none;
}

a {
	text-decoration: none;
	color: #000;
}
a:hover {
	
}

ul, ol {
	list-style-type: none;
}

main {
	display: block;
}

@media print, screen and (min-width:768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

@media screen and (max-width:767px) {
	
}

/* -------------------------------------------------
	box
------------------------------------------------- */

@media screen and (max-width:767px) {
	.box-sp {
		width: calc(325 var(--spp));
		margin: 0 auto;
		position: relative;
	}
}

/* -------------------------------------------------
	page
------------------------------------------------- */

.page {
	width: 100%;
	height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(-200%);
}
.page.on {
	z-index: 20;
	transform: translateY(0);
}

/*
.page#about,
.page#business {
	height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
*/

.page .page-inner {
	min-height: 100vh;
	padding: 55px 0 95px;
	position: relative;
	overflow: hidden;
}

.page-inner::before {
	width: calc(169 var(--pcp));
	height: 100%;
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 4;
}

@media print, screen and (min-width:768px) {
	
	#business .page-inner::before { background: url("../img/bg_01.jpg") no-repeat center center / cover; }
	#news .page-inner::before { background: url("../img/bg_02.jpg") no-repeat center center / cover; }
	#info .page-inner::before { background: url("../img/bg_03.jpg") no-repeat center center / cover; }
	#contact .page-inner::before { background: url("../img/bg_04.jpg") no-repeat center center / cover; }
}

@media screen and (max-width:767px) {
	#business .page-inner::before { background: url("../img/bg_01_sp.jpg") no-repeat center center / cover; }
	#news .page-inner::before { background: url("../img/bg_02_sp.jpg") no-repeat center center / cover; }
	#info .page-inner::before { background: url("../img/bg_03_sp.jpg") no-repeat center center / cover; }
	#contact .page-inner::before { background: url("../img/bg_04_sp.jpg") no-repeat center center / cover; }
	
	.page .page-inner {
		padding: calc(25 var(--spv)) 0 calc(110 var(--spv));
	}
	
	.page-inner::before {
		width: calc(60 var(--spp));
		height: auto;
		top: calc(246 var(--spv));
		left: auto;
		right: 0;
	}
}

/* -------------------------------------------------
	h
------------------------------------------------- */

.h-type1 {
	width: 326px;
	padding-top: 85px;
	margin: 0 auto;
	font-size: 18px;
	background: url("../img/logo_01.svg") no-repeat 0 0 / 100% auto;
	text-align: center;
	letter-spacing: 0.06em;
}

@media screen and (min-width:1700px) { /* PC調整 大1 */
	.h-type1 {
		font-size: 19px;
	}
}
@media screen and (min-width:2200px) { /* PC調整 大2 */
	.h-type1 {
		font-size: 20px;
	}
}

@media screen and (max-width:767px) {
	.h-type1 {
		width: 60%;
		padding-top: calc(85 var(--spv));
		margin: 0 0 calc(125 var(--spp)) calc(25 var(--spp));
		font-size: calc(15 var(--spv));
		background-size: calc(169 var(--spv)) auto;
		text-align: left;
	}
}

/* -------------------------------------------------
	ページ遷移時のシームレスアニメーション
------------------------------------------------- */

.h-type1,
.page-inner::before,
.page .main-content {
	opacity: 0;
	transform: translateY(15px);
	transition:
		opacity 1s cubic-bezier(.26,0,.16,.97) 0.4s,
		transform 1s cubic-bezier(.26,0,.16,.97) 0.4s;
}

.page-inner::before { transition-delay: 0.6s; }
.page .main-content { transition-delay: 0.8s; }

.page.on .h-type1,
.page.on .page-inner::before,
.page.on .main-content {
	opacity: 1;
	transform: translateY(0);
}

/* -------------------------------------------------
	nav
------------------------------------------------- */

nav .nav-panel {
	width: 100%;
	height: 100vh;
	position: absolute;
	left: 0;
	top: -100vh;
	background: #fff;
	z-index: 40;
	opacity: 0;
	transition: opacity 0.8s ease-out 0.1s;
}

#menu-btn,
nav .site-name,
nav .menu-list,
nav .lang,
nav .insta {
	z-index: 50;
}

#menu-btn {
	width: 35px;
	height: 25px;
	position: absolute;
	right: 42px;
	top: 37px;
	transform: translate(50%,-50%);
	cursor: pointer;
	background: transparent;
	border: none;
}
#menu-btn div {
	width: 100%;
	height: 1px;
	background: #231815;
	position: absolute;
	left: 0;
	top: 50%;
	transition: all 0.2s ease-out;
}
#menu-btn div:first-child { transform: translateY(-8px); }
#menu-btn div:last-child { transform: translateY(8px); }

nav .site-name {
	font-size: 17px;
	writing-mode: vertical-rl;
	white-space: nowrap;
	position: absolute;
	top: 67px;
	right: 42px;
	transform: translateX(50%);
}

nav .menu-list {
	position: absolute;
	left: calc(970 var(--pcp));
	top: calc(315 / 918 * 100%);
	transform: translateY(-50%);
}
nav .menu-list li {
	font-size: 17px;
	letter-spacing: 0.06em;
}
nav .menu-list li + li {
	margin-top: 1.3em;
}
nav .menu-list li a {
	display: inline-block;
	position: relative;
}
nav .menu-list li a::after {
	display: block;
	content: "";
	width: calc(100% + 4px);
	height: 1px;
	background: #231815;
	position: absolute;
	left: -2px;
	bottom: -7px;
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

nav .lang {
	display: flex;
	position: absolute;
	left: calc(970 var(--pcp));
	top: calc( (315 / 918 * 100%) + 169px);
}
nav .lang li {
	font-size: 17px;
	letter-spacing: 0.06em;
	position: relative;
}
nav .lang li + li {
	margin-left: 35px;
}
nav .lang li + li a::before {
	width: 1px;
	height: 1.2em;
	position: absolute;
	left: -17px;
	top: -0.1em;
	display: block;
	content: "";
	background: #231815;
	opacity: 0.5;
}
nav .lang li a {
	display: inline-block;
	position: relative;
}
nav .lang li a::after {
	display: block;
	content: "";
	width: calc(100% + 4px);
	height: 1px;
	background: #231815;
	position: absolute;
	left: -2px;
	bottom: -7px;
	opacity: 0;
	transition: opacity 0.2s ease-out;
}
nav .lang li a.current::after {
	opacity: 1;
}

nav .insta {
	display: block;
	width: 26px;
	position: absolute;
	left: calc(970 var(--pcp));
	bottom: 68px;
}
nav .insta img {
	width: 100%;
}

/* アニメーション */

nav .menu-list li,
nav .lang,
nav .insta {
	opacity: 0;
	transform: translateX(-20px);
	transition: 
		opacity 0.7s cubic-bezier(.45,.01,.13,.98),
		transform 0.7s cubic-bezier(.45,.01,.13,.98);
}
nav .menu-list li:nth-child(2) { transition-delay: 0.1s; }
nav .menu-list li:nth-child(3) { transition-delay: 0.2s; }
nav .menu-list li:nth-child(4) { transition-delay: 0.3s; }
nav .menu-list li:nth-child(5) { transition-delay: 0.4s; }
nav .lang { transition-delay: 0.5s; }
nav .insta { transition-delay: 0.6s; }

/* on */
nav.top0 .nav-panel {
	top: 0;
}
nav.op1 .nav-panel {
	opacity: 1;
}

nav.on #menu-btn div:first-child { transform: translateY(0) rotate(45deg); }
nav.on #menu-btn div:nth-child(2) { opacity: 0; }
nav.on #menu-btn div:last-child { transform: translateY(0) rotate(-45deg); }

nav.op1 .menu-list li,
nav.op1 .lang,
nav.op1 .insta {
	opacity: 1;
	transform: translateX(0);
}

@media print, screen and (min-width:768px) {
	nav .menu-list li a:hover::after,
	nav .lang li a:hover::after,
	nav .insta:hover {
		opacity: 0.5;
	}
}

@media screen and (min-width:1700px) { /* PC調整 大1 */
	nav .site-name,
	nav .menu-list li,
	nav .lang li {
		font-size: 18px;
	}
}
@media screen and (min-width:2200px) { /* PC調整 大2 */
	nav .site-name,
	nav .menu-list li,
	nav .lang li {
		font-size: 19px;
	}
}

@media screen and (max-width:767px) {
	#menu-btn {
		width: calc(35 var(--spv));
		height: calc(18 var(--spv));
		right: calc(32 var(--spv));
		top: calc(33 var(--spv));
	}
	#menu-btn div:first-child { transform: translateY(calc(-8 var(--spv))); }
	#menu-btn div:last-child { transform: translateY(calc(8 var(--spv))); }

	nav .site-name {
		font-size: calc(15 var(--spv));
		top: calc(58 var(--spv));
		right: calc(32 var(--spv));
	}

	nav .menu-list {
		left: calc(34 var(--spv));
		top: calc(188 var(--spv));
	}
	nav .menu-list li {
		font-size: calc(14 var(--spv));
	}
	nav .menu-list li a::after {
		bottom: calc(-7 var(--spv));
	}

	nav .lang {
		left: calc(34 var(--spv));
		top: calc(400 var(--spv));
	}
	nav .lang li {
		font-size: calc(14 var(--spv));
	}
	nav .lang li + li {
		margin-left: calc(30 var(--spv));
	}
	nav .lang li + li a::before {
		left: calc(-15 var(--spv));
	}
	nav .lang li a::after {
		bottom: calc(-7 var(--spv));
	}

	nav .insta {
		width: calc(20 var(--spv));
		left: calc(34 var(--spv));
		bottom: calc(160 var(--spv));
	}
}

@media screen and (max-width:767px) and (orientation: landscape) {
	#menu-btn {
		top: calc(25 var(--spv));
	}
	nav .site-name {
		font-size: calc(10 var(--spv));
		top: calc(50 var(--spv));
	}
	nav .menu-list {
		top: calc(20 var(--spv));
		transform: translateY(0);
	}
	nav .menu-list li {
		font-size: calc(8 var(--spv));
	}
	nav .lang {
		top: calc(115 var(--spv));
	}
	nav .lang li {
		font-size: calc(8 var(--spv));
	}
	nav .insta {
		width: calc(14 var(--spv));
		bottom: auto;
		left: calc(130 var(--spv));
		top: calc(112 var(--spv));
	}
}

/* -------------------------------------------------
	#top
------------------------------------------------- */

#top {
	display: flex;
	justify-content: center;
	align-items: center;
}
#top .logo {
	width: 45%;
	position: relative;
}
#top .logo img {
	width: 100%;
}
#top .logo img.p1 {
	/* 四角い形で要素を切り抜くことができる。構文はmarginやpaddingの指定の仕方と同じ。inset(上 下 左 右) */
	clip-path: inset(0 100% 0 0);
	
	transition: clip-path 2s cubic-bezier(.47,.01,.2,.97);
}
#top.on .logo img.p1 {
	clip-path: inset(0 0 0 0);
}
#top .logo img.p2 {
	/* 四角い形で要素を切り抜くことができる。構文はmarginやpaddingの指定の仕方と同じ。inset(上 下 左 右) */
	clip-path: inset(0 0 100% 0);
	
	transition: clip-path 1s cubic-bezier(.47,.01,.2,.97) 1.7s;
	
	position: absolute;
	left: 0;
	top: 0;
}
#top.on .logo img.p2 {
	clip-path: inset(0 0 0 0);
}

@media screen and (max-width:767px) {
	#top .logo {
		width: calc(325 var(--spp));
	}
}

@media screen and (max-width:767px) and (orientation: landscape) {
	#top .logo {
		width: calc(260 var(--spp));
	}
}

/* -------------------------------------------------
	#about
------------------------------------------------- */

#about .texts {
	width: calc(1000 var(--pcp));
	max-width: 1000px;
	margin: 145px auto 0;
}
#about .texts .desc {
	font-size: 15px;
	line-height: calc(30 / 15);
}
#about .texts .desc + .desc {
	margin-top: 2em;
}
#about .texts .desc.right {
	text-align: right;
}

/* PCビューでコンテンツ要素を天地位置調整 */
@media print, screen and (min-width:768px) {
	#about .box-sp.y-fix {
		width: calc(1000 var(--pcp));
		max-width: 1000px;
		position: absolute;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	#about .box-sp.y-fix .texts {
		width: auto;
		max-width: none;
		margin-top: 0;
	}
}

@media screen and (min-width:1700px) { /* PC調整 大1 */
	#about .texts .desc {
		font-size: 16px;
	}
}
@media screen and (min-width:2200px) { /* PC調整 大2 */
	#about .texts .desc {
		font-size: 17px;
	}
}

@media screen and (max-width:767px) {
	#about .texts {
		width: 100%;
		margin: 0;
		padding-right: 7vw;
	}
	#about .texts .desc {
		font-size: calc(12 var(--spv));
		line-height: calc(28 / 12);
	}
}

/* -------------------------------------------------
	#business
------------------------------------------------- */

#business ol li {
	font-size: 15px;
	line-height: calc(28 / 15);
}
#business ol li + li {
	margin-top: 1.86em;
}
#business ol li .num {
	display: block;
}

@media print, screen and (min-width:768px) {
	#business ol {
		margin-top: 130px;
		text-align: center;
	}
	
	/* PCビューでコンテンツ要素を天地位置調整 */
	#business .box-sp.y-fix {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	#business .box-sp.y-fix ol {
		margin-top: 0;
	}
}

@media print, screen and (min-width:1201px) {
	#business ol li {
		white-space: nowrap;
	}
}

@media print, screen and (min-width:768px) and (max-width:1200px) {
	#business ol {
		width: 72vw;
		margin-left: auto;
		margin-right: auto;
	}
}

@media screen and (min-width:1700px) { /* PC調整 大1 */
	#business ol li {
		font-size: 16px;
	}
}
@media screen and (min-width:2200px) { /* PC調整 大2 */
	#business ol li {
		font-size: 17px;
	}
}

@media screen and (max-width:767px) {
	#business ol {
		margin-right: 12vw;
	}
	#business ol li {
		font-size: calc(12 var(--spv));
		line-height: calc(22 / 12);
	}
	#business ol li + li {
		margin-top: 1.86em;
	}
	#business ol li .num {
		display: block;
	}
}

/* -------------------------------------------------
	#news
------------------------------------------------- */

#news ul li + li {
	margin-top: 0.5em;
}

@media print, screen and (min-width:768px) {
	#news .box-sp {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	#news ul li {
		font-size: 15px;
		line-height: 1.5;
	}
	#news ul li .date {
		width: 4.5em;
		display: inline-block;
	}
}

@media screen and (min-width:1700px) { /* PC調整 大1 */
	#news ul li {
		font-size: 16px;
	}
}
@media screen and (min-width:2200px) { /* PC調整 大2 */
	#news ul li {
		font-size: 17px;
	}
}

@media screen and (max-width:767px) {
	#news ul {
		margin-right: 12vw;
	}
	#news ul li {
		font-size: calc(12 var(--spv));
		line-height: calc(22 / 12);
	}
	#news ul li .date {
		display: block;
	}
}

/* -------------------------------------------------
	#info
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	#info {
		text-align: center;
	}
	#info .text1 {
		margin-top: 135px;
		font-size: 20px;
	}
	#info .text2 {
		margin-top: 35px;
		font-size: 15px;
		line-height: calc(26 / 15);
	}
	#info .text3 {
		margin-top: 130px;
		font-size: 15px;
		line-height: calc(26 / 15);
	}
	#info .insta {
		width: 23px;
		margin: 28px auto 0;
		display: block;
	}
	
	#info .mail:hover,
	#info .insta:hover {
		opacity: 0.5;
	}
}

/* PCビューでコンテンツ要素を天地位置調整 */
@media print, screen and (min-width:768px) {
	#info .box-sp.y-fix {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	#info .box-sp.y-fix .text1 {
		margin-top: 0;
	}
}

@media screen and (min-width:1700px) { /* PC調整 大1 */
	#info .text1 {
		font-size: 21px;
	}
	#info .text2,
	#info .text3 {
		font-size: 16px;
	}
}
@media screen and (min-width:2200px) { /* PC調整 大2 */
	#info .text1 {
		font-size: 22px;
	}
	#info .text2,
	#info .text3 {
		font-size: 17px;
	}
}

@media screen and (max-width:767px) {
	#info .text1 {
		font-size: calc(15 var(--spv));
	}
	#info .text2 {
		margin-top: calc(25 var(--spv));
		font-size: calc(12 var(--spv));
		line-height: calc(22 / 12);
	}
	#info .text3 {
		margin-top: calc(90 var(--spv));
		font-size: calc(12 var(--spv));
		line-height: calc(22 / 12);
	}
	#info .insta {
		width: calc(20 var(--spv));
		margin-top: calc(22 var(--spv));
		display: block;
	}
}

/* -------------------------------------------------
	#contact
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	#contact {
		text-align: center;
	}
	#contact .box-sp {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	#contact .text1 {
		font-size: 15px;
	}
	#contact .text2 {
		margin-top: 60px;
		font-size: 15px;
	}
	#contact .mail:hover {
		opacity: 0.5;
	}
}

@media screen and (min-width:1700px) { /* PC調整 大1 */
	#contact .text1,
	#contact .text2 {
		font-size: 16px;
	}
}
@media screen and (min-width:2200px) { /* PC調整 大2 */
	#contact .text1,
	#contact .text2 {
		font-size: 17px;
	}
}

@media screen and (max-width:767px) {
	#contact .text1 {
		font-size: calc(12 var(--spv));
		line-height: calc(22 / 12);
	}
	#contact .text2 {
		margin-top: calc(45 var(--spv));
		font-size: calc(12 var(--spv));
		line-height: calc(22 / 12);
	}
}

/* -------------------------------------------------
	responsive
------------------------------------------------- */

@media print, screen and (min-width:768px) {
	.pc-none {
		display: none !important;
	}
}

@media screen and (max-width:767px) {
	.sp-none {
		display: none !important;
	}
}

/* -------------------------------------------------
	print
------------------------------------------------- */

@media print {
	body {
		width: 980px !important;
	}
}