/* 基本設定 */
 html {
   overflow: auto;
   scroll-behavior: smooth;
 }

 body {
   overflow: hidden;
   font-size: 16px;
   letter-spacing: 0.03em;
   font-family: sans-serif;
   line-height: 1.8em;
   color: #4B4B4B;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   animation: fadeIn 0.5s ease 0s 1 normal;
 }

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

 li {
   list-style: none;
 }

 a {
   text-decoration: none;
 }

 p {
   text-align: left;
 }

 .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_fl {
     float: left;
     width: 45%;
   }

   .pc_fr {
     float: right;
     width: 45%;
   }

   .br_pc {
     display: block;
   }

   .br_sp {
     display: none;
   }

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

   .sp {
     display: none !important;
   }
 }

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

 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-image: url(../img/bg_kv_texture_light.png), url(../img/bg_kv_pattern.png);
   background-position: center;
   background-repeat: repeat;
   background-size: 300px;
 }

 main.top {
   background-color: #FAEF6F;
   background-image: url(../img/bg_kv_texture_light.png);
 }

 main.type_a, main.type_a #improvement .box_white h4 {
   background-color: #FCC2B8;
 }

 main.type_b, main.type_b #improvement .box_white h4 {
   background-color: #F9C759;
 }

 main.type_c, main.type_c #improvement .box_white h4 {
   background-color: #D6E884;
 }

 main.type_d, main.type_d #improvement .box_white h4 {
   background-color: #A3F5BC;
 }

 main.type_e, main.type_e #improvement .box_white h4 {
   background-color: #A3E7FF;
 }

 main.type_f, main.type_f #improvement .box_white h4 {
   background-color: #DED8FF;
 }

 #kv_top {
   background-image: url(../img/kv_top_pattern.svg);
   background-repeat: repeat;
   background-size: 20px;
 }

 #kv_top h1 {
   width: 90%;
   max-width: 800px;
   margin: 0 auto 15px;
   padding-top: 30px;
 }

 @media only screen and (min-width: 950px) {
   #kv_top h1 {
     padding-top: 40px;
   }
 }

 #select h2 {
   width: 90%;
   max-width: 700px;
   margin: 30px auto 15px;
 }

 #select ul {
   width: 90%;
   max-width: 1000px;
   margin: 0 auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around
 }

 #select li {
   width: 45%;
   margin-bottom: 7vmin;
 }

 #select li a {
   display: block;
   width: 100%;
   height: 100%;
   transition: 0.5s;
 }

 #select li div.btn_area {
   position: relative;
   width: 85%;
   color: #fff;
   font-size: 4vw;
   font-weight: bold;
   padding: 2vw;
   line-height: 1em;
   background-color: #FF6527;
   border-radius: 5px;
   margin: -4vw auto 0;
 }

 #select li div.btn_area::after {
   display: inline-block;
   content: "";
   width: 2vw;
   height: 2vw;
   border-top: 0.3vw #fff solid;
   border-right: 0.3vw #fff solid;
   transform: rotate(45deg);
   margin: 0 0 0.5vw 1vw;
 }

 #select li a:hover {
   opacity: 0.5;
   transition: 0.5s;
 }

 @media only screen and (min-width: 950px) {
   #select li {
     width: 32%;
   }

   #select li a {}

   #select li div.btn_area {
     width: 70%;
     font-size: 16px;
     padding: 15px;
     border-radius: 5px;
     margin: -30px auto 0;
   }

   #select li div.btn_area::after {
     width: 10px;
     height: 10px;
     border-top: 2px #fff solid;
     border-right: 2px #fff solid;
     transform: rotate(45deg);
     margin: 0 0 2px 4px;
   }
 }

 main.type_a {
   background-color: #FCC2B8;
 }

 #kv_type {
   position: relative;
   padding-top: 50px;
 }

 #kv_type a {
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 200px;
 }

 #kv_type a:hover {
   opacity: 0.7;
   transition: 0.5s;
 }

 #kv_type h1 {
   width: 90%;
   max-width: 600px;
   margin: -15px auto 15px;
 }

 #kv_type .check_list {
   width: 90%;
   max-width: 600px;
   margin: 0 auto 30px;
 }

 @media only screen and (min-width: 950px) {
   #kv_type a {
     width: 250px;
   }

   #kv_type .inr {
     width: 90%;
     max-width: 1000px;
     margin: 0 auto;
     padding: 80px 0 30px;
   }

   #kv_type h2 {
     width: 50%;
     margin: 0 auto;
   }

   #kv_type h1 {
     width: 50%;
     margin: -95px auto -7px;
   }

   #kv_type .check_list {
     width: 45%;
     margin: 50px auto;
   }
 }

 #problem h2 {
   width: 100%;
   background-image: url(../img/problem_title_bg.png);
   background-repeat: no-repeat;
   background-size: cover;
   padding: 20px;
   color: #fff;
   margin: 0 auto 30px;
 }

 .box_white {
   width: 90%;
   max-width: 1000px;
   margin: 0 auto;
   background-color: #fff;
 }

 #problem .box_white img {
   width: 85%;
   max-width: 700px;
   margin: 0 auto;
 }

 #problem .box_white .inr img {
   width: 85%;
   max-width: 400px;
   margin: 0 auto;
 }

 #problem .box_white p {
   width: 85%;
   margin: 0 auto;
   padding: 20px 0 40px;
   color: #6A1900;
   font-weight: bold;
   text-align: left;
 }

 #problem .box_white p span {
   color: #FF4200;
 }

 @media only screen and (min-width: 950px) {
   #problem .inr {
     width: 90%;
     max-width: 1000px;
     margin: 0 auto;
     background-color: #fff;
     padding: 10px;
   }

   #problem h2 {
     width: 100%;
     background-color: #6A1900;
     background-image: url(../img/problem_bg_pattern.svg);
     background-repeat: repeat;
     background-size: 30px;
     font-size: 26px;
     color: #fff;
     margin: 0 auto 30px;
   }

   #problem h2 img{
     max-width: 470px;
   }


   .box_white {
     width: 90%;
     max-width: 1000px;
     margin: 0 auto;
     background-color: #fff;
   }

   #problem .box_white .inr {
     max-width: 700px;
   }

   #problem .box_white .inr img {
     width: 40%;
     margin: 0 auto;
   }

   #problem .box_white p {
     width: 90%;
     max-width: 700px;
     margin: 0 auto;
     padding: 20px 0 40px;
     font-size: 16px;
     line-height: 1.8em;
   }

   #problem .box_white .inr p {
     width: 45%;
     font-size: 20px;
     line-height: 1.8em;
   }
 }

 #improvement {
   margin: 30px 0;
 }

 #improvement .deco01 {
   width: 90%;
   max-width: 300px;
   margin: 0 auto 20px;
 }

 #improvement .white_box_top {
   width: 90%;
   max-width: 1000px;
   margin: 0 auto;
   background-color: #fff;
 }

 #improvement .white_box_top h3 {
   width: 100%;
   max-width: 500px;
   margin: 40vmin auto 0;
   position: relative;
   padding: 80px;
 }

 #improvement .white_box_top h3 img {
   display: block;
   position: absolute;
   top: -42vmin;
   left: 0;
 }

 #improvement p {
   width: 85%;
   max-width: 500px;
   margin: 0 auto;
   padding: 20px 0 30px;
   color: #6A1900;
   font-weight: bold;
   text-align: left;
 }

 #improvement .box_white {
   margin-bottom: 5px;
   padding-top: 15px;
 }

 #improvement .box_white h4 {
   width: 90%;
   color: #6A1900;
   font-size: 20px;
   margin: 0 auto;
   padding: 10px;
   position: relative;
 }

 #improvement .box_white h4::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, #6A1900 10px, transparent 10px), linear-gradient(135deg, #6A1900 10px, transparent 10px), linear-gradient(225deg, #6A1900 10px, transparent 10px), linear-gradient(315deg, #6A1900 10px, transparent 10px);
   background-position: bottom left, top left, top right, bottom right;
   background-size: 50% 50%;
   background-repeat: no-repeat;
 }

 #improvement .box_white img {
   width: 85%;
   max-width: 400px;
   margin: 0 auto 30px;
 }

 @media only screen and (min-width: 950px) {
   #improvement {
     margin: 30px 0;
   }

   #improvement .white_box_top {
     width: 90%;
     max-width: 1000px;
     margin: 0 auto;
     background-color: #fff;
     padding: 2%;
   }

   #improvement .white_box_top h3 {
     width: 100%;
     max-width: none;
     margin: 0 auto;
   }

   #improvement .white_box_top h3 img {
     width: 50%;
     padding: 30px 0 0;
     top: -140px;
   }

   #improvement .white_box_top p {
     width: 38%;
     max-width: none;
     margin: -30px auto;
     font-size: 24px;
     line-height: 1.8em;
     font-weight: bold;
     text-align: center;
     float: right;
     position: relative;
     top: -79px;
     left: -81px;
   }

   #improvement .inr {
     width: 90%;
     max-width: 1000px;
     margin: 0 auto;
     background-color: #fff;
     padding: 0 0.5% 0.5% 0.5%;
     display: flex;
   }

   #improvement .box_white {
     width: 47%;
     margin-bottom: 1.5%;
     border: 2px solid #6A1900;
   }

   #improvement .box_white h4 {
     color: #6A1900;
     font-size: 24px;
     margin: 0 auto;
     padding-top: 18px;
     line-height: 1.5em;
   }

   #improvement .box_white img {
     width: 80%;
     margin: 0 auto 30px;
   }
 }

 #ng {
   background-color: #6A1900;
   background-color: #6A1900;
   background-image: url(../img/problem_bg_pattern.svg);
   background-repeat: repeat;
   background-size: 30px;
   padding: 3% 0;
 }

 #ng .box_bevel {
   position: relative;
   width: 80%;
   max-width: 600px;
   margin: 30px auto;
   padding: 10%;
   background-color: #fff;
 }

 #ng .box_bevel::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, #6A1900 20px, transparent 20px), linear-gradient(135deg, #6A1900 20px, transparent 20px), linear-gradient(225deg, #6A1900 20px, transparent 20px), linear-gradient(315deg, #6A1900 20px, transparent 20px);
   background-position: bottom left, top left, top right, bottom right;
   background-size: 50% 50%;
   background-repeat: no-repeat;
 }

 #ng .box_bevel h3 {
   width: 100%;
   max-width: 240px;
   margin: -10px auto 6%;
 }

 #ng .box_bevel p {
   margin: 0 auto;
   color: #6A1900;
   font-weight: bold;
   text-align: left;
 }

 @media only screen and (min-width: 950px) {
   #ng {
     padding: 1% 0;
   }

   #ng .box_bevel {
     max-width: 1000px;
     padding: 30px;
     display: flex;
     justify-content: center;
   }

   #ng .box_bevel h3 {
     width: 30%;
     padding: 0;
     margin: -46px 0 0 2%;
     position: relative;
     top: 30px;
   }

   #ng .box_bevel p {
     width: 65%;
   }
 }

 #recommend {
   padding-bottom: 50px;
   background-color: #F6F1F6;
   background-image: url(../img/recommend_bg_sp.png);
   background-position: top 19% right 50%;
   background-size: 120vw;
 }

 #recommend .space {
   width: 100%;
   height: 50px;
   background-color: #fff;
 }

 #recommend h3 {
   width: 90%;
   max-width: 600px;
   margin: 50px auto 10px;
 }

 #recommend h3 img:nth-child(2) {
   width: 70%;
   padding: 20px 0;
 }

 #recommend p {
   width: 90%;
   margin: 5% auto;
   padding: 5% 0;
   font-weight: bold;
   text-align: center;
 }

 #recommend .deco01 {
   width: 10%;
   margin: 0 auto;
 }

 #recommend .box_white h4 {
   overflow: hidden;
   font-size: 20px;
   color: #E62D2C;
   width: 90%;
   max-width: 600px;
   margin: 10px auto 20px;
   padding-top: 30px;
 }

 #recommend .box_white .inr img {
   width: 85%;
   margin: 0 auto;
 }

 #recommend .box_white .inr p {
   width: 85%;
   margin: 5% auto;
   font-weight: bold;
   text-align: left;
 }

 #recommend .box_white .inr h4 {
   width: 100%;
   background: linear-gradient(-135deg, #E50012, #F08600);
   color: #fff;
   margin: 10px auto 20px;
   padding: 20px 0;
 }

 #recommend .box_white .inr h5 {
   max-width: 100px;
   margin: 10px 0 10px 7%;
   display: block;
   border: 2px solid #4B4B4B;
   padding: 5px;
   text-align: center;
   line-height: 1em;
   font-size: 12px;
   font-weight: bold;
 }

 #recommend .box_white .inr small {
   display: block;
   width: 85%;
   margin: 0 auto;
   padding-bottom: 30px;
   font-size: 12px;
   line-height: 1.5em;
   text-align: left;
 }

 @media only screen and (min-width: 950px) {
   #recommend {
     padding-bottom: 50px;
     background-color: #F6F1F6;
     background-image: url(../img/recommend_bg_pc.png);
     background-position: top 10px right 50%;
     background-size: 1283px;   }

   #recommend .space {
     width: 100%;
     height: 70px;
     background-color: #fff;
   }

   #recommend h3 {
     width: 90%;
     margin: 70px auto 30px;
     max-width: 750px;
   }

   #recommend h3 img {
     display: block;
     width: 40%
   }

   #recommend h3 img:nth-child(2) {
     width: 40%;
     padding: 0;
   }

   #recommend h3 img:first-child {
     display: block;
     width: 55%
   }

   #recommend p {
     width: 90%;
     max-width: 800px;
     margin: 20px auto;
     padding: 30px 0;
     font-size: 18px;
   }

   #recommend .deco01 {
     width: 30px;
     margin: 0 auto;
   }

   #recommend .box_main {
     padding: 30px;
     margin: 15px auto 15px;
   }

   #recommend .box_white .inr {
     margin: 0 auto 20px;
     padding: 0;
   }

   #recommend .box_white .inr img {
     width: 47%;
     margin: 0;
   }

   #recommend .box_white h4 {
     font-size: 26px;
     line-height: 1.6em;
     margin: 0 auto 30px;
     padding: 0;
   }

   #recommend .box_white .inr p {
     width: 48%;
     margin: 0;
     padding: 0;
     line-height: 1.8em;
   }

   #recommend .box_white .box_gray {
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #fdfbf8;
     margin: 0;
     padding: 0;
   }

   #recommend .box_white .box_gray h4 {
     width: 30%;
   }

   #recommend .box_white .box_gray img {
     width: 20%;
     flex-grow: 3;
     font-size: 24px;
     line-height: 1.6em;
     padding: 0;
   }

   #recommend .box_white .pc_fr {
     width: 35%;
   }

   #recommend .box_white .inr h4 {
     margin: 0;
     height: 100%;
     padding: 9% 0;
     font-size: 30px;
     line-height: 1.6em;
   }

   #recommend .box_white .inr h5 {
     text-align: center;
     font-size: 14px;
     font-weight: bold;
   }

   #recommend .box_white .inr small {
     font-size: 14px;
     flex-grow: 3;
   }
 }

 #adopt {
   padding: 60px 0;
   background-color: #F0F8DC;
   background-image: url(../img/adopt_bg01.png);
   background-size: 150%;
   background-repeat: repeat;
 }

 #adopt .box_white {
   width: 85%;
   max-width: 800px;
   margin: 0 auto;
   background-color: #fff;
 }

 #adopt .box_white .inr {
   width: 85%;
   margin: 0 auto;
   padding: 25px 0;
 }

 #adopt .box_white .inr h3 {
   max-width: 400px;
   margin: 0 auto 10px;
 }

 #adopt .box_white .inr p {
   margin-top: 7px;
 }

 @media only screen and (min-width: 950px) {
   #adopt {
     background-size: 30%;
   }

   #adopt .box_white {
     width: 85%;
     max-width: 800px;
     margin: 0 auto;
     background-color: #fff;
   }

   #adopt .box_white .inr {
     width: 90%;
     margin: 10px auto;
     padding: 35px 0;
   }

   #adopt .box_white .inr h3 {
     display: block;
     width: 45%;
     margin: 0 auto 10px;
   }

   #adopt .box_white .inr p {
     width: 50%;
     margin-top: 7px;
   }

   #adopt .box_white .inr img {
     width: 45%;
   }

   #adopt .box_white .inr h3>img {
     width: 80%;
   }
 }

 #herbal {
   padding: 30px 0;
   background-color: #F4F4F4;
   background-image: url(../img/herbal_bg_top.png);
   background-position: top center;
   background-size: 170%;
 }

 #herbal h3 {
   width: 90%;
   max-width: 700px;
   margin: 0 auto 120px;
   filter: drop-shadow(1px 1px 5px #555);
 }

 #herbal label {
   width: 70%;
   max-width: 250px;
   margin: 0 auto 40px;
   padding: 12px;
   background: linear-gradient(-135deg, #F08600, #F08600);
   line-height: 1em;
   font-size: 14px;
   font-weight: bold;
   border-radius: 100px;
   color: #fff;
   transition: 0.5s;
   cursor: pointer;
 }

 #herbal label:hover {
   background: linear-gradient(-135deg, #E50012, #F08600);
   transition: 0.5s;
   opacity: 0.8;
 }

 #herbal label::after {
   content: "";
   display: inline-block;
   width: 10px;
   height: 10px;
   border-left: 2px solid #fff;
   border-bottom: 2px solid #fff;
   transform: rotate(-45deg);
   margin: 0 0 3px 5px;
 }

 #herbal .acc_show {
   height: 0;
   padding: 0;
   overflow: hidden;
   opacity: 0;
   transition: 0.8s;
 }

 #herbal input.acc {
   display: none;
 }

 #herbal .acc:checked+.acc_show {
   height: auto;
   opacity: 1;
 }

 #herbal .box_white {
   padding-bottom: 10px;
   margin-bottom: 20px;
 }

 #herbal .box_white h4 {
   font-size: 19px;
   padding: 15px 0 20px;
   text-align: center;
   color: #6A1900;
 }

 #herbal .box_white h4 span {
   display: inline-block;
   border-bottom: 3px solid;
   border-image: linear-gradient(-135deg, #E50012, #F08600);
   border-image-slice: 1;
   border-top: 0px;
   border-left: 0px;
   border-right: 0px;
   padding: 8px 0 0px;
 }

 #herbal .box_gray {
   width: 90%;
   margin: 10px auto 10px;
   background-color: #F4F4F4;
   overflow: hidden;
 }

 #herbal .box_gray .bg_img {
   width: 100%;
   height: 30vmin;
   background-image: url(../img/herbal_bg_00.png);
   background-size: cover;
   text-indent: -999px;
   margin-bottom: 15px;
 }

 #herbal .box_gray .bg_img {
   width: 100%;
   height: 30vmin;
   background-image: url(../img/herbal_bg_00.png);
   background-size: cover;
   text-indent: -999px;
   margin-bottom: 15px;
 }

 #herbal .box_gray .herbal01 {
   background-image: url(../img/herbal_bg_01.png);
 }

 #herbal .box_gray .herbal02 {
   background-image: url(../img/herbal_bg_02.png);
 }

 #herbal .box_gray .herbal03 {
   background-image: url(../img/herbal_bg_03.png);
 }

 #herbal .box_gray .herbal04 {
   background-image: url(../img/herbal_bg_04.png);
 }

 #herbal .box_gray .herbal05 {
   background-image: url(../img/herbal_bg_05.png);
 }

 #herbal .box_gray .herbal06 {
   background-image: url(../img/herbal_bg_06.png);
 }

 #herbal .box_gray .herbal07 {
   background-image: url(../img/herbal_bg_07.png);
 }

 #herbal .box_gray .herbal08 {
   background-image: url(../img/herbal_bg_08.png);
 }

 #herbal .box_gray .herbal09 {
   background-image: url(../img/herbal_bg_09.png);
 }

 #herbal .box_gray .herbal10 {
   background-image: url(../img/herbal_bg_10.png);
 }

 #herbal .box_gray .herbal11 {
   background-image: url(../img/herbal_bg_11.png);
 }

 #herbal .box_gray .herbal12 {
   background-image: url(../img/herbal_bg_12.png);
 }

 #herbal .box_gray .herbal13 {
   background-image: url(../img/herbal_bg_13.png);
 }

 #herbal .box_gray .herbal14 {
   background-image: url(../img/herbal_bg_14.png);
 }

 #herbal .box_gray h5 {
   font-size: 24px;
   margin: 10px auto 10px;
   line-height: 1em;
 }

 #herbal .box_gray h5 span {
   font-size: 14px;
 }

 #herbal .box_gray p {
   font-size: 14px;
   line-height: 1.6em;
   width: 85%;
   margin: 0 auto;
   padding-bottom: 10px;
   margin-bottom: 10px;
 }

 @media only screen and (min-width: 950px) {
   #herbal {
     padding: 80px 80px 20px;
     background-size: 120vmin;
     background-position: top center;
   }

   #herbal h3 {
     width: 90%;
     max-width: 600px;
     margin: 0 auto 25vmin;
   }

   #herbal .acc_show {
     height: auto;
     opacity: 1;
   }

   #herbal .box_white {
     max-width: 1200px;
     padding: 20px 0 7px;
   }

   #herbal .box_flex {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     padding: 2%;
   }

   #herbal .box_white h4 {
     font-size: 26px;
     padding: 30px 0 20px;
     text-align: center;
     color: #6A1900;
   }

   #herbal .box_white h4 span {
     display: inline-block;
     border-bottom: 3px solid;
     border-image: linear-gradient(-135deg, #E50012, #F08600);
     border-image-slice: 1;
     padding: 15px 0 3px;
   }

   #herbal .box_gray {
     width: 32%;
     margin: 5px 5px 5px;
   }

   #herbal .box_gray .bg_img {
     height: 130px;
   }

   #herbal .box_gray h5 span {
     font-size: 14px;
   }
 }

 #buy {
   background-color: #F4F4F4;
   padding-bottom: 40px;
 }

 #buy a {
   display: block;
   width: 90%;
   max-width: 430px;
   margin: 0 auto;
   transition: 0.3s;
 }

 #buy.fixed a {
   display: block;
   position: fixed;
   bottom: 0;
   left: calc(50% - 213px);
 }

 #buy a:hover {
   margin: -5px auto 5px;
   opacity: 0.7;
   transition: 0.3s;
 }

 @media only screen and (max-width: 450px) {
   #buy.fixed a {
     left: 5%;
   }
 }

 #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;
 }

 @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);
   }