@charset "utf-8";

@import url("base.css");

/*  DEFAULT
-------------------------------------------------------------------- */

body {
    font-family:"メイリオ","ＭＳ Ｐゴシック","Meiryo","ヒラギノ角ゴ Pro W3 / W6","Hiragino Kaku Gothic Pro",Osaka,sans-serif;
    font-size: 12px;
    line-height: 1.6;
	background:url(../../img/patt.gif) repeat center top;
	-webkit-text-size-adjust: 100%;
}
a,a:link, a:visited{
	color:#12b0ae;
	text-decoration:underline;
}
a:hover{
	color:#12b0ae;
}
img {
	max-width : 100% ;
	height : auto ;
	vertical-align: bottom;
}
.clr00{ clear:both;}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
}

/*  HEADER FIX
---------------------------------------------------- */

.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	z-index:9998;
}
.nav {
	height:auto;
}
div#menuBox{
	max-width:750px;
	margin:0 auto;
	height:50px;
	border-bottom:1px dashed #999;
	background:url(../../smartphone/img/sp_header_bg.png) no-repeat 0 0;
	background-size:100% 100%;
	position:relative;
}
div#menuBox p{
	position:absolute;
	top:10px;
	right:10px;
}
.btnToggle img{
	max-width:35px!important;
}
.clmToggle {
	display: none;
	position:absolute;
	top: 40px;
	right: 45px;
	z-index: 5;
}
nav ul{
	list-style:none;
}
nav li{
	width:201px;
}
nav li a{
	display:block;
	text-decoration:none;
}
nav li img{
	width:100%;
	text-align:right;
	vertical-align:top;
}
.sub{
	position: absolute;
	top: 0;
	left: 10px;
}
.tfm{
	top: 12px;  
	width:115px;
	height:23px;
	position: absolute;
}
.tfm img{
	/*width:90%;*/
	width:90px;
	height:auto;
}
.osaka{
	top: 13px;
	left:105px;
	width:71px;
	height:30px;
	display: block;
	position: absolute;
}
.osaka img{
	width:90%;
	height:auto;
}
/*  LAYOUT
-------------------------------------------------------------------- */

#wrapper{
	overflow:hidden;
	margin:0 auto;
	max-width:750px;
	width:100%;
}

/*  HEADER
-------------------------------------------------------------------- */

#header {
	max-width:750px;
	height:100%;
}	
#header_Inner{
	position:relative;
	margin:0 auto;
	max-width:750px;
}
#header_Inner h1 a{
	height:auto;
	padding-top:62%;
    width:100%;
	background:url(../../smartphone/img/sp_header.png) no-repeat 0 0;
	background-size:100% 100%;
	text-indent:-1000em;
	display:block;
}

#header_Inner h2,
#header_Inner .pers,
#header_Inner .lead{
	display:none;
}

/* content
-------------------------------------------------------------------- */

.content {
    width:100%;
	max-width:750px;
	margin-bottom:5px;
}
.content-up{
	height:auto;
	padding-top:22.25%;
    width:100%;
	background:url(../../smartphone/img/c_up.png) no-repeat 0 0;
	background-size:contain;
}
.content-mid {
	height:auto;
	background:url(../../smartphone/img/c_mid.png) repeat-y 0 0;
	background-size:contain;
}
.content-bot{
	margin-top:-18px;
	height:auto;
	padding-top:11.25%;
    background:url(../../smartphone/img/c_bot.png) no-repeat 0 0;
	background-size:contain;
}
.itembody{
	padding:0 0 0 30px;
	height:100px;
}
#item .pageswitch{
	margin:10px 0;
}
/* page navi
-------------------------------------------------------------------- */
.pageNavi{
	margin:0 auto 20px;
	max-width:640px;
	text-align:center;
}
.pageNavi a img{
	margin:0 auto;
	max-width:600px;
	width:40%;
	text-align:center;
}
.pageTop{
	width:101px;
	height:34px;
	float:right;
}
.pageTop a{
	display:block;
	width:101px;
	height:34px;
    background:url(../../img/btn_top.png) no-repeat;
	text-indent:-9999px;
	overflow:hidden;
}
.pageswitch{
	margin:0 auto;
	color:#646464;
	text-align:center;
	padding:0;
}
*:first-child+html .pageswitch{
	margin:-20px auto 0 auto;
	color:#646464;
	text-align:center;
	padding:0 0 15px 0;
}
.pageswitch a{
	text-decoration:underline;
	color:#646464;
}
.pageswitch:nth-child(1){
	display: none;
}
.prevlink{
	float:left;
	width:101px;
	height:34px;
    background:url(../../img/btn_prev.png) no-repeat;
	text-indent:-9999px;
	margin:5px 0 0 5px;
	_margin:5px 0 0 3px;
}
.prevlink a{
	width:101px;
	height:34px;
	display:block;
	overflow:hidden;
}
.nextlink{
	float:right;
	width:101px;
	height:34px;
    background:url(../../img/btn_next.png) no-repeat;
	text-indent:-9999px;
	margin:5px 0 0 5px;
	_margin:5px 0 0 3px;
}
.nextlink a{
	width:101px;
	height:34px;
	display:block;
	overflow:hidden;
}

/* report
-------------------------------------------------------------------- */
.report {
	margin:0 auto;
 	width:100%;
	max-width:750px;
}
.report_inner{
	padding:0 0;
	margin:0 auto 18px;
	width:80%;
	border-bottom:1px solid #DEDEDE;
}
.detail_inner{
	margin:0 auto;
	width:80%;
}
.report-up{
	margin:0 auto;
 	width:100%;
	max-width:750px;
    overflow:hidden;
}
.report-up h3{
	color:#09adab;
	margin:0 auto;
	max-width:750px;
	font-size:120%;
	line-height:1.4em;
	font-weight:normal;
}
.report-up h3:first-child {
	color:#09adab;
	margin:0 auto 0px!important;
	max-width:750px;
	font-size:120%;
	line-height:1.4em;
	font-weight:normal;
}
.report-mid {
	margin:0 auto;
 	width:100%;
	max-width:750px;
	font-size:100%;
	line-height:1.2em;
}
.report-Inner{
	margin:0 auto;
	max-width:650px;
	padding:10px 0;
	color:#3c3c3c;
}
.report-bot{
	margin:0 auto;
 	width:100%;
	max-width:650px;
    overflow:hidden;
}
.amazon{
	max-width:150px;
	float:left;
	margin-right:10px;
	margin-bottom:10px;	
}
#item .moreLink{
	text-align:left;
	margin-bottom:20px;
	line-height:1.7em;
	font-size:13px!important;
}
.moreLink{
	text-align:left;
	margin-bottom:20px;
	line-height:1.6em;
}
.moreLink a{
	margin-top:30px;
}
.moreLink .readmore{
	margin-top:15px;
	display:block;
	text-align:right;
}
.moreLink a img{
	width:45%;
}
.report-Inner p{
	color:#000;
	font-size:100%;
	font-weight:normal;
}

/*  SNS
-------------------------------------------------------------------- */

/* CAT */
.cat{
	float: right;
	width: 150px;
	font-size: 69%;
	font-size:12px;
	color:#3c3c3c;
	padding:15px 10px 0 0;
	text-align:right;
}
.sb_post{
	display:flex;
	text-align:left;
	align-items: center;
	justify-content: center;
}
.sb_post li{
	margin-right: 5px;
}

/* FORM
-------------------------------------------------------------------- */

/*
.form_head{
	height:auto;
    max-width:750px;
	padding-top:11.9%;
    width:100%;
	background:url(../../smartphone/img/ttl_mess_txt.png) no-repeat 0 0;
	background-size:contain;
}
*/
.message-up{
	height:auto;
    max-width:750px;
	padding-top:9.4%;
    width:100%;
	background:url(../../smartphone/img/ttl_mess.png) no-repeat 0 0;
	background-size:contain;
	text-indent:-1000em;
}
.form_trial{
    max-width:750px;
    width:100%;
	margin:0 auto;
	background:url(../../smartphone/img/ttl_mess_mid.png) repeat-y 0 0;
	background-size:contain;
}
.form_trial:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
.form_trial {display:inline-block;}
.form_trial {display:block;}

.form_trial h3{
	font-size:90%;
	margin-bottom:15px;
}
.form_trial_Inner{
  	font-size:90%;
}
.form_trial_Inner img{
	display:block;
	max-width:600px;
	height:auto;
    padding:15px;
	text-align:center;
	margin:0 auto;
}
#feed{
	padding:30px 30px 0 30px;
	font-size:100%;
	margin-bottom:20px;
}
.spItem{
	font-size:100%;
	margin-bottom:20px;
	font-weight:bold;
	text-align:center;
}
/* side
-------------------------------------------------------------------- */
#side{
	margin:0 auto;
    max-width:750px;
	width:100%;
}
/* MESSSAGE */

#side_form{
    width:260px;
    margin:0 10px 0 0;
}
#mess{
	margin:0 auto;
    max-width:750px;
	width:100%;
	margin:0 0 20px 0;
}
#mess h3{
	padding:5px 50px 10px 50px;
	text-align:center;
}
#mess ul{
	padding:0 0 7px 0;
}
#mess ul li{
	text-align:center;
}
#mess-up{
	height:0;
	padding-top:57.5%;
    width:90%;
    max-width:750px;
	background:url(../../smartphone/img/m_up.png) no-repeat 0 0;
	background-size:contain;
	margin:0 auto;
}
#mess_Inner{
    max-width:750px;
    width:90%;
	margin:0 auto;
	height:auto;
    background:url(../../smartphone/img/m_mid.png) repeat-y 0 0;
	background-size:contain;
}
#mess-bot{
    width:90%;
	margin:0 auto;
	height:0;
	padding-top:5%;
    background:url(../../smartphone/img/m_bot.png) no-repeat 0 0;
	background-size:contain;
}
#mess_Inner ul li a img{
	width:75%;
	margin:0 auto;
}
#mess_Inner h3{
	font-size:120%;	
}
.side_trial p{
	font-size:110%;
	text-align:left;
	margin:0 auto 20px;
    width:75%;
    max-width:600px;
	padding:0 15px;
}
.side_trial p img{
	width:90%;
    max-width:600px;
	margin:15px;
}
/* BANNER
-------------------------------------------------------------------- */

#bnr{
	text-align:center;
	width:100%;
    max-width:600px;
	margin:0 auto;
}
#bnr ul li{
	padding:0 0 10px 0;
}
#bnr ul li img{
	width:80%;
    max-width:700px;
}
#bnr ul li span{
	text-align: center;
	display: block;
	padding-top: 5px;
	font-size: 11px;
	color: #333;
}
/* PRESENT
-------------------------------------------------------------------- */

#present{
    width:260px;
    padding:0 0 15px 0;
    display:block;
}
#present-up{
    width:260px;
    height:8px;
    background:url(../../img/s_up.png) no-repeat center top;
    overflow:hidden;
}
#present-up:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
#present-up {display:inline-block;}
#present-up {display:block;}

#present_Inner{
    width:260px;
    background:url(../../img/s_mid.png) repeat-y;
    overflow:hidden;
}
#present_Inner:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
#present_Inner {display:inline-block;}
#present_Inner {display:block;}

#present_Inner .trial{
    text-align:center;
    padding:0 0 10px 0;
}
#present_Inner h3{
    margin:0 auto;
    width:240px;
    font-size:13px;
    padding:10px 5px 10px 15px;
}
#present_Inner p{
    margin:0 auto;
    width:230px;
    padding:10px 10px 0 10px;
    text-align:left;
}
#present-bot{
    width:260px;
    height:8px;
    background:url(../../img/s_bot.png) no-repeat center top;
    overflow:hidden;
}
#present-bot:after {content:"."; display:block; height:0; visibility:hidden; clear:both;}
#present-bot {display:inline-block;}
#present-bot {display:block;}


/* CALENDAR
-------------------------------------------------------------------- */

#calendar{
	padding:0 0 15px 0;
	display:block;
	font-size:120%;
}
#calendar-up{
	height:auto;
	padding-top:2%;
    width:100%;
    max-width:750px;
	background:url(../../smartphone/img/s_up.png) no-repeat 0 0;
	background-size:contain;
}
#calendar h3{
	height:10px;
	background:url(../../smartphone/img/ttl_calendar.png) no-repeat center bottom;
	text-indent:-9999px;
}
#calendar_Inner{
	height:auto;
	background:url(../../smartphone/img/s_mid.png) repeat-y 0 0;
	background-size:contain;
}
#calendar-bot{
	height:auto;
	padding-top:2.25%;
    width:100%;
    max-width:750px;
    background:url(../../smartphone/img/s_bot.png) no-repeat 0 0;
	background-size:contain;
}
#calendar_Inner table{
	width:90%;
	margin:0  auto;
	text-align:center;
	}
#calendar_Inner table th{
	padding:2px 0 0 0;
	font-weight:normal;
	text-align:center;
	}
#calendar_Inner table td{
	padding:5px;
	}
.calendarhead {
	padding:15px 0 10px 0;
	width:92%;
	text-align:center;
	color:#12b0ae;
	}
.calendarhead a{
	color:#12b0ae;
	}
	
.calendardateheaders {
	text-align:center;
	background-color:#12b0ae;
	color:#FFF;
}
.days{
	text-align:center;
	color:#999999;
}
.days a{
	color:#12b0ae;
}
.today {
	text-align:center;
	color:#999999;
	font-weight:bold;
}
.today a{
	color:#999999;
	font-weight:bold;
}

/* ARCHIVE
-------------------------------------------------------------------- */

#archive ul{
	text-align:center;
}
#archive ul li{
	background:url(../../img/mrk_arrow.gif) no-repeat left 5px;
	padding:0 0 5px 15px;
	line-height:1.5em;
}
#archive-up{
	padding-top:11.7%;
    width:100%;
    max-width:750px;
    background:url(../../smartphone/img/b_up.png) no-repeat 0 0;
	text-indent:-1000em;
	background-size:contain;
}
#archive h3{
	text-align:center;
	display:none;
}
#archive-mid{
	padding-top:1%;
	height:auto;
    width:100%;
    max-width:750px;
    background:url(../../smartphone/img/s_mid.png) repeat-y 0 0;
	background-size:contain;
}
#archive-bot{
    max-width:750px;
	padding-top:5.0%;
    background:url(../../smartphone/img/s_bot.png) no-repeat 0 0;
	background-size:contain;
}

/* select_area
---------------------------------------------------- */ 

.pulldown01 {
	margin:0 auto;
	text-align:center;
	padding-bottom:10px;
}
.pulldown01 select {
	width: 80%;
	margin:0 auto;
	border: 1px solid #99c2d7;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-overflow: "";
	padding: 8px 8px 8px 10px;
	background-color:#99c2d7;
	color:#FFF;
	font-size:14px;
	text-align:center;
	margin:0 auto;
	/* text-indent: unset!important; */
}
/*  FOOTER
-------------------------------------------------------------------- */

#footer{
	clear:both;
	padding-top:15.6%;
	background:url(../../smartphone/img/letter.png) no-repeat right 0;
	background-size:contain;
	height:100%;
}
#footer_Inner{
	padding:25px 0;
	margin:0 auto;
	background-color:#FFF;
}
#footer_Inner ul{
	margin:0 auto 10px;
	width:65%;
	max-width:260px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	justify-content: center;
}
#footer_Inner ul li.f_tfm{
	width:140px;
}
#footer_Inner ul li img{
	width:80%;
}	
address{
	text-align:center;
}
address img{
	width:90%;
}

/* pagetop
------------------------------------------------------------*/

.go-top{
	text-align:center;
	margin-bottom:-25px;
}
.go-top img{
	width:50px;
	height:50px;
}

.present-img {
	padding: 5px 50px 10px 50px;
}

.present-txt {
	padding: 5px 50px 10px 50px;
    text-align: left;
}
