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


/* ===================================================================
CSS information
 file name  :  recruit201901.css
 style info :  リセット及びbody初期設定 
=================================================================== */
/*--- reset */
html {
	overflow-y: scroll;
}

body {
	font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
    word-break: break-word;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th {
	text-align: left;
}
q:before,q:after {
	content: '';
}
object,embed {
	vertical-align: top;
}
hr,legend {
	display: none;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
}
img,abbr,acronym,fieldset {
	border: 0;
}
li {
	list-style-type: none;
}
sup {
	vertical-align: super;
	font-size: 0.5em;
}
img {
	vertical-align: top;
}
i {
	font-style: normal;
}



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

	body {
		font-size: 4.5vw;
	}
}

/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/


#header_lp {
	padding-top: 20px;
	background: #000;
	position: relative;
	box-sizing: border-box;
}


header {
    width: 100%;
    display: block;
    position: fixed;
    max-height: 120px;
    background-color: #000;
    top: 0; /* 固定する位置 */
    left: 0; /* 固定する位置 */
    right: 0;  /* 固定する位置 */
    overflow: hidden;
    text-align: center;
    padding: 10px 0;
    margin: 0 auto;
    z-index: 100;
}

ul img {
    float:left;
    width: auto;
}
ul .logo img{
    padding:12px;
    max-width: 350px;
}
ul .cv_button{
    padding:0;
    margin: 0 0 0 55%;
}
ul .cv_button img{
    padding:0;
    max-width:387px;
}
#main {
    padding-top: 120px;
}
#main img {
	vertical-align: top;
    margin:auto;
    width:100%;
}
.campaign {
    padding-top:30px;
    width: 100%;
}
.traial_box {
    position: relative !important;
    width: 100%;
    z-index: 99;
}

#account_btn {
    position:absolute !important;
    width:85%;
    top:0;
    right:0;
    left:0;
    bottom:auto;
    margin: 40% auto!important;
}

#yoyaku_btn {
    position:absolute !important;
    width:55%;
    top:0;
    right:0;
    left:0;
    bottom:auto;
    margin: 85% 0 0 37% !important;
}

.address {
	margin:0 auto;
    width:100%;
    padding: 2% 10%;
    font-size:2rem;
}

.google_map{
    margin:0 4% 0 0;
}
.video{
    position: relative;
    width: 100%;
    height: 560px;
        margin-bottom: -5px;
	/*padding-top: 56.25%;*/
}

.video iframe{
position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}


/* -----------------------------------------------------------
	wrap
----------------------------------------------------------- */

.wrap {
    margin: 97px auto 0 auto;
    max-width: 960px;
	}

img.box {
    width: 100%;
}


@media only screen and (min-width: 768px) {
    #main {
    max-width: 960px;
    }   
}

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

	
header {
    width: 100%;
    display: block;
    position: fixed;
    max-height: 70px;
    top: 0; /* 固定する位置 */
    left: 0; /* 固定する位置 */
    right: 0;  /* 固定する位置 */
    overflow: hidden;
    text-align: center;
    padding: 8px;
    margin: 0 auto;
}
ul img{
    float:left;
    width:auto;
}

ul .logo img{
    max-width:150px;
    padding: 6px;
} 
ul .cv_button{
    padding:0;
    margin: 0 0 0 45%;
}
ul .cv_button img{
    max-width: 190px;
    padding: 0;
    margin: 0 auto;
}

 #main {
    padding-top: 65px;
	margin: 0 auto;
	width: 100%;
}
.address {
	margin:0 auto;
    width:100%;
    padding: 2% 10%;
    font-size:12px;
}
.video{
    height: 15rem !important;
   }
   	.wrap {
    margin: 57px auto 0 auto;
	}
}
@media only screen and (max-width: 320px) {
header {
    width: 100%;
    display: block;
    position: fixed;
    max-height: 50px;
    background-color: white;
    top: 0; /* 固定する位置 */
    left: 0; /* 固定する位置 */
    right: 0;  /* 固定する位置 */
    overflow: hidden;
    text-align: center;
    padding: 6px;
    margin: 0 auto;
}
ul img{
    float:left;
    width:auto;
}
ul .logo img{
    max-width:120px;
    padding: 0;
}
ul .cv_button img{
    max-width: 154px;
    padding: 0;
}

#main {
    padding-top: 50px;
	margin: 0 auto;
	width: 100%;
}

}




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

.section_box {
    /*margin-bottom: 3em;*/
	overflow: hidden;
}

.section_box h3 {
    margin: 3em 0;
    text-align: center;
    position: relative;
    font-size: 150%;
}

/* -----------------------------------------------------------
	requirement
----------------------------------------------------------- */

@media only screen and (max-width: 767px) {
.youkou {
	width: 90%;
	margin: 0 auto;
}

  }

.youkou > ul > li {
    /*border: 1px solid #000;*/
}


li.re_title {
    padding: 0.5em;
    background: linear-gradient(-135deg, #D46366, #C42A23);
	color: #fff;
}

li.re_con {
    padding: 15px 7px 0px 0px;
    margin-bottom: 2em;
}
li.re_con2 {
    padding: 15px 7px 0px 0px;
}

.re_con > ul {
    margin-bottom: 2em;
}


.entry_btn {
	text-align: center;
}

.textthrough{  
  text-decoration: line-through;
}



/* -----------------------------------------------------------
	findoutmore
----------------------------------------------------------- */

.findoutbtn li {
    margin-bottom: 2em;
    overflow: hidden;
}

/* -----------------------------------------------------------
	faq
----------------------------------------------------------- */

.faq_box {
    max-width: 90%;
    margin: 0 auto;
}

.faq_box p {
    margin-bottom: 1em;
}

.faq_box > ul > li:first-child {
    font-weight: bold;
    margin: 2em 0 1em 0;
}

.faq_box > ul > li:first-child span {
    margin-right: 0.5em;
    /* background-color: red; */
    padding: 0.3em 0.4em;
    border-radius: 1.5em;
    background: linear-gradient(-135deg, #e6626b, #C42A23);
    color: #fff;
    font-weight: normal;
}

@media only screen and (min-width: 768px) {


  }



/* -----------------------------------------------------------
	training
----------------------------------------------------------- */

/* -----------------------------------------------------------
	daily schedule
----------------------------------------------------------- */



/* -----------------------------------------------------------
	daily schedule
----------------------------------------------------------- */

footer {
	background-color:#000;
}


/* -----------------------------------------------------------
	thanks
----------------------------------------------------------- */

#thanks {
	width: 90%
}

#thanks p {
    margin-bottom: 1em;
}


#thanks h3:before {
    position: absolute;
    content: '';
    top: 30%;
    left: 0px;
    border: solid;
    border-width: 0.5em 0 0.5em 0.9em;
    border-color: transparent transparent transparent #d6010f;
}
#thanks h3:after {
        position: absolute;
    content: '';
    top: 30%;
    border: solid;
    right: 0;
    border-width: 0.5em 0.9em 0.5em 0;
    border-color: transparent #d6010f transparent transparent;
}

#thanks h3 span{
    display: block;
    font-size: 75%;
}

/* -----------------------------------------------------------
	entry
----------------------------------------------------------- */
/*共通*/

div#entry h3 {
    margin-bottom: 1rem;
}

@media only screen and (min-width: 768px) {
div#entry h3 {
    margin-bottom: 1.5rem;
    }}
.entry_box {
    position: relative;
}

.step01,.step02,.step03,.goal{
    position: absolute;
    left: 26%;
}
@media only screen and (min-width: 768px) {
.step01,.step02,.step03,.goal{
    font-size: 2.5rem;
    }}
h4.entry_title {
    margin-bottom: 0.2rem;
}

small::before {
    content: "※";
}


/*STEP01*/
.step01 .entry_title {
    width: 100%;
    margin-left: 9%;
}
@media only screen and (min-width: 768px) {
.step01 .entry_title {
    margin-left: 90px;
}}

.step01 {
    top: 0.7%;
    display: flex;
    flex-flow: wrap;
}

@media only screen and (min-width: 768px) {
.step01 {
    top: 1.2%;
    
    }}

p.entry_blackbox {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 47%;
    margin: 0 1%;
    height: auto;
    color: white;
}
p.entry_blackbox::before {
  transform: skewX(-20deg);/*平行四辺形の角度*/
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: black;
}
p.entry_blackbox {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 47%;
    margin: 2% 1%;
    height: auto;
    color: white;
}

/*STEP02*/
.step02 {
    top: 4.5%;
}
@media only screen and (min-width: 768px) {
.step02 {
    top: 5.7%;
    
    }}

/*STEP03*/
.step03 {
    top: 8%;
}
@media only screen and (min-width: 768px) {
.step03 {
    top: 10.1%;
    
    }}

/*goal*/
.goal {
    top: 11.5%;
}
@media only screen and (min-width: 768px) {
.goal {
    top: 14.5%;
    
    }}
/*20260706追記 FV全体 */
.fv {
  position: relative;
  height: 61vh; /* 画面いっぱい */
  overflow: hidden;
}

.fv-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* ←ここで半分にする */
  object-fit: cover;
}

/* テキスト */
.fv-text {
  position: absolute;
  bottom: 5%; /* 下寄せ */
  right: 5%;
  left: auto;  /* ← 左指定をリセット */

  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.05em;

  text-align: right; /* ← 右寄せで整える */

  text-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

/* スマホ調整 */
@media screen and (max-width: 768px) {
.fv-text {
    font-size: 14px;
    bottom: 6%;
    right: 6%;
  }
}
/* 左上ラベル */
/* ラベル全体 */
.fv-label {
/*  position: absolute;*/
  top: 1%;
  left: 4%;text-align: center;
  margin: 2% 0 4% 0;
}

/* メインテキスト */
.fv-label-main {
  display: inline-block;
  color: #333;

  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.05em;

  /* NIKE感の核 */
  font-style: italic;
  transform: skewX(-12deg);

  /* 余白ほぼなし */
  padding: 4px 0;

  /* 影で立たせる */
/*  text-shadow: 0 6px 20px rgba(0,0,0,0.8);*/
	position: relative; /* 追加（重要） */
}

/* 下ライン（フル幅＋グラデ） */
.fv-label-main::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;

  /* 赤 → 紫グラデーション */
  background: linear-gradient(90deg, #ff003c, #b87284);

  /* スピード感 */
  transform: skewX(-20deg);
}
@media screen and (max-width: 768px) {
  .fv-label-main {
    font-size: 16px;
    transform: skewX(-10deg);
  }
.fv {
  height: 41vh; /* 画面いっぱい */
}
}
/* デフォルト（PC）では改行しない */
.sp-br {
  display: none;
}

/* スマホだけ改行を有効に */
@media screen and (max-width: 768px) {
  .sp-br {
    display: inline;
  }
}

/* シンプルUI */
.sound-toggle {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 5;

  font-size: 18px;
  color: #fff;
  background: rgba(0,0,0,0.4);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}