@charset "UTF-8";

/*初期設定*/

*{
margin: 0;
padding: 0;
font-family: serif;
}

img{
max-width: 100%;
height: auto;
vertical-align: middle;/*画像の下のアキの処理*/
/*vertical-align: top;
vertical-align: bottom;*/
/*top,middle,bottom*/
/*初期値はbaseline*/
/*インライン要素やテーブルセル内の要素の縦方向の揃えを指定する
ブロックレベル要素などには効かない*/
}

iframe{
vertical-align: middle;
}

body{
min-width: 1180px;/*余裕を持たせて100px追加する*/
}

.container{
width: 1080px;/*デザイン上の幅*/
margin: 0 auto;
}

header{
background-color: rgba(255,255,255,0.5);
width: 100%;
position: fixed;/*固定する*/
z-index: 9999;/*重なり順を指定するプロパティ*/

box-shadow: 0px 2px 5px 2px rgba(0,0,0,.5);
}

header .container{/*logoとnavの制御*/
display: flex;/*横並びにする*/
justify-content: space-between;/*両端揃え*/
align-items: center;/*上下センターに揃える*/
}

h1{
width: 200px;
}

h1 img{
/*background-color: #7C79ED;*/
}

nav{
/*background-color: #95F782;*/

}
nav ul{
list-style-type: none;
display: flex;
}

nav a{
color: #000;/*文字を黒くする*/
text-decoration: none;/*下線を消す*/
display: block;/*ブロックレベル要素*/
padding: 20px;/*四方の空きを20px*/


}
nav a:hover{
 background-color: rgba(0,0,0,.3);
 color: #fff;
 /*text-decoration: underline;*/
 text-shadow: 1px 2px 3px #000;
 
}
.main-visual{
background-color: #8FFFF9;
background-image: url("../images/main-visual.jpg");
height: calc(100vh - 64px);/*ビューポートの下がぴったり次のものになる*/

height: 100vh;
/*viewport height*/

min-height: 540px;/*ブラウザを縮めた時の画像の最小値*/
background-size: cover;/*一枚の画像だけで隙間なく表示させる*/
background-position: center;/*画像をセンターに配置する*/
background-repeat: no-repeat;/*画像の繰り返しをなくす*/
display: flex;/*フレックスコンテナとして表示。横並びになる*/
flex-direction: column;/*縦並びにする*/
justify-content: center;/*左右のセンター*/
align-items: center; /*上下のセンター*/
}

.main-visual h2{
color: #FFF;
writing-mode: vertical-rl;
font-size: 54px;
margin-bottom: 16px;/*文字の周りに16pxのアキを作る*/
/*background-color: rgba(255,255,255,0.5);*/
/*font-family: serif;*/
text-shadow: 1px 2px 3px #000;
margin: 0 10% 0 auto;
}
.main-visual p{
margin-bottom: 16px;
background-color: rgba(255,255,255,0.5);
border-radius: 20px;

}

.btn{
background-color: #0D39F6;
/*background-color: rgba(255,255,255,0.5);*//*半透明のゴーストボタン用　バックグランドカラーをなしにして枠をつける*/
/*border: 1px solid #FFF;*//*ゴーストボタン用　バックグランドカラーをなしにして枠をつける*/
color: #FFF;
text-decoration: none;
display: inline-block;/*並びはインラインで中身はブロック要素*/
padding: 10px 40px;
border-radius: 20px;/*角丸にするボタンの高さの半分で丸になる*/
}

.btn:hover{
background-color: #FF7E80;
}

section h2{
font-size: 52px;
margin-bottom: 16px;
}

section p{
margin-bottom: 16px;
}

.sect1{
/*background-color: #83FE9A;*/
background-image: url("../images/back_banner.jpg");
padding: 80px 0px;
/*min-height: 540px;*//*ブラウザを縮めた時の画像の最小値*/
background-size: cover;/*一枚の画像だけで隙間なく表示させる*/
background-position: center;/*画像をセンターに配置する*/
background-repeat: no-repeat;/*画像の繰り返しをなくす*/
}

.sect1 ul{
list-style-type: none;
display: flex;
justify-content: space-between;

}

.sect1 li{
width: 320px;


}

.sect1 li:hover{

 animation: pikopiko 1s steps(2, start) infinite;

}

@keyframes pikopiko {
  0% {
    transform: rotate(10deg);
  }
  to {
    transform: rotate(-5deg);
  }
}

.sect2{
/*background-color: #F3FB94;*/
background-image: url("../images/back_youtube.jpg");
padding: 120px 0;
/*min-height: 540px;*//*ブラウザを縮めた時の画像の最小値*/
background-size: cover;/*一枚の画像だけで隙間なく表示させる*/
background-position: center;/*画像をセンターに配置する*/
background-repeat: no-repeat;/*画像の繰り返しをなくす*/
}

section p span{
font-family: sans-serif;
font-weight: bold;
}

.mediaCard{
/*background-color: #FF0004;*/
display: flex;
justify-content: space-between;
align-items: center;
}

.mediaCard__video{
/*background-color: #BBFBF0;*/
width: 640px;
}

.mediaCard__text{
/*background-color: #FEC96B;*/


font-size: 25px;
color:#FFF;
width: 400px;

}

.sect3{
/*background-color: #D99AFA;*/


background-image: url("../images/back_lunch.jpg");

padding: 120px 0px;
/*min-height: 140px;*//*ブラウザを縮めた時の画像の最小値*/
background-size: cover;/*一枚の画像だけで隙間なく表示させる*/
background-position: center;/*画像をセンターに配置する*/
background-repeat: repeat;/*画像の繰り返しをなくす*/

}
.sect3 span{
font-size: 12px;
}

/*
@keyframes fuwafuwa2 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(-30px);
  }
  100% {
    transform: translateX(0px);
  }
}
*/

.sect3 h2{
text-align: center;
margin-bottom: 80px;
}

.sect3 ul{
display: flex;
list-style-type: none;
justify-content: space-between;
}

.sect3 li{
/*background-color: #fff;*/
width: 300px;
padding: 0 10px;
text-align: center;
font-size: 15px;
}

.lunch1{
width: 240px;
height: auto;/*古いブラウザによっては横幅をしていても縦幅がかわらないことがあるので一応追加*/
border-radius: 100%;/*正方形を円にする場合、9999pxまたは100％と大きい数字にすするのもおすすめ*/
margin: 30px;
animation: fuwafuwa1 5s infinite;
}

@keyframes fuwafuwa1 {
  0% {
    transform: translateY(0px);
    }
  50% {
    transform: translateY(-30px);    
  }
  100% {
    transform: translateY(0px);
  }
  }

.lunch2{
width: 240px;
height: auto;/*古いブラウザによっては横幅をしていても縦幅がかわらないことがあるので一応追加*/
border-radius: 100%;/*正方形を円にする場合、9999pxまたは100％と大きい数字にすするのもおすすめ*/
margin: 30px;
animation: fuwafuwa2 3s infinite;
}

@keyframes fuwafuwa2 {
  0% {
    transform: translateY(0px);
    }
  50% {
    transform: translateY(-30px);    
  }
  100% {
    transform: translateY(0px);
  }
  }

.lunch3{
width: 240px;
height: auto;/*古いブラウザによっては横幅をしていても縦幅がかわらないことがあるので一応追加*/
border-radius: 100%;/*正方形を円にする場合、9999pxまたは100％と大きい数字にすするのもおすすめ*/
margin: 30px;
animation: fuwafuwa3 4s infinite;
}

@keyframes fuwafuwa3 {
  0% {
    transform: translateY(0px);
    }
  50% {
    transform: translateY(-30px);    
  }
  100% {
    transform: translateY(0px);
  }
  }
.sect3 h3{
margin: 10px;
}
.sect4{
/*background-color: #6F65AE;*/
background-image: url("../images/back_corse.jpg");
padding: 120px 0;
/*min-height: 540px;*//*ブラウザを縮めた時の画像の最小値*/
background-size: cover;/*一枚の画像だけで隙間なく表示させる*/
background-position: center;/*画像をセンターに配置する*/
background-repeat: no-repeat;/*画像の繰り返しをなくす*/

}

.sect4 h2{
text-align: center;
margin-bottom: 80px;
}

.gallery-slider .slick-slide{/*スライダーの横幅をしていして、マージンを30+30あける_.slick-slideでドットを横にする*/
width: 560px;
margin: 0 30px;
border-radius: 20px;/*角丸にしているが、入れ物よりハミ出ているので見える*/
overflow: hidden;/*はみ出た画像を隠す*/
}

/*.gallery-slider img{画像に直接、角丸にする
border-radius: 20px;
}*/

footer{
/*background-color: #F50004;*/
background-image: url("../images/back_footer.jpg");
padding: 60px 0;
/*min-height: 540px;*//*ブラウザを縮めた時の画像の最小値*/
background-size: cover;/*一枚の画像だけで隙間なく表示させる*/
background-position: center;/*画像をセンターに配置する*/
background-repeat: no-repeat;/*画像の繰り返しをなくす*/
}

.footer__logo{
height: 220px;
/*background-color: aquamarine;*/
display: flex;
justify-content: center;
align-items: center;
}

/*section set2 span{
font-family: sans-serif;}*/


footer img{
width: 170px;
/*opacity: 0.5;　画像を透かす*/
}

footer ul{
font-size: 25px;
display: flex;
list-style-type: none;
justify-content: center;
}

footer ul a{
text-decoration: none;
color: #000;
padding: 0 20px;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin-left: -1px;
}

footer ul a:hover{
text-decoration: underline;
}

footer p{
font-size: 20px;
text-align: center;
margin: 20px 0;
}