@charset "utf-8";

html {
    height: 100.1%;
    overflow-y: scroll;
}

#common-footer {
    margin-top: 0;
}

#content .clearnel {
    overflow-x: hidden;
    position: relative;
    font-family: "Hiragino Kaku Gothic ProN", 'Noto Sans JP', sans-serif;
}

.clearnel div,
.clearnel dl,
.clearnel dt,
.clearnel dd,
.clearnel ul,
.clearnel ol,
.clearnel li,
.clearnel pre,
.clearnel form,
.clearnel input,
.clearnel textarea,
.clearnel p,
.clearnel blockquote,
.clearnel th,
.clearnel td {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clearnel i {
    font-style: unset;
}

.clearnel p {
    font-size: 16px;
    line-height: 1.8;
    color: #111;
}

.clearnel .small {
    font-size: 14px;
}

.clearnel .small2 {
    font-size: 11px;
    line-height: 1.5;
    display: block;
    margin-top: .2em;
}

.clearnel .InnerBox {
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
}

.clearnel .center {
    text-align: center;
}

.clearnel .fnt-red {
    color: #AE132A;
}

.clearnel figure {
    margin: 0;
}

.clearnel img {
    max-width: 100%;
    height: auto;
}

.clearnel .clearnelBox {
    background: #ECECEC;
    padding: 110px 0 75px;
}

.clearnel .clearnelBox-inner {
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    width: 95%;
    max-width: 1150px;
    margin: 0 auto;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.clearnel .clearnelBox-inner .InnerBox {
    max-width: 940px;
}

.clearnel .clearnelBox-inner .Box-inner {
    max-width: 910px;
    margin: 0 auto;
}

.clearnel .slick-prev,
.clearnel .slick-next {
    width: 29.5px;
    height: 36px;
    z-index: 11;
    color: transparent;
    font-size: 0;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.clearnel .slick-next {
    right: 60px;
    background: url(../img/clearnel/btn-next.png) no-repeat 50% 50%;
    background-size: contain;
}

.clearnel .slick-prev {
    left: 60px;
    background: url(../img/clearnel/btn-prev.png) no-repeat 50% 50%;
    background-size: contain;
}

.clearnel .slick-dotted.slick-slider {
    margin-bottom: 0;
}

.clearnel .slick-slide img {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.clearnel .slick-slide {
    overflow: hidden;
}

.clearnel .slick-slide video {
    display: block;
    width: 100%;
    min-height: 100vh;
    object-fit: cover;
}

.clearnel .slick-img,
.clearnel .slick-img picture {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.clearnel .slick-img img {
    height: 100%;
    margin: auto;
    max-width: 100%;
    min-height: 100vh;
    object-fit: cover;
    width: 100%;
}
.clearnel .display_sp{
    display: none;
}
.clearnel .display_pc{
    display:inline;
}

@keyframes zoomUp {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
        /* 拡大率 */
    }
}

.clearnel .slick-img.add-animation picture img {
    animation: zoomUp 10s linear 0s normal both;
}

/*-- title --*/
.clearnel .secTitle01 {
    font-size: 14px;
    margin: 0 auto 1em;
    line-height: 2.2;
}

.clearnel .secTitle01 span {
    font-size: 38px;
    margin: -.3em .8em 0 0;
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
    font-family: Helvetica, "Helvetica Neue", sans-serif;
}

.clearnel .secTitle02 {
    font-size: 25px;
    margin: 0 auto 1em;
    padding: 11px 0 11px 13px;
    border-left: 2px solid #5F5F5F;
    font-weight: bold;
}

.clearnel .secTitle03 {
    font-size: 20px;
    margin: 0 auto 1em;
    font-weight: bold;
}

.clearnel .secTitle03:before {
    margin: 0 .4em 0 0;
    width: 34px;
    height: 2px;
    content: "";
    background: #5F5F5F;
    display: inline-block;
    vertical-align: middle;
}

.clearnel .catchCopy {
    font-size: 24px;
    color: #5F5F5F;
    margin: 0 0 1em;
    font-weight: bold;
    letter-spacing: .06em;
    color: #111;
}

.clearnel .itemList section {
    max-width: 438px;
    width: 47%;
    margin: 0 0 75px;
}

.clearnel .itemList section table {
    width: 100%;
    position: relative;
}

.clearnel .itemList section table caption {
    font-size: 16px;
    padding: 20px 0 10px;
}

.clearnel .itemList section table .btn {
    width: 170px;
}

.clearnel .itemList section:nth-child(2n) {
    margin-left: 6%;
}

.clearnel .boxList .FlexBox {
    margin: 0 auto 78px;
    min-height: 396px;
    position: relative;
}

.clearnel .boxList .FlexBox .Box {
    width: 44%;
    position: static;
}

/*
.clearnel .boxList .FlexBox figure{
	width:49%;
    margin: 0.9em 0 0;
}
*/
.clearnel .boxList .FlexBox figure {
    width: 100%;
    max-width: 563px;
    margin: 0.9em 0 0;
    position: absolute;
    top: 0;
}

/*
.clearnel .boxList .FlexBox figure{
    right: calc(50% - 448px);
    position: relative;
}
.clearnel .boxList .FlexBox.Reverse figure{
    left: calc(50% - 448px);
    position: relative;
}
*/
/* table
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/

.clearnel table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

.clearnel table th {
    vertical-align: top;
    font-weight: normal;
}

.clearnel caption,
.clearnel th {
    text-align: left;
}

.clearnel table td {
    vertical-align: top;
    word-break: break-all;
}

.clearnel .specTable {
    overflow: hidden;
    margin: 0 auto 32px;
}

.clearnel .specTable th,
.clearnel .specTable td {
    font-size: 16px;
}

.clearnel .specTable thead th {
    width: 45%;
    text-align: center;
    padding: 0 50px 10px;
}

.clearnel .specTable thead th.specDepth {}

.clearnel .specTable thead th.specSize {
    padding: 0;
    width: 9%;
}

.clearnel .specTable thead th span {
    display: inline-block;
    padding: 20px 10px 10px;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.clearnel .specTable thead th span i {
    display: inline-block;
    font-size: 13px;
    margin: -.2em 0 0 .5em;
    vertical-align: middle;
}

.clearnel .specTable thead th.specSize span {
    padding: 20px 0 10px;
}

.clearnel .specTable tbody th {
    padding: 15px 0;
    text-align: center;
    position: relative;
}

.clearnel .specTable tbody th .txt {
    display: block;
    margin-top: .1em;
    font-size: 13px;
}

.clearnel .specTable tbody th:before {
    content: "";
    width: 1000px;
    height: 1px;
    background: #ccc;
    position: absolute;
    bottom: 17px;
    left: 0;
}

.clearnel .specTable tbody td {
    /*padding: 8px 0 1px 50px;*/
    padding: 8px 0 1px 38px;
}

.clearnel .itemTable th,
.clearnel .itemTable td {
    padding: 0 15px;
    border-top: 10px solid #fff;
    border-bottom: 25px solid #fff;
    font-size: 16px;
    line-height: 1.6;
}

.clearnel .itemTable.tbl2 td {
    padding: 0;
    width: 59.5%;
}

.clearnel .itemTable th {
    width: 19%;
    padding: 0;
    border-right: 1px solid #ccc;
    font-size: 15px;
}

.clearnel .itemTable th .clr-pure_oak,
.clearnel .itemTable th .clr-pure_white,
.clearnel .itemTable th .clr-satin_po_sw,
.clearnel .itemTable th .clr-wn_natural {
    margin: 12px 0 0 31px;
}

/*
.clearnel #sec05-02 .itemTable th{
    width: 24%;
}
.clearnel .itemTable.clr th {
    width: 12%;
}
*/
.clearnel .itemTable td {
    width: 42.5%;
}

/*
.clearnel .itemTable.clr td{
    width: 46.5%;
}
*/
.clearnel .itemTable.clr td.btn,
.clearnel .itemTable td.btn {
    /*width: 40.5%;*/
    padding: 3px 0;
}

/*
.clearnel .itemTable.clr th span {
    width: 35px;
    height: 35px;
}
*/

.clearnel .itemTableText .attention-txt {
    display: block;
    line-height: 1.5;
    margin-top: .5em;
    text-indent: -1em;
    padding-left: 1em;
}

/* slick
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/

.clearnel .slick-dots {
    bottom: inherit;
    top: -48px;
}

.clearnel .mainItemSlider .slider {
    opacity: 0;
    transition: all .1s;
}

.clearnel .mainItemSlider .slider.slick-initialized {
    opacity: 1;
}

.clearnel .mainItemSlider .slick-dots {
    top: inherit;
    bottom: -48px;
}

.clearnel .mainItemSlider .slick-track {
    display: flex;
}

.clearnel .mainItemSlider .slick-slide {
    height: auto !important;
}

.clearnel .slick-dots li,
.clearnel .slick-dots li button {
    width: 50px;
    height: 5px;
    padding: 0;
}

.clearnel .slick-dots li {
    margin: 0 7px;
}

.clearnel .slick-dots li button {
    background: #efefef;
}

.clearnel .mainItemSlider .slick-dots li button {
    background: #fff;
}

.clearnel .mainItemSlider .slick-dots li.slick-active button,
.clearnel .slick-dots li.slick-active button {
    background: #2c2c2c;
}

.clearnel .slick-dots li button:before {
    display: none;
}

/* nav-header
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/
.nav-header {
    position: absolute;
    width: 100%;
    top: 187px;
    left: 6px;
    z-index: 10000;
}

.nav-header .InnerBox {
    max-width: 1180px;
}

.nav-header.active {
    position: fixed;
    top: 0;
}

/*
body.open {
  overflow: hidden;
}
*/

body.fixed {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background: #fff;
    z-index: 1;
}

/* mainItemSlider
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/

.clearnel .mainItemSlider {
    position: relative;
}

.clearnel .mainItemSlider .mainTitle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.clearnel .mainItemSlider .mainTitle .InnerBox {
    display: block;
    padding: 65px 0 0;
    max-width: 1150px;
}

.clearnel .mainItemSlider .scrollNav-wrap {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    height: calc(100% - 195px);
}

.clearnel .mainItemSlider .scrollNav {
    display: block;
    max-width: 1150px;
    margin: 0 auto;
    /*position: relative;*/
}

.clearnel .mainItemSlider .scrollNav a:hover {
    color: #111 !important;
    text-decoration: none !important;
}

.clearnel .mainItemSlider .scrollNav a {
    color: #111;
    transform: rotate(90deg);
    position: absolute;
    right: 0;
    bottom: 142px;
    /*
    width: 100px;
    height: 1.5em;
    */
}

.clearnel .mainItemSlider .scrollNav span {
    width: 10px;
    height: 54px;
    font-size: 20px;
}

.clearnel .mainItemSlider .scrollNav span:after {
    display: block;
    height: 1px;
    width: 0px;
    content: "";
    position: absolute;
    left: 95px;
    background-color: #707070;
    z-index: 5;
    bottom: .4em;
}

.clearnel .mainItemSlider .scrollNav span:after {
    webkit-animation: sclnav1 1.5s infinite ease-in-out;
    animation: sclnav1 1.5s infinite ease-in-out;
}

@-webkit-keyframes sclnav1 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
        width: 100px;
    }
}

@keyframes sclnav1 {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
        width: 100px;
    }
}

.playBox-inner {
    width: 100%;
}

/* Sec01
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/

.clearnel #sec01 .InnerBox {
    padding: 68px 0 42px;
}

.clearnel #sec01 .catchCopy {
    margin: .8em auto 0.4em;
}

.clearnel #sec01 .read {
    line-height: 3.6;
}

.clearnel #sec01 .videoBox {
    position: relative;
}

.clearnel #sec01 .videoBox video {
    width: 100%;
}

.clearnel #sec01 .sound {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    right: 14px;
    top: -47px;
    width: 54px;
    height: 43px;
    background: url(../img/clearnel/ico-sound_off.png) no-repeat 50% 50%;
    background-size: 34px auto;
    transition: all .4s;
}

.clearnel #sec01 .sound:before {
    content: "";
    width: 15px;
    height: 15px;
    background: #fff;
    opacity: 0;
    position: absolute;
    top: 13px;
    right: 7px;
    transition: all .4s;
}

.clearnel #sec01 .sound.on:before {
    opacity: 1;
}

.clearnel #sec01 .youtubeBox,
.clearnel #sec01 .youtubeBox-inner,
.clearnel #sec01 .youtubeBox iframe {
    width: 100%;
    height: 650px;
}


/* Sec02
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/
.clearnel #sec02 {
    padding: 102px 0 1px;
}

.clearnel #sec02 .secTitle01 {
    margin: 0 0 1.2em 105px;
}

.clearnel #sec02 .boxList .FlexBox .Box {
    padding: 0 0 0 104px;
}

.clearnel #sec02 .boxList .FlexBox:nth-child(even) .Box {
    padding: 0 104px 0 0;
}

.clearnel #sec02 .boxList .FlexBox figure {
    left: inherit;
    right: 0;
}

.clearnel #sec02 .boxList .FlexBox:nth-child(even) figure {
    right: inherit;
    left: 0;
}

.clearnel #sec02 .boxList .sec02-3 .Box figure.img {
    max-width: 245px;
    width: 88%;
    margin: 35px auto 0;
    display: block;
    position: relative;
    left: inherit;
    right: inherit;
}
.clearnel #sec02 .good_design {
    max-width: 810px;
    width: 100%;
    margin: 35px auto 35px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.clearnel #sec02 .good_design .img {
    margin: auto;
        width: 44%;
}
.clearnel #sec02 .good_design .text {
    margin: auto;
    width: 44%;
}


/* Sec03
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/
.clearnel #sec03 {
    padding: 108px 0 53px;
    background: #F7F7F7;
}

.clearnel #sec03 .InnerBox {
    padding: 0 0 62px;
}

.clearnel #sec03 .InnerBox .catchCopy {
    margin: 0.8em auto 0;
}

.clearnel #sec03 .boxList .FlexBox .Box {
    padding: 0 0 0 104px;
    position: static;
}

.clearnel #sec03 .boxList .FlexBox:nth-child(even) figure {
    left: inherit;
    right: 0;
}

.clearnel #sec03 .boxList .FlexBox figure {
    right: inherit;
    left: 0;
}

.clearnel #sec03 .boxList .FlexBox figure video {
    display: block;
    width: 100%;
    object-fit: cover;
}

.clearnel #sec03 .boxList .FlexBox {
    min-height: 316px;
}

.clearnel #sec03 .boxList .FlexBox:nth-child(odd) .Box {
    padding: 0 104px 0 0;
}

.clearnel #sec03 .boxList .FlexBox:after {
    content: "";
    width: 30px;
    height: 6px;
    background: url(../img/clearnel/ico-dots.png) no-repeat 50% 50%;
    background-size: contain;
    position: absolute;
    bottom: -6px;
    left: 44%;
    margin: 0 0 0 -30px;
}

.clearnel #sec03 .boxList .FlexBox:nth-child(odd):after {
    right: 44%;
    margin: 0 -30px 0 0;
    left: inherit;
}

/* Sec04
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/
.clearnel #sec04 {
    padding: 108px 0 53px;
    background: #CCCBCB;
}

.clearnel .planItemSlider {
    margin: 80px auto -8px;
}

.clearnel .planItemSlider .slick-dots {
    top: -64px;
}

.clearnel .planItemSlider dl {
    padding: 40px;
}

.clearnel .planItemSlider dl dt {
    font-size: 22px;
    font-weight: bold;
}

.clearnel .planItemSlider dl dd {
    margin: .8em auto 1.7em;
    font-size: 16px;
    line-height: 1.9;
}

.clearnel .planItemSlider dl dd ul li,
.clearnel .planItemSlider dl dd ul li a {
    display: inline-block;
    padding: 0 .5em 0 0;
    position: relative;
    color: #000 !important;
}

.clearnel .planItemSlider dl dd ul li {
    margin-right: .5em;
}

.clearnel .planItemSlider dl dd ul li:before {
    content: "";
    width: 1px;
    height: 1em;
    position: absolute;
    right: 0;
    margin-top: -.5em;
    top: 50%;
    background: #918C87;
}

.clearnel .planItemSlider dl dd ul li:last-child:before {
    display: none;
}

.clearnel .planItemSlider dl dd ul li a:hover {
    text-decoration: underline;
}

.clearnel .planItemSlider .slick-slide {
    margin: 0 38px;
}

.clearnel .planItemSlider .slick-next {
    top: 253px;
    right: 142px;
}

.clearnel .planItemSlider .slick-prev {
    top: 253px;
    left: 142px;
}

/* Sec05
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/
.clearnel #sec05 {
    padding: 105px 0 1px;
}

.clearnel #sec05 .Box-inner {
    max-width: 925px;
    margin: 0 0 0 auto;
}

.clearnel #sec05 .secTitle01 {
    margin: 0 auto 2em;
}

.clearnel #sec05 .secItemSlider {
    margin: 74px auto 55px;
    max-width: 836px;
    height: 556px;
}

.clearnel #sec05 .secItemSlider .center {
    top: -3.8em;
    position: relative;
}

.clearnel #sec05 .secItemSlider .slick-prev {
    left: -45px;
    margin-top: -15px;
}

.clearnel #sec05 .secItemSlider .slick-next {
    right: -60px;
    margin-top: -15px;
}

.clearnel .specDepthBox {
    position: relative;
    width: 50%;
}

.clearnel .specDepthBox dt {
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
}

.clearnel .specDepthBox dt span {
    width: 22px;
    margin-top: 1px;
}
.clearnel .specDepthBox dt span + span{
    margin-top:10px;
}
.clearnel .specDepthBox dd {
    position: relative;
    padding: 0 0 0 12px;
    padding: 0;
    line-height: 1.6;
    width: 90%;
}

.clearnel .specDepthBox dd .price {
    display: block;
    padding-left: 34px;
}

.clearnel .specDepthBox dd .btn {
    width: 100%;
    font-size: 12px;
    text-align: center;
}

.clearnel .clr-pure_oak {
    margin: -5px 8px 0 0;
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(../img/clearnel/ico-pure_oak.png) no-repeat 50% 50%;
    background-size: contain;
    vertical-align: middle;
}
.clearnel .clr-pure_white {
    margin: -5px 8px 0 0;
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(../img/clearnel/ico-pure_pw.png) no-repeat 50% 50%;
    background-size: contain;
    vertical-align: middle;
}
.clearnel .clr-satin_po_sw {
    margin: -5px 8px 0 0;
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(../img/clearnel/clr-satin_po_sw.png) no-repeat 50% 50%;
    background-size: contain;
    vertical-align: middle;
}
.clearnel .clr-mat_bk {
    margin: -5px 8px 0 0;
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(../img/clearnel/ico-mat_bk.png) no-repeat 50% 50%;
    background-size: contain;
    vertical-align: middle;
}

.clearnel .clr-bk {
    margin: -5px 8px 0 0;
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(../img/clearnel/ico-bk.png) no-repeat 50% 50%;
    background-size: contain;
    vertical-align: middle;
}

.clearnel .clr-satin_gray {
    margin: -5px 8px 0 0;
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(../img/clearnel/ico-satin_gray.png) no-repeat 50% 50%;
    background-size: contain;
    vertical-align: middle;
}
.clearnel .clr-satin_white {
    margin: -5px 8px 0 0;
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(../img/clearnel/ico-satin_white.png) no-repeat 50% 50%;
    background-size: contain;
    vertical-align: middle;
}

.clearnel .clr-wn_cb {
    margin: -5px 8px 0 0;
    width: 22px;
    height: 63px;
    display: inline-block;
    background: url(../img/clearnel/ico-wn_cb.png) no-repeat 50% 50%;
    background-size: contain;
    vertical-align: middle;
}

.clearnel .clr-wn_natural {
    margin: -5px 8px 0 0;
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(../img/clearnel/ico-wn_natural.png) no-repeat 50% 50%;
    background-size: contain;
    vertical-align: middle;
}

.clearnel .clr-wn_cb2 {
    margin: -5px 8px 0 0;
    width: 63px;
    height: 22px;
    display: inline-block;
    background: url(../img/clearnel/ico-wn_cb2.png) no-repeat 50% 50%;
    background-size: contain;
    vertical-align: middle;
}

.clearnel .secItem__btn__item .btn {
    font-size: 15px;
    max-width: 319px;
    margin-bottom: 40px;
}

.secItem__btn__item .btn--navy {
    background: #5F5F5F;
    color: #fff !important;
    border-color: #5F5F5F;
    font-weight: normal;
}

.secItem__btn__item .btn--navy svg {
    margin: -4px 8px 0 0;
    width: 23.72px;
    height: 25px;
}

.clearnel .secItem__btn__item .btn--navy svg {
    margin: -2px 8px 0 0;
    width: 18px;
    height: 17.4px;
}

.clearnel .secItem__btn__item .btn--navy:hover {
    color: #5f5f5f !important;
}

.clearnel .secItem__btn__item .btn--navy:hover:after {
    border-color: transparent transparent transparent #5f5f5f;
}

.clearnel .secItem__btn__item .btn--navy:hover svg .a,
.clearnel .secItem__btn__item .btn--navy:hover svg .b,
.clearnel .secItem__btn__item .btn--navy:hover svg .c {
    stroke: #5f5f5f;
}

.clearnel .specTableText {
    position: relative;
}

.clearnel .specTableText span {
    display: inline-block;
    /*margin:0 3.4em 1em 0;*/
    padding: 0 .5em 0 0;
    margin: 0 .5em 0 0;
    font-size: 14px;
    position: relative;
}

.clearnel .specTableText .attention {
    color: #AE132A;
    font-size: 12px;
    position: absolute;
    right: .6em;
    top: -1.2em;
}

.clearnel #sec05 #spec01 {
    margin: 0 auto 75px;
}

.clearnel #sec05 #spec02 {
    margin: 70px auto 50px;
}

.clearnel .itemList {
    margin: 0 auto;
}

.clearnel .itemList section {}

.clearnel .itemTable .secItem__btn__item .btn {
    max-width: 170px;
    margin: 0;
    font-size: 12px;
    text-align: center;
    padding: 10px 10px 10px 0;
    box-sizing: border-box;
}

.clearnel #sec05 .itemTableText .small.fnt-red {
    margin-left: .8em;

}
.clearnel #sec05 .color_sec {
    padding: 0.5em 0; 
    margin: 0.5em 0;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    font-size: 15px;
    text-indent: -1.65em;
    padding-left: 1.65em;
}
.clearnel #sec05 .color_sec p {
    font-size: 15px;
}
.clearnel #sec05 .color_sec .color_sec_ind{
padding-left: 1.5em;
}
.clearnel #sec05 .color_sec .clr-bk,
.clearnel #sec05 .color_sec .clr-pure_oak,
.clearnel #sec05 .color_sec .clr-pure_white,
.clearnel #sec05 .color_sec .clr-satin_gray,
.clearnel #sec05 .color_sec .clr-satin_po_sw,
.clearnel #sec05 .color_sec .clr-satin_white,
.clearnel #sec05 .color_sec .clr-wn_cb,
.clearnel #sec05 .color_sec .clr-wn_cb2,
.clearnel #sec05 .color_sec .clr-wn_natural,
.clearnel #sec05 .color_sec .clr-mat_bk{
    margin: -5px 2px 0 2px;
}
.clearnel #sec05 .attention-txt2{
    text-indent: -1em;
    padding-left: 1em;
}




/* FlexBox
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/
.FlexBox,
.FlexBox.Nowrap,
.FlexBox.End,
.FlexBox.Start,
.FlexBox.Reverse,
.Flex.Column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: justify;
    align-content: space-between;
    box-sizing: border-box;
}

.FlexBox.Middle {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.Flex.Column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.FlexBox.Bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.Flex.Column>* {
    width: 100%;
}

.FlexBox.Nowrap {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.FlexBox.Reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.FlexBox.End {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.FlexBox.Start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.FlexBox.Center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}



/* slide_menu
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/
#Menu {
    cursor: pointer;
}

.close {
    width: 19.5px;
    height: 20.5px;
    background: url(../img/clearnel/ico-close@2x.png) no-repeat 50% 50%;
    background-size: contain;
    position: absolute;
    top: 20px;
    right: 32px;
    cursor: pointer;
}

#Slide_Menu .Link_Menu {
    width: 100%;
    max-width: 313px;
}

#Slide_Menu .Link_Menu li {
    padding: 0 15px 0 0;
    margin: 0 15px 15px 0;
    font-size: 19px;
    float: left;
}

#Slide_Menu .Link_Menu li.menu01 {
    border-right: 1px solid #000;
}

#Slide_Menu {
    display: block;
    position: fixed;
    top: 196px;
    left: -100%;
    width: 48%;
    height: 100%;
    height: calc(100vh - 196px);
    max-width: 615px;
    overflow-y: auto;
    z-index: 10001;
    background: #fff;
    box-sizing: border-box;
    padding: 65px 75px 0 0;
    padding: 65px 75px 65px 0;
    font-size: 0;
    transition: all .4s;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    max-height: 100vh;
}

@media screen and (min-width: 1601px) {
    #Slide_Menu {
        width: 48%;
        max-width: 100%;
    }
}

#Slide_Menu .title {
    text-align: right;
}

#Slide_Menu .Inner {
    overflow: auto;
    height: auto;
}

#Slide_Menu .Navi_Menu {
    margin: 70px 0 0;
    width: 100%;
    max-width: 313px;
    padding: 0;
    height: 100%;
    transition: all .4s;
    /*visibility: hidden;
    opacity: 0;*/
    font-size: 18px;
}

#Slide_Menu .Navi_Menu li {
    text-align: left;
    margin: 0 0 37px;
    padding: 0 0 0 15px;
    letter-spacing: 1px;
    position: relative;
}

#Slide_Menu .Navi_Menu li:before {
    content: "";
    width: 1px;
    height: 20px;
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
}

#Slide_Menu ul li .helvetica {
    font-family: Helvetica, "Helvetica Neue", sans-serif;
    z-index: 1;
}

#Slide_Menu ul li a,
#Slide_Menu * {
    color: #000;
}

#Slide_Menu .Navi_Menu li li:before {
    display: none;
}

#Slide_Menu .Navi_Menu li li {
    padding: 0;
    margin: 0 0 22px;
}

.layer {
    display: none;
}

body.open .layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

/*-- sub --*/
.menu-accordion {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.menu-accordion .ac-content {
    margin: 0;
    padding: 0;
}

.menu-accordion input {
    display: none;
}

.menu-accordion label {
    display: block;
    cursor: pointer;
    padding: 0;
    color: #000;
    border: none;
}

.menu-accordion label:hover {
    text-decoration: underline;
}

.menu-accordion .ac-cont {
    transition: 0.4s;
    height: 0;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}

.menu-accordion input:checked+.ac-cont {
    height: auto;
    padding: 0;
    box-sizing: border-box;
    margin: 10% 0 0 0;
    position: relative;
}

.menu-accordion:after {
    content: "";
    position: absolute;
    top: 6px;
    left: 190px;
    width: 15.5px;
    height: 8.5px;
    background: url(../img/clearnel/ico-arw@2x.png) no-repeat 50% 50%;
    background-size: contain;
    transform: rotate(180deg);
}

.menu-accordion.on:after {
    transform: rotate(0);
}

/* SP
━━━━━━━━━━━━━━━━━━━―…‥・★・‥…―━━━━━━━━━━━━━━━━━━*/
@media screen and (min-width: 641px) {

    /* 641px start */
    .pan {
        width: 1150px;
    }

    .infoBox,
    .infoBox dd {
        width: 100%;
        font-size: 15px;
    }

    .infoBox dt {
        display: none;
    }

    .specDepthWrap .specDepthTitle {
        display: none;
        visibility: hidden;
        opacity: 0;
        width: 0px;
    }

    /* 641px end */
}

@media screen and (max-width: 640px) {
    /* 640px start */

    /*-- common --*/

    .clearnel .small {
        font-size: 12px;
    }

    .clearnel .mainItemSlider .scrollNav-wrap {
        height: calc(100% - 165px);
    }

    .clearnel .clearnelBox {
        padding: 18vw 0 0;
    }

    .clearnel .clearnelBox-inner {
        width: 100%;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        box-shadow: none;
    }

    .clearnel .clearnelBox-inner .InnerBox {
        width: 95%;
    }

    .clearnel .playBox-inner {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 56.25%;
        overflow: hidden;
    }

    .clearnel .playBox-inner video {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        min-height: unset;
    }

    .clearnel p {
        font-size: 15px;
    }

    .clearnel .catchCopy {
        font-size: 18px;
        margin: 0.7em 0 1.5em;
        line-height: 1.6;
    }

    .clearnel .boxList {
        padding: 0 6%;
    }

    .clearnel .boxList .FlexBox {
        display: block;
        min-height: unset;
        margin: 0 auto 18vw;
    }

    .clearnel .boxList .FlexBox figure {
        width: 100%;
        margin: 0.9em 0 0;
        position: relative;
    }

    .clearnel .boxList .FlexBox .Box {
        width: 100%;
        margin: 0.9em 0 0;
    }


    /*-- title --*/
    .clearnel .secTitle01 {
        font-size: 12px;
    }

    .clearnel .secTitle01 span {
        font-size: 32px;
    }

    .clearnel .secTitle02 {
        font-size: 18px;
        margin: 0 auto 1.3em;
        padding: .3em 0 .3em .6em;
        border-left: 2px solid #5F5F5F;
    }

    .clearnel .secTitle03 {
        font-size: 16px;
    }

    .clearnel .secTitle03:before {
        margin: 0 0.6em 0 0.9em;
        width: 14px;
    }

    /*-- slick --*/

    .clearnel .slick-dots li {
        margin: 0 8px;
    }

    .clearnel .slick-dots li,
    .clearnel .slick-dots li button {
        width: 30px;
        height: 4px;
    }

    .clearnel .slick-dots li button {
        border-radius: 4px;
    }

    .clearnel .slick-slide img {
        display: block;
        max-width: 100%;
        width: 100%;
        height: auto;

        min-height: inherit;
        min-width: inherit;
    }

    /*-- header --*/
    .nav-header {
        position: fixed;
        top: inherit;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #bbb;
        z-index: 10000;
        height: 12.5vw;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    }

    .nav-header:before {
        content: "PAGE MENU";
        display: block;
        width: 100%;
        text-align: center;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
        font-size: 20px;
        line-height: 2.4;
        letter-spacing: .5px;
    }

    .nav-toggle {
        top: inherit;
        bottom: 0;
    }

    .open .nav-toggle {
        top: 0;
        bottom: inherit;
    }

    #gloval-nav {
        position: fixed;
    }

    #Menu {
        width: 11vw;
        position: fixed;
        right: 3.5vw;
        bottom: 0.5vw;
    }

    #Slide_Menu {
        position: fixed;
        width: 100%;
        max-width: 100%;
        padding: 7% 6%;
        height: 92.5% !important;
        top: inherit !important;
        bottom: 0;
        box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    }

    #Slide_Menu .title {
        text-align: left;
        width: 61vw;
    }

    #Slide_Menu .FlexBox {
        display: block;
    }

    #Slide_Menu .FlexBox::after {
        content: "";
        display: block;
        clear: both;
    }

    #Slide_Menu .Navi_Menu {
        margin: 7% 0 0;
        width: 100%;
        max-width: 100%;
        padding: 0;
        height: 100%;
        transition: all .4s;
        font-size: 19px;
        clear: both;
    }

    #Slide_Menu .Navi_Menu li {
        text-align: left;
        margin: 0 0 9.5%;
        padding: 0 0 0 15px;
        letter-spacing: 1px;
        float: left;
        width: 50%;
    }

    #Slide_Menu .Navi_Menu li.sec05 {
        width: 100%;
        position: relative;
    }

    #Slide_Menu .Navi_Menu li li {
        padding: 0;
        float: left;
        width: 50%;
        margin: 0 0 7%;
        font-size: 16px;
    }

    #Slide_Menu .Link_Menu {
        max-width: 100%;
    }

    #Slide_Menu .Link_Menu li {
        padding: 0 10px 0 0;
        margin: 0 10px 15px 0;
        width: auto;
        float: left;
    }

    #Slide_Menu .Link_Menu li.menu02 {
        border-right: 1px solid #000;
    }

    #Slide_Menu .Link_Menu li.menu03 {
        padding: 0;
        margin: 0;
    }

    .close {
        width: 19.5px;
        height: 20.5px;
        top: 4.5%;
        right: 6%;
    }

    .layer {
        display: none;
    }

    body.open .layer {
        display: block;
        background: rgba(0, 0, 0, .6);
    }

    /*-- mainItemSlider --*/
    .clearnel .mainItemSlider .mainTitle .InnerBox {
        padding: 12vw 0 0 5vw;
        max-width: 100%;
        width: 61vw;
        height: 8vw;
        margin: 0;
    }

    .clearnel .mainItemSlider .scrollNav span {
        font-size: 12px;
    }

    .clearnel .mainItemSlider .scrollNav a {
        bottom: 86px;
    }

    .clearnel .mainItemSlider .scrollNav span:after {
        left: 55px;
        bottom: .7em;
        webkit-animation: sclnav1 1.5s infinite ease-in-out;
        animation: sclnav1 1.5s infinite ease-in-out;
    }

    @-webkit-keyframes sclnav1 {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(0);
            width: 65px;
        }
    }

    @keyframes sclnav1 {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(0);
            width: 65px;
        }
    }

    .clearnel .mainItemSlider .slick-dots {
        bottom: -8vw;
    }

    .clearnel .mainItemSlider {
        height: 118vw;
        max-height: 100vh;
    }

    .clearnel .mainItemSlider .slick-list,
    .clearnel .mainItemSlider .slick-track,
    .clearnel .mainItemSlider .slick-slide,
    .clearnel .mainItemSlider .slick-slider {
        height: 100%;
    }

    .clearnel .mainItemSlider .playBox {
        height: 100%;
        width: 100%;
        -ms-flex-line-pack: end;
        align-content: flex-end;
    }

    .clearnel .mainItemSlider .playBox-inner {
        padding-top: 76.25%;
    }

    /*
    .clearnel .mainItemSlider .playBox-inner{
        position: absolute;
        bottom: 0;
        left: 0;
    }
    */
    /*-- sec01 --*/

    .clearnel #sec01 .InnerBox {
        padding: 18.2vw 4% 14.5vw;
    }

    .clearnel #sec01 .read {
        line-height: 1.8;
        font-size: 15px;
    }

    .clearnel #sec01 .catchCopy {
        margin: .9em auto 1.2em;
        line-height: 1.6;
    }

    .clearnel #sec01 .read span {
        display: block;
    }

    .clearnel #sec01 .sound {
        right: 10px;
    }

    .clearnel #sec01 .youtubeBox {
        height: auto;
    }

    .clearnel #sec01 .youtubeBox-inner {
        position: relative;
        width: 100%;
        height: auto;
        padding-top: 56.25%;
    }

    .clearnel #sec01 .youtubeBox-inner iframe {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    /*-- sec02 --*/

    .clearnel #sec02 {
        padding: 18.5vw 0 1.5vw;
    }

    .clearnel #sec02 .secTitle01 {
        margin: 0 0 0 6.5%;
    }

    .clearnel #sec02 .boxList .FlexBox:nth-child(even) .Box,
    .clearnel #sec02 .boxList .FlexBox .Box {
        padding: 0;
    }

    .clearnel #sec02 .boxList .FlexBox .Box {
        margin: 0 auto;
    }

    .clearnel #sec02 .boxList .FlexBox figure {
        margin: .9em auto 1.8em;
    }

    .clearnel #sec02 .boxList .sec02-3 .Box figure.img {
        max-width: 245px;
        width: 74%;
        margin: 8% auto 0;
    }
    .clearnel #sec02 .good_design {
        max-width: 270px;
        flex-direction: column;
    }
    .clearnel #sec02 .good_design .text{
        width: 100%;
    }
    .clearnel #sec02 .good_design .img{
        width: 100%;
    }
    .clearnel #sec02 .good_design .text p{
        font-size: 12px;
    }

    /*-- sec03 --*/

    .clearnel #sec03 {
        padding: 19vw 0 15.5vw;
    }

    .clearnel #sec03 .InnerBox {
        padding: 0 4%;
    }

    .clearnel #sec03 .InnerBox .catchCopy {
        margin: 0.8em auto 1.8em;
    }

    .clearnel #sec03 .boxList .FlexBox .Box,
    .clearnel #sec03 .boxList .FlexBox:nth-child(odd) .Box {
        padding: 0;
    }

    .clearnel #sec03 .boxList .FlexBox .Box:after {
        display: none;
    }

    .clearnel #sec03 .boxList .FlexBox figure {
        position: relative;
        margin: 0 auto 32px;
    }

    .clearnel #sec03 .boxList .FlexBox figure:after {
        content: "";
        width: 30px;
        height: 6px;
        background: url(../img/clearnel/ico-dots.png) no-repeat 50% 50%;
        background-size: contain;
        position: absolute;
        bottom: -22px;
        right: 1px;
    }

    .clearnel #sec03 .boxList .FlexBox:after,
    .clearnel #sec03 .boxList .FlexBox:nth-child(odd):after {
        display: none;
    }

    .clearnel .secItemSlider .center {
        margin-top: 0;
        font-size: 12px;
    }

    /*-- sec04 --*/

    .clearnel #sec04 {
        padding: 18.5vw 0 4.5vw;
    }

    .clearnel #sec04 .InnerBox {
        width: 87%;
    }

    .clearnel .planItemSlider {
        margin: 14vw auto -8px;
        background: #cccbcb;
    }

    .clearnel .planItemSlider .slick-slide {
        margin: 0;
    }

    .clearnel .planItemSlider dl {
        padding: 25px;
        background: #cccbcb;
    }

    .clearnel .planItemSlider dl dt {
        font-size: 18px;
    }

    .clearnel .planItemSlider dl dd {
        margin: .6em auto .9em;
        font-size: 15px;
        line-height: 1.8;
    }

    .clearnel .planItemSlider .slick-dots {
        top: -11vw;
    }

    .clearnel .planItemSlider .slick-next,
    .clearnel .planItemSlider .slick-prev {
        height: 6vw;
        width: 6vw;
        margin-top: 0;
        top: 33.5vw;
    }

    .clearnel .planItemSlider .slick-next {
        right: 2vw;
    }

    .clearnel .planItemSlider .slick-prev {
        left: 2vw;
    }

    /*-- sec05 --*/
    .clearnel #sec05 {
        padding: 18vw 0 5vw;
    }

    .clearnel #sec05 .secTitle01 {
        margin: 0 0 0 4%;
    }

    .clearnel #sec05 .secItemSlider {
        margin: 19.5vw auto 8vw;
        max-width: 836px;
        height: auto;
    }

    .clearnel #sec05 .secItemSlider .center {
        top: -2.5em;
    }

    .clearnel #sec05 .secItemSlider .slick-next {
        right: 0;
    }

    .clearnel #sec05 .secItemSlider .slick-prev {
        left: 0;
    }

    .clearnel #sec05 .secItemSlider .slick-next,
    .clearnel #sec05 .secItemSlider .slick-prev {
        height: 5vw;
        width: 5vw;
        margin-top: 0;
        top: 32vw;

    }

    .clearnel #sec05 #sec05-01 {
        padding-top: 18vw;
        margin-top: -18vw;
    }

    .clearnel #sec05 .itemList section {
        width: 92%;
        padding-top: 20vw;
        margin-top: -20vw;
    }

    .clearnel .specTable,
    .clearnel .specTable thead,
    .clearnel .specTable tbody,
    .clearnel .specTable tr,
    .clearnel .specTable th,
    .clearnel .specTable td {
        display: block;
        width: 100%;
    }

    .clearnel .specTable {
        width: 92%;
        margin: 0 auto;
    }

    .clearnel .specTable thead {
        display: none;
    }

    .clearnel .specTable tr {
        clear: both;
    }

    .clearnel .specTable tbody th:before {
        bottom: 0;
        width: 100%;
    }

    .clearnel .specTable tbody th {
        padding: 5px 0 15px;
        width: 100%;
        margin: 0 auto;
    }

    .clearnel .specTable tbody td {
        width: 43%;
        float: left;
        padding: 0;
    }

    .clearnel .specTable .specDepthbtn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: end;
        align-content: flex-end;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .clearnel .specDepthBox dd .btn {
        font-size: 11px;
    }

    .clearnel .specTable .secItem__btn__item .btn {
        display: block;
        padding: 7px 10px 5px;
    }

    .clearnel .specTable .secItem__btn__item .btn svg {
        display: block;
        margin: 0 auto 5px;
    }

    .clearnel .specTable .secItem__btn__item .btn i {
        font-style: normal;
        display: block;
        width: 100%;
        text-align: center;
    }

    .clearnel .specTable .secItem__btn__item .btn i:after {
        display: none;
    }

    .clearnel #sec05-01 .specTableText {
        padding-top: 6%;
        border-top: 1px solid #ccc;
        width: 92%;
        margin: -20px auto 0;
        clear: both;
    }

    .clearnel #sec05-01 .specTableText span {
        margin: 0 0 1em 0;
        font-size: 14px;
        position: relative;
    }
    .clearnel #sec05 .pl_1px {
        padding-left: 1px;
    }

    .clearnel #sec05-01 .specTableText .pl_2em{
        padding-left: 40px;
    }
    .clearnel #sec05-01 .specTableText .pl_1em{
        padding-left: 10px;
        padding-right: 0;
        margin-bottom: 0;
    }
    .clearnel #sec05-01 .specTableText .pl_14px{
        padding-left: 10px;
        padding-right: 0;
        margin-bottom: 0;
    }

    .clearnel #sec05-01 .specTableText .pl_3em{
        padding-left: 40px;
    }

    .clearnel #sec05-01 .specTableText span.pc2 {
        display: none;
    }

    .clearnel .specTableText .attention {
        right: inherit;
        left: 15em;
    }

    .clearnel #sec05-01 .specTableText span span.bt {
        display: block;
        line-height: 1;
        margin: -14px 0 2px;
        text-align: center;
        width: 22px;
    }

    .clearnel #sec05-01 .specTableText .clr-wn_cb2 {
        margin-bottom: 25px;
        float: left;
    }

    .clearnel .specTable td.specDepthclr dl dd {
        position: relative;
    }

    .clearnel .specTable td.specDepthclr dl dd:before {
        content: "";
        width: 32px;
        height: 56px;
        display: inline-block;
        position: absolute;
        top: 2px;
        left: -43px;
    }

    .clearnel .specTable td.specDepthclr dl dd.pure_oak:before {
        background: url(../img/clearnel/ico-pure_oak.png) no-repeat 50% 50%;
        background-size: contain;
        vertical-align: middle;
    }
    .clearnel .specTable td.specDepthclr dl dd.pure_white:after {
        content: "";
        width: 32px;
        height: 56px;
        display: inline-block;
        position: absolute;
        top: 42px;
        left: -43px;
        background: url(../img/clearnel/ico-pure_pw.png) no-repeat 50% 50%;
        background-size: contain;
        vertical-align: middle;
    }
    .clearnel .specTable td.specDepthclr dl dd.wn_natural:before {
        background: url(../img/clearnel/ico-wn_natural.png) no-repeat 50% 50%;
        background-size: contain;
        vertical-align: middle;
    }

    /*
    .clearnel .specTable td.specDepthclr dl dd.wn_cb:before {
        background:url(../img/clearnel/ico-wn_cb3.png) no-repeat 50% 50%;
        background-size: contain;
        vertical-align: middle;
    }
    */
    .clearnel .specTable td.specDepthclr dl dd.wn_cb:before {
        background: url(../img/clearnel/ico-wn_cb.png) no-repeat 50% 50%;
        background-size: contain;
        vertical-align: middle;
        height: 94px;
        top: 9px;
    }



    .specDepthWrap {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;

        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

        -ms-flex-line-pack: end;
        align-content: flex-end;
    }

    .specDepthWrap .specDepthTitle {
        display: block;
        padding: 10px 0 10px;
        border-bottom: 1px solid #ccc;
        width: 92%;
        text-align: center;
    }

    .specDepthWrap .specDepthTitle span {
        display: block;
        font-size: 12px;
    }

    .clearnel .specTable tbody td {
        padding-bottom: 20px;
    }

    .clearnel .specTable tbody td.depth450 {
        padding-left: 44px;
        width: 57%;
    }

    .clearnel .specDepthBox {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: end;
        align-content: flex-end;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .clearnel .specDepthBox dt {
        display: none;
    }
    

    .clearnel .specDepthBox dd {
        position: relative;
        padding: 20px 0 0 0;
        margin-bottom: -20px;
        line-height: 1.7;
        font-size: 13px;
    }

    .clearnel .specDepthBox dd .price {
        padding-left: 0;
    }

    .clearnel .itemList {
        display: block;
    }

    .clearnel .itemList section {
        max-width: 438px;
        width: 95%;
        margin: 0 auto 12%;
    }

    .clearnel .itemList section:nth-child(2n) {
        margin-left: auto;
    }

    .clearnel .secItem__btn__item .btn {
        font-size: 11px;
    }

    .clearnel .itemTable,
    .clearnel .itemTable thead,
    .clearnel .itemTable tbody,
    .clearnel .itemTable tr,
    .clearnel .itemTable th,
    .clearnel #sec05-02 .itemTable th,
    .clearnel .itemTable td {
        display: block;
        width: 100%;
    }

    .clearnel .itemList section table caption {
        font-size: 15px;
        padding: 15px 0 0;
        width: 100%;
        display: block;
    }

    .clearnel #sec05-02 .itemTable th,
    .clearnel .itemTable th {
        display: none;
    }

    .clearnel .itemTable td {
        border-bottom: 0;
        padding: 0;
    }

    .clearnel .itemTable td .infoBox.border {
        margin: 5px auto 0;
    }

    .clearnel .itemTable td .infoBox.border dt {
        width: 32%;
        padding-right: 30px;
        border-right: 1px solid #ccc;
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0.5em;
    }

    .clearnel .itemTable td .infoBox.border dt .clr-pure_oak,
    .clearnel .itemTable td .infoBox.border dt .clr-wn_natural,
    .clearnel .itemTable td .infoBox.border dt .clr-pure_white,
    .clearnel .itemTable td .infoBox.border dt .clr-satin_gray,
    .clearnel .itemTable td .infoBox.border dt .clr-satin_po_sw,
    .clearnel .itemTable td .infoBox.border dt .clr-satin_white,
    .clearnel .itemTable td .infoBox.border dt .clr-mat_bk {
        margin: 0;
        position: relative;
        /*width: 32px;
        height: 32px;*/
    }

    .clearnel .itemTable td .infoBox.border dd {
        padding: 0 0 0 30px;
        font-size: 15px;
    }

    .clearnel .itemTable.clr td,
    .clearnel .itemTable.clr td.btn,
    .clearnel .itemTable td.btn {
        width: 100%;
    }

    .clearnel .itemList section table .btn {
        width: 100%;
    }

    .clearnel .itemTable .secItem__btn__item .btn {
        max-width: 237px;
        padding: 12px 10px;
    }

    .clearnel .itemTableText {
        margin-top: 15px;
        line-height: 1.7;
    }
    .clearnel .itemTableText .pl_3em{
        padding-left:2.8em;
    }
    .clearnel #sec05 .pl_5em{
        display: block;
        padding-left: 6.5em;
    }

    .clearnel #sec05 #spec01 {
        margin: 0 auto 15vw;
    }

    .clearnel #sec05 #spec02 {
        margin: 15vw auto 15vw;
    }
    .clearnel .display_sp{
        display: block;
    }
    .clearnel .display_pc{
        display: none;
    }


    /* 640 px*/
}

@media screen and (max-width: 320px) {
    /*320px*/

    #Slide_Menu .Link_Menu li {
        font-size: 16px;
    }

    .clearnel .specTable {
        width: 100%;
    }

    .clearnel .specTableText .attention {
        left: 15em;
        width: 100%;
    }

    .clearnel .planItemSlider dl dd {
        margin: 0.8em auto 1.2em;
        font-size: 13px;
    }

    .clearnel .small {
        font-size: 10px;
    }

    .clearnel .itemTableText {
        font-size: 13px;
        line-height: 1.9;
    }

    .clearnel .itemTable td .infoBox.border dt {
        padding-right: 15px;
    }

    .clearnel .itemTable td .infoBox.border dd {
        padding-left: 15px;
    }

    /* 320 px*/
}