@charset "utf-8";

body{
  margin-top:98px;
}
nav#fixed-nav{
  display:none !important;
}

header{
  box-sizing:border-box;
  width:100%; height:98px;
  display:flex !important;
  justify-content:space-between;
  align-items:center;
  padding:0 5%;
  background:#fff;
  position:fixed;
  top:0; left:0; z-index:1000;
  transition:0.1s ease-in;
}
.scrolling header{
  height:60px;
  transition:0.1s ease-in;
}
header > h1{
  width:320px;
  transition:0.1s ease-in;
}
.scrolling header > h1{
  width:240px;
  transition:0.1s ease-in;
}
header > nav ul{
  display:flex;
  justify-content:flex-end;
}
header > nav > ul > li{
  font-size:0.9em; line-height:1.8;
}
header > nav > ul > li:not(:first-child)::before{
  content:"\FF5C";
  margin:0 0.8em;
}
header > nav > ul > li > a{
  text-decoration:none;
  color:var(--base-color);
}
header > nav > ul > li > a:hover{
  text-decoration:none;
}

#billboard{
  box-sizing:border-box;
  width:100%;
  padding:40px calc((100% - 1240px) / 2) 60px;
  background:var(--bg-color);
  display:flex;
  justify-content:space-between;
}
#billboard > #slider{
  width:900px;
}
#billboard > #information{
  width:300px;
}

.slick-container .slick-arrows .slick-prev,
.slick-container .slick-arrows .slick-next{
  box-sizing:border-box;
  width:42px; height:auto;
  aspect-ratio:1/1;
}
.slick-container .slick-arrows .slick-prev{
  left:-19px;
}
.slick-container .slick-arrows .slick-next{
  right:-19px;
}

#billboard #login-box{
  background:var(--main-color);
  padding:1.5em 1.5em 2.0em;
  margin-bottom:1em;
}
#billboard #login-box.login02{
  padding:1.5em 1.5em;
}
#login-box > h2{
  font-size:1.1em; line-height:1; font-weight:400;
  color:#fff;
  margin-bottom:1.0em;
}
#login-box input{
  margin-bottom:0.5em;
}
#login-box button{
  font-weight:600;
  color:var(--main-color);
  height:48px;
  border:none;
  position:relative;
  cursor:pointer;
}
#login-box.login02 button{
  height:68px;
}
#login-box button:hover{
  color:#fff;
  background:var(--key-color);
}
#login-box button::before{
  font-family:var(--icon-bootstrap);
  content:"\F1BE";
  font-size:1.6em; line-height:1;
  position:absolute;
  top:50%; left:50%;
  transform:translate(calc(-50% - 2.1em),-47%);
}
#information .application a{
  display:block;
  text-decoration:none;
  font-size:1.0em; line-height:3.0; font-weight:600;
  color:#fff;
  background:var(--key-color);
  margin-bottom:0.5em;
  transition:0.2s;
}
#information .application a:hover{
  background:var(--main-color);
  transition:0.2s;
}
#information .personal-use a{
  display:block;
  text-decoration:none;
  font-size:1.0em; line-height:3.0; font-weight:600;
  color:var(--main-color);
  border:1px solid var(--main-color);
  background:#fff;
  position:relative;
}
#information .personal-use a::after{
  font-family:var(--icon-bootstrap);
  content:"\F118";
  font-size:1.2em; line-height:1;
  position:absolute;
  top:50%; right:5%;
  transform:translate(0,-50%);
}
#information .personal-use a:hover{
  color:#fff;
  background:var(--main-color);
  transition:0.2s;
}
#topics{
  box-sizing:border-box;
  width:100%;
  padding:40px calc((100% - 1080px) / 2) 60px;
  background:#fff;
}
#topics > .topics-box{
  background:#fff;
  border-radius:3px;
  box-shadow:6px 6px 3px #eee;
  padding:2em 2.5em;
  display:flex;
  justify-content:space-between;
}
.topics-box h2{
  width:9em;
 /*  font-family:var(--zen-kaku-font); */
  font-size:1.4em; line-height:1;
  color:var(--main-color);
}
.topics-box ul.topics-list{
  flex:1;
  text-align:left;
}
ul.topics-list li{
  position:relative;
  padding-left:96px;
}
ul.topics-list li:not(:last-child){
  margin-bottom:1.5em;
  padding-bottom:1.5em;
  border-bottom:1px dashed #ccc;
}
ul.topics-list li .topics-date{
  font-size:0.85em; line-height:2.4;
  color:var(--base-light-color);
  position:absolute;
  top:0; left:0;
}
ul.topics-list li h3{
  font-size:1.2em; line-height:1.4; font-weight:600;
  margin-bottom:0.5em;
}

.title{
  padding-top:3em;
  margin-bottom:2em;
}
.title > h2{
 /*  font-family:var(--zen-kaku-font); */
  font-size:1.8em; line-height:1.8;
  color:var(--main-color);
  position:relative;
}
.title > h2 > .jp{
  position:relative;
  z-index:1;
}
.title > h2 > .eng{
  /* font-family:var(--eng-font); */
  font-size:3.6em; line-height:1.2; font-weight:300;
  letter-spacing:0.1em;
  color:#f0f0f0;
  white-space:nowrap;
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
}
#about .title > h2 > .eng,
#library .title > h2 > .eng,
#faq .title > h2 > .eng,
#rate .title > h2 > .eng{
  color:#fff;
}

#about{
  box-sizing:border-box;
  width:100%;
  padding:60px calc((100% - 1080px) / 2);
  background:var(--bg-color);
}
#about > h3{
  /* font-family:var(--zen-kaku-font); */
  font-size:2.2em; line-height:1.8;
  margin-bottom:0.3em;
}
#about > p{
  line-height:2;
  margin-bottom:3em;
}
.point-box{
  padding:2.5em 3em;
  background:#fff;
  display:flex;
  justify-content:space-between;
  margin-top:2em;
}
.point-box > figure{
  width:450px;
  margin-left:2.5em;
}
.point-box .text-box{
  flex:1;
  text-align:left;
}
.point-box .number{
  /* font-family:var(--eng-font); */
  font-size:1.3em; line-height:1.2;
  color:var(--main-color);
}
.point-box .number > strong{
  font-size:2.4em; font-weight:600;
  margin-left:0.2em;
}
.point-box h2{
  /* font-family:var(--zen-kaku-font); */
  font-size:1.8em; line-height:1.8;
  color:var(--main-color);
  border-bottom:1px solid var(--main-color);
  margin-bottom:0.75em;
  padding-bottom:0.5em;
}
.point-box h3{
  font-size:1.05em; line-height:1.8;
  position:relative;
  padding-left:0.8em;
}
.point-box h3::before{
  content:"";
  border-left:0.4em solid var(--base-color);
  border-top:0.4em solid transparent;
  border-bottom:0.4em solid transparent;
  position:absolute;
  top:0.55em; left:0;
}
.point-box ul.point-list{
  margin-bottom:0.8em;
}

#search{
  margin-top:5em;
  border:1px solid var(--main-color);
  border-radius:11px;
  background:#fff;
  overflow:hidden;
}
#search > h2{
  font-size:1.5em; line-height:1.8;
  color:#fff;
  background:var(--main-color);
  padding:1.0em 0;
  margin-bottom:1.5em;
}
#search > p{
  line-height:2.0;
  margin-bottom:2.0em;
}
ul.search-flow{
  margin:0 4em;
}
ul.search-flow > li{
  display:flex;
  justify-content:space-between;
  background:#f6f6f6;
  background:var(--bg-color);
  text-align:left;
  padding:2em 2.0em;
  margin-bottom:6em;
  position:relative;
}
ul.search-flow > li:last-child{
  margin-bottom:3em;
}
ul.search-flow > li:not(:last-child)::before{
  content:"";
  border-top:2.0em solid var(--main-color);
  border-left:2.5em solid transparent;
  border-right:2.5em solid transparent;
  position:absolute;
  bottom:-5.0em; left:50%;
  transform:translateX(-50%);
}
ul.search-flow > li:not(:last-child)::after{
  content:"";
  width:2.3em; height:2.5em;
  background:var(--main-color);
  position:absolute;
  bottom:-3.5em; left:50%;
  transform:translateX(-50%);
}
ul.search-flow > li > figure{
  width:420px; height:auto;
  aspect-ratio:4/3;
  overflow:hidden;
  margin-left:2em;;
}
ul.search-flow > li:nth-child(1) > figure{
  aspect-ratio:16/10;
}
ul.search-flow li .text-box{
  flex:1;
  padding-left:80px;
}
ul.search-flow li h3{
  font-size:1.25em; line-height:1.8;
  position:relative;
  padding-top:0.75em;
  margin-bottom:0.5em;
}
ul.search-flow li h3::before{
  content:"";
  width:70px; height:auto;
  aspect-ratio:1/1;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  position:absolute;
  top:0; left:-80px;
}
ul.search-flow li:nth-child(1) h3::before{
  background-image:url(../../img/icon_search01.svg);
}
ul.search-flow li:nth-child(2) h3::before{
  background-image:url(../../img/icon_search02.svg);
}
ul.search-flow li:nth-child(3) h3::before{
  background-image:url(../../img/icon_search03.svg);
}
ul.search-flow ul.image-list{
  display:flex;
  justify-content:space-between;
}
ul.search-flow ul.image-list > li{
  width:32%;
}
ul.search-flow ul.image-list > li > figure{
  width:100%; height:auto;
  aspect-ratio:4/3;
  overflow:hidden;
}
#search + .button{
  display:inline-block;
  margin:3em auto 0;
}
#search + .button a{
  display:block;
  text-decoration:none;
  font-size:1.1em; line-height:3.0; font-weight:600;
  color:#fff;
  background:var(--main-color);
  padding:0 4em 0.1em;
  position:relative;
}
#search + .button a::after{
  font-family:var(--icon-font);
  content:"\e5cc";
  font-size:1.5em; font-weight:400;
  position:absolute;
  top:50%; right:0.5em;
  transform:translateY(-50%);
}

#example{
  box-sizing:border-box;
  width:100%;
  padding:60px calc((100% - 1080px) / 2);
}
.example-box{
  display:flex;
  justify-content:space-between;
}
#example .example-box:not(:last-of-type){
  padding-bottom:2.0em;
  margin-bottom:2.0em;
  border-bottom:1px dashed #ccc;
}
.example-box > figure{
  width:450px;
  margin-right:2.5em;
}
.example-box .text-box{
  flex:1;
  text-align:left;
}
.example-box h3{
  font-size:1.25em; line-height:1.8;
  position:relative;
  margin-bottom:0.5em;
}
.example-box p{
  line-height:2.0;
  margin-bottom:2.0em;
}
.example-box .place{
  background:var(--bg-color);
  padding:1em 1.5em;
}

#library{
  box-sizing:border-box;
  width:100%;
  padding:60px calc((100% - 1080px) / 2);
  background:#f8f8f8;
}
.library-box{
  width:680px;
  margin:6em 0 0 auto;
  position:relative;
}
.library-box::before{
  content:"";
  width:480px; height:auto;
  aspect-ratio:4/3;
  background-image:url(../../img/library.jpg);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  position:absolute;
  top:-3em; left:-400px;
}
.library-box-inner{
  box-sizing:border-box;
  width:100%;
  background:#fff;
  border:1px solid #999;
  padding:2em 2.5em;
  position:relative;
  z-index:10;
  text-align:left;
}
.library-area{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  text-align:left;
  margin-bottom:2em;
}
.library-area:last-of-type{
  margin-bottom:1em;
}
.library-area > h3{
  width:7em;
  font-size:1.0em; line-height:2; font-weight:400;
  color:#fff;
  text-align:center;
  background:var(--main-color);
  border-radius:5px;
  padding:0 0 0.1em;
  margin-right:1em;
}
.library-area > ul.library-list{
  flex:1;
}
.library-area > ul.library-list li{
  display:inline;
}
.library-area > ul.library-list li:not(:last-child)::after{
  content:"\3001";
}

#personal-use{
  box-sizing:border-box;
  width:100%;
  padding:60px calc((100% - 1080px) / 2);
}
.personal-box{
  box-sizing:border-box;
  width:100%;
  border:1px solid var(--main-color);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:3em;
}
.personal-box > figure{
  width:260px;
}
.personal-box > figure > img{
  width:100%; height:100%;
  object-fit:cover;
}
.personal-box > .text-box{
  flex:1;
  box-sizing:border-box;
  padding:0 2.5em 0 4em;
  text-align:left;
}
.personal-box > .text-box h3{
  font-size:1.2em; line-height:1.8;
  color:var(--main-color);
  position:relative;
  margin-bottom:0.5em;
}
.personal-box > .text-box h3::before{
  font-family:var(--icon-bootstrap);
  content:"\F8C4";
  font-size:1.25em; font-weight:400;
//  color:var(--main-color);
  position:absolute;
  top:50%; left:0;
  transform:translate(-110%,-50%);
}
.personal-box > .text-box h4{
  font-size:1.05em; line-height:1.8;
  position:relative;
  margin-top:1.0em;
}
.personal-box > .text-box p strong{
  font-size:1.2em;
}

#faq{
  box-sizing:border-box;
  width:100%;
  padding:60px calc((100% - 1080px) / 2);
  background:#f8f8f8;
}
.faq-box{
  box-sizing:border-box;
  width:88%;
  border:1px solid var(--main-color);
  background:#fff;
  padding:1em 1.5em 1em 4.0em;
  margin:1.0em auto;
  text-align:left;
}
.faq-box .question{
  font-size:1.05em; line-height:1.8; font-weight:700;
  color:var(--base-light-color);
  position:relative;
  padding:0 0 ;
  cursor:pointer;
}
.faq-box .question::before{
  content:"Q";
  width:30px; height:auto;
  aspect-ratio:1/1;
  border-radius:100%;
  background:var(--main-color);
  font-size:0.9em; line-height:24px;
  text-align:center;
  color:#FFF;
  position:absolute;
  top:0; left:-2.5em;
}
.faq-box .question span{
  width:16px; height:16px;
  position:absolute;
  top:16%; right:0;
}
.faq-box .question span:before{
  content:"";
  width:100%;
  border-top:2px solid var(--main-color);
  position:absolute;
  top:50%; left:0;
  margin-top:-1px;
}
.faq-box .question span:after{
  content:"";
  height:100%;
  border-left:2px solid var(--main-color);
  position:absolute;
  top:0; left:50%;
  margin-left:-1px;
  transition:0.2s;
}
.faq-box .question.open span:after{
  content:"";
  height:100%;
  border-left:2px solid var(--main-color);
  position:absolute;
  top:0; left:50%;
  margin-left:-1px;
  transform:rotate(-90deg);
  transition:0.2s;
}
.faq-box .answer{
  display:none;
  padding:0;
  margin-top:0.5em;
}

#rate{
  box-sizing:border-box;
  width:100%;
  padding:60px calc((100% - 1080px) / 2);
  background:var(--bg-color);
}
#price{
  display:flex;
  justify-content:space-between;
}
#price > .price-box{
  width:48%;
}
.price-box > table.price-table{
  width:100%;
  border-collapse:collapse;
//  background:#fff;
  margin:2em 0 0;
}
.price-box > table.price-table thead tr th{
  padding:0.3em 0;
  font-size:0.9em; line-height:1.8; font-weight:600;
  color:#fff;
  text-align:center;
  background:var(--main-color);
}
.price-box > table.price-table thead tr th:nth-of-type(even){
  background:rgba(35,78,131,0.0);
//  background:#315f95;
  color:var(--base-light-color);
}
.price-box > table.price-table tbody{
  background:#fff;
}
.price-box > table.price-table tbody tr th{
  width:35%;
  padding:0.5em 0.5em;
  font-size:0.95em; line-height:1.8; font-weight:600;
  text-align:center;
  vertical-align:middle;
  border:1px solid #ccc;
}
.price-box > table.price-table tbody tr td{
  width:65%;
  padding:0.6em 0.5em;
  font-size:0.95em; line-height:1.8;
  text-align:center;
  vertical-align:middle;
  border:1px solid #ccc;
}
.price-box > ul.kigou-list{
  font-size:0.85em; line-height:1.8;
  text-align:left;
}
.price-box > ul.kigou-list li{
  margin-top:0.3em;
}
/*
table.price-table{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  background:#fff;
  margin:2em 0 1.5em;
}
table.price-table thead tr th{
  padding:1.5em 0;
  font-size:0.95em; line-height:1.8; font-weight:600;
  color:#fff;
  text-align:center;
  background:var(--main-color);
}
table.price-table thead tr th:nth-of-type(even){
  background:rgba(35,78,131,0.8);
  background:#315f95;
}
table.price-table tbody tr th{
  padding:0.6em 0.5em 0.6em 1.0em;
  font-weight:600;
  text-align:left;
  vertical-align:middle;
  border:1px solid #ccc;
}
table.price-table tbody tr td{
  padding:0.6em 0.5em;
  text-align:center;
  vertical-align:middle;
  border:1px solid #ccc;
}
#rate ul.kigou-list{
  font-size:0.9em; line-height:1.8;
  text-align:left;
}
#rate ul.kigou-list li{
  display:inline;
  margin-right:1em;
}
*/

#contact{
  box-sizing:border-box;
  width:100%;
  padding:60px calc((100% - 1080px) / 2);
  display:flex;
  justify-content:space-between;
  background:linear-gradient(
    to right,
    #85adcb,
    var(--main-color) 30%
  );
  color:#fff;
  position:relative;
}
#contact::after{
  content:"";
  height:calc(100% - 120px);
  border-left:1px solid #fff;
  position:absolute;
  top:60px; left:50%;
}
#contact .information-box{
  width:46%;
}
.information-box > h2{
  font-size:1.4em; line-height:1.8;
  position:relative;
  margin-bottom:0.5em;
}
.information-box > h2 > span{
  position:relative;
  padding-left:0.9em;
}
.information-box > h2 span::before{
  content:"";
  width:1.4em; height:auto;
  aspect-ratio:1/1;
  background-image:url(../../img/icon_footer.svg);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:contain;
  position:absolute;
  top:50%; left:-0.9em;
  transform:translateY(-50%);
}
.information-box:nth-of-type(2) > h2 span::before{
  background-image:url(../../img/icon_footer02.svg);
}
.information-box > p{
  font-size:0.95em; line-height:1.8;
}
.information-box a.tel-link{
  pointer-events:none;
  font-size:1.4em; font-weight:600;
  color:#fff;
  position:relative;
  padding-left:0.6em;
}
.information-box a.tel-link span{
  font-size:0.95rem; font-weight:400;
  display:inline-block;
  position:relative;
}
.information-box a.tel-link::before{
  font-family:var(--icon-bootstrap);
  content:"\F5C1";
  font-size:0.9em;
  position:absolute;
  top:50%; left:-0.6em;
  transform:translateY(-40%) rotate(5deg);
}
.information-box .button{
  width:70%;
  margin:0.5em auto;
}
.information-box .button:first-of-type{
  margin-top:1.5em;
}
.information-box .button a{
  display:block;
  text-decoration:none;
  font-size:1.1em; line-height:3; font-weight:600;
  color:var(--main-color);
  background:#fff;
  border-radius:5px;
}
.information-box .button a span{
  display:inline-block;
  position:relative;
  padding-left:0.7em;
}
.information-box .button a span::before{
  font-family:var(--icon-bootstrap);
  content:"\F32F";
  font-size:1.2em;
  position:absolute;
  top:50%; left:-0.7em;
  transform:translateY(-50%);
}
.information-box .button a.contact span::before{
  content:"\F32F";
  transform:translateY(-48%);
}
.information-box .button a.link span::before{
  content:"\F1C5";
}
.information-box .button a.pdf span::before{
  content:"\F63E";
}
.information-box .button a:hover{
  color:#fff;
  background:var(--link-color);
}

ul.banner-list{
  padding:60px calc((100% - 1080px) / 2);
  display:flex;
  justify-content:center;
}
ul.banner-list li{
  box-sizing:border-box;
  width:200px; height:55px;
  border:1px solid #ccc;
  margin:0 0.5em;
}
ul.banner-list li a{
  display:block;
  width:100%; height:100%;
  position:relative;
}
ul.banner-list li a img{
  width:auto; height:19px;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}

footer{
  background:var(--main-color);
  background:rgba(35,79,131,1);
  padding:40px 0 100px;
  font-size:0.9em; line-height:1.8;
  color:#fff;
}
footer figure{
  width:260px;
  margin:0 auto;
}
footer > p > .sp-block{
  margin-left:1em;
}
footer #copyright{
  font-size:0.8em; line-height:1.8;
  margin-top:1em;
}

nav#floating-nav{
  box-sizing:border-box;
  width:100%;
  padding:0.8em 0;
  position:fixed;
  bottom:0; left:0; z-index:200;
  background:rgba(43,145,209,0.7);
  transform:translateY(110%);
  transition:0.2s ease-in;
}
.scrolling nav#floating-nav{
  transform:translateY(0);
  transition:0.2s ease-in;
}
nav#floating-nav ul{
  display:flex;
  justify-content:center;
}
nav#floating-nav ul li{
  width:320px;
  margin:0 0.5em;
}
nav#floating-nav ul li a{
  display:block;
  text-decoration:none;
  font-size:1.0em; line-height:1.8; font-weight:600;
  color:var(--main-color);
  border:1px solid var(--main-color);
  border-radius:5px;
  background:#fff;
  padding:0.5em 0;
}
nav#floating-nav ul li a:hover{
  color:#fff;
  background:var(--main-color);
}