@charset "utf-8";
/* ========================================================
	cms.css news以外のcms用css
======================================================== */
/*.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 5em;
}
.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_list {
      display: flex;
      flex-wrap: wrap;
      gap: 2em 3%;
}
.case_list > li {
      width: calc((100% / 3) - 2%);
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      overflow: hidden;
}
@media screen and (max-width: 680px) {
      .case_list {
            gap: 1em 2%;
      }
      .case_list > li {
            width: 49%;
      }
}
.case_list .article_item_inner .img {
      flex: 2;
      position: relative;
      aspect-ratio: 4/3;
      overflow: hidden;
}
.case_list .article_item_inner .text_box {
      padding: 1em;
}
.case_list .article_item_inner .img img {
      width: 100%;
      object-fit: cover;
      object-position: center;
      aspect-ratio: 260/183;
      height: auto;
}
.case_list .article_item_inner .text_box .date {
      font-size: 0.8em;
      letter-spacing: 1px;
}
.case_list .article_item_inner_title {
      font-size: 1.0em;
      margin-top: 0.5em;
}
.case_list .article_item_cat {
      color: var(--col_red);
      font-size: 0.8em;
      font-weight: bold;
      padding: 0em 1em;
      border: solid 1px var(--col_red);
      margin-top: 1.5em;
      display: inline-block;
}
@media screen and (max-width: 680px) {}



/*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_red);
      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(--col_red);
}
.case_blog_sidebar .wpp-no-data {
      font-size: 0.9em;
}
/*.case_blog_sidebar .sidebar_section li {
      margin-bottom: 1em;
}*/

.sidebar_title {
      font-size: 1.1em;
}

/*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  > a{
      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.8em;
      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: 1em;
	}
}
/*sidebar_cat_list
------------------------------------------------------------------*/
.sidebar_cat_list {
      font-size: 0.9em;
}
.sidebar_cat_list > li {
	border-bottom: 1px solid var(--col_gray_l);
}
.sidebar_cat_list > li a{
	display: block;
	padding: 0.5em 0;
}
@media screen and (min-width: 91px) ,print{
	.sidebar_cat_list > li a:hover{
		color: var(--col_sub);
		text-decoration: underline;
	}
}
/*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_red);
      color: var(--col_red);
      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_red);
      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_red);
      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_red);
      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_red);
}
/*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_red);
      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_red);
}
/*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_red);
      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%;
}
.case_cms_editer img.alignright {
      margin: 1em 0 1em auto !important;
      display: inherit;
}
.case_cms_editer img.aligncenter {
      display: inherit;
}
/*info info_title 特装車の世界
----------------------------------------------------------------------------------------------------------*/
.info_title {
      font-size: 2.4rem;
      text-align: center;
      margin: auto;
      padding: 0em 0 2em 0;
}
.info_title span {
      display: block;
      font-size: 1.5em;
}
@media screen and (max-width: 680px) {
      .info_title {
            line-height: 1.6;
            font-size: 1.8rem;
      }
}
/*よくある質問
----------------------------------------------------------------------------------------------------------*/
/*faq_anker_list_area*/
.faq_anker_list_area .anker_list {
      justify-content: flex-start;
      display: flex;
      gap: 1em 1em;
      flex-wrap: wrap;
}
.faq_anker_list_area .anker_list > li {
      width: calc((100% / 4) - 0.8em);
}
.faq_anker_list_area .anker_list > li a {
      display: block;
      border-radius: 2em;
      background: var(--bg_gray);
      border: solid 1px var(--bg_gray);
      text-align: center;
      padding: 0.6em 1.5em;
      font-weight: 700;
      min-width: 4.5em;
}
@media screen and (min-width: 961px), print {
      .faq_anker_list_area .anker_list li a:hover, .faq_anker_list_area .anker_list li a.current {
            background: var(--col_main);
            border: solid #fff 1px;
            color: #fff;
      }
}
@media screen and (max-width: 680px) {
      .faq_anker_list_area .anker_list {
            width: 100%;
            gap: 1em 2%;
      }
      .faq_anker_list_area .anker_list > li {
            width: calc((100% / 2) - 1%);
      }
      .faq_anker_list_area .anker_list > li a {
            display: flex;
      }
}
/*一覧用リスト内もっとみる*/
.faq_all_link_flex {
      display: flex;
      justify-content: space-between;
      gap: 0 1em;
}
.faq_all_link_flex > *:first-child {
      width: calc(100% - 7em);
}
.faq_all_link_flex > .faq_all_link {
      width: 6em;
      text-align: center;
}
.faq_all_link a {
      text-decoration: none;
      display: block;
      color: var(--col_main);
      background: #fff;
      font-weight: bold;
      padding: 0.2em 0.5em;
      border: solid 1px var(--col_main);
      font-size: 0.9em;
}
@media screen and (min-width: 961px), print {
      .faq_all_link a:hover {
            background: var(--col_main);
            color: #fff;
      }
}
@media screen and (max-width: 680px) {
      .faq_all_link_flex {
            display: block;
      }
      .faq_all_link_flex > *:first-child {
            width: auto;
      }
      .faq_all_link_flex > .faq_all_link {
            width: auto;
            margin-top: 1em;
      }
      .faq_all_link a {
            display: inline-block;
      }
}