/* style.css */
html {}

* {
    font-family: "Noto Sans JP", serif;
    font-style: normal;
}

a {
    color: black;
    text-decoration: none;
	cursor: pointer;
}

a:hover {
	--bs-link-hover-color: black;
    text-decoration: underline;
}

/*body{
	background: var(--mtm_red);
}
main,header,footer{
	background: white;
}*/

[id]{
	scroll-margin-top: calc(var(--header_height) + 1em);
}
#pagetop{
	scroll-margin-top: 0;
}

a.td-none::hover {}

/*fonts*/
.notosans *{
    font-family: "Noto Sans JP", serif;
    font-style: normal;
}
.Allerta,
.Allerta *{
	font-family: "Allerta Stencil", serif;
    font-style: normal;
}
.Allerta{
	opacity: 0;
	transition: .25s opacity;
}
.Allerta.visible{
	opacity: 1;
}

.text-palt{
	font-feature-settings: "palt";
    letter-spacing: 1px;
}

/* ----- ----- ----- ↓Template↓ ----- ----- ----- */

.black_to_MTMRed{
	filter:var(--mtm_red_filter);
}
.black_to_White{
	filter: brightness(0) invert(1);
}

.smallRem{
	font-size: 0.875rem;
}

.stick {
    width: 1px;
    display: inline-block;
    background: black;
    height: 1.6em;
    vertical-align: middle;
    margin: 0 1em;
}

.stick.gray {
    background: gray;
}

.squares,
.squares_white {
    height: 11px;
    margin-left: .5em;
	
	-webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
	
	transition: filter .3s;
}
span.squares,
span.squares_white{
	display: inline-block;
    width: 15px;
	background: url(/Templates2025/img/icon/squares.svg) no-repeat center;
    flex-shrink: 0;
}
a:has(>.squares),
a:has(>.squares_white) {
    display: inline-flex;
    align-items: center;
}
span.squares_white{
	background-image: url("/Templates2025/img/icon/squares_white.svg");
}

span.squares_white.squares_big,
span.squares.squares_big{
	width: 28px;
	height: 28px;
	background-size: 16px;
}

@media screen and (max-width: 720px){
	span.squares,
	span.squares_white{
		width: 10px;
	}
}

.vertical {
    writing-mode: vertical-rl;
}

.vertical.inverse {
    transform: rotate(180deg);
}

.scrollbar_hidden{
	-ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar_hidden::-webkit-scrollbar {
    display: none;
}

.list_plus {
    /*width: 100%;*/
    display: flex;
    justify-content: space-between;
}

.list_plus::after {
    content: "";
    width: .9em;
    height: .9em;
    background: white;
    transition: transform .5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.list_plus[aria-expanded="true"]::after{
    clip-path: polygon(0% 45%, 100% 45%, 100% 55%, 0% 55%);
    transform: rotate(180deg);
}
.list_plus[aria-expanded="false"]::after {
    clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%,
           55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%,
           0% 45%, 45% 45%);
}

.mtmIcon{
	display: flex;
	align-items: center;
}
.mtmIcon::before{
	content: "";
	font-size: 16px;
	display: block;
	/* width: 23px; */
	width: 1.4375em;
	height: 1.4375em;
	/*background-image: url(/Templates2025/img/he_fo/download.svg);*/
	background-position: center;
	background-repeat: no-repeat;
	transition: .2s filter;
	transition-delay: .2s;
}
.mtmIcon_downlaod::before{
	background-image: url(/Templates2025/img/he_fo/download.svg);
}
.mtmIcon_mail::before{
	background-image: url(/Templates2025/img/he_fo/mail.svg);
}
.mtmIcon.red::before{
	filter: var(--mtm_red_filter);
}

/*アニメーション*/

.anim {
    opacity: 0;
    transition: .75s transform, .75s opacity;
}

.anim.headline{
	transition: 1.5s transform , 1.5s opacity;
}

.anim_left {
    transform: translate(-50px, 0);
}

.anim_right {
    transform: translate(50px, 0);
}

.anim_bottom {
    transform: translate(0px, 50px);
}

.anim_delay1 {
    transition-delay: .2s;
}

.anim_delay2 {
    transition-delay: .4s;
}
.anim_delay3 {
    transition-delay: .6s;
}
.anim_delay4 {
    transition-delay: .8s;
}

.anim.active {
    opacity: 1;
    transform: translate(0px, 0px) !important;
}

/*アニメーション2*/

.animList .animList1,
.animList .animList2,
.animList .animList3,
.animList .animList4,
.animList .animList5,
.animList .animList6,
.animList .animList7,
.animList .animList8{opacity: 0;transition: .75s transform, .75s opacity;}

.animList.active .animList1{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: .2s; }
.animList.active .animList2{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: .4s;}
.animList.active .animList3{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: .6s;}
.animList.active .animList4{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: .8s;}
.animList.active .animList5{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 1s;}
.animList.active .animList6{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 1.2s;}
.animList.active .animList7{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 1.4s;}
.animList.active .animList8{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 1.6s;}
/*一応*/
.animList .animList9,
.animList .animList10,
.animList .animList11,
.animList .animList12,
.animList .animList13,
.animList .animList14,
.animList .animList15,
.animList .animList16{opacity: 0;transition: .75s transform, .75s opacity;}
.animList.active .animList9{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 1.6s;}
.animList.active .animList10{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 1.8s;}
.animList.active .animList11{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 2s;}
.animList.active .animList12{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 2.2s;}
.animList.active .animList13{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 2.4s;}
.animList.active .animList14{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 2.6s;}
.animList.active .animList15{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 2.8s;}
.animList.active .animList16{opacity: 1;transform: translate(0px, 0px) !important;transition-delay: 3s;}


/*ボタン*/
.mtm_bigButton,
.front-wrapper .front_button,
.toBusi_1 .toBusi_button {
    display: flex;
    align-items: flex-end;
    flex: 1;
	font-size: 16px;
}

.mtm_bigButton button,
.mtm_bigButton a,
.front-wrapper .front_button a,
.toBusi_1 .toBusi_button a {
    --bColor: black;
    --bBdColor: var(--bColor);
    --bHovText: white;
	--bg: white;
    border: 1px solid var(--bBdColor);
    text-decoration: none;
    padding: .8em 3.5em;
    border-radius: 2000px;
    transition: background .3s, color .3s;
    color: var(--bColor);
	z-index: 1;
	background: var(--bg);
}

.mtm_bigButton button,
.mtm_bigButton a,
.front-wrapper .front_button a,
.toBusi_1 .toBusi_button a {
	&:hover,
	&:focus{
		background: var(--bColor)!important;
		color: var(--bHovText)!important;
	}
}

.mtm_bigButton button,
.mtm_bigButton a,
.front-wrapper .front_button a,
.toBusi_1 .toBusi_button a {
	&:hover .squares,
	&:focus .squares{
    	filter: brightness(0) invert(1)!important;
	}
}

.mtm_bigButton.mtm_bigButton_white button,
.mtm_bigButton.mtm_bigButton_white a,
.front-wrapper .front_button.front_button_white a {
	--bg: transparent;
    --bColor: white;
    --bHovText: var(--mtm_red);
}

.mtm_bigButton.mtm_bigButton_red button,
.mtm_bigButton.mtm_bigButton_red a,
.front-wrapper .front_button.front_button_red a {
	--bg: var(--mtm_red);
    --bColor: white;
    --bHovText: var(--mtm_red);
	--bBdColor: var(--mtm_red);
}

@media screen and (max-width: 1280px) {
	.mtm_bigButton,
	.front-wrapper .front_button,
	.toBusi_1 .toBusi_button{
		font-size: var(--SPClamp_12-16);
	}
}

/* ニュースリスト */
#news .news_grid {
    display: grid;
    gap: 1em;
}
#news ul.news_grid,
#news li.news_grid{
	list-style: none;
    padding: 0;
}
#news .news_grid li{
	display: contents;
}
#news .news_grid .news_child {
    --color: black;
    color: var(--color);
    display: flex;
    gap: 1em 1.5em;
    padding-bottom: 1em;
    transition: .2s color, .2s border;
    text-decoration: none !important;
	position: relative;
	overflow: hidden;
	align-items: flex-start;
	&:hover,
	&:focus {
		/*--color: var(--mtm_red);*/
		--color: #DF5E5E;
	}
	&::after {
		content: "";
		height: 1px;
		width: 200%;
		position: absolute;
		z-index: -1;
		bottom: 1px;
		left: -100%;
		transition: left .5s;
		background: linear-gradient(90deg, var(--mtm_red) 0%, var(--mtm_red) 50%, #ddd 50%, #ddd 100%);
		z-index: 2;
	}
	&:hover::after,
	&:focus::after{
		left: 0%;
	}
}

#news .news_grid .news_child_left {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #EEEEEE;
    width: 172px;
    aspect-ratio: 172 / 117;
	z-index: 3
}

#news .news_grid .news_child_left img {
	width: 100%;
    height: 100%;
   object-fit: cover;
    transform: scale(1.0);
    transition: transform .5s;
	background: #f7f7f7;
}

#news .news_grid .news_child:hover .news_child_left img,
#news .news_grid .news_child:focus .news_child_left img {
    transform: scale(1.1);
}

#news .news_grid .news_child_right {
    display: flex;
    flex-direction: column;
    gap: .5em;
    padding: .2em 0;
	flex: 1;
}

#news_content .news_dateAndCate{
	--color: black;
}
#news_content .news_dateAndCate,
#news .news_grid .news_child_right .news_dateAndCate{
	display: flex;
	gap:0;
    flex-wrap: wrap;
	/*gap: .5em 1.5em;*/
	gap: .5em 2px;
}

#news .news_grid .news_child_right .news_dateAndCate .news_date,
#news_content .news_dateAndCate .news_date{
	margin-right: 1em;
}

/*カテゴリー*/
#news_content .news_dateAndCate .news_category,
#news .news_grid .news_child_right .news_dateAndCate .news_category {
	--color: black;
	color: var(--color);
	border: 1px solid var(--color);
    padding: .2em 1.5em;
    border-radius: 2000px;
	font-size: .8em;
	text-decoration: none;
}
/*aタグだった場合アニメーション*/
#news_content .news_dateAndCate a.news_category,
#news .news_grid .news_child_right .news_dateAndCate a.news_category{
	transition: background-color .2s, color .2s;
	&:hover,
	&:focus{
		background: black;
		color: white;
	}
}

#news_content .news_dateAndCate .news_category.news_category_mas,
#news .news_grid .news_child_right .news_dateAndCate .news_category.news_category_mas{
	background: var(--color);
	color: white;
}

#news .news_grid .news_child_right .news_title {
    transition: transform ease .2s;
    font-size: 1.2em;
    line-height: 1.4;
	transform-origin: bottom;
}

#news .news_grid .news_child:hover .news_child_right .news_title,
#news .news_grid .news_child:focus .news_child_right .news_title {
    transform: translateX(-2px) skewX(-11deg);
}


@media screen and (max-width: 1280px) {
	#news .news_grid{
		font-size:  var(--SPClamp_13-16);
	}
	#news .news_grid .news_child_left{
		width: 130px;
	}
	#news_content .news_dateAndCate,
	#news .news_grid .news_child_right .news_dateAndCate {
			font-size:  var(--SPClamp_12-16);
	}
	#news .news_grid .news_child_right .news_title{
		    font-size: 1em;
	}
}

/* ----- ----- hoverLine ----- ----- */
a:has(>.hoverLine_child){
    text-decoration: none !important;
}
a:has(>.hoverLine_child) .hoverLine_child,
.hoverLine,
.hoverLine_white {
	--color: black;
    position: relative;
    overflow: hidden;
    display: inline-block;
    text-decoration: none !important;
	color: var(--color);
}
a:has(>.hoverLine_child) .hoverLine_child::after,
.hoverLine::after,
.hoverLine_white::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 1px;
   	width: 100%;
    height: 100%;
    border-bottom: 1px solid var(--color);
    transform: translateX(-100%);
	transition: transform .2s;
	transform: scale(0, 1);
    transform-origin: right top;
    flex-shrink: 0;
}

.hoverLine:has(span.squares)::after,
.hoverLine_white:has(span.squares_white)::after{
	width: calc(100% - 1.1em);
}

.hoverLine_white{
	--color:white;
}

/*.groupsolution_child:hover .hoverLine::after,*/ /*←front-page*/
@media (any-hover:hover){
    a:has(>.hoverLine_child):hover .hoverLine_child::after,
    .hoverLine:hover::after,
    .hoverLine_white:hover::after {
        transform: scale(1, 1);
        transform-origin: left top;
    }
}

/* ----- ----- hoverPoint ----- ----- */
.hoverPoint {
    position: relative;
	transition: color .3s;
}

.hoverPoint span {
    z-index: 1;
}

.hoverPoint::before {
    --height: 12px;
    --height_harf: calc(var(--height) / 2);
    content: "";
    background: var(--mtm_red);
    width: var(--height);
    position: absolute;
    height: var(--height);
    border-radius: 2000px;
    left: calc(50% - var(--height_harf));
    bottom: calc(50% - var(--height_harf));
    opacity: 0;
}

.hoverPoint.hoverPoint_Active::before,
.hoverPoint:hover::before,
.hoverPoint:focus::before{
    animation: hma ease .2s forwards;
}

@keyframes hma {
    0% {
        opacity: 0;
        bottom: calc(50% - var(--height_harf));
    }

    10% {
        opacity: .2;
        bottom: 0;
        bottom: calc(50% - var(--height_harf));
    }

    80% {
        opacity: 1;
        bottom: 0;
        bottom: calc(0%);
    }

    100% {
        opacity: 1;
        bottom: 0;
        bottom: calc(4%);
    }
}

.hoverPoint.hP_hoverColor:hover,
.hoverPoint.hP_hoverColor:focus{
	color: var(--mtm_red);
}
@media screen and (max-width: 720px){
.hoverPoint::before{
	--height: 7px;
}
}

.list-decre{
	display: inline-flex;
    align-items: center;
	
	position: relative;
	padding-left: 1em;
}
.list-decre::before{
    content: "";
    --size: 6px;
    width: var(--size);
    height: var(--size);
    display: block;
    border-top: 1px solid white;
    border-right: 1px solid white;
    transform: rotate(45deg);
	
	position: absolute;
	left: 0;
}
.list-decre.hoverLine_white::after{
    left: 1em;
}

.list-decre:has(span.squares)::after,
.list-decre:has(span.squares_white)::after{
	width: calc(100% - 2.4em);
}


@media screen and (max-width: 720px){
	.list-decre{
		padding-left: 2em;
	}
    .list-decre.hoverLine_white::after{
        left: 2em;
    }
}

.h_f_list{
	gap:1em;
}

@media screen and (max-width: 720px){
	.h_f_list{
		gap: .6em;
        font-size: max(12px);
	}
    .h_f_list_inner{
        font-size: max(10px);
    }
}

/* ↓ボタン コピー */
.btn.btn-mtm-submit {
    display: flex;
    height: 3em;
    max-width: 350px;
    aspect-ratio: 350 / 80;
    background-color: var(--mtm_red);
    border: white 3px solid;
    padding: .6em;
    font-size: 1.4em;
    align-items: center;
    justify-content: center;

    border-radius: 2000px;
}

.btn.btn-mtm-submit:active,
.btn.btn-mtm-submit:hover {
    background-color: white;
    color: var(--mtm_red);
}

.btn.btn-mtm-submit:active {
    border-color: var(--mtm_red);
}

.btn.btn-mtm-submit:active:focus-visible,
.btn.btn-mtm-submit:focus-visible {
    color: white;
    background-color: var(--mtm_red);
    box-shadow: var(--mtm_red-shadow);
    border-color: var(--mtm_red);
}

@media screen and (max-width: 575px) {
    .btn.btn-mtm-submit {
        aspect-ratio: unset;
		height: 2.5em;
        padding-left: 2.5em;
        padding-right: 2.5em;
    }
}
.banner{
	text-decoration: none!important;
	max-width: 400px;
    display: block;
}
.banner .banner_img{
    border: 1px solid var(--mtm_gray);
    /*padding: 0.8em 1em;*/
    aspect-ratio: 9 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
	overflow: hidden;
}
.banner .banner_img img{
	width: 100%;
	transition: transform .3s;
}
.banner:hover .banner_img img,
.banner:focus .banner_img img{
	transform: scale(1.03);
}

.banner .banner_text{
	margin: 0.4em 0 0;
}

/* ----- ----- ----- ↑Template↑ ----- ----- ----- */

/*
--- --- --- --- --- --- --- --- --- --- --- ---
--- --- --- --- --- --- --- --- --- --- --- --- 
--- --- --- --- header  --- --- --- --- --- ---
--- --- --- --- --- --- --- --- --- --- --- ---
--- --- --- --- --- --- --- --- --- --- --- ---
*/

:root {
    --header_height: 98px;
	--mtm_red: #CE0000;
	--mtm_red_filter: invert(8%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);
	--mtm_white_filter: brightness(0) invert(1);
	--mtm_black_filter: brightness(0);
	--mtm_gray: #EEEEEE;
	--mtm_font: "Noto Sans JP", serif;
	--SPClamp_10-16: clamp(10px, 1.5vw, 16px);
	--SPClamp_11-16: clamp(11px, 1.5vw, 16px);
	--SPClamp_12-16: clamp(12px, 1.5vw, 16px);
	--SPClamp_13-16: clamp(13px, 1.5vw, 16px);
    --SPClamp_14-16: clamp(14px, 1.5vw, 16px);
    --SPClamp_16-16: clamp(15px, 1.5vw, 16px);
    --SPClamp_16-16: clamp(16px, 1.5vw, 16px);
}

@media screen and (max-width: 1280px){
	:root{
    	--header_height: clamp(55px, 11vw,65px);
	}
}

.header {
    height: var(--header_height);
	background: #ffffff;

    display: flex;
    justify-content: space-between;
    /*padding: 8px 12px;*/
    padding: 0px 12px;
	
	position: fixed;
	top: 0;
    width: 100%;
	z-index: 1000;
	transition: background .5s, box-shadow .5s;
	box-shadow: 0 1px 3px 0px #00000015;
}
.header.active{
    background: transparent;
	box-shadow: none;
}

.header_logo {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 45px;
	margin-right: 30px;
	    text-decoration: none !important;
}

.header_logo_img {
    height: 48px;
	flex: 1;
}

/*3枚目 動画の時*/
body:has(main #top.type_3) .header.active .header_logo{
	filter: drop-shadow(0px 0px 4px white);
}

.header_text{
	margin: .8em 0 0 .5em;
	flex: 1;
	font-size: 22px;
	transition: color .3s;
}

@media screen and (max-width: 1280px){
	.header_logo{
		margin-left: 0px;
	}
	.header_logo_img{
		height: 40px;
		/*width: 100%;*/
		width: 60%;
	}
	.header_text{
		    margin: .8em 0 0 .5em;
	font-size: clamp(10px, 3vw, 16px);
	}
}

.header_detail {
    display: flex;
    flex-direction: column;
    gap: .5em;
    flex: 1;
    justify-content: space-between;
	padding-top: 8px;
}

.header_detail_top {
    display: flex;
    align-items: center;
    gap: 2em;
    justify-content: flex-end;
}

.header_detail_top_text {
    font-size: .7em;
}

@media screen and (max-width: 1280px){
	.header_detail{
		padding-bottom: 8px;
	}
	.header_detail_top{
		display: none;
	}
}

/*Gtranslate*/
.gt_selector{
	border-radius: 2000px;
	padding: 0 .2em 0 1em;
	background-color: transparent;
	border-width: 1px;
	border-style: solid;
	font-size: 16px;
}
@media screen and (max-width: 1280px){
	.gt_selector{
		font-size: 12px;
	}
}
.gtranslate_wrapper.gt_white .gt_selector{
	color: white;
	border-color: white;
}
.gt_selector option{
	color: black;
}

.header_detail_bottom {
	--list_btm:4px;
	--list_height: calc(52px - var(--list_btm));
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    height: 100%;
}

.header_list {
    display: flex;
}

.header_list>li>a {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0px 22px;
    text-decoration: none;
	padding-bottom: var(--list_btm); 
}

@media screen and (max-width:1580px){
	.header_list{
		display: none;
	}
}

.header .header_button {
    background: #fec936;
    display: flex;
    align-items: center;
	justify-content: center;
    border-radius: 2000px;
    padding: 0px 18px;
    text-decoration: none;
	transform: scale(1);
    transition: transform .2s;
	
    max-height: var(--list_height);
	white-space: nowrap;
	&:not(.c_contactIntro):hover,
	&:not(.c_contactIntro):focus{
		transform: scale(1.02);
	}
}

.header .header_button_siryo{
    background: #fec936;
}
.header .header_button_contact{
	background: #000;
}
.header .header_button_contact>*{
	filter: brightness(0) invert(1);
}

.header .header_button_icon {
    width: 23px;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.header .header_button span:nth-child(2){
    margin-left: 8px;
}

@media screen and (max-width:1280px){
	.header_button span:nth-child(2){
		display: none;
	}
	/*修正 iPhoneで表示変になる*/
	.header .header_button{
		padding: 0;
		aspect-ratio: 1 / 1;
		/*width: var(--list_height);*/
		width: calc(var(--header_height) - 16px);
		padding: 0.77em 0.5em;
	}
}


@media screen and (max-width:350px){
	.header .header_button{
		display: none;
	}
}

/*header hoverPoint メニュー*/

.hOpen{
    position: absolute;
    display: flex;
    width: calc(100% - 1em);
    max-width: 1600px;
    height: 490px;
    background: var(--mtm_red);
    border-radius: 20px 0 0 20px;
    right: -10px;
	pointer-events: none;
    top: var(--header_height);
    transition: right .5s, opacity .5s;
	opacity: 0;
}
.h_serviceIntro:hover+.hOpen,
.h_serviceIntro:focus+.hOpen,
.h_aboutIntro:hover+.hOpen,
.h_aboutIntro:focus+.hOpen,
.hOpen:hover,
.hOpen:has(*:focus){
	right: 0;
	pointer-events: auto;
	opacity: 1;
}


/* .f_title 同一 */
.h_title.h_title_1 span:first-child{
	font-size: 1.45em;
}

.h_title.h_title_2{
	font-size: 1.3em;
    margin-bottom: 1em;
}

.hOpen .hOpen_left{
	aspect-ratio: 1 / 1;
	display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}
.hOpen .hOpen_left::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    z-index: -10;
    background-position: right bottom;
}
.hOpen_service .hOpen_left::before{
    background-image: url(/Templates2025/img/he_fo/h_human.png);
    background-size: 90%;
}
.hOpen_about .hOpen_left::before{
    background-image: url(/Templates2025/img/he_fo/h_about.webp);
    filter: opacity(0.15);
}

.hOpen .hOpen_right{
    border-left: 1px dashed white;
    flex: 1;
    margin: 3em 0;
    padding: 1.5em 6em 1.5em 3em;
	display: flex;
    gap: 0 4em;
}
.hOpen_sub {
    display: flex;
    gap: 0 4em;
}

/*2枚目の画像出てる時にsquaresとか黒く*/
body:has(main #top.type_2) .header.active .header_list>li>a .squares{
	filter: var(--mtm_black_filter);
}
body:has(main #top.type_2) .header.active .header_detail_top .stick.gray{
	background: black;
}
body:has(main #top.type_2) .header.active .header_detail_top .gt_selector{
	border-color: black;
}

/*3枚目の動画出てるときにいろいろ白く*/
body:has(main #top.type_3) .header.active .header_list>li>a .squares{
	filter: var(--mtm_white_filter);
}
body:has(main #top.type_3) .header.active .header_list a,
/*body:has(main #top.type_3) .header.active .header_logo,*/
body:has(main #top.type_3) .header.active .header_detail_top a,
body:has(main #top.type_3) .header.active .header_detail_top select{
	color: white;
}

body:has(main #top.type_3) .header.active .header_detail_top .stick.gray{
	background: white;
}
body:has(main #top.type_3) .header.active .header_detail_top .gt_selector{
	border-color: white;
}

/* 
--- --- --- --- --- --- --- --- ---
--- --- ---  お問い合わせ  --- --- ---
--- --- --- --- --- --- --- --- ---
*/

.cOpen{
    position: absolute;
    display: flex;
    width: 198px;
    height: 96px;
    right: -24px;
	pointer-events: none;
    top: calc(var(--header_height) - 6px);
    transition: right .5s, opacity .5s;
	opacity: 0;
    gap: 6px;
    display: flex;
    background: transparent;
    
}
.cOpen > *{
    flex: 1;
}

.cOpen a{
    border-radius: 50%;
    place-content: center;
    display: grid;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    transition: background 0.3s ease;
    text-decoration: none;
    margin-top: 6px;
}

.cOpen a:is(:hover,:focus-visible){
    color: #000;
    background: #fff;
}
.c_contactIntro.pc:hover+.cOpen,
.c_contactIntro.pc:focus+.cOpen,
.pc+.cOpen:hover,
.pc+.cOpen:has(*:focus){
	right: 46px;
	pointer-events: auto;
	opacity: 1;
}

@media screen and (max-width: 1280px){
    .cOpen.active{
        right: 0;
        pointer-events: auto;
        opacity: 1;
    }
    .cOpen{
        top: calc(var(--header_height) - 8px);
        background: transparent;
        /* font-size: var(--SPClamp_10-16); */
    }
}

/* 
--- --- --- --- --- --- --- --- ---
--- --- ---  humberger  --- --- ---
--- --- --- --- --- --- --- --- ---
*/

.hum {
    background: var(--mtm_red);
    border-radius: 2000px;
    height: 100%;
    aspect-ratio: 1 / 1;
    padding: 15px 12px;
    max-height: var(--list_height);
	z-index: 1002;
}

.hum .hum2 {
    position: relative;
    width: 100%;
    height: 100%;
}

.hum span {
    position: absolute;
    right: 0;
    border-top: 1px solid #ffffff;
    transition: .5s transform, .5s width, .5s top, .5s right, .5s bottom;
	height: 1px;
	transition-timing-function: cubic-bezier(0.2, 0.9, 0.57, 1);
}

.hum span:nth-child(1) {
    top: 0;
    width: 100%;
}

.hum span:nth-child(2) {
    top: 50%;
    width: 75%;
}

.hum span:nth-child(3) {
    top: 100%;
    width: 50%;
}

.hum.active span{
	border-block-width: 2px;
}

.hum.active span:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
}

.hum.active span:nth-child(2) {
    top: 50%;
    width: 0;
    right: 50%;
}

.hum.active span:nth-child(3) {
    top: 50%;
    width: 100%;
    transform: rotate(-45deg);
}

/* --- --- ---  hum bg ヘッダーのハンバーガーメニューの背景 background  --- --- --- */

.hum_bg{
	font-size: clamp(12px, 2vw, 16px);
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1001;
    pointer-events: none;
    transition-timing-function: ease;
	background: var(--mtm_red) url(/Templates2025/img/he_fo/hum_background.png) no-repeat bottom left;
	/*アクセシビリティ .6秒delay後 カーソルブラウジング等 tab移動の無視 */
	visibility: hidden;
    transition: left .5s, visibility 0s linear .6s;
}
.hum_bg.active{
	pointer-events: all;
	left: 0;
	transition-timing-function: ease;
	/*アクセシビリティ*/
	visibility: visible;
    transition: left .5s, visibility 0s linear 0s;
}

@media screen and (max-width: 1280px){
	.hum_bg{
   	 	background-image: url("/Templates2025/img/he_fo/hum_background_sp.png");
		background-position: top;
        background-size: cover;
	}
}

.hum_bg_detail {
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 1590px;
    padding: var(--header_height) 1em 4em;
    overflow-y: auto;
    margin: auto;
}

.hum_bg_left {
    flex: .4;
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-right: 2em;
    align-items: flex-start;
}

.hum_translate {
    position: absolute;
    top: calc(var(--header_height) / 1.8);
    right: 90px;
}

.hum_left_img img {
    height: 52px;
    width: 100%;
}

.hum_bg_right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7em;
    min-width: 1040px;
}

.hbr_top {
    display: flex;
    flex: 1;
}

.hbr_top .hbr_top_child {
    flex: 1;
    border-left: var(--border);
    padding: 1em 2em 1em 2em;
}

.hbr_top .hbr_top_child:last-child {
    flex: 2;
}
.hbr_top_child_list{
	display: flex;
	gap: 2em 1em;
    justify-content: space-between;
}

.h_f_list .h_f_list_inner li {
    padding-left: 3em;
    margin-top: .5em;
}

.hum_bg .list_plus,
.hum_bg .h_no_link{
   /* pointer-events: none;*/
	cursor: pointer;
}
.hum_bg .list_plus:after{
    content: unset;
}


/**/


 .hbr_bottom {
    display: flex;
    padding: 1em 0em 1em 0;
    border-top: var(--border);
    gap: 1em;
    align-items: center;
}
.hbr_button {
	display: flex;
	border: 1px solid white;
	color: white;
	padding: 1em;
	min-width: 14em;
	justify-content: center;
	transition: .2s color, .2s background;
	gap: .4em;
	font-size: 1.2em;
	&:hover,
	&:focus {
		color: var(--mtm_red);
		background: white;
		text-decoration: none;
	}
}

.hbr_button .hum_button_icon{
	width: 1.5em;
	filter: brightness(0) invert(1);
	transition: filter .2s;
	transition-delay: .2s;
}

.hbr_button:hover .hum_button_icon,
.hbr_button:focus .hum_button_icon{
	filter: var(--mtm_red_filter);
}
.hbr_privacy{
    margin-left: auto;
    padding-right: 10px;
}
header .collapse:not(.show){
    display: flex;
}
/*1281px以上*/
@media screen and (min-width: 1281px) {
	header .hum_bg .collapsing{
		height: unset!important;
	}
}
.about_company_detail .collapse:not(.show){
    display: none;
}
.hum_bg .sp{
    display: none;
}




/*SP大幅変更 .hum_bg内 .h_f_list a 等 */
@media screen and (max-width: 1280px) {
    .hum_bg .pc{
        display: none;
    }
    .hum_bg .sp{
        display: block;
    }
    header .collapse:not(.show){
        display: none;
    }
	.hum_bg .h_f_list :is(a,button) {
        border: 1px solid white;
		width: 100%;
		border-radius: 4px;
		background: white;
		padding: 0em 1.1em;
		min-height: 3.4em;
		color: black !important;
		transition: .2s background, .2s color;
		display: flex;
		align-items: center;
	}
	/*hoverline個別編集*/
	.hum_bg .h_f_list :is(a,button) .hoverLine_white{
		--color: black;
	}
	.hum_bg .h_f_list :is(a,button):hover .hoverLine_white{
		--color: white !important;
	}
	.hum_bg .h_f_list :is(a,button):hover{
		background: var(--mtm_red);
		color: white !important;
	}
    .hum_bg .sp_close_list{
        display: none;
    }
    .hum_bg .h_no_link{
    pointer-events: auto;
    }
	.hum_bg .list_plus{
		width: 100%;
	}
    .hum_bg .list_plus{
        pointer-events: auto;
    }
	.hum_bg .list_plus::after{
        content: '';
		background: var(--mtm_red);
	}
	.hum_bg .list_plus:hover::after{
		background: white;
	}
	.hum_bg .hoverLine_white::after{
		display: none;
	}
	.hum_bg a span.squares_white{
		background-image: url(/Templates2025/img/icon/squares_red.svg);
		transition: .2s filter;
	}
	.hum_bg a:hover span.squares_white{
		filter: brightness(0) invert(1);
	}
	.hum_bg .list-decre{
		padding-left: 2.2em!important;
	}
	.hum_bg .list-decre::before{
        --size: 9px;
		background: var(--mtm_red);
        transform: none;
        border-radius: 2000px;
        left: 1em;
		border: 0;
		transition-delay: .2s;
		transition: background .2s;
	}
	.hum_bg .list-decre:hover::before{
		background: white;
	}

    .hbr_sp_ttl{
    font-size: 1.5em;
    color: #fff;
    text-align: center;
    margin-top: 1.5em;
    }

    .hbr_sp_cwrap{
        display: flex;
        gap: 6px;
    }
    .hbr_sp .hbr_button .hum_button_icon {
        width: 3em;
    }
    .hbr_sp_cwrap .hbr_button{
        flex: 1;
    }
    .hbr_sp_cwrap span{
        text-align: center;
        line-height: 1.2;
    }
    .hbr_sp .hbrb_big{
        font-size: 1.5em;
    }

    .hbr_sp_end{
        border-top: var(--border);
        border-bottom: var(--border);
        padding-top: 20px;
        margin-top: 20px;
    }
    .hbr_2_button{
        display: grid;
        grid-template-areas: "fd3b1 fd3b2" "fd3b1 fd3b3";
        border: 1px solid white;
        border-radius: 4px;
        align-items: center;
        justify-content: start;
        gap: .4em;
        color: white;
        line-height: 1;
        text-decoration: none!important;
        transition: background .2s;
        justify-content: center;
    }
    .hbr_2_button .hbr2b_img{
        grid-area: fd3b1;
        aspect-ratio: 1 / 1;
        width: 5em;
        padding: .8em;
        filter: brightness(0) invert(1);
        transition: filter .2s;
        transition-delay: .2s;
    }
    .hbr_2_button .hbr2b_small{
        grid-area: fd3b2;
        align-self: end;
        margin: .5em .5em 0 0;
        font-size: clamp(10px, 2vw, 16px);
    }
    .hbr_2_button .hbr2b_big{
        grid-area: fd3b3;
        align-self: start;
        margin: 0 .5em .5em 0;
    }
    .hbr_2_button .hbr2b_big span{
        font-size: 1.5em;
    }

    .hbr_2_button:hover{
        background: white;
        color: var(--mtm_red);
    }
    .hbr_2_button:hover .hbr2b_img{
        filter: var(--mtm_red_filter);
    }
    .hbr_sp_cwrap .hum_button_icon{
        width: 3em;
    }
   
	
	.hum_left_img img{
		height: 38px;
	}
    .hum_bg_detail {
        flex-direction: column;
        gap: 2em;
    }

    .hum_bg_left {
		flex: unset;
        margin-right: 0;
        align-items: flex-end;
    }
    
    .hum_bg_right {
        min-width: unset;
        gap: 2.5em;
    }

    .hum_translate {
        position: relative;
        top: unset;
        right: unset;
    }

    .hbr_top {
        flex-direction: column-reverse;
        gap: 1em;
    }

    .hbr_top .hbr_top_child {
        flex: unset;
        border: none;
		padding: 0;
    }

    .hbrtcl_kigyo {
        margin-top: 2em;
    }
    .hbrtcl_job{
        padding-bottom: 2em;
    }
    
    .hbrtcl_kigyo .list-decre::before{
        content: unset;
    }
	.hum_bg .hbrtcl_kigyo .list-decre{
		padding-left: 1.1em!important;
	}
    .hbrtcl_kigyo .h_f_list_inner {
        gap: .51em .51em;
    }

    .h_f_list_inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
		gap: 0 .51em;
    }

    .h_f_list .h_f_list_inner li {
        padding-left: 0;
    }
	
	.hbr_top_child_list{
		flex-direction: column;
	}

    .hbr_bottom {
        flex-direction: column-reverse;
        border: none;
		align-items: stretch;
		padding: 0;
    }

    

	.hbr_sp .hbr_button{
		border-radius: 2000px;
        flex: 1;
        align-items: center;
        padding: 0.7em;
        gap: 0.8em;
	}
    
    .hbr_sp_cwrap .hbr_button{
        padding: 0.5em;
        gap: 0.4em;
    }

    .hbr_sp_privacy{
        padding-bottom: 1em;
    }
    .hbr_sp_privacy::before{
      content: '・';
      color: #fff;
    }
}

@media screen and (max-width:720px) {
    .hbr_top {
        gap: .6em;
    }
    .hbr_2_button {
        aspect-ratio: 325 / 55;
    }
    .hbr_2_button .hbr2b_big span{
        font-size: max(17px);
    }

    .hbr_2_button.tel .hbr2b_big span{
        font-size: max(18px);
        letter-spacing: 0.11em;
    }
    .hbr_sp_cwrap .hbr_button{
        min-width: initial;
    }
    .hbr_sp .hbrb_big{
        font-size: max(17px);
    }
    .hbr_sp .hbr_button .hum_button_icon {
        width: 2em;
    }
}

/*
--- --- --- --- --- --- --- --- --- --- --- ---
--- --- --- --- --- --- --- --- --- --- --- --- 
--- --- --- --- footer  --- --- --- --- --- ---
--- --- --- --- --- --- --- --- --- --- --- ---
--- --- --- --- --- --- --- --- --- --- --- ---
*/
:root {
	--border: 1px dashed white;
}

/* --- --- pagetop 書き方が模索 --- --- */
.pagetop {
    padding: 0 9em;
}

.pagetop_detail {
    --translateY: 20px;
    --stick_height: 50px;
    position: relative;
    display: inline-block;
    padding-bottom: calc(var(--stick_height) + 1.5em);
    transform: translateY(var(--translateY));
    transition: transform .15s;
	&:hover,
	&:focus {
		transform: translateY(0px);
	}
	&:hover .pagetop_detail_stick1,
	&:focus .pagetop_detail_stick1 {
		height: calc(var(--stick_height) + var(--translateY));
		bottom: 0;
	}
	&:hover .pagetop_detail_stick2,
	&:focus .pagetop_detail_stick2 {
		height: calc(var(--stick_height) - var(--translateY));
	}
}

.pagetop_detail .pagetop_detail_stick1,
.pagetop_detail .pagetop_detail_stick2 {
    width: 1px;
    height: var(--stick_height);
    background: black;
    display: block;
    position: absolute;
    bottom: var(--translateY);
    /*left: 50%;*/
	left: .75em;
    transition: bottom .15s, height .15s;
}

.pagetop_detail .pagetop_detail_stick2 {
    --stick_height: 40px;
    background: white;
    bottom: calc((var(--stick_height) - var(--translateY)) * -1);
}

@media screen and (max-width: 1280px){
	.pagetop{
		padding: 0 1em;
		font-size: 12px;
	}
	.pagetop_detail{
		--stick_height: 20px;
	}
	.pagetop_text{
		padding-top: 1em;
	}
}

/* --- footer --- */

.footer {
    margin: 0 4em;
    background: var(--mtm_red);
    border-radius: 35px 35px 0 0;
    padding: 60px 50px 0px;
}

.footer .sp{
	display: none;
}

.footer_detail {
    /*height: 400px;*/
    display: flex;
    justify-content: center;
    gap: 20px;
    max-width: 1580px;
    margin: auto;
}

.footer_detail_child {
    width: 100%;
    flex: 1;
    height: 100%;
	height: auto;
}

.h_title,
.f_title{
	display: flex;
    color: white;
    align-items: center;
    margin-bottom: 0.8em;
	font-size: 1.7em;
}
.h_title .h_title_eng,
.f_title .f_title_eng{
	white-space: nowrap;
}

.h_title_small,
.f_title_small{
	font-size: .5em;
    margin-left: 1.5em;
	margin-top: 0.3em;
}

.fd_1 {
    display: flex;
    flex-direction: column;
	padding: 0 0 1em;
	gap: 1em;
	max-width: max-content;
}
.fd_1_copyright {
    flex: 1;
    align-content: flex-end;
}

.footer_logo{
	max-width: 220px;
}

.fd_2{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	
	padding: 0 2em 1em;
	flex: 1.6;
}
.fd_2_top{
	display: flex;
    gap: 2em;
	justify-content: space-between;
    flex-wrap: wrap;
}

.fd_2_bottom{
	border-top: var(--border);
}

.fd_3{
	border-left: var(--border);
    display: flex;
    flex-direction: column;
	padding: 0 2em 1em;
}

.fd_3_links{
	display: grid;
    gap: 1em;
}

.fd_3_button{
    display: grid;
    grid-template-areas: "fd3b1 fd3b2" "fd3b1 fd3b3";
    border: 1px solid white;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: .4em;
    color: white;
    line-height: 1;
	text-decoration: none!important;
	transition: background .2s;
}
.fd_3_button.tel{
	pointer-events: none;
}
.fd_3_button .fd3b_img{
    grid-area: fd3b1;
    aspect-ratio: 1 / 1;
    width: 5em;
    padding: .8em;
	filter: brightness(0) invert(1);
	transition: filter .2s;
    transition-delay: .2s;
	
	background-size: calc(100% - 1.8em);
    background-position: center;
    background-repeat: no-repeat;
}
.fd_3_button .fd3b_small{
	grid-area: fd3b2;
	align-self: end;
	margin: .5em .5em 0 0;
    font-size: clamp(10px, 2vw, 16px);
}
.fd_3_button .fd3b_big{
	grid-area: fd3b3;
	align-self: start;
	margin: 0 .5em .5em 0;
}
.fd_3_button .fd3b_big span{
	font-size: 1.5em;
}

.fd_3_button:hover,
.fd_3_button:focus {
	background: white;
	color: var(--mtm_red);
}
.fd_3_button:hover .fd3b_img,
.fd_3_button:focus .fd3b_img{
	filter: var(--mtm_red_filter);
}

.fd_4_top{
	display: flex;
	gap:8px;
    flex-direction: column;
    margin-inline-start: auto;
    width: max-content;
}

.fd_4_bottom{
	border-top: var(--border);
}

@media screen and (max-width: 1420px){
	.footer .pc{
		display: none;
	}
	.footer .sp{
		display: block;
	}
	.footer{
		margin: 0;
		border-radius: 0;
		padding: 50px 18px 20px;
	}
	.footer_detail{
		height: unset;
		flex-direction: column;
		font-size: clamp(9px, 2vw, 16px);
	}
	.fd_1{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
		max-width: unset;
	}
	.footer_logo{
    	width: 100%;
		padding-right: 8px;
		height: 42px;
	}
	.fd_2,.fd_3{
		padding: 0;
		border: none;
	}
	.fd_3_links p{
		text-align: center;
	}
	.fd_3_button{
		justify-content: center;
	}
}

@media screen and (max-width:1280px) {
	.fd_3_button.tel{
		pointer-events: auto;
	}
}
@media screen and (max-width:720px) {
    .fd_3_button {
        aspect-ratio: 325 / 55;
    }
    .fd_3_button .fd3b_big span{
        font-size: max(17px);
    }
    .fd_3_button.tel .fd3b_big span{
        font-size: max(18px);
        letter-spacing: 0.11em;
    }

}