@charset "UTF-8";

/*変数*/
:root {
  --main_color: #ffa42c;
  --ttl_color: #314d93;
  --txt_color: #4f4d4a;
  --hover_color: #e4821d;
  --en_font: "toppan-bunkyu-midashi-go-std", sans-serif;
}
/*呼び出し方は var(--main_color)*/
/*ベース*/
p, li, a, dt, dd, address, th, td, label, input, textarea{
  font-size: 1rem;
  line-height: 1.8;
  color: var(--txt_color);
}

body {
  background: url(../../assets/img/bg-pc.jpg) no-repeat center center / cover;
  color: #333333;
  background-attachment: fixed;
  z-index: 1;
  transition: .7s;
}
.section {
  padding: 70px 20px;
  background: #fcfbf7;
  overflow: hidden;
}
.ttl {
  color: var(--txt_color);
  font-size: 1.5rem;
  line-height: 1.5;
  font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
  text-align: center;
  font-weight: bold;
  margin-bottom: 2.5rem;
  position: relative;
}
.ttl.-dot::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 0.5rem;
  background: url(../../assets/img/ttl-dot.svg) no-repeat center center / contain;
  bottom: -50%;
  left: 50%;
  transform: translateX(-50%);
}
br.-sp {
  display: block;
}
@media screen and (max-width: 425px) {
  .section {
    padding: 50px 20px;
  }
  .ttl.-dot {
      font-size: 1.26rem;
  }
  br.-sp {
    display: none;
  }
}
/*PC時の左側テキスト*/
.left-top-img,
.left-bottom-img {
  position: fixed;
}
.left-top-img {
  width: 20%;
  top: 5%;
  left: 2%;
}
.left-bottom-img {
  width: 25%;
  bottom: 5%;
  left: 2%;
}

@media screen and (max-width: 1100px) {
  .left-top-img,
  .left-bottom-img {
      display: none;
  }
}

/*PC時のサイドメニュー*/
.nav_wrapper {
  position: fixed;
  z-index: 5;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.nav_wrapper .nav_list-pc {
  width: 250px;
  max-width: 280px;
  padding: 0.5rem 1rem;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc((100% - 450px) / 9);
  z-index: 5;
}
.nav_wrapper .nav_list-pc li {
  background-color: #fff;
  border-radius: 10px;
}

.nav_wrapper .nav_list-pc li a {
  display: block;
  padding: 10px 0px;
  font-weight: 700;
  color: #262018;
  position: relative;
  border-bottom: 1px dashed #ddd;
  transition: .4s;
}
.nav_wrapper .nav_list-pc li:last-child a {
  border-bottom: none;
}
.nav_wrapper .nav_list-pc li a::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: url(../../assets/img/arrow.svg) no-repeat center center / contain;
  top: 50%;
  transform: translateY(-50%);
  left: 90%;
}
.nav_wrapper .nav_list-pc li a:hover {
  border-bottom: 1px solid var(--main_color);
}

@media screen and (max-width: 1100px) {
  .nav_wrapper {
    display: none;
  }
}

/*コンテンツ*/
.article {
  max-width: 450px;
  margin: 0 calc(105% - 76vw + 1% ) 0 auto;
  background: #fcfbf7;
  border: solid #444;
  border-width: 0 2px;
  position: relative;
}
@media screen and (max-width: 1100px) {
  .article {
    margin: auto;
  }
}
@media screen and (max-width: 640px) {
  .article {
    /*width: 100%;*/
    border: none;
  }
}


/*ヘッダー*/
#header{
  position: sticky;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: 1rem;
  z-index: 999;
}
.header-logo{
  max-width: 250px;
}
.header-logo.center{
  margin: auto;
}
@media screen and (max-width: 640px){
  .header-logo{
    padding: 3%;
    position: fixed;
    top: 0;
    z-index: 99;
  }
  #header.thanks-parts .header-logo{
    position: relative;
    margin: auto;
  }
}
.nav_list a::before{
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--main_color);
  vertical-align: middle;
  margin-right: .4rem;
}
.nav_list a:hover{
  color: var(--main_color);
  border-bottom: 2px solid var(--main_color);
}


/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after{
  display: none;
}

/*バーガーメニュー*/
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open{
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after{
  content: '';
  display: block;
  height: 1px;
  width: 35px;
  background: #231815;
  transition: 0.5s;
  position: absolute;
}
.drawer_open p {
  font-size: 0.7rem;
  position: absolute;
  top: 63%;
}
/*ナビゲーションのデザイン*/
.nav_content{
  width: 90%;
  max-width: 447px;
  /*height: 100%;*/
  position: fixed;
  top: -100%;
  right: calc(108% - 75.89vw - 2%);
  z-index: 99;
  background: #fff;
  transition: .5s;
}
.nav_list{
  flex-direction: column;
  align-items: center;
  background: none;
}
.nav_list li{
  width: 100%;
  margin-right: 0;
}
.nav_list li a{
  color: #262018;
  font-weight: 500;
  display: block;
  padding: 20px 3rem;
  border-bottom: 1px dashed #ddd;
  position: relative;
}
.nav_list li a::after{
   content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: url(../../assets/img/arrow.svg) no-repeat center center / contain;
  top: 50%;
  transform: translateY(-50%);
  left: 90%;
}
.nav_list li::after{
  display: none;
}

#drawer_input:checked ~ .drawer_open{
  background: var(--main_color);
}
/*スクロールしたらナビゲーションに付与される*/
.fixed{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}

#drawer_input:checked ~ .drawer_open span::before,
#drawer_input:checked ~ .drawer_open span::after{
  background: #fff;
}
/* アイコンがクリックされたらテキスト「MENU」を非表示にする */
#drawer_input:checked ~ .drawer_open p {
    display: none;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  padding-bottom: 1rem;
  border-radius: 0 0 10px 10px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 7px 10px rgba(127, 127, 127, 0.2);
  top: 0;
      right: calc(108% - 75.89vw - 2%);
  
}
@media screen and (max-width: 1100px) {
  .nav_content,
  #drawer_input:checked ~ .nav_content{
    width: 100%;
    right: 50%;
    transform: translateX(50%);
  }
}
/*FV*/
.fv {
  width: 100%;
  background: url(../../assets/img/bg-fv.jpg) no-repeat bottom center / cover;
  margin-top: -19%;
  padding: 15% 3% 55% 4%;
}
.fv h1 {
  font-family: var(--en_font);
  width: 70%;
  padding-top: 5%;
}
@media screen and (max-width: 640px) {
  .fv h1 {
    padding-top: 12%;
  }
}
/*Bricks&UKについて*/
#introduction {
  padding: 15px 20px 70px 20px;
}
#introduction .txt {
  margin-bottom: 10%;
  position: relative;
  z-index: 15;
}
#introduction .ttl{
  position: relative;
  z-index: 15;
}
#slider-introduction {
  width: calc(100% + 40px);
  margin: 0 -20px 5%;
  position: relative;
}
#slider-introduction::before {
  content: "";
  position: absolute;
  background: url(../../assets/img/bg-watercolor03.png) no-repeat center center / contain;
  width: 84%;
  height: 100%;
  right: -17%;
  bottom: 68%;
  z-index: 0;
}
#slider-introduction li {
  width: fit-content;
}
#slider-introduction li img {
}
.dl-introduction {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20%;
  position: relative;
  z-index: 10;
}
.dl-introduction::before {
  content: "";
  position: absolute;
  background: url(../../assets/img/bg-watercolor03.png) no-repeat center center / contain;
  width: 83%;
  height: 250%;
  top: -5%;
  left: -15%;
  z-index: 0; 
}
.dl-introduction div {
  width: 32%;
}
.dl-introduction dt {
  color: #fff;
  background: #ffa403;
  border-radius: 20px;
  position: relative;
  z-index: 10;
}
.dl-introduction dd {
  font-size: 1.5rem;
  font-weight: 600;
  background: #fff;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -0.5rem;
  position: relative;
  z-index: 5;
}
.appearance-wrap {
  position: relative;
  z-index: 15;
}
.appearance-contents {
  margin-bottom: 10%;
  position: relative;
}
.appearance-contents-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10%;
}
.appearance-contents {
  display: flex;
  flex-direction: column;
  width: calc(100% + 40px);
  margin: 0 -20px 15%;
  position: relative;
}
.appearance-contents:last-child {
  margin-bottom: 0;
}
.appearance-contents:last-child::before,
.appearance-contents:last-child::after {
  content: "";
  position: absolute;
  z-index: -5;
}
.appearance-contents:last-child::before {
  width: 60%;
  height: 49%;
  background: url(../../assets/img/deco-flower01.png) no-repeat center center / contain;
  top: -42%;
  left: -12%;
}
.appearance-contents:last-child::after {
  width: 69%;
  height: 60%;
  background: url(../../assets/img/deco-flower02.png) no-repeat center center / contain;
  top: 71%;
  right: -6%;
}
.appearance-contents-about picture {
  width: 80%;
  margin-bottom: 0.5rem;
}
.appearance-contents picture {
  width: 85%;
}
.appearance-contents:nth-child(even) picture {
  margin-right: auto;
}
.appearance-contents:nth-child(odd) picture {
  margin-left: auto;
}
.appearance-contents p {
  background: #fcfbf7;
  padding: 4%;
  margin-top: -2rem;
}
.appearance-contents:nth-child(even) p {
  border-radius: 5px 0 0 5px;
  margin-left: auto;
}
.appearance-contents:nth-child(odd) p {
  border-radius: 0 5px  5px 0;
  margin-right: auto;
}
@media screen and (max-width: 425px) {
  #slider-introduction li picture {
    width: 100vw;
  }
  .appearance-contents picture {
    width: 90%;
  }
  .appearance-contents p {
    width: 80%;
  }
}

/*仕事内容*/
#job {
  background: url(../../assets/img/bg-job.jpg) no-repeat center center / cover;
  border-radius: 30px 30px 0 0;
}
#job .txt {
  text-align: center;
  margin-bottom: 3rem;
}
.ul-job {
  position: relative;
}
.ul-job::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 90%;
  background: url(../../assets/img/deco-border.svg) no-repeat center center / cover;
  top: 0;
  left: 20%;
}
.ul-job li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
}
.ul-job li img {
  width: 40%;
  position: relative;
}

.ul-job li:last-child picture::before {
  content: none;
}
.ul-job li div {
  width: 55%;
}
.ul-job li div h3 {
  font-size: 1.3rem;
  font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
  text-align: center;
  line-height: 1.5;
  font-weight: 700;
  background: #fff;
  border-radius: 5px;
  width: 50%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}
.ul-job li div p {
  text-align: left;
}
.ul-job li div > ul {
  list-style: disc;
}
.ul-job li div > ul li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0;
}
.ul-job li div > ul li::before {
  content: "・";
  position: absolute;
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
}
.job-list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  background: #fffaf3;
  padding: 1rem;
  border-radius: 5px;
}
.job-list li {
  line-height: 2;
  padding-left: 1rem;
  position: relative;
  
}
.job-list li::before {
  content: "◼︎";
  position: absolute;
  color: #e0842c;
  width: 1px;
  height: 1px;
  top: 0;
  left: 0;
}
.ul-industry {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5%;
}
.ul-industry li {
  font-size: 0.9rem;
  background: #fff;
  border-radius: 30px;
  padding: 0.5rem 1.2rem;
  margin: 0.5rem 0.2rem;
}
.ttl.-small {
  font-size: 1.25rem;
  position: relative;
  margin: 35% auto 3%;
}
.ttl.-small::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 200%;
  background: url(../../assets/img/deco-shisa.png) no-repeat center center / contain;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
#slider-industry {
  width: calc(100% + 40px);
  margin: 0 -20px 5%;
}
@media screen and (max-width: 425px) {
  .ul-job li {
    align-items: flex-start;
  } 
  .ul-job li div > ul li {
    font-size: 0.9rem;
  }
  .ul-job li div h3 {
    font-size: 1.2rem;
    width: 70%;
  }
  .ttl.-small {
    margin-top: 40%;
  }
  .ttl.-small::before {
    width: 130px;
    height: 170%;
  }
  .ul-industry li {
    font-size: 1rem;
    width: 80%;
    text-align: center;
  }
  .job-list {
    grid-template-rows: repeat(10, auto);
  }
}


/*教育・研修*/
#training {
  background: #fcfbf7;
  position: relative;
}
#training::after {
  content: "";
  position: absolute;
  background: url(../../assets/img/deco-line.svg) no-repeat center center / cover;
  width: 100%;
  height: 1rem;
  top: 99%;
  left: 0;
}
#training p {
  margin-bottom: 5%;
}
.dl-training,
.dl-training dt {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dl-training dt {
  width: 90%;
}
.dl-training dt:nth-child(1) {
  background: url(../../assets/img/bg-watercolor01.png) no-repeat center center / contain;
}
.dl-training dt:nth-child(3) {
  background: url(../../assets/img/bg-watercolor02.png) no-repeat center center / contain;
}
.dl-training dt:nth-child(5) {
  background: url(../../assets/img/bg-watercolor03.png) no-repeat center center / contain;
}
.dl-training dt img {
  width: 250px;
  height: auto;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.dl-training dt:nth-child(1) img {
    object-position: 70%;
}
.dl-training dt:nth-child(3) img {
  object-position: 100% 65%;
}
.dl-training dt:nth-child(5) img {
  object-position: 71% 82%;
  object-fit: none;
}
.dl-training dt h4 {
  text-align: center;
  width: 75%;
  padding: 0.3rem 0.8rem;
  background: #fff;
  border: 1px solid #757575;
  border-radius: 40px;
  margin-top: -14%;
  margin-bottom: 1.5rem;
}
.dl-training dd {
  margin-bottom: 10%;
}
.dl-training dd:last-child {
  margin-bottom: 0;
}
#slider-industry li {
  padding: 0 10px;
}
#slider-industry img {
  border-radius: 10px;
}
@media screen and (max-width: 425px) {
  .dl-training dt img {
    width: 250px;
  }
  .dl-training dt:nth-child(5) img {
    object-position: 64% 49%;
  }
  .dl-training dt{
    width: 95%;
  }
  .dl-training dt h4 {
    width: 100%;
    margin-top: -3rem;
  }
}


/*先輩メッセージ*/
#message {
  background: url(../../assets/img/bg-message.jpg) no-repeat center top/cover;
  padding: 80px 20px;
}
.ul-message {
  display: flex;
  flex-direction: column;
  margin-bottom: 10%;
}
.ul-message li {
  line-height: 1.5;
  padding: 1rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}
.ul-message li span {
  color: #ff7f00;
  font-weight: 500;
}
#slider-message {
  width: calc(100% + 40px);
  margin: 0 -20px;
  position: relative;
}
#slider-message::before,
#slider-message::after {
  content: "";
  position: absolute;
  width: 85px;
  height: 65px;
  background: url(../../assets/img/deco-flower03.png) no-repeat center center/cover;
  z-index: 10;
}
#slider-message::before {
  transform: rotate(135deg);
  bottom: 80%;
}
#slider-message::after {
  right: -2%;
  top: 91%;
}
.slider .slick-slide {
  /*margin: 0 40px;*/
  position: relative;
  width: fit-content;
}
.slider .slick-slide img {
  display: block;
}
.slider-dots{
  display: flex;
  align-items: center;
  justify-content: center;
}
.slider-dots .slick-dots li {
  color: #e0e0e0;
  display: inline-block;
}
.slider-dots .slick-dots button {
  display: block;
  width: 8px;
  height: 8px;
  margin: 8px;
  font-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
  background: #bcbcbc;
  border-radius: 50%;
}
.slider-dots .slick-dots .slick-active button {
  background: #e87f21;
}
@media screen and (max-width: 640px) {
  #slider-message::after {
    right: 0;
  }
}
@media screen and (max-width: 425px) {
  #slider-message li {
      width: 100vw;
  }
  #slider-message::after {
    top: 89%;
    right: -3%;
  }
}

/*募集要項*/
#requirements {
  background: #fcfbf7;
}
.dl-requirements {
  list-style: none;
}
.dl-requirements dt {
  color: #e87f21;
  font-size: 1rem;
  font-family: "";
  margin-bottom: 0.3rem;
}
.dl-requirements dd {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed #b7b7b7;
}
.dl-requirements dd:last-child {
  border: none;
  margin-bottom: none;
  padding-bottom: none;
}
.dl-requirements dd ul {
  margin-left: 0.8rem; 
}
.dl-requirements dd ul li {
  margin-left: 0.3rem;
  position: relative;
  list-style: disc;
}
.dl-requirements dd ul li::marker {
  color: var(--main_color);
}
.dl-requirements dd p {
  font-size: 0.8rem;
  line-height: 1.2;
  display: block;
}

/*CV*/
.cv {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(../../assets/img/bg-cv.jpg) no-repeat center center/cover;
  padding: 10% 20px;
}
.cv p {
  text-align: center;
  margin-bottom: 1.5rem;
}
.cv a {
  color: #fff;
  font-weight: 600;
  text-align: center;
  display: inline-block;
  padding: 1rem 0.5rem;
  width: 100%;
  border-radius: 5px;
  position: relative;
  transition: .4s;
}
.cv a:hover {
  opacity: .8;
}
.ToContact {
  font-size: 1.5rem;
  background: #97c67f;
  margin-bottom: 0.8rem;
}
.ToContact::before,
.ToContact::after,
.tel::before {
  content: "";
  position: absolute;
}
.ToContact::before {
  width: 2rem;
  height: 2rem;
  background: url(../../assets/img/mail.svg) no-repeat center center/contain;
  top: 50%;
  transform: translateY(-50%);
  left: 18%;
}
.ToContact::after {
  width: 1.5rem;
  height: 1.5rem;
  background: url(../../assets/img/arrow-white.svg) no-repeat center center/contain;
  top: 50%;
  transform: translateY(-50%);
  right: 20%;
}
a.tel {
  font-size: 2rem;
  line-height: 1;
  background: #e0842c;
  padding: 1rem 0rem 1rem 1rem;
}
.tel span {
  font-size: 0.8rem;
}
.tel span:first-child {
  font-weight: 500;
}
.tel .tantou {
  display: block;
  margin-top: 0.5rem;
}
.tel::before{
  width: 1.5rem;
  height: 1.5rem;
  background: url(../../assets/img/tel.svg) no-repeat center center/contain;
  top: 22%;
  left: 6%;
}
@media screen and (max-width: 640px) {
  .tel::before {
    top: 20%;
    left: 10%;
  }
  .jinji {
    display: block;
    margin-top: 0.5rem;
  }
  .tel span .-sp {
    display: none;
  }
}
@media screen and (max-width: 425px) {
  .ToContact::before {
    left: 8%;
  }
  .ToContact::after {
    right: 7%;
   }
  .tel::before {
    top: 19%;
    left: 4%;
  }
}

/*会社紹介*/
#company {
  background: url(../../assets/img/bg-company.jpg) no-repeat center bottom/cover;
  padding: 60px 20px 110px;
}
.slider-wrap {
  margin-bottom: 8%;
  position: relative;
}
.slder-company .slick-slide {
  height: 300px;
  overflow: hidden;
}
.slder-company .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.thumbs_dots {
  margin: 10px 0 0;
}
.thumbs_list {
  display: flex;
  justify-content: space-between;
}
.thumbs_list li {
  display: inline-block;
  width: 75px;
  height: 60px;
  /*opacity: 0.4;*/
  cursor: pointer;
  transition: opacity 0.3s;
  border-radius: 5px;
  position: relative;
}
.thumbs_list li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: rgba(0,0,0, 0.4);
  top: 0;
  left: 0;
}
.thumbs_list li.slick-active::before {
  content: none;
}
.data-list{
  display: flex;
  flex-wrap: wrap;
}
.data-list dt, .data-list dd{
  border-bottom: 1px dotted #9b9b9b;
}
.data-list dt{
  width: 100px;
  font-weight: 500;
  padding: 2% 1% 2% 0;
  position:  relative;
}
.data-list dt::after{
  content: "";
  position: absolute;
  width: 1.5px;
  height: 72%;
  background: var(--main_color);
  top: 50%;
  transform: translateY(-50%);
  right:0;
}
.data-list dd{
  padding: 2%;
  width: calc(100% - 100px);
}
.data-list address{
  font-style: normal;
  line-height: 1.6;
}
.data-list a {
  color: #fff;
  line-height: 1.5;
  padding: 0 1rem 0 0.5rem;
  background: var(--main_color);
  border-radius: 30px;
  display: inline-block;
  position: relative;
}
.data-list a::after {
  content: "";
  position: absolute;
   background-color: #fff;
  width: 8px;
  height: 13px;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
}


/*メールフォーム*/
.mailform{
  position: relative;
  background: url(../../assets/img/bg-contact.jpg) no-repeat center bottom -14%/cover;
  z-index: 10;
  border-radius: 15px 15px 0 0;
  margin-top: -4%;
  overflow: hidden;
  box-shadow: 0 0 7px 7px rgba(127, 127, 127, 0.2);

}
.mailform p {
  text-align: center;
  /*font-size: 0.9rem;*/
}
.mailform p a {
    color: var(--main_color);
    font-weight: bold;
    transition: .4s;
}
.mailform p a:hover {
  opacity: 0.8;
}

.formstyle {
  width: 95%;
  margin: 30px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #fff;
  border-radius: 5px;
  padding: 5%;
  position: relative;
  box-shadow: 0 0 6px 7px rgba(127, 127, 127, 0.1);
}

.formstyle label {
  color: #422c2c;
  display: block;
  margin-bottom: 2%;
}

/*必須*/
.red {
  display: inline-block;
  background-color: #ce4646;
  padding: 0 2%;
  line-height: 1.8;
  color: #fff;
  font-size: .8rem;
  margin-left: 5px;
  border-radius: 10%;
}
/*任意*/
.gray {
  display: inline-block;
  background-color: #606060;
  padding: 0 1%;
  line-height: 1.8;
  color: #fff;
  font-size: .8rem;
  margin-left: 5px;
  border-radius: 10%;
}

.formstyle select, .formstyle input, .formstyle textarea {
  background: #FFF;
  border: 1px solid #707070;
  padding: 1% 2%;
  margin: 0 0 3%;
  font-size: 1rem;
  color: #231815;
  border-radius: 5px;
}
select#select {
  padding: 0.5rem 0.4rem;
}
input.radio {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 25px!important;
  height: 25px;
  -webkit-transition: all 0.15s ease-out 0s;
  transition: all 0.15s ease-out 0s;
  background-color: #e8e8e8;
  border: 1px solid #707070;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  margin-bottom: 0;
  z-index: 10;
  border-radius: 5px;
}

.radiobox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.checks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 5px;
}

label.radiotxt {
  margin: 0;
}

input.radio:hover {
  background: #9faab7;
}

input.radio:checked {
  background: #a7a7a7;
}

input.radio:checked::before {
  width: 20px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  content: "\f00c";
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-family: "Font Awesome 5 Free";
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  left: 0;
  right: 0;
  margin: auto;
}

.formstyle textarea {
  height: 250px;
}

.privacy {
  padding: 20px;
  width: 85%;
  height: 200px;
  margin: 30px auto 10px;
  overflow-y: scroll;
  border: #c9caca 1px solid;
  border-radius: 5px;
}
.privacy h2 {
  color: #422c2c;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 2rem;
  border-bottom: 1px solid #e88815;
  padding-bottom: 2%;
  margin-bottom: 2%;
}
.privacy h3 {
  font-size: 1rem;
  font-weight: bold;
  line-height: 2rem;
  margin-bottom: 12px;
  border-left: 5px solid #e87f21;
  padding-left: 4%;
}

.privacy p, .privacy-list {
  /*ont-size: 0.9rem;*/
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: left;
}

.privacy-list li {
  list-style: disc;
  /*font-size: 0.9rem;*/
  margin-left: 2rem;
  line-height: 1.6;
}

.formstyle .submit-btn {
  padding: 2%;
  margin: 5% auto 0;
  color: #fff;
  background-color: var(--main_color);
  border-radius: 5px;
  border: none;
}
.privacycheck {
  width: 100%!important;
  text-align: center;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.aicon-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.aicon-name ::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background: url(../img/common/onepoint-blk.svg) no-repeat center center/contain;
}

.submit-btn {
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.submit-btn:hover {
  opacity: 0.7;
}
.formstyle label, .formstyle select, .formstyle input, .formstyle textarea {
  width: 100%;
}
.privacy {
  padding: 4%;
}
.radiobox {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 2%;
}

/*フォーム確認画面*/
#cheked .ttl{
  margin-bottom: 2%;
}
.confirmation .sec {
  padding: 0 20px;
}
.cheked-ttl {
  margin: 0 auto;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 500;
  color: #231815;
  position: relative;
  margin-bottom: 50px;
}
.formstyle .radio-label {
  display: block;
  margin-left: 0;
}
/*サンクスページ*/
.thanks-parts{
  padding: 0.8rem 0;
}
.thanks {
  padding: 10% 0;
  position: relative;
    z-index: 99;
}
.thanks .ttl {
  margin: 0 auto 50px auto;
}
.thanks .ttl::after {
  bottom: -70%;
}
.thanks .btn{
  color: #fff;
  text-align: center;
  padding: 0.8rem;
  display: block;
  width: 50%;
  background: var(--main_color);
  border-radius: 50px;
  margin: 1rem auto 0;
  transition: .4s;
}
.thanks .btn:hover {
  opacity: 0.8;
}



/* フッター */
.copy {
  color: #fff;
  text-align: center;
  background: #ffbd39;
  padding: 0.6rem 0;
}


/* CV(fixed) */
.fixed-cv {
  display: flex;
  align-items: center;
  position: fixed;
  width: 100%;
  max-width: 447px;
  bottom: 0%;
  z-index: 999;
  -webkit-transition: .4s;
  transition: .4s;
}
.fixed-cv a {
  color: rgb(255, 255, 255);
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2%;
  transition: 0.4s;
}
.fixed-cv a:hover {
  opacity: 0.8;
}
.fixed-cv a img {
  width: 50px;
  height: 40px;
  margin-right: 1rem;
}
.fixed-cv a:first-child {
  background: #97c67f;
}
.fixed-cv a:last-child {
  background: #e0842c;
}


/*thanksページ*/
.thanks {
  padding: 10% 20px 0;
  min-height: 86vh;
}
.thanks-tel {
  color: var(--main_color);
  font-weight: bold;
  transition: .4s;
}
.thanks-tel:hover {
  opacity: 0.8;
}

/*送信内容確認画面*/
/* 自由に編集下さい */
#formWrap {
  width:90%;
  max-width:750px;
  margin:0 auto 30px auto;
  line-height:120%;
  /*cursor:pointer*/
  margin-bottom:30px;
}

table.formTable{
  width:95%;
  margin:5% auto;
  border-collapse:collapse;
}
table.formTable tr{
  display: flex;
  flex-direction: column;
}
table.formTable td{
  padding:15px;
  background-color: #fff;
}

table.formTable td{
  padding:15px;
  background-color: #fff;
}

table.formTable th{
  color: #fff;
  width:100%;
  font-weight:normal;
  background: #e0842c;
  text-align:left;
  padding: 15px;
}

p.error_messe{
  margin:5px 0;
  color:red;
}

.send{
  display: -webkit-box;
    display: flex;
    justify-content: space-around;
    width: 400px;
    margin: 0 auto;
  font-size: .87rem;
}
.submitbtn{
  background-color: var(--main_color);
  padding: 12px 50px;
  font-size: 1rem;
  height: fit-content;
  text-align: center;
  margin:20px auto;
  color: #fff;
  border-radius: 5px;
}
.submitbtn,.backpage {
    -webkit-transition: .4s;
    -o-transition: .4s;
    transition: .4s;}
.submitbtn:hover,.backpage:hover{
  opacity: .7; 
}

.backpage{
  background-color:#b7b7b7;
  color: #231815;
  padding: 16px 50px;
  font-size: 1rem;
  height: fit-content;
  margin:20px auto;
  text-align: center;
  border-radius: 5px;
}



/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:639px) {
#formWrap {
  width:90%;
  margin:0 auto 50px auto;
}
#formWrap h4{
  font-size:1.5rem;
  margin:10% auto;
}
table.formTable td{
  border-bottom:none;
}
table.formTable th, table.formTable td {
  width:auto;
  display:block;
}
table.formTable td,table.formTable th{
  padding:10px;
  border: none;
}
table.formTable th {
  margin-top:5px;
  border-bottom:0;
}
form input[type="submit"], form input[type="reset"], form input[type="button"] {
  display: block;
    width: 100%;
    height: auto;
    padding: 5%;
    font-size: 1rem;
}
.backpage{
  font-weight: normal;
  cursor:pointer;
  margin: 20px auto 0px;
  width: 100%;
}
.send{
    display: flex;
    justify-content: space-around;
    width: 80%;
    margin: 0 auto;
    flex-direction: column;
}
.send>.nav-entry{
  padding: 2rem 2rem;
}
}