@charset "Shift_JIS";

@import url('https://fonts.googleapis.com/css?family=Crimson+Text&display=swap');

/*==============================================================
contents - common
==============================================================*/

/*
#main .w2-1{
    width:460px;
}
#main .w3-1{
    width:296px;
}
#main .w3-2{
    width:628px;
}
#main .w4-1{
    width:210px;
}
#main .w4-2{
    width:460px;
}
#main .w4-3{
    width:710px;
}
*/

/*--------------- pageHeader ---------------*/
#pageHeader {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: auto;
    min-height: 560px;
}

#pageHeader .mainimg {
    width: 50%;
    position: relative;
}

#pageHeader .mainimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#pageHeader .hGroup {
    width: 50%;
    /*    background-color: rgba(51, 150, 162,0.4);*/
    background-color: #b9d4d9;
    padding: 4vw 6vw;
}

#pageHeader .hGroup h2 {
    display: inline-block;
    padding: 0 3px;
    margin-bottom: 1.6em;
    font-size: 1.5em;
    font-weight: 300;
    color: #222;
}

#pageHeader .hGroup h2::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #222;
}

#pageHeader .hGroup h2 span {
    display: inline-block;
    margin-right: 0.4em;
    font-size: 2.4em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1em;
    font-family: 'Crimson Text', serif;
}

#pageHeader .hGroup p {
    color: #222;
}

#pageHeader .hGroup p.sub {
    margin-bottom: 1em;
    font-size: 1.05em;
    line-height: 2em;
    font-weight: 500;
    font-feature-settings: "palt";
}

@media screen and (max-width:1300px) {
    #pageHeader .hGroup {
        padding: 4vw;
    }

    #pageHeader .hGroup p.sub {
        font-size: 1em;
    }
}

#pageHeader .hGroup .illust {
    display: block;
    margin-top: 1em;
    width: 220px;
    position: relative;
    /*    mix-blend-mode: multiply;*/
}

#pageHeader .hGroup .illust img {
    width: 100%;
    height: auto;
}

#pageHeader .hGroup .illust p {
    width: 18em;
    padding: 0 0 1.2em 1.2em;
    border-bottom: dashed 2px #fff;
    border-left: dashed 2px #fff;
    position: absolute;
    left: calc(100% + 3em);
    top: calc(50% - 3em);
    font-size: .95em;
    color: #666;
}

#pageHeader .hGroup .illust p::before,
#pageHeader .hGroup .illust p::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: solid 15px transparent;
    position: absolute;
    right: 100%;
    top: 50%;
}

#pageHeader .hGroup .illust p::before {
    border-right: solid 16px #fff;
}

#pageHeader .hGroup .illust p::after {
    margin-right: -4px;
    margin-top: -2px;
    border-right: solid 15px #b9d4d9;
}

/*--------------- co ---------------*/

#main .coInner:first-child {
    padding: 70px 0;
}

#main .coInner {
    padding: 0 0 70px;
}

#main .coInner .lead {
    padding: 3em 0 2em;
    font-weight: normal;
    color: #3396a2;
}

/*
#main .coInner h3{
    margin-bottom: 1.5em;
    font-size: 1.7em;
    font-weight: normal;
    position: relative;
    background-color:#eeebde;
    color:#3396a2;
    padding:.5em 1em;
}
*/
#main .coInner .co_hd {
    display: flex;
    align-items: center;
    padding: 1rem 2rem;
    margin-bottom: 2.5em;
    position: relative;
    background-color: #eeebde;
    color: #3396a2;
}

#main .coInner .co_hd h3 {
    width: 9em;
    margin: 0;
    font-size: 1.7em;
    font-weight: normal;
}

#main .coInner .co_hd p {
    margin: 0;
    margin-left: 2rem;
    padding-left: 2rem;
    line-height: 1.6;
    font-size: 1.05em;
    color: #666;
    border-left: solid 1px #aaa;
}

#main .coInner h3.lineup-title {
    margin: 0 0 1.5em;
    font-size: 1.7em;
    color: #3396a2;
    padding: .5em 0;
    background-color: transparent;
}

#main .coInner p {
    margin-bottom: 1em;
}

#main ul.note {
    margin-top: 0.8rem;
    font-size: 0.8rem;
    color: inherit;
    counter-reset: notenum;
}

#main ul.note li {
    margin-bottom: 0.5em;
    padding-left: 1em;
    line-height: 1.6em;
    position: relative;
}

#main ul.note li::before {
    content: '\0203b';
    position: absolute;
    left: 0;
}

#main ul.note li.num {
    padding-left: 2em;
    counter-increment: notenum;
}

#main ul.note li.num:before {
    content: '\0203b' counter(notenum);
}

#main .text-left {
    text-align: left !important;
}

/*--------------- co1 ---------------*/
#co1 {
    /* padding-bottom: 4rem; */
    background-color: #f9f9f9;
}

#co1 .coInner:nth-child(3) {
    /* padding-bottom: 0; */
}

#co1 .columns-2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4em;
}

#co1 .columns-vwrap .columns-2:last-child {
    margin-bottom: 0;
}

.columns-2 figure {
    width: 50%;
    position: relative;
}

.columns-2 figure img {
    width: 100%;
    height: auto;
}

#co1 .columns-2 figure .m-name {
    position: absolute;
    left: 10px;
    bottom: 10px;
    color: #333;
    font-size: .8rem;
}

#co1 .columns-2 figure .m-name.wh {
    color: #fff;
}

#co1 .columns-2 figcaption {
    width: 45%;
}

#co1 .columns-2 figcaption .m-name {
    display: block;
    font-size: .8em;
    font-weight: bold;
    margin-top: 1em;
}

/*
#co1 .columns-2 figcaption .m-name{
    display: block;
    font-size:.8em;
    font-weight: bold;
    margin-top: 1em;
}
*/
#co1 .columns-vwrap {
    width: 47%;
    margin-bottom: 3.5em;
}

#co1 .columns-vwrap .column-2 {
    width: 100%;
}

@media screen and (min-width:768px) {
    .mbtm0 {
        margin-bottom: 0 !important;
    }

    .mbtm1 {
        margin-bottom: 1em !important;
    }
}

/*--------------- co2 ---------------*/
#co2 {}

.slideTab {
    flex-wrap: nowrap;
    margin-bottom: 30px;
}

.slideTab .slick-list {
    padding-bottom: 15px;
}

.slideTab .li {
    width: 25%;
    padding: 0.8em 0 1.2em;
    text-align: center;
    color: #fff;
    background-color: #3396a2;
    border-right: solid 1px #fff;
    line-height: 1;
    font-size: 1.15em;
    position: relative;
    cursor: pointer;
    color: #111;
    font-family: 'NotoSansCJKjp', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: 600;
}

#lineupTab .li.slick-current {
    /* color: #3396a2; */
    background-color: #eeebde;
}

/* .slideTab .li.slick-current::after {
    content: '';
    display: block;
    border: solid 12px transparent;
    border-top: solid 15px #eeebde;
    position: absolute;
    left: calc(50% - 12px);
    top: 100%;
} */

.slideTab .li::after {
    content: '';
    display: block;
    width: .5em;
    height: .5em;
    border-bottom: solid 1px currentColor;
    border-right: solid 1px currentColor;
    position: absolute;
    left: 50%;
    bottom: .6em;
    transform: translate(-50%) rotate(45deg);
    transition: bottom .3s ease;
}

.slideTab .li.slick-current::after {
    bottom: .4em;
}

#lineup .productBox {
    padding: 5px;
}

#lineup .productTitle {
    padding-left: 11em;
    margin-bottom: 3em;
    position: relative;
}

#lineup .productTitle h4 {
    width: 7.6em;
    background-color: #000;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    /*    border:solid 2px #222;*/
    text-align: center;
    font-size: 1.1em;
}

#lineup .productTitle h4 span {
    width: 100%;
    height: 3.5em;
    line-height: 1.3em;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#lineup .productTitle h4 span.item {
    background-color: #eeebde;
    color: #222;
    font-size: .8em;
}

#lineup .productTitle p {}

#lineup .productTitle p.sub {
    margin-bottom: 0.6em;
    font-size: 1.5em;
    font-weight: bold;
    /*    letter-spacing: 0.1em;*/
}

#lineup .productDetail {}

#lineup .productDetail .thumb.main {
    width: 275px;
    min-height: 450px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#lineup .productDetail .thumb.main2 {
    width: 200px;
}

@media screen and (min-width:768px) {
    #lineup .productBox2 .productDetail .thumb.main2 {
        order: 3;
    }
}

#lineup .productBox2 .productDetail .thumb.main2 .arrow {
    display: inline-block;
    margin-right: .3em;
    color: #3396a2;
    font-size: .85em;
}

#lineup .productDetail .feature {
    width: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*
#lineup .productDetail .feature .flex:not(:last-child){
    margin-bottom: 5.2%;
}
*/
#lineup .productDetail .feature .thumb {
    width: 160px;
}

#lineup .productDetail .feature .thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

#lineup .productDetail .feature .txt {
    width: 200px;
}

#lineup .main2 h5,
#lineup .productDetail .feature h5 {
    font-size: .94em;
    margin-bottom: 0.8em;
}

#lineup .main2 h5 .sml,
.productDetail .feature h5 .sml {
    font-size: .84em;
}

#lineup .productDetail .feature h6 {
    font-size: .9em;
    margin-bottom: 0.5em;
    color: #3396a2;
}

#lineup .main2 figure {
    margin-bottom: 1em;
}

#lineup .main2 p,
#lineup .productDetail .feature p {
    margin-bottom: 0;
    font-size: 0.9em;
}

#lineup .linkBtn {
    padding: 1em 1em 1em 11em;
    margin-top: 30px;
    border: solid 1px #eeebde;
    justify-content: center;
    position: relative;
}

#lineup .linkBtn h6 {
    padding: 0 1em;
    display: flex;
    align-items: center;
    color: #3396a2;
    background-color: #eeebde;
    font-size: 1em;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

#lineup .linkBtn h6::after {
    content: '';
    display: block;
    width: 15px;
    height: 100%;
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    background: linear-gradient(to bottom left, transparent 50%, #eeebde 50.1%) top right/ 100% 50% no-repeat,
        linear-gradient(to top left, transparent 50%, #eeebde 50.1%) bottom right / 100% 50% no-repeat;
}

#lineup .linkBtn a {
    display: inline-block;
    margin: 0 15px;
    padding: 1em 4.5em 1em 4em;
    color: #3396a2;
    background-color: #eeebde;
    line-height: 1;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
    position: relative;
    border-radius: 6px;
    transition: background-color 0.2s 0s ease;
}

#lineup .linkBtn a:hover {
    background-color: #3396a2;
}

#lineup .linkBtn a::after {
    content: '';
    display: block;
    width: 0.8em;
    height: 0.8em;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    position: absolute;
    right: 1em;
    top: calc(50% - 0.4em);
    transform: rotate(45deg);
    transform-origin: center center;
}

#lineup .slick-prev,
#lineup .slick-next {
    z-index: 2;
}

#lineup .slick-prev {
    left: -60px;
}

#lineup .slick-next {
    right: -60px;
}

#lineup .slick-prev:before,
#lineup .slick-next:before {
    border-top: solid 3px #eeebde;
    border-right: solid 3px #eeebde;
}

/*--------------- co3 ---------------*/
#co3 {
    background-color: #f9f9f9;
}

#co3 .alpha_hd {
    padding: 1.5em 0;
    background-color: #3396a2;
    margin-bottom: 4em;
    position: relative;
}

#co3 .alpha_hd::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: solid 15px transparent;
    border-top: solid 20px #3396a2;
    position: absolute;
    left: calc(50% - 15px);
    top: 100%;
}

#co3 .alpha_hd .flex {
    width: 960px;
    margin: 0 auto;
    justify-content: flex-start;
    align-items: center;
}

#co3 .alpha_hd .alpha-title {
    margin: 0;
    margin-right: 2em;
    padding: .75em 1.2em;
    color: #3396a2;
    background-color: #fff;
    position: relative;
    border-radius: 2em;
    line-height: 1;
}

#co3 .alpha_hd p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

#co3 h4 {
    margin-bottom: 2em;
    font-size: 1.5em;
    color: #3396a2;
}

#co3 h5 {
    padding-bottom: .3em;
    margin-bottom: 2em;
    font-size: 1.25em;
    border-bottom: solid 1px #b9d4d9;
}

#co3 ul:not(:last-child) {
    margin-bottom: 4em;
}

#co3 ul li {
    width: 31%;
    margin-bottom: 4%;
}

#co3 ul li figure {
    margin-bottom: 1em;
}

#co3 ul li h6 {
    margin-bottom: .3em;
    font-size: .95em;
    font-weight: bold;
    color: #3396a2;
}

#co3 ul li h6 span {
    display: block;
    font-size: .9em;
    font-weight: normal;
}

#co3 ul li p {
    margin-bottom: 0 !important;
    font-size: 0.9em;
    line-height: 1.6em;
}

#co3 ul li p.note {
    text-align: left;
}

/*
#co3 ul{
    counter-reset: construction;
}
#co3 ul::after,
#co3 ul li{
    width: 215px;
}
#co3 ul::after{
    content: '';
    display: block;
    height: 0;
}
#co3 ul li{
    margin-bottom: 1em;
    position: relative;
}
#co3 ul li::before{
    content: counter(construction);
    counter-increment: construction;
    display: block;
    width: 1em;
    height: 1em;
    text-align: center;
    line-height: 1;
    position: absolute;
    color: #fff;
    background-color:#eeebde;
    border:solid 0.3em #eeebde;
    font-size: 1.3em;
}
#co3 ul li p{
    margin-top: 0.7em;
    font-size: 0.85em;
    line-height: 1.6em;
}
*/

/*--------------- bnrArea ---------------*/
#bnrArea {
    padding: 50px 0;
}

#bnrArea a {
    display: block;
    width: 500px;
    padding-right: 1em;
    margin: 0 auto;
    background-color: #eeebde;
    border: solid 5px #eeebde;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s 0s ease;
}

#bnrArea a::after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    border-top: solid 1px #000;
    border-right: solid 1px #000;
    position: absolute;
    right: 15px;
    top: calc(50% - 0.5em);
    transform: rotate(45deg);
    transform-origin: center center;
}

#bnrArea a:hover {
    opacity: .6;
}

#bnrArea a .thumb {
    width: 40%;
    background: url(../images/img28.jpg) no-repeat center center / cover;
}

#bnrArea a p {
    width: 60%;
    padding: 1.6em 0;
    font-size: 1.2em;
    text-align: center;
}




/*==============================================================
**==============================================================
**
** smart phone
**
**==============================================================
==============================================================*/

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

    /*--------------- pageHeader ---------------*/
    #pageHeader {
        width: 100%;
        padding: 0;
        min-height: auto;
        flex-wrap: wrap;
    }

    #pageHeader .hGroup {
        width: 100%;
    }

    #pageHeader .hGroup h2 {
        color: #000;
        font-size: 1.3em;
        text-shadow: none;
    }

    #pageHeader .hGroup h2 span {
        margin-right: 0.3em;
    }

    #pageHeader .hGroup .illust {
        width: 50%;
        margin: 1em 0;
    }

    #pageHeader .hGroup .illust p {
        width: 90%;
        left: calc(100% + 1em);
        top: calc(50% - 7em);
        font-size: .9em;
    }

    #pageHeader .hGroup p br {
        display: none;
    }

    #pageHeader .hGroup p.sub {
        font-size: 1em;
        line-height: 1.8;
    }

    #pageHeader .mainimg {
        width: 100%;
    }

    /*--------------- co ---------------*/

    #main .coInner:first-child {
        padding: 20px 0 40px;
    }

    #main .coInner {
        padding: 0 0 40px;
    }

    #main .coInner .lead {
        font-size: 1.3em;
        padding-top: 2em;
    }

    #main .coInner .lead br {
        display: none;
    }

    #main .coInner .co_hd {
        display: block;
        padding: 1rem 1.5rem;
    }

    #main .coInner .co_hd p {
        margin: 1em 0 0;
        padding: 1em 0 0;
        border-left: none;
        border-top: solid 1px #aaa;
    }

    #main .coInner h3 {
        font-size: 1.3em;
        margin-bottom: 2em;
        text-align: center;
    }

    #main ul.note {
        margin-top: 0.7rem;
        font-size: 0.7rem;
    }

    #main .coInner .co_hd h3 {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    /*--------------- co1 ---------------*/
    #co1 .columns-2,
    #co1 .columns-vwrap {
        width: 100%;
        margin-bottom: 2em;
    }

    /*--------------- co2 ---------------*/
    #co2 {
        padding-bottom: 5vw;
    }

    #main .coInner h3.lineup-title {
        margin: 1em 0;
    }

    .slideTab {
        margin-bottom: 5vw;
    }

    .slideTab .slick-list {
        padding-bottom: 4vw;
    }

    .slideTab .li {
        font-size: 3vw;
    }

    /* #lineupTab .li.slick-current::after {
        border: solid 2.8vw transparent;
        border-top: solid 3.5vw #eeebde;
        left: calc(50% - 2.8vw);
    } */

    #lineup .productTitle {
        padding-left: 0;
        margin-bottom: 1.5em;
    }

    #lineup .productTitle h4 {
        width: auto;
        display: inline-flex;
        margin-bottom: 1.5em;
        position: static;
    }

    #lineup .productTitle h4 span {
        width: auto;
        height: auto;
        padding: 0.5em 0.8em;
        line-height: 1;
        display: inline-block;
    }

    #lineup .productTitle h4 span.item {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .9em;
    }

    #lineup .productTitle p.sub {
        font-size: 1.5em;
    }

    #lineup .productTitle p:not(.sub) br {
        display: none;
    }

    #lineup .productDetail .thumb.main {
        width: 55%;
        height: 0;
        min-height: 0;
        padding-bottom: 100%;
        background-size: contain;
        background-position: top left;
        margin: 0 0 5%;
        order: 1;
    }

    #lineup .productDetail .thumb.main2 {
        width: 40%;
        margin: 0 0 5% 5%;
        order: 2;
    }

    #lineup .productDetail .feature {
        width: 100%;
        order: 3;
    }

    #lineup .productDetail .feature .flex:not(:last-child) {
        margin-bottom: 3%;
    }

    #lineup .productDetail .feature .thumb {
        width: 40%;
    }

    #lineup .productDetail .feature .thumb img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    #lineup .productDetail .feature .txt {
        width: 55%;
    }

    #lineup .productDetail .feature h5 {
        font-size: 1em;
        margin-bottom: 0.8em;
        padding-bottom: 0.2em;
        border-bottom: solid 1px #eeebde;
    }

    #lineup .productDetail .feature p {
        margin-bottom: 0;
        font-size: 0.9em;
    }

    #lineup.slick-dotted .slick-dots {
        bottom: -35px;
    }

    /*--------------- co3 ---------------*/

    #co3 .alpha_hd {
        padding: 0 0 1em;
    }

    #co3 .alpha_hd .flex {
        width: 92vw;
    }

    #co3 .alpha_hd .alpha-title {
        margin: -1.2em auto 1em;
        border: solid 2px #3396a2;
    }

    #co3 ul li {
        width: 100%;
        margin-bottom: 5vw;
    }

    #co3 ul li::after {
        content: "";
        display: block;
        clear: both;
    }

    #co3 ul li figure {
        width: 50%;
        margin-bottom: 0;
        float: left;
    }

    #co3 ul li h6,
    #co3 ul li h6~p {
        width: 45%;
        float: right;
    }

    #co3 .colmun {
        margin-bottom: 3%;
        padding: calc(4em + 5vw) 5vw 5vw;
    }

    #co3 .colmun h4::before {
        width: 5.6em;
        height: 5.6em;
        font-size: .9rem;
        top: calc(50% - 2.8em);
    }

    /*--------------- bnrArea ---------------*/
    #bnrArea {
        padding: 30px 0;
    }

    #bnrArea a {
        width: 90%;
        padding-right: 1em;
    }

    #bnrArea a::after {
        width: 1.2em;
        height: 1.2em;
        right: 3%;
        top: calc(50% - 0.6em);
    }

    #bnrArea a p {
        padding: 1.2em 0;
        font-size: 3.9vw;
    }

}