@charset "utf-8";
/* CSS Document */

.pc {display: block;}
.smp {display: none;}
body , html {margin: 0; padding: 0;}
h1 , h2 , h3 , h4 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 100%;
	}

ul {margin:0;padding:0;list-style: none;}
dl , dt , dd {margin:0;padding:0; font-weight: normal;}
p {margin: 0; padding: 0;}
a img {
	border: none;
	text-decoration: none;
	}

img {
	max-width: 100%;
	height: auto;
	}

.ie8 img {width: auto;}
	
#IEcaution {
	background: #F00;
	color: #fff;
	font-size: 1.3em;
	text-align: center;
	}

.red {color: #C00;}
.large {font-size: 1.4em;}
.bold {font-weight: bold;}
.underline {text-decoration: underline;}
.thumb {
	float: right;
	margin: 0 0 15px 15px;
	}
a {
		transition: all .3s ease-in-out 0s;
	-moz-transition: all .3s ease-in-out 0s;
	-webkit-transition: all .3s ease-in-out 0s;
	-ms-transition: all .3s ease-in-out 0s;
	}
a:hover {
	text-shadow: #9FF 1px 1px 3px;
	}
	
iframe[src^="cdn"] {height: 60px;	}

body {	
width: 100%;
font: 17px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.7;
	background-image:url(img/bg-items2.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom center;
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-ms-background-size: cover;
}

main {width: 900px;
margin: 0 auto;
background: url(img/bg-separate-line.png) left 20px repeat-y;
}

.body-inner {
	width: 900px;
	margin: 0 auto 20px;
	padding-bottom: 20px;
	
	background-image:
	 url(img/bg-separate-line.png) ,
	  url(img/bg-separate-line.png)
	 ;
	background-position:
	right 0 ,
	left 20px;
	background-repeat: 
	repeat-y , 
	repeat-y;
	background-color: rgba(255,255,255,.9);

	box-shadow: rgba(255,255,255,1) 0 0 10px 10px;
	-moz-box-shadow: rgba(255,255,255,1) 0 0 10px 10px;
	-webkit-box-shadow: rgba(255,255,255,1) 0 0 10px 10px;
	-ms-box-shadow: rgba(255,255,255,1) 0 0 10px 10px;
	-o-box-shadow: rgba(255,255,255,1) 0 0 10px 10px;	
	}
.ie8 .body-inner {background-color: #fff;}
		
.body-inner p , .prf p {
	margin-bottom: 25px;
	}
	
.wrp {
	width: 800px;
	margin: 0 auto;
	 }
	
#header {
	width: 100%;
	height: auto;
	margin-bottom: 30px;
	text-align: center;

	position: relative;
	}
#header h1 img{
	max-width: 100%;
	height: auto;
	}
.ie #header h1 img{ width: auto;}

#introduction {
	width: 900px;
	margin: 0 auto;
	text-align: center;
	}
#introduction .pc , 
#introduction .smp {margin: 0 auto;} 
/**********************************************************************Form*/


.body-form {
	width: 95%;
	margin: 40px auto 0;
	position: relative;
	}

.body-form:before {
	content: url(img/form-arrow_left.png);
	position: absolute;
	left: -100px;
	top: 20px;
	z-index: 311;
	}
.body-form:after {
	content: url(img/form-arrow_right.png);
	position: absolute;
	right: -120px;
	bottom: 100px;
	z-index:311;
}

.body-form ul {
	padding: 20px 0;
	overflow: hidden;}
.body-form li {
	float: left;
	position: relative;
	}
.body-form li input {
	width: 100%;
	height: 75px;
	border: solid 1px #CCC;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	transition: all .4s ease 0s;
	-webkit-transition: all .4s ease 0s;
	-moz-transition: all .4s ease 0s;
	-ms-transition: all .4s ease 0s;
	font-size: 2em;
	position: relative;
	z-index: 3;
	}
	
	@keyframes changecolor {
		0% {background-color: #FFF;}
		25% {background-color: #FFC;}
		50% {background-color: #CFC;}
		75% {background-color: #9FC;}
		100% {background-color: #fff;}
		}
	@-webkit-keyframes changecolor {
		0% {background-color: #FFF;}
		25% {background-color: #FFC;}
		50% {background-color: #CFC;}
		75% {background-color: #9FC;}
		100% {background-color: #fff;}
		}
.form-mailtag , .form-nametag { 
	position: absolute;
	top: -20px;
	z-index: 2;
}

.body-form li.name input {
	animation-name: changecolor;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-duration: 5s;
	-webkit-animation-name: changecolor;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
	-webkit-animation-duration: 5s;
	}

.body-form li.mail input {
	animation-name: changecolor;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-duration: 5s;
	animation-delay: 0.5s;
	-webkit-animation-name: changecolor;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-direction: alternate;
	-webkit-animation-duration: 5s;
	-webkit-animation-delay: 0.5s;

}

.body-form li.name { 
width: 23%;
margin-right: 1.5%;
 }
.body-form li.mail { 
width: 59%;
margin-right: 1.5%;
 }
.body-form li.name input:hover , .body-form li.mail input:hover{background: #6CF;}
.body-form li.name input:focus , .body-form li.mail input:focus{background: #FFC;}


.body-form li.btn { 
width: 15%;
 }
.body-form li.btn input{
	cursor: pointer;
	font-size: inherit;
	font-weight: bold;
	text-shadow: rgba(255,255,255,.9) 1px 1px 2px;
	background-image: -webkit-gradient(linear , left top , left bottom , color-stop(0 , #fff) , color-stop(1 , #dcdcdc));
	background-image: -o-linear-gradient(top , #fff 0% , #dcdcdc 100%);
	background-image: -moz-linear-gradient(top , #fff 0% , #dcdcdc 100%);
	background-image: -webkit-linear-gradient(top , #fff 0% , #dcdcdc 100%);
	background-image: ms-linear-gradient(top , #fff 0% , #dcdcdc 100%);
	background-image: linear-image(to top , #fff 0% , #dcdcdc 100%);
}
.body-form li.btn input:hover {
	box-shadow: rgba(0,0,0,.5) 1px 1px 6px inset;
	-moz-box-shadow: rgba(0,0,0,.5) 1px 1px 6px inset;
	-webkit-box-shadow: rgba(0,0,0,.5) 1px 1px 6px inset;
	-ms-box-shadow: rgba(0,0,0,.5) 1px 1px 6px inset;
	background: #ccc;
	color: #fff;
	}

.body-form div p {
	margin-bottom: 5px;
	text-align: center;
	}
.hurryup {
	font-size: 1.2em;
	color: #c00;
	}
	
p.thx-end {text-align: center;}
	
/**********************************************************************Form*/


#header-form.smp {display: none;}


#header-form {
	width: 750px;
	height: 149px;	
	line-height: 1;
	padding: 20px 25px;
	margin-left: -400px;	
	background: url(img/header-part4_inqpart.png) top left no-repeat;
	position: absolute;
	bottom: 20px;
	left: 50%;
	}
.body-form.header-form{
	width: inherit;
	margin: 0px;
	text-align: right;
	position: absolute;
	bottom: 0px;
	}

.body-form.header-form:before {left: -130px;display:none;} /*メイン画像領域の矢印。非表示状態*/
.body-form.header-form:after {display:none;}/*メイン画像領域の矢印。非表示状態*/
	
.body-form.header-form li.btn {margin-top: 21px;}

dl.section > dt {
	line-height: 1.2;
	font-size: 3em;
	font-weight: bold;
	border-bottom: 5px solid;
	text-align :center;
	}	
	
/**********************************************************************Form*/

.body-counter {margin-bottom: 20px;}
	
.section h2 , .section h3 {text-align: center;}

	 	
#book-thumb {
	height: 0;
	margin: 0 0 15px 15px;
	padding-top: 221px;
	background:url(img/book-thumb.jpg) top left no-repeat;
	overflow: hidden;
	display: block;
	float: right;
	}
#book-thumb:hover {
	background-position: 0 -221px;
}

#session-gallerly {
	margin-bottom: 20px;
	overflow:hidden;}
#session-gallerly li{
		width: 24%;
		margin-right: 1.3%;
	overflow: hidden;
	float: left;
	}

#session-gallerly li:nth-child(4){ margin-right: 0;}

.present {
	width: 750px;
	padding: 5px 15px;
	margin: 0 auto 25px;
	background-image: -webkit-gradient(linear , left top , left bottom ,
	color-stop(0 , #fbfce8) , color-stop(1 , #fafafa)
	);
	background-image: -o-linear-gradient(bottom , #fbfce8 0% , #fafafa 100%);
	background-image: -moz-linear-gradient(bottom , #fbfce8 0% , #fafafa 100%);
	background-image: -webkit-linear-gradient(bottom , #fbfce8 0% , #fafafa 100%);
	background-image: -ms-linear-gradient(bottom , #fbfce8 0% , #fafafa 100%);
	background-image: linear-gradient(to bottom , #fbfce8 0% , #fafafa 100%);
	background-image: url(img/bg-45c_10.png);
	background-repeat:  repeat;
	box-shadow: rgba(0,0,0,.3) 0 0 3px;
	}

.prf {
	font-size: .95em;
	line-height: 1.6;
	clear: both;
	}
	
.prf h3 {
	position: relative;
	top: 11px;
	left: 35px;
	z-index: 311;
	}

.prf-inner {
	width: 700px;
	margin: 0 auto;
	padding: 20px 100px 0 0;
	position: relative;
	border-top: solid 3px #033;
	border-right: solid 3px #033;
	}
.prf-inner > h4 {
	position: absolute;
	right: -105px;
	top: -92px;
	background: none;
}


#footer {
	margin-top: 60px;
	text-align: center;
	font-size: .8em;
	line-height: 1.1;
	clear: both;
	
	}

#footer p {margin-bottom:5px;}

ul.share-sns {
	width: 380px;
	margin: 20px auto 40px;
	clear:both;

}

ul.share-sns:before,
ul.share-sns:after {
	content: "";
	display: table;
	}
ul.share-sns:after {clear: both;}
	
ul.share-sns li {
	width: auto;
	margin-right: 3.5%;
	float: left;
	vertical-align: bottom;
}
	
#nav-2 {right: 0;}	
#nav-2 ul li a:hover {margin-left:20px;}
	
/*******************************************************************************************************************/
#bg0 {backgruond: none;}

#bg1 {
	background: url(img/bg-logo.png) right 65%;
}
#bg2 {
	background: url(img/bg-ishizaki.png) left 70%;	
}


#bg0, #bg1, #bg2, #bg3, #bg4,#bg5 {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	background-repeat: no-repeat;
	background-attachment: fixed;
	-webkit-background-attachment: fixed;
	-moz-background-attachment: fixed;
	-ms-background-attachment: fixed;
	-o-background-attachment: fixed;
}

@media screen and (max-width: 1200px) {
	#header-form {
		max-width: 700px;
		min-width: 250px;
		width: 600px;
		padding-top: 0;
		padding-bottom: 0;
		margin-left: -325px; /*中央寄せ*/
		background-image: none;
		background-color: rgba(51,153,0,.5);
		}
	.body-form.header-form {
		width: inherit;
		}
	.body-form:before { display: none; }
	#header-form .body-form ul { 
	margin:10px 0;
	padding: 0;
	}
	}
	
@media screen and (max-width: 1050px) {
	#header-form {
		height: inherit;
		background-color: none;}
	.header-text_1 , .header-text_2 {display: none;}
	
	main {
		width: 98%;
		margin: 0 1%;
		}
		
	.body-inner{
		width: auto;
		padding:0 1%;
	}
	.wrp , #introduction{
		width: 95%;
		margin: 0 2.5%;}
		
	iframe[src^="cdn"] {height: 110px;/*カウンターの高さ確保*/}

		}

@media screen and (max-width: 780px) {
	#nav-2 {display: none;}
	#header-form {
		background-color: rgba(51,153,0,.2);
	}
	
	
.body-form:after {
			content: url(img/smp/form-arrow_right.png);
			right: -10px;
			top: -20px;
			z-index:311;

			}

	.body-form.header-form input {height: 60px;}
	
	.present {
		width: auto;
		}
		
	.prf {
		width: 95%;
		margin: 0 auto;
		}
		
	.prf-inner {
		 width: 96%;
		 padding: 0 2%;
		}
		
	.prf-inner > h4 {right: 0;}
	}

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

body{
	background-image: url(img/smp/bg-items.jpg);
	font-size: .95em;
	background-size: contain;
	}
	
img {
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: optimazespeed;
	}

.countframe.pc {display: none;} /****************************************************************PCサイズカウンター非表示*/	
.countframe.smp {
	height: 55px;
	display: block;}	

	#header-form {
		width: 90%;
		margin-left: 0;
		padding: 0 5%;
		background-color: rgba(51, 153, 0, 0);
		left: 0;
		bottom: 0;
		}

  	#header-form li.name > img ,	#header-form li.mail > img  {
		width: 50px;}
.body-form.smp li.name img{ width: 50px; }
.body-form.smp li.mail img{ width: 60px; }
	

.body-form.header-form {position: static; /*スマホ表示用に位置調節解除*/}
.body-form.header-form li.btn {margin-top:1px;}
.body-form.header-form input { /*固有の設定*/
	height: 35px ; 
	}
	.body-form li input {
		height: 35px;
		width: 99%; /*borderの右がハミだす*/
		font-size: inherit;		
		}
	.body-form li.name {
		width:33.5%;
		float: left;
		}
	.body-form li.mail {
		width:65%;
		margin: 0;
		float: right;
				}			
	.body-form li.btn {
		width: 100%;
		margin-top: 2px;
		clear: both;
		}
	.form-mailtag, .form-nametag {width: 110px;}
	.body-form:after {display: none;}

.body-inner {box-shadow: none;}


	dl.section > dt{
	margin-bottom: 10px;	
	padding: 2.5px 5px 2.5px 20px;
	background: #000;
	font-size:1.2em;
	font-weight: bold;
	color: #fff;
	text-shadow: rgba(255,255,255,.6) 1px 1px 2px;
	-webkit-text-shadow: rgba(255,255,255,.6) 1px 1px 2px;
	-moz-text-shadow: rgba(255,255,255,.6) 1px 1px 2px;
	-ms-text-shadow: rgba(255,255,255,.6) 1px 1px 2px;
	position: relative;
	text-align :left; /*固有の設定リセット*/
	}
	
	.thumb {
		width: 30%;
		height: auto;
		}
	.prf h3 {
		top: 10px;
		left: 0;
		}
	.prf-inner > h4 {position: static;	}
	.prf-inner > h4 img {
		width:25%;
		height:auto;
		float: right;}
		
	ul.share-sns {
	width: 200px;
}
ul.share-sns li {
	margin-right: 1%;
}
ul.share-sns li:nth-child(3n) {celar: both;}

.smp > dt {
	margin-bottom: 10px;	
	padding: 2.5px 5px 2.5px 20px;
	background: url(img/bg-45c_10.png) repeat #14c2cc;
	font-size:1.2em;
	font-weight: bold;
	color: #fff;
	text-shadow: rgba(255,255,255,.6) 1px 1px 2px;
	-webkit-text-shadow: rgba(255,255,255,.6) 1px 1px 2px;
	-moz-text-shadow: rgba(255,255,255,.6) 1px 1px 2px;
	-ms-text-shadow: rgba(255,255,255,.6) 1px 1px 2px;
	position: relative;
	}
.smp.present > dt {	background:#ccbd14;}	
.section > dt {background-color:#000;}
	
.section > dt:before {
	content: url(img/smp/backman.png);
	position: absolute;
	left:-10px;
	top: 0;
}

.smp > dt:before {	
	content: url(img/smp/mark-ribbon.png);
	position: absolute;
	left:-10px;
	top: 0;
	}
.smp.present > dt:before {top: 40%; }
	
ul.smpbullet li{
	padding: 5px 0 5px 0px;
	border-bottom: dotted #aaa 1px;
	/*background: url(img/smp/logocheckmark.png) left center no-repeat;
	*/}
ul.smpbullet li:before {
	content: url(img/smp/logocheckmark.png);
	margin-right: 5px;
	vertical-align: bottom;
	}
	
#smp-bulletarea {	padding:5px;}
	
	
	}

	
@media screen and (max-width: 480px) {
.pc {display :none!important;}
.smp {display: block!important;;}

img {
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: optimazespeed;
	}

.body-form.smp {margin: 0px 0 10px 0;}
.body-form.smp ul {
	padding:0;
	}
	

.body-form.smp li.name img{ width: 50px; }
.body-form.smp li.mail img{ width: 60px; }
	

.body-form.header-form {position: static; /*スマホ表示用に位置調節解除*/}
.body-form.header-form input { /*固有の設定*/
	height: 35px ; 
	}
	.body-form li input {
		height: 35px;
		width: 99%; /*borderの右がハミだす*/
		font-size: inherit;		
		}
	.body-form li.name {
		width:33.5%;
		float: left;
		}
	.body-form li.mail {
		width:65%;
		margin: 0;
		float: right;
				}			
	.body-form li.btn {
		width: 100%;
		margin-top: 2px;
		clear: both;
		}
	.form-mailtag, .form-nametag {width: 110px;}

	
#session-gallerly li{
		width: 48%;
		margin-right: 2%;
	float: left;
	}
#session-gallerly li:nth-child(even) a {
	margin-right: 0;}  
}

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

	img {
		image-rendering : optimazespeed;
		-ms-interpolation-mode: nearest-neighbor
		}
	}