@charset "utf-8";
/* CSS Document */
body{
background-color: #BB4141;
font-family: "Merriweather","Zen Old Mincho", serif;
font-weight: 300;
font-style: normal;
}
.pcArea{
display: none;
}
/*========= 背景動画設定のCSS ===============*/
/*header設定*/
#header {
position: relative; /*h1の中央寄せ配置の起点とするためのrelative*/
}
#video-area {
position: fixed;
z-index: -1; /*最背面に設定*/
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: hidden;
}
#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: 100%;
min-width: 100%;
}
.mbArea {
width: 390px;
margin-left: auto;
margin-right: auto;
background-color:#BB4141;
overflow: hidden;
}
/*******************************************************/
/*******************************************************/
header{
display: flex;
justify-content: space-between;
background-color: #94B2B7;
}
/***********ヘッダー写真のサイズ***********/
header ul{
position: relative;
}
/*ロゴ画像のサイズ*/
header li{
display: flex;
}
.goldtop{
position: absolute;
top: 0px;
left: 158px;
width: 200px;
height: 150px;
}
header .logotop img{
width:90px;
height:90px;
}
/**************************************/
/*HappyHoridays*/
.top h1{
font-size: 30px;
margin-left: 145px;
color:#ffec57;
padding: 40px 40px 30px 40px;
}
/*トップ画像*/
.top h2{
text-align: center;
}
.top img{
width: 50%;
height: 50%;
}
/*トップ説明文*/
.top p{
color: aliceblue;
font-size: 13px;
text-align: center;
font-weight: bold;
padding: 30px 20px;
line-height: 1.7;
}
/*****topのタイトルと画像アニメーション*****/
/* ぼかしから出現 */
.blur{
animation-name:blurAnime;
animation-duration:1.5s;/*速さ*/
animation-fill-mode:forwards;
}
@keyframes blurAnime{
from {
filter: blur(10px);
transform: scale(1.02);
}
to {
filter: blur(0);
transform: scale(1);
}
}
/********************************************************/
/*スクロールの動くアイコン*/
/*====== 9-1-1 縦線が動いてスクロールを促す =======*/
/*スクロールダウン全体の場所*/
.title_scroll{
display: flex;
position: relative;
}
.scrolldown1{
position:absolute;
left:4%;
top:65%;
/*全体の高さ*/
height:50px;
}
/*Scrollテキストの描写*/
.scrolldown1 span{
/*描画位置*/
left:-15px;
top: -15px;
/*テキストの形状*/
color: aliceblue;
font-size: 0.7rem;
letter-spacing: 0.05em;
}
/* 線の描写 */
.scrolldown1::after{
content: "";
/*描画位置*/
position: absolute;
top: 0;
/*線の形状*/
width: 1px;
height: 30px;
background:#f0f8ff;
/*線の動き1.4秒かけて動く。永遠にループ*/
animation: pathmove 1.4s ease-in-out infinite;
opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
0%{
height:0;
top:0;
opacity: 0;
}
30%{
height:30px;
opacity: 1;
}
100%{
height:0;
top:50px;
opacity: 0;
}
}
/**********************************************/
/*ポストカード*/
.postcard{
text-align: center;
margin: 30px 0 60px 0;
}
.postcard img{
width: 80%;
height: 80%;
}
/***********ポストカード下からの動き***********/
/*右上へ*/
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes flipRightTopAnime{
from {
transform: translate(-20px,80px) rotate(25deg);
opacity: 0;
}
to {
transform: translate(0,1) rotate(0deg);
opacity: 1;
}
}
/***********************************/
/*コーヒーの画像*/
.view_img{
height: 400px;
margin-bottom: 30px;
}
.view_img img{
width: 100%;
height: 100%;
}
/***********************************/
/*メニュータイトル*/
.menu h2{
color: aliceblue;
font-size: 25px;
}
/*メニュー白ライン*/
.menu img{
width: 70%;
height: 70%;
}
/*メニュー親要素マージン*/
.menu{
margin:15px 30px 20px 30px;
}
/*タイトルと白ライン中央寄せ*/
.menu li{
text-align: center;
}
/*************************************/
/*ドリンクタイトルトップ*/
.drinks_title li{
text-align: center;
}
/*ドリンクアイコン*/
.drinks_title img{
width: 40%;
height: 30%;
}
/*全て、ICEまたはHOTからお選びいただけます*/
.drinks_title p{
color: aliceblue;
font-size: 13px;
text-align: center;
margin-top: 20px;
margin-bottom: 50px;
}
/*ドリンクメニュー商品*/
.drinks_menu li{
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.drinks_menu li img{
width: 150px;
height: 150px;
clip-path: polygon(15% 0, 100% 0%, 83% 99%, 0% 100%);
}
.drinks_menu li h4{
color: aliceblue;
font-size: 15px;
margin-left: 35px;
margin-top: 50px;
}
/*************************************/
/*スイーツタイトルトップ*/
.sweets_title li{
text-align: center;
margin: 50px 0 30px 0;
}
.sweets_title img{
width: 40%;
height: 30%;
}
/*スイーツメニュー商品*/
.sweets_menu li{
display: flex;
justify-content: center;
margin: 0 30px 30px 20px;
}
.sweets_menu li img{
width: 150px;
height: 150px;
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
.sweets_menu li h4{
color: aliceblue;
font-size: 15px;
margin-left: 35px;
margin-top: 50px;
}
/*************************************/
/*ケーキセットタイトルトップ*/
.cakeset_title li{
text-align: center;
margin-top: 60px;
}
.cakeset_title img{
width: 43%;
height: 30%;
}
.cakeset_title h4{
color: aliceblue;
font-size: 18px;
margin-top: 35px;
font-weight: bold;
}
/********************/
/*ケーキセットドリンクメニュー*/
/*☆下記ドリンクからおひとつお選びください*/
.cakeset_drink h4{
color: aliceblue;
font-size: 15px;
text-align: center;
}
/*（クリスマス限定メニューのドリンクは＋150円）*/
.cakeset_drink p{
color: aliceblue;
font-size: 10px;
text-align: center;
margin-top: 10px;
}
/*ドリンクメニュー内容*/
.cakeset_drink h5{
color: aliceblue;
font-size: 15px;
text-align: center;
margin-top: 35px;
line-height: 1.6;
}
/***********ケーキセットスイーツメニュー*************/
/*☆下記スイーツ又は
クリスマス限定スイーツ
から
おひとつお選びください*/
.cakeset_sweets h4{
color: aliceblue;
font-size: 15px;
text-align: center;
}
/*ケーキメニュー内容*/
.cakeset_sweets h5{
color: aliceblue;
font-size: 15px;
text-align: center;
margin-top: 35px;
line-height: 1.6;
}
/************************************************/
/*クリスマスツリーの画像*/
.view_img02{
text-align: center;
margin: 60px 0 30px 0;
}
.view_img02 img{
width: 100%;
height: 100%;
}
/***********************************/
/*ホールケーキ*/
/*ホールケーキタイトルトップ*/
.wholecake_title li{
text-align: center;
}
.wholecake_title img{
width: 40%;
height: 30%;
}
/************************************************/
/*クリスマスケーキ
ご予約承り中です*/
.wholecake_top h3{
color: aliceblue;
font-size: 15px;
font-weight: bold;
line-height: 1.5;
text-align: center;
margin-top: 30px;
margin-bottom: 50px;
}
/****ホールケーキのスライドショー********************/
/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
width:94%;
margin:0 auto;
}
.slider img {
width:150px;/*スライダー内の画像を60vwにしてレスポンシブ化*/
height:150px;
}
.slider .slick-slide {
transform: scale(0.8);/*左右の画像のサイズを80%に*/
transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
opacity: 0.5;/*透過50%*/
}
.slider .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
position: absolute;/*絶対配置にする*/
top: 42%;
cursor: pointer;/*マウスカーソルを指マークに*/
outline: none;/*クリックをしたら出てくる枠線を消す*/
border-top: 2px solid #bfbcbc;/*矢印の色*/
border-right: 2px solid #bfbcbc;/*矢印の色*/
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:#bfbcbc;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
background:#365027;/*ドットボタンの現在地表示の色*/
}
/***********スライドショーここまで***********************************************************/
/***********/
/*¥3800～/5号
¥6200～/7号*/
.whole_section li p{
color: aliceblue;
font-size: 13px;
line-height: 1.5;
text-align: center;
margin-top: 30px;
}
/*お電話・メール又は下記ボタンよりご予約いただけます*/
.whole_section li h5{
color: aliceblue;
font-size: 13px;
text-align: center;
margin: 30px auto;
}
/*************************************/
/*予約ボタン*/
.button {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
text-decoration: none;
color: #ddd4d5;
font-size: 18px;
border-radius: 0px;
width: 240px;
height: 35px;
font-weight: bold;
transition: 0.3s;
box-shadow: 10px 5px 0px 0px #790707;
background-color: #365027;
margin: 50px auto;
}
.button:active{
box-shadow: 0 0 #790707;
color:#ddd4d5;
background-color:#790707;
}
/*****************************************************/
/*リボン街灯の画像*/
.view_img03{
margin: 80px 0 40px 0;
text-align: center;
}
.view_img03 img{
width: 100%;
}
/***********************************/
/*オリジナルグッズタイトルトップ*/
.originalgoods_title li{
text-align: center;
margin-bottom: 40px;
}
.originalgoods_title li img{
width: 47%;
height: 30%;
}
.originalgoods_title p{
color: aliceblue;
font-size: 14px;
line-height: 1.6;
text-align: center;
margin-top: 20px;
}
/*****************フォトギャラリー********************/
/*グリッドギャラリー写真*/
.photogarelly{
display: grid;
grid-template-rows: 150px 150px 150px;
grid-template-columns: 50% 50%;
grid-gap: 8px 1px;
margin: 0 20px;
text-align: center;
padding-bottom:20px;
list-style: none;
}
.photogarelly img{
object-fit: cover;
width: 160px;
height: 150px;
}
.item01{
grid-row: 1/2;
grid-column: 1/2;
}
.item02{
grid-row: 1/2;
grid-column: 2/3;
}
.item03{
grid-row: 2/3;
grid-column: 1/2;
}
.item04{
grid-row: 2/3;
grid-column: 2/3;
}
.item05{
grid-row: 3/4;
grid-column: 1/2;
}
.item06{
grid-row: 3/4;
grid-column: 2/3;
}
/*価格等はスタッフへお尋ねください*/
.value_sentence p{
color: aliceblue;
font-size: 10px;
text-align: center;
}
.value_sentence{
margin-bottom: 45px;
}
/********************************************************/
/*********ここからアクセス************/
.access{
background-color: #365027;
}
/*Access*/
.access h3{
font-size: 27px;
color: aliceblue;
text-align: center;
margin:30px auto;
padding-top: 25px;
}
/*グーグルマップ*/
.access iframe{
width: 300px;
height: 180px;
margin: 0 38px;
text-align: center;
}
/*ロゴ画像*/
.access_logo{
text-align: center;
margin-top: 20px;
}
.access_logo img{
width: 60px;
height: 60px
}
/*Cafe Twinkle*/
.access h4{
font-size: 18px;
color: aliceblue;
text-align: center;
padding-top: 25px;
}
/*住所・電話番号・メアド*/
.access_sentence{
background-color: #365027;
}
.access_sentence p{
font-size: 11px;
color: aliceblue;
line-height: 1.6;
text-align: center;
padding: 20px ;
}
/**********************************************/
/*footerここから*/
footer{
background-image: url("../images/footer.jpg");
height: 198px;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
footer a{
font-size: 20px;
padding-top: 20px;
}
footer img{
width: 250px;
height: 200px;
}
/*snsのアイコン*/
.snsicon{
margin: 30px 0;
}
.snsicon img{
width: 50px;
height: 50px;
}
/*コピーライト*/
footer small{
text-align: center;
color: #fff;
margin-bottom: 10px;
}
/*背景に雪を降らせる*/
/*****************************************************/
/*particle.jsで描画されたエリア(#particle-js)の上にコンテンツ(#wrapper)を設置する設定を行う。*/
html,body{
height: 100%;/*高さを100%にして描画エリアをとる*/
}
#particles-js{
position:fixed;/*描画固定*/
width: 100%;
height: 100%;
}
#wrapper{
position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
width:100%;
height: 100%;
}
/*****************************************************/
/*=====ここからPC用の設定=====*/
@media screen and (min-width:960px) {
.pcArea {
position: relative;
display: block;
}
.scrolldown1{
left:84%;
top:70%;
}
/* .pcArea nav {
position: fixed;
height: 90vh;
width: 300px;
right: 40px;
}*/
/*topのボタン*********************/
.headerBtn {
color:#b7c7d1;
font-size: 30px;
font-weight: bold;
position: fixed;
top: 250px;
left: 150px;
/*border: solid 3px #b7c7d1;*/
}
.headerBtn:hover {
transform: scale(1.2);
}
/*drinksのボタン*********************/
.drinksBtn {
color:#b7c7d1;
font-size: 30px;
font-weight: bold;
position: fixed;
top: 350px;
left: 150px;
/* border: solid 3px #fff;*/
}
.drinksBtn:hover {
transform: scale(1.2);
}
/*sweetsのボタン*********************/
.sweetsBtn {
color:#b7c7d1;
font-size: 30px;
font-weight: bold;
position: fixed;
top: 450px;
left:150px;
/*border: solid 3px #fff;*/
}
.sweetsBtn:hover {
transform: scale(1.2);
}
/*cakesetのボタン*********************/
.cakesetBtn {
color:#b7c7d1;
font-size: 30px;
font-weight: bold;
position: fixed;
top: 550px;
left:150px;
/*border: solid 3px #fff;*/
}
.cakesetBtn:hover {
transform: scale(1.2);
}
/**************************************/
/*originalgoodsのボタン*********************/
.originalgoodsBtn {
color:#b7c7d1;
font-size: 30px;
font-weight: bold;
position: fixed;
top: 650px;
left:150px;
/*border: solid 3px #fff;*/
}
.originalgoodsBtn:hover {
transform: scale(1.2);
}
/**************************************/
/*logoのボタン*********************/
.logoBtn {
position: fixed;
top: 490px;
right: 30px;
display: inline-block;
}
.logoBtn img{
width: 50%;
height: 50%;
}
.logoBtn:hover {
transform: scale(1.2);
}
/**************************************/
/*ホールケーキのボタン*********************/
.reserveBtn {
position: fixed;
top: 580px;
right: 70px;
}
.reserveBtn img{
width: 40%;
height: 40%;
}
.reserveBtn:hover {
transform: scale(1.2);
}
/**************************************/
.gMenu {
position: static;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
}
.gMenu .menu-icon {
position: static;
justify-content: space-between;
}
}
#particles-js{ position:fixed; width: 375px; height: 100%; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }