/* 基本設定 */
 html {
   overflow: auto;
   scroll-behavior: smooth;
   font-size: 18px;
   line-height: 1.7;
   letter-spacing: 0.03;
   font-family: sans-serif;
   font-weight: normal;
   color: #7D4321;
   -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: #7D4321;
   background-image: url(../img/bg_kv_texture_light.png);
   background-repeat: repeat;
   background-position: right;
 }

 #kv {
   background-size: 100%;
   background-color: #ECE9E3;
   background-position: center center;
   margin: 0 auto;
   width: 100%;
   padding-top: 5vmax;
   position: relative;
 }

 #kv h1 {
   width: 90%;
   margin: 0 auto;
   position: relative;
   z-index: 2;
 }

 #kv>img {
   width: 100%;
   margin: -18vmax 0 -4vh;
   position: relative;
   z-index: 0;
 }

 #kv h2 {
   position: relative;
   top: -30px;
   z-index: 3;
   width: 80%;
   max-width: 500px;
   margin: 0 auto 15vmin;
 }

 @media only screen and (min-width: 950px) {
   #kv {
     padding-top: 5vh;
     overflow: hidden;
   }

   #kv h1 {
     max-width: 1200px;
     margin: 0 auto;
   }

   #kv h1+img {
     width: 100%;
     margin: -42vmax 0 0;
     position: relative;
     z-index: 0;
   }

   #kv .wrap {
     position: absolute;
     top: auto;
     bottom: -5vh;
     left: 0;
     width: 100%;
   }

   #kv h2 {
     width: 80%;
     margin: 0 auto 30px;
   }
 }

 #check {
   position: relative;
   background-color: #7D4321;
   z-index: 3;
   padding-bottom: 50px;
   :
 }

 #check div.box_border {
   width: 90%;
   max-width: 600px;
   margin: 0 auto -30px;
   background-color: #fff;
   border: 1px solid #7D4321;
   padding: 30px;
   position: relative;
   top: -72px;
 }

 #check div.box_border h3 {
   width: 100%;
   max-width: 350px;
   margin: 0 auto 5px;
 }

 #check .profile {
   width: 90%;
   max-width: 600px;
   margin: 0 auto 40px;
   color: #fff;
   background-color: #C24321;
   padding: 8%;
   border-radius: 15px;
   font-size: 15px;
 }

 #check .box_bevel {
   width: 90%;
   max-width: 1000px;
   margin: 0 auto;
   background-color: #FBF5EB;
   padding-top: 30px;
   position: relative;
 }

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

 #check .box_bevel h2 {
   width: 80%;
   max-width: 700px;
   margin: 0 auto 20px;
 }

 #check .box_bevel p {
   width: 85%;
   max-width: 500px;
   margin: 0 auto 20px;
   font-weight: bold;
 }

 @media only screen and (min-width: 950px) {
   #check {
     padding-bottom: 100px;
   }

   #check .profile {
     width: 90%;
     max-width: 1000px;
     margin: 0 auto 40px;
     color: #fff;
     background-color: #C24321;
     padding: 2%;
     border-radius: 15px;
     font-size: 15px;
     border-radius: 5px;
   }

   #check .profile h3 {
     width: 30%;
     float: left;
   }

   #check .profile p {
     max-width: 65%;
     float: right;
     padding: 1%;
   }

   #check .box_border {
     width: 90%;
     font-weight: bold;
     padding: 10px;
   }

   #check .box_bevel {
     padding: 48px;
   }

   #check .box_bevel p {
     width: 45%;
     margin: 30px auto 20px;
     font-weight: bold;
     font-size: 22px;
   }

   #check .box_bevel .clearfix img {
     width: 50%;
     max-width: 500px;
   }
 }

 #case {
   margin: 50px auto;
 }

 #case h2 {
   width: 80%;
   margin: 0 auto 17px;
 }

 #case .box_case.point h3 {
   width: 85%;
   max-width: 800px;
   margin: 0 auto 20px;
   padding-top: 30px;
 }

 #case .box_case.point p {
   width: 85%;
   max-width: 800px;
 }

 #case .box_case.point img.illust {
   width: 100%;
   margin: 20px auto 30px;
 }

 #case .box_case {
   width: 90%;
   margin: 0 auto 50px;
   background-color: #EEE5D6;
 }

 #case .box_case .number {
   display: block;
   width: 50%;
   margin: -23px auto 30px;
 }

 #case .box_case h3 {
   width: 90%;
   margin: 0 auto 10px;
 }

 #case .box_case .profile img:first-child {
   width: 80%;
   max-width: 400px;
   margin: 0 auto;
 }

 #case .box_case .profile img:nth-child(2) {
   width: 90%;
   max-width: 400px;
   margin: 0 auto;
 }

 #case .sensei {
   background-image: url(../img/case_bg_sensei.svg);
   background-repeat: repeat;
   background-size: 100%;
   padding: 30px 0 60px;
 }

 #case .sensei h4, #case .sensei h5 {
   position: relative;
   z-index: 0;
   width: 80%;
   margin: 0 auto;
 }

 #case .sensei .box_sensei {
   position: relative;
   z-index: 3;
   width: 90%;
   margin: -30px auto;
   background-color: #fff;
   padding: 30px 0;
 }

 #case .sensei .box_sensei img {
   width: 90%;
   margin: 0 auto 20px;
 }

 #case .sensei .box_sensei .shadow {
   filter: drop-shadow(3px 10px 10px rgba(0, 0, 0, 0.1));
 }

 #case .sensei .box_sensei p {
   width: 80%;
   margin: 0 auto;
 }

 @media only screen and (min-width: 950px) {
   #case {
     margin: 100px auto;
   }

   #case h2 {
     width: 80%;
     max-width: 900px;
     margin: 0 auto 20px;
   }

   #case .box_case.point {
     padding: 5%;
     background-color: #fff;
     margin: 0 auto 70px;
   }

   #case .box_case.point h3 {
     width: 80%;
     margin: 0 auto;
     padding: 0;
   }

   #case .box_case.point p {
     width: 100%;
     max-width: none;
   }

   #case .box_case.point img.illust {
     width: 100%;
     margin: 30px auto 0;
   }

   #case .box_case {
     width: 90%;
     max-width: 1000px;
     margin: 0 auto 50px;
     position: relative;
   }

   #case .box_case .number {
     display: block;
     width: 20%;
     position: absolute;
     top: -1%;
     left: -2%;
   }

   #case .box_case h3 {
     width: 70%;
     margin: 0 0 50px 25%;
     padding-top: 50px;
     position: relative;
   }

   #case .box_case .profile {
     margin-bottom: 50px;
   }

   #case .box_case .profile img {
     vertical-align: top;
   }

   #case .box_case .profile img:first-child {
     display: inline-block;
     width: 45%;
     max-width: none;
     margin-right: 5%;
   }

   #case .box_case .profile img:nth-child(2) {
     display: inline-block;
     width: 40%;
     max-width: none;
   }

   #case .sensei {
     background-size: 100%;
     padding: 60px 0;
   }

   #case .sensei .box_sensei {
     padding: 30px;
   }

   #case .sensei .box_sensei .pc_fl {
     width: 50%;
   }

   #case .sensei .box_sensei .pc_fr {
     width: 50%;
     margin-top: 50px;
   }

   #case .sensei .box_sensei h4 {
     position: relative;
     z-index: 0;
     width: 90%;
     margin: 0 auto 0px;
   }

   #case .sensei .box_sensei h4+img {
     margin: -70px auto 0px;
   }

   #case .sensei .box_sensei p {
     font-size: 20px;
     font-weight: bold;
     width: 90%;
     margin: 0 auto;
   }
 }

 .contents {
   margin-bottom: 80px;
   margin: 0 auto 100px;
 }

 .contents h3 {
   width: 100%;
   max-width: 1000px;
   margin: 0px auto 30px;
   padding-top: 30px;
 }

 .contents nav li {
   width: 90%;
   max-width: 350px;
   height: auto;
   background-color: #fff;
   margin: 0 auto 5px;
   padding: 15px 15px 15px;
   border-radius: 15px;
   display: flex;
 }

 .contents nav li a {
   display: block;
   width: 100%;
   height: 100%;
   transition: 0.3s;
   display: flex;
 }

 .contents nav li a:hover {
   opacity: 0.5;
   transition: 0.3s;
   margin-top: -5px;
   margin-bottom: 5px;
 }

 .contents .part_number {
   width: 20%;
   max-width: 28px;
 }

 .contents nav.link_bottom li:last-child .part_number {
   margin-top: 0;
 }

 .contents nav.link_bottom li:last-child .part_number.part03 {
   margin-top: 10px;
 }

 .contents nav.link_bottom li {
   margin: -15px auto 0;
 }

 .contents p {
   font-weight: bold;
   font-size: 17px;
   text-align: center;
   line-height: 1.5em;
   color: #7D4321;
 }

 @media only screen and (min-width: 950px) {
   .contents {
     margin-bottom: 80px;
     margin: 0px auto 60px;
   }

   .contents nav ul {
     width: 90%;
     max-width: 1000px;
     margin: 0 auto;
     display: flex;
   }

   .contents nav li {
     margin-right: 15px;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
   }

   .contents nav li p {
     float: none;
     width: 100%;
     margin-top: 0;
   }

   .contents nav li div {
     float: none;
     margin: 4px 0 0 10px;
   }
 }

 #part {
   padding-top: 30px;
   margin-top: -30px;
   color: #404040;
 }

 #part .part_box {
   width: 90%;
   max-width: 1000px;
   margin: 0 auto 20px;
   background-color: #fff;
   border-radius: 5px;
   padding-bottom: 20px;
 }

 #part .part_box .part_kv {
   margin-bottom: 25px;
   padding: 1px 0 0;
   background-color: #F2EEE7;
   overflow: hidden;
 }

 #part .part_box h3 {
   width: 90%;
   max-width: 800px;
   margin: 15px;
   text-align: left;
   position: relative;
   z-index: 3
 }

 #part .part_box h3+img {
   margin: -40px 0 0;
   position: relative;
   z-index: 0
 }

 #part .part_talk {
   width: 90%;
   max-width: 750px;
   margin: 0 auto 15px;
   border: #EEE5D6 1px solid;
 }

 #part .part_kv_sub {
   margin: 30px auto;
 }

 #part .member_name {
   height: auto;
   background-color: #EEE5D6;
   font-weight: bold;
   font-size: 18px;
   padding: 10px;
   text-align: left;
 }

 #part .member_img {
   display: inline-block;
   width: 60px;
   height: 60px;
   background-size: cover;
   border-radius: 30px;
   margin: -20px 0 -20px;
 }

 #part .member0all {
   background-image: url(../img/member_img0all.png);
 }


 #part .member00 {
   background-image: url(../img/member_img00.png);
 }

 #part .member01 {
   background-image: url(../img/member_img01.png);
 }

 #part .member02 {
   background-image: url(../img/member_img02.png);
 }

 #part .member03 {
   background-image: url(../img/member_img03.png);
 }

 #part .member_name span {
   margin-left: 15px;
 }

 #part .part_talk p {
   padding: 15px;
   font-weight: bold;
   font-size: 16px;
   line-height: 1.5em;
 }

 @media only screen and (min-width: 950px) {
   #part .part_box h3+img {
     margin: -140px 0 0;
   }
 }

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