@charset "UTF-8";

/* ¥¥¥ css code for responsive start ¥¥¥ */

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

	.header .navi {
    /*opacity: 0;
    transition: opacity 0.2s ease;*/
		display:none;
	}

  .about {
    padding: 3% 5% 5% 5%;
    background-color: rgba(30, 30, 30, 0.9);
    text-align: center;
  }

  .details {
    padding: 3% 5% 5% 5%;
    background-color: black;
    text-align: center;
  }

  .people {
    padding: 3% 5% 5% 5%;
    background-color: black;
    text-align: center;
  }

  .contact {
    padding: 3% 5% 5% 5%;
    background-color: black;
    text-align: center;
  }

  .inner .logobox {
    width: 100%;
    text-align: center;
  }

}

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

  .top .top-mediaBox {
    position: relative;
    width: 100%;
    margin-top: 25%;
  }

  .people-mediaBox {
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .people-mediaBox .people-box {
    display: inline-block;
    padding: 7% 10% 2.5% 10%;
    text-align: center;
  }

}

@media screen and (min-width: 740px) {

  .hamburger-menu {
		display:none;
  }
  .desc-svg-anim {
      display:none;
  }

}

/* ¥¥¥ css code for responsive end ¥¥¥ */

html{

  font-size: 62.5%;
  scroll-behavior: smooth; /* smooth scroll by css */

}

*, *::before, *::after{

  box-sizing: border-box;

}

body{

  /*background: rgb(22, 22, 22);*/
  background: black;
  color: #fff;
  font-size: 1.4rem;
  /*font-family:'Hind','Quicksand', 'Shippori Mincho B1', 'Zen Old Mincho', sans-serif, serif;*/
  font-family:'Hind','Karla', 'Zen Antique', sans-serif, serif;
  padding: 0 6.0%; /* body - sectionの間の余白調整 */

}

/* "header" setting start */

.header {

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background:rgba(255, 255, 255, 1.0);
  display: fixed;
  padding: 15px 50px;
  z-index: 97;
  box-sizing: border-box;
  border-bottom:#ffdc00 2.0px solid;

}

.header .inner{

  display: flex;
  height: 100%;
  width: 100%;
  margin: 0px;
  /*border: rgb(0, 38, 255) 1px solid;*/

}

.logobox {

  width: 100%;
  text-align: left;
  /*border: rgb(0, 38, 255) 1px solid;*/

}

.inner .main-logo{

  padding: 0px;
  width: 220px;
  height: auto;
   /*transform: translate(0%, 0%);*/

}

header .navi {

  display: flex;
  margin: 0 0 0 auto;
  padding: 0 0 0 0;
  font-size: clamp(1.2rem, 1.0vw, 1.4rem);
  list-style: none;
  letter-spacing: 2.5px;
  font-family: 'Hind';
  font-weight: 600;
  height: 30px;
  /*border: rgb(255, 0, 98) 1px solid;*/

}

.header .navi > li {

  margin: 15px 0 0 30px;

}

.header .navi li:first-child {

  margin-left: 0;
  
}

.header .navi li a {

  display: block;
  box-sizing: border-box;
  text-decoration: none;
  color: #000;
  opacity: 0.5;

}

.header .navi li a:hover {

  text-decoration: underline;
  color: #00008b;
  opacity: 1;
  transition: opacity 0.2s ease;

}

.submenu {

  padding-top: 10px;
  width: 90px;
  height: 50px;
  display: none;
  position: relative;
  text-align: center;
  background-color: rgba(30, 30, 30, 0.9);

}

.submenu > ul  {

  list-style: none;
  margin: 20;
  padding: 0;

}

.dropdown:hover .submenu {

  position: fixed;
  z-index: 9999;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.5);

}

/* "header" setting end */

/* code for hidding menu (humberger menu) start */

.menu-btn {

  position: fixed;
  top: 5px;
  right: 3px;
  z-index: 101;
  justify-content: center;
  align-items: center;
  height: 48;
  width: auto;
  background-color: rgba(255, 100, 100, 0.0);
  border: rgba(0, 0, 0, 0) 1px solid;
  cursor: pointer;
  opacity: 0.8;

}

.menu{

  position: fixed;
  display: flex;
  z-index: 100;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgb(255, 255, 255);
  left:0;

}

.menu .menu-item{

  width: 100%;
  height: auto;
  margin: auto;
  padding: .5em 1em;
  text-align: center;
  color: rgb(0, 0, 0);
  box-sizing: border-box;
  transform: translate(-14.0%, -0%);
  border: rgb(0, 0, 0) 1px solid;
  opacity: 0.8;

}

/* アニメーション前のメニューの状態 */

.menu{

  transform: translateY(0px);
  transition: all .2s linear;
  opacity: 0;
  visibility: hidden;

}

.menu li {

  list-style-type: none;
  width: 180px;
  margin-bottom: 5%;
  margin-top: 5%;
  transform: translate(3%, 0%);

}

.menu a {

  text-decoration: none;
  display: block;

}

.menu a:hover {

  color: #00008b;
  opacity: 1.0;
  border: #00008b 1px solid;
  text-decoration: underline;

}

/* アニメーション後のメニューの状態 */

.menu.is-active{

  transform: translateY(0px);
  opacity: 0.9;
  visibility: visible;

}

/* code for hidding menu (humberger menu) end */

/* managing all "section" area start */

section{

  scroll-margin-top: 50px;
  /*border: 0.2px solid rgb(255, 255, 255);*/

}

/* managing all "section" area end */

/* section "TOP" setting start */

.top{

  padding: 3% 8%; /* "top"section内の余白調整 */
  background-color: black;
  /*border: rgb(255, 255, 255) 1px solid;*/

}

.top-mediaBox {

  width: 100%;
  margin-top: 10%;
  /*padding-top: 56.25%;*/
  /*border: rgb(255, 255, 255) 1px solid;*/
  
}

.top .top-mediaBox .top-image {

  width: 100%;
  height: auto;

  user-select: none;
	-webkit-user-drag: none;
	-moz-user-select: none;
  -khtml-user-drag:none;
  -webkit-user-select: none;
  -ms-user-select: none;
  /*border: rgb(255, 255, 255) 1px solid;*/

}

.top .top-mediaBox .title-textbox{

  padding: 0% 0 5% 0;
  margin: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(13, 195, 223, 0.0);
  z-index: 300;
  /*border: rgb(255, 255, 255) 1px solid;*/

}

.top .top-mediaBox .site-title-sub h3{

  letter-spacing: 1.8px;
  margin: 0;
  padding: 0;
  font-size: clamp(1.0rem, 3.0vw, 5.0rem);
  font-weight: 200;
  font-family: 'Zen Antique';
  /*text-shadow: 2px 2px 3px #000;*/

}

.top .top-mediaBox .site-title h2{

  margin:0;
  padding: 0;
  letter-spacing: 2.0px;
  font-size: clamp(1.2rem, 4.0vw, 7.0rem);
  font-weight: 300;
  font-family: 'Zen Antique';
  font-style: bold;
  /*text-shadow: 2px 2px 3px #000;*/

}

/* section "TOP" setting end */

/* section "ABOUT" setting start */

.about{

  padding: 3% 8%; /* "about"section内の余白調整 */
  background-color: black;
  /*border: rgb(255, 255, 255) 1px solid;*/

}

.about .title{

  top: 0;
  display: inline-block;
  text-align: left;
  letter-spacing: 3px;
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);

}

.about .subtitle{

  display: inline-block;
  padding-left: 10px;
  letter-spacing: 3px;
  font-weight: 400;
  font-family: 'Zen Antique';
  font-size: clamp(0.8rem, 1.0vw, 1.0rem);

}

.about .about-mediaBox {

  position: relative;
  width: 100%;
  height: auto;
  padding-top: 56.25%;
	/*background: #514cde;*/
  border: rgb(255, 255, 255) 0.5px solid;
  margin: auto;

}

.about-mediaBox .next-btn {

  top: 0px;
  left: 0;
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 96;
  /*border: rgb(234, 10, 77) 1px solid;*/

}

.about-mediaBox .clickable-next {

  cursor: pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select: none;

}

.about-mediaBox .counter {

  text-align: center;
  min-width: 8%;
  position: absolute;
  color: white;
  z-index: 98;
  font-size: 1.3vw;
  border: 0.5px solid white;
  top: 3%;
  right: 1.5%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  font-family:'Hind';

}

.about-mediaBox .image{

  top: 0px;
  left: 0;
  position: absolute;
  width: 100%;
  height: auto;

}

.fade-enter-active, .fade-leave-active {

  transition: all 1.5s ease;

}

.fade-enter, .fade-leave-to {

  opacity: 0;

}

/* section "ABOUT" setting end */

/* section "DETAIL" setting start */

.details{

  padding: 3% 8%; /* "details" section内の余白調整 */
  background-color: black;
  /*border: rgb(255, 255, 255) 1px solid;*/

}

.details .title{

  display: inline-block;
  text-align: left;
  letter-spacing: 3px;
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);

}

.details .subtitle{

  display: inline-block;
  padding-left: 10px;
  letter-spacing: 3px;
  font-weight: 400;
  font-family: 'Zen Antique';
  font-size: clamp(0.8rem, 1.0vw, 1.0rem);

}

.details-mediaBox {

  padding-top: 10.5%;
  padding-bottom: 10.5%;
  position: relative;
  display: inline-block;
  margin: 0px auto;
  justify-content: center;
  align-items: center;
  border: rgb(255, 255, 255) 0.5px solid;
  width: 100%;

}

.details-mediaBox img {

  display: inline-block;
  background-size: cover;
  width: 100%;
  opacity: 0.9;
  margin-bottom: -7px;
  /*background-image: url("./images/details/byobu-all.jpg");*/
  /*border: 1px solid rgb(255, 255, 255);*/

}

.details-mediaBox .flag-btn {

  padding-top: 10.5%;
  padding-bottom: 10.5%;
  position: absolute;
  right: 0%;
  bottom: 0%;
  height: auto;

}

.details-mediaBox .clickable-flag {

  cursor: pointer;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select: none;

}

.desc-btn {

  text-align: center;
  min-width: 15%;
  margin-top: 4.0%;
  border: 0.5px solid rgb(255, 255, 255);
  left: 50%;
  background-color: black;
  font-size: clamp(1.0rem, 1.4vw, 1.6rem);
  
}

/* style for modal window start */

@keyframes modal-fade-in {

  from {
    opacity: 0;
  }
  to {
    opacity: 1.0;
  }
  
}

#modal-overlay {

  z-index: 99995;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;

  animation-name: modal-fade-in;
  animation-duration: 0.5s;

  transition: opacity 0.5s ease;

}

.modal-content {

  z-index: 99996;
  width: 75%;
  max-width: 650px;
  height: 70%;
  padding: 0;
  transform: translate(0%, -5%);
  background-color:rgb(50, 50, 50);

}

.modal-header {

  position: relative;
  z-index: 99999;
  width: 100%;
  height: 50px;
  display: flex;
  background-color:rgb(30, 30, 30);
  justify-content: flex-end;
  border-bottom: 1.0px solid rgba(255, 255, 255, 1.0);

}

.modal-header h3 {

  position: absolute;
  left: 10%;
	top: -15%;
  font-size: 1.3em;
  color: rgba(255, 255, 255, 1.0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.modal-body {

  position: relative;
  display: flex;
  margin-top: 0%;
  padding: 0% 10%;
  background-color:rgb(55, 55, 55);
  height: 100%;
  overflow-y: auto;
 /*overflow-y: scroll;*/

  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select: none;

}

.modal-body .description-box {

  margin: 0;
  padding: 0;
  /*border: 0.5px solid rgb(255, 255, 255);*/
}

.description-box p {

  text-justify: inter-ideograph;
  text-align: left;
  font-size: 1.0em;
  color:rgba(255, 255, 255, 1.0);
  line-height: 1.8em;
  /*border: 0.5px solid rgb(255, 255, 255);*/

}

.modal-body .content-title p {

  width: 100%;
  padding: 5px;
  font-size: 0.9em;
  text-align: center;
  border: 0.5px solid rgb(255, 255, 255);
  margin-top: 5px;
  margin-bottom: 15px;

}

.view-slider {

  width: 100%;
  max-width: 650px;
  /*height: calc(90vw / 2.5);*/
  max-height: -webkit-calc(100% / 1.5 - 1px * 2 - 1.2em * 2);
  max-height: -moz-calc(100% / 1.5 - 1px * 2 - 1.2em * 2);
  max-height: calc(100% / 1.5 - 1px * 2 - 1.2em * 2);
  min-height: 340px;

  --divider-width: 1px;
  --divider-color: #ffffff;
  --handle-opacity: 0.9;
  --handle-size: 20px;
  --handle-width: 10px;
  outline: none;
  z-index: 99997;
  /*border:1px solid rgb(255, 255, 255);*/

}

.iframe-wrap {
  
  width: 100%;
  max-width: 650px;
  height: -webkit-calc(100% / 1.5 - 1px * 2 - 1.2em * 2);
  height: -moz-calc(100% / 1.5 - 1px * 2 - 1.2em * 2);
  height: calc(100% / 1.5 - 1px * 2 - 1.2em * 2);
  min-height: 340px;
  overflow: hidden;

}

.iframe-wrap iframe {

  width: 100%;
  height: calc(100% + 150px + 150px);
  margin-top: -30%;
  pointer-events: none;
  /*-webkit-filter: grayscale(100%);*/
  /*filter: grayscale(100%);*/

}

.modal-bottom {

  padding: 1.0%;

}

.modal-leave-active {

  opacity: 0;
  
}

/* css for SVG Animation start */

.svg-anim {

  position: absolute;
  z-index: 99999;
  bottom: -5%;
  right: 0%;

  opacity: 0.8;
  transition: all .3s ease-in;
  width: 50px;
  height: auto;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

/* css for SVG Animation end */

.modal-leave-active {
  opacity: 0;
}

.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.modal-leave-active {
  opacity: 0;
}

.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.desc-box {
  text-align: center;
}

.desc-modal-content {

  z-index: 99996;
  width: 75%;
  max-width: 650px;
  height: 55%;
  padding: 0;
  transform: translate(0%, -5%);
  background-color:rgb(50, 50, 50);

}

.desc-modal-header {

  z-index: 99999;
  width: 100%;
  height: 50px;
  display: flex;
  background-color:rgba(0, 0, 0, 0.8);
  border-bottom: 1.0px solid rgba(255, 255, 255, 0.8);
  justify-content: flex-end;

}

.desc-modal-header h3 {

  position: absolute;
  left: 23px;
	top: -5px;
  font-size: 1.2em;
  color: rgba(255, 255, 255, 1.0);

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.desc-modal-body {

  position: relative;
  display: flex;
  margin: 0%;
  padding-top: 5%;
  padding-bottom: 10%;
  padding-right: 10%;
  padding-left: 10%;
  background-color:rgb(55, 55, 55);
  height: 100%;
  overflow-y: auto;
 /*overflow-y: scroll;*/

}

.desc-modal-body p {

  /*margin-top: 0 ;*/
  /*text-align: justify;*/
  text-align: left;
  text-justify: inter-ideograph;
  font-size: 1.0em;
  color:rgba(255, 255, 255, 1.0);
  line-height: 2.2;
  /*border: 0.5px solid rgba(255, 255, 255, 0.8);*/

}

.desc-svg-anim {

  position: absolute;
  z-index: 99999;
  bottom: -10%;
  right: 0%;

  opacity: 0.8;
  transition: all .3s ease-in;
  width: 50px;
  height: auto;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

/* close "×" button style start */

.square-btn {

  display: block;
  position: relative;
  margin: 9px 10px 10px auto;
  /*margin: 10px 27% 10px auto;*/
  width: 30px;
  height: 30px;
  border: 0.5px solid rgb(255, 255, 255); /* 枠の調整 */
  /*background: rgba(209, 209, 209, 0.7); /* ボタンの背景色 */
  background-color:rgba(0, 0, 0, 0.0);
  cursor: pointer;
  z-index: 99998;

}
 
.square-btn::before, .square-btn::after {

  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5px; /* 棒の幅（太さ） */
  height: 27px; /* 棒の高さ */
  background: rgb(255, 255, 255); /* バツ印の色 */
  border-radius: 2.0px;

}
 
.square-btn::before {

  transform: translate(-50%,-50%) rotate(45deg);

}
 
.square-btn::after {

  transform: translate(-50%,-50%) rotate(-45deg);

}

/* close "×" button style end */
/* style for modal window end */
/* section "DETAIL" setting end */

/* section "PEOPLE" setting start */

.people{

  padding: 3% 8%; /* "people" section内の余白調整 */
  background-color: black;
  /*border: rgb(255, 255, 255) 1px solid;*/

}

.people .title{

  display: inline-block;
  text-align: left;
  letter-spacing: 3px;
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);

}

.people .subtitle{

  display: inline-block;
  padding-left: 10px;
  letter-spacing: 3px;
  font-weight: 400;
  font-family: 'Zen Antique';
  font-size: clamp(0.8rem, 1.0vw, 1.0rem);

}

.people-mediaBox {

  padding-top: 12.0%;
  padding-bottom: 12.0%;
  display: flex;
  max-width:100%;
  margin: 0px auto;
  table-layout: fixed;
  justify-content: center;
  align-items: center;
  border-top: 0.5px solid rgb(255, 255, 255);
  border-bottom: 0.5px solid rgb(255, 255, 255);
  /*border: rgb(255, 255, 255) 0.5px solid;*/

}

.people-year {
  
  margin: 10px;
  font-size: calc(1.5rem + ((1vw - 0.48rem) * 0.5556));

}

.people-title {

  margin-top: 10px;
  margin-bottom: 20px;
  font-size: calc(0.8rem + ((1.2vw - 0.48rem) * 0.5556));

}

.people-box {

  display: inline-block;
  padding: 7% 0% 2.5% 0%;
  text-align: center;
  /*max-width: calc(33.33% - 13px);*/
  /*border: rgb(255, 255, 255) 0.5px solid;*/

}

.imagebutton {

  width: 60%;
	height: 60%;
	object-fit: cover;
	border-radius:50%;
  object-position:0px 0px;
  padding: 0;
  cursor: pointer;
  border: 1.8px solid rgb(119, 108, 108);

}

/* style for modal window start */

.people-modal-content {

  z-index: 99996;
  width: 70%;
  max-width: 450px;
  height: 50%;
  padding: 0;
  transform: translate(0%, -5%);
  background-color:rgb(50, 50, 50);

}

.people-modal-header {

  z-index: 99999;
  width: 100%;
  height: 50px;
  display: flex;
  background-color:rgb(30, 30, 30);
  justify-content: flex-end;
  border-bottom: 1.0px solid rgb(255, 255, 255);

}

.people-modal-header h3 {

  position: absolute;
	top: -1%;
  left: 12%;

  font-size: 1.2em;
  color: rgba(255, 255, 255, 1.0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.people-modal-body {

  position: relative;
  margin-top: 0%;
  background-color:rgb(55, 55, 55);
  height: 100%;
  overflow-y: auto;
 /*overflow-y: scroll;*/

  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select: none;

}

.people-image {

  display: block;
  width: 65%;
  height: auto;
  margin-top: 10%;
  margin-bottom: 10%;
  margin-left: auto;
  margin-right: auto;

}

.people-modal-body p {

  text-justify: inter-ideograph;
  text-align: left;
  font-size: 1.0em;
  color:rgba(255, 255, 255, 1.0);
  line-height: 1.8em;
  border-top: 0.5px solid rgb(255, 255, 255);
  padding: 5% 12%;
  margin-bottom: 5%;

}

.people-svg-anim {

  position: absolute;
  z-index: 99999;
  bottom: -8%;
  right: 0%;

  opacity: 0.8;
  transition: all .3s ease-in;
  width: 50px;
  height: auto;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

/* style for modal window end */

.ft-modal-content {

  z-index: 99996;
  width: 80%;
  max-width: 450px;
  height: auto;
  padding: 0;
  transform: translate(0%, 0%);
  background-color:rgb(50, 50, 50);

}

.ft-modal-header {

  z-index: 99999;
  width: 100%;
  height: 50px;
  display: flex;
  background-color:rgb(30, 30, 30);
  justify-content: flex-end;
  border-bottom: 1.0px solid rgb(255, 255, 255);

}

.ft-modal-header h3 {

  position: absolute;
	top: 0%;
  left: 5%;

  font-size: 1.0em;
  color: rgba(255, 255, 255, 1.0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}

.ft-modal-body {

  position: relative;
  margin-top: 0%;
  background-color:rgb(55, 55, 55);
  height: 100%;
  overflow-y: auto;
 /*overflow-y: scroll;*/

  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select: none;

}

.ft-modal-body .familytree-image{

  width: 100%;
  height: auto;
  display:block;
  margin:0 auto 0 auto;

}

.familytree-box {

  text-align: center;

}

.familytree-btn {

  text-align: center;
  min-width: 17%;
  margin-top: 4%;
  border: 0.5px solid rgb(255, 255, 255);
  left: 50%;
  background-color: black;
  font-size: clamp(1.0rem, 1.4vw, 1.6rem);

}

/* section "PEOPLE" setting end */

/* section "CONTACT" setting start */

.contact{

  padding: 3% 8%; /* "contact" section内の余白調整 */
  background-color: black;
  /*border: rgb(255, 255, 255) 1px solid;*/

}

.contact .title{

  display: inline-block;
  text-align: left;
  letter-spacing: 3px;
  font-size: 1.5rem;
  font-size: clamp(1.4rem, 1.6vw, 1.8rem);

}

.contact .subtitle{

  display: inline-block;
  padding-left: 10px;
  letter-spacing: 3px;
  font-weight: 400;
  font-family: 'Zen Antique';
  font-size: clamp(0.8rem, 1.0vw, 1.0rem);

}

.contact .contact-mediaBox {

  padding-top: 10.5%;
  padding-bottom: 10.5%;
  position: relative;
  display: inline-block;
  margin: 0px auto;
  align-items: center;
  text-align: center;
  border: rgb(255, 255, 255) 0.5px solid;
  width: 100%;

}

.contact .info-texts {
  padding: 10.0%;
  /* border: rgb(255, 255, 255) 0.5px solid; */
}

.contact .texts {

  letter-spacing: 1.3px;
  margin: 10px 0 0 0;
  padding: 0;
  font-size: clamp(1.0rem, 1.8vw, 3.0rem);
  font-weight: 200;
  font-family: 'Zen Antique';
  color: #ffffff;

}

/* section "CONTACT"  setting end */

/* "footer" setting start */

.footer {

  width: 100%;
  height: 20%;
  margin: 0;
  padding: 0;

}

.footer .copyright{

  padding: 5% 5%;
  color: #fff;
  text-align: center;
  font-size: clamp(0.8rem, 1.5vw, 1.8rem);

}

/* "footer" setting end */

/* "to top button" start */

.totop {

  position: fixed;
  right: 15px;
  bottom: 10px;
  width: 80px;
  height: 80px;
  opacity: 0.8;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0);
  border-color: rgba(255, 255, 255, 0);
  appearance: none;
  z-index: 999;

}

.v-enter-active,
.v-leave-active {

  transition: opacity 0.7s;

}

.v-enter,
.v-leave-to {

  opacity: 0;

}

.v-enter-to,
.v-leave {

  opacity: 0.8;

}

/* "to top button" end */