@charset "utf-8";

/* 【SP】ウィンドウ幅が768px以下の場合に適用するCSS */
@media screen and (max-width: 768px) {
  /* ==================================================================================

common

================================================================================== */
  body {
    font-size: 14px;
    line-height: 1.8;
    /*overflow: hidden;*/
  }
  .inner,
  .inner_mini {
    padding: 0 5%;
  }
  .sec {
    margin: 30px 0;
  }
  .pc {
    display: none !important;
  }
  img {
    width: 100%;
    vertical-align: bottom;
    object-fit: cover;
  }
  a {
    display: inline-block;
  }
  a:before,
  a:after {
    transition: var(--anime);
  }

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

ページネーション

================================================================================== */
  .pagination {
  }
  .pagination ul {
    margin: 30px 0;
  }
  .pagination li {
    border: none !important;
    padding: 2px 3px !important;
    display: inline-block;
  }

  .pagination ul .page-numbers {
    border: 1px solid #ccc;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
  }
  .pagination ul .page-numbers:hover {
    background: #f5f5f5;
  }
  .pagination ul .page-numbers.current {
    background: #eee;
  }
  .pagination .dots {
    border: none !important;
    margin: 0 1px;
  }

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

box_link

================================================================================== */
  .box_link {
    position: relative;
  }
  .box_link a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    transition: all 0.3s linear;
  }

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

オンライン講座

================================================================================== */
  .online_introduction {
  }
  .online_introduction .title {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin: 0 0 10px 0;
    line-height: 1.7;
  }
  .online_introduction ul {
    margin: 30px 0 0 0;
  }
  .online_introduction li {
    width: 100%;
    border: 1px solid var(--boder-color);
    padding: 20px 5%;
    box-sizing: border-box;
    margin: 30px 0;
  }
  .online_introduction li .title {
    font-size: 1.1em;
    margin: 10px 0 5px;
  }
  .online_introduction li p {
    line-height: 1.7;
  }

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

ニュース一覧 トップページ

================================================================================== */
  .news_list {
    margin: 0 0 50px 0;
  }
  .news_list li {
    border-bottom: 1px solid var(--boder-color);
  }
  .news_list a {
    padding: 15px 0;
  }
  .news_list a:hover {
    color: var(--main-color-hover);
  }
  .news_list span {
    display: block;
    font-size: 0.9em;
    letter-spacing: 1px;
    color: var(--main-color-hover);
  }

  /* 記事詳細
======================================== */
  .news_detail {
    margin-bottom: 0;
  }
  .news_detail .title {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 10px 0;
  }
  .news_detail .btn_gray {
    margin: 20px 0 50px;
  }
  .news_detail .btn_gray .btn {
    padding: 15px 0;
  }

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

ニュース一覧ページ

================================================================================== */
  .news_all_list {
  }

  .news_all_list a {
    color: var(--main-color);
    line-height: 1.7;
  }
  .news_all_list a:hover {
    color: var(--main-color-hover);
  }

  .news_all_list h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
  }

  .news_all_list .excerpt {
    margin-top: 10px;
  }

  .news_all_list li {
    border-bottom: 1px solid var(--boder-color);
    padding: 30px 0;
  }
  .news_all_list li:last-child {
    border-bottom: none;
  }

  .news_all_list .img {
    margin: 0 0 20px 0;
  }
  .news_all_list .img img {
    height: 200px;
  }
  .news_all_list .img a {
    width: 100%;
  }
  .news_all_list .img a:hover {
    opacity: 0.8;
  }

  .news_all_list .text {
  }
  .news_all_list .text .more-link {
    background: var(--main-color);
    color: #fff;
    padding: 13px 0;
    margin: 20px 0 0 0;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  .news_all_list .text .more-link:hover {
    background: var(--main-color-hover);
  }
  .news_all_list .text .more-link:before {
    content: url(../img/bace/arrow_01_white.svg);
    width: 12px;
    top: 50%;
    right: 5%;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1;
    line-height: 0;
  }

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

お役立ちコラム

================================================================================== */
  .column_page .column_area {
    margin: -20px 0 0 0 !important;
  }
  .second_page .column_area {
    padding: 10px 0 40px 0;
    margin: 30px 0;
  }
  .second_page .column_area .title_01 {
    margin-top: 20px;
  }

  .column_page .anchor_area {
    margin: 30px 0;
  }
  .column_page .anchor_area a {
    padding: 10px 10% 10px 5%;
  }

  .column_page .title_03 {
    margin: 20px 0 10px 0;
  }

  .column_area .btn_blue {
    margin: 30px 0 0 0;
  }

  .category_page .column_area {
    margin: 0;
  }

  /* 記事詳細
======================================== */
  .blog_top {
    margin-bottom: 30px;
  }
  .blog_top .title {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    margin: 20px 0;
  }

  .author_area {
  }
  .author_area .fl_area {
    border: 1px solid var(--boder-color);
    padding: 20px 5%;
  }
  .author_area .fl_img {
  }
  .author_area .fl_img .img {
    text-align: center;
  }
  .author_area .fl_img .img img {
    width: 60%;
  }
  .author_area .fl_img .text {
  }
  .author_area .name {
    text-align: center;
  }
  .author_area .name span {
    font-size: 1.3em;
    font-weight: bold;
  }
  .author_area .day {
    margin: 10px 0;
    display: block;
    font-size: 0.8em;
    text-align: center;
  }

  /* author_area_02
======================================== */
  .author_area_02 {
  }
  .author_area_02 .fl_area {
    border: 1px solid #eee;
    padding: 10px 10%;
  }
  .author_area_02 .fl_area .img {
    width: 100%;
    padding: 0 20%;
    box-sizing: border-box;
  }
  .author_area_02 .fl_area .img img {
    width: 100%;
  }
  .author_area_02 .fl_area .text {
  }
  .author_area_02 .name {
    margin: 0 0 10px 0;
  }
  .author_area_02 .name a {
    font-weight: bold;
    font-size: 1.5em;
    letter-spacing: 2px;
  }
  .author_area_02 .name a span {
  }
  .author_area_02 .instagram_link {
    margin: 20px 0;
  }
  .author_area_02 .instagram_link img {
    width: 40px;
  }

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

スクール生の紹介

================================================================================== */
  .member_area {
  }
  .member_area .member_box {
    padding: 30px 0 40px;
  }
  .member_area .member_box .title_03 {
    margin: 0;
  }
  .member_area ul {
    margin: 0 0 20px 0;
    display: flow-root;
  }
  .member_area li {
    width: 50%;
    border: 1px solid var(--boder-color);
    /*display: flex;*/
    /*gap: 20px;*/
    padding: 15px 05%;
    margin: 10px 0;
    background: #fff;
    box-sizing: border-box;
    float: left;
  }
  .member_area li .img {
  }
  .member_area li p {
    line-height: 1.5;
    font-size: 0.9em;
  }
  .member_area li p span {
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: 2px;
  }

  /* スクール生詳細
======================================== */
  .member_detail {
  }
  .member_detail .fl_area {
    margin: 30px 0;
  }
  .member_detail .text {
  }
  .member_detail .text .box {
  }
  .member_detail .name {
    line-height: 1.5;
    margin: 0 0 10px 0;
    text-align: center;
  }
  .member_detail .name span {
    font-size: 1.5em;
    font-weight: bold;
  }
  .member_detail .text_box {
  }
  .member_detail .text_box .title {
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.5;
    margin: 0 0 10px 0;
  }

  /* column_list_area
======================================== */
  .column_list_area {
    padding: 10px 0 40px 0;
    margin-bottom: 0;
  }
  .column_list_area ul {
    display: grid;
    grid-template: repeat(1, 1fr) / repeat(2, 1fr);
    gap: 30px 10px;
  }
  .column_list_area p {
    margin: 10px 0 0 0;
    line-height: 1.5;
    font-size: 0.8em;
  }

  .column_list_area .btn_blue {
    margin: 30px 0 0 0;
  }
  .column_list_area .btn_blue a {
  }

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

よくある質問

================================================================================== */
  .qa_area {
    margin: 30px 0;
  }
  .qa_area dl {
  }
  .qa_area dl span {
    font-weight: bold;
    font-size: 25px;
    left: 13px;
    position: absolute;
  }
  .qa_area dt,
  .qa_area dd {
    position: relative;
    padding: 15px 0 15px 40px;
  }
  .qa_area dt {
    background: var(--bg-color);
    font-weight: bold;
    line-height: 1.5;
  }
  .qa_area dt span {
    top: 8px;
    color: var(--spot-color);
  }
  .qa_area dd {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .qa_area dd span {
    top: 0;
    color: var(--main-color-hover);
  }

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

店舗紹介

================================================================================== */
  .building_area {
  }
  .building_area .building_box {
    margin: 30px 0 50px 0;
  }
  .building_area .split_02 .title {
    font-weight: bold;
    font-size: 1.2em;
    margin: 0 0 10px 0;
  }
  .building_area dl {
    margin: 20px 0;
  }
  .building_area dl dt {
    background: var(--bg-color);
    text-align: center;
    height: fit-content;
    font-size: 0.9em;
    padding: 5px 0;
  }
  .building_area dl dd {
    padding: 10px 0 20px;
  }
  .building_area .btn_blue {
    margin: 0 0 15px 0;
  }

  /* 店舗アクセス
======================================== */
  .building_access .building_mv {
    padding: 10px 0 70px 0;
    margin: 0 0 20px 0;
  }
  .building_access .title {
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.5;
    margin: 0 0 10px 0;
  }
  .building_text .line_box {
    border: 1px solid var(--boder-color);
    padding: 20px 5%;
    margin: 30px 0;
  }
  .building_introduction .fl_area .title,
  .blog_introduction .fl_area .title {
    font-size: 1.2em;
    margin: 0 0 20px 0;
    line-height: 1.5;
    text-align: left !important;
  }

  .map_area {
  }
  .map_area .map_box {
    margin: 0 0 20px 0;
  }
  .map_area .map_box iframe {
    width: 100%;
    height: 40vh;
  }
  .map_area .split_02 .title {
    font-weight: bold;
  }
  .map_area .box {
    margin: 0 0 20px 0;
  }

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

講師紹介

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

  .staff_mv {
    background: url(../img/teacher/mv_01.jpg) scroll no-repeat center center /
      cover;
    position: relative;
    height: 30vh;
    margin: -20px 0 0 0;
  }
  .staff_mv .text {
    position: absolute;
    left: 0;
    top: 50%;
    text-align: center;
    width: 90%;
    transform: translateY(-50%);
    letter-spacing: 1px;
    line-height: 1.8;
    padding: 0 5%;
  }
  .staff_mv .title {
    font-weight: bold;
  }

  .teacher_set .teacher_box {
    background: var(--bg-color);
    padding: 30px 0;
  }
  .teacher_set .teacher_box .inner {
  }
  .teacher_set .teacher_box .img {
    text-align: center;
  }
  .teacher_set .teacher_box .img img {
    width: 60%;
  }
  .teacher_set .teacher_box .text {
  }
  .teacher_set .teacher_box .text .title {
    font-weight: bold;
    font-size: 1.3em;
    letter-spacing: 1px;
    line-height: 1.3;
    margin: 10px 0 20px 0;
    text-align: center;
  }
  .teacher_set .teacher_box .text .title span {
    font-size: 0.5em;
  }
  .teacher_set .teacher_box .text .box {
  }

  .teacher_data .data_box {
  }
  .teacher_data .data_box .title {
    font-size: 1.3em;
    font-weight: bold;
    padding: 20px 0;
  }
  .teacher_data .data_box .title span {
    color: var(--btn-gray-color-hover);
    margin: 0 0 0 10px;
    letter-spacing: 2px;
    font-size: 0.7em;
  }

  .split_01 .box,
  .split_02 .box {
    margin: 0 0 30px 0;
  }
  .split_01 ul,
  .split_02 ul {
    border: 1px solid var(--boder-color);
  }
  .teacher_data .data_box li {
    border-bottom: 1px solid var(--boder-color);
    padding: 7px 10px;
    line-height: 1.5;
    font-size: 0.8em;
  }
  .teacher_data .data_box li:last-child {
    border-bottom: none;
  }
  .teacher_data .data_box .split_01 li:nth-child(odd) {
    border-top: none;
  }
  .teacher_data .data_box .split_01 li:nth-child(even) {
    border-top: none;
    border-left: none;
  }
  .teacher_data .data_box p {
    margin: 20px auto 30px;
  }

  .teacher_data .data_box dl {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--boder-color);
  }
  .teacher_data .data_box dl dt,
  .teacher_data .data_box dl dd {
    border: 1px solid var(--boder-color);
    box-sizing: border-box;
    padding: 7px 10px;
    line-height: 1.5;
    font-size: 0.8em;
  }
  .teacher_data .data_box dl dt {
    width: 30%;
    border-top: none;
    color: var(--main-color-hover);
    text-align: center;
  }
  .teacher_data .data_box dl dd {
    width: 70%;
    border-top: none;
    border-left: none;
  }

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

カリキュラム例

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

  /* table_curriculum
======================================== */
  .table_curriculum {
    text-align: center;
  }
  .table_curriculum th {
    background: var(--main-color);
    color: #fff;
    letter-spacing: 2px;
    padding: 10px 0 !important;
  }
  .table_curriculum td:first-child {
    font-weight: bold;
  }
  .table_bace.table_curriculum td {
    vertical-align: middle;
  }
  .table_curriculum .none {
    background: #f5f5f5 !important;
  }

  .sticky th {
    position: sticky;
    top: 60px;
  }
  .sticky th:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
  }
  .table_curriculum .tx {
    text-align: left;
  }

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

コース紹介

================================================================================== */
  .course_area .course_title {
    background: var(--bg-color);
    text-align: center;
    padding: 20px 5% 30px;
    margin: 0 0 30px 0;
  }
  .course_area .course_title .title {
    font-weight: bold;
    font-size: 1.2em;
    padding: 0 0 10px 0;
    margin: 0 0 20px 0;
    position: relative;
  }
  .course_area .course_title .title span {
    padding: 0 0 15px 0;
    line-height: 1.5;
  }
  .course_area .course_title .title span:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 1px;
    width: 30%;
    background: var(--main-color);
  }
  .course_area .course_title p {
    text-align: left;
  }

  .course_area .course_title .title_sub {
    font-weight: bold;
    border: 1px solid var(--main-color);
    display: inline-block;
    padding: 3px 30px;
    margin: 10px 0;
  }
  .course_area .course_title ul {
    text-align: left;
  }
  .course_area .course_title li {
    position: relative;
    padding: 10px 0 10px 20px;
    border-bottom: 1px dashed var(--btn-gray-color-hover);
  }
  .course_area .course_title li:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 50%;
    background: var(--main-color);
    transform: translateY(-50%);
  }

  .course_summary {
  }
  .course_summary ul {
    margin: 0 0 30px;
  }
  .course_summary li {
    width: 100%;
    margin: 0 0 10px 0;
    padding: 5px 0 10px 0;
    border-bottom: 1px solid var(--boder-color);
  }
  .course_summary li:last-child {
    border-right: none;
  }
  .course_summary li b {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    margin: 0 0 -15px 0;
  }

  .course_area .course_point_area {
    border: 1px solid var(--boder-color);
  }
  .course_area .course_point_area li {
    padding: 20px 5%;
    border-bottom: 1px solid var(--boder-color);
  }
  .course_area .course_point_area li:last-child {
    border-bottom: none;
  }
  .course_area .title {
    text-align: center;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.5;
    margin: 15px 0 10px 0;
  }

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

カリキュラム

================================================================================== */
  .curriculum_link {
  }
  .curriculum_link ul {
  }
  .curriculum_link li {
  }
  .curriculum_link a {
    position: relative;
    text-align: center;
    color: #fff;
    line-height: 1.5;
  }
  .curriculum_link a:before {
    content: "";
    background: var(--main-color);
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    left: 0;
    z-index: 1;
    mix-blend-mode: color;
  }
  .curriculum_link a:hover:before {
    opacity: 0;
  }
  .curriculum_link .text {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .curriculum_link .font_e {
    font-size: 2em;
    letter-spacing: 2px;
    transition: all 1500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .curriculum_link a:hover .font_e {
    letter-spacing: 5px;
  }
  .curriculum_link .btn_red {
    margin: 10px auto 0;
    display: inline-block;
    width: auto;
  }

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

ブログ詳細

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

  h2,
  h3 {
    font-size: 1.2em;
    margin: 30px 0 20px 0;
    line-height: 1.5;
    text-align: left !important;
    font-weight: bold;
  }

  p {
    line-height: 1.8em;
  }

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

目指せる資格

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

  /* anchor_area
======================================== */
  .anchor_area {
    margin: 50px 0;
  }
  .anchor_area ul {
    gap: 5px;
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .anchor_area li {
    width: 100%;
  }
  .anchor_area a {
    background: var(--bg-color);
    position: relative;
    padding: 10px 10% 10px 20%;
    display: block;
  }
  .anchor_area a span {
    display: inline-block;
    line-height: 1.4;
    position: relative;
    z-index: 1;
  }
  .anchor_area .font_e {
    color: var(--spot-color);
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
  }
  .anchor_area a:before,
  .anchor_area a:after {
  }
  .anchor_area a:before {
    content: "";
    width: 5px;
    height: 5px;
    position: absolute;
    right: 4%;
    top: 45%;
    transform: translateY(-50%);
    transform: translateX(-50%) rotate(45deg);
    border: solid var(--main-color-hover);
    border-width: 0 1px 1px 0;
    z-index: 1;
  }
  .anchor_area a:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: right bottom;
    transform: scale(1, 0);
    transition: transform 0.3s;
    background: var(--btn-gray-color);
  }
  .anchor_area a:hover:after {
    transform-origin: left top;
    transform: scale(1, 1);
  }
  .anchor_link {
    padding-top: 50px;
    margin-top: -50px !important;
  }

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

price_flow

================================================================================== */
  .price_flow {
    border-top: 1px solid var(--boder-color);
  }
  .price_flow li {
    border-bottom: 1px solid var(--boder-color);
    padding: 30px 5%;
  }
  .price_flow li:nth-child(even) {
    background: var(--bg-color);
  }
  .price_flow li .font_e {
    font-size: 1.2em;
    line-height: 1.1;
    margin: 0 0 10px 0;
    display: block;
  }
  .price_flow li .font_e span {
    color: var(--spot-color);
    font-size: 2em;
    margin: 0 5px;
  }
  .price_flow li .title {
    font-size: 1.3em;
    font-weight: bold;
    margin: 0 0 10px 0;
  }

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

merit_second_area

================================================================================== */
  .merit_second_area .fl_area .title {
    font-size: 1.2em;
    line-height: 1.5;
    margin: 0 0 10px 0;
  }

  .fl_area .title {
    font-size: 2em;
    font-weight: bold;
    line-height: 1.2;
    margin: 30px 0;
  }
  .fl_area .title span {
    color: var(--spot-color);
    font-size: 1.5em;
  }

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

【下層ページ　共通】table_bace

================================================================================== */
  .table_bace {
    width: 100%;
    font-size: 0.8em;
  }
  .table_bace th,
  .table_bace td {
    border: 1px solid var(--btn-gray-color-hover);
    padding: 10px 5px;
    line-height: 1.5;
    vertical-align: middle;
  }
  .table_bace th {
    font-weight: bold;
  }

  /* table_price
======================================== */
  .table_price {
    text-align: center;
    font-size: 0.7em;
  }
  .table_price .title th,
  .table_price .title td {
    vertical-align: middle;
  }
  .table_price .title th {
    color: #fff;
  }
  .table_price .title th:nth-child(2) {
    background: #203155;
  }
  .table_price .title th:nth-child(3) {
    background: #479ddf;
  }
  .table_price .split td {
    background: #f6f9ff;
  }

  .table_price .split td:nth-of-type(n + 3) {
    background: #e1effa;
  }
  .table_price td span {
    margin: 0 10px;
  }

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

【下層ページ　共通】split

================================================================================== */
  .split_02 {
  }
  .split_02 .box {
    width: 100%;
  }
  .split_02 li {
    border-top: none;
  }

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

【下層ページ　共通】fl_area

================================================================================== */
  .fl_area {
  }
  .fl_area .fl_box {
    margin: 0 0 20px 0;
  }
  .fl_area .img {
    margin: 20px 0;
  }
  .fl_area .text {
  }

  .fl_box .btn_blue {
    margin: 20px 0 0 0;
  }

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

【下層ページ　共通】second_page_link

================================================================================== */
  .second_page_link {
    background: var(--bg-color);
  }
  .second_page_link ul {
  }
  .second_page_link a {
    display: block;
    font-size: 0.9em;
    padding: 12px 5%;
    position: relative;
    letter-spacing: 1px;
  }
  .second_page_link a span {
    position: relative;
    z-index: 1;
  }
  .second_page_link li {
    border-top: 1px solid var(--boder-color);
  }
  .second_page_link a:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--btn-gray-color-hover);
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform 0.3s;
  }
  .second_page_link a:hover:after {
    transform-origin: left top;
    transform: scale(1, 1);
  }

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

【下層ページ　共通】fl_long_img

================================================================================== */
  .fl_long_img {
  }
  .fl_long_img .fl_box {
  }

  .fl_long_img .fl_box .img {
  }
  .fl_long_img .fl_box .img img {
    height: 40vh;
  }
  .fl_long_img .fl_box .text {
    background: #fff;
    padding: 30px 5%;
  }

  .fl_long_img .fl_box:nth-child(odd) .img {
    margin: 0 10% 0 0;
    clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0 100%);
  }
  .fl_long_img .fl_box:nth-child(even) .img {
    margin: 0 0 0 10%;
    clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0 100%);
  }

  .fl_long_img .main_title {
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.6;
    margin: 0 0 20px 0;
  }
  .fl_long_img .title {
    font-weight: bold;
    margin: 30px 0 10px 0;
  }

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

【下層ページ　共通】

================================================================================== */
  .second_page {
    padding: 60px 0 0 0;
  }

  /* second_title
======================================== */
  .second_page .second_title {
  }
  .second_page .second_title .title {
    background: var(--second-title-bg-color);
    text-align: center;
    padding: 10px 5%;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.5;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
  }
  .second_page .second_title p {
    margin: 0 0 30px 0;
  }

  .mini {
    font-size: 0.7em;
  }

  /* ★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★

全ページ共通

★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★ */

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

【共通】タイトル

================================================================================== */
  .title_set {
  }

  /* title_01
======================================== */
  .title_01 {
    text-align: center;
    margin: 40px 0 20px;
    padding: 0 5%;
    font-weight: bold;
  }
  .title_01 .font_e {
    font-size: 1.5em;
    letter-spacing: 2px;
    line-height: 1;
    position: relative;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    display: inline-block;
  }
  .title_01 .font_e:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 30%;
    background: var(--main-color);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* title_02
======================================== */
  .title_02 {
    text-align: center;
    margin: 20px 5%;
    font-size: 1.2em;
    font-weight: bold;
  }

  /* title_03
======================================== */
  .title_03 {
    text-align: center;
    font-weight: bold;
    margin: 20px 0;
  }
  .title_03 span {
    min-width: 150px;
    letter-spacing: 2px;
    line-height: 1.5;
    position: relative;
    margin: 0 0 20px 0;
    display: inline-block;
    font-size: 1.3em;
    padding: 0 0 20px 0;
  }
  .title_03 span:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 30%;
    background: var(--main-color);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

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

【共通】ボタン

================================================================================== */
  [class*="btn_"] {
    position: relative;
    height: fit-content;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
  }
  [class*="btn_"] .btn:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform 0.3s;
  }
  [class*="btn_"] .btn:hover:after {
    transform-origin: left top;
    transform: scale(1, 1);
  }

  [class*="btn_"] .btn {
  }
  [class*="btn_"] .btn span {
    position: relative;
    z-index: 1;
  }

  /* btn_blue
======================================== */
  .btn_blue .btn {
    background: var(--main-color);
    color: #fff;
    display: block;
    text-align: center;
    padding: 15px 0;
  }
  .btn_blue .btn:after {
    background: var(--btn-black-color);
  }

  /* btn_gray
======================================== */
  .btn_gray .btn {
    background: var(--btn-gray-color);
    display: block;
    text-align: center;
  }
  .btn_gray .btn:after {
    background: var(--btn-gray-color-hover);
  }

  /* btn_red
======================================== */
  .btn_red .btn {
    background: var(--spot-color);
    color: #fff;
  }
  .btn_red .btn:after {
    background: #ff364a;
  }

  /* btn_white
======================================== */
  .btn_white .btn {
    background: #fff;
    display: block;
    text-align: center;
  }
  .btn_white .btn:after {
    background: var(--btn-gray-color);
  }

  /* btn_long
======================================== */
  .btn_long {
  }
  .btn_long .btn {
  }
  .btn_long .btn:before {
  }

  /* btn_s
======================================== */
  .btn_s .btn {
    width: 40px;
    height: 40px;
    font-size: 0;
    position: relative;
    display: block;
  }
  .btn_s .btn:before {
    content: url(../img/bace/arrow_01_white.svg);
    width: 13px;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  /* arrow_white
======================================== */
  .arrow_white .btn:before {
    content: url(../img/bace/arrow_01_white.svg);
    width: 8px;
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
    z-index: 1;
  }

  /* arrow_black
======================================== */
  .arrow_black .btn:before {
    mix-blend-mode: difference;
  }

  /* ★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★

トップページ

★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★ */

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

shop_area

================================================================================== */
  .shop_area {
  }
  .shop_area .box {
  }
  .shop_area .box a {
    padding: 20px 5%;
    display: flex;
    gap: 20px;
  }
  .shop_area .box a:hover {
    background: var(--bg-color);
  }
  .shop_area .box:first-child a {
    border-bottom: 1px solid var(--boder-color);
  }
  .shop_area .box:last-child a {
  }
  .shop_area .box .img {
    width: 40%;
  }
  .shop_area .box .img img {
    height: 100px;
  }
  .shop_area .box .text {
    width: 60%;
  }
  .shop_area p {
    font-weight: bold;
    margin: 0 0 15px 0;
  }

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

news_area

================================================================================== */
  .news_area {
    border-top: 1px solid var(--boder-color);
    border-bottom: 1px solid var(--boder-color);
    padding: 10px 0 40px 0;
    margin: 50px 0 0 0;
  }
  .news_area .news_box {
  }
  .news_area .title {
    line-height: 1.5;
    font-weight: bold;
  }
  .news_area .title .font_e {
    font-size: 2.5em;
  }
  .news_area ul {
    overflow: auto;
    height: 200px;
    margin: 0 0 30px 0;
    padding: 0 10px 0 0;
    font-size: 0.8em;
  }
  .news_area li {
    border-bottom: 1px solid var(--boder-color);
  }
  .news_area li:last-child {
    border-bottom: none;
  }
  .news_area a {
    padding: 15px 0;
  }
  .news_area a:hover {
    color: var(--main-color-hover);
  }
  .news_area a span {
    display: block;
    color: var(--main-color-hover);
  }

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

column_area

================================================================================== */
  .column_area {
  }

  .column_area .main_title {
    font-weight: bold;
    margin: 0 0 10px 0;
  }
  .column_area .main_title .font_e {
    font-size: 2em;
    margin: 0 10px 0 0;
  }

  .column_area .slick-slider {
    overflow: hidden;
    padding: 0 0 60px 0;
  }
  .column_area .slick-list {
  }
  .column_area .slick-track li {
    margin: 0 5px;
  }
  .column_area .slick-track li a {
  }
  .column_area .slick-track li p {
    margin: 10px 0 0 0;
    line-height: 1.5;
    font-size: 0.7em;
  }

  .column_area .btn_gray {
    margin: 30px 0 0 0;
  }

  .column_area .btn_gray,
  .news_area .btn_gray {
  }
  .column_area .btn_gray a,
  .news_area .btn_gray a {
    padding: 15px 0;
  }

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

students_area

================================================================================== */
  .students_area {
  }
  .students_area .title_top {
    margin: 0 0 50px 0;
  }

  .students_area .students_box {
  }
  .students_area .students_box .box {
    border: 1px solid var(--boder-color);
    padding: 20px 5%;
    margin: 20px 0;
  }

  .students_area .students_box .img {
    width: 100%;
    text-align: center;
    margin: 0 0 20px 0;
  }
  .students_area .students_box .img img {
    width: 70%;
  }

  .students_area .name {
    line-height: 1.8;
    margin: 0 0 10px 0;
    text-align: center;
  }
  .students_area .name span {
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 2px;
  }

  .students_area .sns {
    margin: 20px 0;
    text-align: center;
  }
  .students_area .sns a {
  }
  .students_area .sns a:hover {
    opacity: 0.5;
  }
  .students_area .sns img {
    width: 25px;
  }

  .students_area .btn_blue {
    display: block;
    margin: 30px 0 0 0;
  }
  .students_area .btn_blue a {
    padding: 20px 0;
    font-size: 1.3em;
  }

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

magazine_area

================================================================================== */
  .magazine_area {
    margin: 50px 0;
  }
  .magazine_area ul {
    margin: 30px 0;
    text-align: center;
  }
  .magazine_area li {
    margin: 0 0 40px 0;
  }
  .magazine_area li:last-child {
    margin-bottom: 0;
  }
  .magazine_area li img {
    width: 50%;
  }
  .magazine_area li span {
    margin: 10px 0 0 0;
    display: block;
    font-size: 1.2em;
  }

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

teacher_area

================================================================================== */
  .teacher_area {
  }

  .teacher_area .teacher_box {
  }
  .teacher_area .teacher_box ul {
  }
  .teacher_area .teacher_box li {
    border: 1px solid var(--boder-color);
    padding: 10px 5%;
    margin: 20px 0;
  }

  .teacher_area .teacher_box li .img {
    text-align: center;
    margin: 0 0 20px 0;
  }
  .teacher_area .teacher_box li .img img {
    width: 70%;
  }

  .teacher_area .teacher_box li .text {
    width: 100%;
  }

  .teacher_area .name {
    margin: 0 0 10px 0;
    text-align: center;
  }
  .teacher_area .name span {
    font-size: 1.5em;
    letter-spacing: 2px;
    font-weight: bold;
  }

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

slick

================================================================================== */
  .slick-slider .slick-next,
  .slick-slider .slick-prev {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .slick-slider .slick-next {
    left: 59%;
  }
  .slick-slider .slick-prev {
    left: 41%;
  }

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

chosen_area

================================================================================== */
  .title_top {
    line-height: 1.5;
    text-align: center;
  }
  .title_top .font_e {
    font-size: 6vw;
  }
  .title_top .sub {
    font-size: 1.2em;
    letter-spacing: 1px;
    font-weight: bold;
  }

  .chosen_area .box_area {
    margin: 30px 0;
  }

  .chosen_area .box_area .main_title {
    font-size: 1.7em;
    line-height: 1.5;
    font-weight: bold;
    color: #fff;
    padding: 20px 0;
  }

  .chosen_area .box_area [class*="box_"] {
    position: relative;
  }

  .chosen_area .box_area .img {
    position: absolute;
    bottom: 0;
    text-align: right;
  }
  .chosen_area .box_area img {
    width: 50%;
  }

  .chosen_area .box_area .text {
    padding: 20px 5%;
  }

  .chosen_area .box_area .text .title {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 20px 0;
    position: relative;
  }
  .chosen_area .box_area .text .title:before {
    content: "";
    width: 20%;
    height: 1px;
    background: #fff;
    left: 0;
    bottom: -12px;
    position: absolute;
  }

  .chosen_area .box_area .text p {
    width: 100%;
    line-height: 1.5;
    text-shadow: 0 0 10px #000;
  }

  .chosen_area .box_area .text .btn_red {
    margin: 20px 0 0 0;
  }

  .chosen_area .box_area ul {
    color: #fff;
  }
  .chosen_area .box_area ul li {
    background: linear-gradient(rgba(32, 49, 85, 0.8), rgba(32, 49, 85, 0.2));
    width: 100%;
    padding: 10px 5%;
    box-sizing: border-box;
    margin: 15px 0;
  }
  .chosen_area .box_area ul li .title {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.5;
    display: block;
    margin: 0 0 20px 0;
  }

  /* box_01
======================================== */
  .chosen_area .box_area .box_01 {
    background: url(../img/top/chosen_01_bg.jpg) scroll no-repeat 0 0 / cover;
  }

  /* box_02
======================================== */
  .chosen_area .box_area .box_02 {
    background: url(../img/top/chosen_02_bg.jpg) scroll no-repeat 0 0 / cover;
  }

  /* box_03
======================================== */
  .chosen_area .box_area .box_03 {
    background: url(../img/top/chosen_03_bg.jpg) scroll no-repeat 0 0 / cover;
  }

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

what_area

================================================================================== */
  .what_area a {
    background: var(--main-color);
    color: #fff;
  }
  .what_area .img {
  }
  .what_area .img img {
    height: 20vh;
  }
  .what_area .text {
    padding: 40px 5%;
  }
  .what_area .text img {
    opacity: 0.2;
  }
  .what_area .text .title {
    font-size: 1.5em;
    font-weight: bold;
    margin: 20px 0 10px 0;
  }
  .what_area .text .title span {
    font-size: 1.25em;
    line-height: 1.4;
    letter-spacing: 2px;
  }
  .what_area .btn_red {
    margin: 5vh 0 0 0;
  }

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

merit_area

================================================================================== */
  .merit_area {
    position: relative;
  }

  .merit_area .main_title {
    text-align: center;
    font-size: 1.1em;
    line-height: 1.5;
    font-weight: bold;
    padding: 20px 5%;
  }
  .merit_area .main_title span {
    font-size: 1.1em;
  }

  .merit_area ul {
  }
  .merit_area li {
    position: relative;
    width: 100%;
  }
  .merit_area li a {
    display: block;
  }
  .merit_area li img {
    height: 30vh;
    object-position: top;
  }
  .merit_area p {
    position: absolute;
    width: 100%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    line-height: 1.5;
    padding: 0 5%;
    box-sizing: border-box;
    font-size: 1.2em;
  }
  .merit_area p span {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 -15px 0;
    display: block;
  }
  .merit_area .btn_white {
    background: var(--main-color);
    padding: 10px 5%;
    font-size: 0.8em;
  }
  .merit_area .btn_white .btn {
    padding: 15px 0;
    font-size: 1.4em;
    font-weight: bold;
    letter-spacing: 1px;
  }
  .merit_area .btn_white .btn:before {
    width: 13px;
    right: 5%;
  }

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

mv

================================================================================== */
  .mv {
    position: relative;
    margin: 60px 0 0 0;
  }

  .mv .text {
    padding: 10px 5%;
  }
  .mv .text p {
    position: absolute;
    left: 0;
    top: 15vh;
    color: #fff;
    z-index: 9999;
    font-weight: bold;
    font-size: 1.7em;
    line-height: 1.3;
    padding: 11px;
    text-shadow: 0 0 4px var(--main-color);
    background-color: rgba(0, 0, 0, 0.6);
  }
  .mv .text li {
    position: relative;
    color: #fff;
    font-size: 1em;
    padding: 5px 5%;
    margin: 5px 0;
    background: linear-gradient(
      90deg,
      var(--main-color),
      rgba(32, 49, 85, 0.8)
    );
  }
  .mv .text li span {
    font-size: 1.5em;
    font-weight: bold;
  }

  .mv img {
    height: 40vh;
  }
  .mv .slick-slider {
    padding: 0;
  }

  /* ページトップ
=======================================================================*/
  #page-top {
    bottom: -100px;
    position: fixed;
    right: 5px;
    width: 10%;
  }
  #page-top img {
    vertical-align: bottom;
  }

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

全画面メニュー

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

  /* menu
======================================== */
  .menu {
    width: 60px;
    height: 50px;
    position: fixed;
    right: 5px;
    top: 0;
    z-index: 99;
    cursor: pointer;
    transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .header.fixed .menu {
    top: -100px;
  }
  .menu.active {
  }
  .menu_line {
    background: #504f5d;
    display: block;
    height: 2px;
    position: absolute;
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.2s linear;
  }
  .menu_line_top {
    top: 14px;
  }
  .menu_line_center {
    top: 26px;
  }
  .menu_line_bottom {
    bottom: 10px;
  }

  .menu.active .menu_line,
  .tel_menu_close.active .menu_line {
    background: #fff;
    left: 15px;
  }
  .menu.active .menu_line_top,
  .menu.active .menu_line_center,
  .tel_menu_close.active .menu_line_top,
  .tel_menu_close.active .menu_line_center {
    top: 25px;
    transform: rotate(45deg);
  }
  .menu.active .menu_line_center,
  .tel_menu_close.active .menu_line_center {
    opacity: 0;
  }
  .menu.active .menu_line_bottom,
  .tel_menu_close.active .menu_line_bottom {
    top: 25px;
    transform: rotate(-45deg);
  }

  /* gnav
======================================== */
  .gnav,
  .telnav {
    background: rgba(0, 0, 0, 0.9);
    background-size: cover;
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 98;
    top: 0;

    overflow-y: scroll;
    -ms-overflow-style: none; /* IE, Edge 対応 */
    scrollbar-width: none; /* Firefox 対応 */
  }
  .gnav::-webkit-scrollbar,
  .telnav::-webkit-scrollbar {
    /* Chrome, Safari 対応 */
    display: none;
  }
  .gnav_wrap,
  .telnav_wrap {
    align-items: center;
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .gnav_inner,
  .tel_inner {
    display: flex;
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translateX(-50%);
    width: 90%;
    padding: 0 0 30px 0;
  }
  .gnav_inner ul {
    width: 100%;
  }
  .gnav_menu a {
    color: #fff;
    display: block;
    padding: 7px 5px;
    position: relative;
    font-size: 0.9em;
  }
  .gnav_menu a:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #fff;
    position: absolute;
    bottom: 0;
    transform-origin: right bottom;
    transform: scale(0, 1);
    transition: transform 600ms;
    opacity: 0.8;
  }
  .gnav_menu a:hover:before {
    transform-origin: left top;
    transform: scale(1, 1);
    transition: transform 500ms;
  }

  .close {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  body.fixed {
    position: fixed;
    width: 100%;
  }

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

header

================================================================================== */
  .header {
    position: fixed;
    width: 100%;
    min-width: 900px;
    height: 60px;
    z-index: 10000;
    top: 0;
    background: rgba(255, 255, 255, 0.9);
    transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .header.fixed {
    top: -100px;
  }

  /* logo
======================================== */
  .header .logo {
    position: absolute;
    left: 2%;
    top: 12px;
    width: 20%;
    max-width: 270px;
  }

  /* header_link
======================================== */
  .header_link {
    display: flex;
    justify-content: right;
  }
  .header_link ul {
    display: flex;
    flex-wrap: wrap;
  }

  .header_link .link_01 {
    margin: 10px 5px 0 0;
  }
  .header_link .link_01 a {
    padding: 5px 10px;
    font-size: 0.8em;
    display: inline-block;
  }
  .header_link .link_01 a:hover {
    color: var(--main-color-hover);
  }

  /* link_02
======================================== */
  .header_link .link_02 {
    position: fixed;
    text-align: center;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 98;
    transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .header.fixed .header_link .link_02 {
    bottom: -150px;
  }

  .header_link .link_02 li {
    width: 100%;
    border-top: 1px solid #fff;
    box-sizing: border-box;
  }
  .header_link .link_02 .online {
    border-right: 1px solid #fff;
  }
  .header_link .link_02 li:nth-child(-n + 2) {
    width: 50%;
  }
  .header_link .link_02 a {
    height: 50px;
    line-height: 50px;
    font-size: 1em;
    width: 100%;
    padding: 0;
  }

  .header_link .link_02 a span {
    position: relative;
  }
  .header_link .link_02 a span:before {
    position: absolute;
  }

  .header_link .link_02 span {
    padding: 0 0 0 35px;
  }
  .header_link .link_02 span:before {
    left: 0;
    top: -7px;
  }
  .online a span:before {
    content: url(../img/bace/icon_online.svg);
    width: 25px;
  }
  .document a span:before {
    content: url(../img/bace/icon_document.svg);
    width: 25px;
  }
  .contact a span:before {
    content: url(../img/bace/icon_mail.svg);
    width: 25px;
  }

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

contact_btn

================================================================================== */
  .contact_btn {
  }
  .contact_btn a {
    display: block;
    padding: 30px 5%;
    border-top: 1px solid var(--boder-color);
    position: relative;
    transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .contact_btn a:hover {
    padding: 30px 10%;
  }
  .contact_btn a:hover {
    color: #fff;
  }
  .contact_btn a span {
    position: relative;
    z-index: 1;
    font-size: 0.9em;
    transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .contact_btn a:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--main-color);
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform 1s;
  }
  .contact_btn a:hover:after {
    transform-origin: left top;
    transform: scale(1, 1);
  }

  .contact_btn a:before {
    content: url(../img/bace/arrow_01.svg);
    width: 13px;
    position: absolute;
    right: 5%;
    top: 50%;
    z-index: 1;
    line-height: 0;
    transform: translateY(-50%);
  }
  .contact_btn a:hover:before {
    mix-blend-mode: exclusion;
    right: 10%;
  }

  .contact_btn .font_e {
    font-size: 1.7em;
    line-height: 1.2;
    margin: 0 15px 0 0;
  }
  .contact_btn .font_e span {
    color: var(--spot-color);
  }
  .contact_btn a:hover .font_e {
    letter-spacing: 5px;
  }

  /* second_btn
======================================== */
  .second_btn {
  }
  .second_btn a {
    background: var(--main-color);
    color: #fff;
  }
  .second_btn a:before {
    content: url(../img/bace/arrow_01_white.svg);
  }
  .second_btn a:hover:before {
    mix-blend-mode: unset;
  }
  .second_btn a:after {
    background: var(--main-color-hover);
  }
  .second_btn a:hover:after {
  }
  .second_btn a .font_e {
    letter-spacing: 2px;
  }

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

footer

================================================================================== */
  .footer {
  }

  /* footer_text
======================================== */
  .footer .footer_text {
    padding: 20px 5%;
    font-size: 0.8em;
  }

  /* path
======================================== */
  .footer .path {
    padding: 0 5% 20px;
    font-size: 0.6em;
  }
  .footer .path ul {
  }
  .footer .path li {
    display: inline-block;
  }
  .footer .path li a:after {
    content: "/";
    opacity: 0.7;
    margin: 0 5px;
  }

  /* footer_link
======================================== */
  .footer_link {
    padding: 0 5%;
  }
  .footer_link .logo_area {
    text-align: center;
  }
  .footer_link .logo_area .logo {
    width: 50%;
  }
  .footer_link .logo_area ul {
    display: flex;
    justify-content: center;
  }
  .footer_link .logo_area ul li {
    margin: 20px 10px;
  }
  .footer_link .logo_area ul img {
    height: 25px;
    object-fit: contain;
  }
  .footer_link .logo_area ul li a:hover {
    opacity: 0.7;
  }

  .footer_link .link {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8em;
  }
  .footer_link .link ul {
    width: 50%;
  }
  .footer_link .link .sub a:before {
    content: "-";
    margin: 0 5px 0 10px;
    color: #bbb;
  }
  .footer_link .link a:hover {
    color: var(--main-color-hover);
  }

  .footer .copy {
    text-align: center;
    font-size: 0.6em;
    letter-spacing: 2px;
    padding: 10px 0;
    opacity: 0.8;
  }

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

ページトップ

================================================================================== */
  #page-top {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    background: rgba(150, 150, 150, 0.2);
    z-index: 9999;
    cursor: pointer;
    transition: all 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  #page-top:hover {
    background: rgba(200, 200, 200, 0.9);
  }
  #page-top:before {
    content: "";
    width: 13px;
    height: 13px;
    border: solid #fff;
    border-width: 1px 1px 0 0;
    transform: rotate(-45deg);
    position: absolute;
    right: 16px;
    top: 24px;
  }

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

ふわっと表示

================================================================================== */
  .move_bottom,
  .move_top,
  .move_right,
  .move_left {
    transform: translate(0, 50px);
  }

  [class*="move_"] {
    opacity: 0;
  }
  [class*="_on"] {
    transition: all 3000ms cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate(0, 0);
    opacity: 1;
  }

  /* 横並び時に順に出す -----------------*/
  [class*="move_"]:nth-of-type(2) {
    moz-transition-delay: 200ms;
  }
  [class*="move_"]:nth-of-type(3) {
    moz-transition-delay: 400ms;
  }
  [class*="move_"]:nth-of-type(4) {
    moz-transition-delay: 600ms;
  }
  [class*="move_"]:nth-of-type(5) {
    moz-transition-delay: 800ms;
  }
  [class*="move_"]:nth-of-type(6) {
    moz-transition-delay: 1000ms;
  }
  [class*="move_"]:nth-of-type(7) {
    moz-transition-delay: 1200ms;
  }
  [class*="move_"]:nth-of-type(8) {
    moz-transition-delay: 1400ms;
  }
  [class*="move_"]:nth-of-type(9) {
    moz-transition-delay: 1600ms;
  }
  [class*="move_"]:nth-of-type(10) {
    moz-transition-delay: 1800ms;
  }

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

共通　画像拡大

================================================================================== */
  .img_zoom {
    overflow: hidden;
  }
  .img_zoom .img {
    overflow: hidden;
  }
  .img_zoom img {
    transition: all 10000ms cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: 1;
    -moz-transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01);
    vertical-align: bottom;
  }
  .img_zoom:hover img {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05) rotate(1deg);
  }

  .blog-detail__image {
    width: 150px;
    float: left;
  }

  .writer-right {
    float: left;
    margin-left: 15px;
  }

  .writer .btn_gray {
    margin: 20px 0 50px;
  }
  .writer .btn_gray .btn {
    padding: 15px 0;
  }

  

.pdf {
  border: none;
      text-align: center;
      letter-spacing: 1px;
      color: #fff !important;
      background: var(--main-color);
      display: block;
      width: 450px;
      height: 50px;
      line-height: 50px;
      transition: all 500ms cubic-bezier(0.215,0.610,0.355,1.000);
      z-index: 10;
      cursor: pointer;
      margin-top: 20px;
      max-width: 100%;
  }
}
/* 【SP】ウィンドウ幅が768px以下の場合に適用するCSS */