@charset "utf-8";

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ● トップページ専用CSS                                  */
/*    ・ページ固有の処理を記述                             */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/* --------------------------------------------------- */
/* メイン画像                                          */
/* --------------------------------------------------- */

/* MainImageArea
--------------------------------------------------- */
.MainImageArea{
  background: #fff;
}



/* MainImageBlock
--------------------------------------------------- */
.MainImageBlock{
  position: relative;
  z-index: 5;
  overflow: hidden;
  margin: 0 auto;
}



    /* 画像リスト */
    .MainImageBlock ul{
    }
        .MainImageBlock li{
          position: relative;
          margin: 0;
          overflow: hidden;
        }
        .MainImageBlock li img{
          display: inline;
        }


        .MainImageBlock li .Image{
        }
        .MainImageBlock li .Image::before{
          content: "";
          position: absolute;
          left: 0%;
          top:  0%;
          width: 100%;
          height: 100%;
          display: block;
          background-image: linear-gradient( to bottom, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.1) 90%);
        }
        .MainImageBlock li .Image img{
          max-width: none;
          position: relative;
        }

        .MainImageBlock li .Text{
          position: absolute;
          left:  0%;
          top:  35%;
          width:  100%;
          text-align: center;
          animation: slide_caption 1s linear;
        }

        .MainImageBlock li .Text img{
          width: 500px;
        }




            /* anim */
            @keyframes slide_caption {
                0% {opacity: 0;}
               40% {opacity: 0;}
              100% {opacity: 1;}
            }


            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より広いディスプレイ用 のスタイルを使用 */
                .MainImageBlock li .Image{
                  width: auto;
                  height: auto;
                  margin-bottom: -125px;
                }
                .MainImageBlock li .Image img{
                  animation: slide_img_vertical 3s linear;
                  width: 100%;
                }
                        /* anim */
                        @keyframes slide_img_vertical {
                            0% {top: -120px}
                          100% {top: 0px}
                        }







/* --------------------------------------------------- */
/* イントロ                                            */
/* --------------------------------------------------- */

/* IntroArea
--------------------------------------------------- */
.IntroArea{
  padding: 75px 0;
  background-image:  linear-gradient( to bottom, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,1) 90%);
  position: relative;
}
.IntroArea div.bg-img.bg-img-type1{
}




            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より広いディスプレイ用 のスタイルを使用 */
                .IntroArea div.bg-img.bg-img-type1{
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  z-index: -1;
                  left: 0;
                  top:  0;
                  display: block;
                  background-image: url(../../img/common/decoration/asuwa_river.jpg);
                  background-repeat: no-repeat;
                  background-position: 50% 100%;
                  filter: blur(3px);
                }

/* IntroBlock
--------------------------------------------------- */
.IntroBlock {
}
            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より広いディスプレイ用 のスタイルを使用 */
                .IntroBlock .BlockContents {
                  text-align: center;
                }
                .IntroBlock .BlockContents .Image{
                  margin: 0 auto;
                  width: 90%;
                }








/* --------------------------------------------------- */
/* お客様の声                                          */
/* --------------------------------------------------- */

/* ReviewArea
--------------------------------------------------- */
.ReviewArea{
  padding-bottom: 0px;
}


/* ReviewBlock
--------------------------------------------------- */
.ReviewBlock{
  margin: 10px;
}
    .ReviewBlock .BlockContents{
      border-radius: 1em;
      overflow: hidden;
    }





    /* - - 共通 - - */
    .ReviewBlock .Paragraph {
    }
        .ReviewBlock .Paragraph .ParagraphHeader{
          padding-top: 300px;
        }
            
        .ReviewBlock .Paragraph .ParagraphContents{
          padding: 15px;
          padding-bottom: 0.25em;
        }
            .ReviewBlock .Paragraph .ParagraphContents ol{
              list-style: none;
              margin: 0;
              padding: 0;
            }
            .ReviewBlock .Paragraph .ParagraphContents ol li{
              border-radius: 0.5em;
              padding: 0.75em 1em;
              margin: 0.5em 0;
              background: #fff;
              line-height: 1.5;
            }
            .ReviewBlock .Paragraph .ParagraphContents ol li,
            .ReviewBlock .Paragraph .ParagraphContents ol li *{
              vertical-align: middle;
              
            }
            .ReviewBlock .Paragraph .ParagraphContents ol li .Icon{
              margin-right: 0.5em;
            }
            .ReviewBlock .Paragraph .ParagraphContents ol li .Icon img{
              width: 2em;
            }


            /* + + + + + レスポンシブ + + + + +  */


                /* bp2より狭いディスプレイ用 のスタイルを使用 */
                .ReviewBlock .BlockHeader{
                }
                    .ReviewBlock .BlockContents .Paragraph{
                      margin: 0;
                      padding: 0px;
                      background-size: contain;
                      border-radius: 0;
                    }
                    .ReviewBlock .Paragraph .ParagraphHeader{
                      padding-top: 150px;
                    }
                    .ReviewBlock .Paragraph .ParagraphContents{
                      padding: 15px;
                      padding-bottom: 0.25em;
                    }
                    .ReviewBlock .Paragraph .ParagraphContents ol li{
                      padding-left: 3em;
                      position: relative;
                    }
                    .ReviewBlock .Paragraph .ParagraphContents ol li .Icon{
                      position: absolute;
                      left: 0.5em;
                    }


    /* - - 観光 - - */
    .ReviewBlock .Paragraph.Sightseeing {
      background-image: linear-gradient( to bottom, rgba(234,248,241,0) 275px, rgba(234,248,241,1) 375px),  url(../../img/common/photo/voice_sightseeing.jpg);
    }
            .ReviewBlock .Paragraph.Sightseeing .ParagraphHeader .Heading{
              background: rgba(129,171,117,0.85);
            }
            .ReviewBlock .Paragraph.Sightseeing .ParagraphHeader .Heading::before{
              border-top-color: rgba(129,171,117,0.85);
            }
            .ReviewBlock .Paragraph.Sightseeing .ParagraphContents{
              background-image: linear-gradient( to bottom, rgba(234,248,241,0) 0px, rgba(234,248,241,1) 50px)!important;
            }
            .ReviewBlock .Paragraph.Sightseeing .ParagraphContents ol li em{
              color: rgba(129,171,117);
            }


    /* - - 出張 - - */
    .ReviewBlock .Paragraph.BussinessTrip {
      background-image: linear-gradient( to bottom, rgba(234,241,248,0) 275px, rgba(234,241,248,1) 375px), url(../../img/common/photo/voice_business_trip.jpg);
    }
            .ReviewBlock .Paragraph.BussinessTrip .ParagraphHeader .Heading{
              background: rgba(100,182,206,0.85);
            }
            .ReviewBlock .Paragraph.BussinessTrip .ParagraphHeader .Heading::before{
              border-top-color: rgba(100,182,206,0.85);
            }
            .ReviewBlock .Paragraph.BussinessTrip .ParagraphContents{
              background-image: linear-gradient( to bottom, rgba(234,241,248,0) 0px, rgba(234,241,248,1) 50px)!important;
            }
            .ReviewBlock .Paragraph.BussinessTrip .ParagraphContents ol li em{
              color: rgba(100,182,206);
            }








/* --------------------------------------------------- */
/* 施設紹介                                            */
/* --------------------------------------------------- */

/* FacilityArea
--------------------------------------------------- */
.FacilityArea{
  background-color: #fff;
}
.FacilityArea + .FacilityArea{
  padding-top: 0px;
}



/* FacilityBlock
--------------------------------------------------- */
.FacilityBlock{
  
}
            /* + + + + + レスポンシブ + + + + +  */

                
                /* bp2より狭いディスプレイ用 のスタイルを使用 */
                    .DefaultBlock .BlockContents .TextItem .Image{
                      display: none;
                    }



/* --------------------------------------------------- */
/* 交通アクセス                                        */
/* --------------------------------------------------- */

/* AccessArea
--------------------------------------------------- */
.AccessArea{
  overflow: hidden;
}

            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より狭いディスプレイ用 のスタイルを使用 */
                .AccessArea{
                  background-position: 50% 50%;
                  background-image: url(../../img/common/decoration/sunset_sea.jpg);
                  background-size: cover;
                  padding: 3em 0 0;
                }



/* AccessBlock
--------------------------------------------------- */
.AccessBlock{
  position: relative;
}
    .AccessBlock .BlockHeader .Heading{
      position: relative;
      z-index: 10;
    }
    .AccessBlock .BlockContents{
      min-height: 525px;
    }
        .AccessBlock .BlockContents .ImageItem{
        }
        .AccessBlock .BlockContents .TextItem{
          position: relative;
          z-index: 10;
        }
        .AccessBlock .BlockContents .TextItem .DefaultText{
          font-size: 100%;
        }
        .AccessBlock .BlockContents .TextItem .DefaultText em{
          background: rgba(255, 238, 136, 0.8);
        }


            /* + + + + + レスポンシブ + + + + +  */

                /* bp2より狭いディスプレイ用 */
                .AccessBlock .BlockContents .ImageItem{
                  margin: -315px -250px -180px -370px;
                }
                .AccessBlock .BlockContents .TextItem{
                  margin: 25px;
                  margin-top: -100px;
                  padding: 30px;
                  background: rgba(245,245,235,0.95);
                  text-align: center;
                }
                .AccessBlock .BlockContents .TextItem .DefaultText:first-of-type{
                  text-align: center;
                  margin: 0;
                }
                .AccessBlock .BlockContents .TextItem .DefaultText{
                  text-align: left;
                }