@charset "utf-8";

/*------------------------------------------------------------
	common / lead
------------------------------------------------------------*/
.pageLead {
    background-image: url("../img/robot/lead_bg.jpg");
}
.pageLead h2 {
    font-weight: 500;
    letter-spacing: 0.05em;
}
.pagePath {
    margin-bottom: 45px;
}
#main .tTextBox {
    margin-bottom: 70px;
}
#main .tTextBox h3 {
    margin-bottom: 28px;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.67;
}
#main .tTextBox h3 span {
    margin-bottom: 0;
    color: #DC9643;
    display: block;
}
#main .tTextBox .text {
    color: #174E9D;
    line-height: 2.33;
    text-align: center;
}
#main .tTextBox .text small {
    font-size: 1rem;
}
#main .tTextBox .note {
	margin-top: 2px;
	font-size: 1rem;
	text-align: center;
}

/* Photo List */
#main .photoUl {
    margin-bottom: 106px;
    display: flex;
    justify-content: space-between;
}
#main .photoUl li:nth-child(1) { width: 395px; }
#main .photoUl li:nth-child(2) { width: 515px; }

/*------------------------------------------------------------
	.example (既存デザイン：青背景)
------------------------------------------------------------*/
#main .example {
    margin: 0 auto 80px;
    padding-bottom: 48px;
    width: 960px;
    background: #174E9D url("../img/robot/example_bg.jpg") no-repeat center top / cover;
}
#main .example .inner {
    padding: 0 50px;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 21px;
}
#main .example .title {
    margin-bottom: 12px;
    padding: 0 50px;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
    transform: translateY(-50%);
}
#main .example .title span {
    padding: 20px 69px;
    display: inline-block;
    position: relative;
    background: url("../img/robot/line.png") no-repeat 10px center / 1px auto, url("../img/robot/line.png") no-repeat right 9px center / 1px auto;
    background-color: #DC9643;
}
#main .example .lBox { width: 500px; }
#main .example .lBox p {
    margin-bottom: 16px;
    font-size: 1.3rem;
    line-height: 2.2;
    text-align: justify;
}
#main .example .rBox {
    margin-top: 7px;
    width: 337px;
}
#main .example .text {
    margin: 0 50px;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
}
#main .example .text span {
    display: inline-block;
    line-height: 1.7;
    border-bottom: 1px solid #fff;
}

/*------------------------------------------------------------
	.example.effect-update (新デザイン：白背景・グラフ)
------------------------------------------------------------*/
#main .example.effect-update {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #000;
    width: 960px;
    margin: 50px auto 80px;
    padding: 0 0 30px 0;
    color: #000;
    box-sizing: border-box;
}
/* タイトル */
#main .example.effect-update .title {
    margin: 0 auto 30px;
    padding: 0;
    transform: translateY(-50%);
    text-align: center;
}
#main .example.effect-update .title span {
    background: #FFC107 !important;
    color: #000 !important;
    padding: 10px 40px;
    font-size: 2.2rem;
    font-weight: bold;
    display: inline-block;
    border: 1px solid #000;
    background-image: none !important; /* 既存のラインを消去 */
}
/* 内部レイアウト */
#main .example.effect-update .inner {
    display: block !important;
    padding: 0 40px !important;
    text-align: left;
    color: #000;
    margin-bottom: 0;
}
/* 説明文 */
#main .example.effect-update .description-area {
    margin-bottom: 40px;
}
#main .example.effect-update .description-area p {
    font-size: 1.4rem;
    line-height: 1.8;
    margin-bottom: 1.5em;
    color: #000;
    text-align: justify;
}
/* グラフエリア */
#main .example.effect-update .graph-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}
#main .example.effect-update .graph-box {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#main .example.effect-update .legend-box {
    margin-bottom: 10px;
    width: 100%;
}
#main .example.effect-update .legend-box img {
    max-width: 280px;
    height: auto;
}
#main .example.effect-update .img-wrap {
    width: 100%;
    margin-bottom: 10px;
}
#main .example.effect-update .img-wrap img {
    width: 100%;
    height: auto;
}
#main .example.effect-update .caption {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
}
#main .example.effect-update .bottom-note {
text-align: center;
    font-size: 1.8rem; /* 1.2remから大きく変更 */
    font-weight: bold; /* 太字にして強調 */
    margin-top: 30px;  /* 上との間隔を少し広げる */
    width: 100%;
    color: #000;
}

/*------------------------------------------------------------
	Responsive (Smartphone)
------------------------------------------------------------*/
@media all and (max-width: 896px) {
    .pagePath { margin-bottom: 20px; }
    #main .tTextBox { margin-bottom: 35px; }
    #main .tTextBox h3 { font-size: 1.6rem; }
    #main .tTextBox .text { font-size: 1.4rem; font-weight: 500; }
    #main .tTextBox .text small { font-size: 1rem; }

    #main .photoUl { margin-bottom: 50px; display: block; }
    #main .photoUl img { width: 100%; }
    #main .photoUl li:nth-child(1),
    #main .photoUl li:nth-child(2) { width: auto; margin-bottom: 50px; }

    /* 既存デザイン(青)のSP設定 */
    #main .example { margin: 0 0 40px; padding-bottom: 25px; width: auto; }
    #main .example .inner { padding: 0 15px; display: block; margin-bottom: 15px; }
    #main .example .title { margin-bottom: 0; padding: 0 15px; font-size: 1.4rem; font-weight: 500; }
    #main .example .title span { padding: 10px 20px; background-size: 1px auto; }
    #main .example .lBox { margin-bottom: 20px; width: auto; }
    #main .example .lBox img { width: 100%; max-width: 674px; }
    #main .example .lBox p { margin-bottom: 20px; font-size: 1.2rem; line-height: 1.5; }
    #main .example .rBox { margin-top: 0; width: auto; }
    #main .example .text { margin: 0 20px; font-size: 1.1rem; }
    #main .example .text span { padding-bottom: 5px; line-height: 1.5; }

    /* 新デザイン(白：effect-update)のSP設定 */
    #main .example.effect-update {
        width: 95%;
        margin: 40px auto;
    }
    #main .example.effect-update .title span {
        font-size: 1.6rem;
        padding: 8px 20px;
    }
    #main .example.effect-update .inner {
        padding: 0 15px !important;
    }
    #main .example.effect-update .description-area p {
        font-size: 1.4rem;
        line-height: 1.7;
    }
    #main .example.effect-update .graph-container {
        display: block;
    }
    #main .example.effect-update .graph-box {
        width: 100%;
        margin-bottom: 40px;
    }
    #main .example.effect-update .legend-box img {
        max-width: 220px;
    }
    @media all and (max-width: 896px) {
    /* ...他の設定... */

    #main .example.effect-update .bottom-note {
        font-size: 1.5rem; /* スマホでもしっかり読めるサイズ */
        margin-top: 20px;
        padding: 0 10px;   /* 画面端に当たらないよう余白 */
    }
}
}