/* 基本のリセット */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;}
img{
    width:100%;}

/* ヘッダー */
header {
    position:relative;
    padding: 2vw;
    background-color: #fff;
    background-image: url('images/bg-image.jpg');
    background-position: 0 -5vw;
    height:50vw;
    background-size: cover;
    color:#fff;}
header.blog-header{
    height: 7.5vw;}
.title {
    font-size: 2.4vw;
    font-weight: bold;}
.rights_view{
    position:absolute;
    bottom: 1vw;
    left: 1vw;}
.rights_view img{
    width:30vw;}


/* 固定ボタンのスタイル */
.fixed_btn {
    position: fixed;
    display: block;
    z-index: 10;}
.btn_instagram {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-color: #EAEAEA;
    border-top-right-radius: 3vw;
    border-bottom-right-radius: 3vw;
    width: 4vw;
    height: 28vw;
    font-size: 2.1vw;
    text-align: center;
    text-decoration: none;
    line-height: 4vw;
    color: black;}
.btn_instagram img{width:2vw;}
.box-btn{
    right: 0;
    width:10vw;
    height:10vw;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;}
.box-btn img{
    width:60%;}
.btn_product {
    right:0;
    bottom:0;
    background-color:#EAEAEA;
    color:#000;}
.btn_company {
    bottom: 0;
    background-color:#000;
    color:white;}

/* ナビゲーションメニュー */
.navi-list {
    display: flex;
    justify-content: center;
    gap: 2vw;
    list-style: none;
    margin-top: 2vw;}
.navi-list li a {
    padding: 1vw 2vw;
    display:block;
    width:25vw;
    border: 1px solid #000;
    box-shadow:1px 1px #000;
    text-decoration: none;
    text-align:center;
    color: #000;
    font-weight: bold;}

/* セクション */
.upcomming-event {
    text-align: center;
    padding: 5vw 0;
    margin-top:3vw;
    overflow: hidden;}
.past-event {
    text-align: center;
    padding: 5vw 0;
    margin-top:3vw;
    background-color:#eee;
    overflow: hidden;}
.product{
    text-align: center;
    padding: 5vw 0;
    margin-top:3vw;}
.upcomming-event h1,.past-event h1,.product h1{
    font-size: 2.8vw;
    margin-bottom: 2vw;}
.past-event h2{
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:7vw;
    color:#ccc;
    margin-bottom:3vw;
    position:relative;
    z-index:1;}
.past-event h2 .back-ja{
    font-size:2.5vw;
    font-weight:bold;
    color:#000;
    position:absolute;
    top:5.5vw;  left:50%;
    transform:translateX(-50%);
    z-index:5;}

/* イベントリスト */
.upcomming-event-list {
    padding: 1vw 0;}
.upcomming-event-detail {
    position: relative;
    text-align: center;}
.upcomming-event-detail img {
    width: 65vw;
    height: 39vw;
    object-fit: cover;}
.upcomming-event-detail a {
    display: block;
    width: 65%;
    margin: 3vw auto 1vw;
    padding: 1vw 2vw;
    border: 1px solid #000;
    border-radius: 10vw;
    text-decoration: none;
    color: #000;
    background-color: #fff;
    transition: background-color 0.3s;}
.upcomming-event-detail a:hover {
    background-color: #f0f0f0;}
.past-event-list {
    padding: 1vw 0 3vw;}
.past-event-detail {
    position: relative;
    text-align: center;}
.past-event-detail img {
    width: 65vw;
    height: 39vw;
    object-fit: cover;}
.gap_space{
    display:block;
    height:10vw;}

/* 中央以外のスライド */
.slick-slide {
    transform: scale(.8);
    opacity:0.6;
    transition: transform .5s;}
.slick-slide a{display:none;}
/* 中央のスライド */
.slick-center{
    margin-right:auto;
    margin-left:auto;
    opacity:1;
    transform: scale(1);}
.slick-center a{display:block;}
.slick-dots li button:before{
	font-size:1.5vw!important;}
.slick-dots li.slick-active button:before{
    color: black;}
/*スライド画像*/
.slick-slide img{
    width: 65vw;
    height: 39vw;
    object-fit: cover;}

/* 製品販売 */
.two-column{
    display: flex;
    width:80%;
    gap:5%;
    margin:auto;
    align-items: center;}
.two-column img{
    width:30%;}
.two-column p{
    width:65%;
    font-size: 2.5vw;
    text-align: left;}
.product a{
    display: block;
    background:black;
    color:white;
    padding:1vw;
    width:20vw;
    margin:auto;
    text-decoration:none;}
.caution{
    width: 75%;
    margin: 5vw auto;
    padding: 3vw;
    font-size: 1.5vw;
    background-color: #eee;}
.caution_title{
    display:block;
    font-size:2.4vw;
    font-weight:bold;
    margin-bottom:3vw;}

/*フッター*/
footer{
    text-align:center;
    margin-top:5vw;
    border-top: 1px solid #000;
    padding:3vw 0;}

/* 重要なお知らせバナー */
.news-banner{
  display:flex;
  justify-content: center;
  align-items:center;
  gap:2vw;
  width: 75%;
  padding: 2vw;
  margin: 5vw auto;
  box-sizing:border-box;
  color:white;
  font-size: 2.5vw;
  font-weight:800;
  line-height:1.25;
  text-decoration:none;
  background:linear-gradient(135deg,#b91c1c,#dc2626);
  border:2px solid rgba(255,255,255,.18);
  border-radius:1vw;
  box-shadow:0 8px 20px rgba(220,38,38,.35),inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;
  overflow:hidden;}
.news-banner::before{
  content:"⚠️";
  font-size:2.5vw;
  line-height:1;
  flex:0 0 auto;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));}
.news-banner::after{
  content:"";
  position:absolute;
  top:-120%;
  left:-30%;
  width:40%;
  height:300%;
  transform:rotate(25deg);
  background:linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,0) 100%
  );
  animation:newsBannerSheen 2.8s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events:none;}
.news-banner:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(220,38,38,.35),inset 0 1px 0 rgba(255,255,255,.22);
  text-decoration:none;}
.news-banner:active{
  transform:translateY(0);}
.news-banner:focus-visible{
  outline:3px solid #fde68a;
  outline-offset:3px;
  text-decoration:underline;}
.news-banner.news-banner--bar{
  border-radius:.25rem;
  padding:.6rem .9rem;
  font-weight:700;}
@keyframes newsBannerSheen{
  0%   { transform:translateX(-120%) rotate(25deg); }
  60%  { transform:translateX(220%)  rotate(25deg); }
  100% { transform:translateX(220%)  rotate(25deg); }
}

/*記事*/
.blog-content {
    font-size: 1.5vw;
    text-align: left;
    padding: 5vw 10vw;
    line-height: 2;}
.blog-footer {
    text-align: right;
    padding: 0 5vw;}
.blog-to-top{
    display: block;
    margin: 5vw auto;
    font-size: 1.5vw;
    color: black;
}

/*スマホビュー*/
@media screen and (max-width:700px){
header.blog-header{
    height: 12vw;}
.title {
    font-size: 5vw;
    text-align: center;}
.rights_view{
    bottom: 3vw;
    left: 50%;
    transform: translateX(-50%);}
.rights_view img {
    width: 50vw;}
.navi-list{
    flex-wrap: wrap;
    margin-top:5vw;}
.navi-list li:nth-child(1) a{
    width:82vw;}
.navi-list li:nth-child(2) a{
    width:40vw;}
.navi-list li:nth-child(3) a{
    width:40vw;}
.btn_instagram {
    left: 0;
    top: auto;
    bottom: 0;
    transform: translateY(0);
    writing-mode:  horizontal-tb;
    background-color: #c3c3c3;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    width: 50%;
    height: 15vw;
    font-size: 5vw;
    line-height:15vw;}
.btn_instagram img{width:4vw;}
.box-btn{
    gap:1vw;
    right: auto;
    width:50%;
    height:15vw;
    flex-direction: row;
    font-size:5vw;}
.box-btn img{
    width:5vw;}
.btn_product {
    right:0;
    bottom:0;}
.btn_company {
    bottom: 0;}
.upcomming-event h1, .past-event h1, .product h1{
    font-size: 5vw;
    margin-bottom: 4vw;}
.upcomming-event-detail a{
    width:85%;
    padding:2vw;}
.slick-dots li button:before {
    font-size: 3vw !important;
    margin-top: 3vw;}
.gap_space{
    height:12vw;}
.past-event h2 .back-ja{
    font-size:4vw;
    width:100%;}
.slick-slide img{
    width: 80vw;
    height: 48vw;}
.two-column{
    flex-direction: column;}
.two-column img{
    width:75%;}
.two-column p{
    width:100%;
    font-size:4vw;}
.product a{
    margin-top:5vw;
    padding:3vw;
    width:50vw;}
.caution {
    width: 90%;
    margin: 10vw auto 5vw;
    font-size: 3vw;}
.caution_title{
    font-size:4vw;}
footer{
    margin-bottom:0;}
.news-banner{
    padding:3vw 6vw;
    font-size: 4vw;
    gap: 3vw;
    box-shadow:none;}
.news-banner::before{
    font-size: 4vw;}
.blog-content {
    font-size: 3.5vw;
    line-height: 2.5;}
.blog-footer {
    font-size: 3.5vw;
    padding: 0 8vw;}
.blog-to-top {
    font-size: 4vw;
    margin: 15vw auto;}
}