/* Google Fotns */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Satisfy&display=swap');

/* # =================================================================
   # 共通
   # ================================================================= */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html{
   font-size: 0.625em;
   height: 100%;
}
body{
   font-family: 'Noto Sans JP', sans-serif;
   font-size: 1.4em;   
   height: 100%;
}
img{
   max-width: 100%;
}
h2{
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    font-size: 1.8rem;
    background: transparent;/*背景透明に*/
    border-left: solid 3px #ee7902;/*左線*/
    margin: 0 auto 25px;
    font-weight: normal;
}
.fa{
  font-family: serif;
}
.login_ico{
  display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: bold;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.wrapper_all{
  width: 100%;
  padding-bottom: 100px;
  position: relative;
  min-height: 100%;
  height: initial;
  overflow: initial;
  position: initial;
}
.wrapper-content {
    padding: 85px 0 0;
    width: 90%;
    margin: 0 auto;
   }
  
.title{
    position: relative;
    font-size: 2.4rem;
    text-align: center;
 }
.search_container img{
    height: 40px;
}

 /* # =================================================================
 # モバイルファースト
 # ================================================================= */
 .sp{display: block;}
 .pc{display: none;}
 .br-sp{display: block;}
 i.pc{display: none;}
 i.sp{display: inline-block;}
/* 新規会員登録 */
.sub_form{
  width: 96%;
  margin: 30px auto 100px;
}
.notification{
   padding: 30px 0 2px;
   text-align: center;
}
table {
 border-collapse: collapse;
}
input[type="submit"],
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
select,
textarea,
button {
 -moz-appearance: none;
 -webkit-appearance: none;
 -webkit-box-shadow: none;
 box-shadow: none;
 outline: none;
 border: 1px solid #646464;
 border-radius: 3px;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea {
 background: #f8f8f8;
 display: block;
 font-size: 16px;
 padding: 12px 15px;
 width: 100%;
 transition: 0.8s;
 border-radius: 0;
 border-radius: 3px;
}
input[type="text"]:focus,
textarea[name="content"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
 background: #e9f5fb;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.form-table label{
  margin-bottom: 10px;
}
.plan1{
  margin-bottom: 20px;
}
textarea[name="content"] {
 background: #f8f8f8;
 display: inline-block;
 width: 100%;
 height: 200px;
 border: 1px solid #572c00;
}
input::placeholder,
textarea::placeholder {
 color: #ccc;
}  
::-webkit-input-placeholder {
 color: #ccc;
 opacity: 1;
}  
::-moz-placeholder {
 color: #ccc;
 opacity: 1;
}

:-ms-input-placeholder {
 color: #ccc;
 opacity: 1;
}

.form-table {
 width: 100%;
 margin-bottom: 35px;
}

.form-table th,
.form-table td {
 display: block;
 width: 100%;
 border-top: 1px solid #572c00;
 padding: 5%;
}
.form-table tr:last-child{
 border-bottom: 1px solid #572c00;
}
.form-table th {
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  padding-left: 25px;
  position: relative;
  text-align: left;
  background: #ebebe0;
} 
div.require, div.elective{
 padding: 5px 15px;
 color: #ffffff;
 font-size: 1.4rem;
}
div.require{
 background: #d63e45; 
 border-radius: 2.5px;
 font-weight: 500;
 margin-left: 15px;
}
div.elective{
 background: #898989;
}
button.button {
 display: block;
 margin: 0 auto;
 position: relative;
background-color: #572c00;
color: #fff;
padding: 10px 90px;
font-size:1.8rem;
border: none;
 border-radius: 4px;
}
.birthday_wrapper{
  display: flex;
}
select {
 /* styling */
 background-color: white;
 border: 1px solid#646464;
 border-radius: 4px;
 display: inline-block;
 font: inherit;
 line-height: 1.5em;
 padding: 0.5em 3em 0.5em 1em;
 /* reset */
 margin: 0;      
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-appearance: none;
 -moz-appearance: none;
}
select::-ms-expand {
  display: none;
  }
.select_wrapper,.select_wrapper2,.select_wrapper3{
  position: relative;
}
.select_wrapper2,.select_wrapper3{
  width: 210px;
}
.select_wrapper::after,.select_wrapper2::after, .select_wrapper3::after{
  content:"▾";
  font-size: 1.8rem;
  color: #646464;
  position: absolute;
  top: 5px;
  padding-left: 10px;
  border-left: 1px solid #646464;
  pointer-events: none;/*　←★これ*/
  vertical-align: middle;
}
.select_wrapper::after,.select_wrapper2::after,.select_wrapper3::after{
  right: 10px;
}
.sex, .group, .prif{
  width: 210px;
  padding: 0.5em 5em 0.5em 1em;
}
.year{
 padding: 0.5em 3em 0.5em 1em;
}
.month, .date{
 margin-left: 6px;
}
select:-moz-focusring {
 color: transparent;
 text-shadow: 0 0 0 #000;
}

  /* # =================================================================
   # 【タブレット縦 /スマートフォン横】
   # ================================================================= */
@media screen and (min-width: 481px){
    .sp{display: none;}
    .pc{display: block;}
    .br-sp{display: none;}
    i.pc{display: inline-block}
    i.sp{display: none;}
/* 新規会員登録 */
.sub_form{
   display: table;
}
.form-table{
   border-spacing: 0;
}
table.form-table th,
table.form-table td {
  position: static;
  display: table-cell;
  padding: 20px;
}
.form-table th{
   display: flex;
   width: 40%;
   margin-right: 0;
   margin-bottom: 0;
}
div.require {
  display: inline-block;
  width: 60px;
}
.form-table td{
   width: 65%;
}
th.table_first,td.table_first{
   border: 0;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
select,
td p,
textarea{
  margin-left: 20px;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea{
  max-width: 400px;
}
button.button{
   margin: 30px auto 0;
   padding: 15px 90px;
   font-size: 2rem;
}
.plan1,.plan2{
   display: block;
   float: left;
   margin: 10px 0 10px 20px;
}
select{
  padding: 0.5em 4.5em 0.5em 1em;
}
.select_wrapper::after{
  right: 35px;
}
.select_wrapper2::after{
  right: -7px;
}
.select_wrapper3::after{
  right: -10px;
}
.group{
  padding: 0.5em 5.5em 0.5em 1em;
}
.minimal{
  display: inline-block;
  vertical-align: middle;
  align-items: center;
}
.year{
  padding: 0.5em 4em 0.5em 1em;
 }
.birthday span{
  display: inline-block;
  padding-left: 5px;
}
.sub_form{
  margin: 30px auto 0;
}
}
/* # =================================================================
   # 【デスクトップ/タブレット横】
   # ================================================================= */
   @media screen and (min-width: 769px){
    /* 共通 */
    .wrapper-content{
        width: 1000px;
        margin: 0 auto;
        padding-top: 140px;
    }
   .menu-trigger{
      display: none;
   }
   .title,.title::before{
      font-size: 3.4rem;
   }
  /* 新規会員登録 */
  .sub_form{
    margin-bottom: 200px;
  }
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  textarea{
    max-width: 500px;
  }
  .form-table th{
    font-size: 1.8rem;
    font-weight: normal;
    width: 35%;
  }
  td p{
    font-size: 1.6rem;
  }
  div.require{
    float: right;
    font-size: 1.8rem;
    width: 66px;
  }
  .plan1, .plan2{
    font-size: 1.6rem;
  }
  .minimal{
    margin-left: 20px;
  }
  button.button:hover{
    opacity: .8;
  }
  button.button{
    padding: 15px 110px;
    margin: 50px auto 30px;
  }
  .search_container img{
    height: 60px;
    display: flex;
    vertical-align:middle
  }
}