@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&display=swap');

/***************************************************************************************************
	reset
****************************************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

ol, ul {
    list-style: none;
}

html,
body {
    overflow-x: hidden !important;
}

body {
    line-height: 1;
    text-align: left !important;
}

* {
    margin: 0;
    padding: 0;
}

/***************************************************************************************************
	common
****************************************************************************************************/
/*　PC／SP切替
---------------------------------------------------------------------------------------------------*/
.sp {
    display: none;
}

/*　wrapper
---------------------------------------------------------------------------------------------------*/
.wrapper img {
    width: 100%;
}

/*　SP表示時
====================================================================================================*/
@media only screen and (max-width: 640px) {
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    /*　header logo
---------------------------------------------------------------------------------------------------*/
    .brandSiteHeader {
        margin-bottom: 0 !important;
    }

    .brandSiteHeader .logo {
        margin-top: 0 !important;
    }
}

/***************************************************************************************************
	contents
****************************************************************************************************/
.contents {
    position: relative;
    margin: 0 auto;
}

.contents * {
    font-family: 'Noto Sans JP', "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    font-feature-settings: "palt";
}

.contents a img {
    transition: all ease 0.3s;
}

.contents a img:hover {
    opacity: 0.6;
}

/* メインビジュアル
---------------------------------------------------------------------------------------------------*/
.contents .mv_area {
    position: relative;
    z-index: 1;
    padding: 0 20px;
    text-align: center;
    background: url(../img/mv_bg.png) no-repeat top center;
    background-size: 100% auto;
}

.contents .mv_area .mv {
    position: relative;
    max-width: 1124px;
    margin: 0 auto;
    padding-top: 50px;
}

.mv-notes-list {
    display: table;
    margin: -260px auto 40px;
    z-index: 10;
    text-align: left;
}

.mv-notes-list li {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
}

.mv-name {
    display: inline-block;
    width: 7em;
}

.mv-iyakuhin {
    font-size: 15px;
    border: #000 solid 1px;
    padding: 0 0.25em;
}

/* sec
---------------------------------------------------------------------------------------------------*/
.sec {
    position: relative;
    text-align: center;
}

/* about
---------------------------------------------------------------------------------------------------*/
.about-wrapper {
    z-index: 10;
    padding: 0 20px;
}

.about-ttl {
    max-width: 368px;
    margin: 0 auto;
}

.about-lead {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 25px;
    line-height: 1.67;
}

.about-fig {
    max-width: 1000px;
    margin: 0 auto;
}

/* type
---------------------------------------------------------------------------------------------------*/
.type-wrapper {
    margin-top: 30px;
}

.type-ttl {
    font-size: 38px;
    line-height: 1.18;
    color: #433768;
    margin-bottom: 10px;
    font-weight: 500;
    padding: 0 20px;
}

.type-subttl {
    max-width: 465px;
    margin: 0 auto;
}

.type-wrapper .mogukokko {
    margin: 0 0 8px;
    background: url(../img/bg_mogukokko.png) repeat top left;
}

.type-wrapper .irakokkko {
    margin: 0 0 8px;
    background: url(../img/bg_irakokkko.png) repeat top left;
}

.type-wrapper .punyokokko {
    margin: 0 0 8px;
    background: url(../img/bg_punyokokko.png) repeat top left;
}

.type-wrapper .inner {
    /* max-width: 1000px; */
    max-width: 1168px;
    margin: 0 auto;
    position: relative;
}

.type-wrapper .inner .toggle-btn {
    max-width: 1000px;
    margin: 0 auto;
    cursor: pointer;
}

.type-wrapper .inner .toggle-btn .open {
    display: none;
}

.type-wrapper .inner.active .toggle-btn .close {
    display: none;
}

.type-wrapper .inner.active .toggle-btn .pc.open {
    display: block;
}

.type-wrapper .inner.active .toggle-btn .sp.open {
    display: none;
}

.toggle-content {
    display: none;
    padding-bottom: 15px;
    position: relative;
}

.toggle-content-ttl {
    width: 756px;
    /* margin-left: 230px; */
    margin-left: 314px;
    position: relative;
    z-index: 100;
}

.toggle-content-txt {
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    line-height: 1.46;
    text-align: left;
    /* margin: 10px 0 0 330px; */
    margin: 10px 0 0 414px;
    letter-spacing: -0.025em;
    position: relative;
    z-index: 100;
}

.toggle-content-btn {
    margin: -64px auto 0;
    width: 900px;
    position: relative;
    z-index: 100;
}

.mogukokko .toggle-content-icon {
    position: absolute;
    bottom: 0;
    /* left: -75px; */
    left: 9px;
    width: 406px;
    display: none;
    z-index: 1;
}

.irakokkko .toggle-content-icon {
  position: absolute;
  bottom: 0;
  /* left: -65px; */
  left: 19px;
  width: 384px;
  display: none;
  z-index: 1;
}

.punyokokko .toggle-content-icon {
  position: absolute;
  bottom: 0;
  /* left: -84px; */
  left: 0;
  width: 446px;
  display: none;
  z-index: 1;
}

.inner.active .toggle-content-icon {
    display: block;
}

/* check
---------------------------------------------------------------------------------------------------*/
.check-wrapper {
    background: url(../img/check_bg.png) no-repeat top center;
    background-size: cover;
}

#mainContents {
    padding: 60px 20px 75px;
}

.check-ttl {
    font-size: 38px;
    font-weight: 500;
    color: #433768;
}

.check-subttl {
    max-width: 913px;
    margin: 0 auto;
}

.check-inner {
    max-width: 1000px;
    margin: 10px auto 0;
}

#matching {
    padding-top: 0 !important;
}

.matching-count {
    margin-bottom: 0 !important;
}

.movie-wrapper {
    background: #bdc8e6;
    display: flex;
    justify-content: space-between;
    margin-top: 75px;
}

.movie-subttl {
    width: 194px;
    padding: 50px 0 0 50px;
}

.movie-box {
    width: 700px;
    margin: 10px;
}

.movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

/* amazon & top link
---------------------------------------------------------------------------------------------------*/
.amazon-wrapper {
    padding: 60px 0;
    text-align: center;
    background: url(../img/link_bg.png) repeat-x top center;
}

.amazon-ttl {
    font-size: 48px;
    font-weight: 500;
    color: #433768;
    margin-bottom: 45px;
    letter-spacing: 0.05em;
}

.amazon-lead {
    font-size: 28px;
    margin-bottom: 22px;
    letter-spacing: 0.09em;
}

.btn-amazon {
    max-width: 536px;
    margin: 0 auto;
}

.btn-top {
    max-width: 751px;
    margin: 60px auto;
}

/* SP表示時
====================================================================================================*/
@media only screen and (max-width: 1200px) {
    .mv-notes-list {
        margin: -20% 0 0;
    }
}

@media only screen and (max-width: 1040px) {}

@media only screen and (max-width: 640px) {
    .contents {
        width: 100%;
        padding: 0;
    }

    .contents * {
        font-size: 0.875rem;
    }

    /* メインビジュアル
	---------------------------------------------------------------------------------------------------*/
    .contents .mv_area {
        padding: 0;
        background: none;
    }

    .contents .mv_area .mv {
        width: 100%;
        padding-top: 0;
    }

    .mv-notes-list {
        margin: 10px 4.375% 0;
    }

    .mv-notes-list li {
        font-size: 2.65vw;
        line-height: 1.4;
        margin-bottom: 5px;
    }

    .mv-name {
        display: inline-block;
        font-size: 2.65vw;
    }

    .mv-iyakuhin {
        font-size: 2.4vw;
    }

    /* about
	---------------------------------------------------------------------------------------------------*/
    .about-wrapper {
        margin-top: 6.25vw;
        padding: 0;
    }

    .about-ttl {
        max-width: 44.375vw;
    }

    .about-lead {
        margin: 0 4.375% 0.667vw;
        font-size: 4.06vw;
        line-height: 1.58;
        text-align: left;
    }

    .about-fig {
        margin: 0 4.375%;
    }

    /* type
	---------------------------------------------------------------------------------------------------*/
    .type-wrapper {
        margin-top: 4.69vw;
    }

    .type-ttl {
        font-size: 4.375vw;
        line-height: 1.39;
        letter-spacing: -0.05em;
        margin-bottom: 0;
    }

    .type-subttl {
        max-width: 56.25vw;
        margin-bottom: 3.125vw;
    }

    .type-wrapper .mogukokko {
        margin: 0 0 0.625vw;
        background-size: 13.44vw auto
    }

    .type-wrapper .irakokkko {
        margin: 0 0 0.625vw;
        background-size: 13.44vw auto
    }

    .type-wrapper .punyokokko {
        margin: 0 0 0.625vw;
        background-size: 13.44vw auto
    }

    .type-wrapper .inner.active .toggle-btn .sp.open {
        display: block;
    }

    .type-wrapper .inner.active .toggle-btn .pc.open {
        display: none;
    }

    .toggle-content {
        position: relative;
        padding-bottom: 3.90625vw;
    }

    .toggle-content-ttl {
        width: 91.25vw;
        margin: 0 auto;
    }

    .toggle-content-txt {
        font-size: 3.4375vw;
        line-height: 1.63;
        margin: -9.375vw 3.90625vw 0;
        padding-bottom: 3.90625vw;
    } 

    .mogukokko .toggle-content-icon {
      position: absolute;
      bottom: 26vw;
      left: auto;
      right: 3vw;
      width: 36.875vw;
      display: none;
      z-index: 1;
    }

    .irakokkko .toggle-content-icon {
      position: absolute;
      bottom: 26vw;
      left: auto;
      right: 3.4375vw;
      width: 36.5625vw;
      display: none;
      z-index: 1;
    }

    .punyokokko .toggle-content-icon {
      position: absolute;
      bottom: 26.5vw;
      left: auto;
      right: 0.625vw;
      width: 43.125vw;
      display: none;
      z-index: 1;
    }

    /* .mogukokko .toggle-content-txt {
        padding: 0 0 8.125vw 0;
        background: url(../img/character_tamekomi.png) no-repeat right bottom;
        background-size: 35.625vw auto;
    }

    .irakokkko .toggle-content-txt {
        padding: 0 0 4.6875vw 0;
        background: url(../img/icon_irakokkko.png) no-repeat left bottom;
        background-size: 35.625vw auto;
    }

    .punyokokko .toggle-content-txt {
        padding: 0 0 4.6875vw 0;
        background: url(../img/icon_punyokokko.png) no-repeat left bottom;
        background-size: 35.625vw auto;
    } */

    .toggle-content-btn {
        margin: -4.6875vw auto 0;
        width: 91.40625vw;
    }

    /* .toggle-content-icon {
        display: none;
    }

    .inner.active .toggle-content-icon {
        display: none;
    } */

    /* check
	---------------------------------------------------------------------------------------------------*/
    .check-wrapper {
        margin-top: 3.125vw;
        background: url(../img/check_bg_sp.png) no-repeat top center;
        background-size: cover;
    }

    #mainContents {
        padding: 4.6875vw 0 4.375vw;
    }

    .check-ttl {
        font-size: 4.375vw;
    }

    .check-subttl {
        max-width: 62.5vw;
        margin: 0 auto 2.34vw;
    }

    .check-inner {
        margin: 0 4.375%;
    }

    #matching {
        padding: 0 !important;
    }

    .movie-wrapper {
        margin-top: 4.375vw;
    }

    .movie-subttl {
        width: 22.1875vw;
        padding: 5px 0 0 1.5625vw;
    }

    .movie-box {
        width: 62.1875vw;
        margin: 5px;
    }

    /* amazon & top-link
	---------------------------------------------------------------------------------------------------*/
    .amazon-wrapper {
        padding: 5.469vw 0;
        text-align: center;
        background: url(../img/link_bg_sp.png) no-repeat top center;
        background-size: cover;
    }

    .amazon-ttl {
        font-size: 5.469vw;
        margin-bottom: 4.687vw;
    }

    .amazon-lead {
        font-size: 3.125vw;
        margin-bottom: 2.344vw;
    }

    .btn-amazon {
        max-width: 59.844vw;
    }

    .btn-top {
        max-width: 100%;
        margin: 4.375vw auto;
    }
}