@charset "UTF-8";

/*** ここからトップの記述 ***/
#gaiyou_point{ position: absolute; margin-top: -50px;}
#gaiyou{ width: 100%;  height: calc(100vh - 50px); position: relative; min-height: 720px;}
.gaiyou_left{ position: absolute; width: 460px;  height: calc(100vh - 50px);; min-height: 720px;
  background-image: url("../img/index/gaiyou_bg.png"); background-size: cover; background-position: center center;}
.gaiyou_left section{ position: absolute; width: 360px; padding: 50px; height: 280px; top: calc(50% - 165px); color: #FFF;}
.gaiyou_left section h2{ position: relative; font-size: 40px; letter-spacing: 2.2px; font-weight: lighter;}
.gaiyou_left section h3{ position: relative; font-size: 24px; padding-top: 20px; line-height: 40px; font-weight: lighter;}
.gaiyou_left section p{ position: relative; font-size: 14px; padding-top: 20px; line-height: 30px; }

.gaiyou_right{ position: absolute; right: 0; width: calc(100% - 460px);  height: calc(100vh - 50px); min-height: 720px;
  background-image: url("../img/index/gaiyou_img.jpg"); background-size: cover; background-position: top center; background-attachment: fixed;}
.image{ position: absolute; display: block; right: 4px; bottom: 4px; text-align: right; font-size: 10px; color: #FFF;}


#banner_point{ position: absolute; margin-top: -50px;}
#banner{ position: relative; width: 100%; height: calc(100vh - 74px); min-height: 720px;
  background-image: url("../img/index/banner_bg.jpg"); background-size: cover; background-position: center center; background-attachment: fixed;
}

#banner section{ position: absolute; display: block; margin: auto; left: 0; right: 0; width: 740px; padding: 50px 0; height: 320px; top: calc(50% - 250px); color: #FFF; letter-spacing: 0;}
#banner section h2{ position: relative; font-size: 36px; padding-bottom: 4px; letter-spacing: 2.2px; font-weight: lighter; text-align: center; background-color: #063570; margin-bottom: 20px;}

#banner section p {letter-spacing: 14px; text-align: center;}

#banner section p img{ display: inline-block; width: auto; margin-top: 18px;}


/*** ここからレスポンシブの記述 ***/


@media screen and (max-width: 800px) {
#gaiyou{ min-height:100px;  height: calc(100vh - 50px);}
.gaiyou_left{ position: absolute; left: 0; width: 100%; height: calc(74vw + 30px); min-height: 100px; z-index: 50;}
.gaiyou_left section{ position: absolute; width: 100%; padding: 0px; height: 280px; top: 0; color: #FFF;}
.gaiyou_left section h2{ font-size: 8vw; text-align: center; padding-top: 30px; line-height: 16vw;}
.gaiyou_left section h3{ font-size: 5vw; text-align: center; line-height: 10vw;}
.gaiyou_left section p{ font-size: 3.5vw; text-align: center; line-height: 7vw;}
  
.gaiyou_right{ position: absolute; left: 0px; top: 0px; width: 100%; height: calc(100vh - 50px); min-height: 100px;}

#banner{ position: relative; width: 100%; height: auto; min-height: 100px; background-attachment:inherit;}
.gaiyou_right{background-attachment:inherit;}
  
#banner section{ position: relative; display: block; margin: auto; left: 0; right: 0; width: 96%; height: auto; padding: 2%; padding-bottom: 40px;}
#banner section h2{ position: relative; font-size: 6vw; margin: 36px 0 24px; letter-spacing: 2.2px; font-weight: lighter; text-align: center;}
  #banner section p{ text-align: center; letter-spacing: 5px;}
#banner section p img{ margin: 8px auto 0 !important;}
#banner section p img:nth-child(7){ margin-left: 0px !important;}


.image{ position: absolute; display: block; right: 4px; bottom: 4px; text-align: right; font-size: 10px; color: #FFF;}

#banner_point{ position: absolute; margin-top: -50px;}


}