@charset "utf-8";
/* CSS Document */

/* ------------------------------------------------------- */
/* ===== for SmartPhone ===== */
/* ------------------------------------------------------- */
#common-cta-area {
 background: #1555a5;
}

#common-cta-area h2 {
 color: #fff;
 text-align: center;
}

#trial-box {
 margin: auto;
}

#trial-flow {
 background: #fff;
 border-radius: 16px;
 padding: 16px;
}

#trial-flow h3 {
 margin: 0 auto 2rem;
}

#trial-flow .trial-ir {
 font-size: 1.2rem;
}

#trial-flow img {
 margin: 16px auto 0;
}

#trial-features {
 color: #fff;
 margin: 40px 0 0 0;
}

#trial-features h3{
 margin: 0 0 28px;
 padding: 10px 28px;
 border-radius: 999px;
 border: 1px solid rgba(255,255,255,.65);
 background: rgba(255,255,255,.06);
 font-weight: 800;
 letter-spacing: .06em;
}

/* dlをFlexboxでレイアウト */
#trial-features dl{
 margin: 0 auto;
 display: flex;
 flex-direction: column;
 gap: 34px;
 width: fit-content;
}

/* feature-item: 数字と内容を横並びにして、数字を縦中央に揃える */
#trial-features .feature-item{
 display: flex;
 align-items: center; /* 縦方向中央揃え */
 gap: 18px; /* 数字と内容の間隔 */
}

/* feature-number: 数字のスタイル */
#trial-features .feature-number{
 flex-shrink: 0; /* 縮まないように */
 width: 72px; /* 固定幅 */
 text-align: center;
 font-size: 74px;
 font-weight: 900;
 line-height: 1;
 color: rgba(255,255,255,1);
 text-shadow: 0 10px 24px rgba(0,0,0,.18);
 font-style: italic;
 font-family: "Roboto", "Noto Sans JP", sans-serif;
}

/* feature-content: dtとddをまとめる部分 */
#trial-features .feature-content{
 flex-grow: 1; /* 残りのスペースを埋める */
}

/* dtのスタイル */
#trial-features .feature-content dt{
 margin: 0;
 font-size: 26px;
 font-weight: 800;
 line-height: 1.2;
}

/* ddのスタイル */
#trial-features .feature-content dd{
 margin: 6px 0 0; /* dtの下に少しマージン */
 font-size: 15px;
 line-height: 1.75;
}

/* dd内の注釈 */
#trial-features .feature-content dd span{
 display: block;
 margin-top: 6px;
 font-size: 12px;
}


/* ------------------------------------------------------- */
/* ===== for PC 768 ===== */
/* ------------------------------------------------------- */

@media screen and (min-width : 768px){

#trial-box {
 display: flex;
 flex-direction:row-reverse;
 justify-content: space-between;
}

#trial-flow {
 text-align: center;
 width: 65%;
 padding: 48px;
}

#trial-flow img {
 max-width: 540px;
 width: 100%;
}

#trial-features {
 width: 30%;
 position: relative;
 z-index: 1;
 margin: 0;
}

}


/* ------------------------------------------------------- */
/* ===== for PC 1000 ===== */
/* ------------------------------------------------------- */

@media screen and (min-width : 1000px){

#common-cta-area {
 background: url("../images/common/bg_common_cta.png") no-repeat center/cover;
}

#trial-box {
 width: var(--main-width);
}


}