@charset "UTF-8";


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

キービジュアル

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

.ohisamaPcMain img{
width:100%;
}

/*** スマホは表示しない ***/
.ohisamaSpMain{
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;
}


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

指数イラストエリア

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

#shisuArea{
width:100%;
background:#fdfcd8;
padding:20px 0 70px 0;
}

#shisuBoxSp{
display:none;
}

#shisuBoxPc{
width:100%;
display:block;;
max-width:1400px;
min-width:1000px;
display:block;
margin:0 auto;
}

#shisuBoxPc img{
width:100%;

}

#shisuArea h3{
font-size:36px;
color:#30489c;
text-align:center;
line-height:1.5em;
margin:50px 0 0 0;
}

.slash-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em; /* 文字と線の間の距離 */
}

.slash-title::before,
.slash-title::after {
  content: "";
  width: 2px;       /* 線の太さ */
  height: 34px;     /* 線の長さ */
  background-color: #30489c; /* 線の色 */
}

/* 左側の線（右側に傾ける） */
.slash-title::before {
  transform: rotate(-25deg);
}

/* 右側の線（左側に傾ける） */
.slash-title::after {
  transform: rotate(25deg);
}


#shisuArea ul {
width:1040px;
margin:20px auto 60px auto;
}

#shisuArea ul li{
width:500px;
display:inline-block;
vertical-align:top;
margin:0 40px 0 0;
}

#shisuArea ul li img{
width:100%;
border-radius: 10px 10px 0 0;         /* CSS3 */
	-moz-border-radius: 10px 10px 0 0;    /* Firefox */
	-webkit-border-radius: 10px 10px 0 0;
}

#shisuArea ul li:last-child{ 
width:500px;
display:inline-block;
vertical-align:top;
margin:0;
}



#shisuArea ul li h4{
width:500px;
background:#30489c;
text-align:center;
padding:10px;
line-height:1.3em;
font-size:24px;
color:#fdfcd8;
font-weight:700;
border-radius: 0 0 10px 10px;         /* CSS3 */
	-moz-border-radius: 0 0 10px 10px;    /* Firefox */
	-webkit-border-radius: 0 0 10px 10px;

}

#shisuArea ul li h4 span{
font-size:20px;
color:#fff;
font-weight:700;
}


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

おひさまカーテン5つの特徴

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

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

#backendBox h2{
font-size:45px;
text-align:center;
font-weight:700;
color:#000;
line-height:1.5em;
margin:0 0 30px 0;
}

#backendBox h2 span{
margin:0 5px;
font-size:55px;
color:#ff0000;
}


#backendBox ul{
width:98%;
margin:0 auto 25px auto;
padding:0 1%;
}

#backendBox ul li{
width:18%;
display:inline-block;
margin:0 2.5% 0 0;
vertical-align:top;
}

#backendBox ul li:last-of-type{
width:18%;
display:inline-block;
margin:0;
}

#backendBox ul li img{
width:100%;
 border-radius: 20px;
transition: border-color 0.3s ease; /* 線がスッと出る動きをつける */
}


.hover-line {
  transition: border-color 0.3s ease; /* 線がなめらかに表示される効果 */
}

.hover-line:hover {
box-shadow: 0 0 0 4px #ea5514;
}



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

おひさまカーテン5つの特徴の説明

**************************************************************************************************/
#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: #e9e6f3; /* 三角形の色 */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}


#aboutBox .aboutBlock{
width:100%;
background:#fff;
padding:0 0 80px 0;
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 ul{
width:930px;
margin:0 auto;
padding:0;
}


#aboutBox .aboutBlock ul li{
width:400px;
margin:0 130px 0 0;
display:inline-block;
vertical-align:top;
}

#aboutBox .aboutBlock ul li:nth-child(even){ 
width:400px;
margin:0 0 0 0;
display:inline-block;
vertical-align:top;
}

#aboutBox .aboutBlock h3{
width:400px;
background:#e9e6f3;
font-size:30px;
margin:0 0 20px 0;
padding:12px 0 10px 0;
font-weight:700;
color:#000;
text-align:center;
line-height:1.2em;
border-radius:40px;         /* CSS3 */
	-moz-border-radius:40px;    /* Firefox */
	-webkit-border-radius:40px;

}

#aboutBox .aboutBlock p{
font-size:24px;
color:#333;
text-align:left;
margin:30px 15px 10px 15px;
line-height:1.6em;
}

#aboutBox .aboutBlock ul li .thumb{
text-align:center;
}

#feature1, #feature2, #feature3, #feature4, #feature5 {
  margin-top : -76px;
  padding-top : 76px;
}


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



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




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

シートの操作

**************************************************************************************************/
#operationArea{
width:100%;
background:#fef3e5;
padding:60px 0 60px 0;
border-bottom:solid 1px #fff;
}

#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:#000;
margin:0 0 50px 0;
line-height:1.5em;
}


#operationBox .ttl{
margin:0 auto;
position:relative;
text-align:center;
}


#operationBox h3{
color:#fff;
font-size:28px;
font-weight:700;
line-height:1.5em;
text-align:center;
position:absolute;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

#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:40px auto 100px 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:#ea5227;
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;
}





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

ディテール（詳細）

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

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


#detailBox ul {
width:100%;
margin:40px auto 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:#ea5227;
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;
}