:root {
  --fs-intro-h1: clamp(1.8rem, -0.5622rem + 5.1351vw, 5.6rem);
     
}
/* product choose page */
section.front-main-intro {
    padding: 1rem 4vw 1rem 4vw;
    overflow:hidden;
    position: relative;
}
section.front-main-intro > figure {
  position: relative;
  padding: 6rem 2rem;
  /* grid styles */
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
figure.front-main-intro-txt > figcaption {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
  padding: 4rem 0;
}
.contact-main-intro h2,
.contact-main-intro h1,
.front-main-intro h2,
.front-main-intro h1 {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: var(--clr-green);
    margin: 0;
}
.front-main-intro h2,
.contact-main-intro h2 {
    font-size: clamp(1rem, 0.8400rem + 0.8000vw, 1.8rem);
    color: var(--clr-greydrk);
    margin: 0;
    font-weight: 300;
}
.contact-main-intro h2 {
    position: absolute;
    top: 1.5%;
    left: 0;
    right: 0;
    color: var(--clr-greendrk);
    background-color:rgba(255,255,255,0.85);
    padding: .23% 0;
    display: inline-block;
    width: auto;
    margin: 0 auto;
    
}
.contact-main-intro h1,
.front-main-intro h1 {
    font-size: var(--fs-intro-h1);
    margin: .23em 0 0 0;
}

/* top */
section.contact-main-intro {
    padding: 2rem 4vw 0 4vw;
    overflow:hidden;
    position: relative;
}
.contact-main-intro img {
    position: absolute;
    top: 0;
    width: 100%;
    object-fit: cover;
    height: 100%;
}

section.contact-main-intro > figure {
  position: relative;
  padding: 14rem 2rem;
  /* grid styles */
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
section.contact-main-intro > figure > img {
    position: absolute;
    top: 0;
}
figure.contact-main-intro-txt > figcaption {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 0 0rem 0;
    vertical-align: bottom;
    display: inline;
}
.contact-main-intro h1 {
    position: absolute;
    left: 0;
    bottom: 5%;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: clamp(1rem, 0.8400rem + 0.8000vw, 1.8rem);
    color: var(--clr-greendrk);
}
.contact-main-intro h1 {
    font-size: clamp(1.7rem, 0.3946rem + 2.8378vw, 3.8rem);
    margin: .67em 0 0 0;
}



section.intro-lead-p  {
    text-align: center;
    /*
    border-bottom: 1px solid var(--clr-greydrk);
    */
}
section.intro-lead-p h3 {
    font-size: clamp(1rem, 0.8400rem + 0.8000vw, 1.8rem);
    color: var(--clr-greendrk);
    margin: 1em 0 .5em 0;
}

section.contact-section-links  {
    text-align: center;
    /*
    border-bottom: 1px solid var(--clr-greydrk);
    */
}
section.contact-section-links > .navi  {
    text-align: center;
    width: 100%;
    display: inline-block;
    background-color: var(--clr-bluelght);
    padding: 1rem 0 0 0!important;
}
section.contact-section-links > .navi > ul  {
    margin: 0 auto!important;
    text-align: center;
    width: auto;
}
section.contact-section-links > .navi > ul > li  {
    text-align: center;
    width: auto;
    padding: 0!important;
    margin: 0!important;
    display: inline-table!important;
    margin: 0 1rem 1rem 1rem!important;
}
section.contact-section-links > #secmenu > ul > li.focus  {
    background: none;
}
section.contact-section-links > #art-lnk,
section.contact-section-links > .navi > ul > li > a {
    display: inline-block;
    margin: 0;
    font-size: clamp(1rem, 0.9200rem + 0.4000vw, 1.4rem);
    background-color: var(--clr-white);
    color: var(--clr-greydrk)!important;
    padding: 1.0% 1.5% 1.0% 1.5%;
    border-radius: 0.4rem;
    border: none;
    width: auto;
    white-space: nowrap;
}
section.contact-section-links > .navi > ul > li > a {
    padding: 1rem 2.0rem 1rem 2.0rem;
}
section.contact-section-links > #art-lnk:hover,
section.contact-section-links > .navi > ul > li > a:hover {
    cursor: pointer;
    background-color: var(--clr-green);
    color: var(--clr-white)!important;
}

.contact-section-main-cntnr {
    margin: 0 4vw 2rem 4vw;
}
.contact-section-main-cntnr > .contact-section-main,
.contact-section-agent-cntnr > .contact-section-agent,
.contact-section-agent-cntnr > .contact-section-reference,
.contact-section-personnel-cntnr > .contact-section-personnel,
.contact-section-sales-cntnr > .contact-section-sales {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1rem;
}
.contact-section-personnel-cntnr {
    max-width: var(--page-wdth-max);
	margin: 0 auto;
}
.contact-section-personnel-cntnr > .contact-section-personnel {
    grid-gap: 3rem;
	grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
	justify-content: center;
	align-content: center;
	text-align: center;
	margin: 
		clamp(0.4rem, 0.0800rem + 1.6000vw, 2rem)
		clamp(0.4rem, -1.1200rem + 7.6000vw, 8rem);
}
.contact-section-personnel-cntnr > .contact-section-personnel > .contact-section-personnel-item > img {
	display: inline-block;
	border-radius: 50%;
	overflow: hidden;
}
.contact-section-sales-cntnr > .contact-section-sales {
    grid-template-columns: 1fr 1fr 1fr 1fr ;
}

.contact-section-agent-cntnr {
    margin: 0 4rem;
}
.contact-section-agent-cntnr > .contact-section-agent {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 3rem;
}
.contact-section-agent-cntnr > .contact-section-reference {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 3rem;
    margin: 0 5rem;
}
.contact-section-main-text {
    padding-right: 3%;
}
.contact-section-main-text .article-widget p {
    margin: 1em 0 0.5em 0;
}
.contact-section-main-map-cntnr {
    overflow: hidden;
    padding-bottom:70%;
    position:relative;
    height:0;
}
.contact-section-main-map-cntnr iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}
.contact-section-header {
    display: inline-block;
    margin: 0;
    width: 100%;
    text-align: center;
}
.contact-section-header h2{
    font-size: clamp(1.7rem, 0.3946rem + 2.8378vw, 3.8rem);
    width: 60%;
    margin: .67em 20% .67em 20%;
    padding: .32em 0 .32em 0;
    color: var(--clr-greydrk);
    border-bottom: 1px solid var(--clr-greydrk);
}

.contact-section-personnel-item h2:nth-child(2),
.contact-section-sales-item h2:nth-child(2)  {
    border-bottom: 1px solid var(--clr-greendrk);
    margin: .83em 0 .23em 0;
    padding: 0 0 .23em 0;
}
.contact-section-personnel-item h2:nth-child(2),
.contact-section-sales-item h2:nth-child(2)  {
    border-bottom: 1px solid var(--clr-bluedrk);
    margin: .83em 0 .23em 0;
    padding: 0 0 .23em 0;
}
.contact-section-personnel-item h2:nth-child(3),
.contact-section-sales-item h2:nth-child(3) {
    color: var(--clr-bluedrk);
    font-size: clamp(0.65rem, 0.5600rem + 0.4500vw, 1.1rem);
    margin: .23em 0 .63em 0;
}
.contact-section-personnel-item p,
.contact-section-sales-item p {
    margin: .83em 0 .83em 0;
}



.contact-section-agent-item h2:nth-child(1)  {
    /*
    border-bottom: 1px solid rgba(1,55,130,1.00);
    */
    margin: .83em 0 .23em 0;
    padding: 0 0 .23em 0;
    color: var(--clr-greydrk);
    font-weight: 400;
}
.contact-section-agent-item h2:nth-child(1):before {
    content: "\002B24";
    margin-left: -0.6em;
    margin-right: 0.6em;
    color: rgba(1,55,130,1.00);
}
.contact-section-agent-item h2 {
    font-size:  clamp(0.8rem, 0.6600rem + 0.7000vw, 1.5rem);
}
.contact-section-agent-item p {
    margin: .83em 0 .83em 0;
}


@media screen and (max-width: 1368px) {
    

.contact-section-personnel-cntnr > .contact-section-personnel {
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
    
}

@media screen and (max-width: 1280px) {
 

.contact-section-personnel-cntnr > .contact-section-personnel {
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
    
}


@media screen and (max-width: 1152px) {

section.intro-categories {
    padding: 2rem 12vw 2rem 12vw;
}

section.intro-categories > ul > li > a {
    padding: 3.4rem 10%;
}
.contact-section-main-cntnr > .contact-section-main,
.contact-section-agent-cntnr > .contact-section-agent,
.contact-section-sales-cntnr > .contact-section-sales {
    grid-template-columns: 0.3fr 1fr 1fr 0.3fr;
}
	
.contact-section-personnel-cntnr > .contact-section-personnel {
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
    
}

@media screen and (max-width: 980px) {

section.intro-categories {
    padding: 2rem 10vw 2rem 10vw;
}
section.intro-categories > ul > li > a {
    padding: 2.9rem 10%;
}
.contact-section-personnel-cntnr > .contact-section-personnel {
  grid-gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
    
}


@media screen and (max-width: 736px) {

section.front-main-intro {
    padding: 1rem 4vw 1rem 4vw;
}
section.front-main-intro > figure {
    padding: 2rem 2rem;
}
figure.front-main-intro-txt > figcaption {
    padding: 1rem 0;
}
section.intro-categories  {
    padding: 2rem 6vw 2rem 6vw;
}
section.intro-categories > ul > li > a {
    padding: 2.7rem 10%;
}
    

.contact-section-main-cntnr > .contact-section-main,
.contact-section-agent-cntnr > .contact-section-agent,
.contact-section-sales-cntnr > .contact-section-sales {
    grid-template-columns: 1fr;
}
.contact-section-agent-cntnr > .contact-section-reference {
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    margin: 0;
}
	
.contact-section-personnel-cntnr > .contact-section-personnel {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
    
}