/*---------------------------------------《全体の設定》--------------------------------------------------- */ /*はみ出る要素を非表示 */ body{overflow-x:hidden !important;} div.ccm-page{overflow-x:hidden !important;} div.ccm-page strong{color:#3fade0 !important;} /*ホバーで半調 */ .hover-a{transition:0.3s;} .hover-a:hover{ opacity:0.8; transition:0.3s; } .hover-b{transition:0.3s;} .hover-b:hover{ opacity:0.9; transition:0.3s; } /*背景の設定 */ .back-b-top{width:100%; } .back-b-top img{width:100%;} /*back-b-top-子ページ用 */ .back-b-top-2{width:100%; margin-bottom:1%; position:absolute;} .back-b-top-2 img{width:100%;} .back-b-bottom{width:100%; margin-left:0%; margin-bottom:0%;} .back-b-bottom img{width:100%;} .back-b-bottom-2{width:100%; margin-left:0%; margin-bottom:-2%;} .back-b-bottom-2 img{width:100%;} .back-b-bottom-3{width:100%; margin-left:0%; margin-top:0%; position:relative; margin-bottom:0px;} .back-b-bottom-3 img{width:100%;} .back-d{margin-top:-10%; position:absolute; width:100%;} .back-d img{width:100%;} .back-d-2{margin-top:-6%; position:absolute; width:100%;} .back-d-2 img{width:100%;} /* 520px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 520px) { .back-d-2{margin-top:0%;}} .back-e-2{width:100%} .back-e-2 img{width:100%} /* 520px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 520px) { .back-e-2{margin-top:100px !important;}} /* 393px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 393px) { .back-e-2{margin-top:100px !important;}} .back-f-2{width:100%; z-index:1; margin-bottom:-3px;} .back-f-2 img{width:100%} .construction-example{position:relative; z-index:5;} /*テーブルの余白設定 */ table td,th{padding-left:10px !important; padding-right:10px !important; font-size:0.9em !important; } /* 480px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 480px) { table td,th{font-size:0.5em;}} /*テーブルのX軸画面からはみ出た部分をスクロールさせる */ .table-scroll{overflow-x:auto !important; white-space:nowrap !important;} div.ccm-page main a:not(.fa):not(.btn):not(.button-sk){ color:#1576b0 ; } div.ccm-page main a:hover:not(.fa):not(.btn):not(.button-sk){ color:#3fade0 ; } /* ボタンｰ三栄建材工業様用 */ .button-sk{font-family: 'Zen Kaku Gothic New', sans-serif !important;} .button-sk a { background: #012a7c; border-radius: 50px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 200px; padding: 1px 25px; color: #fff !important; transition: 0.3s ease-in-out; font-weight: 500; font-size:0.8em; text-decoration: none; } .button-sk a:hover { background: #1576b0; color: #FFF !important;} .button-sk a:after { content: ''; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 20px; border-radius: 1px; transition: 0.3s ease-in-out; text-decoration: none; } .button-sk a:hover:after { border-color: #FFF;} div.ccm-page main{padding-top:4.8%; padding-bottom:0px !important;} /* 2000px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) {div.ccm-page main{padding-top:3.8%;}} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) {div.ccm-page main{padding-top:5.6%;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) {div.ccm-page main{padding-top:6.5%;}} /* 896px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 896px) {div.ccm-page main{padding-top:5.8%;}} /* 820px以下に適用されるCSS（iPad air 縦用） */ @media screen and (max-width: 820px) {div.ccm-page main{padding-top:7.1%;}} /* 768px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 768px) {div.ccm-page main{padding-top:8%;}} /* 740px以下に適用されるCSS（Galaxy S8 横用） */ @media screen and (max-width: 740px) {div.ccm-page main{padding-top:8%;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) {div.ccm-page main{padding-top:8.5%;}} @media screen and (max-width: 720px) {} /* 667px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 667px) {div.ccm-page main{padding-top:9%;}} /* 600px以下に適用されるCSS（Nest Hub 縦用） */ @media screen and (max-width: 600px) {div.ccm-page main{padding-top:9%;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) {div.ccm-page main{padding-top:11%;}} /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) {div.ccm-page main{padding-top:11.5%;}} /* 360px以下に適用されるCSS（Galaxy S8 縦用） */ @media screen and (max-width: 360px) {div.ccm-page main{padding-top:12.3%;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) {div.ccm-page main{padding-top:14%;}} .zoom-up-a{width:270px !important; margin-left:10px; margin-right:10px; margin-bottom:10px; margin-top:10px;} .zoom-up-a img{width:400px !important; transition:0.3s;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .zoom-up-a{width:150px !important; margin-left:5px; margin-right:5px; margin-bottom:5px; margin-top:5px;} .zoom-up-a img{width:300px !important;}} .zoom-up-a img:hover{ transform: scale3d(1.1,1.1,1) ; /* hover時の倍率を指定 */ transition:0.5s;} .zoom-up-a{width:270px ; height:auto ; overflow:hidden !important;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .zoom-up-a{width:150px ; height:auto ; overflow:hidden !important;}} .zoom-up-b{width:550px !important;} .zoom-up-b img{width:550px !important; transition:0.5s;} /* .zoom-up-b img:hover{transform: scale3d(1.1,1.1,1) ; hover時の倍率を指定 transition:0.5s;}*/ .zoom-up-b{width:550px ; height:350px ; overflow:hidden;} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { .zoom-up-b{width:450px !important; height:300px; overflow:hidden;} .zoom-up-b img{margin-top:28px;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) { .zoom-up-b{width:450px !important; height:300px; overflow:hidden;} .zoom-up-b img{margin-top:0px;}} /* 915px以下に適用されるCSS（Galaxy S20 横用） */ @media screen and (max-width: 915px) { .zoom-up-b{width:350px !important; height:280px; overflow:hidden;} .zoom-up-b img{margin-top:38px;}} /* 912px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 912px) { .zoom-up-b{width:350px !important; height:230px; overflow:hidden;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) { .zoom-up-b{width:700px !important; height:350px; overflow:hidden;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .zoom-up-b{width:100% !important; height:300px; overflow:hidden;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .zoom-up-b{width:100% !important; height:200px; overflow:hidden;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) { .zoom-up-b{width:100% !important; height:200px; overflow:hidden;}} /* 393px以下に適用されるCSS（Pixel5 縦用） */ @media screen and (max-width: 393px) { .zoom-up-b{width:100% !important; height:200px; overflow:hidden;} .zoom-up-b img{margin-top:0px;}} /* 390px以下に適用されるCSS（iPhone12 pro 縦用） */ @media screen and (max-width: 390px) { .zoom-up-b{width:100% !important; height:200px; overflow:hidden;} .zoom-up-b img{margin-top:0px;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) { .zoom-up-b{width:100% !important; height:160px; overflow:hidden;}} .zoom-up-c img{width:1800px !important; transition:0.5s;} .zoom-up-c img:hover{transform: scale3d(1.1,1.1,1) ; /* hover時の倍率を指定 */ transition:0.5s;} .zoom-up-c{width:120% ; height:400px ; overflow-y:block !important;} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) { .zoom-up-c{height:400px ; padding-right:10px; margin-right:20px; margin-left:-30px;}} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { .zoom-up-c{height:300px ;}} /* 915px以下に適用されるCSS（Galaxy S20 横用） */ @media screen and (max-width: 915px) { .zoom-up-c{height:220px ;}} /* 912px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 912px) { .zoom-up-c{height:260px ;}} /* 768px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 768px) { .zoom-up-c{height:180px ;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .zoom-up-c{height:300px ;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .zoom-up-c{height:160px ;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) { .zoom-up-c{height:160px ;}} /* 393px以下に適用されるCSS（Pixel5 縦用） */ @media screen and (max-width: 393px) { .zoom-up-c{height:180px ;}} /* 390px以下に適用されるCSS（iPhone12 pro 縦用） */ @media screen and (max-width: 390px) { .zoom-up-c{height:180px ;}} /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) { .zoom-up-c{height:200px ;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) { .zoom-up-c{width:200% ; height:155px;}} /* スクロールしたらふわっとフェードイン */ .effect-fade { opacity: 0; transform: translate(0, 100px); /* フェードインで動く高さを指定 */ transition: all 1300ms; /* フェードインにかかる時間を指定 */ } .effect-fade-B { opacity: 0; transform: translate(0, 0px); /* フェードインで動く高さを指定 */ transition: all 3000ms; /* フェードインにかかる時間を指定 */ } .effect-scroll { opacity: 1; transform: translate(0, 0); } /* スクロールで横からスライドインしてくるB-試し */ .fade-in-leftB{opacity: 0; transition-duration: 1.5s; transform: translateX(-300px);} .fade-in-leftB.effect{transform: translateX(0); opacity: 1;} .fade-in-rightB{opacity: 0; transition-duration: 1.5s; transform: translateX(300px); } .fade-in-rightB.effect{transform: translateX(0); opacity: 1;} .fade-in-leftC{opacity: 0; transition-duration: 1s; transform: translateX(-300px); } .fade-in-leftC.effect{transform: translateX(0); opacity: 1;} .fade-in-rightC{opacity: 0; transition-duration: 1s; transform: translateX(300px); } .fade-in-rightC.effect{transform: translateX(0); opacity: 1;} .fade-in-leftD{opacity: 0; transition-duration: 0.6s; transform: translateX(-300px); } .fade-in-leftD.effect{transform: translateX(0); opacity: 1;} .fade-in-rightD{opacity: 0; transition-duration: 0.6s; transform: translateX(300px); } .fade-in-leftD.effect{transform: translateX(0); opacity: 1;} /* スクロールで横からスライドインしてくる */ .fade-in-right { animation-name:fade-in-rightAnime; animation-duration:0.8s; animation-fill-mode:forwards; opacity: 0; } @keyframes fade-in-rightAnime{ from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } .line-a{width:100% !important;} /*フォーム「必須」の文字設定 */ .text-muted{content:'';} /*背景スクロール */ .background-scroll img{width:100% !important;} /* 3000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 3000px){ .background-scroll{background-size: auto !important; background-attachment: fixed !important; width:100% !important; overflow-x: hidden !important; z-index:-1 !important;}} /* 1700px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 1700px){ .background-scroll{background-size: auto !important; background-attachment: fixed !important; width:100% !important; overflow-x: hidden !important; z-index:-1 !important;} .background-scroll img{width:100% !important;}} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px){ .background-scroll{width:100% !important; background-size:270% !important; margin-bottom:-47% !important; background-attachment: fixed !important; display:none !important;} .background-scroll img{width:100% !important;}} /* 393px以下に適用されるCSS（Pixel5 縦用） */ @media screen and (max-width: 393px) { .background-scroll{width:100% !important; background-size:190% !important; height:250px !important; margin-bottom:-27% !important; padding-bottom:10% !important; background-attachment: fixed !important;}} /* 3000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 3000px){ .back-phone-a{display:none;} .back-phone-b{display:none;} .back-phone-c{display:none;}} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px){ .back-phone-a{display:block; margin-top:-150px !important; margin-bottom:80px !important;} .back-phone-b{display:block; margin-top:0px !important; margin-bottom:0px !important;} .back-phone-c{display:block; margin-top:100px !important; margin-bottom:0px !important;}} .hw-back-to-top i{left:8px !important; top:3px !important;} .hw-back-to-top i:hover{top:-1px !important;} /*---------------------------------------《書体の設定》--------------------------------------------------- */ div.ccm-page main{font-family: 'Zen Old Mincho', serif !important; font-weight:400; font-size:1.2em; color:#232323} /* 744px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 744px) {div.ccm-page main{font-size:0.9em;}} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) {div.ccm-page main{font-size:1em;}} /*---div.ccm-page main{font-family: 'Klee One', cursive !important; font-size:1.2em; font-weight:600;}--- */ .gothic{font-family: 'Zen Kaku Gothic New', sans-serif !important; font-weight:400;} div.ccm-page h1{ -ms-writing-mode: tb-rl !important; writing-mode: vertical-rl !important; font-family: 'Shippori Mincho', serif !important; font-weight:500; font-size:1.6em; color:#1a3069; height:29%; margin-left:auto; margin-right:auto; margin-bottom:30px; margin-top:-10px;} /* 834px以下に適用されるCSS（iPad pro10.5 縦用） */ @media screen and (max-width: 834px) { div.ccm-page h1{height:24%;}} /* 740px以下に適用されるCSS（iPhone14pro 横用） */ @media screen and (max-width: 740px) { div.ccm-page h1{height:180px;}} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { div.ccm-page h1{height:23% !important; font-size:1.2em;}} div.ccm-page h1.page-title{ -ms-writing-mode: tb-rl !important; writing-mode: vertical-rl !important; font-family: 'Shippori Mincho', serif !important; font-weight:500 !important; font-size:1.6em !important; color:#1a3069 !important; height:29% !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:30px !important; margin-top:-10px !important;} div.ccm-page div.ccm-block-page-title-byline h1.page-title{ -ms-writing-mode: horizontal-tb !important; writing-mode: horizontal-tb !important; font-family: 'Shippori Mincho', serif !important; font-weight:500 !important; font-size:1.6em !important; color:#1a3069 !important; height:29% !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:30px !important; margin-top:-10px !important;} div.ccm-page h2{margin:0; font-size:24px; border-bottom:#bcbcbc solid 2.3px; padding-bottom:5px; margin-bottom:15px; position:relative; font-weight:500; color:#1a3069; font-family: 'Zen Old Mincho', serif !important; width:40% !important; } /* 820px以下に適用されるCSS（iPad air 縦用） */ @media screen and (max-width: 820px) { div.ccm-page h2{width:100% !important;}} div.ccm-page h2:before{content:''; width:50px; height:2px; background-color:#3fade0; display:block; position:absolute; left:0; bottom:-2px;} div.ccm-page h3{font-family: 'Shippori Mincho', serif !important; font-weight:700 !important; color:#012a7c !important;} .achievement-caption{color:#fff !important;} .midashi-a{margin:0; font-size:24px; border-bottom:#bcbcbc solid 2.3px; padding-bottom:5px; margin-bottom:15px; position:relative; font-weight:500; color:#1a3069; font-family: 'Zen Old Mincho', serif !important; width:400px !important; } /* 820px以下に適用されるCSS（iPad air 縦用） */ @media screen and (max-width: 820px) { .midashi-a{width:100% !important;}} .midashi-a:before{content:''; width:50px; height:2px; background-color:#3fade0; display:block; position:absolute; left:0; bottom:-2px;} .midashi-white-a{color:#fff; font-family: 'Shippori Mincho', serif !important; font-weight:500; font-size:1.5em; letter-spacing:0.05em;} .midashi-naivy{ font-weight:700 !important; color:#012a7c !important; font-size:1.3em;} /*吹き出し設定-b */ .fukidashi-b { position: relative; padding: 0.4em 0.8em; background: #16499d; border-radius: 20px; color:#fff; font-weight: 900; font-size:1.0em; } /* 899px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 899px) { .fukidashi-b {font-size:0.8em !important;}} .fukidashi-b:after { position: absolute; content: ''; top: 100%; left: 60px; border: 10px solid transparent; border-top: 15px solid #16499d; width: 0; height: 0; } /*---------------------------------------《ヘッダーの設定》--------------------------------------------------- */ div.ccm-page header{padding-top:0px !important; padding-bottom:0px !important; padding-left:5% !important; padding-right:5% !important; border-bottom:none !important; position:fixed; width:100% ; margin-top:0px !important; z-index:100; height:9% !important; filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .1));} /* 3000px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 3000px) { div.ccm-page header{width:100% !important;}} /* 2000px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 2000px) { div.ccm-page header{height:12% !important; transform:scale(1) !important; padding-top:0px !important; width:100% !important;}} /* 1500px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1500px) { div.ccm-page header{height:11% !important; transform:scale(1) !important; padding-top:0px !important; padding-left:0% !important; padding-right:0% !important;}} /* 1368px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1368px) { div.ccm-page header{height:11% !important; transform:scale(1) !important; padding-top:0px !important;}} /* 1280px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1280px) { div.ccm-page header{height:11% !important; transform:scale(1) !important; padding-top:0px !important;}} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) {div.ccm-page header{height:9% !important;}} /* 1112px以下に適用されるCSS（iPad pro10.5 横用） */ @media screen and (max-width: 1112px) {div.ccm-page header{height:9% !important;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) {div.ccm-page header{height:9% !important;}} /* 915px以下に適用されるCSS（Galaxy S20 横用） */ @media screen and (max-width: 915px) {div.ccm-page header{height:66px !important;}} /* 896px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 896px) {div.ccm-page header{height:68px !important;}} /* 851px以下に適用されるCSS（Pixel5 横用） */ @media screen and (max-width: 851px) {div.ccm-page header{height:68px !important;}} /* 820px以下に適用されるCSS（iPad air 縦用） */ @media screen and (max-width: 820px) {div.ccm-page header{height:70px !important;}} /* 800px以下に適用されるCSS（Nest Hub Max 縦用） */ @media screen and (max-width: 800px) {div.ccm-page header{height:9%!important;}} /* 768px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 768px) {div.ccm-page header{height:9% !important;}} /* 740px以下に適用されるCSS（Galaxy S8 横用） */ @media screen and (max-width: 740px) {div.ccm-page header{height:60px !important;}} /* 667px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 667px) {div.ccm-page header{height:58px !important;}} /* 600px以下に適用されるCSS（Nest Hub 縦用） */ @media screen and (max-width: 600px) {div.ccm-page header{height:58px !important;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) {div.ccm-page header{height:58px !important;}} /* 500px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 500px) {div.ccm-page header{height:50px !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) {div.ccm-page header{height:45px !important;}} /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) {div.ccm-page header{height:50px !important;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) {div.ccm-page header{height:50px !important;}} .header-navi a{font-family: 'Zen Kaku Gothic New', sans-serif !important; font-weight:700 !important; color:#676767 !important} /*ヘッダーナビ-1040px以下はハンバーガーメニューに切り替える */ /* 1112px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 1112px) { div.ccm-page header nav ul{display:none !important;} .ccm-responsive-menu-launch{display:block !important;} } .ccm-responsive-menu-launch{margin-right:20px !important; transform:scale(1.2) !important;} .ccm-responsive-overlay{top:80px !important; border-bottom:5px solid #012a7c !important; font-family:'Zen Kaku Gothic New', sans-serif !important; position:fixed;} /* 414px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 414px) { .ccm-responsive-overlay{top:40px !important;}} /*ヘッダーナビ-1113px以上は通常のナビに切り替える */ /* 1113px以下に適用されるCSS（スマホ用） */ @media screen and (min-width: 1113px) { .ccm-responsive-overlay{display:none !important;}} .hd-navi{margin-left:15px; margin-right:15px; margin-top:30px; width:50%; font-size:1.1em;} /* 1680px以下に適用されるCSS（ノートPC15.4インチ用） */ @media screen and (max-width: 1680px) { .hd-navi{margin-left:15px; margin-right:15px; margin-top:35px; width:53%; font-size:0.9em;}} /* 1500px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1500px) { .hd-navi{margin-left:15px; margin-right:15px; margin-top:35px; width:53%; font-size:0.9em;}} /* 1300px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1300px) { .hd-navi{font-size:1.1em;}} /* 1280px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1280px) { .hd-navi{font-size:0.9em; width:50%;}} /* 1240px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1240px) { .hd-navi{font-size:0.8em; width:45%; margin-left:0px; margin-right:20px; margin-top:45px;}} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { .hd-navi{width:54%;}} /* 1112px以下に適用されるCSS（iPad pro10.5 横用） */ @media screen and (max-width: 1112px) { .hd-navi{margin-top:40px;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) { .hd-navi{margin-top:35px;}} .hd-navi a{font-family: 'Zen Kaku Gothic New', sans-serif !important; font-weight:700 !important; color:#676767 !important; text-decoration:none;} .hd-navi a:hover{color:#1576b0 !important;} .header-sitetitle{width:35%; padding-top:15px; margin-left:5px; margin-right:30px;} /* 1680px以下に適用されるCSS（ノートPC15.4インチ用） */ @media screen and (max-width: 1680px) { .header-sitetitle{width:42% !important; margin-left:-100px; margin-top:-1px;}} /* 1510px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1510px) { .header-sitetitle{width:42% !important; margin-left:-100px; margin-top:-1px;}} /* 1500px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1500px) { .header-sitetitle{width:42% !important; margin-left:-70px; margin-top:-1px;}} /* 1450px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1450px) { .header-sitetitle{width:42% !important; margin-left:-70px; margin-top:-1px;}} /* 1380px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1380px) { .header-sitetitle{width:42% !important; margin-left:-80px; margin-top:-1px;}} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) { .header-sitetitle{width:40% !important; margin-left:-70px; margin-top:15px;}} /* 1300px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1300px) { .header-sitetitle{width:35% !important; margin-left:-50px; margin-top:15px;}} /* 1280px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1280px) { .header-sitetitle{width:40% !important; margin-left:-30px; margin-top:15px;}} /* 1240px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1240px) { .header-sitetitle{width:40% !important; margin-left:0px; margin-top:8px;}} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { .header-sitetitle{width:40% !important; margin-left:-60px; margin-top:6px;}} /* 1080px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1080px) { .header-sitetitle{width:40% !important; margin-left:-40px; margin-top:6px;}} /* 1040px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1040px) { .header-sitetitle{width:40% !important; margin-left:-10px; margin-top:6px;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) { .header-sitetitle{width:36% !important; margin-left:-10px; margin-left:6px;}} /* 991px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 991px) { .header-sitetitle{width:50% !important; margin-left:-20px;}} /* 970px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 970px) { .header-sitetitle{width:50% !important; margin-left:-20px;}} /* 930px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 930px) { .header-sitetitle{width:45% !important; margin-left:-20px; margin-top:3px;}} /* 915px以下に適用されるCSS（Galaxy S20 横用） */ @media screen and (max-width: 915px) { .header-sitetitle{width:60% !important;}} /* 834px以下に適用されるCSS（iPad pro10.5 縦用） */ @media screen and (max-width: 834px) { .header-sitetitle{margin-left:-30px !important; margin-top:10px;}} /* 800px以下に適用されるCSS（iPad pro10.5 縦用） */ @media screen and (max-width: 800px) { .header-sitetitle{margin-left:-10px !important; margin-top:10px;}} /* 768px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 768px) { .header-sitetitle{margin-left:0px !important;}} /* 744px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 744px) { .header-sitetitle{width:40% !important; margin-left:20px; margin-top:-1px;}} /* 740px以下に適用されるCSS（Galaxy S8 横用） */ @media screen and (max-width: 740px) { .header-sitetitle{width:60% !important;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .header-sitetitle{width:80% !important; margin-top:2px;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .header-sitetitle{width:160% !important; margin-top:-1px;}} .header-logo:hover{opacity:0.8;} .header-navi a:hover{color:#1576b0 !important;} .recruit-icon{position:fixed; z-index:10; margin-left:90%; right:0; margin-top:8%;} @media screen and (max-width: 1380px) { .recruit-icon{margin-top:15%;}} @media screen and (max-width: 414px) { .recruit-icon{width:15%;}} .recruit-icon img{width:90%; transition:0.3s; filter:drop-shadow(0 3px 3px rgba(0, 0, 0, .5));} @media screen and (max-width: 414px) { .recruit-icon img{width:90%; margin-top:0%;}} .recruit-icon img:hover{transform:scale(1.1); transition:0.3s} .header-navi{width:60%; margin-right:10px !important;} .contact-icon{width:25%; margin-right:-20%; top:0 !important;} /* 1680px以下に適用されるCSS（ノートPC15.4インチ用） */ @media screen and (max-width: 1680px) { .contact-icon{width:35% !important; margin-right:-28%;}} /* 1500px以下に適用されるCSS（ノートPC15.4インチ用） */ @media screen and (max-width: 1500px) { .contact-icon{width:35% !important; margin-right:-26%;}} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) { .contact-icon{width:38% !important; margin-right:-21%;}} /* 1300px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1300px) { .contact-icon{width:35% !important; margin-right:-18%;}} /* 1280px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1280px) { .contact-icon{width:37% !important; margin-right:-18% !important;}} /* 1240px以下に適用されるCSS（ノートPC15.4インチ用） */ @media screen and (max-width: 1240px) { .contact-icon{width:35% !important; margin-right:-30% !important;}} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { .contact-icon{width:38% !important; margin-right:-33% !important;}} /* 1112px以下に適用されるCSS（iPad pro10.5 横用） */ @media screen and (max-width: 1112px) { .contact-icon{width:38% !important; margin-right:-30% !important;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) { .contact-icon{width:38% !important; margin-right:-25% !important;}} /* 991px以下に適用されるCSS（PC用） */ @media screen and (max-width: 991px) { .contact-icon{width:42% !important; margin-right:-27% !important;}} /* 970px以下に適用されるCSS（PC用） */ @media screen and (max-width: 970px) { .contact-icon{width:42% !important; margin-right:-27% !important;}} /* 915px以下に適用されるCSS（Galaxy S20 横用） */ @media screen and (max-width: 915px) { .contact-icon{width:45% !important; margin-right:-20% !important;}} /* 851px以下に適用されるCSS（Pixel5 横用） */ @media screen and (max-width: 851px) { .contact-icon{width:45% !important; margin-right:-25% !important;}} /* 768px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 768px) { .contact-icon{width:48% !important; margin-right:-28% !important;}} /* 744px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 744px) { .contact-icon{width:37% !important; margin-right:-20% !important;}} /* 740px以下に適用されるCSS（Galaxy S8 横用） */ @media screen and (max-width: 740px) { .contact-icon{width:45% !important; margin-right:-28% !important;}} /* 653px以下に適用されるCSS（Galaxy Fold 横用） */ @media screen and (max-width: 653px) { .contact-icon{width:45% !important; margin-right:-26% !important;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .contact-icon{width:50% !important; margin-right:-22% !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .contact-icon{width:85% !important; margin-right:-10% !important;}} .contact-icon img{width:100%; filter:drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); transition:0.3s;} .contact-icon img:hover{transform:scale(1.1); transition:0.3s} .row2{display:flex; justify-content:space-between;} /* スマホ用ハンバーガーメニュー */ .hbmenunav { position: fixed; top: 0; left: -300px; bottom: 0; width: 330px; background: #ffffff; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all .5s; z-index: 2001 !important; opacity: 0; height:600px; } .open .hbmenunav { left: 0; opacity: 0.9; } .hbmenunavinner { padding: 25px; } .hbmenunavinner ul { list-style: none; margin: 0; padding: 0; line-height:0.3em;} .hbmenunavinner ul li { margin: 0; border-bottom: 1px solid #333; width:100%; } .hbmenunavinner ul li a { display: block; color: #333; font-size: 14px; padding: 1em; text-decoration: none; transition-duration: 0.2s; } .hbmenunavinner ul li a:hover { background: #e4e4e4; } div.ccm-page header nav ul a{padding-right:10px !important;} div.ccm-page header nav ul li{padding-top:30px !important; padding-bottom:0px !important; padding-right:5px !important; padding-left:5px !important;} div.ccm-page header nav li{line-height:0.05em !important;} @media screen and (max-width: 480px) { .hbmenunav { display:block; left: -300px; width: 300px; } } /*============ .toggle_btn =============*/ .toggle_btn { display: block; position: fixed; top: 55px; right: 20px; width: 40px; height: 40px; transition: all .5s; cursor: pointer; z-index: 2002 !important; background: #777878; border-radius: 4px; border-width:5px; border-color: #777878; text-align:center; } .toggle_btn span { display: block; position: absolute; left: 5px; width: 30px; height: 2px; background-color: #fff; border-radius: 4px; transition: all .5s; } .toggle_btn span:nth-child(1) { top: 8px; right:5px; } .toggle_btn span:nth-child(2) { top: 19px; right:5px; } .toggle_btn span:nth-child(3) { bottom: 8px; right:5px; } .open .htoggle_btn span { background-color: #fff; } .open .toggle_btn span:nth-child(1) { -webkit-transform: translateY(10px) rotate(-315deg); transform: translateY(10px) rotate(-315deg); } .open .toggle_btn span:nth-child(2) { opacity: 0; } .open .toggle_btn span:nth-child(3) { -webkit-transform: translateY(-10px) rotate(315deg); transform: translateY(-10px) rotate(315deg); } /* 2000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 3000px) { .toggle_btn{display: none;}} /* 1300px以下に適用されるCSS（iPad PRO用） */ @media screen and (max-width: 1300px) { .toggle_btn{display: none;}} /* 1040px以下に適用されるCSS（iPad・タブレット用） */ @media screen and (max-width: 1040px) { .toggle_btn{display: block; top: 22px;}} /* 970px以下に適用されるCSS（iPad・タブレット用） */ @media screen and (max-width: 970px) { .toggle_btn{display: block; top: 22px;}} /* 930px以下に適用されるCSS（iPad・タブレット用） */ @media screen and (max-width: 930px) { .toggle_btn{top: 15px;}} /* 744px以下に適用されるCSS（iPad・タブレット用） */ @media screen and (max-width: 744px) { .toggle_btn{top: 10px;}} /* 740px以下に適用されるCSS（iPad・タブレット用） */ @media screen and (max-width: 740px) { .toggle_btn{display: block; top: 10px; }} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px) { .toggle_btn{display: block; top: 5px; margin-right:-8px;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .toggle_btn{display: block; top: 4px; transform:scale(0.8); margin-right:-1%;}} /*============ #mask =============*/ #mask { display: none; transition: all .5s; } .open #mask { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: .5; z-index: 2000 !important; cursor: pointer; } .container2{padding-left:7% !important; padding-right:7% !important;} /*---------------------------------------《フッターの設定》--------------------------------------------------- */ div.ccm-page footer{font-family: 'Zen Kaku Gothic New', sans-serif !important; font-weight:700 !important;} /* 744px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 744px) {div.ccm-page footer{font-size:0.8em;}} /* 665px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 665px) {div.ccm-page footer{font-size:0.6em;}} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) {div.ccm-page footer{font-size:0.8em;}} div.ccm-page div.area-content-accent{background:none !important; margin-top:0px !important; padding:0px 0px !important; } .footer-top{padding-top:60px !important; z-index:10;} .footer-sitetitle{width:45%;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .footer-sitetitle{width:100%;}} .footer-right{width:50%;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .footer-right{width:100%;}} .footer-tel{width:50%; padding-left:10px; padding-right:10px;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .footer-tel{width:100%;}} .footer-fax{width:50%; padding-left:20px; padding-right:20px; padding-top:1%;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .footer-fax{width:100%;}} footer#footer-theme section:last-child{background:url(https://sanei-kenzai.jp/application/files/7316/8197/1350/footer-back-a.jpg) !important; background-repeat: repeat-y !important; background-size:100% !important;} .row3{display:flex; justify-content:space-between;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .row3{display:block; width:100%;}} .row4{display:flex; justify-content:space-around;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .row4{display:flex; width:100%;}} .row5{display:flex !important; justify-content:space-around !important;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) {.row5 img{width:150px !important;}} .row6{display:flex; justify-content:space-between;} /* フッターナビの文字サイズ調整 */ /* 991px以下に適用されるCSS（タブレット縦用） */ @media screen and (max-width: 991px) { .footer-navi{font-size:0.7em !important;}} /* 834px以下に適用されるCSS（iPad Pro10.5 縦用） */ @media screen and (max-width: 834px) { .footer-navi{font-size:0.7em !important;}} /* 744px以下に適用されるCSS（iPad Pro10.5 縦用） */ @media screen and (max-width: 744px) { .footer-navi{width:120%; transform:scale(0.76); margin-left:-32px;}} /* 706px以下に適用されるCSS（タブレット用） */ @media screen and (max-width: 706px) { .footer-navi{width:130%; transform:scale(0.76); margin-left:-36px;}} /* 665px以下に適用されるCSS（タブレット用） */ @media screen and (max-width: 665px) { .footer-navi{width:135%; transform:scale(0.7); margin-left:-46px;}} .footer-navi a{color:#676767 !important; padding-left:3px; padding-right:3px;} .footer-navi a:hover{color:#1576b0 !important;} .footer-bottom{color:#fff !important; font-family: 'Zen Kaku Gothic New', sans-serif !important; font-weight:500 !important; font-size:0.8em !important;} footer#footer-theme section:last-child{border:none !important;} footer#footer-theme section{padding-top:0px !important;} /*画像下に付けるキャプション-a */ .caption-a{font-family: 'Zen Kaku Gothic New', sans-serif !important; font-size:0.8em; line-height:1.5em;} /*画像下に付けるキャプション-b */ .caption-b{font-family: 'Zen Kaku Gothic New', sans-serif !important; font-size:0.8em; line-height:1.2em;} /*画像下に付けるキャプション-c */ .caption-c{font-family: 'Zen Kaku Gothic New', sans-serif !important; font-size:0.9em; line-height:1.3em; font-weight:500; color:#012a7c;} .footer-logo:hover{opacity:0.8;} /*---------------------------------------《TOPページの設定》--------------------------------------------------- */ .top-campaign-waku{ position:absolute !important; z-index:2 !important; width:100%; margin-top:-14% !important; padding-right:2% !important;} /* 1380px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1380px) { .top-campaign-waku{margin-top:-14% !important;}} /* 1199px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1199px) { .top-campaign-waku{padding-right:2% !important}} .top-campaign{ position:relative !important; text-align:right !important;} .top-campaign img{width:20% !important;} /* 1380px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1380px) { .top-campaign img{ width:40% !important;}} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .top-campaign img{ width:40% !important;}} /* 500px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 500px) { .top-campaign img{ width:40% !important; margin-left:39% !important;}} /*TOPの事業内容のイメージ画像設定 */ .business-image-a{position:relative; right:-20% !important; top:60px !important; width:140%;} /* 991px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 991px) { .business-image-a{width:53%; right:-8.5% !important; margin-top:-28%; width:128%;}} /* 970px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 970px) { .business-image-a{width:53%; right:-8.5% !important; margin-top:-28%; width:128%;}} /* 744px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 744px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-108%;}} /* 716px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 716px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-110%;}} /* 700px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 700px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-112%;}} /* 685px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 685px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-114%;}} /* 670px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 670px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-116%;}} /* 650px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 650px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-118%;}} /* 649px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 649px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-124%;}} /* 620px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 620px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-128%;}} /* 580px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 580px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-133%;}} /* 520px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 520px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-140%;}} /* 450px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 450px) { .business-image-a{width:53%; right:-20% !important; margin-left:42%; margin-top:-150%;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .business-image-a{width:53%; margin-left:42%; margin-top:-160%;}} /* 390px以下に適用されるCSS（iPhone 14 縦用） */ @media screen and (max-width: 390px) { .business-image-a{width:53%; margin-left:42%; margin-top:-158%;}} /* 374px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 374px) { .business-image-a{width:53%; margin-left:42%; margin-top:-178%;}} /* 355px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 355px) { .business-image-a{width:53%; margin-left:42%; margin-top:-185%;}} /* 338px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 338px) { .business-image-a{width:53%; margin-left:42%; margin-top:-185%;}} /* 324px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 324px) { .business-image-a{width:53%; margin-left:45%; margin-top:-190%;}} /* 316px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 316px) { .business-image-a{width:53%; margin-left:47%; margin-top:-194%;}} div.ccm-page main{line-height:1.8em !important;} .back-c{width:100%; margin-bottom:-10%; position:relative;} .back-c img{width:100%;} .jpcloud-a{margin-left:85%; margin-right:-20%;} .jpcloud-b{margin-left:-10%; padding-bottom:30px;} /*TOPの製品案内イメージスライダーの丸ナビ現在表示 */ .rslides2_tabs{margin-top:2% !important;} div.ccm-page .ccm-image-slider-container .rslides2_tabs li.rslides_here a {background-color: #8b8edb !important;} /*TOPの製品案内イメージスライダー設定 */ .slide-items__wrap { width: 1200px !important; height: auto !important; padding-left:2.2%; padding-right:2.2%; margin-top:-3%; } /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) { .slide-items__wrap {width:900px !important; padding-left:9.2%; padding-right:2.2%; margin-top:-3%;}} /* 912px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 912px) { .slide-items__wrap {width:950px !important; padding-left:5.2%; padding-right:1.2%; margin-top:-3%;}} /* 820px以下に適用されるCSS（iPad air 縦用） */ @media screen and (max-width: 820px) { .slide-items__wrap {width:930px !important; padding-left:1.2%; padding-right:1.2%; margin-top:-3%;}} /* 768px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 768px) { .slide-items__wrap {width:900px !important; padding-left:6.2%; padding-right:2.2%; margin-top:-3%;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) { .slide-items__wrap {width:70% !important; padding-left:13.2%; margin-top:-5%;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .slide-items__wrap {width:92% !important; padding-left:13.2%; margin-top:-7%;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .slide-items__wrap {width:85% !important; padding-left:9.2%; margin-top:-10%;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) { .slide-items__wrap {width:70% !important; padding-left:9.2%; margin-top:-10%;}} /* 393px以下に適用されるCSS（Pixel5 縦用） */ @media screen and (max-width: 393px) { .slide-items__wrap {width:83% !important; padding-left:9.2%; margin-top:-10%;}} /* 390px以下に適用されるCSS（iPhone12 pro 縦用） */ @media screen and (max-width: 390px) { .slide-items__wrap {width:70% !important; padding-left:9.2%; margin-top:-10%;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) { .slide-items__wrap {width:50% !important; padding-left:0%; margin-top:-10%;}} .slide-items .slick-prev{margin-left:-75px !important; margin-top:-2.5% !important; position:absolute !important; z-index:3; transform: rotate(180deg);} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) { .slide-items .slick-prev{margin-left:-95px !important;}} /* 820px以下に適用されるCSS（iPad air 縦用） */ @media screen and (max-width: 820px) { .slide-items .slick-prev{margin-left:-40px !important;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) { .slide-items .slick-prev{margin-left:-80px !important;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .slide-items .slick-prev{margin-left:-80px !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .slide-items .slick-prev{margin-left:-80px !important;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) { .slide-items .slick-prev{margin-left:-80px !important;}} /* 393px以下に適用されるCSS（Pixel5 縦用） */ @media screen and (max-width: 393px) { .slide-items .slick-prev{margin-left:-80px !important;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) { .slide-items .slick-prev{margin-left:-45px !important;}} .slide-items .slick-next{margin-left:98% !important; margin-top:0px !important; position:absolute !important; z-index:3; } /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) { .slide-items .slick-next{margin-left:97% !important;}} /* 912px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 912px) { .slide-items .slick-next{margin-left:96% !important;}} /* 768px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 768px) { .slide-items .slick-next{margin-left:92% !important;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) { .slide-items .slick-next{margin-left:98% !important;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .slide-items .slick-next{margin-left:98% !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .slide-items .slick-next{margin-left:98% !important;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) { .slide-items .slick-next{margin-left:98% !important;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) { .slide-items .slick-next{margin-left:75% !important;}} .slide-items .slick-arrow { width: 60px; height: 60px; border-radius: 50%; background-color: #fff; cursor: pointer; border: none; outline: none; font-size: 0; position: absolute; top: 115px; z-index: 1; filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));} /* 912px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 912px) { .slide-items .slick-arrow{width:30px; height:30px; top:100px;}} /* 768px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 768px) { .slide-items .slick-arrow{width:30px; height:30px; top:70px;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) { .slide-items .slick-arrow{width:30px; height:30px; top:155px;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .slide-items .slick-arrow{width:50px; height:50px; top:120px;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .slide-items .slick-arrow{width:30px; height:30px; top:80px;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) { .slide-items .slick-arrow{width:30px; height:30px; top:80px;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) { .slide-items .slick-arrow{width:30px; height:30px; top:60px;}} .slide-items .slick-arrow::before { content: ''; display: block; width: 12px; height: 12px; border: 1px solid #5472cd; border-width: 3px 3px 0 0; position: absolute; top: 24px; transform: rotate(45deg); } .slider-2 .slick-next { right: 0; } .slider-2 .slick-prev { left: 0; } .slider-2 .slick-next::before { left: 40px; } .slider-2 .slick-prev::before { border-width: 0 0 3px 3px; right: 22px; } .slide-items .slick-arrow::before {margin-left:26% !important;} .slick-list{overflow-x:hidden !important; overflow-y:block !important; padding-bottom:2% !important;} /* 912px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 912px) { .slick-list{padding-right:0px !important; padding-left:0px !important; margin-right:10px !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .slick-list{margin-left:-20px !important;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) { .slick-list{margin-left:-40px !important;}} /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) { .slick-list{margin-left:-40px !important;}} /* 912px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 912px) { .slide-items .slick-arrow::before {width:9px; height:9px; top:10px; left:5%;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) { .slide-items .slick-arrow::before {width:9px; height:9px; top:10px; left:5%;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .slide-items .slick-arrow::before {width:12px; height:12px; top:18px; left:5%;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .slide-items .slick-arrow::before {width:9px; height:9px; top:10px; left:5%;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) { .slide-items .slick-arrow::before {width:9px; height:9px; top:10px; left:5%;}} .top-access{position:relative; z-index:5;} .top-access-2{position:relative; z-index:5; margin-bottom:3%; margin-top:-44%;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .ccm-custom-style-container.ccm-custom-style-main-300{ margin-bottom:-50px !important; padding-bottom:100px !important;}} /*TOPの三栄にかける想いの上イメージ */ /* 744px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 744px) { .top-about-image{width:40%; margin-left:auto; margin-right:auto; margin-bottom:0%;}} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .top-about-image{width:60%; margin-left:20%; margin-bottom:-10%;}} .top-business-thumbnail{width:100% !important;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .top-business-thumbnail{display:flex;}} /* 744px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 744px) { .top-recruit-image{width:50%; margin-left:auto; margin-right:auto; margin-top:-8%;}} /*-------------------------イメージスライダー------------------------------------- */ .rslides_tabs{position:relative ; z-index:10 ; text-align: center; margin-top:-40px ; } div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{top:40px !important;} /* 530px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 530px) { div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{top:20px !important;}} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px) { div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{top:10px !important;}} /* 375px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 375px) { div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{top:30px !important;}} .ccm-image-slider-container{background-image: none !important ; } div.ccm-page .ccm-image-slider-container .ccm-image-slider{padding-left:0px !important; padding-right:0px !important;} div.ccm-page .ccm-image-slider-container{padding-top: 0 !important; border-bottom:none !important; margin-bottom:-17px !important;} div.ccm-page .ccm-image-slider-container .ccm-image-slider .rslides li{max-height: 80% !important;} div.ccm-page .ccm-image-slider-container .ccm-image-slider{width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; } div.ccm-page .ccm-image-slider-container .ccm-image-slider-inner{margin:0 !important; padding:0 !important;} /*イメージスライダーの丸ナビ */ div.ccm-page .ccm-image-slider-container .rslides_tabs li a{width:10px !important; height:10px !important; margin-right:7px !important;} /* 375px以下に適用されるCSS（タブレット用 */ @media screen and (max-width: 375px) { div.ccm-page .ccm-image-slider-container .rslides_tabs li a{width:6px !important; height:6px !important; margin-right:6px !important; margin-top:30px !important;}} /*イメージスライダーの丸ナビの上下余白調整 */ /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) { div.ccm-page .ccm-image-slider-container .rslides_tabs{padding-top:0px !important; padding-bottom:0px !important;}} /*イメージスライダーの丸ナビ現在表示 */ div.ccm-page .ccm-image-slider-container .rslides_tabs li.rslides_here a{background-color: #5a321b !important;} /*イメージスライダーのズームアップ #rslides1_s0{animation: shrink 19s infinite !important; transition:opacity 1.2s ease-in-out 0s !important;} @keyframes shrink{0% {transform: scale(1.05);} 50%{transform:scale(1.0);} 100% {transform:scale(1.05);}} #rslides1_s1{animation: shrink1 19s infinite !important; transition:opacity 1.2s ease-in-out 0s !important;} @keyframes shrink1{0% {transform: scale(1.05);} 50%{transform:scale(1.0);} 100% {transform:scale(1.05);}} #rslides1_s2{animation: shrink2 19s infinite !important; transition:opacity 1.2s ease-in-out 0s !important;} @keyframes shrink2{0% {transform: scale(1.05);} 50%{transform:scale(1.0);} 100% {transform:scale(1.05);}} #rslides1_s3{animation: shrink3 19s infinite !important; transition:opacity 1.2s ease-in-out 0s !important;} @keyframes shrink3{0% {transform: scale(1.05);} 50%{transform:scale(1.0);} 100% {transform:scale(1.05);}} /*TOPのイメージスライダーの背景 */ .topslide{padding-top:-30px !important; padding-bottom:-30px !important;} /*TOPのイメージスライダーの見出し大 */ .top-slide-midashi-l{-ms-writing-mode: tb-rl; writing-mode: vertical-rl; color:#fff !important; font-size:3em !important; border-bottom:none !important; height:40% !important; margin-left:-26% !important; margin-top:10% !important; font-family: 'Shippori Mincho', serif !important; line-height:1.5em; } /* 3000px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 3000px) { .top-slide-midashi-l{ font-size:2.5em !important; height:45% !important; margin-left:-26% !important; margin-top:10% !important;}} /* 2700px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 2700px) { .top-slide-midashi-l{ margin-left:-26% !important;}} /* 2200px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 2200px) { .top-slide-midashi-l{ margin-top:10% !important;}} /* 2100px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 2100px) { .top-slide-midashi-l{ margin-top:13% !important;}} /* 2000px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 2000px) { .top-slide-midashi-l{ font-size:2.7em !important; height:48% !important; margin-left:-20% !important; margin-top:13% !important; }} /* 1770px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1770px) { .top-slide-midashi-l{ font-size:2.5em !important; height:40% !important; margin-left:-21% !important;}} /* 1680px以下に適用されるCSS（ノートPC15.4インチ用） */ @media screen and (max-width: 1680px){ .top-slide-midashi-l{ font-size:3em !important; height:391px !important; margin-left:-26% !important; margin-top:10% !important;}} /* 1500px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1500px){ .top-slide-midashi-l{ font-size:3em !important; height:50% !important; margin-left:-21% !important; margin-top:10% !important;}} /* 1420px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1420px) { .top-slide-midashi-l{ font-size:2.5em !important; height:45% !important; margin-left:-14% !important; margin-top:0% !important;}} /* 1400px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1400px) { .top-slide-midashi-l{ font-size:2.5em !important; height:45% !important; margin-left:-14% !important; margin-top:10% !important;}} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) { .top-slide-midashi-l{ font-size:2.5em !important; height:45% !important; margin-left:-16% !important; margin-top:15% !important;}} /* 1285px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1285px) { .top-slide-midashi-l{ font-size:2.5em !important; height:45% !important; margin-left:-14% !important; margin-top:8% !important;}} /* 1280px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1280px) { .top-slide-midashi-l{ font-size:2.5em !important; height:45% !important; margin-left:-14% !important;}} /* 1255px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1280px) { .top-slide-midashi-l{ font-size:2.5em !important; height:45% !important; margin-left:-14% !important; margin-top:1% !important;}} /* 1165px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1165px) { .top-slide-midashi-l{ font-size:2em !important; height:40% !important; margin-left:-16% !important; margin-top:1% !important;}} /* 1150px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1150px) { .top-slide-midashi-l{ font-size:2em !important; height:40% !important; margin-left:-16% !important; margin-top:1% !important;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) { .top-slide-midashi-l{ font-size:2.3em !important; height:300px !important; margin-left:-9% !important; margin-top:2% !important;}} /* 930px以下に適用されるCSS（タブレット・PC 横用） */ @media screen and (max-width: 930px) { .top-slide-midashi-l{font-size:2em !important; margin-left:-12% !important;}} /* 915px以下に適用されるCSS（Galaxy S20 横用） */ @media screen and (max-width: 915px) { .top-slide-midashi-l{ font-size:2em !important; height:315px !important; margin-left:-11% !important;}} /* 914px以下に適用されるCSS（Galaxy A51/71 横用） */ @media screen and (max-width: 914px) { .top-slide-midashi-l{ font-size:2em !important; height:315px !important; margin-left:-11% !important;}} /* 912px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 912px) { .top-slide-midashi-l{ font-size:2em !important; height:315px !important; margin-left:-9% !important;}} /* 896px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 896px) { .top-slide-midashi-l{ font-size:2em !important; height:310px !important; margin-left:-9% !important;}} /* 852px以下に適用されるCSS（Pixel5 横用） */ @media screen and (max-width: 852px) { .top-slide-midashi-l{ font-size:2em !important; height:100% !important; margin-left:-9% !important;}} /* 851px以下に適用されるCSS（Pixel5 横用） */ @media screen and (max-width: 851px) { .top-slide-midashi-l{ font-size:2em !important; height:255px !important; margin-left:-9% !important;}} /* 844px以下に適用されるCSS（iPhone12 pro 横用） */ @media screen and (max-width: 844px) { .top-slide-midashi-l{ font-size:2em !important; height:255px !important; margin-left:-9% !important;}} /* 834px以下に適用されるCSS（iPad pro10.5 縦用） */ @media screen and (max-width: 834px) { .top-slide-midashi-l{ font-size:2em !important; height:35% !important; margin-left:-9% !important;}} /* 820px以下に適用されるCSS（iPad air 縦用） */ @media screen and (max-width: 820px) { .top-slide-midashi-l{ font-size:1.8em !important; height:35% !important; margin-left:-11% !important;}} /* 800px以下に適用されるCSS（Nest Hub Max 縦用） */ @media screen and (max-width: 800px) { .top-slide-midashi-l{ font-size:1.8em !important; height:35% !important; margin-left:-9% !important;}} /* 768px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 768px) { .top-slide-midashi-l{ font-size:1.8em !important; height:35% !important; margin-left:-9% !important;}} /* 744px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 744px) { .top-slide-midashi-l{ font-size:2em !important; margin-top:-3% !important; }} /* 740px以下に適用されるCSS（Galaxy S8 横用） */ @media screen and (max-width: 740px) { .top-slide-midashi-l{ font-size:2em !important; height:230px !important; margin-left:-18% !important; margin-top:-1% !important;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) { .top-slide-midashi-l{ font-size:1.6em !important; height:30% !important; margin-left:-18% !important;}} /* 667px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 667px) { .top-slide-midashi-l{ font-size:2em !important; height:265px !important; margin-left:-10% !important;}} /* 653px以下に適用されるCSS（Galaxy Fold 横用） */ @media screen and (max-width: 653px) { .top-slide-midashi-l{ font-size:2em !important; height:270px !important; margin-left:-10% !important;}} /* 600px以下に適用されるCSS（Nest Hub 縦用） */ @media screen and (max-width: 600px) { .top-slide-midashi-l{ font-size:1.8em !important; height:30% !important; margin-left:-10%;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .top-slide-midashi-l{ font-size:1.8em !important; height:25% !important; margin-left:-10% !important;}} /* 530px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 530px) { .top-slide-midashi-l{ font-size:1.8em !important; height:25% !important; margin-left:-10% !important; 　margin-top:-7% !important;}} /* 500px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 500px) { .top-slide-midashi-l{ font-size:1.7em !important; height:25% !important; margin-left:-10% !important; 　margin-top:-11% !important;}} /* 440px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 440px) { .top-slide-midashi-l{ font-size:1.5em !important; height:25% !important; margin-left:-10% !important; 　margin-top:-11% !important;}} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .top-slide-midashi-l{ font-size:1.2em !important; height:25% !important; margin-left:-10% !important; margin-top:-1% !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .top-slide-midashi-l{ font-size:1.1em !important; height:25% !important; margin-left:-7% !important; margin-top:0% !important;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) {} /* 393px以下に適用されるCSS（Pixel5 縦用） */ @media screen and (max-width: 393px) {} /* 390px以下に適用されるCSS（iPhone12 pro 縦用） */ @media screen and (max-width: 390px) { .top-slide-midashi-l{ font-size:1.0em !important; height:23% !important; margin-left:-11% !important; margin-top:-7% !important;}} /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) { .top-slide-midashi-l{ font-size:1.0em !important; height:23% !important; margin-left:-7% !important; margin-top:-7% !important;}} /* 360px以下に適用されるCSS（Galaxy S8 縦用） */ @media screen and (max-width: 360px) { .top-slide-midashi-l{ font-size:1.0em !important; height:23% !important; margin-left:-7% !important; margin-top:-14% !important;}}/* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) { .top-slide-midashi-l{ font-size:0.8em !important; height:20% !important; margin-left:-7% !important; margin-top:-25% !important;}} .top-slide-midashi-l:before{background:none !important;} /*TOPのイメージスライダーの見出し小 */ .top-slide-midashi-s{-ms-writing-mode: tb-rl; writing-mode: vertical-rl; color:#fff !important; font-size:1.2em !important; font-family: 'Zen Old Mincho', serif !important; margin-left:-40% !important; margin-top:-30% !important; letter-spacing:0.06em !important; } /* 3000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 3000px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-32% !important; font-size:1.2em !important; line-height:1.4em !important;}} /* 2700px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2700px) {.top-slide-midashi-s{ margin-top:-34% !important;}} /* 2600px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2600px) {.top-slide-midashi-s{ margin-top:-35% !important;}} /* 2300px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2300px) {.top-slide-midashi-s{ margin-top:-38% !important;}} /* 2200px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2200px) {.top-slide-midashi-s{ margin-top:-40% !important;}} /* 2100px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2100px) {.top-slide-midashi-s{ margin-top:-45% !important;}} /* 2000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2000px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-50% !important; font-size:1.2em !important; line-height:1.4em !important;}} /* 1770px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1770px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-43% !important; font-size:1.2em !important; line-height:1.4em !important;}} /* 1680px以下に適用されるCSS（ノートPC15.4インチ用） */ @media screen and (max-width: 1680px){ .top-slide-midashi-s{ margin-left:-50% !important; margin-top:-56% !important;}} /* 1500px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1500px) {.top-slide-midashi-s{ margin-left:-48% !important; margin-top:-65% !important; font-size:1.3em !important; line-height:1.4em !important;}} /* 1420px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1420px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-55% !important; font-size:1.2em !important; line-height:1.4em !important;}} /* 1400px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1400px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-65% !important; font-size:1.2em !important; line-height:1.4em !important;}} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-60% !important; font-size:1.2em !important; line-height:1.5em !important;}} /* 1280px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1280px) {.top-slide-midashi-s{ margin-left:-39% !important; margin-top:-62% !important;}} /* 1240px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1240px){ .top-slide-midashi-s{ margin-top:-65% !important;}} /* 1190px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1190px) { .top-slide-midashi-s{ font-size:1.05em !important; margin-left:-39% !important; margin-top:-68% !important;}} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { .top-slide-midashi-s{ font-size:1.05em !important; margin-left:-41% !important; margin-top:-62% !important;}} /* 1150px以下に適用されるCSS（Nest Hub Max 横用） */ @media screen and (max-width: 1150px) { .top-slide-midashi-s{ font-size:1.05em !important; margin-left:-39% !important; margin-top:-73% !important;}} /* 1112px以下に適用されるCSS（iPad pro10.5 横用） */ @media screen and (max-width: 1112px) { .top-slide-midashi-s{ font-size:1.05em !important; margin-left:-39% !important; margin-top:-75% !important;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-68% !important; font-size:1.0em !important;}} /* 991px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 991px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-78% !important; font-size:1.0em !important;}} /* 970px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 970px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-78% !important; font-size:1.0em !important;}} /* 930px以下に適用されるCSS（タブレット・PC 横用） */ @media screen and (max-width: 930px) {.top-slide-midashi-s{ font-size:0.9em !important;}} /* 915px以下に適用されるCSS（Galaxy S20 横用） */ @media screen and (max-width: 915px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-79% !important; font-size:0.8em !important; line-height:1.8em !important;}} /* 896px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 896px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-80% !important; font-size:0.8em !important; line-height:1.6em !important;}} /* 851px以下に適用されるCSS（Pixel5 横用） */ @media screen and (max-width: 851px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-70% !important; font-size:0.8em !important; line-height:1.6em !important;}} /* 844px以下に適用されるCSS（iPhone14/12 pro 横用） */ @media screen and (max-width: 844px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-71% !important; font-size:0.8em !important; line-height:1.6em !important;}} /* 834px以下に適用されるCSS（iPad pro10.5 縦用） */ @media screen and (max-width: 834px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-86% !important; font-size:0.8em !important; line-height:1.6em !important;}} /* 820px以下に適用されるCSS（iPad air 縦用） */ @media screen and (max-width: 820px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-116% !important; font-size:0.8em !important; line-height:1.6em !important;}} /* 800px以下に適用されるCSS（Nest Hub Max 縦用） */ @media screen and (max-width: 800px) {.top-slide-midashi-s{ margin-left:-39% !important; margin-top:-93% !important; font-size:0.8em !important; line-height:1.6em !important;}} /* 768px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 768px) {.top-slide-midashi-s{ margin-left:-38% !important; margin-top:-108% !important; font-size:0.75em !important; line-height:1.6em !important;}} /* 744px以下に適用されるCSS（iPad Mini 縦用） */ @media screen and (max-width: 744px) {.top-slide-midashi-s{margin-top:-98% !important; font-size:0.96em !important;}} /* 740px以下に適用されるCSS（Galaxy S8 横用） */ @media screen and (max-width: 740px) {.top-slide-midashi-s{ margin-left:-43% !important; margin-top:-73% !important; font-size:0.8em !important; line-height:1.8em !important;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-86% !important; font-size:0.65em !important; line-height:1.8em !important;}} /* 667px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 667px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-94% !important; font-size:0.65em !important; line-height:2em !important;}} /* 653px以下に適用されるCSS（Galaxy Fold 横用） */ @media screen and (max-width: 653px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-96% !important; font-size:0.6em !important; line-height:2em !important;}} /* 600px以下に適用されるCSS（Nest Hub 縦用） */ @media screen and (max-width: 600px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-106% !important; font-size:0.4em !important; line-height:3em !important;}} /* 575px以下に適用されるCSS（Nest Hub 縦用） */ @media screen and (max-width: 575px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-112% !important; font-size:0.4em !important; line-height:3em !important;}} /* 550px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 550px) {.top-slide-midashi-s{ margin-left:-40% !important; margin-top:-115% !important; font-size:0.4em !important; line-height:3em !important;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) {.top-slide-midashi-s{ margin-left:-35% !important; margin-top:-110% !important; font-size:0.85em !important; line-height:1.4em !important; transform:scale(0.8) !important;}} /* 530px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 530px) {.top-slide-midashi-s{ margin-left:-35% !important; margin-top:-115% !important; font-size:0.85em !important; line-height:1.4em !important; transform:scale(0.8) !important;}} /* 500px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 500px) {.top-slide-midashi-s{ margin-left:-35% !important; margin-top:-120% !important; font-size:0.85em !important; line-height:1.4em !important; transform:scale(0.8) !important;}} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px) {.top-slide-midashi-s{ margin-left:-35% !important; margin-top:-125% !important; font-size:0.85em !important; line-height:1.4em !important; transform:scale(0.8) !important;}} /* 440px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 440px) {.top-slide-midashi-s{ margin-left:-35% !important; margin-top:-145% !important; font-size:0.85em !important; line-height:1.4em !important; transform:scale(0.8) !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) {.top-slide-midashi-s{ margin-left:-20% !important; margin-top:-150% !important; font-size:1em !important; line-height:1.6em !important; transform:scale(0.6) !important;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) {.top-slide-midashi-s{ margin-left:-20% !important; margin-top:-132% !important; font-size:0.7em !important; line-height:1.7em !important; transform:scale(0.6) !important;}} /* 393px以下に適用されるCSS（Pixel5 縦用） */ @media screen and (max-width: 393px) {.top-slide-midashi-s{ margin-left:-18% !important; margin-top:-142% !important; font-size:0.8em !important; line-height:1.6em !important; transform:scale(0.55) !important;}} /* 390px以下に適用されるCSS（iPhone14 pro 縦用） */ @media screen and (max-width: 390px) {.top-slide-midashi-s{ margin-left:-18% !important; margin-top:-142% !important; font-size:0.8em !important; line-height:1.6em !important; transform:scale(0.5) !important;}} /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) {.top-slide-midashi-s{ margin-left:-18% !important; margin-top:-145% !important; font-size:0.8em !important; line-height:1.6em !important; transform:scale(0.5) !important;}} /* 360px以下に適用されるCSS（Galaxy S8 縦用） */ @media screen and (max-width: 360px) {.top-slide-midashi-s{ margin-left:-18% !important; margin-top:-140% !important; font-size:0.8em !important; line-height:1.6em !important; transform:scale(0.5) !important;}} /* 306px以下に適用されるCSS（Galaxy S8 縦用） */ @media screen and (max-width: 306px) {.top-slide-midashi-s{ margin-left:-18% !important; margin-top:-220% !important; font-size:0.8em !important; line-height:1.6em !important; transform:scale(0.5) !important;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) {.top-slide-midashi-s{ margin-left:-17% !important; margin-top:-210% !important; font-size:0.6em !important; line-height:1.7em !important; transform:scale(0.5) !important;}} /* TOPページ-採用情報とアクセス間調整用*/ .top-recruit-back{padding-bottom:150px; margin-bottom:-100px;} /* 480px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 480px){ .top-recruit-back{padding-bottom:120px !important;}} /* 412px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 412px){ .top-recruit-back{padding-bottom:120px !important;}} /* 430px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 430px){ .top-jigyou-image{width:400px !important}} /* 420px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 420px){ .top-jigyou-image{width:390px !important}} /* 410px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 410px){ .top-jigyou-image{width:380px !important}} /* 400px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 400px){ .top-jigyou-image{width:370px !important}} /* 390px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 390px){ .top-jigyou-image{width:360px !important}} /* 380px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 380px){ .top-jigyou-image{width:350px !important}} /* 370px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 370px){ .top-jigyou-image{width:340px !important}} /* 360px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 360px){ .top-jigyou-image{width:330px !important}} /* 350px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 350px){ .top-jigyou-image{width:320px !important}} /* 340px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 340px){ .top-jigyou-image{width:310px !important}} /* 330px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 330px){ .top-jigyou-image{width:300px !important}} /* 320px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 320px){ .top-jigyou-image{width:290px !important}} /* 310px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 310px){ .top-jigyou-image{width:280px !important}} /* 300px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 300px){ .top-jigyou-image{width:270px !important}} /* 290px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 290px){ .top-jigyou-image{width:260px !important}} /* 280px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 280px){ .top-jigyou-image{width:250px !important}} div.ccm-page div.ccm-block-page-list-page-entry-horizontal, div.ccm-page div.ccm-block-page-list-page-entry{ padding-bottom:15px !important; margin-bottom:15px !important;} /*---------------------------------------《会社情報ページの設定》--------------------------------------------------- */ .president-ph{width:300px;} /* 1199px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 1199px){ .president-ph{width:330px;}} /* 991px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 991px){ .president-ph{width:250px;}} /* 744px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 744px){ .president-ph{width:270px;}} /* 727px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 727px){ .president-ph{width:230px; margin-bottom:30px;}} /* 687px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 687px){ .president-ph{width:230px; margin-bottom:150px;}} /* 606px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 606px){ .president-ph{width:185px; margin-bottom:5px;}} /* 561px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 561px){ .president-ph{width:185px; margin-bottom:10px;}} /* 540px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 540px){ .president-ph{width:210px; margin-bottom:10px;}} /* 532px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 532px){ .president-ph{width:210px; margin-bottom:30px; margin-left:30% !important; margin-right:30% !important;}} /* 480px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 480px){ .president-ph{margin-left:27% !important;}} /* 450px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 450px){ .president-ph{margin-left:25% !important;}} /* 420px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 420px){ .president-ph{margin-left:23% !important;}} /* 400px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 400px){ .president-ph{margin-left:21% !important;}} /* 380px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 380px){ .president-ph{margin-left:19% !important;}} /* 370px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 370px){ .president-ph{margin-left:17.5% !important;}} /* 350px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 350px){ .president-ph{margin-left:16% !important;}} /* 330px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 330px){ .president-ph{margin-left:14% !important;}} /* 320px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 320px){ .president-ph{margin-left:12% !important;}} /* 310px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 310px){ .president-ph{margin-left:10.5% !important;}} /* 300px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 300px){ .president-ph{margin-left:9% !important;}} /* 280px以下に適用されるCSS（スマホ縦用） */ @media screen and (max-width: 280px){ .president-ph{margin-left:5% !important;}} /*---------------------------------------《事業内容ページの設定》--------------------------------------------------- */ .about-title{ -ms-writing-mode: tb-rl !important; writing-mode: vertical-rl !important; font-family: 'Shippori Mincho', serif !important; font-weight:500 !important; font-size:1.6em !important; color:#1a3069 !important; height:33% !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:30px !important; line-height:1.5em !important;} /* 1112px以下に適用されるCSS（iPad pro10.5 横用） */ @media screen and (max-width: 1112px) { .about-title{height:35% !important;}} /* 1110px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1110px) { .about-title{ height:35% !important;}} /* 834px以下に適用されるCSS（iPad pro10.5 縦用） */ @media screen and (max-width: 834px) { .about-title{ -ms-writing-mode: tb-rl !important; writing-mode: vertical-rl !important; font-family: 'Shippori Mincho', serif !important; font-weight:500 !important; font-size:1.6em !important; color:#1a3069 !important; height:33% !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:30px !important;}} /* 744px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 744px) { .about-title{font-size:1.6em !important;}} /* 740px以下に適用されるCSS（Galaxy S8 横用） */ @media screen and (max-width: 740px) { .about-title{height:180px !important;}} /* 430px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 430px) { .about-title{height:200px !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .about-title{height:200px !important; font-size:1.2em !important; margin-bottom:0px !important;}} /* 355px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 355px) { .about-title{height:180px !important; font-size:1.2em !important; margin-bottom:0px !important;}} .about-title-B{ -ms-writing-mode: tb-rl !important; writing-mode: vertical-rl !important; font-family: 'Shippori Mincho', serif !important; font-weight:500 !important; font-size:1.6em !important; color:#1a3069 !important; height:33% !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:30px !important; line-height:1.5em !important;} /* 1112px以下に適用されるCSS（iPad pro10.5 横用） */ @media screen and (max-width: 1112px) { .about-title-B{ height:53% !important;}} /* 1110px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1110px) { .about-title-B{ height:33% !important;}} /* 834px以下に適用されるCSS（iPad pro10.5 縦用） */ @media screen and (max-width: 834px) { .about-title-B{ height:33% !important;}} /* 744px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 744px) { .about-title-B{font-size:1.6em !important;}} /* 740px以下に適用されるCSS（iPhone14pro 横用） */ @media screen and (max-width: 740px) { .about-title-B{ height:180px !important;}} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .about-title-B{height:63% !important; font-size:1.2em !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .about-title-B{height:200px !important; font-size:1.2em !important; margin-bottom:0px !important;}} .ss-title{ -ms-writing-mode: tb-rl !important; writing-mode: vertical-rl !important; font-family: 'Shippori Mincho', serif !important; font-weight:500 !important; font-size:1.6em !important; color:#1a3069 !important; height:40% !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:10px !important;} .abouto-title-waku{position:relative; z-index:1; margin-bottom:-20%;} /*事業内容ページ用背景・上 */ .abouto-back-b-top-2{width:100%; margin-bottom:-20%; position:relative; z-index:1;} .about-back-b-top-2 img{width:100%;} /*事業内容ページ用背景・下 */ .abouto-back-b-bottom{position:relative !important; width:100% !important; margin-left:0% !important; margin-bottom:0% !important; z-index:2 !important;} .abouto-back-b-bottom img{width:100% !important;} .about-top-image{margin-bottom:-20%;} /*施工例とシールドサクションの背景調整用 */ .example-back{margin-bottom:100px; padding-bottom:200px;} /* 480px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 480px) { .example-back{margin-bottom:-60px !important; padding-bottom:60px !important;}} /*---------------------------------------《お知らせページの設定》--------------------------------------------------- */ div.ccm-page div.block-sidebar-wrapped a{color:#676767 !important;} div.ccm-page div.block-sidebar-wrapped a:hover{color:#3fade0 !important;} div.ccm-page ul.ccm-block-date-navigation-dates a{color:#1576b0 !important;} div.ccm-page ul.ccm-block-date-navigation-dates a:hover{color:#3fade0 !important;} /*管理者と日付の斜め表示を普通に */ div.ccm-page div.ccm-block-page-title-byline span.page-date, div.ccm-page div.ccm-block-page-title-byline span.page-author{ font-style:normal !important;} /*記事リストのタイトル色 */ div.ccm-page div.blog-entry-list div.ccm-block-page-list-title a{ color:#012a7c !important; font-family: 'Zen Old Mincho', serif !important; font-weight:500 !important;} div.ccm-page div.blog-entry-list div.ccm-block-page-list-title a:hover{ color:#1576b0 !important;} .page-author{display:none !important;} div.ccm-page div.blog-entry-list div.ccm-block-page-list-date{font-family: 'Helvetica Neue',sans-serif !important; font-weight:400 !important;} div.ccm-page div.ccm-block-page-title-byline span.page-date, div.ccm-page div.ccm-block-page-title-byline span.page-author{ font-family: 'Helvetica Neue',sans-serif !important; font-weight:400 !important;} /*---------------------------------------《お問合せページの設定》--------------------------------------------------- */ .text-muted{color:#3fade0 !important;} .pure-accordion-block-container .header .title{font-family: 'Zen Kaku Gothic New', sans-serif !important; -ms-writing-mode: tb !important; writing-mode: horizontal-tb !important;}