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

#index {
    margin: 0;
    padding: 25px;
}
#index .headArea {
    margin: 0 0 25px;
}
#index .headArea h2 {
    font-size: 26px;
    font-weight: bold;
    margin: 0 0 10px;
}
#index .sec01 h2, #index .sec02 h2 {
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 10px;
}
#index .sec01 h3, #index .sec02 h3 {
    font-size: 22px;
    font-weight: bold;
    margin: 0 0 10px;
}
#index .sec01 h4, #index .sec02 h4 {
    font-size: 20px;
    font-weight: bold;
    margin: 0 0 10px;
}
#index .sec01 h5, #index .sec02 h5 {
    font-size: 18px;
    font-weight: bold;
    margin: 0 0 10px;
}
#index .sec01 h6, #index .sec02 h6 {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px;
}
#index .sec01 p.lead, #index .sec02 p.lead {
    margin: 0 0 30px;
}
#index .sec01 {
    margin: 0 0 50px;
    padding: 25px;
    border: 1px solid #D5D5D5;
}
#index .sec02 {
    margin: 0 0 50px;
    padding: 25px;
    border: 1px solid #D5D5D5;
}
#index .sec01 p, #index .sec02 p {
    margin: 0 0 20px;
}
#index .sec01 p:last-child, #index .sec02 p:last-child {
    margin: 0;
}
.future_area {
    display: flex;
    justify-content: space-evenly;
}

.future_area .float-wrap {
    width: 32%;
    background: #f4ece5;
    padding: 15px;
}

.l-main-area .future_area .float-wrap p.catch {
    background: none;
    border: none;
    text-align: center;
    display: block;
    font-size: 1.6rem;
}

.future_area .float-wrap .caption {
    text-align: left;
}

.slider {
            width: 80%;
            margin: 50px auto;
        }
        .slick-prev:before, .slick-next:before {
            color: black;
        }
        .caption {
            text-align: center;
            font-size: 14px;
            margin-top: 10px;
            color: #555;
        }

.img_box .caption {
    font-size: 12px;
}


.slick-initialized .slick-slide {
    text-align: center;
}

.slick-slide img {
    margin: 0 auto;
}
.slick-slide img {max-height: 400px;width: auto;}
.l-parts03-column3__box ul {
    min-height: 280px;
}
.slick-slide,
.slick-track {
    max-width: none !important; /* max-width を解除 */
}
.l-parts02-white .l-parts02-white__title:before {
    content: none;
}
.slick-dots li button:before {
    font-size: 12px;
}

.slick-prev:before, .slick-next:before {
    font-size: 30px;
}


/*----------------------------------------------------
    SPサイトcss
----------------------------------------------------*/
@media screen and (max-width: 599px) {
  /*/////////////SP用のCSSをここに作成してください。/////////////*/
  /*/////////////必ず中括弧の中に作成してください。/////////////*/
.future_area {
    display: block;
    justify-content: center; /* space-evenlyをcenterに変更し、シンプルに整列 */
}

.future_area .float-wrap {
    width: 100%; /* 幅を32%から100%に変更し、1カラムレイアウトに */
    background: #f4ece5;
    padding: 10px; /* パディングを15pxから10pxに縮小 */
}

.l-main-area .future_area .float-wrap p.catch {
    font-size: 2rem; /* フォントサイズを1.6remから1.4remに縮小 */
}

.future_area .float-wrap .caption {
    text-align: left;
}

.slider {
    width: 100%; /* 幅を80%から100%に変更し、スマホ画面全体にフィット */
    margin: 30px auto; /* マージンを50pxから30pxに縮小 */
}

.caption {
    font-size: 12px; /* フォントサイズを14pxから12pxに縮小 */
    margin-top: 5px; /* マージンを10pxから5pxに縮小 */
    color: #555;
}

.img_box .caption {
    font-size: 10px; /* フォントサイズを12pxから10pxに縮小 */
}
.slick-prev, .slick-next {
    z-index: 1;
}

.l-main-area  .slick-dots {
    bottom: -3rem;
}
.slick-next {
    right: -15px;
}
.l-parts03 {
    padding-bottom: 0;
    margin-bottom: 0;
}	
	
	

}