@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　kips
 */

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

/* kv
-----------------------------------------------------------------*/
.page-lower-ttl{
	height: 680px;
	padding-top: 140px;
}
.page-lower-ttl::after{
	height: 680px;
  background-image:url(../image/bg_page_ttl_pc.jpg);  
}
.page-lower-ttl h1{
	display: block;
	width:auto;
	height: auto;
	max-width: none;
	margin-bottom: 145px;
	background: transparent;
}
.page-lower-ttl::before {
    height: 475px;
}
.page-lower-ttl .about{
	position: absolute;
	right: 0;
	bottom: 0;
	z-index:100;
	width: 50%;
	background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0.9) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0.9) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0.9) 100%);
}
.page-lower-ttl .about-inner{
	position: relative;
	max-width: 695px;
	padding: 40px 20px 0 5%;
}
.page-lower-ttl .about h2{
	position: absolute;
	left:1px;
	top:0;
	transform: translateX(-100%);
	padding: 30px 10px 30px 40px;
	background: rgba(255,255,255,.9);	
	border-radius: 10px 0 0 10px;
	font-size: 1.8rem;
	line-height: 1.2;
	color: #0267B7;
}
.page-lower-ttl .about .card{
	position: absolute;
	right: 0;
	top: -30px;
}
.page-lower-ttl .about .txt{
	margin-bottom: 15px;
	font-size: 1.5rem;
}
.page-lower-ttl .about .btn-list{
	display: flex;
	justify-content: space-between;
	max-width: 610px;
}
.page-lower-ttl .about .btn-list li{
	max-width: 300px;
	width: calc(50% - 5px);
}
.page-lower-ttl .about .btn-list li a{
	display: block;
	padding:10px 5px;
	border-radius: 50px;
	border: 2px solid #61B32B;
	text-align:center;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0;
}
.page-lower-ttl .about .btn-list li a[target="_blank"] span{
	padding-right: 15px;
	background: no-repeat right center;
	background-size: 10px auto;
}
.page-lower-ttl .about .btn-list li:nth-child(1) a{
	background: #61B32B;
	color: #FFF;
}
.page-lower-ttl .about .btn-list li:nth-child(1) a span{
	background-image:url(../../common/image/ico_blank_w.png);
}
.page-lower-ttl .about .btn-list li:nth-child(2) a{
	background: #FFF;
	color: #61B32B;
}
.page-lower-ttl .about .btn-list li:nth-child(2) a span{
	background-image:url(../../common/image/ico_blank_g.png);
}

@media screen and (max-width: 1300px) {
	.page-lower-ttl .about .card{
		width: 14vw;
	}	
}


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* page-nav
-----------------------------------------------------------------*/
.page-nav{
	padding: 90px 0 100px;
}
.page-nav ul{
	max-width: 1200px;
	margin: 0 auto;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.page-nav ul li{
	max-width: 190px;
	width: calc((100% - 50px)/6);
}
.page-nav ul li a{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 15px 5px 45px; 
	border-radius: 10px;
}
.page-nav ul li a span{
	display: block;
	text-align: center;
	padding:0;
	line-height: 1.3;
}
.page-nav ul li:last-child a span{
	padding-top: 0.8em;
}
.page-nav ul li a span::before{
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translate(-50%,0);
}
.page-nav ul li a:hover span::before{
	transform: translate(-50%,5px);
}


/*  kips-sec
-----------------------------------------------------------------*/
.kips-sec{
	padding: 20px 0 100px;
}
.kips-sec h2{
	margin-bottom: 65px;
	font-size: 2.8rem;
	color: #0267B7;
}
.kips-sec .point-box{
	position: relative;
	padding: 60px 5% 20px;
	border-radius: 10px;
	background: #0267B7;
	color: #FFF;
}
.kips-sec .point-box h3{
	position: absolute;
	left: 0;
	top: 0;
  z-index: 10;
	transform: translate(-20px,-50%);
	padding: 16px 20px 16px 28px;
	background: #FFF;
	border: 2px solid #0267B7;
	box-shadow: 8px 5px rgba(1,82,147,.5);
	line-height: 1;
	font-size: 2.8rem;
	font-weight: 700;
	color: #0267B7;
	letter-spacing: 0;
}
.kips-sec .point-box h3 small{
	font-size: 2.4rem;
}
.kips-sec .point-box h3 span{
	color: #231815;
	font-size: 2.4rem;
	font-weight: 600;	
}
.kips-sec .point-box h3::after{
	position: absolute;
	left: 0;
	bottom: -20px;
	display: block;
	content: "";
	width: 20px;
	height: 20px;
	background:url(../image/ico_top.png) no-repeat;
	background-size: 100% auto;
}
.kips-sec .point-box .txt-point{
  position: relative;
  z-index: 10; 
}
.kips-sec .point-box .notes{
  position: relative;
  z-index: 10;
	margin-top: 10px;
}
.kips-sec .point-box .notes li{
	text-indent: -1em;
	padding-left: 1em;
	font-size: 1.3rem;
}
.kips-sec .point-box .coin{
	position: absolute;
	right: 0;
	bottom: 0;
}
.kips-sec .point-box .coin img{
	border-radius: 0 0 10px 0;
}

.kips-sec .target-area-list{
	margin-top: 40px;		
}
.kips-sec .target-area-list h3{
	margin-bottom: 15px;
	font-size: 2.2rem;
	color: #0267B7;
}
.kips-sec .target-area-list dl > div{
	display: flex;
	align-items: center;
	padding: 40px 0;
	border-top: 1px solid #DDDFE2;
}
.kips-sec .target-area-list dl > div:last-child{
	border-bottom: 1px solid #DDDFE2;
}
.kips-sec .target-area-list dl dt{
	flex-shrink: 0;
	width: 190px;
	padding: 0 15px;
	font-weight: bold;
	font-size: 1.6rem;
}
.kips-sec .target-area-list dl dd{
	width: calc(100% - 190px);
}
.kips-sec .target-area-list ul{
	display: flex;
	flex-wrap: wrap;
}
.kips-sec .target-area-list > ul{
	padding: 40px 0;
	border: solid #DDDFE2;
	border-width: 1px 0;
}
.kips-sec .target-area-list ul li{
	width: 50%;
	padding-right: 15px;
	font-size: 1.6rem;
}
.kips-sec .target-area-list ul li:nth-child(n+3){
	margin-top: 5px;
}
.kips-sec .target-area-list ul li a{
	transition: .3s;
}
.kips-sec .target-area-list ul li a:hover{
	opacity:.7;
}
.kips-sec .target-area-list ul li a[target="_blank"]{
	padding-right: 15px;
	background:url(../../common/image/ico_blank.png) no-repeat right center;
	background-size: 10px auto;
}

.kips-sec .point-box+.btn-ico-base{
	max-width: 420px;
	margin: 55px auto 0;
}

/* sec02 */
.kips-sec.sec02 .layout-box > div{
	width: 48%;
}
.kips-sec.sec02 h3:nth-of-type(1){
  max-width: 605px;
  width: 52%; 
}
.kips-sec.sec02 h3.baloon{
	left: 54%;
}
.kips-sec.sec02 h3.baloon::after{
	left: 38px;
	bottom: -18px;
	width: 0;
	height: 0;
	background: none;
	border: solid transparent;
	border-width: 18px;
	border-right-color: #FFF;
}
.kips-sec.sec02 .target-area-list ul li{
	width: 33.33%;
}

/* sec03 */
.kips-sec.sec03 h3 img{
	margin: 0 10px;
}

/* sec04 */
.kips-sec.sec04 h3,
.kips-sec.sec05 h3{
	padding: 12px 20px 12px 28px;
}
.kips-sec.sec04 h3 img,
.kips-sec.sec05 h3 img{
	margin: 0 10px 0 0;
	vertical-align: middle;
}

/* sec05 */
.kips-sec.sec05 .btn-ico-base a{
	height: 70px;
	padding-top: 12px;
	border-radius: 35px;
	line-height: 1.4;
}

/* sec06 */
.kips-sec.sec06{
	padding-bottom: 180px;
}
.kips-sec.sec06 .point-box .txt{
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5;
	margin-top: 15px;
}
.kips-sec.sec06 .point-box .notes{
	margin-top: 5px;
}
.kips-sec.sec06 .target-area-list{
	margin-bottom: 130px;
}
.kips-sec.sec06 .target-area-list ul li{
	width: 33.33%;
}
.kips-sec.sec06 .kips-inq{
	display: flex;
	align-items: center;
	padding:50px 5%;
	border: 4px solid #EEF0F6;
	border-radius: 10px;
}
.kips-sec.sec06 .kips-inq h3{
	width: 42%;
	color: #0267B7;
	padding-right: 15px;
}
.kips-sec.sec06 .kips-inq h3 .ja{
	font-size: 3.2rem;
	line-height:1.3;
}
.kips-sec.sec06 .kips-inq h3 .en{
	display: block;
	margin-top: 5px;
	font-size: 1.4rem;	
}
.kips-sec.sec06 .kips-inq .txt-area{
	width: 58%;
	padding: 0 4%;
	border-left: 1px solid #DDDFE2;
}
.kips-sec.sec06 .kips-inq h4{
	font-size: 1.8rem;
}
.kips-sec.sec06 .kips-inq .tel{
	font-size: 4.8rem;
	line-height: 1;
	font-weight: bold;
}
.kips-sec.sec06 .kips-inq .tel a{
	pointer-events:none;
	color: #0267B7;	
}
.kips-sec.sec06 .kips-inq .businesshour{
	font-size: 1.8rem;
	font-weight: 500;
}
.kips-sec.sec06 .kips-inq .businesshour strong{
	padding-right: 7px;
	font-size: 1.6rem;
	color: #0267B7;
}
.kips-sec.sec06 .kips-inq .businesshour span{
	padding-right: 5px;
	font-weight: bold;
}
.kips-sec.sec06 .kips-inq .note{
	font-size: 1.3rem;
}
.kips-sec.sec06 .kips-inq .btn{
	margin-top: 15px;
}
.kips-sec.sec06 .kips-inq .btn a{
	display: block;
	max-width: 300px;
	padding: 10px 5px;
	border-radius: 50px;
	background: #61b32b;
	color: #FFF;
	font-size: 1.5rem;
	font-weight: 500;
	text-align: center;
	transition: .3s;
}
.kips-sec.sec06 .kips-inq .btn a[target="_blank"] span{
	padding-right: 15px;
	background:url(../../common/image/ico_blank_w.png) no-repeat right center;
	background-size: 10px auto;
}
.kips-sec.sec06 .kips-inq .btn a:hover{
	opacity: .7;
}











/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

/* kv
-----------------------------------------------------------------*/
	.page-lower-ttl{
		height: auto;
		padding-top: 40px;
	}
	.page-lower-ttl::after{
		height: 220px;
		background-image:url(../image/bg_page_ttl_sp.jpg);  
	}
	.page-lower-ttl h1{
		margin-bottom: 45px;
	}
	#Page .page-lower-ttl h1 img{
		width: auto;
		height: 135px;
	}
	.page-lower-ttl::before {
			height: 255px;
	}
	.page-lower-ttl .about{
		position: relative;
		width: calc(100% - 20px);
		margin-left: 20px;
	}
	.page-lower-ttl .about-inner{
		max-width: none;
		padding: 20px 20px 0 0;
	}
	.page-lower-ttl .about h2{
		position: static;
		transform: none;
		margin-bottom: 10px;
		padding: 0 0 0 20px;
		background: none;	
		border-radius: 0;
		font-size: 1.5rem;
	}
	.page-lower-ttl .about .card{
		right: 15px;
		top: -30px;
		width:110px;
	}
	.page-lower-ttl .about .txt{
		padding-left: 20px;
		margin-bottom: 15px;
		font-size: 1.2rem;
	}
	.page-lower-ttl .about .btn-list{
		display: block;
		max-width: 300px;
		margin: 0 auto
	}
	.page-lower-ttl .about .btn-list li{
		width: 100%;
	}
	.page-lower-ttl .about .btn-list li:nth-child(n+2){
		margin-top: 10px;
	}
	.page-lower-ttl .about .btn-list li a{
		font-size: 1.2rem;
	}



/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* page-nav
-----------------------------------------------------------------*/
	.page-nav{
		padding: 50px 0 35px;
	}
	.page-nav ul li{
		max-width: 315px;
		width: 100%;
		margin:0 auto;
		text-align: center;
	}
	.page-nav ul li a{
		position: relative;
		width: 100%;
		height: 45px;
		padding: 16px 0 0; 
		border-radius: 23px;
	}
	.page-nav ul li a span{
		display: inline-block;
		padding:0;
		line-height: 1.3;
	}
	.page-nav ul li:last-child a span{
		padding-top: 0;
	}
	.page-nav ul li a span::before{
		position: absolute;
    top: 12px;
    left: 30px;
    width: 22px;
    height: 22px;
    margin-right: 0;
		transform: translate(0,0);
	}
	.page-nav ul li a:hover span::before{
		transform: translate(0,0);
	}


/*  kips-sec
-----------------------------------------------------------------*/
	.kips-sec{
		padding: 20px 0 40px;
	}
	.kips-sec h2{
		margin-bottom: 45px;
		font-size: 1.8rem;
	}
	.kips-sec .point-box{
		padding: 50px 15px 20px;
		border-radius: 5px;
	}
	.kips-sec .point-box h3{
		transform: translate(-10px,-50%);
		padding: 10px 10px 10px 15px;
		box-shadow: 5px 3px rgba(1,82,147,.5);
		font-size: 1.6rem;
		line-height: 1.2;
	}
	.kips-sec .point-box h3 small{
		font-size: 1.4rem;
	}
	.kips-sec .point-box h3 span{
		font-size: 1.4rem;
	}
	.kips-sec .point-box h3::after{
		bottom: -10px;
		width: 10px;
		height: 10px;
	}
	.kips-sec .point-box h3{
		z-index: 10;
	}
	.kips-sec .txt-point,
	.kips-sec .notes{
		position: relative;
		z-index: 10;
	}
	#Page .kips-sec .txt-point img{
		width: auto;
		height: 89px;
	}
	.kips-sec .point-box .notes{
		margin-top: 10px;
		width: calc(100% - 80px);
	}
	.kips-sec .point-box .notes li{
		font-size: 1.1rem;
	}
	.kips-sec .point-box .coin img{
		border-radius: 0 0 5px 0;
	}
	
	.kips-sec .target-area-list{
		margin-top: 20px;		
	}
	.kips-sec .target-area-list h3{
		margin-bottom: 5px;
		font-size: 1.6rem;
	}
	.kips-sec .target-area-list dl > div{
		padding: 20px 0;
	}
	.kips-sec .target-area-list dl dt{
		width: 75px;
		padding: 0 5px;
		font-size: 1.4rem;
	}
	.kips-sec .target-area-list dl dd{
		width: calc(100% - 75px);
	}
	.kips-sec .target-area-list ul{
		display: block;
	}
	.kips-sec .target-area-list > ul{
		padding: 20px 0;
	}
	.kips-sec .target-area-list ul li{
		width: 100%;
		padding-right: 0;
		font-size: 1.3rem;
	}
	.kips-sec .target-area-list ul li:nth-child(n+2){
		margin-top: 5px;
	}
	.kips-sec .target-area-list ul li a:hover{
		opacity:1;
	}
	
	.kips-sec .point-box+.btn-ico-base{
		max-width: 285px;
		margin: 25px auto 0;
	}

/* sec01 */
	.kips-sec .point-box .coin{
		width: 212px;
		right: -20px;
	}
/* sec02 */
	.kips-sec.sec02 .layout-box{
		display: block;
	}
	.kips-sec.sec02 .layout-box > div{
		width: 100%;
	}
  .kips-sec.sec02 h3:nth-of-type(1){
    max-width: none;
    width: auto; 
  }
	.kips-sec.sec02 h3.baloon{
		position:relative;
		left: 0;
		transform: none;
		width: 220px;
		margin:20px 0 25px;
	}
	.kips-sec.sec02 h3.baloon::after{
		left: 8px;
		bottom: -14px;
		background: none;
		border-width: 14px;
	}
	.kips-sec.sec02 .point-box .coin{
		width: 213px;
		right: -20px;
		bottom: 50%;
		transform: translateY(45%);
	}
	.kips-sec.sec02 .point-box .notes{
		width: 100%;
	}
	.kips-sec.sec02 .target-area-list ul li{
		width: 100%;
	}
	

/* sec03 */
	#Page .kips-sec.sec03 h3 img{
		margin: 0 0 0 5px;
		width: auto;
		height: 20px;
	}

/* sec04 */
	.kips-sec.sec04 h2,
	.kips-sec.sec05 h2,
	.kips-sec.sec06 h2{
		margin-bottom: 35px;
	}
	.kips-sec.sec04 .point-box,
	.kips-sec.sec05 .point-box,
	.kips-sec.sec06 .point-box{
		padding-top: 40px;
	}
	.kips-sec.sec04 h3,
	.kips-sec.sec05 h3{
		padding: 7px 10px 7px 15px;
	}
	.kips-sec.sec04 h3 img,
	.kips-sec.sec05 h3 img{
		margin: 0 5px 0 0;
	}
	#Page .kips-sec.sec04 h3 img{
		width: auto;
		height: 28px;
	}
	#Page .kips-sec.sec05 h3 img{
		width: auto;
		height: 30px;
	}
	#Page .kips-sec.sec04 .txt-point img,
	#Page .kips-sec.sec05 .txt-point img{
		height: 87px;
	}

/* sec05 */
	.kips-sec.sec05 .btn-ico-base a{
		height: 60px;
		border-radius: 30px;
	}

/* sec06 */
	.kips-sec.sec06{
		padding-bottom: 60px;
	}
	#Page .kips-sec.sec06 .txt-point img{
		height: 84px;
	}
	.kips-sec.sec06 .point-box .txt{
		width: calc(100% - 80px);
		font-size: 1.2rem;
	}
	.kips-sec.sec06 .target-area-list{
		margin-bottom: 50px;
	}
	.kips-sec.sec06 .target-area-list ul li{
		width: 100%;
	}
	.kips-sec.sec06 .kips-inq{
		display: block;
		padding:25px;
		border: 2px solid #EEF0F6;
		border-radius: 5px;
	}
	.kips-sec.sec06 .kips-inq h3{
		width: 100%;
		color: #0267B7;
		padding: 0 0 15px 0;
	}
	.kips-sec.sec06 .kips-inq h3 .ja{
		font-size: 2.2rem;
		line-height: 1.2;
	}
	.kips-sec.sec06 .kips-inq h3 .en{
		margin-top: 00;
		font-size: 1.1rem;	
	}
	.kips-sec.sec06 .kips-inq .txt-area{
		width: 100%;
		padding: 15px 0 0;
		border-top: 1px solid #DDDFE2;
		border-left: none;
	}
	.kips-sec.sec06 .kips-inq h4{
		font-size: 1.3rem;
	}
	.kips-sec.sec06 .kips-inq .tel{
		font-size: 3.1rem;
	}
	.kips-sec.sec06 .kips-inq .tel a{
		pointer-events:auto;
	}
	.kips-sec.sec06 .kips-inq .businesshour{
		font-size: 1.2rem;
	}
	.kips-sec.sec06 .kips-inq .businesshour strong{
		padding-right: 7px;
		font-size: 1.3rem;
	}
	.kips-sec.sec06 .kips-inq .businesshour span{
		font-size: 1.3rem;
	}
	.kips-sec.sec06 .kips-inq .note{
		font-size: 1.2rem;
		line-height: 1.5;
	}
	.kips-sec.sec06 .kips-inq .btn{
		margin-top: 15px;
	}
	.kips-sec.sec06 .kips-inq .btn a{
		margin: 0 auto;
		font-size: 1.3rem;
	}
	.kips-sec.sec06 .kips-inq .btn a:hover{
		opacity: 1;
	}


}