@charset "UTF-8";
.design-interior-ex-sp,
.design-detail-ttl_sp{
display: none;
}
.design-main-box{
display: flex;
justify-content: space-between;
max-width: 1120px;
margin: 0 0 6%;
}
.design-main-img{
width: 34%;
padding: 1% 0 0;
}
.design-main-cont{
width: 62%;
}
.design-main-cont h2,
.design-cos-ttl{
font-size: 28px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
color: #145055;
margin: 0 0 2%;
}
.design-main-cont p{
font-size: 19px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 2.3;
}
.design-train-box{
max-width: 1120px;
}
.design-marks-wrap{
padding: 0 4% 100px;
}
.design-marks-inner{
max-width: 1260px;
margin: 0 auto;
}
.design-marks-box{
display: flex;
justify-content: space-between;
}
.design-marks-left{
width: 40%;
}
.design-marks-right{
width: 57%;
}
.design-marks-left .design-marks-img{
text-align: center;
}
.design-marks-right .design-marks-img{
padding: 2.3% 0 0;
}
.design-marks-img{
margin: 0 0 20px;
}
p.design-marks-text{
font-size: 17px;
font-weight: 400;
min-height: 90px;
}
.design-marks-img01{
width: 37%;
}
.design-marks-img02{
width: 83.5%;
}
.design-marks-ex01{
width: 71%;
}
.design-marks-ex02{
width: 100%;
}
.design-2nd-wrap{
background: #fff;
margin: 0 auto;
padding: 100px 3%;
overflow: hidden;
}
.design-2nd-inner{
max-width: 1312px;
margin: 0 auto;
}
.design-interior-main{
display: flex;
margin: 0 0 8%;
}
.design-interior-main-ttl{
width: 224px;
flex-shrink: 0;
font-size: 28px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
color: #145055;
margin: 0 0 2%;
}
.design-interior-main-cont{
font-size: 19px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 2.3;
}
.design-interior-odd{
position: relative;
margin: 0 0 6%;
padding: 50px 0 60px;
}
.design-interior-even{
position: relative;
margin: 0 0 6%;
padding: 50px 0 60px;
}
.design-interior-odd-bg{
position: absolute;
height: 100%;
width: 3000px;
top: 0;
left: 4%;
background: #eaeae0;
z-index: 0;
}
.design-interior-even-bg{
position: absolute;
height: 100%;
width: 3000px;
top: 0;
right: 4%;
background: #f6f6f2;
z-index: 0;
}
.design-interior-odd-bg::before{
position: absolute;
content: '';
height: 24px;
width: 24px;
top: 0;
left: 0;
background: url("../images/design-interior-ex-bg-corner.svg") no-repeat;
background-size: 100%;
}
.design-interior-odd-bg::after{
position: absolute;
content: '';
height: 24px;
width: 24px;
left: 0;
bottom: 0;
background: url("../images/design-interior-ex-bg-corner.svg") no-repeat;
background-size: 100%;
transform: rotate(-90deg);
}
.design-interior-even-bg::before{
position: absolute;
content: '';
height: 24px;
width: 24px;
top: 0;
right: 0;
background: url("../images/design-interior-ex-bg-corner.svg") no-repeat;
background-size: 100%;
transform: rotate(90deg);
}
.design-interior-even-bg::after{
position: absolute;
content: '';
height: 24px;
width: 24px;
right: 0;
bottom: 0;
background: url("../images/design-interior-ex-bg-corner.svg") no-repeat;
background-size: 100%;
transform: rotate(-180deg);
}
.design-interior-ex-ttl-box{
display: flex;
margin: 0 0 4%;
position: relative;
z-index: 1;
left: -30px;
}
.design-interior-even .design-interior-ex-ttl-box{
right: -30px;
left: auto;
}
.design-interior-even .design-interior-ex-ttl-box{
flex-direction: row-reverse;
}
.design-interior-ex-ttl{
color: #fff;
font-size: 32px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
padding: 4px 18px;
background: #be914b;
display: flex;
align-items: center;
}
.design-interior-ex-ttl span{
font-size: 18px;
padding: 0 0 0 18px;
position: relative;
}
.design-interior-even .design-interior-ex-ttl-sub{
text-align: right;
}
.design-interior-ex-ttl-sub{
font-size: 16px;
font-weight: 400;
display: flex;
align-items: center;
padding: 0 22px;
}
.design-interior-cont-box{
display: flex;
justify-content: space-between;
padding: 0 2% 0 8%;
position: relative;
z-index: 1;
}
.design-interior-even .design-interior-cont-box{
padding: 0 8% 0 2%;
flex-direction: row-reverse;
}
.design-interior-img{
width: 54%;
margin: 0 4% 0 0;
}
.design-interior-even .design-interior-img{
margin: 0 0 0 4%;
}
.design-interior-detail-ttl{
width: 2.2%;
margin: 0 2% 0 0;
}
.design-interior-detail{
width: 41%;
position: relative;
padding: 0 4%;
}
.design-interior-odd .design-interior-detail{
width: 41%;
padding: 0 0 0 4%;
}
.design-interior-even .design-interior-detail{
left: 2%;
padding: 0 0 0 4%;
}
.design-interior-even .design-interior-detail.std{
left: 5%;
}
img.design-interior-detail-ttl{
width: 26px;
position: absolute;
top: 0;
left: 0;
}
.design-interior-detail.std{
padding: 0 6%;
}
.design-interior-detail-box-ttl{
font-size: 21px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
color: #145055;
padding: 14px 0 6px;
line-height: 1.6;
}
.design-interior-detail p,
.detail-slide-once p{
font-size: 15px;
font-weight: 400;
}
.design-common-wrap{
padding: 2% 0 0;
}
.design-common-sec{
max-width: 800px;
margin: 0 auto;
}
.design-common-ttl-box{
width: 412px;
background: url(../images/design-common-ttl-bg.svg) no-repeat center center;
background-size: 100% auto;
font-family: "Zen Old Mincho", serif;
font-weight: 500;
font-size: 28px;
color: #be914b;
vertical-align: middle;
letter-spacing: 0.15em;
margin: 0 auto 2%;
text-align: center;
}
.design-common-box{
display: flex;
justify-content: space-between;
}
.design-common-once{
width: 46%;
}
.design-common-once img{
margin: 0 0 10px;
}
.design-std-ttl{
font-size: 22px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
color: #145055;
margin: 0 0 6px;
}
.design-std-text{
font-size: 16px;
font-weight: 400;
}
.design-3rd-wrap{
background: #eaeae0;
padding: 70px 4% 170px;
}
.design-3rd-wrap-inner{
max-width: 1260px;
margin: 0 auto;
}
.design-cos-box{
display: flex;
margin: 0 0 7%;
}
.design-cos-img{
width: 529px;
padding: 0 4% 0 0;
flex-shrink: 0;
}
.design-cos-cont p{
font-size: 19px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 2.3;
margin: 0 0 3%;
}
.design-cos-cont-ttl{
margin: 0 0 3%;
}
.design-cos-cont-ttl p{
display: inline-block;
background: #fff;
color: #145055;
font-size: 24px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
margin: 0 0 12px;
padding: 0 12px 0;
line-height: 1.4;
letter-spacing: 0.12em;
}
.design-cos-cont-ttl span{
font-size: 14px;
font-weight: 400;
}
.design-produce-box{
display: flex;
}
.design-produce-img{
width: 210px;
flex-shrink: 0;
}
.design-produce-cont{
max-width: 870px;
padding: 0 0 0 44px;
}
.design-produce-tag{
font-size: 24px;
color: #be914b;
font-family: "Cinzel", serif;
font-weight: 400;
line-height: 1.4;
}
.design-produce-name{
font-size: 40px;
font-family: "Zen Old Mincho", serif;
font-weight: 400;
line-height: 1.5;
margin: 0 0 2.5%;
letter-spacing: 0.08em;
}
.design-produce-name span{
font-size: 28px;
padding: 0 14px 0 0;
position: relative;
top: -2px;
}
.design-produce-cont p{
font-size: 16px;
font-weight: 400;
}
.slide-wrap{
margin: 0 auto;
}
.slick-slide{
}
.detail-slide-once{}

.detail-slide-once p{
margin: 0 0 12px;
}
.detail-slide-once-cont{
opacity: 0;
transition:opacity 0.5s;
}
.slick-current .detail-slide-once-cont{
opacity: 1;
transition:opacity 1.4s;
}
.detail-slide-once img{
opacity: 0.7;
transition:opacity 0.5s;
}
.slick-current.detail-slide-once img{
opacity: 1;
transition:opacity 1.4s;
}
.detail-slide-tag01{
background: #be914b;
color: #fff;
display: inline-block;
margin: 0 8px 4px 0;
font-size: 14px;
font-weight: 400;
padding: 0 6px;
line-height: 1.8;
}
.detail-slide-tag02{
color: #be914b;
display: inline-block;
font-size: 14px;
font-weight: 400;
margin: 0 8px 4px 0;
line-height: 1.8;
}

.design-cos-cont span{
font-size: 14px;
font-weight: 400;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media only screen and (max-width : 1420px) {
.design-interior-ex-ttl {
font-size: 26px;
padding: 4px 18px;
flex-shrink: 0;
}
.design-interior-ex-ttl span {
font-size: 16px;
padding: 0 0 0 14px;
position: relative;
}
.design-interior-ex-ttl-box {
margin: 0 0 4%;
z-index: 1;
left: 0;
}
.design-interior-even .design-interior-ex-ttl-box {
right: 0;
left: auto;
}
.design-interior-odd-bg {
left: 2%;
}
.design-interior-even-bg {
right: 2%;
}
.design-interior-detail-box-ttl,
.design-std-ttl{
font-size: 19px;
padding: 14px 0 6px;
}
img.design-interior-detail-ttl {
width: 22px;
position: absolute;
top: 0;
left: 0;
}
.design-interior-cont-box {
padding: 0 2% 0 6%;
}
.design-interior-even .design-interior-cont-box {
padding: 0 6% 0 2%;
}
.design-common-sec {
max-width: 700px;
margin: 0 auto;
}
p.design-marks-text {
font-size: 14px;
font-weight: 400;
min-height: 76px;
}

}

@media only screen and (max-width : 1200px) {
.design-main-cont h2, .design-cos-ttl {
font-size: 22px;
margin: 0 0 2%;
}
.design-main-cont p,
.design-interior-main-cont,
.design-cos-cont p{
font-size: 16px;
line-height: 2.3;
}
.design-cos-cont-ttl p {
font-size: 20px;
margin: 0 0 8px;
padding: 0 10px 0;
line-height: 1.6;
}
.design-cos-cont-ttl h2 {
line-height: 1;
}
.design-main-img {
padding:  0 0;
}
.design-interior-main-ttl {
width: 180px;
font-size: 22px;
margin: 0 0 2%;
}
img.design-interior-detail-ttl {
width: 17px;
}
.design-produce-tag {
font-size: 20px;
}
.design-produce-name {
font-size: 32px;
line-height: 1.5;
margin: 0 0 2.5%;
letter-spacing: 0.08em;
}
.design-produce-name span {
font-size: 24px;
padding: 0 14px 0 0;
top: -2px;
}
.design-produce-cont p {
font-size: 14px;
}
.design-cos-img {
width: 42%;
padding: 0 4% 0 0;
flex-shrink: 0;
}
.design-2nd-wrap {
background: #fff;
margin: 0 auto;
padding: 60px 3%;
overflow: hidden;
}
.design-interior-main {
display: flex;
margin: 0 0 5%;
}
p.design-marks-text {
font-size: 14px;
font-weight: 400;
min-height: 90px;
}
}
@media only screen and (max-width : 1000px) {
.design-interior-ex-ttl-sub {
display: none;
}
.design-interior-cont-box,
.design-interior-even .design-interior-cont-box{
display: block;
padding: 0;
position: relative;
z-index: 1;
max-width: 600px;
margin: 0 auto;
}
.design-interior-img,
.design-interior-even .design-interior-img{
width: 100%;
margin: 0 0 0;
}
.design-interior-odd .design-interior-detail,
.design-interior-even .design-interior-detail,
.design-interior-even .design-interior-detail.std{
width: 100%;
padding: 0 0 0 8%;
left: 0;
}
.design-interior-ex-ttl {
font-size: 22px;
padding: 4px 14px;
flex-shrink: 0;
}
img.design-interior-detail-ttl {
width: 20px;
}
.design-common-ttl-box {
width: 340px;
font-size: 22px;
color: #be914b;
vertical-align: middle;
letter-spacing: 0.15em;
margin: 0 auto 2%;
text-align: center;
}
.design-interior-ex-sp{
font-size: 16px;
font-weight: 400;
padding: 3% 0 8%;
display: block;
}
.design-marks-box {
display: block;
max-width: 700px;
margin: 0 auto;
padding: 0 0 0 120px;
}
.design-marks-left,
.design-marks-right{
width: 100%;
}
.design-marks-left{
margin: 0 0 6%;
}
p.design-marks-text {
font-size: 14px;
font-weight: 400;
min-height: auto;
margin: 0 0 18px;
}
.design-marks-img02 {
width: 100%;
}
.design-marks-img01 {
width: 32%;
}
.design-marks-ex01 {
width: 50%;
}

}



@media only screen and (max-width : 768px) {
.design-main-box {
display: block;
margin: 0 0 6%;
}
.design-main-cont {
width: 100%;
}
.design-main-img_sp{
width: 100%;
padding: 2% 0 5%;
display: block!important;
}
.add-upper{
margin: 0 0 5%;
}
.design-interior-main {
display: block;
margin: 0 0 5%;
padding: 0 1.5%;
}
.design-interior-main-ttl {
width: 100%;
font-size: 4.4vw;
margin: 0 0 3%;
}
.design-3rd-wrap {
padding: 50px 4% 70px;
}
.design-main-cont h2, .design-cos-ttl {
font-size: 4.4vw;
margin: 0 0 2%;
}
.design-cos-box {
display: block;
max-width: 600px;
margin: 0 auto 10%;
}
.design-cos-img {
width: 100%;
padding: 5% 0 8% 0;
flex-shrink: 0;
}
.design-main-cont p, .design-interior-main-cont, .design-cos-cont p {
font-size: 3.4vw;
line-height: 2.3;
}
.design-cos-cont-ttl p{
font-size: 4vw;
margin: 0 0 1vw;
line-height: 1.6;
}
.design-cos-cont span{
font-size: 3vw;
}
.design-produce-img {
width: 31%;
flex-shrink: 0;
}
.design-produce-cont {
width: 65%;
max-width:65%;
padding: 0 0 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.design-produce-box {
display: flex;
justify-content: space-between;
margin: 0 0 4%;
}
.design-produce-tag {
font-size: 3.5vw;
margin: 0 0 3%;
}
.design-produce-name {
font-size: 4.6vw;
}
.design-produce-name span {
font-size: 3.8vw;
padding: 0 0;
top: 0;
display: block;
}
.design-produce-prof{
font-size: 3.2vw;
font-weight: 400;
display: block;
}
.design-interior-detail-ttl{
display: none;
}
.design-interior-odd .design-interior-detail,
.design-interior-even .design-interior-detail,
.design-interior-even .design-interior-detail.std {
width: 100%;
padding: 0 0 0;
left: 0;
}
.design-interior-odd-bg::before,
.design-interior-odd-bg::after,
.design-interior-even-bg::before,
.design-interior-even-bg::after{
height: 14px;
width: 14px;
}
.design-interior-even,
.design-interior-odd{
margin: 0 0 6%;
padding: 34px 0 34px;
}
.design-interior-ex-ttl {
font-size: 4vw;
padding: 4px 2vw;
flex-shrink: 0;
}
.design-interior-ex-ttl span {
font-size: 2.8vw;
padding: 0 0 0 2vw;
position: relative;
}
.design-interior-odd .design-interior-cont-box {
left: 2%;
padding: 0 5%;
}
.design-interior-even .design-interior-cont-box {
left: -2%;
padding: 0 5%;
}
.design-interior-ex-sp {
font-size: 3.3vw;
padding: 3% 0 8%;
}
.design-interior-detail-box-ttl, .design-std-ttl {
font-size: 3.8vw;
margin: 0 0;
padding: 14px 0 6px;
}
.design-interior-detail p,
.detail-slide-once p,
.design-std-text{
font-size: 3.3vw;
font-weight: 400;
}
.detail-slide-tag01 {
margin: 0 8px 4px 0;
font-size: 3.1vw;
padding: 0 6px;
}
.detail-slide-tag02 {
margin: 0 8px 4px 0;
font-size: 3.1vw;
padding: 0 6px;
}
.design-common-ttl-box {
width: 280px;
font-size: 18px;
color: #be914b;
vertical-align: middle;
letter-spacing: 0.15em;
margin: 0 auto 4%;
text-align: center;
}
.design-common-box {
display: block;
margin: 0 auto;
width: 78%;
}
.design-common-once {
width: 100%;
}
.design-common-once:nth-child(1) {
width: 100%;
margin: 0 0 14%;
}
.design-common-once img {
margin: 0 0;
}
.design-interior-detail.std,
.design-interior-even .design-interior-detail.std{
padding: 0 36px;
}
.design-marks-box {
max-width: 100%;
margin: 0 auto;
padding: 0 0 0;
}
p.design-marks-text {
font-size: 3.4vw;
margin: 0 0 24px;
}
.design-marks-ex01 {
width: 85%;
}
.design-marks-ex02 {
width: 96%;
}
.design-marks-wrap {
padding: 0 4% 60px;
}
.design-detail-ttl_sp{
display: block;
width: 26vw;
margin: 0 0 2.5vw;
}
}