@charset 'utf-8';

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

/* style
------------------------- */
#smartBody{
	background:url(http://cdfront.tower.jp/~/media/Images/Tol/pc/site/cl_hajimete/bgsp.jpg) repeat top left;
}
#wrapper {
	width: 100%;
	font-size:12px;
}
/* menupage
------------------------- */
.menupage .logo{
	width:180px;
	margin:10px auto;	
}
.menupage .logo img{
	width:180px;
	height:auto;
}
.note{
	float:none;
	margin:-10px 10px 0;
	width:130px;
}
.note img{
	width:130px;
}

/* * animationList(menupage)
------------------------- */
#animationList {
	width:95%;
	margin:0 auto;
}
#animationList li {
	width: 29%;
	height: auto;
	padding: 2%;
}
#animationList li span {
	width: 100%;
	height: auto;
}
#animationList .popup-link img {
	width: 100%;
	height: auto;
}

/* popup
------------------------- */
.popup-block h1{
	margin-top:10px;
	font-size:110%;
}
.popup-block h1 img{
	width:30%;
	height:auto;
	margin-right:5%;
}
.popup-block h1 span{
	width:65%;
	margin-top:0;
}
.popup-block{
	padding:20px;
}
.popup-block p{
	line-height:1.4;
}
.popup-block .l_area{
	float:none;
	width:200px;
	margin:0 auto 20px;
}
.popup-block .l_area img{
	width:200px;
}
.popup-block .r_area{
	float:none;
	width:100%;
}
.popup-block .osusume_l{
	float:none;
	width:100%;
}
.popup-block .osusume_r{
	float:none;
	width:170px;
	margin:0 auto;
}
.popup-block .osusume_r img{
	width:170px;
}
.popup-block table th{
	width:30%;
}

/* shake
------------------------- */
.shake {
    -o-animation:shake 0.5s linear infinite;
    -moz-animation:shake 0.5s linear infinite;
    -webkit-animation:shake 0.5s linear infinite;
    -ms-animation:shake 0.5s linear infinite;
    animation:shake 0.5s linear infinite;
}
@-o-keyframes shake {
    0% { transform:translate(2px, 1px) rotate(0deg); }
    10% { transform:translate(-1px, -2px) rotate(-1deg); }
    20% { transform:translate(-3px, 0px) rotate(1deg); }
    30% { transform:translate(0px, 2px) rotate(0deg); }
    40% { transform:translate(1px, -1px) rotate(1deg); }
    50% { transform:translate(-1px, 2px) rotate(-1deg); }
    60% { transform:translate(-3px, 1px) rotate(0deg); }
    70% { transform:translate(2px, 1px) rotate(-1deg); }
    80% { transform:translate(-1px, -1px) rotate(1deg); }
    90% { transform:translate(1px, 3px) rotate(0deg); }
    100% { transform:translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes shake {
    0% { transform:translate(2px, 1px) rotate(0deg); }
    10% { transform:translate(-1px, -2px) rotate(-1deg); }
    20% { transform:translate(-3px, 0px) rotate(1deg); }
    30% { transform:translate(0px, 2px) rotate(0deg); }
    40% { transform:translate(1px, -1px) rotate(1deg); }
    50% { transform:translate(-1px, 2px) rotate(-1deg); }
    60% { transform:translate(-3px, 1px) rotate(0deg); }
    70% { transform:translate(2px, 1px) rotate(-1deg); }
    80% { transform:translate(-1px, -1px) rotate(1deg); }
    90% { transform:translate(1px, 3px) rotate(0deg); }
    100% { transform:translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes shake {
    0% { transform:translate(2px, 1px) rotate(0deg); }
    10% { transform:translate(-1px, -2px) rotate(-1deg); }
    20% { transform:translate(-3px, 0px) rotate(1deg); }
    30% { transform:translate(0px, 2px) rotate(0deg); }
    40% { transform:translate(1px, -1px) rotate(1deg); }
    50% { transform:translate(-1px, 2px) rotate(-1deg); }
    60% { transform:translate(-3px, 1px) rotate(0deg); }
    70% { transform:translate(2px, 1px) rotate(-1deg); }
    80% { transform:translate(-1px, -1px) rotate(1deg); }
    90% { transform:translate(1px, 3px) rotate(0deg); }
    100% { transform:translate(1px, -2px) rotate(-1deg); }
}
@-ms-keyframes shake {
    0% { transform:translate(2px, 1px) rotate(0deg); }
    10% { transform:translate(-1px, -2px) rotate(-1deg); }
    20% { transform:translate(-3px, 0px) rotate(1deg); }
    30% { transform:translate(0px, 2px) rotate(0deg); }
    40% { transform:translate(1px, -1px) rotate(1deg); }
    50% { transform:translate(-1px, 2px) rotate(-1deg); }
    60% { transform:translate(-3px, 1px) rotate(0deg); }
    70% { transform:translate(2px, 1px) rotate(-1deg); }
    80% { transform:translate(-1px, -1px) rotate(1deg); }
    90% { transform:translate(1px, 3px) rotate(0deg); }
    100% { transform:translate(1px, -2px) rotate(-1deg); }
}
@keyframes shake {
    0% { transform:translate(2px, 1px) rotate(0deg); }
    10% { transform:translate(-1px, -2px) rotate(-1deg); }
    20% { transform:translate(-3px, 0px) rotate(1deg); }
    30% { transform:translate(0px, 2px) rotate(0deg); }
    40% { transform:translate(1px, -1px) rotate(1deg); }
    50% { transform:translate(-1px, 2px) rotate(-1deg); }
    60% { transform:translate(-3px, 1px) rotate(0deg); }
    70% { transform:translate(2px, 1px) rotate(-1deg); }
    80% { transform:translate(-1px, -1px) rotate(1deg); }
    90% { transform:translate(1px, 3px) rotate(0deg); }
    100% { transform:translate(1px, -2px) rotate(-1deg); }
}

/* sns
------------------------- */
#socialParts{
	width:100%;
	margin:15px 15px 0;
}
.social{
	width:95%;
	height:auto;
	margin:0 auto 20px;
}
.social div{
	float:left;
	margin:0 5px;
}
.social div br{
	clear:none !important;
}

/* intro
------------------------- */
.intro .logo{
	width:230px;
	margin:20px auto;
}
.intro01, .intro02, .intro03, .intro04{
	width:90%;
	margin:0 auto 20px;
}
.intro .logo img{
	width:230px;
}
.intro01 img, .intro02 img, .intro03 img, .intro04 img{
	width:100%;
}
.intro_jump{
	width: 80%;
}
.intro_jump{
	margin-bottom:30px;
}

/* homebtn
------------------------- */
.homebtn{
	width: 80%;
}

/* privacy
------------------------- */
.privacy{
	text-align:center;
	margin-bottom:30px;
}
.privacy p{
	line-height:1.4;
}
.privacy a{
	color:#ffffff;
	text-decoration:underline;
}
.privacy a:hover{
	text-decoration:underline;
}

/* copyright
------------------------- */
.copyright{
	text-align:center;
}

/* js不具合解消
------------------------- */
#animationList{
	display:none;
}

}