@charset "utf-8";

/*------------  reset  ------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,
strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, figcaption, figure, footer, header, hgroup, menu, nav,
section, main, summary, time, mark, audio, video, a, button, input, select,
textarea { margin: 0; padding: 0; box-sizing: border-box; }
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; }
form { margin: 0; padding: 0; }
li { list-style-type: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption,th { text-align: left; }
q:before,q:after { content:''; }
object,embed { vertical-align: top; }
hr,legend { display: none; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; }
abbr,acronym,fieldset { border: 0; }
img { border: 0; border: none; max-width: 100%; vertical-align: bottom; }

a { color: #BA152F; text-decoration: none; opacity: 1; transition: all .3s; cursor: pointer; }
a:hover { text-decoration: none; opacity: .6; }

body { background: #fff; min-width: 320px; font-size: 14px; line-height: 1; color: #323232; font-family: sans-serif; -webkit-text-size-adjust:100%; }



/*------------  web-font  ------------*/

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: local("Noto Sans CJK JP Medium"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: local("Noto Sans CJK JP Bold"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  src: local("Noto Sans CJK JP Black"),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.otf) format('opentype');
}



/*------------  header  ------------*/
#header { background: #ba152f; }
#header h1.title { margin: 0 auto; width: 13em; font-size: 40px; color: #fff;}
#header .header-inner { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 6px 3%; max-width: 1120px; }
#header .header-inner a { display: block; }
#header .logo { width: 160px; }
#header .header-point { display: flex; align-items: center; }
#header .header-point li:nth-last-child(5) { margin-right: 10px; }
#header .header-point .brand { width: 70px; margin-right: 2px; }
#header .header-point .cooca { width: 92px; }
#header .header-point .rakuten { width: 92px; }
#header .header-point .ponta { width: 92px; }
#header .header-point .docomo { width: 92px; }



/*------------  contents  ------------*/
.contents { 
	background: url(../img/common/bg02.jpg) center center repeat-x;
}


/*------------  foot-nav  ------------*/
#foot-nav { display: block; background: #008ac2; }
#foot-nav .foot-nav-inner { display: flex; justify-content: center; margin: 0 auto; padding: 0 3%; max-width: 1120px; }
#foot-nav li { box-sizing: border-box; display: block; width: 33.33333%; background: #fff; border-left: 1px solid #fff; }
#foot-nav li:last-child { border-right: 1px solid #fff; }
#foot-nav a { display: block; height: 62px; background-color: #008ac2; background-repeat: no-repeat; background-position: center; background-size: 200px 20px; text-indent: -9999px; overflow: hidden; }
#foot-nav .nav01 a { background-image: url('../img/common/foot_nav01.png'); }
#foot-nav .nav02 a { background-image: url('../img/common/foot_nav02.png'); }
#foot-nav .nav03 a { background-image: url('../img/common/foot_nav03.png'); }




/*------------  footer  ------------*/
#footer { background: #fff; /*border-top: 1px solid #0b9ece;*/ }
#footer .footer-inner { margin: 0 auto; padding: 30px 3% 40px; max-width: 1120px; }
#footer .logo { margin: 0 auto; padding: 0 0 18px; width: 116px; }
#footer .logo a { display: block; }
#footer .copyright { display: block; font-size: 12px; line-height: 1.4; color: #323232; text-align: center; }


/*------------  pagetop  ------------*/
.pagetop { position: fixed; bottom: 18px; right: 18px; z-index:10; }
.pagetop a { position: relative; display: block; width: 60px; height: 60px; background: #BA152F; border-radius: 50%; text-indent: -9999px; overflow: hidden; }
.pagetop a:after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -4px 0 0 -6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); }







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

  #header .logo { width: 250px; }
  #header h1.title { margin: 0 auto; width: 13em; font-size: 40px; color: #fff;}
  #header .header-point .brand { width: 56px; }
  #header .header-point .cooca { width: 70px; }
  #header .header-point .rakuten { width: 70px; }
  #header .header-point .ponta { width: 70px; }
  #header .header-point .docomo { width: 70px; }

  #footer .logo { width: 100px; }

}






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

  /*#header .header-inner { justify-content: center; flex-direction: column; padding: 7px 0 2px; }*/
  #header .logo { margin: 0 auto; width: 94px;}
  #header h1.title { margin: 0 auto; width: 13em; font-size: 20px; color: #fff;}
  #header .header-point { margin: 0 auto; padding: 0; }
  #header .header-point li:nth-last-child(5) { margin-right: 0; }
  #header .header-point .brand { width: 56px; margin-right: 0; }
  #header .header-point .cooca { width: 56px; }
  #header .header-point .rakuten { width: 56px; }
  #header .header-point .ponta { width: 56px; }
  #header .header-point .docomo { width: 56px; }

  #foot-nav { background: none; }
  #foot-nav .foot-nav-inner { flex-direction: column; padding: 0; }
  #foot-nav li { width: auto; border-left: none; border-bottom: 1px solid #fff; }
  #foot-nav li:last-child { border-right: none; }
  #foot-nav a { height: 50px; background-size: 180px 18px; }

  #footer .footer-inner { padding: 22px 2% 30px; }
  #footer .logo { padding: 0 0 12px; width: 72px; }
  #footer .copyright { font-size: 11px; }

  .pagetop { bottom: 8px; right: 8px; }
  .pagetop a { width: 46px; height: 46px; }
  .pagetop a:after { width: 8px; height: 8px; margin: -3px 0 0 -5px; }

}