@charset "UTF-8";
@keyframes Flash { 50% { opacity: 0.5; } }

@keyframes loading { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

.contents_wrapper { padding: 50px 10px 100px; }

@media screen and (max-width: 767px) { .contents_wrapper { padding: 5% 5% 10%; } }

@media screen and (max-width: 767px) { .side_widget_text img { width: 100%; } }

article { padding: 0; border: none; background: none; }

article h2 { margin: 70px auto 50px; padding: 20px 0 20px 20px; background: none; }

@media screen and (max-width: 767px) { article h2 { margin: 7% auto 5%; padding: 3% 0 3% 10px; } }

article p { line-height: 1.8; }

@media screen and (max-width: 767px) { article p { margin-top: 0; margin-bottom: 5%; } }

#wrapper-content { -webkit-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1); }

article h3 { line-height: 1.5; width: 100%; }

body { background: #fafafa; }

@media screen and (min-width: 768px) { #col2_left .contents { margin: 0; width: 67%; } }

#col2_left .contents .contents_inner { margin: 0; }

@media screen and (min-width: 768px) { #col2_left .side_contents { margin: 0px; width: 30%; } }

.archive_header #path { padding: 30px 10px 10px; font-size: 18px; font-size: 1.125rem; }

@media screen and (max-width: 767px) { .archive_header #path { padding: 5% 5% 2%; } }

.archive_header .category_header { margin: 0; padding: 0; background: none; border: none; }

.archive_header .category_header .category_header_in { padding: 0px 10px; overflow: visible; }

@media screen and (max-width: 767px) { .archive_header .category_header .category_header_in { padding: 0 5%; } }

.archive_header .category_header h1 { margin-bottom: 0; }

@media screen and (min-width: 768px) { .head_cassette .cassette { width: 49%; } }

.head_cassette .cassette .thumbnail { height: auto; }

.style_list .cassette { padding: 0; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dotted #dfdfdf; }

@media screen and (max-width: 767px) { .style_list .cassette { margin-bottom: 5%; padding-bottom: 5%; } }

.style_list .cassette .thumbnail { margin-right: 0; float: left; display: block; width: 36%; }

@media screen and (max-width: 767px) { .style_list .cassette .thumbnail { float: none; width: 100%; max-width: none; } }

.style_list .cassette .thumbnail img { margin: 0; width: 100%; height: auto; max-width: 280px; display: inline; }

@media screen and (max-width: 767px) { .style_list .cassette .thumbnail img { max-width: none; } }

.style_list .cassette .cassette_inner { border: none; background: none; }

.style_list .cassette .cassette_inner::after { content: ""; display: block; clear: both; }

.style_list .cassette .detail { padding: 0; padding-left: 3%; float: right; width: 64%; }

@media screen and (max-width: 767px) { .style_list .cassette .detail { padding-left: 0; float: none; width: 100%; } }

.style_list .cassette .detail h2 { margin-bottom: 15px; height: auto; }

.page-link { padding-left: 0 !important; margin: 0 !important; text-align: center; }

.page-link li { list-style-type: none; display: inline-block; font-size: 20px; font-size: 1.25rem; }

.page-link li:after { padding: 0 15px; content: "|"; display: inline-block; opacity: 0.3; }

.page-link li:last-child { margin-right: 0; padding-right: 0; }

.page-link li:last-child:after { content: none; }

#select .select-plan-container { padding-left: 0; }

#select .select-plan-container li { list-style-type: none; }

#select .select-plan-container li .button { margin-bottom: 1em; padding: 1em 0.2em; display: inline-block; font-weight: bold; color: #ffffff; background: #43ce6c; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; box-shadow: 0 3px 0 0 #236d39; position: relative; top: 0; }

#select .select-plan-container li .button:hover { text-decoration: none; background: #4be77a; box-shadow: 0 1px 0 0 #236d39; top: 2px; }

#select .select-plan-container li .button-disabled { margin-bottom: 1em; padding: 1em 0.2em; display: inline-block; font-weight: bold; color: #333333; background: #ddd; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

.select-plan-container { padding: 0; display: flex; justify-content: center; }

.select-plan-container li > div { padding: 1em; width: 100%; height: 70px; border: 1px solid #ddd; text-align: center; display: flex; flex-direction: column; justify-content: center; }

.select-plan-container li .plan-price, .select-plan-container li .plan-link { height: 270px; }

.select-plan-container .fa-check { font-size: 1.75em; font-weight: bold; line-height: 1; }

.select-plan-container .small { font-weight: bold; font-size: .75em; }

.select-plan-container .better { margin-top: 1em; position: relative; display: inline-block; padding: 2px 5px; width: 100%; color: #ffeb3b; font-weight: bold; font-size: .75em; background: #ff2c41; }

.select-plan-container .better:before { content: ""; position: absolute; top: -25px; left: 50%; margin-left: -15px; border: 15px solid transparent; border-bottom: 15px solid #ff2c41; }

.title-col { width: 30%; }

.title-col > div { font-size: .8em; line-height: 1.5; background: #eee; }

.plan-name { height: 80px; }

.plan-beginner { width: 35%; }

.plan-beginner .plan-name { color: #ffffff; background: #4fb8e4; font-weight: bold; font-size: 1.5em; line-height: 1.3; }

.plan-beginner .plan-price { display: block; }

.plan-basic { width: 35%; }

.plan-basic .plan-name { color: #ffffff; background: #02e0e3; font-weight: bold; font-size: 1.5em; line-height: 1.3; }

.plan-basic .plan-price { display: block; }

.plan-price .pay-type { margin-top: .75em; margin-bottom: 3px; padding: 0px 5px; display: inline-block; font-size: .75em; font-weight: bold; background: #eee; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

.plan-price .price { font-size: 1.5em; line-height: 1.3; font-weight: bold; color: #ff2c41; }

.cassette_inner { position: relative; }

.paid-icon, .open-icon, .nopaid-icon { margin-bottom: 1em; font-weight: bold; }

.paid-icon span, .open-icon span, .nopaid-icon span { padding: 0.25em 2em 0.15em; color: #ffffff; display: inline-block; border-radius: 5px; }

.paid-icon span { background: #02e0e3; }

.open-icon span { background: #447bbf; }

.nopaid-icon span { background: #aaaaaa; }

#modal-overlay { z-index: 10000; position: fixed; top: 0; left: 0; width: 100%; height: 120%; background-color: rgba(24, 55, 88, 0.9); }

#modal-content { padding: 0px 0px 30px; width: 100%; max-width: 1200px; position: fixed; top: 30%; text-align: center; z-index: 11000; }

@media screen and (max-width: 767px) { #modal-content { padding: 20% 5%; margin-left: 0; width: 100%; top: 20%; } }

#modal-content .loading { color: #fff; line-height: 1.8; font-weight: bold; font-size: 30px; font-size: 1.875rem; }

@media screen and (max-width: 767px) { #modal-content .loading { font-size: 25px; font-size: 1.5625rem; }
  #modal-content .loading br { display: none; } }

#modal-content i { margin: auto; margin-bottom: 5%; width: 100%; display: block; color: #fff; font-size: 200px; font-size: 12.5rem; animation: loading 1.5s linear infinite; }

i { padding-right: 5px; }

#alert { padding: 20px 30px; width: 100%; background: #02e0e3; color: #ffffff; font-weight: bold; }

@media screen and (max-width: 767px) { #alert { padding: 5%; } }

#alert .alert-inner { margin: 0 auto; max-width: 1200px; }

#alert .alert-icon, #alert .alert-message { display: table-cell; vertical-align: middle; }

@media screen and (max-width: 767px) { #alert .alert-icon, #alert .alert-message { display: block; } }

#alert .alert-icon { font-size: 90px; font-size: 5.625rem; }

@media screen and (max-width: 767px) { #alert .alert-icon { text-align: center; font-size: 60px; font-size: 3.75rem; } }

#alert .alert-message { padding-left: 10px; font-size: 30px; font-size: 1.875rem; }

@media screen and (max-width: 767px) { #alert .alert-message { padding: 0; font-size: 20px; font-size: 1.25rem; } }

#alert a, #alert a:hover { color: #fff700 !important; }

#alert .alert-checkbox { margin: 15px auto 5px; text-align: center; }

#alert .alert-checkbox a { color: #ffffff !important; }

#alert .alert-checkbox a:hover { text-decoration: none; }

#alert .alert-checkbox span { padding: 5px 8px; cursor: pointer; border: 1px solid #ffffff; font-size: 18px; font-size: 1.125rem; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; }

#alert .alert-checkbox span:hover { color: #02e0e3; background: #ffffff; }

@media screen and (min-width: 768px) { #header_wrapper { border: none; } }

#header_wrapper #global_nav ul.ftrList > li > ul li { margin-bottom: 2px; background: #ffffff; border: 1px solid #02e0e3; }

#header_wrapper #global_nav ul.ftrList > li > ul li:hover { border: 1px solid #ffffff; }

#header_wrapper #global_nav ul.ftrList > li > ul a { color: #02e0e3; }

#header_wrapper #global_nav ul.ftrList > li > ul a:hover { color: #ffffff; background: #02e0e3; }

#pt_custom #header_wrapper { border-top: none !important; }

#header_login_wrapper { background: #edf0f3; }

@media screen and (min-width: 768px) { #header_login_wrapper_inner { margin: 0 auto; width: 98%; max-width: 1200px; }
  #header_login_wrapper_inner::after { content: ""; display: block; clear: both; } }

#site_discription { padding: 12px 10px; float: left; width: 70%; line-height: 1; font-size: 12px; font-size: 0.75rem; }

@media screen and (max-width: 767px) { #site_discription { padding: 2% 3% 1%; width: 100%; line-height: 1.5; color: #ffffff; background: #02e0e3; font-size: 14px; font-size: 0.875rem; } }

@media screen and (min-width: 768px) { .cont_box { overflow: hidden; } }

#header_login_form { float: right; width: 30%; }

#header_login_form::after { content: ""; display: block; clear: both; }

@media screen and (max-width: 767px) { #header_login_form { display: none; } }

#header_login_form li { float: right; }

#header_login_form li a { padding: 4px; display: inline-block; text-align: center; font-weight: bold; font-size: 18px; font-size: 1.125rem; }

@media screen and (min-width: 768px) { #page_top { margin: 0 auto; width: 98%; max-width: 1200px; }
  #page_top::after { content: ""; display: block; clear: both; }
  #page_top #header { float: left; width: 25%; }
  #page_top .nav_middle { float: right; width: 75%; } }

#header { min-height: 0; }

@media screen and (min-width: 768px) { #header { padding: 10px 0; } }

#header h1.image, #header span.image { margin: 0; }

#header h1.image img, #header span.image img { max-width: 198px; max-height: none; }

@media screen and (max-width: 767px) { #header h1.image img, #header span.image img { max-width: 100px; } }

@media screen and (max-width: 767px) { #header { padding: 2% 3% 3% 3%; }
  #header span.image { margin: 0; padding: 0; border: none; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } }

.slim #header_login_wrapper { display: none; }

@media screen and (min-width: 768px) { .slim #header_login_form { top: 13px; } }

@media screen and (max-width: 767px) { .slim #header_login_form { display: none; } }

.slim #header_login_form li a { padding: 10px 15px; font-size: 20px; font-size: 1.25rem; }

@media screen and (max-width: 767px) { .slim #header { padding: 2% 3% 3% 3%; } }

@media screen and (min-width: 768px) { .slim #header .image { margin: 0 !important; } }

.slim #global_nav { padding: 0 !important; }

.slim #global_nav .ftrList { padding-top: 0; margin: 0 !important; }

.slim #global_nav .ftrList a { font-size: 20px; font-size: 1.25rem; }

.slim #global_nav .ftrList > li { padding-top: 0 !important; }

@media screen and (min-width: 768px) { #global_nav { background: #ffffff; border: none; clear: none; } }

@media screen and (min-width: 768px) { #global_nav ul.ftrList { padding-top: 15px; } }

@media screen and (min-width: 768px) { #global_nav ul.ftrList > li { padding: 0; float: right; }
  #global_nav ul.ftrList > li:first-child { margin-right: 0; } }

@media screen and (min-width: 768px) { #global_nav ul.ftrList > li a { padding: 15px 0 10px; border-bottom: 1px solid #fff; display: inline-block; font-weight: bold; font-size: 20px; font-size: 1.25rem; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; }
  #global_nav ul.ftrList > li a:hover { color: #02e0e3; border-bottom: 1px solid #02e0e3; } }

#order_form h3 { margin-bottom: 0; text-align: center; border-bottom: 2px solid #333; }

@media screen and (max-width: 767px) { #order_form h3 { text-align: left; } }

@media screen and (min-width: 768px) { .form-style { margin-bottom: 50px; } }

@media screen and (max-width: 767px) { .form-style { margin-bottom: 7%; } }

@media screen and (min-width: 768px) { .form-style .section-margin { margin-bottom: 50px; } }

@media screen and (max-width: 767px) { .form-style .section-margin { margin-bottom: 10%; } }

.form-style .form-section { margin-bottom: 3em; width: 100%; }

.form-style table { margin-bottom: 0; width: 100%; border: none; }

.form-style tr { border-bottom: 1px solid #dddddd; }

.form-style tr:last-child { border-bottom: none; }

.form-style th, .form-style td { border: none; text-align: left; font-weight: 100; font-size: 26px; font-size: 1.625rem; }

@media screen and (min-width: 768px) { .form-style th, .form-style td { padding: 30px 15px; vertical-align: middle; } }

@media screen and (max-width: 767px) { .form-style th, .form-style td { vertical-align: top; } }

@media screen and (min-width: 768px) { .form-style .label { width: 30%; } }

@media screen and (max-width: 767px) { .form-style .label { padding-left: 0; width: 84%; } }

@media screen and (min-width: 768px) { .form-style .require, .form-style .optional { width: 10%; text-align: right; } }

@media screen and (max-width: 767px) { .form-style .require, .form-style .optional { width: auto; } }

.form-style .require span, .form-style .optional span { padding: 2px 5px; font-weight: bold; font-size: 20px; font-size: 1.25rem; }

.form-style .require span { color: #ffffff; background: #f52929; }

.form-style .optional span { color: #555; background: #eee; }

@media screen and (max-width: 767px) { .form-style .label, .form-style .require, .form-style .optional { padding: 0; padding-left: 10px; padding-top: 5%; display: inline-block; } }

.form-style .input, .form-style .textarea { font-weight: bold; }

@media screen and (min-width: 768px) { .form-style .input, .form-style .textarea { padding-right: 5%; width: 55%; } }

@media screen and (max-width: 767px) { .form-style .input, .form-style .textarea { padding-bottom: 5%; width: 100%; display: block; } }

.form-style .input input, .form-style .input textarea, .form-style .textarea input, .form-style .textarea textarea { width: 100%; border: 1px solid #ddd; background: #ffeac8; font-size: 24px; font-size: 1.5rem; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

.form-style .input input:focus, .form-style .input textarea:focus, .form-style .textarea input:focus, .form-style .textarea textarea:focus { background: #fffef0; }

@media screen and (min-width: 768px) { .form-style .input input, .form-style .input textarea, .form-style .textarea input, .form-style .textarea textarea { padding: 15px; margin-bottom: 5px; } }

@media screen and (max-width: 767px) { .form-style .input input, .form-style .input textarea, .form-style .textarea input, .form-style .textarea textarea { margin-bottom: 3%; padding: 4%; } }

.form-style .input input[type="radio"], .form-style .textarea input[type="radio"] { margin-right: 8px; width: auto; }

.form-style .input .selectbox, .form-style .textarea .selectbox { width: 35%; height: 44px; border: 1px solid #ddd; background: #ffeac8; font-size: 24px; font-size: 1.5rem; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

.form-style .input .credit_number, .form-style .textarea .credit_number { display: inline-block; width: 35%; }

.form-style .input .credit_number_name, .form-style .input .selectbox_month, .form-style .textarea .credit_number_name, .form-style .textarea .selectbox_month { margin-right: 10px; }

.form-style .input .example, .form-style .textarea .example { margin-top: 2%; color: #777777; font-size: 18px; font-size: 1.125rem; }

.form-style .input .example span, .form-style .textarea .example span { margin-right: 5px; padding: 3px 5px; color: #777777; background: #eee; }

.form-style .input .discription, .form-style .textarea .discription { margin-bottom: 2%; color: #666666; font-size: 20px; font-size: 1.25rem; }

.form-style .input .discription span, .form-style .textarea .discription span { margin-right: 5px; padding: 3px 5px; color: #ffffff; background: #666666; }

.form-style .input .attention, .form-style .textarea .attention { margin-bottom: 1.5em; color: #f52929; font-size: 18px; font-size: 1.125rem; }

.form-style .input .attention span, .form-style .textarea .attention span { margin-right: 5px; padding: 3px 5px; color: #ffffff; background: #f52929; }

@media screen and (max-width: 767px) { .form-style input[type="checkbox"] { -webkit-appearance: checkbox !important; -moz-appearance: checkbox !important; appearance: checkbox !important; } }

@media screen and (max-width: 767px) { .form-style input[type="radio"] { -webkit-appearance: radio !important; -moz-appearance: radio !important; appearance: radio !important; } }

.form-style input[disabled="disabled"] { background: #cccccc; }

.form-style .aside h3 { font-size: 120% !important; }

.form-style .radio-box { margin-bottom: .2em; }

.form-style #button-area { text-align: center; width: 100%; }

@media screen and (min-width: 768px) { .form-style #button-area { padding: 50px; } }

@media screen and (max-width: 767px) { .form-style #button-area { padding: 8% 0; } }

.form-style #button-area button, .form-style #button-area .button { margin: 0; padding: 0; border: none; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; cursor: pointer; color: #ffffff; background: #02e0e3; font-size: 30px; font-size: 1.875rem; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; box-shadow: 0 3px 0 0 #00adb0; position: relative; top: 0; }

.form-style #button-area button:hover, .form-style #button-area .button:hover { background: #13f1f4; box-shadow: 0 1px 0 0 #00adb0; top: 2px; }

@media screen and (min-width: 768px) { .form-style #button-area button, .form-style #button-area .button { padding: 20px 50px; min-width: 400px; } }

@media screen and (max-width: 767px) { .form-style #button-area button, .form-style #button-area .button { padding: 5%; display: block; width: 100%; } }

.form-style #button-area button[disabled="disabled"] { cursor: not-allowed; color: #333333; background: #cccccc; box-shadow: 0 0px 0 0 #cccccc; position: relative; top: 0; }

.form-style .lostpass { text-align: center; }

@media screen and (max-width: 767px) { .form-style p br { display: none; } }

@media screen and (min-width: 768px) { .form-style .t-center { margin-top: 50px; text-align: center; } }

@media screen and (max-width: 767px) { .form-style .t-center { margin-top: 5%; margin-bottom: 0; } }

.form-style .agree-checkbox { padding: 20px; margin: 0 auto; max-width: 640px; background: #eeeeee; position: relative; top: 20px; }

@media screen and (max-width: 767px) { .form-style .agree-checkbox { padding: 5%; margin: 0; } }

.form-style .agree-checkbox li { margin-bottom: 2%; list-style: none; text-align: left; }

.form-style .agree-checkbox li:first-child { margin-bottom: 10px; text-align: center; font-weight: bold; }

.form-style .agree-checkbox label { padding-left: 5px; display: inline; font-weight: normal; }

#order_form .installment-attention { margin: 0 auto 1em; width: 100%; max-width: 640px; background: #eeeeee; font-size: 12px; line-height: 1.5; color: #333; }

@media screen and (max-width: 767px) { text-align: left; }

#order_form .installment-attention .installment-inner { padding: 5% 5% 2%; }

#order_form .installment-attention h5 { margin-bottom: 0; padding: 1% 5%; background: #333; color: #fff; font-size: 1.2em; font-weight: normal; text-align: center; }

#order_form .installment-attention h6 { margin: 1em 0 0.25em; font-size: 1.2em; font-weight: bold; }

#order_form .installment-attention .installment-simulation { margin-bottom: .5em; }

#order_form .installment-attention .installment-simulation span { padding: 0.1em 0.2em; margin-right: .5em; display: inline-block; color: #fff; background: #333; border-radius: 3px; }

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

.order-attention .fa-exclamation-triangle { color: #02e0e3; animation: Flash 1s infinite; }

@media screen and (min-width: 768px) { .order-attention { margin-bottom: 20px; } }

@media screen and (max-width: 767px) { .order-attention { margin-bottom: 5%; } }

.order-attention dt { text-align: center; color: #ffffff; background: #333333; }

@media screen and (min-width: 768px) { .order-attention dt { padding: 5px 10px; } }

@media screen and (max-width: 767px) { .order-attention dt { padding: 3%; } }

.order-attention dd { border: 1px solid #333333; }

@media screen and (min-width: 768px) { .order-attention dd { padding: 15px; font-size: 22px; font-size: 1.375rem; } }

@media screen and (max-width: 767px) { .order-attention dd { padding: 5%; } }

.select-plan-list { border: solid 1px #DEDEDE; padding: 15px; width: 49%; }

@media screen and (max-width: 767px) { .select-plan-list { margin-bottom: 3%; padding: 5%; width: 100%; } }

.select-plan-list .select-plan-list-head-wrap { padding: 1em; margin-bottom: 5%; text-align: center; color: #ffffff; background: #02e0e3; }

.select-plan-list .select-plan-list-head { font-weight: bold; line-height: 1.5; font-size: 30px; font-size: 1.875rem; }

@media screen and (max-width: 767px) { .select-plan-list .select-plan-list-head { font-size: 25px; font-size: 1.5625rem; } }

.select-plan-list .select-plan-list-head-aside { line-height: 1.5; font-size: 20px; font-size: 1.25rem; }

.select-plan-list .select-plan-aside { margin: 0; padding: 0; border: none; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.select-plan-list .select-plan-aside li { margin-bottom: 1.5em; list-style-type: none !important; }

.select-plan-list .th { padding-bottom: 3px; margin-bottom: 5px; border-bottom: 1px dotted #cccccc; font-weight: bold; }

@media screen and (min-width: 768px) { .select-plan-list .th { font-size: 20px; font-size: 1.25rem; } }

@media screen and (max-width: 767px) { .select-plan-list .th { font-size: 22px; font-size: 1.375rem; } }

@media screen and (min-width: 768px) { .select-plan-list .td { font-size: 28px; font-size: 1.75rem; } }

@media screen and (max-width: 767px) { .select-plan-list .td { font-size: 32px; font-size: 2rem; } }

.select-plan-list .td span { font-size: 16px; font-size: 1rem; }

.select-plan-list .attention { margin: 5% 0 6%; line-height: 1.5; font-size: 18px; font-size: 1.125rem; }

.select-plan-list .select-plan-btn a { text-align: center; display: block; cursor: pointer; font-weight: bold; color: #ffffff !important; background: #02e0e3; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; }

@media screen and (min-width: 768px) { .select-plan-list .select-plan-btn a { padding: 10px; font-size: 22px; font-size: 1.375rem; box-shadow: 0 3px 0 0 #00adb0; position: relative; top: 0; }
  .select-plan-list .select-plan-btn a:hover { color: #ffffff; text-decoration: none; background: #13f1f4; box-shadow: 0 1px 0 0 #00adb0; top: 2px; } }

@media screen and (max-width: 767px) { .select-plan-list .select-plan-btn a { padding: 4%; box-shadow: 0 3px 0 0 #00adb0; position: relative; top: 0; } }

.select-plan-list-last-child, .select-plan-radiobtn-last-child { margin-right: 0 !important; }

#select-content-list { margin: 0; padding: 0; border: none; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.select-content-list { padding: 4px 0; list-style-type: none !important; }

.select-content-list h4, .select-content-list .introduction { color: #333333 !important; line-height: 1.8; }

@media screen and (max-width: 767px) { .select-content-list h4, .select-content-list .introduction { position: relative; top: -3px; font-size: 21px; font-size: 1.3125rem; line-height: 1.5; } }

.select-content-list h4 { margin-bottom: 10px; }

@media screen and (max-width: 767px) { .select-content-list h4 { margin-bottom: 3%; } }

.select-content-list .introduction { font-weight: normal; }

.select-content-list .select-content-list-label { padding: 15px; cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

.select-content-list .select-content-list-label::after { content: ""; display: block; clear: both; }

.select-content-list .select-content-list-label:hover { background: #d7f4ff; }

.select-content-list .select-content-list-label .select-content-list-img { float: left; width: 20%; }

@media screen and (max-width: 767px) { .select-content-list .select-content-list-label .select-content-list-img { width: 15%; } }

.select-content-list .select-content-list-label .select-content-list-img img { vertical-align: top; }

.select-content-list .select-content-list-label .select-content-list-deteil { margin-left: 3%; float: left; width: 70%; }

@media screen and (max-width: 767px) { .select-content-list .select-content-list-label .select-content-list-deteil { width: 75%; } }

.select-content-list .select-content-list-label .select-content-list-checkbox-true { float: right; width: 7%; height: 150px; text-align: right; }

.select-content-list .select-content-list-label .select-content-list-checkbox-true .select-content-list-checkbox, .select-content-list .select-content-list-label .select-content-list-checkbox-true i { margin-top: -11px; width: 22px; height: 22px; border: 2px solid #cccccc; display: inline-block; position: relative; top: 50%; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; }

.select-content-list .select-content-list-label .select-content-list-checkbox-true .select-content-list-checkbox:before, .select-content-list .select-content-list-label .select-content-list-checkbox-true i:before { display: none; }

@media screen and (max-width: 767px) { .select-content-list .select-content-list-label .select-content-list-checkbox-true .select-content-list-checkbox, .select-content-list .select-content-list-label .select-content-list-checkbox-true i { top: 12px; } }

.select-content-list .select-content-list-checkbox { display: none; }

.select-content-list .select-content-list-checkbox:checked + .select-content-list-label { background: #d7f4ff; }

.select-content-list .select-content-list-checkbox:checked + .select-content-list-label .select-content-list-checkbox-true .select-content-list-checkbox, .select-content-list .select-content-list-checkbox:checked + .select-content-list-label .select-content-list-checkbox-true i { border: 2px solid #02e0e3; background: #02e0e3; }

.select-content-list .select-content-list-checkbox:checked + .select-content-list-label .select-content-list-checkbox-true .select-content-list-checkbox:before, .select-content-list .select-content-list-checkbox:checked + .select-content-list-label .select-content-list-checkbox-true i:before { display: block; position: absolute; top: 4px; left: 4px; color: #ffffff; }

.select-content-list-checkbox[disabled="disabled"] + .select-content-list-label { background: #dddddd; }

.select-content-list-checkbox[disabled="disabled"] + .select-content-list-label:hover { background: #dddddd; }

#product-list { padding-left: 0; }

@media screen and (max-width: 767px) { #product-list { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; } }

#product-list li { margin-bottom: 1em; list-style-type: none; position: relative; }

.select-content-list-checkbox { display: none; }

.select-content-list-checkbox:checked + .select-content-list-label { background: #ffe2ea; border: 1px solid #02e0e3; }

.select-content-list-checkbox:checked + .select-content-list-label .select-content-list-checkbox-true .select-content-list-checkbox, .select-content-list-checkbox:checked + .select-content-list-label .select-content-list-checkbox-true i { border: 2px solid #02e0e3; background: #02e0e3; }

.select-content-list-checkbox:checked + .select-content-list-label .select-content-list-checkbox-true .select-content-list-checkbox:before, .select-content-list-checkbox:checked + .select-content-list-label .select-content-list-checkbox-true i:before { display: block; position: absolute; top: 4px; left: 4px; color: #ffffff; }

.select-content-list-label { padding: 1em 0; display: flex; align-items: center; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

.select-content-list-label:hover { cursor: pointer; background: #fff4f5; }

.select-content-list-checkbox-true { width: 10%; text-align: center; }

.select-content-list-checkbox-true .select-content-list-checkbox, .select-content-list-checkbox-true i { width: 22px; height: 22px; border: 2px solid #cccccc; display: inline-block; vertical-align: middle; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; }

.select-content-list-checkbox-true .select-content-list-checkbox:before, .select-content-list-checkbox-true i:before { display: none; }

.product-img { padding: 0 5px; width: 25%; }

.product-text { padding: 0 1em; width: 65%; }

.product-name { margin-bottom: .25em; font-size: 1.25em; font-weight: bold; }

.product-price { margin-bottom: .75em; font-size: .7em; }

.product-description { font-size: .8em; line-height: 1.5; }

.display-price-wrap { margin-bottom: 5em; padding: 1em; background: #eeeeee; text-align: center; }

.display-price-title { margin-bottom: .75em; }

.display-price { font-weight: bold; font-size: 1.5em; }

.display-price .tax { font-size: .5em; }

.current-plan::after { content: ""; display: block; clear: both; }

.current-plan .single-plan-processing { padding: 15px; margin-bottom: 10px; color: #ffffff; background: #02e0e3; font-weight: bold; }

.current-plan .single-plan-processing a { color: #ffffff !important; text-decoration: underline; }

.current-plan .single-plan-processing a:hover { text-decoration: none; }

@media screen and (min-width: 768px) { .current-plan .select-plan-list { margin-bottom: 50px; padding: 15px; width: 100%; } }

@media screen and (max-width: 767px) { .current-plan .select-plan-list { margin-bottom: 3%; padding: 5%; } }

@media screen and (min-width: 768px) { .current-plan .select-plan-aside::after { content: ""; display: block; clear: both; }
  .current-plan .select-plan-aside > li { margin-right: 2%; display: inline-block; width: 48%; }
  .current-plan .select-plan-aside > li:last-child { margin: 0; } }

.order-btn a { text-align: center; display: block; cursor: pointer; font-weight: bold; color: #ffffff !important; background: #02e0e3; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; }

@media screen and (min-width: 768px) { .order-btn a { padding: 10px; font-size: 22px; font-size: 1.375rem; box-shadow: 0 3px 0 0 #00adb0; position: relative; top: 0; }
  .order-btn a:hover { color: #ffffff; text-decoration: none; background: #13f1f4; box-shadow: 0 1px 0 0 #00adb0; top: 2px; } }

@media screen and (max-width: 767px) { .order-btn a { padding: 4%; } }

.select-btn { text-align: center; display: block; cursor: pointer; font-weight: bold; color: #ffffff !important; background: #02e0e3; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; }

@media screen and (min-width: 768px) { .select-btn { padding: 10px; font-size: 22px; font-size: 1.375rem; box-shadow: 0 3px 0 0 #00adb0; position: relative; top: 0; }
  .select-btn:hover { color: #ffffff; text-decoration: none; background: #13f1f4; box-shadow: 0 1px 0 0 #00adb0; top: 2px; } }

@media screen and (max-width: 767px) { .select-btn { padding: 4%; } }

.select-card { padding-left: 0 !important; }

.select-card::after { content: ""; display: block; clear: both; }

.select-card .select-card-list { padding: 5px; float: left; width: 25%; text-align: center; list-style-type: none; }

@media screen and (max-width: 767px) { .select-card .select-card-list { padding: 0; padding-right: 5px; } }

.select-card .select-card-radiobtn-radio { display: none; }

.select-card .select-card-radiobtn-label { padding: 10px; border: 2px solid #ddd; display: block; cursor: pointer; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; }

.select-card .select-card-radiobtn-label:hover { border: 2px solid #02e0e3; }

@media screen and (max-width: 767px) { .select-card .select-card-radiobtn-label { padding: 5px 5px 2px; } }

.select-card .select-card-radiobtn-radio:checked + .select-card-radiobtn-label { background: #d7f4ff; border: 2px solid #02e0e3; }

.select-box select { min-width: 30%; height: 44px; border: 1px solid #ddd; background: #ffeac8; font-size: 24px; font-size: 1.5rem; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

@media screen and (max-width: 767px) { .select-box select { width: 100%; } }

#plan { margin-bottom: 1.5em; }

.plan-table { margin-bottom: 1.5em; width: 100%; }

.plan-table th, .plan-table td { padding: 10px; border: 1px solid #ccc; line-height: 1.5; text-align: center; font-size: 22px; font-size: 1.375rem; }

.plan-table th { color: #ffffff; background: #333333; }

.error-message { padding: 15px; margin-bottom: 10px; color: #ffffff; background: #02e0e3; font-weight: bold; }

@media screen and (max-width: 767px) { .error-message { padding: 5%; margin-bottom: 2%; } }

.error-message a { color: #ffffff !important; text-decoration: underline; }

.error-message a:hover { text-decoration: none; }

.single-plan-processing { padding: 15px; margin-bottom: 10px; color: #ffffff; background: #02e0e3; font-weight: bold; }

@media screen and (max-width: 767px) { .single-plan-processing { padding: 5%; margin-bottom: 2%; } }

.side_widget h2, #side_list h2 { color: #ffffff; background: #02e0e3; border: none !important; }

#side-os-link-area-wrap { padding: 0; }

#side-os-link-area-wrap div { padding: 0; }

#side-os-link-area-wrap a { display: block; overflow: hidden; position: relative; }

#side-os-link-area-wrap a:hover { text-decoration: none; }

@media screen and (min-width: 768px) { #side-os-link-area-wrap a:hover .title, #side-os-link-area-wrap a:hover .time, #side-os-link-area-wrap a:hover .teacher { right: 280px; }
  #side-os-link-area-wrap a:hover .watch { margin-left: -50px; left: 50%; } }

#side-os-link-area-wrap .side-os-link-area { margin-bottom: 5px; padding: 10% 10px; width: 100%; background: url(../img/side_os_img.jpg) no-repeat center center; background-size: cover; position: relative; }

#side-os-link-area-wrap .title, #side-os-link-area-wrap .time, #side-os-link-area-wrap .teacher { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; position: relative; right: 0px; }

#side-os-link-area-wrap .watch { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; font-size: 40px; font-size: 2.5rem; display: inline-block; width: 100px; text-align: center; position: absolute; top: 45%; left: 300px; }

@media screen and (max-width: 767px) { #side-os-link-area-wrap .watch { display: none; } }

#side-os-link-area-wrap .side-os-link { color: #ffffff; text-align: center; font-weight: bold; }

#side-os-link-area-wrap .side-os-link .title { margin-bottom: 10px; line-height: 1.5; font-size: 30px; font-size: 1.875rem; }

#side-os-link-area-wrap .side-os-link time { line-height: 1.3; font-size: 20px; font-size: 1.25rem; }

#side-os-link-area-wrap .side-os-link .time { margin-bottom: 8px; }

#side-os-link-area-wrap .side-os-link .head { padding: 1px 3px 0; border-bottom: 1px solid #ffffff; display: inline-block; min-width: 150px; line-height: 1.8; font-size: 18px; font-size: 1.125rem; }

#paid-content-list { margin: 0; padding: 0; border: none; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

#paid-content-list::after { content: ""; display: block; clear: both; }

#paid-content-list li { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #dddddd; list-style-type: none; }

#paid-content-list li:last-child { margin: 0; padding: 0; border: none; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

@media screen and (max-width: 767px) { #paid-content-list li { margin-bottom: 5%; } }

.paid-content-list::after { content: ""; display: block; clear: both; }

.paid-content-list .paid-content-list-img { float: left; width: 20%; }

.paid-content-list .paid-content-list-detail { float: right; width: 78%; }

.paid-content-list .paid-content-list-title { margin-bottom: 10px; font-weight: bold; font-size: 34px; font-size: 2.125rem; }

@media screen and (max-width: 767px) { .paid-content-list .paid-content-list-title { margin-bottom: 2%; line-height: 1.5; font-size: 28px; font-size: 1.75rem; } }

.paid-content-list .paid-content-list-introduction { margin-bottom: 15px; font-size: 24px; font-size: 1.5rem; }

@media screen and (max-width: 767px) { .paid-content-list .paid-content-list-introduction { line-height: 1.5; font-size: 20px; font-size: 1.25rem; } }

.paid-content-list .paid-content-list-btn { padding: 10px 30px; text-align: center; display: inline-block; border: 1px solid #cccccc; color: #333333 !important; font-weight: bold; font-size: 22px; font-size: 1.375rem; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; box-shadow: 0 2px 0 0 #aaaaaa; position: relative; top: 0; background: #efefef; background: -moz-linear-gradient(top, #efefef 0%, #d1d1d1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #efefef), color-stop(100%, #d1d1d1)); background: -webkit-linear-gradient(top, #efefef 0%, #d1d1d1 100%); background: -o-linear-gradient(top, #efefef 0%, #d1d1d1 100%); background: -ms-linear-gradient(top, #efefef 0%, #d1d1d1 100%); background: linear-gradient(to bottom, #efefef 0%, #d1d1d1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 ); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; }

.paid-content-list .paid-content-list-btn:hover { text-decoration: none; box-shadow: 0 1px 0 0 #aaaaaa; top: 2px; background: #efefef; background: -moz-linear-gradient(top, #efefef 0%, #dbdbdb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #efefef), color-stop(100%, #dbdbdb)); background: -webkit-linear-gradient(top, #efefef 0%, #dbdbdb 100%); background: -o-linear-gradient(top, #efefef 0%, #dbdbdb 100%); background: -ms-linear-gradient(top, #efefef 0%, #dbdbdb 100%); background: linear-gradient(to bottom, #efefef 0%, #dbdbdb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 ); }

@media screen and (max-width: 767px) { .paid-content-list .paid-content-list-btn { display: block; } }

#user-info .paid-list { padding: 0; list-style-type: none; }

#user-info .paid-data { margin-bottom: 1em; padding: 1em; border: 1px solid #ccc; }

#user-info .receipt_description { margin-bottom: .5em; font-weight: bold; font-size: 1.25em; }

#user-info .receipt_button { margin-top: 1em; }

#user-info .receipt_button .btn { padding: 0.5em 1em; display: inline-block; min-width: 320px; text-align: center; }

#user-info .receipt_button_disabled .btn { background: #ccc; border-radius: 100px; }

.error-message { padding: 15px; margin-bottom: 10px; color: #ffffff; background: #f52929; font-weight: bold; }

@media screen and (max-width: 767px) { .error-message { padding: 5%; margin-bottom: 2%; } }

.error-message a { color: #ffffff !important; text-decoration: underline; }

.error-message a:hover { text-decoration: none; }

.single-plan-processing { padding: 15px; margin-bottom: 10px; color: #ffffff; background: #f52929; font-weight: bold; }

@media screen and (max-width: 767px) { .single-plan-processing { padding: 5%; margin-bottom: 2%; } }

.contents .recommended_contlist { width: 100%; height: 200px; float: none; }

@media screen and (max-width: 767px) { .contents .recommended_contlist { width: calc(100% - 20px); } }

#toppage-news { height: 300px; line-height: 1.8; font-size: 24px; font-size: 1.5rem; }

.footer_menu img { max-width: 140px; }

#toppage-news { height: auto; max-height: 200px; overflow: auto; border: 1px solid #02e0e3; }

#toppage-news p { margin-bottom: 1em; }

.recommended_contents h2 { padding: .5em; color: #fff; background: #02e0e3; border: none; }

.recommended_contents { margin-bottom: 3em; }

.side_contents h4 { margin-top: 1em; font-size: .8em; font-weight: bold; }

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

.side_contents-inner { margin-bottom: 2em; padding: 1em; background: #eee; }

.aside-your-name { padding-bottom: 1em; border-bottom: 1px dotted #ccc; }

#trial-end-timer { margin-bottom: 1em; font-weight: bold; font-size: 1.5em; }

.trial-end-timer, .yycountdown-box { display: inline-block; }

.trial-end-timer-title { padding: 0.25em 1em; border: 1px solid #ff2824; background: #ff2824; color: #ffffff; display: inline-block; width: 40%; text-align: center; }

@media screen and (max-width: 767px) { .trial-end-timer-title { display: block; width: 100%; text-align: center; } }

.trial-end-timer { padding: 0.25em 1em; border: 1px solid #ff2824; background: #ffffff; color: #ff2824; width: 60%; text-align: center; }

@media screen and (max-width: 767px) { .trial-end-timer { display: block; width: 100%; text-align: center; } }

/* .trial-end-timer { padding: 5px 0.25em; line-height: 1; background: #ff2824; color: #fff; @include borad(5); } */
.mypage-link { margin: 15px 0; }

.mypage-link a { padding: 15px; display: block; width: 100%; text-align: center; border: 1px solid #02e0e3; color: #02e0e3; background: #ffffff; font-weight: bold; font-size: 28px; font-size: 1.75rem; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; }

@media screen and (max-width: 767px) { .mypage-link a { padding: 5%; } }

.mypage-link a:hover { text-decoration: none; color: #ffffff !important; background: #02e0e3; }

.logout-button { padding: 5px 15px; display: inline-block; color: #ffffff; background: #333; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; box-shadow: 0 2px 0 0 #000; position: relative; top: 0; }

.logout-button:hover { text-decoration: none; color: #ffffff !important; box-shadow: 0 1px 0 0 #000; top: 1px; }

.side_widget_search input[type="text"] { width: calc(100% - 58px); border: none; background: #eeeeee; }

#faq-sidebar-wrap .faq-sidebar-head { margin-bottom: 15px; padding-bottom: 10px; font-weight: bold; position: relative; font-size: 28px; font-size: 1.75rem; }

#faq-sidebar-wrap .faq-sidebar-head:after { content: ""; width: 20%; height: 3px; background: #02e0e3; position: absolute; bottom: 0px; left: 0; }

#faq-sidebar-wrap .faq-sidebar-inner { margin-bottom: 50px; }

#faq-sidebar-wrap .faq-sidebar-category .cat-item { display: inline-block; }

#faq-sidebar-wrap .faq-sidebar-category .cat-item a { margin-bottom: 5px; padding: 2px 8px; border: 1px solid #02e0e3; color: #02e0e3; display: inline-block; font-size: 18px; font-size: 1.125rem; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; }

#faq-sidebar-wrap .faq-sidebar-category .cat-item a:hover { color: #ffffff; background: #02e0e3; text-decoration: none; }

#faq-sidebar-wrap .faq-sidebar-category .cat-item-11, #faq-sidebar-wrap .faq-sidebar-category .cat-item-24 { padding: 0; border: none; }

#faq-sidebar-wrap .faq-sidebar-category .cat-item-11 > a, #faq-sidebar-wrap .faq-sidebar-category .cat-item-24 > a { margin-top: 10px; padding: 0; font-weight: bold; border: none; }

#faq-sidebar-wrap .faq-sidebar-category .cat-item-11 > a:hover, #faq-sidebar-wrap .faq-sidebar-category .cat-item-24 > a:hover { color: #02e0e3; background: none; text-decoration: underline; }

#userule-area { padding: 1.5em; width: 100%; height: 80vh; background: #eee; border: 1px solid #ccc; overflow-y: scroll; }

#shaper-dl .agree-checkbox { padding: 20px; width: 100%; }

@media screen and (max-width: 767px) { #shaper-dl .agree-checkbox { padding: 5%; margin: 0; } }

#shaper-dl .agree-checkbox li { list-style: none; text-align: center; font-weight: bold; font-size: 1.2em; }

#shaper-dl .agree-checkbox label { padding-left: 5px; display: inline; font-weight: normal; }

#shaper-dl-link { text-align: center; display: block; width: 100%; }

#shaper-dl-link .shaper-dl-link { display: inline-block; cursor: pointer; color: #ffffff !important; text-decoration: none; background: #02e0e3; text-align: center; font-size: 30px; font-size: 1.875rem; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-transition: all 0.1s ease; -moz-transition: all 0.1s ease; -o-transition: all 0.1s ease; box-shadow: 0 3px 0 0 #00adb0; position: relative; top: 0; }

#shaper-dl-link .shaper-dl-link:hover { background: #13f1f4; box-shadow: 0 1px 0 0 #00adb0; top: 2px; }

@media screen and (min-width: 768px) { #shaper-dl-link .shaper-dl-link { padding: 20px; max-width: 400px; } }

@media screen and (max-width: 767px) { #shaper-dl-link .shaper-dl-link { padding: 5%; display: block; width: 100%; } }

#shaper-dl-link .disabled { cursor: not-allowed; pointer-events: none; color: #333333 !important; background: #cccccc; box-shadow: 0 0px 0 0 #cccccc; position: relative; top: 0; }

a.btn { padding: 2% 5%; background-color: #02e0e3; display: inline-block; color: #ffffff !important; text-decoration: none; border-radius: 50px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; cursor: pointer; }

@media screen and (max-width: 767px) { a.btn { padding: 3% 5%; } }

a.btn:hover { opacity: 0.6; }

.main-contents-list { width: 100% !important; display: flex !important; align-items: stretch; flex-wrap: wrap; }

.main-contents-list li { margin-right: 0 !important; margin-bottom: 1em !important; padding: .5em; width: 33% !important; float: none !important; }

@media screen and (max-width: 767px) { .main-contents-list li { padding: 0 !important; width: 100% !important; } }

.first_season_contents .plan-basic .plan-name { background: #e61773 !important; }

.first_season_contents .paid-icon span { background: #e61773 !important; }

@media screen and (max-width: 767px) { .first_season_contents #site_discription { background: #e61773 !important; } }

.first_season_contents #global_nav a:hover { color: #e61773 !important; border-bottom: 1px solid #e61773 !important; }

.first_season_contents button, .first_season_contents .button { background: #e61773 !important; box-shadow: 0 3px 0 0 #b30040; position: relative; top: 0; }

.first_season_contents button:hover, .first_season_contents .button:hover { background: #f72884; box-shadow: 0 1px 0 0 #b30040; top: 2px; }

.first_season_contents .side_widget h2, .first_season_contents #side_list h2 { background: #e61773 !important; }

.first_season_contents #toppage-news { border: 1px solid #e61773 !important; }

.first_season_contents .recommended_contents h2 { background: #e61773 !important; }

.first_season_contents .shaper-dl-link { background: #e61773 !important; box-shadow: 0 3px 0 0 #b30040; position: relative; top: 0; }

.first_season_contents .shaper-dl-link:hover { background: #f72884; box-shadow: 0 1px 0 0 #b30040; top: 2px; }

.first_season_contents .wp-pagenavi span, .first_season_contents .wp-pagenavi a { color: #e61773 !important; border: solid 1px #e61773 !important; }

.first_season_contents .wp-pagenavi span { background: #e61773 !important; }

.first_season_contents .wp-pagenavi .current { color: #ffffff !important; }

.first_season_contents #path a { color: #e61773 !important; }

.first_season_contents article .body a { color: #e61773 !important; }

.first_season_contents article .body a.btn { background-color: #e61773 !important; color: #ffffff !important; }

.first_season_contents article h2 { border-left: solid 7px #e61773 !important; }

.first_season_contents #footer_content a:hover { color: #e61773 !important; }

.second_season_contents .plan-basic .plan-name { background: #f5aa30 !important; }

.second_season_contents .paid-icon span { background: #f5aa30 !important; }

@media screen and (max-width: 767px) { .second_season_contents #site_discription { background: #f5aa30 !important; } }

.second_season_contents #global_nav a:hover { color: #f5aa30 !important; border-bottom: 1px solid #f5aa30 !important; }

.second_season_contents button, .second_season_contents .button { background: #f5aa30 !important; box-shadow: 0 3px 0 0 #c27700; position: relative; top: 0; }

.second_season_contents button:hover, .second_season_contents .button:hover { background: #ffbb41; box-shadow: 0 1px 0 0 #c27700; top: 2px; }

.second_season_contents .side_widget h2, .second_season_contents #side_list h2 { background: #f5aa30 !important; }

.second_season_contents #toppage-news { border: 1px solid #f5aa30 !important; }

.second_season_contents .recommended_contents h2 { background: #f5aa30 !important; }

.second_season_contents .shaper-dl-link { background: #f5aa30 !important; box-shadow: 0 3px 0 0 #c27700; position: relative; top: 0; }

.second_season_contents .shaper-dl-link:hover { background: #ffbb41; box-shadow: 0 1px 0 0 #c27700; top: 2px; }

.second_season_contents .wp-pagenavi span, .second_season_contents .wp-pagenavi a { color: #f5aa30 !important; border: solid 1px #f5aa30 !important; }

.second_season_contents .wp-pagenavi span { background: #f5aa30 !important; }

.second_season_contents .wp-pagenavi .current { color: #ffffff !important; }

.second_season_contents #path a { color: #f5aa30 !important; }

.second_season_contents article .body a { color: #f5aa30 !important; }

.second_season_contents article .body a.btn { background-color: #f5aa30 !important; color: #ffffff !important; }

.second_season_contents article h2 { border-left: solid 7px #f5aa30 !important; }

.second_season_contents #footer_content a:hover { color: #f5aa30 !important; }

.third_season_contents .plan-basic .plan-name { background: #a16ee9 !important; }

.third_season_contents .paid-icon span { background: #a16ee9 !important; }

@media screen and (max-width: 767px) { .third_season_contents #site_discription { background: #a16ee9 !important; } }

.third_season_contents #global_nav a:hover { color: #a16ee9 !important; border-bottom: 1px solid #a16ee9 !important; }

.third_season_contents button, .third_season_contents .button { background: #a16ee9 !important; box-shadow: 0 3px 0 0 #6e3bb6; position: relative; top: 0; }

.third_season_contents button:hover, .third_season_contents .button:hover { background: #b27ffa; box-shadow: 0 1px 0 0 #6e3bb6; top: 2px; }

.third_season_contents .side_widget h2, .third_season_contents #side_list h2 { background: #a16ee9 !important; }

.third_season_contents #toppage-news { border: 1px solid #a16ee9 !important; }

.third_season_contents .recommended_contents h2 { background: #a16ee9 !important; }

.third_season_contents .shaper-dl-link { background: #a16ee9 !important; box-shadow: 0 3px 0 0 #6e3bb6; position: relative; top: 0; }

.third_season_contents .shaper-dl-link:hover { background: #b27ffa; box-shadow: 0 1px 0 0 #6e3bb6; top: 2px; }

.third_season_contents .wp-pagenavi span, .third_season_contents .wp-pagenavi a { color: #a16ee9 !important; border: solid 1px #a16ee9 !important; }

.third_season_contents .wp-pagenavi span { background: #a16ee9 !important; }

.third_season_contents .wp-pagenavi .current { color: #ffffff !important; }

.third_season_contents #path a { color: #a16ee9 !important; }

.third_season_contents article .body a { color: #a16ee9 !important; }

.third_season_contents article .body a.btn { background-color: #a16ee9 !important; color: #ffffff !important; }

.third_season_contents article h2 { border-left: solid 7px #a16ee9 !important; }

.third_season_contents #footer_content a:hover { color: #a16ee9 !important; }

.fourth_season_contents .plan-basic .plan-name { background: #02e0e3 !important; }

.fourth_season_contents .paid-icon span { background: #02e0e3 !important; }

@media screen and (max-width: 767px) { .fourth_season_contents #site_discription { background: #02e0e3 !important; } }

.fourth_season_contents #global_nav a:hover { color: #02e0e3 !important; border-bottom: 1px solid #02e0e3 !important; }

.fourth_season_contents button, .fourth_season_contents .button { background: #02e0e3 !important; box-shadow: 0 3px 0 0 #00adb0; position: relative; top: 0; }

.fourth_season_contents button:hover, .fourth_season_contents .button:hover { background: #13f1f4; box-shadow: 0 1px 0 0 #00adb0; top: 2px; }

.fourth_season_contents .side_widget h2, .fourth_season_contents #side_list h2 { background: #02e0e3 !important; }

.fourth_season_contents #toppage-news { border: 1px solid #02e0e3 !important; }

.fourth_season_contents .recommended_contents h2 { background: #02e0e3 !important; }

.fourth_season_contents .shaper-dl-link { background: #02e0e3 !important; box-shadow: 0 3px 0 0 #00adb0; position: relative; top: 0; }

.fourth_season_contents .shaper-dl-link:hover { background: #13f1f4; box-shadow: 0 1px 0 0 #00adb0; top: 2px; }

.fourth_season_contents .wp-pagenavi span, .fourth_season_contents .wp-pagenavi a { color: #02e0e3 !important; border: solid 1px #02e0e3 !important; }

.fourth_season_contents .wp-pagenavi span { background: #02e0e3 !important; }

.fourth_season_contents .wp-pagenavi .current { color: #ffffff !important; }

.fourth_season_contents #path a { color: #02e0e3 !important; }

.fourth_season_contents article .body a { color: #02e0e3 !important; }

.fourth_season_contents article .body a.btn { background-color: #02e0e3 !important; color: #ffffff !important; }

.fourth_season_contents article h2 { border-left: solid 7px #02e0e3 !important; }

.fourth_season_contents #footer_content a:hover { color: #02e0e3 !important; }

/*======================================

	Font-size Adjustment
	
	77% = 10px	| 	112% = 16px	|	167% = 22px	
	85% = 11px	|	129% = 17px	|	174% = 23px
	92% = 12px	|	136% = 18px	|	182% = 24px
	100% = 13px	|	144% = 19px	|	189% = 25px
	107% = 14px	|	152% = 20px	|	197% = 26px
	114% = 15px	|	159% = 21px	|

=======================================*/
/* font-color -------------------------------------------------- */
.fc-000 { color: #000; }

/*黒色*/
.fc-333 { color: #333; }

/*黒灰*/
.fc-666 { color: #666; }

/*濃灰*/
.fc-999 { color: #999; }

/*薄灰*/
.fc-ccc { color: #CCC; }

/*白灰*/
.fc-fff { color: #FFF; }

/*白色*/
.fc-f00 { color: #F00; }

/*赤色*/
.fc-900 { color: #900; }

/*濃赤*/
.fc-00f { color: #00F; }

/*青色*/
.fc-009 { color: #009; }

/*濃青*/
.fc-0f0 { color: #0F0; }

/*緑色*/
.fc-090 { color: #090; }

/*濃緑*/
.fc-0ff { color: #0FF; }

/*水色*/
.fc-ff0 { color: #FF0; }

/*黄色*/
.fc-f63 { color: #F63; }

/*橙色*/
.fc-90f { color: #90F; }

/*紫色*/
.fc-f0f { color: #F0F; }

/*桃色*/
/* font-background-color -------------------------------------------------- */
.fb-900 { padding: 1px; color: #FFF; font-weight: bold; background: #900; }

.fb-00f { padding: 1px; color: #ffffff; font-weight: bold; background: #00F; }

.fb-0f0 { padding: 1px; font-weight: bold; background: #0F0; }

.fb-0ff { padding: 1px; font-weight: bold; background: #0FF; }

.fb-ff0 { padding: 1px; font-weight: bold; background: #FF0; }

.fb-ff0- { padding: 1px; color: #F00; font-weight: bold; background: #FF0; }

.fb-ff0-2 { padding: 1px; color: #900; font-weight: bold; background: #FF0; }

.fb-f63 { padding: 1px; font-weight: bold; background: #F63; }

.fb-f0f { padding: 1px; color: #FFF; font-weight: bold; background: #F0F; }

/*												*/
/* ---------- これより以下は拡張設定 ----------	*/
/* ----------  使わない場合は放置  ----------	*/
/*												*/
/*------------------------------------------------------------ font-weight -------------------------------------------------------------*/
.fw-n { font-weight: normal; }

.fw-b { font-weight: bold; }

/*------------------------------------------------------------ font-size -------------------------------------------------------------*/
#wrapper .fs-10 { font-size: 10px; font-size: 0.625rem; }

#wrapper .fs-11 { font-size: 11px; font-size: 0.6875rem; }

#wrapper .fs-12 { font-size: 12px; font-size: 0.75rem; }

#wrapper .fs-13 { font-size: 13px; font-size: 0.8125rem; }

#wrapper .fs-14 { font-size: 14px; font-size: 0.875rem; }

#wrapper .fs-15 { font-size: 15px; font-size: 0.9375rem; }

#wrapper .fs-16 { font-size: 16px; font-size: 1rem; }

#wrapper .fs-17 { font-size: 17px; font-size: 1.0625rem; }

#wrapper .fs-18 { font-size: 18px; font-size: 1.125rem; }

#wrapper .fs-19 { font-size: 19px; font-size: 1.1875rem; }

#wrapper .fs-20 { font-size: 20px; font-size: 1.25rem; }

#wrapper .fs-21 { font-size: 21px; font-size: 1.3125rem; }

#wrapper .fs-22 { font-size: 22px; font-size: 1.375rem; }

#wrapper .fs-23 { font-size: 23px; font-size: 1.4375rem; }

#wrapper .fs-24 { font-size: 24px; font-size: 1.5rem; }

#wrapper .fs-25 { font-size: 25px; font-size: 1.5625rem; }

#wrapper .fs-26 { font-size: 26px; font-size: 1.625rem; }

#wrapper .fs-27 { font-size: 27px; font-size: 1.6875rem; }

#wrapper .fs-28 { font-size: 28px; font-size: 1.75rem; }

#wrapper .fs-29 { font-size: 29px; font-size: 1.8125rem; }

#wrapper .fs-30 { font-size: 30px; font-size: 1.875rem; }

/*------------------------------------------------------------ line-height -------------------------------------------------------------*/
.lh-110 { line-height: 110%; }

.lh-120 { line-height: 120%; }

.lh-130 { line-height: 130%; }

.lh-140 { line-height: 140%; }

.lh-150 { line-height: 150%; }

.lh-160 { line-height: 160%; }

.lh-170 { line-height: 170%; }

.lh-180 { line-height: 180%; }

.lh-190 { line-height: 190%; }

.lh-200 { line-height: 200%; }

/*------------------------------------------------------------ text-decoration -------------------------------------------------------------*/
.td-n { text-decoration: none; }

.td-u { text-decoration: underline; }

.td-o { text-decoration: overline; }

.td-t { text-decoration: line-through; }

.td-b { text-decoration: blink; }

/*------------------------------------------------------------ text-align -------------------------------------------------------------*/
.ta-c { text-align: center; }

/*中央寄せ*/
.ta-r { text-align: right; }

/*右寄せ*/
.ta-l { text-align: left; }

/*左寄せ*/
/*------------------------------------------------------------ vertical-align -------------------------------------------------------------*/
.va-t { vertical-align: top; }

/*上寄せ*/
.va-m { vertical-align: middle; }

/*中央寄せ*/
.va-b { vertical-align: bottom; }

/*下寄せ*/
@media screen and (min-width: 768px) { /*------------------------------------------------------------ margin -------------------------------------------------------------*/
  .m0 { margin: 0 !important; }
  /*全margin無し*/
  .mt-0 { margin-top: 0 !important; }
  /*上marginが0px*/
  .mr-0 { margin-right: 0 !important; }
  /*右marginが0px*/
  .mb-0 { margin-bottom: 0 !important; }
  /*下marginが0px*/
  .ml-0 { margin-left: 0 !important; }
  /*左marginが0px*/
  .m1 { margin: 1px !important; }
  .mt-1 { margin-top: 1px !important; }
  .mr-1 { margin-right: 1px !important; }
  .mb-1 { margin-bottom: 1px !important; }
  .ml-1 { margin-left: 1px !important; }
  .m2 { margin: 2px !important; }
  .mt-2 { margin-top: 2px !important; }
  .mr-2 { margin-right: 2px !important; }
  .mb-2 { margin-bottom: 2px !important; }
  .ml-2 { margin-left: 2px !important; }
  .m3 { margin: 3px !important; }
  .mt-3 { margin-top: 3px !important; }
  .mr-3 { margin-right: 3px !important; }
  .mb-3 { margin-bottom: 3px !important; }
  .ml-3 { margin-left: 3px !important; }
  .m4 { margin: 4px !important; }
  .mt-4 { margin-top: 4px !important; }
  .mr-4 { margin-right: 4px !important; }
  .mb-4 { margin-bottom: 4px !important; }
  .ml-4 { margin-left: 4px !important; }
  .m5 { margin: 5px !important; }
  .mt-5 { margin-top: 5px !important; }
  .mr-5 { margin-right: 5px !important; }
  .mb-5 { margin-bottom: 5px !important; }
  .ml-5 { margin-left: 5px !important; }
  .m6 { margin: 6px !important; }
  .mt-6 { margin-top: 6px !important; }
  .mr-6 { margin-right: 6px !important; }
  .mb-6 { margin-bottom: 6px !important; }
  .ml-6 { margin-left: 6px !important; }
  .m7 { margin: 7px !important; }
  .mt-7 { margin-top: 7px !important; }
  .mr-7 { margin-right: 7px !important; }
  .mb-7 { margin-bottom: 7px !important; }
  .ml-7 { margin-left: 7px !important; }
  .m8 { margin: 8px !important; }
  .mt-8 { margin-top: 8px !important; }
  .mr-8 { margin-right: 8px !important; }
  .mb-8 { margin-bottom: 8px !important; }
  .ml-8 { margin-left: 8px !important; }
  .m9 { margin: 9px !important; }
  .mt-9 { margin-top: 9px !important; }
  .mr-9 { margin-right: 9px !important; }
  .mb-9 { margin-bottom: 9px !important; }
  .ml-9 { margin-left: 9px !important; }
  .m10 { margin: 10px !important; }
  .mt-10 { margin-top: 10px !important; }
  .mr-10 { margin-right: 10px !important; }
  .mb-10 { margin-bottom: 10px !important; }
  .ml-10 { margin-left: 10px !important; }
  .m15 { margin: 15px !important; }
  .mt-15 { margin-top: 15px !important; }
  .mr-15 { margin-right: 15px !important; }
  .mb-15 { margin-bottom: 15px !important; }
  .ml-15 { margin-left: 15px !important; }
  .m20 { margin: 20px !important; }
  .mt-20 { margin-top: 20px !important; }
  .mr-20 { margin-right: 20px !important; }
  .mb-20 { margin-bottom: 20px !important; }
  .ml-20 { margin-left: 20px !important; }
  .m25 { margin: 25px !important; }
  .mt-25 { margin-top: 25px !important; }
  .mr-25 { margin-right: 25px !important; }
  .mb-25 { margin-bottom: 25px !important; }
  .ml-25 { margin-left: 25px !important; }
  .m30 { margin: 30px !important; }
  .mt-30 { margin-top: 30px !important; }
  .mr-30 { margin-right: 30px !important; }
  .mb-30 { margin-bottom: 30px !important; }
  .ml-30 { margin-left: 30px !important; }
  .m40 { margin: 40px !important; }
  .mt-40 { margin-top: 40px !important; }
  .mr-40 { margin-right: 40px !important; }
  .mb-40 { margin-bottom: 40px !important; }
  .ml-40 { margin-left: 40px !important; }
  .m50 { margin: 50px !important; }
  .mt-50 { margin-top: 50px !important; }
  .mr-50 { margin-right: 50px !important; }
  .mb-50 { margin-bottom: 50px !important; }
  .ml-50 { margin-left: 50px !important; }
  .m60 { margin: 60px !important; }
  .mt-60 { margin-top: 60px !important; }
  .mr-60 { margin-right: 60px !important; }
  .mb-60 { margin-bottom: 60px !important; }
  .ml-60 { margin-left: 60px !important; }
  .m70 { margin: 70px !important; }
  .mt-70 { margin-top: 70px !important; }
  .mr-70 { margin-right: 70px !important; }
  .mb-70 { margin-bottom: 70px !important; }
  .ml-70 { margin-left: 70px !important; }
  /*------------------------------------------------------------ padding -------------------------------------------------------------*/
  .p0 { padding: 0 !important; }
  /*全padding無し*/
  .pt-0 { padding-top: 0px !important; }
  /*上paddingが0px*/
  .pr-0 { padding-right: 0px !important; }
  /*右paddingが0px*/
  .pb-0 { padding-bottom: 0px !important; }
  /*下paddingが0px*/
  .pl-0 { padding-left: 0px !important; }
  /*左paddingが0px*/
  .p1 { padding: 1px !important; }
  .pt-1 { padding-top: 1px !important; }
  .pr-1 { padding-right: 1px !important; }
  .pb-1 { padding-bottom: 1px !important; }
  .pl-1 { padding-left: 1px !important; }
  .p2 { padding: 2px !important; }
  .pt-2 { padding-top: 2px !important; }
  .pr-2 { padding-right: 2px !important; }
  .pb-2 { padding-bottom: 2px !important; }
  .pl-2 { padding-left: 2px !important; }
  .p3 { padding: 3px !important; }
  .pt-3 { padding-top: 3px !important; }
  .pr-3 { padding-right: 3px !important; }
  .pb-3 { padding-bottom: 3px !important; }
  .pl-3 { padding-left: 3px !important; }
  .p4 { padding: 4px !important; }
  .pt-4 { padding-top: 4px !important; }
  .pr-4 { padding-right: 4px !important; }
  .pb-4 { padding-bottom: 4px !important; }
  .pl-4 { padding-left: 4px !important; }
  .p5 { padding: 5px !important; }
  .pt-5 { padding-top: 5px !important; }
  .pr-5 { padding-right: 5px !important; }
  .pb-5 { padding-bottom: 5px !important; }
  .pl-5 { padding-left: 5px !important; }
  .p6 { padding: 6px !important; }
  .pt-6 { padding-top: 6px !important; }
  .pr-6 { padding-right: 6px !important; }
  .pb-6 { padding-bottom: 6px !important; }
  .pl-6 { padding-left: 6px !important; }
  .p7 { padding: 7px !important; }
  .pt-7 { padding-top: 7px !important; }
  .pr-7 { padding-right: 7px !important; }
  .pb-7 { padding-bottom: 7px !important; }
  .pl-7 { padding-left: 7px !important; }
  .p8 { padding: 8px !important; }
  .pt-8 { padding-top: 8px !important; }
  .pr-8 { padding-right: 8px !important; }
  .pb-8 { padding-bottom: 8px !important; }
  .pl-8 { padding-left: 8px !important; }
  .p9 { padding: 9px !important; }
  .pt-9 { padding-top: 9px !important; }
  .pr-9 { padding-right: 9px !important; }
  .pb-9 { padding-bottom: 9px !important; }
  .pl-9 { padding-left: 9px !important; }
  .p10 { padding: 10px !important; }
  .pt-10 { padding-top: 10px !important; }
  .pr-10 { padding-right: 10px !important; }
  .pb-10 { padding-bottom: 10px !important; }
  .pl-10 { padding-left: 10px !important; }
  .p15 { padding: 15px !important; }
  .pt-15 { padding-top: 15px !important; }
  .pr-15 { padding-right: 15px !important; }
  .pb-15 { padding-bottom: 15px !important; }
  .pl-15 { padding-left: 15px !important; }
  .p20 { padding: 20px !important; }
  .pt-20 { padding-top: 20px !important; }
  .pr-20 { padding-right: 20px !important; }
  .pb-20 { padding-bottom: 20px !important; }
  .pl-20 { padding-left: 20px !important; }
  .p30 { padding: 30px !important; }
  .pt-30 { padding-top: 30px !important; }
  .pr-30 { padding-right: 30px !important; }
  .pb-30 { padding-bottom: 30px !important; }
  .pl-30 { padding-left: 30px !important; }
  .p40 { padding: 40px !important; }
  .pt-40 { padding-top: 40px !important; }
  .pr-40 { padding-right: 40px !important; }
  .pb-40 { padding-bottom: 40px !important; }
  .pl-40 { padding-left: 40px !important; }
  .p50 { padding: 50px !important; }
  .pt-50 { padding-top: 50px !important; }
  .pr-50 { padding-right: 50px !important; }
  .pb-50 { padding-bottom: 50px !important; }
  .pl-50 { padding-left: 50px !important; }
  .p60 { padding: 60px !important; }
  .pt-60 { padding-top: 60px !important; }
  .pr-60 { padding-right: 60px !important; }
  .pb-60 { padding-bottom: 60px !important; }
  .pl-60 { padding-left: 60px !important; }
  .p70 { padding: 70px !important; }
  .pt-70 { padding-top: 70px !important; }
  .pr-70 { padding-right: 70px !important; }
  .pb-70 { padding-bottom: 70px !important; }
  .pl-70 { padding-left: 70px !important; } }

@media screen and (max-width: 767px) { .m0 { margin: 0 !important; }
  /*全margin無し*/
  .mt-0 { margin-top: 0 !important; }
  /*上marginが0px*/
  .mr-0 { margin-right: 0 !important; }
  /*右marginが0px*/
  .mb-0 { margin-bottom: 0 !important; }
  /*下marginが0px*/
  .ml-0 { margin-left: 0 !important; }
  /*左marginが0px*/
  .m1 { margin: 0.1% !important; }
  .mt-1 { margin-top: 0.1% !important; }
  .mr-1 { margin-right: 0.1% !important; }
  .mb-1 { margin-bottom: 0.1% !important; }
  .ml-1 { margin-left: 0.1% !important; }
  .m2 { margin: 0.2% !important; }
  .mt-2 { margin-top: 0.2% !important; }
  .mr-2 { margin-right: 0.2% !important; }
  .mb-2 { margin-bottom: 0.2% !important; }
  .ml-2 { margin-left: 0.2% !important; }
  .m3 { margin: 0.3% !important; }
  .mt-3 { margin-top: 0.3% !important; }
  .mr-3 { margin-right: 0.3% !important; }
  .mb-3 { margin-bottom: 0.3% !important; }
  .ml-3 { margin-left: 0.3% !important; }
  .m4 { margin: 0.4% !important; }
  .mt-4 { margin-top: 0.4% !important; }
  .mr-4 { margin-right: 0.4% !important; }
  .mb-4 { margin-bottom: 0.4% !important; }
  .ml-4 { margin-left: 0.4% !important; }
  .m5 { margin: 0.5% !important; }
  .mt-5 { margin-top: 0.5% !important; }
  .mr-5 { margin-right: 0.5% !important; }
  .mb-5 { margin-bottom: 0.5% !important; }
  .ml-5 { margin-left: 0.5% !important; }
  .m6 { margin: 0.6% !important; }
  .mt-6 { margin-top: 0.6% !important; }
  .mr-6 { margin-right: 0.6% !important; }
  .mb-6 { margin-bottom: 0.6% !important; }
  .ml-6 { margin-left: 0.6% !important; }
  .m7 { margin: 0.7% !important; }
  .mt-7 { margin-top: 0.7% !important; }
  .mr-7 { margin-right: 0.7% !important; }
  .mb-7 { margin-bottom: 0.7% !important; }
  .ml-7 { margin-left: 0.7% !important; }
  .m8 { margin: 0.8% !important; }
  .mt-8 { margin-top: 0.8% !important; }
  .mr-8 { margin-right: 0.8% !important; }
  .mb-8 { margin-bottom: 0.8% !important; }
  .ml-8 { margin-left: 0.8% !important; }
  .m9 { margin: 0.9% !important; }
  .mt-9 { margin-top: 0.9% !important; }
  .mr-9 { margin-right: 0.9% !important; }
  .mb-9 { margin-bottom: 0.9% !important; }
  .ml-9 { margin-left: 0.9% !important; }
  .m10 { margin: 1% !important; }
  .mt-10 { margin-top: 1% !important; }
  .mr-10 { margin-right: 1% !important; }
  .mb-10 { margin-bottom: 1% !important; }
  .ml-10 { margin-left: 1% !important; }
  .m20 { margin: 2% !important; }
  .mt-20 { margin-top: 2% !important; }
  .mr-20 { margin-right: 2% !important; }
  .mb-20 { margin-bottom: 2% !important; }
  .ml-20 { margin-left: 2% !important; }
  .m30 { margin: 3% !important; }
  .mt-30 { margin-top: 3% !important; }
  .mr-30 { margin-right: 3% !important; }
  .mb-30 { margin-bottom: 3% !important; }
  .ml-30 { margin-left: 3% !important; }
  .m40 { margin: 4% !important; }
  .mt-40 { margin-top: 4% !important; }
  .mr-40 { margin-right: 4% !important; }
  .mb-40 { margin-bottom: 4% !important; }
  .ml-40 { margin-left: 4% !important; }
  .m50 { margin: 5% !important; }
  .mt-50 { margin-top: 5% !important; }
  .mr-50 { margin-right: 5% !important; }
  .mb-50 { margin-bottom: 5% !important; }
  .ml-50 { margin-left: 5% !important; }
  .m60 { margin: 6% !important; }
  .mt-60 { margin-top: 6% !important; }
  .mr-60 { margin-right: 6% !important; }
  .mb-60 { margin-bottom: 6% !important; }
  .ml-60 { margin-left: 6% !important; }
  .m70 { margin: 7% !important; }
  .mt-70 { margin-top: 7% !important; }
  .mr-70 { margin-right: 7% !important; }
  .mb-70 { margin-bottom: 7% !important; }
  .ml-70 { margin-left: 7% !important; }
  /*------------------------------------------------------------ padding -------------------------------------------------------------*/
  .p0 { padding: 0 !important; }
  /*全padding無し*/
  .pt-0 { padding-top: 0px !important; }
  /*上paddingが0px*/
  .pr-0 { padding-right: 0px !important; }
  /*右paddingが0px*/
  .pb-0 { padding-bottom: 0px !important; }
  /*下paddingが0px*/
  .pl-0 { padding-left: 0px !important; }
  /*左paddingが0px*/
  .p1 { padding: 0.1% !important; }
  .pt-1 { padding-top: 0.1% !important; }
  .pr-1 { padding-right: 0.1% !important; }
  .pb-1 { padding-bottom: 0.1% !important; }
  .pl-1 { padding-left: 0.1% !important; }
  .p2 { padding: 0.2% !important; }
  .pt-2 { padding-top: 0.2% !important; }
  .pr-2 { padding-right: 0.2% !important; }
  .pb-2 { padding-bottom: 0.2% !important; }
  .pl-2 { padding-left: 0.2% !important; }
  .p3 { padding: 0.3% !important; }
  .pt-3 { padding-top: 0.3% !important; }
  .pr-3 { padding-right: 0.3% !important; }
  .pb-3 { padding-bottom: 0.3% !important; }
  .pl-3 { padding-left: 0.3% !important; }
  .p4 { padding: 0.4% !important; }
  .pt-4 { padding-top: 0.4% !important; }
  .pr-4 { padding-right: 0.4% !important; }
  .pb-4 { padding-bottom: 0.4% !important; }
  .pl-4 { padding-left: 0.4% !important; }
  .p5 { padding: 0.5% !important; }
  .pt-5 { padding-top: 0.5% !important; }
  .pr-5 { padding-right: 0.5% !important; }
  .pb-5 { padding-bottom: 0.5% !important; }
  .pl-5 { padding-left: 0.5% !important; }
  .p6 { padding: 0.6% !important; }
  .pt-6 { padding-top: 0.6% !important; }
  .pr-6 { padding-right: 0.6% !important; }
  .pb-6 { padding-bottom: 0.6% !important; }
  .pl-6 { padding-left: 0.6% !important; }
  .p7 { padding: 0.7% !important; }
  .pt-7 { padding-top: 0.7% !important; }
  .pr-7 { padding-right: 0.7% !important; }
  .pb-7 { padding-bottom: 0.7% !important; }
  .pl-7 { padding-left: 0.7% !important; }
  .p8 { padding: 0.8% !important; }
  .pt-8 { padding-top: 0.8% !important; }
  .pr-8 { padding-right: 0.8% !important; }
  .pb-8 { padding-bottom: 0.8% !important; }
  .pl-8 { padding-left: 0.8% !important; }
  .p9 { padding: 0.9% !important; }
  .pt-9 { padding-top: 0.9% !important; }
  .pr-9 { padding-right: 0.9% !important; }
  .pb-9 { padding-bottom: 0.9% !important; }
  .pl-9 { padding-left: 0.9% !important; }
  .p10 { padding: 1% !important; }
  .pt-10 { padding-top: 1% !important; }
  .pr-10 { padding-right: 1% !important; }
  .pb-10 { padding-bottom: 1% !important; }
  .pl-10 { padding-left: 1% !important; }
  .p20 { padding: 2% !important; }
  .pt-20 { padding-top: 2% !important; }
  .pr-20 { padding-right: 2% !important; }
  .pb-20 { padding-bottom: 2% !important; }
  .pl-20 { padding-left: 2% !important; }
  .p30 { padding: 3% !important; }
  .pt-30 { padding-top: 3% !important; }
  .pr-30 { padding-right: 3% !important; }
  .pb-30 { padding-bottom: 3% !important; }
  .pl-30 { padding-left: 3% !important; }
  .p40 { padding: 4% !important; }
  .pt-40 { padding-top: 4% !important; }
  .pr-40 { padding-right: 4% !important; }
  .pb-40 { padding-bottom: 4% !important; }
  .pl-40 { padding-left: 4% !important; }
  .p50 { padding: 5% !important; }
  .pt-50 { padding-top: 5% !important; }
  .pr-50 { padding-right: 5% !important; }
  .pb-50 { padding-bottom: 5% !important; }
  .pl-50 { padding-left: 5% !important; }
  .p60 { padding: 6% !important; }
  .pt-60 { padding-top: 6% !important; }
  .pr-60 { padding-right: 6% !important; }
  .pb-60 { padding-bottom: 6% !important; }
  .pl-60 { padding-left: 6% !important; }
  .p70 { padding: 7% !important; }
  .pt-70 { padding-top: 7% !important; }
  .pr-70 { padding-right: 7% !important; }
  .pb-70 { padding-bottom: 7% !important; }
  .pl-70 { padding-left: 7% !important; } }