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

/* ヘッダー
------------------------------------- */

header{
	width:100%;
	height:6.5em;
}

/* 共通
------------------------------------- */
h3{
	margin-bottom:3%;
	font-size:2.2em;
}

.area50,
.area30,
.area33,
.area70{
  width: 100%;
  margin: 1%;
  float: left;
  font-size: 1.2em;
  text-align: left;
}

/* 特典エリア
------------------------------------- */
#privilegeWrap{
	width:80%;
  margin:0 auto;
  display:block;
	max-width:800px;
}
.privilege,.privilege2,.privilege3,.privilege4,.privilege5,.privilege6,.privilege7,.privilege8,.privilege9,.privilege10,.privilege11,.privilege12,.privilege13,.privilege14,.privilege15,.privilege16{
  width:100%;
	padding-bottom:2%;
  margin:0 auto;
}
#privilegeWrap h2{
	font-size:2em;
}
.privilege h3{
	font-size:1.8em;
	padding:2% 7% 0 ;
	text-align:left;
}
.privilege p,.privilege2 p,.privilege3 p,.privilege4 p,.privilege5 p,.privilege6 p,.privilege7 p,.privilege8 p,.privilege9 p,.privilege10 p,.privilege11 p,.privilege12 p,.privilege13 p,.privilege14 p,.privilege15 p,.privilege16 p{
	line-height:1;
	font-size:1.7em;
	font-weight:bold;
	color:#E94A7A;
	padding:3% 7% 0;
}
.privilege a{
	color:#E94A7A;
}
.privilege br{
	display:none;
}
.privilege,.privilege2,.privilege3,.privilege4,.privilege5,.privilege6,.privilege7,.privilege8,.privilege9,.privilege10,.privilege11,.privilege12,.privilege13,.privilege14,.privilege15,.privilege16{
	display:none;
}
/* コメントエリア
------------------------------------- */

.text{
	width:80%;
	height:auto;
	font-size:1.2em;
	margin:3% auto;
}
.text2{
	width:64%;
	height:auto;
  text-align: left;
	font-size:1.2em;
	margin:2% 3%;
  float: left;
}

/* 写真の設定
------------------------------------- */
.imgArea{
	display:block;
	width:80%;
	height:auto;
	margin:0 auto;
	max-width:800px;
	}
.w100{width:100%;}
.w90{width:90%;}
.w80{width:80%;}
.w70{width:70%;}
.w66{width:66%;}
.w65{width:64.8%;}
.w62{width:61.9%;}
.w60{width:60%;}
.w55{width:55%;}
.w50{width:50%;}
.w45{width:45%;}
.w40{width:40%;}
.w38{width:38%;}
.w35{width:35.2%;}
.w33{width:33%;}
.w30{width:30%;}

.h100{height:100%;}
.h50{height:50%;}

/* テーブル
------------------------------------- */
table{
	width:80%;
	margin:3% auto;
	font-size:1.5em;
	max-width:800px;
}
.area70 table,
.imgArea table{
	width:100%;
	margin:3% auto;
	font-size:1.3em;
	max-width:800px;
}
tr{
	border-bottom:1px solid #666666;
	line-height:2;
	width:100%;
}
th{
	width:30%;
	padding-left:3%;
	text-align:left;
	
}
td{
	width:70%;
	padding-left:3%;
	text-align:left;
}

/* ボタン
------------------------------------- */
.btn2{
  background:#2bd1b3;
	padding:0.5em;
  line-height:1.5em;
  text-align:center;
  font-size:1.5em;
	width:80%;
  margin:2em auto 3em;
  display:block;
	max-width:800px;
}

.btn3{
  background:#2bd1b3;
	padding:1em 3em;
  line-height:2.5em;
  text-align:center;
}
.btn3 a{
	color:#fff;
}

.btn4{
  background:#2bd1b3;
	padding:1em 3em;
  line-height:2.5em;
  text-align:center;
  font-size:2em;
	width:80%;
  margin:2em auto 3em;
  display:block;
	max-width:800px;
}

/* フォトギャラリー
------------------------------------------------------------*/
/*ギャラリー全体のコンテナー*/
#stage {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}
/*全サムネイルのコンテナー*/
#thumbs {
  width:100%;
}
/*サムネイルの幅、ポインターを手のひら*/
#thumbs label img {
	width:18.5%;
	cursor: pointer;
}
/*ラジオボタンを非表示に*/
#r1, #r2, #r3, #r4, #r5, #r6, #r7, #r8, #r9, #r10, #r11, #r12, #r13, #r14, #r15, #r16, #r17, #r18, #r19, #r20, #r21, #r22, #r23, #r24, #r25, #r26, #r27, #r28, #r29, #r30, #r31 {
	display: none;
}
/*表示写真の初期配置（全部透明に）とtransition設定*/
.photo {
  width:100%;
	position: absolute;
	left: 0;
	top: 0;
}
.photo img {
	width:100%;
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
/*チェックされたサムネイルに相当する写真だけを表示*/
#r1:checked ~ #photo1 img, #r2:checked ~ #photo2 img, #r3:checked ~ #photo3 img, #r4:checked ~ #photo4 img, #r5:checked ~ #photo5 img, #r6:checked ~ #photo6 img, #r7:checked ~ #photo7 img, #r8:checked ~ #photo8 img, #r9:checked ~ #photo9 img, #r10:checked ~ #photo10 img, #r11:checked ~ #photo11 img, #r12:checked ~ #photo12 img, #r13:checked ~ #photo13 img, #r14:checked ~ #photo14 img, #r15:checked ~ #photo15 img, #r16:checked ~ #photo16 img, #r17:checked ~ #photo17 img, #r18:checked ~ #photo18 img, #r19:checked ~ #photo19 img, #r20:checked ~ #photo20 img, #r21:checked ~ #photo21 img, #r22:checked ~ #photo22 img, #r23:checked ~ #photo23 img, #r24:checked ~ #photo24 img, #r25:checked ~ #photo25 img, #r26:checked ~ #photo26 img, #r27:checked ~ #photo27 img, #r28:checked ~ #photo28 img, #r29:checked ~ #photo29 img, #r30:checked ~ #photo30 img, #r31:checked ~ #photo31 img{
	opacity: 1;
}

iframe{
	width:100%;
	height:20em;
}


@media (min-width:481px) and (max-width: 769px) {	
.column{
	width:48%;
	margin:1%;
}

	header{
		width:100%;
		height:6.5em;
	}	
}
	

@media (min-width:769px) {

/* コラムエリア
------------------------------------- */

.column{
	width:48%;
	margin:1%;
}
.column h2{
	font-size:1.5em;
}
/* ヘッダー
------------------------------------- */

header,
footer{
	width:100%;
	height:auto;
	background:#f5f2ed;
}

}

/* バックグラウンドの設定
------------------------------------- */

.back-gray{background:#999;color:#fff;}
.back-gold{background:#f5f2ed;color:#a09263;}
.back-gold2{background:#a09263;color:#fff;}
.back-green{background:#2bd1b3;color:#fff;}