@charset "UTF-8";

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	@media screen and (min-width: 640px) {}
}

ul,
ol {
	list-style: none;
}

img {
	border: none;
	max-width: 100%;

	&[src$=".svg"] {
		width: 100%;
	}
}

a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

	&:link {
		text-decoration: none;
		color: #00f;
		border: none;
		outline: none;
		-webkit-tap-highlight-color: transparent;
	}

	&:visited {
		text-decoration: none;
		color: #00c;
	}

	&:hover {
		text-decoration: none;
		color: #f00;
	}

	&:active {
		color: #f00;
	}

	img {
		border: 0;
	}
}

html {}

:root {
	--color-pink: #f25ba0;

	body {

		/* font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; */
		font-family: zen-maru-gothic, sans-serif;
		/* font-weight:bold; */
		background-color: #fcfcfc;
		color: #666;
		letter-spacing: 0;
		font-feature-settings: "palt" 1;
		text-size-adjust: 100%;
		text-rendering: optimizeLegibility;
		font-size: 100%;
		line-height: 1.6;
		text-align: justify;

		/* min-width: $width_pc; */
		/* @media #{$mqSp} {
			min-width: 100%;
		} */
		#container {
			>header {
				height: 100svh;
				/* background: var(--color-pink) url(img/yy.svg) no-repeat center 45%;
				background-size: 50%; */
				background-color: var(--color-pink);
				position: relative;

				/* >span {
					font-size:50%;
				} */
				/* @media (min-width:640px) {
					background-size: 50%;
				} */
				h1 {
					font-family: futura-100, zen-maru-gothic, sans-serif;
					color: #fff;
					font-weight: 300;
					text-align: center;
					line-height: 1;
					font-size: 10vw;
					padding-top: 2svh;

					@media (min-width:640px) {
						font-size: 10vw;
					}

					span {
						font-size: 75%;
						vertical-align: baseline;
					}
				}

				figure {
					text-align: center;
					line-height: 1;
					width: 80%;
					max-width: 50vh;
					margin: 1em auto 0 auto;
				}

				>div {
					color: #fff;
					text-align: center;
					position: absolute;
					width: 100%;
					bottom: 2svh;

					h2 {
						font-size: 10.5vw;
						line-height: 1;
						margin-bottom: .25em;
						font-weight: 700;
						letter-spacing: -0.1em;
						text-wrap: nowrap;

						>span {
							margin-left: var(--mr);
						}
					}

					div {
						font-size: 100%;
						font-weight: 700;
						border: 1px solid #fff;
						line-height: 1.5;
						padding: .5em;
						margin: 0 1em;
					}
				}
			}

			/* nav{
				@extend %contentBox;
				ul {
					li {
						a {}
					}
				}
			} */
			main {
				display: block;

				article {
					section {
						position: relative;
						max-width: 100vw;

						/* overflow:hidden; */
						h2 {
							position: relative;
							/* left:-0.1em;
							right:-0.1em; */
							font-family: futura-100, sans-serif;
							font-weight: 700;
							color: transparent;
							-webkit-text-stroke-width: 1px;
							-webkit-text-stroke-color: var(--color-pink);
							font-size: 16vw;
							line-height: 0.8;
							letter-spacing: -0.15em;
							/* overflow-wrap: break-word; */
							/* word-break: break-all; */
							padding-bottom: .15em;
							border-bottom: 1px solid var(--color-pink);

							opacity: 0;
							top: 20vw;
							transition: opacity .5s, top .5s cubic-bezier(0.34, 1.56, 0.64, 1);
						}

						>div {
							opacity: 0;
							transition: opacity .5s .5s;
							padding: 2em 2em 2em 2em;
							/* font-size:125%; */
							font-weight: bold;

							h3 {
								/* opacity:0;
								transition:opacity .5s .5s; */
								font-size: 7vw;
								margin-bottom: .5em;

								clip-path: inset(0 100% 0 0);
								transition: clip-path .5s ease .75s;

								letter-spacing: -0.05em;
							}

							h3 span {
								background-color: var(--color-pink);
								color: #fff;
								line-height: 1;
							}

							ul {
								padding: 0 0 0 0em;
							}

							li {
								opacity: 0;
								transition: opacity .5s;
								transition-delay: calc(var(--d) * 0.2s + 1s);
								font-size: 6vw;

								/* padding-left:1.5em; */
								p {
									/* font-weight:normal; */
									padding-left: 1.5em;

									span {
										display: block;
										font-size: 75%;
										line-height: 1.35;
										padding-bottom: .5em;

										i {
											color: #666;
											width: auto;
										}
									}
								}
							}

							div {
								font-size: 6vw;
							}

							div.address span {
								font-size: 65%;
							}

							/* li::first-line{
								padding-left:-1.5em;
							} */
							li i {
								width: 1.25em;
								margin-right: .25em;
								color: var(--color-pink)
							}
						}

						form {
							.lead {
								text-align: center;
								font-size: 3vw;
							}

							>div {
								padding: .25em 0;
							}

							input[type="text"],
							input[type="email"],
							textarea {
								display: block;
								width: 100%;
								padding: 0.5em;
								border: 1px solid #ccc;
								border-radius: .25em;
								margin: 0;
								font-size: 4vw;
							}

							label {
								display: block;
							}

							.pp {
								height: 10em;
								padding: .5em;
								border: 1px solid #ccc;
								overflow-y: scroll;
								font-size: 2vw;
								line-height: 1.5;
								border-radius: .5em;
								font-weight: normal;
							}

							.checkbox {
								text-align: center;

								input[type="checkbox"] {
									margin-right: .25em;
									width: 1em;
									height: 1em;
									font-size: 80%;
									vertical-align: middle;
									accent-color: var(--color-pink);
								}

								label {
									display: inline;
									font-size: 80%;
									vertical-align: middle;
								}
							}

							button {
								display: block;
								padding: .5em;
								border: 1px solid var(--color-pink);
								color: var(--color-pink);
								background-color: #fff;
								font-family: zen-maru-gothic, sans-serif;
								font-weight: 700;
								font-size: 120%;
								width: 6em;
								border-radius: .25em;
								;
								margin: 0 auto;
							}

							.form-response {
								text-align: center;
								margin: .5em 0;
								font-size: 100%;
								color: var(--color-pink);
							}
						}
					}

					section.isec-in {
						h2 {
							opacity: 1;
							top: 0;
						}

						h3 {
							clip-path: inset(0 0 0 0);
						}

						>div {
							opacity: 1;
						}

						>div ul li {
							opacity: 1;
						}
					}
				}
			}

			footer {
				small {
					background-color: var(--color-pink);
					color: #fff;
					font-size: 100%;
					line-height: 1;
					display: block;
					padding: 1em 0;
					text-align: center;
					font-family: futura-100, sans-serif;
					font-weight: 300;
				}
			}
		}
	}
}