@charset "utf-8";

/* webフォント検索用 */
.FFDINWebProMedium { font-family: FFDINWebProMedium; }
.HelveticaNeueLTPro-Th { font-family: HelveticaNeueLTPro-Th; }
.HelveticaNeueLTPro-Roman { font-family: HelveticaNeueLTPro-Roman; }

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 * html/body
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

*, *:after, *:before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

/* リンクなどの要素をタップした時の色を消す */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 長押しした際に表示されるポップアップメニューを消す */
* {
    -webkit-touch-callout: none;
}

/* 行頭禁則文字 */
* {
	word-break: break-word;
	word-wrap: break-word;
}

body {
	width: 100%;
	position: relative;
	background: #ffffff;
	font-family: "Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(12px, 1vw, 16px);
	line-height: 1.5;
	color: #000000;
	margin: 0;
	padding: 0;
	overflow-y: scroll;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 * module(全ページ共通のパーツ)
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* display
-------------------------------------------------------------*/

.disp {
	display: block !important;
}

.disp-none {
	display: none !important;
}

.disp-table {
	display: table !important;
}

.disp-inline {
	display: inline !important;
}

.disp-inline-block {
	display: inline-block !important;
}

.sp-disp {
	display: none !important;
}

.sp-disp-table {
	display: none !important;
}

.sp-disp-inline {
	display: none !important;
}

.sp-disp-inline-block {
	display: none !important;
}

.tb-disp {
	display: none !important;
}

.tb-disp-table {
	display: none !important;
}

.tb-disp-inline {
	display: none !important;
}

.tb-disp-inline-block {
	display: none !important;
}

@media screen and (max-width: 1024px) {
    .tb-disp {
        display: block !important;
    }

    .tb-disp-table {
        display:table !important;
    }

    .tb-disp-inline {
        display:inline !important;
    }

    .tb-disp-inline-block {
        display: inline-block !important;
    }

    .tb-disp-none {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .sp-disp {
        display: block !important;
    }

    .sp-disp-table {
        display:table !important;
    }

    .sp-disp-inline {
        display:inline !important;
    }

    .sp-disp-inline-block {
        display: inline-block !important;
    }

    .sp-disp-none {
        display: none !important;
    }
}

/* visibility
-------------------------------------------------------------*/

.visibility-hidden {
	visibility: hidden !important;
}

.visibility-visibile {
	visibility: visible !important;
}

/*-------------------------  main-visual ------------------------- */

.main-visual {
    position: relative;
	width: 100%;
	height: 100vh;
}

@media screen and (max-width: 1024px) {
    .main-visual {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
    }
}

.tatenaga .main-visual {
    height : auto;
}

.loader {
    position: absolute;
	width: 100%;
	height: 100vh;
}

.loader.auto {
    position: absolute;
	width: 100%;
	height: 100%;
}

.tatenaga .loader {
    height : 100%;
}

.circle {
    width: 100px;
    height: 100px;
    display: -webkit-box;
	display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}

.circle-border {
  width: 100px;
  height: 100px;
  padding: 0.5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0.1) 33%, rgba(0,0,0,1) 100%);
  animation: spin .5s linear 0s infinite;
}

@media screen and (max-width: 1024px) {
    .circle {
        width: 50px;
        height: 50px;
        display: -webkit-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
    }

    .circle-border {
      width: 50px;
      height: 50px;
      padding: 0.5px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background: rgb(0,0,0);
      background: linear-gradient(0deg, rgba(0,0,0,0.1) 33%, rgba(0,0,0,1) 100%);
      animation: spin .5s linear 0s infinite;
    }
}

.circle-core {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 50%;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(359deg);
  }
}

.main-visual-content {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0px;
	flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
}

.main-visual-card {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 50%;
    height: 100%;
	margin: 0 auto;
	padding: 0 11% 10% 0;
	flex-wrap: nowrap;
    -webkit-box-pack: justify;
    align-items: center;
}

.main-visual-text {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 50%;
    height: 100%;
	margin: 0 auto;
	padding: 0 0 10%;
	flex-wrap: nowrap;
    -webkit-box-pack: justify;
    align-items: center;
}

@media screen and (min-width: 1024px) {
    .tatenaga .main-visual-content {
        padding-top: 100px;
    }
}

@media screen and (max-width: 1024px) {
    .main-visual-content {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0px;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column; /*縦並び*/
        align-items: center;
        opacity: 0;
    }
    
    .main-visual-card {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 0 0 20% 40%;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        order: 2;
        align-items: center;
    }
    
    .main-visual-text {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 5% 5% 0;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        align-items: center;
        order: 1;
    }
}

@media screen and (max-width: 768px) {
    .main-visual-card {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 0 0 10% 30%;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        order: 2;
        align-items: center;
    }
    
    .main-visual-text {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding: 10% 5% 10%;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        align-items: center;
        order: 1;
    }
}

.swiper {
    position: relative;
    width: 100%;
    transform:rotate(-5deg);
}

.swiper-slide {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    padding: 4%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.swiper-slide:nth-child(1n) {
    background-color: #6439ff;
}

.swiper-slide:nth-child(2n) {
    background-color: #3f61ea;
}

.swiper-slide:nth-child(3n) {
    background-color: #00ccdd;
}

.slide-mv {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 3%;
    border-radius: 5px;
    overflow: hidden;
}

.slide-mv-source {
    position: relative;
    top: 0;
    left: 0;
}

.slide-mv-title-num {
    position: absolute;
    left: 4%;
    top: 2%;
    z-index: 10;
    margin-bottom: 0;
    line-height: 1;
    font-size: clamp(16px, 3vw, 50px);
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal; 
}

.slide-mv-title-num.black {
    color: #000000;
}

.slide-mv-title-ja {
    position: relative;
    margin-left: 3.2vw;
    margin-bottom: 1vw;
    line-height: 1;
    font-size: clamp(16px, 1.8vw, 30px);
}

.slide-mv-title-ja:before {
    content: "";
    position: absolute;
    left: -3.2vw;
    top: -20%;
    z-index: 10;
    line-height: 1;
    font-size: clamp(20px, 3vw, 50px);
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal; 
}

.slide-mv-title-ja.no1:before {
    content: "1";
}

.slide-mv-title-ja.no2:before {
    content: "2";
}

.slide-mv-title-ja.no3:before {
    content: "3";
}

.slide-mv-title-ja.black {
    color: #000000;
}

.slide-mv-title-en {
    margin-left: 3.2vw;
    margin-bottom: 0;
    line-height: 1;
   font-size: clamp(12px, 0.9vw, 18px);
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.slide-mv-title-en.black {
    color: #000000;
}

@media screen and (max-width: 768px) {
    .slide-mv-title-ja {
        position: relative;
        margin-left: 3.5vw;
        margin-bottom: 1vw;
        line-height: 1;
        font-size: clamp(12px, 1.5vw, 30px);
    }

    .slide-mv-title-ja:before {
        content: "";
        position: absolute;
        left: -3.5vw;
        top: -20%;
        z-index: 10;
        line-height: 1;
        font-size: clamp(20px, 3vw, 50px);
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-weight: 600;
        font-style: normal; 
    }
    
    .slide-mv-title-en {
        margin-left: 3.5vw;
        margin-bottom: 0;
        line-height: 1;
        font-size: clamp(10px, 0.9vw, 18px);
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-weight: 600;
        font-style: normal;
    }
}

@media screen and (max-width: 430px) {
    .slide-mv-title-ja {
        position: relative;
        margin-left: 5vw;
        margin-bottom: 1vw;
        line-height: 1;
        font-size: clamp(12px, 1.5vw, 30px);
    }

    .slide-mv-title-ja:before {
        content: "";
        position: absolute;
        left: -5vw;
        top: -20%;
        z-index: 10;
        line-height: 1;
        font-size: clamp(20px, 3vw, 50px);
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-weight: 600;
        font-style: normal; 
    }
    
    .slide-mv-title-en {
        margin-left: 5vw;
        margin-bottom: 0;
        line-height: 1;
        font-size: clamp(10px, 0.9vw, 18px);
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-weight: 600;
        font-style: normal;
    }
}

.autoplay-progress {
    position: absolute;
    right: 4%;
    bottom: 4%;
    z-index: 10;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 12px;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #ffffff;
}

.swiper-slide.slide3.swiper-slide-active + .autoplay-progress {
    color: #000000;
}

.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 2px;
    stroke: #ffffff;
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

.swiper-slide.slide3.swiper-slide-active + .autoplay-progress svg {
    stroke: #000000;
}

.main-visual-text-inner {
    position: relative;
    width: 90%;
    padding-left: 5%;
}

@media screen and (max-width: 1024px) {
    .main-visual-text-inner {
        position: relative;
        width: 100%;
        padding-left: 0;
    }
}

.main-visual-copy {
    margin-bottom: 6%;
    line-height: 1.2;
    font-size: clamp(24px, 3.4vw, 80px);
    font-family: "Yu Gothic StdN E";
}

.main-visual-subcopy-wrapper {
    position: relative;
    width: 100%;
}

.main-visual-subcopy {
    margin-bottom: 3%;
    font-size: clamp(16px, 1.05vw, 24px);
}

/*
@media screen and (max-width: 1024px) {   
    .main-visual-subcopy br {
        display: none;
    }
}
*/

@media screen and (max-width: 1024px) {
    .main-visual-copy {
        margin-bottom: 3%;
        line-height: 1.2;
        font-size: clamp(24px, 5vw, 80px);
        font-family: "Yu Gothic StdN E";
    }
    
    .main-visual-subcopy {
        margin-bottom: 3%;
        font-size: clamp(16px, 1.05vw, 24px);
    }
}

@media screen and (max-width: 768px) {
    .main-visual-subcopy {
        margin-bottom: 3%;
        font-size: clamp(14px, 0.8vw, 20px);
    }
}

.main-visual-scroll-arrow {
	display: none;
	position: absolute;
	z-index: 6;
	bottom: 30px;
	right: 50%;
	width: 1px;
	height: 70px;
	margin: 0 auto;
	background-color: rgba(0,0,0,0.5);
}

.main-visual-scroll-arrow.white {
	background-color: rgba(255,255,255,0.2);
}

.main-visual-scroll-arrow::before {
	content: '';
	position: absolute;
	top: 0;
	left: -2.5px;
	width: 6px;
	height: 6px;
	margin: 0 auto;
    border-radius: 50%;
    background: #222222;
	-webkit-animation: moveDown 1.5s ease-in-out infinite;
	animation: moveDown 1.5s ease-in-out infinite;
}

.main-visual-scroll-arrow.white::before {
    background: #ffffff;
}

@media screen and (max-width: 768px) {
    .main-visual-scroll-arrow {
        display: none;
        position: absolute;
        z-index: 6;
        bottom: 30px;
        left: 5%;
        right: auto;
        width: 1px;
        height: 70px;
        margin: 0 auto;
        background-color: rgba(0,0,0,0.5);
    }
    
    .main-visual-scroll-arrow.white {
        display: none;
        position: absolute;
        z-index: 6;
        bottom: 30px;
        left: auto;
        right: 50%;
        width: 1px;
        height: 70px;
        margin: 0 auto;
        background-color: rgba(255,255,255,0.2);
    }
}

@-webkit-keyframes moveDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0
    }
}

@keyframes moveDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateX(0)
    }

    100% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0
    }
}

/*-------------------------  header ------------------------- */

.header {
	position: relative;
    z-index: 100;
	width: 100%;
	margin: 0 auto;
	padding: 1.2vw 2vw;
	background: rgba(255,255,255,0.9);
    opacity: 0;
}

.header.fixed {
	position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 0.6vw 2vw;
}

@media screen and (max-width: 1280px) {
    .header {
        position: relative;
        z-index: 100;
        width: 100%;
        margin: 0 auto;
        padding: 1.2vw 11vw 1.2vw 2vw;
        background: rgba(255,255,255,0.9);
        opacity: 0;
    }
    
    .header.fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        padding: 1.2vw 11vw 1.2vw 2vw;
    }
}

@media screen and (max-width: 768px) {
    .header {
        position: relative;
        z-index: 100;
        width: 100%;
        margin: 0 auto;
        padding: 3vw 11vw 3vw 2vw;
        background: rgba(255,255,255,0.9);
        opacity: 0;
    }
    
    .header.fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        padding: 3vw 11vw 3vw 2vw;
    }
}

.header.page {
    opacity: 1;
}

.header-inner {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0px;
	flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
}

.header-logo {
    position: relative;
	width: clamp(13.75rem, 10rem + 4.69vw, 14rem);
	margin: 0;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

@media screen and (max-width: 1280px) {
    .header-logo {
        position: relative;
        width: clamp(8.75rem, 6.453rem + 10.68vw, 13rem);
        margin: 0;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
}

.header-logo img {
    position: relative;
    width: 100%;
	height: auto;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.header-link-wrap {
    position: relative;
    display: -webkit-box;
	display: flex;
	height: 5.5vw;
	margin: 0;
	padding: 0px;
	flex-wrap: nowrap;
}

.header-link-wrap.small {
    height: 4vw;
}

.header-link {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: clamp(100px, 9vw, 200px);
	height: 100%;
	margin: 0;
	padding: 0px;
    background: #222222;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-transition: all 0.3s;
	transition: all 0.3s;
}

@media screen and (max-width: 1024px) {
    .header-link-wrap {
        position: relative;
        display: -webkit-box;
        display: flex;
        height: 7vw;
        margin: 0;
        padding: 0px;
        flex-wrap: nowrap;
    }

    .header-link-wrap.small {
        height: 7vw;
    }

    .header-link-wrap.small .header-link {
        width: clamp(100px, 9vw, 200px);
    }
}

@media screen and (max-width: 768px) {
    .header-link-wrap {
        display: none;
    }
}

.header-link:hover {
    opacity: 0.8;
}

.header-link.left {
    margin-right: 1px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.header-link.left img {
    width: 60%;
}

.header-link.right {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.header-link.right img {
    width: 70%;
}

/*-------------------------  nav ------------------------- */

nav {
    position: relative;
	height: 100%;
	margin: 0;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.white {
    padding-top: 10px;
}

@media screen and (max-width: 1280px) {
    nav {
        display: none;
    }
}

nav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0px;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
    align-items: center;
}

nav ul li {
	display: block;
	list-style-type: none;
	width: 100%;
	height: 100%;
	margin: 0 0.8vw;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}

nav ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
    text-align: center;
	line-height: 1.2;
    white-space: nowrap;
	font-size: clamp(1rem, 0.5rem + 0.63vw, 1.15rem);
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #000000;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

nav.white ul li a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
    text-align: center;
	line-height: 1;
    white-space: nowrap;
	font-size: clamp(1rem, 0.5rem + 0.63vw, 1.1rem);
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #ffffff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8),
    -1px 1px 3px rgba(0,0,0,0.8),
    1px -1px 3px rgba(0,0,0,0.8),
    -1px -1px 3px rgba(0,0,0,0.8);
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

nav ul li a > font {
    margin-left: -0.1em;
    vertical-align: 0.1em;
}

nav ul li a > span {
    font-family: "Yu Gothic Pr6N D", sans-serif;
	font-size: 11px;
}

nav ul li.current_on a,
nav ul li a:hover {
    color: #6439ff;
}

nav.white ul li.current_on a,
nav.white ul li a:hover {
    color: #ffffff;
}

nav ul li a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #6439ff;
    -webkit-transition: all 0.3s;
	transition: all 0.3s;
}

nav.white ul li a:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%,0%);
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    border-top: 5px solid #ffffff;
    border-bottom: 0;
    border-radius: 0;
    -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3)) drop-shadow(-1px 1px 2px rgba(0,0,0,0.3)) drop-shadow(1px -1px 2px rgba(0,0,0,0.3)) drop-shadow(-1px -1px 2px rgba(0,0,0,0.3));
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3)) drop-shadow(-1px 1px 2px rgba(0,0,0,0.3)) drop-shadow(1px -1px 2px rgba(0,0,0,0.3)) drop-shadow(-1px -1px 2px rgba(0,0,0,0.3));
	-webkit-transition: all 0.3s;
}

nav ul li.current_on a:before,
nav ul li a:hover:before {
    content: "";
    position: absolute;
    top: -0.6vw;
    left: 50%;
    transform: translate(-50%,0%);
    width: 0.35vw;
    height: 0.35vw;
    border-radius: 50%;
    background: #6439ff;
}

nav.white ul li.current_on a:before,
nav.white ul li a:hover:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%,0%);
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    border-top: 5px solid #ffffff;
    border-bottom: 0;
    border-radius: 0;
    -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3)) drop-shadow(-1px 1px 2px rgba(0,0,0,0.3)) drop-shadow(1px -1px 2px rgba(0,0,0,0.3)) drop-shadow(-1px -1px 2px rgba(0,0,0,0.3));
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3)) drop-shadow(-1px 1px 2px rgba(0,0,0,0.3)) drop-shadow(1px -1px 2px rgba(0,0,0,0.3)) drop-shadow(-1px -1px 2px rgba(0,0,0,0.3));
	-webkit-transition: all 0.3s;
}

/*-------------------------  hamburger------------------------- */
.hamburger {
    display: none;
}

.global-menu {
    display: none;
}

@media screen and (max-width: 1280px) {
    .hamburger {
        display: block;
        position: absolute;
        z-index : 103;
        right : 0;
        top   : 0;
        width : auto;
        height: 100%;
        aspect-ratio: 1 / 1;
        background : #6439ff;
        cursor: pointer;
        text-align: center;
    }
}

.hamburger div {
	display : block;
	position: absolute;
    left: 50%;
	width: 50%;
	height: 1px;
    margin-left: -25%;
    border-radius: 0.69vw;
	background : #ffffff;
	transition: 0.3s ease-in-out;
}

.hamburger div:nth-child(1) {
	top: 40%;
}

.hamburger div:nth-child(2) {
	top: 50%;
}

/* スマホメニューを開いてる時のボタン */
.hamburger.active div:nth-child(1) {
	top: 40%;
    left: 50%;
    margin-left: -25%;
	transform: rotate(-45deg);
}

.hamburger.active div:nth-child(2) {
	top: 40%;
    left: 50%;
    margin-left: -25%;
	transform: rotate(45deg);
}

.hamburger span {
	display : block;
	position: absolute;
    left: 50%;
    top: 60%;
    width: 100%;
    margin-left: -50%;
    text-align: center;
    letter-spacing: 1px;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-style:  normal;
    font-weight: 500;
    font-size: clamp(10px, 1vw, 16px);
    color: #ffffff;
}

/* メニュー背景　*/
.global-menu {
    display: block;
    position: fixed;
    z-index : 102;
    top  : 0;
    right : 0;
    width: 50%;
    height: 100vh;
    padding: 15% 5%;
    background: rgba(255,255,255,0.95);
    overflow-y: scroll;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;
}

@media screen and (min-width: 1280px) {
    .global-menu {
        display: none;
    }
}

.global-menu ul {
    margin: 1.38vw auto 0;
    padding: 0;
    width: 100%;
}

.global-menu ul li {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 2vw;
    line-height: 2vw;
    margin-bottom: 30px;
    padding-left: 2vw;
    transition: .4s all;
}

.global-menu ul li:before {
    content: "";
    position: absolute;
    top: 1.38vw;
    left: 0;
    width: 1.38vw;
    height: 1px;
    background: #242b3b;
}

.global-menu ul li:last-child {
    padding-bottom: 0;
}

.global-menu ul li a {
    display: inline-block;
    padding: 0.35vw 0;
    text-decoration : none;
    vertical-align: middle;
    height: 2vw;
    line-height: 2vw;
    font-size: clamp(12px, 1vw, 20px);
    font-family: "Yu Gothic Pr6N D", sans-serif;
    color: #242b3b;
}

.global-menu ul li a span {
    display: inline-block;
    vertical-align: middle;
    height: 2vw;
    margin-right: 1.38vw;
    line-height: 2vw;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(16px, 2vw, 40px);
}

/* クリックでjQueryで追加・削除 */
.global-menu.active {
    opacity: 1;
    display: block;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

@media screen and (max-width: 768px) { 
    /* メニュー背景　*/
    .global-menu {
        display: block;
        position: fixed;
        z-index : 102;
        top  : 0;
        right : 0;
        width: 100%;
        height: 100vh;
        padding: 15% 5%;
        background: rgba(255,255,255,0.95);
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-transition: all 0.6s;
        -moz-transition: all 0.6s;
        transition: all 0.6s;
    }
    
    .global-menu ul li {
        position: relative;
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 2vw;
        line-height: 2vw;
        margin-bottom: 30px;
        padding-left: 2vw;
        transition: .4s all;
    }
}

@media screen and (max-width: 428px) {
    .global-menu ul li:before {
        content: "";
        position: absolute;
        top: 2vw;
        left: 0;
        width: 1.38vw;
        height: 1px;
        background: #242b3b;
    }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 * footer
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

footer {
	position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: stretch;
    align-items: stretch; /*横並びの高さを揃える*/
	width: 100%;
	margin: 0 auto;
    padding: 0.5vw 3vw 3vw;
}

.footer-left {
	position: relative;
	width: calc(50% - 0.25vw);
	margin: 0;
    padding: 4vw;
    border-radius: clamp(5px, 0.69vw, 20px);
    background: #222222;
}

.footer-right {
    position: relative;
	width: calc(50% - 0.25vw);
	margin: 0;
}

@media screen and (max-width: 430px) {
    footer {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: stretch;
        align-items: stretch; /*横並びの高さを揃える*/
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 1vw 3vw 3vw;
    }

    .footer-left {
        position: relative;
        width: 100%;
        margin: 0 0 1vw;
        padding: 4vw;
        border-radius: clamp(5px, 0.69vw, 20px);
        background: #222222;
    }

    .footer-right {
        position: relative;
        width: 100%;
        margin: 0;
    }
}

.footer-logo {
    margin-bottom: 4vw;
}

.footer-logo img {
    width: clamp(100px, 12vw, 250px);
    height: auto;
    -webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.footer-logo img:hover {
    opacity: 0.7;
}

.footer-menu {
	position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
	width: 100%;
	margin: 0 auto 4vw;
}

.footer-menu ul {
	width: auto;
	margin: 0 2vw 0 0;
	padding: 0 
}

.footer-menu ul li {
    position: relative;
	margin: 0 0 20px 15px;
	padding: 0.3vw 0;
    list-style-type: disc;
    line-height: 1;
    color: #ffffff;
}

.footer-menu ul li a {
    font-family: "Yu Gothic Pr6N D", sans-serif;
    font-size: clamp(8px, 0.6vw, 12px);
    color: #ffffff;
    -webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.footer-menu ul li a span {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(10px, 0.9vw, 16px);
}

.footer-menu ul li a:hover {
    text-decoration: none;
    color: #ffffff;
    opacity: 0.7;
}

@media screen and (max-width: 1345px) {
    .footer-menu {
        position: relative;
        display: block;
        width: 100%;
        margin: 0 auto 4vw;
    }

    .footer-menu ul {
        display: inline;
        width: auto;
        margin: 0;
        padding: 0 
    }

    .footer-menu ul li {
        display: inline-block;
        position: relative;
        margin: 0;
        margin-right: 1.2vw;
        padding: 0.5vw 0 0.5vw 12px;
        list-style-type: disc;
        color: #ffffff;
    }
    
    .footer-menu ul li:before {
        content: "-";
        position: absolute;
        top: 0.5vw;
        left: 0;
    }

    .footer-menu ul li a {
        font-size: clamp(10px, 0.7vw, 12px);
        color: #ffffff;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .footer-menu ul li a br {
        display: none;
    }

    .footer-menu ul li a span {
        display: none;
    }
}

@media screen and (max-width: 430px) {
    .footer-menu {
        position: relative;
        display: block;
        width: 100%;
        margin: 0 auto 4vw;
    }

    .footer-menu ul {
        display: inline;
        width: 100%;
        margin: 0;
        padding: 0;
        letter-spacing: -.4em;
    }
      
    .footer-menu ul li {
        letter-spacing: normal;
    }

    .footer-menu ul li:not(.sub) {
        display: inline-block;
        position: relative;
        width: 50%;
        margin: 0;
        padding: 3vw 12px 3vw 16px;
        letter-spacing: normal;
        border-top: 1px solid rgba(255,255,255,0.5);
        color: #ffffff;
    }
    
    .footer-menu ul li.odd {
        border-right: 1px solid rgba(255,255,255,0.5);
    }
    
    .footer-menu ul li.bb {
        border-bottom: 1px solid rgba(255,255,255,0.5);
    }
    
    .footer-menu ul li:not(.sub):before {
        content: "\E800";
        position: absolute;
        top: 3.3vw;
        left: 8px;
        font-family: "tsg-school2024-v2";
        font-size: clamp(8px, 0.7vw, 12px);
    }
    
    .footer-menu ul li.sub {
        margin-top: 10px;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    .footer-menu ul li:not(.sub) a {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .footer-menu ul li.current_on a {
        font-size: clamp(10px, 0.7vw, 12px);
        color: #00ccdd;
    }
    
    .footer-menu ul li.current_on:before {
         color: #00ccdd;
    }
}

@media screen and (max-width: 344px) {
     .footer-menu ul li:not(.sub):before {
        content: "\E800";
        position: absolute;
        top: 2.3vw;
        left: 8px;
        font-family: "tsg-school2024-v2";
        font-size: 8px;
    }
 
     .footer-menu ul li a {
        font-size: 8px !important;
        color: #ffffff;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
}

.copyright {
	position: relative;
	width: 100%;
}

.copyright2 {
	display: none;
}

.copyright small, .copyright2 small {
	font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;
	font-size: clamp(8px, 0.7vw, 16px);
	color: #ffffff;
}

@media screen and (max-width: 430px) {
    .copyright {
        display: none;
    }
    
    .copyright2 {
        display: block;
        position: relative;
        width: 100%;
        text-align: center;
    }
}

.footer-right-inner {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-direction: column;; /*縦並び*/
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
	width: 100%;
    height: 100%;
	margin: 0 auto;
}

.footer-sns-wrap {
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: calc(50% - 0.25vw);
    border-radius: clamp(5px, 0.69vw, 20px);
    background: #6439ff;
    font-size: clamp(10px, 0.8vw, 16px);
    color: #ffffff;
}

.footer-org-wrap {
    display: flex;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 100%;
    height: calc(50% - 0.25vw);
    border-radius: clamp(5px, 0.69vw, 20px);
    background: #222222;
    font-size: clamp(10px, 0.8vw, 16px);
    color: #ffffff;
}

@media screen and (max-width: 430px) {
    .footer-sns-wrap {
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: 100%;
        height: calc(50% - 0.25vw);
        margin: 0 0 1vw;
        padding: 5vw;
        border-radius: clamp(5px, 0.69vw, 20px);
        background: #6439ff;
        font-size: clamp(10px, 0.8vw, 16px);
        color: #ffffff;
    }

    .footer-org-wrap {
        display: block;
        width: 100%;
        height: calc(50% - 0.25vw);
        padding: 5vw;
        border-radius: clamp(5px, 0.69vw, 20px);
        background: #222222;
        font-size: clamp(10px, 0.8vw, 16px);
        color: #ffffff;
    } 
}

.footer-sns-wrap-inner {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 0 5%;
}

@media screen and (max-width: 530px) {
    .footer-sns-wrap-inner p {
        text-align: left;
    }
    
    .footer-sns-wrap-inner p br {
        display: none;
    }
}

.sns-btn-wrap {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    text-align: center !important;
}

@media screen and (max-width: 660px) {
    .sns-btn-wrap {
        width: 90%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }
}

@media screen and (max-width: 530px) {
    .sns-btn-wrap {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }
}

.sns-btn {
    display: inline-block;
    margin: 0 1.2vw;
}

@media screen and (max-width: 460px) {
    .sns-btn {
        display: inline-block;
        margin: 0 0.8vw;
    }
}

@media screen and (max-width: 430px) {
    .sns-btn {
        display: inline-block;
        margin: 0 2vw;
    }
}

.sns-btn img {
    width: clamp(25px, 2.5vw, 50px);
    height: clamp(25px, 2.5vw, 50px);
    -webkit-transition: all 0.3s;
	transition: all 0.3s;
}

@media screen and (max-width: 430px) {
    .sns-btn img {
        width: 30px;
        height: 30px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
}

.sns-btn img:hover {
    opacity: 0.7;
}

.footer-org-logo-inner {
    position: relative;
    width: auto;
    margin: 0 auto;
    padding: 5vw 0;
}

@media screen and (max-width: 580px) {
    .footer-org-logo-inner {
        position: relative;
        width: auto;
        margin: 0 auto;
        padding: 5vw 10vw;
    }
}

@media screen and (max-width: 480px) {
    .footer-org-logo-inner {
        position: relative;
        width: auto;
        margin: 0 auto;
        padding: 5vw 8vw;
    }
}

@media screen and (max-width: 430px) {
    .footer-org-logo-inner {
        position: relative;
        width: auto;
        margin: 0 auto;
        padding: 5vw;
    }
}

.footer-org-logo {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
	margin: 0 auto;
}

.footer-org-logo-content.title {
    padding-right: 1.5vw;
}

.footer-org-logo-content img {
    -webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.footer-org-logo-content img:hover {
    opacity: 0.7;
}

.footer-org-logo-content.logo1 {
     padding-right: 4vw;
}

.footer-org-logo-content.logo1 img {
    width: clamp(70px, 7vw, 180px);
    height: auto;
}

.footer-org-logo-content.logo2 img {
    width: clamp(70px, 6vw, 180px);
    height: auto;
}


@media screen and (max-width: 580px) {
    .footer-org-logo {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        margin: 0 auto;
    }
    
    .footer-org-logo-content {
        width: auto;
        padding: 2vw 0;
    }
}

@media screen and (max-width: 430px) {
    .footer-org-logo {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        justify-content: space-between;
        margin: 0 auto;
    }
    
    .footer-org-logo-content {
        width: auto;
        padding: 2vw 0;
    }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 * article/section
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

article {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

.wrapper {
	overflow: hidden;
	position: relative;
    width: 100%;
    height: auto;
	margin: 0;
	padding: 0 3vw;
}

.wrapper.single {
	overflow: hidden;
	position: relative;
    width: 100%;
    height: auto;
	margin: 0;
	padding: 0 15vw;
}

@media screen and (max-width: 500px) {
    .wrapper.single {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0 3vw;
    }
}

section {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 *top page
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/*-------------------------  heading ------------------------- */

.top-h2 {
    position: relative;
	margin-bottom: 3vw;
	line-height: 1.2;
}

.top-h2.white {
    color: #ffffff;
}

.top-h2 .ja {
    position: relative;
    padding-left: 1vw;
	font-size: clamp(12px, 1vw, 24px);
}

.top-h2 .ja:before {
    content: "";
    position: absolute;
    top: 25%;
    left: 0;
    height: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #6439ff;
}

@media screen and (max-width: 1024px) {
    .top-h2 .ja {
        position: relative;
        padding-left: 10px;
        font-size: clamp(11px, 1vw, 24px);
    }
    
    .top-h2 .ja:before {
        content: "";
        position: absolute;
        top: 25%;
        left: 0;
        height: 50%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: #6439ff;
    }
}

.top-h2 .en {
    position: relative;
    letter-spacing: -0.03em;
	font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(30px, 5vw, 90px);
}

.top-h2 .en font {
    vertical-align: 0.1em;
}

@media screen and (max-width: 430px) {
    .top-h2 .ja {
        position: relative;
        padding-left: 3vw;
        font-size: clamp(11px, 1vw, 24px);
    }
}

/*-------------------------  section bn ------------------------- */

#section-top-bn {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 3% 0;
	text-align: center;
    border-top: 1px solid #dddddd;
}

.top-banner-wrap {
	position: relative;
    height: auto;
	width: 60%;
	margin: 0 auto;
    padding: 0;
    text-align: center;
}

.top-banner-wrap-long {
	position: relative;
    height: auto;
	width: 100%;
	margin: 0 auto;
    padding: 0;
    text-align: center;
}

.top-banner-wrap-half {
	position: relative;
    overflow: hidden;
    height: auto;
    width: 100%;
    /*max-width: 800px;*/
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.top-banner,
.top-banner-long {
	position: relative;
    margin: 0 20px;
    padding: 1px 0;
}

.top-banner-half {
	position: relative;
    width: 500px;
    margin: 0 20px;
    padding: 1px 0;
}

@media screen and (max-width: 430px) {
    .top-banner-half {
        margin: 0;
    }
}

.top-banner img,
.top-banner-long img,
.top-banner-half img {
    width: 100%;
	border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}

.top-banner img:hover,
.top-banner-long img:hover,
.top-banner-half img:hover {
	opacity: 0.7;
}

.top-banner a,
.top-banner-long a,
.top-banner-half a {
	outline: none;
}

.top-banner-wrap .slick-list {
	overflow: hidden;
}

.top-banner-wrap .slick-prev,
.top-banner-wrap .slick-next {
    margin-top: 0;
}

.top-banner-wrap .slick-prev {
    left: -50px;
}

.top-banner-wrap .slick-next {
    right: -50px;
}

.slick-dots {
    position: relative;
    bottom: auto;
    display: block;
    width: 100%;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

@media screen and (max-width: 430px) {
    .slick-dots {
        margin-top: 0;
    }

    .slick-dots li {
        margin: 0 5px;
    }
}

/*-------------------------  section about ------------------------- */

#section-top-about {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

.top-about-inner {
    position: relative;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto 2%;
	padding: 0;
}

@media screen and (max-width: 1024px) {
    .top-about-inner {
        flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
    }

    /* display:flexで最後の要素だけ左寄せする */
    .top-about-inner:after {
        content: "";
        display: block;
        width: 48%;  /* .boxに指定したwidthと同じ幅を指定する */
        height: 0;
    }
}

@media screen and (max-width: 430px) {
    /* display:flexで最後の要素だけ左寄せする */
    .top-about-inner:after {
        content: "";
        display: block;
        width: 100%;  /* .boxに指定したwidthと同じ幅を指定する */
        height: 0;
    }
}

.top-about {
    position: relative;
    width: 23%;
}

@media screen and (max-width: 1024px) {
    .top-about {
        position: relative;
        z-index: 0;
        width: 48%;
        margin: 0;
    }
}

@media screen and (max-width: 500px) {
    .top-about {
        position: relative;
        z-index: 0;
        width: 100%;
        margin: 0;
    }
}

.top-about img {
    position: relative;
    width: 100%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.top-about-h2 {
    position: relative;
    margin-bottom: 3%;
    font-family: "Yu Gothic StdN E", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2vw, 36px);
}

.top-about-h3 {
    position: relative;
    margin-bottom: 2%;
	font-size: clamp(12px, 0.8vw, 18px);
    font-family: "Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.top-about-h3 span {
    position: relative;
    line-height: 1;
	font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(19px, 1.45vw, 36px);
}

.top-about-h3 span font {
    margin-left: -0.1em;
    vertical-align: 0.1em;
}

/*-------------------------  section program ------------------------- */

#section-top-program {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

.top-program-inner {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-items: center;
	width: 100%;
	margin: 0 auto;
	padding: 3% 0;
    border-radius: clamp(5px, 0.69vw, 20px);
    background: #222222;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.top-program-left {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    align-items: center;
}

.top-program-right {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    padding-right: 5%;
    align-items: center;
    color: #ffffff;
}

.top-program-left img {
    width: 90%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px
}

@media screen and (max-width: 768px) {
    .top-program-inner {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 5% 0;
        border-radius: clamp(5px, 0.69vw, 20px);
        background: #222222;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }

    .top-program-left {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        align-items: center;
    }

    .top-program-right {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        margin: 0 auto;
        padding: 5%;
        align-items: center;
        color: #ffffff;
    }

    .top-program-left img {
        width: 90%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px
    }
}

.top-program-right-inner {
    width: 100%;
}

.top-program-mark {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
	background-color: #6439ff;
	border-radius: 4px;
	line-height: 1;
	font-size: clamp(12px, 0.9vw, 20px);
	color: #ffffff;
}

@media screen and (max-width: 1024px) {
    .top-program-mark {
        position: relative;
        display: inline-block;
        padding: 5px 10px;
        background-color: #6439ff;
        border-radius: 4px;
        line-height: 1;
        font-size: clamp(12px, 0.9vw, 20px);
        color: #ffffff;
    }
}

.top-program-title {
    margin-bottom: 2vw;
}

.top-program-title img {
    width: clamp(9.375rem, 7.329rem + 9.52vw, 18.75rem);
}

.top-program-term {
    margin-bottom: 10px !important;
    font-size: clamp(12px, 1.2vw, 30px);
}

@media screen and (max-width: 768px) {
    .top-program-title {
        text-align: center;
    }
    
    .top-program-term {
        text-align: center;
    }
}

/*
.top-program-title {
    margin-bottom: 2vw;
    line-height: 1;
    font-family: "neue-haas-grotesk-display","Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(18px, 2.4vw, 40px);
}

.top-program-title span {
    font-family: neue-haas-grotesk-display, sans-serif;
    font-weight: 300;
}

.top-program-title font {
    font-size: clamp(12px, 1.5vw, 30px);
}
*/

.top-program-inner p {
    margin-bottom: 2vw;
}

/*-------------------------  section lab ------------------------- */
#section-top-lab {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0 0;
    border-top: 1px solid #dddddd;
}

.coming-soon {
    margin-bottom: 0;
    font-family: "neue-haas-grotesk-display","Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(16px, 1.8vw, 40px);
}

.coming-soon.page {
    margin: 20% auto;
    text-align: center;
}

#section-page-lab-intro {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
}

.page-lab-intro {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
    border-radius: clamp(5px, 0.69vw, 20px);
}

.page-lab-intro-left {
    position: relative;
	width: 49%;
	margin: 0 auto;
	padding: 0;
}

.page-lab-intro-right {
    position: relative;
	width: 51%;
	margin: 0 auto;
	padding: 0;
    text-align: right;
}

.page-lab-intro-right img {
    width: 90%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.page-lab-intro-copy {
    margin-bottom: 0.5vw;
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2vw, 36px);
}

@media screen and (max-width: 768px) {
    .page-lab-intro {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border-radius: clamp(5px, 0.69vw, 20px);
    }

    .page-lab-intro-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        padding-top: 7%;
        order: 2;
    }

    .page-lab-intro-right {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: right;
        order: 1;
    }

    .page-lab-intro-right img {
        width: 100%;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }

    .page-lab-intro-copy {
        margin-bottom: 0.5vw;
        font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
        font-size: clamp(16px, 2vw, 36px);
    }
}

#section-page-lab-contents1 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}


#section-page-lab-contents2 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0 0;
    border-top: 1px solid #dddddd;
}

#section-page-lab-contents3 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

#section-page-lab-contents4 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

.page-lab-contents {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.page-lab-contents-left {
    position: relative;
	width: 30%;
	margin: 0 auto;
	padding: 0;
}

.page-lab-contents-right {
    position: relative;
	width: 70%;
    padding-right: 20%;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .page-lab-contents {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-lab-contents-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-lab-contents-right {
        position: relative;
        width: 100%;
        padding-right: 0;
        margin: 0 auto;
    }
}

.page-lab-contents-list {
    position: relative;
    margin-bottom: 0.5%;
	font-size: clamp(14px, 1.2vw, 30px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.page-lab-inner {
    position: relative;
	display: flex;
	flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
	justify-content: space-between;
	width: 100%;
	margin: 0 auto 2%;
	padding: 0;
}

/* display:flexで最後の要素だけ左寄せする */
.page-lab-inner:after {
    content: "";
    display: block;
    width: 30%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

@media screen and (max-width: 1024px) {
    /* display:flexで最後の要素だけ左寄せする */
    .page-lab-inner:after {
        content: "";
        display: block;
        width: 48%;  /* .boxに指定したwidthと同じ幅を指定する */
        height: 0;
    }
}

@media screen and (max-width: 430px) {
    .page-lab-inner {
        margin-top: 5%;
    }

    /* display:flexで最後の要素だけ左寄せする */
    .page-lab-inner:after {
        content: "";
        display: block;
        width: 100%;  /* .boxに指定したwidthと同じ幅を指定する */
        height: 0;
    }
}

.page-lab {
    position: relative;
    width: 30%;
    margin-bottom: 5%;
}

@media screen and (max-width: 1024px) {
    .page-lab {
        position: relative;
        z-index: 0;
        width: 48%;
        margin-bottom: 5%;
    }
}

@media screen and (max-width: 500px) {
    .page-lab {
        position: relative;
        z-index: 0;
        width: 100%;
        margin-bottom: 10%;
    }
}

.page-lab img {
    position: relative;
    width: 100%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.page-lab-h2 {
    position: relative;
    margin-bottom: 3%;
    font-family: "Yu Gothic StdN E", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2vw, 36px);
}

.page-lab-h3 {
    position: relative;
    margin-bottom: 2%;
	font-size: clamp(12px, 0.8vw, 18px);
    font-family: "Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.page-lab-h3 span {
    position: relative;
    line-height: 1;
	font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(19px, 1.45vw, 36px);
}

.page-lab-h3 span font {
    margin-left: -0.1em;
    vertical-align: 0.1em;
}



/*-------------------------  section events ------------------------- */

#section-top-events {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

.top-events-inner {
    overflow: hidden;
    position: relative;
	margin: 0 -5% 0 0;
    /*padding-left: 1vw;*/
    padding-top: 6vw;
}

.event-carousel {
	position: relative;
	width: 100%;
	height: auto;
    margin-bottom: 3vw;
}

@media screen and (max-width: 768px) {
    .top-events-inner {
        overflow: hidden;
        position: relative;
        margin: 0 -5% 0 -5%;
        padding-left: 5vw;
        padding-top: 10vw;
    }

    .event-carousel {
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 5vw;
    }
}

@media screen and (max-width: 500px) {
    .top-events-inner {
        overflow: visible;
        position: relative;
        margin: 0;
        padding-left: 0;
        padding-top: 0;
    }

    .event-carousel {
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 5vw;
    }
}

.slick-list {
    overflow: visible;
}

.slick-track {
    overflow: visible;
}

.event-box-wrap {
    position: relative;
    display: -webkit-box;
	display: flex;
    -ms-flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
	flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

/* display:flexで最後の要素だけ左寄せする */
.event-box-wrap:after {
    content: "";
    display: block;
    width: 30%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

@media screen and (max-width: 1024px) {
    /* display:flexで最後の要素だけ左寄せする */
    .event-box-wrap:after {
        content: "";
        display: block;
        width: 48%;  /* .boxに指定したwidthと同じ幅を指定する */
        height: 0;
    }
}

@media screen and (max-width: 430px) {
    /* display:flexで最後の要素だけ左寄せする */
    .event-box-wrap:after {
        content: "";
        display: block;
        width: 100%;  /* .boxに指定したwidthと同じ幅を指定する */
        height: 0;
    }
}

.event-box {
	outline: none;
	position: relative;
	z-index: 0;
	width: 30vw;
	margin: 0 2vw;
	background: #ffffff;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
	cursor: pointer;
}

@media screen and (max-width: 768px) {
    .event-box {
        outline: none;
        position: relative;
        z-index: 0;
        width: 50vw;
        margin: 0 2vw;
        background: #ffffff;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
        cursor: pointer;
    }
}

@media screen and (max-width: 500px) {
    .event-box {
        outline: none;
        position: relative;
        z-index: 0;
        width: 100%;
        margin: 0 auto 20px;
        background: #ffffff;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
        cursor: pointer;
    }
}

.event-box.page {
	outline: none;
	position: relative;
	z-index: 0;
	width: 30%;
	margin: 0 0 5%;
	background: #ffffff;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
	cursor: pointer;
}

@media screen and (max-width: 1024px) {
    .event-box.page {
        outline: none;
        position: relative;
        z-index: 0;
        width: 48%;
        margin: 0 0 5%;
        background: #ffffff;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
        cursor: pointer;
    }
}

@media screen and (max-width: 430px) {
    .event-box.page {
        outline: none;
        position: relative;
        z-index: 0;
        width: 100%;
        margin: 0 0 5%;
        background: #ffffff;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
        cursor: pointer;
    }
}

.event-pic {
	overflow: hidden;
	position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.525;
	margin: 0 auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #000000
}

.event-pic img {
    width: 100%;
    height: auto;
}

.event-text {
    width: 100%;
    padding: 1.5vw 2vw;
}

@media screen and (max-width: 430px) {
    .event-text {
        width: 100%;
        padding: 3vw;
    }
}

.event-cat {
	display: inline-block;
    width: auto;
	margin-bottom: 0.5vw;
    margin-right: 3px;
    padding: 0.3vw 0.7vw 0.2vw 0.7vw;
    border-radius: 0.2vw;
    border: 1px solid #222222;
	background: #222222;
	text-align: center;
	line-height: 1;
	font-size: clamp(10px, 0.8vw, 18px);
	color: #ffffff;
}

.event-cat.end {
    border: 1px solid #666666;
	background: #666666;
	color: #ffffff;
}

.event-cat.online {
    border: 1px solid #6439ff;
	background: #f7f7f7;
	color: #6439ff;
}

.event-cat.online i {
   padding-right: 0.2vw;
}

.event-cat.online i:before {
    transform: scale(1.3);
}

.event-cat.real {
    border: 1px solid #6439ff;
	background: #6439ff;
	color: #ffffff;
}

.event-cat.real i {
   padding-right: 0.2vw;
}

.event-cat.real i:before {
    transform: scale(1.3);
}

@media screen and (max-width: 1024px) {
    .event-cat {
        display: inline-block;
        width: auto;
        margin-bottom: 0.5vw;
        padding: 1vw 2vw 0.8vw 2vw;
        border-radius: 0.5vw;
        background: #222222;
        text-align: center;
        line-height: 1;
        font-size: clamp(10px, 0.8vw, 18px);
        color: #ffffff;
    }
}

.event-date {
    position: relative;
    margin-bottom: 0.5vw;
    padding-left: 5%;
    font-family: "neue-haas-grotesk-display","Yu Gothic Pr6N D","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(12px, 1.2vw, 24px);
    color: #6439ff;
}

.event-date:before {
    content: "";
    position: absolute;
    top: 23%;
    left: 0;
    height: 50%;
    aspect-ratio: 1 / 1.111;
    background-image: url('../images/icon-calendar.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.event-date span {
    font-size: clamp(10px, 0.9vw, 20px);
}

.event-ttl {
	position: relative;
	margin: 0 auto 10px;
    line-height: 1.2;
	font-size: clamp(12px, 1.2vw, 24px);
}

.event-ttl a {
	text-decoration: none;
	color: #000000;
	outline: none !important;
}

.event-hashtag {
    position: relative;
	margin: 0 auto;
    line-height: 1.2;
}

.event-hashtag.single {
	margin: 0 auto 2%;
}

.event-hashtag span {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px 10px;
    border: 1px solid #dddddd;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 0 0 2px #f7f7f7;
    line-height: 1;
	font-size: clamp(10px, 0.8vw, 16px);
    font-family: "Yu Gothic Pr6N D", sans-serif;
}

@media screen and (max-width: 1024px) {
    .event-date {
        position: relative;
        margin-bottom: 0.5vw;
        padding-left: 7%;
        font-family: "neue-haas-grotesk-display","Yu Gothic Pr6N D","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: clamp(12px, 1.6vw, 24px);
        color: #6439ff;
    }

    .event-date:before {
        content: "";
        position: absolute;
        top: 23%;
        left: 0;
        height: 50%;
        aspect-ratio: 1 / 1.111;
        background-image: url('../images/icon-calendar.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .event-date span {
        font-size: clamp(12px, 1.2vw, 20px);
    }

    .event-ttl {
        position: relative;
        margin: 0 auto 10px;
        line-height: 1.2;
        font-size: clamp(16px, 1.8vw, 24px);
    }
}

@media screen and (max-width: 768px) {
     .event-date {
        padding-left: 12px;
    }   
}

.event-carousel > .slick-prev,
.event-carousel > .slick-next
{
	top: -6vw;
	left: auto;
	right: auto;
	bottom: auto;
    display: block;
    width: 4vw;
    height: 4vw;
	margin-top: 0;
    border-radius: 0.3vw;
	background: #222222;
	line-height: 80px;
	-webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.event-carousel > .slick-prev {
	right: 9.7vw;
	background-image: url('../images/icon-arrow-pre-white.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40%;
}

.event-carousel > .slick-next {
    right: 5.5vw;
    aspect-ratio: 1 / 1;
    background-image: url('../images/icon-arrow-white.svg');
	background-position: center center;
	background-repeat: no-repeat;	
    background-size: 40%;
}

@media screen and (max-width: 768px) {
    .event-carousel > .slick-prev,
    .event-carousel > .slick-next
    {
        top: -10vw;
        left: auto;
        right: auto;
        bottom: auto;
        display: block;
        width: 7vw;
        height: 7vw;
        margin-top: 0;
        border-radius: 1vw;
        background: #222222;
        line-height: 10vw;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
    
    .event-carousel > .slick-prev {
        right: 14vw;
        background-image: url('../images/icon-arrow-pre-white.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 40%;
    }

    .event-carousel > .slick-next {
        right: 5.5vw;
        aspect-ratio: 1 / 1;
        background-image: url('../images/icon-arrow-white.svg');
        background-position: center center;
        background-repeat: no-repeat;	
        background-size: 40%;
    }
}

@media screen and (max-width: 430px) {
    .event-carousel > .slick-prev,
    .event-carousel > .slick-next
    {
        top: -15vw;
        left: auto;
        right: auto;
        bottom: auto;
        display: block;
        width: 10vw;
        height: 10vw;
        margin-top: 0;
        border-radius: 1vw;
        background: #222222;
        line-height: 10vw;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
    
    .event-carousel > .slick-prev {
        right: 16vw;
        background-image: url('../images/icon-arrow-pre-white.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 40%;
    }

    .event-carousel > .slick-next {
        right: 5.5vw;
        aspect-ratio: 1 / 1;
        background-image: url('../images/icon-arrow-white.svg');
        background-position: center center;
        background-repeat: no-repeat;	
        background-size: 40%;
    }
}

.event-carousel > .slick-prev:hover {
	background-image: url('../images/icon-arrow-pre-white.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40%;
	opacity: 0.8;
}

.event-carousel > .slick-next:hover {
    aspect-ratio: 1 / 1;
    background-image: url('../images/icon-arrow-white.svg');
	background-position: center center;
	background-repeat: no-repeat;	
    background-size: 40%;
	opacity: 0.8;
}

/*-------------------------  section community ------------------------- */

#section-top-community {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.top-community-inner {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-items: center;
	width: 100%;
	margin: 0 auto;
	padding: 6% 3%;
    border-radius: clamp(5px, 0.69vw, 20px);
    background: #222222;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.top-community-left {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    align-items: center;
}

.top-community-right {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    padding-left: 5%;
    align-items: center;
    color: #ffffff;
}

@media screen and (max-width: 430px) {
    .top-community-inner {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 5%;
        border-radius: clamp(5px, 0.69vw, 20px);
        background: #222222;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }

    .top-community-left {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        align-items: center;
    }

    .top-community-right {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        margin: 5vw auto 0;
        padding: 0;
        align-items: center;
        color: #ffffff;
    }
}

.top-community-left-inner {
    width: 100%;
    color: #ffffff;
}

.top-community-left-inner p {
    margin-bottom: 3vw;
}

.top-community-right img {
    width: 100%;
    border-radius: clamp(5px, 0.69vw, 20px);
}

/*-------------------------  section sns ------------------------- */

#section-top-sns {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

.top-sns-inner {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-content: flex-start;
	width: 80%;
	margin: 3vw auto 0;
	padding: 0;
}

@media screen and (max-width: 1024px) {
    .top-sns-inner {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        align-content: flex-start;
        width: 100%;
        margin: 3vw auto 0;
        padding: 0;
    }
}

@media screen and (max-width: 500px) {
    .top-sns-inner {
        position: relative;
        display: block;
        width: 100%;
        margin: 3vw auto 0;
        padding: 0;
    }
}

.top-sns-left {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 50%;
	margin: 0 auto;
	padding: 0;
}

.top-sns-right {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 50%;
	margin: 0 auto;
	padding: 0;
}

@media screen and (max-width: 500px) {
    .top-sns-left {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .top-sns-right {
        position: relative;
        display: -webkit-box;
        display: flex;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
}

.top-sns-contents {
    position: relative;
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 2vw;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.top-sns-btn {
    display: none;
}

@media screen and (max-width: 1024px) {
     .top-sns-contents {
        position: relative;
        width: 95%;
        height: auto;
        margin: 0 auto;
        padding: 2vw;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }
    
    .top-sns-contents.left {
        margin-right: 5%;
    }
    
    .top-sns-contents.right {
        margin-left: 5%;
    }
}

@media screen and (max-width: 500px) {
     .top-sns-contents {
        display: none;
    }
    
    .top-sns-contents.left {
        margin-right: 0;
    }
    
    .top-sns-contents.right {
        margin-top: 5vw;
        margin-left: 0;
    }
    
    .top-sns-btn {
        display: block;
        width: 80%;
        border-radius: clamp(5px, 0.69vw, 20px);
        margin: 0 auto;
    }
    
    .top-sns-btn.under {
        margin-top: 10px;
    }
    
    .top-sns-btn img {
        width: 100%;
        border-radius: clamp(5px, 0.69vw, 20px);
    }
}

.top-sns-h3 {
    position: relative;
    margin-bottom: 1vw;
    text-align: center;
}

.top-sns-h3 span {
    position: relative;
    padding-left: 3vw;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(16px, 1.8vw, 40px);
}

@media screen and (max-width: 1024px) {
    .top-sns-h3 span {
        position: relative;
        padding-left: 6vw;
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: clamp(16px, 1.8vw, 40px);
    }
}

.top-sns-h3 .insta:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    background-image: url('../images/icon-insta-black.svg');
	background-position: center center;
	background-repeat: no-repeat;	
    background-size: 100%;
}

.top-sns-h3 .x:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    background-image: url('../images/icon-x-black.svg');
	background-position: center center;
	background-repeat: no-repeat;	
    background-size: 90%;
}

#copy-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	outline: none;
	margin: 0;
	padding: 7px 14px;
	border: none;
	border-radius: 15px;
	background: #000000;
	vertical-align: middle;
	line-height: 1;
    font-size: clamp(10px, 1vw, 14px);
	color: #ffffff;
	cursor: pointer;
}

.tsg-instagram {
	width: 100%;
    height: 30vw;
	padding: 0;
}

.twitter-hashtag-timeline {
	width: 100%;
    height: 30vw;
	overflow-y: scroll;
	margin: 0 auto;
	text-align: left;
    font-size: clamp(14px, 0.8vw, 20px);
    font-family: "Yu Gothic Pr6N D", sans-serif;
    color: #000000 !important;
}

@media screen and (max-width: 1024px) {
    .tsg-instagram {
        width: 100%;
        height: 40vw;
        padding: 0;
    }

    .twitter-hashtag-timeline {
        width: 100%;
        height: 40vw;
        overflow-y: scroll;
        margin: 0 auto;
        text-align: left;
        font-size: clamp(12px, 0.8vw, 20px);
        font-family: "Yu Gothic Pr6N D", sans-serif;
        color: #000000 !important;
    }
}

@media screen and (max-width: 500px) {
    .tsg-instagram {
        width: 100%;
        height: auto;
        padding: 0;
    }

    .twitter-hashtag-timeline {
        width: 100%;
        height: 100vw;
        overflow-y: scroll;
        margin: 0 auto;
        text-align: left;
        font-size: clamp(12px, 0.8vw, 20px);
        font-family: "Yu Gothic Pr6N D", sans-serif;
        color: #000000 !important;
    }
}

/*-------------------------  section tsg ------------------------- */

#section-top-tsg {
	position: relative;
	width: 100%;
	margin: 0 auto;
    padding: 10vw;
    border-radius: clamp(5px, 0.69vw, 20px);
    background-image: url('../images/pic-top-tsg.jpg');
	background-position: center center;
	background-repeat: no-repeat;	
    background-size: cover;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

#section-top-tsg:before {
    content: "";
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-radius: clamp(5px, 0.69vw, 20px);
    background: rgba(100,57,255,0.5);
}

.top-tsg-inner {
    position: relative;
    z-index: 2;
	width: 80%;
	margin: 0 auto;
	padding: 0;
}

@media screen and (max-width: 1024px) {
    .top-tsg-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
}

.top-tsg-contents {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    align-items: center;
	width: 100%;
	margin-bottom: 3vw;
    padding: 3vw 3vw 3vw 0;
    border-radius: clamp(5px, 0.69vw, 20px);
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.top-tsg-contents-left {
    position: relative;
    display: -webkit-box;
	display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 30%;
}

.top-tsg-contents-left img {
    width: 70%;
}

.top-tsg-contents-left.small-logo img {
    width: 60%;
}

.top-tsg-contents-right {
    width: 70%;
    padding-left: 2vw;
    border-left: 1px solid #000000;
}

@media screen and (max-width: 500px) {
    .top-tsg-contents {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin-bottom: 3vw;
        padding: 3vw 3vw 3vw 0;
        border-radius: clamp(5px, 0.69vw, 20px);
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }
    
    .top-tsg-contents-left {
        position: relative;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        width: 100%;
        padding: 5vw 0 0;
    }

    .top-tsg-contents-left img {
        width: 70%;
    }

    .top-tsg-contents-left.small-logo img {
        width: 40%;
    }

    .top-tsg-contents-right {
        width: 100%;
        padding: 5vw;
        border-left: none;;
    }
}

.top-tsg-title {
    margin-bottom: 0.5vw;
    font-family: "Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(12px, 1.15vw, 24px);
}

.top-tsg-title br {
    display: none;
}

.top-tsg-text {
    font-size: clamp(12px, 0.9vw, 24px);
}

.top-tsg-link {
    margin-bottom: 0;
}

@media screen and (max-width: 500px) {
    .top-tsg-title {
        text-align: center;
    }
    
    .top-tsg-title br {
        display: inline;
    }
    
    .top-tsg-link {
        text-align: center;
    }
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 *page
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/*-------------------------  heading ------------------------- */

.page-h2 {
    position: relative;
	margin-bottom: 3vw;
	line-height: 1.2;
}

.page-h2.white {
    color: #ffffff;
}

.page-h2 .ja {
    position: relative;
    padding-left: 1vw;
	font-size: clamp(12px, 1vw, 24px);
}

.page-h2 .ja:before {
    content: "";
    position: absolute;
    top: 25%;
    left: 0;
    height: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #6439ff;
}

.page-h2 .detail {
    position: relative;
    padding-left: 1vw;
    font-size: clamp(12px, 1vw, 24px);
}

@media screen and (max-width: 1024px) {
    .page-h2 .ja {
        position: relative;
        padding-left: 10px;
        font-size: clamp(11px, 1vw, 24px);
    }
    
    .page-h2 .ja:before {
        content: "";
        position: absolute;
        top: 25%;
        left: 0;
        height: 50%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: #6439ff;
    }
}

.page-h2 .en {
    position: relative;
    letter-spacing: -0.03em;
	font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(30px, 5vw, 90px);
}

.page-h2 .en font {
    vertical-align: 0.1em;
}

@media screen and (max-width: 430px) {
    .page-h2 .ja {
        position: relative;
        padding-left: 3vw;
        font-size: clamp(11px, 1vw, 24px);
    }
}

.page-h3 {
    position: relative;
	margin-bottom: 2vw;
	line-height: 1.2;
}

.page-h3.white {
    color: #ffffff;
}

.page-h3 .en {
    position: relative;
    padding-left: 1.2rem;
	font-size: clamp(10px, 1vw, 24px);
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.page-h3 .en:before {
    content: "";
    position: absolute;
    top: 25%;
    left: 0;
    height: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #6439ff;
}

@media screen and (max-width: 1024px) {
     .page-h3 .en {
        padding-left: 0.7rem;
    }
 
     .page-h3 .en:before {
        content: "";
        position: absolute;
        top: 25%;
        left: 0;
        height: 50%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: #6439ff;
    }
}

.page-h3 .ja {
    position: relative;
	font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2.6vw, 60px);
}

/*-------------------------  page about ------------------------- */

#section-page-about-intro {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
}

.page-about-intro {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
    border-radius: clamp(5px, 0.69vw, 20px);
}

.page-about-intro-left {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
}

.page-about-intro-right {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
}

.page-about-intro-left img {
    width: 90%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

@media screen and (max-width: 768px) {
    .page-about-intro {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border-radius: clamp(5px, 0.69vw, 20px);
    }

    .page-about-intro-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-about-intro-right {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 5% 0 0;
    }

    .page-about-intro-left img {
        width: 100%;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }
}

.page-about-intro-copy {
    margin-bottom: 0.5vw;
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2vw, 36px);
}

#section-page-about-features {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.page-about-features {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 6% 3%;
    border-radius: clamp(5px, 0.69vw, 20px);
    background: #222222;
}

.page-about-features-left {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    color: #ffffff;
}

.page-about-features-left p {
    margin-bottom: 8%;
}

.page-about-features-right {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    text-align: right;
}

.page-about-features-right img {
    width: 90%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

@media screen and (max-width: 768px) {
    .page-about-features {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 6% 3%;
        border-radius: clamp(5px, 0.69vw, 20px);
        background: #222222;
    }

    .page-about-features-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        color: #ffffff;
    }

    .page-about-features-right {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 5% 0 0;
        text-align: right;
    }
    
    .page-about-features-right img {
        width: 100%;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }
}

@media screen and (max-width: 430px) {
    .page-about-features {
        padding: 6vw;
    }
}

.page-about-features-h3 {
    position: relative;
    margin-bottom: 2%;
	font-size: clamp(14px, 1.5vw, 30px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    color: #00ccdd;
}

#section-page-about-requirements {
	position: relative;
	width: 100%;
	margin: 7% auto 0;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

#section-page-about-faq {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

.page-about-requirements {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
    border-radius: clamp(5px, 0.69vw, 20px);
}

.page-about-requirements-left {
    position: relative;
	width: 30%;
	margin: 0 auto;
	padding: 0;
}

.page-about-requirements-right {
    position: relative;
	width: 70%;
    padding-right: 20%;
	margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .page-about-requirements-right {
        position: relative;
        width: 70%;
        padding-right: 0;
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
    .page-about-requirements {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border-radius: clamp(5px, 0.69vw, 20px);
    }

    .page-about-requirements-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-about-requirements-right {
        position: relative;
        width: 100%;
        padding-right: 0;
        margin: 0 auto;
    }
}

.page-about-requirements-list {
    position: relative;
    margin-bottom: 2%;
	font-size: clamp(14px, 1.2vw, 30px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

/*-------------------------  page program ------------------------- */

#section-page-program-intro {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
}

.page-program-intro {
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
	width: 100%;
	margin: 0 auto;
	padding: 4vw 0 4vw 4vw;
    border-radius: clamp(5px, 0.69vw, 20px);
    background: #222222;
    color: #ffffff;
}

.page-program-intro-left {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    color: #ffffff;
}

.page-program-intro-right {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    text-align: right;
}

.page-program-intro-right img {
    width: 90%;
}

@media screen and (max-width: 1024px) {
    .page-program-intro {
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 5vw 5vw 0;
        border-radius: clamp(5px, 0.69vw, 20px);
        background: #222222;
        color: #ffffff;
    }

    .page-program-intro-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        color: #ffffff;
    }

    .page-program-intro-right {
        position: relative;
        width: 100%;
        height: 40vw;
        margin: 50px auto 0;
        padding: 0;
        text-align: center;
        overflow: hidden;
    }

    .page-program-intro-right img {
        width: 90%;
    }
}

/*
.page-program-intro-title {
    margin-bottom: 2vw;
    line-height: 1;
    font-family: "neue-haas-grotesk-display","Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: clamp(18px, 2.4vw, 40px);
}
*/

.page-program-intro-title {
    margin-bottom: 2vw;
}

.page-program-intro-title img {
    width: clamp(9.375rem, 6.51rem + 13.32vw, 22.5rem);
}

.page-program-intro-term {
    font-size: clamp(12px, 1.2vw, 30px);
}

@media screen and (max-width: 1024px) {
    .page-program-intro-title {
        text-align: center;
    }
    
    .page-program-intro-term {
        text-align: center;
    }
}

.page-program-intro-action-title {
    margin-bottom: 0.5vw;
    text-align: center;
    /*font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2vw, 36px);*/
}

.page-program-intro-action {
    margin-bottom: 0;
    text-align: center;
}

.page-program-intro-action img {
    width: 80%;
}

@media screen and (max-width: 430px) {
    .page-program-intro-action img {
        width: 90%;
    }
}

#section-page-program-step1 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

#section-page-program-step2 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

#section-page-program-step3 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

.page-program-step {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
    border-radius: clamp(5px, 0.69vw, 20px);
}

.page-program-step-left {
    position: relative;
	width: 30%;
	margin: 0 auto;
	padding: 0;
}

.page-program-step-right {
    position: relative;
	width: 70%;
    padding-left: 3%;
    padding-right: 20%;
	margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .page-program-step-right {
        position: relative;
        width: 70%;
        padding-left: 3%;
        padding-right: 0;
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
    .page-program-step {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border-radius: clamp(5px, 0.69vw, 20px);
    }

    .page-program-step-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-program-step-right {
        position: relative;
        width: 100%;
        padding-top: 5%;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
    }
}

.page-program-step-day {
    margin-bottom: 0;
    font-size: clamp(14px, 1.2vw, 30px);
    color: #6439ff;
}

.page-program-step-copy {
    margin-bottom: 0.5vw;
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2vw, 36px);
}

.page-program-step-pic-wrap {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
	width: 100%;
	margin: 0 auto 7%;
	padding: 0;
}

.page-program-step-pic {
    position: relative;
    width: 49%;
}

.page-program-step-pic img {
    width: 100%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.labo-title {
    margin-bottom: 2%;
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2vw, 36px);
}

.labo-title span {
    font-size: clamp(14px, 0.95vw, 20px);
}

.lab-bn {
    margin-bottom: 30px;
    text-align: center;
}

.lab-bn img {
    width: 90%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

.lab-bn img:hover {
    opacity: 0.7;
}

.lab-bn-link {
    width: 90%;
    margin: 0 auto 10px;
    line-height: 1;
}

.lab-bn-link a {
    color: #ffffff;  
}

@media screen and (max-width: 500px) {
    .lab-bn img {
        width: 100%;
    }

    .lab-bn-link {
        width: 100%;
    }
}

.fixed-program-entry-wrap {
    display: none;
	position: fixed;
    bottom: 20px;
	right: 0;
	z-index: 10;
	width: 66px;
    height: 280px;
	margin: 0;
}

.fixed-program-entry {
	position: relative;
	display : -webkit-inline-box;
	display : -ms-inline-flexbox;
	display : -webkit-inline-flex;
	display : inline-flex;
	width: 100%;
    height: 100%;
}

.fixed-program-entry-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 140px 0 0;
    border-top-left-radius: clamp(5px, 0.69vw, 20px);
    border-bottom-left-radius: clamp(5px, 0.69vw, 20px);
    background: rgb(100,57,255);
    background: -webkit-linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
    background: -o-linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
    background: linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
    text-align: center;
    color: #ffffff;
    transition: all 0.3s;
}

.fixed-program-entry-btn:before {
    content: "";
	position: absolute;
	top: 15px;
	left: 55%;
	width: 30px;
	height: 30px;
    margin-left: -17px;
	background: url('../images/icon-external-link.svg') 0 0 no-repeat;
	background-size: 100%;
}

.fixed-program-entry-btn:after {
    content: "APPLY";
	position: absolute;
	top: 18%;
	left: 80%;
    text-align: left;
    white-space: nowrap;
	font-size: 26px;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    -moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	-moz-transform-origin: left top;
	-webkit-transform-origin: left top;
	-o-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}

.fixed-program-entry-btn:hover {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    color: #ffffff;
}

.fixed-program-entry-btn .ja {
    display: inline-block;
    font-size: 14px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

@media screen and (max-width: 430px) {
    .fixed-program-entry-wrap {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 0;
        z-index: 10;
        width: 40px;
        height: 210px;
        margin: 0;
    }

    .fixed-program-entry {
        position: relative;
        display : -webkit-inline-box;
        display : -ms-inline-flexbox;
        display : -webkit-inline-flex;
        display : inline-flex;
        width: 100%;
        height: 100%;
    }

    .fixed-program-entry-btn {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 100px 0 0;
        border-top-left-radius: clamp(5px, 0.69vw, 20px);
        border-bottom-left-radius: clamp(5px, 0.69vw, 20px);
        background: rgb(100,57,255);
        background: -webkit-linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
        background: -o-linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
        background: linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
        text-align: center;
        color: #ffffff;
        transition: all 0.3s;
    }

    .fixed-program-entry-btn:before {
        content: "";
        position: absolute;
        top: 8px;
        left: 60%;
        width: 20px;
        height: 20px;
        margin-left: -14px;
        background: url('../images/icon-external-link.svg') 0 0 no-repeat;
        background-size: 100%;
    }

    .fixed-program-entry-btn:after {
        content: "APPLY";
        position: absolute;
        top: 17%;
        left: 82%;
        text-align: left;
        white-space: nowrap;
        font-size: 18px;
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-weight: 600;
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -moz-transform-origin: left top;
        -webkit-transform-origin: left top;
        -o-transform-origin: left top;
        -ms-transform-origin: left top;
        transform-origin: left top;
    }

    .fixed-program-entry-btn:hover {
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
        color: #ffffff;
    }

    .fixed-program-entry-btn .ja {
        display: inline-block;
        font-size: 12px;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
}

#section-page-program-community {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 7%;
}

#section-page-program-guide {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0 0 7%;
}

.page-program-community {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 6% 3%;
    border-radius: clamp(5px, 0.69vw, 20px);
    background: #f7f7f7;
}

.page-program-community-left {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
}

.page-program-community-right {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    text-align: right;
}

.page-program-community-right img {
    width: 90%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

@media screen and (max-width: 768px) {
    .page-program-community {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 6% 3%;
        border-radius: clamp(5px, 0.69vw, 20px);
        background: #f7f7f7;
    }

    .page-program-community-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-program-community-right {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        padding-top: 5%;
        text-align: right;
    }

    .page-program-community-right img {
        width: 100%;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }
}

.page-program-community-title {
    margin-bottom: 2%;
    font-size: clamp(14px, 1.2vw, 30px);
}

.page-program-community-title span {
    font-size: clamp(16px, 1.5vw, 40px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.page-program-community-title-small {
    font-size: clamp(14px, 1.2vw, 30px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.page-program-community-embed {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
	width: 70%;
	margin: 0;
	padding: 0;
    border-radius: clamp(5px, 0.69vw, 20px);
    background: #ffffff;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    overflow: hidden;
    cursor: pointer;
}

.page-program-community-embed-left {
    position: relative;
    width: 50%;
    margin: 0 auto;
    padding: clamp(10px, 0.8vw, 16px);
    font-size: clamp(10px, 0.7vw, 12px);
}

.page-program-community-embed-right {
    position: relative;
    width: 50%;
    margin: 0 auto;
    padding: clamp(10px, 0.8vw, 16px);
}

.page-program-community-embed-right img {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

@media screen and (max-width: 768px) {
    .page-program-community-embed {
        width: 100%;
    }
    
    .page-program-community-embed-left {
        width: 70%;
    }
    
    .page-program-community-embed-right {
        width: 30%;
    }
}

.page-program-community-embed-head {
    position: relative;
    display: table;
    width: 100%;
    margin-bottom: clamp(10px, 0.8vw, 16px);
    color: #000000;
}

.page-program-community-embed-head-left {
    position: relative;
    display: table-cell;
    width: 50px;
}

.page-program-community-embed-head-left img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

.page-program-community-embed-head-right {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    padding: 0 clamp(10px, 0.8vw, 16px);
    font-size: clamp(10px, 0.7vw, 12px);
}

/*-------------------------  page events-workshops ------------------------- */

#section-page-events-workshop {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
}

.sort-controller {
	width: 100%;
	height: auto;
	margin-bottom: 30px;
	padding: 20px 20px;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #f7f7f7;
	table-layout: fixed;
}

.sort-controller span {
	display: inline-block;
	position: relative;
    font-size: 16px;
}

.sort-controller a {
	display: inline-block;
	width: 170px;
	height: 40px;
	margin: 0 0 0 30px;
	border: 1px solid #e3e3e3;
	border-radius: 3px;
	background: #ffffff;
	box-shadow: 0 2px 0 #f5f6f7;
	text-align: center;
	line-height: 40px;
    font-size: 16px;
	color: #000000;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.sort-controller a:hover {
	color: #000000;
	background: #ffffff;
	text-decoration: none;
}

.sort-controller a.current {
	border: 1px solid #222222;
	background: #222222;
	box-shadow: 0 2px 0 #e2e5e8;
	font-weight: bold;
	color: #ffffff;
}

.sort-controller a.current:hover {
	opacity: 0.7;
}

.sort-controller-br {
    display: none;
}

@media screen and (max-width: 820px) {
    .sort-controller {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
        padding: 20px 20px;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        background: #f7f7f7;
        table-layout: fixed;
    }

    .sort-controller span {
        display: inline-block;
        position: relative;
        font-size: 14px;
    }

    .sort-controller a {
        display: inline-block;
        width: 150px;
        height: 40px;
        margin: 0 0 0 20px;
        border: 1px solid #e3e3e3;
        border-radius: 3px;
        background: #ffffff;
        box-shadow: 0 2px 0 #f5f6f7;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        color: #454b53;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
}

@media screen and (max-width: 500px) {
    .sort-controller {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        padding: 10px 10px;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        background: #f7f7f7;
        table-layout: fixed;
    }

    .sort-controller span {
        display: inline-block;
        position: relative;
        font-size: 10px;
    }

    .sort-controller a {
        display: inline-block;
        width: 86px;
        height: 25px;
        margin: 0 0 0 5px;
        border: 1px solid #e3e3e3;
        border-radius: 3px;
        background: #ffffff;
        box-shadow: 0 2px 0 #f5f6f7;
        text-align: center;
        line-height: 25px;
        font-size: 10px;
        color: #454b53;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
}

@media screen and (max-width: 369px) {
    .sort-controller span {
       margin-bottom: 10px;
    }

    .sort-controller a {
        margin: 0 5px 0 0;
    }

    .sort-controller-br {
        display: inline;
    }
}

#section-page-community-intro {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
}

.page-community-intro {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
    border-radius: clamp(5px, 0.69vw, 20px);
}

.page-community-intro-left {
    position: relative;
	width: 49%;
	margin: 0 auto;
	padding: 0;
}

.page-community-intro-right {
    position: relative;
	width: 51%;
	margin: 0 auto;
	padding: 0;
    text-align: right;
}

.page-community-intro-right img {
    width: 90%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.page-community-intro-copy {
    margin-bottom: 0.5vw;
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2vw, 36px);
}

@media screen and (max-width: 768px) {
    .page-community-intro {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border-radius: clamp(5px, 0.69vw, 20px);
    }

    .page-community-intro-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        padding-top: 7%;
        order: 2;
    }

    .page-community-intro-right {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: right;
        order: 1;
    }

    .page-community-intro-right img {
        width: 100%;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }

    .page-community-intro-copy {
        margin-bottom: 0.5vw;
        font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
        font-size: clamp(16px, 2vw, 36px);
    }
}

#section-page-community-contents1 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

#section-page-community-contents2 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

#section-page-community-contents3 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

#section-page-community-contents4 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

.page-community-contents {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.page-community-contents-left {
    position: relative;
	width: 30%;
	margin: 0 auto;
	padding: 0;
}

.page-community-contents-right {
    position: relative;
	width: 70%;
    padding-right: 20%;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .page-community-contents {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-community-contents-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-community-contents-right {
        position: relative;
        width: 100%;
        padding-right: 0;
        margin: 0 auto;
    }
}

.page-community-contents-list {
    position: relative;
    margin-bottom: 0.5%;
	font-size: clamp(14px, 1.2vw, 30px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.fixed-community-join-wrap {
    display: none;
	position: fixed;
    bottom: 20px;
	right: 0;
	z-index: 10;
	width: 66px;
    height: 300px;
	margin: 0;
}

.fixed-community-join {
	position: relative;
	display : -webkit-inline-box;
	display : -ms-inline-flexbox;
	display : -webkit-inline-flex;
	display : inline-flex;
	width: 100%;
    height: 100%;
}

.fixed-community-join-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 120px 0 0;
    border-top-left-radius: clamp(5px, 0.69vw, 20px);
    border-bottom-left-radius: clamp(5px, 0.69vw, 20px);
    background: rgb(100,57,255);
    background: -webkit-linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
    background: -o-linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
    background: linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
    text-align: center;
    color: #ffffff;
    transition: all 0.3s;
}

.fixed-community-join-btn:before {
    content: "";
	position: absolute;
	top: 15px;
	left: 55%;
	width: 30px;
	height: 30px;
    margin-left: -17px;
	background: url('../images/icon-external-link.svg') 0 0 no-repeat;
	background-size: 100%;
}

.fixed-community-join-btn:after {
    content: "JOIN";
	position: absolute;
	top: 18%;
	left: 80%;
    text-align: left;
    white-space: nowrap;
	font-size: 26px;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    -moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	-moz-transform-origin: left top;
	-webkit-transform-origin: left top;
	-o-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}

.fixed-community-join-btn:hover {
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    color: #ffffff;
}

.fixed-community-join-btn .ja {
    display: inline-block;
    font-size: 14px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}

@media screen and (max-width: 430px) {
    .fixed-community-join-wrap {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 0;
        z-index: 10;
        width: 40px;
        height: 240px;
        margin: 0;
    }

    .fixed-community-join {
        position: relative;
        display : -webkit-inline-box;
        display : -ms-inline-flexbox;
        display : -webkit-inline-flex;
        display : inline-flex;
        width: 100%;
        height: 100%;
    }

    .fixed-community-join-btn {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 85px 0 0;
        border-top-left-radius: clamp(5px, 0.69vw, 20px);
        border-bottom-left-radius: clamp(5px, 0.69vw, 20px);
        background: rgb(100,57,255);
        background: -webkit-linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
        background: -o-linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
        background: linear-gradient(rgba(100,57,255,1) 0%, rgba(63,97,234,1) 100%);
        text-align: center;
        color: #ffffff;
        transition: all 0.3s;
    }

    .fixed-community-join-btn:before {
        content: "";
        position: absolute;
        top: 8px;
        left: 60%;
        width: 20px;
        height: 20px;
        margin-left: -14px;
        background: url('../images/icon-external-link.svg') 0 0 no-repeat;
        background-size: 100%;
    }

    .fixed-community-join-btn:after {
        content: "JOIN";
        position: absolute;
        top: 17%;
        left: 82%;
        text-align: left;
        white-space: nowrap;
        font-size: 18px;
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-weight: 600;
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -moz-transform-origin: left top;
        -webkit-transform-origin: left top;
        -o-transform-origin: left top;
        -ms-transform-origin: left top;
        transform-origin: left top;
    }

    .fixed-community-join-btn:hover {
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
        color: #ffffff;
    }

    .fixed-community-join-btn .ja {
        display: inline-block;
        font-size: 12px;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
}

#section-page-faq1 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
}

#section-page-faq2 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

#section-page-faq3 {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
    border-top: 1px solid #dddddd;
}

.page-faq-contents {
	position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.page-faq-contents-left {
    position: relative;
	width: 30%;
	margin: 0 auto;
	padding: 0;
}

.page-faq-contents-right {
    position: relative;
	width: 70%;
    padding-left: 3%;
    padding-right: 20%;
	margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .page-faq-contents-right {
        position: relative;
        width: 70%;
        padding-left: 3%;
        padding-right: 0;
        margin: 0 auto;
    }
}

@media screen and (max-width: 430px) {
    .page-faq-contents {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-faq-contents-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-faq-contents-right {
        position: relative;
        width: 100%;
        padding-top: 5%;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
    }
}

.faq-box {
    position: relative;
    margin-bottom: 1vw;
    padding: 1vw 3vw 1vw 3.5vw;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
    cursor: pointer;
}

.faq-box:before {
    position: absolute;
    content: "Q.";
    top: 1.15vw;
    left: 1vw;
    width: 40px;
    line-height: 1;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-style:  normal;
    font-weight: 600;
	font-size: clamp(16px, 1.5vw, 36px);
}

.faq-icon {
    position: absolute;
    content: "";
    top: 1.15vw;
    right: 1vw;
    height: 1.5vw;
    width: 1.5vw;
    background: url('../images/icon-plus2.svg') center center no-repeat;
	background-size: 1.5vw 1.5vw;
}

.faq-icon.open {
    position: absolute;
    content: "";
    top: 1.15vw;
    right: 1vw;
    height: 1.5vw;
    width: 1.5vw;
    background: url('../images/icon-minus.svg') center center no-repeat;
	background-size: 1.5vw 1.5vw;
}

@media screen and (max-width: 1024px) {
    .faq-box {
        position: relative;
        margin-bottom: 1vw;
        padding: 1vw 3vw 1vw 3.5vw;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
        cursor: pointer;
    }

    .faq-box:before {
        position: absolute;
        content: "Q.";
        top: 1.3vw;
        left: 1vw;
        width: 40px;
        line-height: 1;
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-style:  normal;
        font-weight: 600;
        font-size: clamp(16px, 1.5vw, 36px);
    }

    .faq-icon {
        position: absolute;
        content: "";
        top: 1.5vw;
        right: 1vw;
        height: 1.5vw;
        width: 1.5vw;
        background: url('../images/icon-plus2.svg') center center no-repeat;
        background-size: 1.5vw 1.5vw;
    }

    .faq-icon.open {
        position: absolute;
        content: "";
        top: 1.5vw;
        right: 1vw;
        height: 1.5vw;
        width: 1.5vw;
        background: url('../images/icon-minus.svg') center center no-repeat;
        background-size: 1.5vw 1.5vw;
    }
}

@media screen and (max-width: 768px) {
    .faq-box {
        position: relative;
        margin-bottom: 1vw;
        padding: 1vw 25px 1vw 25px;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
        cursor: pointer;
    }
   
    .faq-icon {
        position: absolute;
        content: "";
        top: 1.5vw;
        right: 1vw;
        height: 15px;
        width: 15px;
        background: url('../images/icon-plus2.svg') center center no-repeat;
        background-size: 15px 15px;
    }

    .faq-icon.open {
        position: absolute;
        content: "";
        top: 1.75vw;
        right: 1vw;
        height: 15px;
        width: 15px;
        background: url('../images/icon-minus.svg') center center no-repeat;
        background-size: 15px 15px;
    }
}

@media screen and (max-width: 430px) {
    .faq-box {
        position: relative;
        margin-bottom: 2vw;
        padding: 3vw 30px 3vw 30px;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
        cursor: pointer;
    }

    .faq-box:before {
        position: absolute;
        content: "Q.";
        top: 3.7vw;
        left: 10px;
        width: 40px;
        line-height: 1;
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-style:  normal;
        font-weight: 600;
        font-size: clamp(16px, 1.5vw, 36px);
    }

    .faq-icon {
        position: absolute;
        content: "";
        top: 4vw;
        right: 10px;
        height: 15px;
        width: 15px;
        background: url('../images/icon-plus2.svg') center center no-repeat;
        background-size: 15px 15px;
    }

    .faq-icon.open {
        position: absolute;
        content: "";
        top: 3vw;
        right: 10px;
        height: 15px;
        width: 15px;
        background: url('../images/icon-minus.svg') center center no-repeat;
        background-size: 15px 15px;
    }
}

.faq-question {
    line-height: 1.5;
    font-size: clamp(14px, 1.2vw, 30px);
    font-weight: bold;
}

.faq-answer {
    display: none;
    position: relative;
    margin-top: 1vw;
    margin-right: -2vw;
    padding: 1vw 1vw 1vw 3vw;
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 6px;
    line-height: 1.5;
    font-size: clamp(12px, 1vw, 30px);
    font-family: "Yu Gothic Pr6N D", sans-serif;
}

.faq-answer:before {
    position: absolute;
    content: "A.";
    top: 0.8vw;
    left: 1vw;
    margin-top: 0;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-style:  normal;
    font-weight: 600;
	font-size: clamp(16px, 1.5vw, 36px);
}

@media screen and (max-width: 430px) {
    .faq-answer {
        display: none;
        position: relative;
        margin-top: 1vw;
        margin-right: -2vw;
        padding: 1.5vw 1vw 1.5vw 6vw;
        border: 1px solid rgba(0,0,0,0.5);
        border-radius: 6px;
        line-height: 1.5;
        font-size: clamp(12px, 1vw, 30px);
        font-family: "Yu Gothic Pr6N D", sans-serif;
    }

    .faq-answer:before {
        position: absolute;
        content: "A.";
        top: 0.8vw;
        left: 1vw;
        margin-top: 0;
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-style:  normal;
        font-weight: 600;
        font-size: clamp(16px, 1.5vw, 36px);
    }
}

.pf-header {
	position: relative;
    z-index: 100;
	width: 100%;
	margin: 0 auto;
	padding: 1.2vw 3vw;
    opacity: 0;
}

.pf-header.fixed {
	position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 0.6vw 3vw;
    background: rgba(0,0,0,1);
}

@media screen and (max-width: 1024px) {
    .pf-header {
        position: relative;
        z-index: 100;
        width: 100%;
        margin: 0 auto;
        padding: 2vw 11vw 2vw 3vw;
        opacity: 0;
    }
    
    .pf-header.fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        padding: 2vw 11vw 2vw 3vw;
        background: rgba(0,0,0,0.9);
    }
}

@media screen and (max-width: 768px) {
    .pf-header {
        position: relative;
        z-index: 100;
        width: 100%;
        margin: 0 auto;
        padding: 3vw 11vw 3vw 3vw;
        opacity: 0;
    }
    
    .pf-header.fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        padding: 3vw 11vw 3vw 3vw;
        background: rgba(0,0,0,0.9);
    }
}

.pf-header-sub {
	position: relative;
    z-index: 100;
	width: 100%;
	margin: 0 auto;
	padding: 3vw 3vw 0;
}

@media screen and (max-width: 500px) {
    .pf-header-sub {
        padding: 30px 3vw 0;
    }
}

.pf-header-inner {
    position: relative;
    display: -webkit-box;
	display: flex;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0px;
	flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
}

.pf-header-logo {
    position: relative;
	width: 170px;
	margin: 0;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.pf-header-logo.small {
	width: 120px;
}

.pf-header-logo img {
    position: relative;
    width: 100%;
	height: auto;
    -webkit-filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5)) drop-shadow(-2px 2px 3px rgba(0,0,0,0.5)) drop-shadow(2px -2px 3px rgba(0,0,0,0.5)) drop-shadow(-2px -2px 3px rgba(0,0,0,0.5));
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5)) drop-shadow(-2px 2px 3px rgba(0,0,0,0.5)) drop-shadow(2px -2px 3px rgba(0,0,0,0.5)) drop-shadow(-2px -2px 3px rgba(0,0,0,0.5));
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

@media screen and (max-width: 1024px) {
    .pf-header-logo {
        position: relative;
        width: 120px;
        margin: 0;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
    
    .pf-header-logo.small {
        width: 120px;
    }
}

@media screen and (max-width: 500px) {
    .pf-header-logo {
        position: relative;
        width: 100px;
        margin: 0;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
    
    .pf-header-logo.small {
        width: 100px;
    }
}

.pf-header-logo-sub {
    position: relative;
	width: 400px;
	margin: 0 auto;
    text-align: center;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

@media screen and (max-width: 1024px) {
    .pf-header-logo-sub {
        width: 300px;
    }
}

@media screen and (max-width: 500px) {
    .pf-header-logo-sub {
        width: 200px;
    }
}

.pf-header-logo-sub img {
    position: relative;
    width: 100%;
	height: auto;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.pf-mv {
    position: relative;
	width: 100%;
	height: 100vh;
    overflow: hidden;
}

@media screen and (max-width: 1024px) {
    .pf-mv {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
}

.pf-mv2 {
    position: relative;
	width: 100%;
	height: 100vh;
    overflow: hidden;
}

@media screen and (max-width: 500px) {
    .pf-mv2 {
        position: relative;
        width: 100%;
        max-height: 740px;
        overflow-x: hidden;
    }
}

.pf-mv-overlay {
    display: none;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2) url('../images/dot.png') 0 0 repeat;
}

#pf-mv-movie {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

#pf-mv-movie video[poster] {
	object-fit: cover;
}

.pf-mv-head-logo {
	display: none;
	position: absolute;
	top: 35px;
	right: 35px;
	z-index: 10;
	width: 150px;
	height: 65px;
    -webkit-filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5)) drop-shadow(-2px 2px 3px rgba(0,0,0,0.5)) drop-shadow(2px -2px 3px rgba(0,0,0,0.5)) drop-shadow(-2px -2px 3px rgba(0,0,0,0.5));
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5)) drop-shadow(-2px 2px 3px rgba(0,0,0,0.5)) drop-shadow(2px -2px 3px rgba(0,0,0,0.5)) drop-shadow(-2px -2px 3px rgba(0,0,0,0.5));
}

@media screen and (max-width: 430px) {
    .pf-mv-head-logo {
        display: none;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 10;
        width: 80px;
        height: 35px;
        -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5)) drop-shadow(-1px 1px 2px rgba(0,0,0,0.5)) drop-shadow(1px -1px 2px rgba(0,0,0,0.5)) drop-shadow(-1px -1px 2px rgba(0,0,0,0.5));
        filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5)) drop-shadow(-1px 1px 2px rgba(0,0,0,0.5)) drop-shadow(1px -1px 2px rgba(0,0,0,0.5)) drop-shadow(-1px -1px 2px rgba(0,0,0,0.5));
    }
}

.pf-mv-contents-wrap {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
}

.pf-mv-contents-inner {
	display: table;
	width: 100%;
	height: 100%;
}

.pf-mv-contents {
	display: table-cell;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	vertical-align: middle;
}

.pf-mv-copy {
    padding-left: 50px;
    line-height: 1.5;
    font-size: 28px;
    color: #ffffff;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8),
    -2px 2px 6px rgba(0,0,0,0.8),
    2px -2px 6px rgba(0,0,0,0.8),
    -2px -2px 6px rgba(0,0,0,0.8);
}

.pf-mv-copy span {
    font-size: 16px;
}

@media screen and (max-width: 430px) {
    .pf-mv-copy {
        padding-left: 0;
        line-height: 1.5;
        text-align: center;
        font-size: 17px;
        color: #ffffff;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8),
        -1px 1px 2px rgba(0,0,0,0.8),
        1px -1px 2px rgba(0,0,0,0.8),
        -1px -1px 2px rgba(0,0,0,0.8);
    }

    .pf-mv-copy span {
        font-size: 10px;
    }
}

.pf-mv-logo-wrap {
    position: relative;
    width: 45%;
    margin-left: -50px;
    margin-bottom: 30px;
    background: rgba(100,57,255,0.8);
    padding: 30px 70px 30px 100px;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    transform: skewX(-20deg);
}

.pf-mv-logo-inner {
    transform: skewX(20deg);
}

@media screen and (max-width: 1024px) {
    .pf-mv-logo-wrap {
        position: relative;
        width: 70%;
        margin-left: -50px;
        margin-bottom: 30px;
        background: rgba(100,57,255,0.8);
        padding: 30px 70px 30px 100px;
        box-shadow: 0 0 10px rgba(0,0,0,0.8);
        transform: skewX(-20deg);
    }
}

@media screen and (max-width: 430px) {
    .pf-mv-logo-wrap {
        position: relative;
        width: 100%;
        margin-left: 0;
        margin-bottom: 30px;
        background: rgba(100,57,255,0.8);
        padding: 20px 30px 20px 30px;
        box-shadow: 0 0 10px rgba(0,0,0,0.8);
        transform: skewX(0deg);
    }
    
    .pf-mv-logo-inner {
        transform: skewX(0deg);
    }
}

.pf-mv-logo {
    margin-bottom: 0;
}

.pf-mv-logo-sp {
    display: none;
}

@media screen and (max-width: 430px) {
    .pf-mv-logo {
        display: none;
    }

    .pf-mv-logo-sp {
        display: block;
        margin-bottom: 0;
    }
}

.pf-mv-sub-copy {
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.8),
    -2px 2px 6px rgba(0,0,0,0.8),
    2px -2px 6px rgba(0,0,0,0.8),
    -2px -2px 6px rgba(0,0,0,0.8);
}

.pf-mv-sub-copy span {
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-style:  normal;
    font-weight: 600;
    font-size: 32px;
}

@media screen and (max-width: 430px) {
    .pf-mv-sub-copy {
        text-align: center;
        font-size: 14px;
        color: #ffffff;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8),
        -1px 1px 2px rgba(0,0,0,0.8),
        1px -1px 2px rgba(0,0,0,0.8),
        -1px -1px 2px rgba(0,0,0,0.8);
    }

    .pf-mv-sub-copy span {
        font-family: "neue-haas-grotesk-display", sans-serif;
        font-style:  normal;
        font-weight: 600;
        font-size: 20px;
    }
}

.section-pf {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 7% 0;
}

.page-pf-wrap1 {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
    border-radius: clamp(5px, 0.69vw, 20px);
}

.page-pf-wrap1-left {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
}

.page-pf-wrap1-right {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
}

.page-pf-wrap1-left img {
    width: 90%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.page-pf-wrap1-left.non-shadow img {
    width: 90%;
    border-radius: 0;
    box-shadow: none;
}

.page-pf-wrap2 {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
    border-radius: clamp(5px, 0.69vw, 20px);
}

.page-pf-wrap2-left {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
}

.page-pf-wrap2-right {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    text-align: right;
}

.page-pf-wrap2-right img {
    width: 90%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.page-pf-wrap2-right.non-shadow img {
    width: 90%;
    border-radius: 0;
    box-shadow: none;
}

@media screen and (max-width: 768px) {
    .page-pf-wrap1 {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border-radius: clamp(5px, 0.69vw, 20px);
    }

    .page-pf-wrap1-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .page-pf-wrap1-right {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 5% 0 0;
    }

    .page-pf-wrap1-left img {
        width: 100%;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }
    
    .page-pf-wrap1-left.non-shadow img {
        width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
    
    .page-pf-wrap2 {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        border-radius: clamp(5px, 0.69vw, 20px);
    }

    .page-pf-wrap2-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 5% 0 0;
        order: 2;
    }

    .page-pf-wrap2-right {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: right;
        order: 1;
    }

    .page-pf-wrap2-right img {
        width: 100%;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }
    
    .page-pf-wrap2-right.non-shadow img {
        width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

.page-pf-copy {
    position: relative;
    margin-bottom: 1vw;
    padding: 0.5vw 0 0.5vw 2vw;
    line-height: 1.5;
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2vw, 36px);
    color: #6439ff;
}

@media screen and (max-width: 500px) {
    .page-pf-copy {
        padding: 0.5vw 0 0.5vw 2.5vw;
    }
}

.page-pf-copy.white {
    font-size: clamp(16px, 1.8vw, 32px);
    color: #ffffff;
}

.page-pf-copy span {
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(12px, 1.5vw, 20px);
}

.page-pf-copy:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    background: #6439ff;
}

.page-pf-copy.white:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    background: #ffffff;
}

.page-pf-wrap3 {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 6% 3%;
    border-radius: clamp(5px, 0.69vw, 20px);
    background: #6439ff;
}

.page-pf-wrap3-left {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0;
    color: #ffffff;
}

.page-pf-wrap3-right {
    position: relative;
	width: 50%;
	margin: 0 auto;
	padding: 0 0 0 70px;
    text-align: right;
}

.page-pf-wrap3-right img {
    width: 90%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

@media screen and (max-width: 768px) {
    .page-pf-wrap3 {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 6% 3%;
        border-radius: clamp(5px, 0.69vw, 20px);
        background: #6439ff;
    }

    .page-pf-wrap3-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        color: #ffffff;
    }

    .page-pf-wrap3-right {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 5% 0 0;
        text-align: right;
    }
    
    .page-pf-wrap3-right img {
        width: 100%;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }
}

.pf-h3 {
    position: relative;
    display: inline-block;
	margin-bottom: 2vw;
    padding: 1vw 3vw;
    border: 2px solid #6439ff;
    border-radius: 6px;
    background: #ffffff;
	line-height: 1;
    ont-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 2vw, 40px);
    color: #6439ff;
}

.pf-h3.mt {
    margin-top: 100px;
}

@media screen and (max-width: 768px) {
    .pf-h3.mt {
        margin-top: 50px;
    }
}

.pf-project-wrap {
    position: relative;
    display: -webkit-box;
	display: flex;
    -ms-flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
	flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 100%;
	margin: 50px auto 0;
	padding: 0;
}

@media screen and (max-width: 500px) {
    .pf-project-wrap {
        margin: 20px auto 0;
    }
}

.pf-project-wrap:before{
    content: "";
    display: block;
    width: 23%;
    order:1;
}

.pf-project-wrap:after{
    content: "";
    display: block;
    width: 23%;
}

@media screen and (max-width: 1024px) {
    .pf-project-wrap:before{
        content: "";
        display: block;
        width: 30%;
        order:1;
    }

    .pf-project-wrap:after{
        content: "";
        display: block;
        width: 30%;
    }
}

@media screen and (max-width: 500px) {
    .pf-project-wrap:before{
        content: "";
        display: block;
        width: 48%;
        order:1;
    }

    .pf-project-wrap:after{
        content: "";
        display: block;
        width: 48%;
    }
}

.pf-project-box {
	outline: none;
	position: relative;
	z-index: 0;
	width: 23%;
    margin-bottom: 50px;
	background: #ffffff;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
	cursor: pointer;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

@media screen and (max-width: 1024px) {
    .pf-project-box {
        outline: none;
        position: relative;
        z-index: 0;
        width: 30%;
        margin-bottom: 50px;
        background: #ffffff;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
        cursor: pointer;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 500px) {
    .pf-project-box {
        outline: none;
        position: relative;
        z-index: 0;
        width: 48%;
        margin-bottom: 20px;
        background: #ffffff;
        border-radius: clamp(5px, 0.69vw, 20px);
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
        cursor: pointer;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }
}

.pf-project-box:hover {
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.4);
}

.pf-project-pic {
	overflow: hidden;
	position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
	margin: 0 auto;
    border-top-left-radius: clamp(5px, 0.69vw, 20px);
    border-top-right-radius: clamp(5px, 0.69vw, 20px);
}

.pf-project-pic img {
    width: 100%;
    height: auto;
}

.pf-project-text {
    width: 100%;
    padding: 1.5vw;
}

@media screen and (max-width: 500px) {
    .pf-project-text {
        width: 100%;
        padding: 3vw;
    }
}

.pf-project-ttl {
	position: relative;
	margin: 0 auto 10px;
    line-height: 1.2;
	font-size: clamp(12px, 1vw, 24px);
}

.pf-project-ttl a {
	text-decoration: none;
	color: #000000;
	outline: none !important;
}

.pf-project-hashtag {
    position: relative;
	margin: 0 auto;
}

.pf-project-hashtag span {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px 10px;
    border: 1px solid #dddddd;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 0 0 2px #f7f7f7;
    line-height: 1;
	font-size: clamp(10px, 0.7vw, 16px);
    font-family: "Yu Gothic Pr6N D", sans-serif;
}

@media screen and (max-width: 500px) {
    .pf-project-hashtag span {
        margin-right: 1px;
        margin-bottom: 3px;
        padding: 3px 6px;
        font-size: 9px;
    }
}

.pf-2col-contents {
	position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.pf-2col-contents.mt {
    margin-top: 50px;
}

.pf-2col-contents-left {
    position: relative;
	width: 30%;
	margin: 0 auto;
	padding: 0;
}

.pf-2col-contents-right {
    position: relative;
	width: 70%;
    padding-left: 3%;
    padding-right: 20%;
	margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .pf-2col-contents-right {
        position: relative;
        width: 70%;
        padding-left: 3%;
        padding-right: 0;
        margin: 0 auto;
    }
}

@media screen and (max-width: 430px) {
    .pf-2col-contents {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    
    .pf-2col-contents.mt {
        margin-top: 20px;
    }

    .pf-2col-contents-left {
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .pf-2col-contents-right {
        position: relative;
        width: 100%;
        padding-top: 10px;
        padding-left: 0;
        padding-right: 0;
        margin: 0 auto;
    }
}

.pf-flow-wrap {
    position: relative;
    display: -webkit-box;
	display: flex;
    -ms-flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
	flex-wrap: wrap; /* 画面幅に合わせてカラム落ちさせる */
    -webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.pf-flow-box {
	outline: none;
	position: relative;
	z-index: 0;
	width: 30%;
    margin-bottom: 0;    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.pf-flow-icon {
    position: relative;
    width: 80%;
    margin: 0 auto 20px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #5a3bfa;
}

.pf-flow-icon img {
    width: 60%;
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.pf-flow-title {
    text-align: center;
}

.pf-flow-title span {
    font-family: "neue-haas-grotesk-display","Yu Gothic Pr6N D","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(30px, 3vw, 50px);
}

.arrow-moving-wrap {
    display: none;
}

@media screen and (max-width: 500px) {
    .arrow-moving-wrap {
        display: block;
    }
}

.arrow-moving {
    position: relative;
    display: inline-block;
    width: 50px;
    margin-right: 5px;
    padding: 3px 0;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.5);
    line-height: 1;
    text-align: center;
    font-size: 12px;
    color: #000000;
}

.arrow-moving font {
    display: inline-block;
    position: relative;
    width: 20px;
    -webkit-animation: moveLeft 1.3s ease-in-out infinite;
	animation: moveLeft 1.3s ease-in-out infinite;
}


@-webkit-keyframes moveLeft {
    0% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    100% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
        opacity: 0;
    }
}

@keyframes moveLeft {
    0% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    100% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
        opacity: 0;
    }
}

.pf-time-table-wrap {
    width: 100%;
}

.pf-time-table-wrap img {
    width: 100%
}

@media screen and (max-width: 500px) {
    .pf-time-table-wrap {
        width: 100%;
        overflow-x: scroll;
    }

    .pf-time-table-wrap img {
        width: 180%
    }
}

.pf-footer {
	position: relative;
	width: 100%;
	margin: 0 auto;
    padding: 0.5vw 3vw 3vw;
}

@media screen and (max-width: 430px) {
    .pf-footer {
        position: relative;
        display: -webkit-box;
        display: flex;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: stretch;
        align-items: stretch; /*横並びの高さを揃える*/
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        padding: 1vw 3vw 3vw;
    }
}

.pf-footer-sns-wrap {
    width: 100%;
    height: auto;
    padding: 3vw 3vw 3vw;
    background: #222222;
    border-radius: clamp(5px, 0.69vw, 20px);
    font-size: clamp(10px, 0.8vw, 16px);
    color: #ffffff;
}

.pf-footer-sns-wrap-inner {
    position: relative;
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
    padding: 0 5%;
}

@media screen and (max-width: 500px) {
    .pf-footer-sns-wrap-inner {
        margin-bottom: 10px;
    }
}

.pf-footer-sns-title {
    margin-bottom: 10px;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;
	font-size: clamp(16px, 1.5vw, 30px);
}

.pf-sns-btn-wrap {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    text-align: center !important;
}

@media screen and (max-width: 660px) {
    .pf-sns-btn-wrap {
        width: 90%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }
}

@media screen and (max-width: 530px) {
    .pf-sns-btn-wrap {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }
}

.pf-sns-btn {
    display: inline-block;
    margin: 0 1.2vw;
}

@media screen and (max-width: 460px) {
    .pf-sns-btn {
        display: inline-block;
        margin: 0 0.8vw;
    }
}

@media screen and (max-width: 430px) {
    .pf-sns-btn {
        display: inline-block;
        margin: 0 2vw;
    }
}

.pf-sns-btn img {
    width: clamp(25px, 2.5vw, 50px);
    height: clamp(25px, 2.5vw, 50px);
    -webkit-transition: all 0.3s;
	transition: all 0.3s;
}

@media screen and (max-width: 430px) {
    .pf-sns-btn img {
        width: 30px;
        height: 30px;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }
}

.pf-sns-btn img:hover {
    opacity: 0.7;
}

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

.pf-copyright small {
    text-align: center;
	font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 500;
    font-style: normal;
	font-size: clamp(8px, 0.7vw, 16px);
	color: #ffffff;
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 *single
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.section-single-event {
	position: relative;
	width: 100%;
    margin: 0 auto;
	padding: 7% 0;
    line-height: 1.5;
    font-family: "Yu Gothic Pr6N D", sans-serif;
}

.section-single-event ul li {
    line-height: 1.5;
    font-family: "Yu Gothic Pr6N D", sans-serif;
}

.section-single-event p {
    line-height: 1.5;
}

.section-single-event .ut-bura {
    font-family: "Yu Gothic Pr6N D", sans-serif;
}

@media screen and (max-width: 430px) {
    .section-single-event {
        font-size: clamp(14px, 1.3vw, 40px);
    }

    .section-single-event p {
        font-size: clamp(14px, 1.3vw, 40px);
    }
    
    .section-single-event ul li {
        font-size: clamp(14px, 1.3vw, 40px);
    }
}

.event-status {
	display: inline-block;
	height: 2vw;
    margin-right: 0.3vw;
	padding: 0 1vw;
	border-radius: 4px;
	line-height: 2vw;
	font-size: clamp(14px, 1vw, 20px);
}

@media screen and (max-width: 1024px) {
    .event-status {
        display: inline-block;
        height: 3vw;
        margin-right: 0.3vw;
        padding: 0 1vw;
        border-radius: 4px;
        line-height: 3vw;
        font-size: clamp(14px, 1vw, 20px);
    }
}

@media screen and (max-width: 768px) {
    .event-status {
        display: inline-block;
        height: 24px;
        margin-right: 3px;
        padding: 0 8px;
        border-radius: 4px;
        line-height: 24px;
        font-size: 12px;
    }
}

.event-status.now {
    border: 1px solid #222222;
	background: #222222;
	color: #ffffff;
}

.event-status.end {
    border: 1px solid #666666;
	background: #666666;
	color: #ffffff;
}

.event-status.online {
    border: 1px solid #6439ff;
	background: #f7f7f7;
	color: #6439ff;
}

.event-status.online i {
   padding-right: 0.2vw;
}

.event-status.online i:before {
    transform: scale(1.3);
}

.event-status.real {
    border: 1px solid #6439ff;
	background: #6439ff;
	color: #ffffff;
}

.event-status.real i {
   padding-right: 0.2vw;
}

.event-status.real i:before {
    transform: scale(1.3);
}

.single-event-h2 {
	margin-bottom: 0.5%;
    line-height: 1.5;
	font-size: clamp(16px, 2vw, 60px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.single-event-h2 span {
	margin-bottom: 0.5%;
    line-height: 1.5;
	font-size: clamp(14px, 1.3vw, 40px);
    font-family: "Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.single-event-subtitle-h3 {
    margin-bottom: 2%;
    line-height: 1.5;
	font-size: clamp(14px, 1.3vw, 40px);
}

@media screen and (max-width: 430px) {
    .single-event-subtitle-h3 br {
        display: none;
    }
}

.single-event-date {
    position: relative;
	margin-bottom: 0.5%;
    font-size: clamp(14px, 1.3vw, 40px);
}

.single-event-date span {
	font-family: "neue-haas-grotesk-display", sans-serif;
    font-style:  normal;
    font-weight: 600;
	font-size: clamp(16px, 2vw, 30px);
}

.single-event-place {
    position: relative;
	margin-bottom: 2%;
    font-size: clamp(14px, 1.3vw, 40px);
}

.single-event-header-bottom {
    padding: 1vw 0;
}

.single-event-mv-wrapper {
    position: relative;
    z-index: 0;
    width: auto;
    margin-left: -15vw;
    margin-right: -15vw;
    padding: 0 15vw;
    background: #f7f7f7;
    background-position: center;
    background-repeat: repeat-x;
    background-size: contain;
}

.single-event-mv-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
}

@media screen and (max-width: 500px) {
    .single-event-mv-wrapper {
        position: relative;
        z-index: 0;
        width: auto;
        margin-left: -3vw;
        margin-right: -3vw;
        padding: 0;
        background: #f7f7f7;
        background-position: center;
        background-repeat: repeat-x;
        background-size: contain;
    }
}

.single-event-mv {
    position: relative;
    z-index: 1;
    margin-bottom: 7%;
    text-align: center;
}

.single-event-mv img {
    width: 100%;
    border-radius: clamp(5px, 0.69vw, 20px);
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.single-event-mv.lab img {
    width: 100%;
    border-radius: 0;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.single-event-contents {
    padding: 0 10vw;
}

@media screen and (max-width: 1024px) {
    .single-event-contents {
        padding: 0;
    }
}

.single-event-contents strong {
    font-size: clamp(14px, 1.1vw, 50px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.single-event-h3 {
	position: relative;
    padding-left: 1.5vw;
	margin: 8% auto 3%;
    line-height: 1;
	font-size: clamp(16px, 2vw, 60px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.single-event-h3::before {
    content: "";
    position: absolute;
    top: 35%;
    left: 0;
    height: 30%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #6439ff;
}

@media screen and (max-width: 500px) {
    .single-event-h3 {
        position: relative;
        padding-left: 15px;
        margin: 8% auto 3%;
        line-height: 1;
        font-size: clamp(16px, 2vw, 60px);
        font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    }

    .single-event-h3::before {
        content: "";
        position: absolute;
        top: 25%;
        left: 0;
        height: 50%;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        background: #6439ff;
    }
}

.single-event-map {
	display: inline-block;
	padding: 0.3vw 0.7vw;
	border-radius: 4px;
	background: #222222;
    vertical-align: 0.1vw;
	font-size: clamp(12px, 0.8vw, 16px);
	color: #ffffff;
}

@media screen and (max-width: 430px) {
     .single-event-map {
        display: inline-block;
        padding: 0.5vw 1.5vw;
        border-radius: 4px;
        background: #222222;
        vertical-align: 0.1vw;
        font-size: clamp(12px, 0.8vw, 16px);
        color: #ffffff;
    }   
}

.single-event-map:hover {
	opacity: 0.7;
}

.single-event-lecturer-wrap {
	position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto 7%;
	padding: 0;
}

.single-event-lecturer-left {
    position: relative;
	width: 30%;
	margin: 0 auto;
	padding: 0;
}

.single-event-lecturer-right {
    position: relative;
	width: 70%;
	margin: 0 auto;
}

.single-event-lecturer-left img {
    width: 75%;
    border-radius: 50%;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

.single-event-lecturer-left.no-radius img {
    width: 75%;
    border-radius: 0;
    box-shadow: none;
}

@media screen and (max-width: 500px) {
    .single-event-lecturer-wrap {
        position: relative;
        display: block;
        width: 100%;
        margin: 0 auto 7%;
        padding: 0;
    }

    .single-event-lecturer-left {
        position: relative;
        width: 100%;
        margin: 0 auto 20px;
        padding: 0;
        text-align: center;
    }

    .single-event-lecturer-right {
        position: relative;
        width: 100%;
        margin: 0 auto;
    }
    
    .single-event-lecturer-left img {
        width: 45%;
        border-radius: 50%;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }

    .single-event-lecturer-left.no-radius img {
        width: 45%;
        border-radius: 0;
        box-shadow: none;
    }
}

.single-event-lecturer-name {
	margin-bottom: 10px;
	line-height: 1;
	font-size: clamp(14px, 1.5vw, 50px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.single-event-lecturer-ttl {
	margin-bottom: 10px;
	line-height: 1.2;
    font-size: clamp(12px, 0.9vw, 40px) !important;
    font-family: "Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.single-event-lecturer-prof {
    margin-bottom: 0;
	font-size: clamp(12px, 0.8vw, 40px) !important;
}

.single-lab-lecturer-prof {
    margin-bottom: 0;
	font-size: clamp(12px, 0.8vw, 40px) !important;
}

.single-lab-lecturer-message {
    margin-bottom: 0;
	font-size: clamp(12px, 0.8vw, 40px) !important;
}

.single-pics-wrap {
	position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
	width: 100%;
	margin: 0 auto 30px;
	padding: 0;
}

.single-pics-left {
    position: relative;
	width: 48%;
	margin: 0 auto;
    padding: 0;
    text-align: left;
}

.single-pics-right {
    position: relative;
	width: 48%;
	margin: 0 auto;
	padding: 0;
    text-align: right;
}

.single-pics-right img,
.single-pics-left img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}

@media screen and (max-width: 500px) {
    .single-pics-wrap {
        position: relative;
        display: block;
        width: 100%;
        margin: 0 auto 30px;
        padding: 0;
    }

    .single-pics-left {
        position: relative;
        width: 100%;
        margin: 0 auto 20px;
        padding: 0;
        text-align: center;
    }

    .single-pics-right {
        position: relative;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    
    .single-pics-left img,
    .single-pics-left img {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
    }
}

.sg-course-alert {
	margin-bottom: 30px;
	padding: 10px;
	background: #ea0100;
	text-align: center;
	color: #ffffff;
}

.single-sns-wrap {
	float: left;
	padding: 5px 0 0;
	margin: 0;
	line-height: 1;
	text-align: left;
}

.single-sns-wrap a {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 20px;
	border-radius: 2px;
	background: #abb1b9;
	text-align: center;
	line-height: 30px;
	text-decoration: none;
	font-size: 12px;
	color: #ffffff;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear;
}

.single-sns-wrap a:hover {
	opacity: 0.7;
}

.sns-num-sg {
	position: relative;
	display: inline-block;
	min-width: 30px;
	height:30px;
	margin: 0;
	margin-left: 6px;
	margin-right: 20px;
	padding: 0 6px;
	border-radius: 2px;
	background: #eeeeee;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
	color: #333333;
}

.sns-num-sg > a {
	display: inline !important;
	background: none !important;
	color: #333333 !important;
}

.sns-num-sg > a:hover {
	color: #333333;
}

.sns-num-sg-last {
	position: relative;
	display: inline-block;
	min-width: 30px;
	height: 30px;
	margin: 0;
	margin-left: 6px;
	margin-right: 0px;
	padding: 0 6px;
	border-radius: 2px;
	background: #eeeeee;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
	color: #333333;
}

.sns-num-sg:after,
.sns-num-sg-last:after {
	position: absolute;
	top: 50%;
	right: 100%;
	height: 0;
	width: 0;
	content: " ";
	pointer-events: none;
	border: solid transparent;
	border-right-color: #eeeeee;
	border-width: 4px;
	margin-top: -4px;
}

.course-footer-sns-wrap {
    width: 100%;
    margin-top: 50px;
	padding: 20px 0;
    text-align: center;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	background: #f7f7f7;
}

.course-footer-sns-inner {
    display: inline-block;
    margin: 0 auto;
}

.course-footer-sns {
    float: left;
    margin: 0 15px;
    vertical-align: top;
}

@media screen and (max-width: 500px) {
    .course-footer-sns {
        float: left;
        margin: 0 5px;
        vertical-align: top;
    }
}

.course-footer-sns-tw {
	width: 75px;
	margin: 0 auto 15px;
	font-size: 11px;
}
 
.course-footer-sns-tw-box {
	display: block;
	position: relative;
	width: 75px;
	height: 36px;
	margin-bottom: 5px;
	border: 1px solid #cccccc;
	border-radius: 3px;
	background: #fff;
	line-height: 36px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	color: #333333;
}

.course-footer-sns-tw-box:after,
.course-footer-sns-tw-box:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	height: 0;
	width: 0;
	border: solid transparent;
	pointer-events: none;
}
 
.course-footer-sns-tw-box:after {
	margin-left: -3px;
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 3px;
}

.course-footer-sns-tw-box:before {
	margin-left: -4px;
	border-color: rgba(221, 221, 221, 0);
	border-top-color: #ccc;
	border-width: 4px;
}

.relation-event-wrap-title {
    position: relative;
	margin: 60px auto 10px;
    line-height: 1.2;
    text-align: center;
	font-size: 24px;
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

@media screen and (max-width: 1024px) {
    .relation-event-wrap-title {
        font-size: 20px;
    }
}

@media screen and (max-width: 500px) {
    .relation-event-wrap-title {
        font-size: 18px !important;
    }
}

.relation-event-wrap {
    width: 100%;
}

.relation-event {
    position: relative;
    display: -webkit-box;
	display: flex;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    align-items: flex-start;
    width: 100%;
    height: auto;
    margin:0 auto 20px;
    padding: 15px;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    background: #ffffff;
	box-shadow: 0 2px 0 #efefef;
    cursor: pointer;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

@media screen and (max-width: 500px) {
    .relation-event {
        margin:0 auto 10px;
        padding: 10px;
    }
}

.relation-event:hover {
    background: #f7f7f7;
	box-shadow: 0 0 5px #d9dde0;
}

.relation-event-pic {
    position: relative;
    width: 30%;
}

.relation-event-pic img {
	width: 100%;
    border-radius: 6px;
}

@media screen and (max-width: 500px) {
    .relation-event-pic img {
        width: 100%;
        border-radius: 4px;
        aspect-ratio: 1;
        object-fit: cover;
        object-position: right bottom;
    }
}

.relation-event-text {
    width: 70%;
    padding-left: 10px;
	word-break: normal;
    word-wrap: break-word;
}

.relation-event-cat {
	display: inline-block;
    width: auto;
	margin-bottom: 10px;
    margin-right: 3px;
    padding: 0.2vw 0.5vw 0.2vw 0.5vw;
    border-radius: 0.2vw;
    border: 1px solid #222222;
	background: #222222;
	text-align: center;
	line-height: 1;
	font-size: clamp(10px, 0.7vw, 14px);
	color: #ffffff;
}

.relation-event-cat.end {
    border: 1px solid #666666;
	background: #666666;
	color: #ffffff;
}

.relation-event-cat.online {
    border: 1px solid #6439ff;
	background: #f7f7f7;
	color: #6439ff;
}

.relation-event-cat.online i {
   padding-right: 0.2vw;
}

.relation-event-cat.online i:before {
    transform: scale(1.3);
}

.relation-event-cat.real {
    border: 1px solid #6439ff;
	background: #6439ff;
	color: #ffffff;
}

.relation-event-cat.real i {
   padding-right: 0.2vw;
}

.relation-event-cat.real i:before {
    transform: scale(1.3);
}

@media screen and (max-width: 1024px) {
    .relation-event-cat {
        display: inline-block;
        width: auto;
        padding: 5px 10px 5px 10px;
        border-radius: 0.5vw;
        background: #222222;
        text-align: center;
        line-height: 1;
        font-size: 14px;
        color: #ffffff;
    }
}

@media screen and (max-width: 500px) {
    .relation-event-cat {
        display: inline-block;
        width: auto;
        margin-bottom: 5px !important;
        padding: 3px 5px;
        border-radius: 4px;
        background: #222222;
        text-align: center;
        line-height: 1;
        font-size: 10px !important;
        color: #ffffff;
    }
}

.relation-event-date {
    position: relative;
    margin-bottom: 5px !important;
    padding-left: 20px;
    line-height: 1;
    font-family: "neue-haas-grotesk-display","Yu Gothic Pr6N D","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 20px;
    color: #6439ff;
}

.relation-event-date:before {
    content: "";
    position: absolute;
    top: 18%;
    left: 0;
    height: 60%;
    aspect-ratio: 1 / 1.111;
    background-image: url('../images/icon-calendar.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.relation-event-date span {
    font-size: 16px;
}

@media screen and (max-width: 500px) {
    .relation-event-date {
        position: relative;
        margin-bottom: 0 !important;
        padding-left: 15px;
        line-height: 1;
        font-family: "neue-haas-grotesk-display","Yu Gothic Pr6N D","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 14px !important;
        color: #6439ff;
    }
    
    .relation-event-date:before {
        content: "";
        position: absolute;
        top: 18%;
        left: 0;
        height: 60%;
        aspect-ratio: 1 / 1.111;
        background-image: url('../images/icon-calendar.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .relation-event-date span {
        font-size: 12px;
    }
}

.relation-event-ttl {
	position: relative;
	margin: 0 auto;
    line-height: 1.2;
	font-size: 20px;
    font-family: "Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.relation-event-ttl a {
	text-decoration: none;
	color: #000000;
	outline: none !important;
}

@media screen and (max-width: 1024px) {
    .relation-event-ttl {
        position: relative;
        margin: 0 auto;
        line-height: 1.2;
        font-size: 16px;
        font-family: "Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    }
}

.relation-event-hashtag {
    position: relative;
	margin: 10px auto 0;
    line-height: 1.2;
}

.relation-event-hashtag span {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px 10px;
    border: 1px solid #dddddd;
    border-radius: 30px;
    background: #ffffff;
    box-shadow: 0 0 0 2px #f7f7f7;
    line-height: 1;
	font-size: clamp(10px, 12px, 16px);
    font-family: "Yu Gothic Pr6N D", sans-serif;
}

@media screen and (max-width: 500px) {
    .relation-event-hashtag {
        position: relative;
        margin: 5px auto 0;
        line-height: 1.2;
    }

    .relation-event-hashtag span {
        position: relative;
        display: inline-block;
        margin-right: 2px !important;
        margin-bottom: 2px !important;
        padding: 3px 8px;
        border: 1px solid #dddddd;
        border-radius: 30px;
        background: #ffffff;
        box-shadow: 0 0 0 2px #f7f7f7;
        line-height: 1;
        font-size: 10px;
        font-family: "Yu Gothic Pr6N D", sans-serif;
    }
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 * common parts
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lock {
    overflow: hidden;
}

.modal-overlay {
    z-index: 10000;
    position: fixed;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 120%;
	background: rgba(34,34,34,0.97);
	opacity: 0;
}

.is-ie .modal-overlay,
.is-edge .modal-overlay {
	background: #222222;
	opacity: 1 !important;
}

.modal-wrap {
    z-index: 10010;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.modal-content {
    display: none;
	position: relative;
	z-index: 10002;
    width: 50%;
    margin: 3vw;
	color: #ffffff;
}

.modal-close {
	display: block;
	position: fixed;
	top: 3vw;
	right: 22%;
	width: 1vw;
	height: 1vw;
	text-align: center;
	cursor: pointer;
}

.modal-close img {
	width: 2vw;
	height: 2vw;
}

@media screen and (max-width: 1024px) {
    .modal-content {
        display: none;
        position: relative;
        z-index: 10002;
        width: 70%;
        margin: 3vw;
        color: #ffffff;
    }

    .modal-close {
        display: block;
        position: fixed;
        top: 3vw;
        right: 14%;
        width: 1vw;
        height: 1vw;
        text-align: center;
        cursor: pointer;
    }

    .modal-close img {
        width: 2.5vw;
        height: 2.5vw;
    }
}

@media screen and (max-width: 768px) {
    .modal-content {
        display: none;
        position: relative;
        z-index: 10002;
        width: 80%;
        margin: 3vw;
        color: #ffffff;
    }

    .modal-close {
        display: block;
        position: fixed;
        top: 3vw;
        right: 8%;
        width: 1vw;
        height: 1vw;
        text-align: center;
        cursor: pointer;
    }

    .modal-close img {
        width: 3vw;
        height: 3vw;
    }
}

@media screen and (max-width: 430px) {
    .modal-content {
        display: none;
        position: relative;
        z-index: 10002;
        width: 80%;
        margin: 10vw;
        color: #ffffff;
    }

    .modal-close {
        display: block;
        position: fixed;
        top: 10vw;
        right: 8%;
        width: 1vw;
        height: 1vw;
        text-align: center;
        cursor: pointer;
    }

    .modal-close img {
        width: 5vw;
        height: 5vw;
    }
}

.modal-title {
    margin-bottom: 2%;
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(16px, 1.8vw, 36px);
    color: #00ccdd;
}

.modal-subtitle {
    margin-bottom: 2%;
    font-size: clamp(14px, 1.2vw, 30px);
    font-family: "Yu Gothic StdN E","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

.light-text {
    font-family: "Yu Gothic Pr6N D", sans-serif;
}

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

@media screen and (max-width: 768px) {
    .atten-small {
        width: 70%;
        margin: 0 auto;
        text-align: left;
    }
}

@media screen and (max-width: 430px) {
    .atten-small {
        width: 100%;
    }
}

.attention {
	padding: 2vw;
	border-radius: 4px;
    background: #6439ff;
    color: #ffffff;
}

@media screen and (max-width: 768px) {
    .attention {
        padding: 6vw;
        border-radius: 4px;
        background: #6439ff;
        color: #ffffff;
    }
}

.attention2 {
    font-size: clamp(10px, 0.8vw, 16px);
	line-height: 1.5;
}

.color-purple {
    color: #6439ff;
}

.link-btn {
	position: relative;
    display: inline-block;
	outline: none;
    width: auto;
    padding: 2vw 7vw 2vw 2vw;
	background-color: #6439ff;
	border-radius: 16vw;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
	text-decoration: none;
    text-align: left;
	font-size: clamp(12px, 1vw, 24px);
	color: #ffffff;
	cursor: pointer;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

@media screen and (max-width: 768px) {
    .link-btn {
        position: relative;
        display: inline-block;
        outline: none;
        width: auto;
        padding: 3vw 14vw 3vw 4vw;
        background-color: #6439ff;
        border-radius: 16vw;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
        text-decoration: none;
        text-align: left;
        font-size: clamp(12px, 1vw, 24px);
        color: #ffffff;
        cursor: pointer;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
}

@media screen and (max-width: 428px) {
    .link-btn {
        position: relative;
        display: inline-block;
        outline: none;
        width: auto;
        padding: 5vw 18vw 5vw 8vw;
        background-color: #6439ff;
        border-radius: 16vw;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
        text-decoration: none;
        text-align: left;
        font-size: clamp(14px, 1.5vw, 24px);
        color: #ffffff;
        cursor: pointer;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
}

.link-btn::before {
	content: '';
	display: block;
	position: absolute;
    top: 50%;
    right: 8%;
    transform: translate(0%, -50%);
	z-index: 1;
	height: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
	background-color: #222222;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.link-btn::after {
	content: '';
	display: block;
	position: absolute;
    top: 50%;
    right: 8%;
    transform: translate(0%, -50%);
	z-index: 2;
	height: 50%;
    aspect-ratio: 1 / 1;
    background-image: url('../images/icon-arrow-white.svg');
	background-position: center center;
	background-repeat: no-repeat;	
    background-size: 40%;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.link-btn:hover {
	text-decoration: none !important;
	color: #ffffff;
}

.link-btn:hover::before,
.link-btn:hover::after {
    top: 50%;
    right: 6%;
}

.link-btn2 {
	position: relative;
    display: inline-block;
	outline: none;
	width: auto;
    padding: 2vw 7vw 2vw 2vw;
	background-color: #ffffff;
	border-radius: 16vw;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
	text-decoration: none;
    text-align: left;
	font-size: clamp(12px, 1vw, 24px);
	color: #000000;
	cursor: pointer;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

@media screen and (max-width: 768px) {
    .link-btn2 {
        position: relative;
        display: inline-block;
        outline: none;
        width: auto;
        padding: 3vw 14vw 3vw 4vw;
        background-color: #ffffff;
        border-radius: 16vw;
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
        text-decoration: none;
        text-align: left;
        font-size: clamp(12px, 1vw, 24px);
        color: #000000;
        cursor: pointer;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
}

.link-btn2::before {
	content: '';
	display: block;
	position: absolute;
    top: 50%;
    right: 8%;
    transform: translate(0%, -50%);
	z-index: 1;
	height: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
	background-color: #6439ff;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.link-btn2::after {
	content: '';
	display: block;
	position: absolute;
    top: 50%;
    right: 8%;
    transform: translate(0%, -50%);
	z-index: 2;
	height: 50%;
    aspect-ratio: 1 / 1;
    background-image: url('../images/icon-arrow-white.svg');
	background-position: center center;
	background-repeat: no-repeat;	
    background-size: 40%;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.link-btn2:hover {
	text-decoration: none !important;
	color: #000000;
}

.link-btn2:hover::before,
.link-btn2:hover::after {
    top: 50%;
    right: 6%;
}

.link-btn3 {
	position: relative;
    display: inline-block;
	outline: none;
    width: auto;
    padding: 2vw 7vw 2vw 2vw;
	background-color: #222222;
	border-radius: 16vw;
    box-shadow: 0 0 15px 0 rgba(255,255,255,0.8);
	text-decoration: none;
    text-align: left;
	font-size: clamp(12px, 1vw, 24px);
	color: #ffffff;
	cursor: pointer;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

@media screen and (max-width: 768px) {
    .link-btn3 {
        position: relative;
        display: inline-block;
        outline: none;
        width: auto;
        padding: 3vw 14vw 3vw 4vw;
        background-color: #222222;
        border-radius: 16vw;
        box-shadow: 0 0 15px 0 rgba(255,255,255,0.8);
        text-decoration: none;
        text-align: left;
        font-size: clamp(12px, 1vw, 24px);
        color: #ffffff;
        cursor: pointer;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
}

@media screen and (max-width: 428px) {
    .link-btn3 {
        position: relative;
        display: inline-block;
        outline: none;
        width: auto;
        padding: 5vw 18vw 5vw 8vw;
        background-color: #222222;
        border-radius: 16vw;
        box-shadow: 0 0 15px 0 rgba(255,255,255,0.8);
        text-decoration: none;
        text-align: left;
        font-size: clamp(14px, 1.5vw, 24px);
        color: #ffffff;
        cursor: pointer;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
}

.link-btn3::before {
	content: '';
	display: block;
	position: absolute;
    top: 50%;
    right: 8%;
    transform: translate(0%, -50%);
	z-index: 1;
	height: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
	background-color: #6439ff;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.link-btn3::after {
	content: '';
	display: block;
	position: absolute;
    top: 50%;
    right: 8%;
    transform: translate(0%, -50%);
	z-index: 2;
	height: 50%;
    aspect-ratio: 1 / 1;
    background-image: url('../images/icon-arrow-white.svg');
	background-position: center center;
	background-repeat: no-repeat;	
    background-size: 40%;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.link-btn3:hover {
	text-decoration: none !important;
	color: #ffffff;
}

.link-btn3:hover::before,
.link-btn3:hover::after {
    top: 50%;
    right: 6%;
}

.link-btn-small {
    position: relative;
    display: inline-block;
	outline: none;
	width: auto;
    padding: 1vw 4vw 1vw 1vw;
	background-color: #222222;
	border-radius: 4px;
	text-decoration: none;
	line-height: 1;
    text-align: left;
	font-size: clamp(10px, 0.8vw, 20px);
	color: #ffffff;
	cursor: pointer;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

@media screen and (max-width: 430px) {
    .link-btn-small {
        position: relative;
        display: inline-block;
        outline: none;
        width: auto;
        padding: 2vw 8vw 2vw 2vw;
        background-color: #222222;
        border-radius: 4px;
        text-decoration: none;
        line-height: 1;
        text-align: left;
        font-size: clamp(10px, 0.8vw, 20px);
        color: #ffffff;
        cursor: pointer;
        -webkit-transition: all 200ms linear;
        -moz-transition: all 200ms linear;
        -o-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
        transition: all 200ms linear;
    }
}

.link-btn-small:before {
    content: '';
	display: block;
	position: absolute;
    top: 50%;
    right: 8%;
    transform: translate(0%, -50%);
	z-index: 2;
	height: 50%;
    aspect-ratio: 1 / 1;
    background-image: url('../images/icon-arrow-white.svg');
	background-position: center center;
	background-repeat: no-repeat;	
    background-size: 80%;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.link-btn-small:hover {
	text-decoration: none !important;
	color: #ffffff;
}

.link-btn-small:hover::before,
.link-btn-small:hover::after {
    top: 50%;
    right: 6%;
}

.link-btn-small2 {
	position: relative;
	display: inline-block;
    width: auto;
	margin: 0 0 0 0.3vw;
	padding: 0.3vw 1vw;
	border-radius: 0.2vw;
	background: #222222;
	line-height: 1;
    vertical-align: 0.2vw;
    text-align: center;
    font-size: clamp(10px, 0.8vw, 20px);
    font-weight: bold;
	color: #ffffff;
	transition: all 300ms linear;
    cursor: pointer;
}

@media screen and (max-width: 1024px) {
    .link-btn-small2 {
        position: relative;
        display: inline-block;
        width: auto;
        margin: 0 0 0 0.3vw;
        padding: 0.4vw 1vw;
        border-radius: 0.4vw;
        background: #222222;
        line-height: 1;
        vertical-align: 0.2vw;
        text-align: center;
        font-size: clamp(12px, 0.8vw, 20px);
        font-weight: bold;
        color: #ffffff;
        transition: all 300ms linear;
        cursor: pointer;
    }
}

@media screen and (max-width: 430px) {
    .link-btn-small2 {
        position: relative;
        display: inline-block;
        width: auto;
        margin: 0 0 0 0.3vw;
        padding: 0.8vw 1.5vw;
        border-radius: 1vw;
        background: #222222;
        line-height: 1;
        vertical-align: 0.2vw;
        text-align: center;
        font-size: clamp(12px, 0.8vw, 20px);
        font-weight: bold;
        color: #ffffff;
        transition: all 300ms linear;
        cursor: pointer;
    }
}

.link-btn-small2:hover {
	text-decoration: none;
    color: #ffffff;
	opacity: 0.7;
}

blockquote {
	width: 90%;
	margin: 20px auto;
	padding: 30px;
	background: #fafafa;
	line-height: 1.5em;
	border: 3px solid #dddddd;
	border-radius: 6px;
}

blockquote.white-wide {
	width: 100%;
	margin: 20px auto;
	padding: 20px;
	background: #ffffff;
	line-height: 1.5em;
	border: 1px solid #dddddd;
	border-radius: 6px;
}

/* table
-------------------------------------------------------------*/

.table {
	width: 100%;
	border-top: 1px solid #dddddd;
}

.table th {
	width: 25%;
	padding: 20px;
	border-bottom: 1px solid #dddddd;
	border-right: 1px solid #dddddd;
	vertical-align: top;
	font-weight: bold;
}

.table td {
    width: 75%;
	padding: 20px;
	border-bottom: 1px solid #dddddd;
	vertical-align: middle;
    font-family: "Yu Gothic Pr6N D", sans-serif;
}

@media screen and (max-width: 500px) {
    .table th {
        width: 25%;
        padding: 10px;
        border-bottom: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
        vertical-align: top;
        font-weight: bold;
    }

    .table td {
        width: 75%;
        padding: 10px;
        border-bottom: 1px solid #dddddd;
        vertical-align: middle;
        font-family: "Yu Gothic Pr6N D", sans-serif;
    }
}

/* input
-------------------------------------------------------------*/

input[type=text],
input[type=tel],
input[type=email],
input[type=password] {
	clear: both;
	overflow: auto;
	width: 200px;
	height: 40px;
	margin: 0;
	padding: 0 5px;
	font-size: 14px;
}

label {
	padding-left: 7px;
	cursor: pointer;
}

textarea {
	clear: both;
	width: 400px;
	margin: 0;
	padding: 10px;
	resize: none;
	font-size: 14px;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=password],
textarea {
  	outline: none;
	border-radius: 3px;
	border: 1px solid #dddddd;
	box-shadow: inset 0 0 3px #cccccc;
	background: #ffffff;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
	transition: all 0.3s;
}
 
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
textarea:focus {
	box-shadow: 0px 0px 5px #7bc1f7;
	background: #dbeefd;
}

:placeholder-shown { color: #999999; }

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder { color: #999999; }

/* Firefox 18- */
:-moz-placeholder { color: #999999; }

/* Firefox 19+ */
::-moz-placeholder { color: #999999; }

/* IE 10+ */
:-ms-input-placeholder { color: #999999; }

.select {
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	height: 30px;
	width: 150px;
	padding: 0 10px;
	border: 1px solid #dddddd;
	background: #eee;
	color: #2e4259;
}

.select.select--narrow {
	width: 80px;
}

.select.select--wide {
	width: 280px;
}

.input[type="file"] {
	border: none;
	background: none;
	box-shadow: none;
	font-size: 12px;
}

label {
	margin: 0 3px;
	cursor: pointer;
}

.form-required {
	display: inline-block;
	height: 16px;
	margin: 0 3px;
	padding: 0 4px;
	border-radius: 2px;
	background: #fa857c;
	line-height: 16px;
	vertical-align: 2px;
	font-weight: lighter;
	font-size: 10px;
	color: #ffffff;
}

.form-optional {
	display: inline-block;
	height: 16px;
	padding: 0 4px;
	border-radius: 2px;
	background: #a1a8b2;
	line-height: 16px;
	vertical-align: 2px;
	font-weight: lighter;
	font-size: 10px;
	color: #ffffff;
}

.form-ml0 {
	margin-left: 0;
}

.check-submit-wrap {
	margin: 40px 0;
	text-align: center;
}

.check-submit {
    /*display: inline;*/
}

.check-submit button {
	outline: none;
	width: 150px;
	height: 40px;
	margin: 20px 0;
	border-radius: 3px;
	border: none;
	background: #5c646f;
	font-family: "YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
	transition: all 0.3s;
}

.check-submit button:hover {
	background: #454b53;
}

.check-back button {
	width: auto;
	height: auto;
	margin: 20px 0;
	border: none;
	border-radius: 0;
	background: none;
	font-family: "YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #2e4259;
}

.str-count-wrap {
	position: relative;
	width: 100%;
	margin-bottom: 5px;
	text-align: right;
}

.str-count {
	font-size: 16px;
	font-family: 'din-medium', sans-serif;
	font-weight: 400;
	color: #cccccc;
}

.str-count-subscript {
	font-size: 12px;
	color: #cccccc;
}

/* button
-------------------------------------------------------------*/

.button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	display: inline-block;
	outline: none;
	border: none;	
	line-height: 1;
	vertical-align: middle;
	font-family: "YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
  	-ms-transition: all 0.3s;
  	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.button.buttun--large {
	width: 100%;
	padding: 20px;
	border-radius: 3px;
	background: #737d8b;
	border: 1px solid #5c646f;
	box-shadow: inset 0 1px 0 #989faa, 1px 1px 1px rgba(0,0,0,0.1);
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
}

.button.buttun--middle {
	height: 54px;
	padding: 0 100px;
	border-radius: 3px;
	background: #737d8b;
	border: 1px solid #5c646f;
	box-shadow: inset 0 1px 0 #989faa, 1px 1px 1px rgba(0,0,0,0.1);
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
}

.button.buttun--small {
	height: 30px;
	padding: 0 20px;
	border-radius: 3px;
	border: 1px solid #5c646f;
	background: #737d8b;
	box-shadow: inset 0 1px 0 #989faa, 1px 1px 1px rgba(0,0,0,0.1);
	font-size: 14px;
	font-weight:bold;
	color: #ffffff;
}

.button.buttun--sub {
	height: 30px;
	padding: 0 10px;
	border-radius: 3px;
	border: 1px solid #cccccc;
	background: #f7f7f7;
	box-shadow: inset 0 1px 0 #f7f7f7, 1px 1px 1px rgba(0,0,0,0.1);
	font-size: 14px;
	color: #555555;
}

.buttun--large:hover,
.buttun--middle:hover,
.buttun--small:hover {
	background: #646c78;
	text-decoration: none;
	color: #ffffff;
}

.buttun--sub:hover {
	background: #e6e6e6;
	text-decoration: none;
	color: #454b53;
}

.button:active{
	text-decoration:none;
    box-shadow: inset 3px 3px 3px rgba(0,0,0,0.5);
    position:relative;
    top:1px;
}

.button:disabled {
	border: 1px solid #e7e7e7;
	box-shadow: inset 0 1px 0 #ffffff;
	background: #efefef;
	font-weight: bold;
	color: #cccccc;
	cursor: not-allowed;
}

.button:disabled:hover {
	opacity: 1;
	color: #cccccc;
}

.check-submit-wrap button:disabled {
	background: #5c646f;
	color: #7c8693;
}

/* tablenav
-------------------------------------------------------------*/

.tablenav {
	clear: both;
	height: clamp(1.875rem, 1.657rem + 1.02vw, 2.875rem);
	margin: 1.5vw auto 0;
	padding: 0;
	text-align: center;
	color: #222222;
}

.page-numbers,
.tablenav .current,
.tablenav .next,
.tablenav .prev {
	display: inline-block;
	width: clamp(1.875rem, 1.657rem + 1.02vw, 2.875rem);
	height: clamp(1.875rem, 1.657rem + 1.02vw, 2.875rem);
	margin: 0 3px;
	line-height: clamp(1.75rem, 1.532rem + 1.02vw, 2.75rem);
	border: solid 1px #222222;
	border-radius: clamp(0.188rem, 0.147rem + 0.19vw, 0.375rem);
	box-shadow: 0 2px 0 #e2e5e8;
	background-color: #ffffff;
	text-align: center;
	text-decoration: none;
	font-family: "neue-haas-grotesk-display", sans-serif;
    font-style:  normal;
    font-weight: 600;
	font-size: clamp(0.875rem, 0.793rem + 0.38vw, 1.25rem);
	color: #222222;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.page-numbers:hover,
.tablenav .next:hover,
.tablenav .prev:hover {
	border: solid 1px #222222;
	background: #f5f6f7;
	text-decoration: none;
	color: #222222;
}

.tablenav .current {
	border: solid 1px #222222;
	box-shadow: 0 2px 0 #e2e5e8;
	background: #222222;
	color: #ffffff;
}

.next-article10 {
	display: block;
	position: relative;
	width: clamp(12.5rem, 8.844rem + 17.01vw, 29.25rem);
	height: clamp(2.5rem, 2.186rem + 1.46vw, 3.938rem);
	margin: 0 auto;
	border: solid 1px #222222;
	border-radius: clamp(0.188rem, 0.147rem + 0.19vw, 0.375rem);
	box-shadow: 0 2px 0 #e2e5e8;
	background: #ffffff;
	line-height: clamp(2.375rem, 2.061rem + 1.46vw, 3.813rem);
	text-align: center;
	text-decoration: none;
	font-family: "Yu Gothic Pr6N B","YuGothic", "游ゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","Meiryo","ＭＳ Ｐゴシック","MS PGothic", sans-serif;
    font-size: clamp(0.875rem, 0.793rem + 0.38vw, 1.25rem);
	color: #222222;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.next-article10:before {
	content:"\E800";
	position: absolute;
	top: 0px;
	right: clamp(0.625rem, 0.352rem + 1.27vw, 1.875rem);
	font-family: "tsg-school2024-v2";
	font-size: clamp(0.875rem, 0.793rem + 0.38vw, 1.25rem);
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.next-article10:hover {
	border: solid 1px #222222;
	text-decoration: none;
	background: #f5f6f7;
}

.next-article10:hover:before {
	right: clamp(4px, 0.69vw, 14px);
}

/* crumbs
-------------------------------------------------------------*/

.crumbs-wrap {
	width: 100%;
	margin-top: 72px;
	margin-bottom: 20px;
	border-bottom: 1px solid #f2f2f2;
	-webkit-background-size: 10px 10px;
	-moz-background-size: 10px 10px;
	background-size: 10px 10px;
	background-color: #f7f7f7;
}

.crumbs {
	width: 960px;
	margin: 0 auto;
	border-radius: 2px;
	line-height: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	color: #737d8b;
}

.crumbs.narrow {
	width: 800px;
}

.crumbs a,
.crumbs span {
    display: inline-block;
	position: relative;
    height: 30px;
    padding: 0 13px 0 10px;
    line-height: 30px;
	text-decoration: none;
	color: #737d8b;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

.crumbs a:after {
    position:absolute;
    bottom:0;
    right:5px;
    display:block;
    height:15px;
    width:15px;
    content:" ";
    -webkit-transform:skew(-40deg);
    -moz-transform:skew(-40deg);
    -o-transform:skew(-40deg);
    -ms-transform:skew(-40deg);
    transform:skew(-40deg);
    border-right:1px solid #e3e3e3;
	background:none;
}

.crumbs a:before {
    position:absolute;
    top:0;
    right:5px;
    display:block;
    height:15px;
    width:15px;
    content:" ";
    -webkit-transform:skew(40deg);
    -moz-transform:skew(40deg);
    -o-transform:skew(40deg);
    -ms-transform:skew(40deg);
    transform:skew(40deg);
    border-right:1px solid #e3e3e3;
	background:none;
}

.crumbs a:nth-of-type(1) {
    padding:0 20px 0 8px;
}

.crumbs a:hover {
	text-decoration: none;
	color: #f7483b;
}

/* atten
-------------------------------------------------------------*/

.atten {
	position: relative;
    margin: 20px auto;
    padding: 30px;
	border-radius: 4px;
	border: 1px solid #e3e3e3;
	box-shadow: 0 0 0 2px #f7f7f7;
}

/*------------------------- page 404 ------------------------- */

.not-found-message {
	margin: 100px auto;
	width: 100%;
	text-align: center;
}

.not-found-num {
    margin: 0;
	line-height: 1;
	text-align: center;
	font-family: "neue-haas-grotesk-display", sans-serif;
    font-style:  normal;
    font-weight: 600;
	font-size: 20vw;
}

.not-found-message a {
	margin: 0;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 *Wordpress Settings
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.alignnone {
	text-align: left;
	margin: 0 auto;
	clear: both;
	display: block;
	max-width: 100%;
	height: auto;
}

.aligncenter {
	text-align: left;
	margin: 0 auto;
	clear: both;
	display: block;
	max-width: 100%;
	height: auto;
}

.alignleft {
	text-align: left;
	margin: 0 auto;
	clear: both;
	display: block;
	max-width: 100%;
	height: auto;
}

.alignright {
	text-align: left;
	margin: 0 auto;
	clear: both;
	display: block;
	max-width: 100%;
	height: auto;
}

.wp-caption-text {
	font-size: 10px;
	margin-top: 0;
	margin-bottom: 20px;
	text-align: center;
}

#ctf.ctf_palette_dark .ctf-item, #ctf.ctf_palette_light .ctf-item {
    border-bottom: 1px solid #dddddd;
}

#ctf .ctf-author-box {
    width: 100% !important;
}

#ctf .ctf-author-box-link {
    width: 100%;
    height: 3.33vw;
    margin-bottom: 10px;
}

#ctf .ctf-author-name {
    height: 3.33vw;
    line-height: 3.33vw;
    display: inline-block !important;
    margin-top: 0;
    vertical-align: middle;
}

#ctf .ctf-author-name {
    height: 3.33vw;
    display: inline-block !important;
    margin-top: 0 !important;
    vertical-align: middle;
    white-space: nowrap; /* 横幅のMAXに達しても改行しない */
	overflow: hidden; /* ハミ出した部分を隠す */
	text-overflow: ellipsis; /* 「…」と省略 */
	-webkit-text-overflow: ellipsis; /* Safari */
	-o-text-overflow: ellipsis; /* Opera */
}

#ctf .ctf-author-box-link, #ctf_lightbox .ctf-author-box-link {
    align-items: center !important;
}

#ctf .ctf-author-name.typesquare_option {
    color: #000000 !important;
}

#ctf .ctf-tweet-date.typesquare_option {
    color: #000000 !important;
}

#ctf .ctf-author-screenname.typesquare_option {
    color: #000000 !important;
}

#ctf .ctf-tweet-text.typesquare_option {
    color: #000000 !important;
}

#ctf.ctf-carousel .ctf-out-of-tweets, #ctf.ctf-styles .ctf-author-screenname, #ctf.ctf-styles .ctf-screename-sep, #ctf.ctf-styles .ctf-tweet-meta, .ctf-carousel .ctf-owl-nav.disabled+.ctf-owl-dots {
    margin-top: 0 !important;
}

#ctf .ctf-screename-sep {
    display: none !important;
}

#ctf.ctf-narrow .ctf-tweet-content {
    margin-top: 3vw;
}

#ctf.ctf_palette_dark .ctf-tweet-text a, #ctf.ctf_palette_light .ctf-tweet-text a {
color: #6439ff !important;
}

#ctf .ctf-tweet-meta {
    height: 3.33vw;
    line-height: 3.33vw;
    display: inline-block !important;
    margin-top: 0 !important;
    vertical-align: middle;
}

#ctf .ctf-out-of-tweets {
    display: none !important;
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 *Google reCAPTCHA
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.g-recaptcha {
	margin: 40px auto 0;
	width: 300px;
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 *iframe
 * 
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.video-container {
    position: relative;
    height: 0;
    margin-bottom: 10px;
    padding-top: 30px;
    padding-bottom: 56.25%;	
}
  
.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}