@charset "utf-8";

/******************************************************/
/* ▼ホーム画面 - モバイル/デスクトップ共通CSS        */
/*   (ブログ部分はblog.cssに記載)                     */
/******************************************************/

/* mainタグ内のリンク */
main a {
  text-decoration: none;
}

main a:hover {
  text-decoration: underline;
}

/* コンテンツ表示エリア(全体) */
.contents-wrapper {
  margin: 0 auto;
  padding: 8px;
  overflow: hidden;  /* スマホ表示時の余白対策 */

  /* フェードイン(初期値) */
  opacity: 0;                   /* 最初は非表示 */
  transform: translateY(30px);  /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}

/* コンテンツ表示エリア - フェードイン(スクロールした後) */
.contents-wrapper.is-inview {
  opacity: 1;                  /* 表示領域に入ったら表示 */
  transform: translateY(0);    /* 30px上に移動する */
  transition-delay: .2s;       /* フェード開始を0.2秒遅らせる */
}

/* コンテンツのタイトル */
.contents-title {
  font-size: 30pt;
  font-weight: bold;
  margin: 0 auto;
  margin-bottom: 16px;
}

/* コンテンツのタイトルを除くメインエリア */
.contents-main {
  width: 100%;
  margin: 0 auto;
}

/* コンテンツの画像 */
.contents-img {
  width: calc(100% - 20px);
  display: block;
  margin: 0 auto;
}

/* コンテンツの文字列表示エリア */
.contents-text-wrapper {
  font-size: 18pt;
  font-weight: bold;
  margin-left: 8px;
  text-align: left;
}

/* コンテンツの文章 */
.sentence {
  margin-top: 16px;
  font-size: 16pt;
}

/* ViewMore */
.view-more {
  text-align: right;
  margin-top: 28px;
}

/* ViewMoreのリンクは画面標準の色と合わせる */
.view-more a {
  color: currentColor;
}

/* ViewMoreの横の三角 */
.dli-caret-right {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px;
  line-height: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 14px 21px;
  border-left-color: currentColor;
  border-right: 0;
}

.dli-caret-right:hover {
  opacity: 0.7;
}

/* ニュースのメインエリア */
.news-wrapper {
  height: 450px;
  margin: 0 auto;
  padding: 0 8px;
  border: 1px solid #002060;
}

/* ニュース記事 */
.news-unit {
  border-bottom: 1px dotted #fff;   /* ニュース記事の下の区切り線 */
  padding: 8px 0;
}

/* 最後のニュースだけは区切り線を表示させない */
.news-unit:last-of-type {
  border: none;
}

/* ニュースのカテゴリと日付を合わせた箇所 */
.news-item {
  display: flex;
  font-size: 14pt;
}

/* ニュースのカテゴリ */
.news-category {
  color: currentColor;
  background: #157DEC;
  padding: 0 16px;
}

/* ニュースの日付 */
.news-date {
  margin-left: 24px;
  font-weight: bold;
}

/* ニュース、ブログのnewラベル(共通スタイル) */
.news-new,
.blog-new {
  padding: 0 8px;
  text-align: center;
  color: currentColor;
  border: none;
  background: #c03;
}

/* ニュースのnewラベル(左余白) */
.news-new {
  margin-left: 20px;
}

/* ブログのnewラベル(左余白) */
.blog-new {
  margin-left: 4px;
}

/* ニュースの文章 */
.news-text {
  font-size: 16pt;
}

/* ニュース内のリンク部分 */
.news-link {
  color: #dd0;
  text-decoration: underline;
}

.news-link:hover {
  color: #ff0;
}

/* Googleマップ表示用のフレーム */
.map iframe {
  display: block;
  border: none;
  width: 98%;
  height: 450px;
  margin: 0 auto;
}

/* 画面スクロール時のアニメーション */

/* 下から表示 */
.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}

/* 左から表示 */
.js-fadeLeft {
  opacity: 0; /* 最初は非表示 */
  transform: translateX(-30px); /* 左に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
.js-fadeLeft.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateX(0); /* 30px左に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}

/* 右から表示 */
.js-fadeRight {
  opacity: 0; /* 最初は非表示 */
  transform: translateX(30px); /* 右に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
.js-fadeRight.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateX(0); /* 30px左に移動する */
  transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
}

/******************************************************/
/* ▼ホーム画面 - デスクトップ用CSS                   */
/******************************************************/

@media screen and (min-width: 768px) {

  /* コンテンツ表示エリア(全体) */
  .contents-wrapper {
    /*height: 520px;*/
    padding: 16px;
  }

  /* コンテンツの下にスペースを追加するためのクラス */
  .add-bottom-space {
    margin-bottom: 32px;
  }

  /* コンテンツの画像 */
  .contents-img {
    width: 610px;
  }

  /* コンテンツのタイトル */
  .contents-title {
    font-size: 32pt;
    width: 1100px;
  }

  /* タイトルを下げて横の画像とそろえるためのクラス */
  .down {
    position: relative;
    top: 72px;
  }

  /* コンテンツのタイトルを除くメインエリア */
  .contents-main {
    display: flex;
    /*align-items: flex-end;*/
    justify-content: center;
    max-width: 1100px;
    text-align: center;
  }

  /* コンテンツの文字列表示エリア */
  .contents-text-wrapper {
    margin: 0 3px;
    display: flex;
    flex-flow: column;               /* 縦並び */
    justify-content: space-between;  /* 均等配置 */
    width: 490px;
  }

  /* コンテンツの文章 */
  .sentence {
    margin-top: 32px;
    font-size: inherit;
  }

  /* ニュースのメインエリア */
  .news-wrapper {
    max-width: 1100px;
    margin: 0 auto;
  }

  /* ニュース記事 */
  .news-unit {
    padding: 24px;
  }

  /* アクセスマップ */
  .map {
    position: relative;
    width: 55%;
    height: 450px;
  }

  /* Googleマップ表示用のフレーム */
  .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}