:root {
  /* ---- Base ---- */
  --fz-text:      clamp(15px, 1.5vw, 18px);
  --fz-h2:        clamp(28px, 2.5vw, 32px);
  --fz-subhead:   clamp(16px, 1.5384615385vw, 20px);
  --fz-h2-small:  clamp(16px, 1.3846153846vw, 18px);
  --fz-heading-small: clamp(19px, 1.85vw, 24px);

  /* ---- Layout width ---- */
  --w-main: 1300px;
  --w-main-sp: 90%;

  /* ---- Spacing scale ---- */
  --space-sm: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-md: clamp(2rem, 1.6rem + 2vw, 3rem);
  --space-lg: clamp(5rem, 4rem + 3vw, 7rem);

  /* ---- color ---- */
  --color-navy: #1765b1;
  --color-light-blue: #e9eff7;
  --color-beige: #f7f2ea;
  --color-pink: #e66c6c;
  --color-yellow: #fff9a9;
  --color-deeppink: #d84848;
  --color-base:#000;

  /* ---- border --- */
  --st-radius: 10px;
  --st-border: 3px solid #1765b1;

  /* ---- Line height ---- */
  --lh-tight: 1.4;
  --lh-base:1.9;

  /* --- Font family --- */
  --ff-heading: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --ff-body:    "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;

  /* --- margin --- */
  --st-margin:30px;
}


/* ==========================================================================
   common
   ========================================================================== */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

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

body {
  margin: 0;
  color: var(--color-base);
  background: #fff;
  font-family:var(--ff-body);
  font-weight: 500;
  font-size: var(--fz-text);
  line-height: var(--lh-base);
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
}

main {
  display: block;
}

section {
  position: relative;
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img,
video,
iframe {
  height: auto;
}

picture {
  display: block;
}

figure,
p,
ul,
ol,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
ol {
  padding: 0;
  margin:0;
  list-style:none;
}

address {
  font-style: normal;
}

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

h1, h2, h3, .fv-heading-title {
  font-family: var(--ff-heading);
  font-weight: 700;
  padding-bottom:10px;
  margin-bottom:var(--st-margin);
}


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

main{
    width:100%;
    margin:0 auto;
}

.main-width {
    width:100%;
    max-width: min(var(--w-main), var(--w-main-sp));
    margin-inline: auto;
}
h2,
h3{
    font-size:var(--fz-h2);
    line-height:var(--lh-tight);
}

h2 span,
h3 span{
    font-size:var(--fz-subhead);
    display:block;
    margin-bottom:5px;
}

.flex{
    display:flex;
}

section{
    padding:100px 0;
}
.sp-none{
    display:none;
}


/* ==========================================================================
   heading
========================================================================== */
.fv-heading {
  width:min(1610px,90%);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: var(--st-border);
  margin:50px auto;
}

.fv-heading-image {
  flex: 0 0 40%;
  background: var(--color-beige);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 24px);
  padding-bottom:0;
  box-sizing: border-box;
}

.fv-heading-image img {
  display: block;
}

.fv-heading-title {
  flex: 1;
  margin: 0;
  padding: clamp(24px, 4vw, 44px) clamp(32px, 6vw, 64px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  gap:0;
  font-size:clamp(30px, 3vw, 42px);
  background:
    url("../img/h_bg.webp") center / cover no-repeat;
}

.fv-heading-title .number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 5px 16px;
  border-radius: var(--st-radius);
  background: #fff;
  color: var(--color-navy);
  font-size: var(--fz-h2);
}

.fv-heading-title .lead {
  display: block;
}

.fv-heading-title .main {
  display: block;
}

.fv-heading-title .main br {
  display: none;
}




/* ==========================================================================
   about
========================================================================== */
.about{
    background-color:var(--color-light-blue);
    padding-bottom:0;
}
.about h2 span{
    color:var(--color-navy);
}
.about h2{
    border-bottom:var(--st-border);
}
.about h2 br{
    display:none;
}
.about .flex{
    width:min(90%,900px);
    gap:50px;
    align-items:flex-end;
    margin:0 auto;    
}
.about .flex div:nth-child(1){
    flex:1;
    padding-bottom:40px;
}
.about .flex div:nth-child(2){
    flex:0 0 30%;
}


.check-point{
    background-color:#fff;
    padding:50px 30px;
    border-radius: var(--st-radius);
    max-width:var(--w-main);
    margin:0 auto;
    width:min(90%,var(--w-main));
}

.sp-illust{
    display:none;
}

.check-point h3{
    text-align:center;
    margin-bottom:32px;
}

.check-point h3 br{
    display:none;
}

.check-point ul{
    max-width:900px;
    margin:0 auto;
    padding:0;
    list-style:none;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap:20px;
    row-gap:20px;
}

.check-point ul li{
    padding-left:40px;
    padding-bottom:5px;
    background:url("../img/about_img03.webp") left 0.2em / 28px auto no-repeat;    
    font-size:var(--fz-heading-small);
    font-weight: 700;
}
.about .main-width{
    position:relative;
    padding-bottom:100px;
    width:min(1610px,95%);
}
.pc-illust{
    position:absolute;
    bottom:0;
    width: min(12vw, 200px);
}


/* ==========================================================================
   fact
========================================================================== */
.fact h2 br,
.case h2 br{
    display:none;
}
.fact h2,
.case h2{
    border-bottom:var(--st-border);
    text-align:center;
}
.fact{
    padding-bottom:30px;
}
.fact-list{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    column-gap:10px;
    text-align:center;
    margin-bottom:var(--st-margin);
}
.fact-list li{
    background-color:var(--color-navy);
    color:#fff;
    font-size:var(--fz-heading-small);
    padding:20px;
    border-radius: var(--st-radius);
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    font-weight:700;
}

.fact-list li span:nth-child(1){
    width: min(15vw, 50px);
}
.fact .flex{
    gap:30px;
}

.case{
    padding-bottom:0;
}

.case h2{
    margin-bottom:60px;
}

.case-card-wrap{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    column-gap:10px;
    position:relative;
    overflow: visible;
    padding-bottom: 0;
}

.case-card{
    position: relative;
    background: var(--color-light-blue);
    border-radius: var(--st-radius);
    padding:
    clamp(32px, 7vw, 48px)
    clamp(16px, 4vw, 24px)
    clamp(16px, 4vw, 24px);
    box-sizing: border-box;
}

.case-card .badge {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: clamp(44px, 16vw, 70px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.card-content h3 {
    margin: 0;
    padding:0;
    text-align:center;
}
.card-content h3 span {
    color:var(--color-navy);
}

.card-content p {
    flex: 1;
}


.arrow{
    width:clamp(120px, 14vw, 260px);
    margin:0 auto;
    text-align:center;
    padding:40px 0;
}





.caution{
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        to bottom,
        #fff 0 50%,
        var(--color-beige) 50% 100%
    );
}

.caution::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    aspect-ratio: 1024 / 112;
    background: url("../img/case_bg.webp") center / cover no-repeat;
    z-index: 0;
    pointer-events: none;
}

.caution .main-width{
    position: relative;
    z-index: 1;
    margin: 0 auto;
    background-color:var(--color-light-blue);
    border: var(--st-border);
    border-radius: var(--st-radius);
    box-sizing: border-box;
    text-align: center;
    padding:30px;
}

.caution h3{
    margin: 0;
    color: var(--color-navy);
}

.caution h3 > span{
    display: block;
    font-size:var(--fz-h2);
}

.caution h3 > span:first-child{
    margin-bottom: 14px;
    font-size:var(--fz-subhead);
}
.caution h3 > span br{
    display: none;
}


.caution .title-bg{
    display: inline-block;
    padding: 6px 12px;
    background: var(--color-navy);
    color: #fff;
}

.caution p{
    color: var(--color-base);
}


.case02{
    padding-top:50px;
    padding-bottom:50px;
    background-color:var(--color-beige);
}

.case02 h2{
    border:none;
    margin-bottom:var(--st-margin);
}

.case02 h2 br{
    display:inline;
}

.case02-card-wrap{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap:30px;
    max-width:900px;
    margin:0 auto;
}

.case02-card{
    background-color:#fff;
    border:var(--st-border);
    border-color:var(--color-pink);
    text-align:center;
    border-radius: var(--st-radius);
    overflow:hidden;
}

.case02-card h3{
    background-color:var(--color-pink);
    color:#fff;
    font-size:var(--fz-heading-small);
    margin:0;
    padding:12px 16px;
}

.case02-card-body{
    padding:20px 24px 24px;
    display:grid;
    row-gap:16px;
}

.case02-card p{
    margin:0;
    font-size:var(--fz-heading-small);
    font-weight:700;
    line-height:1.7;
}

.case02-card-body > div{
    width:min(100%, 150px);
    margin-inline:auto;
    display:flex;
    align-items:flex-start;
    justify-content:center;
}

.case02-card-body > div img{
    display:block;
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}

.case02 .flex{
    padding-top:70px;
    max-width:900px;
    margin:0 auto;
    justify-content:center;
    align-items:center;
    gap:30px;
}
.case02 .flex>div{
    flex:0 0 40%;
}
.case02 .flex p{
    font-size:var(--fz-heading-small);
    font-weight:700;
}
.case02 .flex p span{
    display:block;
    font-size:var(--fz-subhead);
}




/* ==========================================================================
   relief
========================================================================== */
.relief{
    padding-top:0;
    margin-top:0;
}
.relief-title{
    position: relative;
    overflow: visible;
    padding-top: clamp(30px, 4vw, 40px);
    background:url(../img/diagonal_stripe_tile_72.png) repeat;
    background-size:10px 10px;
}
.relief-list-title h3 br{
    display:none;
}

.comment-badge{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.comment-badge img{
    display: block;
    height: auto;
    width:100%;
}

.relief-title-content{
    display:flex;
    gap:10px;
    max-width:900px;
    margin:0 auto;
    justify-content:center;
    align-items:center;
}
.relief-title-content>div{
    flex:0 0 30%;
    min-width:120px;
}
.relief-title-content>div img{
    min-width:120px;
}
.relief-title-content h2{
    margin-bottom:0;
    padding-bottom:0;
}
.relief-title-content h2 span{
    color:#fff;
    font-size:var(--fz-heading-small);
}
.relief-title-content h2 span br{
    display:none;
}



.relief-link {
    margin: 0 auto;
    padding: clamp(30px, 5.5vw, 50px) 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 28px) clamp(14px, 2vw, 24px);
    width:min(95%,var(--w-main));
}
.relief-link li { grid-column: span 2; }
.relief-link li:nth-child(4) { grid-column: 2 / 4; }
.relief-link li:nth-child(5) { grid-column: 4 / 6; }

.relief-link a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        clamp(26px, 3vw, 34px)
        clamp(18px, 2vw, 24px)
        clamp(28px, 3vw, 36px);

    background: var(--color-yellow);
    border: 3px solid var(--color-pink);
    border-radius: 10px;
    box-shadow: 0 6px 0 #ccc;

    text-align: center;
    text-decoration: none;
    color: var(--fz-base);
    box-sizing: border-box;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.relief-link a:hover{
    transform: translateY(2px);
    box-shadow: 0 4px 0 #ccc;
}

.relief-link a > div:last-child{
    font-weight: 700;
}

.relief-link .link-badge{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -42%);
    z-index: 2;
    line-height: 0;
}

.relief-link .link-badge img{
    display: block;
    width: clamp(44px, 5.5vw, 55px);
    height: auto;
}

.relief-link a::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: 14px;
    height: 14px;
    border-right: 2px solid var(--color-pink);
    border-bottom: 2px solid var(--color-pink);
    transform: translateX(-50%) rotate(45deg);
    box-sizing: border-box;
}



.relief-list-wrap ul{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.relief-list-title{
    text-align:center;
}
.relief-list-title>div{
    width: clamp(70px, 8vw, 130px);
    margin: 0 auto;
}
.relief-list-title>div>img{
    width:100%;
}
.relief-list-title h3{
    background-color:var(--color-pink);
    color:#fff;
    padding-top:10px;
    margin-bottom:0px;
    border-top-left-radius: var(--st-radius);
    border-top-right-radius: var(--st-radius);
}
.relief-list-wrap .flex{
    background-color:var(--color-beige);
    padding:30px;
    gap:30px;
    border-bottom-left-radius: var(--st-radius);
    border-bottom-right-radius: var(--st-radius);
}

#relief-02 .flex{
    flex-direction:row-reverse;
}
#relief-04 .flex{
    flex-direction:row-reverse;
}



.relief-list-wrap .flex .highlight{
    color:var(--color-pink);
    font-weight:700;
}

.relief-list-wrap .flex>div:nth-child(1){
    flex:0 0 60%;
}
.relief-list-wrap .flex>div:nth-child(2){
    flex:1;
}

.half-order-btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    font-weight:700;
    padding:20px;
    background-color:var(--color-pink);
    box-shadow: 0 6px 0 #ccc;
    border-radius:var(--st-radius);
    text-align:center;
    margin:30px 0;
    width:100%;
    max-width:450px;
}

.half-order-btn::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 16px solid #fff;
}

.half-order-btn br{
    display:none;
}




.cta{
    background:url(../img/diagonal_stripe_tile_72.png) repeat;
    background-size:10px 10px;
}
.cta .flex{
    gap:50px;
    align-items:center;
    justify-content:center;
}
.cta .flex div:nth-child(1){
    flex:0 0 40%;
}
.cta .flex div h2{
    color:#fff;
    text-align:center;
    font-size:clamp(30px, 3vw, 42px);
}
.cta>div>div>ul{
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    gap: 20px;
}

.cta>div>div>ul li{
    position: relative;
}

.cta>div>div>ul li > div:first-child{
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-bottom: -18px;
}

.cta>div>div>ul li > div:first-child a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(48px, 5vw, 64px);
    padding: 0 clamp(24px, 4vw, 48px);
    border: var(--st-border);
    border-radius: 999px;
    background: #fff;
    color: var(--color-navy);
    font-size: var(--fz-text);
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}

.cta>div>div>ul li > div:first-child a span{
    display: block;
}

.cta>div>div>ul li > div:last-child a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 4vw, 40px) clamp(64px, 8vw, 96px) clamp(24px, 3vw, 32px);
    border-radius: var(--st-radius);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 12px 0 var(--color-navy);
    transition: transform .2s ease, box-shadow .2s ease;
}

.cta>div>div>ul li > div:last-child a:hover{
    transform: translateY(4px);
    box-shadow: 0 8px 0 var(--color-navy);
}

.cta>div>div>ul li > div:last-child a::after{
    content: "";
    position: absolute;
    top: 50%;
    right: clamp(22px, 3vw, 36px);
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 20px solid currentColor;
}

.cta>div>div>ul li:nth-child(1) > div:last-child a{
    background: var(--color-pink);
    color: #fff;
    font-size:var(--fz-heading-small);
}

.cta>div>div>ul li:nth-child(2) > div:last-child a{
    background: var(--color-yellow);
    color: var(--color-navy);
    font-size:var(--fz-heading-small);
}

footer{
    padding:60px 0 100px;
    text-align:center;
}
footer>div{
    max-width:240px;
    margin:0 auto;
}





/* ==========================================================================
   sp
========================================================================== */
@media (max-width: 768px) {
:root {
  --st-radius: 5px;
}


section {
    padding: 50px 0;
}

h2 br,
h3 br{
    display:block!important;
}

.main-width{
    width:var(--w-main-sp);
}

.fv-heading {
  flex-direction:column;
  width:var(--w-main-sp);
  margin:20px auto;
}
.fv-heading-title{
    text-align:center;
    line-height:var(--lh-tight);
}
.fv-heading-title .number {
    margin:0 auto 10px;
    padding: 2px 10px;
    font-size: var(--fz-subhead);
}
.fv-heading-title .main br{
    display:block;
}

.about{
    padding:50px 0 0;
}
.about .main-width {
    padding-bottom: 50px;
}

.about .flex {
    flex-direction:column;
    max-width: 100%;
    gap: 10px;
    align-items: center;
}
.about h2{
    text-align:center;
}
.about .flex div:nth-child(1) {
    padding-bottom: 10px;
}
.about .flex div:nth-child(2) {
    max-width:200px
}


.check-point{
    padding: 30px 15px;
    width:100%;
}
.check-point h3 {
    text-align: left;
    margin-bottom: 10px;
}

.check-point-title{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    margin-bottom:5px;
}

.sp-illust {
    display: block;
    width:min(30%,120px);
}

.pc-illust{
    display:none;
}

.check-point ul {
    width: 100%;
    max-width:310px;
    margin:0 auto;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 5px;
}
.check-point ul li {
    font-size: var(--fz-subhead);
    padding-left: 34px;
}

.fact-list{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 5px;
    width:100%;
    max-width:320px;
    margin:0 auto var(--st-margin);
}
.fact-list li {
    padding: 10px;
}

.fact .flex {
    flex-direction: column;
}

.case-card-wrap {
    grid-template-columns: minmax(0, 1fr);
    row-gap:50px;
}
.case-card {
    padding: clamp(42px, 7vw, 48px) clamp(16px, 4vw, 24px) clamp(16px, 4vw, 24px);
}
.caution p {
    text-align:left;
}
.caution p br{
    display:none;
}


.case02-card-wrap {
    grid-template-columns: minmax(0, 1fr);
    row-gap:30px;
}


.case02{
    padding-bottom:0;
}
.case02 .flex {
    flex-direction:column-reverse;
    gap: 10px;
    padding-top:30px;
}

.case02 .flex p {
    text-align:center;
}
.case02 .flex>div {
    width:min(100%, 250px);
}

.comment-badge.sp-none{
    display:block;
}

.comment-badge.pc-none{
    display:none;
}



.relief-title-content{
    flex-direction:column-reverse;
}

.relief-title-content h2 {
    text-align:center;
}

.relief-title-content>div img {
    width:min(100%, 200px);
    text-align:center;
    margin:0 auto;
}

.relief-list-title h3 {
    font-size:var(--fz-heading-small);
}

.comment-badge {
    width: min(300px, 100%);
}

.relief-list-wrap .flex {
    flex-direction:column;
}
#relief-02 .flex{
    flex-direction:column;
}
#relief-04 .flex{
    flex-direction:column;
}


.half-order-btn br{
    display:block;
}
.half-order-btn::after {
    right: 20px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #fff;
}

.cta{
    padding:50px 0;
}
.cta .flex{
    flex-direction:column;
}

.relief-link {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 2.2vw, 28px) clamp(14px, 2vw, 24px);
    width:95%;
    margin:0 auto;
}

.relief-link li,
.relief-link li:nth-child(4),
.relief-link li:nth-child(5) {
    grid-column: auto;
}

.relief-link li:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
}

.relief-link a{
    padding-right:0;
    padding-left:0;
}

.relief-link a > div:last-child{
    font-size:clamp(13px, 1.3vw, 16px);
    line-height:1.6;
}

footer>div {
    width: min(100%,200px);
    margin: 0 auto 20px;
}
}