@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

body {
	color: #222222;
	line-height: 2;
	font-size: 14px;
	font-family:Times,Times New Roman,"リュウミン M-KL",Ryumin Medium KL,serif;
	font-weight: 200px;
	background-color: #fafafa;
	letter-spacing: 1px;
}

article, aside, dialog, figure, footer, hgroup, section { 
	display: block;
}

ol, ul {
    list-style-type: none;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}

a {
	text-decoration: none;
	color:#222222;
}

a.link {
	text-decoration: underline;
}

a:hover {
	opacity: 0.8;
}

/* ボタン */
.button {
  display: block;
  width: 300px;
  height: 48px;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  margin-top: 20px;
  font-size: 13px;
  letter-spacing: 2px;
  text-align: center;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button {
  background-color: #fafafa;
  border: 1px solid #333333;
  color: #333333;
  line-height: 50px;
}
.button:hover {
  background-color: #333333;
  border-color: #333333;
  color: #fafafa;
}



/* pc */
	.pc { display: block !important; }
	.sp { display: none !important; }
	
	#main {
		position: relative;
	}
	
	#main .left_col,
	#main header {
		position: absolute;/*絶対配置*/
		color: white;/*文字は白に*/
	}
	
	#main .left_col {
		top: 60px;
		left: 100px;
		z-index: 20;
	}
	
	#main .left_col h1 {
		margin-bottom: 60%;
	}
	
	#main .left_col h2 {
		letter-spacing: 4px;
		font-size: 20px;
	}
	
	#main header {
		top: 80px;
		right: 100px;
		-webkit-writing-mode: vertical-lr;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-lr;
		z-index: 20;
	}
	
	#hero_photo img {
		width: 100%;
		z-index: 10;
	}
	
	header ul li {
		line-height: 1.4;
		margin-left: 40px;
	}
	
	header ul li a {
		color: #fafafa;
		text-shadow:0px 1px 8px #1c1c1c;
	}
	
	header ul li a .jp {
		font-size: 15px;
		letter-spacing: 4px;
	}
	
	header ul li a .en {
		font-size: 13px;
		letter-spacing: 1px;
	}
	
	h2.title {
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		font-size: 30px;
		letter-spacing: 6px;
		line-height: 1.2;
		float: left;
	}
	
	h2 .en {
		font-size: 14px;
		letter-spacing: 2px;
		color: #a0a0a0;
	}
	
	h3.sub_title {
		font-size: 20px;
		margin: 10% 0 6% 0;
		padding-bottom: 20px;
		border-bottom: solid 1px #666666;
	}
	
	h3.sub_title.col_1 {
		margin-top: 0;
	}
	
	h3 .en {
		font-size: 13px;
		letter-spacing: 2px;
	}

	.detail {
		width: 80%;
		margin-bottom: 60px;
	}
	
	.detail .en,
	.detail .jp {
		margin-bottom: 40px;
	}
	
	.writings {
		width: 75%;
		margin: 0 auto;
		float: right;
	}
	
	.photo img {
		width: 100%
	}
	
	#top_event,
	#about,
	#online_shop,
	#contact {
		background-color: #f4f2ed;
	}

	#concept,
	#rental_space {
		background-color: #E5EADF;
	}
	#social_activity {
		background-color: #E5EADF;
	}
		
	#service {
		background-color: #DFE6E8;
	}
	#event_information,
	#access {
		background-color: #fafafa;
	}

	#concept,
	#about,
	#service,
	#online_shop,
    #rental_space,
	#social_activity,
	#event_information,
	#access,
	#contact,
	#organizer,
	#top_event {
		padding: 100px 0 100px 5%;
		overflow: hidden;
	}
	
	#top_event ul li {
		margin-bottom: 10%;
	}
	
	#top_event ul li img {
		width: 100%;
		margin-bottom: 10px;
	}
	
	#top_event ul li .category {
		display: inline-block;
		background-color: #222222;
		color: #fafafa;
		padding: 1px 8px;
		font-size: 12px;
		margin-bottom: 10px;
	}
	
	#about .detail.col_2 {
		margin-bottom: 0;
	}
	
	#about ul {
		overflow: hidden;
	}
	
	#about ul li {
		display: inline-block;
		width: 43%;
	}
	
	#about ul li.left {
		float: left;
	}
	
	#about ul li.right {
		float: right;
	}
	
	#about ul li h4 {
		letter-spacing: 2px;
		margin-top: 20px;
	}
	
	#about ul li .occupation {
		display: inline-block;
		font-size: 12px;
		margin-bottom: 30px;
	}
	
	#about ul li .message {
		font-size: 13px;
	}
	
	#access ul {
		margin-bottom: 60px;
	}
	
	#access ul li {
		border-bottom: 1px solid #222222;
		padding: 20px 0;
		overflow: hidden;
	}
	
	#access ul li:first-child {
		border-top: 1px solid #222222;
	}
	
	#access ul li h3,
	#access ul li .data {
		display: inline-block;
	}
	
	#access ul li h3 {
		float: left;
		width: 25%;
	}
	
	#access ul li .data {
		float: right;
		width: 70%;
	}
	
	
	
	footer {
		text-align: center;
		letter-spacing: 2px;
		margin-bottom: 20px;
	}
	
	/* EVENT */
	
	#event #main #hero_photo {
		background-color: #E5EADF;
	}
	
	#event .photo {
		margin: 30px 0 60px;
	}
	
	#event ul {
		margin-bottom: 60px;
	}
	
	#event ul li {
		border-bottom: 1px solid #222222;
		padding: 8% 0;
		overflow: hidden;
	}
	
	#event ul li:first-child {
		border-top: 1px solid #222222;
	}
	
	#event ul li h3,
	#event ul li .data {
		display: inline-block;
	}
	
	#event ul li h3 {
		float: left;
		width: 25%;
	}
	
	#event ul li .data {
		float: right;
		width: 70%;
	}
	
	#event #organizer ul li .img_profile {
		width: 35%;
		float: left;
	}
	
	#event #organizer ul li .img_profile img {
		width: 100%;
	}
	
	#event #organizer ul li .data {
		width: 60%;
		font-size: 13px;
	}
	
	#event #organizer ul li .data h4 {
		font-size: 16px;
		margin-bottom: 10px;
	}
	
	
	
/* 940px - 751px */
@media only screen and (min-width: 751px) and (max-width:950px) {
	header {
		display: none !important;
	}
	
	#main .left_col h1 {
		margin-bottom: 20%;
	}
}

/* sp */
@media only screen and (max-width: 750px) {
	.pc { display: none !important; }
	.sp { display: block !important; }
	
	body {
		font-size: 16px;
	}
	
	#main .left_col {
		top: 5%;
		left: 5%;
	}
	
	header {
		display: none !important;
	}
	
	.slick-content {
		top: 80%;
		left: 50%;
	}
	
	h2.title {
		float: none;
		writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: horizontal-tb;
		text-align: center;
		margin-bottom: 10%;
	}
	
	.writings {
		float: none;
		width: 100%;
	}
	
	.detail {
		width: 100%;
	}
	
	#concept,
	#about,
	#service,
	#online_shop,
    #rental_space,
	#social_activity,
	#event_information,
	#access,
	#organizer,
	#top_event {
		padding: 20% 5%;
	}
	
	#about ul li {
		float: none;
		width: 100%;
	}
	
	#about ul li.left {
		margin-bottom: 6%;
	}
	
	.button {
		  margin: 20px auto 0;
	}
	
	#event #organizer ul li:first-child {
		border: none;
	}
	
	#event #organizer ul li:nth-of-type(2) {
		border-top: 1px solid #222222;
		border-bottom: 1px solid #222222;
	}
	
	#event #organizer ul li .img_profile,
	#event #organizer ul li .data {
		float: none;
		width: 100%;
	}

}