* {

  margin: 0px;

  padding: 0px;

  box-sizing: border-box;

}

html,

body {

  width: 100%;

  height: 100%;

}

body {

  font-family: "Noto Sans JP", sans-serif;

  background-color: #fffaf0;

}

.sp-only {

  display: none;

}

.pc-only {

  display: block;

}

.container {

  margin: 0px auto;

  width: 100%;

  max-width: 820px;

  padding: 0px 10px;

}

.img-fluid {

  width: 100%;

}



.header{

  padding: 80px 20px 50px 20px;

}

.logo-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  padding: 20px;

}

.logo-box img{

  width: 100%;

  max-width: 210px;

  margin-bottom: 30px;

}

.logo-box2 img{

  width: 100%;

  max-width: 400px;

  margin-bottom: 20px;

}

.header h3{

  font-size: 30px;

  letter-spacing: 2px;

  margin-bottom: 30px;

}

.header .main{

  font-size: 4.375rem;

  letter-spacing: 0.05em;

  margin-bottom: 50px;

}

.text-center{

  text-align: center;

}

.header .para{

  line-height: 2;

  letter-spacing: 1px;

}

.para{

  letter-spacing: 0.05em;

}
.right-side a {
  font-size: 16px;
  color: #000;
  text-decoration: underline;
}


.logo-top {

  width: 280px;

}

.title-sec {

  display: flex;

  align-items: center;

  flex-direction: column;

  margin-bottom: 50px;

}

.ttl-b {

  margin-bottom: 5px;

  font-size: 2.3em;

}

.mini-title {

  font-size: 14px;

}

.section-1 {

  padding-top: 112px;

  padding-bottom: 100px;

  background-color: #fff;

}

.detail-wrap .content {

  font-size: 16px;

  color: #000;

  font-weight: bold;

  letter-spacing: 1px;

  padding: 10px 0px;

  border-bottom: 2px solid #cccccc;

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

}







.detail-wrap .content .left-side {

  width: 150px;

}







.svg-txt1 {

  width: 47px;

}

.svg-txt2 {

  width: 70px;

  margin-right: 30px;

}

.svg-txt2-2{

  margin-right: 27px;



}

.mb2 {

  margin-bottom: 20px;

}

.txlink {

  color: #665947;

  text-decoration: none;

  text-decoration: underline;

}

.txlink2 {

  display: inline-block;

  margin-bottom: 13px;

}

.txlink:hover {

  text-decoration: underline;

}

.svg-txt3 {

  width: 36px;

}

.svg-txt4 {

  width: 100%;

  min-width: 590px;

}

.section-2 {

  padding: 100px 0px;

}

.logo-orange {

  max-width: 320px;

  margin-bottom: 35px;

}

.social-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

}

.mr-1 {

  margin-right: 10px;

}

.ml-1 {

  margin-left: 10px;

}

.tw-wrap,

.img-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}

.link-area {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  text-decoration: none;

}

.green-txt {

  width: 160px;

  border-radius: 50px;

  background-color: #000;

  display: inline-block;

  text-align: center;

  color: #fff;

  margin-bottom: 10px;

  height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.bg-para {

  font-size: 18px;

  font-weight: bold;

  margin-bottom: 10px;

}

.para-grey {

  color: #808080;

}

.twitter {

  max-width: 160px;

  margin-bottom: 25px;

}

.section-3 {

  padding: 100px 0px;

  background-color: #f0f6e7;

}

.tw-wrap .para {

  text-align: center;

  font-size: 20px;

  color: #665947;

  font-weight: bold;

}

.tw-wrap .twlink {

  text-align: center;

  font-size: 14px;

  color: #665947;

  font-weight: bold;

  text-decoration: none;

}

.mail {

  max-width: 377px;

}

.section-4 {

  padding: 100px 0px;

  background-color: #fff;

}

.footer {

  background-color: #fff;

  padding: 20px;

}



.copyright {

  font-size: 12px;

  text-align: center;

}



/*=========Maximum 700px ===========*/

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

  .sp-only {

    display: block;

  }

  .pc-only {

    display: none;

  }

  .detail-wrap .content {

    flex-direction: column;

  }

  .left-side {

    margin-bottom: 15px;

  }

  .container {

    padding: 20px 30px;

  }

  .logo-orange {

    padding: 15px;

  }

  .logo-wrap {

    padding: 0px;

  }

 

  .section-1,

  .section-2,

  .section-3,

  .section-4 {

    padding: 50px 0px;

  }

  .header .main{

    font-size: 3.5rem;

    text-align: center;

  }

  .header .text-center{

    text-align: left;

  }



}

/*=========Maximum 500px ===========*/

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

  .header .main{

    font-size: 2.5rem;

  }

  .header h3{

    font-size: 24px;

  }

  .container{

    padding: 20px ;

  }

  .header{

    padding: 80px 0px 50px 0px;

  }

  .para{

    line-height: 2;

  }

}

.name-p{
  width: 75px;
}

.text-black{
  color: #000;
  text-decoration: none;
}