@charset "utf-8";
/* ====================================================
■ 全ページ 共通のタグ（html、body、a、img など）に対しての基本設定
======================================================= */

html {
  font-size: 100%;
}
body {
  color: #000;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 400;
}
img {
  max-width: 100%;
  vertical-align: bottom; /** 行全体の下端に要素と子孫要素の下端を揃える  「vertical」は垂直位置 「align」は並べる */
}
li {
  list-style: none;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  opacity: 0.7;
}
/* ▼ 横幅設定用のクラス   */
.wrapper {
  margin: 0 auto;
  max-width: 940px;
  padding: 0 20px;
}
.wrapper-1080 {
  margin: 0 auto;
  max-width: 1120px;
  padding: 0 20px;
}
/* ▼ セクションタイトル PC */
.section-title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 80px;
  /** ↓テキストの下に疑似要素で線を引くため「position: relative;」を設定して疑似要素の基準値とする */
  position: relative;
}
/* セクションタイトルの疑似要素。下に線を引く */
.section-title::after {
  content: ""; /** 疑似要素を表示させるにはcontentの指定が必須【空文字・文字列・記号】 */
  /* 空文字""でもＯＫ。主に装飾だけ表示したいときに使う。 */
  width: 80px;
  height: 2px;
  background-color: #000;
  position: absolute; /** ↓線の位置を調整 */
  bottom: -20px; /** 下に「20px」ずらす */
  /* 下の3行で中央配置にする */
  left: 0;
  right: 0;
  margin: 0 auto;
}
/*  =======  ◆ 下層ページのページ ヘッダー部  ===========  */
.page-header {
  background-color: #ffed58;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  padding: 60px 0 100px;
  text-align: center;
}
.page-header .page-title .ja {
  display: block; /** span は、インライン要素のため「block」に設定 */
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 5px; /** 「.en」との余白 */
}
.page-header .page-title .en {
  display: block;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.1em; /** 文字の間隔を少しだけ広げる。一般的に単位は「em」を使う */
}
/*  ===  ◆ 下層ページのページヘッダー部下のテキスト  ===========  */
.page-head-text {
  text-align: center;
  padding: 50px 0;
}
.page-head-text .title {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.8;
  margin-bottom: 30px;
}
.page-head-text .text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
}
/* -- マーカー -- */
.highlight {
  /* ↓上半分は透明、下半分は黄色 */
  background: linear-gradient(transparent 50%, #fff390 50%);
  font-weight: 700;
}
/*  =========================================
■ Header （全ページ共通）
============================================  */
/** ロゴとグローバルナビゲーションを「縦中央揃え」の横並びで両端に配置 */
#header {
  width: 100%;
  height: 80px;
  display: flex; /** 子要素の「ロゴ」と「ナビメニュー」を横並び */
  align-items: center; /** 縦中央揃え */
  justify-content: space-between; /** 子要素の「ロゴ」と「ナビメニュー」を両端に配置 */
  background-color: #fff;
  padding: 0 20px; /** 両端に余白 */
}
#header .logo {
  width: 100%;
  max-width: 250px; /** 本来は150px 練習用にしたため拡張 */
}
#headeer .logo a {
  display: block;
}
#header .navi .menu {
  display: flex; /** 子要素の「li」を横並び */
  align-items: center; /** 縦軸中央 */
}
#header .navi .menu li {
  font-size: 14px;
  margin-left: 40px;
}
/*-------------------------------------------
■ Contact 問い合わせページ以外前頁共通
  h2 は、「.section-title」で指定済（40行付近）
-------------------------------------------*/
.contact {
  background-color: #ffed58;
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
  padding: 100px 0 60px;
}
.contact .inner {
  text-align: center;
}
.contact .text {
  line-height: 1.6;
  margin-bottom: 40px;
}
.contact .btn {
  background-color: #fff;
  border: solid 1px #707070;
  display: inline-block;
  font-size: 14px;
  padding: 20px 60px;
}

/*-------------------------------------------
 ■ Footer （全ページ共通）
-------------------------------------------*/
#footer {
  border-top: solid 1px #707070;
  padding: 40px 0 20px; /** 値が3つの場合、上 左右 下 となる */
}
#footer .inner {
  display: flex; /** 子要素の並びを自由に（横並び） */
  align-items: center; /** 縦軸の並びを中央に */
  justify-content: space-between; /** 左右両端揃え */
  margin-bottom: 60px; /** 「#footer」の外側の下の余白 */
}
#footer .logo {
  max-width: 130px;
}
/* menu の子要素「li」を横並びにして、縦軸中央 */
#footer .menu {
  display: flex;
  align-items: center;
}
#footer .menu li {
  font-size: 14px;
  margin-left: 40px;
  /** ↓各テキストの横に疑似要素で斜め線を引くための基準値にする */
  position: relative;
}
/* 疑似要素で斜め線を引く */
#footer .menu li::after {
  content: ""; /** 疑似要素の必須項目 */
  width: 1px;
  height: 16px;
  background-color: #000;
  transform: rotate(30deg); /** 30度傾ける */
  position: absolute; /** 「#footer .menu li」を基準に、↓ **/
  top: 3px; /** 上から「3px」下に配置 */
  right: -20px; /** 「トップ」の右横「-20px」の位置に配置 書籍 P.163 参照 */
}
/* ↓最後のメニューのテキストの右側の斜め線は不要なので、
「content: none;」で疑似要素をリセット */
#footer .menu li:last-child::after {
  content: none;
}
#footer .copyright {
  text-align: center;
  font-size: 12px;
}

/*  ========================================
 ■ スマホ 全体
============================================= */
/* 「 @media (width <= 767px) {} 」でも良いが、copilot によると、
  「Safari（特にiOS）や古いブラウザでは未対応の可能性あり、」
  「一部の構文は変更される可能性がある」 ので、推奨されていないとのこと。
  より互換性の高い max-width メディアクエリを使用する方が安全です。  */

/** 今回は、ヘッダーを固定してスクロール時でも元の位置で表示されたまま */
@media screen and (max-width: 767px) {
  /** ↓ スマホ表示「767px 以下」の場合、2つ目の「<br class="pc">」タグは無効（非表示）にするためのクラス。
  なので、「.sp」の方がわかりやすいと思われるが、書籍で「.pc」となっていたのでそのまま記述  */
  .pc {
    display: none;
  }
  /* === 下層ページのページヘッダー部（スマホ） === */
  .page-header {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    padding: 30px 0 50px;
  }
  .page-header .page-title .en {
    font-size: 30px;
  }
  /* === 下層ページのページヘッダー下テキスト部（スマホ） === */
  .page-head-text .title {
    font-size: 20px; /** スマホに合わせて、少し小さく。 PC では「22px」 */
  }
  /*-------------------------------------------
    Header（スマホ）
    -------------------------------------------*/
  /* ヘッダーの高さを「60px」で固定したいので、
  メインコンテンツがヘッダーと重ならないように「60px」下げる */
  main {
    padding-top: 60px;
  }
  #header {
    height: 60px; /** 高さを「60px」で固定 */
    position: fixed; /** ↓の値で表示位置を固定 */
    top: 0; /** 上:0 */
    left: 0; /** 左:0 */
    z-index: 10; /** 他のコンテンツよりも上に表示 */
  }
  #header .logo {
    max-width: 120px;
  }
  #header .navi {
    width: 80%; /** メニューが開いたとき左側を少し見えるように設定 */
    height: 100vh; /** 高さは画面下まで表示 */
    background-color: #fff;
    /* ↓の3行で、メニューはボタンが押されるまで、非表示にしたいので
    画面右の外側の見えない位置に隠しておく */
    position: fixed;
    top: 0;
    right: -80%;
    z-index: 20; /** 「#header」コンテンツよりも上に表示 */
    transition: all 0.6s; /** スライド表示する際の速度を設定 */
  }
  /*  */
  /* ↓ ボタンが押された状態のCSS↓ */
  /* ↓クラスとクラスの間に「スペースが無い場合」、「.navi」と「.active」両方を持つ要素となる */
  #header .navi.active {
    right: 0; /** 「right: -80%;」で、画面の右外側に隠してあったメニューを右寄せで表示 */
  }
  #header .navi .menu {
    flex-direction: column; /** メニューを縦並びに */
    padding: 60px 0; /** 上下の高さを調整 */
    width: 100%; /** 親要素「.navi」（80%）の幅いっぱいに広がる  */
    /** ↓2行で、メニューの数が増えて画面内に収まり切らない場合、メニュー内でスクロールができる */
    height: 100vh; /**  */
    overflow: auto; /**  */
  }
  #header .navi .menu li {
    padding: 10px;
    margin-left: 0;
  }

  /* ハンバーガーメニューのボタン 書籍 P.126 ～ */
  #header .hamburger {
    width: 50px; /** ボタン全体の横サイズ */
    height: 50px; /**   〃    縦サイズ */
    position: fixed; /** ↓の位置で固定 */
    top: 5px;
    right: 10px;
    cursor: pointer; /** ホバー時に指マーク */
    z-index: 30; /** メニューを開いた際に最前面表示 */
  }
  #header .hamburger span {
    width: 30px; /** ボタン横線の長さ */
    height: 3px; /** ボタン横線の高さ */
    background-color: #000;
    display: inline-block;
    /* ↓の2行で、ボタン全体に対する横の位置を設定  縦の位置は、各線ごと異なるため個別に設定。ここではパス */
    position: absolute;
    left: 10px;
    transition: all 0.4s; /** ボタンが押されて X に切り替わるときの動作速度 */
  }

  /* 縦の位置は、各線ごと異なるため個別に設定。「#header .hamburger span:nth-of-type(1-3)」 */
  #header .hamburger span:nth-of-type(1) {
    top: 16px;
  }
  #header .hamburger span:nth-of-type(2) {
    top: 25px;
  }
  #header .hamburger span:nth-of-type(3) {
    top: 34px;
  }
  /** ボタンを×にするCSS */
  #header .hamburger.active span:nth-of-type(1) {
    transform: rotate(-45deg); /** 【-45度】傾ける */
    top: 24px; /** 縦位置を調整して斜めに表示 */
  }
  #header .hamburger.active span:nth-of-type(2) {
    opacity: 0; /** 2番目の横線は非表示 */
  }
  #header .hamburger.active span:nth-of-type(3) {
    top: 24px; /** 縦位置を調整して斜めに表示 */
    transform: rotate(45deg); /** 【45度】で(1)とは反対側に傾ける */
  }

  /* セクションタイトル （スマホ） */
  .section-title {
    font-size: 24px; /** pc:28 */
    margin-bottom: 60px; /** pc:80px */
  }
  .section-title::after {
    width: 60px; /**  pc:80px*/
  }
  /* Contact （スマホ） */
  .contact {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    padding: 60px 0 40px;
  }
  /*-------------------------------------------
  Footer（スマホ）
  -------------------------------------------*/
  #footer .inner {
    /** ↓子要素を親要素内で縦一列に並べる。「PC用の（#footer .inner）には、「display: flex;」を設定している */
    flex-direction: column; /** 子要素の「.logo」と「.menu」が、縦に並ぶ */
    margin-bottom: 40px;
  }
  #footer .logo {
    margin-bottom: 20px;
  }
  #footer .menu li {
    margin-left: 30px; /** pc は「40px」 */
  }
  #footer .menu li::after {
    right: -15px;
  }
  #footer .menu li:first-child {
    margin-left: 0;
  }
}
/* ▲ end スマホ */
/* ▼ 画面が「768px」以上（PC表示）の場合だけ、「<br class="sp">」を非表示にして改行をなくする */
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}