/* 2022 nrj common CSS*/
/* 最大 1rem 16px  コンテナ　960px モバイル分岐点  768px 　　最小は　320px */

/* COLOR  */

/* 
オレンジ系　
FF6F0B
FD9F07
FFC403 明るい
754A00
110300
青系
4ABAEB  
BBDFEF
D2F1FF
緑系
4AA331
A6EB87
Gray
6b8db4
*/

/* 1、全体のレイアウトと書式 */
@media all{
  /* ダミーイメージ */
  .dummy-img {
    float: left;
    border: 3px solid #333;
    border-radius: 0.5rem;
  }
  /* サイズ */
    .w-1{width:960px}

	  .w-1-p{
		  /* パディングに対応 */
		  width: 928px;
	  }
    .w-2{width:480px}
    .w-3{width:320px}
    .w-4{width:240px}
    .w-6{width:160px}
    .w-8{width:120px}
    .w-16{width:60px}

    .h-1{height:960px}
    .h-2{height:480px}
    .h-3{height:320px}
    .h-4{height:240px}
    .h-8{height:120px}   
    .h-16{height:60px}
    .h-32{height:30px}
    .h-64{height:15px}
    
    .pt-32{padding-top: 30px;}
    .p-puti{padding: 5px;}

    .w-95{width: 95%;}
    .w-800{width: 660px;}
    .w-400{width: 330px;}
    
    
  /*  */

  /*サイズの定義余白0*/
  *, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html{
    font-size:16px;
    font-family:sans-serif;
  }
  p{
    font-size: 1rem;
    line-height: 1.25rem;
    text-align:justify;
    color:#110300;
    margin-bottom: 0.25rem;
  }
  input,textarea,option{
    font-size: 1rem;
  }

  .copyright{
    text-align: center;
    font-size:  0.6rem;
    line-height: 0.8rem;
  }

  /* 2、汎用レイアウト */

  .main-container{
    width: 60rem;
    margin: 0.5rem auto;
    /* background-color: #D2F1FF; */
    overflow: hidden;
  }


  /*  脚注　サイズ小さめ　ぶら下げインデント */
  p.footnote{
    font-size:0.75rem;
    padding-left:1.125rem;
    text-indent: -1.125rem;
    margin-bottom: 0;
  }
  .big-text{
    font-size:1.75rem;
  }

  /* 汎用的なテーブル */

  h1.tblnormal {
    margin: 3rem 0 1rem 0;
    text-align: center;
    font-size: 1.8rem;
    padding: 0 1rem;
    font-family: serif;

  }

  /* 規約など */
  .txtnormal {
    font-family: serif;
  }
  .txtnormal h1 {
    margin: 3rem 0 3rem 0;
    text-align: center;
    font-size: 1.8rem;
    padding: 0 1rem;
    font-family: serif;
  }
  .txtnormal h2{
    font-size: 1.2rem;
    margin: 2rem 0 0.5rem 0;
    border-bottom: 1px solid black;
  }

  .txtnormal ul{
    padding-left:1rem;
  }
  .txtnormal li {
    margin: 1rem 0;
  }
  .txtnormal li a{
    color:#0066FF;
  }
  ul.sqr{
    list-style-type:none;
  }

  /* テーブル表示 */
  table.tblnormal {
    border-collapse: collapse;
    margin: 2rem 0;
    font-family: serif;
  }

  .tblnormal th{
    width: 9rem;
    text-align:left;
    font-weight: normal;
    padding-right: 2rem;
    vertical-align: top;
  }
  .tblnormal td{
    vertical-align: top;
    padding:0 1rem 1rem 1rem;
  }


  /*汎用的なフォーム*/

  .normal-form label{
    display: inline-block;
    width: 7rem;
  }
  .normal-form input[type="text"],
  .normal-form input[type="password"],
  .normal-form input[type="tel"],
  .normal-form input[type="email"]
  {
      margin: 0 0 0.5rem 0.25rem;
      padding: 0.25rem 0.5rem;
      font-size: 1rem;
      line-height: 1.5rem;
      width: 14rem;
      text-decoration: none;
      position: relative;
      display: inline-block;
      letter-spacing: 0.1em;
      color: #212529;
      border-radius: 0.5rem;
      border: 0.125rem solid #BBDFEF;
  }
  .normal-form input[type="checkbox"]{
    text-align: left;
    transform-origin:left;
    transform:scale(1.4);
    width: 1rem;
    margin-right: 6rem;
  }

  .right-box img{
    width: 100%;
  }
  #login_frame .login_comment{
    width: 11.5rem;
  }


  /* 2、loginを促すエリアのレイアウト */
  #login_container{
    padding: 0 1rem;
  }
  #login_frame{
  	background-color: #fff;
  	border-radius: 1.5rem;
  	margin: 1rem 0 0.5rem 0;
  	padding:1rem;
    border: 0.25rem solid #FF6F0B;
  }


  #LloginErr{
  	font-size:1rem;
    text-align: right;
  }

  /* floatの解除 */
  .float-contents::after{
    content: "";
    display: block;
    clear: both;
  }

  /* 段落は左ボタンと画像は右 */
  .left-box{
  	float: left;
  }
  #login_frame p strong{
    color: #4AA331;
    font-weight: bold;
  }

  .right-box{
    float: right;
  }

  .login_accent{
    width: 10rem;
  }

  /* button aria */
  button.btn,input.btn,
  a.btn {
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5rem;
    position: relative;
    display: inline-block;
    padding: 0.5rem 1rem;
    cursor: pointer;
    user-select: none;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #212529;
    border-radius: 0.5rem;
    border: none;
    box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.3);
  }
  a.btn--orange,
  input.btn--orange,
  button.btn--orange
  {
    color: #fff;
    background-color: #FD9F07;
  }
  a.btn--orange:hover,
  input.btn--orange:hover,
  button.btn--orange:hover
  {
    color: #fff;
    background: #FFC403;
  }
  a.btn--gray,
  input.btn--gray,
  button.btn--gray
  {
    color: #fff;
    background-color: #6b8db4;
  }
  a.btn--gray:hover,
  input.btn--gray:hover,
  button.btn--gray:hover
  {
    color: #fff;
    background: #a8c5e5;
  }

  a.btn--green,
  input.btn--green
  {
    color: #fff;
    background-color: #4AA331;
  }
  a.btn--green:hover,
  input.btn--green:hover
  {
    color: #fff;
    background: #A6EB87;
  }

  a.btn--silver,
  input.btn--silver,
  button.btn--silver
  {
    color: #333;
    background: linear-gradient(to bottom, #fff, #eee);
  }
  a.btn--silver:hover,
  input.btn--silver:hover,
  button.btn--silver:hover
  {
    color: #333;
    background: #fff;
  }

  /* 新しいログインアイコン */
  #login_min_container button.btn,
  #login_min_container a.btn,
  #viewbasket
  {
    padding: 0.25rem 0.2rem 0 0.2rem;
    font-size: 1rem;
    line-height: 1.2rem;
    height: 100px;
    width: 100%;
    letter-spacing: -0.1rem;

  }
  #viewbasket{
    background-color: transparent;
    border: none;
    color: black;
    cursor: pointer;
  }

  #login_min_container button img,
  #viewbasket img{
    vertical-align:initial;
    margin-top: 0.4rem;

  }
  #viewbasket img{
    width: 2rem;
    display: block;
    margin: 0.5rem auto;
  
  }



  .mobile-view-block{
    display: none;
  }
  .yes-mobi{
    display: none;
  }

  .tight{
    letter-spacing: -0.1rem;
  }
  .container-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .center{
    text-align: center;
    margin: 0 auto;
  }
  .link::before{
    content: '';
    height: 0.7rem;
    width: 0.7rem;
    display:  inline-block;
    background:  url(/image/icon/tri32.gif) no-repeat center;
    background-size:  contain;
    margin-right:  0.25rem;
  }
  .only-mob{
    display: none;
  }

/* ここからフッター */

  footer{

    background: linear-gradient(to bottom, #eee, #FFF);
    padding: 0 0.5rem;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;


  }
    
    footer form{
    margin: 0;
    }
    
    footer p{
    font-size: 10px;
    color: #999;
    
    }

    
    footer ul{
    list-style:none;
    padding: 0 0 0 1rem;
    margin: 0;
    }
    footer li{
    background: url(/image/sankakuicon.gif) left 0px top 0.5rem no-repeat;
    background-size: 6px auto;
    
    line-height: 1rem;
    padding-left: 1em;
    }
    footer li a{
    color: #005580;
    font-size: 0.65rem
    }
    
    footer p.copyright{
    text-align: center;
    color: #999;
    }
    
    .cart-num{
      font-size: 20px;
    }


}

/* 3、モバイル用*/
@media screen and (max-width:768px) {

  .mobi-100{width: 100%;}
  .mobi-95{width: 95%;}
  .mobi-75{width: 75%;}
  .mobi-50{width: 50%;}
  .mobi-25{width: 25%;}
  .mobi-125{width: 12.5%;}
  .mobi-33{width: 33.33%;}

     
  .no-mobi{
    display: none;
  }

  html{
    font-size:24px;
  }
  input,textarea,option{
    font-size: 1rem;

  }
  
  .main-container{
    width: 100%;
  }

  #login_frame .login_comment{
    width: 100%;
  }
  .normal-form label{
    width:auto;
  }

  .mobile-view-block{
    display:initial;
  }
  .yes-mobi{
    display: initial;
  }


  #login_frame{
    padding: 1rem 0.5rem;
  }
	#login_frame br{
		 display: none;
	}
	/* 段落と画像は折り返す */
	.left-box,.right-box{
		float: none;
	}

	a.login_button,
  .login_accent,
  input.login_button{
		display: block;
    margin-left: auto;
    margin-right: auto;
    
	}

  input.btn,
  a.btn,
  button.btn {
    padding: 0.25rem 0;
    margin-left: 0;
    font-size:1rem;
    width: 100%;
  }



  .normal-form label{
    font-size:0.875rem;
    margin:1rem 0 0.5rem 0;

  }
  .normal-form input[type="text"],
  .normal-form input[type="password"],
  .normal-form input[type="tel"],
  .normal-form input[type="email"]
  {
      margin: 0 ;
      padding: 0.25rem 0.5rem;
      font-size: 1rem;
      line-height: 1.5rem;
      width: 100%;
     
      display: inline-block;
  }

  h1.tblnormal {

    font-size: 1rem;
    margin: 2rem 0 0 0;
  }

  table.tblnormal{margin: 1rem 0;}
  .tblnormal th{
    margin-top: 1.5rem;
  }
  .tblnormal td{
    padding: 0.5rem 0.8rem;
  }
  .tblnormal td,.tblnormal th{
    display: inline-block;
    width: 100%;
    font-size: 0.8rem ;
  }


  .normal-form input[type="checkbox"]{
    display: inline-block;
    width: 1rem;
    margin-right: 0;
  }
  .mobi-lit-font{
    font-size: 0.75rem;
    letter-spacing: -0.05rem;
  }
  .link::before{
    display: none;
  }
  .only-mob{
    display:initial;
  }

  footer li{
    font-size: 1rem; 
    letter-spacing: -0.02rem;
    line-height: 1.4rem;
  }
  footer li a{
    font-size: 0.75rem; 
   
  }

  footer p{
    font-size:  0.6rem;
    line-height: 0.8rem;
    letter-spacing: -0.02rem;
    padding-right: 0.5rem;
  }

  #viewbasket
  {
    font-size: 0.6rem;
    line-height: 1rem;      
                           ;
  }
  .txtnormal h1{
    font-size: 1rem;
    margin: 2rem 0 2rem 0;
  }

}