@charset "utf-8";

/*-------------------------------------------
　◆全体のスタイル調整
-------------------------------------------*/
* {
  box-sizing: border-box;
}

/*-------------------------------------------
　◆bodyの初期スタイル調整
-------------------------------------------*/
body {
  font-size: 16px;
  line-height: 1.5;
  font-family: serif, 'Noto Sans JP', 'Open Sans', sans-serif;
  font-weight: 400;
  color: #333;
  background-color: #f5f5f5;
}

/*-------------------------------------------
　◆初期スタイル調整
-------------------------------------------*/
h1, h2 {
  margin: 0;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-align: left;
}


.h3-title {
  font-family: vendetta, serif;
  font-weight: 300;
  font-style: normal;
  font-size: 18px;
  position: relative;
  background-color: #224163;
  color: #f5f5f5;
  overflow: hidden;
  padding: 10px;
}

.h3-title::before {
  background-color: #f5f5f5;
  content: '';
  display: block;
  opacity: 0.3;
  transform: rotate(-50deg);
  position: absolute;
  bottom: -10px;
  right: -330px;
  width: 500px;
  height: 500px;
}

.h3-title::after {
  background-color: #f5f5f5;
  content: '';
  display: block;
  opacity: 0.3;
  transform: rotate(-70deg);
  position: absolute;
  bottom: -100px;
  right: -500px;
  width: 500px;
  height: 500px;
}

h4 {
  margin: 0 auto;
}

p {
  margin: 0 auto;
  padding: 10px 0 0 0;
}

/* 見出しの設定　・flowページ → お問い合わせ、打ち合わせなど　・priceページ → フライヤー、リーフレットなど*/
.h4-title {
  font-size: 16px;
  letter-spacing: 0.2em;
  text-align: left;
  color: #333;
  display: inline-block; /* 文字に下線の長さを合わせる方法 */
  border-bottom: solid 5px #CECECE;
  padding: 0 0 2px 0;
}

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

a:hover,
a:focus {
  color: #333;
  text-decoration: none;
}

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

img {
  max-width: 100%;
  height: auto;
}


/*-------------------------------------------
　◆共通スタイル調整 ここから
-------------------------------------------*/
/* h2関連 news,works等の見出しの設定 */
.h2-title {
  font-family: vendetta, serif;
  font-weight: 300;
  font-style: normal;
  position: relative;
  text-transform: lowercase;
  padding: 0 0.5em;
  color: #333;
  background: transparent;
  border-left: solid 3px #dab300;
}

/*-------------------------------------------
　◆レイアウト関連
-------------------------------------------*/
/*-------------------------------------------
　.inner → 各ブロックの左右の余白を指定
-------------------------------------------*/
.inner {
  padding: 0 15px;
  margin: 0 auto;
}

/* PC用のスタイル */
/* 最大幅を1200pxに指定 */
@media screen and (min-width: 768px) {
  .inner {
    max-width: 1200px;
  }
}


/*----------------------------------------------------
　◆スマホ用の設定
---------------------------------------------------*/

@media screen and (max-width: 767px) {
  /* display: block → モバイルでは表示する */
  .sp-only {
    display: block;
  }

  /* display: none → モバイルでは非表示にする */
  .pc-only {
    display: none;
  }
}


/*----------------------------------------------------
　◆PC用の設定
---------------------------------------------------*/
/* display: none → spでは非表示にする */
@media screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }

  /* display: block → PCでは表示する */
  .pc-only {
    display: block;
  }
}


/*-------------------------------------------
　●ヘッダーブロック ここから
-------------------------------------------*/
.header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 30px 35px 20px 30px;
  background: #f5f5f5;
  z-index: 200;
}

.header-logo-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*ロゴ*/
.logo-area {
  width: 250px;
  margin: 0;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .logo-area {
    width: 200px;
    margin: 10px;
  }
}


/*-------------------------------------------
　●ここからハンバーガーメニューの設定
-------------------------------------------*/
.gnav-toggle {
  position: relative;
  margin-top: 12px;
}


/*チェックボックス等は非表示に*/
.gnav-hidden {
  display: none;
}

/*アイコンのスペース*/
#gnav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーの３本線をCSSで表現*/
#gnav-open span,
#gnav-open span::before,
#gnav-open span::after {
  content: '';
  position: absolute;
  /*線の太さ*/
  height: 3px;
  /*長さ*/
  width: 25px;
  border-radius: 3px;
  /*ゴールド*/
  background: #dab300;
  display: block;
  cursor: pointer;
}

#gnav-open span::before {
  bottom: -8px;
}

#gnav-open span::after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#gnav-close {
  display: none;
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 0;
  transition: 0.3s ease-in-out;
}

/*チェックがついたら表示させる*/
#gnav-input:checked ~ #gnav-close {
  display: block;
  opacity: 0.5;
}

#gnav-input:checked ~ #gnav-content {
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
}

/* ハンバーガーメニューの中身 */
#gnav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 70%;
  max-width: 300px;
  height: 100%;
  background: rgba(218, 179, 0, 0.8);
  transition: 0.3s ease-in-out;
  transform: translateX(-105%);
}

.gnav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  text-transform: lowercase;
}

.gnav-item {
  border-bottom: 2px dotted #f5f5f5;
  margin: 10px;
  padding-bottom: 20px;
}

.gnav-item a {
  font-family: vendetta, serif;
  font-weight: 300;
  font-style: normal;
  color: #f5f5f5;
  font-size: 20px;
  display: block;
  width: 200px;
  text-align: center;
}

/*擬似要素で1行目のスタイル指定*/
.gnav-item a::first-line {
  font-size: 16px;
  font-weight: bold;
}

.gnav-item a:hover {
  color: #333;
}

/*-------------------------------------------
　●ここまでハンバーガーメニューの設定
-------------------------------------------*/

/*-------------------------------------------
　●通常のグローバルナビの設定
-------------------------------------------*/

@media screen and (min-width: 768px) {
  .gnav-menu {
    flex-direction: row;
    padding-top: 15px;
    margin: 0;
  }

  /*ナビゲーションアイテムの設定*/
  .gnav-item {
    border-bottom: none;
    margin: 0;
    padding-bottom: 0;
  }


  .gnav-item a {
    font-family: vendetta, serif;
    font-weight: 300;
    font-style: normal;
    color: #333;
    width: 60px;
    font-size: 20px;
  }

  .gnav-item a:hover {
    color: #dab300;
  }
}

/* logoとナビの表示*/
.gnav-menu, .logo-area, .mv-title, .h2-mv-title, .mv-txt1, .mv-txt2 {
  animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*-------------------------------------------
　●メインビジュアル
-------------------------------------------*/
/* PCとスマホ共通設定 */
.mv-area {
  width: 100%;
  height: 700px;
  background-image: url(../images/top_sea.jpg);
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.mv-title {
  font-size: 36px;
  font-family: vendetta, serif;
  font-weight: 300;
  font-style: normal;
  color: #f5f5f5;
  text-shadow: 1px 1px 1px #B5B5B5;
  margin: 150px 0 0;
}

.h2-mv-title {
  font-size: 14px;
  font-family: vendetta, serif;
  font-weight: 300;
  font-style: normal;
  color: #f5f5f5;
  text-shadow: 1px 1px 1px #B5B5B5;
  margin: 0;
}

.mv-txt1, .mv-txt2 {
  font-size: 12px;
  font-family: vendetta, serif;
  font-weight: 300;
  font-style: normal;
  color: #f5f5f5;
  text-shadow: 1px 1px 1px #B5B5B5;
}

.mv-txt1 {
  margin-top: 30px;
}

.mv-txt2 {
  margin-top: 0;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .mv-area {
    width: 100%;
    height: 100vh;
  }
}


/*-------------------------------------------
　●トップのNews
-------------------------------------------*/
.top-news-area {
  padding: 40px 60px 80px;
}

.top-news li {
  display: flex;
}

.top-news-date {
  width: 20%;
  text-align: center;
  padding: 10px 10px 10px 10px;
}

.top-news-txt {
  width: auto;
  text-align: left;
  padding: 10px 10px 10px 10px;
}


/* スマホ対応 */
@media screen and (max-width: 767px) {
  .top-news-area {
    width: 100%;
    padding: 30px 0;
  }

  .top-news-date {
    width: 30%;
    font-size: 0.75rem;
  }

  .top-news-txt {
    font-size: 0.75rem;
  }
}

/*-------------------------------------------
　●トップのworks
-------------------------------------------*/
.top-works-area {
  padding: 0 60px 100px;
}

@media screen and (max-width: 767px) {
  .top-works-area {
    padding: 20px 0 40px;
  }
}

/* gridやスマホ設定はworksと同じ */

/*-------------------------------------------
　【news】
-------------------------------------------*/
.mv-news-area {
  width: 100vw;
  height: 400px;
  background-image: url(../images/news.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-position: 10% 10%;
}

.news-area {
  padding: 60px 30px 20px;
}

/*-------------------------------------------
　【works】
-------------------------------------------*/
.mv-works-area {
  width: 100vw;
  height: 400px;
  background-image: url(../images/works.jpg);
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.works-area {
  padding: 60px 30px 20px;
}

.container ul {
  list-style: none;
}

.container img {
  display: block;
  max-width: 100%;
}


.container {
  width: 100%;
  max-width: 1000px;
  margin: 20px auto; /* worksとgridの高さ調整。autoで中央配置*/
  padding: 0 30px;
}

/* Gridの設定 */
/* display: -ms-gridとdisplay: gridでCSS Gridを有効化*/
.container {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
}

/* IE11用の設定 */
/* 上から　1行目1列目、1行目2列目、1行目3列目、2行目1列目、2行目2列目、2行目3列目*/
.container .works-item:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.container .works-item:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}

.container .works-item:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.container .works-item:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.container .works-item:nth-child(5) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.container .works-item:nth-child(6) {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
}

/* スマホの設定 */
@media screen and (max-width: 767px) {
  .mv-works-area {
    width: 100vw;
    height: 40vh;
    padding: 0px 20px 20px;
  }

  .works-area {
    width: 100%;
    padding: 40px 0;
  }

  .container {
    padding: 0 20px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }


  /* IE11用の設定 */
  /* 上から　1行目1列目、1行目2列目、2行目1列目、2行目2列目、3行目1列目、3行目2列目*/
  .container .works-item:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  .container .works-item:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }

  .container .works-item:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }

  .container .works-item:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }

  .container .works-item:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }

  .container .works-item:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
}


/*-------------------------------------------
　【flow】
-------------------------------------------*/
.mv-flow-area {
  width: 100vw;
  height: 400px;
  background-image: url(../images/flow.jpg);
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.flow-area {
  padding: 60px 30px;
}

.flow-content {
  padding: 20px 30px 60px;
}

.flow-box {
  display: flex;
  justify-content: center;
}

.flow-img {
  width: 120px;
  margin-right: 10px;
  padding: 10px;
}

.flow-img img {
  min-width: 100px;
  max-width: 100%;
  vertical-align: top;
}

.flow-txt {
  width: 600px;
  margin-left: 10px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.2;
}

.flow-txt a {
  color: #dab300;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
  .mv-flow-area {
    width: 100%;
    height: 40vh;
  }

  .flow-area {
    width: 100%;
    padding: 40px 0;
  }

  .flow-content {
    padding: 20px 0 60px;
  }

  /* スマホの時は横並びを解除 */
  .flow-box {
    display: block;
  }

  .flow-img {
    width: 120px;
    margin: 0 auto;
    padding: 20px 0 10px;
  }

  .flow-img img {
    width: 18%;
  }

  .flow-txt {
    width: 100%;
    margin-left: 0;
    padding: 0 20px 20px;
    border-bottom: 1px solid #CECECE;
  }
}

/*-------------------------------------------
　【price】共通
-------------------------------------------*/
.mv-price-area {
  width: 100vw;
  height: 400px;
  background-image: url(../images/price.jpg);
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.price-area {
  padding: 60px 30px;
}

.price-content {
  padding: 20px 30px 60px;
}

.price-txt {
  margin: 0 auto;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
}

.price-box {
  padding: 10px 0 30px;
  font-size: 14px;
}

.box-txt {
  margin: 0 20px;
}

/* borderの2重線を1重線にする設定*/
table {
  border-collapse: collapse;
}

/*-------------------------------------------
   ●フライヤー 
-------------------------------------------*/
.flyer-table {
  width: 600px;
  text-align: center;
  margin: 10px 20px 10px;
}

.flyer-area th {
  color: #f5f5f5;
  border: 0.8px solid #CECECE;
  background-color: #485d7b;
  padding: 2px 10px;
}

.flyer-area td {
  border: 0.8px solid #CECECE;
  background-color: #fff;
  padding: 2px;
}

/* td 1列目のスタイル */
.flyer-area tr td:nth-of-type(1) {
  padding: 10px;
}

/* td 2列目のスタイル */
.flyer-area tr td:nth-of-type(2) {
  padding: 10px;
}

/* td 3列目のスタイル */
.flyer-area tr td:nth-of-type(3) {
  padding: 10px 30px;
}

/* td 3列目のスタイル */
.flyer-area tr td:nth-of-type(4) {
  padding: 10px 30px;
}

/*-------------------------------------------
　●リーフレット 
-------------------------------------------*/
.leaflet-area　 {
  border: 0.8px solid #CECECE;
}

.leaflet-table {
  width: 600px;
  text-align: center;
  margin: 10px 20px 10px;
}

.leaflet-area th {
  color: #f5f5f5;
  border: 0.8px solid #CECECE;
  background-color: #485d7b;
  padding: 4px;
}

.leaflet-area td {
  border: 0.8px solid #CECECE;
  background-color: #fff;
  padding: 10px;
}

.sub-title {
  font-size: 12px;
}

/*-------------------------------------------
　パンフレット
-------------------------------------------*/
.pamphlet-area {
  border: 0.8px solid #CECECE;
  background-color: beige;
}

/*-------------------------------------------
　priceのスマホ設定
-------------------------------------------*/
@media screen and (max-width: 767px) {
  .mv-price-area {
    width: 100%;
    height: 40vh;
  }

  /* width100%を入力するとテーブルが崩れる */
  .price-area {
    padding: 40px 0;
  }

  .price-content {
    padding: 20px 0 60px;
  }

  .price-txt {
    font-size: 0.75rem;
    padding: 0;
  }

  .price-box {
    padding: 0 0 30px;
  }


  /* テーブルが横にはみ出ないようにする設定 */
  .flyer-table {
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
    margin: 10px 0;
  }

  .flyer-table thead th {
    display: none;
  }

  .flyer-table tbody th, td {
    width: 100%;
    display: block;
    padding: 4px 12px;
  }

  .flyer-table tbody td {
    text-align: center;
  }

  .flyer-table td[data-title]::before {
    color: #666;
    content: attr(data-title) " :";
    font-weight: bold;
    padding: 0 10px 0 0;
    display: inline;
  }

  .leaflet-table {
    width: 100%;
    margin: 10px 0;
  }
}

/*-------------------------------------------
　about
-------------------------------------------*/
.mv-about-area {
  width: 100vw;
  height: 400px;
  background-image: url(../images/about.jpg);
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.about-area {
  padding: 60px 30px;
  font-size: 14px;
}

/*-------------------------------------------
　about　会社概要
-------------------------------------------*/
.summary-area {
  padding: 10px 30px;
}

/* 会社概要エリア  */
/* 幅を指定しないので、全体に広がっている  */
.summary-wrap {
}

/* list-style-position: inside → リストマークを内側に配置  */
/* 下線のcssは細い調整が必要のため、liではなく、itemとtxtに記載 */
.summary-wrap li {
  display: flex;
  justify-content: center;
  line-height: 2rem;
}

.summary-item {
  width: 120px;
  text-align: left;
  padding: 10px 10px 10px 12px;
  border-bottom: 0.8px solid #CECECE;
  list-style-position: inside;
}

.summary-txt {
  width: 400px;
  text-align: left;
  padding: 10px 10px 10px 12px;
  border-bottom: 0.8px solid #CECECE;
  list-style-position: inside;
}

/*-------------------------------------------
　about　プロフィールエリア
-------------------------------------------*/
/* プロフィールエリア全体  */
/* display: flexは親要素に設定する*/
.profile-area {
  padding: 10px 30px;
  display: flex;
  justify-content: center;
}

/* プロフィール写真のまわり */
.img-wrap {
  width: 200px;
  padding: 10px;
}

/* プロフィール写真自体の設定  */
.profile-area img {
  max-width: 180px;
  max-height: 180px;
  margin: 0 auto;
  border-radius: 40% 50% 20% 40% / 60% 40% 60% 40%;
  overflow: hidden;
}

.profile-area {
  padding: 30px 0 0;
}

/* 下線のcssは細い調整が必要のため、liではなく、itemとtxtに記載 */
.profile-wrap li {
  display: flex;
  line-height: 2rem;
}

.profile-item0 {
  width: 120px;
  text-align: left;
  padding: 10px 10px 10px 12px;
  list-style-position: inside;
}

.profile-item1 {
  width: 120px;
  padding: 10px;
  border-style: none;
}

.profile-item2 {
  width: 120px;
  text-align: left;
  padding: 10px;
  border-bottom: 0.8px solid #CECECE;
}

.profile-txt {
  width: 480px;
  text-align: left;
  padding: 10px 10px 10px 12px;
  border-bottom: 0.8px solid #CECECE;
  list-style-position: inside;
}

/*-------------------------------------------
　about　スマホ対応
-------------------------------------------*/
@media screen and (max-width: 767px) {
  .mv-about-area {
    width: 100%;
    height: 40vh;
  }

  .about-area {
    padding: 40px 0;
  }

  .summary-area {
    padding: 0;
  }

  .summary-wrap {
    width: 100%;
    padding: 10px 20px 20px;
  }

  .summary-wrap li {
    display: block;
  }

  .summary-item {
    width: 100%;
    text-align: center;
    padding: 8px;
    background-color: #224163;
    color: #f5f5f5;
  }

  .summary-txt {
    width: 100%;
    text-align: center;
    padding: 8px;
    border-bottom: none;
    line-height: 2;
  }

  /* プロフィール写真をセンターに配置  */
  .img-wrap {
    margin: 0 auto;
  }

  .profile-area {
    display: block;
    padding: 20px 0 10px;
  }

  .profile-wrap {
    width: 100%;
    padding: 0 20px 20px;
  }

  .profile-wrap li {
    display: block;
  }

  .profile-item0 {
    width: 100%;
    text-align: center;
    padding: 8px;
    background-color: #224163;
    color: #f5f5f5;
  }

  .profile-item1 {
    display: none;
  }

  .profile-item2 {
    width: 100%;
    text-align: center;
    padding: 8px;
    background-color: #224163;
    color: #f5f5f5;
    border-bottom: none;
  }

  .profile-txt {
    width: 100%;
    text-align: center;
    padding: 8px;
    border-bottom: none;
    line-height: 2;
  }
}

/*-------------------------------------------
　contact
-------------------------------------------*/
.mv-contact-area {
  width: 100vw;
  height: 400px;
  background-image: url(../images/contact.jpg);
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* 問い合わせフォームのレイアウト */
.contact-area {
  background-color: #f5f5f5;
  padding: 60px 30px;
}

.info-txt {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  font-size: 1rem;
  padding: 20px 10px 30px;
}

.info-txt.complete {
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* 小さいスクリーンでは幅いっぱいに表示し、大きいスクリーンでは固定幅にする時、通常はwidthとmax-widthを使用 */
/* max-width: 800px → 画面の大きなPCで見ても800pxを超えないようにする */
form {
  width: 90%;
  max-width: 800px;
  margin: 0 auto 40px;
  background: #fff;
  padding: 40px 0;
}

dl {
  margin: 0 auto;
  width: 510px;
}

/* ddの前の隙間を無くす調整 */
dt, dd {
  margin: 0;
  padding: 0;
}

/*  display:flex → dtタグとddタグを横並びにする */
/*  justify-content: center → アイテムの中央寄せ */
/*  margin-bottom → 設問ごとに余白を設ける */
.form-item {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

dt {
  width: 210px;
}

dd {
  width: 300px;
}

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  display: block;
  width: 100%;
  font-size: 16px;
}

/*  送信ボタンを中央に */
.form-submit {
  text-align: center;
}

/* 必須の設定 */
span {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #CB4042;
}

/* エラーテキスト */
.error-txt {
  font-size: 12px;
  color: #CB4042;
  margin: 5px 0 0 5px;
}

.error-message {
  color: #CB4042;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

/* スマホ用の設定 */
/* dt{width: 100%;}とdd{width: 100%;}はdl{width: 90%;}に対しての100% */
/* display: blockで横並びを解除 */
@media screen and (max-width: 767px) {
  form {
    padding: 20px 0;
  }

  dl {
    width: 90%;
  }

  .form-item {
    display: block;
  }

  dt {
    width: 100%;
  }

  dd {
    width: 100%;
  }

  dt {
    margin-bottom: 10px;
  }

  input[type="submit"] {
    padding: 1em;
    margin: 5px auto;
  }

  .mv-contact-area {
    width: 100vw;
    height: 40vh;
  }

  .contact-area {
    padding: 40px 0;
  }

  .info-txt {
    font-size: 0.75rem;
  }
}

/* PCの設定に戻る */
dt, dd, select, input, textarea {
  color: #666;
}

/*入力欄の枠を設定*/
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  border: 1px solid #ccc;
  background: #fff;
  padding: 0.3em;
}

/* プルダウン部分のデザイン設定 */
select {
  height: 2em;
}


/* お問い合わせ内容の入力フォーム部分の設定 */
/* min-height → 高さの最小値を指定する。プロパティの使用値が、min-heightで指定した値を下回ることを防ぐ。*/
textarea {
  min-height: 150px;
}

/* 送信ボタンのデザイン */
input[type="submit"] {
  background: #e6cc4e;
  width: 200px;
  padding: 0.5em;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 4px;
}

/* ホバーの指定 */
input[type="submit"]:hover {
  background: #dab300;
}

/*-------------------------------------------
　フッター
-------------------------------------------*/
.footer-area {
  background-color: #224163;
  text-align: center;
  padding: 50px 60px;
}

.foot-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 500px;
}

/* リンクの範囲を広げる */
.foot-nav li a {
  padding: 10px 22px;
}

.fnav-item a {
  font-family: vendetta, serif;
  font-weight: 300;
  font-style: normal;
  font-size: 18px;
  color: #f5f5f5;
}

.fnav-item a:hover {
  color: #dab300;
}

.footer-logo {
  align-items: center;
  margin: 0 auto;
  padding: 20px;
  width: 200px;
}

.foot-area_copy {
  color: #f5f5f5;
  font-size: 12px;
  display: inline-block;
  width: 100%;
  padding: 30px 0 0 0;
}

/*スマホ用設定*/
@media screen and (max-width: 767px) {
  .footer-area {
    padding: 30px 0;
  }

  .foot-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .foot-nav li {
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid #193a5b;
  }
}