@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*************ローディングアニメーション-START******************************/
/* 初期状態 */
#loader_wrap.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  transition: transform 1s ease;
  z-index: 9999;
  transform: translateY(0);
  background-image: -webkit-radial-gradient(27% 185%, #F9F6F1 0%, #D7D0C5 100%);
  background-image: radial-gradient(27% 185%, #F9F6F1 0%, #D7D0C5 100%); 
}

/* loaderが消えるときにフェードアウト */
.loader.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* loader_wrapが非表示時に上にスライド */
#loader_wrap.loading.is-hide {
  transform: translateY(-100%);
  pointer-events: none;
}

/* メッセージ */
.loader h1 {
  font-size: 5vw; /* 画面幅に応じた文字サイズ */
  white-space: nowrap;
  margin: 0; 
  padding: 0; 
  text-align: center;
}

/* ロゴ */
.loader-logo {
	display: none; /* 初期表示はしない */
	text-align: center;
  max-width: 700px;
}

.responsive-logo {
    width: 50vw;
    height: auto;
    max-width: 100%;
    max-height: 50vh;
}

#logo {
  stroke: var(--skin-grayish-site-name-txt);
  stroke-width: 0.3;
  stroke-linecap: round;
}

.logo-animated {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  fill: transparent;
  animation: line-animation 17s linear forwards, fill-animation 0.5s linear forwards 1.2s;
}
@keyframes line-animation {
  0%   { stroke-dashoffset: 1000; }
  25%  { stroke-dashoffset: 0; }
  50%  { stroke-dashoffset: 0; }
  75%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
/* 塗りつぶし */
@keyframes fill-animation {
  0% { fill: transparent; }
  100% { fill: var(--skin-grayish-site-name-txt); }
}
/*************ローディングアニメーション-END******************************/

/* カバーブロック用：インナーブロックの中央寄せを追加 */
.cstm-blk-fullwide-inner {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
}

body {
  overflow-x: clip;
}
/*コピーガード*/
.entry-content {
  user-select:none;
  -moz-user-select:none;
  -webkit-user-select:none;
  -ms-user-select: none;
  -khtml-user-select:none;
}
img {
	pointer-events: none;
}
/*コピーガード解除*/
.copyok {
  user-select:all !important;
  -moz-user-select:all !important;
  -webkit-user-select:all !important;
  -khtml-user-select:all !important;
}

/*スマホの時だけ改行*/
.br-sp {
    display: none;
}

/* entry-content end 記事の終了の線 */
.skin-grayish .content .main .entry-content {
    border-bottom: solid 0px var(--skin-grayish-site-main-hover);
}

/* テキストベースカラー上書き */
:where(.wp-block-cover-image.is-light:not(.has-text-color)), :where(.wp-block-cover.is-light:not(.has-text-color)) {
    color: var(--skin-grayish-site-name-txt);
}
/* ボタンの上限幅上書き */
.btn-layout {
    max-width: 600px!important;
}

/* パンクズリストを非表示 */
.breadcrumb {
    display:none;
}

/* 横幅クラス */
.wid-45px {
  width: 45px;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*スマホの時だけ改行*/
  .br-sp {
        display: block;
  }	
}

/*480px以下*/
@media screen and (max-width: 480px){
}


/************************************************************************************************************
** 追加ーSTART
************************************************************************************************************/

/*=================================
アコーディオンメニューjquery化 - START*
====================================================*/
.js-ac {
    color: #2f3b48;
    font-size: 17px;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
    background: #fff;
    padding: 10px;
    cursor: pointer;
    position: relative;
    display: block;
    padding: 17px;
    margin: 0!important;
}

.js-ac:after {
  position: absolute;
  left: 20px;
  /* 左からの距離 */
  top: 50%;
  /* 上下中央配置 */
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: "＋";
}

.ac-menu-inside{
    display: none;
    color: #333;
    font-size: 17px;
    line-height: 2;
    background: #FAFAFA;
    padding: 25px 0 10px;

}

.ac-menu-box {
    background: #fff;
    box-shadow: 0 3px 15px rgba(0, 0, 0, .15), 0 0 2px rgba(0, 0, 0, .05);
    margin: 0 0 20px;
    border-radius: 0px;
}

.ac-menus {
  background: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .15), 0 0 2px rgba(0, 0, 0, .05);
  margin: 0 0 20px;
  border-radius: 10px;
  padding: 20px;
  border: 0.1px #ccc solid;
}

/*=================================
アコーディオンメニューjquery化 - END*
====================================================*/



/*==================================================
要素をふわっと登場させる-START
===================================*/

/*=======スクロール=======*/

/* 下スクロールで要素を大きく */
.scrollDownBig{
animation-name:scrollDownBigAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes scrollDownBigAnime{
  from {
    opacity: 0;
    transform:scale(0.8);
  }

  to {
    opacity: 1;
    transform:scale(1);
  }
}

/*=======ふわっ=======*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

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

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

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

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.scrollDownBig,
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*=======パタッ=======*/

/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}


/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
	animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
	animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
	animation-delay: 0.5s;
}

.delay-time1{  
	animation-delay: 1s;
}

.delay-time15{  
	animation-delay: 1.5s;
}

.delay-time2{  
	animation-delay: 2s;
}

.delay-time25{  
	animation-delay: 2.5s;
}
/*=================================
要素をふわっと登場させる-END
====================================================*/

/* 下線 */
.simple-underline {
  border-bottom: solid 1px;
  padding-bottom: 5px;
}


/*==================================================
他固定ページ-START
===================================*/
/*********************************************************/
/*************** home************************************/
/*********************************************************/

/* home-背景色（グレー）*/
.silverSurfer {
  background: #A2A2A2;
  background-image: -webkit-radial-gradient(at 50% 90%, #B8B4B3 0%, #3B3A38 100%);
  background-image: radial-gradient(at 50% 90%, #B8B4B3 0%, #3B3A38 100%);
  background-blend-mode: normal,multiply; }

/* home-背景色（金）*/
.backflash {
  background-image: -webkit-linear-gradient(top, #E9E9E7 2%, #EFEEEC 27%, #EEEEEC 58%, #D5D4D0 94%);
  background-image: linear-gradient(180deg, #E9E9E7 2%, #EFEEEC 27%, #EEEEEC 58%, #D5D4D0 94%); }

/* home-背景固定（iOS対応）*/
.background-fix {
  /*content:"";*/
  /*display:block;*/
  /*position:fixed;*/
/*  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;*/
  /*background:url() center no-repeat;*/
  /*background-size:cover;*/
}

/* home-目次（数字付き）*/
.heading11 {
	position: relative;
	font-size: 20px;
	text-align: center;
}

.heading11::before {
	content: attr(data-number);
	display: block;
	margin-bottom: 30px;
	color: #7accbe;
	font-size: 30px;
}

.heading11::after {
	content: '';
	position: absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 20px;
	background-color: #7accbe;
}

/* home-こんな人におすすめ */
.advice-list {
    position: relative;
    padding: 1.5em 1em 1em 2.5em;
    border: 2px solid #7accbe;
}

.advice-list ul {
    list-style-type: disc;
    margin: 0;
    padding: 0;
}

.advice-list li {
    display: flex;
    align-items: center;
    gap: 0 10px;
    position: relative;
    padding: .3em .3em .3em 2.5em;
}

.advice-list li::before,
.advice-list li::after {
    position: absolute;
    content: '';
}

.advice-list li::before {
    left: 0;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background-color: #7accbe;
}

.advice-list li::after {
    left: .6em;
    transform: translateX(-75%) rotate(-45deg);
    width: .3em;
    height: .3em;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}

/* home-フロー */
.timeline {
	position: relative;
	margin: 3em auto;
	padding-bottom: 2em;
}
.timeline:before {
	position: absolute;
	top: 0px;
	left: 20px;
	width: 3px;
	height: 100%;
	content: '';
	background: #7accbe;
}
.timeline .timeline_item {
	margin: 0px 0px 0px 45px;
}
.timeline .timeline_item .time_date .time {
	font-family: serif;
	font-style: italic;
	font-size: 3em;
	font-weight: bold;
	position: relative;
	margin: 0;
	letter-spacing: 3px;
	color: rgba(15, 35, 74,0.1);
}
.timeline .timeline_item .time_date .flag {
	font-size: 1.5em;
	font-weight: bold;
	margin: 0;
	margin-top: -40px;
	color: #7accbe;
}
.timeline .timeline_item .subtitle {
	font-size: 1.2em;
	line-height: 20px;
	margin-top: 10px;
	padding-left: 20px;
}
.timeline .timeline_item .desc {
	line-height: 20px;
	margin-top: 10px;
	padding-left: 20px;
}

/* home-右矢印付きボタン */
/* ボタンの基本設定 */
.btn-rline a {
    background: #eee;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 10px 25px;
    color: #313131;
    font-weight: 500;
}

/* アニメーションのためのbefore設定 */
.btn-rline a:before {
    content: '';
    position: absolute;
    top: calc(50% - 2px);
    right: -2em;
    transform: translateY(calc(-50% - 2px)) rotate(30deg);
    width: 12px;
    height: 2px;
    background-color: #7accbe;
    animation: moveBefore 0.8s infinite alternate ease-in-out;
}

/* アニメーションのためのafter設定 */
.btn-rline a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -2em;
    transform: translateY(-50%);
    width: 60px;
    height: 2px;
    background-color: #7accbe;
    animation: moveAfter 0.8s infinite alternate ease-in-out;
}

/* アニメーションのキー設定 */
@keyframes moveBefore {
    0% {
        right: -2em;
        background-color: #7accbe;
    }
    100% {
        right: -2.5em;
        background-color: #4fb8a3;
    }
}

@keyframes moveAfter {
    0% {
        right: -2em;
        background-color: #7accbe;
    }
    100% {
        right: -2.5em;
        background-color: #4fb8a3;
    }
}

/* 背景色もアニメーションする場合 */
@keyframes backgroundChange {
    0% {
        background-color: #eee;
    }
    100% {
        background-color: #daf5f1;
    }
}

.btn-rline a {
    animation: backgroundChange 1.6s infinite alternate ease-in-out;
}

/*********************************************************/
/*************** よくある質問　*****************************/
/*********************************************************/
.qa-list dl {
    position: relative;
    margin: 30px 0 0;
    cursor: pointer;
    border: 1px solid #DDD;
}
.qa-list dl:first-child {
  margin-top: 0;
}
.qa-list dl::after {
    position: absolute;
    top: 27px;
    right: 26px;
    display: block;
    width: 7px;
    height: 7px;
    margin: auto;
    content: '';
    transform: rotate(135deg);
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.qa-list .open::after {
    transform: rotate(-45deg);
}
.qa-list dl dt {
    position: relative;
    margin: 0;
    padding: 20px 35px 20px 60px;
    font-weight: bold;
    background: #FAFBF8;
}
.qa-list dl dt::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    content: 'Q';
    color: #7accbe;
}
.qa-list dl dd::before {
    font-size: 22px;
    line-height: 1;
    position: absolute;
    left: 20px;
    display: block;
    content: 'A';
    font-weight: bold;
    color: #7accbe;
}
.qa-list dl dd {
    position: relative;
    margin: 0;
    padding: 20px 20px 20px 60px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}

@media screen and (max-width: 767px) {
 .qa-list dl {
    margin: 10px 0 0;
}
.qa-list dl:after {
    top: 20px;
    right: 20px;
    width: 7px;
    height: 7px;
}
.qa-list dl dt {
    padding: 16px 35px 16px 50px;
    font-size: 14px;
}
.qa-list dl dt::before {
    font-size: 14px;
    top: 20px;
    left: 20px;
}
.qa-list dl dd::before {
    font-size: 14px;
    left: 20px;
    margin-top: 5px;
}
.qa-list dl dd {
    margin: 0;
    padding: 16px 16px 16px 50px;
    font-size: 14px;
}
.qa-list dl dd p {
    margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
    margin-top: 0;
}
}


/*********************************************************/
/*************** 料金 ************************************/
/*********************************************************/

/*ヘッダーボタン*/
.plans-section {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  flex-wrap: wrap;
}

.plan-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 30%;
  background-color: #fff;
}
.plan-card a {
  display: block;
  height: 100%;
  width: 100%;
}

.plan-card:hover {
  background-color: #f9f9f9;
}

.plan-header {
  text-align: center;
  margin-bottom: 10px;
  color: #616161;
  font-weight: 700;
}

.plan-sub-title {
  font-weight: 400;
  line-height: 150%;
  color: #9e9e9e;
  text-align: center;
  margin: 0!important;
  padding: 10px 0 5px 0;
}

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

.btn-select {
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

.chevron-icon {
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 1em;
  height: 1em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

@media (max-width: 781px) {
  .plan-card {
    width: 100%;
  }

  .plans-section {
    justify-content: center;
  }
	
  .plan-header {
    margin-bottom: 5px!important;
  }
}

/*料金表*/
.price-panel {
    padding: 0px;
}
.price-panel .container {
    width: 100%;
    max-width: 952px;
    margin: 0 auto;
    padding: 40px;
    position: relative;
}
.price-panel .container::before {
    content: "";
    border-top: 1px solid #616161;
    width: 34.2%;
    height: 1px;
    top: 0;
    left: 0;
    position: absolute;
    display: block;
}

.price-panel .title {
    font-weight: 700;
    font-size: 28px;
    line-height: 150%;
    letter-spacing: .04em;
}

.price-panel .price {
    display: flex;
    justify-content: flex-end;
    font-size: 15px;
    flex-wrap: wrap; 
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.price-panel .label {
    padding-top: 20px;
}

.price-panel .asterisk {
    font-size: 20px;
    position: absolute;
}

.price-panel .unit {
    font-size: 20px;
    padding-top: 33px;
}

.price-panel .payments {
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
    padding-top: 20px;
}

.price-panel .amount {
    font-weight: 700;
    font-size: 4em;
    line-height: 72px;
    margin-left: 8.37px;
    max-width: 100%;
    overflow-wrap: break-word;
}

.price-panel .tax {
    font-weight: 400;
    font-size: 15px;
    line-height: 150%;
    text-align: right;
    padding-top: 2px;
}

.price-panel .point-title {
    position: absolute;
    top: -15px;
    left: calc(50% - 50px);
    font-weight: 700;
    font-size: 20px;
    line-height: 150%;
    color: #7db3a9;
    background-color: #FFFFFF;
    width: 100px;
    height: 30px;
    text-align: center;
}

.price-panel .points {
    position: relative;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
    margin-top: 39px;
    padding: 30px 0;
}

.price-panel .desc-area {
    display: grid;
    row-gap: 16px;
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
}

.price-panel .point {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.price-panel .disclaimer {
    margin-top: 20px;
}

.price-panel .subtitle {
    font-weight: 600;
    margin-top: 10px;
    color: #9e9e9e;
}

.price-panel .desc {
    margin-top: 30px;
}

.price-count {
  counter-reset: original-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
.price-count li {
  font-size: 16px;
  padding-left: 30px;
  padding-bottom: 10px;
  position: relative;
}
.price-count li:before {
  content: counter(original-counter);
  counter-increment: original-counter;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width: 25px;
  color: #FFFFFF;
  font-size: 85%;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
  letter-spacing: normal;
}

/*料金(特待生割引)*/
.scholarship {
    max-width: 650px;
}

.price-panel .scholarship .discount {
    color: #ccbe7a;
    font-size: 18px;
    font-weight: 900;
}

/*料金(特待生割引エリア)*/
.price-panel .scholarship {
    margin:10px 20px 10px 20px;
}

.price-panel .box {
    position: relative;
    padding: 4.1rem 1rem 1rem;
    outline: 1px solid #ccbe7a;
    outline-offset: -0.5rem;
}

.price-panel .box::before {
    position: absolute;
    top: 1rem;
    left: 0;
    width: 100%;
    padding: 0.5rem 0;
    background-color: rgb(204, 190, 122, .7);
    color: white;
    text-align: center;
    content: attr(data-title);
}

.price-panel .box p {
    line-height: 1.5;
    text-align: center;
    margin-bottom: 0px;
}

.price-panel .box::after {
    content: '';
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    background-color: rgba(204, 190, 122, 0.05);
    z-index: -1;
}

.price-panel .campaign-caution {
    line-height: 1.1;
    font-size: 12px;
}

/*料金(吹き出し目次)*/
.speech_ttl {
  position: relative;
  text-align: center;
  display: block;
  width: fit-content;
  line-height: 1.4;
  margin: 4px auto 3px;
  padding: 0 20px;
}

.speech_ttl_main {
  font-size: 28px;
  font-weight: bold;
}

.speech_ttl_sub {
  display: block;
  font-size: 22px;
  font-weight: lighter;
}

.speech_ttl::before,
.speech_ttl::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 40px;
  background: rgba(0, 0, 0, 0.4);
}

.speech_ttl::before {
  transform: rotate(-25deg);
  left: 0;
}

.speech_ttl::after {
  transform: rotate(25deg);
  right: 0;
}



/*********************************************************/
/*************** 料金表個別コース（ヘッダエリア）　***************/
/*********************************************************/

.price-sub-desc {
    min-height:40px;
}
.price-panel .price-sub-clm {
    max-width:950px;
}

.price-panel .head-border {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size:22px;
}
.price-panel .head-border.sub {
    font-size: 18px;
    margin: 20px 0px;
}

.price-panel .head-border:before,
.head-border:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #e0e0e0;
}

.price-panel .head-border:before {
    margin-right: 1rem;
}

.price-panel .head-border:after {
    margin-left: 1rem;
}

.separator.arrow{
    padding-top: calc(10vw); 
    position: relative;
    margin-bottom:0px!important;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}
.separator.arrow::before,
.arrow::after{
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 10vw solid #f8fbf8; 
}
.separator.arrow::before{
    left: 0;
    border-right: 50vw solid transparent;
}
.separator.arrow::after{
    right: 0;
    border-left: 50vw solid transparent;
}

/*色（グレー）*/
/*
.separator.arrow.gray::before,
.arrow.gray::after{
    border-bottom: 10vw solid #e8ecef; 
}
*/

/*逆arrow*/
/*
.arrow-div {
    padding-top: calc(10vw); 
    position: relative;
    margin-bottom: 0px !important;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

.arrow-div::before,
.arrow-div::after {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 10vw solid transparent;
}

.arrow-div::before {
    left: 0;
    border-right: 50vw solid #f8f4e6;
}

.arrow-div::after {
    right: 0;
    border-left: 50vw solid #f8f4e6;
}
*/

.price-sub-head {
	position: relative;
	padding-bottom: 20px;
	font-size: 20px;
	text-align: center;
}

.price-sub-head:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 6px 0 6px;
	border-color: #cccccc rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
}

.price-sub-amount {
    font-size: 68px;
}
/*********************************************************/
/*************** 料金表個別コース（共通エリア）　***************/
/*********************************************************/
.price-sub-count {
  counter-reset: original-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
.price-sub-count li {
  padding-left: 30px;
  position: relative;
}
.price-sub-count li:before {
  content: counter(original-counter);
  counter-increment: original-counter;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 21px;
  width: 21px;
  color: #FFFFFF;
  font-size: 80%;
  line-height: 1;
  position: absolute;
  top: 4%;
  left: 0;
  letter-spacing: normal;
}

/*料金表個別コース-テーマ別コンテンツ*/
.price-sub-thema dt{
    float: left;
}
.price-sub-thema dd{
    padding-left: 20px;
    padding-bottom: 5px;
}
.price-sub-thema dl{
    clear: both;
}

/*料金表個別コース-オプション*/
.price-sub-option{
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    text-align:right;
}

.price-sub-option::after {
    content: "";
    display: block;
    clear: both;
}


/*料金表カラー指定(グリーン)*/
.price-panel .title.course-green
,.price-panel .label.course-green
,.price-panel .amount.course-green
,.price-panel .unit.course-green
,.price-panel .tax.course-green
,.price-panel .point-title.course-green
 {
    color: #7db3a9;
}
.price-count.course-green li:before {
  background-color: #7db3a9;
}
.price-panel .price-sub-color.course-green {
    color: #7db3a9;
}

/*料金表カラー指定(イエロー)*/
.price-panel .title.course-yellow
,.price-panel .label.course-yellow
,.price-panel .amount.course-yellow
,.price-panel .unit.course-yellow
,.price-panel .tax.course-yellow
,.price-panel .point-title.course-yellow
 {
    color: #ccbe7a;
}
.price-count.course-yellow li:before {
  background-color: #ccbe7a;
}
.price-panel .price-sub-color.course-yellow {
    color: #ccbe7a;
}


/*料金表カラー指定(ブルー)*/
.price-panel .title.course-blue
,.price-panel .label.course-blue
,.price-panel .amount.course-blue
,.price-panel .unit.course-blue
,.price-panel .tax.course-blue
,.price-panel .point-title.course-blue
 {
    color: #7aa3cc;
}
.price-count.course-blue li:before {
  background-color: #7aa3cc;
}
.price-panel .price-sub-color.course-blue {
    color: #7aa3cc;
}


/*料金表カラー指定(グレー)*/
.price-sub-count.course-gray li:before {
    background-color: #999999;
}

@media (max-width: 700px) {
	/*料金表ページ*/
    .price-panel .container {
        padding: 30px 10px 40px 10px;
    }
    .price-panel .title {
        font-size: 24px;
    }
    .price-panel .payments {
        font-size: 16px;
    }
    .price-panel .amount {
        font-size: 38px; 
        line-height: 50px;
    }
    .price-panel .label {
        padding-top: 10px;
    }
    .price-panel .asterisk {
        font-size: 16px;
    }
    .price-panel .unit {
        font-size: 16px;
        padding-top: 20px;
    }
    .price-count {
        padding-left: 10px!important;
    }
    .price-panel .scholarship {
        margin:10px 5px 10px 5px;
    }
    .speech_ttl_main {
        font-size: 17px;
    }

    .speech_ttl_sub {
        font-size: 14px;
    }
    .speech_ttl {
      padding: 0 13px;
    }

	/*料金表別ページ*/
    .price-sub-amount {
        font-size: 48px;
    }

}




/*==================================================
他固定ページ-END
===================================*/

/** タイトル装飾 - START *****************************/

/* H見出しのスタイルクリア */
.article h2.cstm-head,
.article h3.cstm-head,
.article h4.cstm-head,
.article h5.cstm-head,
.article h6.cstm-head {
    font-weight: 400;
    letter-spacing: .1rem;
    border: none;
    background-color: transparent;
    margin: 0;
    padding: 0;
    position: static;

}
.article h2.cstm-head {
    font-size: 64px;
    font-weight: 200;

}
/* H見出しのスマホの場合、フォントサイズ変更 */
@media screen and (max-width: 834px){
  .article h2.cstm-head {
      font-size: 40px;
  }	
}

/* H見出し下の下線 */
.article .cstm-sub-text {
    position: relative;
    padding: 0.5rem 0 1.5rem;
    margin-bottom: 0.5rem;
    /*font-size: 20px;*/
    background: linear-gradient(90deg, #b2ded5 0% 50%, #dddddd 50%);
    background-repeat: no-repeat;
    background-size: 2rem 0.2rem;
    background-position: bottom;
    text-align: center;
}

/* h2 h3 カラーテーマの上書き */
.article h2 {
  --skin-grayish-site-main-hover: #b2ded5;
}

.article h3 {
  --skin-grayish-gradient: #f8fcfc;
  --skin-grayish-site-main-hover: #abd3cf;
}

/* テーマカスタマイザーで設定した英字Font + 日本語は　Cocoon設定のサイトフォント選択Font*/
.cstm-skin-font-set {
    font-family: var(--skin-grayish-style-font);
}
/** タイトル装飾 - END *****************************/

/** cstm-pat-common - START *****************************/

/* coverブロック内の上下の余白 */
/* clip-pathなし */
:where(.cstm-pat-1, .cstm-pat-2, .cstm-pat-3, .cstm-pat-4, .cstm-pat-5, .cstm-pat-6, .cstm-pat-7)>.wp-block-cover__inner-container {
    padding-top: 6rem;
    padding-bottom: 6rem;

}

/* .cstm-clip-upperの次のカバーブロック内の上の余白を半分に */
.cstm-clip-upper+.wp-block-cover>.wp-block-cover__inner-container,
.cstm-clip-upper-r+.wp-block-cover>.wp-block-cover__inner-container,
.cstm-clip-upper-kaku+.wp-block-cover>.wp-block-cover__inner-container {
  padding-top: 3rem;
}

/* cstm-clip-lowerの次のカバーブロック内の上の余白を半分に */
.cstm-clip-lower+.wp-block-cover>.wp-block-cover__inner-container,
.cstm-clip-lower-r+.wp-block-cover>.wp-block-cover__inner-container,
.cstm-clip-lower-kaku+.wp-block-cover>.wp-block-cover__inner-container {
  padding-top: 3rem;
}

/** cstm-pat-common - END *****************************/


/************************************************************************************************************
** 追加ーEND
************************************************************************************************************/



/* ====================================
   塾生ダッシュボード用スタイル（修正版V3）
   ==================================== */

/* ベースコンテナ：copyokでコピーガードを解除 */
.jukusei-dashboard.copyok {
    user-select: none !important;         /* ★文字選択を禁止（青くならない） */
    -webkit-user-select: none !important; /* Safari/Chrome用 */
    -webkit-touch-callout: none !important; /* 長押しメニューも出さない */
    pointer-events: auto !important;      /* ★でもボタンクリックは許可 */
    font-family: "Helvetica Neue", Arial, sans-serif;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 10px;
    color: #444;
}

/* リンク全般の初期化 */
.jukusei-dashboard a {
    text-decoration: none !important;
    color: inherit !important;
    pointer-events: auto !important; /* クリックを確実に有効化 */
    cursor: pointer !important;
}

.dashboard-section {
    margin-bottom: 50px;
}

.section-title {
    font-size: 1.4rem;
    color: #555;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-weight: bold;
    clear: both;
}
.section-title i {
    color: #7accbe;
    margin-right: 8px;
}

/* ----------------------------------
   クイックアクション
   ---------------------------------- */
.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

/* カード型リンクの設定 */
a.action-card {
    display: flex !important; /* 強制的にフレックスボックス */
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 15px 20px;
    border: 2px solid #eee;
    box-shadow: 0 4px 6px rgba(0,0,0,0.08);
    transition: all 0.2s ease-in-out;
    position: relative;
    z-index: 10;
}

a.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    opacity: 1 !important; /* 透明度変化を防ぐ */
}

/* ▼ メインアクション：進捗報告 ▼ */
a.main-action-btn {
    background: #fffbf0 !important;
    border: 2px solid #ffcc80 !important;
    grid-column: 1 / -1; /* 横幅いっぱい */
}
a.main-action-btn:hover {
    background: #fff8e1 !important;
    border-color: #ff9800 !important;
}

/* ▼ サブアクション：照会・暗記 ▼ */
a.sub-action-btn {
    border-left: 5px solid #7accbe !important;
}

/* ▼ ハイライト：合格判定 ▼ */
a.highlight-action-btn {
    background: #f0f8ff !important;
    border: 2px solid #90caf9 !important;
}

/* アイコンエリア */
.icon-area {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 1.5rem;
}

/* 色設定 */
a.main-action-btn .icon-area { background: #ff9800; color: #fff; }
a.sub-action-btn .icon-area { background: #e0f2f1; color: #009688; }
a.highlight-action-btn .icon-area { background: #2196f3; color: #fff; }

.icon-area.small {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
}

/* テキストエリア */
.text-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.main-text {
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1.4;
    color: #333;
    display: block;
}
.sub-text {
    font-size: 0.85rem;
    color: #666;
    margin-top: 3px;
    display: block;
}

.arrow-area {
    color: #ccc;
    font-size: 1.2rem;
}
a.main-action-btn:hover .arrow-area {
    color: #ff9800;
}

/* ----------------------------------
   学習資料エリア
   ---------------------------------- */
.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.material-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ddd;
    overflow: hidden;
}
.material-card.full-width {
    grid-column: 1 / -1;
}
.card-header {
    padding: 12px 15px;
    font-weight: bold;
    color: #fff;
    font-size: 1rem;
}
/* ヘッダー色：北欧ブルー系 */
.strategy-color { background: #7eaebf; } /* 北欧風ブルー */
.study-color    { background: #7accbe; } /* 既存のミント */
.mental-color   { background: #92bfd6; } /* 爽やかな空色 */
.interview-color{ background: #8c9ecf; } /* 知的なインディゴブルー */
.data-color     { background: #6dbeb5; } /* 深みのある青緑 */

.link-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 5px 0 !important;
}
.link-list li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f5f5f5;
}
.link-list a {
    display: block !important;
    padding: 10px 15px;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    transition: background 0.2s;
}
.link-list a:hover {
    background: #f0fcf9;
    color: #009688 !important;
    padding-left: 20px;
}

/* データ資料用の2列リスト */
.grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-list li {
    border-right: 1px solid #f5f5f5;
}

/* ----------------------------------
   フォームエリア
   ---------------------------------- */
.forms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 30px;
}
a.form-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid #bbb;
    color: #555 !important;
    padding: 12px;
    border-radius: 30px;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s;
}
a.form-btn:hover {
    background: #7accbe;
    color: #fff !important;
    border-color: #7accbe;
}
a.form-btn i { margin-right: 6px; }

/* 重要なお知らせ */
.important-notice {
    background: #fff8e1;
    border: 2px solid #ffcc80;
    border-radius: 10px;
    padding: 25px;
    text-align: center;
}
.important-notice p {
    font-weight: bold;
    color: #e65100;
    font-size: 1.1rem;
    margin: 0 0 15px 0;
}
a.important-btn {
    display: inline-block !important;
    background: #ef6c00;
    color: #fff !important;
    padding: 12px 50px;
    border-radius: 50px;
    text-decoration: none !important;
    font-weight: bold;
    box-shadow: 0 4px 0 #bf360c;
    transition: transform 0.1s, box-shadow 0.1s;
}
a.important-btn:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #bf360c;
}

/* スマホ調整 */
@media screen and (max-width: 767px) {
    .action-grid {
        grid-template-columns: 1fr;
    }
    .materials-grid {
        grid-template-columns: 1fr;
    }
    .grid-list {
        grid-template-columns: 1fr;
    }
    .forms-grid {
        grid-template-columns: 1fr 1fr;
    }
}