@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');


/* =======================================================

* ======================================================= */

br.pc{display: inline;}
br.sp{display: none}

@media screen and (max-width: 760px) {
br.pc{display: none;}
br.sp{display: inline}
}


@media screen and (min-width: 1000px) {
a:hover{opacity: 0.8;}
}


.animate-fadeIn,
.animate-fadeIn2 {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 2s, visibility 2s, transform 2s;
}
/* フェードイン時に入るクラス */
.animate-is-fadeIn {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* =======================================================

* ======================================================= */
#fh5co-header{
position: absolute;
left: 0;
right: 0;
z-index: 9;
}
/*#fh5co-header #fh5co-main-nav ul li a{
color: #fff;
}
#fh5co-header #fh5co-main-nav ul li.has-sub > div > a:after {
color: #fff;
}

#fh5co-header #fh5co-main-nav ul li.has-sub .drop-down-menu .dropdown-menu-wrap a{
color: #7f7f7f;
}
#fh5co-header #fh5co-main-nav ul li.has-sub .drop-down-menu .dropdown-menu-wrap a:hover{
color: #FF5126;
}
*/
.fh5co-nav-toggle.dark i {
  background: #fff;
}
.fh5co-nav-toggle.dark.active i {
background: transparent;
}
.fh5co-nav-toggle.dark i::before, .fh5co-nav-toggle.dark i::after {
  background: #fff;
}
.fh5co-nav-toggle.dark.active i::before, .fh5co-nav-toggle.dark.active i::after {
  background: #fff;
}


/* =======================================================

* ======================================================= */

.main-visual {
    height: 100vh; /* ビューポートの高さに合わせる */
    display: flex; /* flexboxで子要素を配置 */
    flex-direction: column; /* 縦に並べる */
    justify-content: center; /* 垂直方向中央揃え */
    align-items: center; /* 水平方向中央揃え */
    position: relative; /* 相対位置に設定 */
    overflow: hidden; /* はみ出した部分を隠す */
}

.main-visual .bg-slider {
    width: 100%;
    height: 100%; /* .key-visualの高さと同じにする */
    overflow: hidden; /* 外に出る部分を隠す */
    position: relative;
}

.main-visual .bg-slider .slider-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.main-visual .bg-slider .slider-container .left-slide,
.main-visual .bg-slider .slider-container .right-slide {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.main-visual .image-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: inset(0 0 0 0); /* 必要に応じて調整 */
    z-index: 1; /* 初期状態では下のレイヤー */
}

.main-visual .image-wrapper img {
    width: 100%;  /* 親要素の幅に合わせる */
    height: 100%; /* 親要素の高さに合わせる */
    object-fit: cover;  /* 親要素に合わせて画像を切り抜く */
    object-position: center; /* 画像の中央に配置 */
}

.main-visual .image-wrapper.show {
    z-index: 2; /* 現在表示されるスライドを前面に */
    clip-path: inset(0 0 0 0); /* 表示全体 */
    transition: transform 8s ease-in-out; /* 拡大のアニメーションを追加 */
    transform: scale(1.1); /* 1.1倍に拡大 */
}

.main-visual .image-wrapper.hidden {
    transform: scale(1.0); /* 元のサイズに戻す */
    transition: transform 8s ease-in-out; /* 戻すアニメーションを追加 */
}

.main-visual .image-wrapper.leave {
    transition: clip-path 2.6s cubic-bezier(0.77,0,0.2,1), transform 1s ease-in-out; /* クリップパスと縮小のアニメーション */
    z-index: 2; /* 消えるときは前面に配置 */
    transform: scale(1.1); /* 拡大効果を保持 */
}

.main-visual .right-slide .image-wrapper.leave {
    clip-path: inset(0 0 100% 0); /* 上から下に消えていく */
}

.main-visual .left-slide .image-wrapper.leave {
    clip-path: inset(100% 0 0 0); /* 下から上に消えていく */
}

.main-visual .slider-indicator {
    position: absolute;
    bottom: 1.806vw;
    left: 5.556vw;
    display: flex;
    align-items: center;
    font-size: 1.2em;
    gap: 1.111vw;
    z-index: 3;
}

.main-visual .slider-indicator .current-slide,
.main-visual .slider-indicator .total-slides {
    color: #E91E24;
    font-size: 0.833vw;
    font-weight: 500;
    line-height: 1.5;
}

.main-visual .indicator-bar {
    position: relative;
    width: 9.722vw; /* インジケーターの幅 */
    height: 0.069vw;
    background-color: #E5E5E5;
    overflow: hidden;
}

.main-visual .indicator-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #E91E24;
    width: 0;
    transition: width 5s linear; /* 5秒かけてインジケーターが伸びる */
}

.main-visual .description {
    position: absolute;
    width: 35.417vw;
    height: 19.444vw;
    top: 11.25vw;
    left: 5.556vw;
    z-index: 3;
		display: table;
}

.main-visual .description h1 {
    font-size: 3.3vw;
		letter-spacing: 0.1em;
    line-height: 1.5;
    margin-bottom: 0.486vw;
		height: 100%;
    color: #fff;
    font-weight: 600;
		font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
		display: table-cell;
		vertical-align: middle;
}
.main-visual .description h1 img{
width: 70%;
}

.main-visual .description p.fade-in-text {
    font-size: 1.0vw;
    font-weight: 700;
    line-height: 1.8;
    color: #fff;
    transition: opacity 1s ease;
		padding-top: 0.6em;
}

.main-visual .description p.fade-in-text.is-visible {
    opacity: 1;
}




@media (max-width: 800px) {
.main-visual {
		overflow: visible;
}

.main-visual .bg-slider .slider-container {
		display: flex;
		flex-direction: column; /* 縦に並べる */
		width: 100%;
		height: 100%;
}

.main-visual .bg-slider .slider-container .left-slide,
.main-visual .bg-slider .slider-container .right-slide {
		width: 100%; /* 横幅を100%に */
		height: 50%; /* 高さを50%に変更 */
		position: relative;
		overflow: hidden;
}

.main-visual .right-slide .image-wrapper.leave {
		clip-path: inset(0 100% 0 0); /* 右から左に消えていく */
}

.main-visual .left-slide .image-wrapper.leave {
		clip-path: inset(0 0 0 100%); /* 左から右に消えていく */
}

.main-visual .description {
		position: absolute;
		width: calc(100% - 12.308vw); /* 左右のマージン分（24px + 24px）を引いた幅 */
		height: 57.795vw;
		top: 25.641vw;
		left: 6.154vw; /* 左側に24pxの余白を確保 */
		right: 6.154vw; /* 右側にも24pxの余白を確保 */
		margin: 0 auto; /* 自動マージンで中央寄せ */
		z-index: 3;
}

.main-visual .description h1 {
		font-size: 6.944vw;
		margin-bottom: 3.077vw;
		vertical-align: bottom;
}

.main-visual .description h1 img{
width: 70%;
}

.main-visual .description p.fade-in-text {
		font-size: 3.333vw;
}

}



/* =======================================================

* ======================================================= */

.site-copy{
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 15px;
text-align: left;
box-sizing: border-box;
}
@media screen and (max-width: 480px) {
.site-copy{
	font-size: 14px;
}
}
/* =======================================================

* ======================================================= */

#fh5co-intro h1{
font-family: "Noto Serif JP", serif;
}
#fh5co-intro h1 .red{
color: #E94624;
}


#fh5co-intro .fh5co-lead{
color: #000;
font-family: "Noto Serif JP", serif;
line-height: 1.6;
}

@media screen and (max-width: 760px) {
#fh5co-intro h1{
font-size: 22px;
}
#fh5co-intro .fh5co-lead{
font-size: 16px;
}
}



.fh5co-service-icon{
width: 110px;
height: 104px;
padding: 0;
margin: 0 0 1em;
background: none;
}
.fh5co-service-icon:before,
.fh5co-service-icon:after{
background: none;
border: none;
}

#fh5co-intro .row-bottom-padded-sm{
font-size: 15px;
}


/* =======================================================

* ======================================================= */

.boxed #fh5co-page {
  max-width: 100% !important;
  margin: 0 auto;
  background: #fff;
}
.boxed #fh5co-page .fh5co-slider .container {
	width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto;
}


/* =======================================================

* ======================================================= */
#news{
position: relative;
overflow: hidden;
margin-bottom: 60px;
}
#news h3{
float: left;
width: 12%;
margin-right: 5%;
font-size: 28px;
font-weight: 600;
}

#news h3 .en{
font-size: 55px;
font-weight: 600;
}
#news h3 .jp{
color: #666;
font-size: 16px;
}
#news h3 .jp:before{
content: "/";
margin-right: 1em;

}

#information-list{
float: left;
overflow: hidden;
width: 83%;
margin: 0 0 60px;
}

#information-list ul{
margin: 0 15px;
padding: 0;
border-top: 1px solid #f0f0f0;
max-height: 150px;
overflow-y: auto;
}
#information-list ul li{
clear: both;
overflow: hidden;
margin: 0 0;
padding: 0.6em;
list-style: none;
border-bottom: 1px solid #f0f0f0;
}
#information-list ul li a{
display: block;
position: relative;
color: #262626;
}
#information-list ul li a:before{
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e923";
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -0px;
	padding: 2px;
  font-size: 18px;
  color: #fff;
	background: #a8292d;
	border-radius: 50%;
}

#information-list ul li .date{
float: left;
width: 6.5em;
display: block;
}
#information-list ul li .info-title{
float: left;
display: block;
}


@media screen and (max-width: 1020px) {
#news h3{
float: none;
width: 100%;
margin-right: 0;
text-align: center;
}
#information-list{
float: none;
width: 100%;
margin: 0 0 60px;
}
}
@media screen and (max-width: 760px) {
#news h3{
font-size: 20px;
}
#information-list ul{
max-height: 300px;
}
}
@media screen and (max-width: 600px) {
#information-list ul li .date{
float: none;
}
#information-list ul li .info-title{
float: none;
padding-right: 1em;
}
}







/* =======================================================

* ======================================================= */
#page-contents{
margin-bottom: 60px;
}
#page-contents .col-md-4 .fh5co-service p{
font-size: 15px;
}

/* =======================================================

* ======================================================= */

#contact-link{
overflow: hidden;
position: relative;
padding:140px 1.5em 110px;
background: #fcf8f1;
}
#contact-link h3{
font-family: 'Noto Sans JP', sans-serif;
font-size: 34px;
font-weight: 800;
text-align: center;
}
#contact-link .text{
text-align: center;
}
#contact-link .container{
clear: both;
overflow: hidden;
position: relative;
}
#contact-link .container:after{
	position: absolute;
	top: 15%;
	left: 50%;
	margin: 0 0;
  padding: 0;
	content: "";
	width: 1px;
	height: 70%;
	background-color: #ccc;
}

@media screen and (max-width: 960px) {
#contact-link .container{
width: 100% !important;
}
}
@media screen and (max-width: 760px) {
#contact-link{
padding:4em 1.5em 3.5em;
}
#contact-link h3{
font-size: 26px;
}
#contact-link .text{
}
#contact-link .container:after{
display: none;
}
}
@media screen and (max-width: 540px) {
#contact-link h3{
font-size: 20px;
}
#contact-link .text{
width: 90%;
margin: 0 auto;
text-align: left;
}
}


#contact-link .tel-area{
float: left;
width: 50%;
padding:2em 6% 2em 9%;
}
#contact-link .tel-area .teltext{
font-size: 18px;
}
#contact-link .tel-area a.tel{
color: #000;
font-size: 34px;
font-weight: bold;
}
#contact-link .tel-area a.tel img{
width: 1em;
margin-right: 0.5em;
}
#contact-link .tel-area .teltime{
margin-left: 50px;
line-height: 1.5;
font-size: 14px;
}



#contact-link .form-area{
float: left;
width: 50%;
padding:3em 6%;
}

#contact-link .form-area a{
display: block;
padding:2.5em 1.5em;
color: #fff;
font-weight: bold;
line-height: 1;
text-align: center;
background: #A31F24;
border-radius: 9999px;
position: relative;
}
#contact-link .form-area a:after {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e923";
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px;
  font-size: 18px;
  color: #fff;
}



@media screen and (max-width: 1100px) {
#contact-link .tel-area{
padding:2em 6% 2em 6%;
}
#contact-link .form-area{
padding: 3em 6%;
}
}
@media screen and (max-width: 960px) {
#contact-link .tel-area{
padding:2em 4% 2em 4%;
}
#contact-link .form-area{
padding: 3em 4%;
}
#contact-link .tel-area a.tel img{
margin-right: 0.2em;
}
#contact-link .form-area a{
padding:2em 1.5em;
}

}
@media screen and (max-width: 760px) {
#contact-link .tel-area .teltext{
text-align: center;
}

#contact-link .tel-area .teltime{
margin-left: 45px;
}
#contact-link .tel-area{
clear: both;
float: none;
width: 100%;
padding: 6% 0 6% 0;
text-align: center;
}
#contact-link .form-area{
clear: both;
float: none;
width: 100%;
padding: 6% 0;
}
}

@media screen and (max-width: 480px) {
#contact-link .tel-area .teltext{
text-align: center;
}
#contact-link .tel-area a.tel{
font-size: 33px;
}
#contact-link .tel-area .teltime{
margin-left: 0;
}
#contact-link .tel-area{
clear: both;
float: none;
width: 100%;
padding: 6% 0 6% 0;
}
#contact-link .form-area{
clear: both;
float: none;
width: 90%;
margin: 0 auto;
padding: 6% 0;
}
}