body{
margin:0;
color:#57514C;
background: #FFFDFC;
}
section{
padding:80px 0;
}
.container{
width:90%;
max-width:1100px;
margin:0 auto;
}
h1,h2,h3{
text-align:center;
color:#3F3A36;
}

/*ヘッダー*/
header a,
footer a{
color:#3F3A36;
text-decoration:none;
}
header{
width:100%;
padding:20px 5%;
box-sizing:border-box;
background:#F7F4EF;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom: 1px solid #D8D1C8;
}
header img{
display:block;
width:165px;
height:auto;
}
header .top {
  line-height: 1;
  transform: translateY(2px);
}

/*案内*/
#guide{
text-align:center;
background:#F7F4EF;
}

.detail{
width:90%;
max-width: 900px;
margin: 40px auto 0;
padding: 0;
display:flex;
justify-content:center;
align-items:stretch;
}
.detail div{
padding:5px 20px;
border-right:1px solid #D2CBC2;
flex:1;
}
.detail div:last-child{
border-right:none;
}

.detail dt {
  margin: 0 0 12px;

  color: #3F3A36;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}

.detail dd {
  margin: 0;

  color: #57514C;
  font-size: 0.95rem;
  line-height: 1.6;
}
/*流れ*/
#flow{
background:#F7F4EF;
}
.flow{
display:flex;
justify-content:center;
gap:30px;

}
.flow div{
background:#FFFDFC;
flex:1;
border:1px solid #D2CBC2;
 display: flex;
  align-items: center;
  justify-content: center;
flex-direction:column;
padding:10px 20px;
box-sizing:border-box;
}

/*フォーム*/
#form{
background: #E5E9E1;
}
form{
width:90%;
max-width:800px;
margin:0 auto;
padding:40px;
box-sizing:border-box;
border:1px solid #D2CBC2;
background:#FFFDFC;
}

.form-notice {
  width: 90%;
  max-width: 800px;
  margin: 0 auto 24px;

  color: #7B746D;
  font-size: 0.9rem;
  line-height: 1.7;
  text-align: center;
}

.form-item{
display:flex;
gap:10px;
flex-direction:column;
margin-bottom:25px;
}
.form-item label{
font-weight:bold;
color:#3F3A36;
}
input,select,textarea{
width:100%;
padding:12px 15px;
box-sizing:border-box;
border:1px solid #D2CBC2;
font-size:1rem;
color:#57514C;
background:#FFFDFC;
}
input,select{
min-height:50px;
}
textarea{
min-height:120px;
resize:vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #65715E;
  outline: 2px solid #D7DDD3;
  outline-offset: 1px;
}

input::placeholder,
textarea::placeholder {
  color: #928B84;
}

button{
display:block;
width:60%;
max-width:350px;
min-height:50px;
margin:40px auto;
border:none;
background:#65715E;
color:#FFFFFF;
font-size:1rem;
font-weight:bold;
cursor:pointer;
}
button:not(:disabled):hover{
background:#4F5C49;
}

button:focus-visible {
  outline: 3px solid #D2D9CE;
  outline-offset: 3px;
}

button:disabled {
  background: #8A9285;
  color: #FFFFFF;
  cursor: not-allowed;
  opacity: 0.75;
}

.required{
display:inline-block;
margin-left:8px;
padding:3px 7px;
box-sizing:border-box;
background:#8B6756;
color: #FFFFFF;
border-radius:5px;
font-size:.75rem;
font-weight:normal;
}
.optional{
display:inline-block;
margin-left:8px;
padding:3px 7px;

background: #E5E9E1;
color:#4F5C49;

border-radius:5px;
font-size:.75rem;
font-weight:normal;
}

.xrea-ad {
  padding: 24px 16px;
  text-align: center;
  border-top: 1px solid #D8D1C8;
  background: #F7F4EF;
  overflow: hidden;
}

.xrea-ad img,
.xrea-ad iframe {
  max-width: 100%;
}

/*フッター*/
footer{
width:100%;
padding:30px 0 20px;
box-sizing:border-box;
text-align:center;
background:#ECE7E0;
}
.link{
display:flex;
justify-content:center;
align-items:center;
gap:30px;
}
.link a {
  display: flex;
  align-items: center;
  line-height: 1;
}

.link a:last-child {
  transform: translateY(4px);
}
footer img{
display:block;
width:165px;
height:auto;
}
footer small{
display:block;
margin-top:20px;
color:#7B746D;
line-height: 1;
}

@media screen and (max-width: 1030px) and (min-width: 768px) {
  .flow h3 {
    font-size: 1.2rem;
    min-height: 3em;

  }
}

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

 .detail{
         width:100%;
         flex-wrap:wrap;
         margin-top:30px;
            }

  .detail div{
               flex:0 0 50%;
                width:50%;
               padding: 20px 12px;
               box-sizing:border-box;
               border-right: none;
               border-bottom: none;
                }

.detail div:nth-child(odd) {
  border-right: 1px solid #D2CBC2;
}

  .detail div:nth-child(-n + 2) {
  border-bottom: 1px solid #D2CBC2;
}

   .detail dt {
    margin-bottom: 8px;
    font-size: 0.95rem;
  }

  .detail dd {
    font-size: 0.9rem;
  }

  .flow{ 
          flex-direction:column;
           }
         }

@media screen and (max-width: 480px) {
  header img {
    width: min(125px, 50vw);
    height: auto;
  }

  header a:first-child {
    min-width: 0;
  }

   header .top {
    flex:0 0 auto;
    white-space: nowrap;
  }  

.link {
    flex-direction: column;
    gap: 15px;
  }

 .detail div {
    padding: 18px 8px;
  }

  .detail dt {
    font-size: 0.9rem;
  }

  .detail dd {
    font-size: 0.85rem;
  }

   footer img {
    width: min(125px, 60vw);
  }
}