@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/

/************************************
	子テーマ用のスタイルを書く
	ここから(新)カスタマイズ
	2019.6.27よりCSSのマージのテスト中
	2019.7.15に国語記事の移植準備
			目次(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;}


/*------------------------------------------------
	プラグイン>Simple Download Monitor(2020.5新1号館から移植)
-------------------------------------------------*/
/*** 既存要素のカスタマイズ ***/
/*全体*/
.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;}

/*-----------------------------------------------
プラグインカスタマイズ>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;}


/*-----------------------------------------------
プラグインカスタマイズ>もしもの簡単リンク(2021.8.28大改訂)
--------------------------------------------------*/
/* 全体 */
.easyLink-box{border-radius:1em 2em !important;
	padding:1em 0.5em 0.5em 1em !important;}

/*商品名*/
.easyLink-info-maker{line-height:1 !important;font-size:0.8em !important;}
.easyLink-info-name{line-height:1.5 !important;font-size:0.65em !important;}
.easyLink-info-model{line-height:1 !important;font-size:0.9em !important;font-weight:bold !important;}

/* ボタン周り */
p.easyLink-info-btn{display:flex !important;margin:0 !important;}
.easyLink-info-btn a{margin:0.15em 0.3em !important;padding:0.2em 0.5em !important;}

/* ボタン内部 */
.easyLink-info-btn-amazon,
.easyLink-info-btn-rakuten,
.easyLink-info-btn-yahoo
{font-size:0.7em !important;line-height:1.2 !important;width:30% !important;}
.easyLink-info-btn-yahoo
{font-size:0.5em !important;line-height:1.3 !important;}

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

/*-----------------------------------------------
プラグインカスタマイズ>スタディサプリのテキストアフィリのリンク
--------------------------------------------------*/
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;}


/*-----------------------------------------------
プラグインカスタマイズ> meta slider
--------------------------------------------------*/
.metaslider.ms-theme-cubic.ms-is-small {
	padding:6px 15px !important;
	box-shadow:1px 1px 3px 1px #3239 inset;
}

/*-----------------------------------------------
プラグインカスタマイズ>Easy Table of Contents(2019.7.23)
--------------------------------------------------*/
/* 全体コンテナ(ツリー表示,数字カウンター) */
#ez-toc-container.counter-hierarchy,#ez-toc-container.counter-hierarchy.counter-decimal{
	width:auto;
	margin:0 auto;
	border-radius:10px;
	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;}


/*-----------------------------------------------
プラグインカスタマイズ>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;
	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;}



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

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

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

/*キャッチフレーズの色変更*/
.desc {	color:#77522b;}

/*-----------------------------------------------------------
		ページ全体>ヘッダー(2023.4.に新1号館から移植)
------------------------------------------------------------*/
/* サイト名 */
.header .site-name-text{display:inline-block;
	color:white;font-size:min(calc(2vw + 0.7em),1.7em) !important;
	transform:scaleY(1.4);
	font-weight:bold;line-height:1.75em;font-family:serif;
	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.05vw + 0.6em),1.5em);font-weight:;
    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;}


/***********************************************************
			トップページのデザイン 
***********************************************************/
/*----------------------------------
		トップページ>共通 
-----------------------------------*/
/* 全体の背景色 */
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;}

/*ショートコード型のインデックスカード*/
/*中身*/
.widget-entry-card{padding:0.3em;
	font-size: 0.85em;line-height: 1.5;letter-spacing: 0.07em;}


/*--------------------------------
	トップページ>サイト型 
---------------------------------*/
.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)20201207新1号館から移植
*******************************************/
/* タイトル(h3で代用) */
/*カテゴリメニュー全体*/
.S-menu5{display:flex;justify-content:space-around;
	margin:0 0 0.5em;background:#fffa;padding:0;
	font-size:min(calc(0.6em + 0.9vw),1.2em);}

/*左右の段組み*/
.S-menu5 .L-clm,
.S-menu5 .R-clm{width:45%;transition:all 0.5s ease-out;transition-delay:0.2s;}
.S-menu5 .L-clm{margin-right:2%;}
.S-menu5 .R-clm{margin-left:2%;}
.entry-content .S-menu5 .L-clm:hover,
.entry-content .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 0.2s;}
/* 大カテゴリ名(ホバー時) */
.entry-content .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;}

/* 小カテゴリのリスト全体枠 */
.entry-content .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 1s;}
.entry-content .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://swsn-ht.com/wp-content/uploads/2019/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 {width: min(100%,500px);
	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: #fffc;}

/* 本文の最下段(カテゴリタグ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;}

/*--------------------------------------
	記事の基本要素>見出し・本文
---------------------------------------*/
/********** 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.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: 4em 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とダミー */
.article 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.8em;
    font-size: 1.3em;font-weight:bold;
    padding: 0.1em 0.5em 0;
    background: linear-gradient(90deg,white 45%,rgba(255,255,255,0));}

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

/* 見出し6(2024.5.22追加) */
.article h6{border:none;
	margin: 1em 2vw 0em;
	padding: 0;
	color:#a094bd;
	font-size: 1.0em;}

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


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

/*-------------------------------------------
	記事内の追加要素>
	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 2.5vw 1em;z-index:0;
border:dashed #fc68 2px;}
/*web上でのみ上下罫線*/
.entry-content .P-dwn2{border-color:#a8f4 #000;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:#48e;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;color:#a8f;content:"↓(開く)↓";}
.P-dwn2.open .footer:before{content:"↑(閉じる)↑";color:#a8f9;}


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


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

/*---------------------------
	記事内の追加要素>引用 
-----------------------------*/
.article blockquote{margin: 0px 2vw 1em;
    border-radius: 8px 30px;
    padding: 0.8em 4vw 0.7em;
    box-shadow: 3px 3px 4px 1px #0006 inset;
    background: #eee;}
.article blockquote:before,.article blockquote:after{color:#0004;}
.article blockquote:before{top:0.2em;left:0.1em;}
.article blockquote:after{bottom:0em;right:0.1em;}
/*色バリエ*/
.article blockquote.R{background: #fdd;}
.article blockquote.B{background: #eff;}
.article blockquote.G{background: #efd;}
.article blockquote.Y{background: #ffd;}
/*段落*/
.article blockquote p{margin:0.75em 0 0.75em;
	font-size:0.95em;line-height:1.65;}
.article blockquote p:first-of-type{margin-top:0;}
.article blockquote p:last-of-type{margin-bottom:0;}


/*---------------------------
	記事内の追加要素>表(標準コンテナに収納) 
-----------------------------*/
/***** 標準スタイルを角丸にしてある ****/
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;
	table-layout: fixed;word-break: break-all;word-wrap: break-all;}

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

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


/*-------------------------------------
	記事内の追加要素>番号無しリスト 
--------------------------------------*/
/*リスト全般*/
.article ul{margin-bottom:0.3em;}/*テーマの設定を打ち消す*/

/**************** 黒丸白丸 ******************/
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.2em;}

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

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

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

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

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

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

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

/*********************************************************
					文字修飾
**********************************************************/
/**************** チェックペン1 ********************/
/* チェックペン色設定 */
:root{--chk-col:transparent;}

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

/******* チェックペン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;font-size:1.2em;}
.entry-content .chk-pen3{color:inherit;filter:blur(1em);}

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

/*-----------------------------------------------
	穴埋め問題にする場合
	全体を<section>で囲んで書式調整
	重畳クラスで番号もつけられる
-----------------------------------------------*/
/** 問題 **/
.XCS1{margin:0;/*background:#ffea;*/}
.XCS1 h3,.XCS1 h4{margin-bottom:0.5em;}
.XCS1 h5{margin-bottom: -0.6em;margin-top: 0.7em;}
.XCS1 p{position:relative;padding-left:1.7em;line-height:2.5;margin: 0.8em 0em 1.5em;}
/*デフォルトのアクセント*/
.XCS1 p:before{position:absolute;content:"❏";font-size:1.3em;line-height:;left:1.1em;top:0em;transform:translatex(-100%)}
/*アクセント無し*/
.XCS1.none p:before{display:none;}

/** 番号をつける重畳クラスnum **/ 
.XCS1.num h3,.XCS1.num h4{counter-reset:num;}
.XCS1.num p:before{position:absolute;left:1.5em;/*top:0.6em;*/
	color:#333;font-size:1em;letter-spacing:-0.06em;
transform:translatex(-100%);counter-increment:num;content:"("counter(num)")";}


/*---------------------------
	文字修飾 > 空欄化〔〕
<span class="bnk2"></span>で囲む
----------------------------*/
.bnk2{display:inline-block;margin:0 0.5em 0 0.6em;color:#f77;font-size:1.6em;vertical-align: text-bottom;line-height:1;letter-spacing:0.1em;padding:0 0.2em;position:relative;background:#fffc;}
.bnk2:before,.bnk2:after{line-height:1;font-size:1.1em;color:#777;position:absolute;transform:scaleY(1.3);transform-origin:bottom;bottom:-0.2em;}
.bnk2:before{right:100%;content:"〔";}
.bnk2:after{left:100%;content:"〕";}
.entry-content .bnk2{color:#0000;}
.entry-content .bnk2:hover{color:#f77;}

/*---------------------------
	文字修飾 >ルビ(ふりがな)
<ruby><rt>タグの代わりに<span>で使う
----------------------------*/
.rb1,.rb2{display:inline-block;position:relative;line-height:1;}
.rb1 .rt1,.rb2 .rt1{position:absolute;width:fit-content;min-width:100%;bottom:calc(100% + 0.1em);left:50%;transform:translateX(-50%) scaleX(0.9);background:linear-gradient(180deg, #fff 60%, #fff0);line-height:1;font-size:0.45em;text-align-last:justify;white-space:nowrap;}
")";}


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

.si,.bo{display: block;
	padding: 0 0.3em;
	margin: 0px 0.2em 0px 0.05em;
}
.bo{border-top: solid 1px #333;}


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

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

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

/*----------------------------------------
	文字修飾 > 文字を四角数字にする
------------------------------------------*/
.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;}

/*------------------------------------------------
	文字修飾 > 循環小数の記号(spanで囲む)
--------------------------------------------------*/
/*採用版(候補2ベース)*/
.junkan0{position:relative;}
.junkan0::before{
	position: absolute;
	content:".";
	font-weight:bold;
	top: -1.05em;
	left: 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回)**/
.H-beat1-1 {
    display: inline-block;
    animation-name: H-beat1;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-delay:0s;
    animation-iteration-count:1;
    animation-direction: normal;
	animation-fill-mode: both;}

/*キーフレーム定義*/
@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);}
}
	
/**********************************************************
						ボックス
***********************************************************/
/*------------------------------------------------
ボックス>デフォルト(標準)ボックス
タイトルを持たいないボックスで2020.3にN-boxから独立
標準コンテナ(box-ctr1)に入れて使う
要素を横並びにするバリエーションflx型
(20201121新1号館から移植)
---------------------------------------------*/
/* 色設定 */
.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.8em;
	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;
	}

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

/* ボックス内本文 */
.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.11新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;}/*複数行ある場合は行間をつめる*/


/*-----------------------------------------------
		ボックス> 画像と記述を入れるラッパー(I-wrap1)
	2024.9.29ネイティブ開発
------------------------------------------------*/
/**本体**/
.I-wrap1{/*overflow: auto;*/font-size:min(calc(0.75rem + 0.75vw),1.2rem);}
.I-wrap1::after {content: ""; display: table; clear: both;}/*はみだし対策overflow:auto;と違ってスクロールバーが出ない♪*/
.I-wrap1 p{font-size:min(calc(0.75rem + 0.75vw),1.2rem);}
/*画像を入れるクラスimgのdiv*/
.I-wrap1 .img{float:right;width:min(35%,180px);margin:0 0 0 0.3em;}
.I-wrap1 .img img{width:100%;margin:0;object-fit: contain;}
.I-wrap1 .img p{margin:0;}/*wpが画像をpに入れてしまうので*/
/*中の画像の比率に応じて重畳クラスを設定するとサイズが最適化*/
.I-wrap1 .img.L{width:min(40%,260px);}/*横長と明記*/
.I-wrap1 .img.P{width:min(30%,160px);}/*縦長と明記*/
/** キャプション(上)(下)**/
.I-wrap1 .img .cap1u,.I-wrap1 .img .cap1d{font-size:0.8em;opacity:0.85;text-align:center;line-height:1.3;}
.I-wrap1 .img .cap1u{margin: 0.2em 0 0.3em;}
.I-wrap1 .img .cap1d{margin-top:0.2em;}


/*********************************************
	オーディオメディアプレーヤー包括ユニットと関連
**********************************************/
/*** ユニット全体 ***/
.AMP1{position:relative;display: flex; align-items: center; background: #222;overflow:hidden;border-radius:0.2em 0.7em;margin:0.2em auto;}
/*タイトル*/
.AMP1 .title{display: inline-flex;background: #e3d2ba;
    color: #3c372bcc;align-items: center;margin-left: 1em;
    font-size: 0.8em;font-weight: bold;
    letter-spacing: 0.1em;
    height: fit-content;padding: 0 0.5em;
    white-space: nowrap;border-radius: 0.2em 0 0 0.6em;
    box-shadow: 1px 1px 4px #2058 inset;}
/*メディアプレーヤーのコンテナ*/
.AMP1 .body{flex-grow: 1;z-index:0;}
/*** 随伴するD-box1(画像を入れる)のカスタマイズ ***/
.D-box1.AMP{padding: 0;background: #222;border: solid 15px #222;
    border-radius: 0.2em 0.7em;}
/*画像とキャプションもカスタマイズ*/
.D-box1.AMP img{border-radius: 0.2em 0.7em}
.D-box1.AMP .cap1u{opacity:1;display: inline-flex;background: #e3d2ba;
    color: #3c372bcc;align-items: center;font-weight: bold;letter-spacing: 0.1em;height: fit-content;padding: 0.2em 1em;
    white-space: nowrap;border-radius: 0.2em 0.7em 0 0;
    box-shadow:1px 1px 4px #2058 inset;}

/*-----------------------------------------------
		ボックス> 強調ボックス(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(2022.7.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:#ff8d1a;}/* ボックス内本文*/


/*色設定(変数)作成中*/
.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;
	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;
	top: -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.5;
	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;*/}


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

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

/***** 吹き出し1(左に人物) *******/
.S-box1{position: relative;
	display: inline-block;
	max-width:calc(100% - 120px);
	background:#fffbe5;
	margin-left:calc(6px + 3vmin);/* 左の空白(角用) */
	border-radius: 30px;
	border: 2px solid #ffbd9d;
	padding:1em 1em 1em 1.5em;
	text-align: left;
	color:#a25e16;
	font-size:inherit;
	/*font-size:min(calc(0.7em + 0.4vw),1.1em);*/
	line-height:1.6;
	box-shadow: 2px 2px 6px 0px #214b8a73;}

.S-box1 p{font-size:inherit;
	margin-left: calc(2.5vmin - 1em);
    margin-right: calc(2.5vmin - 1em);}

/* 吹き出し1の角(左向き) */
.S-box1:after{position:absolute;
	top:calc(50% - 4.5px - 2vmin);
left:calc(-5px - 2vmin);
content:"";
width:calc(4px + 4vmin);
height:calc(4px + 4vmin);
	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%;
	/*display: inline-block;*/
	/*max-width:calc(100% - 120px);*/
	background:#fffbe5;
	/*margin-left:calc(6px + 3vmin);/* 左の空白(角用) */
	border-radius: 30px;
	border: 2px solid #ffbd9d;
	padding:1em 1em 1em 1.5em;
	text-align: left;
	color:#a25e16;
	font-size:inherit;
	/*font-size:min(calc(0.7em + 0.4vw),1.1em);*/
	line-height:1.6em;
	box-shadow: 2px 2px 6px 0px #214b8a73;}
.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 - 2vmin);
left:calc(16px + 6vmin);
content:"";
width:calc(4px + 4vmin);
height:calc(4px + 4vmin);
	background:#fffbe5;
	border-style:solid;
	border-color:#ffbd9d;
border-width:4px 0 0 4px;
transform: scale(0.5,0.5)rotate(45deg);}
/*尾を表示しない重畳クラス*/
.S-box2.no-tail:after{display:none;}


/*-----------------------------------------------
		ボックス> ボタン(リンク)ボックスと付属要素
--------------------------------------------------*/
/***** 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(カテゴリなど集合体で使うボタン) ******/
/* ラッパーコンテナは他のボタンと共通 */

/* ラッパー(縦に積んだボックスロウを包む形状:カテゴリー単位) */
.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;}

/********* 範囲拡張リンク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;}

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

/*------------------------------------------------
ボックス>ボタンボックス3(非常に大きなボックス。国語ブログ用に開発中)
--------------------------------------------------*/
.B-box3-ctr{display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	margin:0;
	padding:0 1em;}

.B-box3{overflow:hidden;
	position:relative;
	width:25vw;height:25vw;
	margin:0.5em 0;
	border:solid 2px grey;
	border-radius:50%;
	background:pink;
	padding:1em;
	text-align:center;
	color:white;
	font-size:calc(0.3em + 3vw);
	font-family:sans-serif;
	font-weight:bold;
	line-height: 1.2em;
    letter-spacing: 0.1em;}

.B-box3 .title{position:absolute;
	width:4em;
	margin:0;
	top:50%;left:50%;
	transform: translate(-50%,-50%);
	text-align:center;}

/*-----------------------------------------------
	ボックス> まとめボックス改め目次ボックス
------------------------------------------------*/
/***** 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:1em auto 0.5em;
	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.7em;}
/* ボックス内本文 */
.M-box1 p{margin: 0;padding: 0;line-height:1.6em;}

/* タイトル */
.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;}

/* ボックス下辺の固定ロゴ */
.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 .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;
	display: inline-block;/* 可変幅 */
	min-width:280px;/* 最低幅 */
	max-width: calc(100vw - 60px);/* 最大幅 */
	/*color:#6597c5;*/
	background-color:#FFF5 ;
	padding: 16px 16px 15px;
	border-style:solid;
	border-width:3px;
	border-radius: 14px;
	box-shadow: 0 0 0 4px white, 0 0 0 7px #82c1fb;
	margin: 10px 5vw 30px;}

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

/* ボックス右下の固定ロゴ */
.M-box:after{position: absolute;
	right: calc(50% - 3.2rem);
	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(2021.4新1号館から移植)
------------------------------------------------*/
/* まとめて色設定 */
.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;}

/*ボックス内の共通文言(カウンターなし)*/
.L-boxA .zenbun{}

/** ボックス内本文(カウンター付き) **/
.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;}


/*************************************
ボックス>アフィリエイト用
(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;
	border-style:solid;
	border-width:3px;
	border-radius:0px 24px 10px 24px;
	margin: 0px 0px 10px 0px;
}
/* 大問右下の固定ロゴ共通設定 */
.Q-box4La:after,
.Q-box4Lb: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;
}
/* 大問内側の枠(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 16px 7px 16px;
	margin:0px;
}
.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;
	border-style:solid;
	border-width:2px;
	border-radius:0px 24px 10px 24px;
	margin: 0px 5px 15px;
}
.Q-box4Sa{border-color:#c4eab7;}
.Q-box4Sb{border-color:#a7e4f1;}

/* 小問内側の枠(inner) */
.Q-boxIn4Sa,.Q-boxIn4Sb {
	display:block;
	background-color:#fff5;
	padding:10px 15px;
	border-style:solid;
	border-width:2px;
	border-radius:1px 16px 7px 16px;
	margin:0px;
}
.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%);
}


/* -------------------------------------------------------
	ボックス> 追加クラス
--------------------------------------------------------*/
/* 破線にする*/
.dashed {border-style:dashed ;}
.N-box.dashed {border-color:#bce;}/* N-box破線は色を薄くする */

/* 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のロゴ無し(画像ボックス)は小型化 */

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

/**********************************************
			ボタン
********************************************/
/****** CTAボタン(CTA-btn1)(20201109総本部から移植) ******/
/* ボタンコンテナ */
.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)}


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

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

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

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