@charset 'utf-8';
@import url("./style.css");
@import url(//fonts.googleapis.com/css?family=Noto+Serif+JP);

.kaitori_contents {
  width: 100%;
  max-width:1200px;
  box-sizing: border-box;
  padding:2%;
  margin: 0 auto 0;
}

@media screen and (max-width: 568px) {
.kaitori_contents{
  padding:2% 1%;
  letter-spacing:0em;
}
}

.kaitori_contents h2{
  font-size:3.6em;
  font-weight:normal;
  margin-bottom:30px;
  text-align: center;
}

@media screen and (max-width: 800px) {
.kaitori_contents h2{
    font-size:3em;
	margin-bottom:20px;
}
}

@media screen and (max-width: 568px) {
.kaitori_contents h2{
  padding:0 3%;
  font-size:2.4em;
}
}

/* kaitori_box
--------------------------------------------------*/
.kaitori_box{
  width:96%;
  margin:0 auto 0;
  padding:3% 0;
}

@media only screen and  (max-width: 1280px) {
.kaitori_box{
  width:100%;
}
}

@media only screen and  (max-width: 568px) {
.kaitori_box{
  padding:5% 0 0;
  width:96%;
}
}

.kaitori_top{
  padding: 0;
  width:100%;
  margin:2% 0;
  background-size:  50% auto ;
  background-position: left center;
  background-repeat: no-repeat;
  background-image: url(../images/bg-kaitori.jpg);
}

@media screen and (max-width: 800px) {
.kaitori_top{
  background-size:  100% auto;
  background-position: center top;
}
}

.kai-ph{
  padding: 0;
  width:50%;
  margin:0;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 800px) {
.kai-ph{
  width:100%;
  height:320px;
  display:block;
}
}

@media screen and (max-width: 568px) {
.kai-ph{
  height:220px;
}
}

.kai-text{
  background-color: #FFF;
  padding: 0;
  width:50%;
  margin:0;
  display:inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  padding:3% 3.5%;
}

@media only screen and  (max-width: 1280px) {
.kai-text{
  padding:2.5% 3.5%;
}
}

@media screen and (max-width: 800px) {
.kai-text{
  width:100%;
  display:block;
  padding:3% 3.5% 5%;
}
}

.kai-text h3{
  font-size:3.2em;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-weight:500;
  color:#1345AD;
  margin-bottom:10px;
  line-height:1.3!important;
}

@media only screen and  (max-width: 1280px) {
.kai-text h3{
  font-size:2.8em;
}
}

@media screen and (max-width: 800px) {
.kai-text h3{
  font-size:2em;
  margin-bottom:15px;
}
}

@media screen and (max-width: 568px) {
.kai-text h3{
  font-size:1.5em;
  line-height:1.6;
  margin-top:8px;
  margin-bottom:12px;
}
}

.kai-text h3 span {
  background: linear-gradient(transparent 70%, #FFED2B 70%);
  padding-right:5px;
  padding-left:5px;
}

.kai-text p{
  font-size:14px;
  color:#000;
  line-height:1.8;
}

@media only screen and  (max-width: 1280px) {
.kai-text p{
  line-height:1.6;
}
}

.ki-merit-box{
  width:100%;
  text-align:center;
}

.ki-merit{
  font-size: 2.8em;
  background:#000;
  color:#FFF;
  padding:8px 30px 10px;
  display:inline-block;
  font-weight:500;
  font-family: 'Noto Sans Japanese', sans-serif;
  margin-top:5%;
  margin-bottom:20px;
  -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
  position: relative;
}

@media screen and (max-width: 800px) {
.ki-merit{
  font-size: 2.2em;
  margin-top:3%;
  margin-bottom:0px;
}
}

@media screen and (max-width: 568px) {
.ki-merit{
  font-size: 1.3em;
  display:block;
  width:96%;
  margin:25px auto 0;
  padding:8px 0 10px;
}
}

.ki-merit::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  content: ' ';
  border: 10px solid transparent;
  border-top-color: #000;
}

.ki-merit strong {
  color: #FFED2B;
  font-size:1.1em;
}

.ki-merit-tx{
  font-size: 1.5em;
  color:#000;
  font-weight:400;
  font-family: 'Noto Sans Japanese', sans-serif;
  margin:20px 0 0;
  line-height:1.8;
}

@media screen and (max-width: 800px) {
.ki-merit-tx{
  font-size: 1.35em;
  padding:0 2%;
}
}

@media screen and (max-width: 568px) {
.ki-merit-tx{
  font-size: 1.2em;
}
}

.med_list{
  width:100%;
  margin: 4% auto 0;
}

@media screen and (max-width: 568px) {
.med_list{
  text-align: center;
  margin: 0 auto 0;
}
}

.med_list li{
    width: 200px;
    display:inline-block;
    margin:0 5px;
    text-align: center;
    vertical-align:top;
}

@media screen and (max-width: 1280px) {
.med_list li{
    width: 165px;
	margin:5px;
}
}

@media screen and (max-width: 800px) {
.med_list li{
    width: 200px;
	margin:20px 10px 0;
}
}

@media screen and (max-width: 568px) {
.med_list li{
    width: 150px;
}
}

.med_list li .maru{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #2E3092;
    background-size: cover;
    text-align: center;
}

@media screen and (max-width: 1280px) {
.med_list li .maru{
    width: 165px;
    height: 165px;
}
}

@media screen and (max-width: 200px) {
.med_list li .maru{
    width: 200px;
    height: 200px;
}
}

@media screen and (max-width: 568px) {
.med_list li .maru{
    width: 150px;
    height: 150px;
}
}

.med_list li .maru p {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    font-weight:400;
    font-size: 1.3em;
    font-family: 'Noto Sans Japanese', sans-serif;
    color: #fff;
    text-align: center;
    line-height: 1.4;
    letter-spacing:0em;
    padding-bottom:20px;
    box-sizing: border-box;
}

@media screen and (max-width: 568px) {
.med_list li .maru p {
    font-size: 1em;
	padding-bottom:15px;
}
}
.med_list li .maru p span {
  font-size: 2em;
  font-weight:600;
  color: #FCFF00;
}

@media screen and (max-width: 1280px) {
.med_list li .maru p span {
  font-size: 1.45em;
}
}

@media screen and (max-width: 568px) {
.med_list li .maru p span {
    font-size: 1.6em;
}
}

.med_list li .maru img {
  width:auto;
  height:45px;
  margin:0 auto 10px;
}

.med_list li .mr-tx{
  font-size: 14px;
  margin-top:20px;
  color: #000;
  text-align: left;
  background:#FFF;
  position: relative;
  padding:5px 10px;
  border:1px solid #CCC;
  box-sizing: border-box;
}


.med_list li .mr-tx::before {
  position: absolute;
  top: 0;
  left: 50%;
  margin-top: -20px;
  margin-left: -10px;
  content: ' ';
  border: 10px solid transparent;
  border-bottom-color: #ccc;
}

.kaitori_flow{
  padding:2% 0;
  background:#FFF;
  width:100%;
  box-sizing: border-box;
}

.kaitori_flow h4{
  font-size:3.6em;
  font-weight:normal;
  margin-bottom:30px;
  text-align: center;
  color:#000;
  line-height:1;
}

@media screen and (max-width: 800px) {
.kaitori_flow h4{
    font-size:3em;
	margin-bottom:20px;
}
}

@media screen and (max-width: 568px) {
.kaitori_flow h4{
  padding:15px 3%;
  font-size:2.4em;
  margin-bottom:0;
}
}

.kf-line{
  width:150px;
  border-bottom:4px solid #1345AD;
  margin:0 auto;
}

.kf-top{
  font-size: 1.5em;
  color:#000;
  font-weight:400;
  font-family: 'Noto Sans Japanese', sans-serif;
  margin:30px 0;
  line-height:1.8;
  text-align: center;
}

@media screen and (max-width: 800px) {
.kf-top{
  font-size: 1.35em;
  padding:0 2%;
}
}

@media screen and (max-width: 568px) {
.kf-top{
  font-size: 1.2em;
  margin:20px 0;
}
}

.kflow-box{
  margin:0 auto;
  max-width:850px;
  width:100%;
}

@media screen and (max-width: 568px) {
.kflow-box{
  width:94%;
  margin:0 3%;
}
}

.kflow-box dl{
  width:100%;
  box-sizing: border-box;
  padding:2% 3% 2% 0;
  position: relative;
}

@media screen and (max-width: 568px) {
.kflow-box dl{
  width:100%;
  padding:0 4% 4%;
}
}

.kflow-box .kfb01{background:#9BC3E3;margin-bottom:15px;}

.kflow-box .kfb01::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  content: ' ';
  border: 15px solid transparent;
  border-top-color: #9BC3E3;
}

.kflow-box .kfb02{background:#679BC4;margin-bottom:15px;}

.kflow-box .kfb02::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  content: ' ';
  border: 15px solid transparent;
  border-top-color: #679BC4;
}

.kflow-box .kfb03{background:#3D75A2;margin-bottom:15px;}

.kflow-box .kfb03::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  content: ' ';
  border: 15px solid transparent;
  border-top-color: #3D75A2;
}

.kflow-box .kfb04{background:#225C8B;margin-bottom:15px;}

.kflow-box .kfb04::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  content: ' ';
  border: 15px solid transparent;
  border-top-color: #225C8B;
}

.kflow-box .kfb05{background:#134771;margin-bottom:10px;}

.kflow-box dt{
  width:20%;
  box-sizing: border-box;
  display:inline-block;
  vertical-align:middle;
  text-align: center;
}

@media screen and (max-width: 568px) {
.kflow-box dt{
  width:100%;
  padding:7px 0;
}
}

.kflow-box dt p{
  color:#FFF;
  font-size:2em;
  font-family: Roboto,sans-serif;
  font-weight:500;
  text-shadow:1px 1px 2px #072137;
}

@media screen and (max-width: 568px) {
.kflow-box dt p{
  font-size:1.5em;
}
}

.kflow-box dt span{
  font-size:1.2em;
  font-weight:600;
}

.kflow-box dd{
  width:80%;
  box-sizing: border-box;
  display:inline-block;
  vertical-align:middle;
  padding:10px 15px;
  background:#FFF;
  font-size:14px;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
}

@media screen and (max-width: 568px) {
.kflow-box dd{
  width:100%;
}
}

.kflow-box dd h5{
  color:#1345AD;
  font-weight:500;
  font-family: 'Noto Serif JP', serif;
  font-size:2em;
}

@media screen and (max-width: 568px) {
.kflow-box dd h5{
  font-size:1.6em;
  text-align: center;
}
}

.kflow-box dd p{
  font-size: 15px;
  color:#000;
  margin:5px 0;
}

@media only screen and  (max-width: 568px) {
.kflow-box dd p{
  font-size: 14px;
}
}

.kflow-box dd p strong{
  font-size: 1.5em;
  color:#CF0000;
  font-weight:500;
  font-family: 'Noto Sans Japanese', sans-serif;
}

@media screen and (max-width: 568px) {
.kflow-box dd p strong{
  font-size: 1.25em;
}
}

.kfconta{
  font-size: 14px;
  color:#000;
  margin-top:5px;
}

@media only screen and  (max-width: 568px) {
.kfconta{
  text-align: center;
  padding:0 2% 10px;
  margin-top:0;
}
}

.fconL{
  width:50%;
  box-sizing: border-box;
  display:inline-block;
  vertical-align:middle;
}

@media only screen and  (max-width: 568px) {
.fconL{
  width:100%;
  padding:0 2% 10px;
  display:block;
}
}

.fconL span{
  font-size: 1.5em;
  color:#1345AD;
  font-family: Roboto,sans-serif;
  font-weight:500;
}

.fconR{
  width:50%;
  box-sizing: border-box;
  display:inline-block;
  vertical-align:middle;
}

@media only screen and  (max-width: 568px) {
.fconR{
  width:100%;
  padding:1% 2%;
  display:block;
}
}

.fconR a{
  color:#FFF;
  background:#1345AD;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
  padding:10px 20px;
}

.fconR a:hover{
  color:#FFF;
  background:#000;
}

.kdjsk-ttl{
  font-size:3.4em;
  font-weight:normal;
  margin:30px auto;
  text-align: center;
  color:#000;
  line-height:1;
}

@media screen and (max-width: 800px) {
.kdjsk-ttl{
  font-size:3em;
  margin-bottom:20px;
}
}

@media screen and (max-width: 568px) {
.kdjsk-ttl{
  padding:0 3%;
  font-size:2.4em;
  margin:25px auto 15px;
}
}

.kjsk-list{
  width:100%;
  max-width:950px;
  margin:3% auto 0;
  text-align: center;
}

.kjsk-list-sy{
  width:45%;
  background:#FFF;
  margin:0 2%;
  text-align: left;
  display:inline-block;
  vertical-align:top;
}

@media screen and (max-width: 800px) {
.kjsk-list-sy{
  width:47%;
  margin:0 1%;
}
}

@media screen and (max-width: 568px) {
.kjsk-list-sy{
  width:94%;
  margin:0 3% 4%;
}
}

.kjsk-list-sy ul{
  width:100%;
  box-sizing: border-box;
  padding:2% 3%;
}

.kjsk-list-sy li{
  font-size:14px;
  font-weight:bold;
  margin:5px 10px;
  display:inline-block;
}

.kjs-sy-ttl{
  font-size: 1.8em;
  color:#FFF;
  background:#000;
  display:block;
  padding:10px 20px;
  font-weight:500;
  font-family: 'Noto Sans Japanese', sans-serif;
  text-align: center;
  letter-spacing:0.1em;
}