@charset "UTF-8";

/* ======================================================================
   VARIABLES
   ====================================================================== */
:root {
    /* layout */
    --container-max: 1200px;
    --container-gutter: 48px;

    /* font size */
    --font-size-xxl: 220%;
    --font-size-xl: 200%;
    --font-size-l: 180%;
    --font-size-m: 150%;
    --font-size-s: 120%;
    --font-size-ss: 70%;
    --font-size-sss: 40%;

    /* heading size */
    --hd-1: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
    --hd-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
    --hd-3: clamp(1.25rem, 1.1rem + .7vw, 1.75rem);
    --hd-4: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
    --hd-5: clamp(1rem, .95rem + .2vw, 1.125rem);

    /* color */
    --navy: #050c19;
    --yellow: #f9b600;
    --gray: #333;
    --c-text-light: #fff;
    --c-subtext: #999;
    --c-main: #071421;
    --c-main-second: #14283c;
    --c-secondary: #000;
    --c-accent: #f9b600;
    --c-red: #bc1307;

    /* line */
    --line-nav: #344252;
    --line-hilight: #ccc;

    /* bg */
    --bg-gray: #ddd;
    --bg-section: #f3f5f6;

    /* margin */
    --mb-section: 80px;
    --mb-container: 60px;
    --mb-case: 30px;
    --mb-pack: 20px;
    --mb-item: 15px;

    /* shared effects */
    --radius-sm: 4px;
    --radius-md: 8px;
    --shadow-card: 0 4px 18px rgba(0, 0, 0, .08);
    --transition: .25s ease;
}


/* ======================================================================
   COMMON STRUCTURE
   ====================================================================== */

/* base ---------------------------------------------------------- */
html,
body {
    margin: 0;
    overflow-x: hidden;
}
html {
    scroll-behavior: smooth;
}
body {
    color: #222;
    background: #fff;
}
#wrapper {
    position: relative;
    min-height: 100%;
    margin: 0 auto;
    background-color: #fff;
}
#main,
.box,
.box_full {
    width: min(var(--container-max), calc(100% - var(--container-gutter)));
    min-width: 0;
    margin-right: auto;
    margin-left: auto;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* header ---------------------------------------------------------- */
#header {
    color: #fff;
    background: var(--navy);
}
#htop {
    height: 35px;
    background: #333;
}
#header .top_bar {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}
#header h1 {
    max-width: 70%;
    overflow: hidden;
    color: #fff;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.top_links {
    display: flex;
    gap: 25px;
}
.top_links a,
.top_links a:visited {
    color: #fff;
    font-size: 9px;
    white-space: nowrap;
    text-decoration: underline;
}
.top_links a:hover{ text-decoration: none;}
#h_box {
    display: grid;
    height: 140px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}
#h_left .site_logo {
    display: block;
    max-width: 300px;
}
.logo_text {
    display: grid;
    grid-template-columns: 10px auto;
    grid-template-rows: auto auto;
    column-gap: 18px;
    align-items: center;
    color: #fff;
}
.logo_text:visited {
    color: #fff;
}
.logo_mark {
    grid-row: 1 / 3;
    width: 10px;
    height: 60px;
    background: var(--yellow);
}
.logo_name {
    align-self: end;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.logo_en {
    align-self: start;
    margin-top: 8px;
    color: #fff;
    font-size: 9px;
    letter-spacing: .35em;
    white-space: nowrap;
}
#h_right .pc {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cert_list {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cert_item {
    display: flex;
    width: 118px;
    height: 64px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 4px;
    color: #070707;
    background: var(--yellow);
    border-radius: 4px;
    font-size: 80%;
    line-height: 1.6;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}
.cert_item small {
    font-size: 70%;
}
.cert_item strong {
    margin-top: 3px;
    font-size: 12px;
}
.cert_short {
    width: 76px;
}
.tel_box {
    width: 235px;
    margin-left: 9px;
}
.tel_box p {
    display: flex;
    align-items: center;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    padding-left: 30px;
    background: url(common/images/common/ico_tel.png) no-repeat left center;
    background-size: 25px;
}

.tel_box small {
    display: block;
    margin-top: 5px;
    padding-left: 30px;
    color: #fff;
    font-size: 60%;
}
#h_right .sp {
    display: none;
}

/* global navigation ---------------------------------------------------------- */
#mainNav {
    background: var(--navy);
}
#mainNav .box_full {
    width: min(var(--container-max), calc(100% - var(--container-gutter)));
    margin: 0 auto;
}
#mainNavPanel {
    width: 100%;
    padding-bottom: 17px;
    border-top: 1px solid #626875;
}
.panel_close {
    display: none;
}
#mainNav ul {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #626875;
}
#mainNav li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}
#mainNav li a {
    display: flex;
    width: 100%;
    height: 63px;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}

#mainNav li::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 4px;
    background: var(--yellow);
    content: "";
    transform: scaleX(0);
    transition: transform .22s ease;
}
#mainNav li:hover::after,
#mainNav .nav_current::after {
    transform: scaleX(1);
}
#mainNav li:hover a,
#mainNav .nav_current a {
    color: var(--yellow);
    border-top: 1px solid #FFF;
}
#mainNav li:not(.nav_current):hover a {
    color: var(--yellow);
    background: rgba(255, 255, 255, .035);
}

/* footer contact ---------------------------------------------------------- */
.index_contact {
    min-height: 300px;
    color: #fff;
    background: url("./common/images/common/bg_contact.jpg") center / cover no-repeat;
}
.contact_content {
    display: flex;
    min-height: 300px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.contact_content h3 {
    margin-bottom: 24px;
    color: #fff;
    font-size: 31px;
    line-height: 1.42;
}
.contact_content a {
    display: inline-flex;
    width: 290px;
    min-height: 60px;
    align-items: center;
    justify-content: center;
    gap: 17px;
    padding: 10px 24px;
    color: #111;
    background: var(--yellow);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.contact_content a:visited {
    color: #111;
}
.contact_content a img {
    width: 25px;
    height: 19px;
    object-fit: contain;
    transition: transform .2s ease;
}
.contact_content a:hover {
    opacity: 1;
    background: #ffc72c;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
    transform: translateY(-3px);
}
.contact_content a:hover img {
    transform: translateX(4px);
}

/* footer ---------------------------------------------------------- */
#footer {
    color: #fff;
    background: var(--navy);
}
#footer_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0 20px 0px;
}
#footer .footer_logo {
    margin-bottom: 13px;
    text-align: center;
}
#footer .footer_logo .logo_mark,
#footer .footer_logo .logo_en {
    display: none;
}
#footer .footer_logo .logo_name {
    color: #fff;   
    font-weight: 700;
}
#footer .address {
    margin-bottom: 25px;
    color: #fff; 
    font-size: 80%;  
    text-align: center;
}
#footer ul {
    margin-bottom: 38px;
}
#footer li {
    display: inline-block;
    margin: 0 8px;
    padding-left: 10px;
    background: url("./common/images/common/ico_arrow07.png") left center / 6px no-repeat;
}
#footer a,
#copyright {
    color: #aab2bc;
    font-size: 70%;
}
#footer a{ 
    text-decoration: underline;
}
#copyright {
    font-size: 60%;
    letter-spacing: 1px;
}
#footer a:hover {
    color: #fff;
    opacity: 1;
}
#copyright {
    margin-top: auto;
}


/* ======================================================================
   COMPONENTS
   ====================================================================== */

/* margin style ---------------------------------------------------------- */
.section {
    margin-bottom: var(--mb-section);
}
.container {
    margin-bottom: var(--mb-container);
}
.case {
    margin-bottom: var(--mb-case);
}
.pack {
    margin-bottom: var(--mb-pack);
}
.item {
    margin-bottom: var(--mb-item);
}
.mb_clear {
    margin-bottom: 0 !important;
}
.section .container:last-child,
.container .case:last-child,
.case .pack:last-child,
.pack .item:last-child {
    margin-bottom: 0;
}

/* text ---------------------------------------------------------- */
.txt_l {
    text-align: left !important;
}
.txt_c {
    text-align: center !important;
}
.txt_r {
    text-align: right !important;
}
.txt_b {
    font-weight: bold;
}
.txt_red {
    color: var(--c-red);
}
main p {
    margin-bottom: 20px;
}
main * p:last-child {
    margin-bottom: 0;
}

/* switch pc sp ---------------------------------------------------------- */
.sp {
    display: none;
}
.pc {
    display: block;
}

/* section label ---------------------------------------------------------- */
.section_label {
    margin-bottom: 12px;
    color: var(--yellow);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

/* title style ---------------------------------------------------------- */
.title_main {
    position: relative;
    margin-bottom: var(--mb-case);
    padding-top: 90px;
    color: var(--c-secondary);
    font-size: var(--font-size-xl);
    font-weight: bold;
    text-align: center;
}
.title_main::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 80px;
    background: var(--c-main);
    content: "";
}
.title_main span {
    display: block;
    color: var(--c-accent);
    font-size: var(--font-size-sss);
    letter-spacing: 1px;
}
.title_sub {
    position: relative;
    margin-bottom: var(--mb-case);
    padding: 10px 0 10px 25px;
    color: var(--c-secondary);
    font-size: var(--font-size-l);
    font-weight: bold;
}
.title_sub span {
    display: block;
    color: #a17800;
    font-size: var(--font-size-ss);
    letter-spacing: .1em;
}
.title_sub::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: var(--c-main);
    content: "";
}
.title_sub::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 25px;
    background: var(--c-main-second);
    content: "";
}
.title_sec {
    margin-bottom: var(--mb-pack);
    padding-left: 10px;
    color: var(--c-text);
    font-size: var(--font-size-m);
    font-weight: bold;
    border-left: 2px solid var(--c-accent);
}
.title_item {
    margin-bottom: var(--mb-item);
    color: var(--c-main);
    font-size: var(--font-size-s);
    font-weight: bold;
}
.title_page {
    display: block;
    margin-bottom: var(--mb-case);
    color: var(--c-main);
    font-size: var(--font-size-l);
    text-align: center;
}
.title_page span {
    display: block;
    font-size: var(--font-size-ss);
}
.title_num {
    margin-bottom: var(--mb-pack);
    padding-left: 80px;
    color: var(--c-accent);
    font-size: var(--font-size-m);
}
.title_num em {
    display: inline-block;
    width: 60px;
    height: 40px;
    margin-right: 20px;
    margin-left: -80px;
    color: var(--c-text-light);
    background-color: var(--c-main);
    font-size: var(--font-size-m);
}

/* heading styles (h1-h5 x 3 designs) ---------------------------------------------------------- */
.hd {
    margin: 0 0 var(--mb-item);
    color: var(--c-text);
    font-weight: 700;
    line-height: 1.3;
}
.hd-1 { font-size: var(--hd-1); }
.hd-2 { font-size: var(--hd-2); }
.hd-3 { font-size: var(--hd-3); }
.hd-4 { font-size: var(--hd-4); }
.hd-5 { font-size: var(--hd-5); }
.hd_eyebrow {
    display: inline-block;
    color: var(--c-subtext);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* Style A: left accent bar, left-aligned. */
.hd-a {
    position: relative;
    padding-left: 18px;
    text-align: left;
}
.hd-a::before {
    position: absolute;
    top: .15em;
    bottom: .15em;
    left: 0;
    width: 4px;
    background: var(--c-main);
    border-radius: 2px;
    content: "";
}
/* Style B: centered with a small eyebrow label and tick line above. */
.hd-b {
    position: relative;
    padding-top: 30px;
    text-align: center;
}
.hd-b::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 24px;
    background: var(--c-main);
    content: "";
    transform: translateX(-50%);
}
.hd-b .hd_eyebrow {
    display: block;
    margin-bottom: 8px;
}
/* Style C: small pill badge above the heading text, left-aligned. */
.hd-c {
    text-align: left;
}
.hd-c .hd_eyebrow {
    display: table;
    margin-bottom: 10px;
    padding: 4px 12px;
    color: var(--c-text-light);
    background: var(--c-main);
    border-radius: 999px;
}

/* topicPath ---------------------------------------------------------- */
#topicPath {
    display: block;
    padding: 12px 0;
    text-align: left;
    border-bottom: 1px solid #e3e6e9;
}
#topicPath li {
    display: inline;
    margin-right: 10px;
    color: #666;
    font-size: 12px;
    letter-spacing: 1px;
}
#topicPath li a {
    position: relative;
    padding-right: 18px;
    color: var(--c-main);
}
#topicPath li a::after {
    position: absolute;
    top: 50%;
    right: 2px;
    color: var(--yellow);
    content: ">";
    transform: translateY(-50%);
}
#topicPath li a:hover {
    opacity: .7;
}

/* main image ---------------------------------------------------------- */
#main_img_wrap img {
    display: block;
    width: 100%;
}
#main_img_sub {
    min-height: 250px;
    background: linear-gradient(120deg, var(--c-main), var(--c-main-second));
    text-align: right;
}
#main_img_sub h2 {
    display: block;
    padding: 60px 40px 20px 0;
    color: var(--c-text-light);
    font-size: 180%;
    font-weight: 600;
    border-right: 1px solid var(--c-text-light);
}
#main_img_sub h2 span {
    display: block;
    font-size: 50%;
}

.need_top{ padding-top: 80px;}

/* image + text layout ---------------------------------------------------------- */
.pic_l,
.pic_r {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5%;
}
.pic_l {
    flex-direction: row;
}
.pic_r {
    flex-direction: row-reverse;
}
.container .msg {
    flex: 0 0 55%;
    word-break: break-all;
}
.container .img {
    flex: 0 0 40%;
}
.container .img img {
    display: block;
    width: 100%;
}
/* several images stacked in one .img column */
.img_stack {
    display: grid;
    gap: 12px;
}
.flow_picl,
.flow_picr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.flow_picl .img {
    margin-right: 15px;
    margin-bottom: 5px;
}
.flow_picr {
    flex-direction: row-reverse;
}
.flow_picr .img {
    margin-bottom: 5px;
    margin-left: 15px;
}

/* column list ---------------------------------------------------------- */
.collum2,
.collum3,
.collum4 {
    display: flex;
    flex-wrap: wrap;
    gap: 3.5%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.collum2 li {
    width: calc(50% - 1.75%);
    margin-bottom: 3.5%;
}
.collum3 li {
    width: calc(33.333% - 2.333%);
    margin-bottom: 3.5%;
}
.collum4 {
    gap: 2.6%;
}
.collum4 li {
    width: calc(25% - 1.95%);
    margin-bottom: 2%;
}
.collum2 img,
.collum3 img,
.collum4 img {
    display: block;
    width: 100%;
}

/* list ---------------------------------------------------------- */
.list_dot {
    margin-left: 17px;
    list-style: disc;
}
.list_num {
    margin-left: 17px;
    list-style: decimal;
}
.list_dot li,
.list_num li {
    margin-bottom: 5px;
}

/* link (external / pdf) ---------------------------------------------------------- */
.link_ext,
.link_pdf {
    color: var(--c-main);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.link_ext:visited,
.link_pdf:visited {
    color: var(--c-main);
}
.link_ext:hover,
.link_pdf:hover {
    color: #a17800;
    text-decoration: none;
    opacity: 1;
}
.link_ext::after {
    display: inline-block;
    width: .85em;
    height: .85em;
    margin-left: 6px;
    vertical-align: -1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a17800' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5'/%3E%3C/svg%3E") center / contain no-repeat;
    content: "";
}
.link_pdf::after {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    color: #fff;
    background: #c0392b;
    border-radius: 2px;
    content: "PDF";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    vertical-align: 2px;
}
.link_list li {
    padding: 8px 0 8px 18px;
    position: relative;
    border-bottom: 1px dashed #d6dade;
}
.link_list li::before {
    position: absolute;
    top: 1.05em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-top: 2px solid var(--yellow);
    border-right: 2px solid var(--yellow);
    content: "";
    transform: rotate(45deg);
}

/* table ---------------------------------------------------------- */
.tb_style {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    border-top: 2px solid var(--c-main);
}
.tb_style th,
.tb_style td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid #d6dade;
}
.tb_style th {
    color: var(--c-main);
    background: var(--bg-section);
    font-weight: 700;
}
.tb_style thead th {
    color: var(--c-text-light);
    background: var(--c-main);
    border-color: var(--c-main);
	text-align: center;
}
.tb_style thead th + th {
    border-left-color: #3a4855;
}
/* modifier: center all cells (number tables) */
.tb_style.tb_center th,
.tb_style.tb_center td {
    text-align: center;
}
.table_scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table_scroll .tb_style {
    min-width: 640px;
}

/* form ---------------------------------------------------------- */
.tb_form input[type="text"] {
    padding: 5px;
    border-radius: 0;
    -webkit-appearance: none;
}
.form_grid {
    display: grid;
    gap: 18px;
}
.form_field label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}
.form_field input,
.form_field select,
.form_field textarea {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line-hilight);
    border-radius: var(--radius-sm);
}
.form_field textarea {
    min-height: 140px;
    resize: vertical;
}
.required {
    margin-left: 8px;
    padding: 2px 6px;
    color: #fff;
    background: var(--c-red);
    font-size: 70%;
}

/* button style 1 (solid) + hover effects ---------------------------------------------------------- */
.btn_sty {
    position: relative;
    display: inline-flex;
    min-width: 220px;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    overflow: hidden;
    isolation: isolate;
    color: var(--c-text);
    background: var(--c-main);
    border: 1px solid var(--c-main);
    border-radius: var(--radius-sm);
    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        color var(--transition),
        transform var(--transition);
}
.btn_sty span {
    position: relative;
    z-index: 1;
    padding-right: 20px;
    color: var(--c-text-light);
    font-weight: bold;
}
.btn_sty span::after {
    position: absolute;
    right: 0;
    content: ">";
}
.btn_sty:hover {
    background: #3168ac;
    opacity: 1;
}
.btn_demo_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: var(--mb-case);
}
.btn_demo_grid .btn_sty {
    width: 100%;
}
/* Outline: white base, filled on hover. */
.btn_outline {
    color: var(--c-main);
    background: #fff;
}
.btn_outline span {
    color: inherit;
}
.btn_outline:hover {
    color: #fff;
}
/* Float upward with a deeper shadow. */
.btn_lift:hover {
    box-shadow: 0 12px 22px rgba(0, 38, 120, .24);
    transform: translateY(-4px);
}
.btn_lift:active {
    box-shadow: 0 4px 10px rgba(0, 38, 120, .18);
    transform: translateY(-1px);
}
/* Fill from left to right while retaining one base button markup. */
.btn_slide {
    color: var(--c-main);
    background: #fff;
}
.btn_slide span {
    color: var(--c-main);
    transition: color var(--transition);
}
.btn_slide::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: var(--c-main);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.btn_slide:hover::before {
    transform: scaleX(1);
}
.btn_slide:hover span {
    color: #fff;
}
/* Soft light streak across a solid button. */
.btn_shine::before {
    position: absolute;
    top: -35%;
    left: -60%;
    width: 36%;
    height: 170%;
    background: rgba(255, 255, 255, .34);
    content: "";
    transform: skewX(-24deg);
    transition: left .55s ease;
}
.btn_shine:hover::before {
    left: 125%;
}
/* Animated border emphasis for quieter secondary actions. */
.btn_frame {
    color: var(--c-main);
    background: transparent;
    border-color: transparent;
}
.btn_frame span {
    color: var(--c-main);
}
.btn_frame::before,
.btn_frame::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    pointer-events: none;
    transition: transform .35s ease;
}
.btn_frame::before {
    border-top: 2px solid var(--c-main);
    border-bottom: 2px solid var(--c-main);
    transform: scaleX(0);
}
.btn_frame::after {
    border-right: 2px solid var(--c-main);
    border-left: 2px solid var(--c-main);
    transform: scaleY(0);
}
.btn_frame:hover {
    background: transparent;
}
.btn_frame:hover::before,
.btn_frame:hover::after {
    transform: scale(1);
}
/* Color movement for key conversion buttons. */
.btn_gradient {
    background-image: linear-gradient(110deg, var(--c-main) 0%, #1776c8 45%, #04a6b7 100%);
    background-size: 220% 100%;
    border: 0;
}
.btn_gradient:hover {
    background-position: 100% 0;
    box-shadow: 0 10px 22px rgba(0, 72, 150, .22);
}
/* Direction cue for links that lead to another page. */
.btn_arrow span::after {
    transition: transform var(--transition);
}
.btn_arrow:hover span::after {
    transform: translateX(7px);
}
/* Gentle attention cue for contact or booking CTAs. */
.btn_pulse:hover {
    animation: btnPulse .85s ease-out infinite alternate;
}
@keyframes btnPulse {
    from {
        box-shadow: 0 0 0 0 rgba(0, 38, 120, .22);
    }
    to {
        box-shadow: 0 0 0 12px rgba(0, 38, 120, 0);
    }
}

/* button style 2 (outline pill) ---------------------------------------------------------- */
.btn_style2 {
    position: relative;
    display: inline-flex;
    min-width: 220px;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    overflow: hidden;
    isolation: isolate;
    color: var(--c-main);
    background: transparent;
    border: 2px solid var(--c-main);
    border-radius: 999px;
    transition:
        color var(--transition),
        transform var(--transition);
}
.btn_style2 span {
    position: relative;
    z-index: 1;
    padding-right: 20px;
    color: inherit;
    font-weight: bold;
}
.btn_style2 span::after {
    position: absolute;
    right: 0;
    content: "→";
    transition: transform var(--transition);
}
.btn_style2::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: var(--c-main);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.btn_style2:hover {
    color: #fff;
}
.btn_style2:hover::before {
    transform: scaleX(1);
}
.btn_style2:hover span::after {
    transform: translateX(4px);
}

/* button style 3 (ghost + circle arrow) ---------------------------------------------------------- */
.btn_style3 {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--c-main);
    background: transparent;
    font-weight: bold;
}
.btn_style3::after {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--c-main);
    border: 1px solid var(--c-main);
    border-radius: 50%;
    content: "→";
    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}
.btn_style3:hover::after {
    color: #fff;
    background: var(--c-main);
    transform: translateX(4px);
}

/* card ---------------------------------------------------------- */
.lead {
    max-width: 760px;
    margin: 0 auto var(--mb-case);
    text-align: center;
}
.card_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.card {
    height: 100%;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line-hilight);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.card h4 {
    margin-bottom: 12px;
    color: var(--c-main);
    font-size: var(--font-size-s);
}

/* media ---------------------------------------------------------- */
.responsive_media {
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
}
.responsive_media iframe,
.responsive_media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* pagination ---------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.pagination a,
.pagination span {
    display: inline-flex;
    min-width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-hilight);
    border-radius: var(--radius-sm);
}
.pagination .current {
    color: #fff;
    background: var(--c-main);
    border-color: var(--c-main);
}

/* accordion ---------------------------------------------------------- */
.accordion .trigger {
    position: relative;
    display: block;
    width: 100%;
    padding: 16px 48px 16px 18px;
    color: var(--c-text);
    background: var(--bg-gray);
    text-align: left;
}
.accordion .trigger::after {
    position: absolute;
    right: 18px;
    content: "+";
}
.accordion .trigger[aria-expanded="true"]::after {
    content: "-";
}
.accordion .acordion {
    display: none;
    padding: 18px;
    border: 1px solid var(--line-hilight);
    border-top: 0;
}

/* hero overlay (top page layout 2) ---------------------------------------------------------- */
.hero_overlay {
    position: relative;
    min-height: 320px;
    margin-bottom: var(--mb-section);
    background: linear-gradient(135deg, var(--c-main), var(--c-main-second));
}
.hero_overlay img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}
.hero_overlay::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 10, 40, .15), rgba(0, 10, 40, .78));
    content: "";
}
.hero_overlay_copy {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 640px;
    padding: 40px;
    color: #fff;
    text-align: left;
}
.hero_overlay_copy .hd_eyebrow {
    color: #fff;
    opacity: .85;
}
.hero_overlay_copy h2 {
    margin: 8px 0 12px;
    color: inherit;
}
.hero_overlay_copy p {
    margin-bottom: 20px;
    opacity: .9;
}

/* news card grid (top page layout 2) ---------------------------------------------------------- */
.news_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.news_card {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--line-hilight);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.news_date {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--c-main);
    font-size: 80%;
    font-weight: 700;
    letter-spacing: .05em;
}
.news_card h4 {
    margin-bottom: 8px;
    color: var(--c-text);
    font-size: var(--font-size-s);
}
.news_card p {
    margin: 0;
    color: var(--c-subtext);
    font-size: 90%;
}

/* news ticker (top page layout 3) ---------------------------------------------------------- */
.news_ticker {
    display: flex;
    gap: 16px;
    padding-bottom: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.news_ticker_item {
    min-width: 240px;
    flex: 0 0 auto;
    padding: 16px 18px;
    color: var(--c-text);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line-hilight);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), color var(--transition);
}
.news_ticker_item .news_date {
    display: block;
    margin-bottom: 6px;
    font-size: 75%;
}
.news_ticker_item:hover {
    color: var(--c-main);
    border-color: var(--c-main);
}

/* sample strip (index / products) ---------------------------------------------------------- */
.sample_area {
    height: 125px;
    padding: 20px 0;
    background: var(--gray);
}
.sample_list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.sample_card {
    display: grid;
    height: 84px;
    grid-template-columns: 82px 1fr 22px;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: #333;
    border: 1px solid #b8b8b8;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.sample_card:visited {
    color: #fff;
}
.sample_card:hover {
    background: #3b3b3b;
    border-color: var(--yellow);
    transform: translateY(-2px);
}
.sample_img {
    height: 82px;
    overflow: hidden;
}
.sample_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.sample_card:hover .sample_img img {
    transform: scale(1.06);
}
.sample_text {
    padding: 0 10px;
}
.sample_text small {
    display: block;
    margin-bottom: 3px;
    color: #aeb4bc;
    font-size: 7px;
    line-height: 1;
    letter-spacing: .25em;
}
.sample_text strong {
    display: block;
    color: #fff;
    font-size: 14px;
    line-height: 1.25;
}
.sample_arrow {
    color: var(--yellow);
    font-size: 25px;
}

/* pagetop ---------------------------------------------------------- */
#scTop {
    position: fixed;
    z-index: 50;
    right: 5%;
    bottom: 32px;
    display: inline-flex;
    min-width: 86px;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    color: var(--navy);
    background: var(--yellow);
    border-radius: 999px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .24);
    opacity: 0;
    pointer-events: none;
    transform: translateY(16px);
    visibility: hidden;
    transition:
        opacity var(--transition),
        transform var(--transition),
        visibility var(--transition),
        box-shadow var(--transition);
}
#scTop::before {
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    content: "";
    transform: rotate(45deg) translate(2px, 2px);
}
#scTop::after {
    content: "TOP";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
}
#scTop.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
}
#scTop:hover {
    background: #ffc72c;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .32);
    transform: translateY(-3px);
}
#scTop:active {
    transform: translateY(0);
}

/* other ---------------------------------------------------------- */
.pad_sty {
    padding: 80px 0;
}
.bg_gray {
    background: var(--bg-section);
}
.hilight {
    padding: 28px;
    background: #fff;
    border: 1px solid #d6dade;
}
.is-fixed {
    background: var(--c-text-light);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
    transition: box-shadow .25s ease;
}
.demo_space {
    height: 480px;
}


/* ======================================================================
   PAGE : INDEX
   ====================================================================== */
.page_index {
    min-width: 0;
}
.page_index a:hover {
    opacity: 1;
}

/* main visual ---------------------------------------------------------- */
.main_visual {
    overflow: hidden;
    background: #192431;
}
.main_visual_box {
    position: relative;
    height: 550px;
    overflow: hidden;
    background:
        linear-gradient(rgba(4, 14, 26, .15), rgba(4, 14, 26, .15)),
        url("./common/images/index/bg_main.jpg") center / cover no-repeat;
}
.main_visual_box::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(3, 14, 28, .78);
    clip-path: polygon(5% 0, 58.6% 0, 58.6% 100%, 22% 100%);
    content: "";
}
.hero_copy {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    padding: 84px 60px 60px max(calc((100vw - var(--container-max)) / 2 + 150px), 42px);
    color: #fff;
}
.hero_tag {
    display: none;
}
.hero_copy h2 {
    margin-bottom: 34px;
    color: #fff;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.22;
}
.hero_copy h2 strong {
    color: var(--yellow);
    font-size: 66px;
    line-height: 1.12;
}
.hero_points li {
    position: relative;
    margin: 8px 0;
    padding-left: 34px;
    color: #fff;
    font-size: var(--font-size-s);
    line-height: 1.5;
    font-weight: 700;
    background: url(common/images/common/ico_check.png) no-repeat left center;
    background-size: 24px;
}


/* topics ---------------------------------------------------------- */
.topics_area {
   
}
.topics_area > .container {   
    padding: 80px;
    background: #eee;
}
.topics_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 17px;
    border-bottom: 3px solid #333;
    margin-bottom: 20px;
}
.topics_head h3 {
    position: relative;
    font-size: 24px;
    line-height: 1.3;
}
.topics_head h3::after {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 80px;
    height: 3px;
    background: var(--yellow);
    content: "";
}
.more_link {
    padding: 4px 14px;
    color: #333;
    font-size: 10px;
    line-height: 1;
    border: 1px solid #777;
    transition: filter .3s ease, transform .35s ease;
}
.more_link:hover {
    transform: translateY(-4px);
}
.more_link span {
    color: var(--yellow);
}
.news_box > .box {
    width: 100%;
}
.news_box li {
    position: relative;
    padding: 11px 0 11px 30px;
    border-bottom: 1px solid #d5d5d5;
    font-size: 13px;
    line-height: 1.6;
}
.news_box li::before {
    position: absolute;
    left: 0;
    color: var(--yellow);
    content: "\2192";
}
.news_box a,
.news_box a:visited {
    display: block;
    padding-left: 148px;
    color: #4a4a4a;
}
.news_box a:hover {
    color: #000;
}
.news_box li span {
    display: inline-block;
    width: 148px;
    margin-left: -148px;
    color: #333;
    font-weight: 700;
}

/* movie ---------------------------------------------------------- */
.movie_area {
    
}
.movie_box {
    position: relative;
    height: 491px;
    background: #000;
}
.movie_box iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* menu banner ---------------------------------------------------------- */
.menu_area {
    
}
.menu_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}
.menu_card {
    display: block;
    aspect-ratio: 374 / 190;
    overflow: hidden;
    background: var(--navy);
    transition: box-shadow .25s ease, transform .25s ease;
}
.menu_card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: filter .3s ease, transform .35s ease;
}
.menu_card:hover {
    z-index: 1;
    box-shadow: 0 10px 22px rgba(5, 12, 25, .22);
    transform: translateY(-4px);
}
.menu_card:hover img {
    filter: brightness(1.08);
    transform: scale(1.025);
}



/* ======================================================================
   PAGE : SUB PAGES (common)
   ====================================================================== */
.page_sub {
    color: #20252b;
}

/* sub hero ---------------------------------------------------------- */
.page_sub .sub_hero {
    padding: 62px 0 58px;
    color: #fff;
    background: linear-gradient(115deg, #071421 0 66%, #172b3f 66% 100%);
    border-bottom: 5px solid var(--yellow);
}
.page_sub .sub_hero p {
    margin-bottom: 8px;
    color: var(--yellow);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}
.page_sub .sub_hero h2 {
    font-size: 36px;
    line-height: 1.35;
}

/* section ---------------------------------------------------------- */
.page_sub .sub_section {
    padding: 78px 0;
}
.page_sub .bg_light {
    background: #f3f5f6;
}
.page_sub .bg_dark {
    color: #fff;
    background: #0a1826;
}
.page_sub .bg_dark p {
    color: #d8dde1;
}
.page_sub .sub_title {
    position: relative;
    margin-bottom: 28px;
    padding-bottom: 14px;
    color: #071421;
    font-size: 28px;
}
.page_sub .bg_dark .sub_title {
    color: #fff;
}
.page_sub .sub_title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 58px;
    height: 3px;
    background: var(--yellow);
    content: "";
}

/* image + text split (products / company) ---------------------------------------------------------- */
.page_sub .content_split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
    align-items: center;
    gap: 7%;
}
.page_sub .content_split.reverse {
    grid-template-columns: minmax(360px, .85fr) minmax(0, 1fr);
}
.page_sub .content_split img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ======================================================================
   PAGE : PRODUCTS
   ====================================================================== */

/* lead ---------------------------------------------------------- */
.page_products .product_lead,
.page_products .sample_lead {
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

/* feature  ---------------------------------------------------------- */
.page_products .feature_block .content_split {
    align-items: start;
}

/* sample  ---------------------------------------------------------- */
.page_products .sample_block .title_page span {
    color: var(--c-subtext);
    font-size: var(--font-size-sss);
    letter-spacing: 1px;
}
.page_products .sample_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
}
.page_products .sample_item {
    background: #fff;
    /*border: 1px solid #d6dade;*/
}
.page_products .bg_gray .sample_item {
    background: var(--bg-section);
}
.page_products .sample_item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.page_products .spec_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
	border: 1px solid #d6dade;
}
.page_products .spec_table th,
.page_products .spec_table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #d6dade;
	background: #fff;
}
.page_products .spec_table th {
    width: 88px;
    color: #253544;
    background: #eef0f2;
    white-space: nowrap;
}

/* about  ---------------------------------------------------------- */
.page_products .about_box {
    padding: 36px 40px;
    background: #f3f5f6;
}

/* data table / figure  ---------------------------------------------------------- */
.page_products .data_split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 40px;
}
.page_products .data_caption {
    color: #4a4a4a;
    font-size: 13px;
    font-weight: 700;
}
.page_products .tb_style .is_hl th,
.page_products .tb_style .is_hl td {
    color: #20252b;
    background: #fff5d6;
}
.page_products .data_figure img,
.page_products .figure_grid img {
    display: block;
    width: 100%;
    height: auto;
}
.page_products .figure_grid {
    display: grid;
    gap: 20px;
}
.page_products .figure_grid.col4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.page_products .figure_grid.col2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.page_products .figure_grid figcaption {
    padding-top: 8px;
    font-weight: 700;
    text-align: center;
}

/* material  ---------------------------------------------------------- */
.page_products .material_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}
.page_products .material_box {
    padding: 36px;
    border: 1px solid #d6dade;
}
.page_products .material_box dt {
    font-weight: 700;
}
.page_products .material_ref {
    color: #777;
    font-size: 12px;
}


/* ======================================================================
   PAGE : EQUIPMENT
   ====================================================================== */

/* machine spec ---------------------------------------------------------- */
.page_equipment .machine_spec {
    /*padding-left: 12px;
    color: #4a4a4a;
    border-left: 3px solid var(--yellow);*/
	border: 1px solid #d6dade;
	padding: 12px;
    font-size: 90%;
}



/* ======================================================================
   PAGE : QUALITY
   ====================================================================== */

/* certificate ---------------------------------------------------------- */
.page_quality .cert_box .img img {
    width: auto;
    margin: 0 auto;
}
.page_quality .cert_box th {
    width: 30%;
}
.page_quality .cert_scope {
    text-align: center;
}
.page_quality .tb_style{ background-color: #FFF;}


/* ======================================================================
   PAGE : RECRUIT
   ====================================================================== */

/* staff interview ---------------------------------------------------------- */
.page_recruit .staff_head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: 48px;
}
.page_recruit .staff_head.reverse {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.page_recruit .staff_head.reverse .staff_main {
    order: 2;
}
.page_recruit .staff_main {
    display: block;
    width: 100%;
}
.page_recruit .qa_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
}
.page_recruit .qa_list dt {
    padding: 10px 16px;
    color: var(--c-text-light);
    background: var(--c-main);
    border-left: 4px solid var(--yellow);
    font-weight: 700;
}
.page_recruit .qa_list dd {
    padding: 12px 16px 0;
}
.page_recruit .profile_list {
    position: relative;
    padding-top: 52px;
    border-top: 4px solid var(--yellow);
}
.page_recruit .profile_list::before {
    position: absolute;
    top: 20px;
    left: 28px;
    color: var(--c-subtext);
    content: "PROFILE";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
}
.page_recruit .profile_list .item {
    padding-bottom: 12px;
    border-bottom: 1px dashed #d6dade;
}
.page_recruit .profile_list .item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.page_recruit .profile_list dt {
    color: #a17800;
    font-size: 85%;
    font-weight: 700;
}
.page_recruit .profile_list dd {
    color: var(--c-main);
    font-size: 115%;
    font-weight: 700;
}

/* requirements ---------------------------------------------------------- */
.page_recruit .req_table{ background-color: #FFF;}
.page_recruit .req_table th {
    width: 22%;
    white-space: nowrap;
}

/* message ---------------------------------------------------------- */
.page_recruit .president .img {
    flex-basis: 30%;
}
.page_recruit .president .msg {
    flex-basis: 65%;
}
.page_recruit .message_lead {
    color: var(--c-main);
    font-size: 120%;
    font-weight: 700;
}


/* ======================================================================
   PAGE : COMPANY
   ====================================================================== */

/* profile ---------------------------------------------------------- */
.page_company .tb_style th {
    width: 25%;
    white-space: nowrap;
}

/* philosophy ---------------------------------------------------------- */
.page_company .philosophy {
    text-align: center;
}
.page_company .philosophy_cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.page_company .philosophy_cards li {
    padding: 36px 24px;
    border-top: 4px solid var(--yellow);
}
.page_company .philosophy_cards strong {
    display: block;
    color: var(--c-main);
    font-size: 150%;
}
.page_company .philosophy_value {
    color: #4a4a4a;
}
.page_company .philosophy_value strong {
    display: inline-block;
    padding: 0 4px 6px;
    color: var(--c-main);
    border-bottom: 3px solid var(--yellow);
    font-size: 150%;
}
.page_company .philosophy_label {
    color: #a17800;
    font-weight: 700;
}
.page_company .learn_list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.page_company .learn_list li {
    padding: 22px 8px;
    color: var(--c-main);
    background: #fff;
    border: 1px solid #d6dade;
    border-bottom: 3px solid var(--yellow);
    font-weight: 700;
}
.page_company .spirit_band {
    padding: 26px 20px;
    color: var(--c-text-light);
    background: var(--c-main);
    font-size: 130%;
    font-weight: 700;
}

/* history ---------------------------------------------------------- */
.page_company .history_list {
    position: relative;
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}
.page_company .history_list::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 160px;
    width: 2px;
    background: #c9cfd4;
    content: "";
}
.page_company .history_item {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    padding: 14px 0;
    border-bottom: 1px dashed #d6dade;
}
.page_company .history_item dt {
    padding-right: 24px;
    color: var(--c-main);
    font-weight: 700;
    text-align: right;
}
.page_company .history_item dd {
    position: relative;
    padding-left: 32px;
}
.page_company .history_item dd::before {
    position: absolute;
    top: .55em;
    left: -6px;
    width: 14px;
    height: 14px;
    background: var(--yellow);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #c9cfd4;
    content: "";
}

/* media ---------------------------------------------------------- */
.page_company .media_list img {
    width: auto;
    max-width: 100%;
}


/* ======================================================================
   PAGE : SITEMAP
   ====================================================================== */
.page_sitemap .sitemap_list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.page_sitemap .sitemap_list a {
    position: relative;
    display: flex;
    min-height: 104px;
    flex-direction: column;
    justify-content: center;
    padding: 20px 52px 20px 22px;
    color: var(--c-main);
    background: #fff;
    border: 1px solid #d6dade;
    border-top: 3px solid var(--c-main);
    font-weight: 700;
    transition: color var(--transition), background-color var(--transition);
}
.page_sitemap .sitemap_list a span {
    color: #a17800;
    font-size: 11px;
    letter-spacing: .15em;
}
.page_sitemap .sitemap_list a::after {
    position: absolute;
    top: 50%;
    right: 18px;
    width: 26px;
    height: 26px;
    border: 1px solid var(--yellow);
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9b600' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / 12px no-repeat;
    content: "";
    transform: translateY(-50%);
}
.page_sitemap .sitemap_list a:hover {
    color: var(--c-text-light);
    background-color: var(--c-main);
    opacity: 1;
}
.page_sitemap .sitemap_list a:hover span {
    color: var(--yellow);
}


/* ======================================================================
   PAGE : TOPICS
   ====================================================================== */
.page_sub .topics_empty {
    padding: 55px;
    text-align: center;
    background: #f3f5f6;
}

/* page_contact
---------------------------------------------------------- */

/*フォーム系*/
.contact_btn{
	text-align:center;
}

.contact_btn input{
	padding:10px 40px;
	background-color:#000;
	border:none;
	color:#FFF;
	text-align:center;
	margin:10px 0;
	cursor: pointer;
	border-radius: 0;
	margin: 0 15px;
	font-size: 16px;
}
.contact_btn input:hover{
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}

.contact_main{
	margin-bottom:10px;
}


.tb_form{
	width:100%;
	table-layout: auto;
	border-collapse: collapse;
	font-size: 90%;
}
.tb_form th {
	background: #f5f5f5;
	text-align: left;
}
.tb_form td {
	background: #fff;
}
.tb_form th span{
	color: #FF0000;
}
.tb_form td input[type=text],.tb_form td input[type=email],
.tb_form td textarea {
	-webkit-appearance: none;
	border-radius: 0;
	box-sizing: border-box;
	border: solid 1px #999;
}
.tb_form td textarea {
	width: 100%;
}
.wpcf7-radio .wpcf7-list-item:first-child {
	margin-left: 0!important;
}
.info_chui {
	display: block;
	font-size: 80%;
}
.wpcf7-not-valid-tip {
	font-size: 80%;
}
.txt_att {
	font-size: 80%;
}
.tb_form td input[type=text].input_s {
	width: 80px;
	margin-right: 10px;
}
.tb_form td input[type=text].input_s2 {
	width: 120px;
	margin-right: 6px;
	margin-left: 6px;
}
.tb_form td ul li:first-child input[type=text].input_s2 {
	margin-left: 0;
}
.tb_form td dl {
	display: flex;
	margin-bottom: 8px;
}
.tb_form td dl:last-child {
	margin-bottom: 0;
}
.tb_form td dl dt {
	width: 100px;
}
.ul_li_form li {
	margin-bottom: 8px;
}
.ul_li_form li:last-child {
	margin-bottom: 0;
}
.ul_li_form li input[type=date]{
	margin-right: 20px;
}
.tb_form td tr td {
	border: none!important;
	padding: 0;
}
.tb_form td tr td:first-child {
	padding-right: 15px;
}
.tb_form .txt_att {
	display: block;
}
.tb_form td .ul_birth {
	display: flex;
}

@media screen and (min-width: 769px){
.tb_form {
	border-top: solid 1px #ddd;
}
.tb_form th{
	font-weight: bold;
	padding: 15px;
	border-bottom: 1px solid #ddd;
	vertical-align: top;
	width: 25%;
	box-sizing: border-box;
}
.tb_form th span{
	color: #FF0000;
}
.tb_form td{
	border-bottom: 1px solid #ddd;
	padding: 15px;
	box-sizing: border-box;
}
.tb_form td input[type=text],
.tb_form td input[type=email] {
	width: 50%;
	padding: 3px;
}
}



@media screen and (max-width:768px){
.tb_form th{
	font-weight: bold;
	padding: 5px;
	width: 100%;
	display: block;
}
.tb_form td{
	border-bottom: 1px solid #CCCCCC;
	padding: 5px 0 10px;
	width: 100%;
	display: block;
}
/*フォーム系*/
.contact_btn input{
	-webkit-appearance: none;
	border-radius: 0;
}

.tb_form td input[type=text],
.tb_form td input[type=email] {
	width: 100%;
	box-sizing: border-box;
}
.tb_form td input[type=text].input_s2 {
	width: 100px;
	margin-right: 4px;
	margin-left: 4px;
}

}

/*------ page_topics ------*/
.page_topics .container li {
	padding: 15px 0;
	border-top: 1px dotted #999;
}
.page_topics .container li:first-child {
	border-top: none;
}
.page_topics .container li a{
	text-decoration:none;
	color: #000;
	overflow: hidden;
	display: block;
}
.page_topics .container li span{
	float:left;
	width: 79%;
}
.page_topics .container li span.txt_date{
	font-weight: 700;
	width: 20%;
}

/*------ news nav ------*/
.nav-links {
	overflow: hidden;
}
.nav-links a span {
	display: block;
	padding: 10px 30px;
	background: #000;
	color: #FFF;
}
.nav-links a span:hover {
	background:#666;
}
.nav-links a span.prev {
	float: left;
}
.nav-links a span.next {
	float: right;
}

.pagination {
	margin-top: 30px;
	text-align: center;
}
.pagination .current,
.pagination  a {
	display: inline-block;
	padding: 4px 12px;
	margin: 0 3px;
}

.pagination  a {
	border: solid 1px #CCC;
	text-decoration: none;
	color: #999;
}
.pagination .current{
	background: #000;
	border: solid 1px #000;
	color: #FFF;
}
.pagination  a:hover{
	background: #666;
	border: solid 1px #666;
	color: #FFF;
}