@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　3ldk
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
:root {
  --ldk3: #7A9AA1;
  --ldk3_2: #d3dfe0;
	--ldk3_3: #aac9ce;
  --ldk4: #A9926C;
  --ldk4_2: #edd9c5;
	--ldk4_3: #ccb69b;
}


/* intro
-----------------------------------------------------------------*/
.intro{
	padding: 180px 0 0;
	background: url(../img/common/cont_upper_bg.png) no-repeat left top var(--light);
	background-size: 100% auto;
}
.intro h2{
	margin-bottom: 120px;
	text-align: center;
	font-size: 4.5rem;
	font-weight: normal;
	line-height: 1.5;
	letter-spacing: .4em;
}
.intro .graph{
	position: relative;
	max-width: 1000px;
	margin: 0 auto 100px;
}
.intro .graph .caption{
	display: block;
	margin-top: 10px;
	text-align: right;
}
.intro .graph + .txt-lead{
	margin-bottom: 180px;
	text-align: center;
	font-size: 4.5rem;
	font-weight: normal;
	line-height: 1.5;	
}
.intro .column-area{
	padding: 180px 0;
	background-color: #E6E6E6;
}
.intro .column{
	background-color: #F1F1F1;
}
.intro .column + .column{
	margin-top: 80px;
}
.intro .column .txt-lead{
	margin-bottom: 15px;
	font-weight: normal;
	font-size: 3.4rem;
	letter-spacing: .05em;	
}
.intro .column .txt-lead span{
	font-size: 85%;
}
.intro .column .note{
	width: fit-content;
	margin: 30px auto 0;
	font-size: 1.2rem;
	text-align: left;
}
.intro .column01 dl{
	display: flex;
	justify-content: space-between;
	margin: 50px 0;
}
.intro .column01 dl > div{
	max-width: 300px;
	width: calc((100% - 40px)/2);
}
.intro .column01 dl dt{
	padding-bottom: 10px;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--gold);
	font-size: 2.4rem;
	line-height: 1.5;
}
.intro .column01 dl dd{
	text-align: left;
}
.intro .column01 dl .ico{
	margin-top: 20px;
}
.intro .column02 .txt + .txt{
	margin: 20px 0 50px;
}
.intro .column02 .graph{
	margin: 40px 0 0;
}


/* features
-----------------------------------------------------------------*/
.features{
	padding: 0 0 180px;
}
.section-ttl{
	margin-bottom: 120px;
	padding: 100px 20px;
	background: var(--gold);
	color: var(--light);
	text-align: center;
	font-size: 5rem;
	line-height: 1.5;
	font-weight: normal;
}
.section-ttl .en{
	font-size: 120%;
}
.features .ldk3{
	margin-bottom: 150px;
}
.features .feature .layout-box{
	align-items: flex-end;
}
.features .feature .layout-area{
	max-width: 600px;
}
.layout-hd{
	text-align: center;
	line-height: 1;
}
.features .layout-hd{
	max-width: 550px;
	margin-inline: auto;
}
.layout-hd h3{
	margin-bottom: 15px;
	padding: 10px;
	font-size: 2.5rem;
	font-weight: normal;
	color: var(--light);
}
.ldk3 .layout-hd h3{
	background: var(--ldk3);
}
.ldk4 .layout-hd h3{
	background: var(--ldk4);
}
.layout-hd h3 strong{
	padding-right: 2px;
	font-weight: normal;
	font-size: 150%;
}
.layout-hd .layout{
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid ;
	font-size: 2.7rem;
}
.ldk3 .layout-hd .layout{
	border-color: var(--ldk3);
}
.ldk4 .layout-hd .layout{
	border-color: var(--ldk4);
}
.layout-hd .layout strong{
	font-weight: normal;
	font-size: 200%;
}
.layout-hd .area{
	font-size: 2.8rem;
}
.layout-hd .area small{
	display: inline-block;
	margin-right: 15px;
	font-size: 2rem;
}
.layout-hd .area strong{
	font-weight: normal;
	font-size: 200%;
}
.features .feature .layout-area .pic{
	margin-top: 50px;
}
.features .feature .point-slider{
	max-width: 500px;
	width: calc(50% - 20px);
}
.features .feature .point-list .slider-item{
	padding: 25px 30px;
}
.features .ldk3 .point-list .slider-item{
	background: var(--ldk3_2);
}
.features .ldk4 .point-list .slider-item{
	background: var(--ldk4_2);
}
.features .feature .point-list .slider-item.has-ico{
	position: relative;
}
.features .ldk3 .point-list .slider-item.has-ico{
	background: var(--ldk3_3);
}
.features .ldk4 .point-list .slider-item.has-ico{
	background: var(--ldk4_3);
}
.features .feature .point-list .slider-item.has-ico .ico{
	position: absolute;
	right: 20px;
	top: 20px;
}
.features .feature .point-list li:nth-child(n+2){
	margin-top: 30px;
}
.features .feature .point-list h3{
	margin-bottom: 20px;
	line-height: 1;
	letter-spacing: .1em;
	font-weight: normal;
	font-size: 1.8rem;
}
.features .ldk3 .point-list h3{
	color: var(--ldk3);
}
.features .ldk4 .point-list h3{
	color: var(--ldk4);
}
.features .feature .point-list h3 .num{
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 100vmax;
	color: var(--light);
	line-height: 30px;
	text-align: center;
	font-size: 2.2rem;
}
.features .ldk3 .point-list h3 .num{
	background: var(--ldk3);
}
.features .ldk4 .point-list h3 .num{
	background: var(--ldk4);
}
.features .feature .point-list .txt-lead{
	font-size: 2.2rem;
}
.features .feature .point-list li:first-child .txt-lead{
	font-size: 2.8rem;
	line-height: 1.4;
}
.features .feature .point-list li:first-child .txt-lead strong{
	font-weight: normal;
	font-size: 120%;
}
.features .feature .point-list .txt{
	margin-top: 10px;
	font-size: 1.5rem;
}


/* choice
-----------------------------------------------------------------*/
@keyframes blinking {
  0%   { opacity: 0; }
  30% { opacity: 1; }
	70% { opacity: 1; }
	100% { opacity: 0; }
}

.choice{
	padding: 0 0 180px;
}
.choice .note-txt{
	margin-bottom: 50px;
	text-align: center;
	font-size: 2.4rem;
	animation: blinking 3s ease-in-out infinite alternate;
}
.nav-layout{
	display: flex;
	justify-content: space-between;
	max-width: 1300px;
	margin: 0 auto 95px;
}
.nav-layout li{
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 630px;
	width: calc(50% - 10px);
	height: 110px;
	cursor: pointer;
	color: var(--light);
	font-size: 3rem;
	transition: .3s;
}
.nav-layout li strong{
	font-weight: normal;
	font-size: 150%;
}
.nav-layout li strong span{
	font-size: 80%;
}
.nav-layout li:nth-child(1){
	background: var(--ldk3_2);
}
.nav-layout li:nth-child(2){
	background: var(--ldk4_2);
}
.nav-layout li:nth-child(1):hover,
.nav-layout li:nth-child(1).current{
	background: var(--ldk3);
}
.nav-layout li:nth-child(2):hover,
.nav-layout li:nth-child(2).current{
	background: var(--ldk4);
}
.case-nav{
	display: flex;
	justify-content: space-between;
	max-width: 1300px;
	margin: 0 auto 145px;	
}
.case-nav li{
	max-width: 420px;
	width: calc((100% - 30px)/3);
	padding: 30px 20px;
	cursor: pointer;
	text-align: center;
	line-height: 1;
	font-size: 3rem;
	letter-spacing: .2em;
	transition: .3s;
}
.ldk3 .case-nav li{
	background: var(--ldk3_2);	
}
.ldk4 .case-nav li{
	background: var(--ldk4_2);
}
.ldk3 .case-nav li:hover,
.ldk3 .case-nav li.current{
	background: var(--ldk3_3);	
}
.ldk4 .case-nav li:hover,
.ldk4 .case-nav li.current{
	background: var(--ldk4_3);
}
.case-nav span{
	display: block;
}
.case-nav span:nth-child(1){
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid;
}
.ldk3 .case-nav span:nth-child(1){
	color: var(--ldk3);
	border-color: var(--ldk3);
}
.ldk4 .case-nav span:nth-child(1){
	color: var(--ldk4);
	border-color: var(--ldk4);
}
.choice .layout-hd{
	position: relative;
	z-index: 100;
	max-width: 450px;
	margin: 0 auto;
}
.choice .case-cont{
	position: relative;
	margin-top: -200px;
	padding-top: 250px;
}
.choice .case-cont + .case-cont{
	display: none;
}
.choice .case-cont .ico{
	position: absolute;
	top: -50px;
	right: 0;
}
.choice .other-features{
	padding: 250px 0 0;
}
.choice .other-features h3{
	margin-bottom: 80px;
	font-size: 5rem;
	line-height: 1.6;
	font-weight: normal;
	text-align: center;
}
.choice .other-features h3 small{
	display: block;
	font-size: 80%;
}
.choice .other-features-list{
	display: flex;
	justify-content: space-between;
}
.choice .other-features-list li{
	max-width: 334px;
	width: calc((100% - 30px)/4);
}
.choice .other-features-list .pic{
	position: relative;
}
.choice .other-features-list .pic .caption{
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: var(--light);
}
.choice .other-features-list h4{
	margin-top: 15px;
	text-align: center;
	font-weight: normal;
	font-size: 2.6rem;
	letter-spacing: .05em;
}

.choice .ldk4{
	display: none;
}
.choice .ldk4 .case02{
	padding-top: 100px;
}
.choice .ldk4 .case03{
	padding-top: 50px;
}
.choice .ldk3 .case01 .ico{
	transform: translate(-80px, -30px);
}
.choice .ldk3 .case02 .ico{
	transform: translate(-60px, 0);
}
.choice .ldk3 .case03 .ico{
	transform: translate(-60px, 0);
}
.choice .ldk4 .case01 .ico{
	transform: translate(-100px, 20px);
}
.choice .ldk4 .case02 .ico{
	transform: translate(-80px, 30px);
}
.choice .ldk4 .case03 .ico{
	transform: translate(-70px, 0);
}











/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	.page-ttl h1{
		z-index: 100;
	}
	.page-ttl .pic{
		width: 100%;
		overflow: hidden;
	}
	.page-ttl .pic img{
		position: relative;
		display: block;
		max-width: none;
		width: auto;
		height: 100vh;
		object-fit: none;
		transition: 30s;
		transition-timing-function: linear;
	}
	.page-ttl.start .pic img{
		transform: translateX(calc(-100% + 100vw));
	}
	

/* intro
-----------------------------------------------------------------*/
	.intro{
		padding: 60px 0 0;
	}
	.intro h2{
		margin-bottom: 30px;
		font-size: 2.2rem;
		letter-spacing: .15em;
	}
	.intro .graph{
		margin: 0 auto 50px;
	}
	.intro .graph + .txt-lead{
		margin-bottom: 60px;
		font-size: 2.2rem;
		letter-spacing: .15em;
	}
	.intro .column{
		background-image: url(../img/common/bg_column2_sp.jpg);
		background-position: center top;
	}
	.intro .column-area{
		padding: 60px 0;
	}
	.intro .column + .column{
		margin-top: 40px;
	}
	.intro .column .txt-lead{
		margin-bottom: 15px;
		font-size: 1.8rem;
	}
	.intro .column .txt{
		text-align: justify;
	}
	.intro .column01 dl{
		display: block;
		margin: 30px 0;
	}
	.intro .column01 dl > div{
		width: 100%;
		margin-inline: auto;
	}
	.intro .column01 dl > div:nth-child(n+2){
		margin-top: 30px;
	}
	.intro .column01 dl dt{
		font-size: 1.8rem;
	}
	.intro .column01 dl dd{
		text-align: left;
	}
	.intro .column01 dl .ico{
		margin-top: 20px;
	}
	.intro .column02 .txt + .txt{
		margin: 20px 0 50px;
	}
	.intro .column02 .graph{
		width: calc(100% + 20px);
		margin: 20px 0 0;
		padding-bottom: 15px;
		overflow: auto;
		text-align: center;
	}
	.intro .column02 .graph > img{
		max-width: none;
		width: 500px;
		margin-right: 20px;
	}
	.intro .column02 .graph .swipe{
		position: absolute;
		left: 44vw;
		top: 50%;
		transform: translate(-50%,-50%);
		cursor: pointer;
	}

/* features
-----------------------------------------------------------------*/
	.features{
		padding: 0 0 60px;
	}
	.section-ttl{
		margin-bottom: 50px;
		padding: 30px 20px;
		font-size: 3rem;
		line-height: 1.4;
	}
	.features .ldk3{
		margin-bottom: 60px;
	}
	.features .feature .layout-box{
		display: block;
	}
	.features .feature .layout-area{
		margin-bottom: 20px;
	}
	.features .layout-hd{
		max-width: 280px;
	}
	.layout-hd h3{
		font-size: 2rem;
	}
	.layout-hd .layout{
		font-size: 1.8rem;
	}
	.layout-hd .area{
		font-size: 1.8rem;
	}
	.layout-hd .area small{
		margin-right: 10px;
		font-size: 1.3rem;
	}
	.features .feature .layout-area .pic{
		margin-top: 30px;
		text-align: center;
	}
	.features .feature .layout-area .pic img{
		width: auto;
		max-height: calc(100vh - 280px);
	}
	.features .feature .point-slider{
		position: relative;
		width: calc(100% + 30px);
		overflow: hidden;
	}
	.features .feature .point-slider .swipe{
		position: absolute;
		left: 44vw;
		top: 5px;
		z-index: 100;
		transform: translate(-50%,0);
		cursor: pointer;
		width: 60px;
	}
	.features .feature .point-list{
		width: 170vw;
	}
	.features .feature .point-list .slider-item{
		padding: 20px;
		margin-right: 10px;
		min-height: 230px;
	}
	.features .feature.ldk4 .point-list .slider-item{
		min-height: 250px;
	}
	.features .feature .point-list .slider-item.has-ico .ico{
		right: 15px;
		top: 15px;
		width: 80px;
	}
	.features .feature .point-list li:nth-child(n+2){
		margin-top: 0;
	}
	.features .feature .point-list h3{
		margin-bottom: 10px;
		font-size: 1.8rem;
	}
	.features .feature .point-list h3 .num{
		width: 26px;
		height: 26px;
		padding-left: 2px;
		line-height: 26px;
		font-size: 2rem;
	}
	.features .feature .point-list .txt-lead{
		font-size: 1.8rem;
	}
	.features .feature .point-list li:first-child .txt-lead{
		padding-top: 10px;
		font-size: 2rem;
		line-height: 1.4;
	}
	.features .feature .point-list .txt{
		font-size: 1.3rem;
	}


/* choice
-----------------------------------------------------------------*/
	.choice{
		padding: 0 0 60px;
	}
	.choice .note-txt{
		margin-bottom: 30px;
		font-size: 1.6rem;
	}
	.layout-cont-hd{
		display: flex;
		flex-direction: column-reverse;
	}
	.nav-layout{
		margin: 0 auto 40px;
	}
	.nav-layout li{
		width: calc(50% - 5px);
		height: 60px;
		font-size: 2rem;
	}
	.nav-layout li strong{
		padding-right: 2px;
	}
	.nav-layout li:nth-child(1):hover{
		background: var(--ldk3_2);
	}
	.nav-layout li:nth-child(1).current{
		background: var(--ldk3);
	}
	.nav-layout li:nth-child(2):hover{
		background: var(--ldk4_2);
	}
	.nav-layout li:nth-child(2).current{
		background: var(--ldk4);
	}
	.case-nav{
		display: block;
		max-width: 280px;
		margin: 40px auto 0;	
	}
	.case-nav li{
		display: flex;
		width: 100%;
		padding: 20px;
		text-align: left;
		font-size: 1.6rem;
		letter-spacing: .1em;
	}
	.case-nav li:nth-child(n+2){
		margin-top: 5px;
	}
	.ldk3 .case-nav li:hover{
		background: var(--ldk3_2);
	}
	.ldk3 .case-nav li.current{
		background: var(--ldk3_3);	
	}
	.ldk4 .case-nav li:hover{
		background: var(--ldk4_2);
	}
	.ldk4 .case-nav li.current{
		background: var(--ldk4_3);
	}
	.case-nav span:nth-child(1){
		padding: 0 15px 0 0;
		margin: 0 15px 0 0;
		border-bottom: none;
		border-right: 1px solid;
	}
	.choice .layout-hd{
		max-width: 280px;
	}
	.choice .case-cont{
		margin-top: 80px;
		padding-top: 0;
	}
	.choice .case-cont .ico{
		position: absolute;
		top: -80px;
		right: 0;
	}
	.choice .case-cont .ico img{
		width: auto;
		height: 100px;
	}
	.choice .other-features{
		padding: 80px 0 0;
	}
	.choice .other-features h3{
		margin-bottom: 30px;
		font-size: 2.4rem;
	}
	.choice .other-features h3 small{
		display: block;
		font-size: 80%;
	}
	.choice .other-features-list{
		flex-wrap: wrap;
	}
	.choice .other-features-list li{
		max-width: none;
		width: calc(50% - 5px);
	}
	.choice .other-features-list li:nth-child(n+3){
		margin-top: 20px;
	}
	.choice .other-features-list .pic .caption{
		right: 5px;
		bottom: 2px;
	}
	.choice .other-features-list h4{
		margin-top: 10px;
		font-size: 1.6rem;
		line-height: 1.5;
	}
	
	.choice .ldk4{
		display: none;
	}
	.choice .ldk4 .case02{
		padding-top: 0;
	}
	.choice .ldk4 .case03{
		padding-top: 0;
	}
	.choice .ldk3 .case01 .ico{
		transform: translate(15px, -30px);
	}
	.choice .ldk3 .case02 .ico{
		transform: translate(15px, -30px);
	}
	.choice .ldk3 .case03 .ico{
		transform: translate(15px, -30px);
	}
	.choice .ldk4 .case01 .ico{
		transform: translate(15px, -30px);
	}
	.choice .ldk4 .case02 .ico{
		transform: translate(15px, 10px);
	}
	.choice .ldk4 .case03 .ico{
		transform: translate(5px, 20px);
	}

}