@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap');
/*@import url('https://fonts.googleapis.com/css?family=Playfair+Display');*/

:root{
    --beige : #faebd7;

}
.form-wrapper-input span.material-icons-round{
	font-size: 1.2rem;
}


body {
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: var(--beige);
    font-size: .9rem;
    color: #5e5e5e;
	font-family: 'M PLUS Rounded 1c', sans-serif !important;
/*	font-family:  'Playfair Display', 'M PLUS Rounded 1c', sans-seif;*/
	overflow-x: hidden;
}

.dot {
    color: #8c8c8c;
    text-decoration: none;
    transition: border-color 0.5s;
    border-bottom: 3px dotted #8c8c8c;
}

.error ,.cation {
/*    font-size: .9rem;*/
    color: red;
}

.btn {
    font-size: 1rem;
    line-height: 1;
    font-weight: 2000;
    position: relative;
    display: inline-block;
    padding: 11px 30px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 1.5rem;
    color: #A1796C;
    border: .3px solid grey;
    /*color: #fff;*/
    background-color: #A1796C;
    margin: 1% 0;
    background-color: rgba(255, 255, 255, 0.3);
}

.btn.brn {
    background-color: #A1796C;
    color: white;
}

#sub_url,
.sub_url {
    /* height: 20%; */
    width: 100%;
    box-sizing: border-box;
    padding-top: 10%;
    padding-bottom: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

#sub_url a,
.sub_url a {
    box-sizing: border-box;
    margin: 2%0;
}

.image {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image img {
    max-height: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
}

.center {
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
header .center {
	width: 20%;
    padding: 0 1rem;
}
@media screen and (max-width : 750px){
.title {
    font-size: 30px;
    letter-spacing: 5px;
    color: #5e5e5e;
    white-space: nowrap;
}
}

@media screen and (min-width : 751px){
body,
#pc {
    width: 100%;
    height: 100%;
    font-size: 20px;
}

#pc {
    display: flex;
}

#left {
    height: 100%;
    width: 60%;
    margin: 2%;
}

#right {
    height: 100%;
    width: 40%;
    margin: auto 0;
    display: flex;
    flex-direction: column;
}

.title {
    font-size: 50px;
    padding: 10% 3% 0 0;
}

.btn {
    padding: 20px 40px;
    font-size: 30px;
}

.image img {
    max-height: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
}

#form {
    margin: auto;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #CCA07C;
}

a.p1,a.dot{
font-size: 1rem;
  position: relative;
  display: inline-block;
  /*color: #000000;*/
  text-decoration: none;
  border-bottom:0;
}

a.p1::after,a.dot::after{
  position: absolute;
  bottom: -5px;
  left: 50%;
  content: '';
  width: 0;
  height: 2px;
  color:orange;
  background-color: #8c8c8c;
  transition: .3s;
  transform: translateX(-50%);
  display: block;
}
a.p1:hover::after,a.dot:hover::after{
  width: 100%;
}
}

.hide{
	display:none;
}

.hidden{
	visibility:hidden;
}
a.none{
  text-decoration: none;
  border-bottom:0;
  color: #5e5e5e;
}
@media only screen and (min-width : 751px){
.for-sp { display:none; }
}
@media only screen and (max-width : 750px){
  .for-pc { display:none; }
  .btn{	width:90%;border-radius: .5rem;}
}