@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: 500;
	font-size: 18px;
}




/* 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;
	margin: auto;
}

.header-img img {
	width: 100vw;
	height: auto;
	object-fit: cover;
	z-index: 1000;
	max-width: 1200px;
	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;
	/* padding: 0 5%; */
}

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

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


#main-bg {
	background-size: contain;


}

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

section p {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;

}

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

.gokui-img img {
	/* width: 35vw; */
	width: 100%;
}

.wrapper {
	margin: auto;

	padding: 20px 0px 60px;
	max-width: 1200px;
}

.bg-star {
	background: url(../images/fu_point_lp/bg-middle.png) center top repeat-y;
	background-size: auto 3000px;
}

.fu-point-img {
	/* width: 20vw!important; */

}

.tokuten-text {
	padding: 2% 0 3%;
}

.mokuzi-text {
	/* max-width: 980px; */
	/* margin: 48px auto 80px; */
	    padding: 40px 25px;

	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	border-radius: 24px;
	border: 1px solid rgba(255, 255, 255, 0.6);

	color: #222;
	line-height: 2;
	font-size: 1.22rem;
}

.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;
}

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

.mask img {
	width: 20vw;
}


/* はじめに */

.detail-heading_dotted h3 {

	padding: 10px 0 12px;
	display: inline-block;
	font-weight: bold;
	position: relative;
	font-size: 22px;

}

.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: 80px 0 0px 0;
	padding: 60px 14px 16px;
	border-radius: 12px;
	background-color: #f2f0ed;
	border: 2px solid #ccc;
	position: relative;
}


.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: -50px;
	top: 15px;
	line-height: 1;
	width: 26px;
	height: 26px;
	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% + 900px)* 0.5);
	border-bottom: 2px dotted #000;
}

.mokuzi-content .list-item>a {
	font-size: 1.5rem;
}

.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: 22px;
}




/* 体験 */
.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;
}

body {
	background: #f5f6f8;
}

.wrapper {}

.bg_white {
	background: transparent;
}

section>div[id^="mokuzi-content"] {
	background: #fff;
	border-radius: 16px;
	/* padding: 40px; */
	/* margin-bottom: 60px; */
	/* box-shadow: 0 10px 30px rgba(0,0,0,0.06); */
}

.detail-heading_dotted h3 {
	font-size: 24px;
	font-weight: 700;
	padding-left: 16px;
	position: relative;
}

.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);
}


.detail-heading_dotted h3::after {
	display: none;
}

.mokuzi-content {
	background: #fff;
	border: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.mokuzi-content .list-item a {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	transition: all .2s ease;
}

.mokuzi-content .list-item a:hover {
	background: #f0f4ff;
	transform: translateX(4px);
}

.gokui-img img,
.fu-point-img {
	border-radius: 16px;
	/* box-shadow: 0 10px 30px rgba(0,0,0,0.12); */
}

/* #mokuzi-content-6 .bg {
    background: linear-gradient(180deg, #f6f4ef, #ebe6dc);
padding: 40px;
} */

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

#mokuzi-content-6 h3 {
	color: #000;
}

#mokuzi-content-6 p {
	color: #000;
	font-weight: 500;
}


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

.margin-bottom-5 {
	margin-bottom: 4%;
}
.fw-500 {
	font-weight: 500;
}