@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;
}
header {
   display: none;
}

.work_content {
   display: block;
}

.work_content .swiper-button-prev,
.work_content .swiper-button-next {
   display: none;
}

.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: 30;
         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;
         color: inherit;
         text-decoration: none;
      }

   .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{
   position: fixed;
   top: 0;
   right: 0;
   width: 84%;
   z-index: 20;
   background: transparent;
}

.primary_content {
   width: 100%;
   padding-top: 80px;
}

.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_nav a.active {
   background: #ffffff;
   color: #000000;
   padding: 2px 8px;
}

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

.work_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 {
   text-align: center;
   position: absolute;
   bottom: 8px;
}

.swiper-pagination-bullet{
   width: 6px;
   height: 6px;
   margin: 0 6px!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専用要素を非表示 */
.sp_logo , .sp_nav , #hamburger , .global_nav , .pc_logo , .pc_nav {
   display: none;
}

.primary_content {
   padding-top: 0;
}

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

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

/* ヘッダー */
header {
   display: flex;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 110px;
   align-items: center;
   justify-content: space-between;
   padding: 0 80px;
   background: #111111;
   z-index: 100;
   border-bottom: solid 1px #fefefe;
}

.header_logo {
   display: flex;
   align-items: center;
   height: 100%;
   padding: 36px 0;
   gap: 2px;
}

.header_logobox {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.header_logobox .svg-wrapper {
   height: 100%;
   width: auto;
   transition: transform 0.1s ease-out;
   transform-style: preserve-3d;
   perspective: 1000px;
}

.header_logobox .svg-wrapper img {
   height: 100%;
   width: auto;
   transform: none;
   transform-origin: center center;
   transition: transform 0.5s ease;
}

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

.header_nav {
   font-size: 18px;
}

.header_nav ul {
   display: flex;
   gap: 30px;
}

.header_nav a.active,
.pc_nav a.active {
   background: #ffffff;
   color: #000000;
   padding: 2px 8px;
}

/* ワークコンテンツ */
.work_content {
   margin-top: 180px;
   padding-top: 20px;
   overflow: hidden;
}

.work_content .category {
   height: fit-content;
   text-align: left;
   padding: 0;
   margin-left: 80px;
   margin-bottom: 10px;
}

.work_content .category h2 {
   font-size: 1.8rem;
   display: inline-block;
}

.work_content .swiper {
   width: calc(100% - 80px);
   margin-left: 80px;
   margin-bottom: 80px;
   height: auto;
   --add-bottom: 50px;
   padding-bottom: var(--add-bottom);
   overflow: visible !important;
}

.work_content .swiper-pagination {
   position: relative;
   bottom: unset;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 6px;
   width: 100%;
   margin-top: 12px;
   padding: 0;
}

.work_content .swiper-pagination .swiper-pagination-bullet {
   margin: 0 !important;
}

.work_content .swiper-slide {
   width: auto;
}

.work_content .swiper-slide .item {
   height: 33vh;
   width: fit-content;
   overflow: hidden;
}

.work_content .swiper-slide .item a {
   display: block;
   height: 100%;
}

.work_content .swiper-slide .item a img {
   height: 100%;
   width: auto;
   display: block;
}

/* swiperナビゲーションボタン */
.work_content .swiper-button-prev,
.work_content .swiper-button-next {
   display: block;
   visibility: visible !important;
}

.work_content .swiper-button-prev {
   left: -62px;
}

.work_content .swiper-button-next {
   right: 18px;
}

.work_content .swiper-button-prev::after {
   content: "";
   display: block;
   position: relative;
   width: 20px;
   height: 20px;
   border-top: solid 2px #fff;
   border-right: solid 2px #fff;
   transform: rotate(225deg);
   transition: .5s;
   padding-left: 20px;
}

.work_content .swiper-button-next::after {
   content: "";
   display: block;
   position: relative;
   width: 20px;
   height: 20px;
   border-bottom: solid 2px #fff;
   border-left: solid 2px #fff;
   transform: rotate(225deg);
   transition: .5s;
}

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

#copyright {
   position: static;
}

#time {
   display: block;
   position: static;
}
/*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);
   }
}