@charset "UTF-8";

*{
margin: 0;
padding: 0;
}

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

/*body設定*/
body{
/*サイト幅に対してバックが途切れないようにbodyを設定する*/
min-width: 1180px;
font-family: "筑紫B丸ゴシック";
}


/*コンテナー設定*/
.container{
/*幅*/
width: 1080px;
/*中央寄せ*/
margin: 0 auto;
}


/*ヘッダー*/
header{
position: fixed;       /* 固定 */
top: 0;                /* 画面上端に配置 */
left: 0;
width: 100%;           /* 横幅いっぱい */
background-color: #fff; /* 背景色（透けると下のコンテンツと重なるので必須） */
z-index: 1000;         /* 他の要素より前面に表示 */
height: 80px;
display: flex;
align-items: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* optional: 下に影を付ける */
}



/*ヘッダーの子要素コンテナーに対しての設定*/
header .container{
/*h1の中のロゴとナビゲーション横並び*/
display: flex;
/*両端揃え*/
justify-content: space-between;
align-items: center;
}

.logo__top{
margin-left: -100px;
}


/*バナーセクション*/
.bnr{
background-color:#fff;
padding: 80px 0;
}
/*バナー部分のリスト設定*/
/*親要素に対しての設定*/
.bnr ul{
/*バナー部分をフレックスボックス化*/
display: flex;
/*リストの黒丸を消す*/
list-style: none;

justify-content: space-between;
}
/*子要素に対しての設定*/
.bnr li{
width: 320px;	
}

/*YouTUbeセクション*/
.media{
background-color: #fff;
padding: 120px 0;
}

.media h2{
text-align: left;
display: inline-block;
border-bottom: 10px #FDF002 solid;
line-height: 1;               /* 文字と線の間隔を詰める */
padding-bottom: 0;
margin-bottom: 10px;
}

/*親*/
.mediaCard{
display: flex;
justify-content: space-between;
align-items:center;
}

/*子*/
.mediaCard__video{
width:640px;
}

/*子のiframe*/
.mediaCard__video iframe{
width:640px;
height:360px;
}

.mediaCard__text{
width:400px;
}

.btn a{
background-color: #f00;
/*文字色*/
color: #fff;
/*リンクの線*/
text-decoration: none;
/*余白*/
padding: 10px 40px;
/*aをインライン要素からブロック要素へ（これで余白がきちんと大きさが見える）*/
display: inline-block;
/*まるみを持たせる　数字を大きくすると両端がしっかりした丸になる。*/
border-radius: 9999px;
}

.btn a:hover{
background-color: #fff;
border:1px solid red;
color: red;
}

/*３つの丸セクション*/
.point{
background-color: #FFF8E0;
padding: 120px 0;
text-align: center;
}

.point h2{
margin-bottom: 80px;
display: inline-block;
border-bottom: 10px #FDF002 solid;
line-height: 1;               /* 文字と線の間隔を詰める */
padding-bottom: 0;
}

/*3つの丸セクションのポイントリスト*/
/*親*/
.pointList{
display: flex;
list-style: none;
justify-content: space-between;
}

/*子*/
.pointList li{
width: 300px;
}

/*画像を丸くする*/
.pointList__image{
width:240px;
border-radius: 50%;
/*中身がはみ出た場合*/
overflow: hidden;
/*真ん中にする(親に対して）*/
margin: 0 auto 30px;
}

/*文字部分*/
.pointList h3{
text-align: center;
margin-bottom: 16px;
}

.point p{
text-align: left;	
}

/*施設紹介セクション*/
.gallery{
background-color: #fff;
padding: 120px 0;
text-align: center;
}

.gallery h2{
background-color: #fff;
margin-bottom: 0;
display: inline-block;
border-bottom: 10px #FDF002 solid;
line-height: 1;               /* 文字と線の間隔を詰める */
padding-bottom: 0;
}

.gallery p{
text-align: center;
padding: 0;
height: 80px;
background-color: #fff;
}

.gallery b{
font-size: 18px;
}

/*スライダー*/
.gallery__slider .slick-slide{
width: 520px;
margin: 0 30px;
border-radius: 20px;
overflow: hidden;
}



/*インスタセクション*/
.insta{
background-color: #fff;
padding: 120px 0;
}

/*インスタ部分*/
.instaCard{
display: flex;
justify-content: space-between;
text-align: center;
}

.instaCard__star{
background-color: #fff;
}

.instaCard__staff{
padding-left: 30px;
padding-top: -20px;
background-color: #fff;
}

.instaCard ul{
list-style: none;
}

.instaCard__text{
background-color: #fff;
width: 400px;
}

.instaCard__text h2{
background-color: #fff;
margin-bottom: 50px;
display: inline-block;
border-bottom: 10px #FDF002 solid;
line-height: 1;               /* 文字と線の間隔を詰める */
padding-bottom: 0;
text-align: center;
}

.instaCard__text p{
text-align: left;	
}

.instaCard__icon{
text-align: left;
}

.instaCard__icon a{
	color: #000;
	text-decoration: none
}
.instaCard__icon a:hover{
	color: #80cce3;
	text-decoration: underline;
}

.instaCard__icon{
display: flex;
list-style: none;
justify-content: flex-start;
align-items: center;
}

/*アイコン部分の画像*/
.instaCard__icon img{
width: 50px;
padding-right: 10px;
}


/*インスタパンケーキ*/
.insta__pancake{
	width: 60%;
	height: auto;
	transform: rotate(15deg);    /* 15度回転 */
  	transform-origin: center;    /* 回転の中心（既定でcenter） */
	padding-top: 40px;
}

/*インスタコーヒー*/
.insta__coffee{
	width: 60%;
	height: auto;
	transform: rotate(-15deg);    /* 15度回転 */
  	transform-origin: center;    /* 回転の中心（既定でcenter） */
	padding-left: 50px;
}


/*フェイドイン*/
.fade-in-img {
  opacity: 0;                  /* 初期は透明 */
  transform: translateY(20px); /* 下に少しずらす */
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in-img.visible {
  opacity: 1;
  transform: translateY(0);
}


/*フェイドイン2秒後にでる*/
.fade-in-img-2 {
  opacity: 0;                  /* 初期は透明 */
  transform: translateY(20px); /* 下に少しずらす */
  transition: opacity 2s ease, transform 2s ease;
}

.fade-in-img-2.visible {
  opacity: 1;
  transform: translateY(0);
}

/*フェイドイン3秒後にでる*/
.fade-in-img-3 {
  opacity: 0;                  /* 初期は透明 */
  transform: translateY(20px); /* 下に少しずらす */
  transition: opacity 3s linear, transform 3s linear;
}

.fade-in-img-3.visible {
  opacity: 1;
  transform: translateY(0);
}


/*フェイドイン5秒後にでる*/
.fade-in-img-5 {
  opacity: 0;                  /* 初期は透明 */
  transform: translateY(20px); /* 下に少しずらす */
  transition: opacity 5s ease, transform 5s ease;
}

.fade-in-img-5.visible {
  opacity: 1;
  transform: translateY(0);
}



/*ロゴに対しての設定*/
h1{
/*幅*/
width: 200px;
background-color: #fff;
}

/*h1の画像への設定*/
h1 img{
background-color: #fff;
}


/*ナビゲーション*/
nav{
background-color: #fff;
}

/*ナビゲーションの中身の配置*/
nav ul{
/*横並び*/
display: flex;
list-style: none;
}

nav a{
/*文字色*/
color: #000;
/*下線なし*/
text-decoration: none;
/*余白*/
padding: 20px;
/*背景色*/
background-color: #fff;
/*見え方をインライン要素からブロック要素へ*/
display: block;
}

/*ナビゲーションホバー*/
/*
nav a:hover{
background-color: #FEEF02;
}
*/

/*メインビジュアルセクション*/
.main-visual{
background-color: #fff;
background-image: url("../images/main-visual2.png");
width: 100%;
height: 720px;
padding-top: 80px;
/*viewport height（ブラウザで見えてる部分）*/
/*width: 30vw;*/
/*calc関数は単位がバラバラでも計算可能
100vhから80px引いた大きさを計算*/
/*height: calc(100vh - 80px);*/
/*高さの最小値　540pxよりは小さくならない*/
min-height: 540px;
/*背景画像をおさまるように*/
/*background-size: cover;*/
/*背景画像の位置*/
background-position: bottom;
/*画像の繰り返し処理*/
background-repeat: no-repeat;
/*フレックスボックス指定　親がフレックスコンテナー　子がフレックスアイテムとなる*/
display: flex;
/*文字を縦並び*/
flex-direction: column;
/*文字を中央に*/
justify-content: center;
/*文字を中央に*/
align-items: flex-start;
	
position:relative;
}

.main-visual-txt,
.main-visual-txt2,
.main-visual-txt3
{
background-color: #fff;	
display: inline-block;
padding: 0 6px;
margin: 10px;
position: absolute;
}

/*障害があっても働ける場所を*/
.main-visual-txt{
top: 520px;
left: 1250px;	
}

/*就労継続支援B型事業所*/
.main-visual-txt2{
/*position: relative;*/
top: 90px;
left: 320px;	
}

/*ひとりひとりが輝ける*/
.main-visual-txt3{
/*position: relative;*/
top: 350px;
left: 850px;	
}

/*Youtubeセクション*/
.card{
/*横並びを有効化*/
display: flex;
/*両端揃え*/
justify-content: space-between;
}

/*Youtube画像*/
.card__img{
width: 640px;
}
/*Youtubeテキスト*/
.card__text{
width: 400px;
padding: 0 40px;
}

/*.card__text h2{
padding-bottom: 5px;
}*/

.card__text p{
padding-bottom: 20px;
}

/*ここから*/
/*ナビゲーション部分ホバー*/
.animated-underline {
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #333;
  cursor: default;
}

/* 擬似要素で下線を作る */
.animated-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;              /* 線の太さ */
  width: 0;                  /* 初期は0幅 */
  background-color: #fdf105; /* 線の色 */
  transition: width 0.5s ease;
}

/* ホバーで線がスーッと伸びる */
.animated-underline:hover::after {
  width: 100%;              /* 文字幅いっぱいに伸ばす */
}

/*ここから*/
/*ナビゲーション部分の星*/
.hover-star {
  position: relative;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.hover-star .star {
  position: absolute;
  left: -15%;
  top: 100%;
  transform: translate(-50%, -50%) scale(0);
  color: gold;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  pointer-events: none; /* 星はクリック対象にしない */
}

/* ホバーで浮かび上がる */
.hover-star:hover .star {
  transform: translate(-50%, -100%) scale(1.2); /* 上に浮かびながら少し大きく */
  opacity: 1;
}

/*ナビゲーション部分ホバー*/
/*ここまで*/

/*メイン*/
main{
background-color: #fff;	
margin-top: 80px;  /* ヘッダーの高さ分だけ余白を作る */
}



/*h2の設定*/
section h2{
font-size: 32px;
/*margin-bottom:80px;*/
text-align: center;
}

/*Pの設定*/
section p{
margin-bottom: 16px;
}

/*フッター*/
footer{
padding: 60px 0;
background-color: #FFF8E0;
}

.footer__logo{
display: flex;
justify-content: center;
align-items: center;
padding: 70px 0;
background-color: #fff8e0;
}

.footer__text{
margin: -70px 0 70px 0;
padding: 0 0;
background-color: #fff8e0;
}

.footer__end{
background-color: #fff8e0;
height: 80px;
}

footer ul{
display: flex;
list-style: none;
justify-content: center;
}

footer a{
color: #000;
text-decoration:none;
padding:0 20px;
border-left: 1px solid #000;
border-right:1px solid #000;
/*縦線の空きがなくなる*/
margin-left:-1px;
}

footer a:hover{
	color: #80cce3;
	text-decoration: underline;
}

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