@charset "UTF-8";



:root{
	--text_color: #484544;
}

html{
	font-size: min(1px, 0.1818vw);
	scroll-behavior: smooth;
}

html[lang]{
	margin: 0 !important;
}
#wpadminbar{
	display: none;
}

body{
	padding: 0;
	margin: 0;
	font-family: sans-serif;
	font-size: 16rem;
	font-weight: 300;
	line-height: 1.8;
	word-break: break-all;
	overflow-wrap: anywhere;
	overflow-x: hidden;
	color: var(--text_color);
	background-color: #fafafa;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%; /* iPhoneだけ文字が大きくなる現象を防ぐ */
	/*font-feature-settings: "palt";*/ /* 文字詰め（フォントにカーニング情報が含まれる場合） */

	/* iPhoneで上下のバーを抜いた高さ */
	height: -webkit-fill-available;
	height: -moz-available;
}
html[lang="en"] body{
	overflow-wrap: break-word;
}

::-webkit-input-placeholder{ color: #bbb; }
:-moz-placeholder          { color: #bbb; }
:-ms-input-placeholder     { color: #bbb; }

html.pc .sp{ display: none !important; }
html.sp .pc{ display: none !important; }

img{
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
img.inline_svg{
	display: none;
}
iframe{
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

hr{
	border: 0;
	border-top: 1px solid #c9c9c9;
	margin: 10rem 0;
}

p{
	text-align: justify;
}

b{
	display: inline-block;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
}

a,
a:link,
a:visited{
	color: inherit;
}
a:hover{

}

#page{
	--page-width: 550px;
	--sec1-margin-v: calc((100vh - min(510px, 92.72vw)) / 2);

	position: relative;
	text-align: center;
	width: var(--page-width);
	max-width: 100%;
	min-height: 100vh;
	margin: 0 auto;
	background-color: #fff;
}

header{
	--nav-bg-color: #fff;
	position: fixed;
	top: 0;
	left: max(0, calc((100% - var(--page-width)) / 2));
	width: var(--page-width);
	max-width: 100%;
	z-index: 1000;
	margin: 0 auto;
}
#header1{
	display: flex;
	justify-content: flex-end;
	padding: 15rem 30rem;
	transition: background-color 0.3s;
}
header.nav_open #header1{
	background-color: var(--nav-bg-color);
}

#nav_knob{
	position: relative;
	width: 80rem;
	height: 60rem;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
#nav_knob span,
#nav_knob span::before,
#nav_knob span::after {
	content: "";
	display: block;
	position: absolute;
	width: 40rem;
	height: 2rem;
	background: var(--text_color);
	transition: all 0.3s;
}
#nav_knob span::before { top: -13rem; }
#nav_knob span::after { top: 13rem; }

header.nav_open #nav_knob{
	z-index: 1001;
}
header.nav_open #nav_knob span { background: transparent; }
header.nav_open #nav_knob span::before { top: 0; transform: rotate(45deg); }
header.nav_open #nav_knob span::after { top: 0; transform: rotate(-45deg); }

nav#global{
	display: flex;
	flex-direction: column;;
	position: fixed;
	box-sizing: border-box;
	padding: 0 35rem;
	width: var(--page-width);
	max-width: 100%;
	height: 100vh;
	background-color: var(--nav-bg-color);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
header.nav_open nav#global{
	opacity: 1;
	pointer-events: all;
}
nav#global a{
	padding: 10rem 0;
	border-bottom: 1px solid #d1d0cf;
}
nav#global > a:first-child{
	border-top: 1px solid #d1d0cf;
}
nav#global .nav2{
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 30rem 40rem;
	padding: 15rem;
	border-bottom: 1px solid #d1d0cf;
}
nav#global .nav2 a{
	padding: 0;
	border-bottom: 0;
}

/*.scroll{
	position: fixed;
	bottom: 70rem;
	left: 0;
	width: 100%;
	text-align: center;
}*/
.scroll{
	position: absolute;
	width: 100%;
	margin: -150rem 0 0;
	text-align: center;
}
.scroll img{
	width: 85rem;
}

#sec1{
	height: calc(100vh + 6000rem);
	/*height: calc(100vh + 2500px);*/
}
#sec1 .bg{
	position: sticky;
	top: var(--sec1-margin-v);
	left: 0;
	width: 100%;
	aspect-ratio: 550 / 510;
	margin-bottom: var(--sec1-margin-v);
	background-image: url(img/1.webp);
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
}
#sec1 .bg .layer{
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: calc(100% + 2px);
}
#sec1 .bg .circle{
	/* width: 100%; */
	/* height: 100%; */

	/* 穴のサイズと位置 */
	--hole-size: calc(min(var(--page-width), 100vw) * 0.197);
	--hole-offset-r: 0.52;
	--hole-offset-x: calc(var(--hole-size) * var(--hole-offset-r));
	--hole-offset-y: calc(var(--hole-size) * var(--hole-offset-r));
	--hole-x: calc(50% - var(--hole-offset-x));
	--hole-y: calc(50% - var(--hole-offset-y));
	--bg-color: rgba(255,255,255,0.45);
	--shadow-color: rgba(0, 0, 0, 0.13);
}
#sec1 .bg .circle::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	inset: 0;

	/* マスクで中央を透明化 */
	-webkit-mask:
		radial-gradient(
			circle var(--hole-size) at var(--hole-x) var(--hole-y),
			transparent 0 99%,
			black 100%
		);
	mask:
		radial-gradient(
			circle var(--hole-size) at var(--hole-x) var(--hole-y),
			transparent 0 99%,
			black 100%
		);

	background-color: var(--bg-color);
}
#sec1 .bg .circle::after{
	content: "";
	position: absolute;
	transform: translate(-50%, -50%);
	top: var(--hole-y);
	left: var(--hole-x);
	width: calc(var(--hole-size) * 2);
	height: calc(var(--hole-size) * 2);
	border-radius: 500px;
	/* 穴の内側の影 */
	box-shadow: inset 5rem 5rem 10rem 0 var(--shadow-color);
}
#sec1 .bg .circle2{
	--hole-offset-x: calc(var(--hole-size) * var(--hole-offset-r) * -1);
	--hole-offset-y: calc(var(--hole-size) * var(--hole-offset-r) * -1);
}
#sec1 .bg .circle3{
	--hole-offset-x: calc(var(--hole-size) * var(--hole-offset-r) * -1);
	--hole-offset-y: calc(var(--hole-size) * var(--hole-offset-r));
}
#sec1 .bg .circle4{
	--hole-offset-x: calc(var(--hole-size) * var(--hole-offset-r));
	--hole-offset-y: calc(var(--hole-size) * var(--hole-offset-r) * -1);
}
#sec1 .bg .circle5{
	--hole-size: calc(min(var(--page-width), 100vw) * 0.271);
	--hole-offset-x: 0px;
	--hole-offset-y: 0px;
	--bg-color: rgba(255,255,255,1);
	--shadow-color: rgba(0, 0, 0, 0.27);
}
#sec1 .bg .circle img{
	position: absolute;
	width: 55rem;
	z-index: 10;
	opacity: 0;
}
#sec1 .bg .circle1 img{
	bottom: 50rem;
	right: 30rem;
}
#sec1 .bg .circle2 img{
	top: 70rem;
	left: 20rem;
}
#sec1 .bg .circle3 img{
	bottom: 50rem;
	left: 20rem;
}
#sec1 .bg .circle4 img{
	top: 70rem;
	right: 20rem;
	opacity: 1;
}

#sec1_2{
	/* display: flex; */
	/* justify-content: center; */
	/* align-items: center; */
	box-sizing: border-box;
	height: 100vh;
	padding: var(--sec1-margin-v) 0 0;
}
#sec1_2 .slider{
	position: relative;
}
#sec1_2 .slide1{
	box-shadow: 0 0 0 2px rgba(255,255,255,1);
}

svg path{
	/* stroke-dasharray: 2500; */
	/* 最初は全部隠す */
	/* stroke-dashoffset: 2500; */

	/* transition: 2s ease-in-out; */
}
svg path.draw{
	stroke-dashoffset: 0 !important;
}

section{
	/*scroll-margin: 0;*/
}
#sec3, #sec4{
	scroll-margin: 130rem;
}

.img2{ margin: 130rem 0; }
.img3{ margin: 130rem 0; }
.img5{ margin: 130rem 0; }
.img6{ margin: 130rem 0 0; }
.img7{ margin: 130rem 0 0; }
.img8{ margin: 130rem 0 0;}
.img9{ margin: 130rem 0 0; }
.img10{ margin: 130rem 0 0; }
.img11{ margin: 130rem 0 0; }
.img12{ margin: 130rem 0 0; }
.img13{ margin: 130rem 0 0; }
.img14{ margin: 130rem 0 0; }
.img15{margin: 130rem 0 0;}
.img16{ margin: 130rem 0 0; }
.img17{margin: 130rem 0;}
.img18{margin: 110rem 0 0;}
.img19{margin: 60rem 0 0;}
.img20{ margin: 130rem 0 0; }
.img21{margin: 60rem 0 0;}
.img22{ margin: 130rem 0 0; }
.img23{margin: 60rem 0 0;}
.img24{ margin: 130rem 0 0; }
.img25{margin: 60rem 0 0;}
.img26{ margin: 130rem 0 0; }
.img27{margin: 70rem 0 0;}
.img28{ margin: 130rem 0 0; }
.img29{margin: 70rem 0 0;}
.img30{ margin: 130rem 0 0; }
.img31{ margin: 130rem 0 0; }
.img32{ margin: 130rem 0 0; }
.img33{margin: 70rem 0 0;}
.img34{margin: 140rem 0 130rem;}
.img35{ margin: 130rem 0 0; }
.img36{ margin: 130rem 0 0; }
.img37{margin: 70rem 0 0;}
.img38{margin: 60rem 0 0;}
.img39{ margin: 130rem 0 0; }
.img40{margin: 70rem 0 0;}
.img41{margin: 130rem 0 0;}
.img42{ margin: 130rem 0 0; }
.img43{margin: 130rem 0;}
.img44{ margin: 130rem 0 0; }
.img45{ margin: 130rem 0 0; }
.img46{margin: 60rem 0 0;}
.img47{ margin: 130rem 0 0; }
.img48{margin: 60rem 0 0;}
.img49{ margin: 130rem 0 0; }
.img50{margin: 60rem 0 0;}
.img51{ margin: 130rem 0 0; }
.img52{margin: 60rem 0 0;}
.img53{ margin: 130rem 0 0; }
.img54{margin: 60rem 0 0;}
.img55{ margin: 130rem 0 0; }
.img56{margin: 70rem 0 0;}
.img57{ margin: 130rem 0 0; }
.img58{margin: 130rem 0;}
.img59{ margin: 130rem 0 0; }
.img60{ margin: 130rem 0 0; }
.img61{ margin: 130rem 0 0; }
.img62{margin: 70rem 0 0;}
.img63{ margin: 130rem 0 0; }
.img64{ margin: 130rem 0 0; }
.img65{ margin: 130rem 0 0; }
.img66{margin: 70rem 0 0;}
.img67{ margin: 130rem 0 0; }
.img68{margin: 60rem 0 0;}
.img69{ margin: 130rem 0 0; }
.img70{margin: 60rem 0 0;}
.img71{margin: 210rem 0 50rem;}
.img72{ margin: 130rem 0 0; }
.img73{margin: 70rem 0 0;}
.img74{margin: 80rem 0 0;}
.img75{ margin: 130rem 0 0; }
.img76{ margin: 130rem 0 0; }
.img77{margin: 60rem 0 0;}
.img78{margin: 50rem 0 0;}
.img79{ margin: 60rem 0 0; }
.img80{ margin: 60rem 0 0; }
.img81{ margin: 60rem 0 0; }
.img82{ margin: 60rem 0 0; }
.img83{ margin: 60rem 0 0; }
.img84{ margin: 130rem 0 0; }
.img85{margin: 60rem 0 0;}
.img86{margin: 130rem 0 60rem;}