@charset "utf-8";

/* baseのtop調整 */
#home #main-box{padding:0 0 25px; background:white; max-width:none; margin:0 auto; position:inherit;}
h1{padding:0 15px;}
h1 img{margin:80px auto 0; text-align:center; width:100%; height:auto;}
h2{position:inherit; width:auto; height:auto; padding:0 15px; background-size:none;}
h2 img{position:inherit; margin:10px auto 20px; text-align:center; width:100%; height:auto;}
@media screen and (max-width: 768px) {
	h1 img{margin:45px auto 0;}
}
@media screen and (max-width: 480px) {
	h1 img{margin:50px auto 0;}
}
#mv{
	width: 100%;
	height: 100vh;
	background: #3a3c4f;
}
.slide_box{
	width: 100%;
}
.slide_box img{
	width: 100%;
}
.slide_box {
	position: relative;
}
/* progress bar */
.slider-progress {
  width: 100%;
  height: 5px;
  background: transparent;
  position: absolute;
  bottom:0;
}
.slider-progress .progress {
  width: 0%;
  height: 5px;
  background: #3a3c4f;
}
/**************************************************************************/

/* メニューロゴ(top用) */
#tojiro-header{margin-top:0;}
#tojiro-header #hd-logo{width:90px; height:82px; left:25px; z-index:2;}
#tojiro-header #hd-logo img{width:100%; height:auto; margin-top:-10px;}

#globalmenu{z-index:2;}

#tojiro-header #globalmenu .gmlv2{top:auto;bottom:78px;}
#tojiro-header.globalUp #globalmenu .gmlv2{top:78px;bottom:auto;}

/* 音の入切 */
#sound_button{width:26px; height:15px; padding:10px; position:absolute; top:23px; right:5px; cursor:pointer;}

.sound_on{background:url(../img/sound_on.png) no-repeat; background-position:center;}
.sound_off{background:url(../img/sound_off.png) no-repeat; background-position:center;}
@media screen and (max-width: 1095px) {
	/* ロゴ */
	#tojiro-header #hd-logo{width:75px; height:auto; margin-left:-37.5px; position:absolute; left:47%; bottom:5px;}
	#tojiro-header #hd-logo img{margin-top:-20px;}
	#sound_button{top:15px;}

#tojiro-header #hd-logo{z-index:2;}
#tojiro-header #sp-globalmenu{top:auto;bottom:62px;z-index:1;}
#tojiro-header.globalUp #sp-globalmenu{top:62px;bottom:auto;}

#tojiro-header #sp-globalmenu ul{padding-bottom:15px;background-color:#3A3C4F;}
#tojiro-header #sp-globalmenu ul ul{padding-bottom:0px;}
#tojiro-header.globalUp #sp-globalmenu ul{padding-bottom:0px;}

}
/******************************************************************************/

/* メインビジュアル & ロード */
/*#mainvisual{position:relative; background:#3a3c4f;}*/
#mainvisual{width:100%;height:100%;position:relative;overflow:hidden;}
#mainvisual #movie{position:absolute; background:white;}

#mainvisual #movie video{background:#fff;}
#mainvisual #movie video source{display:none;}

#mainvisual #movie #moviebg{width:auto; min-width:100%; height:auto; min-height:100%; position:fixed; right:0; bottom:0; background:#FFF no-repeat center 50% / cover; z-index:-100;}

#mainvisual #load_bg{width:auto; min-width:100%; height:auto; min-height:100%; background:#3a3c4f;}
#mainvisual #load{position:absolute; top:50%; left:50%; margin-bottom:15px; margin-left:-15px; z-index:1;}
#mainvisual #loadbg{width:100%; height:100%; z-index:0;}
@media screen and (max-width: 768px) {
	#mainvisual #movie video{display:none;}
	#mainvisual #movie #moviebg{background:url(../img/movie_img06.png) no-repeat center 50% / cover;}
	#sound_button{display:none;}
}
/******************************************************************************/

/* お知らせ */
#news{margin:0 auto 25px; padding:0 0 25px; font-size:15.6px; background:#eeeeee;}
#news #newsh{width:100%; background:#3a3c4f; padding:25px 0;color: #fff;font-size: 22px;}
#news h1 img{margin:0 auto; max-width:81px; height:auto;}
#news table{margin:40px auto 0; border-collapse:separate; border-spacing:0 5px;}
#news td, #news th{padding:0 15px; text-align:center;}
#news td{padding-top:10px; padding-bottom:35px;}
#news .newsbox{font-size:15.6px;}
#news .newsbox .days{width:50%; font-size:16.8px; color:#868888; text-align:right; font-weight:bold; vertical-align:middle; padding-left:7px;}
#news .newsbox .category{width:50%; font-size:12px; text-align:left; border-left:1px solid #3a3c4f; vertical-align:middle;}
@media screen and (max-width: 768px) {
	#news table{width:80%;}
}
@media screen and (max-width: 480px) {
	#news table{width:90%;}
}
/*--------------------------------info_top--------------------------------*/
.info_out{
	max-width:900px;
	margin:0 auto;
	padding:60px 0 0 0;
}
.info_in{
	max-width:890px;
	overflow:auto;
	background-color:rgba(255,255,255,0);
}

.info_box{
	max-width:870px;
	margin:0 auto;
	overflow:hidden;
	padding:0 0 40px 0;
}
.info_img{
	float:left;
	padding:0 20px 5px;
	margin:0;
}
.info_img a img{
	transition:opacity 0.3s linear;
	width: 200px;
	height: auto;
}
.info_img a img:hover{
	opacity:0.5;
}
.info_text{
	width:560px;
	float:left;
	padding:0 0 0 280px;
	font-size:13px;
}
.info_text span{
	text-decoration:none;
}
.info_top_date{
	font-size:85%;
}
.info_top_ctgr{
	font-size:70%;
}
.info_top_title{
	font-size:100%;
}
.info_in p{
/* 	line-height:0; */
	color:#3a3c4f;
	padding:0;
}
.info_in span{
	font-weight:bold;
}
.info_in a{
	text-decoration:none;
}
.info_in a:link,
.info_in a:visited{
	color:#3a3c4f;
}
.info_in a:hover,
.info_in a:active{
	text-decoration:underline;
}
.all{
	text-align:center;
	padding:20px 0 30px 0;
}
@media screen and (max-width: 768px) {

	.info_out{
		width:90%;
		max-width:700px;
		margin:0 auto;
	}
/*
	.info_in{
		width:inherit;

		margin:0 auto;
		overflow-y: scroll;
		background-color:rgba(255,255,255,0);
		border:1px solid #cacccc;
		padding:5px;
	}

*/
	.info_box{
		width:100%;
		max-width:680px;
		margin:0 auto;
		padding:20px 0;
	}
	.info_img img{
		padding:0 20px;
	}
	.info_text{
		display:none;
	}
	.info_text span{
		text-decoration:none;
	}
	.info_top_date{
		font-size:85%;
	}
	.info_top_ctgr{
		font-size:70%;
	}
	.info_top_title{
		font-size:100%;
	}
	.info_in p{
		color:#3a3c4f;
		padding:0 10px;
	}
	.info_in span{
		font-weight:bold;
	}
	.info_in a{
		text-decoration:none;
	}
	.info_in a:link,
	.info_in a:visited{
		color:#3a3c4f;
	}
	.info_in a:hover,
	.info_in a:active{
		text-decoration:underline;
	}
	.all{
		text-align:center;
		padding:20px 0 14px 0;
	}
	}
	@media screen and (max-width: 668px) {

	.info_out{
		width:90%;
		max-width:600px;
		margin:0 auto;
	}
/*
	.info_in{
		width:inherit;
		max-height:300px;
		margin:0 auto;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		background-color:rgba(255,255,255,0);
		border:1px solid #cacccc;
		padding:4px;
	}
*/

	.info_box{
		width:inherit;
		margin:0 auto;
		padding:10px 0;
	}
	.info_img{
		display:none;
	}
	.info_text{
		display:none;
	}
	.info_text span{
		text-decoration:underline;
	}
	.info_in p{
		line-height:0;
		color:#3a3c4f;
		padding:0;
		font-size:10px;
	}
	.info_in span{
		font-weight:bold;
	}
	.info_top_date{
		font-size:120%;
	}
	.info_top_ctgr{
		font-size:110%;
	}
	.info_top_title{
		font-size:150%;
	}
	.info_in a{
		text-decoration:none;
	}
	.info_in a:link,
	.info_in a:visited{
		color:#3a3c4f;
	}
	.info_in a:hover,
	.info_in a:active{
		text-decoration:underline;
	}
	.all{
		text-align:center;
		padding:20px 0 14px 0;
	}
}
@media screen and (max-width: 480px) {

	.info_out{
		width:90%;
		margin:0 auto;
	}
/*
	.info_in{
		width:inherit;
		max-height:300px;
		margin:0 auto;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		background-color:rgba(255,255,255,0);
		border:1px solid #cacccc;
		padding:4px;
	}
*/

	.info_box{
		width:inherit;
		margin:0 auto;
		padding:20px 0;
	}
	.info_img{
		display:none;
	}
	.info_text{
		display:none;
	}
	.info_text span{
		text-decoration:underline;
	}
	.info_in p{
		line-height:0;
		color:#3a3c4f;
		padding:0;
		font-size:10px;
	}
	.info_in span{
		font-weight:bold;
	}
	.info_top_date{
		font-size:75%;
	}
	.info_top_ctgr{
		font-size:62.5%;
	}
	.info_top_title{
		font-size:95%;
	}
	.info_in a{
		text-decoration:none;
	}
	.info_in a:link,
	.info_in a:visited{
		color:#3a3c4f;
	}
	.info_in a:hover,
	.info_in a:active{
		text-decoration:underline;
	}
	.all{
		text-align:center;
		padding:20px 0 14px 0;
	}
}
/*--------------------------------info_top--------------------------------*/
/******************************************************************************/

/* ギャラリー、アトリエ、ファクトリー */
#gallery,#atelier,#factory{background:#eeeeee; margin-top:25px;}

.contents-box .slidebox{display:block;}

.contents-box .slidebox .slider,
.contents-box .slidebox .slider2,
.contents-box .slidebox .slider3{position:relative; width:100%; height: auto;}

.contents-box .slidebox .slider img,
.contents-box .slidebox .slider2 img,
.contents-box .slidebox .slider3 img{position:absolute; width:100%; height: auto; top: 0; left:0; z-index: 1; opacity: 0.0;}

.contents-box .slidebox .slider img.active,
.contents-box .slidebox .slider2 img.active,
.contents-box .slidebox .slider3 img.active{z-index: 3; opacity: 1.0;}

.contents-box .slidebox .slider img.last-active,
.contents-box .slidebox .slider2 img.last-active,
.contents-box .slidebox .slider3 img.last-active{z-index: 2;}


.progressWrapper {width: 100%; z-index:15; margin-top:-4.8px; position:relative; }
.progressWrapper div{width:0%; height:5px; background:#3a3c4f; position:absolute; top:0;}

.contents_main_img img{width:100%; height:auto;}
.contents-box p{width:100%; max-width:595px; margin:0 auto; line-height:195%;box-sizing: border-box; }
.contents-box p.txt{width:100%; max-width:100%; margin:0 auto 30px; line-height:195%; text-align: justify;}

.contents-box .textbox{margin:0 auto; text-align: justify;}
.contents-box .map{margin:70px auto;}
.contents-box .open{position:relative; width:100%; max-width:595px; height:31px; margin:0px auto 20px; overflow:hidden;}
.contents-box .open img{position:absolute; top:0; left:50%; margin-left:-297.5px;}

.contents-box .switch{width:100%; margin:0 auto; text-align:center; padding:60px 0 90px;}
.contents-box .switch a{display:inline-block; width:298px; border:1px solid #3a3c4f; margin:0 auto; padding:22px 0; text-decoration:none; transition: background-color 0.5s, color 0.5s;}
.contents-box .switch a:hover{background-color: rgba(58,60,79,1); color:white;}
.contents-box .factory_link{
	width:100%;
	margin:0 auto;
	text-align:center;
	padding:60px 0 90px;
}
.contents-box .factory_link a{
	display:inline-block;
	width:298px;
	border:1px solid #3a3c4f;
	margin:0 auto;
	padding:22px 0;
	text-decoration:none;
	transition:background-color 0.5s, color 0.5s;
}
.contents-box .factory_link a:hover{
	background-color:rgba(58,60,79,1);
	color:#fff;
}
/*#atelier .switch{line-height:20px;}
#atelier .switch a span{font-size:14px; line-height:20px;}*/

#gallery h1 img{max-width:436px;}
#gallery h2 img{max-width:199px;}
#atelier h1 img{max-width:419px;}
#atelier h2 img{max-width:178px;}
#factory h1 img{max-width:442px;}
#factory h2 img{max-width:207px;}

#gallery .switch br{display:none;}
#gallery .switch #gs01{width:273px; margin-right:22.5px;}
#gallery .switch #gs02{width:273px; margin-left:22.5px;}

/*#factory .switch a{border-color:#777777; background-color:none; color:#777777; transition:background-color 0s, color 0s; pointer-events:none; cursor:•default;}
#factory .switch a:hover{text-decoration:none; background:none; pointer-events: none;}*/
@media screen and (max-width: 768px) {
	#gallery,#atelier,#factory{margin-top:20px;}
	.contents-box p{width:80%; line-height:180%;}
	.contents-box .switch{padding:40px 0 50px;}
	.contents-box .switch a{padding:17px 0;}

	#gallery .switch br{display:inline;}
	#gallery .switch #gs01{margin:0 auto 20px;}
	#gallery .switch #gs02{margin:20px auto 0;}
}
@media screen and (max-width: 480px) {
	#gallery,#atelier,#factory{margin-top:15px;}
	.contents-box p{width:90%; font-size:15.6px;}
	.contents-box .textbox{margin:0 25px;width:auto;}
	.contents-box .switch a{width:273px; padding:15px 0;}
	.contents-box .map{
		margin:40px auto;
		width:70%;
		height:auto;
		}

	#gallery .switch #gs01{margin:0 auto 10px;}
	#gallery .switch #gs02{margin:10px auto 0;}
}
/******************************************************************************/