@charset "utf-8";
/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/* ===================================================================
=================================================================== */

/*----------------------------------------------------
	共通
----------------------------------------------------*/
/* スクロールバーの有無によるズレ対策 */
html {
}

body {
	font-size: 15px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height:22px;
	color:#231815;
	background-color:#000;
	width: 740px;
}

/* for IE6 */
* html body {
	font-family:Tahoma, Geneva, sans-serif;
}
* html input, * html textarea {
	font-family:Tahoma, Geneva, sans-serif;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/* CSS3
----------------------------------------------------*/
#content {
/* 角丸 */
margin-top:-30px;
margin-left:40px;
width:740px;
max-width: 80vw;
height:500px;
padding:20px;


-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

background-color:rgba(255,255,255,0.8);	
}

#content-f {
margin-top:-30px;
margin-left:20px;
width:740px;
max-width: 80vw;
padding:20px;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;


background-color:rgba(255,255,255,0.8);	
}
/*
h1{
	position:absolute;
	width:44%;
	right:20px;
	top:20px;
	background:#FFF;
	padding:3px 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-weight:normal;
	font-size:15px;
	text-align:center;
}*/
.scrollArea {
	width:100%;
	height:100%;
	float:left;
	overflow:scroll;
	overflow-x:hidden;
	display: inline;
	-webkit-overflow-scrolling: touch;
}

.scrollArea, x:-moz-broken {
	width:100%;
	height:100%;
	float:left;
	overflow:scroll;
	overflow-x:hidden;
	display: inline;
	-webkit-overflow-scrolling: touch;
}

.scrollArea a:link, .scrollArea a:visited {
	color:#80f;
	text-decoration:none;
}
.scrollArea a:hover, .scrollArea a:active {
	color:#f00;
	text-decoration:none;
}






/* 汎用
----------------------------------------------------*/
/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
 
.cf:after {
    clear:both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

.imgR { float: right; margin: 0 0 10px 10px; }
.imgL { float: left; margin: 0 10px 10px 0; }
.tC,.btn { text-align: center; }
.tR, .sign { text-align: right; }




/*----------------------------------------------------
	header
----------------------------------------------------*/

#header {
	padding: 10px 0px 10px 40px;
	margin:0px;
	height:200px;
}

#header a:hover{
    opacity: 0.6;
}
#text-img{
	padding:10px 20px;
	background:rgba(0,0,0,0.5);
	width:740px;
	color:white;
	font-size:17px;
	font-weight:bold;
	border-radius: 5px;
	behavior: url(/common/css/PIE.htc);
}
#tel{
	float:right;
}
h2{
	background:#593a6d no-repeat left;
	padding:10px;
	padding-left:10px;
	font-size:20px;
	font-weight:bold;
	color:#fff;
	width:90%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	behavior: url(/common/css/PIE.htc);
	margin-bottom:20px;
}
h3{
	padding:5px;
	padding-left:10px;
	border-bottom:2px solid #593a6d;
	color:#231815;
	font-size:16px;
	width:60vw;
	margin-top:25px;
}

.subtitle {
	font-size:14px;
	color:#fff;
	text-decoration:none;
	text-shadow:0 0 6px #000,0 0 5px #000,0 0 0.10px #000,0 0 0.3px #000,0 0 0.1px #000,0 0 0.2px #000,0 0 0.4px #000,0 0 0.8px #000,0 0 0.7px #000;
	margin-top:10px;
	margin-left:20px;
}

/*----------------------------------------------------
	navi
----------------------------------------------------*/



#navi{
    /*
	background: rgba(0, 0, 0, 0.53);
    width: 490px;
	border-radius: 0 10px 10px 0;
	*/
    margin-left:40px;
}

#navi li {
	float:left;
	margin-right:15px;
	font-weight:bold;
	font-size:14px;
	text-shadow:0 0 6px #000,0 0 5px #000,0 0 0.10px #000,0 0 0.3px #000,0 0 0.1px #000,0 0 0.2px #000,0 0 0.4px #000,0 0 0.8px #000,0 0 0.7px #000;
	padding-left:15px;
	padding-top:7px;
	height:30px;
}

#navi li a:link, #navi li a:visited {
	color:#fff;
	text-decoration:none;
}
#navi li a:hover, #navi li a:active {
	color:#000;
	text-decoration:none;
	text-shadow:0 0 6px #FFF,0 0 5px #FFF,0 0 0.10px #FFF,0 0 0.3px #FFF,0 0 0.1px #FFF,0 0 0.2px #FFF,0 0 0.4px #FFF,0 0 0.8px #FFF,0 0 0.7px #FFF;
}
.active{
	color:#000 !important;
	text-shadow:0 0 6px #FFF,0 0 5px #FFF,0 0 0.10px #FFF,0 0 0.3px #FFF,0 0 0.1px #FFF,0 0 0.2px #FFF,0 0 0.4px #FFF,0 0 0.8px #FFF,0 0 0.7px #FFF;
}
/* --------------------------------------------------------------------------------------------------------
	!!!! added
-------------------------------------------------------------------------------------------------------- */

img {
	vertical-align: top;
}

img.middle {
	vertical-align: middle;
}
/* --- clearfix --- */

.clearfix {
  *zoom: 1;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  margin-top: -1px;
}

@media print {
  .clearfix:after {
    clear: both;
    height: 1px;
    margin-bottom: -1px;
    visibility: hidden;
  }
}

.scale-img {
	height: 120px;
	transition-duration: 0.5s;
	margin-left: 5px;
	margin-top: 10px;
	margin-bottom:50px;
}

.scale-img:hover {
	opacity: 1.0;
	transform: scale(4,4);
	cursor: pointer;
}

/*----------------------------------------------------
	footer
----------------------------------------------------*/


#footer {
	margin-left:40px;
}

#copyright {
	font-size:14px;
	color:#fff;
	text-shadow:0 0 6px #000,0 0 5px #000,0 0 0.10px #000,0 0 0.3px #000,0 0 0.1px #000,0 0 0.2px #000,0 0 0.4px #000,0 0 0.8px #000,0 0 0.7px #000;
	margin-top:24px;
}
#copyright a:link, #copyright a:visited {
	color:#fff;
	text-decoration:none;
}
#copyright a:hover, #copyright a:active {
	color:#000;
	text-decoration:none;
	text-shadow:0 0 6px #FFF,0 0 5px #FFF,0 0 0.10px #FFF,0 0 0.3px #FFF,0 0 0.1px #FFF,0 0 0.2px #FFF,0 0 0.4px #FFF,0 0 0.8px #FFF,0 0 0.7px #FFF;
}

.thumbnail {
	margin-top: 10px;
	margin-left: 50px;
	margin-right: 30px;
}

.r-align {
	text-align: right;
}

.unvisi {
	visibility:hidden;
}

.mt5 {
	margin-top:5px;
}
.mt10 {
	margin-top:10px;
}
.mt20 {
	margin-top:20px;
}
.mt30 {
	margin-top:30px;
}
.mt40 {
	margin-top:40px;
}
.mt50 {
	margin-top:50px;
}
.mt60 {
	margin-top:60px;
}

.gray {
	color:#999;
}
.red {
	color:#d9200f;
}
.fontB {
	font-weight:bold;
}



/* check mark */
.sample08 li {
	position: relative;
	padding-bottom:20px;
}
.sample08 li::after {
	display: block;
	content: '';
	position: absolute;
	top: .5em;
	left: -1em;
	width: 8px;
	height: 3px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	
}

/* arrow x disc */
.sample06 li {
	position: relative;
}
.sample06 li::after,
.sample06 li::before {
	display: block;
	content: '';
	position: absolute;
}
.sample06 li::after {
	top: .35em;
	left: -1.2em;
	width: 14px;
	height: 14px;
	background-color: #fff;
	border-radius: 100%;
}
.sample06 li::before {
	z-index: 2;
	top: .625em;
	left: -.975em;
	width: 4px;
	height: 4px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}



.coach {
	width:200px;
	height:auto;
	float:left;
	padding:10px;
}

.coach2 {
	width:440px;
	height:auto;
	margin-left:20px;
	margin-top:10px;
	padding:10px;
	float:left;
}

.link_ul {
	text-decoration: underline;
	color:#00F;
}
a.video_link {
	margin-right: 10px;
	text-decoration: underline;
	border:1px;
	color:#00F;
}
.video {
	width:240px;
	height:180px;
	margin-top: 10px;
	padding-left: 20px;
}

.photo {
	height:180px;
	padding-left: 20px;
}

.photo100 {
	height:100px;
	margin: 10px 20px 20px 20px;
}

img.fright {
	float:right;
	margint-top: -10px;
	margin-left:10px;
	padding-right: 100px;
	width:80px;
	height:80px;
}
/* pc */
@media screen and (min-width: 961px) {
body {
	/*background-color: #00F;*/
}
/*ここにpc用スタイルを記述*/
  a[href^="tel:"]{
    pointer-events: none;
  }
}

 
/* tablet  */
@media screen and (min-width: 481px) and (max-width: 960px) {
/*ここにtablet用スタイルを記述*/
body {
	/*background-color:#F00;*/
}

#header {
	padding: 10px 0px 10px 10px;
	margin:0px;
	height: 160px;
}

#content {
/* 角丸 */
margin-top:0px;
margin-left:15px;
width:90vw;
max-width:100%;
height:500px;;

}

h2{
}

.caption {
	font-size: 80pt;
}

.scrollArea {

}

#navi {
	width: 95vw;
}

#navi li {
	font-size:20px;
}

#copyright {
	font-size:20px;
}

#footer {
	width: 95vw;
}
}

/* smartPhone */
@media screen and (max-width: 480px) {
/*ここにスマホ用スタイルを記述*/
body {
	width: 320px;
	/*background-color:#0F0;*/
}

#header {
	padding: 10px 0px 10px 10px;
	margin:0px;
	height: 160px;
}

.company_title {
	width: 320px;
}

#content {
/* 角丸 */
margin-top:-50px;
margin-left:10px;
width:90vw;
max-width:100%;
height:325px;

}

h2{
	width:80%;
	padding:5px;
	padding-left:10px;
	font-size:14px;
}

.scrollArea {
	width:100%;
}

.scrollArea a:hover, .scrollArea a:active {
}

#navi{
    width: 320px;
    margin-left:10px;
}

#navi li {
	font-size:14px;
	padding-left:5px;
	padding-top:3px;
	height:20px;
}

.about {
	width: 100%
}

.about td {
	margin-left:0px;
	font-size: 12px;
}

#contact table th {
	font-size: 12px;
	padding: 10px;
	width: 90px;
}

#contact table tr td .td{
	width:180px;
	height:20px;
	padding-left:10px;
}
#contact table tr td .td1{
	width:180px;
	height:20px;
	padding-left:10px;
}
#contact table tr td .td2{
	width:180px;
	height:140px;
	margin-top:11px;
	margin-bottom:11px;
	padding-left:10px;
}

img.fright {
	float:right;
	margin-left:10px;
	padding-right: 0px;
	width:70px;
	height:70px;
}

.photo100 {
	height:100px;
	margin: 10px 10px 20px 0px;
}

.video {
	width:120px;
	height:90px;
	margin-top: 10px;
	padding-left: 10px;
}

.scale-img:hover {
	opacity: 1.0;
	transform: none;
	cursor: pointer;
}

}