/* Design Center 2023 top =================================== */ @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; } .mov_yt { width:800px; margin: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) { .mov_yt { width:auto; } } /* ---------------------- loading ---------------------- */ #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 1); text-align: center; display: none; transition: opacity 0.5s ease-in-out; z-index:2000; } #loading.active { opacity: 1; } #loading-spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-top: 4px solid #0050ff; border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; margin:45vh auto auto auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ---------------------- header ---------------------- */ /* ------ top header hole logo ------ */ #design-top-header { position:relative; width:100%; height:0; padding-top:50.782881002%; border-bottom:#8E7E70 1.0vw solid; } #design-top-header .inner { position:absolute; display:block; left:0; top:0; width:100%; height:100%; } #design-top-header #header-logo { position:absolute; top:0; left:0; z-index:2; width:43.8935%; height:100%; } #design-top-header #header-logo h1 { position:relative; width:100%; height:0; padding-top:115.6956%; /* for reset*/ margin:0; background:none; } #design-top-header #header-logo h1 span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img/design/top/pc/mainttl.png); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; } /* ---- Media Queries ---- */ @media all and (max-width: 767px) { #design-top-header { padding-top:194.936386768%!important; border-bottom:#8E7E70 3.0vw solid; } #design-top-header #header-logo { width:100%; } #design-top-header #header-logo h1 { padding-top:calc(860% / 786 * 100); } #design-top-header #header-logo h1 span { background-image:url(../img/design/top/smp/mainttl.png); top:-5.0vw; } } /* ------ top header slide ------ */ #top-header-p ul { position:relative; width:100%; height:0; padding-top:50.782881002%; } .top-header-p-itm { position:absolute; z-index:1; display:block; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; } .top-header-p1 { background-image:url(../img/design/top/pc/top_header_p1.jpg); } .top-header-p2 { background-image:url(../img/design/top/pc/top_header_p2.jpg); } .top-header-p3 { background-image:url(../img/design/top/pc/top_header_p3.jpg); } .top-header-p4 { background-image:url(../img/design/top/pc/top_header_p5.jpg); } .top-header-p5 { background-image:url(../img/design/top/pc/top_header_p5.jpg); } /* ---- Media Queries ---- */ @media all and (max-width: 767px) { #top-header-p ul { padding-top:174.936386768%; margin-top:20%; } .top-header-p1 { background-image:url(../img/design/top/smp/top_header_p1.jpg); } .top-header-p2 { background-image:url(../img/design/top/smp/top_header_p2.jpg); } .top-header-p3 { background-image:url(../img/design/top/smp/top_header_p3.jpg); } .top-header-p4 { background-image:url(../img/design/top/smp/top_header_p5.jpg); } .top-header-p5 { background-image:url(../img/design/top/smp/top_header_p5.jpg); } } /* ------ menu ------ */ #design-menu-pc { /*position:absolute;*/ position:fixed; z-index:3; top:90px; right:0; } #design-menu-pc ul { display:flex; background-color:rgba(255,255,255,0.8); border-radius:10px 0 0 10px; padding:27px 40px; box-sizing:border-box; } #design-menu-pc ul li { margin:0 40px; } #design-menu-pc ul li .w1 { position:relative; display:block; width:100%; height:0; } #design-menu-pc ul li .w2 { 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; } @media (hover: hover) { #design-menu-pc ul li a.w1:hover { opacity:0.7; } } #design-menu-pc ul li:nth-child(1) { width:130px; } #design-menu-pc ul li:nth-child(2) { width:92px; } #design-menu-pc ul li:nth-child(3) { width:90px; } #design-menu-pc ul li:nth-child(4) { width:57px; } #design-menu-pc ul li:nth-child(1) .w1 { padding-top:15.7692307692308%; } #design-menu-pc ul li:nth-child(2) .w1 { padding-top:23.369565217%; } #design-menu-pc ul li:nth-child(3) .w1 { padding-top:23.759%; } #design-menu-pc ul li:nth-child(4) .w1 { padding-top:36.283185840708%; } #design-menu-pc ul li:nth-child(1) .w2 { background-image:url(../img/design/top/pc/menu_about.png); } #design-menu-pc ul li:nth-child(2) .w2 { background-image:url(../img/design/top/pc/menu_works.png); } #design-menu-pc ul li:nth-child(3) .w2 { background-image:url(../img/design/top/pc/menu_people.png); } #design-menu-pc ul li:nth-child(4) .w2 { background-image:url(../img/design/top/pc/menu_qa.png); } #design-btn-menu { display:none; } #design-menu-smp { display:none; } /* ---- Media Queries ---- */ @media all and (max-width: 1399px) { #design-menu-pc ul { border-radius:7px 0 0 7px; padding:20px 30px; } #design-menu-pc ul li { margin:0 30px; } #design-menu-pc ul li:nth-child(1) { width:calc(130px * 0.8); } #design-menu-pc ul li:nth-child(2) { width:calc(92px * 0.8); } #design-menu-pc ul li:nth-child(3) { width:calc(90px * 0.8); } #design-menu-pc ul li:nth-child(4) { width:calc(57px * 0.8); } } @media all and (max-width: 1079px) { #design-menu-pc { top:10px; right:15%; } #design-menu-pc ul { border-radius:1000px; padding:20px 10px; } #design-menu-pc ul li { margin:0 10px; } } @media all and (max-width: 767px) { #design-menu-pc { /*position:fixed; z-index:1000;*/ top:70px; right:calc(50% - (395px / 2)); } } @media all and (max-width: 419px) { #design-menu-pc { right:calc(50% - (335px / 2)); } #design-menu-pc ul { padding:15px 10px; } #design-menu-pc ul li { margin:0 7px; } #design-menu-pc ul li:nth-child(1) { width:calc(130px * 0.7); } #design-menu-pc ul li:nth-child(2) { width:calc(92px * 0.7); } #design-menu-pc ul li:nth-child(3) { width:calc(90px * 0.7); } #design-menu-pc ul li:nth-child(4) { width:calc(57px * 0.7); } } /* ---------------------- about us ---------------------- */ #design-about { display:flex; overflow:hidden; } #about-p-l, #about-p-r { flex:1; } #about-p-l span, #about-p-r span { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:auto 100%; text-indent:-9999px; } #about-p-l span { background-image:url(../img/design/top/pc/about_p1.jpg); } #about-p-r span { background-image:url(../img/design/top/pc/about_p2.jpg); } #about-main { position:relative; width:630px; } .about-chpt { position:relative; width:100%; height:0;} .about-chpt .inner { 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; } .about-line { position:relative; width:100%; height:0; } .about-line 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; font-size:1%; line-height:1%; } .about-line span hr { display:none; } #about-chpt0 { padding-top:calc(1404% / 1260 * 100); } #about-chpt0 .inner { background-image:url(../img/design/top/pc/about202410_chpt0.png); } #about-sttl { padding-top:calc(320% / 1260 * 100); } #about-sttl .inner { background-image:url(../img/design/top/pc/about202410_sttl.png); } #about-chpt1 { padding-top:calc(1187% / 1260 * 100); } #about-chpt1 .inner { background-image:url(../img/design/top/pc/about202410_chpt1.png); } #about-chpt2 { padding-top:calc(1052% / 1260 * 100); } #about-chpt2 .inner { background-image:url(../img/design/top/pc/about202410_chpt2.png); } #about-chpt3 { padding-top:calc(1075% / 1260 * 100); } #about-chpt3 .inner { background-image:url(../img/design/top/pc/about202410_chpt3.png); } #about-btm-line { display:none; } /* ---- Media Queries ---- */ @media all and (max-width: 1199px) { #about-main { position:relative; width:420px; } } @media all and (max-width: 767px) { #design-about { display:block; margin-bottom:0; } #about-p-l, #about-p-r { display:none; } #about-main { width:100%; } #about-chpt0 { padding-top:calc(931% / 955 * 100); z-index:3; } #about-chpt0 .inner { background-image:url(../img/design/top/smp/about202410_chpt0.png); } #about-sttl { padding-top:calc(736% / 955 * 100); z-index:0; } #about-sttl .inner { background-image:url(../img/design/top/smp/about202410_p.png); } #about-chpt1 { padding-top:calc(1336% / 955 * 100); z-index:3; } #about-chpt1 .inner { background-image:url(../img/design/top/smp/about202410_chpt1.png); } #about-chpt2 { padding-top:calc(916% / 955 * 100); z-index:3; } #about-chpt2 .inner { background-image:url(../img/design/top/smp/about202410_chpt2.png); } #about-chpt3 { padding-top:calc(1080% / 955 * 100); z-index:3; } #about-chpt3 .inner { background-image:url(../img/design/top/smp/about202410_chpt3.png); } #about-btm-line { display:block; } #about-btm-line span { display:block; position:relative; z-index:1; width:100%; height:0; padding-top:58.2697201017812%; } #about-btm-line span i { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/design/top/smp/about_line.png) center center no-repeat; background-size:cover; text-indent:-9999px; } } /* ------ icon ------ */ #about-icon { position:absolute; z-index:2; width:100%; height:100%; } #about-icon div { position:absolute; z-index:3; } #about-icon div span { position:relative; display:block; width:100%; height:0; } #about-icon div span i { 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; } #about-icon div:nth-child(1) { top:24.8015873015873%; left:-41.7460317460318%; width:62.3809523809524%; } #about-icon div:nth-child(2) { top:16.1507936507937%; left:94.7619047619048%; width:11.2698412698413%; } #about-icon div:nth-child(3) { top:54.8809523809524%; left:-21.1111111111111%; width:37.6190476190476%; } #about-icon div:nth-child(4) { top:34.6428571428571%; left:116.825396825397%; width:53.4920634920635%; } #about-icon div:nth-child(5) { top:88.7936507936508%; left:-20.952380952381%; width:38.2539682539683%; } #about-icon div:nth-child(6) { top:70.4206349206349%; left:80.6825396825397%; width:53.3333333333333%; } #about-icon div:nth-child(1) span { padding-top:30.7888040712468%; } #about-icon div:nth-child(2) span { padding-top:414.084507042254%; } #about-icon div:nth-child(3) span { padding-top:101.26582278481%; } #about-icon div:nth-child(4) span { padding-top:25.5192878338279%; } #about-icon div:nth-child(5) span { padding-top:100%; } #about-icon div:nth-child(6) span { padding-top:100%; } #about-icon div:nth-child(1) span i { background-image:url(../img/design/top/pc/about_icon1.png); } #about-icon div:nth-child(2) span i { background-image:url(../img/design/top/pc/about_icon2.png); } #about-icon div:nth-child(3) span i { background-image:url(../img/design/top/pc/about_icon3.png); } #about-icon div:nth-child(4) span i { background-image:url(../img/design/top/pc/about_icon4.png); } #about-icon div:nth-child(5) span i { background-image:url(../img/design/top/pc/about_icon5.png); } #about-icon div:nth-child(6) span i { background-image:url(../img/design/top/pc/about_icon6.png); } /* ---- Media Queries ---- */ @media all and (max-width: 767px) { #about-icon div:nth-child(1) { top:31.3%; left:45.0666666666667%; width:59.7964376590331%; } #about-icon div:nth-child(2) { top:13%; left:7.2%; width:11.4503816793893%; } #about-icon div:nth-child(3) { top:56%; left:62%; width:39.1857506361323%; } #about-icon div:nth-child(4) { top:74.5%; left:-10%; width:59.24%; } #about-icon div:nth-child(5) { top:90%; left:57.6%; width:52.4173027989822%; } #about-icon div:nth-child(6) { top:41.5%; left:-40.2666666666667%; width:90.3307888040713%; } } /* ---------------------- our vision mission ---------------------- */ #design-our { display:flex; flex-wrap:wrap; } .design-our-item { width:50%; } .design-our-item .box { position:relative; width:100%; height:0; padding-top:calc(1304% / 1916 * 100); } .design-our-item .box .inner { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; text-indent:-9999px; } #design-ourvision .box .inner { background-image:url(../img/design/top/pc/ourvision.jpg); } #design-ourmission .box .inner { background-image:url(../img/design/top/pc/ourmission.jpg); } #our-hr { display:none; } /* ---- Media Queries ---- */ @media all and (max-width: 767px) { .design-our-item { width:100%; } #design-ourvision .box { padding-top:calc(1419% / 1179 * 100); } #design-ourmission .box { padding-top:calc(1278% / 1179 * 100); } #design-ourvision .box .inner { background-image:url(../img/design/top/smp/ourvision.jpg); } #design-ourmission .box .inner { background-image:url(../img/design/top/smp/ourmission.jpg); } #our-hr { position:relative; display:block; width:100%; height:0; padding-top:calc(720% / 1179 * 100); border-bottom:#8E7E70 3.0vw solid; } #our-hr span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/design/top/smp/ourmission_line.png) center center no-repeat; background-size:cover; text-indent:-9999px; font-size:1%; line-height:1%; } #our-hr span hr { display:none; } } /* ---------------------- values ---------------------- */ #design-values { position:relative; width:100%; height:0; padding-top:calc(1590% / 3832 * 100); } #design-values .inner { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img/design/top/pc/values202410.jpg); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; } /* ---- Media Queries ---- */ @media all and (max-width: 767px) { #design-values { padding-top:calc(2680% / 1179 * 100); } #design-values .inner { background-image:url(../img/design/top/smp/values.jpg); } } /* ---------------------- works ---------------------- */ #design-works { margin-bottom:230px; padding-top:130px; text-align:center; background:url(../img/design/top/pc/movie_bg.png) center -160px no-repeat; background-color:#DDE4EC; } #design-works .subttl { margin:0 auto 100px auto; width:244px; height:57px; background:url(../img/design/top/pc/works_ttl.png) center center no-repeat; background-size:cover; text-indent:-9999px; } #design-works-movie { width:800px; margin:0 auto 100px auto; text-align:center; } #design-works-movie-seninar { width:980px; margin:0 auto 200px auto; padding:50px 90px; box-sizing:border-box; border-radius:10px; background-color:#fff; box-shadow:0px 2px 12px rgba(0,0,0,0.2); text-align:center; } #design-works-movie-seninar .ttl { margin:0 auto 20px auto; width:596px; height:50px; background:url(../img/design/top/pc/works_seninar_archive_ttl.png) center center no-repeat; background-size:cover; text-indent:-9999px; } #design-works-movie-seninar .txt { width:800px; margin:0 auto 20px auto; line-height:160%; text-align:left; } #design-works-case { display:flex; flex-wrap:wrap; width:1080px; margin:0 auto 80px auto; } #design-works-case .sttl { display:flex; width:100%; margin-bottom:40px; padding:0 20px; box-sizing:border-box; } #design-works-case .sttl h3 { margin:0 60px; font-size:300%; color:#64666A; } #design-works-case .sttl::before, #design-works-case .sttl::after { display:block; content:""; flex:1; background-color:black; height:1px; margin-top:26px; } #case-notice { width:100%; margin:0 auto 40px auto; padding:0 20px; box-sizing:border-box; text-align:left; } #case-notice-txt { margin-bottom:40px; font-weight:bold; line-height:140%; } #case-notice-icon { display:flex; align-items:stretch; } #case-notice-icon li { position:relative; flex:1; min-height:3.8em; display:flex; align-items:center; overflow-wrap:break-word; word-wrap:break-word; } #case-notice-icon li p { width:100%; padding-left:5.6em; font-size:80%; line-height:160%; } #case-notice-icon li p strong { font-size:120%; } #case-notice-icon li::before { position:absolute; display:block; content:""; width:3.8em; height:3.8em; border-radius:1000px; background-position:center center; background-repeat:no-repeat; background-size:cover; } #case-notice-icon li:nth-child(1):before { background-image:url(../img/design/top/pc/icon_ctcr.png); } #case-notice-icon li:nth-child(2):before { background-image:url(../img/design/top/pc/icon_ctbr.png); } #case-notice-icon li:nth-child(3):before { background-image:url(../img/design/top/pc/icon_cpbr.png); } #case-notice-icon li:nth-child(1) { color:#0150FA; } #case-notice-icon li:nth-child(2) { color:#EB6880; } #case-notice-icon li:nth-child(3) { color:#6488FA; } .work-link-box { width:500px; margin:0 auto 40px auto; padding:40px; box-sizing:border-box; border-radius:0 0 40px 0; background-color:#fff; box-shadow:2px 2px 4px rgba(0,0,0,0.2); /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; cursor:pointer; } @media (hover: hover) { .work-link-box:hover { transform:translateX(4px); opacity:0.8; } } .work-link-box a { position:relative; display:block; width:100%; height:100%; text-decoration:none; color:#64666A; } .work-icon { position:absolute; z-index:2; top:-1.5em; left:-1.5em; display:flex; } .work-icon > li { width:3.8em; height:3.8em; margin-right:0.5em; border-radius:1000px; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; } .work-icon .ctcr { background-image:url(../img/design/top/pc/icon_ctcr.png); } .work-icon .ctbr { background-image:url(../img/design/top/pc/icon_ctbr.png); } .work-icon .cpbr { background-image:url(../img/design/top/pc/icon_cpbr.png); } .work-link-tmb { position:relative; width:100%; height:0; padding-top:56.25%; margin-bottom:35px; } .work-link-tmb 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; box-shadow:2px 2px 4px rgba(0,0,0,0.2); } .work-link-txt { padding-left:0.5em; font-size:150%; font-weight:bold; } .work-link-txt::after { float:right; display:block; content:""; width:1.0em; height:1.0em; background:url(../img/design/top/pc/arrow2.png) center center no-repeat; background-size:auto 100%; } .wk-tag { margin:15px 0 -10px 0; /* for space */ font-size:0; } .wk-tag li { display:inline-block; margin:0 0.5em 0.5em 0.5em; vertical-align:middle; font-weight:bold; color:#B2B6C1; /* for space */ font-size:0.9rem; } #link-works-vi .work-link-tmb span { background-image:url(../img/design/branding/vi/tmb.jpg); } #link-works-renovation .work-link-tmb span { background-image:url(../img/design/branding/renovation/tmb.jpg); } #link-works-seriku .work-link-tmb span { background-image:url(../img/design/contents/seriku/tmb.jpg); } #link-works-obi .work-link-tmb span { background-image:url(../img/design/contents/obi/tmb.jpg); } #link-works-drama-variety .work-link-tmb span { background-image:url(../img/design/contents/drama_variety/tmb.jpg); } #link-works-harrypotter .work-link-tmb span { background-image:url(../img/design/contents/harrypotter/tmb.jpg); } #link-works-tdx .work-link-tmb span { background-image:url(../img/design/contents/tdx/tmb.jpg); } #link-works-web .work-link-tmb span { background-image:url(../img/design/contents/web/tmb.jpg); } #design-works-more { display:flex; justify-content:center; align-items:center; background-color:#BEDCFF; padding:80px 0; } #design-works-more .sttl { width:164px; padding-bottom:60px; } #design-works-more .sttl h3 { width:164px; height:29px; background:url(../img/design/top/pc/works_ttl_more.png) center center no-repeat; background-size:cover; text-indent:-9999px; } #design-works-more ul { display:flex; } #design-works-more ul li { width:400px; margin-left:40px; } .works-more-txt { margin-bottom:1.0em; color:#64666A; font-size:140%; font-weight:bold; } .work-more-tmb { position:relative; width:100%; height:0; padding-top:56.25%; margin-bottom:35px; } .work-more-tmb 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; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; } @media (hover: hover) { .work-more-tmb a:hover { transform:translateX(4px); opacity:0.7; } } #works-more-book .work-more-tmb a { background-image:url(../img/design/top/pc/works_more_tmb_book.jpg); } #works-more-brand .work-more-tmb a { background-image:url(../img/design/top/pc/works_more_tmb_brand.jpg); } .works-more-btn { font-size:110%; } .works-more-btn p { margin:0 auto; } #works-more-book .works-more-btn p { width:21.0em; } #works-more-brand .works-more-btn p { width:15.0em; } .works-more-btn p a { display:inline-block; position:relative; width:100%; padding:0.8em 0 0.8em 0.5em; box-sizing:border-box; border-radius:1000px; border:#0050FF 2px solid; font-weight:bold; color:#0050FF; text-decoration:none; letter-spacing:0.01em; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; } @media (hover: hover) { .works-more-btn p a:hover { transform:translateX(4px); opacity:0.7; } } .works-more-btn p a::after { display:inline-block; position:relative; top:-0.1em; content:""; margin-left:0.5em; width:0.8em; height:0.8em; vertical-align:bottom; background:url(../img/design/top/pc/arrow_b.png) center center no-repeat; background-size:auto 100%; } /* ---- Media Queries ---- */ @media all and (max-width: 1079px) { #design-works { margin-bottom:100px; padding-top:100px; background:url(../img/design/top/smp/movie_bg_smp.png) center top no-repeat; background-size:100% auto; background-color:#DDE4EC; } #design-works .subttl { margin:0 auto 40px auto; width:163px; height:38px; } #design-works-movie { width:90%; margin:0 5% 70px; } #design-works-movie-seninar { width:96%; margin:0 2% 100px; padding:6.0vw 5%; } #design-works-movie-seninar .ttl { width:373px; height:31px; } #design-works-movie-seninar .txt { width:auto; } #design-works-case { display:block; width:90%; margin:0 auto; padding:0; } #design-works-case .sttl { margin-bottom:20px; } #design-works-case .sttl h3 { margin:auto; font-size:200%; } #design-works-case .sttl::before, #design-works-case .sttl::after { display:none; } #case-notice { margin:0 auto 20px auto; padding:0; } #case-notice-txt { margin-bottom:20px; font-size:90%; } #case-notice-icon { flex-direction:column; justify-content:center; } #case-notice-icon li { flex:auto; width:22.0em; margin:0 auto 1.0em auto; } .design-works-item { display:block; } .work-link-box { width:100%; margin:0 auto 7% auto; padding:7%; } .work-link-txt { font-size:120%; } .work-icon { font-size:3.0vw; } .wk-tag li { /* for space */ font-size:0.8rem; } #design-works-more { flex-direction:column; padding:50px 0; } #design-works-more .sttl { width:164px; padding-bottom:10px; } #design-works-more ul { flex-direction:column; } #design-works-more ul li { margin:40px 0 0 0; } .work-more-tmb { margin-bottom:25px; } } @media all and (max-width: 500px) { #design-works-movie-seninar .ttl { width:298px; height:25px; } #design-works-more .sttl { width:131px; } #design-works-more .sttl h3 { width:131px; height:23px; } #design-works-more ul li { width:300px; } .works-more-txt { font-size:120%; } .works-more-btn { font-size:85%; } } @media all and (max-width: 374px) { .work-link-txt { font-size:100%; } #design-works-movie-seninar .ttl { width:249px; height:21px; } } /* ---------------------- people ---------------------- */ #design-people { margin-bottom:150px; padding-top:20px; text-align:center; } #design-people .subttl { margin:0 auto 100px auto; width:239px; height:55px; background:url(../img/design/top/pc/people_ttl.png) center center no-repeat; background-size:cover; text-indent:-9999px; } #design-people-pic { margin-bottom:100px; } #design-people-pic p { position:relative; width:100%; height:0; padding-top:57.6722%; } #design-people-pic p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/design/top/pc/people_pic.jpg) center center no-repeat; background-size:cover; text-indent:-9999px; } /* ---- Media Queries ---- */ @media all and (max-width: 767px) { #design-people { margin-bottom:0; } #design-people .subttl { margin:0 auto 30px auto; width:159px; height:36px; } #design-people-pic { margin-bottom:50px; } } /* ------ intv ------ */ #design-people-intv { margin:0 50px; } #design-people-intv .ttl { margin-bottom:60px; font-size:300%; color:#64666A; } .intv-item { position:relative; width:1300px; height:750px; margin:0 auto 50px auto; } .intv-pic { position:absolute; z-index:2; } .intv-t-area { position:absolute; z-index:1; } .intv-pic p, .intv-t p { position:relative; width:100%; height:0; } .intv-pic p span, .intv-t p 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; } #intv-gunji { margin-left:50px; } #intv-gunji .intv-pic { width:535px; top:0; left:0; } #intv-gunji .intv-pic p { padding-top:126.355140186916%; } #intv-gunji .intv-pic p span { background-image:url(../img/design/top/pc/people_gunji_p.png); } #intv-gunji .intv-t-area { top:247px; left:614px; } #intv-gunji .intv-t { width:668px; } #intv-gunji .intv-t p { padding-top:19.685628742515%; } #intv-gunji .intv-t p span { background-image:url(../img/design/top/pc/people_gunji_t.png); } #intv-furuhata { margin-right:50px; } #intv-furuhata .intv-pic { width:587px; top:0; left:690px; } #intv-furuhata .intv-pic p { padding-top:calc(1354% / 1175 * 100); } #intv-furuhata .intv-pic p span { background-image:url(../img/design/top/pc/people_furuhata_p2.png); } #intv-furuhata .intv-t-area { top:211px; left:0; } #intv-furuhata .intv-t { width:809px; top:0; left:0; } #intv-furuhata .intv-t p { padding-top:16.0074165636588%; } #intv-furuhata .intv-t p span { background-image:url(../img/design/top/pc/people_furuhata_t.png); } #intv-yamamura { margin-left:50px; } #intv-yamamura .intv-pic { width:543px; top:0; left:0; } #intv-yamamura .intv-pic p { padding-top:calc(1324% / 1086 * 100); } #intv-yamamura .intv-pic p span { background-image:url(../img/design/top/pc/people_yamamura_p.png); } #intv-yamamura .intv-t-area { top:167px; left:601px; } #intv-yamamura .intv-t { width:583px; } #intv-yamamura .intv-t p { padding-top:calc(250% / 1879 * 100); } #intv-yamamura .intv-t p span { background-image:url(../img/design/top/pc/people_yamamura_t.png); } #intv-hiramoto { margin-right:50px; } #intv-hiramoto .intv-pic { width:530px; top:0; left:708px; } #intv-hiramoto .intv-pic p { padding-top:144.905660377359%; } #intv-hiramoto .intv-pic p span { background-image:url(../img/design/top/pc/people_hiramoto_p.png); } #intv-hiramoto .intv-t-area { top:264px; left:0; } #intv-hiramoto .intv-t { width:847px; } #intv-hiramoto .intv-t p { padding-top:15.5844155844156%; } #intv-hiramoto .intv-t p span { background-image:url(../img/design/top/pc/people_hiramoto_t.png); } .intv-txt { margin:20px 0 40px 0; color:#64666A; font-size:120%; line-height:200%; text-align:left; } .intv-btn { width:319px; } .intv-btn p { position:relative; width:100%; height:0; padding-top:23.51%; } .intv-btn p a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background:url(../img/design/top/pc/people_btn.png) center center no-repeat; background-size:cover; text-indent:-9999px; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; } @media (hover: hover) { .intv-btn p a:hover { transform:translateX(4px); opacity:0.7; } } /* ---- Media Queries ---- */ @media all and (max-width: 1599px) { .intv-item { width:calc(1300px * 0.66 ); height:calc(750px * 0.66 ); } #intv-gunji .intv-pic { width:calc(535px * 0.66 ); } #intv-gunji .intv-t-area { top:calc(247px * 0.66 ); left:calc(614px * 0.66 ); } #intv-gunji .intv-t { width:calc(668px * 0.66 ); } #intv-furuhata .intv-pic { width:calc(617px * 0.66 ); left:calc(665px * 0.66 ); } #intv-furuhata .intv-t-area { top:calc(211px * 0.66 ); } #intv-furuhata .intv-t { width:calc(809px * 0.66 ); } #intv-yamamura .intv-pic { width:calc(543px * 0.66 ); } #intv-yamamura .intv-t-area { top:calc(167px * 0.66 ); left:calc(601px * 0.66 ); } #intv-yamamura .intv-t { width:calc(948px * 0.66 ); } #intv-hiramoto .intv-pic { width:calc(530px * 0.66 ); left:calc(708px * 0.66 ); } #intv-hiramoto .intv-t-area { top:calc(264px * 0.66 ); } #intv-hiramoto .intv-t { width:calc(847px * 0.66 ); } .intv-txt { margin:20px 0 20px 0; font-size:85%; } .intv-btn { width:calc(319px * 0.66 ); } } @media all and (max-width: 767px) { #design-people-intv { width:90%; margin:0 5%; } #design-people-intv .ttl { margin-bottom:30px; font-size:200%; } .intv-item { width:100%; height:auto; margin-left:0!important; margin-right:0!important; } .intv-pic, .intv-t-area, .intv-t { position:relative!important; width:100%!important; top:0!important; left:0!important; } #intv-gunji .intv-pic { width:80%!important; margin:0 10% 20px 10%; } #intv-gunji .intv-t p { padding-top:calc(132% / 502 * 100); } #intv-gunji .intv-t p span { background-image:url(../img/design/top/smp/people_gunji_t.png); } #intv-furuhata .intv-pic { width:90%!important; margin:0 5% 20px 5%; } #intv-furuhata .intv-t p { padding-top:calc(126% / 560 * 100); } #intv-furuhata .intv-t p span { background-image:url(../img/design/top/smp/people_furuhata_t.png); } #intv-yamamura .intv-pic { width:80%!important; margin:0 10% 20px 10%; } #intv-yamamura .intv-t p { padding-top:calc(98% / 684 * 100); } #intv-yamamura .intv-t p span { background-image:url(../img/design/top/smp/people_yamamura_t.png); } #intv-hiramoto .intv-pic { width:80%!important; margin:0 10% 20px 10%; } #intv-hiramoto .intv-t p { padding-top:calc(140% / 636 * 100); } #intv-hiramoto .intv-t p span { background-image:url(../img/design/top/smp/people_hiramoto_t.png); } .intv-btn { width:70%; margin:0 15%; } } /* ------ movie ------ */ #design-people-movie { margin:-800px 0 -1000px 0; padding:1000px 0 1150px 0; text-align:center; background:url(../img/design/top/pc/movie_bg.png) center center no-repeat; } #design-people-movie .ttl { margin:-200px 0 100px 0; font-size:300%; color:#64666A; } @media all and (max-width: 767px) { #design-people-movie { margin:0; padding:5vw 5% 35vw 5%; box-sizing:border-box; background:url(../img/design/top/smp/movie_bg_smp.png) center top no-repeat; background-size:100% auto; } #design-people-movie .ttl { margin:0 0 40px 0; font-size:200%; } } /* ---------------------- qa ---------------------- */ #design-qa { margin-bottom:150px; padding-top:250px; text-align:center; background-color:#fff; border-top:#8E7E70 1.0vw solid; } #design-qa .subttl { margin:0 auto 60px auto; width:148px; height:55px; background:url(../img/design/top/pc/qa_ttl.png) center center no-repeat; background-size:cover; text-indent:-9999px; } #qa-box { width:90%; margin:auto; } .qa-item { margin:auto; display:flex; border-top:#0050FF 2px solid; text-align:left; font-weight:bold; line-height:180%; } .qa-q, .qa-a { display:flex; align-items:center; box-sizing:border-box; background-position:left center; background-repeat:no-repeat; } .qa-q { width:30%; padding:80px 20px 80px 80px; background-image:url(../img/design/top/pc/qa_q.png); background-size:auto 167px; } .qa-a { width:70%; padding:80px; background-image:url(../img/design/top/pc/qa_a.png); background-size:auto 164px; color:#0050FF; /* for toggle */ display:block; } /* ---- Media Queries ---- */ @media all and (max-width: 767px) { #design-qa { margin-bottom:50px; padding-top:100px; } #design-qa .subttl { margin:0 auto 40px auto; width:98px; height:37px; } .qa-item { display:block; border-top:none; margin-bottom:30px; } .qa-q, .qa-a { display:block; width:100%; padding:0; cursor:pointer; background-position:left top; } .qa-q { display:flex; min-height:120px; background-size:auto 102px; } .qa-q p { position:relative; width:100%; padding:0 6vw 2vw 2vw; box-sizing:border-box; border-bottom:#000 2px solid; } .qa-q p::before { position:absolute; right:1vw; bottom:3vw; display:inline-block; content:""; width:1.0em; height:1.0em; background:url(../img/design/top/pc/arrow4.png) center center no-repeat; background-size:auto 100%; } .qa-q.active p::before { transform: rotate(90deg); } .qa-a { padding:2vw; background-position:right 1.0em; background-size:auto 97px; /* for toggle */ display:none; } } /* ---------------------- apply ---------------------- */ #design-apply { padding:200px 0 100px 0; background-image:url(../img/design/top/pc/apply_bg.png); background-position:center top; background-repeat:no-repeat; background-size:100% auto; text-align:center; } #design-apply .txt { margin-bottom:60px; font-size:120%; line-height:200%; font-weight:bold; color:#fff; } #apply-btn, #insta-btn { font-size:140%; } #apply-btn p, #insta-btn p { width:19.0em; margin:0 auto 40px auto; } #apply-btn p a, #insta-btn p a { display:inline-block; position:relative; width:100%; padding:1.2em 0; border-radius:1000px; font-weight:bold; color:#0050FF; text-decoration:none; background-color:#fff; /* hover */ transition:transform 0.2s, opacity 0.2s ease-out; } #insta-btn p a::before { display:inline-block; content:""; margin:-0.5em 0.3em -0.5em 0; width:2.0em; height:2.0em; vertical-align:bottom; background:url(../img/design/top/pc/apply_insta.png) center center no-repeat; background-size:100% auto; } #apply-btn p a::after, #insta-btn p a::after { display:inline-block; content:""; margin-left:0.5em; width:1.0em; height:1.0em; vertical-align:bottom; background:url(../img/design/top/pc/arrow3.png) center center no-repeat; background-size:100% auto; } @media (hover: hover) { #apply-btn p a:hover, #insta-btn p a:hover { transform:translateX(4px); opacity:0.7; } } /* ---- Media Queries ---- */ @media all and (max-width: 767px) { #design-apply { padding:150px 0 20px 0; background-image:url(../img/design/top/smp/apply_bg.png); background-size:cover; } #apply-btn, #insta-btn { font-size:110%; } } /*eof*/