@charset "UTF-8";

/* ==========================================================================
 * Breadcrumb
 * ========================================================================== */
ul.breadcrumb {
	padding-left: 0;
	list-style: none;
}
ul.breadcrumb li {
	display: inline-block;
}
ul.breadcrumb li:after {
	content: "\00a0\00a0»\00a0";
}
ul.breadcrumb li:last-child:after {
	content: none;
}

/* ==========================================================================
 * Anchor（外部リンク、別窓リンク、PDFリンクにアイコン追加）
 * ========================================================================== */
/*内部リンクは必ず相対orルートパスで記述されている前提で使用可*/
a[href^="http"]::after,
a[href^="https"]::after,
a[target="_blank"]::after {
	content: "\f08e";
	margin: 0 .3em 0 .4em;
	font-family: FontAwesome;
	font-size: .7em;
	display: inline-block;
}
a[href$=".pdf"]::after {
	content: "\f1c1";
	margin: 0 .3em;
	font-family: FontAwesome;
	font-size: .8em;
	display: inline-block;
}
a.del-icon::after {
	content: "";
	margin: 0;
}

/*WordPressなど、全てのリンク（内部リンクも）が必ず絶対パスで記述されている前提で使用可*/
a:not([href*="crav.jp"])::after,/*crav.jpが含まれ[ない]場合※IE9以上*/
a[target="_blank"]::after,/*target=_blank属性の場合*/
a.link-external {/*classにて付加*/
	content: "\f08e";
	margin: 0 .3em 0 .4em;
	font-family: FontAwesome;
	font-size: .7em;
	display: inline-block;
}
a[href$=".pdf"]::after {/*.pdfで終わるリンクの場合*/
	content: "\f1c1";
	margin: 0 .3em;
	font-family: FontAwesome;
	font-size: .8em;
	display: inline-block;
}
a.del-anchor-icon::after,
a[href^="javascript"]::after,/*JS関連リンクの場合*/
a[href^="tel:"]::after,/*JS関連リンクの場合*/
a[href*="#"]::after,/*ページ内リンクの場合*/
a[href=""]::after,/*href属性が空欄の場合*/
a:not([href])::after/*href属性が無い場合*/ {
	content: "";
	margin: auto;
}

/* ==========================================================================
 * Text
 * ========================================================================== */
.txt-clr-orange {
	color: #e67e22;
}
.txt-clr-green {
	color: #27ae60;
}
.txt-clr-blue {
	color: #2980b9;
}
.-webkit-txt-multi-ellipsis {
	/*Chrome Safari Operaのみ対応 以下の場合4行で省略*/
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}
.txt-multi-ellipsis {/*80px÷20px＝4行で省略*/
	position: relative;
	height: 80px;
	line-height: 20px;
	overflow: hidden;
}
.txt-multi-ellipsis::before, .txt-multi-ellipsis::after {
	position: absolute;
	background: #fff;
}
.txt-multi-ellipsis::before {
	content: "…";
	bottom: 0;
	right: 0;
}
.txt-multi-ellipsis::after {
	content: "";
	width: 100%;
	height: 100%;
}
.txt-fitcontent {
	margin-inline: auto;
	inline-size: fit-content;
}
@supports (-webkit-background-clip:text) {
.txt-gradient {
	color: transparent !important;
	background: -webkit-linear-gradient(left,#000 0,#f00 30%);
	background: linear-gradient(to right,#000 0,#f00 30%);
	-webkit-background-clip: text;
}
}
.text-stroke,
.text-stroke2 {
	color: #ffff00;
	font-size: 30px;
}
.text-stroke {
	-webkit-text-stroke: 10px #e74c3c;
	paint-order: stroke;
}
.text-stroke2 {
	text-shadow: 1px 1px 0px #e74c3c, -1px -1px 0px #e74c3c,
			   -1px 1px 0px #e74c3c,  1px -1px 0px #e74c3c,
				0px 1px 0px #e74c3c,  0px -1px 0px #e74c3c,
			   -1px 0px 0px #e74c3c,  1px  0px 0px #e74c3c;
}
blockquote.quote-line {
	margin-right: 0;
	margin-left: 2rem;
	padding: 6px 0 6px 2rem;
	border-left: 1px solid #bbb;
}
blockquote.quote-line cite {
	margin-top: 10px;
	margin-left: .5rem;
	display: block;
}
blockquote.quote-line cite:before {
	content: "\2014 \0020";
}

/* ==========================================================================
 * Table
 * ========================================================================== */
table {
	border-collapse: collapse;
}
/*セル余白*/
.table-spacing-3 th, .table-spacing-3 td {
	padding: 3px;
}
.table-spacing-5 th, .table-spacing-5 td {
	padding: 5px;
}
.table-spacing-8 th, .table-spacing-8 td {
	padding: 8px;
}
/*横ボーダーのみ*/
.table-condensed {
	border-bottom: 1px solid #ccc;
}
.table-condensed th, .table-condensed td {
	padding: 5px;
	border-top: 1px solid #ccc;
}
/*縦横ボーダー*/
.table-bordered {
	border: 1px solid #ccc;
}
.table-bordered th, .table-bordered td {
	border: 1px solid #ccc;
}
/*2列レスポンシブ（縦横ボーダー）*/
.table-col2 {
	width: 100%;
	word-break: break-all;
}
.table-col2 th, .table-col2 td {
	border: 1px solid #ccc;
}
@media screen and (max-width: 768px) {
.table-col2 th, .table-col2 td {
	border-top: none;
	text-align: left;
	display: block;
}
.table-col2 tr:first-child {
	border-top: 1px solid #ccc;
}
}
/*横長の要素をはみ出させずスクロール(ex:tableをdiv.scroll-xで囲む)*/
.scroll-x {
	overflow-x: auto;
}
.scroll-x::-webkit-scrollbar {
	height: 5px;
}
.scroll-x::-webkit-scrollbar-track {
	border-radius: 5px;
	background: #eee;
}
.scroll-x::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: #666;
}
/*横長の要素をはみ出させずスクロールかつ、th固定（レスポンシブ対応）*/
/*注意点：改行するとレイアウトが崩れる。*/
.table_container {
	position: relative;
}
.table_container .scroll-x {
	margin-left: 79px;
}
.table_container th,
.table_container td {
	border: 1px solid #ccc;
	text-align:  center;
	font-size: 12px;
}
.table_container th {
	position: absolute;
	left: 0;
	width: 80px;
}
.table_container td {
	min-width: 100px;
}

/* ==========================================================================
 * Form
 * ========================================================================== */
select, textarea, input {
	padding: .5rem;
	border: 1px solid #ccc;
	border-radius: 1px;
	outline: 0;
	font-size: 100%;
}
select:focus, textarea:focus, input:focus {
	border: 1px solid #eea34a;
	background: #fffcca;
	transition: all .5s;
}
input[type=radio], input[type=checkbox] {
	display: none;
}
.radio, .checkbox {
	box-sizing: border-box;
	-webkit-transition: background-color .2s linear;
	transition: background-color .1s linear;
	position: relative;
	display: inline-block;
	margin: 0 20px 8px 0;
	padding: 12px 12px 12px 42px;
	border-radius: 3px;
	background-color: #f6f7f8;
	vertical-align: middle;
	cursor: pointer;
}
.radio:hover, .checkbox:hover {
	background-color: #bdaca6;
}
.radio:hover:after, .checkbox:hover:after {
	border-color: #775448;
}
.radio:after, .checkbox:after {
	-webkit-transition: border-color .1s linear;
	transition: border-color .1s linear;
	position: absolute;
	top: 50%;
	left: 15px;
	display: block;
	margin-top: -10px;
	width: 16px;
	height: 16px;
	border: 2px solid #bbb;
	border-radius: 2px;
	content: '';
}
input[type=radio]:checked + .radio:before, input[type=checkbox]:checked + .checkbox:before {
	opacity: 1;
}
.radio:before {
	-webkit-transition: opacity .1s linear;
	transition: opacity .1s linear;
	position: absolute;
	top: 50%;
	left: 20px;
	display: block;
	margin-top: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #775448;
	content: '';
	opacity: 0;
}
.checkbox:before {
	-webkit-transition: opacity .1s linear;
	transition: opacity .1s linear;
	position: absolute;
	top: 50%;
	left: 21px;
	display: block;
	margin-top: -7px;
	width: 5px;
	height: 9px;
	border-right: 3px solid #53b300;
	border-bottom: 3px solid #53b300;
	content: '';
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* ==========================================================================
 * Animation
 * ========================================================================== */
/*BL要素のフェードイン*/
.display-fadein {
	display: block;
	opacity: 1;
	-moz-animation: fadein 1s forwards;
	-webkit-animation: fadein 1s forwards;
	animation: fadein 1s forwards;
}
@keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes fadein {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*点滅*/
.display-blinking {
	-moz-animation: blink 0.9s ease-in-out infinite alternate;
	-webkit-animation: blink 0.9s ease-in-out infinite alternate;
	animation: blink 0.9s ease-in-out infinite alternate;
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes blink {
	0% {opacity :0;}
	100% {opacity: 1;}
}
/*マーキー*/
.marquee {
	position: relative;
	padding: 0.5em 0;
	margin: 0 auto;
	overflow: hidden;
	background-color: #f5f5f5;
}
.marquee p {
	margin: 0;
	padding-left: 100%;
	display: inline-block;
	white-space: nowrap;
	-webkit-animation-name: marquee;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 15s;
	-webkit-animation-iteration-count: infinite;
	animation-name: marquee;
	animation-timing-function: linear;
	animation-duration: 15s;
	animation-iteration-count: infinite;
}
@keyframes marquee {
	from   { transform: translate(0%);} 
	99%,to { transform: translate(-100%);}
}

/* ==========================================================================
 * Embedded
 * ========================================================================== */
/*埋め込みIFRAMEを.video-containerで囲む*/
.video-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	padding-top: 56.25%;
}
.video-container iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}