/*
====>> 再利用可能なパーツのデフォルトスタイリング <<====

・このファイルはベースのスタイルになるので、原則オーバーライド(上書き)はしない事
・タグに依存しないベースのコンポーネントパーツ
・単体、あるいはパーツ単位で独立した仕様のスタイル

*/

/*		見出し
-----------------------------------------------------*/

.c-title_l {
  font-size: 3.6rem;
}

.c-title_m {
  font-size: 2.8rem;
}

.c-title_s {
  font-size: 2rem;
}

@media (max-width: 600px) {
  .c-title_l {
    font-size: 2rem;
  }

  .c-title_m {
    font-size: 1.8rem;
  }

  .c-title_s {
    font-size: 1.6rem;
  }
}

/*		リスト
-----------------------------------------------------*/

.c-list {
  li {
    padding: 20px;
    box-sizing: border-box;
  }
}
ul.c-list_plain {
  & > li {
    position: relative;
    padding-left: 2rem;
    &::before {
      content: "・";
      position: absolute;
      left: 0;
      font-size: inherit;
    }
  }
}

ol.c-list_plain {
  & > li {
    counter-increment: mycounter;
    &::before {
      content: counter(mycounter, decimal-leading-zero) ".";
      display: inline-block;
      font-size: inherit;
      margin-right: 0.3em;
    }
  }
}

/*		ボタン
-----------------------------------------------------*/
.c-btn_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px 5%;
  flex-wrap: wrap;
}
.c-link_btn {
  position: relative;
  color: #fff;
  background: var(--color-black);
  border: 2px solid var(--color-black);
  padding: 10px 40px;
  display: inline-block;
  transition: all 0.2s ease-in-out;

  ::file-selector-button {
    inline-size: fit-content;
    touch-action: manipulation;
    user-select: none;
  }

  &::after {
    content: "▶";
    position: absolute;
    top: 50%;
    right: 5%;
    font-size: 1rem;
    line-height: 0;
    transition: all 0.2s ease-in-out;
  }

  &:hover {
    background-color: #fff;
    opacity: 1;
    color: var(--color-black);
    text-decoration: none;
    &::after {
      right: 4%;
    }
    &::after {
      color: currentColor;
    }
  }
}
.c-link_btn_arrow {
  position: relative;
  border: 1px solid var(--color-border-pale);
  padding: 10px 40px;
  display: inline-block;
  color: var(--theme-main);

  &:after {
    content: "\02192";
    position: absolute;
    top: auto;
    right: 5%;

    &:hover {
      right: -5%;
    }
  }

  &:hover {
    opacity: 1;
    color: var(--theme-main);
    text-decoration: none;
  }
}

.c-news_list {
  & li {
    display: flex;
    border-bottom:dashed 1px #333;
    & a {
      width: 100%;
      padding:20px 0;
      display: flex;
      align-items: center;
      gap: 15px;
      &:hover{
        color: blue;
        color: var(--color-blue);
        color: var(--color-base);
      }
    }
    .c-news_cat {
      min-width: 120px;
      font-size: 1.2rem;
      text-align: center;
      border: 1px solid currentColor;
      border-radius: 6px;
    }
  }
}
@media (max-width: 600px){/*SP以下 表示*/
  .c-news_list {
    & li {
      & a {
        flex-wrap: wrap;
        & p{
          width: 100%;
        }
      }
    }
  }
}/*END SP以下 表示*/
/*		タブ切り替えパネル
-----------------------------------------------------*/
.c-tab-panel{
  .c-tab-panel_tabs{
    display: flex;
    justify-content: center;
    gap:15px 3%;
    .c-tab-panel_tab{
      cursor: pointer;
      padding:3px 5px;
    }
    .c-tab-panel_tab.is-active{
      pointer-events: none;
      border-bottom:1px solid red;      
    }

  }
  .c-tab-panel_panels{
    .c-tab-panel_panel{
      pointer-events: none;
      visibility: hidden;
      opacity: 0;
      max-height: 0;
      transition: all 0.2s ease;
    }
    .c-tab-panel_panel.is-show{
      pointer-events: all;
      visibility: visible;
      opacity: 1;
      max-height: auto;
    }
  }
}

/*		パンくずリスト
-----------------------------------------------------*/
.c-breadcrumb_list {
  & ol,
  & ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 5px;
    padding: 4px 6px;
    background-color: #efefef;
    overflow-y: none;
    & li {
      &:not(:last-child):after {
        margin: 0 -1px 0 1px;
        display: inline-block;
        content: ">";
      }
    }
  }
}

/*		ページャー
-----------------------------------------------------*/

/*		一覧
---------------------------
--------------------------*/

.wp-pagenavi {
  width: 100%;
  margin: 0 auto;
  text-align: center;

  & > a {
    padding: 3px 5px;
    margin: 2px;
    border: 1px solid var(--color-border-pale);
    box-sizing: border-box;
    text-decoration: none;
  }
}

/*		詳細
---------------------------
--------------------------*/

.pager_single {
  margin-top: 40px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;

  .navi-left {
    text-align: left;
  }

  .navi-center {
    text-align: center;
  }

  .navi-right {
    text-align: right;
  }
}

/*		テーブル
-----------------------------------------------------*/

.c-table_plain {
  width: 100%;
  & th {
    background: #efefef;
    width: 20%;
    padding: 20px;
    border-bottom: solid 1px #ccc;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
  }

  & td {
    padding: 20px 30px;
    border-bottom: solid 1px #ccc;
  }
}

@media (max-width: 600px) {
  .c-table_plain {
    & thead,
    & tbody,
    & tfoot,
    & tr {
      display: block;
      width: 100%;
    }
    & th,
    & td {
      width: 100%;
      padding: 20px;
      display: block;
    }
  }
}

.c-table_two_tone {
  width: 100%;

  th {
    width: 30%;
    padding: 20px;
    border-bottom: solid 1px var(--color-border-pale);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
  }

  tr:nth-child(2n) > th {
    background: var(--color-base);
    width: 30%;
    padding: 20px;
    border-bottom: solid 1px var(--color-border-pale);
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
  }

  td {
    width: 70%;
    padding: 20px 30px;
    border-bottom: solid 1px var(--color-border-pale);
  }

  tr:nth-child(2n) > td {
    background: var(--color-base);
    width: 70%;
    padding: 20px 30px;
    border-bottom: solid 1px var(--color-border-pale);
  }
}

@media (max-width: 600px) {
  .table_two_tone th,
  table.two_tone td {
    width: 100%;
    padding: 20px 0px;
    display: block;
  }
}

/*		googlemap
-----------------------------------------------------*/
.c-gmap {
  position: relative;
  aspect-ratio: 100 / 75; /* 比率を4:3に固定 */
  overflow: hidden;
  & iframe,
  & object,
  & embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/*		movie  iframeのwidthとheightは削除すること！
-----------------------------------------------------*/
.c-movie {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* 比率を16:9に固定 */
  overflow: hidden;
  & iframe,
  & object,
  & embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/*		定義リスト
-----------------------------------------------------*/
.c-dl-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 2%;
  & dt {
    float: left;
    font-weight: bold;
    width: 80px;
  }
  & dd {
    width: calc(98% - 80px);
  }
}

/*		アコーディオンコンテンツ .scratch.jsに記述あり
-----------------------------------------------------*/

.c-accordion {
  list-style: none;
  .c-accordion_label {
    position: relative; /*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size: 2rem;
    text-align: left;
    font-weight: normal;
    background-color: #ddd;
    padding: 20px 50px 20px 20px;
    margin-bottom: 20px;
    transition: all 0.5s ease;
    &::before,
    &::after {
      position: absolute;
      content: "";
      width: 15px;
      height: 2px;
      background-color: #333;
      transition: all 0.2s linear;
    }
    &::before {
      top: 50%;
      right: 15px;
      transform: translateY(-50%) rotate(0deg);
    }
    &::after {
      top: 50%;
      right: 15px;
      transform: translateY(-50%) rotate(90deg);
    }
    /*　is-openというクラスがついたら形状変化　*/
    &.is-open::before {
      transform: rotate(45deg);
    }
    &.is-open::after {
      transform: rotate(135deg);
    }
  }
  /*アコーディオンで現れるエリア*/
  .c-accordion_box {
    pointer-events: none;
    visibility: hidden;
    max-height: 0;
    line-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition: all 0.3s linear;
  }
  .is-open + .c-accordion_box {
    pointer-events: all;
    visibility: visible;
    max-height: fit-content;
    line-height: 1.75;
    opacity: 1;
    padding: 20px 0;
    margin: 20px 0;
  }
}

/*		相対幅ボックス
-----------------------------------------------------*/

.c-block {
  width: var(--w-liquid);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;

  &.c-block_2 {
    & > * {
      width: 48%;
    }
  } /*  END .c-block_2 */

  &.c-block_3 {
    & > * {
      width: calc(100% / 3);
    }
  } /*  END &.c-block_3 */

  &.c-block_4 {
    & > * {
      width: 25%;
    }
  } /*  END &.c-block_4 */

  &.c-block_5 {
    & > * {
      width: 20%;
    }
  } /*  END &.c-block_5 */

  &.c-block_6 {
    & > * {
      width: calc(100% / 6);
    }
  } /*  END &.c-block_6 */

  &.c-block_7 {
    & > * {
      width: calc(100% / 7);
    }
  } /*  END &.c-block_7 */

  &.c-block_8 {
    & > * {
      width: 12.5%;
    }
  } /*  END &.c-block_8 */
} /*  END .c-block */

/*		GLIDカード
-----------------------------------------------------*/

.c-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px 2%;

  & > *,
  .c-card-grid_item {
    display: grid;
    grid-row: span 4;
    gap: 0.65rem;
    grid-template-rows: subgrid;

    .c-card-grid_image {
      width: 100%;
      text-align: center;
    }

    .c-card-grid_title {
      font-size: 2.4rem;
    }

    .c-card-grid_title,
    .c-card-grid_text {
      margin-top: 20px;
      text-align: justify;
    }
  } /* END .c-card-grid_item */

  &.c-card_2 {
    grid-template-columns: repeat(auto-fit, minmax(435px, 1fr));
  }

  &.c-card_3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  &.c-card_4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  &.c-card_5 {
    grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  }

  &.c-card_6 {
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  }

  &.c-card_7 {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

  &.c-card_8 {
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
  }
} /* END .c-card-grid */
@media (max-width: 600px) {
  .c-card-grid {
    &.c-card_2 {
      grid-template-columns: none;
    }

    &.c-card_3 {
      grid-template-columns: none;
    }

    .c-card-grid_item {
      .c-card-grid_title {
        font-size: 2rem;
      }
      .c-card-grid_title,
      .c-card-grid_text {
        margin-top: 15px;
      }
    } /* END .c-card-grid_item */
  }
} /*  END Break Point  */

/*		FLEXカード
-----------------------------------------------------*/

.c-card-flex {
  width: var(--w-liquid);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 30px;

  &.c-card_2 {
    .c-card-flex_item {
      width: calc(96% / 2);
    }
  } /* END c-card_2 */

  &.c-card_3 {
    .c-card-flex_item {
      width: calc(92% / 3);
      box-sizing: border-box;
    }
  } /* END c-card_3 */

  &.c-card_4 {
    .c-card-flex_item {
      width: calc(88% / 4);
      box-sizing: border-box;
    }
  } /* END c-card_4 */

  &.c-card_5 {
    .c-card-flex_item {
      width: calc(86% / 5);
      box-sizing: border-box;
    }
  } /* END c-card_5 */

  &.c-card_6 {
    .c-card-flex_item {
      width: calc(84% / 6);
      box-sizing: border-box;
    }
  } /* END c-card_6 */

  &.c-card_7 {
    .c-card-flex_item {
      width: calc(82% / 7);
      box-sizing: border-box;
    }
  } /* END c-card_7 */

  &.c-card_8 {
    .c-card-flex_item {
      width: calc(82.5% / 8);
      box-sizing: border-box;
    }
  } /* END c-card_8 */

  .c-card-flex_image {
    width: 100%;
    text-align: center;
  }

  .c-card-flex_title {
    font-size: 2.4rem;
  }

  .c-card-flex_title,
  .c-card-flex_text {
    margin-top: 20px;
    text-align: justify;
  }
} /* END .c-card_flex */

@media (max-width: 768px) {
  .c-card-flex {
    flex-direction: row;

    &.c-card_2,
    &.c-card_3,
    &.c-card_4,
    &.c-card_5,
    &.c-card_6,
    &.c-card_7,
    &.c-card_8 {
      .c-card-flex_item {
        width: 45%;
      }
    }
  }
} /*  END Break Point  */

@media (max-width: 600px) {
  .c-card-flex {
    flex-direction: column;

    &.c-card_2,
    .c-card_3,
    .c-card_4,
    .c-card_5,
    .c-card_6,
    .c-card_7,
    .c-card_8 {
      .c-card-flex_item {
        width: 100%;
      }
    }
  }
} /*  END Break Point  */

/*		ユニットコンテンツ
-----------------------------------------------------*/

.c-unit {
  margin-top: 30px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;

  & > * {
    width: calc(96% / 2);
  }
  &.is-reverse{
    flex-flow: row-reverse wrap;
  }
}

@media (max-width: 600px) {
  .c-unit {
    flex-direction: column;
    & > * {
      width: 100%;
    }
    &.is-reverse{
      flex-flow:column;
    }  
  }
} /*  END Break Point  */