@CHARSET "UTF-8";
/* ===================================================================
フォントの指定
=================================================================== */
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Medium"); }
@font-face { font-family: "Yu Gothic M"; src: local("Yu Gothic Bold"); font-weight: bold; }

/* ゴシック体 */
html body{
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 明朝体
html body{
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}*/
/* ================================================================ */

html body{
  background-image: url('../img/bg_img.png');
  background-size: 100%;
  background-repeat: repeat-y;
  margin: 0;
  color: #003e73;
}
html body #container{ line-height: 1.5; }
img{ display: block; }

/* フォントサイズ設定 */
@media screen and (max-width: 480px){
  html{ font-size: 15px !important; }
}
@media screen and (min-width: 481px) and (max-width: 640px){
  html{ font-size: 16px !important; }
}
@media screen and (min-width: 641px){
  html{ font-size: 18px !important; }
}


/* ===================================================================
ベース
=================================================================== */
article { margin: 1rem auto 0;}

#container.area_flex{
  min-height: 100vh;
  -webkit-box-direction:normal;
  -moz-box-direction:normal;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  -webkit-flex-direction:column;
  -moz-flex-direction:column;
  flex-direction:column;
}

#container .size {
  margin-left: auto;
  margin-right: auto;
}


#container{}
#container a { color: #fff;}


/* header */
header{
  font-size: 18px !important;
  background-color: #003e73;
}


/* footer */
footer {
  margin-top: 3rem;
  padding-top: 3rem;
  background-color: #fff;

}
footer a { color: #003e73 !important;}
footer ul { text-align: left; margin-top:.5rem;}


/* copyright */
#bsc-copyright{
  font-size: .7em;
  text-align: left;
}
#copyright {
  font-size: .8em;
  text-align: center;
  margin-top: 2rem;
}

/* ===================================================================
pc nav固定
=================================================================== */
.nav_is-fixed{
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* ===================================================================
見出し
=================================================================== */
h1{
  font-size: 1.5rem;
  padding: .5rem;
  color: #fff;
}

#wrapper *+h2,
#wrapper *+h3,
#wrapper *+h4,
#wrapper *+h5{
  margin-top: 2rem;
}
h2{
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}
h3{
  font-size: 1.2rem;
  color: #c2a700;
}
h4{ text-align: center;}
h5{ }

/* ===================================================================
section
=================================================================== */
#wrapper section { margin-top: 5rem; }

/* ===================================================================
テキスト
=================================================================== */
.fc_red { color: #c70000;}
.bold { font-weight: bold;}


/* ===================================================================
汎用
=================================================================== */
/* ページトップに戻る */
#totop {
  z-index:2147483647;
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

#totop a {
  display: block;
  width: 2rem;
  height: 2rem;
  background: #333;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 2rem;

  border-radius: 50%;            /* CSS3草案 */  
  -webkit-border-radius: 50%;    /* Safari,Google Chrome用 */
  -moz-border-radius: 50%;       /* Firefox用 */
  text-decoration: none ! important;
}

#totop a:hover{
  -webkit-filter: opacity(0.7);
  -moz-filter: opacity(0.7);
  -o-filter: opacity(0.7);
  -ms-filter: opacity(0.7);
  filter: opacity(0.7);
}

.conversion {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
}
.conversion img { width: 100%;}

.reserve_btn a {
  display: block;
  text-decoration: none;
  color: #fff;
  background-color: #f79646;
  padding: .8rem;
}


/* ===================================================================
area
=================================================================== */

#about { background-color: rgba(248,236,165,0.5);}
#about .about-txt {
  width: 80%;
  padding: .2rem 3rem 0 2rem;
}
#about .about-img {
  width: 20%;
  padding-right: 3rem;
}
#denryoku {
  background-color: rgba(248,236,165,0.5);
  padding: 1rem;
}
#denryoku div + div { margin-top: 1rem;}
#denryoku .bg_white { background-color: #fff;padding: 1rem;}
#denryoku .bg_white div + p { margin-top: 1rem;}
#flow .flow-item {
  width: 32%;
  background-color: #fff;
  border: 2px dashed #003e73;
  padding: .2rem .8rem;
}

#sakugen p { font-size: 1.6rem;}
#sakugen ul { margin-top: 1.3rem;}
#sakugen ul li { width: 48%;}

/*
#plan .plan-item {
  position: relative;
  width: 49%;
  background-color: #fff;
  border: 2px solid #ffdc00;
  padding-right: 1.2rem;
}
#plan .plan-item:before {
  position: absolute;
  content: url(../img/plan_bg-img.png);
  bottom: 0;
}
#plan .plan-item p { text-align: right; padding: 1rem 0;}

#plan .plan-list {
  border: 2px solid #ffdc00;
  background-color: #fff;
  padding: 1rem;
}
#plan .plan-list h3 { text-align: center; font-size: 1.4rem;}
#plan .plan-list + .plan-list { margin-top: 1.5rem;}
#plan .plan-list table tr > * {
  border-bottom: 1px solid #ddd;
  padding: .5rem;
}
#plan .plan-list table tr th { width: 15%;}
#plan .plan-list table tr td:nth-child(1) { width: 30%;}
#plan .plan-list table tr td:nth-child(2) { width: 32%;}
#plan .plan-list table tr td:nth-child(3) { width: 23%;}
*/

#conditions {
  background-color: rgba(248,236,165,0.5);
}
#conditions ol li { margin-left: 1.5rem; padding-left: .5rem;}
#conditions ol li + li { margin-top: 1rem;}

#case .case-item {
  width: 32%;
  text-align: center;
}

#faq .qa-list dl {
  position: relative;
  margin: .8rem 0 0;
  cursor: pointer;
}
#faq .qa-list dl:first-child { margin-top: 0;}
#faq .qa-list dl::after {
  position: absolute;
  top: 27px;
  right: 26px;
  display: block;
  width: 7px;
  height: 7px;
  margin: auto;
  content: '';
  transform: rotate(135deg);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
#faq .qa-list .open::after { transform: rotate(-45deg);}
#faq .qa-list dl dt {
  position: relative;
  margin: 0;
  padding: 20px 50px 20px 60px;
  background: #003e73;
  border: 2px solid #003e73;
  color: #fff;
}
#faq .qa-list dl dt::before {
  position: absolute;
  top: 20px;
  left: 20px;
  display: block;
  content: 'Q.';
  color: #fff;
}
#faq .qa-list dl dd::before {
  position: absolute;
  left: 20px;
  display: block;
  content: 'A.';
  font-weight: bold;
  color: #003e73;
}
#faq .qa-list dl dd {
  position: relative;
  margin: 0;
  padding: 20px 20px 20px 60px;
  background-color: #fff;
  border-right: 2px solid #003e73;
  border-left: 2px solid #003e73;
  border-bottom: 2px solid #003e73;
}
#faq .qa-list dl dd p { margin: 30px 0 0;}
#faq .qa-list dl dd p:first-child{ margin-top: 0;}
#contact table.formTable {
  width: 80%;
  margin-top: 1rem;
  margin-right: auto;
  margin-left: auto;
}
#contact table.formTable tr > * {
  padding: .3rem .5rem;
}
#contact table.formTable tr th {
  text-align: right;
}

table.formTable input[type="text"],
table.formTable input[type="password"],
table.formTable input[type="file"],
table.formTable input[type="tel"],
table.formTable input[type="url"],
table.formTable input[type="email"],
table.formTable input[type="number"],
table.formTable textarea{
  max-width: 100%;
}
table.formTable input[type="text"],
table.formTable input[type="password"],
table.formTable input[type="file"],
table.formTable input[type="tel"],
table.formTable input[type="email"],
table.formTable input[type="number"]{
  width: 95%;
}
table.formTable textarea{
  width: 95%;
}



input[type="submit"],
input[type="button"],
input[type="reset"] {
  -webkit-appearance: none;
}

/* .button */
ul.area_button{
  margin: 0 !important;
  text-align: center;
}
  ul.area_button > li{ display: inline-block !important; }
  ul.area_button > li{ margin: 1rem; }

.button{ /* 単体でも一応使える(左寄せになる) */
  margin: 1rem auto;
  padding: .75rem 1rem;
  display: inline-block;
  background: #003e73;
  text-decoration: none;
  border: 2px solid #003e73;
  border-radius: 25px;            /* CSS3草案 */  
  -webkit-border-radius: 25px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 25px;       /* Firefox用 */
  /* 文字と文字の間隔をあける */
  line-height: 1;
  letter-spacing: .2em;
  min-width: 10em;
  color: #fff;
}
.button.back{
  background: #fff;
  color: #003e73;
}
.button:hover{
  background: #fff;
  color: #003e73;
  cursor: pointer;
}





/* ===================================================================
media screen
=================================================================== */
/* スマホ */
@media screen and (max-width: 640px){
  .pc_img { display: none;}
  
  #wrapper .disp-flex { display: inline;}

  #about .about-txt { width: 100%; padding: 0;}
  #about .about-img {
  width: 40%;
  padding-right: 0;
  margin: 1rem auto;
}
  #academy > img { width: 100% !important;}
  #flow .flow-item { width: 100%;}
  #flow .flow-item + .flow-item { margin-top: 1rem;}
  #sakugen ul li { width: 100%; margin-top: 1rem;}
  /*
  #plan .plan-item { width: 100%;}
  #plan .plan-item + .plan-item { margin-top: 1rem;}
  */
  #case .case-item { width: 100%;}
  #case .case-item + .case-item { margin-top: 1.5rem;}
  #case .case-item img { width: 80%; margin: 0 auto;}
  #contact table.formTable tr,
  #contact table.formTable th,
  #contact table.formTable td{
    text-align: left !important;
    max-width: 100% !important;
    display: block;
  }
  #contact table.formTable td{
    max-width: 100%;
    min-height: 2.5em;
  }
  #contact table.formTable{ width: 100% !important;}
  #contact table.formTable tr > th { font-size: 1em;}

  footer .disp-flex { display: inline;}
  footer .disp-flex > div {
    width: 80%;
    margin: 0 auto;
  }
  footer .disp-flex > div + div { margin-top: 2rem;}
}

/* タブレット1 */
@media screen and (min-width: 641px){
  .sp_img { display: none;}
  #conditions { padding-right: 2rem; padding-left: 2rem;}
}

/* タブレット2以下 */
@media screen and (max-width: 800px){
  
  
}


/* タブレット2以上 */
@media screen and (min-width: 801px){

}

/* ipad */
@media screen and (min-width: 801px) and (max-width: 1024px){

}

/* ipad以下 */
@media screen and (max-width: 1024px){
  .size {
    padding-left: .8rem;
    padding-right: .8rem;
    width: 100%;
  }
}

/* PC */
@media screen and (min-width: 1025px){
  .size { width: 1000px;}
}