@charset "UTF-8";



/* header



   ========================================================================== */



header {

  background: #fff;

  margin: auto auto 50px;

  padding: 0 0 10px;

  overflow: hidden;

  border-bottom: solid 1px #ccc;

}



.hdr_titlemenu {

  margin: 0 auto;

  padding: 5px 0 0;

  text-align: center;

}



.hdr_inner {

  box-sizing: border-box;

  margin: auto;

  padding: 60px 0 40px;

  width: 980px;

  text-align: center;

}



.hdr_left {

  display: block;

  width: 32%;

  margin-right: 3%;

  margin-bottom: 1%;

  float: left;

  position: relative;

}



.hdr_h1 {

  width: 100%;

  margin: auto;

}



.hdr_right {

  width: 64%;

  float: left;

  margin-top: 1%;

}



.hdr_right img {

  width: 100%;

  margin-top: 7%;

}



.hdr_btn {

  clear: both;

  margin: 10px auto;

}



.hdr_btn a {

  box-sizing: border-box;

  display: block;

  background: #ed9226;

  border-radius: 5px;

  color: #fff;

  font-size: 110%;

  font-weight: 600;

  padding: 10px;

  margin: auto;

  text-align: center;

  text-decoration: none;

  position: relative;

  -webkit-font-smoothing: antialiased;

  width: 70%;

}



.hdr_btn a:hover {

  opacity: 0.7;

  transition: 0.3s;

}



.hdr_best {

  width: 130px;

  position: absolute;

  margin: auto;

  top: -25px;

  left: -60px;

  transform: rotate(-5deg);

}





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

  .hdr_inner {

    width: 100%;

    padding: 0 5% 5%;

  }

  .hdr_left {

    width: 100%;

    margin: 30px auto auto;

    float: none;

  }

  .hdr_h1 {

    width: 75%;

    margin: auto;

  }

  .hdr_right {

    width: 100%;

    margin: auto auto 20px;

    float: none;

  }

  .hdr_right img {

    margin: auto auto 15px;

  }

  .hdr_btn a {

    font-size: 90%;

    width: 100%;

  }

  /* CP用 */

  .hdr_inner {

    width: 100%;

    padding: 5%;

  }

  .hdr_left {

    margin: auto;

  }

  .hdr_best {

    width: 30%;

    top: -2%;

    left: 0;

    transform: rotate(-5deg);

  }

  .hdr_cptxt {

    display: none;

  }

  .hdr_sptxt {

    display: block;

  }

}





/* drawr



   ========================================================================== */



@media screen and (min-width: 800px) {

.fixed {

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 10000;

  /*

box-shadow: 0px 1px 3px rgba(0,41,88,0.9);

-webkit-box-shadow: 0px 1px 3px rgba(0,41,88,0.9);

-moz-box-shadow: 0px 1px 3px rgba(0,41,88,0.9);

*/

}

}



#fixedBox {

  background: #949494;

  overflow: hidden;

}



.mainmenu {

  list-style: none;

  box-sizing: border-box;

  margin: 0 auto;

  padding: 0;

  width: 980px;

  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

}



.mainmenu li {

  box-sizing: border-box;

  float: left;

  line-height: 1;

  text-align: center;

  width: 25%;

  overflow: hidden;

}



.smtop {

  display: none;

}



.mainmenu li a {

  display: block;

  /*background: #24ade2;



	border-left: solid 1px #fff;*/

  color: #fff !important;

  font-weight: 600;

  padding: 25px 0;

  text-decoration: none;

}



.mainmenu li:first-child a {

  border-left: none;

}



.mainmenu a:hover {

  background: #8a8888;

  transition: 0.5s;

}



.close-bt {

  display: none;

}



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

  /*右上に固定でメニューボタンを設置*/

  .drawr-bt {

    display: block;

    background: #f7f9fb;

    box-shadow: 0 0 2px #333;

    cursor: pointer;

    text-align: center;

    font-size: 200%;

    padding: 6px;

    width: 40px;

    height: 40px;

    line-height: 40px;

    position: fixed;

    top: 10px;

    right: 10px;

    top: 5px;

    right: 5px;

    z-index: 7777;

  }

  #panel-btn-icon {

    display: block;

    position: absolute;

    top: 50%;

    left: 50%;

    width: 30px;

    height: 2px;

    margin: -1px 0 0 -15px;

    /* widthの半分引いた数 */

    background: #333;

  }

  #panel-btn-icon:before, #panel-btn-icon:after {

    background: #333;

    display: block;

    content: "";

    position: absolute;

    top: 50%;

    left: 0;

    width: 30px;

    height: 2px;

  }

  #panel-btn-icon:before {

    margin-top: -10px;

    height: 1.5px;

  }

  #panel-btn-icon:after {

    margin-top: 8px;

  }

  /*右から出てくるメニューボックス。こちらもfixed。z-indexでメニューボタンの上に持ってきましょう。*/

  .drawr {

    display: none;

    background: rgba(255, 255, 255, 0.9);

    padding: 0;

    position: fixed;

    top: 0;

    right: 0;

    width: 100%;

    z-index: 8888;

  }

  /*閉じるボタンを設置。z-indexを最強にしておかないと隠れちゃいます。*/

  .close-bt {

    display: block;

    background: #f7f9fb;

    cursor: pointer;

    margin: 11px 11px 11px auto;

    margin: 5px 5px 5px auto;

    width: 51px;

    height: 51px;

    z-index: 9999;

    position: relative;

    box-shadow: 0px 1px 3px rgba(0, 41, 88, 0.3);

    -webkit-box-shadow: 0px 1px 3px rgba(0, 41, 88, 0.3);

    -moz-box-shadow: 0px 1px 3px rgba(0, 41, 88, 0.3);

  }

  .close-btn-icon {

    display: block;

    background: #f00;

    color: #333;

    position: relative;

    top: 50%;

    left: 50%;

    width: 30px;

    height: 2px;

    margin: -1px 0 0 -15px;

    background: transparent;

    transition: 0.3s;

  }

  .close-btn-icon:before, .close-btn-icon:after {

    background: #333;

    content: "";

    position: absolute;

    width: 30px;

    height: 2px;

    margin-top: -1px;

  }

  .close-btn-icon:before {

    transform: rotate(-45deg);

    -webkit-transform: rotate(-45deg);

  }

  .close-btn-icon:after {

    transform: rotate(-135deg);

    -webkit-transform: rotate(-135deg);

  }

  #fixedBox {

    background: none;

  }

  .mainmenu {

    width: 100%;

    margin-bottom: 50px;

    background: #949494;

  }

  .mainmenu li {

    float: none;

    text-align: left;

    width: 100%;

  }

  .smtop {

    display: block;

  }

  .mainmenu li a {

    background: none;

    border: none;

    border-bottom: solid 1px #eee !important;

    box-sizing: border-box;

    color: #fff !important;

    padding: 20px 10px;

    margin: 0 3%;

    text-align: center;

  }

  .mainmenu li:last-child a {

    border: none !important;

  }

  .mainmenu a:hover {}

}





/* プリント非表示



   ========================================================================== */



@media print {

  .drawr-bt {

    display: none !important;

  }

}