@charset "utf-8";
/* CSS Document */
/* # =================================================================
   # body / A / img
   # ================================================================= */
body {
  color: #333;
  line-height: 1.5;
  letter-spacing: .02em;
}
A,
A::after {
  text-decoration: none;
  color: #333;
  transition: 0.3s;
  font-weight: 700;
}
.formatlink A {
	color: #3588D1;
}
.formatlinkline A {
	color: #3588D1;
	text-decoration: underline;
}
.formatlink.formatred A {
	color: #FA0F0C;
}
.outlink A {
	display: block;
	position: relative;
	margin-top: 8px;
	line-height: 100%;
}
.outlink A::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: -3px;
	width: 25px;
	height: 20px;
	background-image: url("../img/icon_link.svg");
	background-size: 20px 20px;
	background-position: right center;
}
A.anchorlink {
	display: inline-block;
	padding-left: 22px;
	position: relative;
	margin-top: 5px;
}
A.anchorlink::before {
	content: "";
  width: 20px;
	height: 20px;
	display: inline-block;
	position: absolute;
	top: -1px;
	left: 0px;
	background-image: url("../img/icon_anchor.svg");
	background-size: 20px 20px;
	background-position: left center;
}
.lhover A::after {
  content: "";
	display: block;
	width: 1px;
	height: 1px;
	background-color: transparent;
}
.valignmiddle {
  vertical-align: middle;
}
.shadow {
  -webkit-filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.08));
  -moz-filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.08));
  -ms-filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.08));
  filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, 0.08));
}
_::-webkit-full-page-media, _:future, :root .shadow {
    transform: translateZ(0);
}
A.shadow:hover {
  -webkit-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.1));
  -moz-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.1));
  -ms-filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.1));
}
.shadowbox {
	box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .08);
}
A.shadowbox:hover {
	box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
.boxshadow {
  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
.txtshadow {
  text-shadow:
    rgba(0, 0, 0, 0.1) 1px 1px 8px, rgba(0, 0, 0, 0.1) -1px 1px 8px, rgba(0, 0, 0, 0.1) 1px -1px 8px, rgba(0, 0, 0, 0.1) -1px -1px 8px;
}
.wtxtshadow {
  text-shadow:
    rgba(255, 255, 255, 0.3) 1px 1px 5px, rgba(255, 255, 255, 0.3) -1px 1px 5px, rgba(255, 255, 255, 0.3) 1px -1px 5px, rgba(255, 255, 255, 0.3) -1px -1px 5px;
}
.brradius {
	border-radius: 10px;
}
.overlay::after, .overlaydark::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.overlay::after {
  background-color: rgba(0, 0, 0, 0.3);
}
.overlaydark::after {
  background-color: rgba(0, 0, 0, 0.5);
}
.slinbox {
display: inline-block;
overflow: hidden;
}
.slinbox .slinimage {
opacity: 0;
}
.slinplay {
position: relative;
opacity: 1!important;
}
.slinplay::before {
animation-name: maskOut;
animation-duration: .5s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-image: linear-gradient(rgba(255,255,255,1) 11.2%, rgba(255,255,255,1) 91.1% );
}

.sllate::before {
animation-delay: .5s;
}

@keyframes maskOut {
  from {
    transform: translateX(0);
  }
  
  to {
    transform: translateX(100%);
  }
}
.format {
  font-size: 77%;
}
.formatcolor {
  color: #3588D1;
}
.formatcheck {
  color: #E82970;
}
.formatred {
	color: #FA0F0C;
}
.formatbold {
  font-weight: 700;
}
.formatma {
	margin: 3px 0px;
}
.formatpa {
  padding: 5px 0px;
}
.langen {
  font-family: 'Josefin Sans', sans-serif;
  word-break: normal;
  font-weight: 400;
}
.langnum {
  font-family: 'Rubik', sans-serif;
  word-break: normal;
  font-weight: 400;
	letter-spacing: 0;
}
.phonemode {
  display: none;
}
.video {
position: relative;
height: 0;
padding: 0 0 56.25%;
overflow: hidden;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* # =================================================================
   # Form
   # ================================================================= */
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=password], textarea, select {
  width: 100%;
  border: 3px solid #E0DFE3;
	border-radius: 5px;
  padding: 10px;
  font-size: 14px;
  transition: 0.5s;
}
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=password] {
  height: 50px;
}
input[type=file] {
  max-width: 100%;
}
.select {
	position: relative;
}
.select::after {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 15px;
 margin: auto;
 content: "";
 vertical-align: middle;
 width: 15px;
 height: 15px;
 border-top: 3px solid #CCC;
 border-right: 3px solid #CCC;
 -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
	z-index: -1;
}
.select.formerror::after {
 top: 30px;
 bottom: auto;
}
input[type=radio], input[type=checkbox] {
  margin-right: 7px;
  cursor: pointer;
}
.global_btn A, input[type=submit], input[type=button], input[type=reset], button {
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  display: inline-block;
  cursor: pointer;
  border: none;
}
input[type="search"]:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="url"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {
  border: 3px solid #3588D1;
  background-color: #EEFAFA;
  outline: 0;
  color: #333;
}
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
  box-shadow: none;
}
input[type="button"], input[type="submit"] {
  -webkit-appearance: none;
}
input[type="button"]:disabled, input[type="submit"]:disabled {
  opacity: 0.4;
}
input::placeholder, textarea::placeholder {
  color: #999;
}
/* Edge */
input::-ms-input-placeholder, input::-ms-textarea-placeholder {
  color: #999;
}
.form_step {
	margin-top: 20px;
}
.form_step ul {
	justify-content: center;
}
.form_step .step_data {
	position: relative;
}
.form_step .step_label {
	display: inline-block;
	text-align: center;
	font-weight: 700;
	color: #DEDEDE;
	font-size: 14px;
}
.form_step .step_label::before {
	content: "1";
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 5px;
	border-radius: 40px;
	text-align: center;
	line-height: 35px;
	border: 3px solid #DEDEDE;
	color: #DEDEDE;
}
.form_step .active .step_label {
	color: #3588D1;
}
.form_step .active .step_label::before {
	background-color: #3588D1;
	border: 3px solid #3588D1;
	color: #FFF;
	font-family: 'Josefin Sans', sans-serif;
}
.form_step .step2 .step_label::before {
	content: "2";
}
.form_step .step3 .step_label::before {
	content: "3";
}
.form_step .step4 .step_label::before {
	content: "4";
}
.form_step .step5 .step_label::before {
	content: "5";
}
.form_step .step_data::after {
	content: "";
	display: inline-block;
	width: 70px;
	height: 3px;
	background-color: #E0DFE3;
	position: relative;
	top: -60%;
	top: -60%;
}
.form_step .step_data:last-child::after {
  width: 0px;
	height: 0px;
	background-color: transparent;
}
.form_element,
.inner_form_element{
  padding: 10px 0px;
}
.form_title {
	font-size: 16px;
	font-weight: 700;
}
.form_title.form_subtitle {
	font-size: 14px;
	font-weight: 500;
}
.form_inner_box {
	padding: 20px 0px 15px;
	border-bottom: 1px solid #E0DFE3;
}
.required {
	color: #DA667A;
}
.from_desc {
	font-size: 10px;
	margin: 10px 0px;
}
.from_desc ul {
	margin-left: 25px;
}
.from_desc li {
	list-style-type: disc;
	margin: 3px 0px;
}
.complete_data {
	display: block;
	padding: 0px 10px;
	font-color: #000;
	font-weight: 500;
}
.checkbox input[type="checkbox"]{
  display: none;
}
.checkbox input[type="checkbox"]+label{
  display: none;
  cursor: pointer;
  display: inline-block;
  position: relative;
  padding-left: 35px;
  padding-right: 10px;
	text-align: left;
}
.checkbox input[type="checkbox"]+label::before{
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  margin-top: -11px;
  left: 0;
  top: 50%;
  border: 2px solid #E0DFE3;
  border-radius: 5px;
  background-color: #FFF;
}
.checkbox input[type="checkbox"]:checked+label::after{
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
  width: 18px;
  height: 9px;
  margin-top: -5px;
  top: 50%;
  left: 4px;
  transform: rotate(-45deg);
  border-bottom: 3px solid;
  border-left: 3px solid;
  border-color: #3588D1;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.radio-inline__input {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
}

.radio-inline__label {
  display: block;
  padding: 3px;
  border-radius: 10px;
  transition: all .2s;
	cursor: pointer;
	/*margin: 6px;*/
	margin: 3px;
}
/*
.startup .radio-inline__label {
  margin-right: 3px;
}*/
.advanced .radio-inline__label {
  margin-left: 0px;
}
/*
 .basic .radio-inline__label {
   margin-left: 3px;
}*/
.basic .radio-inline__label {
  margin-right: 0px;
}

.radio-inline__input:checked + .radio-inline__label {
  background: #3588D1;
}

.basic .radio-inline__input:checked + .radio-inline__label {
  background: #49BE97;
}

.advanced .radio-inline__input:checked + .radio-inline__label {
  background: #D15C70;
}

.btn_box {
	padding: 15px 0px;
}

.global_btn {
	width: 90%;
	margin: 20px auto 0px;
}

#entry #plan .global_btn {
	margin-top: 5px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}

.global_btn A,
.global_btn input[type="button"],
.global_btn input[type="submit"],
.global_btn input[type=reset],
.global_btn button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	background-color: #3588D1;
	border-radius: 5px;
	color: #FFF;
	font-weight: 700;
	text-align: center;
	transition: .3s;
	font-size: 16px;
	margin: auto;
}

.global_btn.formatdark {
	margin-top: 20px;
}

.global_btn.btnsmall {
	width: 50%;
}

.global_btn.formatdark A,
.global_btn.formatdark input[type="button"],
.global_btn.formatdark input[type="submit"],
.global_btn.formatdark input[type=reset],
.global_btn.formatdark button {
	background-color: #555;
}

.global_btn.btnsmall A,
.global_btn.btnsmall input[type="button"],
.global_btn.btnsmall input[type="submit"],
.global_btn.btnsmall input[type=reset],
.global_btn.btnsmall button {
	padding: 8px;
	font-size: 14px;
}

.global_btn A {
	display: block;
}

.btn_top_desc {
	font-size: 14px;
}

/* ok/error */
.formok_desc,
.formerror_desc {
	display: flex;
	align-items: center;
  padding-top: 8px;
	color: #D24059;
	font-size: 12px;
	font-weight: 700;
	line-height: 120%;
}

.formok_desc {
	color: #3588D1;
}

.formerror_desc {
	color: #D24059;
}

.formok_desc::before,
.formerror_desc::before {
  content: "";
	display: block;
	width: 25px;
	min-width: 25px;
	height: 25px;
	background-size: 23px 23px;
}

.formok_desc::before {
	background-image: url("../img/icon_ok.svg");
}

.formerror_desc::before {
	background-image: url("../img/icon_error.svg");
}

.formerror input,
.formerror textarea,
.formerror .agree {
	border: 3px solid #D24059;
	background-color: #FCF3F4;
}

#entry .inner_pricing_contents.formerror {
	border: 5px solid #D24059;
	background-color: #FCF3F4;
}

#entry .formerror .inner_page_header + .formerror_desc {
	justify-content: center;
}

/* # =================================================================
   # fixcenter
   # ================================================================= */
.fix_center {
  max-width: 1200px;
}
.fix_center_large {
  max-width: 1500px;
}
.fix_center_small {
  max-width: 800px;
}
.fix_center_xsmall {
  max-width: 500px;
}
.max_w95 {
  max-width: 95%;
}
.max_w90 {
  max-width: 90%;
}
.max_w85 {
  max-width: 85%;
}
.max_w80 {
  max-width: 80%;
}
.max_wpx60 {
	max-width: 60px;
}
.max_wpx80 {
	max-width: 80px;
}
.max_wpx100 {
	max-width: 100px;
}
.max_wpx200 {
	max-width: 200px;
}
.max_wpx300 {
	max-width: 300px;
}
.max_wpx400 {
	max-width: 400px;
}
.fix_center, .fix_center_large, .fix_center_small, .fix_center_xsmall, .max_w95, .max_w90, .max_w85, .max_w80 {
  margin: auto;
}
/* # =================================================================
   # flex/display/position
   # ================================================================= */
.flex_layout {
  display: flex;
}
.flex_wrap {
  flex-wrap: wrap;
}
.col_layout {
  flex-direction: column;
}
.row_reverse {
  flex-direction: row-reverse;
}
.flexfull {
  width: 100%;
}
.flexhalf {
  width: 50%;
}
.flex3col {
  width: calc(100% / 3);
}
.flex20 {
  width: 20%;
}
.flex25 {
  width: 25%;
}
.flex80 {
  width: 80%;
}
.flex30 {
  width: 30%;
}
.flex70 {
  width: 70%;
}
.flex40 {
  width: 40%;
}
.flex60 {
  width: 60%;
}
.dispblock {
  display: block;
}
.dispinline {
  display: inline;
}
.dispinlineblock {
  display: inline-block;
}
.posrelative {
  position: relative;
}
.posabsolute {
  position: absolute;
}
.txtalcenter {
  text-align: center;
}
/* # =================================================================
   # container/contents
   # ================================================================= */
#container {
  width: 100%;
}
#contents {
	margin-top: 80px;
}
.contentsmode #contents {
	margin-top: 0px;
}
.inner_contents_box {
	padding: 40px 0px;
	margin: 0px 15px;
}
.entry_main_page_body .inner_contents_box,
.mailplus_page_body .inner_contents_box,
.ocnkaff_page_body .inner_contents_box {
	margin-left: 0px;
	margin-right: 0px;
}
.entry_main_page_body #entryform {
	margin: 20px 15px;
}

.mailplus_page_body .contents_header,
.mailplus_page_body .contents_tab_nav,
.mailplus_page_body #mailplus,
.ocnkaff_page_body #ocnkaffabout,
.ocnkaff_page_body #ocnkafffeature,
.ocnkaff_page_body #ocnkaffstep {
	margin-left: 15px;
	margin-right: 15px;
}

.more_btn A,
.back_btn A {
	display: inline-block;
	padding: 10px 50px 10px 0px;
	margin-top: 20px;
	border-bottom: 3px solid #000;
	position: relative;
	font-size: 14px;
}

.back_btn A {
	margin-top: 20px;
	padding: 10px 10px 10px 40px;
}

.more_btn A::after,
.back_btn A::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 24px;
	background-image: url("../img/icon_more.svg");
	background-size: 30px 24px;
	position: absolute;
	right: 0px;
	top: 10px;
}


.back_btn A::before {
	transform: scale(-1, 1);
	transition: .3s;
	right: auto;
	left: 0px;
}

/* # =================================================================
   # header
   # ================================================================= */
#header_area {
  background: rgba(255, 255, 255, 1);
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9998;
  min-height: 60px;
  transition: .5s;
}
#inner_header_nav {
	justify-content: flex-end;
}
.inner_header_area {
  justify-content: space-between;
}
.headerci {
  width: 180px;
  margin: 6px 0px 6px 10px;
}
.ocnkci img,
.ocnkci svg {
	width: 100%;
	height: auto;
	max-width: 140px;
	color: #34353A;
}
.ocnkci h1.hash_nav {
	height: 42px;
}

.hcopy {
  font-size: 9px;
	letter-spacing: -0.6px;
}
.englishsite {
	position: absolute;
	top: 0px;
	right: 0px;
}
.englishsite A {
	display: block;
	font-size: 10px;
	line-height: 100%;
	font-weight: 400;
	padding: 0;
	margin: 0;
	border-left: 1px solid #E0DFE3;
	padding: 3px 8px 0px 8px;
}
.imgwht {
  -webkit-filter: brightness(0) invert(100%);
  -moz-filter: brightness(0) invert(100%);
  -o-filter: brightness(0) invert(100%);
  -ms-filter: brightness(0) invert(100%);
  filter: brightness(0) invert(100%);
}
.blalph {
	opacity: .3;
}
.headerci A:hover {
  opacity: 0.7;
}
.site_header {
  margin: 0 auto;
}
.header_information,
.breadcrumb {
	background-color: #3588D1;
}
.inner_header_information {
	align-items: center;
	justify-content: center;
	padding: 5px;
	color: #FFF;
}
.inner_header_information .article_date {
	width: 90px;
	font-size: 10px;
	text-align: center;
}
.inner_header_information .article_title {
	width: 220px;
	white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
	font-size: 10px;
}
.inner_header_information .article_title A {
	color: #FFF;
	text-decoration: underline;
	font-weight: 400;
}
ol.breadcrumb_list {
  width: 100%;
  padding: 5px 10px;
	color: #FFF;
	font-size: 10px;
}
ol.breadcrumb_list li {
	list-style-type: none;
	line-height: 100%;
	display: flex;
}
ol.breadcrumb_list li A {
  font-weight: 400;
	color: #FFF;
	text-decoration: underline;
	display: inline-block;
}
ol.breadcrumb_list li.thispage {
	display: inline-block;
}
ol.breadcrumb_list li .active {
	max-width: 180px;
	display: inline-block;
	overflow: hidden;
  font-weight: 700;
	text-overflow: ellipsis;
  white-space: nowrap;
}

/* # =================================================================
   # hambergar
   # ================================================================= */
.site_header {
  align-items: center;
  display: flex;
	width: 100%;
  height: 100vh;
	background-color: #FFF;
  opacity: 0;
  padding: 0;
  position: fixed;
	z-index: 2;
	top: 0px;
  visibility: hidden;
  overflow: scroll;
  transition: .5s;
}
.site_header.open {
  opacity: 1;
  visibility: visible;
  height: 100vh;
}
.sp_menu {
  display: block;
  position: fixed;
  top: 30px;
  right: 20px;
  width: 25px;
  height: 25px;
  margin: 0 auto;
  cursor: pointer;
  transition: .5s;
  z-index: 9999;
}
.sp_menu .bar {
  display: inline-block;
  width: 25px;
  /*height: 2px;
  background-color: #000;*/
	height: 1px;
	border-bottom: 2px solid #000000;
  position: absolute;
  left: 0;
  transition: .25s ease-in-out;
}
#bar01 {
  top: 0;
}
#bar02 {
  top: 9px;
}
#bar03 {
  top: 18px;
}
.active .bar {
	/*
  background-color: #000;*/
	border-bottom: 2px solid #000000;
}
.active #bar01 {
  top: 10px;
  transform: rotate(45deg);
}
.active #bar02 {
  width: 0;
}
.active #bar03 {
  top: 10px;
  transform: rotate(135deg);
}
/* # =================================================================
   # globalnav
   # ================================================================= */
#header_right #globalnav {
  position: absolute;
  top: 20px;
  padding-bottom: 80px;
}
#globalnav .globalnavbtn {
  width: 100%;
  padding: 5px 0px;
  max-width: inherit;
}
#globalnav .globalnavbtn A {
  font-size: 14px;
	font-weight: 500;
}
#globalnav .parentbtn_service {
  order: 2;
}
#globalnav .parentbtn_payment {
  order: 3;
}
#globalnav .parentbtn_showcase {
  order: 4;
}
#globalnav .parentbtn_info {
  order: 5;
}
#globalnav .parentbtn_support {
  order: 6;
}
#globalnav .parentbtn > A {
  display: block;
  padding: 15px 8px 5px;
  font-size: 16px;
	pointer-events: none;
}
.open #globalnav .parentbtn > A {
	color: #3588D1;
	font-weight: 700;
}
#globalnav .parentbtn_signin {
  margin: 0px;
  order: 0;
}

.globalnav_register {
	margin-right: 70px;
}

#globalnav .parentbtn_signin A, .globalnav_register .parentbtn_register A {
  display: block;
  max-width: 150px;
  margin: 10px auto 0px;
  padding: 6px 20px;
  text-align: center;
  border-radius: 5px;
}
#globalnav .parentbtn_signin A {
  border: 1px solid #3588D1;
  color: #3588D1;
	max-width: 200px;
	font-size: 16px;
}
.globalnav_register .parentbtn_register A {
	padding: 8px 5px;
	margin-top: 25px;
	font-size: 9px;
}
.register_btn A {
	background: linear-gradient(-55deg, #C38ED1 0%, #539AD8 20%, #3AD9D9 50%, #70C1A5 80%, #B690D4 100%);
  color: #FFF;
}
.globalnavsearch {
	order: 1;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 10px;
}
.btn_search_toggle {
	display: none;
}
.search_form input.btn_search {
  width: 26px;
  height: 26px;
	position: absolute;
	right: 8px;
	top: 15px;
  border: none;
  box-shadow: none;
  background-image: url(https://www.ocnk.net/img/icon_search_x2.png);
	background-size: 20px 20px;
  background-repeat: no-repeat;
}
.search .site_search {
	position: relative;
	width: 90%;
	margin: auto;
}
.search.active .site_search {
	display: block;
	transition: .3s;
}
.site_search input[type=text] {
	height: auto;
	padding: 8px;
	background-color: #FFF;
	border-radius: 10px;
}

/* # =================================================================
   # dropdown
   # ================================================================= */
.dropdwn_menu {
  width: 100%;
  display: block;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 99;
  margin: auto;
  background-color: #FFF;
}
.inner_dropdwn_menu {
  max-width: 1000px;
  margin: auto;
}
.dropdwn_wrapper, .dropdwn_wrapper li.subnavbtn {
  width: 100%;
}
.dropdwn_wrapper li.subnavbtn {
	position: relative;
}
.dropdwn_wrapper li.subnavbtn A {
  display: block;
	margin: 0px 8px;
	padding: 8px 0px;
  border-bottom: 1px solid #E0DFE3;
  font-weight: 400;
}
.dropdwn_wrapper li.subnavbtn A::after {
	position: relative;
	bottom: -9px;
}
.dropdwn_wrapper li.subnavbtn::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #555;
  border-right: 2px solid #555;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right: 15px;
  top: 15px;
  transition: 0.5s;
}
/* # =================================================================
   # register
   # ================================================================= */
#ocnkregister {
  background-image: url(../img/register_bg.jpg);
  background-size: cover;
  background-position: center top;
	min-height: 200px;
	padding: 20px 0px 40px;
}
#ocnkregister::after {
  background: linear-gradient(-55deg, #C38ED1 0%, #539AD8 20%, #3AD9D9 50%, #70C1A5 80%, #B690D4 100%);
	opacity: 0.9;
}
#ocnkregister .inner_contents_box {
  z-index: 2;
}
#ocnkregister .inner_contents_box .ocnkci img {
  max-width: 150px;
}
#ocnkregister .register_btn {
  max-width: 300px;
  margin: 10px auto 0px;
  justify-content: space-between;
}
#ocnkregister .register_btn A {
	width: 90%;
	margin: auto;
	padding: 10px 0px;
	border: 2px solid #FFF;
	border-radius: 10px;
  color: #FFF;
	font-size: 20px;
}
#ocnkregister .register_btn A .btn_subtxt {
  font-size: 14px;
	font-weight: 400;
}
/* # =================================================================
   # footer
   # ================================================================= */
#footer {
  width: 100%;
  background-color: #3588D1;
}
#inner_footer {
  padding: 0px 0px 100px;
	color: #FFF;
}
.footer_contents {
  align-items: center;
}
.footerci,
.footernav,
.footercomnav,
.footerbnr{
  width: 100%;
}
.footerci {
	order: 2;
	width: 200px;
	margin: 0px auto;
}
.footernav {
	order: 1;
}
.footercomnav {
	order: 3;
}
.footerbnr{
  order: 4;
}
.bcopy {
  margin-top: 10px;
  font-size: 9px;
	letter-spacing: -0.6px;
}
/* sns
   # ================================================================= */
.snsnavlist {
  margin-top: 15px;
	align-items: center;
  justify-content: center;
}
.snsnavbtn {
  margin: 0px 15px;
}
.snsnavbtn A:hover {
  opacity: 0.5;
}
.snsnavlist {
  opacity: 0.7;
}
/* footernav
   # ================================================================= */
.footernav .footernavbtn {
	margin: 20px 0px;
}
.footernav .footernavlist {
	display: block;
	margin: 0px 20px;
}
.footernav .footernavlist .footernavbtn {
	font-size: 16px;
	font-weight: 700;
}
.footernav_wrapper {
	margin-top: 8px;
}
.footernav .footernavlist .subnavbtn {
	width: 100%;
	display: flex;
	align-items: center;
}
.footernav .footernavlist .subnavbtn::before {
	content: "";
	display: block;
	width: 6px;
	height: 2px;
	background-image: url(../img/clear.png);
	margin: 0px 5px 0px 5px;
}
.footernav .footernavlist .subnavbtn A {
	padding: 5px 0px;
	color: #FFF;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
}
/* footercomnav
   # ================================================================= */
.footercomnav {
	border-top: 1px solid #5299D8;
	border-bottom: 1px solid #5299D8;
	margin: 40px 0px;
}
.footercomnav .footernavlist {
	display: flex;
	margin: 20px 0px;
}
.footercomnav .footernavbtn {
	width: 50%;
	margin: 5px 0px;
}
.footercomnav .footernavbtn A {
	font-size: 12px;
	color: #FFF;
}
/* footerbnr
   # ================================================================= */
.footerbnr {
  margin-bottom: 40px;
}
.footerbnrlist {
	justify-content: center;
}
.footerbnrbtn A {
  display: block;
  margin: 10px;
}
/* copyright/pagetop
   # ================================================================= */
.copyright {
	margin-top: 40px;
	font-size: 10px;
}
#pagetop {
  position: fixed;
  z-index: 9999;
  bottom: 30px;
  right: 30px;
}
#pagetop A {
  text-decoration: none;
  color: #555;
  width: 70px;
  height: 70px;
  border-radius: 80px;
  padding: 10px;
  background-color: #E0DFE3;
  font-size: 11px;
  font-weight: 300;
}
#pagetop A::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 10px auto 0px;
  border-top: 2px solid #555;
  border-right: 2px solid #555;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}
/* bottom btn
   # ================================================================= */
.bottombtn {
	width: 100%;
	position: relative;
	z-index: 98;
}
.bottombtn .cover_copybtn {
	width: 100%!important;
	position: fixed!important;
	top: auto!important;
	bottom: 0px;
	background-color: rgba(255,255,255,0.8);
	padding: 10px;
	box-sizing: border-box;
}
.bottombtn .inner_cover_copybtn .register_btn {
	width: 200px;
}
.bottombtn .cover_btn .register_btn A {
	font-size: 16px;
	padding: 10px 5px;
}
.bottombtn .cover_btn .register_btn A .btn_subtxt {
	font-size: 10px;
	letter-spacing: 0;
}

/* # =================================================================
   # table / dl /dt /dd
   # ================================================================= */
.data_table {
  width: 100%;
}
.data_table .cell_header, .data_table .cell_data {
  padding: 15px 10px;
  border: 1px solid #E0DFE3;
  vertical-align: middle;
}
.data_table .cell_border {
	border-top: 3px solid #E0DFE3;
}
.data_table .cell_header {
  background-color: #F1F1F1;
  white-space: nowrap;
}
.data_table .cell_data {
  background-color: #FFF;
}
.table_caption {
  padding: 15px 10px 20px;
  margin-top: 15px;
  text-align: left;
}
.cellbold {
  font-weight: bold;
}
.cellnormal {
  font-size: medium;
}
.cellleft {
  text-align: left;
}
.cellright {
  text-align: right;
}
.cellcenter {
  text-align: center;
}
.nodata {
  padding: 30px 0px;
}
dl {
  max-width: 800px;
  margin: 0px auto 30px;
}
dt, dd {
  font-size: 14px;
  padding: 50px 5px;
  border-top: 1px solid #E0DFE3;
  box-sizing: border-box;
}
dl {
  border-bottom: 1px solid #E0DFE3;
}
dt {
  clear: left;
  float: left;
  min-width: 200px;
  font-weight: 700;
  text-align: center;
}
dd {
  margin-left: 200px;
  padding-left: 40px;
  text-align: left;
}

/* # =================================================================
   # pager
   # ================================================================= */
.listpager {
	margin: 20px 15px 20px;
	padding: 5px 0px;
	text-align: center;
}
.inner_listpager {
  padding: 10px;
  text-align: center;
}
.listpager A, .listpager strong {
  display: inline-block;
  line-height: 25px;
  min-width: 25px;
  min-height: 25px;
  margin: 0px 5px;
  font-size: 10px;
  color: #555;
}
.listpager strong, .listpager A:hover {
  border: 1px solid #3588D1;
  background-color: #3588D1;
	border-radius: 5px;
  color: #FFF;
}
.listpager A {
  border: 1px solid #E0DFE3;
  background-color: #FFFFFF;
	border-radius: 5px;
}
.listpager A.to_next_page, .listpager A.to_prev_page {
  min-width: 25px;
}


/* # =================================================================
   # t_head / t_subhead / t_read
   # ================================================================= */
.t_head, .t_subhead, .t_read {
  line-height: 1.5;
}
.t_head {
  font-size: 20px;
	font-weight: 900;
}
.t_subhead {
  font-size: 16px;
	font-weight: 700;
}
.t_read {
  font-size: 12px;
  font-weight: 400;
	margin-top: 10px;
}
.t_head_en {
	font-size: 10px;
	font-weight: 700;
	transform: rotate(90deg);
	transform-origin:left top;
}
/* # =================================================================
   # .page_box
   # ================================================================= */
.page_box {
  padding: 60px 0px;
  background-color: #FFF;
}
/* # =================================================================
   # .swiper
   # ================================================================= */
.swiper-wrapper {
  padding-bottom: 40px !important;
}
.swiper-container .swiper-pagination-bullet {
  background-color: #999;
}
.swiper-pagination-bullet-active {
  background-color: #000 !important;
}
.swiper-button-next, .swiper-button-prev {
  width: 50px!important;
  height: 50px!important;
	border-radius: 50px;
	background-size: 25px 25px!important;
	top: 35%!important;
}
.index_page_body .swiper-button-next,
.index_page_body .swiper-button-prev,
#seminarphoto .swiper-button-next,
#seminarphoto .swiper-button-prev {
	background-color: rgba(255,255,255,0.5);
	display: none;
}
.index_page_body #template .swiper-button-next,
.index_page_body #template .swiper-button-prev {
	top: 45%!important;
}
#seminarphoto .swiper-button-next, #seminarphoto .swiper-button-prev {
	top: 50%!important;
}
.index_page_body .swiper-button-prev,
#seminarphoto .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23333333'%2F%3E%3C%2Fsvg%3E")!important;
	left: 15px!important;
}
.index_page_body .swiper-button-next,
#seminarphoto .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23333333'%2F%3E%3C%2Fsvg%3E")!important;
	right: 15px!important;
}


/* # =================================================================
   # inview
   # ================================================================= */
.inviewfadeIn {
  opacity: 0;
  transition: 0.8s;
}
.fadeIn {
  opacity: 1.0;
}
.inviewUp {
  transform: translate(0, 40px);
  -webkit-transform: translate(0, 40px);
  transition-duration: 0.8s;
}
.Up {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}
.inviewDown {
  transform: translate(0, -40px);
  -webkit-transform: translate(0, -40px);
  transition-duration: 0.8s
}
.Down {
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}
.inviewLate {
  transition-delay: 0.5s;
}
.inviewLate1 {
  transition-delay: 0.8s;
}
.inviewLate2 {
  transition-delay: 1.0s;
}
.inviewLate3 {
  transition-delay: 1.2s;
}
.inviewLate4 {
  transition-delay: 1.4s;
}
.inviewLate5 {
  transition-delay: 1.6s;
}

/* # =================================================================
   # holiday,notice
   # ================================================================= */
.holiday_notice,
.ocnk_notice {
	margin: -20px 20px 20px;
	max-width: 600px;
	line-height: 100%;
}

.inquiry_page_body .holiday_notice,
.inquiry_page_body .ocnk_notice {
	margin: 40px auto 20px;
}

.inner_holiday_btn,
.inner_notice_btn {
	align-items: center;
	justify-content: center;
}

.holiday_notice A,
.ocnk_notice A {
	display: block;
	padding: 15px 5px;
	background-color: #ECF4FB;
	border: 1px solid #3588D1;
	border-radius: 10px;
}
.ocnk_notice.importantcolor A {
	background-color: #FBDBE7;
	border: 1px solid #E82970;
}
.ocnk_notice.importantcolor .formatcolor {
	color: #E82970;
}

.holiday_notice A .holiday_label,
.ocnk_notice A .notice_label {
	text-decoration: underline;
	letter-spacing: 3px;
}

.inner_holiday_btn::before,
.inner_notice_btn::before {
  content: "";
	display: inline-block;
	margin-right: 5px;
	width: 25px;
	height: 25px;
	background-image: url("../img/icon_stcal.svg");
	background-size: 25px 25px;
}

.inner_notice_btn::before {
	background-image: url("../img/icon_maintenance.svg");
}

.ocnk_notice.importantcolor .inner_notice_btn::before {
	background-image: url("../img/icon_failure.svg");
}

.holiday_notice A .holiday_date {
	text-align: center;
	margin-top: 3px;
	font-weight: 500;
	font-size: 14px;
	width: 100%;
}

/* # =================================================================
   # 404
   # ================================================================= */
.notfound_wrapper {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.inner_notfound_wrapper {
  max-width: 700px;
}
.notfound_page_header {
	text-align: center;
}
.notfound_page_header .t_head {
	font-size: 70px;
}
.notfound_page_header .s_head {
	font-size: 14px;
}
.notfound_desc {
	padding: 20px;
	margin: 20px;
  border-top: 1px solid #555;
	border-bottom: 1px solid #555;
	font-size: 14px;
}
.notfound_desc ul {
	margin-top: 10px;
	margin-left: 20px;
}
.notfound_desc li {
	list-style-type: disc;
	font-size: 14px;
	padding: 5px;
}
.notfound_wrapper .ocnkci {
	text-align: center;
}

/* # =================================================================
   # RESPONSIVE
   # ================================================================= */

@media only screen and (max-width: 900px) {
  .dropdwn_menu {
	  display: block!important;
  }
}

@media only screen and (min-width: 375px) {
	/* header
   # ================================================================= */
	.inner_header_information .article_date {
		text-align: left;
	}
	.inner_header_information::before {
		content: "New";
		display: block;
		border-radius: 3px;
		padding: 0px 2px;
		margin-right: 3px;
		border: 1px solid #FFF;
		color: #FFF;
		font-size: 10px;
	}
	ol.breadcrumb_list li .active {
	  max-width: 220px;
  }
	/* grobalnav
   # ================================================================= */
	.globalnav_register .parentbtn_register A {
	  padding: 8px 8px;
	  margin-top: 22px;
	  font-size: 14px;
  }
	/* footer
   # ================================================================= */
	.footercomnav .footernavbtn A {
	  font-size: 14px;
  }
	/* bottom btn
   # ================================================================= */
  .bottombtn .inner_cover_copybtn .register_btn {
	  width: 250px;
  }
  .bottombtn .cover_btn .register_btn A {
	  font-size: 20px;
	  padding: 10px;
  }
  .bottombtn .cover_btn .register_btn A .btn_subtxt {
	  font-size: 12px;
  }
	/* form
   # ================================================================= */
	.form_element {
    padding: 15px 0px;
  }
	.from_desc {
	  font-size: 12px;
  }
}
@media only screen and (min-width: 400px) {
	/* header
   # ================================================================= */
	ol.breadcrumb_list li .active {
	  max-width: 250px;
  }
	/* footer
   # ================================================================= */
	.footernav .footernavlist .subnavbtn {
		width: 50%;
	}
	/* form
   # ================================================================= */
  
	.global_btn {
		width: 60%;
	}
	
  .global_btn A,
  .global_btn input[type="button"],
  .global_btn input[type="submit"],
  .global_btn input[type=reset],
  .global_btn button {
	  padding: 20px;
	  font-size: 18px;
  }
	
	.global_btn.btnsmall {
		width: 40%;
	}

  .global_btn.btnsmall A,
  .global_btn.btnsmall input[type="button"],
  .global_btn.btnsmall input[type="submit"],
  .global_btn.btnsmall input[type=reset],
  .global_btn.btnsmall button {
	  padding: 10px;
  }
	.form_title {
		font-size: 18px;
	}
	.form_title.form_subtitle {
		font-size: 16px;
	}
	.form_step .step_label {
		font-size: 16px;
	}
	.from_desc {
	  font-size: 14px;
  }
	/* ok/error */
	.formok_desc,
  .formerror_desc {
	  font-size: 14px;
  }

	.formok_desc::before,
  .formerror_desc::before {
	  width: 28px;
		min-width: 28px;
	  height: 25px;
	  background-size: 25px 25px;
  }
	.startup .radio-inline__label,
	.basic .radio-inline__label,
    .advanced .radio-inline__label{
		padding: 5px;
	  margin: 10px;
  }
	#entry #plan .global_btn {
		margin-top: 15px;
	}
	#entry .startup .radio-inline__label,
	#entry .basic .radio-inline__label,
	#entry .advanced .radio-inline__label {
	  margin: 5px;
  }
	#entry .advanced .radio-inline__label {
		margin-left: 0;
	}
	#entry .basic .radio-inline__label {
		margin-right: 0;
	}
	/* form
   # ================================================================= */
	input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=password], textarea ,select {
    padding: 15px;
    font-size: 16px;
  }
  input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], input[type=password] ,select {
    height: 60px;
  }
	.select.formerror::after {
    top: 36px;
  }
}
@media only screen and (min-width: 600px) {
	/* contentsb box
   # ================================================================= */
	.inner_contents_box {
		padding: 60px 0px;
	}
		/* t_head / t_subhead / t_read
   # ================================================================= */
  .t_head {
    font-size: 30px;
  }
  .t_subhead {
    font-size: 18px;
  }
  .t_read {
    font-size: 14px;
  }
  /* header
   # ================================================================= */
	.ocnkci img,
	.ocnkci svg {
	  max-width: 160px;
		margin-left: 5px;
  }
	.ocnkci svg {
	  width: 160px;
		height: 48px;;
  }
	.ocnkci h1.hash_nav {
	  height: 48px;
  }
  .inner_header_information {
		padding: 10px 0px;
  }
	.inner_header_information .article_title {
		width: 400px;
		font-size: 12px;
	}
	.inner_header_information .article_date {
		margin-right: 10px;
	}
	ol.breadcrumb_list li .active {
	  max-width: 400;
  }
	/* grobalnav
   # ================================================================= */
	.globalnav_register .parentbtn_register A {
	  padding: 7px 10px;
  }
	/* footer
   # ================================================================= */
  .footernav .footernavlist {
		display: flex;
	}
	.footernav .footernavbtn {
		width: 50%;
		padding: 0px 20px;
		box-sizing: border-box;
	}
	.footercomnav .footernavbtn {
		width: calc(100% / 3);
	}
	.footernav .footernavlist .subnavbtn {
		width: 100%;
	}
	/* bottom btn
   # ================================================================= */
  .bottombtn .inner_cover_copybtn .register_btn {
		width: 300px;
		margin: auto;
  }
  .bottombtn .cover_btn .register_btn A {
	  font-size: 25px;
	  padding: 15px;
  }
  .bottombtn .cover_btn .register_btn A .btn_subtxt {
	  font-size: 14px;
  }
	/* form
   # ================================================================= */
  
	.global_btn {
		width: 50%;
	}
	.global_btn.btnsmall {
		width: 20%;
	}
	
	.startup .radio-inline__label,
	.basic .radio-inline__label,
	.advanced .radio-inline__label,
	#entry .startup .radio-inline__label,
	#entry .basic .radio-inline__label,
	#entry .advanced .radio-inline__label {
	  margin: 10px;
  }
	#entry .advanced .radio-inline__label {
		margin-left: 0;
	}
	#entry .basic .radio-inline__label {
		margin-right: 0;
	}
	/* holiday,notice
   # ================================================================= */
  .holiday_notice,
	.ocnk_notice {
	  margin: -40px auto 40px;
	  max-width: 580px;
  }
	
	.inquiry_page_body .holiday_notice,
	.inquiry_page_body .ocnk_notice {
		margin: 40px auto 40px;
		max-width: 580px;
	}

  .holiday_notice A,
	.ocnk_notice A {
	  padding: 15px;
  }

  .holiday_notice A .holiday_date {
	  margin-top: 0px;
	  margin-left: 10px;
	  width: 50%;
  }
	/* 404
   # ================================================================= */
  .notfound_page_header .t_head {
	  font-size: 80px;
  }
  .notfound_page_header .s_head {
	  font-size: 16px;
  }
	/* pager
   # ================================================================= */
  .listpager A, .listpager strong {
    line-height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: 12px;
  }
	.listpager {
		margin-top: 30px;
	}
  .listpager A.to_next_page, .listpager A.to_prev_page {
    min-width: 30px;
  }
	/* pager
   # ================================================================= */
	.index_page_body .swiper-button-next, .index_page_body .swiper-button-prev,
	#seminarphoto .swiper-button-next, #seminarphoto .swiper-button-prev{
    display: block;
  }
}

@media only screen and (min-width: 900px) {
	/* contents box
   # ================================================================= */
	.inner_contents_box {
		padding: 80px 0px;
	  margin: 0px 20px;
  }
	.entry_main_page_body #entryform {
	  margin: 20px;
  }
	/* header
   # ================================================================= */
	.headerci {
		width: 200px;
	}
	.hcopy,
	.bcopy {
		font-size: 10px;
		letter-spacing: -1px;
	}
	.sp_menu {
    display: none;
  }
	.inner_header_information .article_date,
	.inner_header_information .article_title {
		width: auto;
		font-size: 12px;
	}
	ol.breadcrumb_list {
    padding: 12px 10px 13px;
	  font-size: 12px;
  }
	ol.breadcrumb_list li {
    margin: 0;
  }
	ol.breadcrumb_list li .active {
	  max-width: 600;
  }
	
	/* grobalnav
   # ================================================================= */
	.site_header {
    opacity: 1;
    visibility: visible;
    display: block;
		width: calc(100% - 330px);
    height: auto;
    overflow: visible;
    position: inherit;
  }
  .site_header.open {
		height: auto;
  }
  #header_right #globalnav {
    position: inherit;
    padding-bottom: 0;
  }
  #globalnav .globalnavbtn {
    max-width: 155px;
    width: auto;
  }
  #globalnav .globalnavlist {
    padding: 20px 0px 8px;
  }
  #globalnav .parentbtn_signin {
    order: 7;
  }
  #globalnav .parentbtn > A {
    padding: 6px 10px;
		font-size: 14px;
		pointer-events: all;
  }
  #globalnav .parentbtn_signin A {
    margin: 0px 10px;
  }
	.globalnav_register {
		margin-right: 20px;
		margin-left: 10px
	}
	.globalnav_register .parentbtn_register A {
		min-width: 100px;
		margin-top: 25px;
	}
	.dropdwn_wrapper li.subnavbtn::after {
    top: 20px;
  }
	#globalnav .parentbtn_signin A {
	  max-width: 150px;
	  font-size: 14px;
  }
	.globalnavsearch {
	  order: 8;
	  position: relative;
	  width: auto;
	  margin-top: 0px;
	  margin-bottom: 0px;
  }
	.search {
	  position: absolute;
	  top: 60px;
	  right: -100px;
  }
  .btn_search_toggle {
	  display: block;
  }
	.search .site_search {
	  position: absolute;
	  top: 3px;
	  right: -10px;
	  width: 220px;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
  }
  .search.active .site_search {
    opacity: 100;
    pointer-events: auto;
  }
  .site_search input[type=text] {
	  border: 5px solid #3588D1;
  }
  .search.active .imgwht {
	  filter: none;
  }
  /* dropdown
   # ================================================================= */
	.dropdwn_menu {
    display: none;
    width: 100%;
    margin: auto;
    background-color: #F9F9F9;
		background-color: #FFFFFF;
		border-top: 1px solid #E0E0E0;
		border-bottom: 1px solid #E0E0E0;
    top: 75px;
    left: 0px;
    z-index: 99;
    position: absolute;
		box-shadow: 0 5px 20px 0 rgba(0, 0, 0, .08);
  }
  .inner_dropdwn_menu {
    max-width: 1000px;
    margin: auto;
    padding: 40px 0px 60px;
  }
  .dropdwn_wrapper {
    width: 100%;
  }
  .dropdwn_wrapper li.subnavbtn {
    width: 50%;
  }
  #globalnav .dropdwn_wrapper li.subnavbtn A {
    margin: 5px 8px;
		padding: 8px 0px;
    font-size: 16px;
    font-weight: 700;
  }
  .parentbtn .dropdwn_wrapper::before {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #4D96D6;
  }
  .parentbtn_service .dropdwn_wrapper::before {
    content: "サービス";
  }
  .parentbtn_service .dropdwn_wrapper + .dropdwn_wrapper::before {
    content: "関連サービス";
    margin-top: 20px;
  }
  .parentbtn_payment .dropdwn_wrapper::before {
    content: "利用料金";
  }
  .parentbtn_showcase .dropdwn_wrapper::before {
    content: "ショップ事例";
  }
	.parentbtn_info .dropdwn_wrapper::before {
    content: "お知らせ";
  }
	.parentbtn_support .dropdwn_wrapper::before {
    content: "サポート";
  }
	  /* register
  # ================================================================= */
	#ocnkregister {
	  padding: 100px 0px;
  }
	#ocnkregister::after {
	  opacity: 0.9;
  }
  #ocnkregister .inner_contents_box .ocnkci img {
    max-width: 200px;
  }
  #ocnkregister .register_btn {
    max-width: 400px;
  }
  #ocnkregister .register_btn A {
		background-image: none;
	  padding: 20px 0px;
	  font-size: 25px;
  }
  #ocnkregister .register_btn A .btn_subtxt {
    font-size: 16px;
  }
	.startup .radio-inline__label, .basic .radio-inline__label, .advanced .radio-inline__label, #entry .startup .radio-inline__label, #entry .basic .radio-inline__label, #entry .advanced .radio-inline__label {
		margin: 10px;
	}
  /* footer
  # ================================================================= */
	#inner_footer {
		padding-top: 40px;
	}
	.footernav .footernavbtn {
		width: calc(100% / 3);
		padding: 0px 20px;
		box-sizing: border-box;
	}
	.footercomnav .footernavbtn {
		width: auto;
	}
	.footercomnav .footernavlist {
		justify-content: center;
	}
	/* bottom btn
   # ================================================================= */
  .bottombtn .inner_cover_copybtn .register_btn {
		width: 350px;
  }
	/* holiday,notice
   # ================================================================= */
  .holiday_notice,
	.inquiry_page_body .holiday_notice,
	.ocnk_notice,
	.inquiry_page_body .ocnk_notice {
	  max-width: 600px;
  }
	/* 404
   # ================================================================= */
  .notfound_page_header .t_head {
	  font-size: 100px;
  }
  .notfound_page_header .s_head {
	  font-size: 20px;
  }
	.notfound_desc,
	.notfound_desc li {
		font-size: 16px;
	}
}

@media only screen and (min-width: 1000px) {
	
	.more_btn A {
	  font-size: 16px;
  }

	/* hglobalnav
   # ================================================================= */
  #globalnav .parentbtn > A {
    padding: 6px 15px;
		font-size: 16px;
  }
	/* footer
   # ================================================================= */
	.footerci {
		order: 1;
		width: 250px;
		margin-top: -100px;
	}
	.footernav {
		order: 2;
		flex: 1;
	}
	.footercomnav {
		flex: none;
	}

}
@media only screen and (min-width: 1200px) {
	/* t_head / t_subhead / t_read
   # ================================================================= */
  .t_head {
    font-size: 35px;
		letter-spacing: .1em;
  }
  .t_subhead {
    font-size: 20px;
  }
  .t_read {
    font-size: 16px;
  }
	/* hglobalnav
   # ================================================================= */
  #globalnav .parentbtn > A {
    padding: 6px 20px;
  }
	#globalnav .parentbtn_signin {
    margin-left: 40px;
	}
  /* table / dl /dt /dd
   # ================================================================= */
	.data_table .cell_header, .data_table .cell_data {
    padding: 10px;
  }
	 /* header
   # ================================================================= */
	ol.breadcrumb_list li .active {
	  max-width: none;
		overflow: inherit;
    text-overflow: inherit;
    white-space: normal;
  }
}

@media only screen and (min-width: 1500px) {
	.inner_contents_box,
	.mailplus_page_body .contents_header,
  .mailplus_page_body .contents_tab_nav,
  .mailplus_page_body #mailplus {
		margin: auto;
	}
}
/* # =================================================================
   # Hover
   # ================================================================= */
@media (hover: hover) {
  A:hover,
	input[type=submit]:hover,
	input[type=button]:hover,
	input[type=reset]:hover,
	button:hover {
    opacity: 0.8;
  }
	.formatlink A:hover {
	  text-decoration: underline;
		opacity: 1;
  }
	.formatlinkline A:hover {
		text-decoration: none;
		opacity: 1;
	}
	.lhover A:hover::after {
    content: "";
	  width: 100%;
	  height: 1px;
	  background-color: #000;
  }
	#footer .lhover A:hover::after {
	  background-color: #FFF;
  }
  #globalnav .parentbtn_signin A:hover {
	  background-color: #3588D1;
    color: #FFF;
  }
  .register_btn A:hover {
    background: linear-gradient(55deg, #C38ED1 0%, #539AD8 50%, #3AD9D9 70%, #70C1A5 90%, #70C1A5 100%);
  }
	#ocnkregister .register_btn A:hover {
		background-color: #FFF;
	  border: 2px solid #FFF;
    color: #3588D1;
		opacity: 1;
  }
	#pagetop A:hover {
    background-color: #000;
    color: #E0DFE3;
  }
	#pagetop A:hover::before {
    border-top: 2px solid #E0DFE3;
    border-right: 2px solid #E0DFE3;
  }
	.more_btn A:hover::after {
	  right: -5px;
  }
	.back_btn A:hover::before {
	  left: -5px;
  }
	.radio-inline__input + .radio-inline__label:hover {
	opacity: 1;
  background: #3588D1;
}

.basic .radio-inline__input + .radio-inline__label:hover {
  background: #49BE97;
}
.advanced .radio-inline__input + .radio-inline__label:hover {
  background: #D15C70;
}
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

input::-webkit-credentials-auto-fill-button {
  position: absolute;
  right: 40px;
}