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

html {scroll-behavior: smooth;}
:target { scroll-margin-top: calc(80vw / 19.2); }

body {
	color:#222222; font-size:calc(18 * 0.052vw); line-height: 2; letter-spacing: 0;
	font-family: "Noto Sans JP","Yu Gothic", "Meiryo", "Hiragino Kaku Gothic ProN", sans-serif; font-weight:500;
	margin: 0 auto; height: 100%; overflow-x:hidden;
}

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box;-o-box-sizing: border-box; -ms-box-sizing: border-box;box-sizing: border-box;}


.serif { font-family: "Noto Serif JP", serif; }
.mont { font-family: "Montserrat", sans-serif; font-weight: 500; }


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

button,input,textarea,select { appearance: none; -webkit-appearance: none; border:none; font-family: inherit; font-size: inherit; font-weight:600; letter-spacing: 0.05vw; }
button { border: none; cursor: pointer; background: none;}

.strong { font-weight:900; }
.bold { font-weight:900; }


.fs12vw { font-size:calc(12 * 0.052vw); }
.fs14vw { font-size:calc(14 * 0.052vw); }
.fs15vw { font-size:calc(15 * 0.052vw); }
.fs16vw { font-size:calc(16 * 0.052vw); }
.fs17vw { font-size:calc(17 * 0.052vw); }
.fs18vw { font-size:calc(18 * 0.052vw); }
.fs20vw { font-size:calc(20 * 0.052vw); }
.fs21vw { font-size:calc(21 * 0.052vw); }
.fs22vw { font-size:calc(22 * 0.052vw); }
.fs23vw { font-size:calc(23 * 0.052vw); }
.fs24vw { font-size:calc(24 * 0.052vw); }
.fs25vw { font-size:calc(25 * 0.052vw); }
.fs26vw { font-size:calc(26 * 0.052vw); }
.fs27vw { font-size:calc(27 * 0.052vw); }
.fs28vw { font-size:calc(28 * 0.052vw); }
.fs29vw { font-size:calc(29 * 0.052vw); }
.fs30vw { font-size:calc(30 * 0.052vw); }
.fs31vw { font-size:calc(31 * 0.052vw); }
.fs32vw { font-size:calc(32 * 0.052vw); }
.fs33vw { font-size:calc(33 * 0.052vw); }
.fs34vw { font-size:calc(34 * 0.052vw); }
.fs35vw { font-size:calc(35 * 0.052vw); }
.fs36vw { font-size:calc(36 * 0.052vw); }
.fs37vw { font-size:calc(37 * 0.052vw); }
.fs38vw { font-size:calc(38 * 0.052vw); }
.fs40vw { font-size:calc(40 * 0.052vw); }
.fs42vw { font-size:calc(42 * 0.052vw); }
.fs44vw { font-size:calc(44 * 0.052vw); }
.fs45vw { font-size:calc(45 * 0.052vw); }
.fs48vw { font-size:calc(48 * 0.052vw); }
.fs50vw { font-size:calc(50 * 0.052vw); }
.fs52vw { font-size:calc(52 * 0.052vw); }
.fs53vw { font-size:calc(53 * 0.052vw); }
.fs54vw { font-size:calc(54 * 0.052vw); }
.fs55vw { font-size:calc(55 * 0.052vw); }
.fs56vw { font-size:calc(56 * 0.052vw); }
.fs59vw { font-size:calc(60 * 0.052vw); }
.fs60vw { font-size:calc(60 * 0.052vw); }
.fs62vw { font-size:calc(62 * 0.052vw); }
.fs64vw { font-size:calc(64 * 0.052vw); }
.fs65vw { font-size:calc(65 * 0.052vw); }
.fs66vw { font-size:calc(66 * 0.052vw); }
.fs68vw { font-size:calc(68 * 0.052vw); }
.fs70vw { font-size:calc(70 * 0.052vw); }
.fs72vw { font-size:calc(72 * 0.052vw); }
.fs75vw { font-size:calc(75 * 0.052vw); }
.fs80vw { font-size:calc(80 * 0.052vw); }
.fs84vw { font-size:calc(84 * 0.052vw); }
.fs100vw { font-size:calc(100 * 0.052vw); }
.fs110vw { font-size:calc(110 * 0.052vw); }
.fs125vw { font-size:calc(125 * 0.052vw); }
.fs160vw { font-size:calc(160 * 0.052vw); }
.fs180vw { font-size:calc(180 * 0.052vw); }
.fs210vw { font-size:calc(210 * 0.052vw); }
.fs300vw { font-size:calc(300 * 0.052vw); }



img { border: none; vertical-align: middle; }

img.top { vertical-align: top; }
img.bottom { vertical-align: bottom; }
img.banner { border: solid 1px #DDD; }


address, em { font-style: normal; }

a { color: #000; text-decoration: none; }


a:hover,input[type="submit"]:hover, input[type="reset"]:hover {opacity: 0.9; filter: alpha(opacity=90); -ms-filter: "alpha( opacity=90 )"; }

.underline { text-decoration:underline; }

.position_r { position:relative; z-index:1; }
.position_a { position:absolute; z-index:2; }

/*********** class ****************************************/


/********** float ************/
.c-both { clear: both; }
.clearfix::after { content: ""; clear: both; display: block; }
.left { float: left; }
.right { float: right; }
.center { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.text_right { margin-left:auto; margin-right:0; text-align:right; }


/******* end float **********/

/******* flex box ***********/
.flex {display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;justify-content: space-between;}
.height {justify-content: space-evenly; flex-wrap: wrap; align-items: stretch;}
.flex.start {justify-content: flex-start;}
.flex.wrap { flex-wrap:wrap; }
.flex.center { justify-content:center; }

/* image parent cover *******/
.fit { object-fit: cover; font-family: 'object-fit: cover;'; max-width: 100%; }

/****** grid *************/

.grid_center { display: grid; place-items: center; }

/****** layout ********/
.inner { width: calc(1740vw / 19.2); margin: 0 auto; height: 100%; }
.middle_inner { width: calc(1660vw / 19.2); margin: 0 auto; height: 100%; }
.low_inner { width: calc(1400vw / 19.2); margin: 0 auto; height: 100%; }
.minimum_inner {width: calc(900vw / 19.2); margin: 0 auto; height: 100%; }


.right_inner { width: calc(1800vw / 19.2); margin: 0 0 0 auto; height: 100%; }
.left_inner { width: calc(1800vw / 19.2); margin: 0 auto 0 0; height: 100%; }

.heading { width: 100%; }

/* image parent cover *******/
.fit { object-fit: cover; font-family: 'object-fit: cover;'; max-width: 100%; }

dl.table { display:table; width:100%; }
dl.table dt,dl.table dd { display:table-cell; }


.black { color:#222222; --text_color:#222222; }
.dark { color:#606060; --text_color:#606060; }
.green { color:#127e40; --text_color:#127e40; }
.white { color:#FFFFFF; --text_color:#FFFFFF; }



.bg_black { background-color:#212121; }
.bg_white { background-color:#FFFFFF; }
.bg_green { background-color:#127e40; }
.bg_light_green { background-color:#9cae83; }
.bg_shilver { background-color:#f0f0f0; --bg_color:#f0f0f0; }
.bg_dark { background-color:#f0f0f0; --bg_color:#E6E6E6; }
.bg_cream { background-color:#f7ebdf; --bg_color:#f7ebdf; }
.bg_red {
    background-color: #d21212;
}
/****** display ********/

.pc { display: unset; }
.sp { display: none; }
.grid { display: grid; }

/** animation **************************/
.decoration { z-index: 0; top:0; overflow: hidden; width: 100%; margin-inline: auto; }

.decoration .loop { animation: loop 40s linear infinite; width: max-content; }
.decoration .loop.second{ position: absolute; top: 0; left: 0; animation: loop 40s -20s linear infinite;}

.ohidden { position:relative; width:100%; height: calc(250vw / 19.2); overflow:hidden; }

@keyframes loop { 0%{ transform: translateX(100%); } 100%{ transform: translateX(-100%); } }

.fade_in { opacity: 0; transition: opacity 0.8s ease; }
.fade_in.active { opacity: 1; }

.fade_up { opacity: 0; transform:translateY(3vw); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade_up.active { opacity:1; transform: translateY(0); }

.fade_left { opacity: 0; transform:translateX(-10vw); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade_left.active { opacity:1; transform: translateX(0); }

.fade_right { opacity: 0; transform:translateX(10vw); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade_right.active { opacity:1; transform: translateX(0); }

.fade_zoom { opacity: 0; transform: scale(0.3); transition: opacity 0.6s ease, transform 0.4s ease;}
.fade_zoom.active { opacity: 1; transform: scale(1); }

.text_curtain { width: max-content; overflow: hidden; }
.text_curtain span { display: inline-block; padding: 0.2em 0.4em; clip-path: inset(0 100% 0 0); transition: clip-path 1s ease; }
.text_curtain.active span { clip-path: inset(0 0 0 0); }

/** end animation **************************/

.ttl .slug { line-height: 1; }
.ttl .ja { display:block; padding: 0.5em; }


.circle { border-radius:50vmax; }

.more { display: flex; justify-content: center; align-items: center; width: calc(320vw / 19.2); height: calc(70vw / 19.2); border-radius: 50vmax; margin-block-start: 3em; position: relative; }
.more i { margin-left:1em; }

#header {  }
#header .logo_box { width:calc(460vw / 19.2); }
#header .logo_box a { align-items:center; justify-content: flex-start; }
#header .logo_box a .logo { width:calc(126vw / 19.2); margin-right:0.5em; }
#header .logo_box a .site_name {  }

#header .header_nav {  }
#header .header_nav .nav_list { align-items:center; list-style-type:none; margin:0; padding: 0; height: 100%; }
#header .header_nav .nav_list li { margin:0 0 0 2em; }


#footer { padding:3em 0 2em 0; }
#footer .logo_box { width:calc(760vw / 19.2); margin:0; padding:2em 0 2em calc(100vw / 19.2); border-top-right-radius:50vmax; border-bottom-right-radius:50vmax; }
#footer .logo_box .logo { display:block; width:calc(226vw / 19.2); }

#footer .footer_nav {  }
#footer .footer_nav .nav_list { align-items:center; list-style-type:none; margin:0; padding: 0; height: 100%; }
#footer .footer_nav .nav_list li { margin:0 0 0 2em; }

#footer .copy { margin-block-start:3em; margin-block-end:0; }


#fv { aspect-ratio: 16 / 9; background-color:#EEEEEE; }

#top_news { padding:4em 0 6em 0; }
#top_news .news_list {  }
#top_news .news_list .box { margin:0; border-bottom:dashed 1px #666666; }
#top_news .news_list .box dt { width: 10em; margin:0; padding:1em 0 1em 1em; }
#top_news .news_list .box dt time { display:grid; place-items:center; width: 7em; line-height:1; padding:0.5em 0.8em 0.5em 0.8em; border-radius:50vmax; }
#top_news .news_list .box dd { margin:0; padding:1em 0 1em 1em; }



#top_company { padding:10em 0 6em 0; overflow:hidden; }
#top_company .text { width:calc(830vw / 19.2); padding:5em 0 3em 3em; }
#top_company .text .ttl { top:-4em; }
#top_company .thumb { width:calc(1052vw / 19.2); inset:auto -7em 0.5em auto; }


#top_group_companies { padding:10em 0 6em 0; }
#top_group_companies .text { width:calc(830vw / 19.2); padding:5em 3em 3em 0; }
#top_group_companies .text .ttl { top:-4em; }


.thumb_group { inset:-3.75em auto auto 0; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 1em; }
.thumb_group .thumb { width:calc(420vw / 19.2); height: calc(325vw / 19.2); }

.thumb_group .thumb.grid2, .thumb_group .thumb.grid4 { place-content: end; }


#top_other_contents { padding:2em 0 8em 0; }

#top_other_contents .box { width: calc(800vw / 19.2); height: calc(500vw / 19.2); padding: 2em; overflow:hidden; }

#top_other_contents .box .ttl { z-index:2; margin:0 0 2em 0; }
#top_other_contents .box .ttl .ja { width:max-content; line-height:1.5; padding:0.1em 0.5em 0.1em 0.5em; margin-block-start:0.5em; }
#top_other_contents .box .more { z-index:2; margin-block-start: 8em; }
#top_other_contents .box .thumb { position: absolute; inset:0; z-index:0; height: 100%; transition: transform .4s ease; }
#top_other_contents .box:hover .thumb { transform: scale(1.04); }


#top_other_contents .box::after {
	content: ""; position: absolute; inset: 0; width: calc(800vw / 19.2); height: calc(500vw / 19.2);
	background: radial-gradient(rgba(0,0,0,0.3) 1px, transparent 1px), rgba(0,0,0,0.2); background-size: 10px 10px; pointer-events: none;
}




.page_header { display:grid; place-items:center; height:calc(300vw / 19.2); }


.company_nav { justify-content:center; padding:2em 0 2em 0; }
.company_nav a { width:calc(300vw / 19.2); margin:calc(20vw / 19.2); }
.company_nav a .slug { display:block; }
.company_nav a .btn { align-items: center; padding:0.75em 0.75em 0.75em 1em; }
.company_nav a .btn i {  }


.hero { padding:1em 0 3em 0; }
.hero .catch { margin-block-start:0; }




#philosophy { padding:0 0 6em 0; }
#philosophy header { padding:1em 0 1em 0; }
#philosophy .content { padding:6em 0 0 0; }
#philosophy .content .text { width:calc(800vw / 19.2); }
#philosophy .content .text .catch { margin-block-start:0.5em; }
#philosophy .content .thumb { width:calc(858vw / 19.2); height:calc(804vw / 19.2); }

#company_profile { padding:0 0 6em 0; }
#company_profile header { padding:1em 0 1em 0; }
#company_profile .content { padding:6em 0 0 0; }
#company_profile .content .table { margin:0; border-bottom:solid 1px #444444; }
#company_profile .content .table dt { width:10em; margin:0; padding:1em; }
#company_profile .content .table dd { margin:0; padding:1em }
#company_profile .content .map {  }
#company_profile .content .map dt { padding: 0 1em 0 1em; }
#company_profile .content .map dd { margin:0; padding: 0 1em 0 1em; }
#company_profile .content .map dd .heading { height:calc(500vw / 19.2); min-height:280px; }




#history { padding:0 0 6em 0; }
#history header { padding:1em 0 1em 0; }
#history .content { padding:3em 0 0 0; }
#history .content .thumb { margin-block-end:3em; }

#history .content .table { margin:0; border-bottom:solid 1px #444444; }
#history .content .table dt { width:10em; margin:0; padding:1em; }
#history .content .table dd { margin:0; padding:1em }



#group_companies { padding:6em 0 6em 0; }
#group_companies .group {  }
#group_companies .group .text { width:calc(800vw / 19.2); }
#group_companies .group .thumb { width:calc(600vw / 19.2); }




/*************  relation  ******************/
section#relation{
	padding-bottom: 11.5em;
}
dl.relation_container{
	border-top: 1px solid #999;
	padding: 4.5em 0;
    margin: 0;
}
dl.relation_container:first-of-type { border-top:none; }
dl.relation_container.end{
	border-bottom: 1px solid #999;
}
dl.relation_container dt{
	display: table-cell;
	width: 32%;
	vertical-align: top;
}
dl.relation_container dt img{
	max-width: 280px;
	margin: auto;
	width: 90%;
	display: block;
}
dl.relation_container dd{
	display: table-cell;
	margin: 0;
	margin-left: 3.5%;	
	vertical-align: top;
	font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	width: 64.5%;
}
dl.relation_container dd h5.company_name{
	margin: 0;
	letter-spacing: 2px;
	line-height: 1;
	margin-bottom: 1em;
}
dl.relation_container dd span{
	display:block;
	font-weight: 600;
}
dl.relation_container dd span.cont{
    font-size: 0.938em;
    font-weight: 500;
	margin-top: 1.5em;
	margin-bottom: 0.75em;
}
dl.relation_container dd span a{
	color:#333333;
	margin-left: 1em;
}
dl.relation_container dd span a i{
	color:#1F9A0C;
	font-size: 1.3em;
	vertical-align: text-bottom;
	margin-left: 0.5em;
}
dl.relation_container dd dl dt{
	background-color:#1F9B0D;
	display: inline-block;
	color:#FFF;
	font-size: 0.875em;
	font-weight: 600;
	width: 5.72em;
	text-align: center;
	vertical-align: text-top;
	letter-spacing: 2px;
	text-indent: 2px;
}
dl.relation_container dd dl dd{
	display: inline-block;
	margin: 0;
	width: calc(100% - 6.72em);
	font-size: 0.938em;
	vertical-align: text-top;
	color:#009900;
	font-weight: 600;
	margin-bottom: 0.3em;
	padding-left: 1em;
}
dl.relation_container dd dl dd i{
	font-size: 1em;
	margin-right: 0.4em;
}
dl.relation_container dd dl dd.tell{
	font-weight: 500;
}
dl.relation_container dd dl dd.tell a{
	font-weight: 500;
	color:#009900;	
}
dl.relation_container dd dl dd.tell i{
	font-size: 0.85em;
}
dl.relation_container dd dl.bean{
	margin-top: 1em;
}
dl.relation_container dd dl.bean dt{
	display: block;
	font-size: 1.125em;
	width: auto;
	text-align: left;
	background-color:#FFF;
	color:#333;
	letter-spacing: 0px;
	line-height: 1.5;
	margin-left: 1.7em;
	text-indent: -1em;
}
dl.relation_container dd dl.bean dt:before{
	position: relative;
	left: -6px;
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	content: '';
	border-radius: 100%;
	background:#00B800;
	vertical-align: middle;
}
dl.relation_container dd dl.bean dd{
	color:#333;
	line-height: 1.2;
	margin-bottom: 0.7em;
	padding: 0;
	margin-left: 1.8em;
}
dl.relation_container dd dl.bean dd a{
	margin-left: 0.8em;
}
dl.relation_container dd dl.bean dd a i{
	color:#1F9A0C;
	margin-left: 0.5em;
	font-size: 1.3em;
}


#contact { padding:6em 0 6em 0; }

#contact-form { padding:4em; }



form .box  { margin-block-start: 0; margin-block-end: 0; border-bottom: dashed 1px #DDD; }

form .box dt { width:17em; padding: 2em 0 2em 0; vertical-align: top;}
form .box dt .required { display:inline-block; padding:0.1em 0.5em 0.1em 0.5em; border-radius:5px; }
form .box dt .any { display:inline-block; padding:0.1em 0.5em 0.1em 0.5em; border-radius:5px; }

form .box dd { margin:0; padding: 1em 0 1em 3em; }
form .box dd .memo { display:block; }

form.confirm .box dd { margin:0; padding: 2em 0 2em 3em; }


form .box input[type=text],
form .box input[type=tel],
form .box input[type=email],
form .box select { padding: 1em; width: 100%; border:solid 2px #CCD1D2; border-radius:5px; }
form .box textarea { padding: 1em; width: 100%; height:14em; font-size: 1em; font-family: inherit; border:solid 2px #CCD1D2; border-radius:5px; }
form .box select.word_size { width:8em; }

form .box .error { color:#EB1D20; display:block; }

form .box label { display: inline-block; cursor:pointer; margin:1em 2em 1em 0; }

form .box input[type=checkbox] { height: 1.5em; width: 1.5em; margin:0 0.6em 0.15em 0; background-color: #FFF; border:solid 2px #CCD1D2; border-radius: 4px;vertical-align: middle;}
form .box input[type=checkbox]:checked { border: 2px solid #0060df; background-color: #0060df;}
form .box input[type=checkbox]:checked::before {
	content: ""; display: block; position: relative; left: 0.5em; top: 1px; width: 6px; height: 12px; border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
form .box input[type=checkbox]:focus-visible { outline: 2px solid #004aaa; outline-offset: 2px;}



form .next,form .send_btn,form .back_btn {
	display: flex; justify-content: center; align-items: center; width: calc(320vw / 19.2); height: calc(70vw / 19.2); border-radius: 50vmax; margin-block-start: 3em; position: relative;
	cursor: pointer;
}
form .next i,form .send_btn i { margin-left:1em; }
form .back_btn i { margin-right:1em; }




form .back_btn {
	display: flex; justify-content: center; align-items: center; width: calc(320vw / 19.2); height: calc(70vw / 19.2); border-radius: 50vmax; margin-block-start: 3em; position: relative;
	cursor: pointer;
}