@charset "utf-8";





/* ------------------------------------------------
   ページ最上部の範囲
------------------------------------------------ */
#topbar {
background: #fff;
border-bottom: 1px solid #eee;
font-size: 15px;
height: 40px;
padding: 0;
}
.topbar-text01 {
font-size: 1.5rem;
margin-bottom: 0;
}
.fas.fa-envelope {
margin-right: 5px;
color: #D1434F;
}
.fas.fa-mobile {
margin-right: 5px;
margin-left: 15px;
color: #D1434F;
}








/* ------------------------------------------------
   ナビゲーションの範囲
------------------------------------------------ */
.bg-light {
background-color: #FFF !important;
}
.navbar.navbar-expand-lg.navbar-light.bg-light.sticky-top {
padding: 15px;
}

/* トグルの範囲 */
.navbar-toggler-icon {
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-image: none;
background-size: auto;
background-size: 100% 100%;
}









/* ------------------------------------------------
   メイン画像の範囲
------------------------------------------------ */
#hero {
background-image: url(../images/bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size:cover;
}

#hero .container.hero-area {
padding: 30px 15px 30px 15px;
color: #FFF;
}
/* iPads (縦-md-720px） ----------- */
@media (min-width: 768px) {
#hero .container.hero-area {
padding: 70px 15px 70px 15px;
color: #FFF;
}
}









/* ------------------------------------------------
   bolockAの範囲（ピックアップニュース）
------------------------------------------------ */
.blockA {
margin-top: 40px;
margin-bottom: 40px;
}
.blockA .text-center.ttl01 {
font-family: 'Roboto', sans-serif;
font-size: 2.4rem;
font-weight: 500;
position: relative;
margin-bottom: 40px;
}
.blockA .text-center.ttl01::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -12px;
border-bottom: 2px solid #D1434F;
width: 50px;
margin-left: auto;
margin-right: auto;
}
.blockA div.row div.col-sm-6.col-md-3 div.boxA.h-100 div.more {
padding-top: 30px;
}
.blockA div.row div.col-sm-6.col-md-3 div.boxA.h-100 div.more a.moretag {
position: absolute;
bottom: 0px;
}
.blockA div.row div.col-sm-6.col-md-3 ul.blockB-inner.h-100 li.blockB-box p.blockB-ttl01 {
margin-top: 15px;
margin-bottom: 4px;
}








/* ------------------------------------------------
   bolockBの範囲（）
------------------------------------------------ */
.blockB div.row div.blockB-left.col-md-9 h1.text-center.ttl01 {
font-family: 'Roboto', sans-serif;
font-size: 2.4rem;
font-weight: 500;
position: relative;
margin-bottom: 40px;
}
.blockB div.row div.blockB-left.col-md-9 h1.text-center.ttl01::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -12px;
border-bottom: 2px solid #D1434F;
width: 50px;
margin-left: auto;
margin-right: auto;
}
.blockB div.row div.blockB-right.col-md-3 h1.text-center.ttl01 {
font-family: 'Roboto', sans-serif;
font-size: 2.4rem;
font-weight: 500;
position: relative;
margin-bottom: 40px;
}
.blockB div.row div.blockB-right.col-md-3 h1.text-center.ttl01::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -12px;
border-bottom: 2px solid #D1434F;
width: 50px;
margin-left: auto;
margin-right: auto;
}
.blockB-inner {
display: flex;
padding: 0;
}
.blockB-box {
display: flex;
flex-direction: column;
}
.blockB-time {
margin-top: auto;
}
.blockB div.row div.col-sm-6.col-md-6 h1.text-center.ttl01 {
font-family: 'Roboto', sans-serif;
font-size: 2.4rem;
font-weight: 500;
position: relative;
margin-bottom: 50px;
}
.blockB div.row div.col-sm-6.col-md-6 h1.text-center.ttl01::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -12px;
border-bottom: 2px solid #D1434F;
width: 50px;
margin-left: auto;
margin-right: auto;
}
.col-sm-6.col-md-6 .row .col-sm-12.col-md-6.mb-30 {
margin-bottom: 30px;
}
.blockB-left.col-md-9 div.row div.col-sm-12.col-md-4.mb-30 ul.blockB-inner.h-100 li.blockB-box p.blockB-ttl01 {
margin-top: 15px;
margin-bottom: 4px;
}
.blockB-left.col-md-9 div.row div.col-sm-12.col-md-4.mb-30 {
margin-bottom: 30px;
}
.blockB-text01 {
font-size: 1.4rem;
line-height: 1.4em;	
}







/* ------------------------------------------------
   一覧ページ用ボタン
------------------------------------------------ */
.btn-animation-02 {
  display: inline-block;
  width: 200px;
  text-align: center;
  background-color: #9ec34b;
  border: 2px solid #9ec34b;
  font-size: 16px;
  color: #9ec34b;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 24px;
  border-radius: 4px;
  position: relative;
}
.btn-animation-02 span {
  position: relative;
  z-index: 1;
}
.btn-animation-02::before,
.btn-animation-02::after {
  content: "";
  display: block;
  background-color: #FFF;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  transition: .2s;
}
.btn-animation-02::before {
  left: 0;
}
.btn-animation-02::after {
  right: 0;
}
.btn-animation-02:hover:before,
.btn-animation-02:hover:after {
  width: 0;
  background-color: #FFF;
}
.btn-animation-02:hover {
  color: #FFF;
}

.btn-animation-01 {
	width: 200px;
	background-color: #000;
	text-decoration: none;
	border-radius: 5px;
	transition: 0.3s;
	display: inline-block;
	padding: 14px;
}
.btn-animation-01:hover {
opacity: 0.7;
}









/* ------------------------------------------------
   カテゴリーアイコン
------------------------------------------------ */
.blockB-box span.wordpress {
background-color: #21759b;
max-width: max-content;
color: #FFF;
padding: 1px 20px 1px 20px;
font-size: 1.4rem;
}
.blockB-box span.bootstrap4 {
background-color: #583B7E;
max-width: max-content;
color: #FFF;
padding: 1px 20px 1px 20px;
font-size: 1.4rem;
}
.blockB-box span.photoshop {
background-color: #00c8ff;
max-width: max-content;
color: #FFF;
padding: 1px 20px 1px 20px;
font-size: 1.4rem;
}
.blockB-box span.illustrator {
background-color: #FF9A00;
max-width: max-content;
color: #FFF;
padding: 1px 20px 1px 20px;
font-size: 1.4rem;
}
.blockB-box span.new {
background-color: #000;
max-width: max-content;
color: #FFF;
padding: 1px 20px 1px 20px;
font-size: 1.4rem;	
}
.blockB-box span.new {
	display: none;	
}
















/* Smartphones (縦ベース) ----------- */


/* Smartphones (横-sm-540px) ----------- */
@media (min-width: 576px) {

}

/* iPads (縦-md-720px） ----------- */
@media (min-width: 768px) {

}

/* iPads (横-lg-960px）及びPC ----------- */
@media (min-width: 992px) {

}

/* PC（大画面-xl-1140px) ----------- */
@media (min-width: 1200px) {

}