/* 1、全体のレイアウトと書式 */

/* 共通 */
@media all {

  /* 最大 1rem 16px  コンテナ　960px モバイル分岐点  1023px 　　最小は　320px */
  /* COLOR  */
  :root {
    --main-bg-color: white;
    --main-text-color: black;
    --sub-text-color: white;
    --accent1-color: #215795;/*171352*/
    --accent2-color: #e5940d;/*FD9F07*/
    --accent3-color: #7db20a;
    --link-color:#3c32e0;
    --main-width: 48rem;
    --head-margin-top: 0;
  }

  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    -webkit-font-smoothing: subpixel-antialiased;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    font-size: 20px;
    line-height: 175%;
   /* font-family: "Noto Sans JP", sans-serif; 遅延のため変更*/
    font-family: "Yu Gothic", sans-serif;
    font-feature-settings: "palt";

  }

  body {

    background-color:rgba(255,255,255,0.5);
    background-blend-mode:lighten;
    /* background-image: url(/image/gate/gate_image125.jpg); */
    background-image: url("/image/2024/bg.jpg");

  }


  input,
  button,
  textarea {
    font: inherit;
  }

  header{
    margin: 0 auto;
  }
  nav,
  section,
  footer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .container {
    width: calc(var(--main-width) + 5rem);
    background-color: white;
    margin: 0 auto;

  }

  h2 {
    margin: 2rem 0 1rem 0;

    font-size: 1.5rem;

  }

  h3 {
    margin-top: 2rem;
    font-size: 1.1rem;

  }

  .mobile {
    display: none;
  }

  /* .navIcon {
    display: inline-block;
    font-size: 0.75rem;
    transform: rotate(90deg);
    color: var(--accent2-color);
    margin-left: -0.5rem;
    margin-right: 0.5rem;
  } */
   .mainMenu li img,.p-icon{
    width: 1.2rem;
    vertical-align: sub;
    margin-right: 0.4rem;

   }
   .h-icon{
    width: 1.8rem;
    vertical-align: text-top;
    margin-right: 0.4rem;
   }


  .kajo {
    text-indent: -1rem;
    padding-left: 1rem;
    padding-bottom: 0.5rem;
  }

  a {
    color: var(--main-text-color);
    text-decoration: none;
  }

  a:visited {
    color: var(--main-text-color);
  }

  /*脚注*/
  .nj-note {
    text-decoration: underline;
    text-underline-offset: 0.2rem;
    cursor: pointer;
    position: relative;
  }

  .nj-detail {
    width: 14rem;
    /* 横幅 */
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateX(0%);
    margin-top: 15px;

    padding: 0.5rem;
    border-radius: 0.5rem;

    background-color: #666;

    font-size: 0.8em;
    color: #fff;

    visibility: hidden;

    opacity: 0;
    z-index: 100;
    transition: 0.5s all;
  }

  .nj-detail.nj-visible {
    top: 60%;
    visibility: visible;
    opacity: 1;
  }

  #nrjToTop {
    position: fixed;
  }
  .nj-top-return{
    margin: 3rem 0;
  }



  h2.normal {
    display: inline-block;
  }

  img.before-h {
    width: 1.7rem;
    vertical-align: top;
    margin-top: 2rem;
  }

  /*通常のページの体裁*/
  .normal-content a{
     color: var(--link-color);
     text-decoration: underline;
    }
    .normal-content img{
      width: 100%;
      height: auto;
    }
    .normal-content h1{
      text-align: center;
      margin-bottom: 2rem;
    }
    .normal-content p{
      padding-left: 1rem;
    }


}

/* header  */
@media all {
  .headline {
    width: 100%;
    text-align: center;

    font-size: 0.75rem;
    border-bottom: 1px solid #ccc;
    background-color: #c33d1b;
    /* background-color: var(--main-bg-color); */
    color:#fff;

  }

  .headerHeadline{

    margin: 0 auto;
    width: var(--main-width);
    padding-top:2rem;
    line-height: 1rem;
  }

  .headerMain {
    margin: 0 auto;
    width: var(--main-width);
    background-color: white;
    display: flex;
    gap: 2%;

  }

  .headerMain img {
    display: block;
    width: 2rem;
  }

  .headerMain img.mobile {
    display: none;
  }

  .logo {
    width: 54%;
    line-height: 1rem;
    
    background-image: url("/image/2024/clover.jpg");
    background-repeat: repeat-x;
    background-position: right bottom;
    background-size: 64%;

  }

  .logo img {
    width: 94%;
    height: auto;

  }
  .h-copy{
   font-family: serif;
   font-size: 0.83rem;
   padding-left: 2.9rem;
  }

  .headerMain .btn {
    width: 12%;
  }

  .headerMain .btn.telBtn {
    width: 26%;
  }

  .headerMain button,
  a.btn,input.btn {
    cursor: pointer;
    border: none;
    border-radius: 0.5rem;
    color: var(--sub-text-color);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.6rem;
    font-family: monospace;

    box-shadow: 0 2px 2px 0 #ccc;
  }

  .headerMain .title {
    font-size: 0.8rem;

  }

  .loginBtn button {
    /* background-color: var(--accent1-color); */
    aspect-ratio: 1;
    background-color: transparent;
  
    box-shadow:none;
  }
  /*かご系の省略したヘッダー用*/
  .headerSpace{
    width: 24%;
    background-image: url('/image/2024/clover.jpg');
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 148%;
  }

  .cartBtn button {
    /* background-color: var(--accent2-color); */
    aspect-ratio: 1;
    background-color: transparent;
  
    box-shadow:none;
    color: var(--main-text-color);
  }

  input.btn.btn--orange,button.btn--orange {
    background-color: var(--accent2-color);
    font-size: 1rem;
    padding: 0.5rem 1rem;
    width: 10rem;
  }

  /*戻るボタンなど*/
  a.btn.btn--gray,input.btn.btn--gray{
    background-color: var(--accent1-color);
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  a.btn.btn--playback{
    width: auto;
    background-color: var(--accent1-color);
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }



  .telBtn a {
 
    color: var(--main-text-color);
  
    font-size: 0.8rem;
  }


  .telBtn span.telNumber {
    color:#cd0b20;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1.9rem;
  }
  .telBtn span.telNumber b{
    color: var(--accent1-color);
  }

  .cart-num{
    font-family: ui-monospace;
  }

}

/*  nav  */
@media all {
  ul.mainMenu {
    width: var(--main-width);
    /* background-color: var(--main-bg-color); */
    margin: 2rem 0;

    list-style: none;

    display: inline-block;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    justify-content: center;
    
  }

  ul.mainMenu li {
    width: calc(25% - 1.5%);

    margin: 1% 0;
    border: 0.5px solid #eee;
    border-radius: 0.5rem;
    text-align: center;
    /* background-image: linear-gradient(to bottom, #fff, 95%, #efefef); */
    box-shadow: 0 2px 2px 0 #ccc;
  }

  .mainMenu a {
    display: inline-block;
    width: 100%;
    padding: 2% 0;
    color: var(--main-text-color);


  }
}

@media all {
  .importantNews {
    margin-bottom: 1rem;
  }

  .importantNews h1 {
    text-align: center;
    margin-bottom: 1rem;
  }

  .search {
    width: var(--main-width);

    padding: 2rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
  }

  .search>div {
    width: calc(33% - 1%);
    padding: 2%;
    margin: 1% 0;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    text-align: center;
  }


  h2.normal {

    border-bottom: 0.2rem solid var(--accent2-color);
    
  }


  .mokutekiSearch,
  .aiueoSearch {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to bottom, #fff, 95%, #efefef);
    box-shadow: 0 2px 2px 0 #ccc;

  }

  ul.osusumeGoods {
    width: var(--main-width);
    margin: 2rem 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
  }

  ul.osusumeGoods li {
    width: calc(33% - 1%);
    padding: 2%;
    margin: 1% 0;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    text-align: center;
  }

  .mokutekiGoods {
    width: var(--main-width);
    margin: 2rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
  }

  .mokutekiGoods>div {
    width: calc(25% - 1.5%);
    padding: 2%;
    margin: 1% 0;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .mokutekiGoods>div.header{
    justify-content: center;
    background-image: linear-gradient(to bottom, #fff, 95%, #efefef);
  }
  .mokutekiGoods img{
    width: 100%;
  }
  

  
  .mokutekiGoods h3 {
    margin-top: 0;
  }

  .news,
  .otodoke,
  .oshiharai,.normal-content {
    width: var(--main-width);
    margin: 2rem 0;
  }
  
}

/* footer */
@media all {


  footer {
    /* background-color: white; */
     background-image: url("/image/2024/bg.jpg");
  }

  .footerMain {

    width: 100%;
   

    /* background-image: linear-gradient(to bottom, #efefef, 10%, #fff);
    border-top: 1px solid #ccc;
    box-shadow: rgba(0, 0, 0, 0.75);

    background-color: var(--main-bg-color); */


    display: flex;
    gap: 2%;
    font-size: 1rem; /* old 0.8rem line 1rem*/
    line-height: 2rem;
  }

  .footerMain>div {
    width: calc(16.66% - 1%);
    padding: 1%;
    margin: 1% 0;

  }

  .footerMain ul {
    list-style: none;
    padding: 0 0 0 .5rem;
    margin: 0;
  }

  .footerMain ul li {
    background: url(/image/sankakuicon.gif) left 0px top 0.5rem no-repeat;

    background-size: 6px auto;

    padding-left: 1em;
  }

  .copyright {
    margin: 3rem 0 1rem 0;
    font-size: 0.7rem;
  }
}

/* mobile  */

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

  :root {
    --main-width: 100%
  }

  html {
    font-size: calc(100vw / 20)
  }

  body {
    padding: 0;
  }

  .container {
    width: 100%;
    padding: 0 6%;
    overflow: hidden;
  }

  .headline {
    /* 公開時は初回のみ30％ */
    /* margin-top: var(--head-margin-top); */
    /* margin-top:24%; */
    font-size: 0.7rem;

  }

  .headerHeadline{
    padding-top: 0.5rem;
  }

  .headerMain {
    padding-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 4%;
    justify-content: center;
    align-content: center;
    align-items: center;
  }

  .mainMenu li img,.p-icon{
    width: 1rem;
   }

  .logo {
    width: 100%;
    padding-bottom: 2.5rem;
    margin-bottom: 1rem;
  }


  .headerMain .btn,
  .headerMain .btn.telBtn {
    width: 23%;
    aspect-ratio: auto 1 / 1;
  }

  .h-copy{
    padding-left: 1.9rem;
    font-size: 0.63rem;
   }

  /*かご系の省略したヘッダー用*/
  .headerSpace{
    display: none;
  }


  .btn form {
    height: 100%;
  }

  #divBasket {
    height: 100%;
  }

  .btn button,
  .btn a {
    aspect-ratio: auto 1 / 1;
    display: grid;
    align-items: center;
    justify-items: center;
    font-size: 0.55rem;
    /*影取り消し*/
    box-shadow: none;
  }

  .headerMain .title {
    font-size: 0.7rem;

  }


  .telBtn span,
  button span {
    line-height: 1rem;
  }

  /*メニュー*/
  ul.mainMenu {
    width: 100%;
    margin: 4% 0; /* 4% 10%*/
    /* gap: 4%; */

  }

  ul.mainMenu li {
    width: 30%; /*48%*/
    margin: 2% 0;
  }



  .footerMain {
    flex-wrap: wrap;
    padding: 1rem;
  }

  .footerMain>div {
    /*width: 12rem;old */
    width: 100%;

  }

  /*検索*/
  .search>div {
    width: 100%;

  }

  ul.osusumeGoods li {
    width: 100%;
    padding-top: 8%;
  }

  .mokutekiGoods>div {
    width: calc(50% - 1%);
  }


  .oshiharai img {
    width: 100%;
  }



  .copyright {

    font-size: 0.55rem;
  }

  /*汎用*/

  .mobile,
  .headerMain img.mobile {
    display: initial;
  }


  .no-mobile {
    display: none;
  }

}