@charset "UTF-8";

/*-------------------------------------------
共通設定
-------------------------------------------*/

/* pageheader  */
.page-header .img {
 background-image:url(../img/member/mainvisual.webp);
}

.main-wrapper{
 padding: 0 1rem;
 margin-bottom:1rem;
}


/*ログイン*/
#login .flex{
  width:60%;
  display:flex;
  background-color:var(--dark);
  margin:4rem auto;
  border-radius: 10px;
  font-size:var(--font-md);
}

#login .flex .text{
  width:40%;
  padding:1rem;
  display:flex;
  align-items: center;;
}

#login .flex .login{
  width:60%;
  padding:1rem;

}

#login .flex .login input[type="text"],
#login .flex .login input[type="password"]
{
  width:70%;
}


/*-------------------------------------------
マニュアル
-------------------------------------------*/


#manual{
  width:100%;
}

#manual .grid .guide-flex{
  display:flex;  
  width:100%;
 
}

#manual .grid  .guide-flex .left{
  width:50%;
  padding:0.5rem;
}

#manual .grid  .guide-flex .right{
  width:50%;
  padding:0.5rem;
}

#manual .grid  .guide-flex .right .img{
  width:100%;
  
}

#manual .grid  .guide-flex .right .img img{
  width:100%;
  object-fit: cover;
}

#manual  .grid .guide-flex  .left .img{
  width:100%;
  height:auto;
  filter: brightness(1);
  margin-bottom:0.5rem;
  position:relative;
}

#manual  .grid .guide-flex  .left .img-mask{
  position:absolute;
  width:fit-content;
  height:fit-content;
  padding:0.5rem;
  top:1rem;
  left:1rem;
  background-color: rgba(50,50,50,0.5);
  font-size:var(--font-xl);
  border-radius:1px;
}


/* マーカー  */
span.mark{
 display:inline-block;
 color:var(--black);
 padding:0.1rem 0rem;
 margin:0 0.05rem;
 border-radius:5px;;
}

span.mark.trial{
 background-color: var(--trial);
}

span.mark.silver{
 background-color: var(--silver);
}

span.mark.gold{
 background-color: var(--gold);
}

/*登録リンク*/
#login .resister{
  color:var(--gold);
  text-decoration: underline;
}

/*グリッドレイアウト設定*/
.grid-layout .grid{
 display:grid;
 grid-template-columns: repeat(2,1fr);
 gap:1rem;
 font-size:var(--font-sm);
}

.grid-layout .grid li{
  margin-bottom:1rem;
}

.grid-layout .grid li a{
  display:block;
}

.grid-layout  .grid .img{
  width:100%;
  height:auto;
  filter: brightness(1);
  margin-bottom:0.5rem;
  position:relative;
}



.grid-layout  .grid .img img{
  width:100%;
  height:20rem;
  object-fit:cover;
}

.grid-layout  .grid .text .title{
    margin-bottom:0.5rem;
}


/* テーブル */
.grid-layout .grid .text dl{
 display:flex; 
 flex-wrap: wrap;
 border-top:1px solid var(--gold);
 border-bottom:1px solid var(--gold);
 padding:0rem 1rem;
}

.grid-layout .grid .text dt{
 width:40%;
 border-bottom:1px solid var(--white);
 padding:0.5rem ;
}


.grid-layout  .grid .text dt:nth-child(13){
 border-bottom:none;
}


.grid-layout  .grid .text dd{
 width:30%;
 border-bottom:1px solid var(--white);
 padding:0.5rem ;
}


.grid-layout  .grid .text dd:nth-child(14){
 border-bottom:none;
}

.grid-layout  .grid .text dd:last-child{
 border-bottom:none;
}


/*-------------------------------------------
スマートフォン
-------------------------------------------*/
@media screen and (max-width: 767px) {
/*-------------------------------------------
共通設定(sm)
-------------------------------------------*/

/*ログイン*/
#login .flex{
  width:100%;
  flex-direction: column;
font-size:var(--font-sm);
}

#login .flex .text{
  width:100%;
}

#login .flex .login{
  width:100%;

}




/*グリッドレイアウト設定*/
.grid-layout .grid{
 display:grid;
 grid-template-columns: repeat(1,1fr);
 gap:0rem;
 font-size:var(--font-sm);
}

.grid-layout  .grid .text .title{
    margin-bottom:0.5rem;
}

.grid-layout .grid .text dl{
 display:flex; 
 flex-wrap: wrap;

 padding:0rem 1rem;
}

.grid-layout .grid .text dt{
 width:40%;
 padding:0.5rem ;
}

.grid-layout  .grid .text dt:nth-child(13){
 border-bottom:none;
}

.grid-layout  .grid .text dd{
 width:30%;
 padding:0.5rem ;
}

.grid-layout  .grid .text dd:nth-child(14){
 border-bottom:none;
}

.grid-layout  .grid .text dd:last-child{
 border-bottom:none;
}



}