/* style.css */

/* copyright 2024 YuHo's Portfolio */

/* welcome 
▬▬▬.◙.▬▬▬
  ═▂▄▄▓▄▄▂
   ◢◤ █▀▀████▄▄▄▄◢◤
   █▄ YuHo ███▀▀▀▀▀▀▀▀
    ◥█████◤
  ═╩══╩═ 
*/

/* ------CSS リセット1-------- */
/* 2024 Custom CSS Reset*/
/* *{margin:0;padding:0;line-height:calc(0.25rem+1em+0.25rem)}
*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}
html{block-size:100%;-webkit-text-size-adjust:none}

@media(prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{text-rendering:optimizeSpeed;min-block-size:100%}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:5rem}:where(input,button,textarea,select),:where(input[type="file"])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(textarea){resize:vertical}
@supports(resize:block){:where(textarea){resize:block}}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}
h1{font-size:2em}:where(ul,ol){list-style-position:inside}:where(ul,ol)[role="list"]{list-style:none}
a:not([class]){text-decoration-skip-ink:auto}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(input[type="file"]){cursor:auto}:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{cursor:pointer}

@media(prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms cubic-bezier(0.25,0,0.4,1)}:where(:not(:active)):focus-visible{transition-duration:0.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;text-align:center}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled]{cursor:not-allowed} */
/* -------CSS リセット1-------- */


/* Custom Properties variable*/
/* 共通変数 */

:root {
  /* color カラー hex rgb hsla */
--white: #fff;
--black: #000;
--yellow: #ffbf41;
--lightGray: #a3a3a3;
--darkGray: #434343;
--orange: rgb(252, 56, 24);
--red: rgb(234, 0, 0);
--purple: rgb(143, 24, 255);
--blueGreen: rgb(93, 249, 195);
--green: rgb(0, 172, 0);
--gold:#B39855 ;
--attention-bg-color: rgb(255, 192, 192);
--attention-accent: rgb(192, 32, 32);
--luxuryBlack: #1a171b;
--weirdBlack: #1a171b;
--warmRed: rgb(255, 41, 91);
--white-op09: hsla(0, 0%, 100%, 0.09);
--white-op15: hsla(0, 0%, 100%, 0.15);
--white-op25: hsla(0, 0%, 100%, 0.25);
--white-op40: hsla(0, 0%, 100%, 0.4);
--white-op50: hsla(0, 0%, 100%, 0.5);
--white-op65: hsla(0, 0%, 100%, 0.65);
--white-op70: hsla(0, 0%, 100%, 0.7);
--white-op75: hsla(0, 0%, 100%, 0.75);
--white-op80: hsla(0, 0%, 100%, 0.8);
--spray1: rgb(51, 51, 51);
--spray2: rgb(41, 41, 41);

  /* gradient colorグラデーションカラー */
  --gradientF: linear-gradient(180deg, transparent, var(--luxuryBlack));
  --gradientS: linear-gradient(180deg,var(--luxuryBlack) 25%,rgba(0, 0, 10, 0.6) 60%);

--gradientLoad2: radial-gradient(rgba(114, 114, 114, 1), rgba(233, 233, 233, 1));
--gradientLoad3:linear-gradient(90deg, #b39855 0%, #fff9e6 50%, #b39855 100%);

/* fonts フォント関連*/
/* ff === font-family   fs === font-size   fw === font-weight */

  /* font-family */
  --ff-ship: "Shippori Mincho", serif;
  --ff-son: "Noto Sans JP", sans-serif;
  --ff-mont: "Montserrat", sans-serif;
  --ff-dancs: "MonteCarlo", cursive;
  --ff-recoleta: "Recoleta", serif;
  --ff-gordita: "Gordita", sans-serif;
  --ff-shippori: "Shippori Mincho", serif;

  /* font-size フォントサイズ*/
  --fs-1: 4rem;--fs-2: 4rem;--fs-3: 3.5rem;--fs-4: 2.5rem;
  --fs-5: 2.6rem;--fs-6: 2.2rem;--fs-7: 2rem;--fs-8: 1.8rem;
  --fs-9: 1.5rem;--fs-10: 1.4rem;--fs-11: 1.0rem; --fs-12:4.3rem;

  /* font-weight フォントウエイト*/
  --fw-300: 300;--fw-400: 400;--fw-500: 500;--fw-600:600;--fw-700:700;

 /* spacing 間隔*/

  --section-padding: 60px;
  --section-p2: 80px;
  /* shadow ドロップシャドウ*/

  --shadow: 0 12px 30px -10px rgba(36, 36, 36, 0.1);
  --shadow-small: 0 5px 10px -5px rgba(115, 106, 106, 0.1);
  /* border-radius  半径*/

  --radius-circle: 50%;--radius-5: 5px;--radius-25: 25px ; --radius-40: 40px;

  /* animation  関数 */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --transition-3: 1s ease;
  --transition-4: 1.3s ease;
  --transition-5: 1.7s ease;
  --cubic-in: cubic-bezier(0.8, 0.03, 0.55, 0.27);
  --cubic-out: cubic-bezier(0.34, 0.86, 0.4, 0.95);
  --timing-function:cubic-bezier(0.5,1.5,0.5,-1);
}


/* CSS リセット2 */
*,*::before,*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {list-style: none;}

a,img,span,button,ion-icon {display: block;}

a{
  color: inherit;
  text-decoration: none;
}

img {height: auto;}

button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

ion-icon {pointer-events: none;}

address {font-style: normal;}

html {
  font-family: var(--ff-mont);
  font-size: 10px;
  scroll-behavior: smooth;
}


body {
  background-color: #121316;
  color: var(--white);
  font-size: 1.6rem;
  font-weight: var(--fw-400);
  line-height: 2.15;
  overflow-x: hidden;
}

body.active { overflow: hidden; }
:focus-visible { outline-offset: 4px; } /* 擬似クラス フォーカス辺と境界線の空間*/
::-webkit-scrollbar { width: 6px; } /* 疑似要素 縦スクロールバー全体width*/
::-webkit-scrollbar-track { background-color: var(--white); } /* スクロールバー背景 */
::-webkit-scrollbar-thumb { background-color: var(--spray2); } /* ハンドル */
/* CSS リセット2 */



/* Reused 再利用 */
.container {padding-inline: 13px;}
.shape {display: none;}
.section {padding-block: var(--section-padding);}
.h1,.h2,.h3,.h4,.h5,.h6{font-family: var(--ff-mont);line-height: 1.2;}

.h1{
  font-size: var(--fs-1);
  font-family: var(--ff-dancs);
  font-weight: var(--fw-300);
  margin-block-end: 3rem;
}

.h2,.h3,.h4,.h5,.h6{font-weight: var(--fw-400);}

.h2 {font-size: var(--fs-2);}
.h3 {font-size: var(--fs-3);}
.h4 {font-size: var(--fs-4); font-family: var(--ff-recoleta);}
.h5 {font-size: var(--fs-5);}
.h6 {font-size: var(--fs-6);}

.img-holder {
  aspect-ratio: var(--width) / var(--height); /* css4 */
  /* background-color: var(--spray1); */
  overflow: hidden;
}
.after-before {
  position: relative;
  z-index: 1;
}

.after-before::before {
  content: "";
  position: absolute;
}
.img-holder.after-before::before {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  border-image: var(--gradientF);
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-cover2 {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}


.btn-icon {
  background-color: var(--bg-color,var(--white));
  border-radius: var(--border-radius ,var(--radius-circle));
  display: grid;
  place-content: center;
  transition: var(--transition-2);
}

.btn-icon path {
  transition: var(--transition-2);
}

.btn-icon:is(:hover,:focus-visible){
  background-color: var(--hover-bg-color, var(--white));
}

.btn-icon:is(:hover,:focus-visible) path{
  stroke: var(--hover-text-color, var(--black));
}


.section-subtitle {
  color: var(--white-op25);
  font-size: var(--fs-7);
  text-transform: uppercase;
  letter-spacing: 3.5px;
}

[data-reveal]{
  transform: translateY(50px);
  opacity: 0;
  transition: var(--transition-3);
}

[data-reveal='left'] {transform: translate(-50px,0);}
/* [data-reveal='right'] {transform: translate(50px,0);} */

[data-reveal].revealed {
  transform: translate(0,0);
  opacity: 1;
}

/* Reused  */


/* Loading Contents*/
.loading {
  position: fixed;
  top: 0;
  left: 0;

  /* background: linear-gradient(-45deg, #000000, #434343, #659999, #f4791f) fixed;
  background-size: 800% 800%;
  animation: Gradiet-Animation 1.5s ease infinite; */

  width: 100vw;
  height: 100vh;
  z-index: 5;
  transform-origin: bottom;
  transition: 0.5s var(--cubic-in);
  transition-delay: 0.8s;
}

@keyframes Gradiet-Animation { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.loading.loaded {
  transform: scaleX(0);
  pointer-events: none;
  display: none;
}

.loading .img,
.loading .circle {
  position: absolute;
  width: 120px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: var(--transition-3);
  transition-delay: 1.1s;
}

.loading.loaded .img,
.loading.loaded .circle { opacity: 0;}

.loading .circle { animation: rotate .5s linear infinite;}

@keyframes rotate {
  0% {transform: translate(-50%,-50%) rotate(0) /* scale(4) */;}
  100% {transform: translate(-50%,-50%) rotate(1turn);}
}

/* -------------------------------- */

/* Header Contents */
/* .navbar, */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; 
  padding-block:28px ;
  transition: var(--transition-2);
  z-index: 4;
}

.header.active {
  background-color:#121316;
  padding-block: 13px;
  box-shadow: var(--shadow);
}

.header .container ,
.navbar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar {
  position: fixed;
  top: 0;
  left: -280px;
  background-color: #110f11;
  height: 100vh;
  max-width: 280px;
  width: 100%;
  padding: 25px;
  overflow-y: auto;
  z-index: 2;
  transition: 0.2s var(--cubic-out);
  visibility: hidden;
}

.navbar.active {
  visibility: visible;
  transform: translateX(280px);
  transition-duration: 0.5s;
}


.navbar-top .logo .img {
  width: 150px;
}

.nav-closeBtn {
  width: 25px;
  height: 25px;
}

.nav-closeBtn .span {
  background-color: var(--white-op80);
  width: 25px;
  height: 3px;
  border-radius: 5px;
  transition: var(--transition-1);
}

.nav-closeBtn .one {
  transform: rotate(45deg) translate(2px,2px);
  border-radius: 5px;
}
.nav-closeBtn .two {
  transform: rotate(-45deg);
}

.nav-closeBtn:is(:hover, :focus-visible) .span { /* セレクターをまとめ */
  background-color: var(--white);
}

.navbar-list {
  text-align: center;
  padding-block: 40px;
}

.navbar-link {
  font-size: var(--fs-7);
  font-weight: var(--fw-400);
  padding-block: 2px;
  text-transform: capitalize;
  transition: var(--transition-2);
  border-radius: var(--radius-25);
}
.navbar-link:is(:hover, :focus-visible){
  color: var(--gold);
  text-decoration: underline;
  transform: scale(1.1);
}

.login-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap:15px; */
  width: 100%;
  /* background-color: var(--gold); */
  color: var(--white);
  /* padding: 8px 30px; */
  border-radius: var(--radius-25);
  margin-block-end: 50px;
  transition: var(--transition-1);
}

.login-btn:is(:hover, :focus-visible){
  
  transform: scale(1.1) ;
}

.login-btn img{
  width: 150px;
}

.login-btn .span {font-weight: var(--fw-500);}



.navbar-title {
  font-size: var(--fs-8);
  font-weight: var(--fw-500);
  line-height: 1;
  margin-block-end: 15px;
  text-align: center;
}

.navbar-text {
  color: var(--white-op75);
  
  font-weight: var(--fw-300);
  line-height: 1.5;
  text-align: center;
  margin-block-end: 10px;
}

.navbar .contact-link {
  color: var(--gold);
  font-size: var(--fs-10);
  font-weight: var(--fw-400);
  text-align: center;
}

.navbar .contact-link:is(:hover, :focus-visible){text-decoration: underline;}

.cover{
  position: fixed;
  inset: 0;
  background-color: var(--black);
  z-index: 1;
  transition: var(--transition-1);
  opacity: 0;
  pointer-events: none;
} 


.cover.active {
  opacity: 0.75;
  pointer-events: all;
}
/* -------------------------------- */

/* Hero Contents */
.hero {
  /* padding-block-start: 120px; */
  text-align: center;
  /* font-size: var(--fs-5); */
}

.hero2 {
  padding-block-start: 120px;
  text-align: center;
  /* font-size: var(--fs-5); */
}


.hero-banner {
  max-width: 300px;
  margin-inline: auto;
  margin-block-end: 20px;

}
.hero .wrapper {
  position: relative;
  text-align: left;
  height: 1.2em;
  margin-block: 10px 25px;
}
.hero .wrapper { --fs-2: 4rem; }


.hero .wrapper .strong {
  position: absolute;
  top: 0;
  left: 55%;
  transform: translate(-48%);
  width: 300px;
  font-weight: inherit;
  display: flex;
}



.hero-text {
  font-size: var(--fs-10);
  font-weight: var(--fw300);
  text-transform: uppercase;
  letter-spacing: 5px;
}

.hero .wrapper .space {padding: 0.1em;}
.hero .wrapper :is(.in, .out){
  opacity: 0;
  transform: scaleY(0);
  
}
.hero .strong.active .out {
  background-color: var(--white);
  color: var(--luxuryBlack);
  opacity: 1;
  transform: scaleY(1.1);
  animation: Wave 0.2s ease reverse forwards;
}
.hero .wrapper .in {
  animation: Wave 0.2s ease forwards;
}

@keyframes Wave {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}



/* Video Contents */
video {
  padding-block-start: 85px;
  padding-block-end: 20px;
  width: 100%;
}

/* Gallery Contents */
.gallery-list {
  display: grid;
  row-gap: 90px;
  column-gap: 15px;
}

.gallery-list2 {
  display: grid;
  row-gap: 90px;
  column-gap: 15px;
}
.gallery-item,.gallery-card{position: relative;}

.gallery-item2,.gallery-card{position: relative;}

.gallery-card :is(.card-content, .btn-icon){
  position: absolute;
  z-index: 1;
}

.gallery-card .card-content {
  bottom: -110px;
  left: 0;
  width: 100%;
  padding: 30px 12px;
}

.gallery-card .card-tag {
  color: var(--white-op70);
  font-size: var(--fs-11);
  font-weight: var(--fw300);
}

.gallery-card .card-title {
  font-weight: var(--fw-400);
  max-width: max-content;
  margin-block-end: 2px;
}

.gallery-card .card-title2 {
  font-weight: var(--fw-400);
  font-family: var(--ff-shippori);
}

.gallery-card .card-title:is(:hover, :focus-visible){
  text-decoration: underline;
}

.gallery-card .card-title2:is(:hover, :focus-visible){
  text-decoration: underline;
}
.gallery-card .btn-icon {
  top: 0;
  right: 0;
  width: 70px;
  height: 50px;
  --border-radius: 0 0 0 var(--radius-25) ;
}

.gallery-card .btn-icon img{
  width:30px;
  transform: rotate(-45deg);
}

.gallery-card .btn-icon:is(:hover, :focus-visible){
  border-bottom-left-radius: var(--radius-5);
}

/* .gallery-card { animation: changeCard 8s linear infinite;} */

.gallery-item .gallery-card:last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  animation-delay: 4s;
}

.gallery-item2 .gallery-card:last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  opacity: 0;
  visibility: hidden;
  animation-delay: 4s;
}

@keyframes changeCard {
  0%,55%,100% {
    opacity: 0;
    visibility: hidden;
  }
5%,
50%{
  opacity: 1;
  visibility: visible;
}
}

.gallery-item:is(:hover, :focus-within) .gallery-card{animation-play-state: paused ;}

.gallery-item2:is(:hover, :focus-within) .gallery-card{animation-play-state: paused ;}

.gallery .scroll-down {
  width: 60px;
  height: 60px;
  display: grid;
  place-content: center;
  margin-inline: auto;
  margin-block-start: 120px;
  border: 1px solid var(--white-op15);
  border-radius: var(--radius-circle);
  transition: var(--transition-1);
  animation: scrollDown 0.7s linear infinite alternate ;
}
.gallery .scroll-down img {width: 22px;}

.gallery .scroll-down:is(:hover, :focus-visible){
  background-color: var(--gold);
  border-color: var(--gold);
}

@keyframes scrollDown {
  0% {transform: translateY(-22px);}
  100% {transform: translateY(22px);}
}


/* Category Contents */
.category {
  --section-padding:40px;
  border-top: 1px solid var(--white-op09);
  border-bottom: 1px solid var(--white-op09);
}

.category-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 35px 10px;
}

.category-item {
  max-width: calc(50% - 5px);
}

.category-card .card-title {
  color:var(--white-op25);
  margin-block-end: 15px;
  text-align: center;
  transition: var(--transition-2);
}

.category-card:is(:hover, :focus-visible) .card-title{
  color: var(--white);
}

.card-banner.img-holder .img-cover{
  width: 60%;
  margin: 0 auto;
}

.card-banner.img-holder .img-cover2{
  width: 60%;
  margin: 0 auto;
}

/* About Contents */
.about .container{
  display: flex;
  justify-content: space-between;
  align-items: start;
}


.about .wrapper,
.about-banner { padding-inline-start: 5px; }


.about .section-title {margin-block-end: 35px; }


.about .section-text {
  font-size: var(--fs-9);
  color: var(--white-op70);
  font-weight: var(--fw-300);
  line-height: 1.7;
  margin-block-end: 35px;
  font-family: var(--ff-ship);
}

.about .img{
  width: 100px;
  margin-block-start: -20px;
}

/* .about .wrapper::before {
  top: 10px;
  left: 0px;
  background-image: url("../images/about-quote.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  display: none;
} */

.about .section-text .em {
  color: var(--white);
  font-weight: var(--fw400);
  text-decoration: underline;
}

.about-banner {position: relative; }



.about .shape-1 {
  display: block;
  position: absolute;
  bottom: 5%;
  left: 55%;
  z-index: 1;
  width:45%;
}



/* Work Contents */
.service {padding-inline: 15px;}
.service .section-subtitle {
  padding-inline: 10px;
  margin-block-end: 55px;
}
.service-card .img{display: none;}
.service-list > li:not(:last-child){
  border-block-start: 1px solid var(--white-op09);
}
.service-list > li:last-child {
  border-block-start: 1px solid var(--white-op09);
}

.service-list .service-card img{
  width: 340px;
  border-radius: 15px;
}

.service-card {padding: 30px 10px;}

.service-card .card-subtitle{
  color: var(--white-op50);
  font-size: var(--fs-8);
  font-weight: var(--fw-300);
  line-height: 1.5;
  margin-block: 10px 25px;
  font-family: var(--ff-ship);
}

.service-card .btn-icon {
  width: 55px;
  height: 55px;
  border: 1px solid var(--white);
  --bg-color:transparent;
  --hover-bg-color:var(--white);
  --hover-text-color:var(--black);
}
.service-card .btn-icon svg {width: 25px;}



/* Portfolio Contents */
.portfolio { padding-block-end: 100px;}
.portfolio .section-title{margin-block-end: 60px;}
.portfolio-card {
  position: relative;
  margin-block-end: 50px;
}

.portfolio-card :is(.card-content, .btn-icon) {
  position: absolute;
  z-index: 1;
}

.portfolio-card .card-content {
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 15px;
}

.portfolio-card .card-tag{
  color: var(--white-op70);
  font-weight: var(--fw-300);
}

.portfolio-card .btn-icon {
  top: 20px;
  right: 20px;
  width: 45px;
  height: 45px;

  --hover-bg-color: var(--gold);
  --hover-text-color:var(--white);
}

.portfolio-card .btn-icon svg {width: 20px;}

.portfolio-card .card-title:is(:hover,:focus){
  text-decoration: underline;
}


/* Footer Contents */
.footer { position: relative;}
.footer .abs-img {display: none;}
.footer-top {
  padding-block: 100px 140px;
  /* border-block-start: 1px solid var(--white-op09); */
  text-align: center;
  z-index: 1;
}

.footer-top .section-title {
  margin-block: 20px 90px;
  line-height: normal;
}
.footer .btn-icon {
  width: 60px;
  height: 60px;
  margin-inline: auto;
  --hover-bg-color: var(--gold)
}

.footer .btn-icon img {width: 30px;}
.footer-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
}

.footer-bg::before {
  inset: 0;
  background-image: var(--gradientS);
}

.footer-bg .img-cover {object-position: top;}

.footer-bg .img-cover2 {object-position: top;}

.footer-bottom .logo {
  margin-inline: auto;
  max-width: max-content;
  margin-block-end: 20px;
}

.social-list {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-link { font-weight: var(--fw-500); }

.social-link:is(:hover, :focus-visible){
  text-decoration: underline;
}

.copyright,
.social-list {
  padding-block-end: 15px;
}

.copyright {
  font-weight: var(--fw-300);
  letter-spacing: 0.5px;
  text-align: center;
}

/* Back top Contents */
.back-top-btn {
  position: fixed;
  bottom: 30px;
  right: -70px;
  width: 70px;
  height: 70px;
  border:1px dashed currentColor;
  color: var(--gold);
  font-size: var(--fs-10);
  border-radius: var(--radius-circle);
  display: grid;
  place-items: center;
  visibility: hidden;
  transition: var(--transition-2);
  z-index: 3;
}

.back-top-btn.show {
  transform:  translateX(-100px);
  visibility: visible;
}

.back-top-btn:hover {color:var(--white);}


/* Cursor Contents */
.cursor{display: none;}



/* Responsive スマホタブレット端末用*/
@media screen and (min-width:575px) {
  
/* Custom Properties variable*/
/* 共通変数 */

:root {

    /* spacing 間隔 */
    --section-padding:80px;
}
 /* Reused 再利用 */
.container {
  max-width: 540px;
  width: 100%;
  margin-inline: auto;
}


/* .service-card .card-subtitle {
  font-size: var(--fs-9);
} */

:is(.header, .gallery, .category, .portfolio,.video ) .container {max-width: unset;}

  /* Header Contents */

  /* .hero .wrapper {
    --fs-2:9rem;
    margin-block: -5px 10px;
  }
 
  .hero .wrapper .strong {left: 30%;} */


 .navbar {
  max-width: 550px;
  left: -550px;
}
  .navbar.active {
    transform: translateX(550px);
  }

  /* Gallery Contents */
  .gallery-list {
    grid-template-columns: 2fr 2fr;
    row-gap: 90px;
  }

  .gallery-list2 {
    grid-template-columns: 2fr 2fr;
    row-gap: 100px;
  }

 

 .gallery-card .btn-icon {
  transform-origin: top right;
  transform: scale(0);
 }
 .gallery-card:is(:hover, :focus-within) .btn-icon {
  transform: scale(1);
 }

 .gallery-card :is(.card-title,.card-title2, .card-tag){
  transform: translateY(10px);
  opacity: 0;
  transition: var(--transition-2);
 }


 .gallery-card .card-title2 {
  font-weight: var(--fw-400);
  font-family: var(--ff-shippori);
  font-size: var(--fs-8);
}

 .gallery-card .card-tag {transition-delay: 0.15s;}

 .gallery-card:is(:hover, :focus-within) :is(.card-title,.card-title2,.card-tag) {
  transform: translateY(0);
  opacity: 1;
 }
 .gallery [data-reveal] {
  transform: translateY(0);
  opacity: 1;
 }
  /* Category Contents */
 .category-item{max-width: 170px;}


  /* Service Contents


  /* Portfolio Contents */
 .portfolio-list {
    display: flex;
    column-gap: 30px;
  }
  
  /* Footer Contents */
  .footer-bottom {padding-block-end: 40px;}
  .footer-bottom .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }

  .footer-bottom .logo {margin: 0;}

  .copyright,
  .social-list {padding-block-end: 0;}

  .social-list {
    order: 1;
    justify-content: flex-end;
  }
 }
/* Responsive スマホタブレット端末用*/
@media screen and (min-width:768px) {


/* Custom Properties variable*/
/* 共通変数 */
:root {

/* fonts フォント関連*/
/* ff === font-family   fs === font-size   fw === font-weight */
  --fs-3: 4.35rem;
}
  /* Reused 再利用 */
  .container {max-width: 720px;}
  
/* Video Contents */
video {
  padding-block-start: 100px;
  padding-block-end: 20px;
  width: 100%;
}

.hero .wrapper { --fs-2:7rem; }
.hero .wrapper .strong {left: 40%;}
  /* Header */


  .gallery-card .card-title2 {
    font-weight: var(--fw-400);
    font-family: var(--ff-shippori);
    font-size: var(--fs-4);
  }

  /* About Contents */

  .about-banner {
    max-width: 500px;
    margin-inline:auto ;
  }

.category .container{
  --section-padding:40px;
  margin-block: 100px 100px;
}

.category-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 35px 10px;
}

.category-item {
  max-width: calc(50% - 150px);
}

.category-card .card-title {
  color:var(--white-op25);
  margin-block-end: 15px;
  text-align: center;
  transition: var(--transition-2);
}

.category-card:is(:hover, :focus-visible) .card-title{
  color: var(--white);
}

  /* Work Contents */
  .service-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .service-card .card-subtitle {
    margin-block-end: 15px;
  }

}

/* Responsive スマホタブレット端末用*/
@media screen and (min-width:992px) {


/* Custom Properties variable*/
/* 共通変数 */
:root {

/* fonts フォント関連*/
/* ff === font-family   fs === font-size   fw === font-weight */
  --fs-1: 8rem;
 }
  /* Reused 再利用 */
  .section {position: relative;}
  .container {max-width: 960px;}

  .shape {
    display: block;
    position: absolute;
  }

  .h2 {font-size: var(--fs-2);}

  /* Header Content */
  .header {padding-block: 30px;}
  .navbar {
    padding: 40px;
    padding-block-end: 10px;
  }
  .navbar-link{--fs-7:2.4rem}
  /* About Contents */
  .navbar-title {--fs-8:2.2rem}

  .navbar-text {
    font-size: 1.9rem;
    margin-block-end: 30px;
  }

/* Video Contents */
video {
  padding-block-start: 60px;
  padding-block-end: 20px;
  width: 100%;
}

   /* Hero Contents */
  .hero{padding-block-start: 60px;}
  .hero .container{
    position: relative;
    z-index: 1;
  }


  .hero-title {
    text-align: left;
  }


  .hero .wrapper {
    --fs-2:8rem;
    margin-block: -5px 10px;
  }
 
  .hero .wrapper .strong {left: 40%;}

  .hero-banner {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    max-width: 200px;
    z-index: -1;
  }

  .hero .shape {display: none;}


  /* Gallery Contents*/
  .gallery{padding-block-end: 140px;}

  .gallery-list {grid-template-columns: repeat(4,1fr);}

  .gallery-list2 {grid-template-columns: repeat(4,2fr);}


  .gallery-item:nth-child(odd){
    margin-block-start: 100px;
  }
 
  .gallery-item2:nth-child(odd){
    margin-block-start: 0px;
  }

.gallery .card-title{
  font-size: var(--fs-4);
}

.gallery-card .card-title2 {
  font-weight: var(--fw-400);
  font-family: var(--ff-shippori);
  font-size: var(--fs-8);
}

  .gallery .scroll-down {
    width: 85px;
    height: 85px;
    margin-block-start: 130px;
    }

  .gallery .scroll-down img {width: 26px;}

  .gallery .shape {
    left: 5%;
    bottom: 15%;
  }

  /* Category Contents*/



  .category-card {position: relative;}

  .category-card .card-banner {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%,-20px);
    width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: var((--transition-2));
    }

    .category-card:is(:hover, :focus-visible) .card-banner{
      transform: translate(-50%,0);
      visibility: visible;
      opacity: 1;
    }
    
    .category-card .card-title {--fs-4:4.5rem};

    .category-item {min-width: max-content;}

    .category-list {
      row-gap: 0;
      justify-content: flex-start;
    }

  /* About Content */
  .about .container {
    grid-template-columns: 0.9fr 1fr;
    align-items: flex-start;
    gap: 80px;
  }
  
  .about-content .img{
    width: 250px;
    margin-block-end: 30px;
  }

.about .section-text {
  font-size: var(--fs-6);
  color: var(--white-op70);
  font-weight: var(--fw-300);
  line-height: 1.7;
  margin-block-end: 35px;
  font-family: var(--ff-ship);
}

  .about-content {order: 1;}


  .about-banner .shape-2 {
    width: 100%;
    bottom: -20px;
    left: 0;
    animation: moving 8s linear infinite;
  }

  @keyframes moving {
    0%,
    100%{transform: translateY(0);}
    50%{transform: translateY(30px);}
  }

  .about .shape-3 {
    bottom: 0;
    right: 0;
  }

  /* Work Contents */
  .service-card {position: relative;}

  .service-card .img{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-1);
    z-index: -1;
  }  

  .service-card:is(:hover, :focus-within) .img {
    opacity: 1;
    visibility: visible;
  }

  /* Portfolio Contents*/
  .portfolio {
    padding-block-end: 150px;
    margin-block-end: 60px;
  }

  .portfolio .shape {
    bottom: 0;
    right: 0;
  }

  /* Footer Contents */

  .footer .shape {
    top: 25%;
    left: 0;
  }

  .footer .abs-img {
    display: block;
    position: absolute;
    max-width: max-content;
    z-index: -1;
  }

  .footer .abs-img-1 {
    border-radius: 30%;
    width: 9%;
    top: 12%;
    left: 10%;
  }

  .footer .abs-img-2 {
    border-radius: 50%;
    width: 14%;
    top: 15%;
    right: 0;
  }

  .footer .abs-img-3 {
    border-radius: 50%;
    width: 16%;
    left: 0;
    bottom: 10%;
  }
  .footer .abs-img-4 {
    border-radius: 30%;
    width: 9%;
    right: 15%;
    bottom: 10%;
  }

  /* Cursor Contents */
    .cursor {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 75px;
      height: 75px;
      background-color: var(--white);
      mix-blend-mode: exclusion;
      border-radius: var(--radius-circle);
      transform: translate(-50%, -50%) scale(0.35);
      transition: transform 0.25s;
      pointer-events: none;
      z-index: 6;
    }

   .cursor.hovered { transform: translate(-50%, -50%) scale(1.2); }

   .cursor.disabled { transform: translate(-50%, -50%) scale(0); }
  
}

/* Responsive スマホタブレット端末用*/
@media screen and (min-width:1200px) {

/* Custom Properties variable*/
/* 共通変数 */
:root {

  
/* fonts フォント関連*/
/* ff === font-family   fs === font-size   fw === font-weight */
  --fs-1: 10rem;
  --fs-2: 9rem;
  --fs-3: 6.8rem;
  --fs-4: 3.6rem;
  --fs-6: 2.8rem;
 }
  /* Reused 再利用 */
  .section {padding-block: 0;}
  .container{max-width:1140px;}


/* Video Contents */
video {
  padding-block-start: 20px;
  padding-block-end: 20px;
  width: 100%;
}

  /* Header Contents */
  .header .container{padding-inline: 35px;}
   
  /* Hero Contents */
  .hero{padding-block: 60px 60px}
  .hero .container{max-width: 1250px;}
  .hero .wrapper {
    --fs-2:10rem;
    margin-bottom: -10px 15px;
  }

  .hero .wrapper .strong {left: 35%;}

  .hero-text {
    --fs-10:2rem;
    font-weight: var(--fw-400);
    letter-spacing: 7px;
   text-align: center;
  }

  .hero-banner {max-width: 290px;}

  .hero .shape {
    display: block;
    top: 130%;
    left: 0;
  }


  /* Gallery Contents*/

  .gallery {
    margin-block: 50px 100px;
  }
  .gallery-list {gap: 50px;}
  .gallery-list2 {gap: 50px;}
  .gallery-card .card-title{font-weight: var(--fw-400);
    font-size: var(--fs-7);
  }

  .gallery-card .card-title2 {
    font-weight: var(--fw-400);

    font-family: var(--ff-shippori);
    font-size: var(--fs-7);
  }
  /* Category Contents*/
  /* .category-list {column-gap: 15px;}
  .category-card .card-title{--fs-4: 7rem;} */
  .category {
  --section-padding:60px;
  border-block: 1px solid var(--white-op09);
 
}

.category-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 35px 10px;
}

.category-item {
  max-width: calc(50% - 5px);
}

.category-card .card-title{
  color:var(--white-op25);
  margin-block-end: 15px;
  text-align: center;
  transition: var(--transition-2);

}

.category-card:is(:hover, :focus-visible) .card-title{
  color: var(--white);
}


  /* About Contents*/
  .about .container { gap: 120px; 

    margin-block: 100px 150px;}

  .about .shape-1 { width: max-content; }

  .about .section-title { margin-block-end: 70px; }

  .about .wrapper { padding-inline-start: 80px; }

  .about .wrapper::before {
    width: 35px;
    height: 30px;
  }

  .about .section-text {
    --fs-6: 3.2rem;
    margin-block-end: 50px;
  }
.about-banner {position: relative;}
  .about .shape-1 {
  display: block;
  position: absolute;
  bottom: 0%;
  left: 55%;
  z-index: 1;
  width: 50%;
}

.service {
  margin-block: 20px 230px;
}
  .service-card { padding-block: 50px; }

  .service-card .card-subtitle { --fs-7: 2.4rem; }

  .service-card .img { width: max-content; }

  .service-card .btn-icon {
    width: 95px;
    height: 95px;
  }

  .service-card .btn-icon svg { width: 40px; }



   /* Portfolio Contents*/

  .portfolio-list { column-gap: 90px; }
  .portfolio-card { margin-block-end: 100px; }
  .portfolio-card .card-content { padding-inline: 50px; }
  .portfolio-card .btn-icon {
    width: 60px;
    height: 60px;
    top: auto;
    bottom: 45px;
    right: 50px;
    opacity: 0;
    transition: var(--transition-2);
  }

  .portfolio-card .btn-icon svg { width: 25px; }

  .portfolio-card:is(:hover, :focus-within) .btn-icon { opacity: 1; }



  /* Footer Contents */

  .footer-top { padding-block: 300px; }

  .footer-top .section-title {
    --fs-2: 7rem;
    margin-block-start: 50px;
  }

  .footer .btn-icon {
    width: 90px;
    height: 90px;
  }

  .footer .btn-icon img { width: 45px; }
}

/* Responsive スマホタブレット端末用*/
@media screen and (min-width:1400px) {

/* Custom Properties variable*/
/* 共通変数 */
:root {

/* fonts フォント関連*/
/* ff === font-family   fs === font-size   fw === font-weight */
    --fs-1: 13rem;
    --fs-2: 10rem;
    --fs-3: 8rem;
    --fs-4: 5.5rem;
 }
  /* Reused 再利用 */
  .container { max-width: 1320px; }

  :is(.header, .gallery, .category, .portfolio ) .container { max-width: 1580px; }

 


   /* Header Contents */

  .header .container { padding-inline: 60px; }



  /* Hero Contents */

  .hero .container { max-width: 1500px; }

  .hero-content { margin-inline-end: 400px; }

  .hero .wrapper { --fs-2: 11rem; }

  .hero-text { --fs-10: 2.4rem; }

  .hero-banner { max-width: max-content; }


  .hero .wrapper .strong {left: 50%;}

  /* Gallery Contents*/

  .category .container { padding-inline: 40px; }

  .category-card .card-title { --fs-4: 8rem; }

  .category {
  --section-padding:40px;
  border-block: 1px solid var(--white-op09);
}

  .category-list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 35px 10px;
}

.category-item {
  max-width: calc(50% - 5px);
}

.category-card .card-title {
  color:var(--white-op25);
  margin-block-end: 15px;
  text-align: center;
  transition: var(--transition-2);
}

.category-card:is(:hover, :focus-visible) .card-title{
  color: var(--white);
}


  /* About Contents */

  .about { padding-block: 130px 120px; }

  .about-banner {position: relative;}
  .about .shape-1 {
  display: block;
  position: absolute;
  bottom: 0%;
  left: 55%;
  z-index: 1;
  width: 50%;
}

  /* Work Contents */

  .service { padding-inline: 70px; }

  .service-card { padding-block: 65px; }



   /* Portfolio Contents*/

  .portfolio .container { padding-inline: 45px; }



   /* Footer Contents */

  .footer-top .container { max-width: 1200px; }

 .footer .section-title {
  font-size: var(--fs-4);
 }

}