@charset "utf-8";

@media screen and (min-width:701px) {
	
	body {
	color: #333;
	background: #fff url(../img/body-bg.gif) repeat-x 0 0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 0;
}

#wrapper {
	width: 840px;
}

.nodisplay-pc {
	display: none;	
}


#header {
	width: 840px;
	height: 70px;
	margin: 0px;
}
#header h1 {
	margin: 0px 0px 0px 20px;
	float: left;
	height: 70px;
	width: 373px;
}
#header h1 a {
	display: block;
	margin: 0px;
	text-indent: -9999em;
	height: 70px;
	width: 373px;
	background: url(../img/top-left.gif) no-repeat;
}

#header .tel{
	text-indent: -9999em;
	margin: 0px 20px 0px 0px;
	background: url(../img/top-tel.gif) no-repeat 0px 0px;
	height: 70px;
	width: 247px;
	float: right;
}
#container {
	margin: 0px;
	width: 840px;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
	background: #FFF;
}
#container #nav {
	margin: 0px;
	padding: 0px;
}
#container #nav li {
	display: inline;
	float: left;
}
#container #nav a {
	display: block;
	text-indent: -9999em;
	margin: 0px;
	height: 35px;
	width: 168px;
	background: url(../img/container-nav.gif) no-repeat 0px 0px;
}
#container #nav a.home { background-position: 0 0; }
#container #nav a.voice { background-position: -168px 0px; }
#container #nav a.compare { background-position: -336px 0px; }
#container #nav a.try { background-position: -504px 0px; }
#container #nav a.inquiry { background-position: -672px 0px; }

#container #nav a.home:hover { background-position: 0px -35px; }
#container #nav a.voice:hover { background-position: -168px -35px; }
#container #nav a.compare:hover { background-position: -336px -35px; }
#container #nav a.try:hover { background-position: -504px -35px; }
#container #nav a.inquiry:hover { background-position: -672px -35px; }
#container #topBanner {
	text-indent: -9999em;
	margin: 0px;
	height: 334px;
	width: 840px;
	background: url(../img/top-ca_r1_c1.jpg) no-repeat;
}




#sidebar {
	width: 200px;
	height: auto;
	background: #eee url(../img/sidebar-bg.jpg) no-repeat left bottom;
	float: right;
}
#sidebar .nav {
	margin: 0px 0px 20px;
	width: 200px;
}
#sidebar .nav dt {
	background: url(../img/sidebar-nav-dt.gif) no-repeat;
	margin: 10px auto 10px;
	height: 15px;
	width: 81px;
	text-indent: -9999px;
}
#sidebar .nav dd {
	width: 180px;
	margin: 0px auto;
	display: block;
}


.side-menu {
	list-style: none;
	margin: 0px;
	width: 180px;
}
.side-menu li {
	display: inline;
	margin: 0px;
	height: 35px;
	width: 180px;
}
.side-menu li a {
	background: url(../img/sidebar-nav-ul.gif) no-repeat;
	height: 35px;
	width: 180px;
	text-indent: -9999em;
	text-decoration: none;
	display: block;
	margin-bottom: 5px;
}


#faq a { background-position: 0 0; }
#law a{ background-position: 0 -70px; }  
#privacy a{ background-position: 0 -105px; }  
#about a{ background-position: 0 -35px; }  
#inquiry a{ background-position: 0 -140px; }  

.side-menu li a:hover{
	text-decoration: none;
	background: url(../img/sidebar-nav-ul.gif) no-repeat;
}

#faq a:hover{ background-position: -180px 0; }
#law a:hover{ background-position: -180px -70px; }  
#privacy a:hover{ background-position: -180px -105px; }  
#about a:hover{ background-position: -180px -35px; }  
#inquiry a:hover{ background-position: -180px -140px; }  

#sidebar .manga-banner {
	margin: 0px auto 10px;
	height: 318px;
	width: 188px;
}
#sidebar .manga-banner a {
	display: block;
	height: 318px;
	width: 188px;
	background: url(../img/manga-banner.jpg) no-repeat 0px 0px;
}


.yurai {
	border: 3px solid #09F;
	padding: 5px;
	margin: 0px 10px;
	background: #FFC;
	height: auto;
}

.abc {
	font-size: 12px;
	color: #039;
	font-weight: bold;
	border-style: dashed;
	border-width: thin;
	text-align: center;
	display: block;
}

#sidebar .yurai .yurai-title {
	font-weight: bold;
	color: #F60;
}#container .top-contents {
	float: left;
	width: 640px;
}
#container .top-contents .top-movie {
	position: relative;
	margin-top: 95px;
	margin-left: 60px;
}
.top-movie .douga {
	font-size: 18px;
	font-weight: bold;
	text-decoration: underline;
	display: block;
	padding-bottom: 22px;
}
#container .top-contents .top-po {
	height: 445px;
	width: 552px;
	margin-left: 60px;
	margin-top: 115px;
}

.poitop {
	width: 100%;
}

#container .poi {
	clear: both;
	text-align: center;
	background: url(../img/point.jpg) no-repeat 0px 0px;
	height: 312px;
	width: 585px;
	margin-top: 69px;
	margin-bottom: 69px;

}
#container #problem {
	margin: 0px 0px 20px;

	width: 840px;
}

#container h2 {
	text-indent: -9999em;
	height: 60px;
	width: 800px;
	margin-top: 0px;
	margin-bottom: 30px;
	clear: both;
	background: url(../img/top-container-h2.gif) no-repeat 0px 0px;
}
#problem h2 {
	background-position: 0px 0px;	
}
#container .base {
	margin-bottom: 30px;
	margin-top: 0px;
	width: 760px;
}
#container #problem img {
	margin-bottom: 30px;
	margin-left: 20px;
	float: right;
}
#container #problem .orange {
	color: #F5851F;
	font-size: 120%;
}
#container #naturally {
	width: 840px;
	margin-bottom: 50px;
}

#naturally h2 {
	background-position: 0px -60px;
}

#container img.left-img {
	float: left;
	margin-right: 20px;
	margin-bottom: 30px;
}
#naturally .effect {
	margin-top: 0px;
	margin-bottom: 50px;
	width: 728px;
	border: 1px solid #156793;
	background: #197db5;
	clear: both;
}
#naturally .effect dt {
	background: url(../img/top-container-naturally-effect-dt.gif) no-repeat -1px -1px;
	text-indent: -9999em;
	margin: 0px;
	height: 80px;
	width: 728px;
}
#naturally .effect dd {
	width: 638px;
	margin-top: 20px;
	margin-bottom: 30px;
}

#naturally .effect dd p {
	margin: 0px 0px 30px;
	color: #FFF;
}
#naturally .effect p strong {
	color: #FFF;
}
#naturally .effect .shiro {
	margin-bottom: 10px;
	width: 638px;
	color: #FFF;
}
#naturally .effect .s_ri {
	font-weight: bold;
	color: #FFF;
}
#naturally h3 {
	height: 60px;
	width: 800px;
	text-indent: -9999em;
	clear: both;
	margin-top: 0px;
	margin-bottom: 30px;
	background: url(../img/top-container-naturally-h3.gif) no-repeat 0px 0px;
}
#naturally h3.fe01 {
	background-position: 0px 0px;
}

#naturally .reason {
	background: #ddecf4;
	width: 390px;
	float: left;
	margin-left: 20px;
	margin-top: 0px;
	margin-bottom: 30px;
	
}
#naturally .reason dt {
	margin: 0px;
	text-indent: -9999em;
	height: 84px;
	width: 390px;
	background: url(../img/top-container-naturally-reason-dt.gif) no-repeat 0px 0px;
}
#naturally .reason.re01 dt {
	background-position: 0px 0px;
}
#naturally .reason dd {
	padding: 20px;
	border-right: 1px solid #dbe1e5;
	border-bottom: 1px solid #dbe1e5;
	border-left: 1px solid #dbe1e5;
	border-top-style: none;
	font-size: 85%;
	background: #ddecf4;
	width: 348px;
	margin: 0px;
	border-top-color: #dbe1e5;
	min-height: 1050px;
}
#naturally .reason.re01 {
}
#naturally .syou {
	font-size: 10px;
	padding-left: 14px;
}
#naturally .reason dd img {
	display: block;
	margin-top: 20px;
	margin-bottom: 5px;
	width: 321px;
	height: 239px;
}


#naturally .reason.re02 dt {
	background-position: 0px -85px;
}
#naturally h3.fe02 {
	background-position: 0px -60px;
}
#container img.right {
	float: right;
	margin-bottom: 20px;
	margin-left: 30px;
}
#naturally .mizu_left {
	float: left;
	margin: 20px;
	width: 321px;
}
#naturally .mizu_right {
	float: left;
	width: 450px;
	margin-top: 20px;
}

#naturally h3.fe03 {
	background-position: 0px -120px;
	margin-top: 20px;
}
#naturally .compare {
	background: url(../img/hikaku.jpg) no-repeat 0px 0px;
	height: 265px;
	width: 760px;
	text-indent: -9999em;
	margin-top: 0px;
	margin-bottom: 0px;
	clear: both;
	border-bottom: 1px solid #CCC;
}

#black {
	width: 840px;
	margin-bottom: 50px;
}

#black h2 {
	background: url(../img/ketten.jpg) no-repeat 0px 0px;
}
.guide {
	display: block;
	margin-bottom: 40px;
	width: 400px;
}


.guide a {
	display: block;
	margin-top: 0px;
	margin-bottom: 15px;
	text-indent: -9999em;
	background: url(../img/container-guide.gif) no-repeat 0px 0px;
}
.guide .compare {
	background-position: 0px 0px;
	width: 300px;
	height: 38px;
}

.guide .try {
	background-position: 0px -38px;
	width: 400px;
	height: 50px;
}
.guide .compare:hover { background-position: -400px 0px; 
}
.guide .try:hover { background-position: -400px -38px;
}
#postscript {
	width: 400px;
	margin-top: 0px;
	margin-bottom: 50px;
}
#postscript dt {
	margin: 0px;
	text-indent: -9999em;
	height: 50px;
	width: 400px;
	background: url(../img/top-container-postscript-dt.gif) no-repeat 0px 0px;
}
#postscript dd {
	padding: 10px 20px 20px;
	font-size: 85%;
	background: #ddecf4;
	border-top: 1px none #dbe1e5;
	border-right: 1px solid #dbe1e5;
	border-bottom: 1px solid #dbe1e5;
	border-left: 1px solid #dbe1e5;
}
#postscript dd img {
	margin: 0px 0px 20px;
}
#right2 {
	text-align: right;
	padding-top: 5px;
}
#right2 a {
	font-size: 11px;
}

#wrapper #container .left_c {
	float: left;
	width: 600px;
	padding-left: 20px;
}

#container #voice-title {
	text-indent: -9999em;
	height: 80px;
	width: 580px;
	clear: both;
	background: url(../img/title_voice.gif) no-repeat 0px 0px;
	margin: 20px 20px 20px 0px;
}

#subpage {
	position: relative;
	margin: 0 0px 0px 0;
	padding: 0px 0 0px 0px;
	width: 550px;
	float: left;
}

#subpage h2 { background-position: 0 0px; }


#container #faq-title {
	text-indent: -9999em;
	height: 80px;
	width: 580px;
	clear: both;
	background: url(../img/title_faq.gif) no-repeat 0px 0px;
	margin: 20px 20px 20px 0px;
}

#container #about-title {
	text-indent: -9999em;
	height: 80px;
	width: 580px;
	clear: both;
	background: url(../img/title_about.gif) no-repeat 0px 0px;
	margin: 20px 20px 20px 0px;
}

#container #law-title {
	text-indent: -9999em;
	height: 80px;
	width: 580px;
	clear: both;
	background: url(../img/title_law.gif) no-repeat 0px 0px;
	margin: 20px 20px 20px 0px;
}

#container #privacy-title {
	text-indent: -9999em;
	height: 80px;
	width: 580px;
	clear: both;
	background: url(../img/title_privacy.gif) no-repeat 0px 0px;
	margin: 20px 20px 20px 0px;
}

#container #compare-title {
	text-indent: -9999em;
	height: 80px;
	width: 580px;
	clear: both;
	background: url(../img/title_compare.gif) no-repeat 0px 0px;
	margin: 20px 20px 20px 0px;
}


#manga-pic {
	text-indent: -9999em;
	height: 842px;
	width: 595px;
	clear: both;
	background: url(../img/manga.jpg) no-repeat 0px 0px;
}


#subpage .table1 {
	border: 1px none #CCCC66;
	margin-bottom: 30px;
	width: 550px;
	margin-left: 10px;
}

#subpage .table1 th {
}

#subpage .table1 td {
	border: 1px solid #3A9DC2;
	padding: 10px;
}

#subpage .section {
	margin: 0 0 15px 15px;
	padding: 0px 0 0 0;
	width: 553px;
	background: #F1D85F;
}

#container img.title {
	display: inline-block;
	margin: 20px 20px 20px 0;
	padding: 0px 0 0px 0px;
}




#container .voiceframe {
	font-size: 110%;
	margin-top: 5px;
	margin-bottom: 20px;
	line-height: 130%;
	background-color: #F8EBAD;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 10px;
	padding-left: 30px;
	border: 3px solid #E6C115;
	margin-right: 10px;
	margin-left: 5px;
}

#container .voiceframe_tegami {
	font-size: 110%;
	margin-top: 5px;
	margin-bottom: 20px;
	line-height: 130%;
	background-color: #99FFFF;
	padding-top: 10px;
	padding-right: 30px;
	padding-bottom: 10px;
	padding-left: 30px;
	border: 3px solid #0066FF;
	margin-right: 10px;
	margin-left: 5px;
}

#subpage p {
	margin-top: 0;
	margin-right: 0;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 15px;
}

#container .compareframe {

	font-size: 110%;
	margin-top: 30px;
	margin-bottom: 20px;
	line-height: 130%;
	background-color: #F8EBAD;
	padding-top: 15px;
	padding-right: 30px;
	padding-bottom: 25px;
	padding-left: 30px;
	border: 5px solid #E6C115;
	margin-right: 10px;
	margin-left: 5px;
}

#subpage .right {
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 15px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}




#footer {
	margin: 0px;
	clear: both;
	width: 100%;
	background: url(../img/footer-bg.gif) repeat-x 0px 0px;
}
#footer address {
	margin: 0px;
	text-align: center;
	color: #FFF;
	font-size: 85%;
	height: 37px;
	padding-top: 17px;
	padding-bottom: 17px;
}




#compare-content1 {
	background: url(../img/compare1.gif) no-repeat 0px 0px;
	text-indent: -9999em;
	height: 80px;
	width: 580px;
	margin-bottom: 15px;
}

#compare-content2 {
	background: url(../img/compare2.gif) no-repeat 0px 0px;
	text-indent: -9999em;
	height: 80px;
	width: 580px;
	margin-bottom: 15px;
}

#compare-content3 {
	background: url(../img/compare3.gif) no-repeat 0px 0px;
	text-indent: -9999em;
	height: 80px;
	width: 580px;
	margin-bottom: 15px;
}

.compare-photo {
	float: right;
	height: 250px;
	width: 250px;
}






}





@media screen and (max-width:700px){
	body {
	color: #333;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin: 0 auto;
}
	
	#wrapper {
	width: 100%;
}

#wrapper .fixed-qa {
	height: 60px;
	position: fixed;
	left: 5px;
	bottom: 5px;
	margin: 0px;
	padding: 0px;
}

#wrapper .fixed-qa a {
	display: block;
	text-indent: -9999em;
	margin: 0px;
	height: 60px;
	width: 60px;
	background: url(../img_sp/fixed_qa.png) no-repeat 0px 0px;
	background-size: auto 100%;
}


#wrapper .fixed-home {
	height: 60px;
	position: fixed;
	left: 5px;
	bottom: 5px;
	margin: 0px;
	padding: 0px;
}

#wrapper .fixed-home a {
	display: block;
	text-indent: -9999em;
	margin: 0px;
	height: 60px;
	width: 60px;
	background: url(../img_sp/fixed_home.png) no-repeat 0px 0px;
	background-size: auto 100%;
}



#wrapper .fixed-button {
	height: 60px;
	position: fixed;
	right: 5px;
	bottom: 5px;
	margin: 0px;
	padding: 0px;
}

#wrapper .fixed-button li {
	display: inline;
	float: left;
	margin-left: 5px;
}


#wrapper .fixed-button li a {
	display: block;
	text-indent: -9999em;
	margin: 0px;
	height: 60px;
	width: 120px;
}

#wrapper .fixed-button .fixrep {
	background: url(../img_sp/fixed_re.png) no-repeat 0px 0px;
	background-size: auto 100%;
}

#wrapper .fixed-button .fixtry {
	background: url(../img_sp/fixed_try.png) no-repeat 0px 0px;
	background-size: auto 100%;
}



#wrapper #fixed-button {
	position: fixed;
	right: 0px;
	bottom: 0px;
	font-size: 70%;
}
#wrapper #fixed-button a {
	color: #FFF;
	text-decoration: none;
	background: rgba(255,0,0,0.5);
	width: 100%;
	text-align: center;
	padding: 10px 5px;
	display: block;
	border-radius:5px;
}



.nodisplay-sp {
	display: none;
}


#header {
	min-width: 100%;
	margin: 0px;
	height: 60px;
	background: url(../img_sp/header_bg_sp.gif) repeat-x 0px 0px;
}


#header h1 {
	margin: 0px;
	width: 121px;
	height: 60px;
	float: left;
}
#header h1 a {
	display: block;
	text-indent: -9999em;
	height: 60px;
	background: url(../img_sp/top-left_sp.gif) no-repeat 7px 0px;
	width: 100%;
}
#header .tel a{
	width:161px;
	background: url(../img_sp/top-tel_sp.jpg) no-repeat right top;
	margin-top: 0px;
	height: 60px;
	text-indent: -9999em;
	position: absolute;
	top: 0px;
	right: 0px;
	margin-right: 7px;
}



#container {
	margin: 0px;
	width: 100%;
	background: #FFF;
}
#container #nav {
	width: 100%;
	margin: 0px auto;
	padding: 0px;
}
#container #nav li {
	display: inline;
	float: left;
	width: 50%;
}




#container #nav a {
	width: 100%;
	display: block;
	height: 60px;
	text-align: center;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	text-indent: -9999em;
}



#nav .nav-trial-sp {
	background: url(../img_sp/navtrialbg_sp.gif) no-repeat 0px 0px;
	background-size: auto 100%;
	box-sizing: border-box;
	height: 60px;
}

.try{
	background: url(../img_sp/navtrial_sp.gif) no-repeat center 0px;
	background-size: auto 100%;
	height: 60px;
}

#nav .nav-repeat-sp {
	background: url(../img_sp/navrepeaterbg_sp.gif) no-repeat 0px 0px;
	background-size: auto 100%;
	height: 60px;
}
.inquiry {
	background: url(../img_sp/navrepeater_sp.gif) no-repeat center 0px;
	background-size: auto 100%;
	height: 60px;
}


#container #topBanner {
	text-indent: -9999em;
	background: url(../img_sp/topbanner_sp.jpg) no-repeat;
	margin: 0px;
	background-size: contain;
	height: 0px;
	padding-top: 135.73%;
}






#sidebar {
	width: 100%;
	height: auto;
}


#sidebar .manga-banner {
	margin: 0px auto 10px;
	width: 100%;
}

#sidebar .manga-banner a {
	margin: 15% 1% 10px;
	width: 98%;
	display: block;
	background: url(../img_sp/manga_banner_sp.jpg) no-repeat 0px 0px;
	height: 0px;
	padding-top: 178.24%;
	background-size: contain;
}



.yurai {
	border: 3px solid #09F;
	padding: 5px;
	margin: 0px 10%;
	background: #FFC;
	height: auto;
	width: 80%;
	box-sizing:border-box;
}

.abc {
	font-size: 12px;
	color: #039;
	font-weight: bold;
	border-style: dashed;
	border-width: thin;
	text-align: center;
	display: block;
}

#sidebar .yurai .yurai-title {
	font-weight: bold;
	color: #F60;
	text-align: center;
}#container .top-contents {
	width: 100%;
}
#container .top-contents .top-movie {
	position: relative;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.top-movie .douga {
	font-size: 16px;
	font-weight: bold;
	text-decoration: underline;
	display: block;
	padding-bottom: 1em;
	padding-top: 1em;
	width: 80%;
	margin-left: 10%;
}
.movie-wrap1 {
    position: relative;
    height: 0px;
    padding-bottom: 81.25%;
    overflow: hidden;
}
.movie-wrap1 iframe {
	height: 80%;
    width: 80%;
    position: absolute;
    left: 10%;
    top: 0%;
}



#container .top-contents .top-po{
	width: 100%;
}
.top-po img{
	width: 80%;
	margin-right: 10%;
	margin-left: 10%;
	height: auto;
}
#container .poi {
	text-align: center;
	background: url(../img_sp/point_sp.gif) no-repeat 0px 0px;
	margin: 3em 5%;
	background-size: contain;
	height: 0px;
	padding-top: 52.96%;
	width: 90%;
}
.poi img{
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
	height: auto;
}

#container #problem {
	margin: 0px;
	width: 100%;
}

#container h2 {
	text-indent: -9999em;
	height: 40px;
	width: 100%;
	margin-top: 0px;
	margin-bottom: 1em;
	clear: both;
}
.h2-obi {
	background: url(../img_sp/h2_obi_sp.gif) repeat-x 0px 0px;
	background-size: auto 100%;
	height: 40px;
	width: 98%;
	margin-right: 1%;
	margin-left: 1%;
	margin-bottom: 1em;
}

#problem h2 {
	background: url(../img_sp/h2_problem_sp.gif) no-repeat 0px 0px;
	background-size: auto 100%;
}
#container .base1 {
	width: 90%;
	margin: 0px 5% 2em;
	line-height: 1.5em;
	position: relative;
	padding-bottom: 85%;
}
#container #problem img {
	width: 60%;
	bottom: 0px;
	position: absolute;
	margin-right: 20%;
	margin-left: 20%;
}
#container #problem .orange {
	color: #F5851F;
	font-size: 120%;
}
#container #naturally {
	width: 100%;
}

#naturally h2 {
	background: url(../img_sp/h2_naturally_sp.gif) no-repeat 0px 0px;
	background-size: auto 100%;
}

#container img.left-img {
	margin-right: 20%;
	width: 60%;
	margin-left: 20%;
	height: auto;
	position: absolute;
	bottom: 0px;
}
#naturally .effect {
	margin-top: 0px;
	margin-bottom: 1.5em;
	width: 95%;
	border: 1px solid #156793;
	background: #197db5;
	clear: both;
}


#naturally .effect dt {
	color: #FFF;
	font-weight: bold;
	font-size: 17px;
	background: #197DB5 url(../img_sp/effect_dt.gif) no-repeat 0px 0px;
	height: 70px;
	padding-top: 0.5em;
	padding-left: 13px;
	letter-spacing: -1px;
}


#naturally .effect dd {
	width: 100%;
	margin-bottom: 30px;
	margin-top: 0px;
}

#naturally .effect dd p {
	margin: 0px 5% 30px;
	color: #FFF;
	width: 90%;
}
#naturally .effect img {
	height: auto;
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
}

#naturally .effect p strong {
	color: #FFF;
}
#naturally .effect .shiro {
	margin-bottom: 10px;
	width: 90%;
	color: #FFF;
	margin-right: 5%;
	margin-left: 5%;
}
#naturally .effect .s_ri {
	font-weight: bold;
	color: #FFF;
	display: block;
	text-decoration: underline;
	text-decoration-color:#333;
}
#container .base2 {
	width: 90%;
	margin: 0px 5% 1em;
	line-height: 1.5em;
	position: relative;
}




#naturally h3 {
	font-size: 18px;
	margin: 0px;
	padding: 0px;
	height: 40px;
	text-indent: -9999em;
	
}

.fe-obi {
	height: 40px;
	width: 98%;
	background: url(../img_sp/feobi_bg_sp.gif) repeat-x 0px 0px;
	background-size: auto 100%;
	margin: 3em 1% 1em;
}

#naturally h3.fe01 {

	background: url(../img_sp/fe01obi_sp.gif) no-repeat 0px 0px;
	background-size: auto 100%;
	
}

#naturally .reason {
	background: #ddecf4;
	width: 95%;
	margin: 0px 2.5% 30px;	
}
#naturally .reason dt {
	margin: 0px 0px 1em;
	text-indent: -9999em;
	height: 85px;
	width: 100%;
}
#naturally .reason.re01 dt {
	background: url(../img_sp/reason1_sp.gif) no-repeat center 0px;
	background-size: auto 100%;
}
#naturally .reason dd {
	box-sizing:border-box;
	font-size: 85%;
	background: #ddecf4;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding: 5px 5px 2em;
}
#naturally .reason dd img {
	display: block;
	margin-top: 20px;
	margin-bottom: 5px;
	height: auto;
	width: 90%;
	margin-right: 5%;
	margin-left: 5%;
}

#naturally .reason.re02 {
	margin-bottom: 0px;	
}


#naturally .syou {
	font-size: 12px;
	padding-left: 1em;
	display: block;
}


#naturally .reason.re02 dt {
	background: url(../img_sp/reason2_sp.gif) no-repeat center 0px;
	background-size: auto 100%;
}

#container .base3 {
	width: 90%;
	margin: 0px 5% 1em;
	line-height: 1.5em;
	position: relative;
	padding-bottom: 97%;
}
#naturally #mizutsuyo {
	width: 60%;
	height: auto;
	margin: 1em 20%;
	position: absolute;
	bottom: 0px;
}

.movietutumi{
	width: 96%;
	margin-right: 2%;
	margin-left: 2%;
}
.movie-wrap2 {
	position: relative;
	width: 100%;
	padding-top: 74.45%;
	margin-bottom: 0.5em;
}

.movie-wrap2 iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}


#naturally h3.fe02 {
	background: url(../img_sp/fe02obi_sp.gif) no-repeat 0px 0px;
	background-size: auto 100%;
}

#naturally .mizu_right {
	width: 90%;
	margin-top: 1em;
	margin-right: 5%;
	margin-left: 5%;
}

#naturally h3.fe03 {
	background: url(../img_sp/fe03obi_sp.gif) no-repeat 0px 0px;
	background-size: auto 100%;
}
#container .base4 {
	width: 90%;
	margin: 0px 5% 1em;
	line-height: 1.5em;
	position: relative;
	padding-bottom: 75%;
}
.base4 .sumitoku {
	width: 90%;
	height: auto;
	position: absolute;
	bottom: 0px;
	margin-right: 5%;
	margin-left: 5%;
}



#naturally .compare {
	background: url(../img_sp/hikaku_sp.gif) no-repeat 0px 0px;
	height: 0;
	text-indent: -9999em;
	margin: 50px 5% 0px;
	padding-bottom: 84.16%;
	background-size: contain;
	width: 90%;
}

#black {
	width: 100%;
	margin-top: 2em;
}

#black h2 {
	background: url(../img_sp/h2_black_sp.gif) no-repeat 0px 0px;
	background-size: auto 100%;
}
.guide {
	display: block;
	margin-bottom: 3em;
	width: 100%;
	margin-top: 3em;
}


.guide a {
	display: block;
	margin-top: 0px;
	margin-bottom: 15px;
	text-indent: -9999em;
	background: url(../img_sp/container-guide_sp.gif) no-repeat 0px 0px;
}
.guide .compare {
	background-position: 0px 0px;
	width: 70%;
	height: 38px;
	margin-right: 15%;
	margin-left: 15%;
}

.guide .try {
	background-position: 0px -40px;
	width: 90%;
	height: 50px;
	margin-right: 5%;
	margin-left: 5%;
}

#postscript {
	width: 80%;
	margin: 0px 10% 20px;
}
#postscript dt {
	margin: 0px;
	text-indent: -9999em;
	height: 50px;
	width: 100%;
	background: url(../img_sp/tsuishin_sp.gif) no-repeat center 0px;
	background-size: auto 100%;
}
#postscript dd {
	padding: 10px 20px 20px;
	font-size: 85%;
	background: #ddecf4;
}
#postscript dd img {
	margin: 0px 2.5% 20px;
	height: auto;
	width: 95%;
}
#right2 {
	text-align: right;
	padding-top: 1em;
}
#right2 a {
	font-size: 11px;
}

#container .left_c {
	width: 100%;
}



#voice-title {
	background: url(../img_sp/title_voice_sp.gif) no-repeat 5px 0px;
	background-size: auto 100%;
	text-indent: -9999em;
	height: 60px;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	clear: both;
}

.sub-obi {
	background: url(../img_sp/subobi_bg_sp.gif) repeat-x 0px 0px;
	background-size: auto 100%;
	height: 60px;
	width: 98%;
	margin-right: 1%;
	margin-left: 1%;
}

#subpage {
	position: relative;
	margin: 0 0px 0px 0;
	padding: 0px 0 0px 0px;
	width: 100%;
}

#container .voiceframe {
	font-size: 110%;
	margin-top: 20px;
	margin-bottom: 20px;
	line-height: 130%;
	background-color: #F8EBAD;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border: 3px solid #E6C115;
	margin-right: 5px;
	margin-left: 5px;
}


#faq-title {
	background: url(../img_sp/title_faq_sp.gif) no-repeat 5px 0px;
	background-size: auto 100%;
	text-indent: -9999em;
	height: 60px;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	clear: both;
}

#faq-list {
	width: 96%;
	margin-right: 2%;
	margin-left: 2%;
}

#about-title {
	background: url(../img_sp/title_about_sp.gif) no-repeat 5px 0px;
	background-size: auto 100%;
	text-indent: -9999em;
	height: 60px;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	clear: both;
}

#law-title {
	background: url(../img_sp/title_law_sp.gif) no-repeat 5px 0px;
	background-size: auto 100%;
	text-indent: -9999em;
	height: 60px;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	clear: both;
}

#privacy-title {
	background: url(../img_sp/title_privacy_sp.gif) no-repeat 5px 0px;
	background-size: auto 100%;
	text-indent: -9999em;
	height: 60px;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	clear: both;
}

#compare-title {
	background: url(../img_sp/title_compare_sp.gif) no-repeat 5px 0px;
	background-size: auto 100%;
	text-indent: -9999em;
	height: 60px;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	clear: both;
}

#manga-pic {
	text-indent: -9999em;
	margin: 5% 1% 10px;
	width: 98%;
	display: block;
	background: url(../img_sp/manga_banner_sp.jpg) no-repeat 0px 0px;
	height: 0px;
	padding-top: 178.24%;
	background-size: contain;
}

.footer-nav {
	width: 100%;
	height: 35px;
	background: #eeeeee;
	margin: 0px;
	padding: 0px;
}
.footer-nav li {
	float: left;
	width: 20%;
	height: 35px;
	box-sizing: border-box;
	text-align: center;
	display: table;
	border: 1px solid #999;
}
	
.footer-nav a {
	display: table-cell;
	margin: 0px;
	padding: 0px;
	font-size: 8px;
	text-align: center;
	vertical-align: middle;
}




#footer {
	margin-bottom: 45px;
	clear: both;
	width: 100%;
	background: url(../img_sp/footer_bg_sp.gif) repeat-x 0px 0px;
	height: 70px;
	padding: 0px;
}

#footer address {
	margin: 0px;
	text-align: center;
	color: #FFF;
	font-size: 85%;
	height: 37px;
	padding-top: 12px;
	padding-bottom: 12px;
}



#footer address a {
	font-size: 85%;
}


#subpage .table1 {
        border: 1px none #CCCC66;
        width: 96%;
        margin: 20px 2%;
}

#subpage .table1 td {
        border: 1px solid #3A9DC2;
        padding: 10px;
}



.compare-obi {
	background: #6dbedd;
	height: 70px;
	width: 98%;
	margin: 20px 1% 1em;
}

#compare-content1 {
	background: url(../img_sp/compare_content1.gif) no-repeat 0px 0px;
	text-indent: -9999em;
	height: 70px;
	width: 100%;
}

#compare-content2 {
	background: url(../img_sp/compare_content2.gif) no-repeat 0px 0px;
	text-indent: -9999em;
	height: 70px;
	width: 100%;
}

#compare-content3 {
	background: url(../img_sp/compare_content3.gif) no-repeat 0px 0px;
	text-indent: -9999em;
	height: 70px;
	width: 100%;
}

.compare-photo {
	float: right;
	height: auto;
	width: 40%;
	margin-left: 5px;
}

.compare-p {
	margin-right: 5%;
	margin-left: 5%;
}

.compareframe {
	font-size: 110%;
	line-height: 130%;
	background-color: #F8EBAD;
	border: 5px solid #E6C115;
	margin: 30px 3% 20px;
	padding: 15px 30px 25px;
}


}