@charset "UTF-8";

body {
  font-family: "Noto Sans", sans-serif;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #333333;
  display: inline-block;
}



/* header */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px; 
}

/* --- 1. ボタンとメニュー全体の基本設定 --- */
.hamburger-menu {
  position: relative;
}

/* チェックボックスを完全に画面から消し去る（四角い線を防ぐ） */
#menu-btn-check {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 0;
  height: 0;
}

/* --- 2. ヘッダー左アイコンの固定配置 --- */
.header-icon {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 102; /* ボタンやメニューより常に手前に表示 */
  display: flex;
  align-items: center;
  height: 60px;
  transition: opacity 0.2s;
}
.header-icon:hover {
  opacity: 0.7;
}
.header-icon img {
  display: block;
}

/* --- 3. 三本線ボタンのデザイン（間隔・バランス完全修正版） --- */
.menu-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 102; /* メニュー画面（101）より手前に配置 */
  background-color: transparent;
  cursor: pointer;
  transition: opacity 0.2s;
}
.menu-btn:hover {
  opacity: 0.7;
}

/* 三本線の共通設定 */
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  content: '';
  display: block;
  height: 4px;       /* 太さ */
  width: 35px;       /* 長さ */
  border-radius: 3px;
  background-color: #333;
  position: absolute;
  left: 50%;
  transition: all 0.3s;
}

/* ★2番目（真ん中）の線：ボタンの高さのちょうど真ん中に配置 */
.menu-btn span {
  top: 50%;
  margin-top: -2px;     /* 太さ(4px)の半分のマイナス値で完全中央 */
  margin-left: -17.5px; /* 長さ(35px)の半分のマイナス値で完全中央 */
}

/* 1番目（上の線）：真ん中の線から上に10px離す */
.menu-btn span::before {
  top: -10px;
  margin-left: -17.5px;
}

/* 3番目（下の線）：真ん中の線から下に10px離す（ここで均等になります） */
.menu-btn span::after {
  top: 10px;            /* ★ここを10pxに統一して均等配置に修正 */
  margin-left: -17.5px;
}

/* --- 4. ボタンをクリックした時（✕に変化 ＆ 白に変更） --- */
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(0, 0, 0, 0); /* 真ん中の線を透明に */
}
#menu-btn-check:checked ~ .menu-btn span::before {
  top: 0; /* ★回転軸を真ん中の線の位置（0）にリセット */
  background-color: #fff;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0; /* ★回転軸を真ん中の線の位置（0）にリセット */
  background-color: #fff;
  transform: rotate(-45deg);
}


/* --- 5. 中身のメニュー画面 --- */
.menu-content {
  width: 33%;
  min-width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;
  z-index: 101; /* ★ボタン（102）のすぐ後ろに配置 */
  background-color: rgba(0, 0, 0, 0.85);
  transition: all 0.3s;
  padding-top: 80px;
}

/* メニューのリンク文字 */
.menu-content ul {
  padding: 0;
}
.menu-content ul li {
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  padding: 20px;
  color: #fff;
  font-size: 16px;
  font-family: "Noto Sans", sans-serif;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  transition: opacity 0.2s;
}

/* --- 6. ボタンをクリックした時（メニューが右端にぴったり表示） --- */
#menu-btn-check:checked ~ .menu-content {
  left: 67%;
}

/* --- 7. 文字リンクにマウスを乗せたとき（ホバー時）の設定 --- */
.menu-content ul li a:hover {
  opacity: 0.6;
}


/* .header-right {
  align-items: center;
}

.header-right ul {
  display: flex;
}

.header-right ul li {
  margin-right: 20px;
  padding-left: 10px;
}

.logo {
  width: 220px; 
} 

.logo img {
  width: 100%;
  object-fit: cover;
  vertical-align: middle;
}


.header-right a:hover {
  opacity: 0.7;
} */



/* mainvisual */

.mainvisual {
  width: 100%;
  height: calc(100vh - 80px);
}

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

main {
  background: #f0f0f0;
  margin-bottom: 100px; 
  /* padding: 100px 0; */
}


.slider {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	position: relative;
	max-width: 100%;
} 

.slider div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 15s;
	animation-iteration-count: infinite;
} 

@keyframes slide-fade {
	0%{
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 0;
	}
	100%{
		opacity: 0;
		z-index: 0;
	}
}
.slider div:first-of-type{
	background-image: url(../slide1.jpg);
}
.slider div:nth-of-type(2){
	background-image: url(../slide2.jpg);
	animation-delay: 5s;
}
.slider div:last-of-type{
	background-image: url(../slide3.jpg);
	animation-delay: 10s;
} 







/* 共通パーツ */


.wrapper {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 3%;
}


.section-title h2 {
  text-align: center;
  font-weight: normal;
  font-size: 2.3rem;
  letter-spacing: 10px;
}


.about {
  margin-top: 80px;
  padding-top: 100px;
  display: flex; 
}

.about-image {
  width: 55%;
  /* padding: 5%; */
}

.about-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.about-text {
  width: 45%;
  padding: 10px  70px;
}

.about-text .description p {
  margin-top: 40px;
}



/* business */



.business {
  padding-block: 100px;
}

.contents-item {
  max-width: 400px;
  font-weight: bold;
  font-size: 0.9rem;
}

.contents-item:first-child {
  margin-bottom: 30px;
}

.contents-item img {
  width: 100%;
}

.contents-item p {
  position: relative;
  margin-left: 20px;
}

.contents-item p::before {
  content: "";
  width: 8px;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: -20px;
}




.item-left {
  margin-top: 100px;
}

.business-items {
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.item-right {
  margin-top: 40px;
}

/* company */


.company {
  max-width: 1000px;
  align-items: center;
  margin: 0 auto; 
  position: relative; 
}



.employee {
  display: inline-block;
  overflow: hidden;
}





.c-bnr.zoom {
  display: block;
  transition-duration: .5s;
}


.c-bnr.zoom:hover {
  transform: scale(1.2);
}

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




/* インスタ */

.instagram {
  max-width: 1000px;
  padding-bottom: 80px;
}

.instagram-title {
  font-size: 2rem;
  margin: 30px 0 30px 0;
  text-align: center;
}  

.instagram-title ::before{
  background: url() center top no-repeat;
    background-size: 30px;
    content: "";
    display: block;
    /* height: 30px; */
    margin-bottom: 30px;
}



.instagram-photo {
  display: flex; 
  justify-content: space-around;
  max-width: 1000px;
}


.instagram-item a img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}


/* footer */

footer {
  padding: 30px 0; 
}


footer .inner {
  display: flex;
  justify-content: space-around;
  padding: 5%;
  margin-bottom: 50px; 
}

footer .inner .video video {
  width: 300px;
  height: 200x;
}



.footer-right  {
  padding-left: 80px;
  font-size: 0.8rem;
}

.copy-right {
  text-align: center;
  font-size: 0.75rem;
}




/* サブページCSS */


.map {
  max-width: 1000px;
  margin-top: 50px;
  padding-bottom: 100px;
}

.map iframe {
  width: 100%;
  height: 400px;
  border: none;
}



.about {
  padding: 30px;
}

.photo {
  padding: 50px 0 50px 0;
}

.photo img{
  display: flex;
  margin: 0 auto;
  width: 50%;
}


.sub-company-title{
  width: 100%;
  margin: auto;
  margin-bottom: 30px;
  padding: 2%;
  background: white;
  font-size: 0.9rem;
  
}

.guidance {
  padding: 3%;
}

.guidance dl {
  display: flex;
  flex-wrap: wrap;
}

.guidance dt {
  width: 20%;
}

.guidance dd {
  width: 80%;
}


section .company .sub-company-title h3 {
  border-bottom: 1px solid #114FA1;
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

/* 1P */
.about-us {
  background-image: url(/drive-download-20250617T014006Z-1-001/img/練習シャツ透過.png); 
  background-size: cover; 
  background-position: center;
}


/* 2P */
.monthly-pee {
  background-image: url(/drive-download-20250617T014006Z-1-001/img/バック写真.png);
  background-size: cover;
  background-position: center;
}

/* 4P */
.contact{
  background-image: url(/drive-download-20250617T014006Z-1-001/img/contact.png);
  background-size: cover;
  background-position: left;
}

.guidance a {
  color: #e67b10;
}




  /* sp */
  
  @media (max-width: 900px) {




    /* ==========================================================
  ★スマホ用の設定（メディアクエリ：バグ修正＆位置調整版）
   ========================================================== */
@media screen and (max-width: 767px) {
  
  /* 1. 左アイコンを画面端から「おおよそ30px」の位置に寄せる */
  .header-icon {
    position: fixed !important; /* 他のCSSの干渉を防ぐため最優先 */
    top: 20px;
    left: 30px;      /* ★ご指定通り、画面端から30pxの位置に配置 */
    margin: 0;       /* 余計な余白をリセット */
    z-index: 102;
    display: flex;
    align-items: center;
    height: 60px;
  }

  /* 左アイコン画像もスマホ用にバランスを取る */
  .header-icon img {
    width: 100px;
    height: auto;
    display: block;
  }
  
  /* 2. 右のハンバーガーボタンも左右対称（30px）に揃える */
  .menu-btn {
    position: fixed !important;
    top: 20px;
    right: 30px;     /* ★左アイコンに合わせて右端から30pxに配置 */
    height: 60px;
    width: 60px;
  }
  
  /* 3. スマホのときはメニュー画面を「画面全体（100%）」に広げる */
  .menu-content {
    width: 100% !important;     /* ★PC時の33%を強制的に100%に上書き */
    min-width: 100% !important;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;                 /* 最初は画面の右外側に完全に隠す */
    z-index: 101;
    background-color: rgba(0, 0, 0, 0.85);
    transition: all 0.3s;
    padding-top: 100px;
  }

  /* 4. ボタンをクリックした時、文字が切れないよう「左端0」に完全に合わせる */
  #menu-btn-check:checked ~ .menu-content {
    left: 0 !important;         /* ★画面左端（0）に合わせることで、文字がはみ出さず100%綺麗に表示されます */
  }
  
  /* 5. メニュー内の文字設定 */
  .menu-content ul {
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .menu-content ul li {
    width: 100%;
    list-style: none;
  }
  .menu-content ul li a {
    display: block;
    width: 100%;
    padding: 25px 20px;
    color: #fff;
    font-size: 18px;   /* タップしやすいように少し大きめ */
    font-family: "Noto Sans", sans-serif;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
  }
}

  
    /* header */
    /* header {
      padding-left: 4%;
    } */
  
    /* .header-right {
      display: none;
    }  */
  
    .logo {
      margin-left: -40px;
    }
  
  
    .header-right ul {
      flex-direction: column;
    }
  
  
    /* news */
  
    .news .news-list {
      flex-direction: column;
    }
  
    .news-item {
      padding: 0;
      width: 100%;
      border-right: none;
    }
  
    /* about */
  
    .about {
      flex-direction: column;
    }
  
    .master img{
      object-position: right;
    }

    .about-image {
      width: 100%;
      padding: 0; 
    }
  
    .about-text {
      width: 100%;
      padding: 0;
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 2%;
      margin-top: 30px;
    }
  
    /* business */
  
    .business {
      padding-top: 100px;
      padding-bottom: 50px;
    }
  
    .business-items {
      flex-direction: column;
      align-items: center;
    }
  
    .contents-item:first-child {
      margin-bottom: 0px;
    }
  
    .contents-item {
      max-width: 100%;
      padding-bottom: 30px;
    }
  
  
    /* company  */
  
    .employee {

      flex-direction: column; 
    }

    .employee img {
      width: 100%;
      height: auto;
    }
  
  
    .inner {
    flex-direction: column;
    align-items: center;
  
    }
  
    .company-left {
      width: 90%;
      margin-top: 20px;
    }
  
    .company-left img {
      object-fit: cover;
    }
  
  
    .company-right {
      width: 90%;
      margin-top: 20px;
      /* マイナスを元に戻す
      margin-left: 0; */
    }
  
    .company-right img {
      object-fit: cover;
    }
  
  
    .instagram-photo {
      flex-direction: column;
      align-items: center;
  
    }
  
  
    .map iframe {
      max-width: 100%;
      height: 200px;
    } 
  
  
    footer .logo {
      margin-bottom: 10px;
    }
  
    .footer-right {
      padding: 0;
    }
  }