/*!
 * Copyright (C) 2025 Fonts free download｜fontopo.
 *      https://fontopo.com/
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@font-face {
	font-family: 'チェックポイントフォント';
	src: url('font/CP Font.woff') format('woff');
}

@font-face {
	font-family: 'ぼくたちのゴシック２ボールド';
	src: url('font/Boku2-Bold.woff') format('woff');
}

.dela-gothic-one-regular {
	font-family: "Dela Gothic One", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.m-plus-rounded-1c-medium {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}




body {
	margin: 0;
	padding: 0;
}

a,a:hover,a:visited {
	color: inherit;
	text_decoration: none;
}

#bg{
	display: flex;
	align-items: stretch;
}

.pace-running #bg {
	display: none;
}

/* -- 左側 -- */
#menuSide{
	background-color: red;
	background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("img/parudo-kutumadekawaii.jpg");
	background-size: cover;
	width: 45%;
	height: 100vh;
	display: flex;
	position: fixed;
	align-items: center;
}

#menuBox {
	display: flex;
	flex-direction: column;
	padding-left: 6rem;
	margin-top: 15vh;
}

#menuBox span {
	display: inline-block;
}

#childMenuBox {
/*	background-color: pink; */
	display: inline-flex;
	margin-left: 3rem;
	margin-top: -1.5rem;
}

.menuStyle {
	font-family: 'チェックポイントフォント';
	font-size: max(4vw, 60px);
	margin: 2.5rem 0;
}

.menuStyle.marker {
  position: relative;
  z-index: 1;
  padding: 0 10px;
}

.menuStyle.marker::before {
  background: #ff701e;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
  z-index: -1;
}

.menuStyle.marker:hover {
  color: #fff;
  cursor: pointer;
}
.menuStyle.marker:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}


.childMenuStyle {
	font-family: 'Dela Gothic One';
	font-size: max(2vw, 33px);
	margin: 0 1rem;
}

.childMenuStyle.marker {
  position: relative;
  z-index: 1;
  padding: 0 10px;
}

.childMenuStyle.marker::before {
  background: #ff701e;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
  z-index: -1;
}

.childMenuStyle.marker:hover {
  color: #fff;
  cursor: pointer;
}
.childMenuStyle.marker:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/* -- 右側 -- */
#pickUpSide {
	width: 55%;
	height: 100vh;
	margin-left: 45%;
	display: flex;
	position: relative;
	flex-direction: column;

}

#pickupmoji {
	margin: 2rem;
	font-family: 'チェックポイントフォント';
	text-align: center;
	font-size: 1.5rem;
}

#pickupmoji span {
	font-size: 2.5rem;
	margin: 0 1rem;
}

#puBox {
	margin: 0 50px 0 20px;
	}

.pick {
	width: 15.5vw;
	min-width: 15rem;
	height: fit-content;
	padding: 0.7rem;
	background-color: #545454;
	border-radius: 36px;
}

.pick img{
	width: 100%;
	border-radius: 30px 30px 0 0;
}

.puline {
	background-color: #bbbeb9;
	width: 100%;
	padding: 0.2rem 0.7rem 0.2rem 0;
	margin-top: -2rem;
	margin-left: -0.7rem;
	position: absolute;
	font-family: 'M PLUS Rounded 1c';
	font-size: 1.7rem;
	color: #545454;
	box-sizing: border-box;
	text-align: right;
}

.puFlavor {
	padding: 0 1.5rem;
	margin: 1.5rem 0;
	color: #eaeae9;
	font-size: 1.2rem;
	font-family: 'M PLUS Rounded 1c';
}

.puFlavor span {
	display: block;
	padding-bottom: 0.5rem;
	font-size: 1.5rem;
	font-family: 'ぼくたちのゴシック２ボールド';
	color: #fff;
}


/* ---- Aboutとか---- */
@keyframes scroll-in-and-unfurl {
	/* アニメーション開始時 (0%) */
	0% {
		/* 右側画面外に配置し、高さ0%にクリップ(＝見えない) */
		transform: translate(50vw, -50%);
		clip-path: inset(0 0 100% 0);
	}

	/* アニメーション中間 (50%) */
	25% {
		/* 中央にスライド移動完了。まだ高さは0%のまま */
		transform: translate(-100%, -50%);
		clip-path: inset(0 0 100% 0);
	}

	/* アニメーション終了時 (100%) */
	100% {
		/* 中央の位置を維持したまま、高さを100%に広げる(巻物を展開) */
		transform: translate(-50%, -50%);
		clip-path: inset(0 0 0 0);
	}
}


.page-content {
	background-color: rgba(255, 255, 255, 0.9);
	color: #000;
	padding: 40px;
	box-sizing: border-box;

	/* 位置の設定 */
	position: fixed; /* 親要素(#pickUpSide)を基準に */
	top: 50%;
	left: 72.5%;
	width: 40%;
	height: 80%;
	z-index: 50;
	overflow-y: auto;

	/* 普段は非表示に */
	visibility: hidden; /*操作不可にする*/
}

/* JavaScriptによってこのクラスが付与されると表示される */
.page-content.active {
	visibility: visible;
	animation: scroll-in-and-unfurl 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;

}


.contentTitle {
	font-family: 'チェックポイントフォント';
	font-size: 2rem;
	text-align: center;
}

.profile {
	margin-top: 3rem;
	font-size: 1.3rem;
}

.profile p {
	font-family: 'Dela Gothic One';
	font-size: 2rem;
}


/*----- お問い合わせフォーム------- --*/
/* style.css */

/* お問い合わせフォームのデザイン */
.form-container {
	max-width: 600px;
	margin: 0 auto; /* フォーム自体を中央に */
	padding: 30px 40px;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 20px;
	color: #333; /* 文字色をダークグレーに */
	text-align: center;
}

.form-container h2 {
	font-family: 'チェックポイントフォント', sans-serif;
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

.form-group {
	margin-bottom: 1.5rem;
	text-align: left;
}

.form-group label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: 'ぼくたちのゴシック２ボールド', sans-serif;
	font-size: 1.1rem;
}

/* 入力欄の共通スタイル */
.form-group input,
.form-group textarea {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 10px;
	background-color: rgba(230, 230, 230, 0.8);
	font-size: 1rem;
	box-sizing: border-box; /* paddingを含めて幅100%にする */
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

/* 送信ボタン */
.form-container button {
	background-color: #ff701e; /* メニューのホバー色と合わせる */
	color: white;
	border: none;
	padding: 15px 40px;
	font-size: 1.2rem;
	font-family: 'ぼくたちのゴシック２ボールド', sans-serif;
	border-radius: 50px; /* 丸みのあるボタン */
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.form-container button:hover {
	background-color: #e65a0b; /* 少し濃い色に */
}

.g-recaptcha {
	margin: 1rem auto;
}

/* -------- お問い合わせフォームここまで -------*/



/* ************
		レスポンシブ
*************** */

@media(max-width: 1200px) {
	/* -- 1200px～600px タブレット&PCでブラウザ縮小用 -- */


	#bg {
		flex-direction: column; /* 全体を縦積みに変更 */
	}

	#menuSide {
		width: 100vw;
		height: 90dvh;
		position: static; /* 固定を解除し、通常の要素として配置 */
		align-items: center;
	}

	#pickUpSide {
		width: 100vw;
		margin-left: 0; /* PC用の左マージンをリセット */
		/* 注: align-items: center と position: relative は削除します */
	}

	#puBox {
		/* align-self: stretch; は不要なため削除します */
	}

	.page-content {
		/* 最も確実な画面固定と中央揃えの方法 */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		/* モバイル向けのサイズ */
		width: 90vw;
		height: 85dvh;

		/* 重なり順と内部スクロールは維持 */
		z-index: 100;
		overflow-y: auto;
	}
}

/*

@media(max-width: 550px) {
	/* -- 600px～　概ねスマホ用 -- 

	#bg {
		display: flex;
		flex-direction: column;
	}

	#menuBox {
		padding-left: 3rem;
	}

	#menuSide {
		width: 100vw;
		height: 90dvh;
		align-items: center;
		position: static;
	}

	.menuStyle {
		font-family: 'チェックポイントフォント';
		font-size: max(4vw, 50px);
		margin: 0.5rem 0;
	}

	#childMenuBox {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.page-content {		
		/* モバイル向けのサイズ 
		width: 80vw;
		height: 75dvh;
	}
}
*/

@media(max-width: 550px) {
	/* -- 550px～　概ねスマホ用、1列表示ライン -- */


	#bg {
		display: flex;
		flex-direction: column;
	}
	#menuBox {
		padding-left: 3rem;
	}

	#menuSide {
		width: 100vw;
		height: 90dvh;
		align-items: center;
		position: static;
	}

	.menuStyle {
		font-family: 'チェックポイントフォント';
		font-size: max(4vw, 50px);
		margin: 1.5rem 0;
	}

	.childMenuStyle {
		font-family: 'Dela Gothic One';
		font-size: max(3vw, 30px);
		margin: 0 1rem;
	}
	#childMenuBox {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#childMenuBox span {
		display: block;
	}

		.page-content {		
		/* モバイル向けのサイズ */
		width: 80vw;
		height: 75dvh;
	}

	.form-container {
		max-width: 600px;
		margin: 0 auto; /* フォーム自体を中央に */
		padding: 5px 5px;
	}

	.form-container h2 {
		font-size: 1rem;
		margin-bottom: 0.5rem;
	}

}