@charset "UTF-8";
@charset "UTF-8";

/*---Reset---*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
address,
ul,
ol,
li,
dl,
dt,
dd,
img,
form,
table,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: none;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	text-align: left;
	list-style-type: none;
	border-collapse: collapse;

}

textarea {
	font-size: 100%;
	vertical-align: middle;
}

hr {
	display: none;
}

em {
	font-style: normal
}

input {
	line-height: auto;
	vertical-align: middle;
}

strong.more {
	color: #c30
}

a {
	text-decoration: none;
}

body {
	font-family: 游ゴシック, "Hiragino Kaku Gothic Pro", "sans-serif";
	color: #000;
	line-height: 1.8;
	background: #fff;
	width: 100%;
	font-weight: 400;
	font-size: 1rem;
}

img {
	max-width: 100%;
	height: auto;
	/* 高さを自動で調整 */
	display: block;
	/* 余分なスペースを防ぐ */
}


/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}

*+html .clearfix {
	min-height: 1%;
}

.clearfix {
	display: block;
}

/* End hide from IE-mac */

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

._click:hover {
	cursor: pointer;
	opacity: 0.8;
}

/*--- ページ基本デザイン ---*/
.alert {
	position: relative;
	top: 0;
	z-index: 1;
	background-color: black;
	width: 100%;
	text-align: center;
	padding: 18px;
	color: white;
	font-size: 14px;

}

.alert a {
	text-decoration: underline;
	color: white;
}

.alert a:hover {
	opacity: 0.9;
}


#backToTopBtn {
	display: none;
	/* 最初は非表示 */
	position: fixed;
	/* 固定位置 */
	bottom: 20px;
	/* 下からの位置 */
	right: 30px;
	/* 右からの位置 */
	z-index: 99;
	/* 前面に表示 */

	color: white;
	/* 文字色 */
	border: none;
	/* 枠線なし */
	padding: 15px;
	/* パディング */
	border-radius: 10px;
	/* 角を丸く */
	cursor: pointer;
	/* ポインタを指マークに */
	font-size: 18px;
	/* フォントサイズ */
	background-color: transparent;
	/* 背景なし */
}

#backToTopBtn:hover {
	background-color: transparent;
	/* ホバー時も背景なし */
}

/* .jump {
	position: fixed;
	right: 0;
	bottom: 0;
	height: 3rem;
	line-height: 3rem;
	color: white;
	text-align: center;
	cursor: pointer;
	background-color: black;
	padding: 0 10px;
	transition: all .3s ease;
}

.jump.v-enter,
.jump.v-leave {
	height: 0;
	padding: 0 10px;
	opacity: 0;
} */

#overlay {
	z-index: 998;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
}

.page-top {
	display: none;
	position: fixed;
	bottom: 50px;
	right: 10px;
	padding: 10px;
}

header {
	position: relative;
	width: 100%;
	margin: auto;
	/* background-color: rgba(180, 180, 180, 0.5); */
	background: url(../login/images/bg.png) center center repeat-x;
}



.header-img {
	text-align: center;
}

.header-img img {
	width: 70vw;
	height: auto;
	object-fit: cover;
	z-index: 1000;
	opacity: 1;
}

header nav {
	/* position: relative;
	top: 0;
	margin: auto;
	width: 100%;
	padding: 0 5%;
	background-color: transparent;
	display: flex;
	flex-wrap: wrap;
	padding-top: 15px;
	color: white;
	transition: all .5s ease; */
}

/* header nav a {
	color: white;
}
.motion {
	background-color: rgba(0,0,0,0.8);
	z-index: 2;
	position: fixed;
	top: 0;
	transition: all .5s ease;
}
header nav .logo {
	flex: 25%;
	color: white;
    font-weight: bold;
	font-size: 32px;
}
header nav .logo img {
	vertical-align: middle;
}
header nav .g_nav {
	flex: 50%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	line-height: 50px;
}
header nav .g_nav .menu {
	padding: 0 25px;
	cursor: pointer;
}
header nav .sign {
	flex: 25%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	line-height: 50px;
} */
header nav .sp {
	display: none;
}

header nav .sp_nav {
	position: fixed;
	top: 125px;
	width: 12.5rem;
	background-color: white;
	border-radius: 8px;
}

header nav .sp_nav a {
	color: black;
}

header nav .sp_menu {
	color: black;
	padding: 0 1rem;
}

header nav .sp_signin {
	color: black;
	padding: 0 1rem;
	border-bottom: 1px solid #ccc;
}

header nav .signup {
	margin-right: 20px;
}

header h1.concept {
	width: 90%;
	margin: auto;
	position: absolute;
	top: 250px;
	left: 5%;
	color: white;
	font-size: 64px;
	line-height: 64px;
	font-weight: bold;
}

header.contact {
	position: relative;
	width: 100%;
	min-height: 100%;
	background-image: none;
}

header.contact nav.motion {
	position: relative;
}

section {
	margin: 40px 0 0;

}

.bg_white {
	background-color: white;
	color: black;
}

.bg_black {
	background-color: black;
	color: white;
	padding: 40px 5%;
}

main {
	margin: 5% 0 0px;
}

#main-bg {
	background-size: contain;


}

section h2 {
	font-size: 32px;
	font-weight: bold;
}

section p {
	font-size: 14px;
	font-weight: 400;
	padding: 0 3%;
	line-height: 1.9;
}

.gokui-img {
	text-align: center;
}

.gokui-img img {
	width: 65vw;
	padding: 3% 0;
}

.point-item img {
	padding-bottom: 3%;
}

.tokuten-text {
	font-size: 14px;
	font-weight: 500;
}

.wrapper {
	padding: 0px 3%;
	margin: auto;
	background: url(../images/fu_point_lp/bg-middle.png) center top repeat-y;
	background-size: auto 3000px;
}

.fu-point-img {

	width: 100vw;
	padding-top: 2%;

}

.youtube-text {
	font-size: 1.8rem;
	margin-bottom: -3%;
}

.youtube-thumbnail {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.youtube-thumbnail:hover {
	opacity: 0.8;
	transform: scale(1.03);
}

/* オーバーレイ全体のスタイル */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	/* 黒い半透明の背景 */
	display: none;
	/* 初期状態は非表示 */
	justify-content: center;
	align-items: center;
	z-index: 999;
}

/* ポップアップウィンドウのスタイル */
.window {
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	position: relative;
	max-width: 90%;
	max-height: 90%;
	overflow: auto;
}

.window p {
	text-align: center;
}

/* チェックボックスがチェックされたらオーバーレイを表示 */
input[type="checkbox"]:checked+.overlay {
	display: flex;
	/* チェック時に表示して中央に配置 */
}

/* チェックボックスを非表示 */
input[type="checkbox"] {
	display: none;
}

/* 閉じるボタンのスタイル */
.close {
	cursor: pointer;
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 24px;
	color: black;
	background-color: white;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* はじめに */

.detail-heading_dotted {
	margin: 0 2%;
}

.detail-heading_dotted h3 {

	/* padding: 10px 0 25px; */
	display: inline-block;
	font-weight: bold;
	position: relative;
	font-size: 18px;

}

.detail-heading_dotted h3::before {
	content: "";
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	/* border-bottom: 2px dotted #000; */
}


.detail-heading_circle h4 {
	padding: 0 0 0 18px;
	margin-bottom: 20px;
	font-weight: bold;
	position: relative;
	font-size: 22px;
}

.detail-heading_circle h4::before {
	position: absolute;
	content: "";
	transform: translateY(-50%);
	top: 50%;
	left: 0;
	width: 6px;
	height: 6px;
	border: #333 solid 2px;
	border-radius: 50%;
}


.detail-heading_large h2 {
	padding: 40px 0 20px;
	font-weight: bold;
	font-size: 28px;
}


.list-3 {
	margin: 10px 0 40px 0;
	padding: 0.5em 0.5em 0.5em 2em;
	font-size: 1.3rem;
	font-weight: bold;
}

.list-3 li {
	font-weight: bold;
}

.cafe_intro {
	margin: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.cafe_intro .box {
	padding: 10px 0;
}

.cafe_intro .info {
	display: flex;
	justify-content: flex-start;
}

.cafe_intro .photo {
	width: 64px;
	height: 64px;
}

.cafe_intro .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.cafe_intro .access {
	padding: 5px 15px;
}

.access .area {
	font-weight: bold;
}

.mokuzi-content {

	counter-reset: li;
	font-weight: bold;
	margin: 60px 0 0;
	padding: 60px 14px 16px;
	border-radius: 12px;
	background-color: #f2f0ed;
	border: 2px solid #ccc;
	position: relative;
	line-height: 1.4;
}


.list-item {
	position: relative;
	margin: 0 0 36px 100px;
	font-size: 18px;
}

.list-item::before {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	content: counter(li);
	counter-increment: li;
	margin-right: 5px;
	left: -40px;
	top: 0;
	line-height: 1;
	width: 20px;
	height: 20px;
	font-weight: 700;
	background: #fff;
	border: 2px solid #000;
	border-radius: 20px;
	font-size: 17px;
}

.list-item::after {
	position: absolute;
	content: "";
	left: 0;
	bottom: -12px;
	width: calc((100% + 100px)* 0.5);
	border-bottom: 2px dotted #000;
}

.mokuzi-content .list-item>a {
	font-size: 1rem;
	text-decoration: none;
}

.hazime-text {
	font-size: 14px;
	line-height: 1.8;
}

.mokuzi-content::before {
	content: "目次";
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: calc(50% - 0px);
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 4px 14px;
	border-radius: 4px;
	border: 2px solid #ccc;
	border-radius: 10px;
	font-size: 18px;
}




/* 体験 */
.cafe_local {
	margin: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 15px;
}

.cafe_local .box {
	padding: 10px 0;
}

.cafe_local .info {}

.cafe_local .photo {}

.cafe_local .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.cafe_local .text {
	font-size: 18px;
	font-weight: bold;
}


.goto {
	margin-top: 40px;
	opacity: 0.9;
	position: relative;
}

.goto_text {
	position: absolute;
	top: 50px;
	left: 50px;
	background-color: rgba(255, 255, 255, 0.3);
	padding: 10px;
}

.goto_text h3 {
	font-size: 42px;
	font-weight: bold;
	color: black;
}

.goto_text p {
	font-size: 18px;
	font-weight: 100;
	color: black;
}

/* 体験 */
.cafe_exp {
	margin: 15px auto 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 15px;
}

.cafe_exp .box {
	padding: 10px 0;
}

.cafe_exp .info {}

.cafe_exp .photo {}

.cafe_exp .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.cafe_exp .text {
	font-size: 18px;
	font-weight: bold;
}

.cafe_exp p {
	font-size: 14px;
	font-weight: 100;
}

/* ホスト */
.cafe_host {
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 15px;
}

.cafe_host .box {
	padding: 10px 0;
}

.cafe_host .info {}

.cafe_host .photo {}

.cafe_host .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.cafe_host .text {
	font-size: 18px;
	font-weight: bold;
}

footer {
	border-top: 1px solid #ddd;
	background-color: #f7f7f7;
	margin-top: 5%;
}

footer .outer {
	width: 90%;
	margin: auto;
	font-size: 0.9rem;
}

footer .nav_area {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

footer .inner {
	flex: auto;
}

footer .inner a {
	color: #333;
}

footer .inner h2 {
	font-weight: bold;
}

footer .inner li {
	margin: 1rem 0;
}

footer .reserved {
	color: #333;
}

.reserved>p {
	text-align: center;
}

.contact_box {
	width: 70%;
	margin: 5% auto;
	border-radius: 16px;
	border: 1px solid #ccc;
}

.contact_box form {
	margin: 3%;
}

.contact_box p {
	font-weight: normal;
}

.contact_box .required {
	color: red;
}

.contact_box h2 {
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
	padding: 1rem 0;
	border-bottom: 1px solid #ccc;
}

.contact_box h3 {
	background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eaeaea));
	border-top: 1px solid #666;
	border-bottom: 1px solid #666;
	padding: 1%;
	margin: 1% 0;
}

.contact_box dl {
	margin: 2% 0;
}

.contact_box dd {
	padding: 0.5% 0 1%;
	font-size: 1.2rem;
}

.contact_box dd.error {
	padding: 0;
	color: red;
	font-size: 1rem;
}

.contact_box input {
	width: 100%;
	font-size: 1.2rem;
	padding: 10px 2.5px;
	border-radius: 8px;
	border: 1px solid #aaa;
}

.contact_box textarea {
	resize: none;
	width: 100%;
	height: 33vh;
	font-size: 1.2rem;
	padding: 10px 2.5px;
	border-radius: 8px;
	border: 1px solid #aaa;
}

.contact_box button {
	color: white;
	background-color: rgb(215, 4, 102);
	width: 100%;
	font-size: 1.2rem;
	padding: 10px 2.5px;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.contact_box .confirm dt {
	margin-top: 1rem;
	border-bottom: 1px solid #ccc;
}

.contact_box .confirm dd {
	padding: 1%;
}

.contact_box .confirm dd.confirm_btn {
	padding: 1% 0;
	display: flex;
	justify-content: space-between;

}

.contact_box .confirm dd.confirm_btn button {
	margin-right: 10px;
}

.contact_box .confirm dd.confirm_btn a {
	width: 100%;
	text-align: center;
	line-height: 40px;
	margin-left: 10px;
	background-color: transparent;
	border: 2px solid #066;
	border-radius: 8px;
	cursor: pointer;
	color: #066;
}

.complete_msg {
	padding: 3%;
}

.complete_msg a {
	display: block;
	margin-top: 10px;
	text-decoration: underline;
}




.detail-heading_large h2 {
	padding: 20px 0 20px;
	font-size: 5.46875vw;

}

.list-item {
	margin: 0 0 36px 41px;
	font-size: 13px;
}

.p {
	font-size: 3.6458333333vw;
}

section h2 {
	font-size: 25px;
	font-weight: bold;
}

.mask {
	margin: 0;
}

.mask img {
	width: 100vw;
	padding-top: 2%;
}

.header-img img {
	width: 100vw;
}

.gokui-img img {
	width: 100vw;
}

#backToTopBtn {
	width: 65px;
	bottom: 20px;
	right: 25px;
	padding: 0px;
}

.youtube-text {
	font-size: 1.2rem;
	font-weight: bold;
}

.open {
	pointer-events: none;
	/* クリックイベントを無効化 */
}

.list-3 {
	padding: 0.5em 0.5em 0.5em 1em;
}

.list-item::after {
	width: calc((100% + 225px)* 0.5);

}

.detail-heading_dotted h3 {
	font-weight: 700;
	padding-left: 15px;
	position: relative;
	margin-bottom: 9px;
}

.detail-heading_dotted h3:not(.no-accent)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10%;
	width: 4px;
	height: 80%;
	background: linear-gradient(180deg, #d4af37, #000);

}


.no-accent {
	padding: 0px !important;
}

.pl-0 {
	padding-left: 0;
}

#mokuzi-content-6 .bg {
	background: linear-gradient(180deg, #f1fbf8, #e6f4ef);
}

.fin-text {
	font-weight: 500;
}