@charset "UTF-8";
/*------------------------------------*\
	$BASE
\*------------------------------------*/
html {
  font-size: 62.5%
}

body {
	font-size: 1.4rem;
	text-align: center;
	/* color: #989CA0; */
	color: #555555;
	background: #FFFFF8;
	font-family: 'Adobe Garamond Pro', 'Times New Roman', 'EB Garamond', 'Hiragino Mincho Pro', 'ＭＳ ゴシック', 'MS Gothic', monospace;
}

img {
  width: 100%;
}





/*------------------------------------*\
	$COMMON
\*------------------------------------*/
p {
	line-height: 1.8;
}

.section-bg {
	/* margin-left: 100px; */
	/* margin-right: 100px; */
	/* background: rgba(176, 213, 213, 0.5); */
	background: #FFFFF8;
	/* border-radius: 50px; */
	font-family: 'ヒラギノ明朝 Pro W3','Hiragino Mincho Pro';
	/* opacity: 0.9; */
}

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

.section-title {
	/* font-family: 'IM Fell English SC', serif; */
	font-family: 'Tangerine', cursive;
	font-size: 7rem;
	/* color: #FCB2A9; */
	color: #B0D5C0;
	letter-spacing: 10px;
	padding-top: 50px;
	margin-bottom: 30px;
	display: inline-block;
	position: relative;
}

.pc_none {
	display: none;
}

@media only screen and (max-width: 768px) {
	iframe {
		width: 100%;
	}
	.pc_none {
		display: block;
	}
	.wrapper {
		padding: 0 10px;
	}
	.section-title {
		font-size: 9.115vw;
		letter-spacing: 1.302vw;
	}
}





/*------------------------------------*\
	$LAYOUT
\*------------------------------------*/
.bg_video_area + .kv_area {
margin: 5% 0;
}

.profile_area,
.works_area,
.contact_area {
	padding-top: 10%;
}

.profile_area article + article {
	margin-top: 10%;
}





/*------------------------------------*\
	$BG
\*------------------------------------*/
.body_bg {
	position: fixed;
	height: auto;
	z-index: -2;
	width: 100%;
	min-width: 1200px;
	top: 0;
	left: 0;
	opacity: .9;
}
.sp_bg {
	display: none;
}

@media only screen and (max-width: 768px) {
	.body_bg {
		position: fixed;
		right: 0;
		bottom: 0;
		/* min-width: 100%;
		min-height: 100%;
		width: auto;
		height: auto; */
		z-index: -2;
	}

	video {
		display: none;
	}

	.sp_bg {
		display: block;
	}
}

@media only screen and (max-width: 414px)  {
	.body_bg {
		min-width: 700px;
	}
}




/*------------------------------------*\
	$KV
\*------------------------------------*/
.kv_container {
	font-family: 'Tangerine', cursive;
	/* text-align: center; */
}

.kv_container > li {
	visibility: hidden;
}

.kv_container .txt_m {
	color: #FFFFF8;
	font-size: 12rem;
}

.kv_container .txt_s {
	color: #FFFFF8;
	font-size: 6rem;
}

.kv_container .txt_s + .txt_m {
	padding-top: 20px;
}

@media only screen and (max-width: 768px) {
	.kv_container .txt_s {
		font-size: 7.813vw;
	}
	.kv_container .txt_m {
		font-size: 15.625vw;
	}
}





/*------------------------------------*\
	$MENU
\*------------------------------------*/
.menu_area {
	padding: 10px;
	background: rgba(176, 213, 213, 0.5);
	/* background: #B0D5C0; */
	/* position: fixed; */
	width: 100%;
	/* top: 0; */
	/* display: none; */
}

.item_container {
	display: flex;
	justify-content: space-around;
	max-width: 1000px;
	margin: 0 auto;
}

.nav-item--container > li + li{
	margin-left: 100px;
}

.nav_item {
	color: #FFFFF8;
	text-decoration: none;
	font-family: 'IM Fell English SC', serif;
	font-size: 2rem;
	letter-spacing: 2px;
	transition: 0.3s;
}

.nav_item:hover {
	color: rgba(176, 213, 213, 0.5);
}

@media only screen and (max-width: 768px){
	.nav_item {
		font-size: 2.604vw;
	}
}





/*------------------------------------*\
	$INFO
\*------------------------------------*/





/*------------------------------------*\
	$PROFILE
\*------------------------------------*/
.profile_area .contents {
  display: flex;
	justify-content: center;
}

.profile_area .contents .img_box {
  width: 300px;
	margin-right: 5%;
}

.profile_area .contents .txt_box {
	text-align: left;
}

.profile_area .contents .txt_box .title {
 text-align: left;
 font-size: 20px;
 margin-bottom: 2em;
}
.member_name {
	margin-top: 1em;
}

.profile_area .contents_cana {
	text-align: left;
}

.profile_area .contents_cana .txt_box {
	width: 33%;
}

.profile_area .contents_cana .title span {
	font-size: 15px;
}

@media only screen and (max-width: 768px) {
	.profile_area .contents {
		display: block;
	}
	.profile_area .contents .img_box {
		margin: 0 auto;
	}
	.profile_area .contents .txt_box .title {
		text-align: center;
	}
	.profile_area .contents_cana .txt_box {
		width: 100%;
	}
}





/*------------------------------------*\
	$WORKS
\*------------------------------------*/
.contents_works li + li {
	margin-top: 3%;
	border-top: 1px solid #eeeeee;
	padding-top: 3%;
}

.works_unit {
	display: flex;
	justify-content: center;
}

.works_unit .img_box {
	margin-right: 5%;
}

.works_01 .img_box {
		border: 1px solid #eeeeee;
}

.works_unit .txt_box {
	width: 33%;
	text-align: left;
}

.works_unit .title {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 1em;
}

.works_unit .date {
	margin-bottom: 1em;
}

.works_unit .sub-title {
	margin-bottom: 1em;
}

.works_area .video_container {
	margin-top: 3%;
}

@media only screen and (max-width: 768px) {
	.works_unit {
		display: block;
	}
	.works_unit .img_box {
		max-width: 50%;
		margin: 0 auto;
		margin-bottom: 10%;
	}
	.works_unit .txt_box {
		width: 100%;
	}
	.contents_works li + li {
		margin-top: 10%;
		padding-top: 10%;
	}
}





/*------------------------------------*\
	$CONTACT
\*------------------------------------*/
.contact_area {
	padding-bottom: 10%;
}

.contact_area .list {
	display: flex;
	justify-content: center;
}

.contact_area .list li + li {
	margin-left: 5%;
}

.contact_area .list li a {
	text-decoration: underline;
}

.contact_area .list li a:hover {
	text-decoration: none;
	opacity: .6;
}

@media only screen and (max-width: 768px) {
	.contact_area .list {
		display: block;
	}
	.contact_area .list li + li {
		margin-left: 0;
		margin-top: 1em;
	}
}





/*------------------------------------*\
	$FOOTER
\*------------------------------------*/
.footer {
	height: 500px;
	/* background: rgba(176, 213, 213, 0.5); */
	margin-top: 500px;
}

.arrow_top {
	width: 50px;
	height: 50px;
	background: rgba(176, 213, 213);
	transition: 0.7s;
	margin: 0 auto;
	position: fixed;
	right: 20px;
	border-radius: 50%;
}

.arrow_top::before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	border-top: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	right: 0;
	left: 0;
	top: 5px;
	bottom: 0;
	margin: auto;
	transform: rotate(-45deg);
	transform-origin: center;
}

small {
	color: #ffffff;
}

@media only screen and (max-width: 1400px) {
	small {
		color: #333333;
	}
}

@media only screen and (max-width: 768px) {
	.footer {
		height: 400px;
	}
	small {
		color: #ffffff;
	}
}





/*------------------------------------*\
	for tsubamecaffe.html
\*------------------------------------*/
.announce {
	margin-top: 20%;
	font-size: 1.6rem;
}

.announce a {
	text-decoration: underline;
}

.announce a:hover {
	text-decoration: none;
	opacity: .7;
}