@charset "utf-8";
/* Reset
******************************/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;} ol, ul {list-style: none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;} table {border-collapse:collapse; border-spacing:0;} hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;} input, select {vertical-align:middle;}

/* Base
******************************/
html {
  /*
  font-family: 'Kiwi Maru', serif;
  font-family: "M PLUS 1", sans-serif;
  */
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-weight:normal;
  font-style: normal;
  font-size: 62.5%;
  line-height: 1.7;
  color: #000;
}
body {font-size: 1.6rem;}
a {background:transparent; margin:0; padding:0; vertical-align:baseline; text-decoration: none; color: #000;}
a:hover {text-decoration: underline;}
a.link_icon{margin: 0 0.5rem 0; text-decoration: none; color: #FFBF01;}
a.link_icon:visited{color: #212529;}
a.link_icon:hover{color: #862e9c;}
p.txt_c{text-align: center;}

@media only screen and (max-width:640px){
  .sp-br:before{content: "\A"; white-space: pre;}
}
@media only screen and (max-width:800px){
  .sp-none{display: none;}
}

* {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
header, div.frame, footer{width: 100%!important;}
section{width: 100%; padding: 0 2% 0;}
section.plus{width: 100%; padding: 0 2% 7rem;}
section.plus_l{width: 100%; padding: 0 2% 4rem;}
section.plus_m{width: 100%; padding: 0 2% 4rem;}
section.plus_s{width: 100%; padding: 0 2% 4rem;}
p.object{max-width: 900px; padding: 0 0 4rem; text-align: center;}

@media only screen and (min-width:1200px){
  section{width: 1200px; margin: 0 auto;}
  section.plus{width: 1200px; margin: 0 auto 12rem;}
  section.plus_l{width: 1200px; margin: 0 auto 7rem;}
  section.plus_m{width: 1200px; margin: 0 auto 4rem;}
  section.plus_s{width: 1200px; margin: 0 auto 0rem;}
}

table{width: 100%; margin: 0; border: 1px solid #ddd; letter-spacing: 0.3rem;}
table th, table td{padding: 2rem 1rem; border-bottom: 1px solid #ddd;}
table th{background: #fafafa; width: 30%; text-align: left; vertical-align: middle; font-weight: normal;}
@media only screen and (max-width:800px){
  table th, table td{width: 100%; display: block; padding: 0.75rem 1rem; border: none;}
  table th{border: none;}
}


/* Header
******************************/
header{background: #fff;}
#header_logo{padding: 18px 0;}
#header_logo_link{display: block; border: none;}
#header_logo_img{display: block; width: 297px; height: 36px;}
.nav_list li a{font-weight: bold;}


@media only screen and (max-width: 1023px) {
  .nav {position: fixed; right: -320px; top: 0; width: 300px; height: 100vh; padding: 6rem 0 0; background-color: #fff; transition: all .6s; z-index: 200; overflow-y: auto;}
  .hamburger {position: absolute; right: 15px; top: 16px; width: 48px; height: 48px; cursor: pointer; z-index: 300;}
  .nav_list {margin: 0; padding: 0;}
  .nav_list li:last-child a{background: #FFBF01; color: #FFF;}
  .nav_item {padding: 0 14px;}
  .nav_item li {font-size: 1.6rem; font-weight: bold; color: ff0000;}
  .nav_item a {display: block; padding: 8px; border-bottom: 1px solid #eee; text-decoration: none;}
  .nav_item a:hover{background: #eee;}
  .hamburger_border {position: absolute; left: 10px; width: 22px; height: 2px; background-color: #000; transition: all .6s;}
  .hamburger_border_top {top: 10px;}
  .hamburger_border_center {top: 20px;}
  .hamburger_border_bottom {top: 30px;}
  .black_bg {position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 100; background-color: #333; opacity: 0; visibility: hidden; transition: all .6s; cursor: pointer;}
  .nav-open .nav {right: 0;}
  .nav-open .black_bg {opacity: .8; visibility: visible;}
  .nav-open .hamburger_border_top {transform: rotate(45deg); top: 20px;}
  .nav-open .hamburger_border_center {width: 0; left: 50%;}
  .nav-open .hamburger_border_bottom {transform: rotate(-45deg); top: 20px;}

}
@media only screen and (min-width: 1024px) {
  #header_inner{display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1600px; margin:0  auto;}
  #header_logo{padding: 30px 0 30px;}
  #header_logo_img{width: 330px; height: 40px;}
  .nav_list{display: flex; align-items: center; gap: 3.2rem; }
  .nav_list li a{display: block; text-decoration: none; font-size: 1.6rem;}
  .nav_list li a:hover{border-bottom: 0.2rem solid #FFBF01; color: #FFBF01;}
  .nav_list li:last-child a{background: #FFBF01; border: 2px solid #FFBF01; border-radius: 4rem; margin-left: 1rem; padding: 0.5rem 2.4rem; color: #FFF;}
  .nav_list li:last-child a:hover{background: #FFF; border: 2px solid #FFBF01; color: #FFBF01;}
}
@media only screen and (min-width: 1440px) {
  #header_logo_img{width: 495px; height: 60px;}
  .nav_list{gap: 3.2rem; letter-spacing: 0.15rem;}
  .nav_list li a{display: block; text-decoration: none; font-size: 2rem;}
  .nav_list li:last-child a{padding: 0.5rem 3.2rem;}
}


/* Footer
******************************/
footer{background: #fff; width: 100%!important; padding: 4rem 0 0; font-weight: bold; font-size: 1.6rem;}
#footer_menu li a{display: block; padding: 1.5rem 0 1.5rem 1rem; text-decoration: none;}
#footer_logo{margin: 3.6rem; text-align: center;}
#footer_copyright{background: #000; width: 100%!impotant; padding: 1.6rem 0; text-align: center; font-size: 1.2rem; color: #fff; letter-spacing: 0;}

@media only screen and (min-width:768px){
  footer{background: #fff; width: 100%!important; padding: 7rem 0 0; font-weight: bold; font-size: 1.6rem;}
  #footer_logo{margin: 3.6rem 0 3.1rem; text-align: center;}
  #footer_menu{display: flex; justify-content: center; margin: 0 0 4rem;}
  #footer_menu li a{border: none; padding: 0 2.4rem;}
  #footer_menu li a:hover{text-decoration: underline;}
}

@media only screen and (min-width:1200px){
  #footer_logo{margin: 3.6rem 0 3.1rem; text-align: center;}
  #footer_logo{margin: 3.6rem 0 3.1rem; text-align: center;}
  #footer_menu{display: flex; justify-content: center; margin: 0 0 4rem;}
  #footer_menu li a{border: none; padding: 0 3rem;}
  #footer_menu li a:hover{text-decoration: underline;}
}

/* Title
******************************/
h1,h2,h3,h4,h5,h6{/*z-index: -1;*/}

h1{font-size: 3.2rem; font-weight: bold;}
h2{font-size: 2.8rem; font-weight: bold;}

h1.title_area{text-align: center; line-height: 1.2; color: #000;letter-spacing: 0.15rem; font-size: 4rem;}


h2.title_area{text-align: center; line-height: 1.2; color: #000;letter-spacing: 0.15rem; font-size: 4rem;}
h2.left_ttl{position: relative; margin-bottom: 1.6rem; font-size: 2.8rem; font-weight: bold;}
h2.left_ttl:after{width: 12rem; content: ""; border-bottom: 0.7rem solid #FFBF01; position: absolute; top:0; left: 0; right: 0; bottom: -7px;}


h2.center_ttl{position: relative; margin-bottom: 4rem; text-align: center; font-size: 2.8rem; font-weight: bold;}
h2.center_ttl:after{position: absolute; top:0; left: 0; right: 0; bottom: -10px; width: 7rem; content: ""; border-bottom: 0.7rem solid #FFBF01; margin: auto;}

h2.center_ttl_b{position: relative; margin-bottom: 4rem; text-align: center; font-size: 2.8rem; font-weight: bold; color: #000;}
h2.center_ttl_b:after{position: absolute; top:0; left: 0; right: 0; bottom: -10px; width: 70px; content: ""; border-bottom: 7px solid #000; margin: auto;}


h2.center_ttl_w{position: relative; margin-bottom: 4rem; text-align: center; font-size: 2.8rem; font-weight: bold; color: #fff;}
h2.center_ttl_w:after{position: absolute; top:0; left: 0; right: 0; bottom: -10px; width: 70px; content: ""; border-bottom: 7px solid #fff; margin: auto;}

h2.layer_01{ font-size: 2.8rem; text-align: center; margin-bottom: 4rem;}

h3.left_ttl{position: relative; margin-bottom: 1.6rem; font-size: 2.8rem; font-weight: bold;}
h3.left_ttl:after{width: 12rem; content: ""; border-bottom: 0.7rem solid #FFBF01; position: absolute; top:0; left: 0; right: 0; bottom: -7px;}
h3.center_ttl{position: relative; margin-bottom: 4rem; text-align: center; font-size: 2.8rem; font-weight: bold;}
h3.center_ttl:after{position: absolute; top:0; left: 0; right: 0; bottom: -10px; width: 7rem; content: ""; border-bottom: 0.7rem solid #FFBF01; margin: auto;}
h3.center_ttl_w{position: relative; margin-bottom: 4rem; text-align: center; font-size: 2.8rem; font-weight: bold; color: #fff;}
h3.center_ttl_w:after{position: absolute; top:0; left: 0; right: 0; bottom: -10px; width: 70px; content: ""; border-bottom: 7px solid #fff; margin: auto;}

h3{font-size: 2.4rem; font-weight: bold;}
h3.info_ttl{margin: 0 0 1.4rem; font-size: 2.4rem; font-weight: bold;}

@media only screen and (min-width:1200px){
  h2.layer_01{ font-size:  3.6rem; text-align: center;margin-bottom: 4rem;}
}



/* Main
******************************/
#main-vidual-s,#main-vidual-b{
  background: #FFBF01;
  width: 100%;
  margin-bottom: 7rem;
  position: relative
}

@media only screen and (max-width:677px){
  #main-vidual-s img{display: block; margin: 0 auto;}
  #main-vidual-b{display: none;}

  #main-vidual-object{
    position: absolute;
    width: 98%;
    top:0%;
    left: 1%;
    text-align: center;
    font-weight: bold;
    font-size: 1.4rem;
    color: #000;
    margin: 0!important;
    padding: 0!important;
  }
  img.main-vidual-s{width: 100%;}
  img.main-vidual-b{display: none;}
  h1.h1vidual{margin: 1rem 0; font-size: 2.4rem; line-height: 1.2; text-align: center;}

}

@media only screen and (min-width:678px){
  #main-vidual-s{display: none;}
  #main-vidual-b{display: inline-block;}

  #main-vidual-b img{display: block; width: 100%; margin: 0 auto;} 
}

@media only screen and (min-width:678px){
  #main-vidual-b{margin-bottom: 7rem;}
  #main-vidual-b img{margin:0 auto;}
  #main-vidual-object{
    position: absolute;
    top: 20%;
    left: 2%;
    color: #000 ;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0!important;
    padding: 0!important;
  }
  h1.h1vidual{margin-bottom: 2rem; font-size: 2.4rem;text-align: center;}
}
@media only screen and (min-width:1200px){
  #main-vidual-b{margin-bottom: 12rem;}
  #main-vidual-object{
    top:30%;
    left: 8%;
    font-size: 1.8rem;
    margin: 0!important;
    padding: 0!important;
  }
  h1.h1vidual{font-size: 3.6rem;text-align: center;}
}

@media only screen and (min-width:1440px){
  #main-vidual-object{
    top:30%;
    left: 12%;
    font-size: 2.4rem;
    margin: 0!important;
    padding: 0!important;
  }
  h1.h1vidual{font-size: 4.8rem;text-align: center;}
}



/* Main
******************************/
/* 下層・タイトルエリア */
#title_area{background: #FFBF01; width: 100%; padding: 7rem 0 6.5rem;}
p.title_area{text-align: center; color: #000; font-size: 2.4rem; font-weight: bold;}

/* 下層・パンくず */
#bread_area{background: #fafafa; margin: 0 0 7rem; border-bottom: 1px solid #eee; font-size: 1.4rem; color: #505050;}
ul.bread_list{font-size: 1.4rem;}
li.bread_item{display: inline-flex;}
li.bread_item:not(:last-child) ::after{
  content: ">";
  margin: 0 0.5rem 0;
}
li.bread_item a{
  text-decoration:none; color: #505050;}

@media only screen and (min-width:1200px){
  #bread_area{margin: 0 0 12rem;}
}

/* CTA AREA
******************************/
.cta_area{
  background: #FFBF01;
  width: 100%;
  text-align: center;
  padding: 3rem 0 3rem;
  font-size: 2rem;
  font-weight: bold;
}

/* Partner AREA
******************************/
.partner_area{
  background: #F8F9FA;
  width: 100%;
  text-align: center;
  padding: 3rem 0 3rem;
  font-size: 2rem;
  font-weight: bold;
  color: #000;
}
.partner_logo li a{display: block;}
.partner_area p{margin-bottom: 3rem; text-align: center; font-weight: bold; font-size: 1.6rem; letter-spacing: 0.15rem;}
  img.partner1{height: 60px;}
  img.partner2{height: 60px;}

@media only screen and (min-width:768px){
  .partner_area{padding: 3rem 0 3rem;}
  .partner_area p{margin-bottom: 3rem; font-size: 2rem;}
  .partner_logo{display: flex; justify-content: center;}
  .partner_logo li{ padding: 0 3rem;}
  .partner_logo li{ padding: 0 3rem;}
  img.partner1{height: 80px;}
  img.partner2{height: 80px;}

}

/* Btn
******************************/
.btn_cover{clear: both; margin: 5rem 0 0; text-align: center;}
.btn_detail{display: inline-block; background: #fff; padding: 1.2rem 4.2rem; border: 4px solid #FFBF01; border-radius: 0.5rem; text-align: center; text-decoration: none; font-size: 2rem; color: #FFBF01; font-weight: bold;}
.btn_detail:hover{background: #FFBF01; color: #fff; text-decoration: none;}

.btn_detail_b{display: inline-block; background: #000; padding: 1.2rem 4.2rem; border: 4px solid #000; text-align: center; text-decoration: none; font-size: 2rem; color: #FFF; font-weight: bold;}
.btn_detail:hover{background: #FFBF01; color: #fff; text-decoration: none;}

/* Parts
******************************/
/* intro */
article.intro{clear: both; display: inline-block; width: 100%; margin: 0 0 7rem 0;}
p.left-ttl_sub{margin: 0 0 2rem 0;}

img.intro_img_r,
img.intro_img_l{width: 100%;}
@media only screen and (min-width:641px){
  img.intro_img_r{float: right; width: 280px; padding: 0 0 1rem 2rem;}
  img.intro_img_l{float: left; width: 280px; padding: 0 2rem 1rem 0;}
}

@media only screen and (min-width:960px){
  article.intro{margin: 0 0 12rem 0; font-size: 1.8rem;}
  p.left-ttl_sub{margin: 0 0 40px 0; font-size: 2rem; font-weight: bolder;}
  img.intro_img_r{float: right; width: 420px; padding: 0 0 2rem 4rem;}
  img.intro_img_l{float: left; width: 420px; padding: 0 4rem 2rem 0;}
}


/* Inquiry
******************************/
/* progressbar */
.progressbar {display: flex; flex-wrap: wrap; max-width: 900px; margin: 0 auto;}
.progressbar .item {position: relative; width: calc(100% / 3); text-align: center; position: relative; align-items: center; justify-content: center; padding: 13px 0; line-height: 1.5; background: #F5F5F5;}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {position: absolute; z-index: 2; top: 0; bottom: 0; left: 100%; content: ''; border: 37px solid transparent; border-left: 20px solid #F5F5F5; margin: auto;}
.progressbar .item:not(:last-child)::before {margin-left: 1px; border-left-color: #FFF;}

@media screen and (max-width: 767px) {
  .progressbar .item {font-size: 11px; line-height: 1.4; padding: 10px 0;}
  .progressbar .item:not(:last-child)::before,
  .progressbar .item:not(:last-child)::after {border-width: 25px; border-left-width: 12px;}
}
/* progressbar active */
.progressbar .item.active {z-index: 1; background: #FFBF01; color: #fff;}
.progressbar .item.active:not(:last-child)::after {border-left-color: #FFBF01;}
.progressbar .item.active:not(:last-child)::before {border-left: none;}

/* table */
table.inq_table{max-width: 900px; margin: 0 auto 4rem;}

/* 必須・任意 */
span.dan{background: #FFBF01; margin: 0 0.75rem 0 0; padding: 0.25rem 0.5rem 0.25rem 0.5rem; font-size: 1.4rem; color: #fff;}
span.opt{background: #999999; margin: 0 0.75rem 0 0; padding: 0.25rem 0.5rem 0.25rem 0.5rem; font-size: 1.4rem; color: #fff;}

/* form */
.sbox {display: inline-flex; align-items: center; position: relative;}
.sbox::after {position: absolute; right: 15px; width: 10px; height: 7px; background-color: #535353; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ''; pointer-events: none;}
.sbox select {appearance: none; min-width: 280px; /*height: 2.8em;*/ padding: .4em calc(.8em + 30px) .4em .8em; border: 1px solid #d0d0d0; border-radius: 3px; background-color: #fff; color: #333333; font-size: 1.6rem; cursor: pointer;}
.tbox-label, .tbox { color: #333;}
.tbox-label {display: block; margin-bottom: 5px; font-size: .9em;}
.tbox {width: 100%; padding: 8px 10px; border: 1px solid #d0d0d0; border-radius: 3px; font-size: 1.6rem; line-height: 1.5;}
.tbox::placeholder {color: #999;}
.contact_privacy{text-decoration: underline;}
textarea{width: 100%; border: 1px solid #d0d0d0;}
button.submit_btn, button.return_btn{text-decoration: none; border: none!important; border-radius: 5px; padding: 1.2rem 2.4rem; font-weight: bold; text-align: center; font-size: 1.6rem; letter-spacing: 0.15rem;}
button.submit_btn{background-color: #FFBF01!important; color: #fff;}
button.return_btn{background-color: #212529!important; margin-right: 2rem; color: #fff;}
button.submit_btn::hover{opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)";}
a.return_top{background-color: #FFBF01!important; text-decoration: none; border: none!important; border-radius: 3px; padding: 1.2rem 2.4rem; font-weight: bold; text-align: center; font-size: 1.6rem; letter-spacing: 0.15rem; color: #fff;}
a.return_top::hover{opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)";}

/* custom
******************************/
.layer_top_img{
  display: block;
  width: 100%;
  margin: 0 auto;
}

span.marker{background: linear-gradient(transparent 70%, #21ff00 70%);}

article.layer_c{text-align: center;}
.layer_object{font-size: 2rem; font-weight: bolder;}

.flex_3{display: block;}
.flex_3_item{
  width: 100%;
  box-shadow: 2px 2px 4px #ccc;
  border-radius: 1.5rem;
  margin-bottom: 2rem;
  padding: 2rem;
  font-size: 2rem;
  letter-spacing: 0.15rem;
}
.flex_3_item img{width: 100%; margin-bottom: 2rem;}

.flex_5{display: block;}
.flex_5_item{
  width: 100%;
  margin-bottom: 2rem;
  border: 1px solid #FFBF01;
  font-size: 1.6rem;
  text-align: center;
}

.flex_5_item p{text-align: left;}

h3.service{
  display: block;
  background: #FFBF01;
  width: 100%;
  padding: 1.2rem 0;
  font-weight: normal;
  font-size: 1.6rem;
  color: #fff;
}
h4.service{padding: 0.5rem 0; font-weight: bold; font-size: 2.0rem;}
p.service{padding: 0.5rem;}

h3.price{
  display: block;
  background: #FFBF01;
  width: 100%;
  padding: 1.2rem 0;
  font-weight: bold;
  font-size: 2.4rem;
  color: #fff;
}
p.price{padding: 1rem 0; font-weight: normal; font-size: 2rem;}



.flex_1{display: block;}
.flex_1_item{
  width: 100%;
  margin-bottom: 2rem;
  border: 1px solid #FFBF01;
  font-size: 1.6rem;
  text-align: center;
}

span.kingaku{
  font-size: 2.4rem;
  font-weight: bold;
}




@media only screen and (min-width:768px){
  .layer_top_img{
    width: 768px;
    text-align: center;
    margin: 0 auto;
  }
  .layer_object{font-size: 2.4rem;}

  .flex_3{display: flex; gap: 2.4rem; margin-top: 4rem;}
  .flex_3_item{
    width: calc(100% / 3);
    box-shadow: 2px 2px 4px #ccc;
    border-radius: 1.5rem;
    margin-bottom: 0;
    padding: 2rem;
    font-size: 2rem;
    letter-spacing: 0.15rem;
  }
  .flex_3_item img{width: 100%; margin-bottom: 2rem;}


  .flex_5{display: flex; gap: 0.5rem; margin-top: 4rem;}
  .flex_5_item{
    width: calc(100% / 5);
    margin-bottom: 0;
    font-size: 1.6rem;
  }

  p.price{padding: 1rem 0; font-weight: bold; font-size: 2.4rem;}
  span.kingaku{
    font-size: 3.2rem;
    font-weight: bold;
  }

}

/* aaa
******************************/
/* aaa
******************************/
/* aaa
******************************/
/* aaa
******************************/
/* CTA AREA
******************************/