@charset "UTF-8";
/*　====================== 下層共通 ======================　*/
header.kasou {
padding:5px 10px;
background-color: #fff;
width: 100%;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
position: fixed;
}
header.kasou .flex{
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
gap: 15px;
}
header.kasou>.flex{
gap:50px;
}
header.kasou .nav.flex .btn.flex a{
-webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.25);
        box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.25);
}
header.kasou a {
color: #111;
}
header.kasou .nav.flex, header.kasou .nav.flex .nav1.flex, header.kasou .nav.flex .btn.flex {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
gap: 15px;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}
header.kasou .hamburger{
top:15px;
}
.pankuzu{
padding: 3px 10px;
background-color: #38502F;
}
.pankuzu .flex{
-webkit-box-pack: left;
    -ms-flex-pack: left;
        justify-content: left;
gap: 30px;
row-gap: 0;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.pankuzu .flex li span{
color:#fff;
font-size: 14px;
}
.pankuzu .flex li{
position: relative;
}
.pankuzu .flex li::after{
position: absolute;
right: -20px;
top:50%;
-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
        transform: translateY(-50%);
content: '▶';
font-size: 10px;
color:#fff;
}
.pankuzu .flex li:last-child:after{
content: none;
}
.kasou #firstview{
position: relative;
width: 100%;
margin-top: 80px;    
height: 30vh;
background-image: url(../img/works-back.webp);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
.kasou #firstview .kasou-title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
position: absolute;
height:100px;    
}
.kasou #firstview .kasou-title img{
height: 100%;
width: auto;
max-width: none;
}
@media screen and (max-width:1210px){
header.kasou>.flex {
gap: 15px;
}
.kasou #firstview {
margin-top: 150px;
}
}
@media screen and (max-width:768px){
header.kasou{
z-index: 10;
padding: 10px;
background-color: #fff;
position: fixed;
top:0;
left: 0;
}
header.kasou a {
color: #fff;
}
.kasou #firstview {
margin-top: 75px;
height: 15vh;
}
.kasou #firstview .kasou-title{
height:60px;    
}
header.kasou .flex {
-webkit-box-pack: left;
    -ms-flex-pack: left;
        justify-content: left;
}
header.kasou .hamburger{
top:10px;
}
header.kasou .nav.flex, header.kasou .nav.flex .nav1.flex, header.kasou .nav.flex .btn.flex {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-column-gap: 30px;
   -moz-column-gap: 30px;
        column-gap: 30px;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}
header.kasou .nav.flex .btn.flex li{
width: 100%;
}
}
/*　====================== 下層共通 ======================　*/
/*　====================== company ======================　*/
.company #firstview{
background-image: url(../img/company-back.webp);
}
.company #sec2 table{
width: 80%;
margin: 0 auto;
}
.company #sec2 table tbody{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}
.company #sec2 table tbody tr{
padding: 30px 0;
border-bottom: 1px solid #B4CCAA;
}
.company #sec2 table tbody tr:last-child{
border-bottom:0;
padding:30px 0 0;
}
.company #sec2 table tbody th{
display: block;
width: 30%;
color:#38502F;
}
.company #sec2 table tbody td{
display: block;
width: 70%;
}
@media screen and (max-width:768px){
.company #sec2 table{
width: 100%;
}
.company #sec2 table tbody tr.flex{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
padding: 15px 0;
}
.company #sec2 table tbody tr:last-child{
padding:15px 0 0;
}
.company #sec2 table tbody th,
.company #sec2 table tbody td{
width: 100%;
text-align: left;
}
}
/*　====================== company ======================　*/
/*　====================== service ======================　*/
.service #sec1{
    background-image: url(../img/service/sec1-back-pc.webp);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
.service .service-inner{
position: relative;
width: 100%;
}
.service .service-inner>.img{
position: relative;
width: 45vw;
z-index: 2;
}
.service .service-inner.right>.img{
margin: 0 0 0 auto;
}
.service .service-inner .text-wrap{
position: absolute;
width: 65%;
background-color: #fff;
-webkit-box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.25);
        box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.25);
z-index: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.service .service-inner.left  .text-wrap{
padding:50px 50px 50px 20vw;
right: 5%;
}
.service .service-inner.right .text-wrap{
padding:50px 20vw 50px 50px;
left: 5%;
}
.service>#sec1>div>ul.flex{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    row-gap: 10vh;
}
.service .service-inner>.text-wrap>h3{
    font-size: 40px;
    letter-spacing: 0.13em;
    line-height: 1;
    color: #fff;
    background-color: #38502F;
    padding:7px 15px;
    margin-bottom: 10px;
    font-family: "Noto Serif JP", serif;
    font-weight: 900;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.service .service-inner>.text-wrap p{
    margin-bottom: 50px;
}
.service .service-inner>.text-wrap p span{
    font-weight: 900;
    background:-o-linear-gradient(transparent 60%, #B4CCAA 60%);
    background:-webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #B4CCAA));
    background:linear-gradient(transparent 60%, #B4CCAA 60%);
}
.service .service-inner .text-wrap h4{
    color: #38502F;
    margin-bottom: 10px;
    font-size: 30px;
    font-weight: 600;
}
.service .service-inner .text-wrap .article-wrap li{
    width: 48%;
}
@media screen and (max-width:1200px){
.service>#sec1>div>ul.flex {
row-gap: 20vh;
}
}
@media screen and (max-width:1080px){
.service>#sec1>div>ul.flex {
row-gap: 30vh;
}
.service #sec1{
    padding: 250px 0;
}
}
@media screen and (max-width:900px){
.service .service-inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.service .service-inner.left .text-wrap {
    padding: 15px;
    right: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
}
.service .service-inner.right .text-wrap {
    padding: 20px;
    left: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
}
.service>#sec1>div>ul.flex {
row-gap: 30vh;
}
.service .service-inner .text-wrap {
    position: relative;
    width: 90%;
}
.service .service-inner.right>.img {
    margin: 0 auto;
}
.service>#sec1>div>ul.flex {
    row-gap: 15vh;
}
.service .service-inner>.img {
    width: 70%;
}
}
@media screen and (max-width:768px){
.service #sec1 {
    padding: 100px 0;
    background-image: url(../img/service/sec1-back-sp.webp);
}
.service .service-inner>.text-wrap>h3 {
    font-size: 25px;
}
.service .service-inner .text-wrap h4 {
    font-size: 20px;
}
.service .service-inner>.text-wrap p {
    margin-bottom: 30px;
}
}
/*　====================== service ======================　*/
/*　====================== thanks ======================　*/
.thanks #sec1 h2{
text-align: center;
font-weight: 600;
font-size: 30px;
margin-bottom: 30px;
}
.thanks #sec1 .menu-wrap{
margin-bottom: 30px;
}
.thanks #sec1 a{
display: block;
text-align: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
border-bottom: 1px solid #111;
}
/*　====================== Thanks ======================　*/

/*　====================== 記事 ======================　*/
.article-wrap li a{
display: block;
overflow: hidden;
}
.article-wrap .flex{
row-gap: 30px;
}
.article-wrap .wrap .img{
position: relative;
border-radius: 5px;
overflow: hidden;
width: 100%;
margin: 0;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.25);
        box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.article-wrap .wrap{
position: relative;
margin-bottom: 5px;
}
.article-wrap .wrap .img::before{
position: absolute;
content:'';
width: 100%;
height: 100%;
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(36, 36, 36, 0.6) 95%);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(95%, rgba(36, 36, 36, 0.6)));
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(36, 36, 36, 0.6) 95%);
}
.article-wrap li a .wrap .img img{
height: 20vh;
width: 100%;
-o-object-fit: cover;
   object-fit: cover;
vertical-align: top;
}
.article-wrap li a .wrap .text{
position: absolute;
width: 100%;
height: 100%;
border-radius: 5%;
left: 0;
top:0;
font-size: 12px;
}
.article-wrap li a .wrap .text .category{
position: absolute;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 12px;
color: #fff;
line-height: 1;
padding: 3px 8px;
border-radius: 15px;
background-color: #38502F;
left: 3%;
top:5%;
}
.article-wrap ul li a .wrap .text time{
position: absolute;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 14px;
color: #fff;
line-height: 1;
padding: 3px 8px;
border-radius: 15px;
left: 3%;
bottom: 5%;
}
@media screen and (max-width:768px){
.category #sec2 ul.flex li {
width: 20%;
}
}
/*　====================== category-works ======================　*/
.category #sec2 ul.flex{
padding: 0 5vw;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
max-width: 1500px;
width: 80%;
margin: 0 auto;
}
.category #sec2 ul.flex li{
width: 21%;
}
@media screen and (max-width:768px){
.category #sec2 ul.flex li{
width: 100%;
}
}
/*　====================== category-works ======================　*/
/*　====================== single-works ======================　*/
.single #sec1{
background-image: none;
padding: 100px 0;
}
.single #sec1 .main-wrap{
width: 75%;
}
.single #sec1 .article-wrap{
width: 20%;
}
.single #sec1 .article-wrap ul{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
}
.single #sec1>.flex{
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: start;
}
.single #sec1 .date-category{
-webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: start;
gap:30px;
margin-bottom: 20px;
}
.single .main-wrap h2.post-title{
font-size: 30px;
font-weight: 700;
margin-bottom: 20px;
color: #38502F;
}
.single #sec1 .date-category .category{
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
line-height: 1;
padding: 3px 8px;
border-radius: 15px;
background-color: #38502F;
}
.single #sec1 .date-category .category a{
color: #fff;
}
.single .main-wrap h3{
font-size: 25px;
font-weight: 600;  
margin-bottom: 20px;
}
.single .main-wrap h4{
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
}
.single #sec1 .main-wrap img,.single #sec1 .main-wrap p{
margin-bottom: 20px;
text-align: left;
width: 100%;
height: auto;
}
.single.works .article-wrap li a .wrap .img img{
height: 15vh;
}
@media screen and (max-width:900px){
.single #sec1>.flex {
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
    -ms-flex-direction:column;
        flex-direction:column;
row-gap: 50px;     
}
.single #sec1 .main-wrap {
width: 100%;
}
.single #sec1 .article-wrap {
width: 30%;
margin: 0 auto;
}

.single.works .article-wrap li a .wrap .img img{
height: 25vh;
}
}
@media screen and (max-width:768px){
.single #sec1 {
padding: 50px 0;
}
.single #sec1 .article-wrap {
width: 80%;
}
.single .main-wrap h2.post-title{
font-size: 20px;
}
.single .main-wrap h3{
font-size: 18px;
}
.single .main-wrap h4{
font-size: 16px;
}
}
/*　====================== single-works ======================　*/
/*　====================== ページネーション ======================　*/
.wp-pagenavi {
	margin-top: 4vw;
    margin: 0 auto;
    width: 90%;
    max-width: 1080px;
    margin-top: 50px;
}
.wp-pagenavi .pages{
	display: none;
}
.wp-pagenavi .page {
display: inline-block;
text-align: center;
width: 42px;
line-height: 42px;
border: solid 1px #333;
margin: auto 6px;
transition: 0.3s ease-out;
}
.wp-pagenavi .page:hover {
background: #38502F;
color: #fff;
}
.wp-pagenavi .current {
display: inline-block;
text-align: center;
width: 42px;
line-height: 42px;
color: #fff;
background: #333;
border: solid 1px #333;
margin: auto 6px;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .extend,
.wp-pagenavi .first,
.wp-pagenavi .last {
line-height: 42px;
margin: auto 8px;
transition: 0.3s ease-out;
}
.wp-pagenavi .previouspostslink:hover,
.wp-pagenavi .nextpostslink:hover,
.wp-pagenavi .first:hover,
.wp-pagenavi .last:hover {
color: #38502F;
}

.ap-wrap{
	display: block;
	margin-bottom: 50px;
}
.ap-wrap img{
	width: 80%;
    max-width: 800px;
    margin: 0 auto;
}
/*　====================== ページネーション ======================　*/
/*　====================== category-news ======================　*/
.single.news .main-wrap{
padding: 50px;
background-color: #e0f5d9;
}
.category.news  #sec2 .article-wrap>ul.flex {
    padding: 0;
}
.category.news  #sec2 .article-wrap ul {
    width: 100%;
}
.category.news  #sec2 .article-wrap>ul.flex li,
.single.news  #sec2 .article-wrap>ul.flex li{
    width: 100%;
}
.category.news .article-wrap li a{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;    
    gap: 10px;
}
.category.news .single #sec1 .article-wrap>ul.flex{
    row-gap: 30px;
}
.category.news .article-wrap ul.flex li a,
.single.news .article-wrap ul.flex li a{
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
}
.category.news .article-wrap ul.flex .category,.single.news .article-wrap ul.flex .category{
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
line-height: 1;
padding: 2px 5px;
background-color: #38502F;
font-size: 14px;
color: #fff;
}
.category.news .article-wrap ul.flex time,.single.news .article-wrap ul.flex time{
font-size:14px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
color: #38502F;
}
.single.news .article-wrap li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
gap: 5px;
}
.category.news .article-wrap.side ul.flex h4{
width: 100%;
}
@media screen and (max-width:1200px){

}
@media screen and (max-width:768px){
.single.news .main-wrap{
padding: 20px;
}
}
/*　====================== category-works ======================　*/