@charset "UTF-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}


/* ------------------------------------------- フッター ------------------------------------------  */
.footer {
  position: relative;
  background-color: #ffffff32;
}


/* ------------------------- contact form ----------------------------- */
.contactform {
  position: relative;
  left: 0;
  right:0;
  top:250px;
  margin:auto;

}
@media screen and (max-width: 767px) {
  .contactform {top:120px; }
}

.Form {
  padding-top: 0px;
  margin-bottom:100px;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  max-width: 800px;
}
@media screen and (max-width: 767px) {
  .Form { max-width:100%; margin-bottom:20px; padding-left:0; padding-right:0; } 
}

.Form-Item {
  width: 100%;
  display: flex;
  align-items: center;
  display:block;
}
@media screen and (max-width: 767px) {
  .Form-Item { width: 100%; }
}
.Form-Item:nth-child(5) {

}

.Form-Item-Input {
  font-family: noto-sans-cjk-jp, sans-serif;
  border: none;
  border-radius: 8px;
  padding-left: 1em;
  padding-right: 1em;
  margin-bottom:20px;
  height: 50px;
  flex: 1;
  width: 100%;
  max-width: 800px;
  background: #fff;
  font-size: 15px;
}
@media screen and (max-width: 767px) {
  .Form-Item-Input { height:50px; font-size: 12px; max-width:100%; border-radius:10px; }
}

.Form-Item-Textarea {
  font-family: noto-sans-cjk-jp, sans-serif;
  border: none;
  border-radius: 8px;
  padding-left: 1em;
  padding-right: 1em;
  padding-top:1em;
  height: 200px;
  flex: 1;
  width: 100%;
  max-width: 800px;
  background: #fff;
  font-size: 15px;
}
@media screen and (max-width: 767px) {
  .Form-Item-Textarea { height: 150px; font-size: 12px; max-width:100%; border-radius:10px; }
}

input[type="text"]:focus {
  outline: 2px solid #0C6E45;
}
input[type="email"]:focus {
  outline: 2px solid #0C6E45;
}
textarea:focus {
  outline: 2px solid #0C6E45;
}

.contactform-copy {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 12px;
  color: #707070;
  text-align: right;
}


.inquiry-hako-moji-3 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 12px;
  color:#2B2B2B;
  text-align: right;
  margin-top:10px;
}

.inquiry-hako-moji-4 {
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size: 12px;
  line-height:23px;
  color:#2B2B2B;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .inquiry-hako-moji-4 { width:80%; text-align: left; margin-left:10%; margin-right:10%; }
}
.inquiry-hako-moji-4 a {
  color:#0C6E45;
  text-decoration: none;
}


/* 同意ボタン */
.agree-narabi {
  text-align: center;
  margin-top:50px;
}

.agree {
  display: inline-block;
}

.agree-moji {
  display: inline-block;
  font-family: noto-sans-cjk-jp, sans-serif;
  margin-left: 12px;
  font-size: 15px;
  color:#2B2B2B;
}
@media screen and (max-width: 767px) {
  .agree-moji { font-size: 13.5px; margin-left:5px; }
}


.agree-moji a {
  color:#0C6E45;
  text-decoration: underline;
}


/*チェックボックスリセット */
input[type="checkbox"]  {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* チェックボックスデザイン */
input[type="checkbox"] {
  cursor: pointer;
  padding-left: 30px;/*label手前にチェックボックス用の余白を開ける*/
  vertical-align: middle;
  position: relative;
}
input[type="checkbox"]::before,
input[type="checkbox"]::after {
  content: "";
  display: block; 
  position: absolute;
}
input[type="checkbox"]::before {
  background-color: #fff;
  border-radius:7px;
  width: 30px;/*チェックボックスの横幅*/
  height: 30px;/*チェックボックスの縦幅*/
  transform: translateY(-50%);
  top: 50%;
  left: 5px;
}
input[type="checkbox"]::after {
  border-bottom: 3px solid  #0C6E45;/*チェックの太さ*/
  border-left: 3px solid  #0C6E45;/*チェックの太さ*/
  border-radius: 2px;
  opacity: 0;/*チェック前は非表示*/
  height: 10px;/*チェックの高さ*/
  width: 17px;/*チェックの横幅*/
  transform: rotate(-45deg);
  top: -7px;/*チェック時の位置調整*/
  left: 12px;/*チェック時の位置調整*/
}
input[type="checkbox"]:checked::after {
  opacity: 1;/*チェック後表示*/
}
@media screen and (max-width: 1100px) {
  input[type="checkbox"]::after { top: 0px; }
}


/* 送信ボタン */
.submit-btn {
  /* buttonタグのリセットCSS */
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  appearance: none;

  color: #fff;
  background-color: #0C6E45;
  cursor: pointer; /* ポインターカーソルを表示 */

  border-radius:12px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  height:50px;
  display: block;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: bold;
  letter-spacing: 0.05em;
  font-size: 13px;
  border: none;
}
@media screen and (max-width: 767px) {
  .submit-btn { width: 100%; font-size:16px; }
}

.submit-btn[disabled] {
  background-color:#5A5A5A;
  cursor: not-allowed; /* クリック不可のカーソルを表示 */
}


.contactform-imge {
  position: absolute;
  right:83px;
  top:400px;
  height:333px;
}
@media screen and (max-width:1100px) {
  .contactform-imge { left:0; right:0; margin:auto; top:100px; height:250px; transform:rotate(-90deg);  }
}
@media screen and (max-width:767px) {
  .contactform-imge { left:130px; right:auto; top:-30px; height:250px; transform:rotate(-90deg);  }
}




.inquiry-line-btn{
  color: #fff;
  padding: 26px 24px;
  background:linear-gradient(180deg, #0C6E45, #020309);
  border-radius:50px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:60px;
  width: 400px;
  height:80px;
  display: block;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .inquiry-line-btn { width: 100%; font-size:16px; padding: 26px 24px; margin-bottom:30px; }
}

.inquiry-line-btn a {
  text-decoration: none;
  color: #fff;
  vertical-align: middle;
}

.inquiry-line-btn:hover {
  opacity: 0.8;
}


.muryou-img {
  position: absolute;
  top:110px;
  right:0;
  left:800px;
  margin:auto;
  width:100px;
}
@media screen and (max-width:1030px) {
	.muryou-img { top:-30px; left:0; width:100px; }
}
@media screen and (max-width:757px) {
	.muryou-img { top:-30px; left:0; width:70px; }
}




/* ------------------------- green ----------------------------- */
.footer-narabi {
  position: relative;
  top:300px;
  background-color: #0C6E45;
  height:auto;
  padding-bottom:30px;
}
@media screen and (max-width:1030px) {
	.footer-narabi { top:200px; height:800px; text-align: center; padding-bottom:0px; }
}

.footer-narabi-1 {
  display: inline-block;
  margin-top:70px;
  margin-left:150px;
}
@media screen and (max-width:1030px) {
	.footer-narabi-1 { margin-top:50px; margin-left:0; margin-bottom:40px; }
}

.footer-logo {
  width:120px;
  margin-bottom:30px;
}
@media screen and (max-width:1030px) {
	.footer-logo { right:0; left:0; margin:auto; margin-bottom:30px;  }
}

.footer-moji-1 {
  font-family: noto-sans-cjk-jp, sans-serif;
  color: #fff;
  font-size:15px;
  line-height:28px;
  margin-bottom:50px;
}
@media screen and (max-width:1030px) {
	.footer-moji-1 {  margin-bottom:20px; }
}


.footer-sns-img {
  display: inline-block;
  vertical-align: middle;
  width:30px;
  height:30px;
  margin-right:10px;
  transition: all 0.4s ease;
}
.footer-sns-img:hover {
  transform: scale(1.1);
  transition: all 0.4s ease;
}

.footer-copy {
  display: inline-block;
  vertical-align: middle;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:11px;
  color: #fff;
}
@media screen and (max-width:1030px) {
	.footer-copy { display: block; position: absolute; right:0; left:0;  bottom:30px; margin:auto; }
}


.footer-narabi-2 {
  display: inline-block;
  margin-top:70px;
  vertical-align: top;
  margin-right:50px;
}
@media screen and (max-width:1030px) {
	.footer-narabi-2 { display:block; margin-top:0px; margin-right:0px; }
}


.footer-narabi-2 a,
.footer-narabi-2 p {
  font-family: dnp-shuei-ymincho-std, sans-serif;
  color: #fff;
  text-decoration: none;
}

.footer-moji-2 {
  position: relative;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  color: #fff;
  font-size:15px;
  font-weight: bold;
  line-height:35px;
  text-decoration: none;
  text-align: left;
  display: block;
}
@media screen and (max-width:1030px) {
	.footer-moji-2 { text-align:center; }
}

.footer-moji-2::after {
  position: absolute;
  left:0;
  bottom: 3px;
  content: "";
  width: 100%;
  height: 0.5px;
  background: #fff;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
@media screen and (max-width:1030px) {
	.footer-moji-2::after { display:none; }
}
.footer-moji-2:hover::after {
  transform: scale(1, 1);
}
@media screen and (max-width:1030px) {
	.footer-moji-2:hover::after { transform:none; }
}

/* ------ページトップへボタン-------- */
.footer-narabi-3 {
  position: absolute;
  bottom:270px;
  right:70px;
}
@media screen and (max-width:1030px) {
	.footer-narabi-3 { right:0; left:0; margin:auto; bottom:70px; }
}

.banner-hako-2 {
  position: relative;
}

.btn002-02 {
  width: 50px;
  height: 50px;
  object-fit: cover;

  text-decoration: none;
  outline: none;
  display: flex;
  border-radius: 100%;
  background-color: #fff;
  transition: all 0.3s ease, background-color 0.3s;
  overflow: hidden;
}
@media screen and (max-width:1030px) {
  .btn002-02 { right:0; left:0; margin:auto; }
}


/* 丸アイコン */
.btn002-02::after {
  content: '';
  position: absolute;
  top: calc(50%);
  right: 0;
  left:0;
  margin:auto;
  z-index: 3;
  display: inline-block;
  width: 1px;
  height: 1px;
  background-color:#0C6E45;
  border-radius: 20px;
  transition: all 0.3s ease;
}
/* ホバーアニメーション */
.btn002-02:hover::before {
  transform: scaleX(53);
}
.btn002-02:hover .text {
  color: #0C6E45;
}
.btn002-02:hover::after {
  background-color:#0C6E45;
  transform-origin: center;
  transform: scale(53);
}

/* 矢印アイコン */
.yajirushi-hako-2 {
  position: absolute;
  top:20%;
  right: 0;
  left:0;
  margin:auto;
  z-index: 9;
  transform:rotate(-90deg);   
}
@media screen and (max-width:1030px) {
  .yajirushi-hako-2 { position: static; top:50%; right:auto; left:auto; }
}

.btn002-02-yajirushi {
  position: relative;
  display: block;
  width: 20px;
  height: 1.5px;
  border-radius: 10px;
  background-color: #0C6E45;
  transition: all 0.3s ease;
}
@media screen and (max-width:1030px) {
  .btn002-02-yajirushi { right:0; left:0; margin:auto; }
}
.btn002-02-yajirushi::before,
.btn002-02-yajirushi::after {
  content: "";
  position: absolute;
  right: -3px;
  display: block;
  width: 13px;
  height: 1.5px;
  border-radius: 10px;
  background-color: #0C6E45;
  transition: all 0.3s ease;
}
.btn002-02-yajirushi::before {
  top: 4px;
  transform: rotate(-45deg);
}
.btn002-02-yajirushi::after {
  bottom: 4.5px;
  transform: rotate(45deg);
}
/* ホバーアニメーション */
.btn002-02:hover {
  color: #fff;
  background-color: #0C6E45;
}
.btn002-02:hover span {
  background-color: #fff;
}
.btn002-02:hover,
.btn002-02:hover span::before,
.btn002-02:hover span::after {
  background-color: #fff;
}