/* Design Center 2023 detail
=================================== */

@font-face {
  font-family: 'TBSGothic';
  src: url('https://www.tbs.co.jp/um/tpfonts/2e0869c1-da33-42ae-9828-55499bd42a69.woff') format("woff");
  font-weight:normal;
  font-style:normal;
}
@font-face {
  font-family: 'TBSGothic';
  src: url('https://www.tbs.co.jp/um/tpfonts/044de588-d2c9-4010-86b0-1c026db099a2.woff') format("woff");
  font-weight:bold;
  font-style:normal;
}

#pagebody { background-color:#fff; font-family:'TBSGothic'; font-feature-settings:"palt"; letter-spacing:0.1em; }

#main { width:980px; margin:auto; }
#main:after {content:"";clear:both;display:block;}

.mov_yt { width:auto; margin:0 auto 20px auto; }
.mov_yt_inner { position:relative; width:auto; height:0; padding-top:56.25%; }
.mov_yt_inner iframe { position:absolute; left:0; top:0; width:100%; height:100%; }

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

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

#main { width:90%; margin:0 5%; }

}



/*
---------------------- dtl-header ---------------------- */

#dtl-hr { position:relative; z-index:1; height:320px; background-color:#dee0e7; }
#dtl-hr hr { display:none; }

#dtl-header { position:relative; z-index:2; width:1080px; margin:-190px auto 100px auto; }
#hd-box-l { float:left; width:560px; height:160px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; }
#hd-category { margin-bottom:1.0em; }
#hd-category li { margin-bottom:0.15em; }
#hd-category li div { display:inline-block; content:""; position:relative; top:0.6em; width:2.0em; height:2.0em; border-radius:1000px; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
#hd-category li.ctcr div { background-image:url(../img/design/top/pc/icon_ctcr.png); }
#hd-category li.ctbr div { background-image:url(../img/design/top/pc/icon_ctbr.png); }
#hd-category li.cpbr div { background-image:url(../img/design/top/pc/icon_cpbr.png); }
#hd-category li p { display:inline-block; margin-left:-1.2em; padding:0.3em 0.3em 0.3em 1.4em; background-color:#fff; border:red 1px solid; border-radius:0.4em; font-size:90%; font-weight:bold; }
#hd-category li.ctcr p { color:#0150FA; border-color:#0150FA; }
#hd-category li.ctbr p { color:#EB6880; border-color:#EB6880; }
#hd-category li.cpbr p { color:#6488FA; border-color:#6488FA; }
#hd-mainttl { padding-left:50px; font-size:240%; line-height:140%; }
#hd-tmb { float:right; width:510px; background-color:#fff; }
#hd-tmb .pic { position:relative; width:100%; height:0; padding-top:56.25%; }
#hd-tmb .pic span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
#hd-lead { clear:both; padding:50px 50px 0 50px; font-weight:bold; font-size:120%; line-height:200%; text-align:justify; }

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

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

#dtl-hr { height:250px; }

#dtl-header { width:90%; margin:-240px 5% 40px 5%; }
#hd-box-l { float:none; width:auto; }
#hd-category { font-size:75%; }
#hd-category li { display:inline-block; margin-right:0.2em; }
#hd-mainttl { margin-bottom:0.5em; padding-left:0; font-size:160%; }
#hd-tmb { float:none; width:auto; margin-top:0; }
#hd-lead { padding:30px 0 0 0; font-size:90%; }

}



/*
---------------------- main-box-l ---------------------- */

#main-box-l { float:left; width:600px; }

.main-chpt { margin-bottom:50px; }
.main-sbox { margin-bottom:50px; }
.main-chpt .subttl { margin-bottom:0.5em; font-size:190%; line-height:140%; color:#0050FF; }
.main-chpt .sttl { margin-bottom:0.5em; font-size:160%; line-height:140%; }
.main-chpt .txt { padding-bottom:30px; line-height:200%; }
@media (hover: hover) { .main-chpt .txt a:hover { text-decoration:none; } }
.main-chpt .link { word-break:break-all; /* hover */ transition:opacity 0.2s ease-out; }
 @media (hover: hover) { .main-chpt .link:hover {  opacity:0.5; } }

.dtl-p { margin-bottom:30px; text-align:center; }
.dtl-p .pic { position:relative; width:100%; height:0; background-color:#efefef; }
.dtl-p.brdr .pic { border:#ddd 1px solid; }
.dtl-p .pic span, .dtl-p .pic a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
.dtl-p .cap { padding-top:1.0em; font-size:90%; line-height:140%; text-align:left; }

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

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

#main-box-l { float:none; width:auto; }

.main-chpt .subttl { font-size:160%; }
.main-chpt .sttl { font-size:130%; }
.main-chpt .txt { font-size:85%; }
.dtl-p .cap { font-size:80%; }

}

/* ------ designer ------ */

.dsgn { margin-bottom:40px; padding:20px; border:#000 1px solid; border-radius:20px; box-sizing:border-box; }
.dsgn-ttl { padding-bottom:0.5em; border-bottom:#000 1px solid; font-weight:normal; text-align:center; }
.dsgn-box { margin-top:0.8em; }
.dsgn-box:after {content:"";clear:both;display:block;}
.dsgn-p { float:left; width:155px; }
.dsgn-p .pic { position:relative; width:100%; height:0; padding-top:100%; }
.dsgn-p .pic span { position:absolute; display:block; left:0; top:0; width:100%; height:100%;  background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
.dsgn-box-r { float:right; width:383px; font-size:90%; letter-spacing:0.05em; }
.dsgn-name { float:left; margin:0.3em 0; font-size:140%; font-weight:bold; }
.dsgn-btn-ppl { float:right; width:10.5em; }
.dsgn-btn-ppl p { width:100%; }
.dsgn-btn-ppl p a { display:block; position:relative; width:100%; padding:0.6em 0; border-radius:1000px; color:#000; text-decoration:none; background-color:#D9D9D9; text-align:center; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover: hover) { .dsgn-btn-ppl p a:hover { transform:translateX(4px); opacity:0.7; } }
.dsgn-txt { clear:both; padding:0.5em 0; line-height:180%; }

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

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

.dsgn { padding:10px; border-radius:10px;  }
.dsgn-ttl { font-size:90%; }
.dsgn-p { width:30%; }
.dsgn-box-r { float:right; width:67%; font-size:70%; }

}

/*
---------------------- main-box-r ---------------------- */

#main-box-r { float:right; width:330px; }

#recommend { width:330px; }
#rcmd-ttl { margin:0 auto 40px auto; display:block; width:152px; height:21px; background:url(../img/design/detail/recommend.png) center center no-repeat; background-size:cover; text-indent:-9999px; }

.rcmd-item { width:100%; margin-bottom:40px; }
.rcmd-item:after {content:"";clear:both;display:block;}
.rcmd-item a { display:block; text-decoration:none; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
@media (hover: hover) { .rcmd-item a:hover { transform:translateX(4px); opacity:0.7; } }
.rcmd-p { float:left; width:150px; background-color:#efefef; }
.rcmd-p .pic { position:relative; width:100%; height:0; padding-top:56.25%; }
.rcmd-p .pic span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
.rcmd-box-r { float:right; width:160px; font-size:90%; }
.rcmd-category { margin-bottom:0.7em; color:#C7C7C7; line-height:140%; font-weight:bold; }
.rcmd-ttl { line-height:140%; color:#000; }

#dsgn-btn-back { text-align:center; font-size:90%; }
#dsgn-btn-back p { width:19.0em; margin:0 auto; }
#dsgn-btn-back p a { display:inline-block; position:relative; width:100%; padding:1.2em 0; border-radius:1000px; font-weight:bold; color:#8C95AA; text-decoration:none; background-color:#DDE4EC; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; }
#dsgn-btn-back p a::after { display:inline-block; content:""; margin-left:0.5em; width:1.0em; height:1.0em; vertical-align:bottom; background:url(../img/design/detail/arrow.png) center center no-repeat; background-size:100% auto; }
@media (hover: hover) { #dsgn-btn-back p a:hover { transform:translateX(4px); opacity:0.7; } }

#recommend.is-fixed { position:fixed; top:92px; }

/* ------  ------ */

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

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

#main-box-r { float:none; width:auto; }
#recommend { width:auto; padding-bottom:40px; }
#rcmd-ttl { margin:0 auto 30px auto; }
.rcmd-item { margin-bottom:30px; }
.rcmd-p { width:46%; }
.rcmd-box-r { width:50%; }

}



/*
---------------------- picture ---------------------- */

#dtl-p-vi-p1-1 .pic,
#dtl-p-vi-p1-2 .pic,
#dtl-p-vi-p1-3 .pic,
#dtl-p-vi-p2-1 .pic,
#dtl-p-vi-p2-2 .pic,
#dtl-p-vi-p2-3 .pic { padding-top:56.3%; }

#dtl-p-renovation-p1-1 .pic { padding-top:65.2173913043478%; }
#dtl-p-renovation-p1-2 .pic { padding-top:32.6086956521739%; }
#dtl-p-renovation-p1-3 .pic { padding-top:65.2173913043478%; }
#dtl-p-renovation-p1-4 .pic { padding-top:55.8695652173913%; }
#dtl-p-renovation-p1-5 .pic { padding-top:65.2173913043478%; }
#dtl-p-renovation-p2-1 .pic { padding-top:65.2173913043478%; }
#dtl-p-renovation-p3-1 .pic { padding-top:66.7391304347826%; }
#dtl-p-renovation-p3-2 .pic { padding-top:31.304347826087%; }
#dtl-p-renovation-p3-3 .pic { padding-top:31.304347826087%; }
#dtl-p-renovation-p3-4 .pic { padding-top:31.304347826087%; }
#dtl-p-renovation-p4-1 .pic { padding-top:55.4347826086957%; }
#dtl-p-renovation-p4-2 .pic { padding-top:40.9782608695652%; }
#dtl-p-renovation-p4-3 .pic { padding-top:55.4347826086957%; }

#dtl-p-seriku-p1-1 .pic { padding-top:65.7608695652174%; }
#dtl-p-seriku-p2-1 .pic { padding-top:35.7608695652174%; }
#dtl-p-seriku-p3-1 .pic { padding-top:56%; }
#dtl-p-seriku-p4-1 .pic { padding-top:127.160493827161%; }
#dtl-p-seriku-p4-2 .pic { padding-top:56.304347826087%; }
#dtl-p-seriku-p5-1 .pic { padding-top:55.9782608695652%; }
#dtl-p-seriku-p5-2 .pic { padding-top:52.2826086956522%; }

#dtl-p-obi-p1-1 .pic,
#dtl-p-obi-p1-2 .pic,
#dtl-p-obi-p1-3 .pic { padding-top:56.3%; }
#dtl-p-obi-p2-1 .pic,
#dtl-p-obi-p2-2 .pic,
#dtl-p-obi-p2-3 .pic,
#dtl-p-obi-p2-4 .pic { padding-top:59.23913%; }

#dtl-p-drama-variety-p1-1 .pic,
#dtl-p-drama-variety-p1-2 .pic,
#dtl-p-drama-variety-p1-3 .pic,
#dtl-p-drama-variety-p1-4 .pic,
#dtl-p-drama-variety-p2-1 .pic,
#dtl-p-drama-variety-p2-2 .pic,
#dtl-p-drama-variety-p2-3 .pic { padding-top:56.195652173%; }

#dtl-p-harrypotter-p1-1 .pic,
#dtl-p-harrypotter-p1-2 .pic,
#dtl-p-harrypotter-p1-3 .pic,
#dtl-p-harrypotter-p1-4 .pic,
#dtl-p-harrypotter-p1-5 .pic,
#dtl-p-harrypotter-p1-6 .pic { padding-top:65.2173913%; }

#dtl-p-tdx-p1-1 .pic { padding-top:66.6304347826087%; }
#dtl-p-tdx-p1-2 .pic { padding-top:55.9782608695652%; }
#dtl-p-tdx-p2-1 .pic { padding-top:75.1086956521739%; }
#dtl-p-tdx-p2-2 .pic { padding-top:55.9782608695652%; }
#dtl-p-tdx-p3-1 .pic { padding-top:56.304347826087%; }
#dtl-p-tdx-p3-2 .pic { padding-top:56.304347826087%; }
#dtl-p-tdx-p3-3 .pic { padding-top:59.2391304347826%; }
#dtl-p-tdx-p3-4 .pic { padding-top:59.2391304347826%; }
#dtl-p-tdx-p4-1 .pic { padding-top:75.1086956521739%; }
#dtl-p-tdx-p4-2 .pic { padding-top:75.1086956521739%; }
#dtl-p-tdx-p4-3 .pic { padding-top:56.304347826087%; }
#dtl-p-tdx-p4-4 .pic { padding-top:56.304347826087%; }

#dtl-p-web-p1-1 .pic,
#dtl-p-web-p2-1 .pic,
#dtl-p-web-p2-2 .pic,
#dtl-p-web-p3-1 .pic,
#dtl-p-web-p4-1 .pic{ padding-top:59.23913%; }

/*eof*/