@charset "UTF-8";

/*----------------------------------------------------
    ☆Reset
----------------------------------------------------*/

body,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
ul,
ol,
li,
dl,
dt,
dd,
p,
img {
  margin: 0;
  padding: 0;
}

body {
  /*    font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;*/
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  /*    min-width:1000px;*/
  overflow-x: hidden;
}

a {
  /*    color:#666;*/
  text-decoration: none;
  /*
    cursor:pointer;
    outline:none;
*/
}

a:link {
  /*    color:#666;*/
  text-decoration: none;
  /*    outline:none;*/
}

a:hover {
  /*    color:#666;*/
  text-decoration: none;
  /*    outline:none;*/
}

/*
#contents p {
    line-height:170%;
}
*/

ul,
ol {
  list-style-type: none;
}

ul li,
ol li,
dl {
  line-height: 170%;
}

a:focus {
  outline: none;
}

::selection {
  background-color: #fda21e;
  color: #fff; /* Safari */
}
::-moz-selection {
  background-color: #fda21e;
  color: #fff; /* Firefox */
}

/*----------------------------------------------------
    ☆Crearfix
----------------------------------------------------*/

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*
.clearfix:after {
    content:".";
    height:0;
    clear:both;
    display:block;
    font-size:0.1em;
    line-height:0;
    visibility:hidden;
}
*/

/*
.clearfix {
    display:inline-block;
    min-height:1%;
}

 Hides from IE-mac \
*/
/** html .clearfix {height:1%;}*/
/* End hide from IE-mac */

/*----------------------------------------------------
    ☆br clear
----------------------------------------------------*/

br.clear_noie,
div.clear_noie {
  display: inline !important;
  display: none;
  clear: both;
  line-height: 0px;
}

br.clear_all {
  clear: both;
  line-height: 0px;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  br.clear_noie {
    display: block !important;
    content: " ";
  }
}

/*----------------------------------------------------
    ☆topcontrol
----------------------------------------------------*/

#topcontrol a {
  background: url(../cmn_js/scrolltop/scrollup.png) left top no-repeat;
  background: url(../cmn_js/scrolltop/scrollup.gif) left top no-repeat\9; /* IE8 and below */
  *background: url(../cmn_js/scrolltop/scrollup.gif) left top no-repeat; /* IE7 and below */
  _background: url(../cmn_js/scrolltop/scrollup.gif) left top no-repeat; /* IE6 */
  display: block;
  height: 60px;
  width: 60px;
}

/*----------------------------------------------------
    ☆Display None
----------------------------------------------------*/

#header p.logo a span {
  display: none;
  visibility: hidden;
}

/*----------------------------------------------------
    ☆base contents
----------------------------------------------------*/

/*-- header --*/

#header {
  height: 154px;
  width: 100%;
}

#header div.headerInr {
  background: url(../cmn_img/bg_hd_header.gif) center top repeat-x;
  height: 154px;
  width: 100%;

  position: fixed;
  z-index: 1;
}

#header div.headerInr div.headerRelative {
  height: 154px;
  margin: 0 auto;
  width: 1000px;

  position: relative;
}

#header div.headerInr div.headerRelative p.logo {
  width: 200px;
  position: absolute;
  left: 484px;
  top: 74px;
transform: translate(-50%, -50%);
}

#header div.headerInr div.headerRelative p.logo a {
  background: url(../cmn_img/img_hd_logo.png) left top no-repeat;
  display: block;
    height: 95px;
    width: 180px;
}

#header nav {
  margin: 0 auto;
  padding-top: 25px;
  width: 1000px;
}

#header nav ul {
  width: 1000px;
}

#header nav ul li {
  float: left;
  height: 80px;
  width: 120px;
}

#header nav ul li a {
  background-image: url(../cmn_img/bg_gnav.png);
  background-repeat: no-repeat;
  display: block;
  height: 80px;
  width: 120px;
}

#header nav ul li.li01 {
  margin-right: 89px;
}
#header nav ul li.li02 {
  margin-right: 337px;
}
#header nav ul li.li03 {
  margin-right: 94px;
}
#header nav ul li.li04 {
  margin-right: 0;
}

#header nav ul li.li01 a {
  background-position: 0 0;
}
#header nav ul li.li02 a {
  background-position: -209px 0;
}
#header nav ul li.li03 a {
  background-position: -666px 0;
}
#header nav ul li.li04 a {
  background-position: -880px 0;
}

#header nav ul li a span {
  display: none;
  visibility: hidden;
}


/*-- mv --*/

/*
#mv {
    border-bottom:1px solid #E9E9E9;
    height:245px;
    margin-bottom:80px;
    width:100%;
}
*/

#mv h1,
#mv p {
  margin: 0 auto;
  max-width: 960px;
}

#mv h1 img {
  max-width: 100%;
  height: auto;
}

#mv h1 span,
#mv p span {
  display: none;
  visibility: hidden;
}

/*-- contents --*/

#contents {
  margin: 0 auto;
  padding-bottom: 80px;
}

.contentsInr {
  max-width: 960px;
  margin: 0 auto;
  width: 98%;
}

#contents img {
  max-width: 100%;
  height: auto;
}

/*-- footer --*/

#footer {
  background-color: #b7b7b7;
  width: 100%;
}

#footer #pgTop {
  background-color: #fff;
  width: 100%;
}

#footer #pgTop p {
  margin: 0 auto;
  text-align: right;
  width: 960px;
}

#footer div.ftLogo {
  background-color: #f9f9f9;
  padding: 20px 0;
  width: 100%;
}

#footer div.ftLogo h2 {
  margin: 0 auto;
  max-width: 960px;
}

#footer div.ftLogo h2 img{
    max-width: 100%;
}


#footer small {
  color: #fff;
  display: block;
  font-size: 77% !important;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  width: 960px;
}

/*-- newsBtn --*/

#newsBtn {
  height: 124px;
  width: 37px;

  position: fixed;
  top: 170px;
  right: 0;
}

/*
#motto {
    position: fixed;
    right: -205px;
    top: 200px;
}
*/

/*-- facebook --*/
.fb-like {
  position: absolute;
  top: 0;
  right: 0;
}

/*----------------------------------------------------
display  pc tab sp
----------------------------------------------------*/

.logo-pc {
  display: block;
}
.logo-sp {
  display: none;
}

.img-pc {
    display: block;
}
.img-sp {
    display: none;
}


@media (max-width: 768px) {
    .logo-pc { display:none; }
    .logo-sp {display: block;}
}

@media (max-width: 480px) {
    .img-pc {
        display: none;
    }
    .img-sp {
        display:block;
    }
}


/*----------------------------------------------------
header tab
----------------------------------------------------*/
@media (max-width: 768px) {
    #header {
        height: 54px;
        width: 100%;
    }


    #header div.headerInr {
        background: url(../cmn_img/bg_hd_header.gif) center top repeat-x;
        height: 54px;
        width: 100%;
        position: fixed;
        z-index: 1;
    }

    #header div.headerInr div.headerRelative {
        height: 54px;
        margin: 0 auto;
        width: 100%;
        position: relative;
    }


    #header div.headerInr div.headerRelative p.logo {
        width: 200px;
        position: absolute;
        left: 20px;
        top: 10px;
        transform: translate(-50%, -50%);
    }


        #header div.headerInr div.headerRelative p.logo a {
            background: url(../cmn_img/img_hd_logo_sp.png) left top no-repeat;
            background-size: cover;
            height: 44px;
            width: 71px;
            position: absolute;
            top: -4px;
            left: 96px;
        }
}

/*----------------------------------------------------
menu tab
----------------------------------------------------*/

@media (max-width: 768px) {
    #nav-drawer {
        position: relative;
        width: 100%;
        z-index: 999999;
    }


    /*チェックボックス等は非表示に*/
    .nav-unshown {
        display: none;
    }

    /*アイコンのスペース*/
    #nav-open {
        display: inline-block;
        width: 30px;
        height: 22px;
        vertical-align: middle;
        position: absolute;
        right: 11px;
        top: 16px;
    }

    /*ハンバーガーアイコンをCSSだけで表現*/
    #nav-open span,
    #nav-open span:before,
    #nav-open span:after {
        position: absolute;
        height: 2px; /*線の太さ*/
        width: 25px; /*長さ*/
        border-radius: 3px;
        background: #555;
        display: block;
        content: "";
        cursor: pointer;
    }



    #nav-open span:before {
        bottom: -8px;
    }



    #nav-open span:after {
        bottom: -16px;
    }


    /*閉じる用の薄黒カバー*/
    #nav-close {
        display: none; /*はじめは隠しておく*/
        position: fixed;
        z-index: 99;
        top: 0; /*全体に広がるように*/
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: 0.3s ease-in-out;
    }


    /*中身*/
    #nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9999; /*最前面に*/
        width: 80%; /*右側に隙間を作る（閉じるカバーを表示）*/
        max-width: 320px; /*最大幅（調整してください）*/
        height: 100%;
        background: #fff; /*背景色*/
        transition: 0.3s ease-in-out; /*滑らかに表示*/
        -webkit-transform: translateX(100%);
        transform: translateX(100%); /*左に隠しておく*/
    }

    #nav-content ul li {
        margin-top: 5%;
        margin-left: 13%;
    }


    #nav-content ul li:first-child {
        margin-top: 13%;
    }


    #nav-content ul li a {
        color: #152c12;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
        font-size: 14px;
        font-weight: bold;
    }


    /*チェックが入ったらもろもろ表示*/
    #nav-input:checked ~ #nav-close {
        display: block; /*カバーを表示*/
        opacity: 0.5;
    }

    #nav-input:checked ~ #nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%); /*中身を表示（右へスライド）*/
        box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
    }
}
/*----------------------------------------------------
footer tab
----------------------------------------------------*/
@media (max-width: 768px){
    #footer div.ftLogo h2 {
        max-width: 768px;
        width: 100%;
        text-align: center;
    }

    #footer small {
        max-width: 768px;
    }

    #footer #pgTop p {
        max-width: 768px;
        text-align: center;
        width: 100%;
    }
}


/*===================================-
footer sp
==================================*/

@media (max-width: 480px) {
  #footer #pgTop p {
    max-width: 320px;
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  #footer #pgTop p a img {
    display: inline-block;
  }
}

@media (max-width: 480px) {
  #footer div.ftLogo {
    background-color: #f9f9f9;
    padding: 10px 0;
    max-width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  #footer div.ftLogo .logo-sp {
    text-align: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  #footer small {
    color: #fff;
    display: block;
    font-size: 77% !important;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    width: 320px;
  }
}

/*-- newsBtn --*/

#newsBtn {
  height: 124px;
  width: 37px;

  position: fixed;
  top: 170px;
  right: 0;
}