顧客サイト変更に伴い、旧サイトのCSSを保存
C@charset "utf-8";
/*
Theme Name: lightning-pro-child
Theme URI:
Template: lightning-pro
Description:
Author: le-mina-rie with MarkleDesign
Tags:
Version: 0.1.2
*/
/*RATTARATTARR ページ ウェブフォントの指定*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400&family=Zen+Old+Mincho&display=swap');
.page-id-37437 {
font-family: 'Noto Sans JP', sans-serif;
}
/**********************************
フォーム修正 （地域→センター） 追加css
**********************************/
.ct_table {
display: table;
}
.ct_tr {
display: table-row;
}
/*.ct_th, .ct_th_l,*/
.ct_td {
display: table-cell;
padding:0.1em;
/* padding-bottom:0;*/
}
.ct_th {
width:5.3em;
}
.border0{
border:none !important;
border-color:white !important;
}
#headerTop .btn-primary:before, .btn:before{color:#f7f7f7 !important;}
#headerTop .btn-primary{
background-color:#f7f7f7 !important;
color:black !important;
border:none !important;
}
#headerTop .fas{
color:#f7f7f7 !important;
}
/**************************************************************************************************************
全ページ 共通 CSS
**************************************************************************************************************/
/**************************************
フォント指定
**************************************
body,
p {
font-family :"游ゴシック", YuGothic,"ヒラギノ角ゴ ProN W3",
"Hiragino Kaku Gothic ProN", "メイリオ", Meiryo,
"Helvetica Neue", Helvetica, Arial,
sans-serif !important;
font-weight:500 !important;
line-height: 1.5;
}*/
/************************************************************
h2 , h3 タグの装飾をクリア （サイト共通）
**********************************************************/
/* このコードでは、固定ページだけでなく投稿でもcssがクリアされてしまうため 修正（後日削除）
.mainSection-title,
h2,h3,h4 {
border-top:none !important;
border-bottom:none !important;
background-color:transparent !important;
}
h3:after, .subSection-title:after {
border: none !important;
border-bottom : none !important;
background-color:transparent !important;
content:none;
}
投稿のための修正 ここまで */
/* ハンバーガーメニューを右に
.vk-mobile-nav-menu-btn{
right: 25px;
left: inherit;
}
*/
/* 投稿の「見出しタイトル」 はデフォルトになるための修正 */
.page-template > .mainSection-title,
.page-template h2, .page-template h3, .page-template h4 {
border-top:none !important;
border-bottom:none !important;
background-color:transparent !important;
/* margin-top:0.2em !important; デザイン設定で「h２」「h3」を変更したため追加 */
margin-bottom:0.3em !important; /* デザイン設定で「h２」「h3」を変更したため追加 */
}
.page-template h3:after,.page-template > .subSection-title:after {
border: none !important;
border-bottom : none !important;
background-color:transparent !important;
content:none;
}
/*
.single-post > .footer-site-map h4 {
border-top:none !important;
border-bottom:none !important;
background-color:transparent !important;
}
*/
/*キャプションの文字を大きく*/
.wp-block-image figcaption{
font-size:14px !important;
}
/*投稿表示時、最終登校日を非表示*/
.entry-meta_updated{display:none;}
/****************************************************************************************************
【ヘッダー】 ヘッダーロゴの右側に 電話番号の画像を表示（functions.php my_lightning_header_logo_after関数）
*****************************************************************************************************/
/* ロゴ右側のブロック */
.logo-after {
display: block;
width: 350px;
float: right;
}
.logo-after img {
max-height: 60px;
}
/*ヘッダー幅を100%に */
.navbar-header {
width: 100%;
}
@media (max-width: 991px) {
.logo-after {
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
}
/* 新バージョン対応*/
@media (min-width: 1200px) {
.gMenu_outer,
.gMenu,
.gMenu > li {
width: 100%;
}
}
@media (max-width: 1199.98px) {
.siteHeader_logo {
width: unset;
}
}
/*************************************************
【CTA】 フロートサイドバナー (PC)
**************************************************/
/* フローティングバナーのラップ要素 */
#fixed_right_banner{
position: fixed;
top: 200px;
right: 0;
z-index: 9999;
}
/* 画像の共通設定 */
#fixed_right_banner > * {
width: 80px;
}
/* 2個目以降の画像の上部に余白を作る */
#fixed_right_banner > * ~ * { margin-top: 10px; }
/* リンク要素 */
#fixed_right_banner > a {
display: block; /* ブロック要素に変更 */
}
/*************************************************
【CTA】 モバイルフッターバナー (モバイル)
***************************************************/
.wrap{
display: block;
position: fixed;
left: 0px;
right: 0px;
bottom: -25px;
/* height:75px;*/
z-index: 9999;
}
.inner{
float: left;
width: 33%;
margin-left : 10;
}
.cb{
/* floatを解除 */
clear: both;
}
/*********************************************************************
【CTA】 トップページ、企業様ページ、 医療福祉関係の皆様へ バナーのみ非表示
***********************************************************************/
.page-id-2255 #banner, .page-id-2255 #banner-mb,.page-id-1611 #banner, .page-id-1611 #banner-mb, .page-id-2403 #banner, .page-id-2403 #banner-mb {
display: none;
}
/*****************************************
CTA 「 トップへ 」 ボタン
******************************************/
.top_btn-pc{
position: fixed;
bottom: 10px;
left: 10px;
z-index: 9999;
}
.top_btn-mb{
position: fixed;
bottom: 75px;
left: 0px;
z-index: 9999;
}
.cta-width-mb{
margin-left:30%;
margin-right:30%;
}
/*
.only_pc#top-pc{
position: relative;
bottom: 100px;
left: 50px;
background-color: transparent;
z-index: 9999;
}*/
/*************************************
スマホ・PCで表示 を切り替えるクラス
**************************************/
/*スマホでのみ表示する （only_pc クラスを非表示）*/
@media (max-width: 750px) {.only_pc {display:none}}
/*PCでのみ表示する （only_mb クラスを非表示）*/
@media (min-width: 751px) {.only_mb {display:none}}
/* ラッタラッタル キーホルダーでのみ利用 スマホとタブレットで表示する （only_pc クラスを非表示）
@media (max-width: 820px) {.others {display:none}}
@media (min-width:821px) {.tablet {display:none}} */
/**********************************************
【全ページで利用】 背景色 background-color
***********************************************/
.bg-orange{
background-color: orange;
}
.bg-gray{
background-color: #dcdcdc;
}
.bg-green{
background-color: #E9F6E8;
}
.bg-blue{
background-color: blue;
}
/************************************************************
【全ページで利用】 蛍光マーカー風css
********************************************************/
/* お気軽にご連絡ください（他） 黄色いマーカー */
.yellow-under{
background: linear-gradient(transparent 50%, yellow 50%);
}
.pink-under{
background: linear-gradient(transparent 50%,#ffb6c1 50%);
}
/************************************************************
要素の隙間をゼロにするcss （マージン・パッディング ０）
**********************************************************/
.m-p-0{
margin:0;
padding:0;
}
/********************************************************************************************
【全ページで利用】 画面幅いっぱい表示で背景色を入れる要素に使用 （divで指定・階層を変えて記述する）
横幅いっぱいに表示するクラス
*********************************************************************************************/
.full-cont {
width: 100%;
}
.full-width {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
/********************************************************************************
投稿文書の１文字目の文字色 (テーマの「投稿」で１文字目の文字の変色させない）
*********************************************************************************/
h1.entry-title:first-letter,
.single h1.entry-title:first-letter { color:inherit; }
/*******************************************
画像オンマウスで半透明化
********************************************/
.gazou:hover {
opacity: 0.7;
}
/*文字リンク色とホバー色*/
a{
/* color:#1e90ff; */
color:#006400;
}
a:hover {
color:#006888;
}
/*******************************************************************************************
基本CSS 文字色・サイズ・配置・改行幅・文字ピッチ・段落間隔 等
********************************************************************************************/
/*左寄せ*/
.left{
text-align:left;
}
/*右寄せ*/
.right {
text-align:right;
}
.right-pf{
margin: 0 0 0 auto;
}
/*センタリング*/
.center{
text-align:center;
}
/* 文字サイズ */
.sx-large{
font-size:40px;
}
.large-36{
font-size:36px;
}
.xx-large{
font-size:33px;
}
.x-large{
font-size:28px;
}
.ll{
font-size:24px;
}
.large{
font-size:20px;
}
.normal{
font-size:medium;
}
.mid{
font-size:18px;
}
.small{
font-size:15px;
}
.ss{
font-size:13px;
}
.sss{
font-size:10px;
}
.bold{
font-weight:bold;
}
.x-bold{
font-weight:600;
}
/* 文字色 */
.black{
color:black;
}
.red{
color:red;
}
.blue{
color:#0071bc;
}
.white{
color:white !important;
}
.deep-gray{
color:gray;
}
.yellow{
color:#ffff00;
}
.orange{
color:#F7931E;
}
.green{
color:#009635 !important;
}
.brown{
color:#BA9135;
}
/*改行幅 特大*/
.blank_space{
line-height:4em;
}
/*改行幅 大*/
.blank_ll{
line-height:3em;
}
/*改行幅 大*/
.blank_line{
line-height:2em;
}
/*改行幅 やや大*/
.blank_line-m{
line-height:1.6em;
}
/*改行幅 やや小*/
.blank_line12{
line-height:1.2em;
}
/*改行幅 小*/
.blank_line-s{
line-height:1em;
}
/*改行幅 極小*/
.blank_line-ss{
line-height:03em;
}/*改行幅 なし*/
.blank_line0{
line-height:0;
}
/* 文字ピッチを変える */
.c-pitch01 {
letter-spacing: 0.1em;
}
.c-pitch02 {
letter-spacing: 0.2em;
}
.c-pitch03 {
letter-spacing: 0.3em;
}
/*段落の間隔 (margin-bottom)*/
.mb-4{
margin-bottom: -4em !important;
}
.mb-2{
margin-bottom: -2em!important;
}
.mb-1{
margin-bottom: -1em!important;
}
.mb0{
margin-bottom: 0em!important;
}
.mb07{
margin-bottom: 0.7em;
}
.mb1{
margin-bottom: 1em !important;
}
.mb1-5{
margin-bottom: 1.5em;
}
.mb2{
margin-bottom: 2em !important;
}
.mb3{
margin-bottom: 3em !important;
}
.mb5{
margin-bottom: 5em;
}
/*段落の間隔 (margin-top)*/
.mt-5{
margin-top: -5em !important;
}
.mt-2{
margin-top: -2em;
}
.mt05{
margin-top: 0.5em;
}
.mt0{
margin-top: 0;
}
.mt1{
margin-top: 1em;
}
.mt15{
margin-top: 1.5em;
}
.mt2{
margin-top: 2em;
}
.pt-10{
padding-top: -10em;
}
.pt0{
padding-top: 0;
}
.pt1{
padding-top: 1em;
}
.pt2{
padding-top: 2em;
}
.pt3{
padding-top:3em;
}
/*箇条書きのスタイルなし 二行目の書き出し 字下げ
.questionnaire ul{
text-indent: -1em;
list-style-type: none;
}
.questionnaire ul li{
margin-left: 1em;
}*/
.questionnaire ul{
text-indent: -1em;
list-style-type: none;
}
.questionnaire ul li{
margin-left: -2em;
}
/*******************************************
トップメニューの下のラインを消す
******************************************
ul.gMenu>li.current-menu-ancestor>a:after,
ul.gMenu>li.current-menu-item>a:after,
ul.gMenu>li.current-menu-parent>a:after,
ul.gMenu>li.current-post-ancestor>a:after,
ul.gMenu>li.current_page_ancestor>a:after,
ul.gMenu>li.current_page_parent>a:after,
ul.gMenu>li>a:hover:after{
content:none;
}
*/
/************************************************************
フッターの余白調整 （サイト共通）
**********************************************************/
.siteContent_after #pc_footer1,.siteContent_after #pc_footer2 {
margin-top:-6em;
}
.siteContent_after #mb_footer {
margin-top:-3em;
}
/************************************************************
【スマホ】 フッター「チャレンジドジャパン」部分の左右余白調整でブロックごとセンター寄せ （サイト共通）
【利用者アンケート】 期待していること 【医療福祉の皆様へ】アセスメント体験会 で使用
**********************************************************/
.mb_fotter-center ,
.mb-as-left {
margin-left:4em;
}
/**************************************************************************************************************
【詳しく知りたい方へ 】 (各ページ共通 項目)
**************************************************************************************************************/
/************************************************************
詳しく知りたい方へ ボックスcss (各ページ共通)
**********************************************************/
.d-box-green{
padding: 0.5em 1em;
margin: 1em 0.5em;
display: block;
line-height:2em;
background: white;
font-size:20px;
text-decoration: none;
text-align:center;
border:solid 1px #00984f;
border-radius: 10px;
color:#009944;
}
a.d-box-green:hover {
background: #00984f;
border-color:#00984f;
border-width:3px;
color:white;
text-decoration:none;
}
.d-box-blue{
padding: 0.5em 1em;
margin: 1em 0.5em;
display: block;
line-height:2em;
background: white;
font-size:20px;
text-decoration: none;
text-align:center;
border-style:solid;
border-width:1px;
border-radius: 10px;
border-color:#0073a8;
color:#0073a8;
}
a.d-box-blue:hover {
background:#0073a8;
border-color:#0073a8;
border-width:3px;
color:white;
text-decoration:none;
}
.d-box-orange{
padding: 0.5em 1em;
margin: 1em 0.5em;
display: block;
line-height:2em;
background: white;
font-size:20px;
text-decoration: none;
text-align:center;
border-style:solid;
border-width:1px;
border-radius: 10px;
border-color:#ff8c00;
color:#ff8c00;
}
a.d-box-orange:hover {
background: #ff8c00;
border-color:#ff8c00;
border-width:3px;
color:white;
text-decoration:none;
}
/************************************************************
詳しく知りたい方 下のbox (各ページ共通)
**********************************************************/
.common-box{
padding: 0.5em 1em;
margin: 0 0 2em 0;
background-color : white ;
border: solid 1px #a9a9a9;
/* border-left: double 7px #fff462;左線*/
/* border-right: double 7px #fff462;/*右線*/
}
.common-box p {
margin: 0;
padding: 0.8em;
font-size:0.9em;
line-height: 1.6em;
}
/**************************************************************************************************************
TOPページ
**************************************************************************************************************/
/**********************************************************************
【TOPページ 】 どんな人が通ってるの 囲み枠と文字 (病名の緑角丸の枠) PC
************************************************************************/
.box-gr {
padding: 0.5em 1em;
margin: 0.5em 0.5em;
display: inline-block;
font-weight: bold;
color: #fff !important;/*文字色*/
background: #009635;
border: solid 3px #009635;/*線*/
border-radius: 10px;/*角の丸み*/
}
.box-gr p {
margin: 0;
padding: 0;
font-size:18px;
letter-spacing: 0.2em;
}
.link-deco a{
color:white !important;
text-decoration:none;
}
/************************************************************************
【TOPページ 】 どんな人が通ってるの 囲み枠と文字 (病名の緑角丸の枠) スマホ
************************************************************************/
.commuter-1 {
display: inline-block;
width:150px;
/* border: solid 1px; */
}
.commuter-2 {
display: inline-block;
width:130px;
/* border: solid 1px; */
}
/************************************************************
【TOPページ 】 どんな人が通ってるの 濃淡グリッド PC
************************************************************/
.grid-dark {
padding-top: 3em ;
margin: -3px;
width:25%;
height:10em;
display: inline-block;
vertical-align: middle;
font-weight: bold;
color: #fff;/*文字色*/
font-size:18px;
background: #009635;
border: solid 3px #009635;/*線*/
}
.grid-pale {
padding-top: 3em ;
margin: -3px;
width:25%;
height:10em;
display: inline-block;
vertical-align: middle;
font-weight: bold;
color: #fff;/*文字色*/
font-size:18px;
background: #44af35;
border: solid 3px #44af35;/*線*/
}
/*.grid-pale .grid-dark p {
padding-top: 100em;
}*/
/************************************************************
【TOPページ 】 どんな人が通ってるの 濃淡グリッド スマホ
************************************************************/
.grid-dark-mb {
padding-top: 1em ;
margin: -3px;
width:50.5%;
height:5em;
display: inline-block;
vertical-align: middle;
font-weight: bold;
color: #fff;
font-size:18px;
background: #009635;
border: solid 3px #009635;
}
.grid-pale-mb {
padding-top: 1em ;
margin: -3px;
width:50%;
height:5em;
display: inline-block;
vertical-align: middle;
font-weight: bold;
color: #fff;
font-size:18px;
background: #44af35;
border: solid 3px #44af35;
}
/**********************************************************************************************
【TOPページ 】 【お客様の声ページ 】 【医療・福祉関係の皆様へページ】
お客様の声 画像横の文字の回り込み禁止（画像の横に文字を整列）
**********************************************************************************************/
/*.client は、【TOPページ 】 の「お客様の声」 で使用
.client２は、【お客様の声ページ 】 で使用
.client2-mb は、【お客様の声ページ モバイル】 で使用
position: relative;
}*/
.client,.client2 {
padding: 0 0 0 100px;
position: relative;
}
.bg-1{
background: #e9f6e8; /*利用者背景色 薄緑*/
border: solid 3px #e9f6e8;
border-radius: 10px
}
.bg-2 {
background: #e1fafb;/*就職者背景色 水色*/
border: solid 3px #e1fafb;
border-radius: 10px
}
.bg-3 {
background: #fffcde;/*雇用主背景色 クリーム色*/
border: solid 3px #fffcde;
border-radius: 10px
}
.client img {
position: absolute;
left: 10px;
top: 10px;
}
.client2 img {
position: absolute;
left: 60px;
top: 20px;
}
.client p{
display:block;
padding-top: 15px;
padding-right:15px;
line-height:1.3em;
}
.client2 p{
display:block;
padding: 5px 15px 0px 60px;
}
.client2 h3{
display:block;
margin-bottom: -60px;
margin-left : 60px;
}
/* 【お客様の声ページ 】 の利用者 「box・img・文字 」については上記を共有*/
.user {
background: #ffffff;
border: solid 2px #79c06e;
border-radius: 10px
}
/*【お客様の声ページ 】 の就職者 「box・img 文字 」については上記を共有*/
.graduate {
background: #ffffff;
border: solid 2px #0071bc;
border-radius: 10px
}
/* 【お客様の声ページ 】 の雇用主 「box・img 文字 」については上記を共有*/
.employed {
background: #ffffff;
border: solid 2px #F7931E;
border-radius: 10px
}
/* 【医療・福祉関係の皆様へページ 】 「box・ img 文字 」については上記を共有*/
.medical {
background: #ffffff;
}
.medical p{
display:block;
padding: 0.2em;
}
/************************************************************
【お客様の声ページ モバイル】 (枠組み と bg-color は上記 を共有)
*********************************************************/
.client2-mb {
padding: 15px;
position: relative;
}
.client2-mb img {
float : left;
margin : 10px;
/* padding-left: 10px;
padding-top: 10px;*/
}
.clearLeft {
clear: left;
}
.client2-mb p{
margin-top: 35px ;
font-size:18px;
font-weight : bold ;
}
/*.client2-mb h3{
padding-left: 10px;
padding-right: 10px;
}*/
/************************************************************
【TOPページ 】 ひゅーまにあを探す 背景の地図画像
*********************************************************/
.map-img{
background-color: #E9F6E8; /* 背景色 */
background-image: url("/wp-content/Element-img/top/map_green.png"); /* 画像 */
background-size: cover; /* 全画面 */
background-attachment:fixed; /* 固定 */
background-position: center center; /* 縦横中央 */
}
.leminarie-img{
background-color: #d4d9dc; /* 背景色 */
background-image: url("https://le-mina-rie.com/wp-content/uploads/2020/02/top_header-01_150.jpg"); /* 画像 */
background-size: cover; /* 全画面 */
background-attachment:fixed; /* 固定 */
background-position: center center; /* 縦横中央 */
}
/*********************************************************************************************
【TOPページ 】 ひゅーまにあを探す 三列の左右余白設定 及び 事業所ページの「８つのプログラム」基本情報」
**********************************************************************************************/
.column-width{
margin-left:13%;
margin-right:13%;
}
/******************************************************************
【TOPページ 】 「ひゅーまにあを探す」 折りたたみ 三角アイコンとタイトルのcss
ShortCodeUnimate の スポイラー機能の 接頭マーク変更用css
*******************************************************************/
/*スポイラータイトル*/
.su-spoiler-title {
position: relative;
cursor: pointer;
min-height: 10px;
line-height: 15px;
/*padding: 7px 7px 7px 34px;*/
/*padding: 7px 7px 7px 34px; */
font-weight: bold;
font-size: 15px!important;
color:black;
}
/*スポイラーのアイコン*/
.su-spoiler-icon-caret-square .su-spoiler-icon:before {
content: url("/wp-content/Element-img/top/triangle-01.png")!important;
content: '\f150';
}
.su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon:before {
content: url("/wp-content/Element-img/top/triangle-02.png")!important;
content: '\f152';
}
.su-spoiler-icon-caret-square.su-spoiler-closed .su-spoiler-icon{
/* width: 0.5em!important;*/
width: 1em!important;
}
/***************************************************************************************************
各事業所ページ
****************************************************************************************************/
/**********************************************************************************
センター長メッセージ文の幅 (パンフレット請求サンクスページ リーフレットダウンロード でも使用)
***********************************************************************************/
.column-message{
margin-left:20%;
margin-right:20%;
}
/********************************************************
８つのプログラム スケジュール内容のカラーボックス
*********************************************************/
.prg-box{
padding:1em;
margin: 1em 0.5em;
/*font-weight: bold;*/
/*display: inline-block;*/
/* padding: 0.5em 1em;*/
border: solid 2px white !important;
border-radius: 10px;/*角の丸み*/
font-size:18px;
/* font-weight:bold; */
letter-spacing: 0.2em;
}
#box-1,#box-mb1{background-color: #9ED8F5;}
#box-2,#box-mb2{background-color: #B0DACA;}
#box-3,#box-mb3{background-color: #ffE8a9;}
#box-4,#box-mb4{background-color: #F8D2E2;}
#box-5,#box-mb5{background-color: #C1DA75;}
#box-6,#box-mb6{background-color: #C8BB9B;}
#box-7,#box-mb7{background-color: #EAE3C6;}
#box-8,#box-mb8{background-color: #DABEDA;}
.prg-box p {
margin: 0;
padding: 0.5em;
font-size:13px;
/* font-weight:bold; */
letter-spacing: 0.1em;
}
/* サポート体制へのリンクボックス */
.su-box {
display: inline-block;
padding: 0.5em 1em;
margin: 2em 0;
border: solid 1px #009635;
}
.su-box a {
margin: 0;
padding: 0.2em;
font-size:18px;
letter-spacing: 0.2em;
}
a.su-box:hover {
background: #00984f;
border-color:#00984f;
border-width:3px;
color:white !important;
text-decoration:none !important;
}
/*.su-box a:hover {
margin: 0;
padding: 0.2em;
font-size:18px;
text-decoration:none !important;
a:link { color: white; }
}*/
/*****************************************************************************************************
【各事業所ページ】 【お客様の声ページ】 【利用者アンケート】 続きを読む 開閉のCSS 〜８つのプログラム & お客様の声〜
******************************************************************************************************/
.rm-btn,
.quest-btn {
/* display: inline-block; */
padding: 0.2em;
color: #696969;
font-size:small;
margin-left:20px;
/* border: solid 1px #696969;
border-radius: 3px;
transition: .4s;*/
}
.voice-btn{
height:20px;
padding-left:60px;
color: #696969;
font-size:small;
}
/*.rm-btn:hover {
background: #696969;
color: white;
} */
/*[
* 「事業所ページ」8つのプログラム で使用*/
.rm-btn::before {
content: "概要を見る";
}
/*「お客様の声ページ」インタビュー で使用*/
.voice-btn::before {
/* background: url("/wp-content/Element-img/common/jyappi.png") no-repeat;*/
background: url("/wp-content/Element-img/common/logo_voc.png") no-repeat;
/* background-size: auto;*/
background-size: contain;
vertical-align: middle;
content: " インタビューを読む";
}
/*利用者アンケート 就職支援実績 で使用*/
.quest-btn::before {
content: "もっと見る";
}
/*プログラム・お客様の声・利用者アンケート・就職支援実績 共通*/
.rm-item,.voice-item,.quest-item {
position: relative;
overflow: hidden;
height: 0.01px; /*隠した状態の高さ*/
}
/*.rm-item::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px; グラデーションで隠す高さ
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
content: "";
}*/
/*プログラム・お客様の声・利用者アンケート・就職支援実績 共通*/
.rm-trigger,
.voice-trigger,
.quest-trigger{
display: none; /*チェックボックスは常に非表示*/
}
/*プログラム 閉じる*/
.rm-trigger:checked ~ .rm-btn::before{
content: "閉じる" /*チェックされていたら、文言を変更する*/
}
/*お客様の声 閉じる*/
.voice-trigger:checked ~ .voice-btn::before{
content: " 閉じる" /*チェックされていたら、文言を変更する*/
}
/*利用者アンケート・就職支援実績 閉じる*/
.quest-trigger:checked ~ .quest-btn::before{
content: " 閉じる" /*チェックされていたら、文言を変更する*/
}
/*プログラム・お客様の声・利用者アンケート・就職支援実績 共通*/
.rm-trigger:checked ~ .rm-item,
.voice-trigger:checked ~ .voice-item,
.quest-trigger:checked ~ .quest-item{
height: auto; /*チェックされていたら、高さを戻す*/
}
/*プログラム・お客様の声・利用者アンケート・就職支援実績 共通*/
.rm-trigger:checked ~ .rm-item::before,
.voice-trigger:checked ~ .voice-item::before ,
.quest-trigger:checked ~ .quest-item::before{
display: none; /*チェックされていたら、rm-itemのbeforeを非表示にする*/
}
/*インタビューBOX内の文字列 */
.voice-item p{
padding-left:60px;
padding-right:60px;
font-size:15px;
/* font-weight:bold; */
letter-spacing: 0.1em;
}
/******************************************************************************************
【各事業所ページ】 ８つのプログラム 左右の段（プログラムとスケジュール表）の頭揃え
*******************************************************************************************/
.height-alignment{
margin-top:3px!important;
}
/** ８つのプログラム 下の「プログラム内容」リンクの上余白 */
.program-link{
margin-left:20px;
}
/************************************************
【各事業所ページ】 事業所 基本情報の表
************************************************/
.info_table {
display: table;
/* table-layout: fixed;*/
border: 1px solid #a9a9a9;
border-top: 0px;
border-left: 0px;
}
.info_table p{
line-height: 1.3em;
}
.info_tr {
display: table-row;
}
.info_th,
.info_td {
display: table-cell;
padding:1em 0.6em 0em;
/* padding-bottom:0;*/
}
.info_th {
/* width:20%;*/
width: 18em;
border: 1px solid #a9a9a9;
border-right: 0px;
border-bottom: 0px;
}
.info_td {
width: 100em;
/* max-width: 100%;*/
/* background: #fff;*/
border: 1px solid #a9a9a9;
border-right: 0px;
border-bottom: 0px;
}
/**************************************************************************
【各事業所ページ】 モバイル用 「基本情報」 表 と 地図 の左右余白
***************************************************************************/
.column-mb{
margin-left:5%;
margin-right:5%;
}
/************************************************************
【各事業所ページ】 「お近くのひゅーまにあ」の画像入りボタン
*********************************************************/
a.btn-neighbor{
padding: 0.5em;
margin: 10px;
/*margin: 10px 0;*/
display: inline-block;
color: #fff !important;
background: #00913D;
text-decoration: none;/*リンク下線を表示しない*/
font-weight: bold;
font-size:16px;
border-radius: 10px;
text-align:center;
}
/* a.btn-neighbor:before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
margin: -3px 5px 0 0;
background: url("/wp-content/Element-img/common/jyappi.png") no-repeat;
background-size: contain;
background: url("/wp-content/Element-img/common/jyappi_voc.png") no-repeat;
vertical-align: middle;
}*/
a.btn-neighbor:hover {
background: #6FB83F;
}
/***************************************************************************************************
サポート体制
****************************************************************************************************/
/********************************************
「ステップ １〜５」 の 番号の円
*********************************************/
.circle{
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
text-align:center;
/* line-height: 50px;*/
margin-bottom : 0em;
}
/* 円の中に 文章を入れる場合はこちらを使用
.circle-text {
position: relative;
display: inline-block;
width: 150px;
height: 150px;
border-radius: 50%;
}
.circle-text span {
position: absolute;
display: inline-block;
padding-left: 5%;
padding-right: 10%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width :150px;
text-align:center;
}
*/
.circle p{
font-size:38px;
color:white;
font-weight:bold;
/*vertical-align :center;*/
text-align : center;
padding-bottom : 15px;
}
/*****************************************************************
「ステップ １〜５」 の 番号の円 「サポート」の緑・オレンジのタイトル帯 と共有
*******************************************************************/
.support-gr{
background:#009635;
}
.support-or{
background:#F7931E;
}
/************************************************************
「サポート」 画像の位置指定
*********************************************************/
.support-img{
margin:-2em 0 0 1em;
}
/***************************************************************************************************
企業様へ
****************************************************************************************************/
/*******************************************************************
【企業様へページ】 「理念」の枠 【福祉医療関係の皆様へページ】就労アセスメントの枠 【支援プログラム一覧ページ】
.mb-width は、モバイルの列幅で、各所に利用
********************************************************************/
.policy-width-mb ,
.mb-width{
margin-left:8%;
margin-right:8%;
}
.policy-box{
padding: 0.5em 2em;
margin: 0 0 2em 0;
background-color : white ;
}
.policy-box p{
padding:2em;
}
/*ロゴマークの余白*/
.logo-yohaku{
margin-top:0.7em;
margin-bottom:0.7em;
}
/***************************************************************************************************
福祉・医療関係の皆様へ
****************************************************************************************************/
/*******************************************************************
ご紹介の事例 帯の色
********************************************************************/
.belt-gr{
background-color:#009949;
}
.belt-red{
background-color:#E0542F;
}
.belt-bl{
background-color:#35A0CE;
}
.belt-br{
background-color:#BA9135;
}
.belt-gr h3,.belt-red h3,.belt-bl h3,.belt-br h3,.policy-box h3{
padding-top:0.1em;
padding-bottom:0;
}
/*箇条書きインデント*/
.indent{
padding-left: 1.5em;
text-indent: -1.6em;
line-height:1.3em;
}
/*******************************************************************
コサルティング列幅調整
********************************************************************/
.consult-width{
margin-left:10%;
margin-right:10%;
}
/******************************************
【Q＆Ａ ページ 】 書き出し位置インデントのCSS
********************************************/
/*Q&A 書き出し位置インデント*/
.qa-indent{
margin-left:3em;
text-indent:-3em;
}
.su-spoiler-title span{
color:#009635 !important;
}
/****************************************
/* フォーム */
/****************************************/
/*フォーム 必須 */
.must {
padding:1px;
background: #FF1A00;
color: white;
font-size: 65%;
vertical-align: top;
position: relative;
top: -0.1em;
border-radius: 3px;
}
/*フォーム チェックした方 */
.margin_check_1{
margin:-1em 0 -1em;
}
.margin_check_2{
margin:-1em 0 2em;
}
/*フォーム フィールド幅 */
.field1{
display: block;
width: 13em;
}
.field2{
display: block;
width: 18em;
}
.field3{
display: block;
width: 23em !important;
}
@media (min-width: 751px) {.field4{
display: block;
width: 35em !important;
}}
/*フォーム 住所フィールド幅 */
.field-addr{
display:inline-block;
width: 8em;
margin-right:5px;
}
.field-area{
display:inline-block;
width: 15em;
margin-right:5px;
}
/*フォーム 段落間隔*/
.space{
line-height:2em;
}
/*フォーム注意書き クレパス線*/
.crepas-line{
background: linear-gradient(white, #ffb6c1);
}
/*アンケートのチェックボックス 頭揃え（モバイル）*/
#questionnaire-1,#type-1{
margin-left:10px !important;
}
/*フォーム内のタイトル線（サブタイトル）*/
@media (min-width: 751px) {.form-subtitle{
/* display:inline-block;*/
width : 60%;
padding: 8px 19px;
margin: 2.5em 0 0.5em 0;
border-top: solid 5px green;
border-bottom: solid 5px green;
}}
@media (max-width: 750px) {.form-subtitle{
/* display:inline-block;*/
width : 97%;
padding: 8px 19px;
margin: 2.5em 0 0.5em 0;
border-top: solid 5px green;
border-bottom: solid 5px green;
}}
/*お問い合わせフォームの「確認」「送信」ボタン */
.contact-button {
background-color: green !important;
color: #ffffff !important;
/* border-style: solid; border-color:#abb1b5; border-width:3px;*/
}
.contact-button:hover {
background-color:#98d98e !important;
color:#006400 !important;
/* border-style: solid; border-color:#ffdc00; border-width:3px; */
}
/*********************************************************
/* フォーム で パンくず と フッター 非表示 */
/**********************************************************/
.page-id-36966 footer .sectionBox,.page-id-36968 footer .sectionBox,.page-id-36971 footer .sectionBox,.page-id-86 footer .sectionBox,.page-id-84 footer .sectionBox,.page-id-3392 footer .sectionBox,.page-id-372 footer .sectionBox,.page-id-3236 footer .sectionBox,.page-id-3240 footer .sectionBox,.page-id-1836 footer .sectionBox,.page-id-1838 footer .sectionBox,.page-id-1834 footer .sectionBox{
display:none !important;
}
.page-id-36966>.breadSection,.page-id-36968>.breadSection,.page-id-36971>.breadSection,.page-id-86>.breadSection,.page-id-84>.breadSection,.page-id-3392>.breadSection,.page-id-372>.breadSection,.page-id-3236>.breadSection,.page-id-3240>.breadSection,.page-id-1836>.breadSection,.page-id-1838>.breadSection,.page-id-1834>.breadSection{
display:none !important;
}
/*******************************************************************
ダウンロードマネージャー 不要部分の非表示設定
********************************************************************/
.list-group{display:none}
.card-body {text-align:center}
/*.media{
display:none !important;
}*/
/***************************************************************************************************
アンケートページ
****************************************************************************************************/
/*******************************************************************
黄色い囲み枠
********************************************************************/
.box-yellow {
padding: 0.5em;
margin:1.5em 0 0 0;
display: inline-block;
font-weight: bold;
color: black;/*文字色*/
background: yellow;
border: solid 1px black;/*線*/
}
.box-yellow p {
margin: 0;
padding: 0;
font-size:18px;
font-weight : bold;
letter-spacing: 0.1em;
}
hr.quest{
margin-top: 0.5em;
height: 1px;
background-color: black;
}
/* 文字色 */
.quest-gr{
color:#009635;
}
.quest-or{
color:#F7931E;
}
.quest-red{
color:#E51373;
}
.quest-bl{
color:#009FE8;
}
.mt4{
margin-top:4em;
}
.mt5{
margin-top:5em;
}
/***************************************************************************************************
就職支援実績ページ
****************************************************************************************************/
/*******************************************************************
インデント（就職者数、定着率）
********************************************************************/
.p-tab1{
position: absolute;left: 12em;
}
.p-tab2{
position: absolute;left: 18em;
}
.occupation {
display: inline-block;
width:7em;
padding:0.2em ;
margin:0 0.5em 0.5em 0 ;
background: #009635;
color: white;
font-size: 18px;
letter-spacing :0.1em;
text-align: center;
}
/***************************************************************************************************
支援プログラム一覧
****************************************************************************************************/
/*******************************************************************
８つのプログラムの背景色
*******************************************************************
.program{
position: relative;
}*/
.prg-title{
padding: 0.5em 0 0.5em 1.5em;
margin-bottom:0.5em;
margin-top:1em;
/*font-weight: bold;*/
/*display: inline-block;*/
/* padding: 0.5em 1em;*/
border: solid 2px white !important;
border-radius: 10px;/*角の丸み*/
/* font-weight:bold; */
letter-spacing: 0.2em;
}
.prg-title-mb{
padding: 0.5em;
margin-top:1em;
border: solid 2px white !important;
border-radius: 10px;/*角の丸み*/
}
.prg-bg1{background-color: #9ED8F5}
.prg-bg2{background-color: #B0DACA;}
.prg-bg3{background-color: #ffE8a9;}
.prg-bg4{background-color: #F8D2E2;}
.prg-bg5{background-color: #C1DA75;}
.prg-bg6{background-color: #C8BB9B;}
.prg-bg7{background-color: #EAE3C6;}
.prg-bg8{background-color: #DABEDA;}
/*****************************************
【 テスト用】 動きのあるボタン （もっと知る）
******************************************/
.btn-animation-1 {
display: inline-block;
width: 500px;
text-align: center;
background-color: orange;
border: 2px solid orange;
font-size: 16px;
color: orange;
text-decoration: none;
font-weight: bold;
padding: 10px 24px;
border-radius: 4px;
position: relative;
}
.btn-animation-1 span {
position: relative;
z-index: 1;
}
.btn-animation-1::before,
.btn-animation-1::after {
content: "";
display: block;
background-color: #FFF;
width: 50%;
height: 100%;
position: absolute;
top: 0;
transition: .2s;
}
.btn-animation-1::before {
left: 0;
}
.btn-animation-1::after {
right: 0;
}
.btn-animation-1:hover:before,
.btn-animation-1:hover:after {
width: 0;
background-color: #FFF;
}
.btn-animation-1:hover {
color: #FFF;
}
/* * * * * * * * * * * * * * * * * * * * * * * * */
/* 2020/12 トップページ修正に伴い追加したCSS */
/* * * * * * * * * * * * * * * * * * * * * * * * */
/* ６つの特徴 （テキストカラーは .green を使用） */
.bg-darkgreen{
background-color: #009635;
border-radius: 15px 15px 0 0;
margin-bottom:0 ;
}
.point-box {
padding: 0;
margin: 0;
border: solid 1px #009635;
border-radius: 20px;
}
.point-box p{
padding:0.2em;
margin-bottom:0 ;
}
.point-box img{
margin-bottom:1em;
}
.point-box h3{
padding: 0;
margin: 0;
}
/* トップページの利用者の声 */
.voc-txt{
display:block;
/* padding-left:1em;
padding-right:1.2em !important;
padding-bottom:1em;*/
padding : 0 1em 1em 1em;
letter-spacing: 0.1em;
}
.client h4{
margin:0;
padding:0;
line-height:1em !important;
}
/* トップページの支援の流れ（定着支援の囲み文字） */
.support {
padding:0 0.5em;
background: #F7931E;
color: white;
font-size: 85%;
border-radius: 3px;
}
#top-support img{
margin: 0.5em 0;
}
#top-support h4{
margin:0;
padding:0;
line-height:1.4em;
}
/* トップページのサポート事例*/
.jirei {
padding: 1em 5em 1.5em 1em;
position: relative;
}
.bg-jirei{
background: #FFFBED; /*利用者背景色 薄緑*/
border: solid 3px #FFFBED;
border-radius: 10px
}
.jirei h4{
margin:0;
padding:0;
line-height:1.4em;
}
.jirei img {
position: absolute;
right: 1em;
top: 1em;
}
hr.jirei-line{
height: 1px;
background-color: #009635;
}
/*トップページのコンタクトフォーム*/
.contact-box{
padding: 0.5em 2em;
margin: 0 10em 2em 10em;
background-color : white ;
}
.contact-mb-width{
margin-left:1em;
margin-right:1em;
}
.button{
text-align: center;
font-size:22px;
background-color: #228b22 !important;
border: solid 2px #006400;
color: #ffffff !important;
margin:1em !important;
}
/* Q＆Aページ 上部のアンカーリンクメニューの幅*/
.qa-width{
margin-left:16%;
margin-right:16%;
}
/* Q＆Aページ 上部のアンカーリンクのずれを直す PC*/
.qa_contents_inner {
padding-top: 180px !important;
margin-top:-180px !important;
}
/* Q＆Aページ 上部のアンカーリンクのずれを直す モバイル*/
.mb-qa_contents_inner {
padding-top: 80px !important;
margin-top:-80px !important;
}
/* 【CTA】 トップページ、企業様ページ、 医療福祉関係の皆様へ バナーのみ非表示 に、
* 「 .page-id-○○○○ #banner, .page-id-○○○○ #banner-mb 」 を追記すること！！
* -○○○○ は、トップページID
*
* 【フォーム で パンくず と フッター 非表示】 部分に、トップページ用の エラー、確認、サンクス のページIDを追記すること！
* */
/********************************************************************
TEL受付時間外の 【CTA】 モバイルフッターバナー (モバイルのみ)
**********************************************************************/
.wrap-2{
display: block;
position: fixed;
left: 0px;
right: 0px;
bottom: -25px;
/* height:75px;*/
z-index: 9999;
}
.inner-2{
float: left;
width: 50%;
margin-left : 10;
}
.cb{
/* floatを解除 */
clear: both;
}
/********************************************************************
ポップアップ用css
**********************************************************************/
.pop-box{
margin: 2em auto;
padding: 1em;
width: 90%;
background-color: #fff; /* 背景色 */
border: 1px solid #ccc; /* 枠線 */
}
/*************************************************
'21/6/1 追加CSS
6つの特徴 フロートレフト (モバイル)
***************************************************/
.features-6{
display: inline-block; /* インラインブロック要素にする */
padding: 1px; /* 余白指定 */
height: 100px; /* 高さ指定 */
}
.f6-width{
width:45%;
}
.f6 li{
float: left;
list-style: none;
padding-left: 1px;
padding-right: 1px;
}
/*************************************************
'21/11/10 追加 軽井沢センター用 CSS
*************************************************/
.page-id-37437 {
/*color : #696969;*/
color : #585858;
}
.page-id-37437 h2{
color : #585858 !important;
}
.page-id-37437 p{
font-size:15px;
line-height:2.1em;
}
.rr-title{
font-size:18px;
}
.rr-color{
color : red;
}
.f16{
font-size:16px;
}
/*スライダー
@media (max-width: 750px) { .swiper-wrapper {
width:30%;
height:100px
}}*/
/*軽井沢用メニューの表示 （軽井沢にだけメニューを表示するためのコードは、header.php にて設定*/
.gMenu > li:before {
border-bottom:none;
}
.gMenu a:hover{
background-color:#dcdcdc;
}
.gMenu_outer{
padding:1em 0 -1em;
margin-bottom:-1em;
}
.menu-item{
border-right: dashed 1px #c0c0c0;
}
.menu-item:first-child{
border-left: dashed 1px #c0c0c0;
}
/*RRページの文章列幅*/
@media (min-width: 751px) {.rr-width{
margin-left:18%;
margin-right:18%;
margin-top:1em;
}}
@media (max-width: 750px) {.rr-width{
margin-left:4%;
margin-right:4%;
margin-top:1em;
}}
/*活動内容サブタイトル列幅*/
@media (min-width: 751px) {.ac-width{
margin-left:10%;
margin-right:10%;
margin-top:1em;
}}
@media (max-width: 750px) {.ac-width{
margin-left:4%;
margin-right:4%;
margin-top:1em;
}}
.ac-width p{
padding:1em 0 0;
font-size:16px;
}
/*活動内容 #activities*/
/*背景色グレー*/
.bg-lightgray{
background-color: #f5f5f5;
}
#activities h3{
font-size:17px;
padding: 0.6em 0 0.3em;
}
.bg-w{
background: #ffffff ;
display: flex;
justify-content: center;
align-items: center;
margin-bottom:1em !important;
}
/*クラフト*/
/*背景色白*/
.bg-white{
padding: 0;
margin: 0;
background: #ffffff ;
}
/*画像と文字*/
.keyholder {
/* padding: 15px;*/
position: relative;
}
.keyholder img {
float : left;
width:40%;
padding:0;
margin-right:1em;
}
.kh-tiitle{
font-size :16px !important;
padding-top:1.2em;
}
@media (max-width: 750px) {.kh-tiitle{
font-size :15px !important;
margin:0;
padding-top:0.8em;
}}
.kh-t{
font-size :15px !important;
line-height:1.8em !important;
margin-right:1em;
}
@media (max-width: 750px){.kh-t{
font-size :15px !important;
line-height:1.2em !important;
margin-right:0.8em;
}}
/*就労支援*/
.d-box-gray{
/* padding: 0.5em 1em;
margin: 1em 0.5em;*/
padding: 0.5em 0;
margin: 1em 0;
display: block;
line-height:2em;
background: white;
font-size:15px;
text-decoration: none;
text-align:center;
border:solid 1px #f5f5f5;
/* border-radius: 10px;
color:#009944;*/
}
/*a.d-box-gray:hover {
background: #606060;
border-color:#606060;
border-width:3px;
color:white;
text-decoration:none;
}*/
/*通所例*/
.tusho-title{
height:4em;
display: flex;
justify-content: center;
align-items: center;
margin-bottom:1em ;
padding:0.5em 0.1em;
}
.tusho1{background-color: #CAD9B2}
.tusho2{background-color: #FBC6B0}
.tusho3{background-color: #EFDE8C}
.tusho4{background-color: #B9C9DC}
/*クリエイティブ実績*/
.cr-title{
font-size :16px;
padding:1.8em 0.8em 1em 0;
font-weight:bold;
}
.cr-txt{
font-size :15px;
padding:0.5em 2em 0.1em 0;
}
@media (max-width: 750px) {.cr-title, .cr-txt {
padding-left:1em;
padding-right:1em;
}
}
.creative-picture {
float: left;
width: 47%;
margin-left : 0.2em;
}
/*利用者の声*/
.user-voice img{
padding-top:0.3em;
}
/*よくある質問*/
.blank_faq{
line-height:2.5em;
}
.faq-indent{
margin-left:1em;
text-indent:-1em;
}
/*最新記事 タイトル文字サイズ*/
#pl-gb37437-61dd09161d891 h3{
font-size:20px !important!;
}