/* 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; } a { text-decoration:none; color:#333; transition:0.3s all ease; } a:hover { color:#122f8d; } ul {list-style:none; } .mt7r { margin-top:7rem; } /*ヘッダーメニュー設定 ---------------------------------------------------------------------------*/ 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:997px; margin:0 auto; } header .inner { width:997px; 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; } header#newHeader .headerBody > .pcHL { width:90%; max-width:1280px; position:absolute; top:50%; left:50%; transform:translateX(-50%); } 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; } 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; }*/ header#newHeader .headerBody .headerLogo { position:absolute; top:50%; transform:translateY(-50%); display:flex; max-width:13vw; } 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:997px; 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:997px; 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:997px; margin:0 auto; } #contentsFull { width:100%; margin:0 auto; position:relative; } #contentsFull #main { width:997px; margin:0 auto; } /*フッターメニュー設定 ---------------------------------------------------------------------------*/ 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; } /*フッター設定 ---------------------------------------------------------------------------*/ footer {color: #FFF;background-color:#0e5ca7;border-top: 10px solid #122f8d;border-bottom: 10px solid #122f8d; } footer a { color: #FFF; text-decoration:none; } 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: 997px; 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; } #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:35%; bottom:auto; left:1vw; } /* 20210730 mod end */ .mainText01 > div { position:relative; } .mainText01 svg.mainText { width:36vw; 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; } #subContents { margin:2.5rem auto 5rem; display:flex; justify-content:space-between; width:90vw; max-width:1280px; } #subContentsL { width:70%; } #subContentsL #contentsAnchor { display:block; } #subContentsL #contentsAnchor:hover { opacity:0.75; } #subContentsL #contentsAnchor > img, #subContentsL #contentsAnchor > picture > img { width:100%; } #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; } .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 */ /* 製品一覧・詳細共通　デザイン変更後 ---------------------------------------------------------------------------*/ .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:997px; /*margin: -0.4rem 0;*/ padding: 0 1.75rem; } /* 製品詳細　デザイン変更後 ---------------------------------------------------------------------------*/ #itemTitleBox { width: 997px; 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:997px; } #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: 997px; 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:997px; 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';} /* 製品一覧　デザイン変更後 ---------------------------------------------------------------------------*/ #productMain *{ box-sizing:border-box; } #productMain{ width:100%; max-width:997px; margin-top:1.25rem; margin-bottom:6rem; padding-top:5rem; } #productMain a{ text-decoration:none; } #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; } #porductImg > img{ max-width:100%; overflow:hidden; } #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; } #porductImgCont h1{ font-size:1.75rem; line-height:1; } #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; } #productCateAnchor{ width:100%; max-width:997px; margin:1.5rem auto 0; display:-ms-flex; display:flex; justify-content:space-between; -ms-align-items:center; align-items:center; /* 20210823 add */ flex-direction:column; } #productCond { width:100%; } /* 20210823 add start */ #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; } #freeText { width:60%; border:1px solid #254494; } #freeSeach { color:#fff; background-color:#254494; padding:0.2rem 1.5rem; letter-spacing:1rem; text-indent:1rem; border-radius:30px; outline:none; } /* 20210823 add 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 */ #categoryAnchor{ margin-top:6rem; display:-ms-flex; display:flex; justify-content:space-between; -ms-align-items:flex-start; align-items:flex-start; flex-wrap:wrap; } .cateBox{ width:calc((100% - 2.5rem) / 2); display:-ms-flex; display:flex; -ms-flex-direction:column; flex-direction:column; justify-content:space-between; -ms-align-items:center; align-items:center; } .cateBox:nth-child(n+3){ margin-top:2.75rem; } .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; } .cateImg { height:16.875rem; -ms-display:flex; display:flex; justify-content:center; -ms-align-items:center; align-items:center; margin-bottom:2.75rem; } .cateImg > a { height:100%; } .cateImg > img{ max-height:100%; } .cateLead{ font-size:1.125rem; font-weight:bold; padding-bottom:2rem; line-height:1; } .cateLinks { width:100%; font-size:1rem; font-weight: normal; line-height:1.5; padding: 0 1rem; /*word-break: keep-all;*/ text-align: justify; min-height:9rem; /*min-height:9rem;*/ margin-bottom:2rem; } .cateLinks > span:not(:last-child)::after { content:'　/　'; } .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; } .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:-0.25rem; margin-bottom:1.75rem; } .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; } .relatedBox { width:calc((997px - 2.75rem) / 2); display:-ms-flex; display:flex; -ms-flex-direction: column; flex-direction: column; -ms-align-items:center; align-items:center; } .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; } .relatedImg { -ms-display:flex; display:flex; -ms-flex-direction: column; flex-direction: column; -ms-align-items:center; align-items:center; margin-top:3rem; } .relatedImg > img{ height:16.875rem; } .relatedImg > h1{ font-size:1.125rem; margin-top:2.25rem; } .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:3rem; padding:1rem 0; } .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; } 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:997px; margin:2rem auto 0; display:flex; justify-content:flex-start; align-items:flex-start; } .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; border:5px 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:997px; 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:997px; 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:997px; 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 > p { margin-top:3rem; } #inqText, #inqTextCaution { margin:2rem 0 3rem; } #inqText > p { margin-top:1rem; } .inqRow { display:flex; justify-content:flex-start; margin:1rem 0; } .inqCol { display:flex; flex-grow:1; } .inqRow > label { width:20%; margin-right:2rem; display:flex; align-items:center; justify-content:space-between; } .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; } .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; } .inqChk > a { text-decoration:underline; color:#f00; } .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-right:1rem; } #inqProductDetailTitle { padding-bottom:0.5rem; border-bottom:1px solid #0e5ca7; } #inqProductDetailOpner { color:#000; display:flex; align-items:center; } #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; } 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); } #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:1; 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 */ /* 20211013 news add start */ #main .new { overflow: auto; height: 1000px; width: 690px; padding-left: 10px; } #main .new dl { clear: left; width: 670px; border-bottom: 1px solid #cccccc; overflow: hidden; padding-top:10px; } #main .new dt { font-weight: bold; float: left; width: 100px; } #main .new dd { float: left; width: 570px; } #main .new dd a { text-decoration:underline; } #main .new dd img { vertical-align: middle; } /* 20211013 news add end */ /* 20211021 metalline new add start */ #mainMetal { width:100%; height:100vh; background-image:url('images/metalline.jpg'); background-image:url('images/metalline.webp'); background-position:center; background-size:cover; position:relative; } #mainMetal::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.25); } .fredericka { font-family: 'Fredericka the Great', cursive, YuGothic, "游ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; color:#fff; font-size:4rem; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); animation:metalline1 5s both linear; opacity:0; } #mainMetal .mainText { position:absolute; top:50%; left:50%; transform:translate(-50%, -40%); width:26%; text-align:justify; animation:metalline2 2s 5s both linear; opacity:0; } #mainMetal .mainText > h1 { font-size:3rem; color:#fff; line-height:1.5; } #mainMetal .mainText > div { font-size:1.25rem; color:#fff; margin-bottom:2rem; } #mainMetal .mainText > span { color:#fff; display:block; line-height:1.5; } #mainMetal .mainText > h1, #mainMetal .mainText > div { font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; text-align:center; } #mainMetal .mainText > h1 > span, #mainMetal .mainText > div > span { color:#ffc800; } #metalNav { position:absolute; right:5rem; top:40%; z-index:10; } #metalNav.fixed { position:fixed; top:10rem; } #metalNav > ul { display:flex; flex-direction:column; height:8rem; justify-content:space-between; } #metalNav li { line-height:1; position:relative; } #metalNav li:not(:last-child)::after { content:''; height:1.5rem; position:absolute; left:0.4rem; top:90%; border-left:2px solid #aaa; } #metalNav a { color:#aaa; font-weight:bold; } #metalNav a.focus, #metalNav a:hover, #metalNav a:hover::before { color:#333; content:'\f10c'; } #metalNav a::before { content:'\f111'; font-family:fontawesome; color:#aaa; font-size:1rem; padding-right:1rem; } #metalNav a.focus::before { content:'\f10c'; color:#333; font-weight:bold; } #metalFeature { position:relative; padding: 3rem 0;} #metalFeature > div { width:90vw; max-width:960px; margin:0 auto; } #metalFeature > div > div { margin-bottom:1rem; } .metalContentTitle { font-size:1.75rem; font-family: 'Cinzel', serif; line-height:1; } .metalContentTitle::first-letter { font-size:4rem; color:#ffc800; line-height:1; } .metalContentTitle > div { font-size:1rem; font-family:YuGothic, "游ゴシック", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; position:relative; display:inline-flex; align-items:center; line-height:1; } .metalContentTitle > div::before, .metalContentTitle > div::after { content:''; border-bottom:1px solid #000; width:1rem; margin:0 1rem; } .metalContentTitle > div > span { color:#ffc800; } .metalFeatureContent.rr { display:flex; flex-direction:row-reverse; } .metalFeatureContent > div.flexCol { display:flex; flex-direction:column; margin-left:3rem; } .metalFeatureContent > div.flexRow { display:flex; } .metalFeatureContent > div.flexRow > div:first-child { display:flex; flex-direction:column; margin-right:2rem; width:50%; } .metalFeatureContent > div.flexRow > div:first-child > span { margin:0.5rem 0 0.75rem; display:block; } .metalFeatureContent > div.flexRow > div:last-child { display:flex; justify-content:center; width:50%; } .metalFeatureContent { margin-bottom:1rem; } .metalFeatureContent > span { margin:0.5rem 0 0.75rem; display:block; } .metalFeatureContent article:first-child { margin-bottom:1rem; } .sideLogo { position: absolute; width: auto !important; transform:rotate(90deg) translate(50%, -100%); transform-origin:top left; } .sideLogo.fixed { position:fixed; bottom:50%; transform:rotate(90deg) translate(-50%, -100%); } .numIcon { font-weight:normal; position:relative; font-size:1.125rem; } .numIcon::before { content:''; width:0.5rem; height:0.5rem; background-color:#ffc800; bottom:50%; left:0; position:absolute; } .numIcon::after { content:''; width:0.5rem; height:0.5rem; background-color:#ffc800; top:50%; ; left:0.5rem; position:absolute; } .numIcon > span { font-family: 'Cinzel', serif; padding:0 0.5rem 0 1.75rem; } #metalSpec { padding:3rem 0 2rem; background-image:url('images/metallineBg.jpg'); background-image:url('images/metallineBg.webp'); background-position:center; background-size:cover; background-repeat:no-repeat; } #metalSpec > div { width:90vw; max-width:960px; margin:0 auto; } .specTableBox { display:flex; justify-content:space-between; margin-top:1rem; } .specTableBox:nth-last-child(-n+2) { margin-top:1.5rem; } .specDetail { display:flex; flex-direction:column; justify-content:space-between; align-items:center; width:30%; } .specDetail .numIcon { width:100%; } .specDetail span { padding-bottom:1.5rem; } .specTable { width:65%; border-collapse:collapse; } .specTable th, .specTable td { text-align:center; vertical-align:middle; border:1px solid #000; padding:0.5rem 0; } .specTable caption { caption-side:bottom; text-align:right; font-size:0.75rem; } #metalHow2use { padding:3rem 0 2rem; } #metalHow2use > div { width:90vw; max-width:960px; margin:0 auto; } #metalHow2use > div img { margin-top:1rem; } .howFlex { display:flex; justify-content:space-between; align-items:flex-start; } .howFlex > div { width:33%; text-align:justify; } .howFlex img { margin-top:0 !important; } .supplement { font-size:0.675rem; text-align:right; display:block; padding-top:1rem; } .bottomLogo { margin:4rem auto !important; display:flex; align-items:center; justify-content:center; height:0; } @keyframes metalline1 { 0% {opacity:0; } 35% {opacity:1; } 40% { transform:translate(-50%, -50%) rotateX(0); } 70% { transform:translate(-50%, -50%) rotateX(1080deg); opacity:1; } 80% { transform:translate(-50%, -50%) rotateX(1280deg); opacity:1; } 90% { transform:translate(-50%, -50%) rotateX(1440deg); opacity:1; } 100% { transform:translate(-50%, -50%) rotateX(1440deg); opacity:0; } } @keyframes metalline2 { 0% {} 25% { opacity:0; } 100% { opacity:1; } } /* 20211021 metalline new add end */ /* 20211019 faq page add start */ #faq { margin:6rem auto 3rem; width:90%; max-width:997px; } #faqTitle { font-size:1.75rem; color:#254594; text-align:center; } #faqCate { display:flex; justify-content:space-between; margin:3rem 1rem;} #faqCate > a { width:calc(100% / 6); display:flex; justify-content:space-around; align-items:center; flex-direction:column; } #faqCate > a > img { max-width:70%; } #faqBody { margin-top:2rem; } #faqBody > .faqContTitle { background-color:#254594; color:#fff; padding:0.5rem 2rem; border-radius:0 1rem; margin-bottom:1.5rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; } #faqBody > .faqContTitle::after { content:'\f13a'; font-family:fontawesome; transition:0.75s; } #faqBody > .faqContTitle.active::after { transform:rotateZ(180deg); } #faqBody > .faqContTitle + .faqCont:nth-of-type(n + 2) { display:none; } .faqCont > div { display:flex; align-items:flex-start; } .faqCont > div a { color:#fff; text-decoration:underline; } .faqCont .q::before, .faqCont .a::after { content:'\f007'; font-family:fontawesome; font-size:6rem; color:#254594; line-height:normal; margin-right:2rem; } .faqCont .q > p, .faqCont .a > p { position:relative; display:flex; justify-content:flex-start; background-color:#254594; border-radius:1.25rem; font-size:1.125rem; color:#fff; padding:1.5rem 1.5rem 1.5rem 6rem; width:75%; text-align:justify; font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; line-height:normal; } .faqCont .q > p::before, .faqCont .a > p::before { content:''; position:absolute; top:2.5rem; left:0; border-right:1rem solid #254594; border-top:0.5rem solid transparent; border-bottom:0.5rem solid transparent; transform:translateX(-95%); } .faqCont .q > p::after, .faqCont .a > p::after { content:'Q'; position:absolute; top:1.25rem; left:2rem; font-size:2.5rem; line-height:1; } .faqCont >div.a { justify-content:flex-end; margin-bottom:3rem; } .faqCont >div.a:last-child { margin-bottom:5rem; } .faqCont .a::after { color:#3364db; line-height:normal; margin-left:2rem; margin-right:0; } .faqCont .a > p { background-color:#3364db; padding:1.5rem 6rem 1.5rem 1.5rem; } .faqCont .a > p::before { left:auto; right:0; border-left:1rem solid #3364db; border-right:none; transform:translateX(95%); } .faqCont .a > p::after { content:'A'; left:auto; right:2rem; } /* 20211019 faq page add end */ @media screen and (max-width:1600px){ html, body { font-size:12px; } 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 a { font-size:1rem; }*/ } /* 製品一覧・詳細共通　デザイン変更後 ---------------------------------------------------------------------------*/ @media screen and (max-width:1420px){ html, body { font-size:1vw; } .content { width:100%; max-width: 997px; 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%; } } @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%; } #subContentsL #purpose > a { width:49%; } #subContentsR { width:30%; } .relationAnchor > div { justify-content:flex-start; margin-left:2%; } } @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; } header#newHeader .headerBody .headerLogo { width:35vw; max-width:35vw; transform:translate(-65%, -50%); } 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%; } #porductImg > img { height:auto; } #porductImgCont { top:0.5rem; left:0.5rem; padding:0.5rem; width:calc(100% - 1rem); height:calc(100% - 1rem); } #porductImgCont h1 { font-size:1.25rem; } #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; } #productCateAnchor { flex-direction:column; width:90%; } .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; } #mainContents { flex-direction:column; align-items:center; margin-bottom:4rem; } #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%; } #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; } .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 */ #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; } .cateBox:nth-child(n+2) { margin-top:2.75rem; } .cateImg { height:auto; } .cateImg > img { max-width:100%; } .cateLinks { min-height:auto; } #productMain a { line-height:1; font-size:0.8rem; } #productMain a::before, #productMain a::after { font-size:1rem; } .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 */ .freeText { padding-bottom:0.5rem; } .freeText > h2 { font-size:1.125rem; } #freeText { width:50%; margin-left:auto; } #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::after { border-width:1rem; } .wrapper .content .contentC { font-size:0.85rem; } .itemDetail { padding:0; font-size:0.85rem; 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 */ #inquiry { width:80%; margin-left:auto; margin-right:auto; } .inqRow { flex-direction:column; } .inqRow > label { width:100%; justify-content:flex-start; text-indent:-3vw !important; } .inqRow.inqReq > label::after { margin-left:3vw; text-indent:0; } #inqProductDetailTitle { margin-left:-5%; width:105%; } #inqProductDetail { width:105%; margin-left:-5%; } #inqProductDetail > .inqRow { width:95%; margin-left:auto; } .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; } #inqConfirm { width:90%; left:50%; transform:translate(-50%, -50%); } #inqConfItems { width:90%; } /* 20211001 add end */ /* 20211019 faq page add start */ #faqCate { flex-wrap:wrap; } #faqCate > a { width:calc(100% / 2.125); } #faqCate > a:nth-child(n + 3) { margin-top:5vw; } .faqCont > .q { margin-bottom:3vw; } .faqCont .q::before, .faqCont .a::after { line-height:1; } .faqCont .q > p, .faqCont .a > p { min-height:6rem;} /* 20211019 faq page add end */ /* 20211021 metalline add start */ #mainMetal .mainText { width:90%; top:30%; } #mainMetal .mainText > span { font-size:3.5vw; } /* 20211021 metalline add start */ }