/*==================================== ---------------------------------- Structure ---------------------------------- 0. General 1. Header 2. Main 3. Footer ---------------------------------- Change Log ---------------------------------- -2017/7/31 Fixed all ====================================*/ /*==================================== 0. General ====================================*/ @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: 600; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: 700; } @font-face { font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: 800; } @font-face { font-family: "Yu Mincho"; src: local("Yu Mincho Regular"); font-weight: 500; } @font-face { font-weight: 500; font-family: "Yu Mincho"; src: local("Yu Mincho Regular"); } .noto { font-family: 'Noto Sans Japanese', sans-serif; } .mincho { font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } html { font-size: 62.5%; } body { position: relative; background: url(/common/img/page_bg.jpg) no-repeat 75% 100% / 200% auto; color: #202020; font-size: 1.0rem; font-family:"游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; } img { vertical-align: bottom; } a { color: #202020; text-decoration: none; } a:hover { opacity: 0.8; text-decoration: underline; } ul, ol { list-style: none; } .pcOnly { display: none !important; } #page-top { position: fixed; right: 3vw; bottom: 3vw; z-index: 100; } #page-top a { display: block; width: 13vw; height: 13vw; background: url(/img/icon_pagetop.png) no-repeat 0 0 / 13vw auto; text-indent:-9999px; } /*==================================== 1. Header ====================================*/ header { position: relative; background: url(/img/sp_bg_logo.png) no-repeat 0 0 / auto 14.3vw; } header div.inner { overflow: visible; height: 14vw; position: relative; width: 100vw; } header h1 { margin: 2vw 0 0 5vw; width: 78vw; float: left; } header h1 img { width: 53vw; height: auto; } #gnav { position: relative; } #panel-btn { z-index: 2000; position: absolute; display: inline-block; margin: 2.3vw 4.6vw 0 0; padding: 3.4vmin; width: 12.5vw; height: 12.5vw; text-indent: -9999px; background: #202020; border-radius: 50%; } #panel-btn.cls { background: #ffffff; } #panel-btn-icon { position: absolute; top: 50%; left: 50%; display: block; margin: -0.3vw 0 0 -2.1vw; width: 4.2vw; height: 2px; background: #ffffff; transition: .2s; } #panel-btn-icon:before, #panel-btn-icon:after { position: absolute; top: 50%; left: 0; display: block; width: 4.2vw; height: 2px; background: #ffffff; content: ""; transition: .3s; } #panel-btn-icon:before { margin-top: -6px; } #panel-btn-icon:after { margin-top: 4px; } #panel-btn .close { background: transparent; } #panel-btn .close:before, #panel-btn .close:after { margin-top: 0; background: #202020; } #panel-btn .close:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #panel-btn .close:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .gnav { position: absolute; top: 0; z-index: 1000; display: none; width: 100%; background: #202020; box-shadow: 0 0 3px rgba(0,0,0,0.2); padding: 11.5vw 4vw 2vw; } .gnav nav { margin-bottom: 9.3vw; } .gnav nav li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #fff002; font-size: 1.6rem; } .gnav nav li a { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 4.6vw 0 4.6vw 5vw; width: 100%; text-decoration: none; color: #ffffff; font-weight: bold; position: relative; } .gnav nav li a:before { position: absolute; top: 50%; left: 0; margin-top: -1.1vw; width: 2.3vw; height: 2.3vw; background: url(/img/icon_arrow_yellow.png) no-repeat 0 0 / 2.3vw auto; content: ""; } .gnav address { font-style: normal; } .gnav address li { border-bottom: none; text-align: center; color: #ffffff; margin-bottom: 5vw; } .gnav address li span { display: block; } .gnav address li span:nth-child(1) { font-size: 2.7rem; margin-bottom: 2vw; } .gnav address li span:nth-child(1) a { color: #ffffff; text-decoration: underline; } .gnav address li span:nth-child(2) { font-size: 1.4rem; } header address em { font-style: normal; } /*==================================== 2. Main ====================================*/ main { font-size: 1.6rem; line-height: 1.4; } main h1 { padding: 7.5vw 0 0; color: #ffffff; text-align: center; font-size: 2.6rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; height: 26.2vw } body.topBG { background-position: 50% 0; background-size: auto 111vw; } body.strength { background: url(/img/title_bg_strength.png) no-repeat 50% 0 / auto 40.6vw; } body.products { background: url(/img/title_bg_products.png) no-repeat 50% 0 / auto 40.6vw; } body.works { background: url(/img/title_bg_works.png) no-repeat 50% 0 / auto 40.6vw; } body.works main h1 { font-size: 1.9rem; } body.company { background: url(/img/title_bg_company.png) no-repeat 50% 0 / auto 40.6vw; } body.privacy { background: url(/img/title_bg_privacy.png) no-repeat 50% 0 / auto 40.6vw; } body.contact { background: url(/img/title_bg_contact.png) no-repeat 50% 0 / auto 40.6vw; } body.contact main h1 { font-size: 1.9rem; } section.discription { margin-bottom: 5.4vw; padding: 12vw 4.6vw 9vw; background: #fff002 url(/img/bg_discription.png) repeat-x 0 0 / auto 10vw; text-align: center; } body.strength section.discription { padding-bottom: 45vw; background-color: #fff002; background-image: url(/img/bg_discription.png), url(/img/bg_strength.png); background-repeat: repeat-x, no-repeat; background-position: 0 0, 20vw 98%; background-size: auto 10vw, 220vw auto; } section.discription h2 { margin-bottom: 4.6vw; font-size: 2rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.discription p { font-size: 1.6rem; line-height: 1.6; text-align: left; } /*ここまで*/ section.discription h3 { margin: 5vw auto; padding-top: 5vw; border-top: 1px solid #333333; font-size: 2.4rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.discription ol { margin-top: -4vw; } section.discription ol li { border-top: 1px solid rgba(51,51,51,0.5); position: relative; padding: 16vw 0 3vw; font-size: 1.8rem; line-height: 1.7; } section.discription ol li:nth-child(1) { border: none; } section.discription ol li:before { position: absolute; top: 3vw; left: 50%; margin-left: -27px; width: 12vw; height: 12vw; background: url(/img/bg_circle.png) no-repeat 0 0 / 12vw auto; text-align: center; font-size: 2.6rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; line-height: 12vw; } section.discription ol li:nth-child(1):before { content: "1"; } section.discription ol li:nth-child(2):before { content: "2"; } section.discription ol li:nth-child(3):before { content: "3"; } section.topBlock01 { height: 108vw; background: url(/img/bg_top_block01.png) no-repeat 50% 100% / 76vw auto, url(/img/bg_top_block01-1.png) repeat-x 0 100% / auto 24vw; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.topBlock01 div.inner { height: inherit; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position: relative; } section.topBlock01 h2 { position: absolute; top: 5vw; left: 22vw; color: #ffffff; font-size: 1.7rem; line-height: 3; } section.topBlock01 p { position: absolute; top: 21vw; left: 5vw; font-size: 1.6rem; } section.topBlock01 p a { position: relative; display: inline-block; padding: 4.8vw 1vw 0 0; border-right: 1px solid #ffffff; color: #ffffff; } section.topBlock01 p a:before { position: absolute; top: 0; left: 50%; margin-left: -2vw; width: 4vw; height: 4vw; background: url(/img/icon_arrow_black.png) no-repeat 0 0 / 4vw auto; content: ""; } section.topBlock01 p a:hover { text-decoration: none; } section.topBlock02 { margin-bottom: 5vw; padding: 0 4.6vw 3vw; background: #fff002; text-align: center; } section.topBlock02 h2 { margin-bottom: 3vw; font-size: 2rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.topBlock02 p { margin-bottom: 6.2vw; font-size: 1.6rem; line-height: 1.8; } section.topBlock02 p a { position: relative; padding-left: 30px; color: #ffffff; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; display: inline-block; background: #000000; border-radius: 8px; padding: 2.3vw 7vw 2.3vw 10vw; } section.topBlock02 p a:before { position: absolute; top: 50%; left: 5vw; margin-top: -5px; width: 11px; height: 11px; background: url(/img/icon_arrow_white.png) no-repeat; content: ""; } section.topBlock03 { margin: 0 8.4vw 8vw; } section.topBlock03 ul { text-align: center; } section.topBlock03 li { padding-top: 42.5vw; margin-bottom: 3vw; width: 83.2vw; height: 93vw; text-align: center; } section.topBlock03 li:nth-child(1) { background: url(/img/bg_top_nav01.png) no-repeat 0 100% / 100% auto; } section.topBlock03 li:nth-child(2) { background: url(/img/bg_top_nav02.png) no-repeat 0 100% / 100% auto; } section.topBlock03 dt { margin-bottom: 1.5vw; font-size: 2.4rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.topBlock03 dt a { position: relative; padding-left: 9.3vw; } section.topBlock03 dt a:before { position: absolute; top: 50%; left: 0; margin-top: -3vw; width: 6vw; height: 6vw; background: url(/img/icon_arrow_black.png) no-repeat 0 0 / 6vw auto; content: ""; } section.topBlock03 dd { font-size: 1.6rem; line-height: 1.6; } section.strengthBlock { margin: 0 4.6vw; } section.strengthBlock p { margin-bottom: 1.5em; line-height: 1.6; } section.strengthBlock figure { margin: -2vw 0 6vw; } section.strengthBlock figure img { width: 100%; height: auto; } section.stateBlock { margin: 0 0 4.6vw; padding: 0 4vw; border: 3px solid #fff002; text-align: center; } section.stateBlock h2 { margin-bottom: 6vw; padding: 0.7vw 0; background: url(/img/bg_title2.png) no-repeat 50% 0; color: #ffffff; font-size: 1.8rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.stateBlock figure { margin-bottom: 6vw; } section.stateBlock figure img { width: 100%; height: auto; } section.stateBlock figure img.small { width: 80%; } section.stateBlock figcaption { margin-top: 1vw; } section.flowBlock { margin-bottom: 4.6vw; padding: 4.6vw; background: #f6f6f6; text-align: center; } section.flowBlock h2 { display: inline-block; margin-bottom: 5vw; padding: 0 1vw; background: linear-gradient(transparent 70%, #fff002 70%); font-size: 2.2rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.flowBlock figure { margin-bottom: 4vw; } section.flowBlock figure img { width: 50%; height: auto; } section.flowBlock p { font-size: 1.6rem; line-height: 1.6; text-align: left; } section.messageBlock { margin: 0 4.6vw 4.6vw; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.messageBlock.president p { background: url(/img/company_img01.png) no-repeat 0 0 / 181.6vw auto; } section.messageBlock.factory p { background: url(/img/strength_img10.png) no-repeat 0 0 / 181.6vw auto; } section.messageBlock h2 { padding: 2vw 0; margin-bottom: 3vw; background: #fff002; text-align: center; font-size: 1.8rem; } section.messageBlock p { line-height: 1.6; padding-top: 63vw; } section.productsList1 { margin: 0 4.6vw 4.6vw; } section.productsList1 p { margin-bottom: 1em; text-align: center; font-weight: bold; font-size: 1.8rem; } section.productsList1 table { width: 100%; border-collapse: collapse; margin-bottom: 3vw; } section.productsList1 th, section.productsList1 td { padding: 2vw; border: 1px solid #cccccc; text-align: center; } section.productsList1 th { background: #333333; color: #ffffff; font-weight: normal; } section.productsList2 { margin: 0 4.6vw 4.6vw; } section.productsList2 li { margin-bottom: 3vw; background: #f0f0f0; } section.productsList2 .productName { padding: 4vw; background: #fff002; } section.productsList2 .productName dt { margin-bottom: 1vw; font-weight: bold; font-size: 1.8rem; } section.productsList2 .productDetail { display: block; overflow: hidden; padding: 3vw; zoom: 1; } section.productsList2 .productDetail dt { float: left; width: 28vw; text-align: center; } section.productsList2 .productDetail dt img { max-width: 100%; height: auto; } section.productsList2 .productDetail dd { margin-left: 30vw; font-size: 1.4rem; line-height: 1.6; } section.productsList2 .productDetail dd.ex { margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid #333333; font-weight: bold; } section.productsList2 figure img { width: 100%; height: auto; } section.worksList { margin: 0 4.6vw 4.6vw; } section.worksList table { width: 100%; margin-top: -3vw; } section.worksList tr { display: block; border-bottom: 1px solid #333333; padding: 3vw 0 3vw 5vw; background: url(/img/icon_dot.svg) no-repeat 0.3em 1.1em / 2vw auto; } section.worksList tr:first-child { display: none; } section.worksList tr td:nth-child(1) { font-weight: bold; } section.worksList tr td:nth-child(2):before { content: "V：" } section.worksList tr td:nth-child(3):before { content: "W：" } section.worksList tr td:nth-child(4):before { content: "バルブ：" } section.worksList tr td:nth-child(5):before { content: "口金：" } section.worksList tr td:nth-child(6):before { content: "用途：" } section.worksList td { display: block; } section.companyInfo { margin: 0 4.6vw 4.6vw; } section.companyInfo table { width: 100%; border-collapse: collapse; } section.companyInfo th { padding-bottom: 1vw; display: block; } section.companyInfo td { margin-bottom: 2vw; padding-bottom: 2vw; border-bottom: 1px solid #333333; display: block; } section.companyInfo th { text-align: left; } section.companyInfo iframe { margin: 4.6vw 0; width: 100%; } section.privacyBlock { padding: 4.6vw; background: #ffffff; } section.privacyBlock p { margin-bottom: 1.5em; } section.privacyBlock dl { border-top: 1px solid #cccccc; } section.privacyBlock dt { margin-bottom: 0.5em; padding-top: 1.5em; font-weight: bold; font-variant-caps: 1.8rem; } section.privacyBlock dd {padding-bottom: 1.5em; border-bottom: 1px solid #cccccc; } section.privacyBlock dd ol { margin: 0.5em 0 0 1em; list-style: decimal; } section.contactBlock { margin: 0 4.6vw 4.6vw; } section.contactBlock div.ex { padding: 4vw; background: #f0f0f0; } section.contactBlock div.ex dl { text-align: center; font-size: 1.6rem; line-height: 1.6; } section.contactBlock div.ex dd { font-weight: bold; font-size: 2.6rem; } section.contactBlock div.ex span { font-size: 1.2rem; display: block; } section.contactBlock div.ex h3 { margin-bottom: 2vw; text-align: center; font-size: 1.8rem; } section.contactBlock div.ex ul { margin-left: 2em; list-style: disc; font-size: 1.4rem; line-height: 1.6; } section.contactBlock em { font-style: normal; } section.contactForm { margin: 0 4.6vw 8vw; } section.contactForm p { padding-bottom: 5vw; border-bottom: 1px solid #cccccc; margin-bottom: 3vw; line-height: 1.6; } section.contactForm span.required { display: inline-block; margin-right: 2vw; padding: 1vw 3vw; background: #fff002; font-weight: bold; font-size: 1.2rem; } section.contactForm table { margin-bottom: 8vw; width: 100%; } section.contactForm th { display: block; padding-bottom: 2vw; text-align: left; } section.contactForm td { display: block; padding-bottom: 3vw; margin-bottom: 3vw; border-bottom: 1px solid #cccccc; } section.contactForm input[type=text], section.contactForm input[type=tel], section.contactForm input[type=email] { padding: 1vw; width: 90.8vw; border: 1px solid #abadb3; } section.contactForm select { padding: 1vw; width: 90.8vw; border: 1px solid #abadb3; background:url("/img/icon_select.png") 96% 50% / 10px no-repeat; } section.contactForm input[type=radio], section.contactForm input[type=checkbox] { margin-right: 3px; } section.contactForm textarea { margin-top: 10px; padding: 1vw; width: 90.8vw; height: 8em; border: 1px solid #abadb3; } section.contactForm div.submitBtn { text-align: center; } section.contactForm div.submitBtn input { display: inline-block; margin: 0 1vw 3vw; width: 60vw; height: 12vw; background: url(/img/bg_btn.png) no-repeat 0 0 / 60vw auto; font-size: 1.6rem; font-weight: bold; } section.contactForm div.submitBtn input.back { background: url(/img/bg_btn_back.png) no-repeat 0 0 / 60vw auto; } section.contactForm div.submitBtn input.backS { background: url(/img/icon_arrow_black3.png) no-repeat 25% 50% / 3vw auto; } .fdA { margin: 9vw 0 5vw; padding: 0 0 2vw; border-bottom: 1px solid #333333; font-size: 2.4rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; line-height: 1.2; text-align: center; } .fdA span { position: relative; font-size: 2rem; display: block; padding-left: 10.9vw; } .fdA span:before { position: absolute; top: -4.5vw; left: 50%; margin-left: -16.7vw; width: 12.5vw; height: 16vw; background: url(/img/bg_title.svg) no-repeat 0 0 / auto 15.6vw; content: ""; } .fdA em { font-weight: normal; font-style: normal; font-size: 4rem; } .fdB { position: relative; margin: 14vw 0 5vw; padding: 0 0 2vw 11vw; border-bottom: 1px solid #333333; font-size: 1.9rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; line-height: 1; } .fdB:before { margin-top: -14vw; position: absolute; top: 50%; left: 0; width: 12.5vw; height: 16vw; background: url(/img/bg_title.svg) no-repeat 0 0 / auto 15.6vw; content: ""; } .fdB span { font-size: 1.4rem; display: block; } /*==================================== 3. Footer ====================================*/ footer { text-align: center; font-size: 1.6rem; } footer address { margin-bottom: 4.6vw; padding: 6vw 4.6vw 4.6vw; background: #f0f0f0; font-style: normal; font-weight: bold; } footer address dt { padding: 3.1vw 0 2.1vw; margin-bottom: 3.1vw; border-top: 1px solid #202020; border-bottom: 1px solid #202020; text-align: center; font-size: 1.8rem; } footer address li span { display: block; } footer address li span:first-child { margin-bottom: 2vw; font-size: 2.6rem; } footer address li span:first-child a { text-decoration: underline; } footer address li span:last-child { font-size: 1.4rem; margin-bottom: 4vw; } footer address em { font-style: normal; } footer div.contact dt { margin-bottom: 2vw; font-weight: bold; font-size: 1.8rem; } footer div.contact dd { margin-bottom: 2vw; line-height: 1.4; } footer div.contact dd:last-child { font-size: 1.3rem; } footer nav { margin-bottom: 4vw; } footer nav a { text-decoration: underline; }