* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    font-size: 100%;
    list-style: none;
}
html{
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
}

@import url("http://marble-heroes.com/css/reset.css");

body{
	font-size: 2rem;
	font-family: 'Noto Sans JP',sans-serif;
	line-height: 1.8;
	line-break: strict;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.center{text-align: center;}
.left{text-align: left;}
amp-img{width:100%;height:auto;}
img {height: auto;}
a{text-decoration:none;}
/*strong{background:linear-gradient(transparent 40%, #ffff66 0%);}*/
em{color:#cf0614;font-style:normal;font-weight:bold;}
u{text-decoration:none;background:linear-gradient(transparent 92%, #f90 0%);font-weight:bold;}
/**margin&padding**/
.mt10 {margin-top:10px;}
.mt30 {margin-top:30px;}
.mt50 {margin-top:50px;}
.mt120 {margin-top:120px;}
.mb10 {margin-bottom:10px;}
.mb30 {margin-bottom:30px;}
.mb50 {margin-bottom:50px;}
.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}
.pt50 {padding-top:50px;}
.pm10 {padding-bottom:10px;}
.pm30 {padding-bottom:30px;}
.pm50 {padding-bottom:50px;}

.line{background:linear-gradient(transparent 50%, #faff81 50%);}
.under{text-decoration: underline;}
.f_m{font-family: 'Noto Serif JP', serif;}
.fs{font-size: 0.8em;}
.fm{font-size: 1.1em;}
.fl{font-size: 1.3em;}
.fl2{font-size: 1.5em;}
.fl3{font-size: 2em;}
.txt_l{text-align: left;}
.txt_r{text-align: right;}
.f-small {
  font-size: 0.7em;
}
.f-bold {
  font-weight: bold;
}
.f-em {
  font-size: 1.05em;
}
.ano{color: #333;font-size: 0.6em; line-height: 1; font-weight: normal;}
.graybg{
  padding: 5px;
  margin: 2px;
  background: #555;
  color: #fff;
  line-height: 1.6;
  font-size: 1.1em;
}
.goldbg{
  padding: 5px;
  margin: 0 2px;
  background: #fff665;
  /* color: #fff; */
  line-height: 1.6;
}
.greenbg{
  padding: 5px;
  margin: 0 2px;
  background: #1c5851;
  color: #fff;
  line-height: 1.6;
}

/*header*/
.mv{
  background: url("./images/fv_bg.jpg") no-repeat center top;
  background-size: 100%;
  text-align:center;
  padding: 0 0 2%;
}
.mv.cv{
  background: none;
  margin: auto auto 5%;
}
.mv img{
  width: 100%;
  text-align:center;
}
.mv .head{
  background-image: linear-gradient(90deg, rgba(21, 68, 62, 1), rgba(30, 96, 88, 1) 50%, rgba(21, 68, 62, 1));
  text-align: center;
  padding: 1.5%;
  margin-bottom: 2%;
}
.mv .head.cv{
  padding: 2px;
  margin-bottom: 4%;
}
.mv .head span{
  display: block;
  width: 1000px;
  margin: auto;
  color: #fff;
  font-size: 0.9em;
}

.mv .cont{
  width: 800px;
  margin: auto;
  font-size: 80%;
  letter-spacing: -0.8px;  
}
.mv .copy{
  margin: auto auto 2% auto;
}
.mv .copy p{
  font-size: 0.7em;
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.mv h1{
  margin: 2% auto 5%;
}
.mv.cv h1{
  margin: 2% auto 0;
}
.hdrA{
	padding: 20px;
	margin-bottom: 0;
  background-image: linear-gradient(90deg, rgba(21, 68, 62, 1), rgba(30, 96, 88, 1) 50%, rgba(21, 68, 62, 1)); 
	color: #fff;
	font-weight: bold;
	font-size: 200%;
	line-height: 1.4;
	font-feature-settings: "palt";
	letter-spacing: 0.02em;
	text-align: center;
	position: relative;
}
.hdrA::after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: solid 40px transparent;
	border-top: solid 30px #1c5851;
	position: absolute;
	bottom: -69px;
	left: 50%;
	transform: translate(-50%, 0);
}
.hdrA span,.hdrB span{
	display: block;
	font-size: 60%;
}
.hdrB{
	padding: 20px;
	margin-bottom: 0;
  background-image: linear-gradient(358deg, rgba(240, 189, 0, 1), rgba(172, 125, 0, 1));
	color: #fff;
	font-weight: bold;
	font-size: 200%;
	line-height: 1.4;
	font-feature-settings: "palt";
	letter-spacing: 0.02em;
	text-align: center;
	position: relative;
}


/*media*/
.media{
  text-align: center;
  padding: 5% 0;
}


.voice_bg {
  background: rgb(34, 160, 145) url(./images/bg_g.jpg) center top repeat;
  background-size: contain;
}
.voice_bg strong {
    background: linear-gradient(transparent 40%, #ffff66 0%);
}
.cp_box label:after {
  background-color: #1e6058;
}
.voice_bg .cp_box label:after {
  background-color: #C49861;
}

.box { display: flex;}
.voice_title{    padding-left: 3%;    width: 70%;}
.voice_pic{    width: 30%;}
.hidden_show .h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    line-height: 1.4;
}
.p30 { font-size: 26px;}
.old{   background: #3fccc8;font-weight: 700;
    border-radius: 0.5em;
    color: #fff;
    padding: .5% 1%;
    margin-left: 2%;}

li {
  list-style-type: none;
}
.voice{
  margin: 0% 5% ;
}
.voice .mv {
  width: 100%;
  margin: 0 auto;
}
.voice li{
  margin-bottom: 5%;
}
.voice li img{
  display: block;
  margin: auto;
}
.voice_bg dl{
  background: #ededed; margin: 0 auto;
  padding: 5%;
    border-radius: 1em;
}
.voice dt{
  color: #e40627;
  font-weight: bold;
  font-size: 1.2em;
}
.voice dd{
 padding: 1% 2% 1%;
  margin: 1% 2% 3%;
  color: #000;
  border-bottom: 2px dotted #dfdfdf;
}
.voice dd:last-child{
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.cp_box *, .cp_box *:before, .cp_box *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.cp_box {
    position: relative;
    padding: 10px 0 0;
}
.cp_box label {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    height: 140px; /* グラデーションの高さ */
    cursor: pointer;
    text-align: center;
    /* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
    background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 30%, rgb(255 255 255) 70%);
}
.cp_box input:checked + label {
    background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
    line-height: 2.5rem;
    padding: 10px;
    position: absolute;
    z-index: 2;
    bottom: 0px;
    left: 50%;
    width: 30%;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f13a'' 続きをよむ';
    transform: translate(-50%, 0);
    letter-spacing: 0.05em;
    color: #ffffff;
    border-radius: 50px;
}
.cp_box input {
    display: none;
}
.cp_box .cp_container {
    overflow: hidden;
    height: 90px; /* 開く前に見えている部分の高さ */
    transition: all 0.5s;
}
.cp_box input:checked + label {
    /* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f139'' 閉じる';
}
.cp_box input:checked ~ .cp_container {
    height: auto;
    padding-bottom: 80px; /* 閉じるボタンのbottomからの位置 */
    transition: all 0.5s;
}

/**voice  続きを読む**/
/*アコーディオン*/
.hidden_box {
  margin: 0px 0 0px;/*前後の余白*/
  padding: 0;
}
/*ボタン装飾*/
.hidden_box label {
  display: block;
   background:#ff8005;
  color: #fff;
  margin: 2% auto;
  padding: 2%;
  width: 100%;
  border-radius: 50px;
  font-size: 1.1em;
  cursor : pointer;
  text-align: center;
  font-weight: bold;
}
/*ボタンホバー時*/
.hidden_box label:hover {
  background: #3fccc8;
  color: #fff;
}

.hidden_box label:before { content: "▼ 続きを読む"; }
.hidden_box label:after { content:" ▼"; }


/*チェックは見えなくする*/
.hidden_box input {
  display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
  padding: 10px 0;
  height: auto;
  opacity: 1;
}

 input[type="checkbox"] {
    display: none;
    margin-right: 6px;}
.point_waku {
    background-color: #FFF;
    color: #000;
    border: 0.2em;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 20%);
    border-radius: 1em;
    margin: 1em 30px 1rem;
    padding: 2em 2em 2em;
}
main > *{
	padding: 40px 4%;
}
 .w100{
    width: 100%;
    max-width: 900px;
    margin: auto;
}
 .w900{
	width: 100%;
	max-width: 900px;
	margin: auto;
}



.nayami{
  background: url("./images/nayami_bg.jpg");
  background-size: 100%;
}
.nayami li{
  background: #fff;
  padding: 4% 0 0;
  margin: auto auto 6%;
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.3));
	border-radius:5px
}
.nayami li h3{
  margin-bottom: 3%;
  font-size: 1.2em;
  line-height:1.4;
  font-weight: normal;
}
.nayami li h3 strong{
  color: #1c5851;
  text-decoration: underline;
  font-size: 1.2em;
}
.nayami img{
  width: 100%;
  margin: 0 0 -10px;
  padding: 0px;
}

/*future*/
.future{
  background: url(./images/bg_y.jpg) center center repeat-y;
  /* background-size: cover; */
  /* background-attachment: fixed; */
}
.future h2{
  margin-bottom: 5%;
  line-height: 1.3;
}
.future li{
  align-items: center;
  border: 1px solid #eee;
  padding: 3% 2% 0%;
  margin:auto auto 5%;
  background: #fff;
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.1));
  border: 3px solid #bf932a;
}
.future li img{
  width: 100%;
}
.future li h3{
  font-size: 1.2em;
  margin-bottom: 2%;
  line-height: 1.3;
  color: #b07f0b;
}



/*sec*/
.sec{
}
.sec p{
  margin-bottom: 3%;
}
.sec .contwrap,.register .contwrap{
  width:900px;
  margin: auto;
  text-align: center;
  padding: 5% 3%;
}

/*register*/
.register{
  background: url("./images/register_bg.jpg") repeat-x center top;
}

/*listbox*/
.listbox{
    background-color: #eee;
    background-image: url(./images/bg01.png), url(./images/bg02.png);
    background-repeat: repeat-y;
    background-size: 14%,19%;
    background-position: 0% 1%, 102% 7%;
}
.listbox ul{
}
.listbox li{
  align-items: center;
  border: 1px solid #eee;
  border-top: solid 6px #bf932a;
  padding: 2% 4% 2%;
  margin:auto auto 5%;
  background: #fff;
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.1));
  line-height: 1.3;
}
.listbox li h3 p{
  margin-bottom: 2%;
  font-weight: normal;
  font-size: 1.1em;
}
.listbox li img{
  width: 100%;
}
.listbox li{
  margin-bottom: 10%;
}
.listbox li h3 div{
  width: 19%;
  margin: -6% auto 2%;
}
.listbox li h3 {
  display: block;
}


/*profile*/
.profile {
  background: url(./images/bg_y.jpg) center center repeat-y;
  background-size: contain;
  padding: 4% 2%;
}


.profile .inner h3{
	width: 90%;
	margin: auto;
}
.profile .inner div{
	padding: 40px;    margin-bottom: 30px;
	background: #fff;    font-size: 1.7rem;
}
.profile .inner p{
	background-size: 8px 100%,100% 2em;
	line-height: 2em;
	margin-bottom: 2em;
	padding-bottom: 1px;
}
.profile .inner  p:last-child{
	margin-bottom: 0;
}

/**title**/
.title1 {
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding-bottom: 4%;
}

.title1 .text {
  color: #f7701b;
  font-size: 20px;
  margin-bottom: 1%;
  letter-spacing: 0.4px;
}

.title1 .title {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
}

.title1 .title span {
  display: block;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  font-family: 'Arial', sans-serif;
  font-style: normal;
  font-weight: bold;
  color: #f7701b;
  font-size: 60px;
  line-height: 1;
  letter-spacing: 2.8px;
  padding: 0 28px;
}

.title1 .title:before, .title1 .title:after {
  content: '';
  display: block;
  height: 1px;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  border-top: 1px solid #f7701b;}

.title1 .text,
.title1 .title span {
  color: #C49861;
}
.title1 .title:before,
.title1 .title:after {
  border-top: 1px solid #C49861;
}


footer {
  z-index: 1000;
  position: relative;
  clear: both;
  font-size: 14px;
  color: #fefefe;
  padding: 15px 0 20px;
  text-align: center;
  background: #1b564f;
  line-height: 30px;
}
footer a{color:#fff;}
footer a:hover {
  color:#ffc55b;
}

main > *{
	padding: 40px 4%;
}


@media screen and (max-width: 640px){
.mt30 {margin-top:10px;}
.mt50 {margin-top:30px;}
.mb30 {margin-bottom:10px;}
.mb50 {margin-bottom:30px;}
.pt30 {padding-top:15px;}
.pt50 {padding-top:20px;}
.pm30 {padding-bottom:10px;}
.pm50 {padding-bottom:30px;}
.mt120 { margin-top: 70px;}
}

@media print, screen and (max-width: 760px) {
.no { font-size: 1.2rem;}
.balloon {padding: 2px 30px; font-size: 1.8rem;}
}
.pink{ color: #e1326d;}
.blue{color:#32b5e1;}
.green{color:#4caf50;}
.pur{color:#a354cd;}
.orange{color:#ed6918;}

.btn{
	display: block;
	animation: bound 0.8s infinite;
}
@keyframes bound{
0%,100%{transform:translateY(0px);}
10%{transform:translateY(-10px);}
20%{transform:translateY(-18px);}
30%{transform:translateY(-22px);}
40%{transform:translateY(-24px);}
50%{transform:translateY(-25px);}
60%{transform:translateY(-24px);}
70%{transform:translateY(-22px);}
80%{transform:translateY(-18px);}
90%{transform:translateY(-10px);}
}
@keyframes hop{
0%,40%{transform:skew(0deg,0deg)}
5%{transform:skew(5deg,5deg)}
10%{transform:skew(-4deg,-4deg)}
15%{transform:skew(3deg,3deg)}
20%{transform:skew(-2deg,-2deg)}
25%{transform:skew(1deg,1deg)}
30%{transform:skew(-0.6deg,-0.6deg)}
35%{transform:skew(0.3deg,0.3deg)}
}
.btn:hover{
	cursor: pointer;
	opacity: 0.8;
}

@media only screen and (max-width: 767px){
ul {width:100%;}
body{font-size:1.8rem;}
/*strong{background:linear-gradient(transparent 50%, #ffff66 0%);}*/
main > *{padding: 10px 1%;}

@keyframes bound{
0%,100%{transform:translateY(0px);}
10%{transform:translateY(-8px);}
20%{transform:translateY(-12px);}
30%{transform:translateY(-14px);}
40%{transform:translateY(-15px);}
50%{transform:translateY(-16px);}
60%{transform:translateY(-15px);}
70%{transform:translateY(-14px);}
80%{transform:translateY(-12px);}
90%{transform:translateY(-8px);}
}


}/* sp-end */



@media only screen and (min-width: 768px){
.sp{display:none;}
}
@media only screen and (max-width: 767px){
.pc{display:none;}
}



@media screen and (max-width: 768px) {
/*.mv*/
.mv{
  background: url("./images/fv_bg_sp.jpg") no-repeat center top;
  background-size: 100%;
}  
.mv .cont{
  width: 100%;
  padding: 0;
}
.mv .head span{
  width: 100%;
	font-size: 0.7em;	
}
.mv .head span.headcopy{
  margin: 3px auto -5px auto;
}
.mv img{
  width: 98%;
  margin: auto;
}
.mv .head img{
  width: 85%;
}  
.hdrA,.hdrB{
	padding: 15px 10px;
	font-size: 120%;
}
.hdrA::after{
	border: solid 30px transparent;
	border-top: solid 20px #1c5851;
	bottom: -49px;
}
.hdrA span{font-size: 80%;}
  
.media img,.sec img,.register img {
    width: 100%;
}

  
  
  
  
.voice dl { font-size: 1rem;}
.voice { margin: 0% 3%;}
.voice li { margin-bottom: 0%;}
  .movie { width:100%; padding-bottom: 56.25%; height:0px; margin: 0 0 5%; position: relative; }
.hidden_show .h1 { font-size: 1.2rem; letter-spacing: 0em;}
.voice dd {padding: 0 0 3%; margin: 1% 0% 3%;}
.p30 {font-size: 20px;}  
 .w900 {width: 95%;}
.point_waku { margin: 1em 0px 1rem;  padding: 1em 10px;}
.cp_box label:after {width: 70%;} 
  
  
  
  
/*register*/
.sec .contwrap,.register .contwrap{
  width: 100%;
  padding: 8% 3%;
}  
/*listbox*/
.listbox li h3 div {
    width: 28%;
    margin: -8% auto 2%;
}
.nayami li{
	width: 93%;
}	
.nayami li h3 {
  font-size: 0.9em;
}
.future li h3{
  font-size: 1.1em;
}
.profile {background-size: contain;}
.profile .inner div {padding: 10px;margin-bottom: 10px; font-size: 18px;}
.profile .inner h3 { width: 100%; }  
  
}





/* 20240215 追加 */
body {
	font-size: 0;
}
.body_inner {
	font-size: 2rem;
}
.f-main {
  color: #1c5851;
}
.checkbox {
  background: #cae7df;
  padding: 1em 4%;
  margin-bottom: 1em;
  border-radius: 10px;
}
.checkbox li::before {
  display: inline-block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f00c';
  margin-right: 0.5em;
  color: #1c5851;
}
.cv_pt {
  padding-top: 50px;
}
.episode {
  background: #cae7df url(./images/txtarea_about_bg.png) no-repeat center top;
  background-size: 100% auto;
}
.episode img {
  max-width: 100%;
}
.fixed_btn_wrapper {
  position: relative;
}
.fixed_btn {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.7);
  padding: 10px;
  z-index: 999;
  font-size: 0;
  text-align: center;
}
.fixed_btn img {
  max-width: 100%;
  width: 500px;
}
.webinar2 {
  padding-bottom: 20px;
}

@media only screen and (max-width: 767px){
  body {
    font-size: 0;
  }
  .body_inner {
    font-size: 1.8rem;
  }
  .cv_pt {
    padding-top: 30px;
  }
  .fixed_btn {
    padding: 2% 4%;
  }
}