@charset "utf-8";
/*
Template: jstork
Theme Name: stork_custom
Theme URI:http://open-cage.com/stork/
Version: 1.1.2
*/

#container{
	margin-top: 0px;
}


/*ヨメレバ*/

/*--------------------------------------
  ヨメレバ・カエレバ（PC）
--------------------------------------*/
.booklink-box, .kaerebalink-box{
    padding:25px;
    margin-bottom: 10px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:30%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

/*--------------------------------------
  ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/
.booklink-box, .kaerebalink-box{
    padding:25px;
    margin-bottom: 10px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:30%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{color:#FF9901 !important;border: 1px solid #FF9901 !important;}
.shoplinkrakuten a{color:#c20004 !important;border: 1px solid #c20004 !important;}
.shoplinkkindle a{color:#007dcd !important;border: 1px solid #007dcd !important;}
.shoplinkkakakucom a{color:#314995 !important;border: 1px solid #314995;}
.shoplinkyahoo a{color:#7b0099 !important;border: 1px solid #7b0099 !important;}
/*ここまでを変更*/
.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
    width: 100px !important;
    min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
    font-size: 15px;
    font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:calc(100% - 4px);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin: 2px 0px;
    padding:10px 0px;
}
}


/* リンクカード　ラベル文字を変える */
.related_article .ttl:before{
	content:'関連記事' !important;
}

/* ヘッダー英字フォント変更 */
h2.en.gf{
    font-family: YuGothic,'Yu Gothic','Hiragino Sans','Helvetica Neue','Helvetica','Arial',sans-serif;
    font-size: 2.3em !important;
}

.border{
border-color:red }


/* 枠1 青 */
.box1 {
    margin: 2em 0;
    background: #dcefff;
}
.box1 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box1 p {
    padding: 15px 20px;
    margin: 0;
}

/* 枠2 赤 */
.box2 {
    margin: 2em 0;
    background: #ffc0cb;
}
.box2 .box-title {
    font-size: 1.2em;
    background: #8b0000;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box2 p {
    padding: 15px 20px;
    margin: 0;
}


/* 枠3 グレー */
.box3 {
    margin: 2em 0;
    background: #f5f5f5;
}
.box3 .box-title {
    font-size: 1.2em;
    background: #696969;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box3 p {
    padding: 15px 20px;
    margin: 0;
}


/* 枠4 ポイント */


.box4 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #228b22;
}
.box4 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #228b22;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box4 p {
    margin: 0; 
    padding: 0;
}


/* 枠5 黄色 */
.box5 {
    margin: 2em 0;
    background: #fafad2;
}
.box5 .box-title {
    font-size: 1.2em;
    background: #fafad2;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box5 p {
    padding: 15px 20px;
    margin: 0;
}


table {
	width: 95%;
	margin: 0 auto;
	border-collapse: collapse;
	border-spacing:0;
}
th, td {
	margin: 0;
	padding: 8px 10px;
	border: 1px solid #ccc;
}
th {
	background: #ffc;
}
.table-scroll::-webkit-scrollbar {
height: 8px; /* スクロールバーの高さ */
}
.table-scroll::-webkit-scrollbar-thumb {
background: #aaa; /* スクロールバーの色 */
}
.table-scroll::-webkit-scrollbar-track {
background: #ccc; /* スクロールバーの背景色 */
}




#page-top a {
padding: 15;
}


.x-scroll {
overflow: auto;
}
.x-scroll table{
width:100%;
}
.x-scroll::-webkit-scrollbar{
height: 5px; /* スクロールバーの高さ */
}
.x-scroll::-webkit-scrollbar-track{
background: #F1F1F1; /* スクロールバーの背景色 */
}
.x-scroll::-webkit-scrollbar-thumb {
background: #d6d6d6; /* スクロールバーの色 */
}
.x-scroll td, .x-scroll th{
	white-space: nowrap;}　/* 文字の折返しを禁止 */

.x-scroll{font-size:10px;}




@media (max-width: 767px) {
td {
font-size:13px;
}

th {
font-size:13px;
}
}

.entry-content td ul li:before {
top:5px;
}

 /* 記事下CTA① */


.button03{
     display:block;
     width: auto;
     height:60px;
     line-height: 60px;
     color: #FFF;
     text-decoration: none;
     text-align: center;
     background-color: #e74c3c; /*ボタン色*/
     border-bottom: solid 6px #c0392b; /*下線色*/
     border-radius: 5px; /*角丸*/
	 margin-top: 10px;
}

.button03:hover{
     background-color: #e74c3c;/*ボタン色*/
     border-bottom: solid 6px #c0392b; /*下線色*/
}

.button03:active {
     margin-top: 6px;
     border-bottom: none;
     -webkit-transform: translateY(6px);
	 transform: translateY(6px);
}


 /* 記事下CTA② */

.button04{
     display:block;
	 width: auto;
     height:60px;
     line-height: 60px;
     color: #FFF;
     text-decoration: none;
     text-align: center;
     background-color: #3498db; /*ボタン色*/
     border-bottom: solid 6px #2980b9; /*下線色*/
     border-radius: 5px; /*角丸*/
     margin-top: 10px;

}

.button04:hover{
     background-color: #3498db;/*ボタン色*/
     border-bottom: solid 6px #2980b9; /*下線色*/
}

.button04:active {
     margin-top: 6px;
     border-bottom: none;
	 -webkit-transform: translateY(6px);
	 transform: translateY(6px);
}



/* ヘッダー英字フォント変更 */

@media (max-width: 767px) {
h2.en.gf{
    font-size: 24px !important;
}
}



/* 黒板風　1 */
.kokuban-s1 {
 position: relative;
 margin: 2em auto;
 padding: 1em;
 width: 90%; /* ボックス幅 */
 background: #202020; /* ボックス背景色 */
 color: #fff; /* 文章色 */
 border: 7px solid #b2771f; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 5px #333;
}
.kokuban-s1::before,
.kokuban-s1::after {
 position: absolute;
 content: '';
 bottom: 0;
} 
.kokuban-s1::before {
 width: 20px;
 right: 10px;
 border: solid 3px #ff42a0; /*チョーク（ピンク） */
 border-radius: 3px 2px 0 2px;
}
.kokuban-s1::after {
 width: 15px; 
 right: 45px;
 border: solid 3px #fff; /*チョーク（白） */
 border-radius: 8px 5px 2px 5px;
}



.box28 {
    position: relative;
    margin: 2em 0;
    padding: 25px 10px 7px;
    border: solid 2px #dcdcdc;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -2px;
    left: -2px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #dcdcdc;
    color: #ffffff;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}


.box100 {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: solid 3px #e5e5e5;
}
.box100 p {
    margin: 0; 
    padding: 0;
}


body {
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}


/*著者タグ*/

*{
  box-sizing: border-box;
}
.profile-wrapper{
  width: 100%;
  padding: 20px;
  border: solid 1px #eee;
}
.profile-inner{
  display: flex;
}

.author-photo{
  width:90px;
  height:90px;
  border-radius: 50%;
  overflow:hidden;
}


.author-photo img{
  object-fit: contain;
  display: inline-block;
  max-width: 100%;
}

.author-plofile{
display: inline-block;
width:80%;
padding: 0 0 0 50px ;
display: flex;
flex-direction: column;
flex:1;
}

.author-title{
  border-bottom: solid 1px #eee;
}


.career p{
  font-size:18px;
}
p.author-title{
  font-size: 16px;
}
p.name{
  font-size: 18px;
  font-weight: bold;
}
  .career-close{
    display: block;
  }
  .career{
    display: none;
  }


@media (min-width:769px){
  .author-photo{
    width:130px;
    height: 130px;
  }
  .career-close{
    display: none;
  }
  .career{
    display: block;
  }
}



/************************************
** ボックス
************************************/

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #2980b9;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #2980b9;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}


.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #c0392b;
    border-radius: 8px;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #c0392b;
    font-weight: bold;
}
.box27 p {
    margin: 0; 
    padding: 0;
}


.box28 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #f39c12;
    border-radius: 8px;
}
.box28 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #f39c12;
    font-weight: bold;
}
.box28 p {
    margin: 0; 
    padding: 0;
}




.box29 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #27ae60;
    border-radius: 8px;
}
.box29 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #27ae60;
    font-weight: bold;
}
.box29 p {
    margin: 0; 
    padding: 0;
}


/************************************
** トグル表示ボタン青
************************************/
.toggle-wrap .toggle-button-blue {
  display: block;
  cursor: pointer;
  padding: 15px 10px;
  background-color: #fff;
  border: 3px solid #2980b9;
  text-align: center;
  margin-bottom: -1em;
  border-radius: 3px;
}

.toggle-wrap .toggle-button-blue ::after{
    left: 4px;
    box-sizing: border-box;
    width: 4px;
    height: 4px;
    border: 4px solid transparent;
    border-left: 4px solid #7a0;
}

.toggle-wrap .toggle-button-blue:hover {
  border-color: #3498db;
}

.toggle-wrap .toggle-content,
.toggle-wrap > input[type="checkbox"] {
  display: none;
}

.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-content {
  display: block;
}


.fas fa-chevron-down {
  color: #2980b9;
}

/************************************
** トグル表示ボタン赤
************************************/

.toggle-wrap .toggle-button-red {
  display: block;
  cursor: pointer;
  padding: 15px 10px;
  background-color: #fff;
  border: 3px solid #c0392b;
  text-align: center;
  margin-bottom: -1em;
  border-radius: 3px;
}

.toggle-wrap .toggle-button-red ::after{
    left: 4px;
    box-sizing: border-box;
    width: 4px;
    height: 4px;
    border: 4px solid transparent;
    border-left: 4px solid #7a0;
}

.toggle-wrap .toggle-button-red:hover {
  border-color: #e74c3c;
}

.toggle-wrap .toggle-content,
.toggle-wrap > input[type="checkbox"] {
  display: none;
}

.toggle-wrap > input[type="checkbox"]:checked ~ .toggle-content {
  display: block;
}




.fas fa-chevron-down {
  color: #2980b9;
}


.marker_yellow {
background: linear-gradient(transparent 60%, #f1c40f 60%);
}


.fa-star{
	color: #f1c40f;
}

.fa-star-half-alt{
	color: #f1c40f;
}

.far fa-star{
	color: #f1c40f;
}



/* 2025年 WPプラグイン更新による追記 ----------------------- */

footer#footer {
	position: relative;
}

/* サイトマップのスタイル */
.wsp-posts-title {
  display: none;
}

.wsp-category-title {
  width: 100%;
  padding: 5px 10px;
  display: block;
  background-color: #e9e9e9;
}

.wsp-posts-list > li:not(.wsp-post) {
  position: initial !important;
}

.wsp-post a {
  font-size: 16px;
}

/* 目次がないときは「目次に戻る」を出さない */
body:not(:has(#toc_container)) a[href="#toc_container"] {
  display: none;
}

/* YARPP 関連する記事 */
.yarpp.yarpp-related h3 {
	background-color: #f5f5f5;
	border-color: #132c4f;
	border-left: 4px solid;
    padding: .7em 0 .7em .8em;
    margin-top: 1.8em;
    margin-bottom: 2em;
    font-size: 1.3em;
    font-weight: bold;
}
.yarpp.yarpp-related ol {
	margin: 0 0 18px !important;
    padding: 0 !important;
    -moz-column-count: 2 !important;
    -moz-column-gap: 40px !important;
    -moz-column-rule: 1px solid #ccc !important;
    -webkit-column-count: 2 !important;
    -webkit-column-gap: 40px !important;
    -webkit-column-rule: 1px solid #ccc !important;
    column-count: 2 !important;
    column-gap: 40px !important;
    column-rule: 1px solid #ccc !important;
    list-style-type: none;
}
.yarpp.yarpp-related ol li {
	overflow: hidden !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    -moz-column-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    break-inside: avoid-column !important;
    text-indent: 0.7em;
    position: relative;
}
.yarpp.yarpp-related ol li::before {
	content: " ";
    width: 5px;
    height: 5px;
    background: #000;
    box-shadow: 0 0 0px #000;
    display: block;
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    left: 2px;
    top: 7px;
}
.yarpp.yarpp-related ol li a {
	text-decoration: underline;
}
@media screen and (max-width: 480px) {
	.yarpp.yarpp-related ol {
		-moz-column-count: auto !important;
        -moz-column-gap: normal !important;
        -moz-column-rule: none !important;
        -webkit-column-count: auto !important;
        -webkit-column-gap: normal !important;
        -webkit-column-rule: none !important;
        column-count: auto !important;
        column-gap: normal !important;
        column-rule: none !important
	}
}

/* 親要素：スクロールを許可し、高さを固定 */
.x-scroll {
    overflow: auto;
    height: 500px;
    width: 100%;
    border: 1px solid #ccc;
}

.x-scroll table {
    border-collapse: separate; /* stickyを効かせるために重要 */
    border-spacing: 0;
    width: 100%;
}

/* --- 1行目（ヘッダー全体）の固定 --- */
.x-scroll th, .x-scroll td {
    border: 1px solid #eee;
    background-color: #fff; /* 背景色がないと重なった時に透けます */
    padding: 10px;
}

.x-scroll thead th, 
.x-scroll tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 2; /* 1列目より上に持ってくる */
    background-color: #f9f9f9;
}

/* --- 1列目（スクール名）の固定 --- */
/* thが1列目にあることを前提としています */
.x-scroll th:first-child,
.x-scroll td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
    min-width: 150px; /* 固定列の幅を確保 */
    border-right: 2px solid #ddd; /* 境界をわかりやすく */
}

/* --- 左上の角（1行目かつ1列目） --- */
.x-scroll tr:first-child th:first-child {
    z-index: 3; /* 最前面に配置 */
    background-color: #f9f9f9;
}
/* ----------------------- */

/* 忍者英会話：記事冒頭とモバイルのパンくず調整 */

/*
 * 忍者英会話：記事冒頭・モバイルのパンくず調整
 */

/* PC：LINE告知より上の余白を圧縮 */
@media screen and (min-width: 681px) {
  #main > article.article > #text-39.widget_text {
    margin-top: -56px !important;
  }
}

/* モバイル */
@media screen and (max-width: 680px) {
  /* パンくずは1行化し、重複する記事タイトルを隠す */
  #breadcrumb > ul {
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  #breadcrumb > ul > li:last-child {
    display: none !important;
  }

  /* LINE告知の前後を圧縮 */
  #main > article.article > #text-39.widget_text {
    margin-top: -16px !important;
    margin-bottom: 8px !important;
  }

  #main > article.article > #text-39.widget_text .textwidget > p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* PR表記を必ず元の位置へ戻す */
#main > article.article > #text-39.widget_text {
  margin-top: 0 !important;
}

@media screen and (max-width: 680px) {
  #container #g_nav,
  #container .g_nav-sp {
    display: none !important;
  }
}

/* 記事冒頭：PR表記とLINE告知をコンパクトに整える */
#text-39 .textwidget > p > br {
  display: none;
}

#text-39 .textwidget > p > span:first-child {
  display: block;
  margin: 0 0 4px;
  color: #667085;
  font-size: 8px !important;
  line-height: 1.4;
}

#text-39 .textwidget > p > span[style*="background-color"] {
  display: inline-block;
  padding: 5px 8px;
  background: #edf9ef !important;
  border: 1px solid #b9e5c2;
  border-radius: 4px;
  line-height: 1.35;
}

#text-39 .textwidget > p > span[style*="background-color"] > span {
  font-size: 12px !important;
}

#text-39 .textwidget > p > span[style*="background-color"] a {
  color: #18733a !important;
  font-weight: 700;
  text-decoration: none;
}

#text-39 .textwidget > p > span[style*="background-color"] a:hover {
  text-decoration: underline;
}