@charset "utf-8"; /* CSS Document */ @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css); html { font-size:14px;font-size:1rem; } body { width: 100%; font-size: 10px; font-size: 1.0rem; line-height: 1.6; font-family: Roboto, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo , sans-serif; font-weight: 500; -webkit-text-size-adjust: 100%; padding: 0; font-feature-settings : "palt"; } body.pat5{padding-top:5rem;} a.anchor{ display: block; padding-top: 150px; margin-top: -150px; } @media screen and (max-width:767.98px){ body.pat5{padding-top:0rem;} a.anchor{ display: block; padding-top: 50px; margin-top: -50px; } } /*color*/ .bg-white-h{ background: rgba(255,255,255,1.00); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.35); box-shadow: 0px 3px 3px rgba(0,0,0,0.35); } .bg-wite-n{ background: rgba(255,255,255,1.00);} @media screen and (max-width:767.98px){ .bg-white-h{ background: rgba(255,255,255,0.00); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.0); box-shadow: 0px 3px 3px rgba(0,0,0,0.0); } .bg-wite-n{ background: rgba(255,255,255,0.00);} .bg-wite-n-w{ background: rgba(255,255,255,1.00); -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.35); box-shadow: 0px 3px 3px rgba(0,0,0,0.35);} } .bg-pro-g{ background: #00A33A; } .bg_keiei{background: #EA63A0;} .bg_kaigai{background: #FFAD4D;} .bg_seisan{background:#8A67AA;} .bg_kanri{background:#00ABEB; } .bg_hanro{background:#FCC800; } .bg_koujou{background:#E83E2E; } .bg_it{background:#2276BD; } /*typo*/ .page-title{text-align: center;background-image: url(../images/i_bg_bottom.png),url(../images/i_bg.jpg); background-size:auto 35%,cover; background-position: left bottom,center center; background-repeat: repeat-x,no-repeat; margin-bottom: 2em;height: 7em;padding-top: 3em; font-weight: 600;color: #ffffff;} .h2-01{font-weight: 600;line-height: 1.8em;position: relative; display: inline-block; padding: 0 55px;margin: 0em auto 1em auto;} .h2-01:before, .h2-01:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 1px; background-color: black; } .h2-01:before { left:0; } .h2-01:after { right: 0; } .display-5 { font-size: 3.5rem; font-weight: 900; line-height: 1.2; letter-spacing: 0.25em; } .title-f{font-size: 1.2em; font-weight: 600;text-align: center;} .title-f img{margin: 0 0.5em 0 0;} .text-shadow{ text-shadow: 3px 3px 3px rgba(0,0,0,0.32); } .n-title{font-size: 1.1em;} .text-self-lg{font-size: 1.6em; line-height: 1.6em;} @media screen and (max-width:767.98px){ .page-title{text-align: center; font-size: 1.6em; margin-bottom: 2em;height: 10em;padding-top: 4em; font-weight: 600;color: #ffffff;} h4{font-size: 1.2em;} .h2-01{font-size: 1.8rem;} .display-5 { font-size: 2.5rem; font-weight: 900; line-height: 1.2; letter-spacing: 0.25em; }} @media screen and (max-width:575.98px){ body{font-size: 0.95em;} .h2-01{font-size: 1.3rem;} .display-5 { font-size: 2.0rem; font-weight: 900; line-height: 1.2; letter-spacing: 0.25em; } .page-title{text-align: center; font-size: 1.4em; margin-bottom: 2em;height: 10em;padding-top: 5em; font-weight: 600;color: #ffffff;} } @media screen and (max-width:450px){ body{font-size: 0.8em;} .lead{font-size: 1em;} .h2-01{font-size: 1.0rem;} .display-5 { font-size: 1.5rem; font-weight: 900; line-height: 1.2; letter-spacing: 0.15em; } } @media screen and (max-width:991.98px){ .title-f{font-size: 1.1em; font-weight: 600;text-align: center;} } /*shadow*/ .shadow-sm{-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.35); box-shadow: 0px 3px 3px rgba(0,0,0,0.35);} .nav-home{display:none;} /*btn*/ .btn-border { display: inline-block; padding: 0.3em 1em; text-decoration: none; color: #333333; border: solid 1px #333333; border-radius: 4px; transition: .4s; background: #ffffff; } .btn-border:hover { background: #333333; color: white; } /*header*/ .navbar-light .navbar-toggler { border-color: rgba(0,0,0,0); } h1#sitename{margin: 0 10px 0 0;padding: 0;} h1#sitename img{width:190px;height:auto;} nav li a{font-size: 15px; font-weight: 900;} .navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 1.0); } .header-tel{ color: #000000; background-color: rgba(0,0,0,0.05); margin-left: 10px; } .header-tel .navbar-text{color: #000000; } .navbar-light .navbar-toggler-icon:after{content: "menu"; font-size: 12px;position:relative; color: #000000; top:20px;font-weight: 600;right: 0px;} @media(min-width: 992px){ .nav-link i{display: none;} } .nav-link i{ margin-right: 0.5em;} .nav-item:hover,.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .active{background:#00A33A;color: #ffffff; } .navbar-light .navbar-nav .active > .nav-link {background:#00A33A;color: #ffffff; } @media(min-width: 768px){ a[href^="tel:"]{ pointer-events: none; } } @media screen and (min-width:992px) and (max-width:1199.98px){ nav li a{font-size: 13px; font-weight: 900;} h1#sitename img{width:170px;height:auto;} } @media screen and (max-width:991.98px){.bg-white-h{background: rgba(255,255,255,0.00);} .nav-item{padding-left: 2em;border-bottom: 1px dashed rgba(0,0,0,0.24);} .header-tel{ color: #000000; background: rgba(0,0,0,0.00); padding-left: 3em; margin-left: 5px; } .shadow-sm{-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.0); box-shadow: 0px 0px 0px rgba(0,0,0,0.0);} h1#sitename img{width:160px;height:auto;} } @media screen and (max-width:767.98px){ .navbar-nav{background: rgba(253,253,253,1.00);} .header-tel{background: rgba(253,253,253,1.00); width: 100%;} } /*main*/ .jumbotron { background-image: url(../images/i_bg_bottom.png),url(../images/i_bg.jpg); background-size:auto,cover; background-position: left bottom,center 50%; background-repeat: repeat-x,no-repeat; margin-bottom: 0; } .j-690{height: 520px;} @media screen and (max-width:767.98px){ .j-690{height: 520px; padding-top: 5em;} .j-690 p{font-size: 0.8em;} } /*footer*/ address{font-size: 0.9em;line-height: normal;} img.brand-name{ width: 210px; height: auto; } footer a{color:rgba(0,0,0,0.64); } @media screen and (max-width:767.98px){img.brand-name{width: 160px;height: auto;padding: 5px 0;}} @media screen and (max-width:576.98px){img.brand-name{width: 130px;height: auto;padding: 5px 0;display: block;margin: 0 auto;}} /*list*/ .list-icon01 li{ border-bottom: 1px solid #666666;line-height: 2em; padding: 0.5em 3em 0.5em 1em;text-align: left; } .list-icon01 li::after{ font-family: "Font Awesome 5 Free"; content: "\f054";/*アイコンの種類*/ position: absolute; right : 1em;/*左端からのアイコンまでの距離*/ font-size: 1.8em; } .list-icon01 li a{color: rgba(67,67,67,1.00);} /*news list*/ .list-icon02{padding: 0.5em 0em 0.5em 0em; margin-bottom: 2em;} .list-icon02 li{position: relative;} .list-icon02 li a{ border-bottom: 1px solid rgba(0,0,0,0.30);line-height: 2em; padding: 0.5em 5em 0.5em 1em;text-align: left;display: block; } .list-icon02 li:first-child {border-top: 1px solid rgba(0,0,0,0.30);} .list-icon02 li a:after{ font-family: "Font Awesome 5 Free"; content: "\f054"; position: absolute; right : 1.5em; font-size: 1.8em; color: rgba(0,0,0,0.30); top:30%; } .list-icon02 li a{color: rgba(67,67,67,1.00);} .list-icon02 li:hover{background: rgba(0,0,0,0.05); } .list-icon02 li a:hover{text-decoration: none;} .list-icon02 li span{font-size:0.9em; color: rgba(0,0,0,0.60);} .list_banner{padding: 1.5em 0 ;} .list_banner li{width: 19%; background: #ffffff; margin: 0.2em 0;} .list-2col{width: 100%;} .list-2col li{width: 48%; margin: 0.5em; float: left;padding: 1em; background:#E4E4E4;text-align: center; } .list-2col li a{color: rgba(0,0,0,0.88);} .row-height { display: flex; flex-wrap: wrap; } @media screen and (max-width:1199.98px){ .list_banner li{width: 18.6%; background: #ffffff;} } @media screen and (max-width:991.98px){ .list-2col li{width: 46%;} } @media screen and (max-width:767.98px){ .list_banner li{width: 30%;} } @media screen and (max-width:575.98px){ .list_banner li{width: 45.8%;} .list-2col li{width: 46%;} } @media screen and (max-width:460px){ .list-2col li{width: 100%;} } /*map*/ iframe{width: 100%;height: 350px;} /* ページトップ */ #page_top{ width: 50px; height: 50px; position: fixed; right: 0.5em; bottom: 0.5em; background: #00A33A; opacity: 1.0; border-radius: 50%; } #page_top a{ position: relative; display: block; width: 50px; height: 35px; text-decoration: none; } #page_top a::before{ font-family: "Font Awesome 5 Free"; content: '\f139'; font-weight: 900; font-size: 25px; color: #fff; position: absolute; width: 25px; height: 25px; top: 0; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; } /* トグルclose */ button[aria-expanded="true"] > span { position: relative; display: none; } button[aria-expanded="true"]::after { position: relative; /*top: 20px; right: 20px;*/ font-size: 35px; content: "\002716";font-weight: 600; }