@charset "UTF-8";
html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: 100px;
}
@media screen and (max-width: 1000px) {
    html {
     scroll-padding-top: 60px; 
    }
}
body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1;
letter-spacing: 0;
}
/* iOS対策を含めたスクロール固定 */
body.no-scroll {
  overflow: hidden;
  height: 100%;
}
.pagetop{
    position: fixed;
    bottom: 60px;
    right: 60px;
        width: 60px;
height: 60px;
    z-index: 11;
}
.pagetop a{
    display: block;
    width: 100%;
    height: 100%;
    background-color: #5AC8FF;
    border-radius: 50%;
    background-image: url("../image/page-top.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 16px;
    transition: all 0.3s;
}
@media screen and (max-width: 769px) {
.pagetop{
    position: fixed;
    bottom: 30px;
    right: 22px;
        width: 40px;
height: 40px;
    z-index: 11;
}
.pagetop a{
    display: block;
    width: 100%;
    height: 100%;
    background-color: #5AC8FF;
    border-radius: 50%;
    background-image: url("../image/page-top.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 12px;
    transition: all 0.3s;
}
}
.pagetop a:hover {
  opacity: 0.8;
    background-position: center 15px;
}
/* 主に改行に使用 */
@media screen and (min-width: 769px) {
  .pcnone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .spnone {
    display: none;
  }
}
.fade {
  transition: 0.3s ease-in-out;
}
.fade:hover {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=70)";
}
/* 共通クラス */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.content {
  width: clamp(331px, 88.2667vw, 1000px);
  max-width: 1000px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .content {
    max-width: none;
  }
}
/*hgroup*/
hgroup.hgroup-1{
    display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
hgroup.hgroup-1 p{
    color: #ADE3FF;
font-family: "Barlow Semi Condensed", sans-serif;
font-size: 80px;
font-style: normal;
font-weight: 800;
line-height: 110%; /* 88px */
letter-spacing: 0;
}
hgroup.hgroup-1 h2{
    color: #0081CC;
font-size: 24px;
font-style: normal;
font-weight: 900;
line-height: 150%; /* 36px */
}
@media screen and (max-width: 768px) {
   hgroup.hgroup-1{
    display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        margin: 0 auto;
}
hgroup.hgroup-1 p{
    color: #ADE3FF;
font-family: "Barlow Semi Condensed", sans-serif;
font-size: 6rem;
font-style: normal;
font-weight: 800;
line-height: 120%;
}
hgroup.hgroup-1 h2{
    color: #0081CC;
font-size: 1.8rem;
font-style: normal;
font-weight: 900;
line-height: 120%;
}
}
/*パート２*/
hgroup.hgroup-2{
    display: inline-flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
hgroup.hgroup-2 p{
color: #333;
text-align: center;
font-family: "Barlow Semi Condensed", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 23.4px */
}
hgroup.hgroup-2 h2{
color: #0081CC;
text-align: center;
font-size: 40px;
font-style: normal;
font-weight: 900;
line-height: 150%; /* 60px */}
@media screen and (max-width: 768px) {
hgroup.hgroup-2{
    display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0;
}
hgroup.hgroup-2 p{
font-size: 1.6rem;
}
hgroup.hgroup-2 h2{
font-size: 3.2rem;
}
}
/*右矢印*/
a.right-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

a.right-arrow::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    aspect-ratio: 1 / 1; 
    background-color: #ffffff;
    border-radius: 50%;
    background-image: url("../image/right-arrow.svg");
    background-repeat: no-repeat;
background-size: 8px 6px;
    background-position: center;
    flex-shrink: 0;
    margin-left: 5px;
    transition: background-position 0.2s ease-out;
}
a.right-arrow:hover::after {
    background-position: 70% center; 
}
@media screen and (max-width: 900px) {
a.right-arrow {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
a.right-arrow.sp-right-arrow {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    color: inherit;
    }
    a.right-arrow.sp-right-arrow::after {
    margin-left: 5px;
}

a.right-arrow::after {
    margin-left: 0;
}
a.right-arrow:hover::after {
    display: inline-block;
    background-position: center;}

}
/*上矢印*/
a.up-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

a.up-arrow::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    aspect-ratio: 1 / 1; 
    background-color: #ffffff;
    border-radius: 50%;
    background-image: url("../image/up-arrow.svg");
    background-repeat: no-repeat;
background-size: 8px 6px;
    background-position: center;
    flex-shrink: 0;
    margin-left: 5px;
    transition: background-position 0.2s ease-out;
}
a.up-arrow:hover::after {
    background-position: center 30%;
}
@media screen and (max-width: 900px) {
 a.up-arrow {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
    }

a.up-arrow::after {
    margin-left: 0;
}
a.up-arrow:hover::after {
    display: inline-block;
    background-position: center;
}
   
}
/* slickスライダー */

/* パンくずリスト */
.breadcrumb {
}
div.breadcrumb nav ol {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
max-width: 600px;
    width: 100%;
    margin-left: auto;
}
div.breadcrumb nav ol li {
  display: flex;
  justify-content: center;
  align-items: center;
    flex-shrink: 0;
}
div.breadcrumb nav ol li:last-child {
  min-width: 0;
   width: auto;
    max-width: 444px;
  display: block;
}
div.breadcrumb nav ol li a {
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 24px */
}
div.breadcrumb nav ol li a:hover{
	opacity: 0.5;
}
@media screen and (max-width:768px) {
    div.breadcrumb nav{
        width: 100%;
    display: flex;
    justify-content: flex-end;
    }
div.breadcrumb nav ol {
    display: flex;
    justify-content: flex-end;
    align-items: center; 
    width: 100%;
    max-width: 331px;
    margin-left: auto;
    height: auto;
   gap: 0px 10px;
	}
    div.breadcrumb nav ol.single-breadcrumb{
        justify-content: flex-start;
        flex-wrap: wrap !important;
        height: auto;
    }
}
div.breadcrumb nav ol li:not(:last-child)::after {
  content: "";
  display: block;
width: 8px;
height: 18px;
flex-shrink: 0;
    background-image: url(../image/decoration-breadcrumb.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 10px;
}
div.breadcrumb nav ol li a[aria-current="page"] {
  color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 24px */
  text-decoration: none;
  pointer-events: none;
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	vertical-align: bottom;

}
@media screen and (max-width:768px) {
  div.breadcrumb nav ol li:not(:last-child)::after {
    content: "";
    display: block;
width: 6px;
height: 16px;
      background-image: url(../image/decoration-breadcrumb.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-left: 10px;
  }
	div.breadcrumb nav ol li:last-child {
    min-width: 0;
    display: block;
  }
div.breadcrumb nav ol.single-breadcrumb li:not(:last-child) {
    flex-shrink: 0;
  }
div.breadcrumb nav ol.single-breadcrumb li:last-child {
    width: 100%;      /* これで前の項目の後ろで改行される */
    flex: 0 0 100%;   /* 確実に100%幅を確保 */
    min-width: 0;
    display: block;
    overflow: hidden;
    margin-top: 5px;  /* 上の行との余白（お好みで） */
  }
div.breadcrumb nav ol.single-breadcrumb li a[aria-current="page"] {
    display: block;
    width: 100%;
    white-space: nowrap;    /* 改行させない */
    overflow: hidden;       /* はみ出しを隠す */
    text-overflow: ellipsis; /* 三点リーダーを表示 */
  }
}
/* ページャー*/
.pagenavi ul.page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
gap: 10px;
  padding: 0;
  margin: 0;
}
.pagenavi ul.page-numbers li a.page-numbers:not(.prev):not(.next), .pagenavi ul.page-numbers li span.page-numbers.current {
  display: flex;
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
    border: 1px solid #0081CC;
    border-radius: 50%;
    color: #0081CC;
text-align: center;
font-family: "Barlow Semi Condensed", sans-serif;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 36px */
  box-sizing: border-box;
  text-decoration: none;
	transition: all 0.2s ease;
}
/* 現在のページの背景色（数字） */
.pagenavi ul.page-numbers li span.page-numbers.current {
  background: #0081CC;
  color: #fff;
}
/* 矢印ボタンの設定*/
.pagenavi ul.page-numbers li a.prev, .pagenavi ul.page-numbers li a.next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
        border-radius: 50%;
  background-color: #5AC8FF;
  transition: background-color 0.3s ease;
}
/* 矢印の画像表示 */
.pagenavi ul.page-numbers li a .arrow-prev, .pagenavi ul.page-numbers li a .arrow-next {
  display: block;
width: 20px;
height: 16px;
aspect-ratio: 5/4;
    background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.pagenavi ul.page-numbers li a .arrow-next {
  background-image: url("../image/link-btn-arrow.svg");
}
.pagenavi ul.page-numbers li a .arrow-prev {
  background-image: url("../image/link-btn-arrow-left.svg");
}
/* --- ホバー --- */
.pagenavi ul.page-numbers li a .arrow-prev, 
.pagenavi ul.page-numbers li a .arrow-next {
    transition: transform 0.3s ease; /* 0.3秒かけて動く */
}

/* 2. 「前へ」にホバーした時：左に動かす */
.pagenavi ul.page-numbers li a.prev:hover .arrow-prev {
    transform: translateX(-5px); /* 左に5px移動 */
}

/* 3. 「次へ」にホバーした時：右に動かす */
.pagenavi ul.page-numbers li a.next:hover .arrow-next {
    transform: translateX(5px); /* 右に5px移動 */
}

/* --- 既存のホバー設定（微調整） --- */
.pagenavi ul.page-numbers li a.prev:hover, 
.pagenavi ul.page-numbers li a.next:hover {
    opacity: 0.8;
}
.pagenavi ul.page-numbers li span.page-numbers.current,
.pagenavi ul.page-numbers li a.page-numbers:not(.prev):not(.next):hover {
    background: #0081CC;
    color: #fff;
}
@media screen and (max-width:768px) {
    .pagenavi ul.page-numbers {
gap: 5px;
}
.pagenavi ul.page-numbers li a.page-numbers:not(.prev):not(.next), .pagenavi ul.page-numbers li span.page-numbers.current {
  display: flex;
  width: 40px;
height: 40px;
aspect-ratio: 1/1;
font-size: 1.8rem;
line-height: 130%;
}
/* 矢印ボタンの設定*/
.pagenavi ul.page-numbers li a.prev, .pagenavi ul.page-numbers li a.next {
  width: 40px;
height: 40px;
aspect-ratio: 1/1;
}
/* 矢印の画像表示 */
.pagenavi ul.page-numbers li a .arrow-prev, .pagenavi ul.page-numbers li a .arrow-next {
width: 15px;
height: 12px;
aspect-ratio: 5/4;
}
.pagenavi ul.page-numbers li a .arrow-next {
  background-image: url("../image/link-btn-arrow.svg");
}
.pagenavi ul.page-numbers li a .arrow-prev {
  background-image: url("../image/link-btn-arrow-left.svg");
}
    .pagenavi ul.page-numbers li a.prev{
        margin-right: 10px;
    }
    .pagenavi ul.page-numbers li a.next{
        margin-left: 10px;
    }

}
/*404*/
.text-error{
    color: #333;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
    margin-bottom: 60px;
}
@media screen and (max-width:768px) {
    .text-error{
    font-size: 1.6rem;
    margin-bottom: 30px;
}

}