@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
	ここから(新)カスタマイズ
	2020.6.19に(旧)図解算数ブログ(アプデで死亡)から移植
			目次(2019.8.8)
グローバルCSS変数
プラグインカスタマイズ
ページ全体デザイン(ヘッダー、フッター)
画像の修飾クラス
ヘッダー
フッター
トップページ
記事の基本デザイン
記事内のアイテム
番号付きリスト
番号無しリスト
区切り線
文字修飾
ボックス
/******************************************************
	
/*****************************************************
	グローバルなCSS変数
************************************************** */
:root{
	--theme-col-1:;/* 背景色 */
	--bg-col-1:;/* 背景グラデ色1 */
	--bg-col-2:;/* 背景グラデ色2 */
	--theme-col-2:;/* 主役(メイン)色 */
	--theme-col-3:;/* なじませ(ベース)色 */
	--theme-col-4:;/* ライバル色 */
	--theme-col-5:;/* アクセント色 */
	
	--Sbx-col-1:#bce;/*S-boxのborder色*/
	
	--Qbx-col-a: #80c3b4;/*Q-boxのborder色(例題)*/
	--Qbx-col-b: #78b4f1;/*Q-boxのborder色(類題)*/
	--Qbx-col-c: black;/*予備*/	
	--AT-col-1:#ffb161;/* AT(解答タイトル)の色(淡) */
	--AT-col-2:#ff8d62;/* AT(解答タイトル)の色(濃) */
	
	--GRN-col-1:#99d692;/* グリーンモニタ風の文字色 */
	--GRN-col-2:#0a2513;/* 　〃　の背景色 */
}

/****************************************************
			プラグインのカスタマイズ
*****************************************************/
/*-----------------------------------------------
プラグインカスタマイズ>Codoc(20220313)
--------------------------------------------------*/
/*** サポート本体表示全体 ***/
.codoc-support{position:relative;max-width:none !important;width:100% !important;background:#fff8 !important;margin:0 !important;padding:0.6em min(calc(0.4rem + 0.95vw),1.2em) 0.8em !important;border:double #9a86c8;border-width:10px 0;border-radius:0 !important;}
/** タイトル(追加) **/
.codoc-support:before{position:absolute;bottom:calc(100% - 0.5em);left:50%;transform:translateX(-50%);white-space:nowrap;content:"サポートプログラム";color:#86d;font-size:1.05em;font-weight:bold;line-height:1;letter-spacing:0.2em;background:#fff;padding:0.2em 0.5em 0.2em 0.7em;}
/**サポートお願い文言(中身はcodoc設定から)デザイン**/
.codoc-support-title{color:inherit !important;text-align:left !important;font-size:inherit !important;font-weight:normal !important;line-height:1.5;margin-bottom:0em !important;color:#87a !important;}
/*** ボタン ***/
.codoc-btn{background:#7d7bc1 !important;color:#fffc !important;letter-spacing:0.3em;border:none !important;height:fit-content !important;width:fit-content !important;font-size:0.9em !important;padding:0em !important;margin:0.8em auto 0.2em !important;}
a.codoc-btn:link,a.codoc-btn:visited,a.codoc-btn:hover,a.codoc-btn:active{
	text-decoration:none !important;color:#fffd !important;padding:1em 1.5em 0.9em !important;line-height:1 !important;}
/** 名前表示 **/
.codoc-buy-creator{display:none !important;}
/** 一番下段の表示(何？) **/
.codoc-bottom,.codoc-bottom-logged-out{display:none !important;}


/*-----------------------------------------------
プラグインカスタマイズ>Contact Form 7(20260317総本部から移植)
--------------------------------------------------*/
/*段落*/
.wpcf7 p{font-size:1.05em;line-height:1;margin:1em 0 !important;color:#4e7eaa !important;}
/*リストアイテム*/
.wpcf7-list-item{margin:0 1em 0 0.7em !important;}
.wpcf7-list-item.first{margin-left:0.7em !important;}
.wpcf7-list-item-label{color:#6597c5;font-size:0.9em !important;font-weight:normal;margin-left:-0.2em !important;}
/*送信ボタン*/
.wpcf7-form-control.wpcf7-submit{
	border-radius:calc(0.2em + 0.15vw) calc(0.8em + 0.32vw);
	background:linear-gradient(147deg,#f5e682,#ffab62,#ef8f4a,#ce627a);
	font-size:1.2em;color:#fffc;
	border: 2px solid #975;
    box-shadow: 0px 0px 6px 3px #ffca inset;}
/*メッセージ*/
.wpcf7-response-output{margin: -1em 0 0;border: none;color: #33b333;
    font-size:1.1em !important;text-align: center !important;padding:1em !important;}

/*------------------------------------------------
	プラグイン>Simple Download Monitor(2020.11)
-------------------------------------------------*/
/*** 既存要素のカスタマイズ ***/
/*全体*/
.sdm_fancy2_item{width:100% !important;margin:0 !important;float:none !important;border:none !important;}
/*ラッパー*/
.sdm_fancy2_wrapper{margin:0 !important;}
/*上半分?*/
.sdm_fancy2_download_item_top{margin:0 0 -0.5em !important;}
/*サムネイルのラッパー*/
.sdm_fancy2_download_thumbnail{overflow:visible !important;
	text-align:center;}
/*サムネイル画像*/
.sdm_fancy2_thumb_image{border-radius:0.5em;box-shadow:0.5px 0.5px 4px 1px #2018;}
/*ファイル名*/
.sdm_fancy2_download_title{display:none;}

/*ダウンロードブロック全体*/
.sdm_fancy2_download_link{margin:0.5em 0;line-height:1.2 !important;}
/*ダウンロード指示文言*/
.sdm_enter_password_label_text{font-size:1em;}
/*フォーム全体*/
.sdm-download-form{margin-top:0.5em;}
/*パスワード入力欄*/
input[type=password]{width:40%;margin:0;}
/*ダウンロードボタン(パスワード無しで飛ぶ画面も共同記述)*/
.sdm_fancy2_download_dl_link,
.sdm_download.green{
	border: 2px solid #975 !important;
	border-radius:0.5em 1em;
	padding:0.5em 1em !important;
	color:#fff !important;
	font-size:1em;font-weight:bold;
	text-shadow:-1px -1px 1px #0003;
	line-height:1;letter-spacing:0.1em;
	background: linear-gradient(147deg,#f5e682,#ffab62,#ef8f4a,#ce627a);
	box-shadow:0px 0px 6px 3px #ffc7 inset;}

/**パスワード無しで飛ぶ画面**/
/*タイトル*/
.sdm_post_title{display:none;}
/*カウンター*/
.sdm_post_download_count{display:none;}
/*ボタン(上で共同記述以外)*/
.sdm_download.green{}

/*** 自作の要素(DL-box1) ***/
/*外側全体のボックス*/
.DL-box1{position:relative;
	width:min(100%,400px) !important;margin: 1em auto;
	border-radius: 0.3em 1em;border: solid 3px #f2a4cc;
    padding:1.3em 1em 1em;}
/*プラグイン名表示*/
.DL-box1:after{position:absolute;bottom:-0.5em;right:1em;
	content:"Powered by Simple Download Monitor";
	color:#f688c1;font-weight: bold;
	font-style:italic;font-size:0.7em;
	line-height:1em;background:#fff;}
/*タイトル*/
.DL-box1 .title{position:absolute;
	letter-spacing:0.1em;
	top:-1em;left:50%;transform:translatex(-50%);white-space:nowrap;
	padding:0 0.3em;font-size:1.1em;font-weight:bold;
	color:#ff74bb;background:#fff;}
/**会員登録ボックス**/
.DL-box1 .promo{}
.DL-box1 .promo p{font-size: 1em; line-height: 1.7; margin: 0;}

/*------------------------------------------------
	プラグイン>もしもの簡単リンク
-------------------------------------------------/
/* 全体 */
div.easyLink-box{border-radius:1em 2em !important;padding:1em 0.5em 0.5em 1em !important;}
/* ボタン周り */
p.easyLink-info-btn{margin:0 !important;}
.easyLink-info-btn a{width:15em !important;margin:0.15em 0.3em !important;padding:0.2em 0.5em !important;}

/*------------------------------------------------
	プラグイン>スタディサプリのテキストアフィリ
-------------------------------------------------*/
a.study-sapli0:link,a.study-sapli0:visited,a.study-sapli0:hover{
	display: inline-block;text-decoration:none;
	transform: scale(0.8,1.15);
	margin: 0 -0.7em;
	border-radius: 2px 4px;
    border: solid #3EC1BD;
    border-width: 0 2px 1px 0;
	background:linear-gradient(130deg,#2868d9,#114cb4);
	padding: 0.1em 0.5em 0em;
	color:#fff;font-weight: bold;font-size: 1.0em;
	letter-spacing: 0.15em;line-height: 1.2;	
	box-shadow: 2px 1px 3px 0px #0008;}

/*------------------------------------------------
	プラグイン>Shortcode Ultimates
-------------------------------------------------/
/*spoilerに背景画像を設定*/
.su-spoiler p {	background-image: url("https://swsn-ht.com/wp-content/uploads/2019/07/背景画像2018版青い横罫.jpg")}


/*------------------------------------------------
	プラグイン>Easy Table of Contents(2021)
--------------------------------------------------*/
/* 全体コンテナ(ツリー表示,数字カウンター) */
#ez-toc-container.counter-hierarchy,#ez-toc-container.counter-hierarchy.counter-decimal{
	width:auto;
	margin:0 auto;
	border-radius:10px 30px;
	padding:1em 2em;
	box-shadow:1px 1px 5px 1px #bdb9ce;
	font-size:1em;
	background-color:#fff;}
/* タイトル*/
div#ez-toc-container p.ez-toc-title {
	font-size:calc1.1em;
	text-align:center;
	font-weight:bold;
	padding:0.3em;}
/* リストアイテム */
#ez-toc-container.counter-hierarchy ul li,
#ez-toc-container.counter-hierarchy.counter-decimal ul li{
	line-height:2em;}
/* リストアイテム(子) */
#ez-toc-container.counter-hierarchy ul li ul li,
#ez-toc-container.counter-hierarchy.counter-decimal ul li ul li{
	font-size:0.9em;
	line-height:1.8em;}

/*--------------------------------------------
	プラグイン>Search and Filter
----------------------------------------------/
/* 全体 */
.searchandfilter{position:relative;
	width:330px;margin:0em auto 1em;
	background:#fff8;
	border:solid 3px #b78cbf;border-radius:8px 25px;
	text-align:center;}
.searchandfilter:after{position:absolute;
	bottom:-1em;right:0.5em;background-color:#fff;
	color:#b78cbf;font-size:0.75em;
	content:"Powered by Seach & Filter";
	font-weight:bold;font-style:italic;}
.searchandfilter ul{padding:0;}
.searchandfilter ul li{margin:0;padding: 0 2px;}


/**************************************************
			ページ全体デザイン
*****************************************************/
/*ルートのフォントサイズ(remの基準)をgoogle推奨サイズに設定*/
:root{font-size:16px;}

/*サイト全体のフォントサイズ(cocoon設定に上書き)*/
body{font-size:min(calc(0.9rem + 0.4vw),1.1rem) !important;
/*背景をグラデーション*/
	background: linear-gradient(90deg,#fbab73,#fdea8e);}

/*border-boxを全要素に指定*/
*,*:before,*:after{-webkit-box-sizing: border-box;box-sizing: border-box}

/*-----------------------------------------------------------
		ページ全体>ヘッダー 
------------------------------------------------------------*/
/* サイト名 */
.header .site-name-text{display:inline-block;
	color:white;font-size:min(calc(2vw + 0.5em),1.7em) !important;
	transform:scaleY(1.4);
	font-weight:bold;line-height:1.75em;
	letter-spacing: 0.1em;opacity:0.9;
	text-shadow: -1px -1px 4px #510a, 1px 1px 4px #510a;}

/* サイト名まわりのレイアウト */
.logo-text{	padding:0 0px 1em;}
.logo-header{padding-top:0;}

/* サブタイトル */
.tagline{color:#fbab73;margin:.6em 0 0;
	font-size:min(calc(1.8vw + 0.45em),1.5em);font-weight: bold;
    letter-spacing: 0.1em;opacity:0.8;}
/*サブタイトルの色*/
.desc {	color:#77522b;}

/*ヘッダー背景色をストライプ&グラデに*/
.header{background:linear-gradient(90deg,#503b,#403e 25%,#303e 75%,#203c),repeating-linear-gradient(#00c,#00c 8px,#fff 8px,#fff 11px);}

/*********** ヘッダーナビ(停止中) ************/
/*落影
.navi{background:linear-gradient(90deg,#584572,#584572);box-shadow:0px 2px 5px 3px #3338 ;}*/
/* ナビのアイテム */
#navi .navi-in ul li{color:#fffa;background: linear-gradient(150deg,#796398 -50%,#584572);border-width: 0px 1px;border-color: #000 #0005 #000 #fff3;border-style: solid;}
/*ホバー色*/#navi .navi-in a:hover{	background-color:#56d683;}

/*-----------------------------------------------------
		ページ全体>フッター 
-----------------------------------------------------*/
.footer-container{margin-top:2em;
	background: linear-gradient(90deg,#543454,#745b96);
	padding:0px;}
.footer-bottom{	margin:0px;	padding:0px;}
.copyright{font-size:1rem;margin:0px;padding:1em;
	font-weight:bold;color:#fffc;}

/* フッターメニュー */
.navi-footer{
	background:linear-gradient(90deg,#4350,#4358,#435,#4353,#4350);
	line-height:2.5em;}

/*メニューアイテム(ボーダーはどこ？)*/
.menu-item{background: linear-gradient(165deg, #fcf3, #0003 140%);}

/* フッター内のリンク色 */
#footer a{color:#fffa;}

/*ホバー色*/.menu-item a:hover{background-color:#56d683;}

/*フッターのコピーライト表示*/
.source-org.copyright{font-size: calc(1em + 0.2vw);
    letter-spacing: 0.05em;}

/***********************************************************
			トップページのデザイン 
***********************************************************/
/*----------------------------------
		トップページ>共通 
-----------------------------------*/
/* 全体の背景色 */
body{background:linear-gradient(90deg,#fbab73,#fdea8e);}
/* メインカラム */
.main{border-radius:10px 25px 10px 25px;background-color:#fff;padding:0.5em;}
/* サイドバーの角丸と背景色 */
.sidebar{border-radius:5px 15px 5px 15px;background-color:#fffc;}

/*--------------------------------
	トップページ>ブログ型 
----------------------------------*/
/* トップページの記事の角丸と背景色 */
.a-wrap{border-radius:5px 20px 5px 20px;color:#c18a7e;border:solid 1px #8885;background-color:#fffc;}
/* トップページの記事(マウスオーバー)
.a-wrap:hover{transform: scale(1.02,1.02);background-color:#ffff;color:#333;border:solid 1px #888;box-shadow:4px 4px 5px 0px #3358;z-index:3;}*/

/*--------------------------------
	トップページ>サイト型 
---------------------------------*/
.home.page .entry-title{display:none;} /*タイトルを消す */
.home.page .date-tags{display:none;}/*日付を消す */
.home.page .sns-share,.home.page .sns-follow,.home.page .entry-categories-tags{display:none;}/* SNS関係を消す */


/********************************************
			記事の基本要素 
********************************************/
/*--------------------------------------
	記事の基本要素>メインカラム 
---------------------------------------*/
/* サイドバーがない場合のメインカラム */
.no-sidebar .content .main{
	/*width:calc(100% - 4vw);*//* 両脇に2vwの空き */
	margin:0 auto;
	padding:1px 0px;
	box-shadow: 1px 1px 5px 1px #1023;}

/* 記事全体 */
.article{margin:0;padding:0;}

/* 本文領域 */
.entry-content {background-image: url("https://zky-jukesan.com/wp-content/uploads/2021/01/背景画像2018版青い横罫.jpg");
		padding:0px;margin-left:3vw;margin-right:3vw;}
/* 記事の本文段落 */
.entry-content p{font-size:inherit;line-height:1.7;
	margin:0.1em 2.5vw 1em;padding:0;}
.entry-content p:last-child{margin-bottom:0;}
/*0.8倍の幅狭の字体(narrow)*/
.entry-content .Nrw{text-indent:0;display:inline-block;font-size: 0.8em;transform: scaley(1.25);transform-origin: left;}


/* パンくずリスト */
.breadcrumb {margin:10px 2vw 5px;}

/* タイトル下の画像(アイキャッチ兼用) */
.eye-catch {margin:0px 1vw;
	width:100%;
	text-align:center;
	padding: 21px 4vw;
	background: linear-gradient(90deg,#413049,#674975);}

/* アイキャッチ画像 */
.eye-catch img {border-radius: 5px 25px;
	box-shadow: 0.5px 0.5px 6px 2px #ffb5;}

/* 日付表示 */
.date-tags {margin: 0px 1vw;
    line-height: 0.8;
    text-align: left;
	border-top:solid 1.5px #ffdd88;
	border-radius:0px 0px 10px 30px;
    background-color: #fff8;
    padding:0.4em 2vw 0.6em;
    font-size: 1.2em;
    background: linear-gradient(90deg,#413049,#8576a9);
    color: #fdad;}

/* 本文の最下段(カテゴリタグSNS) */
.article-footer,.entry-footer{margin:0 2vw;}

/* 記事下の関連記事・コメントなど */
.under-entry-content{margin:0 2vw;}

/* 記事下のカテゴリーとタグ */
.cat-link{background:linear-gradient(120deg,#654694,#5283b5);}
.tag-link{background:linear-gradient(120deg,#544e73,#86608b);}
.tag-link,.cat-link{
	font-size:0.9em;
	color:white;
	padding:0.2em 0.5em;
	border:1.5px solid #333;
	border-radius:5px;
	box-shadow: 0px 0px 5px 2px #fff9 inset;}
/*記事したカテゴリーとタグのレイアウト*/
.entry-categories-tags {margin-bottom: 0;}


/*--------------------------------------
	記事の基本要素>見出し・本文
---------------------------------------*/
/********** Cocoon目次 **********/
.toc{border-radius:0.5em 1.5em;background:#fff;}
.toc ol li{font-size:1em;}
.toc ol li ol li{font-size:0.95em;line-height:1.5;}

/* 記事とアーカイブのタイトル,まとめ用の内部h1*/
h1.entry-title,h1.archive-title,h1.in{
	background: linear-gradient(90deg,#413049,#905294);
	padding: 0.5em 1em 0.05em;
	color: #fd8;
	margin: 1vw 1vw 0vw;
    letter-spacing: 0.12em;
    border-radius: 10px 30px 1px 1px;
	border-bottom: solid 2px #ffdd88;}
/*まとめ用の内部h1*/
h1.in{font-size:1.7em;margin:2em -1.5vw 2em -4.5vw;position:relative;}
h1.in:after{position:absolute;left:0;top:calc(100% + 2px);content:"";width:100%;height:1em;border-radius:1px 1px 10px 30px ;background:linear-gradient(90deg,#413049,#8576a9);}

/* アーカイブは色を少し変える */
h1.archive-title{background:linear-gradient(90deg,#352167,#435ebf);}
/*頭文字を大きく*/
h1.entry-title:first-letter,h1.archive-title:first-letter,h1.in:first-letter{font-size:1.7em;}

/* 見出し2とダミー */
.article h2,.h2Dmy{position: relative;
    text-align: center;
	color:#555;
	font-size:1.4em;
	font-weight:bold;
    background-color: white;
    letter-spacing: 0.08em;
    padding:0.6em 0px 0.4em;
    z-index: 1;
    line-height: 1.2em;
    vertical-align: middle;
	border-top:double 15px #8e6b9e;
	border-bottom:double 15px #8e6b9e;
	margin: 3.5em 0 1em;}

/*.article h2:first-letter{
	font-size:1.35em;
	padding-right:0.05em;}*/

/* 左上のロゴと罫線 */
.article h2:after {position: absolute;
	top:-3.5em;
	right: 0px;
	width:100%;
	text-align:right;
	font-size:0.55em;
	line-height:1.2em;
	content: "図解算数教室";
	color:#9ae5ec;
	padding-right:0.5em;
	border-bottom:solid 2px #c5f1f5;
    z-index: 1;}

/* ページ境界のメタファー */
.article h2:before {position: absolute;
    content: "";
	top: -74px;
    left: -3vw;
	height:59px;/* topとh2の上ボーダー太さの差 */
	width:calc(100% + 6vw);/* entry-contentの左右のマージンを追加 */
	background:white; 
    z-index: -1;
    border-radius: 5px 30px 0px 0px;
	box-shadow: 0px -3px 7px -4px #102a;}

/* 見出し3
 * (メインカラムのウィジェットのタイトルとサイドバーのタイトルにも適用)
 * (ダミーのh3) */
.article h3,.main-widget-label,.sidebar h3,.h3Dmy{color: #657;
    position: relative;
    margin: 1.5em 0 0.3em;
	border-radius:5px 0 0 0;
    border-left: solid 10px #8e6b9e;
    border-right: none;
    border-top: none;
    border-bottom: solid 4px #b78cbf;
    line-height: 1.3em;
    font-size: 1.2em;
	font-weight:bold;
    padding: 0.1em 0.5em 3px;
    background: linear-gradient(90deg,white 45%,rgba(255,255,255,0));}
/* サイドバーのタイトルは字小さめ */
.sidebar h3{font-size:1.15em;}
/* バリエ(トップページで使うセンター寄せ) */
.article h3.B{margin-top: 1.5em;border-left: none;
	text-align: center;font-size: 1.5em;line-height: 1;
	background: linear-gradient(90deg,#fff0,#fff,#fff0);}


/* 見出し4 */
.article h4{position: relative;
    margin: 0.5em 1vw 0;
	border-radius: 3px 0 0 0;
    border-top: none;
    border-bottom: none;
    border-left: solid 7px #b78cbf;
    padding: 0.3em 0.4em 0;
    font-size: 1.1em;
    color: #768;
    line-height: 1.3em;
    background: linear-gradient(90deg,white 55%,rgba(255,255,255,0));}

/* 見出し5 */
.article h5{border:none;
	margin: 1em 1.8vw 0em;
	padding: 0;
	color: #867d9c;
	font-size: 1.05em;}

/*--------------------------------------
	記事の基本要素>見出しの追加クラス
 * -----------------------------------*/
/******************
 *  見出し4(小問レベル)の追加スタイル(12/22第一練習ブログよりコピペ) *************************/

/*** (旧版)h4採用版QT40 QT47ベースのデザイン→順次QT48に置き換える **/

/* a,b色設定 */
.article *.QT40a {color:var(--Qbx-col-a);
	/*border: 2px solid var(--Qbx-col-a);*/
	box-shadow: 0px 2px 0 0px white, 0px 0px 0 2px var(--Qbx-col-a);}
.article  *.QT40b {color:var(--Qbx-col-b);
	/*border: 2px solid var(--Qbx-col-b);*/
	box-shadow: 0px 2px 0 0px white, 0px 0px 0 2px var(--Qbx-col-b);}

/* a,b共通設定 */
.article  *.QT40a,.article  *.QT40b{display: inline-block;
    background: white;
    font-size: 1.25em;
    font-weight: 700;
	vertical-align: bottom;
    padding: 9px 17px 3px 13px;
    border-radius:15px 30px 0px 0px;
    margin: 15px 0px 0px 2px;
    letter-spacing: .1em;
    line-height: .8em;
	border:none;}

/**最新版(h4(小問)用タイトル8強調型ラベル,大問の中に入るタイプ) **/
/* a,b共通設定 */
.article  *.QT48a,.article  *.QT48b{
	display: inline-block;
	min-width:200px;
	color:white;
	font-size: 1.15em;
	font-weight: 700;
	vertical-align: bottom;
	padding: 9px 17px 3px 13px;
	border-radius:15px 30px 0px 0px;
	border: solid 1px white;
	margin: 15px 0px 0px 7px;
	letter-spacing: .1em;
	line-height: .8em;}

/* a,b色設定 */
.article  *.QT48a {	color:white;
	background:linear-gradient(to right,#6eb99e,#cbeeba);
	box-shadow: 0px 2px 0 0px white, 0px 0px 0 2px var(--Qbx-col-a);}
.article  *.QT48b {	color:white;
	background:linear-gradient(to right,#3a99e0,#88dcea);
	box-shadow: 0px 2px 0 0px white, 0px 0px 0 2px var(--Qbx-col-b);}

/*******************************************
	Web例題(example)の書式セット(2021.11.16大改訂)
*******************************************/
/***** 全体 *****/
/*色設定*/
article.XPL1{
	--colBL:#5d86;/* ブラウザでの左ボーダー */
	--colBR:#5d88;/* ブラウザでの右ボーダー */
	--col0a:#0a7;/* タイトル色 */
	--col0l:#104d11;/* タイトルラベル背景 */
	--col0g1:#008428ba;/* タイトル横グラデ開始色 */
	--col0s1:#7bbc7b;/* タイトルストライプ色1 */
	--col0s2:#afdba8;/* タイトルストライプ色2 */
	--col1a:#4a7;/* 大問の区切り色 */
	--col2a:#4d9;/* 大問の枠線 */
	--degG:135deg;/* 斜めのグラデーションの角度(共通) */
	--colLqG1:#0428;/* 大問の背景グラデ色1 */
	--colLqG2:#ffe;/* 大問の背景グラデ色2 */
	--col3a:#9eb;/* 小問の区切り線(上) */
	--col3b:#caf3d1;/* 小問の区切り線(下) */
	--col4a:#9fa;/* タイトル文様線 */}

/* 色設定(青)作業中…X*/
article.XPL1.B{	
	--colBL:#5de6;/* ブラウザでの左ボーダー */
	--colBR:#5de8;/* ブラウザでの右ボーダー */
	--col0a:#4e70f8;/* タイトル色 */
	--col0l:#172378;/* タイトルラベル背景 */
	--col0g1:#0061c3;/* タイトル横グラデ開始色 */
	--col0s1:#4ea7d9;/* タイトルストライプ色1 */
	--col0s2:#8fe2eb;/* タイトルストライプ色2 */	
	--col1a:#58c;/* 大問の区切り色 */
	--col2a:#5be;/* 大問の枠線 */
	--colLqG1:#0248;/* 大問の背景グラデ色1 */
	--colLqG2:#f4ffff;/* 大問の背景グラデ色2 */
	--col3a:#8de;/* 小問の区切り線 */
	--col3b:#caf3f1;/* 小問の区切り線(下) */
	--col4a:#baeef8;/* タイトル文様線 */}

/* 本体(編集画面でボーダー表示) */
article.XPL1{position:relative;margin:1.5em 0 3em 0;
	border:3px dashed #f883;border-radius:0.5em 2em 0 0;
	border-bottom: solid 3px var(--col3a);padding-bottom: 0.3em;
	font-size:inherit;
	counter-reset:sub-num ans;/* 小問と解答のカウンターリセット */}
/* 編集画面での識別表示 */
article.XPL1:before{position:absolute;top:-1.3em;left:-0.5em;color:#f888;font-size:0.9em;font-weight:bold;content:"Atc:XPL1";}
/*下に濃いボーダーの追加(旧仕様)
article.XPL1:after{position:absolute;bottom:-11px;left:0px;width:100%;height:4px;content:"";background:var(--col1a);}*/
/* 下にストライプとコピーライト追加 */
article.XPL1:after {position: absolute;box-sizing: border-box;
    top: calc( 100% + 3px);left: -2px;width:calc(100% + 4px);height:fit-content;
    content: "(C)2022 そうちゃ式";letter-spacing: 0.05em;
    color: #fffd;font-size: 0.8em;
    font-weight: bold;line-height: 1;text-align: right;
    padding:0.4em 1em;
background:linear-gradient(to left,var(--col0g1) -30%,#0000 50%),repeating-linear-gradient(var(--col0s1),var(--col0s1) 3px,var(--col0s2) 3px,var(--col0s2) 5px);
    border-radius: 0 0 1em 3.5em;}

/*ブラウザ画面での表示(Cocoonの場合)*/
.entry-content article.XPL1{
	border-width:0 0 4px 0;border-left: solid 2px var(--colBL);
    border-right: solid 2px var(--colBR);}
.entry-content article.XPL1:before{display:none;}

/*本文*/
article.XPL1 p{font-size:inherit;/*margin:0.5em 2.5vw;*/}

/*** タイトル ***/
/*本体*/
article.XPL1 h4{position:relative;overflow:hidden;
	margin: 0;border-left: none;
	background:linear-gradient(to right,var(--col0g1) -30%,#0000 
 89%),repeating-linear-gradient(var(--col0s1),var(--col0s1) 3px,var(--col0s2) 3px,var(--col0s2) 5px);
	border-radius:1em 4em 0 0;
	padding:5px 0.3em 1px 0.3em;
	padding-left:2.6em;/*ラベル表示スペース*/
	font-size: 1.3em;/*color:var(--col0a);*/
	color:#fff;
    font-weight: bold;letter-spacing: 0.03em;line-height:1.3;
	/*line-height: 1;*//*z-index:1*/;}
article.XPL1 h4 .sub{font-size:0.9em;opacity:0.9;}
/*「例題」ラベル*/
article.XPL1 h4:before{position:absolute;top:0em;left:0;
	content:"例題";font-size:0.9em;background:#0004;color:#fff;
	padding: 0.3em 0.2em 0.1em 0.3em;border-radius: 0.5em 0 0 0;letter-spacing: 0.1em;}
/* ラベルのバリエーション(重畳クラスB) */
article.XPL1.B h4:before{content:"練習";}

/*** 大問テキスト(問題文だけ囲む) ***/
/*全体*/
article.XPL1 .Lq-txt{overflow:auto;/*図がはみ出た場合の対策*/
	position:relative;margin:0 0em 0.1em;
	/*border-top:solid 3px var(--col2a);*/
	border-bottom:solid 3px var(--col2a);
	padding:0.3em 1em 0.5em;
	line-height:1.6;font-size:1em;color:#555;
	background:linear-gradient(var(--degG),var(--colLqG1) 1.1em,var(--colLqG2) 1.15em,var(--colLqG2) calc(100% - 1.15em),#0000 calc(100% - 1.1em),#0000),repeating-linear-gradient(var(--col0s1),var(--col0s1) 3px,var(--col0s2) 3px,var(--col0s2) 5px);}
/*大問文章のみの場合(地の文での説明など)ボーダー無し*/
article.XPL1 .Lq-txt.only{border-bottom:none;}
/*大問文章の段落*/
article.XPL1 .Lq-txt p{margin:1em 0 0;color:#555;}
article.XPL1 .Lq-txt p:first-of-type{margin-top:0;}

/*** 小問テキスト(問題文だけ囲む) ***/
article.XPL1 .Sq-txt{overflow:auto;
	position:relative;margin:0.7em 0 0.2em 0em;
	border-top: solid 3px var(--col3a);
	/*border-bottom: solid 3px var(--col3b);*/
	padding-top: 0.5em;padding-left:2em;
	padding-bottom:0.3em;
	background:linear-gradient(var(--degG),var(--col0s2) 0.7em,var(--colLqG2) 0.75em,#fff);
	font-size:1.0em;line-height:1.6;}
article.XPL1 .Sq-txt p{margin:0;}
/*一番目には上部を変更*/
article.XPL1 .Sq-txt:nth-of-type(2){margin-top:0em;border-top:none;padding-top:0.4em;}

/*小問番号(自動割当)*/
article.XPL1 .Sq-txt:before{
	line-height:1;position:absolute;left:0.3em;top:0.7em;
	color:var(--col0a);font-weight:bold;
	font-size:1.05em;letter-spacing:-0.12em;
counter-increment:sub-num;content:"("counter(sub-num)")";}

/***「(解説)」などのラベルはh5で書く ***/
article.XPL1 h5{
	width:fit-content;margin-top:0.7em;
	border-radius: 0.5em 2em 0 0;
	color: #fffe;
	background:linear-gradient(to right,#ff8d62 -18%,#ff8 149%);
	padding:0.3em 1em 0 0.3em;line-height:1;z-index: 2;
    font-weight: bold;font-size:1em;letter-spacing: 0.15em;}
/*バリエ(ヒント)*/
article.XPL1 h5.B{transform-origin: left bottom;
	transform: scalex(0.9);letter-spacing:0;
	background:linear-gradient(to right,#d887f9 -40%,#ffd0eb);}

/*** 解答欄 ***/
/*本体*/
article.XPL1 .A-clm2{position:relative;/*bottom:0.2em;right:0;*/
	text-align:right;display:flex;width:fit-content;
	justify-content:flex-end;align-items:center;/*解答の縦位置揃え*/
	margin:0.2em calc(5vw - 0.6em) 0 auto;
	padding:0.4em 0.3em 0.1em 1.3em;
	border:solid 3px var(--col2a);border-radius:0.3em;
	font-size:min(calc(1.3em + 1vw),1.7em);font-weight:bold;
	line-height:1;color:#f007;background:#fff8;}
/*サブ文字*/
article.XPL1 .A-clm2 .sub{opacity:0.9;font-size:0.7em;}
/*答えのラベル*/
article.XPL1 .A-clm2:before{position:absolute;left:0.3em;top:0.5em;
	color:#555;font-size:0.5em;font-weight:normal;
	content:"(答)";}

/*解答コンテナの中では分数を小さめにする*/
article.XPL1 .A-clm2 .frac{display: inline-block;
	vertical-align: -0.6em;
	text-align: center;
	font-size: 0.8em;
	line-height: 1.2em;
	letter-spacing:-0.08em;}
article.XPL1 .A-clm2 .si,.L-qst3 .A-clm .bo
{display: block;padding: 0 0.2em;margin: 0;}
article.XPL1 .A-clm2 .si{line-height:1.0em;}
article.XPL1 .A-clm2 .bo{line-height:1.1em;
	border-top: solid 3px;}


/*********************************************
	問題解答セットL-qst3(20200929)
	小問ありなしを一つで作る	
	印刷版とWeb版を共通にする 
**********************************************/
.L-qst3{
/* 色設定(緑) */
--col0a:#0a7;/* タイトル色 */	
--col1a:#4a7;/* 大問の区切り色 */
--col2a:#4d9;/* 大問の枠線 */
--col3a:#9eb;/* 小問の区切り線 */
--col4a:#9fa;/* 文様線 */
	
/* 色設定(青) */
--col0b:#4e70f8;/* タイトル色 */	
--col1b:#58c;/* 大問の区切り色 */
--col2b:#5be;/* 大問の枠線 */
--col3b:#8de;/* 小問の区切り線 */
--col4b:#baeef8;/* 文様線 */
}

/*** 大問の枠(重畳クラスruiをつけると類題仕様) ***/
/** 大問全体枠 **/
.L-qst3	{position:relative;
	overflow:hidden;border-radius:0.5em 2.5em 0 0;
	counter-reset:sub-num ans;/* 小問と解答のカウンターリセット */
	margin:1.5em 0 2em;background:#fffa;
	/*border-top:solid 3px var(--col1a);*/
	border-bottom: solid 4px var(--col1a);
	font-size:1em;}
.L-qst3 p{margin:0;}
/*類題仕様(web版のみ色変更)*/
.L-qst3.rui{border-color:var(--col1b);}
/*印刷用は調整*/
.PrtQ3 .L-qst3,.PrtA3 .L-qst3
	{margin:1.5em 0 0;box-shadow:none;border-top:none;}

/*** 大問タイトル(番号カウンター無し) ***/
.L-qst3>.title{position:relative;/*left:-1px;top:1.5px;*/
	/*display:inline-block;height:calc(1em + 7px);*/
	/*background:#fff;*/
	background:linear-gradient(to right,#0c8080 -30%,#afdba800 
 89%),repeating-linear-gradient(#7bbc7b,#7bbc7b 3px,#afdba8 3px,#afdba8 5px);
	padding:5px 0.3em 1px 0.3em;
	padding-left:2.6em;/*ラベル表示スペース*/
	font-size: 1.3em;/*color:var(--col0a);*/
	color:#fff;
    font-weight: bold;letter-spacing: 0.03em;line-height:1.3;
	/*line-height: 1;*//*z-index:1*/;}
/*類題仕様*/
.L-qst3.rui>.title{/*color:var(--col0b);*/background:linear-gradient(to right,#0061c3 -30%, #8fe2eb00),repeating-linear-gradient(#4ea7d9,#4ea7d9 3px,#8fe2eb 3px,#8fe2eb 5px);}
/*印刷(問題)(解答)仕様*/
.PrtQ3 .L-qst3>.title,.PrtA3 .L-qst3>.title
	{/*left:2.3em;top:0.2em;*/
	background:none;
	color:var(--col0a);}
/*印刷(問題)(解答)の類題仕様*/
.PrtQ3 .L-qst3.rui>.title,.PrtA3 .L-qst3.rui>.title
	{color:var(--col0b);}
/** ラベル **/
.L-qst3>.title:before
	{position:absolute;top:0em;/*left:-2.5em;*/
	left:0;
	content:"例題";font-size:0.9em;background:#19615e;color:#fff;
	padding: 0.3em 0.2em 0.1em 0.3em;border-radius: 0.5em 0 0 0;letter-spacing: 0.1em;}
.L-qst3.rui>.title:before
	{background:#4866a9;content:"類題";}
/**コピーライト**/
.L-qst3>.title:after{display:none;/*モバイルがごちゃつくので表示停止中*/
	position:absolute;right:1.5em;top:0.4em;
	padding:0 0 0 0.2em;/*background:#fff;*/border-radius:0.5em;
	line-height:1.1;font-size:0.6em;letter-spacing:0.05em;
	/*color:var(--col2a);*/color:#fff;font-weight:bold;
	content:"そうちゃ式 図解プリント";width:6.5em;}
.L-qst3.rui>.title:after{/*color:var(--col2b);*/}/*類題仕様(色変更)*/
/*印刷用では非表示*/
.PrtQ3 .L-qst3>.tilte:after,.PrtA3 .L-qst3 .tilte:after{display:none;}
/*サブタイトル(spanで設定)*/
.L-qst3>.title .sub{margin-left:0.1em;opacity:0.9;font-size:0.8em;}

/*** 大問設問 ***/
.L-qst3 .Lq-txt{position:relative;margin:0.1em 0;
	border-top:solid 3px var(--col2a);
	border-bottom:solid 3px var(--col2a);
	padding:0.5em 1em 0.3em;background:#fff;
	line-height:1.6;font-size:1.1em;color:#555}
/*設問本文*/
.L-qst3 .Lq-txt p{margin:0;color:#555;}
/*類題(Web)仕様*/
.L-qst3.rui .Lq-txt{border-top:solid 3px var(--col2b);
	border-bottom:solid 3px var(--col2b);}
/*印刷仕様*/

/**大問ヒント(Lq-txtに入れる)**/
.L-qst3 .hnt{position:relative;margin:0.2em 0 0;line-height:1.6;
	padding-left:3em;padding-top:0em;}
/*ヒントのラベル*/
.L-qst3 .hnt:before{position:absolute;top:0.4em;left:-0.3em;
	color:#d887f9;content:"(ヒント)";
	padding:0;line-height: 1;font-weight: bold;
	letter-spacing:-0.05em;font-size:0.85em;
	transform:scale(0.9,1.1);}
/*印刷仕様*/
.PrtQ3 .L-qst3 .hnt:before{
	position:absolute;/*top:0.4em;left:0.4em;*/
	content:"(ヒント)";color:#333;}

/*** 大問のコンテンツ(小問S-qstを入れる) ***/
.L-qst3 .ctt{position:relative;}
/*類題ではflexにする*/
.L-qst3.rui .ctt{display:flex;flex-wrap:wrap;}

/*印刷用の問題のみ中央揃えにする*/
.PrtQ3 .L-qst3 .ctt{justify-content:center;}

/*** 小問全体(印刷時最大幅350程度) ***/
.L-qst3 .S-qst{position:relative;height:auto;
	margin:0.2em 0.2em 0.4em;padding:0 0.5em;
	width:max(350px,45%);/*モバイル表示の場合は固定幅*/
	padding-bottom:3.5em;/*下端に解答欄用スペース*/	
	border-bottom:solid 2px var(--col3a);}
.L-qst3.rui .S-qst{border-color:var(--col3b);}/*類題仕様*/
/*連続小問形式や小問無し用の幅広スタイル*/
.L-qst3 .S-qst.W{width:100%;}
/*解答欄無しのバリエ*/
.L-qst3 .S-qst.no-A{padding-bottom:0em;}

/*小問の印刷仕様(固定幅)*/
.PrtQ3 .L-qst3 .S-qst,
.PrtA3 .L-qst3 .S-qst{width:350px;margin:10px;}
.PrtQ3 .L-qst3 .S-qst:nth-of-type(2n):before,
.PrtA3 .L-qst3 .S-qst:nth-of-type(2n):before{left:-10px;}
/*幅広小問は印刷でも幅広のまま*/
.PrtQ3 .L-qst3 .S-qst.W,
.PrtA3 .L-qst3 .S-qst.W{width:calc(700px + 1.5em);}


/*** 小問設問と小問番号(自動割当) ***/
.L-qst3 .Sq-txt{position:relative;margin:0.5em 0 0.2em 0em;padding-left:2em;
	font-size:1.1em;line-height:1.6;}
.L-qst3 .Sq-txt p{margin:0;}
/*小問番号(自動割当)*/
.L-qst3 .Sq-txt:before{position:absolute;left:0em;top:-0em;
	color:var(--col0a);font-weight:bold;
	font-size:1.05em;letter-spacing:-0.12em;
counter-increment:sub-num;content:"("counter(sub-num)")";}
.L-qst3.rui .Sq-txt:before{color:var(--col0b)}/*類題仕様*/
/*小問ヒント*/
.L-qst3 .Sq-txt .hnt{padding-left:1.7em;}
.L-qst3 .Sq-txt .hnt:before{left:-1.95em;}


/*** 小問解説xpln(ruiをつけると類題仕様) ***/
.L-qst3 .xpln{position:relative;
	margin:0;line-height:1.6;
	padding-left:calc(0.3em + 1.5vw);
	padding-top:1.3em;}
.L-qst3 .xpln p{margin:0 0 0.3em 0;}
/*幅広小問(W)内部では二段組表示*/
.L-qst3 .S-qst.W .xpln{display:flex;flex-wrap:wrap;}
/*幅広小問では文字は制御用のdivに入れる*/
.L-qst3 .S-qst.W .xpln .txt{width:max(calc(100% - 320px - 3em),470px);margin:1em 0.5em 0;}
.L-qst3 .S-qst.W .xpln .txt:first-of-type{margin-top:0;}
.L-qst3 .S-qst.W .xpln .txt.W{width:100%;}
/*幅広の小問では図解ボックスの幅は最大45%におさえる*/
.L-qst3 .S-qst.W .xpln .Z-box1{max-width:max(45%,350px);}

/**類題仕様(web上でentry-content直下でのみベロ出し効果)**/
.entry-content>.L-qst3.rui .xpln
	{overflow:hidden;margin-bottom: 0.5em;
	padding-top:2.2em;max-height:2.5em;
	transition:all 2s ease-out 28s,
	padding-top 1s 29s;}
/*類題xplnのホバー時挙動(ベロ出し)*/
.entry-content>.L-qst3.rui .xpln:hover
	{color:inherit;
	max-height:40em;padding-top:1.5em;
	border-color:#ccf0;
	transition:all 1s ease-out 1s,padding-top 0s 1s;}

/*類題のガイド表示(隠し紙兼用)*/
.entry-content>.L-qst3.rui .xpln:after
	{color:#aad;background:#ffff;
	position:absolute;text-align:center;
	bottom:-0em;left:1em;
	height:calc(100% - 1em);width:calc(100% - 1em);
	border-top:dashed 2px #fd9;
	line-height:1;font-size: 0.8em;letter-spacing:0.2em;
	content:"↓ 開く ↓";
	transition:all 0.5s ease-out 30s,background 6s ease-out 23s;}
/*類題ベロ出しガイド表示のホバー時挙動*/
.entry-content>.L-qst3.rui .xpln:hover:after
	{background:#fff0;	border-color:#fd90;
	color:#aad0;letter-spacing:1em;
	transition:all 1s ease-out,border-color 0s 1s,
	color 0s 1s,background 0.5s ease-out 1s;}

/*印刷(問題)仕様(文字透明)*/
.PrtQ3 .L-qst3 .xpln{color:#fff0;padding-top:0;}
/*印刷(問題)仕様～隠し紙 */
.PrtQ3 .L-qst3 .xpln:after
	{position:absolute;top:0em;left:1em;
	width:100%;height:100%;content:"";
	background:#fff;background-image: url("https://so-cha-siki.com/wp-content/uploads/2020/10/背景画像2018版青い横罫.jpg");
	transition:all 2s ease-out 1s;}
/*ホバーして見えるのは保留*/
/*.PrtQ3 .L-qst3 .xpln:hover:after{opacity:0;transition:all 0.7s ease-out;cursor:pointer;}*/

/*解説のラベル*/
.L-qst3 .xpln:before{position:absolute;top:0.3em;left:0.5em;
	color:#fe9a66;content:"(解説)";
	padding:0;line-height: 1;
	background:#fff;z-index:2;
	font-weight: bold;letter-spacing: 0em;}
/*印刷(問題)では解説ラベル非表示*/
.PrtQ3 .L-qst3 .xpln:before{display:none;
	/*position:absolute;top:0;left:0.4em;
	content:"(解説)";background:#fff;color:#333;*/}

/*小問がない場合(L-qst直下の場合)の解説文・ヒントとラベルを右にずらす*/
/*.L-qst3>.xpln,.L-qst3>.hnt{padding-left:4em;}*/
.L-qst3>.xpln:before{left:0.2em;}
/*.L-qst3>.hnt:before{left:0.3em;}*/

	
/*解説中の答え線部(a:一般,b:分数)*/
.A-line4a,.A-line4b{position:relative;display:inline-block;line-height:1em;font-size:1.4em;font-weight:bold;border-bottom:solid 2px;margin-right: 0.1em;}
.A-line4b{font-size:1.2em;bottom:0.5em;}

/*** 解答コンテナ(簡易版) ***/
/*本体*/
.L-qst3 .A-clm2{position:absolute;bottom:0.2em;right:0;
	text-align:right;display:inline-flex;
	justify-content:flex-end;align-items:center;/*解答の縦位置揃え*/
	margin:0.2em 0 0;
	padding:0.4em 0.3em 0.1em 1.3em;
	border:solid 3px var(--col2a);border-radius:0.3em;
	font-size:min(calc(1.3em + 1vw),2em);font-weight:bold;
	line-height:1;color:#f007;background:#fff8;}
.L-qst3 .A-clm2:before{position:absolute;left:0.3em;top:0.5em;
	color:#555;font-size:0.5em;font-weight:normal;
	content:"(答)";}
/*幅広のS-qst内では少し左に寄せる*/
.L-qst3 .S-qst.W .A-clm2{right:2em;}
/*印刷用の幅広S-qst内での位置調整*/
.PrtQ3 .L-qst3 .S-qst.W .A-clm2,
.PrtA3 .L-qst3 .S-qst.W .A-clm2{right:0;}
/*類題仕様*/
.L-qst3.rui .A-clm2{border-color:var(--col2b)}
/*類題と印刷問題は解答文字無色*/
.entry-content>.L-qst3.rui .A-clm2,
.PrtQ3 .L-qst3 .A-clm2{color:#f000;transition:all 6s ease-out 23s;}
/*類題(web)ではホバーで見えるように*/
.entry-content>.L-qst3.rui .xpln:hover+.A-clm2
	{color:#f007;transition:all 0.5s ease-out 1s;cursor:pointer;}
/*解答欄なしの小問下では非表示*/
.L-qst3 .S-qst.no-A .A-clm2{display:none;}

/*解答コンテナの中では分数を小さめにする*/
.L-qst3 .A-clm2 .frac{display: inline-block;
	vertical-align: -0.6em;
	text-align: center;
	font-size: 0.8em;
	line-height: 1.2em;
	letter-spacing:-0.08em;}
.L-qst3 .A-clm2 .si,.L-qst3 .A-clm .bo
{display: block;padding: 0 0.2em;margin: 0;}
.L-qst3 .A-clm2 .si{line-height:1.0em;}
.L-qst3 .A-clm2 .bo{line-height:1.1em;
	border-top: solid 3px;}

/**小問間の解説まとめ(2020.11.1新設)**/
.L-qst3 .inter{padding:1em;border-bottom: solid 2px var(--col3a);}
.L-qst3 .inter p{margin:0 0 1em;}

/**********************************************
				記事内の追加要素 
 **********************************************/

/*----------------------------------------------
    記事内の追加要素>章目次(2022.8.20新設)
	easy table of contentsなどと同じスタイル
   (まとめ記事で章内が入り組んでいるときに) 
-----------------------------------------------*/
.cpt-idx1{position:relative;width: fit-content;min-width:40%;
    margin: 0 auto;
    border-radius: 10px 30px;
    padding: 0.6em 2em 1.8em;
    box-shadow: 1px 1px 5px 1px #bdb9ce;
    font-size: 0.9em;color: #428bcae8;
    background-color: #fff;}
.cpt-idx1::after{position:absolute;	bottom:0.5em;right:1.1em;
	font-size:0.8em;font-weight:bold;color:#6aec;
	content:"そうちゃ式";}
.cpt-idx1 p{font-size:0.95em;margin:0.3em 0;text-indent:-1.5em;padding-left:1.5em;}
.cpt-idx1 p::first-line{color:#428bca;font-size:1.1em;}
.cpt-idx1 .title{text-align:center;font-size:1.2em;line-height:1.3;color: #788}


/*-------------------------------------------
	記事内の追加要素>html図などの保管セクション(webでは表示しない)
---------------------------------------------*/
.entry-content>.hokan1{display:none;}

/*-------------------------------------------
	記事内の追加要素>保留内容(webでは表示しない)
---------------------------------------------*/
.onHold1{position:relative;
	margin-top:0em;padding-top:1.2em;
	border: dashed 3px #fa03;
    border-radius: 1em;}
.onHold1:before{position:absolute;top:0;left:2.5vw;color:#fa08;font-size:1.4em;font-weight:bold;content:"保留中";}
.entry-content .onHold1{color:transparent;height:0em;display:none;}


/*-------------------------------------------
	記事内の追加要素>
	jQueryを使ったスポイラー(プルダウン2)
テーマファイル「javascript.js」に以下の記述を追加
$(function () {
    $('.P-dwn2 .footer').on('click', function () {
    $(this).prevAll().not('.box-title').slideToggle(200);
    $(this).parent().toggleClass('open');
  });
});
-------------------------------------------*/
/*** 本体 ***/
.P-dwn2{position:relative;margin:0.05em 2.5vw 1em;z-index:0;
border:dashed #fc68 2px;}
/*web上でのみ上下ボーダー*/
.entry-content .P-dwn2{border-color:#a8f4 #0000;border-width:0 0 2px 0;border-style:dashed none dashed none;
border-radius: 0;}
/*open時のみ上ボーダー*/
.entry-content .P-dwn2.open{border-top:dashed 2px #a8f2;}
/*内部の段落表示を若干変更*/
.P-dwn2 p{margin-left:0;margin-right:0;}
.entry-content .P-dwn2 p:last-of-type{margin-bottom:0.5em;}
/*編集画面でのガイド表示*/
.P-dwn2:before{color:#fc6;background:#fff;
	position:absolute;top:-1em;left:0;content:"div P-dwn2";}
.entry-content .P-dwn2:before{display:none;}
/*初期表示時にはfooter以外の子要素全部非表示*/
.entry-content .P-dwn2 > *:not(.footer){display:none;}
/** 引き手(フッター) **/
/*本体(divのみ配置)*/
.P-dwn2 .footer{position:absolute;bottom:0;left:50%;padding:0;color:#a8f;margin:0 auto;cursor: pointer;white-space:nowrap;
 transform:translate(-50%,63%);z-index:1;}
/*実際の表示は疑似要素*/
.P-dwn2 .footer:before{position:absolute;left:50%;top:-0.2em;transform:translatex(-50%);
    line-height:1;font-size:0.8em;
background:#fff;content:"↓(開く)↓";}
/*open時の表示*/
.P-dwn2.open .footer:before{content:"↑(閉じる)↑";opacity:0.6;}

/*バリエーションAns(解答表示用)*/
.entry-content .P-dwn2.Ans{border-color:#fa37 #000;}
.entry-content .P-dwn2.Ans.open{border-top:dashed 2px #fa32;}
.P-dwn2.Ans .footer:before{color:#fa3;content:"↓(解答表示)↓";}
.P-dwn2.Ans.open .footer:before{content:"↑(解答隠す)↑";color:#fa39;}

/*-------------------------------------------
	記事内の追加要素>画像の修飾クラス 
---------------------------------------------*/
/********** 影を付ける(カードっぽく) ********/
.dsdw1{box-shadow:2px 2px 6px 2px #2346;
	margin-bottom: 8px;}

/*---------------------------
	記事内の追加要素>引用 
-----------------------------*/
.article blockquote{margin:0px 2vw;
	border-radius:8px 30px;
	padding:1em 4vw;
	box-shadow:3px 3px 8px 3px #0006 inset;}

.article blockquote p{margin:0.75em 0 0.75em;
	font-size:0.95em;}

/*---------------------------
	記事内の追加要素>表(標準コンテナに収納) 
-----------------------------*/
/***** 標準スタイルを角丸にしてある ****/
table{
	width:max(300px,80%);
	margin:0 auto 1em;
	background:#fff8;
	font-size: min(calc(0.8em + 0.4vw),1.1em);
	/*font-size: min(calc(0.8em + 0.8vw),1.2em);画面によるメリハリ大きめ*/
	line-height: 1.2 !important;/* 行間をつめる */
	text-align:center;
	overflow: hidden;/* ここから下3行で表全体の輪郭を表現 */
    border-radius: 8px 25px;
    box-shadow: 0px 0px 0px 2px;
	letter-spacing: 0.05em;}

td,th{padding:6px 4px;/* セルの余白を小さく */
	width:auto;}

/***********************************
マイスタイル(標準(D)テーブル)(2020.11.18ドラフトから!移植して改造)
コンテナに入れず配置可能
行の配色のバリエーション()
************************************/
/*全体*/
table.D-tbl1{background:#fff8;
	width:max(300px,80%);
	margin:0 auto 1em;
	background:#fffd;color: #103a;
	font-size: min(calc(0.8em + 0.4vw),1.1em);text-align:center;
	line-height: 1.2;letter-spacing: 0.05em;
	overflow: hidden;/* ここから下3行で表全体の輪郭を表現 */
    border-radius: 8px 25px;
    box-shadow: 0px 0px 0px 2px #767;}
/* 行設定 */
table.D-tbl1 tr{/*border:solid #bad;border-width:2px 0px;*/}
/* 奇数行設定 */
table.D-tbl1 tr:nth-of-type(2n+1){background:#e7efff;/*background:linear-gradient(90deg,#9bf7,#9bf2);*/}
/* 始行と終行の設定 */
table.D-tbl1 tr:first-of-type{
	background:#7b6b9a;color:#fffc;font-weight:bold;
	/*background:linear-gradient(90deg,#615181,#b9aad7);*/}
table.D-tbl1 tr:last-of-type{border-bottom:none;}
/*ハイライト行(trにクラス「Hi」を設定)*/
table.D-tbl1 tr.Hi{font-weight:bold;background:linear-gradient(90deg,#fe83,#fff);}
table.D-tbl1 tr.Hi:nth-of-type(2n+1){background:linear-gradient(90deg,#fca,#fe98);}
	
/*ヘッダ(th)とセル(td)*/
table.D-tbl1 td,table.D-tbl1 th{border:solid #bbd3;border-width:0 2px;}
/* 両端セルの設定 */
table.D-tbl1 td:first-of-type,table.D-tbl1 th:first-of-type{border-left:none;}
table.D-tbl1 td:last-of-type,table.D-tbl1 th:last-of-type{border-right:none;}
/* 始行内のセル */
table.D-tbl1 tr:first-of-type td,table.D-tbl1 tr:first-of-type th{/*border-color:#fff5;*/}

/***********************************
		スタイル無し
***********************************/
table.None{background:none;border:none;border-radius:0;box-shadow:none;}
.entry-content table.None tr,.entry-content table.None td,.entry-content table.None th{border:none;background:none;}

/*********************************************
 自作の汎用テーブル(2022復プリから移植改訂) 
*********************************************/
/******* 表v3(行を重ねるのでなく、列を並べている)(表全体ではなく1つ1つの欄の右と下のみボーダーを付けるタイプ) *******/
/*色*/
.Tbl3{--col1:#555;/*全体輪郭*/
--col2:#777;/*罫線(強)*/
--col3:#ccc;/*罫線(弱)*/
--col4:#fa6;/*増設部分*/}
/*全体*/
.Tbl3{display:flex;align-items:flex-end;
margin:0.5em auto;max-width:100%;color:#555;
	font-sizemin(calc(0.75rem + 0.75vw),1.2rem);}
/*列*/
.Tbl3>div{margin:0;padding:0;flex-grow:1;white-space:nowrap;}
.Tbl3>div:first-of-type{letter-spacing:0.1em;}
/*欄*/
.Tbl3>div>div{margin:0;height:1.4em;display:flex;justify-content:center;align-items:center;padding:0;border-right:solid 1px var(--col3);border-bottom:solid 1px var(--col3);background:#fff8;}
/*最上段の欄*/
.Tbl3>div>div:first-of-type{border-top-width:2px;border-top:solid 2px var(--col1);border-bottom-color:var(--col2);padding-top:0.3em;}
/*最下段の欄*/
.Tbl3>div>div:last-of-type{border-bottom-width:2px;border-bottom-color:var(--col1);padding-bottom:em }
/*最右列の欄*/
.Tbl3>div:last-of-type>div{border-right-width:2px;border-right-color:var(--col1);border-left-color:var(--col2);}
/*最左列の欄*/
.Tbl3>div:first-of-type>div{border-left:solid 2px var(--col1);border-right-color:var(--col2);}

/*度数分布表の重畳クラスdosu*/
.Tbl3.dosu{
--col4:#f53;/*増設部分(強)*/
--col5:#f94;/*増設部分(弱)*/}
/*増設部分を隠す再重畳クラスpre*/
.Tbl3.dosu.pre{margin-bottom:-1em;--col4:#0000;/*増設部分罫線(透明)*/
--col5:#0000;/*増設部分文字色*/}
.Tbl3.dosu.pre>div>div:last-of-type{background:#fff0;}

/*下から2段目*/
.Tbl3.dosu>div>div:nth-last-of-type(2){border-bottom:solid 2px var(--col1);}
/*右から3列目*/
.Tbl3.dosu>div:nth-last-of-type(3)>div{border-right:solid 2px var(--col1);}
/*増設部分*/
.Tbl3.dosu>div>div:last-of-type,
.Tbl3.dosu>div:last-of-type>div,
.Tbl3.dosu>div:nth-last-of-type(2)>div
{border-color:var(--col5);color:var(--col5);font-weight:bold;}
.Tbl3.dosu>div:last-of-type>div{border-color:var(--col4);border-width:3px;color:var(--col4);}

/*平均欄*/
.Tbl3.dosu>div:last-of-type>div:first-of-type{border-bottom-width:0px;}

/******************************
	つるかめ算用のテーブル
******************************/
/**** 全体 ***/
.TK-tbl1{display:flex;width:fit-content;margin:0 auto;
	font-size: min(calc(0.8em + 0.4vw),1.1em);padding:0;color:#0009;}
/** 直下右端の列 **/
.TK-tbl1 .L-wrap{width:fit-content;height:fit-content;}
/*最上段のスペーサー*/
.TK-tbl1 .space{height:3em;}
/*L-wrapの下半(単価の差)*/
.TK-tbl1 .L-wrap .btm{text-align:right;height:8em;
	color: #08fc;font-weight: bold;line-height:1;
	display: flex;align-items: center;
	padding: 0.3em 0.3em;}
/** 直下中央の列 **/
.TK-tbl1 .M-wrap{overflow:hidden;background:#fff;height:fit-content;border:solid #000;border-width:2px 0 2px 2px;border-radius: 0.3em 0 0 1em;}
/** 一般的な列 **/
.TK-tbl1 .clm{display: flex;flex-direction: column;
	position:relative;border-left:solid 2px #2042;}
/*囲み列*/
.TK-tbl1 .clm.bdr:before
	{position:absolute;top:-3px;left:-3px;width:100%;height:100%;
		content:"";border:solid 3px #f008;}
/*ヘッダーセル*/
.TK-tbl1 .hcel{display:flex;justify-content: center;align-items: center;text-align:center;height:3em;border-bottom: solid 2px #0008;line-height:1.2;padding:0.5em;}
/*一般的なセル*/
.TK-tbl1 .cel{text-align:center;border-top:solid 1px #0003;
	line-height:1.2;padding:0.5em;flex-grow:1;}
/*最上段のセル(何故か効かない…)*/
.TK-tbl1 .cel:first-of-type{border:none;}
/*最下段のセル*/
.TK-tbl1 .cel:last-of-type{border-top:solid 2px #0007;}
/** 直下左端の列 **/
.TK-tbl1 .R-wrap{}
/** R-wrapの上半 **/
.TK-tbl1 .R-wrap .top{overflow:hidden;background:#fff;display:flex;border:solid #000;border-width: 2px 2px 2px 0;border-radius: 0 1em 0.5em 0;}
/** R-wrapの下半(合計金額の差) **/
.TK-tbl1 .R-wrap .btm{text-align:center;
	/*border:solid #000;border-width:0 2px 2px 2px;*/
    color: #e6f;font-weight: bold;font-size: 1.05em;
	padding:0.5em;line-height:1;}


/*-------------------------------------
	記事内の追加要素>リスト 
--------------------------------------*/
ol,ul{text-align:left;}

/*-------------------------------------
	記事内の追加要素>番号無しリスト 
--------------------------------------*/
/**************** 黒丸白丸1 ******************/
ul.round1{/* 箇条書き全体(親) */
	list-style:none;
	background-color: #fff6;
	padding:0px;
	margin:0px;
}
ul.round1 li{/* リストアイテム(親) */
	text-indent: -1em;/* 一行目を逆に字下げする */
	font-size:1em;
	padding-left: 1em;/* その分全体を右へ */
	margin:0;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	line-height: 1.4em;}

ul.round1 li:before{/* 親の先頭の記号 */
	content:"●"}

ul.round1 li ul{/* 箇条書き全体(子以下) */
	list-style:none;
	padding-left: 1em;}

ul.round1 li ul li{/* リストアイテム(子以下) */
	font-size:0.9em;/*親より少し小さく*/
	padding: 0.2em 0px;
	border:none;}

ul.round1 li ul li:before{/*子以下の先頭記号*/
	content:"○"}

/**************** 黒丸白丸2 ******************/
ul.round2{/* 箇条書き全体(親) */
	list-style:none;
	background-color: #fff6;
	padding:0px;
	margin:0px;
}
ul.round2 li{/* リストアイテム(親) */
	/*text-indent: -1em;/* 一行目を逆に字下げする */
	position:relative;
	font-size:1em;
	padding-left: 1.1em;
	margin:0;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	line-height: 1.5em;}

ul.round2 li:before{/* 親の先頭の記号 */
	position:absolute;
	top:0.2em;
	left:0;
	content:"●"
}

ul.round2 li ul{/* 箇条書き全体(子以下) */
	list-style:none;
	margin-top:0.2em;
	padding-left: 1em;}

ul.round2 li ul li{/* リストアイテム(子以下) */
	position:relative;
	font-size:0.9em;/*親より少し小さく*/
	padding: 0.2em 0px;
	border:none;}

ul.round2 li ul li:before{/*子以下の先頭記号*/
	position:absolute;
	top:0.2em;
	left:-1.1em;
	content:"○"}


/***** 黒丸白丸の追加クラスspr(区切り線) *****/
ul.round2.spr li{/* リストアイテム(親) */
	border-top: dashed 2px #aed8ff;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	line-height: 1.4em;}

ul.round2.spr li ul{/* 箇条書き全体(子以下) */
	margin-top:0;}

ul.round2.spr li:first-child{/* 最初の親だけ区切り線無し */
	border-top:none;}

ul.round2.spr li ul li{/* 子の区切り線は薄く */
	border-color:#d0e6fb;}

/*-------------------------------------
	記事内の追加要素>番号付きリスト 
--------------------------------------*/

/*********カッコつき数字(→kko2に切り替え)**********/
ol.kko1{padding-left:0px; /* 何故か左パディングが30になるのでクリア */
	margin:0;}

ol.kko1 li{
	text-indent: -1.9em;/* 一行目を逆に字下げする */
	padding-left: 2em;/* その分全体を右へ */
	margin:0 0 0.2em;
	margin-bottom: 0.2em;/* 項目間を少し空ける */
	list-style-type:none;
	list-style-position:inside;
	counter-increment: cnt;
	font-size:1em;}

ol.kko1 li:before{display: marker;
	content: "(" counter(cnt) ") ";}

/***** カッコつき数字2(小問に使用。インデントを無くした) ******/
ol.kko2{
	padding-left:0px; /* 何故か左パディングが30になるのでクリア */
	margin:0;}

ol.kko2 li{
	position:relative;
	/*text-indent: -1.9em;/* 一行目を逆に字下げする */
	padding-left: 1.7em;
	margin:0 0 0.2em;
	margin-bottom: 0.2em;/* 項目間を少し空ける */
	list-style-type:none;
	counter-increment: cnt;
	font-size:1em;}

ol.kko2 li:before{
	position:absolute;
	/*counter-increment: number;*/
	content: "(" counter(cnt) ") ";
	top:0;
	left:0;
}


/***********丸数字1(基本形)************/
/* リスト全体 */
ol.round1{counter-reset:number; 
   	list-style-type: none; 
   	padding-left:0;
   	margin:0;
	background-color: #fff8}

/* リストアイテム */
ol.round1 li {position: relative;
   	margin:0px;
   	padding-left: 1.5em;
	font-size:1em;}

/* 丸数字 */
ol.round1 li:before {counter-increment: number;
   content: counter(number);
   background-color: #5d9be8; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 0.8em;
   border-radius: 50%;
   left: 0;
   top:0.3em;
   width: 1.5em;
   height: 1.5em;
   line-height: 1.5em;
   text-align: center;}

/* 追加クラス「spr(separator)」で区切り線 */
ol.round1.spr li{padding-bottom:2px;border-top:dashed 1.5px #9cd0ff;}
ol.round1.spr li:first-child{/* 最初のアイテムだけ区切り線無し */
	border-top:none;}

/**************丸数字タイムライン(縦断する矢印)***************/
ol.roundT1 {/* リスト全体 */
    position: relative;
    counter-reset: number;
    list-style-type: none;
	margin-top: -0.1em;
    padding-left: 0.5em;
	padding-bottom:0.5em;
    margin: 0;
    background-color: #fff8;
    z-index: 0;}

ol.roundT1:before {/* 縦断ライン */
    position: absolute;
    content: "";
    top: 0.5em;
    left: calc(1em - 3px);
    width: 5px;
	height: calc(100% - 0.5em);
    background: #5d9be8;
    z-index: 1;}

ol.roundT1 li {/* リストアイテム */
    position: relative;
    margin:.5em 0em 0em;
    padding-left: 1.3em;
    padding-bottom: 2px;
    padding-top: 2px;
    font-size: 1em;
    line-height:1.4em;}

ol.roundT1 li:first-child {/* 最初のアイテムには上ボーダー無し */
	border-top: none;}

ol.roundT1 li:before {/* 丸数字 */
    counter-increment: number;
    content: counter(number);
    color: #5d9be8;
    background-color: #fff;
    position: absolute;
    font-weight: bold;
    font-size: 0.8em;
    border-radius: 50%;
    left: 0;
	top: calc(.3em + 0px);
    width: 1.2em;
    height: 1.2em;
    line-height: calc(1.2em + 2px);
    text-align: center;
    z-index: 1;
    box-shadow: 0px 0px 0px calc(2.5px + 0.04vw);
    font-family: sans-serif;}

ol.roundT1 li:last-child:after {/* 最後のアイテムのみ下向き矢印 */
	position: absolute;
    content: "";
	bottom: calc(-0.5em + 2px);
    left: calc(0em - 0.5px);
    width: 1em;
    height: 1em;
    background-color: #fff;
    transform: scale(0.8,0.8) rotate(45deg);
    box-shadow: 4px 4px 0 0 #5d9be8;
    z-index: 0;
}

/**************丸数字タイムライン(縦断する矢印)2実験中***************/
ol.roundT2 {/* リスト全体 */
    position: relative;
    counter-reset: number;
    list-style-type: none;
	margin-top: -0.1em;
    padding-left: 0;
	padding-bottom:0.5em;
    margin: 0;
    background-color: #fff8;
    z-index: 0;}

ol.roundT2:before {/* 縦断ライン */
    position: absolute;
    content: "";
    top: 0.5em;
    left: calc(0em + 3.5px);
    width: 5px;
	height: calc(100% - 0.5em);
    background: #5d9be8;
    z-index: 1;}

ol.roundT2 li {/* リストアイテム */
    position: relative;
    margin: 0;
    padding-left: 1.2em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    font-size: 0.8em;
	line-height:1.4em;}

/* 最初の行のみ大きい太字 */
ol.roundT2 li:first-line {font-size:1.2em;
	font-weight: bold;}

/* 最初のアイテムには上ボーダー無し */
ol.roundT2 li:first-child {	border-top: none;}

/* 丸数字 */
ol.roundT2 li:before {
    counter-increment: number;
    content: counter(number);
    color: #5d9be8;
    background-color: #fff;
    position: absolute;
	/*font-weight: bold;*/
    font-size: 0.9em;
    border-radius: 50%;
    left: -4px;
    top: calc(0.5em + 0px);
    width: 1.4em;
    height: 1.4em;
    line-height: calc(1.5em + 0px);
    text-align: center;
    z-index: 1;
    box-shadow: 0px 0px 0px calc(2.5px + 0.04vw);
    font-family: sans-serif;}

ol.roundT2 li:last-child:after {/* 最後のアイテムのみ下向き矢印 */
	position: absolute;
    content: "";
	bottom: calc(-0.5em + 2px);
    left: calc(0em - 0.5px);
    width: 1em;
    height: 1em;
    background-color: #fff;
    transform: scale(0.8,0.8) rotate(45deg);
    box-shadow: 4px 4px 0 0 #5d9be8;
    z-index: 0;
}

/******丸数字その6(矢印状マークのバリエ)実験中*****/
ol.c-num6{
   	counter-reset:number; 
   	list-style-type: none; 
   	padding-left:0;
   	margin:0;
	background-color: #fff8
}
ol.c-num6 li { 
   	position: relative;
   	margin:0;
   	padding-left: 1.5em;
	padding-bottom:2px;
	padding-top:2px;
	font-size:1em;
	border-top:dotted 3px #b4dcff;/* アイテムの上に区切り線 */
}

ol.c-num6 li:first-child{/* 最初のアイテムだけ区切り線無し */
	border-top:none;
}

ol.c-num6 li:before {/* 丸数字 */
   counter-increment: number;
   content: counter(number);
   background-color: #5d9be8; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 0.8em;
   border-radius: 50%;
   left: 0;
   top:calc(.3em + 2px);
   width: 1.5em;
   height: 1.5em;
   line-height: 1.5em;
   text-align: center;
	z-index:1;
}

ol.c-num6 li:after {/* 矢印状のアイテム */
	position: absolute;
    	content: "";
    	top: calc(-1em + 1px);
    	left: .3em;
    	width: .5em;
    	height: .5em;
    	background-color: #fff;
    	transform: scale(1.3,0.95) rotate(45deg);
    	box-shadow: 2px 2px 0 0 #b3d7f9, 3px 3px 0 0 #fff, 5px 5px 0 0 #93c7f7, 6px 6px 0 0 #fff, 8px 8px 0 0 #82c1fb;
    	z-index: 0;
}

ol.c-num6 li:first-child:after{/* 最初のアイテムのみ矢印状のアイテム無し */
	display:none;
	position: absolute;
    content: "";
    top: calc(-1em + 1px);
    left: .3em;
    width: .5em;
    height: .5em;
    background-color: #fff;
    transform: scale(1.3,0.95) rotate(45deg);
    box-shadow: 2px 2px 0 0 #b3d7f9, 3px 3px 0 0 #fff, 5px 5px 0 0 #93c7f7, 6px 6px 0 0 #fff, 8px 8px 0 0 #82c1fb;
    z-index: 0;
}

/*-------------------------------------
	記事内の追加要素>スポイラー 
--------------------------------------*/
/****************************************
スポイラー代替Tongue-out2ベロ出し表示(ボーダータイプ)
ブラウザでのみ(Cocoonではentry-content下)動作
*****************************************/
.entry-content .T-out2
	{color:#fff0;position:relative;overflow:hidden;
	margin-top:-1em;margin-bottom:0.5em;
	margin-left:2em;margin-right:2em;
	padding-top:0.9em;
	border-top:dashed 2px;border-color:#ccf;
	max-height:1em;z-index:1;
	/*戻るタイミング*/
	transition:all 3s ease-out 17s,
	padding-top 0.5s 20s,border-color 0.5s 20s,
	margin-left 0.5s 20s,margin-right 0.5s 20s;}
.entry-content .T-out2 p{margin:0.1em 0 1em;}

/*ガイド表示*/
.entry-content .T-out2:after{
	color:#aad;background:#fff;
	position:absolute;bottom:-0em;
	left:50%;transform:translateX(-50%);
	line-height:1;font-size: 0.8em;letter-spacing:0.2em;
	content:"↓ 開く ↓";
	/*戻るタイミング*/
	transition:all 0.5s ease-out 20s;/*z-index:2;*/}

/*ホバー時挙動*/
.entry-content .T-out2:hover
	{color:inherit;
	max-height:30em;padding-top:0;
	margin-left:2.5vw;margin-right:2.5vw;/*通常pに合わせる*/
	border-color:#ccf0;
	/*変化のタイミング*/
	transition:all 1.5s ease-out 1s,padding-top 0s 1s,margin-left 1s,margin-right 1s;}
/*L-qst1内では横幅一杯
.entry-content>.L-qst1 .T-out2:hover
	{margin-left:0;margin-right:0;}*/
/*ガイド表示が戻るタイミング*/
.entry-content .T-out2:hover:after{
	letter-spacing:1em;opacity:0;
	/*変化のタイミング*/
	transition:all 1s ease-out,opacity 0.5s ease-out 1s;}


/*****************************************************
	バージョンC→3に改名(本来のスポイラーに回帰)
	3a→標準タイプ、3b→図解タブ直後、3c→ヒントタブ直後
******************************************************/
/* 全体 */
.spl3a,
.spl3b,
.spl3c{	position: relative;
	margin:-2.5em 2.5vw 1.5em;/*上のテキストにピッタリ*/
	/*color:transparent;一時的に表示中*/
	}
/*bcタイプ修正*/
.spl3b,
.spl3c{	margin-top: -1.7em;margin-bottom: 0.5em;}

/* チェックボックス(非表示) */
.spl3a input,
.spl3b input,
.spl3c input{
	position: absolute;
	z-index: -1;
	opacity: 0;/* 透明にしている */}

/* クリックするラベル */
.spl3a label,
.spl3b label,
.spl3c label{position: absolute;
	display:inline-block;
	bottom:-1.1em;left:calc(50% - 1.3em);
	padding:0.3em 1em 0.2em;
	border-radius:0 0 2em 2em;
	background:#cdf;
	font-weight: bold;line-height: 1em;
	font-size:0.6em;
	cursor: pointer;
	transition:0.6s;
	transform-origin:center 0.4em;
	transform: scale(1.4,1);
	text-shadow: -1px -1px 1px #0002;
	z-index:1;}
/*bcタイプ修正*/
.spl3b label{background:#fd8;}
.spl3c label{background:#fcf;}

/* ラベル(クリック状態) */
.spl3a input:checked ~ label,
.spl3b input:checked ~ label,
.spl3c input:checked ~ label{
	background:#fff;
	padding:0.2em;
	color:#cdf;
	transform:scale(1.4,-1);
	text-shadow:none;
	opacity:0.7;
	transition:0.1s;}
/*bcタイプ修正*/
.spl3b input:checked ~ label{color:#fd8;}
.spl3c input:checked ~ label{color:#fcf;}

/* 何故か挿入される空の段落対策 */
.spl3a p,
.spl3b p,
.spl3c p{margin:0;}

/* 内容(通常:隠れている状態) */
.spl3a .content,
.spl3b .content,
.spl3c .content{
	/*overflow: hidden;
	color: transparent;
	max-height:0;一時的に表示中*/
	margin-top:-0.3em;
	padding:0;
	border-bottom:solid 4px #def;
	transition:0.2s;
	}
/*bcタイプ修正*/
.spl3b .content{border-bottom:solid 4px #feb;}
.spl3c .content{border-bottom:solid 4px #fdf;}

/* 内容の段落。最後のみ下マージン無し */
.spl3a .content p,
.spl3b .content p,
.spl3c .content p{margin:0.1em 0 1em;padding:0;}
.spl3a .content p:last-child,
.spl3b .content p:last-child,
.spl3c .content p:last-child{margin-bottom:0em;}

/* 内容(チェックされた状態) */
.spl3a input:checked ~ .content,
.spl3b input:checked ~ .content,
.spl3c input:checked ~ .content{
	max-height: 80em;
	padding:0em 0em 0.5em;
	border-bottom:dashed 2px #def5;
	color:#333;
	transition:border-bottom 0.1s ease,color 1.5s;}
/*bcタイプ修正*/
.spl3b input:checked ~ .content{border-bottom:dashed 2px #feb5;}
.spl3c input:checked ~ .content{border-bottom:dashed 2px #fdf5;}


/*-------------------------------------
	記事内の追加要素>区切り線(水平線) 
--------------------------------------*/

/*>解答の終端(2018/2以降廃止の方向)*/
/* 採用版 */
.article hr.AE00{
	position:relative;
	border:none;/* 本来の区切り線は非表示 */
	overflow: visible;/* 既定値?を一応 */
	margin-top:10px;
	margin-bottom:30px;}

.article hr.AE00::before{/* 角の線(グラデ無し) */
	position:absolute;
	content:"";
	border-bottom-right-radius: 17px;
	border-bottom:solid 2px var(--AT-col-1);
	border-right:solid 2px var(--AT-col-1);
	bottom: 0;
	right: 0;
	width:25px;
	height:50px;}

.article hr.AE00::after{/* 下の線(グラデ) */
	position:absolute;
	content:"";
	bottom:0px;
	right:20px;
	height:2px;
	width:40vw;
	background:linear-gradient(to left,var(--AT-col-1) 10%,#fff0);}

/*********************************************************
					文字修飾
**********************************************************/
/*----------------------------------------
	文字修飾 > 分数表現
------------------------------------------*/
/******************* 採用版(Webその2をベースに) **********************/
.frac{display: inline-block;
	vertical-align: -0.6em;
	text-align: center;
	font-size: 1em;
	line-height: 1.2em;
	letter-spacing:-0.08em;}

.frac .si,.frac .bo{display: block;color:inherit;
	padding: 0 0.3em;margin: 0px 0.2em 0px 0.05em;
	white-space:nowrap;}

.frac .si{line-height:1.0em;}
.frac .bo{line-height:1.2em;
	border-top:solid 0.075em;}/* 色を指定しないと親と同じになる */
/*.N-box1 .bo,.D-box1 .bo{border-color:#6597c5;}ボックス内での色指定*/


/*----------------------------------------
	文字修飾 > 筆算用の上線と下線
------------------------------------------*/
/*ボーダー下線
 *親のボックスによって仕様が変わる
(因数分解・すだれ算用)*/
/* C-box2(加減乗算用)内 */
.C-box2 .BB-line{display:inline-block;
	border-bottom: 1.5px solid;
	border-color:inherit;
	line-height:1em;
	margin-bottom:0.1em;padding-bottom:0.1em;}

/* C-box5(因数分解用)内 */
.C-box5 .BB-line{display:inline-block;
	border-bottom: 1.5px solid;
	border-color:inherit;
	line-height:1em;
	padding-top:0.4em;}

/* 旧仕様(因数分解・すだれ算用)*/
.BB-line {
	border-bottom: 1px solid #000;
	border-color:inherit;
	line-height:2em;
}

/***************************************
 * ボーダー上線(割り算C-box4用)2020.3改
***************************************/
.C-box4 .TB-line {
	display:inline-block;
	border-top: 1.5px solid;
	border-color:inherit;
	padding-top:3px;}

/* 旧仕様用 */
.TB-line {
	display:inline-block;
	border-top: 1.5px solid;
	border-color:inherit;
	padding-top:3px;}


/*----------------------------------------
	文字修飾 > 小数第一位の数に小数点をつける
------------------------------------------*/
/******** 通常タイプ *********/
.dcm1a{position:relative;
	/*padding-left:0.05em;*/}

.dcm1a::before{
	position: absolute;
	content:".";
	font-weight:normal;
	color:#69c;
	bottom: 0.15em;
	left: -0.24em;}

/********* 色強調タイプ(赤) *********/
.dcm1b{position:relative;
	/*padding-left:0.05em;*/}

.dcm1b::before{position: absolute;
	content:".";
	/*font-weight:bold;*/
	color:#f69;
	bottom: 0.15em;
	left: -0.24em;}

/********* 色強調タイプ(青) *********/
.dcm1c{position:relative;
	/*padding-left:0.05em;*/}

.dcm1c::before{position: absolute;
	content:".";
	font-weight:bold;
	color:#4bf;
	bottom: 0.15em;
	left: -0.24em;}

/******** 上昇タイプ *********/
.dcm1u{position:relative;
	/*padding-left:0.05em;*/}

.dcm1u::before{position: absolute;
	content:".";
	font-weight:bold;
	color:#f56;
	bottom: 0.15em;
	left: -0.24em;
	z-index:2;}

/* 上昇効果線 */
.dcm1u::after{position: absolute;
	content:"↖";
	bottom:-1.35em;left: -0.75em;
	color: #ff79aa;
    font-size: 0.6em;
    text-shadow: 0px 1px 0px white, 0px 3px 0px white,
		-1px 0px 0px white, 1px 0px 0px white;
    transform: scale(1,1.6) rotate(45deg);
    font-weight: bold;
}

/******** 下降タイプ *********/
.dcm1d{position:relative;
	/*padding-left:0.05em;*/}

.dcm1d::before{position: absolute;
	content:".";
	font-weight:bold;
	color:#5af;
	bottom: 0.15em;
	left: -0.24em;
	z-index:2;}

/* 下降効果線 */
.dcm1d::after{position: absolute;
	content:"";
	background: linear-gradient(180deg,#ffff,#8cf);
	width:2px;height:4em;
	bottom:0.65em;left: calc(-0.24em + 2px);
	border-right: solid 1px white;
    border-left: solid 1px white;}

/* 下降効果線
.dcm1d::after{position: absolute;
	content:"→→→";
	letter-spacing:-0.2em;
	bottom:-1.2em;left: -0.75em;
	color: #ff79aa;
    font-size: 0.6em;
	text-shadow: 1px 0px 0px white, 3px 0px 0px white,
		0px -1px 0px white, 0px 1px 0px white;
	transform: scale(1,1.2) rotate(90deg);
    font-weight: bold;
}*/

/* 横の移動効果(のみ)…他のタイプをspanで挟んで使用 */
.dcm1r{position:relative;
	/*padding-left:0.05em;*/}

.dcm1r::before{position: absolute;
	content:"⤴";
	font-weight:bold;
	font-size:0.8em;
	transform:scale(0.8,0.7) rotate(45deg);
	color:#fbd;
	bottom: -0.35em;
	left: -0.24em;
	z-index:2;}

/*----------------------------------------
	文字修飾 > 小数第一位の数に小数点をつける(ver2)
------------------------------------------*/
/******** 全タイプ共通設定 *********/
.dcm2a,.dcm2aR,.dcm2aL,
.dcm2b,.dcm2bR,.dcm2bL,.dcm2bU,
.dcm2c,.dcm2cR,.dcm2cL,.dcm2cD,
.dcm2nR,.dcm2nL
	{position:relative;
	/*padding-left:0.05em;*/}

/*********** 通常タイプの点 ***************/
.dcm2a::before,
.dcm2aR::before,
.dcm2aL::before{
	position: absolute;
	content:".";
	font-weight:normal;
	color:#7d7c79;
	bottom: 0.15em;
	left: -0.24em;}

/********* 色強調タイプ(赤)の点 *********/
.dcm2b::before,
.dcm2bR::before,
.dcm2bL::before,
.dcm2bU::before{position: absolute;
	content:".";
	font-weight:bold;
	color:#f69;
	bottom: 0.15em;
	left: -0.24em;}

/********* 色強調タイプ(青)の点 *********/
.dcm2c::before,
.dcm2cR::before,
.dcm2cL::before,
.dcm2cD::before{position: absolute;
	content:".";
	font-weight:bold;
	color:#4bf;
	bottom: 0.15em;
	left: -0.24em;}

/************** 右への矢印(2021.9.7改訂) ****************/
.dcm2aR::after,
.dcm2bR::after,
.dcm2cR::after,
.dcm2nR::after{position: absolute;
	content: url(https://zky-jukesan.com/wp-content/uploads/2021/09/arw4Rx150.png);
	bottom: -5px;
	left: -3px;
	z-index:2;}

/*********** 左への矢印(2021.9.7改訂) **************/
.dcm2aL::after,
.dcm2bL::after,
.dcm2cL::after,
.dcm2nL::after{position: absolute;
	content:url(https://zky-jukesan.com/wp-content/uploads/2021/09/arw4Lx150.png);
	bottom: -5px;
	left: -3px;
	z-index:2;}

/* 上昇効果線(2021.9.7改訂) */
.dcm2bU::after{position: absolute;
	content: url(https://zky-jukesan.com/wp-content/uploads/2021/09/arwUx142.png);
	bottom: calc(-0.8em - 1px);left: calc(-0.27em - 1px);}

/* 下降効果線 */
.dcm2cD::after{position: absolute;
	content:"";
	background: linear-gradient(180deg,#ffff,#8cf);
	width:2px;height:4em;
	bottom:0.65em;left: calc(-0.24em + 2px);
	border-right: solid 1px white;
    border-left: solid 1px white;}


/*----------------------------------------
	文字修飾 > 丸数字(2021.3.24改良)
------------------------------------------*/
/**共通**/
.msj2-1,.msj2-2,.msj2-3{display:inline-block;
	border-radius: 50%;border: solid 1px;
	color:inherit;background-color:white;text-align:center;}

/* 1ケタ用 */
.msj2-1{
	vertical-align:0.05em;margin:0 0.1em;
	font-size:0.9em;line-height:1;
	padding:0.25em 0.25em 0 0.25em;
	transform:scalex(1.1);}

/* 2ケタ用 */
.msj2-2{
	vertical-align:0.15em;margin:0 0.1em;
	font-size:0.75em;line-height:1.1;
	padding:0.2em 0.25em 0.1em 0.2em;
	letter-spacing: -0.05em;transform:scaley(1.2);}

/* 3ケタ用 */
.msj2-3{vertical-align:0.2em;margin:0 0.1em;
	font-size:0.7em;line-height:1.2em;
	padding:0.3em 0.15em 0.05em 0.1em;
	letter-spacing: -0.05em;transform:scaley(1.3);}

/* 分数(1ケタ用) */
.msj2f-1{
	position:relative;
	display:inline-block;
	font-size:0.9em;
	width:2.0em;
	height:2.2em;
	text-align:center;
	border-radius: 50%;
	border: solid 1px;
	background-color:white;
	padding-top:0.05em;
	transform:scaley(0.9);}

/* 分数(2ケタ・3ケタ用) */
.msj2f-2{
	position:relative;
	display:inline-block;
	font-size:0.8em;
	width:2.4em;
	height:2.5em;
	text-align:center;
	border-radius: 50%;
	border: solid 1px;
	background-color:white;
	padding-top:0.15em;
	transform:scaley(0.95);}

/*----------------------------------------
	文字修飾 > 文字を四角数字にする(2021.2.13改訂)
------------------------------------------*/
/*** 共通仕様 ***/
.rected-1,.rected-2,.rected-3{text-indent:0;
	display:inline-block;margin: 0 0.1em 0 0.15em;
	border:solid 1px;
	background:#fff;line-height:1;}

/* 1ケタ */
.rected-1{font-size:0.9em;padding:0.2em 0.3em 0.05em 0.25em;}

/* 2ケタ */
.rected-2{vertical-align:middle;
    font-size: 0.8em;
    padding: 0.3em 0.2em 0.2em;
    letter-spacing: -0.05em;
    transform: scaley(1.2);}

/* 3ケタ */
.rected-3{vertical-align:middle;
    font-size: 0.75em;
    padding: 0.3em 0.2em 0.2em;
    letter-spacing: -0.05em;
    transform: scaley(1.2);}

/*------------------------------------------------
	文字修飾 > 循環小数の記号(spanで囲む)
--------------------------------------------------*/
/*採用版(候補2ベース)*/
.junkan0{position:relative;text-indent:0;}
.junkan0::before{
	position: absolute;
	content:".";
	font-weight:bold;
	top: -1.05em;
	left: 0.15em;
}


/*------------------------------------------------
	文字修飾 > 五角形数字(2022,4,10復プリCSSから移植)
--------------------------------------------------*/
/** 共通 **/
.penta-1,.penta-2,.penta-3{text-indent:0;position:relative;
	display:inline-block;margin: 0 0.3em;line-height:1;}
.penta-1:before,.penta-2:before,.penta-3:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);
	content:"";background-image:url("https://zky-jukesan.com/wp-content/uploads/2022/04/penta000.png");background-size:contain;background-position:center;background-repeat:no-repeat;
	filter:contrast(3);}
/* 1ケタ */
.penta-1{font-size:0.95em;padding:0.3em 0.3em 0.1em;}
.penta-1:before{width:140%;height:140%;}
/*2ケタ*/
.penta-2{line-height:1;font-size:0.85em;letter-spacing:-0.1em;
	padding:0.4em 0.3em 0.1em 0.2em;transform:scaley(1.25);}
.penta-2:before{width:130%;height:125%;background-size: 100% 100%;}

/** 逆五角形 **/
.penta-1.inv:before,.penta-2.inv:before,.penta-3.inv:before{transform:translate(-48%,-44%) rotate(180deg);}


/*------------------------------------------------
	文字修飾 > 六角形数字(2023.5.6作成)
--------------------------------------------------*/
/** 共通 **/
.hexa-1,.hexa-2,.hexa-3{text-indent:0;position:relative;
	display:inline-block;margin: 0 0.3em;line-height:1;}
.hexa-1:before,.hexa-2:before,.hexa-3:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	content:"";background-image:url("https://zky-jukesan.com/wp-content/uploads/2023/05/hex001.png");background-size:contain;background-position:center;background-repeat:no-repeat;
	filter:contrast(3);}
/* 1ケタ */
.hexa-1{font-size:0.95em;padding:0.3em 0.3em 0.1em;}
.hexa-1:before{width:140%;height:140%;}
/*2ケタ*/
.hexa-2{line-height:1;font-size:0.85em;letter-spacing:-0.1em;
	padding:0.4em 0.3em 0.1em 0.2em;transform:scaley(1.25);}
.hexa-2:before{width:130%;height:125%;background-size: 100% 100%;}

/** 横六角形 **/
.hexa-1.side:before,.hexa-2.side:before,.hexa-3.side:before{transform:translate(-51%,-47%) rotate(90deg);}
.hexa-1.side:before{width:140%;height:140%;}
.hexa-2.side:before{width:100%;height:155%;background-size: 100% 100%;}


/*-------------------------------------------------
	文字修飾 > (解答)タイトル
-------------------------------------------------*/
/** 旧版(候補からコピペ)(12/22 AT75ベース) AT77に順次変更する**/
.article .AT70{
	position:relative;
    display: inline-block;
    color: var(--AT-col-1);
    background: white;
    font-size: 1.1em;
    font-weight: 700;
    padding:11px 22px 5px 11px;
    border-radius:15px 35px 0px 0px;
    border: solid 2px var(--AT-col-2);
    /*box-shadow:0 0 0 4px #fff,0 0 0 6px var(--AT-col-1);*/
    margin:9px 0 9px 2px;
    letter-spacing: .1em;
    line-height: .8em;}

.article .AT70::before{/* 直下に横グラデーションの線 */
	position: absolute;
	bottom:-2px;
	left:0px;
	content: "";
	display: block;
	height: 3px;
	width:30em;
	max-width:70vw;
	background: linear-gradient(to right, var(--AT-col-1) 50%, rgba(255, 255, 255, 0));}

.article .AT70::after{/* 横に縦グラデーションの線 */
	position: absolute;
	bottom:0px;
	left:0px;
	content: "";
	display: block;
	height: 2px;
	width:50px;
	background: linear-gradient(to right, var(--AT-col-1) 50%, rgba(255, 255, 255, 0));
	transform:rotate(90deg);
	transform-origin:0px 0px;}

/***** 新板候補7(タブ気味の黒はんこ。ヒントにも使用(b))これに統一する *****/
/* 共通設定 */
.article .AT77a,.article .AT77b {
	display: inline-block;
	min-width: 4em;
	color: #fff;
	/*font-size: 19px;*/
	font-size: 1.1em;
	font-weight: 700;
	padding:8px 13px 5px 10px;
	border-radius:11px 22px 3px 3px;
	border-left: none;
	margin:0px 0px 0px 13px;
	letter-spacing: .1em;
	line-height: .8em;
	/*vertical-align:bottom;*//* スポイラーと接してしまうので保留 */}

/* 解答用の色 */
.article .AT77a{ background:linear-gradient(to right,var(--AT-col-2) -18%,#ff8 149%);}

/* ヒント用の色 */
.article .AT77b{ background:linear-gradient(to right,#d887f9 -40%,#ffd0eb);}

/*----------------------------------------
	文字修飾 > 解答用のA付き下線
------------------------------------------*/
/****** 2018版(分数非対応。位置が下杉。変換が終わるまで残す) *****/
.A-Line{display: inline;
	position: relative;
	top:-10px;
	color: #5a5a5a;
	font-size:1.5em;
	font-weight: bold;
	padding: 0 10px 0 5px;
	margin-right: calc( 4vw - 10px);/* 画面サイズに応じて可変 */
	z-index: 0;}

.A-Line:before{content: '';
	position: absolute;
	bottom: 0;
	right: 9px;
	width: calc(100% - 10px);
	height:calc(0.52vmin - 1px);
	background-color: #828282;
	z-index: 2;}

.A-Line:after{color:#828282;
	font-size:16px;
	content: 'A';
	position: absolute;
	bottom: -11px;
	right: -3px;
	z-index: 1;}

/* 解答用A付き下線の分数用の追加スタイル(タグ内にstyle=""で追加)
style="display:inline-block;top:-15px;" */

/**** 2019版(a整数b分数) ****/
/* 共通設定 */
.A-Linea,.A-Lineb{
	position: relative;
	display: inline-block;
	color: #5a5a5a;
	font-weight: bold;
	margin-right: calc( 4vw - 20px);/* 画面サイズに応じて可変 */
	margin-bottom:0.5em;}

.A-Linea:before,.A-Lineb:before{}
.A-Linea:after,.A-Lineb:after{}

/** 通常版 **/	
.A-Linea{/*top:-20px;*/
	font-size: 1.2em;
	padding: 0 10px 0 5px;
	z-index: 0;}

.A-Linea:before{/* 下線 */
	content: '';
	position: absolute;
	bottom:0px;
	right: 9px;
	width: calc(100% - 10px);
	height:calc(0.52vmin - 1px);
	background-color: #828282;
	z-index: 2;}

.A-Linea:after{/* Aの文字 */
	color:#828282;
	font-size:16px;
	content: 'A';
	position: absolute;
	bottom: -0.5em;
	right: -3px;
	z-index: 1;}

/** 分数対応 **/	
.A-Lineb{top:-15px;
	font-size: 27px; font-size: 1.2em;
	padding: 0 10px 0 5px;
	z-index: 0;}

.A-Lineb:before{/* 下線 */
	content: '';
	position: absolute;
	bottom: 0;
	right: 9px;
	width: calc(100% - 10px);
	height:calc(0.52vmin - 1px);
	background-color: #828282;
	z-index: 2;}

.A-Lineb:after{/* Aの文字 */
	color:#828282;
	font-size:0.8em;
	content: 'A';
	position: absolute;
	bottom: -10px;
	right: -3px;
	z-index: 1;}

/****「A-Line2」(a整数b分数) ****/
/* 右寄せをやめて本文中の装飾に留める */
.A-Line2a,
.A-Line2b{
	position: relative;
	display: inline-block;
	color: #5a5a5a;
	font-weight: bold;
	font-size: 1.7em;
	padding:0 0.7em 0 0.2em;
	z-index: 0;}

/* 下線 */
.A-Line2a:before,
.A-Line2b:before{
	content: '';
	position: absolute;
	bottom:0.05em;
	right:0.4em;
	width: calc(100% - 0.3em);
	/*height:calc(0.52vmin - 1px);*/
	height:3px;
	background-color: #9b899e;
	z-index: 2;}

/* Aの文字 */
.A-Line2a:after,
.A-Line2b:after{
	color:#9b899e;
	font-size:0.6em;
	content: 'A';
	position: absolute;
	bottom: -0.5em;
	right: -0.1em;
	z-index: 1;}

/** 分数版(b)の修正 **/
.A-Line2b:before{bottom:0;right:0.8em;width: calc(100% - 0.8em);}
.A-Line2b:after{right: 0.3em;}

/****「A-line3」(a整数b分数) ****/
/* 右寄せをやめて本文中の単純な装飾に留め「A」を判子風の「答」にした */
.A-line3a,
.A-line3b{
	position: relative;
	display: inline-block;
	color: #5a5a5a;
	font-weight: bold;
	font-size: 1.7em;
	line-height:1em;
	padding:0.3em 0.7em 0 0.2em;
	z-index: 0;}

/* 下線 */
.A-line3a:before,
.A-line3b:before{
	content: '';
	position: absolute;
	bottom:-0.15em;
	right:0.4em;
	width: calc(100% - 0.3em);
	height:3px;
	background-color: #9b899e;
	z-index: 1;}

/* 付随文字 */
.A-line3a:after,
.A-line3b:after{position: absolute;
	border-radius:0.3em 0.6em;
	padding:0.3em 0.3em 0.1em;
	color:#fff;
	background:#d79;
	font-size:0.6em;
	line-height:1em;
	content: '答';
	bottom: -0.3em;
	right: -0.95em;
	z-index: 2;}

/** 分数版(b)の修正 **/
.A-line3b{font-size:1.4em;}
.A-line3b:before{bottom: -0.05em;right:0.5em;width: calc(100% - 0.4em);}
.A-line3b:after{bottom: -0.1em;right: -0.95em;font-size:0.7em;padding: 0.3em 0.35em 0.15em;}



/*----------------------------------------
	文字修飾 > 二色マーカー線
------------------------------------------*/
/*マーカー風の下線(二色オレンジ)*/
.markerOo{background: linear-gradient(to top,#ffa988 10%,#fff3c8 15%);padding: 0 3px;font-weight: bold;}
/*マーカー風の下線(二色グリーン)*/
.markerGg{background: linear-gradient(to top,#42e0ad 10%,#e6ffc5 15%);padding: 0 3px;font-weight: bold;}
/*マーカー風の下線(二色ピンク)*/
.markerPp{background: linear-gradient(to top,#ff83d9 10%,#ffe2e9 15%);padding: 0 3px;font-weight: bold;}
/*マーカー風の下線(二色ブルー)*/
.markerBb{background: linear-gradient(to top,#6cc9ff 10%,#d5fffd 15%);padding: 0 3px;font-weight: bold;}
/*マーカー風の下線(二色バイオレット*/
.markerVv{background: linear-gradient(to top,#9c83ff 10%,#f7e2ff 15%);padding: 0 3px;font-weight: bold;}

/*----------------------------------------
	文字修飾 > チェックペン
------------------------------------------*/
/******** チェックペン1(手動でカッコをつける) **********/
/* チェックペン色設定 */
:root{--chk-col:transparent;}

/* チェックペン塗りつぶし */
.chk-pen1{color:var(--chk-col);}
.chk-pen1:hover{--chk-col:red;cursor:pointer;}/*マウスオーバーで赤が見える*/

/******* チェックペン2(前後にカッコが付く) *********/
:root{--chk-col:transparent;}

.chk-pen2{
display:inline-block;
position:relative;
padding:0px 0.8em;
color:var(--chk-col);}
.chk-pen2:before{
position:absolute;
top:-0.05em;left:0.2em;
content:"(";
color:#888;}
.chk-pen2:after{
position:absolute;
top:-0.05em;right:0.2em;
content:")";
color:#888;}
.chk-pen2:hover{--chk-col:red;}

/*-----------------------------------------------
	チェックペン3(ぼかし)(画像もいける)
編集画面ではオレンジにした(2021.4)
-----------------------------------------------*/
.chk-pen3{color:#fa7;}
.entry-content .chk-pen3{color:inherit;filter:blur(1em);}

.entry-content .chk-pen3:hover{filter:blur(0em);/*font-size:1.6em;*/
cursor:pointer;}


/**** 範囲拡張リンク1(ボタンの本文に貼ったaタグ内に追加) *****/
/* リンク色を独自に指定 */
a.xtd-link1:link,a.xtd-link1:visited{
	color:#fffd;
	text-decoration:none;}
a.xtd-link1:hover{color:#fff;
	transition:all 0.4s ease;}

/* 範囲をボックス全体に拡張 */
.xtd-link1:after{
	position:absolute;
	content:"";
	top:0;
	left:0;
	width:100% ;
    height:100%;
	border-radius: 3px;
	z-index:2;}


/***************************************************
				ボックスと外部要素
****************************************************/
/*-----------------------------------------------
ボックス>図解ボックスと図解パーツ
文字や線分などを後乗せ合成するボックス
(2020.9.16サイト作成ブログから転入)
標準ボックスで足るので廃止する
-------------------------------------------------*/
.Z-box1{position: relative;
	display: inline-block;
	width: auto;
	max-width: 350px;
	margin:0.5em 1em;
	border-color:#bcbbff;
	border-style:dashed;
	border-width:3px;
	border-radius: 8px 25px;
	background:#FFF8;
	padding:0.2em;
	color:#6597c5;
	text-align:center;
	/*font-size: calc(0.9em + 0.2vw);*/
	line-height:1.3em;}
.Z-box1 p{color:#6597c5;margin:0;padding:0;}
/*上下キャプション*/
.Z-box1 .cap1u{opacity:0.8;margin: 0.2em 0 0.3em;}
.Z-box1 .cap1d{opacity:0.9;/*font-size:0.8em*/;line-height:1.3em;
	margin-top:0.2em;}
/* ロゴ入りバリエ */
.Z-box1.logo{padding-bottom:0.7em;}
.Z-box1.logo:after{position: absolute;
	right: 8px;
	bottom: -0.5em;
	background-color:#FFF ;
	font-size:0.75em;
	font-weight: bold;
	color:#a0a7f9;
	content: 'そうちゃ式';
	padding: 0px 0.3em;
	z-index: 1;
	letter-spacing:-0.05em;
	line-height:1;}

/*画像を入れるdiv*/
.Tplt1{position: relative; width: auto; font-size: calc(0.9em + 0.4vw);}

/*************** 合成文字(Superimpose) ***************/
.spi1{ position: absolute;
	text-align: center; line-height: 1.2;
	transform: translateX(-50%);letter-spacing: -0.1em;
	text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;}
.spi1.tight{line-height:0.8;}/*複数行ある場合は行間をつめる*/

/************************************************
線分図インボックス(D-box1に入れる)
一本(無印)二本(D)三本(T)
*************************************************/
/*** インボックス本体(大きさは固定) ***/
.Sbz-ibx1{position:relative;
	width: 300px; height:90px;
	margin:0 auto 0.7em;
	border: solid 1px var(--gcl1);
	border-radius: 0.2em 0.7em;
/* 背景のグリッド */
	--gcl1:#defe;/*グリッド色(50%)*/
	--gcl2:#defc;/*グリッド色(25%,75%)*/
	--gcl3:#def7;/*グリッド色(その他)*/
	background: linear-gradient(90deg,
		transparent calc(12.5% - 1px),var(--gcl3) calc(12.5% - 0.5px),var(--gcl3) calc(12.5% + 0.5px),transparent calc(12.5% + 1px),
		transparent calc(25% - 1px),var(--gcl2) calc(25% - 0.5px),var(--gcl2) calc(25% + 0.5px),transparent calc(25% + 1px),
		transparent calc(37.5% - 1px),var(--gcl3) calc(37.5% - 0.5px),var(--gcl3) calc(37.5% + 0.5px),transparent calc(37.5% + 1px),
		transparent calc(50% - 1px),var(--gcl1) calc(50% - 0.5px),var(--gcl1) calc(50% + 0.5px),transparent calc(50% + 1px),
		transparent calc(62.5% - 1px),var(--gcl3) calc(62.5% - 0.5px),var(--gcl3) calc(62.5% + 0.5px),transparent calc(62.5% + 1px),
		transparent calc(75% - 1px),var(--gcl2) calc(75% - 0.5px),var(--gcl2) calc(75% + 0.5px),transparent calc(75% + 1px),
		transparent calc(87.5% - 1px),var(--gcl3) calc(87.5% - 0.5px),var(--gcl3) calc(87.5% + 0.5px),transparent calc(87.5% + 1px),
		transparent 100%),
		 linear-gradient(0deg,
		transparent calc(12.5% - 1px),var(--gcl3) calc(12.5% - 0.5px),var(--gcl3) calc(12.5% + 0.5px),transparent calc(12.5% + 1px),
		transparent calc(25% - 1px),var(--gcl2) calc(25% - 0.5px),var(--gcl2) calc(25% + 0.5px),transparent calc(25% + 1px),
		transparent calc(37.5% - 1px),var(--gcl3) calc(37.5% - 0.5px),var(--gcl3) calc(37.5% + 0.5px),transparent calc(37.5% + 1px),
		transparent calc(50% - 1px),var(--gcl1) calc(50% - 0.5px),var(--gcl1) calc(50% + 0.5px),transparent calc(50% + 1px),
		transparent calc(62.5% - 1px),var(--gcl3) calc(62.5% - 0.5px),var(--gcl3) calc(62.5% + 0.5px),transparent calc(62.5% + 1px),
		transparent calc(75% - 1px),var(--gcl2) calc(75% - 0.5px),var(--gcl2) calc(75% + 0.5px),transparent calc(75% + 1px),
		transparent calc(87.5% - 1px),var(--gcl3) calc(87.5% - 0.5px),var(--gcl3) calc(87.5% + 0.5px),transparent calc(87.5% + 1px),
		transparent 100%),
		#fff;}
/*バリエ(二本の線分図)*/.Sbz-ibx1.D{height: 140px;}
/*バリエ(三本の線分図)*/.Sbz-ibx1.T{height: 200px;}
/*バリエ(四本の線分図)*/.Sbz-ibx1.Q{height: 200px;}


/** 線分 **/
/** 本体(数値は書かない)
インラインでwidth(線分の長さ)を任意で書く
重畳クラス:rng範囲線をつける,D二本目,T三本中二本目,T2三本目
	R区切り右のみ,L区切り左のみ**/
.Sbz-ibx1 .sbn{--scl1:#777;/*線分色(強)*/--scl2:#777a;/*線分色(中)*/--scl3:#7777;/*線分色(弱)*/
	position:absolute;left:17%;top:50%;transform:translatey(-50%);
	width:60%;height:20px;
	background:linear-gradient(180deg,transparent 7px, var(--scl1) 8px,var(--scl1) 11px,transparent 12px);
	border-left:solid 4px var(--scl1);border-right:solid 4px var(--scl1);
	letter-spacing: 0em;z-index:1;}
/*内部の区切り線分にする(弱い区切り)
html上ではもとの線分と並べて記述(中にいれない)*/
.Sbz-ibx1 .sbn.W{height:14px;background:none;border-width:4px;border-color:var(--scl2);}
.Sbz-ibx1 .sbn.W .val{bottom:9px;}
/*線分区切り(右のみ)*/
.Sbz-ibx1 .sbn.R{border-left:none;}
/*線分区切り(左のみ)*/
.Sbz-ibx1 .sbn.L{border-right:none;}
/*矢印にする(流水算など)*/
.Sbz-ibx1 .sbn.Arw{border-right:none;}
.Sbz-ibx1 .sbn.Arw:after{position:absolute;top:10px;right:0;
	width:20px;height:20px;content:"";/*background:#fcf8*/;
	transform-origin: top right;
	transform: scale(1,0.85)rotate(45deg);
    box-shadow: 4px -4px 1px var(--scl1);}
/*色バリエ*/
/*ブルー*/.Sbz-ibx1 .sbn.Bl{--scl1:#00ccff;}
/*ピンク*/.Sbz-ibx1 .sbn.Pk{--scl1:#ff99cc;}
/*グリーン*/.Sbz-ibx1 .sbn.Gr{--scl1:#56e156;}

/** 値(sbn内に入れる)
横位置を変えたい場合インラインで記述
重畳クラスB:下に付ける,rng:範囲線付き **/
.Sbz-ibx1 .sbn .val{position:absolute;bottom:13px;left:50%;
	width:fit-content;
	transform:translatex(-50%);line-height:1;
	text-shadow: 1px 0px 1px #fff, 2px 0px 1px #fff, 3px 0px 1px #fff, -1px 0px 1px #fff, -2px 0px 1px #fff, -3px 0px 1px #fff;}
/*下に付ける*/
.Sbz-ibx1 .sbn .val.B{top:15px;}
/*範囲線を付ける場合*/
.Sbz-ibx1 .sbn .val.rng{width:100%;bottom:1.7em;}
.Sbz-ibx1 .sbn .val.rng:after{position:absolute;bottom:-0.6em;left:1px;
	content:"";width:calc(100% + 2px);height:1.0em;
	border-width:2px 2px 0 2px;border-color:#88ca;border-style:dashed;
	border-radius:50% 50% 0 0/100% 100% 0 0;z-index:-1;}
/*下付きの範囲線*/
.Sbz-ibx1 .sbn .val.B.rng{top:1.7em;}
.Sbz-ibx1 .sbn .val.B.rng:after{top:-0.6em;border-width:0 2px 2px 2px;border-radius:0 0 50% 50%/0 0 100% 100% ;}

/**線分のラベル(線分divの中に入れる)**/
.Sbz-ibx1 .sbn>.lbl{position:absolute;left:0;bottom:0;
	text-align:right;font-size:1.3em;line-height:1;
	/*white-space:nowrap;*/
	transform-origin:right;
	transform:translate(calc(-100% - 0.3em),0.1em);}
/*バリエ(文字小)*/.Sbz-ibx1 .sbn>.lbl.S{font-size:1.2em;
	transform:translate(-100%,calc(50% - 10px + 0.1em)) scaleX(0.85) translatex(-0.3em);letter-spacing: 0.05em;}
/*バリエ(文字極小)*/.Sbz-ibx1 .sbn>.lbl.XS{font-size:1.1em;
	transform:translate(-100%,calc(50% - 10px + 0.1em)) scaleX(0.6) translatex(-0.5em);}

/** 線分とラベル(Dの場合) **/
/*一本目*/.Sbz-ibx1.D .sbn{top:28%;width:28%;}
/*二本目*/.Sbz-ibx1.D .sbn.D{top:72%;width:50%;}
/* 線分とラベル(Tの場合) */
/*一本目*/.Sbz-ibx1.T .sbn{top:22%;width:28%;}
/*ニ本目*/.Sbz-ibx1.T .sbn.T{top:50%;width:40%;}
/*三本目*/.Sbz-ibx1.T .sbn.TT{top:78%;width:50%;}
/* 線分とラベル(Qの場合) */
/*一本目*/.Sbz-ibx1.Q .sbn{top:15%;width:28%;}
/*ニ本目*/.Sbz-ibx1.Q .sbn.Q{top:35%;width:62%;}
/*三本目*/.Sbz-ibx1.Q .sbn.QQ{top:56%;width:50%;}
/*三本目*/.Sbz-ibx1.Q .sbn.QQQ{left:44%;top:84%;width:23%;}

/** 和ユニット
重畳クラス:T線三本,Lw記号を低くHi高く,Orオレンジに着色 **/
/*本体*/
.Sbz-ibx1 .wa{position:absolute;top:50%;right:0;text-align:center;
	transform:translatey(-50%);width:25%;/*background:#afa8;*/}
/*合計表示*/
.Sbz-ibx1 .wa:before{position:absolute;top:0%;left:50%;
	content:"合計";width:fit-content;line-height:1;transform:translate(-50%,-100%);}

/*中括弧(二本用)*/
.Sbz-ibx1 .wa:after{position:absolute;top:50%;left:0%;
	content:url(https://zky-jukesan.com/wp-content/uploads/2021/03/和の記号二本用.png);
	transform:translate(-70%,-47%) scale(1);}
/*中括弧(三本用)自動*/
.Sbz-ibx1.T .wa:after{content:url(https://zky-jukesan.com/wp-content/uploads/2021/03/和の記号三本用.png);}
/*中括弧(二本用)三本線分図中で使用する場合マニュアル「.wa.D」指定*/
.Sbz-ibx1.T .wa.D:after{content:url(https://zky-jukesan.com/wp-content/uploads/2021/03/和の記号二本用.png);}

/*高さを若干低く高くする重畳クラス*/
.Sbz-ibx1 .wa.Lw:after{transform:translate(-70%,-47%) scale(1,0.8);}
.Sbz-ibx1 .wa.Hi:after{transform:translate(-70%,-47%) scale(1,1.2);}
/** 着色(オレンジ) **/
.Sbz-ibx1 .wa.Or:after{filter:contrast(0.7) sepia(1) hue-rotate(324deg) saturate(3);}

/** 差ユニット(デフォルト位置は線分の右上)
  重畳クラスB:右下表示 **/
/*本体*/
.Sbz-ibx1 .sa{position:absolute;right:0;bottom:13px;
	width:30%;/*background:#aff8;*/line-height:1;
	text-align:center;white-space:nowrap;}
.Sbz-ibx1 .sa p{margin:0;line-height:1;}
/*差表示*/
.Sbz-ibx1 .sa:before{position:absolute;top:-0.2em;left:50%;
	content:"差";transform:translate(-50%,-100%);}
/*計算内容など(小さく表示)
差divの中に入れる*/
.Sbz-ibx1 .sa .sub{font-size:0.8em;transform:scalex(0.8);line-height:1.2;}
/*右下表示*/
.Sbz-ibx1 .sa.B{top:1.9em;transform:translatey(100%);}
.Sbz-ibx1 .sa.B:before{top:-0.1em;}

/*** 測定線(線分divの中に入れる)
(注)重畳クラス必須！A:上向き,B:下向き ***/
.Sbz-ibx1 .msl{position:absolute;left:-3.5px;
	height:255%;width:calc(100% + 7px);
	border-style:dotted;border-color:var(--scl3);border-width:0 3px;
	z-index:-1;}
/**上向き**/.Sbz-ibx1 .msl.A{bottom:20px;}
/**下向き**/.Sbz-ibx1 .msl.B{top:20px;}
/*三本の場合*/.Sbz-ibx1.T .msl{height:200%;}
/*(右のみ)*/.Sbz-ibx1 .msl.R{border-left:none;}
/*(左のみ)*/.Sbz-ibx1 .msl.L{border-right:none;}

/*** あと載せ文字(Superimpose) ***************/
.Sbz-ibx1 .spi1{position:absolute;white-space:nowrap;
	/*text-align: center;*/ line-height: 1.2;
	/*transform: translateX(-50%);letter-spacing: -0em;*/
	/*text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff;*/}
.Sbz-ibx1 .spi1.tight{line-height:0.8;}/*複数行ある場合は行間をつめる*/


/*******************************************
	線分図(relativeなインボックスに%で配置)
sbz-ibxに置き換えて廃止
******************************************/
/* 線分図本体(文字)
インラインでwidth(線分の長さ)とheight(線分と文字の距離) */
.sbn1{font-size:0.9em;text-align: center; line-height: 1;
	position: absolute;height:1.3em;background:#ff00;
	transform:translatey(calc(-100% + 2px));/*縦にずらして線分の位置を基準位置にする*/
	letter-spacing: 0em;z-index:1;}	
/*線分と区切りはbefore要素*/
.sbn1:before{position:absolute;bottom:-10px;left:-2px;
	content:"";width:calc(100% - 4px);height:20px;
	background:linear-gradient(180deg,transparent 7px, #777 8px,#777 11px,transparent 12px);
	border-left:solid 4px #777;border-right:solid 4px #777;z-index:-1;}
/*バリエ(青)*/
.sbn1.BL:before{border-color:#6af;background:linear-gradient(180deg,transparent 7px, #6af 8px,#6af 11px,transparent 12px);}
/*バリエ(赤)*/
.sbn1.RD:before{border-color:#f79;background:linear-gradient(180deg,transparent 7px, #f79 8px,#f79 11px,transparent 12px);}
/*バリエ(緑)*/
.sbn1.GR:before{border-color:#4d7;background:linear-gradient(180deg,transparent 7px, #4d7 8px,#4d7 11px,transparent 12px);}

/*範囲線(after要素)(rangeを重畳指定した場合のみ)*/
.sbn1.range:after{position:absolute;top:1em;left:5px;
	content:"";width:calc(100% - 14px)
	;height:min(calc(100% - 0.5em - 15px),1.5em);
	;border-width:2px 2px 0 2px;border-color:#88ca;border-style:dashed;
	border-radius:50% 50% 0 0/100% 100% 0 0;z-index:-1;}
/**本体(文字)の下寄せ版(Dを重畳指定)**/
.sbn1.D{font-size:0.9em;text-align: center; line-height: 1;
	position: absolute;height:1.3em;
	transform:translatey(calc(80% - 1.2em + 10px));/*縦にずらして線分の位置を基準位置にする*/
	letter-spacing: 0em;z-index:1;}	
/*線分(下寄せ)*/
.sbn1.D:before{position:absolute;top:-80%;}
/*範囲線(下寄せ)*/
.sbn1.D.range:after{position:absolute;top:max(calc(-100% + 1em),-2em);left:5px;
	height:min(calc(100% - 0.5em - 15px),1.5em);
	border-width:0 2px 2px 2px;border-color:#88ca;border-style:dashed;
	border-radius:0 0 50% 50%/0 0 100% 100%;z-index:-1;}
/*線分区切り(右のみ)*/
.sbn1.R:before{border-left:none;width:calc(100%);}
/*線分区切り(左のみ)*/
.sbn1.L:before{border-right:none;width:calc(100% - 2px);}

/**[旧版]線分図のラベル(右寄せ)**/
.sbl1{position:absolute;transform:translate(calc(-100% - 0.3em),-40%);font-size:1.4em;}
/*バリエ(文字小)*/
.sbl1.S{font-size:1.3em;transform-origin:right;transform:translate(calc(-100% - 0.3em),-30%) scaleX(0.9);}
/*バリエ(文字極小)*/
.sbl1.XS{font-size:1.1em;transform-origin:right;transform:translate(calc(-100% - 0.2em),-30%) scaleX(0.85);}

/**線分のタイトル(sbn1の直下におく)**/
.sbn1>.title{position:absolute;left:0;bottom:0;
	text-align:right;font-size:1.4em;
	transform-origin:left;
	transform:translate(calc(-100% - 8px),calc(50% + 2px));}
/*バリエ(文字小)*/
.sbn1 .title.S{font-size:1.3em;
	transform:scaleX(0.85) translate(calc(-100% - 6px),calc(50% + 2px));letter-spacing: 0.05em;}
/*バリエ(文字極小)*/
.sbn1 .title.XS{font-size:1.3em;
	transform:scaleX(0.6) translate(calc(-100% - 6px),calc(50% + 2px));}
/*下寄せの線分のタイトル*/
.sbn1.D .title{top:0;transform: translate(calc(-100% - 8px),calc(-75% + 0px));}
/*バリエ(文字小)*/
.sbn1.D .title.S{font-size:1.3em;
	transform:scaleX(0.85) translate(calc(-100% - 7px),calc(-75% + 0px));letter-spacing: 0.05em;}
/*バリエ(文字極小)*/
.sbn1.D .title.XS{font-size:1.3em;
	transform:scaleX(0.6) translate(calc(-100% - 6px),calc(-75% + 0px));}

/*** 測定線 ***/
.msl1{color:transparent;position:absolute;transform:translateX(-1px);
	border-style:dotted;border-color:#88a7;border-width:0 3px;}
/*(右のみ)*/
.msl1.R{border-left:none;}
/*(左のみ)*/
.msl1.L{border-right:none;}

/*** 中括弧(和を示す) ***/
/* 本体(文字)
位置を％で指定。heightで括弧の長さ、widthで改行具合を調整*/
.cly-bkt1{display:flex;flex-direction:column;
	align-items:center;justify-content: center;
	position:absolute;transform:translate(0%,-50%);
	text-align:center; line-height:1.2;background:#ff00;
	width:3em;height:65%;/*印刷でも折り返しになるように*/}
/*中カッコ*/
.cly-bkt1:before{position:absolute;left:-1.6em;top:50%;
	transform: translateY(-50%);
	content:"";background:#f000;width:0.7em;height:100%;
	border:solid 3px #ccd;border-width:3px 4px 3px 0;
	border-radius:0 80% 80% 0/0 20% 20% 0;}
/*中カッコの尻尾*/
.cly-bkt1:after{position:absolute;left:-1.0em;top:50%;
	content:"";width:0.8em;height:0.8em;background:#fff;
	transform-origin: top right;
	transform:scale(1,0.5) rotate(45deg);
	border:solid #ccd;border-width: 5px 3.5px 0 0;}


/*------------------------------------------------
ボックス>デフォルト(標準)ボックス
タイトルを持たいないボックスで2020.3にN-boxから独立
2021仕様を更に変更
単独で使うと中央寄せ
並べて使う場合は標準コンテナ(box-ctr1)に入れる
中の要素(画像など)を横並びにするバリエーションflx型
---------------------------------------------*/
/* 色設定 */
.D-box1{border-color:#bce;}/* ボーダーの色 */
.D-box1{color:#6597c5;}/* ボックス内本文色(タイトル消去時) */ 
.D-box1 p{color:#6597c5;}/* ボックス内本文色 */ 

/*** ボックス本体 ***/
.D-box1{
	display:flex;
	flex-direction: column;align-items: center;/*中央寄せ*/
	position: relative;height:fit-content;
	width:fit-content;min-width:200px;
	margin: -0.3em auto 0.8em;
	border-style:dashed;border-width:3px;
	border-radius: 8px 25px;
	background:#FFF8;
	padding:0.5em min(calc(3.5vw - 0.5em),2em);
	text-align:center;
	font-size:1em;line-height:1.6em;}

/*枠線の色バリエ*/
.D-box1.Pk{border-color:#fad;}/*ピンク*/
.D-box1.Or{border-color: #fc5;}/*オレンジ(強調)*/


/*リストの中で使う場合は左に寄せる*/
ol .D-box1,ol .D-box1{margin-left:0.5em;}

/*印刷するhtmlプリント内で使う場合は特別仕様*/
.L-qst3 .D-box1{max-width:320px;
	margin:1em 0 0 ;padding:0.5em;}
.L-qst3 .D-box1:first-of-type{margin-top:0;}

/*** ボックス内本文 ***/
.D-box1 p{margin:0.25em 0;padding: 0;line-height:1.3em;
	font-size:inherit;
	background:inherit;}

/** キャプション(上) **/
.D-box1 .cap1u{opacity:0.8;
	margin: 0.2em 0 0.3em;line-height:1.2;}
/** キャプション(下) **/
.D-box1 .cap1d{/*display:inline-block;*/
	opacity:0.9;
	font-size:0.8em;line-height:1.3em;
	margin-top:0.2em;}

/*** 中に要素を横並びさせるバリエーション ***/
.D-box1.flx {display:flex;align-items:center;flex-direction:row;}
/* 要素をつなぐ矢印など */
.D-box1 .brg{margin: 0 calc(1.5vw - 0.05em);opacity:0.8;
	font-weight:bold;font-size:min(calc(0.75rem + 0.75vw),1.2rem);}

/*** ロゴを付けるバリエーション(html図にする場合など) ***/
.D-box1.logo:after{position: absolute;right: 8px;
	bottom: -0.5em;	background-color:#FFF ;
	font-size:0.75em;	font-weight: bold;
	color: #acfd;content: 'そうちゃ式';
	padding: 0px 0.3em;z-index: 1;
	letter-spacing:-0.05em;
	line-height:1.0em;}

/*** 黒板風のバリエーション(2020.6英数館から移植) ***/
.D-box1.Board{width:max(340px,70%);border-radius:0;border:none;border-bottom: solid 10px #c8a397;background: #fff;
    filter:hue-rotate(-48deg) sepia(0.25) brightness(0.65) contrast(1.8) invert(1) saturate(4) hue-rotate( 212deg) blur(0.5px);box-shadow: 1px 5px 7px 0px #ddd1e9;}
.D-box1.Board p{color:#000;}
.D-box1.Board .cap1u{width:100%;text-align:left;margin-bottom:0;font-size:1.2em;font-weight:bold;color:#000;}
.D-box1.Board .cap1d{color:#000;}
.D-box1.Board:after{position: absolute;right: 8px;
	top: 1.2em;	background-color:#FFF ;
	font-size:0.75em;	font-weight: bold;
	color: #777;content: '(C)2022そうちゃ式';
	padding: 0px 0.3em;z-index: 1;
	letter-spacing:-0.05em;
	line-height:1.0em;}

/***** 標準コンテナ(横並びにする時に中に入れる) *****/
.box-ctr1{display: flex;flex-wrap:wrap;
    justify-content:center;
    margin: -1em 0em 0.75em;
    background: #fff8;}
.box-ctr1 .D-box1{margin:0.5em;}/*くっつくように*/

/*** 標準インボックス(図に注釈をのせる。図に大きさを指定) ***/
/** 本体 **/
.D-ibx1{position:relative;width:auto;}
/** 注釈 **/
.D-ibx1 .spi1{position: absolute;display:inline-block;
	font-size:inherit;font-weight:bold;
	text-align: center; line-height: 1.2;
	transform: translateX(-50%);letter-spacing: 0em;white-space: nowrap;
	text-shadow: 0px 0px 3px #fff, 0px 0px 3px #fff, 0px 0px 3px #fff;}
.D-ibx1 .spi1.tight{line-height:0.8;}/*複数行ある場合は行間をつめる*/


/**********************************************
グリッドインボックス(中に線分図などのパーツを配置)
**********************************************/
/*色設定*/
.Grd-ibx1{--col1:#defe;
	--col2:#defc;
	--col3:#def7;
    --colBG:#defc;}
/**** 本体(幅は固定する。高さは中身に応じてインラインで変更可) *****/
.Grd-ibx1{position:relative;font-size:0.9em;
	 width: 300px; height: 200px;margin:0 auto 0.7em;
	border-radius: 0.3em 0.7em;border: solid 2px var(--colBG);
	background: linear-gradient(90deg,
		transparent calc(12.5% - 1px),var(--col3) calc(12.5% - 0.5px),var(--col3) calc(12.5% + 0.5px),transparent calc(12.5% + 1px),
		transparent calc(25% - 1px),var(--col2) calc(25% - 0.5px),var(--col2) calc(25% + 0.5px),transparent calc(25% + 1px),
		transparent calc(37.5% - 1px),var(--col3) calc(37.5% - 0.5px),var(--col3) calc(37.5% + 0.5px),transparent calc(37.5% + 1px),
		transparent calc(50% - 1px),var(--col1) calc(50% - 0.5px),var(--col1) calc(50% + 0.5px),transparent calc(50% + 1px),
		transparent calc(62.5% - 1px),var(--col3) calc(62.5% - 0.5px),var(--col3) calc(62.5% + 0.5px),transparent calc(62.5% + 1px),
		transparent calc(75% - 1px),var(--col2) calc(75% - 0.5px),var(--col2) calc(75% + 0.5px),transparent calc(75% + 1px),
		transparent calc(87.5% - 1px),var(--col3) calc(87.5% - 0.5px),var(--col3) calc(87.5% + 0.5px),transparent calc(87.5% + 1px),
		transparent 100%),
		 linear-gradient(0deg,
		transparent calc(12.5% - 1px),var(--col3) calc(12.5% - 0.5px),var(--col3) calc(12.5% + 0.5px),transparent calc(12.5% + 1px),
		transparent calc(25% - 1px),var(--col2) calc(25% - 0.5px),var(--col2) calc(25% + 0.5px),transparent calc(25% + 1px),
		transparent calc(37.5% - 1px),var(--col3) calc(37.5% - 0.5px),var(--col3) calc(37.5% + 0.5px),transparent calc(37.5% + 1px),
		transparent calc(50% - 1px),var(--col1) calc(50% - 0.5px),var(--col1) calc(50% + 0.5px),transparent calc(50% + 1px),
		transparent calc(62.5% - 1px),var(--col3) calc(62.5% - 0.5px),var(--col3) calc(62.5% + 0.5px),transparent calc(62.5% + 1px),
		transparent calc(75% - 1px),var(--col2) calc(75% - 0.5px),var(--col2) calc(75% + 0.5px),transparent calc(75% + 1px),
		transparent calc(87.5% - 1px),var(--col3) calc(87.5% - 0.5px),var(--col3) calc(87.5% + 0.5px),transparent calc(87.5% + 1px),
		transparent 100%),
		#fff;}
/*重畳バリエ(フィット)*/
.Grd-ibx1.F{width:fit-content;height:fit-content;padding:1em;}

/*-----------------------------------------------
		ボックス> 強調ボックス(N-box)
------------------------------------------------*/
/**************************************
			旧式(無印)
	N-box1&box-ctr2におきかえてから削除
***************************************/
/* 色設定 */
.N-box .box-title {color: #55a8f5;}/* タイトルの色 */
.N-box {border-color:#82c1fb;}/* ボーダーの色 */
.N-box:after{color:#82c1fb;}/* ロゴはボーダーと同色 */
.N-box {color:#6597c5;}/* ボックス内本文色(タイトル消去時) */ 
.N-box p {color:#6597c5;}/* ボックス内本文色 */ 

/* ボックス本体 */
.N-box {position: relative;
	/*display: inline-block; 可変幅 */
	/*min-width:280px; 最低幅 */
	/*max-width: calc(100vw - 60px);/* 最大幅 */
	/*color:#6597c5;*/
	width: calc(19em + 17vmin);
	max-width: 97%;
	min-width: 60%;
	margin: 1em auto;
	border-style:solid;
	border-width:3px;
	border-radius: 8px 25px;
	background-color:#FFF5 ;
	padding:0.8em calc(0.3em + 3vmin) 0.6em;
	font-size: calc(0.9em + 0.2vmin);
	line-height:1.3em;
	}

/* ボックス上辺の可編タイトル */
.N-box .box-title {position: absolute;
	display: inline-block;
	top: -0.6em;
	left:2%;
	padding: 2px 9px 0px 6px;
	line-height: 1;
	font-size:1.05em;
	background: #FFF;
	font-weight: bold;}

/* ボックス右下の固定ロゴ */
.N-box:after{position: absolute;
	right: 8px;
	bottom: -0.5em;
	background-color:#FFF ;
	font-size:0.75em;
	font-weight: bold;
	content: 'そうちゃ式';/* ロゴ内容 */
	padding: 0px 0.3em;
	z-index: 1;
	letter-spacing:-0.05em;
	line-height:1.0em;}

/* ボックス内本文 */
.N-box p{margin: 0;padding: 0;line-height:1.3em;
	font-size: calc(0.9em + 0.2vmin);}

/****************************************************
	新型N-box1(2021.6.18更新)
(ヨコに並べる場合はbox-ctr2に入れる)
********************************************************/
/* 色設定(標準青) */
.N-box1 .box-title {color: #55a8f5;}/* タイトル */
.N-box1 {border-color:#82c1fb;}/* ボーダー */
.N-box1:after{color:#82c1fb;}/* 右下ロゴ */
.N-box1,.N-box1 p{color:#6597c5;}/* ボックス内本文*/
/*(色バリエ:ピンク)2020.1.21新設*/
.N-box1.PK .box-title {color: #f555f3;}/* タイトル */
.N-box1.PK{border-color:#ff9fd9;}/*ボーダー*/
.N-box1.PK:after{color:#fc7dca;}/*右下ロゴ*/
.N-box1.PK,.N-box1.PK p{color:#f5b;}/* ボックス内本文*/
/*(色バリエ:オレンジ)2020.5.19新設*/
.N-box1.OR .box-title {color: #f59d55;}/* タイトル */
.N-box1.OR{border-color:#fbcb82;}/*ボーダー*/
.N-box1.OR:after{color:#fbb882;}/*右下ロゴ*/
.N-box1.OR,.N-box1.OR p{color:#fa5;}/* ボックス内本文*/

/*色設定(変数)作成中*/
.N-box1{
	/*標準(青)*/
	--LtC1:#6597c5;/*文字色1*/
	--TtC1:#55a8f5;/*タイトル色1*/
	--BdC1:#82c1fb;/*ボーダー(ロゴ)色1*/
	--LgC1:;/*ロゴ色1*/
	/*バリエPK(ピンク))*/
	--LtC2:#f5b;/*文字色1*/
	--TtC2:#f555f3;/*タイトル色1*/
	--BdC2:#ff9fd9;/*ボーダー(ロゴ)色1*/
	--LgC2:;/*ロゴ色1*/
	/*バリエOR(オレンジ))*/
	--LtC3:#f5b;/*文字色1*/
	--TtC3:#f555f3;/*タイトル色1*/
	--BdC3:#ff9fd9;/*ボーダー(ロゴ)色1*/
	--LgC3:;/*ロゴ色1*/
	}

/* ボックス本体 */
.N-box1 {
	position: relative;
	width:fit-content;
	height:fit-content;
	border-style:solid;
	border-width:3px;
	border-radius: 8px 25px;
	background-color:#FFF ;
	line-height:1.3em;
	font-size:min(calc(0.75rem + 0.75vw),1.2rem);/*特別なサイズ設定*/
	margin: 1em auto 0.5em;
	padding: 1em min(calc(0.4rem + 0.95vw),1.2em) 0.8em;
}

/* ボックス上辺の可編タイトル */
.N-box1 .box-title {position: absolute;
	display: inline-block;
	bottom: calc(100% - 0.6em);
	left: 0.5em;
	padding: 2px 9px 0px 6px;
	line-height: 1;
	background: #FFF;
	font-weight: bold;
	font-size: 1.08em; }

/* ボックス右下の固定ロゴ */
.N-box1:after{position: absolute;
	right: 8px;
	bottom: -0.5em;
	background-color:#FFF ;
	font-size:0.75em;
	font-weight: bold;
	content: 'そうちゃ式';/* ロゴ内容 */
	padding: 0px 0.3em;
	z-index: 1;
	letter-spacing:-0.05em;
	line-height:1.0em;}

/* ボックス内段落本文(インデント処理を復旧2021.6.18) */
.N-box1 p{margin:0 0 0.5em;padding: 0;
	text-indent: -1em; padding-left: 1em;
	line-height:1.5em;
	font-size:inherit;}
.N-box1 p:first-line{text-indent:-1em;padding-left:0em;}
.N-box1 p:last-child{margin-bottom:0;}
.N-box1 div:last-child{margin-bottom:0;}

/**キャプション(2022新設 D-box1と同じ仕様で)**/
/** キャプション(上) **/
.N-box1 .cap1u{opacity:0.8;
	margin: 0.2em 0 0.3em;line-height:1.2;}
/** キャプション(下) **/
.N-box1 .cap1d{opacity:0.9;text-align:center;
	font-size:0.8em;line-height:1.3em;
	margin-top:0.2em;}

/*バリエ重畳クラス(文字を小さく)*/
.N-box1.S p{font-size: calc(0.7em + 0.45vw);}
/*バリエ重畳クラス(文字を大きく)*/
.N-box1.L p{font-size: min(calc(0.8em + 0.8vw),1.15em);}
/*バリエ重畳クラス(1行目をインデント無しに)*/
.N-box1.no-idt p{text-indent:0em;padding-left:0.3em;}

/* 例 */
.N-box1 .ex1{position:relative;margin: -0.5em 0 1em;padding-left: 2.5em;
	font-size:0.8em;line-height:1.5;}
.N-box1 .ex1:before{position:absolute;line-height:1.7;
	top:0.1em;left:0.7em;width:fit-content;
	font-size:0.9em;content:"(例)";white-space:nowrap;}
.N-box1 .ex1:first-line{font-size:1.1em;}

/* box内最後のdivは下マージンをゼロにする */
.N-box1 div:last-of-type{margin-bottom:0em;}

/*N-box内の分数*/
.N-box1 .frac{text-indent:0;}

/*強調コンテナ(横に並べる場合はコンテナに入れる)*/
.box-ctr2{
	display: flex;flex-wrap:wrap;
    justify-content:center;
	margin: -0.5em 0em 0.5em;
    background: #fff;}
.box-ctr2 .N-box1{margin:0.5em;}

/* スピーチボックス内で使う場合のバリエ */
.S-box1 .N-box1,
.S-box2 .N-box1{background:#fff5;
	box-shadow: 0px 0px 1px 5px #fffa, 0px 0px 1px 5px #fffa inset;}
.S-box1 .N-box1 .box-title,
.S-box2 .N-box1 .box-title{background:#fffbe5;}
.S-box1 .box-ctr2,
.S-box2 .box-ctr2{background:none;}


/*-----------------------------------------------
		ボックス> レイアウト用ボックスとコンテナ
------------------------------------------------*/
/*****************************************
【廃止】段組みレイアウト用のボックス
	(中に入れるのは地の文)
******************************************/
.lot-box1{
	margin:0 0.4em;}

.lot-box1 p{
	margin-left:0;
	margin-right:0;}

/**************************************
【廃止】レイアウト用のコンテナ(2020.3)
(レイアウト用ボックスや標準ボックスを入れる)
**************************************/
.lot-ctr1{
	display: flex;
    justify-content:center;
    margin:0em 0em 0.75em;
	padding: 0 calc(2.5vw - 0.4em);
    /*background: #fff8;*/}
/*N-box1の中に入れた場合はパディングを0に詰める*/
.N-box1 .lot-ctr1{padding:0;}

/*-----------------------------------------------
	ボックス> スピーチボックスと付属要素(202012修正)
--------------------------------------------------*/
/********* ラッパー(スピーチボックスと人物ラッパーを包む) **********/
.S-box-wrap{display: flex;
	justify-content:center;align-items:center;
	background-color:#fff;
    margin: 0 2.5vw;padding: 0.5em 0;}

/******* 人物ラッパー(人物画像と肩書・名前を包む) **********/
.S-P-wrap {text-align:center;background-color: #fff;
	max-width: 120px;width: calc(50px + 8vw);}

/***** 吹き出し1(左に人物) *******/
.S-box1{position:relative;display:inline-block;
	max-width:calc(100% - 120px);
	height:fit-content;min-height:6em;
	background:#fffbe5;
	margin-left:calc(6px + 3vw);/* 左の空白(角用) */
	border-radius: 30px;
	border: 2px solid #ffbd9d;
	padding:1em calc(3vw - 0.1em) 0.7em calc(4.5vw - 0.15em);
	text-align: left;
	color:#a25e16;
	font-size:0.95em;
	/*font-size:min(calc(0.7em + 0.4vw),1.1em);*/
	font-family:auto;/* 書体を地の文と変える */
	box-shadow: 2px 2px 6px 0px #214b8a73;}
.S-box1 p{font-size:inherit;margin-left:0;margin-right:0;}

/* 吹き出し1の尾(左向き) */
.S-box1:after{position:absolute;
	top:calc(50% - 4.5px - 2vw);left:calc(-5px - 2vw);
	content:"";
	width:calc(4px + 4vw);height:calc(4px + 4vw);
	background:#fffbe5;
	border-style:solid;	border-color:#ffbd9d;
	border-width:0 0 5.5px 5.5px;
	transform: scale(0.8,0.3)rotate(45deg);}

/********** 吹き出し2(人物なし。単独でラッパーに入れる) ***********/
.S-box2{position: relative;
	flex-basis:100%;
	background:#fffbe5;
	border-radius: 30px;
	border: 2px solid #ffbd9d;
	padding:0.7em calc(4.5vw - 0.15em);
	text-align: left;
	color:#a25e16;
	font-family:auto;font-size:0.95em;
	/*font-size:min(calc(0.7em + 0.4vw),1.1em);*/
	box-shadow: 2px 2px 6px 0px #214b8a73;
	z-index:0;}
.S-box2 p{font-size:inherit;line-height:1.6;
	margin:0 0 0.3em;z-index:1;}

/* 吹き出し2の尾(上向き) */
.S-box2:after{position:absolute;top:calc(-5px - 2vw);
	left:calc(16px + 6vw);content:"";
	width:calc(4px + 4vw);height:calc(4px + 4vw);
	background:#fffbe5;	border-style:solid;
	border-color:#ffbd9d;border-width:7px 0 0 7px;
	transform: scale(0.25,0.5)rotate(45deg);
	z-index:-1;}
/*尾を表示しない重畳クラス*/
.S-box2.no-tail:after{display:none;}


/*-----------------------------------------------
		ボックス> ボタン(リンク)ボックスと付属要素
ボタンには拡張リンク「.xtd-link1」を設定する
2020年末現在、ほとんど使っていない。
--------------------------------------------------*/
/***** B-box1(おすすめ特集や成約ボタン)ラッパーロウの中に入れると横並ぶ。***/
/********		aは紫,bはピンク,cはオレンジ 　**************/
/* ラッパーコンテナ(.box-wrap-container1:最外部枠。他のboxと共用) */
.box-wrap-container1{display: flex;
	justify-content:center;/* 隙間がある場合ラッパーはセンター寄せ */
	margin: 0px 0px 0.5em;
	background:#fff;}

/*ラッパー(B-box2と異なりただの透明枠。ボタンと声・説明を包む)ボタン3つを想定*/
.B-box1-wrap{width: 10%; flex-grow: 1;/* 均等幅に膨らませギッシリ詰める */
	overflow: hidden;
	/*height: max-content;*/
	margin: 0px;
	padding: 0px;
	text-align:center;}

.B-box1-wrap p{margin:0;line-height:1.2em;
	font-size: calc(0.9em + 0.2vmin);}

/* 中ボタンが2つの場合の追加クラス */
.B-box1-wrap.double{flex-grow: 0;/* 膨らませない */
	flex-basis:calc(calc(18em + 6vmin));/* 幅 */
	max-width:;}
/* 大ボタンが1つの場合の追加クラス */
.B-box1-wrap.single{flex-grow: 0;/* 膨らませない */
	flex-basis:calc(7em + 35vmin);/* 幅 */
	max-width:;}

/* ボタン本体 */
.B-box1a,.B-box1b,.B-box1c,.B-box1aU,.B-box1bU,.B-box1cU
	{position:relative;
	/*width: 10%; flex-grow: 1; 均等幅に膨らませる */
	margin: 0px 3px;
	background:linear-gradient(160deg,#c078cd,#90589a 34%,#694572);
	border-radius: calc(0.4em + 0.3vw) calc(1em + 0.4vw);/* ボタンの形状はココ */
	text-align:center;
	color:#fff5;
	font-size:calc(0.5em + 1vmin);
	line-height:calc(1.1em + 0.2vmin);
	letter-spacing:0.2em;
	padding: 0.6em 1.8em 0.6em 1.4em;
	box-shadow:0px 0px 1px 2.5px #0002 inset;}

/* b,cの色バリエ */
.B-box1b,.B-box1bU{background: linear-gradient(147deg,#ffd4b6,#ff7a86,#e45c83,#ad608e);}
.B-box1c,.B-box1cU{background: linear-gradient(147deg,#f5e682,#ffab62,#ef8f4a,#ce627a);}

/* マウスオーバー (3*Uには表示しない)*/
.B-box1a:hover,.B-box1b:hover,.B-box1c:hover{background:#ff3b3b;
	/*border-color:#3fd47b;
	transition:all 0.5s ease;*/}

/* ボタン内矢印(●)(3*Uには表示しない) */
.B-box1a:after,.B-box1b:after,.B-box1c:after{position:absolute;
	    top: calc(50% - 0.525em);
	right: 0.9em;
    width: 1em;
    height: 1em;
    content: "";
    background-color: #fffa;
    border-radius: 50%;
}
/* ボタン内矢印(>)(抜きを表現) */
.B-box1a:before,.B-box1b:before,.B-box1c:before{position:absolute;
	top:calc(50% - 0.27em);
	right:1.3em;
	width:0.4em;
	height:0.4em;
	content:"";
	border-color:#6f4878;
	border-style:solid;
	border-width: 0px calc(0.5px + 0.17vmin) calc(0.5px + 0.17vmin) 0px;
	/*box-shadow:3px 3px 1px 1px #fff5;*/
	transform: scale(1.3,1) rotate(-45deg);
	z-index:1;}
/*色バリエ*/
.B-box1b:before{border-color:#b75f8c;}
.B-box1c:before{border-color:#d66d6e;}

/* 本文 */
.B-box1a p,.B-box1b p,.B-box1c p,
.B-box1aU p,.B-box1bU p,.B-box1cU p{;margin:0.3em;}

/* ボタン上の声(wrapの外に出すと複数ボタン共通にできる) */
.B-box-voice{margin:0px;text-align:center;
	font-size:calc(0.45em + 0.8vmin);letter-spacing:calc(0.002em + 0.30vmin);}
/* ボタン下のコピー(同上) */
.B-box-comment{margin:0px;text-align:center;font-size:calc(0.47em + 0.85vmin);}

/***** B-box2(カテゴリなど集合体で使うボタン) ******/
/* ラッパーコンテナ(横一列のラッパーを包む最大要素。ラッパーが1つでも設定する。他のボタンタイプと共通) */

/* ラッパー(縦に積んだボックスロウを包む形状:カテゴリー単位) */
.B-box2-wrap{width: 10%; flex-grow: 1;/* 均等幅に膨らませる */
	overflow: hidden;
	height: max-content;
	margin: 0px;
	border-radius: calc(0.4em + 0.3vmin) calc(1em + 0.4vmin);/* ボタンの形状はココ */
	padding: 0px;}

/* ボックスロウ(横一列に並べたB-boxを包む透明なボックス) */
.B-box2-row{display: flex;
	/*width: 100%;*/
	margin: 0 auto;
	/*ackground-color: none;*/
	padding: 0em;}

/* ボタン本体(B-box2Uは未リンクアイテム、B-box2Tはタイトル表示用)*/
.B-box2,.B-box2U,.B-box2T{width:10%;flex-grow: 1;/* 均等幅に膨らませる */
	position:relative;
	/*display: inline-block;*/
	margin:0px;
	border-radius: 3px;
	/*border-left: solid 1px #fff8; border-right: solid 1px #0008;
	border-top: solid 1px #fff8; border-bottom: solid 1px #0008;*/
	text-align:center;
	color:#fff;
	font-size:calc(0.5em + 1vmin);
	line-height:calc(1.1em + 0.2vmin);
	background: linear-gradient(150deg,#796398,#584572);
	/*background:linear-gradient(150deg,#746397,#504572);変更案*/
	padding: 0.35em;
	box-shadow:1px 1px 0px 1px #000a, 1px 1px 0px 0px #fff5 inset, -1px -1px 0px 0px #0008 inset;}

/* B-box2Uの変更部分 */
.B-box2U{color:#fff6;}/* 押せないことを暗示 */

/* B-box2Tの変更部分 */
.B-box2T{padding:0.3em;
	background: linear-gradient(150deg,#8f63a2,#714d75);
	color:#feda;
	font-size:calc(0.5em + 1vmin);
	letter-spacing:0.3em;}

/* マウスオーバー */
.B-box2:hover{background:#3fd47b;border-color:#3fd47b;
	/*transition:all 0.5s ease;*/}

/* 本文 */
.B-box2 p{;margin:0.3em;}

/* コメント文 */
.box-comment{display:inline-block;
	color:#fffd;
	font-size: 0.7em;
	text-align: left;line-height: 1.4em;}


/*-----------------------------------------------
		ボックス> 筆算ボックス(旧仕様)
--------------------------------------------------*/
/* 色設定 */
.C-box {border-color: #ddd;/*枠線灰色*/
	background-color:#FFF5 ;/* 背景を少し透過 */
	/*color:#999;*//* 文字色は設定無し */}

/* ボックス本体 */
.C-box {text-align:right;/* 要素は右寄せ */
	vertical-align: top;
	line-height:1.6em;
	position: relative;
	display: inline-block;/* 可変幅 */
	min-width:100px;/* 最低幅 */
	padding: 10px 16px 10px 16px;
	border-width:3px;
	border-radius: 8px;
	border-style:solid;
	margin: 0px 0px 15px 5vw;}

/* ボックス内本文 */
.C-box p {margin: 0;padding: 0;}

/*-----------------------------------------------
	ボックス> 筆算インボックス1(一般途中計算)
(C-box1を置き換え済)(標準ボックス内に入れる)
--------------------------------------------------*/
.Hsn-ibx1{position:relative;
	width:fit-content;
	margin:0em auto 0.2em;
	color:#7d7c79;
	font-style:italic;
	font-family:sans-serif;
	font-size:1.2em;
	line-height:1.5em;
	/*letter-spacing:0.05em;*/}

/* ボックス内本文 */
.Hsn-ibx1 p{margin: 0;padding: 0;}

/*-----------------------------------------------
	ボックス> 筆算ボックス2(加減乗算用)
(標準ボックス内に入れる)
「Kjz-ibx」インボックス化する
--------------------------------------------------*/
/* ボックス本体 */
.C-box2 {
	position: relative;
	display: inline-block;
	margin:0;
	padding:0.3em calc(3vw - 0.1em) 0.3em calc(1.5vw - 0.05em);
	background:none;
	text-align:right;
	color:#7d7c79;
	font-style:italic;
	font-family:sans-serif;
	vertical-align: top;
	font-size:1.6em;
	line-height:1.1em;
	letter-spacing:0.05em;}

/* ボックス内本文 */
.C-box2 p {margin: 0;padding: 0;}

/*-----------------------------------------------
[Tsk-ibxに変更済]ボックス> 筆算ボックス3(逆算用)
--------------------------------------------------*/
/*---------------------------------------------
ボックス>等式インボックス
(逆算や方程式などの等式を入れる)
---------------------------------------------*/
/* 標準設定 */
.Tsk-ibx1{display:flex;justify-content:center;
	align-items: flex-end;/*下揃え*/
	color:#7d7c79;font-family:sans-serif;
	/*特別なフォントの拡大率を設定*/
	font-size:min(calc(0.6rem + 1.5vw),1.3rem);
	font-style:italic;
    line-height: 1.6em;
    padding-top: 0em;
	margin:0em 0 0.3em;}
/*フォントサイズを再設定したら、文字小さめのバリエーションはほぼ不要になった*/
/*文字小さめ*/
.Tsk-ibx1.S{font-size:min(calc(0.4rem + 1.6vw),1.3rem);}
/*文字ごく小さめ*/
.Tsk-ibx1.XS{/*font-size:min(calc(0.33em + 2vw),2em);*/
	font-size:0.95em;}

/*分数を扱う場合*/
.Tsk-ibx1.frc{line-height: 2.5em;
	/*font-size:0.95em;*/
	font-size:min(calc(0.8rem + 0.9vw),1.5rem);}

/* Tsk-ibx1内のdiv4つ
(左からc1L,c1R,c2L,c2R。等式が一つの場合はc1Lとc1Rだけ使う)*/
.Tsk-ibx1 .c1L{text-align:right;}
.Tsk-ibx1 .c1R{text-align:left;}
.Tsk-ibx1 .c2L,
.Tsk-ibx1 .c2R{font-size:0.9em;opacity:0.8;}
.Tsk-ibx1 .c2L{text-align:right;margin-left:1em;}
.Tsk-ibx1 .c2R{text-align:left;}
/*全部下せにする
.Tsk-ibx1 .c1L,.Tsk-ibx1 .c1R,.Tsk-ibx1 .c2L,.Tsk-ibx1 .c2R{display:flex;align-items:flex-end;}*/

/* 計算例を一行下げるバリエ*/
.Tsk-ibx1 .c2L.b,
.Tsk-ibx1 .c2R.b{padding-top:1.7em;}
/* 計算例を二行下げるバリエ*/
.Tsk-ibx1 .c2L.c,
.Tsk-ibx1 .c2R.c{padding-top:3.7em;}

/* 計算例を一行下げるバリエ(分数)*/
.Tsk-ibx1.frc .c2L.b,
.Tsk-ibx1.frc .c2R.b{padding-top:2.7em;}
/* 計算例を二行下げるバリエ(分数)*/
.Tsk-ibx1.frc .c2L.c,
.Tsk-ibx1.frc .c2R.c{padding-top:5.5em;}


/*-----------------------------------------------
	ボックス> 筆算ボックス4(割り算用)
(標準ボックス内に入れる)
「Wrz-ibx」インボックス化
--------------------------------------------------*/
/* ボックス本体 */
.C-box4,.C-box4b{
	position: relative;
	/*display: inline-block;*/
	width:fit-content;
	margin:0 auto;
	padding:0.3em calc(3vw - 0.1em) 0.3em calc(1.5vw - 0.05em);
	background:none;
	text-align:right;
	color:#7d7c79;
	font-style:italic;
	font-family:sans-serif;
	vertical-align: top;
	font-size:1.6em;
	line-height:1.1em;
	letter-spacing:0.15em;}

/* ボックス内本文 */
.C-box4 p,.C-box4b p{margin: 0;padding: 0;}

/* バリエーション(右のパディング微調整) */
.C-box4b{padding-right:calc(1.5vw - 0.05em);}


/*-----------------------------------------------
	ボックス> 筆算ボックス5(因数分解すだれ算用)
(標準ボックス内に入れる)
すだれ算インボックスに置き換えて廃止する
--------------------------------------------------*/
/* ボックス本体 */
.C-box5 {
	position: relative;
	display: inline-block;
	margin:0;
	padding:0.3em calc(3vw - 0.1em) 0.3em calc(1.5vw - 0.05em);
	background:none;
	text-align:right;
	color:#7d7c79;
	font-style:italic;
	font-family:sans-serif;
	vertical-align: top;
	font-size:1.6em;
	line-height:1.2em;
	/*letter-spacing:0.15em;*/}

/* ボックス内本文 */
.C-box5 p {margin: 0;padding: 0;}


/***************************************
すだれ算インボックスSdz-ibx1
D-box1の中に入れて使用
2数の重畳クラスD,3数の重畳クラスT
3ケタの重畳クラスW,4ケタの重畳クラスXW
N進法の重畳クラスNsn
L字線消すPln
****************************************/
.Sdz-ibx1{position:relative;
	width:fit-content;height:fit-content;
    color:#999;
	font-style: italic;font-size:1.5em;
    margin: 0 auto;padding:0 0.8em 0 1.3em;}
/**すだれの段**/
.Sdz-ibx1 .floor{margin-top: 0.3em;
	/*background:#0f02;*/
    position: relative;
    text-align: right;letter-spacing:-0.05em;
    width: 2.0em;
    line-height:1.2;height:1.2em;
    border-bottom: solid 2px;}
.Sdz-ibx1 .floor p{margin:0;}
/*幅広(Sdr1に重複クラスWをつける)*/
.Sdz-ibx1.W .floor{width:2.5em;}
.Sdz-ibx1.XW .floor{width:3.2em;}
/*2数用(Sdr1に重複クラスDをつける。さらに幅広ならW)*/
.Sdz-ibx1.D .floor{width:3.4em;}
.Sdz-ibx1.D.W .floor{width:4.7em;}
/*3数用(Sdr1に重複クラスTをつける。さらに幅広ならW)*/
.Sdz-ibx1.T .floor{width:5.0em;}
.Sdz-ibx1.T.W .floor{width:6.2em;}

/*段ごとの逆カッコ(最下段以外)*/
.Sdz-ibx1 .floor:before{position:absolute;top:-1px;left:1px;
	font-size:1.1em;content:")";}
/*最下段は色々無し*/
.Sdz-ibx1 .floor:last-of-type{border:none;margin-top:0.2em;}
.Sdz-ibx1 .floor:last-of-type:before{display:none;}

/* 右端の因数(floorの中に入れる) */
.Sdz-ibx1 .isu{position: absolute; left: 0; top: 0.1em; transform: translatex(-100%);}
/*不完全な因数(2数しか割れない)*/
.Sdz-ibx1 .isu.imp{opacity:0.7;left:-0.1em;}
.Sdz-ibx1 .isu.imp:before{position:absolute;top:0.06em;left:-0.4em;font-size:0.8em;content:"(";}
.Sdz-ibx1 .isu.imp:after{
	position:absolute;top:0.06em;right:-0.35em;
	font-size:0.8em;content:")";}

/* 途中の約数(floorの中に入れる) */
.Sdz-ibx1 .kaz{position: absolute; right: 0.2em; top: 0em;}
.Sdz-ibx1.D .kaz2{position: absolute; right:51%; top: 0em;}
.Sdz-ibx1.T .kaz2{position: absolute; right:36%; top: 0em;}
.Sdz-ibx1.T .kaz3{position: absolute; right:68%; top: 0em;}
/*不完全な因数の場合の赤の下矢印*/
.Sdz-ibx1 .kaz.dwn:after,
.Sdz-ibx1 .kaz2.dwn:after,
.Sdz-ibx1 .kaz3.dwn:after{
	position:absolute;top:0.9em;right:50%;
	transform: scaleY(0.75) translateX(50%);
	color:red;font-size:0.9em;font-weight:bold;content:"↓";
	background: linear-gradient(90deg,transparent 20%,#fff,#fff ,transparent 80%);}

/*最小公倍数のL型表示線(本体のbefore要素)*/
.Sdz-ibx1:before{
	position:absolute;top:0.1em;right:0.3em;
	border:solid #f502;
	border-radius:0 0 0 0.8em;border-width:0 0 6px 6px;
	width:calc(100% - 1.7em);height:calc(100% - 0.9em);
	content:"";}
/*最小公倍数の矢印(最下段のfloorのafter要素)*/
.Sdz-ibx1 .floor:last-of-type:after{
	position:absolute;top:0;right:-0.6em;
	width:1em;height:1em;content:"";
	/*background:#0f63;*/
	box-shadow:6px 6px 1px #ffe4d6;
	transform-origin:center;
	transform:scale(0.9,0.7) rotate(-45deg) translate(0px,-10px);}

/*最大公約数の表示線(本体のafter要素)*/
.Sdz-ibx1.D:after,.Sdz-ibx1.T:after{
	position:absolute;top:0.1em;left:0.7em;
	border:solid #08f2;
	border-width:0 0 0 6px;
	width:0;height:calc(100% - 0.7em);
	content:"";}
/*最大公約数の矢印(最下段のfloor特別のbefore要素)*/
.Sdz-ibx1.D .floor:last-of-type:before,
.Sdz-ibx1.T .floor:last-of-type:before{
	display:block;
	position:absolute;top:-0.1em;left:-0.7em;
	width:0.8em;height:0.8em;content:"";
	/*background:#0f63;*/
	box-shadow:6px 6px 1px #dcefff;
	transform-origin:center;
	transform:scale(0.6,0.7) translate(-6px,-6px) rotate(45deg);
	z-index:2;}

/** バリエ(N進法) **/
.Sdz-ibx1.Nsn{--col1:#bfc;/*矢印先と本体の色*/
	padding-right:1.8em;}
/*余り(floorの中に入れる) */
.Sdz-ibx1.Nsn .rst{position: absolute;right:-0.8em; top: 0em;transform: translatex(100%);}
/*余り点線*/
.Sdz-ibx1.Nsn .rst:before{position:absolute;left:-1.2em;top:0.6em;
	font-size:0.7em;font-weight:bold;
	content:"…";/*transform:scalex(0.8)*/;}
/*N進法の読みを示すL型表示線(本体のbefore要素)*/
.Sdz-ibx1.Nsn:before{
	position:absolute;top:1.1em;right:0.6em;
	border:solid var(--col1);
	border-radius:0 0 0.4em 0;border-width:0 6px 6px 0;
	width:calc(100% - 2.5em);height:calc(100% - 1.9em);
	content:"";}
/*N進法の読みを示すL型表示線の先端(最上段のfloorのafter要素)*/
.Sdz-ibx1.Nsn .floor:first-of-type:after{
	position:absolute;top:1.0em;right:-1.6em;
	width:1em;height:1em;content:"";
	/*background:#0f63;*/
	box-shadow:6px -6px 1px var(--col1);
	transform-origin:center;
	transform:scale(0.7,0.9) rotate(-45deg);}
/*最小公倍数のL字形先端を非表示*/
.Sdz-ibx1.Nsn .floor:last-of-type:after{display:none;}

/*バリエ(L字線無し)*/
.Sdz-ibx1.Pln:before{display:none;}
.Sdz-ibx1.Pln .floor:last-of-type:before{display:none;}
.Sdz-ibx1.Pln:after{display:none;}
.Sdz-ibx1.Pln .floor:last-of-type:after{display:none;}

/**結果式につける矢印下線**/
/*色設定*/
.gcm1{--col1:#cbe5ff;}
.lcm1{--col1:#fdc;}
/*共通設定*/
.lcm1,.gcm1{position:relative;display:inline-block;
	padding: 0 0.7em 0 0.2em;font-weight: bold;font-size:1.2em;
	z-index:0;/*線のz-indexの前提*/}
.lcm1:before,.gcm1:before{
	position:absolute;bottom:2px;left:0;width:100%;
	height:4px;content:"";
	z-index:-1;/*線が数字の下に来るように*/}
.lcm1:after,.gcm1:after{position:absolute;bottom:0;right:0;
	width:0.7em;height:0.7em;content:"";
	border: solid;border-width: 0 5px 5px 0;
	transform-origin: bottom right;
	transform: scale(1,0.7) translate(4px, -6px) rotate(-45deg);}
/*最大公約数の色*/
.gcm1:before{background:var(--col1);}
.gcm1:after{border-color:var(--col1);}
/*最小公倍数の色*/
.lcm1:before{background:var(--col1);}
.lcm1:after{border-color:var(--col1);}


/***************************************
すだれ算インボックスSdz-ibx2(2021.7作成)
(中のdivにクラスを指定する必要がないバージョン)
D-box1の中に入れて使用
2数の重畳クラスD,3数の重畳クラスT
3ケタの重畳クラスW,4ケタの重畳クラスXW
N進法の重畳クラスNsn
L字線消すPln
****************************************/
.Sdz-ibx2{position:relative;
	width:fit-content;height:fit-content;
    color:#999;
	font-style: italic;font-size:1.5em;
    margin: 0 auto;padding:0 0.8em 0 1.3em;}
/**直下のdivはすだれの段(floor)とみなす**/
.Sdz-ibx2>div{margin-top: 0.3em;
	/*background:#0f02;*/
    position: relative;
    text-align: right;letter-spacing:-0.05em;
    width: 2.0em;
    line-height:1.2;height:1.2em;
    border-bottom: solid 2px;}
.Sdz-ibx2>div p{margin:0;}
/*幅広(Sdr1に重複クラスWをつける)*/
.Sdz-ibx2.W>div{width:2.5em;}
.Sdz-ibx2.XW>div{width:3.2em;}
/*2数用(Sdr1に重複クラスDをつける。さらに幅広ならW)*/
.Sdz-ibx2.D>div{width:3.4em;}
.Sdz-ibx2.D.W>div{width:4.7em;}
/*3数用(Sdr1に重複クラスTをつける。さらに幅広ならW)*/
.Sdz-ibx2.T>div{width:5.0em;}
.Sdz-ibx2.T.W>div{width:6.2em;}

/*段ごとの逆カッコ(最下段以外)*/
.Sdz-ibx2>div:before{position:absolute;top:-1px;left:1px;
	font-size:1.1em;content:")";}
/*最下段は色々無し*/
.Sdz-ibx2>div:last-of-type{border:none;margin-top:0.2em;}
.Sdz-ibx2>div:last-of-type:before{display:none;}

/**  **/
/* 右端の因数(直下div内の最初のdiv) */
.Sdz-ibx2>div>div:first-of-type{position: absolute; left: 0; top: 0.1em; transform: translatex(-100%);}
/*不完全な因数(2数しか割れない)*/
.Sdz-ibx2>div>div:first-of-type.imp{opacity:0.7;left:-0.1em;}
.Sdz-ibx2>div>div:first-of-type.imp:before{position:absolute;top:0.06em;left:-0.4em;font-size:0.8em;content:"(";}
.Sdz-ibx2>div>div:first-of-type.imp:after{
	position:absolute;top:0.06em;right:-0.35em;
	font-size:0.8em;content:")";}

/*不完全な因数の場合の赤の下矢印*/
.Sdz-ibx2>div>div.dwn:after,
.Sdz-ibx2>div>div.dwn:after,
.Sdz-ibx2>div>div.dwn:after{
	position:absolute;top:0.9em;right:50%;
	transform: scaleY(0.75) translateX(50%);
	color:red;font-size:0.9em;font-weight:bold;content:"↓";
	background: linear-gradient(90deg,transparent 20%,#fff,#fff ,transparent 80%);}

/** 途中の約数(直下div内の2番目以降のdiv) **/
/*一番右の約数(最下段のみ特別指定)*/
.Sdz-ibx2>div>div:last-of-type
{position: absolute; right: 0.2em; top: 0em;}
.Sdz-ibx2>div:last-of-type>div:last-of-type,.Sdz-ibx2.D>div:last-of-type>div:last-of-type,.Sdz-ibx2.T>div:last-of-type>div:last-of-type
{position: absolute; right: 0.2em; top: 0em;transform:none;}
/*右から2番目*/
.Sdz-ibx2.D>div>div:nth-of-type(2){position: absolute; right:51%; top: 0em;}
.Sdz-ibx2.D>div:last-of-type>div:first-of-type{position: absolute; right:51%; top: 0em;transform:none;}
.Sdz-ibx2.T>div>div:nth-of-type(3){position: absolute; right:36%; top: 0em;}
.Sdz-ibx2.T>div:last-of-type>div:nth-of-type(2){position: absolute; right:36%; top: 0em;}
/*右から3番目*/
.Sdz-ibx2.T>div>div:nth-of-type(2),.Sdz-ibx2.T>div:last-of-type>div:first-of-type{position: absolute; right:68%; top: 0em;transform:none;}

/*最小公倍数のL型表示線(本体のbefore要素)*/
.Sdz-ibx2:before{
	position:absolute;top:0.1em;right:0.3em;
	border:solid #f502;
	border-radius:0 0 0 0.8em;border-width:0 0 6px 6px;
	width:calc(100% - 1.7em);height:calc(100% - 0.9em);
	content:"";}
/*最小公倍数の矢印(最下段のfloorのafter要素)*/
.Sdz-ibx2>div:last-of-type:after{
	position:absolute;top:0;right:-0.6em;
	width:1em;height:1em;content:"";
	/*background:#0f63;*/
	box-shadow:6px 6px 1px #ffe4d6;
	transform-origin:center;
	transform:scale(0.9,0.7) rotate(-45deg) translate(0px,-10px);}

/*最大公約数の表示線(本体のafter要素)*/
.Sdz-ibx2.D:after,.Sdz-ibx2.T:after{
	position:absolute;top:0.1em;left:0.7em;
	border:solid #08f2;
	border-width:0 0 0 6px;
	width:0;height:calc(100% - 0.7em);
	content:"";}
/*最大公約数の矢印(最下段のfloor特別のbefore要素)*/
.Sdz-ibx2.D>div:last-of-type:before,
.Sdz-ibx2.T>div:last-of-type:before{
	display:block;
	position:absolute;top:-0.1em;left:-0.7em;
	width:0.8em;height:0.8em;content:"";
	/*background:#0f63;*/
	box-shadow:6px 6px 1px #dcefff;
	transform-origin:center;
	transform:scale(0.6,0.7) translate(-6px,-6px) rotate(45deg);
	z-index:2;}

/** バリエ(N進法) **/
.Sdz-ibx2.Nsn{--col1:#bfc;/*矢印先と本体の色*/
	padding-right:1.8em;}
/*途中の答え*/
.Sdz-ibx2.Nsn>div>div:nth-of-type(2){position:absolute;right:0.2em;transform:none;}
/*最下段の修正*/
.Sdz-ibx2.Nsn>div:last-of-type>div:first-of-type{position:absolute;right:0.2em;transform:none;}
/*余り(直下divの中の3番目のdiv) */
.Sdz-ibx2.Nsn>div>div:nth-of-type(3),.Sdz-ibx2.Nsn>div:last-of-type>div:nth-of-type(2){position: absolute;right:-1.3em; top: 0em;/*transform: translatex(-100%);*/}

/*余り点線*/
.Sdz-ibx2.Nsn>div>div:nth-of-type(3):before,
.Sdz-ibx2.Nsn>div:last-of-type>div:nth-of-type(2):before
{position:absolute;left:-1.2em;top:0.6em;
	font-size:0.7em;font-weight:bold;
	content:"…";/*transform:scalex(0.8)*/;}
/*N進法の読みを示すL型表示線(本体のbefore要素)*/
.Sdz-ibx2.Nsn:before{
	position:absolute;top:1.1em;right:0.6em;
	border:solid var(--col1);
	border-radius:0 0 0.4em 0;border-width:0 6px 6px 0;
	width:calc(100% - 2.5em);height:calc(100% - 1.9em);
	content:"";}
/*N進法の読みを示すL型表示線の先端(最上段のfloorのafter要素)*/
.Sdz-ibx2.Nsn>div:first-of-type:after{
	position:absolute;top:1.0em;right:-1.6em;
	width:1em;height:1em;content:"";
	/*background:#0f63;*/
	box-shadow:6px -6px 1px var(--col1);
	transform-origin:center;
	transform:scale(0.7,0.9) rotate(-45deg);}
/*最小公倍数のL字形先端を非表示*/
.Sdz-ibx2.Nsn>div:last-of-type:after{display:none;}

/*バリエ(L字線無し)*/
.Sdz-ibx2.Pln:before{display:none;}
.Sdz-ibx2.Pln>div:last-of-type:before{display:none;}
.Sdz-ibx2.Pln:after{display:none;}
.Sdz-ibx2.Pln>div:last-of-type:after{display:none;}

/** 結果式(sdz-ibx2に隣接したcap1dを使用中) **/ 
.Sdz-ibx2+.cap1d{font-size:1.1em;text-align:left;}
/*矢印下線(spanで挟む)**/
/*色設定*/
.Sdz-ibx2+.cap1d .gcm1{--col1:#cbe5ff;}
.Sdz-ibx2+.cap1d .lcm1{--col1:#fdc;}
.Sdz-ibx2+.cap1d .nsn1{--col1:#bfc;}
/*共通設定*/
.Sdz-ibx2+.cap1d .lcm1,.Sdz-ibx2+.cap1d .gcm1,.Sdz-ibx2+.cap1d .nsn1{position:relative;display:inline-block;padding: 0 0.7em 0 0.2em;font-weight:normal;font-size:1.3em;
	z-index:0;/*線のz-indexの前提*/}
.Sdz-ibx2+.cap1d .lcm1:before,.Sdz-ibx2+.cap1d .gcm1:before,.Sdz-ibx2+.cap1d .nsn1:before{
	position:absolute;bottom:2px;left:0;width:100%;
	height:4px;content:"";
	z-index:-1;/*線が数字の下に来るように*/}
.Sdz-ibx2+.cap1d .lcm1:after,.Sdz-ibx2+.cap1d .gcm1:after,.Sdz-ibx2+.cap1d .nsn1:after{position:absolute;bottom:0;right:0;
	width:0.7em;height:0.7em;content:"";
	border: solid;border-width: 0 5px 5px 0;
	transform-origin: bottom right;
	transform: scale(1,0.7) translate(4px, -6px) rotate(-45deg);}
/*最大公約数の色*/
.Sdz-ibx2+.cap1d .gcm1:before,.Sdz-ibx2+.cap1d .lcm1:before,.Sdz-ibx2+.cap1d .nsn1:before{background:var(--col1);}
.Sdz-ibx2+.cap1d .gcm1:after,.Sdz-ibx2+.cap1d .lcm1:after,.Sdz-ibx2+.cap1d .nsn1:after{border-color:var(--col1);}
/*最小公倍数の色
.Sdz-ibx2+.cap1d .lcm1:before{background:var(--col1);}
.Sdz-ibx2+.cap1d .lcm1:after{border-color:var(--col1);}*/



/***************************************
	周期算インボックス(2021秋作成)
***************************************/
.Skz-ibx1{display:flex;
font-size:min(calc(0.65rem + 1.7vw),1.5rem);
counter-reset:grp-num igp-num ttl-num;}
/** 直下のsectionは群(グループ)に定義する **/
.Skz-ibx1 > section{position:relative;display:flex;margin:0;
padding:1em 0.1em 0em 0.7em;
counter-increment:grp-num;counter-reset:igp-num;}
/* 区切りマーク */
.Skz-ibx1 > section:before{position:absolute;left:-0.17em;
bottom: -0.1em;transform: scalex(0.4);
line-height:1;font-size:5em;font-family:serif;color:#f8b9;
content:"/";opacity:0.7;}
/* 周期番号 */
.Skz-ibx1 > section:after{position:absolute;top:0;left:calc(50% + 0.5em);transform:scaley(0.9) translateX(-50%);
font-weight:bold;font-size:0.9em;color:#f8bb;
content:"["counter(grp-num)"]";}
/* 第一群の特則 */
.Skz-ibx1 > section:first-of-type{padding-left:0;}
.Skz-ibx1 > section:first-of-type:before{display:none;}

/** 直孫のdivは数(項)に定義する **/
.Skz-ibx1 > section > div{position:relative;
margin:0;
padding:1.0em 0 1.0em 0.2em;letter-spacing:-0.1em;
counter-increment:ttl-num igp-num;}
/* 周期内番号 */
.Skz-ibx1 > section > div:before{position:absolute;top:0;left: 50%;
transform: translateX(-50%);
font-size:0.6em;letter-spacing:-0.05em;color:#4af;
content:"〈"counter(igp-num)"〉";}
/* 通し番号 */
.Skz-ibx1 > section > div:after{position:absolute;bottom:0;left: 50%;transform: translateX(-50%);
font-size:0.6em;letter-spacing:-0.05em;color:#4c7;
content:"("counter(ttl-num)")";}

/** グループ(ibx直下のsection)に重畳クラス「man」指定で手動記入
主に最後のグループの記入 **/
.Skz-ibx1 > section.man{padding-left:0;}
/*グループ番号は非表示(手動)*/
.Skz-ibx1 > section.man:after{display:none;}
/*子divの付属要素(通番とグループ内番号)も非表示(手動入力)*/
.Skz-ibx1 > section.man > div:before,.Skz-ibx1 > section.man > div:after
{display:none;}
/* グループの第二子以降divは数(項)に定義して中に更に孫divを3つ入れる(むき出しで文字は入れない) **/
/* 第一孫divは数字(項) */
.Skz-ibx1 > section.man > div >div:first-of-type{transform:scalex(0.8);}
/* 第二孫divは周期内番号 **/
.Skz-ibx1 > section.man > div >div:nth-of-type(2){position:absolute;top:0;left: 50%;transform: translateX(-50%);
font-size:0.6em;letter-spacing:-0.05em;color:#4c7;}
/* 第三孫divは通し番号 **/
.Skz-ibx1 > section.man > div >div:nth-of-type(3){position:absolute;bottom:0;left: 50%;transform: translateX(-50%);
font-size:0.6em;letter-spacing:-0.05em;color:#4af;white-space: nowrap;}

/* グループの第一子(section直下の最初のdiv)はグループ番号になる */
.Skz-ibx1 > section.man>div:first-of-type{position:absolute;top:-1em;left:calc(50% + 0.5em);transform:scaley(0.9) translateX(-50%);
font-weight:bold;font-size:0.9em;color:#f8bb;}

/** グループに重畳クラスlps設定で「中略」 **/
.Skz-ibx1 > section.lps{width:2em;}
/*区切り*/
.Skz-ibx1 > section.lps:before{}
/*グループ番号の代わりに「…」表示*/
.Skz-ibx1 > section.lps:after{position:absolute;
left: calc(50% + 0.1em);top:50%;transform:translatex(-50%);
line-height:1;font-size:0.9em;color:inherit;
content:"・・・";letter-spacing:-0.4em;;}


/*******************************
矢印図インボックスv1(2023.5作成) 
********************************/
/**全体**/.Yjz-ibx1{display:flex;align-items:flex-end;font-size:inherit;}
.Yjz-ibx1 p{}
/**共通して指定する項目(transformは個別に)**/
/*中コンテナと矢印は等幅*/
.Yjz-ibx1 .ctrM,.Yjz-ibx1 .ctrM:after{width:3em;}
/*左右コンテナは等幅*/
.Yjz-ibx1 .ctrL,.Yjz-ibx1 .ctrR{width:8em;display:flex;flex-direction:column;}
/*フォントサイズ*/
.Yjz-ibx1 .ctrL .mot,
.Yjz-ibx1 .ctrR .sak,
.Yjz-ibx1 .ctrM .arw{font-size:1.5em;transform:scaleX(0.9);line-height:1;}
.Yjz-ibx1 .ctrL .cmt,
.Yjz-ibx1 .ctrR .cmt,
.Yjz-ibx1 .ctrM .cmt{font-size:1em;line-height:1}
/*コメントの上マージン*/
.Yjz-ibx1 .ctrL .cmt,
.Yjz-ibx1 .ctrR .cmt{margin-top:0.4em;}
/*改行しない文字群*/
.Yjz-ibx1 .ctrL .cmt,.Yjz-ibx1 .ctrR .cmt,
.Yjz-ibx1 .ctrM .cmt,Yjz-ibx1 .ctrM .arw
{white-space: nowrap;}


/**左コンテナと中身**/
.Yjz-ibx1 .ctrL{align-items:flex-end;text-align:right;color:#4a98f2;}
.Yjz-ibx1 .ctrL .mot{padding-top:em;transform-origin:right;}
.Yjz-ibx1 .ctrL .cmt{width:fit-content;
	transform:scalex(0.9) translateX(max(0px,calc((100% - 5em) / 2)));transform-origin:right;}

/**中コンテナ(幅2em固定)と中身**/
.Yjz-ibx1 .ctrM{position:relative;display:flex;flex-direction:column;align-items:center;text-align: center;margin-bottom:3.6em;color:#5fd486;}
/*矢印はコンテナの付属要素で等幅*/
.Yjz-ibx1 .ctrM:after{position:absolute;bottom:-0.8em;left:0;
	content:"";height:1em;
	background-image: url(https://zky-jukesan.com/wp-content/uploads/2023/05/矢印001e.png)
	;background-size: contain;background-repeat: no-repeat;}

/*矢の数と「x」*/
.Yjz-ibx1 .ctrM .arw{position:relative;width:fit-content;margin:0 auto;padding:0; transform: scaleX(0.85);letter-spacing:-0.05em;}
.Yjz-ibx1 .ctrM .arw:before
{position:absolute;bottom:0;right:calc(100% + 0.2em);content:"x";font-size:0.8em;}
.Yjz-ibx1 .ctrM .cmt{transform:scalex(0.9);margin-bottom: 0.3em;}

/**右コンテナと中身**/
.Yjz-ibx1 .ctrR{text-align:left;color:#e176a1;align-items: flex-start}
.Yjz-ibx1 .ctrR .sak{padding-top:em;transform-origin:left;}
.Yjz-ibx1 .ctrR .cmt{width:fit-content;
	transform:scalex(0.9) translateX(calc(-1 * max(0px,calc((100% - 5em) / 2))));transform-origin:left;}


/*******************************
矢印図インボックスv2(2023.5作成) 
********************************/
/**全体**/.Yjz-ibx2{display:flex;align-items:flex-end;font-size:inherit;}
.Yjz-ibx2 p{}
/**共通して指定する項目(transformは個別に)**/
/*中コンテナと矢印は等幅*/
.Yjz-ibx2 .ctrM .ctrMT,
.Yjz-ibx2 .ctrM .ctrMB,
.Yjz-ibx2 .ctrM .ctrMT:after,
.Yjz-ibx2 .ctrM .ctrMB:after{width:3em;}
/*左右コンテナは等幅*/
.Yjz-ibx2 .ctrL,.Yjz-ibx2 .ctrR{width:8em;display:flex;flex-direction:column;margin-bottom:3.3em;}
/*フォントサイズ*/
.Yjz-ibx2 .ctrL .mot,
.Yjz-ibx2 .ctrR .sak,
.Yjz-ibx2 .ctrM .arw{font-size:1.5em;transform:scaleX(0.9);line-height:1;}
.Yjz-ibx2 .ctrL .cmt,
.Yjz-ibx2 .ctrR .cmt,
.Yjz-ibx2 .ctrM .cmt{font-size:1em;line-height:1}
/*コメントの上マージン*/
.Yjz-ibx2 .ctrL .cmt,
.Yjz-ibx2 .ctrR .cmt{margin-top:0.4em;}
/*改行しない文字群*/
.Yjz-ibx2 .ctrL .cmt,.Yjz-ibx2 .ctrR .cmt,
.Yjz-ibx2 .ctrM .cmt,Yjz-ibx1 .ctrM .arw
{white-space: nowrap;}


/**左コンテナと中身**/
.Yjz-ibx2 .ctrL{align-items:flex-end;text-align:right;color:#4a98f2;}
.Yjz-ibx2 .ctrL .mot{padding-top:em;transform-origin:right;}
.Yjz-ibx2 .ctrL .cmt{width:fit-content;
	transform:scalex(0.9);transform-origin:right;}

/**中コンテナ(幅2em固定)と中身**/
.Yjz-ibx2 .ctrM{position:relative;display:flex;flex-direction:column;align-items:center;text-align: center;color:#5fd486;}
/*中上コンテナと中下コンテナ*/
.Yjz-ibx2 .ctrM .ctrMT,.Yjz-ibx2 .ctrM .ctrMB{position:relative;display:flex;flex-direction:column;align-items:center;}
.Yjz-ibx2 .ctrM .ctrMT{margin-bottom:4.5em;}
.Yjz-ibx2 .ctrM .ctrMB{}

/*矢印は中上と中下コンテナの付属要素で等幅*/
.Yjz-ibx2 .ctrM .ctrMT:after,
.Yjz-ibx2 .ctrM .ctrMB:after{position:absolute;content:"";height:1em;
	background-image: url(https://zky-jukesan.com/wp-content/uploads/2023/05/矢印001e.png)
	;background-size: contain;background-repeat: no-repeat;}
.Yjz-ibx2 .ctrM .ctrMT:after{bottom:-1em;left:0;}
.Yjz-ibx2 .ctrM .ctrMB:after{bottom:100%;left:0;transform: rotate(185deg);}

/*矢の数と「x」*/
.Yjz-ibx2 .ctrM .ctrMT .arw{position:relative;width:fit-content;margin:0 auto;padding:0; transform: scaleX(0.85);letter-spacing:-0.05em;}
.Yjz-ibx2 .ctrM .ctrMT .arw:before
{position:absolute;bottom:0;right:calc(100% + 0.2em);content:"x";font-size:0.8em;}
.Yjz-ibx2 .ctrM .ctrMT .cmt{transform:scalex(0.9);margin-bottom: 0.3em;}
/*矢の数(逆)と「÷」*/
.Yjz-ibx2 .ctrM .ctrMB .arw{position:relative;width:fit-content;margin:0 auto;padding:0; transform: scaleX(0.85);letter-spacing:-0.05em;}
.Yjz-ibx2 .ctrM .ctrMB .arw:before
{position:absolute;bottom:0;right:calc(100% + 0.2em);content:"÷";font-size:0.75em;}
.Yjz-ibx2 .ctrM .ctrMB .cmt{transform:scalex(0.9);margin-bottom: 0.3em;}

/**右コンテナと中身**/
.Yjz-ibx2 .ctrR{text-align:left;color:#e176a1;align-items: flex-start}
.Yjz-ibx2 .ctrR .sak{padding-top:em;transform-origin:left;}
.Yjz-ibx2 .ctrR .cmt{width:fit-content;
	transform:scalex(0.9);transform-origin:left;}



/*-----------------------------------------------
	ボックス> まとめボックス改め目次ボックス
------------------------------------------------*/
/***** M-box1(現行。box-ctr2に入れて配置しなくても可) *****/
/* 色設定 */
.M-box1 .box-title {color: #55a8f5;}/* タイトルの色 */
.M-box1 {border-color:#82c1fb;}/* ボーダーの色 */
.M-box1:after{color:#82c1fb;}/* ロゴはボーダーと同色 */
.M-box1 {color:#6597c5;}/* ボックス内本文色(タイトル消去時) */ 
.M-box1 p {color:#6597c5;}/* ボックス内本文色 */ 

/* ボックス本体 */
.M-box1 {position:relative;width:fit-content;
	margin: 2em auto;background-color:#FFF5 ;
	border-style:solid;	border-width:3px;border-radius:0.5em 1.5em;
	box-shadow: 0 0 0 4px white, 0 0 0 7px #82c1fb;
	padding: 1em min(calc(0.4rem + 0.95vw),1.2em) 1em;
	font-size:min(calc(0.75rem + 0.75vw),1.2rem);}
/* ボックス内段落 */
.M-box1 p{margin:0 0.3em 0.5em;text-indent:-1.5em;padding:0 0 0 1.5em;line-height:1.4;}
/* バリエーション(インデントなし) */
.M-box1.no-idt{text-indent:0em;padding-left:0em;}

/* タイトル */
.M-box1 .box-title {display: inline-block;width:fit-content;
	position: absolute;
	top:calc(-0.5em - 7px);right:50%;transform:translatex(50%);
	background: #fff;
	padding: 0.2em 0.3em;
	line-height: 1;font-size:1.1em;	font-weight: bold;
	letter-spacing: 0.1em;
	white-space:nowrap;}

/* ボックス下辺の固定ロゴ */
.M-box1:after{position: absolute;
	left:50%;transform:translatex(-50%);bottom:calc(-0.5em - 6px);
	background-color:#fff;
	padding: 0 0.3em;
	font-size:0.85em;font-weight: bold;line-height:1.0em;
	content: 'そうちゃ式';/* ロゴ内容 */
	z-index: 1;
	letter-spacing:0.1em;}

/* 旧M-box */
/* 色設定 */
.M-box .box-title {color: #55a8f5;}/* タイトルの色 */
.M-box {border-color:#82c1fb;}/* ボーダーの色 */
.M-box:after{color:#82c1fb;}/* ロゴはボーダーと同色 */
.M-box {color:#6597c5;}/* ボックス内本文色(タイトル消去時) */ 
.M-box p {color:#6597c5;}/* ボックス内本文色 */ 

/* ボックス本体 */
.M-box {position: relative;
	width: calc(19em + 17vw);
	max-width: 97%;
	min-width: 60%;
	margin: 2em auto;
	background-color:#FFF5 ;
	border-style:solid;
	border-width:3px;
	border-radius: 8px 32px;
	padding: 0.5em 1em;
	font-size: calc(0.9em + 0.2vw);
	box-shadow: 0 0 0 4px white, 0 0 0 7px #82c1fb;
	}

/* ボックス上辺の可編タイトル */
.M-box .box-title {position: absolute;
	display: inline-block;
	top: -15px;
	left: calc(50% - 5em);
	padding: 2px 4px 0px 4px;
	line-height: 1;
	font-size: 19px;
	background: #FFF;
	font-weight: bold;
	letter-spacing: 0.2em;}

/* ボックス下辺の固定ロゴ */
.M-box:after{position: absolute;
	left: calc(50% - 2.1em);
	bottom: -12px;
	background-color:#FFF ;
	font-size:14px;
	font-weight: bold;
	content: 'そうちゃ式';/* ロゴ内容 */
	padding: 0px 3px;
	z-index: 1;
	line-height:1.0em;}

/* ボックス内本文 */
.M-box p {margin: 0;padding: 0;line-height:1.6em;}

/*-----------------------------------------------
		ボックス> ラベル付きボックスA(2020改造)
------------------------------------------------*/
/* まとめて色設定 */
.L-boxA .box-title {
	color:#fff;/* ラベル文字色 */
	background:linear-gradient(90deg,#537ffb -43%,#a2cff9 169%);/* ラベルの背景色は強め */
	border-color:#a7d5ff;}/* ラベルのボーダー同色 */
.L-boxA {border-color:#a7d5ff;}/* 本文ボーダー同色 */
.L-boxA:after{
	background-color: #55a8f5;/* ロゴ背景色同色 */
	border-color:#a7d5ff;/* ロゴボーダー同色 */
	color:rgba(255, 255, 255, .7);/* 固定ロゴは白 */}
.L-boxA {color:#6597c5;}/* ボックス内本文色 */ 

/* ボックス本体 */
.L-boxA {position: relative;
	width: calc(80% + 4em);background-color:#FFF5 ;
	margin:2.5em auto 1.5em;
	border-style:solid;	border-width:3px;border-radius:0 30px 12px 30px;
	padding:0.3em 1em 0.5em;font-size:0.95em;
	counter-reset:lbx-qst;/* 小問のカウンターリセット */}

/* ボックス上辺の可編タイトル */
.L-boxA .box-title {position: absolute;	display: inline-block;
	top:calc( -1.9em);left: -3px;
	border-style:solid;border-width:3px;
	border-radius:14px 30px 0px 0px;
	padding:0.3em 1em 0.2em 0.7em;
	line-height: 1;letter-spacing: 0.2em;
	font-size:1.01em;font-weight: bold;}

/* ボックス右下の固定ロゴ */
.L-boxA:after{position: absolute;right: -2px;bottom: -3px;
	border-width:0px 2px 2px 0px;border-style: solid;
	border-radius:12px 0px 12px 0px;/* 左上と右下は丸く */
	padding:0.4em 0.8em 0.2em 1em;
	font-size:10px;font-weight: bold;
	content:'そうちゃ式';letter-spacing: 0.1em;line-height: 1;
	z-index: 1;}

/*ボックス内の共通文言(カウンターなし)は無印のdivに囲めばよい*/

/** ボックス内本文(カウンター付き) **/
.L-boxA p {position:relative;
	margin:0 0 0.3em;padding:0 0 0 1em;
	font-size:inherit;line-height:1.5em;}
.L-boxA p:last-child {margin-bottom:0.5em;}
/*カウンター*/
.L-boxA p:before{position:absolute;left:-0.5em;top:0;
counter-increment:lbx-qst;content:"("counter(lbx-qst)")";}
/*一問しかない場合はカウンター非表示*/
.L-boxA p:only-of-type{padding-left:0;}
.L-boxA p:only-of-type:before{display:none;}


/*------------------------------------------------------------
	ボックス> タイトル付きボックス(Bを採用中)
------------------------------------------------------------- */
/* 色設定 */
.T-box .box-title,.box-footer {
	color: rgba(255,255,255,0.9);/* タイトルは白 */
	background:linear-gradient(to right,#6c5987, #523f6d 30%,#523f6d 70%,#6c5987);}/* タイトル背景色 */
.T-box {border-color:rgba(108, 89, 135, 0.8);}/* 本体ボーダー色は透明度を下げる */
.T-box:after{color:#fff8;}/* 固定ロゴは白 */

/* ボックス本体 */
.T-box {position:relative;
	display: inline-block;/* 可変幅 */
	min-width:300px;/* 最低の幅 */
	max-width: calc(100vw - 60px);/* 最大幅 */
	text-align:center;/* 要素は中央寄せ */
	background-color:#FFF ;
	color:#000;
	padding-top: 3px;
	border-radius: 10px;
	margin: 10px 5vw 20px 5vw;
	vertical-align:top;
	box-shadow: 0px 0px 0px 4px #6c5987 inset;/* ボーダーの代わりにぼかしのない影を内側に */}

/* 可編タイトル */
.T-box .box-title {
	font-size: 1.1em;
	border-radius: 10px 10px 0px 0px;
	padding:4px 0px;
	text-align: center;
	font-weight: bold;
	letter-spacing: 4px;
	line-height: 1.2em;}

/* 可編フッター */
.T-box .box-footer {
	color:#c1bacc;
	font-size: 0.8em;
	border-radius: 0px 0px 7px 7px;
	padding:6px 0.5em 4px;
	text-align: right;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 0.8em;}

/* タイトル右上の固定ロゴ */
.T-box:after {position: absolute;
	right:0.7em;
	top:0em;
	font-size:0.75em;
	font-weight: bold;
	letter-spacing:-0.1em;
	content: 'そうちゃ式';/* ロゴの内容 */
	/*padding-left: 0px;*/
	z-index: 1;}

/* ボックス本文 */
.T-box p {display:inline-block;/* 本文も可変幅 */
	text-align:left;/* 本文は左寄せ */
	line-height:1.6em;
	padding: 10px 30px 15px 30px;
	margin: 0;}

/*------------------------------------------------------------
	ボックス> タイトル付きボックスA(旧版の復活プロジェクト)
------------------------------------------------------------- */
/* 色設定 */
.T-boxA .box-title,.box-footer {
	color: rgba(255,255,255,0.9);/* タイトルは白 */
	background:linear-gradient(to right,#6c5987, #523f6d 30%,#523f6d 70%,#6c5987);}/* タイトル背景色 */
.T-boxA {border-color:rgba(108, 89, 135, 0.8);}/* 本体ボーダー色は透明度を下げる */
.T-boxA:after{color:rgba(255,255,255,0.4);}/* 固定ロゴは半透明の白 */

/* ボックス本体 */
.T-boxA {
	position:relative;
	/*display: inline-block; 可変幅 */
	width: calc(19em + 17vw);/* 固定幅 */
	/*min-width:300px;/* 最小幅 */
	max-width:97%;/* 最大幅 */
	text-align:center;/* 要素は中央寄せ */
	background-color:#FFF ;
	color:#000;
	padding:0 0 0.5em 0;
	border-radius: 10px 30px;
	border-width:3px;
	border-style:solid;
	margin:0.5em auto;
	font-size: calc(0.9em + 0.2vw);
}
/* 可編タイトル */
.T-boxA .box-title {
	font-size: 1.05em;
	border-radius: 7px 27px 0px 0px;
	padding:6px 0px;
	text-align: center;
	font-weight: bold;
	letter-spacing: 4px;
	line-height: 1.2em;
}
/* 可編フッター */
.T-boxA .box-footer {
	color:#c1bacc;
	font-size: 0.8em;
	border-radius: 0px 0px 7px 27px;
	padding:8px 0.5em;
	text-align: right;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 0.8em;
}

/* タイトル右上の固定ロゴ */
.T-boxA:after {
	position: absolute;
	right: 1.3em;
	top: 0.2em;
	font-size:0.7em;
	font-weight: bold;
	letter-spacing: 1px;
	content: 'そうちゃ式';/* ロゴの内容 */
	padding-left: 0px;
	z-index: 1;
}

/* ボックス本文 */
.T-boxA p {
	display:inline-block;/* 本文も可変幅 */
	text-align:left;/* 本文は左寄せ */
	line-height:1.6em;
	padding:0.5em 1em 0;
	margin: 0;
}
/*------------------------------------------------------------
	ボックス> タイトル付きボックスB(使用中止。置き換え後に廃棄)
------------------------------------------------------------- */
/* 色設定 */
.T-boxB .box-title,.box-footer {
	color: rgba(255,255,255,0.9);/* タイトルは白 */
	background:linear-gradient(to right,#6c5987, #523f6d 30%,#523f6d 70%,#6c5987);}/* タイトル背景色 */
.T-boxB {border-color:rgba(108, 89, 135, 0.8);}/* 本体ボーダー色は透明度を下げる */
.T-boxB:after{color:rgba(255,255,255,0.6);}/* 固定ロゴは白 */

/* ボックス本体 */
.T-boxB {position:relative;
	display: inline-block;/* 可変幅 */
	min-width:300px;/* 最小幅 */
	max-width: calc(100vw - 60px);/* 最大幅 */
	text-align:center;/* 要素は中央寄せ */
	background-color:#FFF ;
	color:#000;
	padding-top: 3px;
	border-radius: 10px;
	margin: 10px 5vw 20px 5vw;
	box-shadow: 0px 0px 0px 4px #6c5987 inset;/* ボーダーの代わりにぼかしのない影を内側に */}

/* 可編タイトル */
.T-boxB .box-title{font-size: 1.1em;
	border-radius: 10px 10px 0px 0px;
	padding:4px 0px;
	text-align: center;
	font-weight: bold;
	letter-spacing: 4px;
	line-height: 1.2em;}

/* 可編フッター */
.T-boxB .box-footer{color:#c1bacc;
	font-size: 0.8em;
	border-radius: 0px 0px 7px 7px;
	padding:6px 0.5em 4px;
	text-align: right;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 0.8em;}

/* タイトル右上の固定ロゴ */
.T-boxB:after{position: absolute;
	right: 7px;
	top: 1px;
	font-size:13px;
	font-weight: bold;
	letter-spacing: 1px;
	content: 'SSHT';/* ロゴの内容 */
	padding-left: 0px;
	z-index: 1;}

/* ボックス本文 */
.T-boxB p {
	display:inline-block;/* 本文も可変幅 */
	text-align:left;/* 本文は左寄せ */
	line-height:1.6em;
	padding: 10px 30px 15px 30px;
	margin: 0;}

/*************************************
ボックス>アフィリエイト用
(2021.11本館から移転)
*************************************/
/***バナーラッパー(320x50のバナーを想定して幅を320に統一
中にバナーリンクとマイクロコピーを入れる)***/
.Bnr-wrap1{width:320px;height:calc(60px + 2em); margin:0 0.5em;letter-spacing: 0.1em; font-size: 0.8em; text-align: center;}
/*** バナーコンテナ(ラッパーを入れる) ***/
.Bnr-ctr1{position:relative;margin:1em 0 2em;
	display:flex;flex-wrap:wrap;justify-content:center;padding-top:1.5em;background:#fffa;}
/** コンテナのタイトル(「スポンサーリンク」等) **/
.Bnr-ctr1 .title{position:absolute;top:0;left:50%;transform:translatex(-50%);
	font-size:0.9em;line-height:1;color:#000b;}
/** タイトル無しの重畳クラス **/
.Bnr-ctr1.no-title{padding-top:0;}
.Bnr-ctr1.no-title .title{display:none;}

/*スポンサー表示(廃止)
.Bnr-ctr1:before{position:absolute;top:0;left:50%;
	transform:translatex(-50%);font-size:0.9em;line-height:1;
	color:#000b;content:"スポンサーリンク";}*/

/*--------------------------------------------------------
	ボックス>(新)設問用ボックス(見出しと合わせたラベルボックス風)
----------------------------------------------------------*/
/** 採用版Q-box0a,Q-box0b(　ベース)(元を消さずにコピーして名前変更) **/
/** (旧版)候補2a,2b(2019初頭に使用) **/
/* a.bそれぞれの色設定 */
.Q-box2a {border-color:var(--Qbx-col-a);}/* aボーダー色 */
.Q-box2a:after{color:var(--Qbx-col-a);}/* aロゴは明彩を上げる */
.Q-box2b {border-color:var(--Qbx-col-b);}/* bボーダー色 */
.Q-box2b:after{color:var(--Qbx-col-b);}/* bロゴ色 */

/* a,b共通のボックス本体設定 */
.Q-box2a,
.Q-box2b{position:relative;
	background-color:white ;
	color:#505050;
	padding: 15px 20px 15px 20px;
	border-style:solid;
	border-width:3px;
	border-radius:0px 24px 10px 24px;
	margin: 0px 0px 10px 0px;}

/* 右下の固定ロゴ共通設定 */
.Q-box2a:after,
.Q-box2b:after{position: absolute;
	right: 0.6em;
	bottom: -5px;
	background-color:#FFF ;
	font-size:14px;
	font-weight: bold;
	content: 'SSHT';
	padding-left: 3px;
	z-index: 1;
	line-height:1.0em;}


/** (新版)候補4(20190225-)完全に大問の中に入れるタイプ。内側のボックス(inner)も設定 **/
/* a.bそれぞれの色設定 */
.Q-box4La {border-color:var(--Qbx-col-a);}/* aボーダー色 */
.Q-box4La:after{color:var(--Qbx-col-a);}/* aロゴは明彩を上げる */
.Q-box4Lb {border-color:var(--Qbx-col-b);}/* bボーダー色 */
.Q-box4Lb:after{color:var(--Qbx-col-b);}/* bロゴ色 */

/* 大問ボックス本体(最外枠)共通設定 */
.Q-box4La,
.Q-box4Lb{position:relative;
	background-color:#fff3 ;/*少し半透明にする*/
	color:#505050;
	padding: 5px 5px 0.5em;
	border-style:solid;
	border-width:3px;
	border-radius:0px 35px 10px 35px;
	margin: 0px 0px 10px 0px;}

.Q-box4La p:last-child,
.Q-box4Lb p:last-child{margin-bottom:0em;}

/* 大問右下の固定ロゴ共通設定 */
.Q-box4La:after,
.Q-box4Lb:after{position: absolute;
	right: 0.9em;
	bottom: -0.5em;
	background-color:#FFF ;
	font-size:0.9em;
	font-weight: bold;
	content: 'そうちゃ式';
	padding:0 0.3em;
	z-index: 1;
	line-height:1.0em;}

/* 大問内側の枠(inner) */
.Q-boxIn4La,
.Q-boxIn4Lb {display:block;
	box-shadow: 0 0 0 2px inset white;
	padding:10px 15px 18px;
	border-style:solid;
	border-width:2px;
	border-radius:1px 30px 7px 30px;
	margin:0px 0 0.5em;
	font-size:1em;}

.Q-boxIn4La{border-color:#95cfa9;
	background: linear-gradient(150deg,#fff 30%,#f0fdd8);}
.Q-boxIn4Lb{border-color:#adbefb;
	background: linear-gradient(150deg,#fff 20%,#e7eefd);}

/* 小問の外枠 */
.Q-box4Sa,
.Q-box4Sb{
	position:relative;
	/*background-color:#fff7;*/
	color:#505050;
	padding: 5px 5px 0.5em;
	border-style:solid;
	border-width:2px;
	border-radius:0px 30px 10px 30px;
	margin: 0px 5px 15px;}
.Q-box4Sa{border-color:#c4eab7;}
.Q-box4Sb{border-color:#a7e4f1;}

/* 小問ボックス内本文(詰めすぎたので保留中)
.Q-box4Sa p,
.Q-box4Sb p{margin-bottom:0.5em;line-height:1.5em;}*/

.Q-box4Sa p:last-child,
.Q-box4Sb p:last-child{margin-bottom:0em;}

/* 小問内側の枠(inner) */
.Q-boxIn4Sa,.Q-boxIn4Sb {
	display:block;
	background-color:#fff5;
	padding:10px 15px;
	border-style:solid;
	border-width:2px;
	border-radius:1px 25px 7px 25px;
	margin:0 0 0.3em;}
.Q-boxIn4Sa{
	border-color:#a1d6ad;
	background: linear-gradient(150deg,#fff 10%,#f0fdd8 200%);}
.Q-boxIn4Sb{
	border-color:#85bfe8;
	background: linear-gradient(150deg,#fff 10%,#e7eefd 200%);}

/*****************************************************************
					Q-box5(2020.4)と付属物
完全に大問の中に入れるタイプ。設問を入れる内側のボックス(inner)も設定
主に小問のボックスを大問のデザインとは変えて弱くする変更
*********************************************************************/

/******* 大問の問題タブ(Q-box5Lの直前に置く)(h4見出しに設定) ********/
/* a,bの共通部分 */
.article .QT31a,
.article .QT31b {display: inline-block;
	min-width:280px;
	font-size: 1.2em;
	font-weight: 700;
	vertical-align:bottom;
	padding:9px 28px 4px 17px;
	border-radius:15px 33px 0px 0px;
	border: solid 2px #fff;
	margin:15px 0px 0px 3px;
	letter-spacing: .15em;
	line-height: 0.9em;}

.article .QT31a::after,
.article .QT31b::after {display:none;}

/* a,bそれぞれ色の指定 */
.article .QT31a {color: #fff;
	background:linear-gradient(to right,#0c8080 -30%,#afdba800 
 89%),repeating-linear-gradient(#7bbc7b,#7bbc7b 3px,#afdba8 3px,#afdba8 5px);
	box-shadow: 0 0 0 3px var(--Qbx-col-a);}
.article .QT31b {color: #fff;
	background:linear-gradient(to right,#0061c3 -30%, #8fe2eb00),repeating-linear-gradient(#4ea7d9,#4ea7d9 3px,#8fe2eb 3px,#8fe2eb 5px);
	box-shadow: 0 0 0 3px var(--Qbx-col-b);}

/***** 大問ボックス(Q-box5L)設定 *****/
/* 本体(最外枠)共通設定 */
.Q-box5La,
.Q-box5Lb{
	position:relative;
	background-color:#fff3 ;/*少し半透明にする*/
	color:#505050;
	padding: 5px 5px 0.5em;
	border-style:solid;
	border-width:3px;
	border-radius:0px 35px 10px 35px;
	margin: 0px 0px 10px 0px;
}

/* a.bそれぞれの色設定 */
.Q-box5La {border-color:var(--Qbx-col-a);}/* aボーダー色 */
.Q-box5La:after{color:var(--Qbx-col-a);}/* aロゴは明彩を上げる */
.Q-box5Lb {border-color:var(--Qbx-col-b);}/* bボーダー色 */
.Q-box5Lb:after{color:var(--Qbx-col-b);}/* bロゴ色 */

/* 大問ボックス内本文(一時停止中) */
/*.Q-box5La p,
.Q-box5Lb p:last-child{margin-bottom:0em;}*/

/* 大問右下の固定ロゴ共通設定 */
.Q-box5La:after,
.Q-box5Lb:after{
	position: absolute;
	right: 0.9em;
	bottom: -0.5em;
	background-color:#FFF ;
	font-size:0.9em;
	font-weight: bold;
	content: 'そうちゃ式';
	padding:0 0.3em;
	z-index: 1;
	line-height:1.0em;
}

/* 大問内側の問題文用の枠(inner) */
/* 共通設定 */
.Q-boxIn5La,.Q-boxIn5Lb {
	display:block;
	box-shadow: 0 0 0 2px inset white;
	padding:10px 15px 18px;
	border-style:solid;
	border-width:2px;
	border-radius:1px 30px 7px 30px;
	margin:0 0 0.5em;
	font-size:1em;
}
/* a/b色設定 */
.Q-boxIn5La{
	border-color:#95cfa9;
	background: linear-gradient(150deg,#fff 30%,#f0fdd8);
}
.Q-boxIn5Lb{
	border-color:#adbefb;
	background: linear-gradient(150deg,#fff 20%,#e7eefd);
}

/******** 小問の問題タブ(Q-box5Sの直前に置く)(h5見出しに設定) *********/
/* a,b共通設定 */
.article  *.QT49a,
.article  *.QT49b{display: inline-block;
	/*min-width:200px;*/
	color:white;
	font-size: 1.05em;
	font-weight: 700;
	vertical-align: bottom;
	padding: 0.4em 1em 0.25em 0.7em;
	border-radius:15px 30px 0px 0px;
	border: solid 1px white;
	margin: 15px 0px 0px 7px;
	letter-spacing: .1em;
	line-height: .8em;}

/* a,b色設定(枠線はボックスシャドウで表現) */
.article  *.QT49a {	color:white;
	background:linear-gradient(to right,#41a781,#bee2ad);
	box-shadow: 0px 2px 0 0px white, 0px 0px 0 2px #c4eab7;}
.article  *.QT49b {	color:white;
	background:linear-gradient(to right,#3a99e0,#88dcea);
	box-shadow: 0px 2px 0 0px white, 0px 0px 0 2px #a7e4f1;}

/********小問ボックス(Q-box5S)設定*********/
/* 小問の外枠 */
.Q-box5Sa,
.Q-box5Sb{
	position:relative;
	/*background-color:#fff7;*/
	color:#505050;
	padding: 5px 5px 1em;
	border-style:dashed;
	border-top-style:solid;
	border-width:2px;
	border-radius:0px 30px 10px 30px;
	margin: 0px 5px 15px;
}
.Q-box5Sa{border-color:#c4eab7;}
.Q-box5Sb{border-color:#b7e8f3;}

/* 小問ボックス内本文(一時停止中) */
/*.Q-box5Sa p,
.Q-box5Sb p{margin-bottom:0.5em;line-height:1.5em;}
.Q-box5Sa p,
.Q-box5Sb p:last-child{margin-bottom:0em;}*/

/* 小問内側の問題用の枠(inner) */
.Q-boxIn5Sa,.Q-boxIn5Sb {
	display:block;
	background-color:#fff5;
	padding:10px 15px;
	border-style:dashed;
	border-width:2px;
	border-radius:1px 25px 7px 25px;
	margin:0 0 0.5em;
	font-size:1em;
}
.Q-boxIn5Sa{
	border-color:#d8f1cf;
	background: linear-gradient(150deg,#fff 10%,#f0fdd8 200%);
}
.Q-boxIn5Sb{
	border-color:#b7e8f3a8;
	background: linear-gradient(150deg,#fff 10%,#e7eefd 200%);
}



/* -------------------------------------------------------
	ボックス> 追加クラス
--------------------------------------------------------*/
/* 破線にする*/
.dashed {border-style:dashed ;}

/* borderを細くする */
.thin {border-width:2px;}

/* 半透明にする(リンク無しを暗示) */
.weak{opacity:0.5;}

/* 幅狭 <span>にして横に並べる */
.nrw {min-width:0px;margin: 10px 5px 10px 30px;	vertical-align: top;}

/* ブロック化(前後で改行する) */
.blk{display:block;width:300px;}

/* 右寄せ(筆算・すだれ算) 多分未使用。近日廃止*/
.right {text-align:right;}

/* 幅広 横幅一杯の固定幅 */
.wide{display:block;margin: 15px 10px 20px 10px;}

/* グリーンモニタ風(Shortcodes-Ultimateと同じ名前「GMN」にならないように注意) */
.GMn {
	color:var(--GRN-col-1);
	background-color:var(--GRN-col-2) ;
	padding: 10px 20px;
	/*border: 2px solid #333e39;*/
	border-radius: 10px;
	/*margin: 0px 30px 10px 30px;*/
}

/************* ロゴ関係の追加クラス ****************/
/* ボックスの固定ロゴを消す */
.no-logo::after{display:none;}
/*.N-box.no-logo{margin-top:0px;min-width:150px;}/* N-boxのロゴ無し(画像ボックス)は小型化 */
.N-box.dashed.no-logo{margin-top:0em;margin-bottom:0.5em;border-color:#bce;}/* N-boxの破線ロゴ無し(画像ボックス)は上下のマージンを減らす */

/* ボックスの固定ロゴを第2案に置き換え */
.logo2::after{content:"図解算数";
	letter-spacing:0.1em;
	font-size:0.85em;
	padding-right:0.1em;}

/******************************************
				フォーム
*****************************************/
/******************小さなボタン(戻ったり止めたり)*******************/
.S-btn{width:100%;height:2.5em;
	margin:0 auto 0.5em;
	border: solid 1px #0006;border-radius: 0.4em 1em;
	background: linear-gradient(#fff,#bbbbbb 60%,#a9a9a9 61%,#eee);
	padding: 0em 1em;
	text-align: center;letter-spacing: 0em;
	font-size: 0.9em;font-family: auto;
	text-shadow: 1px 1px 1px #fffc;box-shadow: 0px 0px 1px 2px #fffc inset;}

/****** CTAボタン(CTA-btn1)(20200807改定) ******/
/* ボタンコンテナ */
.btn-ctr1{display: flex;justify-content:space-around;
	margin: 0px 0px 0.5em;background:#fff;}
/* ボタンラッパー */
.CTA-btn-wrap{/*width:50%;*/
	margin: 0px;padding: 0px;text-align:center;}
/* 2つ入りの場合の追加クラス(廃止)
.btn-ctr1.double .CTA-btn-wrap{width:48%;}*/
/*ボタン本体*/
.CTA-btn-wrap .btn{position:relative;width:calc(100% - 5px);
	margin: 0px 3px;
	/*background:linear-gradient(147deg,#ffd4b6,#ff7a86,#e45c83,#ad608e);桃1*/
	background:linear-gradient(147deg,#fbb084 -5%,#f96673,#e45c83,#ad608e 107%);/*桃2*/
	border-radius: calc(0.2em + 0.15vw) calc(0.8em + 0.32vw);
	border:none;
	text-align:center;	color:#fff5;
	font-size:calc(0.7em + 1.3vw);line-height:1.3;
	letter-spacing: calc(0.1em + 0.05vw);font-weight:normal;
	padding:0.9em 0.7em 0.9em 1.3em;
	box-shadow:0px 0px 2px 2.5px #0002 inset;
	text-shadow: -1px -1px 1px #0135;}
/*色のバリエ*/
.btn.C2{background:linear-gradient(147deg,#f5e682,#ffab62,#ef8f4a,#ce627a);}/*橙*/
.btn.C3{background:linear-gradient(160deg,#c078cd,#90589a 34%,#694572);}/*紫*/
.CTA-btn-wrap .btn p{margin:0;}
/*マイクロコピー*/
.CTA-btn-wrap .voice{margin:0px;text-align:center;color:#000c;
	font-size:calc(0.44em + 1vw);letter-spacing:calc(0.004em + 0.60vw);}
/*説明書き*/
.CTA-btn-wrap .cmt{margin:0px;text-align:center;color:#000a;
	font-size:calc(0.44em + 1vw);letter-spacing:calc(0.002em + 0.30vw)}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}