@charset "utf-8";
/*-----------------------*----*----*----*----*----*----*----*----*----*----*----* 全体 */
html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom:2.4em;
}

a:hover {
  text-decoration:none;
}

input {
  padding: 0.5em;
  font-size: 1.6rem;
  color: #3985d1;
  border:1px solid #00aeef;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

input::placeholder {
  color: #899cae;
}

input:-ms-input-placeholder {
  color: #899cae;
}

input::-ms-input-placeholder {
  color: #899cae;
}

input[name="nos"] ,
input[name="name"] ,
input[name="nameruby"] ,
input[name="manager"] ,
input[name="managerruby" ] {
  width:-webkit-calc(100% - 8em);
  width:calc(100% - 8em);
}

input[name="lati"] ,
input[name="longi"] ,
input[name="tel"] ,
input[name="fax"] ,
input[name="mail"] ,
input[name="password"] ,
input[name="address2"] ,
input[name="address3"] ,
input[name="address4"] ,
input[name="lat"] ,
input[name="lng"] ,
input[name="web1"] ,
input[name="web2"] ,
input[name="web3"] ,
input[name="license"] ,
input[name="company"] ,
input[name="group" ] {
  width:-webkit-calc(100% - 1em);
  width:calc(100% - 1em);
}

input[name="password"] {
  margin: 0 0 0.5em 0;
}

select {
  padding: 0.5em;
  font-size: 1.6rem;
  color: #3985d1;
  border:1px solid #00aeef;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

select option ,
select optgroup {
  font-size: 1.6rem;
}

textarea {
  width:-webkit-calc(100% - 1em);
  width:calc(100% - 1em);
  height:-webkit-calc(100% - 1em);
  height:calc(100% - 1em);
  margin: 0;
  padding:0.5em;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #3985d1;
  border:none;
  overflow:auto;
}

textarea::placeholder {
  color: #899cae;
}

textarea:-ms-input-placeholder {
  color: #899cae;
}

textarea::-ms-input-placeholder {
  color: #899cae;
}

.f14 {
  font-size: 1.4rem;
}

/*-----------------------*----*----*----*----*----*----*----*----*----* HEAD */
#HEAD {
  width:100%;
}

#HEAD section {
  width: 100%;
  margin:0 auto;
  padding: 16px 0;
  text-align: left;
  letter-spacing: -.4em;
}

#HEAD img {
  width: 100%;
}

#HEAD section h1 {
  width: 200px;
  margin:0 0 0 5%;
  letter-spacing:normal;
}

#HEAD section .last_login {
  display: block;
  width:100%;
  margin:1em 0 0 0;
  padding: 0;
  text-align: center;
  letter-spacing:normal;
}

@media screen and (min-width:769px){
  #HEAD section h1 {
    display: inline-block;
  }
  #HEAD section .last_login {
    display: inline-block;
    width:-webkit-calc(95% - 200px - 2em);
    width:calc(95% - 200px - 2em);
    margin:0 0 0 2em;
    text-align: left;
  }
}

/*-----------------------*----*----*----*----*----*----*----*----*----* MAIN */
#MAIN {
  width:100%;
}

#MAIN article {
  padding:0;
  text-align: left;
}

#MAIN section {
  width: 100%;
  margin:0 auto;
}

#MAIN section > h3 {
  width: 100%;
  margin: 0 0 0 0;
  padding:0 0 0 0;
  background-color:#b3dfef;
}

#MAIN section > h3 span {
  display: block;
  width:87%;
  margin:0 auto 0 auto;
  padding:0.5em 0 0.5em 0;
  font-size: 1.6rem;
  font-weight:bold;
}

/*-----------------------*----*----*----*----*----*----*----*----*----* FOOT */
#FOOT {
  position: absolute;
  bottom: 0;
  width:100%;
  height:2.4em;
  background:#00aeef;
}

#FOOT small {
  display: block;
  max-width:1200px;
  width: 100%;
  margin:0.7em auto 0;
  color: #fff;
  font-size:1.2rem;
}

@media screen and (max-width:768px){
  #FOOT small {
    font-size:1.0rem;
  }
}

/*-----------------------*----*----*----*----*----*----*----*----*----*----*----* 共通 */
/*-----------------------* caption */
.caption {
  width:100%;
  padding: 1.2em 0 50px 0;
}

.caption li {
  width: 85%;
  margin:0 auto 1.2em;
  padding: 0 1em 0 0;
  text-indent:-1em;
  text-align: left;
}

.caption li:before {
  content:"・";
}

.caption em:before {
  content:"『";
}

.caption em:after {
  content:"』";
}

/*-----------------------* .form */
.form {
  width: 100%;
}

.form div {
  font-size: 1.6rem;
  margin:1em auto 0 auto;
}

.form dt {
  width: 100%;
  background-color:#b3dfef;
}

.form dt div {
  width:87%;
  font-weight:bold;
}

.form dd {
  width: 100%;
  margin:1em 0 50px 0;
}

.form dd div {
  width:84%;
}

.form dd p {
  margin: 0 0 0.5em 0;
  padding:0 0 0 0;
}

.form dd span {
  display: inline-block;
  width:49%;
}

.form dd button[name="agency"] ,
.form dd button[name="latlng"] {
  display:inline-block;
  width:150px;
  margin: 0 10px 0 0;
  padding: 0.5em;
  text-align:center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background: url(/common/img/icon_arrow_white.png) 98% center no-repeat #00aeef;
  background-size: 12px auto;
  cursor: pointer;
}

.form dd button[name="agency"]:hover ,
.form dd button[name="latlng"]:hover {
  opacity:0.7;
}

.form dd button[name="agency"]  {
  margin: 0 0 10px 10px;
}

.form dd button[name="latlng"] + span {
  font-size: 1.4rem;
  display:inline-block;
  width:-webkit-calc(100% - 160px);
  width:calc(100% - 160px);
}

@media screen and (max-width:768px){
  .form dd span {
    display: block;
    width:100%;
  }
  .form dd span:first-child {
    margin: 0 0 1em 0;
  }
}

.form dd label {
  display:block;
  width:auto;
  margin: 0 0 0.5em 0;
  padding:0 0 0 1.6em;
  text-indent: -1.6em;
}

@media screen and (min-width:769px){
  .form {
    width:85%;
    padding:1.5em 2.5%;
    margin: 0 0 25px 7%;
    vertical-align: top;
    letter-spacing:-.4em;
    background-color: #eeffff;
  }
  .form div {
    display: inline-block;
  }
  .form dt ,
  .form dd {
    display: inline-block;
    vertical-align: top;
    margin:1.5em 0 1.5em 0;
    padding:0 0 0 0;
    letter-spacing: normal;
  }
  .form dt {
    width:19em;
    background: none;
  }
  .form dt div {
    width:100%;
    margin: 0 0 0 0;
  }
  .form dd {
    width:-webkit-calc(100% - 19em);
    width:calc(100% - 19em);
  }
  .form dd div {
    max-width:770px;
    margin: 0 0 0 0;
  }
  .form dd label {
    display:inline-block;
  }
}

/*-----------------------* .textarea */
.form .textarea {
  height: 10em;
  padding: 0;
  overflow: hidden;
  border:1px solid #00aeef;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

/*-----------------------* .seminar_yy,seminar_mm,seminar_dd */
.form dd span.seminar_yy {
  width:115px;
}

.form dd span.seminar_yy select {
  width:5.5em;
}

.form dd span.seminar_mm ,
.form dd span.seminar_dd {
  width:100px;
}

.form dd span.seminar_mm select ,
.form dd span.seminar_dd select {
  width:4.5em;
}

.form dd span.seminar_yy select ,
.form dd span.seminar_mm select ,
.form dd span.seminar_dd select {
  padding: 0.5em;
}

@media screen and (max-width:768px){
  .form dd span.seminar_yy ,
  .form dd span.seminar_mm ,
  .form dd span.seminar_dd {
    display:inline-block;
    margin: 0 0 0 0;
    padding: 0;
    font-size: 1.4rem;
  }

  .form dd span.seminar_yy {
    width:95px;
  }

  .form dd span.seminar_yy select {
    width:4.9em;
  }

  .form dd span.seminar_mm ,
  .form dd span.seminar_dd {
    width:79px;
  }

  .form dd span.seminar_mm select ,
  .form dd span.seminar_dd select {
    width:3.9em;
  }

  .form dd span.seminar_yy select ,
  .form dd span.seminar_mm select ,
  .form dd span.seminar_dd select {
    padding: 0.5em 0.2em;
    font-size: 1.4rem;
  }

}

/*-----------------------* list */
.list {
  width:87%;
  margin:2em auto 2em auto;
  border-collapse: collapse;
  border-spacing: 0;
  border-left:1px solid #00aeef;
}

.list th {
  padding: 0.5em 0 0.5em 0;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  background: center no-repeat #00aeef;
  border-right:1px solid #fff;
  border-bottom:1px solid #fff;
  text-align: center;
}

.list th:first-child {
  width:10em;
  text-align: center;
}

.list th:last-child {
  border-right:0px;
}

.list td {
  vertical-align: top;
  padding:0.5em 1em;
  border-right:1px solid #00aeef;
  border-bottom:1px solid #00aeef;
}

.list form ,
.list button {
  display:inline;
  margin: 0;
}

.list button {
  display: block;
  width: 95%;
  margin: 0 auto 0;
  padding: 0.5em;
  text-align:center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background: url(/common/img/icon_arrow_white.png) 98% center no-repeat #00aeef;
  background-size: 12px auto;
  cursor: pointer;
}

.list button:hover {
  opacity: 0.7;
}

.list tr:nth-child(odd) td {
  background-color:#f1f1f1;
}

.w4 {
  width: 5em;
}

.w8 {
  width: 7em;
}

.list button.mail {
  display:inline;
  width:100%;
  margin: 0;
  padding:0;
  text-align:left;
  color: #3985d1;
  font-size: 1.6rem;
  font-weight:normal;
  text-decoration:underline;
  border-radius:0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  background:none;
  background-size:0;
}

/*-----------------------* search */
.search {
  width:85%;
  margin: 5em auto 5em auto;
  padding: 1% 1% 1% 1%;
  overflow:hidden;
  border:1px solid #00aeef;
}

.search h4 {
  width:100%;
  margin: 0 0 1em 0;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.search dt em {
  font-size: 1.6rem;
}

.search dd ul li label {
  font-size: 1.4rem !important;
}

.search .mold {
  width: 8em;
  margin: 0 auto 0 auto;
}

.search .mold button {
  margin: 0 0 0 0;
}

.search .youtube_list {
  letter-spacing:-.4em;
}

.search .youtube_list li {
  display: inline-block;
  max-width: 404px;
  width:-webkit-calc(100% / 2);
  width:calc(100% / 2);
  margin: 0 0 2em 0;
  letter-spacing: normal;
}

@media screen and (min-width:769px){
  .search .youtube_list li {
    width:-webkit-calc(100% / 3);
    width:calc(100% / 3);
  }
}

.search .youtube_list li a {
  display: block;
  width: 91%;
  margin: 0 auto 0 auto;
}

.search .youtube_list li div {
  width: 91%;
  margin:0.5em auto 0 auto;
  font-size: 1.4rem;
  line-height: 1.2;
}

/*-----------------------*----*----*----*----*----*----*----*----* s_year */
.s_year {
  margin:0.5em 0 0 0;
}

.s_year em {
  font-weight: bold !important;
  cursor: pointer;
  cursor: hand;
  text-decoration: underline;
}

.s_year em:hover {
  text-decoration: none;
}

.s_year em:before {
  content:"⊕";
  display:inline-block;
  margin:0 0.3em 0 0;
  font-weight: bold !important;
  font-size: 1.6rem !important;
  transition: 0.4s ease-in-out;
  transform: rotate(0deg);
}

.s_year.active em:before {
  content:"⊝";
  font-size: 1.6rem !important;
  transform: rotate(360deg);
}

/*-----------------------*----*----*----*----*----*----*----*----* s_place */
.s_place {
  margin:0 0 0.5em 1em;
}

.s_place.none{
  display: none;
}

/*-----------------------* pager */
.pager {
  width:87%;
  margin: 0 auto 0 auto;
  letter-spacing: -.4em;
  overflow: auto;
}

#MAIN .pager:last-child {
  margin: 0 auto 100px auto;
}

.pager a ,
.pager li ,
.pager span {
  font-size:1.2rem;
}

.pager li {
  display: inline-block;
  letter-spacing: normal;
  text-align:center;
  width:4.5em;
  margin: 0 0 1em 1em;
}

.pager li:first-child {
  width:8em;
  margin: 0 0 1em 0;
}

.pager span ,
.pager a {
  display: block;
  width:-webkit-calc(100% - 1em - 2px);
  width:calc(100% - 1em - 2px);
  padding:0.5em;
  text-align:center;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #00aeef;
  border-radius:6px;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
}

.pager span {
  color: #0073aa;
  background: center no-repeat #fff;
}

.pager a {
  color: #fff;
  background: center no-repeat #00aeef;
}

.pager a:hover {
  opacity: 0.7;
}

/*-----------------------* mold_area */
.mold_area {
  margin: 0 auto;
  letter-spacing: -.4em;
}

.mold_area div {
  display: inline-block;
  letter-spacing: normal;
}

/*-----------------------* mold */
.mold button,
.mold a {
  display: block;
  width: 100%;
  margin: 0 auto 50px;
  padding: 0.5em;
  text-align:center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  text-indent: 0.5em;
  text-decoration: none;
  border: none;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background: url(/common/img/icon_arrow_white.png) 98% center no-repeat #00aeef;
  background-size: 12px auto;
  cursor: pointer;
}

.mold button:hover,
.mold a:hover {
  opacity: 0.7;
}

/*-----------------------* gray */
.mold.gray button,
.mold.gray a {
  background: url(/common/img/icon_arrow_white.png) 98% center no-repeat #bababa;
  background-size: 12px auto;
}

/*-----------------------* red */
span.red {
  color: #f66;
  font-weight: bold;
}

/*-----------------------* clear both */
.clear.both {
  clear:both;
}

/*-----------------------* error */
tr.error th,tr.error td {
  background-color:#ffebeb !important;
}

/*-----------------------*----*----*----*----*----*----*----*----*----*----*----* タイトル */
/*-----------------------*----*----*----*----*----*----*----*----*----* title */
.title {
  width: 100%;
  height:50px;
  overflow: hidden;
  letter-spacing:-.4em;
  background-color:#77ceef;
}

.title h2 {
  display: inline-block;
  width:-webkit-calc(95% - 80px);
  width:calc(95% - 80px);
  overflow: hidden;
  margin: 0 0 0 5%;
  padding:0.7% 0 0 0;
  text-align:left;
  letter-spacing:normal;
  vertical-align:middle;
  color:#fff;
  font-size:1.8rem;
  font-weight:bold;
}

.index .title h2 {
  font-size:1.4rem;
}

.title .sp.none {
  display: none;
}
.title .pc.none {
  display:inline;
}

@media screen and (min-width:769px){
  .index .title h2 {
    font-size:1.8rem;
  }
  .title .sp.none {
    display:inline;
  }
  .title .pc.none {
    display: none;
  }
}

.title h2 span {
  display: inline-block;
  margin: 0 0 0 0.5em;
  font-size:1.2rem;
}

.title h2 span:before {
  content: "(";
}

.title h2 span:after {
  content: ")";
}

.title p {
  display: inline-block;
  width:80px !important;
  height:100%;
  margin: 0 0 0 0;
  padding:0 0 0 0;
  vertical-align: top;
  background-color:#5cc0e6;
}

.title p:hover {
  opacity: 0.7;
}

.title p a {
  display: inline-block;
  width:100%;
  margin: 0 0 0 0;
  padding:17px 0 19px 0;
  text-align: center;
  text-decoration: none;
  letter-spacing:normal;
  font-size: 1.2rem;
  color: #eee !important;
}

/*-----------------------*----*----*----*----*----*----*----*----*----*----*----* ログイン */
/*-----------------------*----*----*----*----*----*----*----*----*----* login */
.login form {
  max-width: 360px;
  width: 70%;
  margin: 50px auto;
}

/*-----------------------*----*----*----*----*----*----*----*----* field */
.login .field p {
  width:100%;
  margin:0 auto 1em auto;
  text-align: center;
}

/*-----------------------*----*----*----*----*----*----*----* alert */
.login .alert {
  margin:0 auto 3em auto;
}

.login .alert .logintime {
  font-size: 1.6rem;
}

.login .alert .red {
  text-align: left;
}

.login .alert .red em {
  font-weight: bold;
  color:#f00;
}

/*-----------------------*----*----*----*----*----*----*----* input */
.login .input input {
  width:100%;
  margin: 0 0 1em 0;
  text-align: center;
}

/*-----------------------*----*----*----*----*----*----*----* input */
.login .input2 input {
  width:100%;
  margin: 0 0 1em 0;
  text-align: center;
}

/*-----------------------*----*----*----*----*----*----*----* mold */
.login .mold {
  width:70%;
  margin:1em auto 1em auto;
}

/*-----------------------*----*----*----*----*----*----*----* comment */
.login .comment {
  margin:3em auto 0 auto;
}

.login .comment p {
  text-align: left;
}

.login .comment .ast {
  padding: 0 0 0 1em;
  text-indent: -1em;
}

.login .comment .ast::before {
  content: "※";
}

.login .comment .red {
  margin:2em auto 0 auto;
  color: #f00;
}

/*-----------------------*----*----*----*----*----*----*----*----* information */
.login div.information {
  max-width: 640px;
  width: 95%;
  margin: 0 auto 100px;
  padding: 2em 0 2em 0;
  text-align: center;
  box-sizing: border-box;
  border: 2px solid #00aeef;
}

.login div.information h3 ,
.login div.information h4 {
  color: #0073aa;
}

.login div.information h3 {
  font-size:1.8rem;
  font-weight: bold;
}

.login div.information h3::before {
  content: "■ ";
}

.login div.information h3::after {
  content: " ■";
}

.login div.information h4 {
  margin: 2em auto 0;
  font-size:1.4rem;
  font-weight: bold;
}

.login div.information h4::before {
  content: "【";
}

.login div.information h4::after {
  content: "】";
}

.login div.information em {
  text-decoration: underline;
  font-weight: bold;
}

.login div.information dl {
  width: 90%;
  margin: 1em auto 0;
  text-align: left;
  letter-spacing: -.4em;
  box-sizing: border-box;
}

.login div.information dt ,
.login div.information dd {
  display: inline-block;
  letter-spacing:normal;
  vertical-align: top;
}

.login div.information dt {
  width:7.5em;
  margin: 0 0 0 3em;
  text-align: left;
}

.login div.information dt::after {
  content: ":";
}

.login div.information dl dt:nth-child(1) {
  margin: 0 0 0 0;
}

.login div.information dl dt:nth-child(1)::before {
  content: "（例）";
}

.login div.information dd {
  width:100%;
  margin: 0 0 1em 3em;
  text-align: left;
}

.login div.information dd:last-child {
  margin: 0 0 0em 3em;
}

@media screen and (min-width:769px){
  .login div.information dt {
    margin: 0 0 0 0;
    text-align: right;
  }

  .login div.information dd {
    width:-webkit-calc(100% - 7.5em);
    width:calc(100% - 7.5em);
    text-align: left;
  }

  .login div.information dt ,
  .login div.information dd {
    margin: 0.5em 0 0 0 !important;
  }

}

.login div.information p {
  width: 90%;
  margin: 1.5em auto 0;
  text-align: left;
  line-height: 1.6;
}

.login div.information p.ast {
  padding: 0 0 0 1em;
  text-indent: -1em;
}

.login div.information p.ast::before {
  content: "※";
}

/*-----------------------*----*----*----*----*----*----*----*----*----*----*----* メニュー */
/*-----------------------*----*----*----*----*----*----*----*----*----* index */
.index dl {
  width:100%;
  margin:0;
  padding:0;
}

.index dt ,
.index dd {
  width:100%;
  margin:0;
  padding:0;
}

.index dt {
  margin: 5vh 0 0 0;
  background-color:#b3dfef;
}

.index dt:first-child {
  margin: 0 0 0 0;
}

.index dt span {
  display: block;
  width:85%;
  margin: 0 auto;
  padding:0.5em 0;
  text-align: left;
  font-size: 1.6rem;
  font-weight:bold;
}

.index dd {
  margin: 0 0 0 0;
  border-bottom: 1px solid #b3dfef;
}

.index dd a {
  display: inline-block;
  width:100%;
  text-decoration: none;
  padding:0.5em 0;
  background: url(/common/img/icon_arrow_blue.png) 7.5% center no-repeat #fff;
  background-size: 15px auto;
}

.index dd a:hover {
  background: url(/common/img/icon_arrow_white.png) 7.5% center no-repeat #9dd8ef;
  background-size: 15px auto;
}

.index dd span {
  display:block;
  width:-webkit-calc(85% - 36px);
  width:calc(85% - 36px);
  margin: 0 auto;
  text-align: left;
  font-size: 1.6rem;
}

.index dd span em {
  display: block;
  font-size: 1.4rem;
  color: #64a0f0;
}

.index dd a:hover em ,
.index dd a:hover span {
  color:#fff;
}

.index dd.new a {
  position:relative;
}

.index dd.new a:before {
  position: absolute;
  display: inline-block;
  top: 50%;
  left:-webkit-calc(7.5% - 3.9em);
  left:calc(7.5% - 3.9em);
  transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  width: 3.2em;
  height: 1.5em;
  text-align: center;
  content:"NEW";
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff;
  background-color: #f00;
}

.index dt.NewsListH {
  background-color:#e8e8ed;
}


/*
.index #NewsList {
  width:100%;
  margin: 0.5em 0 0 0;
  padding:0 0 0 0;
  letter-spacing: -.4em;
}

.index #NewsList dt,
.index #NewsList dd {
  display: inline-block;
  padding:0 0 0.8em 0;
  letter-spacing:normal;
  font-size: 1.2rem;
}

.index #NewsList dt{
  width: 7em;
  margin: 0 0 0 7.5%;
  background:none;
}

.index #NewsList dd {
  width:calc(100% - 7emm - 7.5%);
  width:-webkit-calc(100% - 7em - 7.5%);
  margin: 0 0 0 0;
  border-bottom:0px none;
}


.index #NewsList dd a{
  display: inline;
  width:auto;
  margin: 0 0 0 0;
  padding:0 0 0 0;
  font-size: 1.2rem;
}

.index #NewsList dd a{
  background:none;
  text-decoration:underline;
}

.index #NewsList dd a:hover {
  background:none;
  text-decoration: none;
}



*/







.index dd ul.youtube_list {
  width:85%;
  margin:0.5em 0 0 calc(7.5% + 1.2em);
  margin:0.5em 0 0 -webkit-calc(7.5% + 1.2em);
  letter-spacing:-.4em;
}

.index dd ul.youtube_list li {
  display: inline-block;
  letter-spacing:normal;
  max-width: 305px;
  width:-webkit-calc(100% / 2);
  width:calc(100% / 2);
  margin: 0 0 1.2em 0;
}

@media screen and (min-width:738px) and (max-width:881px){
  .index dd ul.youtube_list li {
    width:-webkit-calc(100% / 3);
    width:calc(100% / 3);
  }
}

@media screen and (min-width:882px) and (max-width:1099px){
  .index dd ul.youtube_list li {
    width:-webkit-calc(100% / 4);
    width:calc(100% / 4);
  }
}

@media screen and (min-width:1100px){
  .index dd ul.youtube_list li {
    width:-webkit-calc(100% / 5);
    width:calc(100% / 5);
  }
}


.index dd ul.youtube_list li a {
  display:block;
  width:93%;
  margin: 0 0 0 0;
  padding: 0;
  background:none;
}

.index dd ul.youtube_list li a:hover {
  background:none;
}

.index dd ul.youtube_list li a img:hover {
  opacity: 0.7;
}

.index dd ul.youtube_list li div {
  width:95%;
  margin:0.5em 0 0 0;
  font-size: 1.4rem;
  line-height: 1.2;
}



.index p {
  width:95%;
  margin: 0 auto 25px;
  text-align: right;
}

.index p a {
  color:#999;
}

/*-----------------------*----*----*----*----*----*----*----*----*----*----*----* サロン情報の修正・削除 */
/*-----------------------*----*----*----*----*----*----*----*----* mold_area */
.salon .mold_area {
  max-width: 360px;
  width:95%;
}

.salon .mold_area div {
  width:40%;
  margin: 0 5% 50px;
}

/*-----------------------*----*----*----*----*----*----*----*----*----*----*----* メール */
/*-----------------------*----*----*----*----*----*----*----*----* form */
/*
.mail .form dt {
  width:22em;
  background: none;
}
.mail .form dt div {
  width:100%;
  margin: 0 0 0 0;
}
.mail .form dd {
  width:-webkit-calc(100% - 22em);
  width:calc(100% - 22em);
}

/*-----------------------*----*----*----*----*----*----*----*----* mold_area */
.mail .mold_area {
  max-width: 360px;
  width:95%;
}

.mail .mold_area div {
  width:40%;
  margin: 0 5% 50px;
}

/*-----------------------*----*----*----*----*----*----*----*----*----*----*----* ログアウト */
/*-----------------------*----*----*----*----*----*----*----*----*----* logout */
.logout p {
  max-width: 360px;
  width:90%;
  margin:3em auto 0 auto;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
}

.logout p em {
  display: block;
  width:100%;
  text-align: center;
  margin:1em auto 50px auto;
}

.logout p:first-child {
  margin:50px auto 0 auto;
}

.logout p:last-child {
  margin:1em auto 50px auto;
}

/*-----------------------*----*----*----*----*----*----*----*----* mold_area */
.logout .mold_area {
  max-width: 360px;
  width:95%;
}

.logout .mold_area div {
  width:40%;
  margin: 0 5% 50px;
}

.logout .mold_area.end div {
  width:60%;
  margin:50px 20% 50px;
}

/*-----------------------*----*----*----*----*----*----*----*----*----*----*----* 退会手続き */
/*-----------------------*----*----*----*----*----*----*----*----*----* quit */
.quit p {
  width:95%;
  margin:0 auto 3em auto;
  text-align: center;
  font-size: 1.6rem;
}

.quit p em {
  width:95%;
  font-size: 1.6rem;
  font-weight: bold;
}

/*-----------------------*----*----*----*----*----*----*----*----* mold_area */
.quit .mold_area {
  max-width: 360px;
  width:95%;
}

.quit .mold_area div {
  width:40%;
  margin: 0 5% 50px;
}

/*-----------------------*----*----*----*----*----*----*----*----*----*----*----* 請求書 */
/*-----------------------*----*----*----*----*----*----*----*----*----* .receipt */
.receipt {
  width:720px;
  margin:50px auto 50px auto;
  color: #333;
}

.receipt .company {
  width:100%;
  clear: both;
}

.receipt .company dl {
  width:27em;
  float: right;
  clear: both;
  font-size: 1.4rem;
  background: url(../img/sign.png) right top no-repeat;
}

.receipt .company dt {
  margin:0 0 0.5em 0;
  font-size: 1.6rem;
}

.receipt .company dd {
  font-size: 1.4rem;
}

.receipt .client {
  width:100%;
  clear: both;
}

.receipt .client h4 {
  width:100%;
  float: left;
  clear: both;
  margin: 0 0 1em 0;
  padding:1em 0 0.5em 0;
  font-size: 1.6rem;
  font-weight: bold;
  border-bottom: 1px solid #333;
}

.receipt .client dl {
  width: 60%;
  float: left;
  margin: 0 0 20px 0;
}

.receipt .client dl:last-child {
  width: 40%;
}

.receipt .client dt {
  margin: 0 0 0.5em 0;
  font-size: 1.6rem;
  font-weight: bold;
}

.receipt .client dd {
  margin: 0 0 0.5em 3em;
  text-indent:-3em;
  font-size: 1.4rem;
}

.receipt .client dd em {
  font-weight: bold;
}

.receipt table {
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
}

.receipt tr th ,
.receipt tr td {
  padding: 0.5em;
  font-size: 1.4rem;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}

.receipt th {
  text-align: center;
  font-weight: bold;
}

.receipt td {
  text-align: right;
}

/*-----------------------*----*----*----*----*----*----*----*----*----* .sales */
.sales {
  width:85%;
  max-width:960px;
  margin:50px auto 50px auto;
  font-size: 1.6rem;
  line-height: 1.8;

}

.sales h4 {
  width: 100%;
  margin: 0 0 1em 0;
  text-align: center;
  font-size:2.1rem;
}

.sales h4 em {
  display: block;
  font-weight: bold;
}

.sales h4 em:before {
  content:"『";
}

.sales h4 em:after {
  content:"』";
}

.sales p {
  margin: 1em 0 1em 0;
}

.sales p em {
  font-weight: bold;
}

.sales p em:before {
  content:"「";
}

.sales p em:after {
  content:"」";
}

.sales p strong {
  font-weight: bold;
}

.sales p span {
  font-size: 1.4rem;
}

.sales p span:before {
  content:"※";
}

.sales p span.red {
  font-size: 1.6rem;
}

.sales .note {
  margin:50px 0 0.0 0;
  padding:1em 1em 1em 1em;
  border:1px solid #00aeef;
}

.sales .note dt {
  margin: 0 0 0.5em 0;
  text-align: center;
  font-size:2.1rem;
  font-weight: bold;
}

.sales .note dt:before {
  content:"『";
}

.sales .note dt:after {
  content:"』";
}

.sales .note dd {
  margin: 0.8em 0 0.8em 0;
  padding: 0 0 0 1em;
  text-indent: -1em;
}

.sales .note dd:before {
  content:"・";
}

.sales .check {
  margin: 2em 0 2em 0;
  text-align: center;
}

.sales .check label {
  padding:0 0 0 0.5em;
}

.sales .mold.none button {
  background: url(/common/img/icon_arrow_white.png) 98% center no-repeat #bababa;
  background-size: 12px auto;
  cursor:default;
  opacity: 0.7;
}

.sales .mold.none.active button {
  background: url(/common/img/icon_arrow_white.png) 98% center no-repeat #00aeef;
  background-size: 12px auto;
  cursor: pointer;
  opacity:1;
}

.sales .mold.none.active button:hover {
  opacity: 0.7;
}





/* NEWS */



.news-list{
  margin: 0 auto;
  padding: 1em 0 1.5em;
  width: 90%;
  font-size: var(--font-size-m);
}

.news-list li{
  padding: 0 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.news-list li a{ background: none; padding: 0; margin: 0; color: #333;}
.news-list li a:hover{ background: none;}

.news-list li time{
  margin: 0.2em 0;
  padding: 0.4em 0;
  width: 7em;
}

.news-list li p{
  position: relative;
  margin: 0.2em 0 !important;
  padding: 0.4em 0 !important;
  width: calc(100% - 7em);
  text-align: left;
}

.news-list li p::after{
  position: absolute;
  bottom: 0;
  left: -7em;
  width: calc(100% + 7em);
  height: 0.1rem;
  padding: 0;
  content: "";
  border-bottom: 0.1rem dotted #ccc;
}

.news-list li:last-child p::after{ display: none;}

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

.news-list li time{
  margin: 0.2em 0 0;
  padding: 0.4em 0 0;
  width: 100%;
}
.news-list li p{
  position: relative;
  margin: 0 0 0.4em;
  padding: 0.4em 0 0.4em 1em;
  width: 100%;
}

.news-list li p::after{
  left: 0;
  width: 100%;
}

}/* End max 480 */