@charset "utf-8";

/*==================================================
機能編　5-1-25 クリックしたらナビ背景コンテンツがぼかされる※IE11非対応
===================================*/
/*========= ぼかしのためのCSS ===============*/
.mainblur {
filter: blur(8px);
}
/*========= ナビゲーションのためのCSS ===============*/
#g-nav {
/*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
position: fixed;
z-index: -1;
opacity: 0; /*はじめは透過0*/
/*ナビの位置と形状*/
top: 0;
width: 100%;
height: 100vh; /*ナビの高さ*/
background: rgba(212, 212, 212, 0.9); /*背景を少し透過させる*/
/*動き*/
transition: all 0.3s;
}
/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive {
opacity: 1;
z-index: 999;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width: 100%;
height: 100vh; /*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
display: none; /*はじめは非表示*/
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#g-nav.panelactive ul {
display: block;
}
/*リストのレイアウト設定*/
#g-nav li {
list-style: none;
text-align: center;
}
#g-nav li a {
color: #fff;
text-decoration: none;
padding: 10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}
/*==================================================
機能編　5-2-2 ボタン：2本線が×に
===================================*/
/*ボタン外側*/
.openbtn {
position: fixed;
z-index: 9999; /*ボタンを最前面に*/
top: 10px;
right: 10px;
cursor: pointer;
width: 50px;
height: 50px;
}
/*ボタン内側*/
.openbtn span {
display: inline-block;
transition: all .4s; /*アニメーションの設定*/
position: absolute;
left: 13px;
height: 3px;
background-color: #666;
}
.openbtn span:nth-of-type(1) {
top: 22px;
width: 50%;
}
.openbtn span:nth-of-type(2) {
top: 29px;
width: 30%;
}
/*activeクラスが付与されると線が回転して×に*/
.openbtn.active span:nth-of-type(1) {
top: 20px;
left: 16px;
transform: translateY(6px) rotate(-45deg);
width: 35%;
}
.openbtn.active span:nth-of-type(2) {
top: 32px;
left: 16px;
transform: translateY(-6px) rotate(45deg);
width: 35%;
}
/*==================================================
機能編　9-1-2 丸が動いてスクロールを促す
===================================*/
/*スクロールダウン全体の場所*/
.scrolldown2 {
/*描画位置※位置は適宜調整してください*/
position: fixed;
bottom: 10px;
left: 50%;
z-index: 2;
}
/*Scrollテキストの描写*/
.scrolldown2 span {
/*描画位置*/
position: absolute;
left: 10px;
bottom: 10px;
/*テキストの形状*/
color: #eee;
font-size: 0.7rem;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
/* 丸の描写 */
.scrolldown2:before {
content: "";
/*描画位置*/
position: absolute;
bottom: 0;
left: -4px;
/*丸の形状*/
width: 10px;
height: 10px;
border-radius: 50%;
background: #eee;
/*丸の動き1.6秒かけて透過し、永遠にループ*/
animation:
circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
}
@media screen and (max-width:768px) {
.scrolldown2:before {
background: #aca8a8;
}
.scrolldown2:after {
background: #aca8a8;
}
.scrolldown2 span {
color: #aca8a8;
}
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
0% {
bottom: 45px;
}
100% {
bottom: -5px;
}
}
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
0% {
opacity: 0
}
50% {
opacity: 1;
}
80% {
opacity: 0.9;
}
100% {
opacity: 0;
}
}
/* 線の描写 */
.scrolldown2:after {
content: "";
/*描画位置*/
position: absolute;
bottom: 0;
left: 0;
/*線の形状*/
width: 2px;
height: 50px;
background: #eee;
}
/*==================================================
機能編　　7-1-21	線から塗に変化（上から下）
===================================*/
/* ボタン共通設定 */
.btn04 {
/*線の基点とするためrelativeを指定*/
position: relative;
/*ボタンの形状*/
display: inline-block;
padding: 10px 30px;
color: #333;
border: 1px solid #ccc;
text-decoration: none;
outline: none;
/*はみ出す背景色を隠す*/
overflow: hidden;
}
/*hoverした際のボタンの形状*/
.btn04:hover {
color: #fff;
border-color: transparent;
/*色の変化を遅らせる*/
transition-delay: .6s;
}
/*線の設定*/
.btn04 span {
display: block;
z-index: 2;
}
/*== 線から塗に変化（上から下） */
/*線の設定*/
.bordertop span::before, .bordertop span::after {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
width: 1px;
height: 0;
/*線の形状*/
background: #e2a2b1;
/*アニメーションの設定*/
transition: all .3s;
}
/*左線*/
.bordertop span::before {
left: 0;
top: 0;
}
/*右線*/
.bordertop span::after {
right: 0;
top: 0;
}
/*hoverをすると線が伸びる*/
.bordertop:hover span::before, .bordertop:hover span::after {
height: 100%;
}
/*背景の設定*/
.bordertop::before {
content: '';
/*絶対配置で線の位置を決める*/
position: absolute;
left: 0;
top: 0;
z-index: -1;
/*背景の形状*/
width: 100%;
height: 0;
background: #e2a2b1;
/*アニメーションの設定*/
transition: all .3s;
}
/*hoverをすると背景が伸びる*/
.bordertop:hover::before {
height: 100%;
/*0.4秒遅れてアニメーション*/
transition-delay: .4s;
}
/*==================================================
機能編　8-1-4	ページ内にある指定の範囲内で下から出現
===================================*/
/*リンクの形状*/
#page-top a {
display: flex;
justify-content: center;
align-items: center;
background: #e2a2b1;
width: 60px;
height: 50px;
color: #fff;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-size: 0.6rem;
transition: all 0.3s;
}
#page-top a:hover {
background: #999;
height: 55px;
}
/*リンクを右下に固定*/
#page-top {
position: fixed;
right: 0;
bottom: 0;
z-index: 2;
/*はじめは非表示*/
opacity: 0;
transform: translateY(100px);
}
/*　上に上がる動き　*/
#page-top.UpMove {
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*　下に下がる動き　*/
#page-top.DownMove {
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100px);
}
}
/*==================================================
機能編　6-1-6 複数画像を並列に見せる
===================================*/
.slider { /*横幅94%で左右に余白を持たせて中央寄せ*/
width: 94%;
margin: 0 auto;
}
.slider img {
width: 100%; /*スライダー内の画像を横幅100%に*/
height: auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
margin: 0 10px;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, .slick-next {
position: absolute; /*絶対配置にする*/
top: 42%;
cursor: pointer; /*マウスカーソルを指マークに*/
outline: none; /*クリックをしたら出てくる枠線を消す*/
border-top: 2px solid #999; /*矢印の色*/
border-right: 2px solid #999; /*矢印の色*/
height: 15px;
width: 15px;
}
.slick-prev { /*戻る矢印の位置と形状*/
left: -1.5%;
transform: rotate(-135deg);
}
.slick-next { /*次へ矢印の位置と形状*/
right: -1.5%;
transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
text-align: center;
margin: 20px 0 0 0;
}
.slick-dots li {
display: inline-block;
margin: 0 5px;
}
.slick-dots button {
color: transparent;
outline: none;
width: 8px; /*ドットボタンのサイズ*/
height: 8px; /*ドットボタンのサイズ*/
display: block;
border-radius: 50%;
background: #ccc; /*ドットボタンの色*/
}
.slick-dots .slick-active button {
background: #e2a2b1; /*ドットボタンの現在地表示の色*/
}
/*==================================================
印象編 4 最低限おぼえておきたい動き
===================================*/
/* 4-1 ふわっ（その場で） */
.fadeIn {
animation-name: fadeInAnime;
animation-duration: 2s; /*ゆっくり出現するため数値変更*/
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeInAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 4-4 ボンッ（拡大） */
.zoomOut {
animation-name: zoomOutAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes zoomOutAnime {
from {
transform: scale(1.2);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomOutTrigger {
opacity: 0;
}
/*===========================================================*/
/* 印象編　8 テキストの動き　/
/*===========================================================*/
/*========= 8-2 テキストが流れるように出現（左から右） ===============*/
/*全共通*/
.slide-in {
overflow: hidden;
display: inline-block;
padding: 0 10px; /*英語がはみ出るので見えるように余白追記*/
}
.slide-in_inner {
display: inline-block;
}
/*左右のアニメーション*/
.leftAnime, .rightAnime {
opacity: 0; /*事前に透過0にして消しておく*/
}
.slideAnimeLeftRight {
animation-name: slideText-100;
animation-duration: 0.8s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideText-100 {
from {
transform: translateX(-100%); /*要素を左の枠外に移動*/
opacity: 0;
}
to {
transform: translateX(0); /*要素を元の位置に移動*/
opacity: 1;
}
}
.slideAnimeRightLeft {
animation-name: slideText100;
animation-duration: 0.8s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slideText100 {
from {
transform: translateX(100%); /*要素を右の枠外に移動*/
opacity: 0;
}
to {
transform: translateX(0); /*要素を元の位置に移動*/
opacity: 1;
}
}
/*========= 8-9 テキストがじわっと出現 ===============*/
.blur {
animation-name: blurAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes blurAnime {
from {
filter: blur(10px);
transform: scale(1.02);
opacity: 0;
}
to {
filter: blur(0);
transform: scale(1);
opacity: 1;
}
}
.blurTrigger {
opacity: 0;
}
/*========= 8-17　テキストがほのかに光りながら出現 ===============*/
.glowAnime span {
opacity: 0;
}
.glowAnime.glow span {
animation: glow_anime_on 1s ease-out forwards;
}
@keyframes glow_anime_on {
0% {
opacity: 0;
text-shadow: 0 0 0 #fff, 0 0 0 #fff;
}
50% {
opacity: 1;
text-shadow: 0 0 10px #fff, 0 0 15px #fff;
}
100% {
opacity: 1;
text-shadow: 0 0 0 #fff, 0 0 0 #fff;
}
}
/*==================================================
7 画像リンクの動き
===================================*/
span.mask {
display: block; /*画像をくくるspanタグをブロック要素にする*/
overflow: hidden; /*はみ出ているものを隠す*/
}
/*　7-9 波紋　*/
.circle span.mask {
position: relative; /*波紋の基点となる位置を定義*/
}
.circle span.mask::before {
position: absolute;
content: '';
transform: scale(0); /*円の大きさ初期値は0*/
opacity: 0; /*透過0*/
width: 100%; /*円のサイズ指定*/
height: 100%; /*円のサイズ指定*/
border-radius: 50%; /*円の角丸指定*/
background: rgba(255, 255, 255, 0.2); /*円の背景色*/
}
.circle span.mask:hover::before { /*hoverした時の変化*/
animation: circle 0.75s; /*アニメーションの名前と速度を定義*/
}
@keyframes circle {
0% {
transform: scale(0);
opacity: 1; /*透過なし*/
}
30% {
opacity: 1;
}
100% {
transform: scale(2); /*アニメーションで大きくなった2倍の円の指定*/
}
}
/* 7-11 背景が出現＋テキスト（上から） */
.bgDU, .bgDU .mask {
display: block;
position: relative; /*背景色とテキストの基点となる位置を定義*/
overflow: hidden;
}
.bgDU .mask::before {
content: '';
position: absolute;
z-index: 2;
left: 0;
top: 0;
opacity: 0; /*透過0*/
transition: .3s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
transform: translateY(100%);
background: #e2a2b2; /*背景色*/
width: 100%;
height: 100%;
}
.bgDU:hover .mask::before { /*hoverした時の変化*/
opacity: 1; /*透過なしに変化*/
transform: translateY(0);
}
.bgDU .cap { /*画像の上のテキスト*/
position: absolute;
opacity: 0; /*透過0*/
transition: .5s ease-in-out; /*移り変わる速さを変更したい場合はこの数値を変更*/
z-index: 3; /*テキストを前面に出す*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /*テキストの位置中央指定*/
color: #fff; /*テキストの色を変えたい場合はここを修正*/
}
.bgDU:hover .cap { /*hoverした時の変化*/
opacity: 1; /*透過なしに変化*/
}
/*==================================================
印象編　6-7 スクロールするとヘッダー背景画像が拡大（エリアの動き）
===================================*/
#container {
position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
z-index: 3;/*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
background:#f8f9fa;
margin-top: 10%;
}

/*========= 背景動画設定のCSS ===============*/
#video {
/*天地中央配置*/
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*縦横幅指定*/
width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
min-height: 80%;
min-width: 80%;
}
@media screen and (max-width:768px) {
#video {
min-height: 0;
min-width: 100%;
top: 10em;
}
}
/*ボタン外側*/
.openbtn {
position: fixed;
z-index: 9999; /*ボタンを最前面に*/
top: 0;
right: 10px;
cursor: pointer;
width: 50px;
height: 50px;
}
/*ボタン内側*/
.openbtn span {
display: inline-block;
transition: all .4s; /*アニメーションの設定*/
position: absolute;
left: 13px;
height: 3px;
background-color: #666;
}
.openbtn span:nth-of-type(1) {
top: 22px;
width: 50%;
}
.openbtn span:nth-of-type(2) {
top: 29px;
width: 30%;
}
/*activeクラスが付与されると線が回転して×に*/
.openbtn.active span:nth-of-type(1) {
top: 20px;
left: 16px;
transform: translateY(6px) rotate(-45deg);
width: 35%;
}
.openbtn.active span:nth-of-type(2) {
top: 32px;
left: 16px;
transform: translateY(-6px) rotate(45deg);
width: 35%;
}