@charset "utf-8";

@import url("framework.css");
@import url("custom.css");

#topBanner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background-color: rgba(255, 255, 255, 0.9);
}
#topBanner .image img {
	max-width: 950px;
	max-height: 450px;
	margin: auto;
}
#topBanner .image .mode_pc {
	display: block;
}
#topBanner .image .mode_sp {
	display: none;
}
#topBanner .closeButton {
	position: absolute;
	top: 50px;
	right: 50px;
	width: 50px;
	height: 50px;
}
#topBanner .closeButton span {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background-color: #000000;
	margin: auto;
}
#topBanner .closeButton span:nth-of-type(1) {
	top: 0;
	bottom: 0;
	left: 0;
	transform: translateY(50%) translateY(-1px) rotate(-45deg);
}
#topBanner .closeButton span:nth-of-type(2) {
	top: 0;
	bottom: 0;
	left: 0;
	transform: translateY(-50%) translateY(1px) rotate(45deg);
}
@media screen and (max-width: 767px) {
	#topBanner .image img {
		max-width: 80vh;
		max-height: 80vh;
	}
	#topBanner .image .mode_pc {
		display: none;
	}
	#topBanner .image .mode_sp {
		display: block;
	}
	#topBanner .closeButton {
		top: 10px;
		right: 10px;
	}
}

/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1{border-top:5px solid;}
.row2{border-bottom:1px solid;}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}


/* Header
--------------------------------------------------------------------------------------------------------------- */
#header {
    border-bottom: 6px double #000028;
    padding: 40px 0 0;
    text-align: center;
}

#header #logo {
    float: left;
    left: 20%;
    margin-left: -100px;
    position: relative;
    width: 200px;
}
#header #logo *{margin:0; padding:0; line-height:1;}
#header #logo h1{font-size:20px;}
#header #logo h1 br,
#header #logo h1 span {display: none;}
#header #logo p {
/*
    border-top: 7px double #000028;
    color: #333;
    font-size: 12px;
    padding: 1em 0;
*/
}
@media screen and (max-width:768px){
	#header #logo {margin-bottom: 10px;}
}
#tel {
    float: left;
    width: 285px;
}
#yoyaku {
    display: inline-block;
    float: left;
    left: 30%;
    position: relative;
    width: 220px;
}

.topleft img {
    width: 120px;
}
.topleft {
    display: block;
    float: left;
}
.topright img {
    width: 174px;
}
.topright {
    display: block;
    float: right;
    position: relative;
    right: -85px;
    top: -62px;
}

.subtitile {
    border-bottom: 2px solid #000028;
    clear: both;
    color: #333;
    margin: 0 auto;
    max-width: 978px;
    padding: 6px 0;
    text-align: center;
		font-weight: 400;
		font-style: normal;
}

/* パンくず
--------------------------------------------------------------------------------------------------------------- */
.breadcrumb {
	max-width: 978px;
  margin: 0 auto;
  padding: 10px 10px 0;
  list-style: none;
}
.breadcrumb li {
  display: inline;
  list-style: none;
  font-weight: bold;
  font-size: 12px;
}
.breadcrumb li:after {
  content: '>';
  padding: 0 0.2em;
}
.breadcrumb li:last-child:after {
  content: '';
}
.breadcrumb li a {
  text-decoration: none;
}
.breadcrumb li a:hover {
  text-decoration: underline;
}
@media screen and (min-width:978px){
	.breadcrumb {
		padding: 0;
		margin-bottom: 10px;
	}
}

/* 各ページリード文
--------------------------------------------------------------------------------------------------------------- */
.pageLead{padding: 20px 0;}
.pageLead h1{border-bottom: 1px solid #cccccc; padding: 0 0 10px 0; margin: 0 0 10px 0; font-size: 12px; font-weight: 800;}
.pageLead p{font-size: 14px; line-height: 1.6;}
@media screen and (min-width:978px){
	.pageLead h1{font-size: 16px;padding-bottom: 18px; margin-bottom: 20px;}
	.pageLead{padding-top: 40px;}
}
@media screen and (max-width: 979px){
	.pageLead p{font-size: 11px !important;}
}

/* Top Page
--------------------------------------------------------------------------------------------------------------- */
#myslider {
    margin: 0 auto;
    max-width: 978px;
    padding: 0;
}
#myslider.flexslider li {
     list-style-type: none;
}

.youtube_bak {
    background: #fff none repeat scroll 0 0;
    border: 5px solid #fff;
    box-shadow: 0 0 5px #ccc;
}

a:hover img.top_menu {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

/* Price Page
--------------------------------------------------------------------------------------------------------------- */
p.camp {
    color: #333;
    font-size: 1.2rem!important;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
    font-family: 'Open Baskerville 0.0.53';
}
.price {
    font-weight: bold;
}
ul.price_ul {
    font-size: 16px;
    list-style-type: none;
    margin: 0;
    padding: 1em 0;
}
ul.price_ul li {
    border-bottom: 1px solid #333;
    padding: 12px;
}
.price_right {
    float: right;
}
.priceTable th,
.priceTable td{
	font-weight: 300;
}
.price_bnr {
    text-align: center;
	margin-top: 30px;
}
/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container {
    padding: 0;
}
main {
    margin-top: 4em !important;
}
.two_quarter > p {
  color: #333;
	font-size:1.2em;
  text-decoration: underline;
}
small {
    font-size: 0.85rem;
}
ul.priceInfo{
	text-align: left;
	padding: 0;
	margin: 0 0 0 0;
}
ul.priceInfo > li{
	list-style: none;
	font-size: 0.8rem;
	line-height: 1.5;
}
ul.priceInfo > li:before{
	content: "※";
}
ul.priceInfo > li > span.textIndent{
	padding-left: 0.9em;
}
.f_bold{
	font-weight: bold;
}
ul.priceInfo > li > ul > li{
	list-style: disc;
	margin-left:-1.3em;
}
.topics div p:first-child {
    padding-top: 0.4em;
}

.topics div {
    background-color: #000028;
    color: #fff;
}
.topics div p {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
}
.topics div p:last-child {
    border-bottom: 0;
}
.topics div p {
    font-size: 0.8em;
    text-align: left;
    padding-top: 2px;
}

p.two-bottom {
		font-family: lato, sans-serif;
		font-weight: 400;
    background-color: #ededef;
    color: #333;
    margin: 0 auto;
    max-width: 682px;
    padding: 0.5em;
    text-align: left;
}

.graybg{background-color: #c9caca; padding: 0.5em;}
p.topline {
    font-size: 1.8em;
    margin-bottom: 10px;
    font-family: 'Open Baskerville 0.0.53';
    border-bottom:2px solid #000028;
    display: inline-block;
    padding-bottom:18px;
}
p.btmline {
/*
	border-top: 2px solid #000028;
    display: inline-block;
*/
    font-size: 0.7em;
    margin-top: 0;
    padding-top: 5px;
}
p.middleLine{
	border-top: 2px solid #000028;
    display: inline-block;
}
p.topline_pr {
    font-size: 1.8em;
    margin-bottom: 0;
    font-family: 'Open Baskerville 0.0.53';
    padding-bottom: 18px;
    border-bottom: 2px solid #000028;
    display: inline-block;
    margin-bottom: 10px;
}
p.btmline_pr {
    font-size: 0.8em;
    margin-top: 0;
    padding-top: 5px;
}
.container.hoc.clear > p {
}
.container p.btm {
	border-bottom: 1px solid #333;
	font-weight: 300;
	padding-bottom: 8px;
}
.pgbox {
    border: 1px solid #000028;
    background-color: #eee;
    margin-bottom: 10px;
    padding-bottom: 20px;
}
.pgdec {padding: 0 5em;}

.pgdec_left {
	float: left;
	margin-right: 10px;
}
.pgdec_left > strong{
	font-weight: 300;
}

.pgdec_right {
	float: left;
}

.pgdec_right h4 {
	float: left;
	margin-right: 5px;
	font-size: 12px;
	background: #000028;
	color: white;
	padding: 5px;
	border-radius: 5px;
}

.left_area {
    float: left;
    width: 45%;
}
.right_area {
    float: right;
    width: 45%;
}
.left_area > p, .right_area > p {
    border: 1px solid #333;
    padding: 1em 0;
}

.left_area a, .right_area a {
    color: #333;
    display: block;
}
.left_area a:hover, .right_area  a:hover {
    color: #003C68;
}

.st_left {
    float: left;
    margin-right: 1em;
    width: 45%;
}
.st_left p {
    border-bottom: 1px solid #000028;
    padding-bottom: 1em;
}
.st_right {
    float: right;
    width: 50%;
}

.st_right > p {
    background-color: #333;
    color: #fff;
    font-size: 1.2rem;
    padding: 0.5rem 0;
    text-align: center;
}



/* ABOUT
--------------------------------------------------------------------------------------------------------------- */
h2.ab_title {
    border-bottom: 0 none;
    font-size: 2rem;
    font-weight: 200;
    letter-spacing: 7px;
    line-height: 45px;
    margin-bottom: 1.5em;
    margin-top: 2em;
    text-align: center;
    color: #333;
}
.about {
    border: 1px solid #888;
    font-size: 16px;
    margin-bottom: 3em;
    max-width: 978px;
    padding: 2em;
}
.about_con {
    border: 1px solid #888;
    font-size: 16px;
    height: auto;
    margin-bottom: 3em;
    /*max-height: 57em;*/
    max-width: 978px;
    padding: 2em;
}
.ab_ti1 {
    width: 17em;
}
.ab_left {
    float: left;
    margin-right: 1em;
    text-align: left;
    width: 45%;
    font-size: 13px;
    line-height: 1.8;
}
.ab_left p {
    margin-top: 0;
}
.innerTxt p{
	padding: 0 30px;
}

.ab_bl {
    background-color: #000028 !important;
    color: #fff !important;
    margin: 1em 0 !important;
    padding: 8px 0;
    text-align: center !important;
}
.ab_wh {
    background-color: #fff!important;
    font-size: 13px;
}
.ab_cacth {
    background-color: #fff;
    border: 1px solid #000028;
    color: #000028;
    display: inline-block;
    padding: 0.5em;
    text-align: center;
    width: 100%;
    font-weight: 300;
    font-size: 14px;
}
/* バツを描く */
#batsu {
    display:block;
    /* 大きさの設定(全体ではなく、線1本の大きさ) */
	width: 40px;
    height: 1px;

    /* 色の設定 */
    background-color: black;

	/* 45度回転 */
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);

	/* 位置調整 */
    margin: 30px auto;
}

/* :afterを使って、バツのもう1本の線を描く */
#batsu:after {
	/* :afterをblockとして表示する */
	content: "";
    display: block;
    
	/* 大きさの設定(親要素=#batsuと全く同じ) */
    width: 100%;
    height: 100%;

	/* 色の設定(親要素と同じ) */
    background-color: inherit;

    /* まわす */
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}
p.ab_tr {
    background-color: #fff;
    color: #333;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: left;
}
.tr_name {
    font-size: 2rem;
    font-weight: 200;
}
.ab_left > img {
    max-width: 65%;
}
.ab_left_c {
    float: left;
    margin-right: 1em;
    text-align: left;
    width: 30%;
}
.ab_right_c {
    float: right;
    width: 67%;
}
.ab_con_phone {
    display: none;
}
.phone {
    display: none;
}


h2 {
    border-bottom: 2px solid #000028;
    color: #000028;
    margin-top: 2em;
/*    font-family: 'Open Baskerville 0.0.53';*/
}

h2.graybg {
    background-color: #000028;
    color: #fff;
    font-family: 'Open Baskerville 0.0.53',noto-sans-cjk-jp, sans-serif,Helvetica,Arial,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,メイリオ,sans-serif;
}

.yoyaku1  {
    float: left;
    font-size: 1.4em;
    margin-right: 1em;
}
.yoyaku2  {
    font-size: 1.4em;
}

/*サーフボード聞きについて*/
.about.equipment .ab_stc{
    letter-spacing: 2px;
/*    font-size: 28px;*/
    line-height: 1.5;
    font-weight: 200;
}
.about.equipment .gradeup_flow{
    border-bottom: 1px solid #000035;
    padding-bottom: 2px;
    margin-bottom: 48px;
    font-weight: 200;
}
.about.equipment .gradeup_flow .flow{
    background: #000035;
    text-align: center;
    font-size: 19px;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    padding: 10px 0;
}

.about.equipment .gradeup_flow .flow:after{
    content: "";
    position: absolute;
    left: 50%;
    margin: 0 0 0 -5px;
    bottom: -14px;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 5px 0 5px;
    border-color: #000035 transparent transparent transparent;
}

.about.equipment .gradeup_flow .result{
    border-top: 1px solid #000035;
    border-bottom: 1px solid #000035;
    text-align: center;
    font-size: 19px;
    margin-top: 32px;
    position: relative;
    padding: 10px 0;
}
.about.equipment .gradeup_flow .result:after{
    content: "";
    position: absolute;
    left: 50%;
    margin: 0 0 0 -5px;
    top: -14px;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 5px 0 5px;
    border-color: #000035 transparent transparent transparent;
}
.about.equipment .ab_left p{
    text-align: left;
    font-size: 13px;
    line-height: 1.8;
}
.about.equipment .st_right img{
    margin-bottom: 23px;
}

.about.equipment .middleline{
    margin-top: 75px;
    margin-bottom: 0;
    font-size: 21px;
    display: inline-block;
    background-color: #fff;
    position: relative;
    padding: 0 4px;
}
.about.equipment .middle.btmline{
    margin-top: -12px;
    padding-top: 20px;
    margin-bottom: 29px;
}
.about.equipment .reborn{
    overflow: hidden;
}
.about.equipment .reborn .left{
    float: left;
    width: 50%;
    text-align: center;
}
.about.equipment .reborn .right{
    float: right;
    width: 50%;
    position: relative;
    text-align: center;
}
.about.equipment .reborn .left p,
.about.equipment .reborn .right p{
    width: 75%;
}
.about.equipment .reborn div:nth-last-of-type(1):before{
    content: "";
    border-right: 1px dashed #000035;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height:100%;
    display: block;
}

.evidence-about {
	font-size: 18px;
}

.evidence-about .ttl {
	font-size: 14px;
	float: left;
    -ms-text-combine-horizontal: all;
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background: #ccc;
    padding: 10px 5px;
}

.evidence-about .txt {
	text-align: left;
	font-size: 13px;
}

.evidence-about .ab_stc {
}

.evidence-other {
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid;
	border-bottom: 1px solid;
	text-align: left;
	font-size: 13px;
}

.about .ab_stc {
}
.evidence .ab_stc{
	font-weight: 200;
}
.one_quarter .ab_bl{
	font-weight: 200;
}
.about_con .ab_stc{
	font-weight: 200;
}
.about-consept{
	position: relative;
}
.about-consept .about-consept-inner{
	position: absolute;
	bottom: 20px;
	left: 20px;
	background: #000000;
	background: rgba(0,0,0,0.5);
	width: 580px;
	padding: 20px;
	margin: 0;
}
.about-consept .about-consept-inner .main-txt,
.about-consept .about-consept-inner .lead-txt {
	color: #ffffff;
	text-align: left;
}
.about-consept .about-consept-inner .main-txt{
	font-size: 20px;
	font-weight: 200;
	margin-bottom: 10px;
	line-height: 1.4;
}
.about-consept .about-consept-inner .lead-txt {
	font-size: 13px;
	margin-left: 0;
}
.about-consept .about-consept-inner .lead-txt p {
	margin-bottom: 10px;
}


@media screen and (max-width:768px){
	.about-consept .about-consept-inner,
	.about-consept {
		position: unset;
	}
	.about-consept .about-consept-inner{
		width:auto;
	}
	.about-consept .about-consept-inner .main-txt{
		font-size: 18px;
	}
	.br-pc{
		display: none;
	}
	.evidence-about .ttl{
		padding: 20px 5px;
	}
}

/* WELCOME
--------------------------------------------------------------------------------------------------------------- */
.we_left {
    float: left;
    margin-right: 1em;
    width: 50%;
}

.we_right {
    float: right;
    width: 45%;
}
.we_left p {
}
.we_1 {
    font-size: 1.3rem;
    font-weight: bold;
}
.we_2 {
    background-color: #000028;
    border-radius: 10px;
    color: #fff;
    font-size: 1.2rem;
    padding: 10px 0;
    text-align: center;
    width: 70%;
}
p.we_2:hover {
    background-color: #343351;
}
.we_3 {
    border: 1px solid;
    text-align: center;
    width: 70%;
    font-weight: 300;
}

p.btm-25 {
    margin-bottom: -25px;
    font-weight: 300;
}

.we_tel {
    font-size: 2em;
    margin: 30px 0;
}
.we_tel span {
}

.we_4 {
    background-color: #333;
    border-radius: 10px;
    color: #fff;
    float: left;
    margin-right: 5%;
    padding: 2px 0;
    text-align: center;
    width: 70%;
}

.we_5:nth-child(3) {
    margin: 3.33333%;
}
.we_5 {
    border: 1px solid;
    float: left;
    text-align: center;
    width: 31%;
}

img.inst {
    float: left;
    margin-bottom: 2em;
    margin-right: 5.2em;
    width: 25%;
}
img.instr {
    margin-right: 0;
}

.form-control {
    margin-bottom: 1em;
}

.inst-inner {
	width: 900px;
}

/* FAQ
--------------------------------------------------------------------------------------------------------------- */
p.head:hover {
    color: #0056ad;
}

/* 施設利用約款
--------------------------------------------------------------------------------------------------------------- */
.rule {
    border: 1px solid #888;
    font-size: 13px;
    margin-bottom: 3em;
    padding: 2em;
    line-height: 1.8;
}
/* 会社概要
--------------------------------------------------------------------------------------------------------------- */
.company {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 3em;
    text-align: center;
}

/* Contact
--------------------------------------------------------------------------------------------------------------- */
.two_box {
    border: 1px solid #333;
    float: none;
    margin-bottom: 3em;
    margin-right: 2em;
    width: 100%;
}

.contact-1 {
    background-color: #000028;
    color: #fff;
    font-size: 1.6em;
    margin-top: 0;
    padding: 1em;
    text-align: center;
}

.contact-2 {
    font-size: 3em;
    margin-bottom: 0;
    text-align: center;
}
.contact-3 {
    font-size: 1.2em;
    text-align: center;
}
.contact-4 {
	padding: 1.4em;
}

.footimg {
	margin: 5em 0;
}

/* Instructor 
--------------------------------------------------------------------------------------------------------------- */
.instructor_title {
	background: #000028;
	width: 100%;
	padding: 5px;
	padding-left: 15px;
	color: white;
}

/* Studio shop list
--------------------------------------------------------------------------------------------------------------- */
.shopList{ margin-top:90px; }
.shopList h2{ margin-bottom:35px; font-size:22px; font-weight:700; letter-spacing:0.07em; }
.shopList .shopArea dl{ margin:7px 0; }
.shopList dl::after{ content:""; display:block; clear:both; }
.shopList .shopArea dt{ clear:both; float:left; color:#777; list-style:none; line-height:100%; width:150px; }
.shopList .shopArea dd{ border-right:1px solid #aaa; padding-right:1.2em; margin:0px 1.2em 0px 0; float:left; line-height:100%; list-style:none; color:#ccc; }
.shopList .shopArea dd:last-child{ border-right:none; padding-right:0; margin-right:0; }
.shopList .shopArea dd a{ color:#000028; }
.shopList .shopArea dd a:hover{ opacity:0.7; }

.shopList .shopDetail { margin-left:16px; padding:0; margin:30px 0; }
.shopList .shopDetail a{ color:#000028; text-decoration:underline; }
.shopList .shopDetail a:hover{ opacity:0.7; }
.shopList .shopDetail li{ list-style:none; padding:15px 0 30px; }
.shopList .shopDetail h3{ margin:0; font-size:15px; letter-spacing:0.07em; padding:3px 6px; color:#fff; background:#000028; }
.shopList .shopDetail .label{ font-size:13px; margin-top:15px; letter-spacing:0.07em; line-height:180%; }

/* Studio
--------------------------------------------------------------------------------------------------------------- */
.studio_inner {
	margin-top: 10px;
}

.studio_inner h3 {
	background: #000028;
	color: white;
	font-size: 14px;
	width: 100%;
	padding: 5px;
	padding-left: 15px;
}

.loive_link {
	background: #ffaf4b;
	color: #000028;
	padding: 5px;
	text-align: center;
	font-size: 15px;
}

.clnn{display: block;}

@media screen and (max-width:768px){
	.shopList{ margin-top:25%; }
	.shopList h2{ margin-bottom:5%; font-size:16px; }
	.shopList .shopArea dl{ margin:1% 0; }
	.shopList .shopArea dt{ float:none; width:100%; font-size:14px; font-weight:700; padding:10px 0 5px; margin-bottom:5px; border-bottom:1px solid #ccc; }
	.shopList .shopArea dd{ border-right:none; padding-right:1.4em; padding-bottom:10px; margin:0px; line-height:180%; font-size:12px; }
	.clnn{display: none;}

}


/* Recruit
--------------------------------------------------------------------------------------------------------------- */
h2.rec_title {
    border-bottom: 0 none;
    color: #333;
    font-size: 1.5rem;
    font-weight: 200;
    letter-spacing: 7px;
    line-height: 2.0;
    margin-bottom: 1.3em;
    margin-top: 2em;
}
h4.rec_sub_title {
    border-bottom: 2px solid #333;
    font-size: 1.2rem;
    padding-bottom: 3px;
    text-indent: 3px;
}
.rec_indent {
    text-indent: 5px;
}
.rec_box {
    border: 1px solid;
    width: 62%;
    padding: 5px;
}
table.rec_table {
    max-width: 700px;
}
table.rec_table td {
    background-color: #d7d7d7;
    border: 0 none !important;
    text-align: left;
}
table.rec_table tr th {
    background-color: #d7d7d7;
    border-bottom: 0 none !important;
    border-image: none !important;
    border-left: 0 none !important;
    border-right: 1px solid;
    border-top: 0 none !important;
    font-weight: normal;
    width: 7em;
}
.rec_contact {
    background-color: #000028;
    border-radius: 10px;
    color: #fff;
    display: block;
    float: left;
    font-size: 1.3rem;
    margin-right: 30px;
    padding: 0.7em;
    text-align: center;
    width: 30%;
}

/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:0; line-height:2;text-align: center;max-width: 978px;}

ul#social {
    margin: 0 0 -15px;
    padding: 0;
    text-align: center;
}

ul#social li {
     display: inline-block;
     list-style-type: none;
    margin-right: 5em;
}

ul#social li:last-child {
     margin-right: 0px;
}

ul#social li img {
     width: 60%;
}

ul.footmenu {
    display: inline-block;
    list-style-type: none;
    margin: 0 auto;
}
.footmenu > li {
    float: left;
    padding: 0 1em;
}

ul.foot_pc {display:inline-block;}
ul.foot_phone {display:none;}

hr.foothr {
    border-bottom: 1px solid #000028;
    margin-bottom: 1.5em;
	max-width:978px;
}
.footmenu a {
    color: #000028;
}
.footmenu a:hover {
    color:#0056ad;
}
.copy{
	font-family: lato, sans-serif;
	font-weight: 400;
}

/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}

#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px;}

/* Top Navigation */
#mainav{margin-bottom: 1em;}
#mainav ul {
    margin: 1em 0;
    text-align: center;
}
#mainav ul ul{z-index:9999; position:absolute; width:160px; text-align:left; text-transform:none;}
#mainav ul ul ul{left:160px; top:0;}
#mainav ul.t2 li {
	padding: 0;
}
#mainav li {
    border-left: 1px solid #000028;
    display: inline-block;
    margin: 0 auto;
    padding: 0 1em;
    position: relative;
    text-align: center;
}
#mainav li:last-child {
    border-right: 1px solid #000028;
    margin-right: 0;
}
#mainav li li{width:100%; margin:0;}
#mainav li a{display:block; padding:0 28px;}
#mainav li li a{border:solid; border-width:0 0 1px 0;}
#mainav li a span:nth-of-type(1) {
	display: block;
	width: 100%;
	font-size: 13px;
  font-family: lato, sans-serif;
  font-weight: 400;
	line-height: 1em;
/*	padding: 0 0.9em;*/
/*	padding: 0 1.6em;*/
	margin-bottom: 2px;
	box-sizing: border-box;
}
#mainav li a span:nth-of-type(2) {
	display: block;
	width: 100%;
	font-size: 9px;
	line-height: 1em;
	height: 1em;
	font-feature-settings:"palt";
	white-space: nowrap;
/*	padding: 0 1.6em;*/
	box-sizing: border-box;
}
#mainav .drop{padding-left:15px;}
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
#mainav .drop::after, #mainav li li .drop::after{content:"\f0d7";}
#mainav .drop::after{top:25px; left:5px;}
#mainav li li .drop::after{top:15px; left:5px;}
#mainav ul ul{visibility:hidden; opacity:0;}
#mainav ul li:hover > ul{visibility:visible; opacity:1;}

#mainav form{display:none; margin:0; padding:0;}
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
#mainav form select{width:100%; padding:5px; border:1px solid;}
#mainav form select option{margin:5px; padding:0; border:none;}

/* phone navigation */
.inner {
    width: 980px;
    margin: 0 auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}
 
/* header */
#top-head {
    top: -150px;
    position: absolute;
    width: 100%;
    margin: 100px auto 0;
    padding: 30px 0 0;
    line-height: 1;
    z-index: 999;
}
#top-head a,
#top-head {
    color: #fff;
    text-decoration: none;
}
#top-head .inner {
    position: relative;
}
#top-head .logo {
    float: left;
    font-size: 36px;
}
#global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
}
#global-nav ul li {
    float: left;
}
#global-nav ul li a {
    padding: 0 30px;
}
 
/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    padding-top: 10px;
    height: 55px;
    background: #fff;
    background: rgba(255,255,255,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
    font-size: 24px;
    color: #333;
}
#top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0 20px;
}
 
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #000028;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

/* Breadcrumb */
#breadcrumb{padding:50px 0; text-align:center;}
#breadcrumb ul{margin:0; padding:0; list-style:none;}
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:12px; text-transform:capitalize;}
#breadcrumb li a::after{top:3px; right:0; content:"\f101";}
#breadcrumb li:last-child a{margin:0; padding:0; cursor:default;}
#breadcrumb li:last-child a::after{display:none;}

/* Sidebar Navigation */
.sidebar nav{display:block; width:100%;}
.sidebar nav li{margin:0 0 3px 0; padding:0;}
.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
.sidebar nav a::after{top:9px; left:5px; content:"\f101";}
.sidebar nav ul ul a{padding-left:35px;}
.sidebar nav ul ul a::after{left:25px;}
.sidebar nav ul ul ul a{padding-left:55px;}
.sidebar nav ul ul ul a::after{left:45px;}

/* Pagination */
.pagination{display:block; width:100%; text-align:center; clear:both;}
.pagination li{display:inline-block; margin:0 2px 0 0;}
.pagination li:last-child{margin-right:0;}
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; background-clip:padding-box; font-weight:normal;}

/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:36px; height:36px; line-height:36px; border-radius:5px; font-size:16px; text-align:center; opacity:.2;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse;}
table, th{table-layout:auto;width: 0;}
table{width:100%; margin-bottom:15px;}
th, td{font-size: 16px;padding:10px 6px;text-align: center;}
th {
    background-color: #dadbdb;
    border: 1px solid #333!important;
    color: #333;
}
td {
    background-color: #fff;
    border: 1px solid #333 !important;
}
.tablebtm td {
    border-left: 1px solid #fff !important;
    border-right: 1px solid #fff !important;
    border-top: 1px solid #fff !important;
}

/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:0; list-style:none;}
.faico li{display:inline-block; margin:5px 2px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}
.faico a{display:inline-block; width:30px; height:30px; line-height:30px; font-size:16px; text-align:center; border-radius:5px;}


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


/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#333; background-color:#fff;}
a{color:#003C68;}
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#003C68;}
.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(37,58,84,.55);}
.btn{color:inherit; background-color:transparent; border-color:inherit;}
.btn:hover{color:#FFFFFF; background-color:#003C68; border-color:#003C68;}


/* Rows */
.row0{color:#000028888; background-color:#F5F5F5;}
.row1{color:#fff; background-color:#FFFFFF;}
.row2{color:#333; background-color:#FFFFFF; border-color:#fff;}
.row3{color:#333; background-color:#FFFFFF;}
.row4{color:#D7D7D7; background-color:#253A54;}
.row4 a{color:#FFFFFF; background-color:inherit;}
.row5, .row5 a{color:#FFFFFF; background-color:#131E2B;}


/* Header */
#header #logo a{color:#131E2B;}


/* Content Area */
.icon.square{color:#FFFFFF; background-color:#131E2B;}
.icon.square::before{border-top-color:#131E2B;}
li:hover > .icon.square{color:#FFFFFF; background-color:#003C68;}
li:hover > .icon.square::before{border-top-color:#003C68;}
.icon.round{color:inherit; border-color:#131E2B;}
.icon.round::before, .icon.round::after{background-color:#D7D7D7;}
article:hover .icon.round{color:#003C68; border-color:#003C68;}
article:hover .icon.round::after{background-color:#003C68;}


/* Testimonials */
#testimonials .flex-direction-nav a{color:inherit;}


/* Latest */
#latest .carousel-items li a figure{border-color:#D7D7D7}
#latest .carousel-items li a:hover figure{border-color:#4B4E50;}
#latest .carousel-items li a figure figcaption{color:#000028888; background-color:#FFFFFF;}
#latest .carousel-items li a:hover figure figcaption{color:#FFFFFF; background-color:#131E2B;}


/* Footer */
#footer input{color:#FFFFFF; background-color:#131E2B;}
#footer button{color:#253A54; background-color:#FFFFFF;}

#footer .faico a{color:#253A54; background-color:#FFFFFF;}
#footer .faico a:hover{color:#FFFFFF;}
#footer .faicon-facebook:hover{background-color:#3B5998;}
#footer .faicon-google-plus:hover{background-color:#DB4A39;}
#footer .faicon-instagram:hover{background-color:#3F729B;}
#footer .faicon-linkedin:hover{background-color:#0E76A8;}
#footer .faicon-tumblr:hover{background-color:#34526F;}
#footer .faicon-twitter:hover{background-color:#00ACEE;}


/* Navigation */
#mainav li a{color:inherit;}
#mainav .active a, #mainav a:hover, #mainav li:hover > a{color:#0056ad; background-color:inherit;}
#mainav li li a, #mainav .active li a{color:#FFFFFF; background-color:rgba(0,0,0,.6); border-color:rgba(0,0,0,.6);}
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:#003C68;}
#mainav form select{border-color:#D7D7D7;}

#breadcrumb a{color:inherit; background-color:transparent;}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#003C68;}

.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#003C68;}

#backtotop{color:#FFFFFF; background-color:#003C68;}


/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
#comments input:focus, #comments textarea:focus, #comments *:required:focus{border-color:#003C68;}

tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}


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


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:978px){
.hoc{max-width:978px;}
#bottom,#tile_menu {display:none;}
.pcbr:before {
	content: "\A" ;
	white-space: pre ;
}
.ab_bl2 {
    padding: 1.2em 0;
}
}


/* Smartphone + Tablet
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:449px){
#logo a img {
    margin-top: -30px !important;
    width: 50%;
}
div main {
    margin-top: 5px !important;
}
main p {
    font-size: 0.8rem !important;
}
div.about_con {
    margin-bottom: 0;
}
span.tr_name {
    font-size: 1.1rem;
}

h4.price {
    font-size: 1.1rem;
}
th, td {
    font-size: 0.8rem;
}
ul.price_ul li {
    border-bottom: 1px solid #333;
    font-size: 0.8rem;
    padding: 4px 2px;
}
ul#social li {
    margin-right: 1.5em;
}
ul#social li img {
    width: 50%!important;
}

#myslider {
    margin-top: 5px;
}

p.btm-25 {
    margin-bottom: -25px;
    text-align: center;
}

h2 {
    margin-top: 0;
}
h3 {
    font-size: 14px;
}

h2.rec_title {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1.5;
}
h4.rec_sub_title {
    font-size: 1rem;
}
.rec_box {
    width: 100%;
}
.rec_contact {
    font-size: 0.9rem;
    padding: 0.3em;
    width: 100%;
    float: none;
    margin-right: 0;
}

h2.ab_title {
    font-size: 1.27rem;
    letter-spacing: 0;
    line-height: 1.5;
    font-weight: 200;
}
p.topline{
    font-size: 1.85rem !important;
}
p.btmline {
    font-size: 1rem !important;
}
p.btmline_pr {
    font-size: 1rem !important;
    padding-bottom: 10px;
}
p.topline_pr{
	font-size: 1.85rem !important;
}
.about, .about_con {
    padding: 0.5em;
}
.ab_stc {
    font-size: 1.2rem !important;
}
.ab_tr {
    font-size: 0.7rem;
}
p.ab_bl {
    font-size: 0.85rem !important;
    padding: 0.2rem !important;
}
.ab_ti1 {
    width: 14em;
}
.ab_left_c, .ab_right_c {
    float: none;
    margin: 0 auto;
    width: 100%;
}
.ab_con {display:none;}
.phone {display:block;}
p.contact-1 {
    font-size: 0.87rem !important;
}
h2.graybg {
    font-size: 12px;
}
p.map {
    margin-bottom: -65px;
}
.contact-2 {
    font-size: 2em !important;
}
.rule {
    padding: 1em;
}
.company {
    margin-bottom: 0em;
}
.right_area {
    margin-bottom: -100px!important;
}
ol {
    font-size: 0.75rem;
}
ol li {
    font-size: 0.75rem;
}
.pc {display:none;}
ul.footmenu.foot_pc {display:none;}
ul.foot_phone {display:inline-block;}

.br:before {
	content: "\A" ;
	white-space: pre ;
}
.indent::before {
    content: "\a 　　 ";
    white-space: pre;
}
.indents::before {
    content: "\a 　　　　";
    white-space: pre;
}
.copy {
    font-size: 0.8rem;
}
.about.equipment .gradeup_flow .flow{
    font-size: 0.8rem;
}
.about.equipment .ab_stc{
    letter-spacing: 0;
}
.about.equipment .reborn .left p, .about.equipment .reborn .right p {
    width: 90%;
}
}

@media screen and (max-width:450px) and (max-width:700px){
#social img {
    width: 70%!important;
}

}

@media screen and (max-width:404px){
img.inst {
    margin-right: 1.28em;
    float: none;
    width: 80%;
    margin: 0 auto;
    margin-left: 1.28em;
}
img.insts {
    margin-right: 0;
}
img.instr {
    margin-right: 1.2em !important;
    margin-bottom: 10px;
}

.inst-div {
	text-align: center;
	margin-right: 0;
}

.inst-inner {
	width: 100%;
}

#social img {
    width: 100%!important;
}
.pgbox {
    display: inline-table;
}
}

@media screen and (min-width:405px) and (max-width:929px){
img.inst {
    margin: 0 auto;
    float: none;
    width: 80%;
}
img.inst {
    margin-right: 2.2em;
}
img.instr {
    margin-right: 2.2em !important;
    margin-left: 2.2em;
    margin-bottom: 10px;
}
img.insts {
    margin-right: 0;
}

.inst-inner {
	width: 100%;
}

.inst-div {
	text-align: center;
	margin-right: 0;
}

#social img {
    width: 70%!important;
}
.about.equipment .reborn .left p, .about.equipment .reborn .right p {
    width: 80%;
    font-size: 1rem;
}
}

@media screen and (max-width:977px){
.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
.fl_left, .fl_right{display:block; float:none;}
.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

#header #logo {
    float: none;
    left: 0;
    margin-left: 0;
    position: relative;
    width: 100%;
}

.two_quarter.topics {
    margin: 0 auto;
    max-width: 682px;
}

#pageintro p{max-width:none;}
#testimonials .slides li .flex-content blockquote{max-width:none;}
#header {padding: 40px 0 0 0;}
#tel, #yoyaku {display:none;}
.wrapper, #myslider {
    overflow: hidden;
    padding: 0 10px;
}

#mainav {display:none;}

#top-head, .inner {
    width: 100%;
    padding: 0;
}
#top-head {
    top: 0;
    margin-top: 0;
}

/* Fixed reset */
#top-head.fixed {
   padding-top: 0;
   background: transparent;
}

#mobile-head {
    width: 100%;
    height: 56px;
    z-index: 999;
    position: relative;
}
#global-nav {
    background: #333 none repeat scroll 0 0;
    opacity: 0.86;
    padding: 10px 0;
    position: absolute;
    text-align: left;
    text-indent: 1em;
    top: -582px;
    transition: all 0.5s ease-in-out 0s;
    width: 80%;
	z-index: 9999;
}

#global-nav ul {
    list-style: none;
    position: static;
    right: 0;
    bottom: 0;
    font-size: 14px;
}
#global-nav ul li {
	border-bottom: 1px solid #000028;
	float: none;
    position: static;
}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
    width: 100%;
    display: block;
    color: #fff;
    padding: 18px 0;
}
#nav-toggle {
    display: block;
}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
}
.open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {

/* #global-nav top + #mobile-head height */
    -moz-transform: translateY(582px);
    -webkit-transform: translateY(582px);
    transform: translateY(582px);
}
nav#tile_menu {
	display:block;
  text-align: center;
  background-color: #e8e8e8;
  height: auto;
  overflow: hidden;
  padding-top: 1px;
	font-family: lato, sans-serif;
}
nav#tile_menu ul {
    width: 100%;
    margin: 0;
    overflow: hidden;
}
nav#tile_menu li {
    width: 33.333333333%;
	float:left;
    -moz-box-flex: 0;
    -webkit-box-flex: 0;
    display: block;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e8e8;
    text-align: center;
    height: 50px;
    position: relative;
    box-sizing: border-box;
}
nav#tile_menu li a {
    height: 50px;
    text-decoration: none;
    color: #000;
    font-size: 12px;
    font-weight: 400;
    line-height: 50px;
}

.bgcolor {
    background-color: #231815;
    display: block;
    margin: -20px;
    padding: 20px;
}

.bottom {
	display:block;
    background-color: #fff;
    border-top: 1px solid #333;
    bottom: 0;
    position: fixed;
    width: 100%;
}
.top {
	display:block;
    background-color: #fff;
    border-bottom: 1px solid #333;
    top: 0;
    position: fixed;
    width: 100%;
}
.pgdec {
    margin-top: -8px;
    padding: 0 2em;
}

.left_area, .right_area {
    float: none;
	font-size: 0.9rem;
    width: 85%;
    margin: 0 auto;
}

.st_left, .st_right, .ab_left {
    float: none;
    margin: 0 auto;
    width: 100%;
}

.we_left, .we_right {
    float: none;
    margin: 0 auto;
    width: 100%;
}

.yoyaku1 {
    float: none;
    font-size: 1rem !important;
    font-weight: bold;
    margin-bottom: -10px;
    margin-right: 0;
    text-align: center;
}
.yoyaku2 {
    font-size: 0.85rem !important;
    text-align: center;
}
.we_1 {
    font-size: 1rem !important;
}
.we_2 {
    width: 100%;
}
.we_3 {
    width: 100%;
}
.we_tel {
    font-size: 2em!important;
    text-align: center;
}

.we_4 {
    float: none;
    width: 100%;
}

.we_5:nth-child(3) {
    margin: 0;
}
.we_5 {
    border: 1px solid;
    float: none;
    text-align: center;
    width: 100%;
}

.ab_left > img {
    max-width: 100%;
}
p.ab_tr {
    margin-top: 1em;
}

.ab_con_pc {
    display: none;
}
.ab_con_phone {
    display: block;
    margin: 0 auto;
}

ul.footmenu {
    display: inline-block;
    list-style-type: none;
    margin: 0 auto;
    padding-left: 0;
}
.footmenu > li {
    float: left;
    padding-right: 0.35em;
}
.footmenu {
    font-size: 0.7rem;
}
ul.footmenu.foot_pc {display:none;}
ul.foot_phone {display:inline-block;}

#trial-phone {
    float: left;
    width: 30%;
}
#yoyaku-phone {
    float: left;
    width: 40%;
}
#tel-phone {
    float: left;
    width: 30%;
}


img.insts {
    margin-right: 0;
}
img.instr {
    margin-right: 5.2em;
}

.two_box {
    border: 1px solid #333;
    float: none;
    margin: 0 auto 2em;
    width: 100%;
}
.about.equipment .middleline{
    margin-top: 0;
    font-size: 18px !important;
}
}

#instru-inner{
	width: 900px;
	padding-top: 80px;
	margin: 0 auto;
	overflow: hidden;
	list-style: none;
}
#instru-inner li{
	float: left;
	width: 25%;
	margin-bottom:80px; 
}
#instru-inner li a{
	 transition:all 0.4s ease;  
  -moz-transition:all 0.4s ease;
  -webkit-transition:all 0.4s ease;
	display: block;
}
#instru-inner li a:hover{
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-filter: alpha(opacity=60);
  -webkit-filter: alpha(opacity=60);	
}
#instru-inner li a dt{
	margin:0 auto 20px;
	width: 150px;
	height: 150px;
}
#instru-inner li a dt img{
	border-radius: 50%;
	-moz-radius: 50%;
	-webkit-radius: 50%;	
}
#instru-inner li a dd{
	margin:0 auto;
	width: 80%;
}
#instru-inner li a dd span{
	display: block;
	text-align: center;
}

@media screen and (max-width: 767px){
#instru-inner{
	width: 100%;
	padding: 10% 0 0 0;
}
#instru-inner li{
	float: left;
	width: 50%;
	margin-bottom:12%; 
}
#instru-inner li a dt{
	margin:0 auto 10%;
	width: 75%;
	height: auto;
}
#instru-inner li a dd{
	margin:0 auto;
	width: 90%;
}
}

/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}
}

/* program topics
--------------------------------------------------------------------------------------------------------------- */
.topic_box{padding: 20px 0 0;}
.topic_box dt{font-size: 22px; font-weight: 700; padding-bottom:8px;margin-bottom:10px; border-bottom:2px solid #000;}
/*.topic_box dt:before{
	content: "";
	border-top: 7px solid #bfbfbf;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid transparent;
	position: relative;
	top:16px;
	margin-right:6px;
}
*/
.topic_box dt a:hover {opacity: .8;}
.topic_box dd{font-size: 16px; line-height:1.5; margin:0;}
@media screen and (max-width:449px){
.topic_box{padding: 0; margin-bottom: 50px;}
.topic_box dt{font-size: 16px;}
.topic_box dd{font-size: 14px;}
/*.topic_box dt:before{top:13px;}*/
}

/* etc
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:768px){
    .studio_inner .st_right{
        margin-bottom:12px;
    }
}

/* reCAPTCHA
--------------------------------------------------------------------------------------------------------------- */
.recaptcha_policy {
  padding: 20px 0 0;
  margin: 0;
  text-align: center;
  font-size: 11px !important;
  color: #444 !important;
}
.recaptcha_policy a {
  font-size: 11px !important;
  color: #111 !important;
}
.grecaptcha-badge { visibility: hidden; }



/*===================
  add 2021 05 31
  CV btn change
===================*/
#yoyaku {
  display: inline-block;
  float: left;
  left: 31.5%;
  position: relative;
  width: 174px;
}
.topleft {
  border: 1px solid #61687f;
  border-left: transparent;
}
.topleft img {
  width: 174px;
}
.topright {
  display: block;
  float: right;
  position: relative;
  right: -111px;
  top: -53px;
  border-top: 1px solid #61687f;
  border-bottom: 1px solid #61687f;
}
.topright img {
  width: 111px;
}

@media screen and (max-width: 977px) {
  #yoyaku {
    display: none;
  }
  #trial-phone {
    width: 51.2%;
    border-right: 1px solid #c6cad3;
  }
  #yoyaku-phone {
    width: 32.2%;
    border-right: 1px solid #c6cad3;
  }
  #tel-phone {
    width: 16.6%;
  }
}