@charset "UTF-8";
/* ---------------------------------------------------------
	/lineup
------------------------------------------------------------ */
#lineup .gridCoatingLineup > li > a { display: block; padding: 0px; text-align: center; font-weight: 700; font-size: 114%; line-height: 1.2; color: #333; }
#lineup .gridCoatingLineup > li > a:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
#lineup .gridCoatingLineup > li > a > * { display: inline-block; vertical-align: middle; }
#lineup .gridCoatingLineup > li > a span { padding-right: 56px; font-size: 0.84rem; }
#lineup .gridCoatingLineup > li > a span img { margin: 0px -20px 10px 0px; }
@media screen and (min-width: 0px) and (max-width: 667px) { #lineup .gridCoatingLineup > li > a span img { margin: 0px 0px 10px 0px; } }
@media screen and (min-width: 0px) and (max-width: 667px) { #lineup .gridCoatingLineup > li > a { padding: 0px; }
	#lineup .gridCoatingLineup > li > a:before { min-height: 54px; } }
#lineup .gridCoatingLineup > li > a:before { min-height: 118px; }
#lineup .gridCoatingLineup > li > a.active { position: relative; }
#lineup .gridCoatingLineup > li > a.active span:before { position: absolute; content: ''; top: -1px; bottom: -1px; left: -1px; right: -1px; border: 4px solid #0b3290; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li:first-child a { background: #e8f6fb url("../img/lineup/coating/p_coating01.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild2 a { background: #fff9d9 url("../img/lineup/coating/p_coating07.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild3 a { background: #f2edda url("../img/lineup/coating/p_coating02.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild4 a { background: #e5ecf4 url("../img/lineup/coating/p_coating03.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild5 a { background: #dffae9 url("../img/lineup/coating/p_coating06.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild6 a { background: #ffffff url("../img/lineup/coating/p_coating05.jpg") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild7 a { background: #ffffff url("../img/lineup/coating/p_coating08.jpg") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.lastChild { border: none; }

/* ---------------------------------------------------------
    /mattexture
------------------------------------------------------------ */
.mattexture {
    width: 100%;
    height: auto;
    .wrap-content {
        position:relative;
        background-repeat: no-repeat;
        background-position: 2px -15%;
        background-size: contain;
        height: 1545px;
        overflow: hidden;
        width: 100%;
        background-image: url(../img/lineup/coating/mattexture/img-back.png);
        .cover {
            .title {
                width: 85.108%;
                margin: 32px 0 0 8.512%;
                p {
                    display: inline-block;
                    font-size: 1.95rem;
                    font-weight: bold;
                    color: #fff;
                    background: #222;
                    padding: 8px;
                    letter-spacing: 1px;
                    margin-bottom: 8px;
                }
                h2 {
                    font-size: 3.3rem;
                    font-weight: bold;
                    letter-spacing: 6px;
                }
                div {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: flex-start;
                    p.logo {
                        color: #222;
                        background: none;
                        margin: 0 8px;
                        padding: 0;
                        span {
                            display: block;
                            padding-left: 60%;
                            font-size: 0.6rem;
                            font-weight: bold;
                            letter-spacing: 5px;
                        }
                        span::before {
                            content: '【';
                        }
                        span::after {
                            content: '】';
                        }
                    }
                    img {
                        height: 32px;
                        width: auto;
                    }
                }
            }
        }
        .inner {
            width: 480px;
            margin: 440px 0 0 80px;
            .content {
                margin: 0;
                h3 {
                    font-size: 2.0rem;
                    font-weight: bold;
                    line-height: 2.8rem;
                    letter-spacing: 2px;
                    margin-bottom: 1rem;
                    span {
                        display: block;
                    }
                }
                p {
                    font-size: 1.0rem;
                    font-weight: bold;
                    letter-spacing: 2px;
                    line-height: 2.1rem;
                    width: 400px;
                    white-space: break-spaces;
                }
            }
            .detail {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 780px;
                height: auto;
                margin: 80px 0 0 0;
                .item1 {
                    width: 350px;
                    height: auto;
                    img {
                        width: 100%;
                        height: auto;
                    }
                    div {
                        display: flex;
                        background: #eee;
                        padding: 1rem 0.5rem 0.5rem 0.5rem;
                        margin: -0.5rem 0 0 0;
                        p {
                            width: 50%;
                            text-align: center;
                            font-weight: bold;
                            font-size: 0.85rem;
                        }
                    }
                }
                .item2 {
                    width: 200px;
                    height: auto;
                    background: #eee;
                    padding: 1rem;
                    p {
                        text-align: center;
                        margin-bottom: 1rem;
                        font-size: 1rem;
                        font-weight: bold;
                    }
                    div {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        width: 100%;
                        height: auto;
                        div {
                            width: 47%;
                            height: auto;
                            display: flex;
                            flex-direction: column;
                            justify-content: flex-start;
                            img {
                                width: 100%;
                                height: auto;
                            }
                            p {
                                width: 100%;
                                height: auto;
                                text-align: left;
                                margin: 0;
                                padding-top: 0.5rem;
                                font-size: 0.7rem;
                                font-weight: bold;
                            }
                            p.title::after {
                                content: '／';
                            }
                        }
                    }
                }
                .item3 {
                    width: 170px;
                    height: auto;
                    div {
                        background: linear-gradient(287deg, rgba(24, 49, 142, 1) 0%, rgba(174, 3, 131, 1) 40%);
                        width: calc(100% - 1rem);
                        height: auto;
                        padding: 0.5rem;
                        p {
                            color: #fff;
                            font-weight: bold;
                            letter-spacing: 1px;
                            font-size: 0.85rem;
                        }
                        hr {
                            color: #fff;
                            margin: 0.5rem 0;
                            height: 1px;
                            background: #fff;
                        }
                    }
                    table {
                        margin-top: 0.5rem;
                        margin-bottom: 0.2rem;
                        width: 100%;
                        height: auto;
                        tr {
                            display: flex;
                            flex-direction: row;
                            width: 100%;
                            height: auto;
                            td {
                                padding: 0;
                                border-top: 1px solid #222;
                                border-left: 1px solid #222;
                                font-size: 1rem;
                                font-weight: bold;
                                height: 2rem;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                            td:nth-child(1) {
                                width: 30%;
                                text-align: center;
                                background: #eee;
                            }
                            td:nth-child(2) {
                                width: 70%;
                                border-right: 1px solid #222;
                                text-align: right;
                            }
                            td.last {
                                border-bottom: 1px solid #222;
                                margin: 0;
                            }
                        }
                    }
                    p.note {
                        font-size: 0.6rem;
                        text-align: right;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

/*-------------------------------------------------
------------------------------------------------ */
@media screen and (min-width: 0px) and (max-width: 667px) {
    #content {
        width: 94%;
        height: auto;
    }
	#titleArea {
		background: url(../img/lineup/bg_main_lineup.jpg) 130% 50% no-repeat;
		background-size: 50% auto;
	}
	.mattexture {
        margin: 0;
        width: 100%;
        height: auto;
        .wrap-content {
            background: none;
            height: auto;
            .cover {
                background-size: contain;
                background-repeat: no-repeat;
                background-size: cover;
                width: 100%;
                height: 280px;
                background-position: top left;
                background-image: url(../img/lineup/coating/mattexture/img-back-sp.png);
                .title {
                    padding-top: 150px;
                    width: 80%;
                    height: auto;
                    max-width: 300px;
                    margin: 0 auto;
                    p {
                        display: inline-block;
                        width: auto;
                        height: auto;
                        margin-bottom: 0.25rem;
                        background: #222;
                        color: #fff;
                        padding: 0 0.25rem;
                        font-size: 0.75rem;
                        font-weight: normal;
                    }
                    h2 {
                        font-size: 1.2rem;
                        margin: 0;
                        letter-spacing: 0;
                    }
                    div {
                        p.logo {
                            font-size: 1.0rem;
                            background: none;
                            color: #222;
                            padding: 0;
                            margin: 0 0.5rem 0 0;
                            span {
                                padding-left: 40%;
                            }
                        }
                        img {
                            zoom: 1;
                            height: 1.1rem;
                            width: auto;
                        }
                    }
                }
            }
            .inner {
                margin: 0;
                height: auto;
                width: 100%;
                .content {
                    width: 100%;
                    height: auto;
                    margin: 2rem 0 0 0;
                    display: block;
                    h3 {
                        background: linear-gradient(287deg, rgba(24, 49, 142, 1) 0%, rgba(174, 3, 131, 1) 40%);
                        color: #fff;
                        padding: 1rem;
                        font-size: 0.7rem;
                        text-align: center;
                        line-height: 1.1rem;
                        span.firstChild {
                            display: none;
                        }
                    }
                    p {
                        width: 100%;
                        height: auto;
                        letter-spacing: 0;
                        font-size: 0.8rem;
                        line-height: 1.2rem;
                    }
                }
                .detail {
                    flex-direction: column;
                    width: 100%;
                    height: 100%;
                    justify-content: flex-start;
                    align-items: flex-start;
                    margin: 1rem 0 0 0;
                    padding: 0;
                    .item1 {
                        width: 100%;
                        height: auto;
                        div {
                            width: 100%;
                            height: auto;
                            p {
                                font-size: 0.6rem;
                            }
                        }
                    }
                    .item2 {
                        width: 92%;
                        height: auto;
                        p {
                            width: 92%;
                            height: auto;
                        }
                        p:last-child {
                            line-height: 0.9rem;
                            padding-top: 0;
                        }
                    }
                    .item3 {
                        width: 100%;
                        height: auto;
                        div p {
                            text-align: center;
                        }
                        table {
                            width: 100%;
                            height: auto;
                            display: flex;
                            flex-direction: column;
                            flex-wrap: wrap;
                            tr {
                                width: 50%;
                                height: auto;
                            }
                            tr.sp {
                                margin-left: 50%;
                                margin-top: calc(-6rem - 4px);
                                td:nth-child(1) {
                                    border-left: 0;
                                }
                            }
                            tr.sp-ml {
                                margin-left: 50%;
                                margin-top: 0;
                                td:nth-child(1) {
                                    border-left: 0;
                                }
                            }
                            tr:nth-child(3) {
                                border-bottom: 1px solid #222;
                            }
                        }
                    }
                }
            }
        }
    }
}
/* ------------------------------------------------
------------------------------------------------ */
#lineup .coating .addGradient { background-position: 50% 152px; }
@media screen and (min-width: 0px) and (max-width: 667px) { #lineup .coating .addGradient { background-image: none; } }
@media screen and (min-width: 0px) and (max-width: 667px) { #lineup .gridCoatingLineup { width: 100%; margin-left: 0%; }
	#lineup .gridCoatingLineup:before, #lineup .gridCoatingLineup:after { content: ""; display: table; }
	#lineup .gridCoatingLineup:after { clear: both; }
	#lineup .gridCoatingLineup > * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; width: 100%; margin-left: 0%; }
	#lineup .gridCoatingLineup > *.gridCol02 { width: 200%; }
	#lineup .gridCoatingLineup > *.gridCol01 { width: 100%; }
	#lineup .gridCoatingLineup > *:first-child ~ * { margin-top: 12px; } }
#lineup .gridCoatingLineup > li > a { display: block; padding: 0px; text-align: center; font-weight: 700; font-size: 114%; line-height: 1.2; color: #333; }
#lineup .gridCoatingLineup > li > a:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
#lineup .gridCoatingLineup > li > a > * { display: inline-block; vertical-align: middle; }
#lineup .gridCoatingLineup > li > a span { padding-right: 56px; font-size: 0.84rem; }
#lineup .gridCoatingLineup > li > a span img { margin: 0px -20px 10px 0px; }
@media screen and (min-width: 0px) and (max-width: 667px) { #lineup .gridCoatingLineup > li > a span img { margin: 0px 0px 10px 0px; } }
@media screen and (min-width: 0px) and (max-width: 667px) { #lineup .gridCoatingLineup > li > a { padding: 0px; }
	#lineup .gridCoatingLineup > li > a:before { min-height: 54px; } }
#lineup .gridCoatingLineup > li > a:before { min-height: 118px; }
#lineup .gridCoatingLineup > li > a.active { position: relative; }
#lineup .gridCoatingLineup > li > a.active span:before { position: absolute; content: ''; top: -1px; bottom: -1px; left: -1px; right: -1px; border: 4px solid #0b3290; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li:first-child a { background: #ffffff url("../img/lineup/coating/p_coating05.jpg") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild2 a { background: #e7fb0b33 url("../img/lineup/coating/p_coating09.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild3 a { background: #f2edda url("../img/lineup/coating/p_coating02.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild4 a { background: #e5ecf4 url("../img/lineup/coating/p_coating03.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild5 a { background: #dffae9 url("../img/lineup/coating/p_coating06.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild6 a { background: #e8f6fb url("../img/lineup/coating/p_coating01.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild7 a { background: #fff9d9 url("../img/lineup/coating/p_coating07.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#lineup .gridCoatingLineup > li.nthChild8 a { background: #dfe7ec url("../img/lineup/coating/p_coating08.png") 100% 0 no-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
/*#lineup .gridCoatingLineup > li.lastChild { border: none; }*/
/*-------------------------------------------------*/
#containerThis { width: 978px; margin: 0 auto; position: relative; margin-bottom:3rem; }
#containerThis:after { content: ""; height: 12px; padding-bottom: 12px; display: block; position: absolute; left: 0; right: 0; bottom: -40px; background: #fefefe; }
#containerThis_lineup { width: 1240px; margin: 0 auto; position: relative; }
#containerThis_lineup:after { content: ""; height: 12px; padding-bottom: 12px; display: block; position: absolute; left: 0; right: 0; bottom: -40px; background: #fefefe; }

.headingCount h4 span:before {content: '';position: absolute;left: 0.8em;top: 0.75em;width: 2em;height: 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;background-color: #063190!important;}
.headingLv03 span:before {position: absolute;top: 0;bottom: 0;left: 2px;content: '';border-left: 4px solid #063190!important;}
.this_spanc{color:#33b371!important;}
.this_rad {border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;}
.this_h4{padding-top: 7px;font-size:1.5rem;width:100%;height:3rem;background: -moz-linear-gradient(top, #fedc00, #fff9d9);background: -webkit-linear-gradient(top, #fedc00, #fff9d9);background: linear-gradient(to bottom, #fedc00, #fff9d9);color:white;text-align:center;}
#mainArea .icoBlank {padding-right:0!important; margin-right:0!important; background:none!important;}
#meritArea {margin-top:24vh;}
.this-wrapp {margin-top: 0.5em;line-height: 1.5em;display: flex;flex-flow: row wrap;}
.this-wrapp p {display: inline-block;flex-basis: 46%;margin-right: 3%;}
.gridList02 > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 32.11715%!important; margin-left: 1.88285%; }
#lineup .coating .addGradient {background-position: 0 152px;background-repeat: repeat-x;}
.thi_lihei { width:48%!important; height: auto!important;/*368px;*/ }
.thi_lihei img {width:100%!important;}
.this_pwid {width:94%;}
@media screen and (min-width: 0px) and (max-width: 667px) {
	#containerThis { width: 95%; }
	#containerThis_lineup { width: 95%; }
	#meritArea { margin-top: 0; }
	.this_h4{padding-top: 7px;font-size:1.5rem;width:100%;height:3rem;background: -moz-linear-gradient(top, #fedc00, #fff9d9);background: -webkit-linear-gradient(top, #fedc00, #fff9d9);background: linear-gradient(to bottom, #fedc00, #fff9d9);color:white;text-align:center;}
	.this-wrapp p {display: inline-block;flex-basis: 48%;margin-right: 2%;}
	.thi_lihei { height: 300px; }
	.this_pwid { width: 100%; }
}