@charset "utf-8";

html{
  scroll-behavior: smooth;
}
body{
	font-family: 'Noto Sans SC', sans-serif;
}
.site-header {
  position: relative;
}
.head_contact {display: inline-block;}
#faq {background: #f1f1f1;margin-bottom: 0}
.contact {display: block;}
#gloval-nav {width: 70%;}
.open #gloval-nav li ul li a {display: inline;}
.open #gloval-nav li ul{padding-left: 0;}
.open #gloval-nav li ul li:nth-child(2) {
  padding: 0 5px;
}
.open #gloval-nav li ul li:nth-child(4) {
  padding: 0 5px;
}

@media screen and (min-width: 640px){

#main-visual .main_txt {
    padding: 10% 0;
    padding-left: 4%;
}}

@media screen and (max-width: 640px){
footer {
    padding-bottom: 0;
}
}

/*特別ヘッダー*/
@media screen and (max-width: 1199px) {
#header.open nav {
  padding: 0;
}
 #header #nav-toggle {
  display: block;
  position: fixed;
  right: 15px;
  top: 20px;
  width: 22px;
  height: 22px;
  cursor: pointer;
  z-index: 102;
 }
 #header #nav-toggle span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #333;
  left: 0;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
 }
 #header #nav-toggle span:nth-child(1) {
  top: 0;
 }
 #header #nav-toggle span:nth-child(2) {
  top: 8px;
 }
 #header #nav-toggle span:nth-child(3) {
  top: 16px;
 }
 #header.fixed #nav-toggle span,
 #header.open #nav-toggle span { background: #222;}
 #header nav {
  width: 100%;
  padding: 14px 0;
  display: block;
  position: absolute;
  /* 開いてないときは画面外に配置 */
  top: -500px;
  left: 0;
  text-align: center;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
  z-index: -1;
 }
 #header nav ul { width: 100%; }
 #header nav ul li {
  width: 100%;
  display: block;
 }
 #header nav ul li a {
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  letter-spacing: 0.14em;
  line-height: 60px;
  font-size: 14px;
 }
 #header nav ul li a:hover::after { content: none; }

 #header #nav-toggle { display: block;}

 /* #nav-toggle 切り替えアニメーション */
 #header.open #nav-toggle span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
 }
 #header.open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
 }
 #header.open #nav-toggle span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  transform: rotate(-135deg);
 }
 /* #header nav スライドアニメーション */
 #header.open nav {
 /* #header nav top + #mobile-head height */
  -moz-transform: translateY(560px);
  -webkit-transform: translateY(560px);
  transform: translateY(560px);
 }
}
/*特別ヘッダー　end*/

.tit {
    text-align: center;
    color: #00a395;
    font-family: 'Catamaran', sans-serif;
    font-size: 28px;
    letter-spacing: 0.1em;
    font-weight: 700;
}
.tit_cn {
    text-align: center;
    color: #00a395;
    font-family: 'Catamaran', sans-serif;
    letter-spacing: 0.1em;
    padding-bottom: 40px;
    display: block;
    font-size: 12px;
    font-weight: 700;
}

/*service指定*/
#service ul {
  max-width: 1400px;
}
#service ul.box2 li {
  width: 32%;
  vertical-align:top;
}
#service ul.box2 li:nth-child(even){
  margin-right: 2%;
  margin-left: 2%;
}
@media screen and (max-width: 768px) {
  #service ul.box2 li{width: 90%;margin: 0 auto;}

#service ul.box2 li:nth-child(even){
  margin-right: 0;
  margin-left: 0;
  margin: 0 auto;
}
}
/*profile指定*/
#profile {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    font-size: 0;
    letter-spacing: 0;
    margin-top: 100px;
}
#profile figure {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}
#profile .txt-warp {
    display: inline-block;
    width: 70%;
    padding-left: 10%;
    font-size: 14px;
    vertical-align: top;
}
#profile .txt-warp .txt {
    margin-bottom: 30px;
}
#profile .txt h2 {
    color: #00a395;
    font-size: 16px;
    position: relative;
    padding-left: 90px;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}
#profile .txt h2:before {
    display: inline;
    content: "";
    width: 70px;
    height: 1px;
    border-right: 70px solid #00a395;
    position: absolute;
    left: 0;
    top: 45%;
    margin:0;
}

#profile .txt-warp dl {
    width: 100%;
    text-align: left;
    font-size: 0;
    letter-spacing: 0;
    vertical-align: top;
}
#profile .txt-warp dl dt {
    display: inline-block;
    width: 20%;
    vertical-align: top;
    font-size: 14px;
    padding-bottom: 5px;
    letter-spacing: 0.1em;
}
#profile .txt-warp dl dt span {
    display: block;
    font-size: 11px;
}
#profile .txt-warp dl dd {
    display: inline-block;
    width: 80%;
    vertical-align: top;
    font-size: 14px;
    font-weight: normal;
    padding-bottom: 5px;
    letter-spacing: 0.1em;
}
#profile .aisatsu {
    padding: 0 7% 40px 7%;
}
#profile .aisatsu h3 {
    font-size: 18px;
    padding-bottom: 10px;
}
#profile .aisatsu p {padding-bottom: 20px;font-size: 14px;}

@media screen and (max-width: 768px) {
#profile {
    width: 90%;
    margin-top: 70px;
}
#profile figure {
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 30px;
}
#profile figure img {
    display: block;
    width: 50%;
    margin: 0 auto;
}
#profile .txt-warp {
    display: block;
    width: 100%;
    margin:0 auto;
    padding-left: 0;
    font-size: 14px;
}
#profile .txt-warp .txt {
    margin-bottom: 15px;
}
#profile .txt h2 {
    margin-bottom: 15px;
}
#profile .txt-warp dl dt {
    width: 30%;
}
#profile .txt-warp dl dd {
    width: 70%;
}
#profile .aisatsu {
    padding: 0 0 40px 0;
}
}

/*office 指定*/
.office {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    margin-top: 100px;
}

.office dl {
    width: 100%;
    display: block;
    margin-bottom: 60px;
    font-weight: 400;
    overflow: hidden;
    background: #f7f7f7;
    border: solid 1px #999;
}
.office dt {
    float: left;
    width: 26%;
    padding: 1.5% 3%;
    box-sizing: border-box;
    font-size: 14px;
    vertical-align: top;
    border-top: solid 1px #999;
}
.office dd {
    float: left;
    width: 74%;
    padding: 1.5% 3%;
    box-sizing: border-box;
    background: #fff;
    font-size: 14px;
    vertical-align: top;
    border-top: solid 1px #999;
}
.office dd:after{
  display: block;
  content: "";
  clear: both;
}
.bordernone{
    border-top: none!important;
}
.office td span {display: block;}
.office .gmap {
    width: 100%;
    display: block;
    margin-bottom: 60px;
}

.office .gmap iframe {
    width: 100%;
    height: 450px;
}
@media screen and (max-width: 768px) {
.office {
    width: 90%;
    margin: 0 auto;
    margin-top: 70px;
}
.office dl {
    margin-bottom: 30px;
}
}
@media screen and (max-width: 480px) {
.office dt,.office dd {
    padding: 1.5%;
    font-size: 12px;
}
.office .gmap {
    margin-bottom: 30px;
}

.office .gmap iframe {
    height: 250px;
}
}

/*priceページ指定*/
#price_list {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    margin-top: 100px;
}

#price_list table {
    width: 100%;
    display: block;
    margin-bottom: 60px;
}
#price_list tbody {
    width: 100%;
    display: block;
}
.va {
    vertical-align: middle!important;
}
#price_list tr {
    width: 100%;
    font-weight: 400;
    margin: 0 auto;
    display: inline-table;
}
#price_list td {
    padding: 1.5% 3%;
    box-sizing: border-box;
    background: #f7f7f7;
    font-size: 14px;
}
#price_list td.dis {
    background: #fff;
}
#price_list td span {display: block;}
#price_list .gmap {
    width: 100%;
    display: block;
    margin-bottom: 60px;
}
#price_list .section-product__cards__item__button{
    text-align: center;
    margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
#price_list {
    width: 90%;
    margin: 0 auto;
    margin-top: 70px;
}
#price_list .section-product__cards__item__button{
    margin-bottom: 30px;
}
}
@media screen and (max-width: 480px) {
#price_list td {
    padding: 1.5%;
    font-size: 12px;
}
}

#price_list p {
    font-size: 14px;
    padding-bottom: 60px;
}
#price_list p span {
    font-weight: 700;
    display: block;
    padding-bottom: 30px;
}
#price_list th {
    width: 40%;
    background: #f7f7f7;
    font-size: 14px;
    padding: 1.5% 3%;
    border-bottom: solid 1px #333;
}
#price_list th.dis {
  width: 60%;
}
#price_list td {
    width: 40%;
    padding: 1.5% 3%;
    box-sizing: border-box;
    background: #fff;
    font-size: 14px;
    border-bottom: solid 1px #333;
    text-align: center;
}
#price_list td.dis {
  width: 60%;
}
#price_list table {
    margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
#price_list p {
    font-size: 14px;
    padding-bottom: 30px;
}
#price_list p span {
    padding-bottom: 15px;
}
#price_list th {
    font-size: 13px;
    padding: 15px 0;
    width: 30%;
}
#price_list th.dis {
  width: 70%;
}
#price_list td {
    min-width: 120px;
    font-size: 12px;
    text-align: left;
    width: 30%;
}
#price_list td.dis {
  width: 70%;
}
#price_list table {
    margin-bottom: 30px;
}
}

/*--------------------------------------------------------------------------
modal
---------------------------------------------------------------------------*/

.modal-overlay {
 z-index: 10000002; /*デモではheader,footerをz-index:1にしたので それより上げています*/
 display:none; /*jsでフェードインされるまでdisplay:none*/
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100vh; /*100vhでビューポートの高さいっぱいになります*/
 background-color:rgba(0,0,0,.8)} /*これは好きな色・透明度で*/
a.modal-open:hover {cursor:pointer} /*カーソルをポインタに*/
.modal-content {
 width: 80%; margin: 0 10%;
 text-align: center;
 position:fixed;
 display:none; /*jsでフェードインされるまでdisplay:none*/
 z-index:10000003; /*オーバーレイより上に*/
}
.modal-content img {width: 100%; height: auto; max-width: 320px;}
a.modal-close { /*クローズボタンは何でも好きなスタイルでOK*/
 position: fixed;
 z-index:10000003;
 top: 5%;
 right: 5%;
 color:#CDCAC5;
 font-size:42px!important;
 line-height:1;
 text-decoration:none}
a.modal-close:hover {cursor:pointer} /*カーソルをポインタに*/