@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Oswald:wght@500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,900&display=swap');

/*
 * "Comfortaa" is lisenced under the SIL Open Font License 1.1
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/OFL
 */

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

全体の設定

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
body {
  color: #4F886E;
  font-family: 'Roboto', 'Oswald', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

a {
  color: #fffccc;
  text-decoration: none;
}

a:hover {
  opacity: 0.5;
  color: #fffccc;
}

.bg-darkgray {
  background-color: #a9a9a9;
}

.bg-dark2 {
  background-color: #333333;
}


.container,
.container-fulid {
  overflow: hidden;
}

/* 見出しを太字に */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold !important;
}

/* 英字タイトルをWEBフォントに */
header a,
.display-4,
.display-3,
.lead,
.circle-badges {
  font-family: 'Oswald' , 'Comfortaa', cursive;
}

/* パンくずリスト */
.breadcrumb {
  background: transparent;
}

.breadcrumb li + li:before {
  content: '»' !important;
}

/* ヘッダー営業時間 */
.top-stitch {
  padding: .5rem 0;
  color: #565656;
  background-color: #333333;
  margin-bottom: 10px;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.top-stitch p {
  margin: 0;
  padding: 0;
  font-family: 'Oswald' , 'Comfortaa', cursive;
}

/* ロゴマーク */
.logo-mark {
  left:5%;
  top: 20px;
  z-index: 999;
  border-radius: 50%;
  height: 240px;
  width: 240px;
}

/* ロゴマークの中身 */
.logo-mark img {
  top: 10%;
  left: 10%;
}

.main-txt {
  left: 15%;
  bottom: 20px;
}


.intro {
  position: relative;
  padding: 0;
  background-color:#212529;
  color: #fff;
}


/* 普通 */
.zigzag {
  position: relative;
  padding: 0;
  background-color: #f9ebd1;
}


/* ギザギザ（緑）　*/
.zigzag-green {
  position: relative;
  margin: 5% 0;
  padding: 0;
  background-color: #4F886E;
}

.zigzag-green::before,
.zigzag-green::after {
  position: absolute;
  width: 100%;
  height: 60px;
  content: "";
}

.zigzag-green::before {
  top: -60px;
  background: linear-gradient(45deg, #4F886E 30px, transparent 0), linear-gradient(315deg, #4F886E 30px, transparent 0);
  background-size: 60px 60px;
}


/* ギザギザ （青）　*/
.zigzag-blue {
  position: relative;
  margin: 0;
  padding: 0;
  background-color: #4a82ba;
}


/* ギザギザ（薄い） */
.light-zigzag {
  position: relative;
  margin: 5% 0 0;
  padding: 0;
  background-color: #f8f9fa;
}


/* ギザギザ線なし */
.zigzag-none:after {
  content: none !important;
}

/* コピーライトのギザギザ線 */
.zigzag-copy {
  position: relative;
  padding-top: 5%;
  background-color: #a9a9a9;
}

.zigzag-copy::before {
  position: absolute;
  width: 100%;
  height: 60px;
  content: "";
  top: -60px;
  background: linear-gradient(45deg, #a9a9a9 30px, transparent 0), linear-gradient(315deg, #a9a9a9 30px, transparent 0);
  background-size: 60px 60px;
}

/* コピーライト*/
.copy {
  position: relative;
  padding-top: 5%;
  background-color: #333333;
}




/* ------------------------------
地図サイズ
--------------------------------- */
iframe {
  display: block;
  width: 100%;
  height: 400px;
}

/* ------------------------------
フッター
--------------------------------- */
.stitch {
  padding:2.5rem !important;
  color: #565656;
  background-color: #212529;
}

.stitch p {
  margin-bottom: .5rem;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

トップページ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* トップ画像  PC */
.top-image {
  background-image: url("../img/topandlogo.jpg");
  background-size: cover;
  background-position: center center;
  height: 650px;
  box-shadow: 0px 5px 6px 0px #e2e2e2;
  border-radius: 0;
}

/* トップ画像  スマホ */
.top-image1 {
  background-image: url("../img/topandlogo.jpg");
  background-size: cover;
  background-position: center center;
  height: 350px;
  box-shadow: 0px 5px 6px 0px #e2e2e2;
  border-radius: 0;
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

メディアクエリ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* 中デバイス（タブレット, 992px 未満）
============================================== */
@media screen and (max-width: 991.98px) {
  .logo-mark {
    left: 5%;
  }

  .main-txt {
    left: 5%;
  }

  .zigzag {
    margin: 10% 0;
  }

  .light-zigzag {
    margin: 10% 0 0;
  }
}

  .zigzag-green {
    margin: 10% 0;
  }

  .zigzag-blue {
    margin: 10% 0;
  }



/* END */

/* 小デバイス（横向きモバイル, 768px 未満）
============================================== */
@media screen and (max-width: 767.98px) {

  /* ロゴマークを小さく設定 */
  .logo-mark {
    height: 140px;
    width: 140px;
  }

  .logo-mark img {
    width: 50%;
  }

  .lead {
    font-size: 1rem;
  }

  .circle-badges {
    top: -10px;
    width: 100px;
    height: 100px;
  }
}

/* END */

/* 極小デバイス（縦向きモバイル, 576px 未満）
	============================================== */
@media screen and (max-width: 575.98px) {

  .display-3,
  .display-4 {
    font-size: 2rem;
  }

  .logo-mark {
    left: 5%;
    top: -10px;
  }

  .logo-mark img {
    top: 25%;
    left: 25%;
  }

  .zigzag,
  .zigzag-green,
  .zigzag-blue,
  .light-zigzag {
    margin: 15% 0;
  }

  .stitch img {
    width: 100%;
  }
}



#wrap {
    position: relative;
}
#svg-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}




@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700');



.row2{
  width:100%;
  height:80vh;
  padding:0;
  margin:0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position:relative;
}

/* -- SVG CSS -- */

.svg-separator{
  display: block;
  background: 0 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
  -webkit-transform: translateY(-100%) translateY(2px);
  transform: translateY(-100%) translateY(2px);
  width: 100%;
}
.svg-separator.bottom{
  top: auto;
  bottom: 0;
}
.sep1{
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep2 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep3 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep4 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep5 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep6 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep7 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep8 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep9 {
  transform: translateY(0%) translateY(-2px) scale(-1,-1);
  transform-origin: bottom;
}
.sep10 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep11 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}
.sep12 {
  transform: translateY(-100%) translateY(2px) scale(1,1);
  transform-origin: top;
}






/* -- Row BG Color -- */
.blue{background-color:#4A82BA;}


.osw {
  font-family: 'Oswald' , cursive;
}


/*PAGE TOPボタン追加*/
#pagetop {
 display:inline-block;
 position:fixed;
 bottom:0;
 right:0;
}
 
 
#pagetop a {
 padding:20px 10px;
 display:block;
 background:#008b8b;
 color:#fff;
 text-align:center;
}



.text { display: inline-block; }



/*FAQ*/
.qa-008 dt {
    margin-bottom: 1em;
    color: #333333;
    font-weight: 600;
}

.qa-008 dt::before,
.qa-008 dd::before {
    margin-right: .4em;
}

.qa-008 dt::before {
    content: "Q.";
}

.qa-008 dd {
    margin: 0 0 2.5em;
    padding: 1em 1.5em;
    background-color: #f2f2f2;
    color: #333333;
}

.qa-008 dd::before {
    content: "A.";
}


/* パソコンで見たときは"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; }
}




/* END */