@charset "utf-8";

/*
 * PC スマホ共用CSS
 */


/* EASYS
---------------------------------------------------------------------------------------------------- */
.facebook_banner {
  margin: 20px 0;
}

.facebook_banner img {
  width: 100%;
  height: auto;
}

.facebook_banner a img:hover {
  opacity: 0.75;
  -ms-filter: "alpha(opacity=75)";
  /* ie 8 */
  filter: alpha(opacity=75);
  /* ie lt 8 */

  -moz-opacity: 0.75;
  /* FF lt 1.5, Netscape */
  -khtml-opacity: 0.75;
  /* Safari 1.x */
}

/*Googleカレンダー*/
.cal_wrapper {
  margin: 2.0833% auto;
  min-width: 300px;
  /* 最小幅 */
  max-width: 960px;
  /* 最大幅 */
}

.googlecal {
  position: relative;
  padding-bottom: 180%;
  /* 縦横比 */
  height: 0;
}

.googlecal iframe {
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
}

/* 画面幅が768px以上の場合の縦横比の指定 */
@media only screen and (min-width: 768px) {
  .googlecal {
    padding-bottom: 75%;
  }
}

/*Youtube*/
.youtube_wrap {
  position: relative;
  overflow: hidden;
  padding-top: 30px;
  padding-bottom: 56.25%;
  height: 0;
}

.youtube_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*「reCAPTCHAで保護されています」を非表示*/
.grecaptcha-badge {
  visibility: hidden;
}

/*「メディアを追加＞URL から挿入」を使用した際に作られる要素*/
iframe.wp-embedded-content {
  width: 100%;
}


/* デザインブロックのテンプレートパターン6種(PC/SP共通)
---------------------------------------------------------------------------------------------------- */
/* ----- 変数 ----- */
:root {
  --template_db-wh: max(100vw, 100vh);
}

html.pc {
  --template_db-margin: calc(clamp(1300px, 100vw, 2000px)*(10/2000));
}

html.sp {
  --template_db-margin: calc(100vw*(10/640));
}

/* ----- 親 ----- */
.template_db {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #1e2021;
}

html.pc .template_db {
  max-height: clamp(1300px, 100vw, 2000px);
  height: 100vh;
}

html.sp .template_db {
  padding: 0 !important;
  height: auto;
}

/* ----- 子 ----- */
/* 画像 */
.template_db .db_image {
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  opacity: 0.5;
}

html.pc .template_db .db_image {
  position: absolute;
  padding: 5% 5% 10% 10%;
  height: 100%;
}

html.sp .template_db .db_image {
  position: relative;
  padding: 10% 0 0 0;
  max-height: 100vw;
  height: 100vh;
}

.template_db .db_image>div {
  position: relative;
  width: 100%;
  height: 100%;
}

.template_db .db_image>div img {
  position: absolute;

  object-fit: cover;
}

/* テキスト */
.template_db .db_text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
}

html.pc .template_db .db_text {
  padding: 10% 10% 5% 5%;
  height: 100%;
}

html.sp .template_db .db_text {
  padding: 0 5% 10% 5%;
  height: auto;
}

.template_db .db_text>div {
  color: #e8e8e8;
  line-height: normal;
}

/* ----- 孫 ----- */
/* タイトル */
.template_db .db_text .db_title {
  font-weight: bold;
  font-size: clamp(40px, 4.0vw, 60px);
}

/* コメント */
.template_db .db_text .db_comment {
  font-size: clamp(14px, 1.2vw, 18px);
}

.template_db .db_text .db_comment p:not(:last-of-type) {
  margin-bottom: 1%;
}

/* ボタン */
.template_db .db_text .db_button {
  font-weight: bold;
  font-size: clamp(14px, 1.2vw, 18px);
}

/* タイトル,コメント,ボタン間のマージン */
.template_db .db_text>div:nth-last-of-type(1),
.template_db .db_text>div:nth-last-of-type(2) {
  margin-top: 1%;
}

/* ----- パターン① ----- */
.template_db.pattern1 .db_image>div img {
  width: calc(50% - var(--template_db-margin));
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.template_db.pattern1 .db_image>div img:nth-of-type(1) {
  top: 0;
  left: 0;
  height: 100%;
  transition-delay: calc(80ms*0);
  transform: translateX(100vw) rotateZ(10deg);
}

.template_db.pattern1 .db_image>div img:nth-of-type(2) {
  top: 0;
  right: 0;
  height: calc(50% - var(--template_db-margin));
  transition-delay: calc(80ms*1);
  transform: translateX(100vw) rotateZ(15deg);
}

.template_db.pattern1 .db_image>div img:nth-of-type(3) {
  right: 0;
  bottom: 0;
  height: calc(50% - var(--template_db-margin));
  transition-delay: calc(80ms*2);
  transform: translateX(100vw) rotateZ(20deg);
}

.template_db.pattern1.on_screen .db_image>div img {
  opacity: 1;
  transform: translateX(0vw) rotateZ(0deg);
}

/* ----- パターン② ----- */
.template_db.pattern2 .db_image>div img {
  width: 50%;
  height: 70%;
  border: var(--template_db-margin) solid #ffeb3b;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.19, 1, 0.22, 1) 0ms, transform 900ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}

.template_db.pattern2 .db_image>div img:nth-of-type(1) {
  top: -5%;
  left: -5%;
  transition-delay: calc(30ms*0);
  transform: translate(50vw, -50vh) scale(0.8) rotate(15deg);
}

.template_db.pattern2.on_screen .db_image>div img:nth-of-type(1) {
  transform: translate(0vw, 0vh) scale(0.8) rotate(-15deg);
}

.template_db.pattern2 .db_image>div img:nth-of-type(2) {
  top: -5%;
  right: -5%;
  transition-delay: calc(30ms*1);
  transform: translate(50vw, 0vh) scale(0.78) rotate(39deg);
}

.template_db.pattern2.on_screen .db_image>div img:nth-of-type(2) {
  transform: translate(0vw, 0vh) scale(0.78) rotate(13deg);
}

.template_db.pattern2 .db_image>div img:nth-of-type(3) {
  bottom: 0;
  left: -3%;
  transition-delay: calc(30ms*2);
  transform: translate(50vw, 50vh) scale(0.78) rotate(30deg);
}

.template_db.pattern2.on_screen .db_image>div img:nth-of-type(3) {
  transform: translate(0vw, 0vh) scale(0.78) rotate(10deg);
}

.template_db.pattern2 .db_image>div img:nth-of-type(4) {
  right: 0;
  bottom: -5%;
  transition-delay: calc(30ms*3);
  transform: translate(50vw, 25vh) scale(0.76) rotate(15deg);
}

.template_db.pattern2.on_screen .db_image>div img:nth-of-type(4) {
  transform: translate(0vw, 0vh) scale(0.76) rotate(-15deg);
}

.template_db.pattern2 .db_image>div img:nth-of-type(5) {
  top: 40%;
  left: 50%;
  transition-delay: calc(30ms*4);
  transform: translate(100%, 0%) rotate(30deg);
}

.template_db.pattern2.on_screen .db_image>div img:nth-of-type(5) {
  transform: translate(-50%, -50%) rotate(0deg);
}

.template_db.pattern2.on_screen .db_image>div img {
  opacity: 1;
}

/* ----- パターン③ ----- */
.template_db.pattern3 .db_image>div img {
  top: 5%;
  left: 25%;
  width: 50%;
  height: 70%;
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.25, 1, 0.5, 1) 0ms, transform 1200ms cubic-bezier(0.25, 1, 0.5, 1) 0ms;
  transform: rotateZ(-40deg);
  transform-origin: 50% 200%;
}

.template_db.pattern3.on_screen .db_image[data-img_cnt="3"] {
  --pattern3-data-img_cnt: 3;
}

.template_db.pattern3.on_screen .db_image[data-img_cnt="4"] {
  --pattern3-data-img_cnt: 4;
}

.template_db.pattern3.on_screen .db_image[data-img_cnt="5"] {
  --pattern3-data-img_cnt: 5;
}

.template_db.pattern3.on_screen .db_image[data-img_cnt="6"] {
  --pattern3-data-img_cnt: 6;
}

.template_db.pattern3.on_screen .db_image[data-img_cnt="7"] {
  --pattern3-data-img_cnt: 7;
}

.template_db.pattern3.on_screen .db_image>div img:nth-of-type(1) {
  --index: 1;
}

.template_db.pattern3.on_screen .db_image>div img:nth-of-type(2) {
  --index: 2;
}

.template_db.pattern3.on_screen .db_image>div img:nth-of-type(3) {
  --index: 3;
}

.template_db.pattern3.on_screen .db_image>div img:nth-of-type(4) {
  --index: 4;
}

.template_db.pattern3.on_screen .db_image>div img:nth-of-type(5) {
  --index: 5;
}

.template_db.pattern3.on_screen .db_image>div img:nth-of-type(6) {
  --index: 6;
}

.template_db.pattern3.on_screen .db_image>div img:nth-of-type(7) {
  --index: 7;
}

.template_db.pattern3.on_screen .db_image>div img {
  transform: rotateZ(calc(-30deg + (60deg/(var(--pattern3-data-img_cnt) - 1)*var(--n))));

  --n: calc(var(--index) - 1);
}

.template_db.pattern3.on_screen .db_image>div img {
  opacity: 1;
}

/* ----- パターン④ ----- */
.template_db.pattern4 .db_image>div img {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  transform: translateY(-100%);
}

.template_db.pattern4 .db_image>div img:nth-of-type(1) {
  bottom: 0;
  left: 5%;
  width: 80%;
  height: 70%;
  transition-delay: calc(50ms*0);
}

.template_db.pattern4 .db_image>div img:nth-of-type(2) {
  top: 15%;
  left: 25%;
  width: 30%;
  height: 50%;
  transition-delay: calc(50ms*1);
}

.template_db.pattern4 .db_image>div img:nth-of-type(3) {
  top: 0;
  right: 20%;
  width: 30%;
  height: 60%;
  transition-delay: calc(50ms*2);
}

.template_db.pattern4 .db_image>div img:nth-of-type(4) {
  right: 5%;
  bottom: 10%;
  width: 20%;
  height: 50%;
  transition-delay: calc(50ms*3);
}

.template_db.pattern4.on_screen .db_image>div img {
  opacity: 1;
  transform: translateY(0%);
}

/* ----- パターン⑤ ----- */
.template_db.pattern5 .db_image>div img {
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

.template_db.pattern5 .db_image>div img:nth-of-type(1) {
  top: calc(50% + 0.07*var(--template_db-wh));
  left: calc(50% + 0.26*var(--template_db-wh));
  width: calc(0.25*var(--template_db-wh));
  height: calc(0.25*var(--template_db-wh));
  animation-delay: calc(50ms*0) !important;
}

.template_db.pattern5 .db_image>div img:nth-of-type(2) {
  top: calc(50% - 0*var(--template_db-wh));
  left: calc(50% + 0.03*var(--template_db-wh));
  width: calc(0.35*var(--template_db-wh));
  height: calc(0.35*var(--template_db-wh));
  animation-delay: calc(50ms*1) !important;
}

.template_db.pattern5 .db_image>div img:nth-of-type(3) {
  top: calc(50% - 0.05*var(--template_db-wh));
  left: calc(50% - 0.23*var(--template_db-wh));
  width: calc(0.3*var(--template_db-wh));
  height: calc(0.3*var(--template_db-wh));
  animation-delay: calc(50ms*2) !important;
}

.template_db.pattern5.on_screen .db_image>div img {
  animation: scale-easeOutElastic 1000ms ease-out 0ms forwards;
}

@keyframes scale-easeOutElastic {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.25);
  }

  80% {
    transform: translate(-50%, -50%) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ----- パターン⑥ ----- */
.template_db.pattern6 .db_image>div img {
  top: 0;
  width: 40%;
  height: 100%;
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, transform 700ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  transform: translateX(100vw) rotateZ(25deg);

  -webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
  clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
}

.template_db.pattern6 .db_image>div img:nth-of-type(1) {
  left: 0;
  transition-delay: calc(40ms*0);
}

.template_db.pattern6 .db_image>div img:nth-of-type(2) {
  left: calc(50% - 20%);
  transition-delay: calc(40ms*1);
}

.template_db.pattern6 .db_image>div img:nth-of-type(3) {
  right: 0;
  transition-delay: calc(40ms*2);
}

.template_db.pattern6.on_screen .db_image>div img {
  opacity: 1;
  transform: translateX(0vw) rotateZ(0deg);
}


/* カスタマイズ：トップメインのギャラリーブロックを3Dカルーセルに変換する
---------------------------------------------------------------------------------------------------- */
.parent_carousel {
  --carousel_button_size: 4vw;
  /*ボタンサイズ*/
  --carousel_button_position: 1%;
  /*ボタン位置*/
  --carousel_perspective_y: 50% 90%;
  /*視点：上下*/
}

html.pc .parent_carousel {
  --carousel_width: 65%;
  /*画像横幅*/
  --carousel_gap: 15%;
  /*画像間隔*/
  --carousel_perspective_z: 1000px;
  /*PC視点：距離感*/
}

html.sp .parent_carousel {
  --carousel_width: 70%;
  /*画像横幅*/
  --carousel_gap: 15%;
  /*画像間隔*/
  --carousel_perspective_z: 640px;
  /*SP視点：距離感*/
}

.parent_carousel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.parent_carousel .carousel {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  cursor: grab;

  perspective: var(--carousel_perspective_z);
  perspective-origin: var(--carousel_perspective_y);
}

/* Safariの「transform-origin」のZ軸バグ対策 */
.parent_carousel .carousel .safari_bug {
  width: var(--carousel_width);

  transform-style: preserve-3d;
}

.parent_carousel .carousel figure {
  position: relative;
  z-index: 1;
  margin: 0;

  transform-style: preserve-3d;
}

.parent_carousel .carousel figure a {
  display: inline-block;
  margin: 0 var(--carousel_gap);
  width: calc(100% - (var(--carousel_gap) * 2));

  user-select: none;
  -webkit-user-drag: none;
}

.parent_carousel .carousel figure a:not(:first-of-type) {
  position: absolute;
  top: 0;
  left: 0;
}

.parent_carousel .carousel figure a img {
  width: 100%;
  pointer-events: none;

  user-select: none;
  -webkit-user-drag: none;
}

/* ページングボタン */
.parent_carousel .carousel button {
  position: absolute;
  top: 50%;
  z-index: 2;
  padding: 0;
  width: var(--carousel_button_size);
  height: var(--carousel_button_size);
  border: none;
  cursor: pointer;
  transform: translateY(-50%);
}

html.sp .parent_carousel .carousel button {
  display: none;
}

.parent_carousel .carousel button:hover {
  opacity: 0.8;
}

.parent_carousel .carousel button.prev {
  left: var(--carousel_button_position);
  background: transparent url(/files/carousel_button_prev.png) center / cover;
}

.parent_carousel .carousel button.next {
  right: var(--carousel_button_position);
  background: transparent url(/files/carousel_button_next.png) center / cover;
}