@charset "UTF-8";
/* ************************************** _
タイトル：nawa_edge.css
概要：テーブルサイネージ 名和店用css
更新：2023.05.08
_ ************************************** */
/* Imported Styles
---------------------------------------------------------------------------- */
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document ========================================================================== */
/** 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */
html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/* Sections ========================================================================== */
/** Remove the margin in all browsers. */
body { margin: 0; }
body {
  cursor: none;
}
/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content ========================================================================== */
/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { -webkit-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** Remove the gray background on active links in IE 10. */
a { background-color: transparent; }

/** 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Remove the border on images inside links in IE 10. */
img { border-style: none; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** Correct the inability to style clickable types in iOS and Safari. */
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Correct the padding in Firefox. */
fieldset { padding: 0.35em 0.75em 0.625em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Remove the default vertical scrollbar in IE 10+. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */
[type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding in Chrome and Safari on macOS. */
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Misc ========================================================================== */
/** Add the correct display in IE 10+. */
template { display: none; }

/** Add the correct display in IE 10. */
[hidden] { display: none; }

/* ========================================================================= _setting
============================================================================ */
/* kill 'Browser standard style'
---------------------------------------------------------------------------- */
body, h1, h2, h3, h4, h5, h6, div, p, span, ul, ol, li, dl, dt, dd, table, tr, th, td, form, select, option, address, pre, strong, em, figure { -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 100%; font-style: normal; font-weight: normal; margin: 0; padding: 0; text-decoration: none; }

/* Re style
---------------------------------------------------------------------------- */
* { -webkit-box-sizing: border-box; box-sizing: border-box; }
*::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }

html { font-size: 62.5%; }

a:link, a:visited { color: #003c80; text-decoration: none; }
a:hover, a:active { color: #005fcc; text-decoration: underline; }
a img { -webkit-transition: opacity .3s; transition: opacity .3s; }
a img:hover { -webkit-transition: opacity .3s; transition: opacity .3s; opacity: .7; }

em { font-style: normal; }

img { border: 0; height: auto; max-width: 100%; vertical-align: bottom; width: auto; }

li { list-style: none; }

p { margin-bottom: 20px; }

strong { font-weight: bold; }

table { border-collapse: collapse; }

:focus { outline: #cc0000 auto 1px; }

/* html5
---------------------------------------------------------------------------- */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

/* body
---------------------------------------------------------------------------- */
body { background-color: #fff; background-size: auto; color: #333; font-size: 1.8rem; font-family: "Noto Sans Japanese", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif, Arial, Helvetica; font-weight: 400; line-height: 1.25; overflow-x: hidden; }

/* 全体
---------------------------------------------------------------------------- */
@media all and (display-mode: standalone) { body { margin: 0; border: 5px solid black; } }
img { border: 0; height: auto; max-width: 100%; vertical-align: bottom; width: auto; }

.screen--full { max-width: 100%; width: 100%; }

.callMe { font-family: "Noto Sans Japanese", sans-serif; font-size: 2.5rem; font-weight: 900; font-display: swap; bottom: 30px; left: 0; margin: 0 auto; position: absolute; right: 0; text-align: center; }
.callMe2 { font-family: "Noto Sans Japanese", sans-serif; font-size: 2.5rem; font-weight: 900; font-display: swap; bottom: 30px; left: 0; margin: 0 auto; position: absolute; right: 0; text-align: center;color:#fff;  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.7); }

.floatBtn { position: fixed; right: 10px; top: 10px; width: 340px; z-index: 10; }
.floatBtn a { background: #cc0000; border-radius: 32px; color: #fff; display: flex; justify-content: center; align-items: center; height: 64px; opacity: 0.9; padding: 5px; transition: opacity 0.2s; }
.floatBtn a:hover, .floatBtn a:active, .floatBtn a:focus { opacity: 0.6; text-decoration: none; }
.floatBtn a p { margin: 0 10px; }
.floatBtn a img { height: 44px; width: 44px; }



/* ギャラリースライダー
---------------------------------------------------------------------------- */

.contents { 
  max-width: 2360px; 
  width: 100%;
  min-height: 768px; 
  height: 100vh; 
  padding: 3rem 0;
  overflow: hidden;
}
.page--campagin { 
  background: url("../images/bg.jpg") center top no-repeat;
  background-size: cover;
  overflow: hidden; 
}
.logo_Wrap {
  padding: 0 3rem;
}
.contents_Wrap {
  margin: 1rem auto;
  /* max-width: 1366px;
  width: 75%; */
  position: relative;
}

/* スライダー */
.swiper {
  overflow: visible!important;
  /* right: 111px; */
  display: none;
}
.swiper1 {
  margin-bottom: 50px;
}
.swiper-initialized {
  display: block;
}
.swiper-wrapper {
  height: 100%;
}
/* 真ん中だけ大きく左右の画像は小さくする */
.swiper-slide {
  transform: scale(0.7); /* 左右のスライドを小さくする */
  transition: .5s; /* ゆっくり小さくさせる */
  text-align: center;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
  height: 100vh;
  /* max-width: fit-content; */
}
.swiper-slide img {
  object-fit: cover; /* IE: not support */
  aspect-ratio: 3 / 2;
  height: auto;
  max-width: 100%;
  width: 100%;
}
.swiper-slide-active {
  transform: scale(1.0);
  z-index: 1;
  /* margin-left: 110px;
  margin-right: 128px !important; */
}
/* スライドのテキスト */
.swiper-slide p {
  color: #fff;
  font-size: 2.4rem;
  letter-spacing: 0.1rem;
  font-weight: 400;
  width: 100%;
  opacity: 0;
  position: absolute;
  z-index: 99;
  margin: 0;
  padding: 0;
  right: 0;
  left: 0;
  bottom: 5%;
  margin: auto;
  transform: scale(0.8);
  word-break: auto-phrase;
}
.swiper-slide-active p {
  animation-delay: 0.5s;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: fadeIn;
  /* background-color: #01799e;
  padding: 3px 12px 4px;
  width: fit-content; */
}

/* アニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    /* transform: translateX(100px); */
  }
  to {
    opacity: 1;
    /* transform: translateX(0); */
  }
}

/* テキスト背景 */
.swiper-slide-active::after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  background-image: linear-gradient( 360deg, rgb(51,51,51) 1%, rgba(255,255,255,0) 20%);
  position: absolute;  
  bottom: 0;
  left: 0;
  z-index: 10;
}

/* スライド一覧ページ */
.page--gallary {
  cursor: auto!important;
}
.slide_wrap {
  max-width: 1920px;
  width: 90%;
  margin: 100px auto;
}
.slide_ttl {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 60px;
}
.slide_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30px 15px;
}
.slide_list::after {
  content: '';
  width: 496px;
  display: block;
}
.slide_item {
  text-align: center;
  position: relative;
}
.slide_item_img img {
  /* max-width: 496px;
  max-height: 320px; */
  width: 496px;
  height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
  /* aspect-ratio: 31 / 20; */
  position: relative;
}
.slide_item_img::after {
  content: '';         /* 疑似要素に必須 */
  width: 100%;         /* 幅いっぱい */
  height: 100%;        /* 高さいっぱい */
  display: block;      /* 高さを指定するためにブロック要素にする */
  background-image: linear-gradient( 360deg, rgb(51,51,51) 1%, rgba(255,255,255,0) 40%);
  position: absolute;  
  bottom: 0;
  left: 0;
  z-index: 10;
}
.slide_item_txt {
  font-size: 20px;
  word-break: auto-phrase;
}
.slide_item_txt {
  color: #fff;
  font-size: 3.2rem;
  letter-spacing: 0.1rem;
  font-weight: 400;
  width: 100%;
  position: absolute;
  z-index: 99;
  margin: 0;
  padding: 0;
  right: 0;
  left: 0;
  bottom: 5%;
  margin: auto;
  transform: scale(0.8);
  word-break: auto-phrase;
}

@media screen and (max-width:800px) {
  .slide_wrap {
    width: 95%;
    margin: 50px auto;
  }
  .slide_ttl {
    font-size: 20px;
    margin-bottom: 30px;
  }
  .slide_list {
    gap: 20px 0;
  }
}