@charset 'UTF-8';

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

	トップページ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ================================================================================

	レイアウト

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		/* max-width: none; */
		max-width: 1920px;
		width: 100%;
		min-height: 50vh;
		display: block;
		margin: 0 auto;
	}

	.inner_wrap {
		position: relative;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		width: 100%;
	}

	.inner_wrap {
		position: relative;
	}
}





/* ================================================================================

	メイン画像

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.main_top {
		position: relative;
	}
	.main_top_in {
		position: relative;
	}
	.main_top_text {
		font-size: 1.6em;
		color: #fff;
		position: absolute;
		left: 5.25em; 
		bottom: 2.75em;
		font-weight: 500;
		text-shadow: 1px 1px 8px rgb(73, 73, 73);
	}
	.main_top_in:after {
		content: "";
		width: 26.5em;
		height: 7.5em;
		display: block;
		background: url(../img/mv-text.png) center top / contain no-repeat;
		position: absolute;
		left: 7.25em;
		bottom: 5.5em;
	}
	.metaslider::before {
		content: "";
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 0;
		height: 0;
		border-bottom: 145px solid transparent;
  		border-left: 145px solid #fff;
		transform: rotate(-90deg);
		z-index: 10;
	}
	.metaslider::after {
		content: "";
		position: absolute;
		top: 0px;
		right: 0px;
		width: 0;
		height: 0;
		border-bottom: 145px solid transparent;
  		border-left: 145px solid #fff;
		transform: rotate(90deg);
		z-index: 10;
	}
	.scroll_icon {
		text-align: center;
		margin-top: 20px;
	}
	.scroll_icon img{
		width: 60px;
		height: 60px;
	}
	.scroll_icon p {
		font-weight: 600;
		font-size: 12px;
		margin-top: 0;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.main_top {
		position: relative;
	}
	.main_top_in {
		position: relative;
	}
	.main_top_text {
		font-size: 1.6em; /* キャッチコピー 24px*/
		font-weight: 500;
		color: #fff;
		position: absolute;
		left: 5%; 
		bottom: 5%;
		text-shadow: 1px 1px 8px rgb(73, 73, 73);
	}
	.main_top_in:after {
		content: "";
		width: 12.5em;
   		height: 5.5em;
		display: block;
		background: url(../img/mv-text.png) center top / contain no-repeat;
		position: absolute;
		left: 5%; 
		bottom: 16%;
	}
	.metaslider::before {
		content: "";
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 0;
		height: 0;
		border-bottom: 80px solid transparent;
  		border-left: 80px solid #fff;
		transform: rotate(-90deg);
		z-index: 10;
	}
	.metaslider::after {
		content: "";
		position: absolute;
		top: 0px;
		right: 0px;
		width: 0;
		height: 0;
		border-bottom: 80px solid transparent;
  		border-left: 80px solid #fff;
		transform: rotate(90deg);
		z-index: 10;
	}
	.scroll_icon {
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.scroll_icon img{
		width: 45px;
		height: 45px;
	}
	.scroll_icon p {
		font-weight: 600;
		font-size: 12px;
		margin-top: 0;
	}
}





/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	ここからコンテンツ内容

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ================================================================================

	コンセプト

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	/*右側テキスト*/
	.top_concept {
		margin-top: 120px;
		margin-bottom: 200px;
	}
	.top_concept .title {
		margin-bottom: 1.7em;
	}
	.top_concept-jp {
		font-size: 1.3em;
	}
	.top_concept-text {
		margin-top: 20px;
		margin-bottom: 50px !important;
	}

	/*左側画像*/
	.top_concept.img {
		margin-right: 70px;
		position: relative;
	}
	.img::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #404040;
		transform: rotate(-5deg);
		position: absolute;
		top: 0;
		z-index: -1;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.top_concept {
		margin-top: 40px;
		margin-bottom: 60px;
		padding: 0 20px;
	}
	.top_concept .title {
		margin-bottom: 0.6em;
	}
	.top_concept-jp {
		font-size: 1.5em;
	}
	.top_concept-text {
		margin-top: 20px;
		margin-bottom: 20px !important;
	}

	/*左側画像*/
	.top_concept.img {
		margin-right: 0px;
		position: relative;
	}
	.img::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #404040;
		transform: rotate(-5deg);
		position: absolute;
		top: 0;
		z-index: -1;
	}
}





/* ================================================================================

	メニュー

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.top_menu1 {
		margin-bottom: 60px;
	}
	.top_menu2 {
		margin-bottom: 200px;
	}
	.top_menu2 > div > div{
		align-items: flex-end;
	}
	.menu_flex1 {
		flex-basis: 15%;
	}
	.menu_flex2 {
		flex-basis: 38%;
	}
	.menu_flex3 {
		flex-basis: 38%;
	}
	.menu_flex4 {
		flex-basis: 38%;
	}
	.menu_flex5 {
		flex-basis: 38%;
	}
	.menu_flex6 {
		flex-basis: 20%;
	}

	.menu_item {
		border: 1px solid #6E6E6E;
		text-align: center;
		font-weight: 600;
		position: relative;
		background-color: #fff;
		transition: all .3s;
		max-width: 380px;
	}
	.menu_item:hover {
		background-color: #404040;

	}
	.menu_item a {
		max-width: 380px;
		width:100%;
		display:inline-block;
		padding: 80px 0;
	}
	.menu_item:hover a{
		color: #fff;
		opacity:1;
	}
	.menu_item::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #404040;
		transform: rotate(-5deg);
		position: absolute;
		transition: all .3s;
		top: 0;
		z-index: -1;
	}
	.menu_item:hover:before {
		transform: rotate(0deg);
	}
	.menu_item p:nth-child(1) {
		font-size: 1.4em;

	}
	.menu_item p:nth-child(2) {
		margin-top: 0px !important;
	}

	.top_menu-btn {
		position: relative;
	}
	.top_menu-btn ul::before {
		content: "";
		width: 60px;
		height: 60px;
		background: url(../img/scissor.png) center top / contain no-repeat;
		position: absolute;
		top: -130px;
		right: 4px;
	}
	.top_menu-btn ul::after {
		content: "";
		width: 160px;
		height: 2px;
		position: absolute;
		top: -83px;
		right: -48px;
		background-image: linear-gradient(to right, #626262 6px, transparent 1px);
		background-size: 10px 1px;
		background-repeat: repeat-x;
		background-position: bottom;
		transform: rotate(90deg);
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.top_menu1 {
		margin-bottom: 0px;
		padding: 0 20px;
	}
	.top_menu2 {
		margin-bottom: 60px;
		padding: 0 20px;
	}
	.menu_item {
		max-width: 380px;
		padding: 40px 0;
		border: 1px solid #6E6E6E;
		text-align: center;
		font-weight: 600;
		position: relative;
		background-color: #fff;
		transition: all .3s;
		margin-bottom: 20px;
	}
	.menu_item:hover {
		background-color: #404040;
		color: #fff;
	}
	.menu_item::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: #404040;
		transform: rotate(-5deg);
		position: absolute;
		transition: all .3s;
		top: 0;
		z-index: -1;
	}
	.menu_item:hover:before {
		transform: rotate(0deg);
	}
	.menu_item p:nth-child(1) {
		font-size: 1.4em;

	}
	.menu_item p:nth-child(2) {
		margin-top: 0px !important;
	}
	.menu_flex2 {
		margin-top: 20px;
	}
	.menu_flex6 {
		margin-top: 25px;
	}
}





/* ================================================================================

	ギャラリー

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.gallery {
		padding: 0 20px;
		margin-bottom: 50px;
	}	
	.gallery_flex1 {
		width: 3% !important;
		flex-basis: 3%;
	}
	.gallery_flex1 .title {
		transform: rotate(90deg);
	}
	.gallery_flex1 .title h2 {
		font-size: 1.4em;
	}
	.gallery_flex2, .gallery_flex3, .gallery_flex4, .gallery_flex5{
		flex-basis: 24%;
		padding: 12px;
		position: relative;
	}
	.gallery_flex img{
	width: 100%;
    height: 335px;
    object-fit: cover;
	}
	.gallery_link {
		position: relative;
	}
	.gallery_link-text {
		position: absolute;
		text-align: center;
		width: 90%;
		background-color: #fff;
		padding: 35px 0;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
	}

	.more.gallery_more {
		margin: 0 auto 130px;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.gallery {
		padding: 0 20px;
		margin-bottom: 25px;
	}	

	.gallery_flex1 {
		margin-bottom: 20px;
	}
	.gallery_flex2, .gallery_flex3, .gallery_flex4, .gallery_flex5{
		width: 50%;
		padding: 12px;
		position: relative;
	}
	.gallery_link {
		position: relative;
	}
	.gallery_link-text {
		position: absolute;
		text-align: center;
		width: 90%;
		background-color: rgba(255,255,255,0.8);
		padding: 15px 0;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
	}

	.more.gallery_more {
		margin: 0 auto 60px;
	}
}





/* ================================================================================

	お知らせ

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	.news {
		background: url(../img/news-bc.png) center top / contain repeat;
		padding: 50px 20px;
	}

	.news_wrap {
		background-color: #fff;
		border-radius: 10px;
		padding: 50px 8%;
	}

	.news_wrap .title {
		text-align: center;
		margin-bottom: 30px;
	}
	.post_wrap {
		margin-bottom: 30px;
	}

	.post_wrap li {
		display: flex;
		margin-bottom: 15px;
	}
	.post_wrap li div {
		margin-right: 20px;
	}
	.post_wrap li div:nth-child(1) {
		flex-basis: 15%;
	}
	.post_wrap li div:nth-child(2) {
		flex-basis: 15%;
	}
	.post_wrap li div:nth-child(3) {
		flex-basis: 60%;
	}
	.blog_icon {
		background-color: #404040;
		border-radius: 2px;
		color: #fff;
		padding: 3px 10px;
		text-align: center;
		width: 100%;
		display: inline-block;
	}

	.more.news_more {
		margin: 0 auto;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.news {
		background: url(../img/news-bc.png) center top / contain repeat;
		padding: 60px 10px;
	}

	.news_wrap {
		background-color: #fff;
		border-radius: 10px;
		padding: 60px 8%;
	}

	.news_wrap .title {
		text-align: center;
		margin-bottom: 30px;
	}
	.post_wrap {
		margin-bottom: 30px;
	}
	.post_wrap li {
		margin-bottom: 15px;
	}
	.blog_icon {
		background-color: #404040;
		border-radius: 2px;
		color: #fff;
		padding: 3px 10px;
		text-align: center;
	}

	.post_date {
		margin-right: 15px;
	}
	.post_date, .post_icon_box {
		display: inline-block;
	}
	.post_title {
		margin: 5px 0;
	}

	.more.news_more {
		margin: 0 auto;
	}
}





/* ================================================================================

	〇〇

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	
}