@charset "utf-8";
/* CSS Document */


/* ---------------------------------------------------------
■ ヘッダー
--------------------------------------------------------- */
header {
 width: 100%;
 height: auto;
 margin: 0 auto;
 overflow: hidden;
 position: fixed;
 z-index: 15;
}
header .hidden {
	transform: translateY(-100%);
}

.header_box{
	display:flex;
	flex-wrap:wrap;
}

.header_logo_box{
	width:13rem;
	padding:1rem 2rem .8rem;
	background-color:#fff;
	border-radius:0 0 1.5rem 0;
}
.header_logo{
	transition: transform 0.3s ease-out;
}

.header_button_area{
	display:flex;
	flex-wrap:wrap;
	gap:0 1.5rem;
	margin: 0 1rem auto auto;
}

.header_button_area a{
 position:relative;
 display:flex;flex-wrap:wrap;
 margin:.7rem 0 auto;
 padding:.6rem 2rem .6rem .6rem;
 border-radius:2em;
 filter: drop-shadow(1px 1px 3px rgba(34, 33, 5, .25));
 transition: .2s;
}
.header_button_area a::after {
 content: "";
 position: absolute;
 top: 46%;
 right: .9rem;
 width: .5rem;
 height: .5rem;
 border-bottom: #fff 2px solid;
 border-right: #fff 2px solid;
 transform: rotate(-45deg) translateY(-50%);
 transition: .2s;
}
.header_button_area a svg path{stroke-width:0px;transition: .2s;}
.header_button_area a span{display:block;}
.header_button_area a span i{font-style:normal;}
.header_button_area a span:nth-child(1){
	background-color:#fff;
	height:100%;width:auto;
	aspect-ratio:1/1;
	border-radius:50%;
	padding:.5rem;
}

.header_button_area a span:nth-child(2){
	color:#fff;
	font-size:1rem;
	font-weight:700;
	letter-spacing:0.15em;
	margin:auto 0;
	padding:0 1rem;
}

.header_button_area a:nth-child(1){background-color:#dd116e;}
.header_button_area a:nth-child(1) svg{width:1.2rem;}
.header_button_area a:nth-child(1) svg path{fill:#dd116e;}

.header_button_area a:nth-child(2){background-color:#ff981d;}
.header_button_area a:nth-child(2) svg path{fill:#ff981d;}
.header_button_area a:nth-child(2) span:nth-child(1){padding:.5rem .6rem;}
.header_button_area a:nth-child(2) svg{width:1rem;}

/*.header_after{height:3rem;}*/

@media screen and (min-width: 767px) {
	.header_button_area a:nth-child(1):hover{background-color:#fff;}
 .header_button_area a:nth-child(1):hover span:nth-child(2){color:#dd116e;}
 .header_button_area a:nth-child(1):hover span:nth-child(1){background-color:#dd116e;}
 .header_button_area a:nth-child(1):hover svg path{fill:#fff;}
 .header_button_area a:nth-child(1):hover::after{border-color:#dd116e;}
	.header_button_area a:nth-child(2):hover{background-color:#fff;}
 .header_button_area a:nth-child(2):hover span:nth-child(2){color:#ff981d;}
 .header_button_area a:nth-child(2):hover span:nth-child(1){background-color:#ff981d;}
 .header_button_area a:nth-child(2):hover svg path{fill:#fff;}
 .header_button_area a:nth-child(2):hover::after{border-color:#ff981d;}
}


/* ---------------------------------------------------------
■ TOPボタン
--------------------------------------------------------- */

#page-top {
	position: fixed;
	bottom: 1.4rem;
	right: 1.4rem;
	z-index: 100;
}
#page-top a {
	text-decoration: none;
	text-align: center;
	color: #444;
	font-size: 70%;
	font-weight: bold;
	background: rgba(237, 237, 237,.8);
	width: 3rem;
	aspect-ratio:1/1;
	border-radius: 50%;
	display: flex;
	transition: .1s;
}
#page-top a span{
	display: block;
	margin: auto;
}
@media screen and (min-width: 767px) {
	#page-top a:hover{
		opacity: .7;
	}
}



/* ---------------------------------------------------------
■ MV
--------------------------------------------------------- */

.mv_area{
 background-color:#f90680;
}

.mv_img_box{
 background-image: url("../images/mv_bk.webp");
 background-position: center;
 background-repeat: no-repeat;
 background-size:cover;
}

.mv_img{
 position:relative;
 margin: auto;
 max-width:1400px;
 line-height:0;
}
.mv_img_title{
 position:absolute;
 display:flex;
 flex-wrap: wrap;
 justify-content:center;
 gap:.35rem 2%;
 top:49%;
 left:50%;
 transform:translate(-50%,-50%);
 width:68%;
}
.mv_img_title img{margin: auto 0;}
.mv_img_title img[src*="logo"]{display:block;width:22%;}
.mv_img_title img[src*="grade"]{display:block;width:35%;}
.mv_img_title img[src*="favorite"]{
 width:100%;
 /*filter:drop-shadow(.4rem .4rem 0 rgba(51,46,42,.45));*/
}
.mv_img_title img[src*="goto"]{width:66%;}

.mv_btn_area{
 position:relative;
 margin:-5rem auto 0;
 padding:0 2rem;
}
.mv_box h1{
 margin:0 auto;
 max-width:900px;
 width:100%;
}
.mv_box h1 img{margin: auto 0;}
.mv_box h1 img[src*="casual"]{width:27%;}
.mv_box h1 img[src*="trial"]{width:72%;}

.mv_apply_btn{padding:2rem 0;}
.mv_apply_btn a{
 margin: auto;
 width:43rem;
 padding:.5rem 3rem;
 position:relative;
 background-color:#fff;
 border:.2rem #fff solid;
 display:flex;
 flex-wrap: wrap;
 gap:0 3rem;
 color:#dd116e;
 font-family: "M PLUS Rounded 1c", sans-serif;
 font-weight:900;
 font-size:2.5rem;
 filter:drop-shadow(1px 1px 5px rgba(61,16,39,.5));
 border-radius:.7rem;
 transition:.2s;
}
.mv_apply_btn a div{
 margin:auto 0;
 display:flex;
 flex-wrap: wrap;
}
.mv_apply_btn a span{
 margin:auto 0;
 display:flex;
 flex-wrap: wrap;
}
.mv_apply_btn a span i{font-style:normal;}
.mv_apply_btn a div:nth-child(1) svg {width:3rem;}
.mv_apply_btn a div:nth-child(1) svg path {fill: #dd116e;transition: .2s;}
.mv_apply_btn a div:nth-child(2){width:calc(100% - 10rem);}
.mv_apply_btn a div:nth-child(2) span:nth-child(1){line-height:1.2em;}
.mv_apply_btn a div:nth-child(2) span:nth-child(2){font-size:50%;line-height:1.2em;font-weight:700;}
.mv_apply_btn a::after {
 content: "";
 position: absolute;
 top: 46%;
 right: .9rem;
 width: 1.2rem;
 height: 1.2rem;
 border-bottom:#dd116e 4px solid;
 border-right:#dd116e 4px solid;
 transform: rotate(-45deg) translateY(-50%);
 transition: .2s;
}

@media screen and (min-width: 767px) {
 .mv_apply_btn a:hover{
  background-color:rgba(255,255,255,0);
  color:#fff;
  filter:drop-shadow(1px 1px 5px rgba(61,16,39,0));
 }
 .mv_apply_btn a:hover div:nth-child(1) svg path {fill: #fff;}
 .mv_apply_btn a:hover::after {border-color:#fff;}
}



/* ---------------------------------------------------------
■ とは
--------------------------------------------------------- */

.what_area{
 background-color:#fff3f4;
 position:relative;
}

.what_area::after{
 content:"";
 position:absolute;
 display: block;
 width:100%;
 height:auto;
 aspect-ratio:10 / 1;
 bottom:-9.8vw;
 left:50%;
 transform: translateX(-50%);
 background: url("../images/what_bottom.svg");
 background-position:center bottom;
 background-repeat: no-repeat;
 background-size: 100%;
}

.what_box{padding:4rem 2rem;}

.what_balloon{
 display:flex;flex-wrap:wrap;
 justify-content: space-between;
 margin:auto;
 max-width:1200px;
 padding:2rem 2rem 0;
 background-color:#fff;
 border-radius:1.5rem;
 filter:drop-shadow(1px 1px 5px rgba(61,16,39,.35));
}
.what_balloon_img{width:41%;padding-bottom:2rem;}
.what_balloon_text{width:57%;margin:auto 0 0;}

.what_balloon_text h2{
 text-align: left;
 font-size:3.5rem;
 font-family: keifont,"Noto Sans JP",sans-serif;
}

.what_balloon_text > p{
 text-align: left;
 font-size:1.2rem;
 font-weight:500;
}

.what_balloon_iconlist{
 display:flex;flex-wrap:wrap;gap:0 5%;
 padding-top:2rem;
}
.what_balloon_iconlist li{
 position:relative;
 width:21%;
}
.what_balloon_iconlist li img{width:88%;}
.what_balloon_iconlist li::after{
 content:"";
 display: block;
 position:absolute;
 width:0;
 height:100%;
 top:0;
 right:-14%;
 border-right:2px #F2D4D7 dotted;
}
.what_balloon_iconlist li:last-child::after{
 content:none;
}

.what_balloon_iconlist li p{
 padding-top:.3rem;
 font-weight:600;
 font-family:"M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}

.what_balloon_link{
 display: flex;
 flex-wrap: wrap;
 gap:3%;
 padding: 1.7rem 0 0;
}
.what_balloon_link img[src*="what_img"]{
 width:24%;
 margin: auto 0 0;
}

.what_balloon_link a{
 position:relative;
 margin: auto 0;
 display:flex;
 flex-wrap: wrap;
 gap:.4rem;
 width:fit-content;
 background-color:#dd116e;
 font-size:1.9rem;
 color:#fff;
 font-weight:600;
 font-family:"M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 border-radius: 4rem;
 padding:1rem 5rem .4rem 3rem;
 filter:drop-shadow(1px 1px 5px rgba(61,16,39,.35));
 transition: .2s;
}

.what_balloon_link a::before{
 content:"";
 position: absolute;
 display: block;
 top:-.8rem;
 left:1rem;
 width:7rem;
 height:auto;
 aspect-ratio:43 / 11;
 background-image: url("../images/what_detail.webp");
 background-position: bottom center;
 background-repeat: no-repeat;
 background-size: 100%;
 transition: .2s;
}
.what_balloon_link a::after {
 content: "";
 position: absolute;
 top: 46%;
 right: 2rem;
 width: .8rem;
 height: .8rem;
 border-bottom: #fff 3px solid;
 border-right: #fff 3px solid;
 transform: rotate(-45deg) translateY(-50%);
 transition: .2s;
}

.what_balloon_link a img[src*="logo"]{width:9rem;margin: auto 0;}
.what_balloon_link a span{margin: auto 0;display:flex;flex-wrap: wrap;}
.what_balloon_link a span:nth-child(3){font-size:85%;}

@media screen and (min-width: 767px) {
 .what_balloon_link a:hover{filter:drop-shadow(1px 1px 5px rgba(61,16,39,0));}
 .what_balloon_link a:hover::after {right: 1.2rem;}
}


/* ---------------------------------------------------------
■ 心配事
--------------------------------------------------------- */

.worry_box{
 padding:8rem 2rem 4rem;
}

.worry_title h2{
 font-size: 3.5rem;
 font-family: keifont, "Noto Sans JP", sans-serif;
}

.worry_img{
 position:relative;
 margin: auto;
 max-width:1000px;
 padding:2rem 0 0;
}

.worry_arrow{
 padding:2rem 0;
}
.worry_arrow svg{
 width:3rem;
 fill:none;
 stroke:#dd116e;
 stroke-linecap:round;
 stroke-linejoin:round;
 stroke-width:10px;
}

.worry_text{
 font-family: keifont,"Noto Sans JP",sans-serif;
 font-size:2.5rem;
 letter-spacing: .05em;
 text-align: center;
}
.worry_text span{display: flex;flex-wrap:wrap;justify-content:center;}
.worry_text img[src*="logo"]{max-width: 20rem;}
.worry_text i{display: block;}
.worry_text i.adj_move{margin: auto 0 -.2em;font-style:normal;}
.worry_text i.adj_letter{letter-spacing: -.3em;font-style:normal;}


.worry_list-sp{
 display: none;
}

/* ---------------------------------------------------------
■ POINT
--------------------------------------------------------- */

.point_area{background-color:#f9f3e7;}
.point_box{padding:5rem 2rem;}

.point_title [src*="circle"]{
 max-width: 22rem;
 margin-bottom: -2.1rem;
}

.point_title h2{
 position: relative;
 margin: auto 0;
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 font-size:4rem;
 color:#d11e6f;
 font-family: keifont, "Noto Sans JP", sans-serif;
}

.point_title h2 span{display: block;line-height:1.1em;}
.point_title h2 span:nth-child(1){font-size:150%;}
.point_title h2 span:nth-child(2){margin:auto 0 .15em;}
.point_title h2 span:nth-child(3){font-size:120%;width:100%;}

.point_list_box{
 margin:0 auto;
 max-width:1200px;
 padding:3rem 0;
}

.point_list{
 display:flex;
 flex-wrap:wrap;
 gap:3rem 0;
}

.point_item{
 width:100%;
 display:flex;
 flex-wrap:wrap;
 justify-content: space-between;
}
.point_item.rtl{
 flex-direction:row-reverse;
}

.point_img{width:25%;margin:auto 0;}
.point_img img[src*="txt"]{margin-bottom:-4rem;}
.point_img img[src*="circle"]{border-radius:50%;width:84%;}

.point_text{
 margin: auto 0;
 width:73.5%;
 background-color:#fff;
 border-radius:1.8rem;
 padding:0 2.5rem 2rem;
}

.point_text_title-sp{display:none;}
@media screen and (min-width:581px){.point_text_box-sp{display:contents;}}

.point_text h3{
 display: flex;
 flex-wrap: wrap;
 gap:0 1rem;
 padding-bottom: .8rem;
}
.point_text h3 span{
 display:block;
 margin:auto 0;
}
.point_text h3 span:nth-child(1){
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-content: center;
 width:4.3rem;
 height:auto;
 aspect-ratio: 39 / 47;
 background-image: url("../images/flag.svg");
 background-size: 100%;
 background-position: bottom center;
 background-repeat: no-repeat;
 color:#fff;
 font-size:1.1rem;
 line-height:1.2em;
 font-weight:900;
 font-family:"M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 padding-bottom:.2rem;
}
.point_text h3 span:nth-child(2){
 text-align:left;
 padding-top: .1em;
 font-size:2.3rem;
 line-height:1em;
 font-weight:900;
 font-family:"M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}
.point_text p{
 padding:0 .5rem;
 text-align:left;
 font-size: 1.1rem;
 line-height:1.8em;
 letter-spacing:0.04em;
}
.point_text p span{
 font-weight:600;
 background: linear-gradient(to bottom,rgba(255,255,255,0) 50%,#FFFB99 50%,#FFFB99 88%,rgba(255,255,255,0) 88%);
}
.point_text ul{
 padding:1rem .5rem 0;
 text-align:left;
 font-size: 1rem;
 line-height:1.8em;
 letter-spacing:0.04em;
}
.point_text ul ol{display:flex;flex-wrap:wrap;padding-bottom:.4rem;}
.point_text ul ol span{display:block;}
.point_text ul ol span:nth-child(1){
 background-color:#F05F70;
 color:#fff;
 font-weight:800;
 font-family:"M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 padding:0 .3em;
 border-radius:.6rem;
}
.point_text ul ol span:nth-child(2){
 margin: auto 0;
 font-size:120%;
 line-height:1em;
 font-weight:800;
 letter-spacing:-.05em;
 font-family:"M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}
.point_text ul ol span:nth-child(3){
 width:100%;
 padding-left: 2.6rem;
}



/* ---------------------------------------------------------
■ 無料体験 ボタン
--------------------------------------------------------- */

.main_apply_box{
 padding:4rem 2rem 6rem;
}

.main_apply_title{
 padding:2rem 2rem 0;
 font-weight:800;
 font-family:"M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}
.main_apply_title01{font-size:2rem;letter-spacing:.04em;line-height:1.3em;}
.main_apply_title01 span{font-size:130%;color:#f06070;}

.main_apply_title02{
 margin: 0 auto;
 width:fit-content;
 padding:0 1.5em;
 position:relative;
 font-size:1.3rem;letter-spacing:.05em;
}
.main_apply_title02::before,.main_apply_title02::after{
 content: "";
 position: absolute;
 bottom: 0;
 height: 80%;
}
.main_apply_title02::before{
 left: 0px;
 width: 10px;
 border-left: 4px solid #332e2a;
 transform: skewX(26deg);
}
.main_apply_title02::after{
 right: 0px;
 width: 10px;
 border-right: 4px solid #332e2a;
 transform: skewX(-26deg);
}

.main_apply{
 padding:2.5rem 4rem;
}

.main_apply a{
 position:relative;
 margin: 0 auto;
 max-width:900px;
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 font-size:2rem;
 font-weight:800;
 letter-spacing:-.1em;
 font-family:"M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 background-color:#f8e32f;
 border-radius:5rem;
 padding:.8rem .7rem .8rem 4.3rem;
 filter:drop-shadow(1px 1px 5px rgba(61,16,39,.35));
 transition:.2s;
}
.main_apply a div{
 margin: auto 0;
 display:flex;
 flex-wrap:wrap;
 align-items: flex-end;
}
.main_apply a > div{
 font-size:130%;
}
.main_apply a div span{
 font-size:130%;
 font-weight:700;
 letter-spacing:.04em;
 padding-left: .04em;
 margin-bottom:-.15rem;
}
.main_apply a img[src*="apply_free"]{
 position:absolute;
 width:10rem;
 left:-3rem;
 top:50%;
 transform: translateY(-50%);
 animation: fuwafuwa 2s ease-in-out infinite;
}
.main_apply a::after {
 content: "";
 position: absolute;
 top: 46%;
 right: 2rem;
 width: 1.4rem;
 height: 1.4rem;
 border-bottom:#332e2a .25rem solid;
 border-right:#332e2a .25rem solid;
 transform: rotate(-45deg) translateY(-50%);
 transition: .2s;
}

@keyframes fuwafuwa {
  0%,
  100% {transform: translateY(-52%);}
  50% {transform: translateY(-47%);}
}

@media screen and (min-width: 767px) {
 .main_apply a:hover{filter:drop-shadow(1px 1px 5px rgba(61,16,39,0));}
 .main_apply a:hover img{animation:none;}
 .main_apply a:hover::after{right: 1.2rem;}
}


/* ---------------------------------------------------------
■ なにするの？
--------------------------------------------------------- */
.activity_area{
 background-color: #ffebeb;
}
.activity_box{
 padding:4rem 2rem;
}

.activity_balloon{
 margin: 0 auto;
 max-width:1200px;
 display:flex;
 flex-wrap:wrap;
 justify-content: space-between;
 background-color:#fff;
 padding:2rem;
 border-radius:3rem;
}

.activity_balloon_img{width:53%;}
.activity_balloon_text{width:44%;}

.activity_balloon_text h2{
 text-align:left;
 font-family: keifont, "Noto Sans JP", sans-serif;
 font-size:2.6rem;
 line-height:1.2em;
 letter-spacing: .05em;
}
.activity_h2sub{
 text-align:left;
 font-size:1.1rem;
 font-weight: 600;
 font-family:"M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}

.activity_list{
 display:flex;flex-wrap:wrap;gap:1rem;
 padding:1rem 0;
}
.activity_list li{
 display:flex;flex-wrap:wrap;
 justify-content: space-between;
 width:100%;
 background-color:#fff;
 border-radius:1.4rem;
 padding:1rem;
 filter:drop-shadow(1px 1px 5px rgba(61,16,39,.35));
}
.activity_list li div{
 width:16%;
}
.activity_list li p{
 text-align:left;
 width:80%;
 
}

.activity_attention{
 text-align:left;
 background-color:#ffebeb;
 color:#e52c47;
 font-weight: 700;
 font-family:"M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 letter-spacing: .05em;
 padding:.2rem 1rem;
 border-radius:.5rem;
}


/* ---------------------------------------------------------
■ 体験者の声
--------------------------------------------------------- */

.voice_box{
 padding:5rem 0;
}

.voice_area{background-color:#f9f3e7;}

.voice_title h2{
 font-family: keifont, "Noto Sans JP", sans-serif;
 font-size: 2.5rem;
 letter-spacing: .05em;
}


/* ==============================
  スライダー全体
============================== */

.voice-slider {
 position: relative;
 width: 100%;
 margin: auto;
 max-width:1300px;
}

/* ==============================
  スライドの見切れを制御する外枠
============================== */

.voice-slider__stage {
 width: 100%;
 padding:3rem 0 2rem;
 overflow: hidden;
}


/* JSの初期処理が終わるまで非表示 */

.voice-slider:not(.is-ready) .voice-slider__track {
  visibility: hidden;
}


/* ==============================
  スライドの基準となる表示領域
============================== */

.voice-slider__viewport {
  /*
    左右に見せるカードの量。

    例：
    --peek: 50px;
    → 左右それぞれ約50pxずつ、
      前後のカードが見える
  */

  --peek: 50px;

  width: calc(100% - var(--peek) - var(--peek));
  margin-inline: auto;

  /*
    viewport自体からはカードをはみ出させ、
    外側のstageで切り取る
  */

  overflow: visible;
 
 /*
    縦スクロールは通常どおり許可し、
    横方向はスライダー操作に使う
  */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}


/* ==============================
  スライドを並べる部分
============================== */

.voice-slider__track {
  display: flex;
  align-items: stretch;

  transition-property: transform;
  will-change: transform;
 
  cursor: grab;
}

.voice-slider.is-dragging .voice-slider__track {
  transition: none !important;
  cursor: grabbing;
}


/* ==============================
  PC：3枚表示
============================== */

.voice-slider__item {
  flex: 0 0 33.333333%;
  min-width: 0;
  box-sizing: border-box;
}


/*
  アイテム自体にmarginを付けると
  JSの位置計算がずれるので、
  カード側に余白を付ける
*/

/* ==============================
  カードデザイン
============================== */

.voice-card {
 padding:1.5rem 2.3rem;
 height: 100%;
 margin-inline: 1rem;
 background-color:#fff;
 filter: drop-shadow(0 0 5px rgba(0,0,0,.35));
 border-radius:.5rem;
}

.voice-card img{width:78px;}

.voice-card__title{
 padding:.7rem 0 0;
 font-weight: 700;
 font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 letter-spacing: .05em;
 color:#dd116e;
}

.voice-card__text{text-align:left;}



/* ==============================
  前へ・次へボタン
============================== */

.voice-slider__arrow {
 position: absolute;
 top: 50%;
 z-index: 10;
 transform: translateY(-50%);
 border:none;
 background-color:rgba(255,255,255,0);
 cursor: pointer;
 width:3rem;
}

.voice-slider__arrow--prev {
 left:2rem;
 transform: translateY(-50%) scale(-1,1);
}

.voice-slider__arrow--next {
  right: 2rem;
}


/* ==============================
  下部ドット
============================== */

.voice-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.voice-slider__dot {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
 background-color:rgba(0,0,0,.2);
}


/* 選択中のドット */

.voice-slider__dot.is-active {
 background-color:#F05F70;
}


/* ==============================
  選択中のスライド
============================== */

.voice-slider__item.is-active {
  position: relative;
}







.voice_episode{
 display:flex;
 flex-wrap: wrap;
 justify-content: center;
 gap:1.4rem;
 padding-top:4rem;
}

.voice_episode_img{width:16rem;}
.voice_episode_text{
 margin: auto 0;
 font-size: 3rem;
}
.voice_episode_text p{
 padding-bottom:1rem;
}
.voice_episode_text p span{
 text-align: left;
 display:block;
 font-family: keifont, "Noto Sans JP", sans-serif;
 letter-spacing: .05em;
 line-height:1.2em;
}
.voice_episode_text p span:nth-child(1){font-size:70%;}

.voice_episode_text a{
 position:relative;
 display: block;
 font-size:60%;
 background-color: #dd116e;
 color:#fff;
 font-weight: 700;
 font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 border-radius: 4rem;
 border:2px solid #dd116e;
 filter: drop-shadow(1px 1px 3px rgba(34, 33, 5, .25));
 transition: .2s;
}
.voice_episode_text a::after {
 content: "";
 position: absolute;
 top: 46%;
 right: .9rem;
 width: .6rem;
 height: .6rem;
 border-bottom: #fff 2px solid;
 border-right: #fff 2px solid;
 transform: rotate(-45deg) translateY(-50%);
 transition: .2s;
}

@media screen and (min-width: 768px) {
 .voice_episode_text a:hover{
  background-color: rgba(255,255,255,0);
  color:#dd116e;
  filter: drop-shadow(1px 1px 3px rgba(34,33,5,0));
 }
 .voice_episode_text a:hover::after{border-color:#dd116e;}
}


/* ---------------------------------------------------------
■ 体験会の流れ
--------------------------------------------------------- */

.flow_box{
 padding:6rem 2rem 4rem;
}

.flow_title h2{
 font-family: keifont, "Noto Sans JP", sans-serif;
 font-size: 2.8rem;
 letter-spacing: .05em;
}

.flow_list_area{
 margin: 0 auto;
 max-width: 1300px;
 padding:3rem 0 0;
}

.flow_list{
 display: flex;
 flex-wrap: wrap;
 gap:3rem;
}

.flow_list li{
 position:relative;
 width:calc((100% - (3rem * 3))/4);
}
.flow_num{
 position:absolute;
 top:-.5rem;
 left: -.5rem;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-content: center;
 width: 3rem;
 height: auto;
 aspect-ratio: 39 / 47;
 background-image: url(../images/flag.svg);
 background-size: 100%;
 background-position: bottom center;
 background-repeat: no-repeat;
 color: #fff;
 font-size: .8rem;
 line-height: 1.2em;
 font-weight: 900;
 font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 padding-bottom: .2rem;
 filter:drop-shadow(0 0 2px rgba(61,16,39,.45));
}

.flow_list li img{
 border-radius:.6rem;
}
.flow_list li p{
 text-align:justify;
 padding:.7rem .3rem 0;
 font-size:.9rem;
}
.flow_list li p a{
 text-decoration: underline;
}

.flow_list li::after{
 content:"";
 position:absolute;
 top:0;
 right:-2rem;
 display:block;
 height:70%;
 width:1rem;
 background-image: url("../images/arrow.svg");
 background-size: 100%;
 background-position:center;
 background-repeat: no-repeat;
}
.flow_list li:last-child::after{content:none;}


/* ---------------------------------------------------------
■ 開講校舎
--------------------------------------------------------- */

.school_box{
 padding:5rem 2rem;
}

.school_title h2{
 font-family: keifont, "Noto Sans JP", sans-serif;
 font-size: 2.5rem;
 letter-spacing: .05em;
}

.school_program{
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 gap:1.5rem;
 padding:2rem 0;
}

.school_program_item{
 position:relative;
 display:flex;
 flex-wrap:wrap;
 gap:1rem;
 padding:1.5rem 1.4rem 1rem;
 border-radius:1rem;
}

.school_program_chip{
 position:absolute;
 top:-1rem;
 left:2rem;
 border-radius: 4rem;
 font-weight:700;
 font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 padding:0 1.3rem;
}

.school_program_img{
 width:5rem;
}
.school_program_text{
 width:calc(100% - 5rem - 1rem);
}

.school_program_text h3{
 text-align:left;
 font-weight:700;
 font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 font-size: 2rem;
 line-height:1.2em;
 letter-spacing:.07em;
}

.school_program_text p{
 text-align:left;
 font-weight:500;
 font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
}


.school_program_item.trial{background-color:#fdf7fa;border:#f06070 3px solid;}
.school_program_item.trial .school_program_chip{background-color:#f06070;color:#fff;}
.school_program_item.trial .school_program_text h3{font-size:2.4rem;letter-spacing:.04em;}
.school_program_item.orien{border:#d3cfcf 3px solid;}
.school_program_item.orien .school_program_chip{background-color:#fdd365;}


.school_list_area{
 padding:5rem 0 0;
}

.school_list_title{
 margin: auto;
 max-width:1000px;
}
.school_list_title h3{
 position:relative;
 text-align:left;
 font-weight:700;
 font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 font-size: 2rem;
 line-height:1.2em;
 letter-spacing:.07em;
 padding:0 0 0 4.3rem;
}

.school_list_title h3::before{
 content:"";
 display:block;
 position:absolute;
 bottom: 0;
 left: 1.4rem;
 background-image:url("../images/school_venue.svg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: 100%;
 aspect-ratio:50 / 67;
 width:2.3rem;
}

.school_list_h3sub{
 display:flex;
 flex-wrap: wrap;
 text-align:left;
 font-weight:500;
 font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
 font-size: 1rem;
 padding:.25rem 0 0 4.3rem;
}
.school_list_h3sub span{
 display:block;
}

.school_list_h3sub span.item{
 margin: 0 .4rem 0 0;
 background-color: #f06070;
 color:#fff;
 width:auto;
 padding:0 1rem;
 border-radius: 2rem;
}


.school_list_main{
 margin:auto;
 max-width:1000px;
 display:flex;
 flex-wrap: wrap;
 gap:3rem;
 padding:1.5rem 0;
}

.school_list_item{
 width:100%;
 border:#faeaf2 2px solid;
 border-radius: 1.5rem;
}

.school_list_item h4{
 text-align:left;
 position:relative;
 background-color:#fdf6f9;
 color:#f06070;
 font-family: keifont, "Noto Sans JP", sans-serif;
 font-size:1.8rem;
 letter-spacing: .05em;
 padding:1rem 1rem 1rem 4.3rem;
 border-radius:1.4rem 1.4rem 0 0;
}
.school_list_item h4::before{
 content:"";
 display:block;
 position:absolute;
 bottom: 0.75em;
 left: 1.4rem;
 background-image:url("../images/school_venue.svg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: 100%;
 aspect-ratio:50 / 67;
 width:1.8rem;
}

.school_list_item ul{
 display:flex;
 flex-wrap:wrap;
 text-align:left;
 padding:1rem 2rem;
}
.area-list li{
 width:100%;
 position:relative;
 flex: 0 0 auto;
 padding:1rem 3rem 1rem 1.3rem;
 border-bottom: 2px solid #eee;
}
.area-list li:last-child{
 border-bottom:none;
}

.school_list_item li a{
 position: relative;
 display: inline-block;
 color:#103973;
 text-decoration: underline;
 transition:.1s;
}

.school_list_item li a::after {
    content: "";
    position: absolute;
    top:50%;
    right: -2rem;
    width: .5rem;
    height: .5rem;
    border-bottom:#103973 2px solid;
    border-right:#103973 2px solid;
    transform: rotate(-45deg) translateY(-50%);
    transition: .2s;
}

@media screen and (min-width:768px) {
 .school_list_item li a:hover{color:#f39a00;}
 .school_list_item li a:hover::after {border-color:#f39a00;}
}


/* ---------------------------------------------------------
■ よくある質問
--------------------------------------------------------- */

.faq_box{padding:3rem 2rem;}

.faq_title h2{
 font-family: keifont, "Noto Sans JP", sans-serif;
 font-size: 2.5rem;
 letter-spacing: .05em;
}

.faq_list_area{
 padding:3rem 0 0;
}

.faq_list{
 margin:0 auto;
 max-width:1100px;
 display:flex;
 flex-wrap:wrap;
 gap:1.4rem;
}

.faq_list li{
 width:100%;
}

.faq_list .tgl_title{
 position:relative;
 text-align: left;
 background: #f06070;
 color: #fff;
 letter-spacing:.07em;
 font-size: 1.3rem;
 padding: 1rem 1.7rem;
 font-weight: 700;
}

.faq_list .alf{
 margin: 0 .4rem 0 0;
 font-size: 2rem;
 font-family: "nikumaru", sans-serif;
 line-height: 1;
}
.faq_list .tgl_title .alf + span {}

.faq_list .tgl_title::before,
.faq_list .tgl_title::after {
 display: block;
 content: "";
 position: absolute;
 top: 48%;
 right: 1.6rem;
 margin: auto;
 width: 1.5rem;
 height: 3px;
 background-color: #fff;
}
.faq_list .tgl_title::after{
 transform: rotate(-90deg);
 transition: .2s;
}

.faq_list .tgl_box{
 text-align:left;
 padding: 1rem 1.7rem;
 border-bottom: 4px solid #f06070;
 border-right: 4px solid #f06070;
 border-left: 4px solid #f06070;
}
.faq_list .tgl_box > div{
 display: flex;
}
.faq_list .tgl_box .alf{
 color: #f06070;
 margin: 0 .8rem auto 0;
}

.faq_list .tgl_box .alf + span {
 display: inline-block;
 padding: .4rem 0 0;
 font-size:1rem;
 letter-spacing:.06em;
 line-height: 1.7em;
}

.faq_list .tgl_title.tglopen::after{
 transform: rotate(0deg);
}

.faq_link{
 margin:0 auto;
 max-width:1100px;
 text-align: right;
 padding: 1rem 2rem;
}

.faq_link a{
 display:inline-block;
 position:relative;
 font-size:1.25rem;
 font-family: "keifont", sans-serif;
 transition: .2s;
}

.faq_link a::after {
 content: "";
 position: absolute;
 top: 50%;
 right: -1.5rem;
 width: .5rem;
 height: .5rem;
 border-bottom:#332e2a 2px solid;
 border-right:#332e2a 2px solid;
 transform: rotate(-45deg) translateY(-50%);
 transition: .2s;
}

@media screen and (min-width:768px) {
 .faq_link a:hover{color:#f06070;}
 .faq_link a:hover::after{border-color:#f06070;}
}



/* ---------------------------------------------------------
■ フッターバナーエリア
--------------------------------------------------------- */

.bottom_banner_box{
 margin: auto;
 max-width:900px;
 padding:2rem 2rem 6rem;
}

.bottom_banner_title{
 margin: auto;
 max-width:520px;
 padding-bottom: 2rem;
}

.bottom_banner_list{
 display:flex;
 flex-wrap: wrap;
 gap:1.5rem;
}
.bottom_banner_list a{
 width:calc((100% - 1.5rem)/ 2);
 filter: drop-shadow(1px 1px 3px rgba(34,33,5,.35));
 transition:.2s;
}
.bottom_banner_list a img{border-radius:.4rem;transition:.2s;}
.bottom_banner_list a.full{width:100%;}

@media screen and (min-width:768px) {
 .bottom_banner_list a:hover{filter: drop-shadow(1px 1px 3px rgba(34,33,5,0));}
 .bottom_banner_list a:hover img{border-radius:0;}
}



/* ---------------------------------------------------------
■ フッター
--------------------------------------------------------- */
footer {
	width: 100%;
	text-align: center;
  	background-color:#1d478e;
	color:#fff;
	padding:3.8rem 0;
}
footer a{
	color:#fff;
}
footer .logo{
	width:50%;
	max-width: 18rem;
}