@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;
	}
	.loading {
	    position: fixed;
	    width: 100vw;
	    height: 100vh;
	    top: 0px;
	    left: 0px;
	    background: #1d1d1d;
	    z-index: 99999999;
	}
	 
	.animation {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    color: #ffffff;
	}
	.animation img{
		width: 6vw;
	}
}



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

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

	.inner_wrap {
		position: relative;
	}
	.loading {
	    position: fixed;
	    width: 100vw;
	    height: 100vh;
	    top: 0px;
	    left: 0px;
	    background: #1d1d1d;
	    z-index: 99999999;
	}
	 
	.animation {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    color: #ffffff;
	}
	.animation img{
		width: 14vw;
	}
}





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

	ここからコンテンツ内容

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



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

	スライダー

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


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


}


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





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

	〇〇

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


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.top_base{
		width: 1200px;
		margin: 0 auto;
	}
	.top_midashi{
		font-size: 24px;
		letter-spacing: 7px;
	}
	.top_midashi_en{
		font-size:15px;
		color:#878787;
		letter-spacing:2px;
		font-size: 12px;
		margin-bottom:48px;
	}
	.top_01{
		text-align: center;
		margin-top: 45px;
	}
	.top_text{
		font-size: 16px;
		letter-spacing: 0.8px;
		line-height: 33px;
		color: #222;
	}
	.top_01_text{
		
	}
	
	.button {
		display: block;
		position: relative;
		background: #292623;
		width: 20rem;
		padding: 9px;
		border-radius: 0;
		color: #fff;
		text-align: center;
		text-decoration: none;
		font-weight: 300;
		letter-spacing: 4px;
		transition: .5s;
		margin: 31px auto 0;
	}

	.button:before {
	  content: "";
	  position: absolute;
	  top: 46%;
	  right: 12px;
	  width: 10px;
	  height: 2px;
	  background: #fff;
	  transform: rotate(45deg);
	}

	.button:after {
	  content: "";
	  position: absolute;
	  top: 54%;
	  right: 12px;
	  width: 10px;
	  height: 2px;
	  background: #fff;
	  transform: rotate(-45deg);
	}
	.button:hover{
		color:#FFF;
	}
	.top_02{
		background: url(../img/top02_bg.jpg)center top no-repeat;
		padding: 105px 0;
		text-align: right;
		color: #FFF;
		margin-top: 106px;
		margin-bottom: 82px;
	}
	.top_02_text{
		color: #FFF;
		width: 1366px;
		margin: 0 auto;
		padding: 57px 386px 65px 0;
		letter-spacing: 2px;
	}
	.kisetsu{
		display:flex;
		
	}
	.post_thumb{
		width: 60%;
		height:auto;
	}
	.post_thumb img{
		width:100%;
		height:auto;
		object-fit: cover; /* この一行を追加するだけ！ */
	
	}
	.post_except{
		width: 483px;
		color: #222;
		text-align: left;
		margin-right: 42px;
	}
	.post_title{
		font-size:20px;
		margin-left: 20px;
	}
	.kisetsu_btn{
		margin-top: 50px;
	}
	
	.top_link{
		 width:100%;
		 height:130%;
		 margin:0 auto;
		 overflow:hidden;
	}
	.top_link img{
		transition: 1s all;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.top_link img:hover{
		transform:scale(1.2,1.2);
		transition:1s all;
	}
	.top_link_base{
		margin-bottom: 102px;
	}
	.top_link_base li{
		display: inline-block;
		width: calc(100% / 3.06);
		padding: 44px;
		height: 94%;
	}
	.top_link_base ul{
		width: 834px;
		margin: 123px auto 0;
		height: 384px;
	}
	.top_link_text{
		position: absolute;
		color: #FFF;
		margin-left: 72px;
		margin-top: 61px;
		font-size: 22px;
		letter-spacing: 7px;
		z-index: 1000;
	}
	.post_wrap_news{
		width:700px;
		margin: 0 auto 126px;
	}
	li.news {
		border-bottom: 1px solid #CBB;
		text-align: left;
	}
	.post_news_title{
		padding-bottom: 10px;
		font-size: 16px;
	}
	.top_01_haikei01{
		background-image: url(../img/nami_left.jpg);
		background-position: -21px -428px;
		background-size: cover;
		height: 440px;
		position: absolute;
		width: 400px;
		margin-top: -400px;
	}
	.top_01_haikei02{
		background-image: url(../img/nami_right.jpg);
		background-position: -21px 428px;
		background-size: cover;
		height: 440px;
		position: absolute;
		width: 400px;
		margin-top: -331px;
		margin-left: 739px;
	}
	.top_01_haikei03{
		background-image: url(../img/nami_left.jpg);
		background-position: -21px -428px;
		background-size: cover;
		height: 440px;
		position: absolute;
		width: 400px;
		margin-top: -400px;
	}
	.nami_main{
		width: 1067px;
		margin: 0 auto;
		z-index: -1;
		position: relative;
	}

	.sliderWrap {
	  width: 100%;
	  max-width: 100vw;
	}
	.sliderWrap img {
	  width: 100%
	}
	.slick-dots li button:before {
	  font-size: 28px;
	  line-height: 32px
	}
	.post_news_title a{
		color:#222;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.top_base{
		width: 88vw;
		margin: 0 auto;
	}
	.top_midashi{
		font-size: 5.6vw;
		letter-spacing: 7px;
	}
	.top_midashi_en{
		color: #878787;
		letter-spacing: 2px;
		font-size: 3vw;
		margin-bottom: 9vw;
	}
	.top_01{
		text-align: center;
		margin-top: 18vw;
	}
	.top_text{
		font-size: 3.6vw;
		letter-spacing: 0.8px;
		line-height: 2;
		color: #222;
	}
	.top_01_text{
		
	}
	
	.button {
		display: block;
		position: relative;
		background: #292623;
		width: 58vw;
		padding: 3vw;
		border-radius: 0;
		color: #fff;
		text-align: center;
		text-decoration: none;
		font-weight: 300;
		letter-spacing: 4px;
		transition: .5s;
		margin: 7vw auto 0;
	}

	.button:before {
		content: "";
		position: absolute;
		top: 4.7vw;
		right: 2.7vw;
		width: 2.7vw;
		height: 0.6vw;
		background: #fff;
		transform: rotate(45deg);
	}

	.button:after {
		content: "";
		position: absolute;
		top: 6.2vw;
		right: 2.7vw;
		width: 2.7vw;
		height: 0.6vw;
		background: #fff;
		transform: rotate(-45deg);
	}
	.button:hover{
		color:#FFF;
	}
	.top_02{
		background: url(../img/top02_bg.jpg)left top no-repeat;
		    background-size: auto;
		padding: 10vw 0;
		text-align: center;
		color: #FFF;
		margin-top: 22vw;
		margin-bottom: 10vw;
		background-size: 194%;
	}
	.top_02_text{
		color: #FFF;
		width: 80vw;
		margin: 0 auto;
		padding: 3vw;
		letter-spacing: 2px;
		font-size: 4.3vw;
	}
	.kisetsu{

		
	}
	.kistsu_naiyo{
		margin-top:-3vw;
	}
	.post_thumb{
		width: 92%;
		height: auto;
		text-align: center;
		margin: 8vw auto 0;
	}
	.post_thumb img{
		width:100%;
		height:auto;
		object-fit: cover; /* この一行を追加するだけ！ */
	
	}
	.post_except{
		width: 87vw;
		color: #222;
		text-align: center;
	}
	.post_title{
		font-size:20px;
	}
	.kisetsu_btn{
		margin-top: 50px;
	}
	
	.top_link{
		width: 100%;
		height: 26vw;
		margin: 0 auto;
		overflow: hidden;
	}
	.top_link img{
		transition: 1s all;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.top_link_base{
		margin-bottom: 35vw;
		margin-top: 21vw;
	}
	.top_link_base li{
		padding: 4vw;
		height: 39%;
		width: 100%;
	}
	.top_link_base ul{
		width: 90vw;
		margin: 11vw auto 0;
		height: 70vw;
	}
	.top_link_text{
		position: absolute;
		color: #FFF;
		margin-left: 29vw;
		margin-top: 10vw;
		font-size: 4vw;
		letter-spacing: 7px;
		z-index: 10;
		text-align: center;
		width: 24vw;
	}
	.post_wrap_news{
		width: 78vw;
		margin: 0 auto 30vw;
	}
	li.news {
		border-bottom: 1px solid #CBB;
		text-align: left;
	}
	.post_news_title{
		padding-bottom: 3vw;
		font-size: 3.5vw;
	}
	.top_01_haikei01{
		background-image: url(../img/nami_left.jpg);
		background-position: -21px -428px;
		background-size: cover;
		height: 440px;
		position: absolute;
		width: 400px;
		margin-top: -400px;
	}
	.top_01_haikei02{
		background-image: url(../img/nami_right.jpg);
		background-position: -21px 428px;
		background-size: cover;
		height: 440px;
		position: absolute;
		width: 400px;
		margin-top: -331px;
		margin-left: 739px;
	}
	.top_01_haikei03{
		background-image: url(../img/nami_left.jpg);
		background-position: -21px -428px;
		background-size: cover;
		height: 440px;
		position: absolute;
		width: 400px;
		margin-top: -400px;
	}
	.nami_main{
		width: 1067px;
		margin: 0 auto;
		z-index: -1;
		position: relative;
	}

	.sliderWrap {
	  width: 100%;
	  max-width: 100vw;
	}
	.sliderWrap img {
	  width: 100%
	}
	.slick-dots li button:before {
	  font-size: 28px;
	  line-height: 32px
	}
	.post_news_title a{
		color:#222;
	}
}





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

	〇〇

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


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


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





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

	〇〇

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


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


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





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

	〇〇

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


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


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