/*==================================== ---------------------------------- Structure ---------------------------------- 0. General 1. Header 2. Main 3. Footer ---------------------------------- Change Log ---------------------------------- -2017/9/9 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"); } .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; color: #202020; font-size: 1.0rem; font-family:"游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; line-height: 1.5; } img { vertical-align: bottom; } a { color: #202020; text-decoration: none; cursor: pointer; } a:hover { text-decoration: none; opacity: 0.8; } ul, ol { list-style: none; } div.inner { position: relative; display: block; overflow: hidden; margin: 0 auto; width: 1000px; zoom: 1; } .spOnly { display: none !important; } #page-top { position: fixed; right: 20px; bottom: 20px; z-index: 100; padding-bottom: 20px; } #page-top a { display: block; width: 55px; height: 55px; background: url(/img/icon_pagetop.png) no-repeat 0 0; text-indent:-9999px; } /*==================================== 1. Header ====================================*/ header { height: 135px; background: url(/img/bg_logo.png) no-repeat 50% 0; line-height: 1; } header div.inner { height: 135px; } header h1 { position: absolute; top: 10px; left: 0; } header nav { position: absolute; top: 100px; left: 0; } header ul { display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } header nav li { background: url(/img/bg_nav.png) no-repeat 0 3px; } header nav li:nth-child(1) { width: 149px; } header nav li:nth-child(2) { width: 214px; } header nav li:nth-child(3) { width: 199px; } header nav li:nth-child(4) { width: 270px; } header nav li:nth-child(5) { width: 168px; background: url(/img/bg_nav.png) no-repeat 0 3px, url(/img/bg_nav.png) no-repeat 100% 3px; } header nav ul span { font-size: 1.4rem;} header nav ul a { display: block; padding-bottom: 17px; color: #ffffff; text-align: center; font-weight: bold; font-size: 1.6rem; } header nav ul a:hover, header nav ul a.active { border-bottom: 2px solid #fff002; opacity: 1; } header address { position: absolute; top: 18px; right: 0; font-style: normal; font-weight: bold; } header address li { color: #ffffff; } header address li:last-child { margin-left: 35px; } header address li span { display: block; } header address li span:first-child { margin-bottom: 5px; font-size: 2.6rem; } header address li span:last-child { font-size: 1.2rem; } header address em { font-style: normal; } /*==================================== 2. Main ====================================*/ main { min-width: 1000px; font-size: 1.6rem; } main h1 { padding: 55px 0; color: #ffffff; text-align: center; font-size: 3.6rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } body.topBG { background-position: 50% 0; background-size: auto 816px; } body.strength { background: url(/img/title_bg_strength.png) no-repeat 50% 0 / auto 300px; } body.products { background: url(/img/title_bg_products.png) no-repeat 50% 0 / auto 300px; } body.works { background: url(/img/title_bg_works.png) no-repeat 50% 0 / auto 300px; } body.works main h1 { font-size: 2.8rem; } body.company { background: url(/img/title_bg_company.png) no-repeat 50% 0 / auto 300px; } body.privacy { background: url(/img/title_bg_privacy.png) no-repeat 50% 0 / auto 300px; } body.contact { background: url(/img/title_bg_contact.png) no-repeat 50% 0 / auto 300px; } section.discription { margin-bottom: 35px; padding: 100px 0 70px; background: #fff002 url(/img/bg_discription.png) repeat-x; text-align: center; } body.strength section.discription { 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, 50% 142px; } section.discription h2 { margin-bottom: 25px; font-size: 3rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.discription p { font-size: 1.8rem; line-height: 2; } section.discription h3 { margin: 40px auto 30px; padding-top: 40px; width: 1000px; 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 { display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; margin: 0 auto; width: 1000px; text-align: left; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } section.discription ol li { position: relative; padding-top: 78px; width: 295px; font-size: 1.8rem; line-height: 1.7; } section.discription ol li:nth-child(2) { margin: 0 30px; padding: 78px 30px 0; width: 350px; border-right: 1px solid #333333; border-left: 1px solid #333333; } section.discription ol li:before { position: absolute; top: 0; left: 50%; margin-left: -27px; width: 55px; height: 55px; background: url(/img/bg_circle.png) no-repeat; text-align: center; font-size: 3rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; line-height: 55px; } 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 { padding-top: 95px; height: 728px; background: url(/img/bg_top_block01.png) no-repeat 50% 100%, url(/img/bg_top_block01-1.png) repeat-x 0 100%; 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; } section.topBlock01 h2 { position: absolute; top: 10px; left: 50%; margin-left: -200px; height: 330px; color: #ffffff; font-size: 2.4rem; line-height: 4.1; } section.topBlock01 p { position: absolute; top: 95px; left: 140px; font-size: 1.8rem; } section.topBlock01 p a { position: relative; display: inline-block; padding: 27px 3px 0 0; border-right: 1px solid #ffffff; color: #ffffff; } section.topBlock01 p a:before { position: absolute; top: 0; left: 50%; margin-left: -11px; width: 22px; height: 22px; background: url(/img/icon_arrow_black.png) no-repeat 0 0 / 22px auto; content: ""; } section.topBlock02 { margin-bottom: 30px; padding-bottom: 40px; background: #fff002; text-align: center; } section.topBlock02 h2 { margin-bottom: 20px; font-size: 2.6rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.topBlock02 p { margin-bottom: 40px; font-size: 1.8rem; line-height: 2; } section.topBlock02 p a { background: #000000; display: inline-block; position: relative; padding: 8px 50px 8px 70px; color: #ffffff; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; border-radius: 8px; } section.topBlock02 p a:before { position: absolute; top: 50%; left: 40px; margin-top: -5px; width: 11px; height: 11px; background: url(/img/icon_arrow_white.png) no-repeat; content: ""; } section.topBlock03 { margin-bottom: 40px; } section.topBlock03 ul { text-align: center; } section.topBlock03 li { display: inline-block; margin: 0 35px; padding-top: 180px; width: 352px; height: 400px; text-align: center; } section.topBlock03 li:nth-child(1) { background: url(/img/bg_top_nav01.png) no-repeat 0 100%; } section.topBlock03 li:nth-child(2) { background: url(/img/bg_top_nav02.png) no-repeat 0 100%; } section.topBlock03 dt { margin-bottom: 10px; font-weight: bold; font-size: 2.6rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.topBlock03 dd { font-size: 1.8rem; line-height: 1.8; } section.topBlock03 dt a { position: relative; padding-left: 40px; border-right: 1px solid #ffffff; } section.topBlock03 dt a:before { position: absolute; top: 50%; left: 0; margin-top: -15px; width: 26px; height: 26px; background: url(/img/icon_arrow_black.png) no-repeat 0 0 / 26px auto; content: ""; } section.strengthBlock { margin: 0 auto; width: 1000px; } section.strengthBlock p { margin-bottom: 1.5em; text-align: center; line-height: 1.9; } section.strengthBlock .colBlock .fdA { display: block !important; text-align: left; } section.strengthBlock .colBlock p { text-align: left; } section.stateBlock { margin-bottom: 40px; border: 3px solid #fff002; text-align: center; } section.stateBlock h2 { margin-bottom: 20px; padding: 5px 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 { display: inline-block; margin: 0 7px 25px; } section.stateBlock figcaption { margin-top: 10px; } section.flowBlock { margin-bottom: 50px; padding: 50px 0; background: #f6f6f6; text-align: center; } section.flowBlock h2 { display: inline-block; margin-bottom: 45px; padding: 0 5px; 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: 40px; } section.flowBlock p { font-size: 1.8rem; line-height: 2; } section.messageBlock { margin-bottom: 50px; height: 435px; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; } section.messageBlock.president { background: url(/img/company_img01.png) no-repeat 50% 0; } section.messageBlock.factory { background: url(/img/strength_img10.png) no-repeat 50% 0; } section.messageBlock h2 { display: inline-block; margin: 23px 0 35px 450px; padding: 15px 55px; background: #fff002; text-align: center; font-size: 1.8rem; } section.messageBlock p { margin-left: 533px; line-height: 2; } section.productsList1 { display: block; overflow: hidden; margin: 0 auto 50px; width: 1000px; zoom: 1; } section.productsList1 p { margin-bottom: 1.5em; text-align: center; font-weight: bold; font-size: 1.8rem; } section.productsList1 table { float: left; margin-left: 10px; width: 245px; border-collapse: collapse; } section.productsList1 th, section.productsList1 td { padding: 4px 7px; border: 1px solid #cccccc; text-align: center; } section.productsList1 th { background: #333333; color: #ffffff; font-weight: normal; } section.productsList1 table.w490 { margin-left: 0; width: 490px; } section.productsList2 { margin: 0 auto 50px; width: 1000px; } section.productsList2 li { margin-bottom: 40px; background: #f0f0f0; } section.productsList2 .productName { padding: 15px 25px; background: #fff002; } section.productsList2 .productName dt { margin-bottom: 2px; font-weight: bold; font-size: 1.8rem; } section.productsList2 .productDetail { display: block; overflow: hidden; padding: 20px 30px 20px 0; zoom: 1; } section.productsList2 .productDetail dt { float: left; width: 200px; text-align: center; } section.productsList2 .productDetail dd { margin-left: 200px; font-size: 1.4rem; line-height: 2; } section.productsList2 .productDetail dd.ex { margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid #333333; font-weight: bold; } section.worksList { margin: 0 auto 50px; width: 1000px; } section.worksList table { width: 100%; border-collapse: collapse; } section.worksList th, section.worksList td { padding: 7px; border: 1px solid #cccccc; } section.worksList th { background: #333333; color: #ffffff; font-weight: normal; } section.companyInfo { margin: 0 auto 40px; width: 1000px; } section.companyInfo table { width: 100%; border-collapse: collapse; border-top: 1px solid #cccccc; } section.companyInfo th, section.companyInfo td { padding: 13px 0; border-bottom: 1px solid #cccccc; } section.companyInfo th { width: 160px; text-align: left; font-weight: normal; } section.companyInfo iframe { margin: 20px 0 55px; } section.privacyBlock { margin: 50px auto 65px; width: 1000px; } 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: 40px auto 60px; width: 1000px; } section.contactBlock div.ex { padding: 30px 40px; background: #f0f0f0; } section.contactBlock div.ex dl { text-align: center; font-size: 1.6rem; line-height: 2; } section.contactBlock div.ex dd { font-weight: bold; font-size: 2.6rem; vertical-align: middle; } section.contactBlock div.ex span { font-size: 1.2rem; vertical-align: middle; } section.contactBlock div.ex h3 { margin-bottom: 15px; text-align: center; font-size: 2rem; } section.contactBlock div.ex ul { margin-left: 2em; list-style: disc; font-size: 1.4rem; line-height: 2; } section.contactBlock div.ex em { font-style: normal; } section.contactForm { margin: -30px auto 40px; width: 1000px; } section.contactForm p { margin-bottom: 30px; line-height: 2; } section.contactForm span.required { display: inline-block; margin-right: 6px; padding: 2px 7px; background: #fff002; font-weight: bold; font-size: 1.2rem; } section.contactForm table { margin-bottom: 30px; width: 100%; border-collapse: collapse; border-top: 1px solid #cccccc; } section.contactForm th, section.contactForm td { padding: 15px 0; border-bottom: 1px solid #cccccc; text-align: left; } section.contactForm th { padding: 20px 0; width: 240px; } section.contactForm input[type=text], section.contactForm input[type=tel], section.contactForm input[type=email] { padding: 7px 10px; width: 405px; border: 1px solid #abadb3; } section.contactForm select { padding: 7px 10px; width: 405px; 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: 7px 10px; width: 720px; height: 15em; border: 1px solid #abadb3; } section.contactForm div.submitBtn { text-align: center; } section.contactForm div.submitBtn input { display: inline-block; margin: 0 10px; width: 286px; height: 55px; background: url(/img/bg_btn.png) no-repeat; font-size: 2rem; font-weight: bold; cursor: pointer; vertical-align: middle; } section.contactForm div.submitBtn input.back { background: url(/img/bg_btn_back.png) no-repeat; } section.contactForm div.error { text-align: center; margin-bottom: 50px; } section.contactForm div.error h3 { color: #dd0000; margin-bottom: 25px; } section.contactForm div.error p { margin-bottom: 5px; } .fdA { position: relative; display: inline-block; margin: 20px 0 15px; padding: 0 0 10px 50px; border-bottom: 1px solid #333333; font-size: 2.6rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; line-height: 1; } .fdA:before { position: absolute; top: -25px; left: 0; width: 55px; height: 70px; background: url(/img/bg_title.svg); content: ""; } .fdA span { font-size: 2rem; } .fdA em { font-weight: normal; font-style: normal; font-size: 5rem; } .fdB { position: relative; display: inline-block; margin: 40px 0 25px; padding: 0 5px 15px 50px; border-bottom: 1px solid #333333; font-size: 2.6rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; line-height: 1; } .fdB:before { position: absolute; top: -45px; left: 0; width: 55px; height: 70px; background: url(/img/bg_title.svg); content: ""; } /*==================================== 3. Footer ====================================*/ footer { font-size: 1.4rem; line-height: 1; } footer address { margin-bottom: 30px; padding: 35px 0; background: #f0f0f0; font-style: normal; font-weight: bold; } footer address dt { float: left; padding: 20px 0; width: 360px; border-top: 1px solid #202020; border-bottom: 1px solid #202020; text-align: center; font-size: 1.8rem; } footer address dd { float: right; margin-top: 7px; } footer address ul { display:-webkit-box; display:-moz-box; display:-ms-box; display:-webkit-flexbox; display:-moz-flexbox; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex; -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; } footer address li:last-child { margin-left: 35px; } footer address li span { display: block; } footer address li span:first-child { margin-bottom: 5px; font-size: 2.6rem; } footer address li span:last-child { font-size: 1.2rem; } footer address em { font-style: normal; } footer div.contact { float: left; } footer div.contact dt { margin-bottom: 15px; font-weight: bold; font-size: 1.6rem; } footer div.contact dd { margin-bottom: 15px; line-height: 1.7; } footer nav { float: right; } footer nav a { text-decoration: underline; }