@charset "UTF-8";

/*=================================
リセット
=================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      outline: 0;
      font-size: 100%;
      vertical-align: baseline;
      background: transparent;
      box-sizing: border-box;
}

html {
      -webkit-text-size-adjust: 100%;
      height: 100%;
}

body {
      line-height: 2;
      letter-spacing: .1rem;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
      display: block;
}

nav ul {
      list-style: none;
}

blockquote, q {
      quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
      content: '';
      content: none;
}

a {
      margin: 0;
      padding: 0;
      font-size: 100%;
      vertical-align: baseline;
      background: transparent;
}

img {
      max-width: 100%;
      vertical-align: bottom;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-touch-callout: none;
      -moz-user-select: none;
      user-select: none;
}

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

/* change border colour to suit your needs */
hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #cccccc;
      margin: 1em 0;
      padding: 0;
}

input, select {
      vertical-align: middle;
}

address {
      font-style: normal;
}

/*=================================
全体設定
=================================*/
body {
      font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
      color: #333;
      font-size: 16px;
}

.site-base {
      position: relative;
      overflow-x: hidden;
      background: url(../img/back-base.jpg);
}

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

.posi-rela {
      position: relative;
}

.posi-ab {
      position: absolute;
}

.posi-Y50 {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
}

.flex {
      display: flex;
}

.p-deco01 {
      font-size: 1.3rem;
      font-weight: bold;
}

.back-dark {
      background: rgba(199, 178, 153, 0.2);
}

.width-standard {
      max-width: 1000px;
      margin: 0 auto;
}

.w100p {
      width: 100%;
}

.p150 {
      padding: 150px 0;
}

.pb150 {
      padding: 0 0 150px;
}

.p200 {
      padding: 200px 0;
}

.flag-h {
      text-align: center;
      margin-bottom: 70px;
}

.flag-h-back {
      position: absolute;
      transform: translateY(-50%);
      left: 0;
      z-index: -1;
}

.hlag-frame-h {
      display: block;
      width: 300px;
      padding: 15px 0;
      text-align: center;
      margin: 0 auto;
      background: url(../img/flag.png) no-repeat center/contain;
}

.emoji {
      font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}

/*=================================
ボタン設定
=================================*/
.btn-square {
      padding-top: 150px;
}

.contact .btn-square {
      padding-top: 30px;
}

.btn-square a {
      background: rgba(204, 183, 157, 0.5);
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;
      max-width: 240px;
      padding: 15px 25px;
      color: #313131;
      transition: .3s ease-in-out;
      -webkit-transition: .3s ease-in-out;
      font-weight: 500;
      text-decoration: none;
}

.btn-square a::before {
      content: '';
      position: absolute;
      top: calc(50% - 2px);
      right: -2em;
      transform: translateY(calc(-50% - 2px)) rotate(30deg);
      width: 12px;
      height: 2px;
      background-color: #4d453b;
      transition: .3s;
      -webkit-transition: .3s;
}

.btn-square a::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -2em;
      transform: translateY(-50%);
      width: 60px;
      height: 2px;
      background-color: #4d453b;
      transition: .3s;
      -webkit-transition: .3s;
}

.btn-square a:hover::before,
.btn-square a:hover::after {
      right: -2.5em;
}

.btn-square a:hover {
      background: rgba(204, 183, 157, 1);
      color: #000;
}

.btn-round a {
      text-decoration: none;
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;
      max-width: 180px;
      padding: 10px 25px;
      border: 2px solid #c69c6d;
      border-radius: 50px;
      color: #FFF;
      background: #c69c6d;
      transition: .3s ease-in-out;
      -webkit-transition: .3s ease-in-out;
      font-weight: 500;
}

.btn-round a::after {
      content: "";
      position: absolute;
      top: 50%;
      bottom: 0;
      right: 1.8rem;
      font-size: 90%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: right .3s;
      -webkit-transition: .3s;
      width: 6px;
      height: 6px;
      border-top: solid 2px currentColor;
      border-right: solid 2px currentColor;
      transform: translateY(-50%) rotate(45deg);
}

.btn-round a:hover {
      background: #fff;
      color: #313131;
}

.btn-round a:hover::after {
      right: 1.4rem;
}

/*=================================
ヘッダー設定
=================================*/
.site-header {
      width: 100%;
      padding: 20px;
      position: fixed;
      background: rgba(255, 255, 255, 0.8);
      z-index: 4;
      transition: .6s;
      -webkit-transition: .6s;
      visibility: visible;
      opacity: 1;
}

.site-header--innerwith {
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.fade {
      transition: .3s;
      -webkit-transition: .3s;
      visibility: hidden;
      opacity: 0;
}

.site-header.transform {
      background: rgba(255, 255, 255, 0.95);
      padding: 15px 20px;
}

.header-logo {
      width: 20%;
      max-width: 320px;
      min-width: 250px;
      transition: .5s;
      -webkit-transition: .5s;
      position: relative;
}

.header-logo a {
      display: block;
      ;
}

.g-nav {
      width: 75%;
}

.g-nav ul {
      list-style: none;
      padding: 5px 0 0;
      display: flex;
      justify-content: flex-end;
}

.g-nav ul li {
      margin: 1%;
}

.g-nav ul li a {
      width: 100%;
      display: block;
      padding: 10px;
      text-align: center;
      text-decoration: none;
      color: #333;
      font-size: 1.1rem;
      transition: .1s ease-in-out;
      -webkit-transition: .2s ease-in-out;
}

/* 色候補 #3cb371 #ef857d  */
.g-nav ul li a:hover {
      /* color: #c49a6a; */
      opacity: 0.5;
      transition: .1s ease-in-out;
      -webkit-transition: .2s ease-in-out;
}

.g-nav ul li .mark {
      font-weight: bold;
      color: #000;
}

.hambox {
      display: none;
}

/*=================================
ハンバーガーメーニュー設定
=================================*/
/*　ハンバーガーボタン */
.hamburger {
      display: block;
      position: fixed;
      z-index: 5;
      right: calc(0% + 33px);
      top: calc(0% + 33px);
      width: 42px;
      height: 42px;
      cursor: pointer;
      text-align: center;
      transition: .6s;
      -webkit-transition: .6s;
}

.site-header.transform .hamburger {
      top: calc(0% + 25px);
}

.hamburger span {
      display: block;
      position: absolute;
      width: 30px;
      height: 2px;
      left: 6px;
      background: #555;
      transition: .5s all;
      -webkit-transition: .5s all;
}

.hamburger span:nth-child(1) {
      top: 10px;
}

.hamburger span:nth-child(2) {
      top: 20px;
}

.hamburger span:nth-child(3) {
      top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
      top: 19px;
      left: 10px;
      width: 24px;
      background: #fff;
      transform: rotate(-45deg);
}

.hamburger.active span:nth-child(2) {
      left: 60%;
      opacity: 0;
      -webkit-animation: active-btn17-bar02 .8s forwards;
      animation: active-hamburger-bar02 .8s forwards;
}

@-webkit-keyframes active-hamburger-bar02 {
      100% {
            height: 0;
      }
}

@keyframes active-hamburger-bar02 {
      100% {
            height: 0;
      }
}

.hamburger.active span:nth-child(3) {
      top: 19px;
      left: 10px;
      width: 24px;
      background: #fff;
      transform: rotate(45deg);
}

.hamburger::after {
      position: absolute;
      top: 55%;
      left: 62%;
      display: block;
      content: '';
      width: 52px;
      height: 52px;
      margin: -32px 0 0 -32px;
      border-radius: 50%;
      border: 2px solid rgba(0, 0, 0, 0);
      transition: .75s all;
      -webkit-transition: .75s all;
}

.hamburger.active::after {
      border: 2px solid #fff;
}

nav.g-nav-sp {
      position: fixed;
      z-index: 4;
      top: 0;
      left: 0;
      color: #fff;
      background: rgba(0, 0, 0, 0.7);
      text-align: center;
      line-height: 2;
      width: 100%;
      height: 100%;
      padding-top: 9%;
      opacity: 0;
      visibility: hidden;
      transition: opacity .6s ease, visibility .6s ease;
      -webkit-transition: opacity .6s ease, visibility .6s ease;
}

nav.g-nav-sp ul {
      margin: 50px auto 0;
      padding: 30px;
      width: 70%;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 5px;
}

nav.g-nav-sp ul li {
      list-style-type: none;
      padding: 0;
      width: 100%;
      transition: .4s all;
      -webkit-transition: .4s all;
      border-bottom: 1px dashed #999;
}

nav.g-nav-sp ul li:last-child {
      padding-bottom: 0;
      border-bottom: none;
}

nav.g-nav-sp ul li:hover {
      background: #ddd;
}

nav.g-nav-sp ul li a {
      display: block;
      color: #000;
      padding: 1em 0;
      text-decoration: none;
      font-size: 1.2rem;
}

/* このクラスを、jQueryで付与・削除する */
nav.g-nav-sp.active {
      opacity: 1;
      visibility: visible;
}

/*=================================
パンくず設定
=================================*/
/*=================================
inview
=================================*/
.fadeIn_up {
      opacity: 0;
      transform: translate(0, 50%);
      transition: 2s;
      -webkit-transition: 2s;
}

.fadeIn_up.is-show {
      transform: translate(0, 0);
      opacity: 1;
}

/*=================================
フッター設定
=================================*/
.site-footer {
      background: rgba(199, 178, 153, 1);
}

.site-footer .width-standard {
      padding: 30px 0 30px;
      margin: 0 auto;
}

.f-nav ul {
      width: 95%;
      margin: 0 auto 15px;
      display: flex;
      justify-content: space-between;
}

.f-nav ul li {
      padding: 10px;
}

.f-nav ul li a {
      /* display: block; */
      /* padding: 10px; */
      text-decoration: none;
      color: #333;
      font-size: 1.1rem;
      transition: .1s ease-in-out;
      -webkit-transition: .1s ease-in-out;
}

.f-nav ul li a:hover {
      text-decoration: underline;
      transition: .1s ease-in-out;
      -webkit-transition: .1s ease-in-out;
}

.info {
      width: 95%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto 50px;
      padding: 30px;
}

.info__inner {
      width: 50%;
      text-align: center;
      padding: 0 20px 0 0;
}

.info__inner--logo-pc {
      display: block;
      margin-bottom: 10px;
}

.info__inner--logo-sp {
      display: none;
}

.info__inner--tel {
      padding: 15px 0;
}

.info__inner--tel a {
      padding: 0 15px 0 25px;
      text-decoration: none;
      color: #333;
}

.info__inner--tel-01 {
      width: 25px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: -4px;
}

.info__inner--tel-02 {
      width: 25px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 2px;
}

.info__inner--mail {
	width: 23px;
      transform: translate(-5px,-6px);
}

.map {
      position: relative;
      width: 50%;
      padding-bottom: 35%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
}

.map iframe,
.map object,
.map embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}

.copyright {
      display: block;
      text-align: center;
}

/*=========================================
==========================================
タブレット用（ブレイクポイント1024px）設定
==========================================
=========================================*/
@media screen and (max-width:1024px) {

      /* -------------------トップページ-------------------*/
      .header-logo {
            width: 230px;
            min-width: 200px;
      }

      .g-nav {
            display: none;
      }

      .hambox {
            display: block;
      }

      .mv__lead .btn-square {
            padding-top: 400px;
      }

      .contact .btn-square {
            padding-top: 20px;
      }

      .btn-square a::before {
            right: -1em;
      }

      .btn-square a::after {
            right: -1em;
            width: 40px;
      }

      .f-nav ul {
            width: 100%;
            justify-content: space-around;
      }

      .f-nav ul li a {
            font-size: 0.95rem;
      }

      .f-nav, .info {
            letter-spacing: 0;
      }

      .info__inner p {
            font-size: 0.9rem;
      }

      .info__inner--tel a {
            font-size: 0.85rem;
            display: block;
            padding-bottom: 10px;
      }

      .info__inner--tel-01,
      .info__inner--tel-02 {
            width: 23px;
            top: 12px;
            left: calc(50% - 85px);
      }

      .copyright {
            font-size: 0.78rem;
      }
}

/*=========================================
==========================================
sp用（ブレイクポイント640px）設定
==========================================
=========================================*/
@media screen and (max-width:640px) {
      .site-header {
            height: 80px;
            padding: 15px;
      }

      .site-header.transform {
            padding: 8px 15px;
            height: auto;
      }

      .header-logo {
            width: 180px;
            min-width: 180px;
      }

      nav.g-nav-sp ul li a {
            display: block;
            color: #000;
            padding: 1em 0;
            text-decoration: none;
            font-size: 1rem;
      }

      .hamburger {
            right: calc(0% + 20px);
            top: calc(0% + 20px);
      }

      .site-header.transform .hamburger {
            right: calc(0% + 20px);
            top: calc(0% + 10px);
      }

      .site-footer .width-standard {
            width: 100%;
            padding: 50px 15px 30px;
      }

      .f-nav ul {
            flex-direction: column;
            margin: 0 auto 80px;
      }

      .f-nav ul li {
            padding: 3px 10px;
      }

      .info {
            width: 100%;
            flex-direction: column;
            align-items: center;
            padding: 0 10px;
      }

      .info__inner {
            width: 100%;
            padding: 0 0 20px 0;
      }

      .info__inner--logo-pc {
            display: none;
      }

      .info__inner--logo-sp {
            display: block;
            margin: 0 auto 30px;
      }

	.info__inner--mail {
		width: 20px;
		transform: translate(-13px,-5px);
	}

      .map {
            width: 100%;
            padding-bottom: 70%;
      }

      .hlag-frame-h {
            width: 230px;
      }
}