@charset "utf-8";
/*  共通 -------------------- */
:root {
  --color-white: #fff;
  --color-navy: #1a3660;
  --color-gold: #957555;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.5em;
  color: var(--color-navy);
  width: 1440px;
  margin: 0 auto;
}
.notoSerifJP {
  font-family: "Noto Serif JP", serif;
}
h1 {
  font-size: 41px;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 25px;
}
h2 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
h3 {
  font-size: 28px;
  letter-spacing: 0.5em;
}
h4 {
  background-image: linear-gradient(to bottom, #93baf4, #274b82);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  font-size: 22px;
  color: transparent;
}
.br {
  display: block;
}
.font-white {
  color: var(--color-white);
}
.font-gold {
  color: var(--color-gold);
}
/*  コンポーネント -------------------- */
/*  ボタン ----- */
.btn-container {
  text-align: center;
}
/* ボタン背景 */
.btn {
  color: #5d452d;
  background: linear-gradient(to right, #b08d6b 0%, #f8f3e3 50%, #b08d6b 100%);
  border-radius: 5px;
  display: inline-block;
  width: 460px;
  height: 100px;
  background-size: 200% 100%;
  line-height: 100px;
  position: relative;
  text-align: left;
  padding-left: 32px;
  filter: drop-shadow(0 0 20px rgba(26, 54, 96, 0.25));
  z-index: 1;
  transition: 0.3s;
}
/* ボタンホバーアニメーション */
.btn:hover {
  background-position: 100% 0;
}
/* ボタン枠線 */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* 枠の太さ */
  border-radius: 5px; /* 同じ角丸 */
  background: linear-gradient(
    to right,
    #f4eddc,
    #ad8660
  ); /* グラデーション線 */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* Safari */
  mask-composite: exclude; /* Chrome, Edge, Firefox */
  z-index: -1;
}
/* ボタン矢印 */
.btn::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-right: 2px solid #5d452d;
  border-bottom: 2px solid #5d452d;
  position: absolute;
  top: 50%;
  left: 425px;
  transform: translateY(-50%) rotate(-45deg);
}
.fs-28px {
  font-size: 28px;
}
.fs-25px {
  font-size: 25px;
}
/* マーカー */
.marker {
  display: inline;
  background: linear-gradient(transparent 60%, rgba(209, 188, 162, 0.6) 40%);
}
/*  header -------------------- */
.header {
  background: url(../img/header_bg.jpg) no-repeat center/cover;
  width: 100%;
  padding: 32px 120px 0;
  position: relative;
}
.logo {
  font-size: 20px;
  margin-bottom: 100px;
}
.copy {
  font-size: 54px;
  letter-spacing: 0.15em;
  font-weight: 700;
  margin-top: 82px;
  margin-bottom: 70px;
}
.increase {
  width: 224px;
  vertical-align: text-bottom;
}
.header-h2 {
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 130px;
}
.date-time {
  font-size: 28px;
  margin-bottom: 16px;
}
.header-h2::before,
.header-h2::after {
  content: "";
  background-color: var(--color-white);
  display: inline-block;
  width: 18px;
  height: 1px;
}
.date {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 0.11em;
}
.target-laurel-container {
  display: flex;
  width: 1200px;
  justify-content: space-between;
  align-items: flex-end;
}
.target-container {
  margin-top: 24px;
}
.target {
  border: 2px solid red;
  border-image: linear-gradient(55deg, #757575, #c4c1c1, #fff, #c4c1c1, #757575)
    1;
  width: 120px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin-bottom: 14px;
}
.list-item {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.list-icon {
  position: relative;
}
.list-icon::before {
  content: "";
  display: inline-block;
  background-color: var(--color-white);
  border-radius: 50px;
  width: 25px;
  height: 25px;
}
.list-icon::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 13px;
  border-right: 3px solid var(--color-navy);
  border-bottom: 3px solid var(--color-navy);
  position: absolute;
  top: calc(50% - 5px);
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.saburo {
  position: absolute;
  top: 170px;
  left: 65%;
  filter: drop-shadow(8px 0 23px rgba(0, 0, 0, 0.6));
}
.vertical01,
.vertical02 {
  position: absolute;
  font-size: 20px;
  writing-mode: vertical-rl;
}
.vertical01 {
  letter-spacing: 0.15em;
  top: 400px;
  left: 1269px;
}
.vertical02 {
  letter-spacing: 0.5em;
  top: 468px;
  left: 1239px;
}
.laurel-container {
  display: flex;
  gap: 21px;
  z-index: 1;
}
.laurel01,
.laurel02,
.laurel03 {
  position: relative;
}
.sentence-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 115px;
}
.sentence01,
.sentence02,
.sentence03 {
  background-image: linear-gradient(to bottom, #fcf9ee 30%, #977656 100%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0;
}
.laurel01 .sentence01,
.laurel01 .sentence02 span,
.laurel01 .sentence03,
.laurel02 .sentence01,
.laurel02 .sentence02,
.laurel02 .sentence03 span,
.laurel03 .sentence01,
.laurel03 .sentence02 span {
  font-size: 16px;
}
.laurel01 .sentence02,
.laurel02 .sentence03,
.laurel03 .sentence02 {
  font-size: 30px;
}
.laurel03 .sentence01 span {
  font-size: 12px;
}
.ellipse {
  display: inline-block;
  background-image: linear-gradient(
    to bottom,
    rgba(25, 50, 88, 0.2),
    rgba(25, 50, 88, 0.59)
  );
  backdrop-filter: blur(10px);
  border-radius: 100px;
  width: 192px;
  height: 192px;
  position: relative;
}
.ellipse::before,
.ellipse::after {
  content: "";
  background: url(../img/laurel.svg) no-repeat center/contain;
  display: inline-block;
  width: 77.77px;
  height: 165.96px;
  position: absolute;
  top: 9px;
}
.ellipse::before {
  left: 2px;
}
.ellipse::after {
  transform: scale(-1, 1);
  right: 2px;
}
.caution {
  font-size: 14px;
  text-align: right;
}
/*  worries -------------------- */
.worries {
  background-image: linear-gradient(
    -45deg,
    rgba(218, 235, 243, 1),
    rgba(218, 235, 243, 0.1)
  );
  padding-top: 350px;
  padding-bottom: 90px;
  position: relative;
}
/* 三角形 */
.worries::before {
  content: "";
  display: block;
  background-color: #11203a;
  height: 77px;
  width: 1440px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: scaleY(-1);
  position: absolute;
  top: 0;
}
/* 人物 */
.worries::after {
  content: "";
  display: block;
  background-image: url(../img/worries.png);
  width: 438px;
  height: 537px;
  position: absolute;
  top: 380px;
  left: 210px;
}
.float {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.16));
  border: 1px solid var(--color-white);
  width: 540px;
  height: 251px;
  text-align: right;
  margin: 0 auto;
  padding: 20px 40px;
  position: relative;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.float::before,
.float::after {
  content: "";
  display: inline-block;
  background: url(../img/checklist.svg) no-repeat center/contain;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.16));
  width: 97.28px;
  height: 125.39px;
  position: absolute;
}
.float::before {
  top: -17px;
  left: 53px;
  z-index: 1;
}
.float::after {
  top: -24px;
  left: 35px;
  transform: rotate(-12deg);
  z-index: -1;
}
.float-text {
  font-weight: 600;
  text-align: left;
  display: inline-block;
  width: 328px;
  margin-bottom: 21px;
}
.checklist {
  font-size: 24px;
}
.worries-h2 {
  text-align: center;
  display: block;
  width: 700px;
  margin: 0 auto;
  margin-bottom: 80px;
}
.nayami {
  font-size: 44px;
  position: relative;
}
/* 傍点 */
.nayami::before {
  content: "";
  display: inline-block;
  background-color: var(--color-gold);
  border-radius: 50px;
  width: 10px;
  height: 10px;
  position: absolute;
  top: -0.2em;
  left: 50%;
  transform: translate(-50%, 0);
}
.worry01,
.worry02,
.worry03 {
  width: 500px;
  height: 95px;
  line-height: 95px;
  text-align: center;
  background-color: var(--color-white);
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.16));
  margin-left: 680px;
}
.worry01 {
  margin-bottom: 40px;
}
.worry02 {
  margin-left: 760px;
  margin-bottom: 40px;
}
.foryou {
  background-image: linear-gradient(to bottom, #274a82, #0f203a);
  padding-top: 64px;
  padding-bottom: 64px;
}
.foryou-fukidashi {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2em;
  background-color: var(--color-white);
  width: 240px;
  height: 51px;
  line-height: 51px;
  text-align: center;
  margin: 0 auto;
  position: relative;
  margin-bottom: 30px;
}
/* 三角形 */
.foryou-fukidashi::before {
  content: "";
  display: block;
  background-color: var(--color-white);
  height: 16px;
  width: 25px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  position: absolute;
  top: 47px;
  left: 50%;
  transform: translateX(-50%) scaleY(-1);
}
.foryou-text {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
}
.contents-bg {
  background: url(../img/contents_bg.jpg) no-repeat center/cover;
  padding-top: 80px;
  padding-bottom: 80px;
}
.contents-container {
  margin-left: 650px;
  margin-bottom: 64px;
  width: 670px;
  height: 450px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-content: space-between;
  counter-reset: number 0;
  position: relative;
}
.contents-container::after {
  content: "";
  display: inline-block;
  background: url(../img/money.svg) no-repeat center/cover;
  width: 142px;
  height: 127px;
  margin-top: 20px;
  margin-left: 15px;
}
.item {
  background-color: var(--color-white);
  flex-basis: 28.5%;
  height: 190px;
  filter: drop-shadow(0 0 20px rgba(28, 57, 101, 0.23));
  position: relative;
  padding-top: 23px;
}
/* カウンター */
.item::before {
  counter-increment: number 1;
  content: counter(number, decimal-leading-zero);
  background-image: linear-gradient(135deg, #93baf4, #274b82);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 50px;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.18));
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 40px;
  position: absolute;
  top: -25px;
  left: 0;
}
.item-title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 34px;
  position: relative;
}
.item-title::after {
  content: "";
  display: inline-block;
  background-color: var(--color-gold);
  width: 30px;
  height: 2px;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
}
.item-text {
  width: 165px;
  margin: 0 auto;
}
.worries-suggest {
  width: 680px;
  height: 115px;
  line-height: 1.8;
  text-align: center;
  padding-top: 22px;
  margin: 0 auto 64px;
  background-color: rgba(255, 255, 255, 0.7);
}
/*  introduce -------------------- */
.introduce {
  background: url(../img/introduce_bg.jpg) no-repeat center/cover;
  padding: 64px 120px;
  position: relative;
}
.introduce::after {
  content: "";
  display: block;
  background: url(../img/naname.png) no-repeat center/cover;
  width: 100%;
  height: 460px;
  position: absolute;
  top: 470px;
  left: 0;
}
.introduce h2 {
  text-align: center;
  margin-bottom: 100px;
  position: relative;
}
.introduce h2::after {
  content: "";
  display: block;
  background-color: var(--color-white);
  width: 60px;
  height: 2px;
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
}
.introduce h3 {
  padding-bottom: 18px;
  font-weight: 700;
  position: relative;
}
/* 経歴の縦線 */
.introduce h3::after {
  content: "";
  display: block;
  background-color: var(--color-gold);
  width: 1px;
  height: 340px;
  position: absolute;
  top: 53px;
  left: 6px;
}
.introduce h4 {
  padding-bottom: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
}
/* 経歴の丸 */
.introduce h4::before {
  content: "";
  display: block;
  background-color: var(--color-gold);
  width: 13px;
  height: 13px;
  border-radius: 50px;
}
.introduce-conteiner {
  display: flex;
  justify-content: space-between;
}
.introduce-career {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.72),
    rgba(255, 255, 255, 1)
  );
  padding: 30px 37px;
  border-radius: 10px;
  border: 1px solid var(--color-white);
  filter: drop-shadow(8px 8px 20px rgba(0, 0, 0, 0.16));
  z-index: 1;
}
.introduce-text {
  padding-left: 23px;
  padding-bottom: 16px;
}
.introduce-conteiner img {
  display: inline-block;
  width: 362px;
  height: 547px;
  filter: drop-shadow(8px 8px 20px rgba(0, 0, 0, 0.2));
  z-index: 1;
}
.introduce-name {
  width: 300px;
  height: 105px;
  padding: 18px 45px;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1)
  );
  border: 1px solid rgba(255, 255, 255, 0.8);
  transform: skewX(-17deg);
  backdrop-filter: blur(10px);
  position: absolute;
  top: 662px;
  left: 1020px;
  z-index: 2;
}
.introduce-name p {
  font-weight: 600;
  letter-spacing: 0.3em;
}
.introduce-name p.position {
  font-size: 20px;
  margin-bottom: 10px;
}
.introduce-name p.fullname {
  font-size: 28px;
  margin-left: 25px;
}
/*  voice -------------------- */
.voice {
  background-image: linear-gradient(to bottom, #11223d, #26487e);
  padding-top: 58px;
  padding-bottom: 80px;
}
.voice h2 {
  text-align: center;
  margin-bottom: 82px;
  position: relative;
}
.voice h2::after {
  content: "";
  display: block;
  background-color: var(--color-white);
  width: 60px;
  height: 2px;
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
}
.voice-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 64px;
}
.voice-img {
  width: 523px;
  height: 335px;
  position: relative;
  z-index: 1;
}
.voice-img::before {
  content: "";
  display: block;
  background-color: #c8cfdc;
  width: 523px;
  height: 335px;
  position: absolute;
  top: -16px;
  left: -16px;
  transform: rotate(-2deg);
  z-index: -1;
}
.voice-item {
  display: flex;
  background-color: var(--color-white);
  width: 620px;
  height: 150px;
  border-radius: 30px 30px 30px 0;
  padding: 23px;
}
.voice-item:first-child {
  margin-bottom: 35px;
}
.voice-item img {
  width: 103px;
  height: 103px;
}
.voice-item p {
  line-height: 104px;
  padding-left: 32px;
}
/*  faq -------------------- */
.faq {
  background-image: url(../img/faq_bg.jpg);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
.faq h2 span {
  margin-bottom: 16px;
}
.faq-container {
  display: inline-block;
  width: 800px;
  margin-top: 64px;
  margin-bottom: 140px;
}
.faq-item {
  background-color: var(--color-white);
  filter: drop-shadow(0 0 20px rgba(26, 54, 96, 0.19));
  padding: 24px 32px;
  display: grid;
  grid-template-columns: 5% 95%;
  row-gap: 16px;
}
.faq-item:not(:last-child) {
  margin-bottom: 24px;
}
.faq-icon {
  font-weight: 600;
}
.faq-text {
  text-align: left;
}
.faq-suggest {
  margin-bottom: 64px;
  position: relative;
}
.faq-suggest::before,
.faq-suggest::after {
  content: "";
  display: inline-block;
  background: url(../img/checklist.svg) no-repeat center/contain;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.16));
  width: 97.28px;
  height: 125.39px;
  position: absolute;
}
.faq-suggest::before {
  top: -35px;
  left: 340px;
  z-index: 1;
}
.faq-suggest::after {
  top: -40px;
  left: 330px;
  transform: rotate(-12deg);
  z-index: 0;
}
.fw-600 {
  font-weight: 600;
}
/*  footer -------------------- */
.footer {
  background-image: linear-gradient(to bottom, #26487e, #0a1727);
  padding-top: 68px;
  padding-bottom: 68px;
  text-align: center;
  font-size: 16px;
}
.disclaimer {
  margin-bottom: 32px;
}
.fs-12px {
  font-size: 12px;
}
.footer small {
  margin-top: 8px;
}