@charset "utf-8";

/* ========================================================
	cms.css news以外のcms用css
======================================================== */
/*変数 var_____*/
:root {
      --col_btn: #fff;
      --col_btn_back: #898989;
      --col_radio: #36404e;
      --col_check: #36404e;
      --col_gray: #606060;
      --col_gray_l: #c8c8c8;
      --col_gray_l2: #888888;
      --col_main: #3238C6;
      --col_sub: #FFC000;
      /*黄色*/
      --col_red: #8F000C;
      --col_yellow: #D3B694;
      --bg_gray: #E7E7E7;
      --bg_gray_l: #f7f7f7;
      --bg_nav: rgba(51, 51, 51, 0.9);
      --bg_black: #333333;
      --bg_nav_fix: #484848;
      --col_blog_cate: #3238C6;
      --ico_gray: #bfbfbf;
}

/*個別対応スタイルリセット
---------------------------------------------------------------------------------------------------*/
.case_cms_contents_area ol,
.case_cms_contents_area ul {
      list-style: none;
}

.case_cms_contents_area ol li {
      margin-left: inherit;
}

@media screen and (max-width: 960px) {
      .case_cms_contents_area a.btn {
            font-size: 1.2em;
      }
}

/* CSS Document */
/*フォームパーツのみのcss
---------------------------------------------------------------------------------------------------*/
.hiss {
      color: #c40500;
}

.case_cms_contents_area input[type=text],
.case_cms_contents_area input[type=number],
.case_cms_contents_area input[type=email],
input[type=tel].case_cms_contents_area,
input[type=mail],
.case_cms_contents_area input[type=password],
input[type=date],
.case_cms_contents_area input[type=time],
.case_cms_contents_area input[type=search] {
      border-radius: 0;
      outline: none;
      -moz-appearance: none;
      appearance: none;
      -webkit-appearance: none;
      border: solid 1px #cccccc;
      /* width: 100%;*/
      box-sizing: border-box;
      font-size: 16px;
      background: #fff;
}

/*textarea*/
.case_cms_contents_area textarea {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: none;
      border-radius: 0;
      border: solid 1px #cccccc;
      padding: 4px;
      width: 100%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 1.6rem;
      height: 10em;
      /*resize:none; エリアの拡大禁止*/
      max-width: 100%;
      resize: vertical;
      max-height: 300px;
}

/*サイズ*/
.size_20 {
      width: 20%;
}

.size_30 {
      width: 30%;
}

.size_40 {
      width: 40%;
}

.size_50 {
      width: 50%;
}

.size_60 {
      width: 60%;
}

.size_70 {
      width: 70%;
}

.size_80 {
      width: 80%;
}

.size_80 {
      width: 80%;
}

.size_90 {
      width: 90%;
}

.size_100 {
      width: 100%;
}

.size_50_sp100 {
      width: 50%;
}

.size_60_sp100 {
      width: 60%;
}

.size_70_sp100 {
      width: 70%;
}

.size_80_sp100 {
      width: 80%;
}

.size_90_sp100 {
      width: 90%;
}

@media screen and (max-width: 960px) {
      .size_50_sp100 {
            width: 100%;
      }

      .size_60_sp100 {
            width: 100%;
      }

      .size_70_sp100 {
            width: 100%;
      }

      .size_80_sp100 {
            width: 100%;
      }

      .size_90_sp100 {
            width: 100%;
      }
}

/*ボタン*/
.fom_btn_area {
      display: flex;
      justify-content: center;
}

.fom_btn_area>*+* {
      margin-left: 5%;
}

/*end 個別対応スタイルリセット
---------------------------------------------------------------------------------------------------*/
/*section
---------------------------------------------------------------------------------------------------*/
/*@media screen and (max-width: 1600px) {
      .w15.sp_section_s {
            max-width: 95%;
            margin: auto;
      }
      .w15.sp_section_l {
            max-width: 90%;
            margin: auto;
      }
}
@media screen and (max-width: 1600px) {
      .w14.sp_section_s {
            max-width: 95%;
            margin: auto;
      }
      .w14.sp_section_l {
            max-width: 90%;
            margin: auto;
      }
}
@media screen and (max-width: 1350px) {
      .w13.sp_section_s {
            max-width: 95%;
            margin: auto;
      }
      .w13.sp_section_l {
            max-width: 90%;
            margin: auto;
      }
}
@media screen and (max-width: 1350px) {
      .w12.sp_section_s, .w125.sp_section_s {
            max-width: 95%;
            margin: auto;
      }
      .w12.sp_section_l, .w125.sp_section_l {
            max-width: 90%;
            margin: auto;
      }
}
@media screen and (max-width: 1300px) {
      .w11.sp_section_s {
            max-width: 95%;
            margin: auto;
      }
      .w11.sp_section_l {
            max-width: 90%;
            margin: auto;
      }
}*/
@media screen and (max-width: 1250px) {
      .sp_section_s {
            max-width: 95%;
            margin: auto;
      }

      .sp_section_l {
            max-width: 90%;
            margin: auto;
      }
}

/*end section
---------------------------------------------------------------------------------------------------*/
/*フォントサイズ調整
---------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1370px) {
      .case_cms_contents_area {
            /* font-size: 0.8vw;*/
            font-size: 1.2vw;
      }
}

@media screen and (max-width: 960px) {
      .case_cms_contents_area {
            /*   font-size: 1.1vw;*/
            font-size: 1.5vw;
      }
}

@media screen and (max-width: 680px) {
      .case_cms_contents_area {
            /*       font-size: clamp(0.5rem, 0.056rem + 2.22vw, 1rem);*/
            font-size: clamp(0.8rem, 0.056rem + 2.8vw, 1.0rem);
      }
}

/*end フォントサイズ調整
---------------------------------------------------------------------------------------------------*/
/*.page_title_case_area　事例タイトル 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page_title_case_area {
      padding: 0.5em 0 2em 0;
      position: relative;
      border-bottom: 1px solid var(--col_gray);
}

.page_title_case_aera_w {
      width: 1400px;
      margin: auto;
      position: relative;
}

.page_title_case {
      text-align: center;
      margin: auto;
}

.page_title_case img {
      width: 35rem;
}

.page_title_case_h1 {
      margin-top: 2em;
      font-size: 1.2em;
}

@media screen and (max-width: 1650px) {
      .page_title_case_aera_w {
            width: 90%;
      }
}

@media screen and (max-width: 680px) {
      .page_title_case_area {
            padding: 1.5em 0 2em 0;
      }

      .page_title_case {
            width: 80%;
      }

      .page_title_case img {
            width: 80%;
      }
}

/*page_case_contents
----------------------------------------------------------------------------------------------------------*/
.page_case_contents {
      padding: 5em 0 2em 0;
}

@media screen and (max-width: 680px) {
      .page_case_contents {
            padding: 2em 0 2em 0;
      }
}

/*case 一覧
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
.case_blog_flex {
      display: flex;
      gap: 0 4em;
}

.case_blog_main {
      flex: 4;
      overflow: hidden;
}

.case_blog_sidebar {
      flex: 1;
}

@media screen and (max-width: 960px) {
      .case_blog_flex {
            gap: 0 3em;
      }

      .case_blog_main {
            flex: 3;
      }

      .case_blog_sidebar {
            flex: 1;
      }
}

@media screen and (max-width: 680px) {
      .case_blog_flex {
            display: block;
      }

      .case_blog_sidebar {
            margin-top: 6em;
      }
}

/*case 一覧 リスト
----------------------*/
.case_n_list {
      display: flex;
      flex-wrap: wrap;
      gap: 2em 4%;
}

.case_n_list>li {
      box-sizing: border-box;
      width: calc((100% / 3) - 2.7%);
      background: #fff;
      /*    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
      overflow: hidden;
}

@media screen and (max-width: 960px) {
      .case_n_list {
            gap: 1em 6%;
      }

      .case_n_list>li {
            width: 47%;
      }
}

/*article_item_inner*/
.article_item_inner .img {
      position: relative;
      /*      aspect-ratio: 4/3;*/
      overflow: hidden;
      border-radius: 0.3em;
}

.article_item_inner .text_box {
      padding: 1em 0;
}

.article_item_inner .img img {
      width: 100%;
      /*      object-fit: cover;
      object-position: center;
      aspect-ratio: 4/3;*/
      height: auto;
      border-radius: 0.3em;
}

.article_item_inner .text_box .date {
      font-size: 0.8em;
      letter-spacing: 1px;
}

.article_item_inner_title {
      font-size: 1.1em;
      font-weight: bold;
      margin-bottom: 1em;
}

.article_item_inner .text_txt {
      font-size: 0.9em;
      text-decoration: underline;
}

.article_item_cat {
      font-size: 0.8em;
      font-weight: bold;
      padding: 0em 1em;
      background: var(--bg_gray_l);
      margin-top: 1.5em;
      border-radius: 3em;
      display: inline-block;
}

@media screen and (min-width: 961px),
print {

      .case_n_list>li a:hover *,
      .case_n_list>li a:hover {
            text-decoration: none !important;
      }
}

@media screen and (max-width: 960px) {
      .article_item_inner_title {
            font-size: 1.0em;
      }

      .text_txt {
            font-size: 0.8em;
      }
}

@media screen and (max-width: 680px) {
      .article_item_inner_title {
            font-size: 1.2em;
      }

      .text_txt {
            font-size: 1.1em;
      }

      .article_item_cat {
            font-size: 1.0em;
      }
}

/*case_blog_main
----------------------------------------------------------------------------*/
.article_list>li {
      margin-bottom: 4em;
      background: #fff;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.article_list .article_item_inner {
      display: flex;
      gap: 0 1.5em;
      overflow: hidden;
}

.article_list .article_item_inner .img {
      flex: 2;
      position: relative;
      aspect-ratio: 4/3;
      overflow: hidden;
}

.article_list .article_item_cat {
      position: absolute;
      left: 0.6em;
      top: 0.6em;
      background: var(--col_main);
      color: #fff;
      font-size: 0.9em;
      font-weight: bold;
      padding: 0em 1em;
      z-index: 1;
}

.article_list .article_item_inner .text_box {
      flex: 3;
      padding: 1em 1em 0 1em;
      margin-bottom: 2em;
      position: relative;
}

.article_list .article_item_inner .img img {
      width: 100%;
      object-fit: cover;
      object-position: center;
}

.article_list .article_item_inner .text_box .date {
      font-size: 0.8em;
      letter-spacing: 1px;
}

.article_list .article_item_inner_title {
      font-size: 1.2em;
      margin-top: 1em;
}

@media screen and (max-width: 680px) {
      .article_list .article_item_inner {
            display: block;
      }
}

/*more_link*/
.more_link {
      display: inline-block;
      font-size: 0.9em;
      border: solid 1px var(--col_sub);
      position: absolute;
      bottom: -2.2em;
      left: 50%;
      transform: translate(-50%, -0%);
      padding: 0.2em 1em;
      background: var(--col_sub);
      font-weight: bold;
      transition: all 0.15s ease;
      color: #fff;
}

@media screen and (min-width: 961px),
print {
      .article_list>li:hover .more_link {
            color: var(--col_sub);
            background: #fff;
      }
}

/*sidebar
----------------------------------------------------------------------------------------------------------------------------------------------*/
.sidebar_section+.sidebar_section {
      margin-top: 3em;
}

.case_blog_sidebar .sidebar_section .sidebar_title {
      /*      margin-bottom: 1em;*/
      padding-bottom: 0.5em;
      border-bottom: 1px solid var(--bg_gray_l);
}

.case_blog_sidebar .wpp-no-data {
      font-size: 0.9em;
}

/*.case_blog_sidebar .sidebar_section li {
      margin-bottom: 1em;
}*/
.sidebar_title {
      font-size: 1.3em;
}

@media screen and (max-width: 680px) {
      .sidebar_title {
            font-size: 1.4em;
      }
}

/*sidebar_list
------------------------------------------------------------------*/
.sidebar_list_inner {
      display: flex;
      gap: 0 1.5em;
      align-items: flex-start;
}

.sidebar_list_inner .img {
      flex: 2;
      position: relative;
      aspect-ratio: 4/3;
}

.sidebar_list_inner .text_box {
      font-size: 0.8em;
      flex: 3;
}

.sidebar_list_inner .img img {
      width: 100%;
      object-fit: cover;
      object-position: center;
      aspect-ratio: 260/183;
      height: auto;
}

.sidebar_list_inner .text_box .date {
      font-size: 0.9em;
}

@media screen and (min-width: 91px),
print {
      .sidebar_list a:hover .text_box {
            color: var(--col_sub);
            text-decoration: underline;
      }
}

@media screen and (max-width: 680px) {
      .sidebar_list_inner .text_box {
            font-size: 1em;
      }
}

/*rank_list
------------------------------------------------------------------*/
.rank_list>li {
      border-bottom: 1px solid var(--bg_gray_l);
}

.rank_list>li>a {
      padding: 0.8em 0;
      display: flex;
      gap: 0 1.5em;
      align-items: flex-start;
}

.rank_list .blog_image {
      flex: 2;
      position: relative;
      aspect-ratio: 4/3;
}

.rank_list div {
      font-size: 0.9em;
      flex: 3;
}

.rank_list .blog_image img {
      width: 100%;
      object-fit: cover;
      object-position: center;
      aspect-ratio: 260/183;
      height: auto;
}

.rank_list .text_box .date {
      font-size: 0.9em;
}

@media screen and (min-width: 91px),
print {
      .rank_list a:hover div {
            color: var(--col_sub);
            text-decoration: underline;
      }
}

@media screen and (max-width: 680px) {
      .rank_list div {
            font-size: 1.2em;
      }
}

/*sidebar_cat_list
------------------------------------------------------------------*/
.sidebar_cat_list {
      font-size: 0.8em;
}

.sidebar_cat_list>li {
      border-bottom: 1px solid var(--bg_gray_l);
}

.sidebar_cat_list>li a {
      display: block;
      padding: 0.8em 0;
}

@media screen and (min-width: 91px),
print {
      .sidebar_cat_list>li a:hover {
            color: var(--col_sub);
            text-decoration: underline;
      }
}

@media screen and (max-width: 680px) {
      .sidebar_cat_list {
            font-size: 1.2em;
      }
}

/*case 詳細　事例
----------------------------------------------------------------------------------------------------------------------------------------------------------*/
.case_cms_section+.case_cms_section {
      padding-top: 6em;
}

@media screen and (max-width: 680px) {
      .case_cms_section+.case_cms_section {
            padding-top: 4em;
      }
}

/*case_cms_date_flex
-------------------------------------------------*/
.case_cms_date_flex {
      display: flex;
      gap: 0 1em;
}

.case_cms_date_flex .date {
      font-size: 0.8em;
}

.case_cms_date_flex .case_cat_d {
      font-size: 0.7em;
      border: solid 1px var(--col_main);
      color: var(--col_main);
      padding: 0 0.5em;
      display: inline-block;
}

/*case_cms_title_flex
-------------------------------------------------*/
.case_cms_title_flex {
      display: flex;
      justify-content: space-between;
      margin: 3em auto 4em auto;
      align-items: flex-end;
}

.case_cms_title_box {
      width: calc(100% - (130px + 1em));
      font-size: 2.0em;
      letter-spacing: 1px;
      line-height: 1.5;
}

@media screen and (max-width: 680px) {
      .case_cms_title_flex {
            display: block;
            margin: 1em auto 5em auto;
      }

      .case_cms_title_box {
            width: auto;
            font-size: 1.7em;
            margin-bottom: 1.5em;
      }
}

/*case_cms_sns_box
-------------------------------------------------*/
.case_cms_sns_box {
      width: 130px;
      font-size: 0.75em;
}

.case_cms_sns_txt {
      letter-spacing: 1px;
      text-align: center;
      color: #659FD8;
      margin-bottom: 1em;
}

.case_cms_sns_list {
      display: flex;
      gap: 0 2%;
}

.case_cms_sns_list li {
      width: 100%;
}

.case_cms_sns_list li img {
      width: 100%;
      object-fit: contain;
      object-position: center;
      aspect-ratio: 1/1;
      height: 2.6em;
}

.case_cms_contentsend_sns .case_cms_sns_box {
      margin: auto 0 auto auto;
}

@media screen and (max-width: 680px) {
      .case_cms_sns_box {
            width: 10em;
            margin: auto 0 auto auto;
            font-size: 0.8em;
      }
}

/*事例内容
--------------------------------------------------------------------------------------------------*/
.case_mai_v img {
      width: 100%;
      height: auto;
}

/*case_cms_user_inner
---------------------------------------------------*/
.case_cms_user_inner {
      padding: 5em 3em 3em 3em;
      border: solid 1px var(--col_main);
      position: relative;
      margin-top: 1em;
}

@media screen and (max-width: 680px) {
      .case_cms_user_inner {
            padding: 4em 1em 1em 1em;
      }
}

/*case_cms_user_title*/
.case_cms_user_title {
      position: absolute;
      top: -1.5em;
      left: 50%;
      transform: translate(-50%, -0%);
      width: 100%;
      text-align: center;
}

.case_cms_user_title>* {
      display: inline-block;
      background: var(--col_main);
      color: #fff;
      font-weight: bold;
      text-align: center;
      padding: .5em 1em;
      /*	border-radius: 3em;*/
}

@media screen and (max-width: 680px) {
      .case_cms_user_title {
            font-size: 1.6rem;
            width: 90%;
      }
}

/*case_cms_user_flex*/
.case_cms_user_flex {
      align-items: flex-start;
      display: flex;
      justify-content: space-between;
      gap: 0 3em;
}

.case_cms_user_flex .img {
      width: 30%;
      border-radius: 30em;
      overflow: hidden;
      aspect-ratio: 1;
}

.case_cms_user_flex .img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
}

.case_cms_user_flex .text_box {
      width: 70%;
      line-height: 2;
}

@media screen and (max-width: 680px) {
      .case_cms_user_flex {
            display: block;
      }

      .case_cms_user_flex .img {
            width: 50%;
            margin: auto auto 2em auto;
      }

      .case_cms_user_flex .text_box {
            width: auto;
      }
}

/*case_cms_user_dl*/
.case_cms_user_dl {
      display: flex;
      flex-wrap: wrap;
}

.case_cms_user_dl dt,
.case_cms_user_dl dd {
      margin-bottom: 1em;
}

.case_cms_user_dl dt {
      width: 8em;
      margin-right: 2em;
      position: relative;
}

.case_cms_user_dl dt:before {
      display: inline-block;
      content: "";
      background: var(--col_main);
      height: 100%;
      width: 1px;
      right: 0;
      top: 0;
      position: absolute;
}

.case_cms_user_dl dd {
      width: calc(100% - (8em + 2em));
}

@media screen and (max-width: 680px) {
      .case_cms_user_dl {
            display: block;
            line-height: 1.5;
      }

      .case_cms_user_dl dt {
            line-height: 1.5;
            padding-top: 1.0em;
            width: auto;
            padding-bottom: 0.2em;
            margin-bottom: 0.5em;
      }

      .case_cms_user_dl dt:before {
            width: 100%;
            height: 1px;
            right: auto;
            top: auto;
            bottom: 0;
            left: 0;
      }

      .case_cms_user_dl dd {
            width: auto;
            font-size: 0.9em;
      }
}

/*case_cms_gaiyo_title
---------------------------------------------------*/
.case_cms_gaiyo_title {
      position: relative;
      margin: 0.5em auto 1em 0;
      padding-left: 1.0em;
}

.case_cms_gaiyo_title:before {
      content: "";
      position: absolute;
      top: 20%;
      left: 0;
      width: 3px;
      height: 60%;
      background: var(--col_main);
}

/*case_cms_point
---------------------------------------------------*/
.case_cms_point_box {
      position: relative;
      background: var(--col_main);
      box-sizing: border-box;
      padding: 1.5em;
}

.case_cms_point_box_inner {
      background: #fff;
}

@media screen and (max-width: 680px) {
      .case_cms_point_box {
            padding: 1.0em;
      }
}

/*case_cms_point_title*/
.case_cms_point_title {
      position: absolute;
      top: -1em;
      left: 50%;
      transform: translate(-50%, -0%);
      width: 100%;
      text-align: center;
}

.case_cms_point_title>* {
      display: inline-block;
      background: var(--col_main);
      color: #fff;
      font-weight: bold;
      text-align: center;
      padding: .5em 1em;
      /*	border-radius: 3em;*/
}

@media screen and (max-width: 680px) {
      .case_cms_point_title {
            font-size: 1.6rem;
            width: 90%;
      }
}

/*case_cms_point_list*/
.case_cms_point_list {
      padding: 3em 0 1em 0;
      width: 95%;
      margin: auto;
}

.case_cms_point_list>li:first-child {
      border-top: dashed 1px var(--col_gray_l2);
}

.case_cms_point_list>li {
      padding: 0.8em 0;
      border-bottom: dashed 1px var(--col_gray_l2);
      display: flex;
      align-items: flex-start;
      gap: 0 1.5em;
}

.case_cms_point_list_title {
      width: 10em;
      background: var(--col_main);
      color: #fff;
      font-weight: bold;
      text-align: center;
      padding: 0.2em 1em;
      border-radius: 3em;
}

.case_cms_point_list>li .text_box {
      width: calc(100% -10em);
}

@media screen and (max-width: 680px) {
      .case_cms_point_list>li {
            display: block;
            padding: 1em 0;
      }

      .case_cms_point_list_title {
            width: auto;
            margin-bottom: 0.5em;
            border-radius: 3em;
      }

      .case_cms_point_list>li .text_box {
            width: auto;
      }
}

/*case_cms_solution_section*/
.case_cms_solution_section+.case_cms_solution_section {
      padding-top: 5em;
}

@media screen and (max-width: 680px) {
      .case_cms_solution_section+.case_cms_solution_section {
            padding-top: 3em;
      }
}

.case_cms_solution_title {
      display: inline-block;
      background: var(--col_main);
      color: #fff;
      font-weight: bold;
      text-align: center;
      padding: 0.2em 1em;
      /*	border-radius: 3em;*/
      margin-bottom: 1em;
}

.case_cms_solution_title_sub {
      position: relative;
      padding-left: 1.0em;
      margin-bottom: 1em;
}

.case_cms_solution_title_sub:before {
      content: "";
      position: absolute;
      top: 20%;
      left: 0;
      width: 3px;
      height: 60%;
      background: #c50713;
}

@media screen and (max-width: 680px) {
      .case_cms_solution_title {
            font-size: 1.5rem;
      }

      .case_cms_solution_title_sub {
            font-size: 1.6rem;
      }
}

/*case_cms_manager_inner*/
.case_cms_manager_inner {
      background: var(--bg_gray);
      padding: 2em 3em 3em 3em;
}

.case_cms_manager_title {
      margin-bottom: 0.5em;
      font-weight: bold;
}

.case_cms_manager_inner .text_box {
      background: #fff;
      padding: 1.5em;
      line-height: 1.8;
}

@media screen and (max-width: 680px) {
      .case_cms_manager_inner {
            padding: 1em 1.5em 1.5em 1.5em;
      }

      .case_cms_manager_title {
            font-size: 1.6rem;
      }
}

/*case_cms_foot_section
----------------------------------------------------------------*/
.case_cms_foot_section {
      padding: 6em 0 3em 0;
}

@media screen and (max-width: 680px) {
      .case_cms_foot_title {
            font-size: 2.4rem;
      }
}

/*case_cms_editer
----------------------------------------------------------------*/
.case_cms_editer img {
      max-width: 100%;
      margin-top: 1em;
      margin-bottom: 1em;
}

.case_cms_editer a {
      text-decoration: underline;
      color: var(--col_main);
}

/*iframe youtube video*/
.case_cms_editer iframe,
.case_cms_editer .wp-video {
      aspect-ratio: 16/9;
}

.case_cms_editer video {
      width: 100% !important;
      height: auto !important;
}

@media screen and (min-width: 961px),
print {
      .case_cms_editer a:hover {
            text-decoration: none;
      }
}

@media screen and (max-width: 960px) {

      .case_cms_editer iframe,
      .case_cms_editer .wp-video {
            width: 80% !important;
            height: auto !important;
      }
}

@media screen and (max-width: 680px) {

      .case_cms_editer iframe,
      .case_cms_editer .wp-video {
            width: 100% !important;
      }
}

/*iframe youtube video cms_box*/
.cms_box iframe,
.cms_box .wp-video {
      aspect-ratio: 16/9;
}

.cms_box video {
      width: 100% !important;
      height: auto !important;
}

@media screen and (min-width: 961px),
print {
      .cms_box a:hover {
            text-decoration: none;
      }
}

@media screen and (max-width: 960px) {

      .cms_box iframe,
      .cms_box .wp-video {
            width: 80% !important;
            height: auto !important;
      }
}

@media screen and (max-width: 680px) {

      .cms_box iframe,
      .cms_box .wp-video {
            width: 100% !important;
      }
}

/*ul*/
.case_cms_editer ul {
      padding: 1em 0;
}

.case_cms_editer ul>li {
      position: relative;
      padding-left: 1.2em;
      margin-bottom: 0.2em;
}

.case_cms_editer ul>li:before {
      content: "●";
      position: absolute;
      left: 0;
      color: var(--col_main);
      font-size: 0.8em;
      top: 0.1em;
}

/*ol*/
.case_cms_editer ol {
      list-style-type: decimal;
      padding: 1em 0;
}

.case_cms_editer ol>li {
      margin-left: 1.2em;
      margin-bottom: 0.2em;
}

.case_cms_editer figure {
      display: block;
      margin-block-start: 0;
      margin-block-end: 0;
      margin-inline-start: 0;
      margin-inline-end: 0;
}

.case_cms_editer figure.alignright {
      text-align: right;
}

.case_cms_editer figure.aligncenter {
      text-align: center;
}

.case_cms_editer img {
      margin-top: 1em !important;
      margin-bottom: 1em !important;
      max-width: 100%;
      height: auto;
}

.case_cms_editer img.alignright {
      margin: 1em 0 1em auto !important;
      display: inherit;
}

.case_cms_editer img.aligncenter {
      display: inherit;
}

/*okstykle　事例パーツ 
--------------------------------------------------------------------------------------------------------------------------------*/
/*ok_title
-------------------------------------------------------------------*/
.ok_title {
      line-height: 1.5;
      font-size: 1.6em;
      font-weight: bold;
      margin: 0 auto 1em auto;
}

/*@media screen and (max-width: 680px) {
      .ok_title {
            font-size: 1.2em;
      }
}*/
/*ok_tag_area
-------------------------------------------------------------------*/
.ok_tagsns_area {
      display: flex;
      justify-content: space-between;
}

@media screen and (max-width: 680px) {
      .ok_tagsns_area {
            display: block;
      }
}

/*tag_list
-------------------------------------------------------*/
.ok_archive_list .ok_tag_list {
      gap: 0.3em 1%;
      margin-top: 1em;
}

/*ok_tag_list*/
.ok_tag_list {
      display: flex;
      flex-wrap: wrap;
      gap: 1em 1%;
      align-items: center;
}

.ok_list li .ok_tag_list {
      margin-top: 1em;
}

.ok_tagsns_area .ok_tag_list {
      width: calc(100% - 180px);
      margin-bottom: 2em;
}

.ok_tag_list li a {
      border-radius: 2em;
      padding: 0.5em 1.5em;
      background: #F5F5F5;
      text-align: center;
      font-size: 0.75em;
      text-decoration: none;
}

.ok_tag_list li a:hover {
      color: #4d7ab9
}

@media screen and (max-width: 680px) {
      .ok_tag_list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.3em 1%;
            align-items: center;
      }

      .ok_tagsns_area .ok_tag_list {
            width: 100%;
      }

      /*    .ok_tag_list li a {
    font-size: 0.5em
    }*/
}

/*ok_sns_box*/
.ok_sns_box {
      width: 180px;
      font-size: 0.75em;
}

.ok_sns_txt {
      letter-spacing: 1px;
      text-align: center;
      color: #659FD8;
      margin-bottom: 1em;
}

.ok_sns_list {
      display: flex;
      gap: 0 2%;
}

.ok_sns_list li {
      width: 100%;
}

.ok_sns_list li img {
      width: 100%;
      object-fit: contain;
      object-position: center;
      aspect-ratio: 1/1;
      height: 2.6em;
}

.ok_contentsend_sns .ok_sns_box {
      margin: auto 0 auto auto;
}

@media screen and (max-width: 680px) {
      .ok_sns_box {
            margin: auto 0 auto auto;
            /*    font-size: 0.5em;*/
      }
}

/*ok_mv
-------------------------------------------------------------------*/
.ok_mv {
      margin: 1em auto 6em auto;
      border-radius: 0.5em;
      position: relative;
      overflow: hidden;
      background: #9AA8B2;
      padding: 3em 0 7em 0;
      z-index: 0;
}

.ok_mv:before,
.ok_mv:after {
      position: absolute;
      content: "";
}

.ok_mv:before {
      background: url("../images/ok_bg.jpg") no-repeat;
      background-size: cover;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 1;
}

.ok_mv:after {
      background: url("../images/dammy_man.svg") no-repeat;
      background-size: contain;
      aspect-ratio: 152/144;
      width: 14.5rem;
      z-index: 3;
      bottom: 0;
      right: 2em;
}

.ok_mv_w {
      position: relative;
      z-index: 2;
      margin: auto;
      width: 85%;
}

@media screen and (max-width: 960px) {
      .ok_mv_w {
            width: 90%;
      }
}

@media screen and (max-width: 680px) {
      .ok_mv_w {
            width: 92%;
      }

      .ok_mv:after {
            width: 8em;
      }
}

.ok_logo {
      text-align: center;
      margin: auto auto 1.5em auto;
      max-width: 8.1em;
}

.ok_logo img {
      width: 100%;
}

.ok_midashi {
      text-align: center;
      color: #fff;
      font-weight: bold;
      letter-spacing: 1px;
      font-size: 2.5em;
      margin-bottom: 0.7em;
}

@media screen and (max-width: 680px) {
      .ok_midashi {
            font-size: 2.0em;
      }
}

/*ok_mv_inner*/
.ok_mv_inner {
      border-radius: 0.5em;
      padding: 1.5em 1em 2.5em 1em;
      background: #fff;
      position: relative;
      box-shadow: 11px 11px 0px -2px rgba(000, 000, 000, 0.3);
}

/*ok_mv_name*/
.ok_mv_name {
      text-align: center;
}

.ok_mv_name span {
      display: inline-block;
      font-weight: bold;
      font-size: 1.15em;
      position: relative;
      border-radius: 5em;
      color: #9aa8b2;
      z-index: 2;
}

.ok_mv_name span:before {
      content: "";
      background: #9aa8b2;
      height: 5px;
      width: 100%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -0%);
      bottom: -0.4em;
}

.ok_mv_text {
      z-index: 1;
      line-height: 1.5;
      text-align: center;
      font-size: 1.3em;
      font-weight: bold;
      letter-spacing: 1px;
      margin: 1.5em auto auto auto;
}

@media screen and (max-width: 1200px) {
      .ok_mv_text {
            font-size: 1.2em;
      }
}

@media screen and (max-width: 680px) {
      .ok_mv_text {
            font-size: 1.3em;
      }

      .ok_mv_name span:before {
            bottom: -0.7em;
      }
}

@media screen and (max-width: 480px) {
      .ok_mv_text {
            font-size: 0.9em;
      }
}

/*ok_prof
-------------------------------------------------------------------*/
.ok_prof {
      margin: 7em auto 5em auto;
      border: solid 1px var(--col_main);
      border-radius: 0.5em;
      padding: 1em 0 3em 0;
      position: relative;
      z-index: 0;
      background: var(--bg_gray_l);
}

.ok_prof_title {
      position: relative;
      transform: translateY(-2.5em) translateX(1.5em);
      height: 100%;
}

.ok_prof_title span {
      display: inline-block;
      font-weight: bold;
      font-size: 1.3em;
      position: relative;
      border-radius: 5em;
      z-index: 2;
      background: var(--col_main);
      color: #fff;
      padding: 0.3em 1.0em;
}

.ok_prof_text_box {
      width: 90%;
      margin: auto;
}

.ok_prof_name {
      font-size: 1.2em;
      font-weight: bold;
      margin-top: -1em;
      margin-bottom: 1em;
}

.ok_prof_text {
      margin-bottom: 1em;
      padding-bottom: 1.5em;
}

@media screen and (max-width: 680px) {
      .ok_prof {
            padding: 0 0 1em 0;
      }
}

/*ok_prof_list*/
.ok_prof_list {
      width: 90%;
      margin: auto;
}

.ok_prof_list li {
      display: flex;
      align-items: flex-start;
}

.ok_prof_list li+li {
      margin-top: 0.5em;
}

.ok_prof_list_title {
      width: 6em;
      text-align: center;
      padding: 0.2em 1em;
      background: var(--col_main);
      color: #fff;
      letter-spacing: 1px;
      text-align: center;
      border-radius: 10em;
      font-weight: bold;
}

.ok_prof_list .ok_prof_text_box {
      margin: auto;
      width: calc(100% - 6em);
      padding: 0 0 0 1em;
}

@media screen and (max-width: 680px) {
      .ok_prof_list {
            width: 95%;
      }
}

/*lead_area
-------------------------------------------------------------------*/
.ok_lead_area {
      margin: 3em auto;
      /*      font-size: 1.15em;*/
}

.lead_area_title {
      letter-spacing: 1px;
      line-height: 1.4;
      /*      font-size: 1.35em;*/
      position: relative;
      font-weight: bold;
      padding-left: 2.5em !important;
      margin: auto auto 1em auto !important;
      padding-bottom: 0.5em;
      color: var(--col_main);
}

.lead_area_title:before,
.lead_area_title:after {
      content: "";
      position: absolute;
}

.lead_area_title:before {
      width: 100%;
      height: 1px;
      left: 0 !important;
      bottom: 0 !important;
      background: var(--col_main);
}

.lead_area_title:after {
      background: url("../../shared/images/case/ico_logo.svg") no-repeat;
      aspect-ratio: 1/1;
      height: 2.2em;
      left: 0 !important;
      top: -0.5em !important;
}

/*マーカーカラー
.lead_area_title .marker {
    background: linear-gradient(transparent 80%, #FEF100 20%);
}
*/
.col_yellow {
      color: #d3b694;
}

/*ok_worries_area
-------------------------------------------------------------------*/
.ok_worries_area {
      margin: 7em auto 3em auto;
      border-radius: 0.5em;
      padding: 1em 0 3em 0;
      position: relative;
      z-index: 0;
      background: var(--col_main);
}

.ok_worries_title {
      position: relative;
      transform: translateY(-2.5em) translateX(1.5em);
      height: 100%;
}

.ok_worries_title>span {
      display: inline-block;
      font-weight: bold;
      font-size: 1.3em;
      position: relative;
      border-radius: 5em;
      z-index: 2;
      background: var(--col_sub);
      color: #fff;
      padding: 0.3em 1.0em;
}

.ok_worries_inner {
      display: flex;
      justify-content: space-between;
      gap: 0 5%;
      width: 90%;
      margin: auto;
      align-items: flex-start;
}

.ok_worries_inner .text_box {
      width: 100%;
      border-radius: 1em;
      position: relative;
      padding: 1.5em 2.5em;
      /*      font-size: 1.15em;*/
      line-height: 1.8;
      background: #fff;
}

.ok_worries_inner .text_box:before {
      content: "";
      /* background: url("../images/ok_mv_name_gray.svg") no-repeat; */
      background-size: contain;
      aspect-ratio: 31/21;
      width: 1.87em;
      position: absolute;
      left: -1.2em;
      top: 50%;
      transform: translate(-0%, -50%) rotate(90deg);
}

.ok_worries_inner .img {
      width: 22em;
      font-size: 0.9rem;
      text-align: center;
      margin: auto;
      overflow: hidden;
      color: #fff;;
}

.ok_worries_inner .img .img_ci {
      overflow: hidden;
      /*   background: #fff;*/
      display: block;
      margin: 0 auto 1em auto;
      position: relative;
}

.ok_worries_inner .img .img_ci,
.ok_worries_inner .img_ci img {
      aspect-ratio: 1;
      width: 100%;
}

.ok_worries_inner .img_ci img {
      width: 100%;
      object-fit: contain;
      object-position: center;
}

@media screen and (max-width: 680px) {

      .ok_worries_inner .img .img_ci,
      .ok_worries_inner .img_ci img {
            /*     height: 10em;*/
      }

      .ok_worries_inner {
            display: block;
      }

      .ok_worries_inner .img {
            width: auto;
            text-align: center;
            margin: auto;
            margin-bottom: 1.5em;
      }

      .ok_worries_inner .img .img_ci {
            text-align: center;
            margin: auto auto 0.5em auto;
      }

      .ok_worries_inner .img .img_ci,
      .ok_worries_inner .img_ci img {
            width: 13em;
      }

      .ok_worries_inner .text_box {
            width: auto;
            padding: 1.5em 1.0em 1.0em 1.0em;
      }

      .ok_worries_inner .text_box {
            font-size: 1.1em;
      }

      .ok_worries_inner .text_box:before {
            content: "";
            background: url(../images/ok_mv_name_ff.svg) no-repeat;
            background-size: contain;
            aspect-ratio: 31 / 21;
            width: 1.87em;
            position: absolute;
            left: 48%;
            top: -1.2em;
            transform: translate(-50%, -0%) rotate(-180deg);
      }
}

/*ok_subimg_area
------------------------------------------------------------------*/
.ok_subimg_area {
      padding: 3em 0;
}

.ok_subimg_area img {
      width: 100%;
      border-radius: 0.3em;
}

/*ok_point_area
-------------------------------------------------------------------*/
.ok_point_area {
      margin: 6em auto 5em auto;
      border: solid 1px var(--col_main);
      background: var(--bg_gray_l);
      border-radius: 0.5em;
      padding: 0em 0 0em 0;
      position: relative;
      z-index: 0;
}

.ok_point_title {
      text-align: center;
      position: relative;
      transform: translateY(-2em);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
}

.ok_point_title>span {
      display: inline-block;
      font-weight: bold;
      font-size: 1.3em;
      position: relative;
      border-radius: 5em;
      z-index: 2;
      background: var(--col_main);
      color: #fff;
      padding: 0.3em 1.0em;
}

@media screen and (max-width: 1200px) {
      .ok_point_title>span {
            min-width: inherit;
            max-width: 90%;
            margin: auto;
      }
}

.ok_point_inner {
      width: 90%;
      margin: auto;
      padding: 0 0 1.5em 0;
}

@media screen and (max-width: 1200px) {
      .ok_point_inner {
            width: 90%;
            padding: 1em 1em;
      }
}

.ok_point_list {
      display: flex;
      flex-wrap: wrap;
}

.ok_point_list>li {
      width: calc((100% /2) - (1em));
      /*      font-size: 1.6rem;*/
      padding: 1em 1em 1em 0;
}

.ok_point_list>li:nth-child(2n) {
      border-right: none;
      padding: 1em 0 1em 1em;
}

.ok_point_list>li:nth-last-child(-n+2) {
      border-bottom: none !important;
}

/*.ok_point_list > li:first-child {
    border-top: dashed 1px #CCCCCC;
}*/
.ok_point_list_title {
      background: var(--col_yellow);
      font-weight: bold;
      text-align: center;
      border-radius: 0.3em;
      padding: 0.3em 0;
}

.ok_point_inner .text_box {
      margin-top: 0.5em;
}

@media screen and (max-width: 960px) {
      .ok_point_list {
            display: block;
      }

      .ok_point_list>li {
            width: auto;
            padding: 1em 0 1em 0;
            border-right: none;
      }

      .ok_point_list>li:nth-child(2n) {
            border-right: none;
            padding: 1em 0 1em 0;
      }

/*       .ok_point_list>li:nth-last-child(-n+2) {
            border-bottom: dashed 1px #222222 !important;
      } */

      .ok_point_list>li:last-child {
            border-bottom: none !important;
      }

      .ok_point_list_title {
            padding: 0.3em 1em;
            margin-bottom: 0.5em;
      }
}
@media screen and (max-width: 480px) {
   .ok_point_inner {
            padding: 0em 1em 1em 1em;
      }

}
@media screen and (max-width: 480px) {
      .ok_point_list>li {
            /*        font-size: 1.4rem;*/
      }
}

/*ok_point_img*/
.ok_point_img img {
      width: 100%;
}

/*ok_point_answer_area
-------------------------------------------------------------------*/
.ok_point_answer_area {
      margin: 5em auto;
}

.ok_point_answer+.ok_point_answer {
      margin-top: 4em;
}

/*ok_point_answer_title*/
.ok_point_answer_title {
      background: var(--col_yellow);
      font-weight: bold;
      border-radius: 0.3em;
      padding: 0.3em 0.5em 0.3em 0.8em;
      margin-bottom: 2.5em;
}

@media screen and (max-width: 680px) {
      .ok_point_answer_title {
            margin-bottom: 1.5em;
      }
}

/*ok_point_answer_subtitle*/
.ok_point_answer_subtitle {
      letter-spacing: 1px;
      line-height: 1.4;
      font-size: 1.35em;
      position: relative;
      font-weight: bold;
      padding-left: 2.5em !important;
      margin: auto auto 1em auto !important;
      padding-bottom: 0.5em;
      color: var(--col_main);
}

.ok_point_answer_subtitle:before,
.ok_point_answer_subtitle:after {
      content: "";
      position: absolute;
}

.ok_point_answer_subtitle:before {
      width: 100%;
      height: 1px;
      left: 0;
      bottom: 0;
      background: var(--col_main);
}

.ok_point_answer_subtitle:after {
      background: url("../../shared/images/case/ico_logo.svg") no-repeat;
      aspect-ratio: 1/1;
      height: 2.2em;
      left: 0 !important;
      top: -0.5em !important;
}

/*ok_cv_area
-------------------------------------------------------------------*/
.ok_cv_area {
      width: 100%;
      margin: 4em auto;
      background: url("../images/case/cv_case_bg.jpg") no-repeat;
      background-size: cover;
      border-radius: 0.5em;
      padding: 3em 0;
}

.ok_cv_text_box {
      max-width: 90%;
      margin: auto;
      color: #fff;
}

.ok_cv_title {
      font-size: 1em;
      font-family: 'Poppins', sans-serif;
      letter-spacing: 0.26em;
}

.ok_cv_text {
      font-size: 1.7em;
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 300;
      letter-spacing: 0.05em;
      white-space: nowrap;
      margin-bottom: 1em
}

.ok_cv_area .link .btn {
      background-color: var(--col_sub);
}

.ok_cv_area .link .btn:hover {
      background-color: #1e282d;
}

/*ok_parts
-------------------------------------------------------------------*/
.ok_parts ol li:before {
      content: counter(number)"." !important;
      background: transparent !important;
      color: #000 !important;
      top: 0.5em !important;
      /*      font-size: 1em !important*/
      ;
      -webkit-transform: translateY(0%) !important;
      transform: translateY(0%) !important;
}

.blog_detail .main_area .ok_parts ol {
      padding: 0 !important;
}

.ok_parts a {
      text-decoration: underline !important;
}

.ok_parts a:hover {
      text-decoration: none !important;
}

/*kutsu_link_area
-------------------------------------------------------------------*/
/* .kutsu_link_area {
      margin: 8em auto 8em auto;
      background: #9AA8B2 url("../images/kutsu_logo.svg") no-repeat;
      background-position: center bottom -0.5em;
      background-size: 105%;
      border-radius: 0.5em;
      padding: 1em 0 3em 0;
}
.kutsu_link_title {
      margin: auto;
      text-align: center;
      transform: translateY(-2.5em);
}
.kutsu_link_title > span {
      background: #659FD8;
      display: inline-block;
      padding: 0.5em 1em;
      min-width: 15em;
      color: #fff;
      font-weight: bold;
      font-size: 1.15em;
      border-radius: 5em;
      letter-spacing: 1px;
}
.kutsu_link_inner {
      width: 88%;
      margin: auto;
}
.kutsu_link_inner .img {
      overflow: hidden;
      border-radius: 1rem;
}
.kutsu_link_inner .text_box {
      font-size: 1.15em;
      text-align: center;
      padding: 2.5em 0 0 0;
      color: #fff;
}
.kutsu_link_inner .text_box .btn a {
      box-shadow: 0px 0px 17px -2px #777777;
}
@media screen and (max-width: 960px) {
      .kutsu_link_area {
            margin: 4em auto 4em auto;
      }
}
@media screen and (max-width: 480px) {
      .kutsu_link_inner .text_box .btn a {
            padding: 10px 2em;
      }
} */
/*ok_value_area
-------------------------------------------------------------------*/
.ok_value_area {
      margin: 5em auto;
      padding: 3em;
      border-radius: 0.5em;
      background: var(--bg_gray_l);
}

@media screen and (max-width: 960px) {
      .ok_value_area {
            margin: 2em auto;
            padding: 3em 1.5em;
      }
}

.ok_value_title_flex {
      display: flex;
      gap: 0 3%;
      align-items: center;
      margin-bottom: 1em;
}

.ok_value_title_flex .img {
      width: calc(100% - 6.1em);
}

.ok_value_title_flex .img {
      text-align: center;
      overflow: hidden;
      display: block;
      position: relative;
}

.ok_value_title_flex .img:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      /* background: url(../images/thum_maru_gray.svg) no-repeat; */
      width: 100%;
      aspect-ratio: 1 / 1;
}

.ok_value_title_flex .img,
.ok_value_title_flex .img img {
      width: 10em;
      aspect-ratio: 1/1;
}

.ok_value_title_flex .img img {
      width: 100%;
      object-fit: cover;
      object-position: center;
}

@media screen and (max-width: 680px) {
      .ok_value_title_flex {
            display: block;
      }

      .ok_value_title_flex .img {
            width: 30%;
            margin: auto auto 2em auto;
      }
}

/*ok_value_lead*/
.ok_value_lead {
      letter-spacing: 1px;
      padding: 1em 0;
}

/*ok_value_ff*/
.ok_value_ff {
      background: #fff;
      border-radius: 0.5rem;
      padding: 0.8em 1.8em 1.8em 1.8em;
      /*      font-size: 1.6rem;*/
}

.ok_value_ff_bold {
      /*    font-size: 1.8rem;*/
      font-weight: bold;
      margin: 1em auto 1em 0;
}

.ok_value_subtitle {
      background: var(--col_main);
      color: #fff;
      font-weight: bold;
      text-align: center;
      border-radius: 10em;
      padding: 0.3em 1em;
      min-width: 10em;
      display: inline-block;
      margin-bottom: 1em;
}

/*ok_value_title*/
.ok_value_title {
      font-size: 1.2em;
      font-weight: bold;
      color: var(--col_main);
}

@media screen and (max-width: 680px) {
      .ok_value_title {
            /*   font-size: 2.2rem;*/
      }

      .ok_value_ff {
            padding: 0.8em 1.5em 1.5em 1.5em;
      }
}

@media screen and (max-width: 480px) {
      .ok_value_title {
            /*   font-size: 1.8rem;*/
      }

      .ok_value_ff {
            /*  font-size: 1.4rem;*/
      }
}

/*ok_author_area
-------------------------------------------------------------------*/
.ok_author_area {
      margin: 5em auto;
      padding: 2em 3em;
      border-radius: 0.5em;
      background: var(--bg_gray_l);
}

@media screen and (max-width: 960px) {
      .ok_author_area {
            margin: 1em auto;
            padding: 2em;
      }
}

.ok_author_title {
      position: relative;
      z-index: 1;
}

.ok_author_title span {
      padding: 0.8em 1.5em 0.8em 2em;
      display: inline-block;
      z-index: 2;
      position: relative;
      font-size: 1.3em;
      letter-spacing: 1px;
      background: var(--bg_gray_l);
      color: var(--col_main);
      font-weight: bold;
}

.ok_author_title:before,
.ok_author_title:after {
      content: "";
      position: absolute;
      left: 0;
}

.ok_author_title:before {
      height: 1px;
      background: var(--col_main);
      z-index: 0;
      width: calc(100% - 2em);
      top: 50%;
      left: 2em;
      transform: translate(-0%, -50%);
}

.ok_author_title:after {
      background: url("../../shared/images/case/ico_pen.svg") no-repeat;
      background-size: contain;
      aspect-ratio: 26/34;
      width: 1.7em;
      z-index: 3;
      top: 48%;
      transform: translate(-0%, -50%);
}

/*ok_author_flex*/
.ok_author_flex {
      display: flex;
      align-items: flex-start;
      gap: 5%;
      margin-top: 1em;
}

.ok_author_flex .img {
      width: 14.5rem;
      position: relative;
      text-align: center;
      overflow: hidden;
      display: block;
}

.ok_author_flex .img:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      /* background: url(../images/thum_maru_gray.svg) no-repeat; */
      width: 100%;
      aspect-ratio: 1 / 1;
}

.ok_author_flex .img,
.ok_author_flex .img img {
      width: 9.8em;
      aspect-ratio: 1/1;
}

.ok_author_flex .img img {
      width: 99%;
      object-fit: cover;
      object-position: center;
}

.ok_author_flex .text_box {
      width: calc(100% - 10em);
}

/*ok_author_flex_title*/
.ok_author_flex_title {
      font-size: 1.2em;
      font-weight: bold;
      letter-spacing: 1px;
}

.ok_author_flex_text {
      color: #659fd8;
}

@media screen and (max-width: 680px) {
      .ok_author_area {
            padding: 1.5em;
      }

      .ok_author_flex {
            display: block;
      }

      .ok_author_flex .img {
            margin: auto auto 1em auto;
      }

      .ok_author_flex .text_box {
            width: auto;
      }

      .ok_author_title span {
            padding: 0.5em 1em 0.5em 1.5em;
      }

      .ok_author_title:after {
            width: 2.0rem;
      }
}

/*ok_list
-------------------------------------------------------------------*/
/*ok_slider
---------------------------------*/
.ok_list.ok_slider li {
      /*display: inherit !important;*/
      margin: 0 10px;
      text-align: left;
}

.ok_list.ok_slider li .ok_tag_list li {
      margin: auto 0 !important;
}

.ok_list.ok_slider li img {
      width: 100%;
}

/*矢印*/
.ok_slider .slick-prev:before,
.ok_slider .slick-next:before {
      background: url("../images/ico_arrow.svg") no-repeat;
      color: transparent;
      font-size: 15px;
      opacity: 1 !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

.ok_slider .slick-prev:before {
      left: 47%;
      transform: translate(-50%, -50%) scale(-1, 1) !important;
}

.ok_slider .slick-next:before {
      left: 53%;
}

.ok_slider .slick-prev,
.ok_slider .slick-next {
      background: var(--col_main);
      border: 2px solid #fff;
      border-radius: 300px;
      height: 50px !important;
      aspect-ratio: 1/1;
      width: auto !important;
      transition: all 0.15s ease;
      top: 40%;
      position: absolute;
      transform: translate(-0%, -50%);
      z-index: 1;
}

.ok_slider .slick-prev {
      left: -27px !important;
}

.ok_slider .slick-next {
      right: -30px !important;
}

.ok_slider .slick-prev:hover,
.ok_slider .slick-next:hover,
.ok_slider .slick-prev:active,
.ok_slider .slick-next:active,
.ok_slider .slick-prev:focus,
.ok_slider .slick-next:focus {
      background: #4d7ab9;
}

.ok_slider .slick-prev:after,
.ok_slider .slick-next:after {
      top: calc(50% - 7px);
      margin-top: 0;
      width: 7px;
      height: 7px;
      border-top: 2px solid #4d7ab9;
      border-right: 2px solid #4d7ab9;
      -webkit-transform: rotate(-136deg) translate(-0%, -50%);
      transform: rotate(-136deg) translate(-0%, -50%);
      right: auto !important;
      left: 23px;
}

.ok_slider .slick-next:after {
      top: 50%;
      -webkit-transform: rotate(45deg) translate(-0%, -50%);
      transform: rotate(45deg) translate(-0%, -50%);
      left: auto;
      right: 23px !important;
}

.ok_slider .slick-prev:hover:after,
.ok_slider .slick-next:hover:after,
.ok_slider .slick-prev:active:after,
.ok_slider .slick-next:active:after,
.ok_slider .slick-prev:focus:after,
.ok_slider .slick-next:focus:after {
      border-top: 2px solid #fff !important;
      border-right: 2px solid #fff !important;
}

@media screen and (max-width: 1260px) {
      .ok_slider .slick-prev {
            left: -0px !important;
      }

      .ok_slider .slick-next {
            right: -0px !important;
      }
}

@media screen and (max-width: 960px) {

      .ok_slider .slick-prev,
      .ok_slider .slick-next {
            height: 30px !important;
      }

      .ok_slider .slick-prev:before,
      .ok_slider .slick-next:before {
            font-size: 10px;
      }
}

/*ok_archive_list
---------------------------------*/
.ok_list.ok_archive_list {
      flex-wrap: wrap !important;
      gap: 2em 5% !important;
      padding-bottom: 3em;
}

.ok_list.ok_archive_list>li {
      width: 30%;
}

@media screen and (max-width: 680px) {
      .ok_list.ok_archive_list {
            display: block;
            width: auto;
      }

      .ok_list.ok_archive_list>li {
            width: 100%;
            margin-bottom: 3em;
      }
}

/*ok_list
---------------------------------*/
.ok_list.one_slide {
      display: flex;
      gap: 3%;
}

.ok_list.one_slide>li {
      width: 33%;
}

@media screen and (max-width: 680px) {
      .ok_list.one_slide {
            width: 80%;
            margin: auto;
      }

      .ok_list.one_slide>li {
            width: 100%;
      }

      .ok_list.ok_slider {
            width: auto;
            margin: auto;
      }

      .ok_list.ok_slider.one_slide>li {
            width: 100%;
      }
}

/*.ok_list a {
      display: block;
}
.ok_list a p img {
      width: 100%;
      overflow: hidden;
      border-radius: 0.5em;
      aspect-ratio: 260/200;
      object-fit: cover;
      object-position: center;
}*/
.com_date {
      font-weight: bold;
      margin: 1em 0;
}

.ok_list .title {
      text-decoration: underline;
}

.ok_list .title:hover {
      text-decoration: none;
}

/*ok_other_bottom
-------------------------------------------------------------------*/
.ok_other_bottom {
      padding: 0 2em;
      margin-top: 10em;
}

.ok_other_bottom>* {
      margin-bottom: 6em;
}

.ok_other_bottom_title {
      letter-spacing: 1px;
      line-height: 1.4;
      /*      font-size: 1.35em;*/
      position: relative;
      font-weight: bold;
      padding-left: 2.5em !important;
      margin: auto auto 1em auto !important;
      padding-bottom: 0.5em;
      color: var(--col_main);
}

.ok_other_bottom_title:before,
.ok_other_bottom_title:after {
      content: "";
      position: absolute;
}

.ok_other_bottom_title:before {
      width: 100%;
      height: 1px;
      left: 0 !important;
      bottom: 0 !important;
      background: var(--col_main);
}

.ok_other_bottom_title:after {
      background: url("../../shared/images/case/ico_logo.svg") no-repeat;
      aspect-ratio: 1/1;
      height: 2.2em;
      left: 0 !important;
      top: -0.5em !important;
}

@media screen and (max-width: 680px) {
      .ok_other_bottom {
            padding: 0 0em;
            margin-top: 5em;
      }
}

.ok_other_bottom .btn {
      display: inline-block;
}

/*ok_other_bottom_title*/
.ok_other_bottom_title {
      text-align: left;
      margin-bottom: 1em;
      font-size: 1.4em;
      color: var(--col_main);
      font-weight: bold;
}

/*btn*/
.btn.btn_yellow {
      background: var(--col_sub);
}

.btn.btn_yellow:hover {
      background-color: #1e282d;
}

.tac .btn {
      margin: auto;
}

.btn_inline {
      display: inline-block !important;
}

.btn_auto {
      width: auto;
}

/*よくある質問
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*検索*/
.faq_search_title {
      font-size: 1.4em;
      margin-bottom: 0.5em;
}

.faq_search_cont {
      color: #fff;
      padding: 1.5em 2.5em 2.5em 2.5em;
      background: var(--col_main);
      border-radius: 0.5em;
}

.search_box_input {
      background: var(--base-color2);
      border: none;
      margin: 0;
      top: 100%;
      z-index: 1000;
}

.search_box_input>div>form {
      display: flex;
      /*white-space: nowrap;*/
      gap: 0 1em;
}

.search_box_field {
      width: calc(100% - (11em));
      padding: 1em;
}

.search_box_btn {
      display: block;
      width: 10em;
      border: none;
      cursor: pointer;
}

.search_box_btn button[type=submit] {
      border: none;
      background: var(--col_sub);
      outline: none;
      color: #fff;
      height: 100%;
      font-size: 1em;
      width: 100%;
      cursor: pointer;
}

.search_box_btn span {
      display: inline-block;
      width: 1.5em;
      margin-left: 0.5em;
}

.search_box_btn img {
      width: 100%;
}

@media screen and (max-width: 680px) {
      .faq_search_cont {
            padding: 1.0em 1em 2em 1em;
      }

      .search_box_input>div>form {
            gap: 0 0;
      }

      .search_box_field {
            width: calc(100% - (7em));
            padding: 1em 0.5em;
      }

      .search_box_btn {
            width: 7em;
      }
}

/*よくある質問本体 カラー変更
------------------------------------------------------------------------------------------------------*/
.gray_faq {
      --qa_col: #cccccc;
}

.gray_faq.faq_dl_area dl {
      border: 1px var(--qa_col) solid;
}

.gray_faq.faq_dl_area dd {
      border-top: 1px var(--qa_col) solid;
      background: var(--bg_gray_l);
}

.gray_faq.faq_dl_area dt .dt_inner div,
.gray_faq.faq_dl_area dd .dt_inner div {
      border-left: 1px var(--qa_col) solid;
      border-right: 1px var(--qa_col) solid;
}

/*よくある質問　タブ
------------------------------------------------------------------------------------------------------*/
.cate_tab_box {
      display: flex;
      justify-content: center;
      gap: 0 0.5em;
      align-items: flex-end;
}

@media screen and (max-width: 680px) {
      .cate_tab_box {
            gap: 0.8em 2%;
            flex-wrap: wrap;
            align-items: normal;
      }
}

.cate_tab_box>* {
      font-size: 1.0em;
      position: relative;
      width: 100%;
      box-sizing: border-box;
      max-width: calc(100% / 3);
      background: var(--bg_gray_l);
      border-left: solid 1px #cccccc;
      border-top: solid 1px #cccccc;
      border-right: solid 1px #cccccc;
      border-radius: 0.4em 0.4em 0 0;
      padding: 0.8em 1em 0.8em 1em;
      padding-right: 3em;
      cursor: pointer;
      font-feature-settings: "palt";
      height: 4em;
      /*    transition: all 0.15s ease;*/
}

@media screen and (max-width: 1360px) {
      .cate_tab_box>* {
            font-size: 1.2em;
      }
}

@media screen and (max-width: 1360px) {
      .cate_tab_box>* {
            font-size: 0.9em;
      }
}

.cate_tab_box>*:before,
.cate_tab_box>*:after {
      position: absolute;
      content: "";
}

.cate_tab_box>*:before {
      background: var(--col_main);
      border: solid 1px var(--col_main);
      aspect-ratio: 1;
      width: 1.5em;
      border-radius: 5em;
      top: 1.0em;
      right: 1em;
}

.cate_tab_box>*:after {
      background: url("../images/ico_arrow.svg") no-repeat;
      aspect-ratio: 1;
      width: 0.8em;
      top: 1.6em;
      right: 1.4em;
      transform: rotate(90deg);
}

/*is-active */
.cate_tab_box>*.is-active {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: var(--col_main);
      height: 4.5em;
      color: #fff;
}

.cate_tab_box>*.is-active:before {
      border: solid 1px #fff;
      top: 1.5em;
}

.cate_tab_box>*.is-active:after {
      transform: rotate(-90deg);
      top: 1.8em;
}

@media screen and (max-width: 680px) {
      .cate_tab_box {
            padding-bottom: 1em;
      }

      .cate_tab_box>* {
            font-size: 0.9em;
            width: 49%;
            max-width: none;
            border-bottom: solid 1px #cccccc;
            border-radius: 0.4em 0.4em 0.4em 0.4em;
            height: auto;
      }

      /*is-active */
      .cate_tab_box>*.is-active {
            height: auto;
      }

      .cate_tab_box>*:before {
            border: solid 1px #fff;
            top: 1em;
      }

      .cate_tab_box>*:after {
            top: 1.5em;
      }

      .cate_tab_box>*.is-active:before {
            top: 1em;
      }

      .cate_tab_box>*.is-active:after {
            top: 1.2em;
      }
}

.panel_box {
      padding: 5em 0;
      background: var(--col_main);
}

.panel_box .panel {
      padding: 3em;
      border-radius: 0.5em;
      background: #fff;
}

.panel_inner+.panel_inner {
      margin-top: 3em;
}

@media screen and (max-width: 680px) {
      .panel_box {
            padding: 2em 0;
      }

      .panel_box .panel {
            padding: 2em 1em;
      }
}

/*dt_inner*/
.dt_inner {
      cursor: pointer;
}

/*見出し*/
.case_cms_editer h2 {
      font-size: 1.3em;
      font-weight: bold;
      padding:0.2em 0.5em;
      background: var(--col_yellow);
      margin-bottom: 1.0em;
        margin-top: 2em;
}

.case_cms_editer h3 {
        font-size: 1.3em;
      font-weight: bold;
      border-bottom: solid 1px var(--col_main);
      padding-bottom: 0.2em;
      margin-top: 2em;
      margin-bottom: 1.0em;
   
}

.case_cms_editer h4 {
         padding-left: 0.5em;
     font-size: 1.2em;
      font-weight: bold;
        margin-top: 2em;
      margin-bottom: 1.em;
      border-left: solid 2px var(--col_main);
}

.case_cms_editer h5 {
        margin-top: 2em;
         font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 1.0em;
}


/*iframe youtube video*/
.case_cms_editer iframe,
.case_cms_editer .wp-video {
      aspect-ratio: 16/9;
      width: 100%;
      height: auto;
      margin: 1em auto;
}

.case_cms_editer video {
      width: 100% !important;
      height: auto !important;
}

@media screen and (min-width: 961px),
print {
      .case_cms_editer a:hover {
            text-decoration: none;
      }
}

@media screen and (max-width: 960px) {

      .case_cms_editer iframe,
      .case_cms_editer .wp-video {
            width: 80% !important;
            height: auto !important;
      }
}

@media screen and (max-width: 680px) {

      .case_cms_editer iframe,
      .case_cms_editer .wp-video {
            width: 100% !important;
      }
}

/*iframe youtube video cms_box*/
.cms_box iframe,
.cms_box .wp-video {
      aspect-ratio: 16/9;
}

.cms_box video {
      width: 100% !important;
      height: auto !important;
}

@media screen and (min-width: 961px),
print {
      .cms_box a:hover {
            text-decoration: none;
      }
}

@media screen and (max-width: 960px) {

      .cms_box iframe,
      .cms_box .wp-video {
            width: 80% !important;
            height: auto !important;
      }
}

@media screen and (max-width: 680px) {

      .cms_box iframe,
      .cms_box .wp-video {
            width: 100% !important;
      }
}
/* 事例下のロゴ群 sectonタグじゃないとき用*/
.case_logo_area.company-area{
	padding-top: 30px;
}

.case_logo_area.company-area .inner {
	width: 100%;
	max-width: 1054px;
	margin: 70px auto 75px;
	padding: 0 27px 0 27px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.case_logo_area.company-area .inner h2 {
	font-size: 32px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	letter-spacing: -0.05em;
	position: relative;
	display: inline-block;
	margin-left: 30px;
}

.case_logo_area.company-area .inner h2 span{
	color: #cb9b0f;
	font-size: 50px;
	display: inline-block;
	margin: 2px;
}

.case_logo_area.company-area .inner h2::before {
	content: "";
	background: url(../../../../images/logo/garland_left.svg);
	width: 20px;
	height: 50px;
	background-size: contain;
	position: absolute;
	left: -30px;
	bottom:15%;
	background-repeat: no-repeat;
}

.case_logo_area.company-area .inner h2::after {
	content: "";
	background: url(../../../../images/logo/garland_left.svg);
	width: 20px;
	height: 50px;
	background-size: contain;
	position: absolute;
	right: -30px;
	bottom: 15%;
	transform: scale(-1, 1);
	background-repeat: no-repeat;
}

.case_logo_area.company-area .inner p{
	margin-left: 30px;
}

.case_logo_area.company-area ul.company-list{
	display: flex;
	flex-wrap: wrap;
	gap: 20px 1%;
	margin-top: 20px;
}

.case_logo_area.company-area ul.company-list li{
	width: 18%;
}

.case_logo_area.company-area ul.company-list li img{
	width: 100%;
}

@media screen and (max-width: 769px){
	.case_logo_area.company-area .inner h2{
		text-align: center;
		line-height: 1.0;
		margin-left: 0px;
		font-size: 26px;
		width: 100%;
	}
	.case_logo_area.company-area .inner h2 span{
		font-size: 42px;
	}
	.case_logo_area.company-area .inner p{
		margin-top: 10px;
		margin-left: 0px;
	}
	.case_logo_area.company-area .inner h2::before {
        left: 2%;
        bottom: 5%;
        width: 30px;
        height: 70px;
    }
    .case_logo_area.company-area .inner h2::after {
        right: 2%;
        bottom: 5%;
        width: 30px;
        height: 70px;
    }
    .case_logo_area.company-area ul.company-list li{
        width: 30%;
    }
}