@charset "UTF-8";

/*

    Template: swell

    Theme Name: SWELL CHILD

    Theme URI: https://swell-theme.com/

    Description: SWELLの子テーマ

    Version: 1.0.0

    Author: LOOS WEB STUDIO

    Author URI: https://loos-web-studio.com/



    License: GNU General Public License

    License URI: http://www.gnu.org/licenses/gpl.html

*/
/*
body{
	cursor: url(https://www.withreed.co.jp/img/ellipse_none.cur), default;
} 
*/
/* 本体（既存） */
#stalker {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.stalker__pointer {
  position: relative;               /* オーバーレイの基準 */
  width: 30px;
  height: 30px;
  border: 1px solid #d9d9d9;     
  border-radius: 50%;
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.25s ease;
}

/* リンク hover → 拡大＆淡い青 */
.stalker__pointer.hover {
  transform: scale(2);
  border: 1px solid #3d3d3d;     
/*  background: rgba(58, 89, 255, 0.1);*/
}

/* クリック波紋（既存） */
.stalker__pointer.click {
  animation: ripple 0.5s ease;
}
@keyframes ripple {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

/* 追加：部分白化用の“薄いオーバーレイ”リング
   differenceブレンドなので、下が暗い所だけ視覚的に白っぽく見える。
   下が明るい所では黒っぽく見えるが、opacityを落としてベース青を優先。 */
.stalker__overlay {
  position: absolute;
  inset: 0;
  border: 2px solid #fff;           /* 白基準 */
  border-radius: 50%;
  mix-blend-mode: difference;       /* ピクセル毎に差分ブレンド（部分白化の肝） */
  opacity: 0.35;                    /* 明るい面での黒化を抑えるため薄く */
  pointer-events: none;
}

/* さらに背景が十分暗い時は、ベースも白系に寄せて見やすさを底上げ（ヒステリシスON状態） */
.stalker__pointer.on-dark {
  border-color: #fff;
  /* hover中の薄青は残しつつ、白地でも視認性を保てるように淡く 
  background: rgba(255,255,255,0.12);*/
}


@media screen and (max-width:768px){	
	.stalker__pointer{
		display: none;
	}
}

/*追加*/
.-body-solid .l-fixHeader {
    box-shadow: none;
}

.c-gnav {
    mix-blend-mode:difference;
}

/*
@media  (min-width: 960px) {
  .p-mainVisual__imgLayer.c-filterLayer__img {
      width: 50%;
      left: 50%;
  }
}
/*追加終了*/

h2{
	font-size: 40px!important;
	text-align:left!important;
	padding:0 !important;
	background:rgba(255,0,0,0)!important;
	color:#000;
	border-color:rgba(255,0,0,0)!important;
	margin-left:2%!important;
	margin-bottom:10px!important;
	margin-top:1.5em!important;
}

.h2_company{
	font-size: 30px!important;
	text-align:left!important;
	padding:0 !important;
	background:rgba(255,0,0,0)!important;
	color:#000;
	border-color:rgba(255,0,0,0)!important;
	margin-left:2%!important;
	margin-bottom:10px!important;
	margin-top:2em!important;
}

hr{
	margin-top:2px!important;
}

.h2_under{
	margin-left:2%!important;
}


.p-mainVisual__slideTitle{
	font-size: 30px!important;
	font-weight: 400!important;	
}

.p-mainVisual__slideTitle span{
	font-size: 50px!important;
	font-weight: 600!important;	
}

.with-logo-b {
  background: url('http://www.withreed.co.jp/wp-content/uploads/2025/09/narerubi__Beauty.png') no-repeat left 40%;
  padding-left: 170px !important;
  padding-top:15px!important;
  padding-bottom:15px!important;
  background-size: 150px auto;
}


.with-logo-c {
  background: url('http://www.withreed.co.jp/wp-content/uploads/2025/09/narerubi__Career.png') no-repeat left 40%;
  padding-left: 170px !important;
  padding-top:15px!important;
  padding-bottom:15px!important;
  background-size: 150px auto;
}


.with-logo-h {
  background: url('http://www.withreed.co.jp/wp-content/uploads/2025/09/narerubi__HR.png') no-repeat left 40%;
  padding-left: 170px !important;
  padding-top:15px!important;
  padding-bottom:15px!important;
  background-size: 150px auto;
}


.with-logo-f {
  background: url('http://www.withreed.co.jp/wp-content/uploads/2025/09/narerubi__Film.png') no-repeat left 40%;
  padding-left: 170px !important;
  padding-top:8px!important;
  padding-bottom:15px!important;
  background-size: 150px auto;
}


.with-logo-d {
  background: url('http://www.withreed.co.jp/wp-content/uploads/2025/09/narerubi__Dental.png') no-repeat left 40%;
  padding-left: 170px !important;
  padding-top:15px!important;
  padding-bottom:15px!important;
  background-size: 150px auto;
}

.with-logo-r {
  background: url('http://www.withreed.co.jp/wp-content/uploads/2025/11/横-カラー-scaled.png') no-repeat left 40%;
  padding-left: 170px !important;
  padding-top:15px!important;
  padding-bottom:15px!important;
  background-size: 150px auto;
}

.with-logo-left {
  display: inline-flex;
  align-items: center;      /* 縦の中央揃え */
  gap: 0.5em;               /* テキストと画像の間隔 */
  font-size: 1.5em;
  width:100%;
}

.with-logo-left .logo {
  height: 2em;              /* 文字サイズに合わせる */
  width: auto;
  display: inline-block;
}

.h2_solution{
	font-size: 40px!important;
	text-align:left!important;
	padding:0 !important;
	background:rgba(255,0,0,0)!important;
	color:#000;
	border-color:rgba(255,0,0,0)!important;
	margin-left:2%!important;
	margin-bottom:10px!important;
	margin-top:1.5em!important; 
	font-weight: 600!important;	 
}

.h2_solution2{
	font-size: 40px!important;
	text-align:center;
	padding:0 !important;
	margin-left:2%!important;
	margin-bottom:10px!important;
	margin-top:1.5em!important; 
	font-weight: 600!important;	 
}

@media screen and (min-width:768px){
.h2_solution{
	font-size: 50px!important;	 
	font-weight: 600!important;	 
}
h2{
	font-size: 90px!important;	 
}
}


@media screen and (max-width:768px){
.p-mainVisual__textLayer{
	justify-content: none;
	display: block; 
	margin-top:400px;
}
.p-mainVisual__slideTitle span{
	font-size: 40px!important;
	}

}

.reverse {
  display: flex; /* レイアウトを横並びにする */
  flex-direction: column; /* デバイスが500px以下の時はレイアウトを縦並びにする */
}

.reverse-right {
  order: 1; /* デバイスが500px以下の時はcontentの位置を3番目にする */
}

.reverse-left {
  order: 2; /* デバイスが500px以下の時はcontentの位置を3番目にする */
}

@media screen and (min-width:768px){	
.reverse {
	display: block; 
	}

.reverse-right {
    order: 2; /* デバイスが500px以下の時はcontentの位置を3番目にする */
  }
  .reverse-left {
    order: 1; /* デバイスが500px以下の時はcontentの位置を3番目にする */
  }

}


#content{
padding-top:0!important;
}


.animation1 {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 2s ease, transform 2s ease;
}

.animation1.animate{
  opacity: 1;
  transform: translateY(0);
}
 
.footer-link1{
  color: gray!important;
  font-size:0.9rem;	
  margin-bottom:0.3em!important;
}


/*
#loading {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity:0;
  transition: opacity 0.6s ease;
}

#loading img{
 width:20%;	
 animation: fadeIn 1s ease 0s 1 normal backwards;	
}

#loading.fade-out {
  opacity: 0;
  pointer-events: none;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
*/
/*
.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: fadeOut 1.5s 2s forwards;
}

.loading img {
  opacity: 0;
  animation: logo_fade 2s 0.2s forwards;
  width: 250px; 

@media screen and (max-width: 959px) {
  .loading img {
    width: 200px; 
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
  }
}
*/
.diagonal-anim {
  position: relative;
  overflow: hidden; 
  display: flex;
  z-index: 100000;
  width: 100%;
  height: 2000px; /* 高さは調整可能 */
}
.diagonal-anim .line {
  position: absolute;
  top: 0;
  left: -500px; /* 初期は左 (画面外) に配置 */
  width: 4px;
  height: 100%;
  background: #FFD700; /* 線の色 */
  transform: skewY(-20deg); /* 少し斜めに傾ける */
  animation: slideIn 1s ease-out forwards;
  animation-delay: calc(var(--i) * 0.2s); /* 線の出現を順番に */
}

/* 各線に i 番目を指定する */
.diagonal-anim .line:nth-child(1) { --i: 0; }
.diagonal-anim .line:nth-child(2) { --i: 1; }
.diagonal-anim .line:nth-child(3) { --i: 2; }

@keyframes slideIn {
  to {
    left: 100%; /* 右側へ移動 */
  }
}



/*}*/