/*HIPS*/

/* Base Layout
------------------------------------------------------------ */
html {
	overflow: auto;
}
* html { /* for IE6 */
	overflow: hidden;
	overflow-x: auto;
	height: 100%;
}
body {
	color:#666666;
	line-height:normal;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝" ;
	/*font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",sans-serif;*/
	/**/overflow-x: hidden;
	position: relative;
	min-width: 320px;
	background-color: #FFFFFF;
	font-size: 13px;
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	text-align:justify;
}
* html body { /* for IE6 */
	overflow-y: auto;
	height: 100%;
}

ul{
	list-style:none;
}
li{
	float:left;
}
/* clearfix */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,legend,textarea,p,blockquote,th,td{ 
	margin:0;padding:0;
}
img{ 
	border:0;
	vertical-align:bottom }
	
#topbutton {
      /* ▼表示位置を画面の右下に固定 */
      position: fixed; /* ←表示場所を固定 */
      bottom: 18px;   /* ←下端からの距離 */
      right: 20px;    /* ←右端からの距離 */

      /* ▼最初は非表示にしておく */
      display: none;
}
h1 {
	font-size: 1em;
}
.mtb1{ margin:1em 0;}
.mtb15{ margin:1.5em auto;}

/*　Base Link 
------------------------------------------------------------ */
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

a:link {
	color:#A0A0A0;
	text-decoration:none;
}
a:visited {
	color:#A0A0A0;
	text-decoration:underline;
}
a:hover, a:active {
	color:#CDBA9B;
	text-decoration:none;
}

#footer a:link {
	color:#FFFFFF;
	text-decoration:none;
}
#footer a:visited {
	color:#FFFFFF;
	text-decoration:underline;
}
#footer a:hover, a:active {
	color:#A0A0A0;
	text-decoration:none;
}
.Topics a:link { text-decoration:underline;}

/* test
------------------------------------------------------------ */
p.resizeimage img { width: 100%; }

/* 
------------------------------------------------------------ header */
@media screen and ( min-width:320px )
{
#header {
	height: 6em;
	margin-right: -500%;
	margin-left: -500%;
	padding-right: 500%;
	padding-left: 500%;
	margin-top:1em;
}
.head_bar_gry{
	height: 8px;
	margin-right: -500%;
	margin-left: -500%;
	padding-right: 500%;
	padding-left: 500%;
	background-color:#CCCCCC;
	background-repeat:repeat-x;
	
}
#header .top_name {
	float: left;
	margin-left: 3%;
}
#header .top_name img{width:80%;}
#header .head_nav {
	display: none ;		/* 非表示にする */
}

#header .head_menu #toggle {
	display: block ;
	position: absolute;
	float: right;
	margin-top: 1em;
	right: 0em;
}
#header .head_menu #toggle img { width: 70%; }
#header  #menu{
	display: none ;
	float: left;
	opacity: 0.9;
	filter: alpha(opacity=90);
	position:fixed;
	z-index:100;/*前面に表示させる*/
	margin:3.5em auto 0;
	width:100%;
}

#header .head_menu #menu li{
	width: 100%;
	margin: 0;
	padding: 0;
	border-bottom: 1px  solid #c0c0c0;
}
#menu li a{
  display: block;
  position: relative;
  padding: 12px 0 10px;
  background:#999999;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
#menu li a:hover{ background: #444;}

/*------------------------------------------------------------------　top　*/
#wrapper{
	max-width: 478px;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
}
#head_img {width: 100%; }
#head_img img{width: 100%;}
#main {
/*	width:96%;*/
	text-align: center;
	margin: 2em 1em;
}
.title{
	font-size:2.5em;
	font-weight: bold;
	margin:1em auto 0;
}
.img100_sp img{width:100%;}

.top #wrapper .topi_box {
	width: 95%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 2em;
	margin-bottom:2em;
	float:left;
}
.top #wrapper .fb_box{text-align:center;margin-top: 2em;}


.top #wrapper .topi_box .topi_title {
	font-size:2em;
	color:#D30052;
	font-weight: bold;
	/*margin:1.5em auto 1em;*/
	text-align:center;
}
.top #wrapper .topi_box .topi_inner .date {
	float: left;
	margin-right: 1em;
	margin-top: 0.3em;
	width: 20%;
}
.top #wrapper .topi_box .topi_inner .Topics {
	float: left;
	width: 68%;
	margin-top: 0.1em;
}
.top #wrapper .topi_box .topi_inner li {
	padding-bottom: 0.7em;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999999;
	padding-top: 0.7em;
	width: 100%;
	float: left;
}

.top #wrapper .message {
	width: 90%;
	margin: 3em auto 2em;
	/*font-size:1.2em;
	font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝" ;*/
	line-height:1.8em;
	
}
/*table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
	display:block;
}*/
.text01 {
	font-size:2em;
	width:100%;
	border-top-width: 2px;
	border-top-style: dotted;
	border-top-color:#CCCCCC;
	/*padding-bottom:0.2em;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color:#CCCCCC;*/
	margin-top:1em;
    padding-top: 0.5em;
    font-weight: 600;
	/*margin-bottom:0.5em;*/
}
.text02 {
	font-size:1.5em;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",sans-serif;
}
.text03 { font-size:1.5em;}
.info_box{
	width:100%;
	border:solid 1px;
	padding:0.5em 1.5em;
	box-sizing:border-box;
	margin:5em 0;
	float:left;
}
.info_box li{ width:100%;}
.info_box .left01{ width:100%; margin-bottom:0.5em;}
.info_box .right01{ width:100%; text-align:left; font-size:1.2em; font-weight: bold; color: #000;}
.info_box .left02{ width:100%; margin-bottom:0.5em; line-height:3em;}
.info_box .right02{ width:100%; line-height:3em;}
.dotted_bar_gry{
	border-bottom:#CCCCCC dotted ;
	border-bottom-width:1px;
	width:100%;
}
.menu01{ 
	text-align:left;
	width:100%;
}
.eng{
	font-size:0.7em;
	margin-left:1.5em;
	line-height:1em;
}
.menu01 table{ 
	width:100%;
	margin-bottom:1em;
} 
.menu01 .bg_gry {
	background-color:#666666;
	color:#FFFFFF;
	padding:0 2em;
	width:auto;
}
.price { 
	text-align:right;
	vertical-align:top;
}
.plan_box {width:100%; float:left; font-size:1.2em;}
.plan_price{
	text-align:left;
	 margin-top:1em;
	 }
.app_box {
	width:100%;
	border:solid 1px;
	padding:1em 1.5em;
	box-sizing:border-box;
	margin:0.5em auto 1em;
}
/*----------------------------------------------------------------------*/
/**/

/*----------------------------------------------------------------------- footer */
#footer {
	width: 100%;
	margin-right: -500%;
	margin-bottom: 0;
	margin-left: -500%;
	padding-top: 0.5em;
	padding-right: 500%;
	padding-bottom: 2em;
	padding-left: 500%;
	background-color: #47210D;
	color: #FFFFFF;
	float: left;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",sans-serif;
}
#footer .f_nav { display:none;}
#footer .f_name {
	float: left;
	width: 100%;
	line-height:1.5em;
	margin-top:1em;
}
#footer .f_pp {
	float: right;
	/*padding-left: 2%;*/
}

#footer .f_info{
	width:80%;
	margin:1em auto;
	line-height:1.5em;
}
#footer .f_info li{ width:100%;}

/*#footer .f_right { float:right;}*/


/*ボタン
------------------------------------------------*/
.down{
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #999;
}
/*mail
------------------------------------------------*/
#formWrap {
	width:100%;
	margin:2em auto;
	color:#666666;
	line-height:120%;
	font-size:100%;
}
#formWrap table.formTable{
	width:100%;
	table-layout:fixed;
	margin:1em auto 2em;
	border-collapse:collapse;
}
/**/#formWrap table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
	display:block;
}

#formWrap table.formTable th{
	font-weight:normal;
	color:#FFFFFF;
	text-align:left;
	background-color:#94725f;
}
h3{	text-align:center;
}
p{	text-align:center;
}
.info{
	margin-top:1em;
	margin-left:1em;
	text-align:left;
}
}
@media screen and ( min-width:767px )
{
#main {
	max-width:767px;
	/*margin-left:auto;
	margin-right:auto;*/
}
#wrapper{max-width: 939px;}
/*#header .top_name img{width:100%;}*/
.head_bar_s1{margin-top:6em;}


#header .head_menu #toggle img { width: 100%; }
#header .head_menu #toggle {margin-right: 5%;}
/*.title_sp{ display:none;}
.title_pc{ display: block; margin:6em auto 1.5em;}*/
/*.img100_sp img {width:auto;}*/

.top #wrapper .topi_box{width: 70%;}

.top #wrapper .topi_box .topi_inner .date {	margin-right: 2em;}
.info_box .right01{ text-align:center;}
.text03 { font-size:1.8em;}
.menu01 table{
	width:80%;
	margin-left:auto;
	margin-right:auto;
} 
.menu01 td{
	height:3em;
	line-height:1em;
} 
.app_box {
	width:80%;
	box-sizing:border-box;
	margin:0.5em auto 1.5em;
	display:flex;
	justify-content:space-between;
	 padding:1em 4em;
}

#footer .f_nav {
	display:block;
	color: #FFFFFF;
	float: left;
	padding-top: 10px;
	line-height: normal;
	width: 98%;
	padding-left: 2%;
}
#footer .f_nav .border {
	margin-right: 20px;
	padding-right: 20px;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	float: left;
	width: auto;
	margin-bottom: 5px;
}
#footer .f_nav .f_fb {
	float: right;
	margin-top:-8px;
	margin-right:2em;
	
}
/*#footer .f_nav .f_mail {
	float: right;
	margin-top:-5px;
}*/

/*mail
------------------------------------------------*/
/*#formWrap table.formTable td,table.formTable th{
	display:table-cell;
}
#formWrap table.formTable th{
	width:30%;
}
#formWrap table.formTable td{
	width:60%;
	}*/
}
@media screen and ( min-width:940px )
{

#header .top_name {	margin-left: 0px;}
#header .head_menu {display: none ;	}
#header .head_menu #toggle {display: none ;}
#menu li a{ display: none;}

#header .head_nav {
	display: block ;
	float: right;
	margin-top:2em;
	/*padding-right:2em;*/
}
.widthsize{
	max-width: 940px;
	margin-right: auto;
	margin-left: auto;
}

#header .head_nav li {
	float: left;
	margin-left: 0.5em;
	margin-right: 14px;
	padding-right: 14px;
}
#header .head_nav li img{ margin-top:-0.3em;}
#header .head_nav .border_g {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #CCCCCC;
}
#footer .f_info{
	width:45%;
	margin-left:2%;
	float:left;
}
#footer .f_pp {	margin-top: 12em;}
/*#footer .f_right {
	display:block;
	float: right;
	width: 51%;
	margin-top:1em;
}
#footer .f_right li { margin-bottom:0.5em;}*/
/*--------------------------------------------　top　--*/
#wrapper{max-width: 940px;}
#main {
	max-width:940px;
	margin-right: auto;
	margin-left: auto;
}
.top #wrapper .message { 
	text-align:left;
	font-size:1.2em;
}
.top #wrapper .topi_box {
	float: left;
	margin:2em auto;
}
.top #wrapper .topi_box .topi_title {
	text-align:left;
	/*margin:1.5em auto 1em;*/
}
.top #wrapper .topi_box .topi_inner {width: 100%;}
.top #wrapper .topi_box .topi_inner .date {
	float: left;
	margin-right: 3em;
	margin-left: 1em;
	margin-top: 0.3em;
	width: 6em;
}
.top #wrapper .topi_box .topi_inner .Topics {
	float: left;
	margin-top: 0.3em;
	width: auto;
}
.title{
	font-size:3em;
	margin:1.5em auto 0;
}
.fb_box{
	float:left;
	width:28%;
	margin-left:2%
}
.info_box {
	width:90%;
	margin:5em 5%;
}

.info_box li{ text-align:left;}
.info_box .left01{ float:left; width:30%; margin-right:5%;}
.info_box .right01{ float:left; width:50%; padding-top:0.5em; text-align: left;}
.info_box .left02{ float:left; width:50%; margin-right:10%;}
.info_box .right02{ float:left; width:40%; text-align:right;}
.menu01{font-size:1.6em;}
.plan_img{ float:left; width:30%; }
.plan_price{ float:left;width:70%;}
.plan_box p { float:left;}
.app_box { width:60%;}

/*mail
------------------------------------------------*/
#formWrap {
	width:70%;
}
}
@media screen and ( min-width:320px )
{
}
@media screen and ( min-width:940px )
{
}