@charset "utf-8";
@media screen and (max-width: 1100px) {
/*
============================================================
無料体験会　コンテンツ　スマホ上書き
============================================================
*/
.sp{display: block;}
.pc{display: none;}
	
/* ---------------------------------------------------------
■ ベース
--------------------------------------------------------- */
img{
	width: 100%;
	height: auto;
}

body {
	background: url(../images/sp/lead_bg.jpg) no-repeat center 3%;
}

header {
	width: 100%;
	height: auto;
	float: left;
	background: url(../images/sp/head_bg.jpg) no-repeat top center;
	text-align: center;
	position: relative;
}
	
header img{
	max-width: 800px;
	margin-bottom: -6px;
}
	
header img.sanalogo{
	width: 22%;
	max-width: 170px;
	position: absolute;
	top: 10%;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	transform: translate(-50%,0);
	display: none;
}

a:hover img.sanalogo{
	-webkit-transform: translate(-50%,-2px);
	-moz-transform: translate(-50%,-2px);
	-ms-transform: translate(-50%,-2px);
	-o-transform: translate(-50%,-2px);
	transform: translate(-50%,-2px);
}

div#content_base {
	width: 100%;
	max-width: 800px;
	background: #fff;
}
	
footer {
	width: 100%;
	background: url(../images/sp/footer_bg.jpg) no-repeat bottom center;	
	height: auto;
	text-align: center;
}

footer div#footlogo {
	width: 100%;
	margin: 40px 0 30px;
}
	
footer div#footlogo img{
	width: 40%;
	height: auto;
	max-width: 312px;
}

.text_link{
	font-size: 100%;
}
/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */

#page-top a {
    background: url(../images/sp/btn_gotop_sp.png) no-repeat;
	width: 65px;
	height: 95px;
}

/* ---------------------------------------------------------
■ 見出し
--------------------------------------------------------- */
h1 {font-size: 18px;}
h3 {font-size: 14px;}

/* ---------------------------------------------------------
■ ライトボックス
--------------------------------------------------------- */
.pdg_25{
	padding: 0;
}
	
.lightbox p img{
	width: 100%;
	max-width: 560px;
}
.lightbox iframe{
	width: 100%;
	height: auto;
}
.lightbox p.tx{
	font-size: 12px;
	line-height: 22px;
}
.lightbox p.tx span.tit{
	font-size: 15px;
	line-height: 22px;
}
.lightbox h2.tit {
	font-size: 18px;
}
.youtube{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
	
/* ---------------------------------------------------------
■ リード
--------------------------------------------------------- */
#lead {
	width: 100%;
	background: url(../images/sp/head_02.jpg) no-repeat bottom #fff;
	background-size:contain;
	height: auto;
	position: static;
	padding: 3% 0 6%;
	margin-bottom: 4%;
}
#lead div.tx {
	width: auto;
	height: auto;
	margin: 0 4%;
	position: static;
	background: #fff;
}

#lead div.tx p.lead_01{
	padding-top: 15px;
	font-size: 14px;
	line-height: 26px;
}

#lead div.tx div.lead_02{
	width: 100%;
	height: auto;
	margin: 15px 0 0 0;
}

#lead div.tx div.lead_02 p{
	font-size: 14px;
	line-height: 26px;
}
	
/* ---------------------------------------------------------
■ プログラム
--------------------------------------------------------- */
	
/* プログラム00_体験会スタート */
#pro_00 {
	z-index: 50;
}

#pro_00 img.img_il{
	z-index: 100;
	position: absolute;
	bottom: -8%;
	left: 6%;
	width: 18%;
	height: auto;
}
		
#pro_01 {
	background: url(../images/sp/pro_01_bg.jpg) no-repeat;
}

#pro_02 {
	background: url(../images/sp/pro_02_bg.jpg) no-repeat;
}

#pro_03 {
	background: url(../images/sp/pro_03_bg.jpg) no-repeat;
}
	
#pro_04 {
	background: url(../images/sp/pro_04_bg.jpg) no-repeat;
}

#pro_05 {
	background: url(../images/sp/pro_05_bg.jpg) no-repeat;
}

#pro_06 {
	background: url(../images/sp/pro_06_bg.jpg) no-repeat;
	margin-bottom: -5px;
}
	
#pro_07 {
	background: none;
}

/* プログラム共通 */	
	
#pro_00,#pro_01,#pro_02,#pro_03,#pro_04,#pro_05,#pro_06,#pro_07 {
	width: 100%;
	height: auto;
	background-size: contain;
	text-align: center;
	position: relative;
}
	
#pro_01 .btn_01,#pro_02 .btn_02,#pro_03 .btn_03,#pro_04 .btn_04,
#pro_05 .btn_05,#pro_06 .btn_06,#pro_07 .btn_07{
	margin: 0 auto;
	position: relative;
	width: 32%;
	height: 32%;
	max-width: 240px;
}

/*.pro_img{
	padding-top: 40%;
}*/

	
/* ---------------------------------------------------------
■ バウンドするリンクボタン
--------------------------------------------------------- */
#pro_01 .btn_01 .animationBtn,#pro_02 .btn_02 .animationBtn,
#pro_03 .btn_03 .animationBtn,#pro_04 .btn_04 .animationBtn,
#pro_05 .btn_05 .animationBtn,#pro_06 .btn_06 .animationBtn{
	top: 0;
	left: 0;
	width: 34%;
	height: auto;
	margin: 64% 0 0 70%;
	max-width: 69px;
}
	
/* ---------------------------------------------------------
■ コメント
--------------------------------------------------------- */
#com_01 {
	width: 100%;
	background: url(../images/sp/com_bg_01.jpg) no-repeat top;
	background-size:contain;
	height: auto;
	position: static;
}

#com_01 .tx{
	width: auto;
	height: auto;
	margin: 6% 4% 0;
	position: static;
}

#com_01 .tx p{
	font-size: 16px;
	line-height: 28px;
	margin-top: 15px;
}
#com_01 .tx p img{
	width: 80%;
	height: auto;
	margin-bottom: -8px;
	max-width: 340px;
}

#com_02 {
	width: 100%;
	background: none;
	height: auto;
	position: static;
	margin: 4% 0 6%;
}

#com_02 .tx{
	width: auto;
	height: auto;
	margin: 0 4%;
	position: static;
}

#com_01 .tx p,
#com_02 .tx p{
	font-size: 14px;
	line-height: 24px;
	margin-top: 15px;
	padding: 0;
}
	
#com_02 .tx p img{
	width: 40%;
	float: left;
	margin: 0 15px 0 0;
	max-width: 180px;
}


/* ---------------------------------------------------------
■ バナー
--------------------------------------------------------- */
#bnr {
	background: url(../images/sp/com_bg_03.jpg) no-repeat top;
	background-size:contain;	
	text-align: center;
	padding-top: 17%;
}
#bnr img{
	width: 92%;
	height: auto;
}
	
/*#bnr .nofade{
	visibility: visible;
}*/
}