/* font face
------------------------------------------------------------------------------*/

@font-face {
  font-family: '';
  src: url();
}

/* keyframes
------------------------------------------------------------------------------*/

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* global
------------------------------------------------------------------------------*/

html {
  font: 100%/1.2 Helvetica, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  border: 0;
}

a {
  outline: 0;
  text-decoration: none;
}

p {
  line-height: 1.6;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.inner {
  margin: 0 auto;
  max-width: 1024px;
  overflow: hidden;
  position: relative;
}

.url {
  word-break: break-all;
}

.img {
  text-align: center;
}

.img img {
  max-width: 100%;
  vertical-align: top;
}

/* iframe --- 2022.7.28 追加
------------------------------------------------------------------------------*/

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

iframe {
  border: none;
}

/* inline-banner.cssとセットで必要（レスポンシブ補助）
--------------------------------------*/

.iframe-wrap {
  height: 0;
  margin: 0 auto;
  max-width: 380px;
  padding-top: 38%;
  position: relative;
}

.ifr-info-web,
.ifr-info-tel {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

@media screen and (max-width: 960px) {
  /*--- 表示領域が960px以下の場合に適用するスタイル ---*/
  .iframe-wrap {
    padding-top: 158px;
  }
}

@media screen and (max-width: 870px) {
  /*--- 表示領域が870px以下の場合に適用するスタイル ---*/
  .iframe-wrap {
    padding-top: 43%;
  }
}

@media screen and (max-width: 600px) {
  /*--- 表示領域が600px以下の場合に適用するスタイル ---*/
  .iframe-wrap {
    padding-top: 152px;
  }
}

@media screen and (max-width: 410px) {
  /*--- 表示領域が410px以下の場合に適用するスタイル ---*/
  .iframe-wrap {
    padding-top: 43%;
  }
}

/* form
------------------------------------------------------------------------------*/

/* text
--------------------------------------*/

.input-text {
  background: #fff;
  border: #ccc solid 1px;
  border-radius: 2px;
  overflow: hidden;
  padding: 6px 24px 4px 8px;
  position: relative;
}

.input-text.focused {
  border-color: #34aadc;
}

.input-text>.ph {
  color: #ccc;
  display: inline-block;
  left: 8px;
  line-height: 1.2;
  position: absolute;
  top: 6px;
}

.input-text.focused>.ph,
.input-text.entered>.ph {
  display: none;
}

.input-text>input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  line-height: 1.2;
  margin: 0;
  outline: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

/* textarea
--------------------------------------*/

.textarea {
  background: #fff;
  border: #ccc solid 1px;
  border-radius: 2px;
  overflow: hidden;
  padding: 0 0 0 8px;
  position: relative;
}

.textarea.focused {
  border-color: #34aadc;
}

.textarea>.ph {
  color: #ccc;
  left: 8px;
  line-height: 1.4;
  padding: 8px 0;
  position: absolute;
  top: 0;
  width: 98%;
}

.textarea.focused>.ph,
.textarea.entered>.ph {
  display: none;
}

.textarea>textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  height: 4.8em;
  line-height: 1.4;
  margin: 0;
  outline: 0;
  padding: 8px 1% 8px 0;
  position: relative;
  resize: none;
  width: 99%;
}

/* button
--------------------------------------*/

.button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  outline: 0;
  padding: 0;
}

/* image
------------------------------------------------------------------------------*/

/* fit-img
--------------------------------------*/

.fit-img {
  height: 300px;
  overflow: hidden;
}

.fit-img>.f {
  height: 100%;
  text-align: center;
  width: 100%;
}

.fit-img>.f:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.fit-img>.f>img {
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
}

/* 管理画面から制御の「image photo」表示 --- 2025.6.5 追加
--------------------------------------*/

.image-wrap-box {/* .overlay--none（default設定）が選択されているときの挙動 */
  display: inline;
}

.image-wrap-box.overlay--mode-a1,
.image-wrap-box.overlay--mode-a2 {
  display: inline-block;
  position: relative;
}

.image-wrap-box .overlay-txt {
  bottom: 3px;
  color: #333;/* default */
  display: none;/* 通常では .overlay--none（画像に何も入れない）が選択されているはずなので表示は隠しておく */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  font-size: 11px;
  position: absolute;
  right: 6px;
  z-index: 3;
}

.image-wrap-box:not(.overlay--none) .overlay-txt {/* .overlay--none（画像に何も入れない）の選択以外で表示 */
  display: block;
}

.image-wrap-box.overlay--mode-a1 .overlay-txt {/* font color: black系 */
  color: #333;
}

.image-wrap-box.overlay--mode-a2 .overlay-txt {/* font color: white系 */
  color: #eee;
}

/* <a>タグのhref属性が「tel:」である場合の挙動 --- 2024.10.28 追加
------------------------------------------------------------------------------*/

.js_tel-pointer-events {
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  /*--- 表示領域が767px以下の場合に適用するスタイル ---*/
  .js_tel-pointer-events {
    pointer-events: auto;
  }
}