@charset "UTF-8";

body {
   font-family: 'Helvetica Neue', 'Helvetica', 'Avenir', sans-serif;
   font-size: 1.6rem;
   font-weight: normal;
   line-height: 150%;
   background: #111111;
   color: #fefefe;
   cursor: default;
   letter-spacing: 0.04em;
}
.wrapper {
   width: 100%;
   padding: 0px 20px;
}

.home_main{
   display: flex;
   justify-content: space-between;
}

#title{
         padding:  10px;
         font-size: 35px;}

.pc_nav , .pc_logo{
   display: none;
}

.sp_logo{
         z-index: 20;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         position: fixed;
         top: 24px ;
         width: 16%;
         height: calc( 100vh - 24px );
         padding: 4px 0px 24px 0px;
         border-right: solid 1px;
      }

   .sp_logo .sp_logobox {
      width: 100%;
      height: auto;
      justify-content: center;
      align-items: center;
}


.sp_logo .sp_logobox img {
   width: 100%;
   height: auto;
   object-fit: contain; /* 画像を親要素にフィットさせる */
}

.sp_logobox .tw{
   width: 100%;
   height: auto;
   display: block;
}

.r1-fixed-area{
   position: relative;
   width: 100%;
   height: 77%;
   padding-top: 10px;
   padding-bottom: 10px;
}

.r1-fixed-area .r1{
   position: absolute; /* 親要素に対して絶対位置 */
      left: 50%;
      top: 0; /* 初期位置を親要素の一番上に設定 */
      transform: translateX(-50%) rotate(0deg); /* 初期の回転を設定 */
      transition: transform 0.1s linear; /* 回転と移動のスムーズなアニメーション */
      transform-origin: 50% 75%; /* 回転軸を指定 */
}

.r1 img {
   width: 100%; /* 画像がコンテナにフィットするように調整 */
}


.sp_logo .sp_logobox img{
   position: relative;
   transform: rotate(90deg);
   transform-origin:left top;
   height: 40px;
   left: 80%;
}

.pc_nav {
   display: none;
}

.primary_content{
   width: 100%;
}

#hamburger {
   position: relative;
   display: block;
   width: 72%;
   height: 30px;
   margin: 44px auto;
   left: 20px;
}
#hamburger span {
   position: absolute;
   top: 50%;
   left: 0;
   display: block;
   width: 100%;
   height: 1px;
   background-color: #fefefe;
}
#hamburger::before {
   content: '';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: #fefefe;
}

#hamburger::after {
   content: '';
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 1px;
   background-color: #fefefe;
}


/*スマホメニュー*/
.global_nav{
   width: 84%;
   margin: 0 0 0 auto;
}

.sp_nav{
   z-index: 10;
   position: fixed;
   top: 0;
   right: 0;
   width: 100%;
   height: 100vh;
   display: block;
   background: linear-gradient(rgba(17,17,17,1) 0%, rgba(255,126,0,1) 100%);;
   opacity:0;
   transform: translateY(-100%);
   transition: all .2s ease-in-out;
   padding: 0px 20px;
}

.sp_nav ul {
   width: 84%;
   margin:0 0 0 auto;
   left: 20px;
}

.sp_nav li {
   margin-left: 14%;
   font-size: 20px;
   height: auto;
   margin-bottom: 28px;
}
.sp_nav li span {
   font-size: 18px;
   color: #000000;
}
.sp_nav li a, .sp-nav li span {
   display: block;
   margin:  15px;
   
}
.sp_nav .sp-insta a img{margin: 18px;
                        width: 25px;}


/*-閉じるアイコンー*/
.sp_nav .close {
   position: relative;
   display: block;
   width:  72%;
   height: 30px;
   margin: 44px auto 80px auto;
   left: 20px;
}

.sp_nav .close:hover{
   opacity: 0.3;
}

.sp_nav .close::before {
   content: '';
   display: block;
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   height: 1px;
   background: #fefefe;
   transform: rotate(8deg);
}
.sp_nav .close::after {
   content: '';
   display: block;
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   height: 1px;
   background: #fefefe;
   transform: rotate(-8deg);
}
.toggle {
   transform: translateY(0);
   opacity: 1;
}

.sp_content .category{
   height: fit-content;
   text-align: left;
   padding: 5% 0 0 26%;
}

.sp_content .category h2{
   font-size: 1.2rem;
   display: inline-block;
}

.swiper {
   width: calc(100% + 20px);
   height: auto;
   --add-bottom: 50px;
   padding-bottom: var(--add-bottom);
   margin-bottom: 10px;
}

.swiper [class^="swiper-button-"]{
   top: calc(50% - var(--add-bottom) / 2);
}

.swiper-wrapper{
right: 0px;
}

.swiper-slide{
   object-fit: cover;
   display: flex;
   align-items: center;
}

.swiper-wrapper .swiper-slide .item a{
   width: 100%;
   height: auto;
}

.swiper-wrapper .swiper-slide .item a img{
   width: 100%;
   height: auto;
   border-radius: 35px;
}

.swiper-pagination-bullet{
   width: 10px;
   height: 10px;
   margin: 0 10px!important;     /* 追加 */
   background-color: #FFFFFF;
}

/*footer*/
footer {
   width: 100%;
   display: flex;
   justify-content: right;
   align-items: center;
   position: relative;
   bottom: 0px;
   height: 60px;
   color: #FFFFFF;
   font-size: 10px;
   font-weight: 100;
}

#time{
display: none;
}
/*footer*/


/*------tablet------*/
@media (min-width:768px) {



   } /*------tablet------*/








/*------note_pc------*/
@media (min-width:960px) {

.sp_content , .sp_logo , .sp_nav , #hamburger{
   display: none;
}

.wrapper {
   width: 100%;
   padding: 0px 0px;
}

.global_nav{
   width: 100%;
   height: 27.5vh;
   margin: 20px 0;
}

.pc_nav{
   display: inline-block;
   font-size: 20px;
   position: fixed;
   left: 80%;
   height: 27.5vh;
}

.pc_nav ul{
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 3%;
   height: 100%;
}

.home_main{
   display: block;
   width: 100%;
   height: 100vh;
}


.pc_logo {
   margin-top: 5%;
   display: flex;
   width: 100%;
   height: 45vh;
   justify-content: space-between;
   align-items: center; /* ロゴを垂直方向で中央揃え */
}

.pc_logobox {
   display: flex;
   align-items: center; /* ロゴをボックス内で中央揃え */
   justify-content: center;
   height: 100%;
   width: auto;
}

.svg-wrapper {
   width: 100%;
   height: 100%;
   transition: transform 0.1s ease-out; /* なめらかなアニメーション */
   transform-style: preserve-3d;
   perspective: 1000px; /* 3D効果を強調 */
}

.pc_logobox .svg-wrapper img {
   width: 100%;
   height: 100%;
    transform-origin: center center; /* 中央を基点に回転 */
    transition: transform 0.5s ease; /* スムーズなアニメーション */
}

.pc_logobox:hover{
      animation: windmill 0.5s 1 ease-out;
}

/*footer*/
footer {
   width: 100%;
   display: flex;
   justify-content: space-between;
   position: fixed;
   bottom: 0px;
   height: 60px;
   color: #FFFFFF;
   font-size: 16px;
   font-weight: 100;
}

#copyright{
   position: fixed;
   left: 80%;
}

#time{
   display: block;
   position: fixed;
   left: 5%;
}
/*footer*/

} /*------note_pc------*/







/*-------css animation---------*/
@keyframes windmill {
   0% {
      transform: rotateX(0deg);
   }
   14% {
      transform: rotateX(180deg);
   }
   28% {
      transform: rotateX(0deg);
   }
   42% {
      transform: rotateX(180deg);
   }
   56% {
      transform: rotateX(0deg);
   }
   70% {
      transform: rotateX(180deg);
   }
   85% {
      transform: rotateX(90deg);
   }
   100% {
      transform: rotateX(0deg);
   }
}