@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@100..900&display=swap");

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


/* EASYS
---------------------------------------------------------------------------------------------------- */
body{
  /* フォント Noto Serif 指定 */
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 500;
}
.facebook_banner{
  margin: 20px 0;
}
.facebook_banner img{
  height: auto;
  width: 100%;
}
.facebook_banner a img:hover{
  -khtml-opacity: .75;              /* Safari 1.x */
  -ms-filter: "alpha(opacity=75)";  /* ie 8 */
      filter: alpha(opacity=75);        /* ie lt 8 */
    -moz-opacity: .75;                 /* FF lt 1.5, Netscape */
         opacity: .75;
}
/*Googleカレンダー*/
.cal_wrapper{
  margin: 2.0833% auto;
  max-width: 960px; /* 最大幅 */
  min-width: 300px; /* 最小幅 */
}
.googlecal{
  height: 0;
  padding-bottom: 180%; /* 縦横比 */
  position: relative;
}
.googlecal iframe{
  box-sizing: border-box;
  height: 100% !important;
  left: 0;
  overflow-y: scroll;
  position: absolute;
  top: 0;
  width: 100% !important;
}
/* 画面幅が768px以上の場合の縦横比の指定 */
@media only screen and (min-width: 768px){
  .googlecal{
    padding-bottom: 75%;
  }
}
/*Youtube*/
.youtube_wrap{
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  padding-top: 30px;
  position: relative;
}
.youtube_wrap iframe{
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
/*「reCAPTCHAで保護されています」を非表示*/
.grecaptcha-badge{
  visibility: hidden;
}
/*「メディアを追加＞URL から挿入」を使用した際に作られる要素*/
iframe.wp-embedded-content{
  width: 100%;
}


/* デザインブロックのテンプレートパターン6種(PC/SP共通)
---------------------------------------------------------------------------------------------------- */
/* ----- 変数 ----- */
.template_db{
  --template_db-bg: #1e2021;/*背景*/
  --template_db-edge-color: #ffeb3b;/*パターン②の縁色*/
  --template_db-font-color: #e8e8e8;/*文字色*/
  --template_db-text-align-x: left;/*テキスト左右アライン*/
  --template_db-text-align-y: end;/*テキスト上下アライン*/
  --template_db-wh: max(100vw,100vh);
}
/* PCのみ */
html.pc .template_db{
  --template_db-image-padding: 5% 5% 10% 10%;/*イメージエリア余白*/
  --template_db-margin: calc(clamp(1300px,100vw,2000px)*(10/2000));
  --template_db-text-bg: rgba(0,0,0,.3);/*テキストエリア背景*/
  --template_db-text-padding: 2% 10% 5% 5%;/*テキストエリア余白*/
}
/* SPのみ */
html.sp .template_db{
  --template_db-image-padding: 10% 0 0 0;/*イメージエリア余白*/
  --template_db-margin: calc(100vw*(10/640));
  --template_db-text-padding: 2% 5% 10% 5%;/*テキストエリア余白*/
}
/* ----- 親 ----- */
.template_db{
  background: var(--template_db-bg);
  overflow: hidden;
  position: relative;
  width: 100%;
}
html.pc .template_db{
  align-items: var(--template_db-text-align-y);
  display: flex;
  height: 100vh;
  max-height: clamp(1300px,100vw,2000px);
}
html.sp .template_db{
  height: auto;
  padding: 0 !important;
}
/* ----- 子 ----- */
/* 画像 */
.template_db .db_image{
  box-sizing: border-box;
  left: 0;
  opacity: 1;
  padding: var(--template_db-image-padding);
  top: 0;
  width: 100%;
  z-index: 1;
}
html.pc .template_db .db_image{
  height: 100%;
  position: absolute;
}
html.sp .template_db .db_image{
  height: 100vh;
  max-height: 100vw;
  position: relative;
}
.template_db .db_image > div{
  height: 100%;
  position: relative;
  width: 100%;
}
.template_db .db_image > div img{
  object-fit: cover;
  position: absolute;
}
/* テキスト */
.template_db .db_text{
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  padding: var(--template_db-text-padding);
  position: relative;
  text-align: var(--template_db-text-align-x);
  width: 100%;
  z-index: 2;
}
html.pc .template_db .db_text{
  background: var(--template_db-text-bg);
}
.template_db .db_text > div{
  color: var(--template_db-font-color);
  line-height: normal;
}
/* ----- 孫 ----- */
/* タイトル */
.template_db .db_text .db_title{
  font-size: clamp(40px,4.0vw,60px);
  font-weight: bold;
}
/* コメント */
.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-size: clamp(14px,1.2vw,18px);
  font-weight: bold;
}
/* タイトル,コメント,ボタン間のマージン */
.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{
  opacity: 0;
  transition: opacity 700ms cubic-bezier(.23,1,.32,1) 0ms, transform 700ms cubic-bezier(.23,1,.32,1) 0ms;
  width: calc(50% - var(--template_db-margin));
}
.template_db.pattern1 .db_image > div img:nth-of-type(1){
  height: 100%;
  left: 0;
  top: 0;
  transform: translateX(100vw) rotateZ(10deg);
  transition-delay: calc(80ms*0);
}
.template_db.pattern1 .db_image > div img:nth-of-type(2){
  height: calc(50% - var(--template_db-margin));
  right: 0;
  top: 0;
  transform: translateX(100vw) rotateZ(15deg);
  transition-delay: calc(80ms*1);
}
.template_db.pattern1 .db_image > div img:nth-of-type(3){
  bottom: 0;
  height: calc(50% - var(--template_db-margin));
  right: 0;
  transform: translateX(100vw) rotateZ(20deg);
  transition-delay: calc(80ms*2);
}
.template_db.pattern1.on_screen .db_image > div img{
  opacity: 1;
  transform: translateX(0vw) rotateZ(0deg);
}
/* ----- パターン② ----- */
.template_db.pattern2 .db_image > div img{
  border: var(--template_db-margin) solid var(--template_db-edge-color);
  height: 70%;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.19,1,.22,1) 0ms, transform 900ms cubic-bezier(.19,1,.22,1) 0ms;
  width: 50%;
}
.template_db.pattern2 .db_image > div img:nth-of-type(1){
  left: -5%;
  top: -5%;
  transform: translate(50vw,-50vh) scale(.8) rotate(15deg);
  transition-delay: calc(30ms*0);
}
.template_db.pattern2.on_screen .db_image > div img:nth-of-type(1){
  transform: translate(0vw,0vh) scale(.8) rotate(-15deg);
}
.template_db.pattern2 .db_image > div img:nth-of-type(2){
  right: -5%;
  top: -5%;
  transform: translate(50vw,0vh) scale(.78) rotate(39deg);
  transition-delay: calc(30ms*1);
}
.template_db.pattern2.on_screen .db_image > div img:nth-of-type(2){
  transform: translate(0vw,0vh) scale(.78) rotate(13deg);
}
.template_db.pattern2 .db_image > div img:nth-of-type(3){
  bottom: 0;
  left: -3%;
  transform: translate(50vw,50vh) scale(.78) rotate(30deg);
  transition-delay: calc(30ms*2);
}
.template_db.pattern2.on_screen .db_image > div img:nth-of-type(3){
  transform: translate(0vw,0vh) scale(.78) rotate(10deg);
}
.template_db.pattern2 .db_image > div img:nth-of-type(4){
  bottom: -5%;
  right: 0;
  transform: translate(50vw,25vh) scale(.76) rotate(15deg);
  transition-delay: calc(30ms*3);
}
.template_db.pattern2.on_screen .db_image > div img:nth-of-type(4){
  transform: translate(0vw,0vh) scale(.76) rotate(-15deg);
}
.template_db.pattern2 .db_image > div img:nth-of-type(5){
  left: 50%;
  top: 40%;
  transform: translate(100%,0%) rotate(30deg);
  transition-delay: calc(30ms*4);
}
.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{
  height: 70%;
  left: 25%;
  opacity: 0;
  top: 5%;
  transform: rotateZ(-40deg);
  transform-origin: 50% 200%;
  transition: opacity 1200ms cubic-bezier(.25,1,.5,1) 0ms, transform 1200ms cubic-bezier(.25,1,.5,1) 0ms;
  width: 50%;
}
.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{
  --n: calc(var(--index) - 1);
  transform: rotateZ(calc(-30deg + (60deg/(var(--pattern3-data-img_cnt) - 1)*var(--n))));
}
.template_db.pattern3.on_screen .db_image > div img{
  opacity: 1;
}
/* ----- パターン④ ----- */
.template_db.pattern4 .db_image > div img{
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 700ms cubic-bezier(.23,1,.32,1) 0ms, transform 700ms cubic-bezier(.23,1,.32,1) 0ms;
}
.template_db.pattern4 .db_image > div img:nth-of-type(1){
  bottom: 0;
  height: 70%;
  left: 5%;
  transition-delay: calc(50ms*0);
  width: 80%;
}
.template_db.pattern4 .db_image > div img:nth-of-type(2){
  height: 50%;
  left: 25%;
  top: 15%;
  transition-delay: calc(50ms*1);
  width: 30%;
}
.template_db.pattern4 .db_image > div img:nth-of-type(3){
  height: 60%;
  right: 20%;
  top: 0;
  transition-delay: calc(50ms*2);
  width: 30%;
}
.template_db.pattern4 .db_image > div img:nth-of-type(4){
  bottom: 10%;
  height: 50%;
  right: 5%;
  transition-delay: calc(50ms*3);
  width: 20%;
}
.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(.5);
}
.template_db.pattern5 .db_image > div img:nth-of-type(1){
  animation-delay: calc(50ms*0) !important;
  height: calc(.25*var(--template_db-wh));
  left: calc(50% + .26*var(--template_db-wh));
  top: calc(50% + .07*var(--template_db-wh));
  width: calc(.25*var(--template_db-wh));
}
.template_db.pattern5 .db_image > div img:nth-of-type(2){
  animation-delay: calc(50ms*1) !important;
  height: calc(.35*var(--template_db-wh));
  left: calc(50% + .03*var(--template_db-wh));
  top: calc(50% - 0*var(--template_db-wh));
  width: calc(.35*var(--template_db-wh));
}
.template_db.pattern5 .db_image > div img:nth-of-type(3){
  animation-delay: calc(50ms*2) !important;
  height: calc(.3*var(--template_db-wh));
  left: calc(50% - .23*var(--template_db-wh));
  top: calc(50% - .05*var(--template_db-wh));
  width: calc(.3*var(--template_db-wh));
}
.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(.5);
  }
  60%{
    opacity: 1;
    transform: translate(-50%,-50%) scale(1.25);
  }
  80%{
    transform: translate(-50%,-50%) scale(.9);
  }
  100%{
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
  }
}
/* ----- パターン⑥ ----- */
.template_db.pattern6 .db_image > div img{
  -webkit-clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
          clip-path: polygon(0% 100%, 30% 0%, 100% 0%, 70% 100%);
  height: 100%;
  opacity: 0;
  top: 0;
  transform: translateX(100vw) rotateZ(25deg);
  transition: opacity 700ms cubic-bezier(.23,1,.32,1) 0ms, transform 700ms cubic-bezier(.23,1,.32,1) 0ms;
  width: 40%;
}
.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);
}