/* business style
=============================================== */

#business-dx #page-header { background-image:url(../img/dx/bg_header.jpg); }
#business-global #page-header { background-image:url(../img/global/bg_header.jpg); }
#business-city #page-header { background-image:url(../img/city/bg_header.jpg); }

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

/* -- Media Queries -- */

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

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

}


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

.bs-pic { margin:auto; background-color:#efefef; }
.bs-pic span { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; }
.bs-pic-cap { margin:0.3em 0 1.2em 0; font-size:90%; line-height:140%; text-align:center; }
@media all and (max-width: 767px) {
.bs-pic-cap { font-size:80%; }
}

/* dx */
#pic-tver { margin-top:1.0em; max-width:480px; aspect-ratio:580 / 434; }
#pic-rikon { margin:1.0em auto; max-width:480px; aspect-ratio:757 / 1085; }
#pic-jigoku { margin-top:1.0em; max-width:480px; aspect-ratio:1160 / 655; border:#ddd 1px solid; }

/* global */
#pic_purpose { margin-top:1.0em; width:300px; aspect-ratio:504 / 924; }
@media all and (max-width: 767px) {
#pic_purpose { max-width:200px; }
}
#pic_mugen { margin-top:1.0em; max-width:640px; aspect-ratio:1160 / 652; }
#pic_100samurai { margin-top:1.0em; max-width:640px; aspect-ratio:1160 / 652; }
#pic_hatsukoi { margin-top:1.0em; max-width:640px; aspect-ratio:1160 / 820; }
#pic_kasso1 { margin-top:1.0em; max-width:640px; aspect-ratio:1152 / 672; }
#pic_kasso2 { margin-top:1.0em; max-width:640px; aspect-ratio:1152 / 672; }
#pic_shark { margin-top:1.0em; max-width:640px; aspect-ratio:1152 / 672; }
#pic_seven { margin-top:1.5em; max-width:640px; aspect-ratio:1152 / 772; }
#pic_alice { margin-top:1.0em; max-width:480px; aspect-ratio:757 / 946; }
#pic_oroka { margin-top:1.0em; max-width:480px; aspect-ratio:757 / 1084; }

/* city */
#pic_suishin1 { margin-top:1.0em; max-width:640px; aspect-ratio:2294 / 647; }
#pic_suishin2 { margin:1.0em auto; max-width:640px; aspect-ratio:1448 / 1126; }
.pic2col { display:flex; flex-wrap:wrap; }
.pic2col figure { position:relative; }
.pic2col .caption { position:absolute; z-index:2; bottom:-1.0em; width:100%; text-align:center;  }
.pic2col .caption p { display:inline-block; padding:0.5em; background-color:#ddd;  }
#pic_parse1, #pic_parse2 { margin:1.0em auto; width:48%; aspect-ratio:824 / 450; border:#ddd 1px solid; }
@media all and (max-width: 767px) {
#pic_parse1, #pic_parse2 { width:100%; }
.pic2col .caption p { font-size:3.0vw; }
}
#pic_cg1 { margin:1.0em auto; max-width:640px; aspect-ratio:1598 / 898; }
#pic_cg2 { margin-top:1.0em; max-width:640px; aspect-ratio:1160 / 653; }
#pic_shake { margin-top:1.0em; max-width:640px; aspect-ratio:1080 / 1058; }
#pic_harry { margin-top:1.0em; max-width:640px; aspect-ratio:1520 / 1282; }
#pic_cg3 { margin:1.0em auto; max-width:640px; aspect-ratio:1680 / 946; }


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

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


/* bs-btn
-------------------------------- */

.bs-btn { text-align:center; }
.bs-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; text-decoration:none; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover:hover) { .bs-btn a:hover { transform:translateX(4px); opacity:0.7; } }

#btn-backtop { margin-bottom:1.0em; }
#btn-backtop a { width:20.0em; }


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

.exlink-tip-area { text-align:center; }
.exlink-tip { display:inline-block; margin:1.0em auto 2.5em auto; background-color:#fff; padding:1.1em 1.1em 0em 1.1em; position:relative; border:1px #FF91A0 solid; z-index:10; }
.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/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% - 50px); 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 #FF91A0; 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 #FF91A0 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 #FF91A0; border-right:solid 40px transparent; bottom:-16px; }

}


/* business-banner
-------------------------------- */

#business-banner .ttl { font-size:150%; line-height:140%; margin-bottom:1.0em; text-align:center; }
#bs-bn-list { margin:auto; width:470px; }
#bs-bn-list li { margin-bottom:1.0em;  }
#bs-bn-list li .banner a { display:flex; justify-content:center; align-items:center; width:100%; aspect-ratio:312 /60;  background-position:center center; background-repeat:no-repeat; background-size:cover; border-radius:8px; font-size:115%; line-height:140%; color:#fff; text-decoration:none; box-shadow:1px 1px 10px rgba(0, 0, 0, 0.25); /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
#bs-bn-list li .banner a::after { display:inline-block; content:""; vertical-align:middle; margin-left:0.25em; width:1.2em; height:1.2em; background:url(../img/index/arrow.png) center center no-repeat; background-size:100% auto; }
@media (hover:hover) { #bs-bn-list li .banner a:hover { transform:translateX(4px); opacity:0.7; } }
#bs-bn-dx .banner a { background-image:url(../img/index/btn_dx.jpg); }
#bs-bn-global .banner a { background-image:url(../img/index/btn_global.jpg); }
#bs-bn-city .banner a { background-image:url(../img/index/btn_city.jpg); }

/* -- Media Queries -- */

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

#business-banner .ttl { font-size:130%; }
#bs-bn-list { width:90%; margin:0 5%; font-size:3.5vw; }
#business #bs-bn-list { width:100%; margin:0; }
#bs-bn-list li .banner a { padding:1.0em; box-sizing:border-box; }
#bs-bn-list li#bs-bn-city .banner a::after { width:1.37em; height:1.37em; }

}

/*eof*/