/* ===============================================
 * 
 * -- style clutchhive
 * 
 * =============================================== */
/* front page */

/* --------------------------------------------
 * /.key visual
 * ------------------------------------------ */
/* 初期状態（不可視） */
.key_visual__screen-image,
.key_visual__screen-ttl,
.key_visual__screen-txt,
.key_visual__screen-logo { opacity: 0; transform: translateY(0); }

/* 共通フェード */
.is-show { opacity: 1; transition: opacity .8s ease, transform .8s ease; }

/* タイトル：上から線（縦書き） */
.key_visual__screen-ttl {
  position: relative;
  writing-mode: vertical-rl;
  transform: translateY(-12px);
  transition: opacity .8s ease, transform .8s ease;
  font-size: clamp(18px, calc(25 / 1280 * 100vw), 25px);
  font-family: "Noto Serif JP", serif;
  color: #000;
  left: 23.5%;
  top: 28%;
  font-weight: 600;
  letter-spacing: 0.2rem;
}
.is-show.from-top-with-line {
  opacity: 1;
  transform: translateY(0);
}
/* 線：細い縦ラインを伸ばして最後に消す */
.key_visual__screen-ttl::before {
  content:none
  position:absolute;
  inset:0 auto 0 0;    /* 左端に縦線 */
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleY(0);
  transform-origin: top;
  opacity: 1;
}
/* ← ここで初めてアニメ開始（is-show付与時） */
.is-show.from-top-with-line::before {
  animation: ttlLineAnim 1.2s ease forwards;
}

/* テキストブロック */
.key_visual__screen-txt {
  position: absolute;
  font-size: clamp(10px, calc(15 / 1280 * 100vw), 15px);
  color: #000;
  left: 36%;
  top: 33%;
  font-family: "Noto Serif JP", serif;
  line-height: 2.3;
  width: max-content;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity .8s ease, transform .8s ease;
}
.is-show.from-left-with-line {
  opacity: 1;
  transform: translateX(0);
}

/* 各行ごとに横ラインアニメーション */
.w_line {
  position: relative;
  display: inline-block; /* ← 各行ごとに囲えるように */
  overflow: hidden;
}
.w_line::before {
  content: none;
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 100%;
  background: #fff; /* 線/覆いの色（白） */
  transform: scaleX(0);
  transform-origin: left;
  opacity: 1;
}

/* アニメ開始時 */
.is-show.from-left-with-line .w_line::before {
  animation: wLineAnim 1.2s ease forwards;
}

/* キーフレーム：左から伸びる → 消える */
@keyframes wLineAnim {
  0%   { transform: scaleX(0); opacity:1; }
  60%  { transform: scaleX(1); opacity:1; }
  100% { transform: scaleX(1); opacity:0; }
}

/* ロゴ：下から */
.key_visual__screen-logo { transform: translateY(16px); }
.is-show.from-bottom { transform: translateY(0); }

/* カバー初期状態（2秒時に降りる） */
.m_bg_w { position: relative; }
.m_bg_w::after {
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.8);
  transform: translateY(-100%);
  transition: transform 1s ease;
  pointer-events:none;
}
.is-show.cover-down::after { transform: translateY(0); }

/* Keyframes：線を伸ばして消す */
@keyframes ttlLineAnim {
  0%   { transform: scaleY(0); opacity:1; }
  60%  { transform: scaleY(1); opacity:1; }
  100% { transform: scaleY(1); opacity:0; }
}
@keyframes txtLineAnim {
  0%   { transform: scaleX(0); opacity:1; }
  60%  { transform: scaleX(1); opacity:1; }
  100% { transform: scaleX(1); opacity:0; }
}


/* key-visual style */
.key-visual__top-screen-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0 0 6vw;
}
.key_visual__screen-image {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
}
.key_visual__screen-image img {
  width: 100%;
  height: 92vh;
  object-fit: cover;
  object-position: center;
}
.key_visual__screen-logo {
  transform: translateY(16px);
  max-width: clamp(80px, calc(110 / 1280 * 100vw), 150px);
  position: absolute;
  z-index: 2;
  width: 100%;
  right: 0;
  left: 0;
  margin: auto;
  bottom: 13%;
}
.key_visual__screen_base {
  position: relative;
  display: flex;
  flex-direction: column;
}


/* fade script style */
/* fade-only */
.sunlight.fw4 {
  transform: none;
  transition: opacity 0.8s ease-out;
}
.sunlight.fw4.active {
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
	  opacity: 1;
  visibility: visible;
} 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* liner fade */
.sunlight2 {
  clip-path: inset(0 100% 0 0);
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
  /*height: 40px;*/
  display: block;
  transition: clip-path 2.2s ease-in-out;
max-width: 300px;
  margin: 0 auto;
}
.sunlight2.active {
  clip-path: inset(0);
}
.sunlight2.fw5 {
  transition: clip-path 4.5s ease-in-out;
}




/* --------------------------------------------
 * >> front --- informatio
 * ------------------------------------------ */
.front__information {
  color: #000;
  font-size: clamp(14px, calc(20 / 1280 * 100vw), 20px);
  line-height: 2.5;
  text-align: center;
  margin: 6vw auto;
}

/* --------------------------------------------
 * >> front --- point
 * ------------------------------------------ */
.front__point {
  margin: 5vw auto;
  max-width: clamp(550px, calc(900 / 1280 * 100vw), 900px);
  padding: 3vw 0;
  background: #f1f1f1;
}
.front__point .point-note {
  text-align: center;
  font-size: clamp(8px, calc(14 / 1280 * 100vw), 14px);
  color: #000;
}
.front__point .point_ttl {
  text-align: center;
  padding: 3vw 0;
}
.front__point .point_ttl img {
  max-height: clamp(16px, calc(20 / 1280 * 100vw), 20px);
}
.point_wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: clamp(440px, calc(600 / 1280 * 100vw), 600px);
  margin: 0 auto 5vw;
  justify-content: center;
  align-items: center;
}
.point_wrap .point_img {
  padding: 15%;
}
.point_wrap .point_data {
  text-align: center;
  color: #000;
  font-size: clamp(9px, calc(15 / 1280 * 100vw), 15px);
  letter-spacing: 0.03rem;
}
.point_wrap .point_sub {
  font-size: clamp(9px, calc(15 / 1280 * 100vw), 15px);
}
.point_wrap .point_title {
  color: #000;
  margin: 1vw auto 2vw;
  font-size: clamp(16px, calc(22 / 1280 * 100vw), 22px);
}
.point_wrap .point_txt {
  color: #3f3f3f;
  text-align: left;
  line-height: 1.8;
  font-size: clamp(9px, calc(14 / 1280 * 100vw), 14px);
}



/* --------------------------------------------
 * >> front --- service
 * ------------------------------------------ */
.front__service .service_ttl {
  text-align: center;
  padding: 3vw 0;
  margin: 0 auto;
}
.front__service .service_ttl img {
  max-height: clamp(14px, calc(20 / 1280 * 100vw), 20px);
}
.front__service .service_inner {
  margin: 0 auto 5vw;
  max-width: clamp(550px, calc(900 / 1280 * 100vw), 900px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 5%;
}
.front__service .service_wrap {
  position: relative;
  margin: 0 auto 2.5vw;
}
.front__service .service_wrap_in {
  position: relative;
  width: 100%;
  height: max-content;
  cursor: pointer;
}
.front__service .service_caption {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 0;
	transition: ease all 0.5s;
}
.front__service .service_caption:hover {
  background: rgba(255,255,255,0.8);
  transition: ease all 0.5s;
}
.front__service .service_name {
  font-size: clamp(20px, calc(25 / 1280 * 100vw), 25px);
  color: #000;
  margin: 0 auto 2vw;
  letter-spacing: 0.1rem;
}
.front__service .service_txt {
  color: #000;
  margin: 0 auto 2vw;
  padding: 0;
  text-align: left;
  font-size: clamp(10px, calc(15 / 1280 * 100vw), 15px);
  max-width: clamp(250px, calc(350 / 1280 * 100vw), 350px);
}
.front__service .default_bk_btn {	
  position: absolute;
}
.default_bk_btn {
  border: 1px solid #000;
  background: transparent;
  color: #000;
  line-height: 1.8;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: clamp(110px, calc(170 / 1280 * 100vw), 170px);
  margin: 0 auto;
  border-radius: 50px;
  font-size: clamp(14px, calc(17 / 1280 * 100vw), 17px);
  letter-spacing: 0.15rem;
  padding-bottom: 2px;
  font-weight: 900;
  width: 100%;
  bottom: 10%;
}
.default_bk_btn:hover {
  background: #000;
  color: #fff;
}
.front__service .service_wrap:first-child {
  grid-column: 1 / 3;
}







/* --------------------------------------------
 * >> front --- company
 * ------------------------------------------ */
.front__company .company_ttl {
  text-align: center;
  padding: 3vw 0;
  margin: 0 auto;
}
.front__company .company_ttl img {
  max-height: clamp(14px, calc(20 / 1280 * 100vw), 20px);
}
.front__company .company_inner {
  margin: 0 auto 5vw;
  max-width: clamp(550px, calc(900 / 1280 * 100vw), 900px);
  padding: 3vw 0;
  background: #f1f1f1;
}
.front__company .company_note {
  text-align: center;
  color: #000;
  font-size: clamp(18px, calc(20 / 1280 * 100vw), 20px);
  line-height: 2;
  margin: 0 auto 5vw;
}
.front__company .default_bk_btn {
  margin: 3vw auto 0;
}






/* --------------------------------------------
 * >> front --- Instagram
 * ------------------------------------------ */
.front__instagram {
  margin: 15vw auto;
  text-align: center;
}
.front__instagram .instagram_note {
  text-align: center;
  color: #000;
  font-size: clamp(18px, calc(20 / 1280 * 100vw), 20px);
  line-height: 2;
  margin: 0 auto 5vw;
}
.front__instagram .instagram_icon {
  max-width: clamp(28px, calc(31 / 1280 * 100vw), 31px);
}
.front__instagram .instagram_ttl_sub {
  font-size: clamp(10px, calc(14 / 1280 * 100vw), 14px);
  color: #4d4d4d;
  font-weight: 600;
  margin: 0.5vw auto;
}
.instagram_box {
  max-width: clamp(550px, calc(900 / 1280 * 100vw), 900px);
  margin: 0 auto;
  padding: 3vw 0 5vw;
}

.default_bkb_btn {
  border: 1px solid #000;
  background: #000;
  color: #aaa;
  line-height: 3.5;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: clamp(180px, calc(250 / 1280 * 100vw), 250px);
  margin: 3vw auto;
  border-radius: 50px;
  font-size: clamp(10px, calc(14 / 1280 * 100vw), 14px);
  letter-spacing: 0.15rem;
  padding-bottom: 2px;
  font-weight: 900;
  width: 100%;
	transition: ease all 0.5s;
}
.default_bkb_btn:hover {
  background: #fff;
  color: #000;
	transition: ease all 0.5s;
}




/* --------------------------------------------
 * page --- 
 * ------------------------------------------ */






/* >>01 - service sec 1 サービス > デジタルサイネージ----------------------------------------- */

/* >>01 - service sec 1 - 2 サービス > デジタルサイネージ > ワンタッチビュー ----------------------------------------- */


/* ---------------------------------------
 *  view size -- 1200px
 * --------------------------------------- */	
@media screen and (max-width: 1024px) {

	
	
}

/* ---------------------------------------
 *  view size -- 767px
 * --------------------------------------- */	
@media screen and (max-width: 767px) {
	
/* front page */

	
	
	
	
/* key visual */
.key_visual__screen-ttl {
top: 12%;
left: 45%;
}
.key_visual__screen-txt {
top: 47%;
left: 19%;
font-size: clamp(8px, calc(12 / 375 * 100vw), 12px);
line-height: 1.7;
}
  .key_visual__screen-logo {
    max-width: clamp(60px, calc(70 / 375 * 100vw), 70px);
    bottom: 18%;
  }
.front__information {
line-height: 2;
font-size: clamp(10px, calc(14 / 375 * 100vw), 14px);
margin: 0 auto 12vw;
}
.front__point {
padding: 12vw 0;
}	
	
/* sp - point */	
.front__point .point-note {
font-size: clamp(8px, calc(13 / 375 * 100vw), 13px);
}
.point_wrap {
grid-template-columns: 1fr;
width: 86%;
}
.point_wrap .point_img {
padding: 5%;
max-width: calc(220 / 375 * 100vw);
margin: 0 auto;
}
.point_wrap .point_sub {
font-size: clamp(9px, calc(14 / 375 * 100vw), 14px);
}
.point_wrap .point_title {
font-size: clamp(16px, calc(22 / 375 * 100vw), 22px);
margin: 4vw auto 6vw;
}
.point_wrap .point_txt {
font-size: clamp(9px, calc(13 / 375 * 100vw), 13px);
line-height: 1.5;
}

/* sp - serivce */
.front__service {
  margin: 12vw auto;
}	
.default_bk_btn {
font-size: clamp(8px, calc(10 / 375 * 100vw), 10px);
max-width: clamp(70px, calc(100 / 375 * 100vw), 100px);
letter-spacing: 0.05rem;
}
.front__service .service_name {
font-size: clamp(14px, calc(18 / 375 * 100vw), 18px);
}	
.front__service .service_txt {
font-size: clamp(8px, calc(11 / 375 * 100vw), 10px);
line-height: 1.3;
max-width: 100%;
	margin: 14px auto;
}
.front__service .service_inner {
	max-width: 86%;
}
.service_wrap:first-child .default_bk_btn {
  bottom: 5%;
}
	
	
/* sp - comapny */
.front__company {
  padding: 10vw 0;
}
.front__company .company_inner {
padding: 10vw 0;
}
.front__company .company_note {
font-size: clamp(10px, calc(14 / 375 * 100vw), 14px);
}
.front__company .default_bk_btn {
margin: 10vw auto 0;
}	
	
/* sp - sns */
.front__instagram {
padding: 8vw 0 12vw;
}
.front__instagram .instagram_note {
font-size: clamp(10px, calc(14 / 375 * 100vw), 14px);
}
.instagram_box {
max-width: 86%;
}	
.default_bkb_btn {
font-size: clamp(8px, calc(12 /375 * 100vw), 12px);
max-width: 56%;
}	
	
	
	
	
	
/* ---------------------------------------- 
 * 01 sp >> services */		

/* ?????? */
/* ?????? */
/* ?????? */	
	
	
	
}