@charset "utf-8";

/* ========================================
   共通CSS - 全ページ共通のベーススタイル
   ======================================== */

/* CSSカスタムプロパティ */
:root{
  --color-primary: #1f7a8c;
  --color-dark: #022b3a;
  --color-light: #bfdbf7;
  --color-bg: #e1e5f2;
  --color-white: #ffffff;
  --color-black: #000000;       /* 純黒テキスト・ボーダー用 */
  --color-shadow: gray;         /* ボックスシャドウ用 */
  --color-danger: red;          /* 警告・エラー表示用 */
  --color-mandatory: orange;    /* 必須項目バッジ用 */
  --color-form-bg: rgb(228, 228, 228); /* フォームコンテナ背景用 */
  --color-highlight: #FFED00;   /* テキストハイライト用 */
}

/* リンクリセット */
a{
  text-decoration: none;
  color: var(--color-white);
}

/* ====== デスクトップ (min-width:1000px) ====== */
@media(min-width:1000px){
  body{
    font-family: '游ゴシック';
  }

  /* ヘッダー共通（background-imageは各ページで指定） */
  header{
    background-size: cover;
    width: 100%;
    height: 100vh;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
  }

  /* 右上お問い合わせ */
  .contactTopOut{
    display: flex;
    margin-right: 15px;
  }
  .contactTopOut img{
    height: 80px;
    width: 80px;
    margin-top: 5px;
    margin-left: 10px;
  }

  .contactTop{
    margin-left: auto;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-family: '游明朝';
  }
  .contactTop :nth-child(2){
    border: solid 1px white;
    padding: 10px 5px 10px 5px;
    margin-left: 20px;
  }
  .contactTop a{
    text-align: center;
  }
  .contactTop span{
    display: block;
    font-size: 10px;
    font-weight: 900;
  }

  /* h1 共通（font-size/letter-spacingは各ページで上書き可） */
  h1{
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: bold;
    font-family: '游明朝';
    font-size: 9vw;
  }

  /* スクロール表示 */
  .scroll{
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    font-size: 30px;
    font-weight: 900;
    font-family: '游明朝';
  }
  .scroll span{
    font-size: 20px;
  }

  /* 上部メニュー */
  .menu{
    height: 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-family: '游明朝';
  }
  .menu ul{
    display: flex;
  }
  .menu li{
    font-size: 15px;
    margin-right: 20px;
  }
  /* ナビリンクは親liのcolorを継承 */
  .menu li a{
    color: inherit;
  }
}

/* ====== タブレット以上 (min-width:768px) ====== */
@media(min-width:768px){
  /* お問い合わせタイトル共通（サブページ用） */
  .contactTitle{
    position: relative;
    display: inline-block;
    padding: 80px 0 80px 90px;
    font-size: 40px;
    color: var(--color-dark);
    font-weight: 500;
    font-family: '游明朝';
  }
  .contactTitle:before{
    content: '';
    position: absolute;
    top: calc(50% - 3px);
    display: inline-block;
    width: 85px;
    height: 1.5px;
    background-color: var(--color-dark);
  }
  .contactTitle:before{
    left: 0;
  }

  /* お問い合わせセクション */
  .contact{
    color: var(--color-dark);
    margin: 50px auto 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .contactInner{
    text-align: center;
  }
  .contactInner span{
    font-size: 80px;
    font-family: '游明朝';
  }
  .contactInner p{
    font-size: 20px;
    font-weight: 500;
  }
  .contactInner img{
    width: 60px;
    height: 60px;
  }

  .contactItem{
    color: var(--color-white);
    background-color: var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 70px;
    margin: 20px 0 20px 0;
    box-shadow: -10px 10px var(--color-light);
    font-size: 15px;
  }
  .con1{
    text-align: center;
  }
  .con2{
    margin-left: auto;
    margin-right: 15px;
  }
  .contactItem:nth-of-type(1){
    margin-top: 80px;
  }

  /* 下部ナビ */
  .navBarBottom{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    background-color: var(--color-light);
    font-family: '游明朝';
  }
  .navBarBottom li{
    margin: 0 10px;
    color: var(--color-black);
    font-weight: 500;
  }
  /* ナビリンクは親liのcolorを継承 */
  .navBarBottom li a{
    color: inherit;
  }

  /* フッター */
  footer{
    background-color: var(--color-dark);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  small{
    color: var(--color-white);
  }
}