/* benefits
=============================================== */

#benefits #page-header { background-image:url(../img/benefits/bg_header.jpg); }

/* top-message
-------------------------------- */

.bf-box { margin-bottom:2.0em; }

.bf-box-toggle { margin-bottom:2.0em; padding:1.0em; border-radius:1.0em; border:#000 1px solid; background-color:#efefef; }

.toggle-button { text-align:center; }
.toggle-button p { display:inline-block; position:relative; padding:0.7em 2.2em 0.7em 0.7em; cursor:pointer; border-bottom:#000 1px solid; text-decoration:none; user-select:none; font-weight:700; }
@media (hover:hover) { .toggle-button p:hover { opacity:0.7; } }
.toggle-button p::after { position:absolute; top:0.7em; right:0.5em; display:inline-block; content:""; width:1.2em; height:1.2em; background-image:url(../img/benefits/arrow1.png); background-position:center center; background-repeat:no-repeat; background-size:contain; }
.toggle-button.toggle-button-open p::after { background-image:url(../img/benefits/arrow2.png); }

.bf-subttl { margin-bottom:0.5em; font-size:140%; line-height:140%; }
.bf-ttl { margin-bottom:0.5em; font-size:120%; line-height:140%; }
.bf-sttl { margin-bottom:0.5em; font-size:105%; line-height:140%; }
.bf-w-box { background-color:#fff; margin-bottom:1.0em; padding:1.0em 1.0em 0.5em 1.0em; border-radius:1.0em; }

/* -- Media Queries -- */

@media all and (max-width:767px) {

.toggle-button { font-size:90%; }

.bf-subttl { font-size:125%; }
.bf-ttl { font-size:110%; }


}


/* link-sstnb */

#link-sstnb { text-align:center; }
#link-sstnb a { display:inline-block; padding:0.2em 0.5em 1.0em 0.5em; border:#36A956 1px solid; border-radius:4px; text-decoration:none; color:#36A956; }
@media (hover:hover) { #link-sstnb a:hover { opacity:0.7; } }
#link-sstnb a::before,
#link-sstnb a::after { position:relative; display:inline-block; content:""; background-position:center center; background-repeat:no-repeat; background-size:contain; }
#link-sstnb a::before { bottom:-0.4em; width:1.6em; height:1.6em; margin-right:0.2em; background-image:url(../img/benefits/icon_sstnb.png); }
#link-sstnb a::after { bottom:-0.2em; width:1.2em; height:1.2em; margin-left:0.2em; background-image:url(../img/benefits/icon_exlink.png); }

/* -- Media Queries -- */

@media all and (max-width:767px) {

#link-sstnb { font-size:90%; }

}


/* bf-btn */

.bf-btn { text-align:center; }
.btn-childcare a { width:15.0em; }
.bf-btn a { position:relative; display:inline-block; margin-bottom:1.0em; padding:1.0em 0; background-color:#fff; border-radius:1000px; border:var(--cl-tbsblue) 2px solid; box-shadow:2px 2px 4px rgba(0, 0, 0, 0.4); color:var(--cl-tbsblue); font-weight:700; font-size:90%; text-decoration:none; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) { .bf-btn a:hover { transform:translateY(4px); opacity:0.7; } }


/* pic */

.bf-pic .pic { margin:0 auto 1.0em auto; background-color:#fff; }
.bf-pic .pic span { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:contain; }

#logo_kenko .pic { width:260px; aspect-ratio:596 / 568; }
.bf-pic-nm .pic { width:500px; border-radius:10px; }
.bf-pic-nm .pic span { border-radius:10px; }
#pic_risyoku .pic { aspect-ratio:1260 / 464; }
#pic_ikukyu .pic { width:560px; aspect-ratio:1260 / 532; }
.bf-pic-w1 .pic { width:560px; aspect-ratio:1260 / 716; }
.bf-pic-w2 .pic { width:560px; aspect-ratio:1132 / 652; }
.bf-pic .caption { width:560px; margin:-0.5em auto 1.5em auto; }

/* -- Media Queries -- */

@media all and (max-width:767px) {

#pic_risyoku .pic,
#pic_ikukyu .pic,
.bf-pic-w1 .pic,
.bf-pic-w2 .pic { width:auto; }
.bf-pic .caption { width:auto; font-size:90%; }

}


/* link-culture */

#link-culture { text-align:center; margin-bottom:2.0em; }
#link-culture a { margin:auto; display:block; width:calc(868px * 0.66); aspect-ratio:868 / 530; background:url(../img/benefits/link_culture.png) center center no-repeat; background-size:cover; text-indent:-9999px; /* animation */ transition: transform 0.3s ease; }
@media (hover:hover) { #link-culture a:hover { transform: scale(1.1); } }

/* -- Media Queries -- */

@media all and (max-width:979px) {

#link-culture a { width:100%; aspect-ratio:375 / 264; }
@media (hover:hover) { #link-culture a:hover { opacity:0.7; transform: scale(1); } }

}



/*eof*/