@charset "UTF-8";
/*-------------------------------------------
共通設定
-------------------------------------------*/
/* pageheader  */

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

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

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

.grid-layout{
  margin-top:1rem;
}


/*ログイン*/

#login .flex{
  width:60%;
  display:flex;
  background-color:var(--back2);
  margin:4rem auto;
  border-radius: 10px;
  font-size:var(--font-md);
  box-shadow:1px 1px 1px black;
}

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

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

#login .flex .text .resister{
  color:red;
}

/*wp-simplemembershipフォーム*/
#login .flex .login input[type="text"],
#login .flex .login input[type="password"]
{
  width:70%;
  height:2rem;
  background:var(--white);
  border-radius: 5px;
}

#login .flex .login input[type="checkbox"] {
  width: 22px;
  height: 22px;


}

/* Simple Membership ログインボタンを赤に */
#login .flex .login input[type="submit"]{
  background:var(--accent);
}

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

#manual{
  width:100%;
}

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

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

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

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

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

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

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


/*グリッドレイアウト設定*/
 .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;
  filter:none;
}

.grid-layout .grid .img{
  width:100%;
  height:25rem;
  margin-bottom:0.5rem;
  position:relative;
}

.grid-layout .grid .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: filter 0.8s ease, transform 0.8s ease;
}

.grid-layout .grid .img img:hover{
  filter: brightness(1.25);
  transform: scale(1.03);
}

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

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

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

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

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

.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;
}

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

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

}


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

#manual{
  width:100%;
}

#manual  .guide-flex{
  width:100%;
  flex-direction: column;
}

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

#manual  .guide-flex .right{
  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;
}
 



}