@charset "utf-8";

/* CSS Document */

:root {
    /* font-family */
    --font-family-primary: "Noto Sans JP", sans-serif;
    --font-family-en: "League Spartan", sans-serif;

    /* font-size */
    --font-base: 1.4rem;
    --font-sm: 1.2rem;
    --font-md: 1.8rem;
    --font-lg: 2.2rem;
    --font-xl: 2.8rem;

    /* color */
    --color-primary: #0055B3;
    --color-secondary: #99BBE1;
    --color-bg: #E6EEF7;
    --color-accent: #E9EE3C;
    --color-text-base: #333333;
    --color-text-sub: #656970;

    /* box-shadow */
    --box-shadow-default: 0 0.2rem 0.8rem #65768b20;

    /* border */
    --border-default: 0.1rem solid #E2E3E4;

    /* radius */
    --radius-sm: .8rem;
    --radius-md: 1.6rem;
    --radius-lg: 3rem;
    --radius-full: 9999px;

    /* transition */
    --trans-bounce: 0.5s cubic-bezier(0.3, 2, 0.6, 1);
}

/* ==============================================
Base Styles
============================================== */
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-primary);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.75;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.l-wrapper {
    overflow-x: hidden !important;
}

/* スクリーンリーダー専用 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(0 0 0 0);
    border: 0;
}

/* GSAP */
.fade-up,
.fade-up-st,
.mv-copy,
.mv-illust--paper,
.mv-illust--map {
    opacity: 0;
}


/* =======================================================

Utility Classes

======================================================= */
/* ==============================================
layout
============================================== */
/* ---------------------
section wrap
--------------------- */
.section {
    padding: 8rem 0;
}

.inner {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.section-block:not(:first-child) {
    margin-top: 6.4rem;
}

.section-block>*+* {
    margin-top: 5.6rem;
}

.content-stack>*+* {
    margin-top: 2rem;
}


/* ---------------------
link grid
--------------------- */
.link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 1.6rem;
}



/* ==============================================
button / link
============================================== */
/* リンク先が無い場合hover無し */
[tabindex="-1"] {
    pointer-events: none;
}

/* ---------------------
Button
--------------------- */
.btn {
    position: relative;
    display: inline-block;
    width: auto;
    padding: 1.6rem;
    padding-right: 5.6rem;
    background-color: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid #E2E3E4;
    font-weight: 700;
    transition: transform var(--trans-bounce);
}

.btn:hover {
    transform: scale(0.96);
}

.btn::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 1.6rem;
    margin: auto;
    width: 2.8rem;
    height: 2.8rem;
    background: url(../images/arrow.svg) no-repeat center/cover;
    transition: transform var(--trans-bounce);
}

.btn:hover::before {
    transform: scale(1.15);
}

/* 背景ブルー */
.btn--primary {
    background-color: var(--color-primary);
    color: #fff !important;
    font-weight: 600;
}

/* PDF */
.btn.icon-pdf::before {
    background: url(../images/arrow_pdf.svg) no-repeat center/cover;
}

/* 外部リンク */
.btn.external-link::before {
    background: url(../images/external-link.svg) no-repeat center/cover;
}

/* ---------------------
Button under line
--------------------- */
.btn--under-line {
    text-decoration: underline !important;
    color: var(--color-text-sub) !important;
}

.btn--under-line:hover {
    opacity: 0.7;
}


/* ---------------------
tel link
--------------------- */
.tel-link {
    text-decoration: underline !important;
    cursor: pointer !important;
    color: var(--color-text-base) !important;
    background-color: transparent !important;
}

.fax-link {
    pointer-events: none !important;
    color: inherit !important;
    text-decoration: none !important;
    background-color: transparent !important;
}


/* ==============================================
heading
============================================== */
/* ---------------------
heading top page
--------------------- */
.top-heading {
    display: flex;
    flex-direction: column;
    font-size: var(--font-xl);
    font-weight: 700;
}

.top-heading--en {
    position: relative;
    display: block;
    padding-left: 2.4rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
}

.top-heading--en::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 0.6rem;
    height: 1.2rem;
    background-color: var(--color-primary);
}

.top-heading--en::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0.6rem;
    margin: auto;
    width: 0.6rem;
    height: 1.2rem;
    background-color: var(--color-accent);
}

/* secondary */
.top-heading--sec {
    color: #fff;
}

.top-heading--sec .top-heading--en {
    color: #fff;
}

.top-heading--sec .top-heading--en::before {
    background-color: var(--color-secondary);
}


/* ---------------------
heading L
--------------------- */
.heading-lg {
    position: relative;
    padding: 2rem 0.2rem;
    border-top: 0.4rem solid var(--color-bg);
    color: var(--color-primary);
    font-size: var(--font-xl);
    font-weight: 600;
}

.heading-lg::before {
    position: absolute;
    content: '';
    top: -0.4rem;
    left: 0;
    margin: auto;
    width: 8rem;
    height: 0.4rem;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
}


/* ---------------------
heading M
--------------------- */
.heading-md {
    position: relative;
    padding: 0 0 1.2rem 1.6rem;
    border-bottom: var(--border-default);
    font-size: var(--font-lg);
    font-weight: 700;
}

.heading-md::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0.4rem;
    left: 0;
    margin: auto;
    width: 0.4rem;
    height: 50%;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
}

/* ---------------------
heading S
--------------------- */
.heading-sm {
    display: inline-block;
    font-size: var(--font-md);
    color: var(--color-primary);
    font-weight: 700;
}


/* ==============================================
Text styles
============================================== */
/* 太文字 */
.text-emphasis{
    font-weight: 700;
}


/* ==============================================
List styles
============================================== */
.list{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.list__items{
    position: relative;
    padding-left: 1.4rem;
}

.list__items::before{
    position: absolute;
    content: '';
    top: 1.2rem;
    left: 0;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 0.1rem;
    background-color: var(--color-primary);
}

/* 番号つき */
.list--decimal {
    list-style: decimal;
}

.list--decimal .list__items {
    padding-left: 0;
    margin-left: 1.2em;
}

.list--decimal .list__items::before {
    display: none;
}

/* フロー用 */
.list--step {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
    list-style: decimal;
    list-style-position: inside;
}

.list--step li {
    position: relative;
    padding: 2rem;
    background-color: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-md);
    font-weight: 600;
    color: var(--color-primary);
}

.list--step li:not(:last-child)::before {
    position: absolute;
    content: '';
    bottom: -4.2rem;
    left: 0;
    right: 0;
    margin: auto;
    width: 3.6rem;
    height: 3.6rem;
    background: url(../images/arrow.svg) no-repeat center/cover;
    transform: rotate(90deg);
}

.list--step li span {
    display: block;
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--color-text-base);
}


/* ==============================================
table
============================================== */
.table {
    width: 100%;
}

.table tr {
    border-bottom: var(--border-default);
}

.table th {
    position: relative;
    padding: 2rem 0.8rem;
    text-align: left;
}

.table th::before {
    position: absolute;
    content: '';
    bottom: -0.1rem;
    left: 0;
    width: 4rem;
    height: 0.3rem;
    background-color: var(--color-primary);
}

.table th.th--lv1 {
    /* white-space: nowrap; */
    min-width: 16rem;
    font-weight: 700;
}

.table td {
    padding: 2rem 0.8rem;
    border-bottom: var(--border-default);
}


/* ==============================================
Google Map
============================================== */
.map {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: var(--radius-sm);
}


/* =======================================================

header / footer

======================================================= */
/* ==============================================
header
============================================== */
#header {
    position: relative;
    display: block;
    width: 100%;
    z-index: 999;
}

/* ---------------------
logo
--------------------- */
.header-logo {
    position: absolute;
    top: 2rem;
    left: 2rem;
    display: block;
    width: 14rem;
}


/* ---------------------
header nav
--------------------- */
#header__nav {
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    visibility: hidden;
    transition: 0.3s;
    opacity: 0;
}

#header__nav.panelactive {
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    width: 60%;
    min-width: 36rem;
    height: 100vh;
    visibility: visible;
    background-color: var(--color-bg);
    transition: 0.3s;
    opacity: 1;
}

#header__nav-container {
    display: none;
    position: fixed;
    z-index: 99;
    width: 60%;
    min-width: 36rem;
    height: 100vh;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

#header__nav-container::-webkit-scrollbar {
    display: none;
}

#header__nav.panelactive #header__nav-container {
    display: block;
    padding: 12rem 0;
}

div.header__nav-content {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    width: 85%;
    margin: 0 auto;
}

#header__nav.panelactive div.header__nav-content {
    animation-name: gnaviAnime;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes gnaviAnime {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.header__nav-list {
    display: flex;
    flex-direction: column;
}

.header__nav-list li a {
    position: relative;
    display: block;
    padding: 1.6rem 1.6rem 1.6rem 4rem;
    border-bottom: 0.1rem solid var(--color-primary);
    font-size: var(--font-md);
    font-weight: 600;
}

.header__nav-list li a::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 0.6rem;
    height: 1.2rem;
    background-color: var(--color-primary);
}

.header__nav-list li a::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0.6rem;
    margin: auto;
    width: 0.6rem;
    height: 1.2rem;
    background-color: var(--color-accent);
}

/* 下層メニュー */
.header__dropdown {
    background-color: #CCDDF0;
    padding: 0.8rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.header__dropdown a {
    padding: 0.8rem 0.8rem 0.8rem 3.2rem !important;
    border-bottom: none !important;
}

.header__dropdown a::before {
    left: 1.2rem !important;
    width: 0.8rem !important;
    height: 0.4rem !important;
}

.header__dropdown a::after {
    display: none !important;
}

/* PDF */
.header__dropdown a.icon-pdf {
    position: relative;
    width: 100%;
}

.header__dropdown a.icon-pdf::after {
    display: block !important;
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 1.2rem;
    left: auto;
    margin: auto;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../images/arrow_pdf.svg) no-repeat center/cover;
}

/* CVボタン */
.header__nav-cv a {
    position: relative;
    display: block;
    margin-top: 3.2rem;
    padding: 0.8rem 2.4rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    border: none !important;
    color: #fff;
    font-weight: 600;
    transition: var(--trans-bounce);
}

.header__nav-cv a::before,
.header__nav-cv a::after {
    display: none;
}


/* --------------
hamburger
-------------- */
.header__hamburger {
    position: fixed;
    top: 0.8rem;
    right: 0.8rem;
    width: 7rem;
    height: 7rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    transition: var(--trans-bounce);
    z-index: 999;
}

.header__hamburger:hover {
    transform: scale(1.05);
}

.header__hamburger.active {
    transform: scale(0.8);
}

.header__hamburger.active:hover {
    transform: scale(0.85);
}

.header__hamburger::before,
.header__hamburger::after {
    position: absolute;
    font-size: var(--font-sm);
    top: 4rem;
    right: 0;
    left: 0;
    margin: auto;
    width: 3.6rem;
    height: 1.2rem;
    line-height: 0.6rem;
    color: #fff;
    transition: 0.3s;
}

.header__hamburger::before {
    content: 'menu';
    opacity: 1;
}

.header__hamburger::after {
    content: 'close';
    opacity: 0;
}

.header__hamburger.active::before {
    opacity: 0;
}

.header__hamburger.active::after {
    opacity: 1;
}

.header__hamburger span {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 2.8rem;
    height: 0.2rem;
    border-radius: var(--radius-full);
    background-color: #fff;
    transition: 0.3s;
}

.header__hamburger span:nth-of-type(1) {
    top: 1.8rem;
}

.header__hamburger span:nth-of-type(2) {
    top: 2.8rem;
}

.header__hamburger.active span:nth-of-type(1) {
    transform: translateY(0.5rem) rotate(-24deg);
}

.header__hamburger.active span:nth-of-type(2) {
    transform: translateY(-0.5rem) rotate(24deg);
}


/* ==============================================
footer
============================================== */
#footer {
    position: relative;
    padding: 8rem 0 4rem;
    background-color: #002B5A;
    text-align: center;
    color: #fff;
}

.footer-main {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

/* ---------------------
logo / address
--------------------- */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 5.4rem;
}

.footer-logo {
    width: 12rem;
}

.address-grid {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.footer-address {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-left: 2rem;
    border-left: 1px solid #fff;
    font-size: var(--font-base);
}

.footer-address__name {
    font-weight: 700;
}


/* ---------------------
footer nav
--------------------- */
.footer-nav__list {
    display: flex;
    gap: 2.4rem;
    font-size: var(--font-sm);
    text-decoration: underline;
    font-weight: 500;
}

.footer-nav__list a:hover {
    opacity: 0.7;
}


/* ---------------------
copyright / back to top
--------------------- */
.copyright {
    display: block;
    margin-top: 3.2rem;
    font-size: 1.2rem;
    font-weight: 400;
    text-align: left;
}

.backtotop {
    position: absolute;
    top: 6.4rem;
    right: 10%;
    padding-right: 4.8rem;
    transition: var(--trans-bounce);
}

.backtotop:hover {
    transform: translateY(-0.4rem);
}

.backtotop::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 3.2rem;
    height: 3.2rem;
    background: url(../images/arrow.svg) no-repeat center/cover;
    transform: rotate(-90deg);
}


/* =======================================================

Top Page

======================================================= */
/* ==============================================
mv
============================================== */
#mv {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    background-color: var(--color-primary);
    color: #fff;
}

#mv:after {
    content: "";
    position: absolute;
    bottom: -0.1rem;
    right: 0;
    width: 100%;
    height: 15vw;
    background: url(../images/mv_bg.svg) no-repeat center bottom/100%;
}

.mv__inner {
    position: relative;
    z-index: 2;
}

.mv-copy h1 {
    position: absolute;
    top: 10vw;
    left: 4vw;
    width: 44vw;
}

.mv-sub-copy {
    position: absolute;
    top: 24vw;
    left: 4vw;
    font-size: 1.5vw;
    letter-spacing: 0.1em;
}

.mv-illust--paper {
    position: absolute;
    top: 0;
    right: 0;
    width: 63vw;
}

.mv-illust--map {
    position: absolute;
    top: 3vw;
    right: 4vw;
    width: 39vw;
}


/* ==============================================
insert
============================================== */
#insert {
    padding-bottom: 0;
}

.insert__container {
    position: relative;
    padding: 3.2rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
}

.insert-description {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.insert__link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1.2rem;
}

.insert__link-grid .btn {
    width: auto;
}

.insert_il {
    position: absolute;
    top: -10vw;
    right: 5vw;
    width: clamp(11rem, 16vw, 30rem);
}


/* ==============================================
service
============================================== */
#service {
    padding-top: 3.2rem;
}

.service__container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    padding: 3.2rem;
    border-radius: var(--radius-sm);
    background-color: #CCDDF0;
    overflow-y: hidden;
}

.service-description {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 2rem;
}

.btn--service {
    display: block;
    padding: 2rem;
    background-color: #fff;
    border-radius: var(--radius-sm);
    transition: transform var(--trans-bounce);
}

.btn--service:hover {
    transform: scale(0.98);
}

.btn--service>*+* {
    margin-top: 2rem;
}

.service__image {
    border-radius: var(--radius-sm);
}

.service__label {
    position: relative;
    display: block;
    padding-right: 4.8rem;
    font-size: var(--font-md);
    font-weight: 700;
}

.service__label::after {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 4rem;
    height: 4rem;
    background: url(../images/arrow.svg) no-repeat center/cover;
    transition: transform var(--trans-bounce);
}

.btn--service:hover .service__label::after {
    transform: scale(1.2);
}


/* ==============================================
news
============================================== */
#news {
    position: relative;
    background-color: #CCDDF0;
}

#news::before {
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
    width: 70%;
    height: 100%;
    background: var(--color-bg);
    z-index: 1;
}

.news__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    z-index: 2;
}

.news__container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.news-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.news-list__items {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3.2rem;
    width: 100%;
    padding: 2.4rem 1.6rem;
    background-color: #fff;
    border-radius: 0.4rem;
    transition: 0.3s;
}

.news-list__items::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 0.4rem;
    height: 100%;
    background-color: var(--color-primary);
    transform: scaleY(0);
    transition: 0.3s;
}

.news-list__items:hover {
    padding-left: 2rem;
    color: var(--color-primary);
}

.news-list__items:hover::before {
    transform: scaleY(1);
}

.news__date {
    font-size: var(--font-sm);
    color: var(--color-text-sub);
}

.news__title {
    font-size: var(--font-base);
}

.news__container .btn {
    margin-top: 4rem;
    margin-left: auto;
    margin-right: 0;
}


/* ==============================================
support-links
============================================== */
.support-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
    gap: 2rem;
}

.support-link {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3.2rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    transition: transform var(--trans-bounce);
}

.support-link:hover {
    transform: scale(0.98);
}

.support-link__description {
    color: #fff;
}

.arrow--support-links {
    width: 4rem;
    margin-left: auto;
    margin-right: 0;
    transition: transform var(--trans-bounce);
}

.support-link:hover .arrow--support-links {
    transform: scale(1.15);
}


/* ==============================================
contact
============================================== */
#contact {
    position: relative;
    background-color: #0050AF;
}

#contact::before {
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
    width: 70%;
    height: 100%;
    background: var(--color-primary);
    z-index: 1;
}

.contact__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5.6rem;
    z-index: 2;
}

.contact-description {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: #fff;
}

.contact-mail,
.contact-tel {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.contact-mail {
    gap: 2.4rem;
    padding-bottom: 4.8rem;
}

.contact-mail .btn {
    width: fit-content;
}

.contact-tel {
    gap: 0.4rem;
    padding-top: 3.2rem;
    border-top: 1px solid #fff;
    color: #fff;
}

.contact-tel__label {
    font-size: var(--font-lg);
    font-weight: 700;
    color: #fff;
}


/* ---------------------
tel link
--------------------- */
.contact-tel__number {
    font-family: var(--font-family-en);
    font-size: var(--font-xl);
    color: var(--color-accent) !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    background-color: transparent !important;
}


/* =======================================================

Sub Page

======================================================= */
/* ==============================================
page header
============================================== */
#page-header {
    position: relative;
    width: 100%;
    padding: 12rem 0 6.4rem;
    background-color: #0050AF;
    overflow: hidden;
    z-index: 1;
}

#page-header::before {
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
    width: 70%;
    height: 100%;
    background: var(--color-primary);
    z-index: 1;
}

#page-header .inner {
    position: relative;
    z-index: 2;
}


/* ==============================================
Insert Page
============================================== */
.features-detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
    gap: 2.4rem;
}

.features-detail {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.features-detail__image img {
    border-radius: var(--radius-sm);
}


/* ==============================================
Service Page
============================================== */
.service-detail-list {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.service-detail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    align-items: center;
    gap: 2.4rem;
    padding: 2.4rem;
    border-radius: var(--radius-sm);
    background-color: #CCDDF0;
}

.service-detail#service_posting {
    background: var(--color-bg) url(../images/service_posting.png) no-repeat right bottom/40%;
}

.service-detail#service_ad {
    background: var(--color-bg) url(../images/service_ad.png) no-repeat right bottom/40%;
}

.service-detail#service_print {
    background: var(--color-bg) url(../images/service_print.png) no-repeat right bottom/40%;
}

.service-detail#service_novelty {
    background: var(--color-bg) url(../images/service_novelty.png) no-repeat right bottom/40%;
}

.service-detail#service_media {
    background: var(--color-bg) url(../images/service_media.png) no-repeat right bottom/40%;
}

.service-detail#service_others {
    background: var(--color-bg) url(../images/service_others.png) no-repeat right bottom/40%;
}

.service-detail__image img {
    border-radius: var(--radius-sm);
}

.service-detail__body {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.service-detail__title {
    color: var(--color-primary);
    font-size: var(--font-lg);
}


/* ==============================================
Company Page
============================================== */
.company-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 1.6rem;
}

.company-address {
    padding: 2rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
}

.company-address__name {
    color: var(--color-primary);
}


/* ==============================================
news
============================================== */
#news--subpage {
    background-color: var(--color-bg);
}

#news--subpage .news__inner {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}


/* --------------
pagination
-------------- */
.archive-pagination {
    width: 100%;
    margin-top: 2.4rem;
    text-align: center;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.5rem;
    color: var(--color-primary);
}

.archive-pagination a {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    border-radius: var(--radius-full);
    background-color: var(--color-secondary);
    transition: 0.3s;
}

.archive-pagination a:hover {
    background: var(--color-primary);
    color: #fff;
}

.screen-reader-text {
    display: none;
}


/* ==============================================
news single
============================================== */
.news__content-hd{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
    padding: 1.6rem 0;
    border-bottom: var(--border-default);
}

.news__content-hd .news__title{
    font-size: var(--font-md);
    font-weight: 600;
}

.news__content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.2rem;
    padding: 3.2rem;
    background-color: #fff;
    border-radius: var(--radius-sm);
}

/* お知らせ本文 */
.news__content-inner{
    width: 100%;
    padding-bottom: 3.2rem;
    border-bottom: var(--border-default);
    font-size: var(--font-base);
}

.news__content-inner a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
    font-weight: 700;
}

.news__content-inner a :hover {
    opacity: 0.5;
}

.news__content-inner img {
    height: auto;
}

/* cms用 */
div.gallery img {
    border: none !important;
    width: 100% !important;
    height: auto;
}

div.wp-caption {
    width: 100% !important;
    margin: 0 auto;
    text-align: center;
}

div.wp-caption img {
    width: 100% !important;
    height: auto;
}

dd.gallery-caption {
    display: block !important;
    width: 100%;
}

img.alignright {
    display: block;
    margin: 0 0 0 auto !important;
}

img.alignleft {
    display: block;
    margin: 0 auto 0 0 !important;
}

img.aligncenter {
    display: block;
    margin: 0 auto !important;
}

div.alignright {
    display: block;
    margin: 0 0 0 auto !important;
}

div.alignleft {
    display: block;
    margin: 0 auto 0 0 !important;
}

div.aligncenter {
    display: block;
    margin: 0 auto !important;
}


/* ==============================================
inquiry
============================================== */
.inquiry-block {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    width: 100%;
    margin: 0 auto;
    padding: 4.8rem;
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* --------------
ラベル・必須
-------------- */
.form-label {
    color: var(--color-primary);
    font-weight: 600;
}

.form-required {
    margin-right: 1.2rem;
    padding: 0.2rem 0.8rem;
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
    font-size: var(--font-sm);
    color: #fff;
}

/* --------------
input / select / textarea
-------------- */
.form-control {
    width: 100%;
    padding: 1.2rem;
    border-radius: var(--radius-sm);
    border: 0.2rem solid #E2E3E4;
    font-size: var(--font-base);
    font-family: var(--font-family-primary);
}

textarea.form-control {
    height: 20rem;
}

/* --------------
入力内容確認
-------------- */
.form-value {
    padding-bottom: 2rem;
    border-bottom: 0.2rem solid #fff;
}

/* --------------
error
-------------- */
.error-disp {
    font-size: var(--font-sm);
    color: #ca2800;
    font-weight: 600;
}

/* --------------
privacy-check
-------------- */
label.privacy-check {
    display: block;
    width: 100%;
    border: 0.2rem solid #E2E3E4;
    padding: 2rem 1.6rem;
    border-radius: var(--radius-sm);
    background-color: #fff;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

label.privacy-check:hover {
    border: 0.3rem solid var(--color-primary);
}

label.privacy-check span.error-disp {
    display: block;
    margin: 0.8rem auto 0;
    text-align: center;
}

/* --------------
btn--inquiry
-------------- */
input.btn--inquiry,
a.btn--inquiry {
    display: block;
    width: 100%;
    padding: 2rem 1.6rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    border: none;
    color: #fff;
    font-size: var(--font-md);
    font-family: var(--font-family-primary);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: var(--trans-bounce);
}

input.btn--inquiry:hover,
a.btn--inquiry:hover {
    transform: scale(0.98);
}


/* 戻る */
.btn--inquiry-back {
    display: block;
    width: 16rem;
    margin: 1.6rem auto 0;
    padding: 0.8rem;
    background-color: var(--color-text-sub);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: var(--font-base);
    color: #fff !important;
    cursor: pointer;
    border: none !important;
}

.btn--inquiry-back:hover {
    opacity: 0.7;
}