* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    color:#111827;
    background:#fff;
    line-height:1.65
}

img {
    display:block;
    max-width:100%
}

a {
    text-decoration:none;
    color:inherit
}

.container {
    width:min(1160px,calc(100% - 48px));
    margin:0 auto
}

.site-header {
    height:84px;
    background:#fff;
    border-bottom:1px solid #e2e8f0;
    position:sticky;
    top:0;
    z-index:50
}

.header-inner {
    height:84px;
    display:flex;
    align-items:center;
    gap:28px
}

.logo {
    margin-right:auto
}

.logo img {
    width:285px
}

.nav {
    display:flex;
    align-items:center;
    gap:34px;
    font-size:16px;
    font-weight:900
}

.nav a:hover {
    color:#0645a3
}

.header-btn {
    display:flex;
    align-items:center;
    gap:8px;
    background:#06b84f;
    color:#fff;
    font-weight:900;
    border-radius:8px;
    padding:12px 17px;
    box-shadow:0 8px 18px rgba(6,184,79,.22)
}

.header-btn img {
    width:26px;
    height:26px
}

.hero {
    background:linear-gradient(90deg,#fff 0%,#fff 43%,#eef7ff 100%);
    overflow:hidden
}

.hero-inner {
    display:grid;
    grid-template-columns:43% 57%;
    min-height:520px;
    align-items:center
}

.hero-copy {
    padding:40px 0 34px;
    position:relative;
    z-index:2
}

.badge {
    display:inline-block;
    border:2px solid #1dbb58;
    color:#139245;
    background:#fff;
    border-radius:999px;
    padding:6px 16px;
    font-size:16px;
    font-weight:900;
    margin:0 0 18px
}

.hero h1 {
    font-size:clamp(42px,5.1vw,72px);
    line-height:1.14;
    margin:0 0 12px;
    letter-spacing:.02em;
    font-weight:950
}

.hero h1 span {
    color:#0645a3
}

.lead {
    font-size:21px;
    font-weight:900;
    margin:0 0 18px
}

.check-box {
    display:inline-block;
    background:#fff;
    border:1.5px solid #ff9f35;
    border-radius:8px;
    padding:10px 24px;
    margin-bottom:20px
}

.check-box p {
    margin:2px 0;
    font-weight:900
}

.check-box p::before {
    content:"\2713";
    color:#06a847;
    font-weight:950;
    margin-right:12px
}

.line-main {
    width:min(410px,100%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    background:#06b84f;
    color:#fff;
    font-size:25px;
    font-weight:950;
    border-radius:8px;
    padding:15px 20px;
    box-shadow:0 12px 24px rgba(6,184,79,.22)
}

.line-main img {
    width:36px;
    height:36px
}

.caption {
    max-width:410px;
    text-align:center;
    font-weight:800;
    margin:11px 0 0
}

.hero-photo {
    position:relative;
    height:520px;
    align-self:stretch;
    margin-right:calc((100vw - min(1160px,calc(100vw - 48px)))/-2)
}

.hero-photo>img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center
}

.hero-photo::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.70) 13%,rgba(255,255,255,.04) 35%);
    pointer-events:none
}

.trust-card {
    position:absolute;
    bottom:30px;
    background:rgba(255,255,255,.92);
    border:1px solid #e5eef9;
    border-radius:10px;
    box-shadow:0 8px 22px rgba(0,0,0,.13);
    min-width:124px;
    text-align:center;
    padding:13px 12px
}

.trust-card img {
    width:35px;
    height:35px;
    margin:0 auto 3px
}

.trust-card b {
    display:block;
    font-size:15px;
    line-height:1.2
}

.trust-card strong {
    display:block;
    color:#0645a3;
    font-size:25px;
    line-height:1.25;
    font-weight:950
}

.trust-1 {
    left:34%
}

.trust-2 {
    left:55%
}

.trust-3 {
    left:76%
}

.section {
    padding:34px 0 44px
}

.section h2 {
    text-align:center;
    font-size:32px;
    letter-spacing:.04em;
    margin:0 0 24px;
    font-weight:950
}

.problem,.service,.price,.faq {
    background:linear-gradient(#f7fbff,#fff)
}

.problem-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px
}

.problem-grid article,.service-grid article,.case-grid article,.price-grid article {
    background:#fff;
    border:1px solid #e1eaf4;
    border-radius:10px;
    box-shadow:0 8px 18px rgba(25,62,105,.07)
}

.problem-grid article {
    text-align:center;
    padding:22px 10px 18px;
    min-height:176px;
    font-weight:900
}

.problem-grid img {
    width:72px;
    height:72px;
    margin:0 auto 12px
}

.problem-grid p {
    margin:0;
    font-size:15px
}

.service-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px
}

.service-grid article {
    text-align:center;
    padding:18px 10px 14px;
    min-height:165px
}

.service-grid img {
    width:68px;
    height:68px;
    margin:0 auto 8px
}

.service-grid h3 {
    color:#0645a3;
    font-size:20px;
    margin:0 0 5px;
    font-weight:950
}

.service-grid p {
    font-size:13px;
    margin:0;
    font-weight:700
}

.case {
    background:#fff
}

.case-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.case-grid article {
    display:grid;
    grid-template-columns:140px 1fr;
    gap:14px;
    padding:13px;
    align-items:center
}

.case-grid>article>img {
    width:140px;
    height:95px;
    object-fit:cover;
    border-radius:7px
}

.case-grid h3 {
    font-size:18px;
    margin:0 0 4px;
    color:#0645a3;
    font-weight:950
}

.case-grid p {
    font-size:13px;
    margin:0;
    font-weight:700
}

.case-grid strong {
    display:block;
    color:#ff7a00;
    font-size:29px;
    line-height:1.15;
    margin-top:3px
}

.case-grid small {
    display:inline-block;
    background:#f2f5f9;
    border-radius:999px;
    padding:2px 9px;
    font-weight:800;
    font-size:11px;
    margin-top:4px
}

.price-layout {
    display:grid;
    grid-template-columns:2fr 1.12fr;
    gap:28px;
    align-items:end
}

.price-area h2 {
    margin-bottom:22px
}

.price-area h2 small {
    font-size:14px
}

.price-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px
}

.price-grid article {
    text-align:center;
    padding:18px 12px;
    min-height:138px
}

.price-grid h3 {
    font-size:16px;
    margin:0 0 4px;
    font-weight:950
}

.price-grid strong {
    display:block;
    color:#ff7a00;
    font-size:38px;
    line-height:1.2;
    margin:0 0 6px
}

.price-grid p {
    font-size:13px;
    margin:0;
    font-weight:800
}

.support {
    background:#eff6ff;
    border-radius:10px;
    padding:22px 22px 12px;
    display:grid;
    grid-template-columns:1fr 105px;
    gap:16px;
    align-items:end;
    min-height:176px
}

.support h3 {
    color:#0645a3;
    font-size:23px;
    margin:0 0 10px;
    font-weight:950
}

.support ul {
    margin:0;
    padding:0;
    list-style:none
}

.support li {
    font-weight:900;
    margin:5px 0
}

.support li::before {
    content:"\2713";
    color:#0645a3;
    margin-right:10px
}

.support img {
    width:105px
}

.faq {
    padding-top:20px
}

.faq details {
    background:#fff;
    border:1px solid #e1eaf4;
    border-radius:10px;
    margin:10px 0;
    padding:14px 18px
}

.faq summary {
    cursor:pointer;
    font-weight:950
}

.faq p {
    margin:10px 0 0
}

.contact {
    background:linear-gradient(90deg,#0645a3,#005bd8);
    color:#fff;
    padding:30px 0
}

.contact-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px
}

.contact h2 {
    font-size:30px;
    margin:0 0 4px;
    font-weight:950
}

.contact p {
    margin:0;
    font-weight:800
}

.contact-buttons {
    display:flex;
    gap:16px;
    flex-shrink:0
}

.contact-buttons a {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:8px;
    color:#fff;
    font-size:19px;
    font-weight:950;
    padding:14px 28px
}

.contact-buttons img {
    width:30px;
    height:30px
}

.line-btn {
    background:#06b84f
}

.mail-btn {
    background:#ff8517
}

.footer {
    background:#f8fbff;
    border-top:1px solid #e1eaf4;
    padding:14px 0
}

.footer-icons {
    display:flex;
    justify-content:center;
    gap:95px;
    color:#334155;
    font-size:14px;
    font-weight:900
}

/*.footer-icons span::before {
    content:"笆｣";
    color:#0645a3;
    margin-right:8px
}

*/
@media(max-width:1050px) {
    .nav {
        display:none
    }

    .header-btn {
        display:none
    }

    .hero-inner {
        grid-template-columns:1fr
    }

    .hero-copy {
        padding:32px 0
    }

    .hero-photo {
        margin:0;
        height:360px
    }

    .hero-photo::before {
        display:none
    }

    .trust-card {
        display:none
    }

    .problem-grid,.service-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .case-grid,.price-layout,.price-grid {
        grid-template-columns:1fr
    }

    .contact-inner {
        display:block
    }

    .contact-buttons {
        margin-top:20px;
        flex-direction:column
    }

    .logo img {
        width:245px
    }

    .footer-icons {
        gap:24px;
        flex-wrap:wrap
    }

}

@media(max-width:560px) {
    .container {
        width:min(100% - 28px,1160px)
    }

    .hero h1 {
        font-size:42px
    }

    .section h2 {
        font-size:26px
    }

    .problem-grid,.service-grid {
        grid-template-columns:1fr
    }

    .case-grid article {
        grid-template-columns:1fr
    }

    .case-grid>article>img {
        width:100%;
        height:160px
    }

    .support {
        grid-template-columns:1fr
    }

    .support img {
        display:none
    }

}

/* === fixed 2026-05-11: logo and hero image adjustment === */
.logo img {

  width:290px;

  height:80px;

  object-fit:contain;

}

.site-header,
.header-inner {

  height:84px;

}

.hero-inner {

  grid-template-columns:43% 57%;

  min-height:520px;

}

.hero-photo {

  height:520px;

  overflow:hidden;

  background:#f1f7ff;

}

.hero-photo>img {

  width:100%;

  height:100%;

  object-fit:cover;

  object-position:center center;

  transform:none;

}

.hero h1 {

  font-size:clamp(40px,4.7vw,64px);

  line-height:1.16;

}

.trust-card {

  bottom:22px;

  min-width:122px;

}

.trust-1 {
    left:34%;

}

.trust-2 {
    left:54%;

}

.trust-3 {
    left:74%;

}

.footer-icons  {

    display: flex;

    justify-content: center;

    gap: 95px;

    color: #334155;

    font-size: 14px;

    font-weight: 900;

}

    .footer-icons span  {

        display: inline-flex;

        align-items: center;

        gap: 6px;

}

        .footer-icons span::before  {

            content: "";

            display: inline-block;

            width: 14px;

            height: 14px;

            flex-shrink: 0;

            background-size: contain;

            background-repeat: no-repeat;

            background-position: center;

            vertical-align: middle;

}

        .footer-icons span:nth-child(1)::before  {

            background-image: url("../images/icon-pc.svg");

}

        .footer-icons span:nth-child(2)::before  {

            background-image: url("../images/icon-japan.svg");

}

        .footer-icons span:nth-child(3)::before  {

            background-image: url("../images/icon-security.svg");

}

@media(max-width:1050px) {

  .logo img {
        width:245px;
        height:auto;

    }

  .hero-photo {
        height:360px;
        margin:0;

    }

}

@media (max-width: 768px)  {

  .hero-inner  {

    display: flex;

    flex-direction: column;

    }

  .hero-copy  {

    width: 100%;

    padding: 28px 20px;

    }

  .hero-photo  {

    width: 100%;

    height: auto;

    margin: 0;

    }

  .hero-photo > img  {

    width: 100%;

    height: auto;

    object-fit: cover;

    }

  .hero h1  {

    font-size: 42px;

    line-height: 1.18;

    }

  .badge  {

    font-size: 14px;

    line-height: 1.6;

    border-radius: 999px;

    }

}

/* ===== Glossary Index Page ===== */
.glossary-list  {
     max-width: 900px;
     margin: 0 auto;

}

.glossary-list article  {

  margin-bottom: 16px;

  min-height: auto;

  padding: 22px 24px;

  text-align: left;

  background:#fff;

  border:1px solid #e1eaf4;

  border-radius:10px;

  box-shadow:0 8px 18px rgba(25,62,105,.07);

}

.glossary-list article a  {
     display:block;

}

.glossary-list h3  {

  margin:0 0 8px;

  color:#0645a3;

  font-size:24px;

  font-weight:950;

}

.glossary-list p  {

  margin:0;

  font-size:15px;

  font-weight:700;

  color:#334155;

}

.glossary-list article:hover  {

  box-shadow:0 12px 24px rgba(25,62,105,.12);

  border-color:#bcd4f1;

}

/* 漫画表示：PCは2×2、スマホは1×4 */
.glossary-comic  {

    background: #fff;

}

    .glossary-comic .container  {

        overflow: hidden;

}

.comic-grid  {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

    max-width: 980px;

    margin: 0 auto;

}

    .comic-grid figure  {

        margin: 0;

        min-width: 0;

        background: #fff;

        border: 1px solid #e1eaf4;

        border-radius: 12px;

        box-shadow: 0 8px 18px rgba(25,62,105,.07);

        overflow: hidden;

}

    .comic-grid img  {

        display: block;

        width: 100%;

        height: auto;

}

@media (max-width: 700px)  {

    .comic-grid  {

        grid-template-columns: 1fr;

    }

}

/* サポート画像のサイズ調整 */
.support  {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 24px;

}

    .support img  {

        width: 135px;

        height: auto;

        flex-shrink: 0;

}

@media (max-width: 768px)  {

    .support  {

        flex-direction: column;

        text-align: center;

    }

        .support img  {

            width: 100px;

    }

}

@media (max-width: 768px)  {

    .footer-icons  {

        display: flex;

        flex-direction: column;

        gap: 10px;

        padding: 18px 0;

        text-align: center;

    }

        .footer-icons span  {

            justify-content: center;

            margin: 0;

    }

}