@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text&display=swap');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp.min.css');
@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.3.1/dist/css/yakuhanmp.min.css');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600&display=swap');
body { background: #ffff; line-height: 1.8; letter-spacing: 0.03em; font-size: 1.4rem; /*font-family: YakuHanMP, 'Noto Serif JP', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', serif;*/ font-family: Roboto, YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; color: #333
}
.spview {
    display: none;
}

#branch ul,
#cocotteBox>div,
#featureList,
#headerInner,
#kantakun .pointList li,
#mainNavi,
#partsList,
#pickupList,
#step,
#step li dl,
#step1List,
#titleWrap,
#topimage,
.cocoImgList,
.cocoPointList,
.cocoPointList li,
.column1Details,
.gcList,
.headWrap,
.jokin999,
.listWrap,
.listWrap section,
.nameBox,
.pdtImgBox,
.percentOff>span,
.pointBox,
.productInfo,
.productList,
.productList>li,
.reformPoint,
.specList li,
.specListYoko,
.stepMark {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex
}
#branch ul,
#cocotteBox>div,
#featureList,
#headerInner,
#kantakun .pointList li,
#partsList,
#pickupList,
#step,
#step1List,
#titleWrap,
.cocoPointList,
.gcList,
.headWrap,
.listWrap,
.pointBox,
.productInfo,
.productList,
.reformPoint {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}
#cocotteBox > div,
#headerInner,
#kantakun .pointList li,
#mainNavi,
#titleWrap,
#topimage,
.cocoPointList li,
.column1Details,
.headWrap,
.jokin999,
.nameBox,
.pdtImgBox,
.percentOff>span,
.pointBox,
.specList li,
.stepMark,
.stepTtl {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}
#step li dl,
.listWrap section,
.productList > li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}
#featureList,
#pickupList,
.gcList,
.listWrap,
.productList {
    display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;
}
#mainNavi,
#topimage,
.column1Details,
.jokin999,
.pdtImgBox,
.percentOff>span,
.specList li,
.specListYoko,
.stepMark {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}
header {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 55px;
    width: 100%;
    height: 130px;
    background: #fff;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    z-index: 9999
}
#headerInner {
    position: relative;
    width: 100%;
    height: 100%
}
h1 a img {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    width: 194px;
    height: 66px
}
nav li {
    display: inline-block;
    vertical-align: middle
}
nav a {
    display: block;
    line-height: 1;
    font-weight: 500
}
#gNavi {
    margin-top: 2.1em
}
#gNavi li {
    margin-left: 2.5vw
}
#gNavi li a {
    font-size: 1.5rem
}
#sNavi { max-width: 565px; width: 100%; position: absolute; top: 16px; right: 0; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
#sNavi li { width: 32%;}
#sNavi li a { /* padding: 1em 1.6em; */border: 1px solid #F08C00; border-radius: 17px; height: 34px; color: #F08C00; transition: 0.3s; -webkit-transition: 0.3s; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
@media screen and (max-width:500px){
    #sNavi li { width: 100%;}
}
@media screen and (max-width:1279px){
    header { padding: 0 6vw;}
}
@media screen and (max-width:959px){
    .fixedHead,
    header {
        height: 90px
    }
    #slider {margin: 90px 0 0!important;}
    h1 {
        position: relative;
        width: 170px;
        z-index: 99999
    }
    h1 a img {
        width: 100%;
        height: auto
    }
    .fixedHead h1 a img {
        width: 160px;
        height: auto
    }
    #index .fixedHead h1 a img {
        width: 100%;
        height: auto
    }
    #index h1 a img {
        transition: none;
        -webkit-transition: none
    }
    #toggle {
        display: block;
        color: #fff;
        text-align: center;
        position: fixed;
        top: 33px;
        right: 6vw;
        z-index: 9999;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center
    }
    .trigger,
    .trigger span {
        display: inline-block;
        -webkit-transition: all 0.4s;
        transition: all 0.4s
    }
    .trigger {
        width: 30px;
        height: 23px;
        cursor: pointer
    }
    .trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3px;
        border-radius: .001%;
        background: #F08C00
    }
    .trigger span:nth-of-type(1) {
        top: 0
    }
    .trigger span:nth-of-type(2) {
        top: 10px
    }
    .trigger span:nth-of-type(2)::after {
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 3px;
        border-radius: .001%;
        background: #F08C00;
        -webkit-transition: all 0.4s;
        transition: all 0.4s
    }
    .trigger span:nth-of-type(3) {
        bottom: 0
    }
    .trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(8px) scale(0);
        transform: translateY(8px) scale(0)
    }
    .trigger.active span:nth-of-type(2) {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }
    .trigger.active span:nth-of-type(2)::after {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
    .trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-8px) scale(0);
        transform: translateY(-8px) scale(0)
    }
    .hide {
        overflow: hidden;
        visibility: hidden;
        opacity: 0
    }
    .animation {
        -webkit-transition-property: opacity, visibility;
        transition-property: opacity, visibility;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in
    }
    .no-scroll {
        overflow: hidden
    }
    #naviBox {
        position: fixed;
        top: 90px;
        left: 0;
        margin: 0;
        padding: 7vw 6vw 6vw;
        width: 100%;
        height: calc(100% - 90px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #FFF7DB;
        z-index: 999
    }
    nav ul {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        width: 100%;
        text-align: center
    }
    nav ul li {
        width: 100%
    }
    #gNavi {
        margin: 0 0 2.75%;
        border-bottom: solid 1px #F08C00;
        text-align: left
    }
    #gNavi li {
        margin: 0;
        border-top: solid 1px #F08C00
    }
    #gNavi li a {
        position: relative;
        padding: 1em 10px;
        font-size: 1.6rem
    }
    #gNavi li a::after,
    #gNavi li a::before {
        content: "";
        position: absolute;
        top: calc(50% - 4px);
        right: 10px;
        width: 8px;
        height: 8px;
        border-top: 1px double #F08C00;
        border-right: 1px double #F08C00;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }
    #gNavi li a::before {
        right: 14px
    }
    #sNavi {
        position: static
    }
    #sNavi li {
        margin: 10px 0 0
    }
    #sNavi li a {
        /*border-radius: 0;*/
        font-size: 1.5rem
    }
    .fixedHead #sNavi li a {
        padding: 1em
    }
    #naviTxt {
        margin-bottom: 0.5em;
        text-align: center;
        font-size: 2.3rem;
        font-weight: 700;
        color: #F08C00
    }
}
@media screen and (max-width::599px) {
    .inner,
    header {
        padding: 0 5vw
    }
    .fixedHead,
    header {
        height: 70px
    }
    #slider {margin: 70px 0 0!important;}
    h1 {
        width: 138px
    }
    #toggle {
        top: 24px;
        right: 5vw
    }
    .trigger {
        width: 28px
    }
    #naviBox {
        top: 70px;
        height: calc(100% - 70px);
        padding: 7vw 5vw
    }
    #gNavi li a {
        font-size: 1.5rem
    }
    #sNavi li+li {
        margin-top: 8px
    }
    #sNavi li a {
        padding: 0.85em;
        font-size: 1.4rem
    }
    #naviTxt {
        font-size: 2rem
    }
}




/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */

footer { text-align: center;}

#contact { background: #F08C00; padding: 80px 0; width: 100%; margin: 0 0 52px;}
#contact .contact { /*max-width: 1000px; width: 100%; margin: 0 auto;*/}
#contact .contact h3 { font-size: 35px; font-weight: 700; line-height: 100%; position: relative; margin: 0 0 76px; text-align: center; color: #fff;}
#contact .contact h3::after { content: ""; width: 40px; height: 3px; background: #fff; position: absolute; bottom:-24px; left: 50%; margin-left: -20px;}
#contact .contact p { color: #fff; margin: 0 0 16px;}
#contact .contact dl {display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
#contact .contact dl div { width: 48%; background: #fff; padding: 32px 24px 24px;}
#contact .contact dl div dt { font-size: 24px; font-weight: 700; line-height: 120%; margin-bottom: 10px;}
#contact .contact dl div dt span { display: block; font-size: 16px; font-weight: 500;}
#contact .contact dl div dd span { font-family: Roboto, sans-serif; font-size: 32px; color: #F08C00; font-weight: 700; line-height: 100%;}
#contact .contact dl div dd span::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    margin: -4px 10px 0 0;
    width: 29px;
    height: 29px;
    background: url('assets/images/tel.svg') no-repeat;
    background-size: contain
}
@media screen and (max-width:767px){
    #contact { padding: 48px 16px 32px; margin: 0 0 32px;}
    #contact .contact h3 { font-size: 28px; margin: 0 0 56px;}
    #contact .contact dl {display:block;}
    #contact .contact dl div { width: 100%; margin: 0 auto 16px; padding: 20px 12px 8px;}
}


#specificBtn { margin-top: 52px;}
#specificBtn a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 1.5rem
}
#copyright {
    margin-top: 16px;
    padding-bottom: 32px;
    letter-spacing: 0.05em;
    font-family: Roboto, sans-serif;
    font-size: 1.1rem
}
#pagetop {
    position: fixed;
    display: none;
    bottom: 3vw;
    right: 3vw;
    width: 56px;
    height: 56px;
    border: solid 1px #F08C00;
    border-radius: 50%;
    background: #fff;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    z-index: 999
}
#pagetop a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%
}
#pagetop a::after {
    content: '';
    position: absolute;
    top: 24px;
    left: 19px;
    width: 16px;
    height: 16px;
    border-top: solid 1px #F08C00;
    border-left: solid 1px #F08C00;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */

/*共通パーツ*/
#kitchen main,
#bathroom main,
#laundryroom main,
#livingroom main,
#reform main {
    margin-top: 60px
}
#privacy main,
#delay main {
    margin-top: 180px
}
@media screen and (max-width:767px){
    #kitchen main,
    #bathroom main,
    #laundryroom main,
    #livingroom main,
    #reform main { margin-top: 48px;}
    #privacy main,
    #delay main { margin-top: 112px;}
}
.inner {
    margin: 0 auto;
    max-width: 1364px;
    padding-left: 32px!important;
    padding-right: 32px!important;
}
.inner2 {
    margin: 0 auto;
    max-width: 1064px;
    padding-left: 32px!important;
    padding-right: 32px!important;
}
@media screen and (max-width:767px){
    .inner { padding-left: 16px!important; padding-right: 16px!important;}
    .inner2 { padding-left: 16px!important; padding-right: 16px!important;}
}
/*#index section+section,
.section+section {
    margin-top: 100px
}*/

h2 {
    text-align: center;
    font-weight: 700;
    font-weight: 700
}
.en {
    font-family: 'Work Sans', sans-serif
}
.note { font-size: 14px; margin: 6px 0 0 0; line-height: 140%;}
.asterisk { font-size: 12px!important; margin:16px 0 0 0; line-height: 140%; padding-left:1em; text-indent:-1em;font-family: Roboto, YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif!important;}
.asterisk + .asterisk { margin-top: 6px;}
.asterisk3 { font-size: 12px!important; margin:16px 0 0 0; line-height: 140%; padding-left:1em; text-indent:-1em;font-family: Roboto, YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif!important;}
.asterisk3 + .asterisk3 { margin-top: 6px;}

.notes {display: block; margin-top: 0.6em; line-height: 1.8; font-weight: 400; font-size: 1.3rem; font-family: Roboto, YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif!important;}
.notes2 {
    display: block;
    margin-top: 0.6em;
    line-height: 1.6;
    text-indent: -1.1em;
    margin-left: 1.1em;
    font-weight: 400;
    font-size: 1.3rem;
    font-family: Roboto, YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif!important;
}
.notes2 {
    font-size: 1.2rem;
    font-family: Roboto, YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif!important;
}
.notes3 {
    line-height: 1.6;
    font-weight: 400;
    font-size: 1.3rem;
    font-family: Roboto, YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif!important;
}


/* #slideBox {
    height: 30vw
} */
#slider {
    position: relative;
    margin: 130px 0 0;
    height: 100%
}
#slider li {
    text-align: center
}
.slick-slide img { margin: 0 auto;}
@media screen and(max-width:1679px) {
    #slideBox,
    #slider li img {
        height: 34.723vw;
    }
}
@media screen and(max-width:1279px) {
    .inner,
    header {
        padding: 0 6vw
    }
    #slider li#bn1 {
        padding: 0 25px
    }
    #slideBox,
    #slider li img {
        height: auto
    }
    #slider li a {
        display: block
    }
}


/*ギフト*/
#gift { background: url(./assets/images/index/gift_bg.png) no-repeat 50% 50% / cover; padding: 46px 0 52px;}
#gift figure { max-width:1232px; width: 90%; height: auto; margin: 0 auto; position: relative;}
#gift figure::before { content: ""; max-width: 202px; width: 16vw; height: 179px; display: block; background: url(./assets/images/index/gift_confetti01.png) no-repeat 0 0 / contain; position: absolute; top: -30px; right: -6vw;}
#gift figure::after { content: ""; max-width: 238px; width: 16vw; height: 226px; display: block; background: url(./assets/images/index/gift_confetti01.png) no-repeat 100% 100% / contain; position: absolute; bottom: -40px; left: -6vw;}
#gift figure img { width: 100%; height: auto;}
/*重要なお知らせ*/
#ImportantNotices { margin: 16px auto; height: 32px; border-radius: 16px; max-width: 1300px; background: #ED4D4D; color:#fff; font-weight: 500; font-size: 16px; display:flex; align-items:center; gap: 1ch; display: flex; justify-content: center; flex-wrap: wrap;}
#ImportantNotices span { color: #fff; font-weight: 500; font-size: 16px; display: block;}
@media screen and (max-width:767px){
    #ImportantNotices { display: block; height: 64px; border-radius: 32px; text-align: center; padding-top: 5px;}
    #gift figure::before { display: none;}
    #gift figure::after { display: none;}
}
@media screen and (max-width:600px){
    #gift { padding: 0;}
    #gift figure { width: 100%;}
}

/*トップページラインナップ*/
#lineUp { padding: 96px 0 64px; background: #FFF7DB;}
#lineUp h2.title { font-size: 35px; font-weight: 700; line-height: 100%; position: relative; margin: 0 0 112px;}
#lineUp h2.title::after { content: ""; width: 40px; height: 3px; background: #F08C00; position: absolute; bottom:-24px; left: 50%; margin-left: -20px;}
@media screen and (max-width:767px){
    #lineUp h2.title { font-size: 28px; margin: 0 0 96px;}
}

#lineUpList {}
#lineUpList .lineUpList { width: 100%; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between; background: #fff; padding: 36px 42px 36px 440px; position: relative;}
#lineUpList .lineUpList:not(:last-child) { margin-bottom: 96px;}
#lineUpList .lineUpList:nth-child(even) {padding: 36px 440px 36px 42px; flex-direction:row-reverse;}
.lineUpListL { width: 360px; background: #F08C00; color: #fff; position: relative; box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6); position: absolute; top: -40px; left: 42px;}
#lineUpList .lineUpList:nth-child(even) .lineUpListL { left: auto; right:42px;}
.lineUpListL a { position: relative; padding: 32px 24px 16px; }
/* .lineUpListL a::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 40px 0 0 16px; border-color: transparent transparent transparent #C67606; right: -16px; top: 0;} */
/* #lineUpList .lineUpList:nth-child(even) .lineUpListL a::after { border-width: 0 0 40px 16px; right:auto; left: -16px; border-color: transparent transparent #C67606 transparent;} */
.lineUpListL .wrapBack { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 40px 0 0 16px; border-color: transparent transparent transparent #C67606; right: -16px; top: 0;}
#lineUpList .lineUpList:nth-child(even) .lineUpListL .wrapBack { border-width: 0 0 40px 16px; right:auto; left: -16px; border-color: transparent transparent #C67606 transparent;}

.lineUpListL:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 32px 180px 0 0; border-color: #F08C00 transparent transparent transparent; position: absolute; left: 0; bottom: -32px;}
.lineUpListL:after { content: ''; width: 0; height: 0; border-style: solid; border-width: 32px 0 0 180px; border-color: #F08C00 transparent transparent transparent; position: absolute; right: 0; bottom: -32px;}
.lineUpListL h2 { font-size: 45px; line-height: 100%; font-weight: 700; padding: 0 0 16px 0; margin: 0 0 16px 0; border-bottom: 2px dotted #fff; color:#fff;}
.lineUpListL h2 span { font-size: 16px; line-height: 100%; font-weight: 700; display: inline-block; position: relative; margin-bottom: 16px; color:#fff;}
.lineUpListL h2 span::before { content: ""; width: 20px; height: 17px; position: absolute; top: -2px; left: -24px; background: url(./assets/images/index/clover.svg) no-repeat 50% 50% / contain;}
.lineUpListL ul { width: 160px; margin: 0 auto 32px;}
.lineUpListL ul li { list-style-type: disc; font-size: 16px; font-weight: 700; line-height: 140%; color:#fff;}
.lineUpListL ul li:not(:last-child) { margin-bottom: 8px;}
.lineUpListL div.more_btn { display: block; margin: 0 auto; max-width: 300px; height: 60px; background: #fff; color: #F08C00; font-size: 16px; font-weight: 700; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch; position: relative;}
.lineUpListL div.more_btn::after {content: ""; position: absolute; top: calc(50% - 4px); right: 16px; width:10px; height: 10px; border-top: 2px double #F08C00; border-right: 2px double #F08C00; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.lineUpListR a.more_btn { max-width: 300px; width: 100%; height: 60px; background: #F08C00; color: #FFF; font-size: 16px; font-weight: 700; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch; position: relative;display: none; margin: 24px auto 0;}
.lineUpListR a.more_btn::after {content: ""; position: absolute; top: calc(50% - 4px); right: 16px; width:10px; height: 10px; border-top: 2px double #FFF; border-right: 2px double #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg);}


.lineUpListR { width: 100%;}
.lineUpListR h2 { background: #FFFBC7; text-align: center; font-size: 24px; line-height: 100%; color: #F08C00; font-weight: 700; padding: 16px; margin: 0 auto 32px;}
.lineUpListR h2 span { font-size: 16px; line-height: 100%; color: #F08C00; font-weight: 700; display: inline-block; height: 28px; line-height: 100%; position: relative; vertical-align: middle; padding-top: 7px; margin-right: 12px;}
.lineUpListR h3 {text-align: center; margin: 0 auto 48px;}
.lineUpListR h3 span { font-size: 20px; line-height: 100%; font-weight: 700; padding: 0 0 8px; border-bottom: 2px solid #FFEE64; display: inline;}
.lineUpListR div {display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
.lineUpListR div figure { width: 324px;}
.lineUpListR div figure img { width: 100%; height: auto;}
.lineUpListR div ul { width: calc(100% - 356px);}
.lineUpListR div ul li { list-style-type: none; position: relative; padding-left: 24px;}
.lineUpListR div ul li::before { content: ''; width: 12px; height: 12px; background: #F08C00; border-radius: 50%; position: absolute; left: 0; top:6px;}
.lineUpListR div ul li:not(:last-child) { margin-bottom: 12px;}
.lineUpListR.small div figure { width: 228px;}
.lineUpListR.small.up div figure { margin-top: -64px;}
.lineUpListR.small div ul { width: calc(100% - 260px);}
.lineUpListR.small2 div figure { width: 206px;}
.lineUpListR.small2 div ul { width: calc(100% - 238px);}

#lineUpList .lineUpList:last-child .lineUpListR div { margin: 0 auto 12px;}
#lineUpList .lineUpList:last-child .lineUpListR div figure { width: 32%; position: relative;}
#lineUpList .lineUpList:last-child .lineUpListR div figure img { width: 100%; height: auto;}
#lineUpList .lineUpList:last-child .lineUpListR div figure figcaption { position: absolute; padding: 4px 4px; background: #fff; font-size: 12px; font-weight: 500; line-height: 100%; left: 0; bottom: 0;}
@media screen and (max-width:1320px){
    .lineUpListR.small.up div figure { margin-top: 0px;}
}
@media screen and (max-width:1024px){
    #lineUp { padding: 80px 0 48px;}
    #lineUpList .lineUpList:not(:last-child) { margin-bottom: 80px;}
    #lineUpList .lineUpList { padding: 28px 36px 28px 400px;}
    #lineUpList .lineUpList:nth-child(even) {padding: 28px 400px 28px 36px;}
    .lineUpListL { width: 320px; top: -40px; left: 42px;}
    .lineUpListL h2 { font-size: 38px;}
    .lineUpListL a { padding: 24px 18px 12px; }
    .lineUpListR h2 { font-size: 20px; padding: 10px 10px 18px; }
    .lineUpListR h2 span { font-size: 14px; display: block; margin: 0 0 6px 0;}
    .lineUpListR h3 span { font-size: 18px; line-height:200%; padding: 0 0 6px;}
    .lineUpListR div {display:block;}
    #lineUpList .lineUpList:last-child .lineUpListR div { display: flex;}
    .lineUpListR div figure { width:100%!important;}
    .lineUpListR div ul { width:100%!important; margin-top: 10px;}
    .lineUpListR div ul li:not(:last-child) { margin-bottom: 8px;}
    div.more_btn { width: 100%; }
}
@media screen and (max-width:767px){
    #lineUp { padding: 64px 0 48px;}
    #lineUpList .lineUpList { width: 100%; display:block; padding: 24px 32px;}
    #lineUpList .lineUpList:nth-child(even) { width: 100%; display:block;  padding: 24px 32px;}
    .lineUpListL { width: 100%; position: static; margin-top: -54px; margin-bottom: 32px;}
    .lineUpListL a { padding: 12px 18px 12px; }
    /* .lineUpListL div::after { display: none;} */
    /* #lineUpList .lineUpList:nth-child(even) .lineUpListL div::after { display: none;} */
    .lineUpListL .wrapBack { display: none;}
    .lineUpListL:before { display: none;}
    .lineUpListL:after { display: none;}
    .lineUpListL h2 { font-size: 24px; padding: 0 0 10px 0; margin: 0 0 16px 0;}
    .lineUpListL h2 span { font-size: 14px; margin-bottom: 10px;}
    .lineUpListL h2 br:nth-child(3) { display: none;}
    .lineUpListL ul { width: 80%; margin: 0 auto 0px; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
    .lineUpListL ul li { list-style-type: disc; font-size: 13px; font-weight: 700; line-height: 140%; width: 100%;}
    .lineUpListL ul li:not(:last-child) { margin-bottom: 6px;}
    #lineUpList .lineUpList:last-child .lineUpListR div { display:block;}
    #lineUpList .lineUpList:last-child .lineUpListR div figure { width: 100%;}
    #lineUpList .lineUpList:last-child .lineUpListR div figure:not(:last-child) { margin-bottom: 16px;}
    .lineUpListL div.more_btn { display: none;}
    .lineUpListR div.more_btn { display: flex;}
    .lineUpListR div figure.small { text-align: center;}
    .lineUpListR div figure.small img { width: 70%; margin-left: auto; margin-right: auto;}
}


/*キャンペーン*/
#campaign { margin: 0 auto 64px;}
#campaign h3 { position: relative; margin-bottom: 35px; text-align: center; font-size: 24px; font-weight: 700; }
#campaign h3 span { position: relative; padding: 0 4em; color: #80C446;}
#campaign h3 span::after, #campaign h3 span::before { content: ''; position: absolute; top: 55%; display: inline-block; width: 47px; height: 3px; background: #80C446; -webkit-transform: rotate(72deg); transform: rotate(72deg);}
#campaign h3 span::before { left: 0;}
#campaign h3 span::after { right: 0; -webkit-transform: rotate(-72deg); transform: rotate(-72deg);}
#campaign div { text-align: center;}
@media screen and (max-width:767px){
    #campaign h3 span { padding: 0; display: block;}
}

.kiyaku { margin: 0 auto 64px;}

#flow { padding: 92px 0; position: relative;}
#flow h3 { font-size: 35px; font-weight: 700; line-height: 100%; position: relative; margin: 0 0 128px; text-align: center;}
#flow h3::after { content: ""; width: 40px; height: 3px; background: #F08C00; position: absolute; bottom:-24px; left: 50%; margin-left: -20px;}

#step { max-width: 1000px; width: 100%; margin: 0 auto; position: relative;}
#step .web_application {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #FFEE64;
    text-align: center;
    font-size: 16px;
    line-height: 120%;
    font-weight: 700;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;
    position: absolute;
    z-index: 1;
    top: -106px;
    left: -58px;
}
#step ul { width: 100%; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
#step li {
    position: relative;
    padding: 0 32px 32px;
    width: 30.6%;
    width: calc((100% - 48px) / 3);
    background: #fff;
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.01em;
    font-size: 1.7rem;
    font-weight: 500;
    color: #555;
    background: #FFF7DB;
}
#step li:not(:last-child)::after { content: ""; position: absolute; top: 0; bottom: 0; right: -36px; margin: auto; width: 36px; height: 34px; background: url(./assets/images/index/arw.svg) no-repeat 50% 50% / contain; z-index: 1;}
#step li dl {
    height: 100%
}
#step li dl dt { color: #F08C00; font-size: 55px; line-height: 100%; font-weight: 700; margin: -32px auto 32px;}
#step li dl dd+dd {
    margin-top: auto;
    padding-top: 15px
}
@media screen and (max-width:767px){
    #flow { padding: 64px 0;}
    #flow h3 { font-size: 28px; margin: 0 0 96px;}
    #step .web_application { width: 96px; height: 96px; font-size: 14px; left: -12px; top: -65px;}
    #step ul { display:block;}
    #step li { width: 100%;}
    #step li:not(:last-child) { margin-bottom: 64px;}
    #step li:not(:last-child)::after {top:auto; bottom: -16px; right: calc(50% - 18px); transform:rotate(90deg); margin-left: -17px;}
}


#faq { padding: 120px 0; width: 100%; margin: 0 auto 96px; background: #FFF7DB;}
#faq h3 { font-size: 35px; font-weight: 700; line-height: 100%; position: relative; margin: 0 0 128px; text-align: center;}
#faq h3::after { content: ""; width: 40px; height: 3px; background: #F08C00; position: absolute; bottom:-24px; left: 50%; margin-left: -20px;}
#faqList { max-width: 1000px; margin: 0 auto;}
#faqList dt { padding: 20px 20px 20px 128px; line-height: 160%; position: relative;}
#faqList dd { padding: 20px 20px 20px 128px; line-height: 160%; background: #fff; position: relative;}
#faqList dt::before { content: "Q"; font-size: 24px; line-height: 100%; font-weight: 700; position: absolute; top: 18px; left: 58px; font-family: noto sans;}
#faqList dd::before { content: "A"; font-size: 24px; line-height: 100%; font-weight: 700; position: absolute; top: 18px; left: 58px; font-family: noto sans; color: #F08C00;}
@media screen and (max-width:767px){
    #faq { padding: 64px 0; margin: 0 auto 64px;}
    #faq h3 { font-size: 28px; margin: 0 0 64px;}
    #faqList dt { padding: 16px 16px 16px 68px;}
    #faqList dd { padding: 16px 16px 16px 68px;}
    #faqList dt::before { top: 16px; left: 26px;}
    #faqList dd::before { top: 16px; left: 26px;}
}


/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/*キッチン*/

#topBox {
    margin-top: 130px
}
#topimage {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 360px;
    background: url('assets/images/kitchen/main.jpg?v2') no-repeat center center;
    background-size: cover !important
}
#bathroom #topimage {
    background: url('assets/images/bathroom/main.jpg') no-repeat center center
}
#laundryroom #topimage {
    background: url('assets/images/laundryroom/main.jpg') no-repeat center center
}
#reform #topimage {
    background: url('assets/images/reform/main.jpg') no-repeat center center
}
#livingroom #topimage {
    background: url('assets/images/livingroom/main.jpg') no-repeat center center
}
#titleBox {
    text-align: center;
    line-height: 1;
    color: #fff
}
#titleBox h2 { letter-spacing: -0.02em; line-height: 110%; text-shadow: 0 0 5px #999; font-size: 45px; font-weight: 600;}
#titleBox h2 span { display: inline-block; line-height: 100%; text-shadow: 0 0 3px #999; font-size: 16px; font-weight: 700; position: relative;}
#titleBox h2 span::before { content: ""; width: 20px; height: 17px; position: absolute; top: -2px; left: -24px; background: url(./assets/images/index/clover.svg) no-repeat 50% 50% / contain;}
@media screen and (max-width:959px) {
    #topBox {
        margin-top: 90px
    }
    #topimage {
        height: 38vw
    }
    #titleBox h2 { line-height: 120%; font-size: 38px;}
}
@media screen and (max-width:599px) {
    #topBox {
        margin-top: 70px
    }
    #titleBox h2 { line-height: 130%; font-size: 30px;}
}


/*下層コンテンツナビ*/
#mainNavi { font-family: YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; margin: 0 auto; padding: 30px 50px 0; width: 100%;}
#mainNavi li { margin: 0 5px; width: 250px;}
#mainNavi li a { width: 100%; height: 60px; border: solid 1px #F08C00; border-radius: 30px; background: url('assets/images/kitchen/arw.svg') no-repeat 93% center #fff; background-size: 14px 8px; text-align: center; font-size: 1.7rem; font-weight: 500; color: #000; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
#mainNavi li.largeBtn { width: 350px;}
@media screen and (max-width:1024px){
    #mainNavi { padding: 30px 16px 0; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
    #mainNavi li { margin: 0 0px; width: 48%;}
    #mainNavi li a { height: 60px; border-radius: 30px; background-size: 8px ; font-size: 14px; margin-bottom: 10px;}
    #mainNavi li.largeBtn { width: 100%;}
}

h3.productTtl { font-family: YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; position: relative; margin-bottom: 64px; text-align: center; font-size: 2.9rem; font-weight: 500; margin-top: 80px;}
h3.productTtl span { text-align: center; font-size: 16px; line-height: 120%; font-weight: 400; display: block; margin-top: 6px; }
h3.productTtl span::before,
h3.productTtl span::after { display: none;}
h3.productTtl::after { content: ""; width: 40px; height: 3px; background: #F08C00; position: absolute; bottom: -24px; left: 50%; margin-left: -20px; }
@media screen and (max-width:767px){
    h3.productTtl {  margin-bottom: 48px; font-size: 24px; margin-top: 80px;}
    h3.productTtl span { font-size: 14px; }
}

/*おすすめ*/
.osusume { background: #FFF7DB; padding: 50px 0 80px; /*max-width: 1300px; width: 100%; margin: 0 auto;*/}
.osusume_top { /*max-width: 1000px; width: 100%; margin: 0 auto;*/}
.osusume_top_block { margin:0 auto 80px;}
/*ガス展 オススメ商品*/
.recommendTtl { font-family: YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; position: relative; margin: 0 40px 1.25em; text-align: center; line-height: 70px; font-size: 28px; font-weight: 600; color: #F08C00; }
@media screen and (max-width:767px){
    .osusume { padding: 32px 5% 64px;}
    .osusume_top_block { margin:0 auto 64px;}
    .recommendTtl { margin: 0 0 32px; font-size: 22px;line-height: 140%;}
    .osusume_top.inner2 { padding: 0!important;}
}

/*番号・ロゴ・製品名*/
.nameBox { padding: 0; min-height: 50px; border-bottom: solid 1px #000; border-top: solid 1px #000; line-height: 1 }
.nameBox .Number  {display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch; background: #000; color: #fff; font-weight: 700; width: 56px; height: 56px; font-size: 30px; font-family: YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif; margin: 0 24px 0 0;}
.nameBox .Name { margin-left: 1em; text-align: left; font-size: 22px; font-weight: 700;}
.productList .nameBox .Name { font-size: 16px;}
.nameBox .Name > span { display: inline-block; margin-right: 0.7em; line-height: 1.3;}
@media screen and (max-width:767px){
    .nameBox { display: block;}
    .nameBox .Number { width: 100%; height: 42px; font-size: 22px; margin: 0 0 16px 0;}
    .nameBox .Name { margin-left: 0;}
    .nameBox .Name > span { margin: 10px .7em 10px 0; line-height: 1.3; font-size: 18px;}
    .nameBox .Name span + span { margin-top: 0;}
}
/*シリーズ*/
.series { text-align: right;}
.series span { font-size: 14px; line-height: 100%; margin: 0; padding: 6px 16px; margin: 16px 0 0 0; background: #fff; font-weight: 500; display: inline-block;}
/*製品写真*/
.pdtImgBox { margin-top: 25px; position: relative; }
.pdtImgBox img { width: 100%; height: auto;}
#kitchen .osusume_top .pdtImgBox figcaption { position: absolute; top:16px; right: 12px; background: #fff; font-size: 16px; line-height: 100%; font-weight: 500; padding: 6px 8px;}
#bathroom .osusume_top .pdtImgBox { justify-content:space-between; width: 90%; margin-left: auto; margin-right: auto;}
#laundryroom .osusume_top .pdtImgBox { justify-content:space-between; width: 90%; margin-left: auto; margin-right: auto;}
#reform .osusume_top .pdtImgBox { justify-content:space-between;}

@media screen and (max-width:767px){
    .pdtImgBox { display: block;}
    .productList .pdtImgBox { display: flex;}
    #kitchen .osusume_top .pdtImgBox { text-align: right;}
    #kitchen .osusume_top .pdtImgBox figcaption { position: static; margin-bottom: 8px; display: inline-block;}
}
@media screen and (max-width:500px){
    .productList .pdtImgBox { display: block;}
}

.pdtImgBoxC { margin-top: 25px; position: relative; }
.pdtImgBoxC figure { width: 100%; text-align: center; position: relative;}
.pdtImgBoxC figure img { max-width: 336px; margin: 0 auto; width: 100%;}
.pdtImgBoxC figure figcaption { font-size: 14px; line-height: 100%; margin: 0; padding: 6px 16px; margin: 0px 0 0 0; background: #fff; font-weight: 500; display: inline-block; position: absolute; top: 0; right: 0;}
@media screen and (max-width:767px){
    .pdtImgBoxC figure { padding-top: 40px;}
    .pdtImgBoxC figure figcaption { margin: 0px 0 0 0;}
}

/*製品詳細*/
.productInfo { margin-top: 40px; }
.productInfo > div.priceBox { margin-top: 0; width: 46%; height: 100%;}
.productInfo > div { width: 50%;}
@media screen and (max-width:1012px){
    .productInfo { display: block;}
    .productInfo > div.priceBox { width: 100%; margin-bottom: 32px;}
    .productInfo > div { width: 100%;}
}


/*金額*/
.priceBox { position: relative; margin-top: 25px; line-height: 1.5; text-align: left;}
.priceBox p { font-size: 16px; font-family: 'Libre Caslon Text', serif;}
.priceBox p + p { margin-top: 8px;}
@media screen and (max-width:767px){
    .priceBox p { font-size: 14px;}
}
/*ガス展特価*/
.salePrice { margin-top: 15px; line-height: 1.2; font-weight: 600; color: #e60012 }
.salePrice dt { margin-right: 8px; padding: 0.5em 1em; border-radius: 6px; font-size: 1.6rem;}
.salePrice dd { margin-top: 0.2em; font-size: 3.2rem; font-weight: 500;}
.tokkaTxt{ position:relative; width: 128px; height: 38px; background: #FFEE64; border: solid 2px #f00; border-radius: 16px; font-size: 18px; font-weight: 700; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
.tokkaTxt span {display: inline; position: absolute; font-size: 12px; right: 78px; bottom: 14px;}
#kitchen .productList #no13 .tokkaTxt { width: 208px; height: 64px;}
#kitchen .productList #no14 .tokkaTxt { width: 208px; height: 64px;}
#bathroom .osusume_top .tokkaTxt { width: 208px; height: 64px;}
#laundryroom .osusume_top .tokkaTxt { width: 208px; height: 64px;}
#reform .osusume_top .tokkaTxt { width: 208px; height: 64px;}
.tokkaTxt:after,.tokkaTxt:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    top:100%;
    left:50%;
}
.tokkaTxt:after{
    border-color: rgba(255, 238, 100, 0);
    border-top-width:6px;
    border-bottom-width:6px;
    border-left-width:4px;
    border-right-width:4px;
    margin-left: -4px;
    border-top-color:#FFEE64;
}
.tokkaTxt:before{
    border-color: rgba(30, 144, 255, 0);
    border-top-width:8px;
    border-bottom-width:8px;
    border-left-width:4px;
    border-right-width:4px;
    margin-left: -4px;
    margin-top: 2px;
    border-top-color:#f00;
}
@media screen and (max-width:767px){
    .salePrice dt { margin-right: 0px; padding: 0;}
    .tokkaTxt{ width: 128px; height: 38px; font-size: 14px;}
    #bathroom .osusume_top .tokkaTxt { width: 176px; height: 64px;}
    #laundryroom .osusume_top .tokkaTxt { width: 176px; height: 64px;}
    #reform .osusume_top .tokkaTxt { width: 176px; height: 64px;}
}


/*価格*/
.price { letter-spacing: -0.02em; font-size: 5rem; font-weight: 500; font-family: 'Libre Caslon Text', serif; }
#livingroom .osusume_top .price { font-size: 75px;}
@media screen and (max-width:1200px){
    #livingroom .osusume_top .price { font-size: 64px;}
}
@media screen and (max-width:767px){
    .price { font-size: 42px;}
    #livingroom .osusume_top .price { font-size: 52px;}
}
/*税込*/
.intax { font-size: 1.6rem; /*font-family: 'Libre Caslon Text', serif;*/ }
/*50%OFF*/
.percentOff,
.percentOff > span { width: 130px; height: 130px }
.percentOff { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; background: #e60012; border-radius: 50%; line-height: 1.1; text-align: center; font-weight: 500; font-size: 3.5rem; color: #fff; font-family: 'Libre Caslon Text', serif;}
@media screen and (max-width:1200px){
    .percentOff,
    .percentOff > span { width: 80px; height: 80px }
    .percentOff { top: 24px; bottom: 0; right: auto; left: 240px; font-size: 22px;}
}

/*詳細リスト*/
.functionList { padding: 15px 20px; border: solid 2px #ddd; background: #fff; font-weight: 500;}
.functionList li { margin-left: 1.1em; text-indent: -1.1em; text-align: left;}
.functionList li::before { content: "●"; margin-right: 0.25em; font-size: 1.2rem; color: #CDE59E; }
/*ココットボックス*/
#cocotteBox > div {flex-direction:row-reverse;}
#cocotteBox { margin-top: 30px;}
.cocottePoint { width: 82%; margin-left: 3.5%; text-align: center; font-weight: 600;}
.cocottePoint dt { position: relative; margin: 0 35px; height: 40px; background: #CDE59E; line-height: 40px; font-size: 2rem; font-weight: 700; color: #000;}
.cocottePoint dt::after,
.cocottePoint dt::before { content: ''; position: absolute; top: 0; display: block; height: 40px; border: 20px solid #CDE59E;}
.cocottePoint dt::before { left: -35px; border-left-width: 15px !important; border-left-color: transparent !important;}
.cocottePoint dt::after { right: -35px; border-right-width: 15px !important; border-right-color: transparent !important;}
.cocottePoint dd { margin-top: 12px; text-align: left; font-weight: 500;}
/* .cocoPointTxt { font-size: 1.6rem;} */
.cocoPointList { border-left: solid 1px #333; font-size: 1.5rem}
.cocoPointList li {
    padding: 0.25em 1em;
    width: calc(100% / 3);
    border-right: solid 1px #444;
    line-height: 1.4;
    text-align: justify
}
.cocoImgList {
    margin-top: 30px
}
.cocoImgList li {
    width: calc(100% / 3)
}
.cocoImgList li+li {
    margin-left: 1%
}
@media screen and (max-width:767px){
    #cocotteBox > div { display: block;}
    #cocotteBox p { text-align: center;}
    #cocotteBox p img { max-width: 160px; margin: 16px auto 0;}
}



/* #no2 .accessories,
#no3 .accessories {
    width: calc(100% - 360px)
} */

.accessories {
    margin-left: 8%;
    text-align: center;
}
.accessories figcaption {
    margin-top: 0.5em;
    text-align: center;
    line-height: 1.4;
    position: static;
    font-size: 11px;
}
.accessories figure+figure {
    margin-top: 10px
}
.accessories img {/*max-width: 150px;*/ width: auto;}

#cocotteBox {
    margin-top: 30px
}
.cocottePoint {
    width: 82%;
    margin-left: 3.5%;
    text-align: center;
    font-weight: 600
}
.cocottePoint dt {
    position: relative;
    margin: 0 35px;
    height: 40px;
    background: #CDE59E;
    line-height: 40px;
    font-size: 2rem;
    font-weight: 700;
    color: #000;
}
.cocottePoint dt::after,
.cocottePoint dt::before {
    content: '';
    position: absolute;
    top: 0;
    display: block;
    height: 40px;
    border: 20px solid #CDE59E
}
.cocottePoint dt::before {
    left: -35px;
    border-left-width: 15px !important;
    border-left-color: transparent !important
}
.cocottePoint dt::after {
    right: -35px;
    border-right-width: 15px !important;
    border-right-color: transparent !important
}
.cocottePoint dd {
    margin-top: 12px
}
.cocoPointTxt {
    font-size: 1.6rem
}
.cocoPointList {
    border-left: solid 1px #333;
    font-size: 1.5rem
}
.cocoPointList li {
    padding: 0.25em 1em;
    width: calc(100% / 3);
    border-right: solid 1px #444;
    line-height: 1.4;
    text-align: justify
}
.cocoImgList {
    margin-top: 30px
}
.cocoImgList li {
    width: calc(100% / 3)
}
.cocoImgList li+li {
    margin-left: 1%
}
@media screen and (max-width:900px){
    .cocottePoint dt { font-size: 16px;}
}
@media screen and (max-width:767px){
    .cocottePoint { width: 100%; margin-left: 0;}
    .cocoPointList { border-left:none; border-top: solid 1px #333; font-size: 14px; display: block;}
    .cocoPointList li { padding: 1em 0.25em; width:100%; border-right: none; border-bottom: solid 1px #444;}
    .cocoPointList li br { display: none;}
}
@media screen and (max-width:500px){
    .cocottePoint dt { font-size: 14px; height: 60px; line-height: 160%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
    .cocottePoint dt::after,
    .cocottePoint dt::before { height: 0px; border: 30px solid #CDE59E;}
    .cocottePoint dt::before { left: -45px; border-left-width: 15px !important; border-left-color: transparent !important;}
    .cocottePoint dt::after { right: -45px; border-right-width: 15px !important; border-right-color: transparent !important;}
}




.movie {
    margin-top: 124px
}
.movieBox {
    position: relative;
    width: 99.9%;
    padding-top: 56.25%
}
.movieBox iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%
}
.fukidashi {
    position: relative;
    margin: 0 auto 40px;
    padding: 0.7em 1em 0.8em;
    max-width: 500px;
    color: #000;
    border-radius: 50px;
    background: #CDE59E;
    font-weight: 600;
    font-size: 2.4rem;
    text-align: center
}
.fukidashi::after {
    position: absolute;
    bottom: -19px;
    left: calc(50% - 12px);
    width: 0;
    height: 0;
    content: '';
    border-width: 20px 12px 0 12px;
    border-style: solid;
    border-color: #CDE59E transparent transparent transparent
}
.fukidashi img {
    position: absolute;
    left: -95px;
    bottom: -25px
}
@media screen and (max-width:767px){
    .fukidashi { font-size: 18px; }
    .fukidashi img { width: 96px; left: 50%; bottom: auto; top: -80px;  margin-left: -48px;}
}

.productList { margin: 48px auto 0;}
.productList > li { width:calc(50% - 24px); padding: 52px 64px; background: #FFF7DB; margin-bottom: 64px;}
@media screen and (max-width:1200px){
    .productList > li { padding: 48px 32px;}
}
@media screen and (max-width:900px){
    .productList > li { width:100%; margin-bottom: 48px;}
}
@media screen and (max-width:767px){
    .productList { display: block;}
}
.detailsBox {
    position: relative;
    margin-top: 15px;
    border: solid 1px #ccc;
    background: #fff
}
.detailsBox .functionList { border: none; padding: 0;}
.detailsBox > a,
.detailsBox > div {
    padding: 10px 15px
}
.detailsBox > a {
    position: relative;
    display: block;
    cursor: pointer;
    line-height: 1.5;
    font-weight: 700;
    font-size: 1.5rem;
    color: #555
}
.detailsBox > div {
    padding-top: 0 !important;
    display: none
}
.detailsOpen {
    text-align: center;
    font-weight: 500
}
.btnIcon, .btnIcon span { display: inline-block; -webkit-transition: all .3s; transition: all .3s; }
.btnIcon { position: absolute; top: 50%; right: 15px; margin-top: -1px; width: 26px; height: 26px; }
.btnIcon span { position: absolute; width: 100%; height: 2px; background: #F08C00; }
.btnIcon span:nth-of-type(1) { transform: rotate(0); -webkit-transform: rotate(0); }
.btnIcon span:nth-of-type(2) { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
.detailsBox .btnIcon { right: 20px; width: 18px; height: 18px;}
.detailsBox .btnIcon span { background: #F08C00;}


.linkBtn {
    font-family: YakuHanJP, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif
}

.linkBtn a {
    display: block;
    margin: 20px auto 0;
    /*padding: 0.6em 1em;*/
    height: 80px;
    max-width: 530px;
    text-align: center;
    font-weight: 600;
    font-size: 1.8rem;
    color: #fff;
    background: #F08C00;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;
    position: relative;
}
.linkBtn a::after {content: ""; position: absolute; top: calc(50% - 4px); right: 10%; width:12px; height: 12px; border-top: 2px double #FFF; border-right: 2px double #FFF; -webkit-transform: rotate(45deg); transform: rotate(45deg);}





#bathroom .osusume_pickL { width: 44%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
#bathroom .osusume_pickL img { width: 100%; height: auto;}
#bathroom .osusume_pickR { width: 50%;}
@media screen and (max-width:767px){
    #bathroom .osusume_pickL { width: 100%; margin:0 auto 32px; display:block;}
    #bathroom .osusume_pickR { width: 100%;}
}
#laundryroom .osusume_pickL { width: 44%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
#laundryroom .osusume_pickL img { width: 100%; height: auto;}
#laundryroom .osusume_pickR { width: 50%;}
@media screen and (max-width:767px){
    #laundryroom .osusume_pickL { width: 100%; margin:0 auto 32px; display:block;}
    #laundryroom .osusume_pickR { width: 100%;}
}
#reform .osusume_pickL { width: 44%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
#reform .osusume_pickL img { width: 100%; height: auto;}
#reform .osusume_pickR { width: 50%;}
@media screen and (max-width:767px){
    #reform .osusume_pickL { width: 100%; margin:0 auto 32px; display:block;}
    #reform .osusume_pickR { width: 100%;}
}

/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/*バスルーム*/
#bathroom .ondo { margin: 64px 0 80px 0; background: #CDE59E; padding: 0 50px 32px 66px; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
#bathroom .ondoL { width: 48%;}
#bathroom .ondoR { width: 48%; padding: 50px 0 0 0;}
#bathroom .ondoL dt { min-height: 50px; border-top: 1px dotted #707070; border-bottom: 1px solid #707070; font-size: 20px; line-height: 140%; display: flex; flex-direction: column; justify-content: center; position: relative;}
#bathroom .ondoL div { margin: 0 0 32px 0;}
#bathroom .ondoL div:nth-child(1) dt { border-top: none;}
#bathroom .ondoL div dt:before { content: ""; display: block; width: 50px; height: 50px; position: absolute; left: -66px; top:0;}
#bathroom .ondoL div:nth-child(1) dt:before { background: url(./assets/images/bathroom/icon_coolbreeze.svg) no-repeat 50% 50% /50px;}
#bathroom .ondoL div:nth-child(2) dt:before { background: url(./assets/images/bathroom/icon_dry.svg) no-repeat 50% 50% /50px;}
#bathroom .ondoL div:nth-child(3) dt:before { background: url(./assets/images/bathroom/icon_heating.svg) no-repeat 50% 50% /50px;}
#bathroom .ondoL div:nth-child(4) dt:before { background: url(./assets/images/bathroom/icon_ventilation.svg) no-repeat 50% 50% /50px;}
.ondoR img + img { margin-top: 32px;}
@media screen and (max-width:767px){
    #bathroom .ondo { margin: 48px 0 64px 0; background: #CDE59E; padding: 32px 16px 32px 66px;}
    #bathroom .ondoL { width: 100%;}
    #bathroom .ondoR { width: 100%; padding: 0;}
}

#laundryroom .ondo { margin: 64px 0 0px 0; background: #CDE59E;}
#laundryroom .ondo2 { padding: 0 50px 32px 0; margin: 0 0 0 66px; border-top: 1px dotted #707070; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
#laundryroom .ondo2:nth-child(1) { border-top: none;}
#laundryroom .ondoL { width: 48%;}
#laundryroom .ondoR { width: 48%; padding: 24px 0 0 0;}
#laundryroom .ondoL dt { min-height: 50px; border-bottom: 1px solid #707070; font-size: 20px; line-height: 140%; display: flex; flex-direction: column; justify-content: center; position: relative;}
#laundryroom .ondoL div { margin: 0 0 32px 0;}
#laundryroom .ondo2 dt:before { content: ""; display: block; width: 50px; height: 50px; position: absolute; left: -66px; top:0;}
#laundryroom .ondo2:nth-child(1) dt:nth-child(1):before { background: url(./assets/images/laundryroom/icon_time.svg) no-repeat 50% 50% /50px;}
#laundryroom .ondo2:nth-child(2) dt:nth-child(1):before { background: url(./assets/images/laundryroom/icon_soft.svg) no-repeat 50% 50% /50px;}
#laundryroom .ondo2:nth-child(3) dt:nth-child(1):before { background: url(./assets/images/laundryroom/icon_jokin.svg) no-repeat 50% 50% /50px;}
@media screen and (max-width:767px){
    #laundryroom .ondo { margin: 64px 0 0px 0;}
    #laundryroom .ondo2 { padding: 0 20px 32px 0;}
    #laundryroom .ondoL { width: 100%;}
    #laundryroom .ondoL dd + dt { margin-top: 24px;}
    #laundryroom .ondoR { width: 100%; padding: 24px 0 0 0;}
}

/*3ステップ！*/
#kyutoki3step { margin-top: 50px; border: 5px solid #F08C00; background: #FFFCF2; position: relative;}
.kyutoki3stepTtl { font-size: 28px; line-height: 140%; font-weight: 700; border: 5px solid #F08C00; background: #fff; color: #F08C00; position: absolute; top: -7px; left: 50%; transform: translate(-50%, -50%); width: 544px; height: 88px; text-align: center; padding-top: 16px;}
#laundryroom #kyutoki3step { margin-top: 128px; padding: 80px 4% ;}
#laundryroom .kyutoki3stepTtl { padding: 0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
.kyutoki3stepTtl span { font-size: 48px; list-style: 140%; font-weight: 700; color: #F08C00;}
@media screen and (max-width:767px){
    #kyutoki3step { margin-top: 80px; border: 3px solid #F08C00;}
    .kyutoki3stepTtl { font-size: 18px; border: 3px solid #F08C00; top: -2px; max-width: 544px; width: 90%; padding-top: 26px;}
    .kyutoki3stepTtl span { font-size: 38px;}
}

.stepBox { /*max-width: 1000px; margin: 0 auto;*/ padding: 176px 0 80px;}
.stepBox > li+li { margin-top: 68px; padding-top: 128px; border-top: 1px dotted #000;}
@media screen and (max-width:767px){
    .stepBox > li+li { margin-top: 48px;}
}
#type_info { text-align: center; font-size: 16px; font-weight: 700; line-height: 100%; padding: 4px 0; margin: 0 auto 40px; display: flex; justify-content: center; flex-wrap: wrap;}
#type_info div:nth-child(1) { padding-right: 16px; border-right: 1px solid #000;}
#type_info div:nth-child(2) { padding-left: 16px; color:#F08C00;}
#type_info div:nth-child(3) { padding-left: 16px; color:#0099CC;}
@media screen and (max-width:767px){
    #type_info { text-align: left; display: block; margin: 0 auto 20px; padding: 0px 0; font-size: 14px;}
    #type_info div:nth-child(1) { padding-right: 0; border-right:none; margin-bottom: 8px;}
    #type_info div:nth-child(2) { padding-left: 0; margin-bottom: 8px;}
    #type_info div:nth-child(3) { padding-left: 0;}
}
h2.typeTtl { max-width: 1000px; width:100%; background: #FFEE64; text-align: center; font-size: 26px; font-weight: 700; line-height: 100%; margin: 0 auto 40px; padding: 10px;}
#type_list { max-width: 1000px; margin: 0 auto; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
.type_list { width: 48%; margin-bottom: 64px; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
.type_list div { width: 48%;}
.type_list figure { width: 48%;}
.type_list figure img { width: 100%; height: auto;}
.type_list figure figcaption { font-size: 12px; line-height: 160%; margin: 8px 0 0 0;}
.type_list h3 { font-size: 14px; line-height: 100%; font-weight: 700; margin: 0 0 10px 0;}
.type_list h2 { font-size: 18px; line-height: 100%; font-weight: 500; margin: 0 0 20px 0; padding: 10px; text-align: center; background: #FFF7DB; border-bottom: 1px dotted #000;}
.type_list p { margin: 0 0 1em;}
.standard { font-size: 12px; line-height: 100%; font-weight: 500; color:#F08C00; margin: 0 0 .5em;}
.deluxe { font-size: 12px; line-height: 100%; font-weight: 500; color:#0099CC; margin: 0;}
@media screen and (max-width:767px){
    h2.typeTtl { font-size: 20px; margin: 0 auto 32px;}
    .type_list { width: 100%;}
    .type_list div { width: 58%;}
    .type_list figure { width: 38%;}
}
@media screen and (max-width:500px){
    .type_list { width: 100%;}
    .type_list div { width: 100%;}
    .type_list figure { width: 100%;}
}

.stepTtl { position: relative; margin-bottom: 40px; text-align: center; line-height: 1.4; font-weight: 700; font-size: 24px; }
.stepTtl:before { content: ""; width: 70px; height: 70px; background: #FFEE64; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch; font-size: 40px; line-height: 100%; color:#F08C00; border-radius: 50%; position: absolute; top: -48px; left: 50%; transform: translate(-50%, -50%); font-weight: 700;font-family: 'Noto Sans';}
#step1 .stepTtl:before { content: "1"; }
#step2 .stepTtl:before { content: "2"; }
#step3 .stepTtl:before { content: "3"; }
@media screen and (max-width:767px){
    .stepTtl { margin-bottom: 32px; font-size: 20px; }
}


.stepSubTtl {
    position: relative;
    margin: 0 auto 20px;
    padding: 0.3em 1em;
    max-width: 500px;
    color: #fff;
    border-radius: 50px;
    background: #80C446;
    font-weight: 600;
    font-size: 1.8rem;
    text-align: center
}
.stepSubTtl::after {
    position: absolute;
    bottom: -12px;
    left: calc(50% - 10px);
    width: 0;
    height: 0;
    content: '';
    border-width: 12px 10px 0 10px;
    border-style: solid;
    border-color: #80C446 transparent transparent transparent
}
#step1List > li {
    width: 30%;
}
.step1Txt {
    text-align: center;
    line-height: 1.6;
    margin-top: 16px;
}
@media screen and (max-width:767px){
    #step1List { display: block;}
    #step1List > li { width: 100%; margin-bottom: 32px;}
}



/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/*リビングルーム*/
#featureList { background: #FFEE64; max-width: 1300px; width:100%; margin: 0 auto; padding: 24px; margin-bottom: 24px; }
#featureList dl { width: 24%; background: #fff; text-align: center; border-radius: 16px;}
#featureList dt { padding: 8px 0; background: #FFF7DB; font-size: 20px; font-weight: 700; color: #F08C00; text-align: center; border-radius: 16px 16px 0 0;}
#featureList dd { padding: 8px 32px; font-weight: 500;}
@media screen and (max-width:767px){
    #featureList { width:100%;}
    #featureList dl { width: 48%;}
    #featureList dl:nth-child(1),
    #featureList dl:nth-child(2) { margin-bottom: 16px;}
    #featureList dd { padding: 8px 24px;}
}
@media screen and (max-width:599px){
    #featureList { width:100%;}
    #featureList dl { width: 100%;}
    #featureList dl:nth-child(1),
    #featureList dl:nth-child(2),
    #featureList dl:nth-child(3) { margin-bottom: 12px;}
    #featureList dt { padding: 5px 0; font-size: 18px; }
    #featureList dd { padding: 6px 16px;}
}

.livingroom_top {display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between; margin: 32px auto;}
.livingroom_topL { width: 38%;}
.livingroom_topC { width: 33%;}
.livingroom_topC img { width: 100%; height: auto;}
.livingroom_topR { width: 24%;}

.roomArea { width: 192px;}
.roomArea dt { background: #fff; font-size: 18px; line-height: 100%; font-weight: 700; padding: 6px; text-align: center; margin: 0 0 8px 0;}
.roomArea dd { line-height: 200%; font-weight: 500;}

.livingroom_topR ul { padding: 15px 20px; background: #fff; font-weight: 500; border-radius: 6px; margin: 0 0 12px 0;}
.livingroom_topR ul li { margin-left: 1.1em; text-indent: -1.1em; text-align: left;}
.livingroom_topR ul li::before { content: "●"; margin-right: 0.25em; font-size: 1.2rem; color: #CDE59E; }
@media screen and (max-width:900px){
    .livingroom_topL { width: 100%; margin-bottom: 32px;}
    .livingroom_topC { width: 60%; margin-bottom: 16px;}
    .livingroom_topR { width: 35%;}
}
@media screen and (max-width:640px){
    .livingroom_topL { width: 100%; margin-bottom: 32px;}
    .livingroom_topC { width: 100%; text-align: center;}
    .livingroom_topC img { width: 70%;}
    .livingroom_topR { width: 100%;}
}

.nebiki {
    padding: 15px;
    background: #CDE59E;
    text-align: center;
    line-height: 1.6;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: 6px;
}
.nebiki span { display: block; font-size: 16px; color: #e60012 }
.nebiki .intax { display: inline; font-size: 12px;}

#kitchen .productList .pdtImgBox { justify-content:space-between;}
#kitchen .productList .pdtImgBox .productImg { width: 72%;}
#kitchen .productList .pdtImgBox .accessories { width: 25%; margin: 0;}
@media screen and (max-width:500px){
    #kitchen .productList .pdtImgBox .productImg { width: 100%;}
    #kitchen .productList .pdtImgBox .accessories { width: 100%; margin: 16px auto 0; text-align: center;}
    #kitchen .productList .pdtImgBox .accessories img { max-width: 200px; width: 100%;}
}

#kitchen .productList #no9 .pdtImgBox,
#kitchen .productList #no12 .pdtImgBox,
#kitchen .productList #no13 .pdtImgBox,
#kitchen .productList #no14 .pdtImgBox { text-align: center;}
#kitchen .productList #no9 .pdtImgBox .productImg,
#kitchen .productList #no12 .pdtImgBox .productImg,
#kitchen .productList #no13 .pdtImgBox .productImg,
#kitchen .productList #no14 .pdtImgBox .productImg { width: 100%;}
#kitchen .productList #no9 .pdtImgBox img { max-height: 202px; width: auto; margin: 0 auto;}
#kitchen .productList #no12 .pdtImgBox img { max-height: 202px; width: auto; margin: 0 auto;}
#kitchen .productList #no13 .pdtImgBox img { max-height: 223px; width: auto; margin: 0 auto;}
#kitchen .productList #no14 .pdtImgBox img { max-height: 223px; width: auto; margin: 0 auto;}
#kitchen .productList #no13 .percentOff { margin: 0;}
#kitchen .productList #no14 .percentOff { margin: 0;}
#kitchen .productList #no13  .priceBox .nebiki,
#kitchen .productList #no14  .priceBox .nebiki { display: inline-block; position: absolute; right: 0; bottom: 0;}
@media screen and (max-width:1300px){
    #kitchen .productList #no13 .priceBox .nebiki,
    #kitchen .productList #no14 .priceBox .nebiki { display: block; position: static; margin-top: 10px;}
    #kitchen .productList #no13 .priceBox .nebiki br,
    #kitchen .productList #no14 .priceBox .nebiki br { display: none;}
}
@media screen and (max-width: 1200px){
    #kitchen .productList #no13 .percentOff,
    #kitchen .productList #no14 .percentOff { top: auto; bottom: 150px; }
}


#livingroom .productList .pdtImgBox  {align-items: normal; justify-content:space-between;}
#livingroom .productList .pdtImgBox div { display: block; width: 176px;}
#livingroom .productList .pdtImgBox div span { font-size: 14px; line-height: 100%; margin: 0; padding: 6px 16px; margin: 16px 0 0 0; background: #fff; font-weight: 700; display:block; text-align: center; }
@media screen and (max-width:900px){
    #livingroom .productList .pdtImgBox {max-width: 460px; margin: 0 auto;}
}
@media screen and (max-width:500px){
    #livingroom .productList .pdtImgBox div { width: 100%;}
}
#livingroom .productList .priceBox div {display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
#livingroom .productList .priceBox { position: relative;}
#livingroom .productList .priceBox .nebiki_outer { margin: 10px 0; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
#livingroom .productList .priceBox .nebiki { display: inline-block; /*position: absolute;*/ right: 0; bottom: 0; width: 48%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
@media screen and (max-width:1300px){
    #livingroom .productList .priceBox .nebiki { display: block; position: static; margin-top: 10px;}
    #livingroom .productList .priceBox .nebiki br { display: none;}
}
@media screen and (max-width:1000px){
    #livingroom .productList .priceBox .nebiki { width: 100%;}
}
@media screen and (max-width:767px){
    #livingroom .productList .priceBox .nebiki br { display: block;}
}

#gasCord {
    margin: 30px auto 0;
    padding-bottom: 20px;
    border: solid 1px #333;
    background: #fff;
    text-align: center;
    max-width: 1000px;
}
.gcTtl {
    padding: 0.4em;
    border-bottom: solid 1px #333;
    background: #333;
    line-height: 1.4;
    font-size: 2.4rem;
    color: #fff
}
.gcList {
    margin: 20px 0 12px;
    width: 100%;
    text-align: center
}
.gcList li {
    width: 24%;
    font-size: 2.1rem;
    font-weight: 500
}
.gcList li+li {
    border-left: dashed 1px #aaa
}
.gcList .price {
    margin-left: 10px;
    font-size: 2.9rem
}
.gcList .intax {
    font-size: 1.6rem
}
#gasCord p { padding: 0 5%;}
@media screen and (max-width:767px){
    .gcList li { width: 50%;}
    .gcList li:nth-child(1),
    .gcList li:nth-child(2) { border-bottom: dashed 1px #aaa;}
    .gcList li:nth-child(3) { border-left: none;}
}
@media screen and (max-width:500px){
    .gcList li { width: 100%;}
    .gcList li:nth-child(1),
    .gcList li:nth-child(2) { border-bottom: dashed 1px #aaa; border-left: none;}
    .gcList li:nth-child(3) { border-left: none; border-bottom: dashed 1px #aaa;}
    .gcList li:nth-child(4) { border-left: none; border-bottom: dashed 1px #aaa;}
}
.gasplug { background: #FFF7DB; padding: 56px 0;}
.gasplug .inner { max-width: 1000px; margin: 0 auto;}

#withEquip { font-weight: 500; color: #000; text-align: center; line-height: 1.6;}
#withEquip dt {
    font-size: 24px;
    font-weight: 600;
    line-height: 60px;
    position: relative;
    height: 60px;
    margin: 0em 50px 1em;
    padding: 0 2rem;
    text-align: center;
    background: #CDE59E;
}
#withEquip dt:before,
#withEquip dt:after { position: absolute; top: 0; display: block; height: 48px; content: ''; border: 30px solid #CDE59E;}
#withEquip dt:before { left: -40px; border-left-width: 15px; border-left-color: transparent; }
#withEquip dt:after { right: -40px; border-right-width: 15px; border-right-color: transparent; }
#withEquip dt span { position: relative; display: block; }
@media screen and (max-width:500px){
    #withEquip dt { font-size: 14px; height: 60px; line-height: 160%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1ch;}
    #withEquip dt::after,
    #withEquip dt::before { height: 0px; border: 30px solid #CDE59E;}
    #withEquip dt::before { left: -45px; border-left-width: 15px !important; border-left-color: transparent !important;}
    #withEquip dt::after { right: -45px; border-right-width: 15px !important; border-right-color: transparent !important;}
}

/*sup {
    position: relative;
    vertical-align: text-top;
    line-height: 0;
    font-size: 2px;
}*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
 
sub {
  bottom: -0.25em;
}
 
sup {
  top: -0.5em;
}


#withEquip dd {
    line-height: 1.4;
    font-size: 1.8rem;
    font-weight: 500
}
#withEquip dd .discount { font-size: 16px; color: #e60012;}
#withEquip dd .intax { font-size: 1.5rem;}
#withEquip dd .notes { margin-top: 0.3em;}
@media screen and (max-width:767px){
    #withEquip dt { font-size: 18px;}
}
@media screen and (max-width:600px){
    #withEquip dt { font-size: 14px;}
}

#plumbingWork { margin-top: 25px; background: #fff;}
#plumbing > p { padding: 0.2em 1em; background: #FFEE64; text-align: center; font-size: 2.1rem; font-weight: 600;}
#partsList { margin-bottom: 15px; border-bottom: solid 1px #bbb;}
#partsList li {
    margin: 20px 0;
    width: 33.33333%;
    width: calc(100% / 3);
    text-align: center;
    line-height: 1.5;
    font-size: 1.6rem;
    font-weight: 500
}
#partsList li:not(:first-child) {
    border-left: dashed 1px #aaa
}
#partsList li dd {
    font-size: 1.9rem
}
#partsList li .numeral {
    font-size: 3.3rem
}
#plugLayout {
    padding: 0 40px 35px
}
#layoutImg {
    margin: 50px auto 25px;
    max-width: 700px
}
@media screen and (max-width:767px){
    #partsList { display: block;}
    #partsList li { margin: 0; width:100%; padding: 10px 0;}
    #partsList li:not(:first-child) { border-top: dashed 1px #aaa; border-left: none;}
}



/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/*リフォーム*/
.reform_thumb_list { margin: 40px 0 64px; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
.reform_thumb { width: 31%;}
.reform_thumb img { width: 100%; height: auto;}
.reform_thumb div { border-left: 1px solid #333; margin: 12px 0 0 0; padding: 0 12px; text-align: left;}
.reform_thumb div h2 { font-size: 20px; line-height: 160%; margin: 0 0 8px; text-align: left;}
.reform_thumb div p { font-size: 16px; line-height: 160%;}
@media screen and (max-width:767px){
    .reform_thumb { width: 100%;}
    .reform_thumb + .reform_thumb { margin-top: 32px;}
    .reform_thumb div h2 { font-size: 16px;}
    .reform_thumb div p { font-size: 12px;}
}

/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/*特定商取引法に基づく表示*/
.dl_Tbl { margin: 0 auto 80px; border-top: 1px solid #ddd;}
.dl_Tbl div { border-bottom: 1px solid #ddd; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between;}
.dl_Tbl div dt { background: #FFF7DB; padding: 16px; width: 25%;}
.dl_Tbl div dd { padding: 16px; width: 75%;}
@media screen and (max-width:767px){
    .dl_Tbl div dt { padding: 10px; width: 100%;}
    .dl_Tbl div dd { padding: 16px; width: 100%;}
}

/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------ */
/*一部商品の納期遅延について*/
.delay_txt { margin: 0 auto 80px;}
.delay_txt p { line-height: 200%; margin: 0 0 1em;}


img {flex-shrink: 0}