body {
  font-family: Meiryo;
  overflow-x: hidden;
  width: 100vw;
  background-color: #fcfcfc;
  word-break: break-all;
}

a {
  text-decoration: none !important;
  cursor:pointer;
}

a:hover {
  opacity:1.0;
}

ul{
  list-style: none;
}

.require{
  color:#dc3545;
  font-weight: normal;
  font-size: 14px;
}

.header-text {
  text-shadow: 1px 2px 2px #808080;  
  opacity:0.9;
  font-weight: bold;
  margin: 0px 0px 0px 0px;
}

.title_text{
  margin-bottom:5px;
  color: #412610;
  font-weight:bold;
  font-size:18px;
}

.label_text_require{
  width:32px;
  height:24px;
  background-color: #e02c14;
  color:white;
  padding:4px;
  border-radius:4px;
  font-size: 11px;
}


.label_text_optional{
  width:32px;
  height:24px;
  background-color: #41b965;
  color:white;
  padding:4px;
  border-radius:4px;
  font-size: 11px;
}


.address_text {
  position: relative;
  padding-left: 5em;
}


.address_text span {
  position: relative;
  top: 0;
  left: -20px;
  padding: 5px 20px;
  color: #fff;
  border-radius: 16px;
  background-image: -webkit-linear-gradient(top, #59ee4c, #3c9457);
}

.address_text span i {
  margin-right: 1rem;
}

.address_text span:after {
  position: absolute;
  top: calc(50% - 7px);
  right: -11px;
  width: 0;
  height: 0;
  content: '';
  border-width: 7px 0 7px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #49cc0d;
}


.container {
  max-width: 100%;
  min-height: 550px;
  padding: 10px;
}

.LP-header {
  width: 100%;
  height:170px;
  padding:5px 20px 5px 20px;
  overflow:auto;
  background-color: #f3f3f3;
  border-bottom: #f0f0f0 solid;
}

.LP-footer {
  position: relative;
  bottom: 0;
  left: 0;
  padding: 10px 0 0 0;
  width: 100%;
  height: 200px;
  margin-top : 40px;
  background-color: #f3f3f3;
  border-top: #f0f0f0 solid;
}


.btn_brown {
  background-image: -webkit-linear-gradient(top, #b9916f, #69401e);
  padding :4px;
  width: 150px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #522d0a;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius: 16px;
  cursor: pointer;
}


.btn_brown_medium {
  background-image: -webkit-linear-gradient(top, #b9916f, #69401e);
  padding :4px;
  width: 250px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #522d0a;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius: 16px;
  cursor: pointer;
}

.btn_brown_long {
  background-image: -webkit-linear-gradient(top, #977151, #794b25);
  padding :4px;
  width: 450px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #5f350e;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius: 16px;
  cursor: pointer;
}


.btn_green {
  background-image: -webkit-linear-gradient(top, #59ee4c, #2b6b3e);
  padding :4px;
  width: 150px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #0a7239;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius:16px;
  cursor: pointer;
}


.btn_green_medium {
  background-image: -webkit-linear-gradient(top, #59ee4c, #2b6b3e);
  padding :4px;
  width: 250px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #0a7239;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius:16px;
  cursor: pointer;
}


.btn_green_long {
  background-image: -webkit-linear-gradient(top, #59ee4c, #2b6b3e);
  padding :4px;
  width: 450px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #0a7239;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius:16px;
  cursor: pointer;
}


.btn_login {
  background-image: -webkit-linear-gradient(top, #ee9a4c, #944d3c);
  width: 350px;
  height: 50px;
  border-width: 1px;
  border-style: solid;
  border-color: #bb5b0d;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius:16px;
  cursor: pointer;
}


/* .btn_query {
  background-image: -webkit-linear-gradient(top, #65adf0, #3c5f94);
  width: 350px;
  height: 50px;
  border-width: 1px;
  border-style: solid;
  border-color: #0d36bb;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius:8px;
  cursor: pointer;
} */

.btn_matching {
  background-color: #b87b7b;
  background-image: -webkit-linear-gradient(top, #f5a8a8, #ec1202);
  width: 330px;
  height: 50px;
  border-width: 1px;
  border-style: solid;
  border: solid #dd1608 1px;
  font: 16px Arial;
  border-radius:16px;
  cursor: pointer;
  margin:0;
  font-size: 18px;
  padding: 10px 10px;
  color: white;
}

.btn_upload {
  /* background-color: #7b9bb8; */
  background-image: -webkit-linear-gradient(top, #78a2f1, #026fec);
  width: 250px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border: solid #0853dd 1px;
  font: 16px Arial;
  border-radius:8px;
  cursor: pointer;
  margin:0;
  font-size: 16px;
  padding: 5px 10px;
  color: white;
}

.btn_cancel {
  background-image: -webkit-linear-gradient(top, #bdc0bd, #616161);  
  width: 150px;
  height: 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #525151;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius: 16px;
  cursor: pointer;
}

.btn_garden1 {
  position: absolute;
  width:60px;
  height:32px;
  top: 30%;
  left: 20%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 14px;
  border: solid darkorange 1px;
  padding: 5px;
  color: white;
  text-decoration: none;
  background-color: orange;
  opacity:0.9;
}

.btn_garden2 {
  position: absolute;
  width:60px;
  height:32px;
  top: 30%;
  left: 40%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 14px;
  border: solid darkorange 1px;
  padding: 5px;
  color: white;
  text-decoration: none;
  background-color: orange;
  opacity:0.9;
}

.btn_garden3 {
  position: absolute;
  width:60px;
  height:32px;
  top: 30%;
  left: 60%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 14px;
  border: solid darkorange 1px;
  padding: 5px;
  color: white;
  text-decoration: none;
  background-color: orange;
  opacity:0.9;
}

.btn_garden4 {
  position: absolute;
  width:60px;
  height:32px;
  top: 30%;
  left: 80%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 14px;
  border: solid darkorange 1px;
  padding: 5px;
  color: white;
  text-decoration: none;
  background-color: orange;
  opacity:0.9;
}

.btn_garden5 {
  position: absolute;
  width:60px;
  height:32px;
  top: 70%;
  left: 15%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 14px;
  border: solid darkorange 1px;
  padding: 5px;
  color: white;
  text-decoration: none;
  background-color: orange;
  opacity:0.9;
}

.btn_garden6 {
  position: absolute;
  width:60px;
  height:32px;
  top: 70%;
  left: 30%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 14px;
  border: solid darkorange 1px;
  padding: 5px;
  color: white;
  text-decoration: none;
  background-color: orange;
  opacity:1;
}

.btn_ex1 {
  position: absolute;
  width:180px;
  height:32px;
  top: 50%;
  left: 30%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:auto;
  font-size: 14px;
  border: solid rgb(27, 100, 143) 1px;
  padding: 5px;
  color: white;
  text-decoration: none;
  background-color: rgb(47, 114, 168);
  border-radius: 16px;
  opacity:1;
}

.btn_ex2 {
  position: absolute;
  width:130px;
  height:32px;
  top: 60%;
  left: 70%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 14px;
  border: solid rgb(27, 100, 143) 1px;
  padding: 5px;
  color: white;
  text-decoration: none;
  background-color: rgb(47, 114, 168);
  border-radius: 16px;
  opacity:1;
}

.btn_other {
  position: absolute;
  width:100px;
  height:32px;
  top: 75%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  font-size: 14px;
  border: solid rgb(27, 100, 143) 1px;
  padding: 5px;
  color: white;
  text-decoration: none;
  background-color: rgb(47, 114, 168);
  border-radius: 16px;
  opacity:1;
}

/* background-img */
.bk_img{
  width:900px;
  height:430px;
}

.bk_img_half{
  width:450px;
  height:430px;
  overflow:hide;
}

.bk_btn{
  width:450px;
  height:430px;
}

.bk_btn:hover
{
  opacity: 0.7;
}

/* 統計情報 */
.LP_stat{
  /* position:absolute;
  top:510;
  left:100; */
  background-color: rgb(39, 27, 19);
  text-align: center;
  margin: auto;
  padding:10px;
  height: 110px;
  width: 900px;
}

#other_textarea
{
  padding: 4px;
  /* width: 450px;
  height: 128px; */
  min-height:64px;
  max-height: 384px;
  border-radius: 4px;
  overflow: auto;
}

/* フォーム入力 */
input[type="text"],
input[type="password"],
input[type="email"],
textarea
{
  outline: none;
  border: 1px solid #aaa;
  -webkit-transition: all .3s;
  transition: all .3s;
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus
{
  box-shadow: 0 0 3px #3d8bd3;
  border: 1px solid #14a3db;
}

#id_guest_password1, #id_guest_password2,
#id_email, #id_password1, #id_password2
{
  width:350px;
  height:32px;
}

input[name="customer"],
#id_customer_email, #id_customer_password1, #id_customer_password2,
#id_customer_zip, #id_customer_phone, #id_customer_phone_2, #id_customer_line_id,
#id_customer_building_room_name, #id_customer_block,
#id_guest_name, #id_guest_name_kana, #id_guest_name_after, #id_guest_name_kana_after, 
#id_guest_zip, #id_guest_block, #id_guest_phone, #id_guest_fixed_phone, 
#id_guest_email, #id_lp_zip,
#id_bp_name, #id_bp_name_kana, #id_bp_name_after, #id_bp_name_kana_after, 
#id_bp_email, #id_bp_password1, #id_bp_password2,
#id_bp_zip, #id_bp_building_room_name, #id_bp_block,
#id_bp_phone, #id_bp_phone_2, #id_bp_line_id,
#id_bp_manager_name, #id_bp_manager_name_kana, #id_introducer_name

{
  width:400px;
  height:32px;
}


#id_customer_pref, #id_customer_address,
#id_guest_pref, #id_guest_address,
#id_lp_pref, #id_lp_address,
#id_bp_pref, #id_bp_address
{
  width:400px;
  height:32px;
  background-color: #f0f0f0;
}


/* #id_customer_name, #id_customer_name_kana, #id_customer_manager_name,
#id_customer_manager_name_kana, #id_area,
#id_possible_work
{
  width:600px;
  height:32px;
} */


#id_guest_demand4_2, #id_guest_demand5_2,
 #id_guest_demand6_2
{
  display:none;
  min-height:32px;
  max-height:256px;
}

.error{
  font-size:14px;
  color:#dc3545;
}


/* modaal */
.modaal_frame {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  min-height: 500px;
  background-color: #fff;
  border-radius: 5px;
  z-index: 11;
  padding: 10px;
  display:none;
  overflow-y:scroll !important;
}

.modaal_close{
  background-color: #3f413f;
  background-image: -webkit-linear-gradient(top, #a9aca9, #414241);  
  width: 150px;
  height: 40px;
  border-width: 2px;
  border-style: solid;
  border-color: #2e2d2d;
  font: 16px Arial;
  color: #f0f0f0;
  border-radius:8px;
  cursor: pointer;
}


.modal_image {
  display: inline-block;
  padding: 10px;
}



/* キャラクター吹き出し */
.balloon1{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  color: #ffffff;
  background-color: #40bb28;
  margin-left: 110px;
}
/* 画像 */
.balloon1 .icon{
  position: absolute;
  left: -110px;
  top: 0;
}
/* 三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  left: -15px;
  top: 20px;
  border-right: 15px solid #40bb28;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}


/* アコーディオン */
summary {
  position: relative;
  display: block;
  padding: 10px 10px 10px 30px;
  cursor: pointer;
  font-weight: bold;
  background-color: #f7ede2;
  transition: 0.2s;
}
summary:hover {
  background-color: #ccebfb;
}
summary::-webkit-details-marker {
  display: none;
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto 0 auto 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #7e4a28;
}
summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  transition: .1s;
}

/* オープン時のスタイル */
details[open] summary {
  background-color: #fbeacc;
}
/* details[open] summary:after {
  transform: rotate(90deg); 
  left: 4px;
  top: 5px;
} */

/* アニメーション */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}

details[open] .contents {
  margin:10px;
  display:inline-block;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}


.invalid {
  border: 1px solid red;
}


/* dropzone */
.dropzone_frame{
  width:640px;
  height:360px;
}

/* dropzone */
.dropzone {
  position:absolute;
  top:auto;
  left:auto;
  height: 260px;
  width:500px;
  /* max-width:800px; */
  margin: 50px 0 20px 0;
  /* border: 2px dashed  #ccc; */
  border: none;
  text-align: center;
  cursor: pointer;
  opacity: 1;
  overflow:auto;
}

.dropzone:hover {
  border: none;
  opacity: 0.5;
}

.dz-filename
{
  color:darkgreen !important;
}


.dz-error{
  color:red !important;
}

.dz-progress {
  display: none !important;
}