@charset "UTF-8";
/*note: INDEXの表示は、コメントの「 index: 」でハイライト表示してください。*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: Google Fonts読み込み */
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap");
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: 外部ファイルの読み込み */
/*note: INDEXの表示は、コメントの「 index: 」でハイライト表示してください。*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: リセットCSS と body要素の文字（色・書体）と背景色*/
/* Body要素の背景色 */
/* Body要素の文字色 */
/* Body要素の書体 */
/* リセット用のプレイスフォルダ */
body, html, div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  border: 0;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

body {
  line-height: 1;
}

body, html {
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  background-color: #fff;
  color: #006367;
}
body a {
  color: #333;
}

body {
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
  font-size: 100%;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.8;
}

/* リセット処理関数 */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: メディアクエリー*/
/* 切り替えポイントの設定 */
/* 処理 */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: クリアフィックス*/
/* Class と ステークホルダー の名称設定 */
/* 処理 */
body:after, html:after, .clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: スクリーンリーダー*/
/* スクリーンリーダーテキスト の名称設定 */
/* 処理 */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
}

/*
WYSIWYGエディタに関わる部分の設定し、ステークホルダーにてサイトの随所で再利用します。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
NOTE

・ リセットCSS適用後に再設定するための定義です。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
INDEX

#01 要素の基本定義

	#01-01 Colors
		font-color
		background-color
		background-image
		border-color（ top, right, bottom, left ）

	#01-02 font-family
		font-family
		@include (WebFontの読み込み)

	#01-03 border-style
		border-style

	#01-04 Fonts ( font-color font-family 以外を定義 )
		font
		line-height
		…

	#01-03 Box Model (梱包される親の横幅を100％使った時の定義)
		margin
		border-size
		padding
		…

	#01-05 layout
		display
		width
		height
		float
		…

#02 WYSIWYG部分の設定

/*
┌─────────────────────────────
│ #01 要素の基本定義
│
*/
/*
┌─────────────────────────────
│ #02 WYSIWYG部分の設定
│
*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: リセットCSS と サイトの初期設定 */
:focus {
  outline: 0;
}

ol,
ul {
  list-style: none;
}

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

caption,
th,
td {
  font-weight: normal;
  text-align: left;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: "" "";
}

a img {
  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html {
  font-size: 62.5%;
  font-weight: 300;
}
html * {
  box-sizing: border-box;
}

body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-feature-settings: "palt";
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}
@media only screen and (max-width: 1024px) {
  body {
    font-size: 2.0833333333vw;
  }
}
@media only screen and (max-width: 640px) {
  body {
    font-size: 4.2666666667vw;
  }
}

small {
  font-size: clamp(12px, 1.9765739385vw, 21px);
}

strong,
b {
  font-weight: bold;
}

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

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  pointer-events: none;
}

figure {
  margin: 0;
}

@media only screen and (max-width: 640px) {
  .nosp {
    display: none !important;
  }
}

.nopc {
  display: none !important;
}
@media only screen and (max-width: 640px) {
  .nopc {
    display: block !important;
  }
}

.t_center {
  text-align: center;
}

.flex,
.flex-box {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.flex.reverse,
.flex-box.reverse {
  flex-flow: row-reverse;
}
.flex.wrap,
.flex-box.wrap {
  flex-wrap: wrap;
}

.container {
  max-width: 1100px;
  width: 90%;
  margin: auto;
}

.anchor {
  display: block;
  padding-top: 90px;
  margin-top: -90px;
}
@media only screen and (max-width: 640px) {
  .anchor {
    padding-top: 0;
    margin-top: 0;
  }
}

hr {
  border-color: #9e9e9f;
}

.label {
  border: 2px solid;
  display: inline-block;
  padding: 0.5em;
  line-height: 1;
}

.vertical_rl {
  writing-mode: vertical-rl;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: parts用の外部ファイル読み込み */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: header　ヘッダー */
.header {
  width: 100%;
  padding: 0;
  position: fixed;
  z-index: 888;
  left: 0;
  top: 0;
  background-color: #fff;
}
@media only screen and (max-width: 640px) {
  .header {
    top: unset;
    bottom: 0;
  }
}
.header-wrapper {
  height: 90px;
}
@media only screen and (max-width: 1024px) {
  .header-wrapper {
    height: 70px;
  }
}
@media only screen and (max-width: 640px) {
  .header-wrapper {
    height: 0;
  }
}
.admin-bar .header {
  margin-top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .header {
    margin-top: 0;
  }
}

.header-inner {
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo {
  margin-left: 4rem;
}
@media only screen and (max-width: 1024px) {
  #logo {
    margin-left: 5%;
  }
}
#logo img {
  width: 420px;
  height: 40px;
}
@media only screen and (max-width: 1024px) {
  #logo img {
    width: 250px;
    height: auto;
  }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: header　グローバルナビ */
#nav {
  width: 100%;
  margin: 3rem 0;
}
@media screen and (max-width: 782px) {
  #nav {
    margin: 2.4rem 0;
  }
}
#nav .list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
@media only screen and (max-width: 1024px) {
  #nav .list {
    gap: 2rem;
  }
}
@media only screen and (max-width: 640px) {
  #nav .list {
    gap: 1rem;
  }
}
#nav .list a {
  text-decoration: none;
  color: #333;
  display: block;
  font-size: clamp(13px, 1.6105417277vw, 22px);
  font-weight: 500;
  word-break: keep-all;
}
#nav .list a.hover {
  opacity: 0.8;
}
#nav .list .entry-nav {
  width: 220px;
  padding: 0;
}
@media only screen and (max-width: 1024px) {
  #nav .list .entry-nav {
    margin-left: auto;
    display: block;
  }
}
@media only screen and (max-width: 640px) {
  #nav .list .entry-nav {
    width: 110px;
  }
}
#nav .list .entry-nav .entry-btn {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #3171b3;
  text-align: center;
  text-decoration: none;
  transition: 0.4s ease-out;
}
@media only screen and (max-width: 1024px) {
  #nav .list .entry-nav .entry-btn {
    height: 70px;
  }
}
@media only screen and (max-width: 640px) {
  #nav .list .entry-nav .entry-btn {
    height: 60px;
    font-weight: bold;
  }
}
#nav .list .entry-nav .entry-btn.hover {
  opacity: 0.8;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: ページトップボタン*/
#pagetop {
  display: none !important;
  position: fixed;
  right: 1pc;
  bottom: 2.5pc;
  width: 60px;
  height: 60px;
  background-color: #fff;
  z-index: 100;
  border: 1px solid #3171b3;
  border-radius: 50%;
}
@media only screen and (max-width: 1024px) {
  #pagetop {
    width: 60px;
    height: 60px;
    bottom: 1.5pc;
  }
}
@media only screen and (max-width: 640px) {
  #pagetop {
    width: 50px;
    height: 50px;
    bottom: 10px;
    right: 10px;
    display: none !important;
  }
}
#pagetop .pagetop {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
#pagetop .pagetop::before {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  border-top: 1px solid #3171b3;
  border-right: 1px solid #3171b3;
  top: 10px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 100;
  transform: rotateZ(-45deg);
}
@media only screen and (max-width: 640px) {
  #pagetop .pagetop::before {
    width: 15px;
    height: 15px;
    top: 10px;
  }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: 共通フッター*/
.footer {
  background: #50b99a;
  color: #fff;
}
@media only screen and (max-width: 640px) {
  .footer {
    margin-bottom: 60px;
  }
}
.footer .container {
  max-width: 1280px;
  padding: 4rem 0 6rem;
}
.footer .box_wrap {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 640px) {
  .footer .box_wrap {
    flex-direction: column;
  }
}
.footer .box1 {
  width: 40.2635431918vw;
}
@media only screen and (max-width: 640px) {
  .footer .box1 {
    width: 100%;
  }
}
.footer .box2 {
  width: 51.2445095168vw;
}
@media only screen and (max-width: 640px) {
  .footer .box2 {
    width: 100%;
  }
}
.footer .flex {
  align-items: center;
  gap: 1rem;
}
.footer .logo {
  width: 112px;
  height: 112px;
}
.footer .title {
  font-size: clamp(15px, 2.196193265vw, 30px);
  font-weight: normal;
}
.footer .place {
  font-size: clamp(15px, 1.317715959vw, 18px);
  margin-bottom: 2rem;
  font-weight: normal;
}
.footer .address {
  font-size: clamp(12px, 1.317715959vw, 18px);
  font-weight: normal;
}
.footer .organized {
  margin-bottom: 1rem;
}
.footer .note {
  border: 3px solid #fff;
  padding: 2rem;
  font-weight: normal;
}
.footer .note li {
  font-size: clamp(12px, 1.1713030747vw, 16px);
  display: inline-block;
  padding-left: 1.2em;
  text-indent: -1.2em;
}
.footer .copyright {
  text-align: center;
  margin-top: 3rem;
}
.footer .copyright small {
  font-size: 1.2rem;
  font-size: clamp(10px, 1.25vw, 16px);
  font-weight: normal;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: パンくずリスト*/
.header-breadcrumb {
  width: 90%;
  margin: 0 auto;
  padding: 1em 0;
  font-size: 1.2rem;
  max-width: 1080px;
}
.header-breadcrumb-wrapper {
  background-color: #f3f5f7;
}
.header-breadcrumb li {
  display: inline-block;
}
.header-breadcrumb li + li:before {
  content: "／";
  padding: 0 0.5em 0 1em;
}
.header-breadcrumb li a {
  color: #00a199;
  text-decoration: none;
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: セクションタイトル */
.headline h1,
.headline h2 {
  font-size: clamp(20px, 2.0833333333vw, 30px);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: 縦書き */
.vertical_writing_en {
  position: relative;
}
.vertical_writing_en img {
  width: 90px;
  position: absolute;
  top: 0;
}

.sec2 .container, .sec1 .container {
  overflow: visible;
  position: relative;
}
.sec2 .container .vertical_rl, .sec1 .container .vertical_rl {
  position: absolute;
  color: #fff;
  font-size: clamp(18px, 2.7818448023vw, 38px);
  letter-spacing: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  line-height: 1;
  top: 4.2884333821vw;
  left: -3.5%;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .vertical_rl, .sec1 .container .vertical_rl {
    display: none;
  }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: タイトルアニメーション */
.title-bgr,
.title-bgl {
  margin: 20px 0;
  overflow: hidden;
}
.title-bgr > *,
.title-bgl > * {
  max-width: 960px;
  margin: auto;
}
.title-bgr h2,
.title-bgr h3,
.title-bgl h2,
.title-bgl h3 {
  position: relative;
  z-index: 1;
  color: #fff;
  display: inline-block;
  padding: 10px 15px;
}
@media only screen and (max-width: 640px) {
  .title-bgr h2,
  .title-bgr h3,
  .title-bgl h2,
  .title-bgl h3 {
    padding: 10px 20px;
    font-size: 1em;
  }
}
.title-bgr h2:before,
.title-bgr h3:before,
.title-bgl h2:before,
.title-bgl h3:before {
  position: absolute;
  content: "";
  background-color: #00a199;
  transition: width 0.5s ease-in-out 0.5s;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0;
  height: 100%;
  z-index: -1;
}
.title-bgr h2 span,
.title-bgr h3 span,
.title-bgl h2 span,
.title-bgl h3 span {
  transition: opacity 1s ease-in-out 1s;
  opacity: 0;
}
.title-bgr.active h2:before,
.title-bgr.active h3:before,
.title-bgl.active h2:before,
.title-bgl.active h3:before {
  will-change: auto;
  width: 100vw;
}
.title-bgr.active h2 span,
.title-bgr.active h3 span,
.title-bgl.active h2 span,
.title-bgl.active h3 span {
  opacity: 1;
}

.title-bgr > * {
  text-align: right;
}
.title-bgr h2:before,
.title-bgr h3:before {
  left: 0;
}

.entry-contents .block_title-bgl,
.entry-contents .block_title-bgr {
  max-width: 100%;
  width: 100%;
  position: relative;
}
@media only screen and (max-width: 640px) {
  .entry-contents .block_title-bgl,
  .entry-contents .block_title-bgr {
    padding: 0;
  }
}
.block_title-bgl .wp-block-image,
.block_title-bgr .wp-block-image {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 640px) {
  .block_title-bgl .wp-block-image,
  .block_title-bgr .wp-block-image {
    padding: 0 25px;
  }
}
.block_title-bgl .wp-block-image + .title-bgl-wrapper,
.block_title-bgl .wp-block-image + .title-bgr-wrapper,
.block_title-bgr .wp-block-image + .title-bgl-wrapper,
.block_title-bgr .wp-block-image + .title-bgr-wrapper {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
}
@media only screen and (max-width: 640px) {
  .block_title-bgl .wp-block-image + .title-bgl-wrapper,
  .block_title-bgl .wp-block-image + .title-bgr-wrapper,
  .block_title-bgr .wp-block-image + .title-bgl-wrapper,
  .block_title-bgr .wp-block-image + .title-bgr-wrapper {
    position: relative;
  }
}
.block_title-bgl .wp-block-image + .title-bgl-wrapper .title-bgr h2,
.block_title-bgl .wp-block-image + .title-bgl-wrapper .title-bgr h3,
.block_title-bgl .wp-block-image + .title-bgr-wrapper .title-bgr h2,
.block_title-bgl .wp-block-image + .title-bgr-wrapper .title-bgr h3,
.block_title-bgr .wp-block-image + .title-bgl-wrapper .title-bgr h2,
.block_title-bgr .wp-block-image + .title-bgl-wrapper .title-bgr h3,
.block_title-bgr .wp-block-image + .title-bgr-wrapper .title-bgr h2,
.block_title-bgr .wp-block-image + .title-bgr-wrapper .title-bgr h3 {
  min-width: 50%;
  margin-bottom: 0;
  text-align: left;
}
@media only screen and (max-width: 640px) {
  .block_title-bgl .wp-block-image + .title-bgl-wrapper .title-bgr h2,
  .block_title-bgl .wp-block-image + .title-bgl-wrapper .title-bgr h3,
  .block_title-bgl .wp-block-image + .title-bgr-wrapper .title-bgr h2,
  .block_title-bgl .wp-block-image + .title-bgr-wrapper .title-bgr h3,
  .block_title-bgr .wp-block-image + .title-bgl-wrapper .title-bgr h2,
  .block_title-bgr .wp-block-image + .title-bgl-wrapper .title-bgr h3,
  .block_title-bgr .wp-block-image + .title-bgr-wrapper .title-bgr h2,
  .block_title-bgr .wp-block-image + .title-bgr-wrapper .title-bgr h3 {
    display: block;
    margin-left: 25px;
  }
}
.block_title-bgl .wp-block-image + .title-bgl-wrapper .title-bgl h2,
.block_title-bgl .wp-block-image + .title-bgl-wrapper .title-bgl h3,
.block_title-bgl .wp-block-image + .title-bgr-wrapper .title-bgl h2,
.block_title-bgl .wp-block-image + .title-bgr-wrapper .title-bgl h3,
.block_title-bgr .wp-block-image + .title-bgl-wrapper .title-bgl h2,
.block_title-bgr .wp-block-image + .title-bgl-wrapper .title-bgl h3,
.block_title-bgr .wp-block-image + .title-bgr-wrapper .title-bgl h2,
.block_title-bgr .wp-block-image + .title-bgr-wrapper .title-bgl h3 {
  min-width: 50%;
  margin-bottom: 0;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: リード */
.lead {
  text-align: center;
  font-weight: bold;
}
@media only screen and (max-width: 640px) {
  .lead {
    text-align: left;
  }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: table */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: テーブルスタイル */
.table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto 60px;
}
.table tr {
  border-bottom: 1px solid #fff;
}
.table th,
.table td {
  color: #fff;
  padding: 10px;
  padding-left: 0;
  word-break: break-word;
}
@media only screen and (max-width: 640px) {
  .table th,
  .table td {
    padding: 6px;
    padding-left: 0;
  }
}
.table th {
  color: #fff;
  width: 125px;
}
@media only screen and (max-width: 640px) {
  .table th {
    width: 100px;
  }
}
.table td {
  font-size: clamp(12px, 0.9722222222vw, 14px);
}

/*========= レイアウトのためのCSS ===============*/
.bgextend,
.lineTrigger {
  width: 100%;
  box-sizing: border-box;
}

/*==================================================
ふわっ
===================================*/
/* fadeDown */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
}

/*==================================================
ぱたっ
===================================*/
/* flipDown */
.flipDown {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1;
  }
}
/* flipLeft */
.flipLeft {
  animation-name: flipLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0;
}

@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* flipLeftTop */
.flipLeftTop {
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(-15deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
/* flipRight */
.flipRight {
  animation-name: flipRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 0;
}

@keyframes flipRightAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* flipRightTop */
.flipRightTop {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
  opacity: 0;
}

/*==================================================
くるっ
===================================*/
/* rotateX */
.rotateX {
  animation-name: rotateXAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateXAnime {
  from {
    transform: rotateX(0);
    opacity: 0;
  }
  to {
    transform: rotateX(-360deg);
    opacity: 1;
  }
}
/* rotateY */
.rotateY {
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0;
  }
  to {
    transform: rotateY(-360deg);
    opacity: 1;
  }
}
/* rotateLeftZ */
.rotateLeftZ {
  animation-name: rotateLeftZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateLeftZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(-360deg);
    opacity: 1;
  }
}
/* rotateRightZ */
.rotateRightZ {
  animation-name: rotateRightZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(360deg);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
  opacity: 0;
}

/*==================================================
ぶわっ、ぽんっ、どどんっ
===================================*/
/* zoomIn */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* zoomOut */
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.zoomInTrigger,
.zoomOutTrigger {
  opacity: 0;
}

/*==================================================
じわっ
===================================*/
/* blur */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.blurTrigger {
  opacity: 0;
}

/*==================================================
にょろっ
===================================*/
/* smooth */
.smooth {
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transform-origin: left;
  opacity: 0;
}

@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.smoothTrigger {
  opacity: 0;
}

/*==================================================
背景色が伸びて出現
===================================*/
.bgUDextend, .bgDUextend, .bgRLextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  background: #00a199;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*中の要素*/
.bgappear {
  padding-top: 69.5%;
  width: 100%;
  display: block;
}
.imgList__img .bgappear {
  padding-top: 121.261682243%;
}
.imgList__img .bgappear img {
  width: 0;
}
.bgappear img {
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  -o-object-fit: cover;
     object-fit: cover;
  width: 0%;
  height: 100%;
}
.active .bgappear img {
  animation-name: bgextendImg;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes bgextendImg {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/*左から右*/
.bgLRextend {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0;
  overflow: hidden;
  margin: 0;
}
.bgLRextend::before {
  content: "";
  position: absolute;
  height: 100%;
  background-color: #00a199;
  z-index: 2;
}
.active .bgLRextend::before, .bgLRextend.active::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  width: 100%;
  /*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/*右から左*/
.active .bgRLextend::before, .bgRLextend.active::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}
/*下から上*/
.bgDUextend.active::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
/*上から下*/
.bgUDextend.active::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}
/*==================================================
枠線が伸びて出現
===================================*/
/*枠線が伸びて出現*/
.lineTrigger {
  position: relative;
  /* 枠線が書かれる基点*/
  opacity: 0;
}

.lineTrigger.lineanime {
  animation-name: lineAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes lineAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*上下線*/
.lineTrigger::before,
.lineTrigger::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #333;
  /* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333;
  /* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top: 0;
  left: 0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime 0.5s linear 0s forwards;
  /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before {
  top: 0;
  right: 0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 0.5s linear 0.5s forwards;
  /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after {
  bottom: 0;
  right: 0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime 0.5s linear 1s forwards;
  /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after {
  bottom: 0;
  left: 0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 0.5s linear 1.5s forwards;
  /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes lineAnime2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear {
  animation: lineInnerAnime 0.5s linear 1.5s forwards;
  /*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;
  /*初期値を透過0にする*/
}

@keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: 追加 */
.char {
  transform: translateY(100px);
  transition: transfrom 0.5s;
}

.span__create span {
  display: inline-block;
}

.fadeinTop {
  opacity: 0;
}

.parallax {
  will-change: transform;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: フロントページ用の外部ファイル読み込み */
.btn {
  background: #46b1e2;
  color: #fff;
  font-size: 2.4rem;
  font-size: clamp(15px, 1.756954612vw, 35px);
  font-weight: bold;
  margin: 3rem auto;
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  padding: 1.5rem 4rem;
  border-radius: 999px;
  transition-duration: 0.3s;
}
.btn__wrap {
  display: flex;
  justify-content: center;
}
@media only screen and (max-width: 640px) {
  .btn {
    padding: 1.5rem 3rem;
  }
}
.btn span.small-txt {
  font-size: 80%;
  background: #fff;
  color: #71c6d3;
  border-radius: 10px;
  padding: 0 10px;
}
.btn.bg-pink {
  background-color: #eb7485;
}

.btn__fixed {
  right: 8.78477306vw;
  bottom: -85px;
  position: absolute;
  background: #3171b3;
  border-radius: 999px;
  color: #fff;
  font-size: 2.2rem;
  font-size: clamp(16px, 1.6105417277vw, 22px);
  line-height: 1.5454545455;
  font-weight: bold;
  width: 185px;
  height: 185px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.3s;
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.25);
  padding: 2rem 0 0;
  z-index: 9;
}
@media only screen and (max-width: 1024px) {
  .btn__fixed {
    width: 140px;
    height: 140px;
    right: 4.39238653vw;
    bottom: -70px;
  }
}
@media only screen and (max-width: 640px) {
  .btn__fixed {
    left: 0;
    right: 0;
    margin: auto;
    bottom: -2rem;
    width: 90%;
    height: 60px;
    line-height: 1;
    flex-direction: row;
    padding: 0;
  }
  .btn__fixed br {
    display: none;
  }
}
.btn__fixed::after {
  content: "";
  display: block;
  width: 22px;
  height: 11px;
  background-image: url(../images/arrow_wh.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.btn__fixed:hover {
  opacity: 1;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.25);
}

.note {
  font-size: clamp(14px, 1.317715959vw, 18px);
  margin-top: 2rem;
}
@media only screen and (max-width: 640px) {
  .note {
    text-align: left;
  }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: hero */
.hero {
  position: relative;
}
.hero img {
  width: 100%;
}
.hero iframe {
  width: 100%;
  height: 45.3879941435vw;
}
@media only screen and (max-width: 640px) {
  .hero iframe {
    height: 53.3333333333vw;
  }
}

.timeSchedule {
  margin: 10rem auto;
}
@media only screen and (max-width: 640px) {
  .timeSchedule {
    margin: 0 auto 5rem;
  }
}
.timeSchedule .title {
  font-size: clamp(24px, 3.2942898975vw, 45px);
  text-align: center;
  margin-bottom: 6rem;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .title {
    margin-bottom: 4rem;
  }
}
.timeSchedule .container {
  background: #eaecea;
  padding: 8rem 5%;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .container {
    padding: 5rem 5%;
    width: 100%;
  }
}
.timeSchedule h3 {
  background: #fff;
  font-size: clamp(18px, 2.0497803807vw, 28px);
  text-align: center;
  margin-bottom: 3rem;
  padding: 1rem;
}
@media only screen and (max-width: 640px) {
  .timeSchedule h3 {
    padding: 5px;
    margin-bottom: 2rem;
  }
}
.timeSchedule .timeSchedule__list {
  margin-bottom: 8rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .timeSchedule__list {
    margin-bottom: 6rem;
    gap: 2rem;
  }
}
.timeSchedule .timeSchedule__list dl {
  display: flex;
  gap: 1rem;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .timeSchedule__list dl {
    gap: 5px;
  }
}
.timeSchedule .timeSchedule__list dl:last-child dt::after {
  display: none;
}
.timeSchedule .timeSchedule__list dt {
  background: #fff070;
  min-width: 200px;
  font-size: clamp(14px, 2.4890190337vw, 34px);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .timeSchedule__list dt {
    min-width: 80px;
  }
}
.timeSchedule .timeSchedule__list dt::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 10px;
  background-image: url(../images/arrow_bk.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  bottom: -20px;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .timeSchedule__list dt::after {
    width: 12px;
    height: 8px;
    bottom: -14px;
  }
}
.timeSchedule .timeSchedule__list dd {
  width: 100%;
  font-size: clamp(16px, 2.4890190337vw, 34px);
  text-align: center;
  border: 2px solid #9e9e9f;
  border-width: 2px 0;
}
.timeSchedule .section__lead {
  font-size: clamp(16px, 2.0497803807vw, 28px);
  position: relative;
  margin-bottom: 2rem;
}
.timeSchedule .section__lead i {
  position: absolute;
  width: 114px;
  display: block;
  right: 5%;
  top: 0;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .section__lead i {
    display: none;
  }
}
.timeSchedule .profile {
  margin-bottom: 8rem;
  gap: 4rem;
  align-items: center;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .profile {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 4rem;
  }
}
.timeSchedule .profile figure {
  min-width: 226px;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .profile figure {
    width: 70%;
    min-width: unset;
    max-width: 200px;
  }
}
.timeSchedule .profile__name {
  font-size: clamp(18px, 1.756954612vw, 24px);
  line-height: 1;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .profile__name {
    line-height: 1.4;
  }
}
.timeSchedule .profile__name small {
  line-height: 1.4;
}
.timeSchedule .profile__copy {
  font-size: clamp(14px, 1.4641288433vw, 20px);
}
.timeSchedule .borderWrap {
  margin: 8rem auto;
  width: 90%;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .borderWrap {
    width: 100%;
    margin: 5rem 0;
  }
}
.timeSchedule .border {
  border: 2px solid #9e9e9f;
  padding: 2rem;
  align-items: center;
  gap: 2rem;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .border {
    flex-direction: column;
  }
}
.timeSchedule .border figure {
  min-width: 116px;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .border figure {
    display: flex;
    align-items: center;
  }
  .timeSchedule .border figure * {
    flex: 1;
  }
  .timeSchedule .border figure img {
    width: 40%;
  }
}
.timeSchedule .border dt {
  font-size: clamp(16px, 1.5373352855vw, 21px);
  margin-bottom: 1rem;
}
.timeSchedule .border dd {
  font-size: clamp(14px, 1.317715959vw, 18px);
}
.timeSchedule .border .btn {
  min-width: 290px;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .border .btn {
    min-width: 240px;
  }
}
.timeSchedule .bnr {
  width: 90%;
  max-width: 750px;
  margin: auto;
}
@media only screen and (max-width: 640px) {
  .timeSchedule .bnr {
    width: 100%;
  }
}

.method {
  background: #fff070;
  padding: 10rem 0;
  text-align: center;
}
@media only screen and (max-width: 640px) {
  .method {
    padding: 5rem 0;
  }
}
.method .container {
  padding: 4rem 0;
  max-width: 800px;
}
.method .title {
  text-align: center;
  margin-bottom: 2rem;
}
.method .lead {
  font-size: clamp(21px, 2.7818448023vw, 38px);
  margin-bottom: 0rem;
}
@media only screen and (max-width: 640px) {
  .method .lead {
    text-align: left;
  }
}
.method .note {
  font-size: clamp(14px, 1.317715959vw, 18px);
  margin-top: 0;
}
.method .address {
  font-size: clamp(14px, 2.196193265vw, 30px);
}
@media only screen and (max-width: 640px) {
  .method .address {
    text-align: left;
  }
}
.method .periodWrap {
  max-width: 730px;
  margin: auto;
}
.method .period {
  display: flex;
  align-items: center;
  gap: 2rem;
  line-height: 1.4;
}
@media only screen and (max-width: 640px) {
  .method .period {
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
  }
}
.method .period dt {
  background: #fff;
  border-radius: 6px;
  border: 1px solid #9e9e9f;
  width: 129px;
  font-size: clamp(12px, 1.317715959vw, 18px);
}
.method .period dd {
  font-size: clamp(21px, 3.074670571vw, 42px);
}
.method .policy {
  text-align: left;
}
.method .policy h4 {
  border: 1px solid #9e9e9f;
  border-width: 1px 0;
  font-size: clamp(18px, 1.5373352855vw, 21px);
  text-align: center;
  margin-top: 4rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
.method .policy p {
  font-size: clamp(16px, 1.317715959vw, 18px);
}
.method .flex {
  text-align: left;
  gap: 2rem;
}
@media only screen and (max-width: 640px) {
  .method .flex {
    flex-direction: column;
  }
}
.method .flex hr {
  border-width: 0 1px 0 0;
}
.method .flex h3 {
  font-size: clamp(18px, 2.0497803807vw, 28px);
  margin-bottom: 2rem;
}
.method .flex h3 i {
  display: inline-block;
  color: #5dc1cf;
  font-style: normal;
}
.method .flex h4 {
  font-size: clamp(16px, 1.6105417277vw, 22px);
  margin-top: 1rem;
}
.method .flex p {
  font-size: clamp(16px, 1.6105417277vw, 22px);
}
.method .flex li {
  display: inline-block;
  font-size: clamp(14px, 1.317715959vw, 18px);
}
@media only screen and (max-width: 640px) {
  .method .flex li {
    display: block;
  }
}
.method .btn {
  min-width: 290px;
}

.access .title {
  text-align: center;
  margin-bottom: 6rem;
}
@media only screen and (max-width: 640px) {
  .access .title {
    margin-bottom: 3rem;
  }
}
.access .map {
  position: relative;
  max-width: 990px;
  margin: 5rem auto;
  padding-top: 60%;
}
@media only screen and (max-width: 640px) {
  .access .map {
    width: 100%;
    padding-top: 120%;
    margin: 3rem auto;
  }
}
.access .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.access h3 {
  font-size: clamp(18px, 2.3426061493vw, 32px);
}
@media only screen and (max-width: 640px) {
  .access h3 {
    text-align: center;
  }
}
.access dl {
  display: flex;
  font-size: clamp(15px, 1.756954612vw, 24px);
  margin-top: 2rem;
}
@media only screen and (max-width: 640px) {
  .access dl {
    flex-direction: column;
  }
}
.access dl dt {
  text-align: center;
  min-width: 100px;
}
@media only screen and (max-width: 640px) {
  .access dl dt {
    text-align: left;
  }
}
.access .location {
  max-width: 820px;
  margin: auto;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: bnr */
.bnr {
  background: #efefef;
}
.bnr .container {
  padding: 3rem 0;
}
.bnr .bnr__list {
  display: flex;
  justify-content: center;
  gap: 3rem;
}
@media only screen and (max-width: 640px) {
  .bnr .bnr__list {
    gap: 1rem;
  }
}
.bnr .bnr__list li {
  max-width: 180px;
}
.bnr a {
  display: block;
  transition-duration: 0.3s;
}
.bnr a:hover {
  opacity: 0.8;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: data */
.data .container {
  max-width: unset;
  width: 90%;
  padding: 0;
}
@media only screen and (max-width: 640px) {
  .data .container {
    padding: 4rem 0;
    width: 90%;
  }
}
.data .label {
  font-size: clamp(15px, 2.196193265vw, 30px);
  line-height: 1;
  padding: 6px;
}
.data .title {
  line-height: 1;
}
.data .weekday {
  color: #fff;
  line-height: 1;
  position: relative;
  z-index: 2;
  width: clamp(25px, 3.2vw, 60px);
  height: clamp(25px, 3.2vw, 60px);
  line-height: clamp(27px, 3.2vw, 55px);
  display: inline-block;
  text-align: center;
  font-weight: normal;
  font-size: 69%;
}
.data .weekday::before {
  content: "";
  position: absolute;
  display: block;
  background: #eb7485;
  border-radius: 999px;
  width: 100%;
  height: 100%;
  top: 0px;
  left: -2px;
  margin: auto;
  z-index: -1;
}

.date_location {
  display: block;
  max-width: 1000px;
  width: 100%;
  position: relative;
  color: #eb7485;
}
.date_location .date {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}
.date_location .date .title {
  font-size: clamp(18px, 3.2942898975vw, 62px);
  font-weight: normal;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.date_location .date .title b {
  font-size: 200%;
  font-weight: bold;
}
.date_location .date .title b small {
  font-size: 50%;
}
.date_location .location {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2rem;
  justify-content: center;
}
@media only screen and (max-width: 640px) {
  .date_location .location {
    justify-content: flex-start;
  }
}
.date_location .location .title {
  font-size: clamp(18px, 3.2942898975vw, 45px);
  white-space: nowrap;
  font-weight: normal;
}
@media only screen and (max-width: 640px) {
  .date_location .location .title {
    white-space: normal;
  }
}
.date_location .location .title span {
  display: inline-block;
}
@media only screen and (max-width: 640px) {
  .date_location .location .title span {
    display: block;
    line-height: 1.2;
  }
}
.date_location .location .title span.address {
  display: block;
  font-size: 60%;
  padding-top: 1rem;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: sec1 */
.sec1 .container {
  position: relative;
  background-color: #fff;
  border: 8px solid #eb7485;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(235, 116, 133, 0.8);
}
.sec1 .container.talk-session-ttl {
  padding: 6rem 0;
}
.sec1 .container .talk-session-inner {
  background-image: url(../images/2024/sec01-border-body.png);
  border-radius: 0;
  background-size: 100%;
  background-repeat: repeat-y;
  width: 100%;
  position: relative;
}
.sec1 .container .talk-session-inner::before {
  position: absolute;
  content: "";
  display: block;
  background-image: url(../images/2024/sec01-border-top.png);
  background-position: bottom center;
  left: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 60px;
  top: 1px;
  transform: translateY(-100%) translateX(-50%);
}
.sec1 .container .talk-session-inner::after {
  position: absolute;
  content: "";
  display: block;
  background-image: url(../images/2024/sec01-border-bottom.png);
  background-position: top center;
  left: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 85px;
  bottom: 1px;
  transform: translateY(100%) translateX(-50%);
}
.sec1 .container .talk-session-inner .book-contens-inner {
  width: 85%;
  margin: 0 auto;
}
.sec1 .container .talk-session-inner .book-contens-inner .head {
  gap: 5px;
}
.sec1 .container .talk-session-inner .margin-wrap {
  margin-bottom: 6rem;
}
@media only screen and (max-width: 640px) {
  .sec1 .container .talk-session-inner .margin-wrap {
    display: block;
  }
}
.sec1 .container .talk-session-inner .margin-wrap .item-box:last-child {
  border-left: 1px solid #bedebe;
}
.sec1 .date_location {
  margin-bottom: 6rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  max-width: 935px;
  width: 100%;
}
@media only screen and (max-width: 640px) {
  .sec1 .date_location {
    display: block;
    margin-bottom: 4rem;
  }
}
.sec1 .date_location .label {
  font-size: clamp(12px, 1.8301610542vw, 25px);
  padding: 4px 8px;
}
.sec1 .date_location .date {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec1 .date_location .date .title {
  font-size: clamp(18px, 2.7818448023vw, 38px);
  font-weight: normal;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.sec1 .date_location .location {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec1 .date_location .location .title {
  font-size: clamp(18px, 2.7818448023vw, 38px);
  font-weight: normal;
  white-space: nowrap;
}
.sec1 .subtitle {
  width: 88.3%;
  background: #50b99a;
  margin-left: 4.8%;
  justify-content: center;
  border-top-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topleft: 0;
  border-bottom-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-top-right-radius: 4rem;
  -webkit-border-top-right-radius: 4rem;
  -moz-border-radius-topright: 4rem;
  border-bottom-right-radius: 4rem;
  -webkit-border-bottom-right-radius: 4rem;
  -moz-border-radius-bottomright: 4rem;
}
@media only screen and (max-width: 640px) {
  .sec1 .subtitle {
    margin-left: 0.8rem;
  }
}
.sec1 .talk-session-time {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 3rem;
}
.sec1 .talk-session-time .label {
  font-size: clamp(12px, 1.8301610542vw, 25px);
  padding: 4px 8px;
}
.sec1 .talk-session-time dd {
  font-size: clamp(18px, 2.7818448023vw, 38px);
  font-weight: normal;
  white-space: nowrap;
}

.head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 50px;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 640px) {
  .head {
    gap: 2rem;
  }
}
.head .title {
  font-size: clamp(36px, 5.6368960469vw, 76px);
  line-height: 1;
}
@media only screen and (max-width: 640px) {
  .head .title {
    line-height: 1.2;
    font-size: 30px;
  }
}
.head .desc {
  font-size: clamp(20px, 2.635431918vw, 36px);
  line-height: 1;
  text-align: center;
  font-weight: normal;
}
.head .desc b {
  font-size: 200%;
  font-weight: normal;
}
.head .desc span.annotation {
  font-size: 60%;
}
.head.data {
  justify-content: center;
  align-items: flex-end;
}
.head.data .title {
  text-shadow: none;
}
.head .icon-free-wrapper {
  max-width: 362px;
  width: 100%;
}
@media only screen and (max-width: 640px) {
  .head .icon-free-wrapper {
    width: 50%;
  }
}
.head .icon-free-wrapper img.icon-free {
  width: 100%;
}

.subtitle {
  background: #50b99a;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 2rem;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 640px) {
  .subtitle {
    padding: 1.5rem;
    justify-content: center;
    margin-bottom: 3rem;
  }
}
.subtitle .title {
  font-size: clamp(18px, 2.7818448023vw, 24px);
  line-height: 1;
  font-weight: normal;
}
@media only screen and (max-width: 640px) {
  .subtitle .title {
    font-size: 103%;
    line-height: 1.5;
  }
}
.subtitle dl {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.subtitle .label {
  padding: 4px 8px;
  font-size: clamp(15px, 1.1713030747vw, 30px);
}
.subtitle dd {
  font-size: clamp(15px, 2.196193265vw, 30px);
}

@media only screen and (max-width: 640px) {
  .session {
    margin-bottom: 4rem;
  }
}
.session.session2 {
  margin-top: 110px;
}
@media only screen and (max-width: 640px) {
  .session.session2 {
    margin-top: 6rem;
  }
}
.session .card {
  display: flex;
  gap: 3rem;
  margin: auto;
  margin-bottom: 4rem;
  justify-content: center;
  width: 90%;
}
@media only screen and (max-width: 640px) {
  .session .card {
    gap: 2rem;
    width: 100%;
    flex-direction: column;
    align-items: center;
  }
}
.session .card.item2 {
  justify-content: center;
  width: 100%;
}
.session .card.item2 .gest__wrap {
  gap: 9.2rem;
}
.session .copy {
  font-size: clamp(15px, 1.9765739385vw, 27px);
  line-height: 1.8;
  margin-bottom: 3rem;
  font-weight: normal;
}
.session .facilitator {
  justify-content: center;
  align-items: center;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 640px) {
  .session .facilitator {
    display: block;
    text-align: center;
  }
}
.session .facilitator .label {
  border: none;
  background: #50b99a;
  color: #fff;
  font-size: clamp(18px, 2.4158125915vw, 25px);
  padding: 0.2em;
  font-weight: normal;
  text-align: center;
}
.session .facilitator h4.name {
  margin-top: 0;
  text-align: left;
  margin-left: 2rem;
}
@media only screen and (max-width: 640px) {
  .session .facilitator h4.name {
    margin-left: 0;
    text-align: center;
  }
}
.session .img {
  position: relative;
  flex: 1;
}
.session .img figcaption {
  background: #71c6d3;
  color: #fff;
  font-size: clamp(12px, 1.5373352855vw, 21px);
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
@media only screen and (max-width: 640px) {
  .session .img figcaption {
    font-size: clamp(18px, 1.5373352855vw, 21px);
  }
}
.session .name {
  font-size: clamp(22px, 1.756954612vw, 22px);
  line-height: 1.2;
  text-align: center;
  margin-top: 1rem;
  font-weight: normal;
}
@media only screen and (max-width: 640px) {
  .session .name {
    font-size: clamp(24px, 2.196193265vw, 30px);
  }
}
.session .name small {
  font-size: 80%;
  display: inline-block;
}
.session .gest__wrap {
  display: flex;
  gap: 6.2rem;
  align-items: baseline;
  justify-content: center;
}
@media only screen and (max-width: 640px) {
  .session .gest__wrap {
    flex-direction: column;
  }
}
.session .gest__wrap .gest {
  width: 42%;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 640px) {
  .session .gest__wrap .gest {
    width: 100%;
  }
}
.session .gest__wrap .name {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.session .gest__wrap .name * {
  flex: 1;
  height: 100%;
}
.session .gest__wrap .name > small {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 2;
  height: 100%;
}
.session .gest__wrap .name.talk-session-gest span.yakushoku {
  display: contents;
  font-size: 80%;
}
.session .linkbtn__wrap {
  background: #50b99a;
  padding: 1.5rem 2rem;
  border-radius: 2.4rem;
  transition-duration: 0.3s;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 640px) {
  .session .linkbtn__wrap {
    padding: 1.5rem;
  }
}
.session .linkbtn__wrap:hover {
  background: #3e946f;
  cursor: pointer;
}
.session .linkbtn__wrap.session2 {
  background: #abd16e;
  margin-top: 0.5rem;
}
.session .linkbtn__wrap.session2:hover {
  background: #87b85c;
  cursor: pointer;
}
.session .linkbtn__wrap .linkbtn {
  display: block;
  color: #fff;
  font-size: clamp(15px, 1.756954612vw, 20px);
  text-decoration: none;
  font-weight: normal;
  text-align: center;
}
@media only screen and (max-width: 640px) {
  .session .linkbtn__wrap .linkbtn {
    display: block;
  }
}
.session .linkbtn__wrap .linkbtn .box1 {
  width: 100%;
  line-height: 1.4;
}
.session .linkbtn__wrap .linkbtn .box1 p {
  font-size: 90%;
}
@media only screen and (max-width: 640px) {
  .session .linkbtn__wrap .linkbtn .box1 p {
    text-align: center;
  }
}
.session .linkbtn__wrap .linkbtn .box2 {
  width: 100%;
  font-size: 135%;
}
@media only screen and (max-width: 640px) {
  .session .linkbtn__wrap .linkbtn .box2 p {
    text-align: center;
    line-height: 1.3;
  }
}
.session .formLink {
  background: rgb(219, 242, 246);
  background: linear-gradient(45deg, rgb(219, 242, 246) 0%, rgb(255, 255, 255) 26%, rgb(255, 255, 255) 72%, rgb(219, 242, 246) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 7px solid #71c6d3;
  border-radius: 2.196193265vw;
  color: #38a1d3;
  font-size: clamp(18px, 3.074670571vw, 42px);
  line-height: 1;
  text-decoration: none;
  margin-bottom: 3rem;
  padding: 1.5rem;
}
@media only screen and (max-width: 640px) {
  .session .formLink {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 5px;
    padding: 1rem;
  }
}
.session .formLink small {
  font-size: clamp(12px, 1.756954612vw, 24px);
  display: inline-block;
}
@media only screen and (max-width: 640px) {
  .session .formLink small {
    line-height: 1.4;
  }
}
.session .yt__link {
  background: #595757;
  border-radius: 0.7320644217vw;
  color: #fff;
  font-size: clamp(16px, 2.635431918vw, 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  text-decoration: none;
  padding: 1rem;
}
@media only screen and (max-width: 640px) {
  .session .yt__link {
    padding: 1.5rem;
    gap: 5px;
    line-height: 1;
    font-size: 90%;
  }
}
.session .yt__link i {
  width: 50%;
  line-height: 1;
  display: flex;
  font-style: normal;
  font-weight: normal;
  font-size: 90%;
}
@media only screen and (max-width: 640px) {
  .session .yt__link i {
    width: 90%;
  }
}
.session .gest__flex {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}
@media only screen and (max-width: 640px) {
  .session .gest__flex {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}
.session .gest__flex > * {
  flex: 1;
}
.session .gest__dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 4rem;
}
@media only screen and (max-width: 640px) {
  .session .gest__dl {
    flex-direction: column;
  }
}
.session .gest__dl .label {
  background: #71c6d3;
  border-color: #71c6d3;
  color: #fff;
  font-size: clamp(18px, 2.4158125915vw, 33px);
  padding: 1rem;
}
.session .gest__dl dd {
  font-size: clamp(21px, 2.635431918vw, 36px);
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: sec2 */
.sec2 {
  position: relative;
}
.sec2 .container {
  position: relative;
  z-index: 1;
  padding: 0;
}
.sec2 .container .vertical_rl {
  right: -3.5%;
  left: auto;
  top: 0;
}
.sec2 .container::before {
  position: absolute;
  content: "";
  background-image: url(../images/2024/clip.svg);
  background-repeat: no-repeat;
  width: 8%;
  height: 80px;
  top: -1.4%;
  right: 0;
  z-index: 11111;
}
@media only screen and (max-width: 640px) {
  .sec2 .container::before {
    width: 7%;
    top: -0.54%;
  }
}
@media only screen and (max-width: 390px) {
  .sec2 .container::before {
    top: -0.35%;
  }
}
.sec2 .container .event-inner {
  background-image: url(../images/2024/back01.png);
  border-radius: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.sec2 .container .event-inner::before {
  position: absolute;
  content: "";
  display: block;
  background-image: url(../images/2024/back01-top.png);
  background-position: bottom center;
  left: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 57px;
  top: 1px;
  transform: translateY(-100%) translateX(-50%);
}
.sec2 .container .event-inner::after {
  position: absolute;
  content: "";
  display: block;
  background-image: url(../images/2024/back01-bottom.png);
  background-position: top center;
  left: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 57px;
  bottom: 1px;
  transform: translateY(100%) translateX(-50%);
}
.sec2 .container .event-inner .note-contens-inner {
  width: 85%;
  margin: 0 auto;
  padding-top: 10rem;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner {
    padding-top: 5rem;
    margin-top: 6rem;
  }
}
.sec2 .container .event-inner .note-contens-inner.inner2 .event-content-wrapeer {
  margin-bottom: 0;
}
.sec2 .container .event-inner .note-contens-inner h5 {
  position: relative;
  display: inline-block;
  padding: 0 30%;
  font-size: clamp(40px, 2.7818448023vw, 40px);
  margin-bottom: 3rem;
  font-weight: normal;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner h5 {
    padding: 0;
    font-size: 130%;
  }
}
.sec2 .container .event-inner .note-contens-inner h5::before {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 33.1%;
  height: 3px;
  background-color: #50b99a;
  left: 0;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner h5::before {
    display: none;
  }
}
.sec2 .container .event-inner .note-contens-inner h5::after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 33.1%;
  height: 3px;
  background-color: #50b99a;
  right: 0;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner h5::after {
    display: none;
  }
}
.sec2 .container .event-inner .note-contens-inner .event-content-wrapeer {
  margin-bottom: 6rem;
}
.sec2 .container .event-inner .note-contens-inner .event-content-wrapeer.event2 .flexbox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6rem;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner .event-content-wrapeer.event2 .flexbox {
    display: block;
  }
}
.sec2 .container .event-inner .note-contens-inner .event-content-wrapeer.event2 .flexbox .item {
  width: 46.8%;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner .event-content-wrapeer.event2 .flexbox .item {
    width: 100%;
    margin-bottom: 6rem;
  }
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner .event-content-wrapeer.event2 .flexbox .item.nomg {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner .event-content-wrapeer.event2 .flexbox .item .label {
    width: 18%;
  }
}
.sec2 .container .event-inner .note-contens-inner .event-content-wrapeer.event2 .flexbox .item .img-box {
  margin-bottom: 2rem;
}
.sec2 .container .event-inner .note-contens-inner .event-content-wrapeer.event2 .title {
  text-align: center;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner .event-content-wrapeer.event2 .title {
    font-size: 125%;
    padding: 0;
  }
}
.sec2 .container .event-inner .note-contens-inner .event-content-wrapeer .item-box {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner .event-content-wrapeer .item-box {
    display: block;
  }
}
.sec2 .container .event-inner .note-contens-inner .event-content-wrapeer .item-box .text-box {
  width: 49%;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner .event-content-wrapeer .item-box .text-box {
    width: 100%;
  }
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner .event-content-wrapeer .item-box .text-box p.title {
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 125%;
  }
}
.sec2 .container .event-inner .note-contens-inner .event-content-wrapeer .item-box .img-box {
  width: 44%;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner .event-content-wrapeer .item-box .img-box {
    width: 100%;
    margin: auto;
  }
}
.sec2 .container .event-inner .note-contens-inner.inner2 {
  padding-top: 0;
  padding-bottom: 10rem;
}
@media only screen and (max-width: 640px) {
  .sec2 .container .event-inner .note-contens-inner.inner2 {
    padding-bottom: 0.5rem;
  }
}
.sec2 .title {
  color: #006367;
  font-size: clamp(42px, 2.4158125915vw, 34px);
  font-weight: normal;
  margin-bottom: 4rem;
  line-height: 1.1;
}
.sec2 .title.mg4 {
  margin-top: 5rem;
}
.sec2 .title.center {
  text-align: center;
}
.sec2 .title.mg {
  margin: 2.5rem 0 6rem;
}
@media only screen and (max-width: 640px) {
  .sec2 .title.mg {
    margin: 6rem 0 3rem;
  }
}
@media only screen and (max-width: 640px) {
  .sec2 .title {
    margin-bottom: 3rem;
    padding: 1rem;
  }
}
.sec2 .title .marker {
  display: inline;
  background-position: left -100% center;
  padding-bottom: 0.7em;
  background-size: 200% 0.5em;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgb(238, 242, 190) 50%);
  font-size: clamp(42px, 2.4158125915vw, 34px);
  line-height: 1.2;
}
.sec2 .title .marker.small {
  font-size: clamp(32px, 2.4158125915vw, 32px);
}
@media only screen and (max-width: 640px) {
  .sec2 .title .marker.small {
    font-size: 115%;
  }
}
@media only screen and (max-width: 640px) {
  .sec2 .title .marker {
    font-size: 115%;
  }
}
.sec2 .event:first-child {
  margin-bottom: 9rem;
}
@media only screen and (max-width: 640px) {
  .sec2 .event:first-child {
    margin-bottom: 6rem;
  }
}
.sec2 .card__warp {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  width: 90%;
  margin: 0 auto;
}
@media only screen and (max-width: 640px) {
  .sec2 .card__warp {
    flex-direction: column;
    width: 100%;
  }
}
.sec2 .card {
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media only screen and (max-width: 640px) {
  .sec2 .card {
    gap: 1.5rem;
  }
}
.sec2 .card .img {
  max-width: 303px;
  margin: auto;
}
@media only screen and (max-width: 640px) {
  .sec2 .card .img {
    max-width: unset;
  }
}
.sec2 .card:nth-child(3) {
  flex: 100%;
}
.sec2 .card:nth-child(3) .img {
  max-width: unset;
}
.sec2 .card__title {
  color: #43bcd1;
  font-size: clamp(21px, 2.4158125915vw, 33px);
  text-align: center;
  margin: 1rem auto 2rem;
  line-height: 1.4;
  flex: 1;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 640px) {
  .sec2 .card__title {
    margin: 1rem 0;
    justify-content: center;
  }
}
.sec2 .card__title .under_line {
  background: linear-gradient(transparent 85%, rgba(144, 210, 232, 0.5) 0%);
  display: inline;
}
.sec2 .card__flex {
  flex-direction: row;
  gap: 3rem;
}
@media only screen and (max-width: 640px) {
  .sec2 .card__flex {
    flex-direction: column;
    gap: 1rem;
  }
}
.sec2 .card__flex > * {
  flex: 1;
}
.sec2 .card__flex .card__title {
  text-align: left;
}
@media only screen and (max-width: 640px) {
  .sec2 .card__flex .card__title {
    justify-content: center;
  }
}
.sec2 dl {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 1rem 0;
}
@media only screen and (max-width: 640px) {
  .sec2 dl {
    margin: 0;
    margin-bottom: 1rem;
  }
}
.sec2 dl dt {
  white-space: nowrap;
  font-size: clamp(19px, 1.1713030747vw, 16px);
}
@media only screen and (max-width: 640px) {
  .sec2 dl dt {
    font-size: 73%;
    width: 16%;
  }
}
.sec2 dl dd {
  font-size: clamp(24px, 3.537335vw, 21px);
  line-height: 1.4;
}
@media only screen and (max-width: 640px) {
  .sec2 dl dd {
    padding-top: 4px;
    font-size: 100%;
  }
}
.sec2 .detail {
  font-size: clamp(15px, 1.9765739385vw, 22px);
  line-height: 1.35;
  margin-top: 2rem;
  margin-bottom: 6rem;
}
@media only screen and (max-width: 640px) {
  .sec2 .detail {
    font-size: clamp(15px, 1.9765739385vw, 27px);
    line-height: 1.5;
    font-weight: normal;
  }
}
.sec2 .detail.kyousan {
  font-size: clamp(15px, 1.9765739385vw, 19px);
  margin-bottom: 0;
  display: block;
  max-width: 744px;
  width: 100%;
  margin: 0 auto;
}
.sec2 .detail.kyousan dd {
  font-size: clamp(15px, 1.9765739385vw, 19px);
}
.sec2 .detail.kyousan dd .mgl {
  display: inline-block;
  margin-left: 6.4rem;
}
@media only screen and (max-width: 640px) {
  .sec2 .detail.kyousan dd .mgl {
    margin-left: 5.3rem;
  }
}
.sec2 .detail.kyousan dd .mgl2 {
  display: inline-block;
  margin-left: 2.1rem;
}
@media only screen and (max-width: 640px) {
  .sec2 .detail.kyousan dd .mgl2 {
    margin-left: 1.8rem;
  }
}
.sec2 .name {
  font-size: clamp(21px, 2.4158125915vw, 33px);
  margin: 1rem auto;
  text-align: center;
}
@media only screen and (max-width: 640px) {
  .sec2 .name {
    margin: 0;
  }
}
.sec2 .name small {
  font-size: 63.6363636364%;
}
.sec2 .copy {
  font-size: clamp(14px, 1.1713030747vw, 16px);
  line-height: 1.4;
}
@media only screen and (max-width: 640px) {
  .sec2 .copy {
    line-height: 1.8;
  }
}
@media only screen and (max-width: 640px) {
  .sec2 .desc {
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
  }
}
.sec2 .flexbox {
  display: flex;
  justify-content: center !important;
  gap: 3rem !important;
}
.sec2 .box-workshop {
  border: 2px solid #50b99a;
  padding: 2rem;
  max-width: 744px;
  width: 100%;
  margin: 3rem auto;
}
@media only screen and (max-width: 640px) {
  .sec2 .box-workshop {
    padding: 1rem;
  }
}
@media only screen and (max-width: 640px) {
  .sec2 .box-workshop dl dt {
    width: 18%;
  }
}
.sec2 .item.mgb {
  margin-bottom: 3rem !important;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*index: sec3 */
.sec3 {
  position: relative;
}
.sec3 .container {
  padding: 10rem 0 20rem;
  max-width: 1150px;
  width: 100%;
}
@media only screen and (max-width: 640px) {
  .sec3 .container {
    padding: 6rem 0 10rem;
    width: 90%;
  }
}
.sec3 .container .flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4rem;
}
.sec3 .container .flexbox .item {
  width: 48%;
  border: 1px solid #50b99a;
  padding: 2rem;
}
@media only screen and (max-width: 640px) {
  .sec3 .container .flexbox .item {
    width: 100%;
  }
}
.sec3 .title-bg {
  background: #eef2be;
  border-radius: 1.0980966325vw;
  color: #006367;
  font-size: clamp(15px, 2.196193265vw, 22px);
  text-align: center;
  margin: 3rem 0 4rem;
  font-weight: normal;
}
@media only screen and (max-width: 640px) {
  .sec3 .title-bg {
    padding: 1rem 0;
    margin: 2rem 0;
  }
}
.sec3 .title-bg span {
  display: inline-block;
}
.sec3 .title-bg.tours {
  padding: 2.5rem;
  line-height: 1.4;
}
.sec3 .title-bg.tours a {
  text-decoration: none;
  color: #006367;
}
.sec3 .title-bg.tours a:hover {
  opacity: 0.8;
}
.sec3 .link {
  text-align: center;
}
.sec3 .link a {
  font-size: clamp(15px, 2.196193265vw, 34px);
  font-weight: normal;
  text-decoration: none;
  color: #2ea7e0;
}
.sec3 .link a:hover {
  opacity: 0.8;
}
.sec3 .box1 {
  margin-bottom: 10rem;
}
@media only screen and (max-width: 640px) {
  .sec3 .box1 {
    margin-bottom: 6rem;
  }
}
.sec3 .box1:last-child {
  margin-bottom: 0;
}
.sec3 .box1.mgb {
  margin-bottom: 3rem !important;
}
.sec3 .box2 .lead {
  text-align: center;
}
@media only screen and (max-width: 640px) {
  .sec3 .box2 .lead {
    text-align: left;
  }
}
.sec3 .title {
  color: #006367;
  font-size: clamp(22px, 6vw, 34px);
  line-height: 1.1;
  text-align: center;
  margin: 2rem 0;
  position: relative;
  font-weight: normal;
}
@media only screen and (max-width: 640px) {
  .sec3 .title {
    line-height: 1.4;
    font-size: 120%;
  }
}
.sec3 .title small {
  font-size: 63.746835%;
  display: block;
}
.sec3 .title.bus-tour::after {
  position: absolute;
  content: "";
  background-image: url(../images/2024/icon-free.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 75px;
  height: 75px;
  right: 0;
  top: -50%;
}
@media only screen and (max-width: 640px) {
  .sec3 .title.bus-tour::after {
    width: 60px;
    height: 60px;
    top: -50%;
    right: 0;
  }
}
.sec3 .title.big {
  font-size: clamp(55px, 6vw, 55px);
}
@media only screen and (max-width: 640px) {
  .sec3 .title.big {
    font-size: 120%;
  }
}
.sec3 .url {
  color: #2ea7e0;
  font-size: clamp(15px, 2.196193265vw, 30px);
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 2rem auto;
}
.sec3 .lead {
  font-size: clamp(14px, 3vw, 18px);
  text-align: left;
  margin: 1rem auto;
  font-weight: normal;
}
.sec3 .lead.small {
  font-size: clamp(15px, 1.9765739385vw, 19px);
}
@media only screen and (max-width: 640px) {
  .sec3 .lead.small {
    font-size: 85%;
  }
}
.sec3 .list {
  display: flex;
  align-items: baseline;
  margin: 2rem auto;
  gap: 2rem;
}
@media only screen and (max-width: 640px) {
  .sec3 .list {
    gap: 1rem;
    align-items: baseline;
  }
}
.sec3 .list .term {
  font-size: clamp(12px, 1.756954612vw, 18px);
  border-width: 3px;
  padding: 6px 12px;
  white-space: nowrap;
}
.sec3 .list .desc {
  font-size: clamp(16px, 4vw, 30px);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: normal;
}
@media only screen and (max-width: 640px) {
  .sec3 .list .desc {
    flex-wrap: wrap;
    gap: 5px;
    line-height: 1.4;
  }
}
.sec3 .list .desc b {
  font-size: 130%;
  align-self: baseline;
}
.sec3 .list .desc b small {
  font-size: 50%;
}
.sec3 .weekday {
  color: #fff;
  line-height: 1;
  position: relative;
  z-index: 2;
  width: clamp(30px, 4.39238653vw, 50px);
  height: clamp(30px, 4.39238653vw, 50px);
  line-height: clamp(30px, 4.39238653vw, 50px);
  display: inline-block;
  text-align: center;
}
.sec3 .weekday::before {
  content: "";
  position: absolute;
  display: block;
  background: #595757;
  border-radius: 999px;
  width: 100%;
  height: 100%;
  top: 0;
  margin: auto;
  z-index: -1;
}
.sec3 .open-time {
  font-size: clamp(16px, 5vw, 33px);
  padding-top: 1.5rem;
  margin-left: 1rem;
}
.sec3 .presenter {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 1rem;
  margin: 2rem 0;
}
@media only screen and (max-width: 640px) {
  .sec3 .presenter {
    justify-content: center;
  }
}
.sec3 .presenter dt {
  font-size: clamp(24px, 3.513909224vw, 48px);
  border-right: 10px solid;
  padding-right: 1rem;
  white-space: nowrap;
}
@media only screen and (max-width: 640px) {
  .sec3 .presenter dt {
    border-right-width: 5px;
  }
}
.sec3 .presenter dd {
  font-size: clamp(16px, 2.4158125915vw, 33px);
  line-height: 1.4;
}
.sec3 .presenter dd span {
  display: inline-block;
}
.sec3 .info {
  background: #eef2be;
  color: #006367;
  font-size: clamp(15px, 2.196193265vw, 30px);
  padding: 1rem;
  margin: 3rem auto;
  text-align: center;
}
@media only screen and (max-width: 640px) {
  .sec3 .info {
    text-align: left;
  }
}
.sec3 .yt__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 3rem 0;
}
@media only screen and (max-width: 640px) {
  .sec3 .yt__link {
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0;
  }
}
.sec3 .yt__link dt {
  background: #595757;
  border-radius: 0.7320644217vw;
  width: 29.7218155198vw;
  max-width: 360px;
  padding: 20px;
}
@media only screen and (max-width: 640px) {
  .sec3 .yt__link dt {
    width: auto;
  }
}
.sec3 .yt__link dd {
  font-size: clamp(15px, 2.196193265vw, 30px);
  white-space: nowrap;
}
.sec3::after {
  background-image: url(../images/2024/background-bottom.png);
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat;
  content: "";
  display: block;
  width: 100%;
  height: 294px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 0;
}

body {
  background-color: #fffdf6;
  position: relative;
  background: url(../images/flower-pattern.svg);
  background-repeat: repeat;
  background-size: auto;
}
body::before {
  content: "";
  position: absolute;
  background: url(../images/head.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 56px;
}

.hero {
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  background: url(../images/stamp.png);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 160px;
  height: 207px;
  top: 10%;
  left: 3%;
}
@media only screen and (max-width: 1024px) {
  .hero::before {
    width: 90px;
    height: 120px;
  }
}
@media only screen and (max-width: 640px) {
  .hero::before {
    left: 50%;
    transform: translateX(-50%);
  }
}
.hero::after {
  content: "";
  position: absolute;
  background: url(../images/bar.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 60px;
  height: 440px;
  top: 10%;
  right: 3%;
}
@media only screen and (max-width: 640px) {
  .hero::after {
    width: 30px;
  }
}
.hero .kv {
  max-width: 700px;
  width: 90%;
  margin: auto;
  padding: 6rem 0 0;
}
@media only screen and (max-width: 1024px) {
  .hero .kv {
    max-width: 600px;
  }
}
@media only screen and (max-width: 640px) {
  .hero .kv {
    padding-top: 50%;
  }
}
.hero .text {
  font-size: clamp(15px, 1.9765739385vw, 21px);
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  padding: 2rem 0;
  color: #eb7485;
}
@media only screen and (max-width: 640px) {
  .hero .text {
    padding: 1.5rem 0;
  }
}

.intro {
  padding: 3.5rem 0;
}
@media only screen and (max-width: 640px) {
  .intro {
    padding: 1.5rem 0;
  }
}
.intro .date_location {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
@media only screen and (max-width: 640px) {
  .intro .date_location {
    flex-direction: column;
    align-items: center;
  }
}
.intro .date_location .date_label {
  border: 2px solid #eb7485;
  padding: 5px 10px;
  font-weight: bold;
  font-size: 20px;
  margin-right: 10px;
  white-space: nowrap;
}
@media only screen and (max-width: 640px) {
  .intro .date_location .date_label {
    margin-bottom: 10px;
    font-size: 16px;
  }
}
.intro .date_location .date_label.margin-top {
  margin-top: 17px;
}
.intro .date_location .text {
  font-size: clamp(18px, 3.537335vw, 47px);
  font-weight: 500;
  line-height: 1;
}
@media only screen and (max-width: 640px) {
  .intro .date_location .text {
    text-align: center;
  }
}
.intro .date_location .text .highlight {
  font-size: clamp(36px, 5.6368960469vw, 76px);
  font-weight: 500;
}
@media only screen and (max-width: 640px) {
  .intro .date_location .text .highlight {
    font-size: 40px;
  }
}
.intro .date_location .text .sub-highlight {
  font-size: clamp(16px, 1.9765739385vw, 27px);
  font-weight: 500;
  background-color: #eb7485;
  color: #fff;
  padding: 5px 10px;
  border-radius: 50%;
  position: relative;
  top: -10px;
}
@media only screen and (max-width: 640px) {
  .intro .date_location .text .sub-highlight {
    padding: 4px 6px;
    top: -5px;
  }
}
.intro .date_location .text .venue {
  font-size: clamp(24px, 3.537335vw, 47px);
  font-weight: 500;
}
.intro .date_location .text .address {
  font-size: clamp(15px, 1.9765739385vw, 27px);
  margin-top: 1rem;
  letter-spacing: 2px;
}
.intro .nopay_bnr figure {
  max-width: 950px;
  width: 90%;
  margin: 3.5rem auto 0;
}
@media only screen and (max-width: 640px) {
  .intro .nopay_bnr figure {
    width: 100%;
    margin: 2rem auto 0;
  }
}

.anchor-link {
  padding: 3.5rem 0;
}
@media only screen and (max-width: 640px) {
  .anchor-link {
    padding: 1.5rem 0;
  }
}
.anchor-link ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: auto;
}
@media only screen and (max-width: 640px) {
  .anchor-link ul {
    gap: 7px;
  }
}
.anchor-link ul li a {
  display: block;
}

.sec1 {
  padding: 3.5rem 0 7rem;
}
@media only screen and (max-width: 640px) {
  .sec1 {
    padding: 1.5rem 0 3.5rem;
  }
}
.sec1 h2 {
  background-color: #eb7485;
  color: #fff;
  text-align: center;
}
.sec1 h2.date-container {
  font-size: clamp(18px, 3.537335vw, 47px);
  font-weight: 500;
  color: white;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  justify-content: center;
  padding: 1rem 0;
  letter-spacing: -1px;
}
@media only screen and (max-width: 640px) {
  .sec1 h2.date-container {
    padding: 0;
  }
}
.sec1 h2.date-container .big-num {
  font-size: clamp(36px, 5.6368960469vw, 76px);
  line-height: 1;
}
.sec1 h2.date-container .circle {
  background-color: white;
  color: #eb7485;
  border-radius: 50%;
  width: 4.6rem;
  height: 4.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(16px, 1.9765739385vw, 27px);
  font-weight: 500;
  line-height: 1;
  position: relative;
  top: -10px;
}
@media only screen and (max-width: 640px) {
  .sec1 h2.date-container .circle {
    width: 3rem;
    height: 3rem;
    top: -5px;
  }
}
.sec1 .contents-wrapper {
  background-color: #fff;
  width: 85%;
  margin: auto;
}
@media only screen and (max-width: 1024px) {
  .sec1 .contents-wrapper {
    width: 90%;
  }
}
.sec1 .contents-wrapper .item {
  width: 100%;
  padding: 7rem 0;
}
@media only screen and (max-width: 640px) {
  .sec1 .contents-wrapper .item {
    padding: 3.5rem 0;
  }
}
.sec1 h3 {
  text-align: center;
  color: #eb7485;
  font-size: clamp(24px, 3.537335vw, 60px);
  font-weight: 500;
  line-height: 1.3;
}
.sec1 h3 span {
  display: block;
  font-size: clamp(15px, 1.9765739385vw, 27px);
}
.sec1 .info {
  width: 100%;
  margin: 3rem auto;
  max-width: 650px;
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (max-width: 640px) {
  .sec1 .info {
    margin: 1.5rem auto;
  }
}
.sec1 .info.movie .time {
  margin: 2rem 0;
}
@media only screen and (max-width: 640px) {
  .sec1 .info.movie .time {
    margin: 1rem 0;
  }
}
.sec1 .info.movie .time dd {
  line-height: 1;
}
.sec1 dl {
  width: 100%;
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  color: #595757;
}
@media only screen and (max-width: 640px) {
  .sec1 dl {
    margin: 0;
    margin-bottom: 1rem;
    align-items: center;
  }
}
.sec1 dl dt {
  white-space: nowrap;
  font-size: clamp(19px, 1.1713030747vw, 16px);
  font-weight: 500;
}
@media only screen and (max-width: 640px) {
  .sec1 dl dt {
    font-size: 73%;
    width: 16%;
  }
}
.sec1 dl dd {
  font-size: clamp(24px, 3.537335vw, 36px);
  line-height: 1;
  font-weight: 500;
}
@media only screen and (max-width: 640px) {
  .sec1 dl dd {
    padding-top: 4px;
    font-size: 100%;
  }
}
.sec1 dl dd span.small {
  font-size: clamp(12px, 1.9765739385vw, 21px);
}
.sec1 .card {
  display: flex;
  gap: 3rem;
  margin: auto;
  margin-bottom: 4rem;
  justify-content: center;
  width: 100%;
}
@media only screen and (max-width: 640px) {
  .sec1 .card {
    gap: 2rem;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
  }
}
.sec1 .card .gest__wrap {
  display: flex;
  gap: 6.2rem;
  align-items: baseline;
  justify-content: center;
}
@media only screen and (max-width: 1024px) {
  .sec1 .card .gest__wrap {
    gap: 2.2rem;
  }
}
@media only screen and (max-width: 640px) {
  .sec1 .card .gest__wrap {
    gap: 1rem;
  }
}
.sec1 .card .gest__wrap .gest {
  width: 42%;
  display: flex;
  flex-direction: column;
}
@media only screen and (max-width: 640px) {
  .sec1 .card .gest__wrap .gest {
    width: 100%;
  }
}
.sec1 .card .gest__wrap .name {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: clamp(14px, 1.756954612vw, 28px);
  line-height: 1.2;
  text-align: center;
  margin-top: 1rem;
  font-weight: normal;
  color: #595757;
  letter-spacing: 0.2px;
}
.sec1 .detail {
  font-size: clamp(15px, 1.9765739385vw, 27px);
  line-height: 1.35;
  margin-top: 2rem;
  font-weight: 500;
  color: #595757;
  letter-spacing: -1px;
}
@media only screen and (max-width: 640px) {
  .sec1 .detail {
    margin-top: 1rem;
  }
}
.sec1 .dotted-border {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.sec1 .dotted-border::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: radial-gradient(circle, #eb7485 30%, transparent 30%);
  background-size: 10px 10px;
}
.sec1 .flexbox {
  display: flex;
  margin: 3rem 0;
  justify-content: space-between;
}
@media only screen and (max-width: 640px) {
  .sec1 .flexbox {
    display: block;
    margin: 1.5rem 0;
  }
}
.sec1 .flexbox .info {
  margin: 0;
}
@media only screen and (max-width: 1024px) {
  .sec1 .flexbox .info dl {
    display: block;
  }
}
@media only screen and (max-width: 640px) {
  .sec1 .flexbox .info dl {
    display: flex;
  }
}
.sec1 .flexbox .box-left, .sec1 .flexbox .box-right {
  width: 48%;
}
@media only screen and (max-width: 640px) {
  .sec1 .flexbox .box-left, .sec1 .flexbox .box-right {
    width: 100%;
  }
}
@media only screen and (max-width: 640px) {
  .sec1 .flexbox .box-right {
    margin-top: 1rem;
  }
}
.sec1 .flexbox .name, .sec1 .flexbox .theme {
  font-size: clamp(22px, 5vw, 37px);
  line-height: 1.2;
  color: #eb7485;
  margin-bottom: 2rem;
  font-weight: 500;
  letter-spacing: -1px;
}
@media only screen and (max-width: 1024px) {
  .sec1 .flexbox .name, .sec1 .flexbox .theme {
    font-size: clamp(22px, 5vw, 30px);
  }
}
.sec1 .flexbox .name small, .sec1 .flexbox .theme small {
  padding-right: 1rem;
}
@media only screen and (max-width: 640px) {
  .sec1 .flexbox .name {
    text-align: center;
  }
}
@media only screen and (max-width: 640px) {
  .sec1 .flexbox .theme {
    margin-bottom: 0;
    text-align: center;
  }
}
.sec1 .flexbox.theater .box-left {
  width: 39%;
}
@media only screen and (max-width: 640px) {
  .sec1 .flexbox.theater .box-left {
    width: 65%;
    margin: 0 auto;
  }
}
.sec1 .flexbox.theater .box-right {
  width: 60%;
}
@media only screen and (max-width: 640px) {
  .sec1 .flexbox.theater .box-right {
    width: 100%;
  }
}
.sec1 .flexbox.reverse {
  flex-direction: row-reverse;
}
.sec1 .btn {
  border-radius: 5px;
  background-color: #fce9e2;
  color: #eb7485;
  font-weight: 500;
  font-size: clamp(15px, 1.9765739385vw, 27px);
  letter-spacing: -1px;
  margin: 1.5rem auto;
}
@media only screen and (max-width: 640px) {
  .sec1 .btn {
    padding: 1rem;
    gap: 0;
    line-height: 1.3;
    margin-bottom: 0;
  }
}
.sec1 .lead {
  text-align: left;
  color: #595757;
  line-height: 1.5;
  font-size: clamp(16px, 3vw, 21px);
  font-weight: 500;
}
.sec1 .lead.indent {
  padding-left: 2rem;
  text-indent: -2rem;
}
.sec1:last-child {
  padding-bottom: 10rem;
}
.sec1 .program {
  margin: 3rem 0;
}
.sec1 .program h4 {
  font-size: clamp(20px, 5vw, 34px);
  color: #eb7485;
  text-align: center;
  letter-spacing: -1px;
  line-height: 1.5;
  font-weight: 500;
}
.sec1 .program .storyteller {
  font-size: clamp(20px, 5vw, 34px);
  text-align: center;
  letter-spacing: -1px;
  font-weight: 500;
  color: #595757;
}
.sec1 .program dl {
  width: auto;
  margin: auto;
  justify-content: center;
}

.related-events {
  padding: 3.5rem 0 7rem;
  background-image: linear-gradient(0deg, rgb(244, 184, 192), rgb(255, 253, 246) 50%);
}
@media only screen and (max-width: 640px) {
  .related-events {
    padding: 0 0 3.5rem;
  }
}
.related-events h2 {
  width: 90%;
  margin: 0 auto 5rem;
}
@media only screen and (max-width: 640px) {
  .related-events h2 {
    width: 50%;
    margin-bottom: 2.5rem;
  }
}
.related-events .flexbox {
  display: flex;
  margin: 3rem 0;
  justify-content: space-between;
}
@media only screen and (max-width: 640px) {
  .related-events .flexbox {
    display: block;
    margin: 1.5rem 0;
  }
}
.related-events .flexbox h3 {
  text-align: center;
  color: #eb7485;
  font-size: clamp(24px, 3.537335vw, 60px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1px;
}
.related-events .flexbox h3 span {
  display: block;
  font-size: 75%;
}
.related-events .flexbox .info {
  margin: 0;
}
@media only screen and (max-width: 1024px) {
  .related-events .flexbox .info dl {
    display: block;
  }
}
@media only screen and (max-width: 640px) {
  .related-events .flexbox .info dl {
    display: flex;
  }
}
.related-events .flexbox .box-left {
  width: 39%;
}
@media only screen and (max-width: 640px) {
  .related-events .flexbox .box-left {
    width: 65%;
    margin: auto;
  }
}
.related-events .flexbox .box-right {
  width: 60%;
}
@media only screen and (max-width: 640px) {
  .related-events .flexbox .box-right {
    width: 100%;
    margin-top: 1rem;
  }
}
.related-events .flexbox .name, .related-events .flexbox .theme {
  font-size: clamp(22px, 5vw, 37px);
  line-height: 1.2;
  color: #eb7485;
  margin-bottom: 2rem;
  font-weight: 500;
  letter-spacing: -1px;
}
@media only screen and (max-width: 1024px) {
  .related-events .flexbox .name, .related-events .flexbox .theme {
    font-size: clamp(22px, 5vw, 30px);
  }
}
.related-events .flexbox .name small, .related-events .flexbox .theme small {
  padding-right: 1rem;
}
@media only screen and (max-width: 640px) {
  .related-events .flexbox .name {
    text-align: center;
  }
}
@media only screen and (max-width: 640px) {
  .related-events .flexbox .theme {
    margin-bottom: 0;
    text-align: center;
  }
}
.related-events .flexbox.reverse {
  flex-direction: row-reverse;
}
.related-events .info {
  width: 100%;
  margin: 3rem auto;
  max-width: 650px;
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media only screen and (max-width: 640px) {
  .related-events .info {
    margin: 1.5rem 0;
  }
}
.related-events dl {
  width: 100%;
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  color: #595757;
}
@media only screen and (max-width: 640px) {
  .related-events dl {
    margin: 0;
    margin-bottom: 1rem;
    align-items: center;
  }
}
.related-events dl dt {
  white-space: nowrap;
  font-size: clamp(19px, 1.1713030747vw, 16px);
  font-weight: 500;
}
@media only screen and (max-width: 640px) {
  .related-events dl dt {
    font-size: 73%;
    width: 16%;
  }
}
.related-events dl dd {
  font-size: clamp(24px, 3.537335vw, 40px);
  line-height: 1;
  font-weight: 500;
}
@media only screen and (max-width: 640px) {
  .related-events dl dd {
    padding-top: 4px;
    font-size: 100%;
  }
}
.related-events dl dd span.small {
  font-size: 2.4rem;
}
.related-events .co-organized_by {
  display: block;
  max-width: 712px;
  width: 100%;
  margin: 0 auto;
}
.related-events .co-organized_by dl {
  align-items: baseline;
  justify-content: flex-start;
}
.related-events .co-organized_by dt {
  font-size: clamp(15px, 1.9765739385vw, 21px);
}
.related-events .co-organized_by dd {
  font-size: clamp(15px, 1.9765739385vw, 21px);
}
.related-events .btn {
  font-size: clamp(20px, 3.537335vw, 35px);
  width: 100%;
  line-height: 1;
}
@media only screen and (max-width: 640px) {
  .related-events .btn {
    margin-top: 1.5rem;
  }
}

.column {
  background-color: #fffdf6;
  padding: 3.5rem 0;
}
.column .item {
  width: 100%;
  padding: 3.5rem 0;
}
@media only screen and (max-width: 640px) {
  .column .item {
    padding-top: 0;
    padding-bottom: 1.5rem;
  }
}
.column .item.exhibition {
  background-color: #fadcd5;
  padding: 5%;
  margin: 3.5rem 0 7rem;
  border-radius: 20px;
}
@media only screen and (max-width: 640px) {
  .column .item.exhibition {
    margin-top: 0;
    margin-bottom: 3.5rem;
  }
}
@media only screen and (max-width: 640px) {
  .column .item.exhibition .info {
    margin-bottom: 0;
    margin-top: 1.5rem;
  }
}
@media only screen and (max-width: 640px) {
  .column .item.exhibition h3 {
    margin-bottom: 1.5rem;
  }
}
@media only screen and (max-width: 640px) {
  .column .item.exhibition h3 small {
    display: block;
  }
}
.column .detail {
  font-size: clamp(15px, 1.9765739385vw, 27px);
  line-height: 1.35;
  margin-top: 2rem;
  font-weight: 500;
  color: #595757;
  letter-spacing: -1px;
}
@media only screen and (max-width: 640px) {
  .column .detail {
    margin-top: 0;
  }
}
.column .detail.card-txt {
  margin-top: 0;
  text-align: left;
}
.column h3 {
  text-align: center;
  color: #eb7485;
  font-size: clamp(24px, 3.537335vw, 60px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -1px;
}
.column .headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1000px;
  width: 100%;
  gap: 20px;
  padding: 20px;
  margin: auto;
}
@media (min-width: 640px) {
  .column .headline {
    flex-direction: row;
    align-items: center;
  }
}
@media only screen and (max-width: 640px) {
  .column .headline {
    padding: 2rem 0;
  }
}
@media (min-width: 640px) {
  .column .headline figure {
    flex-shrink: 0;
  }
}
.column .headline figure img {
  width: 100%;
}
@media only screen and (max-width: 640px) {
  .column .headline figure img {
    width: 65%;
  }
}
.column .headline .block-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
}
@media (min-width: 640px) {
  .column .headline .block-container {
    flex-direction: row;
    justify-content: flex-start;
  }
}
.column .headline .block-container.nowrap {
  flex-wrap: nowrap;
}
@media only screen and (max-width: 640px) {
  .column .headline .block-container.nowrap {
    flex-wrap: wrap;
  }
}
.column .headline .block {
  flex: 1;
  min-width: 280px;
  padding: 20px;
  border-radius: 20px;
  font-size: clamp(15px, 1.9765739385vw, 21px);
  color: #fff;
  line-height: 1.3;
}
@media (min-width: 640px) {
  .column .headline .block {
    width: 48%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.column .headline .block.bg-pink {
  background-color: #eb7485;
}
.column .headline .block.bg-blue {
  background-color: #46b1e2;
}
.column .info {
  width: 100%;
  margin: 3rem auto;
  max-width: 720px;
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.column dl {
  width: 100%;
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  color: #595757;
}
@media only screen and (max-width: 640px) {
  .column dl {
    margin: 0;
    margin-bottom: 1rem;
    align-items: center;
  }
}
.column dl dt {
  white-space: nowrap;
  font-size: clamp(19px, 1.1713030747vw, 16px);
  font-weight: 500;
}
@media only screen and (max-width: 640px) {
  .column dl dt {
    font-size: 73%;
    width: 16%;
  }
}
.column dl dd {
  font-size: clamp(24px, 3.537335vw, 40px);
  line-height: 1;
  font-weight: 500;
}
@media only screen and (max-width: 640px) {
  .column dl dd {
    padding-top: 4px;
    font-size: 100%;
  }
}
.column dl dd span.small {
  font-size: 2.4rem;
}
.column .btn {
  font-size: clamp(20px, 3.537335vw, 35px);
  width: 100%;
  line-height: 1;
}
@media only screen and (max-width: 640px) {
  .column .btn {
    margin-top: 1.5rem;
  }
}
.column .btn.bg-pink {
  margin-top: 0;
}

footer {
  background: #eb7485;
  color: #fff;
}
footer .container {
  max-width: 1280px;
  padding: 4rem 0 6rem;
}
footer .box_wrap {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 640px) {
  footer .box_wrap {
    flex-direction: column;
  }
}
footer .box1 {
  width: 40.2635431918vw;
}
@media only screen and (max-width: 640px) {
  footer .box1 {
    width: 100%;
  }
}
footer .box2 {
  width: 51.2445095168vw;
}
@media only screen and (max-width: 640px) {
  footer .box2 {
    width: 100%;
  }
}
footer .flex {
  align-items: center;
  gap: 1rem;
}
footer .logo {
  width: 112px;
  height: 112px;
}
footer .title {
  font-size: clamp(15px, 2.196193265vw, 30px);
  font-weight: normal;
}
footer .place {
  font-size: clamp(15px, 1.317715959vw, 18px);
  margin-bottom: 2rem;
  font-weight: normal;
}
footer .address {
  font-size: clamp(12px, 1.317715959vw, 18px);
  font-weight: normal;
}
footer .organized {
  margin-bottom: 1rem;
}
footer .note {
  font-weight: normal;
  margin-top: 0;
}
footer .note li {
  font-size: clamp(12px, 1.1713030747vw, 16px);
  display: inline-block;
  padding-left: 1.2em;
  text-indent: -1.2em;
}
footer .copyright {
  text-align: center;
  margin-top: 3rem;
}
footer .copyright small {
  font-size: 1.2rem;
  font-size: clamp(10px, 1.25vw, 16px);
  font-weight: normal;
}

#pagetop-bnr a {
  width: 55px;
  height: 55px;
  position: fixed;
  z-index: 99;
  right: 2.5vw;
  bottom: 3.1em;
  display: block;
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}/*# sourceMappingURL=style.css.map */