@charset "utf-8";


/* page common ================================================================ */

  /* ---- Page Background ---- */

		@media print, screen and (min-width: 768px) {
			.p-pageCompany {
				background: url(../img/page/bg_pageCompany.jpg) no-repeat top center;
				}
			.p-pageWorks {
				background: url(../img/page/bg_pageWorks.jpg) no-repeat top center;
				}
			.p-pageExperience {
				background: url(../img/page/bg_pageExperience.jpg) no-repeat top center;
				}
			.p-pageModelhouse {
				background: url(../img/page/bg_pageModelhouse.jpg) no-repeat top center;
				}
			.p-pageContact {
				background: url(../img/page/bg_pageContact.jpg) no-repeat top center;
				}
		}
		@media (max-width: 767px) {
			.p-pageCompany {
				background: url(../img/page/bg_pageCompany-sp.jpg) no-repeat top center;
				}
			.p-pageWorks {
				background: url(../img/page/bg_pageWorks-sp.jpg) no-repeat top center;
				}
			.p-pageExperience {
				background: url(../img/page/bg_pageExperience-sp.jpg) no-repeat top center;
				}
			.p-pageModelhouse {
				background: url(../img/page/bg_pageModelhouse-sp.jpg) no-repeat top center;
				}
			.p-pageContact {
				background: url(../img/page/bg_pageContact-sp.jpg) no-repeat top center;
				}
		}



  /* ---- page title ---- */

	.c-pageTitle {
		letter-spacing: 5px;
		}
		@media print, screen and (min-width: 768px) {
			.c-pageTitle {
				height: 160px;
				margin-top: 80px;
				margin-bottom: 80px;
				font-size: 4.0rem;
				}
			.c-pageTitle h1 {
				height: 150px;
				}
		}
		@media (max-width: 767px) {
			.c-pageTitle {
				margin-top: 50px;
				margin-bottom: 40px;
				font-size: 2.4rem;
				}
			.c-pageTitle h1 {
				height: 80px;
				}
		}



  /* ---- section title ---- */
	.c-secTitle {
		letter-spacing: 5px;
		background: url(../img/page/bg_secTitle.png) no-repeat center center;
		}
		@media print, screen and (min-width: 768px) {
			.c-secTitle {
				height: 100px;
				margin-bottom: 40px;
				font-size: 3.4rem;
				}
		}
		@media (max-width: 767px) {
			.c-secTitle {
				height: 60px;
				margin-bottom: 20px;
				font-size: 2.2rem;
				background-size: contain;
				}
		}






  /* ---- Page Anchor Link ---- */

	.c-pageLink {
		text-align: center;
		}
	.c-pageLink li a {
		display: inline-block;
		width: 100%;
		height: 100%;
		text-decoration: none;
		outline: none;
		color: #190C00;
		background-color: #EFE7DE;
		border: 2px solid #EFE7DE;
		box-sizing: border-box;
		}
	.c-pageLink li a.active,
	.c-pageLink li {
		color: #190C00;
		background-color: #DDCCB9;
		font-weight: bold;
		}
	.c-pageLink li a:hover {
		color: #190C00;
		border: 2px solid #DDCCB9;
		}
	@media print, screen and (min-width: 768px) {
		.c-pageLink li {
			height: 50px;
			line-height: 50px;
			font-size: 1.8rem;
			}
	}
	@media (max-width: 767px) {
		.c-pageLink li {
			height: 30px;
			line-height: 30px;
			}
	}






/* =====================================================================

	会社概要（company）
	
======================================================================== */

	/* greeting */
	@media print, screen and (min-width: 768px) {
		.p-greeting > *:first-child {
			width: 310px;
			float: left;
			}
		.p-greeting > *:last-child {
			width: 665px;
			float: right;
			}
	}
	@media (max-width: 767px) {
		.p-greeting > *:first-child {
			width: 40%;
			max-width: 310px;
			float: right;
			margin: 0 0px 10px 20px;
			}
		.p-greeting > *:first-child img {
			width: 100%;
			}
		.p-greeting > *:last-child img {
			width: 50%;
			}
	}




	/* goiyou */
	.p-goiyou {
		box-sizing: border-box;
		background: url(../img/company/bg_gaiyou.jpg) no-repeat center top;
		}
	@media print, screen and (min-width: 768px) {
		.p-goiyou {
			height: 961px;
			}
	}
	@media (max-width: 767px) {
		.p-goiyou {
			background-size: auto 100%;
			}
	}


	/* google maps */
	.p-gmap {
		position: relative;
		}
		 
		.p-gmap iframe,
		.p-gmap object,
		.p-gmap embed {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			}

	@media print, screen and (min-width: 768px) {
		.p-gmap {
			height: 500px;
			}
	}
	@media (max-width: 767px) {
		.p-gmap {
			padding-bottom: 56.25%;
			padding-top: 30px;
			height: 0;
			overflow: hidden;
			}
	}





/* =====================================================================

	業務内容（works）
	
======================================================================== */

	/* flow */
	.p-flow {
		background: url(../img/works/bg_flow.png) no-repeat right 1600px;
		}
	.p-flow dt span:last-child {
		color: #8C6C57;
		font-weight: bold;
		margin-left: 5px;
		}
	.p-flow dt img {
		vertical-align: middle;
		}
	.p-flow dd {
		line-height: 1.8;
		}
	@media print, screen and (min-width: 768px) {
		.p-flow > div > div {
			box-sizing: border-box;
			height: 285px;
			display: -webkit-box!important;
			display: -moz-box!important;
			display: -ms-flexbox!important;
			display: -webkit-flex!important;
			display: flex!important;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-justify-content: center;
			justify-content: center;
			}
			.p-flow > div img {
				flex-shrink: 0;
				}
		.p-flow dt span:last-child {
			font-size: 2.4rem;
			}
		.p-flow dd {
			padding-left: 100px;
			margin-top: -10px;
			font-weight: bold;
			}
		.p-flow .p-flow01 {
			background: url(../img/works/img_flow01.png) no-repeat right top;
			padding: 0 300px 0 50px;
			margin-bottom: 44px;
			}
		.p-flow .p-flow02 {
			background: url(../img/works/img_flow02.png) no-repeat left top;
			padding: 0 0px 0 290px;
			margin-bottom: 44px;
			}
		.p-flow .p-flow03 {
			background: url(../img/works/img_flow03.png) no-repeat right top;
			padding: 0 300px 0 40px;
			margin-bottom: 54px;
			}
		.p-flow .p-flow04 {
			background: url(../img/works/img_flow04.png) no-repeat left top;
			padding: 0 0px 0 290px;
			margin-bottom: 35px;
			}
		.p-flow .p-flow05 {
			background: url(../img/works/img_flow05.png) no-repeat right top;
			padding: 0 300px 0 40px;
			margin-bottom: 10px;
			}
		.p-flow .p-flow06 {
			padding: 0 0px 0 40px;
			margin-bottom: 10px;
			}
		.p-flow .p-flow07 {
			background: url(../img/works/img_flow07.png) no-repeat left top;
			padding: 0 0px 0 290px;
			margin-bottom: 35px;
			}
		.p-flow .p-flow08 {
			background: url(../img/works/img_flow08.png) no-repeat right top;
			padding: 0 300px 0 30px;
			}
	}
	@media (max-width: 767px) {
		.p-flow {
			background-position: right bottom;
			}
		.p-flow > div > div {
			background-color: rgba(255,255,255,0.7);
			padding: 20px 15px;
			}
		.p-flow dt img {
			width: 50px;
			}
		.p-flow dt span:last-child {
			font-size: 1.8rem;
			}
		.p-flow dd {
			padding: 5px 10px 20px 10px;
			}
	}






/* =====================================================================

	施工実績（experience）
	
======================================================================== */

	/* newly */
	@media print, screen and (min-width: 768px) {
	.p-newly {
		/*background: url(../img/experience/bg_newly.jpg) no-repeat left bottom;*/
		}
	}

	/* reform */
	.p-reform {
		background: url(../img/experience/bg_reform.jpg) repeat-y center top;
		margin-bottom: 60px;
		}
		.p-reform::after {
			content: '';
			display: block;
			width: 100%;
			height: 25px;
			background: url(../img/experience/bg_reform-bottom.jpg) no-repeat center top;
			bottom: -25px;
			}


	/* thumbnail */
	.p-exList {
		text-align: center;
		}
	.p-exList figcaption {
		font-weight: bold;
		padding: 8px 0;
		}
	@media print, screen and (min-width: 768px) {
		.p-exList {
			margin-left: -20px;
			}
		.p-exList li {
			width: 320px;
			margin-left: 20px;
			margin-bottom: 50px;
			}
		.p-exList figcaption {
			font-size: 1.8rem;
			}
	}
	@media (max-width: 767px) {
		.p-exList {
			}
		.p-exList li {
			width: 48%;
			margin: 0 1% 30px 1%;
			}
	}



	/* comment */
	@media print, screen and (min-width: 768px) {
		.p-exComment {
			margin: 25px 0 45px 0;
			}
		.p-exComment > figure {
			width: 300px;
			}
		.p-exComment > p {
			width: 665px;
			height: 200px;
			}
	}
	@media (max-width: 767px) {
		.p-exComment {
			margin: 15px 0 20px 0;
			}
		.p-exComment > figure {
			margin-bottom: 10px;
			}
		.p-exComment > figure img {
			height: 100px;
			}
	}


	/* photo */
	.p-exPh {
		line-height: 0;
		padding-bottom: 2%;
		}
    .p-exPh .p-after,
    .p-exPh .p-before {
      position: relative;
      }
    .p-exPh .p-before::after {
    content: '';
      position: absolute;
      display: block;
      background: url("../img/experience/img_before.svg") no-repeat;
      background-size: cover;
      bottom: -1px;
      right: -1px;
      width: 100px;
      height: 102px;
      }
    .p-exPh .p-after::after {
    content: '';
      position: absolute;
      display: block;
      background: url("../img/experience/img_after.svg") no-repeat;
      background-size: cover;
      bottom: -1px;
      right: -1px;
      }
      @media print, screen and (min-width: 768px) {
        .p-exPh .p-before::after,
        .p-exPh .p-after::after {
          width: 100px;
          height: 102px;
          }
        .p-exPh490.p-before::after,
        .p-exPh490.p-after::after {
          width: 120px;
          height: 122px;
          }
        .p-exPh660.p-before::after,
        .p-exPh660.p-after::after {
          width: 150px;
          height: 153px;
          }
      }
      @media (max-width: 767px) {
        .p-exPh .p-before::after,
        .p-exPh .p-after::after {
          width: 80px;
          height: 81px;
          }
        .p-exPh490.p-before::after,
        .p-exPh490.p-after::after {
          width: 96px;
          height: 97px;
          }
        .p-exPh660.p-before::after,
        .p-exPh660.p-after::after {
          width: 120px;
          height: 121px;
          }
      }
      @media (max-width: 520px) {
        .p-exPh .p-before::after,
        .p-exPh .p-after::after {
          width: 50px;
          height: 51px;
          }
        .p-exPh490.p-before::after,
        .p-exPh490.p-after::after {
          width: 60px;
          height: 61px;
          }
        .p-exPh660.p-before::after,
        .p-exPh660.p-after::after {
          width: 75px;
          height: 76px;
          }
      }


  .p-exPh660w,
	.p-exPh660 {
		width: 66%;
		}
	.p-exPh600w,
	.p-exPh600 {
		width: 60%;
		}
	.p-exPh490w,
	.p-exPh490 {
		width: 49%;
		}
	.p-exPh400w,
	.p-exPh400 {
		width: 40%;
		}
	.p-exPh380w,
	.p-exPh380 {
		width: 38%;
		}
	.p-exPh330 {
		width: 33%;
		}
		.p-exPh330 > *:first-child {
			margin-bottom: 5%;
			}
  .p-exPh320w,
	.p-exPh320 {
		width: 32%;
		}
		.p-exPh320 > *:first-child {
			margin-bottom: 4%;
			}
	.p-exPh310 {
		width: 31%;
		}
	.p-exPh180 {
		width: 18%;
		}
      @media print, screen and (min-width: 768px) {
      }
      @media (max-width: 767px) {
      }
      @media (max-width: 520px) {
        .p-exPh660w {
          width: 100%;
          }
        .p-exPh600w {
          width: 100%;
          }
        .p-exPh490w {
          width: 100%;
          }
        .p-exPh400w {
          width: 100%;
          }
        .p-exPh380w {
          width: 100%;
          }
        .p-exPh320w {
          width: 100%;
          }
      }


/* 写真レイアウト（2023.09.11追加---新レイアウト）
===================================================== */

	[class*="c-photos__"] {
    display: -webkit-grid;
    display: grid;
    line-height: 0;
    text-align: center;
		}
    [class*="c-photos__"] img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      }
    [class*="c-photos__"] figcaption {
      line-height: 1.2;
      padding-top: 5px;
      }

    .c-photos__l1-s2 {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      }
      .c-photos__l1-s2 > *:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        }
      .c-photos__l1-s2 > *:nth-child(2) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        }
      .c-photos__l1-s2 > *:nth-child(3) {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        }

    .c-photos__s2-l1 {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      }
      .c-photos__s2-l1 > *:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        }
      .c-photos__s2-l1 > *:nth-child(2) {
        grid-column: 2 / 4;
        grid-row: 1 / 3;
        }
      .c-photos__s2-l1 > *:nth-child(3) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        }

    .c-photos__m1-m1 {
      grid-template-columns: 1fr 1fr;
      }
/*      .c-photos__m1-m1 > *:nth-child(1) {
        grid-column: 1 / 2;
        }
      .c-photos__m1-m1 > *:nth-child(2) {
        grid-column: 2 / 3;
        }*/

    .c-photos__t1-m1-t1 {
      grid-template-columns: 1fr 2fr 1fr;
      }

    .c-photos__m1-m1-t1 {
      grid-template-columns: 2fr 2fr 1fr;
      }

    .c-photos__s2-t1-t1 {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      }
      .c-photos__s2-t1-t1 > *:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        }
      .c-photos__s2-t1-t1 > *:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        }
      .c-photos__s2-t1-t1 > *:nth-child(3) {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        }
      .c-photos__s2-t1-t1 > *:nth-child(4) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        }

    .c-photos__s2-t1-s2 {
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      }
      .c-photos__s2-t1-s2 > *:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        }
      .c-photos__s2-t1-s2 > *:nth-child(2) {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        }
      .c-photos__s2-t1-s2 > *:nth-child(3) {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        }
      .c-photos__s2-t1-s2 > *:nth-child(4) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        }
      .c-photos__s2-t1-s2 > *:nth-child(5) {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        }

	@media print, screen and (min-width: 768px) {
    [class*="c-photos__"] {
      gap: 13px 20px;
      }
  }
	@media (max-width: 767px) {
    [class*="c-photos__"] {
      gap: 6px 10px;
      }
	}




/* =====================================================================

	モデルハウス（modelhouse）
	
======================================================================== */


	/* gallery */
	.p-gallery {
		background: url(../img/modelhouse/bg_pageMH-list.jpg) no-repeat center top;
		}
	.p-gallery li{
		position: relative;
		height: 0;
		overflow: hidden;
		background-color: #ccc;
		}
	.p-gallery li img{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: auto;
		height: auto;
		max-width: 179%;
		max-height: initial;
		}
	@media print, screen and (min-width: 768px) {
		.p-gallery {
			height: 1120px;
			}
		.p-gallery ul {
			margin-right: -10px;
			}
		.p-gallery li{
			width: 190px;
			padding-bottom: 190px;
			margin-bottom: 10px;
			margin-right: 10px;
			}
	}
	@media (max-width: 767px) {
		.p-gallery {
			padding: 50px 0;
			background-size: auto 100%;
			}
		.p-gallery li{
			width: 30%;
			padding-bottom: 30%;
			margin-bottom: 3%;
			margin-left: 2%;
			margin-right: 1%;
			}
	}









/* =====================================================================

	お問合せ（contact）
	
======================================================================== */


/*--- Form --*/

.p-form select,
.p-form input,
.p-form textarea {
	border: solid 1px #ccc;
	box-shadow: none;
	}

.p-form label {
	border: none !important;
	}

.p-form input[type="text"],
.p-form input[type="email"] {
	width: 95% !important;
	padding: 7px !important;
	}
.p-form .p-pref select,
.p-form .p-zip input[type="text"] {
	max-width: 200px;
	width: 95% !important;
	padding: 7px !important;
	}
.p-form input[type="tel"] {
	padding: 7px !important;
	width: 30% !important;
	}

.p-form textarea {
	width: 95% !important;
	height: 100px !important;
	padding: 7px !important;
	}


/*確認画面*/
#mfp_phase_confirm_inner th,
#mfp_phase_confirm_inner td {
	padding: 12px !important;
	border: solid 1px #ccc !important;
	}
#mfp_phase_confirm_inner th {
	background-color: #f1f1f1 !important;
	}
#mfp_phase_confirm_inner td {
	margin-bottom: 20px !important;
	}
tr.mfp_colored {
	background-color: inherit !important;
	}
	

/*送信ボタン*/
.mfp_buttons {
	clear: both;
	margin-top: 30px;
	text-align: center;
	}
.mfp_element_submit,
.mfp_buttons button {
	clear: both;
	cursor: pointer;
	outline: none;
	padding: 10px 15px;
	font-weight: normal !important;
	font-size: 100% !important;
	margin-top: 20px !important;
	background: #f4f4f4 !important;
	color: #000 !important;
	text-shadow: none !important;
		border: #f4f4f4 solid 1px;
		-webkit-border-radius: 4px;
			 -moz-border-radius: 4px;
						border-radius: 4px;
				-ms-border-radius: 4px;
	}
	.mfp_element_submit:active,
	.mfp_buttons button a:active {
		border: #999999 solid 1px;
		}
		



/*エラー時の色*/
.mfp_ng {
	background-color: rgba(204,204,204,0.2) !important;
	}

/*ok時の色*/
.mfp_ok {
	background-color: rgba(255,255,255,0.9) !important;
	border-color: #ccc !important;
	color: #000 !important;
	}
body {
	overflow-x: visible !important;
	}