@charset "UTF-8";

html {
    font-size: 100%;
}

body {
    margin: 0px;
    -webkit-text-size-adjust: 100%;
    line-height: 1.7;
    font-size: 16px;
    font-family: "Monotype Corsiva", "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: #12232f;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

p {
    margin: 0;
}

a,
a:link {
    color: #3585b7;
}

a:visited {
    color: #6252B7;
}

a:hover {
    text-decoration: none;
    color: #555;
}

/* header */
header {
    background-color: #12232f;
    display: flex;
    max-height: 100px;
}

header h1 {
    background-color: #12232f;
    line-height: 0;
    margin-bottom: 0;
}

header nav {
    background-color: #12232f;
}

header nav ul {
    list-style-type: none;
    margin: 20px 0 0 0;
    padding: 0;
    display: flex;
    font-size: 2vw;
}

header nav ul li a,
header nav ul li a:link,
header nav ul li a:visited {
    display: block;
    padding: 10px 10px;
    text-decoration: none;
    color: #fff;
}

header nav ul li a:hover {
    color: #888;
}

.page-header {
    display: flex;
    justify-content: space-between;
}

.wrapper {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 4%;
}

#navhome #nav_home a,
#navbluegirls #nav_bluegirls a,
#navaboutme #nav_aboutme a,
#navnews #nav_news a,
#navothers #nav_others a,
#navinstagram #nav_instagram a,
nav ul li a:hover {
    color: #d7e7f5;
}
/* footer */

footer {
    background: #12232f;
    padding: 3vw;
}

footer p {
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: 1.8vw;
}

/* home */
.home-content .page-title-kana {
    text-align: right;
    font-size: 1.8vw;
    margin-top: 7vw;
    margin-right: 0vw;
    position: relative;
    z-index: 6;
}

#home .page-title {
    text-align: right;
    font-size: 10vw;
    margin-top: 3vw;
    margin-right: 0vw;
    line-height: 100%;
}

.introduction {
    text-align: center;
    font-size: 1.3vw;
    margin-bottom: 4vw;
    position: relative;
    z-index: 6;
}

#home {
    background-image: url(../img/yurikomainvisualbig202011.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    background-size: contain;
}

#home .page-title {
    text-transform: none;
    position: relative;
    z-index: 5;
}

.logo {
    position: absolute;
    top: 25%;
    right: 0%;
    z-index: 1;
    max-width: 35%;
}

@media screen and (max-width: 600px) {
    .home-content .page-title-kana {
    text-align: right;
    font-size: 1.8vw;
    margin-top: 7vw;
    margin-right: 0vw;
    position: relative;
    z-index: 6;
}

    #home .page-title {
    text-align: right;
    font-size: 9.5vw;
    margin-top: 3vw;
    margin-right: 0vw;
    line-height: 100%;
}

    .introduction {
    text-align: center;
    font-size: 1vw;
    margin-bottom: 4vw;
    position: relative;
    z-index: 6;
}

    #home {
    background-image: url(../img/yurikomainvisualsmall202011.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    background-size: contain;
}

    #home .page-title {
    text-transform: none;
    position: relative;
    z-index: 5;
}
    .logo {
    position: absolute;
    margin-top: 5vw;
    right: 0%;
    z-index: 1;
    max-width: 35%;
}
}

/*breadcrumb*/
ul.breadcrumb {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    font-size: 1.8vw;
}

ul.breadcrumb li::after {
    content: ">";
    margin: 0 .8vw;
}

ul.breadcrumb li:last-child::after {
    content: none;
}

/* main */
.box {
    max-width: 1200px;
    max-height: 2400px;
    margin: 0 auto;
}

.box1 {
    display: flex;
    flex-wrap: wrap;
    max-height: 600px;
}

.box2 {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1200px;
    max-height: 600px;
}

.box3 {
    display: flex;
    max-width: 1200px;
    max-height: 600px;
}

.box4 {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1200px;
    max-height: 600px;
}

.box_inline-flex {
    display: inline-flex;
}

.menu1 {
    background-color: #d7e7f5;
    background-size: contain;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.menu1 {
    position: relative;
}

.menu1 a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-indent: -9999px;
}

.menu1 a:hover {
    opacity: 0.1;
    background-color: #000000;
}

.menu2 {
    background-color: #d7eef5;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.menu2 {
    position: relative;
}

.menu2 a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-indent: -9999px;
}

.menu2 a:hover {
    opacity: 0.1;
    background-color: #000000;
}

.menu3 {
    background-color: #d7dff5;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
}

.menu3 a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-indent: -9999px;
}

.menu3 a:hover {
    opacity: 0.1;
    background-color: #000000;
}

.menu4 {
    background-color: #d9d7f5;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.menu4 {
    position: relative;
}

.menu4 a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-indent: -9999px;
}

.menu4 a:hover {
    opacity: 0.1;
    background-color: #000000;
}

.pic1 {
    width: 50%;
    position: relative;
}

.pastel {
    position: absolute;
    top: 5%;
    right: 50%;
    width: 48%;
    animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
    0% {
        transform: translateX(0)
    }

    5% {
        transform: translateX(0)
    }

    10% {
        transform: translateX(0)
    }

    20% {
        transform: translateX(-20px)
    }

    25% {
        transform: translateX(0)
    }

    30% {
        transform: translateX(-20px)
    }

    50% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(0)
    }
}

.pic2 {
    width: 50%;
}

.pic3 {
    width: 50%;
    position: relative;
}

.pencil {
    position: absolute;
    top: -20%;
    right: 50%;
    transition: transform 1.5s ease-out;
}

.pencil:hover {
    transform: rotate(360deg);
}

.pic4 {
    width: 50%;
}

h3 {
    text-align: center;
    font-size: 3vw;
    line-height: .1;
    margin-top: 4.4vw;
}

h3.sub {
    text-align: center;
    font-size: 6.5vw;
    line-height: .1;
    margin-top: 1.3vw;
}


/*ysgallery*/
.yschoicegallery-content .yspage-title-kana {
    text-align: right;
    font-size: 1.5vw;
    margin-top: 7vw;
    margin-right: 0vw;
    position: relative;
    z-index: 6;
}

#yschoicegallery .yspage-title {
    text-align: right;
    font-size: 8vw;
    margin-top: 2vw;
    margin-right: 0vw;
    line-height: 100%;
}

.ysintroduction {
    text-align: center;
    font-size: 1.3vw;
    margin-bottom: 4vw;
    position: relative;
    z-index: 6;
}

#yschoicegallery {
    background-image: url(../img/yschoicegallerymainvisualbig.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    background-size: contain;
}

#yschoicegallery .yspage-title {
    text-transform: none;
    position: relative;
    z-index: 5;
}



/*.logo {
    position: absolute;
    top: 25%;
    right: 0%;
    z-index: 1;
    max-width: 35%;
}*/

@media screen and (max-width: 600px) {
    .yschoicegallery-content .yspage-title-kana {
    text-align: right;
    font-size: 1.5vw;
    margin-top: 5vw;
    margin-right: 0vw;
    position: relative;
    z-index: 6;
}

    #yschoicegallery .yspage-title {
    text-align: right;
    font-size: 8vw;
    margin-top: 2vw;
    margin-right: 0vw;
    line-height: 100%;
}

    .ysintroduction {
    text-align: center;
    font-size: 1vw;
    margin-bottom: 4vw;
    position: relative;
    z-index: 6;
}

    #yschoicegallery {
    background-image: url(../img/yschoicegallerymainvisualsmall.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    background-size: contain;
}

    #yschoicegallery .yspage-title {
    text-transform: none;
    position: relative;
    z-index: 5;
}


/*    .logo {
    position: absolute;
    margin-top: 5vw;
    right: 0%;
    z-index: 1;
    max-width: 35%;
}*/
}

/*ysgallerybreadcrumb*/
ul.breadcrumb {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    font-size: 1.8vw;
}

ul.breadcrumb li::after {
    content: ">";
    margin: 0 .8vw;
}

ul.breadcrumb li:last-child::after {
    content: none;
}

/* ysgallerymain */
.box {
    max-width: 1200px;
    max-height: 2400px;
    margin: 0 auto;
}

.box1 {
    display: flex;
    flex-wrap: wrap;
    max-height: 600px;
}

.box2 {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1200px;
    max-height: 600px;
}

.box3 {
    display: flex;
    max-width: 1200px;
    max-height: 600px;
}

.box4 {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1200px;
    max-height: 600px;
}

.box_inline-flex {
    display: inline-flex;
}

.ymenu1 {
    background-color: #fff/*#d7e7f5*/;
    background-size: contain;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.ymenu1 {
    position: relative;
}

.ymenu1 a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-indent: -9999px;
}

/*.menu1 a:hover {
    opacity: 0.1;
    background-color: #000000;
}*/

.ymenu2 {
    background-color: #fff/*#d7eef5*/;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.ymenu2 {
    position: relative;
}

.ymenu2 a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-indent: -9999px;
}

/*.menu2 a:hover {
    opacity: 0.1;
    background-color: #000000;
}*/

.ymenu3 {
    background-color: #fff/*#d7dff5*/;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
}

.ymenu3 a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-indent: -9999px;
}

/*.menu3 a:hover {
    opacity: 0.1;
    background-color: #000000;
}*/

.ymenu4 {
    background-color: #fff/*#d9d7f5*/;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.ymenu4 {
    position: relative;
}

.ymenu4 a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-indent: -9999px;
}

/*.menu4 a:hover {
    opacity: 0.1;
    background-color: #000000;
}*/

.pic1 {
    width: 50%;
    position: relative;
}

.pinkpastel {
/*    position: absolute;*/
/*    top: 15%;
    right: 50%;
    width: 65%;*/
    animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
    0% {
        transform: translateX(0)
    }

    5% {
        transform: translateX(0)
    }

    10% {
        transform: translateX(0)
    }

    20% {
        transform: translateX(-20px)
    }

    25% {
        transform: translateX(0)
    }

    30% {
        transform: translateX(-20px)
    }

    50% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(0)
    }
}

.pic2 {
    width: 50%;
}

.pic3 {
    width: 50%;
    position: relative;
}

/*.pencil {
    position: absolute;
    top: -20%;
    right: 50%;
    transition: transform 1.5s ease-out;
}

.pencil:hover {
    transform: rotate(360deg);
}*/

.pic4 {
    width: 50%;
}

.ys/*.h3*/ {
    text-align: center;
    font-size:2vw;
    line-height: .1;
    margin-top: 4.4vw;
}

/*h3*/.yssub {
    text-align: center;
    font-size: 2vw;
    line-height: .1;
    margin-top: 1.3vw;
    margin-bottom: 3vw;
}
    
.contents {
    text-align: center;
    font-size: 1.2vw;
}

/*ysgalleryのpinkpastelアイコン*/
.pinkpastel {
    margin-top: 3vw;
    margin-bottom: 3vw;
    text-align: center;
}

#pinkpast {
    margin-bottom: 0.1em;
    padding-bottom: 0;
    width: 15%;
    margin-left: auto;
    margin-right: auto;
}

#pinkpastel {
    line-height: .8;
    margin-top: 0;
    margin-bottom: 3vw;
    font-size: 3vw;
}


/*bluegirlsページ中身*/
.bluegirlsbox {
    max-width: 1200px;
    max-height: 600px;
    margin: 0 auto 2vw auto;
}

.box5 {
    display: flex;
    flex-wrap: wrap;
    max-height: 600px;
    flex-direction: row;
}

.menubluegirls {
    background-color: #d7e7f5;
    width: 50%;
    display: flex;
    text-align: left;
    position: relative;
}

.pic5 {
    width: 50%;
}


@media screen and (max-width: 600px) {

    .logo {
    position: absolute;
    top: 13%;
    right: 5%;
    z-index: 1;
    max-width: 35%;
}
    
    /*縦のメニュー*/
    .bluegirlsbox {
        max-width: 600px;
        max-height: 1200px;
        margin: 0;
        width: 100%;
        align-items: center;
        overflow: hidden;
    }

    .box5 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        max-height: 1200px;
    }

    .pic5 {
        width: 100%;
    }

    .menubluegirls {
        width: 100%;
        text-align: left;
        background-color: #d7e7f5;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        width: calc(100vmin);
        height: calc(100vmin);
    }
}

/*aboutmeページ中身*/
.aboutmebox {
    max-width: 1200px;
    max-height: 600px;
    margin: 0 auto 2vw auto;
}

.box6 {
    display: flex;
    flex-wrap: wrap;
    max-height: 600px;
    flex-direction: row;
}

.menuaboutme {
    background-color: #fff;
    width: 50%;
    display: flex;
    text-align: left;
    position: relative;
}

.pic6 {
    width: 50%;
}

@media screen and (max-width: 600px) {
    /*縦のメニュー*/
    .aboutmebox {
        max-width: 600px;
        max-height: 1200px;
        margin: 0;
        width: 100%;
        align-items: center;
        overflow: hidden;
    }

    .box6 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        max-height: 1200px;
    }

    .pic6 {
        width: 100%;
    }

    .menuaboutme {
        width: 100%;
        text-align: left;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        width: calc(100vmin);
        height: calc(100vmin);
    }
}

/*newsページ中身*/
.newsbox {
    max-width: 1200px;
    max-height: 600px;
    margin: 0 auto 0.5vw auto;
}

.box7 {
    display: flex;
    flex-wrap: wrap;
    max-height: 600px;
    flex-direction: row;
}

.menunews {
    background-color: #fff;
    width: 50%;
    display: flex;
    text-align: left;
    position: relative;
}

.pic7 {
    width: 50%;
}

/*SNS*/
#sns {
    background: #fff;
    padding: 0 0 4% 0;
    margin-top: 0;
}
#sns .wrapper {
    display: flex;
    justify-content: space-between;
}
#sns .sub-title {
    margin-bottom: 1vw;
}
.sns-box {
    width: 100%;
}

@media screen and (max-width: 600px) {
    /*縦のメニュー*/
    .newsbox {
        max-width: 600px;
        max-height: 1200px;
        margin: 0;
        width: 100%;
        align-items: center;
        overflow: hidden;
    }

    .box7 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        max-height: 1200px;
    }

    .pic7 {
        width: 100%;
    }

    .menunews {
        width: 100%;
        text-align: left;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        width: calc(100vmin);
        height: calc(100vmin);
    }
/*SNS600以下*/
/*    #sns {
        padding: 4% 0;
    }*/
    #sns .wrapper {
        display: flex;
        flex-direction: column;
/*        justify-content: space-between;*/
    }
    .sns-box {
        width: 100%;
    }

}

/*othersページ中身*/
.othersbox {
    max-width: 1200px;
    max-height: 600px;
    margin: 0 auto 2vw auto;
}

.box8 {
    display: flex;
    flex-wrap: wrap;
    max-height: 600px;
    flex-direction: row;
}

.menuothers {
    background-color: #d9d7f5;
    width: 50%;
    display: flex;
    text-align: left;
    position: relative;
}

.pic8 {
    width: 50%;
}

h2.engtitle {
    font-size: 3.5vw;
    margin: 1vw 0 0 3vw;
}

h3.jpntitle {
    position: absolute;
    font-size: 1.6vw;
    text-align: left;
    margin: 9vw 0 0 3vw;
}

h4.subtitle {
    position: absolute;
    top: 22%;
    text-align: left;
    font-size: 2.5vw;
    line-height: .1;
    text-align: left;
    margin: 2vw 0 0 3vw;
}

h5.subjecttitle {
    position: absolute;
    top: 29%;
    text-align: left;
    font-size: 1.5vw;
    line-height: .1;
    margin: 3vw 0 0 3vw;
}

h5.detailtitle {
    position: absolute;
    top: 65%;
    text-align: left;
    font-size: 1.5vw;
    line-height: .1;
    margin: 3vw 3vw 0 3vw;
}

#subject {
    position: absolute;
    top: 36%;
    font-size: 1.1vw;
    margin-top: .5vw;
    margin-left: 3vw;
}

#detail {
    position: absolute;
    top: 72%;
    font-size: 1.1vw;
    margin-left: 3vw;
}

ul.breadcrumb {
    font-size: 2vw;
    margin-left: 3%;
    }

@media screen and (max-width: 600px) {
        header nav ul li a {
        font-family: "Myriad Pro",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 2.5vw;
    }

    header {
    background-color: #12232f;
    display: flex;
    max-height: 100px;
    align-items: center;
}

    header h1 {
    background-color: #12232f;
    line-height: 0;
    margin-bottom: 0;
    margin-top: 2vw;
    width: 40%;
}

    header nav {
    background-color: #12232f;
}

    header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

    header nav ul li a,
    header nav ul li a:link,
    header nav ul li a:visited {
    display: block;
    padding: 1vw 3vw;
    text-decoration: none;
    color: #fff;
}

    header nav ul li a:hover {
    color: #888;
}

    .page-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .wrapper {
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 4%;
}

    ul.breadcrumb {
        font-family: "Myriad Pro", sans-serif;
        font-size: 4vw;
        margin-left: 5%;
    }

    /*縦のメニュー*/
    .othersbox {
        max-width: 600px;
        max-height: 1200px;
        margin: 0;
        width: 100%;
        align-items: center;
        overflow: hidden;
    }

    .box8 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        max-height: 1200px;
    }

    .pic8 {
        width: 100%;
    }

    .menuothers {
        width: 100%;
        text-align: left;
        background-color: #d9d7f5;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        width: calc(100vmin);
        height: calc(100vmin);
    }

    h2.engtitle {
        font-size: 7vw;
        margin-top: 2vw;
    }

    h3.jpntitle {
        position: absolute;
        text-align: left;
        font-size: 3vw;
        top: 8%;
    }

    h4.subtitle {
        position: absolute;
        text-align: left;
        font-size: 5vw;
        top: 20%;
    }

    h5.subjecttitle {
        position: absolute;
        text-align: left;
        font-size: 4vw;
        top: 28%;
    }

    h5.detailtitle {
        position: absolute;
        text-align: left;
        font-size: 4vw;
        top: 65%;
    }

    #subject {
        position: absolute;
        top: 31%;
        font-size: 2.5vw;
        margin-left: 1.5vw;
    }

    #detail {
        position: absolute;
        top: 68%;
        font-size: 2.8vw;
        margin-left: 1.5vw;
    }
}

/*homeのinstagramアイコン*/
.instagram {
    margin-top: 3vw;
    margin-bottom: 3vw;
    text-align: center;
}

#insta {
    margin-bottom: 0.1em;
    padding-bottom: 0;
    width: 8%;
    margin-left: auto;
    margin-right: auto;
}

#instagram {
    line-height: .8;
    margin-top: 0;
    margin-bottom: 3vw;
    font-size: 3vw;
}

/* Instagramページ中身 */

#main {
    margin-left: 5vw;
}

#main h4 {
    margin: 1.8vw 0 1.5vw 0;
    font-size: 2.5vw;
    border-bottom: double;
    text-align: left;
}

.message {
    font-size: 1.5vw;
    margin-bottom: 0;
}

.message2 li {
    font-size: 1.5vw;
    margin-bottom: 1vw;
}

.message2 li:last-child {
    margin-bottom: 5vw;
}