@charset "euc-jp";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/* モバイルレイアウト : 480 px およびそれ以下. */


/* 画面上部の帯 */
#top_belt {
	max-width: 960px;
	height: 15px;
	margin: 0 auto;
	background-color: #FFFFFF;
}
/*スライダー全体のコンテナー*/
#stage {
	position: relative;
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #FFFFFF;
	text-align: center;
}
/*全ラジオボタンを非表示に*/
#r1,#r2,#r3,#r4,#r5,#back1,#back2,#back3,#back4,#back5,#next1,#next2,#next3,#next4,#next5 {
	display: none;
}
/* 表示切換えボタンと表示位置 */
.circ img {
	position: absolute;
	bottom:3%;
	cursor: pointer;
}
#lb1 img { left: 40%;width:3%; }
#lb2 img { left: 43%;width:3%; }
#lb3 img { left: 46%;width:3%; }
#lb4 img { left: 49%;width:3%; }
#lb5 img { left: 52%;width:3%; }
/* 左右送りボタン */
.pb, .nb {
	color: #999;
	font-weight: bold;
	font-size: 26px;
	display: block;
	position: absolute;
	top: 45%;/*z-index:200;pointer-events:auto;*/
}
.pb { left:0.5%; }
.nb { left:96.5%; }
.pb:hover, .nb:hover { color:orange; cursor:pointer; }
/* stageが初期サイズ以下のなったときのサイズ */

.slidebox {
	width:100%;
	margin:0 auto;
}
.kurukuruarrowleft {
	position: absolute;
    left:10px;
    top:100px;
	font-size:25px;
	font-weight:bold;
	color:#000;
}
.kurukuruarrowright {
	position: absolute;
    right:10px;
    top:100px;
	font-size:25px;
	font-weight:bold;
	color:#000;
}


@media screen and (max-width: 660px) { .pb, .nb { font-size:18px; } }
/*全表示スライドのコンテナー*/

#photos {
	position: absolute;
	width:100%;
	height:90%; /*100%;*/
	left: 4.55%;
	opacity:0;
	/*pointer-events: none;*/
	animation:flowSlides 40s infinite;
}
/* 個々のスライド・現スライド標示ボタン */
.pic {
	position: absolute;
	width:100%;
	height:100%;
}
.pic img:nth-child(1) { width:89%; margin-left:4%; }
.pic img:nth-child(2) {
	width: 3%;
	bottom: 3%;/*2.5%;*/
}

/*表示スライドをphotosの中に横並びで一列に並べる*/
#photo1 { left: 0; }
#photo2 { left: 960px; }
#photo3 { left: 1920px; }
#photo4 { left: 2880px; }
#photo5 { left: 3840px; }
/* 写真の下に現スライド標示ボタンを配置 */
#photo1 img:nth-child(2) {
	position: absolute;
	width: 3%;
	left: 40%;
	text-align: center;
}
#photo2 img:nth-child(2) { position:absolute;left:43%;width:3%; }
#photo3 img:nth-child(2) { position:absolute;left:46%;width:3%; }
#photo4 img:nth-child(2) { position:absolute;left:49%;width:3%; }
#photo5 img:nth-child(2) { position:absolute;left:52%;width:3%; }
/*チェックされたドットに相当するスライドが画面中央になるようにphotosを移動*/
#r1:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
#r2:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#r3:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#r4:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#r5:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
/* 左右送りボタン */
#back1:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
#back2:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
#back3:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#back4:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#back5:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#next1:checked ~ #photos { animation:flowSlides2 40s infinite; animation-delay:-8s; }
#next2:checked ~ #photos { animation:flowSlides3 40s infinite; animation-delay:-16s; }
#next3:checked ~ #photos { animation:flowSlides4 40s infinite; animation-delay:-24s; }
#next4:checked ~ #photos { animation:flowSlides5 40s infinite; animation-delay:-32s; }
#next5:checked ~ #photos { animation:flowSlides1 40s infinite; animation-delay: 0s; }
/* 初期スライドショー */
@keyframes flowSlides {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	18% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-960px; opacity:0; }
	22% { left:-960px; opacity:1; }
	38% { left:-960px; opacity:1; }
	40% { left:-960px; opacity:0; }
	40.01% { left:-1920px; opacity:0; }
	42% { left:-1920px; opacity:1; }
	58% { left:-1920px; opacity:1; }
	60% { left:-1920px; opacity:0; }
	60.01% { left:-2880px; opacity:0; }
	62% { left:-2880px; opacity:1; }
	78% { left:-2880px; opacity:1; }
	80% { left:-2880px; opacity:0; }
	80.01% { left:-3840px; opacity:0; }
	82% { left:-3840px; opacity:1; }
	98% { left:-3840px; opacity:1; }
	100% { left:-3840px; opacity:0; }
}
/* 各スライド向けスライドショー */
@keyframes flowSlides1 {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	18% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-960px; opacity:0; }
	22% { left:-960px; opacity:1; }
	38% { left:-960px; opacity:1; }
	40% { left:-960px; opacity:0; }
	40.01% { left:-1920px; opacity:0; }
	42% { left:-1920px; opacity:1; }
	58% { left:-1920px; opacity:1; }
	60% { left:-1920px; opacity:0; }
	60.01% { left:-2880px; opacity:0; }
	62% { left:-2880px; opacity:1; }
	78% { left:-2880px; opacity:1; }
	80% { left:-2880px; opacity:0; }
	80.01% { left:-3840px; opacity:0; }
	82% { left:-3840px; opacity:1; }
	98% { left:-3840px; opacity:1; }
	100% { left:-3840px; opacity:0; }
}
@keyframes flowSlides2 {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	18% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-960px; opacity:0; }
	22% { left:-960px; opacity:1; }
	38% { left:-960px; opacity:1; }
	40% { left:-960px; opacity:0; }
	40.01% { left:-1920px; opacity:0; }
	42% { left:-1920px; opacity:1; }
	58% { left:-1920px; opacity:1; }
	60% { left:-1920px; opacity:0; }
	60.01% { left:-2880px; opacity:0; }
	62% { left:-2880px; opacity:1; }
	78% { left:-2880px; opacity:1; }
	80% { left:-2880px; opacity:0; }
	80.01% { left:-3840px; opacity:0; }
	82% { left:-3840px; opacity:1; }
	98% { left:-3840px; opacity:1; }
	100% { left:-3840px; opacity:0; }
}
@keyframes flowSlides3 {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	18% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-960px; opacity:0; }
	22% { left:-960px; opacity:1; }
	38% { left:-960px; opacity:1; }
	40% { left:-960px; opacity:0; }
	40.01% { left:-1920px; opacity:0; }
	42% { left:-1920px; opacity:1; }
	58% { left:-1920px; opacity:1; }
	60% { left:-1920px; opacity:0; }
	60.01% { left:-2880px; opacity:0; }
	62% { left:-2880px; opacity:1; }
	78% { left:-2880px; opacity:1; }
	80% { left:-2880px; opacity:0; }
	80.01% { left:-3840px; opacity:0; }
	82% { left:-3840px; opacity:1; }
	98% { left:-3840px; opacity:1; }
	100% { left:-3840px; opacity:0; }
}
@keyframes flowSlides4 {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	18% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-960px; opacity:0; }
	22% { left:-960px; opacity:1; }
	38% { left:-960px; opacity:1; }
	40% { left:-960px; opacity:0; }
	40.01% { left:-1920px; opacity:0; }
	42% { left:-1920px; opacity:1; }
	58% { left:-1920px; opacity:1; }
	60% { left:-1920px; opacity:0; }
	60.01% { left:-2880px; opacity:0; }
	62% { left:-2880px; opacity:1; }
	78% { left:-2880px; opacity:1; }
	80% { left:-2880px; opacity:0; }
	80.01% { left:-3840px; opacity:0; }
	82% { left:-3840px; opacity:1; }
	98% { left:-3840px; opacity:1; }
	100% { left:-3840px; opacity:0; }
}
@keyframes flowSlides5 {
	0% { left:0px; opacity:0; }
	2% { left:0px; opacity:1; }
	18% { left:0px; opacity:1; }
	20% { left:0px; opacity:0; }
	20.01% { left:-960px; opacity:0; }
	22% { left:-960px; opacity:1; }
	38% { left:-960px; opacity:1; }
	40% { left:-960px; opacity:0; }
	40.01% { left:-1920px; opacity:0; }
	42% { left:-1920px; opacity:1; }
	58% { left:-1920px; opacity:1; }
	60% { left:-1920px; opacity:0; }
	60.01% { left:-2880px; opacity:0; }
	62% { left:-2880px; opacity:1; }
	78% { left:-2880px; opacity:1; }
	80% { left:-2880px; opacity:0; }
	80.01% { left:-3840px; opacity:0; }
	82% { left:-3840px; opacity:1; }
	98% { left:-3840px; opacity:1; }
	100% { left:-3840px; opacity:0; }
}



@media only screen and (max-width: 769px) {

.textleft{
    text-align:center;
	width:90%;
	margin-left:15px;
}
.gray{
    padding-top:100px;
	margin-top:-100px;
}


.anchor{
padding-top:100px;
margin-top:-100px
}

}


/* デスクトップレイアウト : 769 px 〜最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {


.textleft{
	text-align:center;
}

.gray{
    padding-top:100px;
	margin-top:-10px;
}

.anchor{
padding-top:100px;
margin-top:-100px
}

.pic {
	position: absolute;

	width:100%;
	height:100%;
}
.pic img:nth-child(1) { width:90.9%; margin-left:0.5%; }
.pic img:nth-child(2) { width:3%; bottom:-3.8%; /*2.5%;*/ }

.slidebox {
	width:950px;
	margin:0 auto;
}
.kurukuruarrowleft {
	position: absolute;
    left:15px;
    top:280px;
	font-size:40px;
	font-weight:bold;
	color:#000;
}
.kurukuruarrowright {
	position: absolute;
    right:15px;
    top:280px;
	font-size:40px;
	font-weight:bold;
	color:#000;
}

}