html, body {
  height: 100%;
  /* overflow-x: hidden; */
}

.container {
  margin: 0 auto;
  max-width: 92%;
  box-sizing: border-box;
}
body {
  margin: 0px;  padding: 0;
  background-color: #ffffff;
  font-size: 18px !important;

  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
p {
  margin: 0;
  padding: 0;
}
.w-container img {
  display: block;
  height: auto;
  max-width: 92%;
}
/* .title_large {
  font-size: 42px;;
} */
.top {
  margin-top: 10px;;
  /* background-image: url(./images/image4.png); */
  padding: 50px;
  position: relative;
  /* background-color: #4CB8B3; */
  height: 350px;;
  background-position: center;
  background-size: cover;
  text-align: left;
  opacity: 0.9;
}
.top:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	background: rgba(14, 167, 160, 0.9);
}

.title {
  position: absolute;
  top: 0%;
  left: 16%;
  transform: translateY(-10%);
  color: white;
}
.title h1 {
  font-size: clamp(24px, 7vw, 48px);
  font-weight: 700;
  text-shadow: 1px 1px 24px black;
}

.text-large {
  font-size: 84px;
  font-weight: 900;
}
.title p {
  margin-top: 24px;
  font-size: clamp(14px, 3vw, 24px);
}
.headTitles {
  font-weight: 600;
  color: #003366;
  font-size: 1.4rem;
  text-align: center;
}
/* 共通 */
.row h1 {
  margin-top: 80px;
  margin-bottom: 30px;
  font-size: clamp(24px, 5vw, 48px);
  font-weight: 700;
}

.row > p {
  font-size: clamp(14px, 3vw, 18px);
}
.takumi {
  font-size: clamp(36px, 5vw, 88px);
  font-weight: 700;
}
.takumi_sub {
  font-size: clamp(24px, 3vw, 48px);
}

/* ボタン */
.btn-dark {
  margin-top: 20px;
  border: none;
   border-bottom: #333 3px solid;
  border-right: #333 3px solid; 
  font-size: 1.2rem; /*ボタンのフォントサイズ */  
  background: #D4AF37; /*ボタンの背景色 */
  /*background: #003366; ボタンの背景色 */
  color: white; /*ボタンのテキストの色 */
}
.btn-dark:hover {
  background: #003366; /*ホバー時の背景色 */
  color: white; /*ホバー時のテキストの色 */
  border: none;
  border-bottom: #333 3px solid;
  border-right: #333 3px solid; 
}
.shadow {
  box-shadow: 0 8px 8px rgba(255, 0, 0, 0.9);
}
.sub_img {
  margin-top: 20px;
  padding: 1rem;
  height: auto;
  max-width: 100%;
  border-radius: 50%;
  max-width: 250;
}

.table-th {
  background-color: #003366;
  color: white;
  font-size: 1.8rem;
  vertical-align: middle;
}
p.text-start {
  font-size: 1.6rem;
}
.card-title img {
  padding-right: 16px;
  max-width: 120px;
  height: auto;
}
.card img {
  padding: 0;
  margin: 0;
  max-width: 100px;
  height: auto;
}
.company img {
   max-width: 100%;
}
.none {
  display: block;
  padding: 0;
  margin: 0;
} 
@media screen and (min-width: 1440px) {
.container {
  max-width: 1200px;
  margin: auto;
}
}

@media screen and (max-width: 768px) {
 .title h1 {
  /* padding-left: 5px;
  padding-right: 5px; */
   text-align: center;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;text-align: center;
}

.top {
  height: 35vh;
}
.title {
  position: absolute;
  left: 0%;
  top: 0%;
}
.title p {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

.text-large {
  font-size: 32px;
  padding: 0;
}

.btnposition {
  text-align: center;
}
.w-container img {
  width: 120px;
  height: auto;;
}

.top_btn {
  display:block;
  margin: 40px auto;

  }
.none p {
  font-size: 12px;
}
/* }
@media screen and (max-width: 376px) { */
  .none {
  display:none;
} 
}