/* A Modern CSS Reset */
 
*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}



body{font-family: 'M PLUS Rounded 1c', sans-serif; background-color: #fff9eb;}
a{
    color: #489a15;
    transition: all 0.3s ease 0s;
}
a:hover{color: #769a0b; transition: color 0.3s ease 0s;}
header,main{
    position: relative;
    border: 1px solid #6a5144;
    border-radius: 3em;
}
nav{
    position: relative;
    top: 8rem;
    background-color: #6a5144;
    z-index: 10;
}
header{
    background-color: #6a5144;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
}
.mainVisual {
      display: flex;
      justify-content: start;
      align-items: center;
      background-size: contain;
      background-position: bottom;

      animation: img_anime 12s ease-in-out infinite;/* 16sを下のアニメーションで分割指定 */
  }
#main-nav img{
    width: 60%;
    margin: 0 auto;
}

.carousel{
    position: relative;
    overflow: hidden;
    top: 140px;
    width: 100%;
    /* max-width: 800px */ /* サイズ設定をする場合はここ(*1) */
    display: grid;
    place-items: start center;
}

.carousel .img {
    vertical-align: top;
    width: 100%;
    display: block;
    margin:auto;
    vertical-align: top;
}
/* スライド設定 */
.carousel .slide-wrap {
    width: 700%; /* 画像の合計数*100%を設定(*2) */
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: carousel 35s infinite; /* スライダーアニメーション全体の時間(*3) */
    animation-delay: 2s; /* スライダーが始まるまでの時間(*4) */
}
.carousel .slide-wrap-main {
    z-index: 1;
    animation: carousel-main 35s infinite; /* (*3)と同じ内容を設定 */
    animation-delay: 2s; /* (*4)と同じ内容を設定 */
}
.carousel .slide {
    width: 100%;
}

/* スライダーアニメーションの設定(*5) */
@keyframes carousel {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    0% { transform: translateX(0); }

    11.8% { transform: translateX(calc(1 / 7 * -100%)); }
    14.3% { transform: translateX(calc(1 / 7 * -100%)); }

    26.1% { transform: translateX(calc(2 / 7 * -100%)); }
    28.6% { transform: translateX(calc(2 / 7 * -100%)); }

    40.4% { transform: translateX(calc(3 / 7 * -100%)); }
    42.9% { transform: translateX(calc(3 / 7 * -100%)); }

    54.7% { transform: translateX(calc(4 / 7 * -100%)); }
    57.2% { transform: translateX(calc(4 / 7 * -100%)); }

    69% { transform: translateX(calc(5 / 7 * -100%)); }
    71.5% { transform: translateX(calc(5 / 7 * -100%)); }

    83.3% { transform: translateX(calc(6 / 7 * -100%)); }
    85.8% { transform: translateX(calc(6 / 7 * -100%)); }

    97.5% { transform: translateX(calc(7 / 7 * -100%)); }
    100% { transform: translateX(calc(7 / 7 * -100%)); }
}

@keyframes carousel-main {
    0% { transform: translateX(100%); }
    85.8% { transform: translateX(100%); }
    97.5% { transform: translateX(0%);}
}


#Products nav{
    top:0;
}
#Products h2{
    padding: 0;
}
#Products header.header{
    border-radius: 0;
    background: linear-gradient(to bottom, #dee6c3, #FFF);
    text-align: left;
    background: var(--background-navbar);
    top: 0;
    width: 100%;
    height: 52px;
    position: fixed;
}
#Products main{
    border: 0;
    border-radius: 0;
    clear: both;
    position: static;
}
#Products main .section{
        padding-bottom: 32px;
}
#Products main .section:before{
        content: "";
        display: block;
        height: 52px; /* 調整したい高さ（固定ヘッダーの高さ） */
        padding-top: -52px; /* heightと同じ分のネガティブマージン */
        visibility: hidden;
}
#Products h1,
#Products header ul{
    display: inline;
}
/*ハンバーガーメニュー*/
  /* Navbar & Navmenu color */
  :root {
    --background-navbar: rgba(106, 81, 68, 0.98);
  }
  
  .header {
    background: var(--background-navbar);
    position: fixed;
  }
  
  /* Nav items */
  .menu {
    list-style: none;
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    margin-top: 52px;
    padding: 0 0 10px 0;
    clear: both;
    background: var(--background-navbar);
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    transform: scale(1, 0);
    transform-origin: top;
    overflow: auto;
  }
  
  /* Hamburger menu button */
  .menu-btn:checked ~ .menu {
    transform: scale(1, 1);
    transform-origin: top;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  }
  
  /* Hamburger menbu text */
  .menu a {
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 16px;
    text-transform: capitalize;
    color: #ddd;
    opacity: 0;
    transition: 0.5s;
  }
  
  .menu li {
    border-top: 1px solid rgb(255, 255, 255, 0.6);
    margin: 0 54px;
    opacity: 0;
    transition: 0.5s;
  }
  .menu li a{
    display: block;
    padding: 15px 0;
  }
  
  .menu-btn:checked ~ .menu a,
  .menu-btn:checked ~ .menu li {
    opacity: 1;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
  }
  
  .menu-btn {
    display: none;
  }
  
  .menu-icon {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 24px 14px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  
  .navicon {
    background: #ddd;
    display: block;
    height: 3px;
    width: 26px;
    position: relative;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  }
  
  .navicon:before,
  .navicon:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    background: #ddd;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  }
  
  .navicon:before {
    top: 9px;
  }
  
  .navicon:after {
    bottom: 9px;
  }
  
  /* Hamburger Menu Animation Start */
  .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before {
    top: 0;
  }
  .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    bottom: 0;
  }
  
  .menu-btn:checked ~ .menu-icon .navicon {
    background: rgba(0, 0, 0, 0);
    transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
  }
  /* Hamburger Menu Animation End */
  
  /* Navbar Container */
  .navtext-container {
    width: 100%;
    height: 52px;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-weight: 900;
  }
  
  /* Navbar Text */
  .navtext {
    position: absolute;
    text-transform: uppercase;
    color: #ddd;
    letter-spacing: 4px;
    font-size: 20px;
  }
.pr-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.pr-list div{
    width: 90%;
    min-width:240px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 4px gray;
    background-color: #fff;
    padding:8px;
    margin:12px;
}


@media(width<600px) {
    header, main, nav,#News{
        width: 100%;
        border: 0;
        border-radius: 0;
    }
}
/* @media(width<600px)ここまで*/

#News{
    margin-top: 8rem;
}

header ul{
    margin: 0 auto;
    padding: 0;
}

nav ul{
    margin: 0;
    padding: 0.6em;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
nav ul li{
    list-style: none;
    flex-grow: unset;
}
nav ul li a{
    border:0;
    border-radius: 2em;
    margin:0.2em 0;
    background-color:  rgba(134, 178, 45, 0.76);
    display: inline-block;
    padding: 0.2em 0.6em;
}
nav ul li:last-child{
    border-right:0;
}
h1,h2,h3{font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 900;}
#text-ani p{font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 700;}
h2{padding-top: 1em; color: #489a15;}
h2::first-letter{font-size: 1.6em;}
h3 span{display: inline-block;}
nav a{
    color: #FFFFFF;
    text-decoration: none;
    position: relative;
}
h1 span, h2 span{
    font-size: 0.6em;
    display: block;
}
h4{margin-top: 0em;float: none;}

.logo{
    position: absolute;
    z-index: 20;
}
.titleText{
    position: relative;
    top:-1.6rem;
    left:1.4rem;
    height: 10em;
    -ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;
    font-weight: 700;
    line-height: 1em;
    color: #FFF;
}
.titleText span{
    display: inline-block;
    padding: 0.6em 0;
    margin: 0 0.1em;
    background-color: rgba(134, 178, 45, 0.777);
    border-radius: 3px;
    font-size: 0.9rem;
}
#text-ani{
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    position: fixed;
    display: flex;
    overflow:hidden;
    align-items: center;
    z-index: -1000;
}
#text-ani p{
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 14em; color: #eae7d5;
    transform:translateX(100%);
}
.text-loop_item:nth-child(odd) {
    animation: loop 50s -25s linear infinite;
}
.text-loop_item:nth-child(even) {
    animation: loop2 50s linear infinite;
}
@keyframes loop {
    0% {transform: translateX(100%);}
    to {transform: translateX(-100%);}
}
@keyframes loop2 {
    0% {transform: translateX(0);}
    to {transform: translateX(-200%);}
}
main{margin-top: 32px; background-color: #e2e9c9;}
section{padding: 0 2.6em 2em 2.6em;clear: both; }
section#News {margin-bottom: 2em; padding:0;}
.maskAnim-first img{width: 100%}

img#photo_usakosan{width: 20%; min-width: 140px; max-width: 100%; margin:1em 1.6em 1em 0;  float: left;}
#Seminar p{margin-top:1em; }

section.section:nth-child(2n){background-color: #fbf7ef; margin: 0 0 0 0;}
section.section:first-child{margin-top: 0;}
section.section:last-child{padding-bottom: 2em;}

#seminer-inc{display: flex;justify-content: space-around;}
#seminer-inc div{min-width: 140px;flex-basis:calc((100% - 20px) / 2);
    max-width:calc((100% - 20px) / 2);
    margin-top:20px;}
#Seminar h3.del{color: #333;
    text-decoration-line: line-through;
    text-decoration-style:solid;
    text-decoration-color: gray;}

a.btn_10 {
    display: block;
    position: relative;
    z-index: 0;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    margin: 1em 0;
    padding: 1rem 4rem;
    font-weight: bold;
    background-image: linear-gradient(to right, #0e631c 0%, #b4e12b 100%);
    border-radius: 8px;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}
/* マウスホバー時の背景色を重ねて表示（初期状態で透明） */
a.btn_10::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to left, #0e631c 0%, #b4e12b);
    opacity: 0;
    transition: opacity 0.5s;
}
/* マウスホバー時に透明化を解除 */
a.btn_10:hover::before {
    opacity: 1;
}

#logo nav{
    font-size: 1rem;
}
#map-shop{
    width:100%;
    height:auto;
    position:relative;
    padding-top:56.25%;
  }
#map-shop iframe{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
  }
.LINE{
    text-align: center;
}
.LINE img{
    display: inline-block;
    width:40%;
}
#Products .LINE img{
    width:240px;
}
.twitter-tweet{
    margin: 0 auto;
}

@media(600px<=width) {
    header, main, nav,#News{
        width: 600px;
        margin:0 auto;
        overflow: hidden;
    }
    header{
        height: 880px;
        margin-bottom: 2rem;
    }
    #Products header, #Products main{
        width: 100%;
        overflow: visible;
        border: 0;
    }
    #Products main{
        margin-top: 32px;
    }
    .carousel{
        top: 220px;
    }
    .carousel{
        height: 660px;
    }
    .titleText{
        top:-6rem;
        height: 14em;
    }
    .titleText span{
        padding: 0.6em 0.2em;
        margin: 0 0.4em;
        font-size: 1.1rem;
    }

    nav ul li{
        list-style: none;
        display: inline-block;
        padding-right: 8px;
        border-right: #a28537 3px dotted;
        
    }
    nav ul#main-nav li a{
        padding: 0.4em;background-color: rgba(134, 178, 45, 0);
    }
    .pr-list div{
        width: 240px;
    }
}