@charset "UTF-8";
/*汎用*/
.Sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	display:grid;
}
.Normal {
	min-height:100vh;
	display:grid;
	place-items:center;
	background:#f6f6f6
}

dl.Subtitle {
    color: #1b1f9e;
    margin-bottom: 40px;
    font-weight: bold;	
}
dl.Subtitle dt {
    font-size: clamp(1em, 5vw, 1.2em);
    border-bottom: solid 1px;
    padding-bottom: 5px;
    width: fit-content;
    margin-bottom: 10px;
}

dl.Subtitle dt span {
    font-size: clamp(1.5em, 5vw, 1.7em);
    margin-left: 5px;
}
dl.Subtitle dd::before {
    content: "";
    display: inline-block;
    width: clamp(30px, 4vw, 50px);
    height: 70px;
    margin-right: 16px;
    vertical-align: middle;
    background: url(/images/teranopaint/teranopaint__Icon01.webp) no-repeat center / contain;
}
dl.Subtitle dd {
    font-size: clamp(2em, 4vw, 2.5em);
}
div.Decoration__Title {
    position: relative;
    margin-bottom: 50px;
}

div.Decoration__Title h2 {
    text-align: center;
    line-height: 2em;
    font-size: clamp(2em, 3vw, 5em);
    color: #1b1f9e;
    font-weight: bold;
    letter-spacing: 0.1em;
    width: fit-content;
    margin: 0 auto;
}
div.Decoration__Title h2 span {
    font-size: clamp(2em, 3vw, 5em);
}
div.Decoration__Title img:nth-of-type(1) {
    position: absolute;
    left: 0;
    width: clamp(50px, 7vw, 200px);
    height: auto;
}
div.Decoration__Title img:nth-of-type(2) {
    position: absolute;
    right: 0;
    top: 0px;
    width: clamp(50px, 7vw, 200px);
    height: auto;
}
div.Decoration__Title img:nth-of-type(3) {
    position: absolute;
    right: 40px;
    bottom: 0;
    width: clamp(50px, 7vw, 200px);
    height: auto;
}
@media screen and (max-width: 550px) {
	div.Decoration__Title img:nth-of-type(1) {
		 left: -25px;
		top: -40px;
	}	
	div.Decoration__Title img:nth-of-type(3) {
        	right: 0;
        	bottom: auto;
	}	
	div.Decoration__Title img:nth-of-type(2) {
		right: 0;
   		 top: -30px;
	}
}
div.Scroll{
  overflow: auto;
  white-space: pre;
}




/*本番*/
section.Body {
	background-image: url("/images/teranopaint/Top01.webp");
	background-size: cover;	
}
section.Top {
	min-height: 40vh;
    place-items: center;	
}
.Top.Sticky {
	transition: opacity 0.5s ease;
}
.Top.Sticky.is-hidden {
	opacity: 0;
	pointer-events: none;
}
section.Top div {
    text-align: center;
    color: white;
}
section.Top div p {
    font-size: clamp(2em, 3vw, 5em);
    text-align: center;
	margin-top: 40px;		
}
section.Top div h1 {
    font-size: clamp(3em, 5vw, 7em);
}
@media screen and (max-width: 768px) {
	section.Top {
		margin-top: 0;
		transition: margin-top 0.5s ease;
	}
}



section.Reason {
	background-image: url("/images/teranopaint/Reason01.png");
	background-size: cover;	
    border-radius: 40px 40px 0 0;	
}
div.Reason__Group {
    margin: 0 auto;
    width: 80%;
    padding: 50px 0;
}
div.Reason__Group dl {
    text-align: center;
}
div.Reason__Group dl dt {
    text-align: center;
    margin-bottom: 40px;
    font-size: clamp(2em, 2.5vw, 4em);
	color: #1b1f9e;
}
div.Reason__Group dl dd:nth-of-type(1) {
    margin-bottom: 40px;
}
div.Reason__Icon {
    display: flex;
    justify-content: space-around;
}
div.Reason__Icon figure img {
    margin-bottom: 20px;
}
div.Reason__Icon figure figcaption {
    background-color: #0c882e;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}
div.Reason__Group dl dd:nth-of-type(2), div.Reason__Group dl dd:nth-of-type(3), div.Reason__Group dl dd:nth-of-type(4) {
    font-size: clamp(1em, 5vw, 1.2em);
    margin-bottom: 1em;
    line-height: 1.5em;
}
section.Reason::After {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 35px solid #f6f9ed;
}
@media screen and (max-width: 500px) {
	div.Reason__Icon figure {
    	width: 30%;
	}
}


section.Coosing {
    background-color: white;
    padding: 100px 0;
}
div.Coosing__Group {
    margin: 0 auto;
    width: 80%;
}
div.Coosing__Content figure {
    display: flex;
    justify-content: space-between;
    height: 260px;	
}
div.Coosing__Content figure:nth-of-type(1), div.Coosing__Content figure:nth-of-type(2) {
    Margin-bottom: 100px;
}
div.Coosing__Content figure figcaption {
    display: flex;
    flex-direction: column;
    width: 50%;
    position: relative;
}
div.Coosing__Content figure figcaption h4 {
    font-size: clamp(1.7em, 3vw, 2em);
    color: #1b1f9e;
    font-weight: bold;
    border-bottom: solid 2px;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
div.Coosing__Content figure figcaption p:nth-of-type(1) {
    font-size: clamp(1em, 1.5vw, 1.5em);
}
div.Coosing__Content figure figcaption p:nth-of-type(2) {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #1b1f9e;
    padding: 5px 35px;
    box-sizing: border-box;
    color: white;
    border-radius: 25px;
    font-weight: bold;
}
div.Coosing__Content figure img {
    width: 40%;
	object-fit: cover;
}



section.Performance {
    background-color: #e2e2e2;
    padding: 100px 0;
    border-radius: 40px 40px 0 0;
}
div.Performance__Group--Content01 {
    width: 80%;
    margin: 0 auto;
}
div.Performance__Group--Content01 figure {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
}
div.Performance__Group--Content01 figure img {
    width: 45%;
    object-fit: cover;
}
div.Performance__Group--Content01 figure figcaption {
    width: 50%;
}
div.Performance__Group--Content01 figure figcaption h4 {
    font-size: clamp(1.7em, 3vw, 2em);
    font-weight: bold;
    margin-bottom: 20px;
}
div.Performance__Group--Content01 figure figcaption p {
    font-size: clamp(1em, 1.5vw, 1.5em);
}

div.Performance__Group--Content02 {
    width: 80%;
    margin: 0 auto;
    background-color: white;
    border-radius: 20px;
    padding: 50px;
    box-sizing: border-box;
}
div.Performance__Difference {
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}
div.Performance__Difference figure:nth-child(2) {
    border: solid red 3px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}
div.Performance__Difference figure figcaption {
    text-align: center;
    margin-bottom: 10px;
    font-size: clamp(1em, 5vw, 1.2em);
    font-weight: bold;
    color: #1b1f9e;
}
@media screen and (max-width: 768px) {
	div.Performance__Group--Content01 figure {
		    flex-direction: column;
	}
	div.Performance__Group--Content01 figure img {
   		 width: 100%;
   		 margin-bottom: 50px;
	}
	div.Performance__Group--Content01 figure figcaption {
   		 width: 100%;
	}	
	div.Performance__Difference {
		flex-direction: column;
	}
	div.Performance__Difference figure:nth-child(1) {
    	margin-bottom: 30px;
	}	
}



section.Features {
    background-color: #e2e2e2;
    background-image: #e2e2e2;	
    padding-bottom: 100px;
}
section.Features h2 {
    text-align: center;
}
section.Features h2 {
    text-align: center;
    font-size: clamp(1.7em, 4vw, 2.5em);
    font-weight: bold;
    border-top: solid 2px;
    border-bottom: solid 2px;
    padding: 20px;
    box-sizing: border-box;
    width: 80%;
    margin: 0 auto;
    color: #1b1f9e;
    margin-bottom: 70px;
}
div.Features__Group--Content {
    width: 80%;
    margin: 0 auto;
}
div.Features__Group--Content h3 {
    font-size: clamp(1.7em, 4vw, 2.5em);
	display: flex;
	align-items: center;
	margin-bottom: 50px;
}
div.Features__Group--Content h3::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 1em;
	background-color: black;
	margin-right: 8px;
}
div.Features__Cards {
    display: flex;
    justify-content: space-between;
	margin-bottom: 40px;
}
div.Features__Cards--01 {
    width: 45%;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    border: solid 3px #1b1f9e;
}
p.Features__Cards--Title {
    font-size: clamp(1.7em, 3vw, 2em);
    text-align: center;
    border-bottom: solid 1px;
    margin-bottom: 20px;
    color: #1b1f9e;
}
div.Features__Cards--01 img {
    margin: 0 auto;
    width: fit-content;
    display: flex;
    margin-bottom: 20px;
}
.Features__Copy p {
    font-size: clamp(1em, 5vw, 1.2em);
}
.Features__Copy p span {
	color: red;
}

div.Features__Group--Content:nth-of-type(2) {
	margin-top: 100px;
}
dl.Features__Test dt {
    font-size: clamp(1.2em, 5vw, 1.5em);
    font-weight: bold;
    color: #1b1f9e;
    margin-bottom: 10px;
}
dl.Features__Test dd {
    font-size: clamp(1em, 5vw, 1.2em);
}
dl.Features__Test dd span {
	color: red;
    line-height: 1.5em;	
}

table.Features__Table {
	width:100%;
	border-collapse:collapse;
	border:1px solid #e5e7eb;
	font-size:clamp(14px,1.5vw,16px);
	line-height:1.7;
	background:#fff;
	margin-top: 30px;	
}
table.Features__Table tbody tr:first-child td{
	position:sticky;
	top:0;background:#1b1f9e;
	color:#fff;
	font-weight:700;
	z-index:1
}
table.Features__Table td{
	padding:12px 16px;
	border-bottom:1px solid #eef2f7;
	vertical-align:top;
	word-break:break-word
}
table.Features__Table tbody tr:nth-child(odd):not(:first-child){
	background:#fafafa
}
table.Features__Table tbody tr:hover{
	background:#f5f7fb
}
table.Features__Table td:nth-child(1){
	width:28%;
	font-weight:700
}
table.Features__Table td:nth-child(2){
	width:22%;
	white-space:nowrap
}
table.Features__Table td:nth-child(3){
	width:auto
}
table.Features__Table td br{
	line-height:2
}
@media (max-width:768px){
  table.Features__Table table{
	  font-size:14px
	}
  table.Features__Table td{
	  padding:10px
	}
  table.Features__Table td:nth-child(1){
	  width:40%
	}
  table.Features__Table td:nth-child(2){
	  width:25%
	}
}

div.Features__Group--Content:nth-of-type(3) {
    margin-top: 100px;
}
figure.Features__SelfCleaning figcaption {
    font-size: clamp(1em, 5vw, 1.2em);
    line-height: 1.5em;
    margin-bottom: 50px;
}
figure.Features__SelfCleaning picture img {
    background-color: white;
    padding: 50px;
    box-sizing: border-box;
}


.Boundary__Round--01 {
    position: relative;
    width: 100%;
    height: clamp(250px, 30vh, 300px);
    background: #f6faed;
    overflow: hidden;
}
.Boundary__Wave--01 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
@media screen and (max-width:768px) {
	.Boundary__Round--01 {
	    height: clamp(50px, 12vh, 200px);
		transition: height 0.5s ease;
	}
}
@media screen and (max-width: 768px) {
	div.Features__Cards {
		flex-direction: column;
	}
	div.Features__Cards--01 {
   		 width: 100%;
	}
	div.Features__Cards--01:nth-child(1) {
   		 margin-bottom: 30px;
	}
}



section.Energy {
    background-color: #f6faed;
}
div.Energy__Group {
    width: 80%;
    margin: 0 auto;
    padding-top: 40px;
}
div.Energy__Image {
    background-color: white;
    padding: 35px;
    box-sizing: border-box;
}	
div.Energy__Image img {
}
.Energy__Table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #e5e7eb;
	font-size: clamp(14px, 1.5vw, 16px);
	line-height: 1.7;
	background: #fff;
	margin: 40px auto 0px auto;
}
.Energy__Table th {
	background: #1b1f9e;
	color: #fff;
	font-weight: 700;
	text-align: center;
	border: 1px solid #dce0e5;
	padding: 10px 12px;
}
.Energy__Table thead tr:first-child th {
	background: #0f1561;
}
.Energy__Table td {
	padding: 12px 16px;
	border-bottom: 1px solid #eef2f7;
	border-right: 1px solid #eef2f7;
	text-align: center;
	vertical-align: middle;
	word-break: break-word;
}
.Energy__Table td:first-child {
	font-weight: 700;
	text-align: left;
	background: #fafafa;
}
.Energy__Table tbody tr:nth-child(odd) {
	background: #fcfcfc;
}
.Energy__Table tbody tr:hover {
	background: #f5f7fb;
}
.Energy__Table td:empty {
	border-top: none;
	border-bottom: none;
	background: transparent;
}
@media (max-width: 768px) {
  .Energy__Table {
	  font-size: 14px;
	}
  .Energy__Table th, .Energy__Table td {
	  padding: 8px 10px;
	}
}
dl.Energy__Copy {
    padding: 50px 0;
    box-sizing: border-box;
}

dl.Energy__Copy dt {
    font-size: clamp(1.2em, 5vw, 1.5em);
    font-weight: bold;
    color: #1b1f9e;
    margin-bottom: 10px;
}
dl.Energy__Copy dd {
    font-size: clamp(1em, 5vw, 1.2em);
    line-height: 1.5em;
}



.Boundary__Round--02 {
    position: relative;
    width: 100%;
    height: clamp(250px, 30vh, 300px);
    background: white;
    overflow: hidden;
}
.Boundary__Wave--02 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
@media screen and (max-width:768px) {
	.Boundary__Round--02 {
        height: clamp(50px, 12vh, 200px);
		transition: height 0.5s ease;
	}
}



div.Guarantee__Group {
    width: 80%;
    margin: 0 auto;
}
div.Guarantee__Group p {
    font-size: clamp(1em, 5vw, 1.2em);
    line-height: 1.5em;
}
div.Guarantee__Group p span {
    font-weight: bold;
    Color: red;
}


section.Case {
    margin-top: 100px;
}
div.Case__Group {
    width: 80%;
    margin: 0 auto;
}
div.Case___Images {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 100px;
}
div.Case___Images--Group {
    width: 32%;
    display: flex;
    flex-direction: column;
}
div.Case___Images--Group img {
    margin-bottom: 40px;
    border-radius: 10px;
}

.Case___Images--Group table{
	flex:1 1 0;
	width:100%;
	border-collapse:collapse;
	border:1px solid #e5e7eb;
	background:#fff;
	font-size:clamp(14px,1.5vw,16px);
	line-height:1.7;
	table-layout:fixed;
}
.Case___Images--Group thead th{
	background:#1b1f9e;
	color:#fff;
	font-weight:700;
	text-align:center;
	padding:10px 12px;
	border-right:1px solid #dce0e5;
	word-break:break-word;
}
.Case___Images--Group tbody td{
	padding:12px 16px;
	border-top:1px solid #eef2f7;
	border-right:1px solid #eef2f7;
	text-align:left;
	vertical-align:middle;
	word-break:break-word;
}
.Case___Images--Group thead th:last-child,
.Case___Images--Group tbody td:last-child{
	border-right:none;
}
.Case___Images--Group tbody tr:nth-child(odd){
	background:#fcfcfc;
}
.Case___Images--Group tbody tr:hover{
	background:#f5f7fb;
}
@media screen and (max-width: 768px) {
	div.Case___Images--Group {
   		 width: 100%;
   		 margin-bottom: 100px;
	}
	div.Case___Images {
		 flex-direction: column;
   		 margin-bottom: 0;	
	}	
}