@charset "UTF-8";

body,p,span,h1,h2,h3,h4,h5,h6 {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	padding: 0;
	margin: 0;
}



/* フォント
------------------------------*/

.notoSans {
	font-family: 'Noto Sans JP', sans-serif;
}

.shingo {
	font-family: a-otf-ud-shin-go-pr6n, sans-serif;
	font-weight: 300;
}

.yumin {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}

.abel {
	font-family: 'Abel', sans-serif;
}


/* Animation
------------------------------*/
.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 2s;
}
 
.fadein.active {
  opacity : 1;
  transform : translate(0, 0);
}

.anime01 {
    opacity: 1;
    animation: downUp 2s;
}

@keyframes downUp {
  0%   { 
	  opacity: 0;
	  transform: translateY(100px); 
	}
  50%  { 
	  opacity: 0;
	  transform: translateY(50px); 
	}
  100% { 
	  opacity: 1;
		transform: translateY(0); 
	}
}

.anime02 {
    opacity: 1;
    animation: downUp02 3s;
}

@keyframes downUp02 {
  0%   { 
	  opacity: 0;
	  transform: translateY(100px); 
	}
  50%  { 
	  opacity: 0;
	  transform: translateY(50px); 
	}
  100% { 
	  opacity: 1;
		transform: translateY(0); 
	}
}

.anime03 {
    opacity: 1;
    animation: downUp03 3s;
}

@keyframes downUp03 {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(-1000px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
}



/* ベース
------------------------------*/

img {
	width: 100%;
	margin: 0 auto;
}

.innerBox {
	width: 92%;
	max-width: 1280px;
	margin: 0 auto;
}

.flexBox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.bgWhite {
	background: #fff;
}

.bgWhite80 {
    background: rgb(255 255 255 / 80%);
}

.bgBlack {
	background: #3e3a39;
}

.bgGrade {
	background: linear-gradient(90deg, #8ecdbf 0%, #9ec4e8 100%);
}

.bgBlue {
	background: linear-gradient(180deg, rgba(55,106,225,1) 0%, rgba(47,92,151,1) 100%);
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.scroll {
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    transform: rotate(90deg);
    position: relative;
	display: inline-block;
	margin-top: 80px;
}

.scroll:after {
    content: "";
    width: 30px;
    height: 4px;
    background: linear-gradient(90deg, rgba(201,202,202,1) 0%, rgba(201,202,202,1) 50%, rgba(168,107,109,1) 50%, rgba(168,107,109,1) 100%);
    position: absolute;
    bottom: 6px;
    right: -36px;
}

#arrow div {
	width: 1px;
	height: 170px;
}

#arrow div {
    position: relative;
	width: 1px;
	margin: 0 auto;
}

#arrow div::before {
    content: "";
    display: block;
    position: absolute;
    left: 0px;
    width: 1px;
    height: 120px;
    background: #3e3a39;
}

#arrow div::after {
    content: "";
    display: block;
    position: absolute;
    left: -2px;
    width: 18px;
    height: 1px;
    border: 1px solid;
    border-color: transparent transparent #3e3a39 transparent;
    transform: rotate(45deg);
}

.projectBtn {
    border-radius: 50px;
    border: 5px solid #fff;
    box-shadow: 6px 6px 12px hsl(0deg 0% 1% / 30%);
	margin-bottom: 80px;
}

.projectBtn a {
    background: #fff;
    border-radius: 50px;
    box-shadow: 6px 6px 12px hsl(0deg 0% 1% / 30%);
    color: #2f5c97;
    padding: 6px 0;
    margin: 0 auto;
    display: block;
    text-align: center;
    font-weight: bold;
	position: relative;
}

.projectBtn a span.fontSize {
    font-size: 32px;
    vertical-align: middle;
}

.projectBtn a span.letterSpace {
    letter-spacing: 3px;
}

.projectBtn a:before {
    content: "";
    background: url(../images/arrow02.svg) no-repeat 0 50%;
    background-size: 100%;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}



/*-----ヘッダー----*/

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px 0 0;
	background: #fff;
	height: 90px;
	box-shadow: 0 2px 10px 2px #7f7e7e;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

.header .logo {
	margin-left: 30px;
}

.header h1 {
    line-height: 1;
    font-size: 24px;
    font-weight: 700;
}

.header .logo a {
	padding: 6px 55px;
}

.header .logo h1 img {
    width: 30px;
    margin: 3px 8px;
}

.header .rightNav {
	align-items: center;
	margin-right: 20px;
}

.header .rightNav .textBtn {
	text-align: center;
	margin: 0 10px;
}

.header .rightNav .textBtn span.en {
    font-size: 22px;
    font-weight: 400;
    display: block;
    color: #000;
    margin-bottom: 3px;
    line-height: 1;
    letter-spacing: 2px;
}

.header .rightNav .textBtn span.jp {
    font-size: 10px;
	display: block;
	color: #3e3a39;
	line-height: 1;
	letter-spacing: 2px;
}

.header .rightNav .textBtn.border a {
	border-right: 1px solid #3e3a39;
	padding-right: 20px;
	display: block;
}

.header .reserveBtn {
    margin: 0 30px 0 20px;
}

.header .reserveBtn a,.requestBtn a {
	background: #A4696A;
	padding: 10px 55px ;
	border-radius: 50px;
	display: inline-block;
	overflow: hidden;
}

.header .reserveBtn a span,.requestBtn a span {
	letter-spacing: 2px;
	margin-right: -2px;
	color:#fff;
	font-size: 16px;
	display:block;
}

.header .requestBtn {
	margin: 0 30px 0 0;
}

.header .requestBtn a {
	/*background: #2b3233;*/
	background: #6991a4;
}



/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
	height: 35px;
	width: 50px;
	position: relative;
	z-index: 100;/* 重なり順を一番上にする */
	cursor: pointer;
	display: block;
	text-align: center;
}

.drawer_open span {
  width: 70px;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span, .drawer_open span:before, .drawer_open span:after {
    content: '';
    display: block;
    height: 4px;
    width: 50px;
    background: #3e3a39;
    transition: 0.5s;
    position: absolute;
    border-radius: 10px;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  top: 15px;
}

.drawer_open span {
    top: 0;
    width: 32px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 30px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}


/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  transform: rotate(45deg);
	top: 26px;
}

#drawer_input:checked ~ .drawer_open span::after {
  transform: rotate(-45deg);
	top: 26px;
}

.drawer_open p.abel {
    font-size: 18px;
    letter-spacing: 7px;
    font-weight: 900;
    position: absolute;
    bottom: 0;
}

  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 90px;
  left: -100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #EFEFEF;
  transition: .5s;
}


.nav_list {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
	margin: 80px auto 0;
	width: 50%;
}


.nav_list li {
    width: 80%;
    text-align: center;
    border-bottom: 1px solid #d3d3d3;
    margin: 0 1%;
}

.nav_list li a {
    padding:18px 0;
	font-size: 20px;
	color: #3e3a39;
	position: relative;
	width: 100%;
	display: block;
}

.nav_list li a:after {
    content: "";
    background: url(../images/common/arrow02.svg) no-repeat 0 50%;
    background-size: 100%;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.nav_list li a .en {
	font-size: 10px;
	display: block;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}



/* フッター
------------------------------*/


footer p {
    font-size: 10px;
    text-align: center;
    padding: 10px 0;
}

.topBtn a {
    width: 200px;
    margin: 0 auto 60px;
    display: block;
    text-align: center;
    padding: 13px 0;
    background: linear-gradient(90deg, #8ecdbf 0%, #9ec4e8 100%);
    color: #fff;
	letter-spacing: 2px;
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	text-indent: 2px;
}


/* 来場予約・資料請求
------------------------------*/

.contactBox {
    justify-content: center;
    margin-bottom: 60px;
    background: #ffffff;
    padding: 40px 0;
}

.contactBox .btn a {
    padding: 15px 75px;
    border-radius: 50px;
    display: inline-block;
    overflow: hidden;
    margin: 0 25px;
}

.contactBox .btn a span {
    font-size: 20px;
	font-weight: bold;
}

.contactBox .reserveBtn a {
    background: #A4696A;
	color: #fff;
}

.contactBox .requestBtn a {
    background: #6991a4;
}

@media screen and (max-width: 767px) {

	.contactBox {
		padding: 30px 0;
	}
	
	.contactBox .btn a {
		padding: 10px 38px;
		margin: 0 10px;
	}

	.contactBox .btn a span {
		font-size: 18px;
	}
	
	.innerBox:last-child {
		width: 92%;
	}


}


/* youtube埋め込み
------------------------------*/

.movieBox {
    width: 100%;
    margin: 0 auto;
}

.movie {
    position: relative;
    width: 100%;
    height: 0;
    padding: 56.2% 0 0 0;
    overflow: hidden;
    margin: 0 auto;
}

.movie iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}



@media screen and (max-width: 767px) {

	.pc,.tb {
		display: none;
	}
	
	.sp.tb {
		display: block;
	}
	
	#arrow div {
		height: 130px;
	}	
	
	#arrow div::before {
		height: 60px;
	}	
	
	#arrow div::after {
		top: 53px;
		left: -14px;
	}
	
	.scroll {
		margin-top: 40px;
	}
	
	.projectBtn {
		margin-bottom: 40px;
	}	
	
	
	.projectBtn a:before {
		width: 20px;
		height: 20px;
		left: 7px;
	}
	
	.projectBtn a span.letterSpace {
		letter-spacing: 0;
	}
	
	.projectBtn a {
		font-size: 15px;
	}	
	
	.projectBtn a span.fontSize {
		font-size: 20px;
	}	
	
	.topBtn a {
		margin: 0 auto 40px;
	}
	
/*-----ヘッダー----*/

	.header {
		height: 60px;
		padding: 0;
		box-shadow: 0 2px 10px 3px #8d8d8d;
	}	
	
	.header .logo {
		margin-left: 15px;
	}
	
	.header h1 {
		font-size: 18px;
	}	

	.logo a {
		padding: 5px 40px;
	}	
	
	.header .logo h1 img {
		width: 25px;
	}	

	.drawer_open span,.drawer_open span:before, .drawer_open span:after {
		height: 3px;
		width: 40px;
	}
	
	.drawer_open span {
		width: 30px;
	}

	.drawer_open span:before {
		top: 13px;
	}

	.drawer_open span:after {
		top: 26px;
	}	

	#drawer_input:checked ~ .drawer_open span::after {
		top: 13px;
	}	

	#drawer_input:checked ~ .drawer_open span::before {
		top: 13px;
	}	

	.drawer_open p.abel {
		font-size: 14px;
		letter-spacing: 2px;
		bottom: 4px;
	}	

	.drawer_open {
		height: 25px;
		width: 40px;
		margin-right: 12px;
	}	

	.nav_content {
		top: 60px;
	}

	.nav_list {
		width: 90%;
		margin: 20px auto 40px;
	}	

	.nav_list li a {
		padding: 10px 0 ;
		font-size: 14px;
		letter-spacing: 2px;
	}	

	.nav_list li a .en {
		font-size: 8px;
		margin-left: 0;
	}	

	.nav_list:before {
		content: "";
		background: none;
	}	

	.nav_list li a:after {
		right: -1px;

	}
	
	.nav_list li.tb {
		display: block;
	}
	
	.cv.sp.flexBox {
		justify-content: center;
	}
	
	.cv.sp.flexBox div {
		justify-content: center;
	}	
	
	.header .cv .reserveBtn,.header .cv .requestBtn {
		margin: 0 10px 15px;
	}
	
	.footerBg {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 100;
	}

	.footerBg .flexBox {
		justify-content: center;
	}

	.footerBg.sp {
		display: block;
		height: 50px;
		background: #fff;
	}
	
	.footerBg.sp .flexBox {
		width: 100%;
	}
	
	.footerBg.sp .flexBox li {
		width: 25%;
	}
	
	.footerBg.sp .flexBox li a {
		display: block;
		text-align: center;
		padding: 6px 0;
	}
	
	.footerBg.sp .flexBox li a span {
		font-size: 10px;
		display: block;
	}
	
	.footerBg.sp .flexBox li.reserve a {
		background: #A4696A;
		color: #fff;
	}
	
	.footerBg.sp .flexBox li.request a {
		background: #6991a4;
		color: #fff;
	}
	
	.footerBg.sp .flexBox li img {
		width: 20px;
		margin: 0 auto;
	}

	
	

		
	
	
	
}

@media screen and (min-width: 768px) {

	.pc,.sp {
		display: none;
	}
	
	.tb,.sp.tb {
		display: block;
	}
	
	#arrow div {
		height: 130px;
	}	
	
	#arrow div::before {
		height: 60px;
	}	
	
	#arrow div::after {
		top: 53px;
		left: -14px;
	}
	
	.projectBtn {
		width: 65%;
		margin: 0 auto 80px;
	}
	
/*-----ヘッダー----*/
	
	.header {
		height: 90px;
	}	

	.logo a {
		padding: 6px 50px;
	}	

	.logoBg {
		padding: 10px 50px 0;
		height: 90px;
	}	

	.drawer_open {
		height: 35px;
		margin-right: 10px;
	}	

	.drawer_open span:before, .drawer_open span:after {
		height: 4px;
	}	

	.drawer_open p.abel {
		font-size: 18px;
		letter-spacing: 5px;
		bottom: 3px;
	}	

	#drawer_input:checked ~ .drawer_open span::before,#drawer_input:checked ~ .drawer_open span::after {
		top: 13px;
	}	
	
	.nav_list {
		width: 90%;
	}
	
	.nav_content {
		top: 90px;
	}	
	
	.nav_list:before {
		left: 0;
	}	
	
	
	
	
	
	

}

@media screen and (min-width:960px) {

	.tb,.sp,.sp.tb {
		display: none;
	}
	
	.pc {
		display: block;
	}
	
	.projectBtn {
		width: 40%;
		max-width: 540px;
		margin: 0 auto 80px;
	}	

	
	
	
	
	
	
}

@media screen and (min-width:1400px)  {
	
	#arrow div::before {
		height: 80px;
	}

	#arrow div::after {
		top: 73px;
	}	
	
	#arrow div {
		height: 270px;
	}	
	
}


@media screen and (min-width:1920px)  {

	#arrow div::before {
		height: 120px;
	}	

	#arrow div::after {
		top: 112px;
	}	
	
	#arrow div {
		height: 300px;
	}	
	
	.projectBtn {
		width: 47%;
		max-width: 540px;
		margin: 0 auto 100px;
	}	
	
	.projectBtn a {
		font-size: 25px;
	}	

	.projectBtn a span.fontSize {
		font-size: 50px;
	}
	
	.projectBtn a:before {
		width: 30px;
		height: 30px;
	}	
	
}






/*----------------------------------------
SNSボタン
----------------------------------------*/


@media screen and (max-width: 1024px) {
	
	.navSns {
		text-align: center;
		margin-top: 30px;
	}

	.navSns h3 {
		position: relative;
		display: inline-block;
		padding: 0 15px;
		margin-bottom: 15px;
		border: none;
		font-size: 16px;
		letter-spacing: 0;
		font-weight: bold;
		line-height: 1;
	}

	.navSns h3:before {
		position: absolute;
		left: 0;
		top: 0;
		content: "";
		width: 2px;
		height: 100%;
		background: #000;
		border-radius: 3px;
		transform: rotate(-25deg);
	}

	.navSns h3:after {
		position: absolute;
		content: "";
		right: 0;
		top: 0;
		width: 2px;
		height: 100%;
		background: #000;
		border-radius: 3px;
		transform: rotate(25deg);
	}

	.navSns ul {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: center;
	}

	.navSns ul li {
		padding: 0 20px;
	}

	.navSns ul li a {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.navSns ul li.snsYoutube img {
		width: 50px;
	}

	.navSns ul li.snsInsta img{
		width: 45px;
	}

	.navSns ul li.snsTiktok img {
		width: 45px;
	}

	
	
}

@media screen and (min-width: 1025px) {
	
	.navSns {
		display: none;
	}
}





@media print {

	header,footer,.projectBtn,.topBtn {
		display: none!important;
	}

	

}