@charset "utf-8";
/* CSS Document */

@import url(../../assets/font-awesome/css/font-awesome.min.css);

@font-face {
    font-family: 'original';
    src: url('../../assets/font/original.woff') format('woff'),
    url('../../assets/font/original.woff2') format('woff2'),
    url('../../assets/font/original.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

html {
    color: #333;
    background: #FFF;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset, img {
    border: 0;
}

address, caption, cite, code, dfn, em, th, var {
    font-style: normal;
    font-weight: normal;
}

ol, ul {
    list-style: none;
}

caption, th {
    text-align: left;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before, q:after {
    content: '';
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
}

input, textarea, select {
    *font-size: 100%;
}

legend {
    color: #000;
}

#yui3-css-stamp.cssreset {
    display: none;
}

body {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
    font-size: 16px;
    background: #b3e7e6;
}

a, a img, input {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

a img:hover {
    opacity: 0.7;
}

.indent-text {
    text-indent: -1em;
    margin-left: 1em;
}

.container {
    margin: 0 auto;
    padding: 0 0 5em;
    width: 960px;
    position: relative;
    background: #ffffff;
}

header {
    background: url(../img/main_img_bg.png) no-repeat top right;
    padding: 1.5em 1em;
    position: relative;
}

header .head_read {
    color: #00ccff;
}

header .head_read dt {
    font-size: 24px;
    font-weight: bold;
    font-family: 'original';
    line-height: 1.2;
}

header .head_read dd {
    font-size: 20px;
    font-weight: bold;
}

header .tit {
    position: relative;
    font-family: 'original';
    margin: 2em 0 0em;
}

header .tit h1 {
    text-shadow: 0 0 13px #0092c2, 0 0 13px #0092c2, 0 0 0.10px #0092c2;
    font-size: 72px;
    color: #ffffff;
    font-weight: bold;
    line-height: 1.3em;
}

header .tit h1 small {
    font-weight: bold;
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}

header .tit span {
    position: absolute;
    display: block;
    background: #ff9900;
    color: #ffffff;
    padding: 0 .8em;
    font-weight: bold;
    left: 400px;
    top: -35px;
    line-height: 2em;
}

header .tit span::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #ff9900 transparent transparent transparent;
    border-width: 10px 10px 0 10px;
}

header .description {
    width: 400px;
    line-height: 1.9;
    font-size: 18px;
    font-weight: bold;
}

header .main_img {
    position: absolute;
    right: -20px;
    top: 20px;
}

.point {
    background: #00b5ac;
    border-radius: 5px 0 0 5px;
    margin-left: 1em;
    overflow: hidden;
    padding: .5em;
}

.point dt {
    border-radius: 5px;
    background: #ffffff;
    float: left;
    padding: 0 1.2em;
}

.point dt h2 {
    font-size: 28px;
    font-weight: bold;
    color: #00b5ac;
    line-height: 6.3em;
}

.point dd {
    margin-left: 250px;
    margin-top: 28px;
    font-size: 18px;
}

.point dd strong {
    color: #fcf003;
    font-size: 22px;
    font-weight: bold;
}

.point dd ul {
    margin-left: 4em;
    color: #ffffff;
}

.point dd ul li {
    list-style: disc;
}

.point dd ul li span {
    margin-left: -3em;
    margin-right: 1em;
}

.cont_list {
    margin: 2em 1em;
}

.cont_list > dt {
    padding: 1em 0;
}

.cont_list > dt h3 {
    font-weight: bold;
    font-size: 24px;
    color: #0098db;
    font-family: 'original';
}

.cont_list > dt h3::before {
    content: "■";
}

.cont_list > dd > ul {
    margin-left: 1em;
}

.cont_list > dd > ul > li::before {
    content: "●";
    margin-left: -1em;
}

.cont_block {
    border-radius: 5px;
    border: #ee1795 solid 2px;
    margin: 2em 1em;
}

.cont_block > dt {
    text-align: center;
    padding: .5em;
    background: #f386a7;
    color: #ffffff;
    font-size: 24px;
}

.cont_block > dt h3 {
    display: inline-block;
    font-weight: bold;
    font-family: 'original';
}

.cont_block > dd {
    padding: 1em 2em;
    overflow: hidden;
}

.cont_block .content {
    display: table;
    margin: 0 -15px;
}

.cont_block .content dl {
    display: table-cell;
    padding: 0 15px;
}

.cont_block .content dl dt h4 {
    color: #0098db;
    font-weight: bold;
    white-space: nowrap;
}

.cont_block .content dl dd li {
    white-space: nowrap;
}

.privacy_seal {
    position: relative;
}

.privacy_seal img {
    float: right;
}

.required p, .required p:after, .required p:before, .required p span {
    content: "";
    width: 58px;
    height: 58px;
    background-color: #ff0099;
    position: absolute;
    top: 0px;
}

.required, .required p, .required p:after, .required p:before {
    -webkit-transform: rotate(22.5deg);
    -moz-transform: rotate(22.5deg);
}

.required p span {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    text-align: center;
    z-index: 999;
    line-height: 58px;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
}

.required {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    position: absolute;
    width: 58px;
    height: 58px;
    background-color: #ff0099;
    margin: 20px 0 0 20px;
    left: 430px;
    bottom: 90px;
}

.price_list {
    margin: 0 1em 1em;
}

.price_list > dt {
    color: #0098db;
    margin: .5em 0;
}

.price_list > dt > h4 {
    font-weight: bold;
    display: inline-block;
    font-size: 20px;
}

.price_list > dt > h4::before {
    content: "●";
    margin-left: -1em;
}

.price_list dd {
    padding: .5em 0 1em;
}

.price_list dd span {
    font-weight: bold;
    color: #f05988;
}

.price {
    overflow: hidden;
}

.price dl {
    display: block;
    /*float: left;*/
    margin: 0 2em 1em 0;
}

.price dt {
    font-weight: bold;
}

.price dd table {
    border: #0098db solid 1px;
    border-collapse: collapse;
    width: 100%;
}

.price dd th {
    background: #0098db;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    padding: .5em;
}

.price dd td {
    border: #0098db solid 1px;
    padding: .5em 1em;
    text-align: right;
    background: #e9f5fd;
    color: #0098db;
    font-weight: bold;
}

.price dd tr td:nth-child(1) {
    color: #000000;
}

.btn_block {
    text-align: center;
}

.btn_block .btn {
    display: block;
    width: 60%;
    border-radius: 40px;
    margin: 1em auto;
    background: #da63af;
    font-size: 30px;
    text-decoration: none;
    font-weight: bold;
    color: #000000;
    line-height: 2.5;
    border: #e89dcc solid 1px;
    box-shadow: 0px -15px 0px -1px #d2529f inset,
    0 0 0 2px #cb3b8f;
    text-shadow: 2px 2px 1px #fff,
    -2px 2px 1px #fff,
    2px -2px 1px #fff,
    -2px -2px 1px #fff;
}

.btn_block .btn:hover {
    background: #e89dcc;
    box-shadow: 0px -15px 0px -1px #f38dce inset,
    0 0 0 2px #cb3b8f;
}

.btn_block .btn:disabled{
    background: #e89dcc;
    box-shadow: 0px -15px 0px -1px #f38dce inset,
    0 0 0 2px #cb3b8f;
    color: #666666;
}

.recaptcha{
    margin-top: 2em;
    display: flex;
    justify-content: center;
}

/*バナーダウンロード*/

.bnr_dl {
    margin: 2em 1em;
}

.bnr_dl > dt {
    padding: 1em 0;
}

.bnr_dl > dt h3 {
    font-weight: bold;
    font-size: 24px;
    color: #0098db;
    font-family: 'original';
}

.bnr_dl > dt {
    color: #0098db;
    margin: .5em 0;
}

.bnr_dl > dt > h4 {
    font-weight: bold;
    display: inline-block;
    font-size: 20px;
}

.bnr_dl > dt > h4::before {
    content: "●";
}

.bnr_dl > dd > dl {
    margin: 3em 2em 2em;
    border-top: #0098db dotted 2px;
    border-bottom: #0098db dotted 2px;
    position: relative;
}

.bnr_dl > dd > dl > dt {
    position: absolute;
    top: -20px;
    background: #0098db;
    padding: .2em 1em;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}

.bnr_dl > dd > dl > dd {
    padding: 1.5em 0;
}


.bnr_dl ul {
    margin-left: 1em;
}

.bnr_dl li {
    padding: .3em 0 .3em 1em;
}

.bnr_dl li::before {
    content: "●";
    margin-left: -1em;
}

/*バナー申込フォーム*/

.form_main_img {
    position: absolute;
    width: 400px;
    height: auto;
    right: -20px;
    top: 0px;
}

.form_content header {
    height: 270px;
}

.form_content .description {
    font-size: 14px;
    width: 580px;
    line-height: 1.5em;
}

.form_block {
    margin: 2em;
}

.form_block > dt > h2 {
    font-family: 'original';
    font-size: 24px;
    color: #0098db;
}

.form_block > dt > h2::before {
    content: "■";
}

.form_block > dd {
    padding: 1em 0;
}

.form_tbl {
    border: #EE1795 solid 2px;
    border-radius: 5px;
    overflow: hidden;
    background: #f386a7;
    margin: .5em 0;
}

.form_tbl dt {
    text-align: center;
    padding: 1.2em 0;
    color: #ffffff;
    font-size: 20px;
    float: left;
    width: 250px;
    font-weight: bold;
    box-sizing: border-box;
}

.form_tbl dt:nth-of-type(2),
.form_tbl dd:nth-of-type(2) {
    border-top: #EE1795 solid 2px;
}

.form_tbl dd {
    padding: 1.5em;
    margin-left: 250px;
    box-sizing: border-box;
    background: #fff;
}

input[type=text] {
    padding: .2em;
    width: 90%;
}

div.error {
    position: absolute;
    background: #EE1795;
    padding: .5em 1em;
    color: #FFF;
    margin: .5em;
    font-size: 15px;
    border-radius: 5px; /* CSS3草案 */
    -webkit-border-radius: 5px; /* Safari,Google Chrome用 */
    -moz-border-radius: 5px; /* Firefox用 */
}

div.error:after {
    right: 76%;
    top: -27%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(204, 0, 0, 0);
    border-bottom-color: #EE1795;
    border-width: 8px;
    margin-top: -5px;
}

/*バナーダウンロードページ*/

.bnr_block {
    margin: 2em;
}

.bnr_block > dt > h2 {
    font-family: 'original';
    font-size: 24px;
    color: #0098db;
}

.bnr_block > dt > h2::before {
    content: "■";
}

.bnr_block > dd {
    padding: 1em 0;
}

.bnr_block ul {
    margin-left: 1em;
}

.bnr_block li {
    padding: .3em 0 .3em 1em;
}

.bnr_block li::before {
    content: "●";
    margin-left: -1em;
}

.bnr_box {
    border: #EE1795 solid 2px;
    border-radius: 5px;
    overflow: hidden;
    margin: 2em 0 0;
    padding: 2em;
    background: #ffd7f1;
}

.bnr_box dt {
    float: left;
    width: 400px;
}

.bnr_box dd {
    margin-left: 400px;
}

.bnr_box .btn {
    display: block;
    text-align: center;
    border-radius: 40px;
    margin: 1em auto;
    background: #da63af;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    color: #000000;
    line-height: 2.5;
    border: #e89dcc solid 1px;
    box-shadow: 0px -15px 0px -1px #d2529f inset,
    0 0 0 2px #cb3b8f;
    text-shadow: 2px 2px 1px #fff,
    -2px 2px 1px #fff,
    2px -2px 1px #fff,
    -2px -2px 1px #fff;
}

.bnr_box .btn:hover {
    background: #e89dcc;
    box-shadow: 0px -15px 0px -1px #f38dce inset,
    0 0 0 2px #cb3b8f;
}


.bnr_present {
    background: url("../img/bnr_present.gif");
    padding: .5em 1em 0;
    box-sizing: border-box;
    overflow: hidden;
}

.bnr_present_circle {
    background: #ED028C;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    padding: 1.4em 0 0;
    box-sizing: border-box;
    float: left;
    line-height: 1;
}

.bnr_present_circle dt {
    font-size: 1.5rem;
    padding: 0;
    margin: 0;
}

.bnr_present_circle dd {
    font-size: 2.3rem;
    padding: 0;
    margin: 0;
}

.bnr_present_tit {
    float: left;
    margin: 1.5em 1.4em 0;
}

.bnr_present_tit dt {
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    color: #fcf003;
    font-size: 34px;
    font-weight: bold;
}

.bnr_present_tit dd {
    text-align: right;
    color: #ffffff;
}

.foot_bnr_present {
    background: url("../img/bnr_present.gif");
    margin: 5em 10px 0;
    padding: .5em 1em 0;
    box-sizing: border-box;
    overflow: hidden;
    filter: alpha(opacity=95);
    -moz-opacity: 0.95;
    opacity: 0.95;
}


.btn_s_block .btn {
    display: inline-block;
    padding: 0 2em;
    border-radius: 40px;
    margin: 1em auto;
    background: #da63af;
    font-size: 16px;
    text-decoration: none;
    font-weight: bold;
    color: #000000;
    line-height: 2.5;
    border: #e89dcc solid 1px;
    box-shadow: 0px -15px 0px -1px #d2529f inset,
    0 0 0 2px #cb3b8f;
    text-shadow: 2px 2px 1px #fff,
    -2px 2px 1px #fff,
    2px -2px 1px #fff,
    -2px -2px 1px #fff;
}

.btn_s_block .btn i {
    font-size: 18px;
    margin-right: .5em;
}

.btn_s_block .btn:hover {
    background: #e89dcc;
    box-shadow: 0px -15px 0px -1px #f38dce inset,
    0 0 0 2px #cb3b8f;
}

/* 20200318 */

.change_point {
    border: #529A53 solid 2px;
    margin: 5em 1em 0;
    padding: 1em 1em 1em 1.9em;
    border-radius: 5px;
    text-indent: -.9em;
}

.change_point h3 {
    font-weight: bold;
    font-size: 24px;
    color: #529A53;
}

.change_point h4 {
    font-weight: bold;
    font-size: 18px;
    color: #7abf08;
}