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

* { margin:0; padding:0; font-size:100%;}
*, *:before, *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}

html { overflow-y:scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}

body {
 margin:0; padding:0;
 font:15px/1.6 "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
 color:#000; background:#11AFE5;}

/*------------------------------------------------------------------------------
　共通
-------------------------------------------------------------------------------*/

div, pre, form, input, textarea, blockquote { margin:0; padding:0;}
address, caption, cite, code, dfn, em, var { font-style:normal;}

h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-size:100%; line-height:1.2}

table { border-collapse:collapse; border-spacing:0;}
td, th { margin:0; padding:0; text-align:left; font-style:normal;}
dl, dt, dd { margin:0; padding:0;}
ul, ol, li { margin:0; padding:0; list-style:none;}
img { max-width:100%; height:auto; vertical-align:top; border:none;}

/* リンク */
a:link,a:visited { color:#000; text-decoration:underline;}
a:hover,a[href]:hover { text-decoration:none;}
a:hover img { filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7;}

.clear { clear:both;}

.alignL { text-align:left;}
.alignR { text-align:right;}
.alignC { text-align:center;}

.floatL { float:left; margin:0; padding:0;}
.floatR { float:right; margin:0; padding:0;}

/*------------------------------------------------------------------------------
　レイアウト
-------------------------------------------------------------------------------*/

/* ヘッダー
----------------------------------------------- */
#head {
 clear:both; width:100%; margin:0; padding:0; overflow:hidden; text-align:center;
 background:#11AFE5 url(images/bg_head.gif) no-repeat center top;}
#head .headInner {
 clear:both; width:1040px; max-width:100%; margin:30px auto 45px auto; padding:0; overflow:hidden;}
#head .headInner h1 { clear:both; margin:0 auto; padding:0;}

@media screen and (max-width:1000px) {
#head { background-position:center bottom; background-size:100% auto;}
#head .headInner { width:auto; margin:15px auto 30px auto; padding:0;}
#head .headInner h1 { max-width:100%;}
#head .headInner h1 img { max-width:100%;}
}

/* コンテナ
----------------------------------------------- */
#container { clear:both; width:100%; margin:0; padding:0; overflow:hidden; text-align:center;}
#container .blockInner { clear:both; width:1000px; margin:0 auto; padding:0; overflow:hidden;}

@media screen and (max-width:1000px) {
#container .blockInner { width:auto; margin:0 15px; padding:0;}
}

/* Ｐクーポンとは？
----------------------------------------------- */

#introduction {
 clear:both; margin:0; padding:0 0 35px 0; overflow:hidden; text-align:left; background:#6EA95F;}
#introduction .blockInner {
 padding:0; background:#6EA95F url(images/line.gif) repeat-x left top;}
#introduction .blockInner .box {
 clear:both; margin:0; padding:35px 10px; overflow:hidden;
 background:url(images/line.gif) repeat-x left bottom;}
#introduction .blockInner .box h2 { float:left; width:27%; margin:0; padding:0;}
#introduction .blockInner .box .boxR { float:right; width:71%; margin:0; padding:10px 0 0 0;}
#introduction .blockInner .box .boxR p {
 clear:both; margin:0; padding:0 0 15px 0; color:#FFF; font-size:120%; font-weight:bold;}
#introduction .blockInner .box .boxR p:last-child { padding:0;}

@media screen and (max-width:680px) {
#introduction .blockInner .box { padding:30px 10px 20px 10px;}
#introduction .blockInner .box h2 {
 clear:both; float:none; width:auto; max-width:100%; margin:0 auto 20px auto; padding:0; text-align:center;}
#introduction .blockInner .box h2 img { width:100%; max-width:200px; margin:0 auto;}
#introduction .blockInner .box .boxR {
 clear:both; float:none; width:100%; padding:0; }
#introduction .blockInner .box .boxR p {font-size:100%;}
}

/* お買い求め方法
----------------------------------------------- */
#buy {
 clear:both; width:100%; margin:0; padding:70px 0 30px 0; overflow:hidden; background:#FFF;}
#buy .blockInner h3 {
 clear:both; margin:0 0 50px 0; padding:0; font-size:233%; font-weight:normal; letter-spacing:0.1em;}
#buy .blockInner ul.about { clear:both; margin:0 auto; padding:0 0 50px 0; overflow:hidden;}
#buy .blockInner ul.about li { float:left; margin:0; padding:0 24px; text-align:center;}
#buy .blockInner ul.about li img { width:100%; margin:0; padding:0;}
#buy .blockInner .box { clear:both; margin:12px 0 35px 0; padding:0; overflow:hidden;}
#buy .blockInner .consideration {
 clear:both; margin:0 0 30px 0; padding:0 0 3px 15px; overflow:hidden; text-align:left; border-left:5px solid #F00;}
#buy .blockInner .consideration h4 {
 float:left; width:12%; margin:5px 0 0 0; padding:0 10px 0 0; color:#F00; font-size:120%; font-weight:normal;}
#buy .blockInner .consideration .boxR { float:right; width:86%; margin:4px 0 0 0; padding:0;}
#buy .blockInner .consideration .boxR ul { clear:both; margin:0; padding:0;}
#buy .blockInner .consideration .boxR ul li {
 margin:0 0 5px 0; padding:0 0 0 7px; background:url(images/list.gif) no-repeat left 7px;}
#buy .blockInner .consideration .boxR ul li:last-child { margin:0;}

@media screen and (max-width:1000px) {
#buy { padding:35px 0 30px 0;}
#buy .blockInner h3 { margin:0 0 25px 0; letter-spacing:0.05em; }
#buy .blockInner ul.about { margin-left:1%; padding-bottom:25px;}
#buy .blockInner ul.about li { width:33%; padding:0 10px;}
#buy .blockInner ul.about li img { width:auto; max-width:100%;}
#buy .blockInner .box { margin:15px 0 25px 0;}
#buy .blockInner .box .floatL { clear:both; float:none; margin:0 0 25px 0;}
#buy .blockInner .box .floatR { clear:both; float:none;}
#buy .blockInner .consideration { margin:0;}
}

@media screen and (max-width:940px) {
#buy .blockInner .consideration h4 { width:14%;}
#buy .blockInner .consideration .boxR { width:84%;}
}

@media screen and (max-width:840px) {
#buy .blockInner .consideration h4 { width:16%;}
#buy .blockInner .consideration .boxR { width:82%;}
}

@media screen and (max-width:740px) {
#buy .blockInner .consideration h4 { width:18%;}
#buy .blockInner .consideration .boxR { width:80%;}
}

@media screen and (max-width:640px) {
#buy .blockInner h3 { font-size:135%;}
#buy .blockInner ul.about { padding-bottom:0;}
#buy .blockInner ul.about li { clear:both; float:none; width:100%; margin-bottom:15px; padding:0;}
#buy .blockInner .consideration h4 {
 clear:both; float:none; width:auto; margin-bottom:7px; padding:0;}
#buy .blockInner .consideration .boxR { clear:both; float:none; width:100%; margin:0;}
}

/* 提携駐車場・取扱店舗ＭＡＰ
----------------------------------------------- */
#parking { clear:both; width:100%; margin:0; padding:70px 0 55px 0; overflow:hidden;}
#parking .blockInner .box { clear:both; margin:0 0 50px 0; padding:0; overflow:hidden;}
#parking .blockInner .box h3 {
 clear:both; margin:0 0 8px 0; padding:0 0 8px 0; color:#FFF; font-size:233%; font-weight:normal; letter-spacing:0.1em;
 background:url(images/map_title.gif) no-repeat center bottom;}
#parking .blockInner .box p.en {
 clear:both; margin:0 0 25px 0; padding:0; color:#FFF; font-size:100%; letter-spacing:0.2em;}
#parking .blockInner .box .gmap {
 height:0; margin:0 0 20px 0; padding-top:30px; padding-bottom:56.25%; position:relative; overflow:hidden;}
#parking .blockInner .box .gmap iframe, #parking .blockInner .box .gmap object, #parking .blockInner .box .gmap embed {
 width:100%; height:100%; position:absolute; top:0; left:0;}
#parking .blockInner .service {
 clear:both; margin:0; padding:35px 0 25px 0; overflow:hidden;
 background:#FFF url(images/bg_parking.gif) no-repeat center bottom;}
#parking .blockInner .service h4 {
 clear:both; margin:0 0 30px 0; padding:0; color:#11AEE5; font-size:207%; font-weight:bold; letter-spacing:0.1em;}
#parking .blockInner .service p { clear:both; margin:0; padding:0; font-size:94%;}
#parking .blockInner .service ul { clear:both; margin:0 16% 20px 16%; padding:0; overflow:hidden;}
#parking .blockInner .service ul li { float:left; margin:0; padding:0 13px; text-align:center; font-size:87%;}
#parking .blockInner .service ul li img { width:100%; margin:0 0 3px 0; padding:0; border:1px solid #CCC;}
#parking .blockInner .service a { color:#0059B2;}

@media screen and (max-width:1000px) {
#parking { padding:40px 0 45px;}
#parking .blockInner .box { margin-bottom:40px;}
#parking .blockInner .box h3 { letter-spacing:0.05em; font-size:135%;}
#parking .blockInner .box p.en { margin-bottom:20px; letter-spacing:0.1em;}
#parking .blockInner .box .gmap { margin-bottom:0;}
#parking .blockInner .service { background-size:100% auto;}
#parking .blockInner .service h4 { margin:0 0 25px 0; font-size:200%; letter-spacing:0.05em;}
#parking .blockInner .service p { margin:0 20%; text-align:left;}
#parking .blockInner .service ul { margin:0 4% 30px 5%;}
#parking .blockInner .service ul li { width:33%; padding:0 10px;}
#parking .blockInner .service ul li img { width:auto; max-width:100%;}
}

@media screen and (max-width:740px) {
#parking .blockInner .service { padding-top:30px;}
#parking .blockInner .service h4 {}
}

@media screen and (max-width:640px) {
#parking { padding:30px 0 35px 0;}
#parking .blockInner .box { margin-bottom:30px;}
#parking .blockInner .service { padding:20px 0 15px 0;}
#parking .blockInner .service h4 { margin:0 5% 15px 5%; font-size:135%;}
#parking .blockInner .service ul { margin:0 16% 10px 16%;}
#parking .blockInner .service ul li { clear:both; float:none; width:100%; margin-bottom:10px; padding:0;}
}

/* Ｐクーポンのご購入・お問い合わせ
----------------------------------------------- */
#info { clear:both; width:100%; margin:0; padding:50px 0; overflow:hidden; background:#EEE;}
#info .blockInner h3 {
 clear:both; margin:0 0 40px 0; padding:0; font-size:200%; font-size:120%; font-weight:normal; letter-spacing:0.1em;}
#info .blockInner .boxR { float:left; margin:0; padding:0 0 0 35px; text-align:left;}
#info .blockInner .boxR h4 {
 float:left; margin:20px 15px 30px 0; padding:0; font-size:174%; font-weight:bold; letter-spacing:0.1em;}
#info .blockInner .boxR h4 span { font-size:58%; font-weight:normal;}
#info .blockInner .boxR p { clear:both; margin:0; padding:0;}
#info .blockInner .boxR .access { float:left; margin:23px 0 0 0; padding:0;}

@media screen and (max-width:1000px) {
#info { padding:40px 0 35px 0;}
#info .blockInner h3 { margin-bottom:25px; letter-spacing:0.05em;}
#info .blockInner .floatL { clear:both; float:none; margin:0 auto; display:block;}
#info .blockInner .boxR { clear:both; float:none; max-width:500px; margin:0 auto; padding:0;}
#info .blockInner .boxR h4 { margin:25px 0 20px 0;}
#info .blockInner .boxR .access { width:auto; margin-top:28px;}
}

@media screen and (max-width:480px) {
#info { padding:30px 0 25px 0;}
#info .blockInner h3 { margin-bottom:20px; font-size:135%; }
#info .blockInner .boxR h4 { clear:both; float:none; margin:15px 0;}
#info .blockInner .boxR .access { clear:both; float:none; margin:0 0 15px 0;}
}

/* フッター
----------------------------------------------- */
#foot {
 clear:both; width:100%; margin:0; padding:0; overflow:hidden; text-align:left; color:#FFF; font-size:94%;
 background:url(images/bg_foot.gif) repeat-x left top;}
#foot .footInner { clear:both; width:1000px; margin:0 auto; padding:20px 0; overflow:hidden;}
#foot .footInner p { clear:both; margin:0; padding:0; line-height:1.5;}
#foot .footInner ul { clear:both; margin:0; padding:0 0 20px 0; overflow:hidden;}
#foot .footInner ul li {
 margin:0 0 5px 0; padding:0 10px 0 11px; display:inline-block; line-height:1.2; border-left:1px solid #FFF;}
#foot .footInner ul li:last-child { border-left:1px solid #FFF; border-right:1px solid #FFF;}
#foot .footInner a { color:#FFF;}

@media screen and (max-width:1000px) {
#foot .footInner { width:auto; padding:20px 15px 15px 15px;}
}