@charset "UTF-8";

/* CSS Document */


/*-------------------------------------------------------------------
Common style
-------------------------------------------------------------------*/

a {
    cursor: pointer;
    color: #3b94d9;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a img {
    border: none;
}

a:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}

img {
    max-width: 100%;
    height: auto;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #444;
    height: 100%;
    background: #fff;
}

input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
}


/*-------------------------------------------------------------------
TOP
-------------------------------------------------------------------*/

.section-in {
    width: 940px;
    margin: 0 auto;
    padding: 30px 50px 40px;
    overflow: hidden;
}

#top-lead {
    background: #f9f9f9;
}

#top-lead .section-in {
    display: flex;
    justify-content: space-between;
    padding: 60px 50px;
}

#top-lead .section-in div.info-left {
    width: 46%;
}

#top-lead .section-in div.info-right {
    width: 50%;
}

h2#tc_desc {
    font-size: 1.3em;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

td.disabled {
    background-color: #eee !important;
    color: #666 !important;
}

.introduce-code {
    font-size: 18px;
}

.input-text {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 15px;
}

.btn-small {
    color: #fff;
    background-color: #f39700;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-size: 15px;
}

.btn-small[disabled] {
    background-color: #ccc;
    cursor: default;
}

.btn-small:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}

#top-section {
    overflow: hidden;
    background: url(../../img/top-bg.jpg) no-repeat bottom;
    background-size: cover;
}

#top-section .section-in {
    padding-top: 15px;
    min-height: 370px;
    box-sizing: content-box;
}

#top-logo {
    text-align: right;
    font-size: 12px;
}

#top-logo img {
    vertical-align: middle;
    margin-right: .5rem;
}

.top-left h1 {
    margin-bottom: 0.2em;
    font-size: 1.5rem;
}

.top-left .logo {
    margin-top: 3rem;
}

h2#tc_catch {
    font-size: 1.3em;
    margin-bottom: 1.5em;
}

.top-left #top-sns iframe {
    width: 80px;
}

.top-left #top-sns {
    margin-top: 2em;
}

.sns-btn {
    display: inline-block;
    vertical-align: top;
}

#calnews .news {
    list-style: none;
    padding: 0;
}

#calnews li {
    border-bottom: 0.9px solid #efefef;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#teranews.news dt {
    border-bottom: 0.9px solid #efefef;
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: flex;
}

span.news-tag-i,
span.news-tag-m,
span.news-tag-t,
span.new-icon {
    color: #fff;
    font-size: 10px;
    display: inline-block;
    min-width: 85px;
    text-align: center;
    vertical-align: top;
    line-height: 1rem;
    height: 1rem;
    margin: 0 .5rem;
}

span.news-tag-i {
    background: #00a2d9;
    border: 1px solid #008bbb;
}

span.news-tag-m {
    background: #f74e14;
    border: 1px solid #cd3704;
}

span.news-tag-t {
    background: #f6c600;
    border: 1px solid #fdce0D;
}

span.new-icon {
    background: #F44336;
    border: 1px solid #FF5722;
    min-width: 40px;
    margin-left: 1em;
}

#info-section {
    background: #FFF;
    overflow: hidden;
}

#info-section h2 {
    margin-bottom: 2em;
}

.info-text {
    margin-top: 0;
}

.client-d {
    margin: 0;
}

.client-d img {
    margin: 0 3px;
}

.info-text-client {
    font-size: 12px;
    margin: 2em 0 0.5em;
}

#plan-section {
    background: #FB9700;
    padding: 1em 0 1em;
    margin-bottom: 2em;
}

#plan-section h2 {
    color: #fff;
    margin: 0 0 0.5em;
}

#news-section .section-in {
    padding-bottom: 30px;
}

.banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 3em;
}

.banner-box {
    width: 24%;
    border: 2px solid #F74E14;
    box-sizing: border-box;
    margin-bottom: 1em;
    border-radius: 3px;
    padding: 5px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}

.banner-box a {
    display: block;
    color: #444;
    text-align: center;
    border-radius: 3px;
    padding: 10px 0;
}

.banner-box a:hover {
    text-decoration: none;
    background: #fff5e7;
}

.banner-box a:hover img {
    opacity: 1;
}

.banner-box p {
    padding: 0;
    margin: 0;
}

span.banner-title1 {
    display: block;
    /* font-weight: bold; */
    font-size: 0.8em;
    margin-bottom: 0.3em;
}

span.banner-title2 {
    font-size: 1.1em;
    font-weight: bold;
}

.banner-box img {
    display: block;
    width: 40%;
    margin: 0 auto 0.5em;
}

#footer-section {
    background: #eee;
    border-top: 0.9px solid #ddd;
}

#footer-section .f-flx {
    display: flex;
    font-size: 0.9em;
}

#footer-section .f-flx .f-flx-box {
    flex: 1;
}

#footer-section .f-flx .f-flx-box3 {
    flex: 0.5;
}

#footer-sns {
    text-align: left;
    margin-bottom: 2em;
}

#footer-section h3 {
    font-size: 1em;
    color: #777;
}

#footer-sns a {
    margin: 0 0.5em 0.5em;
    color: #444;
    display: block;
}

#footer-sns i {
    margin-right: 0.5em;
}

#bottom-logo {
    text-align: left;
}

.footerlink {
    list-style: none;
    border-left: 1px solid #ddd;
    padding-left: 1.5em;
    text-align: left;
}

.footerlink li {
    margin-bottom: 0.5em;
}

.footerlink li:before {
    content: '\f0da';
    color: #f74e14;
    font-family: FontAwesome;
    margin-right: 0.5em;
    font-size: 14px;
}

.footerlink li a {
    color: RGB(15, 15, 30)
}

.flink-main {}

p.address {
    color: #fff;
    font-size: 0.7em;
    margin-top: 1em;
    background: #444;
    padding: 0.5em 0;
    text-align: center;
    margin-bottom: 0;
}

.top-banner {
    text-align: center;
    margin: 0px auto 10px auto;
}

.top-banner img {
    max-width: 100%;
}

#top-campaign {
    display: flex;
    margin: 2em 0;
    flex-wrap: wrap;
}

.top-campaign-article {
    border: 1px solid #aaa;
    padding: 3px;
    box-sizing: border-box;
    width: 300px;
    margin: 0 6px 1em;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.07);
}

.top-campaign-article p {
    margin: 0;
    height: 130px;
    background: #efefef;
    overflow: hidden;
}

.top-campaign-article p.top-campaign-article-link {
    margin: 0;
    padding: 0.5em;
    background: #fff;
    height: auto;
    line-height: 1.5em;
    font-size: 0.9em;
}

.top-campaign-article p.top-campaign-article-link a {
    vertical-align: middle;
    display: inherit;
    height: auto;
    color: #444;
}

.top-campaign-article img {
    width: 100%;
    vertical-align: top;
}


/*-------------------------------------------------------------------
TOP-price
-------------------------------------------------------------------*/

.price-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.price-table-free {
    background: #fff;
    width: 24%;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 1em;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.price-table-premire {
    background: #fff;
    width: 24%;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 1em;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

.price-table-premire-title,
.price-table-free-title {
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
    background: #f74e14;
    border-radius: 3px;
    padding: 0.7em 0 0.5em;
}

.price-table-free-title {
    color: #707070;
    background: #e0e0e0;
}

span.ptpt-sub {
    display: block;
    font-size: 0.8em;
    font-weight: normal;
}

.price-table-premire-cap,
.price-table-free-cap {
    text-align: center;
    font-weight: bold;
    color: #f74e14;
    font-size: 1.1em;
    line-height: 1.1em;
    padding-top: 1em;
}

.price-table-free-cap {
    color: #777;
    font-size: 1em;
    line-height: 1.2;
    margin-bottom: 1.4rem;
}

span.cap-large {
    font-size: 2em;
}

.price-table-premire p,
.price-table-free p {
    text-align: center;
    color: #666;
    font-weight: bold;
}

.cap-small {
    font-weight: normal;
    font-size: 1rem;
    display: block;
    margin-top: 0.4em;
}

.price-table-free hr,
.price-table-premire hr {
    border: 0;
    border-top: 0.9px solid #e0e0e0;
}

.price-table-free ul,
.price-table-premire ul {
    font-size: 0.8rem;
    color: #888;
    padding-left: 2rem;
}


/*-------------------------------------------------------------------
Subpage
-------------------------------------------------------------------*/

#header {
    background: #f39700;
    height: 45px;
}

#header h1 {
    margin: 0;
    padding: 0;
    height: 45px;
}

#header h1 img {
    margin: 6px 6px 0;
}

#path {
    font-size: 12px;
    color: #999;
    margin-top: 1em;
}

#main {
    width: 940px;
    margin: 0 auto;
    padding: 0 50px 40px;
    overflow: hidden;
    background: #fff;
    line-height: 1.8em;
}

#main h2 {
    color: #FB9700;
    border-bottom: 3px solid #FB9700;
    padding-bottom: 0.5em;
    margin: 1.5em 0;
    line-height: 1.3em;
    font-size: 1.6em;
}

#pagetitle h1 {
    font-size: 1.8rem;
    padding: 2rem 0 0.5rem;
}

#main h3 {
    color: #FB9700;
    border-bottom: 2px solid #ccc;
    padding-bottom: 0.5em;
    font-size: 1.4em;
}

#main h4 {
    color: #2a2a2a;
    font-size: 1.2em;
}

#main p {
    text-align: justify;
    text-justify: inter-ideograph;
}

.cam-sns {
    padding-bottom: .5em;
    padding-top: 0;
}

.cam-sns div {
    line-height: 84px;
    margin: 1em 0;
}

.cam-sns div img {
    vertical-align: middle;
}

.cam-info {
    border-radius: 10px;
    padding: 20px;
}

#main .cam-info h3 {
    color: #BF5700;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    margin-bottom: 0;
}

.btn-regist a {
    background: #f90;
    width: 70%;
    display: block;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    text-decoration: none;
    padding: 0.5em 0;
    border-radius: 5px;
    font-weight: bold;
    font-size: 20px;
    text-shadow: -1px -1px 0 #BF5700;
    transition: all 0.3s ease;
}

.wp_image_caption {
    font-size: 12px;
}

.submenu-ul {
    list-style: none;
    padding: 0 1em;
}

.submenu-ul li a {
    display: block;
    border-radius: 5px;
    padding: 1.1em 2em 1em;
    margin-bottom: 0.5em;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-shadow: -1px -1px 0 RGBA(0, 0, 0, .3);
    background: url(../img/buret-white.png) no-repeat 1em center #E95413;
}

.mailform {
    width: 90%;
    margin: 1em auto;
}

.mailform td {
    padding: 10px;
}

.mailform input,
.mailform textarea {
    padding: 0.5em;
    border: 1px solid #CCC;
    border-radius: 3px;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;
}

.mailform select {
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    font-size: 16px;
    max-width: 100%;
}

.wp_mailform_btn {
    text-align: center;
    margin-bottom: 2em;
}

.wp_mailform_btn input {
    padding: 0.5em 1.5em;
    border-radius: 3px;
    border: none;
    background: #FB9700;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    margin: 0 0.5rem;
}

.wp_mailform_btn input:hover {
    background: #EC8D00;
}

.wp_mailform_btn input.mailform_back {
    background: #9E9E9E;
}

.wp_mailform_btn input.mailform_reedit {
    background: #c5c5c5;
    margin-left: 0.5em;
}

input:disabled,
textarea:disabled {
    background: #eee;
    color: #888;
}

.faq-box {
    display: none;
    margin: 1em 3em 2em;
    font-size: 14px;
    background: url(../img/form-bg.jpg);
    padding: 0.5em 1.5em;
    border-radius: 5px;
}

.support h4 {
    margin: 0;
    padding: 0.5em;
    cursor: pointer;
    line-height: 2em;
    background: center #f0f0f0;
    padding-left: 20px;
    margin-bottom: 1em;
    text-shadow: 1px 1px 0 #fff;
    border-left: 3px solid #E95413;
    margin-top: 2em;
}

.support h4 a {
    color: #444;
    text-decoration: none;
}

.support ul.supportlist {
    padding: 0;
    list-style: none;
}

.support ul.supportlist ul {
    list-style: none;
}

.support ul.supportlist2,
.support ul.supportlist2 ul {
    list-style: none;
    padding-left: 1em;
}

ul.supportlist li {
    box-sizing: border-box;
    padding: 3px 0 3px 1em;
}

ul.supportlist2 li {
    box-sizing: border-box;
    padding: 3px 0 3px 1em;
}

ul.supportlist li:before,
ul.supportlist2 li:before {
    content: '\f0da';
    padding: 0 .5em 0 0;
    font-family: FontAwesome;
    color: #FB9700;
    vertical-align: top;
}

ul.supportlist li a,
ul.supportlist2 li a {
    color: #444;
    display: inline-block;
    width: 95%;
}

.supportnavi {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.supportnavi a {
    background: #ececec;
    padding: 1em;
    text-align: center;
    color: #676767;
    text-decoration: none;
    border-radius: 3px;
    width: 21%;
}

.supportnavi a:hover {
    background: #eee;
    text-decoration: none;
}

.supportnavi a img {
    height: 50px;
}

#main ul,
#main ol {
    line-height: 1.8em;
}

.col-box {
    margin: 1em 1em 2em;
    font-size: 14px;
    padding: 0.5em 1.5em;
    border-radius: 5px;
}

#main table {
    width: 100%;
    margin: 1.5em auto;
    border: 0.9px solid #D5D2B9;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.9em;
}

#main th {
    padding: 10px;
    border: 0.9px solid #D5D2B9;
    background: #f9f9f5;
    text-align: center;
    font-weight: normal;
}

#main td {
    padding: 10px;
    border: 0.9px solid #D5D2B9;
    vertical-align: top;
    background: #fff;
}

#main .mypagetable1 th {
    width: 250px;
}

input#contractfilter:checked~table tr.licencedisable {
    display: none;
}

.width50 {
    width: 50%
}

.float-left {
    float: left;
}

.about-image {
    float: left;
}

.about-text {
    float: left;
    width: 50%;
    padding: 10px;
}

#teranews img {
    vertical-align: top;
}

.formtd2 {
    background: #FBFBFB;
}

.formtd2 label {
    display: block;
}

.formtd1 {
    max-width: 250px;
}

.apps-main {
    display: flex;
    flex-wrap: wrap;
}

.apri-box {
    width: 25%;
    box-sizing: border-box;
    padding: 1em;
}

.apri-box h5 {
    padding: 0;
    background: none;
    margin: 0;
    font-size: 90%;
    font-weight: bold;
    line-height: 1.4em;
}

.support .apri-box h5:before {
    content: none;
}

.apri-box p {
    font-size: 80%;
    color: #777;
    line-height: 1.5em;
    margin: 0.3em 0;
}

.apri-box ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.apri-box ul a {
    font-size: 90%;
}

.apri-box ul li:before {
    content: '\f0da';
    color: #FB9700;
    font-family: FontAwesome;
    margin-right: 0.5em;
}

.hrgray {
    margin: 2em 0;
    border: none;
    border-bottom: 1px solid #ddd;
    clear: both;
}

.paragraph-end {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='#00ffffff', EndColorStr='#ffffff');
    bottom: 0;
    height: 1.5em;
    max-height: 100%;
    position: absolute;
    right: 0;
    width: 20px;
}

#info-section .section-in {
    padding: 50px;
}

#info-section .section-in hr {
    border-bottom: 0.9px solid #ccc;
    border-top: 0;
    margin: 1.5em 0;
    border-left: 0;
}

.info-left {
    display: table-cell;
    vertical-align: middle;
}

.info-left img {
    vertical-align: middle;
}

.info-right {
    display: table-cell;
    vertical-align: middle;
    padding-left: 5em;
}

#info-section h2,
#news-section h2 {
    color: #FB9700;
    margin: 0 0 0.5em;
}

.client-d {
    margin-top: 1em;
}

.client-d a {
    display: inline-block;
    margin-bottom: .4rem;
}

.client-d a:before {
    content: '\f0da';
    color: #f74e14;
    font-family: FontAwesome;
    margin-right: 0.5em;
}

.info-text-client {
    margin: 1em 0 0.5em;
}

.lpo-reg-btn a {
    display: block;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    text-shadow: -1px -1px 0 #D87201;
    padding: 0.5em 0;
    text-align: center;
}

.lpo-reg-btn a:hover {
    background: #FAAE3B;
}

div.clear {
    font-size: 0;
    height: 0;
}

#main dd {
    margin-bottom: .7em;
}

#main .nostyle h2 {
    border-bottom: none;
    padding-bottom: 0;
}

#main .nostyle h2 img {
    vertical-align: top;
}

#main hr {
    border: none;
    border-bottom: 0.9px solid #ccc;
    margin: 2em 0;
}

.wp_licenceform_btn {
    text-align: center;
}

.wp_licenceform_btn input {
    background: #f60;
    border: none;
    color: #fff;
    border-radius: 5px;
    padding: 0.5em 2em;
    font-family: inherit;
    cursor: pointer;
}

.wp_licenceform td {
    padding: 15px !important;
}

.wp_licenceform .formtd1 {
    background: #EFEFE9;
    width: 35%;
}

.wp_licenceform .mail-text {
    width: 80%;
}

.wp_licenceform_agreement {
    text-align: center;
    margin-bottom: 1em;
    font-size: 14px;
}

.cp-sns-btn {
    text-align: center;
}

.cp-sns-btn iframe {
    width: 105px;
    height: 21px;
}

.cp-sns-btn .fb_iframe_widget {
    top: -7px;
}

div.btn-strong {
    padding: 10px 0;
}

div.btn-strong a {
    background: #f60;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
}

div.btn-strong a:hover {
    background: #EB5E00;
}

#bottom-application {
    text-align: center;
    margin: 3em 0 3em;
}

#bottom-application p {
    font-size: 80%;
    color: #888;
    line-height: 1.8em;
}

#bottom-application a {
    padding: 1em 5em;
    margin: 0 2em;
    width: auto;
}

#main pre {
    background: #444;
    color: #fff;
    border-radius: 3px;
    padding: 1em;
    margin: 1.5em 0;
    overflow-x: auto;
}

#main pre::-webkit-scrollbar {
    height: 10px;
    box-shadow: inset #828282 0 0 5px;
}

#main pre::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

#main pre::-webkit-scrollbar-thumb {
    background: #b7b7b7;
    border-radius: 10px;
    box-shadow: inset #717171 0 0 5px;
}


/*-------------------------------------------------------------------
Subpage - client
-------------------------------------------------------------------*/

ul.menu-nav,
ul.app-nav {
    list-style-type: none;
    padding: 0;
    border-bottom: 2px solid #d3d3d3;
    margin: 2em 0;
}

ul.menu-nav label {
    display: block;
    cursor: pointer;
    color: #fff;
    padding: 7px 15px;
}

ul.menu-nav label:hover {
    background: #ffaf35;
    border-radius: 3px 3px 0 0;
}

input#menu1,
input#menu2,
input#menu3,
input#menu4,
input#menu5,
input#menu6,
input#menu7,
input#menu8,
input#menu9 {
    display: none;
}

ul.menu-nav li,
ul.app-nav li {
    display: inline-block;
    vertical-align: top;
    margin-right: 0.1em;
    background: #FB9700;
    border-radius: 3px 3px 0 0;
}

ul.app-nav li {
    cursor: pointer;
    color: #fff;
    padding: 7px 15px;
    background: #ccc;
}

ul.app-nav li.active {
    background: #FB9700;
}

div.menu-desc {
    margin-top: 0;
    display: none;
}

input:checked+div.menu-desc {
    display: block;
}


/*---tab menu2---*/

div.menu-desc.active {
    display: block;
}

#main ul.tab {
    list-style: none;
    border-bottom: 2px solid #FB9700;
    padding-left: 0;
}

ul.tab li {
    display: inline-block;
    padding: 0.5em 1em;
    background: #ccc;
    color: #fff;
    cursor: pointer;
}

ul.tab li.active {
    background: #FB9700;
}

.login-maintenance {
    display: table-cell;
    height: 250px;
    text-align: center;
    vertical-align: middle;
    width: 300px;
}

.center {
    text-align: center !important;
}

.right {
    text-align: right !important;
}

.account-btn {
    text-align: center;
    display: block;
}

.account-btn a {
    background: #f74e14;
    color: #fff;
    text-decoration: none;
    font-size: 110%;
    padding: 0.7em 3em;
    margin: 0 auto;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    border-radius: 3px;
}

.f-right.loggedin-box {
    width: 310px;
}

.account-btn a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
}

#campaignlist {
    margin: 0;
    border: 0.9px solid #ddd;
    padding: 1.5em 2em;
}

#campaignlist li {
    list-style: none;
    padding: 0.3em 0;
}

#campaignlist li:before {
    content: '\f054';
    padding: 0 .5em 0 0;
    font-family: FontAwesome;
    color: #FB9700;
}

#top-campaign-banner {
    width: 370px;
}

#top-campaign-banner img {
    max-width: 100%;
    height: auto;
}

#top-campaign-banner ul {
    list-style: none;
    padding-left: 0;
}

#top-campaign-banner ul li {
    background: url(../img/buret.png) no-repeat left 0.3em;
    padding-left: 12px;
}

#top-campaign-banner ul li a {
    font-weight: bold;
}

.mailform_notes,
.mailform_requiredmark {
    color: red;
    font-weight: bold;
    font-size: 90%;
}

#main td.formtd1 {
    background: #fbfaf3;
}

.leave-account {
    text-align: right;
}

.leave-account a:before {
    content: '\f0da';
    padding: 0 .5em 0 0;
    font-family: FontAwesome;
    color: #FB9700;
}

#news img {
    max-width: 100%;
    height: auto;
}

div.attention {
    border: 0.9px solid #FB9700;
    padding: 1em;
    box-sizing: border-box;
    background: #fff8ed;
    margin-top: 1em;
}

#news-section #news p {
    padding: 0;
    margin: 0 0 5px;
}

#app-attention {
    font-size: 85%;
    line-height: 1.5em;
    border: 0.9px solid #ccc;
    padding: 1em;
}

.licencedisable {
    color: #ccc;
}

.licecnce-icon-gray,
.licecnce-icon-green {
    font-size: 12px !important;
    margin-right: 0.3em;
}

.licecnce-icon-gray {
    color: #F44336;
}

.licecnce-icon-green {
    color: #8BC34A;
}

.status_premium {
    color: #00BCD4;
}

a.regist-btn.btn-gray {
    background: #ccc;
    cursor: text;
}

a.regist-btn.btn-gray:hover {
    background: #ccc;
}

.bold {
    font-weight: bold;
}

.premire-table1 {
    z-index: 10;
    box-shadow: 0 2px 4px 2px #ccc;
}

.border img {
    border: 1px solid #ccc;
}

span.icon-free {
    background: #ccc;
    border-radius: 3px;
    color: #fff;
    text-align: center;
    font-size: .7rem;
    vertical-align: middle;
    padding: .2rem .3rem;
}

span.icon-premium {
    background: #00BCD4;
    border-radius: 3px;
    color: #fff;
    text-align: center;
    font-size: .7rem;
    vertical-align: middle;
    padding: .2rem .3rem;
}

span.icon-bonus {
    background: #8bc34a;
    border-radius: 3px;
    color: #fff;
    text-align: center;
    font-size: .7rem;
    vertical-align: middle;
    padding: .2rem .3rem;
}

.licencedisable span.icon-free,
.licencedisable span.icon-premium,
.licencedisable span.icon-bonus {
    background: #e6e6e6;
}


/*-------------------------------------------------------------------
Mypage
-------------------------------------------------------------------*/

#main p.share-btn {
    margin: 0.5em 0;
}

.myp-sns-btn {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 2px solid;
    font-size: 18px;
    text-align: center;
    line-height: 25px;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    position: relative;
}

.twitter.myp-sns-btn {
    color: #232323;
}

.facebook.myp-sns-btn {
    color: #4267B2;
}

.line.myp-sns-btn {
    color: #19BC03;
}

.mail.myp-sns-btn {
    color: #e92415;
}

.myp-sns-btn img {
    width: 20px;
    vertical-align: middle;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.myp-sns-btn i {
    vertical-align: middle;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 17px;
}

#introduce-copy-text {
    border: none;
    font-size: 24px;
    font-weight: bold;
    width: 4.5em;
}

#webdav-copy-text {
    border: none;
    font-size: 1rem;
    padding-left: 0;
    color: #444;
    font-weight: normal;
}

#password-copy-text {
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    background: none;
    padding: 0;
    color: #DE5323;
    outline: none;
    border-radius: 0;
    text-align: center;
}

#introduce-copy,
#webdav-copy,
#password-copy {
    width: 20px;
}

#webdav-copy,
#password-copy {
    vertical-align: top;
    margin-left: 10px;
}

#introduce-copy-msg,
#webdav-copy-msg,
#password-copy-msg {
    color: #8BC34A;
    font-size: 14px;
    padding-left: 1em;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.app-password {
    border: 0.9px solid #D5D2B9;
    background: #f9f9f5;
    text-align: center;
    font-weight: normal;
    width: 70%;
    margin: auto;
}

.app-password-dialog .ngdialog-buttons {
    text-align: center;
}

.offdisplay {
    opacity: 0;
    display: none;
}

.ondisplay {
    opacity: 1;
    display: inherit;
}

#main p.text-center {
    text-align: center;
}

.small {
    font-size: 0.8em;
}

.plan-icon {
    background: #ccc;
    display: inline-block;
    padding: 5px 6px;
    height: 18px;
    vertical-align: middle;
    line-height: 1em;
    color: #fff;
    font-weight: bold;
    border-radius: 3px;
    font-size: 10px;
    box-sizing: border-box;
    margin-right: 0.3em;
}

.pi-premium {
    background: #00BCD4;
}

.pi-free {
    background: #999;
}

.pi-premiumbonus {
    background: #FF5722;
}

.pi-bonus {
    background: #607D8B;
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

.blockquote {
    background: #f7f7f7;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    border: 0.9px solid #e7e7e7;
}

.passform {
    margin-bottom: 5rem;
}

.passform input {
    font-size: 1rem;
}

.passform button {
    font-size: 1rem;
    padding: 0.4rem 1rem;
}

.passform .error {
    font-size: 0.9rem;
    color: red;
}

.ngdialog.ngdialog-theme-default .ngdialog-content {
    background: #fff !important;
    font-size: 1rem;
}

.changemail {
    border-radius: 0;
    border: 2px solid #ccc;
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-size: 15px;
}

.btn-modal-orange1 {
    color: #fff;
    background-color: #f39700;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: .5rem;
    min-width: 110px;
    margin: .5rem .5rem;
    font-size: 15px;
}

.btn-modal-gray1 {
    color: #fff;
    background-color: #9e9e9e;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: .5rem;
    min-width: 110px;
    margin: .5rem .5rem;
    font-size: 15px;
}

.password-msg {
    margin: 1rem;
    font-size: 0.8rem;
}

.error-msg {
    color: #f44336;
    font-size: 0.9rem;
    padding: 0 .5rem;
}

.mypagetable1 label {
    margin-right: 1rem;
}

.mail-not-receive-disable {
    color: #ccc;
}

.ngdialog-buttons {
    text-align: center;
}

.mail-error {
    display: block;
    text-align: center;
}

button.btn-modal-orange1:disabled {
    background: #ccc;
}

div#search {
    margin: 1rem;
    text-align: center;
}

input.search_word {
    padding: 0rem 1rem;
    border: 1px solid #9e9e9e;
    border-radius: 5px;
    height: 2.5rem;
    width: 70%;
}

input.search_submit {
    background: #f74e14;
    padding: .6rem 1rem;
    border-radius: 5px;
    border: none;
    height: 2.5rem;
    font-weight: bold;
    color: #fff;
    letter-spacing: .5rem;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    vertical-align: top;
}

.last-verified{
    font-size: 0.7rem;
    color: #FB9700;
}

/*-------------------------------------------------------------------
Pricetable for mediaquery
-------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
    .price-table-free {
        width: 49%;
        font-size: 0.9em;
        margin-bottom: 2%;
    }
    .price-table-premire {
        width: 49%;
        font-size: 0.9em;
        margin-bottom: 2%;
    }
    span.cap-small {
        font-size: 0.8em;
        padding-top: 10px;
        display: block;
    }
    .price-table-premire p,
    .price-table-free p {
        font-size: 0.9em;
    }
}


/*-------------------------------------------------------------------
mediaquery for tablet
-------------------------------------------------------------------*/

@media screen and (min-width: 769px) and (max-width: 1000px) {
    .section-in {
        width: auto;
        padding: 15px;
    }
    #top-lead .section-in {
        display: block;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    .f-left {
        float: left;
        text-align: center;
        width: 40%;
        margin-top: 1em;
    }
    .f-right {
        float: right;
        width: auto;
        margin-top: 1em;
    }
    .f-right img {
        width: 30%;
    }
    #fb-widget iframe {
        max-width: 95%;
        margin: 0 auto;
    }
    #news-section .section-in {
        text-align: center;
    }
    #tw-widget {
        float: right;
        width: 50%;
        margin: 0 auto;
    }
    #fb-widget {
        float: left;
    }
    #info-section h2 {
        margin-bottom: 1em;
    }
    #top-lead .section-in div.info-left {
        display: table-cell;
        vertical-align: middle;
        margin: 1em auto;
        text-align: center;
        width: 40%;
    }
    #top-lead .section-in div.info-right {
        display: table-cell;
        float: none;
        width: auto;
        text-align: left;
        padding-left: 50px;
    }
    .f-right.login-box {
        width: 310px;
    }
    .f-right.loggedin-box {
        width: 310px;
    }
    .top-left h2 {
        margin-top: 1em;
    }
    #sns-btn-fb {
        width: 120px;
    }
    #sns-btn-hatebu {
        float: none;
    }
    .sns-btn {
        width: 100px;
    }
    p.infield input {
        width: auto;
    }
    .plan-price {
        padding: 10px 10px;
    }
    .campaign-price {
        width: auto;
    }
    #news {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 2em 0;
    }
    #news-section #news p {
        padding: 0;
        margin: 0 0 5px;
        width: 49%;
    }
    #footer-section li {
        text-align: left;
        display: block;
        width: auto;
        margin-right: 15px;
        margin-bottom: 1em;
    }
    #info-section .section-in {
        padding: 30px 15px;
    }
    h2#tc_catch {
        margin-top: 0;
    }
    h2#tc_desc {
        margin-top: 0.5em;
    }
    .top-left201403 {
        margin-top: 3em;
        padding: 0 10px;
        width: 45%;
    }
    .top-left201403 h1 {
        margin: 0;
    }
    .login.primary {
        width: 100%;
    }
    .regist-btn,
    .login.primary {
        padding: 1em 1.5em;
        display: block;
        line-height: inherit;
        width: 90%;
        margin: 0 auto;
    }
    .regist {
        text-align: center;
        padding: 0;
    }
    #main {
        width: auto;
    }
    #main h2 {
        font-size: 28px;
    }
    #main ul {
        padding-left: 20px;
    }
    #main ul.menu-nav {
        padding: 0;
    }
    ul.menu-nav li {
        display: block;
        margin-bottom: 5px;
    }
    #main h4 {
        font-size: 18px;
        margin-bottom: 10px;
    }
    #main table {
        table-layout: fixed;
        width: 100%;
        word-break: break-all;
    }
    #main table th,
    #main table td {
        padding: 5px;
    }
    .footerlink {
        text-align: left;
    }
    #plan-section h2 {
        font-size: 26px;
    }
    .apri-box {
        width: 19%;
        vertical-align: top;
        display: inline-block;
    }
    .top-left {
        width: 50%;
        float: left;
        margin-top: 30px;
        margin-left: 20px;
    }
    .top-left h1 {
        font-size: 1.3rem;
    }
    .header-banner {
        height: auto;
    }
    .header-banner .header-banner-img {
        width: 100%;
    }
    .header-banner-close {
        position: absolute;
        top: 15px;
        left: 90%;
    }
    .top-banner-pc {
        display: none;
    }
    .top-banner-sp {
        display: inherit;
    }
    .price-table {
        padding: 0;
    }
    #top-campaign {
        justify-content: center;
    }
    .top-campaign-article {
        width: 30%;
    }
}


/*-------------------------------------------------------------------
mediaquery for smartphone
-------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
    .section-in {
        width: auto;
        padding: 2em 15px;
    }
    #top-lead .section-in {
        display: block;
        padding: 2em 1.5em;
        max-width: 500px;
        box-sizing: border-box;
    }
    .top-left {
        width: auto;
        float: none;
        margin-top: 0;
        margin-bottom: 1em;
        background: rgba(255, 255, 255, 0.9);
        padding: 1em 0 0.5em;
    }
    #top-lead .section-in div.info-left,
    #top-lead .section-in div.info-right {
        width: auto;
        font-size: 0.9em;
    }
    #top-section .section-in {
        padding: 0;
        min-height: auto;
    }
    #top-logo {
        display: none;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    .f-left {
        float: none;
        text-align: center;
        width: auto;
    }
    .f-right {
        float: none;
        width: auto;
        margin-top: 1em;
    }
    .f-right img {
        width: 30%;
    }
    #fb-widget iframe {
        max-width: 100%;
        margin: 0 auto;
        max-height: 300px;
    }
    #news-section .section-in {
        text-align: center;
    }
    #plan-section {
        padding: 0;
    }
    #tw-widget {
        float: none;
        width: 100%;
        margin: 0 auto;
    }
    #tw-widget iframe {
        max-height: 300px;
    }
    #fb-widget {
        float: none;
        clear: both;
    }
    #info-section h2 {
        margin-bottom: 1em;
        font-size: 130%;
    }
    .info-left {
        display: block;
        vertical-align: middle;
        margin-bottom: 2em;
    }
    #top-lead .info-left img {
        display: block;
        width: 80%;
        margin: 0 auto;
    }
    .info-right {
        display: block;
        padding-left: 0;
    }
    .f-right.login-box {
        width: auto;
        margin: 0 0.5em 0.5em;
    }
    #main {
        width: auto;
        padding: 0 1.5em 2em;
        line-height: 1.6em;
        font-size: 0.9em;
    }
    #main #path {
        line-height: 1.2;
    }
    .f-right.loggedin-box {
        width: auto;
    }
    #sns-btn-hatebu {
        float: none;
    }
    .sns-btn {
        width: 100px;
        display: inline-block;
    }
    .plan-price {
        padding: 10px 0;
    }
    .price-table-free ul,
    .price-table-premire ul {
        padding-left: 1rem;
    }
    .campaign-price {
        width: auto;
    }
    #news {
        width: 100%;
        text-align: left;
        float: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #news p {
        width: 100%;
    }
    #footer-section li {}
    #info-section .section-in {
        padding: 30px 15px;
    }
    h2#tc_catch {
        text-align: center;
        font-size: 0.9em;
        margin: 0;
    }
    h2#tc_desc {
        margin-top: 1em;
        font-size: 1.2em;
    }
    .top-left #top-sns {
        display: none;
    }
    .top-left201403 {
        margin-top: 0;
        padding: 0;
    }
    .top-left h1 {
        margin: 0;
        z-index: 10000;
        width: 100%;
        text-align: center;
        height: 55px;
        font-size: 18px;
    }
    .top-left h1 img {
        margin-top: 7px;
        max-width: 50%;
        height: auto;
        max-height: 40px;
    }
    .top-left .logo {
        margin: 0;
        text-align: center;
    }
    .top-left .logo img {
        width: 70%;
    }
    #teranews {
        font-size: 0.9em;
    }
    .login.primary {
        width: 100%;
    }
    .regist-btn,
    .login.primary {
        padding: 1em 1.5em;
        display: block;
        line-height: inherit;
        width: auto;
    }
    .login.primary {
        margin: 0 15px;
    }
    .regist {
        text-align: center;
        padding: 0 15px;
    }
    #bottom-application a {
        padding: 1em 0;
        margin: 0 2em;
    }
    #main h2 {
        font-size: 130%;
        margin: 1em 0;
    }
    #main h3 {
        font-size: 120%;
    }
    #main ul {
        padding-left: 20px;
    }
    #main ul.menu-nav,
    #main ul.app-nav {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    ul.menu-nav li,
    ul.app-nav li {
        display: inline-block;
        width: 49.5%;
        margin: 0 0 1%;
        box-sizing: border-box;
    }
    #main h4 {
        margin-bottom: 10px;
    }
    #main .mypagetable1 table {
        font-size: 0.9em;
    }
    #main .mypagetable1 table tr {
        display: block;
    }
    #main .mypagetable1 table th {
        text-align: left;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    #main .mypagetable1 table td {
        text-align: left;
        display: block;
    }
    .h-scroll {
        overflow: auto;
        white-space: nowrap;
    }
    .h-scroll table {
        width: auto !important;
        font-size: 0.9em;
    }
    .h-scroll::-webkit-scrollbar {
        height: 5px;
    }
    .h-scroll::-webkit-scrollbar-track {
        background: #F1F1F1;
    }
    .h-scroll::-webkit-scrollbar-thumb {
        background: #BCBCBC;
    }
    #plan-section h2 {
        font-size: 26px;
    }
    .apri-box {
        width: 50%;
        vertical-align: top;
        display: inline-block;
        padding: 0.5em;
    }
    #main .apri-box ul {
        padding: 0;
    }
    .account-btn a {
        font-size: 18px;
    }
    .mypagetable1 input {
        max-width: 100%;
        box-sizing: border-box;
    }
    .app-password {
        width: auto;
        padding: 0 1rem;
    }
    .ngdialog.ngdialog-theme-default .ngdialog-content {
        max-width: 90%;
        padding: 1em;
    }
    .ngdialog.ngdialog-theme-default .ngdialog-content .input-text {
        width: 100%;
        box-sizing: border-box;
        margin: .5rem 0;
    }
    #main .h-scroll th,
    #main .h-scroll td {
        display: table-cell;
        min-width: unset;
        box-sizing: border-box;
    }
    div#top-campaign-banner {
        text-align: left;
        font-size: 90%;
        width: auto;
        box-sizing: border-box;
        margin: 0 1em;
    }
    .top-campaign-article {
        margin: 1%;
        width: 48%;
    }
    .top-campaign-article p {
        height: auto;
    }
    .top-campaign-article p:first-child {
        height: 60px;
    }
    .banner-box {
        width: 49%;
        font-size: 0.8em;
    }
    div.sp-clearbox,
    .sp-clear {
        float: none;
        width: auto !important;
    }
    .header-banner {
        height: auto;
    }
    .header-banner .header-banner-img {
        width: 100%;
    }
    .header-banner-close {
        position: absolute;
        top: 15px;
        left: 90%;
    }
    .top-banner-pc {
        display: none;
    }
    .top-banner-sp {
        display: inherit;
    }
    .supportnavi a {
        width: 40%;
        margin-bottom: 2%;
    }
    .support ul.supportlist,
    .support ul.supportlist2 {
        display: block;
        padding-left: 0 !important;
    }
    ul.supportlist li,
    ul.supportlist2 li {
        width: auto;
        padding: 0.3em 0;
    }
    iframe {
        max-width: 100%;
    }
    #teranews.news dt a {
        display: inline-block;
    }
    #footer-section .f-flx {
        display: block;
        font-size: 0.9em;
        padding: 0 2em;
    }
    .wp_image_caption {
        max-width: 100%;
        color: #9E9E9E;
    }
    #main div.menu-desc ol {
        padding-left: 1.5em;
        margin-left: 0;
    }
    #main .mailform {
        width: 100%;
    }
    #main .mailform td {
        display: block;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        max-width: 100%;
    }
    #main .mailform td textarea {
        display: block;
        width: 100%;
    }
    #main .mailform tr {
        display: block;
        width: 100%;
    }
    input#webdav-copy-text {
        border: 0.9px solid #D5D2B9;
        width: 80%;
        padding: 0.2rem .2rem;
        box-sizing: border-box;
    }
    #password-copy-text {
        font-size: 1.2rem;
        display: block;
        width: 100%;
        margin-bottom: .5rem;
    }
    #pagetitle h1 {
        font-size: 1.5rem;
        padding: 2rem 0 0.5rem;
        line-height: 2rem;
    }
    div#search {
        margin: 1rem 0;
    }
    input.search_word {
        width: 50%;
    }
}