@charset "utf-8";

/* ブラウザの規定スタイルを解除する */
*,
::before,
::after {
  /* 要素の余白0 */
  padding: 0;
  margin: 0;
  /* 要素の幅と高さの計算方法を指定 */
  box-sizing: border-box;
}

/* リスト行頭アイコン非表示 */
ul,
ol {
  list-style: none;
}

/* リンク文字色と下線無 */
a {
  color: inherit;
  text-decoration: none;
}

/* ホバー時のテキストカラーを変更 */
a:hover {
  color: #08ca76;
  text-shadow: 1px 1px 3px #dbdbdb;
}

/* フォント指定 */
/* マメロン5*/
@font-face {
  font-family: 'mamelon5';
  src: url(../font/Mamelon-5-Hi-Regular.eot) format('embedded-opentype');
  src: url(../font/Mamelon-5-Hi-Regular.otf) format('opentype');
  src: url(../font/Mamelon-5-Hi-Regular.woff2) format('woff2');
}

/*　マメロン3*/
@font-face {
  font-family: 'mamelon3';
  src: url(../font/Mamelon-3HiRegular.eot) format('embedded-opentype');
  src: url(../font/Mamelon-3-Hi-Regular.otf) format('opentype');
  src: url(../font/Mamelon-3-Hi-Regular.woff2) format('woff2');
}

body {
  /* ヘッダーの高さ分のマージンを設定*/
  margin-top: 200px;
  /* サイト全体のフォント指定 */
  font-family: 'mamelon3';
  font-family: 'Kiwi Maru', serif;

}

/* ヘッダーの設定 */
.header {
  /* ヘッダーを画面上部に固定 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  /* 背景色を透過 */
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.header_inner {
  max-width: 1600px;
  height: 250px;
  /* ヘッダー位置指定 */
  margin-left: auto;
  margin-right: auto;
  /* ヘッダーエリア左右余白指定 */
  padding-left: 30px;
  padding-right: 30px;
  /* ロゴとナビゲーション横並指定 */
  display: flex;
  /* ロゴとナビゲーション左右寄せ */
  justify-content: space-between;
  /* ロゴとナビゲーション上下高揃え */
  align-items: center;
}

.header_inner h5 {
  font-size: x-small;
  margin: 8px;
}

/* ハンバーガーメニューを非表示にする */
.toggle_menu_button {
  display: none;
}

/* ヘッダーロゴのサイズを指定できるようにする */
.header_logo {
  display: block;
  width: 250px;
}

/* ナビゲーションの項目を横並びにする */
.navigation ul {
  display: flex;
  padding-left: 20px;
}

/* ナビゲーションの項目間の余白を設定する */
.navigation ul li {
  padding: 10px;
}

/* フッターの設定 */

.footer {
  /* margin: 8% 8% 5% 5%; */
  padding-top: 5%;
  padding-bottom: 5%;
  /* フッター内の各要素の配置を指定(縦並び) */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer_logo {
  display: block;
  max-width: 200px;
  height: auto;
}

.footer h3,
p {
  margin-bottom: 8px;
}

.footer p {
  line-height: 2;
  font-size: x-small;
  margin: 8px;
}

.security_action img {
  width: 25%;
  height: auto;
  margin: 5px;
}

.policies {
  display: flex;
  justify-content: center;
  width: 100%;
}

.policies li {
  margin: 8px;
  font-size: x-small;
  white-space: nowrap
}

.sns_menu {
  display: flex;
  justify-content: space-between;
}

.sns_menu li {
  margin: 5px;
}

.sns_menu img {
  width: 20%;
  height: auto;
}

html {
  scroll-behavior: smooth;
}

#page_top {
  width: 100px;
  height: 60px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #fbbf26;
  opacity: 0.6;
  border-radius: 10px;
}

#page_top a {
  position: relative;
  display: block;
  width: 100px;
  height: 60px;
  text-decoration: none;
}

#page_top a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_top a::after {
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 30px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/* 【モバイルサイト用CSSを記述】 */
@media (max-width: 768px) {

  /* ナビゲーションメニューの調整 */
  .header_site_menu ul {
    display: block;
    text-align: center;
  }

  .header_site_menu li {
    margin-top: 20px;
  }

  /* ヘッダーの調整 */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* background-color: #ffffff; */
    background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    height: 100px;
    /* ヘッダー領域を常に手前に表示 */
    z-index: 10;
  }

  /* ヘッダー内部のサイズ調整 */
  .header_inner {
    padding-left: 20px;
    padding-right: 20px;
    height: 100%;
    /* ハンバーガーメニュー表示設定 */
    position: relative;
  }

  .header_logo {
    width: 180px;
  }

  .header_rightside {
    display: none;
  }

  /* モバイル用ナビゲーションメニュー（ハンバーガーメニュー） */
  .header_site_menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    color: #ffffff;
    background-color: #54b366f5;
    padding-top: 50px;
    padding-bottom: 50px;
    display: none;
  }

  /* ハンバーガーメニュー表示・非表示設定 */
  .header_site_menu.is_show {
    display: flex;
    justify-content: center;
    padding-top: 35px;
  }

  /* ボタンを表示 */
  .toggle_menu_button {
    display: block;
    width: 100px;
    height: 100px;
    background-image: url(../img/t-button.png);
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none;
  }

  /* ヘッダーと重なっている部分に余白入れて調整 */
  .main {
    padding-top: 40px;
    margin-bottom: 30%;
  }

  /* フッターの調整 */
  .footer_logo {
    margin-top: 30px;
  }

  .policies {
    display: inline-block;
  }
}

.copyright {
  margin-top: 15px;
}