@charset 'utf-8';
/*
 * name:top.css
 * author:sovanda nulo
*/

/* top
------------------------------------------------ */


#header { display: none; }
.section { margin-bottom: 20px; }
.section--block { padding: 15px; border-radius: 5px; box-shadow: 0 3px 6px rgba(0, 0, 0, .3); background: #fff; }

/*section visual*/
#visual { background-image: url(../../img/top/visual.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; mix-blend-mode: multiply; }
#visual .wrap { padding: 0; }
#visual:before { content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient( #279D54 0%, #0E371D 100% ); opacity: .78; }
.visual--banner { display: flex; flex-direction: column; justify-content: center; min-height: 362px; position: relative; }
.visual--title { font-size: 20px; font-size: 2rem; line-height: 1.3; font-weight: 600; text-align: center; color: #fff; margin-bottom: 15px; }
#visual .section--btn { margin-top: 25px; }
#visual .section--btn a:after { right: 2.33em; height: 2.4285em; background-image: url(../../img/share/btn-arrow.svg); }
.visual--btnRegister a { background: #38E077; }
.visual--btnHow a { background: #427A58; }
#visual .section--btn { max-width: 310px }

/*section condition*/
#condition {  }
.condition-lists { display: block; position: relative; }
.condition-list { display: flex; flex-wrap: wrap; align-items: center; padding: 22px 15px 22px 5px; border-radius: 5px; background-image: url(../../img/top/bg-low.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }
.condition-list:not(:last-child) { margin-bottom: 15px; }
.condition-list--icon { width: 70px; text-align: center; }
.condition-list--icon img { display: inline-block; width: auto; height: 40px; }
.condition-list--tlt { font-size: 16px; font-weight: 600; line-height: 1.3; color: #fff; width: calc( 100% - 70px); }
.condition-low { background-image: url(../../img/top/bg-low.jpg); }
.condition-medium { background-image: url(../../img/top/bg-medium.jpg); }
.condition-high { background-image: url(../../img/top/bg-high.png); }

/*section user*/
#user {  }
.user-awards,
.user-award { display: block; position: relative; }
.user-award { display: flex; flex-wrap: wrap; align-items: center; padding: 10px 15px 10px 5px; border: 1px solid #000; border-radius: 5px; }
.user-award:not(:last-child) { margin-bottom: 15px; }
.user-award img { width: 40px; margin: 0 15px; }
.user-award figcaption { font-size: 16px; line-height: 1.3; width: calc( 100% - 70px); }
.user-desc { font-size: 12px; line-height: 1.3; padding: 0 10px; margin-top: 15px; }
.user-note { margin-top: 15px; padding: 0 10px; display: block; }
.user-note li { font-size: 10px; line-height: 1.3; text-indent: -1em; padding-left: 1em; display: block; }

/*section how*/
#how {  }
.how-lists { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.how-list,
.how-list a { display: block; position: relative; }
.how-list--pic { display: block; position: relative; width: 100%; height: 0; padding-bottom: 100%; background: #D9D9D9; }
.how-list--pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.how-list--tlt { font-size: 9px; font-weight: normal; line-height: 1.3; margin-top: 1em; }

/*section news*/
#news {  }
.news-lists,
.news-lists li { display: block; position: relative; }
.news-list { border-top: 1px solid #000; }
.news-list:last-child { border-bottom: 1px solid #000; }
.news-list a { padding: 5px 0; display: flex; gap: 15px; }
.news-list--date,
.news-list--tlt { font-size: 12px; font-weight: normal; line-height: 1.5; color: #000; }

/*section qa*/
#qa { margin-bottom: 0; }
.qa-lists { display: block; position: relative; }
.qa-list { display: block; position: relative; }
.qa-list:not(:last-child) { margin-bottom: 15px; }
.qa-list dt { font-size: 14px; line-height: 1.3; margin-bottom: 8px; }
.qa-list dd { font-size: 12px; line-height: 1.2; }