@charset "utf-8";

/*=======================================================

■■ CSS style ■■
---
■設定メニュー
* その他設定
* テーブル設定
* ボタン設定
* タイトル設定
* タブ設定
* フォント設定
* 配置、レイアウト設定
---
■基本カラー
* aタグリンク           #29667C
* background背景    #FF7900
---
■CSS設定メモ
E > F　（子要素にのみ適用）
E + F　（隣接している要素に適用）
E ~ F　（後にある要素に適用【CSS3】）
:first-child　（最初に現れる要素にだけ適用
:nth-of-type(n)　（n番目に現れる要素に適用【CSS3】）
:not　（該当しない場合に適用【CSS3】）
:checked　（チェックされているユーザーインターフェース要素に適用【CSS3】）
E[foo]　（特定の属性を持つ要素に適用）
E[foo="bar"]　（特定の属性(値)を持つ要素に適用する）
E[foo^="bar"]　（属性の値が指定した文字で始まる場合に適用する【CSS3】）
=======================================================*/

/*

# CSS other
---
その他設定

*/

/* 透過設定 */
.toimg a:hover img,
.tobg a:hover{
  filter: alpha(opacity=75);
  -moz-opacity:0.75;
  opacity:0.75;
}
/* 画像可変 */
img.resize{
  max-width: 100%;
  height: auto;
  width /***/:auto;
}

/* リンク アイコン */
.cursor a{
  display: block;
  padding-left: 18px;
}
.cursor a:before{
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-left:-1.3em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  content: '\e835';
  color: #29667C;
  margin-right: 3px;
  text-decoration:none !important;
}

/* スマホで電話番号タップ */
.tel-link a{
  text-decoration: none;
}

/* レスポンシブ時に表示の切り替え(レスポンシブの関係で上に記載) */
.pcOn{ display:block; /* PC表示 */}
.spOn{ display:none; /* スマホ非表示 */}

@media screen and (max-width: 640px) {
.pcOn{ display:none; /* PC非表示 */}
.spOn{ display:block; /* スマホ表示 */}
}/* --640px END-- */


/*

# CSS input
---
フォーム設定

*/

/* ## input　textarea ===============================
テキストフォーム設定 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea {
  background-color: #FFF;
  border: 1px solid #CCC;
  box-sizing: border-box;
  padding: 5px ;
  font-size: 1rem;
  border-radius: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -webkit-appearance: none;
  margin: 2px 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"]{
  line-height: 1.2;
}
label input[type="radio"] ,
label input[type="checkbox"]{
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  margin-right: 0.2em;
  margin: 5px 3px 5px 2px;
  padding: 0;
  vertical-align: middle;
}

/* ## error ===============================
エラー表示設定 */

.error_txt{
  display: inline-block;
  background-color: #D00;
  border-radius: 15px;
  padding: 2px 15px;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  position: relative;
  margin-bottom: 10px;
}
.error_txt:after {
  top: 100%;
  left: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(221, 0, 0, 0);
  border-top-color: #D00;
  border-width: 5px;
  margin-left: -5px;
}

/* ## pulldown ===============================
プルダウン設定 */

.select-wrap_form_nmal{
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  display:inline-block;
  padding: 6px 5px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.select-wrap_form{
  position:relative;
  overflow:hidden;
  display:inline-block;
  vertical-align: bottom;
  border-radius: 4px;
  border: 1px solid #BBB;
  background-color:#FFF;
  background: linear-gradient(#FFF, #F6F6F6);
  color:#333;
}
.select-wrap_form select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  appearance:none;
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  width:-webkit-calc(100% + 5em);
  margin:0;
  padding: 5px;
  background:transparent;
  border:0;
  outline:none;
  font-size: 1.06rem;
  line-height:1.5;
  padding-right: 35px;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}
.select-wrap_form select::-ms-expand {
  display: none;
}
.entypo-down-open-mini:before{
  font-family: "fontello";
  content: '\e806';
  position:absolute;
  z-index:1;
  top:50%;
  right:.45rem;
  margin-top:-.7rem;
  font-size:16px;
  font-size:1.45rem;
  line-height:1;
  color:#999;
}
.entypo-down-open-mini:after{
  position:absolute;
  content: "";
  right: 1.75em;
  top:50%;
  margin-top:-.7rem;
  width: 1px;
  height: 20px;
  background-color: #CCC;
}

/* ## radio checkbox ===============================
ラジオボタン、チェックリスト設定 */

ul.spli li{ margin-bottom: 5px; list-style-type: none;}
ul.spli li:last-child{ margin-bottom: 0;}
ul.spliin li{display: inline-block; list-style-type: none;}
@media screen and (max-width: 640px) {
ul.spliin li{display: inline-block; margin-bottom: 5px;}
ul.spliin li:last-child{ margin-bottom: 0;}
}/* --640px END-- */

.inp_sty input[type=radio],
.inp_sty input[type=checkbox] {
  display: inline-block;
  margin-right: 6px;
}
.inp_sty input[type=radio] + label,
.inp_sty input[type=checkbox] + label {
  position: relative;
  display: inline-block;
  margin-right: 12px;
  cursor: pointer;
}
.inp_sty input[type=radio],
.inp_sty input[type=checkbox] {
  display: none;
  margin: 0;
}
.inp_sty input[type=radio] + label,
.inp_sty input[type=checkbox] + label {
  padding: 0 0 0 24px;
}
.inp_sty input[type=radio] + label::before,
.inp_sty input[type=checkbox] + label::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: #FFF;
}
.inp_sty input[type=radio] + label::before {
  border: 2px solid #ccc;
  border-radius: 30px;
}
.inp_sty input[type=checkbox] + label::before {
  border: 2px solid #ccc;
  border-radius: 5px;
}
.inp_sty input[type=radio]:checked + label::before,
.inp_sty input[type=checkbox]:checked + label::before {
  border: 2px solid #FF7900;
}
.inp_sty input[type=radio]:checked + label,
.inp_sty input[type=checkbox]:checked + label {
  color: #FF7900;
}
.inp_sty input[type=radio]:checked + label::after,
.inp_sty input[type=checkbox]:checked + label::after {
  content: "";
  position: absolute;
  top: 11px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
}
.inp_sty input[type=radio]:checked + label::after {
  left: 5px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #FF7900;
  border-radius: 8px;
}
.inp_sty input[type=checkbox]:checked + label::after {
  left: 3px;
  width: 16px;
  height: 8px;
  margin-top: -8px;
  border-left: 3px solid #FF7900;
  border-bottom: 3px solid #FF7900;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* hover */
button:hover,
input:hover {
  filter: alpha(opacity=75);
  -moz-opacity:0.75;
  opacity:0.75;
}

/*

# CSS table
---
テーブル設定

*/

/* ## table_sty ===============================
レイアウト設定 */

.table_sty{
  width: 100%;
  border: 1px solid #CCC;
}
.table_sty th,
.table_sty td{
  padding: 5px 10px;
  border: 1px solid #CCC;
  text-align: left;
}
.table_sty th{
  background-color: #F5F5F5;
}

.table_sty_nores{
  width: 100%;
  border-top: 1px solid #CCC;
}
.table_sty_nores th,
.table_sty_nores td{
  padding: 5px 10px;
  border-bottom: 1px solid #CCC;
  text-align: left;
}
.table_sty_nores th{
  border-right: 1px solid #CCC;
}

@media screen and (max-width: 640px) {
.table_sty ,
.table_sty tbody,
.table_sty tr,
.table_sty th,
.table_sty td{
  display: block;
  width: 100% !important;
  max-width: inherit;
}
.table_sty{
  border: 0;
  border-top: 1px solid #CCC;
}
.table_sty th,
.table_sty td{
  border: 1px solid #CCC;
  border-top: 0;
}
}/* --640px END-- */


/* ## width ===============================
横幅設定 */

.w100p{ width: 100%;}
.w80p{ width: 80%;}
.w70p{ width: 70%;}
.w60p{ width: 60%;}
.w50p{ width: 50%;}
.w40p{ width: 40%;}
.w35p{ width: 35%;}
.w30p{ width: 30%;}
.w25p{ width: 25%;}
.w20p{ width: 20%;}
.w15p{ width: 15%;}
.w10p{ width: 10%;}
.w5p{ width: 5%;}

.w250px{ width: 250px !important;}
.w200px{ width: 200px !important;}
.w190px{ width: 190px !important;}
.w180px{ width: 180px !important;}
.w170px{ width: 170px !important;}
.w160px{ width: 160px !important;}
.w150px{ width: 150px !important;}
.w140px{ width: 140px !important;}
.w130px{ width: 130px !important;}
.w120px{ width: 120px !important;}
.w110px{ width: 110px !important;}
.w100px{ width: 100px !important;}
.w90px{ width: 90px !important;}
.w80px{ width: 80px !important;}
.w70px{ width: 70px !important;}
.w60px{ width: 60px !important;}
.w50px{ width: 50px !important;}

@media screen and (max-width: 1240px) {
.w1240px{ width: 1240px !important;}
}
@media screen and (max-width: 960px) {
.w960px{ width: 960px !important;}
}
@media screen and (max-width: 800px) {
.w800px{ width: 800px !important;}
}
@media screen and (max-width: 768px) {
.w768px{ width: 768px !important;}
}
@media screen and (max-width: 736px) {
.w736px{ width: 736px !important;}
}
@media screen and (max-width: 667px) {
.w667px{ width: 667px !important;}
}

@media screen and (max-width: 500px) {
.w60p{ width: 100%;}
.w70p{ width: 100%;}
.w80p{ width: 100%;}
.w90p{ width: 100%;}
}/* --500px END-- */

/*

# CSS button
---
ボタン設定
a,buttonのみ使用可
*/

/* ## button ===============================
ボタン基本設定 */

a[class^="btn"],
button[class^="btn"]{
  text-align:center;
  display:block;
  font-weight:bold;
  text-decoration: none;
  position:relative;
  padding: 8px 20px 8px 20px;
  zoom:1;
  line-height: 1.2;
  font-size: 16px;
  margin: 0;
  border-radius: 5px;
}

.box_default{ border-radius: 0;}
.box_radius{ border-radius: 5px;}
.box_round{ border-radius: 2em;}
.box_circle{ border-radius: 50%;}


/* btnArea使用時のみ横幅固定 */
.btnArea a[class^="btn"],
.btnArea button[class^="btn"]{
  width:240px;
  padding:0;
  margin:0 auto;
  height:55px;
  line-height:55px;
}
.btnArea button[class^="btn"]{
  height:57px;
  line-height:57px;
}


/* ## style ===============================
ボタンスタイル設定 */

/* 標準 */
.btn01,.btn01:hover{
  color:#FFFFFF;
  border:1px solid #FF7900;
  background:#FF7900;
  background: linear-gradient(#FF9433, #FF7900);
}

/* 標準反転 */
.btn01_2,.btn01_2:hover{
  color:#FF7900;
  border:1px solid #FF7900;
  background:#FFF;
}

/* 標準2 */
.btn02,.btn02:hover{
  color:#FFFFFF;
  border:1px solid #FF7900;
  background: linear-gradient(#FF9433, #FF7900);
}

/* グレーボタン */
.btnGr,.btnGr:hover{
  color:#FFFFFF;
  border:1px solid #888888;
  background:#888888;
  background: linear-gradient(#AAAAAA, #888888);
}

/* 白ボタン */
.btnWh,.btnWh:hover{
  color:#666666;
  border:1px solid #CFCFCF;
  background-color:#FFF;
  background:#FFF;
  background: linear-gradient(#FFF, #F6F6F6);
}

/* 戻るボタン */
.btnBack,.btnBack:hover{
  color:#FFFFFF;
  border:1px solid #888888;
  background:#888888;
  background: linear-gradient(#AAAAAA, #888888);
}

/* ## style icon ===============================
ボタンアイコン設定 */
a[class^="btn"]:before,
button[class^="btn"]:before{
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  content: '\e804';
  font-size: 20px;
  position:absolute;
  right:8px;
  top:50%;
  margin:-0.5em 0 0 0;
}
.btnWh:before{ color: #999;}
a.btnBack:before,
button.btnBack:before{
  content:'\e803';
  left:8px;
  right: inherit;}

/* iconなしの場合使用 */
.btnico_off:before{ display: none;}

/* ## style hover ===============================
ボタンロールオーバー設定 */
a[class^="btn"]:hover,
button[class^="btn"]:hover{
  text-decoration:none;
  filter: alpha(opacity=75);
  -moz-opacity:0.75;
  opacity:0.75;
}

/* ## style list ===============================
ボタン2つ並び設定 */
ul.btnArea {
  padding-top:20px;
  text-align:center;
  letter-spacing: -.40em;
}
ul.btnArea li{
  vertical-align:top;
  display: inline-block;
  letter-spacing: normal;
  margin:0 10px;
}

/* ## style h2Line ===============================
ボタン文言2つ並び設定 */
.btnArea .h2Line,
.btnArea button.h2Line{
  height: 80px;
  line-height:1;
}
.btnArea .h2Line strong{
  display: block;
  padding: 0 25px 0 15px;
  font-size: 16px;
  font-style: normal;
}
.btnArea .h2Line span{
  border-top:1px dotted #FFF;
  font-weight:normal;
  display:block;
  font-size:12px;
  padding-top:8px;
  margin:8px auto 0;
}

@media screen and (max-width: 560px) {
.btnArea a[class^="btn"],
.btnArea button[class^="btn"]{
  display: block;
  width:85%;
}
ul.btnArea li{
  display: block;
  margin:0 0 10px;
}
ul.btnArea li:last-child{
  margin-bottom: 0;
}
}/* --500px END-- */

/*

# CSS TITLE
---
タイトル設定

*/

.tit_sty{
  color:#FF7900;
  padding:5px 0;
  border-bottom:2px solid #CCCCCC;
  margin-bottom:20px;
  position:relative;
}
.tit_sty span{
  font-size: 1.45rem;
}
.tit_sty a{
  color:#FF7900;
  text-decoration:none;
}
.tit_sty a:hover{
  text-decoration:underline;
}
.tit_sty .link{
  position:absolute;
  right:0;
  top:1em;
  font-size: 13px;
}
.tit_sty .link a{
  color: #333333;
  margin-left: 10px;
}
.tit_sty .link a:before{
  color: #FF7900;
  text-decoration: none;
}

.tit_sty02{
  padding-bottom:10px;
  border-bottom:1px solid #CCCCCC;
  margin-bottom:15px;
}
.tit_sty02 span{
  padding-left:8px;
  font-size:1.3rem;
  line-height:1;
  border-left:5px solid #FF7900;
}
.tit_sty02 a{
  color:#666;
  text-decoration:none;
}
.tit_sty02 a:hover{
  text-decoration:underline;
}

.tit_sty03{
  padding:8px 7px 8px;
  color:#333333;
  text-align: left;
  font-weight: bold;
  border: 1px solid #CCCCCC;
  margin-bottom:15px;
  background:#FFF;
  background: linear-gradient(#FFF, #F3F3F3);
}
.tit_sty03 span{
  border-left: 4px solid #FF7900;
  padding-left: 8px;
  line-height: 1;
}
.tit_sty04{
  padding:6px 10px 5px;
  font-size:1.08rem;
  color:#666;
  border:1px solid #EEE;
  background-color:#F3F3F3;
  margin-bottom:15px;
}
.tit_sty05{
  padding:6px 10px 5px;
  font-size:1.08rem;
  color:#FF7900;
  background-color:#EAF6FD;
  margin-bottom:15px;
}

@media screen and (max-width: 640px) {
.tit_sty{
  padding:0 0 5px;
  margin:0 10px 15px;
}
.innerWrap .tit_sty{
  margin:0 0 15px;
}
.tit_sty span{
  font-size:16px;
}
.tit_sty02{
  margin-bottom:10px;
}
.tit_sty02 span{
  font-size:14px;
}
.tit_sty03,
.tit_sty04,
.tit_sty05{
  margin-bottom:10px;
  font-size:13px;
}
}/* --640px END-- */

/*

# CSS FONT LAYOUT
---
フォント設定

*/

/* ## color ===============================
テキストカラー設定 */

.tRed,.red  {color: #D90000;}
.tGreen  {color: #00FF00;}
.tBlue   {color: #2D2886;}
.tLiBlue  {color: #0066CC;}
.tBlack  {color: #000000;}
.tWhite  {color: #FFFFFF;}
.tOrange {color: #FF9900;}
.tYellow {color: #FFFF00;}
.tGray   {color: #666666;}
.tPink   {color: #DE0A4E;}

/* ## size rem ===============================
テキストサイズ設定 */

.fnt10{ font-size:0.71428571rem;}
.fnt11{ font-size:0.785714281rem;}
.fnt12{ font-size:0.857142852rem;}
.fnt13{ font-size:0.928571423rem;}
.fnt14{ font-size:1rem;}
.fnt15{ font-size:1.071428565rem;}
.fnt16{ font-size:1.142857136rem;}
.fnt17{ font-size:1.214285707rem;}
.fnt18{ font-size:1.285714278rem;}
.fnt19{ font-size:1.357142849rem;}
.fnt20{ font-size:1.42857142rem;}
.fnt21{ font-size:1.499999991rem;}
.fnt22{ font-size:1.571428562rem;}
.fnt23{ font-size:1.642857133rem;}
.fnt24{ font-size:1.714285704rem;}
.fnt25{ font-size:1.785714275rem;}
.fnt26{ font-size:1.857142846rem;}
.fnt27{ font-size:1.928571417rem;}
.fnt28{ font-size:1.999999988rem;}
.fnt29{ font-size:2.071428559rem;}
.fnt30{ font-size:2.14285713rem;}
.fnt35{ font-size:2.499999985rem;}
.fnt40{ font-size:2.85714284rem;}

.fwn{ font-weight: normal;}
.fwb{ font-weight: bold;}

/* ## background ===============================
背景設定 */

.bgWh{ background-color:#FFF;}
.bgBk{ background-color:#000;}
.bgGr{ background-color:#EEE;}


/*

# CSS OHTER LAYOUT
---
配置、レイアウト設定

*/

/* ## 2～8カラム ===============================
横並びボックス設定 */
.area8list,
.area7list,
.area6list,
.area5list,
.area4list,
.area3list,
.area2list{
  overflow:hidden;
  _zoom:1;}
.area8list li,
.area7list li,
.area6list li,
.area5list li,
.area4list li,
.area3list li,
.area2list li{
  list-style-type: none;
  float:left;}

/* -- item8list link nav -------------*/
.area8list li{
  width:11.3%;
  margin-left:1.36%;}
/* -- item7list link nav -------------*/
.area7list li{
  width:13%;
  margin-left:1.5%;}
/* -- item6list link nav -------------*/
.area6list li{
  width:15.5%;
  margin-left:1.4%;}
/* -- item5list link nav -------------*/
.area5list li{
  width:18.5%;
  margin-left:1.85%;}
/* -- item4list link nav -------------*/
.area4list li{
  width:23%;
  margin-left:2.66%;}
/* -- item3list link nav -------------*/
.area3list li{
  width:31.5%;
  margin-left:2.7%;}
/* -- item2list link nav -------------*/
.area2list li{
  width: 48.9%;
  margin-left: 2.2%;}

.area8list li:nth-child(8n+1),
.area7list li:nth-child(7n+1),
.area6list li:nth-child(6n+1),
.area5list li:nth-child(5n+1),
.area4list li:nth-child(4n+1),
.area3list li:nth-child(3n+1),
.area2list li:nth-child(2n+1){
  clear:both;
  margin-left:0 !important;}

@media screen and (max-width:800px){
.md_area3list li{
  width:32%;
  clear: inherit !important;
  margin-left: 2% !important;
}
.md_area3list li:nth-child(3n+1){
  clear:both !important;
  margin-left:0 !important;
}
.md_area2list li{
  width: 48.3%;
  clear: inherit !important;
  margin-left: 2.4% !important;
}
.md_area2list li:nth-child(2n+1){
  clear:both !important;
  margin-left:0 !important;
}
.md_arealist li{
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
}
}/* --800px END-- */
@media screen and (max-width: 640px) {
.sm_area2list li,
.md_area3list li:nth-child(3n+1){
  width: 48.3%;
  clear: inherit !important;
  margin-left: 2.4% !important;
}
.sm_area2list li:nth-child(2n+1){
  clear:both !important;
  margin-left:0 !important;
}
.sm_arealistsm_arealist li{
  float: none !important;
  width: auto !important;
  margin-left: 0 !important;
}
}/* --640px END-- */

/* -- 高さ揃え -------------------*/
.area_he_list{
  display:-webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap:wrap;
  flex-wrap: wrap;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  overflow: hidden;
}
.area_he_list li{
  float: none !important;
}

/* ## list ===============================
list設定 */

.list_nosty li{
  list-style-type: none;
  margin-left: 0;
}
.list_disc li{
  list-style-type: disc;
  margin-left: 1.3em;
}
.list_circle li{
  list-style-type: circle;
  margin-left: 1.3em;
}
.list_square li{
  list-style-type: square;
  margin-left: 1.3em;
}
.list_decimal li{
  list-style-type: decimal;
  margin-left: 1.5em;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.list_decimal li{
  list-style-type: decimal;
  margin-left: 1.8em;
}
}

/* ## レイアウト ===============================
box layout設定 */

.box_sty{
  border: 1px solid #CCC;
  padding: 10px;
  overflow: hidden;
  background-color: #F5F5F5;
}
.box_sty02{
  border: 1px solid #CCC;
  padding: 10px;
  overflow: hidden;
  background-color: #FFF;
}
.box_sty02_b{
  border: 2px solid #CCC;
  padding: 10px;
  overflow: hidden;
  font-weight: bold;
  background-color: #FFF;
}
.box_sty_red{
  border: 1px solid #FC0000;
  color: #FC0000;
  padding: 10px;
  overflow: hidden;
}
.box_sty_red_b{
  border: 2px solid #FC0000;
  color: #FC0000;
  padding: 10px;
  overflow: hidden;
  font-weight: bold;
}
.box_sty_di{
  display: inline;
  vertical-align: middle;
}
.box_sty_dib{
  display: inline-block;
  vertical-align: middle;
}
.box_sty_db{
  display: block;
}
.box_sty_table{
  width: 100%;
  display: table;
  table-layout: fixed;
  overflow: hidden;
}
.box_sty_table .td{
  width: auto;
  display: table-cell;
  vertical-align: middle;
  word-wrap:break-word;
}
// 角丸
.box_sty_or_f {
  position: relative;
  background: #EEE;
  border: 1px solid #EEE;
  padding: 10px;
  text-align: center;
  margin-bottom: 15px;
  border-radius: 6px;
}
.box_sty_or_f:after, .box_sty_or_f:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.box_sty_or_f:after {
  border-top-color: #EEE;
  border-width: 10px;
  margin-left: -10px;
}
.box_sty_or_f:before {
  border-top-color: #EEE;
  border-width: 11px;
  margin-left: -11px;
}


/* ## placement ===============================
位置調整設定 */
.txtL { text-align: left !important;}
.txtC { text-align: center !important;}
.txtR { text-align: right !important;}
.txtTT{ vertical-align: top;}
.txtTC{ vertical-align: middle;}
.txtTB{ vertical-align: bottom;}
.floatL { float: left;}
.floatR { float: right;}
.imgL { float:left; margin:0 15px 15px 0;}
.imgR { float:right; margin:0 0 15px 15px;}
.txtoh{ overflow: hidden;}
.txtcb{ clear: both;}


/* ## margin ===============================
スペース設定 */
.m0{margin:0 !important}      /* margin 0px を指定するクラス */
.mt0{margin-top:0 !important}   /* margin-top0px を指定するクラス */
.mr0{margin-right:0 !important}   /* margin-right0px を指定するクラス*/
.mb0{margin-bottom:0 !important}  /* margin-bottom0px を指定するクラス*/
.ml0{margin-left:0 !important}    /* margin-left0px を指定するクラス*/

.m5{margin:5px !important}
.mt5{margin-top:5px !important}
.mr5{margin-right:5px !important}
.mb5{margin-bottom:5px !important}
.ml5{margin-left:5px !important}

.m10{margin:10px !important}
.mt10{margin-top:10px !important}
.mr10{margin-right:10px !important}
.mb10{margin-bottom:10px !important}
.ml10{margin-left:10px !important}

.m15{margin:15px !important}
.mt15{margin-top:15px !important}
.mr15{margin-right:15px !important}
.mb15{margin-bottom:15px !important}
.ml15{margin-left:15px !important}

.m20{margin:20px !important}
.mt20{margin-top:20px !important}
.mr20{margin-right:20px !important}
.mb20{margin-bottom:20px !important}
.ml20{margin-left:20px !important}

.m25{margin:25px !important}
.mt25{margin-top:25px !important}
.mr25{margin-right:25px !important}
.mb25{margin-bottom:25px !important}
.ml25{margin-left:25px !important}

.m30{margin:30px !important}
.mt30{margin-top:30px !important}
.mr30{margin-right:30px !important}
.mb30{margin-bottom:30px !important}
.ml30{margin-left:30px !important}

.m35{margin:35px !important}
.mt35{margin-top:35px !important}
.mr35{margin-right:35px !important}
.mb35{margin-bottom:35px !important}
.ml35{margin-left:35px !important}

.m40{margin:40px !important}
.mt40{margin-top:40px !important}
.mr40{margin-right:40px !important}
.mb40{margin-bottom:40px !important}
.ml40{margin-left:40px !important}

.m45{margin:45px !important}
.mt45{margin-top:45px !important}
.mr45{margin-right:45px !important}
.mb45{margin-bottom:45px !important}
.ml45{margin-left:45px !important}

.m50{margin:50px !important}
.mt50{margin-top:50px !important}
.mr50{margin-right:50px !important}
.mb50{margin-bottom:50px !important}
.ml50{margin-left:50px !important}

.m55{margin:55px !important}
.mt55{margin-top:55px !important}
.mr55{margin-right:55px !important}
.mb55{margin-bottom:55px !important}

.ml55{margin-left:55px !important}
.m60{margin:60px !important}
.mt60{margin-top:60px !important}
.mr60{margin-right:60px !important}
.mb60{margin-bottom:60px !important}
.ml60{margin-left:60px !important}

.m65{margin:65px !important}
.mt65{margin-top:65px !important}
.mr65{margin-right:65px !important}
.mb65{margin-bottom:65px !important}
.ml65{margin-left:65px !important}

.m70{margin:70px !important}
.mr70{margin-right:70px !important}
.mb70{margin-bottom:70px !important}
.ml70{margin-left:70px !important}

.m75{margin:75px !important}
.mt75{margin-top:75px !important}
.mr75{margin-right:75px !important}
.mb75{margin-bottom:75px !important}
.ml75{margin-left:75px !important}

.m80{margin:80px !important}
.mt80{margin-top:80px !important}
.mr80{margin-right:80px !important}
.mb80{margin-bottom:80px !important}
.ml80{margin-left:80px !important}

/* ## padding ===============================
スペース設定 */
.p0{padding:0 !important}     /* padding-0px を指定するクラス */
.pt0{padding-top:0 !important}    /* padding-top0px を指定するクラス */
.pr0{padding-right:0 !important}  /* padding-right0px を指定するクラス */
.pb0{padding-bottom:0 !important} /* padding-bottom0px を指定するクラス */
.pl0{padding-left:0 !important}   /* padding-left0px を指定するクラス */

.p5{padding:5px !important}
.pt5{padding-top:5px !important}
.pr5{padding-right:5px !important}
.pb5{padding-bottom:5px !important}
.pl5{padding-left:5px !important}

.p10{padding:10px !important}
.pt10{padding-top:10px !important}
.pr10{padding-right:10px !important}
.pb10{padding-bottom:10px !important}
.pl10{padding-left:10px !important}

.p15{padding: 15px !important;}
.p20{padding: 20px !important;}
.p25{padding: 25px !important;}


/*------------------------------------------ End */