@charset "utf-8";
@import url("./reset.css");
@import url("https://fonts.googleapis.com/earlyaccess/nicomoji.css");

/* -------------------------------------- */
/* --- 変数宣言                         --- */
/* -------------------------------------- */
:root {
  /* 色 */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #3399ff;
  --color-light-blue: #00ccff;
  --color-start-gradient: rgba(245, 247, 250);
  --color-end-gradient: rgba(195, 207, 226);
  --color-header-bg: rgba(255, 255, 255, 0.9);
  --color-content-bg: rgba(255, 255, 255, 0.8);
  --color-link-bg: rgba(0, 0, 0, 0);

  /* フォント */
  --font-body: "游ゴシック", "ヒラギノ角ゴ ProN", sans-serif;
  --font-heading: "Nico Moji", sans-serif;

  /* 余白 */
  --spacing-sm: 5px;
  --spacing-md: 10px;
  --spacing-lg: 15px;
  --spacing-xl: 50px;

  /* サイズ */
  --size-width-desktop: 700px;
  --size-width-mobile: 90%;
  --size-border-radius: 10px;
}

/* -------------------------------------- */
/* --- 全体・基本スタイル                 --- */
/* -------------------------------------- */
html {
  background: url(top.webp) no-repeat right bottom fixed,
    linear-gradient(180deg, var(--color-start-gradient), var(--color-end-gradient));
  background-size: 25%;
  min-height: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 100%;
}

h1,
h2 {
  font-family: var(--font-heading);
}

h3,
h4 {
  margin: 0 0 var(--spacing-sm) var(--spacing-sm);
}

h1 {
  font-size: 5rem;
  text-align: center;
  color: var(--color-white);
  text-shadow:
    1px 1px 0 var(--color-primary),
    -1px -1px 0 var(--color-primary),
    -1px 1px 0 var(--color-primary),
    1px -1px 0 var(--color-primary),
    0 1px 0 var(--color-primary),
    0 -1px 0 var(--color-primary),
    -1px 0 0 var(--color-primary),
    1px 0 0 var(--color-primary);
}

h2 {
  font-size: 1rem;
  margin: var(--spacing-sm) 0;
}

h2::first-letter {
  font-size: 2rem;
}

h3 {
  font-size: 1rem;
  margin-top: var(--spacing-sm);
  text-decoration: underline;
}

h4 {
  font-size: 85%;
  margin: 2px 0;
}

p {
  margin: var(--spacing-md) var(--spacing-sm);
}

input {
  border: 1px var(--color-black) solid;
  padding: var(--spacing-sm);
  width: 50%;
  border-radius: var(--size-border-radius);
}

address {
  margin: var(--spacing-md) 0;
}

/* -------------------------------------- */
/* --- レイアウトセクション             --- */
/* -------------------------------------- */
header {
  background-color: var(--color-header-bg);
  border-radius: var(--size-border-radius);
  width: var(--size-width-desktop);
  margin: var(--spacing-xl) auto 0 auto;
}

.contents,
#index {
  background-color: var(--color-header-bg);
  border-radius: var(--size-border-radius);
  width: var(--size-width-desktop);
  padding: var(--spacing-lg);
  margin: var(--spacing-md);
}

#index {
  margin: var(--spacing-xl) auto;
}

#index img {
  margin-bottom: 5px;
}

.text {
  font-size: 85%;
  margin: 0 0 var(--spacing-lg) var(--spacing-sm);
}

.link ul {
  list-style: none; /* デフォルトの箇条書きを削除 */
}

.link li {
  margin: 2px 0;
}

#bkm,
#message {
  margin: 250px 0 250px var(--spacing-sm);
}

#news {
  width: 680px;
  text-align: center;
  margin: 0 auto 30px auto;
  padding: var(--spacing-sm);
}

#news iframe {
  width: 670px;
  height: 100px;
  margin: 0 auto;
  padding: 0;
  border-width: 0;
}

#news span {
  display: block;
  font-size: 80%;
  text-align: right;
  padding-top: var(--spacing-sm);
}

footer {
  /* スタイルは特に指定なし。将来的な使用に備えてセレクタを残しています。 */
}

/* -------------------------------------- */
/* --- ナビゲーション・リンク           --- */
/* -------------------------------------- */
#nav_index {
  margin-bottom: 20px;
  font-family: var(--font-heading);
}

#nav_index ul {
  text-align: center;
  font-size: 1.8rem;
}

#nav_index li {
  display: inline;
  margin: 0 var(--spacing-sm);
}

#nav_index li a:hover {
  color: var(--color-primary);
}

.contents a,
#news a {
  display: inline-block;
  color: var(--color-black);
  text-decoration: none;
  background-image: linear-gradient(
    to right,
    var(--color-link-bg) 50%,
    var(--color-light-blue) 50%
  );
  background-position: 0 0;
  background-size: 200% auto;
  transition: 0.3s;
}

.contents a:hover,
#news a:hover {
  background-position: -100% 0;
  color: var(--color-white);
}

/* -------------------------------------- */
/* --- ページトップボタン               --- */
/* -------------------------------------- */
#page-top {
  position: fixed;
  right: var(--spacing-md);
  bottom: var(--spacing-md);
  z-index: 2;
  opacity: 0;
  transform: translateY(100px);
}

#page-top a {
  font-family: var(--font-heading);
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-white);
  border-radius: var(--spacing-sm);
  width: 100px;
  height: 50px;
  color: var(--color-black);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s;
}

#page-top a:hover {
  background-color: var(--color-link-bg);
}

#page-top.UpMove {
  animation: UpAnime 0.5s forwards;
}

#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}

/* -------------------------------------- */
/* --- モバイル表示                     --- */
/* -------------------------------------- */
@media screen and (max-width: 750px) {
  html {
    background: url(top.webp) no-repeat center fixed,
      linear-gradient(180deg, var(--color-start-gradient), var(--color-end-gradient));
    background-size: 100%;
  }

  body {
    font-size: 95%;
  }

  header {
    width: var(--size-width-mobile);
    margin: var(--spacing-md) auto var(--spacing-xl) auto;
    background-color: var(--color-content-bg);
  }
  
  iframe {
    max-width: 100%;
    height: 40px;
    margin: 0;
    padding: 0;
  }

  #index {
    margin: 50% auto;
  }

  a img{ 
    margin-bottom: 2px;
  }
  
  .contents {
    margin: var(--spacing-md) auto;
  }

  #index,
  .contents {
    width: var(--size-width-mobile);
    background-color: var(--color-content-bg);
  }

  #news {
    overflow: auto;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    width: var(--size-width-mobile);
    margin: var(--spacing-md) auto;
  }

  #nav_index ul {
    font-size: 1.4rem;
  }

  #bkm {
    margin: 200px 0 200px var(--spacing-sm);
  }

  #page-top a {
    background-color: rgba(255, 255, 255, 0.7);
  }

  footer {
    margin-top: var(--spacing-xl);
    font-size: 15px;
  }

  .none {
    display: none;
  }
}