@charset "UTF-8";

#notice {
	display: none;
	color: #F3F1E9;
	line-height: 2em;
	width: 100%;
	height: 100%;
	background: #ff6666;
}
#notice img {
	margin: 30px 0 20px;
}
#notice #mess {
	margin: 10px;
	padding: 10px;
	border: 1px solid #F3F1E9;
}
#notice p {
	margin: 0 1em;
}
#notice a {
	color: #F3F1E9;
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------SP*/
@media screen and (max-width: 667px) {

/*------------------------------------------------------------------------------------------------------------- gallery*/
	#gallery {
		width: 100%;
		height: auto;
		max-height: 325px;
		min-height: 156px;
		margin: 0 auto;
		padding: 0;
		background: #a7bab8;
		background: -webkit-linear-gradient(to bottom, #FFF, #CCC);
		background: -moz-linear-gradient(to bottom, #FFF, #CCC);
		background: linear-gradient(to bottom, #FFF, #CCC);
		overflow: hidden;
		position: relative;
	}
	#url {
		line-height: 0;
		width: 151px;
		height: 13px;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 3px;
		left: 3px;
		z-index: 10001;
	}
	#gallery-title {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: absolute;
		top: 40%;
		left: 0;
		z-index: 10000;
		pointer-events: none;
	}
	#gallery-title img {
		width: 200%;
		margin: 0 -50%;
	}
	#gallery-catch {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		pointer-events: none;
	}
	#gallery-catch img {
		width: 100%;
	}
	.slider {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
		overflow: hidden;
	}
	.slide {
	}
	.slide img {
		width: 100%;
		height: 100%;
	}
/*------------------------------------------------------------------------------------------------------------- scr*/
	#scr {
		display: none;
	}
/*------------------------------------------------------------------------------------------------------------- catch*/
	#catch {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 30px auto;
		background: url(../../img/index/catch_bg.gif) no-repeat center top;
		border-top: 5px solid #deb8bc;
		border-bottom: 5px solid #deb8bc;
		overflow: hidden;
		position: relative;
	}
	#phrase {
		text-align: center;
		overflow: hidden;
		flex: 1;
		margin: 10px;
	}
	#phrase a {
		text-decoration: none;
	}
	#phrase a:hover {
		border-left: 1px dotted #666;
		border-right: 1px dotted #666;
	}
  	#phrase span {
		text-align: left;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		display: inline-block;
		padding: 1em 0;
		box-sizing: border-box;
	}
  	#phrase img {
  		margin-top: 1em;
  		vertical-align: text-top;
	}
	#catch #cnts- {
		display: none;
	}
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------TB*/
@media screen and (min-width: 668px) and (max-width: 959px) {

/*------------------------------------------------------------------------------------------------------------- gallery*/
	#gallery {
		width: 100%;
		height: auto;
		max-height: 468px;
		min-height: 326px;
		margin: 0 auto;
		padding: 0;
		background: #a7bab8;
		background: -webkit-linear-gradient(to bottom, #FFF, #CCC);
		background: -moz-linear-gradient(to bottom, #FFF, #CCC);
		background: linear-gradient(to bottom, #FFF, #CCC);
		overflow: hidden;
		position: relative;
	}
	#url {
		line-height: 0;
		width: 151px;
		height: 13px;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 3px;
		left: 3px;
		z-index: 10001;
	}
	#gallery-title {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: absolute;
		top: 48%;
		left: 0;
		z-index: 10000;
		pointer-events: none;
	}
	#gallery-title img {
		width: 150%;
		margin: 0 -25%;
	}
	#gallery-catch {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		pointer-events: none;
	}
	#gallery-catch img {
		width: 100%;
	}
	.slider {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
		overflow: hidden;
	}
	.slide {
	}
	.slide img {
		width: 100%;
		height: 100%;
	}
/*------------------------------------------------------------------------------------------------------------- scr*/
	#scr {
		display: none;
	}
/*------------------------------------------------------------------------------------------------------------- catch*/
	#catch {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 30px auto;
		background: url(../../img/index/catch_bg.gif) no-repeat center top;
		border-top: 5px solid #deb8bc;
		border-bottom: 5px solid #deb8bc;
		overflow: hidden;
		position: relative;
	}
	#phrase {
		text-align: center;
		letter-spacing: .3em;
		overflow: hidden;
		flex: 1;
		margin: 10px;
	}
	#phrase a {
		text-decoration: none;
	}
	#phrase a:hover {
		border-left: 1px dotted #666;
		border-right: 1px dotted #666;
	}
  	#phrase span {
		text-align: left;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		display: inline-block;
		padding: 1em 0;
		box-sizing: border-box;
	}
  	#phrase img {
  		margin-top: 1em;
  		vertical-align: text-top;
	}
	#catch #cnts- {
		display: none;
	}

}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------PC*/
@media screen and (min-width: 960px), print {

/*------------------------------------------------------------------------------------------------------------- gallery*/
	#gallery {
		width: 100%;
		height: auto;
		max-height: 938px;
		min-height: 370px;
		margin: 0 auto;
		padding: 0;
		background: #a7bab8;
		background: -webkit-linear-gradient(to bottom, #FFF, #CCC);
		background: -moz-linear-gradient(to bottom, #FFF, #CCC);
		background: linear-gradient(to bottom, #FFF, #CCC);
		overflow: hidden;
		position: relative;
	}
	#url {
		line-height: 0;
		width: 151px;
		height: 13px;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 3px;
		left: 3px;
		z-index: 10001;
	}
	#gallery-title {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: absolute;
		top: 47%;
		left: 0;
		z-index: 10000;
		pointer-events: none;
	}
	#gallery-title img {
		width: 100%;
	}
	#gallery-catch {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		pointer-events: none;
	}
	#gallery-catch img {
		width: 100%;
	}
	.slider {
		width: 100%;
		height: auto;
		margin: 0 auto;
		padding: 0;
		overflow: hidden;
	}
	.slide {
	}
	.slide img {
		width: 100%;
		height: 100%;
	}
/*------------------------------------------------------------------------------------------------------------- scr*/
	#scr {
		width: 16px;
		height: 38px;
		margin: 80px auto;
		padding: 0;
	}
/*------------------------------------------------------------------------------------------------------------ container*/
	#container {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

/*------------------------------------------------------------------------------------------------------------- catch*/
	#catch {
		width: 100%;
		height: auto;
		margin: 0 0 198px;
		padding: 30px auto;
		background: url(../../img/index/catch_bg.gif) no-repeat center top;
		border-top: 5px solid #deb8bc;
		border-bottom: 5px solid #deb8bc;
		overflow: hidden;
		position: relative;
	}
	#phrase {
		text-align: center;
		letter-spacing: .3em;
		overflow: hidden;
		flex: 1;
		margin: 10px;
	}
	#phrase a {
		text-decoration: none;
	}
	#phrase a:hover {
		border-left: 1px dotted #666;
		border-right: 1px dotted #666;
	}
  	#phrase span {
		text-align: left;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		display: inline-block;
		margin: 80px auto;
		padding: 1em 0;
		box-sizing: border-box;
	}
  	#phrase img {
  		margin-top: 1em;
  		vertical-align: text-top;
	}
	#catch #cnts- {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute;
		pointer-events: none;
	}
	#catch #cnts- #cp01,
	#catch #cnts- #cp02,
	#catch #cnts- #cp03,
	#catch #cnts- #cp04,
	#catch #cnts- #cp05,
	#catch #cnts- #cp06,
	#catch #cnts- #cp07,
	#catch #cnts- #cp08,
	#catch #cnts- #cp09,
	#catch #cnts- #cp10 {
		width: 200px;
		height: auto;
		position: absolute;
	}
	#catch #cnts- #cp01 { top: 3%; left: calc(50% - 300px);}
	#catch #cnts- #cp02 { top: 7%; right: 10%;}
	#catch #cnts- #cp03 { top: 18%; left: 10%;}
	#catch #cnts- #cp04 { top: 26%; right: calc(50% - 300px);}
	#catch #cnts- #cp05 { top: 39%; left: 25%;}
	#catch #cnts- #cp06 { top: 47%; right: 5%;}
	#catch #cnts- #cp07 { top: 57%; left: 5%;}
	#catch #cnts- #cp08 { bottom: 13%; right: 25%;}
	#catch #cnts- #cp09 { bottom: 8%; left: calc(50% - 400px);}
	#catch #cnts- #cp10 { bottom: 7%; right: 9%;}
	#catch #cnts- img {
		width: 100%;
		box-shadow: 10px 10px rgba(202,151,152,0.5);
	}




}

@-moz-document url-prefix() {
  	#phrase img {
  		vertical-align: middle;
	}
}