/* ==========================================================================
   Reset
============================================================================= */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}.cf:before, .cf:after {content:""; display:table; } .cf:after {clear:both; } .cf {zoom:1; }

/* ==========================================================================
   Base
============================================================================= */
body, html { width: 100%; height: auto; font-family: 'KozGoPro-Regular', '小塚ゴシック Pro R', Meiryo, メイリオ, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: #900; }
p { line-height: 180%; letter-spacing: 0.08em; font-weight:400; }
video { margin: 0; padding: 0; font-size: 100%; font-weight: inherit; vertical-align: baseline; border: 0; }
#controlBar_video { opacity: 0; }

body { background: url(../images/bg.png) top center; min-width: 1200px; }

.wrapper { background: url(../images/bg-cover.png) top center repeat-y; width: 100%; min-width: 1200px; overflow-x: hidden; margin: 0; padding: 0; position: relative; }


@import url(//fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css:100,300,400,700);
.wrapper { font-family:"Noto Sans JP" , 'KozGoPro-Regular', '小塚ゴシック Pro R', Meiryo, メイリオ, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif; }


/* ==========================================================================
   Common
============================================================================= */

.mincho { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

.small { font-size: small; }


#back-top { position: fixed; bottom: 0; right: 2%; z-index: 1000; }
#back-top span { background:url(../img/common/arrow.png) top center no-repeat; width: 100px; height: 76px; display: block; opacity: 0.8; }
#back-top:hover { filter: alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; }



/* ==========================================================================
   Header
============================================================================= */


#header{ height:40px; background:url(../images/master-bg.jpg) bottom center; z-index:1000000; position:relative;}
#headercontent{ width:100%; max-width:960px; margin:0 auto; position:relative;}
#snsapi{ position:absolute; top:11px; right:0px; width:200px;}
#snsapi .api{ float:left; width:110px;}



/* ==========================================================================
   SNS
============================================================================= */


.sns-area { border-radius: 4px; border: #fe9 solid 1px; position: absolute; top: 920px; background: #fff; width:45px; height: auto; padding: 10px 10px 5px; text-align: center; z-index: 999999; left: 50%; margin-left: 510px;}
.sns-area a { display: block; }
.sns-area a:hover { opacity: 0.7; }
.fixed { position: fixed; top: 20px; }



/* ==========================================================================
   Styels
============================================================================= */

.contents { width: 100%; max-width: 1180px;margin: 0 auto; padding: 0; overflow: hidden; z-index: 999999; position: relative; }

/* ==========================================================================
   Main
============================================================================= */

.main { position: relative; left: 50%; margin-left: -960px; width: 1280px; height: 620px; z-index: 999999; }
.main-btnarea { width: 980px; margin: 0 auto; }
.main-btn { height: 100px; display: inline-block; width: 485px; cursor: pointer; z-index: 999999; position: relative; }
.main-btn:hover { opacity: 0.7; }


.main::before { content:"キャンペーンは終了しました"; font-size:48px; position: absolute; font-weight: bold; width:100%; text-align: center; left: 50%; margin-top: 200px; z-index: 1000000; width: 900px; background: #000; border-radius: 10px; border: 1px #ff5 solid; color: #fff; margin-left: -130px; opacity: 0.8; }
.main-sp::before { content:"キャンペーンは終了しました"; font-size:16px; position: absolute; font-weight: bold; width:100%; text-align: center;  margin-top: 24%; z-index: 1000000; width: 90%; background: #000; border-radius: 10px; border: 1px #ff5 solid; color: #fff; margin-left: 5%; opacity: 0.8; }



/* ==========================================================================
   Content
============================================================================= */

.content { }
.content-inner { background: url(../images/contents-box-contents.png) top center repeat-y; width: 1000px; display: block; margin: -40px auto 0; }
.content-inner::before { content: ""; background: url(../images/contents-box-head.png) top center no-repeat; height: 25px; display: block; ;}
.content-inner::after { content: ""; background: url(../images/contents-box-foot.png) top center no-repeat; height: 25px; display: block; ;}
.content-text { padding: 10px 39px; }
.content-text p { margin: 10px 0; }


.content01 { }
.content01 .content-inner { }
.content01 .content-text{ }
.content01 .content01-te1 { width: 700px; }
.content01-img01 { position: absolute; margin: -100px 0 0 690px; }
.content01-img03 { background: #fff; border:#c00 solid 3px; border-radius: 10px; width:100%; text-align: center; padding: 20px 0; }
.content01-left { width: 380px; float: left; }
.content01-right { width: 520px; float: right; }

.content02 { }
.content02 .content-inner { }

.content03 { }
.content03 .content-inner { }
.content03 dl{ width:96%; margin:20px auto; border:solid 3px #FFBF00; }
.content03 dt{ display:block; border-bottom:solid 1px #999999; font-weight: 700; float:left; background-color:#c00; text-indent:0.3em; padding:5px 15px 5px 0; color:#FFF; width:18.4em;}
.content03 dd{ display:block; border-bottom:solid 1px #666666; background-color:#FFF; text-indent:0.2em; padding:5px 0;}

.content04 { }
.content04 .content-inner { }
.content04 .main-btnarea { width: auto; }
.content04 .main-btn { display: block; margin: 40px 0 0 40px; }
.content04 .content04-im1 { width: 240px; }

.sub { }
.sub::before { content: ""; background: url(../images/icon01.png) top left no-repeat; width: 92px; height: 88px; float: left; display: inline-block; }
.sub span { display: inline-block; line-height: 88px; font-size: 36px; font-weight: bold; color: #900; padding-left: 20px; }

.ttl { margin-top: 60px; }
.ttl01 { margin-top: 0; }
.ttl02 { }
.ttl03 { }
.ttl04 { }

.ttl-date { border-radius: 20px; background: #fff; color: #900; font-size: 20px; font-weight: bold; padding: 5px 20px; position: absolute; width: 600px; margin: -90px 0 0 130px; }

.notice { color: #fff; width: 1000px; margin: 20px auto 0; }


/* ==========================================================================
   Content
============================================================================= */

.ornament01 { top: -20px; position: absolute; left: 50%; margin-left: -400px; z-index: 99999; }
.ornament02 { top: -20px; position: absolute; left: 50%; margin-left: -560px; z-index: 99999; }
.ornament03 { top: -20px; position: absolute; left: 50%; margin-left: -820px; z-index: 99999; }
.ornament04 { top: -20px; position: absolute; left: 50%; margin-left: -500px; z-index: 99998; }
.ornament05 { top: -20px; position: absolute; left: 50%; margin-left: -660px; z-index: 99998; }
.ornament11 { top: -40px; position: absolute; left: 50%; margin-left: 380px; z-index: 99999; }
.ornament12 { top: -80px; position: absolute; left: 50%; margin-left: 530px; z-index: 99999; }
.ornament13 { top: -20px; position: absolute; left: 50%; margin-left: 320px; z-index: 99999; }
.ornament14 { top: -10px; position: absolute; left: 50%; margin-left: 640px; z-index: 99998; }
.ornament15 { top: -60px; position: absolute; left: 50%; margin-left: 600px; z-index: 99998; }


/* ==========================================================================
    Footer
============================================================================= */

.end { background: url(../images/foot.png) top left repeat-x; height: 150px; width: 100%; margin: 60px 0 0 0; }
.footer { background: #fff; height: 160px; z-index: 999999; position: relative; }
.links { text-align: center; padding: 60px 0 0 0; }
.copy { text-align: center; margin: 20px 0 0 0; }


/* ==========================================================================
    Titles
============================================================================= */


@media screen and (min-width: 640px) {
  #titles { max-width: 1000px; margin: 0 auto; }
  #titles ul{ list-style:none;}
  #titles li{ float:left; width:31%; margin-right:0.5%; background-color:#FFF; padding:1%; margin-bottom:6px;}
  #titles li.l02{ margin-right:0;}
  #titles li h3{ font-weight:bold; font-size:17px; line-height:1.3; padding-top:10px; min-height:58px;}
  #titles li h4{ font-weight:normal; font-size:13px; color:#888; line-height:1.4; min-height:65px;}
  #titles li img.visual{ width:max-width:298px; width:100%;}
  #titles li .qr{ text-align:center; height:115px;}
  #titles li .qr img{ padding:0 10px 10px;}
  #titles li .btns{ text-align:center; height:34px; margin-top:15px;}
  #titles li .btns img{ padding:0 4px;}
  #titles li .site{ text-align:center; margin:15px 0;}
  .splink{ display:none;}
  .pc-hide { display: none; }
}

@media screen and (max-width: 639px) {
  body { min-width: 100%; background-size: 100%; }
  .wrapper { min-width: 100%; background-size: 100%; }
  .contents { width: 100%; max-width:100%; }
  .content-inner { width: 100%; }

  .main-sp { width:100%; position: relative; z-index: 999999; }
  .main-sp img { width:100%; }
  .main-btnarea { width:100%; }
  .main-btn { width:49%; height: auto; }
  .main-btn img { width:100%; }
  .notice { width: 90%; }

  .ttl img { width: 100%; }
  .ttl01 { margin-bottom: 30px; }
  .content01 .content01-te1 { width: auto; }
  .content01 .content-inner img { width: 100%;}
  .content01 .content-inner .content01-img03 img { width: 50%; }
  .content02 .content-inner img { width: 30%; }
  .sub::before { width: 46px; height: 44px; background-size: 100%; }
  .sub span { font-size: 22px; padding-left: 10px; line-height: 44px; }
  .content-inner { margin-top: -28px; }

  .content-text { padding: 5px; }
  .content-text p { margin: 5px; }
  .content01-left { float: none; width: auto; }
  .content01-right { float: none; width: auto; }

  .content03 dt {display: block; float:none; width: auto; padding: 1%; line-height: 1; }
  .content03 dd { line-height: 1; padding-left: 0.5em; }

  .content04 .main-btn { width:100%; margin: 0; }
  .content04 p img { width: 30%; }

  .ttl-date { position: relative; width: 100%; margin: 0; font-size: 12px; width: auto; padding: 2px 5px; }

  .content-text p { line-height: 140%; font-size: 14px; }
  .content04 .content04-im1 { width: 30%;}

  .sns-area-sp { text-align: center; }
  .sns-area-sp a:hover{ opacity: 0.7; }
  .footer { height: auto; }

  #titles{ width: 100%; }
  #titles ul{ list-style:none;}
  #titles li{ float:left; width:46%; margin:0% 0.5% 0.5% 1%; background-color:#FFF; padding:1%; margin-bottom:6px;}
  #titles li.l02{ margin-right:0.5%;}
  #titles li h3{ font-weight: bold; font-size: 15px; line-height: 1.3; padding-top: 10px; min-height: 65px;}
  #titles li h4{ font-weight:normal; font-size:13px; color:#888; line-height:1.4; min-height:95px;}
  #titles li img.visual{ width:max-width:298px; width:100%;}
  #titles li .qr{ display:none;}
  #titles li .qr img{ padding:0 10px 10px;}
  #titles li .btns{ text-align:center; height:34px; margin-top:15px; display:none;}
  #titles li .btns img{ padding:0 4px;}
  #titles li .site{ text-align:center; margin:15px 0;}
  #titles li .site img{ width:70%;}
  .splink{ font-size:13px;}
  .splink a{ color:#C00;}
  .splink a:hover{ color:#F90;}
  .links { font-size: 13px; }
  .sp-hide { display: none;}
}