@charset "utf-8";
/* ----------------------------------------------------------------------
 * description: File Description
 * fileName: style.css
 * author:
 * update:
 * -------------------------------------------------------------------------*/

/*------------------------------------------------------------------------
 [ RESET ]
------------------------------------------------------------------------*/
html, body, div, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, input, textarea, p, blockquote, span, b, i table, caption, tbody, tfoot, thead, tr, th, td, fieldset, form, label, legend, iframe, object, small, strong, sub, sup, var, del, dfn, em, img, ins, kbd, q, samp, abbr, address, cite, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; }

html { background: #FFF; color: #000; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

audio, canvas, video { display: inline-block; }

audio:not([controls]) { display: none; height: 0; }

[hidden] { display: none; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }

ol, ul { list-style: none; }

caption, th { text-align: left; }

table { border-spacing: 0; border-collapse: collapse; font: 100%; font-size: inherit; }

address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal; }

select, input, button, textarea { vertical-align: middle; font: 99% arial, helvetica, clean, sans-serif; font-weight: inherit; font-size: inherit; font-family: inherit; }

input, textarea, select { *font-size: 100%; }

abbr, acronym { border: 0; font-variant: normal; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

legend { color: #000; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; }

hr { display: block; -moz-box-sizing: content-box; box-sizing: content-box; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #cccccc; }

a { margin: 0; padding: 0; background: transparent; vertical-align: baseline; font-size: 100%; }

fieldset, img { border: 0; }

img { vertical-align: bottom; }
/*
  [ font-size ]
  09:  69%   | 10:  77%   | 11:  85%
  12:  93%   | 13: 100%   | 14: 108%
  15: 116%   | 16: 123.1% | 17: 131%
  18: 138.5% | 19: 146.5% | 20: 153.9%
  21: 161.6% | 22: 167%   | 23: 174%
  24: 182%   | 25: 189%   | 26: 197%

  [ color ]
  black:    #898989;
  blue01:   #57c3e8;
  blue02:   #003890;
  blue03:   #eef9fd;

*/

.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.padding0{padding:0!important;}
.pb20{padding-bottom: 20px;}
.clear {
  clear: both;
}

#suntory_contents {
  text-align: center;
  font: 13px/1.231 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  line-height: 160%;
  *font-size: small;
  *font: x-small;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  min-width:320px;
}

#container {
  position: relative;
  text-align: center;
  font: 13px/1.231 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  line-height: 160%;
  *font-size: small;
  *font: x-small;
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  width: 320px;
  margin: 0 auto;
  background: #FFF;
}
.lower #container {
  background: #ccedf8 url(../img/bg.webp) repeat-x;
}

/*-------------------------------------------------------------
 HEADER
 --------------------------------------------------------------*/
#contentHeader {
  position: relative;
  text-align: left;
  height: 48px;
  width: 100%;
  background:#FFFFFF;
  border-top: 2px solid #d9e6eb;
  /*padding-bottom: 10px;
  background-image: -webkit-linear-gradient(bottom, #ccedf8, #57c3e8);
  background-image: -moz-linear-gradient(bottom, #ccedf8, #57c3e8);
  background-image: -o-linear-gradient(bottom, #ccedf8, #57c3e8);
  background-image: -ms-linear-gradient(bottom, #ccedf8, #57c3e8);
  background-image: linear-gradient(to top, #ccedf8, #57c3e8);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccedf8), color-stop(0.75, #57c3e8));*/
}
#contentHeader .logo{
  margin-left: 7px;
}
#navTrigger {
  position: absolute;
  top: 0px;
  right: 10px;
  width: 48px;
  height: 48px;
  /*
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #FFF;
  border: solid 1px #003890;*/
}
#navTrigger {
  display: none;
}
#navTrigger a {
  display: block;
  padding: 0px;
}
#contentHeader .content {
  padding: 0 10px;
  background: url(../img/bg_lower_content.gif) #ccedf8 repeat-x 0 0;
}
#contentHeader p.ttlExplain {
  font-size: 69%;
  color: #003890;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

/*-------------------------------------------------------------
 MAIN
 --------------------------------------------------------------*/
#contents {
  padding: 0 10px;
  text-align: left;
}

.lower header+#contents{
  margin-top:10px;
}

#contents h1,
#contents h2,
#contents h3,
#contents h4 {
  line-height: 1;
  margin-bottom: 10px;
  font-size: 108%;
  color: #57c3e8;
  font-weight: bold;
}
#contents h4 {
  font-size: 93%;
  margin-bottom: 5px;
}
#contents h2 {
  margin-top: 20px;
}
#contents p {
  font-size: 108%;
  color: #898989;
  line-height: 1.5;
}
#contents p.copy {
  font-size: 108%;
}
#contents .content p.explain {
  font-size: 93%;
}
#contents .pmark {
  /*font-size: 0.57em;*/
  font-size: 0.6em;
}
#contents .smll {
  /*font-size: 0.57em;*/
  font-size: 0.7em;
}
#contents .content {
  position: relative;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #FFF;
  padding: 10px;
  margin-bottom: 10px;
  min-height: 140px;
}
#contents .content > a {
  display: block;
  text-decoration: none;
  /*width: 100%;*/
  /*height: 100%;*/
}
#contents .rounded {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  background-color: #57c3e8;
  border: solid 2px #fff;
}

/* icon img */
.content .icon {
  position: absolute;
  top: 9px;
  right: 5px;
}
.content .imgClip {
  position: absolute;
  bottom: 0; right: 0;
}

/*-------------------------------------------------------------
 FOOTER
 --------------------------------------------------------------*/
#contentFooter {
  background: #FFF;
}
#pagetoTopArea {
  position: relative;
  height: 70px;
  text-align: right;
  padding: 25px 10px 0 0;
}
#social {
  padding: 20px 0 20px 10px;
}

/*-------------------------------------------------------------
 Overlay Menu
 --------------------------------------------------------------*/
/* overlay menu 2017*/
#overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f8fdff; z-index: 9000; }
#overlayMenu { display: none; position: absolute; top: 0; left: 0; padding: 0 0 40px 0; width: 100%; text-align: left; z-index: 9100; background: #f8fdff; }
#overlayMenu header { margin-top: 10px; margin-bottom: 0; width: 100%; height: 50px; background: #f8fdff; border-bottom: 1px solid #c7e1ed; }
#overlayMenu .logo { position: absolute; margin-left: 5%; width: 24%; max-width: 87px; }
#overlayMenu .logo img { width: 100%; }
#overlayMenu .btnClose { position: absolute; top: 5px; right: 5%; width: 50px; height: 50px; }
#overlayMenu .btnClose a { display: block; position: relative; width: 100%; height: 100%; }
#overlayMenu .btnClose a img { position: absolute; top: 15px; right: 0; width: 20px; height: 20px; }
#overlayMenu nav { margin-top: 20px; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
#overlayMenu nav a { color: #55a0c6; text-decoration: none; line-height: 1.6; }
#overlayMenu nav section.category { padding: 20px 0; border-bottom: 1px solid #c7e1ed; }
#overlayMenu nav section.category p { position: relative; margin: 0 auto; padding-left: 20px; width: 90%; font-size: 17px; }
#overlayMenu nav section.category p a { font-size: 17px; }
#overlayMenu nav section.category p:before { display: block; position: absolute; top: -2px; margin-left: -13px; content: ""; width: 5px; height: 100%; background-color: #55a0c6; }
#overlayMenu nav section.category ul { margin: 20px auto 0 auto; width: 90%; }
#overlayMenu nav section.category ul li { margin-top: 15px; margin-left: 1em; }
#overlayMenu nav section.category ul li:first-child { margin-top: 0; }
#overlayMenu nav section.category ul li a { display: inline-block; font-size: 14px; }