/* 共通設定 */
html {
  font-size: 62.5%;
}

body {
  position: relative;
}

.inner {
  margin: 0 auto;
}
/* Autofill スタイルの上書き */
input:-internal-autofill-selected {
  background-color: #fff !important; /* 白背景に固定 */
  background-image: none !important; /* 背景画像を無効化 */
  color: inherit !important; /* テキスト色を継承 */
}

/* header */


/* form */
.form {
  background-color: #fff;
  padding: 45px 0;
}

.form .title {
  height: 61px;
  width: 100%;
  background-color: #1ab188;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 700;
  font-family: Arial, sans-serif; 
}
.second-title{
  height: 61px;
  width: 100%;
  background-color: #1ab188;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  margin: 55px 0px;
}
.form p{
  font-weight: 600;
}
.form label{
  font-weight: 600;
  font-size: 1.5rem;
}
.form .box {
  padding: 54px 0 45px;
  background-color: #f3f3f3;
}

.form ul li.cname {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.form ul li.cname p {
  margin-top: 15px;
}

.form ul li.cname input {
  margin-top: 15px;
  background-color: #fff;
  width: 100%;
  border: 0;
  padding: 0 15px;
  box-sizing: border-box;
}

.form .box .cname input:focus {
  outline: orange 2px solid;
}
.box ul .required-item {
  background-color: #ff9966;
  color: #fff;
  padding: 1px 5px;
  margin-left: 15px;
  box-sizing: border-box;
  font-size: 1.3rem;
}
.required-item {
  background-color: #ff9966;
  color: #fff;
  padding: 1px 5px;
  margin-left: 15px;
  box-sizing: border-box;
  font-size: 1.3rem;
}
.form ul li.caddress {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 20px;
}

.form ul li.caddress input {
  margin-top: 15px;
  background-color: #fff;
  width: 100%;
  height: 55px;
  border: 0;
  padding: 0 15px;
  box-sizing: border-box;
}

.form .box .caddress input:focus {
  outline: orange 2px solid;
}

.form ul li.hpurl {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 800px;
  margin-top: 15px;
}

.form ul li.hpurl p {
  font-size: 1.5rem;
}

.form ul li.hpurl input {
  margin-top: 15px;
  background-color: #fff;
  width: 800px;
  height: 55px;
  border: 0;
  padding: 0 15px;
}

.form .box .hpurl input:focus {
  outline: orange 2px solid;
}

.form ul li.gyoukai {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 20px;
}

.form ul li.gyoukai select {
  margin-top: 15px;
  background-color: #fff;
  width: 100%;
  border: 0;
  padding: 0 15px;
  transition: border-color 0.3s ease; /* 枠の色を滑らかに変化 */
  box-sizing: border-box;
}


.form ul li.employees ,.established,.representative,.capital,.sales ,.business_contents,.nearest_station{
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 800px;
  margin-top: 20px;
}

.form ul li.employees p ,.established p,.representative p, .capital p, .sales p ,.business_contents p,.nearest_station p{
  font-size: 1.5rem;
}

.form ul li.employees input ,.established input ,.representative input, .capital input, .sales input,.business_contents input,.nearest_station input{
  margin-top: 15px;
  background-color: #fff;
  width: 800px;
  height: 55px;
  border: 0;
  padding: 0 15px;
}

.form .box .employees input:focus, 
.gyoukai select:focus,
.nearest_station input:focus,
.representative input:focus,
.capital input:focus,
.sales input:focus,
.business_contents input:focus,
.established input:focus {
  outline: orange 2px solid;
}

.form ul li.tel {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 20px;
}

.form ul li.tel input {
  margin-top: 15px;
  background-color: #fff;
  width: 100%;
  border: 0;
  padding: 0 15px;
  box-sizing: border-box;
}

.form .box .tel input:focus {
  outline: orange 2px solid;
}

.form ul li.publish {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 800px;
  margin-top: 20px;
}

.form ul li.publish label {
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  font-weight: 600
}

.form ul li.publish input[type="checkbox"] {
  margin-right: 10px; /* チェックボックスとラベルの間に少し余白を追加 */
}

.form .text {
  text-align: center;
  font-size: 1.5rem;
  padding-top: 45px;
}

.form .btn {
  margin: 0 auto;
  margin-top: 42px;
  display: flex;
  background-color: #1ab188;
  color: #fff;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  font-weight: 700;
  border: none;
  transition: background-color 0.3s ease;
}
.form .btn:hover {
  background-color: #22c9a2; 
}
.upload-section{
  width: 800px;
  margin: 0 auto;
  padding: 20px 0px;
}
.small-text {
  font-size: 0.85em; /* 必要に応じてサイズ調整 */
  font-weight: 400;
}
.upload-section input{
  margin-top: 10px;
  margin-left: 20px;
}
/* footer */
footer {
  padding: 55px 0 116px;
}

footer h2 {
  font-size: 4rem;
  font-weight: 700;
}

footer p {
  font-size: 2rem;
}
/* PC幅 */
@media screen and (min-width: 769px) {
  .inner {
    width: 70%;
  }
  .form ul li.cname,
  .form ul li.caddress,
  .form ul li.gyoukai,
  .form ul li.tel{
    width: 80%;
  }
  .form .text {
    font-size: 1.5rem;
  }
  .form ul li.cname input,
  .form ul li.caddress input,
  .form ul li.gyoukai select,
  .form ul li.tel input{
    height: 55px;
  }
  .form .btn{
    width: 465px;
    height: 60px;
    font-size: 2.5rem;
  }

  
}
/* スマホ・タブレット幅 */
@media screen and (max-width: 768px) {
  .inner {
    width: 90%;
  }
  .form ul li.cname,
  .form ul li.caddress,
  .form ul li.gyoukai,
  .form ul li.tel{
    width: 90%;
  }
  .form .text {
    font-size: 14px;
    width: 80%;
    margin: 0 auto;
  }
  .form ul li.cname input,
  .form ul li.caddress input,
  .form ul li.gyoukai select,
  .form ul li.tel input{
    height: 40px;
  }
  .form .btn{
    width: 80%;
    height: 45px;
    font-size: 20px;
  }
  .form p{
    font-size: 20px;
  }
}