@charset "UTF-8";
/*$pc: 901px; // PC
$sp: 900px;  // スマホ

@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/***全ページ共通***/
@media screen and (max-width: 900px) {
  html {
    overflow-x: hidden; } }

body {
  overflow-x: hidden;
  font-family: 'Noto Sans Japanese';
  background: #F1EFEF; }

body p {
  font-size: 1em;
  letter-spacing: 1px;
  line-height: 1.8em; }
  @media screen and (max-width: 900px) {
    body p {
      font-size: 0.8em; } }

p, ul li a {
  color: #333333;
  text-decoration: none; }

/***下層ページ共通***/
.subPage_title {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 50px; }
  @media screen and (max-width: 900px) {
    .subPage_title {
      margin-top: 50px; } }
  .subPage_title img {
    width: 350px;
    margin-bottom: 20px; }
  .subPage_title h2 {
    letter-spacing: 1px;
    line-height: 1.8em; }
    @media screen and (max-width: 900px) {
      .subPage_title h2 {
        width: 90%;
        margin: 0 auto;
        text-align: left; } }

.common_about_column {
  width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 100px;
  margin-top: 70px; }
  @media screen and (max-width: 900px) {
    .common_about_column {
      flex-direction: column;
      width: 100%; } }
  .common_about_column .common_about {
    width: 450px;
    padding: 20px 10px 40px;
    box-sizing: border-box; }
    @media screen and (max-width: 900px) {
      .common_about_column .common_about {
        flex-direction: column;
        width: 100%; } }
    .common_about_column .common_about h1 {
      text-align: center;
      font-size: 1.5em;
      font-weight: bold;
      padding: 10px; }
    .common_about_column .common_about img {
      width: 100%;
      border-radius: 5px; }
    .common_about_column .common_about p {
      width: 355px;
      margin: 0 auto; }
      @media screen and (max-width: 900px) {
        .common_about_column .common_about p {
          width: 90%;
          margin: 0 auto;
          font-size: 1em; } }

/*$pc: 901px; // PC
$sp: 900px;  // スマホ

@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}*/
/* Eric Meyer’s “Reset CSS” 2.0
-----------------------------------------------------------
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
*/
/* header
------------------------------------------- */
header {
  z-index: 2; }

/*nav {
  z-index: 1;
}*/
.header__leadWrap {
  background: #0285c1;
  color: #fff;
  font-size: 11px; }

.headerNavWrap,
.headerNav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto; }

.header__logo {
  width: 171px;
  line-height: 50px;
  opacity: .0; }

.headerNav {
  max-width: none;
  font-size: 15px;
  font-weight: bold; }

.headerNav li {
  margin-left: 30px; }

.headerNav li:first-child {
  margin-left: 0; }

.headerNav li a {
  display: block;
  line-height: 48px; }

#js-menuBk {
  display: none;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6); }

#js-closeBtnWrap {
  display: none; }

#js-openBtn {
  display: none; }

.menuClose {
  display: inline-block;
  padding: 20px; }

.menuClose img {
  width: 17px; }

@media screen and (max-width: 1100px) {
  .header__leadWrap {
    padding: 0 10px; }

  .headerNavWrap {
    padding: 20px 10px 15px; }

  .headerNav li {
    margin-left: 20px; } }
@media screen and (max-width: 900px) {
  #header {
    position: relative; }

  .headerNavWrap {
    display: block;
    position: relative;
    padding: 6px 17px; }

  .headerNav {
    display: block; }

  .header__logo img {
    width: 124px; }

  #js-closeBtnWrap {
    display: block;
    background: #fff; }

  #js-openBtn {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 18px;
    margin: auto;
    padding: 20px 17px; }

  #js-openBtn img {
    width: 22px; }

  #js-spNav {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 78%;
    background: #f1f1f1;
    transform: translateX(100%);
    transition: all .3s; }

  #js-spNav.isOpen {
    transform: translateX(0); }

  .headerNav li {
    margin-left: 0;
    background: #f7f7f7;
    border-bottom: 1px solid #dbdbdb; }

  .headerNav li:first-child {
    border-top: 1px solid #dbdbdb; }

  .headerNav li a {
    position: relative;
    padding: 0 15px;
    font-weight: normal;
    line-height: 50px; }

  .headerNav li a::after {
    position: absolute;
    top: 0;
    right: 17px;
    bottom: 0;
    width: 7px;
    height: 7px;
    margin: auto;
    border-right: 1px solid #0c89c3;
    border-bottom: 1px solid #0c89c3;
    transform: rotate(-45deg);
    content: ""; } }
/*$pc: 901px; // PC
$sp: 900px;  // スマホ

@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}*/
/***main img***/
.main_img img {
  width: 100%;
  margin-top: -110px;
  position: relative;
  z-index: -1; }
  @media screen and (max-width: 900px) {
    .main_img img {
      margin-top: -65px; } }

/***logo***/
.logo img {
  width: 155px;
  position: absolute;
  top: 25px;
  left: 25px; }
  @media screen and (max-width: 900px) {
    .logo img {
      width: 20%;
      top: 3%;
      left: 3%; } }

/***ボタン共通***/
.normal_btn {
  margin-bottom: 30px; }
  .normal_btn a {
    width: 300px;
    background: #fff;
    border: 2px solid #555;
    box-shadow: 5px 5px 0 #333;
    color: #000;
    display: block;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    margin: 10px auto;
    padding: 20px 40px; }
    @media screen and (max-width: 900px) {
      .normal_btn a {
        width: 70%; } }

.normal_btn a:hover {
  box-shadow: 0 1px 5px #333;
  margin: 12px auto 8px;
  box-shadow: none;
  transform: translate3d(0, 3px, 0); }

/***使用用途***/
.about {
  display: flex;
  background-image: url("../img/about_back.png");
  background-repeat: no-repeat;
  background-size: cover; }
  @media screen and (max-width: 900px) {
    .about {
      flex-direction: column; } }
  .about .about_text {
    width: 50%;
    padding: 150px 0;
    position: relative; }
    @media screen and (max-width: 900px) {
      .about .about_text {
        width: 100%;
        padding-top: 5%;
        padding-bottom: 3%; } }
    .about .about_text .about_title {
      background: #333;
      padding: 70px 10px;
      width: 80%;
      position: absolute;
      top: 10; }
      @media screen and (max-width: 900px) {
        .about .about_text .about_title {
          width: 70%;
          padding: 45px 25px; } }
      .about .about_text .about_title h1 {
        color: #fff;
        font-size: 3em;
        text-align: center;
        z-index: 1;
        letter-spacing: 2px; }
        @media screen and (max-width: 900px) {
          .about .about_text .about_title h1 {
            font-size: 2em; } }
      .about .about_text .about_title h2 {
        color: #fff;
        font-size: 0.8em;
        letter-spacing: 3px;
        text-align: center;
        margin-bottom: 20px; }
        @media screen and (max-width: 900px) {
          .about .about_text .about_title h2 {
            font-size: 0.5em;
            margin-bottom: 10px; } }
      .about .about_text .about_title h3 {
        color: #fff;
        font-size: 0.8em;
        letter-spacing: 3px;
        text-align: center;
        margin-top: 5px; }
        @media screen and (max-width: 900px) {
          .about .about_text .about_title h3 {
            font-size: 0.5em; } }
    .about .about_text p {
      background: #fff;
      display: inline-block;
      width: 80%;
      padding: 120px 30px;
      margin-top: 170px; }
      @media screen and (max-width: 900px) {
        .about .about_text p {
          padding: 90px 22px 50px;
          margin-top: 120px; } }
  .about .about_photo {
    width: 50%;
    position: relative; }
    @media screen and (max-width: 900px) {
      .about .about_photo {
        width: 100%;
        height: 480px; } }
    .about .about_photo img {
      box-shadow: 2px 2px 10px grey; }
    .about .about_photo img:nth-child(1) {
      border-radius: 11px;
      box-shadow: 2px 2px 10px grey; }
    .about .about_photo .photo00 {
      width: 50%;
      position: absolute;
      top: 40px;
      z-index: 1; }
      @media screen and (max-width: 900px) {
        .about .about_photo .photo00 {
          width: 50%;
          margin-bottom: 2%;
          top: 2%; } }
    .about .about_photo .photo01 {
      width: 60%;
      position: absolute;
      top: 120px;
      left: 35%; }
      @media screen and (max-width: 900px) {
        .about .about_photo .photo01 {
          width: 60%;
          margin-bottom: 2%;
          top: 9%;
          left: auto;
          right: 0; } }
    .about .about_photo .photo02 {
      width: 100%;
      position: absolute;
      bottom: 0px;
      right: 0; }
      @media screen and (max-width: 900px) {
        .about .about_photo .photo02 {
          width: 80%;
          margin-bottom: -1%;
          left: 0; } }
    .about .about_photo .photo03 {
      width: 40%;
      position: absolute;
      bottom: 25%;
      left: 8%; }
      @media screen and (max-width: 900px) {
        .about .about_photo .photo03 {
          width: 30%;
          margin-bottom: -1%;
          left: 0; } }

/***カラー展開***/
.color {
  position: relative;
  background-image: url("../img/color.png");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
  height: 800px; }
  @media screen and (max-width: 900px) {
    .color {
      background-image: url("../img/color_sp.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 45%; } }
  .color .color_text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 400px;
    height: 300px;
    padding: 20px 50px; }
    @media screen and (max-width: 900px) {
      .color .color_text {
        width: 100%;
        padding: 0px; } }
    .color .color_text img {
      width: 100%; }
    .color .color_text .color_type {
      font-size: .9em;
      letter-spacing: 1px;
      line-height: 1.3em;
      margin-top: 15px; }
      .color .color_text .color_type p {
        margin-bottom: 15px; }
        @media screen and (max-width: 900px) {
          .color .color_text .color_type p {
            width: 90%;
            margin: 0 auto; } }
  .color .color_photo {
    display: flex;
    flex-wrap: wrap; }
    @media screen and (max-width: 900px) {
      .color .color_photo {
        width: 240%; } }
    .color .color_photo img {
      width: 50%;
      height: 50%; }

/***設置場所***/
.store_title {
  position: relative; }
  .store_title img {
    width: 100%;
    margin-top: -7%;
    position: relative; }
    @media screen and (max-width: 900px) {
      .store_title img {
        display: none; } }
  .store_title .store_title_h2 {
    width: 20%;
    position: absolute;
    left: 40%;
    top: 35px;
    z-index: 1; }
    @media screen and (max-width: 900px) {
      .store_title .store_title_h2 {
        width: 60%;
        left: 21%;
        top: 85%; } }

.store {
  position: relative;
  background: #F0E4E4;
  height: 160px; }
  @media screen and (max-width: 900px) {
    .store {
      height: 250px; } }
  .store .store_photo {
    width: 90%;
    margin: 0 auto;
    margin-top: -5px; }
    @media screen and (max-width: 900px) {
      .store .store_photo {
        height: 100px;
        margin-bottom: 60px; } }
    .store .store_photo p {
      margin-bottom: 35px; }
      @media screen and (max-width: 900px) {
        .store .store_photo p {
          padding-top: 50px; } }
  @media screen and (max-width: 900px) {
    .store .store_btn {
      margin-bottom: 50px; } }

/***ニュース***/
.news {
  background: #fff;
  padding: 10px 20px 50px;
  margin-bottom: 80px;
  margin: 100px;
  box-shadow: 20px 20px 0px #f1f3c8;
  position: relative; }
  @media screen and (max-width: 900px) {
    .news {
      margin: 0px;
      padding: 30px 20px 50px; } }
  .news .news_text {
    width: 255px;
    margin: 0 auto;
    padding: 20px; }
    .news .news_text img {
      width: 255px; }

@media screen and (max-width: 900px) {
  #fw-container {
    height: 370px !important; } }

/***お問い合わせ***/
.contact {
  position: relative;
  background-image: url(../img/about_back.png);
  background-size: 50% auto;
  height: 365px; }
  @media screen and (max-width: 900px) {
    .contact {
      height: 360px;
      background-size: cover;
      background-repeat: no-repeat; } }
  .contact .contact_photo {
    height: 260px;
    margin: 0 auto; }
    .contact .contact_photo h2 {
      padding: 30px;
      font-size: 2em; }
      @media screen and (max-width: 900px) {
        .contact .contact_photo h2 {
          padding: 30px 30px 5px;
          font-size: 1.5em; } }
    .contact .contact_photo p {
      padding: 30px;
      letter-spacing: 1px;
      line-height: 1.8em; }
      @media screen and (max-width: 900px) {
        .contact .contact_photo p {
          font-size: 0.8em; } }
  @media screen and (max-width: 900px) {
    .contact .contact_btn {
      width: 100%;
      top: 360px;
      left: 0;
      margin-bottom: 30px; } }

/***to top***/
#pageTop {
  width: 7%;
  position: fixed;
  bottom: 10px;
  right: 30px;
  z-index: 3; }
  @media screen and (max-width: 900px) {
    #pageTop {
      width: 15%;
      bottom: 5px;
      right: 10px; } }

#pageTop img {
  width: 100%; }

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7; }

/***footer***/
footer {
  text-align: center; }
  footer .footer_test {
    position: relative; }
    footer .footer_test img {
      width: 100%;
      margin-bottom: -8px; }
    footer .footer_test span {
      display: inline-block;
      font-size: .9em;
      color: #4d4c51;
      font-weight: bold;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 10%; }

/*$pc: 901px; // PC
$sp: 900px;  // スマホ

@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}*/
/*$pc: 901px; // PC
$sp: 900px;  // スマホ

@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}*/
.homegage_link {
  margin-bottom: 0px; }

/*$pc: 901px; // PC
$sp: 900px;  // スマホ

@mixin pc {
  @media (min-width: ($pc)) {
    @content;
  }
}
@mixin sp {
  @media (max-width: ($sp)) {
    @content;
  }
}*/
form {
  width: 500px;
  margin: 0 auto;
  margin-bottom: 100px; }
  @media screen and (max-width: 900px) {
    form {
      width: 95%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      margin-bottom: 100px; } }

input[type=text], textarea, select {
  width: 325px;
  padding: 15px 10px;
  font-size: 86%;
  border: none;
  border-radius: 3px;
  background: #fff; }
  @media screen and (max-width: 900px) {
    input[type=text], textarea, select {
      width: 95%;
      font-size: 1.3em; } }

textarea {
  height: 100px;
  font-size: 100%; }
  @media screen and (max-width: 900px) {
    textarea {
      font-size: 1.3em; } }

select {
  width: 345px; }
  @media screen and (max-width: 900px) {
    select {
      width: 100%; } }

input[name=btn_confirm],
input[name=btn_submit],
input[name=btn_back] {
  margin-top: 10px;
  padding: 5px 20px;
  font-size: 100%;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 3px;
  box-shadow: 0 3px 0 #ccc;
  background: #efa1be; }

input[name=btn_back] {
  margin-right: 20px;
  box-shadow: 0 3px 0 #eee;
  background: #c3c3c3; }
  @media screen and (max-width: 900px) {
    input[name=btn_back] {
      margin-right: 0px; } }

.element_wrap {
  margin-bottom: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  text-align: left; }
  @media screen and (max-width: 900px) {
    .element_wrap {
      width: 95%;
      margin: 0 auto;
      display: flex;
      flex-direction: column; } }

label {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: bold;
  width: 150px; }

.element_wrap p {
  display: inline-block;
  margin: 0;
  text-align: left; }

.error_list {
  width: 500px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 10px 30px;
  font-size: 86%;
  text-align: left;
  border: 2px solid #fff;
  border-radius: 5px; }
  @media screen and (max-width: 900px) {
    .error_list {
      width: 75%; } }
  .error_list li {
    padding: 5px; }

/*# sourceMappingURL=style.css.map */