@charset "utf-8";

/* CSS Document */
body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: #333;
    font-family: "Zen Kaku Gothic New", sans-serif;
    letter-spacing: .1em;
    overflow-x: hidden;
    font-weight: 500;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* fonts */
/*
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 300, 400, 500, 700, 900;
font-style: normal;
*/


/* GSAP */
.mv__copy,
.mv__inner img,
.fade-in,
.fade,
.fade-in-st {
    opacity: 0;
}


/*================================
common
================================*/
/* --------------
text style
-------------- */
p {
    font-size: 16px;
    line-height: 1.8em;
}

/* --------------
main-heading
-------------- */
.main-heading {
    position: relative;
    padding-bottom: 0.8em;
    font-size: 24px;
    text-align: center;
}

.main-heading::before {
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 2em;
    height: 6px;
    background: #f14b94;
    background: linear-gradient(45deg, rgba(241, 75, 148, 1) 46%, rgba(238, 161, 189, 1) 100%);
}

/* --------------
background color
-------------- */
.bg--gray {
    background-color: #eff2f9;
}

.bg--gradation {
    background: url(../images/bg_gradation.svg) center / cover no-repeat;
    color: #fff;
}


/*================================
header
================================*/
#header__nav {
    position: fixed;
    z-index: 999;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    transition: 0.5s ease-out;
    background-color: #ffffffbb;
    backdrop-filter: blur(12px);
    opacity: 0;
}

#header__nav.panelactive {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    width: 60%;
    height: 100vh;
    transition: 0.5s ease-out;
    background-color: #ffffffbb;
    backdrop-filter: blur(12px);
    opacity: 1;
}

#header__nav-content {
    display: none;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#header__nav.panelactive #header__nav-content {
    display: block;
    padding: 80px 0;
}

div.header__nav-content-in {
    width: 70%;
    margin: 0 auto;
}

div.header__nav-content-in>*+* {
    margin-top: 32px !important;
}

#header__nav.panelactive div.header__nav-content-in {
    animation-name: gnaviAnime;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes gnaviAnime {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* --------------
header__logo
-------------- */
a.header__logo {
    position: fixed;
    top: 24px;
    left: 24px;
    display: block;
    width: 150px;
    transition: 0.3s;
    z-index: 999;
}

a.header__logo img {
    display: block;
    width: 100%;
}

a.header__logo:hover {
    opacity: 0.7;
}

/* --------------
header__nav-list
-------------- */
ul.header__nav-list li a {
    display: block;
    padding: 1.2em 0;
    border-bottom: 1px solid #cccccc;
    font-weight: 600;
    font-size: 17px;
    color: #333;
    transition: 0.3s;
}

ul.header__nav-list li a:hover {
    color: #f14b94;
}

a.header__nav-cv {
    display: block;
    padding: 1.2em 2em;
    background: url(../images/bg_gradation.svg) center / cover no-repeat;
    border-radius: 100px;
    text-align: center;
    font-size: 17px;
    color: #fff;
    transition: 0.3s;
}

a.header__nav-cv:hover {
    opacity: 0.7;
    transform: scale(0.95);
}



/* --------------
header__hamburger
-------------- */
.header__hamburger {
    position: fixed;
    z-index: 9999;
    top: 20px;
    right: 20px;
    width: 80px;
    height: 60px;
    padding-left: 32px;
    border-radius: 100px;
    background: url(../images/bg_gradation.svg) center / cover no-repeat;
    cursor: pointer;
}

.header__hamburger span {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 2px;
    width: 50%;
    background-color: #fff;
    transition: 0.5s ease-out;
}

.header__hamburger span:nth-of-type(1) {
    top: 20px;
}

.header__hamburger span:nth-of-type(2) {
    top: 30px;
    width: 50%;
}

.header__hamburger span:nth-of-type(3) {
    top: 40px;
}

.header__hamburger.active {
    background-color: #00b9b2;
}

.header__hamburger.active span:nth-of-type(1) {
    top: 23px;
    left: 0;
    transform: translateY(6px) rotate(-30deg);
    width: 50%;
}

.header__hamburger.active span:nth-of-type(2) {
    opacity: 0;
}

.header__hamburger.active span:nth-of-type(3) {
    top: 35px;
    left: 0;
    transform: translateY(-6px) rotate(30deg);
    width: 50%;
}


/*================================
mv
================================*/
#mv {
    padding-top: 100px;
}

div.mv__inner {
    position: relative;
    width: 95vw;
    aspect-ratio: 4/3;
    margin: 0 auto;
    background: url(../images/bg_mv.svg) center / cover no-repeat;
    border-radius: 20px;
    color: #fff;
}

div.mv__inner h1 {
    position: absolute;
    top: 8vw;
    left: 6vw;
    display: block;
    font-size: 4vw;
    font-weight: 900;
}

div.mv__inner video {
    position: absolute;
    bottom: 10vw;
    right: 10vw;
    display: block;
    width: 55vw;
    aspect-ratio: 16/9;
    z-index: 2;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

img.mv_video-left,
img.mv_video-right {
    display: block;
    width: 32vw;
    position: absolute;
    z-index: 1;
    -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.1));
}

img.mv_video-left {
    bottom: 23vw;
    right: 42vw;
}

img.mv_video-right {
    bottom: 5vw;
    right: 5vw;
}


/*================================
situation
================================*/
#situation {
    width: 100%;
    padding-top: 80px;
}

div.situation__inner {
    position: relative;
    width: 100%;
}

div.situation__headeing {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    width: 90%;
    padding: 60px 60px 18vw 6vw;
    border-radius: 0 20px 20px 0;
}

div.situation__headeing-inner {
    width: 65%;
}

div.situation__headeing-inner>*+* {
    margin-top: 30px;
}

div.situation__headeing-inner h2 {
    font-size: 24px;
    line-height: 1.6em;
}

div.situation__headeing-inner h2 br {
    display: none;
}

div.situation__headeing-inner p {
    font-size: 17px;
    line-height: 2em;
}

img.situation__logo {
    display: block;
    width: 25%;
}

div.situation__item {
    width: 90%;
    display: flex;
    gap: 2vw;
    margin: -12vw auto 0;
}

div.situation__item img {
    display: block;
    width: 32%;
}


/*================================
merit
================================*/
#merit {
    width: 100%;
    padding-top: 80px;
}

div.merit__inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

picture.merit-figure {
    display: block;
    width: 90%;
    margin: 40px auto 0;
}


/*================================
examples
================================*/
#examples {
    width: 100%;
    padding-top: 80px;
}

div.examples__inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

div.examples__inner>*+* {
    margin-top: 60px;
}

div.examples__content {
    text-align: center;
}

div.examples__content>*+* {
    margin-top: 40px;
}

div.examples__content h3 {
    font-size: 24px;
    color: #f14b94;
    font-weight: 600;
}

div.examples__content h3 br {
    display: none;
}

span.client-name {
    font-size: 14px;
    font-weight: 900;
}

div.examples__item {
    width: 100%;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
}

div.examples-before {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    background: #E0DEEF;
    background: radial-gradient(circle, rgba(224, 222, 239, 1) 0%, rgba(255, 255, 255, 1) 50%);
    padding: 5vw;
}

div.examples-before::before {
    position: absolute;
    right: -4.5vw;
    width: 4.5vw;
    height: 100%;
    background-color: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
}

div.examples-before img {
    display: block;
    width: 100%;
}

div.examples-after {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 2;
    padding: 5vw 5vw 5vw 8vw;
}

div.examples-after-inner {
    width: 100%;
}

div.examples-after-inner img {
    display: block;
    width: 15%;
    margin: 0 auto;
}

div.examples-after-inner iframe {
    display: block;
    width: 95%;
    aspect-ratio: 16/9;
    margin: 40px auto 0;
    border-radius: 10px;
    border: 5px solid #fff;
}


/*================================
case-study
================================*/
#case-study {
    width: 100%;
    padding: 80px 0;
}

div.case-study__inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

div.case-study__inner h2 {
    font-size: 30px;
    text-align: center;
    font-weight: 600;
}

div.case-study__inner h2 span {
    font-size: 20px;
    color: #f14b94;
}


/* --------------
case-study__links
-------------- */
div.case-study__links {
    width: 100%;
    margin: 40px auto 0;
    display: flex;
    justify-content: center;
}

div.case-study__links a {
    position: relative;
    width: 30%;
    padding-bottom: 30px;
    text-align: center;
    font-weight: 600;
    transition: 0.3s;
}

div.case-study__links a:nth-child(2) {
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}

div.case-study__links a::before {
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 20px;
    height: 15px;
    background: url(../images/arrow_pink.svg) center / contain no-repeat;
    transition: 0.3s;
}

div.case-study__links a:hover {
    opacity: 0.7;
}

div.case-study__links a:hover::before {
    transform: translateY(5px);
}

/* --------------
case-study__content
-------------- */
div.case-study__content {
    width: 100%;
    padding-top: 80px;
}

div.case-study__content>*+* {
    margin-top: 24px;
}

/* case-heading */
div.case-heading {
    position: relative;
    padding-left: 2em;
}

div.case-heading::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 5px;
    height: 100%;
    background: #f14b94;
    background: linear-gradient(45deg, rgba(241, 75, 148, 1) 46%, rgba(238, 161, 189, 1) 100%);
}

div.case-heading>*+* {
    margin-top: 1em;
}

div.case-heading h3 {
    font-size: 24px;
}


/* case-study__item */
div.case-study__item {
    display: flex;
    align-items: center;
    gap: 3vw;
    width: 100%;
    padding: 32px;
    background-color: #fff;
    border-radius: 20px;
}

div.case-study__item-heading {
    /* flex: 2; */
    width: 40%;
}

div.case-study__item-heading>*+* {
    margin-top: 16px;
}

span.heading--case {
    position: relative;
    padding-left: 1.5em;
    font-size: 14px;
    font-weight: 600;
    color: #f14b94;
}

span.heading--case::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 0.6em;
    height: 0.6em;
    background: #f14b94;
    background: linear-gradient(45deg, rgba(241, 75, 148, 1) 46%, rgba(238, 161, 189, 1) 100%);
}

div.case-study__item-heading h4 {
    font-size: 20px;
    margin-bottom: 30px;
}

span.client-name {
    font-size: 14px;
    font-weight: 600;
}

div.case-study__item-heading p {
    padding-top: 20px;
    border-top: 1px solid #cccccc;
}

div.case-study__item iframe {
    /* flex: 3; */
    width: 60%;
    aspect-ratio: 16/9;
    border-radius: 10px;
    border: 2px solid #cccccc;
}


/*================================
cv
================================*/
section.cv {
    width: 100%;
    padding: 60px 0;
    text-align: center;
}

div.cv__inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

div.cv__inner>*+* {
    margin-top: 36px;
}

div.cv__inner h2 {
    font-size: 30px;
}

div.cv__inner p {
    font-size: 16px;
    line-height: 2.2em;
}

a.btn--cv {
    position: relative;
    display: inline-block;
    padding: 1.2em 3.2em 1.2em 3em;
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 100px;
    font-weight: 600;
    font-size: 17px;
    transition: 0.3s;
}

a.btn--cv::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    right: 1.5em;
    margin: auto;
    width: 0.5em;
    height: 1em;
    background: url(../images/arrow_black.svg) center / contain no-repeat;
    transition: 0.3s;
}

a.btn--cv:hover {
    border: 2px solid #f14b94;
    background-color: #eff2f9;
    transform: scale(0.98);
}


/*================================
whats
================================*/
#whats {
    width: 100%;
    padding-top: 80px;
}

div.whats__inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

div.whats__inner>*+* {
    margin-top: 20px;
}

div.whats__inner h2 {
    margin-bottom: 40px;
}

/* whats__item */
div.whats__item {
    display: flex;
    align-items: center;
    gap: 5vw;
    width: 100%;
    padding: 32px;
    background-color: #eff2f9;
    border-radius: 20px;
}

div.whats__item-heading {
    flex: 2;
}

div.whats__item-heading>*+* {
    margin-top: 20px;
}

div.whats__item-heading h3 {
    font-size: 20px;
}

div.whats__item-heading p {
    padding-top: 20px;
    border-top: 1px solid #cccccc;
}

div.whats__item-img {
    flex: 3;
}

div.whats__item-img img {
    display: block;
    width: 100%;
}


/*================================
support
================================*/
#support {
    width: 100%;
    padding-top: 80px;
}

div.support__inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

div.support__content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.2vw;
    margin-top: 40px;
}

div.support__item {
    display: flex;
    gap: 1em;
    width: 47.5%;
    padding-right: 1em;
    box-sizing: border-box;
    background-color: #eff2f9;
    border-radius: 10px;
    overflow: hidden;
}

div.support__item-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: #485496;
}

div.support__item-icon img {
    display: block;
    width: 60px;
}

div.support__item-text {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.support__item-text p {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5em;
}


/*================================
case
================================*/
#case {
    width: 100%;
    padding: 80px 0;
}

div.case__inner {
    position: relative;
    width: 70%;
    margin: 0 auto;
}

div.case__content {
    display: flex;
    flex-wrap: wrap;
    gap: 2.2vw;
    margin-top: 60px;
}

div.case__content-inner {
    width: 47.5%;
}

div.case__content div img {
    display: block;
    width: 100%;
}


/*================================
price
================================*/
#price {
    width: 100%;
    padding: 60px 0 80px;
}

div.price__inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

div.price__inner img {
    display: block;
    width: 100%;
    margin: 40px auto 0;
}


/*================================
campaign
================================*/
#campaign {
    width: 100%;
    padding: 60px 0;
}

div.campaign__inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

div.campaign__inner>*+* {
    margin-top: 30px;
}

div.campaign__inner h2 {
    font-size: 30px;
    font-weight: 600;
}

div.campaign__inner h3 {
    font-size: 24px;
    font-weight: 600;
}

div.campaign__inner img {
    display: block;
    width: 70%;
    margin: 30px auto 0;
}

span.campaign-kome {
    display: block;
    font-size: 13px;
    text-align: center;
}

div.campaign__inner a.btn--cv {
    width: 300px;
}


/*================================
faq
================================*/
#faq {
    width: 100%;
    padding: 80px 0;
}

div.faq__inner {
    position: relative;
    width: 85%;
    margin: 0 auto;
}

div.faq__content {
    width: 100%;
    margin: 60px auto 0;
}

details.details--faq {
    border-bottom: 1px solid #cccccc;
}

details.details--faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 30px 30px 30px 0;
    cursor: pointer;
}

details.details--faq summary::-webkit-details-marker {
    display: none;
}

details.details--faq summary::before,
details.details--faq summary::after {
    width: 2px;
    height: 16px;
    border-radius: 5px;
    background-color: #f14b94;
    content: '';
}

details.details--faq summary::before {
    position: absolute;
    right: 30px;
    rotate: 90deg;
}

details.details--faq summary::after {
    transition: rotate .3s;
}

details.details--faq[open] summary::after {
    rotate: 90deg;
}


details.details--faq summary h3 {
    position: relative;
    padding: 0 30px 0 46px;
    font-size: 16px;
    font-weight: 600;
}

details.details--faq summary h3::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    background: url(../images/icon_q.svg) center / contain no-repeat;
}

details.details--faq p {
    position: relative;
    padding: 30px 30px 30px 45px;
    font-size: 15px;
    font-weight: 500;
}

details.details--faq p::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    background: url(../images/icon_a.svg) center / contain no-repeat;
}


/*================================
footer
================================*/
footer {
    width: 100%;
    padding: 60px 0 30px;
}

div.footer__inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

div.footer__content {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* div.company {
    flex: 1;
}

div.company:nth-child(1) {
    display: flex;
    justify-content: flex-end;
}

div.company:nth-child(2) {
    border-left: 1px solid #cccccc;
} */

div.company-inner {
    display: inline-block;
    padding: 0 60px;
    text-align: center;
}

div.company-inner>*+* {
    margin-top: 30px;
}

div.company-inner img.logo--aid {
    display: block;
    width: 15vw;
    margin: 0 auto;
}

div.company-inner img.logo--daisan {
    display: block;
    width: 28vw;
    margin: 0 auto;
}

div.company-inner img:hover {
    opacity: 0.7;
}

span.copyright {
    display: block;
    margin-top: 80px;
    font-size: 12px;
    color: #cccccc;
    text-align: center;
}


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

sub page

==============================================*/
/*================================
common
================================*/
/* --------------
sub-header
-------------- */
#sub-header {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 160px 0 0;
}

div.sub-header__inner {
    position: relative;
    z-index: 2;
}

div.sub-header__inner div.section-header {
    width: 90%;
    margin: 0 auto;
}

/* --------------
subpage common
-------------- */
section.subpage {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 80px 0;
}

div.subpage__inner {
    position: relative;
    width: 90%;
    margin: 0 auto;
    z-index: 1;
}

/*================================
inquiry
================================*/
div.inquiry__inner>*+* {
    margin-top: 32px;
}

div.inquiry__content {
    padding-bottom: 32px;
    border-bottom: 1px solid #DDDFE5;
}

div.inquiry__content>*+* {
    margin-top: 20px;
}

div.inquiry__list {
    width: 90%;
    margin: 0 auto;
}

div.inquiry__list>*+* {
    margin-top: 32px;
}

p.inquiry__header {
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 14px;
}

/* --------------
必須
-------------- */
p.inquiry__header span {
    margin-right: 10px;
    padding: 0.2em 0.8em;
    border-radius: 100px;
    font-size: 10px;
    color: #666666;
    border: 1px solid #DDDFE5;
}

/* --------------
error
-------------- */
span.error-disp {
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    color: #ca2800;
    font-weight: 600;
}


/* --------------
radio & select
-------------- */
div.inquiry__radio {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1vw;
}

label.inquiry__radio-item,
select {
    display: block;
    width: 48.5%;
    padding: 1.5em;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #DDDFE5;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    transition: .3s;
    cursor: pointer;
}

label.inquiry__radio-item:hover {
    background-color: #EFF2F9;
}

/* アンケート　その他 */
div.inquiry__others{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1vw;
}

label.inquiry__radio-item--others{
    width: 160px;
}

label.inquiry__text--others {
    display: block;
    width: 100%;
}


/* --------------
input & textarea
-------------- */
label.inquiry__input input,
textarea {
    display: block;
    width: 100%;
    padding: 1.5em;
    border-radius: 5px;
    font-size: 12px;
    background-color: #EFF2F9;
    color: #333;
    border: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

textarea.inquiry__textarea {
    height: 200px;
    margin-top: 10px;
    padding: 1em;
}


/* --------------
privacy-check
-------------- */
label.privacy-check {
    display: block;
    width: 100%;
    border: 1px solid #DDDFE5;
    padding: 32px 20px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

a.privacy-check__link {
    color: #333;
    text-decoration: underline;
}

label.privacy-check:hover {
    background-color: #DDDFE5;
}

label.privacy-check span.error-disp {
    margin: 1em auto 0;
    text-align: center;
}

/* --------------
confirm
-------------- */
p.inquiry__input-content {
    display: block;
    width: 100%;
    padding: 0 1em 1em;
    font-size: 12px;
    border-bottom: 1px solid #DDDFE5;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
}

/* --------------
btn--inquiry
-------------- */
input.btn--inquiry,
a.btn--inquiry {
    display: block;
    width: 100%;
    padding: 32px 20px;
    border-radius: 10px;
    background: url(../images/bg_gradation.svg) center / cover no-repeat;
    color: #fff;
    font-size: 16px;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: .3s;
    border: none !important;
}

input.btn--inquiry:hover,
a.btn--inquiry:hover {
    opacity: 0.7;
}


/* back */
.btn--inquiry-back {
    display: block;
    width: 200px;
    margin: 32px auto 0;
    padding: 1em;
    border-radius: 10px;
    border: 1px solid #666666;
    text-align: center;
    font-size: 14px;
    color: #333 !important;
    transition: 0.3s;
    cursor: pointer;
}

.btn--inquiry-back:hover {
    background-color: #eff2f9;
}