@charset "utf-8";
/* ################################################################################
   Object_Component
   ################################################################################ */


/* ======================================================================
   Media List(記事一覧)
   ====================================================================== */


/* Media_Wrapper
   ================================================================= */


/* ------------------------------------------------------------
   [Foundation]
   ------------------------------------------------------------ */

.c-media {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
}



/* ------------------------------------------------------------
   [Decoration]Article List（記事一覧）
   ------------------------------------------------------------ */

.c-media--article {
  background: var(--link-bgcolor);
}



/* ------------------------------------------------------------
   [Decoration]Notice List（お知らせ一覧）
   ------------------------------------------------------------ */

.c-media--notice {
	list-style: none;
  background: var(--link-bgcolor);
}



/* ------------------------------------------------------------
   [Decoration]カラムパターン
   ------------------------------------------------------------ */

/* 初期設定でのカラムパターンは、「PC: 3カラム、Tab: 3カラム、SP: 1カラム」です。 */


/* PC: 3カラム、Tab: 3カラム、SP: 2カラム
   ------------------------------------------------------- */

.c-media--column-3-3-2 .c-card, .c-media--column-3-3-2 .c-list {
  flex-basis: 33.33%;
}

@media screen and (max-width:959px) {
  .c-media--column-3-3-2 .c-card, .c-media--column-3-3-2 .c-list {
    flex-basis: 33.33%;
  }
}

@media screen and (max-width:559px) {
  .c-media--column-3-3-2 .c-card, .c-media--column-3-3-2 .c-list {
    flex-basis: 50%;
    font-size: 0.65em;
  }
}


/* PC: 3カラム、Tab: 3カラム、SP: 1カラム
   ------------------------------------------------------- */

.c-media--column-3-3-1 .c-card, .c-media--column-3-3-1 .c-list {
  flex-basis: 33.33%;
}

@media screen and (max-width:959px) {
  .c-media--column-3-3-1 .c-card, .c-media--column-3-3-1 .c-list {
    flex-basis: 33.33%;
  }
}

@media screen and (max-width:559px) {
  .c-media--column-3-3-1 .c-card, .c-media--column-3-3-1 .c-list {
    flex-basis: 100%;
    font-size: 1.25em;
  }
}


/* PC: 3カラム、Tab: 2カラム、SP: 2カラム
   ------------------------------------------------------- */

.c-media--column-3-2-2 .c-card, .c-media--column-3-2-2 .c-list {
  flex-basis: 33.33%;
}

@media screen and (max-width:959px) {
  .c-media--column-3-2-2 .c-card, .c-media--column-3-2-2 .c-list {
    flex-basis: 50%;
    font-size: 1.0em;
  }
}

@media screen and (max-width:559px) {
  .c-media--column-3-2-2 .c-card, .c-media--column-3-2-2 .c-list {
    flex-basis: 50%;
    font-size: 0.65em;
  }
}


/* PC: 3カラム、Tab: 2カラム、SP: 1カラム
   ------------------------------------------------------- */

.c-media--column-3-2-1 .c-card, .c-media--column-3-2-1 .c-list {
  flex-basis: 33.33%;
}

@media screen and (max-width:959px) {
  .c-media--column-3-2-1 .c-card, .c-media--column-3-2-1 .c-list {
    flex-basis: 50%;
    font-size: 1.0em;
  }
}

@media screen and (max-width:559px) {
  .c-media--column-3-2-1 .c-card, .c-media--column-3-2-1 .c-list {
    flex-basis: 100%;
    font-size: 1.25em;
  }
}


/* PC: 2カラム、Tab: 2カラム、SP: 2カラム
   ------------------------------------------------------- */

.c-media--column-2-2-2 .c-card, .c-media--column-2-2-2 .c-list {
  flex-basis: 50%;
  font-size: 1.25em;
}

@media screen and (max-width:959px) {
  .c-media--column-2-2-2 .c-card, .c-media--column-2-2-2 .c-list {
    flex-basis: 50%;
    font-size: 1.0em;
  }
}

@media screen and (max-width:559px) {
  .c-media--column-2-2-2 .c-card, .c-media--column-2-2-2 .c-list {
    flex-basis: 50%;
    font-size: 0.65em;
  }
}


/* PC: 2カラム、Tab: 2カラム、SP: 1カラム
   ------------------------------------------------------- */
.c-media--column-2-2-1 .c-card, .c-media--column-2-2-1 .c-list {
  flex-basis: 50%;
  font-size: 1.25em;
}

@media screen and (max-width:959px) {
  .c-media--column-2-2-1 .c-card, .c-media--column-2-2-1 .c-list {
    flex-basis: 50%;
    font-size: 1.0em;
  }
}

@media screen and (max-width:559px) {
  .c-media--column-2-2-1 .c-card, .c-media--column-2-2-1 .c-list {
    flex-basis: 100%;
    font-size: 1.25em;
  }
}



/* ------------------------------------------------------------
   [Decoration]Horizontal Scroll
   ------------------------------------------------------------ */

.c-horizontal-scroll-list {
	position: relative;
}

.c-media--horizontal-scroll {
	position: relative;
  overflow-x: auto;
	flex-wrap: nowrap;
	white-space: nowrap;
}




/* Media_Card（カード型の記事一覧）
   ================================================================= */


/* ------------------------------------------------------------
   [Foundation]
   ------------------------------------------------------------ */

.c-card {
  position: relative;
  overflow: hidden;
  flex-basis: 33.33%;
  font-size: 0.875em;
}
/* [アスペクト比の保持] */
.c-card:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.c-card__link {
  display: block;
  padding: 0.75em;
  background: var(--link-bgcolor);
  color: inherit;
}
/* [アスペクト比の保持] */
.c-card__link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.c-card__link:hover, 
.c-card__link:active, 
.c-card__link:focus {
  background: var(--link-bgcolor-hover);
  color: inherit;
  text-decoration: none;
}

.c-card__header {
  position: relative;
  width: 100%;
}

.c-card__body {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0.5em 0 0;
}

.c-card__title {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

.c-card__excerpt {
  margin: 0.5em 0 0;
  padding: 0;
  font-size: 0.75em;
}
.c-card__thumbnail {
  position: relative;
  width: 100%;
}
/* [アスペクト比の保持] */
.c-card__thumbnail:before {
  content: "";
  display: block;
  padding-top: 66.66%;
}

/* [アスペクト比の保持] */
.c-card__thumbnail-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.c-card__thumbnail-inner > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.c-card__meta-infomation {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0.5em;
  background: rgba(0, 0, 0, 0.4);
}

.c-card__category-name {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0.5em 0.75em;
  background: var(--keycolor-main);
  border-right: solid 0.1em #ffffff;
  border-bottom: solid 0.1em #ffffff;
  border-radius: 0;
  color: #fff;
  font-size: 0.75em;
}

.c-card__date {
  margin: 0;
  padding: 0 1.0em 0 0;
  color: #fff;
  font-size: 0.75em;
}

.c-card__author-name {
  margin: 0;
  padding: 0 1.0em 0 0;
  color: #fff;
  font-size: 0.75em;
}

@media screen and (max-width:959px) {
  .c-card {
    flex-basis: 33.33%;
    font-size: 0.725em;
  }
}

@media screen and (max-width:559px) {
  .c-card {
    flex-basis: 100%;
    font-size: 1.2em;
  }
}



/* ------------------------------------------------------------
   [Decoration]シンプル
   ------------------------------------------------------------ */

.c-card--simple {
  position: relative;
  overflow: hidden;
  flex-basis: 33.33%;
  font-size: 0.875em;
}
/* [アスペクト比の保持] */
.c-card--simple:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.c-card__link--simple {
  display: block;
  padding: 0.75em;
  background: var(--link-bgcolor);
  color: inherit;
}
/* [アスペクト比の保持] */
.c-card__link--simple {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.c-card__link--simple:hover, 
.c-card__link--simple:active, 
.c-card__link--simple:focus {
  background: var(--link-bgcolor-hover);
  color: inherit;
  text-decoration: none;
}

.c-card__header--simple {
  position: relative;
  width: 100%;
}

.c-card__body--simple {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0.5em 0 0;
}

.c-card__title--simple {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

.c-card__excerpt--simple {
  margin: 0.5em 0 0;
  padding: 0;
  font-size: 0.75em;
}
.c-card__thumbnail--simple {
  position: relative;
  width: 100%;
}
/* [アスペクト比の保持] */
.c-card__thumbnail--simple:before {
  content: "";
  display: block;
  padding-top: 66.66%;
}

/* [アスペクト比の保持] */
.c-card__thumbnail-inner--simple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.c-card__thumbnail-inner--simple > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.c-card__meta-infomation--simple {
  display: flex;
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
	margin: 0 0 0.4em;
  padding: 0;
  background: none;
}

.c-card__category-name--simple {
  position: relative;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0 1.0em 0 0;
  background: var(--keycolor-main);
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  color: inherit;
  font-size: 0.75em;
}

.c-card__date--simple {
  margin: 0;
  padding: 0 1.0em 0 0;
  color: inherit;
  font-size: 0.75em;
}

.c-card__author-name--simple {
  margin: 0;
  padding: 0 1.0em 0 0;
  color: inherit;
  font-size: 0.75em;
}

.c-card__state--simple {
	flex-basis: 20%;
  margin: 0;
  padding: 0 1.0em 0 0;
  color: inherit;
  font-size: 0.75em;
}

.c-card__state-icon--simple {
  width: 100%;
	height: auto;
}

@media screen and (max-width:959px) {
  .c-card--simple {
    flex-basis: 33.33%;
    font-size: 0.725em;
  }
}

@media screen and (max-width:559px) {
  .c-card--simple {
    flex-basis: 100%;
    font-size: 1.2em;
  }
}



/* ------------------------------------------------------------
   [Decoration]シンプル
   ------------------------------------------------------------ */

.c-card--horizontal-scroll {
	display: inline-block;
	min-width: 207px;
}






.header-widget {
    position: relative;
}

.leftbutton,
.rightbutton {
	position: absolute;
	top: calc(50% - 1.5em);
	padding: 0 0.5em;
	color: #000;
	font-size: 1.0em;
	line-height: 3.0em;
	height: 3.0em;
	background-color: #fff;
}

.leftbutton {
    left: 0;
    border-radius: 0 3px 3px 0;
    box-shadow: 1px 1px 1px #888;
}

.rightbutton {
    right: 0;
    border-radius: 3px 0 0 3px;
    box-shadow: -1px 1px 1px #888;
}




/* Media_List Type（リスト型の記事一覧）
   ================================================================= */


/* ------------------------------------------------------------
   [Foundation]
   ------------------------------------------------------------ */

.c-list {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.875em;
}

/* ウィジェット登録時のフォントサイズ微調整 */
.p-widget .c-list, 
.p-widget-main .c-list {
  font-size: inherit;
}

.c-list__link {
  display: block;
  padding: 0.75em;
  background: var(--link-bgcolor);
  color: inherit;
  font-weight: inherit;
}
.c-list__link:hover, 
.c-list__link:active, 
.c-list__link:focus {
  background: var(--link-bgcolor-hover);
  color: inherit;
  text-decoration: none;
}

.c-list__inner {
  display: flex;
  flex-wrap: wrap;
}

.c-list__header {
  display: flex;
  flex-basis: 25%;
  align-items: center;
  padding: 0 0.75em 0 0;
}

.c-list__body {
  display: flex;
  flex-basis: 75%;
  align-items: center;
}

.c-list__title {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

.c-list__excerpt {
  margin: 0;
  padding: 0;
  font-size: 0.75em;
}

.c-list__thumbnail {
  position: relative;
  width: 100%;
}

.c-list__thumbnail > img {
  display: block;
  width: 100%;
  height: auto;
}

.c-list__meta-infomation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0.5em 0 0;
}

.c-list__meta {
  margin: 0;
  font-size: 0.75em;
}

.c-list__category-name {
  margin: 0;
  font-size: 0.75em;
}

.c-list__data {
  margin: 0;
  font-size: 0.75em;
}

.c-list__author-name {
  margin: 0;
  font-size: 0.75em;
}

@media screen and (max-width:959px) {
  .c-list {
    flex-basis: 100%;
    font-size: 0.875em;
  }
}

@media screen and (max-width:559px) {
  .c-list {
    flex-basis: 100%;
    font-size: 1.125em;
  }
}





/* ======================================================================
   Images
   ====================================================================== */


/* Visual Image（ビジュアルイメージ）
   ================================================================= */

/* 「画像を枠幅いっぱいに広げ、LPのように縦に並べていくコンテンツ」を想定した各種指定です。 */


/* ------------------------------------------------------------
   通常
   ------------------------------------------------------------ */

.c-visual-image {
  width: 100%;
  margin: 0 auto;
}
.c-visual-image__content {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}



/* ------------------------------------------------------------
   アスペクト保持
   ------------------------------------------------------------ */

/* 背景画像の上に乗せた「要素（ボタン、画像など）」の位置を保持したまま、レスポンシブWebに対応させる。 */


.c-visual-image-aspect {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.c-visual-image-aspect:before {
  content: "";
  display: block;
  padding-top: 61.5% /* 背景画像のサイズ感 */ ;
}

.c-visual-image-aspect__content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("../img/visual-image/visual-image-02.png") no-repeat 0 0;
  background-size: contain;
}

.c-visual-image-aspect__link {
  display: block;
  width: 45%;
  margin-top: 50% /* ボタンの位置調整 */ ;
  margin-left: 50% /* ボタンの位置調整 */ ;
}

.c-visual-image-aspect__button {
  width: 100%;
  height: auto;
}




/* SVG
   ================================================================= */

.c-svg {
}

.c-svg__surface {
  fill: var(--keycolor-main);
}



/* ------------------------------------------------------------
   [Decoration]SNS
   ------------------------------------------------------------ */

.c-svg--sns {
}

.c-svg__surface--sns {
  fill: var(--keycolor-main);
}

.c-svg__surface--sns-header {
  fill: var(--keycolor-main);
}




/* ======================================================================
   Button
   ====================================================================== */


/* [Foundation]通常
   ================================================================= */

.c-button {
  display: inline-block;
  margin: 0;
  padding: 0.5em 0.75em;
  background: #fff;
  border: solid 0.1em var(--keycolor-main);
  color: var(--keycolor-main);
  text-align: center;
}
.c-button:hover, 
.c-button:active, 
.c-button:focus {
	opacity: 0.7;
  color: var(--keycolor-main);
  text-decoration: none;
}

.c-button__icon {
  margin: 0 0 0 0.5em;
}




/* [Decoration]前のページに戻るボタン
   ================================================================= */

.c-button--page-return {
  margin: 0;
}




/* [Decoration]お知らせ
   ================================================================= */

.c-button--notice {
  display: block;
  margin: 2.0em auto 0;
}




/* ======================================================================
   Table（テーブル）
   ====================================================================== */

.c-table {
  max-width: 100%;
  margin: 1.0em 0;
  background: #fff;
  border: solid 0.1rem #cccccc;
}

.c-table__tbody {
}

.c-table__tr {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
}

.c-table__th {
  display: flex;
  flex-basis: 25%;
  align-self: stretch;
  background: #eff4f5;
  border: solid 0.1rem #cccccc;
}

.c-table__td {
  display: flex;
  flex-basis: 75%;
  align-self: stretch;
  border: solid 0.1rem #cccccc;
}

.c-table__header {
  align-self: center;
  padding: 0.75em;
}

.c-table__body {
  align-self: center;
  padding: 0.75em;
}

@media screen and (max-width:959px) {
  .c-table__th {
    flex-basis: 30%;
  }
  .c-table__td {
    flex-basis: 70%;
  }
}

@media screen and (max-width:559px) {
  .c-table__th {
    flex-basis: 100%;
  }
  .c-table__td {
    flex-basis: 100%;
  }
}




/* ======================================================================
   [JS][jQuery]スクロールに合わせたアニメーション・動作
   ====================================================================== */

/* スクロール判定用のJSは、下記のディレクトリに格納されています。 */
/* /js/script.js */


/* マーカー_アニメーション（スクロールに合わせて、マーカーが引かれていく）
   ================================================================= */

/* Reference URL: https://www.weblab.co.jp/staff/html/6148.html */
/* Reference URL: https://qiita.com/super-mana-chan/items/7c67dbb34bcc01227450 */
/* Reference URL: https://gurio.work/marker-animation01/ */
/* こちらの指定は、"component-content-decoration.css"に記載されています。 */


/* 指定したオブジェクトのフェードイン表示
   ================================================================= */


/* ------------------------------------------------------------
   フェードインしながら表示＆左から右へスライド
   ------------------------------------------------------------ */

.c-object-appearance--from-left {
  -webkit-transition: all 6s;
  -moz-transition: all 6s;
  -ms-transition: all 6s;
  -o-transition: all 6s;
  transition: all 6s;
  opacity: 0;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.c-object-appearance--from-left.is-active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}



/* ------------------------------------------------------------
   フェードインしながら表示＆右から左へスライド
   ------------------------------------------------------------ */

.c-object-appearance--from-right {
  -webkit-transition: all 6s;
  -moz-transition: all 6s;
  -ms-transition: all 6s;
  -o-transition: all 6s;
  transition: all 6s;
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.c-object-appearance--from-left.is-active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}