@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*/
  /*/
  height: auto;
  overflow: hidden;
  /**/
}

a {
  color: black;
}
a:visited {
  color: black;
}
a:focus {
  color: black;
}
a:hover {
  color: black;
}
a:active {
  color: black;
}

/* 全端末共通
-------------------------------------------------- */
html, body {
  height: 100%;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: "Hiragino Kaku Gothic Pro", Verdana, Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Osaka", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}

.left {
  float: left;
}

.right {
  float: right;
}

.text-center {
  text-align: center;
}

.skippr-nav-container {
  bottom: 15px;
}

.skippr-nav-element {
  background-color: rgba(255, 255, 255, 0.8);
}

.skippr-nav-element:hover, .skippr-nav-element-active {
  background-color: #00a481;
}

p {
  font-size: 1.2em;
  line-height: 180%;
  text-align: justify;
}

header {
  width: 100%;
}
header .title-box {
  z-index: 1000;
  position: relative;
}
header .title-box a:active, header .title-box a:hover {
  text-decoration: none;
}
header .top-slider-title {
  text-indent: -9999px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/title@2x.png);
  background-size: contain;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  header .top-slider-title {
    background-image: url(../img/title@2x.png);
  }
}
header .skippr div {
  background-position: center top;
}
header .more {
  width: 30%;
  text-align: center;
  margin: 50px auto 0;
  opacity: .9;
  display: block;
}
header .more:hover {
  background-color: #FFF;
  color: #000;
  opacity: .5;
}
header .more-boder1 {
  border: 1px solid #FFF;
  color: #FFF;
}
header .more-boder2 {
  border: 1px solid #000;
  color: #000;
}

.main {
  margin: 100px auto 30px;
}
.main h1 {
  margin: 100px auto 100px;
  text-indent: -9999px;
  background-size: cover;
  background-image: url(../img/title_logo.gif);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .main h1 {
    background-image: url(../img/title_logo@2x.gif);
  }
}
.main h2 {
  font-weight: bolder;
  margin-bottom: 50px;
}
.main h3 {
  margin: 100px auto 30px;
  text-align: center;
  font-weight: bolder;
}

.member .face {
  background-size: cover;
}
.member h5 {
  color: #929292;
  font-weight: bolder;
  margin-bottom: 25px;
}
.member .inoue {
  background-image: url(../img/face_inoue.jpg);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .member .inoue {
    background-image: url(../img/face_inoue@2x.jpg);
  }
}
.member .kuchi {
  background-image: url(../img/face_kuchi.jpg);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .member .kuchi {
    background-image: url(../img/face_kuchi@2x.jpg);
  }
}
.member .kiyohara {
  background-image: url(../img/face_kiyohara.jpg);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .member .kiyohara {
    background-image: url(../img/face_kiyohara@2x.jpg);
  }
}
.member .nakagawa {
  background-image: url(../img/face_nakagawa.jpg);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .member .nakagawa {
    background-image: url(../img/face_nakagawa@2x.jpg);
  }
}

.contact a {
  text-decoration: underline;
}

.google-maps {
  position: relative;
  height: 0;
  overflow: hidden;
}

.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.map-text {
  margin: 20px auto 50px;
}
.map-text a {
  text-decoration: underline;
}

footer {
  text-align: center;
  margin: 50px auto;
}

/* スマフォ
-------------------------------------------------- */
@media only screen and (max-width: 767px) {
  header .top-slider-title {
    width: 100%;
    height: 0;
    padding-bottom: 40%;
  }
  header .more {
    font-size: 1em;
    padding: 10px;
  }
  header .more:hover {
    background-color: #FFF;
    color: #000;
    opacity: .5;
  }
  header .bg1 {
    background-image: url(../img/sp_slide_01.jpg);
  }
  header .bg2 {
    background-image: url(../img/sp_slide_02.jpg);
  }
  header .bg3 {
    background-image: url(../img/sp_slide_03.jpg);
  }
  header .bg4 {
    background-image: url(../img/sp_slide_04.jpg);
  }
  header .bg5 {
    background-image: url(../img/sp_slide_05.jpg);
  }
  .main h1 {
    width: 145px;
    height: 101px;
  }

  .member .face {
    width: 120px;
    height: 120px;
    background-color: #CCC;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
    margin: 5px auto 25px;
  }
  .member h4 {
    font-weight: bolder;
    margin-bottom: 15px;
  }
  .member .disp-none {
    display: none;
  }
  .member .inoue {
    background-image: url(../img/face_inoue.jpg);
  }
  .member .kuchi {
    background-image: url(../img/face_kuchi.jpg);
  }
  .member .kiyohara {
    background-image: url(../img/face_kiyohara.jpg);
  }
  .member .nakagawa {
    background-image: url(../img/face_nakagawa.jpg);
  }
  .member .sp-space {
    margin-bottom: 25px;
  }

  .contact a {
    text-decoration: underline;
  }

  .google-maps {
    padding-bottom: 100%;
  }

  .map-text {
    text-align: center;
  }

  footer {
    text-align: center;
    margin: 50px auto;
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min-resolution: 2dppx) {
  header .bg1 {
    background-image: url(../img/sp_slide_01@2x.jpg);
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min-resolution: 2dppx) {
  header .bg2 {
    background-image: url(../img/sp_slide_02@2x.jpg);
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min-resolution: 2dppx) {
  header .bg3 {
    background-image: url(../img/sp_slide_03@2x.jpg);
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min-resolution: 2dppx) {
  header .bg4 {
    background-image: url(../img/sp_slide_04@2x.jpg);
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min-resolution: 2dppx) {
  header .bg5 {
    background-image: url(../img/sp_slide_05@2x.jpg);
  }
}

@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min-resolution: 2dppx) {
  .member .inoue {
    background-image: url(../img/face_inoue@2x.jpg);
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min-resolution: 2dppx) {
  .member .kuchi {
    background-image: url(../img/face_kuchi@2x.jpg);
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min-resolution: 2dppx) {
  .member .kiyohara {
    background-image: url(../img/face_kiyohara@2x.jpg);
  }
}
@media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 767px) and (min-resolution: 2dppx) {
  .member .nakagawa {
    background-image: url(../img/face_nakagawa@2x.jpg);
  }
}
/* タブレット
-------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  header .top-slider-title {
    width: 100%;
    height: 0;
    padding-bottom: 26.66667%;
  }
  header .more {
    font-size: 1em;
    padding: 10px;
  }
  header .more:hover {
    background-color: #FFF;
    color: #000;
    opacity: .5;
  }
  header .bg1 {
    background-image: url(../img/slide_01.jpg);
  }
  header .bg2 {
    background-image: url(../img/slide_02.jpg);
  }
  header .bg3 {
    background-image: url(../img/slide_03.jpg);
  }
  header .bg4 {
    background-image: url(../img/slide_04.jpg);
  }
  header .bg5 {
    background-image: url(../img/slide_05.jpg);
  }
  .main h1 {
    width: 241px;
    height: 169px;
  }

  .member .face {
    width: 150px;
    height: 150px;
    background-color: #CCC;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    -ms-border-radius: 75px;
    -o-border-radius: 75px;
    border-radius: 75px;
    margin: 5px auto 25px;
  }
  .member h4 {
    font-weight: bolder;
    margin-bottom: 15px;
  }
  .member .inoue {
    background-image: url(../img/face_inoue.jpg);
  }
  .member .kuchi {
    background-image: url(../img/face_kuchi.jpg);
  }
  .member .kiyohara {
    background-image: url(../img/face_kiyohara.jpg);
  }
  .member .nakagawa {
    background-image: url(../img/face_nakagawa.jpg);
  }
  .contact a {
    text-decoration: underline;
  }

  .google-maps {
    padding-bottom: 50%;
  }

  .map-text {
    text-align: right;
  }

  footer {
    text-align: center;
    margin: 50px auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 991px) and (min-resolution: 2dppx) {
  header .bg1 {
    background-image: url(../img/slide_01@2x.jpg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 991px) and (min-resolution: 2dppx) {
  header .bg2 {
    background-image: url(../img/slide_02@2x.jpg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 991px) and (min-resolution: 2dppx) {
  header .bg3 {
    background-image: url(../img/slide_03@2x.jpg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 991px) and (min-resolution: 2dppx) {
  header .bg4 {
    background-image: url(../img/slide_04@2x.jpg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 991px) and (min-resolution: 2dppx) {
  header .bg5 {
    background-image: url(../img/slide_05@2x.jpg);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 991px) and (min-resolution: 2dppx) {
  .member .inoue {
    background-image: url(../img/face_inoue@2x.jpg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 991px) and (min-resolution: 2dppx) {
  .member .kuchi {
    background-image: url(../img/face_kuchi@2x.jpg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 991px) and (min-resolution: 2dppx) {
  .member .kiyohara {
    background-image: url(../img/face_kiyohara@2x.jpg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 768px) and (max-width: 991px) and (min-resolution: 2dppx) {
  .member .nakagawa {
    background-image: url(../img/face_nakagawa@2x.jpg);
  }
}

/* PC Medium
-------------------------------------------------- */
@media only screen and (min-width: 992px) {
  header {
    min-height: 640px;
  }
  header .top-slider-title {
    width: 347px;
    height: 294px;
    margin: 0 auto;
  }
  header .more {
    font-size: 1.4em;
    padding: 15px;
  }
  header .more:hover {
    background-color: #FFF;
    color: #000;
    opacity: .5;
  }
  header .bg1 {
    background-image: url(../img/slide_01.jpg);
  }
  header .bg2 {
    background-image: url(../img/slide_02.jpg);
  }
  header .bg3 {
    background-image: url(../img/slide_03.jpg);
  }
  header .bg4 {
    background-image: url(../img/slide_04.jpg);
  }
  header .bg5 {
    background-image: url(../img/slide_05.jpg);
  }
  .main h1 {
    width: 241px;
    height: 169px;
  }

  .member .face {
    width: 200px;
    height: 200px;
    background-color: #CCC;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    margin: 5px auto 25px;
  }
  .member h4 {
    font-weight: bolder;
    margin-bottom: 15px;
  }
  .member .inoue {
    background-image: url(../img/face_inoue.jpg);
  }
  .member .kuchi {
    background-image: url(../img/face_kuchi.jpg);
  }
  .member .kiyohara {
    background-image: url(../img/face_kiyohara.jpg);
  }
  .member .nakagawa {
    background-image: url(../img/face_nakagawa.jpg);
  }
  .contact a {
    text-decoration: underline;
  }

  .google-maps {
    padding-bottom: 30%;
  }

  .map-text {
    text-align: right;
  }

  footer {
    text-align: center;
    margin: 50px auto;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1240px) {
  header .skippr {
    background-size: 1240px 820px;
  }
}
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-resolution: 2dppx) {
  header .bg1 {
    background-image: url(../img/slide_01@2x.jpg);
  }
}
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-resolution: 2dppx) {
  header .bg2 {
    background-image: url(../img/slide_02@2x.jpg);
  }
}
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-resolution: 2dppx) {
  header .bg3 {
    background-image: url(../img/slide_03@2x.jpg);
  }
}
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-resolution: 2dppx) {
  header .bg4 {
    background-image: url(../img/slide_04@2x.jpg);
  }
}
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-resolution: 2dppx) {
  header .bg5 {
    background-image: url(../img/slide_05@2x.jpg);
  }
}

@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-resolution: 2dppx) {
  .member .inoue {
    background-image: url(../img/face_inoue@2x.jpg);
  }
}
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-resolution: 2dppx) {
  .member .kuchi {
    background-image: url(../img/face_kuchi@2x.jpg);
  }
}
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-resolution: 2dppx) {
  .member .kiyohara {
    background-image: url(../img/face_kiyohara@2x.jpg);
  }
}
@media only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 992px) and (min-resolution: 2dppx) {
  .member .nakagawa {
    background-image: url(../img/face_nakagawa@2x.jpg);
  }
}

/* PC Large
-------------------------------------------------- */
@media only screen and (min-width: 1200px) {
  header .more:hover {
    background-color: #FFF;
    color: #000;
    opacity: .5;
  }

  .member .inoue {
    background-image: url(../img/face_inoue.jpg);
  }
  .member .kuchi {
    background-image: url(../img/face_kuchi.jpg);
  }
  .member .kiyohara {
    background-image: url(../img/face_kiyohara.jpg);
  }
  .member .nakagawa {
    background-image: url(../img/face_nakagawa.jpg);
  }
  .contact a {
    text-decoration: underline;
  }

  .google-maps {
    padding-bottom: 30%;
  }

  footer {
    text-align: center;
    margin: 50px auto;
  }
}
@media only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1200px) and (min-resolution: 2dppx) {
  .member .inoue {
    background-image: url(../img/face_inoue@2x.jpg);
  }
}
@media only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1200px) and (min-resolution: 2dppx) {
  .member .kuchi {
    background-image: url(../img/face_kuchi@2x.jpg);
  }
}
@media only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1200px) and (min-resolution: 2dppx) {
  .member .kiyohara {
    background-image: url(../img/face_kiyohara@2x.jpg);
  }
}
@media only screen and (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-width: 1200px) and (min-resolution: 2dppx) {
  .member .nakagawa {
    background-image: url(../img/face_nakagawa@2x.jpg);
  }
}
