/*************************
メディアクエリ
*************************/
@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は表示しない ***/
.ohisamaPcMain{
display:none;
}

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


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

.ohisamaSpMain 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;
}



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

指数イラストエリア

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

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

#shisuBoxPc{
display:none;
}

#shisuBoxSp{
width:100%;
display:block;;
max-width:100%;
min-width:100%;
display:block;
margin:0 auto;
}

#shisuBoxSp .panorama{
overflow: auto;
max-width:800px;
max-height:auto;
}

#shisuBoxSp img.pano{
width:800px;
height:auto !important;
}

#shisuBoxSp .panorama img{
  max-width: initial; /*** img100%をリセット ***/
  height: auto;
  border: 0;
  text-align:center;
}



#shisuBoxSp img{
width:100%;

}

#shisuArea h3{
font-size:22px;
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: 28px;     /* 線の長さ */
  background-color: #30489c; /* 線の色 */
}

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

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


#shisuArea ul {
width:96%;
margin:20px auto 60px auto;
padding:0 2%;
}

#shisuArea ul li{
width:100%;
display:block;
vertical-align:top;
margin:0 0 20px 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:100%;
display:block;
vertical-align:top;
margin:0;
}



#shisuArea ul li h4{
width:100%;
background:#30489c;
text-align:center;
padding:10px;
line-height:1.3em;
font-size:22px;
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:30px 0 20px 0;
}

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

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

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


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

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

#backendBox ul li:nth-child(3){
width:31%;
display:inline-block;
margin:0 0 15px 0;
vertical-align:top;
}

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

#backendBox ul li:last-of-type{
width:31%;
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 30px 0;
}

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

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


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


#aboutBox .aboutBlock ul li{
width:100%;
margin:0 0 50px 0;
display:block;
vertical-align:top;
}

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

#aboutBox .aboutBlock ul li:last-of-type{
width:100%;
padding:0 0 20px 0;
margin:0 0 0 0;
display:block;
vertical-align:top;
}


#aboutBox .aboutBlock h3{
width:70%;
background:#e9e6f3;
font-size:26px;
margin:0 auto 15px auto;
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:20px;
color:#333;
text-align:left;
margin:0 15px 0 15px;
line-height:1.6em;
}

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

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


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

シートの操作

**************************************************************************************************/
#operationArea{
width:100%;
background:#fef3e5;
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:#000;
margin:0 0 20px 0;
line-height:1.5em;
}



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


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

}



#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 50px 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:#ea5227;
margin:0 5px 0 0;
}


#operationBox h4{
font-size:20px;
text-align:center;
font-weight:700;
color:#052c63;
margin:30px 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;
margin:0 auto;
}



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



		
}