@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 120px;
}
html {scroll-behavior: smooth;}

object {pointer-events: none;}
.sp {display: none !important;}
a[href^="tel:"] {pointer-events: none;}

.pcFlex{display: flex;}
.img_r {overflow: hidden;}
.img_r>img {float: right;
    width: 33%;
    margin-left: 15px;
    margin-bottom: 15px;
}

.inner800{
  width: 800px;
  width: min(100%, 800px);
  margin-right: auto;
  margin-left: auto;
}

.inner1000{
  width: 1000px;
  width: min(100%, 1000px);
  margin-right: auto;
  margin-left: auto;
}


/*タイトル
========================================== */


/*
　テキスト
========================================== */
p,dt,dd,li,td,th,input{
font-size:16px;
}

/*
　ボタン
========================================== */


/* =======================================
	header
========================================== */

#top header {
  position: absolute;
  top:0;
	left: 0;
	width: 300px;
	height: 895px;
  background:rgba(255,255,255,.9);
  padding-top: 70px;
  z-index: 100
}

#top header .inner1000{
  width: 300px
}

#top header #logo{
border-bottom: 1px solid var(--base);
  padding-left: 60px;
  padding-bottom: 18px;
  margin-bottom: 36px;
}
#top header #logo img{
	width: 192px;
}

.pgs header .inner1000{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pgs header #logo{
  width: 160px;
  display: grid;
  place-content: center;
  margin-left: 1.6vw;
}

#js-menu-bg{
  display: none
}


/* =======================================
	gnavi
========================================== */
#top .gnavi{
	margin-left: 60px;
}
#top #gnaviList{
  margin-bottom: 100px;
}
#top #gnaviList li{
  margin-bottom: 24px;
  font-weight: 600
}
#top #gnaviList .sub{
  margin-left: 14px;
  margin-top: 16px
}
#top #gnaviList .sub li{
  margin-bottom: 16px; 
}

#top #gnaviList .sub li:last-child{
  margin-bottom: 0;
}

#top .gnavi .fb{
  position: absolute;
  bottom: 100px;
  left: 0;
  margin-left: 60px;
}

.pgs .gnavi{
  display: flex;
  align-items: flex-end;
  margin: 0 0 0 auto;
}

.pgs .gnavi .fb{
  width: 32px;
  margin-bottom: 2px;
}

.pgs #gnaviList{
  display: flex;
  justify-content: center;
  margin-left: 60px
}

.pgs #gnaviList > li{
  border-left: 1px solid #ddd;
}

.pgs #gnaviList > li > a{
	display: block;
	line-height: 1;
	padding: 10px min(1.4vw,20px);
}

.pgs #gnaviList .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
.pgs #gnaviList .sub{
	position: absolute;
	z-index: 2;
	display: none;
	visibility: hidden;
	transition: all 0.6s ease-in-out;
}
.pgs #gnaviList .sub ul{
	padding-left: 20px;
}
.pgs #gnaviList .sub li{
	text-align: left;
}
.pgs #gnaviList .sub li a{
	white-space: nowrap;
	display: block;
	padding: 10px 20px;
	background:rgba(0,64,128,0.7);
  color: #fff;
}
.pgs #gnaviList .sub li a::before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 0.3em;
	height: 1px;
	margin-right: 0.5em;
	background: #fff;
	transform: translateY(-2px);
}

.pgs .headBtns{
  display: flex;
  width: 17rem;
  margin-left: 1em
}


/* =======================================
	footContact
========================================== */
.footContact h2{
  margin-bottom: 40px;
}
.footContact .pcFlex{
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

/* =======================================
	footer
========================================== */
footer{
	padding-top: 100px;
  padding-bottom: 80px
}

footer .pcFlex{
  justify-content: space-between;
  padding-bottom: 68px
}

footer li{
  margin-bottom: 32px;
}
footer .sub li{
  margin-bottom: 5px;
  margin-left: 1em
}
footer .address{
	margin-bottom: 10px;
}

footer .address .footLogo{
  background: #fff;
  padding: 10px;
  margin-bottom: 24px;
}
footer .address .footLogo img{
  width: 140px
}

footer .address p{
  margin-bottom: 20px
}

#pageTop{
	width: 66px;
  height: 66px;
}

/* =======================================
	TOP
========================================== */
#mv .slide{
  width: 100vw;
  height: 894px;
  overflow: hidden;
  position: relative
}
#mv .slide1{
  background: url("../images/mv01.jpg") no-repeat;
  background-size: cover
}

#mv .slide2{
  background: url("../images/mv02.jpg") no-repeat;
  background-size: cover
}

#mv .slide figure{
  position: absolute;
  bottom: 180px;
  right: calc(50vw - 500px)
}

@media screen and (max-width:999px){
  #mv .slide figure{
    right: 20px;
  }
}

#topLead{
  padding-top: 86px;
  padding-bottom: 106px;
  position: relative;
}
#topLead h2{
  font-size: 80px;
  font-weight: 400;
  letter-spacing: .05em;
  margin-bottom: 30px
}
#topLead h2 span{
  display: block;
  font-size: 42px;
}
#topLead h3{
  font-size: 50px;
  font-weight: 400;
  margin-bottom: 50px;
  padding-left: 40px
}
#topLead h3 span{
  display: block;
  font-size: 32px;
}

#topLead .left{
  width:63.4%;
  z-index: 100
}
#topLead .right{
  padding-top: 154px;
  z-index: 50
}
#topLead .right p{
  margin-bottom: 36px;
  margin-left: 48px;
  width: 320px;
  line-height: 1.8
}

#topLead .right p span{
  font-size: 24px
}

#topLead::after{
  display: block;
  position: absolute;
  right: 0;
  top:140px;
  width: 50vw;
  height: 80%;
  content: '';
  background: #fff;
  z-index: 0
}

#topWorks .inner1000{
  padding:110px 0 50px;
  position: relative
}

#topWorks h2{
  font-size: 52px;
   -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: #333333;
  font-weight: 400;
  letter-spacing: 0.05em;
  position: absolute;
  top:170px;
  left: calc( 50% - 52px)
}

#topWorks h2 span{
  -ms-writing-mode:horizontal-tb;
    writing-mode:horizontal-tb;
  font-size: 16px;
  letter-spacing: 1em;
  color: var(--grey);
  margin-top: 50px
}
#topWorks .inner1000 li{
  width: 365px;
  margin-bottom: 45px;
}

#topWorks .inner1000 li span{
  padding: 16px 24px;
}
#topWorks .inner1000 li span:after{
  right:24px
}

#topNews{
  padding-bottom: 50px;
}

#topNews h2{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #333333;
  width: 220px;
  height: 370px;
  color: #fff;
  font-size: 42px;
   -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
#topNews h2 span{
  -ms-writing-mode:horizontal-tb;
    writing-mode:horizontal-tb;
  font-size: 16px;
  letter-spacing: 1em;
  margin-top: 34px;
  margin-left: 1em
}

#topNews .pcFlex{/*
  align-items: flex-end;*/
}

#topNews div.cont{
  position: relative;
  display: grid;
  align-items: center;
  margin-left: 60px;
  padding: 60px 0;
  flex: 1;
}
#topNews div.cont .btnWrap{
  position: absolute;
  bottom: 0;
  right: 0;  
}

#topNews ul li:not(:last-of-type){
  margin-bottom: 32px;
}


/* =======================================
	pgs common
========================================== */

.pgs section{
  padding: 60px 0;
}
.pgs section p:not(:last-child){
  margin-bottom: 25px;
}

.pgs section .inner1000{
  background: #fff;
  padding: 1.5% 2% 3% 3%;
}
.pgs section .inner1000.pcflex{
  max-width: calc(100% - 8%);
}

.pgs section .innerBox{
  margin-left: 3%;
  padding-top: 20px
}
.pgs section .pcflex .innerBox{
  width: 97%
}
/*titles*/
.pgs h1{
  margin-bottom: 60px;
}
.pgs h1::after{
  width: max(54%, 300px);
}
.pgs section .inner1000 h2{
-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
/*anchor*/
.pgs .anchorWrap .pcFlex{
  gap: 30px 2%;
}
.pgs .anchorWrap dl{
  flex: 1;
}

/*txtImgBox*/
.txtImgBox.pcFlex{
  align-items: flex-start;
  justify-content: space-between;
}
.txtImgBox .txts{
  width: 580px;
}
.txtImgBox figure,
.txtImgBox .img{
  width: calc(100% - 600px);
  
}


/*-----------------------------
		assembly
-----------------------------*/
#assemblyFeature .featureList > li:not(:nth-child(1)){
  width: 50%;
  margin-top: -80px;
}
#assemblyFeature .featureList > li:nth-child(1){
  width: 100%;
}
.assemblyIntroduceBox .tabWrap dt{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 40px;
}


.tabWrap dt::before, .tabWrap dt::after{  
  top: 50%;
}
.tabWrap dt{
}
.tabWrap dt span{
  display: inline-block;
}
.flowList{
  display: flex;
  justify-content: space-between;
}

.flowList li{
  width: 25%;
}
.flowList li:nth-child(1){
  padding-right: 2%;
}
.flowList li:nth-child(2),
.flowList li:nth-child(3){
  padding-right: 5%;
}
.flowList li:nth-child(2) div::after,
.flowList li:nth-child(3) div::after{
  position: absolute;
  top: 50%;
  left: 100%;
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
  border-radius: 0 20px 0 0;
	border-style: solid;
  border-width: 50px 0 50px 40px;
  border-color: transparent transparent transparent var(--base);
  transform: translate(0, -50%);
}
.packingBox .flowList li:nth-child(2) div::after,
.packingBox .flowList li:nth-child(3) div::after{
  border-color: transparent transparent transparent var(--green);
}

/*-----------------------------
		sales
-----------------------------*/
.sewingEquipmentWrap dl{

}
.pcFlex.howtoWrap{
  justify-content: space-between;
}
.pcFlex.howtoWrap .howtoBox{
  width: 49%;
}

/*****************  ABOUT ***********************/
#works .flex{
  justify-content: space-between;
}
#works .flex li{
  width: 48%;
  margin-bottom: 30px
}

#works .flex li p{
  padding: 10px
}


.agriBlock figure{
  width: 30%;
  margin-right: 20px
}
.agriBlock .txt{
  margin-right: 20px;
}
.agriBlock .txt h4{
  margin-bottom: 15px;
}

.agriBlock figure.farmitem{
  width: 20%;
}

.pgs section .agriBlock p:not(:last-child){
  margin-bottom: 10px
}


/*-----------------------------
		work/agri
-----------------------------*/
#agri{}

#agriMV .leadTxt span{
}
#agriMV .jas img{
  width: 80px;
}

#agriMV .txts h2{
  font-size: min(3.6vw, 24px);
}
#agriMV .leadTxt{
  margin: -4em 0 0 5em;
}
#agriMV .leadTxt span{
  font-size: min(28vw, 28px);
}
#eg-farm01Jas.txtImgBox figure {
  width: calc(100% - 400px);
}
#agriMV .jas{
  top: 20px;
  right: 20px;
  gap: 0 10px;
}

.eg-farm02IcWrap{
  flex: 1;  
}
.eg-farm02IcWrap .sdgsList{
  width: 70%;
  margin-right: 20px;
}

/*-----------------------------
		work/architectural
-----------------------------*/
#architectural01 .pcFlex.designBox{
  gap: 20px;
}
#architectural01 .pcFlex.designBox .txts{
  width: 30%;
}
#architectural01 .pcFlex.designBox figure{
  flex: 1;
}

#architectural02 .renovbox{
  align-items: center;
  gap: 20px;
}
#architectural02 .pcFlex.renovbox .txts{
  width: 590px;
}
#architectural02 .sdgsList img{
  height: 67px;
}
#architectural02 .pcFlex.renovbox figure{
  flex: 1;
}
#architectural02 .renovbox figure img{
}
#architectural02 .renovExampletBox figure{
  width: calc((100% - 4%)/3);
}