@charset "utf-8";

/* 
	2024/07/2 修正
*/

/* 
===========================================================
   # CMS 共通
===========================================================
*/
body{           
    font-family: "游ゴシック体", "YuGothic", "游ゴシック Medium", 'Yu Gothic Medium', "ヒラギノ角ゴ ProN", 'Hiragino Kaku Gothic ProN', "メイリオ", Meiryo, sans-serif;
    color: var(--body-text);
    font-size: 0.875em;
    letter-spacing: 0.04em;
    line-height: 1.6;
    word-wrap : break-word;
    overflow-wrap : break-word;
    -webkit-font-smoothing: ; /*antialiased*/
}
p{
    line-height: 1.8;
    margin-bottom: 0;
}
@media (min-width: 992px) {
    body {
        font-size: 0.9375rem;
    }
}

@media (min-width: 576px) {
	.container, .cms-container{
		max-width: 95%;
	}
}
@media (min-width: 1400px){
	.container, .cms-container{
		max-width: 1320px;
  	}
}

.nav-button > .btn.btn-primary{
	font-size: 95% !important;
}
nav ul li.nav-button:hover{
    box-shadow: none;
}

/* -------------- リンク｜Link -------------- */
a:link, a:visited, a:focus{
  color: #1a88ff;
  transition: .12s;
}
a:active{
  color: #1a88ff;
}
a:hover{
  color: #1a88ff;
  transition: .12s;
  text-decoration: underline;
}

/* 
===========================================================
   # CMS Front｜Contents
===========================================================
*/
#news-contents .card{
	background: var(--white);
	border: none;
	margin-bottom: 25px;
}
#news-contents .card-body{
	background: var(--white);
	border: none;
}
#news-contents h3.card-title{
	font-weight: bold !important;
}
#news-contents h4.card-title{
	font-weight: normal !important;
}
#news-contents .card-subtitle{
	margin: 0;
	padding: 0 0 0 0.5rem;
}
#news-contents .post-body{
	min-height: 20vh;
}
#news-contents .card-text{
	font-size: ;
	color: ;
	line-height: ;
}

/* 新着記事のNEW表示 */
.new-post:after{
	content: "NEW";
	font-size: 9px;
	font-weight: bold; 
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1;
	background: #f32929;
	color: #fff;
	padding: 2px 4px;
	margin-left: 3px;
	border-radius: 3px;
	vertical-align: text-top;
}

/* 
===========================================================
   # CMS Front｜Archive
===========================================================
*/
#news-archive .card{
	background: #fafafa;
	border: 1px solid #eee;
}
#news-archive h2.card-title{
	font-weight: bold !important;
}
#news-archive .card-subtitle{
	margin: 0;
	padding: 0 0 0 0.5rem;
}
#news-archive .card-text{
	font-size: ;
	color: ;
	line-height: ;
}
/*--------- New Style ---------*/
#news-archive2 .card{
	background: #fff;
	border: 1px solid #eee;
	height: 100% !important;
}
#news-archive2 .card-body{
	padding: 1rem 0.5rem;
}
/*--------- 画像 ---------*/
#news-archive2 .card-img-top{
	overflow: hidden;
	border-radius: calc(0.25rem - 1px);
}
#news-archive2 img{
	width: 100%;
/*	height: 200px; */
	object-fit: cover;
	aspect-ratio: 16 / 9;
	transition: .12s all;
}
#news-archive2 a:hover img{
 	transform:scale(1.05,1.05);
 	transition: .34s all;
}
/*--------- 日付 ---------*/
#news-archive2 .card-subtitle{
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 3px;
	padding: 0;
}
/*--------- タイトル ---------*/
#news-archive2  h3.card-title{
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 8px;
}
/*--------- カテゴリー ---------*/
#news-archive2 .card-text{
	font-size: 13px;
	color: var(--white);
	line-height: 1;
	display: inline;
	background: #777;
	padding: 3px 10px 3px;
	border-radius: 999px;
	margin-bottom: 0;
}

/*--------- リンク ---------*/
#news-archive2 a:link,
#news-archive2 a:visited{
  color: #444;
  transition: .12s;
}
 #news-archive2 a:hover{
  color: var(--link-color);
  text-decoration: none;
  transition: .12s;
}

/* 
===========================================================
   # CMS Front｜Right Menu
===========================================================
*/
#right-menu .card{
	background: #fcfcfc;
	border: 1px solid #eee;
}
#right-menu .card-title{
	font-weight: bold !important;
}
#right-menu .card-subtitle{
	margin-bottom: 0.75rem;
	padding-left: 0.5rem;
}
#right-menu hr{
	margin: 20px 0;
}
#right-menu .active{
	font-weight: bold;
}





/* 
===========================================================
   # CMS管理者｜Login
===========================================================
*/


/* 
===========================================================
   # CMS管理者｜Admin
===========================================================
*/
/* 予約投稿の未投稿アイコン */
.scheduled-post:after{
	content: "予約";
	font-size: 9px;
	font-weight: 700; 
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1em;
	background: #ffa500;
	color: #fff;
	padding: 2px 3px;
	margin-left: 3px;
	border-radius: 3px;
	vertical-align: text-top;
}

/* 画像付記事一覧のサムネイル */
.post.thumbs > div{
	padding-left: 20px;
}
.inline-block{
	display: inline-block;
}
.thumb-100{
	height: 100px;
	width: 100px;
	object-fit: cover; /* cover OR contain*/
	font-family: 'object-fit: contain;'
}

/* 投稿後のページ */
.message{
	padding: 25px;
	margin: 25px;
	border-radius: 5px;
}

/* 
===========================================================
   # CMS管理者｜管理者トップ／Articlemanage
===========================================================
*/
/*--------- New Style ---------*/
#articlemanage .card{
	background: #fff;
	border: 1px solid #eee;
	height: 100% !important;
}
#articlemanage .card-body{
	padding: 1rem 0.5rem 0.5rem;
}
/*--------- 画像 ---------*/
#articlemanage .card-img-top{
	overflow: hidden;
	border-radius: calc(0.25rem - 1px);
}
#articlemanage img{
	width: 100%;
/*	height: 200px; */
	object-fit: cover;
	aspect-ratio: 16 / 9;
	transition: .12s all;
}
#articlemanage a:hover img{
 	transform:scale(1.05,1.05);
 	transition: .34s all;
}
/*--------- 日付 ---------*/
#articlemanage .card-subtitle{
	font-size: 15px;
	font-weight: bold;
	margin-bottom: 3px;
	padding: 0;
}
/*--------- タイトル ---------*/
#articlemanage  h3.card-title{
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 8px;
	transition: .12s;
}
/*--------- カテゴリー ---------*/
#articlemanage .card-text{
	font-size: 13px;
	color: var(--white);
	line-height: 1;
	display: inline;
	background: #777;
	padding: 3px 10px 3px;
	border-radius: 999px;
	margin-bottom: 0;
}

/*--------- リンク ---------
#articlemanage > a:link,
#articlemanage a:visited{
  color: #444;
  transition: .12s;
}
 #articlemanage a:hover h3{
  color: var(--link-color);
  text-decoration: underline;
  transition: .12s;
}
*/

/*--------- 編集｜削除 ---------*/
#articlemanage .card-footer{
	padding: 0 0.5rem 0.5rem;
	background-color: rgba(0,0,0, 0);
	border-top: none;
	text-align: right;
}
#articlemanage .card-footer:last-child{
    border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}
#articlemanage .card-footer > div{
	display: inline-block;
	font-size: 14px;
}

a:link.green-link, a.green-link:visited, a.green-link:focus{
    color: var(--green);
    transition: color .12s ease;
}
a.green-link:active{
    color: var(--green);
}
a.green-link:hover{
    color: var(--darker);
    transition: color .12s ease;
    text-decoration: underline;
}

a:link.red-link, a.red-link:visited, a.red-link:focus{
    color: var(--red);
    transition: color .12s ease;
}
a.red-link:active{
    color: var(--red);
}
a.red-link:hover{
    color: var(--darker);
    transition: color .12s ease;
    text-decoration: underline;
}

/* 
===========================================================
   # CMS管理者｜Post News
===========================================================
*/
#post-news .form-control{
 	color: #333;
 	font-size: 1rem;
 	line-height: 1.8;
}
#post-news .card{
	margin: 2rem auto;
	background: #f8f8f8;
}
#post-news .card-body{
	padding: 1.25rem 0;
}
@media screen and (min-width: 992px){
	#post-news .card-body{
		padding: 1.25rem;
	}
}

#post-news .card-title{
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 18px;
}
#post-news .date::placeholder{
  color: #333;
}
#post-news .btn{
	padding: 0.5rem 0.75rem;
}

/* 
===========================================================
   # CMS管理者｜Post Media
===========================================================
*/
.post-form{
	padding: 10px;
	margin-top: 10px;
	position: relative;
}
.post-section{
	margin: 0;
	padding: 0;
}
.post-media-inner{
	display: flex;
	flex-wrap: wrap;
}
.post-media-icon{
	width: 150px;
	height: 150px;
	margin: 10px;
	position: relative;
}
@media screen and (max-width: 768px){
  .post-media-icon{
		width: 80px;
		height: 80px;
  }
}
@media screen and (max-width: 319px){
  .media-319{
		height: 140px;
  }
}

.add-media{
	outline: none;
	cursor: pointer;
	font-size: 13px;
	text-align: center;
	line-height: 1.8;
}
.delete-media{
	position: absolute;
	top: -1px;
	right: -1px;
	width: 24px;
	height: 24px;
	border-top-left-radius: 0;
	border-bottom-right-radius: 0;
	opacity: 0;
	transition: 0.2s;
}
.form-group .post-section{
	margin-bottom: 0;
	padding-top: 0;
}
.post-media-icon.thumbnail:hover > .delete-media{
	opacity: 1;
	transition: 0.15s;
}
.control-label{
	font-weight: normal;
	text-align: left !important;
	padding: 0 15px 5px !important;
}

.fade-inout{
	transition: .1s ease-in;
	-webkit-transition: .1s ease-in;
}

#coba img{
	width: 100%;
	height: 192px;
	object-fit: cover; /* cover OR contain*/
	font-family: 'object-fit: contain;'
}
@media screen and (max-width: 480px){
 	#coba img{
 		height: ;
		object-fit: cover; /* cover OR contain*/
		font-family: 'object-fit: contain;'
	}
}

/* 
===========================================================
   # CMS管理者｜操作方法
===========================================================
*/
.howto-wrap{
	background: #f8f8f8;
	border-radius: 7px;
	padding: 20px 10px;
	margin-bottom: 30px;
	-webkit-font-smoothing: antialiased;
}
@media (min-width: 992px) {
	padding: 20px 20px;
}

.howto-wrap > p{
	margin-bottom: 20px;
}
.howto-wrap > p:last-child{
	margin-bottom: 0;
}

h2.howto{
	font-size: 110%;
	font-weight: bold;
	color: var(--blue);
}
h3.howto{
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 0.25rem;
}
h3 > i{
	color: #777;
}

/* アイコン */
.in-out:after{
    content: "in/out";
    font-size: 9px;
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1em;
    background: #007bff;
    color: #fff;
    padding: 2px 3px;
    margin-left: 3px;
    border-radius: 3px;
    vertical-align: text-top;
}
.edit-post:after{
    content: "編集";
    font-size: 9px;
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1em;
    background: #30b0d5;
    color: #fff;
    padding: 2px 3px;
    margin-left: 3px;
    border-radius: 3px;
    vertical-align: text-top;
}
.delete-post:after{
	content: "削除";
	font-size: 9px;
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1em;
    background: #c9302c;
    color: #fff;
    padding: 2px 3px;
    margin-left: 3px;
    border-radius: 3px;
    vertical-align: text-top;
}
.publish-article:after{
    content: "投稿";
    font-size: 9px;
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1em;
    background: #286090;
    color: #fff;
    padding: 2px 3px;
    margin-left: 3px;
    border-radius: 3px;
    vertical-align: text-top;
}

.panel-title{
	font-size: 1.4rem;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 3px;
}
.mb-10{
	margin-bottom: 10px !important;
}
.mt-10{
	margin-top: 10px !important;
}
.mt-20{
	margin-top: 20px !important;
}

/* 
===========================================================
   # CMS管理者｜よくある質問
===========================================================
*/
#accordion{
	user-select: none;
	-webkit-user-select: none;
}
#accordion .card{
	border: none;
}
#accordion .card-header{
	padding: 0 1.25rem;
	border-bottom: none;
	border-radius: 4px;
	transition:  all .2s ease;
	background-color: #feffdf;
}
#accordion .card-header:hover{
	background-color: rgba(0,0,0, .02);
	background-color: #feffdf;
	transition:  all .2s ease;
}
#accordion .card-link{
	padding: 1rem 0 !important;
	font-weight: bold;
}
#accordion a.card-link:link, #accordion a.card-link:visited, #accordion a.card-link:focus{
	color: #333;
	transition: .12s;
}
#accordion a.card-link:active{
	color: #333;
}
#accordion a.card-link:hover{
	color: #333;
	transition: .12s;
	text-decoration: none;
}

#accordion a[data-toggle="collapse"]{
	display: block;
	padding: 5px 0;
	text-decoration: none;
	position: relative;
}

#accordion a[data-toggle="collapse"]:after{
	content:"";
	display: block;
	width: 6px;
	height: 6px;
	border-top: #666 1px solid;
	border-right: #666 1px solid;
	position: absolute;
	right: 5px;
	top: 0;
	bottom: 0;
	margin: auto;
}

#accordion a[aria-expanded=false]:after{
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	transition-duration: .2s;
}
#accordion a[aria-expanded=true]:after{
	-webkit-transform: rotate(-225deg);
	transform: rotate(-225deg);
	transition-duration: .2s;
}
#accordion a.show[aria-expanded=true]:after{
	-webkit-transform: rotate(-225deg);
	transform: rotate(-225deg);
	transition-duration: .2s;
}

/* 
===========================================================
   # loader2
===========================================================
*/
.loader2 {
  color: pink;
  font-size: 12px;
  margin: 75px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}


/* 
===========================================================
   # style-centerの場合のPagenation
===========================================================
*/
nav ul.pagination{
	background: none;
}
nav ul.pagination li:last-child{
	border-right: none;
}
nav ul.pagination li{
	border-left: none;
}
nav ul.pagination li:hover{
	background: none;
}