@import url('https://fonts.googleapis.com/css?family=Cardo|Pathway+Gothic+One');

/* フォント設定 */
.content-font {
    font-family: 'Cardo', serif; /* コンテンツ用のフォント */
}
.heading-font {
    font-family: 'Pathway Gothic One', sans-serif; /* ヘッダー用のフォント */
}

/* タイムライン全体のスタイル */
.timeline {
    display: flex; /* フレックスボックスを使用 */
    margin: 0 auto; /* 中央揃え */
    flex-wrap: wrap; /* アイテムが折り返される */
    flex-direction: column; /* 縦方向に並べる */
    max-width: 700px; /* 最大幅を700pxに設定 */
    position: relative; /* 位置を相対的に設定 */
}

/* タイムラインアイテム内のタイトルスタイル */
.timeline__content-title {
    font-weight: bold; /* 太字 */
    font-size: 72px; /* フォントサイズを72pxに拡大 */
    margin: -10px 0 10px 0; /* 上下のマージンを調整 */
    transition: .4s; /* トランジション効果 */
    padding: 0 10px; /* パディングを設定 */
    box-sizing: border-box; /* ボックスモデルの設定 */
    font-family: 'Pathway Gothic One', sans-serif; /* フォント設定 */
    color: #fff; /* フォントの色 */
}

/* タイムラインアイテム内の説明文スタイル */
.timeline__content-desc {
    margin: 0; /* マージンをリセット */
    font-size: 18px; /* フォントサイズを18pxに設定 */
    box-sizing: border-box; /* ボックスモデルの設定 */
    color: rgba(255, 255, 255, 0.7); /* 色と透明度を設定 */
    font-family: 'Cardo', serif; /* フォント設定 */
    font-weight: normal; /* 通常のフォントウェイト */
    line-height: 1.5; /* 行の高さを1.5に設定 */
}

/* タイムラインの中心線スタイル */
.timeline:before {
    position: absolute; /* 絶対位置 */
    left: 50%; /* 左から50%の位置 */
    width: 2px; /* 幅2px */
    height: 100%; /* 高さ100% */
    margin-left: -1px; /* 左マージンを-1pxに */
    content: ""; /* コンテンツは空 */
    background: rgba(255, 255, 255, 0.07); /* 背景色と透明度 */
}

/* スクリーンサイズ767px以下のスタイル調整 */
@media only screen and (max-width: 767px) {
    .timeline:before {
        left: 40px; /* 中心線の位置調整 */
    }
}

/* タイムラインアイテムのスタイル */
.timeline-item {
    padding: 60px 0; /* 上下のパディングを60pxに設定 */
    opacity: 0.5; /* 初期の透明度を0.5に */
    filter: blur(1px); /* ブラー効果を適用 */
    transition: 0.5s; /* トランジション効果 */
    box-sizing: border-box; /* ボックスモデルの設定 */
    width: calc(50% - 40px); /* 幅を50%から40px引いた値に設定 */
    display: flex; /* フレックスボックスを使用 */
    position: relative; /* 位置を相対的に設定 */
    transform: translateY(-80px); /* 垂直に-80px移動 */
}

/* タイムラインアイテムのデータテキスト */
.timeline-item:before {
    content: attr(data-text); /* データ属性から内容を取得 */
    letter-spacing: 3px; /* 文字間を3pxに設定 */
    width: 100%; /* 幅100% */
    position: absolute; /* 絶対位置 */
    color: rgba(255, 255, 255, 0.5); /* 色と透明度 */
    font-size: 14px; /* フォントサイズを14pxに設定 */
    font-family: 'Pathway Gothic One', sans-serif; /* フォント設定 */
    border-left: 2px solid rgba(255, 255, 255, 0.5); /* 左ボーダーのスタイル */
    top: 70%; /* 上から70%の位置 */
    margin-top: -5px; /* 上マージンを-5pxに */
    padding-left: 15px; /* 左パディングを15pxに */
    opacity: 0; /* 初期の透明度を0に設定 */
    right: calc(-100% - 56px); /* 右の位置を設定 */
}

/* 偶数番目のタイムラインアイテムのスタイル */
.timeline-item:nth-child(even) {
    align-self: flex-end; /* 偶数番目のアイテムを右寄せにする */
}

/* アクティブなタイムラインアイテムのスタイル */
.timeline-item--active {
    opacity: 1; /* 不透明度を1に設定 */
    transform: translateY(0); /* 垂直移動をリセット */
    filter: blur(0px); /* ブラー効果をリセット */
}

/* アクティブなタイムラインアイテムのデータテキストスタイル */
.timeline-item--active:before {
    top: 50%; /* 上から50%の位置に設定 */
    transition: 0.3s all 0.2s; /* トランジション効果 */
    opacity: 1; /* 不透明度を1に設定 */
}

/* タイムラインアイテム内の画像スタイル */
.timeline__img {
    max-width: 100%; /* 最大幅を100%に設定 */
    height: auto; /* 高さを自動に設定 */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4); /* シャドウ効果を追加 */
    border-radius: 8px; /* 角を丸める */
}

/* タイムライン全体のコンテナスタイル */
.timeline-container {
    width: 100%; /* 幅を100%に設定 */
    position: relative; /* 位置を相対的に設定 */
    padding: 80px 0; /* 上下のパディングを80pxに設定 */
    transition: 0.3s ease 0s; /* トランジション効果 */
    background-attachment: fixed; /* 背景の固定 */
}

/* フッターのスタイル */
.demo-footer {
    padding: 40px; /* パディングを40pxに設定 */
    background: #282828; /* 背景色 */
    text-align: center; /* 中央揃え */
}

.demo-footer a {
    color: #fff; /* リンクの色 */
    text-decoration: none; /* 下線を消す */
    transition: color 0.3s; /* 色のトランジション効果 */
}

.demo-footer a:hover {
    color: #009B77; /* ホバー時の色 */
}

.timeline-header {
    text-align: center; /* テキストを中央揃え */
}

.timeline__content.img {
    transition: transform 1s ease; /* アニメーションの設定 */
}

.timeline__content:hover img {
    transform: translateY(-5px); /* 浮き出る効果 */
}




/*---------------------------------------------------------------------------
テンプレート名に「_slide_」とついているタンプでのみ使用。写真たちが動くトップメイン用のアニメーション。
---------------------------------------------------------------------------*/

/*トップページのスライドショーのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes slide1 {
	0% {opacity: 1;}
	25%{opacity: 1;}
	35%{opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

/*スライドショー（cssでのbackground使用）
ここでは、10:5.5の画像比率（5.5÷10=0.55）を読み込む指定を行なっています。
異なる画像比率にしたい場合、.mainimgのpadding-topの数字を変更します。2:1にするなら50%です。
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
.home header {
	width: 10%;
	height: 0;
	padding-top: 55%;	/*アスペクト比を調整するところです*/
	position: relative;
	overflow: hidden;
}

/*共通設定（ここは変更不要）*/
.home header .slide1, .home header .slide2, .home header .slide3, .no-slide, .dot {
	width: 100%;height: 100%;
	position: absolute;right: 0px;top: 0px;z-index: -1;
	text-indent: -9999px;
}

/*１枚目画像*/
.home header .slide1 {
	animation: slide1 15s linear infinite, opa1 1s linear;	/*「15s（※15秒）」というのがスライドショー全体にかける時間です。slide1、slide2、slide3全てで同じ数字を設定して下さい。*/
	background: url(../images/1.jpg) no-repeat center center/cover;	/*１枚目の背景画像の読み込み*/
}

/*２枚目画像*/
.home header .slide2 {
	animation: slide2 15s linear infinite;	/*「15s（※15秒）」というのがスライドショー全体にかける時間です。slide1、slide2、slide3全てで同じ数字を設定して下さい。*/
	background: url(../images/2.jpg) no-repeat center center/cover;	/*２枚目の背景画像の読み込み*/
}

/*３枚目画像*/
.home header .slide3 {
	animation: slide3 15s linear infinite;	/*「15s（※15秒）」というのがスライドショー全体にかける時間です。slide1、slide2、slide3全てで同じ数字を設定して下さい。*/
	background: url(../images/3.jpg) no-repeat center center/cover;	/*３枚目の背景画像の読み込み*/
}

/*背景画像ホームページの方*/
.home header .no-slide {
	background: url(../images/poster01.png) no-repeat center center/cover;	/*背景画像の読み込み*/
}

/*画像の上に重ねる暗いドット*/
.dot {
	background: radial-gradient(rgba(255, 255, 255, 0.8) 0.01px, rgba(255, 255, 255, 0.4) 0.5px);	/*0,0,0,0.8はドットの色。0,0,0,0.5は背景の色。0,0,0は黒色で、最後の小数点はそれぞれ透明度。*/
	background-size: 1px 1px;	/*ドットの間の余白*/
}


/*ココから下お知らせ欄*/

a {
    text-decoration: none;
    color: #ffffff;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inner {
  width: 80%;
  margin: 0 auto;
  padding: 65px 0 100px;
}


.sub_ttl {
  font-size: 30px;
  text-align: center;
  margin-bottom: 40px;
  
}

/* ここからがニュース記事のCSS */

.news_list {
  margin: 0 5%;
}

.news_list_item {
  padding: 25px 0;
  border-bottom: 1px solid #E6E6E6;
}

.news_list_item:first-child {
  border-top: 1px solid #E6E6E6;
}
.news_list_item a {
 position: relative;
 display: flex;
 padding-right: 30px;
}

.news_list_date {
  font-size: 15px;
  display: flex;
  margin-right: 15px;
  align-items: center;
}

.news_item {
  border-radius: 14px;
  width: 6em;
  /* 親要素の文字サイズを基準 */
  text-align: center;
  margin-left: 20px;
}

.arrow {
  width: 25px;
  height: 1px;
  background: #ffffff;
  position: absolute;
  top: 50%;
  right: 0;
}

.arrow::after {
  content: "";
  display: block;
  width: 6px;
  height: 1px;
  transform: rotate(45deg);
  position: absolute;
  right: 0px;
  bottom: 2px;
}


@media screen and (max-width: 1024px) {
    .news_list_item a {
        display: block;
    }
}

@media screen and (max-width: 769px) {
    .news_list_item a  {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .arrow {
        display: none;
    }
    .news_list_item a {
        padding-right: 0;
    }
    .timeline__content-title {
        font-size: 24px; /* モバイル用のタイトルフォントサイズ */
    }
    .timeline__content-desc {
        font-size: 14px; /* モバイル用の説明文フォントサイズ */
    }
    .timeline-item {
        padding: 20px 10px;
    }
}