/* ========================================== */
/* フォント */
/* ========================================== */
@import url('https://fonts.googleapis.com/css?family=Pathway+Gothic+One&display=swap');
body{
  font-size: 14px;
  line-height: 1.8;
}
.font-base {
  font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
}

.font-accent {
  font-family: 'Pathway Gothic One', sans-serif;

}
h2{
color: #353C4F;
}

.font-xs {
  font-size: 11px;
  line-height: 1.4rem;
}
a{
  transition: .2s;
}
a:hover{
  transition: .2s;
  opacity: .75;
  text-decoration: none;
}
.container.lower h2 {
    margin-top: 3.5rem;
    margin-bottom: 3rem !important;
    padding-bottom: 3rem !important;
}
p{
  margin-bottom: 0;
}
/* ========================================== */
/* ヘッダー */
/* ========================================== */
header .brand-logo img {
  width: 218px;
}
header .nav-link {
  color: #ECEFF1;
}
header .nav-link:hover {
  color: #ECEFF1;
}
header h1 {
	width:75px;
	float:left;
	margin-bottom:0;
}
@media screen and (max-width:1199px){
header h1 {
	width:60px;
	/*font-size:16px;*/
	letter-spacing:3px;
}
.navbar-toggler{
  padding-top:0;
}
}
header .nav-link{
  font-size: 1.3rem;
  border:none;
}
header .nav-link:hover{
  border: none;
}
header .sp-menu .nav-link{
  font-size: 1rem;
}
header{
box-shadow: 0 3px 6px rgba(0,0,0,0.16);
}
header.top_header{
  box-shadow: none;
}
/* ========================================== */
/* フッター */
/* ========================================== */
footer {
	padding:32px 0;
	border-top:solid 1px #C9C9C9;
}

footer ul {
	margin-bottom:32px;
padding-left: 0;
}

footer li {
	display:inline-block;
	margin-right:32px;
}

footer li a {
	color:#5F6368;
}

footer li a:hover {
	color:#5F6368;
	opacity:0.7;
}

@media screen and (max-width: 991px) {

footer li {
	display:inline-block;
	margin-right:18px;
}
	
}

@media screen and (max-width: 767px) {

footer li {
	display:block;
	margin:0 0 16px;
}
	
	
}
.copy{
  font-size: .75rem;
}
/* ========================================== */
/* トップ:TOPICSリスト */
/* ========================================== */
.top-topics-list .top-topics-list-item a {
  color: #333;
}
.top-topics-list .top-topics-list-item a:hover {
  text-decoration: none;
}
.top-topics-list .top-topics-list-item img {
  width: 100%;
}
.top-topics-list .top-topics-list-item img,
.top-topics-list .top-topics-list-item p {
  -ms-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  transition: all .3s linear;
}
.top-topics-list .top-topics-list-item a:hover img,
.top-topics-list .top-topics-list-item a:hover p {
  opacity: .6 !important;
}


/* ========================================== */
/* 共通カラー */
/* ========================================== */
/* ベースカラー */
/* 背景 */
.bg-base {
  /* サイト全体の背景色 */
  background-color: #fff;
}

/* メインカラー */
/* 背景 */
.bg-main {
  /* 主にヘッダの背景色 */
  background-color: #000E38;
}
/* サブカラー */
.bg-sub {
  /* 主にフッタの背景色 */
  background-color: #333;
}
/* アクセントカラー */
/* 任意でUIパーツの色を増やしたいときに定義を増やす */
.bg-accent-light-gray {
  background-color: #f8f8f8;
}
.bg-accent-light-red {
  background-color: #efdfdf;
}

/* テキスト */
.text-base {
  color: #fff;
}
.text-main {
  color: #5F6368;
}
.text-accent-light-gray {
  color: #c0c0c0;
}

/* ========================================== */
/* UIパーツ別 */
/* ========================================== */
/* ボタン */
.btn {
  border-radius: 2rem;
}

.btn:hover{
opacity: 1;
}
.btn-main {
  max-width: 375px;
  color: #333;
  background-color:transparent;
  border-color: #333;
}
@media screen and (min-width: 768px) {
.btn-main {
  color: #333;
  background-color: transparent;
  background-image: none;
  border-color: #333;
transition: .2s opacity;
}
}
.btn-main:hover {
  color: #333;
  opacity: .6;
transition: .2s opacity;
  background-color: transparent;
}
.btn-outline-light{
  width: 100px;
}
.btn-group-lg>.btn, .btn-lg{
  font-size: 1rem;
}
/* アラート */
.alert-main {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}
.alert-registration-mail.alert,
.alert-mypage-change-email.alert {
  border: none;
}
.alert-registration-mail.alert .alert-heading,
.alert-mypage-change-email.alert .alert-heading {
  color: #ff0000;
}
.alert-registration-mail.alert .alert-body,
.alert-mypage-change-email.alert .alert-body {
  color: #808080;
}

/* バッジ（ラベル） */
.badge-history-status.badge {
  font-size: 100%;
  font-weight: normal;
  padding: .5em 1em;
}
.badge-history-status.badge-secondary {
  color: #343a40;
  background-color: #e9ecef;
}
/* pagenation */
.pagination{
  margin-top: 3rem;
}
.page-link{
  background: #fff;
  color: #424242;
  transition: .2s;
}
.page-link:hover{
  transition: .2s;
  z-index: 0;
}
.page-item.active .page-link{
  background: #6c757d;
border-color: #6c757d;
color:#fff;
}
.page-item.disabled .page-link{
  background-color: #f8f9fa;
  color: #adadad;
}
/* ========================================== */
/* 画面別 */
/* ========================================== */
/* 投稿ページ */
.post-item {
  -ms-transition: opacity .3s linear;
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
}
.post-item:hover {
  opacity: .75;
  transition: .2s opacity;
}
.post-item a:hover {
  color: #343a40;
}
.post-date{
  margin-right: 1rem;
}
.date-category-separator{
  display: none;
}

/* マイページ履歴 */
@media screen and (min-width: 768px) {
.row-history-left {
  border-right: 1px solid rgba(0,0,0,.1);
}
}
.mypage-plan-contract-footer{
  display:none;
}

/* login */
.login-box{
      border-radius: .5rem;
}
@media screen and (min-width: 768px){
  .login-box{
    width: 75%;
}
}


.category-banner-thumbnail a{
display:inline-block;
}