@charset "UTF-8";
/*--------------------------------------------------------------
Foundation
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, i, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption,
input, textarea, select, i {
  border: 0;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  font-family: 'Noto Sans JP', sans-serif;
  color: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1.5;
}

html {
  font-size: 61.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

input[type="submit"], button {
  -webkit-appearance: none;
}

body {
  font-size: 2rem;
  line-height: 1.5;
  background: #fff;
  color: #241f2c;
  overflow-y: scroll;
}

ul, li {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a:hover,
a:active,
a:focus {
  outline: 0;
}

a {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  -webkit-transition-property: opacity, color, background, box-shadow, -webkit-transform;
  transition-property: opacity, color, background, box-shadow, -webkit-transform;
  transition-property: opacity, color, background, transform, box-shadow;
  transition-property: opacity, color, background, transform, box-shadow, -webkit-transform;
  opacity: 1;
  line-height: inherit;
}

img,
input[type="image"] {
  border: 0;
  height: auto;
  max-width: 100%;
  -webkit-backface-visibility: hidden;
}

input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  border-radius: 0;
}

a {
  text-decoration: none;
}

p * {
  line-height: inherit;
}

.f19 { font-size: 19px; }
.ff { font-size: 1.2em;}
.red { color: red !important; font-weight: 700; }
.pink { color: #FC5185; }
.navy { color: #1a1b59; }
.orange { color: #fbd317; }
.fw-600 { font-weight: 600; }
.box-shadow { box-shadow: 0 4px 10px #ccc;}
.triangle { position: relative;}
.triangle::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 70px 125px 0 125px;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
}

.type2 { background: #025085;}
.type2::before { border-color: #025085 transparent transparent transparent; border-width: 40px 70px 0 70px;}

@media screen and (max-width: 767px) {
  .triangle::before { border-width: 30px 45px 0 45px;}
  .type2::before { border-color: #1866b0 transparent transparent transparent;}
}
/*蛍光マーカー 今はanime.cssの方を使用中*/
.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffff89 0%) repeat scroll 0 0;}
.orange_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #fbd317 0%) repeat scroll 0 0;}

/*===============================================
  cFix
===============================================*/
/*Opera Fix*/
body:before {
  content:"";
  height:100%;
  float:left;
  display:inline;
  width:0;
  margin-top:-32767px
  }
/*cFix*/
.cFix:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden
  }
/* IE-mac */
* html .cFix {height:1%}
.cFix {display:block}
/* IE-mac */

/*--------------------------------------------------------------
押し込み式ボタン
--------------------------------------------------------------*/
/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*font-size: 62.5%;*//*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff;
  border-radius: 0.5rem;
}

/*CTAボタン */
a.btn--red.btn--cubic {
  background: #f28c00;
  /*border-bottom: 5px solid #6b3e00;*/
  color:#fff;
  font-size: 2.5rem;
  padding: 1.5rem 3rem 1.5rem 2rem;
  font-weight: 600;
  height: 100px;
  width: 460px;
  line-height: 61px;
  border-radius: 100vh;
}

/*a.btn--red.btn--cubic:hover {
  margin-top: 3px;
  height: 97px;
  border-bottom: 2px solid #6b3e00;
}*/

a.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}


/*立体 / 角丸大 / アイコン 2.input */
input.btn--red.btn--cubic {
  color: #fff;
  font-size: 2.5rem;
  padding: 1rem;
  font-weight: 600;
  height: auto;
  width: auto;
  border: solid 2px #d80000;
  border-radius: 50px;
  margin: 2.5rem auto 0 auto;
  padding: 2.8rem 9rem;
  box-shadow: 0px 5px 15px #ddd;
  background: linear-gradient(to right, #fff 50%, #d80000 50%);
  background-size: 200% 100.5%;
  background-position: right bottom;
  transition: all .5s ease-out;
  position: relative;
  box-sizing: border-box;
}
input.btn--red.btn--cubic:hover {
  background-position: left bottom;
  color: #d80000;
  transition: all .5s ease-in;
  border: 2px solid #d80000;
}

input.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 2rem;
}

/*お問合せボタン2*/
a.btn-c {
  font-size: 3rem;
  font-weight: 800;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
}

a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}

/*共通オレンジCVボタン*/
.mail-button {  
  display: block;
  background: #f28c00;
  color: #fff;
  text-align: center;
  border-radius: 100px;
  box-shadow: 0px 5px 15px #ddd;
  padding: 24px 0;
}
.fa-envelope:before {
  margin-right: 10px;
}
@media screen and (max-width: 767px) {
  .mail-button { font-size: 3rem;}
}

/*フォームのボタン*/
.btn-c {font-size: 3rem;font-weight: 800;position: relative;padding: 1.5rem 3rem 1.5rem 2rem;}

/*--------------------------------------------------------------
Component
--------------------------------------------------------------*/

.c_anchor {
  position: absolute;
  width: 100%;
  left: 0;
}

@media screen and (max-width: 767px) {
  .c_anchor { margin-top: -7.6rem; }
}

.c_ttl {
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.25rem;
  clear: both;
  height: auto;
  margin: 0 auto 1.5rem;
}
@media screen and (max-width: 767px) {
.c_ttl { width: 100%; font-size: 5rem;}
}
/*--------------------------------------------------------------
Utility
--------------------------------------------------------------*/
.u_inner {
  width: 1120px;
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc(100vw * 10 / 640);
  }
}

.u_clearfix:after,
.u_clearfix > li:after {
  height: 0;
  visibility: hidden;
  content: ".";
  display: block;
  clear: both;
}

* html .u_clearfix,
* html .u_clearfix > li {
  zoom: 1;
}

* + html .u_clearfix,
* + html .u_clearfix li {
  zoom: 1;
}

.u_switch_img {
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .u_visible_sp {
    display: none;
  }
  .u_tel {
    cursor: default;
  }
  .u_tel:hover {
    opacity: 1;
  }
}

@media screen and (max-width: 767px) {
  .u_inner {
    width: auto;
    margin: 0 4%;
    padding: 0;
  }
}

.u_inner .read-txt1 {
  background: #f5ab16;
  color: #fff;
  padding: 8px 40px;
  border-radius: 50px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .5px;
  width: 57%;
  margin: 0 auto 50px;
}
.u_inner .read-txt2 {
  background: #fff;
  color: #036eb7;
  padding: 8px 40px;
  border-radius: 50px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .5px;
  width: 57%;
  margin: 0 auto 50px;
}
@media screen and (max-width: 767px) {
  .u_inner .read-txt1 { width: 100%; font-size: 2.3rem; padding: 8px 20px; margin-bottom: 5rem;}
  .u_inner .read-txt2 { width: 100%; font-size: 2.3rem; padding: 8px 20px; margin-bottom: 5rem;}
}

/*--------------------------------------------------------------
Layout/PageBase
--------------------------------------------------------------*/
.h_logo {
  position: absolute;
  width: 35rem;
  top: 1.8rem;
}

@media screen and (max-width: 767px) {
  .h_logo {
    position: absolute;
    left: 50%;
    top: 3rem;
    transform: translateX(-50%);
  }
}

.h_tel a {
  font-size: 2.6rem;
}

@media screen and (max-width: 767px) {
  .h_tel {
    margin-bottom: 1.5rem;
    text-align: center;
    background: #2e3165;
    color: #fff;
    font-size: 2.2rem;
  }
  .h_tel small {
    display: none;
  }
  .h_tel a {
    line-height: 8.2rem;
    letter-spacing: .05em;
  }
}

@media screen and (min-width: 768px) {
  .h_tel {
    position: absolute;
    top: 2rem;
    right: 0;
  }

  .h_tel a {
    background: url(../img/ico_fd01.svg) no-repeat left 0.1em/3.1rem;
    line-height: 1;
    padding-left: 1.4em;
  }
  .h_tel small {
    display: block;
    font-size: 1.1rem;
  }
}

@media screen and (max-width: 767px) {
  .h_menu {
    position: absolute;
    top: 3rem;
    width: 3.5rem;
    right: 6.25%;
    cursor: pointer;
  }
  #toggle_menu {
    position: fixed;
    top: 0;
    z-index: 9;
    right: -100%;
    width: 100%;
    height: 100%;
    transition: right .2s ease-in;
    -webkit-transition: right .2s ease-in;
    overflow-y: auto;
    height: 100vh;
  }
  .h_sp_inner {
    background: rgba(242, 242, 242, 0.95);
    width: 67%;
    margin-left: auto;
    padding: 4rem 0rem 4rem 4rem;
  }
}

#gototop {
  position: fixed;
  left: 2rem;
  bottom: 13px;
  width: 5.6rem;
  z-index: 2;
}

@media screen and (max-width: 767px){
  #gototop { bottom: 13rem;}
}

@media screen and (max-width: 767px){
#footer {
  position:fixed;
  bottom:0;
  height: 10rem;
  width:100%;
  text-align:center;
  color:#000000;
  z-index: 2;
}
#footer .endcta {
    padding-top: 0rem!important;
}
#footer li a {
  /*line-height: 3rem;*/
  height: 13.5rem;
  /*margin: 0 -0.64rem!important;*/
}
#footer .rem {
  width: 4.6rem;
  margin-top: 1rem;
}
#footer li {
  width: 100%;
}
#footer div {
  font-size:2.3rem!important;
  line-height: 2.8rem!important;
}
}

.f_logo {
  width: 19.8rem;
}

@media screen and (min-width: 768px) {
  .f_logo { position: absolute;}
}

@media screen and (max-width: 767px) {
  .f_logo { margin: 0 auto 3rem; width: 23.8rem;}
}

.f_tel a {
  display: block;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: .05em;
  background: url(../img/ico_fd04.svg) no-repeat left 0.2em/4rem;
  line-height: 1;
}

.f_tel small {
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  border-top: solid 1px #fff;
  border-bottom: solid 1px #fff;
  padding: .3em 0;
  margin-top: .8rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .f_tel {
    width: 50.5rem;
    margin: 0 auto 3rem;
  }
  .f_tel a {
    background-size: 7.5rem;
    display: inline-block;
    font-size: 5.6rem;
    white-space: nowrap;
    background-position: left .05em;
    text-align: right;
  }
  .f_tel small { font-size: 1.9rem;}
}

@media screen and (min-width: 768px) {
  .f_tel {
    display: inline-block;
    vertical-align: top;
  }
}

.f_copy {
  margin-top: 0.5rem;
  font-size: 1rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

@media screen and (max-width: 767px) {
  .f_copy {
    font-size: 1.8rem;
    text-align: center;
  }
}

#footer2 {
  padding: 3.6rem 0 3rem;
  background: #303841;
  text-align: right;
  color: #fff;
  /*margin-top: 40rem;*/
}
@media screen and (max-width: 767px){
  #footer2 { text-align: center; padding: 4.6rem 0 4.6rem !important;}
}

/*--------------------------------------------------------------
Project
--------------------------------------------------------------*/

header { width: 100%; height: auto; position: absolute; top: 0; display: flex;}
header .logo {
  width: 100px;
  margin: 29px 50px 0;
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
  flex-basis: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
  flex-grow: 0;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
  flex-shrink: 1;
}
header .logo img { width: 100%;}
header ul.nav {
  width: 47%;
  display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
  align-items: center;
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
  flex-basis: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
  flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 2rem;
  color: #160f1d;
}

header ul.nav li { width: 100%; font-size: 1.6rem; text-align: center; font-weight: 500; position: relative;}
header ul.nav li a:before,
header ul.nav li a:after{
  position: absolute;
  top: 3rem;
  content: "";
  display: inline-block;
  width: 0;
  height: .4rem; 
  background: #00ADB5;
  transition: .1s;
}
header ul.nav li a:before{ left: 50%;}
header ul.nav li a:after{ right: 50%;}
header ul.nav li a:hover:before,
header ul.nav li a:hover:after{ width: 20%;}

header .tel {
  margin-left: 0rem;
  display: flex;
  flex-direction: column;
  height: 100%;
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
  flex-basis: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
  flex-grow: 0;
    -webkit-flex-shrink: 1;
    -ms-flex-negative: 1;
  flex-shrink: 1;
  background: url(../img/ico_fd04.svg) no-repeat 0.8em 1.1em/5.1rem #059d5a;
  padding: 15px;
  color: #fff;
}
header .tel a {
  display: block;
  font-size: 2.9rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  padding-left: 2.5em;
}
header .tel small {
  display: block;
  font-size: 1rem;
  padding: .1em 0;
  margin-top: 0.4rem;
  text-align: right;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 767px) {
  header { background: #fff; padding-bottom: 15px;}
  header .logo { margin: 3.8rem auto 0.7rem;}
  header .tel { margin-bottom: 3rem;}
  header .tel a {
    background-size: 7.5rem;
    display: inline-block;
    font-size: 6.1rem;
  }
  header .tel small { font-size: 1.9rem;}
}
  
/*メインビジュアル*/
#top-main {
  background: #fff;
  height: auto;
  padding: 17rem 0 7rem;
  overflow: hidden;
}
.m_inner {
  position: relative;
  height: auto;
  width: 1120px;
  margin: 0 auto;
}
#top-main .copy { float: left; }
#top-main h1 {width: 400px}
#top-main h2 {
  line-height: 1.2;
  color: #363e73;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: .14rem;
  margin: 1.8rem 0 1.3rem 0m;
  }
#top-main h3 {
  background: url(../img/top-main_obi.gif) no-repeat center center;
  width: 560px;
  height: 45px;
  line-height: 45px;
  color: #252c4f;
  font-size: 2.3rem;
  font-weight: 600;
  letter-spacing: .25rem;
  text-align: center;
  margin-bottom: 2.4rem;
}
#top-main h3 span { font-weight: 800;}
#top-main .color { color: #ffe421;}
#top-main h4 {
  color: #160f1d;
  width: 100%;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: .02rem;
  line-height: 1.8;
}
#top-main ul.point {
  width: max-content;
  height: 160px;
  margin: 43px 0 43px 24px;
}
#top-main ul.point li {
  float: left;
  height: 160px;
  width: 160px;
  background-color: #fff;
  border-radius: 50%;
  margin-right: 17px;
  text-align: center;
  padding-top: 79px;
  line-height: 26px;
  font-size: 19px;
  font-weight: 800;
  color: #007fd6;
  letter-spacing: 0.5px;
}
#top-main ul.point li:nth-child(1) { background: url(../img/top-main_usp1.png) #fff center 2rem no-repeat;}
#top-main ul.point li:nth-child(2) { background: url(../img/top-main_usp2.png) #fff center 1.5rem no-repeat;}
#top-main ul.point li:nth-child(3) { background: url(../img/top-main_usp3.png) #fff center 2rem no-repeat; margin-right: 0;}

@media screen and (max-width: 767px){
  #top-main {height:auto;padding: 13.5rem 0 0; background: #ffffff;}
  #top-main .m_inner{width:auto; padding: 0 15px;}
  #top-main .copy { float: none;}
  #top-main .logo {margin:0 auto 25px; width:70%; }
  #top-main ul.letter{width: 100%;}
  #top-main h1 {width: 380px; margin: 0 auto;}
  #top-main h2 { font-size: 3.75rem; line-height: 24px; margin: 2.4rem 0 0.4rem; text-align: center;}
  #top-main h3 { width: 100%; font-size: 2.7rem; background-size: 100%;}
  #top-main h3 span { font-weight: 700;}
  #top-main h3.c_ttl {
    font-size: 22px;
    font-weight: 600;
    line-height: 35px;
    text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff;
    margin-bottom: 23px;
  }
  #top-main h3.c_ttl {font-size: 18px; line-height: 25px;}
  #top-main h4 { display: none;}
  #top-main ul.point { height: 22rem; width: auto; margin:0px;}
  #top-main ul.letter li { width: 25%;}
  #top-main ul.point li {
    width: 32%;
    height: auto;
    font-size: 2.4rem;
    line-height: 3.7rem;
    margin-right: 2%;
    padding: 9rem 0 3rem;
  }
  #top-main ul.point li:nth-child(1) { background: url(../img/top-main_usp1.png) #fff center 3rem no-repeat; background-size: 39%;}
  #top-main ul.point li:nth-child(2) { background: url(../img/top-main_usp2.png) #fff center 1.5rem no-repeat; background-size: 33%;}
  #top-main ul.point li:nth-child(3) { background: url(../img/top-main_usp3.png) #fff center 2rem no-repeat; margin-right: 0; background-size: 33%;}
}

/*メインビジュアルのCTA*/
.contact {
  height: auto;
  width: 300px;
  font-weight: 700;
  color: #fff;
  margin: 5.5rem auto 0;
  text-align: center;
  position: relative;
}

.bottom-main a {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 1em 2em;
  width: 300px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  background-color: #FF5722;
  transition: 0.3s;
  border-radius: 50px;
}

.bottom-main a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -35px;
  transform: translateY(-50%);
  width: 70px;
  height: 2px;
  background-color: #00ADB5;
  transition: 0.3s;
}

.bottom-main a:hover {
  text-decoration: none;
  background-color: #bbbbbb;
}

.bottom-main a:hover::after {
  transform: translateX(3px);
}


.m_contact {
  float: right;
  height: auto;
  width: 640px;
  font-weight: 700;
  color: #fff;
  margin: auto 0;
  text-align: center;
  position: relative;
}

.top-area img { width: 85%;}
.m_contact .gentei {
  position: relative;
  padding: 0 0 .5rem 0;
  font-size: 2.2rem;
  color: #ffe421;
  text-align: center;
  border-bottom: 1px solid #ffe421;
  width: 88%;
  font-weight: 700;
  letter-spacing: .3rem;
  margin: 0 auto;
}
.gentei::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 8px 0 8px;
  border-color: #ffe421 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
}
.m_contact h5 {
  font-size: 2.6rem;
  padding: 1.5rem 0 2.2rem;
}
.m_contact p {
  font-size: 1.2rem;
  font-weight: normal;
  text-align: left;
  padding-left: 3.5rem;
}
.m_contact .mail {
  display: block;
  background: #e8c425;
  background-size: 200% 100.5%;
  background-position: right bottom;
  transition: all .5s ease-out;
  margin: 0 auto;
  padding: 2.6rem;
  position: relative;
  font-size: 2.2rem;
  letter-spacing: .1rem;
}
.m_contact .mail:hover {
  background-position: left bottom;
  background: #ffffff;
  color: #e8c425;
}

.m_contact i { position: absolute; right: 8%; top: 35%;}

@media screen and (max-width: 767px){
  .contact{ margin: 0 auto 3rem}
  .m_contact { padding: 0; margin: 0; width: 100%; height: auto; float: none;}
  .top-area { padding: 2.7rem 0 3.1rem;}
  .bottom-area { padding: 0; border-radius: 0;}
  .bottom-area a{   
    display: block;
    position: relative;
    margin: 0 auto;
    padding: 1em 2em;
    width: 200px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    background-color: #FF5722;
    transition: 0.3s;
    border-radius: 50px;}
  .bottom-main a::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -35px;
      transform: translateY(-50%);
      width: 70px;
      height: 2px;
      background-color: #00ADB5;
      transition: 0.3s;
  }
  .bottom-main a:hover {
      text-decoration: none;
      background-color: #bbbbbb;
    }
  .bottom-main a:hover::after {
      transform: translateX(3px);
    }
  .m_contact .gentei { font-size: 3rem; }
  .m_contact h5 { font-size: 3.4rem; margin-bottom: 1rem;}
  .m_contact img { max-width: 80%; }
  .m_contact .mail {
    width: 90%;
    position: absolute;
    left: 50%;
    margin-left: -45%;
    font-size: 3rem;
    padding: 3.5rem;
  }
  .m_contact p { font-size: 1.7rem;}
  .m_contact i { top: 38%;}
}

/*課題*/
#trouble { 
  width: 100%; height: auto; padding: 6rem 0 3rem;
  background: #EEEEEE;
  overflow: hidden;
}
#trouble h2.c_ttl {
  font-size: 30px; 
  color: #3b3b3b;
  height: 8rem;
  line-height: 48px;
  margin-bottom: 7rem;
  text-shadow: none;
}
#trouble h2.c_ttl span { color: #3b3b3b;}
#trouble .trouble {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding-bottom: 56px;
  width: 92%;
}
#trouble .trouble li {
  height: fit-content;
  background: #fff;

  padding: 4rem 5.8rem;
  color: #3b3b3b;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  letter-spacing: .1rem;
  position: relative;
}
#trouble .trouble li:nth-child(2) { margin-top: 30px; }
#trouble .trouble li:nth-child(1) { border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;}
#trouble .trouble li:nth-child(2) { border-radius: 30% 10% 50% 50%/50%;}
#trouble .trouble li:nth-child(3) { border-radius: 20% 40% 50% 40%/30% 50% 50% 50%;}
#trouble .trouble li p { line-height: 1.8;}
#trouble .trouble li span { font-size: 1.4em; font-weight: 600; color: #0f88da;}

@media screen and (max-width: 767px){
  #trouble {padding: 7rem 0 0; height: auto; overflow: hidden;}
  #trouble h2.c_ttl {margin-bottom: 20px; letter-spacing: 0px; height:auto; font-size: 26px;}
  #trouble .trouble {width: auto; margin: 0 auto 0; padding: 0 0 30px; display: block;}
  #trouble .trouble li { font-size: 2.5rem; height: auto; width: 80%; margin: 0 0 40px; padding: 13px;}
  #trouble .trouble li:nth-child(1) {margin-left: 20%;}
  #trouble .trouble li:nth-child(1) img{bottom: -20px; left: -50px;}
  #trouble .trouble li:nth-child(2) {margin-right: 20%;}
  #trouble .trouble li:nth-child(2) img{bottom: -20px; right: -50px;}
  #trouble .trouble li:nth-child(3) {margin-left: 20%;}
  #trouble .trouble li:nth-child(3) img{bottom: -20px; left: -50px;}
  #trouble .trouble img { max-width: 30%;}
}

/*タイピング用*/
.TextTyping span {
	display: none;
}

.TextTyping {
  font-size: 30px;
  color: #343434;
}

.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}
/*タイピング用*/

.type1 {background: #EEEEEE;position: relative;}
.type1::after {  
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 80px 50vw 0 50vw;
  border-color: #EEEEEE transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  }

/*解決*/
#solution {
  width: 100%;
  height: auto;
  padding: 8rem 0 0;
  background: #00ADB5;
  overflow: hidden;
}

#solution h2.c_ttl {
    color: #fff;
    height: auto;
    margin: 5rem auto 3.8rem;
}
#solution h3 {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .1rem;
  text-align: center;
  margin-bottom: 4rem;
}
#solution .solution {
  display: flex;
  justify-content: space-between;
  margin: 0 auto 4rem;
  width: 100%;
}
#solution .solution li {
  width: 100%;
  height: 360px;
  margin: 3rem 0;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-align: center;
}
#solution .solution li p { line-height: 1.8;}
#solution .solution li span { font-size: 1.4em; font-weight: 800; padding: 0 .4rem;}
#solution .solution li:nth-child(1) {
  background: url(../img/solution_back01.png) top center no-repeat; 
  background-size: contain;
}
#solution .solution li:nth-child(2) {
  background: url(../img/solution_back02.png) top center no-repeat; 
  background-size: contain;
}
#solution .solution li:nth-child(3) {
  background: url(../img/solution_back03.png) top center no-repeat;
  background-size: contain;
}
#solution .solution li p:nth-child(1) { margin-bottom: 0rem; font-size: 2rem;}
#solution .solution li p:nth-child(2) { margin-bottom: 1rem; font-size: 3.2rem; color: #fbd317; font-weight: 700;}

#solution .seo-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px;
  width: auto;
  height: auto;
  text-align: center;
  margin: 0 auto 80px;
}
#solution .seo-menu li {
  background: #fff;
  border-radius: 50%;
  height: auto;
  width: 240px;
  padding-top: 2rem;
  margin-bottom: 1.4rem;
  letter-spacing: .1rem;
}
#solution .seo-menu li p { font-size: 18px; font-weight: 500;}
#solution .seo-menu li p:nth-child(1) { color: #036eb8;}
#solution .seo-menu li p:nth-child(3) { color: #3b3b3b; font-size: 15px; padding: 0.5rem 2.5rem 3.5rem ;}
#solution .seo-menu li img { width: 30%; display: block; margin: 1.5rem auto 2rem; -webkit-backface-visibility: hidden;}
#solution .seo-menu li { color: #FF5722;}

@media screen and (max-width: 767px){
  #solution h3 { font-size: 3.4rem;}
  #solution .solution { flex-direction: column; }
  #solution .solution li { width: 100%; height: 57rem; margin: 3rem 0 1rem;}
  #solution .seo-menu li p { font-size: 2.6rem;}
  #solution .solution li p:nth-child(1) { margin-bottom: 0rem; font-size: 3.3rem;}
  #solution .solution li p:nth-child(2) { margin-bottom: 1rem; font-size: 5.2rem; color: #fbd317; font-weight: 700;}

  #solution .seo-menu { width: auto; margin-bottom: 60px; justify-content: space-around;}
  #solution .seo-menu li { height: auto; width: 48%; margin-bottom: 1.6rem;}
  #solution .seo-menu li p:nth-child(3) { font-size: 2rem; padding: 7px 0; padding: 0.5rem 2.5rem 3.5rem ;}
}

.solution-txt {
	position: relative;
	font-size: 26px;
}

.solution-txt::before {
	content: attr(data-number);
	display: block;
	margin-bottom: 30px;
	color: #FF5722;
	font-size: 30px;
}

.solution-txt::after {
	content: '';
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 20px;
	background-color: #FF5722;
}

/*他社比較*/
#comparison { width: 100%; height: auto; padding: 8rem 0 30rem;
  background:
  radial-gradient(circle, transparent 20%, #41c2e2 20%, #41c2e2 80%, transparent 80%, transparent),
  radial-gradient(circle, transparent 20%, #41c2e2 20%, #41c2e2 80%, transparent 80%, transparent) 50px 50px,
  linear-gradient(#fff 8px, transparent 8px) 0 -4px,
  linear-gradient(90deg, #fff 8px, transparent 8px) -4px 0;
  background-color: #41c2e2;
  background-size:30px 30px, 30px 30px, 20px 20px, 20px 20px;
  overflow: hidden;
}
#comparison h2.c_ttl { color: #fff;}
#comparison .table-bg {
  width: auto;
  margin: 0 auto;
  padding: 50px 60px 55px;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
}
#comparison .table-bg img.icon { position: absolute; top: 38px; left: 150px;}
#comparison .table-bg img { -webkit-backface-visibility: hidden;}
#comparison .table-bg p {
  margin-left: 90px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}
#comparison .table-bg p span.one-stop { font-size: 25px; font-weight: 800; color: #ffb608; position: relative;}
#comparison .table-bg p span.one-stop:before {
  content: "・";
  speak: none;
  display: inline-block;
  position: absolute;
  top: -17px;
  left: 3px;
  font-size: 1.7rem;
  color: rgb(251, 198, 14);
}
#comparison .table-bg p span.pick-blue { font-size: 22px; font-weight: 700; color: #1696e8;}
#comparison .table-img {
  width: auto;
  height: auto;
  margin: 2rem auto 0;
  /*background: url(../img/comparison_table.png);*/
}

@media screen and (max-width: 767px) {
  #comparison { padding-bottom: 8rem;}
  #comparison .table-bg {width: 100%; padding: 30px 20px;}
  #comparison .table-bg p { margin: 0; font-size: 3rem;}
  #comparison .table-img { width: 100%; height: auto;}
  #comparison .table-bg img{position: static;}
  #comparison .table-bg p span.one-stop { font-size: 23px;}
  #comparison .table-bg p span.one-stop:before { top: -8px; left: 5px; font-size: 2.2rem;}
  #comparison .table-bg p span.pick-blue { font-size: 3.1rem; }
}

/*中間CTA*/
.c_contact {
  padding: 6rem;
  background: /*url(../img/cta-bg.gif) repeat*/#02568f;
  width: 1080px;
  height: auto;
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  margin: -18.5rem auto;;
  z-index: 2;
  box-shadow: rgb(20 20 20 / 40%) 0 5px 5px;
  outline: 1px solid rgb(255, 255, 255);
  outline-offset: -30px;
}
.c_contact .cta-top { /*margin: 0 auto 2rem;*/ }
.c_contact p { text-align: center; }
.c_contact p.cta-txt1 {
  font-size: 3.3rem;
  font-weight: 700;
  letter-spacing: .2rem;
  text-indent: -8rem;
}
.c_contact p.cta-txt2 {
  font-size: 1.6rem;
  letter-spacing: .1rem;
  text-indent: -8rem;
}
.c_contact p.cta-txt3 {
  font-size: 1rem;
  margin-top: 1.6rem;
}
/* リボン */
.c_contact .cta-gentei {
  display: block;
  position: absolute;
  top: 52px;
  left: 0;
  margin: .6rem auto;
  }
.ribbon {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: .9rem 0;
  margin: 0 0 0 -20px;
  width: calc(100% + 20px);
  color: white;
  background: #f9a732;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.ribbon p{
  margin: 0;
  padding: 0 30px 0 15px;
  border-top: solid 1px #FFF;
  border-bottom: solid 1px #FFF;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: .1rem;
  line-height: 3;
}
.ribbon:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 44px 15px 44px 0px;
  border-color: transparent #02568f transparent transparent;
  border-style: solid;
}
.ribbon:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #9e6c24;
}
.c_contact .cta-report { position: absolute; top: -43px; right: -61px;}

.c_contact .mail a {
  display: block;
  background: linear-gradient(to right, #fff 50%, #d80000  50%);
  background-size: 200% 100.5%;
  background-position: right bottom;
  transition: all .5s ease-out;
  position: relative;
  border: 4px solid #fff;
}
.c_contact .mail a:hover {
  background-position: left bottom;
  color: #d80000;
  transition: all .5s ease-in;
  border: 4px solid #d80000;
}
.c_contact .tel { margin: 3rem 4rem 0 4.5rem;}
.c_contact p.tel-midashi {
  background: #fff;
  color: #035289;
  font-size: 1.5rem;
  font-weight: 600;
  padding: .3rem;
  margin-bottom: 1rem;
  border-radius: 50px;
}
.c_contact .tel a {
  display: block;
  font-size: 4.6rem;
  font-weight: 900;
  letter-spacing: .04em;
  background: url(../img/ico_fd04.svg) no-repeat left 0.12em/6rem;
  line-height: 1;
  padding-left: 1.6em;
}

.c_contact .tel small {
  display: block;
  font-size: 1.5rem;
  border-top: solid 1px #afadb2;
  border-bottom: solid 1px #afadb2;
  padding: .1em 0;
  margin-top: .6rem;
  text-align: center;
  letter-spacing: 0.1rem;
}

@media screen and (max-width: 767px){
  .sp_contact {
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
    font-weight: 700;
    color: #fff;
    text-align: center;
    position: relative;
  }
  .top-area { padding: 2.7rem 0 3.5rem; border-radius: 0;}
  .sp_contact .gentei {
    position: relative;
    padding: 0 0 .5rem 0;
    font-size: 3rem;
    color: #ffe421;
    text-align: center;
    border-bottom: 1px solid #ffe421;
    width: 88%;
    font-weight: 700;
    letter-spacing: .3rem;
    margin: 0 auto;
  }
  .sp_contact h5 { font-size: 3.4rem; margin-bottom: 1rem; padding: 1.5rem 0 2.2rem;}
  .sp_contact img { max-width: 80%; }
  .sp_contact .mail {
    display: block;
    background: linear-gradient(to right, #fff 50%, #d80000 50%);
    background-size: 200% 100.5%;
    background-position: right bottom;
    transition: all .5s ease-out;
    margin: 0 auto;
    border: 4px solid #fff;
    border-radius: 50px;
    letter-spacing: .1rem;
    width: 90%;
    font-size: 3rem;
    padding: 4rem;
    position: relative;
  }
  .sp_contact p { font-size: 1.7rem; margin-bottom: 2rem;}
  .sp_contact .mail i { position: absolute; right: 8%; top: 38%;}
}

@media screen and (min-width: 768px) {
  .c_contact .mail {
    display: inline-block;
    vertical-align: top;
    margin: 3rem 0 0 0;
    position: relative;
  }
  .c_contact .mail a {
    font-size: 24px;
    font-weight: 700;
    padding: 3.6rem 6.3rem;
    box-shadow: 0px 5px 15px #363e73;
  }
  .c_contact .tel { display: inline-block; vertical-align: top; position: relative;}
}

/*料金プラン*/
#price { width: 100%; height: auto; padding: 8rem 0 10rem; overflow: hidden;}
#price h2.c_ttl { color: #00436e; position: relative; width: max-content;}
#price h2.c_ttl:before, #price h2.c_ttl:after {
  content: '';
  position: absolute;
  top: 52%;
  display: inline-block;
  width: 43px;
  height: 3px;
  background-color: #f5ab16;
}
#price h2.c_ttl:before { left:-60px; 
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);}
#price h2.c_ttl:after { right: -60px; 
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);}
#price ul {
  width: max-content;
  text-align: center;
  color: #00436e;
  font-weight: 600;
  margin: 100px auto 0;
  height: auto;
}
#price ul li {
  width: 250px;
  height: auto;
  background: #f7f7f7;
  float: left;
  padding-bottom: 36px;
  margin-right: 37px;
  border-radius: 10px;
  box-shadow: 0px 5px 15px #ddd;
  position: relative;
}
#price ul li:first-child img { position: absolute; top: -76px; left: 77px;}
#price ul li:nth-child(2) { margin-top: 20px;}
#price ul li:last-child { margin: 20px 0 50px;}
#price ul li h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border-radius: 10px 10px 0 0;
  padding: 18px;
  margin-bottom: 32px;
}
#price ul li:nth-child(1) h4 { background: url(../img/price_h4-1.gif) repeat; }
#price ul li:nth-child(2) h4 { background: url(../img/price_h4-2.gif) repeat; }
#price ul li:nth-child(3) h4 { background: url(../img/price_h4-3.gif) repeat; }
#price ul li p { font-size: 18px; margin-bottom: 24px; }
#price ul li p:last-child {margin-bottom:0px;}
#price ul li p span { font-style: italic; font-weight: 900; margin-right: 3px;}
#price ul li p span.big1 { font-size: 2em;}
#price ul li p span.big2 { font-size: 1.6em;}
#price ul li p span.orange_line{color: #0f88da;}
#price .price-box { 
  clear: both;
  width: 830px;
  height: 124px;
  margin: 0 auto;
  background: #f7f7f7;
  border-radius: 10px;
  box-shadow: 0px 5px 15px #ddd;
  padding: 22px 30px 0;
  position: relative;
}
#price .price-box img { position: absolute; top: -34px; left: -43px;}
#price .price-box p {
  float: left;
  font-size: 16px;
  color: #333;
  line-height: 5;
  margin-right: 16px;
}
#price .price-box div { float: left; width: 354px;}

@media screen and (max-width: 767px) {
  #price h2.c_ttl { font-size: 4.5rem;}
  #price ul { width: 100%;}
  #price ul li { width: 100%; margin-right: 0;}
  #price ul li:first-child img { left: 36%;}
  #price .price-box { width: 100%; padding: 22px 30px; height: auto;}
  #price .price-box p { float: none; line-height:1.5; margin: 0 0 15px; text-align: center;}
  #price .price-box div { float: none; width: 100%;}
}

/*問い合わせの流れ*/
#flow {
  width: 100%;
  height: auto;
  padding: 18rem 0 18rem;
  overflow: hidden;;
  background: #ffffff;
  background-image:
  repeating-linear-gradient(to bottom,
    transparent 25px,
    rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
    transparent 27px,  transparent 51px, 
    rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
    transparent 53px,  transparent 77px, 
    rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
    transparent 79px,  transparent 103px, 
    rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
    transparent 105px,  transparent 129px, 
    rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),

  repeating-linear-gradient(to right,
    transparent 25px,
    rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
    transparent 27px,  transparent 51px, 
    rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
    transparent 53px,  transparent 77px, 
    rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
    transparent 79px,  transparent 103px, 
    rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
    transparent 105px,  transparent 129px, 
    rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}
#flow h2.c_ttl {
  position: relative;
  margin-bottom: 80px;
  font-size: 5rem;
  color: #717171;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 736px) {
  #flow h2.c_ttl {
    margin-bottom: 6.133333333333333vw;
    font-size: 8vw;
    line-height: 1.2;
  }
}

#flow h2.c_ttl:after {
  content: ' ';
  position: absolute;
  top: -90px;
  right: -374px;
  left: 0;
  width: 345.2px;
  height: 159.28px;
  margin: auto;
  background-image: url("../images/flow.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 736px) {
  #flow h2.c_ttl:after {
    top: -11.2vw;
    right: -56vw;
    width: 33.06666666666666vw;
    height: 20.8vw;
  }
}
#flow ul {
  background: url(../img/flow_back.png) center 12rem no-repeat;
  width: 90%;
  margin: 0 auto;
}
#flow ul:after { display: none;}
#flow li { position: relative; margin-right: 4vw;}
#flow li:last-child{ margin-right:0;}
#flow li::before{
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2vw;
  border-color: transparent transparent transparent #00ADB5 ;
  position: absolute;
  top: 50%;
  left: -3.5vw;
  transform: translateY(-50%);
}
#flow li:first-child::before {
  content: none;
}

@media screen and (max-width: 767px) {
#flow li::before{
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 19px 35px 0 35px;
  border-color: #00ADB5 transparent transparent transparent;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
}

#flow span { color: #FF5722; font-weight: bold; font-size: 2.2rem; letter-spacing: .2rem;}
#flow ul li img {
  width: 150px;
  position: absolute;
  top: 65%;
  left: 80%;
  z-index: 1;
}
@media screen and (max-width: 767px){
#flow ul li img {
  width: 110px;
  position: absolute;
  top: 70%;
  left: 80%;
  z-index: 1;
}
}
#flow li + li { position: relative;}
#flow dl {
  color: #2e3165;
  background: #fff;
  height: auto;
  padding: 2rem 1.5rem;
}
#flow dt {
  text-align: center;
  font-size: 2rem;
  line-height: 1.6;
  margin: 1.5rem 1rem 0.5rem;
  padding-bottom: 0.4rem;
}
#flow dd {
  font-size: 1.5rem;
  line-height: 1.7;
  font-weight: 500;
}

@media screen and (max-width: 767px) {
  #flow {padding: 9rem 0 7rem;}
  #flow ul { background: none; width: 100%;}
  #flow li { padding: 25px;}
  #flow li + li { margin-top:0;}
  #flow span { font-size: 3rem;}
  #flow dl { margin-top: 0; height:auto; background: #f7f7f7; padding: 4rem;}
  #flow dt { font-size: 2.6rem; padding-bottom: 15px;}
  #flow dd { font-size: 2.5rem;}
}

@media screen and (min-width: 768px) {
  #flow ul {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
  }
  #flow ul > * { flex-basis: 20rem; max-width: 20rem;}
  #flow dd { padding: 0 2rem;}
}

/*お客様の声*/
#voice { width: 100%; height: auto; padding: 18rem 0 18rem}
#voice h2.c_ttl {
  position: relative;
  margin-bottom: 80px;
  font-size: 5rem;
  color: #717171;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  text-shadow: 3px 3px 3px rgba(255,255,255,0.7);
}

@media screen and (max-width: 736px) {
  #voice h2.c_ttl {
    margin-bottom: 6.133333333333333vw;
    font-size: 8vw;
    line-height: 1.2;
  }
}

#voice h2.c_ttl:after {
  content: ' ';
  position: absolute;
  top: -90px;
  right: -374px;
  left: 0;
  width: 345.2px;
  height: 159.28px;
  margin: auto;
  background-image: url("../images/voice.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 736px) {
  #voice h2.c_ttl:after {
    top: -11.2vw;
    right: -56vw;
    width: 33.06666666666666vw;
    height: 20.8vw;
  }
}
#voice ul h4 { color: #00ADB5; font-weight: bold; font-size: 2.2rem;}
#voice li { position: relative;}
#voice li .voice-box {
    border: 4px #00ADB5 solid;
    border-radius: 50px;
    padding: 25px;
    margin-bottom: 24px;
}

#voice li .voice-box p {
    color: #1a1a1a;
    font-size: 1.6rem;
    line-height: 1.5;
    margin: 1em 0 1em;
    height: auto;
}
#voice li small.g_ft {
    font-size: 1.5rem;
    margin-left: 8%;
    width: 52%;
    float: right;
}
.name { font-size: 1.3rem;}
.name img { width: 40%; float: left;}

@media screen and (max-width: 767px) {
  #voice { padding: 7rem 0 5rem;}
  #voice ul h4 { font-size: 3.2rem;}
  #voice li .voice-box { padding: 30px 25px;}
  #voice li .voice-box p { font-size: 2.6rem; margin: 1em 0 0;}
  #voice li { position: relative;}
  #voice li:nth-child(2) { margin-top: 20px;}
  #voice li:nth-child(3) { margin-top: 20px;}
  #voice li i { font-size: 6.2rem; margin-bottom: .1em;}
  #voice li img { width: 40%; right: 0; top: 0; position: static;}
  #voice li small.g_ft {    font-size: 2.5rem;    letter-spacing: -1px;    margin-left: 6%;    width: 54%;    float: right;}
  #voice li p { height: auto; font-size: 2.6rem; }
  .name { margin: 2rem 0;}
  .name:after { display: block; clear: both; content: "";}
}

@media screen and (min-width: 768px) {
  #voice ul > * { float: left; margin-left: 5%; width: 30%;}
  #voice ul > *:nth-child(4n + 1) { margin-left: 0; clear: both;}
}


/*よくある質問*/
#faq {
  width: 100%;
  height: auto;
  padding: 18rem 0 18rem
  overflow: hidden;
  background: #fff;
}
/*
#faq h2.c_ttl { color: #000;}
*/
#faq h2.c_ttl {
  position: relative;
  margin-bottom: 80px;
  font-size: 5rem;
  color: #717171;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.05em;
  text-shadow: 3px 3px 3px rgba(255,255,255,0.7);
}

@media screen and (max-width: 736px) {
  #faq h2.c_ttl {
    margin-bottom: 6.133333333333333vw;
    font-size: 8vw;
    line-height: 1.2;
  }
}

#faq h2.c_ttl:after {
  content: ' ';
  position: absolute;
  top: -90px;
  right: -374px;
  left: 0;
  width: 255.2px;
  height: 159.28px;
  margin: auto;
  background-image: url("../images/faq.png");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 736px) {
  #faq h2.c_ttl:after {
    top: -11.2vw;
    right: -56vw;
    width: 33.06666666666666vw;
    height: 20.8vw;
  }
}

/*よくある質問の中*/

.question__wrap {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-line-pack: start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
  -webkit-box-align: start;
  -moz-box-align: start;
  -o-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 85%;
  max-width: 1462px;
  padding: 0 30px;
  margin: 0 auto 107px;
}
@media screen and (max-width: 736px) {
  .question__wrap {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 89.33333333333333vw;
    max-width: initial;
    padding: 0;
    margin: 0 auto 10.133333333333333vw;
    }
  }
  
.question__part {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-line-pack: start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
  -webkit-box-align: start;
  -moz-box-align: start;
  -o-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 43%;
}
@media screen and (max-width: 736px) {
  .question__part {
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -o-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
  }
}

.question__part:last-child {
  width: 100%;
}
.question__part:last-child .question__block {
  width: 100%;
}

.question__part:last-child .question__block .question__a {
  margin-bottom: 0;
}

.question__block {
  position: relative;
  width: 100%;
}
@media screen and (max-width: 736px) {
  .question__block {
    width: 100%;
  }
}
.question__block__wrap {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

@media screen and (max-width: 736px) {
  .question__block__wrap {
    display: none;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.question__block--left,
.question__block--right {
  width: 43%;
}

@media screen and (max-width: 736px) {
  .question__block--left,
  .question__block--right {
    width: 100%;
  }
}
.question__block--right {
  margin-top: 87px;
}
@media screen and (max-width: 736px) {
  .question__block--right {
    margin-top: 3.466666666666667vw;
  }
}
@media screen and (max-width: 736px) {
  .question__block--open .question__q--more:after {
    display: none;
  }
}
.question__q {
  margin-bottom: 12px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: color_block;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  .question__q {
    position: relative;
    margin-bottom: 0.533333333333333vw;
    font-size: 4.266666666666667vw;
    cursor: pointer;
  }
}

@media screen and (max-width: 736px) {
  .question__q--more {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 5.333333333333333vw;
    width: 5.333333333333333vw;
    height: 5.333333333333333vw;
    margin: auto;
    cursor: pointer;
  }
}
/* 
@media screen and (max-width: 736px) {
  .question__q--more:before {
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 3.2vw;
    height: 2px;
    margin: auto;
    background-color: #000;
  }
}
@media screen and (max-width: 736px) {
  .question__q--more:after {
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 3.2vw;
    height: 2px;
    margin: auto;
    background-color: #000;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
 */
 @media screen and (max-width: 736px) {
.question__q--more::before,
.question__q--more::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;  
}
}

@media screen and (max-width: 736px) {
  .question__q--more::before{
   top:48%;
   left: 15px;
   transform: rotate(0deg);
 }
 }
 
 @media screen and (max-width: 736px) {
 .question__q--more::after{    
   top:48%;
   left: 15px;
   transform: rotate(90deg);
 
 }
 }
 @media screen and (max-width: 736px) {
   .question__q--more.close::before{
     transform: rotate(45deg);
   }
 }
 
 @media screen and (max-width: 736px) {
   .question__q--more.close::after{
    transform: rotate(45deg);
   }
 }
 

.question__q--green {
  margin-right: 5px;
  font-size: 1.4em;
  color: #fbd317;
}
@media screen and (max-width: 736px) {
  .question__q--green {
    font-size: 1.2em;
  }
}
.question__a {
  position: relative;
  margin-bottom: 80px;
  font-size: 1.4rem;
  line-height: 1.8;
  color: #717171;
  font-weight: bold;
}
@media screen and (max-width: 736px) {
  .question__a {
    margin-bottom: 3.2vw;
    padding-left: 7.2vw;
    padding-right: 5.333333333333333vw;
    font-size: 3.733333333333333vw;
    line-height: 2;
  }
}

.question__a--space {
  display: block;
  margin-bottom: 12px;
}
@media screen and (max-width: 736px) {
  .question__a--space {
    margin-bottom: 1.866666666666667vw;
  }
}

/*元々のよくある質問

#faq dl {
  padding: 0 3rem;
  background: #fff;
  margin: 0 0 1rem;
}
#faq dt {
  font-size: 2.3rem;
  padding: 3.5rem 0 3.5rem 7rem;
  cursor: pointer;
  position: relative;
  font-weight: bold;
}
#faq dt.open:after { background-image: url(../img/ico_up.png);}
#faq dt.open + dd { display: block;}
#faq dt:before {
  content: '';
  position: absolute;
  background: url(../img/ico_q.png) no-repeat center center/contain;
  top: 3rem;
  left: 0;
  height: 4rem;
  width: 4rem;
}
#faq dt:after {
  content: '';
  position: absolute;
  background: url(../img/ico_down.png) no-repeat center center/contain;
  right: 0;
  height: 40px;
  width: 40px;
}
#faq dd {
  line-height: 2;
  padding: 3.7rem 0 3.7rem 7rem;
  border-top: solid 1px #cccccc;
  display: none;
  position: relative;
}
#faq dd:before {
  content: '';
  position: absolute;
  background: url(../img/ico_a.png) no-repeat center center/contain;
  top: 4rem;
  left: 0;
  height: 4rem;
  width: 4rem;
}

@media screen and (max-width: 767px) {
  #faq { padding-top: 7.5rem;}
  #faq dl { margin: 0 0 2.5rem;}
  #faq dt { font-size: 2.6rem; padding: 2.6rem 6rem 2.6rem 7rem;}
  #faq dt:before {
    content: '';
    position: absolute;
    background: url(../img/ico_q-sp.png) no-repeat center center/contain;}
  #faq dt:after {
    width: 4rem;
    height: 4rem;
    top: 2.7rem;
    right: 0;
    background: url(../img/ico_down-sp.png) no-repeat center center/contain;
  }
  #faq dd { font-size: 2.4rem;}
  #faq dd:before {
    content: '';
    position: absolute;
    background: url(../img/ico_a-sp.png) no-repeat center center/contain;}
  #faq dt.open:after {
    background-image: url(../img/ico_up-sp.png);}
  .endcta {
    background: none;
    height: 15rem;
    padding-top: 5rem;
  }
  .endcta li { margin: 0 -0.2rem;}
}

*/

/* 会社概要 */
#company { padding: 6.5rem 0 6.5rem; }
#company h2.c_ttl {
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    color: #000;
    line-height: 59px;
    letter-spacing: 0.5rem;
    margin-bottom: 3rem;
}
#company table {
  width: 85%;
  border-collapse: collapse;
  margin: 0 auto;
}
#company table tr { border-bottom: solid 2px white;}
#company table tr:last-child{ border-bottom: none;}
#company table th {
  position: relative;
  text-align: left;
  width: 23%;
  background-color: #73a9cf;
  color: white;
  text-align: center;
  vertical-align: middle;
  padding: 10px 0;
}
#company table th:after {
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #73a9cf;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
#company table td {
  text-align: left;
  width: 70%;
  background-color: #eee;
  padding: 13px 0;
  text-indent: 40px;
}

@media screen and (max-width: 767px){
  #company h2.c_ttl {font-size:5rem;}
  #company table {width: 100%; font-size: 2.2rem;}
  #company table th {width: 20%;}
  #company table td {padding: 13px 23px; text-indent: 0px;}
}

/* SP用追尾CTA */
.rem {
  width: 19px;
  margin: none;
  display: inline;
}
.g-ka { background: none; height: 15rem !important;}

@media screen and (max-width: 767px){
  .top_main { background-image: url(../img/mv_img-g-sp.jpg); height: 80rem;}
  .top_main ul { display: flex; }
  .top_main li:last-child { position: relative!important; }
  .top_main li { display: inline-block; font-size: 2.3rem; }
  .top_main li a { text-align: center; display: block; color: #fff; line-height: 8.2rem; letter-spacing: .05em; }
  .top_main li .tel { background: #059d5a; }
  .top_main li .mail { background: #d80000; letter-spacing: 0.1em; }
  .top_main li .chat { background: #036EB8; }
}


@media screen and (min-width: 768px){
.sp-only{ display: none !important;}
}

@media screen and (max-width: 767px){
.pc-only{ display: none !important;}
}


/*SP CSS*/
@media screen and (max-width: 767px){
  a.btn--orange{height: auto; width: 100%; top: 0;}
  a.btn--red.btn--cubic {height: auto; width: 90%; top: 0;}
  /*a.btn--red.btn--cubic:hover {height: auto; width: 100%; top: 0;}*/

/*SPの電話番号ボタン*/
.tel2 a.btn--red.btn--cubic {
  color: #fff;
  background: #059d5a;
  line-height: 5rem;
  font-size: 2.8rem;
  border: 4px solid #fff;
}

.tel2 a.btn--red.btn--cubic i.fa-position-left {
  font-size: 3rem;
  left: 14rem;
  top: 2.7rem;
}

.tel2 a.btn--red.btn--cubic .number {
  /*line-height: 1;*/
  display: inline-block;
  margin-left: 1rem;
  padding: 0.5rem 1.8rem 0.9rem;
  letter-spacing: 0;
  color: #059d5a;
  border-radius: 0.5rem;
  background: #fff;
  font-size: 2.2rem;
}

.tel2 .fa-position-left {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 1rem;
}

.tel2 .fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}

.tel3 a {
  margin-top: 10px;
}
.tel3 a:hover {
  margin-top: 10px !important;
}

}

/*************************** form **************************/
#header_form { position: static!important;}
#form { padding: 0 0 3rem;}
#form .form-cta-bg {
  background: #025085;
  width: 100%;
  margin: 0 auto;
}
#form .form-cta {
  width: 1000px;
  margin: 0 auto;
  padding: 3.5rem 0;
  color: #fff;
  text-align: center;
  position: relative;
}
@media screen and (max-width: 767px){
  #form .form-cta {
    width: 100%;
  }
}
/* 縦リボン 始*/
.form-gentei {  
  display: block;
  position: absolute;
    top: -10px;
    left: 60px;
  }

.ribbon2 {  
  display: inline-block;
  position: relative;
  top: -6px;
  right: 10px;
  margin: 0;
  padding: 0 1rem;
  z-index: 2;
  width: 130px;
  text-align: center;
  color: white;
  font-size: 17px;
  border-radius: 2px 0 0 0;
  box-sizing: border-box;
  margin: 0 0 0 -20px;
  background: #f9a732;
  box-shadow: 0 2px 0 rgb(0 0 0 / 20%);
  }

.ribbon2:before {
  position: absolute;
  content: '';
  top: 0;
  right: -16px;
  border: none;
  border-bottom: solid 16px #9e6c24;
  border-right: solid 16px transparent;
}
.ribbon2:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 65px solid #f9a732;
  border-right: 65px solid #f9a732;
  border-bottom: 20px solid transparent;
}
.ribbon2 p {
    margin: 0;
    padding: 2.9rem.5rem;;
    border-left: solid 1px #FFF;
    border-right: solid 1px #FFF;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .1rem;
    line-height: 1.3;
}
.ribbon2 p span { font-size: 2.8rem; }
/* 縦リボン 終*/

#form .form-cta .cta-report {
    position: absolute;
    top: -63px;
    right: -92px;
    margin: 3rem 4rem 0 4.5rem;
}

#form .form-cta .cta2-txt1 {
    font-size: 3.3rem;
    font-weight: 700;
    letter-spacing: .2rem;
    margin-bottom: .3rem;
}
#form .form-cta .cta2-txt2 {
    font-size: 1.6rem;
    letter-spacing: .1rem;
    margin-bottom: 3rem;
}
#form .form-cta .cta2-txtarea {
    display: inline-block;
    border-top: #fff 1px solid;
    border-bottom: #fff 1px solid;
    padding: 2.4rem 0;
    margin-right: 3rem;
}
#form .form-cta .cta2-txtarea p:nth-child(1) {
    font-size: 1.4rem;
    letter-spacing: .13rem;
    margin-bottom: 1rem;
}
#form .form-cta .cta2-txtarea p:nth-child(2) {
    font-size: 1rem;
}
#form .form-cta .tel {
    display: inline-block;
    vertical-align: top;
    position: relative;
}
#form .form-cta p.tel-midashi {
    background: #fff;
    color: #035289;
    font-size: 1.4rem;
    font-weight: 600;
    padding: .2rem;
    margin-bottom: .3rem;
    border-radius: 50px;
}
#form .form-cta .tel a {
    display: block;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: .04em;
    background: url(../img/ico_fd04.svg) no-repeat left 0.12em/5rem;
    line-height: 1;
    padding-left: 1.5em;
}
#form .form-cta .tel small {
    display: block;
    font-size: 1.2rem;
    border-top: solid 1px #afadb2;
    border-bottom: solid 1px #afadb2;
    padding: .1em 0;
    margin-top: .6rem;
    text-align: center;
    letter-spacing: 0.1rem;
}
#form h2 { 
  margin: 0 auto;
  font-size: 36px;
  font-weight: 600;
  color: #333;
  text-align: center;
}
#form .step {
  display: block;
  margin: 3rem auto 1rem;
  padding: 0 4rem;
}
#form form {
  background-color: #f7f7f7;
  width: 59%;
  padding: 6rem 11rem 7rem;
  margin: 1.4rem auto 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0px 5px 15px #ddd;
}
#form table{
  /*width: auto;*/
  margin: 1.6rem auto 0 auto;
  border-collapse: collapse;
}
#form table th{
  font-weight: normal;
  width: 29%;
  font-size: 1.8rem;
  color: #2b2b2b;
  text-align: left;
  padding: 1em 0 0 0;
  box-sizing: border-box;
}
#form table th div{
  display: flex;
    justify-content: left;
    align-items: center;
  position: relative;
  font-weight: 500;
}
#form table th p.hissu{
  background: #FFF;
  font-size: 1.4rem;
  color: #fff;
  background-color: #f56a16;
  padding: 0.3rem 1.2rem;;
  border-radius: 0.6rem;
  position: absolute;
  right: 10%;
}


/* ボックスボタンデザイン風のラジオボタン*/
#form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.radio-inline__input {
    position: absolute;
    top: 3.6rem;
    width: 3.5rem;
}
.radio-inline__label {
    padding: 1.2rem 1.6rem 1.2rem 3rem;
    margin-right: 1rem;
    border-radius: 5px;
    transition: all .2s;
    background: #eee;
    border: 1px solid #ddd;
    cursor: pointer;
}
.radio-inline__input:checked + .radio-inline__label {
    background: #d9eaf9;
    /*color: #fff;*/
    text-shadow: 0 0 1px rgba(0,0,0,.7);
}
.radio-inline__input:focus + .radio-inline__label {
    outline-color: #4D90FE;
    outline-offset: 0px;
    outline-style: auto;
    outline-width: 5px;
}

/*プライバシーポリシー*/
.formSection__contents__privacy {
    text-align: center;
    background: #eee;
    border-radius: 5px;
    font-size: 1.3rem;
    margin-top: 2rem;
}
.formSection__contents__privacy input {
    margin-right: .5em;
    vertical-align: -.1em;
}
.formSection__contents__privacy a {
    text-decoration: underline;
}

/* 元々のチェックボックス（非表示） */
.formSection__contents__privacy input[type="checkbox"]{
    display: none;
}
/* チェックボックスの代わりを成すラベル */
.formSection__contents__privacy input[type="checkbox"]+label{
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: 1.5em;
    width: 100%;
}
/* ラベルの左に表示させる正方形のボックス□ */
.formSection__contents__privacy input[type="checkbox"]+label::before{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 15px;
    height: 15px;
    margin-top: -6px;
    left: 50%;
    top: 50%;
    border: 1px solid;
    border-radius: 2px;
    border-color: #767676; /* 枠の色変更 お好きな色を */
    background-color: #ffdadd; /* 背景の色変更 お好きな色を */
    margin-left: -12rem;
}
.formSection__contents__privacy input[type="checkbox"]:checked+label::before{
    border-color: #0075ff;
    background: #0075ff;
  }
/* チェックが入った時のレ点 */
.formSection__contents__privacy input[type="checkbox"]:checked+label::after{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 11px;
    height: 6px;
    margin-top: -3px;
    top: 50%;
    left: 50.5%;
    transform: rotate(-45deg);
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color: #fff; /* チェックの色変更 お好きな色を */
    margin-left: -12rem;
}
 /*
@media screen and (max-width: 767px){
  .formSection__contents__privacy input[type="checkbox"]+label::before{ margin-left: -19rem;}
  .formSection__contents__privacy input[type="checkbox"]:checked+label::after{ margin-left: -19rem;}
}
*/

/*送信ボタン*/
input[type="text"],input[type="tel"],input[type="url"],input[type="email"]{
  padding: 0.7em 0.5em 0.7em 0.5em;
  box-sizing: border-box;
  width: 100%;
  font-size: 18px;
  background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

input[type="text"],input[type="mail"],input[type="content"]{
  padding: 0.7em 0.5em 0.7em 0.5em;
  box-sizing: border-box;
  width: 100%;
  font-size: 18px;
  background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}
input:focus {
    border: 2px solid #4285f4;
  outline: none;}
input:required{background: #ffdadd;}
input[type="email"]:invalid{background: #ffdadd;}
input[type="checkbox"]:invalid { background: #ffdadd;}
input:valid{background: #fff;} /* 入力内容が正しかった場合の指定 */
textarea{
  width: 100%;
  font-size: 16px;
  padding: 0.5em 0.5em 5em 0.5em;
  box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 5px;
}
textarea:focus {
    border: 2px solid #4285f4;
  outline: none;}

input::placeholder {
  color: #ccc;
  font-size: 16px;
}
input[name="name"]::placeholder{color: #bbb;}
input[name="phone"]::placeholder{color: #bbb;}
input[name="email_1"]::placeholder{color: #bbb;}
textarea::placeholder {
  color: #ccc;
  font-size: 16px;
}
#form_kakunin {
  background: url(../img/form_btn3.png) no-repeat; background: #F5AB16;
}
input[type="submit"]{
  margin: 50px auto 0 auto;
  display: block;
  border: none;
  cursor: pointer;
  color: #333;
  border-radius: 0.5rem;
}
input[type="submit"]:hover{
    opacity: 0.8;
    filter: alpha(opacity=80);
}

/*SP CSS*/
@media screen and (max-width: 767px){
  #form h2 { font-size: 4.5rem; padding: 5.5rem 0 1rem;}
  #form form { width: 100%; padding: 3rem 0 7rem; margin-top: 2rem;}
  #form table {width: 90%;}
  #form table,th,td {box-shadow: inset 0 0 0;}
  #form table th { display: block; width: 100%; font-size: 3rem;}
  #form table th p.hissu { font-size: 2.1rem; padding: 0.2em 0.6em 0.5rem; font-weight: 600; right: 0; top: 4%;}
  #form table td.radio-box { padding: 4.8rem 0; }
  .radio-inline__input { top: 6rem; width: 3.5rem; margin-left: 1rem;}
  .radio-inline__label { font-size: 2.4rem; padding: 2rem 2rem 2rem 4.8rem;}
  .formSection__contents__privacy { font-size: 2rem;}
  input[type="submit"] { width: 90%;}
  input.btn--red.btn--cubic {
    width: 90%;
    padding: 4rem;
    margin-top: 4rem;
    font-size: 3rem;
  }
}

/*PC CSS*/
a.disabled { pointer-events: none; }


/*デザインcss↓*/
#form_con {
  max-width: 900px;
  margin: 0  auto;
  padding-bottom: 40px;
}
@media only screen and (max-width: 768px) {
  #form_con {
    width: 95%;
  }
}
#form_con form {
  width: 100%;
}
#form_con form table {
  width: 100%;
}
#form_con form table tr {
  position: relative;
}
#form_con form table tr:after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1px;
  border-bottom: dotted #cdcdcd 1px;
}
#form_con form table tr th {
  width: 30%;
  font-weight: normal;
  padding: 1em .5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
  #form_con form table tr th {
    text-align: center;
    width: 100%;
    display: block;
    background: #00ADB5;
    padding: .8em .2em;
    color: #fff;
  }
}
#form_con form table tr th span {
  background: #FF5722;
  padding: 0 .4em;
  color: #fff;
  margin-left: .5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50px;
}
#form_con form table tr td {
  padding: 1em .5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
  #form_con form table tr td {
    padding: 1.5em .5em;
    display: block;
    width: 100%;
  }
}
#form_con form table tr .box_br {
  display: block;
}
#form_con form table tr select {
  border: 1px solid #97ae88;
}
#form_con form table tr label input {
  cursor: pointer;
  display: none;
  vertical-align: middle;
}
#form_con form table tr .radio02-input + label {
  padding-left: 23px;
  margin-right: 20px;
  position: relative;
}
#form_con form table tr .radio02-input + label:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #999;
  border-radius: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#form_con form table tr .radio02-input:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  background: #97ae88;
  border-radius: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#form_con form table tr select, #form_con form table tr input, #form_con form table tr textarea {
  width: 100%;
  height: 3em;
  padding: .5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#form_con form table tr textarea {
  height: 10em;
}

/*プライバシーのデザインcss↓*/
.con_pri {
  max-width: 700px;
  margin: 0  auto;
}
@media only screen and (max-width: 768px) {
  .con_pri {
    width: 95%;
  }
}
.con_pri .box_pri {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #cdcdcd;
  background: #f7f7f7;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 20px 55px;
}
@media only screen and (max-width: 768px) {
  .con_pri .box_pri {
    margin-top: 4%;
    padding: 3%;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .con_pri .box_pri {
    padding: 4%;
  }
}
.con_pri .box_pri .box_tori {
  text-align: left;
  margin-top: 40px;
}
@media only screen and (max-width: 768px) {
  .con_pri .box_pri .box_tori {
    margin-top: 4%;
  }
}
.con_pri .box_pri .box_tori h4 {
  font-weight: normal;
  margin-bottom: 30px;
  font-size: 150%;
}
@media only screen and (max-width: 768px) {
  .con_pri .box_pri .box_tori h4 {
    margin-bottom: 4%;
  }
}
.con_pri .box_pri .box_tori .txt {
  padding: 0 20px;
}
@media only screen and (max-width: 768px) {
  .con_pri .box_pri .box_tori .txt {
    padding: 0;
  }
}
.con_pri .box_pri .box_num {
  margin-top: 30px;
}
@media only screen and (max-width: 768px) {
  .con_pri .box_pri .box_num {
    margin-top: 5%;
  }
}
.con_pri .box_pri .box_num h4 {
  font-weight: normal;
  font-size: 113%;
}
.con_pri .box_pri .box_num .txt {
  padding: 10px 0 0 20px;
}
@media only screen and (max-width: 768px) {
  .con_pri .box_pri .box_num .txt {
    padding: 3% 0 0 3%;
  }
}

.box_check {
  text-align: center;
  margin: 1em auto;
}
.box_check label {
  display: inline-block;
}
.box_check label span {
  margin-left: .3em;
}

.btn_confirm {
  text-align: center;
}

.btn_confirm input {
  display: inline-block;
  padding: .7em 1.2em;
  width: 24vw;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  background-color: #FF5722;
  transition: 0.3s;
  border-radius: 70px;
}

@media only screen and (max-width: 768px) {
  .btn_confirm input {
    padding: .3em .7em;
    width: 40vw;
    font-size: 4rem;
  }
}

.btn_confirm input::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -35px;
  transform: translateY(-50%);
  width: 70px;
  height: 2px;
  background-color: #2285b1;
  transition: 0.3s;
}

.btn_confirm input:hover {
  text-decoration: none;
  background-color: #bbbbbb;
}

.btn_confirm a:hover::after {
  transform: translateX(3px);
}