/*
Theme Name: 建築の西山
Theme URI: https://kenchikunonishiyama.com
Description: 建築の西山
Version: 1.0
Author: BONDMAN DESIGN
Author URL: http://bondman.jp
*/


@charset "UTF-8";
/* Scss Document */
body {
  font-family: '游ゴシック',YuGothic,'Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
  font-size: 0.95rem;
  font-weight: 100; }

.wrap {
  overflow: hidden; }

h1 {
  font-size: 1.8em;
  letter-spacing: 0.1em;
  line-height: 1.8em;
  font-weight: 600; }
  @media (max-width: 480px) {
    h1 {
      font-size: 1.5em;
      letter-spacing: 0.05em; } }

h2 {
  font-size: 1.5em;
  letter-spacing: 0.1em;
  line-height: 1.8em;
  font-weight: 600; }
  @media (max-width: 480px) {
    h2 {
      letter-spacing: 0.05em; } }

.admi {
  font-family: 'Libre Baskerville', serif;
  font-size: 2.5em;
  font-weight: normal; }

.admi01 {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.5em;
  font-weight: 400;
  letter-spacing: 0.1em;
  width: 600px; }

.admi02 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.4em;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.8em; }
  @media (max-width: 480px) {
    .admi02 {
      line-height: 1.4em; } }

.admi03 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.8em;
  font-weight: 400;
  letter-spacing: 0.1em; }

h3 {
  font-size: 1.15em;
  line-height: 1.8em;
  font-weight: 600; }
  @media (max-width: 480px) {
    h3 {
      font-size: 1.1em; } }

p {
  letter-spacing: 0;
  line-height: 2em;
  font-size: 1em;
  font-weight: 400;
  line-height: 35px;
  color: #323232; }

@media screen and (max-width: 640px) {
  .br-sp {
    display: none; } }
.komoji {
  font-family: futura-pt, sans-serif;
  font-size: 0.8em;
  letter-spacing: 0.1em;
  font-weight: 400;
  line-height: 25px; }

.komoji2 {
  font-size: 0.8em;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding-top: -50px; }

.komoji3 {
  font-size: 0.8em;
  letter-spacing: 0.01em;
  font-weight: 400;
  margin-top: -20px;
  padding-left: 3px; }

a {
  color: #333; }
  a:hover {
    color: #333; }
  a:active {
    color: #ccc; }

/*
**  margin class
*/
.mmt-50 {
  margin-top: -0.5em; }

.mmt-100 {
  margin-top: -1.0em; }

.mt-13 {
  margin-top: 13em; }

.mt-10 {
  margin-top: 10em; }

.mt-7 {
  margin-top: 7em; }

.mr-1600 {
  margin-right: 16em; }

.ml-1600 {
  margin-left: 16em; }

.m-600 {
  margin: 6em; }

.mtb-600, .mt-600 {
  margin-top: 6em; }
  @media (max-width: 480px) {
    .mtb-600, .mt-600 {
      margin-top: 2em; } }

.mmt-700 {
  margin-top: -7em; }

.mmt-600 {
  margin-top: -6em; }

.mrl-600, .mr-600 {
  margin-right: 6em; }

.mtb-600, .mb-600 {
  margin-bottom: 6em; }

.mrl-600, .ml-600 {
  margin-left: 6em; }

.m-550 {
  margin: 5.5em; }

.mtb-550, .mt-550 {
  margin-top: 5.5em; }

.mrl-550, .mr-550 {
  margin-right: 5.5em; }

.mtb-550, .mb-550 {
  margin-bottom: 5.5em; }

.mrl-550, .ml-550 {
  margin-left: 5.5em; }

.m-500 {
  margin: 5em; }

.mtb-500, .mt-500 {
  margin-top: 5em; }

.mrl-500, .mr-500 {
  margin-right: 5em; }

.mtb-500, .mb-500 {
  margin-bottom: 5em; }

.mrl-500, .ml-500 {
  margin-left: 5em; }

.m-450 {
  margin: 4.5em; }

.mtb-450, .mt-450 {
  margin-top: 4.5em; }

.mrl-450, .mr-450 {
  margin-right: 4.5em; }

.mtb-450, .mb-450 {
  margin-bottom: 4.5em; }

.mrl-450, .ml-450 {
  margin-left: 4.5em; }

.m-400 {
  margin: 4em; }

.mtb-400, .mt-400 {
  margin-top: 4em; }

.mrl-400, .mr-400 {
  margin-right: 4em; }

.mtb-400, .mb-400 {
  margin-bottom: 4em; }
  @media (max-width: 480px) {
    .mtb-400, .mb-400 {
      margin-bottom: 2em; } }

.mrl-400, .ml-400 {
  margin-left: 4em; }

.m-350 {
  margin: 3.5em; }

.mtb-350, .mt-350 {
  margin-top: 3.5em; }

.mrl-350, .mr-350 {
  margin-right: 3.5em; }

.mtb-350, .mb-350 {
  margin-bottom: 3.5em; }

.mrl-350, .ml-350 {
  margin-left: 3.5em; }

.m-300 {
  margin: 3em; }

.mtb-300, .mt-300 {
  margin-top: 3em; }

.mrl-300, .mr-300 {
  margin-right: 3em; }

.mtb-300, .mb-300 {
  margin-bottom: 3em; }

.mrl-300, .ml-300 {
  margin-left: 3em; }

.m-250 {
  margin: 2.5em; }

.mtb-250, .mt-250 {
  margin-top: 2.5em; }

.mrl-250, .mr-250 {
  margin-right: 2.5em; }

.mtb-250, .mb-250 {
  margin-bottom: 2.5em; }

.mrl-250, .ml-250 {
  margin-left: 2.5em; }

.m-200 {
  margin: 2em; }

.mmtb-200, .mmt-200 {
  margin-top: -2em; }

.mtb-200, .mt-200 {
  margin-top: 2em; }
  @media (max-width: 480px) {
    .mtb-200, .mt-200 {
      margin-top: 1em; } }

.mrl-200, .mr-200 {
  margin-right: 2em; }

.mtb-200, .mb-200 {
  margin-bottom: 2em; }

.mrl-200, .ml-200 {
  margin-left: 2em; }

.m-150 {
  margin: 1.5em; }

.mmtb-150, .mmt-150 {
  margin-top: -1.5em; }

.mtb-150, .mt-150 {
  margin-top: 1.5em; }

.mrl-150, .mr-150 {
  margin-right: 1.5em; }

.mtb-150, .mb-150 {
  margin-bottom: 1.5em; }

.mrl-150, .ml-150 {
  margin-left: 1.5em; }

.m-125 {
  margin: 1.25em; }

.mtb-125, .mt-125 {
  margin-top: 1.25em; }

.mrl-125, .mr-125 {
  margin-right: 1.25em; }

.mtb-125, .mb-125 {
  margin-bottom: 1.25em; }

.mrl-125, .ml-125 {
  margin-left: 1.25em; }

.m-100 {
  margin: 1em; }

.mtb-100, .mt-100 {
  margin-top: 1em; }

.mrl-100, .mr-100 {
  margin-right: 1em; }

.mtb-100, .mb-100 {
  margin-bottom: 1em; }

.mrl-100, .ml-100 {
  margin-left: 1em; }

.m-75 {
  margin: 0.75em; }

.mtb-75, .mt-75 {
  margin-top: 0.75em; }

.mrl-75, .mr-75 {
  margin-right: 0.75em; }

.mtb-75, .mb-75 {
  margin-bottom: 0.75em; }

.mrl-75, .ml-75 {
  margin-left: 0.75em; }

.m-50 {
  margin: 0.5em; }

.mtb-50, .mt-50 {
  margin-top: 0.5em; }

.mrl-50, .mr-50 {
  margin-right: 0.5em; }

.mtb-50, .mb-50 {
  margin-bottom: 0.5em; }

.mrl-50, .ml-50 {
  margin-left: 0.5em; }

.m-25 {
  margin: 0.25em; }

.mtb-25, .mt-25 {
  margin-top: 0.25em; }

.mrl-25, .mr-25 {
  margin-right: 0.25em; }

.mtb-25, .mb-25 {
  margin-bottom: 0.25em; }

.mrl-25, .ml-25 {
  margin-left: 0.25em; }

.m-0 {
  margin: 0; }

.mtb-0, .mt-0 {
  margin-top: 0; }

.mrl-0, .mr-0 {
  margin-right: 0; }

.mtb-0, .mb-0 {
  margin-bottom: 0; }

.mrl-0, .ml-0 {
  margin-left: 0; }

.mmt-500 {
  margin-top: -5em; }

.mt-1000 {
  margin-top: 10em; }

.mt-108 {
  margin-top: 8em;
  margin-left: 1em;
  margin-right: 1em; }

/*
**  padding class
*/
.p-600 {
  padding: 6em; }

.ptb-600, .pt-600 {
  padding-top: 6em; }

.prl-600, .pr-600 {
  padding-right: 6em; }

.ptb-600, .pb-600 {
  padding-bottom: 6em; }

.prl-600, .pl-600 {
  padding-left: 6em; }

.p-550 {
  padding: 5.5em; }

.ptb-550, .pt-550 {
  padding-top: 5.5em; }

.prl-550, .pr-550 {
  padding-right: 5.5em; }

.ptb-550, .pb-550 {
  padding-bottom: 5.5em; }

.prl-550, .pl-550 {
  padding-left: 5.5em; }

.p-500 {
  padding: 5em; }

.ptb-500, .pt-500 {
  padding-top: 5em; }

.prl-500, .pr-500 {
  padding-right: 5em; }

.ptb-500, .pb-500 {
  padding-bottom: 5em; }

.prl-500, .pl-500 {
  padding-left: 5em; }

.p-450 {
  padding: 4.5em; }

.ptb-450, .pt-450 {
  padding-top: 4.5em; }

.prl-450, .pr-450 {
  padding-right: 4.5em; }

.ptb-450, .pb-450 {
  padding-bottom: 4.5em; }

.prl-450, .pl-450 {
  padding-left: 4.5em; }

.p-400 {
  padding: 4em; }

.ptb-400, .pt-400 {
  padding-top: 4em; }

.prl-400, .pr-400 {
  padding-right: 4em; }

.ptb-400, .pb-400 {
  padding-bottom: 4em; }

.prl-400, .pl-400 {
  padding-left: 4em; }

.p-350 {
  padding: 3.5em; }

.ptb-350, .pt-350 {
  padding-top: 3.5em; }

.prl-350, .pr-350 {
  padding-right: 3.5em; }

.ptb-350, .pb-350 {
  padding-bottom: 3.5em; }

.prl-350, .pl-350 {
  padding-left: 3.5em; }

.p-300 {
  padding: 3em; }
  @media (max-width: 480px) {
    .p-300 {
      padding: 0; } }

.ptb-300, .pt-300 {
  padding-top: 3em; }

.prl-300, .pr-300 {
  padding-right: 3em; }

.ptb-300, .pb-300 {
  padding-bottom: 3em; }

.prl-300, .pl-300 {
  padding-left: 3em; }

.p-250 {
  padding: 2.5em; }

.ptb-250, .pt-250 {
  padding-top: 2.5em; }

.prl-250, .pr-250 {
  padding-right: 2.5em; }

.ptb-250, .pb-250 {
  padding-bottom: 2.5em; }

.prl-250, .pl-250 {
  padding-left: 2.5em; }

.p-200 {
  padding: 2em; }

.ptb-200, .pt-200 {
  padding-top: 2em; }

.prl-200, .pr-200 {
  padding-right: 2em; }

.ptb-200, .pb-200 {
  padding-bottom: 2em; }

.prl-200, .pl-200 {
  padding-left: 2em; }

.p-150 {
  padding: 1.5em; }

.ptb-150, .pt-150 {
  padding-top: 1.5em; }

.prl-150, .pr-150 {
  padding-right: 1.5em; }

.ptb-150, .pb-150 {
  padding-bottom: 1.5em; }

.prl-150, .pl-150 {
  padding-left: 1.5em; }

.p-125 {
  padding: 1.25em; }

.ptb-125, .pt-125 {
  padding-top: 1.25em; }

.prl-125, .pr-125 {
  padding-right: 1.25em; }

.ptb-125, .pb-125 {
  padding-bottom: 1.25em; }

.prl-125, .pl-125 {
  padding-left: 1.25em; }

.p-100 {
  padding: 1em; }

.ptb-100, .pt-100 {
  padding-top: 1em; }

.prl-100, .pr-100 {
  padding-right: 1em; }

.ptb-100, .pb-100 {
  padding-bottom: 1em; }

.prl-100, .pl-100 {
  padding-left: 1em; }

.p-75 {
  padding: 0.75em; }

.ptb-75, .pt-75 {
  padding-top: 0.75em; }

.prl-75, .pr-75 {
  padding-right: 0.75em; }

.ptb-75, .pb-75 {
  padding-bottom: 0.75em; }

.prl-75, .pl-75 {
  padding-left: 0.75em; }

.p-50 {
  padding: 0.5em; }

.ptb-50, .pt-50 {
  padding-top: 0.5em; }

.prl-50, .pr-50 {
  padding-right: 0.5em; }

.ptb-50, .pb-50 {
  padding-bottom: 0.5em; }

.prl-50, .pl-50 {
  padding-left: 0.5em; }

.p-25 {
  padding: 0.25em; }

.ptb-25, .pt-25 {
  padding-top: 0.25em; }

.prl-25, .pr-25 {
  padding-right: 0.25em; }

.ptb-25, .pb-25 {
  padding-bottom: 0.25em; }

.prl-25, .pl-25 {
  padding-left: 0.25em; }

.p-0 {
  padding: 0; }

.ptb-0, .pt-0 {
  padding-top: 0; }

.prl-0, .pr-0 {
  padding-right: 0; }

.ptb-0, .pb-0 {
  padding-bottom: 0; }

.prl-0, .pl-0 {
  padding-left: 0; }

.plr-100 {
  padding-left: 1em;
  padding-right: 1em; }

.plr-200 {
  padding-left: 2em;
  padding-right: 2em; }
  @media (max-width: 480px) {
    .plr-200 {
      padding-left: 0.5em;
      padding-right: 0.5em; } }

.mlr-100 {
  margin-left: 1em;
  margin-right: 1em; }

.plr-500 {
  padding-left: 5em;
  padding-right: 5em; }

/*
**  font and text class
*/
.italic {
  font-style: italic; }

.small-caps {
  font-variant: small-caps; }

.bold {
  font-weight: bold; }

.xx-small {
  line-height: 1;
  font-size: 60%; }

.x-small {
  line-height: 1;
  font-size: 75%; }

.small {
  line-height: 1;
  font-size: 88.88%; }

.large {
  line-height: 1;
  font-size: 120%; }

.x-large {
  line-height: 1;
  font-size: 150%; }

.xx-large {
  line-height: 1;
  font-size: 200%; }

.overline {
  text-decoration: overline; }

.underline {
  text-decoration: underline; }

.capitalize {
  text-transform: capitalize; }

.uppercase {
  text-transform: uppercase; }

.lowercase {
  text-transform: lowercase; }

/*
**  layout class
*/
.indent {
  text-indent: 1em; }

.left {
  text-align: left; }

.right {
  text-align: right; }

.center {
  text-align: center; }

.float-left {
  float: left; }

.float-right {
  float: right; }

.clear:after, .clear-left:after, .clear-right:after {
  display: block;
  content: ""; }

.clear, .clear:after {
  clear: both; }

.clear-left, .clear-left:after {
  clear: left; }

.clear-right, .clear-right:after {
  clear: right; }

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: block !important; }

.sp {
  display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
  .pc {
    display: none !important; }

  .sp {
    display: block !important; } }
.hedback {
  background-image: url("img/hedback.jpg");
  /* 画像を常に天地左右の中央に配置 */
  background-position: bottom center;
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  height: 700px; }
  @media (max-width: 480px) {
    .hedback {
      background-image: url("img/hedback_2.jpg");
      background-position: top -100px center;
      height: 400px; } }

.back001 {
  background-image: url("img/top01.jpg");
  background-position: right 10% bottom;
  background-repeat: no-repeat;
  background-size: 80% auto;
  height: 600px; }
  @media (max-width: 480px) {
    .back001 {
      background-image: url("img/top01s.jpg");
      background-position: center top;
      background-size: 100%;
      height: 280px; } }

.price001 {
  background-image: url("img/p001.jpg");
  background-position: right 10% bottom;
  background-repeat: no-repeat;
  background-size: 80% auto;
  height: 600px; }
  @media (max-width: 480px) {
    .price001 {
      background-image: url("img/p001s.jpg");
      background-position: center top;
      background-size: 100%;
      height: 280px; } }

.page01 {
  background-image: url("img/back1.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 600px; }
  @media (max-width: 480px) {
    .page01 {
      background-image: url("img/back1s.jpg");
      background-position: center top;
      background-size: 100%;
      height: 420px; } }

.page02 {
  background-image: url("img/back2.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 600px; }
  @media (max-width: 480px) {
    .page02 {
      background-image: url("img/back2s.jpg");
      background-position: center top;
      background-size: 100%;
      height: 420px; } }

.page03 {
  background-image: url("img/back3.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 600px; }
  @media (max-width: 480px) {
    .page03 {
      background-image: url("img/back3s.jpg");
      background-position: center top;
      background-size: 100%;
      height: 420px; } }

.page04 {
  background-image: url("img/back4.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 600px; }
  @media (max-width: 480px) {
    .page04 {
      background-image: url("img/back4s.jpg");
      background-position: center top;
      background-size: 100%;
      height: 420px; } }

.page05 {
  background-image: url("img/back5.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 600px; }
  @media (max-width: 480px) {
    .page05 {
      background-image: url("img/back5s.jpg");
      background-position: center top;
      background-size: 100%;
      height: 420px; } }

.line001 {
  background-color: #f2f2f2;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  height: 400px; }
  @media (max-width: 480px) {
    .line001 {
      background-position: center top;
      background-size: 100%;
      height: 420px; } }

.girl01 {
  background-position: right 70px bottom 40px;
  background-image: url("img/003@2x.png");
  background-repeat: no-repeat;
  background-size: 70px; }

.girl02 {
  background-position: right 70px top;
  background-image: url("img/009@2x.png");
  background-repeat: no-repeat;
  background-size: 30px; }
  @media (max-width: 480px) {
    .girl02 {
      background-position: right 10px top; } }

.girl03 {
  background-position: right 70px bottom;
  background-image: url("img/girl03@2x.png");
  background-repeat: no-repeat;
  background-size: 70px; }

.oudo {
  background-color: #d8cec3; }

.black {
  background-color: #000000; }

.navy {
  background-color: #002b69; }

.midori {
  background-color: #b4a876; }

.back_blue {
  background-color: #ebf4f8; }

.back_gray {
  background-color: #454545; }

.back_gray2 {
  background-color: #e6e6e6; }

.back_wh {
  background-color: white;
  border-radius: 5px;
  height: auto; }

.white {
  color: white; }

.cha {
  color: #3D0A0D; }

.hedlogo {
  padding: 2em; }

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)"; }

.chuou {
  display: flex;
  justify-content: center;
  align-items: center; }

.chuou2 {
  display: flex;
  justify-content: center;
  align-items: flex-start; }

.chuou3 {
  display: flex;
  justify-content: center; }

.chuou4 {
  display: flex;
  justify-content: flex-end; }

.mannaka {
  margin-left: auto;
  margin-right: auto; }

.main h2 {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 32px;
  font-size: 1.8em;
  line-height: 1.8em; }
  @media (max-width: 480px) {
    .main h2 {
      font-size: 1.4em; } }

.main h3 {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 32px;
  font-size: 1.6em;
  line-height: 1.8em; }

.main002 {
  background-position: center center;
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  background-image: url("img/back02.jpg");
  height: 200px; }
  @media (max-width: 480px) {
    .main002 {
      height: 120px; } }

.main003 {
  background-position: center center;
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  background-image: url("img/back03@2x.png");
  height: auto;
  background-color: white; }

.main004 {
  background-image: url("img/019@2x.png");
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 75% 50%; }

.main005 {
  background-position: center center;
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  background-color: #ccc;
  height: auto;
  background-repeat: repeat; }

.backwh {
  background-color: white; }

.red {
  color: red; }

.orange {
  background-color: rgba(255, 157, 38, 0.5); }

.orange2 {
  background-color: rgba(255, 157, 38, 0.2); }

.font01 {
  font-size: 1.0em;
  letter-spacing: 0.05em;
  line-height: 1.8em;
  padding-left: 4.5em;
  padding-right: 1em;
  text-align: justify; }
  @media (max-width: 480px) {
    .font01 {
      padding-left: 1em;
      padding-right: 1em; } }

.font02 {
  font-size: 1.0em;
  letter-spacing: 0.05em;
  line-height: 1.8em;
  padding-left: 1em;
  padding-right: 1em;
  margin-top: 1em;
  text-align: justify;
  width: 70%;
  margin-left: auto; }
  @media (max-width: 480px) {
    .font02 {
      width: 100%; } }

.font03 {
  font-size: 1.0em;
  letter-spacing: 0.05em;
  line-height: 1.8em;
  padding-right: 4em;
  text-align: justify;
  width: 70%;
  margin-left: auto; }
  @media (max-width: 480px) {
    .font03 {
      padding-left: 0.5em;
      padding-right: 0.5em;
      width: 100%; } }

.font04 {
  font-size: 1.0em;
  letter-spacing: 0.05em;
  line-height: 2.5em;
  padding-right: 4em;
  padding-left: 2em;
  text-align: justify;
  margin-left: auto; }
  @media (max-width: 480px) {
    .font04 {
      padding-left: 0.5em;
      padding-right: 0.5em; } }

.under {
  background: linear-gradient(transparent 0, #FFF100 0); }

.orange_under {
  border-bottom: solid 8px rgba(255, 157, 38, 0.5); }

.orange_under2 {
  background: linear-gradient(transparent 0, #FF9D26 0);
  padding: 0.5em; }

.red_under {
  border-bottom: solid 2px #FC0005; }

.black_under {
  border-bottom: solid 1px #333333; }

.white_under {
  border-bottom: solid 1px #FFFFFF; }

.tensen {
  border-bottom: dotted 1px #333333;
  padding-top: 0.5em;
  background-size: 8px 1px;
  height: 1px;
  padding-bottom: 5px; }

.tensen1 {
  height: 1px;
  position: relative; }

.tensen1::before {
  content: "";
  background-image: linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.mojiwhite {
  color: white; }

/*フェードイン*/
.list-mv05 {
  transform: translate(0, 40px);
  -webkit-transform: translate(0, 40px); }

.mv05 {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0); }

@media screen and (min-width: 320px) {
  .gri40 {
    /* スマホの場合 @include mq */
    width: 90%; } }
@media screen and (min-width: 1024px) {
  .gri40 {
    /* PCの場合 @include mq(large) */
    width: 40%; } }

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto; }
  @media (max-width: 480px) {
    ul, li {
      list-style: none;
      margin: 0;
      padding: 0.4em;
      float: none;
      position: relative;
      display: block;
      margin: 0;
      width: 100%; } }

ul li:last-child {
  border: 0; }

.sikiri {
  border-left: 1px solid #333; }

ul li.tel {
  border-left: solid 1px #000;
  padding-left: 3%;
  margin-right: 0;
  min-width: 225px; }
  @media (max-width: 480px) {
    ul li.tel {
      border-left: solid 0px #000; } }

.aicon01 {
  padding-left: 30px;
  line-height: 30px;
  background: url("img/phone@2x.png") no-repeat;
  background-size: 20px; }

ul li a span {
  font-size: 67%;
  font-family: 'Cantarell', sans-serif;
  letter-spacing: 0;
  display: block;
  text-align: center;
  line-height: 2; }

.font04 {
  font-size: 1em;
  letter-spacing: 0.05em;
  line-height: 2em;
  padding-left: 2em;
  padding-right: 2em; }
  @media (max-width: 480px) {
    .font04 {
      font-size: 0.8em; } }

.font05 {
  font-size: 0.8em;
  letter-spacing: 0.05em;
  line-height: 2em;
  text-align: left; }

.font06 {
  font-size: 0.9em;
  letter-spacing: 0.05em;
  line-height: 2em; }

.font07 {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.2em;
  letter-spacing: 0.2em;
  line-height: 2em;
  padding-right: 2em; }
  @media (max-width: 480px) {
    .font07 {
      font-size: 1.5em; } }

li {
  list-style: none; }

li.maru:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 20px;
  /*画像の幅*/
  height: 20px;
  /*画像の高さ*/
  background-image: url("img/047@2x.png");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.con01 {
  position: relative;
  padding: 0.5em 1.5em; }

.con01:before, .con01:after {
  content: '';
  position: absolute;
  top: -10px;
  width: 2px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 0px);
  background-color: #333; }

.con01:before {
  left: 10px; }

.con01:after {
  right: 10px; }

.con01 p {
  margin: 0;
  padding: 0; }

/*囲み線*/
.kakomi {
  padding: 1em 2em;
  margin: 2em 0;
  border: solid 1px #4F312C; }

.kakomi p {
  margin: 0;
  padding: 0; }

/*お問い合わせフォーム*/
div#mf_wrapper {
  width: 640px;
  text-align: left;
  margin: 0px auto;
  font-family: sans-serif; }

div#mf_header h1 {
  font-size: 24px;
  border-bottom: solid 1px #999;
  margin: 0px;
  padding: 0px; }

div#mf_header h2 {
  font-size: 16px;
  color: #999;
  font-weight: normal;
  margin: 0px;
  padding: 0px; }

form#mailform {
  padding: 5px; }

table.mailform {
  width: 100%;
  box-sizing: border-box; }

table.mailform tr th, table.mailform tr td {
  text-align: left;
  font-weight: bold;
  font-size: 15px;
  padding: 7px 5px 30px 5px;
  box-sizing: border-box;
  color: #4F312C; }

table.mailform tr th {
  width: 200px; }

table.mailform tr th span {
  color: #C00;
  font-size: 10px; }

table.mailform tr th p {
  margin: 0px;
  padding: 0px;
  font-size: 10px;
  color: #999; }

table.mailform tr td textarea {
  max-width: 100%;
  height: 120px;
  box-sizing: border-box; }

@media screen and (max-width: 800px) {
  div#mf_wrapper {
    width: auto;
    max-width: 100%; }

  table.mailform, table.mailform tbody, table.mailform tbody tr {
    border-spacing: 0px;
    border-collapse: collapse;
    display: block;
    width: auto;
    max-width: 100%; }

  table.mailform tr th, table.mailform tr td {
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0px;
    box-sizing: border-box; }

  table.mailform tr th {
    border: none;
    padding: 7px 5px 2px 5px; }

  table.mailform tr th p {
    display: inline-block; }

  table.mailform tr th span {
    display: inline-block;
    margin: 0px 3px; }

  table.mailform tr td {
    padding: 2px 5px 7px 5px; }

  table.mailform tr td textarea,
  table.mailform tr td input,
  table.mailform tr td select {
    max-width: 100%;
    box-sizing: border-box;
    border-color: #ccc; } }
/*アニメーションcss*/
.animation {
  margin: 0; }

.fadeInDown {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  visibility: visible !important; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }
.under01 {
  border-bottom: solid 1px #333333; }

.under02 {
  background: linear-gradient(transparent 50%, #fcee21 50%); }

.panel-heading {
  padding: 20px 20px; }

.panel-title {
  color: #333;
  font-size: 1.8em;
  font-weight: 600; }
  .panel-title a {
    color: #333;
    border-bottom: solid 2px #FECE31; }

.panel-body {
  padding: 10px 20px;
  font-size: 1.3em;
  line-height: 2.2em; }

/* --- float解除 --- */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

.clearfix {
  min-height: 1px; }

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

/*トグル中身*/
.hidden_box {
  padding: 0.5em; }

/*ボタン装飾*/
.hidden_box label {
  padding: 6px;
  font-weight: bold;
  background: #454545;
  border-radius: 5px;
  cursor: pointer;
  transition: .5s;
  color: white; }

/*アイコンを表示*/
.hidden_box label:before {
  display: inline-block;
  content: '\f078';
  font-family: 'Font Awesome 5 Free';
  padding-right: 5px;
  transition: 0.2s; }

/*ボタンホバー時*/
.hidden_box label:hover {
  background: silver; }

/*アイコンを切り替え*/
.hidden_box input:checked ~ label:before {
  content: '\f00d';
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  color: #454545; }

/*チェックは見えなくする*/
.hidden_box input {
  display: none; }

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s; }

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
  padding: 10px 0;
  height: auto;
  opacity: 1; }

/*ロゴを画像にする場合*/
.navbar-brand {
  background: url("img/logo.svg") no-repeat left center;
  background-size: contain;
  height: 60px;
  width: 200px; }
  @media (max-width: 480px) {
    .navbar-brand {
      width: 150px; } }

.nunito {
  font-family: 'Nunito Sans', sans-serif;
  letter-spacing: 0.05em; }
  .nunito li {
    padding-right: 2em; }

.josefin {
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 0.05em;
  font-size: 1.1em; }
  .josefin li {
    padding-right: 2em; }

.foot01 {
  font-size: 1.2em;
  color: #333;
  font-weight: 800; }

.line {
  position: relative;
  line-height: 1.2em;
  text-indent: 1.2em;
  padding-left: 1.8em; }

.line:before {
  position: absolute;
  left: 0;
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: url(img/line@2x.png) no-repeat;
  background-size: contain; }

.mark01 {
  position: relative;
  line-height: 1.2em;
  text-indent: 1.2em;
  padding-right: 1.8em; }

.mark01:after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 1em;
  height: 0.5em;
  margin-left: 1em;
  margin-top: 0.5em;
  background: url(img/01@2x.png) no-repeat;
  background-size: contain; }

#demo-1 {
  overflow: hidden;
  width: 100%;
  min-height: 800px;
  background-color: #999; }

#demo-2 {
  overflow: hidden;
  width: 100%;
  min-height: 800px;
  background-color: #fff; }

.drop01 {
  text-shadow: 0.5px 0.5px 0.5px #ffffff; }

.back01 {
  background-color: #ccc; }

.bracekts {
  background: #fff;
  color: #333;
  position: relative;
  font-weight: bold;
  padding: 20px 60px;
  display: inline-block;
  text-align: center;
  transition: .3s;
  margin-bottom: 0.5em; }
  .bracekts a {
    text-decoration: none;
    color: #333; }
  @media (max-width: 480px) {
    .bracekts {
      width: 100%; } }

.bracekts::before {
  top: 0;
  left: 0;
  border-left: 1px solid #333;
  border-top: 1px solid #333;
  transition: .3s; }

.bracekts::after {
  bottom: 0;
  right: 0;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  transition: .3s; }

.bracekts::after,
.bracekts::before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%; }

.bracekts:hover {
  color: #2a94be; }

.bracekts:active {
  opacity: .5; }

.bracekts:hover::after, .bracekts:hover::before {
  width: 30px;
  height: 20px; }

.footsp {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px; }

/*アンダーラインホバー*/
.nav-item a {
  position: relative;
  display: inline-block;
  text-decoration: none; }

.nav-item a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s; }

.nav-item a:hover::after {
  transform: scale(1, 1); }

.header {
  display: flex;
  justify-content: flex-end;
  align-items: center; }

.header h1 {
  margin-right: auto; }

.header ul {
  display: flex;
  margin: 40px; }

.header li {
  margin-left: 3rem; }

@media screen and (max-width: 768px) {
  .header {
    flex-direction: column; }

  .header h1 {
    margin: 0 auto 3rem; }

  .header li {
    margin: 0 1rem; } }
@media screen and (max-width: 568px) {
  .header li {
    margin: 0 .5rem;
    font-size: 1.2rem; } }
#footer {
  bottom: 0;
  width: 100%;
  height: 300px; }
  @media (max-width: 480px) {
    #footer {
      height: 280px; } }

.tate {
  display: flex;
  flex-direction: column; }

.navbar-light .navbar-nav .nav-link {
  color: #454545; }

.rela {
  position: relative; }

.abs {
  position: absolute;
  left: -100px;
  top: 200px; }
  @media (max-width: 480px) {
    .abs {
      left: 20px;
      top: 70px; } }

.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }

.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important; }

.box {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); }

.adback01 {
  background-color: white;
  width: 600px;
  height: auto;
  padding: 3em;
  margin-left: -150px; }
  @media (max-width: 480px) {
    .adback01 {
      width: 100%;
      padding: 1em;
      margin-top: 0;
      margin-left: 0; } }

.adback02 {
  background-color: white;
  width: 600px;
  height: auto;
  padding: 3em;
  margin-left: 250px;
  z-index: 2; }
  @media (max-width: 480px) {
    .adback02 {
      width: 100%;
      padding: 1em;
      margin-top: 0;
      margin-left: 0; } }

.kadomaru {
  border-radius: 5px; }

.item1 {
  order: 1; }
  @media (max-width: 480px) {
    .item1 {
      order: 2; } }

.item2 {
  order: 2; }
  @media (max-width: 480px) {
    .item2 {
      order: 1; } }

.item3 {
  order: 3; }
  @media (max-width: 480px) {
    .item3 {
      order: 4; } }

.item4 {
  order: 4; }
  @media (max-width: 480px) {
    .item4 {
      order: 3; } }

.just {
  text-align: justify; }

/*Q&A*/
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.cp_qa {
  border-top: 1px solid #1b2538; }

.cp_qa .cp_actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 1px;
  color: #1b2538; }

.cp_qa .cp_actab input {
  position: absolute;
  opacity: 0; }

/* 質問 */
.cp_qa .cp_actab label {
  font-weight: bold;
  line-height: 1.6;
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: 1em 2em 1em 1em;
  cursor: pointer;
  border-bottom: 1px solid #1b2538;
  font-size: 1.2em; }

.cp_qa .cp_actab label:hover {
  color: #d8cec3; }

/* 答え */
.cp_qa .cp_actab .cp_actab-content {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: max-height 0.5s ease;
  transition: max-height 0.5s ease;
  color: #ffffff;
  background: #d8cec3; }

.cp_qa .cp_actab .cp_actab-content p {
  margin: 1em; }

/* 質問を開いた時の仕様 */
/* --アイコン */
.cp_qa .cp_actab input:checked ~ label {
  color: #333333; }

/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
  max-height: 40em; }

/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab label::after {
  line-height: 1.6;
  position: absolute;
  top: 50%;
  right: 0;
  display: block;
  width: 3em;
  margin-top: -12.5px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  text-align: center; }

.cp_qa .cp_actab input[type=checkbox] + label::after {
  content: ''; }

.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg); }

.qa label:first-letter {
  color: red;
  font-weight: 600; }

.kadomaru2 {
  border-top-left-radius: 0;
  border-top-right-radius: 70px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 70px; }
  @media (max-width: 480px) {
    .kadomaru2 {
      border-top-left-radius: 0;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 20px; } }

header {
  align-items: center;
  display: flex;
  height: 60px;
  width: 100%; }

header .inner {
  margin: auto;
  max-width: 100%;
  width: 1280px; }

header .flexbox {
  align-items: center;
  display: flex;
  justify-content: space-between; }

.logo-img img {
  vertical-align: bottom; }

.nav-global ul {
  list-style: none; }

.nav-global li {
  margin: 0 15px; }

.nav-global li:last-child {
  margin-right: 0; }

.nav-global a {
  color: #454545;
  text-decoration: none; }

.fbox {
  display: flex;
  /* フレックスボックスにする */ }

.yokoiti {
  width: 100%; }
  @media (max-width: 480px) {
    .yokoiti {
      width: 50%; } }

.col_6 {
  width: 100%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }

.col_6 > div {
  width: 16.66%;
  padding: 10px; }

.col_6 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 960px) {
  .col_6 > div {
    width: 25%; } }
@media screen and (max-width: 480px) {
  .col_6 > div {
    width: 50%; } }
.futoji {
  font-weight: 600; }

.col_5 {
  width: 50%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_5 {
      width: 100%; } }

.col_4 {
  width: 90%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_4 {
      width: 100%; } }

.col_4 > div {
  width: 25%;
  padding: 20px; }

.col_4 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 960px) {
  .col_4 > div {
    width: 50%; } }
@media screen and (max-width: 480px) {
  .col_4 > div {
    width: 50%; } }
.col_4_90 {
  width: 90%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_4_90 {
      width: 100%; } }

.col_4_90 > div {
  width: 25%;
  padding: 10px; }

.col_4_90 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 960px) {
  .col_4_90 > div {
    width: 50%; } }
@media screen and (max-width: 480px) {
  .col_4_90 > div {
    width: 50%; } }
.col_3 {
  width: 90%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_3 {
      width: 100%; } }

.col_3 > div {
  width: 33.33%;
  padding: 20px; }

.col_3 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 960px) {
  .col_3 > div {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .col_3 > div {
    width: 100%; } }
.col_2 {
  width: 100%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }

.col_2 > div {
  width: 50%;
  padding: 0px 20px; }

.col_2 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 960px) {
  .col_2 > div {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .col_2 > div {
    width: 100%; } }
.col_2_70 {
  width: 80%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_2_70 {
      width: 90%; } }

.col_2_70 > div {
  width: 50%;
  padding: 10px; }

.col_2_70 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 960px) {
  .col_2_70 > div {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .col_2_70 > div {
    width: 100%; } }
.col_2_60 {
  width: 70%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_2_60 {
      width: 90%; } }

.col_2_60 > div {
  width: 50%;
  padding: 10px; }

.col_2_60 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 960px) {
  .col_2_60 > div {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .col_2_60 > div {
    width: 100%; } }
.col_2_40 {
  width: 50%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_2_40 {
      width: 90%; } }

.col_2_40 > div {
  width: 50%;
  padding: 10px; }

.col_2_40 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 960px) {
  .col_2_40 > div {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .col_2_40 > div {
    width: 100%; } }
.col_2_50 {
  width: 60%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_2_50 {
      width: 90%; } }

.col_2_50 > div {
  width: 50%;
  padding: 10px; }

.col_2_50 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 960px) {
  .col_2_50 > div {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .col_2_50 > div {
    width: 100%; } }
.col_2_70 {
  width: 70%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_2_70 {
      width: 90%; } }

.col_2_70 > div {
  width: 50%;
  padding: 10px; }

.col_2_70 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 1280px) {
  .col_2_70 > div {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .col_2_70 > div {
    width: 100%; } }
.col_4 {
  width: 100%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_4 {
      width: 100%; } }

.col_4 > div {
  width: 25%;
  padding: 15px; }
  @media (max-width: 480px) {
    .col_4 > div {
      padding: 5px; } }

.col_4 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 1280px) {
  .col_4 > div {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .col_4 > div {
    width: 100%; } }
.col_2_80 {
  width: 80%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_2_80 {
      width: 100%; } }

.col_2_80 > div {
  width: 50%;
  padding: 25px; }
  @media (max-width: 480px) {
    .col_2_80 > div {
      padding: 5px; } }

.col_2_80 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 1280px) {
  .col_2_80 > div {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .col_2_80 > div {
    width: 100%; } }
.col_2_90 {
  width: 90%;
  display: flex;
  display: -ms-flexbox;
  /* IE10 */
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  /* IE10 */ }
  @media (max-width: 480px) {
    .col_2_90 {
      width: 90%; } }

.col_2_90 > div {
  width: 50%;
  padding: 20px; }

.col_2_90 > div > div {
  position: relative;
  overflow: hidden; }

@media screen and (max-width: 1280px) {
  .col_2_90 > div {
    width: 100%; } }
@media screen and (max-width: 480px) {
  .col_2_90 > div {
    width: 100%; } }
.col_50 {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: flex; }
  @media (max-width: 480px) {
    .col_50 {
      width: 90%;
      flex-direction: column; } }

.col_60 {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  display: flex; }
  @media (max-width: 480px) {
    .col_60 {
      width: 90%;
      flex-direction: column; } }

.col_70 {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  display: flex; }
  @media (max-width: 480px) {
    .col_70 {
      width: 90%;
      flex-direction: column; } }

.w_100 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex; }
  @media (max-width: 480px) {
    .w_100 {
      width: 90%;
      flex-direction: column; } }

.imp_side {
  width: 300px; }
  @media (max-width: 480px) {
    .imp_side {
      width: 90%; } }

.imp_main {
  flex: 1; }
  @media (max-width: 480px) {
    .imp_main {
      width: 100%; } }

.imp_side2 {
  width: 100%; }
  @media (max-width: 480px) {
    .imp_side2 {
      width: 90%; } }

.imp_main2 {
  flex: 1;
  padding: 3em;
  width: auto; }
  @media (max-width: 480px) {
    .imp_main2 {
      width: 100%;
      padding: 0; } }

.imp_main3 {
  flex: 2; }
  @media (max-width: 480px) {
    .imp_main3 {
      width: 100%; } }

hr.style1 {
  border-top: 1px solid #ff9d26; }

.sendouble {
  border-bottom: double 6px #333333; }

.nomae:before {
  content: url("img/denwa@2x.png");
  width: 10px;
  margin-right: 10px;
  vertical-align: middle; }

.topbox {
  display: flex;
  justify-content: flex-start;
  align-items: center; }

.topbox2 {
  width: 350px;
  height: 130px;
  background-color: white;
  text-align: left;
  padding: 2em; }
  @media (max-width: 480px) {
    .topbox2 {
      width: 230px;
      height: 80px;
      padding: 1em; } }

.topbox3 {
  width: 450px;
  height: 130px;
  background-color: white;
  text-align: left;
  padding: 2em; }
  @media (max-width: 480px) {
    .topbox3 {
      width: 230px;
      height: 80px;
      padding: 1em; } }

.topbox4 {
  width: 450px;
  height: 130px;
  background-color: white;
  text-align: left;
  padding: 2em; }
  @media (max-width: 480px) {
    .topbox4 {
      width: 230px;
      height: 140px;
      padding: 1em; } }

.topbox5 {
  width: 450px;
  height: 130px;
  background-color: white;
  text-align: left;
  padding: 2em; }
  @media (max-width: 480px) {
    .topbox5 {
      width: 230px;
      height: 170px;
      padding: 1em; } }

.ha:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 20px;
  /*画像の幅*/
  height: 20px;
  /*画像の高さ*/
  background-image: url("img/ha.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.imp:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 30px;
  /*画像の幅*/
  height: 30px;
  /*画像の高さ*/
  background-image: url("img/imp_icon@2x.png");
  background-size: contain;
  vertical-align: baseline;
  background-repeat: no-repeat; }

.hanuke:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 30px;
  /*画像の幅*/
  height: 30px;
  /*画像の高さ*/
  background-image: url("img/hanuke@2x.png");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.no1:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/se001.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.gno1:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/kno1.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.xno1:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 30px;
  /*画像の幅*/
  height: 30px;
  /*画像の高さ*/
  background-image: url("img/se001.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.no2:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/se002.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.gno2:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/kno2.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.xno2:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 30px;
  /*画像の幅*/
  height: 30px;
  /*画像の高さ*/
  background-image: url("img/se002.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.no3:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/se003.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.gno3:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/kno3.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.xno3:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 30px;
  /*画像の幅*/
  height: 30px;
  /*画像の高さ*/
  background-image: url("img/se003.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.no4:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/se004.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.gno4:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/kno4.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.xno4:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 30px;
  /*画像の幅*/
  height: 30px;
  /*画像の高さ*/
  background-image: url("img/se004.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.no5:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/se005.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.gno5:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/kno5.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.xno5:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 30px;
  /*画像の幅*/
  height: 30px;
  /*画像の高さ*/
  background-image: url("img/se005.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.no6:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/se006.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.gno6:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/pno6.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.xno6:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 30px;
  /*画像の幅*/
  height: 30px;
  /*画像の高さ*/
  background-image: url("img/se006.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.no7:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/se007.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.gno7:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/pno7.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.no8:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/se008.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.gno8:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/pno8.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.no9:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/se009.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.gno9:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/pno9.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.no10:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 40px;
  /*画像の幅*/
  height: 40px;
  /*画像の高さ*/
  background-image: url("img/se010.svg");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

/*クリックスライドギャラリー*/
#thumbnail {
  overflow: hidden;
  width: 100%;
  padding-top: 10px; }

#thumbnail li {
  float: left; }

#thumbnail li img {
  width: 100%;
  opacity: 0.5;
  filter: alpha(opacity=50); }

#thumbnail li.current img {
  opacity: 1;
  filter: alpha(opacity=100); }

#main_photo {
  position: relative;
  height: 100%; }

#main_photo img {
  position: absolute;
  top: 0;
  width: 100%; }

/*641px～PC　PC上では見えないようにする*/
@media screen and (min-width: 641px) {
  .footer_area {
    display: none; } }
/*スマホ～641pxの幅サイズまで*/
@media screen and (max-width: 640px) {
  .footer_area {
    position: fixed;
    bottom: -15px;
    left: 0;
    width: 100%;
    z-index: 10000; } }
.footer_area .footer_area_inner {
  position: relative;
  width: 100%;
  margin: 0px auto;
  padding: 10px 0;
  margin-right: 0px; }

.footer_area .footer_area_inner .footer_area_inner_btn {
  width: 85%;
  padding: 11px 0;
  font-size: 20px;
  font-weight: bold;
  margin-left: 15px;
  line-height: 1.3; }

.inquiry_btn {
  background-color: #F1F8FC;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 15px 10px;
  font-size: 18px;
  font-weight: bold;
  width: 100%; }

.inquiry_btn:link, .inquiry_btn:visited {
  color: #FFFFFF !important; }

.footer_area_inner span {
  color: #fff; }

.midashi001 {
  padding: 0 0.8em;
  /*上下 左右の余白*/
  color: #494949;
  /*文字色*/
  background: transparent;
  /*背景透明に*/
  border-left: solid 8px #FF9D26;
  /*左線*/
  line-height: 1.3em; }

.att {
  padding-left: 2em;
  text-indent: -2em; }

.box2 {
  padding: 2em;
  margin: 2em 0;
  background: #FFF;
  border: solid 1px #FF9D26;
  /*線*/
  border-radius: 10px;
  /*角の丸み*/ }

.bi1:before {
  content: '';
  /*何も入れない*/
  display: inline-block;
  /*忘れずに！*/
  width: 30px;
  /*画像の幅*/
  height: 30px;
  /*画像の高さ*/
  background-image: url("img/bi01@2x.png");
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  background-repeat: no-repeat; }

.f-container2 {
  display: flex;
  width: 50%;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2em; }
  @media (max-width: 480px) {
    .f-container2 {
      width: 100%;
      height: 100%;
      padding: 1em 0;
      flex-direction: column; } }

.f-item {
  padding: 5px; }
  @media (max-width: 480px) {
    .f-item {
      padding: 0; } }
  .f-item p {
    text-align: justify; }

/*吹き出し右*/
.balloon2-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 50px 1.5em 0;
  padding: 1.5em;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #ffffff;
  border-radius: 5px; }

.balloon2-right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #ffffff;
  z-index: 2; }

.balloon2-right:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border-left: 14px solid #D9D9D9;
  border-radius: 5px;
  z-index: 1; }

/*吹き出し左*/
.balloon2-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 1em;
  min-width: 120px;
  max-width: 100%;
  color: #ffffff;
  font-size: 16px;
  background: #ffffff;
  border-radius: 5px;
  box-sizing: border-box; }

.balloon2-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border-right: 12px solid #ffffff;
  z-index: 2; }

.balloon2-left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -28px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #ffffff;
  z-index: 1; }

.font111 {
  font-family: orator-std, monospace;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5em; }

.font110 {
  font-family: ten-mincho-text, serif;
  font-weight: 400;
  font-style: normal; }

.futura {
  font-family: futura-pt, sans-serif;
  font-size: 1.3em;
  font-style: normal;
  font-weight: 400; }

.pink {
  color: #E96692; }

#footer p {
  line-height: 1.8em; }

/*============
navi
=============*/
navi {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0; }

.open navi {
  left: 0;
  opacity: 1; }

navi .inner {
  padding: 20px; }

navi .inner ul {
  list-style: none;
  margin: 0;
  padding: 0; }

navi .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333; }

navi .inner ul li a {
  display: block;
  color: #E96692;
  font-size: 16px;
  padding: 0.8em;
  text-decoration: none;
  transition-duration: 0.2s; }

navi .inner ul li a:hover {
  background: #e4e4e4; }

@media screen and (max-width: 767px) {
  navi {
    left: -220px;
    width: 220px; } }
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 30px;
  left: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3; }

.open .toggle_btn {
  left: 330px; }

.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
  transition: all .5s; }

.toggle_btn span:nth-child(1) {
  top: 4px; }

.toggle_btn span:nth-child(2) {
  top: 14px; }

.toggle_btn span:nth-child(3) {
  bottom: 4px; }

.open .toggle_btn span {
  background-color: #fff; }

.open .toggle_btn {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg); }

.open .toggle_btn span:nth-child(1), .open .toggle_btn span:nth-child(3) {
  width: 16px; }

.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translate(-1px, 4px) rotate(-45deg);
  transform: translate(-1px, 4px) rotate(-45deg); }

.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translate(-1px, -4px) rotate(45deg);
  transform: translate(-1px, -4px) rotate(45deg); }

@media screen and (max-width: 767px) {
  .open .toggle_btn {
    left: 250px; } }
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s; }

.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer; }

/* シンプル 枠 1*/
.kakomi-box1 {
  margin: 9em 0 1em 0;
  padding: 3em;
  width: 90%;
  background-color: #fff;
  /* 背景色 */
  border: 1px solid #D7749D;
  /* 枠線 */ }
  @media (max-width: 480px) {
    .kakomi-box1 {
      padding: 1em;
      width: 100%; } }

.flex_test-box {
  display: flex;
  padding: 10px;
  /* 余白指定 */ }

.flex_test-item {
  font-size: 1.2em;
  color: #333;
  /* 文字色 */
  margin: 10px;
  /* 外側の余白 */
  line-height: 0; }

.flex_test-item:nth-child(1) {
  width: 130px;
  padding: 1rem;
  border-left: 5px solid #3BAEB7;
  /* 見出し色指定 */ }

.flex_test-item:nth-child(2) {
  width: 130px;
  padding: 1rem;
  border-left: 5px solid #69B363;
  /* 見出し色指定 */ }

.flex_test-item:nth-child(3) {
  width: 130px;
  padding: 1rem;
  border-left: 5px solid #ED7D71;
  /* 見出し色指定 */ }

.flex_test-item:nth-child(4) {
  width: 130px;
  padding: 1rem;
  border-left: 5px solid #E96692;
  /* 見出し色指定 */ }

.flex_test-item:nth-child(5) {
  width: 130px;
  padding: 1rem 2.1rem;
  color: #fff;
  border-radius: 100vh;
  background-color: #E84F64; }
  @media (max-width: 480px) {
    .flex_test-item:nth-child(5) {
      padding: 1rem 1.2rem; } }
  .flex_test-item:nth-child(5) a {
    color: white; }

html {
  scroll-behavior: smooth; }

#slide_wrap {
  position: relative;
  overflow: hidden; }
  #slide_wrap .slide_item {
    opacity: 0;
    transform: scale(1);
    transition: opacity 2s linear, transform 7.5s linear;
    position: relative; }
    #slide_wrap .slide_item:not(:first-child) {
      position: absolute;
      top: 0;
      left: 0; }
    #slide_wrap .slide_item.show_ {
      opacity: 1; }
    #slide_wrap .slide_item.zoom_ {
      transform: scale(1.1); }
    #slide_wrap .slide_item img {
      display: block; }

.slidebox {
  position: relative; }

.slidebox h1 {
  position: absolute;
  top: 350px;
  left: 1060px;
  width: 400px; }
  @media (max-width: 480px) {
    .slidebox h1 {
      text-align: right;
      left: 0px;
      width: 300px;
      right: 30px; } }

.top-right {
  position: absolute;
  top: 600px;
  right: 800px; }

.backmoji {
  position: relative; }

.backmoji h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  /*文字の装飾は省略*/ }

.wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  width: 80%;
  column-gap: 100px; }

/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  /* 比率を16:9に固定 */ }

/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.moji001 {
  line-height: 50px;
  letter-spacing: 0.05em; }

.feature__wrapper {
  display: flex;
  flex-direction: column; }

@media (max-width: 479px) {
  .feature {
    order: 1; } }

@media (max-width: 479px) {
  .feature__image {
    order: 2; } }

.yohaku001 {
  padding: 2em; }
  @media (max-width: 480px) {
    .yohaku001 {
      padding: 0; } }

.stepbar {
  margin: 0 auto;
  width: 80%; }

.stepbar .stepbarwrap {
  margin: 2em 0;
  position: relative; }

.stepbar .stepbarwrap .steptitle {
  display: inline-flex;
  align-items: center; }

.stepbar .stepbarwrap .steptitle .stepcircle {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #000; }

.stepbar .stepbarwrap .steptitle .stepnum {
  padding-left: 1em;
  font-size: 0.8em;
  color: #333; }

.stepbar .stepbarwrap .steptxt {
  padding-left: 2em; }

.stepbar .stepbarwrap .steptxt .title {
  margin: 0.5em 0;
  font-weight: bold;
  font-size: 1.2em; }

.stepbar .stepbarwrap .steptxt .txt {
  font-size: 0.9em; }

.stepbar .stepbarwrap .stepline {
  width: 1px;
  height: calc(100% + 1em);
  background-color: #000;
  position: absolute;
  top: 1em;
  left: 0.5em;
  z-index: 1; }

.stepbarwrap:last-of-type .stepline:last-of-type {
  display: none; }

@media screen and (max-width: 960px) {
  .stepbar {
    width: 90%; } }
#main_slide {
  height: 200px; }

.gaihekikouji {
  max-width: 400px;
  height: auto;
  line-height: 1.5;
  margin: 40px auto 0; }
  .gaihekikouji h2 {
    font-size: 1.5em;
    font-weight: 600; }
    .gaihekikouji h2::before {
      position: relative;
      top: 1px;
      margin: 0 10px 0 0;
      content: url("img/025.png"); }

.sasshi {
  max-width: 400px;
  height: auto;
  line-height: 1;
  margin: 40px auto 0; }
  .sasshi h2 {
    font-size: 1.5em;
    font-weight: 600; }
    .sasshi h2::before {
      position: relative;
      top: 1px;
      margin: 0 10px 0 0;
      content: url("img/027.png"); }

.kitchen {
  max-width: 400px;
  height: auto;
  line-height: 1;
  margin: 40px auto 0; }
  .kitchen h2 {
    font-size: 1.5em;
    font-weight: 600; }
    .kitchen h2::before {
      position: relative;
      top: 1px;
      margin: 0 10px 0 0;
      content: url("img/029.png"); }

.bathroom {
  max-width: 400px;
  height: auto;
  line-height: 1;
  margin: 40px auto 0; }
  .bathroom h2 {
    font-size: 1.5em;
    font-weight: 600; }
    .bathroom h2::before {
      position: relative;
      top: 1px;
      margin: 0 10px 0 0;
      content: url("img/031.png"); }

.toilet {
  max-width: 400px;
  height: auto;
  line-height: 1;
  margin: 40px auto 0; }
  .toilet h2 {
    font-size: 1.5em;
    font-weight: 600; }
    .toilet h2::before {
      position: relative;
      top: 1px;
      margin: 0 10px 0 0;
      content: url("img/033.png"); }

.washbasin {
  max-width: 400px;
  height: auto;
  line-height: 1;
  margin: 40px auto 0; }
  .washbasin h2 {
    font-size: 1.5em;
    font-weight: 600; }
    .washbasin h2::before {
      position: relative;
      top: 1px;
      margin: 0 10px 0 0;
      content: url("img/035.png"); }

table {
  border-collapse: collapse;
  width: 100%; }

.tb01 th,
.tb01 td {
  padding: 10px;
  border: solid 1px #ccc;
  text-align: center;
  box-sizing: border-box; }

.tb01 th {
  background: #e6e6e6;
  color: #333; }

@media screen and (max-width: 640px) {
  .tb01 .head {
    display: none; }

  .tb01 {
    width: 100%; }

  table.tb01 td {
    display: block;
    width: 100%;
    border-bottom: none; }

  table.tb01 td:first-child {
    background: #e6e6e6;
    color: #333;
    font-weight: bold; }

  .tb01 tr:last-child {
    border-bottom: solid 1px #ccc; } }
#slider {
  width: 100%;
  height: 100vh;
  /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/ }
  #slider h1 {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2.5vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff; }
    @media (max-width: 480px) {
      #slider h1 {
        font-size: 6vw; } }
.ichiran {
  box-shadow :0px 0px 3px silver;
  border: solid 1px whitesmoke;
  padding: 1.5em 1.5em 1.5em 3.3em;
  position: relative;
  background: #fafafa;
}

.ichiran li {
	font-size: 1.1rem;
  line-height: 1.5;
  padding: 0.8em 1.5em;
  list-style-type: none!important;
}

.ichiran li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f152";
  position: absolute;
  left : 1.2em; /*左端からのアイコンまで*/
  color: gray; /*アイコン色*/
}
@media (max-width: 480px) {
    .ichiran li:before {
  left : -0.5em; /*左端からのアイコンまで*/
} }




/* ブログカテゴリー */
.button-4 {
  appearance: none;
  background-color: #FAFBFC;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: #24292E;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  list-style: none;
  padding: 6px 16px;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}

.button-4:hover {
  background-color: #F3F4F6;
  text-decoration: none;
  transition-duration: 0.1s;
}

.button-4:disabled {
  background-color: #FAFBFC;
  border-color: rgba(27, 31, 35, 0.15);
  color: #959DA5;
  cursor: default;
}

.button-4:active {
  background-color: #EDEFF2;
  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
  transition: none 0s;
}

.button-4:focus {
  outline: 1px transparent;
}

.button-4:before {
  display: none;
}

.button-4:-webkit-details-marker {
  display: none;
}


/* 続きはこちら */
.button-31 {
  background-color: #222;
  border-radius: 4px;
  border-style: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Farfetch Basis","Helvetica Neue",Arial,sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: none;
  min-height: 44px;
  min-width: 10px;
  outline: none;
  overflow: hidden;
  padding: 10px 10px 5px;
  position: relative;
  text-align: center;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 30%;
	margin-top: 30px
}
@media (max-width: 480px) {
    .button-31 {
  width: 40%;
} }

.button-31:hover,
.button-31:focus {
  opacity: .75;
}