@charset "UTF-8";

@media screen and (min-width: 680px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 680px){   
  .pc { display:none; }
  .sp { display:block; }
}
.center {
  text-align: center;
}

/* Small Devices, Tablets */
/* PC */

/**************************************
  INDEX
 ***************************************/

div.button {
  max-width: 300px;
  margin: 30px auto 0;
  padding: 20px 0;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  font-weight: bold;
  color: #fff;
  border: none;
  border-radius: 60px;
  background-color: #d77a61;
}


/**************************************
  MESSAGE
 ***************************************/

#msg_content{}

#msg_content_inner {
  padding: 0;
  margin:  0 auto;
}

#msg_content_inner h2{
  margin-bottom: 60px;
  text-align: center;
  font-family: Oswald;
  font-weight: 600;
  font-size: 2.15rem;
  letter-spacing: 0.01rem;
  color: #d26f53;
}

#msg_cnt {
  margin-top: 64px;
  margin-bottom: 80px;
  display: flex;
  justify-content: space-between;
}

#form  {
  width: 740px;
  margin: 0 auto;
}
  
#form  h3 {
  padding: 15px 10px 14px 16px;
  margin-bottom:  36px;
  font-size:1.0rem;
  letter-spacing: 0.05rem;
  font-weight:bold;
  color: #fff;
  background-color:#000;
}
  
#form p.forget {
  margin: 30px 30px 60px 0;
  display:inline-block;
}
  
#form p.forget a {
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 0.05rem;
  color:#444540;
}
  
#form  p.forget:before {
  content: "\25B6";
  vertical-align: middle;
  color: #444540;
  font-size: 0.85rem;
  margin: 0 8px 0 0;
}
  
  
.hankaku {
  margin-bottom:  30px;
  text-align: center;
}
  
.hankaku p {
  padding: 5px 10px 4px 10px;
  background-color: #ecdbd2;
  color: #444540;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.17rem;
}
.forget a {
  color: #000;
}
  
  
#form dl {
  margin-bottom: 20px;
  display: -webkit-flex;
  display: flex;
  justify-content:flex-start;
  align-items: center;
}
  
#form dt {
  vertical-align: middle;
  font-size: 1.00rem;
  font-weight: 400;
  line-height: 1.7;
  color: #444540;
  letter-spacing: 0.05rem;
  width: 30%;
}

#form dd {
  margin: 0;
  padding: 0;
  display: block;
}
  
#form dd p label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: #444540;
  letter-spacing: 0.05rem;
}
  
  
#attention {
  margin: 20px 0;
  line-height: 1.6;
  text-align: left;
}
#attention a {
  color: #e79621;
}

#attention p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
  color: #000;
  letter-spacing: 0.15rem;
  text-align: center;
}
  
#attention p span {
  margin-top: 60px;
  display: block;
  color: #6a1b9a;
  font-weight: bold;
}
  
#submit {
  text-align: center;
  padding: 35px 0 0;
}

#submit input[type="submit"],
#submit input[type="reset"] {
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
}

#submit input[type="submit"] {
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 60px;
  padding: 20px 0;
  width: 50%;
  display: inline-block;
  margin: 0 10px;
  background-image: linear-gradient(135deg, #274cb1 0%, #2277f7 100%);
}
  
#submit input[type="submit"]:Hover {
  cursor: pointer;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 1rem;
  font-weight: bold;
  padding: 20px 0;
  width: 50%;
  display: inline-block;
  margin: 0 10px;
  font-weight: bold;
  background-color:#e19b87;
}
  
  
  
input[type="text"],
input[type="password"] {
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
  width: 100%;
  padding:10px 10px;
  background-color:#f8f8f8;
  border-radius: 6px;
}
  
textarea {
  font-size: 1rem;
  height: 200px;
  width: 100%;
  background-color:#f8f8f8;
  border-radius: 6px;
}
  
select,
option {
  width:300px;
  font-size: 1rem;
  padding: 5px;
  background-color:#f8f8f8;
  border-radius: 6px;
}
  
.radio p {
  display: inline-block;
  vertical-align: middle;
}
  

#msg_btn_mts {
  margin: 0 auto;
  width: 20%;
  background-color: #000;
}

#msg_btn_mts a {
  padding: 14px 0;
  display: block;
  text-align: center;
  font-family: Oswald;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08rem;
  color: #fff;
}

#msg_content_inner h4 {
  margin: 0 auto;
  text-align: center;
  font-family: Oswald;
  font-weight: 600;
  font-size: 1.8rem;
  letter-spacing: 0.08rem;
  color: #000;
}



div.tks-block {
  margin: 100px auto;
}



@media all and (max-width: 864px) {
  #header {
    /* height: 1200px; */
  }

  div.describe {
    margin: 6% auto 72px;
  }

  ul.navigator {
    margin: 6% auto 72px;
  }

  ul.instabox {
    margin: 6% auto 0;
  }
  ul.instabox li {
    width: 180px;
    height: 180px;
  }


/**************************************
  MESSAGE
 ***************************************/

  #msg_header {}

  #msg_headInner {
    width:  100%;
    padding: 0 20px;
  }

  #msg_header h1 {
    width: 100%;
  }

  #msg_content_inner {
    width: 100%;
    padding: 8% 3.3%;
  }

  #msg_content_inner h2{
    font-size : 2.2rem;
    margin-bottom: 6%;
  }

  #msg_cnt {
    margin:  0;
    padding: 0;
  }

  #form {
    width: 100%;
  }

  #submit {
    margin-bottom: 8%;
  }
}


/**************************************
  MESSAGE
 ***************************************/

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

  .pc_only {
    display: none;
  }
  #msg_header {}
  #msg_header h1 {}

  #form h3 {
    padding: 4% 3%;
    margin-bottom:6%;
    margin-top: 6%;
  }

  #form p.forget {
    margin: 4% 0;
  }

  #form dl {
    display: block;
  }

  #form dt{
    margin-bottom: 3%;
    width: 100%;
  }
}

/**************************************
  COMMON FOOTER
 ***************************************/
@media screen and (max-width: 767px) {
  
  /* overrides common styles */
  #commonFooter{
    width: 100% !important;
    position: static;
  }
  
  #commonFooterInner{
    padding: 15px 0;
    width: 100% !important;
    background-color: #282828;
    text-align: center;
  }

  #commonFooter li{
    display:inline-block !important;
    float: none;
  }
}