/* brand
=============================================== */

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

.br-box { margin-bottom:2.5em; }
.br-box:last-child { margin-bottom:0; }
.br-box .ttl { margin-bottom:0.5em; font-size:150%; line-height:140%; }

/* -- Media Queries -- */

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

.br-box .ttl { font-size:120%; }

}


/* pic
-------------------------------- */

.br-pic { margin:auto; background-color:#efefef; }
.br-pic span { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }

#pic_brand1 { margin:-6.0em 10% -3.0em 0%; width:70%; aspect-ratio:964 / 338; }
@media all and (max-width: 767px) {
#pic_brand1 { margin:-2.0em 10% -3.0em -7%; width:90%; }
}
#pic_brand2 { margin:1.0em auto -2.0em auto; max-width:640px; aspect-ratio:1240 / 590; }
#pic_brand3 { margin:1.5em auto -1.0em auto; max-width:640px; aspect-ratio:1392 / 760; background:transparent; }


/* topic
-------------------------------- */

.topic { position:relative; margin:0.5em auto; width:70%; padding:1.8em; background-color:#fff; border-top:1px var(--cl-tbsblue) solid; border-left:1px var(--cl-tbsblue) solid; border-right:1px var(--cl-tbsblue) solid; border-bottom:var(--cl-tbsblue) 3px solid; z-index:10; }
.topic:before { position:absolute; bottom:0; right:0; content:""; /* triangle */ border-top:10px solid transparent; border-right:40px solid var(--cl-tbsblue); }
.topic-ttl { margin-bottom:0.5em; color:var(--cl-tbsblue); }
.topic-ttl i { font-style:normal; font-weight:bold; }
.topic-ttl .ttl-txt { color:#333; }
.topic-ttl::before { margin-right:0.3em; content:""; display:inline-block; vertical-align:bottom; width:1.0em; height:1.0em; background:url(../img/brand/icon_topic.png) center center no-repeat; background-size:cover; }
.topic-txt { line-height:160%; }


/* exlink-tip
-------------------------------- */

.exlink-tip-area { text-align:right; }
.exlink-tip { display:inline-block; margin:1.0em auto 2.5em auto; background-color:#fff; padding:1.1em 1.4em 0em 1.1em; position:relative; border:1px var(--cl-tbsblue) solid; z-index:10; text-align:left; }
.exlink-tip:hover { cursor:pointer; transform: translate(2px,2px); }
.exlink-tip a { color:#333; text-decoration:none; color:#000!important; line-height:140%; }
.exlink-tip a::after { margin-left:0.5em; content:""; display:inline-block; vertical-align:bottom; width:1.2em; height:1.2em; background:url(../img/brand/icon_exlink.png) center center no-repeat; background-size:cover; }
.exlink-tip:before,
.exlink-tip:after { height:0; display:block; position:absolute; content: ""; }
.exlink-tip:before{ width: calc(100% - 49px); left:0; border-top:solid 25px #fff; border-right:solid 50px transparent; bottom:-25px; z-index:3; }
.exlink-tip:after{ width:calc(100% - 48.5px); left:-1px; border-top:solid 25px var(--cl-tbsblue); border-right:solid 50px transparent; bottom:-26px; z-index:2; }


/* ---- Media Queries ---- */

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

.exlink-tip { background-color:#fff; padding:20px 20px 5px 20px; position:relative; border:1px var(--cl-tbsblue) solid; font-size:90%; }
.exlink-tip:before{ width: calc(100% - 40px); left:0; border-top:solid 15px #fff; border-right:solid 40px transparent; bottom:-15px; }
.exlink-tip:after{ width:calc(100% - 38.5px); left:-1px; border-top:solid 15px var(--cl-tbsblue); border-right:solid 40px transparent; bottom:-16px; }

}


/* btn-backtop
-------------------------------- */

#btn-backtop { margin-bottom:1.0em; text-align:center; }
#btn-backtop a { position:relative; display:inline-block; width:23.0em; 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; text-decoration:none; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) { .br-btn a:hover { transform:translateX(4px); opacity:0.7; } }

/*eof*/