@charset "UTF-8";

@media print {
		#header,#contents_main,#side,#page_top,#footer {
				display: none !important;
		}
}

#main { width: 100%; padding: 10px 0 50px;}
#main .main_in_box {
    width: 1056px;
    margin: 30px auto 0;
}
.anchor { position: relative; top: -70px;}

#main .main_in_box .bo_left {
    border-left: 12px solid #d4a966;
    margin-bottom: 20px;
}
p.line18 { line-height: 1.8em;}

/*--------------------------------------------------------------------------------
　▼ slide　
--------------------------------------------------------------------------------*/
.sp-button {
    border: 2px solid #c7c8c8 !important;
    background: #c7c8c8;
}
.sp-selected-button {
    background-color: #e1d3a3 !important;
    border: 2px solid #e1d3a3 !important;
}

.main_in_box { position: relative;}

.box_title {
    border-left: 12px solid #d4a966;
    padding-left: 20px;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
}
ul.ul03 { padding: 15px 0 0;}
ul.ul03 li {
    width: 33.33333%;
    margin-bottom: 6%;
    vertical-align: top;
}
ul.ul03 li .article_title {
    font-size: 19px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 12px solid #d4a966;
    height: 28px;
    margin-bottom: 15px;
    border-bottom: 1px solid #d4a966;
}
ul.ul03 li .article_title.bo_left_no { border-left: none;}
ul.ul03 li .img_box {
    padding-top: 55%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
ul.ul03 li:nth-child(3n - 1) .img_box { margin: 0 5%;}
ul.ul03 li p { padding-top: 5px;}
a[class*='lightcase-icon-'].lightcase-icon-prev { left: 29% !important; bottom: 54% !important;}
a[class*='lightcase-icon-'].lightcase-icon-next { right: 29% !important; bottom: 54% !important;}


@media screen and (max-width: 900px) {

    #wrapper #main { padding: 10px 0 30px;}
    #main .main_in_box { width: 95%;}
    a[class*='lightcase-icon-'].lightcase-icon-prev { left: 15px !important;}
    a[class*='lightcase-icon-'].lightcase-icon-next { right: 15px !important;}

}

@media screen and (max-width: 768px) {
    #fl_contents {
        float: none;
        width: 100%;
        padding: 0 0 20px;
    }
    #fr_contents {
        float: none;
        width: 100%;
    }
    #slider .sp-slide.sp-selected .title-frame .catch { font-size: 13px;}
    #slider .sp-slide.sp-selected .title-frame .number { font-size: 42px;}
    #slider .sp-slide.sp-selected .title-frame p { font-size: 14px; margin-top: 10px;}

}

@media screen and (max-width: 680px) {

    .side_inner01 { position: static;}
    .anchor { position: static;}
    #slider .sp-slide .hw-the-slider-captions { padding: 0;}
    #slider .sp-slide.sp-selected .title-frame { padding: 0;}
    ul.ul03 li {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 0 20px;
    }
    ul.ul03 li .article_title { border-bottom: none; margin-top: 30px; height: auto;}
    ul.ul03 li:nth-child(3n - 1) .img_box { margin: 0;}
    ul.ul03 li .article_title.bo_left_no { display: none;}
    .sp-button {
        width: 14px;
        height: 14px;
    }
    /*
    .img img { max-width: 1067px !important; overflow: scroll;}
    */

}

@media screen and (max-width: 480px) {
    #slider .sp-slide.sp-selected .title-frame { padding: 0;}
    #slider .sp-slide.sp-selected .title-frame { padding: 14px;}
    #slider .sp-slide.sp-selected .title-frame .catch { font-size: 12px;}
    #slider .sp-slide.sp-selected .title-frame .number { font-size: 16px;}
    #slider .sp-slide.sp-selected .title-frame h2 {
        font-size: 12px;
        letter-spacing: 0;
    }
    #slider .sp-slide.sp-selected .title-frame span.typcn { font-size: 14px; line-height: 1.2em;}
    #slider .sp-slide.sp-selected .title-frame p { font-size: 10px; line-height: 1.2em;}

}

@media screen and (max-width: 400px) {
}

@media screen and (max-width: 375px) {
    #slider .sp-slide.sp-selected .title-frame { padding: 12px;}
    #slider .sp-slide.sp-selected .title-frame .number { float: left; width: 10%; font-size: 12px;}
    #slider .sp-slide.sp-selected .title-frame .catch { float: right; padding-left: 10px;width: 90%;}
    #slider .sp-slide.sp-selected .title-frame h2:before {
        font-size: 10px;
        display: block;
        clear: both;
        content: "";
    }
    #slider .sp-slide.sp-selected .title-frame span.typcn { font-size: 14px; line-height: 1.2em;}
    #slider .sp-slide.sp-selected .title-frame p { font-size: 10px; line-height: 1.2em;}

    .sp-button {
        width: 12px;
        height: 12px;
    }
}
@media screen and (max-width: 340px) {

    #slider .sp-slide.sp-selected .title-frame .number,
    #slider .sp-slide.sp-selected .title-frame .catch { font-size: 9px; line-height: 0;}
    #slider .sp-slide.sp-selected .title-frame h2 { font-size: 10px; padding-top: 6px;}
}