@charset "utf-8";

/*==============================================================

	Reset

==============================================================*/
ol,ul {
	list-style:none;
}
h1, h2, h3, h4, h5, h6, strong {
	font-weight:normal;
}
address {
	font-style:normal;
}

/*==============================================================

	Global

==============================================================*/
:root {
	--main-color:#f26671;
	--sub-color:#f3757f;
	--bg-color:#f0f0f0;
}
*, *:before, *:after {
	-ms-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
html {
	font-size:10px;
}
body {
	position:relative;
	font-family:"Zen Maru Gothic", sans-serif;
	font-size:1.6rem;
	font-weight:500;
	font-style:normal;
	color:#333;
}
a {
	text-decoration:none;
	color:#333;
}
a:visited {
	color:#333;
}
a:hover {
	color:#333;
}
img {
	width:auto;
	max-width:100%;
	height:auto;
	vertical-align:middle;
}



/*==============================================================

	Common

==============================================================*/
.page {


}
.container {
	width:min(1200px, calc(100% - 8%));
	margin:0 auto;
}

@media screen and (max-width:1024px) {

}
@media screen and (max-width:767px) {

}
@media screen and (max-width:640px) {

}


/*==============================================================
	Effect
==============================================================*/
.fadein {
	transform:translateY(50px);
	opacity:0;
}
.fadein.show {
	animation:fadeIn 1s ease 0.1s forwards;
}

@keyframes fadeIn {
	0% {
		transform:translateY(50px);
		opacity:0;
		}
	100% {
		transform:translateY(0);
		opacity:1;
	}
}






/*==============================================================

	Header

==============================================================*/
.header {
	position:absolute;
	top:0;
	width:100%;
	height:clamp(50px, 8vw + 20px, 100px);

}



.header-container {
	display:flex;
	justify-content:space-between;
	align-items:center;
	/*height:100px;*/
	height:clamp(50px, 8vw + 20px, 100px);

}

@media screen and (max-width:767px) {
.header {
	/*position:fixed;*/
}
.header-container {
	/*background-color:#fff;*/
}
}

/*========================================
	Logo
========================================*/
.logo {
	width:min(260px, 50vw);
	width:clamp(160px, 16vw + 100px, 260px);
	padding-left:min(20px, 1vw);
	z-index:1000;
}
@media screen and (max-width:1024px) {

}

/*========================================
	 Header Nav
========================================*/
.header-nav {
	padding-right:calc(clamp(50px, 8vw + 20px, 100px) + 10px);
	z-index:1000;
}


.header-nav-group {

}
@media screen and (max-width:1024px) {
.header-nav-group {
	display:none;
}
}


/*----------------------------------------
	 Header Nav > Access
----------------------------------------*/
.header-nav-access {
	display:none;
}
.header-nav-access a {
	display:block;
}
.header-nav-access img {
	height:clamp(30px, 4.8vw + 12px, 60px);
	width:clamp(30px, 4.8vw + 12px, 60px);
}
@media screen and (max-width:767px) {
.header-nav-access {
	display:block;
}
}

/*----------------------------------------
	 Header Nav > Visitor
----------------------------------------*/
.header-nav-visitor {
	padding-right:16px;
	margin-bottom:8px;
}
.header-nav-visitor ul {
	display:flex;
	justify-content:flex-end;
	align-items:center;
	font-size:clamp(1.3rem, 0.868vw + 4.11px, 1.8rem)	;
}

.header-nav-visitor li {
	display:flex;
	align-items:center;
}

.header-nav-visitor li + li::before {
	content:"";
	width:1px;
	height:1em;
	margin:0 0.8em;
	background-color:var(--main-color);
}

.header-nav-visitor a {
	display:block;
	padding:10px 0;
	color:var(--main-color);
}


/*----------------------------------------
	 Header Nav > Main
----------------------------------------*/
.header-nav-main > ul {
	display:flex;
	justify-content:flex-end;
	font-size:clamp(1.6rem, 1.389vw + 1.78px, 2.4rem)	;
}
@media screen and (max-width:1024px) {

}
.header-nav-main dl {
	position:relative;
}

.header-nav-main dt {
	position:relative;
}

.header-nav-main dt a {
	display:block;
	padding:4px 16px 18px;
}

.header-nav-main dd {
	position:absolute;
	top:calc(100% + 12px);
	left:50%;
	z-index:10;

	width:240px;
	font-size:1.6rem;
	margin:0;
	padding:10px 0;

	background:#fff;
	border-radius:8px;
	box-shadow:0 5px 20px rgba(0, 0, 0, 0.15);

	/* 初期状態 */
	opacity:0;
	visibility:hidden;
	transform:translate(-50%, -10px);

	/* 開閉アニメーション */
	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0s linear 0.3s;
}

/* 吹き出しの三角形 */
.header-nav-main dd:first-of-type::before {
	content:"";
	position:absolute;
	top:-8px;
	left:50%;
	width:16px;
	height:16px;

	background:#fff;

	transform:translateX(-50%) rotate(45deg);
}

/* dd内のリンク */
.header-nav-main dd a {
	display:block;
	position:relative;
	padding:10px 20px;
}
.header-nav-main dd a:hover {
	background:#f5f5f5;
}


/* =========================
   ホバー時
========================= */

.header-nav-main dl:hover dd {
	opacity:1;
	visibility:visible;
	transform:translate(-50%, 0);

	transition:
		opacity 0.3s ease,
		transform 0.3s ease,
		visibility 0s linear 0s;
}


/*==============================================================

	Main

==============================================================*/
/* ========================================
   メインビジュアル
======================================== */
.mainvisual-wrap {
	position:relative;
	width:100%;
	height:100svh;
	overflow:hidden;
}


#mainvisual {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
}

.mainvisual-content {
	position:relative;
	z-index:10;
}

/* ========================================
   Catch Copy
======================================== */
.mv-copy {
	position:absolute;
	top:20%;
	left:10%;
	font-size:3.0rem;
	text-align:left;
	letter-spacing:0.2em;
	line-height:2;
	white-space:nowrap;
	text-shadow:0 0 10px rgba(255, 255, 255, 1.0);
	color:var(--main-color);
}

@media (max-width:767px) {
.mv-copy {
	top:15%;
	left:8%;
	font-size:2.0rem;
}
}


.wave-text {
  display:flex;
  gap:3px;
}

.wave-text span {
  display:inline-block;
  opacity:0;
  transform:translateY(20px);
}

/* ローディング終了後に表示 */

/* 1行目 */
.mv-copy.is-visible .wave-text1 span {
  animation:waveAppear 0.6s ease forwards;
  animation-delay:calc(var(--i) * 0.08s);
}

/* 2行目 */
/* 1行目の最後の文字まで終わった 1.16秒後から開始 */
.mv-copy.is-visible .wave-text2 span {
  animation:waveAppear 0.6s ease forwards;
  animation-delay:calc(1.16s + (var(--i) * 0.08s));
}


@keyframes waveAppear {
  0% {
	opacity:0;
	transform:translateY(20px) scale(0.8);
  }

  60% {
	opacity:1;
	transform:translateY(-8px) scale(1.1);
  }

  100% {
	opacity:1;
	transform:translateY(0) scale(1);
  }
}



/* ========================================
   Notice パネル
======================================== */
.notice-panel {
	position:absolute;
	right:min(30px, 2vw);
	bottom:clamp(40px, calc(100px - 2vw), 80px);

	width:min(22.4vw + 56px, 280px);/*140px-280px*/
	height:min(22.4vw + 56px, 280px);
	border-radius:16px;
	box-shadow:0 10px 20px rgba(0, 0, 0, 0.2);
	z-index:300;
}
.notice-panel img {
	border-radius:16px;
}
.notice-panel[hidden] {
	display:none;
}


.notice-panel-close {
	position:absolute;
	top:-10px;
	right:-10px;

	width:36px;
	height:36px;
	padding:0;

	background:#000;
	border:1px solid #fff;
	border-radius:50%;

	cursor:pointer;
	z-index:1;
}

.notice-panel-close::before,
.notice-panel-close::after {
	content:"";
	position:absolute;
	left:50%;
	top:50%;

	width:16px;
	height:2px;
	background:#fff;

	transform-origin:center;
}

.notice-panel-close::before {
	transform:translate(-50%, -50%) rotate(45deg);
}

.notice-panel-close::after {
	transform:translate(-50%, -50%) rotate(-45deg);
}

/* ========================================
   Floating パネル
======================================== */
.floating-panel {

	position:absolute;
	left:min(30px, 2vw);
	bottom:clamp(40px, calc(100px - 10vw), 80px);/*20px;*/
	z-index:300;


	width:min(220px, 30vw);
	width:clamp(110px, 17.6vw + 44px, 220px);
	height:min(220px, 30vw);
	height:clamp(155px, 24.8vw + 62px, 310px);
	filter:drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));

	animation:floating 2.5s infinite ease-in-out;
}

@keyframes floating {
	0% {
		transform:translateY(0);
	}
	45% {
		transform:translateY(-20px);
	}
	100% {
		transform:translateY(0);
	}
}



/*==============================================================

	Intro

==============================================================*/
/*========================================
	Intro Title
========================================*/
/*----------------------------------------
	 アーチ型タイトル
----------------------------------------*/
.intro-title {
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(-50%);

	/* 最大540px */
	width:clamp(300px, 38.4vw + 156px, 540px);

	/* 円の上1/4を表示 */
	height:clamp(75px, 9.6vw + 39px, 135px);
	overflow:hidden;
	z-index:10;
}


.intro-title::before {
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	aspect-ratio:1 / 1;
	border-radius:50%;
	background:#f7ccde url("/img/front/bg_dot_intro.png") repeat;
}

.intro-title-text {
	position:absolute;
	left:50%;
	bottom:clamp(21px, 3.36vw + 8.4px, 42px);
	width:max-content;
	margin:0;
	text-align:center;
	font-size:clamp(16px, 1.28vw + 11.2px, 24px);
	line-height:1.5;
	z-index:1;
	transform:translateX(-50%);
}

.intro-title-text::after {
	content:"";
	position:absolute;
	left:0;
	bottom:-24px;
	bottom:clamp(-24px, -0.96vw - 14.4px, -18px);
	width:100%;
	aspect-ratio:160 / 18;
	background:url("/img/front/intro_title_underline.svg") no-repeat;
	background-size:100% 100%;
}



/*----------------------------------------
	 イントロ 本文
----------------------------------------*/
.intro {
	width:100%;
	min-height:500px;
	background:#f7ccde url("/img/front/bg_dot_intro.png") repeat;
}
.intro-container {
	position:relative;
}

/* イントロ テキスト */
.intro-text {
	width:100%;
	text-align:center;
	line-height:2;
	letter-spacing:0.1em;
	padding-bottom:40px;
}
@media (max-width:1024px) {
.intro-text {
	padding-bottom:0;
}
}

.intro-text p:nth-child(1) {
	color:var(--main-color);
	display:inline;
	font-size:2.4rem;
	background:linear-gradient(transparent 70%, #fff 0%);
	margin-bottom:20px;
}
.intro-text p:nth-child(2) {
	font-size:2.0rem;
	margin-top:20px;
	margin-bottom:30px;
}
.intro-text p:nth-child(2) span {
	font-size:3.0rem;
	line-height:1.35;
	letter-spacing:0.05em;
}

.intro-text .br-sp {
	display:none;
}
@media screen and (max-width:1200px) {
.intro-text .br-sp {
	display:block;
}
}

/* イントロ イメージ画像 */
.intro-images {
	position:absolute;
	inset:0;
	pointer-events:none;
}

.intro-images img {
	position:absolute;
	height:auto;

}
.intro-image1,
.intro-image4 {
	border-radius:16px;
}
.intro-image2,
.intro-image3 {
	border-radius:12px;
}

/* 左上 */
.intro-image1 {
	width:240px;
	left:0;
	top:120px;
}

/* 左下 */
.intro-image2 {
	width:200px;
	left:80px;
	top:320px;
}

/* 右上 */
.intro-image3 {
	width:200px;
	right:0;
	top:120px;
}

/* 右下 */
.intro-image4 {
	width:240px;
	right:40px;
	top:280px;
}


@media (max-width:1024px) {
.intro-images {
	position:relative;
	inset:auto;
	width:100%;
	aspect-ratio:1000 / 750;
	margin-top:40px;
}

.intro-images img {
	position:absolute;
	height:auto;
}


/* 左上 420*315 */
.intro-image1 {
	width:42vw;
	left:0;
	top:0;
}

/* 右上 350*245 */
.intro-image3 {
	width:35vw;
	right:13vw;
	top:3vw;
}

/* 左下 */
.intro-image2 {
	width:35vw;
	left:13vw;
	top:33.5vw;
}

/* 右下 */
.intro-image4 {
	width:42vw;
	right:0;
	top:29.5vw;
}

}


.intro-image1.fadein.show, 
.intro-image4.fadein.show {
	animation:
		fadeIn 1s ease 0.1s forwards,
		floatingIntro 2.5s ease-in-out 0.1s infinite;
}
.intro-image2.fadein.show, 
.intro-image3.fadein.show {
	animation:
		fadeIn 1s ease 0.1s forwards,
		floatingIntro2 2.5s ease-in-out 0.1s infinite;
}

@keyframes floatingIntro {
	0% {
		transform:translateY(0);
	}
	45% {
		transform:translateY(-5px);
	}
	100% {
		transform:translateY(0);
	}
}
@keyframes floatingIntro2 {
	0% {
		transform:translateY(-5px);
	}
	45% {
		transform:translateY(0);
	}
	100% {
		transform:translateY(-5px);
	}
}


/*==============================================================

	Nav Sticky

==============================================================*/
.main {
	position:relative;
}

/*.is-fixed*/

.nav-sticky {
	position:fixed;
	top:180px;
	right:0;
	font-size:1.4rem;
	writing-mode:vertical-rl;
	text-orientation:upright;
	background-image:linear-gradient(#fcee21, #38d277);
	border-radius:16px 0 0 16px;
	padding:20px 0;
	z-index:400;
	opacity:0;
	pointer-events:none; 
	transition:opacity 0.3s;
	box-shadow:0 5px 5px rgba(0,0,0,0.1);
}
.nav-sticky.active {
	opacity:1;
	pointer-events:auto;
}
.nav-sticky > ul {
	display:flex;
}
.nav-sticky li {
	display:flex;
	align-items:center;
}

.nav-sticky li + li::before {
	content:"";
	width: 1.5em;
	height:1px;
	margin:0 0.4em;
	background-color:#fff;
}
.nav-sticky a {
	display:block;
	white-space:nowrap;
	padding:24px;
}

@media screen and (max-width:767px) {
.nav-sticky {
	top:auto;
	left:0;
	right:auto;
	bottom:0;
	font-size:1.2rem;
	writing-mode:horizontal-tb;
	background-image:linear-gradient(90deg, #fcee21, #38d277);
	border-radius:0 16px 0 0;
	padding:0;
}
.nav-sticky li + li::before {
	content:"";
	width: 1px;
	height:1.5em;
	margin:0 0.2em;
	background-color:#fff;
}
.nav-sticky a {
	display:block;
	padding:20px 8px;
}
}

/*==============================================================

	Event

==============================================================*/
.event {
	padding:40px 0 0;
}
/*========================================
	OC
========================================*/
.oc {
	position:relative;
	text-align:center;
}
.oc h2 {
	width:min(540px, 80%);
	margin:0 auto;
}

/* 次回 */
.oc-next {
	text-align:center;
	padding-bottom:40px;
}
.oc-date {
	color:var(--main-color);
	font-size:2.8rem;
	
}
.oc-date span {
	font-size:10.0rem;
	
}
.oc-trial-title {
	color:var(--main-color);
	background-image:url('/img/front/oc_trial_frame.svg');
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:contain;
	width:200px;
	height:40px;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:10px auto;
}
.oc-entry {
	display:inline-block;
	position:relative;
	margin:20px auto 10px;
	width:32%;
}
.oc-entry a {
	display:block;
	font-size:clamp(18px, 2.335vw + 0.09px, 24px);
	color:#fff;
	background-color:#ec4751;
	border-radius:999px;
	padding:16px;
	box-shadow:0 5px 10px rgba(0, 0, 0, 0.15);
	width:100%;
}
.oc-entry a:hover {
	background-color:var(--sub-color);
}
.oc-entry::after {
	content:'';
	position:absolute;
	top:-2.0rem;
	right:-3.0rem;
	display:block;
	width:7.0rem;
	height:8.0rem;
	background-image:url('/img/front/oc_entry_orn.png');
	background-repeat:no-repeat;
	background-size:contain;

}
@media screen and (max-width:1024px) {
.oc-entry {
	width:40%;
	min-width:360px;

}
}
@media screen and (max-width:767px) {
.oc-entry {
	width:50%;
	min-width:360px;
}

}
@media screen and (max-width:640px) {
.oc-entry {
	width:90%;
	min-width:auto;
}

}

/* OC イメージ画像 */
.oc-images {
	position:absolute;
	inset:0;
	pointer-events:none;
}
.oc-images img {
	position:absolute;
}
.oc-image1 {
	width:20%;
	bottom:63%;
	left:0;
	filter:drop-shadow(0 5px 5px rgba(0,0,0,0.2));
}
.oc-image2 {
	width:15%;
	bottom:45%;
	left:11%;
	filter:drop-shadow(0 5px 5px rgba(0,0,0,0.2));
}
.oc-image-trial {
	width:30%;
	bottom:-2%;
	left:0;
}
.oc-image-free {
	width:12%;
	bottom:63%;
	right:10%;
}
.oc-image-benefit {
	width:24%;
	bottom:2%;
	right:5%;
}
.oc-image3 {
	width:10%;
	bottom:40%;
	right:0;
}

@media (max-width:1024px) {
.oc-images {
	position:relative;
	inset:auto;
	width:100%;
	aspect-ratio:1000 / 500;
	margin-top:40px;
}
.oc-images img {
	position:absolute;
	height:auto;
}
.oc-image1 {
	width:30vw;
	bottom:36vw;
	left:2vw;
}
.oc-image2 {
	width:22.5vw;
	bottom:30vw;
	left:26vw;
}
.oc-image-trial {
	width:45vw;
	bottom:-2vw;
	left:5vw;
}
.oc-image-free {
	width:18vw;
	bottom:42vw;
	right:20vw;
}
.oc-image-benefit {
	width:36vw;
	bottom:2vw;
	right:5vw;
}
.oc-image3 {
	width:15vw;
	bottom:30vw;
	right:0;
}
}



.oc-image3 {
    animation:oc-move 1.8s 0.4s steps(4) infinite;
}

@keyframes oc-move {
    0% {
        transform:translate(0, 0) rotate(-5deg);
    }
    25% {
        transform:translate(0, 0) rotate(3deg);
    }

    50% {
        transform:translate(0, 0) rotate(-3deg);
    }

    75% {
        transform:translate(0, 0) rotate(5deg);
    }
    100% {
        transform:translate(0, 0) rotate(-5deg);
    }
}

/*==============================================================

	Pick up

==============================================================*/
.pickup {
	background-color:#8ad2a8;
	padding:40px 0;
	text-align:center;
}
@media screen and (max-width:767px) {
.pickup {
	padding:20px 0 30px;
}
.pickup-container {
	width:100%;
}
}
/*----------------------------------------
	Image Nav
-----------------------------------------*/
.imageNav-area {
	padding:0 40px;/*Arrow分*/
}
#imageNav {
	display:none;
	clear:both;
	position:relative;
	width:100%;
	height:350px;/*390px*/
	margin:0 auto 40px;
}
#imageNav.slick-initialized {
	display:block;
}
.slick-slide {
	max-width:600px;/*960px*/
	margin:8px;
}
.slick-dots {
	bottom:-40px !important;
}

#imageNav img {
	border-radius:8px;
}
.slick-dots li.slick-active button:before {
	color:#fff !important;
}

@media screen and (max-width:767px) {
.imageNav-area {
	padding:0;
}
#imageNav {
	width:100%;
	height:auto;
	margin:0 auto 30px;
}
.slick-dots {
	bottom:-25px !important;
}
}

/* Arrow */
.prev_icon{
  position:absolute;
  top:50%;
  left:-40px;
  transform:translate(0,-50%);
  width:30px;
  z-index:1;
}
.next_icon{
  position:absolute;
  top:50%;
  right:-40px;
  transform:translate(0,-50%);
  width:30px;
  z-index:1;
}

/*==============================================================

	News

==============================================================*/

.news {
	line-height:1.6;
	position:relative;
	--wave-h:40px;
	--wave-w:1600px;
	position:relative;
	background:url('/img/front/bg_grid_cms.png') repeat;
	padding:0 0 20px;/*calc(var(--wave-h) + 40px) 0*/
	overflow:hidden;
}


.news::before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:var(--wave-h);
	background-image:url("/img/front/bg_pickup-bottom.png");
	background-repeat:no-repeat;
	background-position:top left;
	background-size:100% 100%;
}


.news-container {
	position:relative;
	/*display:flex;*/
	/*align-items:center;*/
	display:grid;
	grid-template-columns:20% 80%;
	gap:10px 40px;
	background-color:#fff;
	padding:80px;
	border-radius:16px;
	z-index:1;
	box-shadow:0 10px 10px rgba(0,0,0,0.1);
}
@media screen and (max-width:767px) {
.news-container {
	/*flex-direction:column;*/
	display:block;
	padding:40px 20px;
}
}

.news-title {
	/*flex:0 0 20%;*/
	grid-column:1 / 2;
	grid-row:1 / 2;
	align-self:end;
	text-align:center;
}
.news-title h2 {
	align-items:center;
	color:var(--main-color);
}
.news-title h2 span {
	display:block;
}

.news-more {
	grid-column:1 / 2;
	grid-row:2 / 3;
	font-size:1.4rem;
	text-align:center;
	margin-top:2.0rem;
}

.news-body {
	/*flex:0 1 80%;*/
	grid-column:2 / 3;
	grid-row:1 / 3;
}

.news-body li + li {
	border-top:1px solid #eee;

}

@media screen and (max-width:767px) {
.news-body {
	max-width:none;
	flex:0 1 100%;
}
.news-more {
	text-align:right;
	margin-top:2.5rem
}
}


.news-article {
	text-align:left;

}



/*	CMS Common
-----------------------------------------*/
.news .cms-list {
	display:flex;
	padding:8px 0;
}
@media screen and (max-width:767px) {
.news .cms-list {
	display:block;
}
}
.news .cms-list .cms-meta {
	/*display:flex;*/
	flex-grow:0;
	flex-shrink:0;
	position:relative;
}
.news .cms-date {
	display:inline-block;
}
.news .cms-category {
	display:inline-block;
	width:6em;
	font-size:1.3rem;
	text-align:center;
	line-height:1;
	color:#fff;
	padding:6px 4px;
	border-radius:4px;
	margin:0 8px;
}
.news .cms-list .cms-title {
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis; /* Safari */
	-o-text-overflow:ellipsis; /* Opera */
	/*white-space:nowrap;*/
	

}
.news .cms-list .cms-title a:hover{
	text-decoration:underline;
}


.news .cat-event {
	background-color:#ff8b17;
}
.news .cat-exam {
	background-color:#6bafe3;
}
.news .cat-college {
	background-color:#ef5b54;
}

/*==============================================================

	Blog

==============================================================*/
.blog {
	line-height:1.6;
	text-align:center;
	padding:50px 0 80px;
	background:url('/img/front/bg_grid_cms.png') repeat;
}
.blog-container{
	position:relative;
}
.blog-title {
	position:relative;
}
.blog-title h2 {
	align-items:center;
	color:var(--main-color);
	margin-bottom:10px;
}
.blog-title h2 span {
	display:block;
}
.blog-more {
	font-size:1.4rem;
	text-align:right;
	margin-top:2.0rem;
}

.blog-article > ul {
	text-align:left;
	display:flex;
	justify-content:space-between;

}
@media screen and (max-width:1024px) {
.blog-article > ul {
	flex-wrap:wrap;
}
}
@media screen and (max-width:767px) {
.blog-article > ul {
	display:block;
}
.blog-more {
	text-align:right;
}
}

/* デフォルト（PC）は5件まで表示 */
@media (max-width: 1024px) {
.cms-list:nth-child(n + 5) {
	display: none;
}
}
/* スマホ幅では4件目以降を非表示にして3件に絞る */
@media (max-width: 767px) {
.blog .cms-list:nth-child(n + 4) {
	display: none;
}
}

/*	CMS Common
-----------------------------------------*/

.blog .cms-list {
	flex:0 1 18%;
	padding:8px 0;
}
@media screen and (max-width:1024px) {
.blog .cms-list {
	flex:0 1 48%;
}
}

.blog .cms-list dt {
	/*display:flex;*/
	flex-grow:0;
	flex-shrink:0;
	position:relative;
}



.blog .cms-tmb {
	width:100%;
	aspect-ratio:16 / 10;/*16 / 9*/
	overflow:hidden;
	border-radius:16px;
}
.blog .cms-tmb img {
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	display:block;
	transition:transform 0.6s ease;

}
.blog .cms-tmb:hover img {
	transform:scale(1.1);
}

.blog .cms-date {
	color:#666;
	display:inline-block;
}
.blog .cms-category {
	display:inline-block;
	width:6em;
	font-size:1.3rem;
	text-align:center;
	line-height:1;
	color:#666;
	padding:6px 4px;
	border:1px solid #ccc;
	border-radius:4px;
	margin:8px 0 6px;
}
.blog .cms-title {
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis; /* Safari */
	-o-text-overflow:ellipsis; /* Opera */
	/*white-space:nowrap;*/
	
}
.blog .cms-title a:hover{
	text-decoration:underline;
}



/*==============================================================

	Points

==============================================================*/
.points {
	position:relative;

	text-align:center;
	line-height:1.6;
}



.points{
  overflow:hidden;
}

.arc{
  /*width:100%;*/
  height:auto;
  padding:80px 0;
  background:#fef7fa url("/img/front/bg_dot_points.png") repeat;

   border-top-right-radius:2000px 300px;
    border-top-left-radius:2000px 300px;


   border-bottom-right-radius:2000px 300px;
    border-bottom-left-radius:2000px 300px;

    margin-left:-150px;
    margin-right:-150px;
    padding-left:150px;
    padding-right:150px;
}








.points h2 {
	display:inline-block;
	position:relative;
	font-size:4.8rem;
	color:var(--main-color);
	line-height:1.4;
	margin-bottom:10px;
}
.points h2 span {
	font-size:6.0rem;
}
.points h2::before,
.points h2::after {
	position:absolute;
	bottom:0;
	content:'';
	display:block;
	height:60px;
	width:4px;
	border-radius:2px;
	background-color:var(--main-color);
	
}
.points h2::before {
	left:-60px;
	transform:rotate(-30deg);
}
.points h2::after {
	right:-40px;
	transform:rotate(30deg);
}
.points-subcopy {
	font-size:2.4rem;
}

.points h2 .br-sp {
	display:none;
}
@media screen and (max-width:767px) {
.points h2 {
	font-size:3.2rem;
}
.points h2 span {
	font-size:4.0rem;
}
.points h2 .br-sp {
	display:block;
}
.points h2::before {
	left:-40px;
}

.points h2::after {
	right:-40px;
}
}


.point {
	display:flex;
	align-items:center;
}
.point2 {
	flex-direction:row-reverse;
}


.point-text div:first-child {
	width:60px;
	display:inline-block;
	margin-bottom:20px;
}
@media screen and (max-width:1024px) {
.point {
	display:block;
	margin-top:40px;
}
.point-text div:first-child {
	width:40px;
}
}


.point1-text {
	flex:0 1 30%;
}
.point1-image {
	flex:0 1 70%;
}
.point2-text {
	flex:0 1 30%;
}
.point2-image {
	flex:0 1 70%;
}
.point3-text {
	flex:0 1 30%;
}
.point3-image {
	flex:0 1 70%;
}



.point-text h3 {
	font-size:3.0rem;
}

.point-more a {
	display:block;
	width:80%;
	background-color:var(--main-color);
	color:#fff;
	padding:4px;
	margin:20px auto;
	border-radius:999px;
}
.point-more a:hover {
	background-color:var(--sub-color);
}
.points-more a {
	display:block;
	width:60%;
	background-color:var(--main-color);
	color:#fff;
	padding:12px;
	margin:40px auto 20px;
	border-radius:20px;
}
.points-more a:hover {
	background-color:var(--sub-color);
}

/* Orn */
.point-image {
	position:relative;
	
}

.point-image > img:first-child {
    display:block;
    width:100%;
}
.point-image > img:last-child {
    position:absolute;
    animation:star-move 1.8s steps(4) infinite;
}

.point1-image > img:last-child {
    width:8%;
    left:12%;
    top:32%;
}
.point2-image > img:last-child {
    width:8%;
    right:2%;
    top:6%;
}
.point3-image > img:last-child {
    width:8%;
    left:0;
    top:42%;
}

@keyframes star-move {
    0% {
        transform:translate(0, 0) rotate(-5deg);
    }
    25% {
        transform:translate(4px, -3px) rotate(3deg);
    }

    50% {
        transform:translate(0, -6px) rotate(-3deg);
    }

    75% {
        transform:translate(-3px, -2px) rotate(5deg);
    }
    100% {
        transform:translate(0, 0) rotate(-5deg);
    }
}

/*==============================================================

	SNS

==============================================================*/
.sns {
	text-align:center;
	padding:60px 0 40px;
}
.sns-link {
	padding-top:40px;
}
.sns-link > ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:60px;
}
.sns-link li {
	flex:0 1 60px;
}
@media screen and (max-width:767px) {
.sns-link > ul {
	gap:5%;
}
.sns-link li {
	flex:0 1 15%;
}
}

/*==============================================================

	etc.

==============================================================*/
.etc {
	position:relative;
	background-color:#fff;
	padding:40px 0;
}
.etc-container > ul {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:20px;
}
.etc-container li {
	flex:0 1 300px;
	border-radius:2px;
}

.etc-video {
	padding:2px;
}
@media screen and (max-width:767px) {
.etc-container > ul {
	gap:1%;
}
.etc-container li {
	flex:0 1 49.5%;
}
}


/*==============================================================

	FAQ

==============================================================*/


.faq {
	position:relative;
	--wave-h:40px;
	--wave-w:1600px;
	position:relative;
	background:url('/img/front/bg_grid_faq.png') repeat;
	padding:calc(var(--wave-h) + 40px) 0;
	overflow:hidden;
}


.faq::before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:var(--wave-h);
	background-image:url("/img/front/bg_wave-top.png");
	background-repeat:repeat-x;
	background-position:top left;
	background-size:var(--wave-w) 100%;
}


.faq::after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:var(--wave-h);
	background-image:url("/img/front/bg_wave-bottom.png");
	background-repeat:repeat-x;
	background-position:bottom left;
	background-size:var(--wave-w) 100%;
}


@media (max-width:1600px) {
	.faq {
		/* 40px ÷ 1600px × 100 = 2.5vw */
		--wave-h:2.5vw;
	}

	.faq::before,
	.faq::after {
		background-repeat:no-repeat;
		background-size:100% 100%;
	}
}



.faq {

	line-height:1.6;

}
.faq-container {
	display:flex;
	align-items:center;
	gap:40px;

}
@media screen and (max-width:767px) {
.faq-container {
	/*display:block;*/
	flex-direction:column;
}
}

/* タイトル */
.faq-title {
	flex:0 1 30%;
	text-align:center;
}
.faq-title h2 {
	color:#3ec2c2;
}
.faq-title h2 span {
	display:block;
}
.faq-more a {
	display:inline-block;
	background-color:#fff;
	padding:8px 16px;
	border-radius:999px;
	margin-top:10px;
	font-size:1.4rem;
}

/* 本文 */
.faq-body {
	flex:0 1 70%;
}


/* FAQ */
.faq dl {
	margin:0 0 20px;
}

.faq dt {
	position:relative;
	cursor:pointer;

	display:flex;
	align-items:center;
	gap:15px;
	padding-right:40px;
}

/* 質問 */
.faq dt > span {
	flex:0 0 60px;
}
@media screen and (max-width:767px) {
.faq dt > span {
	flex:0 0 45px;
}
}

/* 回答：Close */
.faq dd {
	margin:0;
	max-height:0;
	overflow:hidden;
	opacity:0;
	padding-left:20px;
	padding-right:20px;
	background-color:#fff;
	border-radius:16px;
	margin-top:0;
	transition:
		max-height 0.3s ease,
		opacity 0.3s ease,
		padding 0.3s ease,
		margin 0.3s ease;
}
.faq dd strong {
	display:inline;
	background:linear-gradient(transparent 70%, #fcee21 0%);
}
.faq dd a {
	text-decoration:underline;
}

/* 回答：Open */
.faq dl.is-open dd {
	max-height:1000px;
	opacity:1;
	padding-top:20px;
	padding-bottom:20px;
	margin-top:10px;
}


/* ＋マーク */
.faq dt::after {
	content:"+";
	position:absolute;
	right:10px;
	top:50%;
	transform:translateY(-50%);
	font-size:24px;
	line-height:1;
}


/* −マーク */
.faq dl.is-open dt::after {
	content:"−";
}
/*==============================================================

	Conversion

==============================================================*/
.conversion {
	position:relative;
	padding:40px 0;
}

.conversion-container {

}

.conversion ul {
	display:flex;
	flex-wrap:wrap;
	gap:20px;
	margin:0;
	padding:0;
	list-style:none;
}

.conversion li {
	box-sizing:border-box;
}

.conversion li:nth-child(1),
.conversion li:nth-child(2) {
	width:calc(50% - 10px);
}

.conversion li:nth-child(3),
.conversion li:nth-child(4),
.conversion li:nth-child(5) {
	width:calc(33.3333% - 13.3333px);
}

.conversion img {
	display:block;
	width:100%;
	height:auto;
}

/* スマホ */
@media screen and (max-width:767px) {

	.conversion-container {

	}

	.conversion ul {
		gap:15px;
	}

	.conversion li,
	.conversion li:nth-child(-n + 2),
	.conversion li:nth-child(n + 3) {
		width:100%;
	}

}



/*==============================================================

	Footer

==============================================================*/
/*========================================
	 Page Top
========================================*/
.pagetop{
	position:fixed;
	right:10px;
	bottom:0;
	width:90px;
	z-index:500;
	opacity:0;
	pointer-events:none;
	-webkit-transition:.5s;
	transition:.5s;
}
.pagetop.active {
	opacity:1;
	pointer-events:auto;
}
.pagetop > div {
	filter:drop-shadow(0 2px 4px rgba(0, 0, 0,0.2));
}
@media screen and (max-width:640px) {
.pagetop {
	width:60px;
}
}



/*==============================================================

	Global Navigation

==============================================================*/
/*========================================
	Hamburger
========================================*/
.hamburger {
	/* ↓ここが「線と線の間隔」。単独で自由に調整できます */
	--line-gap:clamp(6px, 0.96vw + 2.4px, 12px);
	--line-thickness:2px;

	position:fixed;
	top:0;
	right:0;
	z-index:1200;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:var(--line-gap);

	width:clamp(50px, 4.8vw + 32px, 80px);
	height:clamp(50px, 4.8vw + 32px, 80px);
	padding:0;
	border:0;
	border-radius:0 0 0 8px;
	background:var(--main-color);
	cursor:pointer;
}

.hamburger span:not(.sr-only) {
	display:block;
	width:clamp(21px, 3.36vw + 8.4px, 42px);
	height:var(--line-thickness);
	background:#fff;
	transition:transform 0.3s ease, opacity 0.2s ease;
}

/* Hamburger → × （位置計算不要。動かす量は --line-gap から自動計算） */
.hamburger[aria-expanded="true"] span:nth-child(1) {
	transform:translateY(calc(var(--line-gap) + var(--line-thickness))) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity:0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
	transform:translateY(calc(-1 * (var(--line-gap) + var(--line-thickness)))) rotate(-45deg);
}


body.menu-open {
	overflow:hidden;
}


/* アクセシビリティ */

.sr-only {
	position:absolute;
	width:1px;
	height:1px;

	padding:0;
	margin:-1px;

	overflow:hidden;

	clip:rect(0, 0, 0, 0);

	white-space:nowrap;

	border:0;
}




/*========================================
	Global Nav
========================================*/
/*----------------------------------------
	Global Nav 通常時
----------------------------------------*/
.global-nav {
	line-height:1.6;
	background:#fdf2f7;
}
.global-nav-inner {
	width:min(1200px, calc(100% - 8%));
	padding:100px 0 80px;


	margin:0 auto;

}
@media screen and (max-width:767px) {

/* Footer内にある場合はナビを消す */
.global-nav:not(.is-open) .global-nav-container {
	display:none;
}

.global-nav-inner {
	padding:20px 2vw 20px;
}
}


/*----------------------------------------
	Global Nav  OPEN時
----------------------------------------*/

.global-nav.is-open {
	position:fixed;
	inset:0;
	z-index:1100;

	width:100%;
	height:100dvh;

	overflow-y:auto;
	animation:menu-open 0.35s ease forwards;
}
.global-nav.is-open .global-nav-inner  {
	padding:160px 30px 80px;
}
@media screen and (max-width:767px) {
.global-nav.is-open .global-nav-inner  {
	padding:80px 20px 40px;
}
}

/*----------------------------------------
	 OPENアニメーション
----------------------------------------*/
@keyframes menu-open {
	from {
		opacity:0;
		transform:translateY(-20px);
	}
	to {
		opacity:1;
		transform:translateY(0);
	}
}


/* ========================================
   閉じるアニメーション用
======================================== */

.global-nav.is-closing {
	position:fixed;
	inset:0;
	z-index:1100;

	width:100%;
	height:100dvh;

	overflow-y:auto;

	background:#fff;

	animation:menu-close 0.35s ease forwards;
}

@keyframes menu-close {

	from {
		opacity:1;
		transform:translateY(0);
	}

	to {
		opacity:0;
		transform:translateY(-20px);
	}

}

/*========================================
	Global Nav 中身
========================================*/

.global-nav-container {
	display:flex;
	justify-content:flex-start;
	gap:80px;
	margin-bottom:40px;
}
.global-nav-column1 {
	flex:0 1 30%;
}
.global-nav-column2 {
	flex:0 1 70%;
}
@media screen and (max-width:767px) {

.global-nav-container {
	flex-direction:column-reverse;
	gap:20px;
}


}

/*----------------------------------------
	Nav Visitor
----------------------------------------*/
.nav-visitor {
	margin-bottom:40px;
}
.nav-visitor > ul {
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}
.nav-visitor li {
}
.nav-visitor a {
	display:block;
	color:var(--main-color);
	background-color:#fff;
	border:1px solid var(--main-color);
	border-radius:999px;
	padding:4px 16px;
}
/*----------------------------------------
	Nav Utility
----------------------------------------*/
.nav-utility {
	margin-bottom:20px;
}
.nav-utility li {
	margin-bottom:6px;
}
.nav-utility ul:first-child {
	font-size:1.4rem;
	margin-bottom:10px;
}
.nav-utility ul:last-child {
	font-size:1.3rem;
}

/*----------------------------------------
	Nav SNS
----------------------------------------*/
.nav-sns {
	font-size:1.3rem;
	text-align:center;
}


.nav-sns p {
  position:relative;
  display:inline-block;
  padding:4px 16px;
  border:1px solid #333;
  border-radius:8px;
  background-color:#fdf2f7;

  margin-bottom:8px;
}

.nav-sns p::before {
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  border-style:solid;
  border-width:8px 5px 0 5px;
  border-color:#333 transparent transparent;
  translate:-50% 100%;
}

.nav-sns p::after {
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  border-style:solid;
  border-width:6.1px 3.8px 0 3.8px;
  border-color:#fdf2f7 transparent transparent;
  translate:-50% 100%;
}
.nav-sns >  ul {
	display:flex;
	gap:8px;
}

/*----------------------------------------
	Nav Main / Nav Pickup
----------------------------------------*/
.global-nav-column2 {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:20px;
}

.nav-main {
	display:contents;
}

.nav-main > ul {
	display:contents;
}
.nav-main dt {
	font-size:1.8rem;
	margin-bottom:8px;
}

.nav-main dt a {
	display:block;
	color:#fff;
	background-color:var(--main-color);
	border-radius:999px;
	padding:4px 16px;

}
.nav-main dd {
	font-size:1.4rem;
	line-height:1.4;
	padding-left:20px
}
.nav-main dd li {
	margin-bottom:6px;
}

.nav-pickup li a {
	display:block;
	text-align:center;
	background-image:linear-gradient(90deg, #fcee21, #38d277);
	padding:16px;
	border-radius:20px;
	margin-bottom:10px;
}
@media screen and (max-width:1024px) {
.global-nav-column2 {
	grid-template-columns:repeat(2, 1fr);
}
}
@media screen and (max-width:767px) {
.global-nav-column2 {
	display:block;
}
.nav-main > ul > li {
	margin-bottom:20px;
}
}

/*----------------------------------------
	Address
----------------------------------------*/
.address {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}
.address-group {
	font-size:1.3rem;
	display:flex;
	align-items:center;
	gap:20px;
}
@media screen and (max-width:1024px) {
.address {
	display:block;
}
.address-group {
	display:block;
}
}

/* ロゴ */
.address-logo {
	width:clamp(160px, 16vw + 100px, 260px);
}
@media screen and (max-width:1024px) {
.address-logo {
	width:35vw;
	margin-bottom:20px;
}
}
@media screen and (max-width:767px) {
.address-logo {
	width:75vw;
}
}

/* アクセス */
.address-access {
	display:inline-block;
}
.address-access a {
	display:flex;
	align-items:center;
	color:var(--main-color);
	background-color:#fff;
	border:1px solid var(--main-color);
	border-radius:999px;
	padding:4px 16px;
	
}
.address-access a img {
	height:3.0rem;
	width:3.0rem;
	
}
@media screen and (max-width:1024px) {
.address-access {
	margin-top:20px;
}
}

/* コピーライト */
.copyright {
	font-size:1.0rem;
}
@media screen and (max-width:1024px) {
.copyright {
	margin-top:30px;
}
}



/*==============================================================

	Loading

==============================================================*/

/*========================================
	Loading
========================================*/

.loading {
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	opacity:1;
	visibility:visible;
	transition:
	opacity 0.8s ease,
	visibility 0s linear 0.8s;
}

.loading.is-hidden {
	opacity:0;
	visibility:hidden;
}

.loading_logo {
	display:block;
	width:40px;
	height:60px;
	margin:0 auto 3.0rem;
}
.loading_text {
	display:inline-block;
	font-size:12px;
	letter-spacing:0.2em;

	display:flex;
	gap:3px;
}



.loading_text span {
	display:inline-block;
	opacity:0;
	transform:translateY(20px);


	animation:waveAppearLoading 0.6s ease infinite;
	animation-delay:calc(var(--i) * 0.08s);
}






@keyframes waveAppearLoading {
	0% {
	opacity:0;
	transform:translateY(5px) scale(0.8);
	}

	60% {
	opacity:1;
	transform:translateY(-2px) scale(1.1);
	}

	100% {
	opacity:1;
	transform:translateY(0) scale(1);
	}
}