@charset "UTF-8";
/* CSS Document */
body {
  background-color: #333433;
}
.main {
  background-color:#2f2c2c;
}
.header{
   height:330px;
  background-color:#2f2c2c;
  position: relative;
}
.header-content-wrapper{
  position:relative;
}
.header_img {
  height:162px;
  width: auto;
  position: absolute;
  left:0px;
  top:50px;
}
.info{
   display: block;
    padding: 210px 0 0 1080px;
    color: #FFF;
    text-decoration: none;
    font-size:5.2rem;
    height:340px;
    max-width: 1240px;
}
.section-info {
  padding: 20px 0px 40px 0px;
  margin-bottom: 60px;
  max-width: 1240px; /* 1160px + padding: 24px */
  margin:0 auto;
}
.section-info h2 {
  margin-bottom: 30px;
}
.section-info h3 {
  margin-bottom: 15px;
  font-size:5.2rem;
  font-family: "Arial",'Noto Sans JP', sans-serif;
}
 .section-info h4 {
  font-family: "Arial",'Noto Sans JP', sans-serif;
}
.section-info p {
  margin-bottom:30px;
  font-size:1.6rem;
  line-height: 3.6rem;
  font-family: "Arial",'Noto Sans JP', sans-serif;
}
.contact p {
  margin-bottom: 15px;
  font-size:1.6rem;
  padding-bottom: 50px;
  font-family: "Arial",'Noto Sans JP', sans-serif;
   letter-spacing: -0.025em;
}
.section-info__body {
  text-align: left;
  color: #FFF;
}
.section-info__photo {
  width: 100%;
  max-width: 560px;
  height: 50vw;
  max-height: 500px;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  margin: 0 auto 30px auto;
  border:1px #FFF solid;
}
.section-info h4 {
  margin-bottom: 30px;
}
.contact {
  /*レイアウト用のCSS*/
  padding: 0 0 80px 0;
  background-color: #333433;
  color: #ccc;
  margin:0 auto;
}
.contact {
  position: relative;
  z-index: 0;
}
.contact::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
 
  /*四角形を傾ける*/
  transform: skewY(-4deg);
  transform-origin: top left;
 
  z-index: -1;
  width:100%;
  height:100%;
  background:#333433;
}
@media (min-width: 960px) {
  .header-content-wrapper{
    margin:0 auto;
   max-width: 1240px;
  }
   .header_content a {
    max-width: 1240px;
}
}

@media(max-width:480px) {
   .header_img {
  height:72px;
  width: auto;
  position: absolute;
  left:20px;
  top:20px;
  }
  .info-img{
    height:25px;
    width: auto;
  }
    .menu{
    height:12px;
    width: auto;
  }
  .header{
   height:140px;
  background-color:#2f2c2c;
  position: relative;
}
  .section-info {
  padding-bottom: 50px;
}
  .section-info h3 {
  font-size:2.0rem;
  margin-bottom: 0px;
}
  .section-info h4 {
  margin-bottom:20px;
  font-size: 0.8rem;
  line-height: 10px;
}
  .section-info p {
  margin-bottom: 20px;
  font-size:1.4rem; 
  line-height:2.1rem;
  font-family: 'Noto Sans JP', sans-serif;
}
    /*レイアウト用のCSS*/
  .contact {
  padding: 40px 0 60px 0;
}
  .contact p {
  margin-top: 20px;
  padding-bottom: 25px;
  font-size: 1.4rem;
}
   .insta{
    padding: 0 30px 65px 0;
  }
  .mail{
    padding:0 0 70px 30px;
  }
    .copywrite1{
    font-size:  1.0rem;
  }
  .section-info {
  padding: 0  0 25px 0px;
  }
  .section-info h2 {
  margin-left: -30px;
  width: 40vw;
}
  .section-info {
    position: relative;
  }
  .border{
  width:60vw;
  height: 1px;
  border-style: solid;
  border-color: #FFF;
  border-width: 1px;
  position: absolute;
  left:120px;
  top:12px;
  }
  .flex-1{
    display: flex;
  }
  .br{
    display:none;
  }
  .section-info__photo {
  width: 100%;
  max-width: 335px;
  height: 50vw;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  margin: 0 auto 30px auto;
  border:1px #FFF solid;
}
.inquiry{
    line-height: 1.4rem;
  }
}

@media(min-width:480px) {
  .header_img {
  height:162px;
  width: auto;
  position: absolute;
  left:30px;
  top:50px;
  }
  .section-info {
    position: relative;
  }
  .border{
  width:70vw;
  height: 1px;
  border-style: solid;
  border-color: #FFF;
  border-width: 1px;
  position: absolute;
  left:350px;
  top:35px;
  }
   .section-info h2 {
    text-align: left;
    font-size:8.0rem;
    color: #FFF;
    padding-bottom: 50px;
  }
     .contact h2 {
    text-align: left;
    font-size:8.0rem;
    color: #FFF;
    padding: 80px 0 50px ;
  }
     .SNS{
    padding-bottom:100px;
  }
    .insta{
    padding-right: 80px;
  }
  .mail{
    padding:0 0 5px 80px;
  }
  .section-info__body{
  padding:0px 20px;
  }
    .section-info__body-text {
    margin:0 50px;
  letter-spacing: -0.025em;
  }
}

@media(min-width:480px) {
    .border{
  width:40vw;
  }
}
  
@media(max-width:1160px) {
    .section-info__body{
  padding:0px 50px;
  color: #FFF;
  }
}

@media(min-width:1160px) {
  .section-info {
    margin-bottom: 80px;
    display: flex;
    position: relative;
  }
  .border{
  width:380px;
  height: 1px;
  border-style: solid;
  border-color: #FFF;
  border-width: 1px;
  position: absolute;
  left:300px;
  top:35px;
}
  .section-info__photo {
    height:442px;
  }
  .section-info__body-text {
    color: #FFF;
    width: 610px;
    margin: 0 50px 0 70px;
  }
    .section-info__body-image {
    width: auto;
    right: 0px;
  }
  .section-info__body-text h3 {
    font-size: 5.2rem;
  }
  .section-info__body-text h4 {
    font-size: 1.4rem;
  }
   .SNS{
    padding-bottom:100px;
  }
    .insta{
    padding-right: 80px;
  }
  .mail{
    padding:0 0 5px 80px;
  }
}


  .contact h2{
    text-align: center;
  }
  .copywrite1{
    color: #FFF;
    background-color: #333433;
  }