@charset "Shift-Jis";
/* CSS Document */
/* ------------------------------------------

common

------------------------------------------ */
body {background: url(../images/bg.png); font-size:14px;line-height:1.9; font-family: Arial, Helvetica,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
a:link {color: #1e2e53; text-decoration: underline;}
a:visited {color: #1e2e53;}
a img {border-style: none;}
.clear {clear: both;}
.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix {min-height: 1px;}
* html .clearfix {height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}
::selection {background: #d4dcd6; /* Safari */}
::-moz-selection {background: #d4dcd6; /* Firefox */}
input[type="text"] {color: #aaa;}
input[type="text"].textFocus {color: #222;}
li {list-style: none;}

ul.btn-box li {
    background: rgb(209,155,53);
background: linear-gradient(0deg, rgba(209,155,53,1) 0%, rgba(253,188,12,1) 50%, rgba(209,155,53,1) 100%);
    text-align: center;
    box-shadow: 0 5px 5px 0 rgba(65, 45, 29, 0.5);
        line-height: 1.2em;
    padding: 0.6em 0 0.6em;
    font-family: toppan-bunkyu-midashi-min-st, serif;
     border-radius: 10px;
    max-width: 400px;
    width: 100%;
}

ul.btn-box li span{font-size: 0.7em;}
ul.btn-box a {
    text-decoration: none;
    font-size: 1.6em;
    color: #34271f;
}
/* 会員 */
#menber_box{
    width: 80%;
    max-width: 900px;
    margin: 2em auto;
    line-height: 1.4em;
    background: #191970;
    padding: 1.2em 1em;
}
#menber_box p#mb{margin-bottom: 0.4em;}
#menber_box p#small_tex{
    font-size: 0.8em;
    margin-bottom: 1em;
}
#menber_box a{color: #fff;font-weight: 600;font-size: 0.9em;padding: 0.8em 1em;}
div#white_box{background: #fff;padding: 1em 1em 1.2em; }
#menber_box h6{text-align: center;font-size: 1.4em;margin-bottom: 0.6em;color: #fff;}
@media screen and (max-width: 767px){
    #menber_box h3{line-height: 1.4em;font-size: 1.2em;}
    #menber_box p#mb{font-size: 0.9em;}
    #menber_box.btn--orange,
    #menber_box a.btn--orange{line-height: 1.2em;}
    #menber_box p#small_tex{font-size: 0.8em;}
}
#menber_box.btn--orange,
#menber_box a.btn--orange {
  border-radius:5px;
  background-color: #eb6100;
  display: table-cell;
}
#menber_box btn--orange:hover,
#menber_box a.btn--orange:hover {
  border-radius:5px;
  background: #f56500;
}
/* ------------------------------------------

header

------------------------------------------ */
@media screen and (min-width: 769px) {
.pc {width:100%; }
.sp {display:none;}	
#header {background: #fff;}
#header div {width:100%; max-width: 980px; margin: 0 auto; overflow: hidden;}
#header #logo {float: left;}
#header #contact_btn {float: right;}
.mv {width:100%; margin-bottom: -41px; background: #1e1714;}
.mv h1 {position: relative; top: -22px; width:100%; max-width: 980px; height:auto; margin: 0 auto;}
.mv p {position: relative; top: -85px; text-align: center;}
.mv div {position: relative; width:100%; max-width: 980px; margin: 0 auto; overflow: hidden;}
.mv h1 img {width:100%; max-width: 980px; height:auto;}
.mv p img {width:100%; max-width: 980px; height:auto;}


/* ------------------------------------------

main

------------------------------------------ */

#container {position: relative; text-align: center;}

/*- sec01 --------------*/
#sec01 {position: relative; padding: 18px 0 44px; background: #a1131a; text-align: center;}
#sec01 ul {margin-top: -125px;}

#sec01 li {margin: 10px auto 0; vertical-align: top;width: 100%; max-width: 400px;display: inline-block;letter-spacing: -0.05em;}
#sec01 img.bframe {width:100%; max-width:980px; height:auto;}
#sec01 li a img {width:325px; height:87px;}

/*- sec02 --------------*/
#sec02 {padding: 25px 0 50px; background: #34271f;}
.profile {color:#fff; margin:-240px auto; width:731px; padding-bottom:270px;}
.profile h3 {padding-bottom:20px; text-align:left; padding-left:35px;}
.profile p {font-size:90%; line-height:200%; text-align:left; padding-left:35px;}

/*- sec03 --------------*/
#sec03 {background: #a58270; text-align:center;}
#sec03 h3 {margin-bottom: -40px;}
#sec03 h3 img {width:100%; max-width: 980px; height:auto; margin:0 auto; text-align:center;}
#sec03 p img {width:100%; max-width: 980px; height:auto; margin:0 auto; text-align:center;}

/*- sec04 --------------*/
/* #sec04 {padding: 25px 0 10px;} */
#sec04 {padding: 0px 0 10px; text-align:center;}
#sec04 h3 {position: relative; z-index: 1;}
#sec04 h4 {margin-top: -32px;}
#sec04 p {margin: 35px 0 66px 53px;}
#sec04 h3 img {width:100%; max-width: 980px; height:auto; text-align:center;}
#sec04 h4 img {width:100%; max-width: 980px; height:auto;}
#sec04 .knowhow {margin:80px auto; width:90%; max-width:880px;}
#sec04 .knowhow p {font-size:100%; line-height:200%; text-align:left; margin-left:0px; color:#000;}
#sec04 .knowhow img {float:right; margin-left:10px; width:100%; max-width:639px; height:auto;}

/*- sec05 --------------*/
.sec05 {padding: 49px 0 57px; background: #1e1714; width:100%; text-align:center;}
.sec05 img {width:100%; max-width: 980px; height:auto; margin: 0 auto;}
.sec05 ul {margin-top: -200px;}
.sec05 li {display: inline-block; margin:30px 3px; vertical-align: top;}
.sec05 li a img {width:325px; height:87px;}
.sec05 p {font-size:.7rem;color:#999999;padding:20px;}
/*- sec06 --------------*/
#sec06 {width:100%;}
#sec06 h3 {padding: 51px 0 38px; background: #a1131a; width:100%; margin:0 auto; text-align:center;}
#sec06 h3 img {width:100%; max-width: 980px; height:auto; margin:0 auto;}
#sec06 h3 + p {margin: 40px 0;}
#sec06 .chisiki img {width:100%; max-width: 980px; height:auto; margin:40px auto;}
#sec06 .roleplay img {width:100%; max-width: 980px; height:auto; margin:0 auto 40px;}
#sec06 .chisiki-1 { width:980px; margin:-340px auto 50px; }
#sec06 .tb-chisiki, #sec06 .tb-chisiki2 {width:80%; max-width:770px; border:#CC1F00 2px solid; margin:40px auto; border-collapse:collapse;}
#sec06 .tb-chisiki th img, #sec06 .tb-chisiki2 th img {width:100%; height:auto;}
#sec06 .tb-chisiki td, #sec06 .tb-chisiki2 td {padding:20px; vertical-align:top; border:#CC1F00 2px solid; width:50%; max-width:335px; }
#sec06 .tb-chisiki dl, #sec06 .tb-chisiki2 dl {display:inline-block; margin-left:2%; vertical-align:top; }
#sec06 .tb-chisiki dt, #sec06 .tb-chisiki2 dt {float:left; padding:5px 0;}
#sec06 .tb-chisiki dd, #sec06 .tb-chisiki2 dd {text-align:left; padding:5px 0 5px 70px; }

.btn {margin:40px 0;}
    #sec06 p#title{font-size: 3em;font-weight: 600;color: #BB0003;text-align: center;margin: 1em 0 0em ; }

/*- info-area --------------*/
#info {width: 760px; margin: 0 auto; padding: 35px 0; font-size: 20px;}
#info p {margin-top: 40px;}
#info dl {padding: 10px 0; border-bottom: 1px solid #ddd; text-align: left;}
#info dt {width: 120px; margin-right: 10px; padding: 8px; background: #1e2e53; color: #fff; font-size: 17px; text-align: center;}
#info dd {width: 6	00px; margin-top: 5px;}
#info dt,
#info dd {display: inline-block; vertical-align: top;}
.place span {margin-left: 15px; font-size: 14px;}
.place img {margin: -3px 0 0 6px;}
.price dd span {color: #d93131; font-size: 14px; font-weight: bold;}
.price img {margin-top: 5px;}
.price hr {margin: 15px 0; height: 0; border-bottom: 1px dashed #ddd;}
.pay span {font-size: 14px;}

#animation {
	margin-top: 60px;
}

/* ------------------------------------------

footer

------------------------------------------ */
#footer {margin: 30px 0 0; background: #fff; width:100%;}
#footer_inner {width: 805px; margin: 0 auto;}
#left_wrap {float: left;}
#left_wrap ul {margin-top: 5px;}
#left_wrap li {float: left; margin-right: 15px; padding-left: 12px; background: url(../images/img_arrow02.png) no-repeat left center;}
#left_wrap li a {color: #333; font-size: 13px;}
#right_wrap {float: right; padding: 19px 0 9px 14px; background: rgb(238, 238, 238) none repeat scroll 0% 0%; border-radius: 3px; text-align: center;}
#right_wrap + p {clear: both; padding: 30px; font-size: 12px; text-align: center;}

/* sns buttons */
#twitter-widget-0,
.hatena-bookmark-button-frame,
#___plusone_0 {position: relative !important; top: -6px;}
.hatena-bookmark-button-frame {width: 115px !important;}
#___plusone_0 {top: -10px !important; margin-right: -17px !important;}

}
@media screen and (max-width: 900px) {
#sec01 ul {margin-top: -110px;}
#sec01 li {margin: 10px 0; display: inline-block; vertical-align: top;}
#sec01 img.bframe {width:100%; max-width:980px; height:auto;}
#sec01 li a img {width:270px; height:72.2px;}	

#sec04 .knowhow {margin:80px auto; width:90%; }
#sec04 .knowhow p {font-size:100%; line-height:200%; text-align:left; margin-left:0px; color:#000;}
#sec04 .knowhow img {float:right; margin-left:10px; width:100%; max-width:575px; height:auto;}
.sec05 ul {margin-top: -128px;}
.sec05 li a img {width:270px; height:72.2px;}

/* ------------------------------------------

footer

------------------------------------------ */
#footer {margin: 30px 0 0; background: #fff; width:100%;}

@media screen and (min-width: 769px) {
ul.btn-box {
	display: flex;
	justify-content: center;
}
    
    #sec01 li:first-child{margin-right: 1em;}
    br.sp{display: none;}
}
@media screen and (max-width: 768px) {
    
ul.btn-box {
	display: block;
	justify-content: center;
}
    #sec01 ul{
        font-size: 0.9em;
    }
    ul.btn-box li img{width: 100%;}
    ul.btn-box li {width: 100%;max-width: 400px;}
}
@media screen and (max-width: 414px) {
    ul.btn-box li {width: 90%;margin: 0 auto;}
    
}

@media screen and (max-width: 768px) {
.pc {display:none;}
.sp {width:100%; max-width:768px;}	
#header {background: #fff;}
#header div {width:100%; max-width: 768px; margin: 0 auto; overflow: hidden;}
#header #logo {float: left;}
#header #contact_btn {float: right;}
#header #contact_btn img {width:100%; height:auto;}
.mv {width:100%; margin-bottom: -41px; background: #1e1714;}
.mv h1 {position: relative; top: -22px; width:100%; max-width: 768px; height:auto; margin: 0 auto;}
.mv p {position: relative; top: -55px; text-align: center;}
.mv div {position: relative; width:100%; max-width: 768px; margin: 0 auto; overflow: hidden;}
.mv h1 img {width:100%; max-width: 768px; height:auto;}
.mv p img {width:100%; max-width: 768px; height:auto;}


/* ------------------------------------------

main

------------------------------------------ */

#container {position: relative; text-align: center;}

/*- sec01 --------------*/
#sec01 {position: relative; padding: 18px 0 64px; background: #a1131a; text-align: center;}
#sec01 ul {margin-top: -215px;} 
#sec01 li {margin: 5px auto 0; vertical-align: top;}
#sec01 img.bframe {width:100%; max-width:768px; height:auto;}
#sec01 li a img {width:100%; height:auto; margin:5px auto;} 

/*- sec02 --------------*/
#sec02 {padding: 25px 0 50px; background: #34271f;}
#sec02 p img {width:100%; max-width:768px;}
#sec02 .wprof {width:92%; background-image:url(../images/txt_robert708.png); background-position:bottom; background-size:100%; background-repeat:no-repeat; border:solid 1px #fff; margin:0 auto; color:#fff; padding-bottom:25px;}
#sec02 .wprof h3 {padding-bottom:20px; text-align:left; padding-left:25px;}
#sec02 .wprof p {font-size:87%; line-height:200%; text-align:left; padding-left:25px;}
#sec02 .wprof p img {width:100%; max-width:400px; margin:20px 0;}

/*- sec03 --------------*/
#sec03 {background: #a58270; text-align:center;}
#sec03 h3 {margin-bottom: -40px;}
#sec03 h3 img {width:100%; max-width: 768px; height:auto;}
#sec03 p img {width:70%; height:auto; padding-top:40px;}

/*- sec04 --------------*/
#sec04 h3 {position: relative; z-index: 1;}
#sec04 h4 {margin-top: -32px;}
#sec04 p {margin: 35px 0 66px 53px;}

/*- sec04 --------------*/
#sec04 {padding: 0 0 10px;}
#sec04 h3 {position: relative; z-index: 1;}
#sec04 h4 {margin-top: -20px;}
#sec04 p {margin: 35px 0 66px 53px;}
#sec04 h3 img {width:100%; max-width: 768px; height:auto;}
#sec04 h4 img {width:100%; max-width: 768px; height:auto;}
#sec04 .knowhow {margin:40px auto; width:88%; }
#sec04 .knowhow p {font-size:100%; line-height:200%; text-align:left; margin-left:0px; color:#000;}
#sec04 .knowhow img {float:right; margin-left:10px; margin-bottom:20px; width:95%; max-width:485px; height:auto; }

/*- sec05 --------------*/
.sec05 {padding: 49px 0 37px; background: #1e1714; width:100%;}
.sec05 img {position: relative; width:100%; max-width: 768px; height:auto; margin: 0 auto;}
.sec05 ul {margin:420px auto 0;}
.sec05 li {margin:20px auto 0; vertical-align: top;}

#sec01 img.bframe {width:100%; max-width:768px; height:auto;}
.sec05 li a img {width:100%; height:auto; margin:0 auto;} 
.sec05 .kounyu2 {width:90%; background-image:url(../images/h3_outline-bg.png); background-position:top; background-size:100%; background-repeat:no-repeat; border:solid 1px #fff; margin:0 auto; color:#fff; } 
	.sec05 p {font-size:.7rem;color:#999999;padding:20px;}
/*- アプリ用CSS追加 --------------*/
.sec05 ul.detailBtn {margin-top:60%; margin:0 auto;}
.sec05 li.detailBtn {display: inline-block; margin:20px 0 0; vertical-align: top;}
.sec05 li.detailBtn a img {width:100%; height:auto; margin:0 auto;} 
.sec05 .kounyu3 {width:90%; background-image:url(../images/h3_02_outline-bg.png); background-position:top; background-size:100%; background-repeat:no-repeat; border:solid 1px #fff; margin:0 auto; color:#fff; padding-bottom:55px;}
	.sec05 p {font-size:.7rem;color:#999999;padding:20px;}


/*- sec06 --------------*/
#sec06 {width:100%; }
#sec06 h3 {padding: 51px 0 38px; background: #a1131a; width:100%; text-align:center;}
#sec06 h3 img {width:100%; max-width: 768px; height:auto; margin:0 auto;}
#sec06 h3 + p {margin: 40px 0;}
#sec06 .chisiki img {width:100%; max-width: 768px; height:auto; margin:40px auto;}
#sec06 .roleplay img {width:100%; max-width: 768px; height:auto; margin:0 auto 40px;}
#sec06 .chisiki-1 { width:768px; margin:-340px auto 50px; }

#sec06 .tb-chisiki, #sec06 .tb-chisiki2 {width:90%; max-width:691px; border:#CC1F00 2px solid; margin:40px auto; border-collapse:collapse;}
#sec06 .tb-chisiki th img, #sec06 .tb-chisiki2 th img {width:100%; height:auto;}
#sec06 .tb-chisiki td, #sec06 .tb-chisiki2 td {padding:20px; vertical-align:top; border:#CC1F00 2px solid; width:50%; max-width:335px; }
#sec06 .tb-chisiki dl, #sec06 .tb-chisiki2 dl {display:inline-block; margin-left:1%; vertical-align:top; }
#sec06 .tb-chisiki dt, #sec06 .tb-chisiki2 dt {float:left; padding:5px 0;}
#sec06 .tb-chisiki dd, #sec06 .tb-chisiki2 dd {text-align:left; padding:5px 0 5px 60px; font-size:90%;}

.btn {margin:40px 0;}

/*- info-area --------------*/
#info {width: 760px; margin: 0 auto; padding: 35px 0; font-size: 20px;}
#info p {margin-top: 40px;}
#info dl {padding: 10px 0; border-bottom: 1px solid #ddd; text-align: left;}
#info dt {width: 120px; margin-right: 10px; padding: 8px; background: #1e2e53; color: #fff; font-size: 17px; text-align: center;}
#info dd {width: 6	00px; margin-top: 5px;}
#info dt,
#info dd {display: inline-block; vertical-align: top;}
.place span {margin-left: 15px; font-size: 14px;}
.place img {margin: -3px 0 0 6px;}
.price dd span {color: #d93131; font-size: 14px; font-weight: bold;}
.price img {margin-top: 5px;}
.price hr {margin: 15px 0; height: 0; border-bottom: 1px dashed #ddd;}
.pay span {font-size: 14px;}

#animation {
	margin-top: 60px;
}
/*
オンラインプログラムとは
 ----------------------------------------------------------
*/
.about-program{
    max-width: 900px;
    margin: 0 auto 2em;
    width:90%;}
.white_bg{background: #fff;padding: 0 30px 30px;}
.about-program-title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}
@media screen and (max-width: 768px) {
  .about-program-title-wrap {
    gap: 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.about-program-title h3 {
  font-family: "Noto Serif JP", sans-serif;
  font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
  .about-program-title h3 {
    font-size: 1.8rem;
    line-height: 1.2em;
    background-color: #F6EFE7;
  }
}
.about-program-title p {
  font-size: 1.8rem;
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .about-program-title p {
    font-size: 1.2rem;
    width: 90%;
    margin: 0 auto;
}
  }
}
.about-program-img {
  width: 35%;
}
@media screen and (max-width: 768px) {
  .about-program-img {
    width: 100%;
    height: auto;
    margin: 3em 0 1em;
  }
}

.flow {
  background-color: #F6EFE7;
  margin-top: 20px;
  padding: 10px 20px;
}
@media screen and (max-width: 768px) {
  .flow {
    padding: 10px 10px;
  }
}
.flow h4 {
  font-size: 1.8rem;
line-height: 1.4em;
  text-align: center;
  padding: 0.5em 0 1.6em;
}
.flow-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
    margin: 
}
@media screen and (max-width: 768px) {
  .flow-list {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top:2em;
    gap: 34px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.flow-item {
  font-size: 14px;
  display: block;
  position: relative;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .flow-item {
    width: 100%;
  }
}
.flow-item{
  padding: 4px 16px 4px 20px;
  background: #5A1E0F;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          /*justify-content: center;*/
}
@media screen and (max-width: 768px) {
  .flow-item {
    height: auto;
  }
}
.flow-item::before, .flow-item::after {
  content: "";
  position: absolute;
  right: -1px;
}
.flow-item::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 48px 0;
  border-color: transparent #F6EFE7 transparent transparent;
  top: -1px;
}
@media screen and (max-width: 768px) {
  .flow-item::before {
    display: none;
  }
}
.flow-item::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 48px 10px;
  border-color: transparent transparent #F6EFE7 transparent;
  bottom: -1px;
}
@media screen and (max-width: 768px) {
  .flow-item::after {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom: -10px;
    border-width: 10px 10px 0 10px;
    border-color: #5A1E0F transparent transparent transparent;
  }
}
.flow-item span {
  position: absolute;
  bottom: 100%;
  left: 0;
  color: #5A1E0F;
}
.flow-item {
  width : calc(100% / 3) ;
}
@media screen and (max-width: 768px) {
  .flow-item{
    margin-top: -10px;
    width: 100%;
  }
}
/* ------------------------------------------

footer

------------------------------------------ */
#footer {margin: 30px 0 0; background: #fff;}
#left_wrap {float: left;}
#left_wrap ul {margin-top: 5px;}
#left_wrap li {float: left; margin-right: 15px; padding-left: 12px; background: url(../images/img_arrow02.png) no-repeat left center;}
#left_wrap li a {color: #333; font-size: 13px;}
#right_wrap {float: right; padding: 19px 0 9px 14px; background: rgb(238, 238, 238) none repeat scroll 0% 0%; border-radius: 3px; text-align: center;}
#right_wrap + p {clear: both; padding: 30px; font-size: 12px; text-align: center;}
#left_wrap p img {width:100%; max-width:240px; height:auto;}

/* sns buttons */
#twitter-widget-0,
.hatena-bookmark-button-frame,
#___plusone_0 {position: relative !important; top: -6px;}
.hatena-bookmark-button-frame {width: 115px !important;}
#___plusone_0 {top: -10px !important; margin-right: -17px !important;}

}

@media screen and (max-width: 640px) {
	/*- sec01 --------------*/
#header div {width:100%; max-width: 640px; margin: 0 auto; overflow: hidden;}
#header #logo {float: left;}
#header #logo img {width:80%; height:auto;}
#header #contact_btn {float: right;}
#header #contact_btn img {width:90%; height:auto; margin-right:-80px;}
.mv h1 {position: relative; top: -22px; width:100%; max-width: 640px; height:auto; margin: 0 auto;}
.mv p img {width:100%; max-width: 640px; height:auto;}
#sec01 {position: relative; padding: 18px 0 2em; background: #a1131a; text-align: center;}
#sec01 ul {margin: -38% auto 0; width: 80%;}
#sec01 li {margin: 5px 0; display: inline-block; vertical-align: top;}
#sec01 img.bframe {width:100%; max-width:640px; height:auto;}
#sec01 li a img {width:98%; height:auto; margin:0 auto;}

#sec02 .wprof h3 {padding-bottom:20px; text-align:left; padding-left:15px;}
#sec02 .wprof p {font-size:80%; line-height:200%; text-align:left; padding-left:15px;}
#sec02 .wprof p img {width:100%; max-width:400px; margin:20px 0;}
#sec03 p img {width:75%; height:auto; padding-top:40px;}
#sec04 .knowhow img {float:right; margin-left:10px; margin-right:10px; margin-bottom:20px; width:95%; max-width:485px; height:auto; }
.sec05 ul {margin:310px auto 10px;}
.sec05 li { margin:15px auto 0; vertical-align: top;}
.sec05 li a img {width:90%; height:auto; margin:0 auto;} 
#sec06 .tb-chisiki td, #sec06 .tb-chisiki2 td {padding:14px; vertical-align:top; border:#CC1F00 2px solid; width:50%; max-width:335px; }
#sec06 .tb-chisiki dl, #sec06 .tb-chisiki2 dl {display:inline-block; margin-left:2%; vertical-align:top; }
#sec06 .tb-chisiki dt, #sec06 .tb-chisiki2 dt {float:left; padding:5px 0;}
#sec06 .tb-chisiki dd, #sec06 .tb-chisiki2 dd {text-align:left; padding:5px 0 5px 60px; font-size:90%;}
/*- アプリ用に追加 --------------*/	
.sec05 ul.detailBtn {margin-top:60%; margin:0 auto;}
.sec05 ul.detailBtn li {display: inline-block; margin:15px 0 0; vertical-align: top;}
.sec05 ul.detailBtn li a img {width:90%; height:auto; margin:0 auto;}
.sec05 .kounyu3 {width:90%; background-image:url(../images/h3_02_outline-bg.png); background-position:top; background-size:100%; background-repeat:no-repeat; border:solid 1px #fff; margin:0 auto; color:#fff; padding-bottom:75px;}
}


@media screen and (max-width: 414px) {
	/*- sec01 --------------*/
#header #contact_btn img {width:90%; height:auto; margin-right:-80px; margin-top:-20px;}
.mv p {position: relative; top: -49px; text-align: center;}
.mv p img {width:100%; max-width: 414px; height:auto;}
#sec01 {position: relative; padding: 18px 0 34px; background: #a1131a; text-align: center;}
#sec01 ul {margin-top: -38%;}
#sec01 li {margin: 5px 0; display: inline-block; vertical-align: top;}
#sec01 img.bframe {width:100%; max-width:400px; height:auto;}
#sec01 li a img {width:100%; height:auto; margin:0 auto;}
#sec03 p img {width:100%; height:auto; padding-top:40px;}
#sec02 .wprof p img {width:90%; max-width:320px; margin:20px 0;}
#sec02 .wprof h3 {font-size:85%; padding-bottom:50px; text-align:left; padding-left:10px;}
#sec02 .wprof p {font-size:75%; line-height:200%; text-align:left; padding-left:10px;}
#sec04 .knowhow p {font-size:90%; line-height:200%; text-align:left; margin-left:0px; color:#000;}
.sec05 ul {margin:70% auto 0; }
    .sec05 ul li:first-child{margin-bottom: 1em;}
.sec05 li { margin:15px auto 0; vertical-align: top;}
.sec05 li a img {width:90%; height:auto; margin:0 auto;} 
#sec06 .tb-chisiki td, #sec06 .tb-chisiki2 td {padding:5px; vertical-align:top; border:#CC1F00 2px solid; width:50%; max-width:335px; }
#sec06 .tb-chisiki dl, #sec06 .tb-chisiki2 dl {display:inline-block; margin-left:2%; vertical-align:top; }
#sec06 .tb-chisiki dt, #sec06 .tb-chisiki2 dt {float:left; padding:5px 0; font-size:80%;}
#sec06 .tb-chisiki dd, #sec06 .tb-chisiki2 dd {text-align:left; padding:5px 0 5px 40px; font-size:75%;}
/*- アプリ用に追加 --------------*/	
.sec05 ul.detailBtn {margin-top:60%; margin-left:15%;}
.sec05 ul.detailBtn li {display: inline-block; margin:15px 0 0; vertical-align: top;}
.sec05 ul.detailBtn li a img {width:90%; height:auto; margin:0 auto;}
.sec05 .kounyu3 {width:90%; background-image:url(../images/h3_02_outline-bg.png); background-position:top; background-size:100%; background-repeat:no-repeat; border:solid 1px #fff; margin:0 auto; color:#fff; padding-bottom:10%;}

}
	
@media screen and (max-width: 320px) {
	/*- sec01 --------------*/
#header #contact_btn img {width:90%; height:auto; margin-right:-90px; margin-top:-20px;}
#sec01 {position: relative; padding: 8px 0 24px; background: #a1131a; text-align: center;}
#sec01 ul {margin-top: -95px;}
#sec01 li {margin: 5px 0; display: inline-block; vertical-align: top;}
#sec01 img.bframe {width:100%; max-width:320px; height:auto;}
#sec01 li a img {width:100%; height:auto; margin:0 auto;}
#sec02 .wprof {width:92%; background-image:url(../images/txt_robert708.png); background-position:bottom; background-size:100%; background-repeat:no-repeat; border:solid 1px #fff; margin:0 auto; color:#fff; padding-bottom:140px;}
#sec02 .wprof h3 {font-size:75%; padding-bottom:20px; text-align:left; padding-left:10px;}
#sec02 .wprof p {font-size:65%; line-height:200%; text-align:left; padding-left:10px;}
#sec04 .knowhow {margin:25px auto 20px; width:88%; }
#sec04 h4 {margin-top: -8px;}
.sec05 ul {margin-top:180px; margin-left:10%;}
.sec05 li {display: inline-block; margin:15px 0 0; vertical-align: top;}
.sec05 li a img {width:90%; height:auto; margin:0 auto;} 
#left_wrap li a {color: #333; font-size: 11px;}
#right_wrap + p {clear: both; padding: 30px; font-size: 11px; text-align: center;}
/*- アプリ用に追加 --------------*/	
.sec05 ul.detailBtn {margin-top:350px; margin-left:15%;}
.sec05 ul.detailBtn li {display: inline-block; margin:15px 0 0; vertical-align: top;}
.sec05 ul.detailBtn li a img {width:90%; height:auto; margin:0 auto;}
.sec05 .kounyu3 {width:90%; background-image:url(../images/h3_02_outline-bg.png); background-position:top; background-size:100%; background-repeat:no-repeat; border:solid 1px #fff; margin:0 auto; color:#fff; padding-bottom:75px;}
}
/* オンライントレーニングプログラム */
.about-program-title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}
@media screen and (max-width: 768px) {
  .about-program-title-wrap {
    gap: 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.about-program-title h3 {
  font-family: "Noto Serif JP", sans-serif;
  font-size: 2.4rem;
}
@media screen and (max-width: 768px) {
  .about-program-title h3 {
    font-size: 1.8rem;
    background-color: #F6EFE7;
  }
}
.about-program-title p {
  font-size: 1.0rem;
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .about-program-title p {
    font-size: 1.6rem;
  }
}
.flow-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.is-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .is-sp {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .flow-list {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top: 10px;
    gap: 34px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.about-program-img {
  width: 35%;
}
@media screen and (max-width: 768px) {
  .about-program-img {
    width: 100%;
    height: auto;
    margin-top: 0;
  }
}
.about-program h4{font-size: 2rem;}
.about-program-img {
  width: 35%;
}
@media screen and (max-width: 768px) {
  .about-program-img {
    width: 100%;
    height: auto;
    margin-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .about-program h4 {
    font-size: 2rem;
  }
}

@-moz-document url-prefix() {
	* {
		text-shadow:0 0px 1px #000;
	}
.content .corp {
	text-align: center;
	padding-top: 20px;
}
}
.flow {
  background-color: #F6EFE7;
  margin-top: 20px;
  padding: 10px 20px;
}
@media screen and (max-width: 768px) {
  .flow {
    padding: 10px 10px;
  }
}
.flow h4 {
  font-size: 1.8rem;
  text-align: center;
  padding: 0.5em 0 1.6em;
}
.flow-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .flow-list {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top: 10px;
    gap: 34px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.flow-item {
  font-size: 14px;
  display: block;
  position: relative;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .flow-item {
    width: 100%;
  }
}
.flow-item{
  padding: 4px 16px 4px 20px;
  background: #5A1E0F;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          /*justify-content: center;*/
}
@media screen and (max-width: 768px) {
  .flow-item {
    height: auto;
  }
}
.flow-item::before, .flow-item::after {
  content: "";
  position: absolute;
  right: -1px;
}
.flow-item::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 48px 0;
  border-color: transparent #F6EFE7 transparent transparent;
  top: -1px;
}
@media screen and (max-width: 768px) {
  .flow-item::before {
    display: none;
  }
}
.flow-item::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 48px 10px;
  border-color: transparent transparent #F6EFE7 transparent;
  bottom: -1px;
}
@media screen and (max-width: 768px) {
  .flow-item::after {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom: -10px;
    border-width: 10px 10px 0 10px;
    border-color: #5A1E0F transparent transparent transparent;
  }
}
.flow-item span {
  position: absolute;
  bottom: 100%;
  left: 0;
  color: #5A1E0F;
}
.flow-item {
  width : calc(100% / 3) ;
}
@media screen and (max-width: 768px) {
  .flow-item{
    margin-top: -10px;
    width: 100%;
  }
}