/* base.css */
@charset "utf-8";

/* ---------- 全体の基本設定 ---------- */

/* 基本変数設定 */

:root {

  /* フォントサイズ変数設定 */

  --base-font-size-sp: 15px;
  --base-font-size-pc: 15px;

  /* 1920pxの15pxは、0.78vw */

  /* 色変数設定 */

  /* メインカラー */
  --main-color: #4a488e; /* 紺藍 */
  --main-color-hex: 74,72,142; /* 紺藍（16進数指定） */

  --main-color-2: #5654a2; /* 桔梗色 */
  --main-color-2-hex: 86,84,162; /* 桔梗色（16進数指定） */

  --main-color-3: #706caa; /* 藤納戸 */
  --main-color-3-hex: 112,108,170; /* 藤納戸（16進数指定） */

  /* 背景色 */
  --main-bg-color: #ffffff; /* 白 */
  --main-bg-color-2: #f3f3f2; /* 白練 */
  --main-bg-color-3: #0d0015; /* 漆黒 */

  --main-bg-color-4: #fffffc; /* 胡粉色 */

  /* 文字色 */
/*  --base-font-color: #222222;*/ /* 黒2 */
/*  --base-font-color-hex: 34,34,34;*/ /* 黒2（16進数指定） */

  --base-font-color: #2e2930; /* 紫黒 */
  --base-font-color-hex: 46,41,48; /* 紫黒（16進数指定） */

  --base-font-color-2: #383c3c; /* 羊羹色 */
  --base-font-color-hex-2: 56,60,60; /* 羊羹色（16進数指定） */

  --base-font-color-3: #595857; /* 墨 */
  --base-font-color-hex-3: 89,88,87; /* 墨（16進数指定） */

  /* 文字色（反転） */
  --reverse-font-color: #ffffff; /* 白 */

  /* 文字色（強調） */
  --point-font-color-1: #1e50a2; /* 瑠璃色 */
  --point-font-color-2: #a22041; /* 真紅 */
  --point-font-color-3: #316745; /* 千歳緑 */

  /* 文字色（特殊） */
  --caution-font-color: #C85554; /* 銀朱 */
  --caution-font-color-hex: 200,85,84; /* 銀朱（16進数指定） */

  --confirm-font-color: #4D5AAF; /* 紺桔梗 */
  --confirm-font-color-hex: 77,90,175; /* 紺桔梗（16進数指定） */

  --error-font-color: #E2041B; /* 猩々緋 */
  --error-font-color-hex: 226,4,27; /* 猩々緋（16進数指定） */


  /* 区切り線（コンテンツ） */
  --main-border-color: #dddddd; /* 区切り線 */
  --main-border-color-2: #cccccc; /* 区切り線２ */
  --main-border-color-3: #c2c2c2; /* 区切り線３ */

  /* 区切り線（項目） */
  --input-border-color: #c2c2c2; /* 区切り線 */
  --input-border-color-hex: 195,195,195; /* 区切り線（16進数指定） */
}


/* ---------- 全タグ基本設定 ---------- */

/* ベースフォントサイズ設定 */
/* スマホ版 */
@media screen and (max-width: 960px) {html {font-size: var(--base-font-size-sp);}}
/* PC版 */
@media screen and (min-width: 960px) {html {font-size: var(--base-font-size-pc);}}


* {
  margin: 0;
  padding: 0;
  color: var(--base-font-color);
  font-family: "Hiragino Kaku Gothic ProN", sans-serif; /* 総称フォントは、括らない。 */
}


/* タグ基本設定 */
/* --- タグ基本設定（aタグ） --- */
a {
  color: var(--main-color-2);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: 1px dotted #cccccc;
}

/* タグ設定（aタグ）下線逆設定 */
a.under_line {
  text-decoration: underline;
}

a.under_line:hover {
  text-decoration: none;
}

/* タグ設定（aタグ）色逆設定 */
a.reverse {
  color: var(--reverse-font-color);
}

/* --- タグ基本設定（imgタグ） --- */
img {vertical-align: top;}

/* --- タグ基本設定（ulタグ） --- */
ul {list-style-type: none;}

/* --- 箇条書き（ulタグ） --- */
ul.item {
  list-style-type: katakana-iroha;
  padding: 0.5em 2em;
}

ul.item li {}

/* --- 横並び（ulタグ） --- */
ul.line li {display: inline-block;}

/* スマホ版対応（スマホは縦並び） */
@media screen and (max-width: 960px) {ul.line li {display: block;}}

/* タグ設定（dlタグ） */
/* 下線のみ設定 */
dl {}
dl dt {border-bottom: solid 1px var(--main-border-color);}
dl dd {border-bottom: solid 1px var(--main-border-color);}

/* プレフォーマットテキスト（そのまま表示）の設定 */
.pre_text {
 white-space: pre-wrap;
}


/* ---------- センター寄せ ----------  */

div.center {text-align: center;}
ul.center {text-align: center;}
li.center {text-align: center;}
li.left {text-align: left;}

/* ---------- セクション設定 ----------  */
section {
  margin: 0em auto;
  width: 78%;
  min-width: 1000px;
}

section.right_side {
  margin: 0em 0em 0em auto;
  width: 89%;
  min-width: 1100px;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {
  section {width: 100%; min-width:auto;}
  section.right_side {width: 100%; min-width:auto;}
}


/* ---------- ヘッダの基本設定 ---------- */
header {
  border-top: solid 1px var(--main-color);
}

header section {
  height: 6em;
  display: flex;
  justify-content: space-between;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {header section {height: 3.6em;}}

header section div.logo {
  height: 100%;
  display: flex;
  align-items: center; /* メニューが真ん中になる。下寄せは、end。 */
}

header section div.logo a {
  color: var(--base-font-color);
  font-size:1.4rem;
  font-weight:bold;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {header section div.logo a {padding-left: 0.5em;}}

header section div.logo a:hover {
  text-decoration:none;
}

header section img.logo {
  width: 220px;
  /* aタグでくくると下にスペースができる（vertical-align: baseline;がデフォルトであるかららしい）ため、vertical-align: middle;を設定 */
  vertical-align: middle;
}

header section div.menu {
}

header section div.menu_sp {display: none;}

/* スマホ版対応 */
@media screen and (max-width: 960px) {
  header section div.menu {display: none;}
  header section div.menu_sp {display: inline-block;}
}

/* ---------- ヘッダメニュー設定 ---------- */
header section div.menu ul {
  height: 100%;
  display: flex;
  align-items: center; /* メニューが真ん中になる。下寄せは、end。 */
}

header section div.menu ul li {
  display: inline-block;
  padding: 1em 1em;
}

header section div.menu ul li a {
  color: var(--base-font-color);
}

header section div.menu ul li a:hover {
  text-decoration:none;
  border-bottom: solid 2px var(--main-color-2);
}

/* 電話番号設定 */
header section div.menu ul li.tel {
  padding: 1em 0em 1em 3em;
}

header section div.menu ul li.tel div.msg {
  font-size: 0.8rem;
}

header section div.menu ul li.tel div.img {
   display:flex;
   align-items: center;
}

header section div.menu ul li.tel div.img img {
  margin-right: 10px;
  width: 36px;
}

header section div.menu ul li.tel div.img div.number {
  padding-top: 5px;
  font-size: 1.6rem;
}

/* ---------- ヘッダメニュー設定（スマートフォン） ---------- */
header section div.menu_sp ul {
  height: 100%;
  display: flex;
  align-items: center; /* メニューが真ん中になる。下寄せは、end。 */
}

header section div.menu_sp ul li {display: inline-block;}
header section div.menu_sp ul li#menu_sp_close {display: none;}

header section div.menu_sp ul li img {
  display: inherit;
  height: 3.6em;
}

header section div.menu_sp ul li a.menu {
  display: inherit;
  width: 1.8em;
  font-size: 2rem;
  text-align: center;
  color: var(--base-font-color);
}

header section div.menu_sp ul li a.menu:hover {text-decoration: none;}

/* ---------- ヘッダメニューリスト設定（スマートフォン） ---------- */

/* スマホ版メニューリスト */
div.menu_sp dl#menu_list_sp {
  top: calc(3.6em + 1px);
  left: 0;
  width: 100%;
  z-index: 3;
  display: none;
  position: absolute;
  background-color: var(--main-bg-color);
  border-top: solid 1px rgba(var(--main-color-hex), 0.3);
}

div.menu_sp dl#menu_list_sp dt {
/*    display: inline-block;*/
/*    width: inherit;*/
/*    text-align: right;*/
/*    padding-right: 56px;*/
  background-color: rgba(var(--main-color-hex), 0.1);
  border-bottom: solid 1px rgba(var(--main-color-hex), 0.3);
}

div.menu_sp dl#menu_list_sp dt a {
  width: inherit;
  display: inherit;
  color: var(--base-font-color-3);
  padding: 0.8em 0 0.8em 1em;
}

/* スマホ版メニューリスト中段 */
div.menu_sp dl#menu_list_sp dd {display: none;}

div.menu_sp dl#menu_list_sp dd ul.sub_menu {display: block;}

div.menu_sp dl#menu_list_sp dd ul.sub_menu li {
  width: 100%;
  background-color: rgba(var(--main-color-hex), 0.18);
  border-bottom: solid 1px rgba(var(--main-color-hex), 0.3);
}

div.menu_sp dl#menu_list_sp dd ul.sub_menu li a {
  width: inherit;
  display: inherit;
  color: var(--base-font-color-3);
  padding: 0.8em 0 0.8em 3em;
}


/* ---------- フッタの基本設定 ---------- */

footer {
  width: 100%;
/*  height: 3em;*/
  padding: 1em 0em 2em 0em;
  margin-top: 4em;
  border-top: solid 1px var(--main-border-color);
}

footer section {
  color: var(--base-font-color-3);
  vertical-align: middle;
  font-size: 0.8em;
  text-align: right;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {footer section {text-align: center;}}

/* ---------- 見出しの基本設定 ---------- */

/* 大見出し */
section.h1 {
  display: flex;
  justify-content: space-between;
}

h1.title {
  padding: 0.3em 2em 0.3em 6em;
/*  width: 10em;*/
  margin: 0.8em 0em 1.0em 0em;
  font-size: 1.8rem;
  color: var(--base-font-color-2);
  font-weight: bold;
  text-align: right;
  border-bottom: dashed 1px var(--main-border-color);
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {
  h1.title {
    padding: 0.3em 2em 0.3em 3em;
    font-size: 1.4rem;
  }
}

/* 中見出し */
h2.title {
  padding: 0.8em 0em 0.2em 0em;
  border-bottom: solid 1px var(--main-border-color);
  font-size: 1.2rem;
  color: var(--base-font-color-2);
  font-weight: bold;
  vertical-align: middle;
}

/* 中見出しバー */
h2.title div.bar {
  padding: 0.3em 0 0.2em 0;
  margin: 0 0.7em 0 0.3em;
  display: inline-block;
  border-right: solid 4px var(--main-color);
}

/* 小見出し */
h3.title {
  width: 30em;
  padding: 0.8em 1em 0.2em 1.2em;
  font-size: 1.1rem;
  color: var(--base-font-color-2);
  font-weight: normal;
  border-bottom: thick double var(--main-color-2);
}

/* 小見出し用コンテンツ */
div.sub_content {
  padding: 1em 2em;
}

/* ---------- コンテンツの基本設定 ---------- */
section div.content {
  padding: 1.5em 1.5em;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {section div.content {padding: 1.5em 0;}}


/* ---------- セクションタブメニュー（見出しの下のメニュー）の基本設定 ---------- */
section.sub_menu {
/*  height: 80px;*/
  text-align: center;
  padding-bottom: 1.4em;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {section.sub_menu {display: none;}}

section.sub_menu a.menu_item {
  padding: 0em 1em;
  margin: 0.3em 2em;
  color: var(--main-font-color);
}

section.sub_menu a.active {
/*  color: #ffffff;
  background-color: #483d8b;
  border: solid 1px var(--main-border-color);*/
  border-bottom: solid 2px var(--main-color);
}

section.sub_menu a.menu_item:hover {
  text-decoration:none;
  border-bottom: solid 2px var(--main-color);
}

/* 区切り線設定 */
div.partline {
  display: inline-block;
  width: 0em;
  height: 70%;
  border-right: solid 1px var(--main-border-color);
}

/* ---------- リンクボタンの基本設定 ---------- */
a.button {
  width: 12em;
/*  font-size: 1.2em;*/
  padding: 0.8em;
  display: inline-block;
  text-align: center;
  border-radius: 10px;
/*  font-weight: bold;*/
  font-size: clamp(0.4rem, calc(0.6vw + 0.4rem), 1.2rem);
}

a.button:hover {
  text-decoration: none;
  cursor: pointer;
}

a.b_main {
  background-color: var(--main-color);
  color: var(--reverse-font-color);
}

/*
a.b_main:hover {
  background-color: var(--main-bg-color);
  color: var(--main-color);
}
*/

a.b_sub {
  background-color: var(--main-bg-color-4);
  color: var(--main-color);
}

a.b_sub_margin {margin-left: 1em;}

/*
a.b_sub:hover {
  background-color: var(--main-color-3);
  color: var(--reverse-font-color);
}
*/

/* スマホ版対応 */
@media screen and (max-width: 960px) {

  a.button {
    padding: 0.5em; font-size: 1rem;
  }

  a.b_sub_margin {
    margin-top: 1em; margin-left: 0;
  }
}


/* ---------- リンクボタン２の基本設定 ---------- */
a.button_2 {
  width: 12em;
/*  font-size: 1em;*/
  font-size: clamp(0.4rem, calc(0.5vw + 0.4rem), 1.0rem);
  padding: 0.7em;
  display: inline-block;
  text-align: center;
  border-radius: 8px;
/*  font-weight: bold;*/
}

a.button_2:hover {
  text-decoration: underline;
  cursor: pointer;
}

a.b_main_2 {
  background-color: var(--main-color-2);
  color: var(--reverse-font-color);
}

a.b_sub_2 {
  background-color: var(--main-bg-color-4);
  color: var(--main-color);
}

a.b_sub_2_margin {margin-left: 1em;}

/* スマホ版対応 */
@media screen and (max-width: 960px) {

  a.button_2 {
    padding: 0.5em; font-size: 1rem;
  }

  a.b_sub_2_margin {
    margin-top: 1em; margin-left: 0;
  }
}


/* ---------- リンクボタン３の基本設定 ---------- */
a.button_3 {
/*  width: 12em;*/
/*  font-size: 1em;*/
  font-size: clamp(0.4rem, calc(0.5vw + 0.4rem), 1.0rem);
  padding: 0.7em 1.8em;
  display: inline-block;
  text-align: center;
  border-radius: 8px;
/*  font-weight: bold;*/
  background-color: var(--main-color-2);
  color: var(--reverse-font-color);
}

a.button_3:hover {
  text-decoration: underline;
  cursor: pointer;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {a.button_3 {padding: 0.5em 1.2em; font-size: 1rem;}}


/* ---------- 項目・データ横並び説明リスト ---------- */
/* 項目13文字固定、スペース1文字の説明リスト */
/* ddタグは、dtタグの文字サイズ+左右スペースサイズをcalcで引く。 */
/* ddタグ自身の左右スペースサイズも引く */

dl.flex_wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

dl.flex_wrap dt {
  width: 13em;
  padding: 1em;
}

dl.flex_wrap dd {
  width: calc(100% - 15em - 2em); /* dt分（左右のpaddingを含める）と左右のpadding分引く */
  padding: 1em;
}

/* ---------- その他 ---------- */
ul.logo_none {display: none;}

ul.logo {
  padding: 2em 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

ul.logo li {padding: 0 1.6em;}

/* uberロゴ設定 */
img.uber {
  width: 140px;
  border-radius: 2px;
}

/* GOロゴ設定 */
img.GO {
  width: 123px;
}

a.go {
  display: inline-block;
  padding: 25px 0;
  text-align: center;
  width: 140px;
  background-color: #2a4073; /* 深縹（こきはなだ） */
  color: var(--reverse-font-color);
  border-radius: 8px;
  font-size: 50px;
  font-weight: bold;
}

a.go:hover {
  text-decoration: none;
}

/* スマホ版対応 */
@media screen and (max-width: 960px) {
  ul.logo {display: block; text-align: center;}
  ul.logo li {padding: 1em 0;}
}

/* ---------- その他（野口・片岡ロゴ） ---------- */

div.pc_disp {display: block;}
div.sp_disp {display: none;}

/* スマホ版対応 */
@media screen and (max-width: 960px) {
  div.pc_disp {display: none;}
  div.sp_disp {display: block;}
}