@charset "utf-8";
@media screen and (min-width:0px){
  /*0px以上で適用する内容*/
}

@media screen and (min-width:300px){
  /*300px以上で適用する内容*/
}

@media screen and (min-width:600px){
  /*600px以上で適用する内容*/
}
body {
	font-size:95%;		/* フォントサイズを95%にする */
	font-family: "メイリオ",sans-serif;	/* フォントの種類をゴシック系にする */
	line-height:1.5;	/* 行の高さを1.5倍にする */
	color:#333333;		/* 文字色を濃い目のグレーにする */
}
div#pagebody {
	width:1260px; margin:0 auto;			/*内容全体をセンタリング*/
	background-color:#ffffff;			/*内容全体の背景色*/
	background-image:url("images/bg_pagebody.png");	/*コンテンツ全体の背景画像*/
	background-repeat:repeat-y;			/*背景画像を縦方向に繰り返す*/
}
img {border:0;} 				/*画像のボーダーを0にする*/

/*============================================
ヘッダ
============================================*/
div#header {
	height:55px;				/*ヘッダ部分の高さ*/
}
div#header h1 {
	padding:0px 0px 0px 30px;		/*見出しの位置調整*/
	font-size:18px;				/*フォントのサイズ*/
	font-family:Arial, Helvetica, sans-serif;	/*フォントの種類*/
}
div#header h1 a {text-decoration:none;} 	/*リンクの下線を無くす*/

.nav_unshown {
  display:none;
}


.logo {
	margin:50px 0px 5px 50px;
	display:inline;			/*リスト項目をインライン表示にする*/
	float:left;			/*リスト項目を右から並べる*/
}
.botton {
	width:auto; height:20px;
}


.top {/*親div*/
  position: relative;/*相対配置*/
  }

.top p {
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
 top: 20%;
  left: 30%;
  -ms-transform: translate(-40%,-60%);
  -webkit-transform: translate(-40%,-60%);
  transform: translate(-40%,-60%);
  margin:0;
  padding:0;

  }

.top img {
  width:1260px; height:auto;	/*トップページのヘッダ画像の表示サイズを指定*/
	margin:5px 40px;		/*マージン*/
}

/*============================================
メインメニュー
============================================*/

ul#menutop {
	width:1260px; height:25px; 	/*メインメニュー部分の幅と高さ*/
    margin:30px 0 50px 0 ;
}
ul#menutop li:not(:last-child){
border-right:2px solid #ddd;
}
#menutop li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline-block;			/*リスト項目をインライン表示にする*/

}
#menutop li a {
	background-color:#ffffff;		/*背景色*/
	color:#a6a6a6;			/*文字色*/
	display:block;			/*リンク部分をブロック表示にする*/
	font-weight:bold;
	font-size:1em;
	width:160px; height:auto;	/*幅と高さ*/
	padding:5px 0px 0px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/

}
#menutop li a:hover {
		background-color:#ffffff;		/*背景色*/
	color:#ff0066;			/*文字色*/
}
#menutop li.current a{
		background-color:#ffffff;		/*背景色*/
	color:#ff0066;			/*文字色*/
}

/*============================================
メインメニュー
============================================*/
ul#menu {
	width:1260px; height:25px; 	/*メインメニュー部分の幅と高さ*/
	margin:80px 0 80px 0 ;
}
ul#menu li:not(:last-child){
border-right:2px solid #ddd;
}
#menu li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline-block;			/*リスト項目をインライン表示にする*/

}
#menu li a {
	background-color:#ffffff;		/*背景色*/
	color:#a6a6a6;			/*文字色*/
	display:block;			/*リンク部分をブロック表示にする*/
	font-weight:bold;
	font-size:1em;
	width:160px; height:20px;	/*幅と高さ*/
	padding:5px 0px 0px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/

}
#menu li a:hover {
		background-color:#ffffff;		/*背景色*/
	color:#ff0066;			/*文字色*/
}
#menu li.current a{
		background-color:#ffffff;		/*背景色*/
	color:#ff0066;			/*文字色*/
}
/*============================================
ヘッダ画像
============================================*/

.infoimg_index {
	width:150px; height:150px;	/*画像の表示サイズを指定*/
	margin:0px 0px 15px 15px;	/*マージン*/
	float:right;			/*画像を右寄せにする*/
}
hr {
	clear:both;			/*フロート配置をクリアする*/
}
/*============================================
インフォメーション（1列カラム）
============================================*/
div#info {
	width:1050px;		/*幅の指定*/
margin-right: auto;
margin-left : auto;
}
h3 {
  position: relative;
  font-size:20px;
  font-weight:bold;
  clear: both;
  padding: 1.5em 0 0.25em 0;
}
h3:first-letter {
  font-size: 2em;
  color: #ff0066;
}
h3:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, #ff0066, #fff2f8);
  background: linear-gradient(to right, #ff0066, #fff2f8);
}

.boxnews {
	width:960px;
	height:20px;
	float:right;
    position: relative;
    margin:30px 0 0 0;
    border: solid 2px #ff68A5;
}
.boxnews .boxnews-title {
    position: absolute;
    display: inline-block;
    top: -20px;
    left: -2px;
    padding: 0 9px;
    height:20px;
    line-height: 20px;
    font-size: 12px;
    background:#ff68A5;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.boxnews p {
    margin:0 0 0 10px;
    font-size:11px;
}
.ribbon13-wrapper {  
  display: block;
  position: relative;
  margin: 15px 55px;
  padding: 10px 0;
  width: 850px;
  background: #ffffea;
  }

.ribbon13 {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 5px 0;
  margin: 0 0 0 -20px;
  width: calc(100% + 20px);
  color:black;
  background: #f1f1f1;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.ribbon13 h2{
  margin: 0;
  padding: 0 30px 0 15px;
  border-top: dashed 1px #f23482;
  border-bottom: dashed 1px #f23482;
  font-size: 20px;
  line-height: 46px;
}

.ribbon13:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #ffffea transparent transparent;
  border-style: solid;
}

.ribbon13:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px #f23482;
}
.ribbonex {
	margin: 20px;
}

.trainingsmile img{
height:333px;
margin:0px;
padding:0;
display:inline-block;
}

.topandlegato{
  float:left;
  margin: 0 20px 10px 0;
}
.topandlegato img{
  margin: 0 20px;
}

.snsbox {
width:750px;
margin:10px auto;
}
.youtube iframe{
  width: 750px;
  margin:10px auto;
}
.youtube p{
font-size:1.5em;
font-weight:bold;
text-align:center;
margin:10px auto ;
}
.insta {
  width: 320px;
  float:left;
  margin:10px 10px 10px 20px;
}
.insta p {
font-size:1.5em;
font-weight:bold;
text-align:center;
}
.sns {
	width:320px; 
	float:right;
	margin: 10px 20px 10px 10px;
}

.sns p {
font-size:1.5em;
font-weight:bold;
text-align:center;
}

.content {
	margin: 10px 10px;
	clear: both;
	height: 150px;
}

.content img {
	width:200px; height:auto;	/*画像の表示サイズを指定*/
	margin:0px 20px 20px 20px;	/*マージン*/
	float:left;			/*画像を右寄せにする*/
}
.content img:hover{
  opacity: 0.6;
  transition-duration: 0.3s;
  
.content p {
    display: table-cell;
    vertical-align: middle; }
    
}

.click{
	display: inline;
	width:250px; height:auto;
	font-size:15px;
	text-align:center;
	color: #ccccc;
    background: #ffffcc;
    border-bottom: solid 6px #f2f4a2;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
	float:right;
	margin: 10px;    

}

.click a {
    margin: 0px; 
    padding: 0;
    text-decoration:none;		/*リンクの下線を無くす*/

}

.sponcer{
	width:auto; height:80px;
	clear:both;
	margin: 5px;
}
.apllybox {
width: 900px;
margin:10px auto;


}

.apply_bn {
  font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  text-align: center;
  padding-top: 40px;
    display:inline-block;
    margin:20px;
}


/* ここから下がボタンのCSS　*/
.apply {
  width: 250px;
  text-align: center;
  font-size: 25px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  padding: 12px 30px;
  border-radius: 4px;
  background-image: linear-gradient(-90deg, #FF006E, #ff8ec7);
  transition: .5s;
  background-size: 200%;
}

.apply:hover {
  background-position: right center;
}



/*============================================
フッタ
============================================*/
div#footer {
	clear:both;			/*回り込みを解除する*/
	height:40px;			/*高さの指定*/
	padding:30px 0px 0px 0px;	/*パディング*/
	font-size:x-small;		/*フォントサイズを小さくする*/
	text-align:center;		/*センタリング*/
}

/*============================================
シェルター
============================================*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_cssslider {
width:280px;
padding-top: 247px; /* 画像の高さ */
position: relative;
margin: 5px auto;
float:left;
}
.cp_cssslider > img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
border-radius: 3px;
box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}
.cp_cssslider input[name='cp_switch'] {
display: none;
}
.cp_cssslider input[name='cp_switch2'] {
display: none;
}
.cp_cssslider input[name='cp_switch3'] {
display: none;
}
.cp_cssslider input[name='cp_switch4'] {
display: none;
}
.cp_cssslider input[name='cp_switch5'] {
display: none;
}
/* サムネイル */
.cp_cssslider label {
margin: 10px 0px 0 0px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
transition: all 0.5s ease;
opacity: 0.6;
border-radius: 2px;
}
.cp_cssslider label:hover {
opacity: 0.9;
}
.cp_cssslider label img {
display: block;
width: 40px;
border-radius: 1px;
}
.cp_cssslider input[name='cp_switch']:checked + label {
border: 1px solid  #ff68A5;
opacity: 1;
}
.cp_cssslider input[name='cp_switch'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch']:checked + label + img {
opacity: 1;
}

.cp_cssslider input[name='cp_switch2']:checked + label {
border: 1px solid  #ff68A5;
opacity: 1;
}
.cp_cssslider input[name='cp_switch2'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch2']:checked + label + img {
opacity: 1;
}
.cp_cssslider input[name='cp_switch3']:checked + label {
border: 1px solid  #ff68A5;
opacity: 1;
}
.cp_cssslider input[name='cp_switch3'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch3']:checked + label + img {
opacity: 1;
}
.cp_cssslider input[name='cp_switch4']:checked + label {
border: 1px solid  #ff68A5;
opacity: 1;
}
.cp_cssslider input[name='cp_switch4'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch4']:checked + label + img {
opacity: 1;
}
.cp_cssslider input[name='cp_switch5']:checked + label {
border: 1px solid  #ff68A5;
opacity: 1;
}
.cp_cssslider input[name='cp_switch5'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch5']:checked + label + img {
opacity: 1;
}
.jireicontainer {
  width: 960px;
  text-align: center;
}
.jireibox {
    display: inline-block;
    text-align: center;
    margin: 5px ;
    box-sizing: border-box;

}
.jireiphoto {
	width: 180px;
}
.jireiphoto:hover{
	opacity:0.6;
}

.jireibox {/*親div*/
  position: relative;/*相対配置*/
  }

.jireibox p {
  position: absolute;/*絶対配置*/
  color: black;/*文字は白に*/
   text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
       font-weight: bold;
 top: 85%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  }
.box28 {
    position: relative;
    margin: 20px auto;
    padding: 25px 10px 7px;
    border: solid 2px #FF0066;
    width:750px;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FF0066;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 10px; 
    padding: 0px ;
}
.box28 img {
float:left;			/*画像を右寄せにする*/
margin: 10px; 
}
.box25{
    width: 200px;
    background: #f8f9c8;
    box-shadow: 0px 0px 0px 5px  #f8f9c8;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
    float:right;
}

.box25 p {
    margin: 0; 
    padding: 0;
}

.toiawasebutton{
	width:960px;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #ff0066;
  border: solid 2px #ff0066;
  border-radius: 3px;
  transition: .4s;
}

.toiawasebutton:hover {
  background: #ff0066;
  color: white;
}
.tanukivideo{
	float:right;
	margin: 10px 140px 0px 0px;
}
	
/*============================================
会員募集
============================================*/
.box30 {
    margin: 20px auto;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
      width: 750px;
}
.box30 .box-title {
    font-size: 1.2em;
    background: #ff0066;
    padding: 0px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
    width: 750px;
}
.box30 p {
    padding: 15px 20px;
    margin: 0;
}
.btn-square-pop {
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  margin: 10px 350px;
  color: #FFF;
  background: #ff0066;/*背景色*/
  border-bottom: solid 2px #f00D7e;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
  font-size:1.6em;
}

.btn-square-pop:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}

img.volpic{
width: 650px;
margin:15px 50px;

}

.furikomimidasi {
width: 700px;
margin: 20px auto;
font-size:1.8em;
background:#FFFCED;
}
.furikomibox {
width: 700px;
margin:10px auto;
padding:10px;
border-left: solid 2px #ff0066;
border-right: solid 2px #ff0066;
border-top: solid 2px #ff0066;
border-bottom: solid 2px #ff0066;
}

.furikomibox p {
line-height:1.2em;
}

.furikomiex {
width:700px;
margin:20px auto;
}

/*============================================
セミナー
============================================*/

.box8 {
	width:750px;
    padding: 0.5em 1em;
    margin: 20px auto;
    color: #232323;
    background: #fde1e2;
    border-left: solid 10px #ff0066;
}

.box8 p {
    margin: 0; 
    padding: 0;
}
.detailseminar {
	display: inline-block;
  padding: 0.25em 0.5em ;
  text-decoration: none;
  color: #FFF;
  background: #ffffff;/*色*/
  border-radius: 4px;/*角の丸み*/
  font-weight: bold;
  border: solid 2px #ffffff;/*線色*/

}

.detailseminar:active {
  /*押したとき*/
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.box18{
	width:750px;
    margin:20px auto;
    position: relative;
    padding: 0.25em 1em;
    border: solid 2px #ff0066;
    border-radius: 3px 0 3px 0;
}
.box18:before,.box18:after
{
    content: '';
    position: absolute;
    width:10px;
    height: 10px;
    border: solid 2px #ff0066;
    border-radius: 50%;
}
.box18:after {
    top:-12px;
    left:-12px;
}
.box18:before {
    bottom:-12px;
    right:-12px;
}
.box18 p {
    margin: 0; 
    padding: 0;
}
.seminarex {
	width:750px;
	font-size:0.8em;
	margin: 20px auto;
}
.attention {
	font-size:0.8em;
}

/*============================================
レガートプラスについて
============================================*/
.boxriji{
	width:750px;
    margin:20px auto;
    position: relative;
    padding: 0.25em 1em;
    border: solid 2px #ff0066;
    border-radius: 3px 0 3px 0;
}
.boxriji:before,.boxriji:after
{
    content: '';
    position: absolute;
    width:10px;
    height: 10px;
    border: solid 2px #ff0066;
    border-radius: 50%;
}
.boxriji:after {
    top:-12px;
    left:-12px;
}
.boxriji:before {
    bottom:-12px;
    right:-12px;
}
.boxriji p {
	font-size:0.8em;
    margin: 350px 0 0 0 ; 
    padding: 0;
}


.boxriji img {
float:left;			/*画像を右寄せにする*/
margin: 10px; 
width:250px;
}



.box14{
	width:350px;
	float:right;
	margin:25px;
    background: #d6ebff;
    box-shadow: 0px 0px 0px 10px #d6ebff;
    border: dashed 2px white;
}
.box14 p {
    margin: 0; 
    padding: 0;
}
.boxsengen{
	width:750px;
    margin:20px auto;
    position: relative;
    padding: 0.25em 1em;
    border: solid 2px #ff0066;
    border-radius: 3px 0 3px 0;
}
.boxsengen:before,.boxsengen:after
{
    content: '';
    position: absolute;
    width:10px;
    height: 10px;
    border: solid 2px #ff0066;
    border-radius: 50%;
}
.boxsengen:after {
    top:-12px;
    left:-12px;
}
.boxsengen:before {
    bottom:-12px;
    right:-12px;
}
.boxsengen p {
	font-size:1em;
    margin: 20px;
}


.boxsengen img {
float:right;			/*画像を右寄せにする*/
margin: 10px; 
width:250px;
}

/*============================================
問い合わせ
============================================*/


div.boxtoiawase {
	width:750px;
    margin: 20px auto;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

div.boxtoiawase .toiawase-title {
    font-size: 0.8em;
    background: #ff0066;
    padding: 1px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
    
}
.boxtoiawase p {
    padding: 15px 20px 5px 20px;
    margin: 0;
}
table#form {
  width: 750px;
}
table#form th {
  width: 200px;
  padding:10px;
  text-align:right;
}
table#form td {
  width: 550px;
  padding:5px;
}

.contactic2{
	margin: 0px 0px;
	text-align:center;
	margin: 0px 0px 0px 150px;
}

.contactat {
	font-size:10px;
	font-family: メイリオ, sans-serif;    /*フォントの種類*/
	margin:10px;
	color:#ED1A3D;
}
.formex {
	font-size: 14px;
	line-height:16px;
}

.cgibox {
	width:600px;
	margin:10px 10px;
}
.btn {
	text-align:center;
}
.thankyou {
	width:550px;
	margin:50px;
	font-size:25px;
	text-align:left;
}
/*非表示をコメントアウトしています*/



.ac-label{
    background: #454545;
    color: #fff;
    display: block;
    margin: 0 auto;
    width: 500px;
}


.ac-content{
    border: 1px solid #454545;
    height:0;
    width: 500px;
    margin: 0 auto;
    transition: .5s;
    visibility: hidden;
}

.ac-check:checked + .ac-label + .ac-content{
    height: 100px;
        width: 500px;
   margin: 0 auto;
    visibility: visible;
}

.ac-check-member:checked + .ac-label + .ac-content{
    height: 100px;
        width: 500px;
    margin: 0 auto;
    visibility: visible;
}
.ac-check-member{
	margin:-10px 0 0 100px;
}
.thankyouimg{
	width:550px;
	margin: 20px 200px;
	
}
/*============================================
セミナースケジュール
============================================*/


.comparison-table{
width:750px;
  background:#f8f9fb;  
margin:0 auto;
  padding:0em 0em;
word-break: break-all;
}
.comparison-table table{
  border-collapse: separate;
  border-spacing:5px 10px;
  border:none;
  margin-bottom: 0;
}
.comparison-table table th,.comparison-table table td {
width:750px;
}
.comparison-table table thead th{
background : #ffffd2;
  text-align: center;
  color:black;
  border:none;
  border-radius:30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding: 0.4em 0.4em;
  font-size: 14px;
  line-height: 1.3;  
}
.comparison-table table tbody th{
 background : #d1d1d1;
  border:none;
  color:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  padding: 0.5em 0.5em;
  line-height: 1.5;
  border-radius: 3px;
  font-size: 14px;
  
}
.comparison-table table tbody td{
  background:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  border-radius:3px;
  border:none;
  padding:0.3em;
  color: #555;
  line-height: 1.8;
  vertical-align:top;
margin:0;
}
.comparison-table table tbody td p{
  margin:0;
  padding:0;
  
  font-size: 13px;
}

.underpro{
  background: linear-gradient(transparent  70%, #f47166  70%);
}
.underzagaku{
  background: linear-gradient(transparent  70%, #33cc33  70%);
}

.comparison-table table tbody td promark{
  margin:0;
  padding:0;
  margin-bottom:1em;
  font-size: 13px;
 background-color: orange 
}

.comparison-table table tbody td .td-h{
  text-align:left;
 font-family:arial black;
  font-weight:bold;
  color:#808080;
  font-size: 15px;
  margin-bottom:0;
margin-right:1px
}

.comparison-table table tbody td .cla{
 font-family:arial black;
  font-weight:bold;
  font-size: 15px;
  margin-bottom:2px;
padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #00a95f;/*左線（実線 太さ 色）*/
}
.comparison-table table tbody td .classname{
 font-family:arial black;
  font-weight:bold;
  font-size: 12px;
  margin-bottom:2px;
padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #00a95f;/*左線（実線 太さ 色）*/
}
.comparison-table table tbody td .pro{
 font-family:arial black;
  font-weight:bold;
  font-size: 15px;
  margin-bottom:2px;
padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #ff3333;/*左線（実線 太さ 色）*/
}
.comparison-table table tbody td .proclassname{
 font-family:arial black;
  font-weight:bold;
  font-size: 12px;
  margin-bottom:2px;
padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #ff3333;/*左線（実線 太さ 色）*/
}
.comparison-table-wrap{
  width:100%;
  max-width:750px;
  margin: 0 auto;

}
.comparison-table-title{
  width:100%;
  max-width:750px;
  background : #ffffd2;
  text-align: center;
   color: black;
   font-weight: bold;
   margin:20px 0 0 0;
   padding: 1em 0;
   letter-spacing: 1px;
  font-size:14px;
}
@media screen and (max-width: 768px){
  .comparison-table{
    padding:7px;
  }
  .comparison-table table{
    border-spacing:3px 10px;
  }
  .comparison-table table thead th{
    position: -webkit-sticky;
    position: sticky;
    top:0px;
    z-index:100;
  }