/* 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.2rem; --fs-12:4.3rem;
  
    /* font-size フォントウエイト*/
    --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);
    margin-block-end: 20px;
}
  
  .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);
  }
  
  .title {
    font-size: 1.2rem;
    text-align: center;
    margin-top: 30px;
    font-family: "Shippori Mincho", serif;
  }

  .img-cover {
    margin: 20px auto;
    width: 90%;
    /* height: 100%; */
    object-fit: cover;
  }
  
  .img-cover02 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .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 2s ease infinite;
  
    width: 100vw;
    height: 100vh;
    z-index: 5;
    transform-origin: bottom;
    transition: 0.5s var(--cubic-in);
    transition-delay: 1.1s;
  }
  
  @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 1s 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 .strong {
    position: absolute;
    top: 0;
    left: 55%;
    transform: translate(-50%);
    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%;
  }


  .video2 {
    margin: 30px auto;
    width: 250px;

}

    .video3 {
    margin: 30px auto;
    width: 90%;
}

  
  /* Gallery Contents */
  .gallery-list {
    display: grid;
    row-gap: 90px;
    column-gap: 15px;
  }
  .gallery-item,.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-9);
    font-weight: var(--fw300);
  }
  
  .gallery-card .card-title {
    font-weight: var(--fw-400);
    max-width: max-content;
    margin-block-end: 2px;
    font-family: var(--ff-shippori);
  }
  
  .gallery-card .card-title: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;
  }
  @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 .scroll-down {
    width: 60px;
    height: 60px;
    display: grid;
    place-content: center;
    margin-inline: auto;
    margin-block-start: 55px;
    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: 80%;
    margin: 0 auto;
  }
  
  .card-banner.img-holder .img-cover02{
    width: 100%;
    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;
  }
  
  .footer-bg::before {
    inset: 0;
    background-image: var(--gradientS);
  }
  
  .footer-bg .img-cover {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-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-tag){
    transform: translateY(10px);
    opacity: 0;
    transition: var(--transition-2);
    font-family: var(--ff-shippori);
   }
  
   .gallery-card .card-tag {transition-delay: 0.15s;}
  
   .gallery-card:is(:hover, :focus-within) :is(.card-title, .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%;
  }
  
  
    /* Header */

  
    /* 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 .container3{
        max-width: 960px;
    }
  
    .shape {
      display: block;
      position: absolute;
    }
  
    /* 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%;
  }
  
  .video2 {
    margin: 30px auto;
    width: 250px;

}

  .video3 {
    margin: 50px auto;
    width: 900px;
}


     /* 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: 35%;}
  
    .hero-banner {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      max-width: 200px;
      z-index: -1;
    }
  
    .hero .shape {display: none;}
  
  
    .title {
        font-size: 2rem;
        text-align: center;
        margin-top: 30px;
        font-family: "Shippori Mincho", serif;
      }
    .img-cover {
        margin: 20px auto;
        width: 900px;
        /* height: 100%; */
        object-fit: cover;
      }

      .img-cover02 {
        margin: 20px auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
  
    /* Gallery Contents*/
    .gallery{padding-block-end: 140px;}
  
    .gallery-list {grid-template-columns: repeat(4,1fr);}
  
    .gallery-item:nth-child(odd){
      margin-block-start: 100px;
    }
   
    .gallery .scroll-down {
      width: 85px;
      height: 85px;
      margin-block-start: 100px;
      }
  
    .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: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 .container3{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: 40%;}
  
    .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;
    }

    .title {
        font-size: 2rem;
        text-align: center;
        margin-top: 40px;
      }


    /* Gallery Contents*/
  
    .gallery {
      margin-block: 100px 100px;
    }
    .gallery-list {gap: 50px;}
    .gallery-card .card-title{font-weight: var(--fw-300);
      font-family: var(--ff-shippori);}
  
  
    /* 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: 13rem; }
  
    .hero-text { --fs-10: 2.4rem; }
  
    .hero-banner { max-width: max-content; }
  
  
  
    /* Gallery Contents*/
  
    .category .container { padding-inline: 40px; }
  
    .category-card .card-title { --fs-4: 8rem; font-family: var(--ff-shippori);}
  
    .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);
    font-family: var(--ff-shippori);
  }
  
  .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);
   }
  
  }