@charset "utf-8";

form{
  
}

form div{
  width: 40%;
  margin: 0 auto;
}

label{
  display: block;
  color: var(--main);
  font-weight: 400;
}

form a{
  display: block;
  margin-bottom: 20px;
  text-align: center;
}

input{
  width: 100%;
  margin: 2px 0 20px;
  padding: 10px;
  border: 1px solid #AAAAAA;
  border-radius: 5px;
}

input[type="submit"] {
  display: block;
  width: auto;
  margin: 10px auto 16px !important;
  padding: 10px 28px;
  background-color: var(--main);
  color: #FFF;
  border-radius: 10000px;
  border: none;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
}

button {
  display: block;
  width: auto;
  margin: 10px auto 16px !important;
  padding: 10px 28px;
  background-color:#D8D8D8;
  color: #333;
  border-radius: 10000px;
  border: none;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
}

button[type="button"]{
  margin: 10px 12px 16px auto !important;
}

button:hover,
input[type="submit"]:hover{
  cursor : pointer;
  opacity: 0.8;
}

select:hover{
  cursor : pointer;
}

.text_red{
  color: red;
}

.password_wrap{
  width: 100%;
  position: relative;
}

.Passicon{
  width: 22px;
  position: absolute;
  top: 9px;
  right: 10px;
}

.password_wrap input::-ms-reveal{
  display: none;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ログイン画面
（id="login_form"）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#login_form{
  margin-bottom: 40px;
}

#login_form + h2 + p + button{
  background-color: var(--main);
  color: #FFF;
}

#login_form .password_wrap input[name="pduser_password"]{
  padding-right: 40px;
}





/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
会員登録：メールアドレス入力画面
（id="inputmail_form"）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#inputmail_form{
  margin-top: 40px;
}

#inputmail_form button,
#inputmail_form input[type="submit"]{
  width: 175px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
会員登録：入力フォーム・確認画面
（id="inputuser_form"）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#inputuser_form{
  margin: 40px 0;
}

#inputuser_form div{
  display: flex;
  align-items: center;
  width: auto;
  margin: 0 auto 32px;
}

#inputuser_form h3{
  margin: 32px 0 12px;
  padding: 32px 0 0;
  border-top: 1px dashed var(--line);
  border-left: none;
  font-size: 1.8rem;
}

#inputuser_form p{
  margin: 0 30px 0 0;
}

#inputuser_form label{
  display: inline;
  margin: 0 12px 0 0;
  white-space: nowrap;
  color: #333;
}

#inputuser_form input{
  width: 75%;
  margin: 0 20px 0 0;
}


/*---------------
お名前・フリガナ
----------------*/
/* #inputuser_formの中の、子要素（[for="pduser_last_name"]）を持っている親要素（div）のスタイルだけを変える */
#inputuser_form div:has([for="pduser_last_name"]),
#inputuser_form div:has([for="pduser_first_name"]){
  float: left;
  width: 230px;
}

#inputuser_form div:has([for="pduser_last_name_kana"]),
#inputuser_form div:has([for="pduser_first_name_kana"]){
  float: left;
  width: 314px;
}

#inputuser_form div:has([for="pduser_last_name"] + p),
#inputuser_form div:has([for="pduser_first_name"] + p),
#inputuser_form div:has([for="pduser_last_name_kana"] + p),
#inputuser_form div:has([for="pduser_first_name_kana"] + p){
  width: auto;
}


/*-----------
メールアドレス 
------------*/
#inputuser_form div:has([for="pduser_email"]){
  margin: 0 0 -18px 0;
}

#inputuser_form label[for="pduser_email"]{
  display: block;
  float: left;
  width: auto;
  margin: 0 12px 18px 0;
}

#inputuser_form label[for="pduser_email"] + p{
  /* float: right;
  width: 87%; */
  margin: 0 0 18px;
}


/*-----------
パスワード 
------------*/
#inputuser_form div:has([for="pduser_password"]){
  width: 520px;
  margin: 0 auto 18px 0;
}

#inputuser_form div:has([for="pduser_password_retyping"]){
  width: 470px;
  margin: 0 auto 32px 0;
}

#inputuser_form label[for="pduser_password"],
#inputuser_form label[for="pduser_password_retyping"]{
  width: 175px;
}

#inputuser_form #pduser_password,
#inputuser_form #pduser_password_retyping{
  width: 250px;
}

#pduser_email + h3 + p{
  margin: 0 30px 32px 0;
}

#inputuser_form .password_wrap{
  margin: 0 !important;
}
#inputuser_form .password_wrap input{
  padding-right: 40px;
}
#inputuser_form .password_wrap input::-ms-reveal{
  display: none;
}
#inputuser_form .password_wrap img{
  width: 22px;
  position: absolute;
  top: 9px;
  right: 28px;
}



/*-----------
会社情報 
------------*/
#inputuser_form label[for="pduser_company_name"],
#inputuser_form label[for="pduser_department"],
#inputuser_form label[for="pduser_industry"],
#inputuser_form label[for="pduser_phone"],
#inputuser_form label[for="pduser_address"]{
  width: 175px;
}

#inputuser_form #pduser_company_name,
#inputuser_form #pduser_department,
#inputuser_form #pduser_address{
  width: 500px;
}

#inputuser_form #pduser_industry{
  padding: 10px 6px;
  border: 1px solid #AAAAAA;
  border-radius: 5px;
}

#inputuser_form #pduser_phone{
  width: 250px;
}

/* #inputuser_form div:has([for="pduser_address"]){
  padding-bottom: 40px;
  border-bottom: 1px dashed var(--line);
} */
#inputuser_form>div:last-of-type{
  padding-bottom: 40px;
  border-bottom: 1px dashed var(--line);
}


/*-----------
利用規約
------------*/
#inputuser_form #kiyaku_wrap{
  justify-content: center;
  flex-direction: column;
}
#inputuser_form #kiyaku_wrap p{
  margin: 0;
}
#inputuser_form #kiyaku_wrap a{
  display: inline;
}
#inputuser_form input[type="checkbox"]{
  width: auto;
  margin-right: 10px;
}

/*----------------------
確認・登録・キャンセル 
-----------------------*/
#inputuser_form input[type="submit"]{
  width: 136px;
  margin: 40px auto 16px !important;
}

#inputuser_form button[type="button"]{
  width: 136px;
  margin: 10px auto 16px !important;
}



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
製品資料データの一覧
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#unit_a table {
  width: 100% !important;
  border-top: 1px solid var(--line);
}

#unit_a table tr {
  border-bottom: 1px solid var(--line);
}

#unit_a table thead tr{
  border-bottom: none;
}

#unit_a table th, #unit_a table td{
  border: none;
}

#unit_a table th:first-child{
  width: 30%;
  text-align: left;
}

#unit_a table tr td:first-child{
  text-align: left;
}

#unit_a table td{
  text-align: center;
}

#unit_a table + p{
  margin-bottom: 60px;
}


@media only screen and (max-width: 767px){

  #contents_0{
    margin-bottom: 80px;
  }

  form div{
    width: 80%;
  }

  #inputuser_form div{
    display: block;
  }

  #inputuser_form p{
    margin: 0;
  }

  #inputuser_form input{
    width: 100%;
    margin: 2px 20px 0 0;
  }

  #inputuser_form label{
    white-space: normal;
  }


  /*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    会員登録：入力フォーム・確認画面
    （id="inputuser_form"）
  ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
  #inputuser_form div:has([for="pduser_last_name"]),
  #inputuser_form div:has([for="pduser_last_name_kana"]){
    width: 48%;
    margin: 0 10px 32px 0;
  }

  #inputuser_form div:has([for="pduser_first_name"]),
  #inputuser_form div:has([for="pduser_first_name_kana"]) {
    width: 48%;
    margin: 0 auto 32px 0;
  }


  /*-----------
  メールアドレス 
  ------------*/
  #inputuser_form div:has([for="pduser_email"]) {
    margin: 0;
  }

  #inputuser_form label[for="pduser_email"]{
    float: none;
    width: auto;
    margin: 0 12px 0 0;
  }


  /*-----------
  パスワード 
  ------------*/
  #inputuser_form div:has([for="pduser_password"]){
    width: 100%;
    margin: 0 auto 18px 0;
  }

  #inputuser_form div:has([for="pduser_password_retyping"]){
    width: 100%;
    margin: 0 auto 32px 0;
  }

  #inputuser_form label[for="pduser_password"],
  #inputuser_form label[for="pduser_password_retyping"]{
    width: auto;
  }

  #inputuser_form #pduser_password,
  #inputuser_form #pduser_password_retyping{
    width: 80%;
  }


  /*-----------
  会社情報 
  ------------*/
  #inputuser_form label[for="pduser_company_name"],
  #inputuser_form label[for="pduser_department"],
  #inputuser_form label[for="pduser_industry"],
  #inputuser_form label[for="pduser_phone"],
  #inputuser_form label[for="pduser_address"]{
    width: auto;
  }

  #inputuser_form #pduser_company_name,
  #inputuser_form #pduser_department,
  #inputuser_form #pduser_address{
    width: 100%;
  }

  #inputuser_form #pduser_industry{
    width: 100%;
  }

  #inputuser_form #pduser_phone{
    width: 100%;
  }


  /*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  製品資料データの一覧
  ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
  #unit_a table {
    position: relative;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    width: auto !important;
    height: auto;
    padding: 0;
    float: none;
  }

  #unit_a table th,
  #unit_a table td{
    display: table-cell;
  }


}