@charset "utf-8";

/* vars */

:root {
  --clr-wh: rgb(255 255 255);
  --clr-wh-90: rgb(255 255 255 / 90%);
  --clr-bk: rgb(16 34 63);
  --clr-bk-80: rgb(16 34 63 / 80%);
  --clr-bk-10: rgb(16 34 63 / 10%);
  --clr-bk-05: rgb(16 34 63 / 5%);
  --clr-bg: rgb(250 247 241);
  --clr-pk: rgb(255 110 109);
  --clr-pk-80: rgb(255 110 109 / 80%);
  --clr-pk-50: rgb(255 110 109 / 50%);
  --clr-pk-20: rgb(255 110 109 / 20%);
  --clr-pk-10: rgb(255 110 109 / 10%);
  --clr-pk-lt: rgb(255 222 220);
  --clr-gr: rgb(0 115 115);
  --clr-gr-80: rgb(0 115 115 / 80%);
  --clr-yl: rgb(255 190 90);
  --clr-yl-80: rgb(255 190 90 / 80%);
  --clr-yl-txt: rgb(128 72 0);
  --clr-line: rgb(6 199 85);
  --clr-line-80: rgb(6 199 85 / 80%);
  --lh-S: 1.3;
  --lh-M: 1.5;
  --lh-L: 1.8;
  --bdrd: 0.85rem;
}
/* 
orange :rgb(255 100 0);
blue : rgb(20 106 144);
background :rgb(247 247 245);
*/

/* initialization */

body {
  margin: 0;
  padding: 0;
  background-color: var(--clr-wh);
  font-size: 18px;
  line-height: 1;
  font-family:'Zen Maru Gothic', sans-serif;
  color: var(--clr-bk);
}

section, article, nav, aside, header, footer, address {display: block;}

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

h1, h2, h3, h4 {line-height: var(--lh-S);}
p {line-height: var(--lh-L);}
li {line-height: var(--lh-M);}

a:link {color: var(--clr-pk);}
a:visited {color: var(--clr-pk);}
a:hover {color: var(--clr-yl);}
a:active {color: var(--clr-yl);}

/* common elements */

#home_intro, #home_flow, #home_contact, #home_sns, body.home #footer {
  background-color: var(--clr-bg);
  overflow:hidden;
}
div.content,
#home_slides,
#ft_credit, #copyright,
#home_step,
div.page_intro {
  margin:0 auto;
  max-width:1080px;
}
div.content {
  margin:3rem auto;
  background-color: var(--clr-bg);
  overflow:hidden;
}
#home_flow div.content,
#home_contact div.content {background-color: var(--clr-wh);}

section h1 {
  margin:0 5% 3rem;
  padding-top:3rem;
  text-align:center;
}
#home_knowledge h1::before,
#home_contact h1::before {
  content:'';
  display:block;
  margin:-6rem 0 1em;
  width:100%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
#home_knowledge h1::before {
  height:14rem;
  background-image:url(/2024/images/illust_02.webp);
}
#home_contact h1::before {
  height:20rem;
  background-image:url(/2024/images/illust_03.webp);
}

/* body elements */

.body > *:last-child {margin-bottom:4rem !important;}
.body h2 {
  margin:2.25em 5%;
  text-align:center;
  line-height:1;
}
.body h2 span {
  display:inline-block;
  padding:0.75em 1.5em;
  background-color: var(--clr-wh);
  border:3px solid var(--clr-pk);
}
#home_flow .body h2 span,
#home_contact .body h2 span {background-color: var(--clr-bg)}
.body h3 {margin:1.75em 5%;}
.body p {margin:1em 5%;}
.body ul {
  margin: 1em 5%;
  list-style-type: '● ';
}
.body li {
  margin: 0.75em 0 0.75em 1.5em;
  padding: 0;
}
.body ul.inline {
  margin:1.5rem 5%;
  list-style-type:none;
}
.body ul.inline li {
  display:inline-block;
  margin:0 1em 0.5em 0;
  padding:0;
  text-indent:0;
}
.body ul.inline li::before {
  content:'●';
  margin-right:0.25em;
}

div.btn {
  margin:4rem 5%;
  text-align:center;
}
a.btn {
  display:inline-block;
  vertical-align:middle;
  padding:1em;
  background-color: var(--clr-pk);
  border-radius: var(--bdrd);
  color: var(--clr-wh);
}
a.btn:hover {background-color: var(--clr-pk-80);}
a.btn.b {background-color: var(--clr-gr);}
a.btn.b:hover {background-color: var(--clr-gr-80);}
a.btn.c {
  background-color: var(--clr-yl);
  color: var(--clr-bk-80);
}
a.btn.c:hover {background-color: var(--clr-yl-80);}
a[class*="page-"] {
  margin:0 1em;
  padding:1em 2.5em;
  padding-right:calc(4em + 5.625rem);
  background-position:right 2em center;
  background-repeat:no-repeat;
  background-size:5.625rem;
  background-image:url(/2024/images/bt_illust_01.webp);
  text-align:center;
}
a[class*="page-pickup"] {background-image:url(/2024/images/bt_illust_01.webp);}
a[class*="page-kit"] {background-image:url(/2024/images/bt_illust_02.webp);}
a[class*="page-howto"] {background-image:url(/2024/images/bt_illust_03.webp);}
a[class*="page-hospital"] {background-image:url(/2024/images/bt_illust_04.webp);}
a[class*="page-infected"] {background-image:url(/2024/images/bt_illust_05.webp);}
a[class*="page-toknow"] {background-image:url(/2024/images/bt_illust_01.webp);}
a[class*="page-uequ"] {background-image:url(/2024/images/bt_illust_02.webp);}
a[class*="page-"] span {
  display:block;
  margin:0.75em 0;
}

.aligncenter {text-align:center;}

div.cols {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
  margin:2rem 5%;
}
div.cols.col2 > * {
  width:100%;
  max-width:calc(50% - 1rem);
}
div.cols img {
  max-width:100%;
  height:auto;
}

/* header */

#header h1 {
  margin:5rem 0 2rem;
  text-align:center;
}
#header h1 img {
  width:320px;
  height:auto;
}

/* home_slides */

#home_slides div.slides span {
  display:block;
  width:100%;
  height:540px;
  font-size:0;
}
#home_slides div.slides span a {
  display:block;
  width:100%;
  height:100%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
#home_slides span.flow a {background-image:url(/2024/images/home_slide_flow.png);}
#home_slides span.hivtest a {background-image:url(/2024/images/home_slide_hivtest.png);}
#home_slides span.knowledge a {background-image:url(/2024/images/home_slide_knowledge.png);}
#home_slides span.line a {background-image:url(/2024/images/home_slide_line.png);}
#home_slides span.hospital a {background-image:url(/2024/images/home_slide_hospital.png);}

ul.slick-dots {
  margin:1rem 5%;
  text-align:center;
  font-size:0;
}
ul.slick-dots li {display:inline;}
ul.slick-dots button {
  margin:0 0.35em;
  padding:0;
  width:1rem;
  height:1rem;
  background-color: var(--clr-pk-20);
  border:none;
  color:transparent;
  cursor:pointer;
}
ul.slick-dots li:hover button {background-color: var(--clr-pk-50);}
ul.slick-dots li.slick-active button {background-color: var(--clr-pk);}

/* news */

#news div.content {
  box-sizing:border-box;
  background-color: var(--clr-pk-10);
  border-left:0.5rem solid var(--clr-pk);
  overflow:hidden;
}
#news h1 {
  margin:1em 5%;
  padding:0;
  text-align:left;
}
#news p {margin:1em 5%;}

/* home_intro */

#home_intro {
  margin-top: 3rem;
  text-align: center;
}
#home_intro h1 {
  margin:0 5% 1em;
  padding:0;
  background-color:transparent;
}
#home_intro h1 span {display:block;}
#home_intro h2 {margin:1em 5%;}
#home_intro h2 span {display:block;}

#home_intro_nav::after {
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin-left:5%;
  width:24rem;
  height:auto;
  aspect-ratio:106.2/100;
  background:url(/2024/images/illust_01.webp) center no-repeat;
  background-size:100%;
}
#home_intro_nav ul {
  display:inline-block;
  vertical-align:middle;
  text-align:left;
}
#home_intro_nav li {margin:1rem 0;}
#home_intro_nav li a {
  display:block;
  padding:1em 1.5em;
  border-radius: var(--bdrd);
}
li.entry a {
  background-color: var(--clr-gr);
  color: var(--clr-wh);
}
li.entry a:hover {background-color: rgb(0 143 143);}
li.result a {
  background-color: var(--clr-yl);
  color: var(--clr-bk-80);
}
li.result a:hover {background-color: var(--clr-yl-80);}
li.line a {
  background-color: var(--clr-line);
  color: var(--clr-wh);
}
li.line a span.check {font-size:110%;}
li.line a:hover {background-color: var(--clr-line-80);}
li.entry a::before, li.result a::before, li.line a::before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin-right:1em;
  width:2.25em;
  height:2.25em;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100%;
}
li.entry a::before {background-image:url(/2024/images/ic_post.webp);}
li.result a::before {background-image:url(/2024/images/ic_heart.webp);}
li.line a::before {background-image:url(/2024/images/ic_line.webp);}

/* nav */

@media only screen and (min-width:769px) {
  #nav {
    position:fixed;
    z-index:101;
    top:0;
    translate:0 -150%;
    width:100%;
    opacity:0;
    transition:0.35s;
  }
  body.menu #nav {
    translate:0 0;
    opacity:1;
  }
}
#nav ul {
  display:flex;
  background-color: var(--clr-wh);
}
#nav li {flex:1;}
#nav li a {
  box-sizing:border-box;
  display:block;
  padding:1em;
  height:100%;
  text-align:center;
}

#nav ul.section a {color: var(--clr-bk);}
#nav ul.section li:nth-child(odd) a {background-color: var(--clr-bg);}
#nav ul.section li a:hover {background-color: var(--clr-pk-20);}

#nav_mb {display:none;}

/* home_hivtest */

/* home_flow */

#home_step ol {
  margin:4rem auto;
  padding:0;
  max-width:80%;
  background:url(/2024/images/home_step_01.webp) left top 7% no-repeat,
    url(/2024/images/home_step_02.webp) left top 54% no-repeat,
    url(/2024/images/home_step_03.webp) left bottom 1% no-repeat;
  background-size:auto 25%;
}
#home_step li {
  position:relative;
  margin:2rem 0;
  padding:0 0 0 30%;
  counter-increment:step;
}
#home_step li::before {display:block;}
#home_step li:nth-of-type(1)::before {content:'【事前確認】';}
#home_step li:nth-of-type(3)::before {content:'【申し込み】';}
#home_step li:nth-of-type(5)::before {content:'【検査結果】';}
#home_step li:nth-of-type(1)::after,
#home_step li:nth-of-type(3)::after,
#home_step li:nth-of-type(5)::after {
  content:'';
  position:absolute;
  top:0.8em;
  width:30%;
  translate:-100% 0;
  border-top:3px solid var(--clr-bk);
}
#home_step li:nth-of-type(2)::after,
#home_step li:nth-of-type(4)::after {
  content:'';
  position:absolute;
  right:20%;
  width:68px;
  height:205px;
  background:url(/2024/images/home_step_arrow.webp) center no-repeat;
  background-size:100%;
  mix-blend-mode:multiply;
}
#home_step li:nth-of-type(2)::after {bottom:-2.5rem;}
#home_step li:nth-of-type(4)::after {top:2.5rem;}
#home_step li h3::before {
  content:counter(step);
  display:inline-block;
  vertical-align:middle;
  margin:-0.3em 0.5rem 0 0;
  padding:0.25em;
  min-width:1em;
  height:1em;
  line-height:1;
  background-color: var(--clr-bk);
  text-align:center;
}

#home_result_status ul {
  display:flex;
  gap:0 2rem;
  list-style-type:none;
}
#home_result_status li {
  padding:0;
  width:33.33%;
  background-color: var(--clr-pk);
  text-indent:0;
}
#home_result_status li span {display:block;}
#home_result_status span.title {
  margin:1.5rem;
  margin-bottom:1rem;
  padding-bottom:0.5em;
  border-bottom:3px solid var(--clr-wh);
  text-align:center;
}
#home_result_status span.desc {
  margin:1.5rem;
  margin-top:1rem;
}

#home_flow div.content:last-of-type {margin-bottom:6rem;}

/* home_knowledge */

#home_knowledge h3 {text-align:center;}
#home_knowledge div.content:last-of-type {margin-bottom:6rem;}

/* home_entry */

aside.entry {
  position:sticky;
  bottom:1rem;
}
aside.entry div.btn {margin:8rem;}
aside.entry div.btn a.btn {
  min-width:50%;
  padding:0.75em;
  font-size:1.5rem;
  background-color: var(--clr-gr);
  color: var(--clr-wh);
}
aside.entry div.btn a.btn:hover {background-color: rgb(0 143 143);}
aside.entry div.btn a.btn::before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin:-0.1em 1em 0 0;
  width:2.25em;
  height:2.25em;
  background:url(/2024/images/ic_post.webp) center no-repeat;
  background-size:100%;
}

/* home_contact */

#home_contact {
  padding-bottom:1px;
  overflow:visible;
}

div.bnr_std {
  display:table;
  margin:2rem auto;
  padding:1.5rem;
  padding-bottom:calc(3rem + 30px);
  max-width:50%;
  background: var(--clr-yl) url(/2024/images/bnr_std.webp) center bottom 1.5rem no-repeat;
  background-size:auto 30px;
  text-align:center;
}
div.bnr_std h3 {
  margin:0 5% 1em;
  color: var(--clr-bk-80);
}
div.bnr_std h3::before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin:-0.15em 0.25em 0 0;
  width:1.5em;
  height:1.5em;
  background:url(/2024/images/ic_heart.webp) center no-repeat;
  background-size:100%;
}
div.bnr_std a.btn {
  display:inline-block;
  padding:1em 1.5em;
  background-color: var(--clr-gr);
}
div.bnr_std a.btn:hover {background-color: var(--clr-gr-80);}

div.bnr_line {
  margin:0 auto;
  max-width:880px;
}
div.bnr_line a {
  display:flex;
  padding:2rem;
  gap:2rem;
  background-color: var(--clr-line);
  border-radius: var(--bdrd);
}
div.bnr_line a:hover {background-color: var(--clr-line-80);}
div.bnr_line div.info {width:50%;}
div.bnr_line div.info h3 {
  margin:0 0 1em;
  text-align:center;
}
div.bnr_line div.info p {
  padding-left:7rem;
  min-height:6rem;
  background:url(/2024/images/ic_line.webp) center left no-repeat;
  background-size:6rem;
}
div.bnr_line .body {
  position:relative;
  width:50%;
  background-color: var(--clr-wh);
  text-shadow:0px 0px 0.5em var(--clr-wh);
}
div.bnr_line .body::after {
  content:'';
  position:absolute;
  right:-6em;
  bottom:0em;
  display:block;
  width:auto;
  height:10em;
  aspect-ratio:15/14;
  background:url(/2024/images/illust_13.webp) center no-repeat;
  background-size:100%;
}
div.bnr_line .body p {
  position:relative;
  z-index:1;
}
div.bnr_line .body ul {
  position:relative;
  z-index:1;
  margin-bottom:1em !important;
}
div.bnr_line div.benefits {color: var(--clr-bk);}

/* home_sns */

#home_sns ul {
  margin:0 5%;
  text-align:center;
}
#home_sns li {display:inline;}
#home_sns li a {
  display:inline-block;
  margin:0 0.5rem;
  padding:0.75em 3em 0.75em 5em;
  background-color: var(--clr-bk);
  background-repeat:no-repeat;
}
#home_sns li a:hover {background-color: var(--clr-bk-80);}
#home_sns li.twitter a {
  background-image:url(/2024/images/ic_x.png);
  background-position:left 1.75em center;
  background-size:1.75em;
}
#home_sns li.facebook a {
  background-image:url(/2024/images/ic_facebook.webp);
  background-position:left 1.75em bottom;
  background-size:2.25em;
}

#ft_credit {margin-top:4rem;}
#ft_credit p {
  margin: 1rem 0;
  line-height: var(--lh-M);
}
#copyright {
  display:block;
  margin:1rem auto 4rem;
}

/* page - commons */

body.page #header span.title_img {
  display:block;
  margin:3rem 5%;
  text-align:center;
}
body.page #header span.title_img img {
  width:auto;
  height:16rem;
}
body.page #header h1 {margin:1em 5%;}
body.page #header h2 {
  margin:1.5em 5%;
  text-align:center;
}

div.page_intro p {
  margin:1em 5%;
  text-align:center;
}

aside.page_close {
  margin:4rem 5%;
  text-align:center;
}
a.btn.close {
  padding:0.85em 1.35em;
  background-color: var(--clr-wh);
  border:3px solid var(--clr-pk);
}
a.btn.close:hover {background-color: var(--clr-pk-10);}
a.btn.close:before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  margin:-0.2em 0.5em 0 0;
  width:2em;
  height:2em;
  background:url(/2024/images/bt_close.webp) center no-repeat;
  background-size:100%;
}

div.mov span.title {
  display:block;
  margin:0 0 0.5em;
  line-height: var(--lh-S);
}
div.mov iframe {
  width:100%;
  height:auto;
  aspect-ratio:16/9;
}
div.mov span.caprion {
  display: block;
  margin: 0.5em 0;
  font-size: 1rem;
  line-height: var(--lh-S);
}

/* page - test-kit */

body.test-kit div.cols {
  margin:2rem auto;
  max-width:50%;
}

/* page - specialized-hospital */

body.specialized-hospital div.page_intro p {
  padding-left:1em;
  text-align:left;
  text-indent:-1em;
}
body.specialized-hospital div.page_intro p:before {content:'● ';}
body.specialized-hospital .body li.base::before {
  content: '拠点病院';
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 0.5rem;
  padding: 0.35em 0.7em;
  background-color: var(--clr-pk);
  border-radius: var(--bdrd);
  font-size: 0.875rem;
  line-height: 1;
  font-weight: bold;
  color: var(--clr-wh);
}

/* page - req */

body.req .body span.check {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.25rem;
  width:1.35rem;
  height:1.35rem;
  background:url(/2024/images/ic_check.svg) center no-repeat;
  background-size:1.35rem;
  font-size: 0;
  color: transparent;
}

div.conditions ul {
  margin:3em 0;
  list-style-type:none;
}
div.conditions li {
  position:relative;
  margin:2em 5%;
  padding:0 0 0 calc(36px + 0.75em);
  text-indent:0;
}
div.conditions li span.checkbox {
  position:absolute;
  left:0;
  top:-0.1em;
  width:30px;
  height:30px;
  border:3px solid var(--clr-pk);
  cursor:pointer;
}
div.conditions li span.checkbox:hover {border-color: var(--clr-yl);}
div.conditions li.checked span.checkbox {
  background-color: var(--clr-pk-10);
  border-color: var(--clr-pk);
}
div.conditions li.checked span.checkbox:after {
  content:'';
  position:absolute;
  right:-10px;
  top:-5px;
  width:36px;
  height:36px;
  background:url(/2024/images/ic_check.svg) center no-repeat;
  background-size:36px;
}

div.scroll {
  margin:3rem 5%;
  padding:1em;
  height:20em;
  overflow:auto;
  border-top:1px solid var(--clr-bk-05);
  border-bottom:1px solid var(--clr-bk-05);
}

nav.paginate {
  margin:6rem 5%;
  text-align:center;
}
nav.paginate a {
  margin:0 0.25em 0.5rem;
  transition:0.5s opacity;
  line-height: var(--lh-S);
}
nav.paginate.checked a.home,
nav.paginate a.next {
  visibility:hidden;
  position:absolute;
  left:0;
  opacity:0;
}
nav.paginate.checked a.next {
  visibility:visible;
  position:static;
  opacity:1;
}
nav.paginate a.home {
  background-color: var(--clr-yl);
  color: var(--clr-bk-80);
}
nav.paginate a.home:hover {background-color: var(--clr-yl-80);}
nav.paginate a::before, nav.paginate a::after {
  display:inline-block;
  vertical-align:middle;
  margin-top:-0.2em;
  width:0.75em;
  height:0.75em;
  background:url(/2024/images/ic_arrow_01.png) center no-repeat;
  background-size:auto 100%;
}
nav.paginate a.home::before {
  content:'';
  margin-right:1em;
  rotate:180deg;
}
nav.paginate a.next::after {
  content:'';
  margin-left:1em;
}

div.schedule {
  margin: 0.5em 0 0;
  font-size: 1rem;
  line-height: var(--lh-L);
}

/* fx */

ul.slick-dots button,
section h2 span, article h2 span,
#home_step li h3::before,
div.bnr_std a.btn,
#home_sns a {border-radius:100vh;}

#nav {box-shadow:0px 0px 1rem var(--clr-bk-10);}

a:hover img,
div.slides span:hover {opacity:0.8;}

/* characters */

#home_step li h3::before,
#ft_credit, #copyright {font-size:0.875rem;}
h4, a.btn.close,
#nav ul.cta,
#home_intro p,
#home_intro_nav li a,
#home_sns li a {font-size:1.125rem;}
h3,
#home_step li::before,
#home_result_status span.title,
nav.paginate a {font-size:1.25rem;}
h2,
div.conditions ul {font-size:1.35rem;}
#news h1 {font-size:1.5rem;}
#home_intro h2 {font-size:1.875rem;}
section h1 {font-size:2rem;}

a.btn, span.bt_page,
#nav a,
#home_intro_nav li a,
#home_step li::before,
#home_result_status span.title,
#home_sns a,
div.mov span.title {font-weight:600;}

a.btn,
#nav a,
#home_intro_nav li a,
div.bnr_line a,
#home_sns a {text-decoration:none;}

a.btn.close {color: var(--clr-bk);}
.hl,
#home_intro h1,
#home_step li strong,
body.specialized-hospital div.page_intro p::before,
div.conditions li.checked span.checkbox + span {color: var(--clr-pk);}
div.bnr_std a {color: var(--clr-wh);}
#home_step li h3::before,
#home_result_status,
div.bnr_line a,
#home_sns a {color: var(--clr-wh);}

/* misc */

@media only screen and (min-width:769px) {
  a[href^="tel"] {
    color:inherit !important;
    text-decoration:none;
    cursor:default;
    pointer-events:none;
  }
}

@media only screen and (max-width:768px) {

/* initialization */

/* common elements */

div.content {margin: 2rem 5%;}

section h1 {
  margin: 0 5% 1.5em;
  padding-top: 1.5em;
}
#home_knowledge h1::before,
#home_contact h1::before {margin:-4rem 0 1em;}
#home_knowledge h1::before {height:7rem;}
#home_contact h1::before {height:10rem;}

/* body elements */

.body > *:last-child {margin-bottom:2rem !important;}
.body h2 {margin:1.5em 5%;}
.body h2 span {padding:0.5em 1em;}
.body h3 {margin:1.5em 5%;}

.body ul.inline {
  margin: 1em 5%;
  list-style-type: '● ';
}
.body ul.inline li {
  display: list-item;
  margin: 0.75em 0 0.75em 1.5em;
  padding: 0;
}
.body ul.inline li::before {content:none;}

.body img {max-width:100%;}

div.btn {margin:2rem 5%;}

a[class*="page-"] {
  margin:0;
  padding:1em;
  padding-right:calc(2em + 4rem);
  background-position:right 1em center;
  background-size:4rem;
}
a[class*="page-"] span {margin:0.5em 0;}
a[class*="page-"] + a[class*="page-"] {margin-top:1rem;}

div.cols {display:block;}
div.cols.col2 > * {max-width:inherit;}

/* header */

#header h1 {margin:3rem 5%;}
#header h1 img {width:240px;}

/* home_slides */

#home_slides div.slides span {
  height:auto;
  aspect-ratio:3/2;
}
#home_slides span.flow a {background-image:url(/2024/images/sp_home_slide_flow.png);}
#home_slides span.hivtest a {background-image:url(/2024/images/sp_home_slide_hivtest.png);}
#home_slides span.knowledge a {background-image:url(/2024/images/sp_home_slide_knowledge.png);}
#home_slides span.line a {background-image:url(/2024/images/sp_home_slide_line.png);}
#home_slides span.hospital a {background-image:url(/2024/images/sp_home_slide_hospital.png);}

/* home_intro */

#home_intro_nav {display:none;}

/* nav */

li.entry a::before, li.result a::before, li.line a::before {
  margin-right:0.5em;
  width:2em;
  height:2em;
}

#nav ul {flex-wrap:wrap;}
#nav li {flex:initial;}
#nav li.entry {width:100%;}
#nav li.result {width:50%;}
#nav li.line {width:50%;}
#nav li a {padding:1em 0.5em;}

#nav ul.section {display:none;}

#nav_mb {display:block;}
#nav_mb h1 {
  position:fixed;
  z-index:1002;
  right:10px;
  top:10px;
  margin:0;
  width:40px;
  height:40px;
  font-size:0;
  color:transparent;
}
#nav_mb h1:before, #nav_mb h1:after,
#nav_mb h1 span:before, #nav_mb h1 span:after {
  content:'';
  position:absolute;
  left:4px;
  width:32px;
  height:4px;
  background-color:#ccc;
  transition:0.4s;
}
#nav_mb h1:before {top:8px; background-color:#e60000;}
#nav_mb h1 span:before {top:15px; background-color:#ffd400;}
#nav_mb h1 span:after {top:22px; background-color:#008e00;}
#nav_mb h1:after {top:29px; background-color:#0043da;}
#nav_mb.active h1 {
  background-color: var(--clr-pk);
  border-radius:100vh;
}
#nav_mb.active h1:before {
  top:50%;
  opacity:0;
}
#nav_mb.active h1:after {
  bottom:50%;
  opacity:0;
}
#nav_mb.active h1 span:before, #nav_mb.active h1 span:after {
  top:calc(50% - 1px);
  transform:translate(0, -50%);
  height:2px;
  background-color: var(--clr-wh);
}
#nav_mb.active h1 span:before {transform:rotate(45deg);}
#nav_mb.active h1 span:after {transform:rotate(-45deg);}
#nav_mb ul {
  display:block;
  position:fixed;
  z-index:1001;
  left:0;
  top:100%;
  width:100%;
  height:100%;
  background-color: var(--clr-wh-90);
  overflow:auto;
  transition:0.4s top;
  -webkit-overflow-scrolling:touch;
}
#nav_mb.active ul {
  top:0;
  -webkit-backdrop-filter:blur(0.5rem);
  backdrop-filter:blur(0.5rem);
}
#nav_mb ul:before {
  content:'';
  display:block;
  height:60px;
}
#nav_mb a {
  display:block;
  margin:1em 5%;
  padding:1em;
  background-color: var(--clr-bg);
  text-align:center;
}
#nav_mb li.entry a {background-color: var(--clr-bk);}
#nav_mb li.result a {background-color: var(--clr-yl);}
#nav_mb li.line a {background-color: var(--clr-line);}

/* home_hivtest */

/* home_flow */

#home_step ol {
  margin:2rem 5%;
  max-width:initial;
  background:none;
}
#home_step li:nth-of-type(2)::after,
#home_step li:nth-of-type(4)::after {right:5%;}
#home_step li:nth-of-type(1) h3::after,
#home_step li:nth-of-type(3) h3::after,
#home_step li:nth-of-type(5) h3::after {
  content:'';
  display:block;
  position:absolute;
  left:0;
  top:2.5rem;
  width:25%;
  height:100%;
  background-position:left top;
  background-repeat:no-repeat;
  background-size:100%;
}
#home_step li:nth-of-type(1) h3::after {background-image:url(/2024/images/home_step_01.webp);}
#home_step li:nth-of-type(3) h3::after {background-image:url(/2024/images/home_step_02.webp);}
#home_step li:nth-of-type(5) h3::after {background-image:url(/2024/images/home_step_03.webp);}

#home_result_status ul {display:block;}
#home_result_status li {
  margin:1rem 0;
  width:initial;
  overflow:hidden;
}
#home_result_status span.title {
  margin:1em;
  margin-bottom:0.5rem;
} 
#home_result_status span.desc {
  margin:1rem;
  margin-top:0.5rem;
}

#home_flow div.content:last-of-type {margin-bottom:3rem;}

/* home_knowledge */

#home_knowledge h3 {text-align:left;}
#home_knowledge div.content:last-of-type {margin-bottom:3rem;}

/* home_entry */

aside.entry {bottom:0.5rem;}
aside.entry div.btn {margin:6rem 5%;}
aside.entry div.btn a.btn {
  box-sizing:border-box;
  min-width:initial;
  width:100%;
  padding:0.5em;
  font-size:1.2rem;
}

/* home_contact */

div.bnr_std {
  display:block;
  margin:2rem 5%;
  padding:1rem;
  padding-bottom:calc(2em + 30px);
  max-width:initial;
  background-position:center bottom 1rem;
}
div.bnr_std a.btn {
  box-sizing:border-box;
  padding:1em;
  width:100%;
}

div.bnr_line {
  margin:2rem 5%;
  max-width:880px;
}
div.bnr_line a {
  display:block;
  padding:1rem;
}
div.bnr_line div.info {width:initial;}
div.bnr_line div.info h3 {
  margin:0 0 1em;
  font-size: 124%;
}
div.bnr_line div.info p {
  padding-left:5rem;
  min-height:4rem;
  background-size:4rem;
}
div.bnr_line .body {
  width:initial;
  overflow:hidden;
}
div.bnr_line .body::after {
  position:static;
  margin:1em 0;
  width:100%;
  height:8em;
  background-size:contain;
}

/* home_sns */

#home_sns ul {margin:1rem 0;}
#home_sns li {
  display:block;
  margin:0.5rem 5%;
}
#home_sns li a {min-width:6em;}

#ft_credit {margin-top:2rem;}
#ft_credit p {margin:1rem 5%;}
#copyright {margin:2rem 5% 3rem;}

/* page - commons */

body.page #header span.title_img {margin:2rem 5%;}
body.page #header span.title_img img {
  width:80%;
  height:auto;
}
div.mov {margin:2rem 0;}

/* page - test-kit */

body.test-kit div.cols {
  margin:2rem 5%;
  max-width:initial;
}

/* characters */

body {
  font-size:100%;
  font-family:'Zen Maru Gothic', 'Roboto', sans-serif;
  -webkit-text-size-adjust:none;
}
#nav li a {font-size:0.9rem;}
h4, a.btn.close,
#nav ul.cta,
#home_intro p,
#home_intro_nav li a {font-size:1rem;}
h3,
#home_step li::before,
#home_result_status span.title {font-size:1.125rem;}
h2, #news h1 {font-size:1.25rem;}
#home_intro h2 {font-size:1.35rem;}
section h1 {font-size:1.5rem;}

#nav_mb a {text-decoration:none;}

#nav_mb a {color: var(--clr-bk);}
#nav_mb li.entry a,
#nav_mb li.result a,
#nav_mb li.line a {color: var(--clr-wh);}

} /* @media only screen and (max-width:768px) */