@charset "UTF-8";
/* ========================================
  @media screen and (min-width: 768px), print
======================================== */
@media screen and (min-width: 768px),print {

/* mv
-------------------------------------*/
.mv {
    position: relative;
    margin-top: 113px;
    padding-bottom: 180px;
}
.mv .ttl {
    position: absolute;
    top: 43px;
    left: 50%;
    transform: translateX(-50%);
}
.mv .txt {
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2.2222;
    text-align: center;
    margin-bottom: 49px;
    margin-top: -49px;
}
.mv .lead {
    font-size: 32px;
    letter-spacing: 0.05em;
    line-height: 1.625;
    text-align: center;
}

/* greeting
-------------------------------------*/
.greeting {
    background: #F2F2F2;
    width: min(95%, 1440px);
    margin-inline: auto;
}
.greeting .inner {
    padding-block: 95px 120px;
    width: min(95%, 1220px);
    margin-inline: auto;
}
.greeting h2 {
    font-size: 40px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 93px;
}
.greeting .inBox {
    display: grid;
    grid-template-columns: 48.30% 40.2678%;
    justify-content: space-between;
    gap: calc(128 / 1920 * 100vw);
    width: min(95%, 1120px);
    margin-inline: auto;
}
.greeting .inBox h3 {
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 1.791666;
    margin-bottom: 41px;
}
.greeting .inBox .txt {
    font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
    letter-spacing: 0.05em;
    line-height: 2;
}
.greeting .inBox .photo-box {
    padding-block: 3px 0;
}
.greeting .inBox .photo {
    margin-bottom: 32px;
}
.greeting .inBox .name {
    font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 1.3333;
    display: flex;
    gap: 18px;
    align-items: baseline;
    justify-content: flex-end;
}
.greeting .inBox .name span {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
}
.greeting .en-deco {
    text-align: center;
    margin-top: -50px;
    margin-bottom: 46px;
}
.greeting .profile {
    background: #FFFFFF;
    width: min(95%, 1120px);
    margin-inline: auto;
    padding-block: 46px 49px;
}
.greeting .profile > .ttl {
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 1.9;
    text-align: center;
    margin-bottom: 30px;
}
.greeting .profile .list {
    width: min(95%, 880px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 80px;
}
.greeting .profile .list li > .ttl {
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2.1111;
    text-align: center;
    background: #fff;
    position: relative;
    margin-bottom: 24px;
}
.greeting .profile .list li > .ttl::before,
.greeting .profile .list li > .ttl::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 163px;
    height: 2px;
    background: #D8D8D8;
}
.greeting .profile .list li > .ttl::before {
    left: 0;
}
.greeting .profile .list li > .ttl::after {
    right: 0;
}
.greeting .profile .list .qualification > .ttl::before,
.greeting .profile .list .qualification > .ttl::after {
    width: 142px;
}
.greeting .profile .list p,
.greeting .profile .list li{
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: 2;
}
.greeting .profile .list .detail > li {
    position: relative;
    padding-left: 14px;
}
.greeting .profile .list .detail > li::before {
    position: absolute;
    content: "";
    background: #12294B;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
/* career */
.greeting .profile .list .career .detail {
    padding-block: 8px;
    display: grid;
    gap: 5px;
}
/* qualification */
.greeting .profile .list .qualification .detail {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 40px;
}

/* company
-------------------------------------*/
.company .inner {
    padding-block: 155px 178px;
}
.company h2 {
    font-size: 40px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 69px;
}
.company table {
    width: min(95%, 1000px);
    margin-inline: auto;
}
.company th,
.company td {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-align: left;
    padding-block: 27px;
}
.company th {
    font-weight: 500;
    border-bottom: 1px solid #12294b;
    text-align: center;
    width: 22.7%;
    vertical-align: middle;
}
.company td {
    border-bottom: 1px solid #d8d8d8;
    padding-left: 160px;
}

/* suggestion
-------------------------------------*/
.suggestion {
    background: #f2f2f2;
    padding-block: 126px 160px;
    text-align: center;
}
.suggestion h2 {
    font-size: 32px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 97px;
}
.suggestion .main-photo {
    width: min(95%, 1440px);
    margin-inline: auto;
    margin-bottom: 55px;
}
.suggestion .txt {
    font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
    margin-bottom: 63px;
}
.suggestion .lead {
    font-size: 24px;
    letter-spacing: 0.05em;
    line-height: 2.708333;
    text-align: center;
    display: inline-block;
    margin-bottom: 75px;
}
.suggestion .lead span {
    border-bottom: 1px solid #000;
    padding-bottom: 7px;
}
.suggestion .photo {
    width: min(95%, 1201px);
    margin:0 auto 0px;
}

.suggestion .photo picture{
    display: block;
    margin:0 auto 13px;
}

/* access
-------------------------------------*/
.access {
    padding-block: 137px 21px;
    position: relative;
}
.access h2 {
    font-size: 40px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 77px;
}
.access .map iframe{max-width: 100%;margin: 0 auto 23px;}
.access .address {
    font-size: 16px;
    letter-spacing: 0.05em;
    text-align: center;
}
.access .btn {
    width: min(95%, 320px);
    position: absolute;
    bottom: 0;
    right: 8.4%;
}
.access .btn a{
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2.125;
    text-align: left;
    display: block;
    padding: 0 0 20px 15px;
    position: relative;
    border-bottom: 1px solid #1A1A1A;
}
.access .btn a::after {
    position: absolute;
    content: "";
    background: url(../images/common/open-icon.svg)no-repeat;
    background-size: contain;
    width: 12px;
    height: 12px;
    top: 34%;
    right: 19px;
    transform: translateY(-50%);
}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    position: relative;
    padding-block: 140px 236px;
}
.bottom-sec h2 {
    position: absolute;
    top: 10.8%;
    left: 49.8%;
    transform: translateX(-50%);
}
.bottom-sec .photo {
    padding-bottom: 140px;
}
.bottom-sec .bnr-box {
    width: min(95%, 1560px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: calc(60 / 1920 * 100vw);
}
.bottom-sec .bnr-box02 {
    width: min(95%, 1020px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bottom-sec .bnr-box img {
    width: 100%;
    margin-bottom: 21px;
}
.bottom-sec .bnr-box .txt {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
}
.bottom-sec .bnr-frame {
    width: min(95%, 1700px);
    margin-inline: auto;
    background: #f2f2f2;
    padding-block: 78px;
    margin-block: 76px 78px;
}
.bottom-sec .bnr-frame .ttl {
    font-size: 28px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 66px;
}

}


/* ========================================
  @media screen and (min-width:768px) and (max-width:1700px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1700px) {
.mv {
    margin-top: 6.647vw;
    padding-bottom: 10.588vw;
}
.mv .ttl {
    top: 1.529vw;
}
.mv h2 img {
    width: 2.12vw;
}
.mv .photo img {
    width: 100%;
    height: auto;
}
.mv .txt {
    font-size: clamp(0.75rem, 0.441rem + 0.64vw, 1.125rem);
    margin-bottom: 2.882vw;
    margin-top: -2.882vw;
}
.mv .lead {
    font-size: clamp(1.25rem, 0.632rem + 1.29vw, 2rem);
}

}

/* ========================================
  @media screen and (min-width:768px) and (max-width:1360px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1360px) {
.greeting .inBox .photo img {
    width: 100%;
    height: auto;
}
.greeting .en-deco img {
    width: 89.71vw;
}
.greeting .profile .list li > .ttl::before,
.greeting .profile .list li > .ttl::after  {
    width: 11.99vw;
}
.greeting .profile .list .qualification > .ttl::before,
.greeting .profile .list .qualification > .ttl::after {
    width: 10.44vw;
}
}

/* ========================================
  @media screen and (min-width:768px) and (max-width:1520px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1520px) {
.suggestion .main-photo img {
    width: 100%;
    height: auto;
}
.suggestion .photo img {
    width: 100%;
    height: auto;
}
}

/* ========================================
  @media screen and (min-width:768px) and (max-width:1280px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1280px) {
/* access
-------------------------------------*/
.access {
    padding-block: 10.703vw 1.641vw;
}
.access h2 {
    font-size: 3.125vw;
    margin-bottom: 6.016vw;
}
.access .map iframe{max-width: 100%;margin: 0 auto 1.80vw;}
.access .address {
    font-size: clamp(0.75rem, 0.375rem + 0.78vw, 1rem);
}
.access .btn {
    width: 25vw;
    right: 8.4%;
}
.access .btn a{
    font-size: clamp(0.75rem, 0.375rem + 0.78vw, 1rem);
    padding: 0 0 1.563vw 1.172vw;
}
.access .btn a::after {
    width: 0.938vw;
    height: 0.938vw;
    top: 34%;
    right: 1.484vw;
    transform: translateY(-50%);
}


}

/* ========================================
  @media screen and (min-width:768px) and (max-width:1720px) 
======================================== */
@media screen and (min-width:768px) and (max-width:1720px) {
/* bottom-sec
-------------------------------------*/
.bottom-sec {
    padding-block: 8.14vw 13.721vw;
}
.bottom-sec h2 {
    position: absolute;
    top: 10.8%;
    left: 49.8%;
    transform: translateX(-50%);
}
.bottom-sec h2 img {
    width: 4.59vw;
}
.bottom-sec .photo {
    padding-bottom: 8.14vw;
}
.bottom-sec .photo img {
    width: 100%;
    height: auto;
}
.bottom-sec .bnr-box {
    width: 90.70vw;
    gap: 3.49vw;
}
.bottom-sec .bnr-box02 {
    width: 59.30vw;
}
.bottom-sec .bnr-box img {
    width: 100%;
    height: auto;
    margin-bottom: 1.221vw;
}
.bottom-sec .bnr-box .txt {
    font-size: clamp(0.75rem, 0.548rem + 0.42vw, 1rem);
}
.bottom-sec .bnr-frame {
    width: min(95%, 98.84vw);
    padding-block: 4.535vw;
    margin-block: 4.419vw 4.535vw;
}
.bottom-sec .bnr-frame .ttl {
    font-size: clamp(1.5rem, 1.298rem + 0.42vw, 1.75rem);
    margin-bottom: 3.837vw;
}
}

/* ========================================
  @media screen and (max-width: 767px)
======================================== */
@media screen and (max-width: 767px) {
/* mv
-------------------------------------*/
.mv {
    position: relative;
    padding-block: 9.8vw 17.8vw;
}
.mv .ttl {
    position: absolute;
    top: 19.5vw;
    left: 50%;
    transform: translateX(-50%);
}
.mv .txt {
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
    margin-bottom: 10.2vw;
    margin-top: -22.8vw;
}
.mv .lead {
    font-size:4.831vw;
    letter-spacing: 0.05em;
    line-height: 1.9;
    text-align: center;
}

/* greeting
-------------------------------------*/
.greeting {
    background: #F2F2F2;
}
.greeting .inner {
    padding-block: 14.49vw;
    display: grid;
}
.greeting h2 {
    font-size:6.28vw;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 7.66vw;
    order: 1;
}
.greeting .inBox {
    display: contents;
}
.greeting .inBox .txt-box {
    width: 86.96vw;
    margin-inline: auto;
    order: 2;
}
.greeting .inBox h3 {
    font-weight: 500;
    font-size:4.831vw;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
    margin-bottom: 7.56vw;
}
.greeting .inBox .txt {
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
}
.greeting .inBox .photo-box {
    width: 86.96vw;
    margin-inline: auto;
    order: 4;
    padding-block: 0 11vw;
}
.greeting .inBox .photo {
    margin-bottom: 3.62vw;
}
.greeting .inBox .name {
    font-size:4.831vw;
    letter-spacing: 0.05em;
    line-height: 1.6;
    display: flex;
    gap: 4.83vw;
    align-items: baseline;
    justify-content: center;
}
.greeting .inBox .name span {
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
}
.greeting .en-deco {
    text-align: center;
    margin-bottom: 6.11vw;
    order: 3;
    margin-top: -6.11vw;
}
.greeting .profile {
    background: #FFFFFF;
    width: 86.96vw;
    margin-inline: auto;
    padding-block: 8.66vw 11vw;
    order: 5;
}
.greeting .profile > .ttl {
    font-size:4.831vw;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
    margin-bottom: 4.8vw;
}
.greeting .profile .list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 7.86vw;
    width: 77.29vw;
    margin-inline: auto;
}
.greeting .profile .list li > .ttl {
    font-size:4.348vw;
    letter-spacing: 0.05em;
    line-height: 2.1111;
    text-align: center;
    background: #fff;
    position: relative;
    margin-bottom: 2.4vw;
}
.greeting .profile .list li > .ttl::before,
.greeting .profile .list li > .ttl::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 29.47vw;
    height: 0.5vw;
    background: #D8D8D8;
}
.greeting .profile .list li > .ttl::before {
    left: 0;
}
.greeting .profile .list li > .ttl::after {
    right: 0;
}
.greeting .profile .list .qualification > .ttl::before,
.greeting .profile .list .qualification > .ttl::after {
    width: 24.64vw;
}
.greeting .profile .list p,
.greeting .profile .list li{
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2;
}
.greeting .profile .list .detail > li {
    position: relative;
    padding-left: 3.38vw;
    line-height: 1.5714;
}
.greeting .profile .list .detail > li::before {
    position: absolute;
    content: "";
    background: #12294B;
    width: 1.45vw;
    height: 1.45vw;
    border-radius: 50%;
    left: 0vw;
    top: 2vw;
}
/* career */
.greeting .profile .list .career .detail {
    display: grid;
    gap: 3.1vw;
    padding-block: 2.9vw 0;
}
/* qualification */
.greeting .profile .list .qualification .detail {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8vw 5.15vw;
    padding-block: 1.2vw 0;
}

/* company
-------------------------------------*/
.company .inner {
    padding-block: 18.92vw;
}
.company h2 {
    font-size:6.28vw;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 0;
}
.company table {
    width: 86.96vw;
    margin-inline: auto;
}
.company th,
.company td {
    font-weight: 500;
    font-size:3.865vw;
    letter-spacing: 0.05em;
    text-align: left;
    padding: 8.66vw 0 3vw 2.1vw;
    line-height: 1.875;
}
.company th {
    font-weight: 500;
    border-bottom: 0.2vw solid #12294b;
    text-align: left;
    width: 22.7%;
    vertical-align: top;
}
.company td {
    border-bottom: 0.2vw solid #d8d8d8;
    padding-left: 7.97vw;
}

/* suggestion
-------------------------------------*/
.suggestion {
    background: #f2f2f2;
    padding-block: 11.5vw 14.49vw;
    padding-inline: 6.52vw;
}
.suggestion h2 {
    font-size:5.314vw;
    font-weight: 500;
    line-height: 1.8181;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 8.46vw;
}
.suggestion .main-photo {
    margin-bottom: 8.66vw;
}
.suggestion .txt {
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-bottom: 9.8vw;
}
.suggestion .lead {
    font-size:4.831vw;
    letter-spacing: 0.05em;
    line-height: 2.1;
    display: inline-block;
    margin-bottom: 10.56vw;
}
.suggestion .lead span {
    border-bottom: 0.2vw solid #000;
}

/* access
-------------------------------------*/
.access {
    padding-block: 14.19vw 0;
    position: relative;
}
.access h2 {
    font-size:6.28vw;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 8.66vw;
}
.access .map iframe{max-width: 100%;margin: 0 auto 5vw;height: 72.46vw;}
.access .address {
    font-size:3.382vw;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 10.7vw;
}
.access .btn {
    width: min(95%, 82.13vw);
    margin-inline: auto;
}
.access .btn a{
    font-size:3.865vw;
    letter-spacing: 0.05em;
    line-height: 2.125;
    text-align: left;
    display: block;
    padding: 0 0 4.83vw 3.62vw;
    position: relative;
    border-bottom: 0.2vw solid #1A1A1A;
}
.access .btn a::after {
    position: absolute;
    content: "";
    background: url(../images/common/open-icon.svg)no-repeat;
    background-size: contain;
    width: 2.90vw;
    height: 2.90vw;
    top: 34%;
    right: 4.59vw;
    transform: translateY(-50%);
}

/* bottom-sec
-------------------------------------*/
.bottom-sec {
    position: relative;
    padding-block: 19.32vw 23vw;
}
.bottom-sec h2 {
    position: absolute;
    top: 32vw;
    transform: translateX(-50%);
    left: 50%;
}
.bottom-sec .photo {
    padding-bottom: 14.49vw;
}

.suggestion .photo picture{
    display: block;
    margin:0 auto 2.5vw;
}

.bottom-sec .bnr-box {
    width: 82.13vw;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 6.25vw;
}
.bottom-sec .bnr-box img {
    margin-bottom: 2.62vw;
}
.bottom-sec .bnr-box .txt {
    font-size:3.382vw;
    letter-spacing: 0.05em;
    line-height: 2;
}
.bottom-sec .bnr-frame {
    background: #f2f2f2;
    padding-block: 12.08vw 11vw;
    margin-block: 13.5vw 15vw;
}
.bottom-sec .bnr-frame .ttl {
    font-size:4.831vw;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 9vw;
}



}