@charset "utf-8";


.strong-text18 span {
    padding: 0 .5%;
}

/*-----------------------------------------------------------
コンセプト
-----------------------------------------------------------*/

.concept01 {
	gap: 40px;
}

.concept01-left:after {
    content: "";
    position: absolute;
    width: 84.23%;
    height: 59.21%;
    left: 0;
    bottom: 0;
    background: var(--base-body-color);
    z-index: -1;
}

.concept01-right:before,.concept01-right:after {
    content: "";
    position: absolute;
    width: 84.23%;
    height: 59.21%;
    left: 15px;
    bottom: 0;
    background: var(--border-primary);
    z-index: -1;
}

.concept01-right:before {
    width: 1px;
    height: 54.35%;
}

.concept01-right:after{
    width: 52.63%;
    height: 1px;
}

.concept01-title-box .title50 span {
    padding: 0;
}

.concept01-img-box {
    aspect-ratio: 111 / 100;
}

.concept02-row {
	gap: 50px;
}

.concept02-title-box {
    writing-mode: vertical-rl;
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    margin: 20px 0 0 0;
    height: 380px;
}

.concept02-title-box .title50 {
    letter-spacing: 0.15em;
}

.concept02-title-box .title50 span {
    padding: 0;
}

.concept02-left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    gap: 20px;
    margin: 7% 0 0;
}

.concept02-left:before,.concept02-left:after {
    content: "";
    position: absolute;
    width: 84.23%;
    height: 59.21%;
    right: 15px;
    top: 0;
    background: var(--border-primary);
    z-index: -1;
}

.concept02-left:before {
    width: 1px;
    height: 41.35%;
}

.concept02-left:after{
    width: 35.63%;
    height: 1px;
}

.concept02-right:after  {
    content: "";
    position: absolute;
    width: 83.33%;
    height: 85.71%;
    right: 0;
    top: 0;
    background: url(/system_panel/uploads/images/concept-bg01.jpg)no-repeat center / contain;
    z-index: -1;
}

.concept02-img-box {
    aspect-ratio: 5 / 6;
}

.concept03-row {
	gap: 40px;
}

.concept03-title-box .strong-title50 {
    margin: 20px 0 0;
}

.concept03-title-box .title50 span {
    padding: 0;
}

.concept03-img-box03 {
	top: 5%;
  	width: 10%;
  	z-index: -1;
}

.concept04-in {
	padding: 0 15px 40px;
}

.concept03-img-box01 {
    aspect-ratio: 760 / 400;
}

.concept03-img-box02 {
    aspect-ratio: 760 / 66;
}

.concept04 .shop-tr {
	max-width: 1000px;
  	margin: 20px auto 0 !important;
}

.concept04-deco {
    position: relative;
    width: 100%;
    min-height: 40px;
}

.concept04-deco img {
    justify-content: center;
    align-items: center;
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    width: 100%;
    margin: auto;
    object-fit: cover;
    object-position: top;
    z-index: 1;
    transition: all .5s;
}

/*-----------------------------------------------------------
ペアリング紹介
-----------------------------------------------------------*/

.pairing-intro-deco-box {
    max-width: 670px;
}

.pairing01 .pairing-title-box:after {
	content: "";
	position: absolute;
	bottom: 15px;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--primary);
	z-index: 1;
}

.pairing-title-box01 {
    writing-mode: vertical-rl;
    font-family: "Shippori Mincho", serif;
    font-weight: 600;
    height: 240px;
}

.pairing-title-box01 p {
	margin: 0;
}

.pairing-left01 {
	gap: 15px;
}

.pairing-row01 {
	gap: 20px;
}

.pairing-row01:after {
    content: none;
    position: absolute;
    aspect-ratio: 185 / 196;
    max-width: 185px;
    width: 20%;
    top: 10%;
    right: 5%;
    bottom: auto;
    left: auto;
    margin: auto;
    background: url(/system_panel/uploads/images/pairing-cross-deco01.svg)no-repeat center / contain;
    z-index: -1;
}

.pairing-row02:after {
    background: url(/system_panel/uploads/images/pairing-cross-deco02.svg)no-repeat center / contain !important;
}

.pairing-row03:after {
    background: url(/system_panel/uploads/images/pairing-cross-deco03.svg)no-repeat center / contain !important;
}

.pairing02 {
	display: block;
    -webkit-clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%);
    clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 97%);
}

.pairing-row02 {
	flex-direction: column-reverse !important;
}

.pairing02 .pairing-title-box:after {
	content: "";
	position: absolute;
	bottom: 15px;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--base-body-color);
	z-index: 1;
}

.pairing-title-box04 .title90 {
	font-weight: 400;
}

.pairing-img-box01 {
  	aspect-ratio: 500 / 600;
}

.pairing-img-box02 {
    width: 70%;
  	aspect-ratio: 650 / 400;
}

.pairing-img-box03 {
  	aspect-ratio: 660 / 450;
}

.pairing-img-box04 {
  	aspect-ratio: 500 / 600;
}

.pairing-img-box05 {
  	aspect-ratio: 400 / 550;
}

.pairing-img-box06 {
    width: 75%;
  	aspect-ratio: 500 / 338;
}

.sp-cross-img {
    max-width: 200px;
    width: 30%;
    margin: 0 auto;
    aspect-ratio: 185 / 196;
}

/*-----------------------------------------------------------
ご利用シーン
-----------------------------------------------------------*/

.scene01 .title50 span {
    padding: 0;
}

.scene-text-area{
    padding: 40px 2% 62px;
}

.scene-title-box .title40 {
	font-weight: 400;
}

.scene-title {
	font-weight: 700;
}

.scene-title br {
	display: none;
}

.scene-deco01 {
    position: relative;
    width: 100%;
    min-height: 24px;
}

.scene-deco01 img {
    justify-content: center;
    align-items: center;
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    max-height: 100%;
    height: 100%;
    max-width: 100%;
    width: 100%;
    margin: auto;
    object-fit: cover;
    object-position: top;
    z-index: 1;
}


/*-----------------------------------------------------------
声
-----------------------------------------------------------*/

.voice-intro-row {
    gap: 20px;
}

.in-voice-loop:after {
	content: "";
	position: absolute;
	top: 0;
  	right: 0;
	bottom: 0;
	left: 0;
  	margin: auto;
	width: 100%;
	height: 95%;
	background: var(--quaternary);
	z-index: -1;
}

.voice-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
}

.voice-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    gap: 40px;
}

.voice-left {
    padding: 9.4% 5%;
}

.voice-left::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-style: solid;
    border-width: 0 7.5px 15px 7.5px;
    border-color: transparent transparent #e2daca;
    translate: -50% -100%;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:576px) {
  
/*-----------------------------------------------------------
コンセプト
-----------------------------------------------------------*/
  
    .concept02-left {
        align-items: flex-start;
        flex-direction: row;
    }

    .concept02-title-box {
        height: 500px;
    }
  
    .concept02-text-box {
        padding: 40px 40px 0 0 !important;
    }

    .concept04 .shop-th {
        width: 232px;
        text-align: center;
    }
 
    .concept04 .shop-td {
        padding: 0 0 0 4.2%;
    }
  
  
/*-----------------------------------------------------------
ペアリング紹介
-----------------------------------------------------------*/
  
    .pairing-title-box01 {
        height: 280px;
    }
  
  
/*-----------------------------------------------------------
ご利用シーン
-----------------------------------------------------------*/

    .scene-text-area{
        padding: 40px 3.5% 62px;
    }

    .scene-title br {
        display: none;
    }
  
  
/*-----------------------------------------------------------
声
-----------------------------------------------------------*/
  
    .voice-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 50px;
    }
  
}

/* min-width: 576px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:768px) {

    .pairing-row01 {
        gap: 50px;
    }
  
    .pairing-row01.pairing-row02 {
        max-width: 1420px;
        width: 95%;
        margin: 80px 0 0 auto;
    }
  
    .pairing-row01:after {
     	content: "";
        width: 15%;
        top: 0;
        right: auto;
        bottom: 0;
        left: 40%;
        margin: auto;
    }
  
    .pairing02 {
        -webkit-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
        clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
    }
  
    .pairing-row02 {
        flex-direction: row !important;
    }
  
     .pairing-row02:after {
        width: 15%;
        top: 0;
        right: 40%;
        bottom: 0;
        left: auto;
        margin: auto;
    }
  
    .pairing-row03:after {
        width: 15%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
  
    .pairing-title-box01 {
        height: 340px;
    }
  
    .pairing-img-box02 {
        width: 85.53%;
    }

    .pairing-img-box06 {
        width: 85%;
    }
  
/*-----------------------------------------------------------
ご利用シーン
-----------------------------------------------------------*/
  
    .scene-img-box img {
        justify-content: center;
        align-items: center;
        position: absolute;
        display: flex;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        max-height: 100%;
        height: 100%;
        max-width: 100%;
        width: 100%;
        margin: auto;
        object-fit: cover;
        object-position: top;
    }
  
    .scene-title br {
        display: block;
    }
  
}

/* min-width: 768px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1024px) {
  
/*-----------------------------------------------------------
コンセプト
-----------------------------------------------------------*/
  
    .concept01-right:before,.concept01-right:after {
        left: 0px;
    }

    .concept02-left:before,.concept02-left:after {
        right: 0px;
    }
  
/*-----------------------------------------------------------
ペアリング紹介
-----------------------------------------------------------*/
  
    .pairing-title-box01 {
        height: 380px;
    }
  
    .pairing-row01:after,.pairing-row02:after,.pairing-row03:after {
        width: 30%;
    }
  
    .pairing-left03 {
        max-width: 620px !important;
        justify-content: flex-end !important;
		margin: 0 0 0 auto;
    }
  
/*-----------------------------------------------------------
お客様の声
-----------------------------------------------------------*/
  
    .voice-row {
        flex-direction: row;
    }
  
    .voice-left::after {
      	top: auto;
        bottom: 10%;
        right: 0;
      	left: auto;
        border-style: solid;
        border-width: 7.5px 0 7.5px 15px;
        border-color: transparent transparent transparent #e2daca;
        translate: 100% -50%;
    }
  
}
/* min-width: 1024px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1150px) {
  
    .concept04-in {
        padding: 0 15px 70px;
    }
}
/* min-width: 1150px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1200px) {
  
/*-----------------------------------------------------------
コンセプト
-----------------------------------------------------------*/

    .concept01-left {
        width: 54% !important;
    }
  
    .concept01-right {
        width: 44.71% !important;
    }
  
    .concept01-pl {
  		padding: 0 0 0 60px !important;
 	}
  
    .concept01-text-box {
      	margin: 75px 0 0 !important;
  		padding: 0 0 60px 60px !important;
    }

    .concept02-title-box {
        height: 550px;
    }
  
    .concept02-right {
  		padding: 100px 0 0 0 !important;
    }

	.concept03-row {
  		padding: 0 6.7% 0 0;
    }
  
	.concept03-text-box {
  		margin: 60px 0 0 0 !important;
 	}

    .concept04-deco {
        min-height: 48px;
    }
  
/*-----------------------------------------------------------
ペアリング紹介
-----------------------------------------------------------*/
  
    .pairing-title-box {
		padding: 100px 0 0 !important;
    }
  
    .pairing-title-box01 {
        height: 530px;
    }
  
    .pairing02 {
        -webkit-clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
        clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
    }  
 
    .pairing-row03 {
		padding: 0 0 130px !important;
    }
  
  
/*-----------------------------------------------------------
ご利用シーン
-----------------------------------------------------------*/
  
     .scene-text-area{
        padding: 40px 5% 62px 5%;
    }
  
    .scene-title br {
        display: none;
    }
  
/*-----------------------------------------------------------
声
-----------------------------------------------------------*/
  
    .voice-intro-row {
        gap: 60px;
    }
  
}
/* min-width: 1200px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1450px) {
  
    .concept02-title-box {
        height: 660px;
    }

    .concept03-img-box03 {
        top: 21%;
        width: 20%;
    }
  
}
/* min-width: 1450px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1600px) {
  
/*-----------------------------------------------------------
ご利用シーン
-----------------------------------------------------------*/
  
     .scene-text-area{
        padding: 40px 2% 62px 10.5%;
    }

}
/* min-width: 1600px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */