@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* wp common settings */
.article p:empty
{
  display: none;
}
.page .content,
.entry-content,
.body .article
{
  margin: 0 auto;
}
.body .article
{
  min-height: 100vh;
}
/* site common settings */

.no-sidebar .content main.main
{
    background: url(assets/images/bg.jpg) repeat-y  top center / cover;
    color: #212121;
    font-family: sans-serif;
    margin: 0;
    min-height: initial;
    padding: 0;
    text-align: center;
}
.entry-content
{
  position: relative;
}
.title-star
{
    width: 12vw;
}
.spacer
{
    background: url(assets/images/star-aqua.svg) no-repeat center center / contain;
    display: flex;
    flex-direction: column;
    height: 24vw;
    justify-content: space-between;
    width: 4vw;
}
.spacer::before,
.spacer::after
{
    content: url(assets/images/star-aqua.svg);
    display: inline-block;
    height: 4vw;
    width: 4vw;
}
.spacer::after
{
    transform:translate(0,-100%);
}
.spacer.lonestar
{
    background-size: cover;
    background-position: top;
    height: 4vw;
}
.spacer.lonestar::before,
.spacer.lonestar::after
{
    display: none;
}
.q-section,form#diagnose
{
  margin: 0 auto;
}
section.q-section
{
  display: none; 
  opacity: 0;
  transition: opacity 0.4s ease;
  width: 100%; 
}
section.q-section.is-visible
{
  display: block;
}

@media screen and (min-width: 751px) {
    body.home
    {
      width: 750px;
      margin: 0 auto;
    }
    .no-sidebar .content main.main
    {
      background: url(assets/images/bg.jpg) repeat-y  top center / 750px;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      width: 750px;
    }
    .spacer
    {
      height: 120px;
      width: 20px;
    }
    .spacer::before,
    .spacer::after
    {
        height: 20px;
        width: 20px;
    }
    .spacer.lonestar
    {
        height: 20px;
    }
    .title-star
    {
        width: 120px;
    }
  }

  /* start page */ 
.start-header
{
    padding: 4vw 20vw;
}
.start-content
{
    align-items: center;
    background: url(assets/images/start-bg.png) no-repeat  top center / 90%;
    display: flex;
    flex-direction: column;
    padding: 4vw 0 0 0;
}
.start-logo
{
    margin: 1vw auto;
    width: 45%;
}
.start-description
{
    margin: 3vw auto 5vw;
    width: 62%;
}
.start-btn
{
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 30%;
}
.start-btn img
{
    transition: all 0.3s ease-out;    
}
.start-btn::after
{
    background: radial-gradient(ellipse at center,  rgba(98,151,178,0.5) 0%,rgba(98,151,178,0) 60%);
    border-radius: 7.5vw;
    content: '';
    display: block;
    height: 15vw;
    margin: 0;
    transform: scale(1, 0.25);
    transition: all 0.3s ease-out;
    width: 15vw;
}
.start-btn:hover::after,
.start-btn.is-hovered::after
{
    transform: scale(1.5, 0.4);
}
.start-btn a:hover img,
.start-btn a:active img,
.start-btn.is-hovered a:hover img,
.start-btn.is-hovered a:active img
{
    transform:translate(0, 5%);
}

@media screen and (min-width: 751px) {
    .start-header
    {
        padding: 40px 80px;
    }
    .start-content
    {
        height: calc(100vh - 140px);
        padding: 90px 0 0 0;
    }
    .start-logo
    {
        margin: 20px auto;
    }
    .start-description
    {
        margin: 40px auto;
    }
    .start-btn::after
    {
        border-radius: 30px;
        height: 60px;
        width: 60px;
    }
}


/* questions */
.q-indicator
{
    background: rgba(255,255,255,0.5);
    display: none;
    font-size: 0.7em;
    left: 0;
    opacity: 0;
    overflow: hidden;
    padding: 3% 4%;
    position: fixed;
    text-align: left;
    top: 0;
    transition: opacity 0.4s ease; 
    width:100%;
}
.q-indicator::after
{
    background: #7292e4;
    bottom: 3vw;
    content: '';
    height: 2vw;
    left: 4vw;
    position: absolute;
    transition: width 0.5s ease-out;
    width: 0; 
    z-index: 3;
}
.q-indicator.q1::after { width: 14.28%; } /* 1/7 */
.q-indicator.q2::after { width: 28.57%; } /* 2/7 */
.q-indicator.q3::after { width: 42.85%; } /* 3/7 */
.q-indicator.q4::after { width: 57.14%; } /* 4/7 */
.q-indicator.q5::after { width: 71.42%; } /* 5/7 */
.q-indicator.q6::after { width: 85.71%; } /* 6/7 */
.q-indicator.q7::after { width: 100%; }   /* 7/7 */
.q-progbar
{
    display: block;
    position: relative;
    width: 100%;
}
.q-progbar::after
{
    background: #fff;
    content: '';
    display: block;
    height: 2vw;
    width: 100%;
}
@media screen and (min-width: 751px) {
    .q-indicator::after
    {
        height: 10px;
        left: 20px;
        bottom: 20px;
    }
}

.q-box
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 25vw);
    padding: 12vw 0 0 0;
}
.q-content
{
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 5vw 0;
}
.q-title
{
    width: 50%;
}

/* 1 column */
.q-1column
{
    padding: 0 2.5vw;
    width: 100%;
}
.q-1in
{
    align-items: center;
    display: flex;
    flex-direction: column;

}
.q-1in img
{
    width: 30vw;
}
/* even-spaced 2 columns */
.q-even2columns,
.q-tripartite2columns
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 2.5vw;
    width: 100%;
}
.q-e2in
{
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 46vw;
}
.q-e2in img
{
    width: 85%;
}
/* two-thirds column */
.q-tripartite2columns
{
    padding: 0 5vw;
}
.q-t2in2
{
    height: 68vw;
    position: relative;
    width: 48vw;
}
.q-t2in2 .q3-base,
.q-t2in2 .q3-body,
.q-t2in2 .q3-face,
.q-t2in2 .q3-vio
{
    position:absolute;
    top: 0;
    left: 0;
}
.q-t2in2 .q3-body,
.q-t2in2 .q3-face,
.q-t2in2 .q3-vio
{
    opacity: 0;
    transition: all 0.2s ease-in;
}
/* one-third column */
.q-t2in1
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 38vw;
    padding: 0.5em 0;
}
.q-t2in1 .q-label-in
{
    padding: 0 1em 0 0;
}
.q6.q-label-in
{
    padding: 0;
}
/* even-spaced 3 columns */
.q-even3columns
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 2.5vw;
    width: 100%;
}
.q-e3in
{
    width: 30vw;
}

/* radio */
.q-check
{
    display: block;
    text-align: center;
    width: 100%;
}
.q-check input[type="radio"] 
{
    display: none;
}
.q-check label
{
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5em;
    border: 1px solid #7292e4;
    box-shadow: 0 5px 10px rgba(66,125,162, 0.4);
    color: #2c42a4;
    cursor: pointer;
    display: flex;
    font-size: 3.6vw;
    justify-content: space-between;
    line-height: 1.4;
    padding: 0.75em 0.4em;
    transition: all 0.2s ease-in;
    width: 100%;
}
.q-label-in
{
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0 1.5em 0 0;
    width: 100%;
}
.q-check label.adjust-height
{
    padding: 1.4em 0.4em;
}
.q4-adjust
{
    margin: 0 0 -4vw 0;
}
.q7-check
{
    margin: 0 0 1em 0;
    width: 100%;
}
.q7-label
{
    padding: 0 1.5em 0 0;
    width: 100%;
}
.q7-label strong
{
    font-size: 1.2em;
}
/* unchecked */
.q-check label::before
{
    color: #7292e4;
    content: "\e5ca";
    font-family: 'Material Icons';
    font-size: 1.5em;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    margin-right: 2px;
    transition: all 0.2s ease-in;
}
/* checked */
.q-check input[type="radio"]:checked + label
{
    background: #7292e4;
    box-shadow: 0 2px 2px rgba(66,125,162, 0.6);
    color: #fff;

}
.q-check input[type="radio"]:checked + label::before 
{
    color: #fff;
    content: "\e5ca";
}

/* select */
.q-select
{
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0.5em;
    border: 1px solid #7292e4;
    font-size: 1.2em;
    padding: 0.5em;
}



/* back/next */
.q-next
{
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0 5vw;
}
.q-back,
.q-forward
{
    align-items: center;
    border-radius: 5em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    line-height: 1.4;
    transition: all 0.2s ease-in;
}
.q-back
{
    background: #dee8fb;
    border: 1px solid #fff;
    color: #4a6abc;
    font-size: 0.8em;
    padding: 1em;
    width: 24vw;
}
.q-back::before
{
    color: #4a6abc;
    content: "\e408";
    font-family: 'Material Icons';
}
.q-forward
{
    font-size: 1.5em;
    padding: 0.5em 0.25em;
    width: 62vw;
}
.q-forward::after
{
    content: "\e409";
    font-family: 'Material Icons';
}
.q-forward:disabled
{
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #7292e4;
    color: #2c42a4;
    cursor: not-allowed;
}
.q-forward:disabled::after
{
  color: #2c42a4;
}
.q-forward::after
{
    color: #fff;
}
.q-forward
{
    background: #7292e4;
    border: none;
    box-shadow: 0 5px 10px rgba(66,125,162, 0.4);
    color: #fff;
}

.q-forward .q-fin
{
    display: flex;
    justify-content: center;
    padding: 0 0 0 10%;
    width: 90%;
}
@media screen and (min-width: 751px)
{
    .q-indicator
    {
        left: 50%;
        padding: 20px;
        transform: translate(-50%, 0);
        width: 750px;
    }
    .q-box
    {
        height: 100vh;
        padding: 80px 0 0 0;
    }
    .q-progbar::after
    {
        height: 10px;
    }
    .q-content
    {
        padding: 20px 0 0 0;
    }
    .q-even2columns, .q-tripartite2columns,.q-even3columns
    {
        padding: 0 20px;
    }
    
    .q-e2in
    {
        width: 345px;
    }
    .q-t2in2
    {
        height: 710px;
        width: 500px;
    }
    .q-t2in1
    {
        padding: 50px 0;
        width: 200px;
    }
    .q-1in img
    {
        width: 195px;
    }
    .q-e3in
    {
        width: 210px;
    }
    .q4-adjust
    {
        margin: 0 0 -20px 0;
    }
    .q-select
    {
        width: 80%;
    }
    .q-check label
    {
        font-size: 1.2em;
    }
    .q-next
    {
        padding: 0 60px 120px;
    }
    .q-back
    {
        width: 200px;
    }
        .q-forward, .q-forward.active
    {
        width: 400px;
    }
}

/* result */
.r-box
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.r-content
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12vw 0 0 0;
}
.r-title
{
    width: 92vw;
}
.result-types
{
    background: url(assets/images/result-bg.svg) no-repeat center top / contain;
    display: flex;
    justify-content: space-between;
    padding: 3.75vw 2.5vw;
    margin: 0 0 3.5vw;
}
.result-types img:first-of-type
{
    margin-bottom: 3.5vw;
}
.result-type-description
{
    width: 100%;
    padding: 0 2.5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.result-type-description-img
{
    width: 30vw;
}
.result-type-description-text
{
    width: 62vw;
}
.result-points
{
    padding: 2.5vw;
}
.result-points-text
{
    position: relative;
    width: 100%;
    padding: 3.5vw;
    margin: 3.5vw 0;
}
.result-points-text p
{
    background: rgba(255, 255, 255, 0.8);
    padding: 2.5vw;
    text-align: left;
    margin: 0;
}
.result-points-text::before,
.result-points-text::after
{
    width: 17vw;
    height: 17vw;
    display: block;
    content: '';
    position: absolute;
    z-index: -1;
}
.result-points-text::before
{
    background: url(assets/images/result-commentbg-ul.svg) top left / cover;
    top: 0;
    left: 0;
}
.result-points-text::after
{
    background: url(assets/images/result-commentbg-dr.svg) bottom right / cover;
    bottom: 0;
    right: 0;
}
.result-section-title
{
    background:url(assets/images/result-border.svg) no-repeat left bottom / contain;
    margin: 8vw 2.5vw 2.5vw;
    padding: 0 0 2.5vw;
}

@media screen and (min-width: 751px)
{
    .r-content
    {
        padding: 20px 0 0 0;
    }
    .r-title
    {
        width: 92%;
    }
    .result-types
    {
        padding: 27px 10px;
        margin: 0 0 20px 0;
    }
    .result-types img:first-of-type
    {
        margin-bottom: 25px;
    }
    .result-type-description
    {
        padding: 0 20px;
    }
    .result-type-description-img
    {
        width: 220px;
    }
    .result-type-description-text
    {
        width: 470px;
    }
    .result-points
    {
        padding: 20px;
    }
    .result-points-text
    {
        padding: 20px;
        margin: 20px 0;
    }
    .result-points-text::before, .result-points-text::after
    {
        width: 100px;
        height: 100px;
    }
    .result-points-text p
    {
        padding: 20px;
    }
}

/* salon ranking */
.result-salons
{
    width: 100%;
    padding: 0 0 5vw 0;
    margin: 0;
}
.result-salonlist
{
    position: relative;
    width: 100%;
    margin: 0 0 5vw 0;
}
.result-salonlist:last-of-type
{
    margin: 0;
}
.result-salonlist::after
{
    display: block;
    content: url(assets/images/star-aqua.svg);
    position: absolute;
    left: 6.75vw;
    bottom: 18vw;
    width: 4vw;
}
.result-salonlist:nth-of-type(1)::after
{
    content: url(assets/images/star-aqua.svg)url(assets/images/star-aqua.svg)url(assets/images/star-aqua.svg)url(assets/images/star-aqua.svg)url(assets/images/star-aqua.svg);
    height: 41vw;
}
.result-salonlist:nth-of-type(2)::after
{
    content: url(assets/images/star-aqua.svg)url(assets/images/star-aqua.svg)url(assets/images/star-aqua.svg)url(assets/images/star-aqua.svg);
    height: 32vw;
}
.result-salonlist:nth-of-type(3)::after
{
    content: url(assets/images/star-aqua.svg)url(assets/images/star-aqua.svg)url(assets/images/star-aqua.svg);
    height: 23vw;
}
.result-salonlist:nth-of-type(4)::after
{
    content: url(assets/images/star-aqua.svg)url(assets/images/star-aqua.svg);
    height: 14vw;
}
.result-salonlist:nth-of-type(5)::after
{
    content: url(assets/images/star-aqua.svg);
    height: 4vw;
}
.result-salon-title
{
    position: relative;
    height: 24vw;
    margin: 0 0 0 7.5vw;
    z-index: 2;
}
.result-salon-rank
{
    position: absolute;
    width: 15vw;
    height: 24vw;
    border-radius: 7.5vw;
    background: #2c42a4;
    z-index: 3;
}
.result-salon-name
{
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0.5em;
    border: 1px solid #7292e4;
    color: #2c42a4;
    display: inline-flex;
    font-size: 4vw;
    font-weight: bold;
    height: 14.5vw;
    left: 10vw;
    line-height: 1;
    padding: 0 2.5vw 0 7vw;
    position: absolute;
    text-align: left;
    top: 2.5vw;
    width: 80vw;
}
.result-salon-matched
{
    width: 18vw;
    height: 17.4vw;
    position: absolute;
    right: 0.5vw;
    z-index: 3;
    top: 45vw;
}
.salon-match
{
    width: 18vw;
    height: 17.4vw;
    position: relative;
}
.salon-match img,
.match-graph
{
    position: absolute;
    top: 0;
    left: 0;
    width: 18vw;
    height: 17.4vw;
    z-index: 5;
}
.match-graph
{
    border-radius: 8.5vw;
    z-index: 4;
}
.result-salon-img
{
    height: 33vw;
    left: 2.5vw;
    position: absolute;
    top: 20vw;
    width: 87.5vw;
}
.result-salon-img img
{
    border-radius: 2.5vw;
    box-shadow: 0 5px 10px rgba(66,125,162, 0.4);
}
.result-salon-detail
{
    position: absolute;
    width: 80vw;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0.5em;
    border: 1px solid #7292e4;
    right: 2.5vw;
    top: 56.5vw;
    padding: 2.5vw;
}

.detail-tag-list
{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}
.detail-tag-list li:not(:last-child)
{
    padding: 0 2.5vw 0 0;
}
.detail-tag
{
    font-size: 0.8em;
    display: inline-block;
    border-radius: 1em;
    padding: 0 0.5em;
    background: #eee;
    border: 1px solid #eee;
    color: #666;
}
.medical
{
    background: #f1ecfc;
    border: 1px solid #744abc;
    color: #744abc;
}
.salonnum
{
    background: #efefef;
    border: 1px solid #6d6d6d;
    color: #6d6d6d;
}
.detail-plan
{
    margin: 2.5vw 0 0 0;
}
.detail-plan dt,
.detail-plan dd
{
    margin: 0 0 0.5em;
    padding: 0;
    text-align: left;
}
.detail-plan dt
{
    font-size: 1.2em;
    color: #2c42a4;
    font-weight: bold;
    text-align: left;
}
.detail-price
{
    background: #fff;
    border-radius: 2.5vw;
    padding: 2.5vw;
    margin: 0 0 2.5vw;
}
.detail-price dt
{
    font-size: 0.8em;
}
.detail-price dt::after
{
    display: none;
}
.detail-price dd
{
    color: #f5258c;
    font-size: 1.5em;
    font-weight: bold;
    text-align: right;
    margin: 0;
}
.price-tax
{
    font-size: 0.5em;
}
.detail-reason
{
    padding: 0 0 0 1em;
}
.result-link-to-lp
{
    text-decoration: none;
    font-weight: bold;
    align-items: center;
    border-radius: 5em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    line-height: 1.4;
    transition: all 0.2s ease-in;
    width: 50vw;
    padding: 0.5em 0.25em;
    color: #fff;
    background: #7292e4;
    border: none;
    box-shadow: 0 5px 10px rgba(66,125,162, 0.4);
    position:absolute;
    bottom: 5vw;
    left: 50%;
    transform: translate(-50%,0);
}
.result-link-text
{
    display: flex;
    justify-content: center;
    width: 90%;
    padding: 0 0 0 10%;
}
.result-link-to-lp::after
{
    content: "\e409";
    font-family: 'Material Icons';
    color: #fff;
    justify-self: flex-end;
}

.result-compare-table-wrap
{
    overflow: auto;
    width: 100%;
    padding: 0 2.5vw 5vw;
    margin: 0 0 5vw 0;
}
.result-compare-table
{
    width: max-content;
    border: 1px solid #7292e4;
    background: #fff;
    border-collapse: collapse;
}
.result-compare-table th,
.result-compare-table td
{
    border: 1px solid #7292e4;
    padding: 0.5em;
}
.result-compare-table th
{
    background: #e4ecff;
    font-size: 0.8em;
}
.result-compare-table td
{
    width: 33vw;
}
.result-compare-table td .detail-reason
{
    text-align: left;
    margin: 0;
}
.result-aqua-text
{
    font-weight: bold;
    color: #4a6abc;
    font-size: 1.2em;
}
.result-red-text
{
    font-weight: bold;
    color: #d00000;
    font-size: 1.2em;
}

@media screen and (min-width: 751px)
{
    .result-salons
    {
        padding: 0 0 50px 0;
    }
    .result-salonlist
    {
        margin: 0 0 50px 0;
    }
    .result-section-title
    {
        margin: 50px 20px 30px;
        padding: 0 0 20px;
    }
    .result-salon-title
    {
        height: 250px;
        margin: 0 0 0 50px;
    }
    .result-salon-rank
    {
        width: 90px;
        height: 141px;
        border-radius: 200px;
    }
    .result-salon-name
    {
        top: 20px;
        width: 620px;
        padding: 0 20px 0 50px;
        font-size: 1.5em;
        height: 70px;
        left: 60px;
    }
    .result-salon-matched
    {
    width: 146px;
    height: 142px;
    right: 10px;
    z-index: 3;
    top: 265px;
    }
    .salon-match, 
    .salon-match img,
    .match-graph
    {
    width: 146px;
    height: 142px;
    }
    .result-salon-img
    {
        width: 655px;
        height: 250px;
        top: 105px;
        left: 20px;
    }
    .result-salon-img img
    {
        border-radius: 12px;
    }
    .result-salon-detail
    {
        width: 600px;
        right: 20px;
    top: 380px;
    padding: 20px;
    }
    .detail-tag-list li:not(:last-child)
    {
        padding: 0 20px 0 0;
    }
    .detail-plan
    {
        margin: 20px 0 0 0;
    }
    .detail-price
    {
        border-radius: 12px;
    padding: 15px;
    margin: 0 0 20px;
    }
    .detail-price dt
    {
        font-size: 1em;
    }
    .detail-price dd
    {
        font-size: 1.8em;
    }
    .result-link-to-lp
    {
        width: 400px;
        bottom: 0;
        font-size: 1.2em;
        padding: 20px 0;
    }
    .result-link-text
    {
        width: calc(100% - 1em);
        padding: 0 0 0 1em;
    }
    
    .result-salonlist::after
    {
        width: 24px;
        left: 50px;
        bottom: 107px;
    }
    .result-salonlist:nth-of-type(1)::after
    {
        height: 233px;
    }
    .result-salonlist:nth-of-type(2)::after
    {
        height: 181px;
    }
    .result-salonlist:nth-of-type(3)::after
    {
        height: 129px;
    }
    .result-salonlist:nth-of-type(4)::after
    {
        height: 78px;
    }
    .result-salonlist:nth-of-type(5)::after
    {
        height: 27px;
    }
    .result-compare-table-wrap
    {
        padding: 0 20px 40px;
        margin: 0 0 40px;
    }
    .result-compare-table td
    {
        width: auto;
    }
}


/* ローダー本体 (画面全体を覆う) */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.93); /* ページの背景色 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  
  /* フェードアウト用 */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* ローダー内のGIF画像 (サイズは任意で調整) */
.loader img {
  width: 120px; 
}

/* ページ本体 (最初は透明) */
.page-content {
  opacity: 0;
  transition: opacity 0.5s ease; /* フェードイン用 */
}


/* --- JSが制御するクラス --- */

/* ローダーを非表示にする（フェードアウト） */
.loader.is-loaded {
  opacity: 0;
  visibility: hidden;
}

/* ページ本体を表示する（フェードイン） */
.page-content.is-visible {
  opacity: 1;
}