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

/*
 * 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共通)
---------------------------------------------------------------------------------------------------- */
/* ----- 変数 ----- */
.template_db {
  --template_db-bg: #1e2021;/*背景*/
  --template_db-font-color: #e8e8e8;/*文字色*/
  --template_db-edge-color: #ffeb3b;/*パターン②の縁色*/
  --template_db-text-align-y: end;/*テキスト上下アライン*/
  --template_db-text-align-x: left;/*テキスト左右アライン*/
  --template_db-wh: max(100vw,100vh);
}
/* PCのみ */
html.pc .template_db {
  --template_db-image-padding: 5% 5% 10% 10%;/*イメージエリア余白*/
  --template_db-text-padding: 2% 10% 5% 5%;/*テキストエリア余白*/
  --template_db-text-bg: rgba(0,0,0,0.3);/*テキストエリア背景*/
  --template_db-margin: calc(clamp(1300px,100vw,2000px)*(10/2000));
}
/* SPのみ */
html.sp .template_db {
  --template_db-image-padding: 10% 0 0 0;/*イメージエリア余白*/
  --template_db-text-padding: 2% 5% 10% 5%;/*テキストエリア余白*/
  --template_db-margin: calc(100vw*(10/640));
}
/* ----- 親 ----- */
.template_db {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--template_db-bg);
}
html.pc .template_db {
  display: flex;
  align-items: var(--template_db-text-align-y);
  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;
  padding: var(--template_db-image-padding);
  width: 100%;
  opacity: 1;
}
html.pc .template_db .db_image {
  position: absolute;
  height: 100%;
}
html.sp .template_db .db_image {
  position: relative;
  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;
  padding: var(--template_db-text-padding);
  width: 100%;
  text-align: var(--template_db-text-align-x);
}
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-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 var(--template_db-edge-color);
  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);
}


/*  フォント
---------------------------------------------------------------------------------------------------- */
body {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}


/*  全体にフェードインアニメーション
---------------------------------------------------------------------------------------------------- 
#outer_block .easys_content_inner,
#outer_block .post_data,
#outer_block .read_more_btn,
#outer_block .entry_title,
#outer_block .table_area,
#outer_block .html_post,
#outer_block .entry_post,
#outer_block .main_btn {
  opacity: 0;
  transition: transform 1.0s ease 0s, opacity 1.0s ease 0s;
  transform: translateY(30px);
}
#outer_block .moved:not(.design_block) {
  opacity: 1;
  transform: translateY(0);
}
*/

/* ============================== oki専用CSS ============================== */
/* html.okieasys はoki版の場合のみ<html>に付与されるクラス */
/*  全体にフェードインアニメーション（oki専用）
---------------------------------------------------------------------------------------------------- */
html.okieasys #outer_block .easys_content_inner,
html.okieasys #outer_block .post_data,
html.okieasys #outer_block .read_more_btn,
html.okieasys #outer_block .entry_title,
html.okieasys #outer_block .table_area,
html.okieasys #outer_block .html_post,
html.okieasys #outer_block .entry_post,
html.okieasys #outer_block .main_btn {
  opacity: 0;
  transition: transform 1.0s ease 0s, opacity 1.0s ease 0s;
  transform: translateY(30px);
}
html.okieasys #outer_block .moved:not(.design_block) {
  opacity: 1;
  transform: translateY(0);
}

/* フェードイン除外 */
html.okieasys #outer_block .easys_content.nd_01.no_margin div:not(.design_block),
html.okieasys #outer_block #z48jozlomaq0g9k09qhm div:not(.design_block) {
  opacity: 1;
  filter: none !important;
  transition: none;
  transform: none !important;
}

/* トップ＆ティザーの簡易デザインブロック化カスタマイズ：ティザーブロックのアニメーション・フィルターを無効化 */
html.okieasys #od4a6curaddfejzin1sg .easys_content_inner,
html.okieasys #eg173hsqjyn64ycxkgbp .easys_content_inner,
html.okieasys #s5cyix273fa9omefdzo8 .easys_content_inner,
html.okieasys #fyys2q27qgxb3deo66yv .easys_content_inner,
html.okieasys #vn0r9qqlo5pn8nlda6km .easys_content_inner,
html.okieasys #od4a6curaddfejzin1sg .easys_content_inner .entry_post,
html.okieasys #eg173hsqjyn64ycxkgbp .easys_content_inner .entry_post,
html.okieasys #s5cyix273fa9omefdzo8 .easys_content_inner .entry_post,
html.okieasys #fyys2q27qgxb3deo66yv .easys_content_inner .entry_post,
html.okieasys #vn0r9qqlo5pn8nlda6km .easys_content_inner .entry_post {
  opacity: 1;
  filter: none !important;
  transition: none;
  transform: none !important;
}

/* 中ページでリンクボタン削除 */
html.okieasys body:not(#page_6) #n3mi3ai8ifsnctrxioue .design_id_63-btn {
  display: none;
}



/* 翻訳 */
/* フラッグ変更（共通） */
body #flags a,
body .tool-container .tool-items a,
body a.single-language span {
  height: 50px !important;
  width: 100% !important;
  background: none transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: 0 !important;
  color: #000212;
  font-size: 14px;
  line-height: 1;
  position: relative;
  margin: 0;
}

#flags.size24 a.united-states[title="English"],
.tool-container a.united-states[title="English"],
a.single-language.united-states[title="English"] span.size24 {
  background: none transparent !important;
}

.tool-items a:hover {
  color: #00cd3a;
}

/* 英語 */
#flags.size24 a.united-states[title="English"]::before,
.tool-container a.united-states[title="English"]::before,
a.single-language.united-states[title="English"] span.size24::before {
  content: "English";
}

/* 中国語（簡体字） */
#flags a[title="Chinese (Simplified)"]::before,
.tool-container .tool-items a[title="Chinese (Simplified)"]::before,
a.single-language[title="Chinese (Simplified)"] span::before {
  content: "简体中文";
}



/* 中国語（繁体字）*/
#flags a[title="Chinese (Traditional)"]::before,
.tool-container .tool-items a[title="Chinese (Traditional)"]::before,
a.single-language[title="Chinese (Traditional)"] span::before {
  content: "繁體中文";
}

/* インドネシア語 */
#flags a[title="Indonesian"]::before,
.tool-container .tool-items a[title="Indonesian"]::before,
a.single-language[title="Indonesian"] span::before {
  content: "Bahasa Indonesia";
}

/* ベトナム語 */
#flags a[title="Vietnamese"]::before,
.tool-container .tool-items a[title="Vietnamese"]::before,
a.single-language[title="Vietnamese"] span::before {
  content: "Tiếng Việt";
}
/* 韓国語 */
#flags a[title="Korean"]::before,
.tool-container .tool-items a[title="Korean"]::before,
a.single-language[title="Korean"] span::before {
  content: "한국어";
}

/* 日本語 */
#flags a[title="Japanese"]::before,
.tool-container .tool-items a[title="Japanese"]::before,
a.single-language[title="Japanese"] span::before {
  content: "日本語";
}




/*画面遷移アニメーション（ローディング）
---------------------------------------*/
/* JSのopenLoading()が呼ばれるまで、CSS側でも確実に非表示にしておく */
#page_6 #Wrap,
#page_6 #wrapper {
  opacity: 0;
}

/* 黒幕：html::before(CSSの疑似要素)にすることでJSの実行を待たず最初から画面を覆う。ローディング開始と同時にフェードアウト */
/* :has()でbody#page_6の時だけ発動させる(#page_6以外では真っ黒にならない) */
html:has(body#page_6)::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 1;
  pointer-events: none;
  transition: opacity 6s ease;
}
html.progress_started:has(body#page_6)::before {
  opacity: 0;
}




#progress {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 999;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  pointer-events: none;
}

#progress .progress_image_wrap {
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}



/* 地球儀ロゴ画像 */
#progress .progress_image_wrap #progress_image {
  position:unset !important;
  width:100vw;
  height:100vh;
  transform-origin:center center;
  object-fit:cover;
  opacity:0;
  transform:scale(1);
}
/* .is_showが付くと同時に、1.5秒かけて真っ暗からフェードイン→続けて3秒かけてズーム(合計4.5秒) */
#progress .progress_image_wrap.is_show #progress_image {
  animation: progress_intro_pc 4.5s ease-out forwards;
}
@keyframes progress_intro_pc {
  0% {
    opacity:0;
    transform:scale(1);
  }
  33.34% {
    opacity:0;
    transform:scale(1);
  }
  100% {
    opacity:1;
    transform:scale(2);
  }
}

.sp #progress .progress_image_wrap.is_show #progress_image {
  animation: progress_intro_sp 4.5s ease-out forwards;
}
@keyframes progress_intro_sp {
  0% {
    opacity:0;
    transform:scale(1);
  }
  33.34% {
    opacity:0;
    transform:scale(1);
  }
  100% {
    opacity:1;
    transform:scale(1.5);
  }
}


/*ローディング終了時の白フラッシュ演出
---------------------------------------------------------------------------------------------------- */
#progress_flash {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}
#progress_flash.is_flash {
  animation: progress_flash_anim 1.5s ease-in-out forwards;
}
@keyframes progress_flash_anim {
  0% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}