@charset "UTF-8";
/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
@import url("https://fonts.googleapis.com/css?family=Raleway");
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

iframe {
  vertical-align: bottom;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button, input, select, textarea {
  margin: 0;
}

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

*:before, *:after {
  box-sizing: inherit;
}

img, embed, object, audio, video {
  border: 0;
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
  text-align: left;
}

.clearfix:after {
  clear: both;
  display: block;
  content: '';
}

main {
  display: block;
}

.fadeIn {
  opacity: 0;
}

.fadeInUp {
  animation-fill-mode: both;
  animation-duration: 1.5s;
  animation-name: fadeInUp;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .anm-img-zoom img {
    transition: .2s;
  }
  .anm-img-zoom:hover img {
    transform: scale(1.1);
    opacity: 1;
  }
}

/*
#overview
【Setting】
*/
/* ----------------------------------------------------
margin
---------------------------------------------------- */
/*
#styleguide
マージン
※それぞれ50まで設定してあります。
※頭文字のmをpに変えるとpaddingになります。
```
<p class="mt00">margin-top:  0px;</p>
<p class="mt05">margin-top:  5px;</p>
<p class="mt20">margin-top:  20px;</p>

<p class="mb00">margin-bottom:  0px;</p>
<p class="mb05">margin-bottom:  5px;</p>
<p class="mb20">margin-bottom:  20px;</p>

<p class="ml00">margin-left:  0px;</p>
<p class="ml05">margin-left:  5px;</p>
<p class="ml20">margin-left:  20px;</p>

<p class="mr00">margin-right:  0px;</p>
<p class="mr05">margin-right:  5px;</p>
<p class="mr20">margin-right:  20px;</p>
```

*/
.mt00 {
  margin-top: 0px !important;
}

.mt05 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mr00 {
  margin-right: 0px !important;
}

.mr05 {
  margin-right: 5px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr35 {
  margin-right: 35px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr45 {
  margin-right: 45px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mb00 {
  margin-bottom: 0px !important;
}

.mb05 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.ml00 {
  margin-left: 0px !important;
}

.ml05 {
  margin-left: 5px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml35 {
  margin-left: 35px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml45 {
  margin-left: 45px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.mt {
  /*
  #styleguide
  マージン（PCのみ）
  ※SP&タブレット時はすべて0になります。
  ※頭文字のmをpに変えるとpaddingになります。
  ```
  <p class="mt-pc-10">margin-top:  10px;</p>
  <p class="mt-pc-20">margin-top:  20px;</p>

  <p class="mb-pc-10">margin-bottom:  10px;</p>
  <p class="mb-pc-20">margin-bottom:  20px;</p>

  <p class="ml-pc-10">margin-left:  10px;</p>
  <p class="ml-pc-20">margin-left:  20px;</p>

  <p class="mr-pc-10">margin-right:  10px;</p>
  <p class="mr-pc-20">margin-right:  20px;</p>

  ```

  */
  /*
  #styleguide
  マージン（SPのみ）
  ※PC時はすべて0になります。
  ※頭文字のmをpに変えるとpaddingになります。
  ```
  <p class="mt-sp-10">margin-top:  10px;</p>
  <p class="mt-sp-20">margin-top:  20px;</p>

  <p class="mb-sp-10">margin-bottom:  10px;</p>
  <p class="mb-sp-20">margin-bottom:  20px;</p>

  <p class="ml-sp-10">margin-left:  10px;</p>
  <p class="ml-sp-20">margin-left:  20px;</p>

  <p class="mr-sp-10">margin-right:  10px;</p>
  <p class="mr-sp-20">margin-right:  20px;</p>

  ```

  */
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .mt-pc-10 {
    margin-top: 10px;
  }
  .mt-pc-15 {
    margin-top: 15px;
  }
  .mt-pc-20 {
    margin-top: 20px;
  }
  .mt-pc-25 {
    margin-top: 25px;
  }
  .mt-pc-30 {
    margin-top: 30px;
  }
  .mt-pc-35 {
    margin-top: 35px;
  }
  .mt-pc-40 {
    margin-top: 40px;
  }
  .mt-pc-45 {
    margin-top: 45px;
  }
  .mt-pc-50 {
    margin-top: 50px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .mt-sp-10 {
    margin-top: 10px;
  }
  .mt-sp-15 {
    margin-top: 15px;
  }
  .mt-sp-20 {
    margin-top: 20px;
  }
  .mt-sp-25 {
    margin-top: 25px;
  }
  .mt-sp-30 {
    margin-top: 30px;
  }
  .mt-sp-35 {
    margin-top: 35px;
  }
  .mt-sp-40 {
    margin-top: 40px;
  }
  .mt-sp-45 {
    margin-top: 45px;
  }
  .mt-sp-50 {
    margin-top: 50px;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .mr-pc-10 {
    margin-right: 10px;
  }
  .mr-pc-15 {
    margin-right: 15px;
  }
  .mr-pc-20 {
    margin-right: 20px;
  }
  .mr-pc-25 {
    margin-right: 25px;
  }
  .mr-pc-30 {
    margin-right: 30px;
  }
  .mr-pc-35 {
    margin-right: 35px;
  }
  .mr-pc-40 {
    margin-right: 40px;
  }
  .mr-pc-45 {
    margin-right: 45px;
  }
  .mr-pc-50 {
    margin-right: 50px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .mr-sp-10 {
    margin-right: 10px;
  }
  .mr-sp-15 {
    margin-right: 15px;
  }
  .mr-sp-20 {
    margin-right: 20px;
  }
  .mr-sp-25 {
    margin-right: 25px;
  }
  .mr-sp-30 {
    margin-right: 30px;
  }
  .mr-sp-35 {
    margin-right: 35px;
  }
  .mr-sp-40 {
    margin-right: 40px;
  }
  .mr-sp-45 {
    margin-right: 45px;
  }
  .mr-sp-50 {
    margin-right: 50px;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .mb-pc-10 {
    margin-bottom: 10px;
  }
  .mb-pc-15 {
    margin-bottom: 15px;
  }
  .mb-pc-20 {
    margin-bottom: 20px;
  }
  .mb-pc-25 {
    margin-bottom: 25px;
  }
  .mb-pc-30 {
    margin-bottom: 30px;
  }
  .mb-pc-35 {
    margin-bottom: 35px;
  }
  .mb-pc-40 {
    margin-bottom: 40px;
  }
  .mb-pc-45 {
    margin-bottom: 45px;
  }
  .mb-pc-50 {
    margin-bottom: 50px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .mb-sp-10 {
    margin-bottom: 10px;
  }
  .mb-sp-15 {
    margin-bottom: 15px;
  }
  .mb-sp-20 {
    margin-bottom: 20px;
  }
  .mb-sp-25 {
    margin-bottom: 25px;
  }
  .mb-sp-30 {
    margin-bottom: 30px;
  }
  .mb-sp-35 {
    margin-bottom: 35px;
  }
  .mb-sp-40 {
    margin-bottom: 40px;
  }
  .mb-sp-45 {
    margin-bottom: 45px;
  }
  .mb-sp-50 {
    margin-bottom: 50px;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .ml-pc-10 {
    margin-left: 10px;
  }
  .ml-pc-15 {
    margin-left: 15px;
  }
  .ml-pc-20 {
    margin-left: 20px;
  }
  .ml-pc-25 {
    margin-left: 25px;
  }
  .ml-pc-30 {
    margin-left: 30px;
  }
  .ml-pc-35 {
    margin-left: 35px;
  }
  .ml-pc-40 {
    margin-left: 40px;
  }
  .ml-pc-45 {
    margin-left: 45px;
  }
  .ml-pc-50 {
    margin-left: 50px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ml-sp-10 {
    margin-left: 10px;
  }
  .ml-sp-15 {
    margin-left: 15px;
  }
  .ml-sp-20 {
    margin-left: 20px;
  }
  .ml-sp-25 {
    margin-left: 25px;
  }
  .ml-sp-30 {
    margin-left: 30px;
  }
  .ml-sp-35 {
    margin-left: 35px;
  }
  .ml-sp-40 {
    margin-left: 40px;
  }
  .ml-sp-45 {
    margin-left: 45px;
  }
  .ml-sp-50 {
    margin-left: 50px;
  }
}

/* ----------------------------------------------------
padding
---------------------------------------------------- */
.pt00 {
  padding-top: 0px !important;
}

.pt05 {
  padding-top: 5px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt15 {
  padding-top: 15px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pt25 {
  padding-top: 25px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pt35 {
  padding-top: 35px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pt45 {
  padding-top: 45px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pr00 {
  padding-right: 0px !important;
}

.pr05 {
  padding-right: 5px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pr15 {
  padding-right: 15px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pr25 {
  padding-right: 25px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.pr35 {
  padding-right: 35px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.pr45 {
  padding-right: 45px !important;
}

.pr50 {
  padding-right: 50px !important;
}

.pb00 {
  padding-bottom: 0px !important;
}

.pb05 {
  padding-bottom: 5px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pb15 {
  padding-bottom: 15px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pb25 {
  padding-bottom: 25px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.pb35 {
  padding-bottom: 35px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pb45 {
  padding-bottom: 45px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.pl00 {
  padding-left: 0px !important;
}

.pl05 {
  padding-left: 5px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pl15 {
  padding-left: 15px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pl25 {
  padding-left: 25px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pl35 {
  padding-left: 35px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pl45 {
  padding-left: 45px !important;
}

.pl50 {
  padding-left: 50px !important;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .pt-pc-10 {
    padding-top: 10px;
  }
  .pt-pc-15 {
    padding-top: 15px;
  }
  .pt-pc-20 {
    padding-top: 20px;
  }
  .pt-pc-25 {
    padding-top: 25px;
  }
  .pt-pc-30 {
    padding-top: 30px;
  }
  .pt-pc-35 {
    padding-top: 35px;
  }
  .pt-pc-40 {
    padding-top: 40px;
  }
  .pt-pc-45 {
    padding-top: 45px;
  }
  .pt-pc-50 {
    padding-top: 50px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .pt-sp-10 {
    padding-top: 10px;
  }
  .pt-sp-15 {
    padding-top: 15px;
  }
  .pt-sp-20 {
    padding-top: 20px;
  }
  .pt-sp-25 {
    padding-top: 25px;
  }
  .pt-sp-30 {
    padding-top: 30px;
  }
  .pt-sp-35 {
    padding-top: 35px;
  }
  .pt-sp-40 {
    padding-top: 40px;
  }
  .pt-sp-45 {
    padding-top: 45px;
  }
  .pt-sp-50 {
    padding-top: 50px;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .pr-pc-10 {
    padding-right: 10px;
  }
  .pr-pc-15 {
    padding-right: 15px;
  }
  .pr-pc-20 {
    padding-right: 20px;
  }
  .pr-pc-25 {
    padding-right: 25px;
  }
  .pr-pc-30 {
    padding-right: 30px;
  }
  .pr-pc-35 {
    padding-right: 35px;
  }
  .pr-pc-40 {
    padding-right: 40px;
  }
  .pr-pc-45 {
    padding-right: 45px;
  }
  .pr-pc-50 {
    padding-right: 50px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .pr-sp-10 {
    padding-right: 10px;
  }
  .pr-sp-15 {
    padding-right: 15px;
  }
  .pr-sp-20 {
    padding-right: 20px;
  }
  .pr-sp-25 {
    padding-right: 25px;
  }
  .pr-sp-30 {
    padding-right: 30px;
  }
  .pr-sp-35 {
    padding-right: 35px;
  }
  .pr-sp-40 {
    padding-right: 40px;
  }
  .pr-sp-45 {
    padding-right: 45px;
  }
  .pr-sp-50 {
    padding-right: 50px;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .pb-pc-10 {
    padding-bottom: 10px;
  }
  .pb-pc-15 {
    padding-bottom: 15px;
  }
  .pb-pc-20 {
    padding-bottom: 20px;
  }
  .pb-pc-25 {
    padding-bottom: 25px;
  }
  .pb-pc-30 {
    padding-bottom: 30px;
  }
  .pb-pc-35 {
    padding-bottom: 35px;
  }
  .pb-pc-40 {
    padding-bottom: 40px;
  }
  .pb-pc-45 {
    padding-bottom: 45px;
  }
  .pb-pc-50 {
    padding-bottom: 50px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .pb-sp-10 {
    padding-bottom: 10px;
  }
  .pb-sp-15 {
    padding-bottom: 15px;
  }
  .pb-sp-20 {
    padding-bottom: 20px;
  }
  .pb-sp-25 {
    padding-bottom: 25px;
  }
  .pb-sp-30 {
    padding-bottom: 30px;
  }
  .pb-sp-35 {
    padding-bottom: 35px;
  }
  .pb-sp-40 {
    padding-bottom: 40px;
  }
  .pb-sp-45 {
    padding-bottom: 45px;
  }
  .pb-sp-50 {
    padding-bottom: 50px;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .pl-pc-10 {
    padding-left: 10px;
  }
  .pl-pc-15 {
    padding-left: 15px;
  }
  .pl-pc-20 {
    padding-left: 20px;
  }
  .pl-pc-25 {
    padding-left: 25px;
  }
  .pl-pc-30 {
    padding-left: 30px;
  }
  .pl-pc-35 {
    padding-left: 35px;
  }
  .pl-pc-40 {
    padding-left: 40px;
  }
  .pl-pc-45 {
    padding-left: 45px;
  }
  .pl-pc-50 {
    padding-left: 50px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .pl-sp-10 {
    padding-left: 10px;
  }
  .pl-sp-15 {
    padding-left: 15px;
  }
  .pl-sp-20 {
    padding-left: 20px;
  }
  .pl-sp-25 {
    padding-left: 25px;
  }
  .pl-sp-30 {
    padding-left: 30px;
  }
  .pl-sp-35 {
    padding-left: 35px;
  }
  .pl-sp-40 {
    padding-left: 40px;
  }
  .pl-sp-45 {
    padding-left: 45px;
  }
  .pl-sp-50 {
    padding-left: 50px;
  }
}

html {
  font-size: 62.5%;
  background: #FFF;
}

body {
  font-size: 1.6rem;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #000;
  line-height: 1.7;
}

@media all and (-ms-high-contrast: none) {
  body {
    font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  body {
    font-size: 1.4rem;
  }
}

img,
svg {
  max-width: 100%;
  vertical-align: bottom;
  backface-visibility: hidden;
}

a {
  text-decoration: none;
}

a:hover img {
  opacity: .6;
}

input:not([type="radio"]),
button,
select,
textarea {
  -webkit-border-radius: 0;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -moz-appearance: none;
  appearance: none;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: block !important;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  #wrapper {
    padding-top: 60px;
  }
}

.inner, .inner--just {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .inner, .inner--just {
    padding: 0 3.125%;
  }
}

.inner--just {
  max-width: 1000px;
  padding: 0;
}

/* .header {
  position: relative;
} */

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .header {
    padding: 10px 0 20px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 9999;
  }
}

.header .inner, .header .inner--just {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .header-logo {
    width: 16.66%;
    max-width: 80px;
  }
}

.header-btn {
  display: inline-block;
  padding: 3px 10px;
  background: #c30e3b;
  color: #FFF;
  font-size: 1.6rem;
}

.nav {
  margin-top: 13px;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .nav {
    display: block !important;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 0;
    background: rgba(0, 0, 0, 0.8);
  }
}

.nav-main {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .nav-main {
    display: block;
  }
}

.nav-main__child {
  position: relative;
  border-left: 2px solid #e69cae;
  line-height: 22px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .nav-main__child {
    line-height: 30px;
    border: 0;
  }
  .nav-main__child + .nav-main__child .nav-main__link {
    border-top: 1px solid #FFF;
  }
}

.nav-main__child:last-child {
  border-right: 2px solid #e69cae;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .nav-main__child:last-child {
    border: 0;
  }
}

.nav-main__child:last-child .nav-lower {
  left: auto;
  right: 0;
}

.nav-main__link {
  padding: 0 15px;
  color: inherit;
  font-size: 1.6rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .nav-main__link {
    display: block;
    padding: 10px 15px;
    color: #FFF;
    font-weight: bold;
  }
}

.nav-lower {
  opacity: 0;
  visibility: hidden;
  transition: .2s;
  z-index: 5000;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .nav-lower {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 230px;
    background: rgba(0, 0, 0, 0.7);
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .nav-lower {
    height: 0;
    border-top: 1px solid #FFF;
  }
}

.nav-lower.open {
  opacity: 1;
  visibility: visible;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .nav-lower.open {
    height: auto;
  }
}

.nav-lower a {
  display: block;
  padding: 10px 5px;
  color: #FFF;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .nav-lower a {
    padding: 5px;
    font-size: 1.3rem;
  }
}

.nav-lower__child {
  padding: 0 15px;
}

.nav-lower__child + .nav-lower__child a {
  border-top: 1px solid #FFF;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .nav-trigger {
    position: relative;
    width: 35px;
    height: 60px;
    cursor: pointer;
  }
  .nav-trigger__bar {
    position: absolute;
    top: 50%;
    left: 0;
    width: 35px;
    height: 1px;
    background: #000;
    transition: .2s;
    content: '';
  }
  .nav-trigger__bar:nth-child(1) {
    transform: translateY(-10px);
  }
  .nav-trigger__bar:nth-child(2) {
    transform: translateY(0);
  }
  .nav-trigger__bar:nth-child(3) {
    transform: translateY(10px);
  }
}

.nav-trigger.open .nav-trigger__bar:nth-child(1) {
  transform: rotate(45deg);
}

.nav-trigger.open .nav-trigger__bar:nth-child(2) {
  visibility: hidden;
  opacity: 0;
}

.nav-trigger.open .nav-trigger__bar:nth-child(3) {
  transform: rotate(-45deg);
}

.footer {
  margin-top: 60px;
  border-top: 2px solid #999;
  padding: 10px 0;
  font-size: 1.1rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .footer {
    border-top: 0;
  }
}

.footer a {
  color: inherit;
}

.footer a:hover {
  text-decoration: underline;
}

.footer .inner, .footer .inner--just {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .footer .inner, .footer .inner--just {
    display: block;
  }
}

.footer-menu {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .footer-menu {
    display: none;
  }
}

.footer-menu-list {
  margin-right: 20px;
}
.footer-menu-list__ttl {
    margin-top: 10px;
}
.footer-menu-list__child--small {
  padding-left: 1em;
}

.footer-ttl {
  margin-bottom: 10px;
  font-weight: bold;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .footer-ttl {
    display: none;
  }
}

.footer-sns {
  flex-basis: 150px;
  text-align: center;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .footer-sns {
    flex-basis: 44.66%;
  }
}

.footer-sns-list {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .footer-sns-list {
    justify-content: center;
  }
}

.footer-sns-list__child {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  flex-basis: 44.66%;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .footer-sns-list__child {
    flex-basis: 19%;
  }
}

.footer-company-info {
  text-align: center;
}

.footer-company-name {
  margin-right: 20px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .footer-company-name {
    display: block;
    margin-right: 0;
    font-size: 1.4rem;
  }
}

.footer-copy-right {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid;
  text-align: center;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("../images/ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 60px;
  width: 60px;
  margin-top: -30px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  padding: 0;
  border: none;
  outline: none;
  z-index: 50;
  transition: .5s;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .slick-prev,
  .slick-next {
    width: 28px;
    height: 28px;
    margin-top: -14px;
  }
}

.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}

.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: 34px;
  border-top: 2px solid #FFF;
  border-left: 2px solid #FFF;
  transform: rotate(-45deg);
  transform-origin: center right;
}

.slick-next {
  right: 34px;
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  transform: rotate(45deg);
  transform-origin: center left;
}

/* Dots */
.slick-dots {
  position: absolute;
  bottom: 70px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  height: 13px;
  width: 13px;
  margin: 0 10px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 13px;
  width: 13px;
  outline: none;
  border: 1px solid #FFF;
  border-radius: 100%;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}

.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
  background: #FFF;
}

.slick-dots li.slick-active button {
  background: #FFF;
}

/* 
 * Boxer v3.3.0 - 2015-04-04 
 * A jQuery plugin for displaying images, videos or content in a modal overlay. Part of the Formstone Library. 
 * http://classic.formstone.it/boxer/ 
 * 
 * Copyright 2015 Ben Plum; MIT Licensed 
 */
.boxer-lock {
  overflow: hidden !important;
}

#boxer-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: #000000;
  opacity: 0;
  -webkit-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}

.boxer-open #boxer-overlay {
  opacity: 0.75;
}

#boxer {
  width: 200px;
  height: 200px;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 9999;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 0 25px #000000;
  opacity: 0;
  margin: 0 auto;
  padding: 10px;
}

#boxer * {
  -webkit-transition: none;
  transition: none;
}

#boxer,
#boxer * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

#boxer,
#boxer *,
#boxer *:before,
#boxer *:after {
  box-sizing: border-box;
}

#boxer.fixed {
  position: fixed;
  top: 0;
  bottom: 0;
  margin: auto;
}

#boxer.inline {
  padding: 30px;
}

#boxer.animating {
  -webkit-transition: height 0.25s ease, width 0.25s ease, opacity 0.25s linear, top 0.25s ease;
  transition: height 0.25s ease, width 0.25s ease, opacity 0.25s linear, top 0.25s ease;
}

#boxer.animating .boxer-container {
  -webkit-transition: opacity 0.25s linear 0.25s;
  transition: opacity 0.25s linear 0.25s;
}

.boxer-open #boxer {
  opacity: 1;
}

#boxer.loading .boxer-container {
  opacity: 0;
  -webkit-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}

#boxer .boxer-close {
  width: 30px;
  height: 30px;
  position: absolute;
  top: -7.5px;
  right: -7.5px;
  z-index: 99999;
  background: #ffffff;
  border-radius: 100%;
  cursor: pointer;
  display: block;
  overflow: hidden;
  padding: 0;
  text-indent: 200%;
  white-space: nowrap;
}

#boxer .boxer-close:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #333333;
  content: "\00d7";
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 30px;
  margin: auto;
  text-align: center;
  text-indent: 0;
  -webkit-transition: color 0.15s linear;
  transition: color 0.15s linear;
}

.no-opacity #boxer .boxer-close {
  text-indent: -999px;
}

#boxer .boxer-loading {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: block;
  margin: auto;
  opacity: 0;
  -webkit-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}

#boxer .boxer-loading:before,
#boxer .boxer-loading:after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 110%;
  content: '';
  display: block;
}

#boxer .boxer-loading:before {
  border: 5px solid rgba(51, 51, 51, 0.25);
}

#boxer .boxer-loading:after {
  -webkit-animation: boxer-loading-spin 0.75s linear infinite;
  animation: boxer-loading-spin 0.75s linear infinite;
  border: 5px solid transparent;
  border-top-color: #333333;
}

#boxer.loading .boxer-loading {
  opacity: 1;
}

@-webkit-keyframes boxer-loading-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes boxer-loading-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#boxer .boxer-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 9999;
  background: #ffffff;
  overflow: hidden;
}

#boxer .boxer-content {
  width: 100%;
  background: #ffffff;
  opacity: 1;
  overflow: hidden;
  padding: 0;
}

#boxer.inline .boxer-content,
#boxer.iframe .boxer-content {
  width: auto;
  height: 100%;
}

#boxer .boxer-image {
  float: left;
}

#boxer .boxer-video {
  width: 100%;
  height: 100%;
}

#boxer .boxer-iframe {
  width: 100%;
  height: 100%;
  border: none;
  float: left;
  overflow: auto;
}

#boxer .boxer-meta {
  clear: both;
}

#boxer .boxer-control {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  background: #ffffff;
  border-radius: 100%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: none;
  margin-right: auto;
  margin-left: auto;
  opacity: 1;
  overflow: hidden;
  text-indent: 200%;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
  white-space: nowrap;
}

#boxer .boxer-control:before {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  margin: auto;
}

#boxer .boxer-control.previous {
  left: 20px;
}

#boxer .boxer-control.previous:before {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10.4px solid #333333;
  margin-left: 14px;
}

#boxer .boxer-control.next {
  right: 20px;
}

#boxer .boxer-control.next:before {
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10.4px solid #333333;
  margin-right: 14px;
}

#boxer .boxer-control.disabled {
  opacity: 0;
}

.no-opacity #boxer .boxer-control {
  text-indent: -999px;
}

.no-touch #boxer .boxer-control {
  opacity: 0;
}

.no-touch #boxer:hover .boxer-control {
  opacity: 1;
}

.no-touch #boxer:hover .boxer-control.disabled {
  opacity: 0;
  cursor: default !important;
}

#boxer .boxer-meta {
  padding: 10px 0 0 0;
}

#boxer .boxer-position {
  color: #999999;
  font-size: 12px;
  margin: 0;
  padding: 15px 15px 0 15px;
}

#boxer .boxer-caption p {
  color: #666666;
  font-size: 14px;
  margin: 0;
  padding: 15px;
}

#boxer .boxer-caption.gallery p {
  padding-top: 0;
}

#boxer .boxer-error {
  width: 250px;
}

#boxer .boxer-error p {
  color: #990000;
  font-size: 14px;
  margin: 0;
  padding: 25px;
  text-align: center;
  text-transform: uppercase;
}

#boxer.mobile {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #111111;
  border-radius: 0;
  padding: 40px 0 0;
}

#boxer.mobile .boxer-close,
#boxer.mobile .boxer-close:hover {
  height: 40px;
  width: 40px;
  top: 0;
  right: 0;
  background: #111111;
  border-radius: 0;
}

#boxer.mobile .boxer-close:before,
#boxer.mobile .boxer-close:hover:before {
  color: #cccccc;
  font-size: 28px;
  font-weight: 700;
  line-height: 40px;
}

#boxer.mobile .boxer-loading:before {
  border-color: rgba(153, 153, 153, 0.25);
}

#boxer.mobile .boxer-loading:after {
  border-top-color: #999999;
}

#boxer.mobile .boxer-container {
  background: #111111;
}

#boxer.mobile .boxer-content {
  background-color: #111111;
}

#boxer.mobile .boxer-control {
  width: 50px;
  height: 100%;
  background: #111111;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
}

#boxer.mobile .boxer-control.previous {
  left: 0;
}

#boxer.mobile .boxer-control.previous:before {
  border-right-color: #eeeeee;
  margin-left: 19px;
}

#boxer.mobile .boxer-control.next {
  right: 0;
}

#boxer.mobile .boxer-control.next:before {
  border-left-color: #eeeeee;
  margin-right: 19px;
}

.no-touch #boxer.mobile .boxer-control,
.no-touch #boxer.mobile:hover .boxer-control {
  opacity: 1;
}

.no-touch #boxer.mobile .boxer-control.disabled,
.no-touch #boxer.mobile:hover .boxer-control.disabled {
  opacity: 0;
  cursor: default !important;
}

#boxer.mobile .boxer-meta {
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #111111;
  padding: 15px 65px;
}

#boxer.mobile .boxer-position {
  color: #999999;
  font-size: 12px;
  margin: 0;
  padding: 0 15px 0 0;
}

#boxer.mobile .boxer-caption p {
  color: #eeeeee;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

#boxer.mobile .boxer-image {
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

#boxer.mobile.animated .boxer-image {
  -webkit-transition: -webkit-transform 0.25s ease-out !important;
  transition: transform 0.25s ease-out !important;
}

#boxer.mobile.inline .boxer-content,
#boxer.mobile.iframe .boxer-content {
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
}

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden;
}

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box;
}

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.mfp-align-top .mfp-container:before {
  display: none;
}

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
}

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto;
}

.mfp-ajax-cur {
  cursor: progress;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.mfp-auto-cursor .mfp-content {
  cursor: auto;
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.mfp-loading.mfp-figure {
  display: none;
}

.mfp-hide {
  display: none !important;
}

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044;
}

.mfp-preloader a {
  color: #CCC;
}

.mfp-preloader a:hover {
  color: #FFF;
}

.mfp-s-ready .mfp-preloader {
  display: none;
}

.mfp-s-error .mfp-content {
  display: none;
}

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}

.mfp-close:hover,
.mfp-close:focus {
  opacity: 1;
}

.mfp-close:active {
  top: 1px;
}

.mfp-close-btn-in .mfp-close {
  color: #333;
}

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%;
}

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent;
}

.mfp-arrow:active {
  margin-top: -54px;
}

.mfp-arrow:hover,
.mfp-arrow:focus {
  opacity: 1;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}

.mfp-arrow:after {
  border-top-width: 13px;
  border-bottom-width: 13px;
  top: 8px;
}

.mfp-arrow:before {
  border-top-width: 21px;
  border-bottom-width: 21px;
  opacity: 0.7;
}

.mfp-arrow-left {
  left: 0;
}

.mfp-arrow-left:after {
  border-right: 17px solid #FFF;
  margin-left: 31px;
}

.mfp-arrow-left:before {
  margin-left: 25px;
  border-right: 27px solid #3F3F3F;
}

.mfp-arrow-right {
  right: 0;
}

.mfp-arrow-right:after {
  border-left: 17px solid #FFF;
  margin-left: 39px;
}

.mfp-arrow-right:before {
  border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px;
}

.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 900px;
}

.mfp-iframe-holder .mfp-close {
  top: -40px;
}

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.mfp-iframe-scaler iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #000;
}

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto;
}

/* The shadow behind the image */
.mfp-figure {
  line-height: 0;
}

.mfp-figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}

.mfp-figure small {
  color: #BDBDBD;
  display: block;
  font-size: 12px;
  line-height: 14px;
}

.mfp-figure figure {
  margin: 0;
}

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto;
}

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px;
}

.mfp-image-holder .mfp-content {
  max-width: 100%;
}

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0;
  }
  .mfp-img-mobile img.mfp-img {
    padding: 0;
  }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0;
  }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px;
  }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box;
  }
  .mfp-img-mobile .mfp-bottom-bar:empty {
    padding: 0;
  }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px;
  }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0;
  }
}

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/*
#overview
【Title】
*/
.ttl-main {
  font-size: 4.2rem;
  font-weight: bold;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-main {
    font-size: 1.6rem;
  }
}

.ttl-main-en {
  display: block;
  max-width: 457px;
  padding-top: 10px;
  border-top: 2px solid #c30e3b;
  font-size: 2.0rem;
  text-align: right;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-main-en {
    font-size: 1.2rem;
  }
}

.ttl-main-wrap {
  padding: 20px 20px 15px;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-main-wrap {
    background-size: cover;
  }
}

.ttl-cmn01 {
  /*
    #styleguide
    見出し1
    ```
    <h1 class="ttl-cmn01">title01</h1>
    ```

    */
  position: relative;
  margin-bottom: 32px;
  padding-bottom: 11px;
  font-size: 2.5rem;
  text-align: center;
  line-height: 1;
}

.ttl-cmn01:after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 182px;
  height: 2px;
  margin-left: -91px;
  background: #c30e3b;
  content: '';
}

.ttl-cmn02 {
  /*
    #styleguide
    見出し2
    ```
    <h1 class="ttl-cmn02">title02<span class="ttl-cmn02__en">テキストテキスト</span></h1>
    ```

    */
  margin-top: 10px;
  padding-left: 30px;
  background: url(../images/bg_ttl_cmn02.png) left top no-repeat;
  font-size: 1.8rem;
  color: #000;
  font-weight: bold;
  line-height: 1.5;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-cmn02 {
    padding-left: 17px;
    background-size: 15px;
    font-size: 1.4rem;
  }
}

.ttl-cmn02__en {
  display: block;
  border-top: 2px solid #d55675;
  font-size: 1.4rem;
  text-align: right;
  font-weight: normal;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-cmn02__en {
    font-size: 1.1rem;
  }
}
.ttl-cmn02--lg {
  position: relative;
  margin-bottom: 20px;
  padding: 5px 0 5px 38px;
  background-image: url(../images/bg_ttl_cmn02--lg.jpg);
  background-position: left bottom;
  font-size: 2.5rem;
}
@media only screen and (min-width: 1px) and (max-width: 640px) {
  .ttl-cmn02--lg {
    padding-left: 30px;
    background-size: 25px;
    font-size: 1.8rem;
  }
}

.ttl-cmn02--lg:before {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 38px);
  height: 5px;
  background: #c30e3b;
  content: '';
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .ttl-cmn02--lg:before {
    width: calc(100% - 30px);
  }
}

.ttl-cmn03 {
  /*
    #styleguide
    見出し3
    ```
    <h1 class="ttl-cmn03">title03</h1>
    ```

    */
  position: relative;
  margin-bottom: 40px;
  padding: 16px 30px;
  background: #ececec;
  font-size: 2.4rem;
  font-weight: bold;
  overflow: hidden;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-cmn03 {
    margin-bottom: 25px;
    padding: 10px 15px;
    font-size: 1.8rem;
  }
}

.ttl-cmn03:after {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 100px;
  background: #c30e3b;
  transform: rotate(-51deg) translate(52px, 18px);
  transform-origin: right;
  content: '';
}

.ttl-cmn04 {
  /*
    #styleguide
    見出し4
    ```
    <h1 class="ttl-cmn03">title04</h1>
    ```

    */
  font-size: 2.2rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-cmn04 {
    font-size: 1.8rem;
  }
}

.ttl-cmn05, .ttl-cmn05--dotted, .ttl-cmn05--black {
  /*
    #styleguide
    見出し5
    ```
    <h1 class="ttl-cmn05">title05</h1>
    <h1 class="ttl-cmn05--dotted">title05 ドット</h1>
    <h1 class="ttl-cmn05--black">title05 黒字</h1>
    ```

    */
  margin-bottom: 20px;
  border-bottom: 2px solid;
  color: #c30e3b;
  font-size: 2.0rem;
  font-weight: bold;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-cmn05, .ttl-cmn05--dotted, .ttl-cmn05--black {
    margin-bottom: 10px;
    font-size: 1.8rem;
  }
}

.ttl-cmn05--dotted {
  border-bottom-style: dotted;
}

.ttl-cmn05--black {
  color: #000;
}

.ttl-cmn05--lg{
  font-size: 2.5rem;
}
@media only screen and (min-width: 1px) and (max-width: 640px) {
  .ttl-cmn05--lg {
    font-size: 1.8rem;
  }
}

.ttl-cmn06 {
  /*
    #styleguide
    見出し6
    ```
    <h1 class="ttl-cmn06"><span class="ttl-cmn06-inner">テキストテキスト</span>title06</h1>
    ```

    */
  padding: 10px 10px 10px 40px;
  background: #ececec;
  font-size: 2.5rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-cmn06 {
    padding: 7px 7px 7px 20px;
    font-size: 1.8rem;
  }
}

.ttl-cmn06-inner {
  display: inline-block;
  margin-right: 10px;
  padding: 0 5px;
  background: #c30e3b;
  color: #FFF;
  font-size: 1.8rem;
  vertical-align: middle;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-cmn06-inner {
    margin-right: 5px;
    font-size: 1.3rem;
  }
}

.ttl-cmn07 {
  /*
    #styleguide
    見出し7
    ```
    <h1 class="ttl-cmn07">
      title07
      <span class="ttl-cmn07-red">テキストテキスト</span>
      <span class="ttl-cmn07-under">テキストテキスト</span>
    </h1>
    ```

    */
  margin-bottom: 15px;
  font-size: 3.5rem;
  line-height: 1.56;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-cmn07 {
    font-size: 2.2rem;
  }
}

.ttl-cmn07-red {
  display: block;
  border-bottom: 2px solid #c30e3b;
  color: #c30e3b;
  font-size: 1.7rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-cmn07-red {
    font-size: 1.5rem;
  }
}

.ttl-cmn07-under {
  display: block;
}

.ttl-cmn08 {
  /*
    #styleguide
    見出し8
    ```
    <h1 class="ttl-cmn08">title08</h1>
    ```

    */
  margin-bottom: 10px;
  padding: 5px;
  border: 2px solid #c30e3b;
  color: #c30e3b;
  font-size: 2.0rem;
  text-align: center;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .ttl-cmn08 {
    font-size: 1.7rem;
  }
}

.ttl-aside {
  padding: 20px 10px;
  color: #c3103d;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}

/*
#overview
【Button】
*/
.btn-cmn01, .btn-cmn01--red {
  /*
    #styleguide
    ボタン1
    ```
    <a href="#" class="btn-cmn01">ボタンその1</a>
    <a href="#" class="btn-cmn01--red ml20">ボタンその1 赤</a>
    ```
    */
  display: inline-block;
  width: 100%;
  max-width: 352px;
  margin-top: 28px;
  padding: 20px 10px;
  border: 2px solid;
  color: inherit;
  font-size: 1.8rem;
  text-align: center;
  transition: .2s;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .btn-cmn01, .btn-cmn01--red {
    max-width: 88%;
  }
}

.btn-cmn01:hover, .btn-cmn01--red:hover {
  color: #FFF;
  background: #000;
  border-color: #000;
}

.btn-cmn01--red {
  color: #d04265;
}

.btn-cmn01--red:hover {
  color: #d04265;
  border-color: #d04265;
}

.btn-cmn01--red:hover:hover {
  color: #FFF;
  background: #d04265;
}

.btn-cmn02, .btn-cmn02--small, .btn-cmn02--txt-link {
  /*
    #styleguide
    ボタン2
    ```
    <a href="#" class="btn-cmn02">ボタンその2</a>
    <a href="#" class="btn-cmn02--small mt20">ボタンその2 小</a>
    <p class="mt20"><a href="#" class="btn-cmn02--txt-link">ボタンその2 テキストリンク風</a></p>
    ```
    */
  position: relative;
  display: block;
  padding: 15px 10px;
  color: #000;
  transition: .2s;
}

.btn-cmn02:after, .btn-cmn02--small:after, .btn-cmn02--txt-link:after {
  position: absolute;
  left: 4px;
  top: 50%;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #c30e3b;
  content: '';
  transition: .2s;
}

.btn-cmn02--small {
  display: inline-block;
  padding: 7px 10px;
  background: #c30e3b;
  color: #FFF;
  vertical-align: bottom;
}

.btn-cmn02--small:after {
  content: none;
}

.btn-cmn02:hover, .btn-cmn02--small:hover, .btn-cmn02--txt-link:hover, .btn-cmn02.active, .active.btn-cmn02--small, .active.btn-cmn02--txt-link {
  background: #c30e3b;
  color: #FFF;
}

.btn-cmn02:hover:after, .btn-cmn02--small:hover:after, .btn-cmn02--txt-link:hover:after, .btn-cmn02.active:after, .active.btn-cmn02--small:after, .active.btn-cmn02--txt-link:after {
  border-left-color: #FFF;
}

.btn-cmn02--txt-link {
  display: inline-block;
  padding: 0 3px 0 10px;
  font-size: 1.3rem;
}

/*
#overview
【List】
*/
.list-cols, .list-cols--pc, .list-cols-wrap, .list-pc-cols {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  font-size: 1.5rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .list-cols, .list-cols--pc, .list-cols-wrap, .list-pc-cols {
    flex-wrap: wrap;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .list-cols--pc {
    display: block;
  }
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .list-cols--sp {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
}

.list-cols-wrap {
  flex-wrap: wrap;
}

.list-cols-center {
  justify-content: center;
}

.list-cols__child {
  margin-right: 100px;
}

.list-cols__cols2 {
  /*
      #styleguide
      2つ並びのリスト
      ```
      <ul class="list-cols">
        <li class="list-cols__cols2">2つ並びのリスト</li>
        <li class="list-cols__cols2">2つ並びのリスト</li>
      </ul>
      ```

      */
  flex-basis: 48.5%;
}

.list-cols__cols2:nth-child(2n) {
  margin-left: 3%;
}

.list-cols__cols2:nth-child(n + 3) {
  margin-top: 30px;
}

img.item2_250422 {
  width: 110px;
}

img.item4_250422 {

}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .list-cols__cols2 + .list-cols__cols2, .list-cols__cols2:nth-child(n + 3) {
    margin-top: 20px;
  }
  .list-cols__cols2:nth-child(2n) {
    margin-left: 0;
  }
}

.list-cols__cols3 {
  /*
      #styleguide
      3つ並びのリスト
      ```
      <ul class="list-cols">
        <li class="list-cols__cols3">3つ並びのリスト</li>
        <li class="list-cols__cols3">3つ並びのリスト</li>
        <li class="list-cols__cols3">3つ並びのリスト</li>
      </ul>
      ```

      */
  flex-basis: 32%;
  margin-right: 2%;
  margin-top: 35px;
  text-align: center;
  font-size: 1.3rem;
}

.list-cols__cols3:nth-child(3n) {
  margin-right: 0;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .list-cols__cols3 {
    margin-right: 0;
  }
}

.list-cols__cols4 {
  /*
      #styleguide
      4つ並びのリスト
      ```
      <ul class="list-cols">
        <li class="list-cols__cols4">4つ並びのリスト</li>
        <li class="list-cols__cols4">4つ並びのリスト</li>
        <li class="list-cols__cols4">4つ並びのリスト</li>
        <li class="list-cols__cols4">4つ並びのリスト</li>
      </ul>
      ```

      */
  flex-basis: 22.2%;
  margin-right: 3.73%;
}

.list-cols__cols4:nth-child(n + 5) {
  margin-top: 38px;
}

.list-cols__cols4:nth-child(4n), .list-cols__cols4:last-child {
  margin-right: 0;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .list-cols__cols4 {
    flex-basis: 48%;
    margin-right: 0;
  }
  .list-cols__cols4:nth-child(2n) {
    margin-left: 4%;
  }
  .list-cols__cols4:nth-child(n + 3), .list-cols__cols4:nth-child(n + 5) {
    margin-top: 20px;
  }
}

.list-cols__cols5 {
  /*
      #styleguide
      5つ並びのリスト
      ```
      <ul class="list-cols">
        <li class="list-cols__cols5">5つ並びのリスト</li>
        <li class="list-cols__cols5">5つ並びのリスト</li>
        <li class="list-cols__cols5">5つ並びのリスト</li>
        <li class="list-cols__cols5">5つ並びのリスト</li>
        <li class="list-cols__cols5">5つ並びのリスト</li>
      </ul>
      ```

      */
  flex-basis: 19%;
  margin-right: 1.25%;
  text-align: center;
  font-size: 1.3rem;
}

.list-cols__cols5:nth-child(5n) {
  margin-right: 0;
}

.list-cols__cols5:nth-child(n + 6) {
  margin-top: 25px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .list-cols__cols5 {
    flex-basis: 32%;
    margin-right: 2%;
  }
  .list-cols__cols5:nth-child(5n) {
    margin-right: 2%;
  }
  .list-cols__cols5:nth-child(3n) {
    margin-right: 0;
  }
  .list-cols__cols5:nth-child(n + 4) {
    margin-top: 10px;
  }
}

.list-pc-cols {
  /*
    #styleguide
    横並び(PCのみ、SP時は縦並び)
    ```
    <div class="list-pc-cols">
      <div>横並び(PCのみ、SP時は縦並び)</div>
      <div>横並び(PCのみ、SP時は縦並び)</div>
      <div>横並び(PCのみ、SP時は縦並び)</div>
      <div>横並び(PCのみ、SP時は縦並び)</div>
      <div>横並び(PCのみ、SP時は縦並び)</div>
    </div>
    ```

    */
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .list-pc-cols {
    display: block;
  }
}

.list-number {
  /*
    #styleguide
    番号付きリスト
    ```
    <ol class="list-number">
      <li>番号付きリスト</li>
      <li>番号付きリスト</li>
      <li>番号付きリスト</li>
      <li>番号付きリスト</li>
      <li>番号付きリスト</li>
    </ol>
    ```

    */
  padding-left: 1.5rem;
}

.list-style__none {
  list-style-type: none;
}

.list-news {
  /*
    #styleguide
    ニュースリスト
    ```
    <dl class="list-news">
      <dt class="list-news__date">2017.XX.XX<span class="list-news-category">カテゴリー</span></dt>
      <dd class="list-news__ttl"><a href="" class="txt-link">ニュースタイトル</a></dd>
    </dl>
    <dl class="list-news">
      <dt class="list-news__date">2017.XX.XX<span class="list-news-category">カテゴリー</span></dt>
      <dd class="list-news__ttl"><a href="" class="txt-link">ニュースタイトル</a></dd>
    </dl>
    ```

    */
  font-size: 1.6rem;
}

.list-news-category {
  display: inline-block;
  width: 82px;
  margin-left: 10px;
  background: #000;
  color: #FFF;
  font-size: 1.2rem;
  line-height: 19px;
  text-align: center;
  vertical-align: middle;
}

.list-news__ttl {
  margin-top: 10px;
  word-wrap: break-word;
}

.list-news + .list-news {
  margin-top: 40px;
}

.list-aside {
  background: #ececec;
  font-size: 1.3rem;
}

.list-aside--sm {
  font-size: 1.2rem;
}

.list-aside__child {
  border-top: 1px solid #de7d96;
}

.list-btn {
  /*
    #styleguide
    ボタンリスト
    ```
    <ul class="list-btn">
      <li class="list-btn__child"><a href="" class="list-btn__link">ボタンリスト-リンク</a></li>
      <li class="list-btn__child"><a href="" class="list-btn__link">ボタンリスト-リンク</a></li>
      <li class="list-btn__child"><a href="" class="list-btn__link">ボタンチスト-リンク</a></li>
    </ul>
    ```

    */
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  font-size: 1.2rem;
}

.list-btn__child {
  margin-top: 10px;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .list-btn__child {
    width: 32.5%;
  }
  .list-btn__child:not(:nth-child(3n)) {
    margin-right: 1.25%;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .list-btn__child {
    width: 49%;
  }
  .list-btn__child:not(:nth-child(2n)) {
    margin-right: 2%;
  }
}

/*
.list-btn__link {
  display: -ms-grid;
  display: grid;
  border: 2px solid #e4b0bd;
  color: inherit;
  transition: .3s;
}

.list-btn__link.active, .list-btn__link:hover {
  background: #c30e3b;
  border-color: #c30e3b;
  color: #FFF;
}

.list-btn__link.active .font-red, .list-btn__link:hover .font-red {
  color: #FFF;
}
*/

.list-cmn01 {
  /*
    #styleguide
    汎用リスト
    ```
    <ul class="list-cmn01">
      <li class="list-cmn01__child">汎用リスト</li>
      <li class="list-cmn01__child">汎用リスト</li>
      <li class="list-cmn01__child">汎用リスト</li>
    </ul>

    
    ```

    */
  /*
    #styleguide
    ニュース一覧
    ```
    <div class="inner">
      <ul class="list-cmn01">
        <li class="list-cmn01__child">
          <a href="" class="table-layout txt-link">
            <div class="table-layout__child list-cmn01__thumb"><img src="/project/img/img_program_01.jpg" alt=""></div>
            <div class="table-layout__child list-cmn01__txt">
              <p><small>2017年XX月XX日</small></p>
              <p class="list-cmn01__ttl">ニュースタイトルニュースタイトルニュースタイトル</p>
            </div>
          </a>
        </li>
        <li class="list-cmn01__child">
          <a href="" class="txt-link">
            <div class="list-cmn01__txt">
              <p><small>2017年XX月XX日</small></p>
              <p class="list-cmn01__ttl">画像無しパターン</p>
            </div>
          </a>
        </li>
      </ul>
    </div>
    
    ```

    */
  margin-top: 30px;
  border-top: 1px dashed #1e1e1e;
}

.list-cmn01__child {
  border-bottom: 1px dashed #1e1e1e;
  padding: 30px 0;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .list-cmn01__child {
    padding: 20px 0;
  }
}

.list-cmn01__thumb {
  width: 231px;
  padding-right: 20px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .list-cmn01__thumb {
    width: 120px;
    padding-right: 10px;
  }
}

.list-cmn01__ttl {
  font-size: 2.0rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .list-cmn01__ttl {
    font-size: 1.4rem;
  }
}

.list-pager {
  /*
    #styleguide
    ページャー
    ```
    <div class="list-pager">
      <a href="" class="list-pager-btn">ページャー</a>
      <a href="" class="list-pager-btn">ページャー</a>
      <a href="" class="list-pager-btn current">ページャー</a>
    </div>
    ```

    */
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.list-pager-btn {
  text-decoration: none;
  color: inherit;
  margin: 10px 5px 0 0;
  padding: 5px 10px;
  border: 1px solid #DDD;
  line-height: 1;
}

.list-pager-btn:hover {
  text-decoration: underline;
}

.list-pager-btn.current, .list-pager-btn:hover {
  background: #c30e3b;
  color: #FFF;
  text-decoration: none;
}

.list-pager-btn:last-child {
  margin-right: 0;
}

.bread-crumb {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-wrap: wrap;
  margin: 15px auto 10px;
  font-size: 1.3rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .bread-crumb {
    font-size: 1.2rem;
  }
}

.bread-crumb li + li:before {
  margin: 0 10px;
  content: '＞';
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .bread-crumb li + li:before {
    margin: 0 5px;
  }
}

.table-cmn01 {
  /*
    #styleguide
    汎用テーブル1
    ```
    <table class="table-cmn01">
      <tr>
        <th>テキスト</th>
        <td>テキストテキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキストテキスト</td>
      </tr>
    </table>
    ```

    */
  width: 100%;
  font-size: 1.5rem;
}

.table-cmn01 th,
.table-cmn01 td {
  padding: 20px;
  vertical-align: top;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .table-cmn01 th,
  .table-cmn01 td {
    display: block;
    width: 100%;
    padding: 5px 10px;
  }
}

.table-cmn01 th {
  width: 160px;
  padding-left: 40px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .table-cmn01 th {
    padding-left: 10px;
    padding-bottom: 0;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .table-cmn01 td {
    font-size: 1.4rem;
  }
}

.table-cmn02 {
  /*
    #styleguide
    汎用テーブル2
    テーブル1とあまり変わりませんが、念のため入れておきます
    ```
    <table class="table-cmn02">
      <tr>
        <th>テキスト</th>
        <td>テキストテキストテキスト</td>
      </tr>
      <tr>
        <th>テキスト</th>
        <td>テキストテキストテキスト</td>
      </tr>
    </table>
    ```

    */
  width: 100%;
  font-size: 1.6rem;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .table-cmn02 th,
  .table-cmn02 td {
    padding: 20px 0;
    vertical-align: top;
  }
  .table-cmn02 th {
    width: 120px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .table-cmn02 th,
  .table-cmn02 td {
    display: block;
    width: 100%;
  }
  .table-cmn02 tr + tr th {
    padding-top: 20px;
  }
}

.table-layout {
  display: table;
  width: 100%;
}

.table-layout__child {
  display: table-cell;
  vertical-align: top;
}

.table-layout__child-txt {
  padding-left: 30px;
}

/*
#overview
【Block】
*/
.bg-gray {
  /*
    #styleguide
    グレー背景

    ```
    <div class="bg-gray">
      <div class="bg-gray__inner">
        テキストテキストテキスト
      </div>
    </div>
    ```

    */
  background: #ececec;
}

.bg-gray__inner {
  padding: 15px 10px;
}

.bg-light-gray {
  background: #f4f5f5;
}

.section-cmn {
  /*
    #styleguide
    共通セクション
    ※わかりやすく背景をグレーにしています
    ```
    <section class="section-cmn">
      <div class="bg-gray">
        <div class="bg-gray__inner">
        テキストテキストテキスト
        </div>
      </div>
    </section>
    <section class="section-cmn">
      <div class="bg-gray">
        <div class="bg-gray__inner">
        テキストテキストテキスト
        </div>
      </div>
    </section>
    ```

    */
  padding: 30px 0 40px;
}

.section-inner {
  width: 90%;
  margin: 30px auto 0;
}

.block-twin-column {
  /*
    #styleguide
    2カラムレイアウト

    ```
    <div class="inner">
      <div class="block-twin-column">
        <main class="block-main-content">
          <h1 class="ttl-cmn03">メインコンテンツ</h1>
          <p>テキストテキストテキスト</p>
        </main>
        <aside class="block-aside">
          <p class="ttl-aside">サイドバーのタイトル</p>
          <ul class="list-aside">
          <li class="list-aside__child"><a href="#" class="btn-cmn02 active">メニュー active</a></li>
          <li class="list-aside__child"><a href="#" class="btn-cmn02">メニュー</a></li>
          <li class="list-aside__child"><a href="#" class="btn-cmn02">メニュー</a></li>
          <li class="list-aside__child"><a href="#" class="btn-cmn02">メニュー</a></li>
          </ul>
        </aside>
      </div>
    </div>
    ```

    */
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .block-twin-column {
    display: block;
  }
}

.block-twin-column--order0 {
  order: 0;
}

.block-twin-column--order1 {
  order: 1;
}

.block-half {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .block-half {
    display: block;
  }
}

.block-half__child {
  flex-basis: 48%;
}

.block-half__child--order0 {
  order: 0;
}

.block-half__child--order1 {
  order: 1;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .block-main-content {
    flex-basis: 77%;
  }
}

.block-aside {
  flex-basis: 18%;
  border: 1px solid #de7d96;
}
.block-aside--lg {
  flex-basis: 20%;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .block-aside {
    display: none;
  }
}

.block-txt {
  /*
    #styleguide
    汎用DL
    事業案内など、テキストベースのページなどで使用
    ※dlタグ以外でも使用可能
    ```
    <dl class="block-txt">
      <dt class="block-txt__ttl">タイトル</dt>
      <dd class="block-txt__txt">テキストテキスト</dd>
    </dl>
    <dl class="block-txt">
      <dt class="block-txt__ttl">タイトル</dt>
      <dd class="block-txt__txt">テキストテキスト</dd>
    </dl>
    ```

    */
}

.block-txt + .block-txt {
  margin-top: 40px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .block-txt + .block-txt {
    margin-top: 25px;
  }
}

.block-txt__ttl {
  font-size: 2.0rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .block-txt__ttl {
    font-size: 1.8rem;
  }
}

.block-txt__txt {
  font-size: 1.6rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .block-txt__txt {
    font-size: 1.4rem;
  }
}

.block-red {
  /*
    #styleguide
    ブロック（ボーダー赤）
    ```
    <div class="block-red">
      <p>テキストテキスト</p>
    </div>
    ```

    */
  padding: 50px 40px;
  border: 2px solid #d24a6b;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .block-red {
    padding: 25px 20px;
  }
}

.video {
  /*
  #styleguide
  動画埋め込み（レスポンシブ)
  ```
  <div class="video-wrap">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/UiokQK0uF9U" frameborder="0" class="video-screen" allowfullscreen></iframe>
  </div>
  ```

  */
}

.video-wrap {
  position: relative;
  width: 100%;
  max-width: 685px;
  height: 478px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .video-wrap {
    max-width: 560px;
    height: 315px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .video-wrap {
    max-width: 300px;
    height: 170px;
  }
}

.video-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*
#overview
【Other】
*/
.ico {
  /*
  #styleguide
  矢印アイコン
  ```
  <p><a href="#" class="ico-arrow--right txt-link">矢印</a></p>
  <p class="mt10"><a href="#" class="ico-arrow-red txt-link">矢印</a></p>
  ```

  */
}

.ico-arrow--right {
  position: relative;
  padding-right: 15px;
}

.ico-arrow--right:after {
  position: absolute;
  right: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(45deg);
  content: '';
}

.ico-arrow-red {
  position: relative;
  padding-left: 15px;
}

.ico-arrow-red:after {
  position: absolute;
  left: 0;
  top: 50%;
  border-left: 11px solid #c30e3b;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  content: '';
  margin-top: -8px;
}

.font {
  /*
  #styleguide
  フォントパーツ
  ```
  <p class="font-sawarabi">WEBフォント　さわらび明朝</p>
  <p class="font-raleway">WEB font　Raleway</p>
  <p class="font-red">赤字</p>
  <p class="font-bold">太字</p>
  <p class="font-black">黒字（デフォルト）</p>
  <p class="font-ex-sm">フォントサイズ　極小</p>
  <p class="font-sm">フォントサイズ　小</p>
  <p class="font-normal">フォントサイズ　デフォルト</p>
  <p class="font-mid">フォントサイズ　やや大</p>
  <p class="font-big">フォントサイズ　大</p>
  <p class="font-ex-big">フォントサイズ　極大</p>
  ```

  */
}

.font-sawarabi {
  font-family: "Sawarabi Mincho";
}

.font-raleway {
  font-family: 'Raleway', sans-serif;
}

.font-red {
  color: #c30e3b;
}

.font-bold {
  font-weight: bold;
}

.font-black {
  color: #333;
}

.font-ex-sm {
  font-size: 1.0rem;
}

.font-sm {
  font-size: 1.2rem;
}

.font-normal {
  font-size: 1.4rem;
}

.font-mid {
  font-size: 1.6rem;
}

.font-big {
  font-size: 2.0rem;
}

.font-ex-big {
  font-size: 5.0rem;
}

.txt {
  /*
  #styleguide
  テキストパーツ
  ```
  <p class="txt-attention">注釈</p>
  <ul class="mb20">
    <li class="txt-attention">注釈リスト使用例</li>
    <li class="txt-attention">注釈リスト使用例</li>
    <li class="txt-attention">注釈リスト使用例</li>
  </ul>
  <p class="txt-disc">中黒</p>
  <p class="txt-underline">下線つき</p>
  <a href="#" class="txt-link">通常テキストリンク</a>
  ```

  */
}

.txt-attention {
  position: relative;
  padding-left: 1.5rem;
}

.txt-attention:before {
  position: absolute;
  left: 0;
  top: 0;
}

.txt-attention:before {
  content: '※';
}

.txt-disc {
  position: relative;
  padding-left: 1.5rem;
}

.txt-disc:before {
  position: absolute;
  left: 0;
  top: 0;
}

.txt-disc:before {
  content: '・';
}

.txt-underline {
  text-decoration: underline;
}

.txt-link, .bread-crumb a {
  text-decoration: none;
  color: inherit;
}

.txt-link:hover, .bread-crumb a:hover {
  text-decoration: underline;
}

.float {
  /*
  #styleguide
  Float
  ※PCのみ
  ```
  <div class="clearfix">
    <p class="bg-gray float-left">
      <span class="bg-gray__inner">float-left</span>
    <p>
    <p class="bg-gray float-right">
      <span class="bg-gray__inner">float-right</span>
    <p>
  </div>
  ```

  */
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .float-left {
    float: left;
  }
  .float-right {
    float: right;
  }
}

.valign-top {
  vertical-align: top;
}

.valign-middle {
  vertical-align: middle;
}

.valign-bottom {
  vertical-align: bottom;
}

.border {
  /*
  #styleguide
  borderつきの箱
  
  ```
  <div class="border">テキストテキストテキストテキストテキスト</div>
  <p class="border-bottom mt10">下線のみ</p>
  ```

  */
  padding: 0 5px;
  border: 1px solid #7f7f7f;
}

.border-bottom {
  border-bottom: 1px solid #7f7f7f;
}

.align {
  /*
  #styleguide
  text-align
  ```
  <p class="align-left">左寄せ</p>
  <p class="align-center">中央寄せ</p>
  <p class="align-right">右寄せ</p>
  ```

  */
}

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

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

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

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.top-other-inner {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .top-other-inner {
    display: block;
  }
}

.top-news {
  flex-basis: 48.5%;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .top-news {
    margin-bottom: 12%;
  }
}

.about .ttl-main-wrap {
  background-image: url(../images/bg_main_company.png);
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .about-message-txt {
    flex-basis: 74%;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .about-message-profile {
    flex-basis: 26%;
  }
}

.about-message-profile__ttl {
  margin-top: 10px;
  border-bottom: 2px solid;
}

.about-message-profile__ttl span {
  font-size: 1.8rem;
}

.about-message-profile__txt {
  margin-top: 10px;
  font-size: 1.3rem;
}

.about-vision .section-cmn {
  font-size: 1.6rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .about-vision .section-cmn {
    font-size: 1.5rem;
  }
}

.about-vision__txt--middle {
  font-size: 2.0rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .about-vision__txt--middle {
    font-size: 1.7rem;
  }
}

.about-vision__txt--big {
  font-size: 3.0rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .about-vision__txt--big {
    font-size: 2.2rem;
  }
}

.about-guide-detail__txt {
  flex-basis: 70%;
  padding-right: 40px;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .about-guide-detail__txt {
    flex-basis: 100%;
    padding-right: 0;
  }
}

.about-guide-detail__img {
  flex-basis: 30%;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .about-guide-detail__img {
    flex-basis: 100%;
  }
}

.brand .ttl-main-wrap {
  background-image: url(../images/bg_main_brand.png);
}

.brand-concept .section-cmn {
  font-size: 1.6rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .brand-concept .section-cmn {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .brand-concept-intro__txt {
    flex-basis: 64%;
    padding-right: 40px;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .brand-concept-intro__img {
    flex-basis: 36%;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .brand-concept-intro__img {
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }
}

.brand-flow-detail {
  display: table;
  width: 100%;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .brand-flow-detail {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
}

.brand-flow-detail__img {
  display: table-cell;
  width: 112px;
  vertical-align: middle;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .brand-flow-detail__img {
    width: 30%;
    order: 0;
  }
}

.brand-flow-detail__txt {
  display: table-cell;
  padding: 0 15px 0 20px;
  vertical-align: top;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .brand-flow-detail__txt {
    width: 100%;
    margin-top: 20px;
    font-size: 1.4rem;
    order: 2;
  }
}

.brand-flow-detail__photo {
  display: table-cell;
  width: 176px;
  vertical-align: top;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .brand-flow-detail__photo {
    display: block;
    margin-left: 20px;
    width: auto;
    text-align: center;
    order: 1;
  }
}

.brand-flow-interview__photo {
  width: 260px;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .brand-flow-interview__photo {
    margin-bottom: 20px;
    text-align: center;
  }
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .brand-flow-interview .table-layout__child {
    display: block;
    width: 100%;
  }
}

.brand-flow-interview__ttl01 {
  padding: 25px;
  border: 1px solid #2d2d2d;
  font-size: 2.4rem;
  text-align: center;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .brand-flow-interview__ttl01 {
    padding: 15px;
    font-size: 1.7rem;
  }
}

.brand-flow-interview__ttl02 {
  margin-top: 10px;
  font-size: 3.5rem;
  line-height: 1.5;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .brand-flow-interview__ttl02 {
    font-size: 2.4rem;
  }
}

.project .ttl-main-wrap {
  background-image: url(../images/bg_main_project.jpg);
}

.project-concierge-intro {
  justify-content: space-between;
  font-size: 1.6rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .project-concierge-intro__img {
    width: 100%;
    text-align: center;
  }
}

.project-partner-col {
  flex-basis: 49%;
}

.project-partner-movie__ttl {
  border: 2px solid;
  color: #c30e3b;
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
}

.project-partner-movie__ttl img {
  vertical-align: middle;
  margin-left: 5px;
}

.project-partner-movie__wrap {
  position: relative;
  display: block;
  margin-top: 10px;
  background: #d9dada;
}

.project-partner-movie__wrap:hover .project-partner-movie__ico {
  background: #d31b18;
}

.project-partner-movie__ico {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38px;
  height: 38px;
  background: #b2b2b3;
}

.project-partner-movie__ico:after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 14px solid #FFF;
  content: '';
  transform: translate(-50%, -50%);
}

.project-partner__thumb-number {
  width: 40px;
  padding-right: 10px;
}

/* .project-program__thumb {
  width: 231px;
  padding-right: 20px;
} */

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .project-program__thumb {
    width: 120px;
    padding-right: 10px;
  }
}

.project-program__ttl {
  font-size: 2.0rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .project-program__ttl {
    font-size: 1.4rem;
  }
}

.products .ttl-main-wrap {
  background-image: url(../images/bg_main_products.jpg);
}

.products-reason__ttl, .products-reason__ttl--valign {
  font-size: 2.0rem;
}

.products-reason__ttl--valign {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4em;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .products-reason__ttl--valign {
    display: block;
    min-height: auto;
  }
}

.products-intro-logo {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 84px;
}

.products-ttl {
  padding: 15px 10px 10px;
  border-bottom: 1px dotted #1d1d1d;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .products-ttl {
    display: table;
    width: 100%;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .products-ttl__logo, .products-ttl__brand {
    display: table-cell;
    vertical-align: middle;
  }
}

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

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .products-ttl__logo {
    width: 177px;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .products-ttl__brand {
    padding-left: 15px;
  }
}

.products-ttl__brand-name {
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .products-ttl__brand-name {
    float: left;
  }
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .products-ttl__brand-name {
    margin: 10px 0;
    font-size: 1.8rem;
    text-align: center;
  }
}

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

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .products-ttl__material {
    float: right;
  }
}

.products-ttl__material-name {
  display: inline-block;
  width: 177px;
  background: #727171;
  color: #FFF;
  text-align: center;
  letter-spacing: -1px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .products-ttl__material-name {
    width: 140px;
    font-size: 1.3rem;
  }
}

.products-ttl__txt {
  margin-top: 5px;
  font-size: 1.4rem;
}

.products-info-cmn, .products-info-cmn--white {
  font-size: 1.5rem;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .products-info-cmn, .products-info-cmn--white {
    font-size: 1.3rem;
  }
}

.products-info-cmn--white {
  padding: 10px;
  background: #FFF;
}

.products-info-cmn__type {
  width: 177px;
  border: 1px solid #7d7e7e;
  font-size: 1.6rem;
  text-align: center;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .products-info-cmn__type {
    width: 150px;
    font-size: 1.4rem;
  }
}

.products-info-cmn__type + .products-info-cmn__type {
  margin-top: 8px;
}

@media only screen and (min-width: 1px) and (max-width: 768px) {
  .products-info-cmn__type + .products-info-cmn__type {
    margin-top: 5px;
  }
}

.products-logo-list {
  display: table;
  width: 100%;
  font-size: 1.3rem;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .products-logo-list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
  }
}

.products-logo-list__child {
  display: table-cell;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .products-logo-list__child {
    flex-basis: 50%;
  }
}

.news .ttl-main-wrap {
  background-image: url(../images/bg_main_news.png);
}

.houjin .ttl-main-wrap {
  background-image: url(../images/bg_main_houjin.jpg);
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin footer {
    margin-top: 10px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-fz--lg {
    font-size: 1.5rem;
  }
}

.houjin-section {
  margin-top: 80px;
}

.houjin-section + .houjin-section {
  margin-top: 70px;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .houjin-support {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .houjin-support__img {
    flex-basis: 48.05%;
    max-width: 48.05%;
    order: 1;
  }
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-support__img {
    margin-top: 20px;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .houjin-support__txt {
    flex-basis: 51.95%;
    max-width: 51.95%;
    padding-left: 30px;
    order: 2;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .houjin-support__txt {
    margin-top: -9px;
  }
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-support__txt {
    font-size: 1.5rem;
  }
}

.houjin-support__txt .ttl-cmn05, .houjin-support__txt .ttl-cmn05--dotted, .houjin-support__txt .ttl-cmn05--black, .houjin-support__txt .ttl-cmn05--mix {
  margin-bottom: 20px;
}

.houjin-support-ttl {
  font-size: 3.0rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.93;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-support-ttl {
    font-size: 2.0rem;
  }
}

.houjin-support-ttl__inner {
  display: inline-block;
  padding: 0 15px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

.houjin-section .houjin-contact {
  font-size: 1.8rem;
  text-align: center;
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .houjin-contact a[href^="tel:"] {
    pointer-events: none;
  }
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-contact {
    font-size: 1.5rem;
  }
}

.houjin-contact__ttl {
  margin-bottom: 10px;
  color: #c30e3b;
  font-size: 2.5rem;
  font-weight: bold;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-contact__ttl {
    font-size: 2.0rem;
  }
}

.houjin-contact__ttl--lg {
  margin: 30px 0 40px;
  color: #c30e3b;
  font-weight: bold;
  font-size: 2.5rem;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-contact__ttl--lg {
    font-size: 1.8rem;
  }
}

.houjin-contact__btn {
  margin-bottom: 10px;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-contact__btn .btn-large {
    font-size: 1.8rem;
  }
}

.houjin-contact__txt {
  margin: 40px 0 -5px;
  color: #c30e3b;
  text-align: center;
  font-weight: bold;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-contact__txt {
    margin: 20px 0 0;
    font-size: 1.5rem;
  }
}

.houjin-contact__tel {
  color: #000;
  font-size: 4.0rem;
  font-weight: bold;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-contact__tel {
    font-size: 2.4rem;
  }
}

.houjin-contact__ico {
  vertical-align: middle;
}

.houjin-works {
  margin-top: 40px;
}

.houjin-works + .houjin-works {
  padding-top: 50px;
  border-top: 1px dashed #CCC;
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-works-detail__txt {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .houjin-works-detail {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .houjin-works-detail__img {
    flex-basis: 48.05%;
    max-width: 48.05%;
    order: 1;
  }
}

@media only screen and (min-width: 1px) and (max-width: 640px) {
  .houjin-works-detail__img {
    margin-top: 20px;
  }
}

@media only screen and (min-width: 1px) and (min-width: 769px) {
  .houjin-works-detail__txt {
    flex-basis: 51.95%;
    max-width: 51.95%;
    padding-left: 30px;
    order: 2;
  }
}
/*# sourceMappingURL=style.css.map */