/* mixin */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap");
main:where(#obihiro-life) { --black: #484848; color: var(--black); font-size: 16px; font-weight: normal; font-style: normal; font-family: "Zen Kaku Gothic New"; text-decoration: none; line-height: 1.2lh; overflow-x: clip; width: 100%; container-type: inline-size; }

main:where(#obihiro-life) * { color: inherit; font-size: 1em; font-weight: inherit; font-style: inherit; font-family: inherit; text-decoration: inherit; line-height: inherit; margin: 0; padding: 0; --pt: 0; --mt: 0; padding-top: var(--pt); margin-top: var(--mt); }

main:where(#obihiro-life) a:hover { color: inherit; }

main:where(#obihiro-life) a:is(:hover, :active) img { filter: none; }

main:where(#obihiro-life) .sr-only { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; }

main:where(#obihiro-life) [class|="ol_btn"] { padding: 1rem 1.5rem; padding-right: calc(0.5rem + 0.7rem + 1.5rem); border-radius: 100lvmax; line-height: 1lh; background-size: 0.7rem; background-position: calc(100% - 1.5rem) center; background-repeat: no-repeat; transition-property: background, color; transition-duration: 0.25s; transition-timing-function: ease; }

main:where(#obihiro-life) [class|="ol_btn"].ol_btn-b { background-color: white; background-image: url(../images/obihiro/life/ol_btn-b.svg); }

main:where(#obihiro-life) [class|="ol_btn"].ol_btn-w { color: white; background-color: #81BED5; background-image: url(../images/obihiro/life/ol_btn-w.svg); }

main:where(#obihiro-life) #olOt { background-color: #fff; background-image: linear-gradient(to bottom, #81BED5 1px, #fff0 0), linear-gradient(to right, #81BED5 1px, #fff0 0); background-size: 25px 25px; background-position: center; display: grid; justify-items: center; padding: 2rem; }

main:where(#obihiro-life) #olOt h2 { width: min(500px,100%); font-weight: bold; }

main:where(#obihiro-life) #olOc { border: solid 0.5rem #DEF1FF; background-color: #0F94D1; padding: 4rem 2rem; }

main:where(#obihiro-life) #olOc > div { margin-inline: auto; max-width: 1200px; display: grid; gap: 2rem; grid-template-columns: repeat(1, 1fr); }

main:where(#obihiro-life) #olOc img { width: 100%; }

main:where(#obihiro-life) #olOa { background-image: url(../images/obihiro/life/olOa.webp); background-size: cover; background-position: center; display: grid; justify-items: center; padding: 4rem 2rem; }

main:where(#obihiro-life) #olOa > div { margin-inline: auto; max-width: 700px; display: grid; gap: 1rem; color: white; }

main:where(#obihiro-life) #olOa > div h3 { font-size: 1.25rem; border-bottom: solid 0.125rem; font-weight: bold; }

main:where(#obihiro-life) #olOa > div img { border-radius: 2rem; }

main:where(#obihiro-life) #olT { background-color: #DFF0F6; padding: 3rem 2rem; display: grid; justify-items: center; }

main:where(#obihiro-life) #olT div { display: grid; place-items: center; width: min(800px,100%); grid-template-columns: 1fr; }

main:where(#obihiro-life) #olT a { transition: filter 0.25s ease; }

main:where(#obihiro-life) #olL1 { background-image: url(../images/obihiro/life/olL1.webp); background-size: cover; background-position: center; display: grid; justify-items: center; padding: 3rem 2rem; }

main:where(#obihiro-life) #olL1 h2 { width: min(400px,100%); font-weight: bold; }

main:where(#obihiro-life) #olLs { margin-top: 2rem; display: grid; justify-items: center; background-color: white; padding: 1rem; border-radius: 1rem; width: min(1200px,100%); }

main:where(#obihiro-life) #olLs h3 { width: min(700px,100%); font-weight: bold; }

main:where(#obihiro-life) #olLs p { padding-top: 1rem; max-width: 700px; }

main:where(#obihiro-life) .olLs { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }

main:where(#obihiro-life) .olLs > * { position: relative; }

main:where(#obihiro-life) .olLs :has(> h4) { border: solid 0.25rem #5A96AD; background-color: white; padding: 1rem; border-radius: 1rem; position: relative; margin-bottom: 1rem; font-weight: bold; }

main:where(#obihiro-life) .olLs :has(> h4) > div { position: absolute; width: 3.25rem; height: 1.5rem; top: 50%; right: 0; translate: 2.5rem -50%; filter: drop-shadow(0.25rem 0.25rem 0.125rem #0003); display: none; }

main:where(#obihiro-life) .olLs :has(> h4) > div > div { width: 100%; height: 100%; background-color: white; clip-path: polygon(0 50%, 100% 0, 100% 100%); }

main:where(#obihiro-life) .olLs h4 { font-size: 1.25rem; font-weight: bold; }

main:where(#obihiro-life) .olLs img { width: 100%; }

main:where(#obihiro-life) .olLs :has(> iframe) { background-color: white; padding: 0.5rem; border-radius: 1rem; filter: drop-shadow(0.25rem 0.25rem 0.125rem #0003); }

main:where(#obihiro-life) .olLs iframe { width: 100%; height: 100%; border-radius: 0.5rem; aspect-ratio: 1/1; }

main:where(#obihiro-life) #olL2 { background-color: #5DA0BA; padding: 3rem 2rem; display: grid; justify-items: center; }

main:where(#obihiro-life) #olLh, main:where(#obihiro-life) #olLf { background-color: white; padding: 1rem; display: grid; justify-items: center; border-radius: 1rem; width: min(1200px,100%); }

main:where(#obihiro-life) #olLh h3, main:where(#obihiro-life) #olLf h3 { width: min(600px,100%); margin-bottom: 1rem; font-weight: bold; }

main:where(#obihiro-life) #olLh p, main:where(#obihiro-life) #olLf p { max-width: 700px; }

main:where(#obihiro-life) #olLh-c, main:where(#obihiro-life) #olLf-c { width: min(1200px,100%); position: relative; display: grid; justify-items: center; margin-block: 2rem 3rem; padding-block: 3rem; padding-right: 1rem; gap: 2rem; }

main:where(#obihiro-life) #olLh-c > *, main:where(#obihiro-life) #olLf-c > * { position: relative; z-index: 2; }

main:where(#obihiro-life) #olLh-c .ol_btn-b, main:where(#obihiro-life) #olLf-c .ol_btn-b { border: solid 0.125rem #5A96AD; margin-top: 1rem; }

main:where(#obihiro-life) #olLh-c::before, main:where(#obihiro-life) #olLh-c::after, main:where(#obihiro-life) #olLf-c::before, main:where(#obihiro-life) #olLf-c::after { content: ""; background-color: white; display: block; position: absolute; width: 100cqi; height: 100%; right: 0; z-index: 1; border-radius: 0 7cqi 7cqi 0; }

main:where(#obihiro-life) #olLh-c::before, main:where(#obihiro-life) #olLf-c::before { background-image: url(../images/obihiro/life/olL1.webp); background-size: 100%; translate: 1rem -1rem; }

main:where(#obihiro-life) #olLf-c { scale: -1 1; }

main:where(#obihiro-life) #olLf-c > * { scale: -1 1; }

main:where(#obihiro-life) .olLh-c, main:where(#obihiro-life) .olLf-c { width: min(1200px,100%); display: grid; grid-template-columns: 1fr; gap: 1rem; }

main:where(#obihiro-life) .olLh-c img, main:where(#obihiro-life) .olLf-c img { width: 100%; }

main:where(#obihiro-life) .olLh-c h4, main:where(#obihiro-life) .olLf-c h4 { font-size: 1.25rem; font-weight: bold; }

main:where(#obihiro-life) .olLh-c p, main:where(#obihiro-life) .olLf-c p { padding-block: 1rem; }

main:where(#obihiro-life) .olLh-c div, main:where(#obihiro-life) .olLf-c div { display: flex; flex-direction: column; justify-content: center; align-items: start; }

main:where(#obihiro-life) #olC1 { background-color: #BBD7E2; background-image: url(../images/obihiro/life/olLC.webp), radial-gradient(circle, #DFBEC3ff 10px, #DFBEC300 0), radial-gradient(circle, #DFBEC3ff 10px, #DFBEC300 0); background-size: 100%, 100px 150px, 100px 150px; background-position: center top, 0px 0px, 50px 75px; background-repeat: no-repeat, repeat, repeat; padding-top: 10cqi; display: grid; justify-items: center; padding-inline: 2rem; }

main:where(#obihiro-life) #olC1 h2 { width: min(400px,100%); font-weight: bold; }

main:where(#obihiro-life) #olCs { margin-top: 3rem; display: grid; justify-items: center; background-color: white; padding: 1rem; border-radius: 1rem; width: min(1200px,100%); }

main:where(#obihiro-life) #olCs h3 { width: min(500px,100%); font-weight: bold; }

main:where(#obihiro-life) #olCs p { padding-top: 1rem; max-width: 700px; }

main:where(#obihiro-life) #olCs-c { background-color: #fffc; margin-top: 3rem; width: min(1200px,100%); display: grid; justify-items: center; padding: 3rem 1rem; border-radius: 5rem; border-top-left-radius: 0; container-type: inline-size; }

main:where(#obihiro-life) #olCs-c a { margin-top: 1rem; border: solid 0.125rem #5A96AD; }

main:where(#obihiro-life) .olCs-c { display: grid; justify-items: center; }

main:where(#obihiro-life) .olCs-c h4 { height: 11cqi; max-height: 4rem; margin-bottom: 2rem; font-weight: bold; }

main:where(#obihiro-life) .olCs-c h5 { font-size: 1.25rem; margin-bottom: 1rem; font-weight: bold; }

main:where(#obihiro-life) .olCs-c p { margin-bottom: 2rem; max-width: 700px; }

main:where(#obihiro-life) .olCs-c img { height: 100%; }

main:where(#obihiro-life) #olC2 { background-color: #fff; background-image: linear-gradient(to bottom, #81BED5 1px, #fff0 0), linear-gradient(to right, #81BED5 1px, #fff0 0); background-size: 25px 25px; background-position: center; padding-block: 3rem 5rem; display: grid; justify-items: center; }

main:where(#obihiro-life) #olCe, main:where(#obihiro-life) #olCp { width: min(1200px,100%); filter: drop-shadow(0.25rem 0.25rem 0.25rem #0007); container-type: inline-size; }

main:where(#obihiro-life) #olCe > div, main:where(#obihiro-life) #olCp > div { background-color: #F3F4F4; display: grid; justify-items: center; }

main:where(#obihiro-life) #olCe > div:nth-child(1), main:where(#obihiro-life) #olCp > div:nth-child(1) { background-color: #fff0; background-image: linear-gradient(#fff0 50%, #F3F4F4 0); }

main:where(#obihiro-life) #olCe > div:nth-child(1) img, main:where(#obihiro-life) #olCp > div:nth-child(1) img { width: min(500px,100%); }

main:where(#obihiro-life) #olCe > div:nth-child(2), main:where(#obihiro-life) #olCp > div:nth-child(2) { margin-top: -0.1cqi; padding-block: 2rem 5rem; padding-inline: 1rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), 60% 100%, 0 100%); }

main:where(#obihiro-life) #olCe h3, main:where(#obihiro-life) #olCp h3 { height: 14cqi; max-height: 5rem; font-weight: bold; }

main:where(#obihiro-life) #olCe h3 img, main:where(#obihiro-life) #olCp h3 img { height: 100%; }

main:where(#obihiro-life) #olCe h4 { height: 9cqi; max-height: 4rem; margin-top: 3rem; font-weight: bold; }

main:where(#obihiro-life) #olCe h4 img { height: 100%; }

main:where(#obihiro-life) .olCe-c1 { display: grid; max-width: 900px; gap: 2rem; margin-block: 2rem 3rem; grid-template-columns: repeat(1, 1fr); }

main:where(#obihiro-life) .olCe-c1 div { display: grid; justify-items: center; gap: 1rem; }

main:where(#obihiro-life) .olCe-c1 h4 { height: 9cqi; max-height: 4rem; margin-top: 3rem; font-weight: bold; }

main:where(#obihiro-life) .olCe-c1 h4 img { height: 100%; }

main:where(#obihiro-life) .olCe-c1 h5 { font-size: 1.25rem; font-weight: bold; }

main:where(#obihiro-life) #olCe-c2 { display: grid; gap: 2rem; grid-template-columns: 1fr; }

main:where(#obihiro-life) #olCe-c2 h4 { font-size: 1.25rem; font-weight: bold; }

main:where(#obihiro-life) #olCe-c2 > div { display: flex; flex-direction: column; justify-content: space-between; }

main:where(#obihiro-life) #olCe-c2 > div p { padding-block: 1rem; }

main:where(#obihiro-life) #olCp h3 { margin-bottom: 3rem; font-weight: bold; }

main:where(#obihiro-life) #olCp-c { display: grid; gap: 2rem; margin-top: 2rem; grid-template-columns: repeat(1, 1fr); }

main:where(#obihiro-life) #olCp-c > div { display: flex; flex-direction: column; }

main:where(#obihiro-life) #olCp-c > div h4 { font-size: 1.25rem; padding-block: 1rem; font-weight: bold; }

main:where(#obihiro-life) #olCw { background-image: url(../images/obihiro/life/olL1.webp); padding-block: 3rem; padding-inline: 1rem; display: grid; justify-items: center; }

main:where(#obihiro-life) #olCw h2 { width: min(400px,100%); font-weight: bold; }

main:where(#obihiro-life) #olCw h3 { height: 13cqi; max-height: 5rem; margin-top: 4rem; font-weight: bold; }

main:where(#obihiro-life) #olCw h3 img { height: 100%; }

main:where(#obihiro-life) .olCw-c { display: grid; justify-items: center; }

main:where(#obihiro-life) .olCw-c-c { width: min(1200px,100%); display: grid; gap: 2rem; margin-top: 2rem; grid-template-columns: 1fr; }

main:where(#obihiro-life) .olCw-c-c h4 { font-size: 1.25rem; font-weight: bold; margin-bottom: 0 !important; }

main:where(#obihiro-life) .olCw-c-c b { font-weight: bold; }

main:where(#obihiro-life) .olCw-c-c > div { display: flex; flex-direction: column; background-color: #BBD7E2; border-radius: 1rem; padding: 1rem; }

main:where(#obihiro-life) .olCw-c-c > div > *:not(:last-child) { margin-bottom: 1rem; }

main:where(#obihiro-life) #links { margin-block: 6rem 4rem; display: grid; width: min(1200px,100%); grid-template-columns: repeat(1, 1fr); }

main:where(#obihiro-life) #links a { transition: scale 0.25s ease; }

main:where(#obihiro-life) #links img { width: 100%; }

@media (any-hover: hover) { main:where(#obihiro-life) [class|="ol_btn"].ol_btn-b:hover { color: white; background-color: #81BED5; background-image: url(../images/obihiro/life/ol_btn-w.svg); } main:where(#obihiro-life) [class|="ol_btn"].ol_btn-w:hover { color: var(--black); background-color: white; background-image: url(../images/obihiro/life/ol_btn-b.svg); } main:where(#obihiro-life) #olT a:hover { filter: brightness(1.2); } main:where(#obihiro-life) #links a:hover { scale: 1.1; } }

@media (min-width: 800px) { main:where(#obihiro-life) #olOc > div { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1100px) { main:where(#obihiro-life) #olOc > div { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 576px) { main:where(#obihiro-life) #olT div { grid-template-columns: repeat(3, 1fr); } main:where(#obihiro-life) #links { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 768px) { main:where(#obihiro-life) .olLs { gap: 2rem; grid-template-columns: 2fr 3fr; } main:where(#obihiro-life) .olLs :has(> h4) { margin-bottom: 2rem; } main:where(#obihiro-life) .olLs :has(> h4) > div { display: block; } main:where(#obihiro-life) .olLs iframe { aspect-ratio: auto; } main:where(#obihiro-life) .olCe-c1 { grid-template-columns: repeat(3, 1fr); } main:where(#obihiro-life) #olCe-c2 { grid-template-columns: 1fr 1fr; } main:where(#obihiro-life) #olCp-c { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 992px) { main:where(#obihiro-life) #olLh-c::before, main:where(#obihiro-life) #olLh-c::after, main:where(#obihiro-life) #olLf-c::before, main:where(#obihiro-life) #olLf-c::after { border-radius: 0 4rem 4rem 0; } main:where(#obihiro-life) .olLh-c, main:where(#obihiro-life) .olLf-c { grid-template-columns: 1fr 2fr; } main:where(#obihiro-life) .olCw-c-c { grid-template-columns: 1fr 1fr; } main:where(#obihiro-life) #links#links { grid-template-columns: repeat(3, 1fr); } }