/* ********************************** 固定ページ共通 ********************************** */

.page .contact_ttl_wrapper{
  position: relative;
}

.page .contact_title{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  font-weight: 400;
  width: max-content;
  font-size: 3em;
}

#contact_wrapper .text_box,
#contact_wrapper .page_link_btn2{
  line-height: 1.75em;
}

.arrow_list > li p::before{
  content: "";
  background: url(../images/systems/icon/simple_arrow_icon_orange.svg);
  background-size: contain;
  transform: rotate(0deg);
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.3em;
  display: inline-block;
  vertical-align: -3px;
}

.arrow_list .defective_comment{
  margin-top: 2em;
}

.page_list_ttl::before{
  content: "●";
}

.page_list_ttl{
  margin-bottom: 1em;
  line-height: 1.5em;
}

.page_contents{
  line-height: 1.75em;
}









/* ********************************** 固定ページのパスワード共通（DLページ） ********************************** */
/* ここからパスワードのコンテンツ設定 */
.password-input-wrapper {
  display: flex; /* 横並びにする */
  align-items: baseline;
  gap: 0.2em; /* 要素間のスペースを設定 */
}

/* input要素共通の設定*/
.password-input-wrapper input{
  border: 4px solid var(--assortcolor);
  font-size: 1.1em;
  margin-top: 1em;
  padding: 0.5em 1em;
  border-radius: 0.5em;
}

/* パスワード入力フィールドの設定*/
.password-input-wrapper input[type="password"] {
  padding: 5px; 
  font-size: 16px;
}

/* パスワード入力フィールドの入力中の設定*/
.password-input-wrapper input[type="password"]:focus-visible{
  background-color: var(--hovercolor);
  border: solid 4px var(--maincolor);
}

/* 送信ボタンの設定*/
.password-input-wrapper input[type="submit"] {
  padding: 5px 15px;
  font-size: 16px;
  background-color: var(--maincolor); /* 背景色 */
  color: white; /* 文字色 */
  border: 4px solid var(--hovercolor);
}

/* 送信ボタンのホバー時の設定*/
.password-input-wrapper input[name="Submit"]:hover{
  background-color: var(--pointcolor);
}




















/* ********************************** 新規お取引に関するお問い合わせ ********************************** */
.contact_subtitle{
  display: flex;
  margin: 2em 0 1.2em 0;
  border-bottom: 2px solid var(--assortcolor);
  padding-bottom: 1em;
  line-height: 1.5em;
}

.contact_subtitle::before {
  content: "";
  background: url(../images/systems/icon/information_icon_orange.svg);
  display: inline-block;
  background-size: cover;
  vertical-align: middle;
  width: 1.4em;
  height: 1.4em;
  margin-right: 0.4em;
}

#contact_wrapper .page_link_btn2{
  margin-top: 2.5em;
}

.page .orange_border{
  margin: 2.5em 0;
}

.page .orange_solid_border{
  margin: 2em 0;
  border: 1px solid var(--notecolor); ;
}

.page .contact_list_wrapper{
  display: flex;
  justify-content: space-between; /* 子要素を両端に揃える */
  align-items: stretch;
}

.page .contact_list_wrapper > li{
  width: calc(98% / 2);
}


.page .contact_list_box a{
  display: block;
  padding: 1.4em;
  border: 3px solid var(--assortcolor);
}

.page .contact_list_box a:hover{
  border: 3px solid var(--assortcolor);
  background-color: var(--hovercolor);
}

.page .contact_list_box > li:nth-child(n+2){
  margin-top: 1em;
  text-align: center;
}

.page .contact_list_wrapper li:nth-child(2) .contact_list_box > li:nth-child(n+2){
  text-align: left;
}

.page .contact_list_index{
  display: flex;
  align-items: center;
}

.page .contact_list_index > li:nth-child(1){
  max-width: 70px;
  margin-right: 0.5em;
}

.page .contact_list_wrapper li:nth-child(2) .contact_list_index > li:nth-child(1){
  max-width: 85px;
  margin-right: 0.5em;
}

.page .contact_list_text li:last-of-type{
  margin-top: 0.6em;
}

.page .tel{
  display: inline-block;
}


.page .tel::before{
  content: "";
  background: url(../images/systems/icon/tel_icon.svg);
  float: left;
  vertical-align: -4px;
  width: 0.75em;
  height: 1em;
  margin-right: 0.4em;
}

.page .form_link_btn::before{
  content: "";
  background: url(../images/systems/icon/dot_arrow_icon_gray.svg);
  float: left;
  background-size: cover;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
}




/**************** ここから1つ目のトリガー設定 ****************/
.qa_list .qa_contents{
  margin-bottom: 2em;
}

.qa_list .qa_trigger{
  position: relative;
  margin-bottom: 0.75em;
}

/* 閉じている時 */
.qa_list .qa_trigger::before {
  content: "";
  background: url(../images/systems/icon/dot_arrow_icon.png);
  background-size: contain;
  transform: rotate(90deg);
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.2em;
  display: inline-block;
  vertical-align: text-bottom;
}

/* 開いている時 */
.qa_list .qa_trigger.qa_active::before{
  transform: rotate(0deg);
}

.qa_list .qa_contents > li{
  border: 3px solid var(--assortcolor);
  padding: 1.5em; 
  margin-bottom: 1em;
  line-height: 1.5em;
}


/**************** ここから2つ目のトリガー設定 ****************/
.qa_list .answer{
  display: none;
  margin-bottom: 1em;
}

/* 閉じている時 */
.qa_list .question::before{
  content: "▽ Q：";
}

/* 開いている時 */
.qa_list .question.qa_active::before{
  content: "▷ Q：";
}

.qa_list .question.qa_active {
  margin-bottom: 1em;
}

.qa_answer li{
  line-height: 2em;
  list-style: disc;
  margin-left: 1.5em;

}

.qa_answer li:last-of-type{
  margin-bottom: 1.5em;
}

.qa_trigger,
.question{
  cursor:pointer;
}









/* ********************************** 特定商取引法に基づく表記 ********************************** */
.contact_second_title{
  text-align: center;
  margin: 1.7em 0;
  background-color: var(--assortcolor);
  padding: 1.5em;
}


.tokushoho .contact_second_title p::before,
.buy .contact_second_title p::before{
  content: "";
  background: url(../images/systems/icon/cart_icon_black.svg);
  display: inline-block;
  background-size: cover;
  vertical-align: top;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.4em;
}

.payment_thumbnail_box img{
  border: 2px solid var(--assortcolor);
}

.pay_list_box > ul{
  border: 3px solid var(--notecolor);
  padding: 2.5em;
  margin-bottom: 2.5em;
} 

.page .dot_list li{
  list-style: "・";
  margin-left: 1em;
  line-height: 1.75em;
}

.page .memo_list li{
  list-style: "※";
  margin-left: 1em;
}

.payment_list > li > p{
  margin-bottom: 1em;
  line-height: 1.5em;
}


.payment_list > li > p::before{
  content: "・";
}

.payment_list li{
  margin-bottom: 0.5em;
}

.payment_list li:last-of-type,
.payment_list > li:last-of-type > p{
  margin-bottom: 0;
}

.payment_thumbnail_box li{
  display: inline-block;
  margin: 0 0.75em 0.75em 0;
}

.tokushoho_pay_wrapper > li > ul,
.page_content_wrapper .list_box{
  border: 3px solid var(--notecolor);
  padding: 2.5em;
  margin-bottom: 2.5em;
}

.page_content_wrapper .list_box{
  padding: 2em;
  line-height: 2em;
}









/* ********************************** 個人情報保護方針 ********************************** */
.privacy_policy .contact_second_title p::before,
.use .contact_second_title p::before,
.items .contact_second_title p::before{
  content: "";
  background: url(../images/systems/icon/information_icon_black.svg);
  display: inline-block;
  background-size: cover;
  vertical-align: top;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.4em;
}

.privacy_policy .arrow_list > li{
  border-bottom: 2px solid var(--assortcolor);
  padding-bottom: 2em;
  margin-bottom: 2em;
  line-height: 2em;
}

.privacy_policy .arrow_list > li:last-of-type{
  border-bottom: unset;
  padding-bottom: 0;
  margin-bottom: 0;
}









/* ********************************** 製品に関するお問い合わせ ********************************** */
.items #contact_wrapper .page_link_btn2{
  margin-top: unset;
}









/* ********************************** shop_info_ショップインフォ_当社製品のお取り扱い店舗に関して ********************************** */
.shop_info .contact_second_title p::before{
  content: "";
  background: url(../images/systems/icon/application_icon_shop_black.svg);
  display: inline-block;
  background-size: cover;
  vertical-align: top;
  width: 1.5em;
  height: 1.2em;
  margin-right: 0.4em;
}

.shop_info .not_article{
  margin-top: 2em;
  text-align: center;
}









/* ********************************** shop_info_ショップインフォ_当社製品のお取り扱い店舗に関して ********************************** */
.buy #contact_wrapper .page_link_btn2,
.manual_dl #contact_wrapper .page_link_btn2,
.image_dl #contact_wrapper .page_link_btn2,
.service_promotion_dl #contact_wrapper .page_link_btn2 {
  margin-top: unset;
}

.buy .page_content_wrapper .list_box,
.manual_dl .page_content_wrapper .list_box,
.image_dl .page_content_wrapper .list_box,
.service_promotion_dl .page_content_wrapper .list_box{
  padding: 1em;
  margin: 1em 0;
}









/* ********************************** プロダクト_product_製品の生産・OEMに関して ********************************** */
.product .contact_second_title p::before{
  content: "";
  background: url(../images/systems/icon/product_icon2.svg);
  display: inline-block;
  background-size: cover;
  vertical-align: top;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.4em;
}










/* ********************************** お問い合わせ総合案内ページ ********************************** */

.faq #contact_wrapper{
  text-align: center;
}


.faq .main_ttl{
  margin-bottom: 1em;
}

.faq .second_title{
  margin: 0.8em 0 2em 0;
}

.faq .second_title::before{
  content: "";
  background: url(../images/systems/icon/information_icon_orange.svg);
  display: inline-block;
  background-size: cover;
  vertical-align: top;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.2em;
}


/* ここからタブ機能を使った表示切り替え */
.faq .tab_btn_wrapper{
  position: relative;
}

.faq .tab_btn_wrapper {
  width: 100%;
  position: relative;
}

.faq .tab_btn_wrapper::before,
.faq .tab_btn_wrapper::after{
  content: "";
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  top: 50%;
  left: 0;
  background: url(../images/systems/other/contact_border_decoration.svg);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.faq .tab_btn_wrapper::after{
  left: unset;
  right: -1em;
}

.faq .tab_btn_box::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%; /* 要素の幅に合わせて調整 */
  height: 7px; /* 要素の高さに合わせて調整 */
  background: var(--assortcolor); /* ボーダーの色 */
  transform: translate(-50%, -50%);
  z-index: -1;
}

.faq .tab-menu-btn {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列のグリッドを作成 */
  border: 7px solid var(--assortcolor);
  width: 500px;
  margin: 0 auto 1.5em auto;
  text-align: center;
  border-radius: 999px;
  overflow: hidden;
  background-color: white;
}


.faq .tab-item {
  width: 100%;
  padding: 0.8em;
  cursor: pointer;
}

.faq .tab-item.active,
.faq .tab-item:hover {
  background-color: black;
  color: white;
  border-radius: 999px;
}

.faq .tab-pane {
  display: none;
}

.faq .tab-pane.active {
  display: block;
}

.faq .tab_inner1,
.faq .tab_inner2{
  text-align: left;
}

.faq .third_title{
  text-align: center;
  margin-bottom: 1.5em;
}

.faq #contact_wrapper .page_link_btn2 {
  margin-top: unset;
}
































/* ********************************** ダウンロードページ共通（TablePress設定用） ********************************** */
.page .dataTables_wrapper {
  width: 100%;
  overflow: scroll;
  height: 1600px;
}

.page .tablepress .sorting:hover{
  background-color: var(--pointcolor);
  color: white;
}

.page .tablepress>:where(thead,tfoot)>*>th{
  background-color: var(--notecolor);
}

.page .tablepress>:where(tbody)>.odd>* {
  background-color: unset;
}

.page .tablepress>*+tbody>*>*{
  border-top: 1px solid var(--assortcolor);
}

.page .tablepress>.row-hover>tr:hover>*{
  background-color: unset;
}

.page .tablepress td{
  height: 61px;
  vertical-align: middle;
}

.page .dataTables_filter{
  float: left;
  width: 100%;
  margin-bottom: 1.5em;
}

.page .dataTables_filter label input {
  width: calc(100% - 3em);
  font-size: 1em;
  padding: 0.5em;
  border: solid 3px var(--assortcolor);
  border-radius: 0.5em;
}

.page .dataTables_filter label input:focus-visible{
  background-color: var(--hovercolor);
  border: solid 3px var(--maincolor);
}

.page .dataTables_wrapper .column-1{
  width: 10% !important;
}

.page .dataTables_wrapper .column-3{
  width: 15% !important;
  text-align: center;
}

.page .dataTables_wrapper .column-3 a{
  border: 2px solid var(--maincolor);
  padding: 0.1em 1em;
  border-radius: 0.5em;
}

.page .dataTables_wrapper .column-3 a:hover{
  background-color: var(--maincolor);
  color: white;
}










/* ********************************** 取扱説明書のダウンロード ********************************** */
.manual_dl .contact_subtitle,
.image_dl .contact_subtitle,
.service_promotion_dl .contact_subtitle{
  margin-top: 0;
  margin-bottom: 1em;
  padding-bottom: 1.5em;
}


.manual_dl .contact_subtitle::before {
  content: "";
  background: url(../images/systems/icon/pdf_icon.svg);
  display: inline-block;
  background-size: cover;
  vertical-align: middle;
  width: 1.2em;
  height: 1.3em;
  margin-right: 0.4em;
}









/* ********************************** 製品画像のダウンロード ********************************** */
.image_dl .contact_subtitle::before {
  content: "";
  background: url(../images/systems/icon/photo_icon_orange.svg);
  display: inline-block;
  background-size: cover;
  vertical-align: middle;
  width: 1.5em;
  height: 1.4em;
  margin-right: 0.6em;
}









/* ********************************** 販促ツールのダウンロード ********************************** */
.service_promotion_dl .contact_subtitle::before {
  content: "";
  background: url(../images/systems/icon/date_icon.svg);
  display: inline-block;
  background-size: cover;
  vertical-align: middle;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.6em;
}

.service_promotion_dl .dataTables_wrapper .column-1{
  width: 20% !important;
}









/* ********************************** カタログのダウンロード ********************************** */
.catalog .contact_second_title p::before{
  content: "";
  background: url(../images/systems/icon/book_icon.svg);
  filter: invert(52%) sepia(65%) saturate(1845%) hue-rotate(5deg) brightness(93%) contrast(101%);
  display: inline-block;
  background-size: cover;
  vertical-align: top;
  width: 1.5em;
  height: 1.1em;
  margin-right: 0.4em;
}

.catalog .memo_list,
.catalog .catalog_contents{
  line-height: 1.75em; 
}

.catalog .catalog_link_box{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
}

.catalog .catalog_link_box li a{
  padding: 1em 0;
  background-color: var(--hovercolor);
  display: block;
  text-align: center;
}

.catalog .catalog_link_box li a:hover{
  background-color: var(--maincolor);
  color: white;
}








/* ********************************** お問い合わせフォーム（お問い合わせトップページ） ********************************** */
.page .form_wrapper .main_title{
  border-bottom: 7px solid #0000B1;
  padding-bottom: 0.6em;
}

.page .form_wrapper .main_title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 50%;
  border-bottom: 7px solid #7EC8EE;
}

.page .form_wrapper .list_title {
  padding-bottom: 4em;
}

.page .form_wrapper .page_text_box{
  text-align: center;
}

.page .form_wrapper .contact_illust{
  margin: 2em;
}

.page .form_wrapper .contact_illust img{
  max-width: 170px;
  transform: scale(-1, 1);
}

.page .form_wrapper .text_box{
  line-height: 1.8em;
}

.page .form_wrapper .text_box a{
  color: var(--maincolor);
}

.page .form_wrapper .text_box .warning_text{
  margin-top: 1em;
  border: 3px solid var(--notecolor) ;
  background-color: whitesmoke;
  padding: 2em;
}



.page .form_wrapper .form_content{
  width: 100%;
}

.page .form_wrapper .main_ttl{
  margin-bottom: 1.5em;
}

.page .form_wrapper .form_content .contact_list_box li .ttl{
  margin-bottom: 1em;
  text-align: left;
}

.page .form_wrapper .form_content input,
.page .form_wrapper .form_content select,
.page .form_wrapper .form_content .contact_list_box #note,
.page .form_wrapper .form_content .radio_wrapper,
.page .form_wrapper .form_content .checkbox_wrapper,
.page .form_wrapper .form_content .partner,
.page .form_wrapper .form_content .job_history,
.page .form_wrapper .form_content .appeal{
  width: 100%;
  border: 3px solid var(--notecolor) !important;  /* Safari向けに強制適用 */
  padding: 1em !important;  /* Safari向けに強制適用 */
  outline: none !important;  /* Safariで確実に効くように */
  text-align: left !important;
  color: black !important;
}

.page .form_wrapper .form_content input::placeholder,
.page .form_wrapper .form_content textarea::placeholder{
  color: var(--assortcolor);
}

.page .form_content .contact_list_box > ul{
  overflow-wrap: anywhere;
}


.page .form_content .contact_list_box > li:nth-child(n+2) {
  margin-top: 1.5em;
}





.page .form_wrapper .form_content .radio_wrapper span,
.page .form_wrapper .form_content .checkbox_wrapper span{
  width: fit-content;
  display: inline-block;
  line-height: 2em;
}

.page .form_wrapper .form_content .radio_wrapper span input,
.page .form_wrapper .form_content .checkbox_wrapper span input{
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  vertical-align: middle;
}

/* チェックされたラジオボタンに隣接する .mwform-radio-field-text の装飾を変更 */
.page .form_wrapper .form_content  input[type="radio"]:checked + .mwform-radio-field-text,
.page .form_wrapper .form_content  input[type="checkbox"]:checked + .mwform-checkbox-field-text {
  background-color: var(--maincolor); /* チェックされた時の背景色 */
  color: white;
  padding: 0.5em;
  border-radius: 0.5em;
  vertical-align: middle;
}

.page .form_wrapper .form_content input:focus-visible,
.page .form_wrapper .form_content select:focus-visible,
.page .form_wrapper .form_content .contact_list_box #note:focus-visible,
.page .form_wrapper .form_content .partner:focus-visible,
.page .form_wrapper .form_content .job_history:focus-visible,
.page .form_wrapper .form_content .appeal:focus-visible{
  background-color: var(--hovercolor);
  border: solid 3px var(--maincolor);
}

.page .form_wrapper .form_content .contact_list_box #note{
  margin-bottom: 0.5em;
  color: #dcdcdc;
}

/* テキストエリアにフォーカス時に文字色を黒に */
.page .form_wrapper .form_content .contact_list_box #note:focus {
  color: black; 
}

.page .form_wrapper .form_content input[name="添付ファイル1"] ,
.page .form_wrapper .form_content input[name="添付ファイル2"] ,
.page .form_wrapper .form_content input[name="添付ファイル3"] {
  border: unset;
  padding: unset;
}

.page .form_wrapper .form_content .mwform-file-delete{
  background-color: var(--maincolor);
  color: white;
  padding: unset;
  display: block;
  float: left;
  margin: 0.5em 0;
}

.page .form_wrapper .form_content .mwform-file-delete:hover{
  background-color: var(--pointcolor);
}

.page .form_wrapper .form_content .mw-wp-form_file{
  background-color: var(--notecolor);
  padding: 1em;
  text-align: left;
}

.page .form_wrapper .form_content input[name="submitConfirm"],
.page-template-page-confirm .form_wrapper .form_content input[name="確認送信ボタン"],
.page-template-page-confirm .form_wrapper .form_content button[name="submitBack"]{
  width: fit-content;
  margin-top: 1.5em;
  background-color: var(--maincolor);
  color: white;
  padding: 0.75em 4em;
  border-radius: 999px;
  border: unset;
}

.page-template-page-confirm .form_wrapper .form_content button[name="submitBack"]{
  margin-left: 1em;
}

.page .form_wrapper .form_content input[name="submitConfirm"]:hover,
.page-template-page-confirm .form_wrapper .form_content input[name="確認送信ボタン"]:hover,
.page-template-page-confirm .form_wrapper .form_content button[name="submitBack"]:hover{
  background-color: var(--pointcolor);
  color: white;
  transition: 0.1s;
}


.page .form_wrapper .form_content .contact_list_box .mwform-tel-field{
  display: flex;
  align-items: center;
  max-width: 600px;
}

.page .form_wrapper .form_content .contact_list_box .post{
  display: inline-block;
  width: 30%;

}

.page .form_wrapper .form_content .contact_list_box .mwform-zip-field{
  display: flex;
  align-items: center;
  max-width: 600px;
}

.page .form_wrapper .form_content .contact_list_box .contact_text{
  max-width: 400px;
}

.page .form_wrapper .mw_wp_form .error {
  font-size: 1em;
  color: red;
  background-color: var(--accentcolor);
  padding: 0.5em 1em;
  display: table;
  margin-top: 1em;
}

.page .form_wrapper .mw_wp_form .error text{
  margin-top: 2em;
}

.page .form_wrapper .mw_wp_form .error::before{
  content: "※";
}









/* ********************************** お問い合わせフォーム（お問い合わせ_送信確認ページ） ********************************** */
.page-template-page-confirm .form_wrapper .form_content{
  padding: 2em;
  border: 3px solid var(--notecolor);
  margin-top: 2em;
}

.page-template-page-confirm .form_wrapper .form_content .main_ttl{
  text-align: center;
  line-height: 1.35em;
}

.page-template-page-confirm .form_wrapper .form_content .txt,
.page-template-page-confirm .form_wrapper .form_content .checkbox_wrapper,
.page-template-page-confirm .form_wrapper .form_content .radio_wrapper
{
  background-color: var(--notecolor);
  padding: 1em;
  text-align: left;
  min-height: 50px;
  height: fit-content;
  line-height: 1.75em;
}

.page-template-page-confirm .form_content .contact_list_box li .ttl {
  margin-bottom: 0.75em;
  text-align: left;
  margin-top: 1.75em;
  line-height: 1.35em;
}

.page-template-page-confirm .form_content .contact_list_box .form_btn{
  display: flex;
  justify-content: center;
  margin-top: 3em;
}

.page-template-page-confirm .form_wrapper .form_content input[name="確認送信ボタン"],
.page-template-page-confirm .form_wrapper .form_content button[name="submitBack"]{
  margin-top: unset;
}

.page-template-page-confirm .form_wrapper .form_content .data_btn .txt {
  display: none;
}










/* ********************************** お問い合わせフォーム（お問い合わせ_サンクスページ） ********************************** */

.page-template-page-thank .inner_wrapper{
  background: url(../images/systems/other/thanks_bg.svg) no-repeat bottom center / 100%;
  background-position: center calc(100% - -10px);
}

.page-template-page-thank .form_wrapper .contact_illust img {
  max-width: 100px;
}

.page-template-page-thank .form_content {
  width: 100%;
  text-align: center;
  margin-top: 3em;
  line-height: 1.75em;
}

.page-template-page-thank .form_content p{
  margin-bottom: 3em;
}

.page-template-page-thank .form_content a{
  background-color: var(--maincolor);
  color: white;
  padding: 0.5em 2em;
  border-radius: 999px;
}

.page-template-page-thank .form_content a:hover{
  background-color: black;
}









/* ********************************** 求人情報_スタッフ募集のお知らせ ********************************** */
.recruit .contact_second_title p::before{
  content: "";
  background: url(../images/systems/icon/recruit_icon.svg);
  display: inline-block;
  background-size: cover;
  vertical-align: top;
  width: 1em;
  height: 1.2em;
  margin-right: 0.4em;
}

.recruit .link_btn span:hover{
  background-color: var(--maincolor);
  
}

.recruit .link_btn span:hover a{
  color: white;
}

.recruit p,
.recruit .recruit_wrapper p,
.recruit .recruit_wrapper li,
.recruit .recruit_wrapper a{
  line-height: 1.5em;
}

.recruit .contact_second_title{
  margin-bottom: 1em;
}

.recruit .box_title{
  background: var(--maincolor);
  padding: 0.8em 1em;
  color: white;
  text-align: center;
  width: 100%;
  margin: unset;
  border:unset
}

.recruit .recruit_memo{
  margin: 1em 0;
  display: flex;
  align-items: flex-start; /* ← 上揃え */
}

.recruit .recruit_memo::before{
  content: "※";
  line-height: 1.5em;
}

.recruit .recruit_memo a{
  border-bottom: 1px solid var(--assortcolor);
  padding-bottom: 0.1em;
  color: var(--maincolor);
}

.recruit .recruit_memo a:hover{
  cursor: pointer;
  color: red;
}

.recruit .salary_list li::before{
  content: "・";
  line-height: 1.5em;
}

.recruit .list_memo{
  margin-top: 2em;
}

.recruit .list_memo a{
  border-bottom: 1px solid var(--assortcolor);
  padding-bottom: 0.1em;
  color: var(--maincolor);
}

.recruit .list_memo a:hover{
  color: red;
}

.recruit .recruit_contents{
  background-color: #fffeee;
  margin-top: 2em;
}

.recruit .recruit_contents > li{
  padding: 3em 0;
  border-bottom: 3px solid var(--maincolor);
}

.recruit .recruit_contents > li:last-of-type{
  border-bottom: unset;
  padding: unset;
}

.recruit .recruit_list{
  display: flex;
}

.recruit .recruit_list > li{
  width: 100%;
}

.recruit .recruit_list > li:first-of-type{
  width: 200px;
  margin-left: 2em;
}

.recruit .recruit_list > li:last-of-type{
  margin-right: 3em;
}

.recruit .department_list > li{
  background-color: white;
  padding: 2em;
}

.recruit .recruit_list span{
  background-color: #fff100;
  padding: 0.1em;
  margin-bottom: 1em !important;
  display: inline-block;
}

.recruit .recruit_imge_box{
  display: flex;
  margin-top: 2em;
}

.recruit .recruit_imge_box li{
  flex: 1;           /* 横幅を均等に */
}



.recruit .qaf_box .qaf_ttl{
  background-color: var(--maincolor);
  padding: 1em;
  text-align: center;
  color: white;
  margin: 2em 0;
  border-radius: 12px;
}

.recruit .qaf_box > ul{
  display: flex;
}

.recruit .qaf_box > ul > li{
  width: 100%;
}

.recruit .qaf_box > ul > li:first-of-type{
  width: 2em;
  margin-right: 1em;
}

.recruit .qaf_box .answer{
  width: 2em;
  height: 2em;
  border-radius: 6px;
  background-color: #e4007f;
  color: white;
  text-align: center;
  padding-top: 0.2em;
}

.recruit .recruit_list_ttl::before{
  content: "■";
}

.recruit .qaf_box a{
  padding: 1em 2em;
  border: 3px solid var(--assortcolor);
  background-color: white;
  display: inline-block;
  margin-top: 1.5em;
}

.recruit .qaf_box a::before {
  content: "";
  display: inline-block;
  background-image: url(../images/systems/icon/dot_arrow_icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  vertical-align: -2px;
  margin-right: 0.25em;
}

.recruit .qaf_box a:hover{
  background-color: var(--accentcolor);
  border: 3px solid var(--maincolor);
}

.recruit .map{
  margin-top: 2em;
  max-width: 600px; /* 最大幅を600pxに制限 */
}

.recruit .map iframe {
  width: 100%; /* iframeを親要素に合わせる */
  height: 300px; /* 高さは固定 */
}

.recruit .interview_wrapper{
  background-color: var(--maincolor);
  padding: 4em 3em 3em 3em;
  position: relative;
}

.recruit .recruit_tab_btn_wrapper{
  position: absolute;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
}


.recruit .recruit-tab-menu-btn {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 7px solid var(--assortcolor);
  width: 400px;
  margin: 0 auto;
  text-align: center;
  border-radius: 999px;
  overflow: hidden;
  background-color: white;
}

.recruit .recruit_tab-item {
  width: 100%;
  padding: 0.8em;
  cursor: pointer;
}

.recruit .recruit_tab-item.active,
.recruit .recruit_tab-item:hover {
  background-color: black;
  color: white;
  border-radius: 999px;
}

.recruit .recruit-tab-pane {
  display: none;
}

.recruit .recruit-tab-pane.active {
  display: block;
}

.recruit .recruit-tab-content{
  background-color: white;
  padding: 3.5em 2em 2em 2em;
}

.recruit .recruit_tab_inner1,
.recruit .recruit_tab_inner2{
  display: flex;
  align-items: center;
}

.recruit .recruit_tab_inner1 li,
.recruit .recruit_tab_inner2 li{
  width: 100%;
}

.recruit .recruit_tab_inner1 li:first-of-type,
.recruit .recruit_tab_inner2 li:first-of-type{
  width: 100%;
  max-width: 300px;
  margin-right: 2em;
}

.recruit .image_box{
  border-radius: 3em;
  overflow: hidden;
  padding: unset;
}

.recruit .work_flow_wrapper{
  display: flex;
}

.recruit .work_flow_wrapper > li:nth-child(1){
  width: 1em;
  padding:  2em 2em 2em 1em;
  border-left: solid 3px var(--assortcolor);
  border-bottom: solid 3px var(--assortcolor);
}

.recruit .work_flow_wrapper > li:nth-child(2){
  width: 100%; /* 2番目以降の要素を全幅に */
  border: solid 3px var(--assortcolor);
  border-top: unset;
}

.recruit .here_ttl::before{
  content: "";
  display: inline-block;
  background-image: url(../images/systems/icon/dot_arrow_icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  vertical-align: -2px;
  margin-right: 0.25em;
}

.recruit .work_flow_contents li{
  padding: 2em;
}

.recruit .work_flow_contents li:nth-child(2),
.recruit .work_flow_contents li:nth-child(3){
  border-top: solid 3px var(--assortcolor);
}

.recruit #contact_wrapper .page_link_btn2 {
  margin-top: 1em;
}