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

/*--------------------　block01　--------------------*/
header {
position:absolute;
left: 0;
right: 0;
margin: 0 auto;
	z-index: 99;
}

.block01 {
margin-bottom: 80px;
}


/*--------------------　header　--------------------*/

header.top {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 20px 65px 20px 20px;
}

header h1 {
margin-right: 20px;
max-width: 300px;
min-width: 200px;
}

header.top ul {
background: #FFF;
display: block;
position: absolute;
	padding: 1.5rem 2.4rem;
max-width: 350px;
	right: 3%;
	top: 120px;
	border-radius: 6px;
	z-index: 999;
font-family: 'Zen Maru Gothic', sans-serif;
}

header.top li {
font-size: clamp(1.3rem, 0.625rem + 0.26vw, 0.938rem);
line-height: 300%;
	text-align: left;
padding-left: 0;
}

header.top div.menu02 {
position: absolute;	
max-width: 350px;
	top: 400px;
	right: 3%;
	z-index: 1009;
}

header.top div.menu02 img {
	margin-bottom: 10px;
}

@media (max-width: 1350px) {
header.top ul {
background: #FFF;
display: block;
position: absolute;
	padding: 1.5rem 2.0rem;
max-width: 350px;
	right: 3%;
	top: 120px;
	border-radius: 6px;
	z-index: 999;
}

header.top li {
font-size: clamp(1.0rem, 0.625rem + 0.26vw, 0.938rem);
line-height: 300%;
	text-align: left;
padding-left: 0;
}
	
header.top div.menu02 {
position: absolute;	
max-width: 186px;
	top: 350px;
	right: 3%;
	z-index: 1009;
}
}

@media (max-width: 1200px) {
header.top li {
font-size: clamp(0.9rem, 0.625rem + 0.26vw, 0.938rem);
line-height: 300%;
	text-align: left;
padding-left: 0;
}
	
header.top div.menu02 {
position: absolute;	
max-width: 170px;
	top: 350px;
	right: 3%;
	z-index: 1009;
}
}

@media (max-width: 1080px) {
	header.top ul{
		display: none;
}
	
	header.top .menu02{
		display: none;
}
}

@media (max-width: 790px) {
	header.top {
		padding: 5px 10px;
		background: #FCF9F2;
	}	
	
header h1 {
margin-right: 20px;
max-width: 30%;
min-width: 280px;

}
}

header li a {
text-decoration: none;
}

header.top li:before {border: none;}

header li:first-child:before {
border-right: none;
}

header.top .btn {
position: absolute;
	right: 8%;
	top: 60px;
}

header.top .btn a {
width: 100%;
height: 40px;
padding: 0 15px;
box-sizing: border-box;
background: #FFFFFF;
text-decoration: none;
font-size: clamp(1rem, 0.625rem + 0.26vw, 0.938rem);
line-height: 100%;
border: solid 1px #8DC9D1;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

header .btn a:before {
content: '';/*何も入れない*/
display: inline-block;
width: 17px;/*画像の幅*/
height: 17px;/*画像の高さ*/
background-image: url(../images/btn_member.png);
background-repeat: no-repeat;
vertical-align: middle;
padding-bottom: 2px;
padding-right: 5px;
}

div.sp_nav.top .hamburger {
  position:absolute;
  top: 55px;
	right: 3%;
  z-index: 999;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
	background: #FCF9F2;
	border-radius: 6px;
}

div.sp_nav.top .hamburger.active {
  position: absolute;
  top: 18px;
  right: 10px;
  z-index: 999;

}

div.sp_nav.top .hamburger__line:nth-of-type(1) {
  top: 12px;
}
div.sp_nav.top .hamburger__line:nth-of-type(2) {
  top: 21px;
}
div.sp_nav.top .hamburger__line:nth-of-type(3) {
  top: 30px;
}
/*--------------------　block02　--------------------*/

.block02 {
width: 85%;
max-width: 1200px;
margin: 0 auto 80px;
}

.block02 ul {
display: flex;
justify-content: space-between;
}

.block02 li {
width: 49%;
padding: 30px;
box-sizing: border-box;
border: solid 1px #C2B794;
background: #FFFFFF;
border-radius: 10px;
position: relative;
}

.block02 dt {
font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
position: relative;
line-height: 100%;
margin-bottom: 5px;
}

.block02 li:last-child dt {
color: #F4873E;
}

.block02 li:first-child dt:before {
content: '';/*何も入れない*/
display: inline-block;
width: 30px;/*画像の幅*/
height: 40px;/*画像の高さ*/
background-image: url(../images/icon_project.png);
background-repeat: no-repeat;
vertical-align: middle;
padding-right: 15px;
padding-bottom: 5px;
}

.block02 li:last-child dt:before {
content: '';/*何も入れない*/
display: inline-block;
width: 30px;/*画像の幅*/
height: 40px;/*画像の高さ*/
background-image: url(../images/icon_member.png);
background-repeat: no-repeat;
vertical-align: middle;
padding-right: 15px;
padding-bottom: 10px;
}

.block02 li dd p {
line-height: 180%;
}

.block02 li:first-child dd p {
width: 100%;
max-width: 400px;
}

.block02 li:last-child dd p {
width: calc(100% - 190px);
}

.block02 .btn1,
.block02 .btn2 {
position: absolute;
bottom: 20px;
right: 30px;
margin-top: 20px;
}

.block02 .chara {
position: absolute;
right: 50px;
bottom: 80px;
width: 22%;
max-width: 105px;
}

/*--------------------　block03　--------------------*/

.block03 {
margin-bottom: 80px;
}

.block03 .bg {
width: 95%;
float: right;
border-radius: 100px 0 0 100px;
background: url("../images/project_bg.png") no-repeat bottom center #F4F0E8;
}

.block03 .inner {
width: 75%;
max-width: 1200px;
margin-left: 7.5%;
padding: 80px 0;
position: relative;
box-sizing: border-box;
}

.block03 .chara {
position: absolute;
right: -17%;
top: 80px;
width: 16%;
max-width: 177px;
}

.block03 h2 {
font-size: clamp(1.75rem, 1.614rem + 0.68vw, 2.125rem);
position: relative;
line-height: 100%;
margin-bottom: 30px;
}

.block03 h2:before {
content: '';/*何も入れない*/
display: inline-block;
width: 30px;/*画像の幅*/
height: 40px;/*画像の高さ*/
background-image: url(../images/icon_project.png);
background-repeat: no-repeat;
vertical-align: middle;
padding-right: 15px;
padding-bottom: 5px;
}

.block03 .nya-customer-slider {
  overflow-x: hidden; /* はみ出た部分の横スクロールバーと横揺れを防ぐ */
  width: 100%;
}

.block03 .nya-customer-slider .slick-track {
display: flex;
align-items: stretch;
position: relative;
}
.block03 .nya-customer-slider .slick-slide {
transition: transform 0.5s;
margin: 0 10px;
padding: 30px;
box-sizing: border-box;
border: solid 1px #C2B794;
background: #FFFFFF;
border-radius: 10px;
display: flex;
flex-direction: column;
}

.block03 .slide-arrow {
  bottom: 0;
  cursor: pointer;
  margin: auto;
  position: absolute;
  top: 0;
  width: 50px;
  z-index: 1;
}
.block03 .prev-arrow {
  left: -15px;
}
.block03 .next-arrow {
  right: -15px;
}

.block03 dl {
flex: 1;
display: flex;
flex-direction: column;
}

.block03 dt {
font-size: 130%;
line-height: 140%;
margin-bottom: 15px;
text-align: center;
}

.block03 dd {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}

.block03 dd p {
font-size: 95%;
line-height: 160%;
margin: 15px 0;
}

.block03 dd .btn1 {
margin-top: auto;
}
@media screen and (max-width:1080px)
{
header.top .btn {
position: absolute;
	right: 12%;
	top: 16px;
}	
	
div.sp_nav.top .hamburger {

  top: 14px;
	right: 3%;

}
}
/* タブレットレイアウト : 768 px ～ 959 px*/
@media screen and (max-width:959px)
{
.pt{display: block;}
.pc{display: none;}
.ps{display: none;}
.tb{display: block;}
.ts{display: block;}
.sp{display: none;}

/*--------------------　block02　--------------------*/

.block02 li:first-child dd p {
max-width: 100%;
}

.block02 li:last-child dd p {
width: calc(100% - 30%);
}

.block02 .btn1,
.block02 .btn2 {
position: static;
text-align: center;
}

.block02 .chara {
right: 20px;
top: 95px;
bottom: auto;
width: 22%;
}

}


/* スマホ設定  768 以下*/
@media screen and (max-width:790px)
{
.pt{display: none;}
.pc{display: none;}
.ps{display: block;}
.tb{display: none;}
.ts{display: block;}
.sp{display: block;}

	
	
header.top .btn {
position: absolute;
	right: 15%;
	top: 20px;
}	
	
div.sp_nav.top .hamburger {
  position:absolute;
  top: 20px;
	right: 3%;
  z-index: 999;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
	background:none;
	border-radius: 6px;
}
	
/*--------------------　block02　--------------------*/

.block02 {
margin: 0 auto 60px;
}

.block02 ul {
display: block;
}

.block02 li {
width: 100%;
padding: 20px;
margin-bottom: 20px;
}

.block02 dt {
font-size: 150%;
}

.block02 li:last-child dd p {
width: 100%;
}

.block02 .chara {
display: none;
}
/*--------------------　block03　--------------------*/

.block03 {
margin-bottom: 0;
}

.block03 .bg {
width: 100%;
float: none;
border-radius: 0;
}

.block03 .inner {
width: 85%;
padding: 60px 0;
}

.block03 .chara {
right: 5%;
top: 30px;
width: 25%;
}

.block03 h2 {
margin-bottom: 25px;
}
/*
.block03 ul {
display: block;
}

.block03 li {
width: 100%;
margin-right: 0;
margin-bottom: 20px;
padding: 25px 20px;
}

.block03 dl {
  display: block;
}

.block03 dt {
font-size: 150%;
}

.block03 dd {
display: block;
text-align: center;
}

.block03 dd p {
font-size: 100%;
}
*/
}