/*
Theme Name: NBC
Theme URI: http://www.www.www/
Description: This is my original theme.
*/

body{
margin: 0 auto;
font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;

}
.wrap{
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}
img{
    max-width: 100%;
}
a:visited {
    color:#252525;
}
a:hover{
opacity: 0.5 ;
}
.pc-dn{
  display:none;
  }
.sp-dn{
  display:block;
  }
.mt0{margin-top: 0;}
.mt1{margin-top: 1em;}
.mt2{margin-top: 2em;}
.mt3{margin-top: 3em;}
.mt4{margin-top: 4em;}
.mt5{margin-top: 5em;}
.mt6{margin-top: 6em;}
.mt7{margin-top: 7em;}
.mt8{margin-top: 8em;}
.mt9{margin-top: 9em;}
.mt10{margin-top: 10em;}

.mb0{margin-bottom: 0;}
.mb1{margin-bottom: 1em;}
.mb2{margin-bottom: 2em;}
.mb3{margin-bottom: 3em;}
.mb4{margin-bottom: 4em;}
.mb5{margin-bottom: 5em;}
.mb6{margin-bottom: 6em;}
.mb7{margin-bottom: 7em;}
.mb8{margin-bottom: 8em;}
.mb9{margin-bottom: 9em;}
.mb10{margin-bottom: 10em;}

.pt0{padding-top: 0;}
.pt1{padding-top: 1em;}
.pt2{padding-top: 2em;}
.pt3{padding-top: 3em;}
.pt4{padding-top: 4em;}
.pt5{padding-top: 5em;}
.pt6{padding-top: 6em;}
.pt7{padding-top: 7em;}
.pt8{padding-top: 8em;}
.pt9{padding-top: 9em;}
.pt10{padding-top: 10em;}

.pb0{padding-bottom: 0;}
.pb1{padding-bottom: 1em;}
.pb2{padding-bottom: 2em;}
.pb3{padding-bottom: 3em;}
.pb4{padding-bottom: 4em;}
.pb5{padding-bottom: 5em;}
.pb6{padding-bottom: 6em;}
.pb7{padding-bottom: 7em;}
.pb8{padding-bottom: 8em;}
.pb9{padding-bottom: 9em;}
.pb10{padding-bottom: 10em;}

.p1{padding: 1em;}
.p2{padding: 2em;}
.p3{padding: 3em;}
.p4{padding: 4em;}
.p5{padding: 5em;}

.ml2{
    margin-left: 2em;
}
.w100{
    width: 100%;
}
.w30{
    width: 30%;
}
.tac{
text-align: center;
}
.tal{
    text-align: left;
}
.tar{
    text-align: right;
}
.dib{
    display: inline-block;
}
.white{
    color: #fff;
}
h2{
    font-size: 3em;
    color: #fff;
    letter-spacing: 4;
    line-height: 2;
}
h3{
    color: #fff;
    font-weight: bold;
    letter-spacing: 2;
    font-size: 2em;
    margin: 0;
}
h4{
font-size: 2em;
    font-weight: normal;
    margin: 0;
    margin-bottom: 0.5em;
}
.black{
    color: #000;
}
.header{
    padding:0.5em;
}
.logo img{
    width: 100px;
}

.point-btn{
    background: #171C61;
    display: inline-block;
    padding: 0.5em 2em;
    border: 2px solid #6281BD;
    font-weight: bold;
    border-radius: 50px;
}
.point-btn a{
    text-decoration: none;
    color: #fff;
}
.header-btn{
    float: right;
}
.header-btn img{
    width: 230px;
}


.about{
    background-color: #304A7C;
    padding: 4em 0;
}
.tokuchou{
    background-color: #fff;
    padding: 0.5em;
}
.flex-box{
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
    
}
.flex-box3{
    display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
    width: calc(100%); 
    overflow: hidden;　/* 3つ目のmargin-right分は隠す */
    
}
.flex-box3>div{
  width: calc(33.3333% - 30px); /* margin-right分を引きます */
}
.no{
    font-size: 4rem;
    font-weight: bold;
    color: #A5976B;
    width: 0%;
    margin-top: 0.3em;
}
.tokuchou-txt{
    font-weight: bold;
    font-size: 1.8em;
    line-height: 1.5;
    width: 48%;
    margin-top: 1em;
}
.txt-bb{
border-bottom: 5px solid #446AB2;
    padding-bottom: 0.5em;
}
.tokuchou-btn{
    display: inline-block;
    background: #171C61;
    color: #fff;
    padding: 0.2em;
    margin-top: 0.5em;
    letter-spacing: 5;
}
.point{
    background-image: url(img/bk01.png);
    background-size:100%;
    background-repeat: no-repeat;
    padding: 2em;
    background-color: rgba(0,0,0,.7);
}
.point2{
    background-image: url(img/Frame48095547lesson.png);
    background-color: #222222;
    background-size:100%;
    background-repeat: no-repeat;
    padding: 2em;
    background-position: 50% 70%;
}
.point3{
    background-color: #222222;
    padding: 2em;
}
.lessn{
    background-color: #101C2A;
}
.step{
    background-image: url(img/step-bg.png);
    background-size:100%;
    background-repeat: no-repeat;
    padding: 2em;
    background-color: rgba(0,0,0,.7);
}
h2 span{
   font-size: 0.75em;
}

.step-box>div{
    display: inline-block;
    vertical-align: middle;
}
.step p{
        font-size: 1.4em;
    letter-spacing: 2;
}
.trial{
    background-image: url(img/trial-bg.png);
    background-size:100%;
    background-repeat: no-repeat;
    padding: 2em;
    background-color: rgba(0,0,0,.7);
}
#contact h2{
    color: #171C61;
}
.faq{
    background-color: #8FC7E5;
    padding: 2em;
}
.faq-box{
    background-color: #fff;
    padding: 2em 0;
    margin-bottom: 4em;
}

.faq_q,
.faq_a {
position: relative;
    padding-left: 80px;
    text-align: left;
}

.faq_q::before,
.faq_a::before {
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
margin: 0 20px;
}

/* 質問文 */
.faq_q {
    font-weight: bold;
    margin-bottom: 2em;
    font-size: 1.3em;
    padding-top: 0.5em;
    padding-bottom: 2em;
    border-bottom: 1px solid #cccccc;
}

/* 回答文 */
.faq_a {
  margin-bottom: 16px; 
}

.faq_q::before {
    content:url(img/Q.png);
}

.faq_a::before {
    content: url(img/A.png);
}
.fap h2{
    font-size: 2.5em;
}
.footer{
    text-align: center;
    color: #fff;
    background-color: #222222;
    padding: 2em 0;
    width: 100%;
}

.form * {
box-sizing: border-box;
    margin: 0.3em 0.5em;
    align-items:center;
}
.form h3{
font-size: 1.5rem!important;
    font-weight: bold;
    border-bottom: solid 1px #000;
    margin: 2rem 0;
    letter-spacing: 1.5px;
}
.form {
max-width: 50%;
    display: inline-block;
}

.form__item {
  display: flex;
  display: -ms-flexbox;
  margin-bottom: 32px
}

.form__term {
  width: 30%
}

.form__term:not(.is-required) {
  margin-top: 4px
}

.form__desc {
  width: 70%
}

.form__desc input:not([type=date]), .form__desc textarea {
  width: 100%
}

.form__term.is-required {
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  background: #FCF6F3;
    border-radius: 5px;
}

/*.form__term.is-required::before {
  content: "必須";
  color: #fff;
  background-color: #ed5f58;
  font-size: 1rem;
  font-weight: 400;
  width: 30px;
  height: 18px;
  line-height: 1.6;
  margin-right: 8px;
  text-align: center;
  padding: 2px 3px
}
*/
.form__desc input[type=email], .form__desc input[type=tel], .form__desc input[type=text], .form__desc select, .form__desc textarea {
  padding: 6px 8px;
    background: #F7F7F7;
    border: 1px solid #eeeeee;
    border-radius: 5px;
}

.form__desc input[type=date] {
  padding: 4px 8px
}

.form__btn-wrapper {
  text-align: center;
  margin-bottom: 60px
}

.form__btn {
padding: 0.5rem 5rem;
    border-radius: 28px;
    background-color: #4c3b31;
    color: #fff;
    font-size: 1.6rem;
    letter-spacing: .2rem;
    cursor: pointer;
    transition: .3s ease;
    -webkit-appearance: none;
    border: none;
}

.form__btn:hover {
  opacity: .7
}


/*-----スマホ-----*/
@media screen and (max-width: 599px) {
.pc-dn{
  display:block;
  }
.sp-dn{
  display:none;
  }
.wrap {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}
.header-btn {
    float: right;
    display: inline-block;
    width: 63%;
    vertical-align: top;
    padding-top: 0.5em;
}
    .logo{
        display: inline-block;
    width: 30%;
    }
.flex-box {
    display: block;
    padding: 0;
    text-align: center;
}
.no {
    font-size: 4rem;
    font-weight: bold;
    color: #A5976B;
    width: auto;
    margin-top: 0;
}
.txt-bb {
    border-bottom: 5px solid #446AB2;
    padding-bottom: 0.5em;
    text-align: justify;
}
.tokuchou-txt {
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.5;
    width: 100%;
    margin-top: 0;
}
.tokuchou-btn {
    margin-bottom: 1em;
    padding: 0.3em;
}    

.w30 {
    width: 70%;
}
h2 {
    font-size: 2em;
    line-height: 1.2;
    }
h3 {
    color: #fff;
    font-weight: bold;
    letter-spacing: 1;
    font-size: 1.5em;
    margin: 0;
}
h4 {
    font-size: 1.5em;
    margin-top: 1em;
}
.about{
        padding: 4em 1em;
}
.point {
    padding: 2em 1em;
    background-size: cover;
}
    .sp-tal{
text-align: justify;
    }
.flex-box3>div {
    display: inline-block;
    width: 49%;
    vertical-align: text-top;
}
.flex-box3 {
    display: inline-block;
    padding: 0!important;
}
.mb4 {
    margin-bottom: 1em;
}    
.sp-box{
    display: inline-block!important;
    width: 100%!important;
    margin-bottom: 1em!important;
}  
.pt3 {
    padding-top: 0;
}    
    
.step {
    padding: 2em 1em;
    background-size: cover;
}   
.lessn {
    padding: 2em;
    }
    h2 img{
        margin-top: 1em;
    }
    .step-box{
        text-align: center;
    }
    .w70{
        width: 70%;
}
.step p {
    font-size: 1.2em;
    letter-spacing: 1;
    }
.trial {
    padding: 2em 1em;
    background-size: cover;
}  
#contact h2 {
    font-size: 1.5em;
    letter-spacing: 1;
}
.faq_q,.faq_a{
    padding-right: 2em;
}
.faq-box {
    background-color: #fff;
    padding: 0.5em 0;
    margin-bottom: 4em;
}
.mb3 {
    margin-top: 1em;
}
.point2 {
    background-position: 50% 78%;
}
.about {
    padding: 1em 1em;
}
.mb0 {
    margin-bottom: 0;
    margin-top: 0;
}
    .form {
    max-width: 100%;
    display: inline-block;
}
    .form__term {
    width: 46%;
}
}