@charset "utf-8";
/*
-------------------------------------------------- */

/* ========================================
pc
======================================== */

/* index
-------------------------------------------------- */

body, td, th, input {
    -webkit-font-smoothing: antialiased;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
    font-size: 18px;
}
body {
    margin: 0;
    text-align: center;
}
a:link {
    color: #0080ff;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6, p {
    font-weight: normal;
    margin: 0 0 10px;
}
h1 {
    font-size: 27px;
}
h2 {
    font-size: 24px;
}
h3 {
    font-size: 21px;
}
ul {
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    justify-content: space-around;
    -webkit-flex-wrap: nowrap; /* Safari */
    flex-wrap: nowrap;
    margin: 0 auto;
}
ul.flex li {
    -webkit-flex-grow: 1; /* Safari */
    flex-grow: 1;
}
img {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
a img {
    border: none;
}
header, footer {
/*    background-image: url(./landing_header.jpg); */
    background-position: top center;
    background-repeat: repeat;
    padding: 20px 0;
}
.hero {
    background-image: url(./landing_hero-bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 0;
}
.contentBlock01 {
    background-image: url(./landing_bg01.jpg);
    background-position: top center;
    background-repeat: repeat;
    padding: 20px 0;
}
.contentBlock01 ul, .contentBlock03 ul, .contentBlock04 ul, .contentBlock05 ul, .contentBlock06 h2, .contentBlock06 div, .contentBlock06 ul, .contentBlock06 p {
    width: 980px;
}
.contentBlock01 li {
    text-align: center;
    width: 16.66%;
}
.contentBlock01 img {
    border: solid 1px #333;
}
.contentBlock01 div {
    font-size: 0.6em;
}
.contentBlock02 {
    background-image: url(./landing_bg02.jpg);
    background-position: top center;
    background-repeat: repeat;
    padding: 20px 0;
}
.contentBlock02 li:last-child {
    margin: 10px 0 0;
}
.contentBlock03 {
    background: #000;
    background-image: url(./landing_bg03.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    border-top: solid 1px #C90;
    color: #FFF;
    padding: 20px 0;
}
.contentBlock03 ul {
    margin: auto;
}
.contentBlock03 li {
    font-size: 18px;
    text-align: justify;
}
.contentBlock03 li:last-child {
    margin: 10px 0 0;
}
.contentBlock03 h2 {
    color: #C90;
    font-size: 30px;
}
.contentBlock03 .color01 {
    color: #FC0;
}
.contentBlock03 .color02 {
    color: #C09;
}
.contentBlock03 .color03 {
    color: #09C;
}
.contentBlock04 {
    background: #000;
    background-image: url(./landing_bg04.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    border-top: solid 1px #C90;
    border-bottom: solid 1px #C90;
    color: #FFF;
    padding: 20px 0;
}
.contentBlock04 p {
    margin: 10px 0 0;
}
.contentBlock05 {
    background: #152024;
    background-image: url(./landing_bg05.jpg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFF;
    padding: 20px 0;
}
.contentBlock05 ul {
    background: #FFF;
    margin: auto;
    padding: 20px 0;
    zoom: 1;
    filter: alpha(opacity=90);
    opacity: 0.90;
}
.contentBlock05 li {
    color: #000;
    font-size: 18px;
    margin: 10px 0;
    padding: 0 20px;
    text-align: justify;
}
.contentBlock05 li.h2 {
    text-align: center;
}
.contentBlock05 li.h3 {
    background: #152024;
    color: #FFF;
    margin: 0 20px;
    text-align: center;
}
.contentBlock05 em {
    color: #C30;
    font-style: normal;
}
.contentBlock05 dl {
    margin: 10px;
    padding: 0;
}
.contentBlock05 dd {
    margin: 0;
    padding: 0;
}
.contentBlock06 {
    background: #FFF;
    background-image: url(./landing_bg06.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 20px 0;
}
.contentBlock06 h2, .contentBlock06 div, .contentBlock06 ul, .contentBlock06 p {
    margin: auto;
}
.contentBlock06 div {
    padding: 10px 0;
    text-align: justify;
}
.contentBlock06 p {
    padding: 10px 0 0;
}
.contentBlock06 ul.chart {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
    flex-wrap: wrap;
    border: solid 1px #333;
    border-bottom: none;
    font-size: 18px;
}
.contentBlock06 ul.chart li {
    background: #EEE;
    border-bottom: solid 1px #333;
    line-height: 40px;
    text-align: left;
    text-indent: 10px;
    vertical-align: middle;
    width: 50%;
}
.contentBlock06 ul.chart li.bronze {
    background: #600;
    color: #FFF;
}
.contentBlock06 ul.chart li.silver {
    background: #666;
    color: #FFF;
}
.contentBlock06 ul.chart li.gold {
    background: #960;
    color: #FFF;
}
.contentBlock06 ul.chart li.gray {
    background: #006;
    color: #FFF;
}
.contentBlock07 {
    background: #333;
    background-image: url(./landing_bg07.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px 0 0;
}
.contentBlock07 ul {
    margin: auto;
    width: 800px;
}
.contentBlock07 li {
    display: inline-block;
    margin: 0 10px 20px;
}
.contentBlock08 {
    background: #FFF;
    background-image: url(./landing_bg08.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    border-bottom: solid 1px #666;
    font-size: 0;
    padding: 20px 0 10px;
}
.joinForm {
    background: #FFF;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 1px #333;
    position: fixed;
    top: 10px;
    left: 10px;
    zoom: 1;
    filter: alpha(opacity=90);
    opacity: 0.90;
    width: 440px;
}
.joinForm form {
    margin: 0;
    padding: 10px;
}
.joinForm h2 {
    background: #003;
    color: #FC0;
    height: 40px;
    line-height: 42px;
    margin: 0 0 10px;
    padding: 0;
    vertical-align: middle;
}
.joinForm p, .joinForm li, .joinForm input {
    font-size: 14px;
    text-align: justify;
}
.joinForm li {
    margin: 0 0 8px;
}
.joinForm em {
    color: #C06;
    font-style: normal;
}
.joinForm input[type="text"], .joinForm input[type="email"], .joinForm input[type="password"] {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 1px #CCC;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-indent: 10px;
    vertical-align: middle;
    width: 100%;
}
.joinForm input[type="submit"], .joinForm .registerBtn {
    -webkit-appearance: none;
    background: #003366;
    border: solid 1px #003;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    height: 50px;
    _line-height: 40px;
    text-align: center;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
    vertical-align: middle;
    _width: 160px;
}
.joinForm input[type="submit"]:hover, .joinForm .registerBtn:hover {
    background: #FC0;
    border: solid 1px #960;
    color: #000;
}
input[type="checkbox"] {
    vertical-align: middle;
}
.joinForm .chex {
    display: inline;
}
.up {
    bottom: 10px;
    display: inline;
    line-height: 1.0em;
    position: fixed;
    right: 10px;
}
.up a {
    color: #C09;
    font-size: 48px;
}
.up a:hover {
    color: #0F0;
    text-decoration: none;
}

.label-danger {
    background-color: #d9534f;
}
.label {
    border-radius: 0.25em;
    color: #fff;
    display: inline;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    padding: 0.2em 0.6em 0.3em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}

/*
-------------------------------------------------- */
/* laptop 1600x1200 1440x900
-------------------------------------------------- */

@media only screen and (max-width: 1600px) {
/*
-------------------------------------------------- */

.joinForm {
    position: relative;
    top: auto;
    left: auto;
    margin: 20px auto;
}
/*
-------------------------------------------------- */
}

/*
-------------------------------------------------- */

/* ========================================
end of pc
======================================== */

/* ========================================
mobile
======================================== */

/*
-------------------------------------------------- */
/* tablet
-------------------------------------------------- */

@media only screen and (max-width: 980px) {
/*
-------------------------------------------------- */

ul, .contentBlock06 h2, .contentBlock06 div, .contentBlock06 ul, .contentBlock06 p {
    width: 100% !important;
}
.contentBlock01, .contentBlock02, .contentBlock03, .contentBlock04, .contentBlock05, .contentBlock06, .contentBlock07, .contentBlock08 {
    padding: 20px;
}
img {
    max-width: 100%;
}
.contentBlock01 p {
    text-align: justify;
}
.contentBlock01 li, .contentBlock06 li {
    margin: 0 5px;
}
.contentBlock06 ul.chart {
    display: block;
}
.contentBlock06 ul.chart li {
    margin: 0;
    width: auto;
}
.contentBlock07 ul {
    width: auto;
}
.contentBlock01 img, .contentBlock04 img, .contentBlock06 li img {
    width: 100%;
}
/*
-------------------------------------------------- */
}

/*
-------------------------------------------------- */
/* smartphones (landscape-iphone6plus=736px)
-------------------------------------------------- */

@media only screen and (max-width: 736px) {
/*
-------------------------------------------------- */

.contentBlock01, .contentBlock02, .contentBlock03, .contentBlock04, .contentBlock05, .contentBlock06, .contentBlock07, .contentBlock08 {
    padding: 15px;
}
/*
-------------------------------------------------- */
}

/*
-------------------------------------------------- */
/* smartphones (landscape-iphone6=667px)
-------------------------------------------------- */

@media only screen and (max-width: 667px) {
/*
-------------------------------------------------- */

.contentBlock01, .contentBlock02, .contentBlock03, .contentBlock04, .contentBlock05, .contentBlock06, .contentBlock07, .contentBlock08 {
    padding: 10px;
}
h1 {
    font-size: 16px;
}
/*
-------------------------------------------------- */
}

/*
-------------------------------------------------- */
/* smartphones (landscape-iphone5=568px)
-------------------------------------------------- */

@media only screen and (max-width: 568px) {
/*
-------------------------------------------------- */

body {
    font-size: 14px;
}
h1 {
    font-size: 14px;
    font-weight: bold;
}
.contentBlock03 h2 {
    font-size: 24px;
}
.contentBlock03 li, .contentBlock05 li {
    font-size: 14px;
}
/*
-------------------------------------------------- */
}

/*
-------------------------------------------------- */
/* smartphones (landscape-iphone4=480px)
-------------------------------------------------- */

@media only screen and (max-width: 480px) {
/*
-------------------------------------------------- */

.contentBlock06 ul.chart {
    font-size: 12px;
}
.contentBlock06 ul.chart li {
    line-height: 30px;
    text-indent: 5px;
}
/*
-------------------------------------------------- */
}

/*
-------------------------------------------------- */
/* smartphones (portrait-iphone6plus=414px)
-------------------------------------------------- */

@media only screen and (max-width: 414px) {
/*
-------------------------------------------------- */

.joinForm {
    border: none;
    margin: 0;
    width: 100%;
}
.joinForm p, .joinForm li {
    font-size: 12px;
}
header, footer {
    padding: 20px;
}
/*
-------------------------------------------------- */
}

/*
-------------------------------------------------- */
/* smartphones (portrait-iphone6=375px)
-------------------------------------------------- */

@media only screen and (max-width: 375px) {
/*
-------------------------------------------------- */

/*
-------------------------------------------------- */
}

/*
-------------------------------------------------- */
/* smartphones (portrait-iphone4/5=320px)
-------------------------------------------------- */

@media only screen and (max-width: 320px) {
/*
-------------------------------------------------- */

/*
-------------------------------------------------- */
}

/*
-------------------------------------------------- */

/* ========================================
end of mobile
======================================== */