@charset "utf-8";

@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}

/* =Reset default browser CSS.
Based on work by Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;/*font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;*/margin:0;outline:0;padding:0;vertical-align:baseline;}
:focus{outline:0;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"";}
img{max-width:100%;height:auto;vertical-align:bottom;}
a img{max-width:100%;height:auto;border:0;}
/* a:hover img{animation:fadeIn 1s ease 0s 1 normal;} */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
/* body{font:1rem/1.5 "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif; color:#000;} */

/* リンク設定
------------------------------------------------------------*/
a{text-decoration:none;outline:0;vertical-align:baseline;color:#000;}
a:hover,a:active{color:#000;}

/**** Clearfix ****/
.inner:after{content:""; display:table;clear:both;}
.inner{zoom:1;}
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}

/* 汎用クラス
*****************************************************/
.pcDisp{display:block;}
.spDisp{display:none;}

.wrapper{
    height: 100vh;
    /* overflow: scroll; */
    -webkit-overflow-scrolling: touch;
}

/* ヘッダー
------------------------------------------------------------*/
header.header{max-width:1148px;width:100%;margin:0 auto;padding:0;box-sizing:border-box; height:154px;}
header.header h1{ max-width:367px; width:100%; float:left; margin-left:34px; line-height:100%; margin-right:38px;}
header.header #head_tel{ max-width:216px; width:100%; float:left; margin-top:55px; margin-right:42px;}
header.header p{ color:#545454; font-size:0.7rem; margin-top:10px; margin-bottom:5px;}
header.header #head_btn{ max-width:428px; width:100%; float:left; margin-top:44px;}
/*header.header #head_btn{ max-width:428px; width:100%; float:left; margin-top:16px;}*/
header.header #head_search{max-width:180px; width:100%; float:right; border:#656565 1px solid; border-radius:30px; height:28px; background:url(images/head_search.jpg) no-repeat 90% 50%; color:#656565; font-size:11px; line-height:28px; text-align:center; margin-left:246px;}
header.header #head_btn_ul li{ float:left; margin-top:11px;}
header.header #head_btn_ul li img{ width:100%;}
header.header #head_btn_ul li.li01{max-width:168px; width:100%; margin-right:5px;}
header.header #head_btn_ul li.li02{max-width:105px; width:100%; margin-right:5px;}
header.header #head_btn_ul li.li03{max-width:145px; width:100%;}

/* フッター
*****************************************************/
nav#mainNav1911{max-width:1099px; width:100%; clear:both; padding-top:10px; background:url(images/head_nav_line.jpg) no-repeat right;margin:0 auto;}
nav#mainNav1911 ul{margin:0 auto;display:flex;flex-wrap:nowrap;justify-content:space-around;align-items:center;}
nav#mainNav1911 li{width:100%;padding:10px 0;text-align:center;box-sizing:border-box; font-family:"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; color:#404040; font-size:0.85rem; line-height:100%; font-weight:bold; background:url(images/head_nav_line.jpg) no-repeat left;}
nav#mainNav1911 li a div{width:100%; color:#831214; font-size:0.6rem; margin-top:5px; font-weight:bold;}
nav#mainNav1911 li a:hover{animation:fadeIn 1s ease 0s 1 normal;}

/* スマホサイズ
------------------------------------------------------------*/
@media only screen and (max-width:744px){
  .pcDisp{display:none;}
  .spDisp{display:block;}
  .pcBlock{display:inline;}
  .link{color:#0366d6;}
  div.drawer{display:block;}
  nav#mainNav,nav#mainNav1911{display:none;}

  header.header{position:fixed; top:0; z-index:90;background:#fff; height:auto; max-width:100%;}
  header.header h1{ max-width:80%; margin:3px 0 5px 5px; text-align:left;background:#fff;}
  header.header h1 img{ max-width:100%;}
  header.header #head_tel{ display:none;}
  header.header p{ display:none;}
  header.header #head_btn{ display:none;}

  #kv{ margin-top:50px; border:none;}
  #kv a:hover img,#kv a:active img{animation:none;}

  .pan{ display:none;}
  .pan .inner{ max-width:90%; width:90%; margin:0 auto; line-height:50px; font-size:0.7rem;}
  main #conteiner{ max-width:90%; width:90%; margin:0 auto 10px;}
  main #conteiner #side{ display:none;}
  main #conteiner #content{ max-width:100%; width:100%; float:right;}

  /*ドロワー*/
  .sp_nav{ position:fixed; top:0; right:0;}

  #drawer-checkbox {
    display: none;
  }
  #drawer-icon {
    cursor: pointer;
    display: inline-block;
    height: 40px;
    position: relative;
    width: 40px;
    background:url(images/menu.png) no-repeat;
    background-size:100%;
    float:right;
    margin-top:7px;
    margin-right:10px;
    z-index:50;
  }

  #drawer-icon span {
    background:  none;
    border-radius: 4px;
    display: block;
    height: 8%;
    left: 50%;
    margin: -8% 0 0 -30%;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-in-out 0s;
    width: 60%;
  }
  #drawer-icon span::before,
  #drawer-icon span::after {
    -webkit-transform: rotate(0);
    background: #fff;
    border-radius: 4px;
    content: "";
    display: block;
    height: 50%;
    left: 50%;
    margin: -8% 0 0 -50%;
    position: absolute;
    top: 50%;
    transform: rotate(0);
    transition: all 0.3s ease-in-out;
    width: 100%;
  }
  #drawer-icon span::before {
    margin-top: -38%;
  }
  #drawer-icon span::after {
    margin-top: 0%;
  }
  #drawer-checkbox:checked ~ #drawer-icon span {
    background: rgba(51, 51, 51, 0);
  }
  #drawer-checkbox:checked ~ #drawer-icon span::before,
  #drawer-checkbox:checked ~ #drawer-icon span::after {
    content: "";
    display: block;
    height: 50%;
    border-radius: 4px;
    left: 50%;
    margin: -8% 0 0 -50%;
    position: absolute;
    top: 50%;
    width: 100%;
  }
  #drawer-checkbox:checked ~ #drawer-icon span::before {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  #drawer-checkbox:checked ~ #drawer-icon span::after {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }

  #drawer-content {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 40;
    width: 80%;
    max-width: 80%;
    height: 100%;
    background: none;
    transition: all 0.3s ease-in-out 0s;
    transform: translateX(100%);
  }
  #drawer-checkbox:checked ~ #drawer-content {
    transform: translateX(0);
  }

  #drawer-content ul{
    padding-top:50px;
    background:url(images/sp_nav_bg.jpg) repeat-y;
    background-size:100%;
    float:right;
  }
  #drawer-content li{ text-align:center; width:70%; margin:0 auto 1px;}
  #drawer-content li.li06{ margin:30px auto 18px;}
  #drawer-content li.li07{ margin:0 auto 48px;}
  #drawer-content li a{display:block;}

  #drawer-close {
    display: none;
    position: fixed;
    z-index: 39;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.16);
    opacity: 0;
    transition: all 0.3s ease-in-out 0s;
  }

  #drawer-checkbox:checked ~ #drawer-close {
    display: block;
    opacity: 0.3;
  }

}