@charset "utf-8";
/*
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
株式会社サンロイヤル新潟　カスタム対応
	ver.2025.05.30.Custom-SunroyalNiigata
	汎用パーツ　スタイルシート
────────────────────────────────────────
FileName:		/resources/css/common-parts.css
Editor:			TRUSTEC
Description:	汎用パーツ　スタイルシート。
────────────────────────────────────────
2025/05/30:		サンプル開発開始。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
*/
/* ::::: [CUSTOM PROPERTIES] ::::: */
:root {
	/* margin */
	--common-margin-width: clamp(4rem, 7vw, 8rem);
	--common-margin-width-half: calc(var(--common-margin-width) / 2);
	--common-margin-width-middle: clamp(3rem, 5.5vw, 6rem);

	/* title */
	--common-article-title-color1: #323232;
	--common-article-title-color2: #83a84a;
	--common-section-title-color: #323232;
	--common-subtitle-color: #83a84a;
	--common-title-decolate-color1: #6699cc;
	--common-title-decolate-color2: #6699cc6A;

	--common-title-font: "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ 明朝", "MS Mincho", serif, system-ui;
	--common-subtitle-font: "times-new-roman", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "MS Gothic", "Osaka", sans-serif, system-ui;


	/* button */
	--button-point-color-1: #00813d;
	--button-point-color-3: #fbfbfb;
	--button-letter-spacing: 0.1em;
	--button-hover-letter-spacing: 0.2em;
	--button-letter-spacing-wide: 0.15em;
	--button-hover-letter-spacing-wide: 0.3em;
	--button-font-size: var(--common-font-size);
	--button-font-weight: var(--common-font-weight-bold);

	/* signature */
	--signature-font-style: var(--common-font-style);
	--signature-font-weight: var(--common-font-weight-bold);
	--signature-line-height: 1em;

	--signature-name-font-size: 1.5em;
	--signature-name-line-height: var(--common-line-height);
	--signature-name-letter-spacing: 0.1em;

	/* table */
	--table-background-color: var(--common-background-color);
	--table-color: var(--common-color);
	--table-border-color: rgba(0, 0, 0, 0.3);
	--table-caption-color: #404040;
	--table-caption-font-weight: var(--common-font-weight-bold);
	--table-th-width: 30%;
	--table-th-background-color: rgba(0, 0, 0, 0.1);
	--table-th-color: var(--common-color);
	--table-td-width: 70%;
	--table-tr-zebra-background-color: rgba(0, 0, 0, 0.03);
	--table-tr-total-background-color: #ff0000;
}



#fixed_btn_wrapper {
position: fixed;
    bottom: 2%;
    right: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.fixed_btn {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 5em;
    padding: .5em 1em .3em 1.5em;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
	font-size: .9rem;
	border: solid 1px #fff;
    border-right: none;
	position: relative;
	overflow: hidden;
    z-index: 2;
}
.fixed_btn_telp{
	background-color: #00813d;
	margin-bottom: 1em;
}
.fixed_btn_job_and_entry{
	background-color: #83a84a;
}
.fixed_btn .btn_icon{
    height: 100%;
    display: flex;
    align-items: center;
    margin-right: 1em;
}
.fixed_btn .btn_icon img{
    width: auto;
    height: 2.5em;
    object-fit: cover;
    object-position: center;
}
@media(max-width: 991px){
	.fixed_btn{
		font-size: .7rem;
	}
	.fixed_btn .btn_icon{
		height: 2em;
		margin-right: 0;
	}
}
.fixed_btn .btn_text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
	color: #ffffff;
	font-size: .9rem;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    padding-bottom: 0;

}
.fixed_btn_telp .btn_text .text_caption{
	width: 100%;
	font-size: .9em;
    font-weight: 500 !important;
    padding: .3em 0;
}
.fixed_btn .btn_text .text_content{
	width: 100%;
	position: relative;
	font-size: 1.2em;
    padding: .3em 0;
}
.fixed_btn .btn_text .text_content::before{
    position: absolute;
    top: -1px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #ffffff;
}
.fixed_btn_telp::after,
.fixed_btn_job_and_entry::after {
  border-radius: 50%;
  content: "";
  display: block;
  margin: auto;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: 100%;
  height: 0;
  z-index: -1;
  transform: translateY(-50%) scale(0.1);
  transition: opacity .5s, transform 0s;
  transition-delay: 0s, .4s;
}
.fixed_btn_telp::after{
  background: #83a84a;
}
.fixed_btn_job_and_entry::after {
  background: #00813d;
}

@media screen and (max-width: 1000px) {
	.fixed_btn_telp:active,
	.fixed_btn_job_and_entry:active{
		letter-spacing: 0.15em;
	}
	.fixed_btn_telp:active::after,
	.fixed_btn_job_and_entry:active::after{
	  opacity: 1;
	  transform: translateY(-50%) scale(1.1);
	  transition-delay: 0s;
	  transition: opacity .3s, transform .3s ease-in-out;
	}
}

 /*PCの時は:hover*/ 
@media screen and (min-width: 1001px) {
	.fixed_btn_telp:hover,
	.fixed_btn_job_and_entry:hover{
		letter-spacing: 0.15em;
	}
	.fixed_btn_telp:hover::after,
	.fixed_btn_job_and_entry:hover::after {
	  opacity: 1;
	  transform: translateY(-50%) scale(1.1);
	  transition-delay: 0s;
	  transition: opacity .8s, transform .6s ease-in-out;
	}
}







/* :::::  [MARGIN-STYLES] ::::: */

/* Article Margins
--------- --------- --------- ------- */
.my-article {
	margin-top: var(--common-margin-width);
	margin-bottom: var(--common-margin-width);
}

.my-article-half {
	margin-top: calc(var(--common-margin-width) / 2);
	margin-bottom: calc(var(--common-margin-width) / 2);
}

.my-article-double {
	margin-top: calc(var(--common-margin-width) * 2);
	margin-bottom: calc(var(--common-margin-width) * 2);
}

/* Section Margins
--------- --------- --------- ------- */
.my-section {
	margin-top: var(--common-margin-width-middle);
	margin-bottom: var(--common-margin-width-middle);
}

.mt-section {
	margin-top: var(--common-margin-width-middle);
}

.mb-section {
	margin-bottom: var(--common-margin-width-middle);
}



/* :::::  [TEXT-STYLES: ARTICLE TITLE] ::::: */
.page-title-article {
    height: 60vh;
    max-height: 450px;
    display: flex;
    align-items: flex-end;
	padding-bottom: 5vh;
}
@media (max-width: 991px) {
	.page-title-article {
		max-height: 450px;
	}
}
@media (max-width: 767px) {
	.page-title-article {
		max-height: 300px;
	}
}
.page-title {
	line-height: var(--common-line-height-title);
	text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.page-title .title {
    color: var(--common-page-title-color);
    font-size: max(1.8rem, 2.5vw);
    letter-spacing: var(--common-letter-spacing-title);
    text-align: start;
    display: flex;
    align-items: center;
	font-weight: 900;
	font-family: var(--common-title-font);
	margin-bottom: .5em;
    text-shadow: #2b2b2b 1px 0 20px;
}
.page-title .title-short{
	color: var(--common-page-title-color);
	font-size: max(1.5rem, 1.7vw);
	font-family: var(--common-title-font);
    letter-spacing: var(--common-letter-spacing-title);
	font-weight: 400;
    margin-bottom: 0.5em;
    text-shadow: #2b2b2b 1px 0 20px;
}
.page-intro-article{
    margin-top: calc(var(--common-margin-width) / 1.5);
    margin-bottom: calc(var(--common-margin-width) / 1.5);
}
.page-intro-text{
	color: var(--common-color);
	font-size: max(1rem, 1vw);
	font-family: var(--common-title-font);
    letter-spacing: var(--common-letter-spacing-title);
	font-weight: 900;
	line-height: 2em;
    margin-bottom: 0.5em;
}
.section-title-row{
	padding: calc(var(--common-margin-width) / 1) 0;
}

.article-title {
	text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.article-title .title{
    color: var(--common-article-title-color1);
    font-size: max(1.7rem, 2.1vw);
    letter-spacing: var(--common-letter-spacing-title);
    text-align: center;
    display: flex;
    align-items: center;
	font-weight: 900;
	font-family: var(--common-title-font);
	line-height: 1.5em;
}
.article-title .title-short{
	color: var(--common-subtitle-color);
	font-size: max(1.5rem, 1.2vw);
	font-family: var(--common-subtitle-font);
    letter-spacing: var(--common-letter-spacing-title);
	font-weight: 400;
    margin-bottom: 0.5em;
}
.article-intro{
	line-height: var(--common-line-height-wide);
	letter-spacing: var(--common-letter-spacing-wide);
}
.article-title .decoration-line {
    height: 2px;
	margin-bottom: 2px;
    display: block;
}

.article-title .line1,
.article-title .line2,
.article-title .line3{
	width: 20%;
	/*opacity: 0;*/
	filter: opacity(0);
	transition: .8s;
}
.article-title .line1{
    background-color: #00813d;
}
.article-title .line2{
    background-color: #83a84a;
}
.article-title .line3{
    background-color: #ced866;
}
@media(max-width: 575px){
	.article-intro{
		line-height: var(--common-line-height);
		letter-spacing: 0;
	}
}
.title-line-animation-1{
	/*opacity: 1 !important;*/
	filter: opacity(1) !important;
	width: 100% !important;
}
.title-line-animation-2{
	/*opacity: 1 !important;*/
	filter: opacity(1) !important;
	width: 50% !important;
}
.title-line-animation-3{
	/*opacity: 1 !important;*/
	filter: opacity(1) !important;
	width: 20% !important;
}


.title-white .title,
.title-white .title-short{
	color: var(--common-background-color) !important;
	text-shadow: 0 0 5px #575757, 0 0 5px #575757;
}
.title-white .line1,
.title-white .line2,
.title-white .line3 {
    background-color: var(--common-background-color) !important;
    text-shadow: #2b2b2b 1px 0 20px;
}


/* :::::  [TEXT-STYLES: SECTION TITLE SUBTITLE] ::::: */
.section-title .subtitle{
	color: var(--common-subtitle-color);
	font-size: max(1.4rem, 1.4vw);
	letter-spacing: var(--common-letter-spacing-title);
	width: 100%;
	margin-top: 0.8em;
	padding-bottom: 0.1em;
	padding-left: 0.8em;
	border-left: solid 0.3em #8bbf73;
}

/* Lead
--------- --------- --------- ------- */
.common-lead {
	line-height: 2em;
	letter-spacing: 0.1em;
}

/* Message
--------- --------- --------- ------- */
.common-message {
	line-height: 1.7em;
	letter-spacing: 0.05em;
}




/* :::::  [TEXT-STYLES: COMPANY-NAME] ::::: */
.company-structure{
	font-weight: var(--common-font-weight-bold);
	margin-right: 0.3em;
	font-size: max(1.3rem, 1.3vw);
}
.company-name-azabu{
	font-family: "logo-line-std", sans-serif;
	font-weight: var(--common-font-weight-black);
	font-style: normal;
	letter-spacing: -0.02em;
	font-size: max(1.5rem, 1.5vw);
}
.company-name-printing{
	font-family: ta-kakugo-gf-02, sans-serif;
	font-weight: var(--common-font-weight-black);
	font-style: normal;
	letter-spacing: -0.06em;
	font-size: max(1.5rem, 1.5vw);
}




/* :::::  [TEXT-STYLES: SIGNATURE] ::::: */

/* Setting
--------- --------- --------- ------- */
.signature {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0 1em;

	font-style: var(--signature-font-style);
	font-weight: var(--signature-font-weight);
	line-height: var(--signature-line-height);
}
/*	役職	*/
.signature .representative-position {
	order: 1;
}
/*	名前	*/
.signature .representative-name {
	order: 2;

	font-size: var(--signature-name-font-size);
	line-height: var(--signature-name-line-height);
	letter-spacing: var(--signature-name-letter-spacing);
}

/* @media
--------- --------- --------- ------- */
/*	DisplayWidth < SM	*/
@media (max-width: 767px) {

	/* Setting
	--------- --------- --------- ------- */
/*	.signature {
		align-items: flex-start;
	}*/
}





/* :::::  [TEXT-STYLES: BLOCKQUOTE] ::::: */

/* Setting
--------- --------- --------- ------- */
.blockquote {
	color: #404040;
	font-size: var(--common-font-size-smaller);
	font-style: oblique;
	line-height: var(--common-line-height);
}





/* ::::: [IMAGE-STYLES] ::::: */

/* Picture
--------- --------- --------- ------- */
.common-picture {
}
img.common-picture,
.common-picture img {
	width: 100%;
	height: 100%;
	display: block;
	margin: 0;
	padding: 0;
	border: var(--common-border-1);
	border-radius: var(--common-border-radius);
    object-fit: cover;
    object-position: center;
    overflow: hidden;
}


/* Picture Thumbnail
--------- --------- --------- ------- */
.thumbnail {
}

img.common-picture.thumbnail,
.common-picture.thumbnail img {
	padding: 0.2rem;
}

a.common-picture.thumbnail:hover,
a.common-picture.thumbnail:focus {
	opacity: var(--common-hover-opacity);
}

/* Picture Portrait
--------- --------- --------- ------- */
.portrait {
}

img.common-picture.portrait,
.common-picture.portrait img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center;
}

/* Picture Landscape
--------- --------- --------- ------- */
.landscape {
}

img.common-picture.landscape,
.common-picture.landscape img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}


/* ::::: [BUTTON-STYLES: BTN] ::::: */

/* Setting
--------- --------- --------- ------- */
.btn {
	transition: var(--common-hover-transition);
}
.page-inner-row{
    display: flex;
    justify-content: center;
}
.page-innder-button {
	font-size: max(1.35rem, 1.2vw);
	font-weight: var(--button-font-weight);
	text-align: center;
	vertical-align: baseline;
    padding: 1em 3em .8em 0;
	letter-spacing: var(--button-letter-spacing);
	line-height: 1em;
	font-family: var(--common-title-font);
	margin: auto;
	display: block;
	width: max-content;
    position: relative;
}
.page-innder-button::after{
    width: 1.25rem;
    height: 1rem;
    margin-left: auto;
    content: "";
    background-image: url(../images/common/chevron-down-solid.svg);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    position: absolute;
    top: 1.2em;
    right: 0;
	transition: all 0.3s;
}
.page-innder-button::before{
    position: absolute;
    bottom: -1px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background-color: #83a84a;
}
.page-innder-button:hover,
.page-innder-button:hover::after,
.page-innder-button:hover::before{
	opacity: 0.7;
}
.page-innder-button:hover::after{
    top: 1.4em;
	transition: all 0.3s;
}


/* ::::: [BUTTON-STYLES: BTN-AND-MORE] ::::: */

/* btn-andmore
--------- --------- --------- ------- */
/*	common	*/
.btn-andmore,
.btn-outline-andmore{
	background-color: #00813d;
    color: #ffffff !important;
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	text-align: center;
	vertical-align: baseline;
    padding: 1em 1.5em;
	border-radius: 0.5em;
	letter-spacing: var(--button-letter-spacing);
	background-color: var(--button-point-color-1);
	color: var(--button-point-color-3);
	border-color: var(--button-point-color-1);
}

/*	normal	*/
.btn-andmore:hover,
.btn-andmore:focus,
.btn-andmore:active{
}

.btn-andmore .href-txt:after{
	content: '\f054';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-left: 0.5em;
}

/*	Outline	*/
.btn-outline-andmore{
	background: transparent;
	background: var(--button-point-color-3);
	color: var(--button-point-color-1);
	border-color: var(--button-point-color-1);
}
.btn-outline-andmore:hover,
.btn-outline-andmore:focus,
.btn-outline-andmore:active{
	background: var(--button-point-color-1);
	color: var(--button-point-color-3);
	border-color: var(--button-point-color-3);
	letter-spacing: var(--button-hover-letter-spacing);
}


/* btn-contact
--------- --------- --------- ------- */
.btn-contact {
	background-color: #00813d;
    color: #ffffff !important;
    border-radius: 0.5em;
	font-weight: 700;
	letter-spacing: 0.1em;
    padding: 1em 1.5em !important;
    font-size: max(1em, 1.2vw) !important;
}
/*	normal	*/
.btn-contact:hover,
.btn-contact:focus,
.btn-contact:active  {
}

/*	Outline	*/
.btn-outline-contact {
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	text-align: center;
	vertical-align: baseline;
	width: 10rem;
	height: 3rem;
	padding: 1em;
	border-radius: 6px;
	letter-spacing: var(--button-letter-spacing);
	background: var(--button-point-color-3);
	color: var(--button-point-color-1);
	border-color: var(--button-point-color-1);
}
.btn-outline-contact:hover,
.btn-outline-contact:focus,
.btn-outline-contact:active {
	opacity: var(--button-hover-opacity);
	background: var(--button-point-color-1);
	color: var(--button-point-color-3);
	border-color: var(--button-point-color-1);
	letter-spacing: var(--button-hover-letter-spacing);
}

/* btn-recruit
--------- --------- --------- ------- */
.btn-recruit{
	background-color: var(--button-point-color-1);
	color: var(--button-point-color-3) !important;
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	text-align: center;
	vertical-align: baseline;
	transition : all 0.3s;
	border-radius: 6px;
	letter-spacing: var(--button-letter-spacing-wide);
	min-width: 8em;
	border: solid 1px;
	border-color: var(--button-point-color-1);
}
/*	normal	*/
.btn-recruit:hover,
.btn-recruit:focus,
.btn-recruit:active {
	background: transparent;
	background: var(--button-point-color-3);
	color: var(--button-point-color-1) !important;
	border-color: var(--button-point-color-3);
	border: solid 1px;
	letter-spacing: var(--button-hover-letter-spacing-wide);
}


/* btn-application-requirements
--------- --------- --------- ------- */
.btn-application-requirements{
    border: solid 2px #5e8c51;
    border-radius: 6px;
    width: 80%;
    display: block;
    margin: auto;
    padding: 1rem 1.5rem;
	color: #525252;
}
.btn-application-requirements:hover,
.btn-application-requirements:focus,
.btn-application-requirements:active{
	background: #5e8c51;
	color: #ffffff;
}


/* btn-disabled
--------- --------- --------- ------- */
.btn-disabled{
	background-color: rgba(0, 0, 0, 0.4);
	color: var(--button-point-color-3);

	margin: auto;
	width: fit-content;
	padding: 1em 2em;
	text-align: center;
	border-radius: 6px;
	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	letter-spacing: var(--button-letter-spacing);

}


/* :::::  [LIST-SYLES: LIST-RELATEDLINK] ::::: */

/* Setting
--------- --------- --------- ------- */
.list-relatedlink {
	font-size: var(--common-font-size);
	line-height: var(--common-line-height);
	margin: 0;
	padding: 0;
}

.list-relatedlink,
.list-relatedlink li {
	list-style: none;
}

.list-relatedlink li {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0.2em;
	font-size: inherit;
}

.list-relatedlink li::before {
	content: "\f134";

	color: currentColor;
	font-family: bootstrap-icons;
	font-size: inherit;
	line-height: inherit;
}

/* flex
--------- --------- --------- ------- */
.list-relatedlink.d-flex,
.list-relatedlink.d-sm-flex,
.list-relatedlink.d-md-flex,
.list-relatedlink.d-lg-flex,
.list-relatedlink.d-xl-flex,
.list-relatedlink.d-xxl-flex {
	gap: 1em;
}

/* ROW & COLS
--------- --------- --------- ------- */
.list-relatedlink.row {
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}





/* ::::: [LIST-STYLES: HORIZONTAL] ::::: */

/* Setting
--------- --------- --------- ------- */
.list-horizontal {
	list-style: none;
	margin: 0;
	padding: 0;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0 1em;
}

/*	List Item	*/
.list-horizontal .list-item {
	margin: 0;
	padding: 0;
}

/* Delimiter Pipe
--------- --------- --------- ------- */
.list-horizontal.del-pipe {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0 0.5em;
}

.list-horizontal.del-pipe .list-item {
}
.list-horizontal.del-pipe .list-item + .list-item::before {
	content: "|";
	flex-grow: 0;
	flex-shrink: 1;
}

/* Delimiter Slash
--------- --------- --------- ------- */
.list-horizontal.del-slash {
	gap: 0 0.5em;
}

.list-horizontal.del-slash .list-item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0 0.5em;
}
.list-horizontal.del-slash .list-item + .list-item::before {
	content: "/";
	flex-grow: 0;
	flex-shrink: 1;
}

/* Delimiter Comma
--------- --------- --------- ------- */
.list-horizontal.del-comma {
}

.list-horizontal.del-comma .list-item {
}
.list-horizontal.del-comma .list-item:not(:last-child)::after {
	content: ",";
}

/* Delimiter Comma
--------- --------- --------- ------- */
.list-horizontal.del-comma-jp {
	gap: 0;
}

.list-horizontal.del-comma-jp .list-item {
}
.list-horizontal.del-comma-jp .list-item:not(:last-child)::after {
	content: "、";
}





/* :::::  [LIST-SYLES: LIST-ASTERISK] ::::: */

/* Setting
--------- --------- --------- ------- */
.list-asterisk {
	list-style: none;
	padding-left: 0;
}

.list-asterisk li {
	color: currentColor;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 0.3em;
}
.list-asterisk li::before {
	content: "※";
}



/* :::::  [LIST-SYLES: LIST-ANNOTATION] ::::: */

/* Setting
--------- --------- --------- ------- */
.list-annotation  {
	list-style: none;
	padding-left: 0;
}

.list-annotation  li {
	color: currentColor;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 0.3em;
}
.list-annotation  li::before {
	content: "注）";
}



/* ::::: [TABLE-STYLE: TABLE-HORIZONTAL] ::::: */
.table-horizontal {
	background-color: var(--table-background-color);
	color: var(--table-color);
	margin-bottom: 0;
	border-color: var(--table-border-color);
}

.table-horizontal>:not(:last-child)>:last-child>* {
    border-bottom-color: var(--table-border-color);
}

.table-horizontal>:last-child>:last-child>* {
    border-bottom-color: transparent;
}

/*	Table Col Width	*/
.table-horizontal .col-th {
	width: var(--table-th-width);
}
.table-horizontal .col-td {
	width: var(--table-td-width);
}

/*	Table Caption	*/
.table-horizontal .caption-top {
	color: var(--table-caption-color);
	font-weight: var(--table-caption-font-weight);
}

/*		*/
.table-horizontal .background-line {
}
.table-horizontal .background-line.odd {
}
.table-horizontal .background-line.even {
	background-color: var(--table-tr-zebra-background-color);
}
.table-horizontal .background-line.total-all {
}

/*	Table Headline	*/
.table-horizontal th {
	color: var(--table-th-color);
}
/*	Table Data	*/
.table-horizontal td {
    white-space: nowrap;
}
.table>:not(caption)>*>* {
	padding: 0.5rem 1rem;
}

/*	Table Header	*/
.table-horizontal thead {
}
.table-horizontal thead th {
	color: var(--table-th-color);
	color: currentColor;
	font-size: smaller;
	vertical-align: bottom;
	padding: 0.5em 1em;
	background-color: rgba(0, 0, 0, 0.2);
}

/*	Table Footer	*/
.table-horizontal tfoot {
}

/*	Table Body	*/
.table-horizontal tbody {
}

/*	Table Cell Decoration	*/
.cell-marge-total {
	text-align: right;
	vertical-align: bottom;
}
.cell-marge-total-all {
	text-align: right;
	font-weight: var(--common-font-weight-bold);
	vertical-align: bottom;
}


/* ::::: [TABLE-STYLE: TABLE-VERTICAL] ::::: */
.table-vertical {
	background-color: var(--table-background-color);
	color: var(--table-color);

/*	font-size: smaller;*/
	max-width: 100%;

	margin-bottom: 0;
	border-color: var(--table-border-color);
}
.table-vertical tbody,
.table-vertical td,
.table-vertical tfoot,
.table-vertical th,
.table-vertical thead,
.table-vertical tr {
	border-right: none;
	border-left: none;
	vertical-align: middle;
}

/*	Table Col Width	*/
.table-vertical th{
	font-weight: var(--common-font-weight);
	text-align: center !important;
}
.table-vertical td{
	padding: 0.5rem 2rem;
}

.table-vertical .col-th {
	width: var(--table-th-width);
	min-width: 8em;
	min-width: 6em;
}
.table-vertical .col-td {
	width: var(--table-td-width);
	min-width: 24em;
}

/*	Table Caption	*/
.table-vertical .caption-top {
	color: var(--table-caption-color);
	font-weight: var(--table-caption-font-weight);
}

/*	Table Headline	*/
.table-vertical th {
	background-color: var(--table-th-background-color);
	color: var(--table-th-color);
}
/*	Table Data	*/
.table-vertical td {
}

/*	Table Body	*/
.table-vertical tbody {
}




/* ::::: [EYECATCH] ::::: */

/* Setting
--------- --------- --------- ------- */
.eyecatch {
	background-color: rgba(0, 0, 0, 0.1);
	width: 100%;
	max-height: 100vh;
}
.eyecatch-wrapper {
	position: relative;
}

/*	Centering Block	*/
.eyecatch-centering {
	position: absolute;
    z-index: 100;
}

.eyecatch-centering .logo-img{
    width: max(10rem, 13vw);
    margin: auto;
}
.eyecatch-centering .logo-txt{
    margin: auto;
	font-size: max(1.5rem, 1.5vw);
	line-height: 2em;
    font-family: var(--common-title-font);
    letter-spacing: var(--common-letter-spacing-title);
	text-shadow: 0 0 5px #5b5b5b,0 0 5px #2b2b2b,0 0 5px #2b2b2b;
}

.eyecatch-read-decolate-1,
.eyecatch-read-decolate-2,
.eyecatch-read-decolate-3{
}
.eyecatch-read-decolate-1,
.eyecatch-read-decolate-3,
.eyecatch-read-decolate-2{
    background-repeat: repeat-x;
    background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em;
    background-position: right bottom;
    background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(246,89,115,0)), color-stop(0.1, rgba(246,89,115,0.02)), color-stop(0.5, rgba(255, 0, 0, 1)), color-stop(0.98, rgba(246,89,115,0)), to(rgba(246,89,115,0)) );
    background-image:
            -webkit-radial-gradient(center center,0.2em 0.1em,rgba(255, 0, 0, 1) 0,rgba(246,89,115,0) 0.1em,rgba(246,89,115,0) 0.2em),
            -webkit-radial-gradient(center center,0.4em 0.1em,rgba(255, 0, 0, 1) 0,rgba(246,89,115,0) 0.3em,rgba(246,89,115,0) 0.4em),
            -webkit-radial-gradient(center center,0.7em 0.1em,rgba(255, 0, 0, 1) 0,rgba(246,89,115,0) 0.6em,rgba(246,89,115,0) 0.7em),
            -webkit-radial-gradient(center center,7.1em 0.1em,rgba(255, 0, 0, 1) 0,rgba(246,89,115,0) 7em,rgba(246,89,115,0) 7.1em);
    background-image:
            radial-gradient(0.2em 0.1em at center center,rgba(255, 0, 0, 1),rgba(246,89,115,0)),
            radial-gradient(0.4em 0.1em at center center,rgba(255, 0, 0, 1),rgba(246,89,115,0)),
            radial-gradient(0.7em 0.1em at center center,rgba(255, 0, 0, 1),rgba(246,89,115,0)),
            radial-gradient(7.1em 0.1em at center center,rgba(255, 0, 0, 1),rgba(246,89,115,0));
}

/*	EyeCatch Title	*/
.eyecatch-title {
}

/*	EyeCatch Picture	*/
.elecatch-picture {
	max-width: 100%;
	margin: auto;
}
.elecatch-picture img {
	width: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}
#index-elecatch-video{
	max-width: 100%;
}

/* @media
--------- --------- --------- ------- */
/*	画面が横向き（横長）	*/
@media (orientation: landscape){
	.eyecatch {
		aspect-ratio: 16 / 9;
	}
}
/*	画面が縦向き（縦長）	*/
@media (orientation: portrait){
	.eyecatch {
		aspect-ratio: 9 / 16;
	}
}
/*
	DisplayWidth < XS
@media (max-width: 575px) {
	.eyecatch {
		background-color: #0000ff;
		aspect-ratio: auto;
		max-height: initial;
		height: 98vh;
	}
	.eyecatch-centering {
		top: 55%;
	}
}*/



/* ::::: [INTRODUCTION] ::::: */

/* Setting
--------- --------- --------- ------- */
.intro {
	background-color: rgba(0, 0, 0, 0.03);
	padding: 2em 0;
}

.topicpath {
	background-color: var(--common-background-color);
	color: var(--common-color);
	font-size: var(--common-font-size-smaller);
	line-height: var(--common-line-height);
	padding: 0.5rem 0;
}

.topicpath .breadcrumb {
}

.topicpath .breadcrumb .breadcrumb-item {
}

.topicpath .breadcrumb-item + .breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, ">");
}

.topicpath .breadcrumb .breadcrumb-item[aria-current=page] {
	font-weight: var(--common-font-weight-bold);
}





/* ::::: [ACCESSMAP] ::::: */

/* Setting
--------- --------- --------- ------- */
.accessmap {
	margin: 0;
	padding: 0;
	border: none;
	display: block;
	height: 50vh;
}

/* Setting
--------- --------- --------- ------- */
.btn-accessmap,
.btn-outline-accessmap {
	--button-point-color-1: #606060;
	--button-point-color-1: #ffffff;
	--button-point-color-3: rgba(255, 255, 255, 0.2);
	--button-font-size: var(--common-font-size-smaller);
	--button-font-weight: var(--common-font-weight-bold);
	--button-hover-opacity: var(--common-hover-opacity);

	font-size: var(--button-font-size);
	font-weight: var(--button-font-weight);
	text-align: center;
	vertical-align: baseline;
	width: auto;
	height: auto;
	padding: 0.3em 0.7em;
	border: solid 1px;
	border-radius: 3px;

	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0 0.3em;
}
.btn-accessmap::before,
.btn-outline-accessmap::before {
	content: "\F3E8";
	color: currentColor;
	font-family: bootstrap-icons;
	vertical-align: baseline;
}

.btn-accessmap:active,
.btn-outline-accessmap:active {
	opacity: var(--button-hover-opacity);
}

/*	Normal	*/
.btn-accessmap {
	background-color: var(--button-point-color-1);
	color: var(--button-point-color-1);
	border-color: var(--button-point-color-1);
}

.btn-accessmap:hover,
.btn-accessmap:focus,
.btn-accessmap:active {
	background: transparent;
	background: var(--button-point-color-3);
	color: var(--button-point-color-1);
	border-color: var(--button-point-color-1);
}

/*	Outline	*/
.btn-outline-accessmap {
	background: transparent;
	background: var(--button-point-color-3);
	color: var(--button-point-color-1);
	border-color: var(--button-point-color-1);
}

.btn-outline-accessmap:hover,
.btn-outline-accessmap:focus,
.btn-outline-accessmap:active {
	background: var(--button-point-color-1);
	color: var(--button-point-color-1);
	border-color: var(--button-point-color-1);
}





/* ::::: [HISTORY] ::::: */

.history-li {
	display: flex;
    flex-direction: row-reverse;
}

/* フローチャート
--------- --------- --------- ------- */
.history {
	counter-reset: number 0;
	background-color: #ffffff;
}
.history ul,
.history ol {
	margin-left: 0;
	padding-left: 0;
}

/* 処理終了
--------- --------- --------- ------- */
.history-end {
	background-color: rgba(0, 0, 0, 0.1);
	color: #ffffff;
	display: inline-block;
}
.history-end::before {
	content: "完了！";
	width: 100%;
	height: 100%;
	padding: 0.5em;
	border-radius: 3px;
	display: inline-block;
	background-color: rgba(255, 0, 0, 0.1);
}

/* フローチャート テキスト用設定
--------- --------- --------- ------- */
.history-text{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
	margin-bottom: 0;
}
.history-text dd{
}
.history-text dt{
	padding-right: 3rem;
}
.under-line{
	background: var(--common-color);
}

/* フローチャート 画像
--------- --------- --------- ------- */
.history-decorate{
	min-height: 3rem;
	width: 13px;
	position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
	margin-right: 3rem;
}
.history-dots {
	width: 12px;
	height: 12px;
	border-radius: 35%;
	background: #529ad9;
	z-index: 10;
    position: absolute;
    left: 1px;
    top: 0.5em
}

/* フローチャート ライン
--------- --------- --------- ------- */
.border-line {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    border: solid 1px #cccccc;
    z-index: 1;
}









/* ::::: [LOG-FEED] ::::: */

/* Setting
--------- --------- --------- ------- */
.log-feed {

	--feed-font-size-smaller: var(--common-font-size-smaller);
	--feed-font-weight-bold: var(--common-font-weight-bold);
	--feed-img-transition: var(--common-hover-transition);
	--feed-img-hover-opacity: var(--common-hover-opacity);

	--feed-hover-background-color: rgba(0, 0, 0, 0.05);
	--feed-list-border-color: rgba(0, 0, 0, 0.1);
	--feed-list-date-width: 8em;
}
.log-feed-wrapper {
}

/* Caption
--------- --------- --------- ------- */
.log-feed .log-feed-caption,
.log-feed-caption {
	font-weight: var(--common-font-weight-bold);
}

/* List
--------- --------- --------- ------- */
.log-feed ul.list-log-feed,
.log-feed ol.list-log-feed,
.log-feed .list-log-feed {
	list-style: none;
	margin: 0;
	padding: 0;
}
.list-log-feed {
}

/*	List Item	*/
.list-log-feed li.list-log-feed-item,
.list-log-feed .list-log-feed-item {
	margin: 0;
	padding: 0;
}
.list-log-feed-item {
	color: currentColor;
	width: 100%;
	padding: 0.5em;
}
.list-log-feed .list-log-feed-item:not(:last-child) {
	border-bottom: solid 1px var(--feed-list-border-color);
}

.list-log-feed-item a {
	color: currentColor;
    width: 100%;
    padding: 1.3em 1em;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 1em;
}
.list-log-feed-item a:hover,
.list-log-feed-item a:focus,
.list-log-feed-item a:active {
	background-color: var(--feed-hover-background-color);
}

.list-log-feed-item .item-date {
	flex-grow: 0;
	min-width: var(--feed-list-date-width);
	font-weight: var(--common-font-weight-bold);
}
.list-log-feed-item .item-title {
	flex-grow: 1;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: Ellipsis;
	min-width: 0;
}

/* Detail
--------- --------- --------- ------- */
.log-feed .detail-log-feed {
}
.detail-log-feed {
}

/*	Picture	*/
.log-feed .detail-log-feed .feed-detail-picture {
	display: block;
}
.log-feed .detail-log-feed .feed-detail-picture img {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center;
	display: block;
}
.log-feed .detail-log-feed a img {
	transition: var(--feed-img-transition);
}
.log-feed .detail-log-feed a:hover img,
.log-feed .detail-log-feed a:focus img,
.log-feed .detail-log-feed a:active img {
	opacity: var(--feed-img-hover-opacity);
}

/* Download Link
--------- --------- --------- ------- */
a.log-file-link,
.log-file-link {
	--link-hover-opacity: var(--common-hover-opacity);

	margin: 0;
	padding: 0;

	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0.2em;
}
.log-file-link::before {
	content: "\F756";

	color: currentColor;
	font-family: bootstrap-icons;
	vertical-align: baseline;
}

.log-file-link:hover,
.log-file-link:focus,
.log-file-link:active {
	opacity: var(--link-hover-opacity);
}

/* Related Links
--------- --------- --------- ------- */
a.log-related-link,
.log-related-link {
	--link-hover-opacity: var(--common-hover-opacity);

	margin: 0;
	padding: 0;

	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0.2em;
}
.log-related-link::before {
	content: "\F470";

	color: currentColor;
	font-family: bootstrap-icons;
	vertical-align: baseline;
}

.log-related-link:hover,
.log-related-link:focus,
.log-related-link:active {
	opacity: var(--link-hover-opacity);
}

/* Tag Clowd Link
--------- --------- --------- ------- */
a.log-category-link,
.log-category-link {
	--link-background-color: #606060;
	--link-color: #ffffff;
	--link-font-size: var(--common-font-size-smaller);
	--link-font-weight: var(--common-font-weight-bold);
	--link-line-height: var(--common-line-height);
	--link-hover-opacity: var(--common-hover-opacity);

	background-color: var(--link-background-color);
	color: var(--link-color);
	font-size: var(--link-font-size);
	font-weight: var(--link-font-weight);
	line-height: var(--link-line-height);
	margin: 0;
	padding: 0 0.4em;
	border-radius: 5px;

	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0.2em;
}
.log-category-link::before {
	content: "\F5AF";

	color: currentColor;
	font-family: bootstrap-icons;
	vertical-align: baseline;
}

.log-category-link:hover,
.log-category-link:focus,
.log-category-link:active {
	opacity: var(--link-hover-opacity);
}

/* Paging
--------- --------- --------- ------- */





/* ::::: [SNS-FEED] ::::: */

/* Setting
--------- --------- --------- ------- */
.sns-feed {

	--feed-font-size-smaller: var(--common-font-size-smaller);
	--feed-font-weight-bold: var(--common-font-weight-bold);
	--feed-img-transition: var(--common-hover-transition);
	--feed-img-hover-opacity: var(--common-hover-opacity);

	/*background-color: rgba(0, 0, 0, 0.1);*/
}
.sns-feed-wrapper {
	/*background-color: rgba(0, 0, 0, 0.1);*/
}

/*	Picture	*/
.sns-feed .feed-item-picture,
.sns-feed .feed-account-icon {
	display: block;

	/*background-color: rgba(0, 0, 0, 0.1);*/
}
.sns-feed .feed-item-picture img,
.sns-feed .feed-account-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.sns-feed a img {
	transition: var(--feed-img-transition);
}
.sns-feed a:hover img,
.sns-feed a:focus img,
.sns-feed a:active img {
	opacity: var(--feed-img-hover-opacity);
}


/* Instagram Feed
--------- --------- --------- ------- */
.sns-feed.instagram {
	/*background-color: rgba(255, 0, 0, 0.1);*/
}
.sns-feed.instagram .sns-feed-wrapper {
}

/* Feed Items
--------- --------- --------- ------- */
.sns-feed.instagram .feed-item {
	/*background-color: rgba(255, 0, 0, 0.1);*/
}

.sns-feed.instagram .feed-item-title {
	/*background-color: rgba(255, 0, 0, 0.1);*/
}

.sns-feed.instagram .feed-item-picture {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: block;

	/*background-color: rgba(255, 0, 0, 0.1);*/
}
.sns-feed.instagram .feed-item-picture img {
}

.sns-feed.instagram .feed-item-comment {
	/*background-color: rgba(255, 0, 0, 0.1);*/
}


/* Feed Account Items
--------- --------- --------- ------- */
.sns-feed.instagram .feed-account-item {
	display: block;

	/*background-color: rgba(255, 0, 0, 0.2);*/
}

.sns-feed.instagram .feed-account-icon {
	width: 64px;
	aspect-ratio: 1 / 1;
	display: block;

	/*background-color: rgba(255, 0, 0, 0.2);*/
}
.sns-feed.instagram .feed-account-icon img {
	border: solid 1px rgba(0, 0, 0, 0.3);
	border-radius: 100%;
}

.sns-feed.instagram .feed-account-name {
	font-size: var(--feed-font-size-smaller);
	font-weight: var(--feed-font-weight-bold);
	/*background-color: rgba(255, 0, 0, 0.2);*/
}

.sns-feed.instagram .feed-account-profile {
	font-size: var(--feed-font-size-smaller);
	/*background-color: rgba(255, 0, 0, 0.2);*/
}




.slide-container {
    width: 100%;
    margin: 50px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.slide-wrapper {
  display: flex;
  animation: slide-flow 60s infinite linear 1s both;
}
.slide{
  width: 380px;
  padding: 0 5px;
  margin: auto;
  object-fit:cover;
}
@media(max-width: 992px){
	.slide{
		width: 300px;
	}
}
@media(max-width: 768px){
	.slide{
		width: 250px;
	}
}
@media(max-width: 576px){
	.slide{
		width: 200px;
	}
}
.slide img{
    border-radius: 1em;
}
@keyframes slide-flow {
     0% {transform: translateX(0);}
	100% {transform: translateX(-100%);}
}





/* ::::: [COMMON-HEADER: OVER WRITE] ::::: */

/* Header Setting
--------- --------- --------- ------- */
header {
}

/* Page Header
--------- --------- --------- ------- */
#page-header {
    width: 97.5vw;
    margin: auto;
    margin-top: 0.5rem;
	border-radius: 0.5em;
}