@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=DIN+Condensed:wght@400;500;700&display=swap');

#harassment-policy {
    width:800px;
    margin:0 auto;
    padding:0 0 130px 0;
    letter-spacing: 0.05em;
}
#harassment-policy h2 {
    margin:138px 0 0 0;
    text-align: center;
    padding-bottom: 110px;
}
#harassment-policy h3 {
    margin:0 0 42px 0;
    font-weight: normal;
    text-decoration: underline;
    text-underline-offset: 12px; /* 数字を大きくすると線が下に離れる */
    font-size: 17px;
    font-weight: 500;
}
#harassment-policy_1 {
    margin:0 0 75px 0;
    line-height: 30px;
    font-size: 14px;
}
#harassment-policy_2{
    font-weight: 500;
}
#harassment-policy_2 .harassment-policy_rule_detail {
    font-weight: 300;
}
#harassment-policy ol {
    padding-left: 0; 
    margin-left: 0; 
    padding-left: 1.2em;
    
}
#harassment-policy ol li {
    margin: 0 0 42px 0; 
    list-style-type: decimal;
}
#harassment-policy_3 {
    margin:0 0 32px 0;
    line-height: 30px;
}

#harassment-policy_4 {
    margin:0 0 32px 0;
    line-height: 30px;
}
#harassment-policy_4 a {
    transition: .3s;
    color: #000;
    text-decoration: none;
}
#harassment-soudan {
    font-weight: 500;
}
#harassment-policy_5 {
    margin:0 0 120px 0;
    line-height: 30px;
}
#harassment-policy_5 p {
    padding-left: 1.2em; /* 「※」の幅＋余白分、全体の左側を空ける */
    text-indent: -1.2em; /* 1行目だけ左に「※」の分だけ突き出させる */
}
#harassment-policy .harassment-policy_rule {
    margin:0 0 4px 0;
}
#harassment-policy #harassment-policy_back {
    background: url(../img/harassment-policy/back.svg) center center no-repeat;
    margin: 0 auto;
    width: 240px;
    height: 66px;
    text-align: center;
    position: relative;
    line-height: 1;
}

#harassment-policy #harassment-policy_back a {
    display: block;
    height: 66px;
    position: relative;
    z-index: 1;
}

/* ★画像読み込み遅延によるチラつき対策（事前ロード） */
#harassment-policy #harassment-policy_back a::after {
    content: "";
    display: none;
    background: url(../img/harassment-policy/backov.png);
}

/* --- 白背景のアニメーション設定 --- */
#harassment-policy #harassment-policy_back a::before {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    z-index: -1;
    content: "";
    background: #fff;
    transform: scale(0, 1);
    transform-origin: left top;
    pointer-events: none; /* チラつき・チラつき防止 */
}

/* ホバー時に白背景アニメーションを実行（0.3s） */
#harassment-policy #harassment-policy_back a:hover::before {
    animation: slideInOut 0.5s forwards;
}

@keyframes slideInOut {
    0% {
        transform: scale(0, 1);
        transform-origin: left top;
    }
    49% {
        transform: scale(1, 1);
        transform-origin: left top;
    }
    50% {
        transform: scale(1, 1);
        transform-origin: right top;
    }
    100% {
        transform: scale(0, 1);
        transform-origin: right top;
    }
}

/* --- アイコン（通常時: i） --- */
#harassment-policy #harassment-policy_back a i {
    background: url(../img/harassment-policy/back.png) no-repeat center center;
    background-size: 28px 12px; 
    position: absolute;
    top: 0;       
    left: 0;     
    width: 28px;                
    height: 12px;               
    z-index: 3;
    opacity: 1;
    pointer-events: none;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

#harassment-policy #harassment-policy_back a:hover i {
    animation: iconSwitch 0.6s forwards;
}

/* ★背景が半分通過するタイミング（25%と75%）で画像を切り替えるキーフレーム */
@keyframes iconSwitch {
    0%, 20% {
        opacity: 1; /* 行き：背景が半分伸びるまでは通常画像 */
    }
    25%, 70% {
        opacity: 0; /* 行き半分〜帰り半分まではホバー画像（span）を表示 */
    }
    75%, 100% {
        opacity: 1; /* 帰り：背景が半分戻ったタイミングで通常画像に戻る */
    }
}

/* --- アイコン（ホバー時: span） --- */
#harassment-policy #harassment-policy_back a span {
    background: url(../img/harassment-policy/backov.png) no-repeat center center;
    background-size: 28px 12px; 
    position: absolute;
    top: calc(50% - 6px);       
    left: calc(50% - 15px);     
    width: 28px;                
    height: 12px;               
    z-index: 2;
    pointer-events: none;
}

#harassment-policy #harassment-policy_back a:hover {
    opacity: 1;
}

@media (max-width:768px) {
    #harassment-policy {
        width:100%;
        margin:0 0;
        padding:0 6% 130px 6%;
        letter-spacing: 0.05em;
        
    }
        #harassment-policy h2 {
        width:91%;
        margin:70px auto 70px auto;
        text-align: center;
        padding-bottom: 0;
    }
    #harassment-policy h2 img{
        width:100%;
    }
    #harassment-policy h3 {
        margin:0 0 32px 0;
        font-weight: normal;
        text-decoration: underline;
        text-underline-offset: 12px; /* 数字を大きくすると線が下に離れる */
        font-size: 15px;
        font-weight: 500;
    }
    #harassment-policy_1 {
        margin:0 0 52px 0;
        line-height: 24px;
        font-size: 12px;
    }
    #harassment-policy_2{
        font-weight: 500;
    }
    #harassment-policy_2 .harassment-policy_rule_detail {
        font-weight: 300;
    }
    #harassment-policy ol {
        padding-left: 0; 
        margin-left: 0; 
        padding-left: 1.2em;
        font-size: 12px;
        line-height: 24px;
        
    }
    #harassment-policy ol li {
        margin: 0 0 32px 0; 
        list-style-type: decimal;
    }
    #harassment-policy_3 {
        margin:0 0 32px 0;
        line-height: 24px;
        font-size: 12px;
    }

    #harassment-policy_4 {
        margin:0 0 32px 0;
        line-height: 24px;
        font-size: 12px;
    }
    #harassment-policy_4 a {
        transition: .3s;
        color: #000;
        text-decoration: none;
    }
    #harassment-soudan {
        font-weight: 500;
        
    }
    #harassment-policy_5 {
        margin:0 0 60px 0;
        line-height: 24px;
        font-size: 12px;
    }
    #harassment-policy_5 p {
        margin:0 0 20px 0;
        padding-left: 1.2em; 
        text-indent: -1.2em; /* 1行目だけ左に「※」の分だけ突き出させる */
    }
    #harassment-policy .harassment-policy_rule {
        margin:0 0 4px 0;
    }
    
    
}

#harassment-policy_footer {
    margin:110px auto 108px auto;
    text-align: center;
    background: url(../img/harassment-policy/footer.svg) center center no-repeat;
    width: 364px;
    height: 66px;
    position: relative;
    line-height: 1;
}
#harassment-policy_footer a {
    display: block;
    height: 66px;
    position: relative;
    z-index: 1;
}

/* ★画像読み込み遅延によるチラつき対策（事前ロード） */
#harassment-policy_footer a::after {
    content: "";
    display: none;
    background: url(../img/harassment-policy/footerov.png);
}

/* --- 白背景のアニメーション設定 --- */
#harassment-policy_footer a::before {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    z-index: -1;
    content: "";
    background: #fff;
    transform: scale(0, 1);
    transform-origin: left top;
    pointer-events: none; /* チラつき・チラつき防止 */
}

/* ホバー時に白背景アニメーションを実行（0.3s） */
#harassment-policy_footer a:hover::before {
    animation: slideInOut 0.5s forwards;
}

@keyframes slideInOut {
    0% {
        transform: scale(0, 1);
        transform-origin: left top;
    }
    49% {
        transform: scale(1, 1);
        transform-origin: left top;
    }
    50% {
        transform: scale(1, 1);
        transform-origin: right top;
    }
    100% {
        transform: scale(0, 1);
        transform-origin: right top;
    }
}

/* --- アイコン（通常時: i） --- */
#harassment-policy_footer a i {
    background: url(../img/harassment-policy/footer.png) no-repeat center center;
    background-size: 296.5px 13.5px; 
    position: absolute;
    top: 0;       
    left: 0;     
    width: 296.5px;                
    height: 13.5px;               
    z-index: 3;
    opacity: 1;
    pointer-events: none;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

#harassment-policy_footer a:hover i {
    animation: iconSwitch 0.6s forwards;
}

/* ★背景が半分通過するタイミング（25%と75%）で画像を切り替えるキーフレーム */
@keyframes iconSwitch {
    0%, 20% {
        opacity: 1; /* 行き：背景が半分伸びるまでは通常画像 */
    }
    25%, 70% {
        opacity: 0; /* 行き半分〜帰り半分まではホバー画像（span）を表示 */
    }
    75%, 100% {
        opacity: 1; /* 帰り：背景が半分戻ったタイミングで通常画像に戻る */
    }
}

/* --- アイコン（ホバー時: span） --- */
#harassment-policy_footer a span {
    background: url(../img/harassment-policy/footerov.png) no-repeat center center;
    background-size: 296.5px 13.5px; 
    position: absolute;
    top: calc(50% - 6px);       
    left: calc(50% - 149px);     
    width: 296.5px;                
    height: 13.5px;               
    z-index: 2;
    pointer-events: none;
}

#harassment-policy_footer a:hover {
    opacity: 1;
}
#harassment-policy_footer_sp {
        display: none;
    }
@media (max-width:768px) {
    #harassment-policy_footer {
    display: none;
    }
    #harassment-policy_footer_sp {
        width:66%;
        height:auto;
        margin:70px auto 70px auto;
        display: block;
        text-align: center;
    }
}
#harassment-policy .effect1.on {
    opacity: 0;
    animation: ef1 3.0s forwards;
}