/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require font-awesome
 *= require ./lib/bootstrap-4.0.0/bootstrap.min
 *= require ./lib/jquery.smartmenus.bootstrap.css
 *= require_tree .
 *= require_self

 */

 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500;700&display=swap');

 @charset "UTF-8";
 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: inherit;
   font-size: 100%;
   vertical-align: baseline;
 }
 
 html {
     line-height: 2;
 }
 
 a img {
     border: none;
 }
 
 header, section {
     display: block;
 }
 
 
 *, *:before, *:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     overflow-wrap: break-word;
     word-break: break-word;
   }
   
   html, body {
     font-family: "Noto Sans CJK JP", "Noto Sans JP", "Noto Sans CJK JP", "ヒラギノ角ゴ Pro", "游ゴシック", "游明朝", "ヒラギノ明朝 Pro","ヒラギノ角ゴ","源ノ明朝", "Oswald", "メイリオ", "游ゴシック", "Noto Serif", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
     line-height: 1.8;
     text-align: justify;
     -webkit-text-size-adjust: 100%;
     font-size: 10px;
     font-weight: 500;
   }
  
   a,a:hover {
     text-decoration: none;
   }
   
   img {
     display: block;
     width: 100%;
   }
   
   h1, h2, h3, h4, h5,  h6, p {
     margin: auto;
   }
   
   p, dt, dd {
     overflow-wrap: break-word;
   }
   
   body {
     margin: auto; 
     position: relative;
   }
   
 /*--------------------------responsive ---------------------*/
 .clearfix::before,
 .clearfix::after {
   display: block;
   content: "";
   clear: both;
 }
 
 
 /*--------------------------------------------------------------------------*/
 /* Common
 ---------------------------------------------------------------------------------*/
 
 body {
     position: relative;
     margin: 0px;
     background-image: url(https://evre.s3.ap-northeast-1.amazonaws.com/img/BG_2.png);
     background-size: cover;
 }
 
 p, div, ul, li, strong {
     font-size: 1.6rem;
     line-height: 1.8;
     margin: 0;
 }
 
 p {
     white-space: pre-line;
 }
 
 main {
     position: relative;
     margin: 0;
 }
 
 body {
     /*width: 120rem; */
     margin: 0;
 }
 
 .fv {
     position: relative;
 }
 
 
 .trivia {
  border-radius: 4px;
  margin: 0;
  padding: 2em 2em;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1em;
 }
 .tri {
  box-sizing: border-box;
  display: block;
  padding: 10px 10px;
  margin: auto;
 }

 .tri h2 {
  position: relative;
  padding-left: 5rem;
  font-size: 6rem;
  font-weight: 700;
  font-family: Source Han serif;
  color: #116660;
}
.tri h2::before {
  content: "";
  width: 3rem;
  height: 8rem;
  background: url(img/h2tt.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  left: 0;
  top: 2rem;
}

.tri h3 {
  position: relative;
  padding: 1rem;
  font-size: 4rem;
  font-weight: 700;
  color: #041a18;
}

.tri_me ul {
  border: solid 2px #ffb03f;
  padding: 0.5em;
  position: relative;
  margin-top: 2em;
}
.tri_me ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}
.tri_me ul li:last-of-type {
  border-bottom: none;
}
.tri_me ul li:before {
  /*リスト内のアイコン*/
  font-family: "Font Awesome 5 Free";
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}
.tri_me ul li:after {
  /*タイトルタブ*/
  background: #ffb03f;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 4px 20px;
  content: "メリット";/*タブの文字*/
  letter-spacing: 0.05em;/*字間*/
  font-size: 1em;
}

.tri_de ul {
  border: solid 2px #3fb9ff;
  padding: 0.5em;
  position: relative;
  margin-top: 2em;
}
.tri_de ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}
.tri_de ul li:last-of-type {
  border-bottom: none;
}
.tri_de ul li:before {
  /*リスト内のアイコン*/
  font-family: "Font Awesome 5 Free";
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #3fb9ff; /*アイコン色*/
}
.tri_de ul li:after {
  /*タイトルタブ*/
  background: #3fb9ff;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 4px 20px;
  content: "デメリット";/*タブの文字*/
  letter-spacing: 0.05em;/*字間*/
  font-size: 1em;
}

.tri_tx p{
    position: relative;
    margin: 0;
    padding: 1rem;
    font-size: 3rem;
    /* font-weight: 700; */
    color: #041a18;
    vertical-align: top;
}
.tri_tx span {
  color: #e20b0b;
  font-weight: bold;
}

.triadvice {
  background-image: url(img/tri_bg.png);
  background-size: 90%;
  width: 100%;
  padding: 4rem;
}

.ctaa_p{
display: block;
height: 50vh;
margin: auto;
}


/*
 @media screen and (max-width: 1200px) {
html, body {
         font-size: calc(100vw / 120);

}
 }

*/


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

  .pc { display: none !important; }
  .sp { display: block !important; }
  
    
    
  body{
      width: 100%;
    }
    .trivia {
      border-radius: 4px;
      margin: auto;
      padding: 0em 0em;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.5);
      margin-bottom: 1em;
     }
     .tri {
      box-sizing: border-box;
      display: block;
      padding: 10px 10px;
      margin: auto;
      width: 95%;
     }
    
    .tri h2 {
      position: relative;
      padding-left: 2rem;
      font-size: 2rem;
      font-weight: 700;
      font-family: Source Han serif;
      color: #116660;
    }
    .tri h2::before {
      content: "";
      width: 2rem;
      height: 3.5rem;
      background: url(img/h2tt.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      left: -5px;
      top: 0rem;
    }
    
    .tri h3 {
      position: relative;
      padding: 10px 0rem;
      font-size: 1.8rem;
      font-weight: 700;
      color: #041a18;
      font-feature-settings: "palt";
    }
    
    
    .tri_tx p{
        position: relative;
        margin: 0;
        padding: 1rem;
        font-size: 3rem;
        /* font-weight: 700; */
        color: #041a18;
        vertical-align: top;
    }
    .triadvice {
      background-image: url(img/tri_bg.png);
      background-size: 90%;
      width: 100%;
      padding: 1.5rem;
  }
}