@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap");
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; word-break: normal; -moz-tab-size: 4; tab-size: 4; }

*, ::before, ::after { box-sizing: border-box; background-repeat: no-repeat; box-sizing: inherit; }

::before, ::after { text-decoration: inherit; vertical-align: inherit; }

* { padding: 0; margin: 0; }

hr { overflow: visible; height: 0; color: inherit; }

details, main { display: block; }

summary { display: list-item; }

small { font-size: 80%; }

[hidden] { display: none; }

abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }

ul, ol, li { list-style: none; }

a, button, label { cursor: pointer; transition: color 0.2s ease-in-out, background 0.2s ease-in-out; }

a { text-decoration: none; background-color: transparent; }

a:active, a:hover { outline-width: 0; }

code, kbd, pre, samp { font-family: monospace, monospace; }

pre { font-size: 1em; }

b, strong { font-weight: bolder; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

table { border-color: inherit; text-indent: 0; }

iframe { border-style: none; }

input { border-radius: 0; }

[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; }

[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }

[type='search']::-webkit-search-decoration { -webkit-appearance: none; }

textarea { overflow: auto; resize: vertical; }

button, input, optgroup, select, textarea { font: inherit; }

optgroup { font-weight: bold; }

button { overflow: visible; }

button, select { text-transform: none; }

button, [type='button'], [type='reset'], [type='submit'], [role='button'] { cursor: pointer; }

button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; }

button:-moz-focusring, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { outline: 1px dotted ButtonText; }

button, html [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; }

button, input, select, textarea { background-color: transparent; border-style: none; }

a:focus, button:focus, input:focus, select:focus, textarea:focus { outline-width: 0; }

select { -moz-appearance: none; -webkit-appearance: none; }

select::-ms-expand { display: none; }

select::-ms-value { color: currentColor; }

legend { border: 0; color: inherit; display: table; max-width: 100%; white-space: normal; max-width: 100%; }

::-webkit-file-upload-button { -webkit-appearance: button; color: inherit; font: inherit; }

[disabled] { cursor: default; }

img { border-style: none; }

progress { vertical-align: baseline; }

[aria-busy='true'] { cursor: progress; }

[aria-controls] { cursor: pointer; }

[aria-disabled='true'] { cursor: default; }

/***setting***/
.inner, header nav, .dl4box { margin: 0 auto; width: 100%; min-width: 400px; max-width: 1400px; }

.msr, .ic, .ichead::before, #sctIntro ul li::before, .table-box tbody td strong, .dl3box dl::after, #sctProtocol li::after, footer ul li a::before { font-family: 'Material Symbols Outlined'; font-weight: 300; font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24; }

.ic, .ichead::before, #sctIntro ul li::before { display: block; position: absolute; margin: auto; top: 0; bottom: 0; transition: 0.2s ease-in-out; }

.ichead, #sctIntro ul li { position: relative; display: block; text-align: left; border-radius: 0.3rem; }
.ichead::before, #sctIntro ul li::before { left: 0; width: 1.5em; height: 1em; line-height: 1em; font-size: 1.5em; text-align: center; }

html { scroll-behavior: smooth; }

body { position: relative; width: 100%; height: 100%; color: #3c4043; font-family: 'Roboto Condensed','Noto Sans JP', sans-serif; font-weight: 300; text-align: center; background: #f4f3eb; overflow-x: hidden; overflow-y: auto; }

a, button, label { cursor: pointer; transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease; }

.sp { display: block; }

.pc { display: none; }

header { position: sticky; top: 0; right: 0; left: 0; color: white; width: 100%; background: #004e9b; box-shadow: 0 0 1.6rem rgba(60, 64, 67, 0.2); z-index: 200; }
header nav { display: flex; height: 4rem; overflow: hidden; }
header h1 { position: relative; padding: 0 0 0 3rem; width: calc(100% - 9.5rem); text-align: left; overflow: hidden; }
header h1 a { display: block; position: absolute; margin: auto; top: 0; left: 0; width: 3rem; height: 4rem; }
header h1 a img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: auto; height: 1.2rem; transition: opacity 0.2s ease; }
header h1 a:hover img { opacity: 0.75; }
header h1 strong { padding: 0; color: rgba(255, 255, 255, 0.9); font-size: 1rem; line-height: 4rem; font-weight: 500; }
header ul { display: none; }
header p { position: relative; width: 9.5rem; }
header p a, header p button { position: absolute; top: 0; right: 0.5rem; bottom: 0; margin: auto; width: 9rem; height: 2rem; line-height: 2rem; color: white; font-size: 0.7rem; font-weight: 700; background: #86ad43; border-radius: 2rem; }
header p a:hover, header p button:hover { color: #86ad43; background: white; }

@media screen and (min-width: 768px) { header nav { height: 5rem; }
  header h1 { padding: 0 0 0 5rem; width: calc(100% - 12rem); }
  header h1 a { width: 5rem; height: 5rem; }
  header h1 a img { height: 1.6rem; }
  header h1 strong { font-size: 1.6rem; line-height: 5rem; }
  header p { width: 12rem; }
  header p a, header p button { right: 1rem; width: 11rem; height: 3rem; line-height: 3rem; font-size: 0.9rem; } }
@media screen and (min-width: 1230px) { header h1 { width: 26rem; }
  header ul { display: flex; width: calc(100% - 41rem); }
  header ul li { margin: 0; padding: 0 1rem; }
  header ul li:first-child { margin-left: auto; }
  header ul li a { display: block; height: 5rem; color: white; font-size: 0.8rem; font-weight: 700; line-height: 5rem; }
  header ul li a:hover { color: #f7ab00; }
  header p { width: 15rem; }
  header p a, header p button { width: 13rem; } }
main section { position: relative; padding: 3rem 0 5rem; overflow: hidden; }
main section:nth-child(even) { background: white; z-index: 10; }
main section:nth-child(odd) { background: #f4f3eb; z-index: 10; }

@media screen and (min-width: 768px) { main section { margin: -5rem 0 0; padding: 5rem 0 8rem; } }
#sctIntro { background: url("img/bg_mv.jpg"); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; z-index: 1; }
#sctIntro .text { position: relative; display: block; margin: 2rem 1rem 0; padding: 0 0 1.6rem; width: calc(100% - 2rem); background: rgba(255, 255, 255, 0.9); border-radius: 0.8rem; border-bottom: 1.2rem solid #004e9b; box-shadow: 0 0 1.6rem rgba(60, 64, 67, 0.2); }
#sctIntro .text::after { content: url("img/logo_mark_blue.svg"); position: absolute; top: 1rem; right: 0.8rem; width: 1.8rem; height: auto; }
#sctIntro figure { position: absolute; margin: auto; top: -2rem; left: -3rem; width: 14rem; height: auto; z-index: 100; }
#sctIntro figure img { width: auto; height: 100%; }
#sctIntro h1 { padding: 1.5em 1em 1.5em 11.5rem; font-size: 2.4rem; line-height: 1.2em; text-align: left; }
#sctIntro h1 strong { display: block; color: #004e9b; font-weight: 700; }
#sctIntro h1 strong span { white-space: nowrap; }
#sctIntro h1 em { padding: 1.5em 0 0; display: block; font-style: normal; font-size: 0.45em; font-weight: 300; line-height: 1.4em; }
#sctIntro h2 { padding: 0 0 0.5em; font-size: 1.6rem; line-height: 1.2em; font-weight: 700; }
#sctIntro ul { margin: 0 auto; max-width: 660px; padding: 1.6rem; list-style: none; }
#sctIntro ul li { padding: 0 0 0.5em 2em; font-size: 1rem; line-height: 1.5rem; }
#sctIntro ul li::before { content: "\e9ef"; color: #004e9b; bottom: auto; line-height: 1em; height: 1em; }
#sctIntro a, #sctIntro button { display: block; margin: 0 auto; width: 75%; max-width: 600px; height: 5rem; line-height: 5rem; color: white; font-size: 1.2rem; font-weight: 700; text-align: center; background: #86ad43; border-radius: 0.8rem; }
#sctIntro a:hover, #sctIntro button:hover { background: #5e772f; }

@media screen and (min-width: 768px) { #sctIntro .text { margin: 4rem 5% 2rem 0; padding: 0 1.6rem 1.6rem 18rem; width: 95%; border-radius: 0 0.8rem 0.8rem 0; text-align: left; }
  #sctIntro figure { top: -1rem; width: 20rem; }
  #sctIntro h1 { padding: 1.5em 1em 1em 0; font-size: 2.8rem; }
  #sctIntro h1 em { padding: 0.5em 0 0; }
  #sctIntro ul { margin: 0; padding: 0.5rem 0 1.6rem; }
  #sctIntro a, #sctIntro button { margin: 0; } }
@media screen and (min-width: 960px) { #sctIntro { background-position: 100% 50%; background-size: auto 100%; }
  #sctIntro .text { margin: 4rem 10% 2rem 0; padding: 0 1.6rem 1.6rem 35%; width: 90%; }
  #sctIntro figure { left: 1.5%; width: 35%; max-width: 26rem; } }
@media screen and (min-width: 1600px) { #sctIntro .text { margin: 5rem 0 2rem; padding: 0 0 0 calc(80% - 50rem); width: 80%; height: 37rem; }
  #sctIntro .text::after { width: 2.2rem; }
  #sctIntro figure { bottom: -2%; right: 47rem; height: 105%; }
  #sctIntro h1 { padding: 1.25em 0 0.8em; font-size: 3.4rem; line-height: 1.2em; }
  #sctIntro ul { padding: 0 0 1rem; } }
#sctAbout h2, #sctComparison h2, #sctSaag h2, #sctProtocol h2, #sctFaq h2, #sctEntry h2 { padding: 1em 1rem 0.8em; font-size: 1.6rem; line-height: 1.2em; color: #004e9b; }
#sctAbout h2 span, #sctComparison h2 span, #sctSaag h2 span, #sctProtocol h2 span, #sctFaq h2 span, #sctEntry h2 span { display: block; padding: 0.5em 0 0; font-size: 0.6em; color: #3c4043; }
#sctAbout p, #sctComparison p, #sctSaag p, #sctProtocol p, #sctFaq p, #sctEntry p { font-size: 1.1rem; line-height: 1.5em; }

#sctAbout p, #sctComparison p, #sctEntry p { padding: 0 1rem 1.5em; text-align: left; }
#sctAbout p br, #sctComparison p br, #sctEntry p br { display: none; }

@media screen and (min-width: 768px) { #sctAbout h2, #sctComparison h2, #sctSaag h2, #sctProtocol h2, #sctFaq h2, #sctEntry h2 { font-size: 2rem; }
  #sctAbout p, #sctComparison p, #sctEntry p { text-align: center; }
  #sctAbout p br, #sctComparison p br, #sctEntry p br { display: block; } }
@media screen and (min-width: 1230px) { #sctAbout h2, #sctComparison h2, #sctSaag h2, #sctProtocol h2, #sctFaq h2, #sctEntry h2 { font-size: 2.4rem; }
  #sctAbout p, #sctComparison p, #sctSaag p, #sctProtocol p, #sctFaq p, #sctEntry p { font-size: 1.2rem; } }
.dl4box { padding: 0 0.8rem 3rem; }
.dl4box dl { margin: 0.8rem auto; width: 100%; max-width: 360px; background: #f4f3eb; border-radius: 0.8rem; }
.dl4box dt { position: relative; padding: 66.66% 0 0; }
.dl4box dt img { position: absolute; margin: auto; padding: 0; top: 0; right: 0; left: 0; width: 100%; height: auto; }
.dl4box dt strong { display: block; padding: 0 0 0.8rem; font-weight: 700; font-size: 1.2rem; }
.dl4box dd { padding: 0 1.6rem 1.6rem; font-size: 1rem; line-height: 1.8em; text-align: left; }

@media screen and (min-width: 620px) { .dl4box { margin: 0 auto; display: flex; flex-wrap: wrap; max-width: 720px; }
  .dl4box dl { margin: 0.4rem; width: calc(50% - 0.8rem); } }
@media screen and (min-width: 1230px) { .dl4box { padding: 2rem 1.6rem 3rem; max-width: 1440px; }
  .dl4box dl { margin: 0.8rem; width: calc(25% - 1.6rem); box-shadow: 0 0.5rem 1rem rgba(60, 64, 67, 0.2); } }
.table-box { margin: 1.6rem auto; width: 90%; max-width: 1200px; overflow-x: auto; display: block; }
.table-box table { width: 100%; }
.table-box table th, .table-box table td { width: 20%; padding: 1.2em; font-size: 1.1rem; line-height: 1.2em; white-space: nowrap; }
.table-box thead { border-bottom: 3px solid #004e9b; }
.table-box thead th { background: rgba(199, 178, 153, 0.5); }
.table-box thead th:nth-child(1) { border-radius: 1.6rem 0 0 0; }
.table-box thead th:nth-child(2) { background: #c7b299; }
.table-box thead th:nth-child(5) { border-radius: 0 1.6rem 0 0; }
.table-box tbody tr th { background: rgba(87, 142, 188, 0.5); }
.table-box tbody tr td { color: #3c4043; background: rgba(255, 255, 255, 0.9); }
.table-box tbody tr td:nth-child(2) { color: white; background: #004e9b; }
.table-box tbody td strong { display: block; font-size: 4em; line-height: 1em; }
.table-box tbody td span { display: block; font-size: 0.8em; font-weight: 500; line-height: 1.2em; }

@media screen and (min-width: 768px) { .table-box { margin: 3rem auto; }
  .table-box table th, .table-box table td { font-size: 1.2rem; } }
@media screen and (min-width: 1230px) { .table-box { margin: 3rem auto; }
  .table-box table th, .table-box table td { font-size: 1.4rem; } }
.dl3box { margin: 0 auto; padding: 2rem 0 0; width: 90%; display: flex; flex-wrap: wrap; }
.dl3box dl { position: relative; margin: 2rem 0; padding: 0 1rem; width: 100%; min-height: 10rem; border-radius: 1.2rem; border: 1px solid #c7b299; }
.dl3box dl::after { content: "\e80c"; color: rgba(199, 178, 153, 0.5); display: block; position: absolute; top: 0; right: 0.8rem; font-size: 4rem; width: 1em; height: 1em; list-style: 1em; }
.dl3box dt { position: relative; padding: 11rem 1.6rem 1.2rem; }
.dl3box dt figure { display: block; position: absolute; margin: auto; top: -2.4rem; right: 0; left: 0; width: 12rem; height: 12rem; border-radius: 50%; background: #c7b299; overflow: hidden; }
.dl3box dt figure img { width: auto; height: 100%; }
.dl3box dt strong { display: block; padding: 0.5rem 0 0; font-size: 1.2rem; font-weight: 700; line-height: 1em; }
.dl3box dt span { display: block; padding: 1em 0 0; font-size: 0.9rem; line-height: 1em; font-weight: 300; }
.dl3box dd { display: block; padding: 0 1.5em 2em; font-size: 1.2rem; line-height: 1.8em; text-align: left; }

@media screen and (min-width: 768px) { .dl3box { display: block; max-width: 840px; }
  .dl3box dl { margin: 4rem 0; display: flex; }
  .dl3box dt { width: 16rem; }
  .dl3box dd { width: calc(100% - 16rem); padding: 4.5em 1.5em 2em; } }
@media screen and (min-width: 1230px) { .dl3box { padding: 3rem 0; display: flex; max-width: 1440px; }
  .dl3box dl { display: inline-block; margin: 2rem 1rem 1rem; width: calc(33.33% - 2rem); }
  .dl3box dt, .dl3box dd { width: 100%; }
  .dl3box dd { padding: 0 1.5em 2em; } }
#sctProtocol ul { margin: 0 auto; padding: 2rem 0 0; width: 100%; max-width: 1400px; }
#sctProtocol li { position: relative; padding: 2.4rem 1.2rem; width: 80%; min-height: 10rem; text-align: center; font-size: 1.2rem; line-height: 1.4em; background: rgba(255, 255, 255, 0.9); border-radius: 1.6rem; box-shadow: 0 0.5rem 1rem rgba(60, 64, 67, 0.07); }
#sctProtocol li::before { position: absolute; top: 1.8rem; opacity: 0.1; font-size: 4rem; font-weight: 500; z-index: 10; }
#sctProtocol li::after { content: "\e69d"; display: block; position: absolute; margin: auto; top: -5rem; font-size: 4rem; width: 1em; height: 1em; line-height: 1em; text-align: center; color: #f7ab00; }
#sctProtocol li:nth-child(odd) { margin: 0 15% 6rem 5%; }
#sctProtocol li:nth-child(odd)::before { left: 1.2rem; }
#sctProtocol li:nth-child(odd)::after { left: 47.5%; }
#sctProtocol li:nth-child(even) { margin: 0 5% 6rem 15%; }
#sctProtocol li:nth-child(even)::before { right: 1.2rem; }
#sctProtocol li:nth-child(even)::after { left: 35%; }
#sctProtocol li:nth-child(1)::before { content: "01"; }
#sctProtocol li:nth-child(1)::after { display: none; }
#sctProtocol li:nth-child(2)::before { content: "02"; }
#sctProtocol li:nth-child(3)::before { content: "03"; }
#sctProtocol li:nth-child(4)::before { content: "04"; }
#sctProtocol li figure { width: 100%; z-index: 50; }
#sctProtocol li figure img { margin: 0 auto; width: 75%; max-width: 500px; height: auto; }

@media screen and (min-width: 768px) { #sctProtocol ul { padding: 6rem 0 0; }
  #sctProtocol li { padding: 2.4rem 0; font-size: 1.4rem; line-height: 2em; }
  #sctProtocol li::before { top: 3.2rem; font-size: 9rem; }
  #sctProtocol li figure img { width: 50%; } }
.faqbox { padding: 1.6rem; width: 100%; text-align: left; }
.faqbox dl { padding: 0 0 1.6rem; font-size: 1.6rem; line-height: 1.2em; }
.faqbox dt { position: relative; padding: 2em 0 1em 2em; font-weight: 500; color: #004e9b; }
.faqbox dt::before { display: block; content: "Q."; position: absolute; top: 1.16em; left: 0.5rem; font-size: 1.5em; line-height: 1em; font-weight: 500; }
.faqbox dd { position: relative; padding: 2.4rem 0 0 3.2rem; border-top: 3px solid #004e9b; }
.faqbox dd::before { display: block; content: "A."; position: absolute; top: 0.75em; left: 0.5rem; font-size: 1.5em; line-height: 1em; color: #c7b299; font-weight: 500; }
.faqbox dd p { padding: 0 0 1em; }
.faqbox dd span { font-size: 0.8em; font-weight: 500; line-height: 1.2em; }

@media screen and (min-width: 768px) { .faqbox { margin: 0 15%; padding: 1.6rem 0 3.2rem; width: 70%; }
  .faqbox dd { padding: 2.4rem 0 1.6rem 3.2rem; } }
#sctEntry h3 { margin: 1em auto 0; width: 90%; max-width: 960px; padding: 1em; color: white; font-size: 1.2srem; font-weight: 500; background: #578ebc; }
#sctEntry iframe { display: block; margin: 0 auto; width: 90%; max-width: 960px; height: 20rem; border: 1px solid #578ebc; overflow-x: hidden; overflow-y: auto; }
#sctEntry a, #sctEntry button { display: block; margin: 3rem auto 0; padding: 1.6rem; width: 75%; max-width: 600px; color: white; font-size: 1.4rem; background: #86ad43; border-radius: 0.8rem; }
#sctEntry a:hover, #sctEntry button:hover { background: #5e772f; }
#sctEntry a span, #sctEntry button span { display: block; font-size: 0.8em; }
#sctEntry a strong, #sctEntry button strong { display: block; font-weight: 500; }

@media screen and (min-width: 768px) { #sctEntry h3 { margin: 2em auto 0; width: 90%; max-width: 960px; padding: 1em; color: white; font-size: 1.4rem; font-weight: 500; background: #578ebc; }
  #sctEntry iframe { display: block; margin: 0 auto; width: 90%; max-width: 960px; height: 20rem; border: 1px solid #578ebc; overflow-x: hidden; overflow-y: auto; }
  #sctEntry a, #sctEntry button { display: block; margin: 3rem auto 0; padding: 1.6rem; width: 75%; max-width: 600px; color: white; font-size: 1.4rem; background: #86ad43; border-radius: 0.8rem; }
  #sctEntry a:hover, #sctEntry button:hover { background: #5e772f; }
  #sctEntry a span, #sctEntry button span { display: block; font-size: 0.8em; }
  #sctEntry a strong, #sctEntry button strong { display: block; font-weight: 500; } }
footer { color: rgba(255, 255, 255, 0.9); background: #004e9b; }
footer ul { margin: 0 auto; padding: 1.2rem 0; }
footer ul li { display: block; padding: 0 1.6rem; }
footer ul li a { position: relative; display: block; padding: 0.5em 0.8em; color: rgba(255, 255, 255, 0.9); font-size: 0.9rem; text-align: right; border-bottom: 1px dotted rgba(255, 255, 255, 0.9); }
footer ul li a:hover { color: white; }
footer ul li a::before { content: ""; display: block; position: absolute; top: 0.5em; left: 0; font-size: 1.5em; width: 1em; height: 1em; line-height: 1em; }
footer p { font-size: 0.8rem; line-height: 3rem; white-space: nowrap; }

@media screen and (min-width: 768px) { footer ul li { display: inline-block; padding: 1rem; }
  footer ul li a { text-align: center; border-bottom: none; }
  footer ul li a::before { display: none; }
  footer p { font-size: 0.8rem; line-height: 3rem; white-space: nowrap; } }