@charset "Shift_JIS";

/**
 -----Object/Project Style-----
 01.reset
 02.common
 03.header
 04.content
 05.navi
 06.flow
 07.stepbox
 08.casebox
 09.support
 10.notes
 11.note
 12.btn
 13.pagetop
 14.footer
 15.hack
 16.responsive
 ------------------------------
**/


/*** reset ***/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote {margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;font-size:100%;line-height:1;}
fieldset, img {border:0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style:normal;font-weight:normal;}
ol, ul {list-style:none;}
table {margin:0;}
abbr, acronym {border:none;}
a {outline-width:0;color:#dd0000;}
a:hover{color:#a70000;}
input, textarea {font-size:120%;}
select {
  -moz-appearance:none;
  -webkit-appearance:none;
  appearance:none;
  border-radius:0;
  border:0;
  margin:0;
  padding:0;
  background:none transparent;
  vertical-align:middle;
  font-size:inherit;
  color:inherit;
  box-sizing:content-box;
}
form {
  overflow:hidden;
}

/*** common ***/
.ie6_error, .noScript {
  background:#F66;
  padding:30px;
  text-align:center;
  font-size:150%;
  color:#333;
}
.innerbox {
  width:810px;
  margin:0 auto;
  padding:30px;
  overflow:hidden;
}
#localbody {
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","Osaka",Verdana,"ＭＳ Ｐゴシック","MS P Gothic",Arial,Helvetica,sans-serif;
  position:relative;
}
#localbody i {
  font-family:"Font Awesome 5 Free";
  font-weight:900;
}
#localbody .image {
  text-align:center;
  margin:15px auto;
}


/*** header ***/
#localbody .header {
  width:100%;
  padding:0;
  display:block;
  overflow:hidden;
}
#localbody .header h1 {
  padding:15px 0;
  font-size:18px;
  text-align:center;
  color:#ffffff;
  font-weight:bold;
  letter-spacing:3px;
  background-color:#e3182c;
}
#localbody .header h1 br {
  display:none;
}
#localbody .header .logo {
  text-align:center;
  margin:30px auto;
}
#localbody .header .cath {
  background:url("../img/cath_bg.jpg") 0 0;
  background-size:cover;
  padding:45px;
}
#localbody .header .cath p {
  text-align:center;
  font-weight:bold;
  color:#ffffff;
  text-shadow:0px 2px 3px #000;
  font-size:130%;
}
#localbody .header .cath .point {
  width:600px;
  margin:30px auto 0 auto;
  padding:30px;
  background-color:#ffffff;
  text-align:center;
  border-radius:16px;
  box-shadow:0px 0px 10px rgba(0,0,0,0.3);
}
#localbody .header .cath .point h2 {
  color:#e3182c;
  font-size:110%;
  font-weight:bold;
  border-top:2px dashed #e3182c;
  border-bottom:2px dashed #e3182c;
  display:inline-block;
  line-height:1.8;
  letter-spacing:1px;
}
#localbody .header .cath .point ul {
  overflow:hidden;
  margin:15px auto 0 auto;
}
#localbody .header .cath .point ul li {
  width:50%;
  text-align:left;
  float:left;
}
#localbody .header .cath .point ul li:nth-child(2n) {
  float:right;
}
#localbody .header .cath .point ul li img {
  vertical-align:middle;
}


/*** content ***/
.content {
  
}
.content:nth-child(even) {
  background-color:#f1f1f1;
}
.content h3 {
  border-left:15px solid #e3182c;
  margin:0;
  color:#e3182c;
  font-size:150%;
  font-weight:bold;
  padding:15px;
}
.content h4 {
  background-color:#e3182c;
  color:#ffffff;
  margin:15px 15px 15px 30px;
  display:inline-block;
  padding:10px;
  letter-spacing:1px;
}
.content span.update {
  letter-spacing:0;
  font-size:80%;
}
.content table.ranking {
  overflow:hidden;
  margin:0 20px;
  padding:10px 15px;
  width:100%;
}
.content table.ranking td {
  vertical-align:middle;
  text-align:center;
}
.content table.ranking td span {
  border:2px solid #ddd;
  border-radius:6px;
  display:table-cell;
  padding:20px 10px;
  vertical-align:middle;
  font-weight:bold;
  color:#333333;
  line-height:1.4;
  font-size:90%;
  letter-spacing:2px;
  position:relative;
}
.content table.ranking td span.icn_no1:before,
.content table.ranking td span.icn_no2:before,
.content table.ranking td span.icn_no3:before,
.content table.ranking td span.icn_no4:before,
.content table.ranking td span.icn_no5:before {
  display:inline-block;
  position:absolute;
  left:-15px;
  top:-15px;
}
.content table.ranking td span.icn_no1:before {
  content:url("../img/icn_no1.gif");
}
.content table.ranking td span.icn_no2:before {
  content:url("../img/icn_no2.gif");
}
.content table.ranking td span.icn_no3:before {
  content:url("../img/icn_no3.gif");
}
.content table.ranking td span.icn_no4:before {
  content:url("../img/icn_no4.gif");
}
.content table.ranking td span.icn_no5:before {
  content:url("../img/icn_no5.gif");
}
.content table td .pht {
  margin-top:15px;
}
.content table.course {
  overflow:hidden;
  margin:0 30px;
  padding:10px 15px;
  border-left:1px solid #dddddd;
  border-top:1px solid #dddddd;
  border-collapse:collapse;
}
.content table.course th,
.content table.course td {
  padding:15px;
  font-size:90%;
  border-right:1px solid #dddddd;
  border-bottom:1px solid #dddddd;
}
.content table.course th {
  width:180px;
  background-color:#f5f5f5;
}
.content table.course td {
  
}
.lets {
  text-align:center;
  margin:0 auto 15px auto;
}
.lets img {
  
}


/*** navi ***/
.navi {
  width:845px;
  margin:30px auto 15px auto;
}
.navi ul {
  overflow:hidden;
}
.navi ul li {
  width:200px;
  float:left;
  margin-right:15px;
  background:url("../img/navi_bg.png") no-repeat 0 0;
}
.navi ul li:last-child {
  float:right;
  margin-right:0;
}
.navi ul li a {
  background-color:rgba(218,16,36,0.9);
  color:#ffffff;
  display:table;
  border-radius:6px;
  padding:10px;
  font-weight:bold;
  text-decoration:none;
}
.navi ul li a:hover {
  color:#fff600;
}
.navi ul li a i {
  display:table-cell;
}
.navi ul li a span {
  display:table-cell;
  text-align:center;
  font-size:120%;
  letter-spacing:1px;
  width:100%;
}
.navi.fixed {
  position:fixed;
  top:0;
  right:0;
  left:0;
  z-index:5;
  margin:0 auto;
  background-color:#ffffff;
  padding:10px;
}


/*** flow ***/
.flow {
  width: 100%;
  display:table;
  margin:15px auto;
}
.flow .pht {
  display:table-cell;
  vertical-align:top;
  padding:15px;
}
.flow dl {
  display:table-cell;
  vertical-align:top;
  padding:15px;
}
.flow dl dt {
  font-size:110%;
  font-weight:bold;
  color:#333333;
  margin:0 0 15px 0;
}
.flow dl dd {
  display:table;
  margin:0 0 15px 0;
}
.flow dl dd b {
  background-color:#727272;
  color:#ffffff;
  padding:0 5px;
}
.flow dl dd p {
  display:table-cell;
  padding-left:15px;
  line-height:1.6;
}
.flow dl dd p span.notes {
  font-size: 75%;
}
.flow dl dd p span.notes img {
  width: 100%;
}
.flow dl dd .btn {
  display: inline-block;
  width: 325px;
  margin-left:15px;
}
.flow dl dd .btn a {
  width: 100%;
  display: inline;
  padding: 5px 15px;
  font-size: 120%;
}


/*** stepbox ***/
.stepbox {
  
}
.stepbox ul {
  
}
.stepbox ul li {
  width:210px;
  margin:30px 0 30px 30px;
  padding:15px;
  background-color:#ffffff;
  text-align:center;
  float:left;
  box-shadow:0px 0px 10px rgba(0,0,0,0.3);
}
.stepbox ul li:last-child {
  margin:30px 0 30px 0;
  float:right;
}
.stepbox ul li .item {
  position:relative;
}
.stepbox ul li .item:after {
  display:inline-block;
  content:url("../img/step_arrow.png");
  position:absolute;
  top:90px;
  right:-55px;
}
.stepbox ul li:last-child .item:after {
  content:none;
}
.stepbox ul li .item p {
  padding:45px 0 0 0;
  font-size:85%;
  font-weight:bold;
  color:#333;
  line-height:1.4;
  position:relative;
}
.stepbox ul li .item p:last-child {
  padding:15px 0 0 0;
}
.stepbox ul li .item p span.icn {
  display:block;
  background-color:#e3182c;
  color:#ffffff;
  width:35%;
  position:absolute;
  left:-30px;
  top:0;
  padding:5px 0 5px 0;
}
.stepbox ul li .item p img {
  display:block;
  margin:0 auto;
}
.stepbox ul li .item p strong {
  color:#e3182c;
  font-weight:bold;
}


/*** casebox ***/
.casebox {
  
}
.casebox ul {
  
}
.casebox ul li {
  width:750px;
  margin:30px;
  padding:15px;
  background-color:#ffffff;
  text-align:center;
  box-shadow:0px 0px 10px rgba(0,0,0,0.3);
}
.casebox ul li .item {
  width:100%;
  display:table;
  padding:0;
  font-size:85%;
  font-weight:bold;
  color:#333;
  line-height:1.4;
  position:relative;
}
.casebox ul li .item p {
  display:table-cell;
  vertical-align:middle;
}
.casebox ul li .item p.lb {
  width:270px;
  text-align:center;
}
.casebox ul li .item p.rb {
  text-align:left;
}
.casebox ul li .item p.lb span.icn {
  width:15%;
  font-size:120%;
  letter-spacing:1px;
  display:block;
  background-color:#e3182c;
  color:#ffffff;
  position:absolute;
  left:-30px;
  top:0;
  padding:5px 0 5px 0;
}
.casebox ul li .item p.lb span.icn b {
  font-size:120%;
  vertical-align:middle;
}
.casebox ul li .item p.lb img {
  display:block;
  margin:0 auto;
}
.casebox ul li .item p.rb strong {
  background-color:#e3182c;
  color:#ffffff;
  display:inline-block;
  padding:5px 10px;
}
.casebox ul li .item p.rb span {
  display:block;
  margin-top:5px;
  font-weight:normal;
  font-size:90%;
}
.casebox ul li .item p.rb span strong {
  background:none;
  color:#e3182c;
}
.casebox ul li .item p.rb span strong img {
  vertical-align:middle;
}


/*** support ***/
.support {
  margin:15px auto;
}
.support p {
  text-align:center;
  font-size:120%;
  font-weight:bold;
  color:#333333;
}


/*** notes ***/
.notes {
  width:70%;
  margin:15px auto;
  font-size:80%;
}
.notes li {
  text-indent:-1em;
  margin:0 0 0 1em;
  line-height:1.6;
  color:#666666;
}
.notes dl {
  font-size:85%;
}
.notes dl dt {
  font-size:110%;
  display:inline-block;
  font-weight:bold;
}
.notes dl dd {
  line-height:1.6;
}
.notes dl dd:last-child {
  margin-top:15px;
}
.notes dl dd span {
  font-weight:bold;
  display:block;
}


/*** note ***/
span.note {
  margin:15px auto;
  font-size:80%;
  display:inline-block;
  font-weight:normal;
}


/*** btn ***/
.btn {
  width:100%;
}
.btn a {
  width:60%;
  margin:0 auto;
  padding:15px;
  font-size:140%;
  font-weight:bold;
  letter-spacing:1px;
  color:#ffffff;
  display:block;
  text-align:center;
  text-decoration:none;
  background-color:#e3182c;
  border-radius:60px;
}
.btn a:hover {
  color:#fff600;
  box-shadow:0 2px 5px rgba(0,0,0,.1),0 2px 30px rgba(0,0,0,.1);
  transition:.3s !important;
}
.btn a i {
  margin-right:15px;
}


/*** pagetop ***/
#pagetop {
  bottom:10px;
  padding:0 0.5em 0 0.5em;
  position:fixed;
  right:3%;
  bottom:5%;
  font-size:100%;
  z-index:20;
  background-color:#727272;
  border-radius:6px;
}
#pagetop a {
  color:#ffffff;
  text-decoration:none;
  padding:15px;
  display:block;
}
#pagetop:hover {
  color:#ffffff;
  text-decoration:underline;
}


/*** footer ***/
.footer {
  padding:0;
  background-color:#e3182c;
}
.footer p.copyright {
  padding:0;
  clear:both;
  font-size:80%;
  text-align:center;
  color:#ffffff;
}


/*** hack ***/
/*IE11以上*/
@media all and (-ms-high-contrast:none){
  .navibox ul li {
    float:left;
  }
  .navibox ul li a {
    width:129px;
  }
}
/*edge*/
@supports (-ms-ime-align:auto) {
  .navibox ul li {
    float:left;
  }
  .navibox ul li a {
    width:129px;
  }
}


/*** responsive ***/
@media(max-width:599px) {
  * {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
  }
  html,body{
    margin:0;
    padding:0;
    width:100%;
  }
  body {
    margin:0;
    padding:0;
  }
  /*common*/
  .innerbox {
    width:auto;
    padding:10px;
  }
  #localbody .header h1 br,
  .navi ul li a br,
  .content p.cath br,
  .content .lead dl dt br,
  .content .lead p.lead_sub br,
  .content h2 br {
    display:block;
  }
  #localbody .header .logo {
    
  }
  #localbody .header .logo img {
    width:90%;
  }
  #localbody .image img {
    width:100%;
  }
  #localbody i {
    margin-right:10px;
  }
  /*header*/
  #localbody .header {
    position:relative;
    min-height:200px;
  }
  #localbody .header p img {
    width:80%;
  }
  #localbody .header h1 {
    font-size:140%;
    margin:30px auto;
    line-height:1.2;
  }
  #localbody .header h1 br {
    display:block;
  }
  #localbody .header .cath {
    padding:15px;
  }
  #localbody .header .cath p {
    font-size:100%;
  }
  #localbody .header .cath .point {
    width:auto;
  }
  #localbody .header .cath .point ul li {
    width:100%;
    float:none;
  }
  #localbody .navi {
    width:auto;
    margin:15px;
  }
  #localbody .navi ul {
    width:100%;
    margin:0 auto;
    display:table;
  }
  #localbody .navi ul li {
    width:48%;
    float:left;
    margin:0 0 15px 0;
  }
  #localbody .navi ul li:last-child {
    border-right:none;
  }
  #localbody .navi ul li:nth-child(2n) {
    float:right;
  }
  #localbody .navi ul li:nth-child(n+3) {
    margin:0 0 0 0;
  }
  #localbody .navi ul li a {
    font-size:80%;
    letter-spacing:0;
    padding:15px !important;
    position:relative;
    display:block;
    border-radius:unset;
  }
  #localbody .navi.fixed {
    margin:0;
    box-shadow:0 1px 3px rgba(0,0,0,0.5);
  }
  /*content*/
  .content {
    margin:0;
  }
  .content .lead dl {
    width:auto;
  }
  .content .lead dl:last-child {
    margin:10px;
  }
  .content .lead dl dt {
    font-size:100%;
  }
  .content p.cath {
    margin:15px auto;
    font-size:120%;
    font-weight:bold;
  }
  .content .lead p.lead_sub,
  .content .lead p.lead_sub2 {
    margin:15px auto;
    font-size:120%;
    font-weight:bold;
  }
  .content .lead p.lead_sub:before,
  .content .lead p.lead_sub:after,
  .content .lead p.lead_sub2:before,
  .content .lead p.lead_sub2:after {
    background:none;
  }
  .content .item .example ul {
    width:auto;
  }
  .content h2 {
    font-size:180%;
  }
  .content h2:before,
  .content h2:after {
    width:15px;
  }
  .content h2:before {
    left:-50px;
  }
  .content h2:after {
    right:-50px;
  }
  .content .item h3 {
    margin:15px auto;
    font-size:100%;
    letter-spacing:0;
  }
  .content h4 {
    display:block;
    text-align:center;
    line-height:1.6;
  }
  .content h4 span {
    display:block;
  }
  .content .lead {
    overflow:hidden;
  }
  .content table.ranking {
    width:auto;
  }
  .content table.ranking td {
    display:block;
  }
  .content table.ranking td span {
    display:block;
    width:auto;
    margin:0 15px 15px 15px;
    box-sizing:unset;
  }
  .content table td .pht {
    
  }
  .content table td .pht img {
    width:100%;
  }
  .content table.course {
    
  }
  .content table.course th {
    width:100%;
    display:block;
  }
  .content table.course td {
    width:100%;
    display:block;
  }
  .flow {
    display:block;
  }
  .flow .pht {
    display:block;
    text-align:center;
  }
  .flow dl dd p img {
    width:100%;
  }
  .flow dl dd .btn {
    display: block;
    width: auto;
    margin: 10px auto;
  }
  .btn a {
    width:auto;
    font-size:100%;
  }
  .notes {
    width:auto;
    margin:15px;
  }
  .stepbox ul li {
    width:auto;
    float:none;
    margin:30px;
  }
  .stepbox ul li:last-child {
    float:none;
    margin:30px;
  }
  .stepbox ul li .item:after {
    content:none;
  }
  .casebox ul li {
    width:auto;
    margin:15px;
  }
  .casebox ul li .item {
    display:block;
  }
  .casebox ul li .item p.lb {
    width:100%;
    display:block;
  }
  .casebox ul li .item p.rb {
    width:100%;
    display:block;
  }
  .casebox ul li .item p.lb span.icn {
    width:40%;
  }
  .lets img {
    width:100%;
  }
  /*footer*/
  .footer p.copyright {
    font-size:70%;
  }
  .footer p.copyright span {
    display:block !important;
  }
}