/* ===== 全体のスタイル ===== */
* {
  margin: 0;
  padding: 0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family: 'Lato', sans-serif;
}

/* ===== ヘッダーのスタイル ===== */
/* ヘッダー */
.hdelem {
  display: table;
  /* 背景の色 */
  background-color:#16162e;
  /* 背景の画像 */
  background-image: url(img/toppage-img1.webp);
  background-position:bottom;
  /* 背景の画像を枠いっぱいに広げる */
  background-size: cover;
  /* 内がわの余白 */
  /* 幅と高さ */
  width:100%;
  height:80vh;
}

/* h1見出し */
.hdelem-h1 {
  display:table-cell;
  
  /* 文字の大きさ */
  font-size: 70px;
  /* 文字の種類 */
  /*font-family: lobster;*/
  /* 文字の色 */
  color: white;
  /* 文字の整列 */
  text-align: center;
  vertical-align: middle;
  padding:10px;
  backdrop-filter:blur(10px);
  background-color:#00000099;
  
}

.navbar{
  display: flex;
  padding:10px;
  text-align: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
  /*height:20vh;*/
}

.navbar .navbar-text{
  display: flex;
  padding:5px 10px;
  margin:5px 3px;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: black;
  background-color:#eee;
  border-radius:5px;
  flex:0 0 auto;
  min-width:300px;
  justify-content: center;
  transition:0.2s;
}

.navbar .navbar-text:hover{
  background-color:#ddd;
}

.topnav .navbar-text{
  display: flex;
  padding:5px 10px;
  margin:5px 3px;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: black;
  background-color:#eee;
  border-radius:5px;
  flex:0 0 auto;
  min-width:300px;
  justify-content: center;
  transition:0.2s;
}

.topnav .navbar-text:hover{
  background-color:#ddd;
}

.topnav .navbar-text::after {
    /*position: absolute;*/
    content: '';
    background-image: url(icons/toparrow.svg);
    height: 20px;
    width: 20px;
    /*bottom: 60px;*/
    transform: scale(1.2);
    margin:2px 5px;
}

.scrollprompt{
  position:absolute;
  left:calc(50vw - 18px);
  top:calc(80vh - 70px);
  fill:currentColor;
  transform:scale(2);
  
  animation-name: scrollprompt-anim;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes scrollprompt-anim{
  0%{
    
  }
  25%{
    transform:translateY(20px) scale(2);
  }
  50%{
    transform:translateY(0px) scale(2);
  }
}

/* ===== お店紹介のスタイル ===== */
/* セクション */
.sec-2 {
  /* 内がわの余白 */
  padding: 30px;
  /* 文字の整列 */
  text-align: left;
}

.sec-bgcolor-2 {
  /* 背景の色 */
  background-color: #eae9ff;
}

.sec-bgcolor-3 {
  /* 背景の色 */
  background-color: #ffe5ed!important;
}

.sec-bgcolor-4 {
  /* 背景の色 */
  background-color: #fffae5;
}

.sec-bgcolor-5 {
  /* 背景の色 */
  background-color: #e5fff1;
}

.sec-backimg-2{
  background-image: url(img/toppage-img1.webp);
  background-color:rgba(255,255,255,0.9);
  background-blend-mode:lighten;
  background-size: cover;
  background-position: center;
  border-radius:10px;
}

.sec-backimg-3{
  background-image: url(img/3dsimthumb01.png);
  background-color:rgba(255,255,255,0.9);
  background-blend-mode:lighten;
  background-size: cover;
  background-position: center;
  border-radius:10px;
}

.sec-backimg-4{
  background-image: url(img/publicdomainq-0064866jtgglk_mini.jpg);
  background-color:rgba(255,255,255,0.9);
  background-blend-mode:lighten;
  background-size: cover;
  background-position: center;
  border-radius:10px;
}

.sec-backimg-5{
  background-image: url(img/photo0000-2598.webp);
  background-color:rgba(255,255,255,0.94);
  background-blend-mode:lighten;
  background-size: cover;
  background-position: center;
  border-radius:10px;
}

/* h2見出し */
.md-2 {
  /* 文字の大きさ */
  /*font-size: 20px;*/
  /* 下がわの余白 */
  margin-bottom: 20px;
  text-align: center;
}

.md-color-2{
    /* 文字の色 */
  color: #16162e;
}

.md-color-3{
    /* 文字の色 */
  color: #2b00ce;
  background-color:#eae9ff;
  border-radius:5px;
  padding:8px;
}

.md-color-4{
    /* 文字の色 */
  color: #e10057!important;
  background-color:#ffe5ed!important;
  border-radius:5px;
  padding:8px;
}

.md-color-5{
    /* 文字の色 */
  color: #e69900!important;
  background-color:#fffae5!important;
  border-radius:5px;
  padding:8px;
}

.md-color-6{
    /* 文字の色 */
  color: #00b181!important;
  background-color:#e5fff1!important;
  border-radius:5px;
  padding:8px;
}

.md-color-7{
    /* 文字の色 */
  color: #16162e!important;
  background-color:#d6dce9!important;
  border-radius:5px;
  padding:8px;
}

/* レイアウト用の箱 */
.div-flex {
  /* レイアウトのルール */
  display: flex;
}

/* 画像 */
.div-flex img {
  /* 横幅 */
  width: 350px;
  /* 角丸 */
  border-radius: 10px;
  align-self:center;
  margin:10px 50px;
  /*box-shadow:0 0.5rem 1rem #00ffa159;*/
}

/* 段落 */
.div-flex p {
  /* 文字の行間 */
  line-height: 180%;
  /* 左がわの余白 */
  margin: 20px;
  align-self: center;
  font-size:18px;
  color:#474747;
}

.div-flex-rev{
  flex-flow: row-reverse;
}

.sec-btn-flex{
  display: flex;
  justify-content:center;
  padding:20px;
}

.sec-btn-2{
  display:block;
  /*background-color:#16162e;*/
  color:#16162e;
  text-align: center;
  text-decoration: none;
  padding:10px;
  width:500px;
  border:2px solid #16162e;
  border-radius:5px;
  transition:0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sec-btn-2:hover{
  background-color:#16162e;
  color:white;
  scale:1.1;
}

/* ===== メニューのスタイル ===== */
/* メニューのセクション */
.menu {
  /* 背景の画像 */
  background-image: url(img/wood.jpg);
}

/* メニューのh2見出し */
.menu-title {
  /* 文字の色 */
  color: white;
}

/* メニュー表 */
table {
  /* 横幅 */
  width: 100%;
  /* 下がわの余白 */
  margin-bottom: 20px;
  /* 枠線の設定 */
  border-collapse: collapse;
  /* 背景の色 */
  background-color: ivory;
}

/* メニュー表のセル */
td {
  /* 枠線 */
  border: 1px solid black;
  /* 内がわの余白 */
  padding: 10px;
}

/* メニュー表の見出しセル */
th {
  /* 枠線 */
  border: 1px solid black;
  /* 内がわの余白 */
  padding: 10px;
  /* 背景の色 */
  background-color: gold;
}

a.link-1{
  color:#0082ff;
  transition:0.2s;
}

a.link-1:hover{
  color:#0063d2;
}

/* リンク */
a.link-2{
  /* 文字の色 */
  color: brown;
  /* 背景の色 */
  background-color: gold;
  /* 内がわの余白 */
  padding: 10px;
  /* 文字の装飾 */
  text-decoration: none;
  /* 角丸 */
  border-radius: 20px;
  /* 並べ方 */
  display: block;
  /* 文字の整列 */
  text-align: center;
}

/* リンクにさわった時 */
a.link-2:hover {
  /* 文字の色 */
  color: white;
  /* 背景の色 */
  background-color: teal;
}


/* ===== フッターのスタイル ===== */
/* フッター */
.ftelem {
  /* 文字の色 */
  color: #0000aa;
  /* 背景の色 */
  background-color: #dde2ff;
  /* 文字の整列 */
  text-align: center;
  /* 内がわの余白 */
  padding: 10px;
  font-weight: bold;
}



/* サブページ用スタイル */
.subpg-title{
  background-color:#16162e;
  color:white;
  text-align:center;
  padding:5px;
}

.subpg-hdelem{
  padding:30px;
}

.subpg-hdelem-mdcolor2{
  color: #e10057;
  background-color:#ffe5ed;
  border-radius:5px;
  padding:5px;
}

.subpg-thumb{
  width:600px;
  max-width:100%;
  margin:auto;
}

.subpg-thumb img{
  width:100%;
  border-radius: 10px;
}

.subpg-thumb video{
  width:100%;
  border-radius: 10px;
}

.text-center{
  text-align:center;
}

.text-gray{
  /* 文字の行間 */
  line-height: 180%;
  /* 左がわの余白 */
  margin: 20px;
  font-size:18px;
  color:#474747;
}

.subpg-bigtext{
  /* 文字の行間 */
  line-height: 180%;
  font-size:25px;
  font-weight:bold;
  margin:10px 0;
  display:inline-block;
}

.page-fade{
  animation-name: pageFade;
  animation-duration: 0.3s;
}

@keyframes pageFade{
  0%{
    opacity:0;
    transform: translateY(30px);
  }
  100%{
    opacity:1;
    transform: translateY(0px);
  }
}

.topmove{
  position:fixed;
  bottom:calc(0vh + 45px);
  right:calc(0vh + 30px);
  padding:10px;
  color:#fff;
  background-color:#16162e;
  opacity:0;
  border-radius:10px;
  transition:0.3s;
  transform:translateY(100px);
  cursor: pointer;
}

.topmove svg{
  transform:scale(1.5);
  fill:currentColor;
}

.text-bg-yellow{
  /*background-color:#ff0;*/
  background:linear-gradient(transparent 60%, #ff0 0%);
  padding:3px 5px;
  margin:5px;
  font-weight:bold;
  /*border-radius:5px;*/
}

.subpg-nextpagebtn{
  padding:5px 10px;
  margin:5px 3px;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: black;
  background-color:#eee;
  border-radius:5px;
  /*min-width:300px;*/
  width:300px;
  text-align:center;
  transition:0.2s;
}

.subpg-nextpagebtn:hover{
  background-color:#ddd;
}

.clickable-omote{
  display:block;
  padding:10px;
  margin:10px;
  border:3px solid #16162e;
  border-radius:10px;
  font-size:25px;
  color:#16162e;
  text-align:center;
  cursor:pointer;
}

.clickable-ura{
  display: block;
  padding:10px;
  margin:10px;
  border:3px solid #16162e;
  border-radius:10px;
  font-size:25px;
  color:#fff;
  background-color:#16162e;
  text-align:center;
  cursor: pointer;
}

.text-mincho{
  font-family:'Zen Antique', selif;
}

/* 画面幅別スタイル */
@media(max-width: 576px){
  /* ===== ヘッダーのスタイル ===== */
/* ヘッダー */
.hdelem {
  display: table;
  /* 背景の色 */
  background-color:#16162e;
  /* 背景の画像 */
  /* background-image: url(img/bouquet-142876_640.jpg); */
  /* 背景の画像を枠いっぱいに広げる */
  background-size: cover;
  /* 内がわの余白 */
  /* 幅と高さ */
  width:100%;
  height:100vh;
}

/* h1見出し */
.hdelem-h1 {
  display:table-cell;
  
  /* 文字の大きさ */
  font-size: calc(100vw * 0.12);
  /* 文字の種類 */
  /*font-family: lobster;*/
  /* 文字の色 */
  color: white;
  /* 文字の整列 */
  text-align: center;
  vertical-align: middle;
  padding:10px;
}

.navbar{
  display: flex;
  padding:10px;
  text-align: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
  /*height:20vh;*/
}

.navbar .navbar-text{
  display: flex;
  /*padding:5px;*/
  font-size: 20px;
  text-decoration: none;
  color: black;
  flex:0 0 auto;
}

.scrollprompt{
  top:calc(100vh - 70px);
}

/* レイアウト用の箱 */
.div-flex {
  /* レイアウトのルール */
  display: flex;
  /*flex-wrap:wrap;*/
  flex-flow:column;
  justify-content: center;
}

/* 画像 */
.div-flex img {
  /* 横幅 */
  width: 300px;
  max-width:100%;
  /* 角丸 */
  border-radius: 10px;
}

/* 段落 */
.div-flex p {
  /* 文字の行間 */
  line-height: 180%;
  /* 左がわの余白 */
  margin-left: 20px;
  margin-top: 20px;
}
}

@media(max-width: 800px) and (min-width:576px){
  /* ===== ヘッダーのスタイル ===== */

.navbar{
  display: flex;
  padding:10px;
  text-align: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
  /*height:20vh;*/
  max-width: 700px;
}

.navbar .navbar-text{
  display: flex;
  /*padding:5px;*/
  font-size: 20px;
  text-decoration: none;
  color: black;
  justify-content: center;
  flex:0 0 auto;
  width:40%;
}

/* レイアウト用の箱 */
.div-flex {
  /* レイアウトのルール */
  display: flex;
  /*flex-wrap:wrap;*/
  flex-flow:column;
  justify-content: center;
}

/* 画像 */
.div-flex img {
  /* 横幅 */
  width: 350px;
  /* 角丸 */
  border-radius: 10px;
}

/* 段落 */
.div-flex p {
  /* 文字の行間 */
  line-height: 180%;
  /* 左がわの余白 */
  /*margin-left: 20px;*/
  margin-top: 20px;
}

.subpg-thumb{
  width:500px;
  max-width:100%;
  margin:auto;
}

.subpg-thumb img{
  width:100%;
  border-radius: 10px;
}

.subpg-thumb video{
  width:100%;
  border-radius: 10px;
}
}

@media(max-height:500px){
  /* ヘッダー */
  .hdelem {
    display: table;
    /* 背景の色 */
    background-color:#16162e;
    /* 背景の画像 */
    /* background-image: url(img/bouquet-142876_640.jpg); */
    /* 背景の画像を枠いっぱいに広げる */
    background-size: cover;
    /* 内がわの余白 */
    /* 幅と高さ */
    width:100%;
    height:100vh;
  }

  .scrollprompt{
    top:calc(100vh - 70px);
  }
}