/*--------------------　mainスタート　--------------------*/

/*--------------------　背景スタート　--------------------*/
#page.index #main{
	width:100vw;
	/*min-width:1000px;*/
	height:100vh;
	/*min-height:800px;*/
	z-index: 100;
	position:fixed; /* relative → fixed */
	background-image: url(../images/top2025/main-baclk01.jpg);
	background-size:cover; /*【JS作成にあたって】最初の横、縦のMAX値をはかって数値を入れる*/
	background-repeat: no-repeat;
	background-position: center center;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: center;
	align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
}
#page.index #fade-mask {
    width: 0;/*【JS作成にあたって】最初は横、縦50pxで最後は画面外にかなりはみでる横、縦サイズを指定*/
    height: 0;
    /*background-color: #fff;
		background-image: url(../images/top2025/main-baclk02.jpg);
		background-size:cover;*//*【JS作成にあたって】最初の横、縦のMAX値をはかって数値を入れる*/
		/*background-repeat: no-repeat;
		background-position: center center;
		mask-image: radial-gradient(rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
		-webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);*/ /* Safari対応 */
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-align-content: center;
		align-content: center;
		-webkit-justify-content: center;
		justify-content: center;
}
#page.index #fade-mask-black.position-after-black{
	position: absolute;
	top:0;
	left:0;
	z-index: 10;
  width: 100vw;
  height: 100vh;
	background-image: url(../images/top2025/main-baclk02.jpg);
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 1;
}
.position-after-black{
	animation: Anime-Back-Black 5s backwards;
}
@keyframes Anime-Back-Black{
	0%{
	 	opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.position-after-black-RE{
	animation: Anime-Back-Black 5s backwards;
}
@keyframes Anime-Back-Black-RE{
	0%{
	 opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

@media (max-width: 768px){
	#page.index #main{
		min-width:100vw;
		min-height:100vh;
	}
	#page.index #fade-mask {	/* add */
		background-size: cover;
	}
}
/*--------------------　背景エンド　--------------------*/


/*--------------------　ロゴスタート　--------------------*/
#page.index h1{
	position:absolute;
	z-index: 105;
	left:50vw;/*【JS作成にあたって】最初は画面横幅の50％のpx値を指定*/
	top:50vh;/*【JS作成にあたって】最初は画面縦幅の50％のpx値を指定*/
	margin-left:-25vw;/*【JS作成にあたって】最初は画面横幅の50％ - svgの横幅50％のpx値を指定*/
	margin-top:-5.5vw;/*【JS作成にあたって】最初は画面縦幅の50％ - svgの縦幅50％のpx値を指定*/
	width:50vw;/*【JS作成にあたって】最初は横幅の50％のpx値を指定*/
	height:auto;
}
#page.index h1.position-after{/*【JS作成にあたって】最終ポジション*/
	position:absolute;
	z-index: 105;
	left:8.3vw;
	top:35px;
	margin-left:0;
	margin-top:0;
	width:200px;
}
@media (max-width: 768px){
	#page.index h1.position-after{
		left:5vw;
		top:20px;
		margin-left:0;
		margin-top:0;
		width:36vw;
	}
}
/*--------------------　ロゴエンド　--------------------*/


/*--------------------　文字スタート　--------------------*/
#page.index #main-comment{
	width:1000px;
	height:100%;
	display:table;
	position: absolute; /* add */
	/*top: 0;*/
	margin:0 auto;
	z-index: 200;
}
#page.index #main-comment01{
	position:absolute;	/* edit relative→absolute */
	width: 100%; /* add */
	z-index: 100;
	left:0;/*【JS作成にあたって】横からの位置は収支固定*/
	top:120vh;/*【JS作成にあたって】画面の高さの位置からこの位置まで*/
}
#page.index #main-comment02{
	position:absolute; /* edit relative→absolite */
	width: 100%; /* add */
	z-index: 100;
	left:3vw;/*【JS作成にあたって】横からの位置は収支固定*/
	top:34vh;/*【JS作成にあたって】最初は画面縦幅の50％のpx値を指定*/
}
	#page.index .main-comment .text-former{
		display:table;
		position:absolute;
		z-index: 100;
		left:0;
		top:0;
	}

			#page.index #main-comment02.main-comment p{
				display:inline-block;
				font-size:45px;
				line-height:70px;
				letter-spacing: 5px;
				font-weight:bold;
				color:#fff;
			}
			#page.index #main-comment02.main-comment .text-former{
				visibility:hidden;
			}
			#page.index #main-comment02.main-comment .text-former.go-anime{
				visibility: visible;
				animation-name: main-comment-Anime;
				animation: text-opacity-Anime 1s ease 0s 1;
				-webkit-animation: text-opacity-Anime 1s ease 0s 1;
			}
@keyframes main-comment-Anime {
	0% {
		visibility: visible;
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}



@media (max-width: 768px){
	#page.index #main-comment{
		width:90vw;
	}
	#page.index #main-comment02{
		top:45vh;/*【JS作成にあたって】最初は画面縦幅の50％のpx値を指定*/
	}
	#page.index #main-comment01.main-comment p span.block span{
		font-size:5.4vw;
		line-height:1.8;
	}
	#page.index #main-comment02.main-comment p span.block span{
		font-size:7vw;
		line-height:2;
	}
}
/*--------------------　文字エンド　--------------------*/

/*--------------------　矢印スタート　--------------------*/
#page.index #main #main-arrow{
	position:absolute;
	display: table;
	width:50px;
	height:100px;
	z-index: 100;
	left:50vw;
	bottom:50px;
	margin-left:-20px;
	overflow: hidden;
	background-image: url(../images/top2025/main-arrow.svg);
	background-size:100% 100%;
	background-repeat: no-repeat;
	background-position: 0 0;

	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-duration: 3.6s;
  animation-duration: 3.6s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
  -webkit-animation-name: anime-arrow;
  animation-name: anime-arrow;
}
#page.index #main #main-arrow a{
	position: relative;
  display: inline-block;
	width: 100%;
	height: 100%;
}
@media (max-width: 768px){
	#page.index #main #main-arrow{
		width:10vw;
		height:20vw;
		bottom:5vw;
		margin-left:-5vw;
	}
}
@keyframes anime-arrow {
	0% {
		-webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
	}
	10% {
		-webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
	}
	30% {
		-webkit-clip-path: inset(0);
    clip-path: inset(0);
	}
	80% {
		-webkit-clip-path: inset(0);
    clip-path: inset(0);
	}
	100% {
		-webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
	}
}

/*--------------------　矢印エンド　--------------------*/
/*--------------------　mainエンド　　--------------------*/




/*--------------------　スライダーのCSSは仮のものです　　--------------------*/
#page.index #main-slider{
	width:100%;
	height:auto;
	z-index: 1100;
	position: relative;
	margin-top:93vh;
	height: 460px;
	opacity: 0;
}
#page.index #main-slider .mainslide{
  width: 100%;
  height: 100%;
  margin:0 auto;
  position: relative;
}
#page.index #main-slider .swiper-wrapper {
	margin: 0 auto;
	padding-top:40px;
	width: 440px;
	height: 100%;
	position: relative;
}
	#page.index #main-slider .swiper-slide {
    margin: 0;
    box-sizing: border-box;
    text-align: center;
    position: relative;
		width: 440px;
		height:320px;
		border-radius: 18px;
		border:1px solid #fff;
	}
	#page.index #main-slider .swiper-slide.swiper-slide-active {
		margin: 0;
		opacity: 1;
	  transform: scale(1.25);
	}
		#page.index #main-slider .swiper-slide img{
			width: 100% !important;
			height: 100% !important;
		}

	#page.index #main-slider .swiper-pagination {
		position: relative;
		display: flex;
		width: 400px;
		height: 3px;
		margin: 0 auto;
		margin-top: -55px;
	}
	#page.index #main-slider .swiper-pagination .swiper-pagination-scroll {
		background: #ccc;
		height: 10px;
		cursor: pointer;
		transition: all .3s;
	}
	#page.index #main-slider .swiper-pagination .swiper-pagination-scroll.current {
		background: #666;
		transition: all .3s;
	}

@media (max-width: 768px){
	#page.index #main-slider{
		margin-top:90vh; /* edit -45vw→-100vh */
	}
}


#page.index #section01{
	width:100%;
	height:1000px;
}



#page.index #contents {
	margin-top: 4000px;
}


/*--------------------　タイトル　--------------------*/
#page .title-pt01{
	display:table;
	background-image: url(../images/top2025/slider-title-icon.png);
	background-size:100px 86px;
	background-repeat: no-repeat;
	background-position: left 30px;
	padding-left:125px;
}
	#page .title-pt01 .text-upper{
		display:table;
		margin-bottom:15px;
	}
	#page .title-pt01 .text-upper .text-upper-box div{
		display:inline-block;
	}
	#page .title-pt01 .text-s
	/*#page .title-pt01 .text-s span*/{
		font-size:45px;
		font-weight:bold;
		line-height: 1.3;
		display:inline-block;
	}
	#page .title-pt01 .text-b
	/*#page .title-pt01 .text-b span*/{
		font-size:60px;
		font-weight:bold;
		color:#a0804b;
		line-height: 1.3;
		display:inline-block;
		background-image: url(../images/top2025/startingnow-title-line.png);
		background-size:auto;
		background-repeat: no-repeat;
		background-position: left bottom;
	}
	#page .title-pt01 .text-s2
	/*#page .title-pt01 .text-s2 span*/{
		font-size:24px;
		font-weight:bold;
		color:#a0804b;
		line-height: 1;
		display:inline-block;
	}
@media (max-width: 768px){
	#page .title-pt01{
		background-size:12vw auto;
		background-repeat: no-repeat;
		background-position: 1vw 6vw;
		padding-left:15vw;
	}
		#page .title-pt01 .text-upper{
			margin-bottom:1.5vw;
		}
		#page .title-pt01 .text-s
		/*#page .title-pt01 .text-s span*/{
			font-size:5.6vw;
			padding-bottom:0.5vw;
		}
		#page .title-pt01 .text-b
		/*#page .title-pt01 .text-b span*/{
			font-size:7vw;
			padding-bottom:0.5vw;
		}
		#page .title-pt01 .text-s2
		/*#page .title-pt01 .text-s2 span*/{
			font-size:3.2vw;
		}
}

#page .title-pt01.nonline{
	background-size:100px 86px;
	background-repeat: no-repeat;
	background-position: left top;
	padding-left:125px;
}
	#page .title-pt01.nonline .text-upper{
		background-image: url();
		background-size:auto;
		background-repeat: no-repeat;
		background-position: left bottom;
		display:table;
		margin-bottom:5px;
	}
@media (max-width: 768px){
	#page .title-pt01.nonline{
		background-position: 1vw top;
	}
}

#page .textanimation div{
	display:inline-block;
}
#page .textanimation > span{
	overflow: hidden;
}
#page .textanimation > span > span{
	animation: showTextFromBottom 0.5s backwards;
}
#page .textanimation > div > span{
	animation: showTextFromBottom 0.5s backwards;
}
@keyframes showTextFromBottom{
	0%{
	 transform: translateY( 100% );
	}
	100%{
		transform: translateY( 0px );
	}
}
/*--------------------　タイトルEND　--------------------*/

/*--------------------　ボタン　--------------------*/
#page .button-square{
	position: relative;
	width:300px;
	height:74px;
	background-color: #fff;
	box-shadow: 0px 0px 15px -5px #777777;
	border-radius: 8px;
	margin:0 auto;
	transition: all 0.2s linear;
	z-index: 10;
}
	#page .button-square a{
		width:100%;
		height:100%;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-align-content: center;
		align-content: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	#page .button-square span{
		display:inline-block;
		padding:0 24px;
		position: relative;
		font-size:16px;
	}
	#page .button-square span:after{
		content:"";
		position: absolute;
		display:inline-block;
		top:50%;
		right:0;
		margin:-2px 0 0 0;
		width:24px;
		height:5px;
		background-image: url(../images/common/startingnow-slide-arrow-bl.svg);
		background-size:14px 7px;
		background-repeat: no-repeat;
		background-position: center center;
	}
		#page .button-square:hover span:after{
			background-image: url(../images/common/startingnow-slide-arrow-wh.svg);
			animation: button-square-arrow 1.5s infinite backwards;
		}
#page .button-square:hover{
	width:310px;
	height:84px;
	margin:-5px auto;
	border-radius: 12px;
	background-color: #1d1c3f;
}
	#page .button-square:hover a{
		color:#fff;
	}
@keyframes button-square-arrow {
	0%{
	 background-position: center center;
	}
	50%{
	 background-position: 24px center;
	}
	51%{
	 background-position: -48px center;
	}
	100%{
	 background-position: center center;
	}
}
@media (max-width: 768px){
	#page .button-square{
		width:64vw;
		height:16vw;
		border-radius: 2vw;
	}
		#page .button-square span{
			padding:0 24px;
			font-size:4vw;
			padding-right:5vw;
		}
		#page .button-square span:after{
			content:"";
			position: absolute;
			display:inline-block;
			top:50%;
			right:0;
			margin:-1vw -2vw 0 0;
			width:4vw;
			height:2vw;
			background-size:4vw 2vw;
		}
			#page .button-square:hover span:after{
				animation:none;
			}
	#page .button-square:hover{
		width:64vw;
		height:16vw;
		border-radius: 2vw;
		margin:0 auto;
		background-color: #1d1c3f;
	}
		#page .button-square:hover a{
			color:#fff;
		}
}



/*--------------------　トップコメント　--------------------*/
	#page.index #topcom .contentsin{
		position: relative;
		text-align: center;
		padding:140px 0 115px;
	}
	#page.index #topcom .contentsin:after{
		content:"";
		position: absolute;
		display:inline-block;
		z-index:-1;
		top:50px;
		right:-30px;
		width: 450px;
	  height: 450px;
		background-image: url(../images/top2025/topcom-back.png);
		background-size:auto;
		background-repeat: no-repeat;
		background-position: center center;
	}
	#page.index #topcom .comment01{
		display:table;
		margin:0 auto;
	}
	#page.index #topcom .comment01 span{
		font-size:20px;
		font-weight: bold;
		display:inline-block;
		padding:0 0;
	}
		#page.index #topcom .comment01 span strong{
			font-size:20px;
			font-weight: bold;
			color:#a0804b;
			position: relative;
			display:inline-block;
			padding:5px 0;
			border-bottom:2px solid #1d1c3f;
		}
	#page.index #topcom .comment02{
		font-size:45px;
		font-weight: bold;
		line-height: 1.5;
		padding:25px 0;
	}
	#page.index #topcom .comment03{
		font-size:20px;
		font-weight: bold;
		line-height: 1.5;
		padding:0 0 85px;
		background-image: url(../images/top2025/topcom-arrow.svg);
		background-size:14px 46px;
		background-repeat: no-repeat;
		background-position: center bottom;
	}
@media (max-width: 768px){
	#page.index #topcom .contentsin{
		padding:18vw 0 14vw;
	}
	#page.index #topcom .contentsin:after{
		top:10vw;
		right:-4vw;
		width: 60vw;
	  height: 60vw;
	}
	#page.index #topcom .comment01{
		display:table;
		margin:0 auto;
	}
	#page.index #topcom .comment01 span{
		font-size:4.6vw;
	}
		#page.index #topcom .comment01 span strong{
			font-size:4.6vw;
			padding:3vw 0 2vw;
		}
	#page.index #topcom .comment02{
		font-size:6.2vw;
		padding:4vw 0;
		letter-spacing: -1px;
	}
	#page.index #topcom .comment03{
		font-size:4.6vw;
		padding:0 0 14vw;
		background-size:3vw 8.85vw;
	}
}


/*--------------------　圧倒的な実績　--------------------*/
#page.index #ahievements{
	background-image: url(../images/top2025/ahievements-back.png);
	background-size:auto;
	background-repeat: no-repeat;
	background-position: center 35px;
	margin-bottom:180px;
}
	#page.index #ahievements .box{
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0px 0px 15px -5px #777777;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-align-content: center;
		align-content: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
	#page.index #ahievements .section01{
		padding-top:80px;
		display: table;
	}
		#page.index #ahievements .section01 .l h3{
			font-size:28px;
			font-weight:bold;
		}
			#page.index #ahievements .section01 .l .box{
				width:330px;
				height:148px;
				margin:15px 0 15px;
			}
				#page.index #ahievements .section01 .l .box img{
					width:240px;
				}
		#page.index #ahievements .section01 .l p{
			font-size:13px;
		}

		#page.index #ahievements .section01 .r{
			width:469px;
		}
			#page.index #ahievements .section01 .r img{
				width:100%;
			}
	#page.index #ahievements .section02{
		padding-top:90px;
		display: table;
	}
		#page.index #ahievements .section02 .l{
			width:446px;
		}
			#page.index #ahievements .section02 .l img{
				width:100%;
			}
		#page.index #ahievements .section02 .r .box{
			width:388px;
			height:148px;
			margin:35px 0 15px;
		}
			#page.index #ahievements .section02 .r .box img{
				width:310px;
			}
		#page.index #ahievements .section02 .r p{
			font-size:13px;
		}
		#page.index #ahievements .section02 .r p.fst{
			padding-bottom:1.5em;
		}
	#page.index #ahievements .section03{
		padding-top:70px;
		display: table;
	}
		#page.index #ahievements .section03 .l .box{
			width:388px;
			height:210px;
			margin:0 0 15px;
		}
			#page.index #ahievements .section03 .l .box img{
				width:330px;
			}
		#page.index #ahievements .section03 .l p{
			font-size:13px;
		}
	#page.index #ahievements .section03 .r{
		width:470px;
	}
		#page.index #ahievements .section03 .r img{
			width:100%;
		}
@media (max-width: 768px){
	#page.index #ahievements{
		background-size:104vw;
		background-position: center 5vw;
		margin-bottom:24vw;
	}
		#page.index #ahievements .box{
			border-radius: 2.5vw;
		}
		#page.index #ahievements .section01{
			padding-top:14vw;
		}
			#page.index #ahievements .l,
			#page.index #ahievements .r{
				float:none !important;
				width:100% !important;
				margin:0 auto 10vw !important;
			}
			#page.index #ahievements .section01 .l h3{
				font-size:4.2vw;
			}
				#page.index #ahievements .section01 .l .box{
					width:70vw;
					height:36vw;
					margin:4vw auto 4vw;
				}
					#page.index #ahievements .section01 .l .box img{
						width:50vw;
					}
			#page.index #ahievements .section01 .l p{
				font-size:3.4vw;
			}
		#page.index #ahievements .section02{
			padding-top:0;
		}
				#page.index #ahievements .section02 .r .box{
					width:70vw;
					height:36vw;
					margin:5vw auto 4vw;
				}
					#page.index #ahievements .section02 .r .box img{
						width:60vw;
					}
			#page.index #ahievements .section02 .r p{
				font-size:3vw;
			}
		#page.index #ahievements .section03{
			padding-top:0;
		}
			#page.index #ahievements .section03 .l .box{
				width:80vw;
				height:40vw;
				margin:0 auto 4vw;
			}
				#page.index #ahievements .section03 .l .box img{
					width:64vw;
				}
			#page.index #ahievements .section03 .l p{
				font-size:3vw;
			}
}




/*--------------------うどんや診断--------------------*/
#page.index #diagnosis{
		margin-bottom: 180px;
}
#page.index #diagnosis .box{
	width:720px;
	height:230px;
	background-image: url(../images/top2025/diagnosis-back.png);
	background-size:100%;
	background-repeat: no-repeat;
	background-position: center center;
	padding:50px 0 0;
	margin:0 auto;
}
	#page.index #diagnosis .box h2{
		text-align: center;
		width:275px;
		margin:0 auto;
	}
		#page.index #diagnosis .box img{
			width:100%;

		}
	#page.index #diagnosis .box p{
		font-size:20px;
		font-weight:bold;
		color:#fff;
		text-align: center;
		margin:10px auto 0;
	}
	#page.index #diagnosis .box .button{
		margin:10px auto 0;
		width:300px;
		height:46px;
		background-color: #fff;
		border-radius: 23px;
	}
		#page.index #diagnosis .box .button a{
			position: relative;
			color:#1d1c3f;
			font-size:20px;
			font-weight:bold;
			width:100%;
			height:100%;
			display: flex;
			-webkit-align-items: center;
			align-items: center;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-align-content: center;
			align-content: center;
			-webkit-justify-content: center;
			justify-content: center;
		}
		#page.index #diagnosis .box .button a:after{
			content:"";
			position: absolute;
			display:inline-block;
			top:50%;
			right:15px;
			margin:-4px 5px 0 0;
			width:18px;
			height:9px;
			background-image: url(../images/common/arrow-l-bl.svg);
			background-size:9px 9px;
			background-repeat: no-repeat;
			background-position: center center;
		}
		#page.index #diagnosis .box .button:hover{
			margin:5px auto 0;
			width:310px;
			height:56px;
			border-radius: 28px;
			background-color: #a0804b;
		}
		#page.index #diagnosis .box .button:hover a{
			color:#fff;
		}
		#page.index #diagnosis .box .button:hover a:after{
			background-image: url(../images/common/arrow-l-wh.svg);
			animation: diagnosis-arrow 1.5s infinite backwards;
			z-index: 10;
		}
	#page.index #diagnosis p.min{
		font-size:14px;
		font-weight:bold;
		text-align: center;
		margin:15px auto 0;
	}
@keyframes diagnosis-arrow {
	0%{
	 background-position: center center;
	}
	50%{
	 background-position: 20px center;
	}
	51%{
	 background-position: -40px center;
	}
	100%{
	 background-position: center center;
	}
}
@media (max-width: 768px){
	#page.index #diagnosis{
		margin-bottom: 24vw;
	}
	#page.index #diagnosis .box{
		width:100%;
		height:44vw;
		background-image: url(../images/top2025/diagnosis-back-sp.png);
		background-size:100%;
		padding:7vw 0 0;
	}
		#page.index #diagnosis .box h2{
			width:46vw;
		}
		#page.index #diagnosis .box p{
			font-size:4vw;
			line-height:1.4;
			margin:2vw auto 0;
		}
		#page.index #diagnosis .box .button{
			margin:1.5vw auto 0;
			width:60vw;
			height:10vw;
			border-radius: 5vw;
		}
			#page.index #diagnosis .box .button a{
				font-size:4vw;
				background-color: transparent;
			}
			#page.index #diagnosis .box .button a:after{
				top:50%;
				right:4vw;
				margin:-1.5vw 0 0 0;
				width:3vw;
				height:3vw;
				background-size:3vw 3vw;
			}
			#page.index #diagnosis .box .button:hover{
				margin:1.5vw auto 0;
				width:60vw;
				height:10vw;
				border-radius: 5vw;
			}
			#page.index #diagnosis .box .button:hover a:after{
				background-image: url(../images/common/arrow-l-wh.svg);
				animation:none;
			}
		#page.index #diagnosis p.min{
			font-size:3vw;
			margin:3vw auto 0;
		}
}


/*--------------------　横スライダー　--------------------*/
#page .section-r{
	float:right;
	text-align: left;
	display: table;
	width:calc(100% - ((100% - 1100px) / 2));
	overflow: hidden;
	background-size:auto;
	background-repeat: no-repeat;
}
#page #strating .section-r{
	padding-top:38px;
	background-image: url(../images/top2025/startingnow-back.png);
	background-position: 340px top;
}
#page #alreaday-open .section-r{
	padding-top:84px;
	background-image: url(../images/top2025/alreaday-open-back.png);
	background-position: 390px top;
}
@media (max-width: 1000px){
	#page .section-r{
		width:100%;
	}
}


#page .section-r .comment-box{
	margin:50px 0 0;
	padding-left: 125px;
}
	#page .section-r .comment-box h3{
	  background-color: #355aa5;
	  border-radius:10px;
		height:46px;
		display: table;
		margin:0 0 20px;
	}
	#page #alreaday-open .section-r .comment-box h3{
	  background-color: #c76b2b;
	}
		#page .section-r .comment-box h3 span{
		font-size: 22px;
	  line-height: 1;
	  color:#fff;
		padding:0 15px;
		height:100%;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-align-content: center;
		align-content: center;
		-webkit-justify-content: center;
		justify-content: center;
	}
@media (max-width: 768px){
	#page .section-r .comment-box{
		margin:8vw auto 6vw;
		width:90vw;
		padding-left: 0;
	}
		#page .section-r .comment-box h3{
		  border-radius:2vw;
			height:8.4vw;
			margin:0 0 4vw;
		}
			#page .section-r .comment-box h3 span{
			font-size: 4vw;
			padding:0 3vw;
		}
}



#page .section-r .slider-verside{
	width:100%;
	height:573px;
	display:table;
	margin-top:60px;
	margin-bottom:130px;
}
#page .section-r .slider-verside .l{
	width:120px;
	text-align: center;
	display:table-cell;
}
	#page .section-r .slider-verside .l p{
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
		font-size:30px;
		font-weight:bold;
		line-height: 1;
		margin:0 auto;
	}
#page .section-r .slider-verside .r{
	width:calc(100% - 120px);
	height:100%;
	position:relative;
	display:table-cell;
}
	#page .section-r .slider-verside ul{
		display:table;
		position:absolute;
		width:100%;
		top:0;
		left:0;
	}
		#page .section-r .slider-verside ul li{
			display:table-cell;
			padding:0 10px;
			position: relative;
		}
			#page .section-r .slider-verside ul li .box{
				width:280px;
				height:490px;
			}
				#page .section-r .slider-verside ul li .box h3{
					width:80px;
					height:70px;
				}
					#page .section-r .slider-verside ul li .box h3 img{
						width:100%;
					}
			#page .section-r .slider-verside ul li .boxin {
				width:100%;
				height:420px;
				background-image: url(../images/top2025/startingnow-slide-back.png);
				background-size:contain;
				background-repeat: no-repeat;
				background-position: left top;
				padding:48px 0 0;
			}
				#page .section-r .slider-verside ul li .boxin .photo{
					width:220px;
					height:212px;
					border-radius: 8px;
					overflow: hidden;
					margin:0 auto;
				}
					#page .section-r .slider-verside ul li .boxin .photo img{
						width:100%;
						position:relative;
						overflow: hidden;
						transition: all 0.2s linear;
						z-index: 5;
					}
					#page .section-r .slider-verside ul li :hover .boxin .photo img{
						transform: scale(1.1);
					}

				#page .section-r .slider-verside ul li .boxin .comment{
					width:220px;
					height:85px;
					margin:15px auto 20px;
					overflow: hidden;
				}
					#page .section-r .slider-verside ul li .boxin .comment p{
						font-size:15px;
						line-height:1.4;
						color: #333 !important;
					}
				#page .section-r .slider-verside ul li .boxin .link{
					width:220px;
					margin:0 auto 0;
					display:table;
					font-size:11px;
					color: #333 !important;
					line-height:1;
					padding:0 0 6px 0;
					border-bottom:2px solid #000;

				}
					#page .section-r .slider-verside ul li:hover .boxin .link{
						animation: showText-link-arrow 1s infinite backwards;
					}
@keyframes showText-link-arrow{
	0%{
	 background-position: right top;
	}
	50%{
	 background-position: right -11px top;
	}
	51%{
	 background-position: right 11px top;
	}
	100%{
	 background-position: right top;
	}
}

#page .section-r .slider-verside .slider-page-nation{
	display:table;
	position:absolute;
	bottom:0;
	right:100px;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: center;
	align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
	width:136px;
	margin-right:120px;
}
	#page .section-r .slider-verside .slider-page-nation .but{
		background-color: #1d1c3f;
		width:40px;
		height:40px;
		border-radius: 20px;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-align-content: center;
		align-content: center;
		-webkit-justify-content: center;
		justify-content: center;
		background-image: url(../images/common/startingnow-slide-arrow-prev.svg);
		background-size:8px 14px;
		background-repeat: no-repeat;
		background-position: center center;
	}
	#page .section-r .slider-verside .slider-page-nation .but.next{
		background-image: url(../images/common/startingnow-slide-arrow-next.svg);
	}
	#page .section-r .slider-verside .slider-page-nation .but.prev:hover{
		animation: pagenation-arrow-prev 1.5s infinite backwards;
	}
	#page .section-r .slider-verside .slider-page-nation .but.next:hover{
		animation: pagenation-arrow-next 1.5s infinite backwards;
	}
@keyframes pagenation-arrow-prev{
	0%{
	 background-position: center center;
	}
	50%{
	 background-position: -20px center;
	}
	51%{
	 background-position: 40px center;
	}
	100%{
	 background-position: center center;
	}
}
@keyframes pagenation-arrow-next{
	0%{
	 background-position: center center;
	}
	50%{
	 background-position: 40px center;
	}
	51%{
	 background-position: -20px center;
	}
	100%{
	 background-position: center center;
	}
}
	#page .section-r .slider-verside .slider-page-nation .pagename{
		width:calc(100% - 80px);
		text-align: center;
	}
	#page .section-r .slider-verside .slider-page-nation .pagename span{
		font-size:12px;
		letter-spacing: 0;
	}
@media (max-width: 768px){
	#page .section-r{
		float:none;
		width:100%;
		padding-top:7vw;
		background-size:70vw auto;
		background-position: 32vw top;
		margin-bottom:24vw;
	}
	#page #strating .section-r{
		padding-top:5vw;
		background-position: right -2vw top;
	}
	#page #alreaday-open .section-r{
		padding-top:7vw;
		background-position: right -2vw top;
	}

	#page .section-r .slider-verside{
		height:100vw;
		margin-top:6vw;
		margin-bottom:0;
	}
	#page .section-r .slider-verside .l{
		width:100%;
		text-align: center;
		display:block;
	}
		#page .section-r .slider-verside .l p{
		  -ms-writing-mode: horizontal-tb;
		  writing-mode: horizontal-tb;
			font-size:4vw;
		}

		#page .section-r .slider-verside .r{
			width:100%;
			height:110vw;
			margin-top:7vw;
		}
		#page #column .section-r .slider-verside .r{
			height:110vw;
		}
		#page .section-r .slider-verside ul{
			display:table;
			position:absolute;
			width:100%;
		}
			#page .section-r .slider-verside ul li{
				padding:0 2vw;
			}
				#page .section-r .slider-verside ul li .box{
					width:46vw;
					height:92vw;
				}
					#page .section-r .slider-verside ul li .box h3{
						width:16vw;
						height:13.92vw;
					}
				#page .section-r .slider-verside ul li .boxin {
					height:78.08vw;
					padding:5vw 0 0;
					background-size: cover;
				}
					#page .section-r .slider-verside ul li .boxin .photo{
						width:36vw;
						height:34.56vw;
						border-radius: 3vw;
					}
					#page .section-r .slider-verside ul li .boxin .comment{
						width:36vw;
						height:27vw;
						margin:2vw auto 3vw;
						overflow: hidden;
					}
						#page .section-r .slider-verside ul li .boxin .comment p{
							font-size:3vw;
							line-height: 1.4;
						}
					#page .section-r .slider-verside ul li .boxin .link{
						width:36vw;
						font-size:2.6vw;
						padding:0 0 1vw 0;
						border-bottom:2px solid #000;
						background-size:4vw 2vw;
					}
						#page .section-r .slider-verside ul li:hover .boxin .link{
							animation:none;
						}

	#page .section-r .slider-verside .slider-page-nation{
		width:40vw;
		bottom:0;
		right:30vw;
		margin:0 auto;
	}
		#page .section-r .slider-verside .slider-page-nation .but{
			background-color: #1d1c3f;
			width:10vw;
			height:10vw;
			border-radius: 5vw;
			background-size:3vw 6vw;
		}
		#page .section-r .slider-verside .slider-page-nation .but.prev:hover
		#page .section-r .slider-verside .slider-page-nation .but.next:hover{
			animation:none;
		}

		#page .section-r .slider-verside .slider-page-nation .pagename{
			width:calc(100% - 20vw);
		}
		#page .section-r .slider-verside .slider-page-nation .pagename span{
			font-size:3.4vw;
		}
}


/*--------------------　Ｑ＆Ａ　--------------------*/
#page.index #qa{
	background-color: #cdb684;
	background-image: url(../images/top2025/qa-back.png);
	background-size:auto;
	background-repeat: no-repeat;
	background-position: center 130px;
	padding:70px 0 0;
	display:table;
	height: 690px;
}
	#page.index #qa h2{
		width:465px;
		margin:0 auto 20px;
	}
		#page.index #qa h2 img{
			width:100%;
		}
	#page.index #qa p{
		text-align: center;
		margin:0 auto 25px;
		color:#000;
	}
	#page.index #qa .img{
		display:table;
		width:770px;
		height:330px;
		position: relative;
		margin:0 auto;
	}
		#page.index #qa .img img:nth-child(1){
			width:475px;
			z-index: 4;
			position: absolute;
			top:0;
			right:0;
		}
		#page.index #qa .img img:nth-child(2){
			width:475px;
			z-index: 5;
			position: absolute;
			top:0;
			left:0;
		}
		#page.index #qa .button-square {
			margin-top:-80px;
		}
@media (max-width: 768px){
	#page.index #qa{
		background-size:98vw;
		background-position: center 14vw;
		padding:10vw 0;
		height: auto;
	}
		#page.index #qa h2{
			width:70vw;
			margin:0 auto 5vw;
		}
		#page.index #qa p{
			margin:0 auto 5vw;
		}
		#page.index #qa .img{
			width:90vw;
			height:auto;
		}
			#page.index #qa .img img:nth-child(1){
				width:80vw;
				z-index: 5;
				position: relative;
			}
			#page.index #qa .img img:nth-child(2){
				width:80vw;
				z-index: 5;
				position: relative;
				margin:-25vw 0 0;
			}
			#page.index #qa .button-square {
				position: relative;
				margin:2vw auto 0;
				z-index: 30;
			}
}


/*--------------------　お客様の声　--------------------*/
#page.index #voice{
	padding:190px 0;
	display:table;
}
	#page.index #voice .movie{
		width:950px;
		margin:50px auto 0;
	}
		#page.index #voice .movie li{
			width:425px;
			height:316px;
			overflow: hidden;
		}
		#page.index #voice .movie li iframe {
	    width: 100%;
	    min-height: 352px;
		}
		#page.index #voice .movie li img{
			width:100%;
			position:relative;
			overflow: hidden;
			transition: all 0.2s linear;
			z-index: 5;
		}
		#page.index #voice .movie li a:hover img {
			transform: scale(1.1);
		}
@media (max-width: 768px){
	#page.index #voice{
		padding:24vw 0 18vw;
	}
		#page.index #voice .movie{
			width:80vw;
			margin:8vw auto 0;
		}
			#page.index #voice .movie li{
				width:100%;
				height:auto;
				overflow: hidden;
				margin:0 auto 7vw;
			}
			#page.index #voice .movie li a:hover img {
				transform: scale(1);
			}
}


/*--------------------　京兼醸造の商品　--------------------*/
#page.index #line-up{
	padding:0 0 120px;
	display:table;
}
	#page.index #line-up ul{
		margin:50px auto 0;
	}
		#page.index #line-up ul li{
			width:290px;
			overflow: hidden;
			border-radius: 10px;
		}
		#page.index #line-up ul li img{
			width:100%;
			position:relative;
			overflow: hidden;
			transition: all 0.2s linear;
			z-index: 5;
		}
		#page.index #line-up ul li a:hover img {
			transform: scale(1.1);
		}
@media (max-width: 768px){
	#page.index #line-up{
		padding:0 0 19vw;
	}
		#page.index #line-up ul{
			margin:8vw auto 0;
		}
			#page.index #line-up ul li{
				width:40vw;
				margin:0 auto 5vw;
			}
}

/*--------------------　京兼醸造の商品　--------------------*/
#page.index #interview{
	padding:0 0 190px;
	display:table;
}
	#page.index #interview .box{
		margin:50px auto 0;
		position:relative;
		overflow: hidden;
		border-radius: 10px;
	}
		#page.index #interview .box .backimg img{
			width:100%;
			position:relative;
			overflow: hidden;
			transition: all 0.2s linear;
			z-index: 4;
		}
		#page.index #interview .box p{
			position: absolute;
			top:30px;
			right:140px;
			width:94px;
			z-index: 5;
		}
			#page.index #interview .box p img{
				width:100%;
			}

	#page.index #interview .box:hover{
		border-radius: 18px;
	}
		#page.index #interview .box:hover .backimg img{
			transform: scale(1.1);
		}
		#page.index #interview .box:hover p img{
			opacity: 1;
		}
@media (max-width: 768px){
	#page.index #interview{
		padding:0 0 24vw;
		display:table;
	}
		#page.index #interview .box{
			margin:8vw auto 0;
			overflow: hidden;
		}
			#page.index #interview .box .backimg img{
				width:160%;
				margin-left:-20vw;
			}
			#page.index #interview .box p{
				position: absolute;
				top:3vw;
				right:6vw;
				width:18vw;
			}
				#page.index #interview .box p img{
					width:100%;
				}
}



/*--------------------　京兼醸造のサポート　--------------------*/
#page.index #suport{
	padding:0 0 190px;
	display:table;
}
	#page.index #suport .box{
		margin:70px auto 0;
		display:table;
	}
	#page.index #suport .boxin{
		width:100%;
		margin:0 0 100px;
		display:table;
	}
		#page.index #suport .box .comment{
			width:385px;
		}
			#page.index #suport .box .comment h3{
				font-size:28px;
				font-weight:bold;
				line-height:1.5;
				margin-bottom:35px;
			}
			#page.index #suport .box .comment p{
				font-size:13px;
			}
		#page.index #suport .box .photo{
			width:450px;
			border-radius: 10px;
			position: relative;
			overflow: hidden;
		}
			#page.index #suport .box .photo img{
				width:100%;
			}
@media (max-width: 768px){
	#page.index #suport{
		padding:0 0 24vw;
	}
		#page.index #suport .box{
			margin:8vw auto 0;
		}
		#page.index #suport .boxin{
			margin:0 0 12vw;
		}
			#page.index #suport .box .comment{
				width:100%;
				float:none;
			}
				#page.index #suport .box .comment h3{
					font-size:4.8vw;
					margin-bottom:4vw;
				}
				#page.index #suport .box .comment p{
					font-size:3.2vw;
				}
			#page.index #suport .box .photo{
				width:70vw;
				float:none;
				border-radius: 3vw;
				margin:4vw auto 0;
			}
}


/*--------------------　コラム　--------------------*/
#page .section-r .slider-verside.slider-column ul li{
	display:table-cell;
	padding:0 5px;
}
	#page .section-r .slider-verside.slider-column ul li .box{
		width:440px;
		height:480px;
		background-color: #fff;
		box-shadow: 1px 1px 3px -1px #423d37;
		border-radius: 10px;
		transition: all 0.2s linear;
	}
		#page .section-r .slider-verside.slider-column ul li .box:hover{
			border-radius: 20px;
		}
	#page .section-r .slider-verside.slider-column ul li .boxin {
		width:100%;
		height:420px;
		background-image: url();
		padding:20px 0 0;
	}
		#page .section-r .slider-verside.slider-column ul li .boxin .photo{
			width:390px;
			height:270px;
			border-radius: 8px;
			overflow: hidden;
			margin:0 auto;
		}
			#page .section-r .slider-verside.slider-column ul li .boxin .photo img{
				width:100%;
				position:relative;
				overflow: hidden;
				transition: all 0.2s linear;
				z-index: 5;
			}
			#page .section-r .slider-verside.slider-column ul li .box:hover .boxin .photo img{
				transform: scale(1.1);
			}
		#page .section-r .slider-verside.slider-column ul li .boxin .comment{
			width:390px;
			height:130px;
			margin:20px auto 10px;
			overflow: hidden;
			text-align: left;
		}
		#page .section-r .slider-verside.slider-column ul li .boxin .comment .category{
			width:80px;
			height:24px;
			border-radius: 3px;
			font-size:10px;
			line-height:1.4;
			display: flex;
			-webkit-align-items: center;
			align-items: center;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-align-content: center;
			align-content: center;
			-webkit-justify-content: center;
			justify-content: center;
			background-color: #8c1e32;
			color:#fff;
		}
			#page .section-r .slider-verside.slider-column ul li .box h3{
				font-size: 17px;
				line-height: 1.4;
				font-weight:bold;
				width:100%;
				height:auto;
				display: -webkit-flex;
				display: flex;
				-webkit-align-items: center;
				align-items: center;
				text-align: left;
				padding:7px 0;
				margin:4px 0 0;
			}
			#page .section-r .slider-verside.slider-column ul li .boxin .comment p{
				font-size:12px;
				line-height:1.4;
			}
		#page .section-r .slider-verside.slider-column ul li .boxin .link{
			width:auto;
			margin:0 20px 0 0;
			padding:0 0 6px 0;
			float:right;
			border-bottom:2px solid #8c1e32;
		}
			#page .section-r .slider-verside.slider-column ul li .boxin .link span{
				color:#8c1e32;
				display:table;
				width:100%;
				font-size:10px;
				line-height:1;
				padding:0 15px 0 0;
				background-image: url(../images/common/startingnow-slide-arrow-rd.svg);
				background-size:10px 5px;
				background-repeat: no-repeat;
				background-position: right center;
			}
			#page .section-r .slider-verside.slider-column ul li .box:hover .boxin .link span{
				animation: showText-link-column-arrow 1s infinite backwards;
			}
@keyframes showText-link-column-arrow{
	0%{
		background-position: right center;
	}
	50%{
		background-position: right -11px center;
	}
	51%{
		background-position: right 11px center;
	}
	100%{
		background-position: right center;
	}
}


@media (max-width: 768px){
	#page .section-r .slider-verside.slider-column ul li{
		padding:0 2vw;
	}
		#page .section-r .slider-verside.slider-column ul li .box{
			width:46vw;
			height:90vw;
		}
		#page .section-r .slider-verside.slider-column ul li .boxin {
			height:100%;
			padding:2vw 0 0;
		}
			#page .section-r .slider-verside.slider-column ul li .boxin .photo{
				width:42vw;
				height:30vw;
				border-radius: 1.5vw;
			}
			#page .section-r .slider-verside.slider-column ul li .boxin .comment{
				width:42vw;
				height:45vw;
				margin:3vw auto 3vw;
				overflow: hidden;
			}
				#page .section-r .slider-verside.slider-column ul li .boxin .comment .category{
					width:18vw;
					height:4.5vw;
					border-radius: 0.5vw;
					font-size:2.8vw;
				}
					#page .section-r .slider-verside.slider-column ul li .box h3{
						font-size: 3.6vw;
						line-height: 1.3;
						display: -webkit-flex;
						display: flex;
						-webkit-align-items: center;
						align-items: center;
						text-align: left;
						padding:1vw 0;
						margin:1.5vw 0 1vw;
					}
					#page .section-r .slider-verside.slider-column ul li .boxin .comment p{
						font-size:3vw;
						line-height:1.4;
						height:18vw;
					}
				#page .section-r .slider-verside.slider-column ul li .boxin .link{
					width:auto;
					margin:0 2vw 0 0;
					padding:0 0 1vw 0;
				}
					#page .section-r .slider-verside.slider-column ul li .boxin .link span{
						width:100%;
						font-size:3vw;
						padding:0 5vw 0 0;
						background-size:3vw 1.5vw;
					}
					#page .section-r .slider-verside.slider-column ul li .box:hover .boxin .link span{
						animation:none;
					}
}


/*--------------------　会社案内　--------------------*/
#page.index #company{
	padding:0 0 120px;
	display:table;
}
	#page.index #company ul{
		margin:50px auto 0;
	}
		#page.index #company ul li{
			width:290px;
			overflow: hidden;
			border-radius: 10px;
		}
		#page.index #company ul li img{
			width:100%;
			position:relative;
			overflow: hidden;
			transition: all 0.2s linear;
			z-index: 5;
		}
		#page.index #company ul li a:hover img {
			transform: scale(1.1);
		}
@media (max-width: 768px){
	#page.index #company{
		padding:0 0 24vw;
		display:table;
	}
		#page.index #company ul{
			margin:8vw auto 0;
		}
			#page.index #company ul li{
				width:40vw;
				overflow: hidden;
				border-radius: 2vw;
				margin:0 auto 5vw;
			}
			#page.index #company ul li a:hover img {
				transform: scale(1);
			}
}