/* 全体設定 */
body {
    font-family: 'M PLUS Rounded 1c', sans-serif;
    color: #444;
    line-height: 1.9; /* 少し行間を広げてPCでの可読性をアップ */
    margin: 0;
    padding: 0;
    font-size: 18px; /* PC基準を18pxに */
}

.cogtre-page {
    max-width: 1000px; /* PCで見映えがするよう少し幅を広げました */
    margin: 0 auto;
    padding: 60px 20px;
}

/* タイトル周り */
h2 {
    color: #ff8e4f;
    text-align: center;
    font-size: 2rem; /* 32px相当 */
    margin: 40px 0 10px 0;
    
}

.main-title {
    text-align: center;
    font-size: 2.8rem; /* PCで見栄えがするサイズ */
    color: #ff8e4f;
    border-bottom: 4px dotted #ff8e4f;
    display: inline-block;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 40px;
    margin-top: 70px;
}

/* 導入ボックス */
.intro-box {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 2px solid #fdd9c1;
    font-size: 1.2rem; /* 21px相当 */
}

/* お悩みリスト */
.check-list li {
    background: #fff;
    margin-bottom: 15px;
    padding: 20px 30px;
    border-left: 8px solid #ff8e4f;
    border-radius: 8px;
    font-size: 1.5rem;
}

.highlight-text {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 40px;
    color: #333;
}

/* 5つの力のグリッド */
.ability-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* PCでは5列横並びで「土台」感を出す */
    gap: 15px;
    margin-top: 30px;
}

.ability-card {
    background: rgb(255, 255, 129);
    padding: 20px 10px;
    border-radius: 12px;
    text-align: center;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120px;
}

.ability-card strong{
    font-size: 2rem;
}


/* メカニズム（矢印部分） */
.mechanism-box {
    background: #fff;
    padding: 40px 40px 10px 40px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.m-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 2rem;

}

.m-arrow {
    margin: 0 30px;
    color: #ff8e4f;
    font-size: 2rem;
}

/* コグトレの内容 */
.example-box {
    background: #f2f29b;
    margin: 20px 10px 10px 10px;
    padding: 30px;
    border-radius: 20px;
}

.example-box h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}
.example-box ul{
    font-size: 1.6rem;}

/* 最後のメッセージ */
.final-message {
    text-align: left;
    font-size: 2rem; /* PCでドーンと大きく */
    font-weight: 800;
    color: #ff8e4f;
    background: #fff;
    padding: 60px;
    border-radius: 80px;
    margin-top: 40px;
}

/* スマホ用のレスポンシブ微調整 */
@media (max-width: 900px) {
    body { font-size: 16px; }
    .ability-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .ability-grid strong{font-size: 1.3rem;}
    .main-title { 
      font-size: 2rem;
      margin-top: 20px;}
    h2 { font-size: 1.5rem; }
    .final-message { font-size: 1rem; padding: 30px; }
    p,.check-list li{font-size: 1rem}
    .m-item{
      background-color: rgb(211, 240, 250);
      border-radius: 12px;}
    .mechanism-box{
      background-color: transparent;
    }
    .example-box h3 {
    margin-bottom: 10px;
    font-size: 1rem;}

    .example-box ul{
      font-size: 1rem;}

    .example-box{
      padding: 10px 20px 20px 20px;
      margin-top: 10px;}
}


@media (max-width: 600px) {
    .m-item { flex-direction: column; font-size: 1.1rem; }
    .m-arrow { transform: rotate(90deg);  }
    .ability-grid { grid-template-columns: repeat(2, 1fr); } /* スマホは2列 */
}