@charset "UTF-8";

/* ベース */

#coosa_choice {
    width: 100%;
    margin: 30px 0 0 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Noto Sans JP", sans-serif;
    color: #3C3C50;
    font-weight: 400;
    background-image: url(../images/bg.jpg);
    background-repeat: repeat;
    background-position: center;

    /* position: relative;
    height: 100vh; */
}

@media screen and (max-width: 768px) {
    #coosa_choice {
        margin: min(30px, 3.9%) 0 0 0;
    }
}

@media screen and (max-width: 480px) {
    #coosa_choice {
        margin: min(40px, 12.5%) 0 0 0;
    }
}

#coosa_choice p {
    margin: 0;
    padding: 0;
}

#coosa_choice a {
    transition: ease-in-out .3s;
}

#coosa_choice ul, #coosa_choice li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#coosa_choice h1, #coosa_choice h2, #coosa_choice h3 {
    margin: 0;
    padding: 0;
}

#coosa_choice a:hover {
    opacity: 0.7;
}

#coosa_choice * {
    box-sizing: border-box;
}

#coosa_choice img {
    display: block;
    width: 100%;
    max-width: 100%;
    height:auto;
}

#coosa_choice a img {
    opacity: 1;
    transition: 0.3s ease-in-out;
}

#coosa_choice a:hover img {
    opacity: 0.7;
    transition: 0.3s ease-in-out;
}

/* 変数 */
:root {
    --pink01: #FDE2EA;
    --pink02: #F34E6B;
    --yellow01: #FFF3C3;
    --yellow02: #FFF200;
    --white: #fff;
    --green: #00A63D;
    --blue: #003E81;
}

/* レイアウト */

#coosa_choice .l_container {
    max-width: 1040px;
    margin: 0 auto;
}

#coosa_choice .l_inner {
    padding: 0 min(60px, 5.7%);
    
}

@media screen and (max-width: 768px) {
    #coosa_choice .l_inner {
        padding: 0 min(40px, 10.2%)
    }
}


/* モジュール */

#coosa_choice .pc {display: block;}
#coosa_choice .sp {display: none;}
#coosa_choice .sp02 {display: none;}

@media screen and (max-width: 768px) {
    #coosa_choice .pc {display: none;}
    #coosa_choice .sp {display: block;}
    #coosa_choice .sp02 {display: block;}
}

@media screen and (max-width: 910px) {
    #coosa_choice .pc {display: none;}
    #coosa_choice .sp {display: block;}
    #coosa_choice .sp02 {display: block;}
}


/* マージン系 */

#coosa_choice .mt01em {
    margin-top: 1em;
}

/* セクション */

#coosa_choice section {
    padding: min(40px, 4.3%) 0 min(90px, 9.7%);
}

@media screen and (max-width: 768px) {
    #coosa_choice section {
        padding: min(30px, 7.6%) 0 min(80px, 20.5%);
    }
}


#coosa_choice .contents_wrap {
    max-width: 435px;
    margin: 0 auto;
    background-color: #F0EEEB;
    border-radius: 9999px;
    position: relative;
    padding: 5px;
}

#coosa_choice .contents_wrap_border {
    border: 1px solid #3C3C50;
    border-radius: 9999px;
}

#coosa_choice .ttl {
    margin: 0 auto;
    padding: 18.4% 0 69.2% 0;
    position: relative;
}

#coosa_choice .ttl_q {
    margin: 0 auto;
    padding: 23% 0 0 0;
    position: relative;
}

#coosa_choice .ttl_a {
    margin: 0 auto;
    padding: 20% 0 16% 0;
}

#coosa_choice .foryou {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 1em;
} 

@media screen and (max-width: 768px) {
    #coosa_choice .foryou {
        font-size: 20px;
        font-size: 4.6vw;
    } 
}

#coosa_choice h1 {
    width: 80%;
    margin: 0 auto;
}

#coosa_choice h2 {
    width: 63.7%;
    margin: 0 auto;
}

#coosa_choice h2.ttl_answer {
    width: 84%;
    margin: 0 auto;
}

#coosa_choice .answer_text {
    width: 66.8%;
    margin: 5% auto 0;
    display: block;
}


#coosa_choice .ttl_ph {
    width: 113.6%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 86% 0 0 0;
    z-index: 1;
}

#coosa_choice .ttl_q .kira01 {
    width: 6.6%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 18% 0 0 24%;
}

#coosa_choice .ttl_q .kira02 {
    width: 6.6%;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 8% -10% 0;
}

#coosa_choice .ttl_q .kira03 {
    width: 6.6%;
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0 10% 11% 0;
}

#coosa_choice ul.answer {
    width: 76.9%;
    margin: 10% auto 0;
    /* padding-bottom: 30%; */
    list-style: none;
    display: flex;
    flex-direction: column;
}

#coosa_choice ul.answer li {
    display: block;
    cursor: pointer;
    margin-top: 5%;
}

#coosa_choice ul li:first-child {
    margin-top: 0;
}


#coosa_choice .btn_start {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 0 -9.3% 0;
    display: block;
    z-index: 1;
}

@media screen and (max-width: 768px) {
    #coosa_choice .btn_start {
        width: 90%;
    }
}

#coosa_choice .btn_banner {
    max-width: 650px;
    margin: max(4.8%, 50px) auto 0;
    display: block;
}

#coosa_choice .btn_back {
    width: 43.6%;
    margin: 5% auto 0;
    padding-bottom: 15%;
    display: block;
}

#coosa_choice .btn_again {
    max-width: 435px;
    margin: 0 auto;
    display: block;
}

#coosa_choice .btn_again img {
    margin: max(16%, 50px) auto 0;
    display: block;
}

@media screen and (max-width: 768px) {
    #coosa_choice .btn_again {
        width: 90%;
    }
}

   /* other
---------------------------------------------------------*/
.clearfix:after {  
    content: ".";   
    display: block;   
    height: 0;   
    clear: both;   
    visibility: hidden;  
  }  
    
  .clearfix { display: inline-table; }  
    
  /* Hides from IE-mac \*/  
  * html .clearfix { height: 1%; }  
  
  .clearfix { display: block; } 
  
  
  @media screen and (max-width: 768px) {

    #navi-open {
      background-color:transparent;
    }

    #header_nav .inner-link {
        background: rgba(255 255 255 / 0.8);
    }

    #header_nav li a {
        color: #333;
    }

    #header_nav li {
        border-bottom: 1px solid #333;
    }

    .menu-trigger span {
        background-color: #333;
    }
}





   /* フェード
---------------------------------------------------------*/

.js-fadeup {
    transform: translateY(30px);
    opacity: 0;
    transition: opacity 1.5s, transform 1.5s;
  }
  .js-fadeup.is-visible {
    transform: translateY(0);
    opacity: 1;
  }
  .js-fadeup-x {
    transform: translateX(-30%);
    opacity: 0;
    transition: opacity 1.5s, transform 1.5s;
  }
  .js-fadeup-x.is-visible {
    transform: translateX(0);
    opacity: 1;
  }
  
  .js-fadeup-row-child {
    transform: translateY(16px);
    opacity: 0;
    transition: opacity 1.5s, transform 1.5s;
  }
  .js-fadeup-row.is-visible .js-fadeup-row-child {
    transform: translateY(0);
    opacity: 1;
  }