@charset "utf-8";
/*
 * smp.css
 *
 *  version --- 1.0
 *  updated --- 2024/10/24
 */


@media only screen and (max-width : 767px){
	
	/* !Layout
	---------------------------------------------------------- */

    html {
        font-size: calc(100vw / 39);
    }

	body {
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    }

	.is-pc {
		display: none;
	}
}

/* ==========================================================================
   WordPress最適化用の調整（競合・絶対パス対応）
   ========================================================================== */

/* 
   WordPressログイン時に表示される「管理バー（Admin Bar）」と、
   固定ヘッダー・メニューボタン・スライドナビの上部重なりを動的に解決。
   SP時（782px以下）の管理バー高さである「46px」分を安全にシフトします。
*/
@media only screen and (max-width : 767px) {
    .admin-bar #header,
    .admin-bar #header.is_fixed {
        top: 46px !important;
    }
    
    .admin-bar .btn-menu {
        top: calc(0.9rem + 46px) !important;
    }
    
    .admin-bar #g-navi {
        top: calc(6.3rem + 46px) !important;
        height: calc(100dvh - 6.3rem - 46px) !important;
    }
}

/* ==========================================================================
   既存定義の最適化
   ========================================================================== */

/*0825*/
@media only screen and (max-width : 767px){

    body {
        font-size: 1.4rem;
        line-height: 1.7;
        letter-spacing: .1rem;
    }

    #wrapper {
        width: 100%;
        /*padding-left: 1.3rem;*/
    }

    #wrapper::before {
        width: 1.3rem;
    }

    /* header */
    #header,
    #header.is_fixed {
        height: 6.3rem;
    }

    .header-inner {
        padding: 0 .5rem 0 0.7rem;
        margin-left: 1.3rem;
    }

    .header-logo {
        align-items: center;
        gap: 1.2rem;
    }

    .header-logo img {
        width: 10.5rem;
    }

    .header-logo span {
        width: 13.4rem;
        font-size: 1.4rem;
        line-height: 1.3;
        letter-spacing: .1rem;
        white-space: normal;
    }

    .header-right {
        display: flex;
        position: fixed;
        bottom: 1rem;
        left: 2rem;
        width: calc(100vw - 2.8rem);
        height: 6rem;
        gap: 0;
        z-index: 999; /* 他のコンテンツに埋もれないよう調整 */
    }

    .header-links,
    .header-contact {
        display: none;
    }

    .header-btn {
        gap: 1.5rem;
        width: 50%;
        height: 6rem;
        border-radius: .5rem 0 0 .5rem;
        font-size: 1.7rem;
        letter-spacing: .1rem;
    }

    .header-btn-contact {
        border-radius: 0 .5rem .5rem 0;
    }

    .header-btn img {
        width: 2.4rem;
        height: 2.4rem;
    }

    .btn-menu {
        display: flex;
        position: fixed;
        top: 0.9rem;
        right: 1rem;
        z-index: 9999;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 8rem;
        height: 5rem;
        background: var(--blue);
        color: var(--white);
        flex: 0 0 auto;
    }

    .btn-menu:after {
        content: 'MENU';
        font-size: 1.4rem;
        font-weight: bold;
        letter-spacing: .2rem;
        line-height: 1;
        color: var(--white);
        margin-top: .3rem;
    }

    .btn-menu .btn-menu__inner {
        width: 4.5rem;
        height: 1.7rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .btn-menu .btn-menu__line {
        width: 100%;
        height: 1px;
        background: var(--white);
        transition: all .5s ease;
    }

    .btn-menu.is-active .btn-menu__line:nth-child(1) {
        -webkit-transform: translateY(.8rem) rotate(20deg);
        transform: translateY(.8rem) rotate(20deg);
    }

    .btn-menu.is-active .btn-menu__line:nth-child(2) {
        opacity: 0;
    }

    .btn-menu.is-active .btn-menu__line:nth-child(3) {
        -webkit-transform: translateY(-.8rem) rotate(-20deg);
        transform: translateY(-.8rem) rotate(-20deg);
    }

    #g-navi {
        display: none;
        position: fixed;
        z-index: 998; /* メニューボタンの下かつ最前面に配置 */
        top: 6.3rem;
        right: 0;
        width: 100%;
        height: calc(100dvh - 6.3rem);
        padding: 4rem 4.7rem;
        
        background: var(--blue);
        color: var(--white);
        overflow-y: auto; /* コンテンツ過多でもスクロール可能に */
    }

    #g-navi .g-navi__menu {
        display: block;
    }
    #g-navi .footer-links{
        padding-bottom: 2rem;
        border: 0;
    }
    .footer-links a{
        max-width: 100%;
    }

    /* common parts */
    .section-en {
        font-size: 1.4rem;
        line-height: 1.4;
        letter-spacing: .25rem;
    }

    .section-heading h2 {
        gap: 1rem;
        font-size: 3.4rem;
        line-height: 1.35;
        letter-spacing: .1rem;
    }

    .section-heading.has-heading-mark .section-en {
        padding-left: 0;
    }

    .heading-mark {
        width: 3.5rem;
        height: 4rem;
    }

    .outline-link {
        gap: 2rem;
        width: 70%;
        padding: 1.5rem 2rem;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        line-height: 1.5;
        letter-spacing: .1rem;
    }

    .outline-link::before {
        width: .5rem;
    }

    .outline-link img,
    .dark-link img {
        width: 2.4rem;
        height: 2.4rem;
    }

    /* main visual */
    #main-visual,
    .mv-slide {
        height: 70rem;
    }

    .mv-bg img {
        object-position: center;
    }

    .mv-person {
        top: 20rem;
        right: -24.9rem;
        width: 88rem;
        height: 50rem;
    }

    .mv-en {
        top: 36.3rem;
        left: 2.4rem;
        font-size: 1.4rem;
        letter-spacing: .2rem;
    }

    .mv-copy-line {
        top: 38.8rem;
    }

    .mv-copy h1 {
        z-index: 4;
        top: 11.4rem;
        left: 2.8rem;
        width: 34rem;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        line-height: 1.4;
        letter-spacing: 1px;
        text-align: left;
    }

    .mv-copy-sub,
    .mv-copy-main {
        z-index: 4;
        left: 2.8rem;
        width: 35rem;
        color: var(--white);
        letter-spacing: .15rem;
        white-space: normal;
    }

    .mv-copy-sub {
        top: 15.3rem;
        font-size: 3.4rem;
        line-height: 1.35;
    }

    .mv-copy-main {
        top: 14.2rem;
        width: 35rem;
        font-size: 3.4rem;
        line-height: 1.28;
    }

    .mv-copy-main::before {
        font-size: 4.3rem;
        line-height: 1.28;
        white-space: pre;
        content: "\A";
    }

    /* vision */
    .vision-block {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 1.5rem;
        padding: 6rem 3.2rem 0 3.3rem;
        background: var(--white);
    }

    .vision-main {
        display: block;
        flex: none;
    }

    .vision-deco {
        display: none;
    }

    .vision-text {
        padding-top: 0;
    }

    .vision-text .section-heading,
    .vision-mark {
        margin-left: 0;
    }

    .vision-text h2 {
        display: block;
        margin: 1.6rem 0 2.2rem;
        font-size: 3.4rem;
        line-height: 1.4;
        letter-spacing: .05rem;
    }

    .vision-text h2::before {
        bottom: .4rem;
        width: 32.5rem;
        height: 1.2rem;
    }

    .vision-text .section-en {
        font-size: 1.4rem;
    }

    .vision-mark {
        width: 4.8rem;
        height: 4.5rem;
        margin: 0 auto 2.2rem;
    }

    .vision-text > p:not(.section-en) {
        max-width: none;
        margin-bottom: 1.2rem;
        padding: 0;
        font-size: 1.5rem;
        line-height: 1.85;
        letter-spacing: .12rem;
    }

    .vision-photo {
        width: 31rem;
        height: 31rem;
        margin: .5rem auto 0;
        border-radius: .5rem;
        flex: none;
    }

    .vision-photo::after {
        right: -.8rem;
        bottom: -2.5rem;
        width: 16rem;
        height: 19.5rem;
    }

    .vision-photo-label {
        top: 1.2rem;
        left: 1.2rem;
        font-size: 1.4rem;
    }

    .vision-photo-label::before {
        width: .7rem;
        height: .7rem;
    }

    /* reason */
    .reason-block {
        padding: 8.5rem 0 0;
    }

    .reason-head {
        display: block;
        padding: 0 3.3rem;
    }

    .reason-heading h2 {
        align-items: center;
        margin-top: 1.2rem;
        font-size: 2.4rem!important;
        line-height: 1.35;
    }

    .reason-heading .heading-mark {
        width: 3.2rem;
        height: 4rem;
    }

    .reason-more {
        display: none;
    }

    .reason-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 4.2rem 0 0;
        padding: 0 3.2rem;
    }

    .reason-list::after {
        content: none;
        top: 13rem;
        bottom: 0;
        height: auto;
        background: #f3f5fb;
        clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
    }
    .reason-item{
        position: relative;
        z-index: 2;
    }
    .reason-item::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: -3.2rem;
        width: calc(100% + 6.4rem);
        height: 62rem;
        background: #F3F5FB;
        bottom: 0;
        background: #f3f5fb;
        clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%);
    }

    .reason-item,
    .reason-item-middle,
    .reason-item-last {
        margin-top: 0;
        padding-bottom: 8rem;
        background: transparent;
    }

    .reason-item-last {
        padding-bottom: 10rem;
    }

    .reason-photo {
        width: 27.4rem;
        height: 32.2rem;
        margin: 0 auto;
    }

    .reason-item__cont {
        display: block;
        padding: 0;
    }

    .reason-item h3,
    .reason-item-last.reason-item h3 {
        min-width: 0;
        margin: 2.4rem auto 1.6rem;
        font-size: 2.4rem;
        line-height: 1.4;
        letter-spacing: .05rem;
    }

    .reason-item p {
        max-width: none;
        margin: 0;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        line-height: 1.3;
        letter-spacing: .05rem;
    }

    .dark-link,
    .reason-item-last .dark-link {
        width: 26.7rem;
        max-width: none;
        margin: 2.2rem auto 0;
        padding: 1.4rem 2rem;
        gap: 1.5rem;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        letter-spacing: .1rem;
    }
    .reason-item .dark-link{
        width: 100%;
        max-width: 32.7rem;
    }

    .reason-sky {
        height: 37.3rem;
        margin: -5rem 0 -14rem;
        background-position: center top;
        clip-path: polygon(0 0, 100% 7%, 100% 93%, 0 100%);
    }

    /* service */
    .service-block {
        display: flex;
        flex-direction: column;
        padding: 18rem 3.2rem 7.5rem;
        background-position: left top 15rem;
        background-size: 35rem auto;
    }

    .service-heading {
        display: contents;
    }

    .service-heading .section-heading {
        order: 1;
        margin: 0 0 3.5rem 3.6rem;
    }

    .service-heading .section-heading h2 {
        margin-top: .6rem;
        font-size: 3.4rem;
    }

    .service-heading .outline-link {
        order: 3;
        width: auto;
        margin: 4rem 0 0;
        height: 6.7rem;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    }

    .service-list {
        display: flex;
        z-index: 1;
        order: 2;
        align-items: stretch;
        flex-direction: column;
        gap: 4.2rem;
        width: auto;
    }

    .service-item,
    .service-item:nth-child(1),
    .service-item:nth-child(2),
    .service-item:nth-child(3),
    .service-item:nth-child(4) {
        width: auto;
        margin-top: 0;
    }

    .service-photo {
        width: auto;
        height: 16rem;
        border-radius: .5rem;
    }

    .service-title {
        gap: 2.5rem;
        padding: 1.2rem 0 .8rem;
    }

    .service-title span {
        padding-top: 1rem;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    }

    .service-title h3 {
        font-size: 2.6rem;
        line-height: 1.5;
        letter-spacing: .15rem;
    }

    .service-item > p {
        padding: 1rem 0 0;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        line-height: 1.5;
        letter-spacing: .07rem;
    }

    /* case */
    .case-block {
        display: block;
        padding: 5rem 0;
    }

    .case-copy {
        width: auto;
        margin: 0 1.2rem -4.4rem 2.5rem;
        padding: 0 2.4rem 3.2rem;
        flex: none;
    }

    .case-copy .section-heading {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .case-copy .section-heading h2 {
        font-size: 3.4rem;
    }

    .case-copy .heading-mark {
        width: 3.2rem;
        height: 4rem;
    }

    .case-copy h3 {
        margin: 2rem 0;
        font-size: 2.2rem;
        line-height: 1.5;
        letter-spacing: .08rem;
    }

    .case-copy > p {
        width: auto;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        line-height: 1.8;
        letter-spacing: .03rem;
    }

    .case-copy .outline-link {
        width: auto;
        height: 6.7rem;
        margin: 2rem auto 0;
        background: var(--white);
    }

    .case-photos {
        width: 100%;
        height: 24.4rem;
    }

    .about_slider ul li {
        width: 13.6rem;
        height: 24.4rem;
        margin-right: 1.5rem;
        border-radius: .5rem;
    }

    /* company */
    .company-block {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 18.4rem;
        padding: 18.2rem 3.3rem 9.5rem;
        background-position: left top -1.3rem;
        background-size:  44.4rem auto;
    }
    .company-block:before{
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        z-index: -1;
        width: 1px;
        height: 100%;
        background: #B8C6E1;
        opacity: .4;
    }

    .company-card {
        width: 32.5rem;
    }

    .company-card::before {
        content: none;
    }

    .company-card::after {
        left: -.8rem;
        bottom: -.8rem;
        width: 10rem;
        height: 10rem;
    }

    .company-card-office {
        margin-top: 0;
    }

    .company-card-office::after {
        right: -.8rem;
        left: auto;
    }

    .company-image {
        height: 29.5rem;
        border-radius: .5rem;
    }

    .company-card-text {
        top: -11.3rem;
        left: 3.2rem;
        width: 29.3rem;
        padding: 2rem 1.6rem;
        border-radius: 1rem;
    }
    .company-card-office .company-card-text {
        left: 0;
    }

    .company-card-text > p {
        top: 0;
        left: auto;
        right: 0;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        letter-spacing: .25rem;
    }
    .company-card-office .company-card-text > p {
        right: auto;
        left: 2rem;
    }

    .company-card-text h2 {
        padding: 0 0 2rem;
        font-size: 3rem;
    }

    .company-card-text a {
        gap: 1rem;
        padding-top: 1rem;
        font-size: 1.5rem;
        letter-spacing: .1rem;
    }

    .company-card-text a img {
        width: 2.4rem;
        height: 2.4rem;
    }

    /* recruit */
    .recruit-block {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        padding: 3rem 2.4rem 5rem 3.3rem;
        background: url("../img/home/bg_recruit01.png") left -8rem bottom 18rem / 34rem auto no-repeat,
                    url("../img/home/bg_recruit04.png") right -13rem top 25rem / 40rem auto no-repeat,
                    #f4fbff;
    }

    .recruit-copy {
        display: contents;
    }

    .recruit-heading {
        display: grid;
        grid-template-columns: 1fr auto;
        order: 1;
    }

    .recruit-heading h2 {
        grid-column: 1 / -1;
        text-align: center;
    }

    .recruit-heading-line {
        margin: 0 1rem 0 .5rem;
    }

    .recruit-copy h2 {
        margin: 0 auto;
        font-size: 4.4rem;
        line-height: 1.3;
        letter-spacing: .2rem;
    }

    .recruit-copy .section-en {
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
    }

    .recruit-copy h3 {
        order: 2;
        margin: 2.5rem 0 1.2rem;
        font-size: 2.6rem;
        line-height: 1.5;
        font-weight: 700;
        letter-spacing: .05rem;
    }

    .recruit-copy > p {
        order: 3;
        width: auto;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        line-height: 1.8;
        letter-spacing: .03rem;
    }

    .recruit-visual {
        display: block;
        order: 4;
        width: 100%;
        height: 49rem;
        margin-top: 2rem;
        flex: none;
    }

    .recruit-deco {
        display: none;
        width: 45rem;
        height: 48rem;
        margin: 0 0 0 -8rem;
    }

    .recruit-photo {
        position: absolute;
    }

    .recruit-photo-large {
        top: 0;
        left: 4.2rem;
        width: 24rem;
        height: 29.7rem;
    }

    .recruit-photo-small {
        top: 34rem;
        right: 0;
        left: auto;
        width: 10.8rem;
        height: 13.6rem;
    }

    .recruit-photo-sub {
        top: 32.5rem;
        right: auto;
        left: 0;
        width: 19.5rem;
        height: 10.9rem;
        margin: 0;
    }

    .recruit-front01 {
        top: 48rem;
        left: 2.6rem;
        width: 8.5rem;
        height: 4.5rem;
    }

    .recruit-front02 {
        top: 38rem;
        right: 4.5rem;
        left: auto;
        width: 8rem;
        height: 4.5rem;
    }

    .recruit-front03 {
        display: none;
        top: 49rem;
        right: 1.5rem;
        left: auto;
        width: 5rem;
        height: 3rem;
    }

    .recruit-front04 {
        top: 58rem;
        left: 20rem;
        width: 17rem;
        height: 10rem;
    }

    .recruit-copy .outline-link {
        position: relative;
        z-index: 5;
        order: 5;
        align-self: center;
        width: auto;
        margin: -2.3rem 0 0;
    }

    /* social */
    .social-block {
        display: flex;
        height: auto;
        flex-direction: column;
    }

    .social-column {
        padding: 5rem 2.5rem 6rem 3.3rem;
    }

    .social-column-tiktok {
        border-top: 1px solid var(--blue);
        border-left: 0;
    }

    .social-heading {
        display: flex;
        align-items: flex-end;
        gap: .8rem;
        margin-bottom: 3rem;
    }

    .social-heading > img {
        width: 2.8rem;
    }
    .social-column-tiktok .social-heading > img {
        width: 4.2rem;
    }

    .social-heading h2 {
        padding-bottom: .4rem;
        font-size: 1.5rem;
        line-height: 1.5;
        letter-spacing: .15rem;
    }

    .social-account {
        width: 18.5rem;
        margin-left: auto;
    }

    .social-account p {
        font-size: 1.2rem;
        line-height: 1.5;
        letter-spacing: .1rem;
    }

    .social-account a {
        width: 18.5rem;
        height: 3.6rem;
        margin-top: .4rem;
        font-size: 1.4rem;
        letter-spacing: .1rem;
    }

    .social-account a span {
        border-right-width: .4rem;
    }

    .social-account a img {
        width: 3.6rem;
        height: 3.6rem;
        padding: .9rem;
    }

    .instagram-mock {
        width: 32.4rem;
        height: auto;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem;
    }

    .instagram-mock span {
        height: 15.4rem;
    }

    .instagram-mock span:nth-child(n+9) {
        display: none;
    }

    .tiktok-mock {
        width: 32.5rem;
        margin: 0 auto;
    }

    /* footer */
    #footer {
        display: flex;
        height: auto;
        margin-left: 0;
        padding-left: 0;
        flex-direction: column;
    }

    #footer::before {
        content: none;
    }

    .footer-inner {
        display: flex;
        order: 1;
        padding: 4rem 3.4rem 6.5rem;
        flex-direction: column;
    }

    .footer-nav {
        order: 1;
        margin-left: 3.8rem;
    }

    .footer-nav .is-current {
        padding: .1rem .7rem;
    }

    .footer-nav-list {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 3rem;
        margin-top: 2.5rem;
    }

    .footer-nav-group {
        gap: .4rem;
    }

    .footer-nav a {
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        line-height: 1.3;
        letter-spacing: .1rem;
    }

    .footer-nav .footer-nav-sub {
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        margin-top: 1rem;
    }

    .footer-links {
        display: grid;
        position: static;
        order: 2;
        gap: 2rem;
        margin: 3.5rem -3.4rem 0;
        padding: 0 3.4rem 5rem;
        border-bottom: 1px solid rgba(255, 255, 255, .5);
    }

    .footer-links a {
        width: 100%;
        height: 6.5rem;
        font-size: 2.2rem;
    }

    .footer-banner {
        position: static;
        order: 3;
        width: 32rem;
        margin-top: 5rem;
    }

    .footer-address {
        position: static;
        order: 4;
        margin: 3rem .3rem 0;
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        line-height: 1.5;
        letter-spacing: .12rem;
    }

    .footer-address p:nth-child(2) {
        margin: .7rem 0 1rem;
        font-size: 2rem;
        line-height: 1.35;
    }

    .footer-address p:nth-child(3) {
        font-size: 0;
    }

    .footer-address p:nth-child(3)::before {
        font-size: clamp(16px, 15.6px + 0.125vw, 18px);
        line-height: 1.5;
        white-space: pre;
        content: "TEL 052-269-3966\A FAX 052-269-3967";
    }

    .footer-social {
        position: static;
        order: 5;
        align-self: center;
        gap: 1rem;
        margin-top: 2.5rem;
    }

    .footer-social a {
        width: 4.1rem;
        height: 4.1rem;
    }

    .footer-brand {
        position: relative;
        order: 2;
        width: 100%;
        height: auto;
        padding: 4.3rem 0 15rem;
        margin-left: 1.3rem;
    }

    .footer-brand img {
        width: 26.8rem;
    }

    .footer-brand p {
        margin-top: 1.2rem;
        font-size: 2rem;
        letter-spacing: .1rem;
    }

    #copyright {
        bottom: 7.5rem;
        font-size: 1.2rem;
        letter-spacing: 1px;
    }

    .page-top {
        right: .5rem;
        bottom: 7.5rem;
        font-size: 1.1rem;
    }

    .page-top img {
        width: 2rem;
        height: 2rem;
    }
    
    h3.ttl404{
	    font-size: 2rem;
    }
    
    .news-head{
	    padding-left: 0px;
	    padding-right: 0px;
    }
    
    .pageTurn a{
		width: 100%;
	}
	
	.news-body{
		padding: 3rem;
	}
	
	.news-body p{
		font-size: 1.6rem;
	}
	
	.news-cate__item{
		
	}
	.news-head .news-date{
		font-size: 1.2rem;
	}
	
	.news-head .news-title{
		font-size: 2.2rem;
	}
	
	.news-list .dt {
        margin-bottom: 0.5rem;
    }
    
    .news-list .cate,
    .news-list .date{
        font-size: 1.2rem;
    }
    
        .news-list li {
        display: block;
        padding: 1.6rem 0;
    }
    
    ul.news-list{
	    padding-left: 0px;
    }

}