@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}
@font-face {
        font-family: Yohaku-mini;
        src: url(../fonts/Yohaku-font-demo/Yohaku-mini.otf);
    }


body {
    
    font-family: Yohaku-mini;
}

header {
    padding: 2% 3%;
    background-color: #b0b0b0;
}

h1 {
    font-size: 2.2vw;
    padding-top: 2%;
    padding-left: 3%;
}


/* ここからグローバルナビゲーション */
nav {
    width: 60%;
    margin-left: auto;
   
}
nav ul {
    display: flex;
    list-style-type: none;
}
nav ul li {
    width: calc(100%/3);
    border-left: 1px solid #6c54f3;
}

nav ul li a:hover {
    transition: 1s;
  color: #f0e1b8; 
}

nav ul li a {
    display: block;
    text-align: center;
    line-height: 1.6;
    text-decoration: none;
    font-size: 1.8vw;
    transition: 1s;
    color: #6c54f3;
}

.katamuki {
    transition: 0.5s;
}

.katamuki:hover {
    transform: rotate(45deg);
    /* rotate()はその場で回転。単位には°を表すdegを使う。マイナス値で
    逆回転もできる。 */
    transition: 0.5s;
}
/* ここまでグローバルナビゲーション */

/* ここから揺れるアニメーション */

.side-banner {
    width: 10%;
    height: 3vw;
    margin-left: 5%;
}


.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  width: 128px;
}

.keyframe3{
  animation-name: anim_s;
  transform: rotate(30deg);
  animation-duration: 5s;
}

@keyframes anim_s {
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}


.side-banner2 {
    width: 10%;
    height: 3vw;
    margin-left: 80%;
}


.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  width: 128px;
}

.keyframe3{
  animation-name: anim_s;
  transform: rotate(30deg);
  animation-duration: 5s;
}

@keyframes anim_s {
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}






/*  ここまで揺れるアニメーション*/



/* ここからファーストビュー */

.fistbew {
    width: 80%;
    height: 15vw;
    padding-top: 15%;
    padding-bottom: 8%;
    
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20%;
    background-color: #fff;
    border: solid 2px #6c54f3;
    
    
}

.fistbew-inner {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 5vw;
     color: transparent;
}

.fistbew p{
    margin-top: 5%;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #f0e1b8;
}

.fistbew-inner span {
    margin-left: 0.2em;
    margin-right: 0.2em;
}


.fistbew-inner span:nth-of-type(1) {
    animation: font1 3s forwards;
}
@keyframes font1 {
    20% {
        color: #000;
    }
    100% {
        color: #000;
    }
}
.fistbew-inner span:nth-of-type(2) {
    animation: font2 3s forwards;
}
@keyframes font1 {
    20% {
        color: #000;
    }
    100% {
        color: #000;
    }
}
.fistbew-inner span:nth-of-type(3) {
    animation: font3 3s forwards;
}
@keyframes font1 {
    20% {
        color: #000;
    }
    100% {
        color: #000;
    }
}

/* ここまでファーストビュー */


/* ここからABOUT*/
main {
    padding: 5%;
    background-image: url(../images/dots.png);
    background-size: contain;
}



.main-section h2 {
    width: 30%;
    /*margin-left: auto;
    margin-right: auto;  */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 5vw;
    background-color: #b0b0b0;
     color: transparent;
     /* spanタグ使って文字表示アニメーションつけた */
}

h2 span:nth-of-type(1) {
    animation: font1 3s forwards;
}
@keyframes font1 {
    20% {
        color: #6c54f3;
    }
    100% {
        color: #6c54f3;
    }
}

h2 span:nth-of-type(2) {
    animation: font2 3s forwards;
}

@keyframes font2 {
    50% {
        color: #6c54f3;
    }
    100% {
        color: #6c54f3;
    }
}

h2 span:nth-of-type(3) {
    animation: font3 3s forwards;
}

@keyframes font3 {
    80% {
        color: #000;
    }
    100% {
        color: #000;
    }
}

/* サブセクション一個目 */
.sub-section {
    display: flex;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 7%;
}

.section-leftbox {
    width: 55%;
    margin-top: 20%;
    margin-right: 10%;
}

.section-leftbox h3 {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding-top: 2%;
    text-align: center;
    font-size: 2vw;
    background-color: #fff;
}

.section-leftbox p {
    line-height: 1.6;
    font-size: 1.3vw;
    background-color: #fff;
}

.section-rightbox {
    width: 45%;
    margin-top: 20%;
}

.section-rightbox img {
    width: 100%;
    vertical-align: bottom;
    /* 挿入画像の下のスペースをなくした */
}

/* サブセクション二個目 */
.sub-second-section {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    
}

.sub-second-section h3 {
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3%;
    text-align: center;
    font-size: 2vw;
    background-color: #fff;
}

.sub-second-section p {
    line-height: 1.6;
    font-size: 1.3vw;
    margin-bottom: 30%;
    padding: 5%;
    background-color: #fff;
    border: solid 2px #6c54f3;
}

/* ここまでABOUT*/




/* ここからWORK */
.sub-third-section {
    padding-bottom: 10%;
    padding-right: 10%;
    padding-left: 10%;
}

.image-box1 {
    width: 35%;
    height: 15vw;
    margin-right: 10%;
    margin-bottom: 15%;
    background-image: url(../images/airdo.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    transition: 0.5s;
    border: solid 1px #6c54f3;
}

.image-box1 p {
    background-color: #f0e1b8;
    color: #6c54f3;
    font-weight: 700;
    text-align: center;
    
}

.image-box1:hover {
    background-size: 110% 110%;
    transition: 0.5s;
}
.image-flex1 {
    display: flex;
}

.image-box2 {
    width: 35%;
    height: 15vw;
    margin-right: 10%;
    margin-bottom: 15%;
    background-image: url(../images/hoken.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    transition: 0.5s;
    border: solid 1px #6c54f3;
}

.image-box2 p {
   background-color: #f0e1b8;
   color: #6c54f3;
    font-weight: 700;
    text-align: center;
}

.image-box2:hover {
    background-size: 110% 110%;
    transition: 0.5s;
}


.image-box3 {
    width: 35%;
    height: 15vw;
    margin-right: auto;
    margin-bottom: 15%;
    background-image: url(../images/sekisui.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    transition: 0.5s;
    border: solid 1px #6c54f3;
}
.image-box3 p {
    background-color: #f0e1b8;
    color: #6c54f3;
    font-weight: 700;
    text-align: center;
}

.image-box3:hover {
    background-size: 110% 110%;
    transition: 0.5s;
}

.image-flex2 {
    display: flex;
}

.image-box4 {
    width: 35%;
    height: 15vw;
    margin-right: 10%;
    margin-bottom: 15%;
    background-image: url(../images/aji.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    transition: 0.5s;
    border: solid 1px #6c54f3;
}

.image-box4 p {
    background-color: #f0e1b8;
    color: #6c54f3;
    font-weight: 700;
    text-align: center;
}

.image-box4:hover {
    background-size: 110% 110%;
    transition: 0.5s;
}


.image-box5 {
    width: 35%;
    height: 15vw;
    margin-right: 10%;
    margin-bottom: 15%;
    background-image: url(../images/wines256.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    transition: 0.5s;
    border: solid 1px #6c54f3;
}
.image-box5 p {
    background-color: #f0e1b8;
    color: #6c54f3;
    font-weight: 700;
    text-align: center;
}

.image-box5:hover {
    background-size: 110% 110%;
    transition: 0.5s;
}
.image-flex3 {
    display: flex;
}

.image-box6 {
    width: 35%;
    height: 15vw;
    margin-right: auto;
    margin-bottom: 15%;
    background-image: url(../images/meisi256.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    transition: 0.5s;
    border: solid 1px #6c54f3;
}
.image-box6 p {
    background-color: #f0e1b8;
    color: #6c54f3;
    font-weight: 700;
    text-align: center;
}

.image-box6:hover {
    background-size: 110% 110%;
    transition: 0.5s;
}




/* 003 */
.button003 a {
    background: #313131;
    /* ホバー前の背景の色#eee */
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 260px;
    padding: 10px 25px;
    color: #FFF;
    /* ホバー前の文字の色 */
    transition: 0.3s ease-in-out;
    font-weight: 500;
    text-decoration: none;
}
.button003 a:hover {
    background:  #6c54f3;
    /* ホバーした背景の色 */
    color: #FFF;
    /* ホバーした文字の色 */
}
.button003 a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button003 a:hover:after {
    border-color: #FFF;
    /* >の色 */
}

/* ここまでWORK*/







/* ここからフッター */

footer {
    padding-bottom: 2%;
}

footer {
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 5%;
    padding-bottom: 3%;
    background-color: #b0b0b0;
}

footer p {
    text-align: center;
    color: #6c54f3;
    font-size: 1.5vw;
}

footer p span {
    margin-left: 0.3em;
    margin-right: 0.3em;
}

#page_top{
  width: 50px;
  height: 50px;
  /* position: fixed; */
  right: 0;
  bottom: 0;
  background: #6c54f3;
  border-radius: 50%;
  opacity: 0.6;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1%;
}

#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}

#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/* ここまでフッター */


/* 要素をふわっと出す */
.pearent {
    margin-top: 100px;
    padding: 100px;
    background-color: azure;
}
.box1 {
    width: 300px;
    
    margin: 1000px auto 0;
    background: rgb(0, 125, 185);
    opacity: 0;
    transition: 1s;
    transform: translateY(50px);
}
.box2 {
    width: 300px;
    
    margin: 1000px auto 0;
    background: red;
    opacity: 0;
    transition: 1s;
    transform: translateY(50px);
}

.isAnimate {
    opacity: 1;
    transform: translateY(0px);
}
/* opacityとtransform: translateYで透明から可視化、下からの移動を指定しているので
ここを好きなcssで制御してもよい */
/* ここまで要素をふわっと出す */

h4 {
    width: 30%;
    margin-top: 10%;
    margin-bottom: 10%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 5vw;
    background-color: #b0b0b0;
    color: #6c54f3;
    /* #a397eb */
   
}



/* ここからWORK.htmlのページ */

.section-work img:hover {
    filter: drop-shadow(0px 0px 10px #6c54f3);
    /* drop-shadowは影を付ける。
    影の左からの距離,影の上からの距離,ぼかし,色の順に記入 */
    transition: 0.5s;
}



/* ここからimg */
.flex-work1-left {
    width: 60%;
    margin-right: 20%;
    margin-bottom: 15%;
}
.flex-work-left img {
    width: 100%;
     border: solid 1px #6c54f3;
}

.flex-work1-right {
    width: 60%;
    margin-right: 20%;
    margin-bottom: 15%;
}
.flex-work-right img {
    width: 100%;
     border: solid 1px #6c54f3;
}
/*  ここまでimg*/







.flex-work1 {
    display: flex;
    height: 20vw;
    margin-left: auto;
    margin-right: auto; 
    margin-bottom: 5%; 
    
}

.flex-work1 p {
    width: 30%;
    height: 15%;
    margin-right: 5%;
    margin-left: 5%;
    font-size: 1vw;
    white-space: pre-wrap;
    padding: 1%;
    text-align: center;
    border: solid 1px #6c54f3;
    background-color: #f0e1b8;
    margin-bottom: 5%;  
    color: #6c54f3;
    
    
}


.flex-work2 {
    display: flex;
    height: 20vw;
    margin-left: auto;
    margin-right: auto; 
     margin-bottom: 5%; 
    
}

.flex-work2 p {
    width: 30%;
    height: 15%;
    margin-right: 5%;
    margin-left: 5%;
    font-size: 1vw;
    white-space: pre-wrap;
    padding: 1%;
    text-align: center;
    border: solid 1px #6c54f3;
    background-color:#f0e1b8;
    margin-bottom: 5%;
    color: #6c54f3;
}



.flex-work3 {
    display: flex;
    height: 20vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20%; 
    
}

.flex-work3 p {
    width: 30%;
    height: 15%;
    margin-right: 5%;
    margin-left: 5%;
    font-size: 1vw;
    white-space: pre-wrap;
    padding: 1%;
    text-align: center;
    border: solid 1px #6c54f3;
    background-color: #f0e1b8;
    margin-bottom: 20%;
    color: #6c54f3; 
}


.flex-work4 {
    display: flex;
    height: 20vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;  
    
}

.flex-work4 p {
    width: 30%;
    height: 15%;
    margin-right: 5%;
    margin-left: 5%;
    font-size: 1vw;
    white-space: pre-wrap;
    padding: 1%;
    text-align: center;
    border: solid 1px #6c54f3;
    background-color: #f0e1b8;
    margin-bottom: 10%;
    color: #6c54f3;  
}



.flex-work5 {
    display: flex;
    height: 20vw;
    margin-left: auto;
    margin-right: auto;
     margin-bottom: 10%;  
    
}

.flex-work5 p {
    width: 30%;
    height: 15%;
    margin-right: 5%;
    margin-left: 5%;
    font-size: 1vw;
    white-space: pre-wrap;
    padding: 1%;
    text-align: center;
    border: solid 1px #6c54f3;
    background-color: #f0e1b8;
    margin-bottom: 10%;
    color: #6c54f3;
}


.flex-work6 {
    display: flex;
    height: 20vw;
    margin-left: auto;
    margin-right: auto;
     margin-bottom: 10%;  
    
}

.flex-work6 p {
   width: 30%;
    height: 15%;
    margin-right: 5%;
    margin-left: 5%;
    font-size: 1vw;
    white-space: pre-wrap;
    padding: 1%;
    text-align: center;
    border: solid 1px #6c54f3;
    background-color: #f0e1b8;
    margin-bottom: 10%; 
    color: #6c54f3;
}



.flex-work7 {
    display: flex;
    height: 20vw;
    margin-left: auto;
    margin-right: auto;
     margin-bottom: 10%;   
    
}

.flex-work7 p {
    width: 30%;
    height: 15%;
    margin-right: 5%;
    margin-left: 5%;
    font-size: 1vw;
    white-space: pre-wrap;
    padding: 1%;
    text-align: center;
    border: solid 1px #6c54f3;
    background-color: #f0e1b8;
    margin-bottom: 10%;
    color: #6c54f3;  
}


.flex-work8 {
    display: flex;
    height: 20vw;
    margin-left: auto;
    margin-right: auto;
     margin-bottom: 10%;   
    
}

.flex-work8 p {
    width: 30%;
    height: 15%;
    margin-right: 5%;
    margin-left: 5%;
    font-size: 1vw;
    white-space: pre-wrap;
    padding: 1%;
    text-align: center;
    border: solid 1px #6c54f3;
    background-color: #f0e1b8;
    margin-bottom: 10%;
    color: #6c54f3; 
}




/* ここまでWORK.htmlのページ */


/*ここから➊WORK.html*/

h5 {
    width: 60%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8%;
    font-size: 2.1vw;
    text-align: center;
    background-color: #f0e1b8;
    color: #6c54f3;
    border: #6c54f3 solid 1px;
}

.works-img {
    width: 80%;
    margin-left: 10%;
    border: #000 solid 1px;

}
.works-img img {
    width: 100%;
}


.flex-works {
    display: flex;
    /* background-color: forestgreen; */
    
}

.works-table {
  width: 70%;
  margin-top: 10%;
  margin-left: 5%;
}

table {
    padding: 5%;
    border: 1px solid #000;
    background-color: #fff;
}

table th{
  position: relative;
  text-align:center;
  width: 50%;
  
}

table th:after{
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background-color: #333;
  position: absolute;
  top:calc(50% - 1px);
  right:-20px;
}

table td{
  text-align: left;
  padding:7px 0 7px 30px;
  width: 85%;
  
}



.works h6 {
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    margin-bottom: 3%;
    text-align: center;
    font-size: 2vw;
    background-color: #fff;
}

.works p {
    width: 70%;
    line-height: 1.6;
    font-size: 1.3vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20%;
    padding: 5%;
    background-color: #fff;
    border: solid 2px #6c54f3;
    white-space: pre-wrap;
}


/*スライドショー*/
.slide-box {
    position: relative;
    height: 20vw;
    margin-top: 10%;
    margin-bottom: 10%;
    overflow: hidden;
}

.slide-box:hover .image-frame {
	animation-play-state: paused;
}

.image-frame {
    position: absolute;
	top: 0;
    display: flex;
    width: 252vw;
	height: 20vw;
    animation: move 10s linear infinite;
    transform: translateX(0vw);
}

@keyframes move {
    100% {
        transform: translateX(-126vw);
    }
}

.image-frame div {
	margin-right: 1vw;
}

.image-frame div img {
	width: 100%;
	border-radius: 1vw;
}



/*ここまで➊WORK.html*/