@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);
}