/*ユーティリティクラス*/

/* margin bottom */
.mb0  { margin-bottom:0; }
.mb5  { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb15 { margin-bottom:15px; }
.mb20 { margin-bottom:20px; }
.mb30 { margin-bottom:30px; }
.mb40 { margin-bottom:40px; }
.mb50 { margin-bottom:50px; }
.mb60 { margin-bottom:60px; }
.mb70 { margin-bottom:70px; }
.mb80 { margin-bottom:80px; }
.mb90 { margin-bottom:90px; }
.mb100 { margin-bottom:100px; }
.mb110 { margin-bottom:110px; }
.mb120 { margin-bottom:120px; }
.mb130 { margin-bottom:130px; }


/* padding */
.p0  { padding:0; }
.p5  { padding:5px; }
.p10 { padding:10px; }
.p20 { padding:20px; }
.p30 { padding:30px; }
.p40 { padding:40px; }

/* padding directions */
.pt10 { padding-top:10px; }
.pr10 { padding-right:10px; }
.pb10 { padding-bottom:10px; }
.pl10 { padding-left:10px; }

/*background color*/
.bg-white  { background-color:#fff; }
.bg-black  { background-color:#000; }
.bg-gray   { background-color:#f4f4f4; }
.bg-gray-f0 { background-color:#f0f0f0; }
.bg-gray-f7 { background-color:#f7f7f7; }
.bg-gray-f9 { background-color:#f9f9f9; }
.bg-light  { background-color:#fafafa; }
.bg-dark   { background-color:#222; }
.bg-blue-1 { background-color: #f6faff; }
.bg-blue-2 { background-color: #ebf3f9; } 
.bg-cloud  { background-color: #f3fbff; }

/* border */
.border { border:1px solid #ccc; }
.border-sky { border:1px solid #01c9ea; }

/* radius */
.radius0  { border-radius:0; }
.radius4  { border-radius:4px; }
.radius8  { border-radius:8px; }
.radius12 { border-radius:12px; }


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

/* font-weight */
.mb20 strong,
.mb30 strong,
.mb40 strong,
.mb50 strong,
.mb60 strong { font-weight: 700; }

/* font-size */
.fs-10 { font-size:0.625rem; } /* 10px相当 */
.fs-11 { font-size:0.6875rem; } /* 11px相当 */
.fs-12 { font-size:0.75rem; }  /* 12px */
.fs-14 { font-size:0.875rem; } /* 14px */
.fs-16 { font-size:1rem; }     /* 16px 基準 */
.fs-17 { font-size: 1.0625rem; } /* 17px */
.fs-18 { font-size:1.125rem; } /* 18px */
.fs-19 { font-size: 1.1875rem; } /* 19px */
.fs-20 { font-size:1.25rem; }  /* 20px */
.fs-21 { font-size: 1.3125rem; } /* 21px */
.fs-22 { font-size: 1.375rem; }  /* 22px */
.fs-24 { font-size:1.5rem; }   /* 24px */
.fs-32 { font-size:2rem; }     /* 32px 見出し */

.fs-16list li a {
  font-size: 0.875rem !important;
  color: #323232 !important;
  line-height: 2.5 !important;
}

.fw700 { font-weight: 700;}
.fw800 { font-weight: 800;}
.fw900 { font-weight: 900;}

/*font color*/
.text-aqua { color:#0fcceb; }
.text-gray-800 { color: #323232; }
.text-gray-700 { color: #505050; }

/* line-height */
.lh0 { line-height:0; }
.lh05 { line-height:0.5; } 
.lh100 { line-height:1; } 
.lh120 { line-height:1.2; }
.lh150 { line-height:1.5; }
.lh160 { line-height:1.6; }
.lh170 { line-height:1.7; }
.lh180 { line-height:1.8; }
.lh200 { line-height: 2 !important; }
.lh300,.lh300 li,.lh300 a { line-height: 3; }
.lh300 > li { line-height: 3 !important; }

/* text-align */
.ta-left   { text-align: left; }
.ta-center { text-align: center; }
.ta-right  { text-align: right; }
.ta-justify { text-align: justify; } 

/* border-bottom */
.bb-1 { border-bottom: 2px solid #ebebeb; }


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


/* 記号 before after */


/*before*/

.arrow-illust::before {
  content: "➔";
  font-weight: 600;
  font-size: 1em;
  margin-right: 5px;
  color: #5ac7ef;  
}

.arrow-illust_gray::before {
  content: "➔";
  font-weight: 600;
  font-size: 1em;
  margin-right: 5px;
  color: #d2d2d2;  
}

.square-illust::before {
  content: "■";
  font-weight: 600;
  font-size: 0.8125rem;
  margin-right: 8px;
  color: #5ac7ef;  
}

.square-illust_w::before {
  content: "■";
  font-weight: 600;
  font-size: 0.8125rem;
  margin-right: 5px;
  color: #ffffff;  
}

.block-lead::before {
  content: "■";
  color: #5ac7ef;
  margin-right: 3px;
  font-size: 0.8125rem;
}

.block-lead_gray::before {
  content: "■";
  color: #f0f0f0;
  margin-right: 3px;
  font-size: 0.8125rem;
}


/*after*/


.btn-entry-link::after {
  content: "➔";
  font-weight: 600;
  font-size: 1em;
  margin-left: 3px;
  color: #5ac7ef;  
}

.arrow-illust_grayaf::after {
  content: "➔";
  font-weight: 600;
  font-size: 1em;
  margin-left: 8px;
  color: #d2d2d2;  
}

.arrow-illust_orange_af::after {
  content: "➔";
  font-weight: 600;
  font-size: 1em;
  margin-left: 8px;
  color: #ffa62b;  
}

.arrow-small::after {
  content: "＞";
  display: inline-block;
  margin-left: 0.25em;
  transition: transform 0.2s ease;
}

.arrow-small:hover::after {
  transform: translateX(3px);
}
.arrow-head::before {
  content: "＞";
  margin-right: 0.4em;
}