@charset "UTF-8";
body, h1, h2, h4, h5, h6, p, section, article, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, figure, img, form { border: none;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Helvetica, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "メイリオ", Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 16px;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0;
padding: 0;
}
html {
}

body {
	height: 100vw;
margin: 0;
padding: 0;
background: url(../images/index_bg.jpg) no-repeat center center fixed;
background-size: cover;
/*background: url(../images/index_bg.jpg) no-repeat center center;
background-size: cover;*/
font-feature-settings: "palt";
}
a:visited {color: #000;}
a img { border: 0;}
hr {display: none;}
form { margin: 0; padding: 0;}
.clearfix {zoom:1;}
.clearfix:after {content: ""; display: block; clear: both;}


.pc {
display: block
}
.tab {
display: none;
}
.sp {
display: none;
}
.sp_s {
display: none;
}

section.wrapper {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	/*background: url("../images/index_bg.jpg") no-repeat center center;
	background-size: cover;*/
}

h1 {
    width: 1015px;
    height: 224px;
    margin: 0 auto 0 auto;
    padding: 150px 0 0 0;
    background: url(../images/index_logo.png) no-repeat 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
div.main {
	width: 760px;
	height: 352px;
	margin: 0 auto 0 auto;
	padding: 0;
	background: url("../images/index_infobase.png") no-repeat center center;
}
div.main h2 {
    margin: 0;
    padding: 70px 0 40px 0;
	font-size: 26px;
	line-height: 26px;
	color: #403d3c;
	text-align: center;
	letter-spacing: 5px;
}
div.main h2 span {
	color: #ff5392;
}
nav {
width: 552px;
height: 110px;
margin: 0 auto 14px auto;
padding: 0;
}
nav ul {
font-size: 0px;
margin: 0;
padding: 0;
}
nav ul li{
width: 228px;
height: 110px;
text-align: center;
text-decoration: none;
margin: 0 24px 0 24px;
padding: 0;
list-style-type: none;
display: inline-block;
vertical-align: top;
}
nav ul li p.read {
font-size: 18px;
line-height: 24px;
text-align: center;
text-decoration: none;
margin: 0 0 5px 0;
padding: 0;
}
nav ul li p.read span {
font-size: 24px;
}
nav ul li p.enter a {
width: 228px;
height: 80px;
font-size: 20px;
line-height: 80px;
color: #fff;
background: #ff689f;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
nav ul li p.enter a:hover {
width: 228px;
height: 80px;
font-size: 20px;
line-height: 80px;
color: #fff;
background: #ff005d;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
nav ul li p.leave a {
width: 228px;
height: 80px;
font-size: 20px;
line-height: 80px;
color: #fff;
background: #000;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
nav ul li p.leave a:hover {
width: 228px;
height: 80px;
font-size: 20px;
line-height: 80px;
color: #fff;
background: #333;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
p.note {
font-size: 16px;
text-align: center;
color: #000;
}
#banners_box {
    margin: 50px auto 30px auto;
    width: 480px;
}



@media screen and (min-width:560px) and (max-width:1024px) {
.pc {
display: none;
}
.tab {
display: block;
}
.sp {
display: none;
}
.sp_s {
display: none;
}

section.wrapper {
	width: 100%;
	/*width: 100vw;*/
	height: auto;
	min-height: 100vh;
	margin: 0;
	padding: 0;
  position: relative;
}
.container{
	max-width: 626px;
	width: 100%;
  /*position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);*/
	margin: 50px auto 50px auto;
}
h1 {
    width: 100%;
	height: 0;
    margin: 0 auto 0 auto;
    padding: 22% 0 0 0;
    background: url(../images/index_logo.png) no-repeat center center;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
	background-size: 95%;
}
div.main_tab{
	max-width: 626px;
	width: 100%;
	height: 560px;
	margin: 20px auto 226px auto;
	padding: 0;
	background: url("../images/smart/index_infobase.png") no-repeat center center;
}
div.main_tab h2 {
    margin: 0;
    padding: 73px 0 30px 0;
	font-size: 36px;
	line-height: 36px;
	color: #403d3c;
	text-align: center;
	letter-spacing: 5px;
}
section.main_sp h2 span {
	color: #ff5392;
}
nav {
width: 400px;
height: 280px;
margin: 0 auto 0 auto;
padding: 0;
}
nav ul {
font-size: 0px;
margin: 0;
padding: 0;
}
nav ul li {
width: 400px!important;
text-align: center;
text-decoration: none;
margin: 0 0 30px 0;
padding: 0;
list-style-type: none;
}
nav ul li p.read {
font-size: 28px;
line-height: 30px;
text-align: center;
text-decoration: none;
margin: 0 0 8px 0;
padding: 0;
}
nav ul li p.read span {
font-size: 30px;
}
nav ul li p.enter a {
width: 400px!important;
height: 60px;
font-size: 30px;
line-height: 60px;
color: #fff;
background: #ff689f;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
nav ul li p.enter a:hover {
width: 400px!important;
height: 60px;
font-size: 30px;
line-height: 60px;
color: #fff;
background: #ff005d;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
nav ul li p.leave a {
width: 400px!important;
height: 60px;
font-size: 30px;
line-height: 60px;
color: #fff;
background: #000;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
nav ul li p.leave a:hover {
width: 400px!important;
height: 60px;
font-size: 30px;
line-height: 60px;
color: #fff;
background: #333;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
p.note {
font-size: 20px;
line-height: 28px;
text-align: center;
color: #000;
margin: 0;
}
#banners_box {
    margin: 50px auto 30px auto;
    width: 480px;
}


}





@media screen and (min-width:376px) and (max-width:559px) {
.pc {
display: none;
}
.tab {
display: none;
}
.sp {
display: block;
}
.sp_s {
display: none;
}

section.wrapper {
	height: auto;
	/*min-height: 122vh;*/
	margin: 0;
	padding: 0;
}
.container{
	width: 100%;
	margin: 50px auto 50px auto;
}
h1 {
    width: 100%;
    height: 0;
    margin: 0 auto 0 auto;
    padding: 19% 0 0 0;
    background: url(../images/index_logo.png) no-repeat center center;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-size: contain;
}
div.main_sp {
    width: 100%;
    height: 560px;
    margin: 20px auto 0 auto;
    padding: 0;
    background: url(../images/smart/index_infobase.png) no-repeat center center;
    background-size: contain;
}
div.main_sp h2 {
    margin: 0;
    padding: 110px 0 20px 0;
    font-size: 30px;
    line-height: 36px;
    color: #403d3c;
    text-align: center;
}
section.main_sp h2 span {
	color: #ff5392;
}
nav {
width: 400px;
height: 230px;
margin: 0 auto 0 auto;
padding: 0;
}
nav ul {
font-size: 0px;
margin: 0;
padding: 0;
}
nav ul li {
width: 400px;
text-align: center;
text-decoration: none;
margin: 0 auto 5px auto;
padding: 0;
list-style-type: none;
}
nav ul li p.read {
font-size: 24px;
line-height: 30px;
text-align: center;
text-decoration: none;
margin: 0 0 8px 0;
padding: 0;
}
nav ul li p.read span {
font-size: 26px;
}
nav ul li p.enter a {
    /*width: 400px;*/
	width: 100%!important;
    height: 60px;
    font-size: 30px;
    line-height: 60px;
    color: #fff;
    background: #ff689f;
    text-align: center;
    text-decoration: none;
    margin: 0 auto;
    padding: 0;
    display: block;
}
nav ul li p.enter a:hover {
    width: 100%!important;
    height: 60px;
    font-size: 30px;
    line-height: 60px;
/*color: #fff;
background: #ff005d;
text-align: center;*/
/*text-decoration: none;
margin: 0 auto;
padding: 0;*/
display: block;
}
nav ul li p.leave a {
    /*width: 400px;*/
	width: 100%!important;
    height: 60px;
    font-size: 30px;
    line-height: 60px;
color: #fff;
background: #000;
text-align: center;
text-decoration: none;
margin: 0 auto;
padding: 0;
display: block;
}
nav ul li p.leave a:hover {
    /*width: 400px;*/
	width: 100%!important;
    height: 60px;
    font-size: 30px;
    line-height: 60px;
color: #fff;
background: #333;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
p.note {
font-size: 20px;
line-height: 28px;
text-align: center;
color: #000;
margin: 0;
}
#banners_box {
    margin: 50px auto 30px auto;
    max-width: 370px;
}
#banners_box table{
    width: 100%;
}
#banners_box table td{
    width: 20%;
}
#banners_box table img{
    width: 100%;
    height: auto;
}


}







@media screen and (min-width:300px) and (max-width:375px) {
.pc {
display: none;
}
.tab {
display: none;
}
.sp {
display: none;
}
.sp_s {
display: block;
}

section.wrapper {
	width: 100vw;
	height: auto;
	min-height: 100vh;
	margin: 0;
	padding: 0;
  position: relative;
}
.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
	max-width: 320px;
	margin: 0 auto;
}
h1 {
    width: 100%;
    height: 0;
    margin: 0 auto 0 auto;
    padding: 19% 0 0 0;
    background: url(../images/index_logo.png) no-repeat center center;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-size: contain;
}
div.main_sps {
	max-width: 320px;
	width: 100%;
	height: 284px;
	margin: 20px auto 0 auto;
	padding: 0;
	background: url("../images/smart/index_infobase_s.png") no-repeat center center;
}
div.main_sps h2 {
    margin: 0;
    padding: 20px 0 5px 0;
    font-size: 20px;
    line-height: 36px;
    color: #403d3c;
    text-align: center;
}
section.main_sps h2 span {
	color: #ff5392;
}
nav {
width: 240px;
height: 160px;
margin: 0 auto 0 auto;
padding: 0;
}
nav ul {
font-size: 0px;
margin: 0;
padding: 0;
}
nav ul li {
width: 240px;
height: auto;
text-align: center;
text-decoration: none;
margin: 0 0 10px 0;
padding: 0;
list-style-type: none;
}
nav ul li p.read {
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
    margin: 0;
    padding: 0;
}
nav ul li p.read span {
font-size: 20px;
}
nav ul li p.enter a {
    width: 240px;
    height: 40px;
    font-size: 24px;
    line-height: 40px;
    color: #fff;
    background: #ff689f;
    text-align: center;
    text-decoration: none;
    margin: 0;
    padding: 0;
    display: block;
}
nav ul li p.enter a:hover {
width: 240px;
height: 40px;
font-size: 30px;
line-height: 40px;
color: #fff;
background: #ff005d;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
nav ul li p.leave a {
    width: 240px;
    height: 40px;
    font-size: 24px;
    line-height: 40px;
    color: #fff;
    background: #000;
    text-align: center;
    text-decoration: none;
    margin: 0;
    padding: 0;
    display: block;
}
nav ul li p.leave a:hover {
width: 240px;
height: 40px;
font-size: 30px;
line-height: 40px;
color: #fff;
background: #333;
text-align: center;
text-decoration: none;
margin: 0;
padding: 0;
display: block;
}
p.note {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #000;
    margin: 0;
}
#banners_box {
    margin: 50px auto 30px auto;
    max-width: 310px;
}
#banners_box table{
    width: 100%;
}
#banners_box table td{
    width: 20%;
}
#banners_box table img{
    width: 100%;
    height: auto;
}


}