/* Swell Child　共通 */ /** * * 初期化 * */ /* 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; } .dispNone, .disp640{display:none;} .hide640{display:block;} .dispTab{display:none;} .hideTab{display:block;} .disp840{display:none;} .hide840{display:block;} br.hide640, br.disp640{ line-height: 0em; } /* ページタイトル

背景画像の制御 */ .disp640-960{display:none;} .hide960{display:block;} @media screen and (max-width: 960px) { .hide960{display:none;} } @media screen and (min-width: 641px) and (max-width: 960px) { .disp640-960{display:block;} } a{ /* アニメーション */ -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{ filter:alpha(opacity=70); -moz-opacity:0.70; -khtml-opacity:0.70; opacity:0.70; } .clear{ clear: both; } .clearfix:before, .clearfix:after { content: ""; clear: both; display: block; } .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;} .mb40 { margin-bottom: 40px !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; } .pb100 { padding-bottom: 100px !important;} .pb70 { 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;} .pt100 { padding-top: 100px !important;} .pt70 { padding-top: 70px !important;} .pt60 { padding-top: 60px !important;} .pt50 { padding-top: 50px !important;} .pt30 { padding-top: 30px !important;} .pt20 { padding-top: 20px !important;} .pt10 { padding-top: 10px !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;*/ } .colorWhite{ color: #fff !important; } .colorGray{ color: #888 !important; } .colorOrange{ color: #F19C38 !important; color: #E75C29 !important; } .colorRed{ color: #F00 !important; } .c_ttl_3 .ttl .color, .imt_txt_wrap .color, .sub .color { color: #006D00; } .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 */ } .radiusOrbal{ border-radius: 500px; /* CSS3草案 */ -webkit-border-radius: 500px; /* Safari,Google Chrome用 */ -moz-border-radius: 500px; /* Firefox用 */ } .bold{ font-weight: bold; } .fRed{ color: #f00; } .fSmall{ font-size: 12px !important; } .fBig{ font-size: 22px !important; font-weight: bold !important; } .backOrange{ padding: 10px; background-color: #E75C29; color: #fff; } .backLightGreen{ background-color: #E8F2E2 !important; } .backLightGray{ background-color: #F6F6F6 !important; } .backNone{ background-color: transparent !important; } /* カッコつき数字 */ ol.NumKakko li { list-style-type: none; counter-increment: cnt; margin-left: 27px; text-indent: -27px; } ol.NumKakko li::before { content: "(" counter(cnt) ") "; } .backWhite{ background-color: #fff; } .backLightYellow{ background-color: #FEFBEB; } .InlineBlock{ display: inline-block; } img.v-top{ vertical-align: top; } img.v-middle{ vertical-align: middle; } img.v-bottom{ vertical-align: baseline; } /* PC用のオーバーレイ */ .PC-Overlay{ position: fixed; z-index: 100; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); } /*--------------------------------------------------------------------*/ /* モーダルメニュー */ /* 従来のハンバーガー常時非表示 */ .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; /* */ /* background-color: rgba(0, 0, 0, .7); /* */ } .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; } .absOverCenter .verticalCenter, .headerHero .v-center { /* ブロック要素上下中央寄せ */ position: absolute; 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; } /*--------------------------------------------------------------------*/ /* 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; background-color:#FCF9EF; 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: var(--color_htag); color: #fff !important; /* フォアグランドは透過しない */ 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用 */ } /* タグサンプルの背景画像とゴーストボタン */ .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; } /* CTAのゴーストボタン */ footer section#CTA .btnGhost a:hover{ background-color: #f2f2f2; /* 極端に薄いグレー */ } /*--------------------------------------------------------------------*/ /* 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{ 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%; } /*--------------------------------------------------------------------*/ /* スマホメニュー */ /* ハンバーガー下の「メニュー」 */ .c-iconBtn__label{ font-size: 16px !important; font-weight: bold; } /* 右からスライドインするメニュー "C:\Project\Scitech\WordPressImporter\Job\佐藤卓哉司法書士事務所\受領資料\20260204 - スマホメニュー\スマホ時のメニュー表示についての要望.png" */ /* 閉じるボタン */ .-right .p-spMenu__closeBtn { /* right: 4vw; /* メニュー本体と位置合わせ */ } .l-header__menuBtn.sp_, .p-spMenu__closeBtn .c-iconBtn{ background-color: #2db2e5; background-color: #f00; } .p-spMenu__closeBtn .c-iconBtn__icon{ color: #fff; line-heigt: 1em; } .p-spMenu__closeBtn .c-iconBtn__icon::after{ content: '閉じる'; position: relative; font-style: normal !important; font-size: 16px !important; font-weight: bold; } .p-spMenu__body { padding-top: 10px; /* 閉じるボタンとのスペース */ } /* 文字サイズ */ .p-spMenu__body li.menu-item a{ font-size: 18px !important;; } /* 最上位 */ .p-spMenu__body ul.c-listMenu{ background-color: #60B5FF; } /* 第二階層 */ .p-spMenu__body ul.c-listMenu ul.sub-menu{ background-color: #CAE9ED; } /* > の位置 */ .p-spMenu__body ul.c-listMenu ul.sub-menu a::before{ left: 1.5em; /* 1em +0.5 */ } /* 左スペース */ .p-spMenu__body ul.c-listMenu ul.sub-menu a{ padding-left: 3em; /* 2.5em +0.5 */ } /* 第三階層 */ .p-spMenu__body ul.c-listMenu ul.sub-menu ul.sub-menu{ background-color: #FAF8F1; } /* > の位置 */ .p-spMenu__body ul.c-listMenu ul.sub-menu ul.sub-menu a::before{ left: 2.75em; /* 1.75em +1 */ } /* 左スペース */ .p-spMenu__body ul.c-listMenu ul.sub-menu ul.sub-menu a{ padding-left: 4.25em; /* 3.25em +1 */ } /* 第三階層のドロップダウン */ /* ＋マーク */ .p-spMenu .p-spMenu__body .menu-item-has-children .menu-item-has-children > a{ position: relative; } .p-spMenu .p-spMenu__body .menu-item-has-children .menu-item-has-children > a .wrapMark{ position: absolute; top: -5px; right: 20px; width: 30px; height: 100%; /* rotateの中心を確定するため */ cursor: move; text-align: center; /* position: relative; /* これをすると全幅になる */ } /* */ .p-spMenu .p-spMenu__body .menu-item-has-children .menu-item-has-children > a .wrapMark::after{ content: '開く'; font-size: 10px; top: -25px; position: relative; } /* */ /* 「＋」アイコン */ .p-spMenu .p-spMenu__body .menu-item-has-children .menu-item-has-children > a .wrapMark .Mark{ font-size: 35px; display: inline-block; transform: rotate(0deg); transform-origin: center; height: 100%; /* rotateの中心を確定するため */ width: 100%; /* アニメーション */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; } /* ドロップダウンしたときのアイコン「ｘ」 */ .p-spMenu .p-spMenu__body .menu-item-has-children .menu-item-has-children .subOpen .wrapMark .Mark{ transform: rotate(135deg); } /* */ .p-spMenu .p-spMenu__body .menu-item-has-children .menu-item-has-children .subOpen .wrapMark::after{ content: '閉じる'; } /* */ /* 第三階層非表示 */ .p-spMenu .p-spMenu__body .menu-item-has-children .menu-item-has-children .sub-menu .menu-item{ opacity: 0; max-height: 0px; /* アニメーション */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; } /* 第三階層ドロップダウン となるので、その直下の.sub-menuをドロップダウンする */ .p-spMenu .p-spMenu__body .menu-item-has-children .menu-item-has-children .subOpen + .sub-menu .menu-item{ opacity: 1; max-height: 100px; } /*--------------------------------------------------------------------*/ /* ライブラリ */ /* 店舗情報に使用 */ .widthLimitStore{ width: 100% !important; max-width: 1264px !important; margin: 0px auto; padding-left: 0px; padding-right: 0px; } .widthLimit1600{ width: 100% !important; max-width: 1640px !important; margin: 0px auto; padding-left: 20px; padding-right: 20px; } .widthLimitNarrow{ width: 100% !important; max-width: 960px !important; margin: 0px auto; } .widthLimit{ width: 100% !important; max-width: 1140px !important; margin: 0px auto; padding-left: 20px; padding-right: 20px; } .widthLimit1000{ width: 100% !important; max-width: 1040px !important; margin: 0px auto; } .widthLimit800{ width: 100% !important; max-width: 840px !important; margin: 0px auto; } .widthLimit640{ width: 100% !important; max-width: 640px !important; margin: 0px auto; } .widthLimit400{ width: 100% !important; max-width: 440px !important; margin: 0px auto; } .sideSpace{ padding-left: 20px !important; padding-right: 20px !important; } /* アスペクト比が異なる（大きさも異なる）画像を、大きさ同じにトリミングしながらレスポンシブ動作 */ /* トップページ　先生方の声に利用 */ .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; } .wrapFlexSplit{ 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; /*最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置*/ } /* 左右入れ替え */ .flexRevers{ flex-direction: row-reverse; } .align-center-2level > div, .align-center{ align-items: center; } /* 上下左右中央寄せの内部サイズ制限 */ .boxFloatCenter{ } .boxFree{ -webkit-flex: 1; flex: 1; /*（※1）*/ } /* 画像アスペクト比を保持したままのレスポンシブ */ /* 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 */ } /* パララックス */ 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; /* */ } /* 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; } .boxThird{ width: 31%; margin-left: 1%; margin-right: 1%; } .boxTow{ width: 49%; } /*--------------------------------------------------------------------*/ /* SWELLモジュール */ /* グローバルメニュー */ /* 第一弾用のメニュー無効化 */ /* hover 非表示 */ .noLink a{ pointer-events: none; } /* .c-gnav > .menu-item:hover > .sub-menu { opacity: 0; visibility: hidden; } .p-spMenu .c-submenuToggleBtn{ display: none; } */ /* ★

上下線ありのデザインを中央ボールドへカスタマイズするコード */ /*#body_wrap.home section .c_ttl_1 .wp-block-heading, /* トップページ　白縁付き .ttl svg text の代わり */ /* .post_content h1, .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title):not(.titleSearchResult)) { background: none; padding: 0px; color: #000; color: #3c3c3c; text-align: center; font-size: 32px; font-weight: bold; } .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before { position: relative; display: block; pointer-events: none; content: ""; top: 0px; border: none !important; } /* SWELLモジュール４のfontawesome */ .wp-container-27 .fontawesome{ text-align: center; font-size: 70px; margin-bottom: 0px; } /* SWELLモジュール8　上辺斜め clip-pathによる */ #SlatMask{ position: relative; } .MaskTriangle{ position: absolute; top: 0px; left: 0px; right: 0px; width: 100%; height: 50px; background-color: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); z-index: 10; } .MaskTriangleBottom{ position: absolute; bottom: -1px; /* 下に背景が覗くのを防止 */ left: 0px; right: 0px; width: 100%; height: 50px; background-color: #fff; clip-path: polygon(0 0, 100% 100%, 0 100%); z-index: 10; } /* 要素の全体背景に三角形を配置する */ .fullTriangle{ position: absolute; top: 0px; left: 0px; right: 0px; width: 100%; height: 100%; background-color: #E8F2E2; /* 薄いオレンジ */ clip-path: polygon(100% 0, 0 100%, 100% 100%); z-index: -1; } /* SWELLバナーブロックの各要素の高さを合わせる　cHeight100 */ .cHeight100 .swell-block-bannerLink, .cHeight100 .c-bannerLink, .cHeight100 .c-bannerLink__figure, .cHeight100 .c-bannerLink__img{ height: 100%; } /* SWELL12　コーナー三角形 */ /* 下層のグループブロックを基準とする */ .cTryangle .wp-block-group{ position: relative; } .cTryangle .wp-block-group img{ height: 150px; width: 100%; } .cTryangle .wp-block-image{ width: 100%; } .cTryangle .CornerTryangle{ position: absolute; top: 0px; right: 0px; background-color: #ffc831; width: 80px; height: 80px; clip-path: polygon(0 0, 100% 0, 100% 100%); z-index: 10; } .cTryangle .CornerTryangleText{ position: absolute; font-size: 14px; top: 16px; right: 8px; transform: rotate(45deg); line-height: 1em; } /* 無料電話ボタン　中央ぞろえ　max-width:580pxとし、をその幅にする */ /* .button-phoneの形状をブロックパターン「無料電話をかける」と同じにする */ .button-phone a { /* box-shadow: 0 4px 0 var(--the-solid-shadow,var(--color_main_dark)); */ box-shadow: 0 4px 0 rgba(181,117,42,1); color: #fff; font-weight: 700; transition: box-shadow .25s,-webkit-transform .25s; transition: transform .25s,box-shadow .25s; transition: transform .25s,box-shadow .25s,-webkit-transform .25s; z-index: 1; background: var(--the-btn-bg); border-radius: var(--the-btn-radius, 300px) !important; display: inline-block; letter-spacing: var(--swl-letter_spacing,1px); line-height: 1.5; margin: 0; min-width: var(--the-min-width, 40%) !important; min-width: 300px !important; padding: var(--the-padding, 0.75em 1.5em); position: relative; text-decoration: none; width: var(--the-width); } .button-phone a:hover { box-shadow: 0 0 0 transparent !important; -webkit-transform: translate3d(0,4px,0); transform: translate3d(0,4px,0); } .button-phone a span[style="font-size:28px"]{ font-size: 22px !important; } .button-phone a span[style="font-size:19px"]{ margin-top: 5px; font-size: 13px !important; } /* 無料電話のCTA */ .CTA-free-tel{ position: relative; padding: 100px 0px; } .CTA-free-tel .discription{ padding-right: 30%; z-index: 1; } .CTA-free-tel .staff{ position: absolute; top: 0px; right: 10%; z-index: 2; } .CTA-free-tel .staff img{ /* これが実像 */ height: 350px; width: auto; } .CTA-free-tel .button-phone { z-index: 3; position: relative; } /* SWELLの /swell/build/css/main.css でパンくずの個別ページの現ページが非表示 */ .single .p-breadcrumb__item:last-child>span.p-breadcrumb__text { display: inline-block; } /* 司法書士報酬 */ .swell-block-columns.table-fee{ border-top: 1px solid #ccc; border-left: 1px solid #ccc; } .swell-block-columns.table-fee .swell-block-column{ border: none; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; position: relative; padding: 5px; } .swell-block-columns.table-fee .swell-block-column:nth-child(2n+1){ background-color: #fdf6df; min-height: 60px; /* 縦になった場合 */ /* width: 150px; /* 固定幅　できない */ } .swell-block-columns.table-fee .swell-block-column:nth-child(2n){ /* -webkit-flex: 1; flex: 1; /*（※1）*/ } .swell-block-columns.table-fee .swell-block-column:nth-child(2n+1) p{ /* 垂直中央 */ 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; /* */ } /* リストスタイル番号なし */ .is-style-good_list li::before { color: var(--color_htag); } /* リストスタイル番号あり */ .is-style-num_circle li::before { width: 25px; } /* point-m エクスクラメーション＋point */ .point-m{ position: relative; padding-left: 34px; } .point-m::before{ content: ''; position: absolute; background-image: url("/WordPress/Images/point-m.png"); background-repeat: no-repeat; background-position: 0px center; /* 左 */ background-size: contain; width: 29px; height: 37px; left: 0px; top: 0px; } /* エクスクラメーションマーク */ .point-s{ position: relative; padding-left: 28px; } .point-s::before{ content: ''; position: absolute; background-image: url("/WordPress/Images/point-s.png"); background-repeat: no-repeat; background-position: 0px center; /* 左 */ background-size: contain; width: 23px; height: 23px; left: 0px; top: 5px; } /* 手続きの流れ　当事務所がやること */ .MyMisson{ position: relative; padding-left: 28px; background-color: var(--color_htag); display: inline-block; color: #fff; padding-right: 10px; } .MyMisson::before{ content: ''; position: absolute; background-image: url("/WordPress/Images/point-s.png"); background-repeat: no-repeat; background-position: 0px center; /* 左 */ background-size: contain; width: 23px; height: 23px; left: 0px; top: 5px; } /*--------------------------------------------------------------------*/ /* 佐藤司法書士事務所独自 */ /* 手続きの流れ　下矢印　「テスト」ページを保存しておくため、疑似要素での方法はヤメ */ /* .step-box{ position: relative; margin-bottom: 50px !important; } .step-box:after{ content: '⬇'; position: relative; width: 0px; height: 0px; bottom: -5px; left: 47%; color: #005a8c; font-size: 2.5em; } .step-box.noArrow:after{ content: none; } /* */ /*--------------------------------------------------------------------*/ /* CTA */ /* ヘッダー内部 */ header .l-header__inner #HeaderCTA{ align-items: center; } header .l-header__inner .boxThree{ margin-right: 10px; } header .l-header__inner .boxThree:last-child{ margin-right: 0px; } header .l-header__inner #HeaderCTA a{ font-size: 20px; color: #fff; padding: 3px 10px; /* border: 1px solid #ccc; /* */ border-radius: 20px; } header .l-header__inner #HeaderCTA #header-inquiry2 a{ background-color: #0c7bd2; /* 青 */ } header .l-header__inner #HeaderCTA #header-tel a{ background-color: #37943a; /* 緑 */ } header .l-header__inner #HeaderCTA #header-access a{ background-color: #ec7e01; /* オレンジ */ } header .l-header__inner #HeaderCTA a img{ height: 20px; width: auto; vertical-align: middle; margin-bottom: 4px; } #HeaderCTA{ /* bottom: -50px; /* アニメ―ションのための初期位置　これは実際には何の影響もない */ position: fixed; top: 80px; right: 50px; z-index: 100; /* アニメーション */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; } #HeaderCTA a{ font-size: 20px; color: #fff; padding: 3px 10px; /* border: 1px solid #ccc; /* */ border-radius: 20px; } #HeaderCTA #header-inquiry2 a{ background-color: #0c7bd2; /* 青 */ } #HeaderCTA #header-tel a{ background-color: #37943a; /* 緑 */ } #HeaderCTA #header-access a{ background-color: #ec7e01; /* オレンジ */ } #HeaderCTA a img{ height: 20px; width: auto; vertical-align: middle; margin-bottom: 4px; } /* スクロール後の位置 */ html[data-scrolled="true"] #HeaderCTA{ /* */ position: fixed; top: auto; bottom: 0px; right: 0px; } /* モーダル ModaalCTAはmodalInlineCTAのjQueryで付与*/ .modaal-overlay, .ModaalCTA{ display: none !important; } .ModaalCTA .floating-modal--phone .modal-text, .ModaalCTA .floating-modal--access .modal-text{ text-align: center; } /* フッター直前ウィジェット */ .boxTow{ width: 48%; } .w-beforeFooter{ padding-top: 80px; border-top: 3px solid var(--color_htag); } .w-beforeFooter #custom_html-3{ } .w-beforeFooter #custom_html-3 #FooterCTA{ } .w-beforeFooter #custom_html-3 #FooterCTA h2{ text-align: center; font-size: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--color_htag); } .w-beforeFooter #custom_html-3 #FooterCTA section{ width: 100%; padding: 50px 20px; margin-left: auto; margin-right: auto; } .w-beforeFooter #custom_html-3 #FooterCTA a{ } .w-beforeFooter #custom_html-3 #FooterCTA .image{ text-align: center; } .w-beforeFooter #custom_html-3 #FooterCTA a img{ height: 40px; width: auto; vertical-align: middle; margin-bottom: 4px; } .w-beforeFooter #custom_html-3 #FooterCTA #header-access p{ font-size: 25px; margin-bottom: 20px; text-align: center; } .w-beforeFooter #custom_html-3 #FooterCTA #header-access p.walk{ margin-bottom: 50px; } .w-beforeFooter #custom_html-3 #FooterCTA #header-access p.reserve{ text-align: left; margin-bottom: 50px; } /* ご相談は完全予約制ボタン */ .w-beforeFooter #custom_html-3 #FooterCTA #header-access #header-inquiry3{ margin-bottom: 20px; } .w-beforeFooter #custom_html-3 #FooterCTA #header-access #header-inquiry3 a{ border: 3px solid #FE3030; /* 赤 */ border-radius: 20px; font-size: 22px; text-align: center; width: 80%; margin-left: auto; margin-right: auto; padding: 15px; display: block; background-color: transparent !important; } .w-beforeFooter #custom_html-3 #FooterCTA #header-access #header-inquiry3 a:hover{ background-color: #eee !important; } /* ボタン */ .w-beforeFooter #custom_html-3 #FooterCTA a.buttonCTA{ font-size: 35px; color: #fff; padding: 20px; /* border: 1px solid #ccc; /* */ width: 100%; text-align: center; display: block; border-radius: 20px; background-repeat: no-repeat; background-position: 10px center; /* 左 */ background-size: contain; background-size: 70px; } .w-beforeFooter #custom_html-3 #FooterCTA #header-tel a.buttonCTA{ background-image: url("/common/img/floating-menu--phone.svg"); background-color: #37943a; /* 緑 */ } .w-beforeFooter #custom_html-3 #FooterCTA #header-inquiry2 a.buttonCTA{ background-image: url("/common/img/floating-menu--mail.svg"); background-color: #0c7bd2; /* 青 */ } .w-beforeFooter #custom_html-3 #FooterCTA #header-access a.buttonCTA{ background-image: url("/common/img/floating-menu--map.svg"); background-color: #ec7e01; /* オレンジ */ font-size: 28px; } /* 営業時間 */ /* ヘッダー内部 */ .w-header .BusinessTime{ /* display: flex; /* 2026.3.4 レイアウト変更 */ /* max-width: 400px; /* */ } .w-header .BusinessTime h4{ margin-right: 10px;; font-size: 20px; text-align: center; margin-bottom: 5px; } .w-header .BusinessTime .clock{ height: 30px; width: auto; vertical-align: -8px; } .w-header .BusinessTime .Time tbody{ /* display: flex; /* 2026.3.4 レイアウト変更 */ } .w-header .BusinessTime .Time tbody tr{ /* border-right: 1px solid #ccc; /* 2026.3.4 レイアウト変更 */ } .w-header .BusinessTime .Time tbody tr:last-child{ border-right: none; } .w-header .BusinessTime .Time tbody td{ font-size: 13px; font-size: 20px; } .w-header .BusinessTime .Time tbody td:first-child{ /* padding-left: 10px; /* 2026.3.4 レイアウト変更 */ padding-right: 30px; /* 2026.3.4 レイアウト変更 */ text-align: right; } .w-header .BusinessTime .Time tbody td:last-child{ /* padding-right: 10px; /* 2026.3.4 レイアウト変更 */ } .w-header .BusinessTime .text{ font-size: 18px; border: 1px solid #c00; padding: 0px 3px; color: #c00; } .BusinessTime .rowTime{ text-align: center; font-size: 28px; margin-bottom: 20px; } .w-header .BusinessTime .rowTime{ text-align: center; font-size: 20px; margin-bottom: 0px; } /* フッター直前内 */ .w-beforeFooter #custom_html-3 #FooterCTA .BusinessTime{ width: 100% !important; max-width: 640px !important; margin: 0px auto; font-size: 28px; } .w-beforeFooter #custom_html-3 #FooterCTA .BusinessTime h4{ text-align: center; margin-bottom: 10px; font-size: 40px; } .w-beforeFooter #custom_html-3 #FooterCTA .BusinessTime .clock{ height: 50px; width: auto; vertical-align: -10px; } .w-beforeFooter #custom_html-3 #FooterCTA .BusinessTime .Message{ width: 100%; border: 3px double #c00; padding: 10px; } .w-beforeFooter #custom_html-3 #FooterCTA .BusinessTime .Message p{ font-size: 20px; color: #c00; } .w-beforeFooter #custom_html-3 #FooterCTA .BusinessTime .Time{ width: 100%; /* max-width: 300px !important; /* */ margin: 0px auto; } .w-beforeFooter #custom_html-3 #FooterCTA .BusinessTime .Time table{ width: 100%; } .w-beforeFooter #custom_html-3 #FooterCTA .BusinessTime .Time table td{ /* border-bottom: 1px solid #ccc; /* 2026.3.4 レイアウト変更 */ padding: 5px; } .w-beforeFooter #custom_html-3 #FooterCTA .BusinessTime .Time table td:first-child{ text-align: right; padding-right: 20px; } /* "C:\Project\Scitech\WordPressImporter\Job\佐藤卓哉司法書士事務所\受領資料\20260305 - 営業時間修正案\営業時間表2～3行-設定との関係.png" */ .BusinessTime .Time table{ border-top: 1px solid #ccc; border-left: 1px solid #ccc; width: fit-content; } .BusinessTime .Time table td{ text-align: center !important; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 3px 5px !important; } .BusinessTime .Time table td.dow{ background-color: #FFE7C2; } /* 対象区域 */ .w-beforeFooter #custom_html-3 #FooterCTA .BuisnessArea{ border: 1px solid #ccc; padding: 10px; background-color: #eee; } .w-beforeFooter #custom_html-3 #FooterCTA .BuisnessArea h5{ margin-bottom: 10px; } .w-beforeFooter #custom_html-3 #FooterCTA .BuisnessArea .area{ font-size: 14px; margin-bottom: 10px; } /*--------------------------------------------------------------------*/ /* トップページコンテンツ最上部のスペース */ .top #content { padding-top: 0px !important; } /* */ .l-content{ /* margin-bottom: 0px !important; /* デフォルトではスペースあり */ padding-top: 0px !important; } /*--------------------------------------------------------------------*/ /* 袋文字 */ #content h2.fukuro{ -webkit-text-stroke: 2px #fff; /* 縁取り */ text-stroke: 2px #fff; /* 縁取り */ } #content h2.fukuro-white{ -webkit-text-stroke: 2px #000; /* 縁取り */ text-stroke: 2px #000; /* 縁取り */ color: #fff; } #content h2.fukuro1{ -webkit-text-stroke: 1px #fff; /* 縁取り */ text-stroke: 1px #fff; /* 縁取り */ } #content h2.fukuro-white1{ -webkit-text-stroke: 1px #000; /* 縁取り */ text-stroke: 1px #000; /* 縁取り */ color: #fff; } #content h2.fukuro3{ -webkit-text-stroke: 3px #fff; /* 縁取り */ text-stroke: 3px #fff; /* 縁取り */ } #content h2.fukuro-white3{ -webkit-text-stroke: 3px #000; /* 縁取り */ text-stroke: 3px #000; /* 縁取り */ color: #fff; } .shadowWhite{ /* text-shadow: 1px 0 0 #d00, 1px 1px 0 #d00, 0 1px 0 #d00, -1px 1px 0 #d00, -1px 0 0 #d00, -1px -1px 0 #d00, 0 -1px 0 #d00, 1px -1px 0 #d00; */ text-shadow: 3px 0 0 #fff, 3px 3px 0 #fff, 0 3px 0 #fff, -3px 3px 0 #fff, -3px 0 0 #fff, -3px -3px 0 #fff, 0 -3px 0 #fff, 3px -3px 0 #fff; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; } .shadowGray{ color: #fff !important; text-shadow: 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888; } /*--------------------------------------------------------------------*/ /* パターンブロック用 */ /* よくある質問 */ #Patternblock-faq{ padding-top: 50px; } /* オレンジボタン背景色　#f19c38　→　#EA4800 */ .btnOrange a:hover, .btnOrange a { background-color: #EA4800 !important; box-shadow: 0 4px 0 #BC3A00 !important; /* 縁 */ } /*--------------------------------------------------------------------*/ /* ページ個別 */ /* メインビジュアル全幅 */ .MainVisual{ width: 100%; max-width: 3000px; margin-left: auto; margin-right: auto; } .MainVisual img{ width: 100%; } /* トップページ */ /* メインビジュアル */ #MainVisual-Toppage{ background-image: url(./assets/images/top/mv_bg_pc.webp); background-position: center center; background-repeat: no-repeat; background-size: cover; } /* */ #MainVisual-Toppage .widthLimitMV{ max-width: 1700px; min-width: 1220px; margin-left: 20%; margin-left: calc(50% - 600px); margin-right: 0px; align-items: center; } #MainVisual-Toppage .boxText{ width: 60%; max-width: 680px; margin-right: -100px; /* .boxImageが食い込めるように */ } #MainVisual-Toppage .boxImage{ width: 40%; min-width: 600px; } #MainVisual-Toppage .catch{ font-size: 26px; margin-bottom: 40px; font-weight: 600; line-height: 2em; margin-bottom: 50px; } #MainVisual-Toppage h1{ font-size: 68px; font-weight: 900; color: #006D00; line-height: 1.2em; margin-bottom: 40px; } #MainVisual-Toppage .small{ font-size: 54px; } #MainVisual-Toppage .black{ color: #282828; } #MainVisual-Toppage .green{ color: #006D00; } .orange{ color: #E75C29; } #MainVisual-Toppage .star{ position: relative; } #MainVisual-Toppage .star::before{ position: absolute; content: ""; background-image: url(./assets/images/top/mv_kirari-14.webp); background-repeat: no-repeat; background-position: center top; width: 100%; height: 17px; top: -20px; } #MainVisual-Toppage .underLine-dot{ border-bottom: 2px dotted #006D00; padding-bottom: 5px; } #MainVisual-Toppage .backCocoul{ background-image: url(./assets/images/top/mv_cocoul.webp); background-position: 70% 80%; background-repeat: no-repeat; font-weight: 900; } #MainVisual-Toppage .btnCampaine{ background-color: #E75C29; font-size: 48px; color: #fff; height: 100px; /* .circleと一致させる必要 */ border-radius: 100px; text-align: center; width: 600px; background-image: url(./assets/images/common/triangle-black-white-20.png); background-repeat: no-repeat; background-position: right 20px center; /* 右から20px　縦中央 */ } #MainVisual-Toppage .btnCampaine .term{ display: block; font-size: 18px; font-weight: 600; } #MainVisual-Toppage .btnCampaine .desc, #MainVisual-Toppage .btnCampaine .term{ color: #fff; } #MainVisual-Toppage .btnCampaine .circle{ background-color: #fff; font-size: 18px; font-weight: 600; color: #E75C29; height: 100px; width: 100px; border-radius: 100px; text-align: center; line-height: 1em; /* padding-top: 25px; /* */ margin-right: 70px; margin-right: 10px; /* 文字数によってここを調整すること */ display: flex; align-items: center; padding-left: 15px; } #MainVisual-Toppage .btnCampaine .desc{ line-height: 1.4; /* emつけない */ font-weight: 900; } /*--------------------------------------------------------------------*/ /* ページタイトル */ /* 袋文字 */ .l-topTitleArea .c-pageTitle{ color: #fff !important; text-shadow: 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888; } /* #body_wrap.map .l-topTitleArea, #body_wrap.map .l-topTitleArea::before, #body_wrap.map .l-topTitleArea::after { background-color: #fff !important;; content: none !important; } #body_wrap.map .l-topTitleArea .l-topTitleArea__img{ display: none; } */ .l-topTitleArea .c-pageTitle{ font-size: 30px; /* text-align: center; /* */ } /* 投稿のタイトル */ .l-topTitleArea__body .c-postTitle__ttl .sub{ font-size: 21px; display: block; } .l-topTitleArea .c-pageTitle .sub{ font-size: 25px; display: block; } #body_wrap:not(.home) #content.l-content{ padding-top: 80px !important; } /* お役立ち情報 */ #body_wrap.single-post .l-topTitleArea__body time, #body_wrap.single-post .l-topTitleArea__body .p-articleMetas{ display: none; } /*--------------------------------------------------------------------*/ /* 無限低速スライド */ /* 背景画像を装備した要素　自身で画像サイズと同じ領域を確保 */ /* */ /* background:url(./assets/images/top/top_logoline.png) repeat-x; /* */ /* background-size:1120px 200px; width:300vw; height:200px; /* */ .itemBackLogo { animation:background_Right_Left_Horizontal_scroll 40s linear infinite; background:url(./assets/images/top/top_logoline.webp) repeat-x; background-size:2674px 120px; width: 930vw; /* スマホ320pxの場合は画像幅2674px＋画面幅320px分の仮想画像が生成されるように、(2674+320)/320=9.3画面分が必要 */ overflow: hidden; /* はみ出たら非表示 */ height: 120px; } /* .itemBackLogoを1つ分左に移動する 背景画像の幅分だけ移動*/ @-webkit-keyframes background_Right_Left_Horizontal_scroll { 0% { transform:translateX(0); } 100% { transform:translateX(-2674px); /* */ } } @keyframes background_Right_Left_Horizontal_scroll { 0% { transform:translateX(0); } 100% { transform:translateX(-2674px); /* */ } } .itemBackLogo_test { animation:background_Right_Left_Horizontal_scroll_test 15s linear infinite; /* */ /* background:url(./assets/images/top/top_logoline.webp) repeat-x; /* */ /* background-size:2674px 120px; width:200vw; height:120px; /* */ background:url(./assets/images/top/front_blog_banner.jpg) repeat-x; /* */ background-size:600px 130px; width:300vw; height:130px; } /* .itemBackLogoを1つ分左に移動する */ @-webkit-keyframes background_Right_Left_Horizontal_scroll_test { 0% { transform:translateX(0) } 100% { /* transform:translateX(-100%) /* 要素の幅分移動　これでは連続性がダメ */ /* transform:translateX(-2674px) /* 背景画像の幅分だけ移動 */ transform:translateX(-600px) /* 背景画像の幅分だけ移動 */ } } @keyframes background_Right_Left_Horizontal_scroll_test { 0% { transform:translateX(0) } 100% { /* transform:translateX(-100%) /* */ /* transform:translateX(-2674px) /* 背景画像の幅分だけ移動 */ transform:translateX(-600px) /* 背景画像の幅分だけ移動 */ } } /*--------------------------------------------------------------------*/ /* トップページ */ /* メインビジュアル */ .p-mainVisual{ background-color: var(--color_htag); } .p-mainVisual .p-mainVisual__inner{ max-height: 280px; } .p-mainVisual .p-mainVisual__imgLayer{ margin-left: auto; margin-right: auto; left: 0px; right: 0px; } .p-mainVisual .p-mainVisual__imgLayer .p-mainVisual__img{ object-fit: contain; /* max-width: 960px; height: auto !important; */ } /* コンテンツスライダー */ /* 初期状態では非表示 */ #post_slider{ display: none; } #post_slider .p-postSlider__title{ font-size: 29px; margin-bottom: 86px; } .p-postSlider .p-postList__title { font-size: 18px !important; } /* 業務メニュー */ /* ▼ scitechがデザイン　参考のため残し ▼ */ /* リッチカラムにこのクラスを付加する */ .BuisinessMenu{ } /* 共通 */ .BuisinessMenu .wp-block-heading{ margin-bottom: 50px !important; } .BuisinessMenu .swell-block-column{ border: 3px solid transparent; padding-bottom: 70px; position: relative; } .BuisinessMenu .swell-block-column .wp-block-media-text{ /* height: 80%; /* */ border: 2px solid transparent; } .BuisinessMenu .swell-block-column .swell-block-button{ position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 10px; width: 80%; } .BuisinessMenu .swell-block-column .swell-block-button a{ border: 2px solid transparent; } /* Orange */ .BuisinessMenu .swell-block-column.Orange {border-color: darkorange ;} .BuisinessMenu .swell-block-column.Orange .swell-block-button a, /* ボタン */ .BuisinessMenu .swell-block-column.Orange .swl-inline-icon::after, /* アイコン */ .BuisinessMenu .swell-block-column.Orange .wp-block-heading a{ color: darkorange ;} .BuisinessMenu .swell-block-column.Orange .wp-block-media-text{ background-color: lemonchiffon !important;border-color: darkorange ;} .BuisinessMenu .swell-block-column.Orange .swell-block-button a{ border-color: darkorange ;} .BuisinessMenu .swell-block-column.Orange .swell-block-button a:hover{ background-color: darkorange ;} /* Blue */ .BuisinessMenu .swell-block-column.Blue {border-color: dodgerblue;} .BuisinessMenu .swell-block-column.Blue .swell-block-button a, /* ボタン */ .BuisinessMenu .swell-block-column.Blue .swl-inline-icon::after, /* アイコン */ .BuisinessMenu .swell-block-column.Blue .wp-block-heading a{ color: dodgerblue;} .BuisinessMenu .swell-block-column.Blue .wp-block-media-text{ background-color: lightcyan !important;border-color: dodgerblue;} .BuisinessMenu .swell-block-column.Blue .swell-block-button a{ border-color: dodgerblue;} .BuisinessMenu .swell-block-column.Blue .swell-block-button a:hover{ background-color: dodgerblue;} /* Navy */ .BuisinessMenu .swell-block-column.Navy {border-color: mediumblue;} .BuisinessMenu .swell-block-column.Navy .swell-block-button a, /* ボタン */ .BuisinessMenu .swell-block-column.Navy .swl-inline-icon::after, /* アイコン */ .BuisinessMenu .swell-block-column.Navy .wp-block-heading a{ color: mediumblue;} .BuisinessMenu .swell-block-column.Navy .wp-block-media-text{ background-color: skyblue !important;border-color: mediumblue;} .BuisinessMenu .swell-block-column.Navy .swell-block-button a{ border-color: mediumblue;} .BuisinessMenu .swell-block-column.Navy .swell-block-button a:hover{ background-color: mediumblue;} /* Darkgreen */ .BuisinessMenu .swell-block-column.Darkgreen {border-color: darkgreen;} .BuisinessMenu .swell-block-column.Darkgreen .swell-block-button a, /* ボタン */ .BuisinessMenu .swell-block-column.Darkgreen .swl-inline-icon::after, /* アイコン */ .BuisinessMenu .swell-block-column.Darkgreen .wp-block-heading a{ color: darkgreen;} .BuisinessMenu .swell-block-column.Darkgreen .wp-block-media-text{ background-color: mediumaquamarine !important;border-color: darkgreen;} .BuisinessMenu .swell-block-column.Darkgreen .swell-block-button a{ border-color: darkgreen;} .BuisinessMenu .swell-block-column.Darkgreen .swell-block-button a:hover{ background-color: darkgreen;} /* Green */ .BuisinessMenu .swell-block-column.Green {border-color: limegreen ;} .BuisinessMenu .swell-block-column.Green .swell-block-button a, /* ボタン */ .BuisinessMenu .swell-block-column.Green .swl-inline-icon::after, /* アイコン */ .BuisinessMenu .swell-block-column.Green .wp-block-heading a{ color: limegreen ;} .BuisinessMenu .swell-block-column.Green .wp-block-media-text{ background-color: palegreen !important;border-color: limegreen ;} .BuisinessMenu .swell-block-column.Green .swell-block-button a{ border-color: limegreen ;} .BuisinessMenu .swell-block-column.Green .swell-block-button a:hover{ background-color: limegreen ;} /* Brown */ .BuisinessMenu .swell-block-column.Brown {border-color: maroon ;} .BuisinessMenu .swell-block-column.Brown .swell-block-button a, /* ボタン */ .BuisinessMenu .swell-block-column.Brown .swl-inline-icon::after, /* アイコン */ .BuisinessMenu .swell-block-column.Brown .wp-block-heading a{ color: maroon ;} .BuisinessMenu .swell-block-column.Brown .wp-block-media-text{ background-color: navajowhite !important;border-color: maroon ;} .BuisinessMenu .swell-block-column.Brown .swell-block-button a{ border-color: maroon ;} .BuisinessMenu .swell-block-column.Brown .swell-block-button a:hover{ background-color: maroon ;} /* Red */ .BuisinessMenu .swell-block-column.Red {border-color: crimson ;} .BuisinessMenu .swell-block-column.Red .swell-block-button a, /* ボタン */ .BuisinessMenu .swell-block-column.Red .swl-inline-icon::after, /* アイコン */ .BuisinessMenu .swell-block-column.Red .wp-block-heading a{ color: crimson ;} .BuisinessMenu .swell-block-column.Red .wp-block-media-text{ background-color: lightsalmon !important;border-color: crimson ;} .BuisinessMenu .swell-block-column.Red .swell-block-button a{ border-color: crimson ;} .BuisinessMenu .swell-block-column.Red .swell-block-button a:hover{ background-color: crimson ;} /* Purple */ .BuisinessMenu .swell-block-column.Purple {border-color: darkviolet ;} .BuisinessMenu .swell-block-column.Purple .swell-block-button a, /* ボタン */ .BuisinessMenu .swell-block-column.Purple .swl-inline-icon::after, /* アイコン */ .BuisinessMenu .swell-block-column.Purple .wp-block-heading a{ color: darkviolet ;} .BuisinessMenu .swell-block-column.Purple .wp-block-media-text{ background-color: plum !important;border-color: darkviolet ;} .BuisinessMenu .swell-block-column.Purple .swell-block-button a{ border-color: darkviolet ;} .BuisinessMenu .swell-block-column.Purple .swell-block-button a:hover{ background-color: darkviolet ;} /* Pink */ .BuisinessMenu .swell-block-column.Pink {border-color: magenta ;} .BuisinessMenu .swell-block-column.Pink .swell-block-button a, /* ボタン */ .BuisinessMenu .swell-block-column.Pink .swl-inline-icon::after, /* アイコン */ .BuisinessMenu .swell-block-column.Pink .wp-block-heading a{ color: magenta ;} .BuisinessMenu .swell-block-column.Pink .wp-block-media-text{ background-color: pink !important;border-color: magenta ;} .BuisinessMenu .swell-block-column.Pink .swell-block-button a{ border-color: magenta ;} .BuisinessMenu .swell-block-column.Pink .swell-block-button a:hover{ background-color: magenta ;} /* Gray */ .BuisinessMenu .swell-block-column.Gray {border-color: dimgray ;} .BuisinessMenu .swell-block-column.Gray .swell-block-button a, /* ボタン */ .BuisinessMenu .swell-block-column.Gray .swl-inline-icon::after, /* アイコン */ .BuisinessMenu .swell-block-column.Gray .wp-block-heading a{ color: dimgray ;} .BuisinessMenu .swell-block-column.Gray .wp-block-media-text{ background-color: gainsboro !important;border-color: dimgray ;} .BuisinessMenu .swell-block-column.Gray .swell-block-button a{ border-color: dimgray ;} .BuisinessMenu .swell-block-column.Gray .swell-block-button a:hover{ background-color: dimgray ;} .BuisinessMenu .swell-block-column .wp-block-media-text__media{ padding: 5px; padding-right: 0px; } /* ▲ scitechがデザイン　参考のため残し ▲ */ /* ▼ 佐藤様がデザイン　現在稼働中 ▼ */ /* リッチカラムにこのクラスを付加する */ .GyomuMenu{ } .GyomuMenu .wp-block-heading{ margin-bottom: 50px !important; } .GyomuMenu .swell-block-column{ border: 2px solid var(--color_htag); border-radius: 18px; padding: 18px; position: relative; } .GyomuMenu .swell-block-column .wp-block-media-text .wp-block-heading{ /* height: 80%; /* */ padding-left: 10px !important; padding-bottom: 10px !important; border-bottom: 2px solid var(--color_htag); margin-bottom: 10px !important; } .GyomuMenu .swell-block-column .wp-block-media-text .wp-block-heading a{ color: var(--color_htag) !important; } .GyomuMenu .swell-block-column .wp-block-media-text figure img{ /* 幅、高さに制限を加え、対抗する辺はauto */ height: auto; width: auto; max-width: 100%; max-height: 200px; /* */ margin-left: auto; margin-right: auto; margin-bottom: 0px; } .GyomuMenu .swell-block-column .swell-block-button{ /* position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 10px; */ width: 100%; } .GyomuMenu .swell-block-column .swell-block-button a{ /* border: 2px solid var(--color_htag); /* */ } /* 縦並び */ @media screen and (max-width: 480px) { .GyomuMenu .swell-block-column .wp-block-media-text{ display: block; } .GyomuMenu .swell-block-column .wp-block-media-text figure img{ margin-bottom: 0px; } } /* ▲ 佐藤様がデザイン　現在稼働中 ▲ */ /* カラムのボトムにボタンを揃える */ .LinkBox .swell-block-column{ position: relative; padding-bottom: 80px; } .LinkBox .swell-block-column .wp-block-heading{ margin-bottom: 20px !important; } .LinkBox .swell-block-column .swell-block-button{ position: absolute; bottom: 15px; left: 0px; right: 0px; margin-left: auto; margin-right: auto; width: 95%; } /*--------------------------------------------------------------------*/ /* 背景色 */ .bkc-LightBlue2{ background-color: #EAF1F2 !important; /* 水色 　スライダーの背景色と合わせること*/ } .bkc-LightBlue{ background-color: #E6EAF2 !important;　　/* 青 */ } .bkc-LightGray{ background-color: #F7F7F7 !important; /* グレー */ } .bkc-LightOrange{ background-color: #F4EEE9 !important; /* オレンジ　茶 */ } .bkc-LightGreen{ background-color: #E5EDE9 !important; /* 緑 */ } .bkc-LightYellow{ background-color: #FCF9EF !important; /* 黄 */ } .bkc-LightPurple{ background-color: #F8F2F7 !important; /* 赤紫 */ } /*--------------------------------------------------------------------*/ /* ▼▼▼▼▼ 佐藤様によるcss ▼▼▼▼▼ */ /* 手続きの流れ */ .step-box { border: 2px solid #0073aa; border-radius: 8px; padding: 1em; margin-top: 0; margin-bottom: 0; background-color: #fff; } .step-box h3 { margin-top: 0; font-size: 1.2em; color: #0073aa; } .arrow-down { text-align: center; font-size: 2.5em !important; font-weight: bold; color: #005a8c; line-height: 1; margin: 0; } .point-box { background-color: #fff8dc; border-left: 4px solid #f4a460; padding: 0.6em; margin-top: 0.6em; border-radius: 4px; } /* 手続きの流れここまで */ /* 費用についてパターン1ここから */ /* カード全体の並び方（PCでは横並び、スマホでは縦並び） */ .fee-card-wrap { display: flex; flex-wrap: wrap; gap: 2em; margin-bottom: 2em; } /* 各カードのスタイル（司法書士報酬・実費） */ .fee-card { flex: 1 1 48%; background: #fff; border-radius: 10px; border: 2px solid #0077cc; /* ← カード全体を枠で囲む */ padding: 1.5em; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; box-sizing: border-box; } /* 見出しのスタイル（中央揃え＋枠付き） */ .fee-card-title { border: 2px solid #0077cc; background-color: #e6f2ff; color: #0077cc; font-weight: bold; font-size: 1.1em; height: 3em; height: auto; /* 2025.11.20 by Scitech */ display: flex; align-items: center; /* 上下中央揃え */ justify-content: center; /* 左右中央揃え */ border-radius: 6px; margin-bottom: 0; /* 下余白ゼロ */ padding: 0 1em; box-sizing: border-box; /* ▼ 2025.11.22 by Scitech */ padding: 10px !important; letter-spacing: 2px; } /* リストのスタイル */ .fee-card ul { margin-top: 0.5em; /* 見出しとの間を少しだけ空ける */ padding-left: 1.2em; text-align: left; } .fee-card li { margin-bottom: 0.5em; } /* 加算するケースの部分のスタイル */ .fee-point { background: #fff8dc; padding: 1em; border-left: 5px solid #f4a300; border-radius: 4px; margin-top: 1em; text-align: left; } /* スマホ表示時の調整 */ @media screen and (max-width: 600px) { .fee-card-wrap { flex-direction: column; } .fee-card { width: 100%; } .fee-card + .fee-card { margin-top: 1.5em; /* 2枚目以降のカードに余白を追加 */ } } /* 費用についてパターン1ここまで */ /* 費用についてパターン2ここから */ .swell-fee-box { background: #fff; padding: 1.5em; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 2em; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .swell-fee-table { width: 100%; border-collapse: collapse; background-color: #fff; } .swell-fee-table th, .swell-fee-table td { border: 1px solid #ccc; padding: 12px; vertical-align: top; text-align: left; } .swell-fee-table th { background-color: #e6f2ff; color: #0077cc; font-weight: bold; } .swell-fee-table td a { color: #0077cc; text-decoration: underline; } .swell-fee-table .arrow-link { margin-top: 0.5em; } @media screen and (max-width: 600px) { .swell-fee-table, .swell-fee-table thead, .swell-fee-table tbody, .swell-fee-table th, .swell-fee-table td, .swell-fee-table tr { display: block; width: 100%; } .swell-fee-table thead { display: none; } .swell-fee-table tr { margin-bottom: 1.5em; background: #fff; border: 1px solid #ccc; padding: 10px; border-radius: 6px; } .swell-fee-table th::before, .swell-fee-table td::before { content: none; } .swell-fee-table th, .swell-fee-table td { border: none; padding: 8px 0; } } /* 費用についてパターン2ここまで */ /* GIFアイコン（仮アイコン）＋左側レイアウト版（PC2列・スマホ1列対応） */ .service-grid { display:grid; grid-template-columns:1fr; gap:24px; } @media(min-width:768px){ .service-grid { grid-template-columns:1fr 1fr; } } .service-card { border:2px solid #289ed3; border-radius:18px; padding:18px; background:#fff; display:flex; align-items:center; text-decoration:none; color:#000; box-shadow:0 4px 12px rgba(0,0,0,0.08); } .service-icon{ margin-right:16px; } .service-icon img{ width:56px; height:56px; object-fit:contain; } .service-card h3{ color:#289ed3; margin:0 0 6px; font-size:20px; } .service-card p{ margin:0; font-size:16px; line-height:1.7; } /* GIFアイコン（仮アイコン）＋左側レイアウト版（PC2列・スマホ1列対応） */ /* ▲▲▲▲▲ 佐藤様によるcss ▲▲▲▲▲ */ /*-----------------------------------------------------------------*/ /* Q&A　標準フォーマットによる */ .QandA{ } /* Q */ .swell-block-accordion.QandA .swell-block-accordion__label span, /* アコーディオンブロックのQ */ .QandA .wp-block-heading span{ font-size: 30px; color: orange !important; border-bottom: 3px solid orange; /* text-shadow: 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888; */ } /* A */ .QandA .Answer{ font-size: 30px !important; color: orange !important; display: inline-block; border-bottom: 3px solid orange; line-height: 1em; font-weight: bold; letter-spacing: 1px; /* text-shadow: 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888, 0 0 3px #888; */ } /*-----------------------------------------------------------------*/ /* 自己紹介 */ #body_wrap.jimusyoannai .wp-block-media-text img{ max-width: 166px; } #body_wrap.jimusyoannai .wp-block-media-text .wp-block-media-text__content{ padding-top: 0px; } /*-----------------------------------------------------------------*/ /* ご依頼、ご相談いただいた皆様の声 */ #body_wrap.koe hr{ max-width: initial; } /*-----------------------------------------------------------------*/ /* アーカイブ */ #bk-archive-list{ } .listRect{ border-bottom: solid 1px var(--color_htag);; color: #9F7D27; padding: 20px 0px; } .listRect:first-child{ border-top: solid 1px var(--color_htag);; } .listRect .date{ color: var(--color_htag);; margin-right: 20px; } .listRect .post-type{ margin-right: 20px; } .listRect .post-type a{ padding: 3px 10px; background-color: var(--color_htag); color: #fff; font-size: 17px; } .listRect .title a{ font-size: 23px; } /*--------------------------------------------------------------------*/ /* メールフォーム */ /* SWELLで作成したお問い合わせフォーム */ /* は