@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　residents
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/
.cont-nav{
  padding: 150px 0;
}


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

/* intro
-----------------------------------------------------------------*/
.intro{
  padding: 180px 0 130px;
  text-align: center;  
}
.intro .txt-lead{
  line-height: 2;  
}


/* residents
-----------------------------------------------------------------*/
.residents{
	position: relative;
	padding: 120px 0 140px;
	background: var(--bluebrand);
	color: var(--light);
	letter-spacing: .1em;
}
.residents a{
	color: var(--light);
}
.residents .inner{
	position: relative;
	z-index: 10;
}
.residents h2 .en{
	display: block;
	margin-bottom: 20px;
	font-size: 1.3rem;
}
.residents h2 .ja{
	display: block;
	font-size: 3rem;
}
.residents .site-list{
	display: flex;
	justify-content: space-between;
}
.residents .site-list li{
	max-width: 620px;
	width: calc(50% - 15px);
}
.residents .site-list .txt-area{
	position: relative;
	padding: 35px 10px 0;	
}
.residents .site-list h3{
	font-size: 2.2rem;
	line-height: 1.5;
}
.residents .site-list .txt{
	padding-right: 75px;
	line-height: 1.9;
}
.residents a .txt-area::after{
	position: absolute;
	right: 10px;
	top: 80px;
	display: block;
	width: 63px;
	height: 63px;
	border: 1px solid var(--light);
	border-radius: 100vmax;
	content: "";
	background: url(../img/common/arw_btn.svg) no-repeat center center var(--light);
	background-size: 6px auto;
	transition: .3s;		
}
.residents a[target="_blank"] .txt-area::after{
	background: url(../img/common/ico_blank.svg) no-repeat center center var(--light);
	background-size: 13px auto;
}
.residents a:hover .txt-area::after{
	background: url(../img/common/arw_btn_w.svg) no-repeat center center transparent;
	background-size: 6px auto;
}
.residents a[target="_blank"]:hover .txt-area::after{
	background: url(../img/common/ico_blank_w.svg) no-repeat center center transparent;
	background-size: 13px auto;
}

.residents .bg-slider-area{
	position: absolute;
	left: 0;
	top: 40%;
	width: 100%;
	overflow: hidden;
}
.residents .bg-slider{
	width: 2925px;
}


/* site
-----------------------------------------------------------------*/
.site{
	scroll-margin-top: 130px;
  padding: 180px 0 140px;
}
.site h2{
  margin-bottom: 55px;
  text-align: center;  
}

/* l-01 */
.site .l-01{
  margin-bottom: 80px;
  align-items: flex-start;
}
.site .l-01 .txt-area{
  width: 70%;  
}
.site .point-list{
  width: 25.8%;
}
.site .point-list li{
  padding: 35px 20px;
  border-radius: 10px;
  background: var(--bgblue);
  text-align: center;
}
.site .point-list li:nth-child(n+2){
  margin-top: 20px;  
}
.site .point-list .ico{
  margin-bottom: 10px;  
}
.site .point-list .ttl{
  color: var(--blue);
}

/* login */
.login{
  overflow: hidden;
  margin-bottom: 140px;
  border-radius: 10px;
  border: 2px solid var(--blue);  
}
.login .layout-box{
  max-width: 1090px;
  padding: 75px 20px 45px;
  margin-inline: auto; 
}
.login .layout-box .pic{
  width: 40%;  
}
.login .layout-box .txt-area{
  width: 51%;
  text-align: center;  
}
.login .layout-box .txt-area h3{
  margin-bottom: 20px;
  font-size: 2.2rem;  
}
.login .layout-box .txt-area .btn-base{
  max-width: 400px;
  margin: 0 auto 20px;  
}
.login .layout-box .txt-area .note{
  text-align: left;
}
.login .user{
  padding:35px 20px;
  background: var(--blue);
  text-align: center;
  color: var(--light);
  font-size: 2.2rem;
  font-weight: bold;    
}

/* l-02 */
.site .l-02{
  align-items: center;  
}
.site .l-02 .screen{
  width: 46.1%;  
}
.site .l-02 .screen-box{
  margin-bottom: 10px;
  padding: 50px 7%;
  background: var(--bgblue);
}
.site .l-02 .screen-box h3{
  margin-bottom: 20px;
  font-size: 2.2rem;
}
.site .l-02 .screen-box .txt{
  margin-bottom: 20px;
}
.site .l-02 .screen-box .pic{
  text-align: center;  
}
.site .l-02 .figure{
  width: 48.5%;
}

/* function
-----------------------------------------------------------------*/
.function{
  padding: 180px 0;
  background: var(--bgblue);
}
.function h2{
  margin-bottom: 55px;
  text-align: center;  
}
.function h2 .ja{
  margin-bottom: 5px;
  line-height: 1.6;  
}
.function-list > div{
  display: flex;
  justify-content: space-between;
  align-items: center;  
}
.function-list > div:nth-child(n+2){
  margin-top: 40px;  
}
.function-list dt{
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 180px;
  border-radius: 100vmax;
  background: var(--bluebrand);
    
}
.function-list dt h3{
  color: var(--light);
  text-align: center;
  line-height: 1;
}
.function-list dt h3 .num{
  display: block;
 font-family: "Inter", sans-serif;
 font-size: 4.5rem; 
 letter-spacing: .1em; 
}
.function-list dd{
  width: 83%;
  margin-left: 6.25%;
  padding: 40px 4%;
  background: var(--light);
  border-radius: 10px; 
}
.function-list dd h4{
  margin-bottom: 10px;
  font-size: 2.2rem;
  line-height: 1.5;
  color: var(--bluebrand);  
}


/* notification
-----------------------------------------------------------------*/
.notification{
  padding: 70px 0;
  background: var(--blue);
  color: var(--light); 
}
.notification .layout-box{
  align-items: center;  
}
.notification .more{
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  margin-right: 30px;
  border-radius: 100vmax;
  background: var(--light);
  font-size: 2.2rem;
  line-height: 1.5;
  font-weight: bold;
  color: var(--blue);   
}
.notification .txt-area{
  width: 90%;  
}
.notification .txt-area h3{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 2.2rem;
  line-height: 1.5;  
}
.notification .txt-area h3 .ico{
  margin-right: 12px;  
}
.notification .txt-area .notes{
  margin-top: 10px;  
}
.notification .txt-area .notes li{
  text-indent: -1em;
  padding-left: 1em;  
}


/* access
-----------------------------------------------------------------*/
.access{
  padding: 140px 0 0;
}
.access h2{
  margin-bottom: 50px;  
}
.access h2 .ja{
  margin-bottom: 0;  
}
.access h2 + .txt{
  margin-bottom: 45px;  
}
.access .id-pass{
  width: 48.5%;
  padding: 40px 4%;
  background: var(--bgblue);  
}
.access .id-pass h3{
  margin-bottom: 10px;
  font-size: 2.2rem;
  line-height: 1.2;  
}
.access .id-pass .txt{
  line-height: 1.8;  
}
.access .pic{
  width: 46.875%;  
}
























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

  .cont-nav{
    padding: 60px 0;
  }


/* intro
-----------------------------------------------------------------*/
  .intro{
    padding: 50px 0;
  }
  
  
/* residents
-----------------------------------------------------------------*/
  .residents{
    padding: 70px 0;
  }
  .residents .site-list{
    display: block;
  }
  .residents .site-list li{
    max-width: none;
    width: 100%;
  }
  .residents .site-list li:nth-child(n+2){
    margin-top: 100px;
  }
  .residents .site-list .txt-area{
    padding: 20px 0 0;	
  }
  .residents .site-list h3{
    margin-bottom: 15px;
    font-size: 1.9rem;
    line-height: 1.5;
  }
  .residents .site-list .txt{
    padding-right: 0;
    line-height: 1.9;
    font-size: 1.3rem;
  }
  .residents a .txt-area::after{
    right: 0;
    top: 25px;
    width: 40px;
    height: 40px;
    background-size: 5px auto;	
  }
  .residents a[target="_blank"] .txt-area::after{
    background-size: 11px auto;
  }
  .residents a:hover .txt-area::after{
    background: url(../img/common/arw_btn.svg) no-repeat center center var(--light);
    background-size: 5px auto;
  }
  .residents a[target="_blank"]:hover .txt-area::after{
    background: url(../img/common/ico_blank.svg) no-repeat center center var(--light);
    background-size: 11px auto;
  }
  
  .residents .bg-slider-area{
    position: absolute;
    left: 0;
    top: 49%;
    width: 100%;
    overflow: hidden;
  }
  .residents .bg-slider{
    width: 1462px;
  }
  

/* site
-----------------------------------------------------------------*/
	.site{
		scroll-margin-top: 60px;
		padding: 60px 0;
	}
	.site h2{
		margin-bottom: 35px;
	}
	.site h2 .ja{
		margin-bottom: 5px;
		line-height: 1.5;
	}

/* l-01 */
	.site .l-01{
		display: block;
		margin-bottom: 40px;
	}
	.site .l-01 .txt-area{
		width: 100%;
		margin-bottom: 30px;  
	}
	.site .point-list{
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	.site .point-list li{
		width: 48%;
		padding: 25px 15px;
	}
	.site .point-list li:nth-child(n+2){
		margin-top: 0;  
	}
	.site .point-list .ico{
		margin-bottom: 5px;  
	}

/* login */
	.login{
		margin-bottom: 50px;
		border-width: 1px;  
	}
	.login .layout-box{
		display: block;
		padding: 30px 20px 25px;
	}
	.login .layout-box .pic{
		width: 80%;
		margin: 0 auto 25px;  
	}
	.login .layout-box .txt-area{
		width: 100%;
	}
	.login .layout-box .txt-area h3{
		margin-bottom: 20px;
		font-size: 1.8rem;  
	}
	.login .user{
		padding:25px 20px;
		font-size: 1.5rem;
	}

/* l-02 */
	.site .l-02{
		display: block;
	}
	.site .l-02 .screen{
		width: 100%;
		margin-bottom: 30px;  
	}
	.site .l-02 .screen-box{
		padding: 25px 20px;
	}
	.site .l-02 .screen-box h3{
		margin-bottom: 15px;
		font-size: 1.8rem;
	}
	.site .l-02 .figure{
		width: 100%;
	}


/* function
-----------------------------------------------------------------*/
	.function{
		padding: 60px 0;
	}
	.function h2{
		margin-bottom: 30px;
	}
	.function h2 .ja{
		line-height: 1.5;  
	}
	.function-list > div:nth-child(n+2){
		margin-top: 20px;  
	}
	.function-list dt{
		width: 60px;
		height: 60px;
			
	}
	.function-list > div{
		align-items: flex-start;
	}
	.function-list dt{
		margin-top: 5px;
	}
	.function-list dt h3 .num{
	 font-size: 1.8rem; 
	}
	.function-list dt h3 .ico{
		display: inline-block;
		width: 24px;
	}
	.function-list dd{
		width: calc(100% - 70px);
		margin-left: 10px;
		padding: 20px 15px;
	}
	.function-list dd h4{
		font-size: 1.6rem;
	}


/* notification
-----------------------------------------------------------------*/
	.notification{
		padding: 40px 0;
	}
	.notification .layout-box{
		display: block;
	}
	.notification .more{
		width: 80px;
		height: 80px;
		margin: 0 auto 20px;
		font-size: 1.6rem;   
	}
	.notification .txt-area{
		width: 100%;  
	}
	.notification .txt-area h3{
		margin-bottom: 10px;
		font-size: 1.8rem;
		line-height: 1.4;  
	}
	.notification .txt-area h3 .ico{
		width: 30px;
		margin-right: 5px;  
	}
	.notification .txt-area .notes{
		margin-top: 10px;  
	}
	.notification .txt-area .notes li{
		text-indent: -1em;
		padding-left: 1em;  
	}


/* access
-----------------------------------------------------------------*/
	.access{
		padding: 60px 0 0;
	}
	.access h2{
		margin-bottom: 20px;  
	}
	.access h2 .ja{
		margin-bottom: 0;
		line-height: 1.5;  
	}
	.access h2 + .txt{
		margin-bottom: 30px;  
	}
	.access .layout-box{
		display: block;
	}
	.access .id-pass{
		width: 100%;
		margin-bottom: 20px;
		padding: 25px 20px;
	}
	.access .id-pass h3{
		margin-bottom: 10px;
		font-size: 1.8rem;
		line-height: 1.5;  
	}
	.access .id-pass .txt{
		line-height: 2;  
	}
	.access .pic{
		width: 100%;  
	}  
    
}