@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@900&family=Noto+Sans+JP&display=swap');

* {
  font-family: 'Noto sans JP', 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.4;
  color:inherit;
}

body {
font-family: "Noto Sans Japanese" ; font-weight:400;
}

img{
max-width: 100%;
height: auto;
}

p{
color: #000;
}

.spbr{
display: none;
}

.pcbr{
display: block;
}

a:hover img{
opacity: 1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

a:hover img{
opacity: 0.7;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

.scrollTop{
position: fixed;
bottom: 0;
right: 0;
z-index: 100;
}


.builder{
width: 100%;
max-width: 980px;
margin: 0 auto;
text-align: center;
}

#spBtn{
display: none;
position: absolute;
top: calc(50% - 10px);
right: 20px;
}

.sp-trigger,
.sp-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.sp-trigger {
  position: relative;
  width: 26px;
  height: 19px;
}
.sp-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
.sp-trigger span:nth-of-type(1) {
  top: 0;
}
.sp-trigger span:nth-of-type(2) {
  top: 8px;
}
.sp-trigger span:nth-of-type(3) {
  bottom: 0;
}
.sp-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(14px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
}
.sp-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.sp-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-21px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}


#keiten_nav{
position: relative;
background: #355390;
}

#keiten_nav.fixed{
position: fixed;
top: 0;
left: 0;
}

#keiten_nav ul{
max-width: 1080px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

#keiten_nav ul li{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
border-left:1px solid #fff;
flex-basis: 20%;
}

#keiten_nav ul li:last-child{
border-right: 1px solid #fff;
}

#keiten_nav ul li img{
max-width: 103px;
height: auto;
margin: 20px 0;
}

#keiten_nav ul li a{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
color: #fff;
width: 100%;
text-decoration: none;
background: #2C7FF4;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

#keiten_nav ul li.logo a{
background: none;
}

#keiten_nav ul li a:hover{
opacity: 0.7;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}

#keiten_main{
position: relative;
z-index: 5;
}

#keiten_main.active{
margin-top: 105px;
}

#keiten_main .concept{
padding-bottom: 50px;
}

#keiten_main .concept p.read{
text-align: center;
font-size: 24px;
font-weight: bold;
padding: 80px 0 50px;
}

#keiten_main .concept img{
width: 100%;
max-width: 600px;
margin: 0 auto;
}

#keiten_main .concept p.caption{
text-align: left;
max-width: 600px;
margin: 0 auto;
padding-top: 20px;
font-size: 12px;
}

#keiten_main .point{
padding: 60px 0 80px;
background: #ECF4FF;
}

.page_title{
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}

.page_title span{
display: block;
padding-top: 5px;
font-size: 16px;
color: #888;
}

#keiten_main .point ul{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

#keiten_main .point ul li{
flex-basis: 23%;
overflow: hidden;
background: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 1px 8px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 1px 8px rgba(0,0,0,0.1);
box-shadow: 0px 1px 8px rgba(0,0,0,0.1);
}

#keiten_main .point ul li span{
display:block;
text-align: left;
font-size: 20px;
padding: 15px 10px 20px;
}

#keiten_main .example{
padding: 80px 0 60px;
}

#keiten_main .example ul{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

#keiten_main .example ul li{
flex-basis: 49%;
font-size: 12px;
text-align: left;
}

#keiten_main .example ul li img{
margin-bottom: 10px;
}

#keiten_main .color{
padding: 60px 0 80px;
background: #ECF4FF;
}

#keiten_main .color ul{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

#keiten_main .color ul li{
flex-basis: 32%;
font-size: 24px;
}

#keiten_main .color ul li img{
margin-bottom: 10px;
}


#keiten_size{
margin-top: -120px;
padding: 120px 0 80px;
position: relative;
z-index: 4;
background: #fff;
}

#keiten_size .builder{
padding-top: 60px;
max-width: 500px;
}

#keiten_size .builder .text{
margin-top: 40px;
border: 1px solid #000;
padding: 20px 40px;
text-align: left;
}

#keiten_set{
margin-top: -120px;
padding: 180px 0 80px;
background: #ECF4FF;
text-align: center;
position: relative;
z-index: 3;
}

#keiten_set .set_main{
padding-bottom: 30px;
}

#keiten_set .set_main img{
width: 100%;
max-width: 600px;
margin: 0 auto 10px;
}

#keiten_set .set_main p{
font-size: 12px;
text-align: center;
}

#keiten_set .layout{
padding-top: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

#keiten_set .layout .item{
flex-basis: 49%;
}

#keiten_set .layout .item p.title{
font-size: 24px;
font-weight: bold;
color: #DC0022;
}

#keiten_set .layout.sub .item p.title{
color: #355390;
}

#keiten_set .layout .item p.title span{
display: block;
font-size: 16px;
}


#keiten_price{
margin-top: -120px;
padding: 180px 0 80px;
position: relative;
z-index: 2;
background: #fff;
}

#keiten_price table{
width: 100%;
border-collapse: collapse;
}

#keiten_price table thead{
background: #EDEDED;
border-bottom: 2px solid #fff;
}

#keiten_price table thead th{
font-size: 12px;
font-weight: bold;
text-align: left;
padding: 10px 15px;
}

#keiten_price table tbody tr td{
vertical-align: middle;
padding: 20px 15px;
}

#keiten_price table tbody tr td span.buy{
display: block;
font-size: 24px;
font-weight: bold;
}

#keiten_price table tbody tr.base_set{
background: #FFF2F5;
border-bottom: 2px solid #fff;
}

#keiten_price table tbody tr.base_set td:first-child{
color: #DC0022;
font-weight: bold;
}

#keiten_price table tbody tr.option_set{
background: #EBF8FF;
border-bottom: 2px solid #fff;
}

#keiten_price table tbody tr.option_set td:first-child{
color: #355390;
font-weight: bold;
}

#keiten_establishment{
margin-top: -120px;
padding: 180px 0 80px;
background: #ECF4FF;
text-align: center;
position: relative;
z-index: 1;
}

#keiten_establishment ul{
margin-bottom: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: space-between;
-webkit-box-pack: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

#keiten_establishment ul li{
flex-basis: 23%;
}

#keiten_establishment ul li img{
margin-bottom: 10px;
}

#keiten_establishment .establishment{
max-width: 600px;
margin: 0 auto;
}

#keiten_establishment .establishment p.title{
text-align: center;
margin-bottom: 10px;
}

#keiten_establishment p.cap{
font-size: 12px;
}

#keiten_attention{
padding: 60px 0 0;
}

#keiten_attention p{
font-size: 12px;
}