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

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

@media screen and (max-width: 568px) {
.formwork_contents{
  padding:2% 1%;
}
}

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

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

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

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

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

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

.formwork_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-fmwork.jpg);
}

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

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

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

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

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

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

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

.frwk-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) {
.frwk-text h3{
  font-size:2.8em;
}
}

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

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

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

.frwk-text p{
  font-weight:400;
  font-family: 'Noto Sans Japanese', sans-serif;
  color:#000;
  line-height:1.8;
  font-size:16px;
}

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

.cdwn-teian{
  width:100%;
  max-width:650px;
  margin:1% auto 0;
  position: relative;
  text-align:center;
}

.cdwn-teian img{
  width:100%;
  height:auto;
  margin-top:20px;
}

.cdwn-teian p {
  position: absolute;
  top: 0;
  width:100%;
  background-color: #11327F;
  color:#FFF;
  padding:7px 0;
  font-weight:500;
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 2.5em;
  letter-spacing:0.05em;
}

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

.fm-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-bottom:10px;
  -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
  position: relative;
}

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

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

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

.amenity {
  animation: amenityAnime 1.5s infinite alternate;
}
@keyframes amenityAnime{
   0% { background-color:#E4007F; }
 100% { background-color:#11327F; }
}


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

.fm-merit-tx{
  font-size: 1.8em;
  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) {
.fm-merit-tx{
  font-size: 1.35em;
  padding:0 2%;
}
}

.fm-merit-tx span {
  background: linear-gradient(transparent 70%, #FFED2B 70%);
  padding-right:5px;
  padding-left:5px;
  color:#EB2727;
  font-size:1.1em;
  font-weight:500;
}

.fm-merit-img{
  margin:20px 0 0;
}

@media screen and (max-width: 800px) {
.fm-merit-img{
  margin:15px 0 0;
}
}

.fm-merit-img img{
  width:100%;
  height:auto;
  max-width:923px;
}

.fm-other{
  width:100%;
  text-align:center;
  margin:5% 0 0;
  padding:0;
}

@media screen and (max-width: 800px) {
.fm-other{
  margin:15px 0 0;
}
}

.fmo-text{
  width:60%;
  display:inline-block;
  font-size: 1.8em;
  color:#000;
  font-weight:400;
  font-family: 'Noto Sans Japanese', sans-serif;
  line-height:1.8;
  vertical-align: middle;
  padding:0 3%;
  box-sizing: border-box;
}

@media screen and (max-width: 800px) {
.fmo-text{
  font-size: 1.4em;
  padding:0 3%;
}
}

@media screen and (max-width: 568px) {
.fmo-text{
  width:100%;
  display:block;
  font-size: 1.35em;
  padding: 10px 0 0;
  margin:0;
}
}

.fmo-text span {
  background: linear-gradient(transparent 70%, #FFED2B 70%);
  padding-right:5px;
  padding-left:5px;
  color:#EB2727;
  font-size:1.1em;
  font-weight:500;
}

.fmo-text p{
  margin:10px 0;
}

@media screen and (max-width: 568px) {
.fmo-text p{
  margin:10px 0 0;
}
}

.fmo-ph{
  width:15%;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 568px) {
.fmo-ph{
  width:35%;
  margin-right:5%;
}
}

.fmo-ph img{
  width:100%;
  height:auto
}

.fmo-ph2{
  width:15%;
  display:inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 568px) {
.fmo-ph2{
  display:none;
}
}

.fmo-ph2 img{
  width:100%;
  height:auto
}


.fmo-ph-sp{
  display:none;
}

@media screen and (max-width: 568px) {
.fmo-ph-sp{
  width:35%;
  margin-left:5%;
  display:inline-block;
  vertical-align: middle;
}

.fmo-ph-sp img{
  width:100%;
  height:auto
}
}

.fmo-text2{
  width:100%;
  display:block;
  font-size: 1.8em;
  color:#000;
  font-weight:400;
  font-family: 'Noto Sans Japanese', sans-serif;
  line-height:1.8;
  vertical-align: middle;
  padding:0 3%;
  box-sizing: border-box;
}

@media screen and (max-width: 800px) {
.fmo-text2{
  font-size: 1.4em;
  padding:0 3%;
}
}

@media screen and (max-width: 568px) {
.fmo-text2{
  width:100%;
  display:block;
  font-size: 1.35em;
  padding: 10px 0 0;
  margin:0;
}
}

.fmo-text2 span {
  background: linear-gradient(transparent 70%, #FFED2B 70%);
  padding-right:5px;
  padding-left:5px;
  color:#EB2727;
  font-size:1.1em;
  font-weight:500;
}

.fmo-text2 p{
  margin:10px 0;
}

@media screen and (max-width: 568px) {
.fmo-text2 p{
  margin:10px 0 0;
}
}

.fmo-ph-list{
  padding:4% 1% 0;
  width:100%;
  box-sizing: border-box;
  text-align: center;
}

.fmo-ph-list li{
  width:40%;
  height:auto;
  margin:0 2%;
  display:inline-block;
  vertical-align: top;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
  overflow:hidden;
  -moz-box-shadow: 0 1px 3px #443E3E;
  -webkit-box-shadow: 0 1px 3px #443E3E;
  box-shadow: 0 1px 3px #443E3E;
}

@media screen and (max-width: 800px) {
.fmo-ph-list li{
  width:46%;
}
}

@media screen and (max-width: 568px) {
.fmo-ph-list li{
  width:90%;
  display:inline-block;
  margin:4% auto 0;
}
}

.fmo-ph-list li img{
  width:100%;
  height:auto;
}

.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.2em;
  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;
}
}

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

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

.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:2em;
  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;
}

.formwconta{
  margin:0 auto;
  max-width:600px;
  width:100%;
  background:#FFF;
  box-sizing: border-box;
  padding:2%;
  font-size:16px;
  text-align: center;
  -webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;
}

@media only screen and  (max-width: 568px) {
.formwconta{
  width:94%;
}
}

.fcnt-top{
  margin-bottom:15px;
  font-weight:500;
  font-family: 'Noto Sans Japanese', sans-serif;
}

@media only screen and  (max-width: 568px) {
.fcnt-top{
  margin-bottom:8px;
}
}

.fwconL{
  width:55%;
  box-sizing: border-box;
  display:inline-block;
  vertical-align:middle;
  line-height:1.4;
}

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

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

.fwconL small{
  font-size: 14px;
}

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

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

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

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