@charset "utf-8";

.contents-wrap{
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	line-height:1.75;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	word-break:normal;
	overflow-wrap:break-word;
	max-width: 1200px;
	margin:0 auto;
}

.contents-wrap h1,
.contents-wrap h2,
.contents-wrap h3,
.contents-wrap h4,
.contents-wrap h5{
	margin:0;
	line-height: 1.2;

}

.contents-wrap ul{
	margin:0;
	padding:0;
	list-style:none
}
.contents-wrap li>ul{
	margin-bottom:0
}
.contents-wrap .index-section li:not(:last-child){
	margin-bottom: .6em;
}

.contents-wrap p{
	font-family:"Times New Roman",Times,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","游明朝",YuMincho,"HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
	font-size:16px;
}

.contents-wrap a{
	color: #428bca;
}

.top_box .pan_navi{
	margin-left: 20px;
}

.contents-wrap p.ya,
.contents-wrap p.ke{
	text-indent: -2em;
	margin-left: 2em;
}

.contents-wrap p.ya::first-letter,
.contents-wrap p.ke::first-letter{
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight: 700;
	color:#eb688f;
}

.contents-wrap p.ke::first-letter{
	color:#68a8eb;
	}

.contents-wrap .center{
	text-align: center;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-size: medium;
	position: relative;
	margin-bottom: 40px;
}
.contents-wrap .center::before,
.contents-wrap .center::after{
	content: "";
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: #333;
	vertical-align: middle;
}
.contents-wrap .center::before{
margin-right: 15px;
}
.contents-wrap .center::after {
	margin-left: 15px;
}

.series-box{
	border: 5px solid #DCB984;
	border-radius: 10px;
	background: #FBF3E4;
	padding: 10px;
	position: relative;
	margin: -2% auto 1em;
	max-width: 80%;
}
.theme-arrow{
	position: relative;
}
.theme-arrow::after{
	content: "";
	background: url(/rnote/dr_yandel_index/images/theme-arrow.png) no-repeat;
	background-size: 188px auto;
	display: inline-block;
	width: 188px;
	height: 54px;
	position: absolute;
	left: calc(50% - 222px);
	bottom: 4%;
	z-index: 0;
}
.series-num{
	position: absolute;
	background:#D92F4A;
	border-radius: 35px;
	font-weight: 700;
	font-size: 28px;
	top: -22px;
	left: 20px;
	color: #fff;
	padding: 0 20px;
	letter-spacing: 4px;
	line-height: 1.5;
}
.series-num small{
	font-size: 80%;
	}
.series-box h2{
	font-size: 36px;
	font-weight: 700;
	flex: 0.9;
	margin: 15px;
	position: relative;
	font-family: var(--font-notosans);
	line-height: 1.4;
	z-index: 1;
}
.web-ver{
	font-size: 72%;
	display: block;
	color: #e60044;
	text-shadow: 1px 1px 0 #fbf3e4, -1px -1px 0 #fbf3e4, -1px 1px 0 #fbf3e4, 1px -1px 0 #fbf3e4, 0px 1px 0 #fbf3e4,  0-1px 0 #fbf3e4, -1px 0 0 #fbf3e4, 1px 0 0 #fbf3e4;
}

.series-box-inner{
	display: flex;
	align-items: flex-start;
}

.book-info-wrap{
	background: #fff;
	padding: 10px;
	display: flex;
	align-items: flex-start;
	flex: 1;
	position: relative;
	border-radius: 10px;
}

.book-info-wrap a{
	display: contents;
}

.book-info-wrap img{
	max-width: 140px;
	height: auto;
	background: #fff;
	border: 1px solid #333;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	margin-left: 15px;
}

.book-info-wrap img:hover,
.book-info-wrap>a:hover .book-tag{
	opacity: 0.75;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.book-info-content{
	display: flex;
	flex-direction: column;
	min-height: 200px;
	justify-content: space-between;
}

.book-info-inner{
	font-size: 24px;
}

.book-info-inner a{
	text-decoration: underline;
	-webkit-text-decoration: underline;
	text-decoration-line: underline;
	color: #333;
	display: block;
}

.book-info-inner a:hover,
.book-info-wrap>a:hover{
	text-decoration: none;
}

.book-info-inner h3{
	font-size: 16px;
	font-weight: 700;
}

.book-info-inner p{
	text-indent: 0;
	margin: 0;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-size: 14px;
}

.book-info-inner p .pink{
	color: #D92F4A;
	margin-right: 2px;
}
.book-title:not(:root){
	font-size: 18px;
	margin-bottom: 0.2em;
}
.book-series:not(:root){
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
}
.book-subttl:not(:root){
	font-size: 13px;
	color: #2C6AA5;
	font-weight: 700;
}
.book-details:not(:root){
	font-size: 12px;
	margin-top:1.4em;
}

.series-box.final-fulltext .series-box-inner{
	display: block;
}
.series-box.final-fulltext .book-info-wrap{
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap: 10px;
	background: transparent;
	padding: 0;
	margin-top: 20px;
}
.series-box.final-fulltext .book-info-wrap img{
	max-width: 100%;
	margin: 0;
}
.series-box.final-fulltext .book-info-wrap a{
	display: block;
}
.book-tag{
	background: #DF4778;
	border-radius: 7px;
	color: #fff;
	padding: 3px 5px;
	line-height: 1;
	font-size: 12px;
	font-weight: 700;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	display: inline-block;
}
.book-tag .num{
	background: #fff;
	color: #DF4778;
	border-radius: 50px;
	width: 12px;
	height: 12px;
	font-size: 10px;
	text-align: center;
	letter-spacing: -1px;
	font-weight: 400;
	margin-right: 1px;
	display: inline-block;
	line-height: 12px;
}
.sentence .book-tag{
	display: inline;
	padding: 2px 3px;
	margin: 0 2px;
	position: relative;
	top: -1px;
}
.sentence .book-tag .num{
	display: inline;
	padding: 1px;
	letter-spacing: 0;
	line-height: 6px;
}

.sentence-section{
	max-width: 840px;
	margin: 90px auto 50px;
}
.sentence{
	max-width: 840px;
	margin-right: auto;
	margin-left: auto;
}

.index-section{
	margin: 80px auto 40px;
}

.index-section h3.head3{
	color: #DF4778;
	font-weight: 700;
	margin-bottom: 5px;
	text-indent: -1.8em;
	margin-left: 1.8em;
	clear: both;
	line-height: 1.4;
}

.index-section h3.head3::before{
	content: "";
	background: url(/rnote/dr_yandel_index/images/rabbit-icon.png) no-repeat;
	background-size: 32px auto;
	display: inline-block;
	width: 32px;
	height: 40px;
	margin-right: 3px;
	vertical-align: sub;
}

.index-section h3.head3 .smaller{
	font-size: 80%;
}
.index-section h3.head3-2:not(:root){
	font-size: 16px;
	margin-top: 1em;
}
.index-section h3.head3-2:not(:root)::before{
	width: 24px;
	height: 29px;
	background-size: contain;
}


.index-section p, .sentence-section p{
	text-indent: 1em;
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	line-height: 1.9;
}

.pink-box{
	background: #fbefef;
	border: 3px solid #f9e2e4;
	padding: 15px 20px;
	border-radius: 14px;
	margin: 1.6em 0;
	font-size: medium;
}
.blue-box {
	background: #edf1fc;
	border: 3px solid #dde4f6;
}

.emphasis{
	-webkit-text-emphasis-style: dot;
	-moz-text-emphasis-style: dot;
	-ms-text-emphasis-style: dot;
}

.pink-cl{
	color: #f1bdc7;
	text-align: center;
	margin: 1.6em 0;
}

.pink-sup{
	color: #E8719B;
}

.topics:not(:root){
	text-indent: -1em;
	margin-left: max(1em, min(3vw,2em));
}

.red-box{
	margin: 1.6em 0;
	border: 5px solid #E26068;
	border-radius: 20px;
	font-size: medium;
	font-weight: 700;
	-webkit-font-smoothing: antialiased;
}
.red-box-inner{
	padding: 0.6em 1.4em;
	background-color: #FCF7ED;
	box-shadow: 0 0 0 2px #FCF7ED;
	border: 2px solid #F2AFB0;
	border-radius: 15px;
}
.red-box-txt:not(:root){
	margin: 0;
	margin-left: 1em;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	text-indent: 0;
}
.red-box ul{
	list-style-type: disc;
	padding-left: max(15px, min(5vw,30px));
	margin-top: 4px;
}


.index-section table{
	border-collapse: separate;
	width:100%;
	border-bottom: solid 1px #555;
	border-right: solid 1px #555;
}

.index-section th,
.index-section td{
	padding:1rem;
	border-top: 1px solid #ada5a7;
	border-left: 1px solid #555;
	vertical-align: middle;
}

.index-section th{
	font-weight:normal;
	font-size:1.5rem;
	color:#fff;
	background:#DF4778;
	position: sticky;
	position: -webkit-sticky;
	top:0;
	text-align: center;
}
.heading th:nth-child(2),
.heading th:nth-child(3){
	min-width: 10em;
}
.index-section .midashi{
	text-align: center;
	font-weight: 700;
	color: #D92F4A;
	padding: 2.2rem 1rem;
	line-height: 1;
}
.index-section td:empty::after{
	content: "-";
	text-align: center;
	display: block;
}
.beige-bg td:nth-child(1){
	background: #f3e9da;
}
.fulltxt-book-one-bg td:nth-child(1){
	background: #c9d5f3;
}
.fulltxt-book-two-bg td:nth-child(1){
	background: #d2f2bd;
}
.beige-bg:not(:nth-child(1)){
	background: #fbefef;
}
.fulltxt-book-one-bg:not(:nth-child(1)){
	background: #edf1fc;
}
.fulltxt-book-two-bg:not(:nth-child(1)),
.green:not(:root){
	background: #f3fced;
}

.sky-blu:not(:root){
	background: #e5f7ff;
}
.yellow:not(:root){
	background: #ffffca;
}
.beige:not(:root){
	background: #f3e9da;
}
.pink:not(:root){
	background: #fbefef;
}

.red-txt:not(:root){
	color: red;
}

.index-section table td.inherit {
	background: #fff;
}

tr:hover:not(:first-of-type),
tr:hover:not(:first-of-type) td.inherit {
	background: #fbf8d1 !important;
	color: #111;
}

tr:hover [data-label="読み"] {
	background: #faee6c !important;
	color: #111;
}

[data-label="読み"] {
	background: #FCF7ED;
	font-weight: 700;
}
.index-section td[data-label="掲載ページ"], td[data-label="お題本"]{
	white-space: nowrap;
}
.index-section table:not(.final-index) td[data-label="項目"]:nth-child(1),
.index-section table:not(.final-index) td[data-label="サブ項目"]:not(:nth-child(3)),
.index-section table:not(.final-index) td[data-label="ページ"]:not(:nth-child(4)),
.index-section table:not(.final-index) td[data-label="掲載ページ"]:nth-child(2),
.index-section table:not(.final-index) td[data-label="1or2"]:nth-child(3){
	border-top: 1px dashed #ada5a7;
}
.index-section table td.hidden-xs{
	display: table-cell !important;
}
.index-section table td.visible-xs{
	display: none !important;
}
.contents-wrap strong{
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

.btn-box .btn,
.btn-box a.btn{
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.8rem;
}

.btn-box {
	margin: 5em 0 0;
	text-align: center;
}

.btn-box a.btn-c {
  font-size: 2.2rem;
  position: relative;
  padding: 0rem 5.8rem 1.8rem;
  color: #fff;
  background: #e60044;
}
.toFulltext a.btn-c{
  background: #1b67da;
}
.toFulltext.season2 a.btn-c{
  background: #f05624;
}
.toFulltext.season2 a.btn-c:hover{
  background: #ff5c27;
}

a.btn-c span {
  font-size: 1.5rem;
  position: absolute;
  top: -1.25rem;
  left: calc(50% - 140px);
  display: block;
  width: 280px;
  padding: 0.2rem 0;
  color: #e60044;
  border: 2px solid #e60044;
  border-radius: 100vh;
  background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
.toFulltext a.btn-c span{
  color: #1b67da;
  border: 2px solid #1b67da;
}
.toFulltext.season2 a.btn-c span{
  color: #f05624;
  border: 2px solid #f05624;
}

a.btn-c span:before,
a.btn-c span:after {
  position: absolute;
  left: calc(50% - 10px);
  content: "";
}

a.btn-c span:before {
  bottom: -10px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #e60044 transparent transparent transparent;
}
.toFulltext a.btn-c span:before {
  border-color: #1b67da transparent transparent transparent;
}
.toFulltext.season2 a.btn-c span:before {
  border-color: #f05624 transparent transparent transparent;
}

a.btn-c span:after {
  bottom: -7px;
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

a.btn-c i {
  margin-right: 1rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

a.btn-c:hover {
  color: #fff;
  background: #ff185c;
}
.toFulltext a.btn-c:hover {
  background: #297eff;
}

a.btn-c:hover i{
	transform: translate(3px, 0);
}

.literature{
	margin-top: 4em;
}
.literature-head{
	font-size: 18px;
	font-family:"Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight: 700;
}
.literature-head::before{
	content: "◆";
	color: #999;
	margin-right: 4px;
}
.literature-list{
	counter-reset: number;
	list-style: none;
	margin-top: 0.6em;
}
.literature-list li{
	text-indent: -1.8em;
	margin-left: 1.8em;
}
.literature-list li:not(:last-child){
	margin-bottom: 0.6em;
}
.literature-list li::before{
	counter-increment: number;
	content: counter(number)'）';
}

.attention{
	display: grid;
	justify-content: center;
	margin-bottom: 3em;
}
.attention-wrap{
	display: flex;
	background: #fff5bc;
	padding: 7px 15px;
	font-size: 14px;
	position: relative;
}
.attention .glyphicon{
	margin-right: 6px;
	font-size: 18px;
	position: relative;
	top: 2px;
}
.attention.final{
	margin-top: calc(-60px + 1.5em);
	margin-bottom: 1.5em;
}

.figure-r{
	float: right;
	max-width: 50%;
	margin: 0 0 10px 30px;
}

.figure-c {
	margin: 3em auto;
	max-width: 70%;
}

.mt2:not(:root){
	margin-top: 2em;
}
.mt2-4:not(:root){
	margin-top: 2.4em;
}
.mt3:not(:root){
	margin-top: 3em;
}
.mt4:not(:root){
	margin-top: 4em;
}
.mt5:not(:root){
	margin-top: 5em;
}
.mt7:not(:root){
	margin-top: 7em;
}
.mt40:not(:root){
	margin-top: 40px;
}
@media (max-width: 1100px){
	.series-box-inner {
	flex-direction: column;
	}
	.series-box h2{
		font-size: 30px;
		margin: 12px 10px 20px;
	}
	.series-num {
		font-size: 22px;
		left: 10px;
	}
	.series-box-inner .h2-theme .hidden-xs{
		display: none;
	}
	.theme-arrow::after{
		display: none !important;
	}
	.book-info-wrap {
		margin-top: 18px;
		padding: 20px 10px 10px;
	}
	.book-info-wrap::before {
		content: "⬇︎今回のお題本";
    background: #e53144;
    color: #fff;
    font-weight: 700;
    border-radius: 5px;
    padding: 0 10px;
    position: absolute;
    top: 0;
    left: 50%;
		transform: translateX(-50%) translateY(-50%);
		text-align: center;
	}
	.book-info-content{
		min-height: 100%;
	}

	.series-box.final-fulltext .book-info-wrap::before{
		content: none;
	}
}
@media (max-width: 900px){
	.series-box.final-fulltext .book-info-wrap{
		grid-template-columns: repeat(5,1fr);
	}
}
@media (max-width: 767px){
.breadcrumb, .contents-wrap h1{
	margin-left: -30px;
	margin-right: -30px;
}
.series-box {
	margin: 2em auto;
	max-width: none;
	padding: 20px 20px 15px;
	}
.series-box-0{
	padding: 20px 18px 0 20px;
}
.series-num,.series-box h2 {
	top: -16px;
}
.series-num{
	padding: 0 16px;
	font-size: 16px;
}
.series-box h2{
	margin: 14px 0 0 0;
	font-size: 22px;
}
.series-box h2.h2-series-0{
	margin: 15px 0 0 0;
}

.series-box.final-fulltext{
	padding: 20px 10px 15px;
}
.series-box.final-fulltext .book-info-wrap{
	gap: 5px;
	margin-top: 0;
}
.book-info-wrap .book-tag.book-tag{
	font-size: 10px;
}

.literature-list{
	padding-left: 0;
}

.attention.final {
	margin-top: calc(-40px + 1.5em);
}
}
@media (min-width: 501px){
.index-section .midashi{
	background: #fbd9e4;
	font-size: 17px;
}

.index-section td[data-label="読み"]{
	width: 15%;
}
.index-section td[data-label="ページ"]{
	width: 9%;
}

.book-one-bg:not(:nth-child(1)){
	background: #edf1fc;
}
.book-two-bg:not(:nth-child(1)){
	background: #f3fced;
}
}
@media (max-width: 500px){
.index-section h3.head3 {
	font-size: 18px;
}
.index-section td{
    display: block;
    font-size: 14px;
    position: relative;
    padding: .625em .625em .625em 6em;
		width: 100%;
}
.index-section td:empty::after{
	text-align: left;
}
.index-section .midashi{
		padding: 1.8rem 1rem;
		text-align: center;
		font-size: 16px;
		background: #333;
		color: #fff;
}
.index-section .midashi:first-child{
	border-top-color: #555;
}
.index-section td[data-label]::before{
		content: attr(data-label);
		color: #777;
    display: block;
    position: absolute;
    left: 10px;
	}
.index-section td[data-label="読み"]{
	background: #df497a;
	color: #fff;
}
.fulltxt-book-one-bg td[data-label="読み"]{
	background: #446ed7;
	color: #fff;
}
.fulltxt-book-two-bg td[data-label="読み"]{
	background: #449c09;
	color: #fff;
}
.index-section td[data-label="読み"]:not(:root)::before{
		color: #ffbdd3;
	}
.fulltxt-book-one-bg td[data-label="読み"]:not(:root)::before{
		color: #bccaf0;
	}
.fulltxt-book-two-bg td[data-label="読み"]:not(:root)::before{
		color: #c6e9ae;
	}
.index-section td[data-label="項目"]{
	background: #fbd8de;
	border-top-style: solid !important;
}
.fulltxt-book-one-bg td[data-label="項目"]{
	background: #c9d5f3;
}
.fulltxt-book-two-bg td[data-label="項目"]{
	background: #d6f2c3;
}
.index-section td[data-label="サブ項目"]:not(:root){
	background: #fdf2f5;
	border-top-style: solid !important;
}
.fulltxt-book-one-bg td[data-label="サブ項目"]:not(:root),
.index-section [data-label="サブ項目"].fulltxt-book-one-bg:not(:root){
	background: #edf1fc;
}
.fulltxt-book-two-bg td[data-label="サブ項目"]:not(:root),
.index-section [data-label="サブ項目"].fulltxt-book-two-bg:not(:root){
	background: #f3fced;
}
.index-section td[data-label="サブ項目"]:nth-child(1),
.index-section td[data-label="ページ"]:nth-child(2),
.index-section td[data-label="掲載ページ"]:nth-child(2),
.index-section td[data-label="1or2"]:nth-child(3){
	border-top: 1px solid #ada5a7;
}
.pink:not(:root), .index-section td[data-label="ページ"]{
	background: #fff;
}
.index-section td[data-label="ページ"]{
	border-top-style: solid !important;
}
.index-section td[data-label="掲載ページ"]{
	padding: 0.625em 0.625em 0.625em 7em;
}
.heading {
		display: none;
}
.index-section table td.hidden-xs{
	display: none !important;
}
.index-section table td.visible-xs{
	display: block !important;
}
.figure-r, .figure-c{
		max-width: 100%;
    float: none;
    margin: 3em auto;
}
}
@media (max-width: 460px){
	.series-box{
		border-width: 4px;
	}
	.book-info-wrap {
	flex-direction: column-reverse;
	padding: 28px 10px 10px;
	}
	.book-info-wrap img {
	margin: 0 auto 18px;
	width: 100%;
	}
	.book-info-wrap::before {
		font-size: 12px;
		min-width: 60%;
	}
	.series-box.final-fulltext .book-info-wrap{
		grid-template-columns: repeat(4,1fr);
	}

.btn-box a.btn-c{
		display: block;
    white-space: inherit;
    font-size: 1.7rem;
    padding: 0 0 1.8rem;
}
a.btn-c span{
		width: 200px;
    left: calc(50% - 100px);
    font-size: 1.2rem;
}
}

.toEvent {
	margin-top: 5em;
	text-align: center;
}
.toEvent-container{
	display: inline-block;
	font-weight: 700;
}
.toEvent-txt:not(:root) {
	margin-bottom: 4px;
	font-family:"Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-size: 14px;
	letter-spacing: 4px;
	color: #6d6d6d;
	transition: .5s;
	position: relative;
}
.toEvent-txt::before,
.intop-txt::before {
	margin-right: 10px;
	content: "＼";
}
.toEvent-txt::after,
.intop-txt::after {
	margin-left: 10px;
	content: "／";
}
.toEvent .btn-default {
	font-size: 16px;
	font-weight: 700;
	transition: .5s;
}
.toEvent .btn-default:hover {
	background: #ea688f;
	color: #fff;
	border-color: #ea688f;
}
.toEvent-container:hover .toEvent-txt{
	letter-spacing: 8px;
	transition: .5s;
}
.intop-txt:not(:root){
	margin-bottom: 5px;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 2vw, 20px);
	position: relative;
}
@media screen and (max-width: 767px){
.intop-txt::before {
    position: absolute;
    top: 0;
    left: calc(50% - 100px);
}
.intop-txt::after {
    position: absolute;
    top: 0;
    right: calc(50% - 100px);
}
}

.youtube {
  position:relative;
  width: 100%;
  max-width: 800px;
}

.youtube::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.youtube-list {
  position:relative;
  width: 100%;
  max-width: 450px;
  margin: 1em 1em 0.5em 0;
}

.youtube-list::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

.youtube-list iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

 .intop{
  text-align: center;
  margin-top: 50px;
 }

.intop .btn{
    border-radius: 50px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    padding: 20px 110px;
    text-align: center;
    text-decoration: none;
    background: #0e3990;
    background: -moz-linear-gradient(top, #286ff5, #0e3990);
    background: -webkit-linear-gradient(top, #286ff5, #0e3990);
    background: linear-gradient(to bottom, #286ff5, #0e3990);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 5px 0 #072c75;
    -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 5px 0 #072c75;
    position: relative;
    border-bottom: none;
    -webkit-text-fill-color: #fff;
    transition: .25s all ease-out;
    /* display: block;
    max-width: 404px;
    margin: 0 auto;*/
}
.intop .btn::before{
    position: absolute;
    background: #1244a7;
    background: -moz-linear-gradient(top, #3d80fd, #1244a7);
    background: -webkit-linear-gradient(top, #3d80fd, #1244a7);
    background: linear-gradient(to bottom, #3d80fd, #1244a7);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    border-radius: 50px;
  }
.intop a.btn:hover{
  transform: translateY(4px);
  -webkit-transform: translateY(4px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.0), 0 1px 0 #072c75;
  -webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.0),0 1px 0 #072c75;
  color:#fff;
  }
.intop .btn:hover::before{
    opacity: 0;
}

.intop .btn span::before{
    position: absolute;
    top: 0;
    right: -96px;
    bottom: 0;
    width: 12px;
    height: 12px;
    margin: auto;
    content: "";
    transform: rotate(45deg);
    border-top: 3px solid;
    border-right: 3px solid;
    border-radius: 2px;
  }

.intop .btn span{
  text-shadow: 0px -1px 1px rgba(0,0,0,0.7) !important;
  position: relative;
  z-index: 100;
}

.btn-default:not(:root) {
	color: #333;
}

@media screen and (max-width: 640px){
.intop .btn{
    font-size: 16px;
    padding: 10px;
    max-width: 300px;
    display: block;
    margin: auto;
  }
.intop{
    margin-top:30px;
}
.intop .btn span{
  display: block;
}
.intop .btn span::before {
  right: 0;
}
}

/* ２本立て
------------------------ */
.intro-box{
	clear: both;
	text-align: center;
	margin-top: 6em;
}
.intro-box p{
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	font-weight: 700;
	font-size: max(16px, min(3vw,18px));
}
.special .series-box-inner{
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.book-info-wrap-special{
	display: grid;
	gap: 10px;
}
.special .book-info-content{
	min-height: 140px;
}
.special .book-info-wrap img{
	max-width: 100px;
}


	.tab-content .index-section{
		margin: 60px auto 40px;
}

.nav-tabs:not(:root){
		clear: both;
    position: relative;
    z-index: 1;
    margin-top: max(5em, min(9vw, 6em));
		border: none;
    display: flex;
    align-items: flex-end;
}
.nav-tabs>li{
		margin-bottom: -1px !important;
    width: 33%;
		font-size: 16px;
}
.nav-tabs>li>a{
	font-weight: 700;
	background: #525358;
	color: #fff;
	border: none;
	border-radius: 6px 6px 0 0;
	bottom: 3px;
	display: flex;
	align-items: flex-start;
}
.nav-tabs>li>a:hover{
	background: #87888f;
	border: none;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
		color: #333;
    background-color: #fff;
    border: 3px solid #333;
		border-bottom: none;
    padding: 10px 15px 25px;
    bottom: 0px;
		width: 99%;
		position: relative;
}
.nav-tabs>li.active>a::before{
	content: '';
	background: #fff;
	width: 100%;
	height: 105%;
	display: block;
	left: 0;
	top: 0;
	position: absolute;
	z-index: -1;
}
.nav-tabs>li>a>img {
	display: none;
}
.nav-tabs>li.active>a>img{
	position: relative;
	width: 20px;
	margin-right: 6px;
	top: -1px;
	display: block;
}
.tab-content{
		border-top: 3px solid;
    margin-top: -2px;
}

.book-info-tab-wrap{
	display: grid;
	grid-auto-flow: column;
	gap: 15px;
	margin-bottom: 2em;
}
.book-info-tab-plus{
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: 24px;
}
.book-info-tab{
		display: flex;
    justify-content: center;
    margin-bottom: 2em;
}
.book-info-tab-content{
		display: flex;
    border: 5px solid #e9e9e9;
    align-items: center;
}
.book-info-tab-img{
	padding: 10px 15px;
	transition: .3s ease-in-out;
	-moz-transition: .3s ease-in-out;
	-webkit-transition: .3s ease-in-out;
	overflow: hidden;
	max-height: 66px;
	display: grid;
	justify-content: center;
}
.book-info-tab-img img{
	box-shadow: 0 1px 4px 0 rgb(225 225 225), 0 2px 6px 0 rgb(217 218 219), 0 0 0 0 rgb(175 176 177);
	transition: all .3s;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	width: 55px;
}
.book-info-tab-content:hover .book-info-tab-img img{
	transform: scale(1.1)rotate(10deg);
	-webkit-transform: scale(1.1)rotate(10deg);
	-moz-transform: scale(1.1)rotate(10deg);
}
.book-info-tab-txt{
	font-weight: 700;
	padding: 10px 10px 10px 0;
}
.book-info-tab-txt p{
	margin: 0;
	text-indent: 0;
	line-height: 1.6;
	font-size: 14px;
}
.book-info-tab-txt p:first-child{
	color: #777;
	font-size: 12px;
	margin-bottom: 0.4em;
}
.book-info-tab-txt p:not(:first-child){
	color: #333;
	position: relative;
	transition: .3s;
}
.book-info-tab-txt p mark {
  background-image: -webkit-linear-gradient(to right,transparent 50%,#f9c0d2 50%);
  background-image: -moz-linear-gradient(to right,transparent 50%,#f9c0d2 50%);
  background-image: linear-gradient(to right,transparent 50%,#f9c0d2 50%);
  background-color:initial;
  font-weight: 700;
  background-repeat: repeat-x;
  background-size: 200% .6em;
  background-position: 0 .8em;
  transition: all .25s ease;
  font-weight: 700;
  padding:0;
  padding-bottom: 7px;
}

.book-info-tab-content:hover .book-info-tab-txt p mark {
	background-position: -100% .8em;
}
.book-info-tab-content:hover{
	text-decoration: none;
}

.book-one{
	color: #2235ac;
}
.book-two{
	color: #459e08;
}

.head4:not(:root){
	background: #fdf0f0;
	padding: 10px 10px 7px;
	font-size: 24px;
	font-weight: 700;
	margin: 4em 0 1.6em;
	display: flex;
	align-items: self-start;
	line-height: 1.4;
}
.head4 span:first-child{
	background: #DF4778;
	color: #fdf0f0;
	border-radius: 3px;
	margin-right: 14px;
	width: 31px;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

.head4-2:not(:root){
	background: #fdf0f0;
	padding: 10px 10px 7px;
	font-size: max(20px, min(5vw,24px));
	font-weight: 700;
	margin: 0 0 1em;
	line-height: 1.4;
	border-left: 12px solid #DF4778;
	border-bottom: 2px solid #DF4778;
	margin-top: max(3em, min(10vw,4em));
}

.contents-wrap .panel.panel-danger img{
	border: 1px solid #333;
}

@media (max-width: 1100px){
	.special .series-box-inner{
		display: block;
	}
	.book-info-tab-wrap{
		grid-auto-flow: dense;
		gap: 5px;
	}
	.book-info-tab-plus{
		justify-content: center;
	}
}
@media (max-width: 767px){
	.nav-tabs>li>a{
		padding: 10px;
		font-size: 12px;
	}
	.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
    padding: 10px 6px 25px;
	}

	.tab-content .index-section{
		margin: 40px auto 40px;
}

	.book-info-tab-img{
    max-height: none;
		padding: 10px 25px;
	}

	.head4:not(:root) {
		font-size: 20px;
		padding: 7px 10px;
		margin: 3em 0 1.2em;
	}
	.head4 span:first-child{
		width: 25px;
		height: 24px;
		line-height: 24px;
		min-width: 24px;
		margin-top: 2px;
	}
}

.tbc-arrow{
	margin-top: 2em;
	display: flex;
	justify-content: flex-end;
}
.tbc-arrow img{
	max-width: 210px;
}


/* 最終回 */
.contents-wrap h1{
	position: relative;
}
.final-icon{
	content: "";
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 1;
	border-bottom: 3.4em solid transparent;
	border-right: solid 3.4em #006FB8;
}
.final-icon span{
	z-index: 2;
	color: #fff;
	right: -118px;
	top: 29px;
	font-size: 75%;
	transform: rotate(45deg);
	font-weight: 700;
	position: absolute;
	white-space: nowrap;
}

.index-book-list{
	list-style: none;
	counter-reset: reference;
	padding-left: 0;
}
.index-book-list li{
	text-indent: -5em;
	margin-left: 5em;
	position: relative;
}
.contents-wrap .index-book-list li:not(:last-child) {
	margin-bottom: 1.2em;
}
.index-book-list li::before{
	counter-increment: reference;
	content: 'お題本'counter(reference);
	font-weight: 700;
	font-size: 12px;
	margin-right: 4px;
	color: #fff;
	position: absolute;
	background: #DF4778;
	top: -21px;
	padding: 0 8px;
	left: 0;
	border-radius: 4px 4px 0 0;
	z-index: 2;
}
.index-book-list.season2{
	counter-reset: reference 23;
}
.index-book-list.season2 li{
	/* height: 100%; */
}

.index-book-list a{
	font-weight: 700;
}
td[data-label="お題本"] a{
	white-space: nowrap;
}

/*test*/
#tab2 .index-section.test{
	display: grid;
	justify-content: center;
}
.test .index-book-list{
	display: grid;
	gap: 20px 40px;
	grid-template-columns: 1fr 1fr 1fr;
}
.test .index-book-list li{
	max-width: 330px;
	text-indent: 0;
	margin-left: 0;
	border-bottom: 1px dotted #ccc;
	padding-bottom: 20px;
}
.test .index-book-list .list-img{
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 15px;
	line-height: 1.4;
}
.test .index-book-list .list-img img {
	border: 1px solid #999;
	transition: ease-in-out .2s;
}
.test .index-book-list .list-img img:hover {
	opacity: 0.75;
}


@media (min-width: 501px){
	.final-index tr:nth-child(odd),
	.final-index tr:nth-of-type(odd) td[data-label="読み"] {
		/* background: #fcf2f2; */
		background: #fff;
	}

	.final-index tr:nth-child(even),
	.final-index tr:nth-of-type(even) td[data-label="読み"] {
		/* background: #fcdede; */
		background: #f7f7f7;
	}
}

@media (max-width: 1250px) {
.test .index-book-list {
	grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px){
	.final-icon{
		border-bottom: 2em solid transparent;
		border-right: solid 2em #006FB8;
	}
	.final-icon span{
		right: -69px;
		top: 18px;
		font-size: 40%;
	}
}
@media (max-width: 640px) {
	.test .index-book-list {
		grid-template-columns: auto;
		gap: 20px;
	}
	.test .index-book-list li{
		max-width: none;
	}
}


/* 簡易検索フォーム
---------------------------*/
.search-box{
	margin-bottom: 1.5em;
	text-align: center;
}

.search-input{
	border: 2px solid #dde8f6;
	border-radius: 0 0 0 0;
	padding: 5px 10px;
	width: 20em;
	background: #dde8f6;
}
.search-input:focus {
	border-color: #428bca;
	outline: 0;
	box-shadow: 0 0 1px #428bca;
}
.search-input:focus::placeholder {
	color: #cacaca;
}
.search-button{
	padding: 5px 10px;
	border: 2px solid #333;
	border-radius: 6px 0 0 6px;
	border-left: 0;
	background: #333;
	color: #fff;
	letter-spacing: .4px;
}
.reset-button{
	padding: 5px 10px;
	border: 2px solid #ccc;
	border-radius: 0 6px 6px 0;
	border-left: 0;
	background: #ccc;
	color: black;
	letter-spacing: .4px;
}

@media (max-width: 500px){
	.search-box {
		display: grid;
		grid-template-columns: auto 1fr auto;
	}
	.search-input{
		width: auto;
		font-size: 12px;
	}
}