@charset "utf-8";
/* CSS Document */

/* -------------------------------
  Default
------------------------------- */

body{
	color: #333;
	font-family: 'Shippori Mincho', serif;
/*	font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;*/
}

img{
	max-width: 100%;
}

:root {
  --blue: #536C90;
  --black: #333;
  --white: #fff;
  --transparent-blue: rgba(131,148,174,0.85);
}



/* -----------------------------
   keyvisual 
 -----------------------------*/
#salon_header{
	width: 100%;
}
#top_wrap {
	height: 100vh;
	display: grid;
	place-items: center;
	position: relative;
}
.top_keyvisual {
	max-width: 790px;
	text-align: center;
	position: relative;
}
.top_logo {
	max-width: 70%;
	margin: 0 auto clamp(16px,12vh,48px) auto;/*変更前、margin-bottom:60px*/
}
.top_keyvisual p {
	font-size: clamp(14px,2.5vh,16px);/*11.20変更*/
	padding: 0 40px;
}


/* --　アニメーションの間、スクロールを止める　--*/
.wrap-disableScroll {
	  z-index: 1;
	  position: relative;
	  animation: disableScroll .1s linear 5.8s both;
	  overflow: hidden;
	}

	@keyframes
	disableScroll {
	  0%{
		height: 0;
	  }
	  100%{
		height: auto;
		overflow:inherit;
	  }
	}		


/*　ロゴのSVGアニメーション用設定　*/
 /*SVGの横幅*/
.svganimeblock{
	max-width:800px;
	width:100%;
}

/*SVGの可変*/
.svganimeblock svg{
	width:100%;
}

/*アニメーション前のパスの指定*/
.svganimeblock svg path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .3s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #333;/*線の色*/
}
.svganimeblock svg .st1{
		stroke: var(--blue);
		stroke-width:2.11;
		stroke-miterlimit:10;
}

/*アニメーション後に.doneというクラス名が付与された時のパスの指定*/
.svganimeblock .done .st0{
	  fill: #333;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	}



/* -----ぼかしから出現----- */
	
	.delay-time-blur {
		animation-delay: 2.5s;
	}


	.blur{
		opacity: 0;
		animation-name:blurAnime;
		animation-duration:1s;
		animation-fill-mode:forwards;
	}

	@keyframes blurAnime{
	  from {	
		filter: blur(10px);
		transform: scale(1.02);
	  }

	  to {
		opacity: 1; 
		filter: blur(0);
		transform: scale(1);
	  }
	}	



	/* サイドの流れるテキスト */

.loop_wrap {
	width: 100vh;/*2023・11・11追記*/
	position: absolute;
	display: flex;
	top: -10px;/*-5%→-10px*/
	z-index: -1;
	overflow:  hidden;
	transform: rotate(90deg);
	transform-origin: left;
	animation: .7s loop-fade-in forwards;
	animation-delay: 4s;
	opacity: 0;

}
@keyframes  loop-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

	.loop_left {
		left: 3%;
	}
	.loop_right {
		left: 97%;
	}
	 .loop_wrap_inner {
		padding-right: 5px;
		font-size: 11px;
		letter-spacing: 3px;
		white-space: nowrap;
		animation: loop-text 20s 4s linear infinite;
		color: var(--blue);
		text-transform: uppercase;
	}
	@keyframes loop-text {
		  0% {
			transform: translateX(-100%);
		  }
		  100% {
			transform: translateX(0);
		}
	}

      /* -- END keyvisual -- */

/* -----------------------------
   scrolldown 
 -----------------------------*/
.scrolldown{
	position:absolute;
	left:50%;
	bottom:10px;
	transform: translateX(-50%);
	height:50px;
	animation: 1s scrolldown-fade-in forwards;
	animation-delay: 6s;
	opacity: 0;

}
@keyframes  scrolldown-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


.scrolldown span{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -30px;
	color: var(--blue);
	font-size: 12px;
	letter-spacing: 0.05em;
}

.scrolldown::after{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 30px;
	background-color: var(--blue);
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}
    /* -- END scrolldown -- */
	

/* -----------------------------
   fade-in
 -----------------------------*/

.fade-in {
  opacity: 0;
  transition-duration: 1.3s;
  transition-property: opacity, transform;
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}





/* -----------------------------
   newsticker
 -----------------------------*/
.news_slider a{
    display: block;
	padding-bottom: 5px;
}

li {
    list-style-type:none;
}
	
#news {
	background-color: #F4F4F4;
	}
.news_wrap {
    max-width: 80%;
    margin:0 auto;
	padding: 60px 0;
}
.news_wrap h2 {
		color: var(--blue);
		margin-bottom: 15px;
	}

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

	/* jquery.bxslider.min.cssを打ち消すためのcss */
	#news .bx-wrapper {
    margin-bottom: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    background: none;
}

	
	/* 中身 */
	.news_flex {
		display:block;
	}
	.news_date {
		font-size: 14px;
		position: relative;
		padding-left: 80px;
		line-height: 1.5rem;
	}
	.news_date::before {
		content: "";
		width: 70px;
		height: 1px;
		background-color: var(--blue);
		position: absolute;
		top: 13px;
		left: 0;
	}
	.news_title {
		width: 100%;
		position: relative;
		margin: 5px 0;
		display: flex;
	}
	.news_title span {
		font-size: 10px;
		font-family: "Noto Sans JP";
		display: block;
		line-height: 1.4rem;
		padding: 0 5px;
		color: var(--blue);
	}

	.news_img {
		display: flex;
		justify-content: flex-end;
	}
	.news_img img {
		width: 50px;
		height: auto;
		border-radius: 50%;
	}		
    /* -- END newsticker -- */		
			
/* -----------------------------
   next-info
 -----------------------------*/		
		#next-info {
			background-color: var(--blue);
			color: #fff;
			text-align: center;
		}
		
		.next-info_wrap {
			max-width: 90%;
			margin: 0 auto;
			padding: 75px 0;
			display: flex;
			flex-direction: column;
			gap: 40px;
		}
		.next-info_wrap h3 {
			font-size: 18px;
			padding: 8px;
			width: fit-content;
			margin: 0 auto;
			letter-spacing: 3.5px;
			position: relative;
		}
		.next-info_wrap h3::before,
		.next-info_wrap h3::after{
			content: "";
			width: 28px;
			height: 52px;
			background-size: contain;
			background-repeat: no-repeat;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		.next-info_wrap h3::before {
						background-image: url("../image/emblem_left.png");
						left: -20px;
		}
		.next-info_wrap h3::after {
						background-image: url("../image/emblem_right.png");
						right: -20px;
		}


		.next-info_wrap a {
			color: #fff;
		}
		.next-info_wrap p {
			font-size: 16px;
			line-height: 1.7rem;
		}
		.next-info_detail p:not(.next-info_btn p) {
			margin-bottom: 40px;
		}

		.next-info_btn_login {
			background: var(--blue);
			position: relative;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 0 auto 10px auto;
			max-width: 200px;
			padding: 7px;
			border: 1px solid #fff;
			font-size: 20px;
			font-weight: bold;
			color: #fff;
			transition: 0.3s ease-in-out;
			z-index:0;
			letter-spacing: 1.5px;
		}
		.next-info_btn_login:before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			width: 0;
			display: block;
			background: #fff;
			transition: .3s;
			left:0;
		}
		.next-info_btn_login:hover {
			color: var(--blue);
		}
		.next-info_btn_login:hover:before {
			width: 100%;
			z-index: -1;
		}
		.next-info_btn_new {
			border-bottom: 1px solid #fff;
			padding: 5px 0;
			margin-left: 8px;
			transition: .3s;
		}
		.next-info_btn_new:hover {
			opacity: .5;
		}
    /* -- END next-info -- */		
/* -----------------------------
  　TOPへ戻るボタン
 -----------------------------*/
#page_top{
	z-index: 60;
    position: fixed;
    right: 5px;
    bottom: 20px;
    height: 50px;
	
	background: rgba(250,250,250,.4);
	-webkit-backdrop-filter: blur(13px);
	backdrop-filter: blur(13px);

}

a.page_top_inner {
    position: fixed;
    right: 5px;
    bottom: 20px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    transform: rotate(90deg);
    font-size: 90%;
    line-height: 1.5rem;
    color: var(--blue);
    padding: 0 0 0 35px;
    border-top: solid 1px;
	

}
a.page_top_inner::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 15px;
    border-top: solid 1px;
    transform: rotate(35deg);
	transform-origin: left top;
    color: var(--blue);
}

    /* -- END TOPへ戻るボタン -- */		

/* -----------------------------
  　footer
 -----------------------------*/
		.salon_footer{
			margin-top: 80px;
		}

		.link_kobe-next_wrap{
			/*margin-bottom: 16px;*/
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.link_kobe-next{
			display: block;
			width: 12em;
			text-align: center;
			/*テキストリンクにする場合の設定*/
			/*
			padding: 2px 0;
			color: var(--blue); 
			border-bottom:1px solid var(--blue);
			*/
		}
		.link_kobe-next:hover{
			opacity: 0.8;
		}
		.salon_copyright_wrap{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 8px 0 16px;
			}
		p.salon_copyright{
			width: 6em;
			font-size: 14px;
			font-weight: 500;
		}


/* -----------------------------
   講演掲載無し時
 -----------------------------*/	
.planning__box {
	margin: 140px auto;
	padding: 40px min(15px, 3.9vw);
	border: 1px solid var(--blue);
	width: min(80%, 1356px);
	text-align: center;
}
.planning__box p {
	font-weight: 700;
	font-size: min(3.77vw,30px);
	color: #333;
}
/* -----------------------------
   共通・汎用
 -----------------------------*/	
	.sp_display {
	display: block;
		}
	.pc_display {
	display: none;
		}