@charset "UTF-8";

/* =============================================================================

Layout CSS

・レイアウトコンポネ用クラス「.l-×××」

上記はここに記述する

============================================================================= */

/* Heading
============================================================================= */
.l-heading-A {
  display: grid;
  gap: .8rem;

  @media (width <=767px) {
    gap: 1.6rem;
  }

  .ja {
    display: flex;
    align-items: center;
    gap: 1.0rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em;
    color: var(--cc-blue-A);

    @media (width > 767px) {}

    @media (width <=767px) {}

    &::before {
      content: "";
      border-radius: 50%;
      width: .6rem;
      height: .6rem;
      background-color: var(--cc-blue-A);

      @media (width <=767px) {
        width: 1.0rem;
        height: 1.0rem;
      }
    }
  }

  .en {
    font-size: 9.2rem;
    line-height: 1;
    transform:scaleX(.9);
    transform-origin:left;

    @media (width <=767px) {
      font-size: 10.0rem;
    }
  }


  &.-pc_min {
    @media (width > 767px) {
      .en {
        font-size: 5.8rem;
      }
    }
  }

  &.-white {
    color: #fff;

    .ja {
      color: inherit;

      &::before {
        background-color: #fff;
      }
    }
  }

  &.js-parallax-heading {
    .ja {
      transition-property: transform,opacity;
      transition-duration: .75s;
      transition-timing-function: var(--ttf-eio-cubic);
    }
    &:not(.is-active) {
      .ja {
        transform: translateX(-3.0rem);
        opacity:0;
      }
    }
  }
}



/* Button
----------------------------------------------------------------------------- */

[class*="l-button"] {
  cursor: pointer;

  &.-right {
    margin-right: 0;
  }

  &.-left {
    margin-left: 0;
  }

  @media (width > 767px) {
    &.-pc_right {
      margin-right: 0;
    }

    &.-pc_left {
      margin-left: 0;
    }
  }

  @media (width <=767px) {
    &.-sp_right {
      margin-right: 0;
    }

    &.-sp_left {
      margin-left: 0;
    }
  }
}

.l-button-A {
  --my-color: var(--cc-white-A);
  --my-bg: var(--cc-blue-A);
  display: flex;
  align-items: center;
  justify-content: center;
  gap:1.2rem;
  border-radius: 100px;
  margin-inline: auto;
  border: 1px solid var(--my-color);
  padding-block: 1.2rem;
  max-width: 100%;
  height: 8.0rem;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--my-color);
  background-color: var(--my-bg);
  position: relative;
  transition-property: background-color, color, border-color;
  transition-duration: var(--duration-hover-A);
  z-index: 1;

  @media (width > 767px) {
    /* PC */
    width: 57.0rem;
  }

  @media (width <=767px) {
    /* SP */
    gap:.8rem;
    font-size: 1.3rem;
    width: 100%;
    height: 9.6rem;
    font-size: 3.2rem;
  }

  @media (hover) {
    &:hover {
      --my-color: var(--cc-blue-A);
      --my-bg: var(--cc-white-A);

      &:is(.-reverse,.is-style-reverse) {
        --my-color: var(--cc-white-A);
        --my-bg: var(--cc-blue-A);
      }

      &.-green {
        --my-color: var(--cc-green-A);
        --my-bg: var(--cc-white-A);
      }

      &:is(.-black,.is-style-black) {
        border-color: var(--cc-black-A);
        --my-color: var(--cc-black-A);
        --my-bg: var(--cc-white-A);
      }
      &:is(.-black_reverse,.is-style-black_reverse) {
        border-color: var(--cc-black-A);
        --my-color: var(--cc-white-A);
        --my-bg: var(--cc-black-A);
      }
    }
  }

  &::before,
  &::after {
    background-color: var(--my-color);
    transition-property: background-color;
    transition-duration: var(--duration-hover-A);
  }

  &::after {
    position: absolute;
    right: 3.8rem;
  }

  &:is(.-reverse,.is-style-reverse) {
    --my-color: var(--cc-blue-A);
    --my-bg: transparent;
  }

  &.-green {
    --my-color: var(--cc-white-A);
    --my-bg: var(--cc-green-A);
  }

  &:is(.-black,.is-style-black) {
    --my-color: var(--cc-white-A);
    --my-bg: var(--cc-black-A);
    border-color: var(--my-bg);
  }

  &:is(.-black_reverse,.is-style-black_reverse) {
    --my-color:var(--cc-black-A);
    --my-bg: transparent;
  }
}


/* CONTACT
============================================================================= */
.l-contact {
  padding-block: 14.0rem;
  position: relative;

  @media (width > 767px) {
    background-color: var(--cc-white-A);
  }

  @media (width <=767px) {
    padding-bottom: 20.0rem;
  }

  .l-heading-A {
    margin-bottom: 4.4rem;
  }

  .contact-desc {
    margin-bottom: 2.8rem;

    @media (width > 767px) {
      text-align: center;
      font-size: 2.2rem;
    }

    @media (width <=767px) {
      margin-bottom: 6.4rem;
    }
  }

  .wpcf7-turnstile {
    margin-block:3.0rem -2.0rem;
    margin-inline:auto;
    width:fit-content;
    @media (width <=767px) {
      margin-block:4.0rem -1.0rem;
    }
  }

  .l-form-A {
    margin-top: 4.5rem;

    @media (width > 767px) {
      border-radius: var(--radius-A);
      padding: 6.4rem 6.8rem;
      background-color: var(--cc-gray-B);
    }
  }
}


.l-form-A {
  --fp-pb: calc(3.0rem - .5lh);
  margin-top: 4.5rem;

  @media (width > 767px) {
    line-height: calc(26/16);
  }

  @media (width <=767px) {
    --fp-pb: calc(4.8rem - .5lh);
    font-size: 3.2rem;
    line-height: calc(50/32);
  }

  :where(input:is([type="text"],[type="email"],[type="tel"]), select, textarea) {
    display: block;
    padding: var(--fp-pb) 2.4rem;
    border-radius: 1.0rem;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    background-color: #fff;
    transition-property: background-color, box-shadow;
    transition-duration: var(--duration-hover-A);

    @media (width <=767px) {
      border-radius: 100px;
      padding-inline: 4.0rem;
    }

    &:focus {
      box-shadow: inset 0 0 .5rem var(--cc-blue-A);
    }
    &::placeholder {
      color: #939393;
    }
  }

  textarea {
    --row: 3;
    max-width: 100%;
    min-height: calc((var(--row) * 1lh) + (var(--fp-pb) * 2));

    @supports (field-sizing:content) {
      field-sizing: content;
    }

    @supports not (field-sizing:content) {
      resize: vertical;
      border-bottom-right-radius: 0;
    }

    @media (width <=767px) {
      --row: 4;
      border-radius: 2.0rem;
    }
  }

  .input-select {
    display: block;
    overflow: hidden;
    position: relative;

    &:has(option[value=""]:checked) {
      color: #939393;

      option:not([disabled]) {
        color: var(--cc-black-A);
        background-color: #fff;
      }
    }

    &:after {
      content: "";
      margin-block: auto;
      background-color: var(--cc-blue-A);
      position: absolute;
      inset-block: 0;
      right: 1.6rem;
      pointer-events: none;

      @media (width <=767px) {
        right: 3.2rem;
      }
    }

    select {
      cursor: pointer;
    }
  }

  .input-radio {
    font-size:16px;
    line-height:1.5;
    @media (width > 767px) {
      padding-block:var(--fp-pb);
    }
    @media (width <= 767px) {
      padding-top:1.0rem;
    }

    .wpcf7-radio {
      @media (width > 767px) {
        display:flex;
        gap:3.0rem;
      }
      @media (width <= 767px) {
        display:grid;
        grid-template-columns: repeat(2,1fr);
      }
    }

    .wpcf7-list-item {
      margin-left: 0 !important;
    }

    label {
      position: relative;
      padding-left: calc(1lh + .5em);
      cursor: pointer;

      @media (width <=767px) {
      }

      &:has(input:checked) {
        .wpcf7-list-item-label::after {
          opacity: 1;
        }
      }

      .wpcf7-list-item-label {

        &::before,
        &::after {
          content: "";
          border-radius:50%;
          width: 1lh;
          height: 1lh;
          position: absolute;
          left: 0;
          top: 0;
        }

        &::before {
          border: 1px solid;
          background-color: #fff;
        }

        &::after {
          background-image:radial-gradient(circle at center, var(--cc-black-A) 40%, transparent 41%);
          opacity: 0;
          transition-property: opacity;
          transition-duration: var(--duration-hover-A);
        }
      }
    }
  }

  .form {
    display: grid;

    @media (width > 767px) {
      grid-template-columns: 1fr 1fr;
      gap: 2.0rem 4.0rem;
    }

    @media (width <=767px) {
      gap: 4.8rem;
    }
  }

  .form_item {
    &.-required {
      .heading {
        &::after {
          content: "*";
          color: red;
        }
      }
    }

    @media (width > 767px) {
      &.-pc_column_reset {
        grid-column:1 / 2;
      }
      &.-pc_full {
        grid-column: 1/-1;
      }
    }

    .heading {
      margin-bottom: 1.0rem;

      @media (width <=767px) {
        margin-bottom: 2.0rem;
      }
    }
  }

  .privacy {
    margin-top: 3.2rem;
    padding-block: 1.6rem;
    background-color: #e0e6e6;
    border-radius: 1.0rem;

    @media (width > 767px) {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @media (width <=767px) {
      padding: 6.0rem;
      margin-top: 5.0rem;
    }
  }

  .privacy_heading {
    @media (width > 767px) {
      font-weight: 700;
      text-align: center;
    }

    &::after {
      content: "*";
      color: red;
    }
  }

  .privacy_link {
    margin-top: .2rem;

    @media (width > 767px) {
      font-weight: 700;
      text-align: center;
    }

    @media (width <=767px) {
      margin-top: 2.0rem;
      font-size: 2.8rem;
    }

    >a {
      color: var(--cc-blue-A);
      text-decoration: underline;

      @media (hover:hover) {
        &:hover {
          text-decoration: none;
        }
      }
    }
  }

  .privacy_checkboxes {
    @media (width > 767px) {
      display: flex;
      justify-content: center;
      margin-top: 1.2rem;
      font-size: 1.4rem;
      gap: 2.0rem;
    }

    @media (width <=767px) {
      display: grid;
      gap: 2.4rem;
      margin-top: 3.2rem;
    }

    .wpcf7-list-item {
      margin-left: 0 !important;
    }

    label {
      position: relative;
      padding-left: 2.0rem;
      cursor: pointer;

      @media (width <=767px) {
        padding-left: 4.8rem;
      }

      &:has(input:checked) {
        .wpcf7-list-item-label::after {
          opacity: 1;
        }
      }

      .wpcf7-list-item-label {

        &::before,
        &::after {
          content: "";
          width: 1em;
          height: 1em;
          position: absolute;
          left: 0;
          top: calc(.5lh - .5em - 1px);
        }

        &::before {
          border: 1px solid;
          background-color: #fff;
        }

        &::after {
          background-color: var(--cc-black-A);
          clip-path: polygon(1px 60%, 45% 90%, 100% 5%, 45% 60%);
          opacity: 0;
          transition-property: opacity;
          transition-duration: var(--duration-hover-A);
        }
      }
    }
  }

  .l-button-A {
    margin-top: 5.0rem;

    @media (width <=767px) {
      margin-top: 8.0rem;
    }

    .wpcf7-spinner {
      position: absolute !important;
      right: 1.6rem;
    }

    &:has(input[type="submit"]:disabled) {
      --my-bg:var(--cc-gray-A);
      pointer-events: none;
    }
  }
}

/* 下層ページヘッダー
============================================================================= */
.l-lowerpage_header {
  padding-block:20.0rem 10.0rem;

  @media (width > 767px) {}
  @media (width <= 767px) {
    padding-block:22.0rem 8.0rem;
  }
}

/* 下層ページコンテンツ
============================================================================= */
.l-lowerpage_wrapper {
  padding-block:10.0rem 15.0rem;
  background-color:rgb(from var(--cc-white-A) r g b / .7);
  border-radius:var(--radius-A) var(--radius-A) 0 0;
  @media (width > 767px) {}
  @media (width <= 767px) {
    padding-block: 8.0rem 16.0rem;
  }
}

/* 背景ロゴ
============================================================================= */
.l-back_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;

  img {
    max-width: unset;
  }
}


/* カテゴリリスト
============================================================================= */
.l-archive_categories {
  margin-bottom:6.0rem;

  @media (width > 767px) {
    display:flex;
    flex-wrap:wrap;
    gap:1.6rem;
  }
  @media (width <= 767px) {
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:2.4rem;
  }
  .item {
    @media (width > 767px) {
      width:17.0rem;
    }
    .l-button-A {
      width:100%;
      @media (width > 767px) {
        font-size:1.5rem;
        height:5.0rem;
      }
      @media (width <= 767px) {
        font-size:2.4rem;
        height:6.8rem;
      }


      &.-current {
        --my-color: var(--cc-white-A);
        --my-bg: var(--cc-black-A);
        border-color: var(--cc-black-A);
        pointer-events: none;
      }
    }
  }
}

/* ニュースリスト
============================================================================= */
.l-news_list {
  display: grid;

  @media (width > 767px) {
    grid-template-columns: repeat(3,1fr);
    gap:6.0rem 4.5rem;
  }
  @media (width <= 767px) {
    grid-template-columns: repeat(2,1fr);
    gap:4.8rem 2.4rem;
  }
  .l-news_item {
    .cat_date {
      .cat {
        padding-inline:2.0rem;
      }
    }
  }
}


/* ニュースアイテム
============================================================================= */
.l-news_item {

  .img {
    height: auto;
    aspect-ratio: 16/9;
  }

  .cat_date {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-block: 1.6rem .8rem;
    color: var(--cc-blue-A);

    @media (width > 767px) {
      font-size: 1.4rem;
      line-height: calc(26/14);
    }

    @media (width <= 767px) {
      margin-block: 2.0rem;
    }
  }

  .cat {
    border-radius: 100px;
    border: 1px solid;
    line-height:1.5;
    padding: .1rem 1.0rem .2rem;

    @media (width <= 767px) {
      padding-inline: 3.0rem;
    }
  }

  .title {
    @media (width > 767px) {
      font-size: 1.8rem;
      line-height: calc(26/18);
    }

    @media (width <= 767px) {
      line-height: calc(39/24);
    }
  }
}



/* Archive Pager
============================================================================= */
.l-archive_pager {
	margin-top:8.0rem;
	display:flex;
	justify-content: center;

	.wp-pagenavi {
		display:flex;
		justify-content: center;
		align-items: center;
		gap:1.5rem;
		font-size:1.8rem;
		line-height:1;
		letter-spacing: 0;
		position:relative;

		@media (width <= 767px) {
			font-size:2.4rem;
			gap:1.6rem;
		}
	}

	a,.wp-pagenavi > span {
		display:flex;
		justify-content: center;
		align-items: center;
		text-align:center;
		text-decoration: none;

		&:not(.extend) {
      border-radius:50%;
			width:5.0rem;
			height:auto;
			aspect-ratio: 1/1;

			@media (width <= 767px) {
				width:7.2rem;
			}
		}
		&:not(.extend,.previouspostslink,.nextpostslink) {
      border:1px solid;
  		color:var(--cc-blue-A);
			@media (hover:hover) {
				transition-property: color, background-color;
				transition-duration: var(--duration-hover-A);
        &:hover {
          background-color:var(--cc-blue-A);
          color:#fff;
        }
			}
		}
		&:is(.pages) {
			display: none;
		}
		&:is(.current) {
      background-color:var(--cc-blue-A);
      color:#fff;
		}
		&:is(.extend) {
			width:12px;
			background-image:radial-gradient(circle at center, var(--cc-blue-A) 0%, var(--cc-blue-A) 50%, transparent 50%, transparent 100%);
			background-size: 4px 4px;
			background-position: center;
			background-repeat: repeat-x;
      @media (width > 767px) {
        margin-inline:calc(1.5rem - 6px);
      }
		}
		&:is(.previouspostslink,.nextpostslink) {
		}
		&:is(.previouspostslink,.nextpostslink) {
			display:flex;
			justify-content: center;
			align-items: center;
      background-color:#eef0f0;
      transition-property: opacity;
      transition-duration: var(--duration-hover-A);

      @media (hover:hover) {
        &:hover {
          opacity: .7;
        }
      }

			&::after {
				content:"";
				display:block;
        border-top:1px solid;
        border-right:1px solid;
        margin-left:-.8rem;
				width:1.0rem;
				height:auto;
				aspect-ratio:1/1;
        transform:rotate(45deg);
        @media (width <= 767px) {
          margin-left:-1.2rem;
          width:1.6rem;
        }
			}
		}
		&:is(.previouspostslink) {
      order:-1;
			transform:scaleX(-1);
		}
		&:is(.nextpostslink) {
      order:1000;
		}
	}
}


/* 詳細ページ日付・カテゴリ
============================================================================= */
.l-single-date_cat {
  display:flex;
  align-items: flex-start;
  gap:3.2rem;
  color:var(--cc-blue-A);
  line-height:1;
  margin-bottom:2.0rem;
  @media (width <= 767px) {
    flex-wrap:wrap;
    align-items: center;
    margin-bottom:3.2rem;
    row-gap:2.4rem;
  }

  .date {
    flex-shrink: 0;
    @media (width > 767px) {
      padding-top:.2rem;
    }
    @media (width <= 767px) {
      font-size:2.8rem;
    }
  }
  .cat_list {
    display:flex;
    flex-wrap:wrap;
    gap:1.0rem;
    @media (width > 767px) {
      font-size:1.4rem;
    }
    @media (width <= 767px) {
    }
  }
  .cat {
    > a {
      display:flex;
      justify-content: center;
      align-items: center;
      padding:.4rem 2.0rem;
      border-radius:100px;
      border:1px solid;
      @media (width <= 767px) {
        padding-block:.8rem;
      }
    }
  }
}


/* 詳細ページ記事タイトル
============================================================================= */
.l-single_title {
  margin-bottom:3.2rem;
  padding-bottom:2.0rem;
  border-bottom:2px solid #e1e1e1;
  font-weight:700;
  font-size:3.4rem;
  line-height:calc(48/34);
  position:relative;

  @media (width <= 767px) {
    margin-bottom:4.0rem;
    padding-bottom:2.4rem;
    font-size:3.6rem;
    line-height:calc(53/36);
  }

  &::after {
    content:"";
    width:14.0rem;
    border-bottom:2px solid var(--cc-blue-A);
    position:absolute;
    bottom:-2px;
    left:0;
  }

}

/* Single Pager
============================================================================= */
.l-single_pager {
  display:grid;
  grid-template-columns:repeat(3, 26.0rem);
  grid-template-rows:6.0rem;
  gap:3.0rem;
  justify-content: center;
  margin-top:8.0rem;

	@media (width <= 767px) {
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:8.0rem;
    gap:2.0rem;
	}

  .l-button-A {
    width:100%;
    height:100%;
    @media (width <= 767px) {
      font-size:2.8rem;
    }

    &:is(.-prev,.-next) {
      &::after {
        width:2.6rem;
        @media (width <= 767px) {
          content:none;
        }
      }
    }
    &.-prev {
      grid-column:1 / 2;
      &::after {
        inset-inline:1.6rem auto;
        transform:scaleX(-1);
      }
    }
    &.-list {
      grid-column:2 / 3;
    }
    &.-next {
      grid-column:3 / 4;
      &::after {
        right:1.6rem;
      }
    }
  }
}


/* 記事詳細：最近のお知らせ
============================================================================= */
.l-latest_news {
  padding-block:10.0rem 12.0rem;
  @media (width > 767px) {}

  @media (width <= 767px) {}

  .l-heading-A {
    margin-bottom:4.8rem;
  }

  .news_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 6.0rem;

    @media (width <= 767px) {
      display: flex;
      column-gap: 6.4rem;
    }
  }

  .l-news_item {
    @media (width <= 767px) {
      flex-shrink: 0;
      width: 39.4rem;
    }
  }
}

/* Sample
============================================================================= */
.l-selectorName {
  @media (width > 767px) {}

  @media (width <= 767px) {}
}