@charset "UTF-8";

/*////////////////////////////////////////////////////////////////////////

	PROJECT

		- 固有スタイル

--------------------------------------------------------------------------

	MEDIA QUERY

		- 設定なし：390×844最適化（375×667・375×812・390×844・414×819／SP）
		- 600px以上：768×1024最適化（600×960・768×1024・810×1080／TAB縦）
		- 1024px以上：1366×768最適化（1024×768・1280×720・1366×768・1440×900・1536×864／TAB横・MB）
		- 1600px以上：1920×1080最適化（1600×900・1920×1080・2560×1440／DT）

////////////////////////////////////////////////////////////////////////*/


/*========================================================================


	TOP


========================================================================*/

/*------------------------------------------------------------------------
	key visual
------------------------------------------------------------------------*/

/* background
------------------------------------------------------------------------*/
#kv { position: relative; height: 100svh;
    .bg { position: absolute; top: 15%; left: -53vw; width: 200vw; height: 216vw/*縦横比100:108*/;
        .circleRT, .circleLB, .circleRB, .tri { mix-blend-mode: multiply; position: absolute; z-index: -1; height: auto;  }
        .circleRT { /*top: -28%; right: -23%; width: 67%;*/ }
        .circleLB { /*bottom: 0; left: -41%; width: 91%;*/ }
        .circleRB { /*right: -10%; bottom: 23%; width: 41%;*/ }
        .tri { /*top: 14%; left: 4%; width: 71%;*/ }
    }
}

.circleRT._fadeKv { visibility: hidden; opacity: 0; filter: blur(10vw); top: -99%; right: -93%; width: 134%; transition: 1500ms ease-in-out;
    .img { animation: updown1 4500ms ease-in-out infinite alternate-reverse; }
}
.circleRT._fadeKv._fadeIn { visibility: visible; opacity: 1; filter: blur(0); top: -29%; right: -23%; width: 67%; }

.circleLB._fadeKv { visibility: hidden; opacity: 0; filter: blur(10vw); bottom: -90%; left: -131%; width: 182%; transition: 1500ms ease-in-out;
    .img { animation: updown1 4500ms ease-in-out infinite alternate-reverse; }
}
.circleLB._fadeKv._fadeIn { visibility: visible; opacity: 1; filter: blur(0); bottom: 0; left: -41%; width: 91%; }

.circleRB._fadeKv { visibility: hidden; opacity: 0; filter: blur(10vw); right: -80%; bottom: -51%; width: 82%; transition: 1500ms ease-in-out;
    .img { animation: updown2 4500ms ease-in-out infinite alternate-reverse; }
}
.circleRB._fadeKv._fadeIn { visibility: visible; opacity: 1; filter: blur(0); right: -10%; bottom: 21%; width: 41%; }

.tri._fadeKv { visibility: hidden; opacity: 0; filter: blur(10vw); top: 16%; left: 15%; width: 142%; transform: rotateX(200deg); transition: 1600ms cubic-bezier(.48,.5,.24,1.18);
    .img { animation: updown2 4500ms ease-in-out infinite alternate-reverse; }
}
.tri._fadeKv._fadeIn { visibility: visible; opacity: 1; filter: blur(0); top: 16%; left: 5%; width: 71%; transform: rotateX(360deg);
}

@keyframes updown1 { 0%, 100% { transform: translate(0); } 50% { transform: translateY(1.5%); } }
@keyframes updown2 { 0%, 100% { transform: translate(0); } 50% { transform: translateY(-2%); } }

@media screen and (min-width: 600px) { /* 768×1024最適化 */
    #kv .bg { top: 10%; left: -25vw; width: 150vw; height: 162vw; }
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
    #kv .bg { top: 0; left: 0; width: 100vw; height: 108vw; }
    @keyframes updown1 { 0%, 100% { transform: translate(0); } 50% { transform: translateY(0.75%); } }
    @keyframes updown2 { 0%, 100% { transform: translate(0); } 50% { transform: translateY(-1.25%); } }
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
}

/* text block
------------------------------------------------------------------------*/
#kv .textBlock { position: absolute; top: 50%; right: 8vw; transform: translateY(-50%);
    .title { margin-right: -1.5vw; font-size: 4rem; letter-spacing: 0.075em; text-align: right; }
    .service { display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; margin-left: 35%;
        .list { position: relative; }
        .list:nth-child(1), .list:nth-child(3) { padding-right: 1.8em;
            &::after { content: ""; width: 1px; height: 14px; display: block; position: absolute; top: 50%; right: 0.9em; background: repeat-y url("../img/common/border_dot_v.png") left top/1px auto; transform: translateY(-50%); }
        }
    }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#kv .textBlock { top: 48%; right: 6vw; 
    .title { margin-right: -1vw; font-size: 6.2rem; }
    .service { font-size: 1.7rem; }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#kv .textBlock { top: 50%; right: 5vw; 
    .title { margin-right: -0.75vw; font-size: 7rem; line-height: 1.9; }
    .service { margin-left: 0; font-size: 1.7rem; line-height: 1.9;
        .list:not(:last-child) { padding-right: 1.8em;
            &::after { width: 1px; height: 14px; display: block; position: absolute; top: calc(50% + 0.1em); right: 0.9em; background: repeat-y url("../img/common/border_dot_v.png") left top/1px auto; transform: translateY(-50%); content: ""; }
        }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#kv .textBlock { right: 4vw; 
    .title { margin-right: -0.6vw; font-size: 8.8rem; }
    .service { font-size: 2rem;
        .list:not(:last-child) { padding-right: 1.8em;
            &::after { width: 1px; height: 14px; display: block; position: absolute; top: calc(50% + 0.1em); right: 0.9em; background: repeat-y url("../img/common/border_dot_v.png") left top/1px auto; transform: translateY(-50%); content: ""; }
        }
    }
}
}

/* scroll
------------------------------------------------------------------------*/
#kv .scroll { position: fixed; left: 4vw; bottom: 4vw; font-size: 1.3rem; line-height: 1.5; text-align: center;
    .text { position: relative; padding-bottom: 1em; writing-mode: vertical-rl;
        &:after { content: ""; width: 14px; height: 1px; display: block; position: absolute; left: 50%; bottom: 0; background: repeat-x url("../img/common/border_dot_h.png") top left/4px auto; transform: translateX(-50%); }
    }
    .arrowWrap { display: block; overflow: hidden; position: relative; height: 3em;
        .arrow1, .arrow2 { display: flex; align-items: center; position: absolute; left: 0; height: 3em; padding-left: 0.2em; }
        .arrow1::after, .arrow2::after { content: "↓"; }
        .arrow1 { top: -3em; animation: arrowDown1 4000ms ease infinite normal forwards running; }
        .arrow2 { top: 0; animation: arrowDown2 4000ms ease infinite normal forwards running; }
    }
}
#kv .scroll._kvScroll {  }
#kv .scroll._kvScroll._scrollOut { visibility: hidden; opacity: 0; filter: blur(10vw); }
@keyframes arrowDown1 { 0% { top: -2em; opacity: 0; } 25% { top: 0; opacity: 1; } 50% { top: 0; opacity: 1; } 75% { top: 2em; opacity: 0; } 100% { top: 2.5em; opacity: 0; } }
@keyframes arrowDown2 { 0% { top: 0; opacity: 1; } 25% { top: 2em; opacity: 0; } 50% { top: -2em; opacity: 0; } 75% { top: 0; opacity: 1; } 100% { top: 0; opacity: 1; } }

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#kv .scroll { left: 3vw; bottom: 3vw; font-size: 1.5rem; }
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#kv .scroll { left: 2.5vw; bottom: 2.5vw;}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#kv .scroll { left: 2vw; bottom: 2vw; font-size: 1.6rem; }
}

/*------------------------------------------------------------------------
	top company
------------------------------------------------------------------------*/

#topCompany {
    .topCompanyText { padding-top: 25vw; 
        .title { margin-bottom: 2em; font-size: 1.9rem; letter-spacing: 0.06em;
            & sub { bottom: -0.4em; font-size: 80%; }
        }
        .textBlock { display: flex; flex-direction: column; row-gap: 1.5em;
            .text { font-size: 1.5rem; letter-spacing: 0.06em; }
        }
    }
}
#topCompany .linkBtnBlock .linkBtn .text { width: 12.5em; }

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#topCompany { padding-left: 20%;
    .topCompanyText {
        .title { font-size: 2.4rem; letter-spacing: 0.1em; }
        .textBlock {
            .text { font-size: 1.7rem; letter-spacing: 0.05em; }
        }
    }
}
#topCompany .linkBtnBlock { flex-direction: row;
    .linkBtn .text { width: auto; }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#topCompany { padding-left: 25%;
    .topCompanyText { padding-top: 30vw; 
        .title { margin-bottom: 2.5em; font-size: 3.2rem; }
        .textBlock { row-gap: 2em;
            .text { font-size: 1.9rem; letter-spacing: 0.1em; }
        }
    }
}
/*#topCompany .linkBtnBlock .linkBtn .text { width: 12.5em; }*/
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#topCompany {
    .topCompanyText {
        .title { margin-bottom: 2.5em; font-size: 3.9rem; letter-spacing: 0.12em; }
        .textBlock {
            .text { font-size: 2.1rem; }
        }
    }
}
/*#topCompany .linkBtnBlock .linkBtn .text { width: 13em; }*/
}

/*------------------------------------------------------------------------
	top service
------------------------------------------------------------------------*/

#topService {
    .cotentHeader { margin-bottom: calc(16vw + 12vw); }
    .serviceList { display: flex; flex-direction: column; align-items: center; row-gap: 12vw; position: relative; margin: 0 -8vw 12vw; padding: 12vw 0; background-color: #fff;
        &::before { position: absolute; top: -14vw; left: -75vw; z-index: -1; width: 250vw; height: 250vw; background-color: #fff; border-radius: 50%; content: ""; }
        &::after { position: absolute; bottom: -14vw; left: -75vw; z-index: -1; width: 250vw; height: 250vw; background-color: #fff; border-radius: 50%; content: ""; }
        .serviceBlock { width: 62vw;
            &:nth-child(1) .serviceHeader { background-image: url("../img/top/top_circle_blue.png"); }
            &:nth-child(2) .serviceHeader { background-image: url("../img/top/top_circle_pink.png"); }
            &:nth-child(3) .serviceHeader { background-image: url("../img/top/top_circle_yellow.png"); }
            &:nth-child(4) .serviceHeader { background-image: url("../img/top/top_circle_aqua.png"); }
            .serviceHeader { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 62vw; margin-bottom: 8vw; background-repeat: no-repeat; background-size: 100% auto; color: #fff;
                .title { font-size: 2.4rem; }
                .serviceListJp { text-align: center;
                    .list { line-height: 1.8; }
                }
            }
            .text { margin-bottom: 0.75em; font-size: 1.5rem; text-align: center; }
            .skillList { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1em; list-style: disc;
                .list { margin-left: 1em; font-size: 1.3rem; text-indent: -0.25em; white-space: nowrap; }
            }
        }
    }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#topService {
    .cotentHeader { margin-bottom: calc(9vw + 10vw); }
    .serviceList { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; row-gap: 8vw; margin: 0 -6vw 10vw; padding: 4vw 12vw;
        &::before { top: -12vw; left: -25vw; width: 150vw; height: 75vw; border-radius: 50% 50% 0 0; }
        &::after { bottom: -12vw; left: -25vw; width: 150vw; height: 75vw; border-radius: 0 0 50% 50%; }
        .serviceBlock { width: 34vw;
            .serviceHeader { height: 34vw; margin-bottom: 4vw;
                .title { font-size: 2.6rem; }
                .serviceListJp .list { line-height: font-size: 1.5rem; }
            }
        }
    }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#topService {
    .cotentHeader { margin-bottom: 6vw; }
    .serviceList { row-gap: 3vw; margin: 0 0 12vw; padding: 0; background-color: transparent;
        &::before { top: 50%; left: 50%; width: 62vw; height: 62vw; border-radius: 50%; transform: translate(-50%, -50%); }
        &::after { content: none; }
        .serviceBlock { display: flex; align-items: center; width: calc((100% - 3vw) / 2);
            &:nth-child(2n-1) { flex-direction: row-reverse; }
            .serviceHeader { width: 18vw; height: 18vw; margin: 0; }
            .textBlock { width: calc(100% - 18vw);
            }
        }
        .serviceBlock:nth-child(2n-1) {
            .textBlock { padding: 0 7.5% 0 10%;
                .text { text-align: right; }
                .skillList { justify-content: flex-end; }
            }
        }
        .serviceBlock:nth-child(2n) {
            .textBlock { padding: 0  10% 0 7.5%;
                .text { text-align: left; }
                .skillList { justify-content: flex-start; }
            }
        }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#topService {
    .cotentHeader { margin-bottom: 7vw; }
    .serviceList { 
        &::before { width: 60vw; height: 60vw; }
        .serviceBlock {
            .serviceHeader { width: 16vw; height: 16vw;
                .title { margin-bottom: 0.125em; font-size: 3.3rem; }
                .serviceListJp .list { font-size: 1.7rem; }
            }
            .textBlock { width: calc(100% - 16vw);
                .text { font-size: 1.7rem; }
                .skillList {
                    .list { font-size: 1.5rem; }
                }
            }            
        }
        .serviceBlock:nth-child(2n-1) {
            .textBlock { padding: 0 10% 0 20%; }
        }
        .serviceBlock:nth-child(2n) {
            .textBlock { padding: 0  20% 0 10%; }
        }
    }
}
}

/*------------------------------------------------------------------------
	top works
------------------------------------------------------------------------*/

#topWorks {
    .worksList .article:nth-child(n+6) { display: none; }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#topWorks {
    .worksList .article:nth-child(-n+6) { display: block; }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#topWorks {
    .linkBtnBlock { align-items: flex-end; }
    .worksList .article:nth-child(-n+9) { display: block; }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#topWorks {
    .worksList .article:nth-child(-n+12) { display: block; }
}
}

/*------------------------------------------------------------------------
	top news
------------------------------------------------------------------------*/

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#topNews {
    .cotentHeader { float: left; }
    .linkBtnBlock { align-items: flex-end; }
}
}


/*========================================================================


	SERVICE


========================================================================*/

/*------------------------------------------------------------------------
	service list
------------------------------------------------------------------------*/

#serviceList { display: grid; row-gap: 6vw;
    .serviceBlock { display: grid; row-gap: 8vw; padding: 8vw; background-color: #fff;
        .serviceHeader { position: relative;
            .textBlock {
                .num { margin-bottom: 2em; width: 2.75em; background-color: #000; border-radius: 50%; font-size: 1rem; color: #fff; text-align: center; line-height: 2.75em; }
                .titleEn { font-size: 3.1rem; line-height: 1.8; }
                .titleJp { display: flex; flex-direction: row; flex-wrap: wrap; line-height: 1.8;
                    .list { position: relative; padding-right: 2em;
                        &:not(:last-child)::after { content: ""; width: 1px; height: 14px; display: block; position: absolute; top: 50%; right: 1em; background: repeat-y url("../img/common/border_dot_v.png") left top/1px auto; transform: translateY(-50%); }
                    }
                }
            }
            .imgBlock { position: absolute; top: 0; right: 0; width: 14vw; }
        }
        .serviceContent { 
            .description { margin-bottom: 1.5em; text-align: justify; }
            .sampleList { margin-bottom: 1.5em; padding-left: 1.25em; text-indent: -0.2em; list-style: disc;
                .list { line-height: 1.8;
                    &:not(:last-child) { margin-bottom: 0.25em; }
                }  
            }
        }        
        .relatedBlock { border-top: 1px solid #000;
            .relatedTitle { margin-bottom: 1em; padding-top: 1em; font-size: 1.5rem; }
            .relatedList { display: grid; row-gap: 2vw;
                .list { 
                    .linkBtn { display: flex; align-items: center; height: 7rem; padding-left: 1.25em; background-color: #E5E5E5; line-height: 1.7;
                        .text { display: block; position: relative; padding-right: 4.5em; width: calc(100% - 3em);
                            &::after { content: ""; width: 1px; height: 14px; display: block; position: absolute; top: 50%; right: 0; background: repeat-y url("../img/common/border_dot_v.png") left top/1px auto; transform: translateY(-50%); }
                        }
                        .arrowWrap { display: flex; align-items: center; overflow: hidden; position: relative; width: 3em; height: 1.25em;
                            .arrow1, .arrow2 { display: flex; justify-content: center; position: absolute; width: 3em; transform: rotate(-45deg); }
                            .arrow1::after, .arrow2::after { content: "→"; }
                            .arrow1 { top: -0.25em; }
                            .arrow2 { top: 1.5em; }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#serviceList { grid-template-columns: repeat(2, 1fr); column-gap: 3vw; row-gap: 3vw;
    .serviceBlock { row-gap: 4vw; grid-template-rows: subgrid; grid-row: span 3; padding: 4vw;
        .serviceHeader {
            .imgBlock { width: 8vw; }
        }
        .serviceContent {
            .linkBtnBlockS { }
        }
        .relatedBlock {
            .relatedList {
                .list { 
                    .linkBtn { 
                        .text { padding-right: 5em; }
                    }
                }
            }
        }
    }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#serviceList { column-gap: 2.5vw; row-gap: 2.5vw;
    .serviceBlock { row-gap: 3vw; padding: 3vw;
        .serviceHeader {  display: flex; justify-content: space-between;
            .textBlock {
                .num { margin-bottom: 1em;  }
                .titleEn { font-size: 4rem; line-height: 1.7; }
                .titleJp { font-size: 1.5rem; }
            }
            .imgBlock { position: static; width: 7vw; }
        }
        .serviceContent { display: grid; grid-template-columns: 52% 38%; justify-content: space-between; row-gap: 2.5vw;
            .description { margin-bottom: 0; }
            .sampleList { grid-column: 2 / 3; grid-row: 1 / 3; margin-bottom: 0; }
            .linkBtnBlockS { align-items: flex-end; }
        }
        .relatedBlock {
            .relatedTitle { margin-bottom: 1.25em; padding-top: 1.25em; }
            .relatedList { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1vw; row-gap: 1vw;
                .list {
                    .linkBtn { height: 8.5rem; font-size: 1.5rem;
                        &:hover {
                            .arrowWrap {
                                .arrow1, .arrow2 { transition: 500ms ease; }
                                .arrow1 { top: -1.5em; }
                                .arrow2 { top: -0.25em; }
                            }
                        }
                        .text { padding-right: 3em; }
                    }
                
                }
            }
        }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#serviceList { grid-template-columns: repeat(3, 1fr); column-gap: 2vw; row-gap: 2vw;
    .serviceBlock { row-gap: 2.5vw; padding: 2.5vw;
        .serviceHeader {
            .textBlock {
                .num { font-size: 1.2rem; }
                .titleEn { font-size: 4.4rem; }
                .titleJp { font-size: 1.6rem; }
            }
            .imgBlock { width: 6vw; }
        }
        .relatedBlock {
            .relatedTitle { font-size: 1.6rem;  }
            .relatedList { column-gap: 0.5vw; row-gap: 0.5vw;
                .list {
                    .linkBtn {
                        &:hover {
                            .arrowWrap { 
                                .arrow1 { top: -1.5em; }
                                .arrow2 { top: -0.25em; }
                            }
                        }
                        .text { padding-right: 1.5em; }
                    }
                
                }
            }
        }
    }
}
}


/*------------------------------------------------------------------------
	flow
------------------------------------------------------------------------*/

#flow {
    .stepList { display: grid; row-gap: 8vw; background: repeat-y url("../img/common/border_dot2_g_v.png") 50% top/2px auto;
        .stepBlock { position: relative; padding: 8vw; background-color: #fff;
            .num { margin-bottom: 2em; width: 2.75em; background-color: #000; border-radius: 50%; font-size: 1rem; color: #fff; text-align: center; line-height: 2.75em; }
            .imgBlock { position: absolute; top: 8vw; right: 8vw; width: 14vw; }
            .title { width: 10.3em; margin-bottom: 8vw; font-size: 1.9rem; line-height: 1.8; }
            .text { text-align: justify; }
        }
    }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#flow {
    .stepList { row-gap: 6vw;
        .stepBlock { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 4vw 4vw 4vw 5vw; 
            .num { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
            .imgBlock { position: static; top: auto; right: auto; width: 10%; }
            .title { width: 10.3em; margin-bottom: 0; font-size: 1.8rem; }
            .text { width: 50%; }
        }
    }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#flow {
    .stepList { row-gap: 3vw; margin-left: 25%;
        .stepBlock { padding: 2.5vw 2.5vw 2.5vw 3.5vw; 
            .imgBlock { width: 10%; }
            .title { width: 25%; }
            .text { width: 55%; }
        }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#flow {
    .stepList { row-gap: 2.5vw; margin-left: 25%;
        .stepBlock { padding: 3vw 4vw 3vw 4.5vw;
            .num { font-size: 1.2rem; }
            .imgBlock { width: 9%; }
            .title { width: 30%;  font-size: 2.6rem; }
            .text { width: 50%; font-size: 1.6rem; }
        }
    }
}
}


/*========================================================================


	POINT


========================================================================*/

#point {
    #pointList { display: grid; row-gap: 6vw;
        .pointBlock { position: relative; padding: 8vw; background-color: #fff;
            .num { margin-bottom: 2em; width: 2.75em; background-color: #000; border-radius: 50%; font-size: 1rem; color: #fff; text-align: center; line-height: 2.75em; }
            .title { width: 12.4em; margin-bottom: 8vw; font-size: 1.9rem; line-height: 1.8; }
            .imgBlock { position: absolute; top: 8vw; right: 8vw; width: 14vw; }
        }
    }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#point {
    #pointList { grid-template-columns: repeat(2, 1fr); column-gap: 3vw; row-gap: 3vw;
        .pointBlock { display: grid; row-gap: 4vw; grid-template-rows: subgrid; grid-row: span 2; padding: 4vw;
            .title { margin-bottom: 0; }
            .imgBlock { top: 4vw; right: 4vw; width: 8vw; }
        }
    }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#point {
    #pointList { column-gap: 2.5vw; row-gap: 2.5vw;
        .pointBlock { row-gap: 3vw; padding: 3vw;
            .pointHeader { display: flex;
                .textBlock { width: calc(100% - 7vw);
                    .title { font-size: 2.4rem; letter-spacing: 0.06em; }
                }
                .imgBlock { top: 3vw; right: 3vw; width: 7vw; }
            }
        }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#point {
    #pointList { grid-template-columns: repeat(3, 1fr); column-gap: 2vw; row-gap: 2vw;
        .pointBlock { row-gap: 2.5vw; padding: 2.5vw;
            .pointHeader {
                .textBlock { width: calc(100% - 6vw);
                    .num { font-size: 1.2rem; }
                    .title { font-size: 2.6rem;}
                }
                .imgBlock { top: 2.5vw; right: 2.5vw; width: 6vw; }
            }
        }
    }
}
}


/*========================================================================


	ABOUT


========================================================================*/

/*------------------------------------------------------------------------
	vmv
------------------------------------------------------------------------*/

#vmv { display: grid; row-gap: 6vw;
    .vmvBlock { padding: 8vw; background-color: #fff;
        .titleBlock { display: flex; align-items: flex-end; position: relative; padding-bottom: 3vw;
            &::after { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: repeat-x url("../img/common/border_dot_h.png") bottom left/4px auto; content: ""; }
            .titleEn { margin-right: 0.5em; font-size: 2.1rem; line-height: 1.6; }
            .titleJp { padding-bottom: 0.4em; font-size: 1.3rem; line-height: 1.6; }
        }
        .textBlock { padding-top: 6vw;
            .textB { font-size: 2rem; letter-spacing: 0.06em; line-height: 1.8; }
            .listBlock {
                &:not(:last-child) { margin-bottom: 1.75em; }
                .listTitle { margin-bottom: 0.5em; font-size: 1.9rem; letter-spacing: 0.06em; }
                .listText { font-size: 1.5rem; text-align: justify; }
            }
        }
    }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#vmv { row-gap: 3vw;
    .vmvBlock { display: flex; flex-direction: row; align-items: center; padding: 5vw;
        .titleBlock { flex-direction: column; align-items: flex-start; width: 25%; margin: -0.2em 0 0.2em; padding-bottom: 0;
            &::after { content: none; }
            .titleEn { margin-right: 0; font-size: 2rem; }
            .titleJp { padding-bottom: 0; }
        }
        .textBlock { position: relative; width: 75%; padding: 0 0 0 5vw;
            &::before { width: 1px; height: calc(100% + 0.5em); display: block; position: absolute; top: 50%; left: 0; background: repeat-y url("../img/common/border_dot_v.png") left top/1px auto; transform: translateY(-50%); content: ""; }
            .textB { font-size: 2.2rem; }
            .listBlock {
                .listTitle { line-height: 1.8; }
            }
        }
    }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#vmv { row-gap: 2.5vw;
    .vmvBlock { padding: 4vw;
        .titleBlock {
            .titleEn { font-size: 3.2rem; }
            .titleJp { font-size: 1.4rem;  }
        }
        .textBlock { display: grid; row-gap: 3vw; padding-left: 4vw;
            .textB { font-size: 3.2rem; letter-spacing: 0.08em; }
            .listBlock { display: flex; flex-wrap: wrap; align-items: center; row-gap: 5vw;
                &:not(:last-child) { margin-bottom: 0; }
                .listTitle { width: 35%; margin-bottom: 0; padding-right: 2em; font-size: 2.4rem; letter-spacing: 0.08em; }
                .listText { position: relative; width: 65%; padding-left: 3vw; font-size: 1.6rem;
                    &::before { width: 1px; height: 100%; display: block; position: absolute; top: 50%; left: 0; background: repeat-y url("../img/common/border_dot_v.png") left top/1px auto; transform: translateY(-50%); content: ""; }
                }
            }
        }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#vmv { row-gap: 2.5vw;
    .vmvBlock {
        .titleBlock {
            .titleEn { font-size: 3.6rem; }
            .titleJp { font-size: 1.5rem;  }
        }
        .textBlock { row-gap: 2.5vw;
            .textB { font-size: 3.7rem; }
            .listBlock { row-gap: 5vw;
                .listTitle { width: 45%; font-size: 3rem; }
                .listText { width: 55%; padding-left: 4vw; font-size: 1.8rem; }
            }
        }
    }
}
}

/*------------------------------------------------------------------------
	member
------------------------------------------------------------------------*/

#member {
    .memberList { display: grid; row-gap: 6vw;
        .memberBlock { position: relative; padding: 13vw 8vw 8vw; background-color: #fff;
            .memberHeader {
                .nameJp { margin: 0 6em 0.1em 0; font-size: 1.9rem; line-height: 1.7; }
                .nameEn { margin: 0 10em 2.3em 0; font-size: 1.2rem; line-height: 1.7; }
                .jobList { display: flex; flex-wrap: wrap; column-gap: 1em; margin-bottom: 8vw; line-height: 1.8; }
                .imgBlock { position: absolute; top: 0; right: 0;
                    .img { width: 32vw; height: 28vw; object-fit: cover; }
                }
            }
            .memberContent {
                .profile { margin-bottom: 2em; text-align: justify; }
                .skillList { margin-bottom: 2em; padding-left: 1.25em; text-indent: -0.2em; list-style: disc;
                    .list { line-height: 1.8;
                        &:not(:last-child) { margin-bottom: 0.25em; }
                    }
                }     
            }
        }
    }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#member {
    .memberList { grid-template-columns: repeat(2, 1fr); column-gap: 3vw; row-gap: 3vw;
        .memberBlock { display: grid; row-gap: 3vw; grid-template-rows: subgrid; grid-row: span 2; padding: 7vw 4vw 4vw;
            .memberHeader {
                .nameEn { margin-bottom: 2em; }
                .jobList {  margin-bottom: 3vw; }
                .imgBlock .img { width: 16vw; height: 14vw; }
            }
        }
    }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#member {
    .memberList { column-gap: 2.5vw; row-gap: 2.5vw;
        .memberBlock { row-gap: 3vw; padding: 3vw;
            .memberHeader { display: flex; justify-content: space-between;
                .textBlock { width: 52%; 
                    .nameJp { margin: 0 0 0.1em 0; font-size: 2.2rem; }
                    .nameEn { margin: 0 0 2em 0; font-size: 1.3rem; }
                    .jobList { margin-bottom: 0; }
                }
                .imgBlock { position: static; margin: -3vw -3vw 0 0;
                    .img { width: 18vw; height: 13vw; }
                }
            }
            .memberContent { display: grid; grid-template-columns: 52% 38%; justify-content: space-between; row-gap: 2.5vw;
                .profile { margin-bottom: 0; }
                .skillList { grid-column: 2 / 3; grid-row: 1 / 3; margin-bottom: 0; }
                .linkBtnBlockS { align-items: flex-end; }
            }
        }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#member {
    .memberList { grid-template-columns: repeat(3, 1fr); column-gap: 2vw; row-gap: 2vw;
        .memberBlock { row-gap: 2.5vw; padding: 2.5vw;
            .memberHeader {
                .textBlock { width: 52%; 
                    .nameJp { margin: 0 0 0.1em 0; font-size: 2.2rem; }
                    .nameEn { margin: 0 0 2em 0; font-size: 1.3rem; }
                    .jobList { margin-bottom: 0; }
                }
                .imgBlock { margin: -2.5vw -2.5vw 0 0;
                    .img { width: 12vw; height: 9vw; }
                }
            }
        }
    }
}
}

/*------------------------------------------------------------------------
	company
------------------------------------------------------------------------*/

#company {
    .table { background-color: #fff;
        .tr { 
            /*&:not(:last-child)::after { position: absolute; left: 1.5em; bottom: 0; width: calc(100% - 3em); height: 1px; background: repeat-x url("../img/common/border_dot_h.png") bottom left/4px auto; content: ""; }*/
            .th { width: 35%; padding: 1.5em; vertical-align: middle; }
            .td { padding: 1.5em 1.5em 1.5em 0; }
        }
        .tr:not(:last-child) {
            .th, .td { position: relative;
                &::after { position: absolute; bottom: 0; height: 1px; background: repeat-x url("../img/common/border_dot_h.png") bottom left/4px auto; content: ""; }
            }
            .th::after { left: 1.5em; width: calc(100% - (1.5em + 1px)); }
            .td::after { left: 0; width: calc(100% - 1.5em); }
        }
    }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#company {
    .table { 
        .tr { 
            /*&:not(:last-child)::after { left: 2em; width: calc(100% - 4em);*/
            .th, .td {  }
            .th { width: 25%; padding: 2em; }
            .td { padding: 2em 2em 2em 0; }
        }
        .tr:not(:last-child) {
            .th::after { left: 2em; width: calc(100% - (2em + 1px)); }
            .td::after { width: calc(100% - 2em); }
        }
    }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#company {
    .table { margin-left: 25%; width: 75%;
        .tr {
            /*&:not(:last-child)::after { left: 2.5em; width: calc(100% - 5em);*/
            .th { padding: 2.5em; }
            .td { padding: 2.5em 2.5em 2.5em 0; }
        }
        .tr:not(:last-child) {
            .th::after { left: 2.5em; width: calc(100% - (2.5em + 1px)); }
            .td::after { width: calc(100% - 2.5em); }
        }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#company {
    .table {
        .tr {
            /*&:not(:last-child)::after { left: 3em; width: calc(100% - 6em);*/
            .th { padding: 3em; font-size: 1.6rem; }
            .td { padding: 3em 3em 3em 0; font-size: 1.6rem; }
        }
        .tr:not(:last-child) {
            .th::after { left: 3em; width: calc(100% - (3em + 1px)); }
            .td::after { width: calc(100% - 3em); }
        }
    }
}
}


/*========================================================================


	WORKS LIST


========================================================================*/

@media screen and (max-width: 599px) { /* SP専用調整 */
#worksList #pageHeader { margin-bottom: 12vw; }
}


/*========================================================================


	WORKS DETAIL


========================================================================*/

/*------------------------------------------------------------------------
	works article
------------------------------------------------------------------------*/

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#worksArticle { position: relative; }
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
}

/*------------------------------------------------------------------------
	works header
------------------------------------------------------------------------*/

#worksHeader { margin-bottom: 20vw;
    .projectTitle { margin-bottom: 0.25em; font-size: 2.2rem; letter-spacing: 0.06em; line-height: 1.5; }
    .serviceList { display: flex; flex-wrap: wrap; column-gap: 0.125em; margin-bottom: 0.75em; line-height: 1.7;
        .list { 
            &:not(:last-child) { margin-right: 0.125em; }
            &:not(:last-child)::after { content: " ・"; }
        }
    }
    .client { margin-bottom: 8vw; font-size: 1.3rem; }
    .credit { width: 100%;
        .tr {
            .th, .td { font-size: 1.2rem; line-height: 1.8; }
            .th { width: 30%; padding: 0.125em 1.5em 0.125em 0; 
                &::after { content: "："; }
            }
            .td { width: 70%; padding: 0.125em 0 0.125em 0; 
                .contentList {
                    .list { float: left;
                        &:not(:last-child) { margin-right: 0.15em; }
                        &:not(:last-child)::after { content: " ・"; }
                    }
                    .listLink { line-height: 1.9;
                        .link { color: #7C7C7C; padding-bottom: 0.15em; background: repeat-x url("../img/common/border_dot_g_h.png") bottom left /4px auto; transition: 500ms ease; }
                        .link:hover { color: #dc005a; background: repeat-x url("../img/common/border_dot_r_h.png") bottom left/4px auto; }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#worksHeader { position: sticky; top: 0; float: left; width: 35%; margin: -15vw 0 0 0; padding: 15vw 0 17vw;
    .projectTitle { font-size: 2.4rem; }
    .serviceList { margin-bottom: 1em; }
    .client { margin-bottom: 9vw; }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#worksHeader { width: calc(37.5% - 5vw); margin-top: -11vw; padding: 11vw 0 16vw;
    .projectTitle { font-size: 3.2rem; }
    .serviceList { margin-bottom: 1.5em; font-size: 1.7rem; }
    .client { margin-bottom: 6.5vw; font-size: 1.4rem; }
    .credit { 
        .tr {
            .th, .td { font-size: 1.3rem; }
            .th { width: 25%; }
        }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#worksHeader { width: calc(40% - 5vw);margin-top: -9vw; padding: 9vw 0 13vw;
    .projectTitle { font-size: 3.6rem; }
    .serviceList { font-size: 1.8rem; }
    .client { margin-bottom: 6.5vw; font-size: 1.7rem; }
    .credit { 
        .tr {
            .th, .td { font-size: 1.4rem; }
            .th { width: 20%; }
        }
    }
}
}

/*------------------------------------------------------------------------
	works body
------------------------------------------------------------------------*/

#worksBody {
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#worksBody { margin-left: 42.5%; }
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#worksBody { margin-left: 37.5%; }
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#worksBody { margin-left: 40%; }
}

/*------------------------------------------------------------------------
	copy section
------------------------------------------------------------------------*/

#copySec { display: grid; row-gap: 6vw; margin-bottom: 16vw;
    .copyBlock { display: flex; justify-content: center; align-items: center; position: relative; margin: 0 -4vw; padding: 12vw 0; background-color: #fff;
        /*.service { position: absolute; top: 0; left: 0; padding: 0 0.75em; background-color: #000; font-size: 1.1rem; color: #fff; line-height: 2.5; }*/
        .inner { display: flex; flex-direction: column; row-gap: 2em;
            .titleCopy { max-width: 13.52em; padding: 0.5em 0; font-size: 2rem; letter-spacing: 0.04em; line-height: 1.7; /*最大文字数13文字*/
                .row { display: block; }
            }
            .bodyCopy { max-width: 19.76em; font-size: 1.4rem; letter-spacing: 0.04em; /*最大文字数19文字*/
                /*& br { display: none; }*/
            }  
        }
    }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#copySec { row-gap: 3vw; margin-bottom: 9vw;
    .copyBlock { margin: 0; padding: 7vw 0; }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#copySec { row-gap: 2.5vw; margin-bottom: 7vw;
    .copyBlock { padding: 10vw 0;
        .service { padding: 0 1em; font-size: 1.2rem; line-height: 3; }
        .inner {  row-gap: 3em;
            .titleCopy { max-width: 14.3em; font-size: 3.2rem; letter-spacing: 0.1em; line-height: 2; }
            .bodyCopy { max-width: /*20.52em*/27em; font-size: 1.9rem; letter-spacing: 0.08em; line-height: 2.2;
                /*& br { display: block; }*/
            }
        }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#copySec { row-gap: 2vw; margin-bottom: 6vw;
    .copyBlock {
        .service { font-size: 1.3rem; }
        .inner { row-gap: 3.5em;
            .titleCopy { font-size: 4rem; line-height: 2.2; }
            .bodyCopy { max-width: /*20.9em*/27.5em; font-size: 2.4rem; letter-spacing: 0.1em; line-height: 2.4; }
        }
    }
}
}

/*------------------------------------------------------------------------
	description
------------------------------------------------------------------------*/

#description { display: flex; flex-direction: column; row-gap: 2em;
    .text { text-align: justify; }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#description {  }
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#description { display: block; column-count: 2; column-gap: 5em; margin: -1em 0;
    .text { padding: 1em 0; break-inside: avoid; font-size: 1.5rem; }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#description {
    .text { font-size: 1.7rem; line-height: 2.2; }
}
}

/*------------------------------------------------------------------------
	gallery
------------------------------------------------------------------------*/

#gallery { 
    .imageList { display: grid; row-gap: 6vw; margin: 0 -4vw; padding-top: 16vw; }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#gallery { 
    .imageList { row-gap: 3vw; margin: 0; padding-top: 9vw; }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#gallery { 
    .imageList { row-gap: 2.5vw; padding-top: 7vw; }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#gallery { 
    .imageList { row-gap: 2vw; padding-top: 7vw; }
}
}


/*========================================================================


	NEWS DETAIL


========================================================================*/

/*------------------------------------------------------------------------
	news article block
------------------------------------------------------------------------*/

#newsArticle #newsArticleBlock { padding: 8vw; background-color: #fff; }

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#newsArticle #newsArticleBlock { padding: 5vw; }
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#newsArticle #newsArticleBlock { margin-left: 25%; }
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#newsArticle #newsArticleBlock { padding: 6vw 8vw; }
}

/*------------------------------------------------------------------------
	news header
------------------------------------------------------------------------*/

#newsArticle #newsHeader { position: relative; margin-bottom: 2em; padding-bottom: 1em; 
    &::after { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: repeat-x url("../img/common/border_dot_h.png") bottom left/4px auto; content: ""; }
    .time { margin-bottom: 0.125em; font-size: 1.3rem; color: #7C7C7C; }
    .title { font-size: 1.8rem; line-height: 1.7; }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#newsArticle #newsHeader { margin-bottom: 3em; padding-bottom: 1.5em; 
    .time { margin-bottom: 0.25em; }
    .title { font-size: 2.2rem; }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#newsArticle #newsHeader {
    .title { font-size: 2.8rem; letter-spacing: 0.08em; }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#newsArticle #newsHeader { margin-bottom: 4em;
    .time { font-size: 1.6rem; }
    .title { font-size: 3.2rem; letter-spacing: 0.1em; }
}
}

/*------------------------------------------------------------------------
	news body
------------------------------------------------------------------------*/

#newsArticle #newsBody {
    & a { color: #7C7C7C; padding-bottom: 0.2em; background: repeat-x url("../img/common/border_dot_g_h.png") bottom left /4px auto; }
    & p { margin-bottom: 2em; text-align: justify; }
    /*& p strong { font-weight: 600; }*/
    & p img { vertical-align: baseline; }
    & img { max-width: 100%; height: auto; }
    & .wp-caption { width: 100% !important; }
    & .wp-caption .wp-caption-text { padding-top: 0.75em; font-size: 1.3rem; }
    & ul, & ol { margin-bottom: 2em; margin-left: 2em; }
    & ul { list-style: disc; }
    & ol { list-style: decimal; }
}

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#newsArticle #newsBody { letter-spacing: 0.06em; }
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#newsArticle #newsBody { font-size: 1.6rem; letter-spacing: 0.08em; line-height: 2.1;
    & a { transition: 500ms ease;
        &:hover { color: #dc005a; background: repeat-x url("../img/common/border_dot_r_h.png") bottom left/4px auto; }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#newsArticle #newsBody { font-size: 1.8rem; letter-spacing: 0.1em; line-height: 2.2;
    & p { margin-bottom: 2.5em; }
    & .wp-caption .wp-caption-text { padding-top: 1em; font-size: 1.4rem; }
    & ul, & ol { margin-bottom: 2.5em; }
}
}


/*========================================================================


	CONTACT


========================================================================*/

/*------------------------------------------------------------------------
	common
------------------------------------------------------------------------*/

/* フッターコンタクトを非表示 */
:is(.form-input, .form-confirm, .form-complete) #footerContact { display: none; }


/* ページヘッダーの調整 */
@media screen and (max-width: 599px) {
#contact #pageHeader { margin-bottom: 12vw; }
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
}

/* フッター背景の調整 */
@media screen and (min-width: 600px) { /* 768×1024最適化 */
:is(.form-input, .form-confirm, .form-complete) #footer {
    .bg { top: 0; bottom: auto; }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
:is(.form-input, .form-confirm, .form-complete) #footer {
    .bg { top: -11vw; }
}}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#contact #pageContent { margin-left: 25%; }
}

/*------------------------------------------------------------------------
	form table
------------------------------------------------------------------------*/
#form {
    .table { width: 100%; margin-bottom: 8vw; background-color: #fff; 
        tr { 
            /*&:not(:last-child)::after { position: absolute; left: 1.5em; bottom: 0; width: calc(100% - 3em); height: 1px; background-color: #000; content: ""; }*/
            :is(th, td) { display: block; position: relative; padding: 1.5em; }
            th { position: relative; text-align: left; vertical-align: middle;
                &::after { position: absolute; left: 1.5em; bottom: 0; width: calc(100% - 3em); height: 1px; background: repeat-x url("../img/common/border_dot_h.png") bottom left/4px auto; content: ""; }
                .must { margin-left: 0.5em; font-size: 1.1rem; color:#E80063; }
            }
            td {
                .lead { margin-bottom: 1em;
                    br { display: none; }
                }
                :is(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], select, textarea) { -webkit-appearance: none; padding: 0.75em; box-sizing: border-box; border: 1px solid #C1C1C1; border-radius: 0; line-height: 1.5; vertical-align: middle; }
                :is(input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus) { outline: 0; cursor: none; }
                :is(input[type="text"]:hover, input[type="tel"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="number"]:hover, input[type="date"]:hover, select:hover, textarea:hover) { cursor: none; }
                :is(input[type="text"], input[type="email"], input[type="url"], textarea)::placeholder { color: #C8C8C8; }
                input[type="checkbox"] { display: none; }
                .mwform-checkbox-field-text { padding-left: 22px; position: relative; }
                .mwform-checkbox-field-text::before { display: block; position: absolute; top: 0.4em; left: 0; width: 14px; height: 14px; border: 1px solid #C1C1C1; content: ""; }
                input[type="checkbox"]:checked + .mwform-checkbox-field-text::after { display: block; position: absolute; top: 0.125em; left: 4px; transform: rotate(40deg); width: 7px; height: 14px; border-bottom: 2px solid #000; border-right: 2px solid #000; content: ""; }
                .mwform-tel-field input { width: 25%; }
                textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; }
                textarea { height: 15em; }
            }
        }
        tr:not(:last-child) {
            td {
                &::after { position: absolute; left: 1.5em; bottom: 0; width: calc(100% - 3em); height: 1px; background-color: #000; content: ""; }        
            }
        }
    }
    .mwform-checkbox-field label { cursor: none; }
}
.form-confirm #form .table td .lead { display: none; }

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#form .table { width: 100%; margin-bottom: 5vw;
    tr { position: relative;
        /*&:not(:last-child)::after { left: 2em; width: calc(100% - 4em); background: repeat-x url("../img/common/border_dot_h.png") bottom left/4px auto; }*/
        :is(th, td) { display: table-cell; padding: 2em; }
        th { width: 37.5%;
            &::after { content: none; }
        }
        td {
        }
    }
    tr:not(:last-child) {
        :is(th, td) {
            &::after { position: absolute; bottom: 0; width: calc(100% - (2em + 1px)); height: 1px; background: repeat-x url("../img/common/border_dot_h.png") bottom left/4px auto; content: ""; }
        }
        th::after { left: 2em; }
        td::after { left: 0em; }
    }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#form .table { margin-bottom: 4vw;
    tr {
        /*&:not(:last-child)::after { left: 2.5em; width: calc(100% - 5em); }*/
        :is(th, td) { padding: 2.5em; }
        th { width: 30%; }
        td {
            :is(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], select, textarea) { padding: 1em; }
        
        }
    }
    tr:not(:last-child) {
        :is(th, td) {
            &::after { width: calc(100% - (2.5em + 1px)); }
        }
        th::after { left: 2.5em; }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#form .table { margin-bottom: 3vw;
    tr {
        /*&:not(:last-child)::after { left: 3em; width: calc(100% - 6em); }*/
        :is(th, td) { padding: 3em; font-size: 1.6rem; }
        td { }
    }
    tr:not(:last-child) {
        :is(th, td) {
            &::after { width: calc(100% - (3em + 1px)); }
        }
        th::after { left: 3em; }
    }
}
}

/*------------------------------------------------------------------------
	error
------------------------------------------------------------------------*/

#form .error { margin-top: 0.25em; font-size: 1.4rem; color: #E80063 !important; }

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#form .error { font-size: 1.6rem; }
}

/*------------------------------------------------------------------------
	privacy
------------------------------------------------------------------------*/

#form .privacy { margin-bottom: 8vw; padding: 4vw; background-color: #fff;
    .inner { overflow-y: scroll; height: 70vw; padding: 4vw;
        h3 { margin-bottom: 1em; font-size: 2rem; line-height: 1.7; }
        h4 { margin-bottom: 0.5em; padding-top: 1.5em; font-size: 1.7rem; line-height: 1.7; }
        p { margin-bottom: 1.5em; }
        ul { margin-bottom: 1.5em; padding-left: 1.5em; list-style: disc;
            li { line-height: 1.7;
                &:not(:last-child) { margin-bottom: 0.25em; }
            }
        }
    }
}
.form-confirm #form .privacy { display: none; }

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#form .privacy { margin-bottom: 6vw; padding: 3vw;
    .inner { height: 40vw; padding: 3vw;
        h3 { font-size: 2.2rem; }
        h4 { font-size: 1.6rem; }
    }
}
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#form .privacy { margin-bottom: 4vw; padding: 2vw;
    .inner { height: 25vw; padding: 2vw;
        h3 { margin-bottom: 1.5em; font-size: 2.8rem; }
        h4 { font-size: 1.8rem; }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#form .privacy { margin-bottom: 3vw;
    .inner { 
        h3 { margin-bottom: 2em; font-size: 3.4rem; }
        h4 { font-size: 2rem; }
        p { font-size: 1.6rem; }
        ul { font-size: 1.6rem; }
    }
}
}

/*------------------------------------------------------------------------
	privacy check
------------------------------------------------------------------------*/

#form .privacyCheck { margin-bottom: 10vw; text-align: center; 
    input[type="checkbox"] { display: none; }
    .mwform-checkbox-field-text { padding-left: 22px; position: relative; }
    .mwform-checkbox-field-text::before { display: block; position: absolute; top: 0.4em; left: 0; width: 14px; height: 14px; border: 1px solid #000; content: ""; }
    input[type="checkbox"]:checked + .mwform-checkbox-field-text::after { display: block; position: absolute; top: 0.125em; left: 4px; transform: rotate(40deg); width: 7px; height: 14px; border-bottom: 2px solid #000; border-right: 2px solid #000; content: ""; }
}
.form-confirm #form .privacyCheck { display: none; }

@media screen and (min-width: 600px) { /* 768×1024最適化 */
#form .privacyCheck { margin-bottom: 6vw; }
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#form .privacyCheck { margin-bottom: 4vw; }
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#form .privacyCheck { margin-bottom: 3vw; font-size: 1.6rem; }
}

/*------------------------------------------------------------------------
	submit
------------------------------------------------------------------------*/

#form .submit { display: flex; 
    input[type="submit"] { -webkit-appearance: none; width: calc((100% - 2vw) / 2); padding: 1em; border: none; outline: none; background-color: rgba(0,0,0,0.85); font-size: 1.5rem; font-weight: 500; color: #fff; letter-spacing: 0.1em; text-align: center; cursor: pointer; }
    input[type="submit"]:not(:last-child) { margin-right: 2vw; }
    input[name="submitConfirm"] { width: 100%; }
}

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#form .submit {
    input[type="submit"] { padding: 1.5em; transition: 500ms ease;
        &:hover { background-color: rgba(220,0,90,0.9); cursor: none; }
    }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#form .submit {
    input[type="submit"] { padding: 2em; font-size: 1.7rem; }
}
}

/*------------------------------------------------------------------------
	complete
------------------------------------------------------------------------*/

@media screen and (min-width: 1024px) { /* 1366×768最適化 */
#form {
    .mw_wp_form_complete { font-size: 1.7rem; line-height: 2.2; }
}
}

@media screen and (min-width: 1600px) { /* 1920×1080最適化 */
#form {
    .mw_wp_form_complete { font-size: 2rem; }
}
}