@charset "utf-8";

@import url("setting.css");

a{ color: var(--color-02); text-decoration:none; transition: 0.3s all;}
a:hover{ color: var(--color-01); text-decoration: none;}
a:focus{ text-decoration: none;}

.container{ max-width: 1240px; padding: 0 20px; }
.container.w2{ max-width: 1400px; }
.container.w3{ max-width: 951px; }
.container.w3{ max-width: 728px; }
.container.w4{ max-width: 546px; }
.container.bnr{ max-width: 1320px; }

section{ padding: 80px 0; }
section h2{ margin-bottom: 40px; font-weight: 700; text-align: center; }

.box_wrapper{ margin: -10px auto; }
.box_wrap{ margin: 10px auto; overflow: hidden; }

/*** LOADING ***/
#loader{ width: 100%; height: 100%; background: var(--color-bg); position: fixed; top: 0px; left: 0px; z-index: 9999;}

.lds-roller { color: var(--color-01);}
.lds-roller,
.lds-roller div,
.lds-roller div:after {
  box-sizing: border-box;
}
.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7.2px;
  height: 7.2px;
  border-radius: 50%;
  background: currentColor;
  margin: -3.6px 0 0 -3.6px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 62.62742px;
  left: 62.62742px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 67.71281px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 70.90963px;
  left: 48.28221px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 70.90963px;
  left: 31.71779px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 67.71281px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 62.62742px;
  left: 17.37258px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12.28719px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader_center { margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000;}
/*** /LOADING ***/

/*** HEADER ***/
header{ width: 100%; height: 70px; padding: 0; background: #fff; border-bottom: 1px solid #ccc; position: fixed; top: 0; z-index: 999; }

.logo{ float: left; margin: 14px 0; padding: 0; background: url('../../img/pic-logo.webp') center center no-repeat; background-size: cover; text-indent: -9999px;}
.logo a{ width: 176px; height: 40px; display: block; }

header.active{ height: 89px; position: fixed; z-index: 999;}
header.active .top{ display: none;}
/*** /HEADER ***/

/*** MENU ***/
ul.menu{ float: right; margin: 5px 0 0 0; padding: 0; list-style: none; }
ul.menu li{ float: left; margin: 0 0 0 25px; color: var(--color-01); font-size: 1.125em; }
ul.menu li a{ padding: 15px 0; color: var(--color-02); display: block; }
ul.menu li a:hover, ul.menu li a.current{ color: var(--color-01); }

.dropbtn { margin: 0; padding: 15px 0; color: var(--color-02); background: none; border: 0; }
.dropdown { position: relative; display: inline-block;}
.dropdown-content { padding: 5px 20px; font-size: .813em; display: none; position: absolute; top: 55px; background-color: var(--color-bg); min-width: 170px; box-shadow: 5px 5px 16px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a { color: var(--color-02); padding: 10px 0px !important; text-align: left; text-decoration: none; display: block;}
.dropdown-content a:hover {background-color: var(--color-bg);}
.dropdown:hover .dropdown-content { animation: menu_fade_in ease-in-out .3s 1 forwards; display: block;}
.dropdown:hover .dropbtn, .dropdown .dropbtn.current { color: var(--color-01) !important;}

.menu_fade_out { animation: menu_fade_out ease-in-out .3s 1 forwards; display: none;}

@keyframes menu_fade_in{
  0%   { top: 65px; opacity: 0; }
  100% { top: 55px; opacity: 1; }
}
@keyframes menu_fade_out{
  0%   { top: 55px; opacity: 1; }
  100% { top: 65px; opacity: 0; }
}
/*** /MENU ***/

/*** SIDEBAR ***/
.btn_toggle{ display: none; }

#sidebar { width: 250px; height: 100vh; position: fixed; top: 0; right: -250px; z-index: 998; background: var(--color-01); color: var(--color-03); transition: all 0.3s; overflow-y: scroll; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);}
#sidebar.active { right: 0;}
.overlay { width: 100vw; height: 100vh; display: none !important; position: fixed !important; background: rgba(0, 0, 0, 0.7); z-index: 901; opacity: 1; transition: all 0.5s ease-in-out;}
.overlay.active { display: block !important; opacity: 1;}

#sidebar .accordion_header{ height: 70px; background: var(--color-03); }
#sidebar .accordion{ height: calc(100vh - 80px); border: 0; overflow-y: auto !important;}
#sidebar .accordion-item{ border: 0; background: none; }
#sidebar .accordion-header{ border: 0; border-radius: 0; }
#sidebar .accordion-collapse{ border: 0; }
#sidebar .accordion-body{ padding: 5px; background: #fff; }
#sidebar .accordion-body a{ padding: 10px 15px; color: #000; display: block; }
#sidebar .accordion-button{ color: #fff; border: 0; border-radius: 0 !important; box-shadow: none; }
#sidebar .accordion-button.t2, #sidebar .accordion-button.t2::after{ background: #a31d1f !important; }
#sidebar .accordion-button.nocollapsed, .accordion-button.nocollapsed::after{ color: #fff; background: none; background: var(--color-01); }
#sidebar .accordion-button[aria-expanded="false"]{ color: #fff; background: var(--color-01);}
#sidebar .accordion-button[aria-expanded="true"]{ color: #fff; background: #a31d1f;}
#sidebar .accordion-button[aria-expanded="false"]:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;}
#sidebar .accordion-button[aria-expanded="true"]:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;}
/*** /SIDEBAR ***/

/*** BREADCRUMB ***/
nav[aria-label="breadcrumb"]{ padding:8px 0 7px 0; font-size: .875em; color: #999; background: #f9f9f9; border-top: 0px solid #ddd; border-bottom: 1px solid #ddd; }
ol.breadcrumb{ margin: 0; padding: 0;}
.breadcrumb-item:before{ color: #999 !important; }
.breadcrumb-item.active{ color: var(--color-01); font-weight: bold; }
ol.breadcrumb a{ color: #999; }
ol.breadcrumb a:hover{ color: var(--color-01); }
/*** /BREADCRUMB ***/

/*** CONTACT ***/
.gmap{ width: 100%; height: 355px; margin-top: 10px; }
/*** /CONTACT ***/

/*** CNT ***/
main{ min-height: calc(100vh - 158px); margin-top: 70px; background: #fff; }

.bg2{ background: var(--color-bg2); }

.slick_wrap{ margin: 0 -68px; }

.box_wrap{ margin: 12px 0px; background: #f9f7f2; position: relative; transition:0.3s all; }
.box_wrap.bordered{ padding: 0px; border: 1px solid #ccc; }
.box_img_wrap{ position: relative; background: #fff; overflow: hidden; -webkit-transform: perspective(0);}
.box_name{ width: 100%; padding: 5px 10px 7px 20px; color: #fff; position: absolute; bottom: 0; z-index: 2; background: rgba(0, 0, 0, .5); }
.box_overlay{ width: 100%; height: 100%; position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0); transition:0.3s all; }
.box_overlay i{ color: #fff; font-size: 3em; opacity: 0; transition:0.3s all; }
.box_img{ transition:0.2s all; }
.box_img img{ width: 100%; height: auto; }
.box_txt_wrap{ padding: 25px; }
.box_txt_wrap b{ margin: 0 0 20px 5px; font-size: 2em; line-height: 1em; letter-spacing: 5px; display: block; }
.box_txt{ margin: 0 auto; text-align: center; }
.box_txt.w-100{ max-width: 100%; margin: 0 auto; }
.box_txt h5{ line-height: 1.325em; }
.box_txt span{ display: inline-block; }
.box_txt span:after{ content: '、'; }
.box_txt span:last-child:after{ content: ''; }
.box_txt button{ margin: 20px 0 0 0; }
.box_txt p{ height: auto; padding: 0; line-height: 1.5em; text-align: center !important; }
.box_txt span{ color: var(--color-05); }
.box_wrap:hover{ box-shadow: 0 0 10px rgba(0, 0, 0, .45); }
.box_wrap:hover .box_img{ transform: scale(1.1, 1.1); }
.box_wrap:hover .box_overlay{ background: rgba(0, 0, 0, .5); }
.box_wrap:hover .box_overlay i{ opacity: 1; }
.box_wrap:hover .box_txt p{ color: var(--color-01); }
.box_wrap:hover .box_txt button{ color: var(--color-01) !important; background: #fff !important; border-color: var(--color-01) !important; }

.quote_1{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.quote_2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

#pdt .box_txt h5, .pdt .box_txt h5{ height: auto; }
#pdt .box_txt span, .pdt .box_txt span{ height: 20px; }

#faith .faith_wrap{ height: 360px; background: url('../../img/bg-faith.webp') center center no-repeat; background-size: cover; position: relative; overflow: hidden; }
#faith .faith_wrap .faith_img{ width: 580px; position: absolute; bottom: 0; }
#faith .faith_wrap .faith_txt{ width: 530px; position: absolute; top: 70px; right: 70px; }
#faith .faith_wrap .faith_txt h2{ margin-bottom: 10px; color: var(--color-01); font-size: 2em; text-align: left; }
#faith .faith_wrap .faith_txt span{ margin-bottom: 25px; color: #666999; font-size: 1.5em; display: block; }
#faith .faith_wrap .faith_txt p{ font-size: 1.125em; line-height: 1.625em; text-align: justify; }

#inner_bnr{ height: 200px; padding: 0; position: relative; display: flex; align-items: stretch; }
#inner_bnr .inner_bnr_wrap{ width: 100%; height: 200px; display: flex; align-items: center; position: absolute; z-index: 2; }
#inner_bnr .container{ padding: 0 20px; color: var(--color-03); }
#inner_bnr .container h2{ margin-bottom: 10px; letter-spacing: 5px; margin-right: -5px; }
#inner_bnr .container span{ font-size: 1.25em; letter-spacing: 5px; margin-right: -5px; }
#inner_bnr .container h2, #inner_bnr .container span{ display: block; text-align: right; }
.inner_bnr_sharp{ width: 40%; color: var(--color-03); background: var(--color-01); position: relative; order: 2; }
.inner_bnr_sharp_triangle{ width: 0; height: 0; border-bottom: 200px solid var(--color-01); border-left: 200px solid transparent; position: absolute; top: 0; left: -200px; }
.inner_bnr_img{ width: 60%; order: 1; }

#inner h3{ margin-bottom: 20px; color: var(--color-01); font-weight: 700; }
#inner h4{ margin-bottom: 10px; font-weight: 700; line-height: 1.25em; }
#inner p{ line-height: 1.75em; text-align: justify; }

.inner_grip{ display: flex; }
.inner_grip.abt01 .inner_grip_item:nth-child(1){ width: calc(100% - 410px); }
.inner_grip.abt01 .inner_grip_item:nth-child(2){ width: 410px; text-align: right; }
.inner_grip.abt02{ margin-top: 40px; }
.inner_grip.abt02 .inner_grip_item img{ width: 95%; }
.inner_grip.abt02 .inner_grip_item:nth-child(1){ width: 650px; }
.inner_grip.abt02 .inner_grip_item:nth-child(2){ width: calc(100% - 650px); }
.inner_grip.abt03{ margin-top: 40px; }
/*.inner_grip.abt03 .inner_grip_item{ width: 100%; }*/
.inner_grip.abt04{ margin-top: 40px; }
.inner_grip.abt04 .inner_grip_item img{ width: 90%; }
.inner_grip.abt04 .inner_grip_item:nth-child(1){ width: calc(100% - 300px); }
.inner_grip.abt04 .inner_grip_item:nth-child(2){ width: 300px; text-align: right; }

.inner_grip.qty00{ margin: 0 0 80px 0; }
.inner_grip.qty00 .inner_grip_item:nth-child(1){ width: 400px; text-align: left; }
.inner_grip.qty00 .inner_grip_item:nth-child(2){ width: calc(100% - 400px); padding-left: 40px; }
.inner_grip.qty01{ flex-wrap: wrap; }
.inner_grip.qty01 .inner_grip_item{ width: 100%; }
.inner_grip.qty01 .inner_grip_item:nth-child(2){ text-align: center; }
.inner_grip.qty01 .inner_grip_item .dk{ width: 90%; margin: 0 auto; display: block; }
.inner_grip.qty01 .inner_grip_item .mb{ display: none; }
.inner_grip.qty02{ margin-top: 80px; }
.inner_grip.qty02 .inner_grip_item:nth-child(1){ width: calc(100% - 400px); padding-right: 40px; }
.inner_grip.qty02 .inner_grip_item:nth-child(2){ width: 400px; text-align: right; }

.inner_grip{ display: flex; }
.inner_grip.serv01 .inner_grip_item:nth-child(1){ width: 50%; padding-right: 40px; }
.inner_grip.serv01 .inner_grip_item:nth-child(2){ width: 50%; text-align: right; }

.pdt_wrap{ display: flex; }
.pdt_img{ width: 300px; height: 300px; margin-right: 40px; border: 1px solid #ccc; }
.pdt_img img{ width: 100%; height: auto; }
.pdt_txt{ width: calc(100% - 340px); }
.pdt_txt h3{ line-height: 1.25em; }
.pdt_txt h3 span{ margin-top: 5px; color: var(--color-05); font-size: .875em; font-weight: 400; line-height: 1.25em; display: block; }
.pdt_txt .spec{ margin: 15px 0; display: flex; }
.pdt_txt .spec_cap{ width: 105px; margin-right: 20px; padding: 0px 20px 0 0; color: var(--color-04); border-right: 2px solid var(--color-04); text-align-last: justify; }
.pdt_txt .spec_txt{ width: calc(100% - 145px); }
.pdt_txt .spec_txt p{ margin: 0; padding: 0; line-height: 1.5em !important; }
.pdt_txt .spec_txt ul{ margin: 0 0 0 25px; }
.pdt_txt .spec_txt img{ margin-top: 10px; }
/*** /CNT ***/

/*** PAGINATION ***/
.pagination_wrap{ width: 100%; overflow: hidden; }
.pagination{ float: left; margin: 30px 0 0 0; }
.pagination a{ color: #666; }
.pagination a:hover{ color: #666; background: #f6f6f6; }
.pagination .active .page-link{ background: var(--color-01); border-color: #dee2e6; }
.pagination .active .page-link:hover{ color: var(--color-03); }

.pagination_jump{ float: right; margin: 30px 0 0 0; padding: 0; list-style: none; }
.pagination_jump select.form-select{ width: auto; min-height: 38px; margin: 0 5px; padding: 0 35px 0 10px; background-color: var(--color-03); border: 1px solid #dee2e6; border-radius: 3px; display: inline-block; cursor: pointer; }
/*** /PAGINATION ***/

/*** FOOTER ***/
footer{ margin: 0; padding: 10px 0; color: var(--color-03); background: var(--color-01); overflow: hidden; }

footer .flogo{ float: none; width: 220px; height: 50px; margin: 14px auto; padding: 0; background: url('../../img/pic-flogo.webp') center center no-repeat; background-size: cover; text-indent: -9999px;}
footer .flogo a{ width: 176px; height: 40px; display: block; }
footer .finfo{ float: none; margin: 23px 0 0px 0; padding: 0; list-style: none; overflow: hidden; text-align: center; }
footer .finfo li{ margin: 5px 15px !important; display: inline-block; overflow: hidden; }
footer .finfo li a{ color: var(--color-03); }
footer .finfo li i{ float: left; width: 16px; margin: 3px 8px 0 0; text-align: center; }
footer .finfo li p{ float: left; width: calc(100% - 24px); display: inline-block;}

.copyright{ padding: 18px 0; color: #ccc; font-size: .75em !important; background: #222; text-align: center !important; }
/*** /FOOTER ***/

/*** CAPTCHA ***/
.captcha_wrap{ float: left; margin-top: 34px; }
/*** /CAPTCHA ***/

/*** BTN ***/
.btn{ padding: 10px 20px 12px 20px; border-radius: 0; }
.btn_wrap{ width: 100%; margin:30px 0 0 0; }

.btn-primary{ background: var(--color-01) !important; border-color: var(--color-01) !important; }
.btn-primary:hover, .btn-primary:focus{ background: var(--color-02) !important; border-color: var(--color-02) !important;}
/*** /BTN ***/

/*** POPOVER ***/
[data-bs-toggle="popover"]{ cursor: pointer; }
.popover{ padding:5px; border: 5px solid #ccc; border-radius: 10px; }
.popover-arrow{ display: none !important; }
/*** /POPOVER ***/


@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chrome */
}

@media all and (-ms-high-contrast:none){ /* IE 11 */
     *::-ms-backdrop, .label_name{ }
}

@supports (display:-ms-grid) { /* Edge */
}