/*色設定*/
:root {
  --font-color-gray: #4d4d4d;
  --font-color-orange: #e07911;
  --font-color-blue: #2b8cde;
  --font-color-white: #ffffff;
  --font-color-freedial: #329F2D;
  --font-color-caution: pink;

  --font-color-dgreen: #09510e;
  --font-color-mgreen: #25cc6f;
  --font-color-lgreen: #cdf2cf;
  --font-color-dgray: #2a2d2a;
  --font-color-mgray: #6c7276;
  --font-color-lgray: #94a1a8;

  --bg-color-dgreen: #09510e;
  --bg-color-mgreen: #25cc6f;
  --bg-color-lgreen: #cdf2cf;
  --bg-color-dgray: #2a2d2a;
  --bg-color-mgray: #6c7276;
  --bg-color-lgray: #94a1a8;
  --bg-color-white: white;

  --bg-color-n0: white;
  --bg-color-n1: #66D2FF;
  --bg-color-n2: #68E6E8;
  --bg-color-n3: #7FFFDB;
  --bg-color-n4: #68E89E;
  --bg-color-n5: #16aa54;
  --bg-color-n6: var(--bg-color-dgreen);

}

/*フォント書体と基本色設定*/
body {
  font-family:'Noto Sans JP', sans-serif;
  color: var(--font-color-gray);
}

/*フォントサイズ設定*/
h1{font-size: 25px;}
h2{font-size: 25px;}
h3{font-size: 22px;}
h4{font-size: 20px;}
div{font-size: 20px;}
p{font-size: 20px;}
a{font-size: 20px;}
ol{font-size: 20px;}
ul{font-size: 20px;}
li{font-size: 20px;}

/*aタグの初期設定*/
a{color: var(--bg-color-dgray);}
a:hover{text-decoration: none;}

/*共通使用のクラス設定*/
.container-box{width: 95%;margin: 0 auto;}
.space{margin-top: 200px;}
.br{display: block;width: 100%;}

/*header*/
header{padding: 10px;background-color: var(--bg-color-mgreen);width: 100%;}
header>div{display: flex;justify-content: space-between;flex-wrap: wrap;}

/*.header-left h1を含むタイトル部*/
.header-left{width: 100%;}
.header-left .in-box-top{}
.header-left .in-box-top h1{color: var(--font-color-white);text-align: center;margin-top: 30px;border-bottom: 2px solid var(--font-color-white);}
.header-left .in-box-btm{text-align: center;color:var(--font-color-white);margin-bottom: 30px;font-size: 20px;}
/*.header-right 電話番号とメールフォームへのリンク部*/
/*.in-box-left 電話番号*/
/*.in-box-right メールフォーム*/
.header-right{display: flex;flex-wrap: wrap;}
.header-right .in-box-left{text-align: center;width: 100%;}
.header-right .in-box-left .in-box-in-top {
  color: var(--font-color-mgreen);
  background-color: var(--bg-color-white);
  transition: 0.5s;
  padding: 3px 10px;margin: 0 0 5px;
  border: 6px double var(--bg-color-mgreen);
  border-radius:6px;
 height: 63px;
}
.header-right .in-box-left .in-box-in-top a{display: flex;}
.header-right .in-box-left .in-box-in-top:hover{background-color: var(--bg-color-lgreen);color: var(--font-color-white);cursor: pointer;}
.header-right .in-box-left .in-box-in-top p{margin: 0;font-size: 30px;width: 100%;}
.header-right .in-box-left .in-box-in-top .img-box{width: 70px;height: 45px;}
.header-right .in-box-left .in-box-in-top .img-box img{width: 100%;height: auto;}
.header-right .in-box-left .in-box-in-mid{}
.header-right .in-box-left .in-box-in-btm{font-size: 16px;}
.header-right .in-box-right{
  position: relative;
  color: var(--font-color-mgreen);
  background-color: var(--bg-color-white);
  border: 6px double var(--font-color-mgreen);
  transition: 0.5s;
  border-radius:6px;
  width: 100%;
}
header .header-right .in-box-right{
  height: 63px;line-height: 40px;
  padding:5px 0 0 40px;margin: 30px 0;
  text-align: center;
}
.header-right .in-box-right::after{
  font-family: "Font Awesome 5 Free","sans-serif";
  font-weight: bold;
  content: '\f0e0';
  color: var(--font-color-freedial);
  font-size: 40px;
  position: absolute;left: 30px;top: 6px;
  transition: 0.5s;
}
.header-right .in-box-right:hover{background-color: var(--bg-color-lgreen);color: var(--font-color-white);cursor: pointer;}
.header-right .in-box-right:hover::after{color: var(--font-color-mgreen);}
.header-right .in-box-right a{font-size: 23px;display: block;width: 100%; height: 100%;}
.header-right .in-box-right .br{display: inline;}

/*h2を含むヘッダータイトル部分*/
.top{width: 100%; height: 400px;position: relative;margin-bottom: 50px;}
.top div{ width: 100%;height: 100%; background: url('img/working-001.jpg');background-size: cover;position: absolute;top:0;left: 0; opacity: 0.3;}
h2{text-align: center;margin: 100px 0;position: absolute;top:50px;color: var(--font-color-gray);z-index: 10;width: 100%;height: 200px;}
h2 span{font-size: 1.6em;font-weight: bold;margin-top: 10px;display: block;}
.desc{
  margin: 70px 25px;
  font-family: 'Noto Serif JP', serif;
}

/*ナビゲーション 常設*/
nav{padding: 50px 0 100px;background-color: var(--bg-color-lgreen);}
nav ol{list-style: none;display: flex;flex-wrap: wrap;justify-content: center;padding: 0;}
nav>ol>li{
  position: relative;width: 90%;height: 100px;
  padding:30px 0 30px 70px;margin: 5px 0;text-align: center;
  color: var(--font-color-dgreen);
  background: var(--bg-color-white);
  border-top: solid 6px var(--bg-color-dgreen);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
}
nav>ol>li a{color: var(--font-color-dgreen);display: block;height: 100%;}
nav>ol>li li{
  position: relative;width: 90%;height: 40px; text-align: center;
  padding: 5px;margin: 15px 0;
  background: var(--bg-color-white);
  box-shadow: 0px 0px 0px 10px var(--bg-color-white);
  border: dashed 2px var(--bg-color-dgreen);
}
nav>ol li:hover{cursor: pointer;}
nav>ol>li .br{display: inline;}
nav>ol>li li .br{display: inline;}
nav .nav-other{display: block;background: none;border: none;box-shadow: none;margin: 0;padding: 30px 0 0;}
/*ナビアイコン*/
nav span:first-child::after{
  display: block;
  font-family: "Font Awesome 5 Free","sans-serif";
  font-weight: bold;
  color: var(--font-color-mgreen);
  font-size: 50px;
  transition: 0.5s;
  position:absolute;top:10px;left:10px;
}
nav .nav-work span:first-child::after{content: '\f807';}
nav .nav-request span:first-child::after{content: '\f086';}
nav .nav-range span:first-child::after{content: '\f073';}
nav .nav-money span:first-child::after{content: '\f555';}
nav .nav-q span:first-child::after{}
nav .nav-m span:first-child::after{}
nav .nav-c span:first-child::after{}

/*トップナビゲーション*/
.sec-top{position: relative;}
.sec-top>input{display: none;}
.hum-head{
  display:flex;justify-content: space-around; position: fixed;top:0;left: 0;z-index: 19; width: 100%;height: 80px;background-color: var(--bg-color-white);border-bottom: 2px solid var(--bg-color-mgreen);padding: 0 10px;
  transition: .5s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateY(-105%);
  transform: translateY(-105%);/*上に隠しておく*/

}
.sec-top input+.on{
  -webkit-transform: translateY(0%);
  transform: translateY(0%);/*中身を表示（下へスライド）*/
  box-shadow: 6px 0 10px rgba(0,0,0,0.5);
}
.hum-head div{padding-top: 8px;color: var(--font-color-mgreen);}
.hum-head div:hover{opacity: 0.7;}
.hum-head div a{color: var(--font-color-dgreen);cursor: pointer;}
.hum-head div label{cursor: pointer;}
.hum-head>div span::after {
  display: block;
  font-family: "Font Awesome 5 Free","sans-serif";
  font-weight: bold;
  color: var(--font-color-mgreen);
  font-size: 30px;
  transition: 0.5s;
  position:relative;top:0;left:0;
  text-align: center;
}
.hum-head>div:first-child {
  width: 80px;margin-right: 5px;
}
.hum-head>div:nth-child(2),
.hum-head>div:nth-child(3),
.hum-head>div:last-child{
  width: 65px;padding-top: 15px;
  font-size: 16px;font-weight: bold;text-align: center;
}
.hum-head>div:nth-child(2) span::after {
  content: '\f095';
}
.hum-head>div:nth-child(3) span::after{
  content: '\f0e0';
}
.hum-head>div:last-child span::after{
  content: '\f0c9';
  height: 30px;
}
/*ハンバーガーメニュー*/
.hum-nav input{display: none;}
.hum-nav{
  position: fixed;top:0;left: 0;background-color: var(--bg-color-dgreen);width: 80%; height: 100%;z-index: 99;padding-top: 50px;
  transition: .5s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}
.hum-shadow{
  display: none;
  position: fixed;top: 0;left: 0;background-color: gray; opacity: 0.7;width: 100%;height: 100%;z-index: 98;}
.hum-nav>ol{list-style: none;padding: 0;margin: 0; background-color: var(--bg-color-dgreen);}
.hum-nav>ol ol{list-style: none;padding: 0;margin: 0; background-color: var(--bg-color-dgreen);}
.hum-nav ol .br{display: inline;}
.hum-nav li{
  width: 100%; height: 50px;line-height: 50px;
  border-bottom: 1px solid var(--bg-color-white);
  padding-left: 20px;
  margin: 0 ;
  transition: 0.5s;
  position: relative;
}
.hum-nav .nav-top a{color: var(--font-color-mgreen);}
.hum-nav .nav-close{border-bottom: none;}
.hum-nav .nav-close label{display: block;text-align: center;color: var(--font-color-mgreen);}
.hum-nav .nav-close label:hover{cursor: pointer;}
.hum-nav li:hover{background-color:var(--font-color-white);cursor: pointer;}
.hum-nav li:hover a{color:var(--font-color-dgreen);cursor: pointer;}
.hum-nav ol a{color:var(--font-color-white);}
.hum-nav .nav-top a:hover{color: var(--font-color-mgreen);}
/*表示の切り替え*/
#hum-nav-check:checked ~.hum-nav{
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 0 8px 10px rgba(0,0,0,.7);
}
#hum-nav-check:checked ~.hum-shadow{
  display: block;
}
/*補助アイコン*/
.hum-nav .nav-top{text-align: center;}
.hum-nav .nav-top::before{
  font-family: "Font Awesome 5 Free","sans-serif";
  font-weight: bold;
  content: '\f0aa';
  color: var(--font-color-mgreen);
  font-size: 20px;
  transition: 0.5s;
  position:relative;top:0;left:-10px;
  text-align: center;
}
.hum-nav .nav-close label::before{
  font-family: "Font Awesome 5 Free","sans-serif";
  font-weight: bold;
  content: '\f057';
  color: var(--font-color-mgreen);
  font-size: 20px;
  transition: 0.5s;
  position:relative;top:0;left:-10px;
  text-align: center;
}

/*作業内容について*/
.sec-work{margin: 150px 0 50px;}
.sec-work ul{list-style: none;display: flex;}
.sec-work ul {
  margin: 0 auto 50px;
  width: 99%;
}
.sec-work ul li {
  width: 25%; /* ウィンドウの幅が広くなった時のために％で指定 */
  height: 160px;
  padding-top: 50px;
  padding-left: 0;
  background: var(--bg-color-n1); /* １番目のボックスの色指定 */
  position: relative;
  writing-mode: vertical-rl;
}
.sec-work ul li span:first-child{display: block;height: 65px;}
.sec-work li.n2 { background: var(--bg-color-n2); } /* ２番目のボックスの色指定*/
.sec-work li.n3 { background: var(--bg-color-n3); } /* ３番目のボックスの色指定*/
.sec-work li.n4 { background: var(--bg-color-n4); } /* ４番目のボックスの色指定*/
.sec-work li.n5 { background: white;  width: 60px;} /* ５番目のボックスの色指定*/
/* ボックスの左側に三角形を作る */
.sec-work ul li:before {
  border-left: 20px solid #FFFFFF; /* １番目の三角形は背景色と同じ色を指定 */
  border-top: 80px solid transparent;
  border-bottom: 80px solid transparent;
  content: "";
  position: absolute;
  left: 0; /* ボックスの左に合わせて三角形を作る */
  top: 0;
}

.sec-work li.n2::before { border-left-color: var(--bg-color-n1); } /* ２番目の三角形は１番目のボックスと同じ色を指定 */
.sec-work li.n3::before { border-left-color: var(--bg-color-n2); } /* ３番目の三角形は２番目のボックスと同じ色を指定 */
.sec-work li.n4::before { border-left-color: var(--bg-color-n3); } /* ４番目の三角形は３番目のボックスと同じ色を指定 */
.sec-work li.n5::before { border-left-color: var(--bg-color-n4); } /* ５番目の三角形は４番目のボックスと同じ色を指定 */

/* 最後のボックスにだけ、右側に付ける三角形を作成する */
.sec-work li.n4:after {
  border-left: 20px solid var(--bg-color-n4); /* 最後の三角形は最後のボックスと同じ色を指定 */
  border-top: 80px solid transparent;
  border-bottom: 80px solid transparent;
  content: "";
  position: absolute;
  right: -20px; /* 三角形の幅の分だけ右にずらす */
  top: 0;
}

h3{
  height:80px;line-height:80px;
  margin:50px 5px;padding: 0;
  text-align:center;
  border-top: 5px solid var(--bg-color-dgreen);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
}

.sec-work .caution{margin: 0 20px;}
.sec-work .caution span{
  border-bottom: 3px solid var(--font-color-caution);
}
h4 {
  border-bottom: solid 10px var(--bg-color-lgreen);
  position: relative;
  margin: 50px 0;
}
h4::after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 10px var(--bg-color-dgreen);
  width: 20%;
  right: 0;
}
.sec-work >div>p{
  position: relative;
  color: #158b2b;
  padding: 10px 0;
  text-align: center;
  margin: 80px auto 60px;
}
.sec-work >div>p::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 150px;
  height: 85px;
  border-radius: 50%;
  border: 5px solid #a6ddb0;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.sec-work .n1 h4{border-bottom-color: var(--bg-color-n1);}
.sec-work .n1 h4::after{border-bottom-color: var(--bg-color-n2);}
.sec-work .n2 h4{border-bottom-color: var(--bg-color-n2);}
.sec-work .n2 h4::after{border-bottom-color: var(--bg-color-n3);}
.sec-work .n3 h4{border-bottom-color: var(--bg-color-n3);}
.sec-work .n3 h4::after{border-bottom-color: var(--bg-color-n4);}
.sec-work .n4 h4{border-bottom-color: var(--bg-color-n4);}
.sec-work .n4 h4::after{border-bottom-color: var(--bg-color-n5);}
.sec-work .n5 h4{border-bottom-color: var(--bg-color-n5);}
.sec-work .n5 h4::after{border-bottom-color: var(--bg-color-n6);}

.sec-work .box{}
.sec-work .in-box{display: flex;flex-wrap: wrap;justify-content: space-around;}
.sec-work .in-box-a{
  padding:7px;margin: 10px;
  border:1px solid #ccc;
  background:var(--bg-color-white);
  box-shadow: 1px 1px 5px rgba(20,20,20,0.2);/* ドロップシャドウ 【横位置 縦位置 ぼかし幅 色】の順に記述 */
}
.sec-work .in-box-b{padding: 30px;line-height: 2em;}
.sec-work .in-box-top{text-align: center;}
.sec-work .in-box-btm{}
.sec-work .img-box{
  width: 280px;height: 230px;margin: 0 auto;
}
.sec-work .img-box img{width: 100%;height: auto;}

/*swiper*/
.swiper-box{
  width: 100%;
}
div.swiper-container{
  position: relative;
}
.swiper-wrapper{
}
.swiper-slide{
}
.swiper-slide:hover{
}
.swiper-slide img {
  width: 100%;
}
.swiper-slide-active{}
.swiper-slide-prev,
.swiper-slide-next{opacity: 0.7;border: 4px solid var(--bg-color-white);}
div.swiper-button-prev,
div.swiper-button-next {
  top: 90px;
  width: 30px;
  height: 60px;
}
div.swiper-button-prev{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  left: 8px;
  right: auto;
}
div.swiper-button-next{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
  right: 8px;
  left: auto;
}
.swiper-pagination{
  padding-top: 6px;
}
span.swiper-pagination-bullet-active{
}
span.swiper-pagination-bullet{
}
/*swiperここまで*/

/*ご依頼・ご相談について*/
.sec-request{background-color: var(--bg-color-white);padding: 100px 0;}
.sec-request h3 +div{text-align: center;}
.sec-request .header-right{
  display: flex;justify-content: center;
  background-color: var(--bg-color-mgreen);
  border:6px double var(--bg-color-white);
  padding: 50px 5px 30px;margin: 10px 0 100px;
}
.sec-request .in-box-in-top{background-color: var(--bg-color-mgreen);}
.sec-request .in-box-in-top p{font-size:30px;}
.sec-request .in-box-right{
  background-color: var(--bg-color-white);
  height: 63px;line-height: 40px;
  padding:5px 0 0 80px;margin: 30px 0;
  text-align: center;
}
.sec-request .or{text-align: center;margin: 30px auto 20px;}

/*flow*/
.sec-request .contract>p {
  position: relative;
  color: #158b2b;
  padding: 10px 0;
  text-align: center;
  margin: 50px auto 60px;
}
.sec-request .contract>p::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 150px;
  height: 85px;
  border-radius: 50%;
  border: 5px solid #a6ddb0;
  border-left-color: transparent;
  border-right-color: transparent;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.sec-request ul{list-style: none;display: flex;}

.sec-request ul {
  padding-left: 0; margin: 0 0 50px 5px;
  width: 99%;
}
.sec-request ul li {
  width: 20%; /* ウィンドウの幅が広くなった時のために％で指定 */
  height: 160px;
  padding-top: 0px;
  padding-left: 20px;
  background: var(--bg-color-n1); /* １番目のボックスの色指定 */
  position: relative;
  writing-mode: vertical-rl;
}
.sec-request li.n0{width: 10px;}
.sec-request ul li span:first-child{display: block;height: 65px;}

.sec-request li.n0 { background: var(--bg-color-n0); } /* 空白用のボックスの色指定*/
.sec-request li.n2 { background: var(--bg-color-n2); } /* ２番目のボックスの色指定*/
.sec-request li.n3 { background: var(--bg-color-n3); } /* ３番目のボックスの色指定*/
.sec-request li.n4 { background: var(--bg-color-n4); } /* ４番目のボックスの色指定*/
.sec-request li.n5 { background: var(--bg-color-n5); } /* ５番目のボックスの色指定*/
.sec-request li.n6 { background: var(--bg-color-white);  width: 60px;} /* 6番目のボックスの色指定*/
/* ボックスの左側に三角形を作る */
.sec-request ul li:before {
  border-left: 20px solid var(--bg-color-white); /* １番目の三角形は背景色と同じ色を指定 */
  border-top: 80px solid transparent;
  border-bottom: 80px solid transparent;
  content: "";
  position: absolute;
  left: 0; /* ボックスの左に合わせて三角形を作る */
  top: 0;
}

.sec-request li.n0::before { border-left-color: var(--bg-color-n1); } /* ２番目の三角形は１番目のボックスと同じ色を指定 */
.sec-request li.n2::before { border-left-color: var(--bg-color-n0); } /* ２番目の三角形は１番目のボックスと同じ色を指定 */
.sec-request li.n3::before { border-left-color: var(--bg-color-n2); } /* ３番目の三角形は２番目のボックスと同じ色を指定 */
.sec-request li.n4::before { border-left-color: var(--bg-color-n3); } /* ４番目の三角形は３番目のボックスと同じ色を指定 */
.sec-request li.n5::before { border-left-color: var(--bg-color-n4); } /* ５番目の三角形は４番目のボックスと同じ色を指定 */
.sec-request li.n6::before { border-left-color: var(--bg-color-n5); } /* ６番目の三角形は５番目のボックスと同じ色を指定 */

/* 最後のボックスにだけ、右側に付ける三角形を作成する */
.sec-request li.n5:after {
  border-left: 20px solid var(--bg-color-n4); /* 最後の三角形は最後のボックスと同じ色を指定 */
  border-top: 80px solid transparent;
  border-bottom: 80px solid transparent;
  content: "";
  position: absolute;
  right: -20px; /* 三角形の幅の分だけ右にずらす */
  top: 0;
}

.sec-request .details div p{}
.sec-request .details div p:first-child{
  width: 170px;display: inline-block;margin: 20px 10px;
  background: linear-gradient(transparent 70%, var(--bg-color-n1) 70%);
}
.sec-request .details div.n1 p:first-child{
  background: linear-gradient(transparent 70%, var(--bg-color-n1) 70%);
}
.sec-request .details div.n1 p:last-child{
  margin-bottom: 50px;
}
.sec-request .details div.n0{margin-bottom: 50px;padding: 20px; border:5px dashed var(--bg-color-mgreen);}
.sec-request .details div.n2 p:first-child{
  background: linear-gradient(transparent 70%, var(--bg-color-n2) 70%);
}
.sec-request .details div.n3 p:first-child{
  background: linear-gradient(transparent 70%, var(--bg-color-n3) 70%);
}
.sec-request .details div.n4 p:first-child{
  background: linear-gradient(transparent 70%, var(--bg-color-n4) 70%);
}
.sec-request .details div.n5 p:first-child{
  background: linear-gradient(transparent 70%, var(--bg-color-n5) 70%);
}
.sec-request .details div.n6 p:first-child{
  background: linear-gradient(transparent 70%, var(--bg-color-n6) 70%);
}
.sec-request .details div p:last-child{
  margin: 0 20px;
}

/*期間の目安*/
.sec-range{margin: 100px 0 200px;padding: 50px 0; background-color: var(--bg-color-lgreen);}
.sec-range h3{background-color: var(--bg-color-white);}
.sec-range .in-box{display: flex;flex-wrap: wrap;justify-content: space-between;}
.sec-range .in-box>p{margin: 0 20px 50px; text-align: center;}
.sec-range .in-box>p:last-child{margin: 20px 5px;}
.sec-range .in-box>div{width: 100%;margin: 10px 0; text-align: center;}
.sec-range .in-box>div>div:first-child{background-color: var(--bg-color-dgreen);color:var(--font-color-white);height: 50px;line-height: 50px;}
.sec-range .in-box>div>div:last-child {
  border:1px solid var(--bg-color-dgreen);
  background-color: var(--bg-color-white);
  height: 70px;line-height: 70px;}


/*金額目安*/
.sec-money{margin: 200px 0;}
.sec-money .caution span{border-bottom: 3px solid var(--font-color-caution);}
.sec-money .in-box div{text-align: center;}
.sec-money .in-box div:first-child{}
.sec-money .in-box div:nth-child(2){font-size: 30px; color:var(--font-color-mgreen);margin-bottom: 50px;}
.sec-money .in-box div:last-child{padding: 0 20px;}


/*お問合わせフォーム*/
.sec-mail{background-color: var(--bg-color-lgreen);padding: 50px 0;margin: 200px 0 0;}
.sec-mail h3{
  width: 90%;height: 40px;line-height: 33px; text-align: center;
  padding: 5px;margin: 15px auto 50px;
  background: var(--bg-color-white);
  box-shadow: 0px 0px 0px 10px var(--bg-color-white);
  border: dashed 2px var(--bg-color-dgreen);
  font-size: 20px;
}
.sec-mail>div>div{margin: 0 auto;}
.sec-mail form>div{display: flex;justify-content: center;flex-wrap: wrap;margin-bottom: 50px;}
.sec-mail form label{width: 100%; padding:0 0 0 15px;}
.sec-mail form input[type="text"]{
  width: 95%; height: 40px;
  border:none;
}
.sec-mail form input[type="text"]:focus{
  outline: none;border: 2px solid var(--bg-color-dgreen);
}
.sec-mail form textarea{
  width: 95%;
}
.sec-mail form textarea:focus{
  outline: none;
  border: 2px solid var(--bg-color-dgreen);
}
input.btn-submit {
  text-decoration: none;
  background: var(--bg-color-mgreen);/*ボタン色*/
  color: #FFF;
  border: 6px double white;
  border-radius: 6px;
  margin: 10px;
  width: 100px;
}
input.btn-submit:hover{opacity: 0.8;}
input.btn-submit:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
  outline: none;
}

input.btn-reset {
  text-decoration: none;
  background: #c1c1bd;/*ボタン色*/
  color: var(--font-color-white);
  border: 6px double white;
  border-radius: 6px;
  margin: 10px;
  width: 100px;
}
input.btn-reset:hover{opacity: 0.8;}
input.btn-reset:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
  outline: none;
}
input.btn-submit:focus-within{outline: none;}
input.btn-reset:focus-within{outline: none;}

.sec-company{padding: 50px 0; margin: 0;background-color: var(--bg-color-mgreen);}
.sec-company h3{
  width: 90%;height: 40px;line-height: 33px; text-align: center;
  padding: 5px;margin: 15px auto 50px;
  background: var(--bg-color-white);
  box-shadow: 0px 0px 0px 10px var(--bg-color-white);
  border: dashed 2px var(--bg-color-dgreen);
  font-size: 20px;

}
.sec-company .in-box{text-align: center;}
.sec-company .in-box>div:first-child{font-size: 1.2em;color: var(--bg-color-white);}
.sec-company .in-box>div:nth-child(2){margin-bottom: 50px;color: var(--bg-color-white);}

footer{padding: 40px 10px; background-color: var(--bg-color-dgray);color: var(--bg-color-lgray);text-align: center;}
footer div{font-size: 16px;}

@media(min-width:600px){
  .container-box{width: 85%;margin: 0 auto;}
  h3{margin: 50px 50px;}
  header{height: 160px;}
  header>div{justify-content: center;}
  .header-left{width: 40%;margin: 0 10px;}
  .header-right{width: 55%;}
  .header-right .in-box-left{width: 280px;margin: 0 5px;}
  .header-right .in-box-left .in-box-in-top p{font-size: 26px;}
  .header-right .in-box-right{}
  header .header-right .in-box-right{
    width: 120px;height: 100%;margin: 0;padding: 0;line-height: 20px;
    text-align: center;
  }
  header .header-right .in-box-right a{padding-top: 15px;}
  .header-right .in-box-right .br{display: block;width: 100%;}
  .header-right .in-box-right::after{
    font-size: 50px;
    left: 30px;top: 80px;
  }

  .hum-head>div:first-child {
    width: 64%;margin-left: 30px; margin-right: 5px;
  }
  .hum-head>div:nth-child(2),
  .hum-head>div:nth-child(3),
  .hum-head>div:last-child{
    width: 12%;
  }
  .hum-head>div:first-child .br{display: inline-block;width: 30px;}
  .hum-head>div:first-child a{font-size: 30px;line-height: 65px;}
  .hum-head>div:first-child span:last-child{font-size: 25px;}

  nav{padding: 100px 30px;}
  nav>ol{justify-content:space-around;margin: 0 20px;}
  nav>ol>li{
    position: relative;width: 45%;height: 100px;
    padding:30px 0 30px 70px;margin: 5px 0 15px;text-align: center;
    color: var(--font-color-dgreen);
    background: var(--bg-color-white);
    border-top: solid 6px var(--bg-color-dgreen);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
  }
  nav>ol>li a{color: var(--font-color-dgreen);}
  nav>ol .nav-other{width: 100%;}
  nav>ol ol{justify-content:center;margin: 0 20px;}
  nav>ol>li li{
    position: relative;width: 35%;height: 40px; text-align: center;
    padding: 5px;margin: 15px 30px;
    background: var(--bg-color-white);
    box-shadow: 0px 0px 0px 10px var(--bg-color-white);
    border: dashed 2px var(--bg-color-dgreen);
  }

  .sec-work ul li{font-size: 32px;padding: 15px 30px 0 0;}
  .sec-work .n1 .in-box{}
  .sec-work .n1 .in-box-a,
  .sec-work .n1 .in-box-b{width: 45%;}
  .sec-work .n1 .in-box{}
  .sec-work .n2 .in-box-a{width: 45%;order:2;}
  .sec-work .n2 .in-box-b{width: 45%;order:1;}
  .sec-work .n3 .in-box-a,
  .sec-work .n3 .in-box-b{width: 45%;}
  .sec-work .n4 .in-box-a:first-child{width: 45%;order:1;}
  .sec-work .n4 .in-box-a:nth-child(2){width: 45%;order:2;}
  .sec-work .n4 .in-box-a:nth-child(3){width: 45%;order:4;}
  .sec-work .n4 .in-box-a:nth-child(4){width: 45%;order:5;}
  .sec-work .n4 .in-box-a:nth-child(5){width: 45%;order:6;}
  .sec-work .n4 .in-box-b{width: 100%;order:3;padding: 30px 55px;}
  .swiper-slide-active{}
  .swiper-slide-prev,
  .swiper-slide-next{border: 20px solid var(--bg-color-white);}
  div.swiper-button-prev,
  div.swiper-button-next {
    top: 200px;
    width: 30px;
    height: 60px;
  }

  .sec-request>div>div:nth-child(1){padding: 20px 50px;}
  .sec-request .details p:last-child{padding-left: 20px;}
  .sec-request .header-right{width: 100%;flex-wrap: nowrap;}
  .sec-request .header-right .in-box-left{width: 300px;}
  .sec-request .header-right .in-box-left p{font-size: 32px;}
  .sec-request .header-right .in-box-right{width: 180px;height: 120px;padding: 0;margin: 0;}
  .sec-request .header-right .in-box-right::after{top:55px;left: 65px;}
  .sec-request ul>li{font-size: 26px;padding: 15px 28px 0 0;}

  .sec-range .in-box div div:first-child{font-size: 16px;}
  .sec-range .in-box p{padding: 0 40px;}
  .sec-range .in-box .in-box-left,
  .sec-range .in-box .in-box-center,
  .sec-range .in-box .in-box-right{width: 31%;}

  .sec-money .in-box div{margin: 0 50px;}
  .sec-money .in-box div:nth-child(2){font-size: 40px;}
}
@media(min-width:900px){
  .header-left{width: 50%;}
  .header-right{width: 45%;justify-content: space-around;}
  .header-right .in-box-left{width: 280px;}
  .header-right .in-box-right{padding:0;}
  .header-right .in-box-right a{padding-top:10px;}

  nav>ol>li a span:first-child::after{left: 50px;}

  .sec-work ul li{padding-right: 60px;}
  .sec-work .img-box{
    width: 350px;height: 280px;
    margin: 0 auto;
  }
  .sec-work .img-box img{width: 100%;height: auto;}
  div.swiper-button-prev,
  div.swiper-button-next {
    top: 300px;
  }

  .sec-request>div>div:first-child{padding: 50px 0;}
  .sec-request .header-right{padding: 50px;}
  .sec-request .header-right .in-box-right{}
  .sec-request ul li{padding: 15px 45px 0 0;}
}
@media(min-width:1200px){
  h1{font-size: 40px;}
  h2{font-size: 40px;}
  h3{font-size: 32px;}
  h4{font-size: 28px;}
  div{font-size: 25px;}
  p{font-size: 25px;}
  a{font-size: 25px;}
  ol{font-size: 25px;}
  ul{font-size: 25px;}
  li{font-size: 25px;}

  h3{margin: 50px 50px;}

  .container-box{width: 75%;margin: 0 auto;}
  .on{display: none;}

  header{padding: 25px 0;height: 200px;}
  header .header-left .in-box-btm{font-size: 35px;margin: 0;}

  /*header*/
  /*.header-left h1を含むタイトル部*/
  .pc-header{
    position: fixed;z-index: 98;
    height: 100px;padding: 10px;
  }

  .pc-header div{justify-content:center;flex-wrap: nowrap;height: 80px;}
  .pc-header .header-left{display: flex;width: 500px;margin: 0;}
  .pc-header .header-left .in-box-top h1{border: none;margin: 0;font-size: 30px;line-height: 60px;}
  .pc-header .header-left .in-box-btm {font-size: 28px;padding: 0;margin-left:20px;line-height: 60px;}
  /*.header-right 電話番号とメールフォームへのリンク部*/
  /*.in-box-left 電話番号*/
  /*.in-box-right メールフォーム*/
  .pc-header .header-right{display: flex;flex-wrap: nowrap;width: 800px;}
  .pc-header .header-right .in-box-left{text-align: center;width: 550px;height: 80px;line-height: 65px; display: flex;flex-direction: column; flex-wrap: wrap;}
  .pc-header .header-right .in-box-right{margin: 0 10px;width: 170px;padding:0;}
  .pc-header .header-right .in-box-right a{display: block;font-size: 20px;padding-right: 65px;}
  .pc-header .header-right .in-box-left .in-box-in-top {width: 280px;height: 100%; padding: 0;}
  .pc-header .header-right .in-box-left .in-box-in-mid{width: 300px;height: 40px;}
  .pc-header .header-right .in-box-left .in-box-in-btm{width: 300px;height: 40px;}
  .pc-header .header-right .in-box-left .in-box-in-top .img-box{margin-left: 10px;}
  .pc-header .header-right .in-box-right::after{top:25px;left: 90px;}

  .sec-top .top{height: 500px;}
  .sec-top .top h2{top:100px;}

  nav ol li{width: 270px;height: 200px; padding: 30px 0;}
  nav>ol>li a span:first-child::after{top:80px;left: 100px;font-size: 60px;}
  nav ol ol li{height: 60px;}

  .sec-work ul li{padding-right: 80px;}
  .sec-work .caution{padding: 0 100px;}
  .sec-work .img-box{
    width: 400px;height: 340px;
    margin: 0 auto;
  }
  div.swiper-button-prev,
  div.swiper-button-next {
    top: 370px;
  }

  .sec-request .header-right{padding: 50px 100px;}

  .sec-request ul li{padding: 15px 60px 0 0;}

  .sec-request .details div p:first-child{width: 250px;}

  .sec-money .in-box div{margin: 0 100px;}

  .sec-mail>div>div{margin: 0 auto;}
  .sec-mail form>div{display: flex;justify-content: center;flex-wrap: wrap;margin-bottom: 50px;}
  .sec-mail form label{width: 300px; padding:0 0 0 15px;}
  .sec-mail form input[type="text"]{
    width: 400px; height: 40px;
    border:none;
  }
  .sec-mail form input[type="text"]:focus{
    outline: none;border: 2px solid var(--bg-color-dgreen);
  }
  .sec-mail form textarea{
    width: 700px;
  }
  .sec-mail form textarea:focus{
    outline: none;
    border: 2px solid var(--bg-color-dgreen);
  }
  input.btn-submit,
  input.btn-reset{width: 150px;}

  .pc-hum-nav{
    position: fixed;top:100px;left: 0;z-index: 97;
    background-color: var(--bg-color-dgreen);
    width: 100%; height: 40px;padding:0;
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    display: block;
    transition: .5s ease-in-out;
    -webkit-transform: translateY(-150px);
    transform: translateY(-150px);
  }
  .hum-head ~.on{
    transition: .5s ease-in-out;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }

  .hum-nav>ol{display: flex;justify-content: center;padding: 5px 0;}
  .hum-nav>ol ol{list-style: none;padding: 0;margin: 0; background-color: var(--bg-color-dgreen);}
  .hum-nav ol .br{display: inline;}
  .hum-nav li{border: none;border-right: 1px solid var(--bg-color-white); line-height: 35px;width: auto;height: 35px; padding: 0 10px;margin: 0;}
  .hum-nav>ol>li>a{font-size: 20px;}
  .hum-nav .nav-close{display: none;}
  /*表示の切り替え*/
  #hum-nav-check:checked ~.hum-nav{
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示（右へスライド）*/
    box-shadow: 0 8px 10px rgba(0,0,0,.7);
  }
  /*補助アイコン*/
  .hum-nav .nav-top::before{
    position:relative;top:0;left:-5px;
  }
}
@media(min-width:1800px){
}