@charset "UTF-8";

/* ========================================
  Reset
======================================== */
body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, p, blockquote, pre, address, object, form, fieldset, input, textarea {
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6, table, input, textarea {
  font-size: 100%;
  font-weight: normal;
}
ul, ol {
  list-style: none;
  list-style-position: inside;
}
html {
  font-size: 62.5%;
  overflow-y: scroll;
}

/* ========================================
  Base
======================================== */
body {
  color: #464646;
  font-family: '游ゴシック体', Yu Gothic, YuGothic, 'ヒラギノ角ゴシック Pro', Hiragino Kaku Gothic Pro, 'ＭＳ Ｐゴシック', MS PGothic, Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.0;
}
a {
  color: #464646;
  text-decoration: none;
}
a:hover {
  color: #000000;
  text-decoration: none;
}
img {
  vertical-align: bottom;
}

/* ----------------------------------------
  clearfix
---------------------------------------- */
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/* ========================================
  Common layout
======================================== */
html,body {
  height: 100%;
}
#wrap {
  position: relative;
  width: 100%;
  min-width: 1000px;
  height: auto !important; /*IE6対策*/
  height: 100%; /*IE6対策*/
  min-height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
#wrap-inner {
  padding-top: 95px;
}
#container {
  padding-bottom: 102px; /*フッターの高さと同じ*/
}
#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 102px;
}

/* font */
.en-letter {
  font-family: Helvetica, sans-serif;
  font-weight: lighter;
}

/* ----------------------------------------
  Header
---------------------------------------- */
#header {
  position: absolute;
  top: 15px;
  width: 100%;
}
#header.fixed {
  position: fixed;
  top: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 100;
}
.header__inner {
  position: relative;
  width: 1000px;
  height: 78px;
  margin: 0 auto;
}
.header__logo {
  float: left;
  margin: 30px 0 0;
}
.header__logo a:hover {
  color: #000;
}
.logo_text {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.3em;
}
.header__gnavi {
  float: right;
  margin: 35px 0 0;
  letter-spacing: 0.05em;
}
.header__gnavi li {
  display: inline-block;
  margin-left: 15px;
}
.header__gnavi li a {
  color: #969696;
  transition: color 0.6s;
}
.header__gnavi li a:hover {
  color: #000;
  transition: color 0.6s;
}
.header__gnavi li a.cr {
  color: #464646;
}

/* ----------------------------------------
  Container
---------------------------------------- */
.social-link {
  width: 1000px;
  margin: 0 auto;
  text-align: right;
  font-size: 0;
}
.social-link__btn {
  position: relative;
  display: inline-block;
  margin-left: 14px;
}
.social-link__btn a .layer {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 15px;
  height: 15px;
  opacity: 0;
  transition: opacity 0.6s;
}
.social-link__btn a:hover .layer {
  opacity: 1;
  transition: opacity 0.6s;
}
.social-link__btn.link-fb .layer {
  background: url(../images/btn_fb_on.png);
  background-size: 15px auto;
}
.social-link__btn.link-ig .layer {
  background: url(../images/btn_ig_on.png);
  background-size: 15px auto;
}

.contents {
  width: 1000px;
  margin: 90px auto 0;
  padding: 0 0 148px;
}

/* ----------------------------------------
  Footer
---------------------------------------- */
#footer {
  text-align: center;
}
.footer__pagetop {
  width: 22px;
  height: 14px;
  margin: 0 auto 27px;
}
.footer__pagetop a {
  opacity: 1.0;
  transition: opacity 0.6s;
}
.footer__pagetop a:hover {
  opacity: 0.7;
  transition: opacity 0.6s;
}
.footer__copyright {
  letter-spacing: 0.04em;
}
.footer__copyright small {
  color: #969696;
  font-size: 1.0rem;
}