@charset "UTF-8"; body {
    /* max-width: 1920px; */
    margin: 0 auto;
}

main {
    overflow: hidden;
}
/***********************************************
アニメーション
***********************************************/
img.lazyload {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
img.lazyloaded {
    opacity: 1;
}

.mask_list{
	-webkit-clip-path: circle(0% at 100% 100%);
	clip-path: circle(0% at 100% 100%);
	transition: clip-path 1.2s cubic-bezier(0.8, 0, 0.1, 1),
				-webkit-clip-path 1.2s cubic-bezier(0.8, 0, 0.1, 1);
}

@media screen and (min-width: 751px) {
	.mask_list.delay01{
		transition-delay: .5s;
	}
}


.mask_list.move{
	-webkit-clip-path: circle(185.5% at 100% 100%);
    clip-path: circle(185.5% at 100% 100%);
}

.maskLeft {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s ease-in;
}

.maskLeft.move {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.maskLeft_pseudo::before,.maskLeft_pseudo::after {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s ease-in;
}

.maskLeft_pseudo.move::before,.maskLeft_pseudo.move::after {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

#home_service .inner ul.items li {
	opacity: 0;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

#home_msg .inner h3.main_ttl img{
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s ease-in;
}
/***********************************************
汎用ボタン・タイトル
***********************************************/
h2.cmn_ttl {
    display: table;
}

h2.cmn_ttl > span {
    display: block;
}

h2.cmn_ttl .en {
    font-weight: 300;
    letter-spacing: -.01em;
    font-style: italic;
    font-family: var(--ff-mon);
    color: var(--theme_m_color);
    line-height: 1.2;
}

h2.cmn_ttl.small .en {
    font-size: 10rem;
}

h2.cmn_ttl .ja {
    font-weight: bold;
}

h2.cmn_ttl .ja .small {
    font-size: 2.2rem;
}

h2.cmn_ttl.big .en {
    font-size: 17.4rem;
    line-height: 1;
}

h2.cmn_ttl.big .ja {
    font-size: 3rem;
}

h2.cmn_ttl.text_ja_right .ja {
    text-align: right;
    padding-right: 5rem;
}

h2.cmn_ttl.box_right {
    margin-left: auto;
}

p.cmn_btn a {
    color: var(--theme_m_color);
    position: relative;
    padding-right: 8rem;
    display: table;
    margin: 0 auto;
	font-size: 2.8rem;
    font-weight: normal;
}

p.cmn_btn.small a {
    font-size: 2.6rem;
}

p.cmn_btn a::before, p.cmn_btn a::after {
    position: absolute;
    content: "";
}

p.cmn_btn a::before {
    width: 5.6rem;
    height: 5.6rem;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%;
    background: var(--theme_m_color);
}

p.cmn_btn.small a::before {
    width: 6.4rem;
    height: 6.4rem;
    right: 1.5rem;
}

p.cmn_btn a::after {
    background: url(../images/common/btn_deco01.svg) no-repeat 50% / contain;
    width: 4.5rem;
    height: 3.5rem;
    top: 0rem;
    right: -0.5rem;
}

p.cmn_btn.small a::after {
    width: 5.1rem;
    height: 4.1rem;
    right: 1rem;
}

p.cmn_btn.deco02 a::before {
    background: #fff;
}

.cmn_txt_box p {
    letter-spacing: .04em;
}

.cmn_txt_box p:not(:last-child) {
    margin-bottom: 4rem;
}

.cmn_lt01 {
    letter-spacing: .4em !important;
}
@media screen and (min-width: 751px) {
	p.cmn_btn a:hover{
		opacity: 1;
	}
	p.cmn_btn a:hover::before,
	#home_com .inner ul.items li a:hover::before{
		padding: 2px;
	background: linear-gradient(
		to right, 
		#009ad6ff 0%, 
		#2892d6 50%, 
		#0d4a98 100%
	  ); 
	  -webkit-mask: 
		linear-gradient(#fff 0 0) content-box, 
		linear-gradient(#fff 0 0);
	  -webkit-mask-composite: destination-out;
	  mask-composite: exclude;
	  pointer-events: none;
	}
	
	#home_recruit .inner:hover .txt_area p.cmn_btn.deco02 a::before {
		padding: 2px;
        background: linear-gradient(to right, #009ad6ff 0%, #2892d6 50%, #0d4a98 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        pointer-events: none;
    	background: #fff;
	}

	#home_recruit .inner:hover .txt_area p.cmn_btn.deco02 a::after {
		background-image: url("../images/common/btn_deco01_white.svg");
	}
}

/***********************************************
お知らせ　汎用
***********************************************/

ul.cmn_post_list li {
    border-bottom: 1px solid #c8c8c8;
    padding: 2rem 5rem 2rem 0;
    width: 100%;
	transition: .3s ease-in;
}

ul.cmn_post_list li:first-child {
    border-top: 1px solid #c8c8c8;
}

ul.cmn_post_list li:hover {
	opacity: .7;
}

ul.cmn_post_list li .post_wrap .f_wrap {
    align-items: center;
}

ul.cmn_post_list li .post_wrap p.cat {
    font-size: 1.2rem;
    color: #fff;
    background: var(--theme_m_color);
    min-width: 7rem;
    padding: 0 .5rem .20rem;
    text-align: center;
}

ul.cmn_post_list li .post_wrap p.date {
    font-size: 1.6rem;
    margin-right: 3rem;
    color: #505050;
}

ul.cmn_post_list li .post_wrap h3.ttl {
    margin-top: 1rem;
}

ul.cmn_post_list li .post_wrap h3.ttl a {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1.8rem;
    line-height: 1.5;
    color: #505050;
    font-weight: 400;
}

/***********************************************
TOP・事業内容　＞　４つの事業内容　
***********************************************/
ul.cmn_sv_items {
    margin: 0 -2rem -3rem;
}

ul.cmn_sv_items li {
    width: calc(50% - 4rem);
    margin: 0 2rem 4.5rem;
}

ul.cmn_sv_items li .img_wrap {
    position: relative;
}

ul.cmn_sv_items li .img_wrap p.img {
    border-radius: 1rem;
    overflow: hidden;
    padding-top: 32rem;
    margin-bottom: 1.5rem;
}

ul.cmn_sv_items li .img_wrap p.txt {
    position: absolute;
    font-size: 1.8rem;
    font-weight: 400;
    color: #fff;
    bottom: 4rem;
    left: 4rem;
    line-height: 1.75;
}

ul.cmn_sv_items li h3.ttl a {
    font-size: 3.2rem;
    padding: 2rem 15rem 2rem 2.5rem;
    display: block;
	font-weight: 500;
}

ul.cmn_sv_items li h3.ttl a::before {
    right: 2.5rem;
}

ul.cmn_sv_items li h3.ttl a:hover::before{
	mask-composite:inherit;
	background: var(--theme_m_color);
}

ul.cmn_sv_items li h3.ttl a::after {
    right: 2rem;
	top: 1rem;
}


/***********************************************
汎用パーツ
***********************************************/

.cmn_dl_wrap dl.dl_list dt , .cmn_dl_wrap dl.dl_list dd {
    padding: 2.4rem 0;
    display: flex;
    align-items: center;
}

.cmn_dl_wrap dl.dl_list dt {
    width: 27rem;
    border-top: .1rem solid;
    font-weight: 500;
    position: relative;
    border-color: var(--theme_m_color);
    color: var(--theme_m_color);
    padding-left: .5rem;
    padding-right: 2rem;
    font-size: 2rem;
}

.cmn_dl_wrap dl.dl_list:last-of-type dt {
    border-bottom: .1rem solid var(--theme_m_color);
}

.cmn_dl_wrap dl.dl_list dd {
    border-top: .1rem solid #cccccc;
    width: calc(100% - 27rem);
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 2rem;
}

.cmn_dl_wrap dl.dl_list:last-of-type dd {
    border-bottom: .1rem solid #cccccc;
}

.cmn_dl_wrap dl dd ul.location_list {
    margin-bottom: -3rem;
}

.cmn_dl_wrap dl dd ul.location_list li {
    margin-bottom: 3rem;
}

.cmn_dl_wrap dl dd ul.location_list li h3.ttl {
    color: var(--theme_m_color);
    font-size: 2rem;
    padding-left: 2rem;
    position: relative;
	font-weight: 500;
}

.cmn_dl_wrap dl dd ul.location_list li h3.ttl::before {
    position: absolute;
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    background: var(--theme_m_color);
    top: 25%;
    left: 0;
}

@media (max-width: 750px) {
    .cmn_dl_wrap dl.dl_list dt {
        width: 100%;
        font-size: 4.533333333vw;
        display: block;
        padding: 0;
        padding-top: 20px;
        margin-bottom: 10px;
        position: relative;
    }

    .cmn_dl_wrap dl.dl_list:last-of-type dt {
        border-bottom: none;
    }

    .cmn_dl_wrap dl.dl_list dd {
        width: 100%;
        display: block;
        border-top: none;
        padding: 0;
        padding-bottom: 25px;
        line-height: 1.75;
        font-size: 4.533333333vw;
    }

    .cmn_dl_wrap dl.dl_list:last-of-type dd {
        border-color: var(--theme_m_color);
    }
}

.cmn_col3_list {
    margin: 0 -10px -20px;
}

.cmn_col3_list li {
    width: calc(33.3333% - 20px);
    margin: 0 10px 20px;
}

.cmn_col3_list li:hover {
    cursor: pointer;
}

.cmn_col3_list li .area_a {
    margin-bottom: 10px;
}

@media (max-width: 750px) {
    .cmn_col3_list {
        margin: 0 0 -20px;
    }

    .cmn_col3_list li {
        width: 100%;
        margin: 0 0 20px;
    }

    .cmn_col3_list li .area_a {
        margin-bottom: 10px;
    }
}

/***********************************************
汎用パーツ
***********************************************/
.cmn_col2_list {
    margin: 0 -10px -20px;
}

.cmn_col2_list li {
    width: calc(50% - 20px);
    margin: 0 10px 20px;
}

.cmn_col2_list li:hover {
    cursor: pointer;
}

.cmn_col2_list li .area_a {
    margin-bottom: 10px;
}

@media (max-width: 750px) {
    .cmn_col2_list {
        margin: 0 0 -20px;
    }

    .cmn_col2_list li {
        width: 100%;
        margin: 0 0 20px;
    }

    .cmn_col2_list li .area_a {
        margin-bottom: 10px;
    }
}

ol.cmn_num00_list li::before {
    content: counter(ol_cnt, decimal-leading-zero);
}

/*============================
汎用　＞　お問合わせ
============================*/
#contact_area {
    position: relative;
	overflow: hidden;
    z-index: 1;
	padding-top: 10rem;
}
@media screen and (min-width: 1600px) {
	#contact_area {
		padding-top: 14rem;
	}
}

#contact_area:not(.recruit_entry)::after {
    position: absolute;
    content: "";
    background: url("../images/home/home_line.png") no-repeat 50% / contain;
    width: 196rem;
    height: 57.8rem;
    top: 44.5%;
    left: 50%;
    transform: translate(-50%, -50%);
	opacity: .4;
}

#contact_area .base_width {
    max-width: 1260px;
}

#contact_area .bg_wrap {
    background: url("../images/common/contact_bg.png") no-repeat 50% / cover;
    border-radius: 1rem;
    min-height: 47rem;
    padding: 0 10rem 4rem;
}

#contact_area .bg_wrap .ttl_wrap {
    position: relative;
    top: -6rem;
    margin-bottom: -2rem;
	z-index: 1;
}

#contact_area .bg_wrap .ttl_wrap h2.main_ttl {
    font-family: var(--ff-mon);
    font-size: 13.4rem;
    letter-spacing: -.01em;
    text-align: center;
    color: var(--theme_m_color);
    line-height: 1;
    font-weight: 300;
    margin-bottom: 3rem;
    font-style: italic;
}

#contact_area .bg_wrap .ttl_wrap p.main_txt {
    font-size: 3.2rem;
    color: var(--theme_m_color);
    letter-spacing: .04em;
    font-weight: bold;
    text-align: center;
}

#contact_area .bg_wrap ul.info_list {
    width: 94rem;
    margin: 0 auto;
    justify-content: space-between;
    gap: 1rem;
	position: relative;
	z-index: 1;
}

#contact_area .bg_wrap ul.info_list li {
    width: 46rem;
}

#contact_area .bg_wrap ul.info_list p a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--theme_m_color);
    color: #fff;
    height: 17rem;
    position: relative;
    padding: 0 5rem 0 10rem;
	border: .2rem solid var(--theme_m_color);
}

#contact_area .bg_wrap ul.info_list p a::before {
    position: absolute;
    content: '';
    background: no-repeat 50% / contain;
    top: 50%;
    transform: translateY(-50%);
    left: 7rem;
}

#contact_area .bg_wrap ul.info_list p.tel a::before {
    background-image: url("../images/common/tel_white.svg");
    width: 2.5rem;
    height: 3.7rem;
}

#contact_area .bg_wrap ul.info_list p.tel a span {
    display: block;
}

#contact_area .bg_wrap ul.info_list p.tel a .num {
    font-size: 4.2rem;
    font-weight: 600;
    line-height: 1.2;
	font-family: var(--ff-mon);
}

#contact_area .bg_wrap ul.info_list p.tel a .open {
    font-size: 1.6rem;
    font-weight: bold;
}

#contact_area .bg_wrap ul.info_list p.contact a {
    font-size: 4rem;
    font-weight: 600;
    font-family: var(--ff-mon);
}

#contact_area .bg_wrap ul.info_list p.contact a::before {
    background-image: url("../images/common/mail_white.svg");
    width: 3.4rem;
    height: 2.5rem;
    left: 9rem;
}

@media screen and (min-width: 751px) {
	#contact_area .bg_wrap ul.info_list p.contact a:hover{
		background: #fff;
		color: var(--theme_m_color);
		opacity: 1;
	}
	
	#contact_area .bg_wrap ul.info_list p.contact a:hover::before{
		background-image: url("../images/common/mail_blue.svg");
		opacity: 1;
	}
}