@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL PLUS
    Theme URI: https://manuon.com/swell_plus/
    Description: SWELLを機能拡張する子テーマ
    Version: 1.3.0
    Author: suya(suyasite)@manuon.com
    Author URI: https://manuon.com/
*/

#swell_plus_floating_button {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 98;
    bottom: -60px;
    transition: bottom .4s;
    margin-bottom: 0.5em;
}

[data-scrolled=true] #swell_plus_floating_button {
    display: block;
    bottom: 0;
}

/*.p-fixBtnWrap {
    bottom: calc(50px + 1.25em);
}*/

footer {
    padding-bottom: 50px;
}
/* デフォルト = SWELLメインカラー */

body {
  --catalog-color: var(--color_main);
  --catalog-color-rgb: 0, 0, 0;
}

/* ===== table ===== */

table th,
table td  {
  vertical-align: middle !important;
}

/* ===== カタログカテゴリ別　カラー ===== */

/*------ 新製品 rgba(184, 28, 38, 1);  ------*/
.new-products{
	background-color:#b81c26;
}

body .postid-570,
body .postid-572,
body .postid-556,
body .postid-1079{
  --catalog-color: #b81c26;
  --catalog-color-rgb: 184, 28, 38;
}

/*------ スクエアエンドミル rgba(152, 31, 78, 1); ------*/
.square-end-mill{
	background-color:#981f4e;
}

body .postid-574,
body .postid-599,
body .postid-625,
body .postid-631,
body .postid-640,
body .postid-645,
body .postid-650,
body .postid-657,
body .postid-660,
body .postid-663,
body .postid-666,
body .postid-668,
body .postid-670,
body .postid-674,
body .postid-676,
body .postid-680,
body .postid-682,
body .postid-694,
body .postid-698,
body .postid-702,
body .postid-706,
body .category-80,
body .category-84,
body .category-83,
body .category-81,
body .category-85,
body .category-86{
  --catalog-color: #981f4e;
  --catalog-color-rgb: 152, 31, 78;
}

/*------ ロングネックスクエア rgba(115, 22, 131, 1); ------*/
.Long-leck-square{
	background-color:#731683;
}

body .postid-711,
body .postid-714,
body .postid-718,
body .category-122,
body .category-125,
body .category-124,
body .category-126,
body .category-127,
body .category-123{
  --catalog-color: #731683;
  --catalog-color-rgb: 115, 22, 131;
}

/*------ ラジアスエンドミル rgba(83, 38, 138, 1); ------*/
.radius-end-mill{
	background-color:#53268a;
}
body .postid-731,
body .category-87,
body .category-89,
body .category-82{
  --catalog-color: #53268a;
  --catalog-color-rgb: 83, 38, 138;
}

/*------ ロングネックラジアス rgba(61, 61, 149, 1); ------*/
.long-neck-radius{
	background-color:#3d3d95;
}

body .postid-735,{
  --catalog-color: #3d3d95;
  --catalog-color-rgb: 61, 61, 149;
}

/*------ ボールエンドミル rgba(29, 106, 159, 1); ------*/
.ball-end-mill{
	background-color:#1d6a9f;
}

body .postid-773,
body .postid-780,
body .postid-809,
body .postid-813,
body .category-93,
body .category-94,
body .category-96,
body .category-95,
body .category-97{
  --catalog-color: #1d6a9f;
  --catalog-color-rgb: 29, 106, 159;
}

/*------ ラフィングエンドミル rgba(0, 133, 155, 1); ------*/
.roughing-end-mill{
	background-color:#00859b;
}

body .postid-822,
body .postid-824,
body .postid-827,
body .category-90,
body .category-92,
body .category-91{
  --catalog-color: #00859b;
  --catalog-color-rgb: 0, 133, 155;
}

/*------ 超硬ドリル rgba(19, 174, 103, 1); ------*/
.carbide-drill{
	background-color:#13ae67;
}

body .postid-831,
body .category-100,
body .category-99,
body .category-116,
body .category-101{
  --catalog-color: #13ae67;
  --catalog-color-rgb: 19, 174, 103;
}

/*------ 面取り工具等 rgba(112, 176, 88, 1); ------*/
.chamfering-tool{
	background-color:#70b058;
}
body .postid-838,
body .postid-842,
body .postid-849,
body .postid-851,
body .postid-854,
body .postid-861,
body .postid-863,
body .postid-869,
body .postid-873,
body .postid-883,
body .postid-885,
body .postid-896,
body .postid-902,
body .postid-920,
body .postid-845,
body .category-102,
body .category-103,
body .category-104,
body .category-105,
body .category-117{
  --catalog-color: #70b058;
  --catalog-color-rgb: 112, 176, 88;
}

/*------ 超硬スパイラルカッター・ハイス rgba(185, 210, 59, 1); ------*/
.spiral-cutter{
	background-color:#b9d23b;
}
body .postid-924,
body .postid-928,
body .postid-931,
body .postid-937,
body .postid-939,
body .postid-947,
body .postid-950,
body .postid-953,
body .postid-933{
  --catalog-color: #b9d23b;
  --catalog-color-rgb: 185, 210, 59;
}

/*------ その他 rgba(243, 152, 0, 1); ------*/
.hss{
	background-color:#f39800;
	color:white;
}

.hss-text{
	color:#f39800;
}

body .postid-957,
body .postid-970,
body .postid-995,
body .postid-1001,
body .postid-1005,
body .postid-1013,
body .postid-1016,
body .postid-1025,
body .postid-1028,
body .postid-1030,
body .postid-1037,
body .postid-1032,
body .postid-1041,
body .postid-1044,
body .postid-1047,
body .postid-1049,
body .postid-1057,
body .postid-1090,
body .postid-1105,
body .postid-1122,
body .postid-1130,
body .postid-1157{
  --catalog-color: #f39800;
  --catalog-color-rgb: 243, 152, 0;
}

/*------ 廃盤予定商品 rgba(235, 97, 0, 1); ------*/
.discontinued{
	background-color:#eb6100;
}

body .postid-1059,
body .postid-1070,
body .postid-1073{
  --catalog-color: #eb6100;
  --catalog-color-rgb: 235, 97, 0;
}


/* ===== 共通UI ===== */

/* .post_content h2:first-of-type {
  background-color: var(--catalog-color) !important;
} */

.post_content h2.category-color,
.p-termDescription h2.category-color{
  background-color: var(--catalog-color) !important;
}

.post_content h3::before {
  content: "";
  display: block;
  height: 3px;
  margin-top: 6px;
  background: linear-gradient(
    90deg,
    rgba(var(--catalog-color-rgb), 1),
    rgba(var(--catalog-color-rgb), 0)
  );
}

.post_content h4 {
  border-left: 2px solid var(--catalog-color);
  padding-left: 16px;
}

.post_content .wp-block-table th {
  background-color: var(--catalog-color) !important;
  color: #fff;
}

	
/* リボン */

.swell-block-richcol {
  position: relative;
　overflow: hidden;
}

.ribbon-box {
  background-color: var(--catalog-color);
　width:250px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  color: #fff !important;
  padding: 0px 10px 2px 40px;
  border-radius: 6px;
　-webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    18px 50%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    18px 50%
  );
}

/* p 注意 */

.post_content .is-style-big_icon_caution{
	border-color: var(--catalog-color);
}
[class*=is-style-big_icon_]:before {
	background-color: var(--catalog-color);
}

/* ステップ　背景 */

.u-bg-main{
	background-color: var(--catalog-color) !important;}

/*  ===== セレクトボックス =====  */

/* セレクトボックス全体を中央寄せ */
.size-selector {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* セレクトボックス自体を大きく */
#sizeFilter {
  font-size: 1.2rem;       /* 文字大きめ */
  padding: 12px 20px;      /* 高さ・横幅のゆとり */
  width: 220px;            /* 幅を広めに */
  height: 48px;            /* 高さしっかり */
  border-radius: 6px;      /* 角丸で優しいUI */
  border: 1px solid #ccc;  /* SWELLと馴染む淡い枠 */
  background: #fff;
  cursor: pointer;
}

/* hover時の軽い強調（UI的に“触れる”感じ） */
#sizeFilter:hover {
  border-color: #999;
}

/* SP時もユーザビリティが落ちないように調整 */
@media (max-width: 768px) {
  #sizeFilter {
    width: 80%;
    font-size: 1.1rem;
    padding: 12px;
    height: 46px;
  }
}

/*  ===== フローティングボタン =====  */


/* フローティングボタン全体（右下固定、ページトップボタンの下に配置） */
#floating-buttons {  /* ブログパーツのHTMLアンカーIDに合わせて変更（例: custom-cta-buttons） */
    position: fixed !important;
    bottom: 20px !important;   /* ページトップボタンより下に（通常トップボタンは80px前後なので20pxに） */
    right: 20px !important;
    z-index: 90 !important;    /* トップボタンより下（z-indexが低いと奥になる） */
    display: flex;
    flex-direction: column;    /* 縦並び（カタログ請求と電話を上下に） */
    pointer-events: auto;
}

/* ボタンスタイル（お好みで調整） */
#floating-buttons .swell-block-button__link {
    padding: 14px 28px !important;
    font-size: 15px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* スマホ対応 */
@media (max-width: 959px) {
    #floating-buttons {
        bottom: 15px !important;   /* スマホでも下寄りに */
        right: 15px !important;
    }
    #floating-buttons .swell-block-button__link {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }
}

#custom-cta-buttons a::after {
	display: none !important;
}

/* SWELLのページトップ戻るボタンはそのまま（必要に応じて微調整） */
.p-fixBtnWrap {
    bottom: 80px !important;   /* トップボタンを上にずらしてスペース確保（調整自由） */
}


/*  ===== アコーディオンメニュー =====  */

/* アコーディオン内のメニュー全体の余白をリセット */
.swell-block-accordion__body .widget_nav_menu ul.menu {
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 各リスト項目の設定 */
.swell-block-accordion__body .widget_nav_menu ul.menu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eee; /* 上段に合わせた区切り線 */
}

/* リンク自体の装飾（SWELLの上段メニューを再現） */
.swell-block-accordion__body .widget_nav_menu ul.menu li a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: #333; /* 文字色をグレーに */
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}

/* 左側の矢印アイコン（SWELLの標準スタイル風） */
.swell-block-accordion__body .widget_nav_menu ul.menu li a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 12px;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    transform: rotate(45deg);
}

/* ホバー時の背景色変更 */
.swell-block-accordion__body .widget_nav_menu ul.menu li a:hover {
    background-color: #f7f7f7;
    color: #000;
}

@media (min-width: 960px) {
    #sidebar .c-widget+.c-widget {
        margin-top: 0.5em;
    }
}

.c-widget+.c-widget {
    margin-top: 0.5em;
}


/* =====  NEWアイコンのスタイル =====  */

.new {
    background-color: #ff0000; /* 背景色（赤） */
    color: #ffffff;            /* 文字色（白） */
    font-size: 0.7em;          /* 文字サイズ（周りの文字より小さめ） */
    font-weight: bold;         /* 太字 */
    padding: 2px 6px;          /* 内側の余白（上下・左右） */
    margin-left: 6px;          /* 製品名との間隔 */
    border-radius: 3px;        /* 角の丸み（0にすると四角になります） */
    display: inline-block;     /* 横並びにする */
    vertical-align: middle;    /* 高さを中央に揃える */
    line-height: 1;            /* 行の高さを調整 */
    position: relative;        /* 位置の微調整用 */
    top: -1px;                 /* 少しだけ上に浮かせる（お好みで） */
}


/* =====  グローバルメニュー =====  */

.submenu{
	font-size:10px;
	color:#aaa;
}

/* =================================================
  MW WP Form 全体レイアウト：枠線復活 ＆ 横並び
================================================= */

/* --- 1. テーブルの枠線を確実に表示させる --- */
.mw_wp_form table {
    border: 1px solid #ccc !important;
    border-collapse: collapse !important;
    width: 100% !important;
    table-layout: fixed !important;
    margin-bottom: 20px !important;
}

.mw_wp_form th, 
.mw_wp_form td {
    border: 1px solid #ccc !important; /* 枠線を1pxで固定 */
    padding: 15px 10px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

/* PC時の比率 30%:70% */
@media screen and (min-width: 768px) {
    .mw_wp_form th, 
    .mw_wp_form td:first-child { width: 30% !important; background: #f9f9f9 !important; }
    .mw_wp_form td:last-child { width: 70% !important; }
}

/* --- 2. 基本の入力欄（100%幅） --- */
.mw_wp_form input[type="text"],
.mw_wp_form input[type="email"],
.mw_wp_form select,
.mw_wp_form textarea {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}

/* --- 3. tel / fax の横並び問題を解決 --- */
/* 電話番号を包む span 要素を横並びに強制 */
.tel-cell .mwform-tel-field,
.tel-cell .tel,
.tel-cell .fax {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    border: none !important; /* 内部の余計な枠を消す */
}

/* 3分割される入力ボックスの幅を30%以下に固定 */
.tel-cell input[type="text"] {
    width: 28% !important;      /* 100%指定をここで上書き */
    flex: 0 0 28% !important;   /* 伸びないように固定 */
    margin: 0 5px !important;
    text-align: center !important;
}

/* ハイフンの位置調整 */
.tel-cell span {
    display: inline-block !important;
    width: auto !important;
}

/* --- 4. 対象製品：グリッドレイアウト --- */
.product-selection-grid {
    display: flex !important;
    flex-wrap: wrap !important;
}
.product-item {
    width: 31.3% !important;
    margin: 1% !important;
    border: 1px solid #ddd !important;
    padding: 15px !important;
}
@media screen and (max-width: 767px) {
    .product-item { width: 48% !important; }
}

@media screen and (min-width: 768px) {
    .page-id-2074 .product-item { width: 100% !important; }
}

/* --- 5. 送信・確認ボタン（全幅・四角・矢印） --- */
.mwform-submit-wrap { display: block !important; width: 100% !important; margin: 40px 0 !important;}

.confirm-send, .back {
    display: block !important;
    width: 100% !important;
    padding: 20px !important;
    background-color: #fff !important;
    color: #666 !important;
    font-size: 16px !important;
    border: 1px solid #666 !important;
    text-align: center !important;
    position: relative !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 20px !important;
	margin-bottom:15px !important;
}
.confirm-send:hover { background-color: #333231 !important; color: #fff !important; }
.back:hover { background-color: #333231 !important; color: #fff !important; }

/* お問い合わせ種類の下のガイドテキスト */
.form-guide-msg {
    margin: 15px 0 !important;
    padding: 12px 15px !important;
    background-color: #f8f9fa; /* 薄いグレーの背景 */
    border-left: 4px solid #666; /* SWELLのアクセントに合わせた左線 */
    font-size: 0.9em;            /* 本文より少し小さくして補足感を出す */
    color: #444;
    line-height: 1.6;
    border-radius: 2px;
}

/* スマホ表示での調整 */
@media screen and (max-width: 767px) {
    .form-guide-msg {
        font-size: 0.85em;
        padding: 10px;
    }
}

/* 必須ラベルのスタイル */
.must {
    background-color: #e54d42; /* 視認性の良い赤 */
    color: #fff;               /* 白文字 */
    font-size: 0.6em;          /* 小さめに設定 */
    font-weight: bold;         /* 太字 */
    padding: 2px 6px;          /* 内側の余白 */
    margin-left: 8px;          /* 項目名との間隔 */
    border-radius: 2px;        /* わずかに角を丸める */
    display: inline-block;     /* 横並び */
    vertical-align: middle;    /* 高さを中央に */
    line-height: 1.3;          /* 行間調整 */
    position: relative;
    top: -1px;                 /* 微調整 */
}

/* 確認ページ(ID:2074)のテーブル調整 */
.page-id-2074 .mw_wp_form_confirm table {
    margin-top: 10px;
    border-collapse: collapse !important;
}

/* 項目名と入力内容のフォント・余白を詰める */
.page-id-2074 .mw_wp_form_confirm table th,
.page-id-2074 .mw_wp_form_confirm table td {
    font-size: 14px;       /* 標準より少し小さく */
    line-height: 1.4;      /* 行間をタイトに */
    padding: 10px 12px;    /* 上下左右の余白を削減 */
    vertical-align: middle;
}

/* 項目名（左側）の幅を固定してガタつきを防ぐ */
.page-id-2074 .mw_wp_form_confirm table th {
    background-color: #f7f7f7;
    width: 30%;            /* 昨日の横並びに影響しないよう、確認画面のみで指定 */
    font-weight: bold;
}

/* 確認ページ(ID:2074)で案内メッセージを非表示にする */
.page-id-2074 .form-guide-msg {
    display: none !important;
}

/* --- 確認ページ(ID:2074)専用：製品リスト最適化（2列版） --- */

/* 1. カテゴリ見出し */
.page-id-2074 .mw_wp_form_confirm h3 {
    font-size: 1.05em;
    margin: 20px 0 10px;
    padding: 5px 10px;
    border-left: 4px solid #333;
}

/* --- 確認ページ(ID:2074)専用：製品リスト 最終調整（改行許可版） --- */

/* 1. グリッド設定：PC・タブレット2列 */
.page-id-2074 .mw_wp_form_confirm .product-selection-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 15px 25px;
    gap: 15px 25px;
    margin: 10px 0 25px !important;
    width: 100% !important;
}

/* 2. 各アイテム：改行を許可する設定 */
.page-id-2074 .mw_wp_form_confirm .product-item {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    min-width: 0 !important;
    
    /* 改行の設定 */
    white-space: normal !important;   /* ★自動改行を許可 */
    overflow: visible !important;    /* ★隠さず表示 */
    text-overflow: clip !important;  /* ★「...」を消す */
    word-wrap: break-word;           /* ★長い英単語も枠内で折る */
    
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;     /* 改行した時に読みやすい行間に */
}

/* 3. ラベル(h4)の設定 */
.page-id-2074 .mw_wp_form_confirm .product-item h4 {
    font-size: 12px !important;
    color: #777 !important;
    margin-bottom: 4px !important;
    
    /* ラベルも長い場合は改行を許可 */
    white-space: normal !important;
    line-height: 1.3 !important;
    border: none !important;
}

h4.product-label{
	font-size:16px !important;
}

/* 4. スマホ(599px以下)は1列でゆったり表示 */
@media (max-width: 599px) {
    .page-id-2074 .mw_wp_form_confirm .product-selection-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 6. ボタン周り */
.page-id-2074 .mwform-confirm-structure {
    margin-top: 20px !important;
}