@charset "UTF-8";

:root{
	--body : #333;
	--link : #333;
	--title : #333;
	--main : #333;
	--base : #333;
	--mainBold : #333;
	--sub : #333;
	--white : #333;
	--bg : #64c424;
}

.wrap{
	width : 1260px;
	padding-left : 80px;
	padding-right : 80px;
}

body , #header , #footer , #aside , main > section{
	min-width : 1260px;
}

/*--------------------------------------------
HEADER
---------------------------------------------*/

#header .main .wrap{
	padding-left : 85px;
}

/*--------------------------------------------
MV
---------------------------------------------*/
#mv{
  font-size: 0;
  padding-block: 15px;
  .splide__pagination{
    width: 1100px;
    margin-inline: auto;
    margin-top: 12px;
    column-gap: 10px;
    justify-content: start;
    button{
      height: 4px;
      width: 90px;
      cursor: pointer;
      &:not(.is-active){
        background-color: #c9c9c9;
      }
      &.is-active{
        background-color: #ff9933;
      }
    }
  }
}

@media ( hover : hover ){
  #mv{
    .splide__pagination{
      button:hover{
        background-color: #ff9933;
      }
    }
  }
}
@media ( prefers-reduced-motion : no-preference ){
  #mv{
    .splide__pagination{
      button{
        transition: background .3s ease-in;
      }
    }
  }
}

/*--------------------------------------------
INFORMATION
---------------------------------------------*/

#information{
	background-color : #80c269;
}

#information .wrap{
	padding-top : 65px;
	padding-bottom : 60px;
}

#information h2{
	color : #000;
}

#information ul#slider{
	display : flex;
	justify-content : space-between;
	margin-top : 26px;
}

#information #slider li{
	width : 175px;
	height : 265px;
	background-color : #fff;
	padding-top : 10px;
	padding-left : 10px;
	padding-right : 10px;
	padding-bottom : 10px;
	position : relative;
}

#information #slider .is-new{
	width : 33px;
	height : 33px;
	border-radius : 50%;
	background-color : #e4007f;
	color : #fff;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	font-size : 10px;
	font-weight : 500;
	position : absolute;
	left : 0;
	top : -10px;
	z-index : 1;
}

#information #slider .cat{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	font-size : 10px;
	color : #fff;
	height : 25px;
	font-size : 10px;
	vertical-align : 0;
	padding-left : 1em;
	padding-right : 1em;
	position : absolute;
	right : 7px;
	top : -8px;
	z-index : 1;
}

#information #slider .img{
	width : 155px;
	height : 155px;
	overflow : hidden;
}

#information #slider .img > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}

#information #slider time{
	display : block;
	font-size : 12px;
	margin-top : 11px;
}

#information #slider h3{
	font-size : 13px;
	line-height : 18px;
	margin-top : calc( 7px - 2.5px );
}

#information #slider .news{
	background-color : #2e8eef;
}

#information .blog{
	background-color : #f66;
}

#information .jirei{
	background-color : #f93;
}

#information .checkup{
	padding : 20px 0 30px 0 ;
	text-align : center;
}

#information .checkup ul li{
	line-height : 1.5;
	margin : 5px 0 ;
}

#information .checkup ul li a{
	color : #fff;
	text-decoration : underline;
	font-size : 20px;
}

/*--------------------------------------------
MENU
---------------------------------------------*/

#menu{
	overflow : hidden;
	background : url("../images/home/menu/bg.png") center top / cover no-repeat;
}

#menu .wrap{
	padding-top : 52px;
	padding-bottom : 45px;
}

#menu h2{
	color : #000;
}

#menu .box{
	padding-top : 62px;
	padding-left : 90px;
	position : relative;
}

#menu .box:after{
	content : "";
	display : block;
	position : absolute;
	background : url("../images/home/menu/bg01.png") left top no-repeat;
	width : 322px;
	height : 241px;
	top : -7px;
	left : 709px;
}

#menu .box h3{
	font-size : 30px;
	font-weight : 500;
}

#menu .box p{
	margin-top : calc( 23px - 6px );
	font-size : 14px;
	line-height : 26px;
	letter-spacing : 0;
	width : 590px;
}

#menu .list{
	margin-top : calc( 51px - 6px );
	display : flex;
	justify-content : space-between;
}

#menu .list > li{
	position : relative;
	padding-top : 30px;
	padding-left : 25px;
	padding-right : 25px;
	padding-bottom : 30px;
	width : 495px;
	display : flex;
	flex-direction : column;
	min-height : 387px;
}

#menu .list > li + li:after{
	content : "";
	display : block;
	position : absolute;
	background : url("../images/ui/icon/plus.png");
	width : 44px;
	height : 44px;
	left : -77px;
	top : 172px;
}

#menu .list .header{
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
	color : white;
	height : 80px;
}

#menu .list p{
	font-size : 14px;
}

#menu .list h3{
	font-size : 24px;
	margin-top : 15px;
	font-weight : 700;
}

#menu .list h4{
	font-weight : 700;
	font-size : 16px;
	line-height : 24px;
	letter-spacing : 0;
	text-align : center;
	margin-top : calc( 22px - 4px );
}

#menu .list ul{
	margin-top : calc( 19px - 2.5px );
}

#menu .list ul li{
	display : flex;
	font-size : 14px;
	line-height : 24px;
	letter-spacing : 0;
}

#menu .list ul li:before{
	content : "・";
}

#menu .list a{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	margin-top : auto;
	margin-left : auto;
	margin-right : auto;
	width : 171px;
	height : 50px;
	font-size : 14px;
	color : #fff;
	position : relative;
}

#menu .list a:after{
	content : "";
	display : block;
	position : absolute;
	background : url("../images/ui/icon/arrow03.png") left top no-repeat;
	width : 11px;
	height : 12px;
	top : 50%;
	transform : translateY(-50%);
	left : 143px;
}

#menu .list > li:nth-child(1){
	background-color : #d4e7fb;
}

#menu .list > li:nth-child(1):before{
	content : "";
	display : block;
	position : absolute;
	background : url("../images/home/menu/bg_list01.png") left top no-repeat;
	width : 132px;
	height : 232px;
	left : -44px;
	top : -54px;
}

#menu .list > li:nth-child(1) .header{
	background-color : #4d90d4;
}

#menu .list > li:nth-child(1) li:before{
	color : #4d90d4;
}

#menu .list > li:nth-child(1) a{
	background-color : #4d90d4;
}

#menu .list > li:nth-child(2){
	background-color : #f5d0de;
}

#menu .list > li:nth-child(2):before{
	content : "";
	display : block;
	position : absolute;
	background : url("../images/home/menu/bg_list02.png") left top no-repeat;
	width : 135px;
	height : 297px;
	left : 436px;
	top : -126px;
}

#menu .list > li:nth-child(2) .header{
	background-color : #cd5985;
}

#menu .list > li:nth-child(2) li:before{
	color : #cd5985;
}

#menu .list > li:nth-child(2) a{
	background-color : #cd5985;
}

#menu .wrap > a{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	color : #fff;
	background-color : #75be5c;
	position : relative;
	width : 277px;
	height : 60px;
	margin-left : auto;
	margin-right : auto;
	font-size : 16px;
	margin-top : 50px;
}

#menu .wrap > a:after{
	content : "";
	display : block;
	position : absolute;
	background : url("../images/ui/icon/arrow02.png") left top no-repeat;
	width : 12px;
	height : 15px;
	top : 50%;
	transform : translateY(-50%);
	left : 242px;
}

/*--------------------------------------------
GAIYO
---------------------------------------------*/

#gaiyo{
	background-color : #eaf5ea;
	background : url("../images/home/gaiyo/bg.png") center bottom repeat-x;
	overflow : hidden;
}

#gaiyo .wrap{
	padding-top : 90px;
	padding-bottom : 254px;
	position : relative;
}

#gaiyo .wrap:before{
	content : "";
	display : block;
	position : absolute;
	background : url("../images/home/gaiyo/bg01.png");
	width : 144px;
	height : 194px;
	left : 151px;
	top : 6px;
	z-index : 1;
}

#gaiyo .wrap:after{
	content : "";
	display : block;
	position : absolute;
	background : url("../images/home/gaiyo/bg02.png");
	width : 221px;
	height : 186px;
	left : 891px;
	top : 14px;
}

#gaiyo h3{
	text-align : center;
	font-size : 24px;
	font-weight : 500;
	margin-top : 95px;
}

#gaiyo figure{
	position : absolute;
	left : 43px;
	top : 255px;
}

#gaiyo figcaption{
	font-size : 14px;
	line-height : 18px;
	color : #4aac28;
	text-align : center;
}

#gaiyo ul{
	margin-top : 89px;
	display : flex;
	justify-content : center;
}

#gaiyo li{
	width : 220px;
	height : 220px;
    margin: 0 5px;
}

#gaiyo li a{
	color : #fff;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	width : 100%;
	height : 100%;
	font-size : 20px;
	background-size : 100% 100%;
	border-radius : 50%;
	overflow : hidden;
	background-position : center center;
	background-repeat : no-repeat;
	transition : background .3s ease-in-out;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : background;
}

#gaiyo li:nth-child(1) a{
	background-image : url("../images/home/gaiyo/list01.png");
}

#gaiyo li:nth-child(2) a{
	background-image : url("../images/home/gaiyo/list02.png");
}

#gaiyo li:nth-child(3) a{
	background-image : url("../images/home/gaiyo/list03.png");
}

#gaiyo li:nth-child(4) a{
	background-image : url("../images/home/gaiyo/list04.png");
}

#gaiyo li a:hover{
	background-size : 120% 120%;
}

/*--------------------------------------------
STAFF
---------------------------------------------*/

#staff{
	background : url("../images/home/staff/bg.png") center top / cover no-repeat;
}

#staff .wrap{
	padding-top : 56px;
	padding-bottom : 42px;
}

#staff .box{
	margin-top : 82px;
	display : flex;
	justify-content : space-between;
	padding-left : 55px;
}

#staff ul{
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	width : 740px;
}

#staff li{
	width : 212px;
}

#staff li:nth-child(n+4){
	margin-top : 55px;
}

#staff li a{
	display : flex;
	align-items : flex-start;
	position : relative;
}

#staff .avatar{
	position : absolute;
	z-index : 1;
	width : 59px;
	min-height : 137px;
	text-align : center;
	left : -46px;
	bottom : 0;
}

#staff .avatar img{
	width : 60px;
}

#staff .thumbnail{
	overflow : hidden;
}

#staff .thumbnail > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	font-family : "object-fit: cover;";
}

#staff .thumbnail{
	width : 100px;
	height : 100px;
	flex-shrink : 0;
}

#staff .content{
	margin-left : 5px;
}

#staff time{
	font-size : 13px;
	line-height : 21px;
}

#staff h3{
	text-decoration : underline;
	font-weight : 500;
	font-size : 13px;
	line-height : 21px;
	margin-top : .4em;
}

#staff .content p{
	margin-top : .4em;
	font-size : 13px;
	line-height : 21px;
}

#staff .av01{
	background : url("../images/ui/staff/av01.png") center bottom no-repeat;
	padding-top : 2px;
}

#staff .av02{
	background : url("../images/ui/staff/av02.png") center bottom no-repeat;
	padding-top : 2px;
}

#staff .av03{
	background : url("../images/ui/staff/av03.png") center bottom no-repeat;
	padding-top : 2px;
}

#staff .av04{
	background : url("../images/ui/staff/av04.png") center bottom no-repeat;
	padding-top : 2px;
}

#staff .av05{
	background : url("../images/ui/staff/av05.png") center bottom no-repeat;
	padding-top : 12px;
}

#staff .av06{
	background : url("../images/ui/staff/av06.png") center bottom no-repeat;
	padding-top : 12px;
}

#staff .object-container{
	width : 280px;
	height : 400px;
}

#staff .wrap > a{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	color : #fff;
	background-color : #75be5c;
	position : relative;
	width : 277px;
	height : 60px;
	margin-left : auto;
	margin-right : auto;
	font-size : 16px;
	margin-top : 60px;
}

#staff .wrap > a:after{
	content : "";
	display : block;
	position : absolute;
	background : url("../images/ui/icon/arrow02.png") left top no-repeat;
	width : 12px;
	height : 15px;
	top : 50%;
	transform : translateY(-50%);
	left : 242px;
}

/*--------------------------------------------
ASIDE
---------------------------------------------*/

#aside{
	background-color : #61c63b;
	/*	li:not(:nth-child(3)){
		margin-left: auto;
	}*/
}

#aside .wrap{
	width : 1260px;
	padding-top : 30px;
	padding-bottom : 30px;
	padding-left : 0;
	padding-right : 0;
}

#aside ul{
	display : flex;
	align-items : center;
	justify-content:center;
}

#aside ul li{
	margin : 0 5px;
}

.topbanner{
	background-color : #61c63b !important;
}