@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Amiri|Cormorant+Garamond|Josefin+Sans|Long+Cang|Merriweather+Sans|Noto+Serif+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arizonia&family=Great+Vibes&family=Mountains+of+Christmas:wght@400;700&family=Mrs+Saint+Delafield&family=Niconne&family=Parisienne&family=Poiret+One&family=Slackey&display=swap');

/*font-family: 'Long Cang', cursive;
font-family: 'Noto Serif JP', serif;
font-family: 'Merriweather Sans', sans-serif;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Amiri', serif;
font-family: 'Cormorant Garamond', serif;
font-family: 'Great Vibes', cursive;
font-family: 'Arizonia', cursive;
font-family: 'Mountains of Christmas', cursive;
font-family: 'Mrs Saint Delafield', cursive;
font-family: 'Niconne', cursive;
font-family: 'Parisienne', cursive;
font-family: 'Poiret One', cursive;
font-family: 'Slackey', cursive;*/

/*-----------------------
  base
-----------------------*/

body {
    font-family: 'Cormorant Garamond','Amiri','Josefin Sans','Merriweather Sans', serif;
}

h {
   color:#fff; 
   text-align:center;
   font-family: 'Cormorant Garamond','Amiri','Josefin Sans','Merriweather Sans', serif;
}

h2 {
  color:#fff;
  font-size:50px;
  padding: 70px 0;
  text-align:center;
}

h3 {
  color:#fff;
  font-size:30px;
  padding: 20px 0;
  text-align:center;
}

ul {
  list-style:none;
}

img {
    text-align:center;
    max-width: 100%;
    max-height: 100%;
    width:auto;
    height:auto;
}

a {
    display: block;
    position:relative;
    text-decoration: none;
    color:#fff;
}

.clear {
	clear:both;
}

/*-----------------------
  loader fadein
-----------------------*/

#loader {
    position:fixed;
    background-size:cover;
    background-color: #fff;
    z-index:1;
    width:100vw;
    height:100vh;
}

.fadein {
    opacity:0;
    transform:translate(0, 0);
    transition:all 2s;
}

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
    transition-timing-function : ease-in;
    transition-duration: 2s;
    transition: 4s;
    padding-bottom: 50px;
}

/*-----------------------
  header
-----------------------*/

#global_navi {
    position:relative;
    width:100%;
    top:50%;
    z-index: 10000;
    background-color:#fff;
    opacity:0.7;
}

.fixed-top {
    opacity:0;
}

.navbar-brand img {
    margin-right: 15px;
}

.nav-link{
    font-size: 22px;
}

.nav-link:hover {
    opacity:0.6;
    background: linear-gradient(to bottom, #fff, #e0ffff);
}

/*-----------------------
  wrapper
-----------------------*/

.wrapper {
    background-color:#000000;
}

/*-----------------------
  intro
-----------------------*/

#Intro {
    font-size:12px;
    height:100vh;
    width:100vw;
}

#name {
    position:relative;
    padding-top:10%;
    text-align: center;
}

.message {
    text-align: center;
    background-color: #000;
    margin-top: 40%;
}

.message-contents {
    opacity:0;
    font-size:28px;
    font-style:italic;
    width:100%;
    line-height: 50%;
    padding:30px 0 30px 20px;
    color:#fff;
    text-align: left;
    letter-spacing: 0.4em;
    font-family: 'Slackey';
}

.message-contents span {
    opacity:0;
}

.text-move{
    transform: scale(1.25) translate(8px, 4px);
}

.message-contents.active .text-move{
    transform: scale(1) translate(0);
}

#vegas{
    padding-top: 20%;
    height:100vh;
}

/*-----------------------
  main
-----------------------*/


#About {
    background-image:url(../images/ukimido.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    padding-bottom: 500px;
}


#About-content {
    background-color:#1a1a1a;
    opacity:0.9;
    padding:100px 30px;
    border-radius:5px;
    width:90%;
    margin:0 auto;
}

#photo {
    position:relative;
    display:inline-block;
    text-align: center;
    max-width: 100%;
    height:auto;
}

#About-text {
    color:#000;
}

.language {
    color:white;
    text-align: center;
    margin-top: 15px;
}

.progress {
    border-radius:30px;
    height:30px;
}

#progressbar-1, #progressbar-2, #progressbar-3, #progressbar-4{
    background-color: #A9A9A9;
}

.ht {
    width:70%;
    color:#31485c;
}

.cs {
    width:60%;
    color:#31485c;
}

.ja {
    width:60%;
    color:#31485c;
}

.vu {
    width:50%;
    color:#31485c;
}

.text-center {
    text-align:center;
    color:white;
}

.myName {
    padding:0;
}

.history{
    height:14px;
    margin:36px 0;
    text-align: center;
}

.tw {
    color:#fff;
    margin:0 5px;
}

.in {
    color:#fff;
    margin:0 5px;
}

.fac {
    color:#fff;
    margin:0 5px;
}

.yo {
    color:#fff;
    margin:0 5px;
}

.bl {
    color:#fff;
    margin:0 5px;
}

.ma {
    color:#fff;
    margin:0 5px;
}

.icon {
    justify-content:space-between;
    margin:45% 5px 5px 5px;
}


/*-----------------------
  service
-----------------------*/

#Service {
    padding-top: 100px;
    padding-bottom: 500px;
    background-color:#fff;
    background-size:cover;
}

#Service h2,#Service h3,#Service p {
    color:#000;
    font-weight:bold;
} 

.circle-01,.circle-02 {
    display: inline-block;
    border-radius:50%;
    background-color:#000;
    height:200px;
    width:200px;
    vertical-align:middle;
    text-align: center;
}

.fa-pen-alt {
    margin-top: 30%;
    font-size:90px;
    color:#fff;
}

.fa-sitemap {
    margin-top: 30%;
    font-size:90px;
    color:#fff;
}

.fa-laptop-code {
    margin-top: 30%;
    font-size:90px;
    color:#fff;
}

#menu-01,#menu-02 {
    padding-top: 100px!important;
}

/*-----------------------
  contact
-----------------------*/

#Contact {
    background-color: #000000;
    padding-bottom: 500px;
}

.mail {
    text-decoration: none;
    color:#fff;
    font-size:20px;
    padding:50px 0;
}

.mail a:hover {
    color:#fff;
}

.fa-envelope {
    margin-right:20px;
}

#top {
    display: inline-block;
    margin-top: 300px;
}

#t-circle {
    position:relative;
    margin:0 auto;
    width:100px;
    height:100px;
    border-radius: 50%;
    background-color: #fff;
}

#t-circle a {
    color:#000;
    vertical-align:middle;
    font-size:70px;
}