@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900
	.m-plus-1 {
	  font-family: "M PLUS 1", sans-serif;
	  font-optical-sizing: auto;
	  font-weight: 300;
	  font-style: normal;
	}
	*{
	  padding: 0;
	  margin: 0;
	  color: #555555;
	  box-sizing: border-box;
	}
	html, body,.first-view {
	  height: 100%;
	}
	body {
	  background-color: #eceae7;
	  text-align: center;
	  position: relative;
	}
	.logo-small {
	  font-size: 20px;
	}
/*-----------------cut-in----------------*/
	.cut-in {
	  opacity: 0; /* 最初は透明 */
	  animation: cutIn 0s 3s forwards; /* 2秒後に一瞬で表示 */
	}
	@keyframes cutIn {
	  to {
	    opacity: 1;
	  }
	}
/*-----------------fade-in----------------*/
	.scroll-fadein {
	  opacity: 0; /* 最初は透明 */
	  animation: scroll-fadein 0.6s 6s forwards; /* 0.3秒でフェードイン、3秒後に開始 */
	}
	@keyframes scroll-fadein {
	  to {
	    opacity: 1; /* 最終状態で透明度を1に */
	  }
	}
/*-----------------fade-inここまで----------------*/
	.first-view{
	  position: fixed;
	  top: 0;
	  right: 0;
	  bottom: -60px;
	  left: 0;
	  z-index: 1; /* メインコンテンツより下に表示されるように設定 */
	}
	.top-v{
	  position: absolute;
	  z-index: -1;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 100%;
	  object-fit:cover
	}
	.img-1{
	  margin: auto;
	  height: 40%;
	  width: 40%;
	  object-fit:scale-down
	}
	.img-top{
	  margin-top: -60px;
	}
	.radius { border-radius: 7px;}
	h2 {
	  font-size: 40px;
	  line-height: 46px;
	}
	h3 {
	  font-family: "Paytone One";
	  position: absolute;
	  top: 50%;
	  right: 0;
	  bottom: 50%;
	  left: 0;
	  margin: auto;
	}

	h3 span {
	  display: block;
	  /*margin: 11px 0 17px 0;*/
	  font-size: 56px;
	  line-height: 70px;
	  color: #4f8bc2;
	  text-shadow: 0 3.36px 4.896px #c4b59d,0 -2px 1px #fff;
	  /*text-shadow: 0 13.36px 8.896px #c4b59d,0 -2px 1px #fff;
	  letter-spacing: -4px;
	    text-shadow : 
	        0 0 0.1em rgba(255,255,255,0.05),
	        0.01em 0.04em 0.03em rgba(255,255,255,0.4);
	    -webkit-background-clip : text;*/
	}
	#top-title h3 span {
	  font-size: 30px;
	  line-height: 50px;
	  color: #555555;
	  text-shadow: none;
	    text-align:center;
	    color: transparent;
	    background : rgba(0,0,0,1);
	    text-shadow : 
	        0 0 0.1em rgba(255,255,255,0.05),
	        0.01em 0.04em 0.03em rgba(255,255,255,0.4);
	    -webkit-background-clip : text;
	}
/*----------------------本文用CSS--------------------------*/
html { scroll-behavior: smooth;}
	.wrap {
	  position: relative;
	  background-color: #eceae7;
	  width: 100%;
	  margin-bottom: -60px; /*　下部はみ出し分カット */
	  z-index: 2; /* .first-view より上に表示されるように設定 */
	}
	.wrap::before {
	  content: "";
	  position: absolute;
	  top: -126px; /* 円弧が上に50pxはみ出すように調整 */
	  left: 0;
	  right: 0;
	  width: 100%;
	  height: 126px; /* 円弧の高さを調整 */
	  background-image: url(../img/bg-o.png);
	  background-size: cover;
	  background-position: top;
	}
	.wrap1 {
	  position: relative;
	  background-color: #f9f8f8;
	  width: 100%;
	  z-index: 2; /* .first-view より上に表示されるように設定 */
	}

	.contents {
	  position: relative;
	  z-index: 2; /* .first-view より上に表示されるように設定 */
	  max-width: 1980px;
	  background-color: #FFFFFF;
	  background-image: url(../img/plumbing.png);
	  background-size: cover;
	  background-position: left top;
	  background-repeat: no-repeat;
	  padding: 20px;
	  margin-top: calc(100vh + 126px); /* .first-view の高さ分の余白を設定 */
	  margin-bottom: -900px; /*　下部はみ出し分カット */
	  margin-bottom: 0; /*　下部はみ出し分カット */
	  margin-right: auto; /*　wrapの中央揃え */
	  margin-left: auto; /*　wrapの中央揃え */
	  padding-bottom: 100px; /*　下部はみ出し分カット */
	  overflow:hidden;
	}
	.bg-white {
	  background-color: rgba(255,255,255,0.6);
	  padding: 10px;
	  border-radius: 10px; 
	}
	.white {
	  background-color: #FFFFFF;
	  padding: 100px 0;
	}
	.bg-blue {
	  background-color: #e0f2f1;
	}
	.shift{
	  margin: -0px -70px -60px 20px;
	  padding: 0.1px 30px 60px 0;
	}
	.shift1{
	  margin-left: -30px;
	}
  /*-------------センテンス（文字部分）------------*/
	.sentence {
	  font-size: 26px;
	  line-height: 36px;
	  color: #555555;
	  /*text-shadow: 0 9.36px 8.896px #c4b59d,0 -2px 1px #fff;*/
	  letter-spacing: 3px;
	}
	.greet {
	  font-size: 24px;
	  line-height: 40px;
	  color: #555555;
	  padding: 50px 30px;
	  letter-spacing: 1px;
	}
	.emboss {
	    font-size:40px;
	    text-align:center;
	    font-weight:bold;
	    color: transparent;
	    background : rgba(0,0,0,1);
	    text-shadow : 
	        0 0 0.1em rgba(255,255,255,0.05),
	        0.01em 0.04em 0.03em rgba(255,255,255,0.4);
	    -webkit-background-clip : text;
	}
	/*-------------テーブル設定---------*/
	.tabl_title,
	.tabl_main {
	  margin: 0;
	  padding: 20px 30px;
	  border-top: 1px solid #d7d7d7;
	  border-bottom: 1px solid #d7d7d7;
	}
	.tabl_title {
	  background: #ffecea;
	  background: #f3f0ec;
	  width: 200px;
	}
	.tabl_main {
	  width: calc(100% - 200px);
	}
	/*-------------フッター部設定-------------*/
	.bg-dark {
	  background-color: #566D82;
	  padding-bottom: 60px;
	}
	.footer {
	  font-size: 20px;
	  line-height: 30px;
	  padding-top: 60px;
	  color: #ffffff;
	  /*text-underline-offset: 2px;*/
	}
	.footer span {
	  color: #ffffff;
	}
	.contact {
	  font-size: 30px;
	  line-height: 30px;
	  color: #ffffff;
	  text-align:center;
	}
	.contact-box {
	  font-size: 30px;
	  line-height: 50px;
	  text-align:center;
	  margin: 50px auto;
	  padding: 50px;
	  border-radius: 10px; 
	  max-width: 1000px;
	  font-weight: bold;
	}
	.line-top { border-top: 2px solid #ffffff;}
	.w-txt {
	  color: #ffffff;
	  list-style:none;
	  font-size: 16px;
	  line-height: 38px;
	}
	.line-txt {
	  margin-top: 10px;
	  line-height: 28px;
	}
	/*------フッター部リンクアニメーション設定------*/
	/*  a要素にposition: relative;を与えてあげます  */
	.animate-link a {
	  position: relative;
	  text-decoration: none;
	}

	/*  aの疑似要素afterを作成。アニメーションの始点は右端  */
	.animate-link a::after {
	  background-color: currentColor;
	  bottom: 1px;
	  content: "";
	  height: 2px;
	  left: 0;
	  position: absolute;
	  transform: scale(0, 1);
	  transform-origin: right top;
	  transition: transform .3s;
	  width: 100%;
	}

	/*  hoverしたときのafterの動き。アニメーションの始点は左端  */
	.animate-link a:hover::after {
	  transform-origin: left top;
	  transform: scale(1, 1);
	}
  /*-------------文字の配置------------*/
	.t-left { text-align: left;}
	.t-center { text-align: center;}
	.p-center { margin-right: auto; margin-left: auto; margin-top: 0;}
	.small-font { font-size: 24px;}
   /*-------------高さ設定------------*/
	.h5000{ height: 5000px;}
	.h1600{ height: 1600px;}
	.h900{ height: 900px;}
	.h800{ height: 800px;}
	.h700{ height: 700px;}
	.h600{ height: 600px;}
	.h500{ height: 500px;}
	.h400{ height: 400px;}
	.h300{ height: 300px;}
	.h200{ height: 200px;}
	.h100{ height: 100px;}
	.m900{ margin-top: 900px;}
	.m800{ margin-top: 800px;}
	.m700{ margin-top: 700px;}
	.m600{ margin-top: 600px;}
	.m500{ margin-top: 500px;}
	.m400{ margin-top: 400px;}
	.m300{ margin-top: 300px;}
	.m200{ margin-top: 200px;}
	.m100{ margin-top: 100px;}
	.m-60{ margin-top: -60px;}
	.m-360{ margin-top: -360px;}
　/*---------------　@media　---------------*/
	@media screen and (max-width: 1024px) {
		.n-tb { display: none !important; }
	}
	@media screen and (max-width: 768px) {
	}
	@media screen and (max-width: 600px) {
		.n-sh {  display: none !important; }
		.img-top{ margin-top:0;}
		.img-1{ height: 50%; width: 50%;}
		article .main { /*background-color: rgba(255,255,255,0.6);*/ overflow: hidden;}
		.bg-white { background-color:transparent; padding: 0; border-radius: none; }
		.m400{ margin-bottom: 100px;}
		 h3 span { font-size: 40px; line-height: 50px;}
	        .smartphone-break {
	           display: block; /* スマホの場合のみブロック要素にして改行 */
	        }
		.m-360{ margin-top: -200px;}
	}