@charset "UTF-8";

/* CSS Document */

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

	main

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

main {
}

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

    #bottom_btn

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

#bottom_btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10;
}
#bottom_btn a {
    display: inline-block;
    line-height: 1em;
    padding: 1em 2em;
    background: var(--main-color);
    text-decoration: none;
    border-radius: 40px;
    border: 1px solid var(--main-color);
    color: var(--sub-color);
}
#bottom_btn a:hover {
    background: var(--text-color);
}

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

	#fv

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

#fv {
	width: 100%;
	height: 100svh;
}
#fv .inner {
	width: 100%;
	height: 100svh;
	display: flex;
	justify-content: left;
	align-items: center;
	padding: 0 0 0 60px;
	position: relative;
	z-index: 1;
}
#fv .inner .copy {
	width: 50%;
	position: relative;
	z-index: 1;
}
#fv .inner .cont_eye {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: -1;
}
#fv .cont_eye .eye_wrap {
	position: relative;
	height: 78%;
	aspect-ratio: 1 / 1;
	max-width: 92%;
	--eye-cx: 50%;    /* 穴の中心X */
	--eye-cy: 54%;    /* 穴の中心Y */
	--eye-size: 30%;  /* 目玉の大きさ（穴より少し大きめ＝はみ出しはカバーが隠す）*/
}
#fv .cont_eye .eyeball {
	position: absolute;
	left: var(--eye-cx);
	top: var(--eye-cy);
	width: var(--eye-size);
	aspect-ratio: 449.65 / 387.811;
	transform: translate(-50%, -50%) translate(var(--eye-dx, 0px), var(--eye-dy, 0px));
	background: var(--eye-ball, url(/images/eyeball_01.svg)) center / contain no-repeat;
	z-index: 1;
	will-change: transform;
}
#fv .cont_eye .eye_base {
	position: absolute;
	inset: 0;
	background: var(--eye-cover, url(/images/eye_01.svg)) center / contain no-repeat;
	z-index: 2;
}
#fv .text {
    margin-top: 20px;
}
#fv .text h2 {
    margin-bottom: 20px;
}

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

    #wp_ph

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

#wp_ph {
}
#wp_ph .inner {
}
#wp_ph .inner .gallery {
    list-style: none;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#wp_ph .inner .gallery li {
    width: 25%;
    position: relative;
    aspect-ratio: 4 / 2.5;
    overflow: hidden;
}
#wp_ph .inner .gallery li img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#wp_ph .inner .gallery li .flash {
    position: absolute;
    inset: 0;
    background: var(--sub-color);
    opacity: 0;
    pointer-events: none;
}

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

	section

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

main section {
	padding: 60px 60px;
}
main section .inner {
}
main section .inner .sec_ttl {
    margin-bottom: 60px;
}
main section .inner .sec_ttl h2 {
	font-size: 150%;
	font-family: "helvetica-lt-pro", sans-serif;
	font-weight: 700;
	font-style: normal;
}
main section .inner .sec_ttl h2 span {
	padding: 0 0 0 .5em;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	font-size: 70%;
}
main section .inner .sec_ttl h2::first-letter {
	color: var(--main-color);
}
main section .inner .sec_ttl h3 {
	font-size: 250%;
    line-height: 1.25em;
    margin: 20px 0;
}
main section .inner .sec_ttl h3 span {
	color: var(--main-color);
}
main section .inner .sec_ttl h3 ruby {
}
main section .inner .sec_ttl h3 ruby rt {
    font-size: 30%;
    line-height: 1em;
    margin-bottom: -1em;
}
main section .inner .sec_content {
}
main section.neg {
	background: var(--text-color);
}
main section.neg .sec_ttl h2 {
	color: #fff;
}
main section.neg .sec_ttl h3 {
	color: #fff;
}
main section.neg .sec_ttl p {
    color: #fff;
}
main section.neg .sec_content {
    color: #fff;
}

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

    #wp_news

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

#wp_news {
}
#wp_news .inner {
}
#wp_news .inner .sec_content {
}
#wp_news .inner .sec_content .list {
}
#wp_news .inner .sec_content .list ul {
}
#wp_news .inner .sec_content .list ul li {
    margin-bottom: 4px;
}
#wp_news .inner .sec_content .list ul li .open-btn {
    width: 100%;
    display: block;
    text-decoration: none;
    color: var(--text-color);
    background: #fff;
    padding: 20px;
}
#wp_news .inner .sec_content .list ul li .open-btn:hover {
    background: var(--main-color);
    color: #fff;
}
#wp_news .inner .sec_content .list ul li .open-btn dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
#wp_news .inner .sec_content .list ul li .open-btn dl dt {
    width: 200px;
}
#wp_news .inner .sec_content .list ul li .open-btn dl dd {
    flex: 1;
    text-align: left;
    padding: 0 0 0 60px;
}
#wp_news .inner .sec_content .list ul li .open-btn dl dd .date {
}
#wp_news .inner .sec_content .list ul li .open-btn dl dd h4 {
    font-size: 120%;
    font-weight: normal;
}

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

    #wp_service

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

#wp_service {
}
#wp_service .inner {
}
#wp_service .inner .sec_content {
}
#wp_service .inner .sec_content .page {
    display: flex;
    align-items: flex-start;
    gap: 6rem;
    margin: 0 auto;
}
#wp_service .inner .sec_content .nav-scroll {
    position: sticky;
    top: 3rem;
    width: 230px;
    flex-shrink: 0;
    --nav-current: #A9863A;
}
#wp_service .inner .sec_content .nav-list {
    list-style: none;
    margin-bottom: 2.5rem;
    padding: 0;
}
#wp_service .inner .sec_content .nav-list li {
    margin-bottom: 2px;
    line-height: 1.5em;
}
#wp_service .inner .sec_content .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 400;
    padding: 9px 0;
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: color 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
#wp_service .inner .sec_content .nav-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0%;
    background: var(--nav-current);
    transition: width 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
#wp_service .inner .sec_content .nav-item.current {
    color: var(--nav-current);
}
#wp_service .inner .sec_content .nav-item.current::after {
    width: 100%;
}
#wp_service .inner .sec_content .sections {
    flex: 1;
    display: flex;
    flex-direction: column; gap: 1px;
}
#wp_service .inner .sec_content .card {
    position: sticky;
    background: var(--text-color);
    border: 1px solid var(--main-color);
    padding: 2rem;
    transition: border-color 0.4s cubic-bezier(0.76, 0, 0.24, 1),
                transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
    transform-origin: top center;
    margin-bottom: 20px;
}
#wp_service .inner .sec_content .card .card_inn {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
#wp_service .inner .sec_content .card .card_inn .ph {
    width: 260px;
}
#wp_service .inner .sec_content .card .card_inn .text {
    flex: 1;
    padding: 0 0 0 30px;
}
#wp_service .inner .sec_content #section1 { top: 60px; }
#wp_service .inner .sec_content #section2 { top: 66px; }
#wp_service .inner .sec_content #section3 { top: 72px; }
#wp_service .inner .sec_content #section4 { top: 78px; }
#wp_service .inner .sec_content #section5 { top: 84px; }
#wp_service .inner .sec_content #section6 { top: 90px; }
#wp_service .inner .sec_content #section7 { top: 96px; }
#wp_service .inner .sec_content #section8 { top: 102px; }
#wp_service .inner .sec_content #section9 { top: 108px; }
#wp_service .inner .sec_content #section10 { top: 114px; }
#wp_service .inner .sec_content #section11 { top: 120px; }
#wp_service .inner .sec_content #section12 { top: 126px; }
#wp_service .inner .sec_content #section13 { top: 132px; }
#wp_service .inner .sec_content #section14 { top: 138px; }
#wp_service .inner .sec_content #section15 { top: 144px; }

#wp_service .inner .sec_content .card-num {
    display: block;
    font-size: 90%;
    color: var(--main-color);
    margin-bottom: 1rem;
    font-weight: 500;
    font-family: "helvetica-lt-pro", sans-serif;
}
#wp_service .inner .sec_content .card h2 {
    font-size: 130%;
    font-weight: 500;
    color: #fff;
    margin-bottom: 1rem;
}
#wp_service .inner .sec_content .card p {
    line-height: 1.8;
    color: #fff;
}

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

    #wp_channel

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

#wp_channel {
}
#wp_channel .inner {
}
#wp_channel .inner .sec_content {
}
#wp_channel .inner .sec_content .creators_list {
}
#wp_channel .inner .sec_content .creators_list ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#wp_channel .inner .sec_content .creators_list ul li {
    width: 31.25%;
    margin-right: 3%;
    margin-bottom: 40px;
}
#wp_channel .inner .sec_content .creators_list ul li:nth-child(3n) {
    margin-right: 0;
}
#wp_channel .inner .sec_content .creators_list .ph {
    margin-bottom: 10px;
}
#wp_channel .inner .sec_content .creators_list .text {
}
#wp_channel .inner .sec_content .creators_list .text h3 {
    font-size: 100%;
    margin-bottom: 10px;
}
#wp_channel .inner .sec_content .creators_list .text .prof {
    margin-bottom: 20px;
}
#wp_channel .inner .sec_content .creators_list .text .prof p {
    font-size: 90%;
    line-height: 1.65em;
}
#wp_channel .inner .sec_content .creators_list .text .sns {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#wp_channel .inner .sec_content .creators_list .text .sns a {
    background: #none;
    border-radius: 40px;
    line-height: 1em;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .5);
    padding: .6em 20px .6em 40px;
    color: #fff;
    font-size: 80%;
    margin: 0 4px 4px 0;
}
#wp_channel .inner .sec_content .creators_list .text .sns .inst {
    background:
    url(../images/icon_inst.png) no-repeat left 20px top 50%,radial-gradient(circle at 30% 107%, #ffdb2c 0%, #ff6b3d 25%, #f5316f 50%, #b234a8 70%, #4d5ee8 100%);
    background-size: 10px, cover;
    border: 1px solid rgba(255, 255, 255, 0);
    border: 1px solid #ccc;
}
#wp_channel .inner .sec_content .creators_list .text .sns .inst:hover {
    background: url(../images/icon_inst_hover.png) no-repeat left 20px top 50% #fff;
    background-size: 10px;
    border: 1px solid #ccc;
    color: var(--text-color);
}
#wp_channel .inner .sec_content .creators_list .text .sns .youtube {
    background: url(../images/icon_youtube.svg) no-repeat left 20px top 50% #f00;
    background-size: 10px;
    border: 1px solid #f00;
}
#wp_channel .inner .sec_content .creators_list .text .sns .youtube:hover {
    background: url(../images/icon_youtube_hover.svg) no-repeat left 20px top 50% #fff;
    background-size: 10px;
    border: 1px solid #f00;
    color: var(--text-color);
}
#wp_channel .inner .sec_content .creators_list .text .sns .x {
    background: url(../images/icon_x.svg) no-repeat left 20px top 50% #000;
    background-size: 10px;
    border: 1px solid #ccc;
}
#wp_channel .inner .sec_content .creators_list .text .sns .x:hover {
    background: url(../images/icon_x_hover.svg) no-repeat left 20px top 50% #fff;
    background-size: 10px;
    border: 1px solid #000;
    color: var(--text-color);
}
#wp_channel .inner .sec_content .creators_list .text .sns .bigo {
    background: url(../images/icon_bigolive.png) no-repeat left 20px top 50% #00fff0;
    background-size: 10px;
    border: 1px solid #00fff0;
    color: var(--text-color);
}
#wp_channel .inner .sec_content .creators_list .text .sns .bigo:hover {
    background: url(../images/icon_bigolive.png) no-repeat left 20px top 50% #fff;
    background-size: 10px;
    border: 1px solid #ccc;
    color: var(--text-color);
}
#wp_channel .inner .sec_content .creators_list .text .sns .tiktok {
    background: url(../images/icon_tictok.png) no-repeat left 20px top 50% #000;
    background-size: 10px;
    border: 1px solid #ccc;
}
#wp_channel .inner .sec_content .creators_list .text .sns .tiktok:hover {
    background: url(../images/icon_tictok_hover.png) no-repeat left 20px top 50% #fff;
    background-size: 10px;
    border: 1px solid #000;
    color: var(--text-color);
}
#wp_channel .inner .sec_content .creators_list .text .sns .threads {
    background: url(../images/icon_threads.png) no-repeat left 20px top 50% #000;
    background-size: 10px;
    border: 1px solid #ccc;
}
#wp_channel .inner .sec_content .creators_list .text .sns .threads:hover {
    background: url(../images/icon_threads_hover.png) no-repeat left 20px top 50% #fff;
    background-size: 10px;
    border: 1px solid #000;
    color: var(--text-color);
}
#wp_channel .inner .sec_content .channel_list {
}
#wp_channel .inner .sec_content .channel_list .cell {
    border: 1px solid var(--main-color);
    background: rgba(255, 255, 255, .8);
    padding: 40px;
    margin-top: 40px;
}
#wp_channel .inner .sec_content .channel_list .cell:first-child {
    margin-top: 0px;
}
#wp_channel .inner .sec_content .channel_list .cell .text_ph {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row-reverse;
}
#wp_channel .inner .sec_content .channel_list .cell .text_ph .ph {
    width: 500px;
}
#wp_channel .inner .sec_content .channel_list .cell .text_ph .text {
    flex: 1;
    padding: 0 30px 0 0;
}
#wp_channel .inner .sec_content .channel_list .cell .text_ph .text h3 {
    font-size: 180%;
    line-height: 1em;
    margin-bottom: 20px;
    color: var(--text-color);
}
#wp_channel .inner .sec_content .channel_list .cell .text_ph .text p {
    color: var(--text-color);
}
@media (max-width: 1000px) {
    #wp_channel .inner .sec_content .channel_list .cell .text_ph {
        display: block;
    }
    #wp_channel .inner .sec_content .channel_list .cell .text_ph .ph {
        width: 100%;
    }
    #wp_channel .inner .sec_content .channel_list .cell .text_ph .text {
        width: 100%;
        margin-top: 20px;
    }
}
#wp_channel .inner .sec_content .channel_list .cell .ytb_list {
    margin-top: 40px;
    padding-top: 40px;
     background: #eee;
     padding: 40px;
     border: 1px solid #ccc;
}
#wp_channel .inner .sec_content .channel_list .cell .ytb_list ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#wp_channel .inner .sec_content .channel_list .cell .ytb_list ul li {
    width: 49%;
}
#wp_channel .inner .sec_content .channel_list .cell .ytb_list ul li iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}
#wp_channel .inner .sec_content .channel_list .cell .btn {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    font-family: "helvetica-lt-pro", sans-serif;
}

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

    #wp_goods

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

#wp_goods {
    padding: 0;
}
#wp_goods .inner {
    padding: 0 0 60px 0;
}
#wp_goods .inner .sec_ttl {
    padding: 60px 60px 0 60px;
}
#wp_goods .inner .sec_content {
}
#wp_goods .inner .sec_content .loopSlider {
    height: 360px;
    overflow: hidden;
    position: relative;
    margin-bottom: 60px;
}
#wp_goods .inner .sec_content .loopSlider .loopslider_wrap {
    height: 360px;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
}
#wp_goods .inner .sec_content .loopSlider .loopslider_wrap ul {
    display: -webkit-flex;
    display: flex;
}
#wp_goods .inner .sec_content .loopSlider .loopslider_wrap ul li {
    width: 420px;
}
#wp_goods .inner .sec_content .btn_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#wp_goods .inner .sec_content .btn {
    width: 50%;
}
#wp_goods .inner .sec_content .btn:first-child {
    text-align: right;
    padding: 0 20px 0 0;
}
#wp_goods .inner .sec_content .btn:last-child {
    text-align: left;
    padding: 0 0 0 20px;
}

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

    #wp_clients

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

#wp_clients {
}
#wp_clients .inner {
}
#wp_clients .inner .sec_ttl {
}
#wp_clients .inner .sec_content {
    border: 1px solid var(--main-color);
    padding: 60px 0;
    background: rgba(255, 255, 255, 1);
}
#wp_clients .inner .sec_content .loopSlider {
    height: 225px;
    overflow: hidden;
    position: relative;
    display: none;
}
#wp_clients .inner .sec_content .loopSlider .loopslider_wrap {
    height: 225px;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
}
#wp_clients .inner .sec_content .loopSlider .loopslider_wrap ul {
    display: -webkit-flex;
    display: flex;
}
#wp_clients .inner .sec_content .loopSlider .loopslider_wrap ul li {
    width: 300px;
}
#wp_clients .inner .sec_content .list {
    padding: 0 60px;
    /*margin-top: 60px;*/
    display: none;
}
#wp_clients .inner .sec_content .list h5 {
    font-size: 140%;
    margin-bottom: 20px;
    color: var(--text-color);
}
#wp_clients .inner .sec_content .list ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#wp_clients .inner .sec_content .list ul li {
    margin-right: 1em;
    color: var(--text-color);
}
#wp_clients .inner .sec_content .list ul li:before {
    content: '●';
    color: var(--main-color);
    font-size: 50%;
    margin-bottom: 4px;
}
#wp_clients .inner .sec_content .comingsoon {
    width: 100%;
    padding: 80px 0;
}
#wp_clients .inner .sec_content .comingsoon p {
    text-align: center;
    color: #A08546;
    font-size: 200%;
    display: ;
}

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

    #wp_company

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

#wp_company {
}
#wp_company .inner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#wp_company .inner .sec_ttl {
}
#wp_company .inner .sec_content {
    flex: 1;
    padding: 0 0 0 160px;
}
#wp_company .inner .sec_content .list {
}
#wp_company .inner .sec_content .list dl {
    border-bottom: 1px solid var(--main-color);
    padding: 10px 0;
}
#wp_company .inner .sec_content .list dl:first-child {
    border-top: 1px solid var(--main-color);
}
#wp_company .inner .sec_content .list dl dt {
    color: var(--main-color);
    font-size: 80%;
    line-height: 1em;
}
#wp_company .inner .sec_content .list dl dd {
}
#wp_company .inner .sec_content .list dl dd span {
    font-size: 80%;
}

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

    #wp_recruit

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

#wp_recruit {
    display: none;
}
#wp_recruit .inner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#wp_recruit .inner .sec_ttl {
    flex: 1;
    padding: 0 60px 0 0;
}
#wp_recruit .inner .sec_content {
    width: 50%;
}
#wp_recruit .inner .sec_content iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
}

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

    .btn / button

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

.btn a,
#wp_contact button {
    display: inline-block;
    line-height: 1em;
    padding: 1.4em 6em;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: var(--main-color);
    box-shadow: 5px 5px 0px #866c2e;
    transition: .3s;
    font-family: "helvetica-lt-pro", sans-serif;
    font-weight: 700;
    border-radius: 100px;
}

.btn a:hover,
#wp_contact button:hover {
    box-shadow: unset;
    transform: translate(4px,4px);
}


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

    .modal

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

.close-btn {
    position: sticky;
    top: 10px;
    margin-left: auto;
    margin-right: 10px;
    display: block;
    width: fit-content;
    font-size: 1.6rem;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1;
}
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(79,79,79,.8);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}
.modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.modal-content {
    background: #fff;
    width: 80vw;
    max-width: 900px;
    position: relative;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
    padding: 40px;
    border: 10px solid var(--main-color);
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.modal.active .modal-content {
    animation: fadeInScale 0.4s ease forwards;
}
.modal.active .modal-content .modal_inner {
}
.modal.active .modal-content .modal_inner h4 {
    font-size: 150%;
    margin-bottom: 20px;
    color: var(--main-color);
}
.modal.active .modal-content .modal_inner p {
    color: var(--text-color);
}
.modal.active .modal-content .modal_inner img {
    display: block;
    margin: 20px 0;
}
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
body.modal-open {
    overflow: hidden;
    padding-right: var(--sbw, 0px);  /* スクロールバー幅を補填 */
}

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

    .reveal

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

main section .inner .sec_ttl h2 .ch,
main section .inner .sec_ttl h3 .ch {
    display: inline-block;
    font-style: normal;          /* iタグの斜体を打ち消す */
    opacity: 0;
    transform: translateY(.3em) scale(.9);
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: var(--d, 0s);
}
main section .inner .sec_ttl h2.is-visible .ch,
main section .inner .sec_ttl h3.is-visible .ch { opacity: 1; transform: none; }

/* h2の1文字目ゴールド（::first-letterの代替）*/
main section .inner .sec_ttl h2 > .ch:first-child { color: var(--main-color); }

@media (prefers-reduced-motion: reduce) {
    main section .inner .sec_ttl h2 .ch,
    main section .inner .sec_ttl h3 .ch { opacity: 1; transform: none; transition: none; }
}