:root {
  --obc: rgba(240, 180, 60, 0.1);
}

.obc {
  background: #f5f5f5;
}

/* si = small item */
@media (max-width:600px) {
  .si {
    grid-template-columns: 1fr;
  }

  .si2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .si3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .si4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .si5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .si6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

.banner {
  padding: 50px 0;
  padding: clamp(30px, 5vw, 60px) 0;
}

.item {
  margin-top: 30px;
  margin-top: clamp(20px, 3vw, 40px);
  gap: 30px;
  gap: clamp(20px, 3vw, 40px);
}

.item img {
  width: 50px;
  width: clamp(40px, 5vw, 60px);
}

.item h6 {
  margin-top: 15px;
  margin-top: clamp(10px, 1.5vw, 20px);
}

.item p {
  color: #666;
}

main {
  padding-bottom: 60px;
  padding-bottom: clamp(40px, 6vw, 80px);
}

.form {
  padding: 0;
  padding-top: 30px;
  padding-top: clamp(20px, 3vw, 40px);
}

main div {
  gap: 15px;
  gap: clamp(10px, 1.5vw, 20px);
}

main a {
  background-color: #fff;
  border-radius: 6px;
  font-weight: 400;
  padding: 18px;
  padding: clamp(15px, 2vw, 20px);
  background-image: url("../image/arrow.svg");
  background-repeat: no-repeat;
  background-position: 95% center;
  background-size: 6px auto;
}

main a:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-image: url("../image/arrow2.svg");
}

main img {
  width: 50px;
  width: clamp(40px, 5vw, 60px);
  margin-right: 18px;
  margin-right: clamp(15px, 2vw, 20px);
}

@media (max-width:900px) {
  .formbox {
    margin-top: 25px;
    margin-top: clamp(20px, 2.5vw, 30px);
  }
}

.formbox ul {
  gap: 30px;
  gap: clamp(20px, 3vw, 40px);
}

.formbox input[type="submit"] {
  background: #fa0;
}

.formbox input[type="submit"]:hover {
  background: #f40;
}

.formbox ul li {
  float: left;
  width: 50%;
  text-align: center;
  margin-bottom: 20px;
}

.formbox ul li:last-of-type {
  width: 100%;
  margin-bottom: 0;
}

.fbox {
  background: #fff8e9;
  padding: 30px;
  padding: clamp(20px, 3vw, 40px);
  border-radius: 15px;
}
.formbox ul li textarea {
  width: 95%;
}
label {
  padding: 0 12px;
  margin-right: 10px;
  background: #fff;
}

input[type="text"], input[type="password"], input[type="file"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="search"], input[type="color"], select, textarea {
  border: 0;
  border-left: 0;
  border-bottom: solid #ccc 1px;
  background: none;
}

input[type="text"]:hover, input[type="password"]:hover, input[type="file"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="tel"]:hover, input[type="number"]:hover, input[type="range"]:hover, input[type="date"]:hover, input[type="month"]:hover, input[type="week"]:hover, input[type="time"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="search"]:hover, input[type="color"]:hover, select:hover, textarea:hover {
  border: 0;
  border-left: 0;
  background: #fff;
  border-bottom: solid #888 1px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="search"]:focus, input[type="color"]:focus, select:focus, textarea:focus {
  border: 0;
  border-left: 0;
  border-bottom: solid var(--redpp) 1px;
  background: rgba(255, 0, 0, 0.1);
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #444;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #444;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #444;
}

input:-o-input-placeholder, textarea:-o-input-placeholder {
  color: #444;
}

input:input-placeholder, textarea:input-placeholder {
  color: #444;
}

label {
  background: #fff;
  border: 0;
}

label:hover {
  background: #fa0;
  border: 0;
  color: #fff;
}

.formbox ul li input[type="text"], .formbox ul li input[type="password"], .formbox ul li input[type="file"], .formbox ul li input[type="email"], .formbox ul li input[type="url"],
.formbox ul li input[type="tel"], .formbox ul li input[type="number"] {
  width: 90%;
}

@media (max-width:600px) {
  .formbox ul li {
    float: none;
    width: 100%;
  }

  .formbox ul li input[type="text"], .formbox ul li input[type="password"], .formbox ul li input[type="file"], .formbox ul li input[type="email"], .formbox ul li input[type="url"],
  .formbox ul li input[type="tel"], .formbox ul li input[type="number"], .formbox ul li textarea {
    width: 100%;
  }
}

.formbox input[type="submit"] {
  background: #fa0;
}

.formbox input[type="submit"]:hover {
  background: #f40;
}

@media (min-width:901px) {
  .formbox ul li.lbox label {
    margin: 5px;
  }
}

.jq {
  white-space: nowrap;
}

.str_move {
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
}

.jq {
  margin-bottom: 10px;
  margin-top: 45px;
  margin-top: clamp(30px, 4.5vw, 60px);
}

.jq i, .jq2 i {
  display: inline-block;
  line-height: 1;
  background: rgba(240, 180, 60, 0.5);
  margin: 0 5px;
  border-radius: 6px;
  padding: 10px 20px;
}

.jq i:nth-child(2n), .jq2 i:nth-child(2n) {
  background: #CEDDF0;
}