/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding: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}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/*!///////////////////////////////////////////*/
/*!//////////// ↓↓↓reset↓↓↓ ////////////*/
/*!///////////////////////////////////////////*/
*, *::before, *::after { box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl { margin: 0; color: #000;}
a { text-decoration: none;}
ul,ol { padding-left: 0; list-style-type: none;}
dd { margin-left: 0;}
p {font-size: 14px; line-height: 1.75;}
@media screen and (min-width: 640.1px) { p { font-size: 16px;}}
button {border: 0;}
/*!///////////////////////////////////////////*/
/*!//////////// ↑↑↑reset↑↑↑ ////////////*/
/*!///////////////////////////////////////////*/


/*!////////////////////////////////////////////*/
/*!//////////// ↓↓↓common↓↓↓ ////////////*/
/*!////////////////////////////////////////////*/
body { 
  font-family: "Noto Sans JP", sans-serif;
  counter-reset: number0 number1 number2;
}
body * { 
  min-height: 0vw;
}
@media screen and (max-width: 640px) {
  .pc-only { display: none !important;}}
@media screen and (min-width: 640.1px) {
  .sp-only {display: none !important;}}
.hidden { display: none !important;}
.image { display: block; width: 100%;}
.wrapper {position: relative; overflow: hidden;}
.container {
  width: 100%;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/*!////////////////////////////////////////////*/
/*!//////////// ↑↑↑common↑↑↑ ////////////*/
/*!////////////////////////////////////////////*/

.img {
  width: 100%;
  height: auto;
}

img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

a * {
  pointer-events: none;
}

main {
  padding-top: 75px;
}
@media screen and (max-width: 640px) {
main {
  padding-top: 45px;
}
}

.WBR {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.wrapper ,.qa {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14.4 14.4"><path fill="%23ebf4f9" d="M11.52,12.24c0-1.19-.97-2.16-2.16-2.16s-2.16,.97-2.16,2.16,.97,2.16,2.16,2.16,2.16-.97,2.16-2.16Z"/><path fill="%23ebf4f9" d="M2.16,7.2c1.19,0,2.16-.97,2.16-2.16s-.97-2.16-2.16-2.16S0,3.85,0,5.04s.97,2.16,2.16,2.16Z"/></svg>');
    background-size: max(14.4px,calc(14.4vw / 14)) max(14.4px,calc(14.4vw / 14));
}

.header {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  background-color: #fff;
}
@media screen and (max-width: 640px) {
  .header {
    height: 45px;
  }
}

.header nav {
  display: grid;
  grid-template-columns: 1fr auto auto auto clamp(80px,calc(205vw / 10),205px);
  grid-auto-rows: 100%;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: clamp(25px,calc(65vw / 10),65px);
}
@media screen and (max-width: 640px) {
  .header nav {
    grid-template-columns: 1fr auto auto auto 75px;
    gap: 8px;
  }
}

.header a {
  display: grid;
  align-items: center;
  width: 100%;
  height: 100%;
}

a.header-logo {
  width: 100%;
  max-width: clamp(200px,calc(282vw / 10),282px);
  padding-left: clamp(7px,calc(20vw / 10),20px);
}

a.header-link {
  font-size: clamp(10px,calc(15vw / 10),15px);
  font-weight: 700;
  color: #004E71;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a.header-contact {
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  place-items: center;
  gap: clamp(4px,calc(8vw / 10),8px);
  background-color: #004E71;
  font-size: clamp(10px,calc(15vw / 10),15px);
  color: #fff;
}
@media screen and (max-width: 640px) {
a.header-contact {
  grid-template-columns: auto;
}
}

.header-contact::before {
  content: "";
  display: block;
  width: 28.1324px;
  height: 16.5581px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 28.13 16.56"><polygon fill="%23ffffff" points="0 1.15 0 15.41 8.27 8.28 0 1.15"/><polygon fill="%23ffffff" points="13.98 13.2 9.33 9.19 .78 16.56 27.33 16.56 18.68 9.19 13.98 13.2"/><polygon fill="%23ffffff" points="28.13 15.42 28.13 1.13 19.75 8.28 28.13 15.42"/><polygon fill="%23ffffff" points=".78 0 9.33 7.37 10.39 8.28 13.98 11.38 17.62 8.28 18.68 7.37 27.34 0 .78 0"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (max-width: 640px) {
.header-contact::before {
  width: 14.0662px;
  height: 8.2791px;
}
}

.tobira-top {
  background-image: url(../img/bg_building.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom;
  padding-bottom: calc(215vw / 14);
}

.about-title {
  width: 100%;
  padding: clamp(60px,calc(110vw / 10),110px) 0 30px;
}

.about-title-logo {
  display: inline-block;
  width: clamp(150px,calc(282.437vw / 6.5),282.437px);
  margin-right: 10px;
  margin-bottom: 10px;
}

.about-title-text {
  display: inline-block;
  width: clamp(300px,calc(569.269vw / 10),569.269px);
  margin-bottom: 10px;
}

.about-text-container {
  z-index: 1;
  position: relative;
  padding: clamp(40px,calc(70vw / 10),70px) clamp(20px,calc(70vw / 10),70px) clamp(55px,calc(80vw / 10),80px);
}

.about-text-container::before ,.about-text-container::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: clamp(2px,calc(4vw / 6.5),4px) solid #004E71;
  border-radius: 10px;
  background-color: #fff;
}
.about-text-container::before {
  background-color: #FDD000;
}
.about-text-container::after {
  transform: translate(calc(-50% - 13px), calc(-50% - 13px));
}

.about-text {
  font-size: clamp(23px,calc(40vw / 10),40px);
  font-weight: 700;
  color: #004E71;
  line-height: calc(73.501 / 40);
}

.tobira-discription-title {
  font-size: clamp(22px,calc(35vw / 10),35px);
  font-weight: 700;
  color: #004E71;
  text-decoration: underline;
  text-decoration-color: #FDD000;
  text-decoration-thickness: clamp(6px,calc(11vw / 10),11px);
  text-underline-offset: -1px;
  padding: clamp(25px,calc(25vw / 10),40px) 0;
}

.tobira-discription-text {
  font-size: clamp(16px,calc(20vw / 10),20px);
  font-weight: 500;
  color: #004E71;
  line-height: calc(44.0516 / 20);
}

.Flow {
  padding: clamp(70px,calc(120vw / 10),120px) 0;
}

.Flow-container {
  background-color: #fff;
  padding: clamp(10px,calc(30vw / 10),30px) clamp(20px,calc(70vw / 10),70px) 50px;
  border-radius: clamp(10px,calc(20vw / 10),20px);
  border: 2px solid #004E71;
}
@media screen and (max-width: 640px) {
  .Flow-container {
    padding: 10px 15px 30px;
    margin: 0 auto;
  }
}

.doubleBox-title::before ,.doubleBox-title::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: clamp(2px,calc(4vw / 6.5),4px) solid #004E71;
  border-radius: 10px;
  background-color: #fff;
}
.doubleBox-title::before {
  background-color: #FDD000;
}
.doubleBox-title::after {
  transform: translate(calc(-50% - 5px), calc(-50% - 5px));
}

/* .FlowList {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 30px;
  place-items: center;
}
@media screen and (max-width: 640px) {
.FlowList {
  gap: 20px 7px;
}
}

.FlowList-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 3;
  grid-auto-rows: auto;
  gap: clamp(25px,calc(45vw / 10),45px);
  text-align: center;
}
@media screen and (max-width: 640px) {
.FlowList-item {
  gap: 7px;
}
}

.doubleBox-title {
  z-index: 1;
  position: relative;
  padding: 5px 15px 15px 5px;
  font-size: clamp(20px,calc(29.5vw / 10),29.5px);
  font-weight: 700;
  color: #004E71;
  white-space: nowrap;
}
.FlowList-Container .doubleBox-title {
  max-width: 260px;
}
@media screen and (max-width: 640px) {
  .FlowList-Container .doubleBox-title {
    padding: 5px 12px 15px 3px;
    font-size: 16px;
  }
}

.FlowList-title {
  max-width: 260px;
  position: relative;
  text-align: left;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-rows: auto;
  gap: 12px;
  align-items: center;
}
@media screen and (max-width: 640px) {
  .FlowList-title {
    gap: 3px;
  }
}

.FlowList-title::before {
  content: "";
  display: block;
  width: 16.431px;
  height: 16.431px;
  border-radius: 50%;
  background-color: #FDD000;
  border: 3px solid #004E71;
}
@media screen and (max-width: 640px) {
.FlowList-title::before {
  width: 10px;
  height: 10px;
  border: 2px solid #004E71;
}
}

.FlowList-title::after {
  counter-increment: number0 1;
  content: "0"counter(number0) ;
  color: #004E71;
  grid-area: 1 / 2 / 2 / 3;
  display: inline-block;
  font-family: "Jost", sans-serif;
  font-size: clamp(20px,calc(44.8966vw / 10),44.8966px);
  font-weight: 600;
}

.FlowList-title div {
  margin-right: auto;
  font-size: clamp(20px,calc(26vw / 10),26px);
  font-weight: 700;
  color: #004E71;
}
@media screen and (max-width: 640px) {
.FlowList-title div {
  font-size:12px;
}
}

.FlowList-header h3 {
  font-size: 23px;
}
@media screen and (max-width: 640px) {
.FlowList-header h3 {
  font-size: 12px;
}
}

.FlowList-box p {
  font-size: clamp(14px,calc(16vw / 10),16px);
  font-weight: 700;
}
@media screen and (max-width: 640px) {
.FlowList-box p {
  font-size: 10px;
}
} */

.FlowList-note {
  font-size: clamp(13px,calc(20vw / 10),20px);
  font-weight: 700;
  color: #004E71;
  background-color: #DDECF5;
  border-radius: clamp(10px,calc(15vw / 10),15px);
  text-align: center;
  margin: clamp(15px,calc(25vw / 10),25px) auto 0;
}

.doubleBox-title {
  z-index: 1;
  position: relative;
  display: inline-block;
  padding: 5px 15px 15px 5px;
  font-size: clamp(18px,calc(29.5vw / 10),29.5px);
  font-weight: 700;
  color: #004E71;
  white-space: nowrap;
}

#example {
  padding-top: 75px;
}
@media screen and (max-width: 640px) {
#example {
  padding-top: 45px;
}
}

.example-item {
  width: 100%;
  background-image: url(../img/bg_exmple_a.png);
  background-repeat: no-repeat;
  background-size: clamp(180px,30%,240px);
  background-position: bottom right;
}
.example-item--2 {
  background-image: url(../img/bg_exmple_b.png);
  background-size: 55%;
}
@media screen and (max-width: 640px) {
  .example-item {
    background-size: clamp(110px,30%,180px);
  }
  .example-item--2 {
    padding-bottom: 180px;
    background-size: clamp(300px,100%,430px);
    background-position: bottom center;
  }
}

.example-title-h3 {
  white-space: nowrap;
  position: relative;
  display: inline-block;
  background-color: #FDD000;
  color: #004E71;
  font-size: clamp(12.5px,calc(25vw / 10),25px);
  padding: 5px 10px 5px clamp(32px,calc(50vw / 10),50px);
  border-radius: clamp(5px,calc(10vw / 10),10px);
  margin-top: clamp(20px,calc(32vw / 10),32px);
}
.example-title-h3--blue {
  background-color: #1D7FBB;
  color: #fff;
}

.example-title-h3::before {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 0;
  display: inline-block;
  background-image: url(../img/example_a.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  width: clamp(28px,calc(48.5vw / 10),48.5px);
  height: 52px;
}
.example-title-h3--blue::before {
  background-image: url(../img/example_b.svg);
  width: clamp(25px,calc(38vw / 10),38px);
  left: 7px;
}

.example-title-h4 {
  font-size: clamp(16px,calc(22vw / 10),22px);
  color: #004E71;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: clamp(2px,calc(3vw / 10),3px);
  text-underline-offset: 3px;
  margin: clamp(10px,calc(20vw / 10),20px) 0;
}

.example-list {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 8px;
}
.example-list--yellow {
  max-width: 65%;
}

.example-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  text-align: left;
  gap: 5px;
  font-size: clamp(14px,calc(18vw / 10),18px);
  font-weight: 500;
  color: #004E71;
}

.example-list li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 3px solid #004E71;
  background-color: #FDD000;
}

.example-list--blue li::before {
  background-color: #1D7FBB;
}

.qa {
  padding: clamp(70px,calc(123vw / 10),123px) 0 clamp(60px,calc(115vw / 10),115px);
  background-color: #DDECF5;
}

.qa-container {
  background-color: #fff;
  padding: clamp(10px,calc(50vw / 10),50px) clamp(20px,calc(70vw / 10),70px) 50px;
  border-radius: clamp(10px,calc(20vw / 10),20px);
}

.qa-head {
  display: grid;
  grid-template-columns: clamp(200px,30%,286.6719px) 1fr;
  grid-auto-rows: auto;
  align-items: center;
  gap: 0 30px;
}
@media screen and (max-width: 640px) {
.qa-head {
    grid-template-columns: auto;
  }
  .qa-title {
    width: min(40%,286.6719px);
  }
  .qa-img {
    width: 100%;
    margin-left: auto;
    /* width: min(60%,424.9634px); */
    max-width: 424.9634px;
  }
}

.qaList-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: clamp(20px,calc(30vw / 10),30px);
}

.qaList-item:not(:last-of-type) {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 2px dotted #004E71;
}

.qaList-item h3 ,.qaList-a {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  grid-auto-rows: auto;
  gap: clamp(10px,calc(15vw / 10),15px);
}

.qaList-item h3 {
  position: relative;
  align-items: center;
  padding: 15px;
  background-color: #DDECF5;
  border-radius: clamp(10px,calc(20vw / 10),20px);
  font-size: clamp(17px,calc(23vw / 10),23px);
  font-weight: 500;
  line-height: calc(31 / 23);
  color: #004E71;
}

.qaList-item h3::before ,.qaList-a::before {
  display: inline-block;
  font-family: "Jost", sans-serif;
  font-size: clamp(20px,calc(44.6274vw / 10),44.6274px);
  font-weight: 600;
  text-align: right;
}

.qaList-item h3::before {
  counter-increment: number1 1;
  content: "Q"counter(number1) ;
  color: #1D7FBB;
}

.qaList-a::before {
  counter-increment: number2 1;
  content: "A"counter(number2) ;
  color: #FDD000;
}

.qaList-item h3::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(100% - 1px);
  left: clamp(20px,calc(30vw / 10),30px);
  width: 20px;
  height: 15px;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background-color: #DDECF5;
}


.qaList-a p {
  font-size: clamp(13px,calc(19vw / 10),19px);
  font-weight: 400;
  line-height: calc(35 / 19);
  color: #004E71;
}

.contact-container {
  padding: clamp(60px,calc(110vw / 10),110px) 0;
}

.contact-container h2 {
  font-size: clamp(22px, calc(35vw / 10), 35px);
  font-weight: 700;
  color: #004E71;
  text-decoration: underline;
  text-decoration-color: #FDD000;
  text-decoration-thickness: clamp(6px, calc(11vw / 10), 11px);
  text-underline-offset: -1px;
  padding: clamp(25px, calc(25vw / 10), 40px) 0;
  text-align: center;
  margin: 0 auto;
}
  

.contact-list ,.contact-list li {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: clamp(20px,calc(33vw / 10),33px);
}

.contact-list {
  padding: 0 30px;
  max-width: 975px;
  margin: 40px auto 0;
}

.contact-list li {
  gap: 5px;
}

.contact-list li p ,.contact-list-privacy label {
  font-size: clamp(16px,calc(22vw / 10),22px);
  font-weight: 700;
  color: #004E71;
}

.contact-list input ,.contact-list textarea {
  width: 100%;
  min-height: 50px;
  border-radius: 5px;
  border: 2px solid #004E71;
  padding: 0 5px;
}

.contact-list textarea {
  min-height: 250px;
}

.contact-list-privacy {
  margin: clamp(30px,calc(50vw / 10),50px) auto;
  text-align: center;
}

.contact-list-privacy label {
    display: grid;
    place-items: center;
    justify-content: center;
    grid-template-columns: 30px auto;
    gap: 10px;
}

.contact-list-privacy input {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid #004E71;
  cursor: pointer;
}

.error {
  color: red;
}

.entry-button {
  margin: 0 auto;
  max-width: 435px;
  width: 100%;
  height: 82px;
  border-radius: clamp(30px, calc(70vw / 10), 70px);
  background-color: #1D7FBB;
}

.entry-button input {
  font-size: clamp(20px,calc(25vw / 10),25px);
  font-weight: 700;
  color: #fff;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  cursor: pointer;
}

#confirm .entry-button {
  margin-top: 30px;
}

#finish p {
  text-align: center;
}

footer {
  background-color: #fff;
}

.company {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: auto;
  gap: 20px 65px;
  justify-content: center;
  padding:  clamp(60px,calc(85vw / 10),85px) 0 clamp(40px,calc(60vw / 10),60px);
}
@media screen and (max-width: 640px) {
.company {
  grid-template-columns: auto;
}
}

.company-logo {
  width: 323px;
}

.company-info {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: auto;
    gap: 0 20px;
}

.company-info p {
  font-size: clamp(14px,calc(16vw / 10),16px);
  font-weight: 500;
  line-height: CALC(30 / 16);
}

.copyright {
  height: 50px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  background-color: #1D7FBB;
}