@charset "utf-8";
/*--------------------------------------------------------------------------------ペーコンテナ*/
.wrap-con {
  width: 100%;
  display: block;
  justify-content: center;
  padding-top: 3em;
  overflow: hidden;
}
.ttl {
  width: var(--w-basesize);
  margin: 3em auto;
}
.ttl h2.a1 {
	font-size: 0; /* 文字を非表示にする */
	background-image: url(../img/bg001.jpg);
	background-size: contain; /* 画像を枠内に収める */
	background-position: center; /* 画像を中央に配置 */
	background-repeat: no-repeat; /* 画像を繰り返さない */
	width: 100%; /* 幅を100%に設定 */
	height: 200px; /* 高さを画像の高さに合わせる */
	text-align: center; /* 画像を中央揃え */
	position: relative; /* 必要に応じて位置を調整 */
}
.ttl h2.a2 {
	font-size: 0; /* 文字を非表示にする */
	background-image: url(../img/bg002.jpg);
	background-size: contain; /* 画像を枠内に収める */
	background-position: center; /* 画像を中央に配置 */
	background-repeat: no-repeat; /* 画像を繰り返さない */
	width: 100%; /* 幅を100%に設定 */
	height: 200px; /* 高さを画像の高さに合わせる */
	text-align: center; /* 画像を中央揃え */
	position: relative; /* 必要に応じて位置を調整 */
}
.ttl h2.a3 {
	font-size: 0; /* 文字を非表示にする */
	background-image: url(../img/bg003.jpg);
	background-size: contain; /* 画像を枠内に収める */
	background-position: center; /* 画像を中央に配置 */
	background-repeat: no-repeat; /* 画像を繰り返さない */
	width: 100%; /* 幅を100%に設定 */
	height: 200px; /* 高さを画像の高さに合わせる */
	text-align: center; /* 画像を中央揃え */
	position: relative; /* 必要に応じて位置を調整 */
}
.ttl h2.a4 {
	font-size: 0; /* 文字を非表示にする */
	background-image: url(../img/bg004.jpg);
	background-size: contain; /* 画像を枠内に収める */
	background-position: center; /* 画像を中央に配置 */
	background-repeat: no-repeat; /* 画像を繰り返さない */
	width: 100%; /* 幅を100%に設定 */
	height: 200px; /* 高さを画像の高さに合わせる */
	text-align: center; /* 画像を中央揃え */
	position: relative; /* 必要に応じて位置を調整 */
}
.ttl p {
  font-weight: normal;
  display: block;
  padding: 0;
  margin: 2em 0;
}
.sec_wrap {
  width: var(--w-basesize);
  margin: 0 auto;
}
.bg_02a {
  background: #074B4B;
}
.sec_wrap h2 {
  font-size: 1.8em;
}
.sec_wrap p {
  text-align: left;
}
.sec_wrap:first-child {
  margin: 0 auto;
}
.sec_wrap:not(:first-child) {}
.sec_wrap:last-child {
  margin-bottom: 0;
}
.item {
    position: relative; /* 親要素に相対位置を設定 */
    width: 100%; /* 必要に応じて追加 */
    margin: 0; /* 必要に応じて追加 */
    padding: 0; /* 必要に応じて追加 */
    box-sizing: border-box; /* 必要に応じて追加 */	
}

.item:first-child {
  margin: 0 auto;
}
.item:not(:first-child) {
  margin-top: 3em;
}
.item:last-child {
  margin-bottom: 0;
}

.contents-set-img_l-name {
  position:relative;
    width: 100%; /* 横幅を100%に設定 */
    height: auto; /* 必要に応じて高さを設定 */
    margin: 0;
    padding: 0;
    display: block;
    text-align: left;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-bottom: solid 8px #F49012;
    box-sizing: border-box; /* 必要に応じて追加 */
}

.contents-set-img_l-name h3 {
    font-size: 2em;
    margin: 0;
    padding:  0.6em 0 0.6em 2em;
    color: #FFFD00;
    background: hsla(222, 100%, 17%, 1.00);
    font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif; /* 日本語ゴシック体を指定 */
    font-weight: 900; /* 太字を強調 */
}

div.hard{
  position: absolute;
  top:25%;
  right:2%;
display: flex;
}
div.hard span.ns{
  display: block;
  background: #FF0004;
  color:#FFFFFF;
  font-weight: bold;
  padding: 0.2em 0.8em;
  border-radius: 10px;
  border: solid 2px #FFF500;
 font-size: 1.6rem;
 margin: 0 0 0 0.5em;
  }
span.ds3{
  display: block;
  background: #7BA3B5;
  color:#FFFFFF;
  font-weight: bold;
  padding: 0.2em 0.8em;
  border-radius: 10px;
  border: solid 2px #FFF500;
 font-size: 1.6rem;
 margin: 0 0 0 0.5em;
  }
span.ps5{
  display: block;
  background: #8E8E8E;
  color:#FFFFFF;
  font-weight: bold;
  padding: 0.2em 0.8em;
  border-radius: 10px;
  border: solid 2px #FFF500;
 font-size: 1.6rem;
 margin: 0 0 0 0.5em;
  }
    span.ps4{
  display: block;
  background: #00BBFF;
  color:#FFFFFF;
  font-weight: bold;
  padding: 0.2em 0.8em;
  border-radius: 10px;
  border: solid 2px #FFF500;
 font-size: 1.6rem;
 margin: 0 0 0 0.5em;
  }

@keyframes sway {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.ureta {
    position: absolute;
    top: 10px; /* 必要に応じて調整 */
    left: 30px; /* 必要に応じて調整 */
    font-size: 0; /* テキストを非表示にする */
    width: 150px; /* 画像の幅を150pxに設定 */
    height: 173px;
    background-image: url(../img/ureta.png); /* 画像のパスを指定 */
    background-size: contain; /* 画像をコンテナに収める */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-position: center; /* 画像を中央に配置 */
    animation: sway 2s infinite; /* アニメーションを設定 */
}
.ico-chumoku {
    position: absolute;
    top: 10px; /* 必要に応じて調整 */
    left: 30px; /* 必要に応じて調整 */
    font-size: 0; /* テキストを非表示にする */
    width: 150px; /* 画像の幅を150pxに設定 */
    height: 173px;
    background-image: url(../img/chumoku.png); /* 画像のパスを指定 */
    background-size: contain; /* 画像をコンテナに収める */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-position: center; /* 画像を中央に配置 */
    animation: sway 2s infinite; /* アニメーションを設定 */
}

.contents-set-1w {
  margin: 2em;
  display: flex;
  flex-direction: column; /* 縦積みにする */
}

.contents-set-1w div.cs_image {
  box-sizing: border-box;
  width: 100%; /* 幅を100%に設定 */
}

.contents-set-1w div.cs_image img {
  width: 100%;
}

.contents-set-1w div.cs_text {
  box-sizing: border-box;
  width: 100%; /* 幅を100%に設定 */
}

.contents-set-1w div.cs_text p {
  margin: 1em 0; /* 上下の余白を設定 */
  font-weight: bold;
}
.contents-set-2w {
  margin: 2em;
  display: flex;
}
.contents-set-2w div.cs_image {
  box-sizing: border-box;
  width: 40%;
}
.contents-set-2w div.cs_image img {
  width: 100%;
}
.contents-set-2w div.cs_text {
  box-sizing: border-box;
  width: 60%;
}
.contents-set-2w div.cs_text p {
  margin: 0 0 0 2em;
  font-weight: bold;
}
.wrap-container {
  margin: 0 1em;
}
.wrap-container:not(:first-child) {
  margin-top: 3em;
}
.wrap-container:last-child {
  margin-bottom: 0;
}
.wrap-container p {
  margin-top: 2em;
}
div.cat_title {
  display: block;
  padding: 0;
}
div.cat_title h2 {
  color: #FFF979;
  text-align: center;
  background: #A24600;
  padding: 0.6em;
}
/*--------------------------------------------------------------------------------まわりこみあり 左右*/
.p_n, .p_l, .p_r {
  padding: 0 1em;
  overflow: hidden;
  margin: 2em auto;
}
.p_n p, .p_l p, .p_r p {
  font-weight: normal;
  display: block;
  padding: 0;
  margin: 0;
  font-size: 1em;
}
.p_n img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.p_l img.pr56w {
  float: left;
  max-width: 56%;
  height: auto;
  margin: 0 2em 2em 0;
}
.p_l img.pr35w {
  float: left;
  max-width: 35%;
  height: auto;
  margin: 0 2em 2em 0;
}
.p_l img.pr45w {
  float: left;
  max-width: 45%;
  height: auto;
  margin: 0 2em 2em 0;
}
.p_r img.pr35w {
  float: right;
  max-width: 35%;
  height: auto;
  margin: 0 0 2em 2em;
}
.p_r img.pr45w {
  float: right;
  max-width: 45%;
  height: auto;
  margin: 0 0 2em 2em;
}
.p_r img.pr48w {
  float: right;
  max-width: 48%;
  height: auto;
  margin: 0 0 1em 2em;
}
.p_r img.pr56w {
  float: right;
  max-width: 56%;
  height: auto;
  margin: 0 0 1em 2em;
}
.container-lr_con {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 2em auto;
}
.container-lr_con h2 {
  color: #004C93;
  margin: 0;
  border-bottom: 2px solid #4861C1;
}
.container-lr_con-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: solid 4px #B7D8FF; /* 全方向にボーダーを適用 */
  border-top: none; /* 上のボーダーをなしにする */
  padding: 20px;
  background: #DFF3FF;
  box-sizing: border-box;
}
.container-lr_con-item img {
  width: 25%;
  height: auto;
}
.container-lr_con-item-text {
  width: 75%;
}
.container-lr_con-item-text p {
  margin: 1em 0 0 0;
  padding: 0;
}
/* 偶数番目の項目は逆方向に並べる */
.container-lr_con-item.reverse {
  flex-direction: row-reverse;
}
/* 三角形のデザイン */
.arrow-down {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #004C93; /* 三角形の色 */
  margin: 20px auto; /* 中央に配置 */
}
/* 初期状態: 非表示 */
.animate-item {
  opacity: 0;
  transform: translateY(50px); /* 下からスライドする */
  transition: all 0.6s ease-out;
}
/* 表示状態 */
.animate-item.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 遅延スタイル */
.animate-item:nth-child(1) {
  transition-delay: 0.2s;
}
.animate-item:nth-child(2) {
  transition-delay: 0.4s;
}
.animate-item:nth-child(3) {
  transition-delay: 0.6s;
}
.con-w2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* ボックスの配置を中央揃え */
  gap: 0; /* ボックス間のスペース */
  margin: 2em 0;
}
.con-w2-box {
  width: calc(50% - 0px); /* ボックスの幅を33.333%にし、間隔を差し引く */
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.con-w2-box h2.name {
  position: relative;
  padding: .2em .3em .2em;
  border-bottom: 3px solid #228B79;
  margin: 0 0 0;
  color: #004C93;
  background: #C9FFD4;
  font-size: 1.6em;
}
.con-w2-box p {
  margin: 0;
  padding: 1em;
}
.con-w3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* ボックスの配置を中央揃え */
  gap: 20px; /* ボックス間のスペース */
  margin: 2em 0;
}
.con-w3-box {
  width: calc(33.333% - 20px); /* ボックスの幅を33.333%にし、間隔を差し引く */
  background-color: #FFFFFF;
  border: 3px solid #228B79;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.con-w3-box h2.name {
  position: relative;
  padding: .2em .3em .2em;
  border-bottom: 3px solid #228B79;
  margin: 0 0 0;
  color: #004C93;
  background: #C9FFD4;
  font-size: 1.6em;
}
.con-w3-box h2.name::before, .con-w3-box h2.name::after {
  position: absolute;
  left: 30px;
  bottom: -15px;
  width: 30px;
  height: 15px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
}
.con-w3-box p {
  padding: 1em 1em 1em;
}
.con-w3 .con-w3-box:nth-child(4), .con-w3 .con-w3-box:nth-child(5) {
  width: calc(33.333% - 20px); /* 同じ幅にする */
}
div.wrap_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 要素間のスペースを調整 */
  justify-content: space-between;
  margin: 0 auto;
}
div.wrap_flex div.item-w2 {
  flex: 1 1 calc(50% - 20px); /* 2列に分ける */
  width: 50%;
  background: #FFFFFF;
  box-sizing: border-box;
  text-align: center;
}
div.wrap_flex div.item-w2 h2 {
  font-size: 2.6rem;
  font-weight: bold;
  color: var(--point-color04);
  padding: 0.3em;
  background: #FFFECE;
}
div.wrap_flex div.item-w2 p {
  padding: 0.5em;
  text-align: left;
}
div.wrap_flex div.item-w2 img {
  margin-top: 1em;
}
div.wrap_flex div.item-w3 {
  flex: 1 1 calc(33.3% - 20px); /* 3列に分ける */
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
  text-align: center; /* センター揃え */
  padding: 5px; /* 画像と枠の間に余白を設定 */
}
div.wrap_flex div.item-w4 {
  flex: 1 1 calc(25% - 20px); /* 4列に分ける */
  text-align: left;
  border-radius: 0 0 10px 10px;
  width: 50%;
  background: #FFFFFF;
  outline: 1px solid #969696;
  box-sizing: border-box;
}
div.wrap_flex div.item-w4 h2 {
  font-weight: bold;
  color: var(--point-color04);
  padding: 0.3em;
  background: #FFFECE;
}
div.wrap_flex div.item-w4 p {
  padding: 0.5em;
}
div.wrap_flex div.item-w6 {
  flex: 0 1 calc(16.66% - 10px); /* 横6列に分ける */
  box-sizing: border-box;
  text-align: center; /* センター揃え */
  padding: 5px; /* 画像と枠の間に余白を設定 */
}
div.wrap_flex div.item-w6 img {
  width: 100%; /* 枠の幅に合わせて画像を最大化 */
  height: auto; /* 画像の縦横比を維持 */
  display: block; /* 余白を除去 */
}
.frame-container {
  width: 100%; /* 横幅を画面幅の95%に設定 */
  overflow: auto; /* 縦横スクロールを許可 */
  -webkit-overflow-scrolling: touch; /* スマホでスムーズスクロール */
  margin: 2em auto; /* フレームを中央に配置 */
}
table {
  min-width: 100%; /* テーブルの最小幅を親要素の幅に合わせる */
  border-collapse: collapse;
  text-align: center;
  table-layout: auto; /* セル幅を内容に応じて自動調整 */
  white-space: nowrap; /* 改行を防止 */
  font-size: 1.1rem;
  font-weight: bold; /* 太字 */
}
th, td {
  border: 1px solid #000;
  padding: 8px;
  text-align: center; /* 左右中央揃え */
  vertical-align: middle; /* 上下中央揃え */
  font-weight: bold; /* 太字 */
}
th.border_w1px {
  border-bottom: 1px solid #FFFFFF;
  border-left: 2px solid #FFFFFF;
}
th.spec0 {
  position: sticky;
  left: 0;
  z-index: 3; /* 他のセルより前面に表示 */
}
td.spec1 {
  border-bottom: 1px solid #000000;
  color: white;
  background: #747474;
  position: sticky;
  left: 0;
  z-index: 1; /* 他のセルより前面に表示 */
}
/* ヘッダー部分も固定 */
thead th {
  position: sticky;
  top: 0;
  background-color: #333;
  color: #fff;
  z-index: 2; /* 左列より前面に表示 */
}
th {
  background-color: #AB0002;
  color: #fff;
}
td {
  background-color: #fff;
}
/*--------------------------------------------------------------------------------左右 横並び 2ボックス */
.column_w2 {
  display: flex;
  margin: 0 2em 3em;
  align-items: center;
justify-content:center;
}
.column_w2> * {
  min-width: 0;
  width: 400px;
}
.column_w2-con {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: center;
  background: #FFFFFF;
  border: solid 3px #CFCFCF;
  border-radius: 20px;
  box-sizing: border-box;
}
.column_w2-con h2 {
  font-size: 1.4em;
  line-height: 1.2em;
  color: #004D58;
  margin: 0;
  padding: 1em 0 0 ;
}
.column_w2-con img {
  width: 90%;
  height: auto;
  margin: 2em auto 0;
}
.column_w2-con p {
  padding: 1em;
  margin: 0;
  text-align: left;
}
.column_w2-con:nth-child(1) {
margin-right:20px;
}
.column_w2-con:nth-child(2) {
margin-left:20px;
}