.list {
  padding: 10px;
  color: rgb(51, 207, 12);
}


.doboku-page .list {
  max-width: 960px;
  margin: 0 auto 20px;
  padding-left: 16px;
  padding-right: 16px;
}
@media (max-width: 640px) {
  .doboku-page .list {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}

.item {
  position: relative; /* ← 画像位置を決めるために必要 */
  padding: 10px 40px 10px 30px; /* 右に少し余白を取る */
  margin-bottom: 5px;
  border: 2px solid #2e8ac0;
}

/* 赤色指定（あなたの元コード） */
.item:nth-child(3 of .apple) {
  color: red;
  border-color: red;
}

/* 各 item の右端に画像を配置 */
.item::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;  /* 画像サイズ */
  height: 24px;
  background-image: url('https://cdn-icons-png.flaticon.com/512/415/415733.png'); /* ← 好きな画像URLに変更 */
  background-size: contain;
  background-repeat: no-repeat;
}


.doboku-page {
   background: #f8fafc;
   color: #ffffff;
   padding: 48px 0;
  font-size: 24px;
 }
@media (max-width: 640px) {
  .doboku-page {
    padding: 28px 0;
  }
}
 .doboku-page .container {
   max-width: 960px;
   margin: 0 auto;
   padding: 0 16px;
 }
@media (min-width: 1024px) {
   .doboku-page .container {
     max-width: 1040px;
   }
 }
 .doboku-page section {
   background: #ffffff;
   border-radius: 14px;
   padding: 28px;
   box-shadow: 0 10px 25px rgba(2, 6, 23, 0.08);
   border: 1px solid rgba(15, 23, 42, 0.06);
   margin-bottom: 20px;
 }
@media (max-width: 640px) {
  .doboku-page section {
    padding: 20px;
    border-radius: 12px;
  }
}

.doboku-page section:not(.fv-hero) {
  max-width: 960px;
  margin: 0 auto 20px;
  padding-left: 16px;
  padding-right: 16px;
}
@media (max-width: 640px) {
  .doboku-page section:not(.fv-hero) {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}
 .doboku-page section + section {
   margin-top: 14px;
 }
 .dokou-title {
     color: red;



     /* 最初の文字 */
     font-size: 2.5rem;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }
 .doboku-page h1, .doboku-page h2 {
   line-height: 1.2;
   font-weight: 700;
   letter-spacing: 0.02em;
   color: #0f172a;
   margin: 0 0 14px;
 }
 .doboku-page .job-description h1 {
   font-size: 88px;
 }
@media (max-width: 640px) {
  .doboku-page .job-description h1 {
    font-size: 24px;
  }
}
 .doboku-page section h2 {
   font-size: 22px;
 }
@media (max-width: 640px) {
  .doboku-page section h2 {
    font-size: 20px;
  }
}
 .doboku-page p {
   font-size: 16px;
   line-height: 1.9;
   color: #334155;
   margin: 8px 0;
 }
@media (max-width: 640px) {
  .doboku-page p {
    font-size: 15px;
  }
}
 .doboku-page .daily-flow p {
   background: #f1f5f9;
   border: 1px solid #e2e8f0;
   padding: 12px 14px;
   border-radius: 10px;
   font-weight: 600;
   color: #0f172a;
 }
 .doboku-page .no-experience {
   background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
   border: 1px solid #dbeafe;
 }
 .doboku-page .no-experience p {
   color: #1e293b;
 }
 .doboku-page h1,
 .doboku-page h2 {
   position: relative;
   display: inline-block;
   padding-bottom: 8px;
 }
 .doboku-page h1::after,
 .doboku-page h2::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 56px;
   height: 3px;
   background: #38bdf8;
   border-radius: 2px;
 }
 .doboku-page .job-description p:first-of-type {
   font-weight: 600;
   color: #ffffff;
 }
 .doboku-page .daily-flow p {
   display: inline-flex;
   align-items: center;
   gap: 10px;
 }
 .doboku-page .daily-flow p::before {
   content: "\2192";
   color: #0369a1;
   font-weight: 700;
 }
 .doboku-page .no-experience {
   border-left: 4px solid #60a5fa;
 }
 .doboku-page .no-experience h2 {
   color: #0c4a6e;
 }
 @media (min-width: 1024px) {
   .doboku-page .container {
     max-width: 1040px;
   }
 }

 .doboku-page .fv-hero {
   position: relative;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   min-height: 80vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   width: 100vw;
   margin-left: calc(50% - 50vw);
   margin-right: calc(50% - 50vw);
   border-radius: 0;
   box-shadow: none;
   border: none;
   padding: 80px 24px;
 }
 .doboku-page .fv-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.0) 100%);
   border-radius: inherit;
 }
 .doboku-page .fv-hero > * {
   position: relative;
   color: #fff;
 }
 .doboku-page .fv-hero h1 {
   color: #fff;
 }
 @media (max-width: 640px) {
   .doboku-page .fv-hero {
     min-height: 60vh;
     background-position: center top;
     padding: 48px 16px;
   }
 }

 /* ネットで拾ったCSSです。 */
 /* タイプライターアニメーション */
 .typing-demo {
   width: 23ch;
   /* 文字数に合わせて調整 */
   white-space: nowrap;
   overflow: hidden;
   border-right: 3px solid #fff;
   /* カーソル */
   animation: typing 2s steps(13) forwards, blink 0.7s step-end infinite;
   font-family: monospace;
   /* タイプライター感 */
 }

 /* 文字が1文字ずつ表示される */
 @keyframes typing {
   from {
     width: 0;
   }

   to {
     width: 23ch;
   }
 }

 /* カーソルが点滅する */
 @keyframes blink {
   50% {
     border-color: transparent;
   }
 }



/* ５つの窓がスライド */

 body {
   margin: 0;
   padding: 0;
 }

 .wrapper {
   height: 30vh;
   overflow: auto;
   scroll-snap-type: y mandatory;
 }

 .section {
   scroll-snap-align: center;
   height: 30vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #de5448;
   color: #fff;
   font-size: 3em;
 }

 .bg-blue {
   background: #4267b2;
 }

 .bg-green {
   background: #4CAF50;
 }