/*************************
メディアクエリ
*************************/
@media screen and (max-width: 768px){

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}



body {
-webkit-text-size-adjust: 100%;
	background:#f1eeec;
font-family:'Avenir','Corbel',"游ゴシック","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ ゴシック",sans-serif;
　　　font-weight: 200;	
}


img{
  max-width: 100%;
  height: auto;
  border: 0;
  text-align:center;
}


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

キービジュアル

**************************************************************************************************/
/*** PCは表示しない ***/
.flexPcMain{
display:none;
}

.flexPcMain img{
display:none;
width:100%;
}


.flexSpMain{
display:block;
max-width:100%;
min-width:100%;
position:relative;
}

.flexSpMain img{
width:100%;
}


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

}

/*** ボタン ***/

.comBtn a{
width:320px;
	font-size:18px;
	text-align:center;
	color:#000;
	text-decoration: none;
margin:0 auto 0 auto;
	display: block;
	padding:30px 0 30px 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;
}



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

コンテンツBOX

**************************************************************************************************/
.contentsBox{
width:100%;
margin:30px auto 30px auto;
padding:0;
}

.contentsBox p {
font-size:16px;
line-height:2.0em;
color:#000;
}



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

3つの特色

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

#featureBox{
max-width:100%;
min-width:100%;
display:block;
margin:50px auto 50px auto;
background:#fff;
}

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

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


#featureBox ul {
width:100%;
padding:0 3%;
margin:0 auto;
}

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


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

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



#featureBox h3{
background:#052c63;
width:100%;
color:#fff;
font-size:20px;
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:40px 0 20px 0;
}

#backendBox{
max-width:100%;
min-width:100%;
margin:0 auto;
padding:0 3%;
}

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

}

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


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

}

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

#backendBox p{
font-size:17px;
text-align:left;
color:#333;
margin:15px 0 0 0;
line-height:1.6em;
}

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



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

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

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

#aboutBox{
max-width:100%;
min-width:100%;
margin:0 auto;
padding:0 3%;
}

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


#aboutBox .aboutBlock{
width:100%;
background:#fff;
padding:30px 5%;
margin:30px 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:100%;
background:#052c63;
font-size:20px;
margin:0 auto 20px auto;
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:16px;
color:#333;
text-align:left;
margin:0 0 0 0;
line-height:1.7em;
}


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

#aboutBox dl.b1 dt{
width:100%;
margin:0 0 20px 0;
display:block;
vertical-align:top;
}

#aboutBox dl.b1 dd{
width:100%;
margin:0;
display:block;
vertical-align:top;
}

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

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



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

}

#aboutBox dl.b2 dt{
display:none;
}

#aboutBox dl.b2 dd{
width:100%;
margin:0;
display:block;
vertical-align:top;
}

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

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

#aboutBox .aboutBlock .b2 .spimg{
display:block;
margin:20px 0 0 0;
}

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


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

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


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


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

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

#aboutBox dl.b3 ul.pc li img{
display:none;
}

#aboutBox dl.b3 ul.sp{
display:block;
margin:30px 0 0 0;
}



#aboutBox dl.b3 ul.sp li{
width:49%;
display:inline-block;
vertical-align:top;
margin:0 2% 15px 0;
position:relative;
}


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

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


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

シートの操作

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

#operationBox{
max-width:100%;
min-width:100%;
margin:0 auto;
padding:0 3%;
}


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

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



#operationBox h3{
width:70%;
margin:0 auto;
color:#333;
font-size:24px;
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:16px;
margin:20px 0 0 0;
line-height:1.5em;
text-align:center;
}


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

#operationBox ul.kaihei li{
width:100%;
display:block;
vertical-align:top;
margin:0 0 30px 0;
position:relative;
}


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

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

#operationBox ul.hazusi {
width:100%;
padding:0 0;
margin:20px auto 0 auto;
}

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


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



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

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

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


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



#operationBox .youtube{
position: relative;
padding-bottom: 60%; /*これが縦横比*/
height: 0;
overflow: hidden;
margin:0 0 30px 0;
width:100%;
}

#operationBox .youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}




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

ディテール（詳細）

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

#detailArea{
max-width:100%;
min-width:100%;
display:block;
margin:50px auto 50px auto;
background:#fff;
}

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

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


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

#detailBox ul li{
width:48%;
display:inline-block;
vertical-align:top;
margin:0 4% 20px 0;
position:relative;
}

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

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

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

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

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




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

スペック

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

#specArea{
max-width:100%;
min-width:100%;
display:block;
margin:50px auto 50px auto;
background:#fff;
}

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

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


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

#specBox dt {
width:100%;
display:inline-block;
vertical-align:top;
margin:0 0 30px 0;
}

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

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

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


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

#specBox th {
	font-size:16px;
	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:16px;
	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:100%;
min-width:100%;
display:block;
margin:50px auto 50px auto;
background:#fff;
}

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

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


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

#locationBox ul li{
width:100%;
display:block;
vertical-align:top;
margin:0 0 30px 0;
position:relative;
}


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

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

#locationBox ul li p{
color:#333;
font-size:16px;
margin:10px 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:30px 5%;
border-radius:10px;         /* CSS3 */
	-moz-border-radius:10px;    /* Firefox */
	-webkit-border-radius:10px;
}


#locationBox .snowArea h3{
width:100%;
margin:0 auto;
color:#fff;
font-size:22px;
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:20px auto 0 auto;
}

#locationBox .snowArea dt {
width:100%;
display:block;
vertical-align:middle;
margin:0 0 30px 0;
}

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

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

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


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

NONE

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

.spnone{
display:none;
}

.br-sp { display:block; }

.br-pc { display:none; }



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



		
}