@charset "UTF-8";
@import url("grid.css");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #000;
    --link-color: #666;
    --linkhover-color: #999;
    --back-color: #f7f7f7;
    --border-color: #ccc;
    --white-color: #fff;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
	box-sizing: border-box;/*高さ自動*/
}
a {
    display:block;
    color: var(--link-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}


    
/*メイン画像
-------------------------------------*/
.mainimg img {
    width: 100vw;
}

/*メインコンテンツ
-------------------------------------*/
main {
    margin: 5rem 0 0 0;
}
section {
	margin: 5rem 0;
	/*padding: 3rem 0;*/
}
.gray-back {
	background-color: var(--back-color);
}

/*キャッチコピー
-------------------------------------*/
.catch {
    text-align: center;
}
.catch h2 {
    padding-bottom: 1rem;
}
.under {
    border-bottom: 0.4rem solid var(--base-color);
    padding:0 1rem 1rem 1rem;
}
.center {
	text-align: center;
	margin-bottom: 4rem;
}



/*フッター
-------------------------------------*/
footer {
    background-color: var(--back-color); 
    padding: 5rem 0;
}
footer h4 {
    border-bottom: 3px solid var(--border-color);
}



/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: var(--base-color);
}
.copyright a {
    color: var(--white-color);
    text-decoration: none;
	display: inline;
}



/*-------------------------------------
ワナビーワーク特別授業LP　スマホ
-------------------------------------*/
html { scroll-behavior: smooth;}
header{
	background-color: #25677a;
	margin:0;
	padding:0;
}

@media screen and (max-width: 768px){
.pc{
	display: none !important;
}
}


@media screen and (max-width: 390px){
/*.sp_br{
	display: none !important;
}*/
}
.center_img{
	display: block;
	margin: auto;
	    text-align: center;
}

p {
    margin-top: 0;
    padding: 0 20px;
}

a{
	color: #1e647b;
}
a:hover {
    color: #1e647bc7;
}

h1{ 
	font-size: 2.4rem;
    line-height: 1.5;
   /* letter-spacing: -.05rem;*/
    font-weight: 600;
	text-align: center;
	color: #000;
	padding: 20px;
}

h2{
	font-size: 1.5em;
	font-weight: 600;
	text-align: center;
	margin: 20px;
}
h3{
    color: #fff;
    font-size: 1.3em;
    font-weight: 500;
    text-align: center;
    /* display: block; */
    padding: 10px;
	margin-right: 20px;
	margin-left: 20px;
    background-color: #1e647b;
}

h4 {
    font-size: 2.2rem;
    line-height: 1.35;
    /*letter-spacing: 0.08rem;*/
    font-weight: 600;
    text-align: center;
	margin: 20px;
}

h5{ 
	font-size: 1.8rem;
    line-height: 1.5;
   /* letter-spacing: -.05rem;*/
    font-weight: 600;
	text-align: center;
	margin: 20px;
}

main{
	margin: 0;
}

.p20{
	padding: 20px;
}
span{
	color: #e95755;
	font-weight: 600;
}

.w60{
	width: 60%;
	margin: 0 auto;
}

.w90{
	width: 90%;
	margin: 0 auto;
}

.m20{
	margin: 20px;
}
.m-top100{
	margin-top: 100px;
}

figure{
	width: 60%;
	margin: 0 auto;
}

figure img{
	margin: 40px 0;
}
figcaption{
	text-align: center;
}

.green{
	color: #25677a;
}

.fb{
	font-size:1.5em;
}


/*ファーストビュー
-------------------------------------*/
.section1{　/* FVにピッタリくっつける */
	margin: 0 !important;
    padding: 0; 
}
.fv_area {
  position: relative;
  width: 100%; /* divの幅に対する割合 */
}

.fv_area img{ /* FVにピッタリくっつける */
vertical-align:middle;
}

.fv_area_ruikei {

    position: absolute;
    left: 50%;
    top: 70%;
    transform: translate(-50%,-50%);
    box-sizing: border-box;
    padding: 50px;
}

.fv_area_cta {

  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  padding: 25px;

}

.fv_area_date {

   position: absolute;
    left: 50%;
	/*top: 83%;*/
    top: 88%;
    transform: translate(-50%,-50%);
    padding: 25px;
}


.fv_area_cam {

  position: absolute;
  left: 50%;
  /*top: 91%;*/
  top: 97%;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  padding: 25px;  
}

.text_large{
	font-size: 1.3em;
}

/*CTAボタン
-------------------------------------*/

.cta{
	
    padding: 50px 0;
    background-color: #f2f2f2;
	}

.bt_cta a{
	position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px auto;
    max-width: 90%;
    padding: 20px 40px;
    color: #000;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #FFD814;
    border-color: #FCD200;
    filter: drop-shadow(0px 2px 4px #777);
    border-radius: 3px;
}

.bt_cta_fv_sp a{
    position: absolute;
    left: 5%;
    top: 73%;
    /*transform: translate(-50%,-50%);*/
    box-sizing: border-box;
    padding: 25px;
    padding: 20px 50px;
    color: #000;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #FFD814;
    border-color: #FCD200;
    filter: drop-shadow(0px 2px 4px #1e3c4c);
    border-radius: 3px;
    width: 90%;

}

.bt_cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
.bt_cta a:after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-48%);
    position: absolute;
    top: 48%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}



.bt_cta_fv_sp a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}


.bt_cta_fv_sp a:after {
    content: '';
    width: 10px;
    height: 10px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-48%);
    position: absolute;
    top: 48%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}


/*追従CTA*/
.fixed{
 position: fixed;
 bottom: 0px;
	z-index: 9999;
	width: 100%;
	margin: auto;
	background-color: #1e647b;
    opacity: 95%;
}



.date{
	font-size: 1.1em;
    font-family: YakuHanJP,futura;
    color: #000;
    text-align: center;
	font-feature-settings: "palt";

}




/*section6　受講者数
-------------------------------------*/
.section6 p{
	margin-top: 20px;
}



/*section8体験授業の内容と流れ
-------------------------------------*/

.first_mark{
	width: 25px;
	margin: 0 10px;
	vertical-align: middle;
}

/*section9 マーケティングとは
-------------------------------------*/
.yasasiku{
	font-size: 1.3em;
	font-weight:600;
	text-align: center;
	margin-bottom: 20px;
}

.column{
		width: 80%;
		margin: 20px auto;
	display: block;
	}

/*section10注目されている理由
-------------------------------------*/

.flex_text-box {display: flex;
	margin-top: 20px;/* フレックスボックスにする */
}

.flex_text-item{
	flex-shrink: 2;  /* 幅指定 */
}

.circle_sp{
	width: 80%;
	margin-left: 20%;
	
}


/*section12講師紹介
-------------------------------------*/
.instructor{
	background-color: #f2f2f2;
	padding: 20px;
	margin: 20px auto;
    width: 100%;
}
.kousi_img{
	width: 50%;
	margin-top: 20px;
}

.kousi_name span{
	font-size: 1.0em;
	margin: 0;
	color:#000;
}
.instructor .center{
	margin:1rem 0;
}
.instructor .kousi_name{
	line-height: 1.7rem;
}

/*WWベネフィット
-------------------------------------*/
#ww_benefit{
	margin: 0;
}

/*WW benefit
-------------------------------------*/
.ww_benefit p{
	width: 100%;
	font-size:1.0em;
	text-align: left;
	margin-top: 0px;
	padding-top: 20px;
}

.ww_benefit .benefit{
		font-size:1.6em;
		text-align: center;
		width: 100%;
	}

.ww_benefit img{
		width: 60%;
	margin: auto;
	}
	
.benefit_back{
	background-color: #efeae7;
	padding:40px 0;
}

/*WWマーケター
-------------------------------------*/
.review{
	border: 1px solid #1e647b;
	padding: 20px 10px;
	margin: 10px auto;
    width: 90%;
	background-color: #fff;
}

.review_img{
	/*margin-top: 20px;*/
	width: 30%;
}
.review_midasi{
	color: #000;
	font-size: 1.3em;
	padding-top: 20px;
	font-weight: bold;
}

.naka {
	  display: flex;
	  width: auto;
	align-items: center;
	}
	.naka .naka_ill {
  flex: 0 0 100px;
}
	.naka .naka_text {
	  flex: 1;
	}
	.review_img {
    /*margin-top: 20px;*/
    width: 100%;
	}


/*WW企業の声
-------------------------------------*/



.voice_img{
	/*margin-top: 20px;*/
	width: 30%;
}
.voice_midasi{
	color: #000;
	font-size: 1.3em;
	padding-top: 20px;
	font-weight: bold;
}
.ww_h3{
	background-color: #5c9fba;
	margin: 80px auto 40px;
	
	
}
.ww_voice h3{
	margin-left:0px;
}


/*section14Q&A
-------------------------------------*/
.flex_text-box_q {display: flex;  /* フレックスボックスにする */
	padding: 20px 20px 0 20px;
	align-items: center; /* 要素のセンター揃え */
}
.flex_text-box_a {display: flex;  /* フレックスボックスにする */
padding: 10px 20px 10px 30px;
align-items: center; /* 要素のセンター揃え */

}

.flex_text{
	/* flex-shrink: 1;  幅指定 */
	width: 90%;
}
.icon_q{
	padding-right: 10px;
	width: 60px;
}
.icon_a{
	padding-right: 10px;	
		width: 60px;
}

.faq{
	border-bottom: 2px dotted #ccc;
	width: 90%;
	margin: auto;
}

/*WW benefit
-------------------------------------*/
.ww_benefit p{
	width: 100%;
	font-size:1.0em;
	text-align: left;
	margin-top: 0px;
	padding-top: 20px;
}

.ww_benefit .benefit{
		font-size:1.6em;
		text-align: center;
		width: 100%;
	}

.ww_benefit img{
		width: 60%;
	margin: auto;
	}
	
.benefit_back{
	background-color: #efeae7;
	padding:40px 0;
}

.wrap_kinari{
	background-color: #f5f2e9;
	padding: 20px 0;

}
.card_white{
	width: 90%;
	background-color: #fff;
	padding: 10px;
    margin: 20px;
    box-shadow: 0 2px 20px 5px rgba(0, 0, 0, .1);
}
.topick{
	padding: 10px 0 20px;
}
.topick_l{
	color: #e95755;
    font-size: 2.2em;
    font-weight: 600;
    text-align: center;
}


	.card_white img{
	width:60%;
}

/*申し込みフォーム*/
#form{
	text-align: center;
	margin-top: 40px;
}
.wwform_text{
	font-size: 1.0em;
	margin: 20px 0;
}




	
/*footer
-------------------------------------*/
footer{
	background-color: #25677a;
	text-align: center;
	padding: 2rem 0 1rem;
}

footer p{
	margin-bottom: 0px;
	color: #fff;
	font-size: 0.8em;
}

footer p a{
	color: #fff;
}

.footer-sns{
	display: flex;
    flex-direction: row;
    padding: 0;
    width: 50%;
    margin: 20px auto;
    align-items: center;
}

/*.sns{
	display: flex;
    align-items: center;
	margin: auto;
}
.sns img{
	margin: 5px;
	width: 45%;
}*/
.col p a{
	color: #fff;
}
.copyright{
	background-color: #25677a;
	color: #fff;
	text-align: center;
}




/*.iframe-wrap {
  position: relative;
  width: 100%;
  padding: calc(1600 / 1300 * 100%) 0 0;
}
 
.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}*/


/*テキスト表示エフェクト*/
.fadeUpTrigger{
opacity: 0;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
	

	
	
}


/*追従CTA*/



/*-------------------------------------
wannabe academy　体験授業LP　pc　767px以上に対応
-------------------------------------*/
@media screen and (min-width: 767px){
	
	
	.sp{display: none!important;}
	.sp_br{display: none!important;}
	.w30{width:30%;}
	.w50{width:50%;}
	.w60{width:60%;}
	.center_img {text-align: center;}
	h1{padding: 80px 0 0 0;}
	/*p{font-size: 20px; text-align: center;width: 60%;margin:auto;padding-top: 40px;}*/
	h2{font-size: 2.5em;text-align: center;}
	h3{font-size: 2.0em;width: 80%;margin: auto;display: block;}
	h4 {font-size: 2.0em;margin: 60px auto 30px;}
	.pc_w60{width:60%;margin: auto;}
	section{margin: 4em 0;}
	.text_large{font-size: 1,8em;font-weight: 600;}
	.section_m-top_0{margin-top:0;}
	

	/*CTAボタン
-------------------------------------*/
	.cta{
   /*margin: 40px auto;*/
    padding: 50px 0;
    background-color: #f2f2f2;
		
	}
	
	.cta p{
		padding: 0;
	}

.date{
	font-size: 1.1em;
    font-family: YakuHanJP,futura;
    color: #000;
    text-align: center;
	font-feature-settings: "palt";
}
	
	.bt_cta a{
		width: 40%;
	}
	
	
	

	
/*セミナー
-------------------------------------*/
	/*.section4 img{
		width: 30%;
	}*/
	.section4 .row {
	width: 80%;
    margin: auto;
	}
	.section7 table{
		margin: auto;
	}
	
	.notion {
    margin: auto;
	padding-top: 40px;
		text-align: left;
	}
	

	/*Webマーケティングとは
-------------------------------------*/	
	
	.column{
		width: 60%;
		margin: auto;
	}
	.section9 p{
		/*text-align:left;*/
		width: 100%;
	}
	.section9 p .yasasiku{
		text-align: center !important;
		margin-bottom: 20px;
	}
	.l_text{
		text-align: left !important;
	}
.section9 .row {	
	width: 60%;
	margin: 0 auto 60px;
	
}
	



		/*注目の理由
-------------------------------------*/	
	.flex_text-box_pc {display: flex;
	margin-top: 20px;/* フレックスボックスにする */
		    width: 90%;
}


.flex_text_right{
	flex-shrink: 2;  /* 幅指定 */
}

.flex_text_left{
	margin-left: 20%;
	
}
	
	.flex_text-item p{
	text-align: left; 
    width: 80%;
    margin-left: 100px;
    padding-top: 0px;	
	}
	

.circle_pc{
	width: 80%;
	margin-left: 80%;
}
	
	/*講師紹介
-------------------------------------*/
	.section12 .row{
		width: 100%;
		margin: auto;
	}
	.section12 p{
		font-size: 16px;
		width: 100%;
		padding-top: 0px;
		text-align: left;
	}
	.instructor {
		width: 70%;
	}
	
	.instructor .col{
		padding-left:30px;
	}
	.green{
		font-weight: normal;
	}
	
	.ww_benefit_midashi{
		font-size: 20px;
	}

	
	
	/*マーケター
-------------------------------------*/
	
	
	.review p{
		font-size:16px;
		width: 100%;
		padding-top: 0px;
		text-align: left;
	}
	
	.kousi_img {
		width: 80%;
		margin-top: 0px;
	}
	
	.marketer{
		width:80%;
		margin: auto;
	}
	.naka {
	  display: flex;
	  width: auto;
	align-items: center;
	}
	.naka .naka_ill {
  flex: 0 0 100px;
}
	.naka .naka_text {
	  flex: 1;
	}
	.review_img {
    margin-top: 20px;
    width: 100%;
	}
	
		/*マーケター
-------------------------------------*/
	.ww_benefit_midashi{
		font-size: 20px;
	}
		.card_white img{
	width:100%;
}

	
		/*FAQ
-------------------------------------*/
	.section14 .faq{
		width: 80%;
		margin: auto;
		font-size: 20px;
	}
	#pagetop {
    position: fixed;
    bottom: 15px;
    /*right: 15px;*/
	}
	
	

	
	/*特徴
-------------------------------------*/
	
	.card_text{
		width: 100%;
				text-align: left;
	
	}
	.topick_l{
	color: #e95755;
    font-size: 2.2em;
    font-weight: 600;
    text-align: center;
	padding-top: 0px;
}
	.card_white img{
	width:100%;
}



.row .col.span-4 {
    flex: 0 0 33%;
	max-width: 33%;}
.topick .row{
	width: 80%;
    margin: auto;
}
	
	


/*申し込みフォーム*/
#form{
	text-align: center;
}
.wwform_text{
	font-size: 1.0em;
	margin-bottom: 20px;
	padding-top: 0px;
	width: 100%;
}

.iframe-wrap{
	width: 80%;
    margin: auto;
	}


	
.footer{
	background-color: #25677a;
	/*padding-top: 90px;
	padding-bottom: 80px;*/
}
.footer .footer_contents{
	width: 80%;
	display: flex;
	margin: 0 auto;
	justify-content: center
}
.footer .footer_contents .footer-left h3{
	color: #fff;
	font-weight: 400px;
	margin-bottom: 15px;
}
.footer .footer_contents .footer-left h2{
	color: #fff;
	font-weight: 700;
	margin-bottom: 40px;
}
.footer .footer_contents .footer-left p{
	color: #fff;
	font-weight: 400px;
	margin-bottom: 15px;
	line-height: 1.6;
}
.footer .footer_contents .footer-right h4{
	color: #fff;
	font-weight: 700px;
	margin-bottom: 25px;
}
.footer .footer_contents .footer-right .footer-sns{
	display: flex;
	align-items: center;
	    justify-content: center;
	
}
.footer .footer_contents .footer-right .footer-sns img{
	margin: 50px 25px;
	    width: 50%;
    margin: auto;
}

.footer .footer_contents .footer-right p{
	color: #fff;
	font-weight: 400px;
	line-height: 1.6;
	text-decoration:underline;
	text-decoration-color:#fff;
}
.footer .footer_contents .footer-right small{
	color: #fff;
	font-weight: 400px;
	line-height: 45px;
}
.footer p{
	margin-top:0px !important;
	padding-top: 0px;
	width: 100%;
	font-size: 0.8em;
	color: #fff;
}
.footer a{
	color: #fff;
}
.footer h5{
	color: #fff;
}

.hojokin{
		text-decoration:none;
	}
	


/*.iframe-wrap {
  position: relative;
  width: 100%;
  padding: calc(1800 / 1300 * 100%) 0 0;
}
 
.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}*/
	
	
/*-------------------------------------
Wannabe Work 追加CSS
-------------------------------------*/
.section2{
	background-color: #efeae7;
	padding:80px 0 10px;
}
	
	.section2 p{
	width: 80%;
}
.ww a{
	color:#666666;
}

.benefit_back{
	background-color: #efeae7;
	padding:40px 0;
}

.ww_benefit p{
	font-size:1.0em;
	text-align: left;
	margin-top: 0px;
	padding-top: 20px;
}

.ww_benefit .benefit{
		font-size:1.6em;
		text-align: center;
	}

.ww_benefit img{
		width: 60%;
	margin:auto;
	}
	
	.ww_voice{
	width: 60%;
	margin: auto;
}
	.ww_voice img{
		width:105px;
	}
	.ww_voice p{
		text-align: left;
	}
	
.ww_voice h3{
	background-color: #5c9fba;
	margin: 0px 40px;
	width:100%;
	
}
	.ww_seminar_detail{
		width: 80%;
		margin: auto;
	}

	

/*-------------------------------------
タブレット　768〜1057pxに対応
-------------------------------------*/
@media screen and (max-width: 1057px){

.bt_cta_fv a{
    padding: 10px 0px;
	}
section7 .row {
	width: 100%;}
.w60 {
    width: 90%;
	}
	
}


/*-------------------------------------
1920px以上のPCでのFV対応
-------------------------------------*/
@media screen and (min-width: 1920px){
	
.bt_cta_fv a {
max-width: 60%;
}
.fv_area_date_pc{
width: 19%;		
	}	
.fv_area_cam_pc{
width: 19%;			
left: 20%;
	}	
	
}

/*-------------------------------------
2024年1月改修
-------------------------------------*/	
	
.fv_area{
	background-color: #1f677f;
}