@charset "utf-8";

/*==================================================
PC_view 1200px以上
===================================*/
#main {
  background-image: url(../img/common/top_back.svg);
}

/*==================================================
ファーストビュー
===================================*/
.first_view {
  height: 50vw;
  overflow: hidden;
}

/*==================================================
スライダーのためのcss
===================================*/
.fv_slider {
  position:relative;
z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}
/*　背景画像設定　*/

.fv_slider-item01 {
  background:url(../img/pro-neo/pro_neo_list1.png);
}

.fv_slider-item02 {
  background:url(../img/pro-neo/pro_neo_list2.png);
}

.fv_slider-item03 {
  background:url(../img/img_03.jpg);
}

/*スマホ画面*/
.fv_slider-item011 {
  background:url(../img/pro-neo/pro_neo_list11.png);
}
.fv_slider-item012 {
  background:url(../img/pro-neo/pro_neo_list12.png);
}

.fv_slider-item {
  width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height:80vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position: center;/*背景画像の位置を中央に*/
  background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}


/*==================================================
storyエリア
===================================*/
.story_area {
  background: rgba(250, 250, 250, .6);
  background-image: url(../img/pro-neo/stream.png);
  background-size: 98%;
  background-repeat: no-repeat;
}

.story_area h3{
  padding-top: 2%;
  padding-bottom: 3%;
  background: rgba(255, 255, 255, .8);
  font-size: 3vw;
  line-height: 1.4
  ;
}

.story_area h4 {
  text-align: left;
  font-size: 3vw;
  font-family: ar-udjingxiheigbstd, sans-serif;
  font-style: normal;
  font-weight: 800;
}

.story,
.story_intro,
.story_hope {
  padding-top: 3vw;
  background: rgba(255, 255, 255, .8);
}

.story {
  padding-top: 6vw;
}
.story_hope {
  padding-bottom: 6vw;
}

.story_box {
  margin-top: 1vw;
  display: flex;
  font-size: 1.4vw;
}

.s_left_cont,
.s_right_cont {
  width: 50%;
  margin-top: 3vw;
  margin-left: 3%;
  margin-right: 3%;
}

.s_left_cont {
  margin-right: 1%;
}

.s_right_cont {
  margin-left: 1%;
}

.s_left_cont img,
.s_right_cont img {
  width: 98%;
}

.s_left_cont p,
.s_right_cont p {
  text-align: left;
  font-family: fot-udmarugo-large-pr6n, sans-serif;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 1vw;
}

.neo_data li {
  display: flex;
  border-bottom: 1px solid #585858;
  padding-top: 1.5vw;
}

.space1 {
  width: 3vw;
}

.neo_link{
  width: 100%;
  margin: 1vw auto;
  padding-top: .2vw;
  padding-bottom: .5vw;
  background-color: #19448e;
  color: #fff;
  font-weight: 800;
}
.neo_link:hover{
  background-color: #fff;
  border: .2vw solid #19448e;
  color: #000;
}
.neo_link a p{
  text-align: center;
  font-size: 1.6vw;
  line-height: 1.8;
  padding-bottom: .5vw;
}

.banner_area {
  margin-top: 2vw;
}

.banner_area img{
  width: 60%;
}
.banner_2nd{
  display: flex;
}

.banner_2nd img{
  width: 100%;
}
.banner_area img:hover{
  width: 65%;
}
.banner_2nd img:hover{
  width: 105%;
  max-width: 105%;
}


/*チラシエリア*/
.add_area{
  padding-top: 5vw;
  padding-bottom: 1vw;
}
.add_area h4{
  font-size: 2.5vw;
  line-height: 1.5;
}
.add_inner{
  width: 95%;
  margin: 3vw 2.5%;
  display: flex;
}

.add_inner img{
  width: 45%;
  margin-right: 2%;
  border:.15vw solid #95d0bc;
}



/*==================================================
スマホ view 480px以下
===================================*/
@media screen and (max-width: 480px) {

/*==================================================
ファーストビュー
===================================*/
.first_view {
  position: relative;
  height: 30%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
}

/*==================================================
スライダーのためのcss
===================================*/
.fv_slider {
  position:relative;
z-index: 1;
/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}
/*　背景画像設定　*/

/*スマホ画面*/
.fv_slider-item011 {
  background:url(../img/pro-neo/pro_neo_list11.png);
}
.fv_slider-item012 {
  background:url(../img/pro-neo/pro_neo_list12.png);
}

.fv_slider-item {
  width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height:40vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;/*背景画像をリピートしない*/
  background-position: center;/*背景画像の位置を中央に*/
  background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}


/*ストーリーエリア*/
.story_area {
  background-size: 95%;
  background-repeat: repeat-y;
}
.story_area h3{
  padding-top: 10%;
  padding-bottom: 1%;
  font-size: 6vw;
}
.story_area h4 {
  text-align: center;
  font-size: 7vw;
  font-weight: 800;
}

.story,
.story_intro,
.story_hope {
  padding-top: 20vw;
}

.story_box {
  flex-direction: column-reverse;
  font-size: 4vw;
}
.story_intro .story_box{
  flex-direction: column;
}
.s_left_cont,
.s_right_cont {
  width: 90%;
  margin-top: 3vw;
  margin-left: 5%;
  margin-right: 5%;
}

.neo_data li {
  display: flex;
  border-bottom: 1px solid #585858;
  padding-top: 4vw;
}

.neo_link{
  width: 100%;
  margin: 1vw auto;
  padding-top: 4vw;
  padding-bottom: 4vw;
}

.neo_link a p{
  text-align: center;
  font-size: 5vw;
  line-height: 1.8;
  padding-bottom: .5vw;
}

/*バナーエリア*/
.banner_area {
  margin-top: 2vw;
}

.banner_area img{
  width: 90%;
  margin-bottom: 3vw;
}
.banner_2nd{
  flex-direction: column;
}

.banner_2nd img{
  width: 100%;
  margin-left: -.5vw;
  margin-bottom: 3vw;
}
.banner_area img:hover{
  width: 65%;
}
.banner_2nd img:hover{
  width: 105%;
  max-width: 105%;
}


/*チラシエリア*/
.add_area{
  padding-top: 8vw;
  padding-bottom: 1vw;
}
.add_area h4{
  font-size: 6.5vw;
  line-height: 1.5;
  margin-top: 5vw;
}
.add_inner{
  width: 95%;
  margin: 3vw 2.5%;
  flex-direction: column;
}

.add_inner img{
  width: 90%;
  margin-right: 2%;
  border:.15vw solid #95d0bc;
}

}