/*
Theme Name: SUGAMATA TEMPLATE
Theme URI: 
Description: 株式会社スガマタテーマ

*/

@import url(common/css/rinen.css);
@import url(common/css/setubi.css);
@import url(common/css/blog.css);
@import url(common/css/company.css);
@import url(common/css/contact.css);
@import url(common/css/recruit.css);
@import url(common/css/lp.css);
@import url(common/css/ss.css);

* {
  margin: 0;
  padding: 0;
  font-size : 100%;
  box-sizing:border-box;
}


html{
  scroll-behavior: smooth;
}

body{
color: #000;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

table{
border-collapse: collapse;
}

td,th{
text-align: left;
vertical-align: top;
}

.clearfix{
zoom: 1;
}

.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}

li{
list-style-type: none;
}

img{ 
display: block;
border:0;
max-width: 100%;
height: auto;
}

a:link{color: #5b657e;text-decoration: underline;}
a:visited{color: #5b657e;text-decoration: none;}
a:hover{color: #5b657e;text-decoration: none;}
a:active{color: #2177be;text-decoration: none;}


.img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
font-family: 'object-fit: cover; object-position: center center;'
}



a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
color:#000;
text-decoration : none;
}

@media (max-width: 959px) {
a[href^="tel:"] {
    cursor: pointer;
    pointer-events: auto;
}
}



/* blog_comment */

.comment-num,
#comment-area{
display: none;
}







#main{
	position: relative;
	width: 100%;
	height: 100svh;
	overflow: hidden;
}

#main .main-bg-slider{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

#main .main-bg-slider .slide{
	width: 100%;
	height: 100svh;
	background-position: center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

/* 上に乗るコンテンツ */
#main header,
#main #main-catch,
#main #main-news,
#main .scroll{
	z-index: 1;
}

#main .main-bg-slider.pc{display:block;}
#main .main-bg-slider.sp{display:none;}

@media (max-width:959px){
	#main .main-bg-slider.pc{display:none;}
	#main .main-bg-slider.sp{display:block;}
}



#main.contents{
	width: 100%;
	height: 455px;
	position: relative;
}

#main.contents.rinen{
background: url(img/rinen/main.jpg) no-repeat right center / cover;
}
#main.contents.news{
background: url(img/blog/main.jpg) no-repeat right center / cover;
}
#main.contents.company{
background: url(img/company/main.jpg) no-repeat right center / cover;
}
#main.contents.contact{
background: url(img/contact/main.jpg) no-repeat center center / cover;
}
#main.contents.recruit,#main.contents.recruit2{
background: url(img/recruit/main.jpg) no-repeat center center / cover;
}
#main.contents.setubi,#main.contents.setubi2,#main.contents.setubi3,#main.contents.setubi4{
background: url(img/setubi/main.jpg) no-repeat right center / cover;
}
#main.contents.lp{
background: url(img/lp/main.jpg) no-repeat right center / cover;
}
#main.contents.ss{
background: url(img/ss/main.jpg) no-repeat left center / cover;
}
#main.contents.policy{
background: url(img/policy/main.jpg) no-repeat right center / cover;
}



@media (max-width: 1600px) {
#main.contents{
	height: 380px;
}
}

@media (max-width: 1280px) {
#main.contents{
	height: 300px;
}
}

@media (max-width: 860px) {
	#main.contents.company{
background: url(img/company/main.jpg) no-repeat right 60% center / cover;
}
}

@media (max-width: 768px) {
#main.contents.recruit,#main.contents.recruit2{
background: url(img/recruit/main.jpg) no-repeat right 50% center / cover;
}
#main.contents.rinen{
background: url(img/rinen/main.jpg) no-repeat center center / cover;
}
#main.contents.news{
background: url(img/blog/main.jpg) no-repeat left 30% center / cover;
}
}

@media (max-width: 680px) {
#main.contents.setubi,#main.contents.setubi2,#main.contents.setubi3,#main.contents.setubi4{
background: url(img/setubi/main.jpg) no-repeat center center / cover;
}
}

@media (max-width: 599px) {
#main.contents.ss{
background: url(img/ss/main.jpg) no-repeat left 30% center / cover;
}
#main.contents.rinen{
background: url(img/rinen/main.jpg) no-repeat right 35% center / cover;
}
#main.contents.setubi,#main.contents.setubi2,#main.contents.setubi3,#main.contents.setubi4{
background: url(img/setubi/main.jpg) no-repeat left 60% center / cover;
}
}

@media (max-width: 550px) {
#main.contents.recruit,#main.contents.recruit2{
background: url(img/recruit/main.jpg) no-repeat right 35% center / cover;
}
}

@media (max-width: 400px) {
#main.contents{
	height: 250px;
}
#main.contents.rinen{
background: url(img/rinen/main.jpg) no-repeat right 35% center / auto 100%;
}
#main.contents.news{
background: url(img/blog/main.jpg) no-repeat left 40% center / cover;
}
#main.contents.company{
background: url(img/company/main.jpg) no-repeat right 40% center / cover;
}
}



#main header h1{
	position: absolute;
	top: 70px;
	left: 95px;
	z-index: 1;
}

@media (max-width: 959px) {
#main header h1{
	top: 45px;
	left: 45px;
}
}

@media (max-width: 599px) {
#main header h1{
	top: 145px;
}

#main.contents header h1{
	top: auto;
	bottom: 25px;
}

}

@media (max-width: 400px) {
#main header h1{
	width: 170px;
}
}


@media (max-width: 380px) {
#main header h1{
	left: 25px;
}
}

#head-contact{
	position: fixed;
	width: 98px;
	height: 98px;
	right: 98px;
	top: 0;
	z-index: 1000000000;
}

#head-contact a{
	display: block;
	width: 98px;
	height: 98px;
	position: relative;
	background-color: #fff;
}

#head-contact a:hover{
	background-color: #d6f0e6;
	transition: all 0.3s ease;
}

#head-contact a img{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.menu-trigger_container{
	position: fixed;
	width: 98px;
	height: 98px;
	right: 0;
	top: 0;
	background-color: #486c5e;
	color: #fff;
	font-family: "Spectral", serif;
	letter-spacing: 0;
	cursor: pointer;
	z-index: 1000000000000000000000000000000000000000000000000000000000000000000000000000000000;
}

.menu-trigger_container:hover{
	background-color: #355046;
	transition: all .4s;
}

.menu-trigger{
transition: all .3s;
}

.menu-trigger span {
	display: inline-block;
	transition: all .3s;
	box-sizing: border-box;
	position: fixed;
}

.menu-trigger div{
	width: 35px;
	height: 44px;
	margin: 0 auto;
	position: relative;
}

.menu-trigger span {
position: absolute;
width: 100%;
height: 2px;
background-color: #fff;
}

.menu-trigger span:nth-of-type(1) {
	top: 26px;
	width: 60%;
	right: 0;
}

.menu-trigger span:nth-of-type(2) {
	top: 37px;
	left: 0;
}

.menu-trigger span:nth-of-type(3) {
	top: 48px;
	width: 60%;
	left: 0;
}


.menu-trigger_container:hover .menu-trigger span:nth-of-type(1){
	width: 100%;
}
.menu-trigger_container:hover .menu-trigger span:nth-of-type(3){
	width: 100%;
}


.menu-trigger_container.active .menu-trigger span{
background-color: #a3c7b9;
}

.menu-trigger_container.active .menu-trigger span:nth-of-type(1) {
	width: 40%;
	-webkit-transform: translate3d(-18px, 4px, 0) rotate(45deg);
	transform: translate3d(-18px, 4px, 0) rotate(45deg);
}
.menu-trigger_container.active .menu-trigger span:nth-of-type(2) {
	-webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
	transform: translate3d(0, 0, 0) rotate(-45deg);
}
.menu-trigger_container.active .menu-trigger span:nth-of-type(3) {
	width: 40%;
	-webkit-transform: translate3d(18px, -3px, 0) rotate(45deg);
	transform: translate3d(18px, -3px, 0) rotate(45deg);
}

.menu-trigger-txt{
	text-align: center;
	font-size: 80%;
	display: block;
	padding-top: 18px;
}


#main-catch{
	padding-left: 95px;
	padding-top: 225px;
	position: relative;
}

#main-catch>span{
	font-family: "Spectral", serif;
	color: #fff;
	display: block;
	font-size: 120%;
	font-weight: 400;
	line-height: 1;
	padding-bottom: 10px;
}

#main-catch strong{
	display: block;
	margin-bottom: 10px;
}

#main-catch strong span{
	display: inline-block;
	background-color: #fff;
	font-size: 280%;
	line-height: 1;
	letter-spacing: .05em;
	padding: 10px;
}

@media (max-width: 959px) {
#main-catch{
	padding-left: 45px;
	padding-top: 180px;
}
#main-catch strong span{
	font-size: 200%;
}
}

@media (max-width: 599px) {
	#main-catch{
	padding-top: 250px;
}
#main-catch strong span{
	font-size: 150%;
}
}

@media (max-width: 430px) {
	#main-catch>span{
		font-size: 90%;
	}
#main-catch strong span{
	font-size: 130%;
}
}

@media (max-width: 380px) {
	#main-catch{
	padding-left: 25px;
	}
	#main-catch strong span{
	font-size: 120%;
	letter-spacing: 0;
	padding: 5px;
}
}


#main-news{
	width: 80%;
	max-width: 750px;
	height: 55px;
	position: absolute;
	left: 0;
	bottom: 10px;
	background-color: #fff;
	padding-left: 120px;
}

#main-news h2{
	width: 95px;
	height: 55px;
	text-align: center;
	color: #fff;
	background-color: #486c5e;
	font-family: "Spectral", serif;
	display: block;
	font-weight: 400;
	font-size: 100%;
	line-height: 1;
	padding-top: 18px;
	position: absolute;
	left: 0;
	top: 0;
}

#main-news a{
  text-decoration: none;
  color: #000;
  background: url(img/arrow-g.png) no-repeat right 25px center / 30px auto;
  padding-right: 70px;
  display: flex;
  align-items: center;
  height: 55px;
}

#main-news a:hover{
background: url(img/arrow-g.png) no-repeat right 15px center / 30px auto;
transition: all 0.3s ease;
}

#main-news a dl{
  display: flex;
  width: 100%;
}

#main-news a dl dt{
  font-family: "Spectral", serif;
  padding-right: 20px;
  flex: 0 0 auto;
}

#main-news a dl dd{
  font-size: 90%;
  flex: 1 1 auto;
  min-width: 0; /* ←これが肝 */
}

#main-news a dl dd span{
	display: block;
	text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
}

@media (max-width: 860px) {
#main-news{
	width: calc(100% - 80px) ;
	max-width: 750px;
	height: 55px;
	position: absolute;
	left: 0;
	bottom: 10px;
	background-color: #fff;
	padding-left: 25px;
}

#main-news h2{
	width: auto;
	height: auto;
	text-align: left;
	color: #fff;
	background-color: transparent;
	padding-top: 0;
	left: 25px;
	top: -25px;
}
}

@media (max-width: 599px) {
#main-news{
	width: calc(100% - 50px) ;
	max-width: 750px;
	height: 75px;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #fff;
	padding-left: 25px;
}

#main-news a dl{
  display: block;
  width: 100%;
}

#main-news a dl dt{
  padding-right: 0;
  padding-top: 15px;
  padding-bottom: 5px;
}

#main-news a{
  background: url(img/arrow-g.png) no-repeat right 25px top 35px / 30px auto;
  height: auto;
}

#main-news a:hover{
background: url(img/arrow-g.png) no-repeat right 15px top 35px / 30px auto;
transition: all 0.3s ease;
}
}

@media (max-width: 479px) {
#main-news a{
  background: none;
  padding-right: 20px;
}

#main-news a:hover{
	background: none;
}

}


.scroll{
  position: absolute;
  width: 40px;
  height: 230px;
  right: 40px;
  bottom: 0;
  overflow: hidden;
}

.scroll span{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  font-family: "Spectral", serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #fff;
}

/* 縦ライン */
.scroll::after{
  content: "";
  position: absolute;
bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 165px;
  background: #fff;
  overflow: hidden;
}

/* 動くライン */
.scroll::before{
  content: "";
  position: absolute;
  bottom: 120px;
  left: 50%;
  width: 1px;
  height: 50px;
  background: #486c5e;
  animation: scrollLine 1.6s infinite;
  z-index: 10;
}

@keyframes scrollLine{
  0%{
    opacity: 0;
	bottom: 120px;
  }
  30%{
    opacity: 1;
  }
  100%{
    opacity: 1;
	bottom: -50px;
  }
}

@media (max-width: 650px) {
.scroll{
	right: 20px;
}
}

@media (max-width: 599px) {
.scroll{
	right: 5px;
}
}

.w1{
	width: 90%;
	max-width: 1380px;
	margin: 0 auto;
}

.w2{
	width: 90%;
	max-width: 1440px;
	margin: 0 auto;
}

.w3{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}

.read{
	font-size: 110%;
	letter-spacing: .08em;
	line-height: 1.8;
	font-weight: 400;
}

.title1 strong{
display: block;
	font-size: 190%;
	line-height: 1;
	letter-spacing: .08em;
	font-weight: 1000;
	padding-bottom: 15px;
}

.title1 span{
	display: block;
	font-size: 110%;
	line-height: 1;
	letter-spacing: 0;
	font-weight: 400;
	color: #486c5e;
	font-family: "Spectral", serif;
}


@media (max-width: 959px) {
.title1{
	text-align: center;
}
.title1 strong{
	font-size: 160%;
}
.title1 span{
	font-size: 80%;
}
}

@media (max-width: 350px) {
.title1 span{
	font-size: 70%;
}
}

.page-title,
.title2{
	text-align: center;
}
.page-title{
	padding-top: 100px;
}
.title2{
padding-top: 230px;
}


.page-title strong,
.title2 strong{
display: block;
	font-size: 190%;
	line-height: 1;
	letter-spacing: .08em;
	font-weight: 1000;
	padding-bottom: 15px;
}

.page-title span,
.title2 span{
	display: block;
	font-size: 110%;
	line-height: 1;
	letter-spacing: 0;
	font-weight: 400;
	color: #486c5e;
	font-family: "Spectral", serif;
	text-transform: capitalize;
}

@media (max-width: 959px) {
.page-title strong,
.title2 strong{
	font-size: 160%;
}
.page-title span,
.title2 span{
	font-size: 80%;
}
}

@media (max-width: 350px) {
.page-title span,
.title2 span{
	font-size: 70%;
}
}


.bt-more a{
	display: block;
	width: 90%;
	max-width: 318px;
	border: 1px solid #486c5e;
	margin: 0 auto;
	color: #486c5e;
	font-family: "Spectral", serif;
	text-decoration: none;
	font-size: 110%;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	padding: 25px 0;
	background: url(img/arrow-g.png) no-repeat right 28px center / 30px auto;
}

.bt-more a:hover{
	background: url(img/arrow-g.png) no-repeat right 18px center / 30px auto;
	transition: all 0.3s ease;
}


/*

#top-block1

*/

#top-block1{
	margin-top: 150px;
	position: relative;
}

#top-block1-head{
	display: inline-block;
	padding-top: 20px;
	padding-bottom: 70px;
	padding-right: 200px;
	position: relative;
}

#top-block1-head ul{
	position: absolute;
	right: 0;
	top: 20px;
}

#top-block1-head ul li a{
	display: block;
	width: 150px;
	border-bottom: 1px solid #676767;
	background: url(img/arrow-b.png) no-repeat right 10px center / 30px auto;
	color: #000;
	text-decoration: none;
	letter-spacing: 0;
	font-family: "Spectral", serif;
	padding: 15px 10px;
	transition: all 0.3s ease;
}

#top-block1-head ul li a:hover{
	background: url(img/arrow-b.png) no-repeat right 0 center / 30px auto;
}

#top-block1 .read{
	padding-bottom: 40px;
	padding-right: 480px;
}

#top-block1 figure{
	position: absolute;
	right: 0;
	top: 0;
}

@media screen and (max-width:1130px){
  #top-block1{
    position: static;
  }
#top-block1 .read{
	padding-right: 0;
}
  #top-block1 figure{
    position: static;
    margin: 20px auto 0;
	width: 80%;
	max-width: 440px;
    text-align: center;
  }
  #top-block1 figure img{
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 959px) {
#top-block1-head{
	display: block;
	padding-top: 20px;
	padding-bottom: 70px;
	padding-right: 0;
	position: relative;
}

#top-block1-head ul{
	position: static;
	right: auto;
	top: auto;
}

#top-block1-head ul li a{
margin: 25px auto 0;
}

}



/*

#top-block2

*/


#top-block2{
	display: flex;
	flex: 1 1 0;
	margin: 75px auto 0;
}

#top-block2 figure{
	text-align: center;
}

#top-block2 figure:nth-child(2){
	border-left: 1px solid #d3d3d3;
	border-right: 1px solid #d3d3d3;
}

#top-block2 figure img{
	margin: 0 auto;
}

#top-block2 figure figcaption{
	font-size: 120%;
	letter-spacing: .1em;
	line-height: 1.6;
	padding-top: 15px;
	padding-bottom: 15px;
}

@media (max-width: 1280px) {
#top-block2{
	margin: 45px auto 0;
}
#top-block2 figure figcaption{
	font-size: 100%;
}
}

/* 959px：上段2つ＋下段1つ */
@media (max-width: 959px){

  #top-block2{
    flex-wrap: wrap;
	max-width: 600px;
	margin: 60px auto 0;
  }

  #top-block2 figure{
    width: 50%;
  }

  /* 3つ目は下段で横幅100% */
  #top-block2 figure:nth-child(3){
    width: 100%;
    margin-top: 25px; /* ちょい余白（好みで） */
  }

  /* いったん縦線解除 */
  #top-block2 figure:nth-child(2){
    border-left: none;
    border-right: none;
  }

  /* 上段の区切り線を「1と2の間」だけにする */
  #top-block2 figure:nth-child(1){
    border-right: 1px solid #d3d3d3;
  }
}

/* 478px：3段（1つずつ） */
@media (max-width: 600px){
  #top-block2{
	max-width: 400px;
  }
  #top-block2 figure{
    width: 100%;
  }

  #top-block2 figure:nth-child(3){
    margin-top: 0;
  }

  /* 縦線は全部いらん */
  #top-block2 figure:nth-child(1){
    border-right: none;
  }


  #top-block2 figure{
    padding: 20px 0;
    border-bottom: 1px solid #d3d3d3;
  }
  #top-block2 figure:last-child{
    border-bottom: none;
  }

}



/*

#top-block3

*/

#top-block3{
	padding-top: 250px;
}

#top-block3 h3{
	font-size: 140%;
	font-weight: 800;
	letter-spacing: .1em;
	line-height: 1;
	padding-top: 80px;
	padding-bottom: 40px;
}

#top-block3 h3 br{
	display: none;
}

@media (max-width: 800px) {
#top-block3 h3{
	text-align: center;
	font-size: 120%;
}
}

@media (max-width: 599px) {
	#top-block3 h3{
		line-height: 1.6;
	}
#top-block3 h3 br{
	display: inline;
}
}


/*

#top-block4

*/

#top-block4{
	margin-top: 140px;
}

.top-block4-in{
	width: 100%;
	max-width: 1920px;
	margin: 0 auto 20px;
	position: relative;
}

.top-block4-in figure{
	position: absolute;
	right: 0;
top: 0;
width: 59%;
height: 100%;
}

@media (max-width: 1280px) {
.top-block4-in figure{width: 55%;}
}

@media (max-width: 1110px) {
.top-block4-in figure{width: 50%;}
}

@media (max-width: 959px) {
.top-block4-in{
	width: 100%;
	margin: 0 auto 50px;
}
.top-block4-in figure{
	position: static;
	right: auto;
top: auto;
width: 100%;
height: 400px;
}
}

@media (max-width: 599px) {
.top-block4-content .read br{
	display: none;
}
}

.top-block4-in h2{
	width: 180px;
	position: relative;
	padding-top: 85px;
	padding-bottom: 60px;
}

.top-block4-in h2::before{
content: " ";
display: block;
top: 0;
left: 0;
width: 100%;
height: 3px;
position: absolute;
z-index: 10;
}

.top-block4-in.no1 h2::before{
	background-color: #c1981b;
}
.top-block4-in.no2 h2::before{
	background-color: #407eca;
}
.top-block4-in.no3 h2::before{
	background-color: #ca4040;
}

.top-block4-in h2 strong{
	font-size: 180%;
	line-height: 1;
	letter-spacing: .08em;
}

.top-block4-in h2 span{
	font-family: "Spectral", serif;
	position: absolute;
	right: 10px;
	top: 95px;
	font-size: 120%;
	font-weight: 400;
}

.top-block4-in.no1 h2 span{
	color: #c1981b;
}
.top-block4-in.no2 h2 span{
	color: #407eca;
}
.top-block4-in.no3 h2 span{
	color: #ca4040;
}

.top-block4-list{
	margin-top: 40px;
}

.top-block4-list li{
	padding-left: 50px;
	padding-top: 20px;
	padding-bottom: 20px;
	line-height: 1.4;
	letter-spacing: .05em;
	font-weight: 500;
}

.top-block4-list li br{
	display: none;
}

@media (max-width: 1150px) {
.top-block4-list li br{
	display: inline;
}
}

@media (max-width: 959px) {
.top-block4-list li br{
	display: none;
}
}

@media (max-width: 599px) {
.top-block4-list li br{
	display: inline;
}
}


.top-block4-in.no1 .top-block4-list li:nth-of-type(1){
	background: url(img/top/ico-setubi1.png) no-repeat left center / 33px auto;
}
.top-block4-in.no1 .top-block4-list li:nth-of-type(2){
	background: url(img/top/ico-setubi2.png) no-repeat left center / 34px auto;
}
.top-block4-in.no1 .top-block4-list li:nth-of-type(3){
	background: url(img/top/ico-setubi3.png) no-repeat left center / 34px auto;
}
.top-block4-in.no1 .top-block4-list li:nth-of-type(4){
	background: url(img/top/ico-setubi4.png) no-repeat left center / 31px auto;
}

.top-block4-in.no2 .top-block4-list li:nth-of-type(1){
	background: url(img/top/ico-lp1.png) no-repeat left 3px center / 24px auto;
}
.top-block4-in.no2 .top-block4-list li:nth-of-type(2){
	background: url(img/top/ico-lp2.png) no-repeat left center / 38px auto;
}
.top-block4-in.no2 .top-block4-list li:nth-of-type(3){
	background: url(img/top/ico-lp3.png) no-repeat left center / 34px auto;
}
.top-block4-in.no2 .top-block4-list li:nth-of-type(4){
	background: url(img/top/ico-lp4.png) no-repeat left center / 36px auto;
}

.top-block4-in.no3 .top-block4-list li:nth-of-type(1){
	background: url(img/top/ico-ss1.png) no-repeat left 2px center / 31px auto;
}
.top-block4-in.no3 .top-block4-list li:nth-of-type(2){
	background: url(img/top/ico-ss2.png) no-repeat left 2px center / 27px auto;
}
.top-block4-in.no3 .top-block4-list li:nth-of-type(3){
	background: url(img/top/ico-ss3.png) no-repeat left center / 31px auto;
}


.top-block4-bt{
	padding-left: 22%;
	padding-top: 35px;
	padding-bottom: 80px;
}

.top-block4-bt a{
	display: block;
	width: 150px;
	border-bottom: 1px solid #676767;
	background: url(img/arrow-b.png) no-repeat right 10px center / 30px auto;
	color: #000;
	text-decoration: none;
	letter-spacing: 0;
	font-family: "Spectral", serif;
	padding: 15px 10px;
}

.top-block4-bt a:hover{
	background: url(img/arrow-b.png) no-repeat right center / 30px auto;
	transition: all 0.3s ease;
}

@media (max-width: 1110px) {
.top-block4-bt{
	padding-left: 30%;
}
}

@media (max-width: 959px) {
.top-block4-bt{
	padding-left: 0;
}
.top-block4-bt a{
	margin: 0 auto;
}
}

/*

#top-block5

*/

#top-block5-in{
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(5, 1fr);
	padding-top: 50px;
	padding-bottom: 30px;
	position: relative;
}

#top-block5-in::before{
	content: " ";
display: block;
bottom: 30px;
left: 0;
width: 100%;
height: 70px;
position: absolute;
z-index: 10;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 100%
  );
}

#top-block5-in figure{
	width: 100%;
	height: 280px;
	overflow: hidden;
	background-color: #000;
}

#top-block5-in figure a:hover img{
	transform: scale(1.1);
transition-duration: 0.3s;
opacity: 0.5;
}

@media (max-width: 1280px) {
#top-block5-in figure{
	height: 230px;
}
}

@media (max-width: 959px) {
#top-block5-in figure{
	height: 200px;
}
}

@media (max-width: 768px) {
#top-block5-in{
	grid-template-columns: repeat(3, 1fr);
}
  #top-block5-in figure:nth-last-child(1){
    display: none;
  }
}

@media (max-width: 479px) {
#top-block5-in figure{
	height: 160px;
}
}

@media (max-width: 400px) {
#top-block5-in figure{
	height: 130px;
}
}

/*

#top-block6

*/

#top-block6{
	width: 90%;
	max-width: 1470px;
	margin: 0 auto;
}

#top-block6-in{
	padding-top: 50px;
}

#top-block6-in a{
	display: block;
	padding: 0 15px;
	color: #000;
	text-decoration: none;
}

#top-block6-in a figure{
	width: 100%;
	height: 255px;
	overflow: hidden;
}

#top-block6-in a:hover figure img{
	transform: scale(1.1);
transition-duration: 0.3s;
}


#top-block6-in a dl{
	padding-top: 20px;
	padding-bottom: 20px;
	background: url(img/arrow-b.png) no-repeat right 10px center / 30px auto;
}

#top-block6-in a:hover dl{
	background: url(img/arrow-b.png) no-repeat right center / 30px auto;
	transition: all 0.3s ease;
}


#top-block6-in a dt{
	font-family: "Spectral", serif;
	letter-spacing: 0;
	display: block;
	padding-bottom: 10px;
}

#top-block6-in a dd{
	font-size: 90%;
}


/* slickのデフォ位置を殺して、下にまとめて配置 */
#top-block6-in{
  position: relative;
  padding-bottom: 70px; /* ドット＆矢印ぶんの余白 */
}

/* ドット（線）のベース */
#top-block6-in .slick-dots{
  position: absolute;
  left: 0;
  right: 280px;           /* ←ここが「矢印を置くスペース」 */
  left: 150px;
  bottom: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* li を「線の幅」担当にする */
#top-block6-in .slick-dots li{
  flex: 1;
  height: 2px;
  margin: 0;
}

/* buttonを線にする（数字は消す） */
#top-block6-in .slick-dots li button{
  width: 100%;
  height: 2px;
  padding: 0;
  border: 0;
  background: #d9d9d9;    /* 非アクティブ線 */
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}

/* 現在地だけ色を変える */
#top-block6-in .slick-dots li.slick-active button{
  background: #2f5b4f;    /* ←現在地の色（画像の緑っぽい想定） */
}

/* 矢印（prev/next）をドット横に置く */
#top-block6-in .slick-prev,
#top-block6-in .slick-next{
  position: absolute;
  bottom: 2px;            /* ドットの位置に合わせて微調整 */
  width: 52px;
  height: 32px;
  border: 1px solid #2f5b4f;
  background: transparent;
  color: #2f5b4f;
  z-index: 5;
  font-size: 0 !important;
  cursor: pointer;
  transition: all 0.3s ease;
}

#top-block6-in .slick-prev{
	background: url(img/arrow-g2-left.png) no-repeat center center / 17px auto;
	right: 214px;
}
#top-block6-in .slick-next{
  background: url(img/arrow-g2-right.png) no-repeat center center / 17px auto;
  right: 150px;
}

/* hover */

#top-block6-in .slick-prev:hover{
	background: url(img/arrow-g2-left.png) no-repeat center left 5px / 17px auto;
	
}

#top-block6-in .slick-next:hover{
	background: url(img/arrow-g2-right.png) no-repeat center right 5px / 17px auto;
}

#top-block6 .bt-more{
	margin: 50px auto 235px;
}

@media (max-width: 959px) {
#top-block6-in .slick-dots{
  right: 130px;           /* ←ここが「矢印を置くスペース」 */
  left: 0;
}
#top-block6-in .slick-prev{
	right: 60px;
}
#top-block6-in .slick-next{
  right: 0;
}
}



/*

#top-block7

*/
#top-block7{
	width: 100%;
	background-color: #f0f1ee;
	padding: 130px 0;
}

#top-block7 #top-block7-in{
  display: flex;
  gap: 70px;
  align-items: flex-start;
}

#top-block7 #top-block7-in figure{
  width: 46%;
  margin: 0;
}

#top-block7 #top-block7-content{
  width: 54%;
}

#top-block7 #top-block7-content h2{
	padding-top: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #d3d3d3;
	display: flex;
	align-items: baseline;
	gap: 40px;
}

#top-block7 #top-block7-content h2 strong{
  font-size: 160%;
  font-weight: 800;
}

#top-block7 #top-block7-content h2 span{
font-family: "Spectral", serif;
font-size: 110%;
font-weight: 400;
letter-spacing: 0;
color: #486c5e;
}

#top-block7 #top-block7-content dl{
  margin: 0;
  padding: 30px 0;
  border-bottom: 1px solid #d3d3d3;
  display: flex;
  gap: 34px;
  line-height: 1.8;
}

#top-block7 #top-block7-content dt{
  width: 90px;
  flex: 0 0 90px;
  margin: 0;
  font-weight: 700;
}

#top-block7 #top-block7-content dd{
  margin: 0;
  
}

#top-block7 #top-block7-content dd span{
  font-weight: 700;
  letter-spacing: 0.02em;
}

#top-block7 #top-block7-content dd a{
  color: inherit;
  text-decoration: none;
}

#top-block7 #top-block7-content dd a:hover{
  text-decoration: underline;
}

#top-block7 #top-block7-content .sp{
	display: none;
}


@media (max-width: 1080px) {
#top-block7 #top-block7-in figure{
  width: 40%;
}
#top-block7 #top-block7-content{
  width: 60%;
}
#top-block7 #top-block7-content h2{
	padding-top: 0;
}
#top-block7 #top-block7-content dt{
  width: 60px;
  flex: 0 0 60px;
}
}

@media (max-width: 959px) {
	#top-block7 #top-block7-in{
  display: block;
  gap: 0;
  align-items: flex-start;
}

#top-block7 #top-block7-in figure{
  width: 100%;
  max-width: 350px;
  margin: 0 auto 45px;
}
#top-block7 #top-block7-content{
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
}

@media (max-width: 510px) {
#top-block7 #top-block7-content dl{
  margin: 0;
  padding: 30px 0;
  border-bottom: 1px solid #d3d3d3;
  display: block;
  gap: 0;
  line-height: 1.8;
}

#top-block7 #top-block7-content .space{
	display: none;
}

#top-block7 #top-block7-content .sp{
	display: inline;
}

}



/*

#foot-recruit-contact

*/

#foot-recruit-contact{
	width: 100%;
	height: 680px;
	display: flex;
	position: relative;
}

#foot-recruit-contact::before{
	content: " ";
display: block;
top: 0;
left: 50%;
width: 1px;
height: 100%;
position: absolute;
z-index: 10;
background-color: #fff;
}

#foot-recruit,
#foot-contact{
	flex: 1 1 0;
	position: relative;
}

#foot-recruit{
	background: url(img/photo-recruit.jpg) no-repeat center center / cover;
}

#foot-contact{
	background: url(img/photo-contact.jpg) no-repeat center center / cover;
}

#foot-recruit-in,
#foot-contact-in{
	width: 500px;
	background-color: #fff;
	position: absolute;
	right: 30px;
	bottom: 30px;
	padding: 45px;
}

#foot-recruit-contact h2{
	font-size: 130%;
	line-height: 1;
	letter-spacing: .05em;
	padding-bottom: 25px;
}

#foot-recruit-contact p{
	font-size: 83%;
	line-height: 1.8;
	padding-bottom: 15px;
}

#foot-recruit-contact li a{
	display: block;
	padding-left: 25px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #000;
	font-weight: 600;
	font-size: 95%;
	text-decoration: none;
}

#foot-recruit-in ul{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

#foot-recruit-in li a{
	background: url(img/ico-check.png) no-repeat left center / 19px auto;
}

#foot-recruit-contact li a:hover{
	color: #355046;
}

#foot-contact li a{
	background: url(img/ico-mail-b.png) no-repeat left center / 18px auto;
}


@media (max-width: 1120px){

  #foot-recruit-contact{
    flex-direction: column;
    height: auto;
  }

  /* 真ん中の縦線は消す */
  #foot-recruit-contact::before{
    display: none;
  }

  #foot-recruit,
  #foot-contact{
    width: 100%;
    min-height: 680px;
  }

  #foot-recruit-in,
  #foot-contact-in{
    width: calc(100% - 60px);
    right: 30px;
    left: 30px;
    bottom: 30px;
  }
}

@media (max-width: 959px) {
#foot-recruit{
	background: url(img/photo-recruit.jpg) no-repeat left top / cover;
}
}

@media (max-width: 500px) {
	#foot-recruit{
	background: url(img/photo-recruit.jpg) no-repeat left 20% top / cover;
}
#foot-recruit-in ul{
	display: block;
}
}

@media (max-width: 360px) {
#foot-recruit-in,
#foot-contact-in{
	padding: 25px;
}
}

/*

footer

*/

footer{
	background-color: #f0f1ee;
	padding: 170px 0;
}

footer #foot-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid #d3d3d3;
}

footer #foot-top h2{
  line-height: 1;
}

footer #foot-top ul{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 55px;
  flex-wrap: wrap;
}

footer #foot-top ul li a{
  color: inherit;
  text-decoration: none;
  font-size: 90%;
  font-weight: 400;
  letter-spacing: 0.02em;
}

footer #foot-top ul li a:hover{
  text-decoration: underline;
}

footer #foot-top ul li:last-child a{
	display: inline-block;
	padding-left: 30px;
	min-height: 17px;
	background: url(img/ico-mail-b.png) no-repeat 0 0 / 20px auto;
}


footer #foot-body{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 90px;
  row-gap: 34px;
  padding: 56px 0 62px;
}

footer #foot-body .foot-body-content h3{
  margin-bottom: 22px;
  font-size: 100%;
  font-weight: 700;
  letter-spacing: 0.02em;
}

footer #foot-body .foot-body-content h3 a{
  color: inherit;
  text-decoration: none;
}

footer #foot-body .foot-body-content h3 a:hover{
  text-decoration: underline;
}

footer #foot-body .foot-body-content ul li{
  margin-bottom: 12px;
}

footer #foot-body .foot-body-content ul li a{
  color: inherit;
  text-decoration: none;
  font-size: 85%;
}

footer #foot-body .foot-body-content ul li a:hover{
  text-decoration: underline;
}


footer #foot-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 50px;
  border-top: 1px solid #d3d3d3;
}

footer #foot-foot p{
  font-size: 70%;
  letter-spacing: 0;
  font-family: "Spectral", serif;
}

footer #foot-foot ul{
  display: flex;
  gap: 18px;
}

footer #foot-foot ul li a{
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}

footer #foot-foot ul li a:hover{
  text-decoration: underline;
}

/* =========================
  レスポンシブ
========================= */
@media (max-width: 1060px){
footer #foot-top ul{
  gap: 25px;
}
}

@media (max-width: 1000px){
  footer #foot-body{
    column-gap: 50px;
  }
}

@media (max-width: 920px){
  footer #foot-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  footer #foot-top ul{
    justify-content: flex-start;
    gap: 22px 26px;
  }

  footer #foot-body{
    grid-template-columns: repeat(2, 1fr);
    padding: 40px 0 44px;
    column-gap: 38px;
  }

  footer #foot-foot{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 520px){
  footer #foot-body{
    grid-template-columns: 1fr;
  }
}

#smp-menu{
width: 98%;
position: fixed;
z-index: 100;
background-color: #355046;
top: 0;
right: -100%;
bottom: 0;
width: 90%;
height: 100%;
max-width: 700px;
overflow-y: auto;
padding-top: 150px;
transition: all 0.3s ease;
}

#smp-menu.active{
  right: 0;
}

#smp-menu a{
	color: #fff;
	text-decoration: none;
}

#smp-top{
	width: 80%;
	margin: 0 auto;
}

#smp-top ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 10px;
  font-size: 95%;
  line-height: 1;
}
#smp-top ul li:first-child{
  grid-column: 1 / -1;
}

#smp-top ul li{
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
#smp-top ul li a{
  display:block;
  padding: 20px;
  background: url(img/arrow-w.png) no-repeat right 10px center / 14px auto;
  transition: all 0.3s ease;
}

#smp-top ul li a:hover{
	background: url(img/arrow-w.png) no-repeat right 5px center / 14px auto;
}


#smp-top ul li:nth-of-type(4),
#smp-top ul li:nth-of-type(5){
border-bottom:0;
}


#smp-body{
	width: 80%;
	margin: 0 auto;
}

#smp-body h3{
	border-top: 1px solid rgba(255,255,255,0.3);
}

#smp-body h3 a{
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 20px;
	display: block;
background: url(img/arrow-w.png) no-repeat right 10px center / 14px auto;
transition: all 0.3s ease;
}
#smp-body h3 a:hover {
    background: url(img/arrow-w.png) no-repeat right 5px center / 14px auto;
}

#smp-body ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 10px;
  font-size: 95%;
  line-height: 1;

}

#smp-body ul li a{
  display:block;
  padding: 10px 20px;
  background: url(img/arrow-w.png) no-repeat right 10px top 14px / 14px auto;
  transition: all 0.3s ease;
}

#smp-body ul li a:hover{
	background: url(img/arrow-w.png) no-repeat right 5px top 14px / 14px auto;
}

#smp-body ul li:last-child a{
	padding: 10px 20px 40px;
}

@media screen and (max-width: 750px){
  #smp-body{
	padding-bottom: 50px;
  }
  #smp-top ul,
  #smp-body ul{
    grid-template-columns: 1fr;
  }

  /* 1列になった時は最初のliの特別指定いらんので解除 */
  #smp-top ul li:first-child{
    grid-column: auto;
  }

  /* 下線消してた指定も不要になるので自然に戻す */
  #smp-top ul li:nth-of-type(4),
  #smp-top ul li:nth-of-type(5){
    border-bottom: 1px solid rgba(255,255,255,0.3);
  }
}


@media screen and (max-width: 400px){

  #smp-top ul,
  #smp-body ul{
    font-size: 85%;
  }

  /* 矢印アイコンを消す */
  #smp-top ul li a,
  #smp-top ul li a:hover,
  #smp-body ul li a,
  #smp-body ul li a:hover{
    background: none;
    padding-right: 0; /* 右余白だけ残して見た目安定 */
  }
}




/*

contents

*/

#contents-2{
	width: 90%;
	max-width: 1430px;
	margin: 0 auto;

}

.contents-2-container{
	position: relative;
	padding-left: 255px;
	margin-top: 180px;
}

.contents-2-container h2{
	position: absolute;
	left: 0;
	top:0;
}

.contents-2-container h2 span{
	display: inline-block;
	border-bottom: 2px solid #486c5e;
	padding-bottom: 15px;
	font-size: 120%;
	letter-spacing: .05em;
	line-height: 1;
}

.contents-ta dl{
	position: relative;
	padding-left: 150px;
	margin-bottom: 25px;
	line-height: 1.6;
}

.contents-ta dl dt{
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 800;
}
.company_address + .company_address {
margin-top: 1em;
}
.company_address_ttl {
font-weight: bold;
}

@media (max-width: 1280px) {
.contents-2-container{
	padding-left: 200px;
}
}

@media (max-width: 1080px) {
.contents-2-container{
	padding-left: 0;
}
.contents-2-container h2{
	position: relative;
	left: auto;
	top:auto;
	padding-bottom: 45px;
}
}

@media (max-width: 599px) {
.contents-ta dl{
	padding-left: 0;
}
.contents-ta dl dt{
	position: relative;
	left: auto;
	top: auto;
	font-weight: 800;
	display: block;
}
}

.map{
	display: block;
	width: 100%;
	height: 480px;
	border: 0;
	margin-top: 50px;
}



/*-- ページャー --*/
.wp-pagenavi {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 50px;
font-family: "arial",sans-serif;
line-height: 1;
}
.wp-pagenavi .pages {
margin-right: 10px;
}
.wp-pagenavi .page,
.wp-pagenavi .current {
width: 30px;
height: 30px;
margin: 2px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
background-color: #fff;
border-radius: 100%;
}
.wp-pagenavi .current {
font-weight: bold;
color: #fff;
background-color: #aaa;
}
.wp-pagenavi .nextpostslink {
margin-left: 10px;
font-size: 20px;
text-decoration: none;
}