/*
Theme Name: 株式会社BERRY
Theme URI: https://xxx.com/
Description: This is my original theme.
*/

html {
}

body {
    margin: 0 auto;
     font-family: "Noto Sans JP", sans-serif;
  font-style: normal;
    color: #79482A;
    font-size: 16px;
}

.wrap {
    max-width: 981px;
    width: 100%;
    margin: 0 auto;
}


img {
    max-width: 100%;
}

p {
    line-height: 200%;
    text-align: justify;
}

a {
    text-decoration: none;
    color: #79482A;
    cursor:pointer;
}

a:visited {
    color: #79482A;
}

a:hover {
    opacity: 0.5;
}

.pc-dn {
    display: none;
}

.sp-dn {
    display: block;
}


/*カラム設定*/

section {
    padding: 6em 0;
}


/*タイトル*/

h2{
font-family: 'Shippori Mincho B1',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 180%;
letter-spacing: 0.1em;
color: #79482A;

}
h2 span{
    display: block;
font-family: 'Quicksand',sans-serif;
font-size: 24px;
line-height: 50px;
color: #AE987B;

}
/*リンクボタン設定*/


/*reCHAPTCHA*/

.grecaptcha-badge {
    visibility: hidden;
}

/*============================
mobile style
============================*/

@media screen and (max-width: 978px) {
    .wrap {
        max-width: 100%;
        width: auto;
        margin: 0 auto;
        padding: 0 1em;
    }
    h2,h2 span{
        font-size: 24px;
    }

    section {
        padding: 4em 0;
    }

}


/*----------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------
共通エリア
------------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------
----------------------------------------------------------*/


/* -------------------- */
/* header
/* -------------------- */
#top-head .logo img {
    width: 245px;
    margin: auto;
}

#top-head {
    width: 100%;
    height: 95px;
    display: flex;
    position: fixed;
    z-index: 99999;
}

#top-head .inner {
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6em;
}

#top-head .inner h1 {
    margin: 0;
    padding: 0.5em 0;
    text-align: center;
}


/*nav style*/

#top-head ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#top-head ul li {
    display: flex;
    align-content: center;
}

.gnavi__lists {
    display: flex;
    justify-content: center;
    gap: 1em;
    align-items: center;
}

#top-head.open .dn2{
    display: block;
}
   #top-head.scrollbk  #nav_toggle span,#top-head.open  #nav_toggle span{
     background: #376FC4;
    }
    .is-fixed {
        overflow: hidden;
    }
    #top-head .logo img {
        width: 192px;
        position: relative;
        padding: 0.5em;
    }
    /*hamburger menu style*/
    #nav_toggle {
        position: relative;
    top: 15px;
    right: 20px;
    z-index: 100;
    }
    #nav_toggle div {
        position: relative;
    display: inline-block;
    width: 133px;
    height: 133px;
    border-radius: 50%;
    background: #ffffff19;
    border: 1px solid #79482A;
    text-align: center;
    color: #79482A;
    line-height: 133px;
    }
#nav_toggle div::before {
  content: "menu";
    font-size: 24px;
      font-family: "Quicksand", serif;
    font-weight: 400;
}
.open #nav_toggle div::before {
  content: "close";
      font-size: 24px;
      font-family: "Quicksand", serif;
    font-weight: 400;
}
    /*nav style*/
    #top-head nav {
        display: none;
        position: fixed;
        top: 0;
        padding: 0 5em;
        padding-top: 60px;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(236, 223, 206, 0.85);
        backdrop-filter: blur(12px);
        z-index: 99;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
#top-head nav>div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:6em;
}
#top-head nav>div ul.gnavi__lists,#top-head nav>div a{
    flex: 1;
}
#top-head nav>div a{
    margin-top: -13em;
}
#top-head nav>div a img{
    width: 192px;
}
    #top-head nav ul li a {
        padding: 0.5em 0;
        border-left: none;
        font-family: "Quicksand", serif;
        color: #79482A;
        font-size: 38px;
        text-align: left;
        line-height: 1;
    }
#top-head nav ul li a.studios{
    margin-top: 1rem;
    display: block;
    padding: 0;
}
    #top-head nav ul li a span {
        font-family: "Noto Sans JP", serif;
        font-size: 15px;
}
    #top-head nav ul li a.studios span {
        font-family: "Noto Sans JP", serif;
        font-size: 22px;
        
}
    #top-head nav ul.gnavi__lists {
        display: flex;
        margin: 2em auto;
        padding: 0;
        pointer-events: auto;
        align-items: flex-start;
        gap:3em;
    }
    #top-head nav ul.gnavi__lists li {
        padding: 0 1em;
        padding-bottom: 4em;
        display: block;
    }

/*============================
mobile style
============================*/

@media screen and (max-width:978px) {
    #nav_toggle div{
    position: relative;
    display: inline-block;
    width: 73px;
    height: 73px;
    border-radius: 50%;
    background: #ffffff19;
    border: 1px solid #79482A;
    text-align: center;
    color: #79482A;
    line-height: 73px;

}
    #nav_toggle div::before,.open #nav_toggle div::before{
        font-size: 14px;
    }
    #nav_toggle {
    position: relative;
    top: 10px;
    right: 8px;
    z-index: 100;
}
    #top-head .logo img {
    width: 103px;
    padding-top: 3em;
    }
    #top-head .inner {
    padding-top: 0;
}
    #top-head nav{
    }
    #top-head nav>div ul.gnavi__lists{
        padding-top: 7em;
    }
#top-head nav ul.gnavi__lists,#top-head nav>div {
    display: block;
    }
    #top-head nav {
           padding: 0 1em;
        height: 100%;
        overflow-y: scroll;
    }
    #top-head nav ul li a{
        font-size: 32px;
    }
    #top-head nav ul li a span{
        font-size: 14px;
    }
    #top-head nav ul.gnavi__lists li{
        padding: 0.5em;
            padding-bottom: 3em;
    }
    .top-link{
    display: block;
    margin: 0;
        margin-top: 0!important;
    margin-bottom: 13em;
    text-align: center;
}
    #top-head nav ul.gnavi__lists li.last{
            margin-top: -3.5em;
    }
    #top-head nav ul li a.studios span{
        font-size: 18px;
    }
    }

/* -------------------- */


/* footer
/* -------------------- */

footer{
    background: #FBF2E6;
    padding-top: 2em;
}
section.top-footer{
background: #FFFFFF;
border-radius: 200px 200px 0px 0px;
}
section.top-footer .content{
    display: flex;
    gap:10em;
    align-content: center;
}
section.top-footer .content .logo{
    width: 40%;
}
section.top-footer .content img{
    width: 192px;
}
section.top-footer .content .link{
    display: flex;
    gap:1em 4em;
    flex-wrap: wrap;
}
section.top-footer .content .link a{
font-family: 'Quicksand', sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 30px;
color: #79482A;
}
section.top-footer .content .link .access{
    display: flex;
    flex-direction: column;
}
section.top-footer .content .link .access a.studios{
    font-size: 1rem;
}
/*============================
mobile style
============================*/

@media screen and (max-width: 978px) {
  section.top-footer {
    border-radius: 80px 80px 0px 0px;
}
    section.top-footer .content {
    display: block;
    }
    section.top-footer .content .logo {
    text-align: center;
    display: block;
    margin: 2em auto;
    width: 100%;
}
section.top-footer .content .link {
    display: block;
    margin-top: 4em;
    }
section.top-footer .content .link a {
    display: block;
    text-align: center;
    margin-bottom: 2em;
    }
section.top-footer .content .link .access{
   gap:1rem;
    margin-bottom: 2rem;
}
section.top-footer .content .link .access a{
    margin-bottom: 0;
}
}


/*============================
mobile style
============================*/
.side-contact{
writing-mode: vertical-rl;
    transform: rotate(360deg);
    position: fixed;
    padding: 1em 0.5em;
    padding-left: 0.8em;
    top: 9em;
    right: 0px;
    z-index: 888;
    background: linear-gradient(90deg, #E97DB7 0%, #CF4598 39.5%, #D6196F 100%);
    border-radius: 19px 0px 0px 19px;

}
.side-contact a{
font-family: 'Shippori Mincho B1',serif;;
font-style: normal;
font-weight: 700;
font-size: 21px;
line-height: 130%;
display: flex;
align-items: center;
text-align: center;
letter-spacing: 0.3em;
color: #FFFFFF;
}
.side-contact a img{
    width: 30px;
    margin-bottom: 0.5em;
}
.side-contact a{
    writing-mode: vertical-lr;
}

@media screen and (max-width: 978px) {
    body {
        font-size: 16px;
    }
    .pc-dn {
        display: block;
    }
    .sp-dn {
        display: none;
    }
        .side-contact{
      top: auto;
        width: 100%;
        bottom: 0;
        padding: 1em 0;
        background: linear-gradient(978deg, #E97DB7 0%, #CF4598 39.5%, #D6196F 100%);
        border-radius: 16.5117px 16.5117px 0px 0px;
    }
    .side-contact ,.side-contact a {
      writing-mode: horizontal-tb;
        transform: rotate(0deg);
        margin-top: 0em;
    }
    .side-contact a {
    font-size: 18px;
    line-height: 130%;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.5em;
}
    .side-contact a img{
        width: 22px;
        margin-bottom: 0;
    }
        .kantan{
        color: #fff;
    top: 5px;
        letter-spacing: 0.1em;
    left: 50%;
    text-align: center;
    width: 100%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin: 0 !important;
    padding: 0 !important;
        position: relative;
    display: inline-block;
    text-align: center;
    letter-spacing: 0.1em;
    margin-bottom: 0;
}
    .kantan:before {
position: absolute;
        left: 90px;
        top: 2px;
        content: "";
        width: 1px;
        height: 100%;
        background: #ffffff;
        transform: rotate(-25deg);
}
    .kantan:after {
        position: absolute;
        content: "";
        right: 95px;
        top: 1px;
        width: 1px;
        height: 100%;
        background: #fff;
        border-radius: 3px;
        transform: rotate(25deg);
    }
}