@charset "utf-8"; /* * ========================================================================== * * ベースレイアウトCSS * * ========================================================================== */ /* * -------------------------------------------------------------------------- * reset * -------------------------------------------------------------------------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset { border:none; } fieldset,img { border: none; vertical-align: top; } address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } q:before,q:after { content: ''; } abbr,acronym { border: none; } body, h1, h2, h3, h4, h5, h6, p, li, dl, pre, form, blockquote, fieldset, input, address { margin: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /** * -------------------------------------------------------------------------- * link * -------------------------------------------------------------------------- */ body #pcube_cont a { color: #000; text-decoration: none; } body #pcube_cont a:link { color: #000; text-decoration: none; } body #pcube_cont a:visited { color: #000; text-decoration: none; } body #pcube_cont a:hover { color: #000; text-decoration: underline; } body #pcube_cont a:active { color: #000; text-decoration: underline; } /** * -------------------------------------------------------------------------- * body * -------------------------------------------------------------------------- */ body #pcube_cont { font: 85%/1.5em "Meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", Osaka, sans-serif; color: #000000; width: 100%; background: #ffffff; position: relative; } #wrapper { width: 100%; height: 100%; position: relative; } /** * -------------------------------------------------------------------------- * wrapper * -------------------------------------------------------------------------- */ /*PC*/ @media only screen and (min-width: 769px) { .sp_parts { content: "."; display: none; height: 0 !important; clear: both; visibility: hidden; margin: 0 !important; padding: 0 !important; width: 0px !important; } #common_head { width: 100%; height: 223px; margin: 0 auto; text-align: center; } #common_head h1 { padding: 50px 0 0 0; } #common_head h1 a:hover { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; } #common_head h1 img { width: 350px; } #menuList { width: 1110px; margin: 50px auto 0 auto; } #menuList { text-align: center; } #menuList li { float: left; margin: 0 20px 0 0; } #menuList li:last-child { margin: 0; } #menuList li a { display: inline-block; border-bottom: 3px solid #000000; padding: 3px 5px 5px 5px; } #menuList li a:hover { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } #menuList li.select { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } #menuList li.select a:hover { filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #menuList li.gnav01 img { height: 11px; } #menuList li.gnav02 img { height: 10px; } #menuList li.gnav03 img { height: 10px; } #menuList li.gnav04 img { height: 10px; } #menuList li.gnav05 img { height: 10px; } #menuList li.gnav06 img { height: 10px; } #menuList li.gnav07 img { height: 10px; } #menuList li.gnav08 img { height: 16px; } #container { width: 100%; margin: 0 auto 100px auto; } #sns_area { width: 228px; margin: 100px auto 0 auto; } #sns_area li { width: 60px; float: left; margin: 0 24px 0 0; } #sns_area li img { width: 60px; } #sns_area li.last { margin: 0; } #sns_area li a:hover { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .btn_pro { width: 451px; height: 114px; text-align: center; border: 1px solid #000000; margin: 90px auto 0 auto; } .btn_dc { width: 451px; height: 115px; text-align: center; border: 1px solid #000000; margin: 75px auto 0 auto; } .btn_dc02 { width: 451px; height: 115px; text-align: center; border: 1px solid #000000; margin: 40px auto 0 auto; } .btn_pro img { width: 450px; } .btn_dc img { width: 449px; height: 113px; } .btn_dc02 img { width: 449px; height: 113px; } .btn_dc a:hover, .btn_dc02 a:hover, .btn_pro a:hover { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } } /*タブレット*/ @media only screen and (min-width: 769px) and (max-width: 1110px) { #common_head { height: 130px; } #common_head h1 { padding: 40px 0 0 0; } #common_head p { position: absolute; top: 23px; right: 10px; } #common_head p.sp_parts { display: block; height: auto !important; visibility: visible; width: auto !important; } #common_head p img { width: 85%; } #menuList { display: none; width: 100%; background-color: #E6E6E6; position: absolute; z-index: 1000000; top: 80px; text-align: center; } #menuList li { width: 100%; margin: 0 auto; border-bottom: 1px solid #A5A5A5; } #menuList li a { border-bottom: none; } #menuList li img { padding: 25px 0; } #menuList li.gnav01 img { height: 12px; } } /*スマホ*/ @media only screen and (max-width: 768px) { .st-mobileMenu { z-index: 100000000001; } #pcube_cont { max-width: 100vw !important; } .pc_parts { content: "."; display: none; height: 0 !important; clear: both; visibility: hidden; margin: 0 !important; padding: 0 !important; width: 0px !important; } #common_head { width: 100%; position: relative; margin: 0 auto; text-align: center; } #common_head h1 { position: absolute; top: 30px; left: 0; } #common_head h1 img { width: 50%; } #common_head p { position: absolute; top: 10px; right: 10px; } #common_head p img { width: 65%; } #menuList { display: none; width: 100%; background-color: #E6E6E6; position: absolute; z-index:1000000; top: 80px; } #menuList { text-align: center; } #menuList li { width: 100%; margin: 0 auto; border-bottom: 1px solid #A5A5A5; } #menuList li img { height: 10px; } #menuList li.gnav01 img { height: 12px; } #menuList li.gnav08 img { height: 17px; } #menuList li a { width: 100%; display: inline-block; } #menuList li img { padding: 25px 0; } #container { width: 100%; margin: 0 auto 58px auto; } #sns_area { width: 50%; margin: 35px auto 0 auto; display: -webkit-flex; /* Safari */ display: flex; -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; } #sns_area li { width: 30%; } #sns_area li.last { } #sns_area li img { width: 100%; } .btn_pro { width: 70%; text-align: center; margin: 45px auto 0 auto; } .btn_dc { width: 70%; text-align: center; margin: 45px auto 0 auto; padding: 1px 0 0 0; } .btn_dc02 { width: 70%; text-align: center; margin: 40px auto 0 auto; } .btn_dc img, .btn_dc02 img, .btn_pro img { width: 90%; border: 1px solid #000000; } }