@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*20200719に必要なものに絞って移入*/
/****************************************************
			プラグインのカスタマイズ
*****************************************************/
/*-----------------------------------------------
プラグインカスタマイズ>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(20201108)
--------------------------------------------------*/
/*段落*/
.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;}

/*-----------------------------------------------
プラグインカスタマイズ>Search and Filter(0717旧館より移入)
--------------------------------------------------*/
/* 全体 */
.searchandfilter{position:relative;
	width:330px;
	margin:0em auto 1em;
	background:#fff8;
	border:solid 3px #fb9;
	border-radius:8px 25px;
text-align:center;}

.searchandfilter:after{position:absolute;
	bottom:-1em;right:0.5em;
	color:#b78cbf;
	background-color:#fff;
	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;}

/************* Easy Table of Contents のカスタマイズ(2021年1月2号館より移植) 
/* 全体コンテナ(ツリー表示,数字カウンター) */
#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{
	text-align:center;
	font-weight:bold;
	padding:0.3em;
}
/* リストアイテム */
#ez-toc-container.counter-hierarchy ul li{
	line-height:2em;}
/* リストアイテム(子) */
#ez-toc-container.counter-hierarchy ul li ul li{font-size:0.9em;
	line-height:1.8em;}

/*------------------------------------------------
	プラグイン>もしもの簡単リンク
-------------------------------------------------/
/* 全体 */
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;}

/**************************************************
			ページ全体デザイン
*****************************************************/

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

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

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

/*-----------------------------------------------------------
		ページ全体>ヘッダー 
------------------------------------------------------------*/
/*ヘッダーの背景をグラデーションに*/
#head-in {background: linear-gradient(170deg,#ff5b5b,#f1a556 25%,#fff798);}

.header .site-name-text{/* サイト名 */
	color:white;
	font-size:min(calc(1.2vw + 1.5em),2em) !important;
	font-weight:bold;line-height:1.75em;
	letter-spacing: 0.1em;opacity:0.9;
	/*transition: all 0.2s;*/text-shadow: -1px -1px 4px #510a, 1px 1px 4px #510a;}
/* サイト名まわりのレイアウト */
.logo-text{	padding:5px 0px 10px;}
/* サブタイトル */
.tagline{color:#fbab73;margin:.6em 0 0;opacity:0.8;letter-spacing:0.1em;font-size:min(calc(0.7vw + 0.9em),1.2em);}
/*キャッチフレーズの色変更*/
.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;}


/***********************************************************
			トップページのデザイン 
***********************************************************/
/*----------------------------------
		トップページ>共通 
-----------------------------------*/
/* メインカラム */
.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関係を消す */

/*** 全面メニュー(S-menu5) ***/
/* タイトル(h3で代用) */
/*カテゴリメニュー全体*/
.S-menu5{display:flex;justify-content:space-around;
	margin:0 0 0.5em;background:#fffa;padding:0;
	font-size:calc(0.6em + 0.9vw);}

/*左右の段組み*/
.S-menu5 .L-clm,
.S-menu5 .R-clm{width:45%;transition:all 1.8s ease-out;transition-delay:0.2s;}
.S-menu5 .L-clm{margin-right:2%;}
.S-menu5 .R-clm{margin-left:2%;}
.S-menu5 .L-clm:hover,
.S-menu5 .R-clm:hover{width:200%;transition:all 1.8s ease-out;transition-delay:0.2s;}
/* 大カテゴリ */
.S-menu5 .L-ctg{position:relative;overflow:hidden;
	width:auto;height:fit-content;
	border-radius:0.3em 1em;margin:0.4em 0.5%;
	background:#fff;padding:0.5em 0 0em;
	text-align:center;color:#000;
	font-size:1em;}
/* 大カテゴリ名 */
.S-menu5 .L-ctg .title{	margin:0;border-bottom:solid 2.5px #b9c;background:#fff;color:#657;
	line-height:1.2;font-size:1.15em;font-weight:bold;letter-spacing:0.1em;transition:all 0.5s ease-out;transition-delay:0.2s;}
/* 大カテゴリ名(ホバー時) */
.S-menu5 .L-ctg:hover .title{cursor:default;
	border-width:3px;color:#546;font-size:1.5em;font-weight:bold;letter-spacing:0.2em;transition:all 1.0s ease-out;}

/* 小カテゴリのリスト全体枠 */
.S-menu5 .S-ctg-list{display:flex;flex-wrap:wrap;justify-content:center;
	overflow:hidden;background:#fff;
	padding:0 0.25em 0.3em;
	border-radius:0em;
	opacity:0;max-height:0em;/*隠し処理*/
	transition:all 1s ease-out;transition-delay:1s;}
.S-menu5 .L-ctg:hover .S-ctg-list{/* ホバー処理 */
	opacity:1;max-height:30em;
	transition:all 1.2s ease-out,opacity 0s;transition-delay:1s;}
/* 小カテゴリ */
.S-menu5 .S-ctg{position:relative;width:auto;
	margin:0.3em 0.1em 0em;border-radius:0.3em 0.6em;
	background:linear-gradient(160deg,#c078cd,#90589a 34%,#694572);
	box-shadow:0px 0px 1px 2.5px #0002 inset;
	color:#fff6;padding:0.1em 0.4em;
	font-weight:normal;font-size:1.4em;line-height:1.7;
	}
/*小カテゴリのリンク色を独自に指定*/
.S-menu5 .S-ctg a.xtd-link:link,a.xtd-link1:visited{color:#fffd;text-decoration:none;}
.S-menu5 .S-ctg a.xtd-link:hover{;color:#fff;transition:all 0.4s ease;}


/********************************************
			記事の基本要素 
********************************************/

/*--------------------------------------
	記事の基本要素>メインカラム 
---------------------------------------*/
/* サイドバーがない場合のメインカラム */
.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://so-cha.net/wp-content/uploads/2020/07/背景画像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;}


/* パンくずリスト */
.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;}

/*--------------------------------------
	記事の基本要素>見出し・本文
---------------------------------------*/

/* 記事とアーカイブのタイトル */
h1.entry-title,h1.archive-title{
	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.archive-title{background:linear-gradient(90deg,#352167,#435ebf);}

h1.entry-title:first-letter{font-size:1.7em;}

h1.archive-title:first-letter{/* 何故か効かない */
	font-size:1.7em;}

/* 見出し2 */
.article h2 {position: relative;
    text-align: center;
	color:#555;
	font-size:1.6em;
    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.B{border-color:#fd92bd;}

/*.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.3em;
	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;}

/* h3バリエ(トップページで使うセンター寄せ) */
.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;}

/* 記事の本文段落 */
.entry-content p{margin:0.1em 2.5vw 1em;padding:0;}
.entry-content p:last-child{margin-bottom:0;}



/**********************************************
				記事内の追加要素 
 **********************************************/
/*-------------------------------------------
	記事内の追加要素>保留内容(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;}

.onHold2:{position:relative;
	margin-top:0em;padding-top:1.2em;
	border: dashed 3px #fa03;
    border-radius: 1em;}
.onHold2:before{position:absolute;top:0;left:2.5vw;color:#fa08;font-size:1.4em;font-weight:bold;content:"h2以外保留中";}
.entry-content .onHold2 *:not(h2){color:transparent;height:0em;display:none;}
.entry-content .onHold2:before{display:none;}


/*** 追加要素>範囲拡張リンク(aタグ内に追加) ****/
/*** 汎用範囲拡張リンク1(xtd-link1)
専用はそれぞれのクラス内クラスとして記述 ***/
/* リンク色を独自に指定 */
a.xtd-link1:link,a.xtd-link1:visited{
	color:#fff;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;}

/*-------------------------------------------
	記事内の追加要素>
	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;}

/*h4の左マージンを修正*/
.P-dwn2 h4{margin-left:-1vw;}
.P-dwn2 h5{margin-left:0;}


/*-------------------------------------------
	記事内の追加要素>ベロ出し表示 
---------------------------------------------*/
/*Tongue-out2ベロ出し表示(ボーダータイプ)*/
.T-out2{color:#fff0;position:relative;overflow:hidden;
	;margin-top:-1em;margin-bottom: 0.5em;margin-left:2em;margin-right:2em;
	padding-top:0.8em;
	border-top:dashed 2px;border-color:#ccf;
	max-height:1em;
	transition:all 3s ease-out 4s,padding-top 0.5s 7s,border-color 0.5s 7s,margin-left 0.5s 7s,margin-right 0.5s 7s;
	z-index:1;}
.L-qst1 .T-out2{margin-top:-0.5em;}/*L-qst1内では上マージン少なめ*/
/*ガイド表示*/
.T-out2:before{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 7s;/*z-index:2;*/}

/*ホバー時挙動*/
.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 .T-out2:hover{margin-left:0;margin-right:0;}/*L-qst1内では横幅一杯*/

.T-out2:hover:before{/*font-size:1em;*/
	letter-spacing:1em;opacity:0;
transition:all 1s ease-out,opacity 0.5s ease-out 1s;}

/*-------------------------------------------
	記事内の追加要素>画像の修飾クラス 
---------------------------------------------*/
/********** 影を付ける(カードっぽく)22.8.19更新 ********/
.pic-shadow,.prt-sdw{box-shadow:1px 2px 5px 0px #2346;
	padding:5px;border-radius:3px 5px;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;}

/*---------------------------
	記事内の追加要素>表(標準コンテナbox-ctr1に収納) 
-----------------------------*/
/*---------------------------
	記事内の追加要素>表(標準コンテナに収納) 
-----------------------------*/
/***** 標準スタイルを角丸にしてある ****/
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;/* 行間をつめる */
	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: #103c;
	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:linear-gradient(90deg,#9bf7,#9bf2);}
/* 始行と終行の設定 */
table.D-tbl1 tr:first-of-type{
	background:linear-gradient(90deg,#615181,#b9aad7);color:#fffc;}
table.D-tbl1 tr:last-of-type{border-bottom:none;}
/*ハイライト行(trにクラス「Hi」を設定)*/
table.D-tbl1 tr.Hi{font-weight:bold;background:linear-gradient(90deg,#fe84,#ff92);}
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;*/}


/*-------------------------------------
	記事内の追加要素>番号無しリスト 
--------------------------------------*/
/**************** 黒丸白丸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.2em;}

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;}

/*-------------------------------------
	記事内の追加要素>番号付きリスト 
--------------------------------------*/
/***** カッコつき数字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;
}

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

.si,.bo{display: block;
	padding: 0 0.3em;
	margin: 0px 0.2em 0px 0.05em;
}
.si{line-height:1.0em;}
.bo{line-height:1.2em;
	border-top: solid 0.075em;}/* 色を指定しないと親の色と同じになる */

/*----------------------------------------
	文字修飾 > 筆算用の上線と下線
------------------------------------------*/
/*ボーダー下線
 *親のボックスによって仕様が変わる
/* 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;}

/******* ボーダー上線(割り算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;}

/*----------------------------------------
	文字修飾 > 小数第一位の数に小数点をつける(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;}

/************** 右への矢印 ****************/
.dcm2aR::after,
.dcm2bR::after,
.dcm2cR::after,
.dcm2nR::after{position: absolute;
	content:"⤴";
	font-weight:bold;
	font-size:0.8em;
	transform:scale(0.8,0.7) rotate(45deg);
	color:#b7b6b2;
	bottom: -0.35em;
	left: -0.24em;
	z-index:2;}

/*********** 左への矢印 **************/
.dcm2aL::after,
.dcm2bL::after,
.dcm2cL::after,
.dcm2nL::after{position: absolute;
	content:"⤴";
	font-weight:bold;
	font-size:0.8em;
	transform:scale(-0.8,0.7) rotate(45deg);
	color:#b7b6b2;
	bottom: -0.35em;
	left: -0.24em;
	z-index:2;}

/* 上昇効果線 */
.dcm2bU::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;
}

/* 下降効果線 */
.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;}

/*----------------------------------
	文字修飾 > 数字を丸数字にする
-----------------------------------*/
/* 1ケタ用 */
.msj2-1{
	position:relative;
	top:-0.1em;
	display:inline-block;
	font-size:0.9em;
	line-height:1.25em;
	width:1.45em;
	text-align:center;
	border-radius: 50%;
	border: solid 1px;
	background-color:white;
	padding-top:0.05em;    }

/* 2ケタ用 */
.msj2-2{
	position:relative;
	display:inline-block;
	font-size:0.75em;
	line-height:1.4em;
	width:1.9em;
	text-align:center;
	border-radius: 50%;
	border: solid 1px;
	background-color:white;
	padding-top:0.1em;
	letter-spacing: -0.05em;
	transform:scaley(1.2);}

/* 3ケタ用 */
.msj2-3{
	position:relative;
	display:inline-block;
	font-size:0.7em;
	line-height:1.7em;
	width:2.5em;
	text-align:center;
	border-radius: 50%;
	border: solid 1px;
	background-color:white;
	padding-top: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);}

/*----------------------------------------
	文字修飾 > 数字を四角数字にする
------------------------------------------*/
.rected-1{/* 1ケタ */
	font-size:0.9em;
	/*border-radius: 50%;*/
	border: solid 1px;
	background-color:white;
	padding: 0px 0.45em;}

.rected-2{/* 2ケタ */
	font-size:0.9em;
	/*border-radius: 50%;*/
	border: solid 1px;
	background-color:white;
	padding: 0px 0.3em;
	letter-spacing: -0.15em;}

.rected-3{/* 3ケタ */
	font-size:0.8em;
	/*border-radius: 50%;*/
	border: solid 1px;
	background-color:white;
	padding: 0.2em 0.3em;
	letter-spacing: -0.1em;}

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

/*----------------------------------------
	文字修飾 > 解答用のA付き下線
------------------------------------------*/
/****「A-line3」(a整数b分数) ****/
/* 右寄せをやめて本文中の単純な装飾に留め「A」を「答」にした */
.A-line3a,
.A-line3b{
	position: relative;
	display: inline-block;
	color: #5a5a5a;
	font-weight: bold;
	font-size: 1.7em;
	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;}
	
/*----------------------------------------
	文字修飾 > チェックペン
------------------------------------------*/
/***** チェックペン3(ぼかし)(画像もいける) *******/
.chk-pen3{filter:blur(1em);}
.chk-pen3:hover{filter:blur(0em);cursor:pointer;}

/*----------------------------------------
	文字修飾 > アニメーション
----------------------------------------*/
/*アニメーション(鼓動) */
.Anm-beat1{
display:inline-block;
animation-name: H-beat1;
animation-duration: 1.5s;/*総時間*/
animation-timing-function: ease;/*動き*/
animation-delay: 3s;/*遅延時間*/
animation-iteration-count: 8;/*ループ回数*/
animation-direction: normal;/*動きの方向(一方方向)*/
/*animation-direction: alternate;/*動きの方向(交互反転)*/
animation-fill-mode: both;/*キーフレームの適用*/
/*animation-play-state: running;再生か一時停止*/
}

@keyframes H-beat1{
0%{transform:scale(1,1);}
3%{transform:scale(0.9,0.9);}
7%{transform:scale(1.4,1.4);}
22%{transform:scale(1.05,1.05);}
42%{transform:scale(1,1);}
}

/* アニメーション(高速振動0.9s + 停止0.9s) */
.Anm-vibe1 {
  display: block;
  animation-delay: 3s;/*遅延時間*/
transform-origin: -50% 50%;
  animation-name: Vibe1;
  animation-duration: 1.8s; /* 0.9s + 0.9s = 1.8s */
  animation-iteration-count: 5;
  animation-timing-function: linear;
}

@keyframes Vibe1 {
  0%   { transform: translateY(0) rotate(0deg); }
  3%   { transform: translateY(-8px) rotate(1deg); }
  6%   { transform: translateY(8px) rotate(-1deg); }
  9%   { transform: translateY(-8px) rotate(1.5deg); }
  12%  { transform: translateY(8px) rotate(-1.5deg); }
  15%  { transform: translateY(-8px) rotate(1deg); }
  18%  { transform: translateY(8px) rotate(-1deg); }
  21%  { transform: translateY(-8px) rotate(1.5deg); }
  24%  { transform: translateY(8px) rotate(-1.5deg); }
  27%  { transform: translateY(-8px) rotate(1deg); }
  30%  { transform: translateY(8px) rotate(-1deg); }
  33%  { transform: translateY(-8px) rotate(1.5deg); }
  36%  { transform: translateY(8px) rotate(-1.5deg); }
  39%  { transform: translateY(-8px) rotate(1deg); }
  42%  { transform: translateY(8px) rotate(-1deg); }
  45%  { transform: translateY(-8px) rotate(1.5deg); }
  48%  { transform: translateY(8px) rotate(-1.5deg); }
  50%  { transform: translateY(0) rotate(0deg); }
  /* 50%〜100% (残り0.9s) は完全に静止 */
  100% { transform: translateY(0) rotate(0deg); }
}

/***************************************************
				ボックスとコンテナ
****************************************************	
/*------------------------------------------------
ボックス>デフォルト(標準)ボックス
タイトルを持たいないボックスで2020.3にN-boxから独立
標準コンテナ(box-ctr1)に入れて使う
要素を横並びにするバリエーションflx型
(2022.10上下のマージンを少しいじった)
---------------------------------------------*/
/* 色設定 */
.D-box1{border-color:#bce;}/* ボーダーの色 */
.D-box1{color:#6597c5;}/* ボックス内本文色(タイトル消去時) */ 
.D-box1 p{color:#6597c5;}/* ボックス内本文色 */ 

/* ボックス本体 */
.D-box1{position: relative;
	/*display:block;*/
	width:fit-content;
	margin: 0.3em auto 0.7em;
	border-style:dashed;
	border-width:3px;
	border-radius: 8px 25px;
	background:#FFF8 ;
	padding:0.5em calc(3vw - 0.1em);
	text-align:center;
	/*font-size: calc(0.9em + 0.2vw);*/
	line-height:1.3em;
	}
/*段落直後にある場合、上マージンを詰める*/
p+.D-box1{margin-top:-0.5em;}

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

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


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

/*** ロゴを付けるバリエーション(html図にする場合など) ***/
.D-box1.logo: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;}

/***** 標準コンテナ(使用せずとも良い) *****/
.box-ctr1{display: flex;flex-wrap:wrap;
    justify-content:center;
    margin: -1em 0em 0.75em;
    background: #fff8;}

/*** 標準インボックス2022.10新1号館から移植(図に注釈をのせる。図に大きさを指定) ***/
/** 本体 **/
.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;}/*複数行ある場合は行間をつめる*/


/*************************************
  サピックスボックス(2022.10試作)
  デイリーサピックスのテキスト擬態
*************************************/
/* 色設定 */
.Spx-box1{border-color:#d7d1e2;}/* ボーダーの色 */
.Spx-box1{color:;}/* ボックス内本文色(タイトル消去時) */ 
.Spx-box1 p{color:;}/* ボックス内本文色 */
/* 文字の大きさ(縮小率高め) */
.Spx-box1,.Spx-box1 p{font-size:min(calc(0.6rem + 0.8vw),1rem);letter-spacing: min(0.45vw - 0.05em , 0.1em);}

/* ボックス本体 */
.Spx-box1{position: relative;
	/*display:block;*/
	width:min(100%,640px);
	margin: 0.3em auto 0.7em;
	border-style:solid;
	border-width:1px;
	border-radius:;
	box-shadow: 2px 2px 6px -2px #1038;
	background:#FFFc ;
	padding:0.5em calc(3vw - 0.1em) 0em;
	text-align:left;
	line-height:1.3em;	}
/*段落直後にある場合、上マージンを詰める*/
p+.Spx-box1{margin-top:-0.5em;}

/* タイトル */
.Spx-box1 .title{display: inline-block;
    height: 1.3em;line-height: 1.3;
    padding: 0.1em 0.5em 0.1em;margin: 0.5em 0 0.8em;
    color: #444;background:#ccc;
	font-size:1.3em;font-weight: bold;}

/* 問題文 */
.Spx-box1 .Q{position:relative;color:#444;padding-left:1em;font-size:min(calc(0.6rem + 0.8vw),1rem);letter-spacing: min(0.45vw - 0.05em , 0.1em);}
/*はじめの段落だけインデント*/
.Spx-box1 .Q p:first-of-type{text-indent:1em;}
/*最後の段落は下マージン大きく*/
.Spx-box1 .Q p:last-of-type{margin-bottom:1em;}

/* 問題番号(問題文の子要素にする) */
.Spx-box1 .num{position:absolute;
	bottom: calc(100% - 0.8em);left:0;
    width: 1em;height: 1.2em; padding:0.1em 0.15em;
    line-height: 1; font-size: 1.5em;
	border:solid 1px #222;text-indent:0;}
/*番号の★(重畳クラスで指定)*/
.Spx-box1 .num.S1:after,
.Spx-box1 .num.S2:after,
.Spx-box1 .num.S3:after
{position:absolute;top:-0.1em;left:calc(100% + 0.1em);content:"★";font-size:0.4em;letter-spacing: -0.2em;}
.Spx-box1 .num.S2:after{content:"★★";}
.Spx-box1 .num.S3:after{content:"★★★";}

/* ボックス内本文(問題の記述) */
.Spx-box1 p{text-align:left;margin:0.25em 0;padding: 0;line-height:1.6;letter-spacing:0.1em;
	background:inherit;/*filter:blur(0.5px);font-family:serif;*/}

/* 図を罫線で囲む */
.Spx-box1 img{width:100%;border:solid 1.5px #000;padding:calc(1vw - 0.0em);}

/*標準インボックスは解答欄になる(暫定)*/
.Spx-box1 .D-ibx1{color:#776;border:solid 1.5px #444;padding:1em min(2em,3vw);}
.Spx-box1 .D-ibx1 p{color:#776;}

/* キャプション(下のみ?) */
.Spx-box1 .cap1d{display:block;width:fit-content;
	color:#6597c5;transform:skewx(-12deg);text-align:center;
	opacity:0.9;font-size:1.05em;line-height:1.3em;margin:1.5em auto 1em;}
/* キャプション(上)
.Spx-box1 .cap1u{opacity:0.8;margin: 0.2em 0 1.5em;}*/
/* キャプション(下) */

/*************************************
  予シリボックス(2023.3試作)
  予習シリーズの擬態
*************************************/
/* 色の変数 */
.Ysr-box1{
	--rei-col1:;/* 例題の色1 */
	--rei-col2:;/* 例題の色2 */
	--khn-col1:;/* 基本問題の色1 */
	--khn-col2:;/* 基本問題の色2 */
	--ren-col1:;/* 練習問題の色1 */
	--ren-col2:;/* 練習問題の色2 */
}
/* 色設定 */
.Ysr-box1{border-color:#d7d1e2;}/* ボーダーの色 */
.Ysr-box1{color:;}/* ボックス内本文色(タイトル消去時) */ 
.Ysr-box1 p{color:;}/* ボックス内本文色 */

/* 文字の大きさ(縮小率高め) */
.Ysr-box1,.Ysr-box1 p{font-size:min(calc(0.6rem + 0.8vw),1rem);letter-spacing: min(0.45vw - 0.05em , 0.1em);}

/** ボックス本体 **/
.Ysr-box1{position: relative;
	/*display:block;*/
	width:min(100%,640px);
	margin: 0.3em auto 1.7em;
	border-style:solid;
	border-width:1px;
	border-radius:;
	box-shadow: 2px 2px 6px -2px #1038;
	background:#FFFc ;
	padding:2em calc(3vw - 0.1em) 1em;
	text-align:left;
	line-height:1.3em;	}
/*段落直後にある場合、上マージンを詰める*/
p+.Ysr-box1{margin-top:-0.5em;}
/* クレジット */
.Ysr-box1:after{position:absolute;
	bottom:0.5em;left:50%;transform:translateX(-50%);
	color:#9f80e7;letter-spacing:0em;white-space:nowrap;
	font-size:0.9em;font-weight:bold;font-style:Italic;
	content:"'Yo-Resys' by そうちゃ式 (C)2023 ";}

/* タイトル(予習シリーズは問題にタイトルがない) */
/** 変数 **/
.Ysr-box1{}
/** 問題欄 **/
.Ysr-box1 .Q{position:relative;
	/*color:#444;background:#fffaf0;border:solid 1px #7ec6e3;*/
	padding:1.3em 1em 0.5em 1.2em;line-height:1.7;
	font-size:min(calc(0.6rem + 0.8vw),1rem);letter-spacing: min(0.45vw - 0.05em , 0.1em);}
.Ysr-box1 .Q p{margin:0;}
/*はじめの段落だけインデント*/
.Ysr-box1 .Q p:first-of-type{text-indent:1em;}
/*最後の段落は下マージン大きく
.Ysr-box1 .Q p:last-of-type{margin-bottom:1em;}*/
/* 例題は装飾あり */
.Ysr-box1.rei .Q{background:#fffaf0;border:solid 1px #7ec6e3;}

/** 問題番号(Qの子要素にする) **/
/* 例題 */
.Ysr-box1.rei .num{position:absolute;/*overflow:hidden;*/
	z-index:0;transform: scaleX(0.9);transform-origin:left;letter-spacing:;
	bottom: calc(100% - 0.8em);left:-1px;
    width:;height:;padding:0.2em 0.2em 0.1em 0.4em;
    line-height:1;font-size:1.35em;font-weight:bold;
	background:#fff;
	border:solid #5aa7ee;border-width:2px 0 2px 7px;text-indent:0;}
/*リボン*/
.Ysr-box1.rei .num:after{position:absolute;z-index:-1;
	top:50%;left:100%;transform: translate(-60%, -50%) scaleX(0.6);
	width:0;height: 0;
    content: "";
	border: solid;font-size: 1.35em;border-width:0.5em;border-color: #fff transparent #fff #fff;}
.Ysr-box1.rei .num:before{position:absolute;z-index:-1;
	top:50%;left:100%;transform: translate(-50%, -50%) scaleX(0.6);
	width:0;height: 0;
    content: "";
	border: solid;font-size: 1.35em;border-width:calc(0.5em + 2px);border-color:#5aa7ee transparent #5aa7ee #5aa7ee;}
/* 例題のバリエ(補完例題) */
.Ysr-box1.rei.hokan .num{border-left-color: #66bb8a;}/*色候補2 #8d80f6*/

/* 基本問題練習問題共通 */
.Ysr-box1.khn .num,.Ysr-box1.ren .num{position:absolute;
	top:0.6em;left:-0.3em;
	margin:;background:#fff;transform: scaleX(1.1);
	line-height:1;padding:0.2em 0.1em 0.0em 0.2em;
	border:solid 1px;border-radius:0.2em;
	font-size:1.4em;font-weight:bold;}
.Ysr-box1.khn .num:before,.Ysr-box1.ren .num:before{position:absolute;
	bottom:calc(100% + 0.2em);
    transform:scaleX(0.9);
    left: 0; transform-origin: left;
	margin:;line-height:1;padding:0.4em 0.3em 0.2em 0.5em;
	font-size:0.8em;color: #fffe;
	white-space:nowrap;letter-spacing:0.15em;}
/* 基本問題のみ */
.Ysr-box1.khn .num{border-color:#ffc251;color:#ffc251;}
.Ysr-box1.khn .num:before{background:#ffc251;content:"基本問題";}
/* 練習問題のみ */
.Ysr-box1.ren .num{border-color:#4997e7;color:#4997e7;}
.Ysr-box1.ren .num:before{background: #4997e7;content:"練習問題";}
/* 総合回のバリエ */
.Ysr-box1.khn.sogo .num:before{content:"基本問題(総合回)";}
.Ysr-box1.ren.sogo .num:before{content:"練習問題(総合回)";}


/* ボックス内本文(問題の記述) */
.Ysr-box1 p{text-align:left;margin:0.25em 0;padding: 0;line-height:1.6;letter-spacing:0.1em;
	background:inherit;/*filter:blur(0.5px);font-family:serif;*/}

/** 解答全体 **/
.Ysr-box1 .A{position:relative;margin:1em 0 1em;padding:0.5em 1em;}
/* 基本問題と練習問題は上マージンを無くす */
.Ysr-box1.khn .A,.Ysr-box1.ren .A{margin-top:0}

/*見出し(解き方)(Aの子要素にする)*/
.Ysr-box1 .hd{position:relative;z-index:0;
	display:inline-block;margin: 0 0 0 -1em;
	background:#fff;border:solid #f8b73f;border-width:1px 0 1px 5px;line-height:1;padding: 0.3em 0.5em 0.1em 0.3em ;font-weight: bold;
    color: #555;letter-spacing: 0.02em;}
/*リボン状の右端*/
.Ysr-box1.rei .hd:after{position:absolute;z-index:-1;
	top:50%;left:100%;transform: translate(-55%, -50%) scaleX(0.6);
	width:0;height: 0;
    content: "";
	border: solid;font-size: 1em;border-width:0.7em;border-color: #fff transparent #fff #fff;}
.Ysr-box1.rei .hd:before{position:absolute;z-index:-1;
	top:50%;left:100%;transform: translate(-50%, -50%) scaleX(0.6);
	width:0;height: 0;
    content: "";
	border: solid;font-size: 1em;border-width:calc(0.7em + 1px);border-color:#f8b73f transparent #f8b73f #f8b73f;}

/* 解答内のプルダウン2の横マージンを無くす */
.Ysr-box1 .A .P-dwn2{margin-left: 0;margin-right: 0;
}

/* 解答コンテナ(横一行) */
.Ysr-box1 .A .A-ctr{text-align:right;margin:0 0 1em;}
/* 解答そのもの */
.Ysr-box1 .A .A-ctr .ans{display:inline-block;border-bottom:solid 1px #555;text-align:;font-size:1.1em;}


/****************************************************
	新型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;}

/*-----------------------------------------------
	ボックス> スピーチボックスと付属要素(202007修正)
--------------------------------------------------*/
/********* ラッパー(スピーチボックスと人物ラッパーを包む) **********/
.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-family:auto;/* 書体を地の文と変える */
	box-shadow: 2px 2px 6px 0px #214b8a73;}
.S-box1 p{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 2.5px 2.5px;
	transform: scale(0.8,0.5)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;
	box-shadow: 2px 2px 6px 0px #214b8a73;}
.S-box2 p{margin-left:0;margin-right:0;}

/* 吹き出し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:4px 0 0 4px;
	transform: scale(0.5,0.5)rotate(45deg);}

/*-----------------------------------------------
	ボックス> 筆算ボックス1(一般途中計算)
(標準ボックス内に入れる)
--------------------------------------------------*/
/* ボックス本体 */
.C-box1 {
	text-align:left;
	color:#7d7c79;
	font-style:italic;
	font-family:sans-serif;
	font-size:1.2em;
	line-height:1.5em;
	/*letter-spacing:0.05em;*/}

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

/*-----------------------------------------------
	ボックス> 筆算ボックス2(加減乗算用)
(標準ボックス内に入れる)
--------------------------------------------------*/
/* ボックス本体 */
.C-box2 {
	position: relative;
	display: inline-block;
	margin:0;
	padding:0.3em calc(3vmin - 0.1em) 0.3em calc(1.5vmin - 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;}

/*-----------------------------------------------
	ボックス> 筆算ボックス3(逆算用)
(標準ボックス内に入れる)
--------------------------------------------------*/
.C-box3{display:flex;
	justify-content:center;
	color:#7d7c79;
    font-size: 1.2em;
	font-family:sans-serif;
	font-style:italic;
    line-height: 1.7em;
    padding-top: 0em;
	margin-top:0.2em;}

/* C-box3内のdiv4つ */
.C-box3 .c1L{text-align:right;}
.C-box3 .c1R{text-align:left;}
.C-box3 .c2L,
.C-box3 .c2R{font-size:0.9em;opacity:0.8;}
.C-box3 .c2L{text-align:right;margin-left:1em;}
.C-box3 .c2R{text-align:left;}

/*-----------------------------------------------
	ボックス> 筆算ボックス4(割り算用)
(標準ボックス内に入れる)
--------------------------------------------------*/
/* ボックス本体 */
.C-box4 {
	position: relative;
	display: inline-block;
	margin:0;
	padding:0.3em calc(3vmin - 0.1em) 0.3em calc(1.5vmin - 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 {margin: 0;padding: 0;}

/* バリエーション */
.C-box4b{padding-right:calc(1.5vmin - 0.05em);}
.C-box4b p {margin: 0;padding: 0;}


/*-----------------------------------------------
	ボックス> 筆算ボックス5(因数分解すだれ算用)
(標準ボックス内に入れる)
--------------------------------------------------*/
/* ボックス本体 */
.C-box5 {
	position: relative;
	display: inline-block;
	margin:0;
	padding:0.3em calc(3vmin - 0.1em) 0.3em calc(1.5vmin - 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;}

/*-----------------------------------------------
	ボックス> 関係(Relation)ボックス
D-box1に入れて使用
------------------------------------------------*/
/* 本体 */
.R-box0{display: inline-flex; justify-content: space-around;align-items: center;
	position: relative;height: 6em;
	margin-top: 0.2em;padding: 0em;
	font-size: 1.5em;font-style:italic; line-height: 1em;}
/*元の数、先の数の共通仕様*/
.R-box0 .moto,.R-box0 .saki
{display:inline-block;font-size:1.3em;background: #f0f0; padding:0;}
/*右の数(元の数)独自仕様*/
.R-box0 .moto{margin-right: 2em;}
/*右向きの数、左向きの数の共通仕様*/
.R-box0 .Rya,.R-box0 .Lya
	{display:inline-block;position: absolute;
	left:calc(50% - 0.1em); transform: translateX(-50%);
	background:#00f0;}
/*右向きの数独自仕様*/
.R-box0 .Rya{top: calc(50% - 3.1em);}
/*左向きの数独自仕様*/
.R-box0 .Lya{bottom:calc(50% - 2.9em);}
/*右向きの数の矢本体*/
.R-box0 .Rya:before{position:absolute;
	bottom:-1em;right:calc(50% - 1.7em);
    transform-origin:bottom right;
	transform:scaleY(0.6) rotate(-45deg);
	width:2em;height:2em;background:#0f00;content:"";
	border-radius:0;
    border: dashed 2px #9bc;border-width: 3px 3px 0 0;
    }
/*右向きの数の矢尻*/
.R-box0 .Rya:after{position:absolute;
	bottom:calc(-1em - 5px);right:calc(50% - 1.7em - 4px);
	width:0.8em;height:0.8em;background:#f000;content:"";
	border-radius:0;border:solid #9bc;border-width:0 3px 3px 0;
	transform: rotate(-52deg) scaleX(0.6) rotate(45deg);
	transform-origin:bottom right;}
/*左向きの数の矢本体*/
.R-box0 .Lya:before{position:absolute;
	top:-1em;left: calc(50% - 1.3em);
	width:2em;height:2em;background:#0f00;content:"";
	border-radius:0;
    border: dashed 2px #9bc;border-width:0 0 3px 3px;
	transform-origin:top left;
    transform: scaleY(0.6) rotate(-45deg);
}
/*左向きの数の矢尻*/
.R-box0 .Lya:after{position:absolute;
	top:calc(-1em - 5px);left: calc(50% - 1.3em - 4px);
	width:0.8em;height:0.8em;background:#f000;content:"";
	border-radius:0;border:solid #9bc;border-width:3px 0 0 3px;
	transform-origin:top left;
	transform:rotate(-52deg) scaleX(0.6) rotate(45deg);}

/*-----------------------------------------------
	ボックス> まとめボックス
------------------------------------------------*/
/***** 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;/*display:inline-block;*/
	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: 0.6em calc( 0.5em + 1vw ) 0.3em;}
/* ボックス内本文 */
.M-box1 p{margin: 0;padding: 0;line-height:1.6em;}

/* タイトル */
.M-box1 .box-title {display: inline-block;width:fit-content;
	position: absolute;
	bottom:calc(100% - 0.5em);right:50%;transform:translatex(50%);
	background: #fff;
	padding: 0.2em 0.3em;text-align:center;
	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;}

/*-----------------------------------------------
		ボックス> ラベル付きボックス(2019改造)
------------------------------------------------*/
/* 色設定 */
.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;
	display:block;/* 固定幅に変更 */
	width: calc(100% - 5vmin);
	/*min-width:200px;/* 最低幅 */
	/*max-width: calc(100vw - 60px);/* 最大幅 */
	background-color:#FFF5 ;
	padding:0.3em 1em 0em;
	border-style:solid;/* ボーダー様式 */
	border-width:3px;
	border-radius:0 30px 12px 30px;
	margin:2.5em auto 1.5em;
	font-size:calc(0.9em + 0.2vmin);
	counter-reset:lbx-qst;/* 小問のカウンターリセット */
}

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

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

/* ボックス内本文(カウンター付き) */
.L-boxA p {position:relative;margin:0 0 0.3em 1em;padding: 0;line-height:1.5em;font-size:calc(0.9em + 0.2vmin);}
.L-boxA p:last-child {margin-bottom:0.5em;}
.L-boxA p:before{position:absolute;left:-1.5em;top:0;
counter-increment:lbx-qst;content:"("counter(lbx-qst)")";}


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

/* ボックス本体 */
.T-box1 {
	position:relative;
	display: inline-block;
	/*width: calc(19em + 17vw);
	min-width:300px;/* 最小幅
	max-width:97%;/* 最大幅 */
	overflow:hidden;
	text-align:center;/* 要素は中央寄せ */
	background-color:#FFF ;
	color:#000;
	padding: 0px;
	border-radius: 0.5em 1.8em;
	border-width:8px;
	border-style:solid;
	margin:0.5em auto;
	font-size: calc(0.9em + 0.2vw);
	box-shadow: 3px 2px 7px 0px #346a;}

/* 可編タイトル */
.T-box1 .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-box1 .box-footer {
	color:#fff7;
	font-size: 0.8em;
	/*border-radius: 0px 0px 7px 27px;*/
	padding:8px 0.5em;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 0.8em;}

/* タイトル右上の固定ロゴ */
.T-box1: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-box1 p {
	display:inline-block;/* 本文も可変幅 */
	text-align:left;/* 本文は左寄せ */
	line-height:1.6em;
	padding:0.2em calc(3vmin - 0.1em) 0.5em;
	margin: 0;}

/************* ロゴ関係の追加クラス ****************/
/* ボックスの固定ロゴを消す */
.no-logo::after{display:none;}
/* ボックスの固定ロゴを第2案に置き換え */
.logo2::after{content:"図解算数";
	letter-spacing:0.1em;
	font-size:0.85em;
	padding-right:0.1em;}

/*************************************
ボックス>アフィリエイト用
(2021.8作成)
*************************************/
/***バナーラッパー(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:"スポンサーリンク";}*/

/**********************************************
			ボタン
********************************************/
/****** CTAボタン(CTA-btn1)(20200807改定) ******/
/** ボタンコンテナ **/
.btn-ctr1{display: flex;justify-content:space-around;
	margin: 0px 0px 0.5em;background:#fff;}
/*ボタン2つ入り*/
.btn-ctr1 .D{}

/* ボタンラッパー */
.CTA-btn-wrap{/*width:50%;*/
	margin: 0px;padding: 0px;text-align:center;}
/* 2つ入りの場合の追加クラス(2022.2.10) */
.btn-ctr1.D .CTA-btn-wrap{width:calc(50% - 0.1em - 5vw);}

/*ボタン本体*/
.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:1.2em;line-height:1.3;
	letter-spacing: calc(0.1em + 0.05vw);font-weight:normal;
	padding:0.9em 0em 0.9em 0.6em;
	box-shadow:0px 0px 2px 2.5px #0002 inset;
	text-shadow: -1px -1px 1px #0135;}
/*文字のバリエ*/
.CTA-btn-wrap .btn.L{font-size:min(calc(0.6em + 2vw),1.4em);}

/*色のバリエ*/
.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{transform:scaley(1.2);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){
  /*必要ならばここにコードを書く*/
}