body.top_page{
margin: 0;
padding: 0;
height: 100%;
overflow: hidden; /* スクロール禁止 */
overscroll-behavior: none; /* モダンな対策 */
touch-action: none; /* iOSでのタッチスクロール禁止 */
}


#webgl_canvas_layout{
position: relative;
display: block;
margin: 0;
padding: 0;
width: calc( 100vw - 0px );
width: -webkit-calc( 100vw - 0px );
height: calc( 100svh - 26px );
height: -webkit-calc( 100svh - 26px );
overflow: hidden;

/*
margin: 0px 0 0 4vw;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
*/
}

#webgl-canvas {
display: block;
position: relative;
top: 0;
left: 0;
margin: 0 0 0 0;
padding: 0;
width: 100%;
height: 100%;
}



body.top_page h1{
position: fixed;
z-index: 3;
bottom: 20px;
right: 2vw;
width: 40vw;
margin: 0;
padding: 0;
}
body.top_page h1 img{
width: 100%;
height: auto;
}


/*ファーストビュー*/
.firs_area{
position: relative;
margin: 0 auto;
padding: 0;
width: 100%;
}

/*縦の飾り*/
.firs_area .tate_kazari{
position: absolute;
z-index: 2;
top: 0;
right: 4vw;
}


.firs_area h2{
width: 100%;
margin: 80px auto 0 auto;
padding: 0;

text-align: center;
}

.firs_area img{
width: 100%;
height: auto;
}

.firs_area .text_area{
position: relative;
width: 79vw;
margin: 0 17vw 0 4vw;
padding: 0;
}





.firs_area p{
margin: 0;
padding: 0;

/*Neue Haas Grotesk Display Pro 65 Medium*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal;

/*Aktiv Grotesk Medium*/
font-family: "aktiv-grotesk", sans-serif;
font-weight: 500;
font-style: normal;

font-size: 15px;
line-height: 1.5;
font-feature-settings: "kern";
letter-spacing: -0.01em;
word-break: break-word;
}






/*日本語エリア解説*/
#index_base{
position: relative;
z-index: 1;

width: 75%;
margin: 90px 6% 90px 19%;
padding: 0;
}



#index_base h1{
margin: 0 0 0 0;
padding: 0;

/*FONT 375px計算*/
font-size: 13px;
font-size: 3.4666666vw;
font-size: clamp(12px, 3.4666666vw, 14.0px);

line-height: 1.5;
letter-spacing: 0.0em;
}




/*日本語*/
#index_base p{
margin: 0 0 30px 0;

/*DNP ShueiGoKinStd B*/
font-family: YakuHanJPs, "dnp-shuei-gothic-kin-std", sans-serif;
font-weight: 600;
font-style: normal;

/*FONT 375px計算*/
font-size: 14px;
font-size: 3.7333333vw;
font-size: clamp(13px, 3.7333333vw, 15.0px);

/*FONT 375px計算*/
font-size: 13px;
font-size: 3.4666666vw;
font-size: clamp(12px, 3.4666666vw, 14.0px);

line-height: 1.7;
letter-spacing: 0.0em;
}






#index_base h2{
margin: 0 0 20px 0;

/*Neue Haas Grotesk Display Pro 65 Medium*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal;

/*FONT 375px計算*/
font-size: 19px;
font-size: 5.06666vw;
font-size: clamp(18px, 5.0666vw, 20.0px);

line-height: 1.5;
letter-spacing: 0.0em;
}

#index_base h3{
margin: 20px 0 10px 0;

/*Neue Haas Grotesk Display Pro 65 Medium*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal;

/*FONT 375px計算*/
font-size: 19px;
font-size: 5.06666vw;
font-size: clamp(18px, 5.0666vw, 20.0px);


/*FONT 375px計算*/
font-size: 17px;
font-size: 4.5333333vw;
font-size: clamp(16px, 4.5333333vw, 18.0px);


line-height: 1.5;
letter-spacing: 0.0em;
}


/*01*/
#index_base .each_block_index01{
margin: 0;
padding: 0 0 40px 0;
}


#index_base .each_block_index01 .english_area{
/*Neue Haas Grotesk Display Pro 65 Medium*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal;
}
#index_base .each_block_index01 h2{

}

#index_base .each_block_index01 p{

}




/*02*/
#index_base .each_block_index02{
margin: 0;
padding: 30px 0 50px 0;
}

#index_base .each_block_index02 h2{
margin: 0 0 40px 0;
}

#index_base .each_block_index02 p{
margin: 0 0 40px 0;
}









#featured_post{
margin: 0 0 200px 0;
padding: 0 0 0 0;
}


/*リスト*/
#featured_post ul#featured_list{
width: 100%;
margin: 0;
padding: 0;
border-top:1px solid #333;
}

#featured_post ul#featured_list li{
position: relative;
margin:0;
padding: 200px 0 200px 0;
width: 100%;

border-bottom:1px solid #333;
box-sizing: border-box;

display: flex;
justify-content: center;
align-items: center;

font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 500;
font-style: normal;

font-feature-settings: "kern";
letter-spacing: 0.02em;
}



#featured_post ul#featured_list li:nth-child(1){

}
#featured_post ul#featured_list li:nth-child(2){

}

#featured_post ul#featured_list li:nth-child(2n+1){

}


#featured_post ul#featured_list li .featured_list_layout{
position: relative;
width: 100%;
}


#featured_post ul#featured_list li .featured_list_layout h2{
width: 100%;
text-align: center;
margin: 30px auto 0 auto;

font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 500;
font-style: normal;

font-size: 15px;
}




#featured_post ul#featured_list li .photo_area{
width: 70%;;
margin: 0 auto;
}

#featured_post ul#featured_list li .photo_area img{
width: 100%;
height: auto;
}


/*カテゴリー*/
#featured_post ul#featured_list li .category_area{
position: absolute;
left: 10px;
bottom: 10px;

width: calc( 100% - 20px );
width: -webkit-calc( 100% - 20px );
margin: 0;
padding: 0;

font-size: 13px;
line-height: 1.4;
letter-spacing: 0.01em;
text-align: center;
}




#featured_post ul#featured_list li .category_area .each_cat_link{
display: inline-block;
margin: 0 10px 0 0;
}




#featured_post ul#featured_list li .view_more{
position: absolute;
left: 0;
bottom: 40px;
width: 100%;
margin: 0;
padding: 15px 0 0 0;

text-align: center;

font-size: 14px;
letter-spacing: 0.01em;
}


#featured_post ul#featured_list li .seasonal_post_date{
position: absolute;
width: 100%;
text-align: center;
bottom: 30px;
left: 0;
font-size: 13px;
letter-spacing: 0.0em;
}







/*スマホ終了
--------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {


body.top_page h1{
position: relative;
z-index: 1;
bottom: auto;
right: auto;

width: 100%;
margin: 40px auto 0 auto;
padding: 0 0 0 0;
}




/*ファーストビュー*/
.firs_area{
position: relative;
margin: 0 auto;
padding: 0;
width: 94vw;
}


.firs_area .text_area{
width: 100%;
margin: 0 auto;
padding: 0 0 40px 0;
}


.firs_area h2{
width: 100%;
margin: 70px auto 0px auto;
padding: 0;

text-align: center;
}

.firs_area p{
margin: 40px auto 0px auto;
padding: 0;

/*Neue Haas Grotesk Display Pro 65 Medium*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 500;
font-style: normal;

font-size: 40px;
line-height: 1.2;
letter-spacing: 0.0em;
}


#index_base{
position: relative;
width: 44%;
margin: 0 auto;
padding: 0 6% 0 50%;
}


#index_base h1{
margin: 0 0 40px 0;
padding: 0;

font-size: 14px;;
line-height: 1.5;
letter-spacing: 0.0em;
}



#index_base h2{
margin: 0 0 20px 0;
padding: 0;

/*Neue Haas Grotesk Display Pro 65 Medium*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal;

font-size: 20px;
line-height: 1.5;
letter-spacing: 0.0em;
}


#index_base h3{
margin: 0 0 0 0;
padding: 0;

/*Neue Haas Grotesk Display Pro 65 Medium*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal;

font-size: 20px;
line-height: 1.5;
letter-spacing: 0.0em;
}




#index_base p{
margin: 0 0 50px 0;
padding: 0;

/*DNP ShueiGoKinStd B*/
font-family: YakuHanJPs, "dnp-shuei-gothic-kin-std", sans-serif;
font-weight: 600;
font-style: normal;

font-size: 25px;
line-height: 1.6;
letter-spacing: 0.0em;
}


/*01*/
#index_base .each_block_index01{
padding: 0 0 130px 0;
margin: 0;

display: flex;
justify-content: center;
align-items: center;
}

#index_base .each_block_index01 p{


font-size: 14px;
margin: 0 0 0 0;
}




/*02*/
#index_base .each_block_index02{
padding: 0;
margin: 0;
}

#index_base .each_block_index02{
padding: 0px 0 40px 0;
}

#index_base .each_block_index02 h2{
/*Neue Haas Grotesk Display Pro 65 Medium*/
font-family: "neue-haas-grotesk-display", sans-serif;
font-weight: 600;
font-style: normal;

font-size: 20px;
line-height: 1.5;
letter-spacing: 0.0em;
margin: 0 0 40px 0;
}



#index_base .each_block_index02 p{



font-size: 14px;
margin: 0 0 50px 0;
}


#webgl_canvas_layout{
display: none;
}










#featured_post{
position: relative;
width: 100%;
margin: 0 0 100px 0;
padding: 0 0 0 0;
}


/*リスト*/
#featured_post ul#featured_list{
width: 100%;
margin: 0;
padding: 0;
/*全体 */
display: -webkit-flex;
display: flex;
flex-wrap: wrap;/*子要素を折り返し 複数行*/

border: none;
}

#featured_post ul#featured_list li{
position: relative;
margin:0;
padding:0;
flex-basis: 50%;
height: 70vh;

border-bottom:1px solid #333;
box-sizing: border-box;

display: flex;
justify-content: center;
align-items: center;

font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 500;
font-style: normal;

font-feature-settings: "kern";
letter-spacing: 0.02em;
}



#featured_post ul#featured_list li:nth-child(1){
border-top:1px solid #333;
}
#featured_post ul#featured_list li:nth-child(2){
border-top:1px solid #333;
}

#featured_post ul#featured_list li:nth-child(2n+1){
border-right:1px solid #333;
}

#featured_post ul#featured_list li .featured_list_layout{
position: relative;
width: 100%;
}


#featured_post ul#featured_list li .featured_list_layout h2{
width: 100%;
text-align: center;
margin: 30px auto 0 auto;

font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 500;
font-style: normal;

font-size: 15px;
}




#featured_post ul#featured_list li .photo_area{
width: 60%;;
margin: 0 auto;
}

#featured_post ul#featured_list li .photo_area img{
width: 100%;
height: auto;
}


/*カテゴリー*/
#featured_post ul#featured_list li .category_area{
position: absolute;
left: 10px;
bottom: 10px;

width: calc( 100% - 20px );
width: -webkit-calc( 100% - 20px );
margin: 0;
padding: 0;

font-size: 13px;
line-height: 1.4;
letter-spacing: 0.01em;
text-align: center;
}




#featured_post ul#featured_list li .category_area .each_cat_link{
display: inline-block;
margin: 0 10px 0 0;
}




#featured_post ul#featured_list li .view_more{
position: absolute;
left: 0;
bottom: 40px;
width: 100%;
margin: 0;
padding: 15px 0 0 0;

text-align: center;

font-size: 14px;
letter-spacing: 0.01em;
}


#featured_post ul#featured_list li .seasonal_post_date{
position: absolute;
width: 100%;
text-align: center;
bottom: 30px;
left: 0;
font-size: 13px;
letter-spacing: 0.0em;
}







}/*PC 終了括弧*/