@charset "utf-8";

* {
  /* レイアウトチェック用  
  outline: 1px solid magenta; 
  */
}

:root{
  --font-family-sans-serif: 'Noto Sans JP', sans-serif;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html {
  width: 100vw;
  min-height: 100%;
}

body {
	background: linear-gradient(to bottom, #ffffff, #005cb2);
  color: #000000;
  margin: 0;
	padding: 0;
}

header {
  display: flex;
  padding: 40px;
  position: fixed;
  transition: .5s;
  width: 100%;
  z-index: 999;
}

header.transform {
  padding: 40px;
}

h2 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
}

h3 {
  /* 768-24px 1440-36px */
  font-size: clamp(1.5rem, 0.643rem + 1.79vw, 2.25rem);
  height: clamp(1.5rem, 0.643rem + 1.79vw, 2.25rem);
  line-height: clamp(1.5rem, 0.643rem + 1.79vw, 2.25rem);
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}
h3 a {
  /* 768-16px 1440-18px */
  font-size: clamp(1rem, 0.857rem + 0.3vw, 1.125rem);
  letter-spacing: 0.12em;
  font-weight: bold;
  display: inline-block;
  vertical-align: top;
}
h4 {
  /* 768-22px 1440-32px */
  font-size: clamp(1.375rem, 0.661rem + 1.49vw, 2rem);
  font-weight: bold;
  letter-spacing: 0.12em;
}
p, th, td ,a{
  /* 768-16px 1440-20px */
  font-size: clamp(1rem, 0.714rem + 0.6vw, 1.25rem);
  font-weight: bold;
  letter-spacing: 0.12em;
  /* 768-26px 1440-40px */
  line-height: clamp(1.625rem, 0.625rem + 2.08vw, 2.5rem);
}

/* スペーシング */
.t30 {
  /* 768-15px 1440-30px */
  padding-top: clamp(0.938rem, -0.134rem + 2.23vw, 1.875rem);
}
.t40 {
  /* 768-20px 1440-40px */
  padding-top: clamp(1.25rem, -0.179rem + 2.98vw, 2.5rem);
}
.t80 {
  /* 768-40px 1440-80px */
  padding-top: clamp(2.5rem, 1.786rem + 3.57vw, 5rem);
}
.l20 {
  /* 768-7px 1440-20px */
  margin-left: clamp(0.438rem, -0.491rem + 1.93vw, 1.25rem);
}
.l30 {
  /* 768-10px 1440-30px */
  margin-left: clamp(0.625rem, -0.804rem + 2.98vw, 1.875rem);
}
.l40 {
  /* 768-13px 1440-40px */
  margin-left: clamp(0.813rem, -1.116rem + 4.02vw, 2.5rem);
}

td a{
  color:#ffffff
}

dt {
  font-size: clamp(0.75rem, 2vw + 1rem, 1rem);
  font-weight: bold;
  padding-top: 10px;
  padding-left: -1em;
}

dd {
  font-size: clamp(0.75rem, 2vw + 1rem, 1rem);
  padding-left: 1em;
}

a {
  position: relative;
  display: inline-block;
  color: #000000;
  text-decoration: none;
}
li a::after {
  position: absolute;
  bottom: 12%;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #005cb2;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}
a:hover::after {
  color: #005cb2;
  transform-origin: left top;
  transform: scale(1, 1);
}

.sv li {
  list-style-type: none ;
  margin-left: 0rem;
  padding-left: 0rem;
  text-indent: -1rem;
  /* 768-16px 1440-20px */
  font-size: clamp(1rem, 0.714rem + 0.6vw, 1.25rem);
  font-weight: bold;
  letter-spacing: 0.12em;
  /* 768-26px 1440-40px */
  line-height: clamp(1.625rem, 0.625rem + 2.08vw, 2.5rem);
}
.sv li:nth-child(1)::before {
  content: "■";
  display: inline-block;
  vertical-align: middle;
  list-style: inside;
  margin: 0 1px;
}
.sv li::before {
  content: "・";
  display: inline-block;
  vertical-align: middle;
  list-style: inside;
  margin: 0 6px;
}

.area0 {
  position: relative;
  height: 100vh;
}
.logo {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-width: 85%;
  z-index: -1;
}

.area1, .area4, .area5 {
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: left;
}

.area2 {
  padding-top: 150px;
  padding-bottom: 30px;
  text-align: left;
}
p.message {
  display: inline-block;
  text-align: left;
  font-family: 'HGP教科書体',sans-serif;
  /* 768-24px 1440-32px */
  font-size: clamp(1.5rem, 0.929rem + 1.19vw, 2rem);
  background: linear-gradient(transparent 0%, transparent 90%, #34b717 90%, #005cb2 100%);
}
p.ceo {
  text-align: right;
  font-family: 'HGP教科書体',sans-serif;
  /* 768-18px 1440-22px */
  font-size: clamp(1.125rem, 0.839rem + 0.6vw, 1.375rem);
}
.profile {
  color: #ffffff;
}
.company {
  width: 95%;
}
.company th, .company td {
  border-top: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  padding: 10px;
  color: #ffffff;
}
.company th {
  font-weight: bold;
  color: #ffffff;
}
.philosophy{
  padding-top: 30px;
  padding-bottom: 30px;
  background: rgba(0,0,0,50%);
  text-align: center;
  color: #ffffff;
  width: 1008%;
}
.history {
  color:#ffffff;
}
.timeline {
  width: 96%;
  max-width: 940px;
  margin: 28px auto;
}
.timeline-list {
  padding: 40px 0;
  color: #ffffff;
}
.timeline-list-item {
  display: flex;
  line-height: 1.5;
  font-size: 16px;
}
.timeline-list-item .year {
  width: 25%;
  padding: 0 0 0 20px;
  font-family: 'Pristina',sans-serif;
  /* 768-30px 1440-60px */
  font-size: clamp(1.875rem, -0.268rem + 4.46vw, 3.75rem);
  font-weight: normal;
  letter-spacing: 0.06rem;
  /* 768-26px 1440-40px */
  line-height: clamp(1.625rem, 0.625rem + 2.08vw, 2.5rem);
}
.timeline-list-item .date {
  position: relative;
  width: 20%;
  /* 768-22px 1440-26px */
  font-size: clamp(1rem, 0.286rem + 1.49vw, 1.625rem);
  font-weight: bold;
  letter-spacing: 0.06rem;
  padding: 0 20px 60px 30px;
  border-left: 2px solid #005cb2;
}
.timeline-list-item:nth-last-child(1) .date {
  position: relative;
  width: 20%;
  /* 768-22px 1440-26px */
  font-size: clamp(1rem, 0.286rem + 1.49vw, 1.625rem);
  font-weight: bold;
  letter-spacing: 0.06rem;
  padding: 0 20px 0px 30px;
}
.timeline-list-item .date::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -10px;
  width: 20px;
  height: 20px;
  background: #005cb2;
  border-radius: 20px;
}
  .timeline-list-item .content {
  width: 55%;
  /* 768-26px 1440-40px */
  line-height: clamp(1.625rem, 0.625rem + 2.08vw, 2.5rem);
}

.area3 {
  padding-top: 50px;
  padding-bottom: 30px;
  text-align: left;
}
.address, .contact {
  color: #ffffff;
}
/*

.img_shadow1{
  box-shadow: 16px 16px 0px #124e54;
}
*/

.img_shadow2{
  box-shadow: 8px 8px 0px #124e54;
}

.title-l{
  position: relative;
  /* 768-75px 1440-100px */
  height: clamp(4.688rem, 2.902rem + 3.72vw, 6.25rem);
  line-height: clamp(4.688rem, 2.902rem + 3.72vw, 6.25rem);
}
.title-l::before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;  
  transform-origin: left top;
  background: rgba(255,255,255, 0.8);
  z-index:-1;
}

.title-r{
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #000000;
}
.title-r::before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;  
  transform-origin: right top;
  background: #d4eded;
  z-index:-1;
}

.footarea{
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #000000;
  background: rgba(255,255,255, 0.8);
}
.foot_logo {
  margin: auto;
  max-width: 100%;
}
.map iframe {
  margin: auto;
  top: 0;
  left: 0;
  /* 320-312px 1440-780px */
  width: clamp(19.5rem, 11.143rem + 41.79vw, 48.75rem);
  /* 320-200px 1440-500px */
  height: clamp(12.5rem, 7.143rem + 26.79vw, 31.25rem);
  box-shadow: 8px 8px 0px #124e54;
}

.contact {
  background-image: url(../img/contact.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
  padding-top: 30px; 
  padding-bottom: 30px; 
}

.contact-box {
  background-color: #ffffff;
  opacity: 75%;
  border-radius: 20px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  color : #000000;
  font-weight: bold;
  line-height: 50px;
}

.top-c {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: rgba(255,255,255, 0.5);
  border-radius: 50%;
  color: #000000;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .area2 {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: left;
  }

  .logo {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 85%;
    z-index: -1;
  }
  .timeline-list-item .year {
    font-size: 20px;
  }
    .timeline-list-item .date {
    width: 25%;
  }  
  .timeline-list-item:nth-last-child(1) .date {
    width: 25%;
  }
}

div.mail-a::before{
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: clamp(0.75rem, 2vw + 1rem, 1.5rem);
  height: clamp(0.75rem, 2vw + 1rem, 1.5rem);
  background: url(../img/mail_a.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 7px;
  margin-bottom: 2px;
}
p.mail-b {
  line-height: 1px;
}
p.mail-b::before{
  content: "";
  display: inline-block;
  width: clamp(0.75rem, 2vw + 1rem, 1.5rem);
  height: clamp(0.75rem, 2vw + 1rem, 1.5rem);
  background: url(../img/mail_b.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  margin-right: 7px;
  transform: translatey(8px);
}

/* エフェクトエリア */
/* 上からフェードイン */
.fade-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1s ease-out;
}

/* 下からフェードイン */
.fade-bottom {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 1s ease-out;
}

 /* 左からフェードイン */
.fade-left {
	opacity: 0;
	transform: translate(-40px, 0);
	transition: all 2s ease-out;
}

/* 右からフェードイン */
.fade-right {
	opacity: 0;
	transform: translate(40px, 0);
	transition: all 2s ease-out;
}

.fade-in {
	opacity: 0;
	transition: all 2s ease-out;
}

#container {
  position: relative;
  height: 100vh;
  overflow: hidden;
  z-index: 10; 
}

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: #34b7a7;
  transform: translate(-50%, -50%);
  transition: transform 0.2s, top, 0.5s, left 0.5s, width 0.5s, height 0.5s, background-color 0.5s;
  animation: animate 2s linear infinite;
  z-index: -2; 
}

@keyframes animate {
  0% {
    filter: brightness(1) hue-rotate(0deg) blur(50px);
  }
  50% {
    filter: brightness(1.3) hue-rotate(180deg) blur(100px);
  }
  100% {
    filter: brightness(1) hue-rotate(36deg) blur(50px);
  }
}

#stalker {
  position: fixed;
  top: -8px;
  left: -8px;
  width: 16px;
  height: 16px;
  background: rgb(84, 85, 184);
  border-radius: 50%;
  transition: transform 0.2s, top, 0.5s, left 0.5s, width 0.5s, height 0.5s, background-color 0.5s;
  transition-timing-function: ease-out;
  z-index: -1;
}
#stalker.hov_ {
  top: -32px;
  left: -32px;
  width: 64px;
  height: 64px;
  transition: 0.5s;
  background: rgba(16, 241, 102, 0.4);
}