@charset "UTF-8";
/*/////////////////////////////////////////////////////////////
[Base]
//////////////////////////////////////////////////////////////*/

/* ------------------------------------------------------------
	0. Reset
------------------------------------------------------------ */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
object,
iframe,
pre,
code,
p,
blockquote,
form,
fieldset,
legend,
table,
th,
td,
caption,
tbody,
tfoot,
thead,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
audio,
video,
canvas {
  margin: 0;
  padding: 0;
}
article,
aside,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* ------------------------------------------------------------
	1. HTML, Body, Anchor
------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: none; /* フォントサイズ自動調整OFF */
}
body {
  font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W6"; /* iPhoneバンドル */
  font-size: 14px;
  line-height: 1.5;
  background: #ffffff;
}
a {
  color: #10a282;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(00, 33, 99, 0.3); /* タップ時の背景色 */
}

/* ------------------------------------------------------------
	2. Headings
------------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

/* ------------------------------------------------------------
	3. Lists
------------------------------------------------------------ */
li {
  list-style: none;
}

/* ------------------------------------------------------------
	4. Tables
------------------------------------------------------------ */
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 100%;
}
caption,
th,
td {
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}

/* ------------------------------------------------------------
	5. Forms
------------------------------------------------------------ */
fieldset {
  border: none;
}
input,
textarea,
select,
label {
  font-size: 100%;
  vertical-align: middle;
}
textarea {
  overflow: auto;
}

/* ------------------------------------------------------------
	6. Others
------------------------------------------------------------ */
img {
  border: none;
  vertical-align: middle;
}
em,
strong {
  font-weight: bold;
  font-style: normal;
}
mark {
  font-weight: bold;
}
object {
  vertical-align: middle;
  outline: none;
}
blockquote,
q {
  quotes: none;
}
q:before,
q:after {
  content: "";
}
code {
  font-family: monospace;
}
sup {
  vertical-align: text-top;
}
sub {
  vertical-align: text-bottom;
}
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
abbr,
acronym {
  border: none;
  font-variant: normal;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted #333;
  cursor: help;
}
address,
caption,
cite,
code,
dfn,
var {
  font-weight: normal;
  font-style: normal;
}
hr {
  display: none;
}
pre {
  font-family: monospace;
}
.center {
  text-align: center;
}

/*/////////////////////////////////////////////////////////////
[Layout]
//////////////////////////////////////////////////////////////*/

/* ------------------------------------------------------------
	0. Base Layout
------------------------------------------------------------ */
body {
}

/* ------------------------------------------------------------
	1. Header
------------------------------------------------------------ */

body > header {
  text-align: center;
  background: url(../img/head_bg.png) repeat-x left 39px;
  -webkit-background-size: 100% 3px;
  -moz-background-size: 100% 3px;
  background-size: 100% 3px;
}
body > header h1 {
  background: url(../img/0209/head_img_s.png) no-repeat left 30px;
  -webkit-background-size: 320px 173px;
  -moz-background-size: 320px 173px;
  background-size: 320px 173px;
  width: 320px;
  margin: 0px auto;
  height: 200px;
  overflow: hidden;
}
body > header h1 img {
  float: left;
  margin: 4px 0px 0px 3px;
}
body > header h1 span {
  font-size: 11px;
  float: right;
  margin: 13px 4px 0px 0px;
  color: #16a768;
}

/* ------------------------------------------------------------
	2. Content
------------------------------------------------------------ */

#content {
  text-align: center;
}

h2 {
  width: 100%;
  background: url(../img/contents_bg.png) repeat-x;
  -webkit-background-size: 100% 8px;
  -moz-background-size: 100% 8px;
  background-size: 100% 8px;
}

.box {
  width: 320px;
  margin: 8px auto 0px auto;
}
.box_float ul {
  overflow: hidden;
  margin-left: 8px;
}
.box_float li {
  float: left;
  margin-right: 3px;
}
.btn {
  margin-top: 15px;
}
.btn img {
  margin-bottom: 4px;
}

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

.work {
  margin-top: 12px;
}
.work .accordion {
  display: none;
  padding: 8px;
  text-align: left;
  width: 304px;
  margin: 0px auto 0px auto;
}
.work .accordion img {
  float: right;
  margin: 0px 0px 8px 4px;
}
.work .add {
  width: 304px;
  padding: 8px;
  margin: 8px auto 0px auto;
  height: 66px;
  text-align: left;
  background: url(../img/work_add_bg.png) repeat-x;
  -webkit-background-size: 7px 82px;
  -moz-background-size: 7px 82px;
  background-size: 7px 82px;
}
.work .add h4 {
  font-size: 16px;
  font-weight: bold;
  color: #16a768;
}

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

.reason {
  margin-top: 15px;
}
.reason .box {
  text-align: left;
}
.reason .lead {
  width: 304px;
  margin: 4px 8px 0px 8px;
}
.reason .class {
  color: #e549a0;
  font-weight: bold;
}
.reason .time {
  color: #3c76e1;
  font-weight: bold;
}
.reason .left,
.reason .right {
  width: 160px;
  float: left;
}
.reason .ex01 {
  background: url(../img/reason_ex01_bg.png) no-repeat left bottom;
  -webkit-background-size: 320px 120px;
  -moz-background-size: 320px 120px;
  background-size: 320px 120px;
  padding-bottom: 2px;
  overflow: hidden;
}
.reason .ex01 p {
  font-size: 13px;
  margin: 8px;
}

.reason .line {
  margin-top: 15px;
  border-top: solid 4px #16a768;
}
.reason .line {
  margin-top: 15px;
  border-top: solid 4px #16a768;
}
.reason .ex02 p {
  padding-left: 96px;
  margin: 6px 6px 12px 0px;
}

.reason h5 {
  -webkit-background-size: 100% 37px;
  -moz-background-size: 100% 37px;
  background-size: 100% 37px;
  overflow: hidden;
}
.reason h5.ex02_01 {
  background: url(../img/reason_btn01_bg.png) repeat-x left top;
}
.reason h5.ex02_02 {
  background: url(../img/reason_btn02_bg.png) repeat-x left top;
}
.reason h5.ex02_03 {
  background: url(../img/reason_btn03_bg.png) repeat-x left top;
}
.reason h5.ex02_04 {
  background: url(../img/reason_btn04_bg.png) repeat-x left top;
}
.reason h5.ex02_05 {
  background: url(../img/reason_btn05_bg.png) repeat-x left top;
}
.reason h5.ex02_06 {
  background: url(../img/reason_btn06_bg.png) repeat-x left top;
}

.reason h5 img {
  float: right;
}
.reason h5 span.head {
  display: block;
  float: left;
  width: 282px;
  margin: 5px 0px 0px 15px;
  font-size: 16px;
  font-weight: bold;
}
.reason h5 span.head .num {
  font-size: 12px;
  font-weight: normal;
  color: #666666;
  line-height: 16px;
}
.reason ul.accordion {
  display: none;
}
.reason ul a {
  display: block;
  overflow: hidden;
  width: 320px;
  height: 36px;
  -webkit-background-size: 12px 11px;
  -moz-background-size: 12px 11px;
  background-size: 12px 11px;
  border-bottom: solid 1px #a1a1a1;
}
.reason ul.ex02_01 a {
  background: url(../img/reason_btn01_in.png) no-repeat 22px 12px #edeafa;
}
.reason ul.ex02_02 a {
  background: url(../img/reason_btn02_in.png) no-repeat 22px 12px #e8fcc1;
}
.reason ul.ex02_03 a {
  background: url(../img/reason_btn03_in.png) no-repeat 22px 12px #f5ffcb;
}
.reason ul.ex02_04 a {
  background: url(../img/reason_btn04_in.png) no-repeat 22px 12px #ffe0e2;
}
.reason ul.ex02_05 a {
  background: url(../img/reason_btn05_in.png) no-repeat 22px 12px #f6cbfd;
}
.reason ul.ex02_06 a {
  background: url(../img/reason_btn06_in.png) no-repeat 22px 12px #ffefd9;
}

.reason ul a span {
  display: block;
  float: left;
  margin: 7px 0px 0px 39px;
  color: #333333;
}
.reason ul a img {
  float: right;
  margin: 12px 6px 0px 0px;
}

.reason .ex03 {
  overflow: hidden;
}
.reason .ex03 h3 {
  overflow: hidden;
  margin-bottom: 8px;
}
.reason .ex03 span img {
  float: left;
  margin: 0px 8px 6px 8px;
}
.reason .ex03 p {
  padding: 0px 8px 0px 8px;
}

.reason .ex04 h3 {
  overflow: hidden;
  margin-bottom: 10px;
}
.reason .ex04 p {
  padding: 0px 8px 0px 8px;
}
.reason .ex04 p strong {
  color: #e549a0;
}

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

.rank {
  margin-top: 10px;
}
.rank .box {
  text-align: left;
}
.rank h2 {
  background: none;
}
.rank h3 {
  background: url(../img/rank_ex_title_bg.png) repeat-x left bottom;
  -webkit-background-size: 320px 47px;
  -moz-background-size: 320px 47px;
  background-size: 320px 47px;
  font-size: 18px;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.2em;
}
.rank h3 img {
  float: left;
  margin: 8px 0px 8px 12px;
}

.rank h2.ah_other {
  margin-top: 8px;
}
.rank h3.ah_other {
  background: url(../img/rank_ex_title_ah_bg.png) repeat-x left bottom;
  -webkit-background-size: 320px 45px;
  -moz-background-size: 320px 45px;
  background-size: 320px 45px;
  border-bottom: 1px solid #a1a1a1;
}
.rank h3 span {
  float:right;
  width:270px;
  padding-right:30px;
  margin:12px 0px 12px 0px;
  background:url(../img/rank_ex_title_arrow.png) no-repeat 270px 50%;
  -webkit-background-size:22px 15px;
  -moz-background-size:22px 15px;
  background-size:22px 15px;
}
.rank h3.ah_other span {
  width: 308px;
  padding-right: 0px;
  background: url(../img/rank_ex_title_arrow.png) no-repeat 280px 50%;
}

.rank .accordion {
  overflow: hidden;
  display: none;
  background: url(../img/dotted.png) no-repeat 7px bottom;
  -webkit-background-size: 305px 1px;
  -moz-background-size: 305px 1px;
  background-size: 305px 1px;
  margin-top: 8px;
  padding-bottom: 8px;
}
.rank .accordion p {
  font-size: 13px;
  margin: 0px 8px;
}
.rank .accordion img {
  float: right;
  margin: 0px 8px 6px 12px;
}
.rank .a_other h4 {
  background: url(../img/rank_ex_other.png) no-repeat 12px 50%;
  -webkit-background-size: 11px 11px;
  -moz-background-size: 11px 11px;
  background-size: 11px 11px;
  padding-left: 27px;
  font-size: 17px;
}
.rank .a_other {
  display: none;
  overflow: hidden;
  margin-top: 4px;
  padding-bottom: 8px;
}
.rank .a_other p {
  font-size: 13px;
  margin: 4px 8px;
}
.rank .a_other .accordion {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  padding-bottom: 8px;
}
.rank strong {
  font-weight: bold;
  color: #cc0000;
}

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

.active {
  margin-top: 15px;
}
.active .box {
  text-align: left;
}
.active h3 {
  color: #ffffff;
  font-weight: bold;
  line-height: 1.4em;
}
.active h3.ex_01 {
  padding: 13px 0px 0px 25px;
  background: url(../img/active_ex01.jpg) no-repeat left top;
  -webkit-background-size: 320px 135px;
  -moz-background-size: 320px 135px;
  background-size: 320px 135px;
  min-height: 135px;
}
.active h3.ex_02 {
  padding: 16px 0px 0px 25px;
  background: url(../img/active_ex02.jpg) no-repeat left top;
  -webkit-background-size: 320px 138px;
  -moz-background-size: 320px 138px;
  background-size: 320px 138px;
  min-height: 138px;
}
.active h4.ex_02 {
  letter-spacing: -0.1em;
}
.active h3.ex_03 {
  padding: 16px 0px 0px 25px;
  background: url(../img/active_ex03.jpg) no-repeat left top;
  -webkit-background-size: 320px 138px;
  -moz-background-size: 320px 138px;
  background-size: 320px 138px;
  min-height: 138px;
}
.active h3 span {
  font-size: 18px;
}
.active h4 {
  font-size: 21px;
  color: #333333;
  line-height: 1.2em;
  padding: 8px;
}
.active h4 span {
  color: #f66800;
}
.active p {
  padding: 0px 8px;
}
.active .accordion {
  display: none;
}
.active .accordion_foot {
  margin-bottom: 15px;
}
.support .box {
  text-align: left;
  overflow: hidden;
}
.support .box p {
  padding: 0px 8px;
}
.support .box .inner {
  overflow: hidden;
  margin-bottom: 15px;
}
.support .box .inner img {
  float: right;
  margin: 6px 8px 6px 5px;
}

.support .point h4 {
  -webkit-background-size: 320px 48px;
  -moz-background-size: 320px 48px;
  background-size: 320px 48px;
  min-height: 48px;
  padding-left: 85px;
  font-size: 17px;
  font-weight: bold;
  line-height: 48px;
}
.support .point p {
  margin: 8px 0px 4px 0px;
  padding-bottom: 8px;
  background: url(../img/dotted.png) no-repeat 7px bottom;
  -webkit-background-size: 305px 1px;
  -moz-background-size: 305px 1px;
  background-size: 305px 1px;
}
.support .ex_01 h4 {
  background: url(../img/support_point01.png) no-repeat left top;
}
.support .ex_02 h4 {
  background: url(../img/support_point02.png) no-repeat left top;
}
.support .ex_03 h4 {
  background: url(../img/support_point03.png) no-repeat left top;
}

.support .social {
  margin-top: 15px;
}

/* ------------------------------------------------------------
	3. Footer
------------------------------------------------------------ */
.totop {
  margin-top: 15px;
}
.totop a {
  width: 100%;
  display: block;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  text-align: left;
  color: #333333;
  font-weight: bold;
  line-height: 42px;
}
.totop a span {
  width: 284px;
  display: block;
  padding-left: 36px;
  margin: 0px auto;
  background: url(../img/icon_back.png) no-repeat 8px 7px;
  -webkit-background-size: 25px 25px;
  -moz-background-size: 25px 25px;
  background-size: 25px 25px;
}

#footer {
  font-size: 11px;
  color: #333333;
  margin: 8px 0px 24px 0px;
}

.copyright {
  width: 100%;
  /*text-align: center;*/
  padding: 0px 0px 16px 10px;
  font-size: 10px;
}
.pc {
  text-align: center;
}

.footlink {
  margin: 0 10px;
  overflow: hidden;
  text-align: left;
}
.footlink li {
  display: block;
  float: left;
  line-height: 1.4;
  margin-right: 3%;
}
.footlink li a {
  color: #000;
  text-decoration: underline;
  white-space: nowrap;
}
#footerlikWrap {
  padding: 10px 0;
}

/* Copyright
------------------------------------------------- */

/*/////////////////////////////////////////////////////////////
[Module]
//////////////////////////////////////////////////////////////*/

/* ------------------------------------------------------------
	1. Common Elements
------------------------------------------------------------ */

/* Title
------------------------------------------------- */

/* Text
------------------------------------------------- */

/* List
------------------------------------------------- */

/* Form
------------------------------------------------- */

/* ------------------------------------------------------------
	2. Common Module
------------------------------------------------------------ */

/* ------------------------------------------------------------
	90. Others
------------------------------------------------------------ */

/* for Voice Browser */
.hidden {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Noscript Message */
p#msgNoscript {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  padding: 5px 0;
  border-top: 1px solid #f00;
  border-bottom: 1px solid #f00;
  background: #fcc;
  color: #f00;
  line-height: 1.2;
  text-align: center;
  opacity: 0.7;
}

.txtM {
  vertical-align: middle;
}

.tm10 {
  margin-top: 10px;
}
/* ------------------------------------------------------------
	99. Clearfix
------------------------------------------------------------ */
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
}

/* ------------------------------------------------------------
	20191112 今村追加
------------------------------------------------------------ */
.bnr {
  margin: 5% auto 3%;
  width: 320px;
}

.tech_btn {
  display: block;
  margin-bottom: 5%;
}

.tech_btn img {
  width: 100%;
}

.wrapper {
  overflow: hidden;
}

p.fv_image img {
  width: 100%;
}

h1 {
  margin: 0.5% 2% 2%;
}

h1 span {
  display: inline-block;
  margin-left: 4%;
  padding-top: 2%;
  font-size: 0.9em;
  color: #16a768;
}

/*20200602 今村追加ここから*/
.support .ex_01 h4,
.support .ex_02 h4,
.support .ex_03 h4 {
  background-size: 100%;
}
.rank {
  margin-bottom: 15px;
}
/*20200602 今村追加ここまで*/

/*---20200910 今村モーダル追加ここから---*/
.l-sec img,
.inline-link img {
  width: 100%;
}

.inline-link {
  display: block;
  margin-bottom: 4%;
}

.mfp-close {
  top: auto;
  bottom: 0;
  padding-bottom: 0;
  font-size: 42px;
}

.mfp-content {
  max-width: 980px;
  margin: 0 auto;
  background-color: #fff;
  padding: 16px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.64;
  border-radius: 24px;
  border: #dbdbdb 1px solid;
}
.mfp-content h3 {
  margin-bottom: 1.2em;
  border-bottom: #425a6f 2px solid;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.15em;
}
.mfp-content h3 .label {
  padding: 0 0.6em;
  margin-bottom: 0.2em;
  display: inline-block;
  background-color: #425a6f;
  color: #fff;
}
.mfp-content h3 .mLead {
  font-size: 28px;
  display: block;
}
.mfp-close {
  top: auto;
  bottom: 0;
  padding-bottom: 0;
  font-size: 42px;
}

.btnArea .inline-link {
  border-radius: 24px;
  font-size: 14px;
}
.mfp-wrap {
  z-index: 9999;
}
.mfp-bg {
  z-index: 9998;
}
.mfp-content {
  font-size: calc(28 / 750 * 100vw);
  margin-top: 16px;
  padding: 32px 16px 64px;
}
.mfp-content h3 {
  font-size: calc(36 / 750 * 100vw);
}
.mfp-content h3 .mLead {
  padding: 0.2em 0;
  font-size: calc(48 / 750 * 100vw);
  display: block;
  line-height: 1.46;
}

.cont .inline-link {
  display: block;
  cursor: pointer;
  z-index: 1;
}

.cont .inline-link:hover {
  opacity: 0.9;
}
.modal {
  position: relative;
  overflow-x: scroll;
  max-height: 80vh;
  padding-right: 15px;
}

span.red,
span.orange {
  color: #ff505a !important;
}

.modalBtn {
  text-align: center;
  letter-spacing: 0.01em;
}
.modalBtn a {
  display: block;
  position: relative;
  background: linear-gradient(to right, #e0545c, #ff777e);
  color: #fff;
  padding: 0.3em 2em 0.3em 3em;
  z-index: 3;
  transition: 0.4s;
  font-size: 28px;
  font-weight: bold;
  border-radius: 32px;
  text-decoration: none;
}

.modalBtn a span:after {
  display: inline-block;
  content: "";
  width: 12px;
  height: 12px;
  transition: 0.4s;
  position: absolute;
  right: 25px;
  top: 50%;
  margin-top: -5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.modalBtn a:hover {
  opacity: 0.8;
  text-decoration: none;
}
.modalBtn .free {
  margin-right: 0.8em;
  color: #ffff00;
}
.t_center {
  letter-spacing: 0.3em;
  font-size: 1.2em;
  text-align: center;
}

.cmp .mfp-close {
  top: 0;
}

.modal .cpn_content {
  padding: 2% 0;
  margin: 3% 0;
}
.modal .l-sec {
  margin: 3% 0;
}

.modal .l-sec .note {
  font-size: 85%;
}

.modal::-webkit-scrollbar {
  　　width: 10px;
}
.modal::-webkit-scrollbar-track {
  　　background: #fff;
  　　border-left: solid 1px #ececec;
}
.modal::-webkit-scrollbar-thumb {
  　　background: #ccc;
  　　border-radius: 10px;
  　　box-shadow: inset 0 0 0 2px #fff;
}

@media screen and (max-width: 768px) {
  .t_center {
    letter-spacing: 0.01em;
  }
  .modalBtn a {
    display: flex;
    position: relative;
    padding: 0.5em 1em 0.5em 1em;
    font-size: calc(14 / 375 * 100vw);
    text-align: left;
    font-weight: normal;
    line-height: 1.2;
  }
  .modal .l-base {
    padding: 0 5px;
  }
  .mfp-content .modal {
    font-size: calc(21 / 750 * 100vw);
  }
  span.big,
  span.big2 {
    font-size: 1em !important;
  }
}

/*---20200910 今村モーダル追加ここまで---*/

/* 20201216 今村 資料請求ボタン追加ここから*/

.shiryou {
  margin-top: 3.5%;
}

.shiryou a {
  background-color: #abe9cd;
  background-image: linear-gradient(315deg, #abe9cd 0%, #3eadcf 74%);
}

@media screen and (max-width: 768px) {
  .shiryou {
    margin-top: 3%;
    margin-bottom: 6%;
  }
}

/* 20201216 今村 資料請求ボタン追加ここまで*/

/* 20211222 FV修正*/

header .header-inner {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  background: #fff;
}
header .header-inner img {
  width: 100%;
}

header .header-inner .header-nav {
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

header .header-inner .header-nav .nav-inner ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

header .header-inner .header-nav .nav-inner ul a {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #969696;
  width: 100%;
}
header .header-inner .header-nav .nav-inner ul a li {
  color: #818181;
  font-weight: bold;
  font-size: 1rem;
}
header .header-inner .header-nav .nav-inner ul a li:before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin: -2px 10px 0 0;
  background: url("../img/menu-icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}

header .func-btn {
  display: none;
}
.fv_bnr img {
  width: 100%;
}
.cv-btn img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .pc-visible {
    display: none !important;
  }
  header .header-inner {
    height: 14vw;
  }
  header .header-inner .header-logo {
    width: 25%;
    margin-right: 6%;
    padding: 2% 0 0 2%;
  }
  header .header-inner .header-btn {
    width: 50%;
  }
  header .header-inner .header-nav {
    position: fixed;
    z-index: 10;
    top: 14vw;
    left: 0;
    overflow: hidden;
    overflow-y: scroll;
    width: 100%;
    background-color: #fff;
    padding: 2rem 1rem 0;
    box-sizing: border-box;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  header .func-btn {
    overflow: hidden;
    white-space: nowrap;
    display: block;
    z-index: 2;
    position: absolute;
    z-index: 11;
    top: 0;
    width: 55px;
    height: 55px;
    background: no-repeat center center rgba(0, 0, 0, 0);
    background-size: contain;
  }
  header .func-btn.navbutton {
    position: fixed;
    top: 0;
    right: 0;
    background: #292211;
    z-index: 110;
  }
  header .func-btn.navbutton .txt {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    padding: 30px 0 0;
  }
  header .func-btn.navbutton .txt .line-1,
  header .func-btn.navbutton .txt .line-2,
  header .func-btn.navbutton .txt .line-3 {
    display: block;
    position: absolute;
    background: #fff;
    width: 30px;
    height: 2px;
    left: 0;
    right: 0;
    margin: auto;
  }
  header .func-btn.navbutton .txt.open {
    opacity: 0;
  }
  header .func-btn.navbutton .txt.open .line-1 {
    top: 10px;
  }
  header .func-btn.navbutton .txt.open .line-2 {
    top: 19px;
  }
  header .func-btn.navbutton .txt.open .line-3 {
    top: 28px;
  }
  header .func-btn.navbutton .txt.close {
    opacity: 1;
  }
  header .func-btn.navbutton .txt.close .line-1,
  header .func-btn.navbutton .txt.close .line-2 {
    top: 18px;
  }
  header .func-btn.navbutton .txt.close .line-1 {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  header .func-btn.navbutton .txt.close .line-2 {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  header:not(.is-open) .header-nav {
    opacity: 0;
    pointer-events: none;
  }
  header:not(.is-open) .func-btn.navbutton .open {
    opacity: 1;
  }
  header:not(.is-open) .func-btn.navbutton .close {
    opacity: 0;
  }
  header .func-btn.navbutton {
    background: inherit;
  }
  header .func-btn.navbutton .txt {
    color: #4f4d4e;
    font-size: 11px;
  }
  header .func-btn.navbutton .txt .line-1,
  header .func-btn.navbutton .txt .line-2,
  header .func-btn.navbutton .txt .line-3 {
    background: #4f4d4e;
    height: 3px;
  }
  header .header-inner .header-nav {
    left: 15%;
    width: 85%;
    height: 100%;
    transform: translateX(100%);
    opacity: 0.95;
  }
  header .header-inner .header-nav.on {
    transform: translateY(0%);
  }
  header .header-inner .header-nav .nav-inner ul a li {
    padding: 20px 0;
  }
  header .header-inner .header-nav .nav-inner .btn {
    margin-top: 1rem;
  }
  header .header-inner .header-nav .nav-inner .btn img {
    margin-top: 0.5rem;
  }

  h2#anchor-about,
  h2#anchor-voice,
  h2#anchor-reason,
  h2#anchor-course {
    padding-top: 10vw;
  }

  #content {
    padding-top: 14vw;
  }
  .fv_bnr {
    padding: 3%;
  }

  .cv-btn-area {
    padding: 1rem 3%;
    text-align: center;
  }
  .cv-btn-title {
    width: 90%;
    margin-bottom: 1rem;
  }
  .cv-btn-area.bottom .cv-btn-title {
    width: 85%;
  }
  .cv-btn a img {
    animation: vertical 1s ease-in-out infinite alternate;
    margin-top: 1rem;
  }

  .cv-btn-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 0.5rem 2% 0.1rem;
	  z-index: 100;
  }
  .cv-btn-fixed a {
    display: block;
  }
  .cv-btn-fixed a img {
    width: 100%;
    margin-bottom: 0.4rem;
  }
  #footer {
    padding-bottom: 30vw;
    overflow: hidden;
  }
}
@media screen and (min-width: 769px) {
  .sp-visible {
    display: none !important;
  }
  header .header-inner {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem;
    box-sizing: border-box;
  }
  header .header-inner h1 {
    margin: 0;
  }
  header .header-inner h1.header-logo {
    width: 120px;
  }
  header .header-inner .header-logo img {
    width: 100%;
  }
  header .header-inner .menu-right {
    width: 920px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  header .header-inner .header-btn {
    width: 250px;
    margin-top: -0.5rem;
  }
  header .header-inner .header-nav .btn {
    display: none;
  }
  header .header-inner .header-nav .nav-inner ul a {
    display: inherit;
    border-bottom: inherit;
    width: auto;
    margin-right: 1rem;
    font-size: 0.9rem;
  }

  h2#anchor-about,
  h2#anchor-voice,
  h2#anchor-reason,
  h2#anchor-course {
    padding-top: 50px;
  }

  #content {
    padding-top: 70px;
  }

  .fv_btn {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 750px;
    margin: 1.5rem auto 0;
  }
  .fv_btn img {
    width: 365px;
    animation: vertical 1s ease-in-out infinite alternate;
  }
  .fv_bnr {
    width: 590px;
    margin: 0 auto 3rem;
  }
  .cv-btn-area {
    background-image: url(../img/cv-area-bg.png);
    background-size: cover;
    height: 370px;
    position: relative;
    margin-top: 2rem;
  }
  .cv-btn {
    width: 365px;
    position: absolute;
    top: 80px;
    left: 50%;
    margin-left: -400px;
  }
  .cv-btn li {
    animation: vertical 1s ease-in-out infinite alternate;

    margin-bottom: 0.5rem;
  }
  .cv-btn-area-img {
    width: 511px;
    position: absolute;
    top: 10px;
    left: 50%;
  }
  .cv-btn-fixed {
    display: none;
  }
}

@keyframes vertical {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

.bnrarea {
	width: 100%;
	max-width: 480px;
	margin: 1em auto 2em;
	padding: 0 4%;
	box-sizing: border-box;
}
.bnrarea h2 {
	font-size: 1.4rem;
	margin-bottom: 0.5em;
	background: none;
}
.bnrarea ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}
.bnrarea ul li {
	width: 100%;
	margin-bottom: 0.5em;
}
.bnrarea ul li img { 
	max-width: 100%;
}

/* reskilling_info */
#reskilling_info {
	font-size: 16px;
	margin: 40px auto;
}
.panel.is-show {
	display:block;
	text-align: center;
}
.tab-group{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 760px;
	margin: 0 auto;
	padding-top: 26px;
}
.tab {
	color: #ffffff;
	background: #949292;
	font-weight: bold;
	list-style: none;
	text-align: center;
	cursor: pointer;
	border-radius: 0.5em 0.5em 0 0;
	height: 44px;
	line-height: 50px;
	width: 49%;
	position: relative;
}
.tab.blue {
	background: #63c2bf;
}
.tab.is-active {
	background: #63c2bf;
}
.tab.green.is-active{
  background:#1bad55;
  transition: all 0.2s ease-out;
}
.tab img {
	display: block;
	position: absolute;
	margin: 0 auto;
	top: -26px;
	left: 2px;
	right: 0;
}
.tab:hover{
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;	
}
.panel{
	display:none;
}
.tab.is-active:hover{
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;	
}
.u-spItem {
    display: none;
}
#reskilling_info .border_wrap {
	width: 880px;
	margin: 0 auto;
	background: -webkit-linear-gradient(top left, #62c2c0 0%, #b7ea60 100%);
	background: -o-linear-gradient(top left, #62c2c0 0%, #b7ea60 100%);
	background: linear-gradient(to bottom right, #62c2c0 0%, #b7ea60 100%);
	border-radius: 30px;	
	padding: 40px;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}
#reskilling_info #kyufu .border_wrap {
	background: -webkit-linear-gradient(top left, #b3e281 0%, #0da047 100%);
	background: -o-linear-gradient(top left, #b3e281 0%, #0da047 100%);
	background: linear-gradient(to bottom right, #b3e281 0%, #0da047 100%);
}
#reskilling_info .border_wrap:before {
	content: "";
	position: absolute;
	display: block;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;	
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background: #ffffff;
	border-radius: 14px;
	z-index: -1;
}
#reskilling_info .txt_red {
	color: #e62626;
}
#reskilling_info .txt_bold {
	font-weight: bold;
}
#reskilling_info .copy {
	display: flex;
	align-items: center;
	justify-content: center;	
	text-align: center;
	line-height: 1.3;
	margin-bottom: 15px;
}
#reskilling_info .copy:before,
#reskilling_info .copy:after {
    display: block;
    content: '';
    width: 0.8em;
	height: 1.2em;
    border-left: 1px solid #333333;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}
#reskilling_info .copy:after {	
    border-left: none;
	width: 0.2em;
    border-right: 1px solid #333333;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);	
}
#reskilling_info .flexbox {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 15px;
	position: relative;	
}
#reskilling_info .cashback {
	margin-left: 1.5em;
}
.border_wrap .listlink {	
	position: absolute;
	right: 10px;
	bottom: 0;
}
.border_wrap .listlink a {
	color: #555555;
	font-size: 13px;
	text-decoration: underline;
	position: relative;
	padding-right: 0.8em;
}
.border_wrap .listlink a:after {
	content: "";
	display: block;
	position: absolute;
	width: 5px;
	height: 5px;
	right: 0;
	top: calc(50% - 3px);
	border-top: 1px solid #555555;
	border-right: 1px solid #555555;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#reskilling .border_wrap .btnarea {
	padding-top: 36px;
	position: relative;
}
#reskilling .border_wrap .btnarea img {
	position: absolute;	
	left: 4px;
	right: 0;
	top: 0;
	margin: 0 auto;
}
.border_wrap .btnarea a {
	font-size: 19px;
	font-weight: bold;
	letter-spacing: 0.05em;
	color: #ffffff;
	background: #e64e4e;
	border-radius: 8px;
	display: block;
	width: 340px;
	height: 64px;
	line-height: 64px;
	margin: 0 auto;
	position: relative;
	text-decoration: none;
}
.border_wrap .btnarea a:after {
	content: "";
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	right: 30px;
	top: calc(50% - 4px);
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#kyufu .cashback_wrap {
	position: relative;
	margin-bottom: 15px;
}
#kyufu .kome {
	color: #555555;
	font-size: 13px;
}
#kyufu .border_wrap .btnarea {
	margin-top: 15px;
}
/* cvbtn fukidashi */
.fukidashi {
	position: relative;
	padding-top: 34px;
}
.fukidashi img.bubble {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 240px;
	height: auto;
}

@media screen and (max-width: 767px) {
	.u-spItem {
		display: block;
	}
	#reskilling_info {
		font-size: 3.6vw;
		margin: 30px auto;
		padding: 0 4%;
	}
	#reskilling_info img {
		height: auto;
	}
	.tab-group{
		width: 85%;
		/*max-width: 400px;*/
		margin: 0 auto;
		padding-top: 5.5vw;
	}
	.tab {		
		line-height: 1.2;
		font-size: 3vw;
		padding-top: 3vw;
		height: 9vw;
	}
	.tab img {
		top: -5.5vw;
		width: 95%;
		/*max-width: 130px;*/
		height: auto;
	}
	#reskilling_info .border_wrap {
		width: 100%;
		/*max-width: 460px;*/
		margin: 0 auto;
		padding: 30px 20px;
	}
	#reskilling_info .border_wrap:before {	
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		border-radius: 20px;
	}
	#reskilling_info .copy {
		font-size: 3.6vw;
		letter-spacing: -0.05em;
		align-items: flex-start;
	}
	#reskilling_info .copy:before,
	#reskilling_info .copy:after {
		position: relative;	
	}
	#reskilling_info .copy:before {
		left: 2.5em
	}
	#reskilling_info .copy:after {
		right: 2.5em
	}
	#reskilling_info .flexbox {
		flex-direction: column;
		padding: 0 2%;		
	}
	#reskilling_info .logo {
		margin-bottom: 4vw;		
	}
	#reskilling_info .cashback {
		margin-left: 0;
	}
	#reskilling_info .cashback img {
		width: 100%;
	}
	.border_wrap .listlink {		
		position: relative;
		right: 0;
	}
	.border_wrap .listlink a {
		font-size: 3vw;
		text-decoration: underline;
		position: relative;
		padding-right: 0.8em;
	}
	#reskilling .border_wrap .btnarea {
		padding-top: 8vw;
	}
	#reskilling .border_wrap .btnarea img {
		width: 62vw;
		height: auto;
		left: 1.5vw;
	}
	.border_wrap .btnarea a {
		font-size: 4.4vw;
		width: 80%;
		min-width: 270px;
		height: 14vw;
		line-height: 14vw;
	}
	.border_wrap .btnarea a:after {
		width: 7px;
		height: 7px;
		right: 3.5vw;
		top: calc(50% - 4px);
		border-top: 2px solid #ffffff;
		border-right: 2px solid #ffffff;	
	}
	#kyufu .cashback_wrap {
		padding: 0 15%;
	}
	#kyufu .kome {
		font-size: 3vw;
	}
/* cvbtn fukidashi */
	.fukidashi {
		padding-top: 7vw;
	}
	.fukidashi img.bubble {
		width: 64vw;
		animation: vertical 1s ease-in-out infinite alternate;
	}
}
@media screen and (max-width: 374px) {
	#reskilling_info {
		padding: 0 2%;
	}
	#reskilling_info .border_wrap {
		border-radius: 15px;
	}
	#reskilling_info .border_wrap:before {
		border-radius: 10px;
	}
	.tab-group{
		width: 90%;
	}
	#reskilling_info .copy {
		font-size: 3.6vw;
	}
}

.reason .ex04 p.map {
	background: url(../img/reason_ex02_bg.png) no-repeat 50% 100% / 30% auto;
	padding-bottom: 70px;
}
.schoollist {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 0.5em;
	grid-row-gap: 0.5em;
	font-size: 90%;
}
.schoollist dl {
	/*background: #f5f5f5;*/
}
.schoollist dl dt {
	background: #9678e8;
	color: #fff;
	text-align: center;
	border-radius: 1em;
	margin-bottom: 0.5em;
}
.schoollist dl:nth-of-type(2) dt {
	background: #b6dc6d;
}
.schoollist dl:nth-of-type(3) dt {
	background: #eed638;
}
.schoollist dl:nth-of-type(4) dt {
	background: #d96570;
}
.schoollist dl:nth-of-type(5) dt {
	background: #cb88d5;
}
.schoollist dl:nth-of-type(6) dt {
	background: #feaa38;
}
.schoollist dl dd {
	padding: 0 0.5em;
}
.schoollist dl dd ul.two_clm {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}