@charset "utf-8";

body {
  margin: 0;
}

a {
  color:#FFF;
  }
  
.mw_auto {
  margin:0 auto;
}

.mw100 {
  max-width: 100%;
}

.pr {
  position: relative;
}

.midashi01 {
  padding: 0 5% 0 5%;
  color: #ecffe9;
  text-align: center;
}

.midashi02 {
  font-weight: bold;
}

.pa01 {
  position: absolute;
  left: 0%;
  top: 20%;
}
.pa02 {
  position: absolute;
  left: 10%;
  top: 20%;
}

.top2 {
  max-width: 1080px;
  margin: 0 auto;
}
.tb01 {
  max-width: 90%;
  margin:0 auto;
}

.wrap {
  max-width: 1280px;
  margin:0 auto;
}
.wrap2 {
  background-color: #f5f5f8;
  text-align: center;
}
.wrap3 {
  background-color: #f5f5f8;
  text-align: center;
  padding-top: 20px;
}
.wrap4 {
  width: 92%;
  margin:0 auto;
}

.bg01 {
  background-color: #fff9a7;
}

.animation_box4 {
  animation: fadeIn4 2s ease 0s 1 normal backwards;
}

@keyframes fadeIn4 {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animation_box5 {
  animation: fadeIn5 2.5s ease 0s 1 normal backwards;
}

@keyframes fadeIn5 {
  from {
    opacity: 0;
    transform: translateY(0px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.poyopoyo3 {
  animation: poyopoyo3 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo3 {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
.is-active .migihidari01 {
  animation: migihidari01 1.5s ease 0s 1 normal backwards;
}
@keyframes migihidari01 {
  from {
    opacity: 0;
    transform: translateX(500px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.is-active .hidarimigi01 {
  animation: hidarimigi 2s ease 0s 1 normal backwards;
}
@keyframes hidarimigi {
  from {
    opacity: 0;
    transform: translateX(-300px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animation_box{
  display: none;
}

.is-active .animation_box {
  animation: fadeIn 2s ease 0s 1 normal backwards;
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.is-active .animation_box2 {
  animation: fadeIn2 2.5s ease 0s 1 normal backwards;
}

@keyframes fadeIn2 {
  from {
    opacity: 0;
    transform: translateY(0px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.is-active .animation_box3 {
  animation: fadeIn3 2s ease 0s 1 normal backwards;
}

@keyframes fadeIn3 {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.is-active .poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}

.is-active .poyoyon2 {
  animation: poyoyon2 1s ease-in-out 1s;
}
@keyframes poyoyon2 {
  0%  {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  15% {
    transform: scale(0.98, 0.9) translate(0, 5px);
  }
  30% {
    transform: scale(1.02, 1.0) translate(0, 8px);
  }
  50% {transform: scale(0.98, 1.05) translate(0, -8px);
  }
  70% {
    transform: scale(1.0, 0.9) translate(0, 5px);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0, 0);
  }
  0%, 100% {
    opacity: 1;
  }
}

.kasen {
   background:linear-gradient(transparent 60%, #ff6 60%);
  }

/* タイトル付き（ラベルボックス） */
.box5-2 {
    position: relative; /* タイトルの配置調整のために基準を設定 */
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    border: 2px solid #d11800; /* ボックスの線 (太さ・種類・色) */
}

.box5-2 .box-title {
    position: absolute; /* タイトルをボックス内で絶対位置指定 */
    top: -0.5em; /* 上方向に少し移動 */
    left: 1em; /* 左端からの距離 */
    background-color: #fff; /* タイトル背景色 */
    color: #d11800; /* タイトルの文字色 */
    padding: 0 .5em; /* タイトルの内側余白 */
    font-weight: bold; /* タイトルのフォントを太字に */
    line-height: 1; /* タイトルの行の高さ */
    display: inline-block; /* タイトルの幅を内容に合わせる */
    width: auto; /* タイトル幅を内容に応じて可変にする */
    max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
    white-space: nowrap; /* タイトルを1行に固定 */
    overflow: hidden; /* はみ出した部分を非表示 */
    text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-2 .box-content {
    padding: 2em; /* ボックス内コンテンツの余白を設定 */
    text-align: left;
    line-height: 1.6rem;
}

.box5-2 p {
    margin: 0; /* 段落の余白をなくして統一感を持たせる */
}

/* メモボックス全体のスタイル */
.box6-1 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 1em 2em 1.5em; /* 上下・左右の余白 */
    background-color: #E8EAF0; /* 背景色 */
    border-radius: 10px; /* ボックスの角の丸み */
    text-align: left;
}

/* メモボックスのタイトル部分 */
.box6-1 .box-title {
    color: #253973; /* タイトル文字の色 */
    font-size: 1.1em; /* タイトル文字の大きさ */
    font-weight: bold; /* 太字 */
    padding-bottom: 10px;
}

/* タイトル部分のアイコン */
.box6-1 .box-title::before {
    font-family: "Font Awesome 5 Free"; /* アイコンのフォント */
    content: "\f304"; /* メモアイコンのUnicode */
    margin-right: 5px; /* アイコンと文字の間隔 */
}

/* pタグのmarginを0にする */
.box6-1 p {
    margin: 0;
}

/* メモボックス全体のスタイル */
.box6-2 {
    margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
    padding: 1em 2em 1.5em; /* 上下・左右の余白 */
    background-color: #e8f0e9; /* 背景色 */
    border-radius: 10px; /* ボックスの角の丸み */
    text-align: left;
}

/* メモボックスのタイトル部分 */
.box6-2 .box-title {
    color: #116711; /* タイトル文字の色 */
    font-size: 1.1em; /* タイトル文字の大きさ */
    font-weight: bold; /* 太字 */
    padding-bottom: 10px;
}

/* タイトル部分のアイコン */
.box6-2 .box-title::before {
    font-family: "Font Awesome 5 Free"; /* アイコンのフォント */
    content: "\f304"; /* メモアイコンのUnicode */
    margin-right: 5px; /* アイコンと文字の間隔 */
}

/* pタグのmarginを0にする */
.box6-2 p {
    margin: 0;
}

/* マージン */
.mt15 {
  margin-top: 15px;
}
.mt30 {
  margin-top: 30px;
}
.mt45 {
  margin-top: 45px;
}
.mt60 {
  margin-top: 60px;
}

/* 見出し */
.heading-21 {
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 3px solid #46950a;
    color: #333333;
}
.heading-21::before,
.heading-21::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.heading-21::before {
    background-color: #46950a;
}

.heading-21::after {
    bottom: -11px;
    background-color: #fff;
}

.heading-16 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
}

.heading-16::before,
.heading-16::after {
    width: 3px;
    height: 40px;
    background-color: #46950a;
    content: '';
}

.heading-16::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-16::after {
    transform: rotate(35deg);
    margin-left: 30px;
}

.heading-16-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
}

.heading-16-2::before,
.heading-16-2::after {
    width: 3px;
    height: 40px;
    background-color: #2589d0;
    content: '';
}

.heading-16-2::before {
    transform: rotate(-35deg);
    margin-right: 30px;
}

.heading-16-2::after {
    transform: rotate(35deg);
    margin-left: 30px;
}

.heading-25 {
    position: relative;
    padding-top: .75em;
    color: #333333;
}

.heading-25::before {
    position: absolute;
    bottom: .5em;
    z-index: -1;
    color: #d9f4ff;
    font-size: 1.5em;
    line-height: 1;
    content: attr(data-word);
    pointer-events: none;
}

.heading-01 {
  padding: 0.5em;/*文字周りの余白*/
  color: #333;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #E26B5D;/*左線（実線 太さ 色）*/
}

/* テキスト */

.lh15 {
  line-height: 1.5rem;
}

.gyokan16 {
  line-height: 1.6rem;
}

.futoji {
  font-weight: bold;
}

.kakaku {
  color: #d11800;
  font-weight: bold;
}
.mojidai {
  font-size: 1.1rem;
  line-height: 2rem;
}

/* テーブル */
table{
  width: 100%;
  padding-left: 30px;
}

table th{
  position: relative;
  text-align: left;
  width: 50%;
}

table th:after{
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background-color: #333;
  position: absolute;
  top:calc(50% - 1px);
  right:-15px;
}

table td{
  text-align: left;
  padding:7px 0 7px 60px;
  width: 50%;
}

.ta01 {
  font-size: 0.8rem;
  margin-top: 10px;
}
.ta01b {
  border-bottom: 1px solid #4f5c85;
}
.ta01 th {
  border-bottom: 1px solid #4f5c85;
}
.pdr0 {
  padding-left: 0;
}
.tbsen {
  border-top: dotted 1px #116711;
}
.tbsen td,.tbsen th {
  border-bottom: dotted 1px #116711;
}
.senn {
  border-bottom: none!important;
}

/* ボックス */
.box-008 {
    display: flex;
    align-items: center;
    grid-gap: 0 .7em;
    margin: 0 auto;
    padding: 1em;
    border-radius: 5px;
    background-color: #ecffe9;
    color: #333333;
}

.box-008::before {
    width: 16px;
    height: 8px;
    border-bottom: 3px solid #86d67c;
    border-left: 3px solid #86d67c;
    transform: rotate(-45deg) translate(2.5px, -2.5px);
    content: '';
}

.box-008 p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #86d67c;
}

.box-009 {
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid #253973;
    border-radius: 5px;
    color: #333333;
}

.box-009 div {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #253973;
    font-weight: 600;
    vertical-align: top;
}

.box-009 div::before {
    width: 15px;
    height: 7.5px;
    border-bottom: 3px solid #253973;
    border-left: 3px solid #253973;
    transform: rotate(-45deg) translate(2px, -2px);
    content: '';
}

.box-009 p {
    margin: 0;
    padding: 0 1.5em 1em;
}

.box-004 {
    display: flex;
    grid-gap: 0 .7em;
    margin: 0 auto;
    padding: 1em;
    border-radius: 5px;
    background-color: #ffebee;
    color: #333333;
}

.box-004::before {
    width: 24px;
    height: 24px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.box-004 p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #f06060;
}

.box-018 {
    position: relative;
    max-width: 400px;
    margin: 30px auto 0 auto;
    padding: 1em calc(1.5em + 9px);
    border-top: 1px solid #116711;
    border-bottom: 1px solid #116711;
    color: #333;
}

.box-018::before,
.box-018::after {
    position: absolute;
    width: 1px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% + 20px);
    background-color: #116711;
    content: '';
}

.box-018::before {
    left: 9px;
}

.box-018::after {
    right: 9px;
}

.box-015 {
    position: relative;
    max-width: 400px;
    margin: 1em auto;
    padding: 1em 2.5em 1em 1.5em;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 20%);
    background-color: #e1ffe0;
    color: #333333;
}

.box-015::before,
.box-015::after {
    position: absolute;
    content: '';
}

.box-015::before {
    top: -15px;
    right: 10px;
    height: 50px;
    width: 15px;
    border: 3px solid #999;
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 30%);
    transform: rotate(10deg);
}

.box-015::after {
    top: 0;
    width: 10px;
    right: 20px;
    border: solid 5px #e1ffe0;
}

.balloon-006 {
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 400px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    padding: .8em 1.2em;
    border: 3px solid #d11800;
    border-radius: 5px;
    background-color: #fff;
    color: #d11800;
    text-align: center;
    font-weight: bold;
    font-size: 1.3rem;
}

.box-006 {
    display: flex;
    grid-gap: 0 .7em;
    margin: 0 auto;
    padding: 1em;
    border-radius: 5px;
    background-color: #e5f1ff;
    color: #333333;
}

.box-006::before {
    width: 24px;
    height: 24px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%235c7cff'%3E%3C/path%3E%3C/svg%3E");
}

.box-006 p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #5c7cff;
}

.balloon-006::before,
.balloon-006::after {
    position: absolute;
    top: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}

.balloon-006::before {
    background-color: #d11800;
}

.balloon-006::after {
    top: -11px;
    background-color: #fff;
}


/* フローデザイン */

.flow_design09 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow09 {
  padding-left: 0;
  border-bottom: solid 1px #E1E8ED;
}

.flow09 > li {
  list-style-type: none;
  display: flex;
  padding: 20px 0;
  border-top: solid 1px #E1E8ED;
}

.flow09 > li dl dt {
  font-size: 1.2em;
  line-height: 2;
  font-weight: bold;
  margin-bottom: 10px;
}

.flow09 > li .icon09 {
  line-height: 1;
  font-size: 2em;
  font-weight: bold;
  color: #E26B5D;
  text-align: center;
  width: 70px;
  position: relative;
  margin-top: 0;
}

.flow09 > li .icon09::before {
  content: 'STEP';
  font-size: 0.3em;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 1px;
}

.flow09 > li .icon09::after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 40px);
  background-color: #858585;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  margin: auto;
}

.flow09 > li dl dd {
  margin: 0;
}

.flow09 > li dl {
  width: calc(100% - 70px);
  margin-top: 0.8em;
}

/* ボタン */
.button-10 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 250px;
    margin: 0 auto;
    padding: 1em 2em;
    overflow: hidden;
    border: none;
    border-radius: 5px;
    background-color: #2589d0;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
}

.button-10::before {
    display: block;
    position: absolute;
    top: -50%;
    left: -30%;
    transform: rotate(30deg);
    width: 70px;
    height: 100px;
    content: '';
    background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    animation: animation-button-10 2s infinite linear;
}

@keyframes animation-button-10 {
    17% {
        left: 120%;
    }
    100% {
        left: 120%;
    }
}

.button-10:hover {
    background-color: #1579c0;
}