@charset "UTF-8";

body {
	-webkit-animation: fadein 3s forwards;
	animation: fadein 3s forwards;
	font-family: "Acme", sans-serif;
	overflow-y: hidden;
}

@-webkit-keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 100%;
	}
}

@keyframes fadein {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 100%;
	}
}

a {
	color: #333;
	text-decoration: underline;
	transition: all .3s;
}

a:hover {
	opacity: .7;
}

.section-title {
	font-size: 40px;
	font-size: 2.5rem;
	font-weight: bold;
	padding: 24px 24px 24px 0;
}

@media (max-width: 768px) {
	.section-title {
		font-size: 32px;
		font-size: 2rem;
		text-align: center;
	}
}

.contentwrap {
	background: rgba(0, 0, 0, .9);
	color: #e8e8e8;
	width: 100%;
}

.contentwrap .section-title {
	color: #fcfcfc;
	margin-bottom: 16px;
}

.contentwrap-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 24px;
}

@media screen and (max-width: 600px) {
	.contentwrap-inner {
		display: flex;
		flex-direction: column;
	}
}

.contentwrap-top {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
}

@media (max-width: 768px) {
	.contentwrap-top {
		display: flex;
		flex-direction: column;
	}
}

.sp-header {
	display: none;
}

.pc-header {
	background: rgba(0, 0, 0, .7);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
	z-index: 100;
}

.pc-header__nav {
	display: flex;
	height: 48px;
	justify-content: center;
	line-height: 48px;
}

.pc-header__list {
	margin: 0 32px 0 32px;
}

.pc-header__list a {
	color: #f5f5f5;
	position: relative;
	text-decoration: none;
}

.pc-header__list a::after {
	background: #f5f5f5;
	bottom: -4px;
	content: "";
	height: .1rem;
	left: 0;
	position: absolute;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform .3s;
	width: 100%;
}

.pc-header__list a:hover::after {
	transform: scale(1, 1);
}

@media (max-width: 768px) {
	.pc-header {
		display: none;
	}

	.sp-header {
		display: block;
	}

	.drawer {
		height: 100vh;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 100;
	}

	#drawer-btn {
		cursor: pointer;
		height: 40px;
		position: fixed;
		transition: .3s;
		width: 100%;
		z-index: 120;
	}

	#drawer-btn span {
		background-color: #c2c1c1;
		border-radius: 2px;
		height: 3px;
		position: fixed;
		right: 10%;
		transition: all .5s;
		width: 45px;
	}

	#drawer-btn span:nth-of-type(1) {
		top: 9px;
	}

	#drawer-btn span:nth-of-type(2) {
		top: 18px;
	}

	#drawer-btn span:nth-of-type(3) {
		top: 27px;
	}

	/* 最初のspanをマイナス45度に */
	#drawer-btn.open span:nth-child(1) {
		top: 18px;
		transform: rotate(-45deg);
	}

	/* 2番目と3番目のspanを45度に */
	#drawer-btn.open span:nth-child(2) , #drawer-btn.open span:nth-child(3) {
		top: 18px;
		transform: rotate(45deg);
	}

	#drawer-menu {
		background: rgba(0, 0, 0, .5);
		display: none;
		height: 100vh;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
	}

	#drawer-menu .drawer-menu__hidden {
		cursor: pointer;
		height: calc(100% / 7);
		width: 100%;
		z-index: 110;
	}

	#drawer-menu .drawer-menu__hidden a {
		color: #f5f5f5;
		display: inline-block;
		left: 50%;
		padding-top: 30px;
		position: absolute;
		text-align: center;
		text-decoration: none;
		transform: translateX(-50%);
		width: 30%;
	}
}

body {
	overflow: auto;
}

body.open {
	overflow: hidden;
}

/* スクロール誘導 アニメーション設定 */
.arrowWrap {
	bottom: 0;
	height: 200px;
	position: absolute;
	right: 0;
}

.arrowInner p {
	color: #f5f5f5;
	font-size: 14px;
	font-size: .875rem;
	text-align: end;
	transform: rotate(90deg);
}

.arrow {
	background-color: #0a0a0a;
	height: 100px;
	margin: 50px auto 0;
	overflow: hidden;
	position: relative;
	width: 1px;
}

.arrow::before {
	-webkit-animation: arrow 2.5s ease 0s infinite normal;
	animation: arrow 2.5s ease 0s infinite normal;
	background-color: #f5f5f5;
	content: "";
	height: 100px;
	left: 0;
	margin: 50px auto 0;
	position: absolute;
	top: -150px;
	width: 3px;
}

@-webkit-keyframes arrow {
	0% {
		transform: translate3d(-50%, 0, 0);
	}

	60% {
		transform: translate3d(-50%, 100px, 0);
	}

	100% {
		transform: translate3d(-50%, 100px, 0);
	}
}

@keyframes arrow {
	0% {
		transform: translate3d(-50%, 0, 0);
	}

	60% {
		transform: translate3d(-50%, 100px, 0);
	}

	100% {
		transform: translate3d(-50%, 100px, 0);
	}
}

body::before {
	background-image: url(../img/selfphoto1.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	display: block;
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	transform: translateZ(0);
	width: 100%;
	z-index: -1;
}

.profile {
	color: #e8e8e8;
}

.profile .section-title {
	color: #fcfcfc;
}

.profile-name {
	background: rgba(0, 0, 0, .3);
	margin-left: auto;
	position: absolute;
	right: 5%;
	text-align: center;
	top: 20%;
	white-space: pre-line;
	width: 40vw;
}

@media (max-width: 768px) {
	.profile-name {
		border-radius: 0;
		position: absolute;
		right: 0;
		top: 15%;
		width: 100%;
	}
}

.profile-name__inner {
	font-size: 2.5vw;
	letter-spacing: 8px;
	line-height: 2;
	width: 100%;
}

@media (max-width: 768px) {
	.profile-name__inner {
		font-size: 20px;
	}
}

.profile-text .section-title {
	text-align: center;
}

.profile-text p {
	padding-bottom: 2em;
}

@media (min-width: 769px) {
	.profile-text {
		display: flex;
		flex-direction: row-reverse;
		padding: 100vh 16px 128px 16px;
	}
}

@media (max-width: 768px) {
	.profile-text {
		display: block;
		margin: 0 auto;
		padding-top: 100vh;
		width: 100%;
	}
}

@media (min-width: 769px) {
	.profile-text .profile-text__about {
		background: rgba(0, 0, 0, .3);
		letter-spacing: 3px;
		line-height: 1.5;
		padding: 16px;
		width: 50%;
	}

	.profile-text .profile-text__about .profile-text__about--link a {
		color: #9ebcf5;
		text-decoration: underline;
	}
}

@media (max-width: 768px) {
	.profile-text .profile-text__about {
		background: rgba(0, 0, 0, .3);
		line-height: 1.5;
		padding: 0 16px 32px;
	}

	.profile-text .profile-text__about .profile-text__about--link a {
		color: #9ebcf5;
		text-decoration: underline;
	}
}

/* 下層ページ */
@media (min-width: 769px) {
	.profile-text--lower {
		background: rgba(0, 0, 0, .3);
		line-height: 1.5em;
		padding: 50vh 32px 32px 32px;
	}
}

@media (max-width: 768px) {
	.profile-text--lower {
		background: rgba(0, 0, 0, .3);
		line-height: 1.5em;
		padding: 80px 8px;
	}
}

@media (min-width: 769px) {
	.profile-text--lower .profile-text__about {
		letter-spacing: 3px;
		line-height: 1.5;
		width: 50%;
	}
}

@media (max-width: 768px) {
	.profile-text--lower .profile-text__about {
		background: rgba(0, 0, 0, .3);
		line-height: 1.5;
		padding: 0 16px 32px;
	}
}

.profile-text--lower p {
	padding-bottom: 2em;
}

.profile-text__about-detail {
	margin-top: 16px;
	text-align: center;
}

.profile-text__about-detail a {
	color: #9ebcf5;
}

.profile-text__about--last {
	margin-top: 16px;
	text-align: center;
}

.profile-text__about--last a {
	color: #9ebcf5;
}

.slideimg {
	background: rgba(0, 0, 0, .9);
	padding: 40px 0;
	width: 100%;
}

/* 全体のスタイル */
.swiper-wrapper {
	height: 320px;
	width: 100%;
}

@media (max-width: 768px) {
	.swiper-wrapper {
		height: 240px;
	}
}

/* 全スライド共通スタイル */
.swiper-slide {
	color: rgba(0, 0, 0, 0);
	height: 100%;
	line-height: 320px;
	text-align: center;
	width: 100%;
}

@media (max-width: 768px) {
	.swiper-slide {
		line-height: 240px;
	}
}

.swiper-slide:nth-child(1) {
	background-image: url(../img/selfslide2.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.swiper-slide:nth-child(2) {
	background-image: url(../img/selfslide3.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.swiper-slide:nth-child(3) {
	background-image: url(../img/selfslide5.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.news {
	background: rgba(254, 254, 254, .95);
	padding: 48px 32px;
	width: 100%;
}

@media (max-width: 768px) {
	.news {
		padding: 32px 16px;
	}

	.news .news__cap {
		height: 300px;
		margin: 2em auto;
		max-width: 100%;
	}

	.news .news__cap img {
		font-family: "object-fit: cover;";
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		width: 100%;
		/*IE対策*/
	}

	.news__cap--contain {
		flex-basis: 400px;
		height: 300px;
		margin: 2em 0;
	}

	.news__cap--contain img {
		height: 100%;
		-o-object-fit: contain;
		object-fit: contain !important;
		width: 100%;
	}
}

@media (min-width: 769px) {
	.news .news__flex {
		align-items: center;
		display: flex;
	}

	.news .news__text-wrap {
		flex-basis: 600px;
	}

	.news .news__cap {
		flex-basis: 400px;
		height: 300px;
		margin: 2em 2em 2em 0;
	}

	.news .news__cap img {
		font-family: "object-fit: cover;";
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		width: 100%;
		/*IE対策*/
	}

	.news__cap--contain {
		flex-basis: 400px;
		height: 300px;
		margin: 2em 2em 2em 0;
	}

	.news__cap--contain img {
		height: 100%;
		-o-object-fit: contain;
		object-fit: contain !important;
		width: 100%;
	}
}

.news .td-place {
	font-size: 14px;
	font-size: .875rem;
}

.news .td-join {
	font-size: 14px;
	font-size: .875rem;
}

.news table {
	width: 100%;
}

@media (min-width: 769px) {
	.news table tr {
		border-bottom: 3px solid #333;
	}

	.news table th {
		padding: 16px;
	}

	.news table td {
		line-height: 1.5;
		padding: 16px;
	}

	.news table .td-event {
		width: 50%;
	}
}

@media (min-width: 769px) {
	.news table .td-place::before {
		content: "［place］";
	}
}

@media (max-width: 768px) {
	.news table .td-time {
		border-bottom: 3px solid #333;
		border-top: 3px solid #333;
	}

	.news table th {
		display: none;
	}

	.news table td {
		display: block;
		line-height: 1.5;
		width: 100%;
	}

	.news table .td-event-title {
		display: inline-block;
		padding-bottom: 16px;
	}

	.news table .td-place {
		display: inline-block;
		padding-bottom: 16px;
	}

	.news table .td-join {
		display: block;
		margin-bottom: 24px;
	}

	.news table .td-event::before {
		content: "events:";
		display: block;
	}

	.news table .td-place::before {
		content: "place:";
		display: block;
	}

	.news table .td-join::before {
		content: "join:";
		display: block;
	}
}

.news-wrap {
	margin: 0 auto;
	max-width: 1200px;
}

.news__text {
	border-bottom: 2px solid #504f4f;
	color: #454545;
	line-height: 1.5;
	padding: 32px 0;
}

.news-dt {
	margin-bottom: 16px;
}

.news__text-content {
	margin: 0 1em .5em 0;
	word-wrap: break-word;
}

.news__text-content--bold {
	font-weight: bold;
}

.news__text-content a {
	color: #454545;
}

.hp_gap {
	margin-top: 1.5em;
}

.news__box {
	background-color: rgba(12, 12, 12, .1);
	border: 2px solid #504f4f;
	border-radius: 5px;
	margin: 40px 5px 5px 20px;
	padding: 10px 20px 20px 20px;
	position: relative;
}

.news__box::before {
	background-color: #333;
	border-radius: 5px;
	color: #fff;
	content: "Dr.Tosh / 永井利充より";
	left: -10px;
	padding: 5px 20px;
	position: absolute;
	top: -20px;
}

.news__box-text {
	line-height: 1.8;
	white-space: pre-line;
}

.news__past {
	margin-top: 24px;
	text-align: center;
}

.live {
	align-items: center;
	background: rgba(0, 0, 0, .9);
	display: flex;
	height: 440px;
	overflow: hidden;
}

.live-visual {
	display: flex;
	height: 400px;
	width: 400px;
}

.slideshow {
	-webkit-animation: infinity-loop 30s infinite linear 1s both;
	animation: infinity-loop 30s infinite linear 1s both;
	display: flex;
	/* 無限ループアニメーションの設定 */
}

@media (min-width: 769px) {
	.slideshow img {
		border: 5px double #f6f6f6;
		height: 400px;
		-o-object-fit: cover;
		object-fit: cover;
		width: 400px;
	}
}

@media (max-width: 768px) {
	.live {
		background: rgba(0, 0, 0, .9);
		height: 300px;
	}

	.live-visual {
		align-items: center;
		display: flex;
		height: 240px;
		width: 240px;
	}

	.slideshow img {
		border: 5px double #f6f6f6;
		-o-object-fit: cover;
		object-fit: cover;
	}
}

@media (max-width: 768px) and (max-width: 768px) {
	.slideshow img {
		height: 240px;
		width: 240px;
	}
}

/* 無限ループアニメーション */
@-webkit-keyframes infinity-loop {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

@keyframes infinity-loop {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

.sale {
	color: #e8e8e8;
	padding: 48px 24px 80px;
	width: 50%;
}

.sale a {
	color: #e8e8e8;
	text-decoration: underline;
}

@media (max-width: 768px) {
	.sale {
		border-right: 1px solid #e8e8e8;
		padding: 24px 16px 56px;
		width: 100%;
	}
}

.sale-subtitle {
	margin-bottom: 16px;
}

@media (max-width: 768px) {
	.sale-subtitle {
		text-align: center;
	}
}

.sale-subtitle::before , .sale-subtitle::after {
	content: "-";
	padding-right: 4px;
}

.sale-logo {
	width: 50%;
}

@media (max-width: 768px) {
	.sale-logo {
		margin: 0 auto;
	}
}

.sale-logo a img {
	transition: all .5s;
	width: 100%;
}

@media (max-width: 768px) {
	.sale-logo {
		width: 70%;
	}

	.sale-logo a img {
		width: 100%;
	}
}

.sale-logo a img:hover {
	opacity: .8;
}

.sale-text {
	line-height: 1.3em;
	margin-top: 16px;
	padding: 16px 0;
}

@media (max-width: 768px) {
	.sale-link {
		font-size: 14px;
		font-size: .875rem;
	}
}

.sale-link::before {
	content: ">";
	padding-right: 4px;
}

.talk {
	border-left: 1px solid #e8e8e8;
	color: #e8e8e8;
	padding: 48px 24px 80px;
	width: 50%;
}

.talk a {
	color: #e8e8e8;
	text-decoration: underline;
}

@media (max-width: 768px) {
	.talk {
		border-top: 1px solid #e8e8e8;
		padding: 24px 8px;
		width: 100%;
	}
}

.talk-about {
	margin-bottom: 32px;
}

.talk-title {
	font-size: 24px;
	font-size: 1.5rem;
	font-weight: bold;
	padding: 24px;
	text-align: center;
}

.talk-heading {
	cursor: pointer;
	display: inline-block;
	padding: 16px;
	text-align: left;
	text-decoration: underline;
}

.talk-heading::before {
	content: "\f130";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 10px;
}

.talk-content {
	margin-bottom: 32px;
}

.talk-contents {
	background: #f7f7f7;
	border-radius: 20px;
	color: #333;
	line-height: 1.5em;
	margin: 0 auto;
	padding: 32px;
	position: relative;
	width: 80%;
}

.talk-contents::after {
	border: 16px solid transparent;
	border-right: 40px solid #f7f7f7;
	content: "";
	display: inline-block;
	left: -40px;
	position: absolute;
	top: -8px;
	transform: rotate(30deg);
}

.talk-contents p {
	margin-bottom: 1em;
}

.talk-contents__pre {
	white-space: pre-line;
	width: 100%;
}

.talk-close {
	display: flex;
	justify-content: center;
	margin: 32px auto 16px;
	width: 50%;
}

.talk-close__btn {
	background: rgba(255, 255, 255, .9);
	border: none;
	border-radius: 10%;
	color: #333;
	cursor: pointer;
	padding: 8px 16px;
	width: 100%;
}

@media (max-width: 768px) {
	.talk-heading {
		text-align: left;
	}

	.talk-contents {
		width: 90%;
	}
}

.talk-content__underlayer {
	background-color: rgba(0, 0, 0, .6);
	padding: 80px 8px;
}

.talk-content__underlayer-inner {
	margin: 0 auto;
	max-width: 800px;
}

.talk-heading__underlaye {
	color: #eaeaea;
	font-size: 30px;
	font-size: 1.875rem;
	text-decoration: none;
}

.talk-about__underlaye {
	color: #eaeaea;
	padding-left: 32px;
}

.talk-link__underlaye-top {
	color: #eaeaea;
	margin-top: 32px;
	text-align: center;
}

.talk-link__underlaye-top a {
	color: #eaeaea;
	font-size: 20px;
	font-size: 1.25rem;
}

@media (max-width: 768px) {
	.talk-heading__underlaye {
		font-size: 24px;
		font-size: 1.5rem;
	}

	.talk-about__underlaye {
		padding-left: 16px;
	}

	.talk-link__underlaye-top a {
		font-size: 16px;
		font-size: 1rem;
	}
}

.active {
	border-top: 1px solid #e8e8e8;
	margin-bottom: 80px;
	max-width: 1200px;
	padding: 48px 24px;
	width: 100%;
}

.active .section-title {
	text-align: center;
}

@media (max-width: 768px) {
	.active {
		padding: 0 0 24px 0;
		position: relative;
	}

	.active::before {
		background-color: #e8e8e8;
		content: "";
		display: inline-block;
		height: 30%;
		position: absolute;
		right: 0;
		top: 0;
		width: 1px;
	}
}

.iframe {
	height: calc(40vw * .5625);
	max-height: calc(500px * .5625);
	max-width: 500px;
	width: 40vw;
}

.iframe iframe {
	border: 1px solid #4f4f4f;
	height: 100%;
	margin-top: 20px;
	width: 100%;
}

@media (max-width: 768px) {
	.iframe {
		height: calc(85vw * .5625);
		margin: 0 auto;
		width: 85vw;
	}

	.iframe iframe {
		border: 1px solid #4f4f4f;
		height: 100%;
		width: 100%;
	}
}

.active-inner {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
}

@media (max-width: 768px) {
	.active-inner {
		display: flex;
		flex-direction: column;
	}
}

.active-content {
	margin-bottom: 80px;
	text-align: center;
}

.active-content p {
	padding-bottom: 10px;
}

.active-content a {
	color: #e8e8e8;
}

.social-name {
	margin-bottom: 16px;
}

.social-wrap {
	display: flex;
	justify-content: space-around;
	margin: 0 auto;
	width: 50%;
}

@media (max-width: 768px) {
	.social-wrap {
		margin: 0 auto;
		width: 80%;
	}
}

.footer {
	position: relative;
}

.logo-wrap {
	background-image: url(../img/Beard.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100vh;
}

@media (min-width: 769px) {
	.logo-speech {
		position: absolute;
		right: 5%;
		top: 10%;
	}

	.logo-speech img {
		width: 300px;
	}

	.logo-speech p {
		line-height: 32px;
		position: absolute;
		right: 30%;
		top: 28%;
	}
}

@media (min-width: 451px) and (max-width: 768px) {
	.logo-speech {
		position: absolute;
		right: 0;
		top: 10%;
	}

	.logo-speech img {
		width: 250px;
	}

	.logo-speech p {
		line-height: 20px;
		position: absolute;
		right: 30%;
		top: 30%;
	}
}

@media (min-width: 401px) and (max-width: 450px) {
	.logo-speech {
		position: absolute;
		right: 0;
		top: 10%;
	}

	.logo-speech img {
		width: 200px;
	}

	.logo-speech p {
		line-height: 20px;
		position: absolute;
		right: 20%;
		top: 25%;
	}
}

@media (max-width: 400px) {
	.logo-speech {
		position: absolute;
		right: 0;
		top: 10%;
	}

	.logo-speech img {
		width: 180px;
	}

	.logo-speech p {
		line-height: 20px;
		position: absolute;
		right: 20%;
		top: 25%;
	}
}

.footer-area {
	background-color: rgba(0, 0, 0, .4);
	color: #f5f5f5;
	height: 240px;
	position: absolute;
	text-align: center;
	top: calc(100vh - 240px);
	width: 100%;
}

@media (max-width: 768px) {
	.footer-area {
		height: 200px;
		position: absolute;
		top: calc(100vh - 200px);
	}
}

.footer-area .footer-text {
	padding-top: 24px;
}

.footer-area .footer-text__title {
	font-size: 24px;
	font-size: 1.5rem;
	padding: 8px 0;
}

.footer-area .footer-text__about {
	letter-spacing: 2px;
	line-height: 1;
	padding-top: 8px;
	text-align: left;
}

.footer-area .footer-text a {
	color: #f5f5f5;
	text-decoration: underline;
}

.footer-area .footer-copy {
	bottom: 10%;
	left: 50%;
	position: absolute;
	transform: translate(-50%);
	width: 100%;
}

.footer-area__inner {
	align-items: flex-start;
	display: flex;
	justify-content: space-around;
	margin: 0 auto;
	max-width: 500px;
	padding: 0 16px;
}

@media screen and (min-width: 600px) and (max-width: 767px) {
	.footer-area__inner {
		width: 70%;
	}
}

@media screen and (max-width: 599px) {
	.footer-area__inner {
		width: 100%;
	}
}

.footer-area__past {
	background-color: rgba(0, 0, 0, .8);
	color: #f5f5f5;
	height: 240px;
	position: relative;
	text-align: center;
	width: 100%;
}

@media (max-width: 768px) {
	.footer-area__past {
		height: 200px;
	}
}

.footer-area__past .footer-text {
	padding-top: 16px;
}

.footer-area__past .footer-text__title {
	font-size: 24px;
	font-size: 1.5rem;
}

.footer-area__past .footer-text__about {
	letter-spacing: 2px;
	line-height: 1;
	padding-top: 8px;
}

.footer-area__past .footer-text a {
	color: #f5f5f5;
	text-decoration: underline;
}

.footer-area__past .footer-copy {
	bottom: 10%;
	left: 50%;
	position: absolute;
	transform: translate(-50%);
	width: 100%;
}

.contact {
	padding-top: 24px;
	text-align: center;
}

.contact a {
	color: #f5f5f5;
}