/* Theme Name: Nichigaku Version: 1 Author: GVT株式会社 Author URI: https://gvt.jp */ @charset "utf-8"; html, body { margin:0; padding:0; font-size:16px; width:100%; min-width:100%; } body { font:14px/2 /*YuGothic, "游ゴシック",*/ "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; position:relative; overflow:hidden; min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; } a { text-decoration:none; color:#ccc; transition:0.3s all ease; } a:hover { color:#122f8d; } ul {list-style:none; } .mb3 { margin-bottom:3rem !important; } :root { /*--maxWidth:1080px;*/ --maxWidth:997px; /*max-widthの997pxを変数化*/ } /*ヘッダーメニュー設定 ---------------------------------------------------------------------------*/ header { width:100%; background-color: #FFF; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#ededed)); background-image: -webkit-linear-gradient(#FFF 80%, #ededed); background-image: linear-gradient(#FFF 80%, #ededed); position:relative; } header > h1 { font-size:10px; max-width:var(--maxWidth); margin:0 auto; } header .inner { width:var(--maxWidth); margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; padding:0.25rem 0 1rem; } header .inner > a { display:flex; } header #headerR { display:flex; flex-direction:column; } header .headerRBox { display:flex; justify-content:flex-end; align-items:center; } header .headerRBox:first-child { margin-bottom:10px; } header .headerRBox .english { color:#F00; font-size:0.825rem; font-weight: 800; border: 1px solid #f00; border-radius: 10px; padding: 0 10px; margin-left: 10px; line-height: 1.4; } header .headerRBox #google_keyinput { font-size:0.75rem; border:1px solid #999; outline:none; padding:1px 2px; } header .headerRBox #google_keyinput:focus { border-width:2px; } header .headerRBox .search input[type=submit] { font-size:0.75rem; border:1px solid #ccc; padding:0.1rem 0.4rem; } header .headerRBox#teltoi img{ width:3rem; height:auto; } #tel { color: #009; font-weight:800; font-size: 1.2rem; letter-spacing: 0; line-height: 1; text-align: justify; padding: 0 3px; } #tel div{ font-size: 0.75rem; letter-spacing: -0.6px; color: #000; font-weight: 300; text-align: justify; -ms-text-align-last: justify; text-align-last: justify; } #mail { background-color: #009; color: #fff; font-size: 1rem; font-weight: 800; padding: 0.1rem 0.5rem; display:-ms-flex; display:flex; -ms-align-items:center; align-items:center; } #mail::before{ content:'\f0e0'; font-family: fontawesome; padding-right: 3px; font-size: 1.2rem; line-height: 1; } /* 20210408 New Header add start */ /*.modal { display:none; align-items:center; justify-content:center; position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0, 0, 0, 0.6); z-index:200; } #dialModal { background-color:rgba(255, 255, 255, 0.75); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:space-around; height:30vh; padding:0 3rem; } #dialModal > div:nth-child(2) { display:flex; justify-content:space-around; align-items:center; } #dialModal > div:nth-child(2) > img { width:3rem; } #dialModal > div:nth-child(2) > span { font-size:1.5rem; font-weight:bold; padding-left:1rem; } #dialModal > div:nth-child(2) > span a { color:#000; } #dialModalClose { background-color:#777; color:#fff; border-radius:50%; padding:0 0.5rem;position:absolute; top:-1rem; right:-1rem; display:flex; justify-content:center; align-items:center; width:3rem; height:3rem; cursor:pointer; } #dialModalClose::before { content:'\f00d'; font-size:2rem; font-family:fontawesome; }*/ /*header#newHeader { position:absolute; top:0; left:0; z-index:100; background:none; } header#newHeader .headerBody { margin-top:5rem; position:relative; width:100%; background-color:#0e5ca7; display:flex; }*/ header#newHeader { position:fixed; top:0; left:0; z-index:100; background:none; } header#newHeader .headerBody { position:relative; width:100%; background-color:#0e5ca7; display:flex; } header#newHeader .headerBody a { color:#fff; font-weight:bold; font-size:1.25rem; white-space:pre; } /* 20220407 mod start */ /* header#newHeader .headerBody > .pcHL { width:90%; max-width:1280px; position:absolute; top:50%; left:50%; transform:translateX(-50%); } */ header#newHeader .headerBody > .pcHL { width:90%; max-width:1280px; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); } /* 20220407 mod end */ header#newHeader .headerBody a.headerSearch > span::before { content:'\f002'; font-family:fontawesome; color:#0e5ca7; padding:0 0.75rem 0.25rem; background-color:#fff; border-radius:50%; display:inline-block; } /*header#newHeader .headerBody > ul { display:flex; margin:0 auto; max-width:1280px; }*/ header#newHeader .headerBody > ul { display:flex; justify-content:center; margin:0 auto; z-index:100; } header#newHeader .headerBody > ul > li { text-align:center; padding:1.5rem; } /*header#newHeader .headerBody > ul > li:nth-child(3) { margin-right:12vw; } header#newHeader .headerBody > ul > li:nth-child(5) { text-align:left; }*/ #spMenu { display:none; } header#newHeader .headerBody div.submenu { position:absolute; left:100%; width:100%; background-color:rgba(255, 255, 255, 0.8); display:flex; justify-content:flex-end; transition:1s cubic-bezier(0.075, 0.82, 0.165, 1); border-bottom:3px solid #0e5ca7; } header#newHeader .headerBody div.submenu.active { left:0; justify-content:center; } header#newHeader .headerBody div.submenu ul { display:flex; justify-content:space-between; align-items:center; width:90%; max-width:1280px; padding:1.25rem; } header#newHeader .headerBody div.submenu li { position:relative; } header#newHeader .headerBody div.submenu li::before { content:''; position:absolute; left:0; top:0; width:0; height:1px; background-color:#0e5ca7; transition:0.5s cubic-bezier(0.075, 0.82, 0.165, 1); } header#newHeader .headerBody div.submenu li::after { content:''; position:absolute; right:0; bottom:0rem; width:0; height:1px; background-color:#0e5ca7; transition:0.5s cubic-bezier(0.075, 0.82, 0.165, 1); } header#newHeader .headerBody div.submenu li:hover::before { width:100%; } header#newHeader .headerBody div.submenu li:hover::after { width:100%; } header#newHeader .headerBody div.submenu a { color:#0e5ca7; padding:0 1rem;} /*header#newHeader .headerBody .headerLogo { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:flex; max-width:13vw; }*/ /* 20220407 mod start header#newHeader .headerBody .headerLogo { position:absolute; top:50%; transform:translateY(-50%); display:flex; max-width:13vw; } */ header#newHeader .headerBody .headerLogo { position:absolute; top:50%; transform:translateY(-50%); display:flex; max-width:10.5vw; height:10vh; } header#newHeader .headerBody .headerLogo > svg { height:100%; } /* 20220407 mod end */ header#newHeader .headerBody .headerLogo.spHL { display:none; } header#newHeader .headerBody .headerLogo img { width:100%; height:auto; } /*header#newHeader .headerBody .headerEmph { position:absolute; top:-0.25rem; right:0; display:flex; width:24vw; height:calc(100% + 0.5rem); }*/ header#newHeader .headerBody .headerEmph { position:absolute; right:0; display:flex; width:32vw; height:100%; } header#newHeader .headerBody .headerEmph > a { text-align:center; flex:1; display:flex; align-items:center; justify-content:center; } header#newHeader .headerBody .headerStore { background-color:#c70039; } header#newHeader .headerBody .headerInq { background-color:#fd5f00; } /*header#newHeader .headerBody .headerEng { position:absolute; top:-4rem; right:3rem; width:6rem; } header#newHeader .headerBody .headerEng > img { width:6rem; }*/ header#newHeader .headerBody .headerEng { display:flex; } header#newHeader .headerBody .freeDial { position:absolute; top:-4rem; right:11rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; } header#newHeader .headerBody .freeDial > img { width:2rem; } header#newHeader .headerBody .freeDial > span { font-size:1.25rem; font-weight:bold; color:#333; padding-left:0.5rem; } header#newHeader .headerBody .freeDial > span::after { content:'\f067'; font-family:fontawesome; font-size:1.25rem; color:#fd5f00; padding-left:0.5rem; } .spEng { display:none; } .saleIcon { position:absolute; top:-3rem; right:21vw; font-size:0.75rem; font-weight:bold; color:#fff; padding:1px 0.75rem; border-radius:10px; background-color:#c70039; } .saleIcon::after { content:''; position:absolute; width:0; height:0; top:100%; right:1rem; border-style:solid; border-width:0 0.5rem 0.5rem 0; border-color:transparent #c70039 transparent transparent; } header#newHeader > section.fixed { margin-top:0 !important; } .headerStore { position: relative; overflow: hidden; border:1px solid #c70039; z-index:0; } .headerInq { position: relative; overflow: hidden; border:1px solid #fd5f00; z-index:0; } .headerStore:hover { transition:0.8s; color:#c70039 !important; } .headerInq:hover { transition:0.8s; color:#fd5f00 !important; } .headerStore::before, .headerStore::after, .headerInq::before, .headerInq::after { content:''; position:absolute; top:50%; width:20px; height:20px; background-color:#fff; border-radius:50%; z-index:-1; } .headerStore::before, .headerInq::before { left:-20px; transform: translate(-50%, -50%); } .headerStore::after, .headerInq::after { right:-20px; transform: translate(50%, -50%); } .headerStore:hover::before, .headerInq:hover::before { animation:criss-cross-left 0.8s both; animation-direction:alternate; } .headerStore:hover::after, .headerInq:hover::after { animation:criss-cross-right 0.8s both; animation-direction:alternate; } @keyframes criss-cross-left { 0% {left: -20px; } 50% { left: 50%; width: 20px; height: 20px; } 100% { left: 50%; width: 375px; height: 375px; } } @keyframes criss-cross-right { 0% { right: -20px; } 50% { right: 50%; width: 20px; height: 20px; } 100% { right: 50%; width: 375px; height: 375px; } } /* 20210408 New Header add end */ header #menu { height:60px; background-color:#FFF; background-image:-webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e7e7e7)); background-image: -webkit-linear-gradient(#FFF, #e7e7e7); background-image: linear-gradient(#FFF, #e7e7e7); border-top:1px solid #d4d4d4; border-bottom:5px solid #244594; box-sizing:content-box; } header #menu ul { width:var(--maxWidth); margin:0px auto; } header #menu ul li:first-child { border-left:1px solid #d4d4d4; } header #menu ul li { float:left; width:165px; border-right:1px solid #d4d4d4; text-align:center; font-weight:bold; } #menu ul li a { text-decoration:none; display:block; line-height:30px; padding-top:5px; color:#222; font-size:1rem; letter-spacing:0.1em; text-shadow:#FFF 0px 2px; } nav#menu ul li a:hover { background-color:#FFF; border-bottom:5px solid #2d5fff; } #menu ul li a span { color:#244594; font-size: 9px; display: block; font-weight: normal; letter-spacing:0.2em; line-height:1.25rem; padding-bottom:5px; } #breadcrumb { background-color:#244594; width:100%; } #breadcrumBox { width:100%; max-width:var(--maxWidth); margin:0 auto; padding:0.5rem 0 0.75rem; font-size:0.75rem; } #breadcrumBox > a:hover { text-decoration:underline; } #breadcrumb * { color:#fff; } #Nmenubar_hdr { display: none; } /*コンテンツ設定 ---------------------------------------------------------------------------*/ #contents { width:var(--maxWidth); margin:0 auto; } /* 20211115 web catalog new add start */ #contents::after { content:''; display:block; clear:both; } #contents #main { width:700px; margin:20px 0; float:left; } /* 20211115 web catalog new add end */ #contentsFull { width:100%; margin:0 auto; position:relative; } #contentsFull #main { width:var(--maxWidth); margin:0 auto; } /* 20211115 web catalog new add start */ #Nsidemenu { width:240px; float:right; margin:20px 0; } /* 20211115 web catalog new add end */ /*フッターメニュー設定 ---------------------------------------------------------------------------*/ ul#footermenu { margin-left: 16px; display: -ms-flex; display: flex; -ms-align-items: center; align-items: center; } ul#footermenu li { font-size: 0.8rem; } ul#footermenu li:not(:first-child)::before {content:'/';padding:0 0.8rem; } /*フッター設定 ---------------------------------------------------------------------------*/ /* 20220301 mod start */ footer {color: #FFF;background-color:#0e5ca7;border-top: 10px solid #122f8d;border-bottom: 10px solid #122f8d; position:relative; } /*footer {color: #FFF;background-color:#0e5ca7;border-top: 10px solid #122f8d;border-bottom: 10px solid #122f8d; }*/ /* 20220301 mod end */ /* 20220407 mod start */ /*footer a { color: #FFF; text-decoration:none; }*/ footer a { color: #FFF; text-decoration:none; width:18%; } /* 20220407 mod end */ footer a:hover { color: #FFF; text-decoration:underline; } section#footer{ display: -ms-flex; display: flex; justify-content: space-around; -ms-align-items: center; align-items: center; width: var(--maxWidth); max-width:90vw; margin: 0 auto; padding: 2rem 0 1rem; border-bottom: 1px solid rgba(255,255,255,0.5); } section#footer a img{ height: 1.8rem; } #copy { padding: 1.5rem 0; text-align: center; } /* 20210408 add start */ #footerSNS { display:flex; justify-content:center; align-items:center; background-color:#122f8d; padding-top:0.5rem; padding-bottom:1rem; } #footerSNS > div { display:flex; align-items:center; justify-content:center; margin:0 2rem; } #footerSNS > div > span { font-weight:bold; font-size:1.125rem; color:#122f8d; padding:0 1rem; background-color:#fff; line-height:2; } #footerSNS > div:not(:nth-child(2))::after { content:''; height:0; width:0; border-top:1.125rem solid transparent; border-left:1rem solid #fff; border-bottom:1.125rem solid transparent; display:block; } #footerSNS > div:last-child { visibility:hidden; } #footerSNS > #snsIcons > a { height:30px; margin:0 1rem; display:block; } #footerSNS > #snsIcons > a > img { height:100%; } /* 20210408 add end */ /* 20210408 new index add start */ #mainSwiper { height:100vh; max-height:100vh; overflow:hidden; position:relative; } #mainSwiper .spsw { display:none; } .swiper-container { width:100%; height:100%; } .swiper-slide { display:flex; align-items:center; justify-content:center; } .slide-img { width:100%; height:100%; position:relative; } .slide-img img { max-width:100%; min-width:100%; position:absolute; left:50%; transform:translateX(-50%); } /* 20210730 mod start .mainText01 { position:absolute; top:62%; left:6vw; z-index:10; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; }*/ .mainText01 { position:absolute; bottom:30%; left:6vw; z-index:10; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; } .mainText01.textW { top:40%; bottom:auto; left:1vw; } /* 20210730 mod end */ .mainText01 > div { position:relative; } .mainText01 svg.mainText { width:30vw; display:block; } .swiper-slide-prev .mainText01 svg.mainText path { fill:rgba(0,0,0,0.8); } .swiper-slide-active .mainText01 svg.mainText path { fill:none; stroke:#000; stroke-linejoin:round; stroke-dasharray:500px; stroke-dashoffset:500px; animation:line-animation 6s 1s both; } /*20210803 add start */ .swiper-slide-active .mainText01.textW svg.mainText path { stroke:#fff; animation-name:line-animationW;} @keyframes line-animationW { 0% { stroke-dashoffset:500px; fill:rgba(255,255,255,0); stroke:rgba(255,255,255,1); } 60% { stroke:rgba(255,255,255,1); } 80% { stroke-dashoffset:0px; fill:rgba(255,255,255,1); } 100% { stroke-dashoffset:0px; fill:rgba(255,255,255,1); stroke:rgba(255,255,255,0); } } /*20210803 add end */ @keyframes line-animation { 0% { stroke-dashoffset:500px; fill:rgba(0,0,0,0); stroke:rgba(0,0,0,1); } 60% { stroke:rgba(0,0,0,1); } 80% { stroke-dashoffset:0px; fill:rgba(0,0,0,1); } 100% { stroke-dashoffset:0px; fill:rgba(0,0,0,1); stroke:rgba(0,0,0,0); } } #subSwiper { padding:2rem 0; background-color:#f1f1f1; z-index:10; } /* #mainContents { margin:2rem auto; width:90vw; max-width:1280px; display:flex; justify-content:space-between; align-items:flex-start; } #mainContents > .indexContent { color:#333; width:30%; } #mainContents > .indexContent div:first-child { margin-bottom:1.25rem; } #mainContents > .indexContent div:first-child > span { font-weight:bold; font-size:1.125rem; } #mainContents > .indexContent > img { width:100%; } #mainContents > .indexContent div:last-child > span { font-size:1rem; display:block; text-align:justify; } #mainContents > .indexContent div:last-child > span:first-child { font-weight:bold; } #mainContents > .indexContent div:last-child > span:last-child { line-height:1.5; } */ /* 20230227 add start */ #mainContents{ margin: 7rem auto 0;} .mainContentTitle{ margin:0 auto; width:90vw; max-width:1280px; line-height:0; padding: 2rem 0rem; color: #fff; background: #0e5ca7; text-align: center;} #mainContent { margin:1rem 0 0; width:90vw; max-width:1280px; display:flex; align-items:flex-start; } #mainContent > .indexContent { color:#333; width:100%; display: block !important; } #mainContent > .indexContent div:first-child { margin-bottom:1.25rem; } #mainContent > .indexContent div:first-child > span { font-weight:bold; font-size:1.05rem; } #mainContent > .indexContent > img { width:100%; height: 10rem; } #mainContent > .indexContent div:last-child > span { font-size:1rem; display:block; text-align:justify; } #mainContent > .indexContent div:last-child > span:first-child { font-weight:bold; } #mainContent > .indexContent div:last-child > span:last-child { line-height:1.5;} /* 20230227 add end */ #subContents { margin:2.5rem auto 5rem; display:flex; justify-content:space-between; width:90vw; max-width:1280px; } #subContentsL { width:70%; } /* 20220603 mod start #subContentsL #contentsAnchor { display:block; }*/ #subContentsL #contentsAnchor { display:block; margin-bottom:2rem; } /* 20220603 mod end */ #subContentsL #contentsAnchor:hover { opacity:0.75; } #subContentsL #contentsAnchor > img, #subContentsL #contentsAnchor > picture > img { width:100%; } /* 20220603 mod start #subContentsL #purpose { display:flex; justify-content:space-between; margin:1rem 0; } #subContentsL #purpose > a { width:47.5%; background-color:#777; display:flex; flex-direction:column; align-items:center; justify-content:space-between; } #subContentsL #purpose > a:hover { opacity:0.75; } #subContentsL #purpose > a > div { font-size:1.25rem; font-weight:bold; text-align:center; padding:0.5rem 0; color:#fff; } #subContentsL #purpose > a > img { width:calc(100% - 2rem); } #subContentsL #purpose > a > span { margin-top:1rem; width:100%; border:3px solid #777; background-color:#fff; color:#000; font-size:1.125rem; font-weight:bold; padding:0.25rem; display:flex; align-items:center; justify-content:flex-end; } #subContentsL #purpose > a > span::after { content:'\f144'; font-family:fontawesome; font-size:1.5rem; color:#f00; padding:0 0.5rem; }*/ /* #purpose { margin:2rem auto; width:90vw; max-width:1280px; display:flex; justify-content:space-between; align-items:flex-start; line-height:0; } .purposeAnchor { position:relative; overflow:hidden; } .purposeAnchor > .purposeImg { transition:0.3s; } .purposeAnchor:nth-child(2) > .purposeImg { transform-origin:top left; } .purposeAnchor:hover > .purposeImg { transform:scale(1.2); } .purposeTitle { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:92%; height:80%; background-color:#fffc; display:flex; justify-content:center; align-items:center; font-size:1.5rem; font-weight:bold; } .purposeTitle#school { color:#2c4813; } .purposeTitle#meeting { color:#0e5ca7; } .purposeTitle::before { content:''; display:block; width:1rem; height:1rem; position:absolute; top:0.5rem; right:0.5rem; border-top:3px solid #2c4813; border-right:3px solid #2c4813; } .purposeTitle#meeting:before { border-color:#0e5ca7; } */ /* 20220603 mod end */ /* 20230210 add start */ #purpose { margin:2rem auto 0; width:90vw; max-width:1280px; display:flex; flex-wrap: wrap; justify-content:space-between; align-items:flex-start; line-height:0;} .purposeAnchor { position:relative; overflow:hidden; width: calc(50% - 16px * 1 / 2);} .purposeAnchor:nth-child(n + 3) { margin-top:2rem; } .purposeAnchor:nth-child(n + 7) { display: none;} .purposeImg { height: 150px; width: 100%;} .purposeAnchor > .purposeImg { transition:0.3s; } .purposeAnchor:nth-child(2) > .purposeImg { transform-origin:top left; } .purposeAnchor:hover > .purposeImg { transform:scale(1.2); } .purposeTitle { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:92%; height:80%; background-color:#fffc; display:flex; justify-content:center; align-items:center; font-size:1.5rem; font-weight:bold; } /* 20230210 add end */ /* 20230210 add start */ #bannerContents { margin:7rem auto 0; width: 90vw; max-width:1280px; display: grid; grid-template-rows: 150px 150px; grid-template-columns: 50% 1fr;} .bannerAnchor { position:relative; overflow:hidden; } .bannerAnchor:nth-child(1) { grid-row: 1 / 3; grid-column: 1 / 2; margin-right: 1rem;} .bannerAnchor:nth-child(2) { grid-row: 1 / 2; grid-column: 2 / 3; margin-left: 1rem; margin-bottom: 1rem; } .bannerAnchor:nth-child(3) { grid-row: 3 / 2; grid-column: 2 / 3; margin-left: 1rem; margin-top: 1rem;} .bannerAnchor:nth-child(n + 4) { display: none;} .bannerImg { height: 100%; width: 100%;} .bannerAnchor > .bannerImg { transition:0.3s; } .bannerAnchor:hover > .bannerImg { transform:scale(1.2); } .bannerFilter { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:92%; height:80%; background-color:#fffc; display:flex; justify-content:center; align-items:center; font-size:1.5rem; font-weight:bold; } /* 20230210 add end */ /* 20230210 add start */ .infoContents { display: flex; flex-wrap: wrap; justify-content: space-between; } .infoContent{ width: calc((100% / 3) - 8px); margin-top: 2rem; } .infoContent:first-child { width: calc((100% / 3) * 2 - 4px); } .infoContent:nth-child(n + 9) { display: none;} .infoContent:last-child { margin-right: 0; } .infoItem{ position: relative; overflow: hidden; height: 200px; border: 1px solid #000;} .infoItem > .infoImg { transition:0.3s; } .infoItem:hover > .infoImg { transform:scale(1.2); } .infoImg { height:200px; width: 100%} .infoContent > .infoText { margin: 0.5rem 0 0 1rem; color: #000; } .infoContent > .infoText > span { content: ""; position: absolute; width: 8px; height: 8px; margin-top: 0.6rem; margin-left: 0.5rem; border-top: 1px solid #122f8d; border-right: 1px solid #122f8d; transform: rotate(45deg); } .infoContent2{ width: calc((100% / 3) - 8px); margin-top: 2rem; } .infoContent2:first-child { width: calc((100% / 3) * 2 - 4px); } .infoContent2:nth-child(n + 11) { display: none;} .infoContent2:last-child { margin-right: 0; } .infoContent2 > .infoText { margin: 0.5rem 0 0 1rem; color: #000; } .infoContent2 > .infoText > span { content: ""; position: absolute; width: 8px; height: 8px; margin-top: 0.6rem; margin-left: 0.5rem; border-top: 1px solid #122f8d; border-right: 1px solid #122f8d; transform: rotate(45deg); } /* 20230210 add end */ /* 20230210 add start */ .specialTopContent{ position: relative;} .specialTopContent > img{ width:100%; height:100vh; object-fit: cover; } .specialTopContent > h1{ text-align: center; width: 100%; font-size: 30; position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%);} .specialTopContentTextarea{ max-width: 300px; position: absolute; top: 80%; left: 50%; transform:translate(-50%, -50%); background: #fff; padding: 1rem 2rem; } .shareFields{ margin-top: 2rem; } .shareFields > p{ line-height: 1.4; } .inside{ width: 100%; } .specialTable,.specialRows,.specialRow,th{ border: solid 1px black; border-collapse: collapse; text-align: center; } .inside > .specialTable { width: 100%; background: #000; } td,th{ width: 5px; height: 5px; } th{ background: #0e5ca7; } .sss{ width: 15px !important; } /* コンテンツ１ */ .specialWrappers { margin-top: 2rem; } .specialList > h3 { margin-left: 10px; } /* .specialList > img { width: 100%; margin-top: 2rem;} */ .specialImgContent { margin-top: 2rem; width: 100%; max-height: 500px; } .specialImgContent > img { width: 100%; } .specialBlock { display: flex; width: 90vw !important; padding: 0 1rem;} /* .specialBlock > div { padding: 0rem; display: block;} */ .specialBlock > div { padding: 1rem 0 0 2rem; display: block;} .specialText{ width: 450px; border-bottom: #2e2e2e 2px solid; line-height: 1.4;} .specialTextarea{ margin-left: 3rem; width: 100%; border-bottom: #757575 2px dashed; line-height: 1.4;} /* コンテンツ２ */ .wrapperLists { display: flex; flex-wrap: wrap; justify-content: space-between; } .wrapperList{ width: calc((100% / 3) - 8px); margin-top: 2rem; } .wrapperList:first-child { width: 100%; height: 100%; line-height: 0;} .wrapperList:first-of-type > .wrapperBox { width: 100%; height: 100%;} .wrapperList:first-of-type > .wrapperBox > .wrapperImg { width: 100%; height: 500px;} .wrapperList:last-child { margin-right: 0; } .wrapperBox{ position: relative; overflow: hidden; height: 200px;} .wrapperBox > .wrapperImg { transition:0.3s; } .wrapperBox:hover > .wrapperImg { transform:scale(1.2); } .wrapperImg { height:200px; width: 100%} .wrapperList > .WrapperText { margin: 0.5rem 0 0 1rem; color: #000; line-height: 1.4; } /* コンテンツ３ */ .specialtopics{ display: flex; margin-top: 1rem; } .topicFirst{ width: calc((60%)); } .topicSecond{ width: calc((40%)); } .contentMargin { margin-left: 8px; } .topicSecond > img { width: 100%; max-height: 300px;} .topicSubtitle { font-weight: bold; } .topicSubtextarea { line-height: 1.4; } .partitionLists { display:flex; flex-wrap: wrap; justify-content: space-between; } .partitionList { position:relative; margin-top: 1rem; width: calc((100% / 5) - 4px);} .partitionList:last-child{ margin-right: auto; } .partitionItem { height: 200px; text-align: center; position: relative; overflow:hidden; } .partitionItem > .partitionItemImg { transition:0.3s; width: 100%; height: 100%; } .partitionItem:hover > .partitionItemImg { transform:scale(1.2); } /* .partitionItemImg::before { position:absolute; content:''; width:100%; height:100%; background-color:#000; opacity: 0.5; } */ .partitionItem > .partitionItemText { position:absolute; color: #fff; top:50%; left:50%; transform:translate(-50%, -50%); line-height: 1.2; } .partitionLink > p { margin-top: 1rem; line-height: 1.4; color: #000;} .shareFields2{ margin-top: 2rem; } .shareFields2 > p { line-height: 1.4; } .topFooter { margin-top: 2rem;} /* 20230210 add end */ /* 20230210 add start */ #underContents { padding:2rem; background-color: #9393be; display:flex; flex-wrap: wrap; justify-content:space-between; } .underContent { position:relative; overflow:hidden; margin-top: 1rem; width: calc((100% / 5) - 4px); height: 200px; } .underContent:last-child{ margin-right: 0; } .underContentItems { height: 200px; text-align: center; } .underContentImg { max-width: 600px; height: 100%; position: relative; overflow: hidden; } .underContentItems > .underContentImg { transition:0.3s; } .underContentItems:hover > .underContentImg { transform:scale(1.2); } .underContentImg::before { position:absolute; content:''; width:100%; height:100%; background-color:#000; opacity: 0.5; } .underContentItems > .underContentText { position:absolute; color: #fff; top:50%; left:50%; transform:translate(-50%, -50%); line-height: 1.2; } /* 20230210 add end */ .indexNews { margin-bottom:1rem; } .indexNews .newsTitle { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:bold; background-color:#009; border-radius:8px 8px 0 0; padding:0.5rem 0.75rem; line-height:1; } .indexNews .newsBox { border:1px solid #009; padding:0.5rem 2rem; } .indexNews .newsBox * { color:#000; } .indexNews .newsBox > div { margin-top:0.5rem; padding-bottom:0.25rem; border-bottom:1px solid #d2d2d2; display:flex; } .indexNews .newsBox > div > span { padding-right:2rem; font-weight:bold; } .indexNews .newsBox > div > a { text-decoration:underline; } .indexNews .newsBox > a { display:flex; justify-content:flex-end; margin-top:0.25rem; } .indexNews .newsBox > a::before { content:'\f101'; font-family:fontawesome; padding-right:0.5rem; } #subContentsR { width:25%; } .indexSidebar { width:100%; display:flex; flex-direction:column; margin-bottom:1.5rem; border:1px solid #999; } .indexSidebar .indexSideCom { padding:1rem 2.5%; display:flex; flex-direction:column; align-items:flex-start; } .indexSidebar .indexSideCom div { font-weight:bold; font-size:1rem; line-height:1.5; } .indexSidebar .indexSideCom span { font-size:1rem; line-height:1.5; } .indexSidebar .indexSideCom span > a { color:#000; text-decoration:underline; } .indexSidebar .indexSideTitle { color:#fff; font-size:1.125rem; background-color:#009; font-weight:bold; text-align:center; padding:0.25rem 0; } .indexSidebar > *:nth-child(n+2):not(:last-child) { border-bottom:1px solid #999; } .indexSidebar > a.indexSideOffice, .indexSidebar > a.indexSideShowroom { display:flex; align-items:center; justify-content:center; } .indexSidebar > a.indexSideOffice > img, .indexSidebar > a.indexSideShowroom > img{ width:95%; padding:1rem 2.5%; } .indexSidebar .usefulAnchor li { border-bottom:1px solid #999; padding:0.25rem 0 0.25rem 1rem; } .indexSidebar .usefulAnchor li:hover { background-color:#fff8c7; } .indexSidebar .usefulAnchor li:last-child { border-bottom:none; } .indexSidebar .usefulAnchor li a { color:#000; font-size:1rem; } .indexSidebar .usefulAnchor li a:before { content:'\f101'; font-family:fontawesome; padding-right:0.5rem; } .relationAnchor { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #999; padding:0.25rem; } .relationAnchor:last-child { border-bottom:none; } .relationAnchor > img { border:1px solid #999; } .relationAnchor > div { width:75%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; } .relationAnchor > div > span:first-child { color:#009; font-weight:bold; } .relationAnchor > div > span { color:#000; line-height:1.5; } /* 20210408 new index add end */ /* 20230210 add start */ #idxFootContArea { width:100%;} .idxInfoArea { width:90vw; max-width:1280px; margin:0rem auto; } .idxInfoTitle { display:flex; justify-content:space-between; align-items:center; font-size:1.25rem; font-weight:bold; } .idxInfoTitle * { background-color:#0e5ca7;color:#fff; margin-top: 7rem; } .idxInfoTitle > p { padding:0.75rem 0; position:relative; width:16rem; text-align:center; } .idxInfoTitle > p::before { content:''; width:1000px; height:100%; position:absolute; top:0; right:100%; background-color:#0e5ca7; } .idxInfoTitle > p::after { content:''; width:0; height:0; position:absolute; top:0; left:100%; border-color:transparent transparent transparent #0e5ca7; border-style:solid; border-width:2rem 0 2rem 1.75rem; } .idxInfoTitle > a { padding:0.25rem 2rem; display:flex; align-items:center; justify-content:space-between; } .idxInfoTitle > a:hover { color:#fff; } .idxInfoTitle > a::after { content:'\f105'; font-family:fontawesome; padding-left:2rem; } .idxInfoList { margin:2rem auto 0; } /* 20230210 add start */ #idxInfoBannerArea { width:90%; max-width:1280px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; margin:2rem 0 8rem; } #idxInfoBannerArea::after { content:''; width:32%; display:block; } .idxInfoBanner { width:32%; display:flex;justify-content:space-between; align-items:flex-start; } .idxInfoBanner:nth-child(n+4) { margin-top:1.5rem; } .idxInfoBannerBox { display:flex; flex-wrap:wrap; line-height:1.5; margin-left:0.75rem; } .idxInfoBannerBox > span { width:100%; } .idxInfoBannerBox > span:first-child { color:#0e5ca7; font-weight:bold; } .idxInfoBannerBox > span:last-child { color:#000; } /* 20220224 add end */ /* 製品一覧・詳細共通　デザイン変更後 ---------------------------------------------------------------------------*/ .wrapper { width: 100%; } .wrapper * { box-sizing:border-box; } .wrapper .content { display: -ms-flex; display: flex; justify-content: center; -ms-align-items: flex-start; align-items: flex-start; } .wrapper .content .contentL{ display: -ms-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; margin-right:1.25rem; } .wrapper .content .contentL span{ font-size:0.75rem; color: #fff; font-weight: bold; background-color: #115ba4; padding: 0.6rem 1rem; white-space:nowrap; } .wrapper #detail.content .contentL span, .wrapper #related.content .contentL span, .wrapper #detail.content .contentR span, .wrapper #related.content .contentR span { padding:0.6rem 2rem; } .wrapper .content .contentL::after{ content:''; display: block; width: 0; height: 0; border-top: 1.3rem solid transparent; border-bottom: 1.3rem solid transparent; border-left: 1rem solid #115ba4; } .wrapper .content .contentR{ display: -ms-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; margin-left:1.25rem; visibility: hidden; } .wrapper .content .contentR span{ color: #fff; font-weight: bold; background-color: #115ba4; padding: 0.6rem 1rem; font-size:0.75rem; } .wrapper .content .contentR::before{ content:''; display: block; width: 0; height: 0; border-top: 1.3rem solid transparent; border-bottom: 1.3rem solid transparent; border-right: 1rem solid #115ba4; } .wrapper .content .contentC{ font-size: 1rem; width:var(--maxWidth); /*margin: -0.4rem 0;*/ padding: 0 1.75rem; } /* 製品詳細　デザイン変更後 ---------------------------------------------------------------------------*/ #itemTitleBox { width: var(--maxWidth); margin: 10rem auto 0; display: -ms-flex; display: flex; justify-content: space-between; -ms-align-items: center; align-items: center; padding: 0.75rem 2rem; background-color: #115ba4; border-radius:5px; } #itemTitleBox h1 { font-size: 1.125rem; color: #fff; font-weight: bold; } #itemTitleBox span.isGreen { background-color: #319f2d; color: #fff; padding: 0.1rem 1rem; font-size: 0.875rem; font-weight: bold; letter-spacing: 1px; } #itemImage{ display:-ms-flex; display:flex; justify-content:space-around; -ms-align-items:flex-start; align-items:flex-start; margin:4rem auto 0; width:100%; max-width:var(--maxWidth); } #itemImage > img.isShowroom { width:7rem; margin-left:2rem; } #itemImage > img:nth-child(1).isShowroom { visibility:hidden; } .content#description{ margin-top: 6rem; } .content#detail{ margin-top: 4.5rem; } .itemDetail { padding: 0.25rem 0.5rem; border-bottom: 1px dotted #000; display:flex; justify-content:space-between; } /* 20201028 add */ .itemDetail a { color:#000; } .itemDetail a:hover { color:#122f8d; } .itemDetail a::after { content:'\f14c'; font-family:fontawesome; padding-right:0.75rem; } /* 20201028 add */ .itemDetail:not(:first-child) { margin-top: 1rem; } .itemDetail > span:first-child { width: 15%; display: inline-block; } .itemDetail > span:last-child { margin-left: 2rem; width:80%; } #itemLinkArea { width: var(--maxWidth); margin: 2.5rem auto 0; } #itemLinkArea a{ text-decoration:none; } .itemLinkRow{ display: -ms-flex; display: flex; justify-content: space-around; -ms-align-items: center; align-items: center; padding: 1rem 0; background-color:#115ba4; border-radius:10px; } .itemLinkRow > span{ border-left: 1px solid #fff; height:1.5rem; } .itemLinkRow > a::before{ content:'\f08e'; font-family:fontawesome; visibility: hidden; } .itemLinkRow > a:not(first-child)::after{ content:'\f08e'; font-family:fontawesome; } /* 20210329 mod start .itemLinkRow > div { color: #fff; font-size: 1rem; font-weight: bold; width: 35%; text-align: center; letter-spacing: 2px; }*/ .itemLinkRow > div { color: #fff; font-size: 1rem; font-weight: bold; width: 40%; text-align: center; letter-spacing: 2px; } /* 20210329 mod end */ .itemLinkRow > a{ color: #fff; font-size: 1rem; font-weight: bold; display: -ms-flex; display: flex; justify-content: space-between; -ms-align-items: center; align-items: center; letter-spacing: 2px; } /* 20210329 mod start .itemLinkRow:first-child > a{ width: 35%; }*/ .itemLinkRow:first-child > a{ width: 40%; } /* 20210329 mod end */ .itemLinkRow:last-child{ margin-top: 10px; padding: 1rem 1.5rem; } .itemLinkRow:last-child > div, .itemLinkRow:last-child > a{ width: 25%; } .itemLinkRow div:not(.itemPrice) { color:#c5c5c5; } #itemSeriesArea { width:90%; max-width:var(--maxWidth); margin:2.5rem auto 0; border:3px solid #115ba4; border-radius:10px; padding:1rem 1rem 2rem; } #itemSeriesHeader { display:flex; flex-wrap:wrap; padding-bottom:0.25rem; border-bottom:1px dotted #000; } .itmeSeriesTitle { text-indent:1rem; width:40% } .itmeSeriesTitle:last-child { width:20%; } .itemSeriesRow { display:flex; flex-wrap:wrap; padding-bottom:0.25rem; border-bottom:1px dotted #000; } .itemSeriesRow > div { text-indent:1rem; width:40%; margin-top:1rem; } .itemSeriesRow > div:last-child { width:20%; } .itemSeriesRow > div > a { color:#000; } .itemSeriesRow > div > a::after { content:'\f0c1'; font-family:fontawesome; padding-left:0.5rem; } .itemSeriesRow > div > a.olk::after { content:'\f08e';} /* 製品一覧　デザイン変更後 ---------------------------------------------------------------------------*/ /* 20220603 mod start */ #productMain *{ box-sizing:border-box; font-weight:bold; line-height:2; } #productMain{ width:100%; margin-bottom:6rem; } #productMain a{ text-decoration:none; } #porductImg{ position:relative; line-height:0; } #porductImg > img{ max-width:100%; overflow:hidden; } #porductImgCont{ display:flex; flex-direction:column; justify-content:space-between; align-items:center; position:absolute; background-color:#fffc; color:#244594; width:45%; top:50%; left:50%; transform:translate(-50%, -40%); padding:2rem 0; } /*#productMain *{ box-sizing:border-box; } #productMain{ width:100%; max-width:var(--maxWidth); margin-top:1.25rem; margin-bottom:6rem; padding-top:5rem; }*/ /*#porductImg{ position:relative; display:-ms-flex; display:flex; align-items:flex-start; } #porductImg::before{ content:''; position:absolute; width:100%; height:100%; top:0; left:0; display:block; background-color:rgba(0,0,0,0.3); z-index:1; }*/ /*#porductImgCont{ display:-ms-flex; display:flex; -ms-flex-direction:column; flex-direction:column; justify-content:space-between; -ms-align-items:flex-start; align-items:flex-start; position:absolute; top:1rem; left:1rem; width:calc(100% - 2rem); height:calc(100% - 2rem); color:#fff; padding:4.5rem 3.5rem; border:1px solid #fff; z-index:10; } /* 20220603 mod end */ #porductImgCont h1{ font-size:1.75rem; line-height:1; } /* 20220603 mod start */ #porductImgCont > span { display:block; width:1.5rem; border-bottom:2px solid #244594; margin:3rem 0 2rem; } #porductImgCont > div { font-size:1.125rem; letter-spacing:2px; } /* 20220603 mod end */ #productImgIcon{ background-color:#fff; font-size:0.5rem; font-weight:bold; color:#244594; line-height:1; letter-spacing:-1px; padding:0.3rem 0.5rem 0.2rem; } #porductImgCont h2{ font-size:1.125rem; line-height:1; padding-bottom:0.75rem; } #porductImgCont div div{ font-size:0.875rem; font-weight:bold; } /* 20220608 mod start */ #productCateAnchor{ width:100%; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-direction:column; } #productCond { width:100%; max-width:var(--maxWidth); margin:0 auto; } #productText { width:100%; margin-bottom:2rem; padding:1rem 0; background-color:#254494; } .freeText { display:flex; justify-content:space-between; align-items:center; border-bottom: 2px solid #254494; padding:0 0.5rem; width:100%; max-width:var(--maxWidth); margin:0 auto; } .freeText > h2 { color:#fff; } #freeText { width:70%; margin-left:1rem; padding:0.15rem 0.5rem; background-color:#fff; } #freeSeach { background-color:#fff; color:#254494; padding:0.2rem 1.5rem; letter-spacing:1rem; text-indent:1rem; } /*#productCateAnchor{ width:100%; max-width:var(--maxWidth); margin:1.5rem auto 0; display:-ms-flex; display:flex; justify-content:space-between; -ms-align-items:center; align-items:center; flex-direction:column; }*/ /*#productCond { width:100%; }*/ /*#productText { width:100%; padding-bottom:1.25rem; }*/ /*.freeText { display:flex; justify-content:space-between; align-items:center; border-bottom: 2px solid #254494; padding:0 0.5rem 1rem; }*/ /*#freeText { width:60%; border:1px solid #254494; padding:0.15rem 0.5rem; } #freeSeach { color:#fff; background-color:#254494; padding:0.2rem 1.5rem; letter-spacing:1rem; text-indent:1rem; border-radius:30px; outline:none; }*/ /* 20220608 mod end */ .condCate { border-bottom:2px solid #254494; } .condCate:not(:first-child) { margin-top:1.25rem; } .condCateTitle { font-size:1.125rem; display:flex; justify-content:space-between; align-items:center; padding:0 0.5rem; letter-spacing:1px; cursor:pointer; } .condCateTitle::after { content:'\f13a'; font-family:fontawesome; font-size:1.25rem; color:#254494; transition:0.8s; } .condCateTitle.active::after { transform:rotate3d(1, 0, 0, 540deg); } .condRow { display:flex; border-bottom:1px dotted #333; padding-bottom:0.25rem; margin-bottom:0.75rem; } .condRow:last-child { border:none; } .condTitle { font-size:0.875rem; font-weight:normal; text-indent:1rem; width:15%; line-height:1.5; } .productCond { width:85%; } .productCond > span { display:inline-flex; align-items:center; line-height:1.5; padding-right:2rem; } .productCond > span label { padding-left:0.3rem; } #condButtonArea { margin-top:2.5rem; display:flex; justify-content:center; } #condButtonArea > button { color:#fff; background-color:#254494; margin:0 1rem; padding:0.5rem 3rem; letter-spacing:1rem; text-indent:1rem; border-radius:30px; outline:none; } #condButtonArea > button:hover { transition:0.3s all ease; background-color:rgba(37,68,148,0.7); } #condButtonArea > button[type="submit"]::before { content:'\f002'; font-family:fontawesome; } #spinner { position:fixed; top:0; bottom:0; left:0; right:0; z-index:100; background-color:rgba(0, 0, 0, 0.75); transition:all 0.3s ease; } #spinner > i { position:fixed; top:45%; left:48%; color:#fff; } .flipBox { display:none; } /* floatAnchor */ #floatAnchor { position: fixed; bottom:20%; right: 1rem; color: #fff; font-size: 1.125rem; writing-mode: vertical-lr; -ms-writing-mode: tb-rl; padding: 1.5rem 0.5rem; background-color: #254594; display: flex; align-items: center; z-index: 10; transition: 0.3s; } #floatAnchor::after { content: '\f078'; font-family: fontawesome; padding-top: 1rem; } /* floatAnchor */ /* 20221108 mod start */ #categoryAnchor{ margin:6rem auto 0; display:flex; justify-content:space-between; align-items:stretch; flex-wrap:wrap; width:100%; max-width:var(--maxWidth); } .cateBox{ width:calc((100% - 2.5rem) / 2); display:-ms-flex; display:flex; -ms-flex-direction:column; flex-direction:column; justify-content:flex-start; align-items:center; color:#000; } .cateBox:nth-child(n+3){ margin-top:5rem; } /* 20221108 mod end */ .catBoxTitle{ width:100%; margin-bottom:2rem; display:-ms-flex; display:flex; justify-content:center; -ms-align-items:center; align-items:center; border-bottom:1px solid #000; padding-bottom:0.5rem; } .catBoxTitle > h1{ font-size:1.125rem; font-weight:bold; padding-right:2rem; line-height:1; } .catBoxTitle > span{ padding:0.25rem 1rem; color:#fff; font-size:0.75rem; border-radius:1rem; white-space:nowrap; } .catBoxTitle > span:not(:last-child){ margin-right:0.5rem; } .catBoxTitle > span.tag_ac{ background-color:#e1a400; } .catBoxTitle > span.tag_sc{ background-color:#0099ab; } .catBoxTitle > span.tag_wb{ background-color:#244594; } .catBoxTitle > span.tag_bull{ background-color:#8e5e00; } .catBoxTitle > span.tag_db{ background-color:#8e0057; } .catBoxTitle > span.tag_bb{ background-color:#2c4813; } /* 20221108 add start */ .cateCont { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; flex-wrap: wrap; width:100%; height:100%; } /* 20221108 add end */ .cateImg { height:16.875rem; -ms-display:flex; display:flex; justify-content:center; -ms-align-items:center; align-items:center; margin-bottom:2.75rem; position:relative; } .cateImg > a { height:100%; } .cateImg > img{ max-height:100%; } /* 20211207 add start */ .cateImg > img.listImg { max-height:100%; position:absolute; display:none; } .cateImg > img.listImg.active { display:block; } /* 20221108 mod start */ .cateThumbs { display:flex; justify-content:flex-start; align-items:center; margin-bottom:1rem; width:100%; } .cateThumbBox { width:18%; aspect-ratio:1; overflow:hidden; outline:1px solid #ccc; display:flex; align-items:center; justify-content:center; } .cateThumbBox.active { outline:2px solid#0e5ca7} .cateThumbBox:not(:first-child) { margin-left:2%; } .cateThumbBox > img { max-width:100%; } /* 20221108 mod start */ /* 20211207 add end */ /* 20221108 mod start */ .cateLead { font-size:1.125rem; font-weight:bold; padding-bottom:2rem; line-height:1; width:100%; text-align:justify; line-height:1.5; color:#000; } .cateLinks { width:100%; font-size:1rem; font-weight: normal; line-height:1.5; padding: 0 1rem; /*word-break: keep-all;*/ text-align: justify; margin-bottom:2rem; color:#000; } .cateLead:hover, .cateLinks:hover { color:#000; } /* 20221108 mod end */ .cateLinks > span:not(:last-child)::after { content:'　/　'; } /* 20221108 mod start */ .cateAnchor { width: 100%; -ms-display: flex; display: flex; justify-content: space-around; -ms-align-items: center; align-items: center; color: #fff; font-size: 1.125rem; font-weight:bold; border-radius: 10px; background-color: #244594; padding:1rem 0; margin-top:auto; } .cateAnchor.ca2{ margin-top:1.75rem; } /* 20221108 mod start */ .cateAnchor:hover{ transition:0.3s all ease; color:#fff; background-color: #115ba4; } .cateAnchor::before, .cateAnchor::after { content: '\f0a9'; font-family: fontawesome; font-size: 1.75rem; } .cateAnchor::before { visibility: hidden; } /* カテゴリ別製品一覧　デザイン変更後 ---------------------------------------------------------------------------*/ #porductImg.archive::before{ background-color:transparent; } .archive #porductImgCont{ color:#244594;; border-color:#244594; } .archive #productImgIcon{ color:#fff;; background-color:#244594; } /* 20210125 mod start */ .productSummary { width:90%; background-color: #115ba4; margin-top:auto; } .productSummaryRow{ color:#fff; font-size:1rem; border-bottom:1px solid #fff; display:flex; } .productSummaryRow > span:first-child{ text-indent:1rem; width:30%; display:inline-block; } .productSummaryRow > span:last-child{ width:80%; } /* 20210125 mod end */ /* 製品一覧・詳細共通テンプレート　デザイン変更後 ---------------------------------------------------------------------------*/ #related{ margin-top: 6rem; } #related a{ text-decoration:none; } #pickup{ margin-top: 4.375rem; margin-bottom:6rem; } #pickup a{ text-decoration:none; } #pickup a:hover{ opacity:0.7; } .wrapper .content#related .contentC, .wrapper .content#pickup .contentC{ display: -ms-flex; display:flex; flex-wrap:wrap; justify-content:space-between; padding:0; } /* 20221108 mod start */ .relatedBox { width:calc((var(--maxWidth) - 2.75rem) / 2); display:-ms-flex; display:flex; -ms-flex-direction: column; flex-direction: column; -ms-align-items:center; align-items:center; justify-content:flex-start; } /* 20221108 mod start */ .relatedBox:nth-child(n+3) { margin-top:4.25rem; } .relatedTop{ width:100%; display: -ms-flex; display:flex; justify-content:center; -ms-align-items:center; align-items:center; padding-bottom:0.5rem; border-bottom:1px solid #000; } .relatedTop > span:first-child{ font-size:1.125rem; font-weight:bold; } .relatedTop > span:last-child{ color:#fff; font-size:0.75rem; padding:0.25rem 1rem; background-color:#244594; border-radius:3rem; margin-left:2rem; min-width:7.5rem; text-align:center; } /* 20221108 mod start */ .relatedImg { -ms-display:flex; display:flex; -ms-flex-direction: column; flex-direction: column; -ms-align-items:center; align-items:center; margin-top:3rem; color:#000; } .relatedImg:hover { color:#000; } /* 20221108 mod start */ .relatedImg > img{ height:16.875rem; } /* 20221108 mod start */ .relatedImg > h1{ font-size:1.125rem; margin-top:2.25rem; margin-bottom:2rem; } .relatedAnchor{ width:100%; -ms-display:flex; display:flex; justify-content:space-around; -ms-align-items:center; align-items:center; color:#fff; font-size:1.125rem; border-radius:10px; background-color:#115ba4; margin-top:auto; padding:1rem 0; } /* 20221108 mod start */ .relatedAnchor::before, .relatedAnchor::after{ content:'\f0a9'; font-family:fontawesome; font-size:1.75rem; } .relatedAnchor::before{ visibility:hidden; } .relatedAnchor:hover{ background-color:#417cb6; color:#fff; } .pickupBox{ width:calc((100% - 10px) / 2); border:0.5rem solid #244594; display:-ms-flex; display:flex; justify-content:space-between; -ms-align-items:center; align-items:center; padding:0.75rem; } .pickupBox:nth-child(n+3){ margin-top:10px; } .pickupBox > img { max-width:137px; max-height:137px; flex:0 0 auto; } .pickup { height:100%; margin-left:1.5rem; display:-ms-flex; display:flex; -ms-flex-direction: column; flex-direction: column; justify-content:space-between; -ms-align-items:flex-start; align-items:flex-start; width:293.5px; } .pickup > img { max-width:100%; } span.pickup, .pickupTitle, .pickupCont { color:#244594; font-size:0.875rem; font-weight:bold; line-height:1.5; max-width:100%; } .pickupTitle { padding:0.5rem 0; } span.pickupLogo{ font-size:1.5rem; color:#244594; font-weight:bold; line-height:1; } /* 20211014 add start */ #productImgs { position:relative; line-height:0; max-width:100%; } .productImg { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:none; ; max-width:100%; } .productImg.active { display:inline; } #productImg { visibility:hidden; position:static !important; width:100%; } #productThumbs { width:var(--maxWidth); margin:2rem auto 0; display:flex; justify-content:flex-start; align-items:center; } .imageThum { max-width:calc(100% / 6); border:1px solid #ccc; display:inline-block; position:relative; } .imageThum.active::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; outline:3px solid #0e5ca7; transition:0.3s all ease; } .imageThum:nth-child(-n+4) { margin-right:calc(100% / 6 / 4); } .imageThum > img { max-width:100%; } #imgPrev { position:absolute; top:50%; left:0; transform:translate(-200%, -50%); display:none; z-index:1; } #imgPrev::before { content:'\f053'; font-family:fontawesome; color:#fff; background-color:#0e5ca7; border-radius:50%; display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; text-indent:-0.1rem } #imgNext { position:absolute; top:50%; right:0; transform:translate(200%, -50%); z-index:1; } #imgNext::before { content:'\f054'; font-family:fontawesome; color:#fff; background-color:#0e5ca7; border-radius:50%; display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; text-indent:0.1rem } /* 20211014 add end */ /* アクリルボード 20201120 add*/ #acryHeadAnchor { position:absolute; top:2rem; right:1.5rem; z-index:10; background-color:rgba(0, 0, 0, 0.8); padding:0.5rem 1.25rem; color:#fff; border-radius:10px; } #acryHeadAnchor * { font-size:1.125rem; } #acryHeadAnchor > a { display:inline-flex; align-items:center; color:#fff; } #acryHeadAnchor > a::after { content:'\f0da'; font-family:fontawesome; padding-left:0.5rem; } #acryHeadAnchor > span { padding:0 1rem; } #mainVis { position:relative; margin-bottom:50px; margin-top:2.5rem; } /*#mainVis { position:relative; margin-bottom:50px; }*/ #mainVis.acrylic { background-image:url('images/main-acrylic.jpg'); background-size:cover; background-position:center top; background-repeat:no-repeat; } #mainVis.acrylic > img:first-child { visibility:hidden; width:100%; height:auto; } #mainVis.acrylic > #mainVisImg { position:absolute; top:19%; left:50%; transform:translateX(-50%); width:700px; } #mainVis.acrylic > #mainVisImg > img { filter:drop-shadow(0px 0px 8px #000) drop-shadow(0px 0px 8px #000); } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { #mainVis.acrylic > #mainVisImg { background-image:url('./images/leadText.png'); background-size:contain; width:720px; height:85px; top:17%; } #mainVis.acrylic > #mainVisImg > img { visibility:hidden; } } /*#mainVis.acrylic > img:nth-child(2) { filter:drop-shadow(0px 0px 8px #000) drop-shadow(0px 0px 8px #000); position:absolute; top:19%; left:50%; transform:translateX(-50%); max-width:700px; }*/ #topBox { display:flex; justify-content:center; align-items:center; flex-direction:column; width:95%; max-width:var(--maxWidth); background-color:rgba(0, 0, 0, 0.7); position:absolute; bottom:17.5%; left:50%; transform:translateX(-50%); font-size:1.05rem; } #topBox * { color:#fff; } #topBox > div:first-child { width:40%; display:flex; justify-content:center; flex-direction:column; text-align:center; } #topBox > div > h1 { padding-top:1.5rem; margin-bottom:-0.5rem; font-size:1.5rem; } #topBox > div > span { background-color:#000; line-height:1.5; font-size:0.75rem; font-weight:bold; } #topBox > span { padding:1.5rem 0px; font-weight:bold; } #mainAnchor { width:95%; } #mainAnchor > ul{ display:flex; justify-content:space-between; align-items:center; border-top:2px solid #fff; border-bottom:1px solid #fff; padding:0.5rem; margin-bottom:2rem; } #mainAnchor li { flex:1; text-align:center; } #mainAnchor a::after{ content:'\f0d7'; font-family:fontawesome; padding-left:0.5rem; } .acrylicBox { margin-bottom:50px; position:relative; } .acrylicBox:last-child { margin-bottom:75px; } .acrylicTitle.hidden { margin-bottom:50px; visibility:hidden; position:inherit; } .acrylicTitle { font-size:1.5rem; font-weight:normal; color:#fff; background-color:#000; padding:0.25rem 0 0 1rem; margin-bottom:50px; position:absolute; top:0; left:50%; transform:translateX(-50%); width:104%; } .acrylicSubTitle { font-size:1.125rem; font-weight:normal; color:#fff; background-color:#000; padding:0.25rem 0 0 1rem; margin:42px 0 30px; } .acryImgs { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; margin:50px 0 45px; } .acryImgs > p { width:100%; font-size:1.125rem; margin-top:2rem; } .acryImgs > img { width:61%; } .acrySubImgs { display:flex; justify-content:center; align-items:flex-end; } .acrySubImgs > img { max-width:33%; } .acryImgs > div { width:38%; text-align:center; } .acrylicBox > table { width:100%; border-collapse:collapse; text-align:center; margin-top:30px; } .acrylicBox > table.mt4 { margin-top:4rem; } .acrylicBox > table caption { caption-side:bottom; text-align:left; } .acrylicBox > table td { border:1px solid #000; padding:0.5rem 0; } .acrylicBox > table.c2 td { width:80%; } .acrylicBox > table.c2 td:last-child { text-align:left; padding-left:2rem; } .acrylicBox > table.c3 td { width:40%; } .acrylicBox > table td:first-child { width:20%; } .actiboImgs { display:flex; justify-content:space-around; align-items:center; margin-top:4rem; } .actiboImgs > div:first-child { display:flex; justify-content:space-between; align-items:flex-start; width:40%; } .actiboImgs > div:first-child span { margin-top:2rem; background-color:#000; color:#fff; padding:0.125rem 1.5rem; } .actiboImgs > div:last-child { display:flex; justify-content:center; align-items:flex-start; width:20%; } #actibo > a { position:absolute; top:0.7rem; right:1.5rem; z-index:1; display:flex; align-items:center; color:#000; font-size:1.125rem; background-color:#e3e3e3; line-height:1.5; padding:0 1rem; border-radius:2px; } #actibo > a::after { content:'\f0da'; font-family:fontawesome; padding-left:1rem; font-size:1.25rem; } /* アクリルボード 20201120 add*/ /* 黒板貼替 20201120 add*/ .repasteHeadAnchor { background-color:#536653 !important; } .repasteHeadAnchor > a:not(:last-child) { margin-right:1rem; } .repasteHeadAnchor > a:not(:last-child)::after { content:'\f107' !important; } .repasteHeadAnchor > a:last-child { margin-right:0; color:#536653 !important; background-color:#fff; border-radius:1rem; padding:0.1rem 0.5rem 0 0.75rem; } .repasteHeadAnchor > a:last-child::after { content:'' !important; } #mainVis.repaste { background-image:url('images/main-repaste.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center top; } #mainVis.repaste > img { width:100%; visibility:hidden; } #rebirth { position:absolute; top:20%; left:50%; transform:translateX(-50%); width:40%; height:100px; max-width:400px; display:flex; justify-content:center; align-items:center; } #rebirth::after { content:''; display:block; width:0; height:0; border-style:solid; border-width:50px 0 50px 50px; border-color:transparent transparent transparent #fff; } #rebirth > div { width:100%; height:100%; background-color:#fff; margin:0 auto; padding-top:0.5rem; display:flex; justify-content:space-evenly; align-items:center; flex-direction:column; } #rebirth > div > img { width:80%; } #rebirth > div > p { width:80%; color:#4c5b4b; display:flex; justify-content:space-between; align-items:center; } #mainLead { position:absolute; top:50%; left:50%; transform:translateX(-50%); max-width:550px; } #mainLead > p { font-size:1.25rem; color:#fff; padding-top:1rem; text-align:justify; } #repasteMC { width:1050px; max-width:100%; margin:3.25rem auto 4rem; background-color:#4c5b4b; display:flex; justify-content:flex-start; align-items:center; } #repasteMC > img {display:inline-block; margin:1.5rem 2.75rem; } #repasteMC > span { color:#fff; font-size:1.5rem; font-weight:bold; } .repasteMain { width:95%; max-width:var(--maxWidth); margin:0 auto; } .repasteText { display:flex; justify-content:flex-start; align-items:center; } .repasteText:not(:nth-child(1)) { margin-top:1.5rem; } .repasteText > span { margin-left:2rem; font-size:1.1255rem; } .repasteMain > img { max-width:100%; } .repasteBlock { width:2rem; height:2rem; background-color:#4c5b4b; position:relative; margin-top:-0.5rem; } .repasteBlock::after { content:''; display:block; width:0; height:0; border-style:solid; border-width:1rem 0 1rem 1rem; border-color:transparent transparent transparent #4c5b4b; position:absolute; top:0; left:100%; } .repasteBlock.l2 { margin-top:-2.75rem; } #repasteProc { background-color:#4c5b4b; margin:4rem 0 3rem; } #repasteProc > article { display:flex; flex-direction:column; justify-content:space-around; align-items:flex-start; width:100%; max-width:var(--maxWidth); margin:0 auto; padding:2rem 0; } #repasteProc > article > h1 { color:#4c5b4b; font-weight:bold; font-size:1.25rem; background-color:#fff; border-radius:3rem; padding:0.25rem 3rem; margin-bottom:2rem; } #repasteProc > article > section { display:flex; justify-content:space-between; align-items:center; width:100%; } .repasteProcBox { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; } .repasteProcBox > span { position:absolute; top:0.5rem; left:0.75rem; display:flex; justify-content:center; align-items:center; border-radius:50%; background-color:#4c5b4b; padding:0.5rem 0.75rem; color:#fff; font-weight:bold; font-size:1.25rem; line-height:1; } .repasteProcBox > p { font-size:1.25rem; color:#fff; margin-top:0.75rem; } table#repaste { width:100%; border-collapse:collapse; border:1px solid #4c5b4b; font-size:1.125rem; } table#repaste th { border-bottom:1px solid #4c5b4b; padding:0.75rem; } table#repaste td { padding:2rem 2.5rem; font-weight:bold; text-align:justify; } #repasteRF { width:1050px; max-width:100%; margin:4rem auto 3rem; background-color:#34752f; display:flex; justify-content:flex-start; align-items:center; } #repasteRF > img {display:inline-block; margin:1.5rem 2.75rem; width:9rem; } #repasteRF > span { color:#fff; font-size:1.5rem; font-weight:bold; line-height:1.5; padding:2rem 0; } .refaceText { display:flex; justify-content:flex-start; align-items:center; margin-bottom:1.5rem; } .refaceText > span { margin-left:2rem; font-size:1.1255rem; } .refaceBlock { width:2rem; height:2rem; background-color:#34752f; position:relative; margin-top:-0.5rem; } .refaceBlock.l2 { margin-top:-2.75rem; } .refaceBlock::after { content:''; display:block; width:0; height:0; border-style:solid; border-width:1rem 0 1rem 1rem; border-color:transparent transparent transparent #34752f; position:absolute; top:0; left:100%; } .refaceBox { position:relative; display:flex; align-items:center; } .refaceBox > span:first-child { position:absolute; top:1rem; left:1.5rem; font-size:1.25rem; font-weight:bold; padding:0.25rem 2.25rem; border-radius:2rem; color:#fff; background-color:#34752f; } .refaceBox > img:first-child { width:50%; } .refaceBox > span:last-child { width:50%; height:100px; color:#fff; font-size:1.125rem; line-height:1.5; padding:0 2.75rem; background-color:#34752f; display:flex; align-items:center; text-align:justify; margin-top:-6rem; } .refaceBoxDown { display:flex; width:100%; margin:0.75rem 0; } .refaceBoxDown > div { width:50%; display:flex; align-items:center; justify-content:center; } .refaceBoxDown > div > span { width:0; height:0; border-style:solid; border-width: 1.5rem 1rem 0 1rem; border-color:#34752f transparent transparent transparent; } #repasteDiag { width:1050px; max-width:100%; margin:4rem auto 3rem; background-color:#099600; display:flex; justify-content:flex-start; align-items:center; } #repasteDiag > h2 { color:#fff; padding:0.25rem 2.75rem 0.1rem; font-size:1.5rem; letter-spacing:3px; } #repasteDiag > span { color:#099600; font-size:1.125rem; font-weight:bold; background-color:#fff; padding:0.15rem 2rem 0; } .diagBox { display:flex; justify-content:space-around; align-items:flex-start; width:100%; } .diagBox .diagImgBox { display:flex; justify-content:space-between; align-items:center; flex-direction:column; } .diagBox .diagImgBox > span { font-size:1.125rem; padding-top:1rem; } #diagLead { width:100%; background-color:#099600; color:#fff; font-size:1.25rem; font-weight:bold; text-align:center; padding:0.5rem 0; border-radius:2rem; margin-top:2rem; } #diagCaution { font-size:1rem; text-align:center; margin:0.5rem 0 10rem; } /* 黒板貼替 20201120 add*/ /* ページネーション デザイン変更後 ---------------------------------------------------------------------------*/ #pagination { display:flex; justify-content:center; align-items:center; } #pagination * { color:#254594; } #pagination .pager, .currentPage { margin:0 1rem; padding:0.25rem 0; font-size:1.25rem; text-decoration:none; font-weight:bold; border-bottom:1px solid transparent; } #pagination .pager:hover { transition:0.3s; border-bottom:1px solid #254594; } #pagination .pagePrev, #pagination .pageNext { margin:0 2rem; padding:0.25rem 0; font-size:1.25rem; text-decoration:none; font-weight:bold; border-bottom:1px solid transparent; } #pagination .pagePrev::before { content:'\f104'; font-family:fontawesome; padding-right:1rem; } #pagination .pageNext::after { content:'\f105'; font-family:fontawesome; padding-left:1rem; } #pagination span.currentPage { border-bottom:1px solid #254594; } #pagination span.pagePrev, #pagination span.pageNext { color:#9a9a9a; } /* 20211001 inquiry add start */ #inquiry { margin-top:10rem; } #inquiry > h2 { font-size:1.75rem; } #inquiry > p { margin-top:3rem; } #inqText, #inqTextCaution { margin:2rem 0 3rem; font-size:1rem; } /* 20220329 mod start */ #inqText { display:flex; justify-content:space-between; } #inqLead { display:flex; flex-direction:column; justify-content:space-between; line-height:2.5; } #faqAnchor { margin-top:1rem; } #faqAnchor > a.faq { background-color:#0e5ca7; color:#fff; padding:0.4rem; outline:2px solid #0e5ca7; } #faqAnchor > a.faq > span { font-weight:bold; } #faqAnchor > a.faq > span::after { content:'\f08e'; font-family:fontawesome; padding-right:0.5rem; } #faqAnchor > a.faq:hover { background-color: #fff; color: rgba(255,0,0,0.6); outline-color: rgba(255, 0, 0, 0.6); } #inqDial { width:40%; background-color:#fbdfd9; padding:1rem; border-radius:1rem; } #inqDial > span, #inqDial > span > a { color:#f00 !important; font-size:1.25rem; } /* 20220329 mod end */ .inqRow { display:flex; justify-content:flex-start; padding:1rem 0; } .inqCol { display:flex; flex-grow:1; } .inqRow > label { width:20%; margin-right:2rem; display:flex; align-items:center; justify-content:space-between; font-size:1rem; } .inqRow > span { align-items:flex-start; } .inqRow.inqReq > label::after { content:'必須'; color:#fff; background-color:#f00; padding:0 0.75rem; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:bold; } .inqRow input, .inqRow textarea { border:1px solid #999; padding:0.25rem 0.5rem; flex-grow:1; } .inqSel { border:1px solid #999; cursor:pointer; display:flex; align-items:center; position:relative; } .inqSel > select { width:100%; padding:0.25rem 5rem 0.25rem 0.5rem; cursor:pointer; text-overflow:ellipsis; position:relative; outline:none; } .inqSel::after { content:'\f078'; font-family:fontawesome; padding:0.2rem 0.75rem 0.3rem; color:#fff; background-color:#ccc; position:absolute; top:0; right:0; z-index:-1; } .inqSel::-ms-expand { display:none; } .inqSel.emphasis { border-color:#f00; } .inqSel.emphasis::after { background-color:#f00; } .inqChkLabel { align-items:flex-start !important; } .inqCheckBox { flex-grow:1; } .inqChk { display:flex; justify-content:flex-start; align-items:center; } .inqChk > input[type=checkbox] { flex-grow:0; } .inqChk > label { margin:0 2rem 0 1rem; font-size:1rem; } .inqChk > a { text-decoration:underline; color:#f00; } /* 20211228 add start */ #txtPostal { max-width:6rem; } /* 20211228 add end */ .inqSize { align-items:center; } .inqSize > label { margin-right:0.5rem;} .inqSize > span { margin-left:0.5rem;} .inqRadioBox { display:flex; flex-wrap:wrap; } .inqRadioBox label { margin:0 2rem 0 1rem; font-size:1rem; } #inqProductDetailTitle { padding-bottom:0.5rem; border-bottom:1px solid #0e5ca7; } #inqProductDetailOpner { color:#000; display:flex; align-items:center; font-size:1rem; } #inqProductDetailOpner::after { content:'\f196'; font-family:fontawesome;font-size:1rem; padding-left:0.5rem; transition:0.8s; } #inqProductDetailOpner.open::after { content:'\f147'; transform:rotate3d(1, 0, 0, 540deg); } #inqProductDetail { display:none; padding-bottom:0.5rem 0; margin-bottom:3rem; border-bottom:1px solid #0e5ca7; } #inqProductDetail > .inqRow > label { text-indent:1rem; } #inqProductDetail > .inqRow.inqRowProducts { background-color:#f2f2f2; } #inqProductDetail > .inqRow.inqRowInstallation { background-color:#dbf3ff; } label[for="itemFile"] { padding:0.25rem 1rem; background-color:#254494; width:auto; color:#fff; cursor:pointer; } label[for="itemFile"]::before { content:'\f1c5'; font-family:fontawesome; padding-right:0.5rem; } #chkPrivacyAnchor { color:#000; text-decoration:underline; } .inquiry.btnArea { margin-top: 2rem; display: flex; justify-content: center; align-items: center; } .inquiry.btnArea > button { margin: 0 2rem; padding: 0.5rem 0; display: flex; align-items: center; justify-content: center; width: 15rem; border-radius: 30px; transition:0.3s; color:#fff; background-color:#254494; font-weight:bold; letter-spacing:0.25rem; } .inquiry.btnArea > button > p { display:none; position:absolute; top:3rem; left:1rem; text-align:justify; background-color:#f00; padding:0.5rem; transition:0.3s; opacity:0; } .inquiry.btnArea > button:disabled { opacity:0.7; cursor:not-allowed; position:relative; } .inquiry.btnArea > button:disabled:hover > p { display:block; opacity:1; } .inquiry.btnArea > button:disabled:hover > p::before { content:''; display:block; position:absolute; top:-1rem; left:1rem; border-width:0 0.5rem 1rem; border-color:transparent transparent #f00 transparent; border-style:none solid solid solid; } .inquiry.btnArea > button:hover { background-color:rgba(37,68,148,0.7); } #inqConfirmBase { display:none; position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0, 0, 0, 0.6); z-index:2; } #inqConfirmBase > i { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); color:#fff; } #inqConfirm { display:none; position:fixed; top:50%; transform:translateY(-50%); width:1026px; max-height:75vh; background-color:#fff; z-index:3; flex-direction:column; justify-content:space-between; } #inqConfirm h2 { margin:2rem auto; width:80%; } #inqConfirm .inquiry.btnArea { margin-bottom:2rem; } #inqConfItems { width:80%; max-height:52vh; margin:0 auto; overflow-y:scroll; } .inqConfRow { display:flex; justify-content:flex-start; align-items:flex-start; margin-right:1rem; padding:0 0 0.25rem 1rem; border-bottom:1px dotted #000; } .inqConfRow:not(:first-child) { margin-top:0.5rem; } .inqConfRow > span:first-child { width:30%; } .inqConfRow > span:last-child { width:70%; } /* 20211001 inquiry add end */ /* 20211115 web catalog new start */ #catalog > h2 { font-size:1rem; color:#FFF; height: 35px; background-color: #6e80b9; padding-left: 5px; border-left: #000099 solid 5px; display:flex; align-items:center; } .catalogLead { margin:2rem 0; font-size:0.75rem; line-height:1.5; } .catalogLead a { color:#000; text-decoration:underline; } .formItems { display:flex; flex-wrap:wrap; margin:0 1rem 6rem; } .catItem { width:32%; border:1px solid #c9c9c9; display:flex; flex-direction:column; justify-content:space-around; align-items:center; padding:5px; } .catItem:nth-child(n+4) { margin-top:1rem; } .catItem:not(:nth-child(3n + 1)) { margin-left:2%; } .catItemTitle { display:flex; justify-content:center; flex-wrap:wrap; line-height:1.5; margin-bottom:1rem; } .catItemTitle > input { margin-right:0.5rem; } .catItemTitle > label { color:#0e5ca7; font-weight:bold; font-size:0.85rem; } .catItemTitle > span { width:100%; text-align:center; font-size:0.7rem; } .webButton { background-color:#0f37b1; color:#fff; transition:0.3s; border-radius:0.5rem;font-size:0.75rem; padding:0 0.5rem; margin:1rem 1.5rem; } .webButton:hover { background-color:#9f4685; color:#fff; } .pdfButton { background-color:#469cc3; color:#fff; transition:0.3s; border-radius:0.5rem;font-size:0.75rem; padding:0 0.5rem; margin:1rem 1.5rem; } .pdfButton:hover { background-color:#9f4685; color:#fff; } .icata { margin:1rem 0; } .icata img { max-width:100%; height:auto; } .formItems .inqRow > label { width:27.5%; } .formItems .inquiry { width:100%; } /* 20211115 web catalog new end */ /* 20211115 side menu (provisional) start */ #Nsidemenu #sub section.mb15 { margin-bottom:1rem; } #sub h2 { color: #fff; font-size: 0.75rem; text-align: center; background-color: #000099; background-image: -webkit-gradient(linear, left top, left bottom, from(#3646A4), to(#000099)); background-image: -webkit-linear-gradient(#3646A4, #000099); background-image: linear-gradient(#3646A4, #000099); padding: 3px 0px; color: #FFF; border-radius: 1px 1px 0px 0px;} #sub section.box2 { font-size: 11px; background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#e3e3e3)); background-image: -webkit-linear-gradient(#FFF, #e3e3e3); background-image: linear-gradient(#FFF, #e3e3e3); border-bottom: 1px solid #999; border-right: 1px solid #999; border-left: 1px solid #999; line-height: 1.6; position: relative; overflow: hidden; } #sub section.box2 a { padding: 5px; text-decoration: none; display: block; overflow: hidden; } #sub section.box2 figure { float:left; } #sub section.box2 figure img { border: 1px solid #999; vertical-align: bottom; box-sizing: content-box; } #sub section.box2 a > img { margin-left:0.5rem; } #sub section.box2 h4 { color: #0f1bb1; margin-left: 70px; font-size: 0.7rem; } #sub section.box2 p { color:#333; margin-left:70px; } #sub .toi { border:1px solid #999; padding:5px; } #sub .toi h5 { font-size:1rem; font-weight:bold; } #sub .toi p { font-size:0.75rem; line-height:1.3; } #sub .toi p a { text-decoration:underline; color:#333; } /* 20211115 side menu (provisional) end */ /* 20220225 metalline new add start */ .fMincho { font-family:'Noto Serif JP'; } /*#mainMetal { min-height:110vh; background-image:url('./images/main_ml.jpg'); background-size:cover; background-position:center; background-attachment:fixed; display:flex; flex-direction:column; justify-content:space-between; padding-top:6.5rem; }*/ #mainMetal > * { width:90%; max-width:1280px; margin:0 auto; } #mlMainLogo { display:flex; justify-content:flex-end; } #mlMainLogo > .svg { height:3vh; } /*#mlMainTitle { text-align:center; }*/ #mlMainTitle { text-align:center; animation-name:fadeIn; animation-duration:1.75s; animation-fill-mode:forwards; opacity:0; } @keyframes fadeIn{ /*0% { opacity:0; }*/ 40% { opacity:0; } 100% { opacity:1; } } #mlMainTitle > * { color:#fff; text-shadow:1px 1px 4px #000, -1px -1px 4px #000, -1px 1px 4px #000, 1px -1px 4px #000; } #mlMainTitle > span { font-size:2.5rem; font-weight:600; line-height:1; } #mlMainTitle > span:nth-child(2) { margin:0 2rem; } #mlMainTitle > div { font-size:1rem; font-weight:300; margin-top:1rem; } #mlEyecatch { position:relative; text-align:center; width:auto; max-width:80%; height:34vh; } #mlEyecatch > span { font-size:0.75rem; color:#fff; font-family:'Noto Serif JP'; font-weight:300; } #mlEyecatch > span:first-child { position:absolute; top:-2rem; left:-2rem; display:flex; align-items:center; justify-content:space-between; width:0; animation-name:drawLineV; animation-delay:0.5s; animation-duration:1.75s; animation-fill-mode:forwards; } @keyframes drawLineV { 100% { width:calc(100% + 1.5rem); } } #mlEyecatch > span:first-child::after { content:''; border-bottom:1px solid #fff; margin-left:1rem; width:calc(700px - 10rem); } #mlEyecatch > span:last-child { position:absolute; top:-0.5rem; left:-2.5rem; display:flex; justify-content:space-between; align-items:center; writing-mode:vertical-rl; line-height:1; height:0; animation-name:drawLineH; animation-delay:0.5s; animation-duration:1.75s; animation-fill-mode:forwards; } @keyframes drawLineH { 0% { height:0; } 100% { height:100%; } } #mlEyecatch > span:last-child::after { content:''; border-left:1px solid #fff; margin-top:1rem; margin-left:1rem; width:1rem; height:100%; } #mlEyecatch > img { max-width:100%; max-height:100%; } #mlMainLead { display:flex; align-items:center; flex-direction:column; color:#fff; text-shadow:1px 1px 4px #000, -1px -1px 4px #000, -1px 1px 4px #000, 1px -1px 4px #000; margin-bottom:7rem; width:42rem; text-align:justify; } #mlMainLead > h1 { font-size:1.75rem; } #mlMainLead > div { font-size:1rem; padding-top:2rem; letter-spacing:2px; } #mlMainLead > h1, #mlMainLead > div { animation-name:fadeUp; animation-delay:0.5s; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0; } #mlMainLead > div { animation-delay:0.75s; } @keyframes fadeUp{ 0% { opacity:0; transform:translateY(5rem); } 70% { opacity:0.5; transform:translateY(-0.25rem); } 100% { opacity:1; transform:translateY(0); } } .mlContents { transform:skewY(2deg); width:90%; max-width:1280px; margin:0 auto; } #mlLineups { transform:skewY(-2deg); background:linear-gradient(25deg, #fff2d3, #b6fffb 50%, #ffe8f8); margin-top:-2.5rem; padding:5rem 0 3rem; } .mlCont { margin-bottom:4rem; } .mlCont > h1 { font-size:1.75rem; font-weight:500; margin-bottom:2rem; position:relative; } .mlCont > h1::before { content:''; position:absolute; top:50%; right:102%; transform:translateY(-50%); width:7.5rem; border-bottom:1px solid #000; } .mlCont > div { font-size:1.25rem; font-weight:500; margin-bottom:2rem; position:relative; } .mlCont > div > span { font-size:1.75rem; font-weight:500; display:flex; align-items:center; } #mlLineupItems { display:flex; flex-wrap:wrap; justify-content:space-between; } .mlLineupItem { width:49%; display:flex; flex-direction:column; justify-content:center; align-items:center; } .mlLineupItem:nth-child(n+3) { margin-top:3rem; } .mlItemHeader { display:flex; justify-content:flex-start; align-items:center; width:100%; } .mlItemHeader > h3 { color:#fff; background-color:#000; padding:0.125rem 1rem; position:relative; font-size:1.125rem; } .mlItemHeader > h3::after { content:''; width:0; height:0; border-style:solid; border-width:1.3rem 0 1.3rem 1rem; border-color:transparent transparent transparent #000; position:absolute; top:0; left:100%; } .mlItemHeader > span { margin-left:3rem; font-size:1.125rem; } .mlItemHeader > a { font-size:0.85rem; color:#fff; background-color:#000; padding:0 1rem 0.25rem; margin-left:auto; margin-right:3rem; border-radius:0.25rem; } .mlLineupItem > img { margin-top:auto; margin-bottom:auto; max-width:90%; } .mlCondBox { display:flex; justify-content:center; align-items:center; margin-bottom:3rem; } .mlConductor { padding:0.25rem 3rem; position:relative; white-space:pre; background-color:#000; color:#fff; font-size:1.25rem; } .mlConductor:hover { color:#fff; } .mlConductor::before { content:'\f07a'; font-family:fontawesome; color:#fff; font-size:1.5rem; line-height:1; padding-right:1rem; } .mlConductor::after { content:''; position:absolute; top:0; left:100%; border-width:1.5rem 0 1.5rem 1.5rem; border-style:solid; border-color:transparent transparent transparent #000; } #mlFeatures { padding:5rem 0 3rem; } #mlFeatures .mlContents { transform:skewY(0); } .mlFeatureBox { position:relative; margin-bottom:2.5rem; } .mlFeatureBox > img{ max-width:100%; } .mlFeatureText { position:absolute; top:6.5rem; right:0; width:50%; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:0 4rem; } .mlFeatureText.mlFeatureTextL { left:0; } .mlFeatureText > h1 { font-size:1.75rem; margin-bottom:3rem; line-height:1.5; display:flex; justify-content:flex-start; align-items:baseline; } .mlFeatureText > span { font-size:1.25rem; text-align:justify; letter-spacing:1.7px; } #mlPentrayBox { background-image:url('./images/mlFeature04.png'); background-size:contain; } .mlPentray {background-color:#0003; color:#fff; padding:0 1.25rem 0.125rem; margin-left:1rem; cursor:pointer; transition:0.3s; line-height:1; } .mlPentray.open {background-color:#000f; cursor:default; } #mlPentrayImgOpen { display:block; position:absolute; top:0; left:0; width:100%; } #mlPentrayImgClose { visibility:hidden; } #mlSystem { transform:skewY(-2deg); background:linear-gradient(45deg,#dcd2ff, #fff1a5 50%, #5ce8c9); padding:5rem 0 3rem; } .mlSystemImg { max-width:100%; margin-top:3rem; } .mlSystemContBox { display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:3rem; position:relative; } #_mlSystemContTitle { width:100%; font-size:1.5rem; margin-bottom:1.5rem; visibility:hidden; } .mlSystemContTitle { width:100%; font-size:1.5rem; margin-bottom:1.5rem; position:absolute; top:0; left:0; display:none; } .mlSystemContTitle.active { display:block; } .mlSystemCont { display:flex; align-items:flex-start; justify-content:space-between; flex-direction:column; width:49%; position:relative; } #_mlSystemContText { font-size:1.25rem; visibility:hidden; } .mlSystemContText { font-size:1.25rem; display:none; text-align:justify; position:absolute; top:0; left:0; } .mlSystemContText.active { display:block; } #mlSystemThumbs { display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; margin-bottom:1.5rem; width:48%; position:absolute; bottom:0; left:0; } .mlST { padding:0.25rem; border:1px solid transparent; transition:0.3s; margin-top:1rem; cursor:pointer; max-width:24%; } .mlST.active { border-color:#000; cursor:default; } #mlSystemImgs { position:relative; width:48%; } #mlSI0 { visibility:hidden; width:100%; height:auto; } .mlSI { max-width:100%; z-index:-1; position:absolute; top:0; left:0; } .mlSI.active { z-index:10; } .mlSI.next { z-index:5; } #mlCase { padding:5rem 0 3rem; } #mlCase .mlContents { transform:skewY(0); } #mlCaseImgs { display:flex; justify-content:center; align-items:flex-start; } .mlCaseImgBox { transform:skew(-30deg); overflow:hidden; width:30%; margin:0 1rem; } .mlCaseImgBox > img { transform:skew(30deg) translateX(-15%); } .mlCont > div > span > span { font-size:1rem; color:#fff; font-weight:500; background-color:#000; padding:0 0.75rem; position:relative; } .mlCont > div > span > span::after { content:''; position:absolute; top:0; left:100%; width:0; height:0; border-style:solid; border-width:1rem 0 1rem 0.5rem; border-color:transparent transparent transparent #000; } #mlRelated { transform:skewY(-2deg); background:linear-gradient(45deg, #94c4f2, #fff0fc 50%, #dcffd1); padding:5rem 0 5rem; margin-bottom:-2rem; } .mlRAnchor { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; margin-bottom:5rem !important; padding-bottom:4rem; } .mlRAnchor::after { content:''; width:5rem; border-bottom:1px solid #000; position:absolute; bottom:0; left:50%; transform:translateX(-50%); } .mlRAnchor > a { width:19%; margin:0 0.5% 1rem; color:#000; } .mlRAnchor > a:nth-of-type(n+6) { margin-top:2rem; } .mlRAnchor > a:hover { color:#000; } .mlRAnchor > a > img { max-width:100%; } .mlModal { display:none; } .mlModalImg { max-width:100%; } .mlModalBox { display:flex; flex-direction:column; } .mlModalBox > h1 { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; } .mlModalBox > h1 > span { font-size:1.5rem; color:#fff; } .mlModalBox > h1 > a , .mlModalBox > h1 > a:hover { color:#fff; font-size:1.25rem; } .mlModalBox > h1 > a::after { content:'\f105'; font-family:fontawesome; padding-left:1rem; font-size:1.5rem; } .mlModalBox > span { font-size:1.25rem; text-align:justify; color:#fff; } .modaal-container { background:#0009 !important; } .modaal-overlay { opacity:0 !important; } .modaal-content-container { display:flex; flex-direction:column; justify-content:space-between; align-items:center; } .modaal-wrapper .modaal-close { position:absolute; top:-0.5rem; right:-0.5rem; } #mlFootAnchor { display:flex; justify-content:center; align-items:center; } #mlFootAnchor > a:nth-child(2) { margin:0 2rem; } #mlFootAnchor img { max-width:100%; } /* 20220225 metalline new add end */ /* 20220301 news-archives add start */ #newsContents { margin:9rem auto 3rem; width:90%; max-width:1280px; } #newsTitle { margin-bottom:1.5rem; } #newsCate { display:flex; justify-content:space-between; align-items:center; } #newsCate a { width:12rem; display:flex; justify-content:center; align-items:center; font-size:1rem; color:#000; position:relative; transition:0.5s; border-bottom:1px solid transparent; cursor:pointer; } #newsCate a.active { color:#fff; cursor:default; } #newsCate a::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border-style:solid; border-width:0.5rem 0.5rem 0 0.5rem; border-color:transparent; transition:0.5s; } #newsCate a[data-cate="all"]:hover { border-bottom-color:#0e5ca7; } #newsCate a[data-cate="all"].active { background-color:#0e5ca7; } #newsCate a[data-cate="all"]:hover::after, #newsCate a[data-cate="all"].active::after { border-top-color:#0c5ca7; } #newsCate a[data-cate="info"]:hover { border-bottom-color:#122f8d; } #newsCate a[data-cate="info"].active { background-color:#122f8d; } #newsCate a[data-cate="info"]:hover::after, #newsCate a[data-cate="news"].active::after { border-top-color:#122f8d; } #newsCate a[data-cate="art"]:hover { border-bottom-color:#006f22; } #newsCate a[data-cate="art"].active { background-color:#006f22; } #newsCate a[data-cate="art"]:hover::after, #newsCate a[data-cate="art"].active::after { border-top-color:#006f22; } #newsCate a[data-cate="recruit"]:hover { border-bottom-color:#0084ff; } #newsCate a[data-cate="recruit"].active { background-color:#0084ff; } #newsCate a[data-cate="recruit"]:hover::after, #newsCate a[data-cate="recruit"].active::after { border-top-color:#0084ff; } #newsCate a[data-cate="important"]:hover { border-bottom-color:#ff0078; } #newsCate a[data-cate="important"].active { background-color:#ff0078; } #newsCate a[data-cate="important"]:hover::after, #newsCate a[data-cate="important"].active::after { border-top-color:#ff0078; } #newsCate a[data-cate="delivery"]:hover { border-bottom-color:#fd5f00; } #newsCate a[data-cate="delivery"].active { background-color:#fd5f00; } #newsCate a[data-cate="delivery"]:hover::after, #newsCate a[data-cate="delivery"].active::after { border-top-color:#fd5f00; } #newsList { margin:3rem 0; } .newsRow { display:flex; justify-content:flex-start; align-items:first baseline; padding:0 0.5rem 0.75rem; border-bottom:1px dotted #000; } .newsRow:not(:first-child) { margin-top:1rem; } .newsRow * { color:#000; font-size:1rem; font-weight:normal; } .newsRow a { text-decoration:underline; } .newsTag { color:#fff; font-size:0.75rem; width:5rem; margin:0 1rem; text-align:center; flex-shrink:0; } .newsTag.info { background-color:#122f8d; } .newsTag.art { background-color:#006f22; } .newsTag.recruit { background-color:#0084ff; } .newsTag.important { background-color:#ff0078; } .newsTag.delivery { background-color:#fd5f00; } #newsPager { display:flex; justify-content:center; align-items:center; padding-bottom:3rem; } #newsPrev, #newsNext { display:flex; justify-content:space-between; align-items:center; color:#fff; background-color:#0e5ca7; margin:0 2rem; padding:0.5rem 1rem; width:10rem; } #newsPrev.disabled, #newsNext.disabled { background-color:#969696; cursor:default; opacity:0.7; } #newsPrev:hover, #newsNext:hover { opacity:0.7; } #newsPrev::before { content:'\f104'; font-family:fontawesome; color:#fff; } #newsNext::after { content:'\f105'; font-family:fontawesome; color:#fff; } #newsPrev::after, #newsNext::before { content:'\f105'; font-family:fontawesome; visibility:hidden; } #newsWrapper { width:90%; max-width:1280px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; margin:10rem auto 6rem; } #newsWrapper a { color:#00f; } #newsHeader { display:flex; justify-content:flex-end; flex-wrap:wrap; width:100%; margin-bottom:3rem; } #newsHeader > h2 { font-size:1.75rem; width:100%; } #newsHead {display:flex; flex-direction:column; font-size:1.125rem; line-height:1.5; } #newsRelease { width:100%; } #newsTitle { font-size:1.5rem; width:100%; border-bottom:5px solid #c70039; border-image:linear-gradient(to right, #c70039 0%, #c70039 12%, #0e5ca7 12%, #0e5ca7 100%); border-image-slice:1; padding-bottom:0.5rem; } .newsBlock { display:flex; flex-direction:column; align-items:center; margin-bottom:3rem; } .newsBlock a { color:#000; text-decoration:underline; } .newsSubTitle { width:100%; font-size:1.5rem; margin-bottom:0.5rem; } .newsContents { width:100%; font-size:1.125rem; text-align:justify; } .newsImg { max-width:90%; } .newsFile { display:flex; justify-content:flex-end; } .newsFile > a { color:#fff; background-color:#0e5ca7; padding:0.25rem; display:flex; justify-content:space-around; } .newsFile > a::before, .newsFile > a::after { content:'\f107'; font-family:fontawesome; padding:0 0.5rem; } .newsFile > a::before { visibility:hidden; } /* 20220301 news-archives add end */ /* 20220802 add start */ /* 学校・教育向け製品 ---------------------------------------------------------------------------*/ #productImgBody { display:block; } #productImgBodyS { display:none; } .schoolMain > * { color:#2c4813; border-color:#2c4813; } #schoolContArea { width:90%; max-width:var(--maxWidth); display:flex; justify-content:space-between; align-items:stretch; flex-wrap:wrap; margin:0 auto 8rem; } .schoolCont { width:48%; display:flex; align-items:center; flex-direction:column; } .schoolCont:nth-child(n+3) { margin-top:5rem; } .schoolCate { width:100%; font-size:1.125rem; letter-spacing:1px; text-align:center; padding-bottom:0.85rem; border-bottom:1px solid #000; } .schoolImgBox { width:100%; height:50vh; max-height:350px; display:flex; justify-content:center; align-items:center; } .schoolImgBox > img { max-width:90%; height:auto; } /* 20221108 mod start */ .schoolTitle { font-size:1rem; margin:1rem 0 2rem; font-weight:bold; color:#000; } .schoolText { text-align:justify; font-size:1rem; line-height:2; margin-bottom:2rem; color:#000; } .schoolTitle:hover, .schoolText:hover { color:#000; } /* 20221108 mod start */ .schoolAnchor { width:100%; background-color:#2c4813; color:#fff; display:flex; align-items:center; padding:1rem 2rem; box-sizing:border-box; border-radius:0.75rem; transition:0.3s; margin-top:auto; } .schoolAnchor:hover { color:#fff; opacity:0.85; } .schoolAnchor > p { width:100%; text-align:center; font-size:1rem; font-weight:bold; letter-spacing:3px; } .schoolAnchor::after { content:'\f061'; font-family:fontawesome; color:#2c4813; padding:0.5rem 0.5rem 0.5rem 0.6rem; line-height:1; border-radius:50%; background-color:#fff; } #schoolMAnchor { width:90%; max-width:var(--maxWidth); color:#244594; border:0.5rem solid #244594; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:1rem; box-sizing:border-box; transition:0.3s; font-size:1.25rem; } #schoolMAnchor:hover { opacity:0.7; } #schoolMAnchor > div { display:flex; justify-content:flex-start; align-items:center; font-weight:bold; } #schoolMAnchor > div > img { margin-right:1rem; } #schoolMAnchor::after { content:'\f04b'; font-family:fontawesome; } .schoolWrapper #itemTitleBox, .schoolWrapper #imgPrev::before, .schoolWrapper #imgNext::before, .schoolWrapper .content .contentL span, .schoolWrapper #btnInqConfirm, .schoolWrapper #btnInqClear { background-color:#4c5b4b; } .schoolWrapper .content .contentL span, .schoolWrapper .content .contentR span { width:10rem; text-align:center; } .schoolWrapper .imageThum.active::before { outline-color:#4c5b4b; } .schoolWrapper .content .contentL::after { border-left-color:#4c5b4b; } .schoolWrapper #description .contentC { text-align:justify; } .schoolWrapper #inquiries, .schoolWrapper #variation { margin-top:4.5rem; } .schoolWrapper .pickupBox { border-color:#4c5b4b; } .schoolWrapper .pickupBox * { color:#4c5b4b; } .schoolWrapper #schoolMAnchor { margin-top:5rem; border-color:#4c5b4b; } .schoolWrapper #schoolMAnchor::after, .schoolWrapper #schoolMAnchor * { color:#4c5b4b; } #schoolInq { margin-bottom:2rem; padding-top:0.5rem; } #ssBox { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; } .schoolSize { width:calc((100% - 3rem) / 4);color:#fff; background-color:#017552; padding:0.25rem 0; border-radius:0.5rem; text-align:center; } .schoolSize:nth-child(n + 5) { margin-top:1rem; } .schoolSize:not(:nth-child(4n)) { margin-right:1rem; } /*#variation > .contentL { margin-left:-1.25rem; } #svBox { padding-left:0; margin-left:-1.25rem; }*/ .svBox { display:flex; align-items:flex-start; margin-bottom:1.5rem; } .svTitle > span { background-color:#017552 !important; } .svTitle::after { border-left-color:#017552 !important; } .svImgList { display:flex; flex-wrap:wrap; } .svImgBox { width: calc((100% - 2rem) / 3); font-size:0.85rem; color:#000; } .svImgBox:hover { color:#000; } .svImgBox:nth-child(n + 4) { margin-top:1rem; } .svImgBox:not(:nth-child(3n)) { margin-right:1rem; } .svImgBox img { max-width:100%; } #catalogAnchor { color:#fff; background-color:#244594; display:flex; justify-content:space-between; align-items:center; width:90%; max-width:var(--maxWidth); margin:2rem auto 0; padding:2rem; font-size:1.25rem; font-weight:bold; } #catalogAnchor.schoolCatAnchor { background-color:#4c5b4b; } #catalogAnchor:hover { opacity:0.7; } #catalogAnchor::after{ content:'\f04b'; font-family:fontawesome; color:#fff; padding-left:3rem; } .scvModalImg { max-width:60vw; max-height:50vh; } /* 20220802 add end */ @media screen and (max-width:1600px){ html, body { font-size:12px; } /* 20220404 mod start */ /*header#newHeader .headerBody > .pcHL { height:100%; top:0; } header#newHeader .headerBody .headerLogo { width:auto; height:auto; max-width:12vw; max-height:95%; padding:0.5rem 0; }*/ header#newHeader .headerBody .headerLogo { max-width:12vw; } /* 20220404 mod end */ /*header#newHeader .headerBody a { font-size:1rem; }*/ } /* 製品一覧・詳細共通　デザイン変更後 ---------------------------------------------------------------------------*/ @media screen and (max-width:1420px){ html, body { font-size:1vw; } .content { width:100%; max-width: var(--maxWidth); margin: 0 auto; -ms-flex-direction: column; flex-direction: column; } .wrapper .content .contentC{ margin-top: 1rem; } .wrapper .content .contentR{ display: none; } } @media screen and (max-width:1024px){ .saleIcon { display:none; } #mainContents > .indexContent { width:32%; } /* 20220329 add start */ #contents, .content { max-width:90%;} .wrapper .content .contentC { max-width:100%; } /* 20220329 add end */ /* 20220608 add start */ #porductImgCont { width:60%; } .schoolCate { font-size:1.25rem; } .schoolTitle, .schoolText { font-size:1.125rem; } #schoolMAnchor { font-size:1.5rem; } #schoolMAnchor::after { margin-right:1rem; } /* 20220608 add end */ } @media screen and (max-width:1000px){ html, body { font-size:10px; } } @media screen and (max-width:960px){ header#newHeader .headerBody .headerEmph { width:26vw; } .headerStore > span:nth-child(1), .headerInq > span:nth-child(1) { display:none; } .headerStore > span:nth-child(2)::before, .headerInq > span:nth-child(2)::before { font-family:fontawesome; font-size:3rem; } .headerStore > span:nth-child(2)::before { content:'\f07a'; } .headerInq > span:nth-child(2)::before { content:'\f0e0'; } .mainText03 { left:12.5vw; } .mainText03 svg.mainText { width:50vw; } .mainText03 > .mainTextLead03 { font-size:1.5rem; } #subContentsL { width:68%; } /* 20220603 mod start #subContentsL #purpose > a { width:49%; }*/ #purpose > a { width:48%; } /* 20220603 mod end */ #subContentsR { width:30%; } /* 20230210 add start */ .relationAnchor > div { justify-content:flex-start; margin-left:2%; } .underContent { width: calc((100% / 3) - 4px); height: 200px; } .underContentImg { height: 200px; } /* 20230210 add end */ .specialImgContent { margin-top: 2rem; width: 100%; height: 350px; } .wrapperList:first-of-type > .wrapperBox > .wrapperImg { width: 100%; height: 350px;} .partitionList { position:relative; margin-top: 1rem; width: calc((100% / 4) - 4px);} .partitionItem { height: 150px; text-align: center; position: relative; overflow:hidden; } .partitionList:last-child{ /* margin-left: 6px; */ margin-right: auto; } } @media screen and (max-width:768px){ #mainMetal { background:none; position:relative; min-height:90vh; padding-top:11vh; } #mainMetal::after { content:''; background:url('./images/main_ml.jpg') center top no-repeat; background-size:cover; display:block; position:fixed; top:0; left:0; z-index:-1; width:100vw; height:100vh; } #mlMainTitle > span { font-size:7vw; } #mlMainTitle > span:nth-child(2) { margin:0; } #mlMainLead { margin-bottom:10rem; width:80%; } #mlMainLead > h1 { font-size:4vw; } #mlMainLead > div { font-size:3vw; } } @media screen and (max-width:640px){ html, body { min-width:auto; position:relative; } header h1, .headerRBox:first-child { display:none; } header .inner { width:100%; flex-direction:column; align-items:flex-start; } header .inner > a { margin-left:8%; } header .headerRBox { position:static; width:100%; margin-top:0.5rem; margin-left:10%; justify-content:flex-start; } header .headerRBox#teltoi img { width:2.5rem; } #tel { font-size:3.5vw; } #tel div { font-size:1.75vw; white-space:pre; letter-spacing:normal; } #mail { font-size:3vw; } #mail::before { font-size:3vw; } header #menu { height:auto; border-bottom:none; } header #menu ul { width:100%; display:flex; flex-wrap:wrap; } header #menu ul li { width:calc((100% - 2px) / 2); float:none; border-bottom:1px solid #d4d4d4; } nav#menu ul li a:hover { border-bottom:none; } /* 20210426 add start */ header#newHeader .headerBody > ul { display:flex; flex-direction:column; align-items:flex-start; position:fixed; top:0; left:-50vw; width:50vw; height:100vh; background-color:rgba(0, 0, 0, 0.75); transition:0.3s; } header#newHeader .headerBody > ul > li { width:100%; text-align:left; padding:1.5rem 0 1.5rem 2rem !important; } header#newHeader .headerBody > ul > li:first-child { margin-top:15vh; } /* 20220407 mod start */ /*header#newHeader .headerBody .headerLogo { width:35vw; max-width:35vw; transform:translate(-65%, -50%); }*/ header#newHeader .headerBody .headerLogo { width:35vw; max-width:35vw; height:auto; transform:translate(-65%, -50%); } /* 20220407 mod end */ header#newHeader .headerBody .headerEmph { width:30vw; } header#newHeader .headerBody.open > ul { left:0; z-index:100; justify-content:flex-start; } header#newHeader .headerBody > ul::after { content:''; width:50vw; height:100vh; position:fixed; top:0; right:-50vw; background-color:rgba(0, 0, 0, 0.25); transition:0.3s; } header#newHeader .headerBody.open > ul::after { right:0; } header#newHeader .headerBody div.submenu { left:150vw; height:100%; top:0 !important; z-index:1; } header#newHeader .headerBody.open div.submenu { transition-timing-function:ease-in-out; } header#newHeader .headerBody div.submenu > ul { flex-direction:column; justify-content:flex-start; align-items:flex-start; margin-top:15vh; } header#newHeader .headerBody div.submenu > ul > li { margin-top:2vh; } header#newHeader .headerBody.open div.submenu.active { left:50vw; } header#newHeader .headerBody .headerEng { right:1rem; width:8rem; } header#newHeader .headerBody a.headerSearch > span::after { content:'　製品検索'; color:#fff; padding-left:1rem; } .headerEng path { fill:#333; } .pcHL { display:none !important; } .spHL { display:block !important; transform:translate(-65%, -40%) !important; left:50%; } .headerEng { display:none !important; } .spEng { display:list-item; } /* 20210818 add start */ #swiperArea { height:auto !important; max-height:100vh !important; } #subSwiper { position:static !important; } /* 20210818 add end */ /* 20210818 mod start */ .mainText01 { bottom:30%; left:1vw; width:98vw; } .mainText01.textW { top:auto; bottom:40%; } /* 20210818 mod end */ .mainText01 > div, .mainText01 > div > img { width:100%; } .swiper-slide-prev .mainText01 img { opacity:1; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 1)); } .swiper-slide-active .mainText01 img { opacity:1; -webkit-animation:dropShadow 4s forwards; animation:dropShadow 4s forwards; } /* 20210803 add start */ .swiper-slide-active .mainText01.textW img { -webkit-animation-name:dropShadowW; animation-name:dropShadowW; } @keyframes dropShadowW { 0%{ filter: drop-shadow(0 0 2px rgba(80, 80, 80, 0)) drop-shadow(0 0 2px rgba(80, 80, 80, 0)); opacity:0; } 10%{ opacity:0; } 50%{ filter: drop-shadow(0 0 2px rgba(80, 80, 80, 0)) drop-shadow(0 0 2px rgba(80, 80, 80, 0)); } 75%{ opacity:0.8; } 100%{ filter: drop-shadow(0 0 2px rgba(80, 80, 80, 1)) drop-shadow(0 0 2px rgba(80, 80, 80, 1)); opacity:1; } } /* 20210803 add end */ @keyframes dropShadow { 0%{ filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0)) drop-shadow(0 0 2px rgba(255, 255, 255, 0)); opacity:0; } 10%{ opacity:0; } 50%{ filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0)) drop-shadow(0 0 2px rgba(255, 255, 255, 0)); } 75%{ opacity:0.8; } 100%{ filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 2px rgba(255, 255, 255, 1)); opacity:1; } } #spMenu { width:15vw; height:15vw; position:relative; left:5%; display:flex; flex-direction:column; align-items:center; justify-content:space-around; margin:0.5rem 0; padding-top:0.3rem; z-index:102; } #spMenu > span:not(:nth-child(4)) { width:10vw; background-color:#fff; height:1vw; border-radius:5px; transition:0.5s; } #spMenu.open > span:nth-child(1) { transform:rotate(-45deg) translate(-20%, 250%); } #spMenu.open > span:nth-child(2) { opacity:0; } #spMenu.open > span:nth-child(3) { transform:rotate(45deg) translate(-20%, -250%); } #spMenu > span:nth-child(4) { color:#fff; font-weight:bold; line-height:1; } /* 20210426 add end */ /* 20210408 add start */ #footerSNS { padding-bottom:1.5rem; } #footerSNS > div:last-child { display:none; } #footerSNS > div > span { font-size:1rem; } #footerSNS > #snsIcons { justify-content:space-between; } ul#footermenu li { font-size:3.5vw; } /*#footerSNS > div:not(:nth-child(2)) { display:none; } #footerSNS > #snsIcons { width:100%; justify-content:space-between; }*/ /* 20210408 add end */ #Nmenubar_hdr { display: inline; position: absolute; top: 0px; right: 10px; background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#e5e5e5)); background-image: -webkit-linear-gradient(#fbfbfb, #e5e5e5); background-image: linear-gradient(#fbfbfb, #e5e5e5); padding: 10px; border: 1px solid #cfcfcf; border-radius: 0px 0px 6px 6px; box-sizing:content-box; } #breadcrumBox { padding-left:0.5rem; } section#footer { width:100%; flex-direction:column; } ul#footermenu { width:80%; padding-top:1rem; margin:0; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; } ul#footermenu li { margin-top:0.5rem; width:45%; text-align:left;} header #menu ul li:first-child { border-left:none; } ul#footermenu li:not(:first-child)::before , ul#footermenu li::before { content:'\f192'; font-family:fontawesome; padding:0 0.3rem 0 0; } ul#footermenu li a { text-decoration:underline; } /* coontents */ #contents { width:100%; } /* 20211129 add start */ #contents > #main { max-width:95vw; margin:9rem auto 0; float:none; } /* 20211129 add end */ #porductImg > img { height:auto; } /* 20220608 mod start */ #porductImgCont { width:80%; height:40%; padding:2rem; } #porductImgCont h1 { font-size:1.75rem; } #porductImgCont > span { margin:2rem 0; } /*#porductImgCont { top:0.5rem; left:0.5rem; padding:0.5rem; width:calc(100% - 1rem); height:calc(100% - 1rem); } */ /*#porductImgCont h1 { font-size:1.25rem; }*/ /* 20220608 mod end */ #porductImgCont h2 { font-size:0.85rem; padding-bottom:0.25rem; } #porductImgCont div div { font-size:0.75rem; line-height:1; } #productCateAnchor a, .cateBox, .pickupBox { width:90%; margin:0 auto; } /* 20220608 mod start */ #productCateAnchor { flex-direction:column; width:100%; } #productCond { width:90%; } /*#productCateAnchor { flex-direction:column; width:90%; }*/ /* 20220608 mod end */ .condRow { flex-wrap:wrap; justify-content:space-around; } .condTitle { width:100%; margin-bottom:0.5rem; } .productCond > span { padding-right:0; } #condButtonArea { flex-direction:column; margin-bottom:3rem; } #condButtonArea > button:first-child { margin-bottom:1rem; } /*#productCateAnchor > a:nth-child(2) { margin-top:1rem; }*/ /* 20210427 add start */ #mainSwiper .pcsw { display:none; } #mainSwiper .spsw { display:block; } /* 20230210 add start */ #mainContents { flex-direction:column; align-items:center; } /* 20230210 add end */ #mainContents > .indexContent { width:100%; } #mainContents > .indexContent:not(:first-child) { margin-top:2rem; } #mainContents > .indexContent div:first-child > span { font-size:4vw; } #mainContents > .indexContent div:last-child > span:first-child,#mainContents > .indexContent div:last-child > span:last-child { font-size:3.5vw; } #subContents { flex-direction:column; align-items:center; width:100%; } #subContentsL, #subContentsR { width:90%; } /* 20220603 mod start */ #purpose { flex-direction:column; align-items:center; } .purposeAnchor { width:100% !important; } .purposeAnchor:nth-child(2) { margin-top:2rem; } /*#subContentsL #purpose { flex-direction:column; align-items:center; } #subContentsL #purpose > a { width:100%; } #subContentsL #purpose > a { margin-bottom:2rem; } #subContentsL #purpose > a > div { font-size:4vw; padding:0.75rem 0; } #subContentsL #purpose > a > span { font-size:3.5vw; padding:0.75rem 0.25rem; } /* 20220603 mod end */ .indexNews .newsBox > div { display:flex; font-size:3vw; } .indexSidebar .indexSideTitle { font-size:4vw; } .indexSidebar .indexSideCom div { font-size:4vw; } .indexSidebar .indexSideCom span { font-size:3vw; line-height:2; } .indexSidebar .usefulAnchor li a { font-size:3.5vw; } .relationAnchor > div { font-size:3.5vw; } /* 20210427 add end */ /* 20220408 add start */ #mainMetal { min-height:100vh; padding-top:12rem; } #mlMainLogo > .svg { height:2vh; } #mlMainTitle > span { font-size:6vw; } #mlEyecatch { height:auto; } #mlMainLead { margin-bottom:10rem; width:80%; } #mlMainLead > h1 { font-size:3.5vw; } #mlMainLead > div { font-size:1.9vw; } .mlCaseImgBox { width:50%; } .mlCaseImgBox > img { transform: skew(30deg) translateX(-25%); } .mlConductor { padding:0.25rem 1rem 0.25rem 2rem; } .mlConductor::before { line-height:0.8; } .mlLineupItem { width:100%; } .mlLineupItem:nth-child(n+2) { margin-top:3rem; } .mlItemHeader > a { margin-right:0; } .mlFeatureText { top:2rem; padding:0 1rem; } .mlRAnchor { justify-content:space-between; } .mlRAnchor > a { width:48%; display:flex; flex-wrap:wrap; } .mlRAnchor > a:nth-of-type(n+3) { margin-top:2rem; } /* 20220408 add end */ /* 20220225 NEWS add start */ .idxInfoTitle { flex-direction:column; align-items:flex-start; } .idxInfoTitle > p::before { width:50px; } .idxInfoTitle > a { margin-top:2rem; position:relative; width:100%; } #newsCate { flex-direction:column; } #newsCate a { width:100%; justify-content:space-between; padding:0.75rem 1rem; } #newsCate a:not(:first-child) { margin-top:1rem; } #newsCate a[data-cate="all"] { border-bottom:1px solid #122f8d; } #newsCate a[data-cate="all"]::after { color:#122f8d; } #newsCate a[data-cate="info"] { border-bottom:1px solid #122f8d; } #newsCate a[data-cate="info"]::after { color:#122f8d; } #newsCate a[data-cate="art"] { border-bottom:1px solid #006f22; } #newsCate a[data-cate="art"]::after { color:#006f22; } #newsCate a[data-cate="recruit"] { border-bottom:1px solid #0084ff; } #newsCate a[data-cate="recruit"]::after { color:#0084ff; } #newsCate a[data-cate="important"] { border-bottom:1px solid #ff0078; } #newsCate a[data-cate="important"]::after { color:#ff0078; } #newsCate a[data-cate="delivery"] { border-bottom:1px solid #fd5f00; } #newsCate a[data-cate="delivery"]::after { color:#fd5f00; } #newsCate a::after { content:'\f0d7'; font-family:fontawesome; position:static; font-size:1.25rem; line-height:1; border:none; } #newsCate a.active::after { color:#fff; } .newsRow { flex-wrap:wrap; justify-content:space-between; align-items:center; } .newsRow > h1 { width:100%; line-height:1.5; text-align:justify; } .idxInfoBanner { width:100%; justify-content:flex-start; margin-top:1.5rem; } .idxInfoBanner:first-child { margin-top:0; } /* 20220225 NEWS add end */ #floatAnchor { width: 100%; top: 0; bottom:auto; left: 0; justify-content: center; padding: 0.8rem; writing-mode: lr; opacity:0.85; } #floatAnchor::after { content:'\f054'; padding-top: 0; padding-left: 2rem; } #categoryAnchor { margin-top:3rem; } /* 20221108 mod start */ .cateBox:nth-child(n+2) { margin-top:5rem; } /* 20221108 mod end */ .cateImg { height:auto; } .cateImg > img { max-width:100%; } .cateImg > img.listImg { position:static; } .cateLinks { min-height:auto; } /* 20221108 mod start */ #productMain a { line-height:1; font-size:1rem; line-height:1.5; } /* 20221108 mod end */ /* 20221108 del start #productMain a::before, #productMain a::after { font-size:1rem; } /* 20221108 del end */ .catBoxTitle > h1, .cateLead { font-size:1rem; } .productSummaryRow { font-size:0.8rem; display:flex; align-items:flex-start; } .productSummaryRow > span { line-height:1.5; padding:0.2rem 0; } .productSummaryRow > span:first-child { width:35%; } .productSummaryRow > span:last-child { width:65%; } /* 20210823 add start */ /* 20220608 mod start */ .freeText { padding-bottom:0.5rem; width:90%; } /*.freeText { padding-bottom:0.5rem; }*/ /* 20220608 mod end */ .freeText > h2 { font-size:1.125rem; } /* 20220608 mod start */ #freeText { width:50%; margin-left:none; } /*#freeText { width:50%; margin-left:auto; }*/ /* 20220608 mod end */ #freeSeach { padding:0.2rem 1rem; letter-spacing:0.5rem; text-indent:0.5rem; margin-left:1rem; } /* 20210823 add start */ /* 20210125 add start */ .subCateTitle { text-indent:1rem; } /* 20210125 add end */ #productMain { margin-bottom:3rem; } #pagination { justify-content:space-between; width:95%; margin:0 auto; } #pagination * { margin: 0 !important; line-height: 1; } #itemTitleBox, #itemLinkArea { width:90%; } #itemTitleBox { display:block; padding:0.5rem 0.75rem; } #itemTitleBox::after { content:''; display:block; clear:both; } #itemTitleBox span.isGreen { float:right; font-size:0.5rem; } #itemTitleBox h1 { font-size:0.9rem; } #itemImage { width:90%; margin-top:1rem; flex-direction:column-reverse; align-items:flex-end; } #itemImage > img { width:100%; height:auto; } #itemImage > img:nth-child(1).isShowroom { display:none; } .content#description, .content#detail { margin-top:3rem; } .wrapper .content .contentL { line-height:1; } .wrapper .content .contentL span { font-size:1.25rem; } .wrapper .content .contentL::after { border-width:1.25rem; } .wrapper .content .contentC { font-size:1.25rem; } .itemDetail { padding:0; font-size:1.25rem; display:flex; flex-direction:column; } .itemDetail > span:first-child { padding-left:0.5rem; width:100%; } .itemDetail > span:last-child { margin:0; padding:0 0.5rem 0 1rem; width:100%; } .itemLinkRow * { font-size:0.75rem !important; } /* 20210329 add start */ .itemLinkRow { flex-direction:column; } .itemLinkRow > div, .itemLinkRow:first-child > a, .itemLinkRow:last-child > div, .itemLinkRow:last-child > a { width:90%; } .itemLinkRow > a { justify-content:center; } .itemLinkRow > a::before { margin-right:1rem; } .itemLinkRow > a::after { margin-left:1rem; } .itemLinkRow > span { border-bottom:1px solid #fff; border-left:none; height:auto; width:35%; margin:1rem 0; } /* 20210329 add end */ #itemSeriesArea { padding:0.5rem 0.5rem 1rem; } .itmeSeriesTitle { width:auto; } .itmeSeriesTitle:not(:first-child) { text-indent:0; } .itmeSeriesTitle:not(:first-child):before { content:' / '; } .itemSeriesRow { flex-direction:column; } .itemSeriesRow a { display:block; font-weight:bold; margin-bottom:0.5rem; } .itemSeriesRow > div { width:100% !important; margin-top:0; } .itemSeriesRow > div:first-child { margin-top:1rem; } .relatedBox { width:90%; margin:0 auto; } .relatedBox:nth-child(n+2) { margin-top:2.5rem; } .relatedTop > span:first-child { font-size:1rem; } .relatedTop > span:last-child { line-height:1.5; } .relatedImg > h1 { font-size:1rem; } .relatedImg > img { max-width:100%; height:auto; } .relatedAnchor { margin-top:1rem; padding:0.5rem 0; } .relatedAnchor::before, .relatedAnchor::after { line-height:1; } #pickup { margin-top:3rem; margin-bottom:3rem; } .wrapper .content, .wrapper .content .contentC { width:100%; } .pickupBox { border-width:0.3rem; } .pickupBox:nth-child(n+2) { margin-top:0.75rem; } .pickupBox > img { width:30%; } .pickup > img { max-width:100%; } span.pickup, .pickupTitle, .pickupCont { font-size:0.7rem; } #Nsidemenu #sub { float:none; width:95%; margin:0 auto; } .shiny-button { font-size:0.85rem; white-space:pre;} /* 20211015 add start */ #productImgs { margin-bottom:10vw; } #productThumbs { width:90%; } #imgPrev { transform:translate(-30%, -50%); } #imgNext { transform:translate(30%, -50%); } #imgPrev::before, #imgNext::before { width:10vw; height:10vw; } /* 20211015 add end */ /* アクリルボード 20201120 add*/ #acryHeadAnchor { position:fixed; top:0; left:0; width:100%; border-radius:0; display:flex; justify-content:center; padding:1rem; transition:0.5s; } #acryHeadAnchor > span { padding:0 1rem; } #contentsFull #main { width:100%; } #mainVis.acrylic > img:first-child { height:400px; } #mainVis.acrylic > #mainVix { width:85%; top:10%; } /*#mainVis.acrylic > img:nth-child(2) { width:85%; top:10%; }*/ #topBox { bottom:1rem; font-size:0.875rem; } #topBox > div:first-child { width:100%; } #topBox > div > h1 { font-size:1.125rem; padding-top:0.75rem; padding-bottom:0.25rem; } #topBox > span { font-size:0.875em; line-height:1.5; padding-left:0.75rem; padding-right:0.75rem; text-align:justify; } #mainAnchor > ul { flex-direction:column; } .acrylicTitle { width:98%; font-size:1rem; margin-right:auto; margin-left:auto; } .acrylicSubTitle {font-size:1rem; text-indent:-1.25rem; padding-left:2rem; padding-right:1rem; } .acrylicBox > table { width:95%; margin-left:auto; margin-right:auto; } .acryImgs, .acrySubImgs { width:95%; margin-left:auto; margin-right:auto; flex-wrap:wrap; align-items:flex-start; } .acryImgs > img { width:100%; } .acryImgs > div { width:49%; margin-top:1rem; } .acryImgs > div > img { max-width:100%; } .acryImgs > p { width:45%; line-height:1.5; margin:1rem auto 0; text-align:justify; } .actiboImgs { margin-top:2rem; flex-direction:column; } .actiboImgs > div { width:95% !important; margin:1rem auto 0; } .actiboImgs > div:first-child { flex-direction:column; } .actiboImgs > div:first-child > img { margin:1rem auto 0; } .actiboImgs > div:last-child { margin-top:1.5rem; } #actibo > a { top:3.25rem; right:5px; } #actibo > .acrylicTitle { margin-bottom:64px; } /* アクリルボード 20201120 add*/ /* 黒板貼替 20201120 add*/ .repasteHeadAnchor { flex-wrap:wrap; } .repasteHeadAnchor > a { width:50%; margin-right:0 !important; font-size:1rem !important; justify-content:center; } .repasteHeadAnchor > a:nth-child(n+3) { margin-top:1rem; } .repasteHeadAnchor > a:last-child { display:inline; } .repasteHeadAnchor > a:last-child::after { padding-left:0 !important; } #mainVis.repaste { overflow-x:hidden; } #mainVis.repaste > img { width:200%; } #rebirth { top:10%; width:80%; height:60px; } #rebirth::after { border-width: 30px 0 30px 30px; } #mainLead { top:40%; width:80%; } #mainLead > p { font-size:1rem; padding-top:0; } #repasteMC { flex-direction:column; } #repasteMC > span { width:90%; font-size:1rem; font-weight:normal; line-height:1.5; padding-bottom:1rem; } .repasteBlock { margin-top:0 !important; } .repasteText { align-items:flex-start; } .repasteText > span { width:80%; font-size:1rem; text-align:justify; } #repasteProc > article { align-items:center; } #repasteProc > article > section { flex-direction:column; } .repasteProcBox:not(:first-child) { margin-top:2rem; } .repasteProcBox > p { font-size:1rem; } table#repaste { font-size:1rem; } .refaceBox { flex-direction:column; } .refaceBox > * { width:100% !important; } .refaceBox > img:last-child { max-width:100%; } .refaceBox > span { font-size:1rem !important; } .refaceBox > span:first-child { font-weight:normal; width:auto !important; top:0.5rem; left:1rem; padding:0.15rem 1.25rem; } .refaceBox > span:last-child { margin-top:0; } .refaceBlock { margin-top:0 !important; } .refaceText { align-items:flex-start; } .refaceText > span { width:80%; font-size:1rem; text-align:justify; } .refaceBoxDown > div:first-child { width:100%; } .refaceBoxDown > div:last-child { display:none; } #repasteRF { flex-direction:column; } #repasteRF > span { width:90%; font-size:1rem; font-weight:normal; line-height:1.5; padding-top:0; } .diagBox { flex-wrap:wrap; } .diagBox .diagImgBox:not(:first-child) { margin-top:2rem; } #repasteDiag { flex-direction:column; padding-bottom:1rem; } #repasteDiag > h2 { font-size:1.25rem; } #repasteDiag > span { font-size:2vw; } .diagBox .diagImgBox > span { font-size:1rem !important; } #diagLead { font-size:1rem; padding:0.5rem 1rem; line-height:1.5; } #diagCaution { font-size:0.75rem; text-align:left; width:90%; margin-right:auto; margin-left:auto; margin-bottom:5rem; } /* 黒板貼替 20201120 add */ /* 20211001 add start */ /* 20220329 mod start */ #inquiry { width:90%; margin-left:auto; margin-right:auto; } /*#inquiry { width:80%; margin-left:auto; margin-right:auto; }*/ /* 20220329 mod end */ .inqRow { flex-direction:column; } .inqRow > label { width:100%; justify-content:flex-start; text-indent:-3vw !important; } .inqRow label { font-size:1.1rem; } .inqRow.inqReq > label::after { margin-left:3vw; text-indent:0; } #inqProductDetailOpner { font-size:1.1rem; } #inqProductDetailTitle { margin-left:-5%; width:105%; } #inqProductDetail { width:105%; margin-left:-5%; } #inqProductDetail > .inqRow { width:100%; padding-left:5%; } .inqChk:not(:last-of-type) { margin-bottom:2vw; } .inqRadioBox input { border-radius:50%; } .inqRadioBox > div { display:flex; align-items:center; justify-content:flex-start; margin-bottom:2vw; } .inqRadioBox label { margin-left:0.5rem; margin-right:2rem; } .inqRadioBox > span { width:100%; margin-top:-2vw; } #numWidth, #numHeight { width:20vw; } .inquiry.btnArea { flex-direction:column; } .inquiry.btnArea > button { margin-bottom:5vw; width:90%; padding:3vw 0; } /* 20220329 mod start */ #faqAnchor { line-height:2; } #faqAnchor > a.faq { width:100%; display:inline-block; text-align:center; } #faqAnchor > a.faq > span::before { content:'\A'; white-space:pre; } /* 20220329 mod end */ #inqConfirm { width:90%; left:50%; transform:translate(-50%, -50%); } #inqConfItems { width:90%; } /* 20211001 add end */ /* 20220329 add start */ #inqText { flex-direction:column; } #inqDial { width:100%; margin-top:3rem; } .inqCol { flex-direction:column; } .inqCol > input:nth-child(2) { margin-top:1rem; } /* 20220329 add end */ /* 20211129 add start */ #catalog h2 { font-size:4vw; } #catalog .downbox { padding:0 !important; } #catalog .catalogLead { margin:0; } #catalog #inqForm { margin-bottom:0; } #catalog .formItems { justify-content:space-between; } #catalog .catItem { width:48%; } #catalog .catItem:nth-child(n+3) { margin-top:1rem; } #catalog .catItem:not(:nth-child(3n+1)) { margin-left:0; } #catalog .inqRow { display:block; } #catalog .inqRow > label { text-indent:0 !important; width:100%; } #catalog .inqRow input, .inqRow textarea { width:100%; } #catalog .inqRow .inqChk input { width:auto; } #catalog #inqConfirm h3 { margin:2rem auto; width:90%; font-size:4vw; } #Nsidemenu { width:100%; } /* 20211129 add end */ /* 20220802 add start */ #productImgBody { display:none; } #productImgBodyS { display:block; } .schoolCont { width:100%; } .schoolCont:nth-child(n+2) { margin-top:5rem; } .schoolImgBox { height:auto; padding:3rem 0; } #schoolMAnchor { border-width:3px; font-size:1rem; } .schoolSize { width:calc((100% - 1rem) / 2); } .schoolSize:nth-child(n + 3) { margin-top:1rem; } .schoolSize:nth-child(even) { margin-right:0; } .svBox { flex-direction:column; } .svTitle { margin-bottom:0.75rem; } .svImgBox { width:calc((100% - 1rem) / 2); } .svImgBox:nth-child(odd) { margin-right:1rem; } .svImgBox:nth-child(even) { margin-right:0; } .svImgBox:nth-child(n + 3) { margin-top:1rem; } #AnchorlCatAnchor { font-size:1rem; } #AnchorlCatAnchor::after { margin-right:1rem; } /* 20220802 add end */ /* 20230210 add start */ #bannerContents { margin:7rem auto 0; display: block; } .bannerAnchor { position: relative; overflow: hidden; max-height: 100px; height: 100%; } .bannerAnchor:nth-child(1) { display: block; margin: 0 auto; max-height: 150px; height: 100%;} .bannerAnchor:nth-child(n + 2) { display: block; margin: 1rem auto 0;} /* 20230210 add end */ /* 20230210 add start */ .idxInfoTitle { margin-bottom: 2rem;} .infoContent { display: block; width: 100%; } .infoContent:nth-child(1) { width: 100%; } .infoContent2 { display: block; width: 100%; } .infoContent2:nth-child(1) { width: 100%; } .infoItem { height: 100%; max-height: 100px; } .infoImg { height: 100%; max-height: 100px; } /* 20230210 add end */ .partitionList { position:relative; margin-top: 1rem; width: calc((100% / 3) - 4px);} .partitionItem { height: 100px; text-align: center; position: relative; overflow:hidden; } .partitionList:last-child{ margin-right: auto; } .specialBlock { display: block; width: 90vw !important; padding: 0 1rem; margin-top: 1rem;} .specialBlock > div { padding: 0;} .specialText{ width: 450px; border-bottom: none; line-height: 1.4; font-weight: bold; font-size: 10px;} .specialTextarea{ margin-left: 0; width: 100%; line-height: 1.4; border-bottom: none;} .specialImgContent { margin-top: 2rem; width: 100%; height: 200px; } .wrapperList:first-of-type > .wrapperBox > .wrapperImg { width: 100%; height: 200px;} .wrapperLists { display: flex; flex-wrap: wrap; justify-content: baseline; } .wrapperList{ width: calc(100%); margin-top: 2rem; } .wrapperBox{ position: relative; overflow: hidden; height: 100px;} .wrapperImg { height:100px; width: 100%} } @media screen and (max-width:480px){ #mlFeatures { background:#fff; margin-top:-1rem; padding-top:6rem; } .mlFeatureBox { margin-bottom:12rem; } .mlFeatureText > h1 { font-size:4.5vw; font-weight:normal; } .mlFeatureText > span { position:absolute; top:210%; left:-100%; width:200%; padding:0 1rem; } .mlFeatureText.mlFeatureTextL { width:51%; } .mlFeatureText.mlFeatureTextL > h1 { white-space:pre; flex-wrap:wrap; } .mlFeatureText.mlFeatureTextL > span { left:auto; top:120%; right:-100%; } #mlPentrayClose { margin-left:auto; margin-top:1rem; } #mlPentrayOpen { margin-right:auto; margin-top:1rem; } #mlSystem { margin-top:-1rem; padding-top:6rem; } .mlSystemCont { width:100%; } #mlSystemImgs { width:100%; margin:3rem 0; } #mlSystemThumbs { position:static; width:100%; } #mlCase { background:#fff; margin-top:-1rem; padding-top:6rem; } .mlCaseImgBox { transform: skew(-20deg); } .mlCaseImgBox > img { transform: skew(20deg) translateX(-30%); } #mlRelated { margin-top:-1rem; padding-top:6rem; } .mlModalBox > h1 { flex-direction:column; align-items:flex-start; } .mlModalBox > h1 > a { margin-left:auto; } #mlFootAnchor { flex-direction:column; width:60%; margin:0 auto; } #mlFootAnchor > a:nth-child(2) { margin:4rem 0; } /* 20230210 add start */ .underContents { display: block; } .underContent { width: calc((100% / 2) - 4px); height: 100px; } .underContentImg { height: 100px;} /* 20230210 add end */ }