html { min-height: 100vh; }
body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}
.text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Times New Roman','Century';
  color: white;
  font-size: 5vw;
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.text.is-active {
  --opacity: 1;
}
.char {
  display: inline-block;
  opacity: var(--opacity, 0);
  transition: opacity 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: calc(0.05s * var(--char-index));
}
.opening {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #181003dc;
  padding: 0px;
  margin: 0px;
  padding-bottom: 10.5px;
  padding-top: 10.5px;
}
.visuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.header-contents {
  width: 100%;
  max-width: 100%;
  min-width: 96%;
  height: auto;
  display: flex;
  background-color: #ebdfa7c2;
  position: fixed;
  top: 0;
  left: 0;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  z-index: 100;
  display: flex;
}  
.Top-header a {
  margin-top: 20px;
}
.header-Logo {
  width: 37%;
}
.logo {
  width: 43%;
  padding-left: 4.5%;
  transform: translateY(10%);
}
.title {
  -webkit-appearance: none !important;
  appearance: none !important;
  color: white !important; 
  text-decoration: none !important;
}

.Top-button {
  width: 60%;
  height: 100%;
  display: block;   
  text-align: right;
  padding-right: 2%;
}  
.tool {
  padding-right: 1%;
}
button {
  font-family:  'Times New Roman','Century';
  color: white;
  background-color: #ebdea703;
  font-size: 24px;
  max-width: 100%;
  height: auto;
}
button:hover,
.content-button a:hover{
  color: #88570e;
}
#page {
  text-decoration:underline;
  text-decoration-color: #9976437a;
  text-underline-offset: 3px;
}
.Top-main{
  object-fit: cover;
  background-size: cover;
  background-position: 46% 50%;
}
.container {
  display: flex;
  position: relative;
  min-height: 100vh;
}
.corporate-main {
  text-align: center;
  width: 80%;
  max-width: 800px;
}
.corporate-main h1 {
  font-size: 1.8em;
  color: #88570e;
  margin: 20px 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
li {
  font-size: 1.0em;
  margin: 10px 0;
  color: #88570e;
  font-family: 'Times New Roman','Century';
}
.description_top {
  font-size: 0.8em;
  color: #88570e;
  margin-left: 5px;
}
.subtitle {
  color: #88570e;
}
.corporate-maim {
  margin: 6% auto 0 auto;
}
.Top-contents {
  align-items: center; 
  height: 100vh;
}
.Top-content {
  display: flex;
  align-items: center; 
  gap: 20px;
}
h2 {
  width: 50%;
  font-size: 5.2vw; 
  animation: fadeIn 10s ease 1s 1 normal backwards; 
  margin: 0;  
  padding-left: 5%;             
}
.Top-img {
  width: 50%;
  object-fit: cover; 
  animation: fadeIn 5s ease 1s 1 normal backwards;   
  height: auto;   
  padding-right: 5%;          
}
.contact-contents{
  padding-bottom: 3%;
}
.confirm-input{
  font-size: 20px;
}
.subtitle {
  text-align: center;
}
.text-center {
  text-align: center;
}
@media screen and (max-width: 600px) {
  .corporate-maim {
    margin-top: 15%;
  }
  .submit  {
    padding-bottom: 13%;
  }
  .content-inner {
    width: 100%;
    margin-bottom: 10%;
  }
}
@media screen and (min-width: 600px) {
  .submit  {
    padding-bottom: 13%;
    }
}
@media screen and (min-width: 500px) and (max-width: 770px){
  .Top-button {
   min-width: 10%;
  }
  /* menu */
  .menu {
    display: block;
    position: fixed;
    z-index: 3;
    bottom: 99.6%;
    left: 93%;
    width: 5%;
    cursor: pointer;
    text-align: center;
  }
  .menu span {
    display: block;
    position: absolute;
    width: 70%;
    height: 2px;
    left: 2%;
    background-color: #530f0f;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .menu span:nth-child(1) {
    top: 10px;
  }
  .menu span:nth-child(2) {
    top: 20px;
  }
  .menu span:nth-child(3) {
    top: 30px;
  } 
  .menu.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    background :#5c0101;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }
  .menu.active span:nth-child(2),
  .menu.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(-45deg);
  }
  .menu.active span:nth-child(2),
  .menu.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  }
  nav.globalMenuSp {
    position: fixed;
    z-index : 2;
    top  : 0;
    left : 0;
    color: #88570e;
    background: #ebdea7;
    text-align: center;
    width: 100%;
    opacity: 0;
    display: none;
    transition: opacity .6s ease, visibility .6s ease;
  }
  nav.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    font-size: 22px;
  }
  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all;
  }
  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
  }
  nav.globalMenuSp ul li:hover{
    background :#fffcfc;
  }
  nav.globalMenuSp ul li a {
    display: block;
    color: #88570e;
    padding: 1em 0;
    text-decoration :none;
  }
  nav.globalMenuSp.active {
    opacity: 100;
    display: block;
  }
  .confirm-container input {
    position: absolute;
  }
  .confirm-container button {
    margin-left: 15%;
  }
  }
.Top-main {
  background-color: rgba(90, 89, 84, 0.699);
  height: 100%;
  margin-bottom: calc(-19vw + 19%);
  position: relative;
}
.scroll-rigth-photo {
  position: sticky;
  position: -webkit-sticky;
  top:0;
}
.scroll-face {
  height: 100vh;
  width: 100%;
  position: absolute;
}
.scroll-face1 {
  object-fit: cover;
  position: absolute;
  left:3%;
  top: 7%;
  bottom: 0;
}
.scroll-face2 {
  object-fit: cover;
  position: absolute;
  top: 37%;
  bottom: 0;
  left: 10%;
}
.scroll-face3 {
  object-fit: cover;
  transform: rotate(-10deg);
  position: absolute;
  top: 57%;;
  bottom: 0;
  left: 1%;
}
.scroll-face5 {
  object-fit: cover;
  position: absolute;
  top: 74%;
  left: 14%;
  bottom: 0;
}
.scroll-face6 {
  object-fit: cover;
  position: absolute;
  top: 6%;
  bottom: 0;
  left: 69%;
}
.scroll-face7 {
  object-fit: cover;
  position: absolute;
  top: 77%;
  bottom: 0;
  left: 81%;
}
.scroll-face8 {
  object-fit: cover;
  transform: rotate(-10deg);
  position: absolute;
  top: 80%;
  bottom: 0;
  left: 69%;
}
.scroll-face9 {
  object-fit: cover;
  position: absolute;
  top: 33%;
  left: 83%;
}
.scroll-face10 {
  transform: rotate(10deg);
  position: absolute;
  top: 52%;
  left: 69%;
}
@media screen and (min-width: 1280px) {
  .Top-contents {
    font-family:  'Times New Roman','Century';
    font-size: 24px;
    color: white;
    background-color: #ebdea7;
    height: 100%;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .Top-main {
    background-color: rgba(90, 89, 84, 0.699);
    height: 100%;
    margin-bottom: calc(-19vw + 19%);
    position: relative;
  }
 .scroll-rigth-photo {
    position: sticky;
    position: -webkit-sticky;
    top:0;
  }
 .scroll-face {
    height: 100vh;
    width: 100%;
    position: absolute;
  }
  .Top-main-scroll {
    width: 35%;
    background-color: white;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  .scroll {
    background-color: #ebdea7;
    width: 80%;
    border-radius: 100px;
    padding: 70px 0;
    position: sticky;
    top: 0;
    transform: translate(69%, 5%);
  }
  .main-scroll {
    position: absolute;
    bottom: 2em;
    width: 3em;
    height: 3em;
    span {
      width: 1em;
      height: 1em;
      position: absolute;
      top: 90%;
      left: 33%;
      transform: translateY(0) rotate(-45deg);
      border-left: 3px solid #F5F5F5;
      border-bottom: 3px solid #F5F5F5;
      z-index: 2;
      animation: popping-arrow 2s infinite ease-out;
    }
    &:hover span {
      transform: translateY(.5em) rotate(-45deg) ;
      animation: paused;
    }
  }
  @keyframes popping-arrow {
    0% {
      transform: translateY(0) rotate(-45deg);
    }
    30% {
      transform: translateY(.5em) rotate(-45deg);
    }
    60% {
      transform: translateY(0) rotate(-45deg);
    }
  }
  .Top-main-scroll h3{
    background-color: #ebdea7;
    border: 4px solid white;
    width: 95%;
    text-align: center;
    position: relative;
    right: 70%;
    padding: 30px 0;
    font-size: 30px;
  }
  .Top-example {
    text-align: center;
    margin: 0 auto;
    margin-top: 5%;
  }
  .Top-example a{
    color: #b17111;
    border: 7px solid #ebdea7;
    border-radius: 10px;
    font-size: 24px;
  }
  .Top-example img {
    border-radius: 40px;
    object-fit: cover;
  }
  .ex1 {
    background-color: #ebdea7;
    width: 100%;
    height: 70%;
    padding: 20px 0;
    border-radius: 100px;
    margin-top: 2%;
  }
  .ex1-bottom {
    background-color: white;
    height: 30%;
    width: 90%;
    margin: 0 auto;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    border-radius: 100px;
  }
  .Top-last-button-bottom {
    background-color: #ebdea7;
    width: 80%;
    border-radius: 100px;
    padding:80px 0;
    position: relative;
    right: 35%;
  }
  .Top-last-button-bottom button{
    text-align: center;
    margin-left: 74%;
    font-size: 30px;
    margin-bottom: 5%;
  }
  .corporate-button {
    background-color: #ebdea7;
    border: 2px solid white;
    padding: 15px 0;
    width: 80%;
  }
  .inquiry-button {
    width: 50%;
    background-color: #ebdea7;
    border: 2px solid white;
    padding: 15px 0;
  }
  .corporate-button,
  .inquiry-button{
    transition: 100ms linear;
  }
  .corporate-button:hover,
  .inquiry-button:hover {
    cursor: pointer;
  }
  .corporate-button:hover:before,
  .inquiry-button:hover:before {
    opacity: 1;
  }
/* corporate */
  .Top-button{
    margin: 0;
  }
  button {
    font-family:  'Times New Roman','Century';
    color: white;
    background-color: #ebdfa700;
    border: none;
    font-size: 22px;
  }
  .menu,.globalMenuSp {
    display: none;
  }
  .corporate {
    width: 50%;
    font-size: 24px;
    border: 4px solid #ebdea7;
    margin: 0 auto;
    padding: 20px 50px;
  }
  .corporate-history {
    width: 50%;
    font-size: 24px;
    border: 4px solid #ebdea7;
    margin: 0 auto;
    padding: 20px 50px;
  }
  .corporate-work {
    width: 50%;
    font-size: 24px;
    border: 4px solid #ebdea7;
    margin: 0 auto;
    padding: 5px 50px;
  }
  .corporate-maim h1{
    width: 16%;
    color: white;
    background-color: #ebdea7;
    border: 4px solid #ebdea7;
    margin-left: 20%;
    text-align: center;
    font-size: 24px;
  }
 /* contact */
  .content-inner {
    width: 70%;
    padding-bottom: 8%;
    margin: 6% auto 0 auto;
  }
  .contact {
    width: 60%;
    margin: 0 auto;
  }
  #page-title > h1 {
    border-bottom: solid 2px #ebdea7;
  }
    /* conform */
  .confirm {
    width: 60%;
    margin: 0 auto;
  }
  .confirm-container input {
    left: 25%;
    transform: translateX(-46%);
    font-size: 20px;
    font-family: 'Times New Roman', 'Century';
  }
  .confirm-container button {
    left: 63%;
    transform: translateX(-7%);
    font-size: 22px;
  }
  /* finish */
  .finish {
    width: 60%;
    margin: 0 auto;
  }
}
/* スマホ縦 */
@media only screen and (min-width: 390px) and (max-width: 430px) and (orientation: portrait) {
  .Top-contents {
    align-items: center; 
    height: 100vh;
  }
  .Top-content {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 20px;
  }
  .Top-img {
    object-fit: cover; 
    min-width: 78%;        
  }
  .content-inner {
    margin-bottom: 15%;
  }
  .confirm-container input {
    position: absolute;
  }
  .confirm-container button {
    margin-left: 9%;
  }
  .contact-contents {
    padding-bottom: 5%;
  }
}
@media only screen  and (max-width: 375px) and (orientation: portrait) {
  .Top-contents {
    align-items: center; 
    height: 100vh;
  }
  .Top-content {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 20px;
  }
  .container h2 {
    font-size: 35px;
  }
  img.Top-img {
    min-width: 70%;
  }
  .corporate-maim {
    margin: 6% auto 0 auto;
    padding-top: 2%;
  }
  .content-inner {
    margin-bottom: 14%;
}
  .content-inner {
    padding-bottom: 15%;
  }
  .content-inner {
    margin-bottom: 15%;
  }
  .confirm-container input {
    position: absolute;
  }
  .confirm-container button {
    margin-left: 15%;
  }
}
@media only screen and (min-width: 344px) and (max-height: 882px) and (orientation: portrait) {
  .contact-contents {
    padding-bottom: 7%;
  }
}
@media only screen and (min-width: 820px) and (max-width: 1180px) and (orientation: portrait) {
  .Top-main-scroll {
    min-width: 100%;
  }
}
@media only screen and (min-width: 912px) and (orientation: portrait) {
  .Top-main-scroll {
    min-width: 100%;
  }
  .scroll-rigth-photo {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .Top-content {
    width: 100%;
  }
} 
@media only screen and (min-width: 1024px) and (max-height: 768px) and (orientation: landscape) {
  .scroll-rigth-photo {
    margin-right: 7%;
}
.scroll-face5,.scroll-face7,.scroll-face9 {
  width: 30%;
  margin-left: -6%;
  margin-top: 3%;
}
.scroll-face6 {
  width: 30%;
  margin-left: 7%;
  margin-top: 3%;
}
}
@media only screen  and (min-height: 912px) and (orientation: landscape) {
  .scroll-face5,.scroll-face7,.scroll-face9 {
    margin-left: -6%;
    margin-top: 3%;
  }

}
/* タブレット */
@media only screen and (min-width: 912px) and (max-width: 1368px) and (orientation: portrait) {
  .Top-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 60px;
  }
  img.Top-img {
    order: -1;
    width: 83%;
    padding: 0;
  }
  h2 {
    animation: fadeIn 10s ease 1s 1 normal backwards;
    font-size: 58px;
    padding: 0;
  }
}
@media only screen and (min-width: 1180px) and (max-height: 820px) and (orientation: landscape) {
  .content-inner {
    padding-bottom: 8%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .Top-contents {
    align-items: center; 
    height: 100vh;
  }
  .Top-content {
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 20px;
  }
 img.Top-img {
    order: -1;
    width: 60%;
    padding: 0;
  }
  h2 {
    animation: fadeIn 10s ease 1s 1 normal backwards;
    font-size: 58px;
    padding: 0;
  }
  .corporate-maim {
    display: flow-root;
  }
  .content-inner {
    padding-top: 7%;
    margin-bottom: 5%;
  }
}
@media only screen and (min-width: 853px) and (max-height: 1280px) and (orientation: portrait) {
  .Top-content {
    margin-top: 37%;
  }
}
@media only screen and (min-width: 360px) and (max-height: 740px) and (orientation: portrait) {
  .progressbar .item.active:not(:last-child)::after {
    font-size: 9px;
  }
  .confirm-container button {
    transform: translateX(3%);
    left: 57%;
    font-size: 19px;
  }
  .content-inner {
    padding-bottom: 15%;
}
  .content-inner {
    margin-bottom: 15%;
  }
  .confirm-container input {
    position: absolute;
  }
  .confirm-container button {
    margin-left: 6%;
  }
  .contact-contents {
    padding-bottom: 5%;
  }
  ul {
    margin: 20px 20px;
  }
}
@media only screen and (min-width: 1023px) and (max-width: 1366px) {
  .container {
    min-height: 100vh;
    top: 13vh;
  } 
  .container h2 {
    width: 50%;
    font-size: 5.2vw;
    animation: fadeIn 10s ease 1s 1 normal backwards;
    position: absolute;
    top: 14%;
    left:-2%;
  }
  img.Top-img {
    width: 50%;
    object-fit: contain;
    position: absolute;
    right: 0;
    animation: fadeIn 5s ease 1s 1 normal backwards;
    padding-bottom: 5%;
    top: 14%;
  }
}
@media screen and (max-width: 1366px) {
/* top */
  .header-contents {
    width: 100%;
    max-width: 100%;
  } 
  .Top-header {
    width: 100.7%;
    padding-bottom: 2%;
  }  
  .menu,.globalMenuSp {
    display: none;
  }
  .corporate-header button,
  .contact-header button,
  .finish-header button,
  .Top-header {
    display: none;
  }
  .Top-contents {
    font-family:  'Times New Roman','Century';
    color: white;
    background-color: #ebdea7;
    height: 100%;
  }
  .Top-main {
    background-color: rgba(90, 89, 84, 0.699);
    min-width: 100%;
    height: 100%;
    margin-bottom: calc(-19vw + 19%);
    position: relative;
  }
  .main-scroll {
    position: absolute;
    bottom: 2em;
    width: 3em;
    height: 3em;
      span {
        width: 1em;
        height: 1em;
        position: absolute;
        top: 90%;
        left: 33%;
        transform: translateY(0) rotate(-45deg);
        border-left: 3px solid #F5F5F5;
        border-bottom: 3px solid #F5F5F5;
        z-index: 2;
        animation: popping-arrow 2s infinite ease-out;
      }
      &:hover span {
        transform: translateY(.5em) rotate(-45deg) ;
        animation: paused;
      }
  }
  @keyframes popping-arrow {
    0% {
      transform: translateY(0) rotate(-45deg);
    }
    30% {
      transform: translateY(.5em) rotate(-45deg);
    }
    60% {
      transform: translateY(0) rotate(-45deg);
    }
  }
  .Top-main-scroll {
    width: 35%;
    background-color: white;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  .scroll {
    background-color: #ebdea7;
    width: 80%;
    border-radius: 100px;
    padding: 70px 0;
    position: sticky;
    top: 0;
    transform: translate(69%, 5%);
    position: relative;
    top: 0;
  }
  .Top-main-scroll h3{
    background-color: #ebdea7;
    border: 4px solid white;
    width: 95%;
    text-align: center;
    position: relative;
    right: 70%;
    padding: 30px 0;
    font-size: 30px;
  }
  .Top-example {
    text-align: center;
    margin: 0 auto;
    margin-top: 5%;
  }
  .Top-example a{
    color: #b17111;
    border: 7px solid #ebdea7;
    border-radius: 10px;
    font-size: 23px;
  }

  .Top-example img {
    border-radius: 40px;
    object-fit: cover;
  }
  .ex1 {
    background-color: #ebdea7;
    width: 100%;
    height: 70%;
    padding: 20px 0;
    border-radius: 100px;
    margin-top: 2%;
  }
  .ex1-bottom {
    background-color: white;
    height: 30%;
    width: 90%;
    margin: 0 auto;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    border-radius: 100px;
  }
  .Top-last-button-bottom {
    background-color: #ebdea7;
    width: 80%;
    border-radius: 100px;
    padding:80px 0;
    position: relative;
    right: 35%;
  }
  .Top-last-button-bottom button{
    text-align: center;
    margin-left: 74%;
    font-size: 30px;
    margin-bottom: 5%;
  }
  .corporate-button {
    background-color: #ebdea7;
    border: 2px solid white;
    padding: 15px 0;
    width: 80%;
  }
  .inquiry-button {
    width: 50%;
    background-color: #ebdea7;
    border: 2px solid white;
    padding: 15px 0;
  }
  .corporate-button,
  .inquiry-button{
    transition: 100ms linear;
  }
  .corporate-button:hover,
  .inquiry-button:hover {
    cursor: pointer;
  }
  .corporate-button:hover:before,
  .inquiry-button:hover:before {
    opacity: 1;
  }
/* corporate */
  .corporate, .corporate-history, .corporate-work {
    width: 80%;
    border: 4px solid #ebdea7;
    margin: 0 auto;
    padding: 1%;
    font-size: 18px;
  }
  .corporate-maim h1 {
    width: 21%;
    color: white;
    background-color: #ebdea7;
    border: 4px solid #ebdea7;
    margin-left: 20%;
    text-align: center;
    font-size: 19px;
  }
  .content-button {
    color: white;
    text-decoration: none;
    display: block;
    margin: auto;
  }
}
@media screen and (max-width: 350px) {
  h1#corporate {
    min-width: 70%;
  }
}
@media screen and (max-width: 1510px) {
  h1#corporate {
    width: 28%;
  }
}
@media screen and (max-width: 1279px) {
  .content-inner {
    width: 100%;
    padding-bottom: 12%;
  }
  .contact {
    width: 80%;
    margin: 0 auto;
  }
  #page-title > h1 {
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
    border-bottom: solid 2px #ebdea7;
    color: #88570e;
  }
/* confirm */
  .submit {
    font-size: 20px;
  }
  .confirm {
    width: 80%;
    margin: 0 auto;
  }
  .confirm-container input {
    transform: translateX(-47%);
    left: 25%;
    font-size: 16px;
    font-family: 'Times New Roman', 'Century';
  }
  .confirm-container button {
    transform: translateX(3%);
    left: 62%;
    font-size: 19px;
  }
  /* finish */
  .finish {
    width: 80%;
    margin: 0 auto;
  }
  #page-title > h1 {
    width: 80%;
    margin: 0 auto;
    margin-top: 80px;
    border-bottom: solid 2px #ebdea7;
  }
  .content-button {
    color: white !important;
    text-decoration: none !important;
    display: block; 
    margin: auto;
    font-size: 20px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation:portrait){
  .Top-main-scroll {
    min-width: 100%;
  }
  .scroll-rigth-photo {
    display: none;
  }
  .container img {
    transform: translate(-38%, -30%);
    width: 57%;
  } 
  .container h2 {
    font-size: 64px;
    transform: translate(56%, 87%);
  } 
  .contact-contents {
    font-family: 'Times New Roman', 'Century';
    color: #88570e;
    height: 84vh;
  }
}
@media screen and (min-width: 1024px) {
  .corporate-maim h1{
    color: white;
    background-color: #ebdea7;
    border: 4px solid #ebdea7;
    margin-left: 20%;
    text-align: center;
    font-size: 19px;
  }
  #corporate {
    max-width: 23%;
  }
}
@media screen and (max-width: 1024px) {
  #corporate {
    min-width: 20%;
    margin-top: 10%;
    padding: 0 1%;
  }
  h2 {
    margin: 20px 0;
    font-size: 44px;
    animation: fadeIn 10s ease 1s 1 normal backwards;            
  }
  .Top-img {
    animation: fadeIn 5s ease 1s 1 normal backwards;         
  }
  .container {
    height: 99vh;
  }
  .Top-main-scroll {
    width: 50%;
    background-color: white;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  .scroll {
    background-color: #ebdea7;
    width: 80%;
    border-radius: 100px;
    padding: 15% 0;
    position: sticky;
    top: 0;
  }
  .main-scroll {
    position: absolute;
    bottom: 2em;
    width: 3em;
    height: 3em;
    span {
      width: 1em;
      height: 1em;
      position: absolute;
      top: 90%;
      left: 33%;
      transform: translateY(0) rotate(-45deg);
      border-left: 3px solid #F5F5F5;
      border-bottom: 3px solid #F5F5F5;
      z-index: 2;
      animation: popping-arrow 2s infinite ease-out;
    }
    &:hover span {
      transform: translateY(.5em) rotate(-45deg) ;
      animation: paused;
    }
  }      
  @keyframes popping-arrow {
    0% {
      transform: translateY(0) rotate(-45deg);
    }
    30% {
      transform: translateY(.5em) rotate(-45deg);
    }
    60% {
      transform: translateY(0) rotate(-45deg);
    }
  }
  .Top-main-scroll h3{
    background-color: #ebdea7;
    font-size: 24px;
    border: 4px solid white;
    text-align: center;
    position: relative;
    right: 60%;
    padding: 5% 0;
  }
  .Top-example {
    text-align: center;
    margin: 0 auto;
    margin-top: 5%;
  }
  .Top-example a{
    color: #b17111;
    border: 7px solid #ebdea7;
    border-radius: 10px;
    font-size: 23px;
  }
  .Top-example img {
    border-radius: 40px;
    object-fit: cover;
  }
  .ex1 {
    background-color: #ebdea7;
    width: 100%;
    height: 70%;
    padding: 20px 0;
    border-radius: 100px;
    margin-top: 2%;
  }
  .ex1-bottom {
    background-color: white;
    height: 30%;
    width: 90%;
    margin: 0 auto;
    padding: 10px 0;
    overflow: hidden;
    position: relative;
    border-radius: 100px;
  }
  .Top-last-button-bottom {
    background-color: #ebdea7;
    width: 80%;
    border-radius: 100px;
    padding:80px 0;
    position: relative;
    right: 35%;
  }
  .Top-last-button-bottom button{
    text-align: center;
    margin-left: 74%;
    font-size: 30px;
    margin-bottom: 5%;
  }
  .corporate-button {
    background-color: #ebdea7;
    border: 2px solid white;
    padding: 15px 0;
    width: 80%;
  }
  .inquiry-button {
    width: 50%;
    background-color: #ebdea7;
    border: 2px solid white;
    padding: 15px 0;
  }
  .corporate-button,
  .inquiry-button{
    transition: 100ms linear;
  }
  .corporate-button:hover,
  .inquiry-button:hover {
    cursor: pointer;
  }
  .corporate-button:hover:before,
  .inquiry-button:hover:before {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .content-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    color: white !important; 
    text-decoration: none !important;
  }
  #corporate {
    width: 48%;
    margin-left: 5%;
    min-width: 50%;
  }
}
@media screen and (min-width: 390px) and (max-width: 844px){
  .scroll-rigth-photo {
    display: none;
  }
  .Top-main {
    background-color: rgba(90, 89, 84, 0.699);
    width: 100%;
    max-width: 100%;
    animation: fadeIn 3s ease 1s 1 normal backwards;
    font-size: 10px;
  }
  .corporate-maim h1 {
    font-size: 15px;
  }
  .corporate-contents {
    padding-bottom: 38%;
  }
  .corporate,.corporate-history,.corporate-work {
    width: 80%;
    border: 4px solid #ebdea7;
    margin: 0 auto;
    font-size: 15px;
    padding: 3%;
  }


  .corporate-maim h1{
    color: white;
    background-color: #ebdea7;
    border: 4px solid #ebdea7;
    margin-left: 20%;
    text-align: center;
    max-width: 50%;
  }
  .confirm-container button {
    font-size: 18px;
  }
  button:hover {
    color: #88570e;
  } 
  .Top-example a {
    font-size: 23px;
  }
  .content-button {
    height: 60px;
    margin-top: 40px;
    border-width: 1px;
    border: 2px solid #c0b58b;
    color: #FFF;
    background-color: #ebdea7;
    font-weight: bold;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s;
    padding: 0 1%;
    color: white;
    text-decoration: none;
    color: white;
    text-decoration: none;
    display: block;
  }

}
@media screen and (max-width: 770px) {
  .progressbar .item:not(:last-child)::after {
    margin: auto;
  }
}
@media only screen and (max-width: 844px) and (min-width: 375px) and (orientation: landscape){
  .confirm-container button {
    transform: translateX(23%);
  }
}
@media (orientation:portrait)  and (max-width:  390px) {
  .Top-button {
  display: none;
  }
  .hanverger {
    width: 60%;
  }
  .menu {
    display: block;
    position: fixed;
    z-index: 3;
    bottom: 99.6%;
    left: 88%;
    width: 12%;
    cursor: pointer;
    text-align: center;
  }
  .menu span {
    display: block;
    position: absolute;
    width: 70%;
    height: 2px;
    left: 2%;
    background-color: #530f0f;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .menu span:nth-child(1) {
   top: 10px;
  }
  .menu span:nth-child(2) {
    top: 20px;
  }
  .menu span:nth-child(3) {
    top: 30px;
  }
  .menu.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    background :#5c0101;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }
  .menu.active span:nth-child(2),
  .menu.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(-45deg);
  }
  .menu.active span:nth-child(2),
  .menu.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  } 
  nav.globalMenuSp {
    position: fixed;
    z-index : 2;
    top  : 0;
    left : 0;
    color: #88570e;
    background: #ebdea7;
    text-align: center;
    width: 100%;
    opacity: 0;
    display: none;
    transition: opacity .6s ease, visibility .6s ease;
  }
  nav.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    font-size: 22px;
  }
  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all;
  }
  nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
  }
  nav.globalMenuSp ul li:hover{
    background :#fffcfc;
  }
  nav.globalMenuSp ul li a {
    display: block;
    color: #88570e;
    padding: 1em 0;
    text-decoration :none;
  }
  nav.globalMenuSp.active {
    opacity: 100;
    display: block;
  } 
}
@media screen and (max-width: 390px) {
  .corporate-maim h1 {
    width: 50%;
    color: white;
    background-color: #ebdea7;
    border: 4px solid #ebdea7;
    margin-left: 20%;
    text-align: center;
    font-size: 15px;
  }
}
@media screen and  (max-height:412px){
  .corporate-maim h1 {
    color: white;
    background-color: #ebdea7;
    border: 4px solid #ebdea7;
    margin-left: 20%;
    text-align: center;
    max-width: 50%;
  }
}
@media (orientation:portrait)  and (max-width:  499px) {
  .logo {
    min-width: 80%;
    padding-left: 10%;
    padding-top: 1%;
  }
  .Top-button {
    display: none;
  }
  .hanverger {
   width: 60%;
  }
  .menu {
    display: block;
    position: fixed;
    z-index: 3;
    bottom: 93%;
    left: 85%;
    width: 12%;
    cursor: pointer;
    text-align: center;
    height: 6.5%;
  }
  .menu span {
    display: block;
    position: absolute;
    width: 70%;
    height: 2px;
    left: 2%;
    background-color: #530f0f;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  .menu span:nth-child(1) {
    top: 10px;
  }
  .menu span:nth-child(2) {
    top: 20px;
  }
  .menu span:nth-child(3) {
    top: 30px;
  }
  .menu.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    background :#5c0101;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }
  .menu.active span:nth-child(2),
  .menu.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(-45deg);
  }
  .menu.active span:nth-child(2),
  .menu.active span:nth-child(3) {
    top: 16px;
    background :#fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  } 
  nav.globalMenuSp {
    position: fixed;
    z-index : 2;
    top  : 0;
    left : 0;
    color: #88570e;
    background: #ebdea7;
    text-align: center;
    width: 100%;
    opacity: 0;
    display: none;
    transition: opacity .6s ease, visibility .6s ease;
  }
  nav.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    font-size: 22px;
  }
  nav.globalMenuSp ul li {
    list-style-type: none;
    padding: 0;
    width: 100%;
    transition: .4s all;
  }
  nav.globalMenuSp ul li:last-child {
   padding-bottom: 0;
  }
  nav.globalMenuSp ul li:hover{
    background :#fffcfc;
  }
  nav.globalMenuSp ul li a {
    display: block;
    color: #88570e;
    padding: 1em 0;
    text-decoration :none;
  }
  nav.globalMenuSp.active {
    opacity: 100;
    display: block;
  } 
}
@media (orientation: portrait) and  (max-height:350px){
  .container h2 {
    text-align: center;
    max-width: 20%;
    transform: translate(-25%, -23%);
    min-width: 101%;
  }
  img.Top-img {
    object-fit: cover;
    position: absolute;
    animation: fadeIn 5s ease 1s 1 normal backwards;
    top: 12%;
    min-width: 75%;
    transform: translate(-44%, -55%);
  }
}
@media (orientation: portrait) and (max-width:850px) {
  .Top-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  img.Top-img {
    order: -1;
    padding: 0;
  }
}
@media screen and (max-width:820px) {
  .Top-main-scroll {
   width: 100%;
  }
}
@media screen and (max-width:700px) {
  .scroll-rigth-photo {
    display: none;
  }
}
@media only screen and (min-device-width: 360px) and (max-device-width: 740px) and (orientation: landscape) {
  .Top-content h2{
   margin-left: 9%;
  }
  img.Top-img {
    margin-left: 1%;
  }
  .contact-contents {
   padding-bottom: 7%;
  }
}
@media only screen and (max-width: 667px) and (max-height: 375px) and (orientation: landscape) {
  .Top-img {
    transform: translate(8%, 12%);
    width: 40%;
    margin: 0;
  }
  .container h2 {
    position: absolute;
    top: 19%;
    left: 1%;
  }
}
@media only screen and (max-width: 540px) and (max-height: 720px) and (orientation: portrait) {
  img.Top-img {
    order: -1;
    width: 50%;
    padding: 0;
  }
}
@media (orientation: landscape) and (max-height: 450px) {
  .Top-content {
    margin-top: 5%;
  }
  .container h2 {
    transform: translate(-25%, -10%);
    text-align: center;
  }
  img.Top-img {
    object-fit: cover;
    position: absolute;
    animation: fadeIn 5s ease 1s 1 normal backwards;
    top: 18%;
    max-width: 43%;
    left: 50%;
  }
  .scroll-rigth-photo {
    display: none;
  }
  .Top-main-scroll {
   width: 100%;
  }
}
@media screen  and (max-width: 344px) {
  .Top-example .Top-example-Culture {
    font-size: 20px;
  }
}
@media screen  and (min-width: 376px) and (max-width: 911px) {
  .container h2 {
    font-size: 40px;
  }
}
@media screen and (max-width: 914px) {
  .tool,.header-logo .title {
    font-size: 17px;
    padding-left: 4%;
  }
  .Top-example a {
    font-size: 23px;
  }
  .corporate-header {
    width: 100%;
    display: block;
    padding-bottom: 10%;
  }
  .Top-main-scroll h3 {
    left: -66%;
  }
  .corporate-maim h1 {
    width: 52%;
    font-size: 15px;
    margin-left: 5%;
  }
  .content-button {
    color: #88570e;
    text-decoration: none;
    display: block;
    font-size: 20px;
  }
}
div {
  margin: 0 auto;
}
#page-title {
margin: 0 auto;
}
#form-contact {
  margin: 0 auto;
  width: 100%;
  position: relative;
  font-size: 14px;
}
.form-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.form-item input, select {
  height: 60px;
  width: 100%;
  margin-top: 20px;
  background-color: #f1f1f1;
  border-width: 1px;
  border-radius: 3px;
}
.form-item textarea {
  background-color: #f1f1f1;
  margin-top: 20px;
  border-width: 1px;
  border-radius: 3px;
  font-size: 14px;
}
.empty {
  color: #777;
}
.name-input-container {
  display: flex;
  width: 100%;
}
#lastname-input {
  margin-right: 10px;
}
.submit {
  height: 60px;
  margin: 40px 0;
  border-width: 1px;
  border-radius: 3px;
  border: 2px solid #c0b58b;
  color: #FFF;
  background-color: #ebdea7;
  font-weight: bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s;
  padding: 0 1%;
}
.progressbar {
  display: flex;
  flex-wrap: wrap;
  margin-top: 80px;
  margin-bottom: 60px;
}
.progressbar .item {
  position: relative;
  width: 30%;
  text-align: center;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 13px 0;
  line-height: 1.5;
  background: #F5F5F5;
  color: #999999;
}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  content: '';
  border: 37px solid transparent;
  border-left: 20px solid #F5F5F5;
}
.progressbar .item:not(:last-child)::before {
  margin-left: 1px;
  border-left-color: #FFF;
}
@media screen and (max-width: 767px) {
.progressbar .item {
  font-size: 9px;
  line-height: 1.4;
  padding: 12px 0;
}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
  border-left-width: 12px;
}
}
/* active */
.progressbar .item.active {
  background: #ebdfa7e5;
  color: #88570e;
}
.progressbar .item.active:not(:last-child)::after {
  border-left-color: #ebdea7;
}
/* corporate */
.contact-contents{
  font-family:  'Times New Roman','Century';
  color: #88570e;
}
.tool { 
  position: relative;
  cursor: pointer;
  color: white;
  border: none;
}
.description_bottom { 
  width: 89%;
  position: absolute;
  top: 80%; 
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px; 
  padding: 8px;
  border-radius: 10px;
  background-color: #666;
  font-size: 0.7em;
  color: #fff;
  text-align: center;
  visibility: hidden;
  opacity: 0; 
  z-index: 1;
  transition: 0.5s all;
}
.tool:hover .description_bottom,
.inquiry-button:hover .description_bottom,
.corporate-button:hover .description_bottom{ 
  top: 100%; 
  visibility: visible; 
  opacity: 1; 
}
.tooltip,.inquiry-button,.corporate-button { 
  position: relative;
  cursor: pointer;
  color: white;
}
/* finish */
.finish > p {
  margin: auto;
  text-align: center;
  font-size: 20px;
  color: #88570e;
  font-family:'Times New Roman','Century'; 
}
.content-button {
  height: 60px;
  margin-top: 40px;
  border-width: 1px;
  border-radius: 3px;
  border: 2px solid #c0b58b;
  color: #FFF;
  background-color: #ebdea7;
  font-weight: bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s;
  padding: 0 1%;
  color: white;
  text-decoration: none;
  color: white;
  text-decoration: none;
  display: block;
}
/* confirm */
.confirm-container {
  margin: 20px auto;
}
.confirm-item {
  margin-bottom: 20px;
}
.confirm-button {
  display: flex;
  justify-content: center;
  gap: 10px; 
}
.confirm-text {
  width: 100%;
  text-align: center;
}
.confirm-container {
  margin: 0 auto;
  margin-top: 60px;
  width: 100%;
  position: relative;
  background-color: rgba(241, 241, 241, 0.7);
  border-radius: 3px;
  font-size: 13px;
}
.confirm-item {
  width: 96%;
  min-height: 100px;
  margin: 10px 2% -7px 2%;
  border-bottom: dotted 2px #999999;
}
.last {
  border: none;
}
.confirm-container input {
  -webkit-appearance: none;
  appearance: none;
  height: 60px;
  margin-top: 40px;
  border-width: 1px;
  border-radius: 3px;
  background-color: rgba(241, 241, 241, 0.7);
  font-weight: bold;
  transition: all 0.3s;
  color: #88570e;
  border: 1px solid #80472d;
  padding: 0 2%;
  transform: translate(-49%, 142%);
}
.confirm-container input:hover {
  background-color: #d3cfcf;
  color: white;
}
.confirm-container button {
  height: 60px;
  margin-top: 40px;
  border-width: 1px;
  border-radius: 3px;
  color: #FFF;
  background-color: #ebdea7;
  font-weight: bold;
  transition: all 0.3s;
  border: 2px solid #c0b58b;
  padding: 0 2%;
  transform: translate(56%, 142%);
}
.confirm-container button:hover {
  color: #88570e;
  border: 1px solid #88570e;
}
.manual-slide1 {
  position: relative;
}
.manual-slide1 img {
  position: absolute;
  padding: 0;
  width: 420px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation : slideshow1 3s linear infinite;
}
@keyframes slideshow1 {
  0%   { opacity: 0; }
  28%  { opacity: 1; }
  50%  { opacity: 1; }
  75%  { opacity: 0; }
  100% { opacity: 0; }
}