@charset "utf-8";

/* bodyload */
body{
animation: fadeIn 2.0s ease 0s 1 normal;
-webkit-animation: fadeIn 2.0s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
	25% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
	25% {opacity: 0}
    100% {opacity: 1}
}

/* header */
@keyframes imzoom {
0% {transform:scale(1);}
30% {transform:scale(1.1);}
100% {transform:scale(1);}
}

/* common */
a{
text-decoration: none;
}

/* link-liner */
.sec_information a dd{
padding-bottom: 1px;
text-decoration: none;
background-image: linear-gradient( 90deg, #7379D8, #E0A9FC );
background-size: 0 1px;
background-position: left bottom;
background-repeat: no-repeat;
transition: all .3s;
}

.sec_information a:hover dd{
 background-size: 100% 1px;
}

/* contents-parts */
h1{
display: none;
}
h2{
font-family: "中ゴシックBBB" ,"Gothic Medium BBB","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体";
color: #9FAD86;
text-align: center;
font-size: 20rem;
font-size: 20px;
letter-spacing: 2px;
margin-bottom: 40px;
}
h2::before{
content: "";
display: inline-block;
margin-right: 10px;
background-size: contain;
position: relative;
}
main section{
margin: 10vw auto;
padding: 10vw 0;
}

#sec_banner p.subscript,
#sec_movie h2 + p.subscript{
text-align: center;
font-size: 12rem;
font-size: 12px;
margin-bottom: 20px;
}

/* sec_main-visual */
#sec_main-visual{
margin-top: 0;
margin-bottom: 0;
padding-top: 15vw;
padding-bottom: calc(140px + 0vw);
position: relative;
}
#sec_main-visual .visual-holder{
clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);  
height: 140vw;
overflow: hidden;
position: relative;
}
#sec_main-visual .visual-holder .main-v,
#sec_main-visual .visual-holder img{
height: inherit;
}
#sec_main-visual .visual-holder .main-c{
position: absolute;
z-index: 10;
pointer-events: none;
top: 55vw/*50vw*/;
bottom: auto;
left: 50%;
width: 70vw/*50vw*/;
transform: translate(-50%, -50%);
animation: fadeIn 4.5s ease 0s 1 normal;
-webkit-animation: fadeIn 4.5s ease 0s 1 normal;
}
#sec_main-visual .visual-holder .main-c img{
width: 100%;
}
#sec_main-visual .visual-holder .main-v{
right: -75vw;
position: absolute;
}
#sec_main-visual .visual-holder .mv_scroll{
position: absolute;
/*right: 20px;
bottom: 38px;*/
font-family: "Red Hat Display",sans-serif;
color: #fff;
line-height: 1;
z-index: 1;
display: none;

/*pc*/
left: 50%;
right: auto;
top: 40vw;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#sec_main-visual .visual-holder .mv_scroll span{
display: block;

/*pc*/
font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif';
font-weight: bold;
}
#sec_main-visual .visual-holder .mv_scroll div{
position: relative;
width: 2px;
/*height: 138px;*/
background-color: #7e909e;
overflow: hidden;

/*pc*/
height: 50px;
margin: 14px auto 0;
}
@-webkit-keyframes drop {
  0% {
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%)
  }
  to {
    -webkit-transform:translateY(100%);
    transform:translateY(100%)
  }
}
@keyframes drop {
  0% {
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%)
  }
  to {
    -webkit-transform:translateY(100%);
    transform:translateY(100%)
  }
}
#sec_main-visual .visual-holder .mv_scroll div::before{
box-sizing: border-box;
border-style: solid;
border-width: 0;

/*pc*/
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #fff/*#003b85*/;
-webkit-animation: drop 1.4s ease-in-out infinite;
animation: drop 1.4s ease-in-out infinite;
content: "";
}
#sec_main-visual .main-message{
/*width: 75%;*/
position: absolute;
top:115vw;
right:50%;
transform: translateX(50%);
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
margin-top: 40px;
padding: 15px 30px;
border-radius: 15px;
background: #fff;
}
#sec_main-visual .main-message p{
font-family:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif' /*roboto,游ゴシック Medium,Yu Gothic Medium,游ゴシック体,YuGothic,メイリオ,Meiryo,sans-serif*/;
font-size: 14rem;
font-size: 14px;
/*font-weight: bold;*/
letter-spacing: .2em;
line-height: 1.6;
text-align: center;
white-space: nowrap;
}
#sec_main-visual .main-message .main-copy{
font-family:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif'/*"Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif */;
color: #78BD36;
font-size: 22rem;
font-size: 22px;
font-weight: bold;
line-height: 1.3;
}


/* sec_banner */
#sec_banner{
margin-top: 0;
padding-top: 0;
}
#sec_banner h2{
display: none;
}
#sec_banner .slider li{
width: 80%;
display: block;
margin: 0 auto;
}
#sec_banner .slider li img{
width: 100%;
}
.slide-image{
border-radius: 4vw;
}
#sec_banner .swiper-pagination{
position: inherit;
margin-top: 20px;
}
.xo-slider{
margin-bottom: 15vw;
}
.xo-slider-template-default .swiper-pagination-bullet{
width: 14px;
height: 14px;
opacity: inherit;
}
.swiper-pagination-bullet{
background:#9FAD86FF;
}
.swiper-pagination-bullet-active{
background:#408BD1FF;
}
.sub-banner{
text-align: center;
margin-bottom: 10vw;
}
.sub-banner a{
font-size: 12rem;
font-size: 12px;
line-height:1.8em;
display: inline-block;
overflow: hidden;
width: 44%;
padding: 8px 10px /*20px*/;
margin-bottom: 5vw;
transition: color .4s;
text-align: center;
text-decoration: none;
color: #000;
border-radius: 999px;
background-color: #FFFF00;
position: relative;
z-index: 1;}
.sub-banner a:nth-of-type(2n-1){
margin-right: 2%;
}
.sub-banner a:nth-last-of-type(-n+2){
margin-bottom: inherit;
}
.sub-banner a span{
font-size: 15rem;
font-size: 15px;
display: block;
font-weight: bold;
}
.sub-banner a:hover{
color: #9B4AF0;
}
.sub-banner a:hover li::before{
width: 120%;
}
.sub-banner a li::before{
position: absolute;
z-index: -1;
top: -1%;
left: -1%;
width: 0;
height: 102%;
content: "";
transition: width .4s;
border-radius: 999px;
background: #4AF0DD;
}

/* cat-nav */
#sec_cat-nav{
background-color:  /*#F2F2F2 #91E297*/ #f6f6f6;
}
#sec_cat-nav h2::before{
width: 25px;
height: 25px;
background-image: url(/wxp/shizennouhou/images/front/ic_reaf.webp);
top: 5px;
}
#sec_cat-nav ul a:nth-of-type(1) li{
background:url(/wxp/shizennouhou/images/front/cont001.jpg) center center / auto 80.4vw no-repeat;	
}
#sec_cat-nav ul a:nth-of-type(2) li{
background:url(/wxp/shizennouhou/images/front/cont002.jpg) center center / auto 80.4vw no-repeat;
}
#sec_cat-nav ul a:nth-of-type(3) li{
background:url(/wxp/shizennouhou/images/front/cont003.webp) center calc(50% - 10.5vw) / 70% auto no-repeat #fffbde;
}
#sec_cat-nav ul li div{
background: #fff;
}

/* sec_information */
.sec_information h2::before{
width: 25px;
height: 25px;
background-image: url(/wxp/shizennouhou/images/front/ic_news.webp);
top: 5px;
}
.sec_information dl{
padding: 0 3%;
margin-bottom: 40px;
}
.sec_information dl a{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 25px;
text-decoration: none;
}
.sec_information dt{
width: 130px;
font-family: "Roboto";
font-size: 12rem;
font-size: 12px;
}
.sec_information a dt {
color: #808080;	
}
.sec_information a:hover dt{
color: inherit
}
.sec_information dd{
width:calc(100% - 130px);
margin-left: 0;
font-weight: bold;
}
.sec_information .bt-round{
display: block;
margin: 0 auto;
}

/* sec_movie */
#sec_movie{
background-color: /*#F2F2F2 #91E297*/ #f6f6f6;
}
#sec_movie h2 + p.subscript{
margin-bottom: 40px;
}
#sec_movie h2::before{
width: 25px;
height: 25px;
background-image: url(/wxp/shizennouhou/images/front/ic_tv.webp);
top: 5px;
}
#sec_movie h2{
margin-bottom: 10px;
}
#sec_movie .bt-round{
display: block;
margin: 40px auto 0;
}

/* sec_insta */
#sec_insta h2::before{
width: 25px;
height: 25px;
background-image: url(/wxp/shizennouhou/images/front/ic_insta.webp);
top: 5px;
}
#sec_insta .sb_instagram_header{
display: none;
}
/* instafeed */

@media (max-width: 470px) {
.sub-banner{

}
.sub-banner a{
font-size:10rem;
font-size: 10px;
}
.sub-banner a span {
font-size: 12rem;
font-size: 12px;
}
}

@media (max-width: 768px) {
body{
font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif';
font-size:14rem;
font-size:14px;
}
h1, h2, h3, h4, h5, h6, p{
	line-height:1.5em;
}
}

@media (min-width: 769px) {

/* contents-parts */
h2{
margin-bottom: 60px;
}
main {
width: inherit;
}
main section{
margin: 80px auto;
padding: 80px 0;
}
#sec_banner p.subscript,
#sec_movie h2 + p.subscript{
font-size: 14rem;
font-size: 14px;
}

/* main-visual */
#sec_main-visual{
min-width: 1080px;
padding-top: 65px;
margin-bottom: 40px;
padding-bottom: calc(100px + 0vw);
}
#sec_main-visual .visual-holder{
clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);  
height: 60vw;
overflow: hidden;
}
#sec_main-visual .visual-holder .main-v,
#sec_main-visual .visual-holder img{
height: auto;
width: 120%;
}
#sec_main-visual .visual-holder .main-v{
position: inherit;
right: inherit;
}
#sec_main-visual .visual-holder .main-c{
top: 29vw;
width: 25vw;
}
#sec_main-visual .visual-holder .overlay{
width: 100%;
height: 72vw;
position: absolute;
top: 0;
left: 0;
background-image:  url(/wxp/shizennouhou/images/front/mv_overlay.webp);
background-color: rgba(0, 0, 0, .3);
background-size: 2px 2px;
z-index: 0;
}
#sec_main-visual .visual-holder .mv_scroll{
display: block;
}
#sec_main-visual .main-message{
width: inherit;
top:52vw;
right:15%;
transform: inherit;
-webkit-transform:  inherit;
-ms-transform:  inherit;
border-radius: 20px;
padding: 25px;
}
#sec_main-visual .main-message p{
font-size: 16rem;
font-size: 16px;
line-height: 1.6;
white-space:inherit;
text-align: inherit;
}
#sec_main-visual .main-message .main-copy{
font-family:"Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 28rem;
font-size: 28px;
line-height: 1.3;
margin-bottom: 20px;
}

/* sec_banner */
#sec_banner{
width: 1080px;
margin: 0 auto;
}
#sec_banner .swiper-slide img{
width: 540px;
}
.slide-image{
border-radius: 10px;
}
.xo-slider{
margin-bottom: 60px;
}
.sub-banner{
margin-bottom: 60px;
}
.sub-banner a{
font-size: 13rem;
font-size: 13px;
line-height: 1.3;
width: 23%;
margin-bottom: inherit;
margin-right: 2%;
}
.sub-banner a:last-of-type{
margin-right: inherit;
}
.sub-banner a span{
font-size: 17rem;
font-size: 17px;
font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif';
}

/* sec_cat-nav */
.front-page #sec_cat-nav ul a:nth-of-type(1) li{
background-size: 450px auto;
background-position: -117px -39px;
}
.front-page #sec_cat-nav ul a:nth-of-type(2) li{
background-size: 374px auto;
background-position: center -10px;
}
.front-page #sec_cat-nav ul a:nth-of-type(3) li{
background-image: url(/wxp/shizennouhou/images/front/cont003_pc.webp);
background-size: 310px auto;
background-position: center 20px;
}

/* sec_information */
.sec_information{
width: 800px;
padding-right: 15px;
padding-left: 15px;
}
.sec_information dl{
margin-bottom: 60px;
}
.sec_information dd{
font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif';
}
/* sec_movie */
#sec_movie{
min-width: 1080px;
}
.n2-section-smartslider{
width: 1080px;
margin: 0 auto;
}

/* sec_insta */
#sec_insta h2{
/*
margin-bottom: 20px;
*/
}
#sec_insta .instafeed{
width: 1080px;
margin: 0 auto;
}	
/* instafeed */
@media (min-width: 769px) and (max-width: 1079px) {
#sec_main-visual .main-message{
right: calc(50% - 300px);
}
}