@charset "UTF-8";

/*----------------------------------------------------

 Top

----------------------------------------------------*/
#lineup	a	{	color:#333;}
#lineup	a:hover	{
	color:#46a2d7;
	text-decoration:none;
}

/*
 main
----------------------------------------------------*/
#main	section	{	padding:0;}
#main	ul	img	{	width:100%;}
#main	.slider	{	display:none;}

@media screen and (min-width:40em) {
	#main	section	{
		width:auto;
		padding:20px 0 0;
	}
	#main	.slider{  margin:0;}
	#main	.bx-wrapper {
		position: relative;
		margin-bottom:20px;
	}
	#main	.bx-wrapper img {
		width:1200px;
		margin:0 auto;
	}
	#main	.bx-viewport {	height: 480px;}
}


/*
 bnr_youtube
----------------------------------------------------*/

.bnr_youtube {
	text-align:center;
	margin:0 auto;
	padding:30px 10px 0;
}
.bnr_youtube img {
	width:100%;
}
@media screen and (min-width:40em) {
	.bnr_youtube {
		padding:40px 0 0;
	}
	.bnr_youtube img {
		width:600px;
	}
}
/*
 news 2025.11.17 
----------------------------------------------------*/
:root {
  --clr-txt: #333;
  --clr-bk: #000;
  --clr-bk-5: color-mix(in srgb, var(--clr-bk) 5%, transparent);
  --clr-bk-10: color-mix(in srgb, var(--clr-bk) 10%, transparent);
  --clr-bk-20: color-mix(in srgb, var(--clr-bk) 20%, transparent);
  --clr-bk-50: color-mix(in srgb, var(--clr-bk) 50%, transparent);
  --clr-bk-80: color-mix(in srgb, var(--clr-bk) 80%, transparent);
  --clr-red: #d00;
  --clr-gray: #ccc;
  --clr-gray-light: #eee;
  --clr-mizu: #46a2d7;
  --clr-yellow-light: #ffc;
}
#news section {
	position: relative;
}
#news .bklink {
	position: absolute;
	right: 10px;
	top: -40px;
}
#news .kiji-list {
	border-top:1px solid var(--clr-gray);
}
#news .kiji-list a {
  transition: .3s;
}
#news .kiji-list a:hover {
  text-decoration: none;
  transition: .3s;
}
#news .kiji-item {
  border-bottom: 1px dashed var(--clr-gray);
}
#news .kiji-item a {
  display: block;
  padding: 1.5em 30px 1.5em 1em;
  color: var(--clr-txt);
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23333" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" /></svg>');
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right center;
}
#news .data {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
  font-size: 1.1rem;
  color: var(--clr-mizu);
}
#news .data span {
  display: inline-block;
  padding: .4em .5em;
  margin-left: 1em;
  border-radius: 3px;
  background: var(--clr-gray-light);
  color: var(--clr-txt);
}
#news .data .new_label {
  background: var(--clr-red);
  color: #fff;
}
#news .kiji-item .ttl {
  line-height: 1.5;
  font-size: 1.4rem;
}
@media screen and (min-width:640px) {
#news .kiji-list {
}
  #news .data {
    font-size: 1.2rem;
  }
  #news .kiji-item .ttl {
    font-size: 1.5rem;
  }
  #news .kiji-item a:hover {
    background-color: var(--clr-yellow-light);
    opacity: 1;
  }
}

/*
 lineup
----------------------------------------------------*/
#lineup	ul.youto	{
	display:table;
	table-layout:fixed;
	width:100%;
}
#lineup	ul.youto	li	{
	display:table-cell;
	padding:0 5px;
}
#lineup	ul.youto	a	{
	display:block;
	background-position: center top;
	background-size:auto 100%;
	background-repeat:no-repeat;
	padding:60px 0 10px;
	border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
#lineup	ul.youto	strong	{
	background:rgba(255,255,255,0.9);
	display:block;
	padding:2px 0 0;
	text-align:center;
}
#lineup	.youto01	a	{	background-image:url(../../products/img/lineup01.jpg?2404);}
#lineup	.youto02	a	{	background-image:url(../../products/img/lineup02.jpg?2404);}
#lineup	.youto03	a	{	background-image:url(../../products/img/lineup03.jpg);}

@media screen and (min-width:40em) {
	#lineup	.box	{
		border:1px solid #ccc;
		padding-bottom:0;
	}
	#lineup	ul.youto	{	table-layout:fixed;}
	#lineup	ul.youto	{	border-top:0;}
	#lineup	ul.youto	li	{
		padding:6px;
		border-right:1px solid #ccc;
	}
#lineup	ul.youto	li	br	{
	display:none;
}
	#lineup	ul.youto	li:last-child	{	border-right:0;}
	#lineup	ul.youto	a	{
		transition: 0.5s;
		background-position: center center;
		background-size: 100% auto;
		height:200px;
		position:relative;
		font-size:1.4rem;
		letter-spacing:0.2em;
		border-radius:0;
		-webkit-border-radius:0;
		border-radius:0;
	}
	#lineup	ul.youto	strong	{
		position:absolute;
		bottom:20px;
		display:inline-block;
		padding:7px 10px 5px 10px;
		text-align:left;
	}
	#lineup	ul.youto	strong:before	{
		content:'\25B6\FE0E';
		color:#46a2d7;
		padding-right:4px;
	}
	#lineup	ul.youto	a:hover {
		@include transform(rotate(10deg));
		background-size: 120% auto;
	}
}

/*
 construction
----------------------------------------------------*/
#construction img {
	width: 100%;
}
#construction img.pc {
	display: none;
}
@media screen and (min-width:40em) {
	#construction img.sp {
	display: none;
}
	#construction img.pc {
	display: block;
}
}


/*
 topics
----------------------------------------------------*/
#topics		{}
#topics	ul	{
	width:100%;
	text-align:center;
}
#topics	ul	img	{	width:100%;}
#topics	li	{
	display:inline-block;
	width:49%;
	padding:5px;
	font-size:0;
}
@media screen and (min-width:40em) {
	#topics	li	{
		float:left;
		display:block;
		padding:0;
		/*width:30%;
		margin:0 5% 0 0;*/
		width: 230px;
		margin-right: 20px;
	}
	#topics	li:last-of-type	{
		margin-right: 0px;
	}
	/*#topics	li:nth-child(3n)	{	margin-right:0;}*/
}




/*
 sns
----------------------------------------------------*/
#sns	ul	{
	display:table;
	width:100%;
	padding:10px 0;
}
#sns	ul	li	{
	display:table-cell;
	width:33%;
	vertical-align:middle;
	text-align:center;
}
#sns	ul	li:nth-child(2)	{
	border-left:1px dashed #ccc;
	/*border-right:1px dashed #ccc;*/
}
#sns	li	a	{
	display:block;
	width:80px;
	padding-top:75px;
	margin:0 auto;
	background-size:50px auto;
	background-position:center 10px;
	background-repeat:no-repeat;
}
#sns	li.sns01	a	{	background-image:url(../icon/c/icon_fb.svg);}
#sns	li.sns02	a	{	background-image:url(../icon/c/icon_insta.svg);}
#sns	li.sns03	a	{	background-image:url(../icon/c/icon_youtube.svg);}






/*
 useful
----------------------------------------------------*/
#contact	{	padding-bottom:30px;}
#contact	section	a	{
	border:1px solid #ccc;
	display:block;
	padding:20px 20px 20px 45%;
	background:url(../../img/bg_conact.jpg) no-repeat left center;
	background-size:200px auto;
	position:relative;
}
#contact	section	a:after	{
	position:absolute;
	content:'';
	display:block;
	top:50%;
	right:10px;
	width:8px;
	height:8px;
	margin-top:-4px;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	transform:rotate(-45deg);
}
#contact	section	p	{	color:#333;}
#contact	.ctt	{	padding:0 0 10px;}
#contact	.ctt	h2	{	color:#999
}

@media screen and (min-width:40em) {
#contact	{	padding-bottom:60px;}
#contact	section	a	{
	padding:40px 30px 40px 60%;
	background-size:500px auto;
}
#contact	section	p	{	font-size:1.6rem;}
#contact	section	a:hover	{
	text-decoration:none;
	opacity:0.6;
}
}