@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');


/* カスタマイズ用 */

.pane-contents{
width: 100%;
max-width: none;
}

.pane-contents > .container{
margin: 0 auto;
width: 100%;
}

.block-page-block--frame + .block-page-block--frame{
margin: 0;
}

.block-page-block--frame:last-child{
margin-bottom: 0;
}

.goods-detail--storeinfo{
margin: 0;
}

.goods-detail--storeinfo .goods-detail--storeinfo--body{
width: calc(100% - 80px);
max-width: 1100px;
margin: 0 auto;
}

.pane-topic-path{
display: none;
}


/* 全体 */

#special_contents{
width: 100%;
margin: 0 auto;
font-family: "Noto Serif JP", serif;
letter-spacing: 0.5em;
color: #fff;
font-size: 16px;
}

#special_contents span{
font-size: 1em!important;
}

#special_contents span:before{
content: none!important;
}


/* パララックス*/

#special_contents .background_area{
position: relative;
width: 100%;
}

#special_contents .background_top{
height: calc(100vh - 170px);
}

#special_contents .background_sub{
height: calc(100vh - 60px);
}

#special_contents .background_inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: inset(0);
}

#special_contents .background_image{
position: fixed;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
min-width: 1180px;
height: 100vh;
background-size: cover;
background-position: center;
}

#special_contents .title_area{
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
line-height: 2em;
font-size: 26px;
text-shadow: 0 0 0.5em #000, 0 0 1em #000;
}

#special_contents .title_area span.ruby{
padding:0 0.1em!important;
}

#special_contents .title_area span.break{
display: block;
padding-left: 3em;
}

#special_contents .background_image.bg_image-top{
background-image: url('../../../features/windforest/200th/62ask-m200sp_bg.jpg');
}

#special_contents .background_image.bg_image-sub{
background-image: url('../../../features/windforest/200th/62ask-m200sp_bg_sub.jpg');
}


/* メイン*/

#special_contents .scroll_area{
width: 100%;
box-sizing: border-box;
padding: 6rem 5%;
background-color: #2b2927;
}

#special_contents .text_area{
width: 100%;
max-width: calc(1180px - 10%);
margin: 0 auto;
}

#special_contents .text_area h3{
font-size: 32px;
margin: 0;
}

#special_contents .text_area .main_caption{
width: 100%;
margin: 1.5em auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

#special_contents .text_area .caption_area{
width: 64%;
order: 1;
}

#special_contents .text_area .caption_area p.caption{
line-height: 2em;
}

#special_contents .text_area .caption_area p:first-of-type{
margin: 0;
}

#special_contents .text_area .caption_area a{
display: inline-block;
margin: 3rem 0 0 auto;
width: auto;
padding: 1em 2em;
border: 1px solid #777;
border-radius: 999px;
position: relative;
transition: all 0.3s;
font-weight: bold;
}

#special_contents .text_area .caption_area a:after{
content: "";
width: 0.4em;
height: 0.4em;
border-top: solid 1px #B1A792;
border-right: solid 1px #B1A792;
transform: rotate(45deg);
position: absolute;
top: calc(50% - 0.2em);
right: 1.5em;
transition: right 0.3s;
}

#special_contents .text_area .caption_area a:hover{
background: #777;
}

#special_contents .text_area .caption_area a:hover:after{
right: 1em;
}

#special_contents .text_area .photo_area{
order: 2;
content: "";
display: block;
width: 34%;
height: auto;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
background-image: url('../../../features/windforest/200th/62ask-m200sp_1.png');
}


/* 特徴*/

#special_contents .text_area .feature_area{
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 4%;
}

#special_contents .text_area .feature_area h4{
font-size: 15px;
border: none;
padding: 0.8em 0;
margin: 0;
}

#special_contents .text_area .feature_area .feature_content{
width: 22%;
}

#special_contents .text_area .feature_area .feature_content p{
font-size: 13px;
margin: 0;
}

#special_contents .text_area .feature_area  .feature_photo{
content: "";
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
}

#special_contents .text_area .feature_area  .feature_photo.sub1{
background-image: url('../../../features/windforest/200th/62ask-m200sp_sub1.jpg');
}

#special_contents .text_area .feature_area  .feature_photo.sub2{
background-image: url('../../../features/windforest/200th/62ask-m200sp_sub2.jpg');
}

#special_contents .text_area .feature_area  .feature_photo.sub3{
background-image: url('../../../features/windforest/200th/62ask-m200sp_sub3.jpg');
}

#special_contents .text_area .feature_area  .feature_photo.sub4{
background-image: url('../../../features/windforest/200th/62ask-m200sp_sub4.jpg');
}

#special_contents .text_area .detail{
width: 100%;
margin: 6rem 0 0;
padding: 2em 1em;
font-size: 14px;
border-top: solid 1px #777;
border-bottom: solid 1px #777;
}

#special_contents .text_area .detail .model_name{
font-weight: bold;
font-size: 18px;
margin: 0;
}

#special_contents .text_area .detail .model_detail{
line-height: 1.8;
}

#special_contents .text_area > table{
width: 100%;
table-layout: auto;
margin: 0 auto;
letter-spacing: 0.2em;
}

#special_contents .text_area > table tr{
border-bottom: solid 1px #777;
}

#special_contents .text_area > table th,
#special_contents .text_area > table td{
border-collapse: collapse;
padding: 1em;
font-size: 13px;
}

#special_contents .text_area > table th{
width: 15%;
border-right: solid 1px #777;
}

#special_contents .text_area > table td.subcategory{
width: 28%;
border-right: solid 1px #777;
}



@media only screen and (max-device-width: 1000px){

/* カスタマイズ用 */

.block-global-search{
margin: 0;
}

.pane-contents{
margin: 0;
}

.pane-main{
max-width: 100%;
}

.block-page-block--frame{
margin-bottom: 0;
}

.block-page-block--freespace-top{
margin-bottom: 0;
}

.page-page .goods-detail--storeinfo{
margin-bottom: 0;
}

.goods-detail--storeinfo .goods-detail--storeinfo--body {
width: 100%;
max-width: none;
}

footer{
margin: 0;
}


/* 全体 */

#special_contents{
font-size: 1.4rem;
}


/* パララックス*/

#special_contents .background_top{
height: calc(100vh - 11rem);
}

#special_contents .background_sub{
height: calc(100vh - 5.5rem);
}

#special_contents .background_image{
min-width: auto;
}

#special_contents .title_area{
font-size: 1.5rem;
}


/* メイン*/

#special_contents .scroll_area{
padding: 6rem 3rem;
}


#special_contents .text_area h3{
font-size: 2.6rem;
line-height: 1.2;
margin: 0.3em 0 0;
}

#special_contents .text_area .main_caption{
margin: 2em auto 0;
}

#special_contents .text_area .caption_area{
width: 100%;
order: 2;
margin: 1.4em 0 0;
}

#special_contents .text_area .photo_area{
width: 100%;
order: 1;
}

#special_contents .text_area .feature_area{
gap: 4rem;
}

#special_contents .text_area .feature_area .feature_content{
width: 100%;
}

#special_contents .text_area .feature_area h4{
font-size: 1.6rem;
padding: 1.4em 0 0.8em;
}

#special_contents .text_area .feature_area .feature_content p{
font-size: 1.3rem;
}

#special_contents .text_area .detail{
padding: 1.2em 0.8em;
}

#special_contents .text_area .detail .model_name{
font-size: 1.8rem;
}

#special_contents .text_area .detail .model_detail{
font-size: 1.4rem;
}

#special_contents .text_area > table th, #special_contents .text_area > table td{
font-size: 1.3rem;
padding: 1em 0.8em;
}

}