@charset "utf-8";
/* About nav
------------------------------------------------------------------*/
.about-nav {
    background: linear-gradient(to right,  rgba(18,26,89,1) 0%,rgba(39,62,156,1) 35%,rgba(65,101,247,1) 50%,rgba(39,62,156,1) 65%,rgba(18,26,89,1) 100%);
    padding: clamp(40px, 3.2738095238095238095vw, 55px) 0;
}
.about-nav ul {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
	position: relative;
	justify-content: center;
    max-width: 840px;
    width: 92%;
    gap: clamp(15px, 1.4880952380952380952vw, 25px);
    margin: auto;
}
.about-nav ul li {
    position: relative;
    transition: all .3s;
}
.about-nav ul li.unlink { pointer-events: none; }
.about-nav ul li a { 
    color: #fff;
    display: block;
    font-size: clamp(1.6rem, 1.1904761904761904762vw, 2rem);
    letter-spacing: 0.08em;
    color: #fff;
    opacity: 0.5;
    text-align: center;
    padding: clamp(8px, 0.71428571428571428571vw, 12px) 0;
    border-radius: 4px;
    transition: all .3s;
    background-color: rgba(255, 255, 255, .1);
    position: relative;
    z-index: 0;
}
.about-nav ul li a .ttl_en {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}
.about-nav ul li a .ttl_jp {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}
.about-nav ul li.active a .ttl_en,
.about-nav ul li a:hover .ttl_en {
    opacity: 0;
    visibility: hidden;
}
.about-nav ul li.active a .ttl_jp,
.about-nav ul li a:hover .ttl_jp {
    opacity: 1;
    visibility: visible;
}
.about-nav ul li a::after {
    content: "";
    border: solid #fff;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: clamp(5px, 0.5952380952380952381vw, 10px);
    transform: translateX(-50%) rotate(45deg);
    position: absolute;
    bottom: calc(clamp(5px, 1.4880952380952380952vw, 25px) * -1);
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}
.about-nav ul li::before,
.about-nav ul li::after {
    content: "";
    width: clamp(8px, 0.71428571428571428571vw, 12px);
    height: 100%;
    border-color: #d8664f;
    border-style: solid;
    position: absolute;
    display: block;
    top: -1px;
    z-index: 2;
}
.about-nav ul li::before {
    border-width: 1px 0 1px 1px;
    left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.about-nav ul li::after {
    border-width: 1px 1px 1px 0;
    right: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.about-nav ul li:hover a,
.about-nav ul li.active a  {
	background-color: #4165f7;
    opacity: 1;
}
.about-nav ul li:hover::before,
.about-nav ul li:hover::after,
.about-nav ul li.active::before,
.about-nav ul li.active::after {
    border-color: #95f8fd;
}
.about-nav ul li.active a::after {
    opacity: 1;
    visibility: visible;
}
.about-nav ul li.active { pointer-events: none;}
.about-nav .unclickable { cursor: default;}
@media screen and (max-width: 767px) {
    .about-nav ul { grid-template-columns: repeat(2, 1fr); row-gap: 30px;}
}
@media screen and (max-width: 767px) {
    .about-nav ul li a .ttl_jp { letter-spacing: 0; }
}
/* About section
------------------------------------------------------------------*/
/* Our Philosophy */
.about-block {
    display: grid;
    grid-template-columns: 50% auto;
    gap: clamp(20px, 4.7619047619047619048vw, 80px);
    align-items: center;
}
.about-block .desc:not(:last-child) {
    margin-bottom: clamp(30px, 4.57142857vw, 60px);
}
.about-block .photo {
    margin-top: clamp(20px, 4.7619047619047619048vw, 80px);
}
.core_block { position: relative;}
.core_block .core-bg {
    width: 78.3%;
    margin: auto;
}
.core_block .list_item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.core_block .list_item .item {
	width: 37.7%;
	position: absolute;
	transition: all 1s;
    transition-delay: 1s;
	opacity: 0;
    border-radius: 50%;
    z-index: 2;
}
.core_block .list_item .item01 {
	top: -21.5%;
    left: 31.8%;
}
.core_block .list_item .item02 {
	top: 44.5%;
	left: -8%;
}
.core_block .list_item .item03 {
	top: 44.5%;
	right: -8%;
}
.core_block .list_item.on .item { opacity: 1;}
.core_block .list_item.on .item01 { top: -13.5%;}
.core_block .list_item.on .item02 { left: 5.5%;}
.core_block .list_item.on .item03 { right: 4.7%;}
@media screen and (max-width: 1400px) {
    .about-block .img { margin-right: -6%;}
    .core_block { margin-top: 10%;}
}
@media screen and (max-width: 767px) {
    .about-block { grid-template-columns: 1fr;}
    .about-block .img { margin: 0;}
    .about-block .desc { order: 1;}
}

/* Mission/Vision */
.mx-1030 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1030px;
}
.director {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    font-size: clamp(1.2rem, 0.95238095238095238095vw, 1.6rem);
    line-height: 2.0;
    letter-spacing: 0.1em;
    margin-top: clamp(30px, 3.57142857vw, 60px);
    text-align: left;
}
.director .name {
    font-size: calc(24 / 16 * 100%);
}
.nanoteco .logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
}

/* Company Profile */
.profile-block {
    max-width: 1030px;
    margin: 0 auto;
}
.profile-block:not(:last-child) {
    margin-bottom: clamp(60px, 7.14285714vw, 120px);
}
.profile-ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 2rem;
    font-size: clamp(2rem, 7.14285714vw, 3rem);
    line-height: 1.5;
    margin-bottom: clamp(30px, 3.57142857vw, 60px);
}
.profile-ttl:before,
.profile-ttl:after {
    background-color: #000;
    content: "";
    display: block;
    height: 1px;
    width: auto;
    flex: 1;
}
.profile-ttl > span {
    margin-top: -0.5rem;
}
.profile-tbl {
    font-size: clamp(1.4rem, 1.01190476vw, 1.7rem);
    font-weight: 400;
    line-height: 1.5;
    width: 100%;
}
.profile-tbl th,
.profile-tbl td {
    border: 1px solid #000;
    vertical-align: top;
}
.profile-tbl th {
    background-color: #d9d8d8;
    padding: 12px 0;
    text-align: center;
    width: 100px;
}
.profile-tbl td {
    background-color: #fff;
    padding: 12px 24px;
}
.profile-tbl .gray {
    color: #808080;
}
.profile-tbl table th,
.profile-tbl table td {
    background-color: transparent;
    border: none;
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
}
.profile-tbl a .pdf-txt {
    border-bottom: 1px solid #000;
}
.profile-tbl a:hover .pdf-txt {
    border-bottom: transparent;
}
.profile-tbl a .pdf-btn {
    margin-left: 0.5em;
    width: 80px;
}
@media screen and (max-width: 767px) {
    .profile-tbl th {
        width: 60px;
    }
    .profile-tbl td {
        padding: 6px 12px;
    }
    .profile-tbl table th,
    .profile-tbl table td {
        display: block;
        padding: 0;
        width: 100%;
    }
    .profile-tbl a .pdf-btn {
        width: 65px;
    }
}

.hub-block + .hub-block {
    margin-top: clamp(40px, 4.76190476vw, 80px);
}
.hub-body {
    padding: 0 50px;
}
.hub-ttl {
    background-color: #d9d8d8;
    font-size: clamp(1.7rem, 1.30952381vw, 2.2rem);
    margin-bottom: clamp(30px, 2.67857143vw, 45px);
    padding: 5px 0 5px clamp(10px, 15px, 25px);
}
.hub-body .photo {
    max-width: 585px;
    margin: 0 auto;
    margin-bottom: clamp(30px, 3.57142857vw, 60px);
}
.hub-body .ttl {
    font-size: clamp(1.7rem, 1.30952381vw, 2.2rem);
    margin-bottom: 15px;
}
.hub-body .txt {
    font-size: clamp(1.4rem, 1.13095238vw, 1.9rem);
    line-height: 2;
}
@media screen and (max-width: 767px) {
    .hub-body {
        padding: 0;
    }
    .hub-body .txt {
        line-height: 1.8;
    }
}

.history-block {
    position: relative;
}
.history-block:before {
    background-color: #2b3587;
    content: "";
    width: 6px;
    height: 100%;
    position: absolute;
    left: 90px;
    top: 50px;
}
.history-item {
    padding: 30px 30px 30px 120px;
}
.history-item:nth-child(odd) {
    background-color: #d9d8d8;
}
.history-item:nth-child(even) {
    background-color: #fff;
}
.history-tbl {
    width: 100%;
}
.history-tbl th {
    font-size: clamp(1.4rem, 1.01190476vw, 1.7rem);
    font-size: 1.7rem;
    line-height: 2.2;
    vertical-align: top;
    position: relative;
    width: 40px;
}
.history-tbl th::before {
    background-color: #fff;
    border: 6px solid #2b3587;
    border-radius: 50%;
    content: "";
    display: block;
    height: 18px;
    width: 18px;
    position: absolute;
    top: 5px;
    left: -42px;
}
.history-tbl td {
    font-size: clamp(1.6rem, 1.13095238vw, 1.9rem);
    font-size: 1.9rem;
    line-height: 2;
    padding-left: 10px;
}
@media screen and (max-width: 767px) {
    .history-block:before {
        left: 25px;
        top: 35px;
        width: 3px;
    }
    .history-item {
        padding: 15px 15px 15px 45px;
    }
    .history-tbl th {
        font-size: 1.5rem;
        line-height: 1.7;
    }
    .history-tbl th::before {
        border-width: 3px;
        width: 12px;
        height: 12px;
        left: -28px;
    }
    .history-tbl td {
        font-size: 1.5rem;
        line-height: 1.8;
    }
}