/* 動画30分01秒   https://www.youtube.com/watch?v=GXu-7d3yA_U     */


.container {
   width: 80%;
   max-width: 1120px;
   margin: 0 auto;
   height: 100px;
   position: relative;
 }

.flex {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
}

/*ヘッダー768*/
header {
   padding: 27px 0;
}

.logo {
   font-size: 20px;
   font-weight: 600;
   letter-spacing: -0.04em;
}
.logo span {
   color: #80BA4A;
}
.header_menu li{
   margin-left: 20px;
}
.header_menu li a{
   transition: .3s;
}
.header_menu li a:hover{
   color: #80BA4A;
   transition: .3s;
}

@media only screen and (max-width: 480px) {
  header .container {
    justify-content: center;
  }
  .header_menu li {
    margin: 20px 16px 0;
  }
}

/* メイン　*/
#hero {
   background-image: url(../images/img1.jpg);
   background-position: center;
   background-size: cover;
   height: 500px;
   border-radius: 30px;
   display: flex;
   align-items: center;
   margin-bottom: 90px;
   overflow: hidden;
}
#hero::before {
   content: '';
   width: 100%;
   height: 100%;
   background-color: #808080;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0.2;
   z-index: 1;
}
.hero_inner{
   z-inde: 2;
   color: #000000;
   width: 100%;
   text-align: center;
}
.hero_inner p{
   font-size: 40px;
   font-weight: 800;
   margin-bottom: 16px;
}

.hero_inner h1{
   font-size: 40px;
   font-weight: 1000;
   margin-bottom: 30px;
   color: #008000;
}
@media only screen and (max-width: 768px) {
  #hero {height: 460px;}
  .hero_inner p {font-size: 15px;}
  .hero_inner h1 {font-size: 17px;}
}



/* コンセプト（ごあいさつ） */
#concept {
   margin-bottom: 300px;
}
.title {
   font-size: 30px;
   font-weight: 700;
   color: #80BA4A;
}

/* 使っていない
#concept h3{
   font-size: 36px;
   font-weight: 700;
   margin-bottom: 60px;
}
使っていない*/

.column-2 {
  width: 48%;
}
.text {
  line-height: 1.6;
   font-size: 18px;
   font-weight: 300;
}
.concept-img {
  background-image: url(../images/img-wani3.png);
  background-position: center;
  background-size: cover;
  width: 450px;
  height: 300px;
  border-radius: 20px;
}
@media only screen and (max-width: 768px) {
  #concept h3 {
    font-size: 24px;
    line-height: 1.5;
  }
  .column-2 {
    width: 100%;
  }
  .text {
    font-size: 15px;
    line-height: 1.7;
  }
  .concept-img {margin-top: 30px;}
}




/* 料金表（サービス）*/
#price {
   margin-bottom: 300px;
}
.price_inner {
   margin-bottom: 40px;
   position: relative;
}
.column-40 {
   width: 40%;
}
.column-55 {
   width: 55%;
}
#price img {
  border-radius: 20px;
}


/* サービス地域*/
#area {
   margin-bottom: 300px;
}
.area_inner {
   margin-bottom: 40px;
   position: relative;
}
.column-40 {
   width: 40%;
}
.column-55 {
   width: 55%;
}
#area img {
  border-radius: 20px;
}
@media only screen and (max-width: 768px) {
  .column-40 {
    width: 100%;
    margin-bottom: 30px;
  }
  .column-55 {
    width: 100%;
  }
  #service h3 {
    font-size: 17px;
  }
}

/* カンパニー */
#company {
   margin-bottom: 500px;
}
#company dl {
   max-width: 900px;
   margin-left: auto;
}
#company dt {
   width: 30%;
   padding: 30px 0;
   border-bottom: solid 1px #D2ECBA;
}
#company dd {
   width: 70%;
   padding: 30px 0;
   border-bottom: solid 1px #D2ECBA;
}

/* フッター */
footer {
  text-align: center;
  margin: 90px 0;
}
.copyright {
  font-size: 16px;
  margin-top: 40px;
}