@charset "UTF-8";

/* ========================================
  @media screen and (min-width: 768px),print
======================================== */
@media screen and (min-width: 768px),print {
#design .p-link__items {
	display: flex;
	flex-wrap: wrap;
	gap: 46px 40px;
	justify-content: center;
	margin-inline: auto;
	width: min(95%, 1100px);
	margin-block: 100px 0;
}

#design .p-link__item {
	width: 340px;
}

#design main {
	background: #F5F5F5;
}

.p-fv {
	margin-bottom: 59px;
	position: relative;
	top: -78px;
}

.p-fv .l-inner.l-fv {
	margin-inline: auto;
	width: min(95%, 1500px);
}

.p-fv .p-fv__contents {
	background: url(../images/design/fv_bg.jpg) no-repeat top center/cover;
	margin-inline: auto;
	padding-block: 190px 132px;
	width: 100%;
}

.p-fv .p-fv__contents-txt {
	color: #ffffff;
	margin-inline: auto;
	width: min(95%, 1283px);
}

.p-fv .p-fv__contents-txt h2 {
	font-size: 42px;
	font-size: clamp(2.25rem, 2rem + 0.52vw, 2.625rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.4285714286;
	margin-bottom: 34px;
}

.p-fv .p-fv__contents-txt p {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 2;
}

.p-garage {
	background: #ffffff;
}

.p-garage .l-inner.l-garage {
	padding-block: 108px 102px;
}

.p-garage .p-garage__en {
	margin-bottom: 37px;
	text-align: center;
}

.p-garage .p-garage__ttl {
	font-size: 38px;
  font-size: clamp(2.125rem, 1.958rem + 0.35vw, 2.375rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.2105263158;
	margin-bottom: 21px;
	text-align: center;
}

.p-garage .p-garage__txt {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5555555556;
	margin-bottom: 72px;
	text-align: center;
}

.p-garage .p-garage__img {
	text-align: center;
}

.p-point.point01 {
}

.p-point.point02 {
}

.p-point.point03 {
	margin-bottom: 120px;
}

.p-point .l-inner.l-point {
	background: #ffffff;
	margin-inline: auto;
	width: min(98%, 1600px);
	padding-block: 0 214px;
}

.p-point .l-inner.l-point.point03 {
  padding-block: 0;
}  

.p-point .p-point__contents {
	display: grid;
	gap: 0 100px;
	grid-template-columns: 58.5% 34.6%;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 64px;
	margin-right: auto;
	width: min(95%, 1470px);
	align-items: center;
}

.p-point .p-point__contents.reverse {
	display: grid;
	gap: 0 129px;
	grid-template-columns: 33.6% 59.5%;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 63px;
	margin-left: auto;
	width: min(95%, 1511px);
}

.p-point .p-point__contents.reverse .p-point__contents-left {
	order: 2;
}

.p-point .p-point__contents.reverse .p-point__contents-right {
	order: 1;
}

.p-point .p-point__contents-left {
  position: relative;
  top: -16px;
}

.p-point .p-point__contents-right .point {
	margin-bottom: 48px;
}

.p-point .p-point__contents-right h2 {
	font-size: 23px;
  font-size: clamp(1.25rem, 1.125rem + 0.26vw, 1.438rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.6;
	margin-bottom: 34px;
}

.p-point .p-point__contents-right .txt p {
	font-size: 16px;
  font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.75;
	margin-bottom: 29px;
}

.p-point .p-point__contents-right .txt p.bottom {
	margin-bottom: 0;
}

.p-point .p-point__bottom-contents p {
	background: #F5F5F5;
	font-size: 18px;
  font-size: clamp(1rem, 0.917rem + 0.17vw, 1.125rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.8888888889;
	margin-bottom: -123px;
	margin-inline: auto;
	padding-block: 57px 180px;
	text-align: center;
	width: min(95%, 1100px);
}

.p-point .p-point__bottom-contents .img {
	text-align: center;
}

.p-point .p-point03__bottom-box {
	background: #F5F5F5;
	margin-bottom: -192px;
	margin-inline: auto;
	width: min(95%, 1100px);
	padding-block: 0 20px;
}

.p-point .p-point03__bottom-contents {
	display: grid;
	gap: 0 55px;
	grid-template-columns: 40.2% 43.8%;
	justify-content: flex-end;
	margin-inline: auto;
	position: relative;
	right: -75px;
	width: min(95%, 1050px);
	top: -31px;
	align-items: center;
}

.p-point .p-point03__bottom-contents-left {
  position: relative;
  top: 30px;
}

.p-point .p-point03__bottom-contents-left h3 {
	font-size: 18px;
  font-size: clamp(1rem, 0.917rem + 0.17vw, 1.125rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.8888888889;
	margin-bottom: 14px;
}

.p-point .p-point03__bottom-contents-left p {
	font-size: 16px;
  font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.75;
}

.p-point .p-point03__img {
	left: 1px;
	margin-inline: auto;
	position: relative;
	width: min(95%, 1100px);
	bottom: -16px;
	left: 60px;
}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1650px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1650px) {
.p-point .p-point__contents {
	display: grid;
	gap: 0 6.061vw;
	grid-template-columns: 56.5% 34.6%;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 3.879vw;
	margin-right: auto;
	width: min(98%, 1470px);
	align-items: center;
}

.p-point .p-point__contents.point03 {
  margin-bottom: 6vw;
}

.p-point .p-point__contents-left {
  position: relative;
  top: -0.97vw;
}

.p-point .p-point__contents-left img {
  width: 100%;
  height: auto;        
}

.p-point .p-point__contents.reverse .p-point__contents-left img {
  width: 100%;
  height: auto;        
}

.p-point .p-point__contents.reverse {
	display: grid;
	gap: 0 7.818vw;
	grid-template-columns: 34.6% 56.5%;
	margin: 0 calc(50% - 50vw);
	margin-bottom: 3.818vw;
	margin-left: auto;
	width: min(98%, 1511px);
}

.p-garage .p-garage__img img {
  width: 100%;
  height: auto;        
}
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1500px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1500px) {
.p-point .p-point03__bottom-box {
	background: #F5F5F5;
	margin-bottom: -12.8vw;
	margin-inline: auto;
	width: min(95%, 1100px);
	padding-block: 0 1.333vw;
}

.p-point .p-point03__bottom-contents {
	display: grid;
	gap: 0 3.667vw;
	grid-template-columns: 45.2% 43.8%;
	justify-content: flex-end;
	margin-inline: auto;
	position: relative;
	right: -5vw;
	width: min(95%, 1050px);
	top: -2.067vw;
	align-items: center;
}

.p-point .p-point03__bottom-contents-left {
  position: relative;
  top: 2vw;
}

.p-point .p-point03__bottom-contents-right img {
  width: 100%;
  height: auto;        
}
.p-point .p-point03__img{left: 4.62vw;
        margin-inline: auto;
        position: relative;
        width: 15vw;
        bottom: -1.23vw;
        left: -38vw;}
.p-point .p-point03__img img{ width: 100%;}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1450px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1450px) {
.p-point .p-point__contents.point01 {
  align-items: flex-start;
}

.p-point .l-inner.l-point.point01 {
  padding-block: 40px 214px; 
}

.p-point .p-point__contents.point01 .p-point__contents-left {
  top: -5vw;
}
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1300px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1300px) {
.p-point .p-point__bottom-contents .img img {
  width: 100%;
  height: auto;        
}
}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1200px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1200px) {
#design .p-link__items {
	display: flex;
	flex-wrap: wrap;
	gap: 3.833vw 3.333vw;
	justify-content: center;
	margin-inline: auto;
	width: min(95%, 1100px);
	margin-block: 8.333vw 0;
}

#design .p-link__item {
	width: 28.333vw;
}

.p-point .p-point__bottom-contents p {
	background: #F5F5F5;
	font-size: 1.5vw;
  font-size: clamp(1rem, 0.917rem + 0.17vw, 1.125rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.8888888889;
	margin-bottom: -10.25vw;
	margin-inline: auto;
	padding-block: 4.75vw 15vw;
	text-align: center;
	width: min(95%, 1100px);
}

}

/* ========================================
@media screen and (min-width:768px) and ( max-width:1000px) {
======================================== */
@media screen and (min-width:768px) and ( max-width:1000px) {
.p-point .p-point03__img img {
  width: 16.3vw;
  height: auto;
}

.p-point .p-point__contents.point01 .p-point__contents-left {
  position: relative;
  top: -10vw;
}

.p-point .p-point__contents-right .point img {
  width: 25.5vw;
  height: auto;
}
}


/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
#design .p-link__items {
	display: grid;
	gap: 11.111vw 0;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin-inline: auto;
	width: min(95%, 82.1vw);
}

#design .p-link__item {
	width: 100%;
}

#design main {
	background: #F5F5F5;
}

.p-fv {
	margin-bottom: 16.155vw;
	position: relative;
	top: 0;
}

.p-fv .l-inner.l-fv {
	margin-inline: auto;
	width: 100%;
}

.p-fv .p-fv__contents {
	background: url(../images/design/fv_bg_sp.jpg) no-repeat top center/cover;
	margin-inline: auto;
	padding-block: 35.478vw 14.324vw;
	width: 100%;
}

.p-fv .p-fv__contents-txt {
	color: #ffffff;
	margin-inline: auto;
	width: min(95%, 86.9vw);
}

.p-fv .p-fv__contents-txt h2 {
	font-size: 6.763vw;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 2.1428571429;
	margin-bottom: 3.454vw;
}

.p-fv .p-fv__contents-txt p {
	font-size: 3.382vw;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 2;
}

.p-garage {
	background: #ffffff;
}

.p-garage .l-inner.l-garage {
	padding-block: 17.4vw 15.4vw;
}

.p-garage .p-garage__en {
	margin-bottom: 5.662vw;
	text-align: center;
}

.p-garage .p-garage__en img {
	height: auto;
	width: 63.217vw;
}

.p-garage .p-garage__ttl {
	font-size: 5.797vw;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.4166666667;
	margin-bottom: 3.662vw;
	text-align: center;
}

.p-garage .p-garage__txt {
	font-size: 3.865vw;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.75;
	margin-bottom: 9.662vw;
	margin-inline: auto;
	text-align: center;
	width: min(95%, 82.1vw);
}

.p-garage .p-garage__img {
  width: min(95%,91.7vw);
  margin-inline: auto;
}

.p-point.point01 {
	margin-bottom: 0px;
}

.p-point.point02 {
	margin-bottom: 0px;
}

.p-point.point03 {
	margin-bottom: 0px;
}

.p-point .l-inner.l-point {
	background: #ffffff;
	margin-inline: auto;
	padding-block: 16vw 10.1vw;
	width: min(95%, 94.2vw);
}

.p-point .l-inner.l-point.point03 {
  padding-block: 16vw 0;  
  margin-bottom: 14vw;
}

.p-point .p-point__contents {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin: 0;
	margin-bottom: 8.077vw;
	margin-inline: auto;
	width: 100%;
}

.p-point .p-point__contents.reverse {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin: 0;
	margin-bottom: 8.077vw;
	margin-inline: auto;
	width: 100%;
}

.p-point .p-point__contents.reverse .p-point__contents-left {
	margin-bottom: 4.831vw;
	order: 3;
}

.p-point .p-point__contents.reverse .p-point__contents-right {
	display: contents;
}

.p-point .p-point__contents-left {
	margin-bottom: 3.797vw;
	order: 3;
}

.p-point .p-point__contents-right {
	display: contents;
}

.p-point .p-point__contents-right .point {
	margin-bottom: 8.831vw;
	order: 1;
	text-align: center;
}

.p-point .p-point__contents-right .point img {
	height: auto;
	width: 35.024vw;
}

.p-point .p-point__contents-right h2 {
	font-size: 4.348vw;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.7777777778;
	margin-bottom: 5.696vw;
	order: 2;
	text-align: center;
}

.p-point .p-point__contents-right .txt {
	margin-inline: auto;
	order: 4;
	width: min(95%, 82.1vw);
}

.p-point .p-point__contents-right .txt p {
	font-size: 3.382vw;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.8571428571;
	margin-bottom: 6.797vw;
}

.p-point .p-point__contents-right .txt p.bottom {
	margin-bottom: 0;
}

.p-point .p-point__bottom-contents {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.p-point .p-point__bottom-contents p {
	background: #F5F5F5;
	font-size: 3.865vw;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.75;
	margin-bottom: -6vw;
	margin-inline: auto;
	padding: 9.662vw 4.831vw;
	text-align: left;
	width: min(95%, 82.1vw);
}

.p-point .p-point__bottom-contents .img {
	margin-inline: auto;
	width: min(95%, 86.9vw);
}

.p-point .p-point03__bottom-box {
	background: #F5F5F5;
	margin-bottom: -15.324vw;
	margin-inline: auto;
	padding-block: 9.662vw 8.87vw;
	width: min(95%, 86.9vw);
}

.p-point .p-point03__bottom-contents {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	margin-inline: auto;
	position: static;
	width: min(95%, 74.8792270531vw);
}

.p-point .p-point03__bottom-contents-left {
	display: contents;
}

.p-point .p-point03__bottom-contents-left h3 {
	font-size: 3.865vw;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.75;
	margin-bottom: 3.797vw;
	order: 1;
	text-align: center;
}

.p-point .p-point03__bottom-contents-left p {
	font-size: 3.382vw;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.8571428571;
	order: 3;
}

.p-point .p-point03__bottom-contents-right {
	margin-bottom: 4.831vw;
	order: 2;
}

.p-point .p-point03__img {
        margin-inline: auto;
        position: relative;
        text-align: right;
        width: min(99%, 94.2vw);
        top: 4vw;
        right: 5vw;
}

.p-point .p-point03__img img {
	height: auto;
	width: 25.705vw;
}
}