/* 基本設定 */
 html {
   overflow: auto;
   scroll-behavior: smooth;
   font-size: 18px;
   font-family: sans-serif;
   font-weight: normal;
   color: #002869;
   line-height: 1.7;
   letter-spacing: 0.03em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

 body {
   overflow: hidden;
 }

 img {
   max-width: 100%;
   height: auto;
 }

 li {
   list-style: none;
 }

 p {
   margin: 0 auto;
   text-align: left;
 }

 a {
   text-decoration: none;
 }

 .wrapper {}

 .left {
   float: left;
 }

 .right {
   float: right;
 }

 .clearfix:after {
   clear: both;
   content: "";
   display: block;
   height: 0;
 }

 .br_pc {
   display: none;
 }

 .br_sp {
   display: block;
 }

 .pc {
   display: none !important;
 }

 .sp {
   display: inline-block !important;
 }

 @media only screen and (min-width: 950px) {

   /* ブラウザ幅に応じて画像を切り替える */
   .pc {
     display: inline-block !important;
   }

   .sp {
     display: none !important;
   }

   .pc_fl {
     float: left;
     width: 350px;
   }

   .pc_fr {
     float: right;
     width: 350px;
   }

   .br_pc {
     display: block;
   }

   .br_sp {
     display: none;
   }
 }

 /* 共通ヘッダー・フッター */
 header {
   height: 50px;
   background-color: #fff:
 }

 header .logo_area {
   width: 293px;
   margin: 10px auto;
 }

 footer {
   background-color: #00003F;
   padding: 20px;
   text-align: center;
 }

 footer small {
   font-size: 14px;
   color: #fff;
 }

 main {
   text-align: center;
   min-height: 92vh;
   background-color: #F8F8F8;
   border: 1vmin solid #E7290F;
   animation: borderIn 0.5s ease 0s 1 normal;
   z-index: 0;
 }

 @keyframes borderIn {
   0% {
     border-width: 0 0 0 0;
   }

   50% {
     border-width: 0 0 0 0;
   }

   100% {
     border-width: 1vmin 1vmin 1vmin 1vmin;
   }
 }

 @-webkit-keyframes borderIn {
   0% {
     border-width: 0 0 0 0;
   }

   50% {
     border-width: 0 0 0 0;
   }

   100% {
     border-width: 1vmin 1vmin 1vmin 1vmin;
   }
 }

 #kv {
   padding: 10vh 0;
 }

 #kv h1 {
   width: 70%;
   max-width: 700px;
   margin: 0 auto;
 }

 @media only screen and (min-width: 950px) {

   /* main {
     border: 10px solid #E7290F;
   } */
   #kv {
     padding: 3vw 0;
   }

   #kv h1 {
     width: 30%;
     position: fixed;
     top: calc(50vh - 220px);
     left: 10vw;
   }
 }

 #banner_list h2 {
   background-color: #E7290F;
   width: 100%;
   margin: 0 auto 30px;
   padding: 30px;
   position: relative;
   line-height: 1;
   z-index: 5;
 }

 #banner_list h2::after {
   content: "";
   display: block;
   width: 30px;
   height: 30px;
   background-color: #E7290F;
   margin: 0 auto;
   position: absolute;
   bottom: -5px;
   left: calc(50% - 15px);
   transform: rotate(45deg);
 }

 #banner_list h2 img {
   width: 80%;
 }

 #banner_list a {
   display: block;
   width: 90%;
   margin: 0 auto;
   transition: 0.5s;
   padding-bottom: 4vw;
   position: relative;
   top:0;
   cursor: pointer;
 }

 #banner_list a:hover {
   top:-10px;
   transition: 0.5s;
   opacity: 0.9;
   cursor: pointer;
 }

 #banner_list a p {
   color: #002869;
   width: 100%;
   font-size: 14px;
   text-align: center;
   padding: 2px 0;
 }

 @media only screen and (min-width: 950px) {
   #banner_list {
     width: 50%;
     margin: 0 auto;
     position: relative;
     left: 20%;
   }

   #banner_list a p {
     font-size: 18px;
     font-weight: bold;
   }

   #banner_list h2 {
     background-color: #E7290F;
     width: 90%;
     max-width: 840px;
     margin: 0 auto 8vh;
     padding: 30px;
     border-radius: 5px;
   }

   #banner_list h2 img {
     max-width: 300px;
   }

   #banner_list h2::after {
     bottom: -15px;
   }
 }

 #questionnaire_area {
   background-color: #FFF;
   height: auto;
   padding: 20px 0;
   text-align: center;
   margin-bottom: 0;
 }

 #questionnaire_area .questionnaire_btn {
   display: block;
   width: 90%;
   max-width: 400px;
   background-color: #FF5900;
   border-radius: 5px;
   margin: 0 auto;
   padding: 10px;
   line-height: 1;
   -webkit-transition: 0.2s;
   -o-transition: 0.2s;
   transition: 0.2s;
 }

 #questionnaire_area .questionnaire_btn img {
   max-width: 280px;
 }

 #questionnaire_area .questionnaire_btn:hover {
   background-color: #FF3D00;
   border-radius: 0px;
   -webkit-transition: 0.2s;
   -o-transition: 0.2s;
   transition: 0.2s;
 }

 #questionnaire_area .sns_area {
   width: 90%;
   max-width: 320px;
   margin: 20px auto 0;
 }

 #questionnaire_area .sns_area div {
   display: inline-block;
   font-weight: bold;
   line-height: 1.4em;
   margin-right: 5px;
   position: relative;
   top: -6px;
 }

 #questionnaire_area .sns_area ul {
   display: inline-block;
 }

 #questionnaire_area .sns_area ul li {
   display: inline-block;
   width: 50px;
   height: 50px;
   text-align: center;
   border-radius: 5px;
   margin: 0px 3px 0 0;
 }

 #questionnaire_area .sns_area ul li:first-child {
   background-color: #0075FB;
 }

 #questionnaire_area .sns_area ul li:nth-child(2) {
   background-color: #00AAEC;
 }

 #questionnaire_area .sns_area ul li:nth-child(3) {
   background-color: #00B900;
 }

 #questionnaire_area .sns_area ul li a {
   display: block;
   width: 100%;
   height: 100%;
   transition: 0.1s;
 }

 #questionnaire_area .sns_area ul li a img {
   width: 60%;
   height: 60%;
   margin: 20% auto;
   transition: 0.1s;
 }

 #questionnaire_area .sns_area ul li a:hover img {
   width: 55%;
   height: 55%;
   margin: 23% auto;
   opacity: 0.5;
   transition: 0.3s;
 }

 #questionnaire_area .sns_area ul li:hover {
   border-radius: 0px;
 }

 @media only screen and (min-width: 950px) {
   #questionnaire_area .clearfix {
     width: 750px;
     margin: 0 auto;
   }

   #questionnaire_area a {
     float: left;
   }

   #questionnaire_area .sns_area {
     
     
   }
 }

 .fadeInDown {
   -webkit-animation-fill-mode: both;
   -ms-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-duration: 1s;
   -ms-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-name: fadeInDown;
   animation-name: fadeInDown;
   visibility: visible !important;
 }

 @-webkit-keyframes fadeInDown {
   0% {
     opacity: 0;
     -webkit-transform: translateY(-20px);
   }

   100% {
     opacity: 1;
     -webkit-transform: translateY(0);
   }
 }

 @keyframes fadeInDown {
   0% {
     opacity: 0;
     -webkit-transform: translateY(20px);
     -ms-transform: translateY(20px);
     transform: translateY(20px);
   }

   100% {
     opacity: 1;
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     transform: translateY(0);
   }