@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/*
font-family: "Noto Sans JP", sans-serif;
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Gothic+A1&display=swap');
/*
font-family: "Cormorant", sans-serif;
*/

@import url('');
/*
font-family: 
*/

/*=================================================
 root
=================================================*/

:root {
  /* color */
  --cr_main: #111111;
  --cr_sub:
  --cr_light: #FFF;
  --cr_text: #DEDEDE;
  --cr_white: #FFF;

  /* font */
  --ft_text: "Noto Sans JP", sans-serif;
  --ft_en: "Cormorant", sans-serif;
  --ft_hd: 
}

/*=================================================
 html
=================================================*/

html {
  font-size: 62.5%;
}

/*=================================================
 body
=================================================*/

body {
  font-family: var(--ft_text);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--cr_text);
  background-color: var(--cr_main);
}

/*=================================================
 fade
=================================================*/

body.fade-out {
  animation: fullBodyFade 1s ease-in-out forwards;
  transform-origin: center;
}

@keyframes fullBodyFade {
  0% {
    opacity: 1;
    filter: none;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    filter: blur(2px) brightness(110%) saturate(120%);
    transform: scale(1.01);
  }
  100% {
    opacity: 0;
    filter: blur(25px) brightness(120%) saturate(140%);
    transform: scale(1.01);
  }
}


/*=================================================
 canvas
=================================================*/

#starCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
  pointer-events: none;
}

/*=================================================
 header
=================================================*/

header {
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999; 
  position: sticky;
  mix-blend-mode: difference;
}

header .header-inner {
  max-width: 1340px; 
  height: 200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0; 
}

header .header-inner .header-logo {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.07em;
}   

header .header-inner nav {
  margin-left: auto;

  display: flex;
}

header .header-inner nav ul {
  display: flex;
  gap: 5rem;
}

header .header-inner nav ul li a {
  flex-grow: 1; 
  font-size: 13px; 
  font-weight: 500;
  text-decoration: none;
  color: var(--cr_text);
}

header a {
  transition: filter 0.5s ease;
}

header a:hover {
  filter: brightness(35%);
}

@media screen and (max-width: 1400px) {
  header {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  header .header-inner {
    height: 100px;
  }
}

/*=================================================
 hero
=================================================*/

.hero-intro {
  height: calc(100vh - 450px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media screen and (Max-width: 768px){
  .hero-intro {
    height: calc(100vh - 350px);
  }
}

/*==================================================
 born-in-japan
==================================================*/

.born-in-japan {
  width: 100%;
  height: 51px;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  padding-top: 70px;
  pointer-events: none;
}

/*==================================================
 arataportfoliosite
==================================================*/

.arataportfoliosite {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 135px;
  pointer-events: none;
}

@media screen and (Max-width: 768px){
  .arataportfoliosite {
    font-size: 50px;
    margin-bottom: 100px;
    line-height: 40px;
    padding: 0 20px;
  }
}

/*=================================================
 view
=================================================*/

.view {
  width: 100%;
  height: 51px;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  margin-bottom: 20px;
}

.view a {
  transition: filter 0.5s ease;
}

.view a:hover {
  filter: brightness(35%);
}

@media screen and (Max-width: 1340px){
  .view {
    padding: 0 20px;
    height: 51px;
    font-size: 14px;
    margin-bottom: 20px;
  }
}

@media screen and (Max-width: 768px){
  .view {
    height: 51px;
    font-size: 16px;
  }
}

/*=================================================
 fadein
=================================================*/

.born-in-japan, .arataportfoliosite, .view {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/*=================================================
 chatch
=================================================*/

.catch {
  width: 100%;
  background-color: var(--cr_main);
}

.catch .jp {
  max-width: 1340px;
  height: 59px;
  margin: 0 auto;
  font-size: 30px;
  font-weight: 300;
  align-items: center;
  display: flex;
  color: var(--cr_white);
}

.catch .en {
  max-width: 1340px;
  height: 112px;
  margin: 0 auto;
  font-size: 20px;
  font-weight: 300;
  align-items: center;
  display: flex;
  color: var(--cr_white);
}

@media screen and (Max-width: 1400px){
  .catch {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 852px){
  .catch .jp {
    font-size: 25px;
  }

  .catch .en {
    font-size: 18px;
  }
}

@media screen and (Max-width: 545px){
  .catch .jp {
    font-size: 20px;
  }

  .catch .en {
    height: 80px;
    font-size: 16px;
  }
}

/*=================================================
 line
=================================================*/

.line {
  width: 100%;
  background-color: var(--cr_main);
  opacity: 0; 
  transform: translateY(20px); 
}

.line.show {
  width: 100%;
  opacity: 1; 
  transform: translateY(0); 
}

.line .box {
  max-width: 1340px;
  height: 500px;
  margin: 0 auto;
  position: relative;
}

.line .primary {
  width: 0.05rem;
  height: 0; 
  background-color: var(--cr_white);
  margin-left: 35px;
  position: absolute;
  top: 0;
  transition: height 2s cubic-bezier(0.2, 1, 0.5, 1); 
}

@media screen and (Max-width: 1400px){
  .line {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .line .box {
  max-width: 1340px;
  height: 500px;
  margin: 0 auto;
  position: relative;
  }
}

/*=================================================
 design
=================================================*/

.design {
  width: 100%;
  background-color: var(--cr_main);
  display: flex;
}

.design .container {
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
}

.design .container .optimal .title {
  width: 168px;
  height: 102px;
  font-size: 18px;
  font-weight: 300;
  align-items: center;
  display: flex;
}

.design .container .optimal .block {
  display: flex;
  gap: 40px;
}

.design .container .optimal .block .text {
  max-width: 506px;
  font-size: 14px;
  font-weight: 300;
  align-items: center;
  display: flex;
  line-height: 1.8;
  letter-spacing: 0.07em;
}

.line-wrapper {
  display: flex;
  align-items: center;
}

.custom-line {
  width:  280px; 
  border-top: 0.5px solid #fff; 
}

.hidden-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s ease-out;
}

.visible-line {
  transform: scaleX(1);
}

.design-score {
  max-width: 531px;
  display: flex; 
  justify-content: center;
  align-items: center;
  margin: 0 auto; 
  line-height: 1.5;
}

.hidden-text {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.5, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.5, 1);
}

.visible-text {
  opacity: 1; 
  transform: translateX(0);
}

@media screen and (Max-width: 1400px){
  .design .container {
    padding: 0 20px;
    margin: 0;
  }

  .visible-text {
    line-height: 1.65em;
  }
}

@media screen and (Max-width: 980px){

  .design .container .optimal .block {
    display: block;
  }

  .line-wrapper {
    display: none;
  }

  .design-score {
  max-width: 531px;
  display: flex; 
  justify-content: center;
  align-items: center;
  margin: 0 auto; 
  margin-top: 50px;
  }

  .hidden-text {
  font-size: 18px;
  }
}

/*=================================================
 line-secondary
=================================================*/

.line-secondary {
  width: 100%;
  background-color: var(--cr_main); 
  margin-top: 48px;
}

.line-secondary .box {
  max-width: 1340px;
  margin: 0 auto;
  align-items: center;
  display: flex;
}

.line-secondary .alt-line {
  width: 0.05rem;
  height: 148px;
  background-color: var(--cr_white);
  margin-left: 35px;
}

@media screen and (Max-width: 1400px){
  .line-secondary .box {
    margin: 0 auto;
    padding: 0 20px;
    margin-top: none;
  }
}

  @media screen and (Max-width: 768px){
    .line-secondary .box {
      height: 140px;
  }
}

/*=================================================
 balance
=================================================*/

.balance {
  width: 100%;
  background-color: var(--cr_main);
  display: flex;
}

.balance .container {
  width: 1340px;
  margin: 0 auto;
}

.balance .container .title {
  width: 168px;
  height: 102px;
  font-size: 18px;
  font-weight: 300;
  align-items: center;
  display: flex;
}

.balance .container .block {
  display: flex;
  gap: 40px;
  align-items: center;
}

.balance .container .block .text {
  max-width: 506px;
  font-size: 14px;
  font-weight: 300;
  align-items: center;
  display: flex;
  line-height: 1.8;
  letter-spacing: 0.07em;
}

.balance .container .block .line-wrapper-alt {
  display: flex;
  align-items: center;
}

.balance .container .block .line-wrapper-alt .custom-line-alt {
  width: 422px; 
  border-top: 0.5px solid #fff; 
}

.hidden-line-alt {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.4, 1);
}

.visible-line-alt {
  transform: scaleX(1);
}

.balance-scale {
  position: relative;
  width: 200px;
  height: 102px;
}

.beam {
  position: absolute;
  top: 50%; 
  left: 0;
  width: 100%; 
  height: 1px; 
  background-color: #ffffff;
  transform-origin: center center;
  animation: wobble-beam 3s infinite ease-in-out;
}

@keyframes wobble-beam {
  0%, 100% {
    transform: rotate(0deg); 
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}

.fulcrum {
  position: absolute;
  bottom: 0; 
  left: 50%; 
  width: 1px; 
  height: 50px; 
  background-color: #ffffff; 
  transform: translateX(-50%);
}

.circle {
  position: absolute;
  width: 50px; 
  height: 50px; 
  background-color: #fff; 
  border-radius: 50%; 
  animation: wobble 3s infinite ease-in-out;
}

.circle.left {
  left: 3%; 
  transform-origin: center right;
}

.circle.right {
  right: 3%; 
  transform-origin: center left;
}

@keyframes wobble {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(25deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}

.hidden-balance {
  opacity: 0;
  transform: translateX(-90px);
  transition: opacity 4.0s cubic-bezier(0.2, 0.8, 0.2, 1), transform 4.0s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.visible-balance {
  opacity: 1;
  transform: translateX(0); 
}

@media screen and (Max-width: 1400px){
  .balance {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 1040px){
  .balance .container .block .line-wrapper-alt .custom-line-alt {
    width: 300px;
  }
}

@media screen and (Max-width: 1140px){
  .balance .container .block .line-wrapper-alt .custom-line-alt {
    width: 250px;
  }
}

@media screen and (Max-width: 980px){
  .balance .container .block {
    display: block;
  }

  .balance .container .block .line-wrapper-alt {
    display: none;
  }

  .balance-scale {
    margin: 0;
    margin-top: 50px;
  }
}

/*=================================================
 about
=================================================*/

.about {
  width: 100%;
  background-color: var(--cr_main);
  display: flex;
}

.about .me {
  width: 1340px;
  margin: 0 auto;
  margin-top: 254px;
  display: flex;
  align-items: flex-end;
}

.about .me .wrapper {
  margin-left: auto;
  display: flex;
  height: 203px;
  border-top: 0.05em solid #fff;
}

.about .me .wrapper .title {
  width: 260px;
  height: 105px;
  font-size: 11px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center
}

.about .me .wrapper .bio {
  width: 431px;
  height: 203px;
  font-size: 12px;
  display: flex;
  align-items: center;
  line-height: 2;
  letter-spacing: 0.05em;
}

@media screen and (Max-width: 1400px){
  .about {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 980px){
  .about .me {
    margin-top: 150px;
  }
}

@media screen and (Max-width: 768px){
  .about .me {
    margin-top: 80px;
  }

  .about .me .wrapper{
    height: 300px;
  }

  .about .me .wrapper .title {
    font-size: 14px;
  }

  .about .me .wrapper .bio {
    height: 300px;
  }
}

/*=================================================
 picture
=================================================*/

.picture {
  width: 100%;
  max-width: 1340px;
  height: 100%;
  display: flex;
  margin: 0 auto;
  margin-top: 139px;
  margin-bottom: 241px;
}

.picture img {
  max-width: 500px;
  margin-left: auto;
}

@media screen and (Max-width: 1400px){
  .picture {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .picture {
    margin-top: 80px;
    margin-bottom: 40px;
  }
}

/*=================================================
 profile
=================================================*/

.profile {
  width: 100%;
  height: 100%;
  background-color: var(--cr_main);
  display: flex;
}

.profile .section {
  width: 1340px;
  height: 203px;
  margin: 0 auto;
  display: flex;
  margin-left: auto;
}

.profile .section .wrapper {
  margin-left: auto;
  display: flex;
  border-top: 0.05em solid #fff;
  border-bottom: 0.05em solid #fff;
}

.profile .section .wrapper .title {
  width: 260px;
  height: 105px;
  font-size: 11px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

.profile .section .wrapper .info {
  width: 431px;
  height: 203px;
  font-size: 12px;
  align-items: center;
}

.profile .section .wrapper .info .location {
  display: flex;
}

.profile .section .wrapper .info .label {
  width: 146px;
  height: 102px;
  align-items: center;
  display: flex;
}

.profile .section .wrapper .info .data {
  width: 285px;
  height: 102px;
  align-items: center;
  display: flex;
}

.profile .section .wrapper .info .dialect {
  display: flex;
}

.profile .section .wrapper .info .label {
  width: 100px;
  height: 102px;
  align-items: center;
  display: flex;
}

.profile .section .wrapper .info .data {
  width: 285px;

  align-items: center;
  display: flex;
}

@media screen and (Max-width: 1400px){
  .profile {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
    .profile .section .wrapper .title {
    font-size: 16px;
  }
}

@media screen and (Max-width: 500px){
  .profile .section .wrapper .info {
    font-size: 13px;
  }
}

/*=================================================
 project-bg
=================================================*/

.project-bg {
  width: 100%;
  height: 100%;
  margin-bottom: 100px;
}

@media screen and (Max-width: 768px){
  .project-bg {
    margin-bottom: 30px;
  }
}

/*=================================================
 project-chatchcopy
=================================================*/

.project-chatchcopy .en {
  max-width: 1340px;
  height: 88px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 300;
  align-items: center;
  display: flex;
  letter-spacing: 0.8px;
  margin-bottom: 79px;
}

@media screen and (Max-width: 1400px){
  .project-chatchcopy {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
    .project-chatchcopy .en {
    font-size: 21px;
  }
}

/*=================================================
 cards
=================================================*/

.cards {
  display: flex;
  flex-direction: column;
  gap: 100px; 
  padding-bottom: 140px;
}

.cards .wrapper {
  width: 100%;
  display: flex;
  align-items: center;
}

.cards .wrapper-2 {
  width: 100%;
}

.cards .container {
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  gap: 46px;
  border-radius: 70px;
}

.card {
  width: 416px;
  height: 600px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: filter 0.3s ease;
}

.card:hover {
  filter: brightness(55%); 
}

.cards .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.cards .card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.card .caption {
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.03em;
  margin-top: 16px;
  color: #ffffff;
}

.card .day {
  text-align: left;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: #ffffff;
  margin-top: 8px;
}

@media screen and (Max-width: 1400px){
  .cards {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 1240px){
  .card {
    height: 400px;
  }
}

@media screen and (Max-width: 768px){
  .card {
    height: 300px;
  }

  .cards .container {
    gap: 20px;
  }
}

@media screen and (max-width: 668px) {
  .cards {
    gap: 20px;
  }

  .cards .wrapper {
    display: block;
  }

  .cards .container {
    flex-direction: column;
    gap: 20px;
  }

  .card {
    height: auto;
    width: 100%; 
  }

  .cards .card img {
    height: 300px;
  }

  .cards .card video {
    height: 300px;
  }

  .card .caption {
    margin-top: 8px;
  }
}

/*=================================================
 project-chatchcopy
=================================================*/

.project-chatchcopy .project-en {
  max-width: 1340px;
  height: 56px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 300;
  align-items: center;
  display: flex;
  letter-spacing: 0.8px;
}

/*=================================================
 top-banner
=================================================*/

.top-banner {
  max-width: 1340px;  
  margin: 0 auto;
  display: flex;
  gap: 20px;
  margin-top: 82px;
  align-items: center;
}

@media screen and (Max-width: 1400px){
  .top-banner {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .top-banner {
    font-size: 18px;
  }
}

@media screen and (Max-width: 375px){
  .top-banner {
    display: block;
  }

  .top-banner .text {
    margin-top: 5px;
  }
} 

/*=================================================
 top-banner .title
=================================================*/

.top-banner .title {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.01em;
}

/*=================================================
 text
=================================================*/

.text {
  font-size: 14px;
  font-weight: 300;  
}

/*=================================================
 title
=================================================*/

.title h2 {
  max-width: 1340px;  
  margin: 0 auto;
  display: flex;
  margin-top: 30px;
  font-size: 40px;
  align-items: center;
  letter-spacing: 0.01em;
  font-weight: 350;
  margin-bottom: 128px;
}

@media screen and (Max-width: 1400px){
  .title h2 {
    padding: 0 20px;
    font-size: 35px;
    margin-bottom: 138px;
  }
}

@media screen and (Max-width: 768px){
  .title h2 {
    font-size: 30px;
    margin-bottom: 50px;
  }
}

/*=================================================
 description
=================================================*/

.description {
  width: 100%;
  max-width: 1340px;  
  margin: 0 auto;
  font-size: 16px;
  align-items: center;
  font-weight: 300;  
}

.description .intro {
  max-width: 856px;
  margin-bottom: 24px;
  line-height: 1.6;
  font-size: 15px;
  letter-spacing: 0.02em;
  align-items: center;
  display: flex;
}

.description .intro-2 {
  max-width: 856px;
  line-height: 1.6;
  font-size: 15px;
  letter-spacing: 0.02em;
  align-items: center;
  display: flex;
  margin-top: 24px;
}

.description .target {
  max-width: 856px;
  margin-bottom: 24px;
  line-height: 1.6;
  font-size: 15px;
  letter-spacing: 0.02em;
  align-items: center;
  display: flex;
}

.description .design {
  max-width: 856px;
  margin-bottom: 80px;
  line-height: 1.6;
  font-size: 15px;
  letter-spacing: 0.02em;
  align-items: center;
  display: flex;
}

@media screen and (Max-width: 1400px){
  .description {
    padding: 0 20px;
  }
  
  .description .intro {
    font-size: 16px;
  }

  .description .target {
    font-size: 16px;
  }

  .description .intro-2 {
    font-size: 16px;
  }

  .description .design {
    font-size: 16px;
  }
}

@media screen and (Max-width: 768px){
  .description .design {
    margin-bottom: 50px;
  }
}

/*=================================================
 top-page-beams
=================================================*/

.top-page-beams img {
  width: 100%;
  max-width: 350px;
}

.top-page-beams p {
  margin-top: 10px;
  font-size: 13px;
  margin-bottom: 100px;
}

@media screen and (Max-width: 768px){
  .top-page-beams p {
    margin-bottom: 50px;
  }
}


/*=================================================
 top-container
=================================================*/

.top-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; 
  margin: 0 auto;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 100px;
}

.top-container img {
  max-width: 1340px;
  display: block;
  border-radius: 10px;
}

@media screen and (Max-width: 1400px){
  .top-container {
    padding: 0 20px;
    margin-bottom: 0;
    margin-bottom: 50px;
  }
}

/*=================================================
 tsuwano-top-container
=================================================*/

.tsuwano-top-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; 
  margin: 0 auto;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 100px;
}

.tsuwano-top-container img {
  max-width: 1340px;
  display: block;
  border-radius: 10px;
}

@media screen and (Max-width: 1400px){
  .tsuwano-top-container {
    padding: 0 20px;
    margin-bottom: 50px;
  }
}

/*=================================================
 twuwano-design-goal
=================================================*/

.project-container .twuwano-design-goal{
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 133px;
  justify-content: center;
}

@media screen and (Max-width: 1400px){
  .project-container .twuwano-design-goal{
    font-size: 16px;
  }
}

@media screen and (Max-width: 768px){
  .project-container .twuwano-design-goal{
    font-size: 16px;
    margin-bottom: 133px;
  }
}

/*=================================================
 project-container
=================================================*/

.project-container {
  max-width: 1340px;  
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 350;
}

.project-container .project-intro {
  max-width: 740px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  justify-content: center;
}

.project-container .design-goal {
  max-width: 740px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 303px;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 133px;
}

@media screen and (Max-width: 1400px){
  .project-container {
    margin-top: 40px;
    padding: 0 20px;
  }

  .project-container .project-intro {
    font-size: 16px;
  }

  .project-container .design-goal {
    font-size: 16px;
  }
}

@media screen and (Max-width: 768px){
  .project-container .project-goal {
    margin-bottom: 133px;
  }
}

/*=================================================
 ohori-park-top-container
=================================================*/

.ohori-park-top-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; 
  margin: 0 auto;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 100px;
}

.ohori-park-top-container img {
  max-width: 1340px;
  display: block;
  border-radius: 10px;
}

@media screen and (Max-width: 1400px){
  .ohori-park-top-container {
    padding: 0 20px;
    margin-bottom: 50px;
  }
}

/*=================================================
 top-page
=================================================*/

.top-page {
  max-width: 1340px;  
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 350;
}

.top-page .design {
  max-width: 740px;
  margin: 0 auto;
  margin-top: 100px;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 39px;
  justify-content: center;
}

.top-page .day {
  max-width: 740px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 39px;
  justify-content: center;
}

.top-page .staff {
  max-width: 740px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 39px;
  justify-content: center;
}

.top-page .info {
  max-width: 740px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 318px;
  justify-content: center;
}

@media screen and (Max-width: 1400px){
  .top-page {
    padding: 0 20px;
  }

  .top-page .design {
    font-size: 16px;
    margin-top: 40px;
  }

  .top-page .day {
    font-size: 16px;
  }

  .top-page .staff {
    font-size: 16px;
  }

  .top-page .info {
    font-size: 16px;
    margin-bottom: 100px;
  }
}

/*=================================================
 summary - iwami kagura only
=================================================*/

.top-page .summary {
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 133px;
  justify-content: center;
}

@media screen and (Max-width: 1400px){
  .top-page .summary {
    font-size: 16px;
  }
}

@media screen and (Max-width: 768px){
  .top-page .summary {
    margin-bottom: 133px;
  }
}

/*=================================================
 info-container
=================================================*/

.info-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; 
  margin: 0 auto;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 100px;
}

.info-container img {
  max-width: 1340px;
  display: block;
  border-radius: 10px;
}

@media screen and (Max-width: 1400px){
  .info-container {
    padding: 0 20px;
    margin-bottom: 50px;
  }
}

/*=================================================
 job-container
=================================================*/

.job-container {
  max-width: 1340px;  
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 350;
}

.job-container .requirements {
  max-width: 740px;
  margin: 0 auto;
  margin-top: 80px;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 39px;
  justify-content: center;
}

.job-container .salary {
  max-width: 740px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 39px;
  justify-content: center;
}

.job-container .color {
  max-width: 740px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 15px;
  margin-bottom: 318px;
  justify-content: center;
}

@media screen and (Max-width: 1400px){
  .job-container {
    padding: 0 20px;
  }

  .job-container .requirements {
    margin-top: 40px;
  }

  .job-container .color {
    margin-bottom: 100px;
  }
}


/*=================================================
 responsive-frame
=================================================*/

.responsive-frame {
  width: 100%;
  display: flex;
  gap: 5%;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 100px;
}

/* .beams-responsive-frame */  
.beams-responsive-frame {
  width: 100%;
  display: flex;
  gap: 5%;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 30px;
}

.top-container-428px img  {
  width: 100%;
  height: auto; 
  border-radius: 10px;
  max-width: 604px;
}

.staff-container-428px img {
  width: 100%;
  height: auto; 
  border-radius: 10px;
  max-width: 604px;
}

.news-container-428px img{
  width: 100%;
  height: auto; 
  border-radius: 10px;
  max-width: 604px;
}

.info-container-428px img {
  width: 100%;
  height: auto; 
  border-radius: 10px;
  max-width: 604px;
}

@media screen and (Max-width: 1400px){
  .responsive-frame {
    padding: 0 20px;
    margin-bottom: 50px;
  }

  .beams-responsive-frame {
    padding: 0 20px;
    margin-bottom: 50px;
  }
}

/*=================================================
 general-treatment
=================================================*/

.general-treatment {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto; 
  margin: 0 auto;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 100px;
}

.general-treatment img {
  max-width: 1340px;
  display: block;
  border-radius: 10px;
}

@media screen and (Max-width: 1400px){
  .general-treatment {
    padding: 0 20px;
    margin-bottom: 50px;
  }
}

/*=================================================
 responsive-frame-2
=================================================*/

.responsive-frame-2 {
  width: 100%;
  display: flex;
  gap: 5%;
  justify-content: center;
  margin: 0 auto;
  margin-bottom: 100px;
}

.general-treatment-428px img {
  width: 100%;
  height: auto; 
  border-radius: 10px;
  max-width: 604px;
}

.access-container-428px img {
  width: 100%;
  height: auto; 
  border-radius: 10px;
  max-width: 604px;
}

.frames-container-428px img {
  width: 100%;
  height: auto; 
  border-radius: 10px;
  max-width: 604px;
}

.neuter-spay-428px img {
  width: 100%;
  height: auto; 
  border-radius: 10px;
  max-width: 604px;
}

.vaccinations-428px img{
  width: 100%;
  height: auto; 
  border-radius: 10px;
  max-width: 604px;
}

.health-check-428px img {
  width: 100%;
  height: auto; 
  border-radius: 10px;
  max-width: 604px;
}

@media screen and (Max-width: 1400px){
  .responsive-frame-2 {
    padding: 0 20px;
    margin-bottom: 50px;
  }
}

/*=================================================
 information-wrap
=================================================*/

.info-wrap {
  max-width: 1340px;  
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 350;
  display: flex;
  justify-content: center;
}

.info-wrap .flow {
  width: 154px;
  height: 60px;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 39px;
}

.info-wrap .optimization {
  max-width: 586px;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 39px;
  justify-content: center;
}

@media screen and (Max-width: 1400px){
  .info-wrap {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .info-wrap {
    display: block;
    padding: 0 20px;
    justify-content: center;
    margin-bottom: 50px;
  }

  .info-wrap .optimization {
    margin: 0 auto;
  }

  .info-wrap p {
    margin: 0 auto;
  }

  .info-wrap .flow {
    margin: 0 auto;
    font-size: 18px;
  }
}

/*=================================================
 content-wrap
=================================================*/

.content-wrap {
  max-width: 1340px;  
  margin: 0 auto;
  font-size: 14px;
  letter-spacing: 0.05em;
  font-weight: 350;
  display: flex;
  justify-content: center;
}

.content-wrap .anxiety {
  width: 154px;
  height: 60px;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 39px;
}

.content-wrap .procedure {
  max-width: 586px;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 39px;
  justify-content: center;
}

@media screen and (Max-width: 1400px){
  .content-wrap {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .content-wrap {
    display: block;
    padding: 0 20px;
    justify-content: center;
    margin-bottom: 50px;
  }

  .content-wrap .procedure {
    margin: 0 auto;
  }

  .content-wrap p {
    margin: 0 auto;
  }

  .content-wrap .anxiety {
    margin: 0 auto;
    font-size: 18px;
  }
}

/*=================================================
 trust-wrap
=================================================*/

.trust-wrap {
  max-width: 1340px;  
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 350;
  display: flex;
  justify-content: center;
}

.trust-wrap .reliability {
  width: 154px;
  height: 60px;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 39px;
}

.trust-wrap .operation-flow {
  max-width: 586px;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 14px;
  margin-bottom: 39px;
  justify-content: center;
}

@media screen and (Max-width: 1400px){
  .trust-wrap {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .trust-wrap {
    display: block;
    padding: 0 20px;
    justify-content: center;
    margin-bottom: 50px;
  }

  .trust-wrap .operation-flow {
    margin: 0 auto;
  }

  .trust-wrap p {
    margin: 0 auto;
  }

  .trust-wrap .reliability {
    margin: 0 auto;
    font-size: 18px;
  }
}

/*=================================================
 action-wrap
=================================================*/

.action-wrap {
  max-width: 1340px;  
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.05em;
  font-weight: 350;
  display: flex;
  justify-content: center;
}

.action-wrap .promotion {
  width: 154px;
  height: 60px;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 14px;
}

.action-wrap .clear-steps {
  max-width: 586px;
  align-items: center;
  display: flex;
  line-height: 1.7;
  font-size: 14px;
  justify-content: center;
}

@media screen and (Max-width: 1400px){
  .action-wrap {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .action-wrap {
    display: block;
    padding: 0 20px;
    justify-content: center;
    margin-bottom: 50px;
  }

  .action-wrap .clear-steps {
    margin: 0 auto;
  }

  .action-wrap .promotion {
    margin: 0 auto;
    font-size: 18px;
  }
  
  .action-wrap p {
    margin: 0 auto;
  }

  .action-wrap .clear_steps {
    margin-bottom: 133px;
  }
}

/*=================================================
 graphic-bg
=================================================*/

.graphic-bg {
  width: 100%;
  height: auto;
}

.graphic-machi-bg {
  width: 100%;
  height: auto;
}

.background {
  width: 100%;
  max-width: 1340px;
  height: auto;
  margin: 0 auto;
  margin-top: 139px;
  display: block;
}

.background-1 {
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.background-2 {
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.image-1 {
  margin-top: 80px;
  cursor: pointer;
}

.image-machi-1 {
  margin-top: 80px;
}

.image-2 {
  margin-top: 100px;
  cursor: pointer;
}

.image-machi-2 {
  margin-top: 100px;
}

.image-3 {
  margin-top: 100px;
  cursor: pointer;
}

.image-machi-3 {
  margin-top: 100px;
}

@media screen and (max-width: 1400px) {
  .graphic-bg {
    padding: 0 20px;
  }

  .background {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (Max-width: 768px){
  .graphic-machi-bg {
    padding: 0 20px;
  }

    .image-2 {
    margin-top: 20px;
  }

  .image-machi-2 {
    margin-top: 20px;
  }

  .image-machi-3 {
    margin-top: 20px;
  }
}

/*=================================================
 brand-logo
=================================================*/

.graphic-bg {
  width: 100%;
  height: auto;
}

.graphic-machi-bg {
  width: 100%;
  height: auto;
}

.background {
  width: 100%;
  max-width: 1340px;
  height: auto;
  margin: 0 auto;
  margin-top: 139px;
  display: block;
}

.background-1 {
  width: 100%;
  max-width: 700px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.image-1 {
  margin-top: 80px;
  cursor: pointer;
}

.image-machi-1 {
  margin-top: 80px;
}

.image-2 {
  margin-top: 100px;
  cursor: pointer;
}

.image-machi-2 {
  margin-top: 100px;
}

.image-3 {
  margin-top: 100px;
  cursor: pointer;
}

.image-machi-3 {
  margin-top: 100px;
}

@media screen and (max-width: 1400px) {
  .graphic-bg {
    padding: 0 20px;
  }

  .background {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (Max-width: 768px){
  .graphic-machi-bg {
    padding: 0 20px;
  }

    .image-2 {
    margin-top: 20px;
  }

  .image-machi-2 {
    margin-top: 20px;
  }

  .image-machi-3 {
    margin-top: 20px;
  }
}

/*=================================================
 typography
=================================================*/

.typography {
  width: 100%;
  height: auto;
}

.typo-image {
  max-width: 640px;
  height: auto;
  margin: 0 auto;
  margin-top: 139px;
  border-radius: 10px;
  display: block;
}

.typography .image-1 {
  width: 100%;
  margin-top: 80px;
}

.typography .image-2 {
  width: 100%;
  margin-top: 100px;
  margin-bottom: 80px;
}

.typography .image-3 {
  width: 100%;
  margin-top: 100px;
  margin-bottom: 80px;
}

.typography .image-4 {
  width: 100%;
  margin-top: 100px;
  margin-bottom: 80px;
}

.typography .image-5 {
  width: 100%;
  margin-top: 100px;
  margin-bottom: 80px;
}

@media screen and (max-width: 1400px) {
  .typography {
    padding: 0 20px;
  }

  .typo-image {
    height: auto;
  }

  .typography .image-1 {
    margin-bottom: 0;
  }

  .typography .image-2 {
    margin-top: 30px;
    margin-bottom: 0;
  }

  .typography .image-3 {
    margin-top: 30px;
    margin-bottom: 0;
  }

  .typography .image-4 {
    margin-top: 30px;
    margin-bottom: 0;
  }

  .typography .image-5 {
    margin-top: 30px;
  }
}

/*=================================================
 size
=================================================*/

.size {
  width: 100%;
  max-width: 1340px;
  font-size: 13px;
  height: auto;
  text-align: left;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 100px;
}

.size-1 {
  width: 100%;
  max-width: 740px;
  padding: 0 20px;
  font-size: 13px;
  height: auto;
  text-align: left;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 100px;
}

.size-eura {
  width: 100%;
  max-width: 640px;
  padding: 0 20px;
  font-size: 13px;
  height: auto;
  text-align: left;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 100px;
}

.size-cat {
  width: 100%;
  max-width: 940px;
  padding: 0 20px;
  font-size: 13px;
  height: auto;
  text-align: left;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 100px;
}

.size-oni {
  width: 100%;
  max-width: 940px;
  padding: 0 20px;
  font-size: 13px;
  height: auto;
  text-align: left;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 100px;
}

@media screen and (Max-width: 1400px){
  .size {
    margin-top: 10px;
    padding: 0 20px;
  }

  .size-1 {
    margin-top: 10px;
    padding: 0 20px;
  }

  .size-cat {
    margin-top: 10px;
    padding: 0 20px;
  }

  .size-oni {
    margin-top: 10px;
    padding: 0 20px;
  }
}

/*=================================================
 modal
=================================================*/

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.modal-content {
  margin: 0 auto;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}

.close {
  position: absolute;
  top: 60px;
  right: 35px;
  color: #fff;
  font-size: 18px;
  font-weight: 100;
  cursor: pointer;
}

.close:hover, .close:focus {
  color: #777777;
  text-decoration: none;
  transition: color 0.5s ease, text-decoration 0.5s ease;
}

.close a:hover {
  transition: filter 0.5s ease;
}

.close a:hover {
  filter: brightness(35%);
}

.background {
  cursor: pointer;
}

a {
  text-decoration: none;
}

@media screen and (Max-width: 1400px){

  .close {
    top: 10px;
    font-size: 24px;
  }
}

/*=================================================
 .top-movie-bg
=================================================*/

.top-movie-bg {
  width: 100%;
  margin: 0 auto;
  height: auto;
}

.top-movie-bg .bg-movie {
  width: 100%;
  max-width: 1340px;
  height: 720px;
  margin: 0 auto;
  margin-top: 80px;
  margin-bottom: 15px;
  border: 0.1px solid var(--cr_white);
  display: block;
}


@media screen and (Max-width: 1400px){
  .top-movie-bg {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .top-movie-bg .bg-movie  {
    margin-bottom: 10px;
  }
}

/*=================================================
 movie-url
=================================================*/

.movie-url {
  max-width: 740px;
  margin: 0 auto;
  letter-spacing: 0.05em;
  font-weight: 350;
  display: flex;
  margin-bottom: 133px;
  gap: 283px;
}

.movie-url a {
  margin: 0 auto;
  font-size: 12px;
  text-decoration: none;
  position: relative;
}

.movie-url a::before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0.05em;
  background-color: currentColor;
  transition: width 0.5s ease-in-out;
  margin-left: auto;
}

.movie-url a:hover::before {
  width: 100%;
}

@media screen and (Max-width: 768px){

  .movie-url {
    margin-bottom: 0;
  }

  .movie-url a {
    margin-bottom: 0;
  }
}

/*=================================================
 image-bg-wrapper
=================================================*/

.image-bg-wrapper {
  width: 100%;
  margin: 0 auto;
  height: auto;
}

.image-bg-wrapper .image-bg-1 {
  width: 100%;
  max-width: 863px;
  height: auto;
  margin: 0 auto;
  margin-top: 80px;
  margin-bottom: 15px;
  border: 0.1px solid var(--cr_white);
  object-fit: cover;
  display: flex;
}

.image-bg-wrapper .image-bg-2 {
  width: 100%;
  max-width: 863px;
  height: auto;
  margin: 0 auto;
  margin-bottom: 20px;
  border: 1px solid var(--cr_white);
  object-fit: cover;
  display: flex;
}

.image-bg-wrapper .image-bg-3 {
  width: 100%;
  max-width: 863px;
  height: auto;
  margin: 0 auto;
  margin-bottom: 20px;
  border: 1px solid var(--cr_white);
  object-fit: cover;
  display: flex;
}

.image-bg-wrapper .image-bg-4 {
  width: 100%;
  max-width: 863px;
  height: auto;
  margin: 0 auto;
  margin-bottom: 100px;
  border: 1px solid var(--cr_white);
  object-fit: cover;
  display: flex;
}

@media screen and (max-width: 863px) {
  .image-bg-wrapper {
    padding: 0 20px;
  }

  .image-bg-wrapper .image-bg-1 {
    margin-top: 30px;
  }

  .image-bg-wrapper .image-bg-4 {
    margin-bottom: 50px;
  }
}

/*=================================================
 tenjin-locals
=================================================*/

.tenjin-locals {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  height: auto;
}

.tenjin-locals h2 {
  max-width: 806px;
  align-items: center;
  display: flex;
  margin: 0 auto;
  font-size: 20px;
  letter-spacing: 0.05em;
  font-weight: 350;
  margin-bottom: 15px;
}

.tenjin-locals p {
  max-width: 806px;
  align-items: center;
  display: flex;
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 30px;
  font-weight: 350;
  margin-bottom: 100px;
}

@media screen and (Max-width: 1400px){
  .tenjin-locals {
    padding: 0 20px;
  }
}

/*=================================================
 tenjin-harmony
=================================================*/

.tenjin-harmony {
  width: 100%;
  height: auto;
}

.tenjin-harmony h2 {
  max-width: 806px;
  align-items: center;
  display: flex;
  margin: 0 auto;
  font-size: 20px;
  letter-spacing: 0.05em;
  font-weight: 350;
  margin-bottom: 31px;
}

.tenjin-harmony p {
  max-width: 806px;
  align-items: center;
  display: flex;
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 30px;
  font-weight: 350;
  margin-bottom: 133px;
}

@media screen and (Max-width: 1400px){
  .tenjin-harmony {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .tenjin-harmony p {
    margin-bottom: 133px;
  }
}

/*=================================================
 message
=================================================*/

.message {
  width: 100%;
  height: auto;
}

.message h2 {
  max-width: 806px;
  align-items: center;
  display: flex;
  margin: 0 auto;
  font-size: 18px;
  letter-spacing: 0.05em;
  font-weight: 350;
  margin-bottom: 31px;
}

.message p {
  max-width: 806px;
  align-items: center;
  display: flex;
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 30px;
  font-weight: 350;
  margin-bottom: 100px;
}

@media screen and (Max-width: 1400px){
  .message {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .message p {
    margin-bottom: 80px;
  }
}

/*=================================================
 melody
=================================================*/

.melody {
  width: 100%;
  height: auto;
}

.melody h2 {
  max-width: 806px;
  align-items: center;
  display: flex;
  margin: 0 auto;
  font-size: 18px;
  letter-spacing: 0.05em;
  font-weight: 350;
  margin-bottom: 31px;
}

.melody p {
  max-width: 806px;
  align-items: center;
  display: flex;
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 30px;
  font-weight: 350;
  margin-bottom: 133px;
}

@media screen and (Max-width: 1400px){
  .melody {
    padding: 0 20px;
  }
}

@media screen and (Max-width: 768px){
  .melody p {
    margin-bottom: 133px;
  }
}

/*=================================================
 cat-bg
=================================================*/

.cat-bg {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cat-bg .cat-image {
  max-width: 940px;
  padding: 0 20px;
  height: auto;
  margin: 0 auto;
  margin-top: 139px;
  display: block;
}

@media screen and (Max-width: 1400px){
  .cat-bg {
    margin-top: 50px;
  }

  .cat-bg .cat-image {
    margin-top: 0px;
  }
}

/*=================================================
 harley-bg
=================================================*/

.harley-bg {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.harley-bg .harley-image {
  max-width: 1400px;
  padding: 0 20px;
  height: auto;
  margin: 0 auto;
  display: block;
}

@media screen and (Max-width: 1400px){
  .harley-bg {
    margin-top: 50px;
  }

  .harley-bg .harley-image {
    margin-top: 0px;
  }
}

/*=================================================
 oni-bg
=================================================*/

.oni-bg {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.oni-bg .oni-image {
  max-width: 940px;
  padding: 0 20px;
  height: auto;
  object-fit: cover;
}

@media screen and (Max-width: 1400px){
  .oni-bg {
    margin-top: 50px;
  }

  .oni-bg .oni-image {
    margin-top: 0px;
  }
}

/*=================================================
 coyright-info
=================================================*/

.copyright-info {
  max-width: 370px;
  margin: 0 auto;
  align-items: center;
  margin-bottom: 40px;
  font-size: 12px;
  padding: 0 10px;
  line-height: 1.3em;
}

/*=================================================
 source-info
=================================================*/

.source-info {
  display: flex;
  max-width: 370px;
  margin: 0 auto;
  height: 30px;
  align-items: center;
  margin-bottom: 100px;
  font-size: 12px;
  padding: 0 10px;
}

.source-info a {
  position: relative;
  font-size: 12px;
}

.source-info::before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0.05em;
  background-color: currentColor;
  transition: width 0.5s ease-in-out;
}

.source-info a:hover::before {
  width: 100%;
}

/*=================================================
 url
=================================================*/

.url-section {
  max-width: 360px;
  margin: 0 auto;
  height: 30px;
  align-items: center;
  display: flex;
  margin-bottom: 40px;
  font-size: 12px;
  border-bottom: 0.05em solid white;
  padding: 0 10px;
}

.url-section p {
  margin-right: auto;
}

.url-section a {
  margin-left: auto;
}

@media screen and (Max-width: 1400px){
  .url-section {
    margin-bottom: 50px;
  }
}

/*=================================================
 tool
=================================================*/

.tool {
  max-width: 360px;
  margin: 0 auto;
  height: 30px;
  align-items: center;
  display: flex;
  margin-bottom: 40px;
  gap: 50px;
  font-size: 12px;
  border-bottom: 0.05em solid white;
  padding: 0 10px;
}

.tool  .soft-tool {
  margin-left: auto;
}

@media screen and (Max-width: 1400px){
  .tool {
    margin-bottom: 50px;
  }
}

/*=================================================
 helloween_tool
=================================================*/

.helloween-tool {
  max-width: 360px;
  margin: 0 auto;
  height: 30px;
  align-items: center;
  display: flex;
  margin-bottom: 40px;
  gap: 50px;
  font-size: 12px;
  border-bottom: 0.05em solid white;
  padding: 0 10px;
}

.helloween-tool  .soft-tool {
  margin-left: auto;
}

@media screen and (Max-width: 1400px){
  .helloween-tool {
    margin-bottom: 50px;
  }
}



/*=================================================
 tsuwano_tool
=================================================*/

.tsuwano-tool {
  max-width: 360px;
  margin: 0 auto;
  height: 30px;
  align-items: center;
  display: flex;
  margin-bottom: 40px;
  gap: 50px;
  font-size: 12px;
  border-bottom: 0.05em solid white;
  padding: 0 10px;
}

.tsuwano-tool  .soft-tool {
  margin-left: auto;
}

@media screen and (Max-width: 1400px){
  .tsuwano-tool {
    margin-bottom: 50px;
  }
}

/*=================================================
 coding
=================================================*/

.coding {
  max-width: 360px;
  margin: 0 auto;
  height: 30px;
  align-items: center;
  display: flex;
  margin-bottom: 40px;
  gap: 50px;
  font-size: 12px;
  border-bottom: 0.05em solid white;
  padding: 0 10px;
}

.coding  .vs-code {
  margin-left: auto;
}

@media screen and (Max-width: 768px){
  .coding {
    margin-bottom: 50px;
  }
}

/*=================================================
 period
=================================================*/

.period {
  max-width: 360px;
  margin: 0 auto;
  height: 30px;
  align-items: center;
  display: flex;
  margin-bottom: 220px;
  gap: 50px;
  letter-spacing: 0.03em;
  font-size: 12px;
  border-bottom: 0.05em solid white;
  padding: 0 10px;
}

.period  .period-date {
  margin-left: auto;
}

@media screen and (Max-width: 768px){
  .period {
    margin-bottom: 50px;
  }
}

/*=================================================
 navigation
=================================================*/

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
}

.nav-item {
  text-align: center;
}

.nav-item a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  color: var(--cr_text);
  transition: filter 0.5s ease;
}

.nav-item a:hover {
  filter: brightness(35%);
}

@media screen and (Max-width: 1400px){
  .navigation {
    margin-top: 130px;
    padding: 0 20px;
  }
}

/*==================================================
 footer
==================================================*/

footer {
  width: 100%;
  padding-bottom: 10px;
  z-index: 999;
}

footer .footer-inner {
  max-width: 1340px;
  height: 100%;
  margin: 0 auto;
}

footer .footer-inner .content {
  display: flex;
}

footer .footer-inner .credit {
  margin-top: 100px;
  width: 205px;
  height: 100px;
  font-size: 13px;
  letter-spacing: 0.03em;
}

footer .footer-inner .credit a {
  font-size: 12px;
  margin-bottom: 8px;
  position: relative;
}

footer .footer-inner .top-info {
  line-height: 20px;
  letter-spacing: 0.05em;
}

footer .footer-inner .info {
  margin-top: 100px;
  line-height: 20px;
  letter-spacing: 0.05em;
}

footer .footer-inner .top-info .year {
  height: 20px;
  align-items: center;
  display: flex;
  font-size: 10px;
}

footer .footer-inner .info .year {
  height: 20px;
  align-items: center;
  display: flex;
  font-size: 10px;
}

footer .footer-inner .top-info .rights {
  height: 20px;
  align-items: center;
  display: flex;
  font-size: 10px;
}

footer .footer-inner .info .rights {
  height: 20px;
  align-items: center;
  display: flex;
  font-size: 10px;
}

@media screen and (Max-width: 1400px){
  footer {
    padding: 0 20px;
  }
}