/* 8Stance　共通 */ /** * * 初期化 * */ * { margin: 0; padding: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /* font-weightは　https://developer.mozilla.org/ja/docs/Web/CSS/font-weight　の「一般的な太さ名との対応」に合わせた */ @font-face { font-family: 'Lora'; src: url(./static/Lora-Regular.ttf); font-weight: normal; font-style: normal; } @font-face { font-family: 'Lora'; src: url(./static/Lora-Bold.ttf); font-weight: bold; font-style: normal; } @font-face { font-family: 'Lora'; src: url(./static/Lora-Medium.ttf); font-weight: 500; font-style: normal; } @font-face { font-family: 'Lora'; src: url(./static/Lora-SemiBold.ttf); font-weight: 600; font-style: normal; } @font-face { font-family: 'Lora'; src: url(./static/Lora-Italic.ttf); font-weight: normal; font-style: italic; } @font-face { font-family: 'Lora'; src: url(./static/Lora-BoldItalic.ttf); font-weight: bold; font-style: italic; } @font-face { font-family: 'Lora'; src: url(./static/Lora-MediumItalic.ttf); font-weight: 500; font-style: italic; } @font-face { font-family: 'Lora'; src: url(./static/Lora-SemiBoldItalic.ttf); font-weight: 600; font-style: italic; } .LoraNomalNormal{ font-family: "Lora", sans-serif; font-weight: normal; font-style: normal; } .LoraNomalBold{ font-family: "Lora", sans-serif; font-weight: bold; font-style: normal; } .LoraNomalMedium{ font-family: "Lora", sans-serif; font-weight: 500; font-style: normal; } .LoraNomalSemiBold{ font-family: "Lora", sans-serif; font-weight: 600; font-style: normal; } .LoraItalicNormal{ font-family: "Lora", sans-serif; font-weight: normal; font-style: italic; } .LoraItalicBold{ font-family: "Lora", sans-serif; font-weight: bold; font-style: italic; } .LoraItalicMedium{ font-family: "Lora", sans-serif; font-weight: 500; font-style: italic; } .LoraItalicSemiBold{ font-family: "Lora", sans-serif; font-weight: 600; font-style: italic; } html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { outline:0; border:0; background:transparent; vertical-align:baseline; font-size:100%; } body { color:#333; font-size:16px; letter-spacing: 4px; /* font-family: Verdana, "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-family: 'Noto Sans JP', sans-serif, Verdana, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */ font-family: 'Noto Sans JP', sans-serif, Verdana, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; /* font-weight: bold; /* */ line-height:180%; position: relative; word-wrap:break-word; } h1,h2,h3,h4,h5,h6, .copyright{ font-family: 'Robot','Noto Sans JP', sans-serif, Verdana, "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 600; font-style: normal; } .copyright{ font-weight: normal; } .disp640{display:none;} .hide640{display:block;} .dispTab{display:none;} .hideTab{display:block;} br.hide640, br.disp640{ line-height: 0em; } ol,ul { list-style:none; } blockquote,q { quotes:none; } :focus { outline:0; } ins { text-decoration:none; } del { text-decoration:line-through; } table { border-spacing:0; border-collapse:collapse; } /** * * 共通定義 * */ em { font-style:italic; } .boundary{ clear: both; margin-bottom: 40px; } .clear{ clear: both; } .clearfix:before, .clearfix:after { content: ""; clear: both; display: block; } p{ text-align: justify; text-justify: inter-ideograph; } .small{ font-size: 12px; } img{ vertical-align: bottom; /* アスペクト比固定のまま最大自幅で伸縮 */ max-width: 100%; height: auto; /* 角丸標準装備 */ /* border-radius: 5px; /* CSS3草案 */ /* -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ /* -moz-border-radius: 5px; /* Firefox用 */ } /* WordPressで挿入した画像のラッパー */ [id*="attachment_"]{ width: 100% !important; } .fSmall{ font-size: 12px !important; } /* 画像hoverで拡大 */ .imageBoyoyon img { -moz-transition: -moz-transform 0.5s linear; -webkit-transition: -webkit-transform 0.5s linear; -o-transition: -o-transform 0.5s linear; -ms-transition: -ms-transform 0.5s linear; transition: transform 0.5s linear; } .imageBoyoyon img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } a{ color: #333; text-decoration: none; /* アニメーション */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; } a:hover{ text-decoration: none; filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity:0.70; opacity:0.70; } .over { -webkit-transition:.3s ease-in-out; -moz-transition:.3s ease-in-out; -o-transition:.3s ease-in-out; transition:.3s ease-in-out; /* アニメーション */ /* -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; */ } body.home .wrap_main a, body.page .wrap_main a, body.single .wrap_main a{ /* color: #00f; text-decoration: underline; */ } .over:hover { text-decoration: none; filter:alpha(opacity=60); -moz-opacity:0.60; -khtml-opacity:0.60; opacity:0.60; } a.noOpacity:hover{ /* オレンジはっきり出すため透過しない */ filter:alpha(opacity=100); -moz-opacity:1.00; -khtml-opacity:1.00; opacity:1.00; } /* の下層要素が透過動作しない場合の対処 */ a.noOpacity img, a.noOpacity h1, a.noOpacity h2, a.noOpacity h3, a.noOpacity h4, a.noOpacity h5, a.noOpacity h6, a.noOpacity span, a.noOpacity p{ /* アニメーション */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } a.noOpacity:hover img, a.noOpacity:hover h1, a.noOpacity:hover h2, a.noOpacity:hover h3, a.noOpacity:hover h4, a.noOpacity:hover h5, a.noOpacity:hover h6, a.noOpacity:hover span, a.noOpacity:hover p{ filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity:0.70; opacity:0.70; } .floatLeft{ float: left; } .floatRight{ float: right; } .alignLeft{ text-align:left !important;} .alignRight{ text-align:right !important;} .alignCenter{ text-align:center !important;} .mb0, .marginBottomNone { margin-bottom: 0px !important;} .mb120 { margin-bottom: 120px !important;} .mb100 { margin-bottom: 100px !important;} .mb80 { margin-bottom: 80px !important;} .mb70 { margin-bottom: 70px !important;} .mb60 { margin-bottom: 60px !important;} .mb50 { margin-bottom: 50px !important;} .mb30 { margin-bottom: 30px !important;} .mb20 { margin-bottom: 20px !important;} .mb15 { margin-bottom: 15px !important;} .mb10 { margin-bottom: 10px !important;} .mt30 { margin-top: 30px !important;} .mtp0 { margin-top: 0px !important;} .mtp10 { margin-top: 10px !important;} .mtp20 { margin-top: 20px !important;} .mtp30 { margin-top: 30px !important;} .mtp40 { margin-top: 40px !important;} .mtp50 { margin-top: 50px !important;} .mtp60 { margin-top: 60px !important;} .mtp70 { margin-top: 70px !important;} .mtp80 { margin-top: 80px !important;} .mtp90 { margin-top: 90px !important;} .mtp100 { margin-top: 100px !important;} .mtp110 { margin-top: 110px !important;} .mtp120 { margin-top: 120px !important;} .borderNone{ border: none !important; } .pb60 { padding-bottom: 70px !important;} .pb60 { padding-bottom: 60px !important;} .pb50 { padding-bottom: 50px !important;} .pb30 { padding-bottom: 30px !important;} .pb20 { padding-bottom: 20px !important;} .pb10 { padding-bottom: 10px !important;} .pb0 { padding-bottom: 0px !important;} .pt0 { padding-top: 0px !important;} .MaskMainVisual, .MaskBlack{ background-color: rgba(0,0,0,0.3); /* z-index: 10;*/ } .MaskWhite{ background-color: rgba(255,255,255,0.3); /* z-index: 10;*/ } .MaskGray{ background-color: rgba(0,0,0,0.05); /* z-index: 10;*/ } .MaskBlue{ background-color: rgba(1,104,183,0.15); /* #0168b7 */ /* z-index: 10;*/ } .posRelative{ position: relative; } .absCenter{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); /* margin-left: auto; margin-right: auto; */ left: 0px; right: 0px; display: inline-block; text-align: center; } /* Font Awesome　を背景画像に使用 */ /* http://ithat.me/2016/09/28/css-web-font-fontawesome-background-image */ .web-font-bg { position: relative; } /*.web-font-bg::before */ .web-font-bg::after { position: absolute; top: 50px; left: 90%; margin-left: 0px; content: '\f099'; color: #2e98e4; font-size: 50px; content: "\f105"; /* > */ /* font-family: FontAwesome; /* 古いバージョン */ font-family: "Font Awesome 5 Free"; /* Ver.5 */ } .colorWhite{color:#fff !important;} .colorBlack{color:#000 !important;} .color333{color:#333 !important;} .colorCcc{color:#ccc !important;} /*--------------------------------------------------------------------*/ /* ローディングアイコン */ .pace-running .wrapPace { display:none; } .ug-slider-preloader.ug-loader1{ display: none !important } /*--------------------------------------------------------------------*/ /* カラー　 56 142 141 #388e8d hover 153 222 221 #99dedd footer 234 246 244 #eaf6f4 /*--------------------------------------------------------------------*/ /** * * ページ送り * */ .pagenavi { clear:both; margin:10px auto 0; padding-bottom:10px; color:#000; text-align:center!important; font-size:12px; } .pagenavi:after { display:block; visibility:hidden; clear:both; height:0; content:"."; } .pagenavi a,.wp-pagenavi span { margin:1px; text-decoration:none; } .pagenavi a:hover,.wp-pagenavi span.current { } .pagenavi .prev { display:inline-block; width:107px; height:30px; border:0; color:#300; } .pagenavi .prev:hover { } .pagenavi .next { display:inline-block; margin-left:15px; width:107px; height:30px; border:0; color:#300; } .pagenavi .next:hover { } .pagenavi .prev:after,.pagenavi .next:after { content:""!important; } .pagenavi span.current { background:#00B0B5; color:#fff; font-weight:700; } /*--------------------------------------------------------------------*/ /*========= LoadingのためのCSS ===============*/ /* https://coco-factory.jp/ugokuweb/move01/4-1-3/ */ /* Loading背景画面設定　*/ #splash { /*fixedで全面に固定*/ position: fixed; width: 100%; height: 100%; z-index: 999; text-align:center; color:#fff; } /* Loading画像中央配置　*/ #splash_text { position: absolute; top: 50%; left: 50%; z-index: 999; transform: translate(-50%, -50%); color: #fff; width: 100%; } /*IE11対策用バーの線の高さ※対応しなければ削除してください*/ #splash_text svg{ height: 2px; } /*割れる画面のアニメーション*/ .loader_cover { width: 100%; height: 50%; background-color: #333; transition: all .2s cubic-bezier(.04, .435, .315, .9); transform: scaleY(1); } /*上の画面*/ .loader_cover-up { transform-origin: center top; } /*下の画面*/ .loader_cover-down { position: absolute; bottom: 0; transform-origin: center bottom; } /*クラス名がついたらY軸方向に0*/ .coveranime { transform: scaleY(0); } /*--------------------------------------------------------------------*/ header{ /* border-bottom: 1px solid #ddd; /* ここにボーダーがあってもこの要素はスクロールしてしまうのでダメ */ background-color: #fff; } /*--------------------------------------------------------------------*/ /* フルスクリーンメニュー */ /* 右から左にスライド出現する動作 */ /* https://coco-factory.jp/ugokuweb/move01/5-1-14/ */ /*========= ナビゲーションのためのCSS ===============*/ #g-nav { /*position:fixed;にし、z-indexの数値を大きくして前面へ*/ position: fixed; z-index: 999; /*ナビのスタート位置と形状*/ top: 0; right: -120%; width: 100%; height: 100vh; /*ナビの高さ*/ background: #f6f6f6; /*動き*/ transition: all 0.6s; } #g-nav .navLogo{ padding: 20px; } /*アクティブクラスがついたら位置を0に*/ #g-nav.panelactive { right: 0; } /*ナビゲーションの縦スクロール*/ #g-nav.panelactive #g-nav-list { /*ナビの数が増えた場合縦スクロール*/ position: fixed; z-index: 999; width: 100%; height: 100vh; /*表示する高さ*/ overflow: auto; -webkit-overflow-scrolling: touch; } #g-nav .wrapNavi { /*ナビゲーション天地中央揃え*/ /* 下層メニューが開くとトップ位置がずれるのでabsoluteでの中央ぞろえはヤメ position: absolute; top: 50%; transform: translate(-50%, -50%); /* */ /* position:relative;padding-top:150px;にすることでトップ位置固定 */ position: relative; padding-top: 150px; left: 50%; transform: translateX(-50%); z-index: 999; width: 100%; max-width: 480px; } /*ナビゲーション*/ #g-nav ul.levelTop{ /*ナビゲーション天地中央揃え*/ /* position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; z-index: 999; /* */ margin-bottom: 30px; } /*リストのレイアウト設定*/ #g-nav li { list-style: none; text-align: center; } #g-nav li .menu-item{ color: #333; /* text-decoration: none; padding: 10px; display: block; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold; */ font-family: 'Roboto','Noto Sans JP', sans-serif; /* */ text-align: center; padding: 20px 10px; display: block; } #g-nav li a.menu-item{ position: relative; transition: transform .3s; -webkit-transform: scale(1); transform: scale(1); } /* hoverで文字Zoom https://kingsite.jp/blog/0108#05 */ #g-nav li a.menu-item:hover{ -webkit-transform: scale(1.1); transform: scale(1.1); /* 透過はしない */ filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.070; } /* アンカーリンクのアイコンは無し #g-nav li a.menu-item:after { position: absolute; content: '>'; right: 10px; top: 15px; } /* */ /* 下層メニューのための制御 by scitech */ .has-dropdown{ position: relative; } .has-dropdown .check{ position: absolute; right: 10px; top: 15px; width: 50px; } /* 下層メニューのラッパー by scitech */ .has-dropdown ul.acd-content{ position: relative; } /* 下層　.hierarchyN */ .has-dropdown ul.acd-content.hierarchy1{ /* background-color: #ddd; /* */ } .has-dropdown ul.acd-content.hierarchy2{ /* background-color: #ccc; /* */ } .has-dropdown ul.acd-content.hierarchy3{ /* background-color: #bbb; /* */ } .has-dropdown ul.acd-content.hierarchy4{ /* background-color: #aaa; /* */ } /*========= ハンバーガーボタンのためのCSS ===============*/ .openbtn { position: fixed; z-index: 9999; /*ボタンを最前面に*/ /* top: 10px;/* */ right: 10px; cursor: pointer; width: 50px; height: 50px; } body.home header.colored .openbtn { top: 10px; /* ロゴとハンバーガー縦位置中央揃え */ } /* ×に変化 */ .openbtn span { display: inline-block; transition: all .4s; position: absolute; left: 5px; height: 3px; border-radius: 2px; background-color: #666; width: 40px; } .openbtn span:nth-of-type(1) { top: 10px; } .openbtn span:nth-of-type(2) { top: 23px; } .openbtn span:nth-of-type(3) { top: 37px; } .openbtn.active span:nth-of-type(1) { top: 18px; left: 5px; transform: translateY(6px) rotate(-45deg); width: 40px; } .openbtn.active span:nth-of-type(2) { opacity: 0; } .openbtn.active span:nth-of-type(3) { top: 30px; left: 5px; transform: translateY(-6px) rotate(45deg); width: 40px; } /*--------------------------------------------------------------------*/ /* モーダルメニュー */ /* 従来のハンバーガー常時非表示 */ .Moddal-hidden{ display: none; } .Moddal-hunberger{ position: fixed; /* z-index/top のために必須 */ z-index: 5; top: -20px; right: 35px; /* margin-left: 20px; /* */ -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; transition:all unset; } @media screen and (min-width: 1601px) { /* 1600px以上では、leftからの配置　ブラウザ全幅からコンテンツ幅を差し引いた半分の位置 */ .Moddal-hunberger{ right: calc((100vw - 1600px) / 2); } } .modaal-inner-wrapper{ vertical-align: top; /* middleだと下層ドロップダウンで上下中心に再調整される */ padding: 150px 20px 20px; } .modaal-wrapper{ background-color: #fff; } .modaal-container{ box-shadow: none; max-width: 610px; } .modaal-close::after, .modaal-close::before { background: #000; top: 10px; left: 20px; width: 4px; height: 30px; } .modaal-container .more_button:hover{ color: #333; } .modaal-content-container { padding: 0px; } .FullScreenMenu{ border-top: 1px solid #ccc; } .FullScreenMenu .Logo{ position: fixed; top: 20px; left: 40px; } .FullScreenMenu a{ color: #333 !important; } .FullScreenMenu a:hover{ text-decoration: none; } .FullScreenMenu .drawer-nav{ position: relative; width: 100%; margin-bottom: 60px; } /*--------------------------------------------------------------------*/ /* heroヘッダー */ /* header.phpでis_front_pageの時にhtml/body/header=height:100% */ .headerHero{ /* register_sidebar(toppage-hero-header-slider-scitech) */ background-repeat: no-repeat; background-position: center center; background-size: cover ; margin: 0 auto; position: relative; width: 100%; } .headerHero .textwidget{ } .headerHero .maskHero{ height: 100%; background-color: rgba(0,0,0,0.3); } /*
内のロゴ・グロナビ・フリーダイヤル・メールバナー */ /* #headerの動作に関してはstyle_pc/style_spに記述 */ header{ z-index: 100; position: fixed; width: 100%; padding: 20px; } #logo{ } #logo .LogoBanner, #logo .text{ } #g-nav .navLogo .LogoBanner, header #logo .LogoBanner{ width: 360px; } body.page-template-templete-EntryFormOptimization .container{ padding-top: 100px; } body.page-template-templete-EntryFormOptimization #logo{ /* padding: 20px; border-bottom: 1px solid #ccc; margin-bottom: 40px; */ text-align: center; } body.page-template-templete-EntryFormOptimization #logo .LogoBanner{ float: none; } #logo .text{ padding-top: 5px; padding-left: 10px; } #logo .catchFrase{ color: #fff; /* */ font-size: 12px; letter-spacing: 1px; /* text-shadow: 2px 2px 2px #888, -2px 2px 2px #888, 2px -2px 2px #888, -2px -2px 2px #888; */ } #logo .Organization{ text-align: left; color: #fff; /* */ /* font-family: "HGKyokashotai","HG教科書体","Yu Mincho", "YuMincho", "游明朝体", "游明朝"; /* */ font-size: 20px; letter-spacing: 0px; font-weight: bold; width: 100%; /* height: 1em;*/ line-height: 1em; padding: 0px; border: none; background-color: transparent; /* text-shadow: 2px 2px 2px #888, -2px 2px 2px #888, 2px -2px 2px #888, -2px -2px 2px #888; */ } /* 中心の「共に成功を目指す税理士事務所」 */ .absOverCenter .verticalCenter, .headerHero .v-center { /* ie8で未対応 position: relative; top: 50%; transform: translateY(-50%); */ /* ブロック要素上下中央寄せ */ position: absolute; /* top: 0; bottom: 0; */ right: 0; left: 0; margin: auto; /* 要素のサイズを100%ではなくする必要がある */ width: 80%; max-width: 700px; max-width: none; /* height: 410px; height: 210px; */ text-align: center; } .absOverCenter .bottom, .headerHero .bottom{ position: absolute; /* top: 0; /* */ right: 0; bottom: 40px; left: 0; margin: auto; } .headerHero .v-center h1{ font-size: 16px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; line-height: 3.5em; font-weight: normal; color: #fff; margin-bottom: 80px; } .imgSuccess{ text-align: center; margin-bottom: 30px; } .absOverCenter .verticalCenter .descriptionBig, .absOverCenter .verticalCenter .descriptionSmall, .headerHero .v-center .descriptionBig, .headerHero .v-center .descriptionSmall{ text-align: center; color: #fff; /* text-shadow: 1px 1px 1px #888, -1px 1px 1px #888, 1px -1px 1px #888, -1px -1px 1px #888; */ /* -webkit-text-stroke: 1px #888; /* 縁取り */ } .absOverCenter .verticalCenter .descriptionBig, .headerHero .v-center .descriptionBig{ font-size: 40px; line-height: 1.5em; margin-bottom: 60px; font-weight: bold; } .absOverCenter .verticalCenter .descriptionSmall, .headerHero .v-center .descriptionSmall{ font-size: 16px; font-weight: normal; padding: 20px 0px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-bottom: 60px; } .absOverCenter .bottom .arrowDown, .absOverCenter .bottom .text, .headerHero .v-center .arrowDown, .headerHero .bottom .arrowDown, .headerHero .bottom .text{ text-align: center; } .absOverCenter .bottom .text, .headerHero .bottom .text{ font-size: 14px; color: #fff; } /*--------------------------------------------------------------------*/ /* トップページカルーセル Slick Slider */ /* 要素の最外殻 */ .wpsisac-slick-carousal-wrp .slick-image-slide{ background-color: #000; margin: 0px !important; } .wpsisac-slick-carousal .slick-image-slide { } .wpsisac-slick-carousal-wrp .slick-image-slide img{ filter:alpha(opacity=30); -moz-opacity:0.30; -khtml-opacity:0.30; opacity:0.30; /* アニメーション */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } /* 真ん中のスライダー */ .wpsisac-slick-carousal-wrp .slick-image-slide.slick-current{ } .wpsisac-slick-carousal-wrp .slick-image-slide.slick-current img{ filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0; /* アニメーション */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } /* 画像 */ .wpsisac-slick-carousal-wrp .slick-image-slide .slick-image-slide-wrap img{ } /* 矢印 */ .wpsisac-slick-carousal-wrp .design-6 button.slick-arrow{ background: none !important; /* */ background-color: rgba(0,0,0,1.0) !important; width: 50px; /* 画像サイズ ###imageSize */ height: 50px; /* 画像サイズ ###imageSize */ background-size: cover !important; } .wpsisac-slick-carousal-wrp .design-6 button.slick-prev{ /* left: calc(50% - 565px) !important; /* 元のサイズの場合 */ left: calc(50% - 575px) !important; /* ###imageSize */ /* left: calc(50% - 568px) !important; /* ###imageSize 36px */ background-image: url("./images/top/carousel-arrow-left.png") !important; } .wpsisac-slick-carousal-wrp .design-6 button.slick-next{ right: calc(50% - 565px) !important; /* 元のサイズの場合 */ right: calc(50% - 575px) !important; /* ###imageSize */ /* right: calc(50% - 568px) !important; /* ###imageSize 36px */ background-image: url("./images/top/carousel-arrow-right.png") !important; } /* 矢印画像を変更するため スマホグロナビの矢印と同じ方法だが　うまくいかない 画像直接あてがうことにする */ /* .wpsisac-slick-carousal-wrp button.slick-prev::after { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 40px; font-weight: lighter; font-weight: 100; content: "<"; font-family: 'Major Mono Display', monospace; color: #fff; } .wpsisac-slick-carousal-wrp button.slick-next::after { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 40px; font-weight: lighter; font-weight: 100; content: ">"; font-family: 'Major Mono Display', monospace; color: #fff; } */ /*--------------------------------------------------------------------*/ /* ぱんくず */ .breadcrumbs-wrap{ /* background-color: #f2f2f2; padding-top: 7px; padding-bottom: 7px; */ /* border-top: 1px solid #eee; /* */ /* border-bottom: 1px solid #eee; /* */ margin-bottom: 20px; } .breadcrumbs{ /* max-width: 1140px; /* */ padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; font-size: 12px; } /* imgとspanを上下中央に合わせる　vertical-align: middle; */ .breadcrumbs img{ vertical-align: middle; margin-right: 5px; } .breadcrumbs span{ vertical-align: baseline; } /*--------------------------------------------------------------------*/ /* ghostボタン */ .btnGhost{ text-align: center; height: auto; padding: 1px; } .btnGhost a{ font-size: 18px; font-family: "Noto Sans JP"; padding: 15px; width: 100%; max-width: 240px; color: #000 !important; border: 1px solid #ccc; text-decoration: none !important; display: inline-block; /* 上位要素の
の高さを、この要素の高さ文確保するため */ -webkit-transition:.3s ease-in-out; -moz-transition:.3s ease-in-out; -o-transition:.3s ease-in-out; transition:.3s ease-in-out; } .btnGhost a:hover{ /* background-color: rgba(255,255,255,0.5);*/ background-color: rgba(240,240,240,0.5); background-color: rgba(51,51,51,0.5); /* フォアグランドは透過しない */ filter:alpha(opacity=100); -moz-opacity:1.00; -khtml-opacity:1.00; opacity:1.00; } /* ヘッダーのゴーストボタン */ header .btnGhost{ float: left; height: 80px; /* ###PC-Header-Height 同じにすること */ line-height: 80px; /* ###PC-Header-Height 同じにすること */ } header .btnGhost a{ font-size: 14px; padding: 0px 10px; border: none; /* width: 200px; */ height: 40px; line-height: 40px; background-color: #2e98e4; /* 水色 */ color: #fff !important; /* border-radius: 5px; /* CSS3草案 */ /* -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ /* -moz-border-radius: 5px; /* Firefox用 */ } header .btnGhost a:first-child{ margin-right: 30px; } header .btnGhost a:hover{ background-color: #8ec7fc; /* 薄い水色 */ color: #fff !important; } header .btnGhost a img{ vertical-align: middle; margin-right: 10px; } /* 業務内容　通常時に背景白っぽく */ body.home section .btnGhost a{ font-size: 13px; background-image: url("./images/common/triangle-black-right-20.png"); background-repeat: no-repeat; /* background-position: 10px center; /* 左 */ background-position: 95% center; /* 右 */ background-size: 10px; /* background-color: rgba(255,255,255,0.2); /* 白透過 */ /* background-color: rgba(0,0,0,0.5); /* 黒透過 */ /* background-color: rgba(128,128,128,0.75); /* グレー透過 */ background-color: #fff; /* 白透過 */ /* border: 1px solid #cecece; /* */ border: 1px solid #333; padding: 5px 0px; /* border-radius: 5px; /* CSS3草案 */ /* -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ /* -moz-border-radius: 5px; /* Firefox用 */ } section#TopSlowSlider .btnGhost a{ /* background-image: url("./images/common/triangle-black-white-20.png"); /* */ background-image: none; background-color: transparent; /* 白透過 */ color: #fff !important; border: 1px solid #fff; max-width: 280px; border-radius: 0px; /* CSS3草案 */ -webkit-border-radius: 0px; /* Safari,Google Chrome用 */ -moz-border-radius: 0px; /* Firefox用 */ } /* hoverと上位画像hover時は全透過 */ section#TopSlowSlider .btnGhost a:hover, body.home section .backImage:hover .btnGhost a, body.home section .btnGhost a:hover{ background-color: #bbb; } .btnLikeGhost{ padding: 15px 55px; color: #fff; border: 1px solid #fff; display: inline-block; /* 上位要素の
の高さを、この要素の高さ文確保するため */ } /* タグサンプルの背景画像とゴーストボタン */ .GhostWithBackImage{ position: relative; text-align: center; } .GhostWithBackImage .btnGhost{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-left: auto; margin-right: auto; left: 0px; right: 0px; } .GhostWithBackImage .btnGhost a{ color: #fff !important; } .btnGhost a:hover{ /* background-color: rgba(255,255,255,0.5);*/ background-color: rgba(240,240,240,0.5); background-color: rgba(255,255,255,0.8); color: #333 !important; } /* CTAのゴーストボタン */ footer section#CTA .btnGhost a:hover{ background-color: #f2f2f2; /* 極端に薄いグレー */ } /*--------------------------------------------------------------------*/ /* ●→リンクボタン */ .linkArrow{ } .linkArrow a{ background-image: url("./images/common/kotira-arrow-right-black.png"); background-repeat: no-repeat; background-position: 95% center; display: inline-block; /* 上位要素の
の高さを、この要素の高さ文確保するため */ font-size: 15px; padding-right: 40px; height: 2em; line-height: 2em; text-decoration: underline; } .linkArrow a:hover{ background-position: 97% center; } /*--------------------------------------------------------------------*/ /* リンクボタン */ .btnLink{ text-align: center; margin: 20px auto; } .btnLink a{ background-image: url("./images/common/arrow-right-white.svg"); background-repeat: no-repeat; background-position: 95% center; max-width: 480px; width: 100%; height: 70px; line-height: 70px; text-decoration: none !important; display: inline-block; /* 上位要素の
の高さを、この要素の高さ文確保するため */ font-size: 18px; /* font-family: "Yu Gothic"; /* */ color: #fff !important; /* -webkit-transition:.3s ease-in-out; -moz-transition:.3s ease-in-out; -o-transition:.3s ease-in-out; transition:.3s ease-in-out; */ /* border-radius: 5px; /* CSS3草案 */ /* -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ /* -moz-border-radius: 5px; /* Firefox用 */ background-color: #3CBCEB; } .btnLink a.gray{ background-image: url("./images/common/arrow-right-black.svg"); background-color: #f2f2f2; color: #000 !important; } .btnLink a.orange{ background-image: url("./images/common/arrow-right-black.svg"); background-color: #f2ab34; color: #000 !important; } .btnLink a.small{ font-size: 14px; width: 300px; background-size: 10px; } /*--------------------------------------------------------------------*/ /* Wipe Over Effect ボタン */ /* hoverでは左→右　hover外しでは右→左に戻る */ header .btnWipe{ /* ここは HeaderCTA へ制御を移した padding-top: 20px; float: left; */ } .FullScreenMenu .btnWipe .more_button, header .btnWipe .more_button{ font-size: 14px; border: none; width: 180px; height: 40px; line-height: 40px; background-color: #2e98e4; /* 水色 */ color: #fff !important; text-align: center !important; /* float: left; /* */ border-radius: 50px; /* CSS3草案 */ -webkit-border-radius: 50px; /* Safari,Google Chrome用 */ -moz-border-radius: 50px; /* Firefox用 */ } .FullScreenMenu .btnWipe .more_button.contact { float: none; margin-left: auto; margin-right: auto; background-color: #388e8d; width: 100%; max-width: 350px; height: 60px; line-height: 60px; } .FullScreenMenu .btnWipe .more_button .fas , header .btnWipe .more_button .fas { display: none; } .FullScreenMenu .btnWipe .more_button:hover, header .btnWipe .more_button:hover{ filter:alpha(opacity=100); -moz-opacity:1.00; -khtml-opacity:1.00; opacity:1.00; } header .btnWipe .more_button:first-child{ margin-right: 20px; } /* スライドするボタンの色 */ header .more_button::before, header .more_button::after { background-color:#8ec7fc; /* 薄い水色 */ } .FullScreenMenu .more_button.contact::before, .FullScreenMenu .more_button.contact::after { background-color: #99dedd; /* 薄い緑 */ } /* スライドするボタンの色 */ #CTA .more_button::before, #CTA .more_button::after { background-color:#ccc; /* 薄い水色 */ } /* 以下はアニメーション設定 */ .more_button { display: block; position: relative; z-index: 2; outline: none; /* background-color:#FFF; */ overflow: hidden; } .more_button::before, .more_button::after { position: absolute; z-index: -1; display: block; content: ''; } .more_button, .more_button::before, .more_button::after { box-sizing: border-box; transition: all 0.5s; } .more_button:hover { color: #FFF; filter:alpha(opacity=100); -moz-opacity:1.00; -khtml-opacity:1.00; opacity:1.00; } .more_button::after { top: 0; left: -100%; width: 100%; height: 100%; } .more_button:hover::after { left: 0; } .more_button i,.r_buttons i { position: absolute; top: 37%; right: 10px; } /*== 背景が流れるボタン */ /* hoverでは左→右　hover外しではさらに元の色が左→右となって元に戻る */ /* https://coco-factory.jp/ugokuweb/move01/7-1-1/ */ /* 7-1-1 背景が流れる（左から右） */ .btnWrap{ font-size: 14px; text-align: center; line-height: 2em; /* これが無いと下に1pxの隙間 */ } .btnWrapRight{ text-align: right; padding-right: 50px; } .btnWiper{ /*アニメーションの起点とするためrelativeを指定*/ position: relative; overflow: hidden; /*ボタンの形状*/ text-decoration: none; display: inline-block; border: 1px solid #555;/* ボーダーの色と太さ */ padding: 10px 30px; text-align: center; outline: none; /*アニメーションの指定*/ transition: ease .2s; } /*ボタン内spanの形状*/ .btnWiper span { position: relative; z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/ color:#333; } .btnWiper:hover span{ color:#fff; /* */ } /*== 背景が流れる（左から右） */ .btnWiper:before { content: ''; /*絶対配置で位置を指定*/ position: absolute; top: 0; left: 0; z-index: 2; /*色や形状*/ background:#555;/*背景色*/ width: 100%; height: 100%; /*アニメーション*/ transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s; transition: transform .5s linear 0s; transition: transform .5s ease 0s; /* */ transform: scale(0, 1); transform-origin: right top; } /*hoverした際の形状*/ .btnWiper:hover:before{ transform-origin:left top; transform:scale(1, 1); } /*矢印が右に移動する*/ /* https://coco-factory.jp/ugokuweb/move01/7-1-46/ */ /* 7-1-46 矢印が右に移動する */ .btnArrow4{ /*矢印と下線の基点とするためrelativeを指定*/ position: relative; /*形状*/ display: inline-block; /* padding: 0 20px; /* */ color: #333; text-decoration: none; outline: none; } .btnArrow4.padLeft0{ padding-left: 0px; } /*矢印と下線の形状*/ .btnArrow4::before{ content: ''; /*絶対配置で下線の位置を決める*/ position: absolute; bottom:-8px; /* left:15%; /* */ /*下線の形状*/ width: 85%; /* 矢印を固定長で右 */ bottom: 15px; right: -50px; width: 40px; height: 2px; background:#333; /*アニメーションの指定*/ transition: all .3s; } .btnArrow4::after{ content: ''; /*絶対配置で矢印の位置を決める*/ position: absolute; bottom:-3px; right:0; /* 矢印を右 */ bottom: 18px; right: -50px; /*矢印の形状*/ width: 10px; height:2px; background:#333; transform: rotate(35deg); /*アニメーションの指定*/ transition: all .3s; } .btnArrow4.colorWhite::before, .btnArrow4.colorWhite::after{ background:#fff; } /*hoverした際の移動*/ .btnArrow4:hover::before{ /* left:20%; /* */ right: -55px; } .btnArrow4:hover::after{ right:-5%; right:-55px; } /* hoverで下線が左から右に伸びる */ .hoverLine{ display: inline-block; position: relative; } .hoverLine::after{ content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: #ccc; transition: .3s; } .hoverLine:hover::after{ width: 100%; } /*--------------------------------------------------------------------*/ /* ライブラリ */ /* アスペクト比が異なる（大きさも異なる）画像を、大きさ同じにトリミングしながらレスポンシブ動作 */ /* トップページ　先生方の声に利用 */ .wrapFlex{ display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap : wrap; /*for IE10*/ -webkit-flex-wrap : wrap; /*for old webkit browser*/ flex-wrap : wrap; /* justify-content: space-between; /*最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置*/ } .wrapFlexCenter{ display: -ms-flexbox; display: -webkit-flex; display: flex; /* 上下左右中央寄せ */ justify-content: center; align-items: center; } .wrapFlexCenterTop{ display: -ms-flexbox; display: -webkit-flex; display: flex; /* 上下左右中央寄せ */ justify-content: center; } .wrapFlexCenterLeft{ display: -ms-flexbox; display: -webkit-flex; display: flex; /* 上下中央寄せ　左寄せ */ /* justify-content: left; /* */ align-items: center; } .wrapFlexBothSide{ display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap : wrap; /*for IE10*/ -webkit-flex-wrap : wrap; /*for old webkit browser*/ flex-wrap : wrap; justify-content: space-between; /*最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置*/ } .warpFlex p:not([class]), .wrapFlexCenter p:not([class]), .wrapFlexCenterTop p:not([class]), .wrapFlexCenterLeft p:not([class]), .wrapFlexBothSide p:not([class]){ display: none; } /* 左右入れ替え */ .flexRevers{ flex-direction: row-reverse; } .align-center{ align-items: center; } /* 上下左右中央寄せの内部サイズ制限 */ .boxFloatCenter{ } /* 4列で1pxボーダーで区切り */ .boxCover{ width: 25%; position: relative; border-right: 1px solid #fff; border-bottom: 1px solid #fff; } /* 4列で右スペース開ける */ .boxCoverSpace{ width: 23.6%; /* 260/1100 */ margin-right: 1.86%; /* 20/1100 */ margin-bottom: 30px; position: relative; } .boxCoverSpace:nth-child(4n){ margin-right: 0px; } /* サイドバー有の場合は3列 */ .hasSidebar .boxCoverSpace{ width: 32%; /* 240/750 */ margin-right: 2%; /* 15/750 */ } .hasSidebar .boxCoverSpace:nth-child(4n){ margin-right: 2%; } .hasSidebar .boxCoverSpace:nth-child(3n){ margin-right: 0px; } .boxCoverThree{ width: 31%; margin-right: 3.5%; margin-bottom: 40px; position: relative; height: 100%; /* 上の.boxCoverはなぜかheight:100%;が無くても正常動作する */ } .boxCoverThree:nth-child(3n){ margin-right: 0px; } /* 画像アスペクト比を保持したままのレスポンシブ */ /* outerでpadding-topを使用してアスペクト比を保持できる箱を作る */ /* innerは内部コンテンツを収容する　←　を直接absoluteで指定してもいいかも */ .outer125{ position: relative; width: 100%; /* height: 100%; /* これがあると高さが余計に確保される */ padding: 125% 0 0; } .outer100{ position: relative; width: 100%; /* height: 100%; /* これがあると高さが余計に確保される */ padding: 100% 0 0; /* 100% 正方形 */ padding: 56.25% 0 0; /* 100% フルハイビジョン 1080/1920 */ /* padding: 65% 0 0; /* 65% 280/430 */ } /* 内側は外殻に沿って形成 */ .outer125 .inner, .outer100 .inner{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* aはさらにinnerを継承 */ .outer125 .inner a, .outer100 .inner a{ display: block; height: 100%; } /* 親のと同じサイズにしてアスペクト比そのままにcover */ .outer125 .inner img, .outer100 .inner img{ width: 100%; height: 100%; object-fit: cover; /* cover */ } .boxClip{ width: 100%; /* padding-left: 20px; /* 左端スペース */ overflow: hidden; } .boxClipInner{ width: 900px; } .boxClipInner .ug-carousel-wrapper{ left: 0px !important; /* カルーセルのレスポンシブで中央ぞろえのためにこのセレクタが制御される。これを左端に固定 */ } /* オーバーラップ */ .overWrap{ position: absolute; background-color: rgba(0,0,0,0.5); bottom: 0px; padding: 10px 30px; color: #fff; width: 100%; } /* オーバーラップの三角形 */ /* .overWrap:before{ content: ""; position: absolute; left: 50%; top: -38px; margin-left: -15px; border: 13px solid transparent; border-bottom: 25px solid rgba(0,0,0,0.5); } */ /* 右矢印をcontentで指定 */ .overWrap.arrow:after{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0px; /* ###CType01ListCaptionSnipet 10px → 0px */ margin-left: 0px; font-size: 40px; font-weight: lighter; font-weight: 100; content: ">"; /* > */ font-family: 'Major Mono Display', monospace; } /* 通常のタイトルなど */ .normalWrap{ padding-top: 20px; } .overWrap .title, .normalWrap .title{ font-weight: bold; margin-bottom: 5px; font-size: 16px; word-wrap: break-word; /* ###CType01ListCaptionSnipet */ line-height: 1.2em; /* ###CType01ListCaptionSnipet */ } .overWrap .subtitle, .normalWrap .subtitle{ font-size: 12px; line-height: 150%; /* padding-right: 20px; /* ###CType01ListCaptionSnipet */ word-wrap: break-word; /* ###CType01ListCaptionSnipet */ line-height: 1.2em; /* ###CType01ListCaptionSnipet */ } /* 高さ可変のコンテンツに追従して、背景画像をcoverで配置 */ .imgCover .boxContent{ padding: 50px 0px; /* background-color: rgba(0,0,0,0.5); /* */ height: 100%; /* スライダーをパララックス動作させるときに、前面に出るようにするため */ z-index: 2; position: relative; /* ←これしないとz-indexが効かない　*/ } .imgCover img{ position: absolute; object-fit: cover; width: 100%; height: 100%; /* スライダーをパララックス動作させるときに、前面に出るようにするため */ z-index: 1; } .imgCover{ color: #fff; } /* 白背景　黒文字 ###BackWhiteColorBlack */ .imgCover .backWhite{ background-color: rgba(255,255,255,0.5); color: #333 !important; } .imgCover .backWhite .cWhite{ color: #333 !important; } .imgCover .backWhite .titleSub{ /* color: #888 !important; /* */ } /* hoverで背景マスクを白半透明、画像をズーム ###HoverZoom */ /* 背景白へのアニメーション指定 */ .hoverZoom .boxContent{ -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out; transition: .2s ease-in-out; } /* 背景白半透明 */ .hoverZoom .boxContent:hover { background-color: rgba(255,255,255,0.5); } /* 背景黒半透明 */ .hoverZoom .boxContent.backWhite:hover { background-color: rgba(0,0,0,0.5); } /* 文字を黒 */ .hoverZoom .boxContent:hover .cWhite, .hoverZoom .boxContent:hover .text{ color: #333 !important; } .hoverZoom .boxContent.backWhite:hover .cWhite, .hoverZoom .boxContent.backWhite:hover .text{ color: #fff !important; } /* 画像ズームでのはみだしを非表示 */ .posRelative.hoverZoom{ overflow: hidden; } /* 画像をズームするためのアニメーション指定 */ a img, .posRelative.hoverZoom img { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); /* -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out; transition: .2s ease-in-out; /* */ -webkit-transition: .4s ease-in-out; -moz-transition: .4s ease-in-out; -o-transition: .4s ease-in-out; -ms-transition: .4s ease-in-out; transition: .4s ease-in-out; } /* 画像をズーム */ a:hover img:not(.LogoBanner), .posRelative.hoverZoom:hover img { /* -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -o-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); /* */ -webkit-transform: scale(1.07); -moz-transform: scale(1.07); -o-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); /* filter: alpha(opacity=100); -moz-opacity: 1.00; -khtml-opacity: 1.00; opacity: 1.0; */ } /*--------------------------------------------------------------------*/ /* ステップテーブル */ table.Step, table.Step tr, table.Step tr:first-child, table.Step th, table.Step td{ border: none; } table.Step th, table.Step td{ padding: 10px; } table.Step td.step{ font-size: 18px; font-family: "Lora"; color: #3CBCEB; width: 100px; vertical-align: top; } table.Step td.line, table.Step td.none{ width: 50px; } table.Step td.line{ border-right: 2px solid #ccc; } table.Step tr:last-child td.line{ border-right: none; } table.Step td.title{ padding-left: 100px; font-size: 22px; font-weight: bold; } table.Step td.content{ padding-left: 100px; padding-bottom: 30px; } /* ステップ */ .blockStep{ position: relative; margin-bottom: 20px; } .blockStep .step{ font-size: 18px; font-family: "Lora"; color: #3CBCEB; } .blockStep .content{ margin-left: 50px; border-left: 2px solid #ccc; padding-left: 150px; padding-bottom: 30px; } .blockStep:last-child .content{ border-left: none; } .blockStep .title{ position: absolute; top: 0px; left: 200px; font-size: 22px; font-weight: bold; } .blockStep .text{ margin-bottom: 0px !important; } /* パララックス */ body.home #Parallax{ background: transparent !important; padding: 0px; } .parallaxBase { position: fixed; top: 0px; /* top: 80px; /* パララックス画像縦位置 ヘッダー分↓*/ display: none; z-index: -1; width: 100%; max-width: 100% !important; } .parallaxBase img{ width: 100%; object-fit: cover; height: 100vh; /* パララックス画像縦サイズ */ /* height: 500px; /* パララックス画像縦サイズ */ } .parallaxWindow { height: 700px; /* パララックス画像が見える大きさ */ /* border: 1px solid #f00; /* */ } /*--------------------------------------------------------------------*/ /* 基本レイアウト */ /* .hasSidebar は index.php で追加 */ .hasSidebar .wrap_main{ /* float: left; width: 72.72%; /* 800/1100 */ /* width: 68.2%; /* 750/1100 */ flex: 1; margin-right: 100px; /* 左寄せ */ } .hasSidebar #sidebar{ /* float: right; width: 22.72%; /* 250/1100 */ width: 250px; } /*--------------------------------------------------------------------*/ /* 固定ページコンテンツ標準レイアウト */ /* 下層のh2.sectionTitleのアンダーラインを文字幅に合わせるためにdisplay:inline　→　左右中央寄せにするためのラッパー */ /* 固定ページトップ画像 */ .pageTopImage{ position: relative; } .pageTopImage .title{ font-size: 24px; font-family: "Yu Mincho"; font-weight: normal; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .7); } section{ padding-bottom: 100px; } .widthAll{ width: 100%; /* min-width: 1600px; /* */ margin-left: auto; margin-right: auto; } img.all, .widthAll img{ max-width: none; /* 制限なし */ width: 100%; } .widthFull{ width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto; } .widthLimit1400{ width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } .widthLimit1300{ width: 100%; max-width: 1340px; margin-left: auto; margin-right: auto; padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } .widthLimit1290{ width: 100%; max-width: 1330px; margin-left: auto; margin-right: auto; padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } .widthLimit{ width: 100%; max-width: 1240px; /* 下のpaddingの分を増やす */ margin: 0px auto; padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } .widthLimit-noPadding{ max-width: 1200px; /* 下のpaddingの分を増やす */ margin: 0px auto; } .noSideSpace{ padding-left: 0px; padding-right: 0px; } .noSideSpace img{ width: 100%; } .widthLimit1130{ width: 100%; max-width: 1170px; margin: 0px auto; padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } .widthLimit1000{ width: 100%; max-width: 1240px; margin: 0px auto; padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } .widthNarrow{ width: 100%; max-width: 840px; margin-left: auto; margin-right: auto; padding-left: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ padding-right: 20px; /* 一致させること　###sideSpaceAndFullOverMargin */ } .widthNarrow-noPadding{ width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; } .boxTow{ width: 48%; /* 575/1200 380/800*/ margin-right: 4%; /* 50/1200 */ margin-bottom: 50px; } .boxTow:nth-child(2n){ margin-right: 0px; /* */ } .boxThirdCollapse{ width: 33.333%; /* */ } .boxThird{ width: 30%; /* 360/1200 */ margin-right: 5%; /* 60/1200 */ margin-bottom: 60px; } /* カスタム投稿アーカイブ用 */ .boxThree{ width: 30.7%; /* 430/1400 */ margin-right: 3.95%; margin-bottom: 60px; } .boxThree:nth-child(3n), .boxThird:nth-child(3n){ margin-right: 0px; } .boxFour{ width: 22.5%; /* 270/1200 */ margin-right: 3.33%; /* 40/1200 */ margin-bottom: 40px; } .boxFour:nth-child(4n){ margin-right: 0px; } /* 画像とテキスト */ .boxImage, .boxText{ width: 45.8%; /* 550/1200 */ } /* 画像とテキスト padding */ .padding50 .boxImage{ width: 36.4%; /* 400/1100 */ } .padding50 .boxText{ width: 54.5%; /* 600/1100 */ } /* 見出しとテキスト */ .boxHeadingHori{ width: 500px; padding-right: 50px; } .boxHeadingHori.Narrow{ width: 300px; } .boxHeadingVert{ width: 205px; } .boxFree{ -webkit-flex: 1; flex: 1; /*（※1）*/ } /* 画像は中央ぞろえ */ .boxTow img, .boxThird img, .boxThree img, .boxFour img, .boxImage img{ display: block; margin-left: auto; margin-right: auto; margin-bottom: 30px; } /* */ .project{ font-size: 16px; font-family: "Lora"; font-weight: 600; font-style: italic; } .vertical{ -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin-bottom: auto !important; /* 上に配置する */ } h5.vertical{ margin-left: 20px; } h5.h5big{ font-size: 28px; } .Padding .Text{ width: 62.5%; /* 650/1040 */ } .Padding .Image{ width: 32.69%; /* 340/1040 */ } /* 経歴用 */ .itemCareer .boxLeft{ width: 25%; /* 200/800 */ } .itemCareer .boxRight{ width: 71.25%; /* 570/800 */ } /* これはWordPressのメディアのセレクタ */ img.Image.wp-post-image{ width: auto !important; max-width: 100% !important; } .inlineCenter{ text-align: center; margin-bottom: 80px; } body.home .inlineCenter{ margin-bottom: 80px; position: relative; } .TLTLE, h1{ /* .head 検索結果無かった時のタイトル */ font-size: 24px; color: #0168b7; /* Navy Blue */ font-weight: bold; display: inline; display: inline-block; /* padding-bottom: 15px; border-bottom: 1px solid rgb(0, 52, 102); */ margin-left: auto; margin-right: auto; line-height: 1.5em; } h1.title{ color: #333; } /* タイトル英語版 */ .titleEnglish{ text-align: center; font-size: 16px; font-weight: bold; color: #02aaf0; /* 薄い水色 */ margin-bottom: 10px; } /* :not()　→　除外するセレクタを指定 */ /*h2:not(.sectionTitle):not(.titlePage):not(.titleMain){ /* */ h2{ font-size: 30px; color: #000; font-weight: normal; line-height: 1em; letter-spacing: 3px; /* */ margin-bottom: 40px; } /* AND条件　→　連結で記述 */ h3{ font-size: 20px; padding: 15px 30px; color: #333; font-weight: normal; background-color: #f9f9f9; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; line-height: 1.5em; letter-spacing: 4px; /* */ margin-bottom: 30px; } h4{ font-size: 20px; border-bottom: 1px solid #333; color: #000; font-weight: normal; line-height: 1.8em; letter-spacing: 4px; /* */ margin-bottom: 30px; } h5{ font-size: 24px; color: #000; font-weight: bold; line-height: 1.5em; letter-spacing: 4px; /* */ margin-bottom: 30px; } h6{ font-size: 20px; color: #dc6932; /* rgb(60, 188, 235) */ font-weight: normal; line-height: 1.5em; letter-spacing: 4px; /* */ margin-bottom: 20px; } .orange{ color: #be821c; /* rgb(235, 130, 28); */ } .titleUnderline{ /* display: inline-block; /* これだと複数行ならない */ display: inline; /* 複数行になるがmarginが効かない */ font-size: 20px; margin: 0px auto 20px auto; font-weight: bold; line-height: 1.5em; background: linear-gradient(transparent 50%,#fff100 70%); letter-spacing: 1px; /* */ } p.titleCheck{ position: relative; padding-left: 40px; font-size: 22px; } p.titleCheck::before{ position: absolute; content: url(./images/sample/check-icon.svg); top: 0px; left: 0px; } p.titleCheck i{ margin-right: 10px; font-size: 30px; color: #df2e05; vertical-align: bottom; } .Padding{ padding: 30px; border: 1px solid #cecece; } .padding50{ padding: 50px; } .padding30{ padding: 30px; } .Padding:before, .Padding:after { content: ""; clear: both; display: block; } section.backGray, section.backGreen, section.backBrown, section.backWhite, .backColor{ padding-top: 100px !important; padding-bottom: 100px !important; margin-top: 0px !important; margin-bottom: 0px !important; } .backGray{ background-color: #F8F8F8 !important; border: none; } .backGreen{ background-color: #e0eede !important; border: none; } .backBrown{ background-color: #d5f4f7 !important; border: none; } .backBrown{ background-color: #f5f2dd !important; border: none; } .backWhite{ background-color: #fff !important; } .box_kadomaru{ border-radius: 5px; /* CSS3草案 */ -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } hr{ height: 1px; border: 0; border-top: 1px solid #cccccc; margin-top: 30px; margin-bottom: 30px; } hr.solid{ border-top: 1px solid #cccccc; } hr.dotted{ border-top: 1px dotted #cccccc; } table{ width: 100%; /* border-top: 1px solid #cecece;*/ border-left: 1px solid #cecece; } table tr:first-child{ /* に設定するとレスポンシブ動作時にはみ出る */ border-top: 1px solid #cecece; } table th{ background-color: #f2f2f2; font-weight: normal; } table th, table td{ padding: 20px 20px; vertical-align: middle; border-right: 1px solid #cecece; border-bottom: 1px solid #cecece; font-size: 15px; } table.free-items{ margin: 40px auto; } table.free-items th, table.free-items td{ padding: 15px 30px; } table.free-items th{ font-weight: normal; min-width: 150px; } table.leftTh th{ width: 30%; } table.topTh th{ width: 33.33%; } /* table .center{ text-align: center; } table .right{ text-align: right; } */ /* 経歴用 */ .Career{ max-width: 800px; margin-left: auto; margin-right: auto; } .itemCareer{ padding: 30px 0px; border-bottom: 1px solid #ccc; } .itemCareer:first-child{ border-top: 1px solid #ccc; } /* 紹介用 */ .Introduce{ max-width: 800px; margin-left: auto; margin-right: auto; } .itemIntroduce{ border-bottom: 1px solid #cecece; } .itemIntroduce:first-child{ border-top: 1px solid #cecece; } .itemIntroduce .boxLeft{ width: 200px; padding: 25px 15px; } .itemIntroduce .boxRight{ -webkit-flex: 1; flex: 1; /*（※1）*/ padding: 25px 15px; } /* 番号付きのタイトル */ .titleNumber1{ font-size: 50px; line-height: 1em; margin-bottom: 20px; } .titleNumber1 .num{ font-size: 50px; line-height: 1.1em; font-family: "Lora"; color: #000; padding-right: 10px; border-right: 2px solid #000; margin-right: 20px; display: inline-block; } .titleNumber1 .text1{ font-size: 22px; line-height: 1.5em; display: inline-block; vertical-align: 10px; } .titleNumber1 .text2{ font-size: 22px; line-height: 1.5em; display: inline-block; vertical-align: -5px; } .titleNumber2{ margin-bottom: 40px !important; font-size: 22px; } .titleNumber2 .num{ font-weight: bold; padding: 10px 10px 10px 15px; border-radius: 5px; background-color: #f2f2f2; margin-right: 25px; } /* Q&A */ .QandA{ max-width: 800px; margin-left: auto; margin-right: auto; } .itemQandA{ padding: 30px; border-bottom: 3px solid #000; } .itemQandA:first-child{ border-top: 3px solid #000; } .itemQandA .boxLeft{ width: 10%; } .itemQandA .boxRight{ width: 90%; } .itemQandA .mark{ display: inline-block; font-size: 30px; font-family: "Lora"; font-weight: bold; padding: 7px 10px; } .itemQandA .Q{ width: 100%; margin-bottom: 30px; } .itemQandA .Q .boxRight{ font-size: 18px; font-weight: bold; } .itemQandA p{ display: none; } /* Q&A アコーディオン */ /* https://webdesignday.jp/inspiration/technique/css/5316/ */ .acd-check{ display: none; } .acd-label{ } /* 開くアニメ */ .acd-content{ /* height: 0; /* これがあると閉じる徳のアニメーション効かない */ max-height: 0px; opacity: 0; visibility: hidden; overflow: hidden; /* transition: max-height 0.5s; /* */ /* transition: all 1.5s linear 0.5s; */ /* 閉じるアニメーション */ /* 閉じる時はopacityが完了してからmax-heightが始動するようだ */ /* 可視化（opacity）とプルダウン（max-height）共用 -webkit-transition: all 1.0s linear; -moz-transition: all 1.0s linear; -o-transition: all 1.0s linear; transition: all 1.0s ease-in-out; /* */ /* 可視化（opacity）とプルダウン（max-height）を別指定 */ /* 即座に消えてスッと閉じる */ -webkit-transition: opacity 0.2s linear, max-height 0.3s ease-out; -moz-transition: opacity 0.2s linear, max-height 0.3s ease-out; -o-transition: opacity 0.2s linear, max-height 0.3s ease-out; transition: opacity 0.2s linear, max-height 0.3s ease-out; /* */ } /*.acd-check:checked + .acd-label + .acd-content{ /* 同じ */ .acd-check:checked ~ .acd-label ~ .acd-content{ /* */ /* height: auto; /* これがあると閉じる徳のアニメーション効かない */ max-height: 1000px; opacity: 1; visibility: visible; /* 開くアニメーション */ /* 可視化（opacity）とプルダウン（max-height）共用 -webkit-transition: all 1.5s linear; -moz-transition: all 1.5s linear; -o-transition: all 1.5s linear; transition: all 1.5s linear; /* */ /* 可視化（opacity）とプルダウン（max-height）を別指定 */ /* スッと開いてじわじわ見えてくる */ -webkit-transition: opacity 1.5s linear, max-height 0.5s ease-out; -moz-transition: opacity 1.5s linear, max-height 0.5s ease-out; -o-transition: opacity 1.5s linear, max-height 0.5s ease-out; transition: opacity 1.5s linear, max-height 0.5s ease-out; /* */ } /* acd-content 内部の処理 */ .acd-check:checked ~ .Q.acd-label{ } .acd-check ~ .acd-label .check:before{ content:'+'; font-size: 30px; color: #000; } .acd-check:checked ~ .acd-label .check:before{ content:'-'; font-size: 50px; } .Accordion .Q .boxRight{ width: 85%; } .Accordion .Q .boxCheck{ width: 5%; text-align: right; } .Accordion .Q .boxCheck .check{ text-align: right; color: #fff; } /* テキストと画像が２カラム配置　画像が端までフル */ /* 各要素を下に配置　画像は上下フル　テキストが下部 */ .towColumnImageFull{ align-items: flex-end; } .towColumnImageFull .boxText{ width: 40%; /* 680/1680 */ } /* 幅固定で片方の位置も固定　もう片方はフリー */ .towColumnImageFull .boxText .textInner{ width: 100%; max-width: 460px; padding-left: 100px; padding-right: 20px; margin-left: 0px; margin-right: auto; } .towColumnImageFull.flexRevers .boxText .textInner{ padding-left: 20px; padding-right: 100px; margin-right: 0px; margin-left: auto; } .towColumnImageFull .boxFree{ } .towColumnImageFull .boxFree .image{ } /* 【画像のレスポンシブ】400px < 高さ < 700px の範囲でcover */ .towColumnImageFull .boxFree .image img{ height: 100%; width: 100%; max-height: 700px; min-height: 400px; object-fit: cover; object-position: center; } /* トップページを除く固定ページの本文と投稿の本文は青 */ body.single .content a, body.page:not(.home) .content a{ color: #04c; text-decoration: underline; } /* トップページを除く固定ページの

の下スペース */ body.single .content p, body.page:not(.home) .content p{ margin-bottom: 20px; } /* セクションの背景色 ###BackColor */ .backColor { background-color: #f2f2f2; } .back-svg{ -webkit-mask: url("./images/common/LOGO-Color.png") no-repeat center center / contain; mask: url("./images/common/LOGO-Color.png") no-repeat center center / contain; -webkit-mask: url("./images/common/LOGO-Color-363x30.svg") no-repeat center center / contain; mask: url("./images/common/LOGO-Color-363x30.svg") no-repeat center center / contain; width: 300px; height: 30px; background: white; } .backColor-red{ background: red; } .filter-red{ /* https://angel-rs.github.io/css-color-filter-generator/ */ /* filter: brightness(0) saturate(100%) invert(0%) sepia(92%) saturate(7418%) hue-rotate(277deg) brightness(111%) contrast(101%); /* #000000 */ /* filter: brightness(0) saturate(100%) invert(52%) sepia(89%) saturate(3284%) hue-rotate(90deg) brightness(125%) contrast(126%); /* #0f0 */ filter: brightness(0) saturate(100%) invert(25%) sepia(97%) saturate(7456%) hue-rotate(358deg) brightness(106%) contrast(112%); /* #f00 */ } /*--------------------------------------------------------------------*/ /* page.php コンテンツ部 */ .container{ margin: 0px auto; padding-top: 100px; } /* トップページ各セクション */ /* スライダーの直下の場合 */ body.home .container{ padding-top: 0px; /* */ /* background: #fff !important; /* パララックスのためのマスク：標準で付加　　→　2023.9.17　所々でパララックス画像が出現するのを防止　しかしパララックス自体が出現しなくなるのでヤメ */ /* 2021.2.22 1.4.6 */ /* ヒーローヘッダーパララックス時にコンテンツ部の高さが2000px未満でコンテンツ最下部にmargin-bottomがあるとヒーローヘッダーが見える */ /* padding-bottom: 0.01px; /* これでもよい　下で不具合が生じる場合はこちらを適用 */ overflow: hidden; } /* カルーセルの直下(隣接)の場合 */ body.home .textwidget + .container{ padding-top: 30px; } body.home section{ position: relative; background: #fff; /* パララックスのためのマスク：標準で付加 */ } body.home section .text{ margin-bottom: 20px; } body.home #Toppage-Slider{ } body.home section#TopSlowSlider{ padding: 0px; background: transparent !important; /* パララックスのため */ } /* フルブラウザモード */ /* これは記事に設置した場合　#contentTop.container内に他の要素を混在はダメ body.home #contentTop.container, body.home #contentTop.container .wrap_main, body.home #contentTop.container .content, body.home section#TopSlowSlider, body.home section#TopSlowSlider #wrapTopSlider, body.home section#TopSlowSlider .hide640, body.home section#TopSlowSlider .disp640, body.home section#TopSlowSlider .unite-gallery{ */ /* header.phpに設置した場合 */ /* body.home section#TopSlowSlider, body.home section#TopSlowSlider #wrapTopSlider, body.home section#TopSlowSlider .hide640, body.home section#TopSlowSlider .disp640, body.home section#TopSlowSlider .bx-wrapper, body.home section#TopSlowSlider .bx-viewport, body.home section#TopSlowSlider ul.bxslider, body.home section#TopSlowSlider ul.bxslider li, */ .wrapFullScreen ul.bxslider li img, body.home section#TopSlowSlider ul.bxslider li img{ /* height: 100% !important; /* BxSlider用 */ height: 100vh !important; /* BxSlider用 */ } .wrapFullScreen, body.home section#TopSlowSlider{ margin-bottom: 0px !important; height: 100vh !important; /* BxSlider用 */ } body.home section#TopSlowSlider #wrapTopSlider, body.home section#TopSlowSlider .unite-gallery{ /* height: 780px !important; /* */ } /* */ /* 動画　###TopMovie */ /* 全画面で中心レスポンシブ */ body.home section#TopSlowSlider video{ width: 100%; height: 100%; object-position: center center; object-fit: cover; } body.home section#TopSlowSlider .lang-japan{ font-size: 60px; color: #fff; font-weight: bold; } body.home section#TopSlowSlider .lang-eng{ font-size: 15px; color: #fff;  font-weight: normal; } body.home section#TopSlowSlider .description-Vertical{ writing-mode: vertical-rl; font-size: 50px; color: #fff; margin-left: 31%; /* 530/1680 */ letter-spacing: 13px; text-align: left; display: block; } /* メインビジュアル 2022.4.21 */ body.home section#TopMainVisual{ padding-top: 80px; /* marfin-topだと最上部ヒーローヘッダーパララックスが透けて見える　→　実害はないが */ margin-bottom: 0px; background-color: #fff; } body.home section#TopMainVisual .absOverCenter .verticalCenter{ top: calc(50% + 40px); /* padding-topの場合の上下中央位置調整 40pxはpadding-top:80pxの半分 */ } body.home section#TopMainVisual #wrapTopImage img{ width: 100%; height: auto; } body.home section#TopMainVisual p{ font-family: "Yu Mincho", "YuMincho", "游明朝体", "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } body.home section#TopMainVisual .descriptionBig{ font-size: 40px; margin-bottom: 30px; } body.home section#TopMainVisual .lang-eng { font-family: 'Noto Sans JP','Roboto', sans-serif; color: #fff; } body.home section#TopMainVisual .lang-jpn{ color: #fff; text-align: center; } body.home section#TopMainVisual .absOverCenter .verticalCenter .recept { text-align: center; font-size: 25px; font-weight: bold; color: #628728; margin-bottom: 10px; } section#TopMainVisual .btnGhost a { /* background-image: url("./images/common/triangle-black-white-20.png"); */ background-image: none; background-color: transparent; color: #fff !important; border: 3px solid #fff; max-width: 280px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; } section#TopMainVisual .btnGhost a:hover{ background-color: #bbb; } /* トップページのヘッダーは上から降りてくるアクション */ body.home header{ /* position: fixed; /* トップページだけはスライダーの上にかぶせるため　そうでないとPADRONEのようにするしかない */ /* height: 0px; /* なぜかこの部分も左端で動くので、高さを０にして誤魔化す */ background-color: transparent; border-bottom: none; } body.home .drawer-navbar--fixed { /* position: absolute; /* トップページだけはスライダーの上にかぶせるため　そうでないとPADRONEのようにするしかない */ /* top: -80px; /* */ /* animation-delay: 1s; /* この時間だけ最終形が表示されてしまうのでヤメ */ animation-duration: 1.5s; animation-name: slidein; } @keyframes slidein { from { /* top: -70px; /* CPU */ transform: translateY(-80px); /* GPU */ /* position: absolute; /* トップページだけはスライダーの上にかぶせるため　そうでないとPADRONEのようにするしかない */ } to { /* top: 0px; /* CPU */ transform: translateY(0px); /* GPU */ /* position: fixed; /* トップページだけはスライダーの上にかぶせるため　そうでないとPADRONEのようにするしかない */ } } .RelativeBase{ position: relative; } section.navy{ background-color: #0168b7; /* 0168b7 */ color: rgb(255, 255, 255); } section.lightblue{ background-color: #a2d5f0; /* lightblue */ } section.gray{ background-color: #f2f2f2; /* gray */ } section .sectionTitle { font-size: 24px; color: #388e8d; text-align: center; display: inline-block; /* 上位要素の

の高さを、この要素の高さ文確保するため */ border-left: none; position: absolute; left: 0px; right: 0px; bottom: 7px; } section.navy .sectionTitle { color: rgb(255, 255, 255); border-bottom: 1px solid #fff; } section.white .sectionTitle { } /* */ /* タイトル英語版 */ body.home .titleEnglish{ text-align: center; font-size: 80px; font-family: 'Roboto', sans-serif; /* */ color: #eee; /* 薄い水色 */ letter-spacing: 5px; line-height: 1em; } /* スライダー */ body.home #TopSlowSlider{ position: relative; } /* マスク */ /* マスクはsmart slider のtext barで実行 body.home #TopSlowSlider #wrapTopSlider .n2-ss-slider-3 .n2-ss-slide-backgrounds .n2-ss-background-image{ background-color: #02aaf0; filter:alpha(opacity=40); -moz-opacity:0.40; -khtml-opacity:0.40; opacity:0.40; } /* スライダー　TEXT BAR のテキストを非表示 */ /* .n2-style-1aa51820e61c9ca4ca8936156d849bba-simple .n2-ow .n2-ow, .n2-style-a982203d8597a0f9060835ae9309810b-simple .n2-ow .n2-ow{ display: none; } */ body.home .TableBase{ display: table; } .headerHero .v-center, body.home .absOverCenter{ /* display: table-cell; vertical-align: middle; */ position: absolute; width: 100%; height: 100%; /* 上下左右中央寄せ */ top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; } /* 親要素に対して上下中央 */ .headerHero .v-center, body.home .absOverCenter .verticalCenter{ position: absolute; width: 100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* キャッチ */ body.home #TopSlowSlider #catch{ } /* オーバーラップ */ body.home section .Overlay{ position: absolute; background-color: rgba(0,0,0,0.5); bottom: 0px; padding: 10px 30px; color: #fff; width: 100%; height: 100%; } /* 基本要素 */ body.home section h5, body.home section h6, body.home section .text{ } body.home section h5, body.home section h6{ } .titlePage.cWhite, .cWhite{ color: #fff !important; } /* 各セクションの個別設定 */ section#TopCarousel{ padding-top: 60px; /*
の高さ */ margin-bottom: 0px !important; background-color: #fff; } /* 画像部 */ section#TopCarousel .slick-list{ margin-bottom: 25px; } /* ドット */ section#TopCarousel .wpsisac-slick-carousal .slick-dots li button { background: #000 !important; border: none; } section#TopCarousel .wpsisac-slick-carousal .slick-dots li.slick-active button { background: #b2b2b2 !important; } section .boxContent .titleSub{ color: #388e8d !important; font-size: 14px; text-align: left; margin-bottom: 20px; } section .boxContent .titleSub .large{ font-size: 28px; font-weight: bold; } body.home section .catch{ color: #000 !important; font-size: 24px; text-align: left; /* font-family: "Noto Sans CJK JP"; /* */ margin-bottom: 20px; font-weight: bold; } section .boxContent .text{ margin-bottom: 0px; font-size: 15px; letter-spacing: 3px; } /* 左下600に寄せる */ body.home .absBottom{ position: absolute; bottom: 100px; left: 0px; right: 0px; } body.home .left600{ width: 100%; max-width: 600px; margin-right: auto; } .absTopLeft{ position: absolute; left: 100px; top: 150px; } .rot180{ transform: rotate(180deg); } /* 回転した要素のafterで線を付ける */ .rot180::after{ content: ''; position: absolute; border-bottom: 2px solid #000; width: 50px; top: 150px; left: -12px; transform: rotate(90deg); } .rot180.colorWhite::after{ border-bottom: 2px solid #fff; } /* 回転した要素のafterで線を付ける */ .rightBar{ position: relative; display: inline-block; } .rightBar::after{ content: ''; position: absolute; border-bottom: 2px solid #000; width: 50px; top: 10px; right: -70px; } .rightBar.colorWhite::after{ border-bottom: 2px solid #fff; } /* */ body.home section#News{ padding: 30px 0px; margin-bottom: 0px; } section#News .boxLeft{ flex: 1; margin-right: 50px; } section#News .boxRight, section#News .boxRight a{ width: 200px; } section#About .backImage{ background-repeat: no-repeat; background-size: cover; margin-bottom: 25px; /* background-position: top center; */ overflow: hidden; /* 画像ズームしても枠からはみ出ないように */ } section#About .backImage div{ text-align: center; } .textCatch{ text-align: center; line-height: 1.6em; font-size: 30px; font-weight: bold; margin-bottom: 20px; margin-left: auto; margin-right: auto; } body.home .textSummary{ font-size: 14px; color: #333; margin-left: auto; margin-right: auto; } body.home #Philosophy{ /* background-image: url("../../../images/top/sp/company-back.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; */ padding: 0px; text-align: left; } body.home #Philosophy .absBox{ } body.home #Philosophy .textCatch, body.home #Philosophy .textSummary{ color: #fff; } body.home .boxBlog a, body.home .boxCoverSpace a{ text-decoration: none; } body.home #Consulting{ } body.home #Consulting .textCatch{ font-size: 28px; color: #0c6ac1; } body.home #Finance-Insurance{ padding: 0px !important; } body.home #Finance-Insurance #Finance{ background-color: #e4f6fe; padding: 50px 0px; } body.home #Finance-Insurance #Insurance{ background-color: #fef2e4; padding: 50px 0px; } /* お知らせ・ブログ */ section#NewsBlog .widthLimit{ margin-bottom: 20px; } section#Consul-Contact .text, section#Compensation-Lecture .text{ padding: 20px; } /* hover画像エフェクト */ /* 画像がズーム　枠からはみ出ない　画像が黒でマスク透明度40% */ section#Affairs .backImage img { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; -ms-transition: .2s ease-in-out; transition: .2s ease-in-out; } section#Affairs .backImage:hover img { /* 画像をズーム */ -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -o-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); /* 画像部分を透明40%にすれば、.backImageのブラックが出現する ###BackBlack */ filter:alpha(opacity=40); -moz-opacity:0.40; -khtml-opacity:0.40; opacity: 0.4; } section#Affairs .backImage:hover{ /* 画像部分を透明40%にすると、.backImageのブラックが出現する ###BackBlack */ background-color: #000; } section#Affairs .btnGhost{ display: inline-block; position: absolute; /* 上下中央寄せ */ top: 50%; /* 上端を半分位置へ */ margin-top: -29px; /* 高さの半分上へ */ /* bottom: 0;*/ /* 上下中央はこれではダメ */ /* なぜか左右中央寄せはこれでうまくいく */ right: 0; left: 0; } /* 画像はフォアグラウンドへ section#Affairs #Adviser .backImage{ background-image: url("../../../images/top/affairs-adviser.png"); } section#Affairs #Agent .backImage{ background-image: url("../../../images/top/affairs-agent.png"); } section#Affairs #Consulting .backImage{ background-image: url("../../../images/top/affairs-consulting.png"); } section#Affairs #Establish .backImage{ background-image: url("../../../images/top/affairs-establish.png"); } section#Affairs #Change .backImage{ background-image: url("../../../images/top/affairs-change.png"); } section#Affairs #Fee .backImage{ background-image: url("../../../images/top/affairs-fee.png"); } */ /* 税理士ご挨拶 */ section#Greeting .catch{ color: #fff; } section#Greeting .description{ margin-bottom: 50px; } /* 選ばれる理由 */ .reasonTitle{ font-size: 20px; color: rgb(0, 145, 198); font-weight: bold; text-align: center; margin-bottom: 30px; } /* お客様の声 */ body.home section#Voice{ background-color: #f2f2f2; } section#Voice .boxRight img{ margin-bottom: 35px; } .voiceTitle { font-size: 26px; color: rgb(0, 145, 198); font-weight: bold; margin-bottom: 20px; } section#Voice .boxRight p{ margin-bottom: 80px; } /* お知らせ・ブログ */ section#NewsAndBlog .boxList .newList{ margin-bottom: 50px; } /*--------------------------------------------------------------------*/ /* 固定ページ */ /* ログイン */ body.login{ } body.login .content{ max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; } body.login .content .frontend-user-admin-login{ max-width: 600px; width: 100%; margin-left: auto; margin-right: auto; } body.login .content .frontend-user-admin-login input#user_login, body.login .content .frontend-user-admin-login input#user_pass{ width: 100%; font-size: 16px; } /* 黄色い表示 */ body.login .content .frontend-user-admin-login > div{ display: none !important; } /* ログアウト */ body.login .content ul{ max-width: 200px; margin-left: auto; margin-right: auto; } body.login .content ul li{ text-align: center; } body.login .content ul li a{ font-size: 16px; padding: 15px 55px; color: #000 !important; text-decoration: none !important; border: 1px solid #ccc; text-decoration: none; display: inline-block; /* 上位要素の
の高さを、この要素の高さ文確保するため */ -webkit-transition:.3s ease-in-out; -moz-transition:.3s ease-in-out; -o-transition:.3s ease-in-out; transition:.3s ease-in-out; } body.login .content ul li a:hover{ /* background-color: rgba(255,255,255,0.5);*/ background-color: rgba(240,240,240,0.5); /* フォアグランドは透過しない */ filter:alpha(opacity=100); -moz-opacity:1.00; -khtml-opacity:1.00; opacity:1.00; } /*--------------------------------------------------------------------*/ /* 下層ページのページトップ index.phpで設定 */ .titleSection{ position: relative; display: inline-block; margin-left: auto; margin-right: auto; margin-bottom: 50px; } .titlePage:after, .titleSection:after{ content: ''; border-bottom: 1px solid #000; position: absolute; width: 80%; bottom: -30px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .titlePage{ position: relative; display: inline-block; font-size: 26px !important; border: none; font-weight: bold !important; margin-bottom: 5px !important; line-height: 1.0em !important; color: #333 !important; } .titleMain{ color: #333; font-size: 26px !important; border: none; } /* サブタイトル */ .titleSub{ background-color: transparent !important; font-size: 18px !important; font-weight: bold !important; color: #b4b4b4 !important; text-align: center; font-family: 'Roboto', sans-serif !important; } body.single-ctype02 .titleSub{ display:none; } body.single-ctype01 .titleSub{ display:none; } /*--------------------------------------------------------------------*/ /* アーカイブ */ body.page-id-251 .wrap_main, /* 混在一覧ページ */ body.archive .wrap_main, body.error404 .wrap_main, body.search .wrap_main, body.single .wrap_main{ margin-bottom: 50px; } .listWrap{ border-top: 1px solid #ccc; padding-top: 20px; margin-bottom: 50px; } .listRect{ background-image: url("../../../images/common/archive-arrow-right.png"); background-repeat: no-repeat; background-position: 95% center; font-size: 14px; } .listRect span{ display: inline-block; } .listRect .date{ padding-left: 25px; border-left: 1px solid #333; margin-right: 25px; } .listRect .post-type{ margin-right: 25px; text-align: center; } .listRect .post-type a{ color: #388e8d; display: block; font-size: 14px; } .listRect .title a{ } .listRect .post-type a{ text-decoration: none; } /* XFMT_BLOG XFMT_NEWS */ /* 個別ページのタイトルボックス */ .wrapBlog{ border-top: 1px solid #ccc; padding-top: 20px; margin-bottom: 50px; } .boxBlog{ position: relative; /* background-image: url("./images/common/archive-arrow-right.png"); /* */ background-repeat: no-repeat; background-position: 97% 40%; padding-bottom: 20px; border-bottom: 1px solid #ccc; margin-bottom: 20px; } body.single .boxBlog{ background-image: none; border-top: 1px solid #ccc; padding-top: 20px; margin-bottom: 45px; } /* 右矢印 */ /* :after で position: absolute; とすると、float動作に支障が出る */ /* .boxBlog:after{ position: absolute; top: 25%; right: 25px; margin-left: 0px; font-size: 40px; font-weight: lighter; font-weight: 100; content: ">"; font-family: 'Major Mono Display', monospace; } */ /* display:flex　はやめておく　2019.2.21 */ /* 回り込みモードにする */ .boxBlog .boxBlogLeft{ /* flex-basis: 80px; /* */ float: left; width: 80px; margin-right: 20px; } .boxBlog .boxBlogRight{ /* flex-basis: auto; /* これは残りすべての幅になるのではなく、内包する要素が格納できるだけの幅しか確保されない */ /* float: right; */ width: calc(100% - 50px); } .boxBlog .title{ font-size: 14px; border: none; padding: 0px; margin-bottom: 0px; -webkit-flex: 1; flex: 1; /*（※1）*/ } .boxBlog .meta{ font-size: 12px; margin-bottom: 5px; /* */ } .boxBlog .meta .linkCate{ } .boxBlog .linkCate a{ font-size: 12px; background-color: #eb821c; text-align: center; padding: 5px 25px; color: #fff; text-decoration: none; margin-right: 30px; } .boxBlog .meta .date{ color: #888; } .boxBlog .date{ font-size: 12px; color: #888; margin-right: 30px; } .boxBlog .text{ margin-bottom: 0px !important; } .boxBlog .text a{ display: block; } /* XFMT_FLEX */ /* XFMT_SQUARE */ /* XFMT_BKNUM */ .boxCoverThree .title{ background-color: transparent !important; font-size: 13px !important; padding: 5px 0px !important; } .boxSquare{ float: left; margin-bottom: 30px; } .boxSquare:nth-child(4n){ /* margin-right: 0px; */ } .boxSquare .image, .boxSquare .TxoTerm{ margin-bottom: 5px; } .boxSquare .title{ background-color: transparent !important; padding: 0px !important; font-size: 15px !important; text-align: left; margin-bottom: 0px !important; } .boxSquare .TxoTerm, .boxSquare .TxoTerm a{ font-size: 13px; color: #02aaf0; /* 薄い水色 */ } .boxThree .cate a{ font-size: 13px; color: #888; } .boxThree .normalWrap{ padding-top: 0px; } /*----------------------*/ /* メニュードロップダウン */ /*