@charset “utf-8”;
/*
Theme Name: lightning-pro-child
Theme URI:
Template: lightning-pro
Description:
Author: MarkleDesign
Tags:
Version: 0.1.2
*/
/*************************************
スマホ・PCで表示 を切り替えるクラス
**************************************/
/*スマホでのみ表示する （only_pc クラスを非表示）*/
@media (max-width: 750px) {.only_pc {display:none}}
/*PCでのみ表示する （only_mb クラスを非表示）*/
@media (min-width: 751px) {.only_mb {display:none}}
/*******************************************
画像オンマウスで半透明化
********************************************/
.gazou:hover {
opacity: 0.7;
}
/*******************************************************************************************
基本CSS 文字色・サイズ・配置・改行幅・文字ピッチ・段落間隔 等
********************************************************************************************/
/*左寄せ*/
.left{
text-align:left;
}
/*右寄せ*/
.right {
text-align:right;
}
.right-pf{
margin: 0 0 0 auto;
}
/*センタリング*/
.center{
text-align:center;
}
/*ミントグリーンの文字*/
.mint{
color:#00ab95;
}
/*文字色 赤*/
.red{
color:red;
}
/*文字色 青*/
.blue{
color:blue;
}
/*文字色 メインカラー*/
.main-color{
color:#009E96;
}
/*文字色ジャストコース*/
.just-color{
color:#0093D4;
}
/*文字色 みんみん*/
.minmin-color{
color:#F39800
}
/*文字色 スクラッチ*/
.scratch-color{
color:#EB6EA5
}
/*太文字
* やや太く*/
.lb{
font-weight:400;
}
/* 太く*/
.bold{
font-weight:bold;
}
/* やや細く*/
.light{
font-weight: lighter;
}
/*文字サイズ */
.xx-large{
font-size:30px;
}
.x-large{
font-size:22px;
}
.large{
font-size:18px;
}
.small{
font-size:14px;
}
.ss{
font-size:10px;
}
/*改行幅 大*/
.blank_line{
line-height:2em;
}
/*改行幅 やや大*/
.blank_line-m{
line-height:1.6em;
}
/*改行幅 やや小*/
.blank_line-s{
line-height:1.1em;
}
/*改行幅 極小*/
.blank_line-ss{
line-height:0.5em;
}
/* 文字ピッチを変える */
.c-pitch01 {
letter-spacing: 0.1em;
}
.c-pitch03 {
letter-spacing: 0.3em;
}
p {
font-size:16px;
}
/*******************************************************************************************
ヘッダー
********************************************************************************************/
/*ヘッダーバナー 「体験する」 メールアイコンを非表示 オレンジ色にする*/
.navbar-header .contact_btn .fa-envelope{
display:none !important;
}
.contact_btn .btn-primary{
background: #F29600 !important;
border: 2px #F29600 !important;
}
.contact_btn .btn-primary:hover {
opacity: 0.7;
}
.menu-item{
font-size:16px;
}
/*各ページのヘッダータイトルの帯の高さを調整*/
.page-header{
height:5em;
}
/*******************************************************************************************
ミント塾 トップページ
********************************************************************************************/
/* 固定文書内の ３PR h２ css の削除 */
#mint-pr h2 {
background:transparent !important;
box-shadow: none !important;
border: 2px transparent !important;
color:black !important;
margin:0.1em;
}
@media screen and (max-width: 480px) {
#mint-pr .prBlock_summary{
letter-spacing: 0.1em !important;
}
}
/*h2タイトル帯の画像位置調整*/
.logo{
margin-top:-10px;
margin-right:15px;
}
/*コース紹介のインデント PC*/
.course-mark{
float:left;
width:5em;
}
.course-text{
float:left;
padding:0.1em 0 0 1em;
}
/*コース紹介のインデント モバイル*/
.course-mark-mb{
float:left;
width:3.2em;
}
.course-text-mb{
float:left;
padding-left:0.3em;
}
.clear{
clear:both;
}
/*コース紹介の文字色*/
.bg-green{
background-color:#66bf97;
padding:0.2em;
color:white;
font-weight:bold;
vertical-align: top;
position: relative;
top: -0.05em;
}
.bg-blue{
background-color:#4CACE2;
padding:0.2em;
color:white;
font-weight:bold;
vertical-align: top;
position: relative;
top: -0.05em;
}
.bg-minmin{
background-color:#F8B62D;
padding:0.2em;
color:white;
font-weight:bold;
vertical-align: top;
position: relative;
top: -0.05em;
}
.bg-scratch{
background-color:#F19EC2;
padding:0.2em;
color:white;
font-weight:bold;
vertical-align: top;
position: relative;
top: -0.05em;
}
/*コース紹介の画像余白*/
.yohaku{
margin-left:3em;
}
.yohaku-mb{
margin-bottom:0.5em;
}
/*受講料 ラインマーカー風*/
.marker-1{
display:inline-block;
background: linear-gradient(transparent 50%, #c1ffe0 50%);
}
.marker-1 p{
margin:0;
padding:0;
}
/*受講料 表*/
#fee table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: solid 2px #696969;
margin-top:0.1em;
}
#fee tr.bg1{
background-color: #ffcccc !important；
}
#fee .bg2{
background-color:#c6ffe2；
}
#fee .bg3{
background-color:#ccccff；
}
#fee td{
border:solid 1px #aaaaaa;
}
#fee th{
border-bottom: double 2px #696969;
border-left:solid 1px #aaaaaa;
}
/*カリキュラム 小見出し 幅と帯*/
.curriculum-width{
margin-left:5%;
margin-right:5%;
}
.belt{
background-color:#C9E6E0;
padding:0.6em ;
margin-bottom:0.7em;
}
/*カリキュラム 書き出しインデント*/
#curriculum ul{
text-indent: -1em;
list-style-type: none;
}
#curriculum ul li{
margin-left: -2em;
}
/*ママボイス h3クリア*/
#voice h3{
border-bottom: solid 4px transparent !important;
margin-bottom:-0.1em !important;
text-align:center;
/*
background-color: #e0ffff; /* 背景色
background-image: radial-gradient(#bbdbf3 20%, transparent 0), radial-gradient(#bbdbf3 15%, transparent 0); /* 水玉の色
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
color: #043c78; /* 文字色
padding: 10px; /* 余白 */
}
/******************************
スクラッチページ （ミント塾）
******************************* */
.box-sc{
position: relative;
margin: 2em 0;
padding: 1.5em;
border: solid 3px #95ccff;
border-radius: 8px;
}
.box-sc .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 20px;
background: #FFF;
color: #95ccff;
font-weight: bold;
}
.box-sc p {
margin: 0;
padding: 0;
line-height:2em;
}
.box-memo{
padding: 8px 19px;
margin: 2em 0;
background: #ffffe0;
border-top: solid 5px #ffd700;
border-bottom: solid 5px #ffd700;
}
.box-memo p {
margin: 0;
padding: 0;
}
/*スクラッチページ 書き出しインデント*/
#scratch ul{
text-indent: -1em;
list-style-type: none;
}
#scratch ul li{
margin-left: -2em;
}
/******************************
あいさつ 続きを読む 開閉のCSS
******************************* */
.readmore{
position: relative;
box-sizing: border-box;
}
.readmore-content{
position: relative;
overflow: hidden;
height: 100px; /*高さ*/
}
.readmore-content::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
content: “”;
height: 50px; /*高さはreadmore-moreのheight以下にすること*/
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);
}
/* 続きを読むボタン */
.readmore-label{
display: table;
bottom: 5px;
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
margin: 0 auto;
z-index: 2;
padding: 0 10px;
background-color: #afeeee;
border-radius: 10px;
color: #00ab95;
}
.readmore-label:before{
content: ‘続きを読む’;
}
.readmore-check{
display: none;
} /*チェックボックスは非表示*/
.readmore-check:checked ~ .readmore-label{
position: static;
transform: translateX(0);
-webkit-transform: translateX(0);
}
.readmore-check:checked ~ .readmore-label:before{
content: ‘閉じる’;
}
/*チェック時に高さを自動に戻す*/
.readmore-check:checked ~ .readmore-content{
height: auto;
}
/*チェック時グラデーション等を削除*/
.readmore-check:checked ~ .readmore-content::before {
display: none;
}
/*▶︎ グレー*/
.gray{
color:#c0c0c0;
padding-top:2em;
font-size:45px;
}
/*ママボイス 先生*/
.voice-box {
margin: 2em 5em;
border: medium solid #00ab95;
}
.voice-box .title {
font-size: 1.2em;
background: #00ab95;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
}
.voice-box p {
padding: 0.5em 2em;
margin: 0;
}
#customer-voice .mb-title {
padding: 0.5em 1em;
margin: 2em 0;
color: #474747;
background: whitesmoke;
border-left: double 7px #00ab95;
border-right: double 7px#00ab95;
border-bottom:none !important;
font-weight: bold;
}
.mb-title p {
margin: 0;
padding: 0;
}
/* 運営者情報 画像 */
.img2{
padding-left:30em;
}
.column-1{
margin-right:40%;
}
/********************************************************************************
投稿文書
*********************************************************************************/
/*の１文字目の文字色 (テーマの「投稿」で１文字目の文字の変色させない）*/
h1.entry-title:first-letter,
.single h1.entry-title:first-letter { color:inherit; }
/*投稿表示時、最終登校日を非表示*/
.entry-meta_updated{display:none;}
/*******************************************************************************************
お客様の声
********************************************************************************************/
#customer-voice h2{
background-color: transparent !important;
color:black;
border:none !important;
margin-top:-2em !important;
text-align:center;
}
/*******************************************************************************************
プロフィール
********************************************************************************************/
#prf h3 {
margin-top: 0!important;
margin-bottom: 0!important;
padding-top: 0!important;
padding-bottom: 0!important;
}
#prf h4 {
display: inline-block;
border:none !important;
margin-bottom: 0.3em;
padding: 0 ;
/* background-color: #effff7;
box-shadow: 0 0 5px 1px #ccc; */
}
/*******************************************************************************************
お問い合わせフォーム
********************************************************************************************/
/*フォーム 必須 */
.must {
padding:1px;
background: #FF1A00;
color: white;
font-size: 65%;
vertical-align: top;
position: relative;
top: -0.1em;
border-radius: 3px;
}
/*フォーム フィールド幅 */
.field{
display: block;
width: 24em;
}
/*お問い合わせフォームの「確認」「送信」ボタン */
.contact-button {
background-color: #00ab95 !important;
color: #ffffff !important;
}
.contact-button:hover {
background-color:#006400 !important;
color:#ffffff !important;
}
/*お問い合わせフォーム・確認・サンクスページ メニューとフッターメニューを非表示*/
.page-id-309 .gMenu_outer, .page-id-309 .vk-mobile-nav-menu-btn, .page-id-309 .footerMenu,
.page-id-404 .gMenu_outer, .page-id-404 .vk-mobile-nav-menu-btn, .page-id-404 .footerMenu,
.page-id-407 .gMenu_outer, .page-id-407 .vk-mobile-nav-menu-btn, .page-id-407 .footerMenu{
display:none !important;
}
/*************************************************
フロートサイドバナー (PC) jsを利用
**************************************************/
/* フローティングバナーのラップ要素 */
#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; /* ブロック要素に変更 */
}/*
/*************************************************
モバイルフッターバナー (モバイル)
***************************************************/
.mb_banner{
display: block;
position:fixed;
left: 2em;
right: 2em;
bottom: 1em;
top:30em;
height:3em;
z-index: 9999;
}
.inner{
float: left;
width: 100%;
}
.cb{
/* floatを解除 */
clear: both;
}
/* フッター固定バナーのラップ要素 */
#fixed_fotter_banner{
position: fixed;
bottom:0;
right: 0;
z-index: 9999;
}
/* 画像の共通設定 */
#fixed_fotter_banner > * {
width: 100%;
height:60px;
}
/*************************************************
投稿文書 ミント塾
***************************************************/
/* h3クリア*/
.clear-h3{
border-bottom: solid 4px transparent !important;
margin-bottom:-0.1em !important;
text-align:center;
}