@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;
}
.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;
}









/* ------------------------------------------------
   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;
}









/* ------------------------------------------------
   カテゴリーアイコン
------------------------------------------------ */
.Category01 {
background-color: #21759b;
max-width: max-content;
color: #FFF;
padding: 1px 20px 1px 20px;
font-size: 1.4rem;
}
.Category02 {
background-color: #6b429e;
max-width: max-content;
color: #FFF;
padding: 1px 20px 1px 20px;
font-size: 1.4rem;
}
.Category03 {
background-color: #00c8ff;
max-width: max-content;
color: #FFF;
padding: 1px 20px 1px 20px;
font-size: 1.4rem;
}
.Category04 {
background-color: #ff9a00;
max-width: max-content;
color: #FFF;
padding: 1px 20px 1px 20px;
font-size: 1.4rem;
}









/* ------------------------------------------------
   カテゴリーアイコン
------------------------------------------------ */
.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) {

}