@charset "UTF-8";
/* CSS Document */



#kpt-tab {
	padding: 20px;
	background: #EEE;
}
#kpt-tab ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 5px;
}
#kpt-tab ul li a {
	display: block;
	width: 260px;
	padding: 1em;
	background: #666;
	color: #FFF;
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
	font-weight: bold;
}
#kpt-tab ul li.select a {
	background: #000;
}

figure.img-box figcaption {
	font-size: 0.666rem;
}
.img-box figcaption.cap-in.white {
	font-weight: normal !important;
}



/****************************************************************************************************
main
****************************************************************************************************/
#main {
	position: relative;
	width: 100%;
	position: relative;
	display: inline-block;
	z-index: 10;
}
/*#main img {
	width: 100%;
	height: auto;
}*/
#main .pcOnly {
	width: 100%;
}
#main .pcOnly video {
	width: 100%;
	height: auto;
}
#main.wide .pcOnly video {
	width: auto;
	height: calc(100vh - 110px);
}
.sound-btn {
	position: absolute;
	right:13px;
	bottom: 10px;
	cursor: pointer;
	-webkit-transition: opacity 300ms;
	-moz-transition: opacity 300ms;
	transition: opacity 300ms;
}
.sound-btn:hover {
	opacity: .5;
}
.sound-off .sound-btn .on,
.sound-on .sound-btn .off {
	display: none;
}

.skip,
.replay {
	position: absolute;
	right: 16px;
	bottom: 42px;
	z-index: 100;
	-webkit-transition: opacity 300ms;
	-moz-transition: opacity 300ms;
	transition: opacity 300ms;
}
.skip a,
.replay a {
	display: block;
	width: 124px;
	height: 28px;
	line-height: 28px;
	color: #FFF;
	background: rgba(0,0,0,.35);
	border: 1px solid rgba(255,255,255,.5);
	font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
	box-shadow:
		0 0 10px rgba(0,0,0,.35);
}
.replay {
	display: none;
}
.skip.end {
	display: none;
}
.replay.end {
	display: block;
}

#kpd-top,
#kpd-urban-access,
#kpd-park-ocean,
#kpd-life,
#kpd-residence {
	margin-top: -4px;
}



/****************************************************************************************************
TOP
****************************************************************************************************/
#kpd-top-sec1 {
	background: url(../img/kobe-peaceful-days/sec1-bg.jpg) no-repeat center top;
	background-size: 2000px auto;
}
#kpd-top-index #urban-access {
	background: url(../img/kobe-peaceful-days/urban-access-bg.jpg) no-repeat center top;
	background-size: 2000px auto;
}
#kpd-top-index #park-ocean {
	background: url(../img/kobe-peaceful-days/park-ocean-bg.jpg) no-repeat center top;
	background-size: 2000px auto;
}
#kpd-top-index #life {
	background: url(../img/kobe-peaceful-days/life-bg.jpg) no-repeat center top;
	background-size: 2000px auto;
}
#kpd-top-index #residence {
	background: url(../img/kobe-peaceful-days/residence-bg.jpg) no-repeat center top;
	background-size: 2000px auto;
}

#kpd-top-sec1 {
	padding: 130px 0 0 0;
}
#kpd-top-sec1 p {
	margin-top: 90px;
	font-size: 1.333rem;
	letter-spacing: 0.15em;
	line-height: 2.0;
}
#kpd-top-sec1-photo {
	position: relative;
	height: 920px;
	margin-top: 130px;
	margin-bottom: -15px;
}
#kpd-top-sec1-img1 {
	position: absolute;
	left: 0;
	top: 123px;
	width: calc(50vw - 200px);
	height: 652px;
}
#kpd-top-sec1-img2 {
	position: absolute;
	left: calc(50% - 225px);
	top: 0;
}
#kpd-top-sec1-img3 {
	position: absolute;
	left: calc(50% - 416px);
	bottom: 0;
}
#kpd-top-sec1-img4 {
	position: absolute;
	right: 0;
	top: 208px;
	width: calc(50vw - 340px);
	height: 577px;
}
#kpd-top-sec1-img1 figure,
#kpd-top-sec1-img4 figure {
	width: 100%;
	height: 100%;
}
#kpd-top-sec1-img1 figure img,
#kpd-top-sec1-img4 figure img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

#urban-access,
#park-ocean,
#life,
#residence {
	padding: 90px 0;
}
.kpd-top-index-block a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 80px;
	text-align: left;
	width: 1340px;
	margin: auto;
}
#urban-access .kpd-top-index-text,
#life .kpd-top-index-text {
	order: 2;
}
.kpd-top-index-text {
	flex: 1;
}
#contents .kpd-top-index-text h2 {
	color: #000;
	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
	font-size: 3.733rem;
	line-height: 1.4;
	letter-spacing: 0.15em;
}
#contents .kpd-top-index-text p {
	margin-top: 40px;
	font-size: 1.666rem;
	line-height: 1.8;
	letter-spacing: 0.15em;
}
#contents .kpd-top-index-text ul {
	margin-top: 50px;
}
#contents .kpd-top-index-text ul li {
	padding: 0.4em 0;
	background: rgba(255,255,255,.6);
	border-top: 1px solid rgba(0,0,0,.6);
	border-bottom: 1px solid rgba(0,0,0,.6);
	font-size: 1.4rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
	text-align: center;
}
#contents .kpd-top-index-text ul li + li {
	margin-top: 12px;
}
/*.view-more {
	position: relative;
	margin-top: 50px;
	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
	font-size: 1.333rem;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.15em;
}
.view-more::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 14px;
	border-right: 1px solid rgba(0,0,0,.6);
	border-bottom: 1px solid rgba(0,0,0,.6);
	transform-origin: 100% 100%;
	transform: skew(45deg, 0);
}*/
.view-more {
	position: relative;
	margin-top: 50px;
	padding: 0.4em 0.8em 0.4em 1em;
	background: #000;
	color: #FFF;
	font-family: Arial Narrow, Arial, Helvetica, sans-serif;
	font-size: 1.333rem;
	font-weight: bold;
	line-height: 1.6;
	letter-spacing: 0.15em;
	text-align: right;
}
.view-more span::after {
	content: "";
	display: inline-block;
	width: 40px;
	height: 12px;
	margin-left: 0.3em;
	border-right: 1px solid rgba(255,255,255,1);
	border-bottom: 1px solid rgba(255,255,255,1);
	transform-origin: 100% 100%;
	transform: skew(45deg, 0);
}
.view-more > span {
   animation: blinking 1.2s ease-in-out infinite alternate;
}
@keyframes blinking {
   0% {
   opacity: 0.4;
   }
   80% {
   opacity: 1;
   }
   100% {
   opacity: 1;
   }
}

.kpd-top-index-img {
	position: relative;
}
#contents .kpd-top-index-img h3 {
	position: absolute;
	color: #000;
	font-size: 1.333rem;
	font-weight: normal;
	line-height: 1.6;
	letter-spacing: 0.15em;
}
#urban-access .kpd-top-index-img h3 {
	left: 40px;
	top: 460px;
}
#park-ocean .kpd-top-index-img h3 {
	left: 370px;
	top: 150px;
	color: #FFF;
}
#life .kpd-top-index-img h3 {
	left: 40px;
	top: auto;
	bottom: 40px;
}
#residence .kpd-top-index-img h3 {
	left: 40px;
	top: 40px;
	color: #FFF;
}



/****************************************************************************************************
urban-access
****************************************************************************************************/
#kpd-urban-access,
#kpd-park-ocean,
#kpd-life,
#kpd-residence {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
}
#kpd-urban-access-sec1 {
	background: url(../img/kpd-urban-access/sec1-bg.jpg) no-repeat center top;
	background-size: 2000px 100%;
}
#kpd-urban-access-sec2-3 {
	background: url(../img/kpd-urban-access/sec2-3-bg.jpg) no-repeat center 156px;
	background-size: 2000px 100%;
}
#kpd-urban-access-sec4 {
	background: url(../img/kpd-urban-access/sec4-bg.jpg) no-repeat center top;
	background-size: 2000px 100%;
}
#kpd-urban-access-sec1 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 90px 0 290px 0;
}
#kpd-urban-access-sec1-text {
	width: 54%;
	padding-left: 2%;
}
#kpd-urban-access-sec1-text h1 {
	color: #874395;
	font-size: 2rem;
	line-height: 1.6;
	letter-spacing: 0.15em;
}
#kpd-urban-access-sec1-text p {
	margin-top: 42px;
	font-size: 1.066rem;
	line-height: 2.4;
	letter-spacing: 0.15em;
}
#kpd-urban-access-sec1-img {
	position: relative;
	width: 46%;
}
#kpd-urban-access-sec1-img figure,
#kpd-urban-access-sec1-img figure img {
	object-fit: cover;
	width: 100%;
	height: 514px;
}
#kpd-urban-access-sec1-img .text-box {
	position: absolute;
	left: 0;
	top: 36px;
	padding: 0.8em 1.5em;
	background: #874395;
	color: #FFF;
	font-size: 1.0rem;
	line-height: 1.6;
	text-align: left;
}

#kpd-urban-access-sec2-3 {
	padding: 0 0 90px 0;
}
#kpd-urban-access-sec2 {
	margin-top: -156px;
}
#kpd-urban-access-sec3 {
	margin-top: 120px;
}
#kpd-urban-access-sec4 {
	padding: 90px 0 90px 0;
}
#kpd-urban-access-sec2-inner,
#kpd-urban-access-sec3-inner,
#kpd-urban-access-sec4-inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 30px;
	width: 1200px;
	margin: auto;
	text-align: left;
}
#kpd-urban-access-sec2-inner > *,
#kpd-urban-access-sec3-inner > *,
#kpd-urban-access-sec4-inner > * {
	width: 380px;
}
#kpd-urban-access-sec2-text {
	width: 790px;
}
#kpd-urban-access-sec3-right {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 30px;
	width: 790px;
}
#kpd-urban-access-sec4-text {
	width: 790px;
}
#kpd-urban-access-sec2-text h2,
#kpd-urban-access-sec3-text h2,
#kpd-urban-access-sec4-text h2 {
	margin-bottom: 8px;
	padding: 0.5em 0;
	background: #874395;
	color: #FFF;
	font-size: 1.666rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
	letter-spacing: 0;
	text-align: center;
}
#kpd-urban-access-sec2-text p,
#kpd-urban-access-sec3-text p,
#kpd-urban-access-sec4-text p {
	display: inline;
	background: linear-gradient(transparent 98%, #874395 0%);
	padding-bottom: 8px;
	font-size: 1.266rem;
	line-height: 2.35;
	letter-spacing: 0.10em;
}
#kpd-urban-access-sec2-img1 .wrap {
	position: relative;
}
#kpd-urban-access-sec2-img1 .text-box {
	position: absolute;
	left: 10px;
	bottom: 6px;
	color: #FFF;
}
#kpd-urban-access-sec2-img1 .text-box div {
	font-size: 1rem;
	line-height: 1.0;
}
#kpd-urban-access-sec2-img1 .text-box h3 {
	color: #FFF;
	font-size: 1.466rem;
	line-height: 1.0;
}
#kpd-urban-access-sec2-img1 .text-box h3 strong {
	font-size: 3.0rem;
}
#kpd-urban-access-sec2-img1 .text-box h3 .small {
	font-size: 0.8rem;
}
#kpd-urban-access-sec2-img2 {
	position: relative;
	width: 100%;
}
#kpd-urban-access-sec2-img2 .text-box {
	position: absolute;
	left: 20px;
	top: 10px;
	color: #FFF;
}
#kpd-urban-access-sec2-img2 .text-box h3 {
	color: #FFF;
	font-size: 1.733rem;
	line-height: 1.0;
}
#kpd-urban-access-sec2-img2 .text-box h3 strong {
	font-size: 3.0rem;
}
#contents .kpd-urban-access-sec2-img .text-box h3 {
	margin-top: 6px;
	color: #333;
	font-size: 1.733rem;
	line-height: 1.0;
}
#contents .kpd-urban-access-sec2-img .text-box h3 strong {
	color: #874395;
	font-size: 2.4rem;
}
#contents #kpd-urban-access-sec4 .kpd-urban-access-sec2-img .text-box h3 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin-top: 6px;
	color: #874395;
	font-size: 1.533rem;
	line-height: 1.4;
}
#contents #kpd-urban-access-sec4 .kpd-urban-access-sec2-img .text-box h3 .small {
	font-size: 0.8rem;
}



/****************************************************************************************************
park-ocean
****************************************************************************************************/
#kpd-park-ocean-sec1 {
	background: url(../img/kpd-park-ocean/sec1-bg.jpg) no-repeat center top;
	background-size: 2000px 100%;
}
#kpd-park-ocean-sec2 {
	background: url(../img/kpd-park-ocean/sec2-bg.jpg) no-repeat center top;
	background-size: 2000px 100%;
}
#kpd-park-ocean-sec3 {
	background: url(../img/kpd-park-ocean/sec3-bg.jpg) no-repeat center 500px;
	background-size: 2000px 100%;
}
#kpd-park-ocean-sec1 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	padding: 90px 0 0 0;
}
#kpd-park-ocean-sec1-text {
	width: 54%;
	order: 2;
}
#kpd-park-ocean-sec1-text h1 {
	color: #007E40;
	font-size: 2rem;
	line-height: 1.6;
	letter-spacing: 0.15em;
}
#kpd-park-ocean-sec1-text p {
	margin-top: 42px;
	font-size: 1.066rem;
	line-height: 2.4;
	letter-spacing: 0.15em;
}
#kpd-park-ocean-sec1-text-img-block {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	gap: 45px;
	margin: 80px 0 0 70px;
}
#kpd-park-ocean-sec1-text-img-box2 {
	flex: 1;
}
#kpd-park-ocean-sec1-text-img-box2 img {
	object-fit: cover;
	width: 100%;
	height: 280px;
}
#kpd-park-ocean-sec1-img {
	width: 46%;
}
#kpd-park-ocean-sec1-img figure,
#kpd-park-ocean-sec1-img figure img {
	object-fit: cover;
	object-position: 10% 10%;
	width: 100%;
	height: 890px;
}
#kpd-park-ocean-sec1-img .text-box {
	position: absolute;
	right: 0;
	top: 40%;
	padding: 0.8em 1.5em;
	background: #007E40;
	color: #FFF;
	font-size: 1.0rem;
	line-height: 1.6;
	text-align: left;
}

#kpd-park-ocean-sec2 {
	margin-top: -80px;
}
#kpd-park-ocean-sec2 {
	padding: 220px 0 640px 0;
}
#kpd-park-ocean-sec3 {
	margin-top: -500px;
}
#kpd-park-ocean-sec3 {
	padding: 0 0 90px 0;
}
#kpd-park-ocean-sec2-inner,
#kpd-park-ocean-sec3-inner {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 30px;
	width: 1200px;
	margin: auto;
	text-align: left;
}
#kpd-park-ocean-sec2-inner > *,
#kpd-park-ocean-sec3-inner > * {
	width: 380px;
}
#kpd-park-ocean-sec2-text,
#kpd-park-ocean-sec2-inner > .kpd-park-ocean-sec2-img.double,
#kpd-park-ocean-sec3-text,
#kpd-park-ocean-sec3-inner > .kpd-park-ocean-sec2-img.full {
	width: 100%;
}
#kpd-park-ocean-sec2-left {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 30px;
	width: 790px;
}
#kpd-park-ocean-sec2-right {
	position: absolute;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	left: 820px;
	top: 0;
	height: 100%;
	padding-bottom: calc(calc(1.533rem * 1.4) + 6px);
	width: calc(50vw - 220px);
}
#kpd-park-ocean-sec2-right figure {
	width: 100%;
	height: calc(100% / 3);
}
#kpd-park-ocean-sec2-right figure img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#kpd-park-ocean-sec2-text h2,
#kpd-park-ocean-sec3-text h2 {
	margin-bottom: 8px;
	padding: 0.5em;
	background: #007E40;
	color: #FFF;
	font-size: 1.666rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
	text-align: center;
}
#kpd-park-ocean-sec2-text p,
#kpd-park-ocean-sec3-text p {
	display: inline;
	background: linear-gradient(transparent 98%, #007E40 0%);
	padding-bottom: 8px;
	font-size: 1.266rem;
	line-height: 2.35;
	letter-spacing: 0.10em;
}
#contents .kpd-park-ocean-sec2-img .text-box h3 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin-top: 6px;
	color: #007E40;
	font-size: 1.533rem;
	line-height: 1.4;
}
#contents .kpd-park-ocean-sec2-img .text-box h3 .small {
	font-size: 0.8rem;
}



/****************************************************************************************************
life
****************************************************************************************************/
#kpd-life-sec1 {
	background: url(../img/kpd-life/sec1-bg.jpg) no-repeat center top;
	background-size: 2000px 100%;
}
#kpd-life-sec2 {
	background: url(../img/kpd-life/sec2-bg.jpg) no-repeat center top;
	background-size: 2000px 100%;
}
#kpd-life-sec3 {
	background: url(../img/kpd-life/sec3-bg.jpg) no-repeat center top;
	background-size: 2000px 100%;
}
#kpd-life-sec1 {
	padding: 90px 0 0 0;
}
#kpd-life-sec1-inner {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
#kpd-life-sec1-img img {
	object-fit: cover;
	width: 100vw;
	height: 800px;
}
#kpd-life-sec1-text {
	position: absolute;
	left: 0;
	right: 0;
	width: 1200px;
	margin: auto;
	color: #FFF;
	text-align: left;
	z-index: 2;
}
#kpd-life-sec1-text h1 {
	font-size: 2rem;
	line-height: 1.6;
	letter-spacing: 0.15em;
}
#kpd-life-sec1-text p {
	margin-top: 42px;
	font-size: 1.066rem;
	line-height: 2.4;
	letter-spacing: 0.15em;
}

#kpd-life-sec2 {
	padding: 140px 0 90px 0;
}
#kpd-life-sec2-inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 30px;
	width: calc(50vw + 600px);
	text-align: left;
}
.kpd-life-sec2-img {
	width: 380px;
}
.kpd-life-sec2-img.flex {
	width: calc(50vw - 220px);
}
.kpd-life-sec2-img.flex figure {
	width: 100%;
}
#gourme figure img {
	object-fit: cover;
	width: 100%;
	height: 513px;
}
#landmade figure img {
	object-fit: cover;
	width: 100%;
	height: 250px;
}
.kpd-life-sec2-right {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 30px;
	width: 790px;
}
#kpd-life-sec2 h2,
#kpd-life-sec3 h2 {
	margin-bottom: 8px;
	padding: 0.5em 0;
	background: #006BAA;
	color: #FFF;
	font-size: 1.666rem;
	line-height: 1.6;
	text-align: center;
}
#kpd-life-sec2 p,
#kpd-life-sec3 p {
	display: inline;
	background: linear-gradient(transparent 98%, #006BAA 0%);
	padding-bottom: 8px;
	font-size: 1.266rem;
	line-height: 2.35;
	letter-spacing: 0.10em;
}
#contents .kpd-life-sec2-img .text-box h3,
#contents .kpd-life-sec3-img .text-box h3 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin-top: 6px;
	color: #006BAA;
	font-size: 1.533rem;
	line-height: 1.4;
}
#contents .kpd-life-sec2-img .text-box.right h3 {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}
#contents .kpd-life-sec2-img .text-box h3 .small,
#contents .kpd-life-sec3-img .text-box h3 .small {
	font-size: 0.8rem;
}
.indent70 {
	font-size: 82%;
}
#kpd-life-sec2-inner2 {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	width: calc(50vw + 600px);
	margin-top: 46px;
}
#kpd-life-sec2-inner2 figure {
	width: calc(100% / 3);
}
#kpd-life-sec2-inner2 figure img {
	object-fit: cover;
	width: 100%;
	height: 250px;
}

#kpd-life-sec3 {
	padding: 90px 0 90px 0;
}
#kpd-life-sec3-inner {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 30px;
	width: calc(50vw + 728px);
	text-align: left;
}
.kpd-life-sec3-left {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 30px;
	width: calc(50vw + 190px);
}
#kpd-life-sec3-text {
	width: 790px;
	margin-left: calc(50vw - 600px);
}
.kpd-life-sec3-imgL {
	flex: 1;
}
.kpd-life-sec3-imgL,
.kpd-life-sec3-imgL figure {
	width: 100%;
	background: #F00;
}
.kpd-life-sec3-imgL figure img {
	object-fit: cover;
	width: 100%;
	height: 560px;
}
.kpd-life-sec3-right {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 30px;
	width: 508px;
}



/****************************************************************************************************
residence
****************************************************************************************************/
#kpd-residence-sec1 {
	background: url(../img/kpd-residence/sec1-bg.jpg) no-repeat center top;
	background-size: 2000px 100%;
}
#kpd-residence-sec2 {
	background: url(../img/kpd-residence/sec2-bg.jpg) no-repeat center top;
	background-size: 2000px 100%;
}
#kpd-residence-sec3 {
	background: url(../img/kpd-residence/sec3-bg.jpg) no-repeat center 30px;
	background-size: 2000px 100%;
}
#kpd-residence-sec1 {
	padding: 0 0 0 0;
}
#kpd-residence-sec1-inner {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
#kpd-residence-sec1-img img {
	object-fit: cover;
	width: 50vw;
	height: 800px;
}
#kpd-residence-sec1-text {
	width: 50vw;
	order: 2;
}
#kpd-residence-sec1-text h1 {
	color: #A47840;
	font-size: 2rem;
	line-height: 1.6;
	letter-spacing: 0.15em;
}
#kpd-residence-sec1-text p {
	margin-top: 42px;
	font-size: 1.066rem;
	line-height: 2.4;
	letter-spacing: 0.15em;
}

#kpd-residence-sec2 {
	padding: 0 0 142px 0;
}
#kpd-residence-sec2-full {
	position: relative;
	text-align: left;
}
#kpd-residence-sec2-full-img figure {
	width: 100%;
}
#kpd-residence-sec2-full-img figure img {
	object-fit: cover;
	width: 100%;
	height: 740px;
}
#kpd-residence-sec2-full-text {
	position: absolute;
	width: 780px;
	right: 0;
	top: 0;
	padding: 20px 30px 30px 30px;
	background: rgba(255,255,255,.6);
}

#kpd-residence-sec2 h2,
#kpd-residence-sec3 h2 {
	margin-bottom: 8px;
	padding: 0.5em 0;
	background: #A47840;
	color: #FFF;
	font-size: 1.666rem;
	line-height: 1.6;
	letter-spacing: 0.15em;
	text-align: center;
}
#kpd-residence-sec2 p,
#kpd-residence-sec3 p {
	display: inline;
	background: linear-gradient(transparent 98%, #A47840 0%);
	padding-bottom: 8px;
	font-size: 1.266rem;
	line-height: 2.35;
	letter-spacing: 0.10em;
}

#kpd-residence-sec2-inner {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	gap: 70px;
	width: 1264px;
	margin: auto;
	margin-top: 60px;
}
#kpd-residence-sec2-inner-left {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 30px;
	width: 714px;
	text-align: left;
}
#kpd-residence-sec2-inner-right {
	padding: 30px;
	background: rgba(153,168,198,.5);
}
#kpd-residence-sec2-kitchen-ttl div {
	font-size: 1.4rem;
	font-weight: bolder;
	line-height: 1.6;
	letter-spacing: 0.15em;
}
#kpd-residence-sec2-kitchen-ttl h3 {
	color: #A47840;
	font-size: 1.866rem;
	font-weight: bolder;
	line-height: 1.4;
	letter-spacing: 0.15em;
}
#kpd-residence-sec2-kitchen-item {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 10px 12px;
	width: 420px;
	margin-top: 12px;
}
.kpd-residence-sec2-kitchen-item {
	width: 204px;
}
#kpd-residence-sec2-kitchen-item h4 {
	margin-top: 0.3em;
	color: #A47840;
	font-size: 1.2rem;
	font-weight: bolder;
	line-height: 1.4;
}
#kpd-residence-sec2-kitchen-item p.small {
	font-size: 0.8rem;
	line-height: 1.4;
	letter-spacing: 0;
}


#kpd-residence-sec3 {
	margin-top: -30px;
	padding: 0 0 90px 0;
}
#kpd-residence-sec3-inner {
	position: relative;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	gap: 70px;
	width: 1264px;
	margin: auto;
}
#kpd-residence-sec3-inner-left {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 6px;
	width: 714px;
	text-align: left;
}
.kpd-residence-sec3-img {
	position: relative;
}
.kpd-residence-sec3-img .text-box {
	position: absolute;
	left: 0;
	top: 300px;
	padding: 0.8em 1.5em;
	background: #A47840;
	color: #FFF;
	font-size: 1.0rem;
	line-height: 1.6;
	text-align: left;
}
#kpd-residence-sec3-inner-right {
	text-align: left;
}
#kpd-residence-sec3-text {
	margin-bottom: 30px;
}
#kpd-residence-sec3-text p {
	letter-spacing: 0.05em;
}




@media screen and (min-width: 2000px) {
	/****************************************************************************************************
	TOP
	****************************************************************************************************/
	#kpd-top-sec1,
	#kpd-top-index #urban-access,
	#kpd-top-index #park-ocean,
	#kpd-top-index #life,
	#kpd-top-index #residence {
		background-size: 100% auto;
	}
	#kpd-urban-access-sec1,
	#kpd-urban-access-sec2-3,
	#kpd-urban-access-sec4,
	#kpd-park-ocean-sec1,
	#kpd-park-ocean-sec2,
	#kpd-park-ocean-sec3,
	#kpd-life-sec1,
	#kpd-life-sec2,
	#kpd-life-sec3,
	#kpd-residence-sec1,
	#kpd-residence-sec2,
	#kpd-residence-sec3 {
		background-size: 100% 100%;
	}
}




@media screen and (max-width: 767px),
screen and (max-width: 960px) and (orientation: landscape) {
	
	#kpt-tab {
		padding: 2vw;
	}
	#kpt-tab ul {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 1vw;
	}
	#kpt-tab ul li a {
		width: 47.5vw;
		padding: 1.2em;
		font-size: 0.933rem;
	}
	#kpt-tab ul li:nth-of-type(1) a {
		width: 96vw;
	}
	
	
	
	/****************************************************************************************************
	main
	****************************************************************************************************/
	#main {
		position: relative;
	}
	#main img {
		width: 100%;
		height: auto;
	}
	#main .spOnly video {
		width: 100vw;
		height: auto;
	}
	.sound-btn {
		right: 1.5vw;
		bottom: 1.5vw;
		width: 20vw;
	}
	.skip,
	.replay {
		right: 2.0vw;
		bottom: 7vw;
	}
	.skip a,
	.replay a {
		width:19vw;
		height:4.5vw;
		font-size: 2.66vw;
		line-height:4.5vw;
	}
	
	
	
	/****************************************************************************************************
	TOP
	****************************************************************************************************/
	#kpd-top-sec1 {
		background-size: 220vw auto;
	}
	#kpd-top-index #urban-access {
		background-size: 220vw auto;
	}
	#kpd-top-index #park-ocean {
		background-size: 220vw auto;
	}
	#kpd-top-index #life {
		background-size: 220vw auto;
	}
	#kpd-top-index #residence {
		background-size: 220vw auto;
	}
	
	#kpd-top-sec1 {
		padding: 12vw 4vw 0 4vw;
	}
	#kpd-top-sec1 h1 {
		width: 80vw;
		margin: auto;
	}
	#kpd-top-sec1 p {
		margin-top: 8vw;
		font-size: 0.933rem;
		letter-spacing: 0;
	}
	#kpd-top-sec1-photo {
		height: calc(920vw / 20);
		margin-top: 10vw;
		margin-bottom: -3vw;
	}
	#kpd-top-sec1-img1 {
		left: -4vw;
		top: calc(123vw / 20);
		width:  calc(820vw / 20);
		height: calc(652vw / 20);
	}
	#kpd-top-sec1-img2 {
		left: calc(50% - 11.2vw);
		width:  calc(940vw / 20);
		height: calc(520vw / 20);
	}
	#kpd-top-sec1-img3 {
		left: calc(50% - 20.8vw);
		width: calc(556vw / 20);
		height: calc(324vw / 20);
	}
	#kpd-top-sec1-img4 {
		right: -4vw;
		top: calc(208vw / 20);
		width: calc(660vw / 20);
		height: calc(577vw / 20);
	}
	#kpd-top-sec1-img1 figure,
	#kpd-top-sec1-img2 figure,
	#kpd-top-sec1-img3 figure,
	#kpd-top-sec1-img4 figure {
		width: 100%;
		height: 100%;
	}
	#kpd-top-sec1-img1 figure img,
	#kpd-top-sec1-img2 figure img,
	#kpd-top-sec1-img3 figure img,
	#kpd-top-sec1-img4 figure img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}
	
	#urban-access,
	#park-ocean,
	#life,
	#residence {
		padding: 0;
	}
	#urban-access .kpd-top-index-text,
	#park-ocean .kpd-top-index-text,
	#life .kpd-top-index-text,
	#residence .kpd-top-index-text {
		padding: 10vw 4vw 6vw 4vw;
	}
	.kpd-top-index-block a {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 0;
		width: 100%;
	}
	#urban-access .kpd-top-index-text,
	#life .kpd-top-index-text {
		order: 0;
	}
	#contents .kpd-top-index-text h2 {
		font-size: 2.8rem;
		letter-spacing: 0.05em;
	}
	#contents .kpd-top-index-text p {
		margin-top: 2vw;
		font-size: 1.333rem;
	}
	#contents .kpd-top-index-text ul {
		margin-top: 5vw;
	}
	#contents .kpd-top-index-text ul li {
		font-size: 1.0rem;
	}
	#contents .kpd-top-index-text ul li + li {
		margin-top: 1vw;
	}
	.view-more {
		margin-top: 5vw;
		font-size: 1.2rem;
	}
	.view-more::after {
		height: 4vw;
	}
	#contents .kpd-top-index-img h3 {
		font-size:0.866rem;
	}
	#urban-access .kpd-top-index-img h3 {
		left: calc(40vw / 8);
		top: calc(460vw / 8);
	}
	#park-ocean .kpd-top-index-img h3 {
		left: calc(370vw / 8);
		top: calc(150vw / 8);
	}
	#life .kpd-top-index-img h3 {
		left: calc(40vw / 8);
		bottom: calc(40vw / 8);
	}
	#residence .kpd-top-index-img h3 {
		left: calc(40vw / 8);
		top: calc(40vw / 8);
	}
	
	
	
	/****************************************************************************************************
	urban-access
	****************************************************************************************************/
	#kpd-urban-access-sec1 {
		background-size: 220vw 100%;
	}
	#kpd-urban-access-sec2-3 {
		background-position: center 10vw;
		background-size: 220vw 100%;
	}
	#kpd-urban-access-sec4 {
		background-size: 220vw 100%;
	}
	#kpd-urban-access-sec1 {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 6vw;
		padding: 10vw 0 20vw 0;
	}
	#kpd-urban-access-sec1-text {
		width: 100%;
		padding: 0 4vw;
	}
	#kpd-urban-access-sec1-text h1 {
		font-size: 1.6rem;
		letter-spacing: 0.1em;
	}
	#kpd-urban-access-sec1-text p {
		margin-top: 4vw;
		font-size: 1.00rem;
	}
	#kpd-urban-access-sec1-img {
		width: 100%;
	}
	#kpd-urban-access-sec1-img figure,
	#kpd-urban-access-sec1-img figure img {
		width: 100%;
		height: 80vw;
	}
	#kpd-urban-access-sec1-img .text-box {
		top: 2vw;
		font-size: 0.733rem;
	}
	
	#kpd-urban-access-sec2-3 {
		padding: 0 4vw 10vw 4vw;
	}
	#kpd-urban-access-sec2 {
		margin-top: -10vw;
	}
	#kpd-urban-access-sec3 {
		margin-top: 10vw;
	}
	#kpd-urban-access-sec4 {
		padding: 10vw 4vw 10vw 4vw;
	}
	#kpd-urban-access-sec2-inner,
	#kpd-urban-access-sec3-inner,
	#kpd-urban-access-sec4-inner {
		gap: 2vw;
		width: 100%;
	}
	#kpd-urban-access-sec2-inner > *,
	#kpd-urban-access-sec3-inner > *,
	#kpd-urban-access-sec4-inner > *,
	#kpd-urban-access-sec3-right > .kpd-urban-access-sec2-img {
		width: 45vw;
	}
	#kpd-urban-access-sec2-text {
		width: 100%;
	}
	#kpd-urban-access-sec3-img1 {
		order: 2;
		width: 100%;
	}
	#kpd-urban-access-sec3-img1 figure {
		width: 100%;
	}
	#kpd-urban-access-sec3-img1 img {
		object-fit: cover;
		width: 100%;
		height: 92vw;
	}
	#kpd-urban-access-sec3-right {
		gap: 2vw;
		width: 100%;
	}
	#kpd-urban-access-sec4-text {
		width: 100%;
	}
	#kpd-urban-access-sec2-text h2,
	#kpd-urban-access-sec3-text h2,
	#kpd-urban-access-sec4-text h2 {
		margin-bottom: 2vw;
		font-size: 1.2rem;
		letter-spacing: 0;
	}
	#kpd-urban-access-sec2-text p,
	#kpd-urban-access-sec3-text p,
	#kpd-urban-access-sec4-text p {
		background: linear-gradient(transparent 98%, #874395 0%);
		font-size: 0.933rem;
		letter-spacing: 0;
	}
	#kpd-urban-access-sec2-img1 {
		width: 100%;
	}
	#kpd-urban-access-sec2-img1 .wrap figure {
		width: 100%;
	}
	#kpd-urban-access-sec2-img1 .text-box {
		left: 3vw;
		bottom: 2vw;
	}
	#kpd-urban-access-sec2-img1 .text-box div {
		font-size: 0.866rem;
	}
	#kpd-urban-access-sec2-img1 .text-box h3 {
		font-size: 1.333rem;
	}
	#kpd-urban-access-sec2-img1 .text-box h3 strong {
		font-size: 2.6rem;
	}
	#kpd-urban-access-sec2-img1 .text-box h3 .small {
		font-size: 0.6rem;
	}
	#kpd-urban-access-sec2-img2 {
		overflow: hidden;
		width: 100%;
	}
	#kpd-urban-access-sec2-img2 img {
		width: 180%;
		margin-left: -30%;
	}
	#kpd-urban-access-sec2-img2 .text-box {
		left: 3vw;
		top: 1vw;
	}
	#kpd-urban-access-sec2-img2 .text-box h3 {
		font-size: 1.333rem;
	}
	#kpd-urban-access-sec2-img2 .text-box h3 strong {
		font-size: 2.6rem;
	}
	#contents .kpd-urban-access-sec2-img .text-box h3 {
		margin-top: 1vw;
		font-size: 1.0rem;
	}
	#contents .kpd-urban-access-sec2-img .text-box h3 strong {
		font-size: 1.6rem;
	}
	#contents #kpd-urban-access-sec2 .kpd-urban-access-sec2-img .text-box p.small {
		font-size: 0.533rem;
	}
	#contents #kpd-urban-access-sec4 .kpd-urban-access-sec2-img .text-box h3 {
		margin-top: 1vw;
		font-size: 0.866rem;
	}
	#contents #kpd-urban-access-sec4 .kpd-urban-access-sec2-img .text-box h3 .small {
		font-size: 0.533rem;
	}
	
	
	
	/****************************************************************************************************
	park-ocean
	****************************************************************************************************/
	#kpd-park-ocean-sec1 {
		background-size: 220vw 100%;
	}
	#kpd-park-ocean-sec2 {
		background-size: 220vw 100%;
	}
	#kpd-park-ocean-sec3 {
		background: url(../img/kpd-park-ocean/sec3-bg.jpg) no-repeat center 75vw;
		background-size: 220vw 100%;
	}
	#kpd-park-ocean-sec1 {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 6vw;
		padding: 10vw 0 0 0;
	}
	#kpd-park-ocean-sec1-text {
		width: 100%;
		padding: 0 4vw;
		order: 0;
	}
	#kpd-park-ocean-sec1-text h1 {
		font-size: 1.6rem;
		letter-spacing: 0.1em;
	}
	#kpd-park-ocean-sec1-text p {
		margin-top: 4vw;
		font-size: 1.00rem;
	}
	#kpd-park-ocean-sec1-text-img-block {
		gap: 2vw;
		margin: 6vw -4vw 0 0;
	}
	#kpd-park-ocean-sec1-text-img-box1 {
		width: 45vw
	}
	#kpd-park-ocean-sec1-text-img-box2 img {
		height: auto;
	}
	#kpd-park-ocean-sec1-img {
		width: 100%;
	}
	#kpd-park-ocean-sec1-img figure,
	#kpd-park-ocean-sec1-img figure img {
		height: auto;
	}
	#kpd-park-ocean-sec1-img .text-box {
		font-size: 0.733rem;
	}
	
	#kpd-park-ocean-sec2 {
		margin-top: 0;
		padding: 15vw 4vw 90vw 4vw;
	}
	#kpd-park-ocean-sec3 {
		margin-top: -75vw;
	}
	#kpd-park-ocean-sec3 {
		padding: 0 4vw 10vw 4vw;
	}
	#kpd-park-ocean-sec2-inner {
		gap: 4vw;
		width: 100%;
	}
	#kpd-park-ocean-sec3-inner {
		gap: 2vw;
		width: 100%;
	}
	#kpd-park-ocean-sec2-inner > *,
	#kpd-park-ocean-sec3-inner > * {
		width: 45vw;
	}
	#kpd-park-ocean-sec2-left {
		gap: 2vw;
		width: 100%;
	}
	#kpd-park-ocean-sec2-left > .kpd-park-ocean-sec2-img.double {
		width: 100%;
	}
	#kpd-park-ocean-sec2-left > .kpd-park-ocean-sec2-img {
		width: 45vw;
	}
	#kpd-park-ocean-sec2-text,
	#kpd-park-ocean-sec2-inner > .kpd-park-ocean-sec2-img.double,
	#kpd-park-ocean-sec3-text,
	#kpd-park-ocean-sec3-inner > .kpd-park-ocean-sec2-img.full {
		width: 100%;
	}
	#kpd-park-ocean-sec2-right {
		position: static;
		height: auto;
		padding-bottom: 0;
		width: 100%;
		margin: 0 -4vw;
	}
	#kpd-park-ocean-sec2-right figure {
		height: auto;
	}
	#kpd-park-ocean-sec2-right figure img {
		width: 100vw;
		height: auto;
	}
	#kpd-park-ocean-sec2-text h2,
	#kpd-park-ocean-sec3-text h2 {
		margin-bottom: 2vw;
		font-size: 1.2rem;
		letter-spacing: 0;
	}
	#kpd-park-ocean-sec2-text p,
	#kpd-park-ocean-sec3-text p {
		background: linear-gradient(transparent 98%, #007E40 0%);
		font-size: 0.933rem;
		letter-spacing: 0;
	}
	#contents .kpd-park-ocean-sec2-img .text-box h3 {
		margin-top: 1vw;
		font-size: 0.866rem;
	}
	#contents .kpd-park-ocean-sec2-img .text-box h3 .small {
		font-size: 0.533rem;
	}	
	
	
	
	/****************************************************************************************************
	life
	****************************************************************************************************/
	#kpd-life-sec1 {
		background-size: 220vw 100%;
	}
	#kpd-life-sec2 {
		background-size: 220vw 100%;
	}
	#kpd-life-sec3 {
		background-size: 220vw 100%;
	}
	#kpd-life-sec1 {
		padding: 10vw 0 0 0;
	}
	#kpd-life-sec1-inner {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 6vw;
	}
	#kpd-life-sec1-img img {
		width: 100vw;
		height: 60vw;
	}
	#kpd-life-sec1-text {
		position: static;
		width: 92vw;
		margin: auto;
		color: #000;
		text-align: center;
	}
	#kpd-life-sec1-text h1 {
		color: #006BAA;
		font-size: 1.6rem;
		letter-spacing: 0.1em;
	}
	#kpd-life-sec1-text p {
		margin-top: 4vw;
		font-size: 1.00rem;
	}
	
	#kpd-life-sec2 {
		padding: 10vw 4vw 10vw 4vw;
	}
	#kpd-life-sec2-inner {
		gap: 2vw;
		width: 100%;
	}
	.kpd-life-sec2-img {
		width: 45vw;
	}
	.kpd-life-sec2-img.flex {
		width: 100%;
	}
	.kpd-life-sec2-img.flex figure {
		width: 100%;
	}
	#gourme + .kpd-life-sec2-right {
		order: 1;
	}
	#gourme {
		order: 2;
	}
	#landmade {
		order: 3;
	}
	#landmade + .kpd-life-sec2-right {
		order: 4;
	}
	#gourme figure img {
		height: 80vw;
	}
	#landmade figure img {
		height: 45vw;
	}
	.kpd-life-sec2-right {
		gap: 2vw;
		width: 100%;
	}
	#kpd-life-sec2 h2,
	#kpd-life-sec3 h2 {
		margin-bottom: 2vw;
		font-size: 1.2rem;
		letter-spacing: 0;
	}
	#kpd-life-sec2 p,
	#kpd-life-sec3 p {
		background: linear-gradient(transparent 98%, #006BAA 0%);
		font-size: 0.933rem;
		letter-spacing: 0;
	}
	#contents .kpd-life-sec2-img .text-box h3,
	#contents .kpd-life-sec3-img .text-box h3 {
		margin-top: 1vw;
		font-size: 0.866rem;
	}
	#contents .kpd-life-sec2-img .text-box h3 .small,
	#contents .kpd-life-sec3-img .text-box h3 .small {
		font-size: 0.533rem;
	}
	#contents .kpd-life-sec2-img .text-box.right h3 {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
	}
	.indent70 {
		font-size: 70%;
	}
	#kpd-life-sec2-inner2 {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		width: 100vw;
		margin: 4vw -4vw 0 -4vw;
	}
	#kpd-life-sec2-inner2 figure {
		width: 100%;
	}
	#kpd-life-sec2-inner2 figure img {
		height: auto;
	}
	
	#kpd-life-sec3 {
		padding: 10vw 4vw 10vw 4vw;
	}
	#kpd-life-sec3-inner {
		gap: 4vw;
		width: 100%;
	}
	.kpd-life-sec3-left {
		gap: 2vw;
		width: 100%;
	}
	#kpd-life-sec3-text {
		width: 100%;
		margin-left: 0;
	}
	.kpd-life-sec3-imgL figure img {
		height: 60vw;
	}
	.kpd-life-sec3-right {
		gap: 2vw;
		width: 100%;
	}
	.kpd-life-sec3-right > * {
		width: 45vw;
	}
	
	
	
	/****************************************************************************************************
	residence
	****************************************************************************************************/
	#kpd-residence-sec1 {
		background-size: 220vw 100%;
	}
	#kpd-residence-sec2 {
		background-size: 220vw 100%;
	}
	#kpd-residence-sec3 {
		background: url(../img/kpd-residence/sec3-bg.jpg) no-repeat center 0;
		background-size: 220vw 100%;
	}
	#kpd-residence-sec1-inner {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 6vw;
	}
	#kpd-residence-sec1-img img {
		width: 100vw;
		height: 100vw;
	}
	#kpd-residence-sec1-text {
		width: 100vw;
		margin: auto;
		padding: 10vw 4vw 0 4vw;
		order: 0;
	}
	#kpd-residence-sec1-text h1 {
		font-size: 1.6rem;
		letter-spacing: 0.1em;
	}
	#kpd-residence-sec1-text p {
		margin-top: 4vw;
		font-size: 1.00rem;
	}
	
	#kpd-residence-sec2 {
		padding: 0 0 10vw 0;
	}
	#kpd-residence-sec2-full-img figure img {
		height: 80vw;
	}
	#kpd-residence-sec2-full-text {
		position: static;
		width: 100%;
		padding: 4vw;
	}
	
	#kpd-residence-sec2 h2,
	#kpd-residence-sec3 h2 {
		margin-bottom: 2vw;
		font-size: 1.2rem;
		letter-spacing: 0;
	}
	#kpd-residence-sec2 p,
	#kpd-residence-sec3 p {
		background: linear-gradient(transparent 98%, #A47840 0%);
		font-size: 0.933rem;
		letter-spacing: 0;
	}
	
	#kpd-residence-sec2-inner {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 4vw;
		width: 92vw;
		margin-top: 10vw;
	}
	#kpd-residence-sec2-inner-left {
		gap: 2vw;
		width: 100%;
	}
	#kpd-residence-sec2-inner-right {
		padding: 4vw;
	}
	#kpd-residence-sec2-kitchen-ttl div {
		font-size: 1.0rem;
	}
	#kpd-residence-sec2-kitchen-ttl h3 {
		font-size: 1.6rem;
	}
	#kpd-residence-sec2-kitchen-item {
		gap: 2vw;
		width: 100%;
		margin-top: 2vw;
	}
	.kpd-residence-sec2-kitchen-item {
		width: 41.0vw;
	}
	#kpd-residence-sec2-kitchen-item h4 {
		font-size: 0.866rem;
	}
	#kpd-residence-sec2-kitchen-item p.small {
		font-size: 0.6rem;
	}
	
	
	#kpd-residence-sec3 {
		margin-top: 0;
		padding: 10vw 0 10vw 0;
	}
	#kpd-residence-sec3-inner {
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 4vw;
		width: 92vw;
	}
	#kpd-residence-sec3-inner-left {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 2vw;
		width: 100%;
	}
	.kpd-residence-sec3-img .text-box {
		top: 5vw;
		font-size: 0.733rem;
	}
	.kpd-residence-sec3-img:nth-of-type(2),
	.kpd-residence-sec3-img:nth-of-type(3) {
		width: 45vw;
	}
	#kpd-residence-sec3-inner-right {
		text-align: left;
	}
	#kpd-residence-sec3-text {
		margin-bottom: 2vw;
	}
	#kpd-residence-sec3-text p {
		letter-spacing: 0.05em;
	}
	
	.kpd-residence-sec3-img2 figure {
		width: 100%;
	}
}