/*=================================
見出し
================================*/
/*---------------------------------
見出し2
--------------------------------*/
.home_h2,
.home_h2_s{
    font-family: "kinuta-shin-stdn", sans-serif; /* フォントを指定 */
    font-weight: 400; /* フォントの太さを指定 */
    font-style: normal;  /* フォントのスタイルを標準に指定 */
    border-bottom: 1px solid #5FD068; /* 見出しの下に下線を表示、下線の太さを1pxに指定、下線を実線に指定、下線の色を指定 */
    margin: 100px 0 !important; /* 見出しの上下に100pxのスペースを指定 */
    padding-left: 5%; /* 見出しの文字の左側に5%のスペースを指定 */
}

/*------------- pc -------------*/
@media screen and (min-width:1000px) { /* 画面幅が1000px以上の端末では */
    .home_h2,
    .home_h2_s{
        font-size: 8rem; /* フォントのサイズを標準テキストの8倍に指定 */
    }
}

/*------------- sp -------------*/
@media screen and (max-width:999px){ /* 画面幅が1000px以上の端末では */
    .home_h2{
        font-size: 4rem; /* フォントのサイズを標準テキストの8倍に指定 */
    }

    .home_h2_s{
        font-size: 3rem; /* フォントのサイズを標準テキストの3倍に指定 */
    }
}

/*---------------------------------
見出し3
--------------------------------*/
h3{
    font-family: ta-koigokoro, sans-serif; /* フォントを指定 */
    font-style: normal; /* フォントのスタイルを標準に指定 */
    font-weight: 400; /* フォントの太さを指定 */
    font-size: 2.5rem; /* フォントのサイズを標準テキストの2.5倍に指定 */
    margin-bottom: 50px; /* 下に50pxの幅を確保 */
}

/*---------------------------------
見出し4
--------------------------------*/
h4{
    font-family: ta-koigokoro, sans-serif; /* フォントを指定 */
    font-size: 2rem; /* フォントのサイズを標準テキストの2倍に指定 */
    position: absolute; /* 文字を表示させる地点を指定 */
    top: -30px; /* 上から-30pxの地点に表示 */
    left: -10px; /* 左から-10pxの地点に表示 */
    transform : rotate(-10deg); /* 文字を反時計回りに10度傾ける */
}

/*=================================
アンダーラインテキスト
================================*/
/*---------------------------------
アンダーライン（緑）
--------------------------------*/
.underline_g{
    background:linear-gradient(transparent 70%, #5FD068 70%); /* 緑の下線を引く */
}

/*---------------------------------
アンダーライン（黄）
--------------------------------*/
.underline_y{
    background:linear-gradient(transparent 70%, #F5DF99 70%); /* 黄色の下線を引く */
}

/*=================================
吹き出し
================================*/
/*---------------------------------
吹き出し（緑）
--------------------------------*/
.bubble_g{
    padding: 50px; /* 吹き出し線と文字の間に50pxのスペースを確保 */
    background: #fff; /* 背景色を白に指定指定 */
    border: 2px solid #5FD068; /*吹き出しの枠線を表示、下線の太さを1pxに指定、下線を実線に指定、下線の色を指定 */
    border-radius: 50%; /* 枠線を円形に指定 */
    text-align: left; /* 文字を左寄せ */
}

/*---------------------------------
吹き出し（黄）
--------------------------------*/
.bubble_y{
    padding: 50px; /* 吹き出し線と文字の間に50pxのスペースを確保 */
    background: #fff; /* 背景色を白に指定指定 */
    border: 2px solid #F5DF99; /*吹き出しの枠線を表示、下線の太さを1pxに指定、下線を実線に指定、下線の色を指定 */
    border-radius: 50%; /* 枠線を円形に指定 */
    text-align: left; /* 文字を左寄せ */
}

/*=================================
要素を中央寄せ
================================*/
.center{
    text-align: center; /* 要素を中央寄せ */
}

/*=================================
表
================================*/
table{
    background-color: #fff; /*背景色を白に指定  */
}

th{
    text-align: left; /* テキストを左寄せに指定 */
}

/*================================
リスト（スライドショー含む）
================================*/
ul{
	margin:0; /* リスト周囲の余白をなくす */
	padding: 0; /* リスト内の余白をなくす */
	list-style: none; /* リスト（中黒）を非表示 */
}

/*================================
メインビジュアル
================================*/
.mv{
    position: relative; /* 画像に文字を重ねるための基準値を指定 */
    margin-right: calc(50% - 50vw); /* 全幅表示 */
	margin-left: calc(50% - 50vw); /* 全幅表示 */
}

.mv img{
	width: 100%; /* 幅を100%に指定 */
	height: auto; /* 写真の縦横比率を維持 */
    filter: brightness(50%); /* 画像の明るさを50%に指定 */
}

/*================================
ファーストビュー
================================*/
.fv{
    position: relative; /* コンテンツを配置するための基準値を指定 */
    margin-right: calc(50% - 50vw); /* 全幅表示 */
	margin-left: calc(50% - 50vw); /* 全幅表示 */
    height: 800px; /* 高さを800pxに指定 */
}

.radius{
    border-radius: 50%; /* 角丸表示 */
}

.fv_center{
    text-align: center; /* 要素を中央寄せ */
    position: relative; /* 要素を配置するための基準値を指定 */
    left: 50%; /* 中央に表示 */
    transform: translate(-50%, -50%); /* ズレ修正 */
}

/*---------------------------------
各画像、テキスト表示場所と大きさを指定
--------------------------------*/
/*------------- pc -------------*/
@media screen and (min-width:1450px) { /* 画面幅が1450px以上の端末では */
    .fv01{
        width: 200px; /* 幅を200pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 60px; /* 上から60pxの場所に表示 */
        left: 3%; /* 左から3%の場所に表示 */
    }

    .fv02{
        width: 350px; /* 幅を350pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 55px; /* 上から55pxの場所に表示 */
        right: 3%; /* 右から3%の場所に表示 */
    }

    .fv03{
        width: 140px; /* 幅を140pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        left: 20%; /* 左から20%の場所に表示 */
        bottom: 0%; /* 下から0%の場所に表示 */
    }

    .fv04{
        position: absolute; /* 画像を配置する場所を指定 */
        right: 17%; /* 右から17%の場所に表示 */
        bottom: 0%; /* 下から0%の場所に表示 */
    }

    .fv05{
        width: 270px; /* 幅を270pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        left: 7%; /* 左から7%の場所に表示 */
        bottom: 25%; /* 下から25%の場所に表示 */
    }

    .fv06{
        width: 200px; /* 幅を200pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        bottom: 20%; /* 下から20%の場所に表示 */
        left: 27%; /* 左から27%の場所に表示 */
    }

    .fv07{
        width: 120px; /* 幅を120pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 20%; /* 上から20%の場所に表示 */
        left: 25%; /* 左から25%の場所に表示 */
    }

    .fv08{
        width: 230px; /* 幅を230pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 80px; /* 上から80pxの場所に表示 */
        right: 35%; /* 右から35%の場所に表示 */
    }

    .fv_title{
        position: relative; /* 本来テキストが表示される場所から表示位置をずらす */
        top: 430px; /* 上から430pxの場所に表示 */
        width: 250px; /* 幅を250pxに指定 */
    }
    
    .fv_subtitle{
        position: relative; /* 本来テキストが表示される場所から表示位置をずらす */
        top: 470px; /* 上から470pxの場所に表示 */
    }
}

/*------------- tab-w ------------*/
@media screen and (min-width:1050px) and ( max-width:1449px) { /* 画面幅が1050～1449px以上の端末では */
    .fv01{
        width: 200px; /* 幅を200pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 60px; /* 上から60pxの場所に表示 */
        left: 3%; /* 左から3%の場所に表示 */
    }

    .fv02{
        width: 300px; /* 幅を300pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 55px; /* 上から55pxの場所に表示 */
        right: 1%; /* 右から1%の場所に表示 */
    }

    .fv03{
        width: 140px; /* 幅を140pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        left: 20%; /* 左から20%の場所に表示 */
        bottom: 0%; /* 下から0%の場所に表示 */
    }

    .fv04{
        width: 370px; /* 幅を370pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        right: 8%; /* 右から8%の場所に表示 */
        bottom: 0%; /* 下から0%の場所に表示 */
    }

    .fv05{
        width: 250px; /* 幅を250pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        left: 5%; /* 左から5%の場所に表示 */
        bottom: 25%; /* 下から25%の場所に表示 */
    }

    .fv06{
        width: 160px; /* 幅を160pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        bottom: 20%; /* 下から20%の場所に表示 */
        left: 24%; /* 左から24%の場所に表示 */
    }

    .fv07{
        width: 120px; /* 幅を120pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 20%; /* 上から20%の場所に表示 */
        left: 25%; /* 左から25%の場所に表示 */
    }

    .fv08{
        width: 200px; /* 幅を200pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 80px; /* 上から80pxの場所に表示 */
        right: 35%; /* 右から35%の場所に表示 */
    }

    .fv_title{
        position: relative; /* 本来テキストが表示される場所から表示位置をずらす */
        top: 430px; /* 上から430pxの場所に表示 */
        width: 250px; /* 幅を250pxに指定 */
    }
    
    .fv_subtitle{
        position: relative; /* 本来テキストが表示される場所から表示位置をずらす */
        top: 470px; /* 上から470pxの場所に表示 */
    }
}

/*------------- tab-h ------------*/
@media screen and (min-width:600px) and ( max-width:1049px) {/* 画面幅が600～1049px以上の端末では */
    .fv01{
        width: 100px; /* 幅を100pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 50px; /* 上から50pxの場所に表示 */
        left: 12%; /* 左から12%の場所に表示 */
    }

    .fv02{
        width: 200px; /* 幅を200pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        bottom: 3%; /* 下から3%の場所に表示 */
        right: 2%; /* 右から2%の場所に表示 */
    }

    .fv03{
        width: 120px; /* 幅を120pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        bottom: 35%; /* 下から35%の場所に表示 */
        right: 5%; /* 右から5%の場所に表示 */
    }

    .fv04{
        width: 290px; /* 幅を290pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        bottom: 0%; /* 下から0%の場所に表示 */
        left: 13%; /* 左から13%の場所に表示 */
    }

    .fv05{
        width: 230px; /* 幅を230pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 5%; /* 左から5%の場所に表示 */
        right: 3%; /* 右から3%の場所に表示 */
    }

    .fv06{
        width: 200px; /* 幅を2080pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 18%; /* 上から18%の場所に表示 */
        left: 18%; /* 左から18%の場所に表示 */
    }

    .fv07{
        width: 130px; /* 幅を130pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 25%; /* 上から25%の場所に表示 */
        right: 25%; /* 右から25%の場所に表示 */
    }

    .fv08{
        width: 150px; /* 幅を150pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 50%; /* 上から25%の場所に表示 */
        left: 5%; /* 左から5%の場所に表示 */
    }

    .fv_title{
        position: relative; /* 本来テキストが表示される場所から表示位置をずらす */
        top: 420px; /* 上から420pxの場所に表示 */
        width: 180px; /* 幅を180pxに指定 */
    }
    
    .fv_subtitle{
        font-size: 0.8rem; /* テキストのサイズを通常の0.8倍に指定 */
        position: relative; /* 本来テキストが表示される場所から表示位置をずらす */
        top: 440px; /* 上から440pxの場所に表示 */
    }
}

/*------------- sp -------------*/
@media screen and (max-width:599px){/* 画面幅が599px以上の端末では */
    .fv01{
        width: 100px; /* 幅を100pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 50px; /* 上から50pxの場所に表示 */
        left: 2%; /* 左から2%の場所に表示 */
    }

    .fv02{
        width: 140px; /* 幅を140pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        bottom: 6%; /* 下から6%の場所に表示 */
        right: 2%; /* 右から2%の場所に表示 */
    }

    .fv03{
        width: 100px; /* 幅を100pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        bottom: 28%; /* 下から28%の場所に表示 */
        right: 5%; /* 右から5%の場所に表示 */
    }

    .fv04{
        width: 230px; /* 幅を230pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        bottom: 0%; /* 下から0%の場所に表示 */
        left: 5%; /* 左から5%の場所に表示 */
    }

    .fv05{
        width: 130px; /* 幅を130pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 5%; /* 左から5%の場所に表示 */
        right: 3%; /* 右から3%の場所に表示 */
    }

    .fv06{
        width: 180px; /* 幅を180pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 18%; /* 上から18%の場所に表示 */
        left: 13%; /* 左から13%の場所に表示 */
    }

    .fv07{
        width: 100px; /* 幅を100pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 25%; /* 上から25%の場所に表示 */
        right: 13%; /* 右から13%の場所に表示 */
    }

    .fv08{
        width: 80px; /* 幅を80pxに指定 */
        position: absolute; /* 画像を配置する場所を指定 */
        top: 50%; /* 上から25%の場所に表示 */
        left: 5%; /* 左から5%の場所に表示 */
    }

    .fv_title{
        position: relative; /* 本来テキストが表示される場所から表示位置をずらす */
        top: 420px; /* 上から420pxの場所に表示 */
        width: 180px; /* 幅を180pxに指定 */
    }
    
    .fv_subtitle{
        font-size: 0.8rem; /* テキストのサイズを通常の0.8倍に指定 */
        position: relative; /* 本来テキストが表示される場所から表示位置をずらす */
        top: 440px; /* 上から440pxの場所に表示 */
    }
}

/*================================
About
================================*/
/*---------------------------------
About キャッチコピー
--------------------------------*/
.about_copy{
    margin-bottom: 10%; /* 下に15%の幅を確保 */
}

/*------------- sp -------------*/
@media screen and (max-width:599px){/* 画面幅が599px以上の端末では */
    .about_copy_sp{
        font-size: 2rem; /* フォントのサイズを標準テキストの2倍に指定 */
    }
}

/*---------------------------------
吹き出し1（About）
--------------------------------*/
/*------------- pc -------------*/
@media screen and (min-width:1200px) { /* 画面幅が1200px以上の端末では */
    .bblimg1_pc{
        width: 250px; /* 幅を250pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        right: -20%; /* 本来配置される場所からさらに右-20%の地点に配置 */
    }

    .bubble1_pc{
        width: 400px; /* 幅を400pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        left: 30%; /* 本来配置される場所からさらに左30%の地点に配置 */
        top: -280px; /* 本来配置される場所から上-280pxの地点に配置 */
    }
}

/*------------- tab ------------*/
@media screen and (min-width:600px) and ( max-width:1199px) {/* 画面幅が600～1199px以上の端末では */
    .bblimg1_tab{
        width: 250px; /* 幅を250pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        right: 0%; /* 本来配置される場所からさらに右0%の地点に配置 */
    }

    .bubble1_tab{
        height: 340px; /* 高さを340pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        text-orientation: upright; /* 数字も縦方向に表示 */
        left: 25%; /* 本来配置される場所からさらに左25%の地点に配置 */
        top: -100px; /* 本来配置される場所から上-100pxの地点に配置 */
    }
}

/*------------- sp -------------*/
@media screen and (max-width:599px){/* 画面幅が599px以上の端末では */
    .bblimg1_sp{
        width: 250px; /* 幅を250pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        right: -10%; /* 本来配置される場所からさらに右-10%の地点に配置 */
    }

    .bubble1_sp{
        height: 340px; /* 高さを340pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        text-orientation: upright; /* 数字も縦方向に表示 */
        left: 15%; /* 本来配置される場所からさらに左15%の地点に配置 */
        top: -100px; /* 本来配置される場所から上-100pxの地点に配置 */
    }
}

/*---------------------------------
吹き出し2（About）
--------------------------------*/
/*------------- pc -------------*/
@media screen and (min-width:1200px) { /* 画面幅が1200px以上の端末では */
    .bblimg2_pc{
        width: 350px; /* 幅を350pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        left: -15%; /* 本来配置される場所からさらに左-15%の地点に配置 */
    }

    .bubble2_pc{
        width: 450px; /* 幅を450pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        right: -40%; /* 本来配置される場所からさらに右-40%の地点に配置 */
        top: -280px; /* 本来配置される場所からさらに上-280pxの地点に配置 */
    }
}

/*------------- tab ------------*/
@media screen and (min-width:600px) and ( max-width:1199px) {/* 画面幅が600～1199px以上の端末では */
    .bblimg2_tab{
        width: 300px; /* 幅を300pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        left: -10%; /* 本来配置される場所からさらに左-10%の地点に配置 */
        
    }

    .bubble2_tab{
        height: 450px; /* 高さを450pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        text-orientation: upright; /* 英語も縦方向に表示 */
        right: -38%; /* 本来配置される場所からさらに右-38%の地点に配置 */
        top: -100px; /* 本来配置される場所から上-100pxの地点に配置 */
    }
}

/*------------- sp -------------*/
@media screen and (max-width:599px){/* 画面幅が599px以上の端末では */
    .bblimg2_sp{
        width: 300px; /* 幅を300pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        left: -10%; /* 本来配置される場所からさらに左-10%の地点に配置 */
        
    }

    .bubble2_sp{
        height: 450px; /* 高さを450pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        text-orientation: upright; /* 英語も縦方向に表示 */
        right: -33%; /* 本来配置される場所からさらに右-33%の地点に配置 */
        top: -100px; /* 本来配置される場所から上-100pxの地点に配置 */
    }
}

/*---------------------------------
吹き出し3（About）
--------------------------------*/
/*------------- pc -------------*/
@media screen and (min-width:1200px) { /* 画面幅が1200px以上の端末では */
    .bblimg3_pc{
        width: 300px; /* 幅を300pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        right: -15%; /* 本来配置される場所からさらに右-15%の地点に配置 */
    }

    .bubble3_pc{
        width: 420px; /* 幅を420pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        left: 21%; /* 本来配置される場所からさらに左21%の地点に配置 */
        top: -180px; /* 本来配置される場所からさらに上-180pxの地点に配置 */
    }
}

/*------------- tab ------------*/
@media screen and (min-width:600px) and ( max-width:1199px) {/* 画面幅が600～1199px以上の端末では */
    .bblimg3_tab{
        width: 270px; /* 幅を270pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        right: -5%; /* 本来配置される場所からさらに右-5%の地点に配置 */
    }

    .bubble3_tab{
        height: 450px; /* 高さを450pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        left: 30%; /* 本来配置される場所からさらに左30%の地点に配置 */
        top: -50px; /* 本来配置される場所から上-50pxの地点に配置 */
    }
}

/*------------- sp -------------*/
@media screen and (max-width:599px){/* 画面幅が599px以上の端末では */
    .bblimg3_sp{
        width: 270px; /* 幅を270pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        right: -5%; /* 本来配置される場所からさらに右-5%の地点に配置 */
    }

    .bubble3_sp{
        height: 450px; /* 高さを450pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        left: 3%; /* 本来配置される場所からさらに左3%の地点に配置 */
        top: -50px; /* 本来配置される場所から上-50pxの地点に配置 */
    }
}

/*---------------------------------
吹き出し4（About）
--------------------------------*/
/*------------- pc -------------*/
@media screen and (min-width:1200px) { /* 画面幅が1200px以上の端末では */
    .bblimg4_pc{
        width: 350px; /* 幅を350pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        left: -10%; /* 本来配置される場所からさらに左-10%の地点に配置 */
    }

    .bubble4_pc{
        width: 430px; /* 幅を430pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        right: -45%; /* 本来配置される場所からさらに右-45%の地点に配置 */
        top: -300px; /* 本来配置される場所からさらに上-300pxの地点に配置 */
    }
}

/*------------- sp tab -------------*/
@media screen and (max-width:1199px){/* 画面幅が1199px以上の端末では */
    .bblimg4_sp{
        width: 300px; /* 幅を300pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        left: -8%; /* 本来配置される場所からさらに左-8%の地点に配置 */
        
    }

    .bubble4_sp{
        height: 370px; /* 高さを370pxに指定 */
        position: relative; /* 吹き出しの位置を指定 */
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        text-orientation: upright; /* 英語も縦方向に表示 */
        right: -35%; /* 本来配置される場所からさらに右-35%の地点に配置 */
        top: -150px; /* 本来配置される場所から上-230pxの地点に配置 */
    }
}

/*---------------------------------
サイン
--------------------------------*/
.sign{
    font-family: ta-koigokoro, sans-serif; /* フォントを指定 */
    font-style: normal; /* フォントのスタイルを標準に指定 */
    font-weight: 400; /* フォントの太さを指定 */
}

.sign_name{
    font-size: 2rem; /* フォントサイズを通常の2倍に指定 */
}

/*=================================
Story
================================*/
/*---------------------------------
吹き出し（Story）
--------------------------------*/
.story_area{
    position: relative; /* 画像に吹き出しを重ねるための基準値を指定 */
    margin-bottom: 100px; /* 下に50pxのスペースを確保 */
}

/*------------- pc -------------*/
@media screen and (min-width:1000px) { /* 画面幅が1000px以上の端末では */
    .bubble_tegaki{
        font-family: ta-koigokoro, sans-serif; /* フォントを指定 */
        text-align: center; /* 文字を中央寄せ */
        padding: 30px; /* 吹き出し線と文字の間に30pxのスペースを確保 */
        font-size: 1.3rem; /* フォントのサイズを標準テキストの1.3倍に指定 */
        width: 250px; /* 幅を250pxに指定 */
    }

    .bblimgX{
        width: 300px; /* 幅を300pxに指定 */
    }
    
    .bubbleA{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 50px; /* 本来配置される場所から上50pxの地点に配置 */
        left: 18%; /* 本来配置される場所からさらに左18%の地点に配置 */
    }
    
    .bubbleB{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 320px; /* 本来配置される場所から上320pxの地点に配置 */
        left: 20%; /* 本来配置される場所からさらに左20%の地点に配置 */
    }
    
    .bubbleC{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 150px; /* 本来配置される場所から上150pxの地点に配置 */
        right: 19%; /* 本来配置される場所からさらに右19%の地点に配置 */
    }

    .bblimgY{
        width: 400px; /* 幅を400pxに指定 */
    }

    .bubbleD{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 80px; /* 本来配置される場所から上80pxの地点に配置 */
        left: 15%; /* 本来配置される場所からさらに左15%の地点に配置 */
    }
    
    .bubbleE{
        width: 300px; /* 幅を300pxに指定 */
        position: absolute; /* 吹き出しの位置を指定 */
        top: 200px; /* 本来配置される場所から上200pxの地点に配置 */
        right: 15%; /* 本来配置される場所からさらに右15%の地点に配置 */
    }
}

/*------------- tab -------------*/
@media screen and (min-width:700px) and ( max-width:999px) {/* 画面幅が700～999px以上の端末では */
    .bubble_tegaki{
        font-family: ta-koigokoro, sans-serif; /* フォントを指定 */
        text-align: center; /* 文字を中央寄せ */
        padding: 20px; /* 吹き出し線と文字の間に20pxのスペースを確保 */
        font-size: 1.2rem; /* フォントのサイズを標準テキストの1.2倍に指定 */
        width: 200px; /* 幅を200pxに指定 */
    }

    .bblimgX{
        width: 250px; /* 幅を250pxに指定 */
    }
    
    .bubbleA{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 50px; /* 本来配置される場所から上50pxの地点に配置 */
        left: 18%; /* 本来配置される場所からさらに左18%の地点に配置 */
    }
    
    .bubbleB{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 230px; /* 本来配置される場所から上230pxの地点に配置 */
        left: 20%; /* 本来配置される場所からさらに左20%の地点に配置 */
    }
    
    .bubbleC{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 150px; /* 本来配置される場所から上150pxの地点に配置 */
        right: 10%; /* 本来配置される場所からさらに右10%の地点に配置 */
        width: 250px; /* 幅を250pxに指定 */
    }

    .bblimgY{
        width: 300px; /* 幅を300pxに指定 */
    }

    .bubbleD{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 50px; /* 本来配置される場所から上50pxの地点に配置 */
        left: 15%; /* 本来配置される場所からさらに左15%の地点に配置 */
    }
    
    .bubbleE{
        width: 250px; /* 幅を250pxに指定 */
        position: absolute; /* 吹き出しの位置を指定 */
        top: 150px; /* 本来配置される場所から上150pxの地点に配置 */
        right: 15%; /* 本来配置される場所からさらに右15%の地点に配置 */
    }
}

/*------------- sp -------------*/
@media screen and (max-width:699px){/* 画面幅が699px以上の端末では */
    .bubble_tegaki{
        font-family: ta-koigokoro, sans-serif; /* フォントを指定 */
        text-align: center; /* 文字を中央寄せ */
        padding: 20px; /* 吹き出し線と文字の間に20pxのスペースを確保 */
        width: 150px; /* 幅を250pxに指定 */
    }

    .bblimgX{
        width: 200px; /* 幅を200pxに指定 */
    }
    
    .bubbleA{
        width: 160px; /* 幅を160pxに指定 */
        position: absolute; /* 吹き出しの位置を指定 */
        top: -20px; /* 本来配置される場所から上-20pxの地点に配置 */
        left: 1%; /* 本来配置される場所からさらに左1%の地点に配置 */
    }
    
    .bubbleB{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 180px; /* 本来配置される場所から上180pxの地点に配置 */
        left: 3%; /* 本来配置される場所からさらに左3%の地点に配置 */
    }
    
    .bubbleC{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 70px; /* 本来配置される場所から上70pxの地点に配置 */
        right: 3%; /* 本来配置される場所からさらに右3%の地点に配置 */
    }

    .bblimgY{
        width: 200px; /* 幅を200pxに指定 */
    }

    .bubbleD{
        position: absolute; /* 吹き出しの位置を指定 */
        top: 10px; /* 本来配置される場所から上10pxの地点に配置 */
        left: 1%; /* 本来配置される場所からさらに左1%の地点に配置 */
    }
    
    .bubbleE{
        width: 180px; /* 幅を180pxに指定 */
        position: absolute; /* 吹き出しの位置を指定 */
        top: 80px; /* 本来配置される場所から上80pxの地点に配置 */
        right: 1%; /* 本来配置される場所からさらに右1%の地点に配置 */
    }
}

/*---------------------------------
帰宅時にそのドアを開ける時は、笑顔で。
--------------------------------*/
.mv_copy_right{
    color: #F5DF99; /* フォント色を黄色に指定 */
}

/*------------- pc -------------*/
@media screen and (min-width:1450px) { /* 画面幅が1450px以上の端末では */
    .mv_copy_right_pc{
        text-align: right; /* 文字を右寄せ */
        width: 800px; /* 幅を800pxに設定 */
        position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
        top: 18%; /*画像の上から18%のポイントに文字を表示*/
        right: 10%; /* 画像の右から10%のポイントに文字を表示 */
    }

    .mv_text_right_pc{
        color: #fff; /* フォント色を白に指定 */
        width: 600px; /* 幅を600pxに設定 */
        position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
        top: 40%; /* 画像の上から40%のポイントに文字を表示 */
        right: 10%; /* 画像の右から10%のポイントに文字を表示 */
    }
}

/*------------- tab ------------*/
@media screen and (min-width:800px) and ( max-width:1449px) {/* 画面幅が800～999px以上の端末では */
    .mv_copy_right_tab{
        text-align: right; /* 文字を右寄せ */
        width: 450px; /* 幅を450pxに設定 */
        position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
        top: 12%; /*画像の上から12%のポイントに文字を表示*/
        right: 10%; /* 画像の右から10%のポイントに文字を表示 */
    }

    .mv_text_right_tab{
        color: #fff; /* フォント色を白に指定 */
        width: 600px; /* 幅を600pxに設定 */
        position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
        top: 45%; /* 画像の上から45%のポイントに文字を表示 */
        right: 10%; /* 画像の右から10%のポイントに文字を表示 */
    }
}

/*------------- sp -------------*/
@media screen and (max-width:799px){/* 画面幅が799px以上の端末では */
    .mv_copy_right_sp{
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        height: 500px; /* 幅を500pxに設定 */
        position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
        top: 10%; /*画像の上から10%のポイントに文字を表示*/
        right: 10%; /* 画像の右から10%のポイントに文字を表示 */
    }

    .mv_text_right_sp{
        color: #000; /* フォント色を黒に指定 */
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        height: 400px; /* 幅を400pxに設定 */
        margin: 50px auto; /* 上下に50pxのスペースを確保、画面中央に要素を表示 */
    }
}

/*---------------------------------
リクエストの一杯、おつくりします。
--------------------------------*/
.mv_copy_left{
    color: #5FD068; /* フォント色を緑に指定 */
}

/*------------- pc -------------*/
@media screen and (min-width:1450px) { /* 画面幅が1450px以上の端末では */
    .mv_copy_left_pc{
        text-align: left; /* 文字を左寄せ */
        width: 800px; /* 幅を800pxに設定 */
        position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
        top: 18%; /*画像の上から18%のポイントに文字を表示*/
        left: 10%; /* 画像の左から10%のポイントに文字を表示 */
    }

    .mv_text_left_pc{
        color: #fff; /* フォント色を白に指定 */
        text-align: left; /* 文字を左寄せ */
        width: 600px; /* 幅を400pxに設定 */
        position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
        top: 40%; /* 画像の上から40%のポイントに文字を表示 */
        left: 10%; /* 画像の左から10%のポイントに文字を表示 */
    }
}

/*------------- tab ------------*/
@media screen and (min-width:800px) and ( max-width:1449px) {/* 画面幅が800～1449px以上の端末では */
    .mv_copy_left_tab{
        text-align: left; /* 文字を左寄せ */
        width: 450px; /* 幅を450pxに設定 */
        position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
        top: 12%; /*画像の上から12%のポイントに文字を表示*/
        left: 10%; /* 画像の左から10%のポイントに文字を表示 */
    }

    .mv_text_left_tab{
        color: #fff; /* フォント色を白に指定 */
        text-align: left; /* 文字を左寄せ */
        width: 600px; /* 幅を400pxに設定 */
        position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
        top: 45%; /* 画像の上から45%のポイントに文字を表示 */
        left: 10%; /* 画像の左から10%のポイントに文字を表示 */
    }
}

/*------------- sp -------------*/
@media screen and (max-width:799px){/* 画面幅が799px以上の端末では */
    .mv_copy_left_sp{
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        height: 400px; /* 幅を400pxに設定 */
        position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
        top: 10%; /*画像の上から10%のポイントに文字を表示*/
        left: 10%; /* 画像の左から10%のポイントに文字を表示 */
    }

    .mv_text_left_sp{
        color: #000; /* フォント色を黒に指定 */
        writing-mode: vertical-rl; /* 文章を縦書きかつ、右から左へ並べる */
        height: 400px; /* 幅を400pxに設定 */
        margin: 50px auto; /* 上下に50pxのスペースを確保、画面中央に要素を表示 */
    }
}

/*================================
Menu
================================*/
/*---------------------------------
メニューのエリア
--------------------------------*/
.menu_text{
    margin-bottom: 40px; /* 下に40pxのスペースを確保 */
}

.menu{
    text-align: center; /* 要素を中央寄せ */
    height: 270px; /* 高さを270pxに指定 */
    border: 1px solid #000; /*下線を表示、下線の太さを1pxに指定、下線を実線に指定、下線の色を指定 */
    border-radius: 10px; /* 枠線を円形に指定 */
    background-color: #fff; /* 背景色を白に指定 */
    position: relative; /* 枠線に文字を重ねるための基準値を指定 */
}

/*---------------------------------
メニュー内の画像
--------------------------------*/
.menu img{
    height: 150px; /* 高さを150pxに指定 */
    margin: 25px 0 10px; /* 上25px、左右0、下10pxのスペースを確保 */
}

/*---------------------------------
流体シェイプ
--------------------------------*/
.fluid1 {
    width: 350px; /* 幅を350pxに指定 */
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%; /* 形を流体シェイプに */
    }

.fluid2 {
    width: 350px; /* 幅を350pxに指定 */
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%; /* 形を流体シェイプに */
    }
  
.fluid3 {
    width: 350px; /* 幅を350pxに指定 */
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%; /* 形を流体シェイプに */
    }

/*================================
Atmosphere
================================*/
/*---------------------------------
全幅画像上に表示するテキスト
--------------------------------*/
.seat_copy{
    font-family: ta-koigokoro, sans-serif; /* フォントを指定 */
    color: #fff; /* フォント色を白に指定 */
}

.seat_text{
    color: #fff; /* フォント色を白に指定 */
}

/*------------- pc -------------*/
@media screen and (min-width:1000px) { /* 画面幅が1000px以上の端末では */
    .seat_copy{
        font-size: 4rem; /* フォントのサイズを標準テキストの4倍に指定 */
    }
}

/*------------- tab ------------*/
@media screen and (min-width:600px) and ( max-width:999px) {/* 画面幅が600～999px以上の端末では */
    .seat_copy{
        font-size: 3rem; /* フォントのサイズを標準テキストの3倍に指定 */
    }
}

/*------------- sp -------------*/
@media screen and (max-width:599px){/* 画面幅が599px以上の端末では */
    .seat_copy{
        font-size: 2rem; /* フォントのサイズを標準テキストの4倍に指定 */
    }
}

/*---------------------------------
団体様でも。
--------------------------------*/
.seat_copy_left{
    position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
    top: 28%; /*画像の上から28%のポイントに文字を表示*/
    left: 10%; /* 画像の右から10%のポイントに文字を表示 */
}

.seat_text_left{
    position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
    top: 62%; /*画像の上から63%のポイントに文字を表示*/
    left: 10%; /* 画像の右から10%のポイントに文字を表示 */
}

/*---------------------------------
おひとり様でも。
--------------------------------*/
.seat_copy_right{
    position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
    top: 28%; /*画像の上から28%のポイントに文字を表示*/
    right: 10%; /* 画像の右から10%のポイントに文字を表示 */
}

.seat_text_right{
    position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
    top: 62%; /*画像の上から62%のポイントに文字を表示*/
    right: 10%; /* 画像の右から10%のポイントに文字を表示 */
}

/*================================
フッター
================================*/
/*---------------------------------
フッター テキスト
--------------------------------*/
.footer_title{
    position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
    left: 50%; /* 画像の中央に文字を表示 */
}

/*------------- pc -------------*/
@media screen and (min-width:1450px) { /* 画面幅が1450px以上の端末では */
    .footer_title{
        font-size: 2rem; /* フォントのサイズを標準テキストの2倍に指定 */
        top: 45%; /* 画像の上から45%のポイントに文字を表示 */
    }
}

/*------------- sp -------------*/
@media screen and (max-width:599px){/* 画面幅が599px以上の端末では */
    .footer_title{
        font-size: 1.5rem; /* フォントのサイズを標準テキストの1.5倍に指定 */
        top: 40%; /* 画像の上から40%のポイントに文字を表示 */
    }
}

.footer_text{
    position: absolute; /* 画像上に重ねて表示する文字の位置を絶対値で指定 */
    left: 50%; /* 画像の中央に文字を表示 */
    top: 70%; /* 画像の上から70%のポイントに文字を表示 */
}


/*================================
アニメーション
================================*/
/*---------------------------------
1文字ずつ文字が出現
--------------------------------*/
.eachTextAnime strong{opacity: 0;} /* 完全に透明 */
.eachTextAnime.appeartext strong{
    animation-name: text_anime_on; /* 「text_anime_on」という名前のアニメーションを定義 */
    animation-duration: 0.3s; /* 0.3秒かけてアニメーションを実施 */
    animation-timing-function: ease-out;  /* 進行度合いを終了時だけなめらかにする */
    animation-fill-mode: forwards; /* アニメーション終了後も終了時の状態を維持する */
} 

@keyframes text_anime_on {
	0% {opacity:0;} /* 完全に透明 */
	100% {opacity:1;} /* 完全に不透明 */
}

/*---------------------------------
下から出現
※スクロールしてクラス名「fadeUpTrigger」の位置まで来たら「fadeUp」というクラス名を付与して、コンテンツを下から出現させる
--------------------------------*/
.fadeUp{ /* アニメーションの内容を指定 */
    animation-name:fadeUpAnime; /* 「fadeUpAnime」という名前のアニメーションを定義する */
    animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
    animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    opacity:0; /* 完全に透明 */
    }

.fadeUp01{ /* アニメーションの内容を指定 */
    animation-name:fadeUpAnime; /* 「fadeUpAnime」という名前のアニメーションを定義する */
    animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
    animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 0.2s; /* アニメーションの開始を0.2秒遅らせる */
    opacity:0; /* 完全に透明 */
    }

.fadeUp02{ /* アニメーションの内容を指定 */
    animation-name:fadeUpAnime; /* 「fadeUpAnime」という名前のアニメーションを定義する */
    animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
    animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 0.4s; /* アニメーションの開始を0.4秒遅らせる */
    opacity:0; /* 完全に透明 */
    }

.fadeUp03{ /* アニメーションの内容を指定 */
    animation-name:fadeUpAnime; /* 「fadeUpAnime」という名前のアニメーションを定義する */
    animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
    animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 0.6s; /* アニメーションの開始を0.4秒遅らせる */
    opacity:0; /* 完全に透明 */
    }

.fadeUp04{ /* アニメーションの内容を指定 */
    animation-name:fadeUpAnime; /* 「fadeUpAnime」という名前のアニメーションを定義する */
    animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
    animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 0.8s; /* アニメーションの開始を0.4秒遅らせる */
    opacity:0; /* 完全に透明 */
    }
    
@keyframes fadeUpAnime{ /* 「fadeUpAnime」アニメーションの変化方法を指定 */
    from { /* アニメーションを開始するとき */
    opacity: 0; /* 完全に透明 */
    transform: translateY(100px); /* Y軸（縦）方向に下100pxの地点から移動 */
    }

    to { /* アニメーションが終了するとき */
    opacity: 1;  /* 完全に不透明 */
    transform: translateY(0); /* Y軸（縦）方向に0pxの地点へ移動（＝縦方向に100px上へ移動） */
    }
}

.fadeUpTrigger{ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    opacity: 0; /* 完全に透明 */
}

.fadeUpTrigger01{ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    opacity: 0; /* 完全に透明 */
}

.fadeUpTrigger02{ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    opacity: 0; /* 完全に透明 */
}

.fadeUpTrigger03{ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    opacity: 0; /* 完全に透明 */
}

.fadeUpTrigger04{ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    opacity: 0; /* 完全に透明 */
}

/*---------------------------------
拡大
※スクロールしてクラス名「zoomInTrigger」の位置まで来たら「zoomIn」というクラス名を付与して、コンテンツを拡大させる
※「画面が読み込まれた後」かつ「画面がスクロールされた後」に動くアニメーションを1つのアニメーション名にまとめて定義する
--------------------------------*/
.zoomIn01{
	animation-name:zoomInAnime; /* 「zoomInAnime」アニメーションの変化方法を指定 */
	animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
	animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 0.2s; /* アニメーションの開始を0.2秒遅らせる */
    opacity: 0; /* アニメーション開始前は要素を透明に指定 */
}

.zoomIn02{
	animation-name:zoomInAnime; /* 「zoomInAnime」アニメーションの変化方法を指定 */
	animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
	animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 0.4s; /* アニメーションの開始を0.4秒遅らせる */
    opacity: 0; /* アニメーション開始前は要素を透明に指定 */
}

.zoomIn03{
	animation-name:zoomInAnime; /* 「zoomInAnime」アニメーションの変化方法を指定 */
	animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
	animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 0.6s; /* アニメーションの開始を0.6秒遅らせる */
    opacity: 0; /* アニメーション開始前は要素を透明に指定 */
}

.zoomIn04{
	animation-name:zoomInAnime; /* 「zoomInAnime」アニメーションの変化方法を指定 */
	animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
	animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 0.8s; /* アニメーションの開始を0.8秒遅らせる */
    opacity: 0; /* アニメーション開始前は要素を透明に指定 */
}

.zoomIn05{
	animation-name:zoomInAnime; /* 「zoomInAnime」アニメーションの変化方法を指定 */
	animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
	animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 1s; /* アニメーションの開始を1秒遅らせる */
    opacity: 0; /* アニメーション開始前は要素を透明に指定 */
}

.zoomIn06{
	animation-name:zoomInAnime; /* 「zoomInAnime」アニメーションの変化方法を指定 */
	animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
	animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 1.2s; /* アニメーションの開始を1.2秒遅らせる */
    opacity: 0; /* アニメーション開始前は要素を透明に指定 */
}

.zoomIn07{
	animation-name:zoomInAnime; /* 「zoomInAnime」アニメーションの変化方法を指定 */
	animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
	animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 1.4s; /* アニメーションの開始を1.4秒遅らせる */
    opacity: 0; /* アニメーション開始前は要素を透明に指定 */
}

.zoomIn08{
	animation-name:zoomInAnime; /* 「zoomInAnime」アニメーションの変化方法を指定 */
	animation-duration:0.5s; /* 0.5秒かけてアニメーションを実施する */
	animation-fill-mode:forwards; /* アニメーション終了後も終了時の状態を維持する */
    animation-delay: 1.8s; /* アニメーションの開始を1.8秒遅らせる */
    opacity: 0; /* アニメーション開始前は要素を透明に指定 */
}

@keyframes zoomInAnime{
  from { /* アニメーションを開始するとき */
    opacity: 0; /* アニメーション開始前は要素を透明に指定 */
	transform: scale(0.6); /* 0.6倍の大きさ */
  }

  to { /* アニメーションが終了するとき */
    opacity: 1; /* アニメーション終了後は要素の透明を解除 */
    transform: scale(1); /* 1倍の大きさ */
  }
}

.zoomInTrigger01{ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    opacity: 0; /* 完全に透明 */
}

.zoomInTrigger02{ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    opacity: 0; /* 完全に透明 */
}

.zoomInTrigger03{ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    opacity: 0; /* 完全に透明 */
}

.zoomInTrigger04{ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    opacity: 0; /* 完全に透明 */
}

.zoomInTrigger05{ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
    opacity: 0; /* 完全に透明 */
}

/*---------------------------------
スライドショー
--------------------------------*/
.slider .slick-slide {
    margin:0 10px; /*slickのJSで書かれるタグ内、スライド左右に10pxの余白を確保*/
}