@charset "utf-8";

/*???膩???渇??膩???渇????窮????????鐃緒申???膩???渇??膩???渇??膩???渇????居申鐃緒申鐃緒申???鐃初??鐃?(???膩???渇??膩???渇??膩???渇??膩???渇??鐃?)
.btn:hover {
  opacity: 0.7;
}
*/
p {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .5px;
}

/*-----------------------------------------------------------------------------------------------------
???膩???渇??膩???渇??膩???渇??膩???渇??膩???渇????常申鐃初??膩???鰹申鐃緒申鐃緒申?????渇??鐃?(PC)
-----------------------------------------------------------------------------------------------------*/
#container {
  position: relative;
  padding-top: 0px;
}
.main {
  margin-bottom: 0em;
}
.main-in {
  padding: 40px 0;
}
.main-contents {
  position: relative;
}
.main-contents .contents {
  margin-bottom: 0em;
  padding: 0 0;
}
.main-contents p {
  line-height: 1.8em;
}
.main-contents {
  font-size: 1.8em;
}
.for_pc {
  display: block;
}
.for_sp {
  display: none;
}
/*-----------------------------------------------------------------------------------------------------
鐃緒申鐃初??膩???渇????窮????????鐃緒申???膩???鰹申鐃緒申鐃緒申?????渇??鐃?(PC)
-----------------------------------------------------------------------------------------------------*/
.main-contents h2 {
  margin: 1em 0 1.5em;
  padding: 0em;
  font-size: 1.6em;
  font-weight: 900;
  text-align: center;
  position: relative;
}
.main-contents h2:before {
  content: '';
  position: absolute;
  bottom: -20px;
  display: inline-block;
  width: 80px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #00948c;
  border-radius: 2px;
}
.main-contents h2.qa:before {
  content: '';
  position: absolute;
  bottom: -10px;
  display: inline-block;
  width: 80px;
  height: 5px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #000;
  border-radius: 2px;
}
.main-contents h3 {
  margin: 0 0 0.5em;
  padding: 0em 0em 0.5em;
  font-size: 32px;
  font-weight: 900;
  border-bottom: 2px dotted #00948c;
  line-height: 1.4;
  color: #00948c;
}
/*-----------------------------------------------------------------------------------------------------
???鐃初??膩???渇??膩???渇??膩???鰹申鐃緒申???膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???渇????居申鐃初??膩???渇??膩???渇??鐃?(P???膩????)???膩???渇??膩???渇?????鐃緒申???膣?鐃緒申??????鐃順┏??鰹申鐃緒申??????鐃緒申???????????渇??膩???鰹申鐃緒申??????鐃緒申???膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???括欺?????渇??鐃?
-----------------------------------------------------------------------------------------------------*/
#header {
  background-color: rgba(255, 255, 255, 0.9);
  position: sticky;
  border-bottom: 1px solid #ccc;
}
#header-in {
  background-color: rgba(255, 255, 255, 0.2);
  position: relative;
  padding: 0em 0em 0.5em;
}
#header #header-title {
  float: left;
  width: 15%;
  margin-top: 0.5em;
  margin-left: 0em;
  padding: 0em;
}
#header .header-logo {
  margin-bottom: 0em;
  padding: 0;
}
#header .header-logo img {
  width: 100%;
}
.header_tel {
  width: 30%;
  float: right;
  margin: 0.9em 0.5em 0em;
}
.header_tel img {
  width: 100%;
}
.header_mail {
  width: 25%;
  float: right;
  margin: 0.5em 0.3em 0em;
}
.header_mail img {
  width: 100%;
}

.order_button {
  width: 20%;
  float: right;
  margin: 1em 0.3em 0em;
}

.order_button img {
  width: 100%;
}


/*-----------------------------------------------------------------------------------------------------
???膩???渇??膩???渇??膩?鐃緒申??????鐃純????活??茯???渇??膩???渇??膩???渇??膩???鰹申鐃緒????渇??鐃?(???膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??綏≧??????????????膩????)???膩???渇??膩???渇??膩???渇??膩???渇??鐃?
-----------------------------------------------------------------------------------------------------*/
#main-image {
  padding-top: 0em;
  background: url(../images/top_image_back.jpg) center top no-repeat #fff;
  height: auto;
}
#main-image-in {
  position: relative;
  padding-bottom: 0em;
  background-color: transparent;
}
#main-image img {
  width: 100%;
  height: auto;
}
.main-area {
  display: flex;
}
.main-image-in-left {
  width: 50%;
}
.main-image-in-right-pc {
  width: 50%;
  align-self: center;
}
.main-image-in-right-sp {
  display: none;
}
.main-subcatchcopy {
  background: #00948c;
  padding: 1em 0em;
}
.main-subcatchcopy_inr {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.main-subcatchcopy_inr p {
  font-size: 1.6em;
  font-weight: 900;
  color: #fff;
}
.txt-yellow {
  color: #ffde00;
}
/*-----------------------------------------------------------------------------------------------------
CTA???膩???渇??膩???渇??膩???渇??膩???渇??鐃?
-----------------------------------------------------------------------------------------------------*/
.section_contact {
  box-sizing: border-box;
  background-color: #00948c;
}
.section_contact_in {
  background-color: #00948c;
}
.box_contact {
  margin: 40px 0px;
}
.box_contact_inr {
  background-color: #fff;
  padding: 1em 2em 1em;
  overflow: auto;
}
.box_contact_inr_inr {
  display: flex;
}
.img_contact_form {
  background-color: #fff;
  padding: 0px 20px 20px 20px;
  border-radius: 8px;
  width: 100%;
}
.img_contact_form button {
  margin: 15px 0px;
}
.img_contact_form p {
  font-size: 12px;
  color: #555;
}
/*
.name-group {
  display: flex;
  justify-content: space-between;
}
*/
.form-group {
  margin-bottom: 15px;
  flex: 1;
}
.name-group .form-group {
  margin-right: 10px;
}
.name-group .form-group:last-child {
  margin-right: 0;
}
label {
  display: block;
  margin-bottom: 5px;
}
input[type="text"], input[type="email"] {
  width: 100%;
  padding: 25px 20px;
  box-sizing: border-box;
  border: 3px solid #2276b0;
  border-radius: 0px;
  font-size: 20px;
  background: #ffefef;
}
button {
  background: none;
  border: none;
  width: 100%;
}
button img {
  width: 100%;
}
button:hover {
  opacity: 0.7;
}
/*-----------------------------------------------------------------------------------------------------
???膩???渇??膩???渇????窮?????膩???鰹申鐃遵?誌申鐃順??鐃初??膩???渇??膩???渇??膩???渇??膩???渇??鐃?
-----------------------------------------------------------------------------------------------------*/
.section_nayami {
  background-image: url(../images/bg_nayami.jpg);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
.section_nayami_in {}
.box_hikakubiz {
  background: #f4feff;
  padding: 1em 2em 2em;
  margin-bottom: 1em;
}
.point_area {
  display: flex;
  justify-content: space-between;
  margin-top: 2em;
}
.box_point_left {
  width: 50%;
  background: #eaf6ff;
  padding: 1.5em;
  font-size: 0.9em;
  line-height: 1.6;
}
.box_point_right {
  width: 50%;
  background: #eaf6ff;
  padding: 1.5em;
  font-size: 0.9em;
  line-height: 1.6;
}
.title_point {
  font-size: 20px;
  line-height: 1.4 !important;
  background-color: #00948c;
  color: #fff;
  padding: 0.5em 1em;
  margin-bottom: 1em;
}
/*
.box_company {
  padding: 0 2em;
}
*/
.box_company_inr {
  background: #eaf6ff;
  padding: 2em 2em;
  margin: 1em 0em 0em;
}
.area_price {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 3em;
}
.box_price {
  background-color: #1b75b2;
  width: 29%;
  padding: 1em 0.5em;
  text-align: center;
  box-shadow: 15px 15px 0 #00948c;
}
.box_price p {
  line-height: 1.4em;
}
.title_price {
  text-align: center;
  font-size: 16px;
}
.title_price_inr {
  background-color: #fff;
  padding: 3px 10px;
  color: #1b75b2;
}
.kingaku {
  margin-top: 15px;
}
.kingaku_inr {
  font-size: 2.5em;
}
.area_price::after {
  content: "";
  display: block;
  width: 30%;
  height: 0;
}
/*-----------------------------------------------------------------------------------------------------
???膩???鰹申鐃巡散??括抄鐃初??膩???渇??膩???渇??膩???渇??膩????
-----------------------------------------------------------------------------------------------------*/
.section_tokutyo {
  background-image: url(../images/bg_tokutyo.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.section_tokutyo_in {}
.box_reazon {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  margin-bottom: 2em;
}
.box_reazon_reverse {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2em;
}
.box_reazon_inr {
  width: 100%;
  padding: 2em;
  background: #fff;
  position: relative;
}
.box_reazon_img {
  padding: 0em;
  position: relative;
}
.box_reazon_img img {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.tag_point {
  width: 25%;
  position: absolute;
  top: -10%;
  right: 2%;
  opacity: 0.7;
  transform: rotate(0deg);
}
.tag_point_reverse {
  width: 25%;
  position: absolute;
  top: -10%;
  right: 2%;
  opacity: 0.7;
  transform: rotate(0deg);
}
.box_kako {
  border: 1px solid #ccc;
  padding: 0.5em;
  margin-bottom: 0.5em;
  font-size: 0.8em;
}
.tag_kako {
  background-color: #0081A9;
  color: #fff;
  padding: 2px 15px;
  border-radius: 15px;
}
.box_01 {
  background: #f6f6f6;
  padding: 1em;
  float: left;
  width: 45%;
  overflow: auto;
}
.box_02 {
  background: #f6f6f6;
  padding: 1em;
  float: right;
  width: 45%;
  overflow: auto;
}
/*-----------------------------------------------------------------------------------------------------
???膩???渇?????鐃緒申鐃緒申膩???渇??膩???渇??膩???活?ｏ申???鐃?
-----------------------------------------------------------------------------------------------------*/
.section_voice {
  background-image: url(../images/bg_01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.section_voice_in {
  background: transparent;
  padding: 1em 1em 5em;
}
.area_voice {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.box_voice {
  width: 49%;
  background: #fff;
  border: 2px double #1b75b2;
  padding: 1.5em;
  font-size: 0.8em;
  background-image: url(../images/img_icon.png);
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 20%;
}
.title_voice {
  color: #00948c;
  font-size: 1.2em;
  line-height: 1.4 !important;
  border-left: 6px solid #00948c;
  padding: 0.2em 0.5em;
  margin-bottom: 0.5em;
}
.box_voice p {
  font-size: 15px;
}

p.title_voice {
  font-size: 22px;
}



/*--------------------------------------------------------
???膩???活??茯???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩????
--------------------------------------------------------*/
.section_flow {
  background-image: url(../images/bg_01.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.section_flow_in {}
ul.stepflow {
  border: none;
  margin: 1em 0.5em;
  padding: 0;
  list-style: none;
}
ul.stepflow > li:before, ol.stepflow > li:before {
  background-color: #00948c !important;
}
.stepflow li {
  position: relative;
  padding: 18px 0px 18px 40px;
}
.stepflow > li:before {
  content: "";
  width: 3px;
  background: #00948c;
  display: block;
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 9px;
}
.stepflow-white {
  content: '';
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 3px #00948c;
}
.stepflow-black {
  content: '';
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 3px #00948c;
  background-color: #00948c;
}
.stepflow_label {
  padding: 3px 0px 8px 0px;
  margin-bottom: 8px;
  color: #00948c;
  font-size: 1em;
  font-weight: bold;
}
.stepflow_title {
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #00948c;
}
.stepflow_content {
  font-size: .9em;
  line-height: 1.5;
  padding: 0 0 20px;
  border-bottom: dashed 1px #00948c;
  overflow: auto;
}
/*--------------------------------------------------------
???膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???鰹申鐃緒申???膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??膩???渇??鐃?
--------------------------------------------------------*/
.section_qa {
  background: #fff;
}
.section_qa_in {
  padding: 2em 0 4em;
}
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.cp_qa {
  margin-top: 40px;
}
.cp_qa .cp_actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 0 1em 0;
  color: #fff;
}
.cp_qa .cp_actab input {
  position: absolute;
  opacity: 0;
}
.cp_qa .cp_actab label {
  font-weight: bold;
  font-size: 18px;
  line-height: 1.6em;
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: 0.8em 2.5em 1em 3.5em;
  cursor: pointer;
  text-indent: 0.5em;
  border-radius: 0em;
  background: #1b75b2;
}
.cp_qa .cp_actab label::before {
  font-size: 1.6em;
  margin-left: -1.8em;
  padding-right: 0.5em;
  content: 'Q.';
}
.cp_qa .cp_actab label:hover {
  transition: all 0.3s;
  color: #fffa2d;
}
.cp_qa .cp_actab label::after {
  font-size: 1.7em;
  font-weight: bold;
  position: absolute;
  top: 30%;
  right: 0;
  content: '＋';
  display: inline-block;
  width: 2em;
  height: 2em;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
}
.cp_qa .cp_actab .cp_actab-content {
  position: relative;
  overflow: hidden;
  max-height: 0;
  padding: 0 0 0 2.2em;
  -webkit-transition: max-height 0.2s;
  transition: max-height 0.2s;
  border-radius: 0 0 0em 0em;
  background: #fff;
  color: #000;
}
.cp_qa .cp_actab .cp_actab-content::before {
  font-size: 26px;
  position: absolute;
  margin: 10px 0px 0px -32px;
  padding: 0;
  content: 'A.';
}
.cp_qa .cp_actab .cp_actab-content p {
  margin: 1em 1em 1em 0;
}
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
  max-height: 40em;
  border: 20px solid rgba(27, 37, 56, 0.1);
}
.cp_qa .cp_actab input:checked ~ label {
  color: #fff;
  border-radius: 0em 0em 0 0;
}
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
/*-----------------------------------------------------------------------------------------------------
???膩???渇??膩???渇????居申絽悟?渇??膩???渇???????????膩???渇??膩???渇??膩???渇??膩???渇??膩???括捷鐃初?????鐃緒申??????鐃緒申???膩???鰹申鐃緒申膈?鐃初??膩???鰹申鐃緒申???膩???渇?????鐃緒申?????常申鐃初??膩???渇??膩???活??鐃初??膩????
-----------------------------------------------------------------------------------------------------*/
.box_matching {
  padding: 1em;
  font-size: 0.9em;
}
.main-contents .box_matching h3 {
  font-size: 20px;
}
.box_matching p {
  font-size: 14px;
  font-weight: 400;
}
/*--------------------------------------------------------
?????鐃緒申??????鐃緒申??????鐃緒申???膩???渇??膩???活??茯???渇??膩???渇?????鐃緒申???膩???渇??膩???鰹申鐃純????渇??膩???渇??膩???鰹申鐃緒申鐃緒申?????渇??鐃?
--------------------------------------------------------*/
.main-contents ul.checklist {
  margin: 0 0 1.5em;
  padding: 1em;
  padding-bottom: 0;
  border: 1px solid #414141;
}
.main-contents ul.checklist li {
  margin-bottom: 1.5em;
  padding-top: 5px;
  padding-left: 24px;
  background: url(../images/icon-check01-red.png) left top no-repeat;
  list-style-type: none;
}
.main-contents table {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  padding: 0;
  border-top: 1px solid #fff;
  font-size: 18px;
}
.main-contents th, .main-contents td {
  background-color: #fff;
  padding: 1em;
  border-bottom: 1px solid #ccc;
}
.main-contents th {
  background-color: #fff;
  font-weight: 600;
  text-align: left;
}
.main-contents table.table-style01 th, .main-contents table.table-style01 td {
  text-align: left;
  vertical-align: middle;
}
/*--------------------------------------------------------
Youtube鐃緒申鐃緒申鐃緒申??????鐃順┏??括欺?????渇??鐃?
--------------------------------------------------------*/
.youtube_size {
  width: 640px;
  height: 440px;
}
/*--------------------------------------------------------



/*-----------------------------------------------------------------------------------------------------
???膩???渇??膩???渇??膩???渇??膩???括欺?????括??鐃初??膩???渇??膩???渇??鐃?
-----------------------------------------------------------------------------------------------------*/
#footer {
  background: #3097c0;
  margin: 0;
  padding: 2em 0;
  text-align: center;
  font-size: 1.4em;
  color: #fff;
}
#footer a,
#footer p {
  color: #fff;
}
.fix_menu_smartphone_01 {
  display: none;
}
/* ------------------------------
   ???膩???活??茯???渇??膩???渇??膣?鐃緒申???膩???渇??膩???渇??鐃?1
------------------------------ */
.loopSliderWrap {
  top: 0;
  left: 0;
  height: 200px;
  overflow: hidden;
  position: absolute;
}
.loopSlider {
  margin: 0 auto;
  width: 100%;
  height: 165px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.loopSlider ul {
  height: 250px;
  float: left;
  overflow: hidden;
}
.loopSlider ul li {
  width: 250px;
  height: 250px;
  float: left;
  display: inline;
  overflow: hidden;
}
.loopSlider ul li img {
  width: 100%;
}