body {
   font-family: "Noto Sans JP", sans-serif;
   color: #323538;
   display: flex;
   flex-flow: column;
   min-height: 100vh;
 }

 /* herder */
 header {
   position: absolute;
   z-index: 2;
   width: 100%;
   color: #fff;
   /* background-color: blueviolet; */
 }

 header .container {
   width: 90%;
   max-width: 1400px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 0;
   color: #156ac9;
 }

 header .logo {
   font-size: 24px;
   font-weight: 600;
   line-height: 1px;


 }

 header ul {
   display: flex;
 }

 header li {
   margin-left: 48px;
   font-weight: 500;
   /* color: #156ac9; */
 }

 header li a {
   transition: 0.3s;
 }

 header ul li a:hover {
   color: #156ac9;
 }

 /* news */
 #news dl {
   display: flex;
   flex-wrap: wrap;
   border-bottom: 1px solid #c8c8c8;
 }

 #news dt {
   width: 20%;
   border-bottom: 1px solid #c8c8c8;
   padding: 15px;
 }

 #news dd {
   width: 80%;
   border-bottom: 1px solid #c8c8c8;
   padding: 15px;
 }

 /* smartphone */
 @media screen and (max-width: 600px) {
   .container {
     flex-direction: column;
     height: auto;
     line-height: 50px;
     margin-top: 20px;
   }

   /* news */
   #news dl {
     flex-direction: column;
   }

   #news dt {
     width: 100%;
     border-bottom: none;
     padding-bottom: 0;
   }

   #news dd {
     width: 100%;
     padding-top: 0;
   }
 }

 /* contact */
 .contact {
   box-sizing: border-box;
   width: 960px;
   margin: 0 auto;
   padding: 60px 0;
 }

 .contact-ttl {
   font-size: 40px;
   font-weight: bold;
   margin-bottom: 40px;
   text-align: center;
 }

 .contact-table {
   width: 100%;
   margin-bottom: 20px;
 }

 .contact-item,
 .contact-body {
   padding: 20px;
   border: 1px solid #ccc;
 }

 .contact-item {
   text-align: left;
   width: 30%;
   background-color: #eee;
 }

 .contact-body {
   width: 70%;
 }

 .form-text {
   width: 100%;
   padding: 10px;
   border-radius: 5px;
   border: 1px solid #ccc;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   max-width: 400px;
 }

 .form-textarea {
   width: 100%;
   padding: 10px;
   height: 200px;
   border-radius: 5px;
   border: 1px solid #ccc;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
 }

 .contact-submit {
   width: 250px;
   background-color: #333;
   color: #fff;
   font-weight: bold;
   display: block;
   margin: 0 auto;
   font-size: 16px;
   padding: 15px;
   border-radius: 100vh;
   border: none;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   cursor: pointer;
   text-align: center;

 }








 footer {
   background-color: #f9f9f9;
   text-align: center;
   font-size: 10px;
   padding: 16px 0;
   /* position: absolute; */
   bottom: 0;
 }

 /* kyotsu  start*/
 .container {
   width: 90%;
   max-width: 1140px;
   margin: 0 auto;
 }

 .section {
   padding: 60px 0;
 }

 .en {
   font-size: 40px;
   font-weight: 500;
   color: #156ac9;
   margin-bottom: 30px;
 }

 .text {
   font-size: 14px;
   line-height: 2;
 }

 .button {
   display: line-block;
   border: solid 1px #eee;
   background-color: #fff;
   padding: 16px 40px;
   border-radius: 100px;
   font-size: 13px;
   font-weight: 500;
   transition: .3s;
 }

 .button:hover {
   border-color: #156ac9;
 }

 .row {
   display: flex;
   justify-content: space-between;
 }

 @media screen and(max-width: 767px) {
   .section {
     padding: 30px 0;
   }

   .en {
     font-size: 30px;
   }

   .row {
     flex-wrap: wrap;
   }

   .col {
     width: 100% !important;
   }
 }

 /* kyotsu  end*/
 main {
   flex: 1;
 }

 /* #main-visual {
   position: relative;
   height: 90vh;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   overflow: hidden;
 }

 #main-visual video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1;
 }

 #main-visual .box {
   position: absolute;
   top: 50%;
   left: 13%;
   transform: translateY(-50%);
   color: #fff
 }

 #main-visual .heading {
   font-size: 30px;
   font-weight: 500;
   margin-bottom: 20px;
 }

 #main-visual h1 {
   font-size: 48px;
   font-weight: 700;
 } */

 #company tr {
   border-bottom: 1px solid #b5b1b1;
 }

 #company th,
 #company td {
   padding: 24px 0;
   border: none;
 }

 #company th {
   width: 30%;
 }


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

   /* #main-visual .box {
     left: 6%
   }

   #main-visual h1 {
     font-size: 34px;
   } */
   #company th,
   #company td {
     width: 100%;
     display: block;
   }

   #company th {
     width: 100%;
   }

   #company td {
     padding-top: 0;
   }

 }

 #top-about {
   position: relative;
   overflow: hidden;
 }

 #top-about::before {
   content: 'MARKETING';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   font-size: 260px;
   letter-spacing: -6px;
   color: #f9f9f9;
   font-weight: 900;
   z-index: -1;
 }

 #top-about h2 {
   font-size: 30px;
   font-weight: 500;
   line-height: 1.6;
   margin-bottom: 40px;
 }

 #top-about .text {
   margin-bottom: 40px;
 }




 @media screen and (max-width: 767px) {
   #top-about::before {
     font-size: 80px;
   }

   #top-about h2 {
     font-size: 18px;
   }
 }

 #top-service {
   background-color: #156ac9;
   border-radius: 20px;
   color: #fff;
 }

 #top-service h2 {
   color: #fff;
 }

 #top-service .text {
   margin-bottom: 60px;
 }

 #top-service .row {
   margin-bottom: 30px;
 }

 #top-service .col {
   width: 32%;
   background-color: #0d62c2;
   border-radius: 16px;
   padding: 30px 20px;
   text-align: center;
 }

 #top-service img {
   height: 80px;
   margin-bottom: 20px;
 }

 #top-service h3 {
   font-weight: 500;
   margin-bottom: 16px;
 }

 #top-service .text2 {
   font-size: 13px;
   text-align: left;
   line-height: 1.6;
 }

 #top-service .button_box {
   text-align: center;
   color: #323538;
 }

 @media screen and (max-width:767px) {
   #top-service .row {
     gap: 20px 0;
   }
 }

 #top-works {
   background-color: #f9f9f9;
 }

 #top-works h2 {
   font-size: 30px;
   font-weight: 500;
   line-height: 1.6;
   margin-bottom: 40px;
 }

 #top-works .text {
   font-size: 13px;
   margin-bottom: 40px;
 }

 #top-works .row {
   align-items: center;
 }

 #top-works .col {
   width: 48%
 }

 #top-works img {
   border-radius: 16px;
 }

 @media screen and (max-width: 767px) {
   #top-works h2 {
     font-size: 20px;
   }

   #top-works .row {
     gap: 30px 0;
   }

 }

 #top-contact h2 {
   font-size: 30px;
   font-weight: 500;
   line-height: 1.6;
   margin-bottom: 40px;
 }

 #top-contact .text {
   font-size: 13px;
   margin-bottom: 40px;
 }

 #top-contact .row {
   align-items: center;
 }

 #top-contact .col {
   width: 48%
 }

 #top-contact img {
   border-radius: 16px;
 }

 @media screen and (max-width: 767px) {
   #top-contact h2 {
     font-size: 20px;
   }

   #top-contact .row {
     gap: 30px 0;
   }

 }

 @media screen and (max-width: 767px) {
   #top-contact h2 {
     font-size: 20px;
   }

   #top-contact .row {
     gap: 30px 0;
     flex-direction: column-reverse;
   }

 }

 /* company */
 #company {
   margin-bottom: 240px;
 }

 #company dl {
   max-width: 900px;
   background-color: green;
   margin-left: auto;
 }

 #company dt {
   width: 30%;
   margin-left: 48px 0;
   font-weight: 500;
   border-bottom: solid 1px #D2ECBA;
 }

 #company dd {
   width: 70%;
   margin-left: 48px 0;
   border-bottom: solid 1px #D2ECBA;
 }

 #company h1 {
   color: #f00;
   font-size: 24px;
   font-weight: 500;
 }