@charset "utf-8";

/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/

@media (min-width: 768px) {
    body:has(.canvas.one-stroke ) {
        background-color: #e7e7e9;
    }
    /* gHeader */
    #gHeader {
        padding: 24px 2px 30px 27px;
    }
    #gHeader h1 {
        width: 113px;
    }
    #gHeader .menuBox {
        margin: 35px -11px 0 0;
    }
    #gHeader .menu::after {
        font-family: "Roboto", sans-serif;
        font-size: 1.2rem;
        font-weight: bold;
        top: 2px;
        left: -32px;
        letter-spacing: 0.1rem;
    }
    #gHeader.fixed {
        padding: 10px 2px 10px 27px;
    }
    #gHeader.fixed h1 {
        width: 75px;
    }
}
@media (max-width: 767px) {
    #gHeader {
        padding: 12px 2px 5px 10px;
        height: 70px;
    }
    #gHeader h1 {
        width: 53px;
    }
    .one-stroke {
        margin-top: 0;
        overflow: hidden;
    }

}

@media (min-width: 768px) {
    .one-stroke .slideBox {
        background: url(img-one-stroke/bg01.png) no-repeat right calc(50% + 26.7rem) top / 31rem,
        url(img-one-stroke/bg02.png) no-repeat left calc(50% + 21rem) bottom 7rem / 35.6rem;
    }
    .one-stroke .slideList .slick-slide > div {
        margin: 0 65px;
        width: 501px;
    }
    .one-stroke .slideList .imgBox .ttl {
        margin-bottom: -2px;
        color: #000;
        font-size: 2.1rem;
        font-weight: bold;
        font-family: "Montserrat", sans-serif;
    }
    .one-stroke .slideList .imgBox .txt {
        font-size: 1.1rem;
    }
    .one-stroke .slideList .slick-dots li {
        margin: 0 17px;
        border-radius: 100%;
        width: 6px !important;
        height: 6px !important;
    }
    .one-stroke .slideList .imgBox a {
        padding: 20px 11px;
    }
    .one-stroke .slideList .imgBox {
        margin: 0;
        width: 100%;
        background-color: transparent;
    }
    .one-stroke .slideBox .prev,
    .one-stroke .slideBox .next {
        top: 43%;
    }
    .one-stroke .slideBox .prev {
        left: calc(50% - 385px);
    }
    .one-stroke .slideBox .next {
        right: calc(50% - 385px);
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .one-stroke .slideBox .prev,
    .one-stroke .slideBox .next {
        top: auto;
    }
    .one-stroke .slideBox .prev {
        left: 24%;
    }
    .one-stroke .slideBox .next {
        right: 24%;
    }
	.one-stroke .slideList .slick-slide > div {
		margin: 0;
	}
}
@media (max-width: 767px) {
     .one-stroke .slideBox {
        padding-top: 60px;
        background: url(img-one-stroke/bg01.png) no-repeat  left 6% top / 17rem,
        url(img-one-stroke/bg02.png) no-repeat  right -0.5rem bottom 4rem / 15.6rem;
    }
    .one-stroke .slideList .imgBox .desBox {
        margin: 0 auto;
        width: fit-content;
    }
    .one-stroke .slideList .imgBox .ttl {
        font-size: 2rem;
    }
    .one-stroke .slideList .imgBox .txt {
        font-size: 0.9rem;
    }    
}

@media (min-width: 768px) {
    .one-stroke .topBox h2 {
        font-size: 3rem;
        font-weight: bold;
    }
    .one-stroke .topBox .photo {
        width: 307px;
    }
    .one-stroke .headLine01 {
        padding: 30px 50px 35px;
        font-size: 3.2rem;
        font-weight: bold;
        font-family: "Montserrat", sans-serif;
        letter-spacing: 0.1em;
    }
    .one-stroke .talentSec .photoList li.special .photo {
        width: 117px;
    }
    .one-stroke .talentSec .photoList .name span {
        color: #000;
        font-size: 1.5rem;
    }
    .comContact p span {
        padding: 0 30px;
    }
}
.one-stroke .topBox p {
    color: #000;
}
.one-stroke .talentSec {
    position: relative;    
}
.one-stroke .talentSec::before {
    width: 432px;
    height: 279px;
    position: absolute;
    right: 93px;
    top: -50px;
    content: '';
    background: url(img-one-stroke/bg03.png) no-repeat center bottom / 100%;
}
.one-stroke .newSec {
    position: relative;
}
.one-stroke .newSec::before {
    width: 322px;
    aspect-ratio: 644/580;
    position: absolute;
    right: 170px;
    top: 340px;
    content: '';
    background: url(img-one-stroke/bg04.png) no-repeat center bottom / 100%;
}
.comContact .headLine01 {
    padding: 0;
}
.comContact p span {
    background-position: right center;
}
.talent .rBox,
.talent .rBox .works,
.talent .rBox .works .headLine01,
.talent .rBox .works .textBox,
.talent .works .innerBox h4,
.comContact a,
.one-stroke .newSec .detailUl li,
.one-stroke .topBox,
.one-stroke .topBox ul li,
.one-stroke .talentSec .photoList,
.one-stroke .talentSec .photoList li {
    border-color: #b3b3b3;
}
@media (min-width: 768px) and (max-width: 999px) {
	.comContact p span {
		padding-left: 120px;
	}
}
@media (max-width: 767px) {
    .one-stroke .talentSec::before {
        width: 194px;
        height: 242px;
        right: 7px;
        top: -165px;
    }
    .canvas .newSec .detailUl li a {
        right: 5px;
    }
    .one-stroke .newSec::before {
        width: 165px;
        right: -39px;
        top: 50%;
        transform: translateY(-50%);
    }
}


/* gFooter */
 #gFooter {
    padding: 27px 36px 67px 33px;
    position: relative;
}
#gFooter::after {
    width: 290px;
    height: 530px;
    position: absolute;
    right: 170px;
    bottom: 0;
    content: '';
    background: url(img-one-stroke/bg05.png) no-repeat center bottom / 100%;
}
@media (min-width: 768px) {
    #gFooter .fBox .link a {
        color: #180024;
        font-size: 1rem;
        font-family: "Montserrat", sans-serif;
        letter-spacing: 0.1em;
    }
    #gFooter .fLogo {
        width: 120px;
    }
    #gFooter address {
        color: #180024;
        font-size: 1rem;
        font-family: "Montserrat", sans-serif;
        letter-spacing: 0.1em;    
    }
}
@media (max-width: 767px) {
    #gFooter {
        padding: 27px 10px 58px 18px;
    }
    #gFooter::after {
        width: 132px;
        height: 227px;
        right: 15.2%;
    }
    #gFooter address {
        position: relative;
        z-index: 10;
    }
}

/*------------------------------------------------------------
	loading
------------------------------------------------------------*/
.loading {
	width: 100%;
	height: 100%;
	position: fixed;
	background: #F2F2F2;
	z-index: 10000;
}
.loading .loadingImg {
	width: 152px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.loading .loadingImg .cover {
	width: 200%;
	height: 150%;
	position: absolute;
	right: 0;
	top: 50%;
	z-index: 1;
	content: "";
	transition: 2.5s;
	background: linear-gradient(90deg, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 0.02) 1.77%, rgba(242, 242, 242, 1) 50%, rgba(242, 242, 242, 1) 100%);
	transform: translateX(0) translateY(-50%);
}
.loading .loadingImg.out .cover {
	transform: translateX(100%) translateY(-50%);
}