@charset "UTF-8"; /*-------------------------------------------------- ************************************************** リセット ************************************************** --------------------------------------------------*/ /* 内で html5reset.css を読み込んでます */ /*-------------------------------------------------- ************************************************** デフォルト ************************************************** --------------------------------------------------*/ /* 内で default.css を読み込んでます */ /*-------------------------------------------------- ************************************************** 基本 ************************************************** --------------------------------------------------*/ body { margin:0px; padding:0px; background:none repeat scroll 0% 0%; background-attachment:scroll; font-family: 'Barlow', "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; /* ゴシック */ line-height: 1.6; letter-spacing: 0.8px; -webkit-text-size-adjust:100%; font-size: 14px; font-weight: 400; color:#333; width:100%; overflow-x:hidden; } img{ max-width:100%; height:auto; vertical-align:bottom; } #wrapper{ position:relative; overflow:hidden; } .contents_inner{ width:90%; margin-left:auto; margin-right:auto; } body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color:#FFF; z-index: 9999; pointer-events: none; opacity: 0; -webkit-transition: opacity .3s ease; -ms- transition: opacity .2s ease; -moz- transition: opacity .3s ease; transition: opacity .3s ease; } body.fadeout::after { opacity: 1; } body.company_body.fadeout::after { opacity: 0 !important; } /*-------------------------------------------------- ************************************************** テキスト・フォント ************************************************** --------------------------------------------------*/ .red { color:#ff0000;} .blue { color:#0000ff;} .green { color:#008000;} .black { color:#000; } .white { color:#fff; } .Noto_Serif{ font-family:'Noto Serif JP', serif; } .mincho{ font-family:"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif; } /*-------------------------------------------------- ************************************************** リンク系（アンカー） ************************************************** --------------------------------------------------*/ a { color: #CC0000; text-decoration: none; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } a:hover { color: #CC0000; text-decoration: underline; } a img{ display: block; transition: 0.5s; } /* -- CSSで画像を整形していたら -- */ a.opa:hover { -ms-filter: "alpha( opacity=70 )"; filter: alpha( opacity=70 ); opacity: 0.7; } /* フォームのsubmitを解除(iOS) */ input[type="submit"]{ -webkit-appearance:none; border-radius:0; } /*-------------------------------------------------- ************************************************** ヘッダー ************************************************** --------------------------------------------------*/ .hd_home{ position:fixed; width:100%; height:70px; z-index:2; background:#FFF; } .hd_logo{ position:fixed; top:15px; left:20px; z-index:200; width:auto; height: 30px; } .hd_logo img { width: 149px; height: 30px; } .hd_logo.actived{ position:fixed; } /*-------------------------------------------------- ************************************************** グローバルナビゲーション ************************************************** --------------------------------------------------*/ /* ハンバーガーアイコン */ .Toggle { position:fixed; top:14px; right:15px; display:block; width:42px; height:42px; cursor:pointer; z-index:200; } .Toggle.actived{ position:fixed; } header .Toggle span { position:absolute; left:6px; display:block; width:30px; border-bottom:#333 1px solid; -webkit-transition: .35s ease-in-out; /*変化の速度を指定*/ transition: .35s ease-in-out; /*変化の速度を指定*/ } .Toggle span:nth-child(1) { top: 9px; } .Toggle span:nth-child(2) { top: 18px; } .Toggle span:nth-child(3) { top: 27px; } .Toggle.actived span{ border-color: #333; } /* 最初のspanをマイナス45度に */ .Toggle.actived span:nth-child(1) { top: 18px; left: 6px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* 2番目と3番目のspanを45度に */ .Toggle.actived span:nth-child(2), .Toggle.actived span:nth-child(3) { top: 18px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* メニュー */ #nav_wrap{ visibility:hidden; opacity:0; position:fixed; top:0; right:0; bottom:0; left:0; display:flex !important; justify-content:center; align-items:center; transition: opacity .6s ease, visibility .6s ease; } body.actived{ overflow:hidden; } #nav_wrap.actived{ visibility:visible; opacity:1; z-index:100; width:100%; background-color:#fff; } #nav_wrap li{ opacity:0; transform:translateX(0px); transition:transform .05s ease, opacity .05s ease; margin:25px; text-align:center; } /* #nav_wrap li:nth-child(2){ transition-delay:.05s; } #nav_wrap li:nth-child(3){ transition-delay:.05s; } #nav_wrap li:nth-child(4){ transition-delay:.05s; } #nav_wrap li:nth-child(5){ transition-delay:.05s; } #nav_wrap li:nth-child(6){ transition-delay:.05s; } #nav_wrap li:nth-child(7){ transition-delay:.05s; } #nav_wrap li:nth-child(8){ transition-delay:.05s; } #nav_wrap li:nth-child(9){ transition-delay:.05s; } */ #nav_wrap.actived li{ opacity:1; transform:translateX(0); /*transition: transform 1.4s ease, opacity 1.4s ease;*/ transition: transform 0.1s ease, opacity 0.1s ease; } #nav_wrap li a{ font-size:14px; letter-spacing:0.3em; color:#444; } #nav_wrap li a[href*="#floor"]{ display:block; margin:auto; } #nav_wrap li a[href$="#floor01"], #nav_wrap li a[href$="#floor04"], #nav_wrap li a[href$="#floor05"]{ width:30px; } #nav_wrap li a[href$="#floor0203"]{ width:81px; } #nav_wrap li a:hover{ text-decoration:none; } /*-------------------------------------------------- ************************************************** パンくず ************************************************** --------------------------------------------------*/ .breadcrumb{ width:100%; margin:0 auto; font-size:13px; color:#111; font-weight:500; padding:30px 5vw; -webkit-overflow-scrolling:touch; white-space:nowrap; overflow:auto; } .breadcrumb a{ color:#111; margin:0 10px 0 0; } .breadcrumb > span > span{ color: #111; margin:0 10px; } /*-------------------------------------------------- ************************************************** メインコンテンツ ************************************************** --------------------------------------------------*/ /*-------------------------------------------------- ************************************************** 下層ページ ************************************************** --------------------------------------------------*/ section h1 { width:90%; margin:80px auto 0; font-size:10vw; } section h1 span { display:block; font-size:3.4vw; color:#e63c3c; position:relative; padding-left:12vw; margin-top:5px; } section h1 span::before { content:""; width:10vw; height:1px; background:#e63c3c; position:absolute; left:0; top:2.8vw; } /*-------------------------------------------------- ************************************************** モジュール系 ************************************************** --------------------------------------------------*/ .box_shadow_1{ box-shadow:10px 10px 10px 0px rgba(33,55,64,0.3); } /*-------------------------------------------------- ************************************************** フッター ************************************************** --------------------------------------------------*/ footer { margin-top:90px; background:#f5f5f5; padding:50px 0 0; } footer.common_footer { margin-top:0 !important; } .footer_sitemap .footer_logo { width:50%; } .footer_sitemap ul { margin-top:20px; display: flex; flex-wrap: wrap; } .footer_sitemap ul li { width: 50%; margin:10px 0 0; } .footer_sitemap ul li a { font-size:3.6vw; color:#000; font-weight:500; } .footer_info { display: flex; flex-direction: column-reverse; border-top:1px solid #c0c0c0; margin-top:40px; } .footer_info ul { margin-top:40px; } .footer_info ul li { width: 100%; height:100px; } .footer_info ul li a { width:100%; height:100px; display:flex; background:#FFF; justify-content:center; align-items:center; color:#e63c3c; font-size:3.6vw; font-weight:500; } .footer_info ul li:nth-child(2) a { width:100%; height:100px; display:flex; color:#FFF; justify-content:center; align-items:center; background:#e63c3c; font-size:4vw; font-weight:500; } .footer_info ul li a span { display:block; background:url(imgs/common/icon_mail_red.png) no-repeat center top; background-size: 9vw auto; padding-top:10vw; line-height:1em; } .footer_info ul li:nth-child(2) a span { display:block; background:url(imgs/common/icon_tel_white.png) no-repeat center top; background-size: 7vw auto; padding-top:10vw; line-height:1em; } .footer_info .footer_address { text-align:left; margin-top:40px; } .footer_address .company_name { font-size:5vw; font-weight:700; } .footer_address .license { margin-top:5px; font-size:3.2vw; font-weight:500; line-height:1.8em; } .footer_address .f_address { margin-top:5px; font-weight:500; font-size:3.2vw; line-height:1.8em; } .footer_address .f_address a { color:#111; text-decoration:none; } .f_btn_arrow { margin-top:30px; margin-left:auto; } .f_btn_arrow a { border:1px solid #000; color:#000; font-size:3.6vw; padding:10px 30px; display:inline-block; font-weight:500; } .f_btn_arrow a span { position:relative; display:flex; align-items:center; justify-content:center; } .f_btn_arrow a span::after { content: ''; width: 40px; height: 5px; border-bottom: solid 1px; border-right: solid 1px; transform: skew(45deg); margin-left:50px; } .f_btn_arrow a:hover { text-decoration:none; } #copyright{ padding:30px 0; background:#e63c3c; color:#FFF; font-size:3.6vw; letter-spacing:0.1em; margin-top:50px; } #copyright small{ font-size:3.6vw; } /*-------------------------------------------------- ************************************************** その他 (PageUpボタン 追従系 jsに関わるcssなど。) ************************************************** --------------------------------------------------*/ /* フェードイン */ .scroll_fade_bottom{ opacity:0; transform:translateY(150px); transition:800ms; } .scroll_fade_right{ opacity:0; transform:translateX(150px); transition:800ms; } .scroll_fade_left{ opacity:0; transform:translateX(-150px); transition:800ms; }