@charset "UTF-8";


/**************************************************************************************************

キービジュアル

**************************************************************************************************/
/* Main */
.flexPcMain{
display:block;
max-width:100%;
min-width:1000px;
position:relative;
}

.flexPcMain img{
width:100%;
}

/*** スマホは表示しない ***/
.flexSpMain{
display:none;
}




.wrap {
  overflow: hidden;
  position: relative;
}
.wrap::before {
  animation: displayImg 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
animation-delay:0.5s;

  background: #fff;
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 31;
}
@keyframes displayImg {
  100% {
    transform: translateX(100%);
  }
}

.topBtn{
position:absolute;
bottom:7%;
left:50%;
-webkit-transform: translateX(-50%);
-ms-transform:translateX(-50%);
          transform: translateX(-50%);

}

/*** ボタン ***/

.comBtn a{
width:380px;
	font-size:20px;
	text-align:center;
	color:#000;
	text-decoration: none;
margin:0 auto 0 auto;
	display: block;
	padding:38px 0 38px 0;
	position:relative;
background:#ffe109;
border-radius: 80px;         /* CSS3 */
	-moz-border-radius: 80px;    /* Firefox */
	-webkit-border-radius: 80px;
transition: all 0.25s ease-in-out; /* 滑らかな変化を設定 */
}

.comBtn .visited a, {
background:#fff;
}


.comBtn a:hover {
background:#53c6f3;
color:#fff;
	opacity:1.0;
	filter: alpha(opacity=100);
}

.comBtn a:active {
color:#fff;
background:#002248;
	opacity:1.0;
	filter: alpha(opacity=100);
}

.comBtn a:before{
font-family: "Font Awesome 5 Free";
content:'\f138';
position:absolute;
font-weight: 900;
font-size: 110%;
top:50%;
right:40px;
color:#000;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);
transition: all 0.25s ease-in-out; /* 滑らかな変化を設定 */
}

.comBtn a:hover:before{
font-family: "Font Awesome 5 Free";
content:'\f138';
position:absolute;
font-weight: 900;
font-size: 110%;
top:50%;
right:30px;
color:#fff;
-webkit-transform: translateY(-50%);
-ms-transform:translateY(-50%);
          transform: translateY(-50%);
}



.slide-img {
min-width:1000px;
    background-size: cover; 
    background-position: center center; /* 背景画像は中央を軸に表示させる */
  height:600px; 

}



img.kadomaru {
    border-radius: 10px;
}


/**************************************************************************************************

3つの特色

**************************************************************************************************/

#featureBox{
max-width:1500px;
min-width:1000px;
display:block;
margin:60px auto 70px auto;
background:#fff;
}

#featureBox .ttlCap{
font-size:15px;
text-align:center;
letter-spacing:2.0px;
color:#555;
line-height:1.5em;
}

#featureBox h2{
font-size:50px;
text-align:center;
font-weight:700;
color:#052c63;
margin:0 0 20px 0;
line-height:1.5em;
}


#featureBox ul {
width:96%;
padding:0 2%;
margin:0 auto;
}

#featureBox ul li{
width:32%;
display:inline-block;
vertical-align:top;
margin:0;
position:relative;
}


#featureBox ul li:nth-child(2){
width:32%;
display:inline-block;
vertical-align:top;
margin:0 2%;
}

#featureBox ul li img{
width:100%;
}



#featureBox h3{
background:#052c63;
width:100%;
color:#fff;
font-size:22px;
font-weight:700;
line-height:1.5em;
text-align:center;
padding:8px 0;
position:absolute;
top:0;
left:0;
border-radius:10px 10px 0 0;         /* CSS3 */
	-moz-border-radius:10px 10px 0 0;    /* Firefox */
	-webkit-border-radius:10px 10px 0 0;

}



/**************************************************************************************************

開発の背景

**************************************************************************************************/
#backendArea{
width:100%;
background:#dbecf6;
padding:60px 0 30px 0;
}

#backendBox{
max-width:1200px;
min-width:1000px;
margin:0 auto;
}

#backendBox h2{
font-size:38px;
text-align:center;
font-weight:700;
color:#004ea2;
line-height:1.5em;
}

#backendBox h2 span{
font-size:45px;
}


#backendBox .expbg{
width:1000px;
background:#fff;
padding:30px 40px;
margin:30px auto;
border-radius:10px;         /* CSS3 */
	-moz-border-radius:10px;    /* Firefox */
	-webkit-border-radius:10px;

}

#backendBox h3{
font-size:30px;
text-align:center;
font-weight:700;
color:#e34257;
margin:0 0 15px 0;
line-height:1.5em;
}

#backendBox p{
font-size:20px;
text-align:left;
color:#333;
line-height:2.0em;
}

#backendBox h4{
font-size:50px;
text-align:center;
font-weight:700;
color:#052c63;
line-height:1.5em;
}



/**************************************************************************************************

フレキシブルシェードの説明

**************************************************************************************************/
#aboutArea{
width:100%;
background:#f3f5f5;
padding:0 0 60px 0;
}

#aboutBox{
max-width:1200px;
min-width:1000px;
margin:0 auto;
}

#aboutBox .triangle-down {
margin:-1px auto 0 auto;
  width:100px;       /* 三角形の横幅 */
  height: 36px;      /* 三角形の高さ */
  background-color: #dbecf6; /* 三角形の色 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}


#aboutBox .aboutBlock{
width:100%;
background:#fff;
padding:30px 40px;
margin:50px auto;
border-radius:10px;         /* CSS3 */
	-moz-border-radius:10px;    /* Firefox */
	-webkit-border-radius:10px;
 	-webkit-box-shadow:0 0 8px rgba(0,0,0,0.1);
box-shadow:4px 4px 4px 4ppx rgba(0,0,0,0.3);

}


#aboutBox .aboutBlock h3{
width:380px;
background:#052c63;
font-size:24px;
margin:0 0 20px 0;
padding:8px 0;
font-weight:700;
color:#fff;
text-align:center;
line-height:1.5em;
border-radius:40px;         /* CSS3 */
	-moz-border-radius:40px;    /* Firefox */
	-webkit-border-radius:40px;

}

#aboutBox .aboutBlock p{
font-size:17px;
color:#333;
text-align:left;
margin:0 0 0 10px;
line-height:1.7em;
}


/***  フレキシブルシェードとは ***/
#aboutBox dl.b1{
}

#aboutBox dl.b1 dt{
width:65%;
margin:0 3% 0 0;
display:inline-block;
vertical-align:middle;
}

#aboutBox dl.b1 dd{
width:32%;
margin:0;
display:inline-block;
vertical-align:middle;
}

#aboutBox .aboutBlock h4.b1{
font-size:24px;
color:#e34257;
text-align:left;
line-height:1.7em;
margin:20px 0 20px 10px;
}

#aboutBox .aboutBlock .b1 img{
width:100%;
}



/***  フレキシブルシェードの強み ***/
#aboutBox dl.b2{

}

#aboutBox dl.b2 dt{
width:32%;
margin:0 3% 0 0;
display:inline-block;
vertical-align:middle;
}

#aboutBox dl.b2 dd{
width:65%;
margin:0;
display:inline-block;
vertical-align:middle;
}

#aboutBox .aboutBlock h4.b2{
font-size:22px;
color:#e34257;
text-align:left;
line-height:1.7em;
margin:20px 0 5px 10px;
}

#aboutBox .aboutBlock .b2 img{
width:100%;
}

#aboutBox .aboutBlock .b2 .spimg{
display:none;
}


/***  5つの特徴 ***/
#aboutBox dl.b3{
position:relative;
}

#aboutBox dl.b3 dt{
width:68%;
margin:0 0 0 0;
display:inline-block;
vertical-align:middle;
}


#aboutBox dl.b3 dd{
width:32%;
margin:0;
display:inline-block;
vertical-align:middle;
position:absolute;
bottom:-30px;
right:0;
}


#aboutBox dl.b3 ul.pc{
display:block;
margin:50px 0 0 0;
width:100%;
}

#aboutBox dl.b3 ul.pc li{
display:inline-block;
margin:0 1% 0 0;
}

#aboutBox dl.b3 ul.pc li img{
width:100%;
}

#aboutBox dl.b3 ul.sp{
display:none;
}



/**************************************************************************************************

シートの操作

**************************************************************************************************/
#operationArea{
width:100%;
background:#e2eef5;
padding:60px 0 60px 0;
}

#operationBox{
max-width:1500px;
min-width:1000px;
margin:0 auto;
}


#operationBox .ttlCap{
font-size:15px;
text-align:center;
letter-spacing:2.0px;
color:#555;
line-height:1.5em;
}

#operationBox h2{
font-size:50px;
text-align:center;
font-weight:700;
color:#052c63;
margin:0 0 50px 0;
line-height:1.5em;
}



#operationBox h3{
width:330px;
margin:0 auto;
color:#333;
font-size:28px;
font-weight:700;
background:#fff;
line-height:1.5em;
text-align:center;
padding:10px 0;
border-radius:40px;         /* CSS3 */
	-moz-border-radius:40px;    /* Firefox */
	-webkit-border-radius:40px;

}

#operationBox .triangle-down {
margin:-1px auto 0 auto;
  width:30px;       /* 三角形の横幅 */
  height: 15px;      /* 三角形の高さ */
  background-color: #fff; /* 三角形の色 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}


#operationBox p.descri{
color:#333;
font-size:18px;
margin:30px 0 0 0;
line-height:1.5em;
text-align:center;
}


#operationBox ul.kaihei {
width:96%;
padding:0 2%;
margin:30px auto 100px auto;
}

#operationBox ul.kaihei li{
width:49%;
display:inline-block;
vertical-align:top;
margin:0 2% 0 0;
position:relative;
}


#operationBox ul.kaihei li:nth-child(2){
width:49%;
display:inline-block;
vertical-align:top;
margin:0;
}

#operationBox ul.kaihei li img{
width:100%;
}

#operationBox ul.hazusi {
width:96%;
padding:0 2%;
margin:30px auto 0 auto;
}

#operationBox ul.hazusi li{
width:32%;
display:inline-block;
vertical-align:top;
margin:0;
position:relative;
}


#operationBox ul.hazusi li:nth-child(2){
width:32%;
display:inline-block;
vertical-align:top;
margin:0 2%;
}




#operationBox ul.hazusi li img{
width:100%;
}

#operationBox ul li p{
color:#333;
font-size:18px;
margin:15px 0 0 0;
line-height:1.5em;
}

#operationBox ul li p span{
color:#004ea2;
margin:0 5px 0 0;
}


#operationBox h4{
font-size:30px;
text-align:center;
font-weight:700;
color:#052c63;
margin:60px 0 20px 0;
line-height:1.5em;
}



#operationBox .youtube{
margin:0 auto 50px auto;
width:1000px;
height:551px;
text-align:center;
padding:0;
}





/**************************************************************************************************

ディテール（詳細）

**************************************************************************************************/

#detailArea{
max-width:1500px;
min-width:1000px;
display:block;
margin:80px auto 70px auto;
background:#fff;
}

#detailBox{
width:96%;
padding:0 2%;
margin:0 auto;
}

#detailBox h2{
font-size:28px;
font-weight:700;
color:#333;
border-left:solid 8px #052c63;
border-bottom:solid 1px #ccc;
margin:0 0 30px 0;
padding:4px	0 6px 20px;
line-height:1.4em;
}


#detailBox ul {
width:100%;
margin:0 auto;
}

#detailBox ul li{
width:23.5%;
display:inline-block;
vertical-align:top;
margin:0 2% 0 0;
position:relative;
}


#detailBox ul li:nth-child(4){
width:23.5%;
display:inline-block;
vertical-align:top;
margin:0;
}

#detailBox ul li img{
width:100%;
}

#detailBox ul li p{
color:#333;
font-size:18px;
margin:15px 0 0 0;
line-height:1.5em;
}

#detailBox ul li p span{
color:#004ea2;
margin:0 5px 0 0;
}




/**************************************************************************************************

スペック

**************************************************************************************************/

#specArea{
max-width:1500px;
min-width:1000px;
display:block;
margin:100px auto 70px auto;
background:#fff;
}

#specBox{
width:96%;
padding:0 2%;
margin:0 auto;
}

#specBox h2{
font-size:28px;
font-weight:700;
color:#333;
border-left:solid 8px #052c63;
border-bottom:solid 1px #ccc;
margin:0 0 30px 0;
padding:4px	0 6px 20px;
line-height:1.4em;
}


#specBox dl {
width:100%;
margin:0 auto;
}

#specBox dt {
width:45%;
display:inline-block;
vertical-align:top;
margin:0 10% 0 0;
}

#specBox dl dd {
width:45%;
display:inline-block;
vertical-align:top;
margin:0;
}

#specBox dl dd img{
width:100%;
}

#specBox p{
color:#333;
font-size:17px;
margin:15px 0 0 0;
line-height:1.5em;
}


#specBox table {
	border-collapse:collapse;
width:100%;
margin:10px 0 0 0;
}

#specBox th {
	font-size:20px;
	line-height:2.0em;
background:#fffcdb;
width:20%;
	vertical-align:middle;
	padding:20px 0;
	font-weight:bold;
	text-align:center;
	border:solid 1px #333;
	color:#333;
}

#specBox td {
	font-size:20px;
	line-height:2.0em;
width:80%;
	padding:20px 10px 20px 20px;
	vertical-align:middle;
	text-align:left;
	border:solid 1px #333;
	color:#333;
}




/**************************************************************************************************

設置イメージ

**************************************************************************************************/

#locationArea{
max-width:1500px;
min-width:1000px;
display:block;
margin:80px auto 70px auto;
background:#fff;
}

#locationBox{
width:96%;
padding:0 2%;
margin:0 auto;
}

#locationBox h2{
font-size:28px;
font-weight:700;
color:#333;
border-left:solid 8px #052c63;
border-bottom:solid 1px #ccc;
margin:0 0 30px 0;
padding:4px	0 6px 20px;
line-height:1.4em;
}


#locationBox ul {
width:100%;
margin:0 auto;
}

#locationBox ul li{
width:49%;
display:inline-block;
vertical-align:top;
margin:0 2% 50px 0;
position:relative;
}


#locationBox ul li:nth-child(even){
width:49%;
display:inline-block;
vertical-align:top;
margin:0;
}

#locationBox ul li img{
width:100%;
}

#locationBox ul li p{
color:#333;
font-size:18px;
margin:15px 0 0 0;
line-height:1.5em;
}

#locationBox ul li p span{
color:#004ea2;
margin:0 5px 0 0;
}

#locationBox .snowArea{
width:100%;
margin:0 0 50px 0;
background:#dbecf6;
padding:40px;
border-radius:10px;         /* CSS3 */
	-moz-border-radius:10px;    /* Firefox */
	-webkit-border-radius:10px;
}


#locationBox .snowArea h3{
width:380px;
margin:0 auto;
color:#fff;
font-size:28px;
font-weight:700;
background:#052c63;
line-height:1.5em;
text-align:center;
padding:10px 0;
border-radius:40px;         /* CSS3 */
	-moz-border-radius:40px;    /* Firefox */
	-webkit-border-radius:40px;

}

#locationBox .snowArea .triangle-down {
margin:-1px auto 0 auto;
  width:30px;       /* 三角形の横幅 */
  height: 15px;      /* 三角形の高さ */
  background-color: #052c63; /* 三角形の色 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}




#locationBox .snowArea dl {
width:100%;
margin:30px auto 0 auto;
}

#locationBox .snowArea dt {
width:50%;
display:inline-block;
vertical-align:middle;
margin:0 3% 0 0;
}

#locationBox .snowArea dl dd {
width:47%;
display:inline-block;
vertical-align:middle;
margin:0;
}

#locationBox .snowArea dl dd img{
width:100%;
border:solid 4px #fff;
}

#locationBox .snowArea p{
color:#333;
font-size:20px;
line-height:2.0em;
}


/*************************************************************************************************

NONE

**************************************************************************************************/
.pcnone{
display:none;
}

.spnone{
display:block;
}

.br-sp { display:none; }

.br-pc { display:block; }


a[href^="tel:"] {
    pointer-events: none;
}