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

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body {
    width: 100%;
    height: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 0.08em;
    line-height: 1.6;
    color: var(--black);
    background-color: #fff;
    box-sizing: border-box;
    font-weight: 400;
}
a {
    color: var(--black);
    font-family: 'Verdana', sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
}
a:hover{
    transition: all 0.3s ease;
}
.anchor{
    padding-top: 100px !important;
    margin-top: -100px !important;
}
:root{
    --gray: #E2E2E2;
    --black: #141414;
    --white: #fff;
}
.bg_w{
    background-color: var(--white);
}
.mt110{
    margin-top:11rem!important;
    }
.mb110{
    margin-bottom:11rem!important;
    }
.pt110{
    padding-top:11rem!important;
    }
.pb110{
    padding-bottom:11rem!important;
    }
@media only screen and (max-width: 768px){
    .mt110{
        margin-top:8rem!important;
    }
    .mb110{
        margin-bottom:8rem!important;
    }
    .pt110{
        padding-top:8rem!important;
        }
    .pb110{
        padding-bottom:8rem!important;
        }
}
@media only screen and (max-width: 600px){
    body {
        font-size: 1.5rem;
        letter-spacing: 0.1em;
        line-height: 1.6;
    }
    .mb20 {
        margin-bottom: 1rem!important;
    }
}
@media only screen and (max-width: 390px){
    .mt110{
        margin-top:5rem!important;
    }
    .mb110{
        margin-bottom:5rem!important;
    }
    .pt110{
        padding-top:5rem!important;
        }
    .pb110{
        padding-bottom:5rem!important;
        }
}


/* ------------------------------------- /
/   header
/* ------------------------------------- */
header {
    position: fixed;
    top: 0;
    padding: 2rem 0;
    color: var(--black);
    width: 100%;
    box-sizing: border-box;
    z-index: 999999;
    background-color: var(--white);
}
header a {
    color: var(--black);
    font-size: clamp(15px, 3vw, 16px);
}
.Item-Text{
    position: relative;
    z-index: 1;
}
.Item-Text:after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;/*テキストからの距離*/
    width: 0%;/*初期状態では下線非表示*/
    height: 1px;/*下線の高さ*/
    background: var(--black);/*下線の色*/
    z-index: -1;
    transition: all 0.4s;/*アニメーション速度*/
}
.Item:hover .Item-Text:after{
    width: 100%;/*hover時に表示*/
}
.header .flex{
    align-items: center;
}
.header .logo {
    max-width: 8rem;
}
.header .menu_nav {
    max-width: 500px;
    width: 100%;
}
.header .sns__header{
    width: 27px!important;
}
.header .sns__header:hover{
    opacity: 0.7;
}
@media only screen and (max-width: 768px){
    .header .logo {
        max-width: 8rem;
    }
}
@media only screen and (max-width: 600px){}
@media only screen and (max-width: 390px){
    .header .logo {
        max-width: 7rem;
    }
}

/* ------------------------------------- */
/*  top main
/* ------------------------------------- */
.main {
    padding: 20rem 0;
}
.main .inner{
    position: relative;
}
.main .inner .main_txt h1{
    font-family: 'Verdana',sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(5rem, -1.667rem + 13.89vw, 8.75rem); /*min80max140*/
    line-height: 1;
    margin-bottom: 2rem;
}
.main .inner .main_txt .sub_ttl{
    font-family: 'Verdana',sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(2.25rem, 1.982rem + 0.86vw, 2.625rem); /*min36max42*/
}
.main .inner .scroll{
    position: absolute;
    max-width: 11rem;
    bottom: -40%;
    right: 0;
}
.main .inner a {
    border: 1px solid var(--black);
    text-align: center;
    border-radius: 50%;
    display: block;
    width: 5rem;
    padding: 1rem 0.5rem;
    font-family: 'Noto Sans JP', serif;
    font-size: 2.4rem;
    font-weight: 200;
    transition: all 0.3s ease;
}
.main .inner a:hover{
    background-color: var(--black);
    color: var(--white);
}
@media only screen and (max-width: 1200px){
    .main .inner .scroll{
        right: 4%;
    }
}
@media only screen and (max-width: 1024px){
}
@media only screen and (max-width: 768px){
    .main .inner .scroll {
        bottom: -30%;
    }
}
@media only screen and (max-width: 500px){
    .main {
        padding: 14rem 0;
    }
    .main .inner a {
        width: 4rem;
        padding: 0.8rem 0.5rem;
        font-size: 2.1rem;
    }
}
@media only screen and (max-width: 390px){
}


/* ------------------------------------- /
/   共通CSS
/* ------------------------------------- */
/* h2_ttl */
.h2_ttl{
    font-family: 'Verdana',sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(4rem, 2.393rem + 5.14vw, 6.25rem); /* min64max100 */
    margin-bottom: 5rem;
}
.h2_ttl span{
    font-family: 'Noto Sans JP', serif;
    font-size: 1.4rem;
    display: block;
    margin-top: -1rem;
}


/* ------------------------------------- /
/   about
/* ------------------------------------- */
.about{
    max-width: 85rem;
    margin: 0 auto;
}
.about .h2_ttl{
    display: flex;
    align-items: center;/* 縦位置の調整 */
}
.about .h2_ttl::after{
    content: '';
    background-color: var(--gray);
    height: 1px;
    width: 53rem;
    right: 0;
    display: block;
    margin-left: 2rem;
}
.about_content{
    max-width: 60rem;
    margin-left: auto;
}
.about_content h3{
    max-width: 60rem;
    margin-left: auto;
    font-size: clamp(1.875rem, 1.518rem + 1.14vw, 2.375rem); /*min30max38*/
    line-height: 1.6;
    margin-bottom: 4rem;
}
@media only screen and (max-width: 1200px){
    .about .h2_ttl::after{
        width: 43rem;
    }
}
@media only screen and (max-width: 768px){
    .about .h2_ttl::after{
        width: 28rem;
    }
    .h2_ttl {
        margin-bottom: 4rem;
    }
    .about_content {
        max-width: 56rem;
    }
}
@media only screen and (max-width: 600px){
    .about .h2_ttl::after {
        width: 18rem;
    }
}
@media only screen and (max-width: 450px){
    .about .h2_ttl::after {
        width: 10rem;
    }
}


/* ------------------------------------- /
/   service
/* ------------------------------------- */
.service{
    background-color: #2E2E2E;
    color: var(--white);
    position: relative;
}
.service .service_content{
    max-width: 60rem;
    position: relative;
    padding-top: 4rem;
}
.service .service_content .service_content_box{
    margin-bottom: 8rem;
}
.service .service_content .service_content_box span::before{
    content: '';
    background-color: var(--white);
    height: 1px;
    width: 7rem;
    right: 0;
    display: block;
    margin-right: 1rem;
}
.service .service_content .service_content_box span{
    font-family: 'Verdana',sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.08em;
    font-size: 1.4rem;
    display: flex;
    align-items: center;/* 縦位置の調整 */
}
.service .service_content .service_content_box h3{
    font-size: clamp(1.875rem, 1.696rem + 0.57vw, 2.125rem); /*min30max34*/
}
.service .service_img01{
    position: absolute;
    top: 17vh;
    right: 0;
    width: 30vw;
}
.service .service_img02{
    position: absolute;
    bottom: 19vh;
    right: 20vw;
    width: 20vw;
}
.service .service_job{
    padding-top: 10rem;
    /*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
}
.slick-list {
    margin: 0 auto!important;
    width: 100%!important;
}
.slick-initialized .slick-slide {
    display: block;
    margin: 0 auto!important;
}
.service .service_job .service_job_box{
    width:32.1%!important;/*スライダー内の画像を横幅100%に*/
    height:auto;
    padding: 4rem 2rem;
    box-sizing: border-box;
}
.service .service_job .service_job_box h3{
    color: var(--black);
    font-size: clamp(1.5rem, 1.321rem + 0.57vw, 1.75rem); /*min24max28*/
    font-weight: 500;
}
.service .service_job .service_job_box p{
    color: var(--black);
    font-size: 1.5rem;
}
.service .service_job .service_job_box .link_btn{
    display: block;
    text-align: right;
}
.service .service_job .service_job_box a{
    color: #B7B7B7;
    font-size: 1.5rem;
    background-image: url(../img/link_icon_g.svg);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 1.3rem;
    padding-right: 2rem;
}
.service .service_job .service_job_box a:hover{
    opacity: 0.7;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
    margin:0 10px;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    bottom: 34.5%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid var(--white);/*矢印の色*/
    border-right: 2px solid var(--white);/*矢印の色*/
    height: 15px;
    width: 15px;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left: -2%;
    transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
    right: -2%;
    transform: rotate(45deg);
}
@media only screen and (max-width: 1440px){
    .service .service_img01 {
        top: 20vh;
        width: 33vw;
    }
    .service .service_img02 {
        bottom: 22vh;
        width: 22vw;
    }
}
@media only screen and (max-width: 1200px){
    .service .service_content{
        padding-top: 0rem;
    }
    .service .service_content .service_content_box {
        margin-bottom: 4rem;
    }
    .service .service_img01 {
        top: 26vh;
        width: 38vw;
    }
    .service .service_img02 {
        bottom: 13vh;
        width: 26vw;
        right: 7vw;
    }
    .slick-prev, .slick-next {
        bottom: 35%;
    }
    .service .service_job .service_job_box {
        width: 32%!important;
    }
}
@media only screen and (max-width: 1100px){
    .service .service_job .service_job_box{
        padding: 3rem 2rem;
        width: 31.9%!important;
    }
}
@media only screen and (max-width: 1024px){
    .service .service_content {
        z-index: 2;
    }
    .service .service_img01 {
        top: 16vh;
        width: 50vw;
        z-index: 0;
    }
    .service .service_job .service_job_box{
        width: 31.7%!important;
    }
}
@media only screen and (max-width: 910px){
    .service .service_job .service_job_box{
        width: 31.5%!important;
    }
}
@media only screen and (max-width: 815px){
    .service .service_job{
        /*横幅92%で左右に余白を持たせて中央寄せ*/
        width:92%;
    }
    .service .service_job .service_job_box{
        width: 32.2%!important;
    }
    .slick-prev {/*戻る矢印の位置と形状*/
        left: -3%;
        transform: rotate(-135deg);
    }
    .slick-next {/*次へ矢印の位置と形状*/
        right: -3%;
        transform: rotate(45deg);
    }
    .slick-prev, .slick-next {
        bottom: 36%;
    }
    .service .mb20{
        margin-bottom: 1rem!important;
    }
    .service .mr20{
        margin-right: 1rem!important;
    }
}
@media only screen and (max-width: 768px){
    .service .service_img01 {
        top: 12vh;
        width: 58vw;
    }
    .service .service_img02 {
        bottom: 11vh;
        width: 40vw;
        right: 4vw;
    }
    .service .service_img img{
        filter: brightness(0.7);
    }
    .service .h2_ttl {
        position: relative;
        z-index: 1;
    }
    .service .service_job {
        padding-top: 7rem;
    }
    .slick-prev, .slick-next {
        bottom: 43%;
    }
    .service .service_job .service_job_box {
        width: 49.2%!important;
    }
    .slider .slick-slide div:nth-of-type(2n) div:first-of-type,
    .slider .slick-slide div:first-of-type div:first-of-type {
        margin-right: 1rem;
    }
    .slider .slick-slide div:first-of-type .service_job_box{
        margin-bottom: 1rem!important;
    }
    .slider .slick-slide div .service_job_box:nth-of-type(2){
        margin-right: 0!important;
    }
}
@media only screen and (max-width: 720px){
    .service .service_job .service_job_box {
        width: 49%!important;
    }
}
@media only screen and (max-width: 600px){
    .service .service_job .service_job_box {
        width: 48.8%!important;
    }
    .service .service_job .service_job_box {
        padding: 2rem 2rem;
    }
    .service .service_img01 {
        top: 10vh;
        width: 75vw;
    }
    .service .service_img02 {
        bottom: 9vh;
        width: 58vw;
        right: 4vw;
    }
}
@media only screen and (max-width: 590px){
    .service .service_content .service_content_box span::before {
        width: 5rem;
    }
}
@media only screen and (max-width: 500px){
    .service .service_job {
        padding-top: 6rem;
        width: 86%;
    }
    .slick-prev {/*戻る矢印の位置と形状*/
        left: -6%;
        transform: rotate(-135deg);
    }
    .slick-next {/*次へ矢印の位置と形状*/
        right: -6%;
        transform: rotate(45deg);
    }
    .slick-prev, .slick-next {
        bottom: 43%;
    }
    .service .service_job .service_job_box {
        width: 100%!important;
    }
}
@media only screen and (max-width: 390px){
    .service{
        margin-top: 6rem;
    }
    .service .service_img01 {
        top: -4vh;
    }
    .service .service_img02 {
        width: 55vw;
        right: 3vw;
    }
    .service .service_job .service_job_box a {
        font-size: 1.4rem;
        background-size: 1.2rem;
        padding-right: 1.5rem;
    }
}


/* ------------------------------------- /
/   news
/* ------------------------------------- */
.news{}
.news .news_content{
    width: 70%;
    background-color: #FAFAFA;
    padding: 4rem;
}
.news .news_content span{
    padding-right: 3rem;
    font-family: 'Verdana',sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
}
.news .news_content li{
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--gray);
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
}
.news .news_content li:first-of-type{
    padding-top: 0;
}
@media only screen and (max-width: 950px){
    .news .news_content {
        width: 70%;
        padding: 3rem;
    }
}
@media only screen and (max-width: 768px){
    .news .news_content{
        width: 100%;
    }
    .news .news_content span{
        padding-right: 2rem;
        font-size: 1.4rem;
    }
}
@media only screen and (max-width: 500px){
    .news .news_content li{
        padding: 2rem 0;
        display: block;
    }
    .news .news_content {
        padding: 2.5rem;
    }
    .news .news_content span{
        width: 100%;
        display: block;
    }
}
@media only screen and (max-width: 390px){
    .news .news_content li {
        padding: 1.5rem 0;
    }
}


/* ------------------------------------- /
/   company
/* ------------------------------------- */
.company{
    max-width: 80rem;
    margin: 0 auto;
}
.company .h2_ttl h2{
    text-align: center;
}
.company table{
    width: 100%;
}
.company table tr{
    border-bottom: 1px solid var(--gray);
}
.company table tr th{
    width: 22%;
    font-weight: 500;
}
.company table tr td{
    padding: 3rem 0 3rem 4rem;
}
.company table tr:first-of-type td{
    padding: 0 0 3rem 4rem;
}
@media only screen and (max-width: 390px){
    .company table tr th {
        width: 28%;
    }
    .company table tr td{
        padding: 2rem 0 2rem 3rem;
    }
    .company table tr:first-of-type td {
        padding: 0 0 2rem 3rem;
    }
}


/* ------------------------------------- /
/   contact
/* ------------------------------------- */
.contact{
    background-color: #1F1F1F;
    color: var(--white);
    text-align: center;
}
.contact h2{
    font-family: 'Verdana',sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(5.625rem, -2.153rem + 16.2vw, 10rem); /*min90max160*/
}
.contact a{
    color: var(--white);
    margin: 0 auto;
    display: block;
    width: 26rem;
    padding: 1.5rem 2.5rem 1.5rem 0;
    border: 1px solid var(--white);
    border-radius: 100vh;
    background-image: url(../img/link_icon_w.svg);
    background-repeat: no-repeat;
    background-size: 1.5rem;
    background-position: center right 17%;
    transition: all 0.3s ease;
}
.contact a:hover{
    opacity: 0.7;
}


/* ------------------------------------- /
/   footer
/* ------------------------------------- */
footer{
    background-color: #1F1F1F;
    padding: 4rem 0 3rem;
    border-top: 1px solid var(--white);
    color: var(--gray);
}
footer .sns{
    width: 8rem;
    margin: 0 auto 2rem;
    align-items: center;
}
footer .sns li{
    width: 27px;
}
footer .copy{
    font-size: 1.4rem;
    text-align: center;
    font-family: 'Verdana', sans-serif;
    font-weight: 400;
    font-style: normal;
}
footer a{
    color: var(--gray);
    font-size: 1.4rem;
    transition: all 0.3s ease;
    font-family: 'Verdana', sans-serif;
    font-weight: 400;
    font-style: normal;
}
footer a:hover{
    opacity: 0.7;
}
@media only screen and (max-width: 600px){
    footer .sns li {
        width: 25px;
    }
}
@media only screen and (max-width: 390px){
    footer {
        padding: 3rem 0 2rem;
    }
    footer .sns {
        margin: 0 auto 1.5rem;
    }
    footer .copy{
        font-size: 1.2rem;
    }
}


/*---------------------------------  /
/*  page-top
/*--------------------------------- */
#page-top{
    position: fixed;
    display: none;
    right: 20px;
    bottom: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--black);
    z-index: 9999;
    border-radius: 50px;
}
#page-top a{
    font-family: 'Noto Sans JP', serif;
}
#move-page-top{
    display: block;
    font-size: 2rem;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    color:var(--white);
    cursor: pointer;
}
#page-top:hover{
    background-color: #000;
    transition: 0.3s;
}
#move-page-top:hover{
    color: #aaaaaa;
    transition: 0.3s;
}


/*---------------------------------  /
/*  背景色が伸びて出現
/*--------------------------------- */
/*背景色が伸びて出現*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}
@keyframes bgextendAnimeBase{
    from {
    opacity:0;
    }
    to {
    opacity:1;  
}
}
/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--black);/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}
/*背景色が伸びて出現ここまで*/


/*---------------------------------  /
/*  プライバシーポリシー
/*--------------------------------- */
.privacy__h2ttl{
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin-bottom: 3rem;
    text-align: center;
    font-weight: 500;
    font-style: normal;
}
.privacy__txt{
    font-size: clamp(1.4rem, 3vw, 1.5rem);
    line-height: 1.6;
    margin-bottom: 2rem;
}
.privacy__h2ttl span{
    font-size: 1.2rem;
}
.privacy__box{
    margin-bottom: 2rem;
}
.privacy__box:last-of-type{
    margin-bottom: 3rem;
}
.privacy__wrapper p{
    font-size: clamp(1.4rem, 3vw, 1.5rem);
    line-height: 1.6;
}
.privacy__h3ttl{
    font-size: clamp(1.5rem, 3vw, 1.6rem);
    font-weight: 500;
    margin-bottom: 0.5rem;
}


/*---------------------------------  /
/*  モーダル
/*--------------------------------- */
/*モーダルを開くボタン*/
.modal-open{
	color: var(--white);
    display: block;
    width: 20rem;
    padding: 1rem;
    border: 1px solid var(--white);
    border-radius: 100vh;
	cursor: pointer;
    text-align: center;
    margin: 0 auto 3rem;
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 8rem 4rem;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
    box-sizing: border-box;
    z-index: 99999;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 1000px;
    width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    font-size: clamp(2rem, 3vw, 2.8rem);
    color: #000;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
    color: var(--black);
    width: 100%;
	background: #fff;
	text-align: left;
	padding: 5rem;
    box-sizing: border-box;
}
@media only screen and (max-width: 600px){
    .modal-container{
        padding: 8rem 0rem;
    }
    .modal-content {
        padding: 4rem 2rem;
    }
    .privacy__h2ttl {
        margin-bottom: 2rem;
    }
    .privacy__box {
        margin-bottom: 1.5rem;
    }
    .privacy__box:last-of-type {
        margin-bottom: 2rem;
    }
}