@charset "UTF-8";
/* -----------------------
TRUSTロゴ背景
----------------------- */

/* ロゴを背負う外枠の設定 */
.trust26 {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    padding: 100px 0;
    z-index: 1; /* 全体の基準レイヤー */
    background-color: transparent !important;
    overflow: hidden; /* 画像のはみ出し防止 */
}

/* 文字自体の設定（ロゴより手前に出す） */
.trust26 p, 
.trust26 span, 
.trust26 h1, 
.trust26 h2, 
.trust26 h3 {
    position: relative;
    z-index: 2; /* ロゴ(z-index: 0)より手前に配置 */
    background: transparent !important;
    margin: 0;
}

/* 背景ロゴ画像の設定（擬似要素） */
.trust26::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
    height: 100%;
    /* パスを修正（./なし） */
    background: url(img/trust26.png) no-repeat center center / contain;
    opacity: 0.07; 
    z-index: 0; /* 文字より奥、枠より手前 */
    pointer-events: none;
}
/* スマホ画面（横幅767px以下）のときの設定 */
@media screen and (max-width: 767px) {
    .trust26::before {
        /* スマホではロゴを少し小さくし、位置を微調整する */
        width: 90%;      /* 少し小さく */
        max-width: 300px; /* スマホに適したサイズに制限 */
        height: 300px;    /* 高さを固定 */
        top: 8%;         /* 中央に配置 */
        left: 50%;
    }
}


/* =========================
ロゴウォーターマーク
========================= */

.logo-watermark{
position:relative;
display:block;
width:100%;
text-align:center;
padding:140px 0;
z-index:1;
}

.logo-watermark::before{

content:"";
position:absolute;

top:50%;
left:50%;

width:100%;
max-width:1000px;
height:100%;

background:url(img/tylogobackless.png) no-repeat center / contain;

transform:translate(-50%,-45%) scale(1.1);

opacity:0;
filter:blur(8px);

pointer-events:none;

transition:
transform 1.6s ease,
opacity 1.6s ease,
filter 1.6s ease;
}

.logo-watermark.active::before{

opacity:0.14;
filter:blur(0);

transform:translate(-50%,-50%) scale(1);

/* 必要時のみ */
will-change: transform, opacity;

}


/* =========================
リング波紋（1回のみ）
========================= */

.logo-ripple{

position:absolute;

width:20px;
height:20px;

border-radius:50%;

border:2px solid rgba(0,150,255,0.4);

transform:translate(-50%,-50%) scale(0);

animation:rippleRing 2.2s ease-out;

pointer-events:none;

z-index:2;

}

@keyframes rippleRing{

0%{
transform:translate(-50%,-50%) scale(0);
opacity:0.6;
}

100%{
transform: translate(-50%,-50%) scale(calc(var(--ripple-size, 8) * 1.5));
opacity:0;
}

}



/*カタカタ左右に揺れるホバー*/
.img-shake img {
  display: block;
  transition: transform 0.2s;
}

/* ホバー時にアニメーション開始 */
.img-shake:hover img {
  animation: shake 0.5s ease;
}

/* 揺れの動き */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}


/*ボックスシャドウ*/
.rbox3 {
  box-shadow: 0 8px 15px rgba(0,0,0,0.25);
}


/*ボックスホバー*/
.rnd1.rbox3.shadow2{
  transition: all 0.3s ease;
}

.rnd1.rbox3.shadow2:hover{
  transform: translateY(-6px);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.12),
    0 22px 40px rgba(0,0,0,0.14);
  background: #ffffff;
}

/*スマホだけ左揃えにする*/
@media screen and (max-width: 768px){
  .sp-text {
    text-align: left !important;
  }
}