/* --- font --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&family=Shippori+Mincho:wght@700&display=swap');
/* --- ここまでfont --- */


/* --- common --- */
.onlyPC { display: block!important; }
.onlySP { display: none!important; }

#customWrap ,#adjustmentArea {font-family: 'Noto Sans JP', sans-serif ,'Shippori Mincho', serif; font-weight: 500; letter-spacing: 0.05em;}
.contentsWrap { padding: 50px 0 80px;}
.contents { width: 976px; margin: 0 auto;}

/* h1,h2,h3,.topCatchCopy { font-family: 'Shippori Mincho', serif;   text-align: center; line-height: 160%; letter-spacing: 0.225em;} */
h1,h2,h3,.topCatchCopy { font-family: 'Shippori Mincho', serif;   text-align: center; line-height: 160%; letter-spacing: 0.125em;}

h1 { 
  font-size: 36px;
  padding-bottom: 15px;
  margin-bottom: 80px;
  position: relative;
}
h1 span ,.topTextBox h2 span {
  font-family: 'Noto Sans JP', sans-serif;
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  color: #21366E80;
}
h1:not(.intvwTtlBox h1)::before {
  content: '';
  width: 40px;
  height: 1px;
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #21366E;
}

h2 { font-size: 30px; margin-bottom: 30px;}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb50 {
  margin-bottom: 50px;
}

.mb60 {
  margin-bottom: 60px;
}

.mb70 {
  margin-bottom: 70px;
}

.mb80 {
  margin-bottom: 80px;
}

.mt10 {
  margin-top: 10px;
}

img { max-width: 100%; vertical-align: bottom;}

.ttl ,.name {  font-family: 'Shippori Mincho', serif;}

/* #customWrap p { font-size: 16px; font-weight: 400;} */

p {
  text-align: justify;
  word-break: break-all;
}

/* --- ここまでcommon --- */


/* --- TOP --- */
.top_mainvisual { position: relative;}
.top_mainvisual ul::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.2);
  z-index: 0;
}

.slick-dots { display: none!important;}

.topCatchCopy p {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 24px;
  line-height: 180%;
  color: #fff;
}

.topContentsWrap { padding: 80px 0;}

.caseStudyBnr a { background: url(../img/topCaseBnr.jpg) center center/cover no-repeat;}
.eventBnr a { background: url(../img/topEventBnr.jpg) center center/cover no-repeat;}
.aboutUsBnr a { background: url(../img/topAboutBnr.jpg) center center/cover no-repeat;}
.modelHouseBnr a { background: url(../img/topMhBnr.jpg) center center/cover no-repeat;}

.topBnr li { width: 100%; margin-bottom: 20px;}
.topBnr li:last-child { margin-bottom: 0px;}
.topBnr li a {
  color: #fff;
  padding: 80px 80px;
  display: block;
  position: relative;
  text-align: left;
  z-index: 0;
  transition: ease .2s;
}

.topBnr li a::before {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0.5, 1);
  transform-origin: left top;
}

.topBnr li a:hover { text-decoration: none;}

@media (hover: hover){
  .topBnr li a:hover::before {
    width: 100%;
    transform-origin:left top;
    transform:scale(1, 1);
  }
}


.topTextBox { margin-bottom: 40px;}
.topTextBox h2 { 
  font-size: 30px;
  text-align: left;
  margin-bottom: 10px;
  letter-spacing: 0.18em;
}
h2.ls01 { letter-spacing: 0.1em;}

.more {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 160%;
  background: url(../img/icon/arrowWhite.svg) center right no-repeat;
  padding-right: 20px;
  padding-bottom: 2px;
  display: inline-block;
}

.recruitWrap {
  padding: 80px 0;
  background-color: #21366E;
  color: #fff;
}

.recruitBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.recruitBox a { color: #fff;}
.recruitBox a :hover { text-decoration: underline;}

ul.photoList03  {
  width: 100%;
  max-width: 767px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.photoList03 li { width: 32%;}
.photoList03 li a { display: inline-block;}

.pt80 { padding-top: 80px;}

.top_link .topTextBox h2 span { color: #21366E;}
.top_link .topTextBox h2 span::before { border-bottom: 1px solid #21366E;}
/* --- ここまでTOP --- */


/* --- ABOUT US --- */
.abouContentsWrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.abouContentsWrap p ,.intvwContentsWrap p {  line-height: 200%; font-size: 16px;}
.abouContentsWrap p:not(:last-of-type) ,.intvwContentsWrap p:not(:last-of-type) { margin-bottom: 20px;}
.abouContentsWrap .photoBox { margin-bottom: 40px;}

.resonBox { margin: 80px 0 0;}
.resonBox h3 { 
  font-size: 24px;
  margin-bottom: 40px;
}

.headingNumber {
	position: relative;
	text-align: center;
  color: #21366E;
}

.headingNumber::before {
	content: attr(data-number);
	display: block;
	margin-bottom: 30px;
	color: #21366E;
	font-size: 24px;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 130%;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.headingNumber::after {
	content: '';
	position: absolute;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 18px;
	background-color: #21366E;
}


/* --- ここまでABOUT US --- */


/* --- CASE STUDY --- */
.caseStudyList ,.tenjijoList ,.documentList ,.recruitList ,.storyBoxWrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.caseStudyList li ,.tenjijoList li ,.documentList li ,.recruitList li{
  width: 48%;
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
}
.caseStudyList li:last-child ,.caseStudyList li:nth-last-child(2):nth-child(odd) { margin-bottom: 0px;}
.caseStudyList li .photoBox ,.recruitList .photoBox {
  margin-bottom: 20px;
}
.caseStudyList li h2 ,.recruitList li h3 {
  font-size: 18px;
  line-height: 160%;
  margin-bottom: 5px;
  text-align: left;
  letter-spacing: 0.05em;
}
.name {
  display: block;
  color: #808080;
  flex-grow: 1;
  margin-bottom: 20px;
}

.btn01 a ,.btn02 a{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  display: block;
  color: #21366E;
  line-height: 120%;
  letter-spacing: 0.1em;
  text-align: center;
  border: 1px solid #21366E;
  background-color: #fff;
  padding: 15px 0;
  position: relative;
  margin-top: auto;
}
.btn01 a::before ,.btn02 a::before{
  content: "";
  display: block;
  background-image: url(../img/icon/arrowBlue.svg);
  background-size: 6px;
  background-repeat: no-repeat;
  width: 6px;
  height: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  right: 15px;
}

.btn01 a:hover ,.btn02 a:hover{
  color: #fff;
  background-color: #21366E;
  text-decoration: none;
  transition: .7s; 
}
.btn01 a:hover::before ,.btn02 a:hover::before{
  background-image: url(../img/icon/arrowWhite.svg);
  transition: .7s;
}

.btn02 ,.col2  ,.col3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.btn02 a {  width: 48%;}
/* --- ここまでCASE STUDY --- */


/* --- INTERVIEW --- */
.intvwContentsWrap { 
  margin: 0 0 80px;
}

.intvwFv { position: relative;}
.intvwFv:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.2);
  z-index: 0;
}

.intvwTtlBox {
  position: absolute;
  color: #fff;
  top: 27%;
  text-shadow: 0 0 50px rgb(0,0,0,0.5);
}

.intvwTtlBox h1 ,.storyTtlBox h1 {
  font-size: 30px;
  text-align: left;
  margin-bottom: 0px;
}
.intvwTtlBox h1 span ,.topTextBox h2 span ,.storyTtlBox h1 span{ 
  color: #fff;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.intvwTtlBox h1 span::before ,.topTextBox h2 span::before ,.storyTtlBox h1 span::before{
  border-bottom: 1px solid #fff;
  content: "";
  width: 40px;
  margin-right: 12px;
  }

.intvwTtlBox .name ,.storyTtlBox .name{ font-size: 18px; color: #fff;}

.intvwContentsWrap h2 {
  font-size: 24px;
  text-align: left;
  margin-bottom: 40px;
}
.intvwBox {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 75px 0 80px;
}

.contentsWrapBlue {
  background-color: #21366E;
  color: #fff;
}
.contentsWrapGray{
  background-color: #F1F1F1;
}
.intvwContentsWrap .photoBox:not(:first-child) { padding-top: 80px;}
.intvwContentsWrap .photoBox:not(:last-child) { padding-bottom: 80px;}

.intvwContentsWrap .textLink{ text-align: center; padding-bottom: 80px;}
.textLink a{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 160%;
  color: #1a1a1a;
  background: url(../img/icon/arrowBlack.svg) center left no-repeat;
  padding-left: 20px;
  padding-bottom: 2px;
}

.marginCustom { margin: 0 auto 80px!important;}

p.kazoku {
  font-size: 14px;
  padding: 10px 15px;
  border: solid 1px;
  display: inline-block;
}

.photo2column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px 0;
}

.photo2column img{
  width: 48%;
  display: flex;
  flex-direction: column;
}

/* --- ここまでINTERVIEW --- */


/* --- GALLERY --- */
.galleryDetail { text-align: center;}
.galleryDetail h2 {
  font-size: 24px;
  line-height: 160%;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
}
.galleryDetail .name {
  display: block;
  color: #808080;
  line-height: 140%;
}

.galleryList{
  columns: 4;/*段組みの数*/
  margin:40px 0 80px 0;
  }
  
.galleryList li {
    margin-bottom: 15px;/*各画像下に余白をつける*/
list-style:none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.galleryList img{
  width:100%;
  height:auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}
  
.lightboxOverlay {
  background-color: #21366E;
  opacity: 0.9;
}

/*　横幅900px以下の段組み設定　*/
@media only screen and (max-width: 900px) {
  .galleryList{
  columns:3;
  }	
}

@media only screen and (max-width: 768px) {
  .galleryList{
  columns: 2;
  }	
}

p.textLink { text-align: center;}

/* --- ここまでGALLERY --- */


/* --- 住宅展示場 --- */
.anchorLink { margin-bottom: 80px;}

.tenjijoList  li h2 ,.documentList li h2 {
  font-size: 18px;
  color: #21366E;
  letter-spacing: 0.05em;
}
.tenjijoList  li h2::after ,.documentList li h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px; 
  margin: 15px auto 0;
  background-color: #21366E;
}

.detailBox {
  padding: 40px;
  background-color: #F5F5F5;
}
.detailBox dl {
  margin: 30px 0;
  display: flex;
  flex-wrap: wrap;
}
.detailBox dt {
  font-weight: 700;
  width: 20%;
  line-height: 180%;
  }
.detailBox dd {
  width: 80%;
  margin: 0 0 10px;
  line-height: 180%;
}
.detailBox dd:last-child {
  margin: 0 0 0px;
}

.col2 li { width: 48%;}

/* --- ここまで住宅展示場 --- */


/* --- 会社案内 --- */
#company1 h2 ,#company2 h2 ,#company3 h2 ,#company4 h2 ,#company5 h2 { font-size: 24px;}
#company1 h2 ,#company2 h2 ,#company3 h2 ,#company4 h2 { margin-bottom: 25px;}
#company5 h2 { margin-bottom: 40px;}

#company2 ,#company3 ,#company4 { margin-top: 30px; clear: both;}

#company2 dl ,#company3 dl ,#company4 dl {
  margin: 0 0 60px;
  border-bottom: 1px dotted #ccc;
}
#company2 dt ,#company3 dt ,#company4 dt{
  font-weight: 700;
  width: 150px;
  line-height: 180%;
  padding: 15px 0;
  border-top: 1px dotted #ccc;
  float: left;
  clear: left;
  }
#company2 dd ,#company3 dd ,#company4 dd {
  margin: 0 0 0 150px;
  padding: 15px 0;
  border-top: 1px dotted #ccc;
  line-height: 180%;
}
#company2 dt:first-child ,#company3 dt:first-child ,#company4 dt:first-child{ border-top: none;}
#company2 dt:first-child + dd , #company3 dt:first-child + dd , #company4 dt:first-child + dd { border-top: none;}

/* .col3 li { width: 32%;} */
.col3 li { width: 24%;}

.anchorLink li a {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  display: block;
  line-height: 120%;
  letter-spacing: 0.1em;
  text-align: center;
  color: #21366E;
  background-color: #dce6fb;
  padding: 15px 0;
  position: relative;
  margin-top: auto;
}
.anchorLink li a::before {
  content: "";
  display: block;
  background-image: url(../img/icon/arrowBlue.svg);
  transform:rotate(90deg);
  background-size: 6px;
  background-repeat: no-repeat;
  width: 6px;
  height: 12px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  right: 15px;
}

.anchorLink li a:hover{
  opacity: 0.7;
  text-decoration: none;
}

.smallP { font-size: 11px; text-align: right; color: #808080;}

.greeting{
  margin-bottom: 60px;
}

/* --- ここまで会社案内 --- */


/* --- 採用情報 --- */
.recruitList .photoBox a:hover ,.caseStudyList .photoBox a:hover ,.recruitLink li a:hover { opacity: 0.7;}
.boshuBox { 
  padding: 40px 20px;
  background-color: #F1F1F1;
  text-align: center;
  margin-top: 20px;
}
.recruitLink {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}
.recruitLink li {
  width: 100%;
  max-width: 300px;
  margin-bottom: 20px;
}
.recruitLink p{
  font-family: 'Shippori Mincho', serif;
  font-size: 18px;
  line-height: 160%;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.recruitText p{
  font-size: 16px;
  line-height: 160%;
}

.careerStoryWrap { padding: 0 0 80px;}
.careerStoryTop {
  background-color: #21366E;
  color: #fff;
  padding: 80px 0;
  margin-bottom: 60px;
}

p.busho{
  font-size: 14px;
  padding: 5px 15px 6px;
  border: solid 1px;
  display: inline-block;
  margin: 10px 0;
}

.storyTtlBox ,.storyBoxWrap .photoBox ,.storyBox { width: 48%;}
.storyBoxWrap:not( .careerStoryTop .storyBoxWrap) {
  text-align: left;
  margin-bottom: 60px;
}

.storyTextWrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.storyTextBox { margin-bottom: 80px;}

.storyTextWrap .photoBox { margin-bottom: 80px;}

.careerStoryTop .storyBoxWrap { align-items: center;}
.storyTtlBox .name { margin-bottom: 0;}

.storyTextBox h3{
  font-size: 24px;
  margin-bottom: 15px;
}
.storyTextBox p { font-size: 16px; line-height: 180%;}


/* --- ここまで採用情報 --- */

/* --- 資料請求 --- */
.documentWrap p { text-align: center;}
.documentWrap .documentList .detailBox p { 
  margin: 30px 0;
  text-align: left;
  line-height: 160%;
}
.siryo ul.siryo_main > li h2 { text-align: left;}
.siryo ul.siryo_main { margin: 0 0 40px;}

.siryoText {
  text-align: center;
  margin-bottom: 30px;
  font-size: 16px;
}
.siryo ul.siryo_main > li > a { background-color: #21366E;}
.siryo ul.siryo_main > li { border: 1px solid #ccc;}
/* --- ここまで資料請求 --- */

/* --- お問い合わせ --- */
.paddingCustom { padding: 50px 0 30px;}
.contact .contact_box h3 { text-align: left;}
.contact > div h2 { padding: 0 0 0px;}

.contact .contact_box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.contact .contact_box ul:after { display: none!important;}
.contact .contact_box ul li { margin: 0 0 0px;}
.contact .contact_box ul li h4.free:after {
  margin: 0 0 1px 8px;
  vertical-align: middle;
}
.contact #contact_company .contact_box > a ,.contact .contact_box ol li {
  background: url(../img/icon/arrowBlueR.svg) no-repeat left center;
}
.contact #contact_plan .contact_box {
  border: 1px solid #ccc;
}
.contact .contact_box { margin: 0 0 40px;}
/* --- ここまでお問い合わせ --- */




/* --- レスポンシブ --- */
@media only screen and (max-width:768px) and (max-device-width:1024px){
  .onlyPC { display: none!important; }
	.onlySP { display: block!important; }

  .contents { width: 94%;}
  p { padding: 0;}

  h1 { font-size: 30px;}
  h2 { font-size: 26px;}

  .topTextBox h2 ,.abouContentsWrap h2 ,.intvwTtlBox h1 ,.storyTtlBox h1{ font-size: 26px;}
  .top_link .topTextBox h2 { width: 94%;}

  .slideCustomSp li {
    width: 100%;
    height: calc(100vh - 73px);
  }
  .slideCustomSp li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .topCatchCopy p { 
  font-size: 20px;
  font-family: 'Shippori Mincho', serif;
  text-align: center;
  line-height: 160%;
  letter-spacing: 0.13em;}

  .caseStudyBnr a { background: url(../img/topCaseBnrSp.jpg) center center/cover no-repeat;}
  .eventBnr a { background: url(../img/topEventBnrSp.jpg) center center/cover no-repeat;}
  .aboutUsBnr a { background: url(../img/topAboutBnrSp.jpg) center center/cover no-repeat;}
  .modelHouseBnr a { background: url(../img/topMhBnrSp.jpg) center center/cover no-repeat;}

  .topBnr li a::before {
  transform: scale(1, 0.5);
  transform-origin: left bottom;
  }

  .topBnr li a {
  padding: 40px 30px;
  width: 100%;
  height: 518px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  }

  ul.topBnr ,.caseStudyList ,.tenjijoList ,.anchorLink ,.documentList ,.recruitList ,.storyBoxWrap { margin: 0;}

  .topTextBox { width: 100%; margin-bottom: 20px;}
  
  h2.ls01 {
    letter-spacing: 0.02em;
  }
  h2.ls001 { letter-spacing: 0.01em;}

  
  .topTextBox p { padding: 0;}

  .wrapReverse { flex-wrap: wrap-reverse;}
  ul.photoList03 { margin: 0 0 40px;}

  .resonBox h3 ,.intvwContentsWrap h2 ,.storyBox h3 { font-size: 20px;}


  .caseStudyList li ,.tenjijoList li ,.anchorLink li ,.documentList li ,.recruitList li ,.storyTtlBox ,.storyBox ,.storyBoxWrap .photoBox ,.photo2column img{ width: 100%;}
  .caseStudyList li:nth-last-child(2):nth-child(odd) { margin-bottom: 60px;}

  .intvwFv { height: 100vh;	overflow:hidden;
  }
  .intvwFv img {
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: inherit;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  .intvwFv:before { z-index: 1;}
  .intvwTtlBox { top: 20%; z-index: 2;}

  #company2 dt ,#company3 dt ,#company4 dt{ width: 110px;}
  #company2 dd ,#company3 dd ,#company4 dd { margin: 0 0 0 110px;}

  .col2 ,.col3 {
    gap: 10px 0px;
    margin-bottom: 40px;
  }

  .detailBox { padding: 30px;}
  .detailBox dl { margin: 20px 0;}
  .detailBox dt { width: 30%;}
  .detailBox dd { width: 70%;}

  .documentWrap p { text-align: left;}

  .recruitLink { justify-content: center;}
  
  .storyBoxWrap { gap: 30px 0;}
  .careerStoryTop { margin-bottom: 70px;}


  .contact #contact_company .contact_box > a, .contact .contact_box ol li {
    background-size: 6px auto;
  }
  .contact > div h2 { font-size: 20px; margin-bottom: 20px; margin: 40px 0 20px;}
  .contact .contact_box h3 { font-size: 18px;}
  .wFull { width: 100%;}
  .siryo ul.siryo_main { margin: 0 0 0px;}

}

.phg-bnr-60th{
  margin-top: 0px!important;
}

.top_contact{
  margin-bottom: 60px!important;
}

@media screen and (max-width: 1024px){
  .phg-bnr-60th {
    margin-bottom : 30px!important;
  }
}