/* =================================================================== 
 *
 *  大日本図書 web連携コンテンツページ
 *  
 *  2019-06-08
 *  ------------------------------------------------------------------
 *  TOC:
 *	00. reset
 *  01. webfonts and iconfonts
 *  02. base style overrides & grid
 *  03. typography & general theme styles
 *  04. preloader
 *  05. forms
 *  06. buttons
 *  07. other components 
 *  08. common and reusable styles
 *  09. header styles
 *  10. page hero
 *  11. content wrap
 *  12. footer
 *  13. movie
 *  14. state
 *
 * =================================================================== */

/* ===================================================================
 *  00. reset - normalize.css v3.0.2 | MIT License | git.io/normalize
 *
 * ------------------------------------------------------------------- */

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-size: 16px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	display: inline-block;/*追加*/
	background: transparent;
	text-decoration: none;
}
a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	/*font-size: 2em;*/
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}
/* 要素内での改ページを避ける */
img {
	page-break-inside: avoid;
}
svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}


 /* ===================================================================
 *  01. webfonts and iconfonts
 *
 * ------------------------------------------------------------------- */
/*
@import url("font-awesome/css/font-awesome.min.css");
@import url("micons/micons.css");
@import url("fonts.css");
*/

/* ===================================================================
 *  02. base style overrides & grid
 *
 * ------------------------------------------------------------------- */
html {
}
html,
body {
	width: 100%;
	height: 100%;

}

body {
	font-family: 'Noto Sans', "Helvetica Neue", Helvetica, "Avenir Next", "Mplus 1p", "游ゴシック体", '游ゴシック', YuGothic, 'Yu Gothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, sans-serif;
	font-size: 1.7rem;
	line-height: 2rem;
	color: #111111;
	margin: 0 auto;
  	max-width: 1440px;
  	min-width: 320px;
}
body.video {
	min-width: 300px;
}
main {
	position: relative;
	width: 100%;
	height: auto;
	min-height: 100%;
}
li {
	list-style: none;
}
.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.style-lists {
  margin: 0;
  padding: 0;
}
.style-lists li {
  list-style: none;
  position: relative;
}
.style-lists li > a {
  display: inline-block;
  width: 100%;
  height: 100%;
  border-bottom: none;
  text-decoration: none; 
  color: rgba(48, 48, 48, 1);
}
rt {
	line-height: 1;	
}

/* ------------------------------------------------------------------- 
 * color pallete 
 * ------------------------------------------------------------------- */
/*-- 理科 
ベースカラー ： #69bc82;
			 rgba(105, 188, 130, 1);
ベースカラー2： #bedfc2;
			 rgba(190, 223, 194, 1);
--*/
/*-- 算数 
ベースカラー ： #4ab3d3;
			 rgba(74, 179, 211, 1);
ベースカラー2： #9ed8f5;
			 rgba(158, 216, 245, 1);
--*/
/*-- 保健体育 
ベースカラー ： #805b85;
			 rgba(128, 91, 133, 1);
ベースカラー2： #daaae2;
			 rgba(218, 170, 226, 1);
--*/
/*-- せいかつ 
ベースカラー ： #d68147;
			 rgba(214, 129, 71, 1);
ベースカラー2： #ddbba4;
			 rgba(221, 187, 164, 1);
--*/
/*-- 共通
アクセントカラー ： #da4713;
				 rgba(218, 71, 19, 1);
アクセントカラー2： #f0f26e;
				 rgba(240, 242, 110, 1);
共通bgカラー1： #f2f0b6;
			  rgba(240, 242, 182, 1);
共通bgカラー2： #b7a997;
			  rgba(183, 169, 151, 1);
共通bgカラー3： #e8e0d4;
			  rgba(232, 224, 212, 1);
--*/

/*--basic gray shade
headline,body,subhead : #000000;
						rgba(0, 0, 0, 1); 
Secondary text, links : #666666;
						rgba(102, 102, 102, 1);
Footnote and captions : #8A8A8F;
						rgba(138, 138, 143, 1);
Content and sections dividers, lines : #C8C7CC;
									   rgba(200, 199, 204, 1);
Screens background : #EFEFF4;
					 rgba(239, 239, 244, 1);
Top bar, tool bars backgrounds : #F9F9F9;
								 rgba(249, 249, 249, 1);
Navy tone : #2b303e;
			rgba(43, 48, 62, 1);
--*/


/* ------------------------------------------------------------------- 
 * links 
 * ------------------------------------------------------------------- */
a,
a:visited {
	color: rgba(48, 48, 48, 1);
	border-bottom: 1px solid transparent;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	cursor: pointer;
	text-decoration: none;
}
html:not(.touch) a:hover {
	text-decoration: none;
}
/*
a:hover,
a:focus {
	color: #000000;
	border-color: rgba(21, 21, 21, 0.2);
	text-decoration: none;
}
*/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* ===================================================================
 *  03. typography & general theme styles
 *
 * ------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, .h01, .h02, .h03, .h04, .h05, .h06 {
	color: #151515;
	font-style: normal;
	text-rendering: optimizeLegibility;
}
h1, .h01 {
	font-size: 3.6rem;
	line-height: 1.35;
	letter-spacing: .1rem;
	color: rgba(34, 34, 34, 1);
}
h2, .h02 {
	font-size: 2.4rem;
	line-height: 1.25;
	color: rgba(48, 48, 48, 1);
}
h3, .h03 {
	font-size: 2rem;
	line-height: 1.5;
}
h4, .h04 {
	font-size: 1.8rem;
	line-height: 1.5;
}
h5, .h05 {
	font-size: 1.4rem;
	line-height: 1.7;
	text-transform: uppercase;
	letter-spacing: .2rem;
}
h6, .h06 {
	font-size: 1.3rem;
	line-height: 1.85;
	text-transform: uppercase;
	letter-spacing: .2rem;
}
h1, h2, h3 {
	margin-top: 20px;
	margin-bottom: 10px;
}
p {
	color: rgba(76, 76, 76, 1);
	font-weight: 600;
}
ol {
	list-style: decimal;
}

ul {
	list-style: disc;
}

li {
	display: list-item;
}

/* ------------------------------------------------------------------- 
 * shadow styles 
 * ------------------------------------------------------------------- */
.shadow-depth-1,
.shadow-depth-2,
.shadow-depth-3,
.shadow-depth-4,
.shadow-depth-5  {
	transition-property: box-shadow;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}
.shadow-depth-1 {
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
html:not(.touch) .shadow-depth-1:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
html:not(.touch) .shadow-depth-2 {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
html:not(.touch) .shadow-depth-2:hover {
	box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.shadow-depth-3 {
	box-shadow: 0 30px 48px 22px rgba(0, 0, 0, 0.07);
}
.shadow-depth-4 {
	box-shadow: 5px 31px 85px 23px rgba(0, 0, 0, 0.07)
}
.shadow-depth-5 {
	box-shadow: 0px 0px 0px 7px rgba(255, 241, 0, 0);
}
html:not(.touch) .shadow-depth-5:hover {
	box-shadow: 0px 0px 0px 7px rgba(255, 241, 0, 0.2);
}

/* ------------------------------------------------------------------- 
 * selected text highlight color
 * ------------------------------------------------------------------- */
*::selection {
background: rgba(118, 203, 226, 1);
}
*::-moz-selection {
background: rgba(118, 203, 226, 1);
}

/* ------------------------------------------------------------------- 
 * animation easing styles 
 * ------------------------------------------------------------------- */
.ease-in-sine, .ease-in-sine:after, .ease-in-sine:before, .ease-in-sine *, .ease-in-sine *:after, .ease-in-sine *:before {
	-webkit-transition-duration: cubic-bezier(0.47, 0, 0.745, 0.715);
	   -moz-transition-duration: cubic-bezier(0.47, 0, 0.745, 0.715);
	    -ms-transition-duration: cubic-bezier(0.47, 0, 0.745, 0.715);
	     -o-transition-duration: cubic-bezier(0.47, 0, 0.745, 0.715);
	        transition-duration: cubic-bezier(0.47, 0, 0.745, 0.715);
}
.ease-out-sine, .ease-out-sine:after, .ease-out-sine:before, .ease-out-sine *, .ease-out-sine *:after, .ease-out-sine *:before {
	-webkit-transition-duration: cubic-bezier(0.39, 0.575, 0.565, 1);
	   -moz-transition-duration: cubic-bezier(0.39, 0.575, 0.565, 1);
	    -ms-transition-duration: cubic-bezier(0.39, 0.575, 0.565, 1);
	     -o-transition-duration: cubic-bezier(0.39, 0.575, 0.565, 1);
	        transition-duration: cubic-bezier(0.39, 0.575, 0.565, 1);
}
.ease-in-out-sine, .ease-in-out-sine:after, .ease-in-out-sine:before, .ease-in-out-sine *, .ease-in-out-sine *:after, .ease-in-out-sine *:before {
	-webkit-transition-duration: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	   -moz-transition-duration: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	    -ms-transition-duration: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	     -o-transition-duration: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	        transition-duration: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.ease-in-quad, .ease-in-quad:after, .ease-in-quad:before, .ease-in-quad *, .ease-in-quad *:after, .ease-in-quad *:before {
	-webkit-transition-duration: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	   -moz-transition-duration: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	    -ms-transition-duration: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	     -o-transition-duration: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	        transition-duration: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.ease-out-quad, .ease-out-quad:after, .ease-out-quad:before, .ease-out-quad *, .ease-out-quad *:after, .ease-out-quad *:before {
	-webkit-transition-duration: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	   -moz-transition-duration: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	    -ms-transition-duration: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	     -o-transition-duration: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	        transition-duration: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ease-in-out-quad, .ease-in-out-quad:after, .ease-in-out-quad:before, .ease-in-out-quad *, .ease-in-out-quad *:after, .ease-in-out-quad *:before {
	-webkit-transition-duration: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	   -moz-transition-duration: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	    -ms-transition-duration: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	     -o-transition-duration: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	        transition-duration: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.ease-in-cubic, .ease-in-cubic:after, .ease-in-cubic:before, .ease-in-cubic *, .ease-in-cubic *:after, .ease-in-cubic *:before {
	-webkit-transition-duration: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	   -moz-transition-duration: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	    -ms-transition-duration: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	     -o-transition-duration: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	        transition-duration: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.ease-out-cubic, .ease-out-cubic:after, .ease-out-cubic:before, .ease-out-cubic *, .ease-out-cubic *:after, .ease-out-cubic *:before {
	-webkit-transition-duration: cubic-bezier(0.215, 0.61, 0.355, 1);
	   -moz-transition-duration: cubic-bezier(0.215, 0.61, 0.355, 1);
	    -ms-transition-duration: cubic-bezier(0.215, 0.61, 0.355, 1);
	     -o-transition-duration: cubic-bezier(0.215, 0.61, 0.355, 1);
	        transition-duration: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.ease-in-out-cubic, .ease-in-out-cubic:after, .ease-in-out-cubic:before, .ease-in-out-cubic *, .ease-in-out-cubic *:after, .ease-in-out-cubic *:before {
	-webkit-transition-duration: cubic-bezier(0.645, 0.045, 0.355, 1);
	   -moz-transition-duration: cubic-bezier(0.645, 0.045, 0.355, 1);
	    -ms-transition-duration: cubic-bezier(0.645, 0.045, 0.355, 1);
	     -o-transition-duration: cubic-bezier(0.645, 0.045, 0.355, 1);
	        transition-duration: cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ease-in-quart, .ease-in-quart:after, .ease-in-quart:before, .ease-in-quart *, .ease-in-quart *:after, .ease-in-quart *:before {
	-webkit-transition-duration: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	   -moz-transition-duration: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	    -ms-transition-duration: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	     -o-transition-duration: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	        transition-duration: cubic-bezier(0.895, 0.03, 0.685, 0.22);
}
.ease-out-quart, .ease-out-quart:after, .ease-out-quart:before, .ease-out-quart *, .ease-out-quart *:after, .ease-out-quart *:before {
	-webkit-transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
	   -moz-transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
	    -ms-transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
	     -o-transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
	        transition-duration: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.ease-in-out-quart, .ease-in-out-quart:after, .ease-in-out-quart:before, .ease-in-out-quart *, .ease-in-out-quart *:after, .ease-in-out-quart *:before {
	-webkit-transition-duration: cubic-bezier(0.77, 0, 0.175, 1);
	   -moz-transition-duration: cubic-bezier(0.77, 0, 0.175, 1);
	    -ms-transition-duration: cubic-bezier(0.77, 0, 0.175, 1);
	     -o-transition-duration: cubic-bezier(0.77, 0, 0.175, 1);
	        transition-duration: cubic-bezier(0.77, 0, 0.175, 1);
}
.ease-in-quint, .ease-in-quint:after, .ease-in-quint:before, .ease-in-quint *, .ease-in-quint *:after, .ease-in-quint *:before {
	-webkit-transition-duration: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	   -moz-transition-duration: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	    -ms-transition-duration: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	     -o-transition-duration: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	        transition-duration: cubic-bezier(0.755, 0.05, 0.855, 0.06);	
}
.ease-out-quint, .ease-out-quint:after, .ease-out-quint:before, .ease-out-quint *, .ease-out-quint *:after, .ease-out-quint *:before {
	-webkit-transition-duration: cubic-bezier(0.23, 1, 0.32, 1);
	   -moz-transition-duration: cubic-bezier(0.23, 1, 0.32, 1);
	    -ms-transition-duration: cubic-bezier(0.23, 1, 0.32, 1);
	     -o-transition-duration: cubic-bezier(0.23, 1, 0.32, 1);
	        transition-duration: cubic-bezier(0.23, 1, 0.32, 1);	
}
.ease-in-out-quint, .ease-in-out-quint:after, .ease-in-out-quint:before, .ease-in-out-quint *, .ease-in-out-quint *:after, .ease-in-out-quint *:before {
	-webkit-transition-duration: cubic-bezier(0.86, 0, 0.07, 1);
	   -moz-transition-duration: cubic-bezier(0.86, 0, 0.07, 1);
	    -ms-transition-duration: cubic-bezier(0.86, 0, 0.07, 1);
	     -o-transition-duration: cubic-bezier(0.86, 0, 0.07, 1);
	        transition-duration: cubic-bezier(0.86, 0, 0.07, 1);	
}
.ease-in-expo, .ease-in-expo:after, .ease-in-expo:before, .ease-in-expo *, .ease-in-expo *:after, .ease-in-expo *:before {
	-webkit-transition-duration: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	   -moz-transition-duration: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	    -ms-transition-duration: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	     -o-transition-duration: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	        transition-duration: cubic-bezier(0.95, 0.05, 0.795, 0.035);	
}
.ease-in-out-expo, .ease-in-out-expo:after, .ease-in-out-expo:before, .ease-in-out-expo *, .ease-in-out-expo *:after, .ease-in-out-expo *:before {
	-webkit-transition-duration: cubic-bezier(1, 0, 0, 1);
	   -moz-transition-duration: cubic-bezier(1, 0, 0, 1);
	    -ms-transition-duration: cubic-bezier(1, 0, 0, 1);
	     -o-transition-duration: cubic-bezier(1, 0, 0, 1);
	        transition-duration: cubic-bezier(1, 0, 0, 1);	
}
.ease-in-circ, .ease-in-circ:after, .ease-in-circ:before, .ease-in-circ *, .ease-in-circ *:after, .ease-in-circ *:before {
	-webkit-transition-duration: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	   -moz-transition-duration: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	    -ms-transition-duration: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	     -o-transition-duration: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	        transition-duration: cubic-bezier(0.6, 0.04, 0.98, 0.335);	
}
.ease-out-circ, .ease-out-circ:after, .ease-out-circ:before, .ease-out-circ *, .ease-out-circ *:after, .ease-out-circ *:before {
	-webkit-transition-duration: cubic-bezier(0.075, 0.82, 0.165, 1);
	   -moz-transition-duration: cubic-bezier(0.075, 0.82, 0.165, 1);
	    -ms-transition-duration: cubic-bezier(0.075, 0.82, 0.165, 1);
	     -o-transition-duration: cubic-bezier(0.075, 0.82, 0.165, 1);
	        transition-duration: cubic-bezier(0.075, 0.82, 0.165, 1);	
}
.ease-in-out-circ, .ease-in-out-circ:after, .ease-in-out-circ:before, .ease-in-out-circ *, .ease-in-out-circ *:after, .ease-in-out-circ *:before {
	-webkit-transition-duration: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	   -moz-transition-duration: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	    -ms-transition-duration: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	     -o-transition-duration: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	        transition-duration: cubic-bezier(0.785, 0.135, 0.15, 0.86);	
}
.ease-in-back, .ease-in-back:after, .ease-in-back:before, .ease-in-back *, .ease-in-back *:after, .ease-in-back *:before {
	-webkit-transition-duration: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	   -moz-transition-duration: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	    -ms-transition-duration: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	     -o-transition-duration: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	        transition-duration: cubic-bezier(0.6, -0.28, 0.735, 0.045);	
}
.ease-out-back, .ease-out-back:after, .ease-out-back:before, .ease-out-back *, .ease-out-back *:after, .ease-out-back *:before {
	-webkit-transition-duration: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	   -moz-transition-duration: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	    -ms-transition-duration: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	     -o-transition-duration: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	        transition-duration: cubic-bezier(0.175, 0.885, 0.32, 1.275);	
}
.ease-in-out-back, .ease-in-out-back:after, .ease-in-out-back:before, .ease-in-out-back *, .ease-in-out-back *:after, .ease-in-out-back *:before {
	-webkit-transition-duration: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	   -moz-transition-duration: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	    -ms-transition-duration: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	     -o-transition-duration: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	        transition-duration: cubic-bezier(0.68, -0.55, 0.265, 1.55);	
}
@keyframes bounce {
    0%   { top:000px; animation-timing-function:ease-in;  }
    37%  { top:500px; animation-timing-function:ease-out; }
    55%  { top:375px; animation-timing-function:ease-in;  }
    73%  { top:500px; animation-timing-function:ease-out; }
    82%  { top:465px; animation-timing-function:ease-in;  }
    91%  { top:500px; animation-timing-function:ease-out; }
    96%  { top:490px; animation-timing-function:ease-in;  }
    100% { top:500px; }
}

/* ------------------------------------------------------------------- 
 * pace.js styles - minimal  - 
 * ------------------------------------------------------------------- */
.pace {
	-webkit-pointer-events: none;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.pace-inactive {
	display: none;
}

.pace .pace-progress {
	background: rgba(0, 111, 187, 1);
	position: fixed;
	z-index: 1001;
	top: 0;
	right: 100%;
	width: 100%;
	height: 10px;
}

/* ===================================================================
 *  04. preloader
 *
 * ------------------------------------------------------------------- */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(250, 250, 250, 1);
	z-index: 80000;
	height: 100%;
	width: 100%;
}

.no-js #preloader,
.oldie #preloader {
	display: none;
}

#loader {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	padding: 0;
}

#loader:before {
	content: "";
	border-top: 8px solid rgba(0, 0, 0, 0.2);
	border-right: 8px solid rgba(0, 0, 0, 0.2);
	border-bottom: 8px solid rgba(0, 0, 0, 0.2);
	border-left: 8px solid rgba(0, 111, 187, 1);
	-webkit-animation: load 1.1s infinite linear;
	animation: load 1.1s infinite linear;
	display: block;
	border-radius: 50%;
	width: 30px;
	height: 30px;
}

@-webkit-keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}

}

@keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}

}

body:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
}
body.fadeout::after {
  opacity: 1;
}
body.fadeout main, body.fadeout .lp-main-hero {
	-webkit-transform: scale(1.02) translateY(20vh);
	transform: scale(1.02) translateY(20vh);
	-webkit-transition: transform 2s 0.1s;
	transition: transform 2s 0.1s;
}

/* ===================================================================
 *  06. buttons
 *
 * ------------------------------------------------------------------- */
.button, .buttons li {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	cursor: pointer;
}

.btn-text {
    padding: 12px 100px;
    border-radius: 25px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(102, 102, 102, 1);
    color: rgba(102, 102, 102, 1);
    background-color: rgba(241,241,241, 1);
	font-size: 1rem;
	font-weight: 600;
    /* transition-set */
    transition-property: background-color, color, border;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
html:not(.touch) .btn-text:hover {
    border-color: rgba(102, 102, 102, 1);
    color: rgba(255, 255, 255, 1);
    background-color: rgba(102, 102, 102, 1); 
}
.btn-lg {
	margin-bottom: 20px;
}
.btn-lg:after {
	content: "";
	position: absolute;
	top: -40px;
	left: calc(50% - 1px);
	width: 2px;
	height: 40px;
	background-color: rgba(122, 122, 122, 1);
}
.btn-lg:before {
	content: "";
	position: absolute;
	top: -23px;
	left: calc(50% - 7.5px);
	width: 15px;
    height: 15px;
    border-top-style: solid;
    border-top-width: 2px;
    border-right-style: solid;
    border-right-width: 2px;
    border-color: rgba(122, 122, 122, 1);
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    transition-duration: 0.4s;
    transition-property: top, opacity;
    transition-timing-function: ease-in-out; 
    opacity: 0;
} 
html:not(.touch) .btn-text.btn-lg:hover:before {
	top: -17px;
	opacity: 1;
}


/* responsive:
 * buttons
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 764px) {
	.btn-text {
    	padding: 12px 60px;
	}
}


/* ===================================================================
 *  07. other components
 *
 * ------------------------------------------------------------------- */
.button {
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: 	 none;
	-ms-user-select: 	 none;
	-o-user-select: 	 none;
	user-select: 		 none;
}
/* アイコン共通 */
.icon {
	position: relative;
	width: 48px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	outline: 0;
	/*margin-right: 10px;*/
	border-radius: 50%;
	background-color: rgba(126, 126, 126, 0.6);
	transition-duration: 0.4s;
	transition-property: background-color, color, border;
	transition-timing-function: ease-in-out;
	margin: 5px 5px;
	cursor: pointer;
}
.icon:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	border-radius: 50%;
}
.icon {
	text-decoration: none;
	border-bottom: none;
	position: relative;
}
.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	font-size: 1.8rem;
	text-transform: none !important;
}

.icon > .label {
	display: none;
}
.icon.alt {
	text-align: center;
}
.icon.alt:before {
	background-color: rgba(250, 250, 250, 1);
	border-radius: 100%;
	border: 1px rgba(0, 111, 187, 1) solid;
	color: rgba(0, 111, 187, 1);
	display: inline-block;
	width: 2.4rem;
	height: 2.4rem;
	line-height: 2.4rem;
	text-align: center;
}

a.icon.alt:before {
	-moz-transition: background-color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
}

html:not(.touch) a.icon.alt:hover:before {
	background-color: rgba(0, 111, 187, 1);
	color: #fcfcfc;
	border: 1px #fcfcfc solid;
}

a.icon.alt:active:before {
	background-color: #37a6cb;
}

.class-icon {
	width: 60px;
	height: 60px;
	line-height: 60px;
	background-color: transparent;
	margin: 0 auto 0;
}

.icon-wrap {
	position: relative;
	margin: 0 5px;
	cursor: pointer;
}
/* せいかつ以外の準備アイコンを非表示に */
body:not(.seikatsu) .icon-wrap[href="#precudure"] ~ .icon-wrap {
	display: none;
}
.sub-pl-icon {
	background-color: transparent;
	border-width: 1px;
	border-color: rgba(0, 0, 0, 1);
	border-style: solid;
}
html:not(.touch) .sub-pl-icon:hover {
	background-color: rgba(122, 122, 122, 0.4);
}
/*-- 動画関連アイコン --*/
.sub-pl-icon ~ p {
	font-size: 10px;
	line-height: 1;
	height: 10px;
	margin: 0 0 10px 0;
	border-bottom: none;
}
.button_double {
	position: relative;
	width: 130px;
	height: 45px;
	line-height: 45px;
	font-size: 1rem;
	line-height: 45px;
	border-width: 1px;
	border-color: rgba(0, 0, 0, 1);
	border-style: solid;
	border-radius: 30px;
	margin-top: -20px;
	margin-right: 10px;
	display: flex;
}
.button_double > span {
	display: block;
	width: 65px;
	height: 44px;
	line-height: 44px;
	transition-duration: 0.4s;
	transition-property: background-color;
	transition-timing-function: ease-in-out;
	cursor: pointer;
}
.button_double > span:nth-child(1) {
	border-right-width: 1px;
	border-color: rgba(0, 0, 0, 1);
	border-right-style: solid;
	border-radius: 22px 0 0 22px;
}
.button_double > span:nth-child(2) {
	border-radius: 0 22px 22px 0;
}
html:not(.touch) .button_double > span:hover {
	background-color: rgba(122, 122, 122, 0.4);
}
.zoom-content-wrapper ~ .movie-title-wrapper .icon-wrap:nth-child(1) {
	cursor: default;

}
.zoom-content-wrapper.is-visible-text ~ .movie-title-wrapper .button_double > span:nth-child(1) {
	background-color: rgba(105, 188, 130, 0.6);
	pointer-events: none;
	cursor: default !important;
}
.zoom-content-wrapper:not(.is-visible-text) ~ .movie-title-wrapper .button_double > span:nth-child(2) {
	background-color: rgba(105, 188, 130, 0.6);
	pointer-events: none;
	cursor: default;
}
.is-inactive {
	opacity: 0.3;
	-webkit-pointer-events: none;
	-moz-pointer-events: 	none;
	-ms-pointer-events: 	none;
	-o-pointer-events: 		none;
	pointer-events: 		none;
	cursor: default;
}
/* メニューアイコン webサイト */
.icon._web:after {
	background-image: url("../images/icon/icon_content_web.svg");
}
/* メニューアイコン データ */
.icon._data:after {
	background-image: url("../images/icon/icon_content_data.svg");
}
/* メニューアイコン 練習問題 */
.icon._exercise:after {
	background-image: url("../images/icon/icon_content_exercise.svg");
}
/* メニューアイコン 計算練習 */
.icon._culculation:after {
	background-image: url("../images/icon/icon_content_culculation.svg");
}
/* メニューアイコン グラフ */
.icon._graph:after {
	background-image: url("../images/icon/icon_content_graph.svg");
}
/* メニューアイコン 動画 */
.icon._movie:after {
	background-image: url("../images/icon/icon_content_movie.svg");
}
/* メニューアイコン PDF */
.icon._pdf:after {
	background-image: url("../images/icon/icon_content_pdf.svg");
}
/* メニューアイコン プログラミング */
.icon._programing:after {
	background-image: url("../images/icon/icon_content_programing.svg");
}
/* メニューアイコン シミュレーション */
.icon._simulation:after {
	background-image: url("../images/icon/icon_content_simulation.svg");
}
/* メニューアイコン 音声 */
.icon._voice:after {
	background-image: url("../images/icon/icon_content_speaker.svg");
}
/* ページアイコン たのしい理科 */
.icon._science:after {
	background-image: url("../images/icon/icon_class_science.svg");
}
/* ページアイコン たのしいせいかつ */
.icon._active:after {
	background-image: url("../images/icon/icon_class_active.svg");
}
/* ページアイコン たのしい算数 */
.icon._mathematic:after {
	background-image: url("../images/icon/icon_class_mathematic.svg");
}
/* ページアイコン たのしい保健／体育 */
.icon._sports:after {
	background-image: url("../images/icon/icon_class_sports.svg");
}
/* 動画サブレイヤーアイコン てじゅん */
.icon._precudure:after {
	background-image: url("../images/icon/icon_precudure.svg");
}
/* 動画サブレイヤーアイコン かくにん */
.icon._confirmation:after {
	background-image: url("../images/icon/icon_confirmation.svg");
}
/* 単体コンテンツサブレイヤーアイコン 大きく */
.icon._zoom-plus:after {
	background-image: url("../images/icon/icon_zoom_plus.svg");
}
/* 単体コンテンツサブレイヤーアイコン 小さく */
.icon._zoom-minus:after {
	background-image: url("../images/icon/icon_zoom_minus.svg");
}
/* 単体コンテンツサブレイヤーアイコン もどす */
.icon._zoom-equal:after {
	background-image: url("../images/icon/icon_zoom_equal.svg");
}
.check-item {
	margin: 20px 40px;
}
/*-- じゅんびするもの クリックイベント用input デフォルトスタイルのリセット --*/
.prepared-stuff {
	display: none;
}
.prepared-stuff::-moz-selection, .prepared-stuff:before::-moz-selection, .prepared-stuff:after::-moz-selection {
	background: none; 
}
.prepared-stuff::selection, .prepared-stuff:before::selection, .prepared-stuff:after::selection {
	background: none; 
}
/*-- じゅんびするもの 表示領域 --*/
.prepared-stuff + .prepared-stuff-button {
	position: relative;
	display: inline-block;
	/*
	width: calc(100vw / 4);
	height: calc(100vw / 4);
	*/
}
/*-- じゅんびするもの 画像表示領域 --*/
.prepared-stuff__image {
	position: relative;
	width: 250px;
	height: 250px;
	line-height: 250px;
	background-color: rgba(232, 224, 212, 1);
	border-radius: 50%;
	outline: 0;
	border-width: 2px;
	border-style: solid;
	border-color: transparent;
	transition-property: border;
	transition-duration: 0.4s;
}
.prepared-stuff:not(:checked) + .prepared-stuff-button .prepared-stuff__image {
	border-color: transparent;
}
html:not(.touch) .prepared-stuff + .prepared-stuff-button:hover .prepared-stuff__image, .prepared-stuff:checked + .prepared-stuff-button .prepared-stuff__image {
	border-color: rgba(122,122, 122, 1);
}


.prepared-stuff__image img {
	position: relative;
	margin: 25%;
	width: 50%;
	height: 50%;
	opacity: 1;
	transition-duration: 0.4s;
	transition-property: opacity;
}
.prepared-stuff:checked + .prepared-stuff-button .prepared-stuff__image img {
	opacity: 1;
	animation-name: _bounce;
	animation-duration: 0.7s;
	animation-timing-function: ease-in-out;
}
.prepared-stuff:active + .prepared-stuff-button .prepared-stuff__image img {
	opacity: 1;
}
.great-text {
	position: absolute;
	top: 20%;
	left: calc(50% - 45px);
	width: 90px;
	height: 40px;
	padding: 12px 10px;
	line-height: 16px;
	font-size: 16px;
	font-weight: 900;
	opacity: 0;
	text-align: center;
	background-color: rgba(248, 184, 10, 1);
	color: rgba(249, 249, 249, 1);
	white-space: nowrap;
	z-index: 11;
	border-radius: 5px;
}
.prepared-stuff:checked + .prepared-stuff-button .great-text {
	-webkit-animation: okeffect 1.6s;
	-moz-animation: okeffect 1.6s;
	-o-animation: okeffect 1.6s;
	animation: okeffect 1.6s;
}
/*
.prepared-stuff__image:before {
	content: "ばっちり!";
	position: absolute;
	top: 20%;
	left: calc(50% - 45px);
	width: 90px;
	height: 40px;
	padding: 12px 10px;
	line-height: 16px;
	font-size: 16px;
	font-weight: 900;
	opacity: 0;
	text-align: center;
	background-color: rgba(248, 184, 10, 1);
	color: rgba(249, 249, 249, 1);
	white-space: nowrap;
	z-index: 11;
	border-radius: 5px;
}
.prepared-stuff:checked + .prepared-stuff-button .prepared-stuff__image:before {
	-webkit-animation: okeffect 1.6s;
	-moz-animation: okeffect 1.6s;
	-o-animation: okeffect 1.6s;
	animation: okeffect 1.6s;
}
*/
/*-- じゅんびするもの　名称 --*/
.prepared-stuff__name {
	padding: 5px 10px;
	margin: 20px 0;
	font-size: 22px;
	background-color: rgba(122, 122, 122, 0.4);
	border-left-width: 8px;
	border-left-style: solid;
	border-color: rgba(122, 122, 122, 1);
}

/*-- チェックボックスアイコン --*/
.check__icon {
	position: absolute;
	top: 10px;
	right: 2px;
	width: 60px;
	height: 60px;
	background-color: rgba(241, 241, 241, 1);
	border-radius: 50%;
	border-style: dotted;
	border-width: 2px;
	border-color: transparent;
	z-index: 10;
	transition-property: border, background-color;
	transition-duration: 0.4s;
}
html:not(.touch) .prepared-stuff-button:hover .check__icon {
	border-color: rgba(122, 122, 122, 1);
}

.prepared-stuff:checked + .prepared-stuff-button > .check__icon {
	border-color: rgba(122, 122, 122, 1);
	border-style: solid;
	background-color: rgba(122, 122, 122, 1);
}

/*-- チェックボックスアイコン チェック描画 --*/
.check__icon:after {
	content: "";
	display: block;
	position: absolute;
	top: 30px;
	left: 12px;
	width: 15px;
	height: 30px;
	-moz-transform: scaleX(-1) rotate(135deg);
	-ms-transform: scaleX(-1) rotate(135deg);
	-webkit-transform: scaleX(-1) rotate(135deg);
	transform: scaleX(-1) rotate(135deg);
	-moz-transform-origin: left top;
	-ms-transform-origin: left top;
	-webkit-transform-origin: left top;
	transform-origin: left top;
	border-right-width: 6px;
	border-right-style: solid;
	border-top-width: 6px;
	border-top-style: solid;
	border-color: rgba(122, 122, 122, 0.4);
}

html:not(.touch) .check__icon:hover:after {
	border-color: #bdd;
}
.check-item .prepared-stuff:checked + .prepared-stuff-button > .check__icon:after {
	-webkit-animation: check2 0.8s;
	-moz-animation: check2 0.8s;
	-o-animation: check2 0.8s;
	animation: check2 0.8s;
	border-color: rgba(241, 241, 241, 1);
}
/*-- 授業支援機能 --*/
.dt-assist {
	position: fixed;
	top: 100px;
	right: 0px;
	z-index: 101;
}
.dt-assist li {
	margin: 0 0 40px 0;
}
.dt-assist_announce {
	position: absolute;
	top: -35px;
	right: 110px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background-color: rgba(249, 249, 249, 1);
	padding: 35px 13px 15px 13px;
	border-width: 2px;
	border-style: dotted;
	border-color: rgba(218, 71, 19, 1);
	user-select: none;
	cursor: pointer;
	pointer-events: all;
	z-index: -1;
	opacity: 0;
}
.dt-assist_announce:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 120px;
	height: 120px;
	border-radius: 50%;

}
.dt-assist_announce:after {
	content: "";
	position: absolute;
	top: 5px;
	left: 40px;
	width: 30px;
	height: 30px;
	background-image: url("../images/icon/icon_attention.svg");
	background-position: center center;
	background-size: 100% 100%;
}
body.pace-done .dt-assist li:nth-child(1) .button-assist {
	-webkit-animation-name: attention;
  	animation-name: attention;
  	animation-duration: 1s;
  	animation-iteration-count: 3;
}
body.pace-done .dt-assist li:nth-child(1) .button-assist > span {
	-webkit-animation-name: attention;
  	animation-name: attention;
  	animation-duration: 1s;
  	animation-iteration-count: 3;
}
body.pace-done .dt-assist_announce {
	opacity: 1;
}
/*
body.pace-done .dt-assist_announce {
	-webkit-animation-name: fadeOut;
  	animation-name: fadeOut;
  	animation-delay: 3s;
  	animation-duration: 0.6s;
  	animation-fill-mode: forwards;
}
.button-assist:hover + .dt-assist_announce {
	display: none;
}
*/
.dt-assist_announce p {
	position: relative;
	font-size: 14px;
	text-align: center;
	margin: 0;
	line-height: 1.6;
}
.dt-assist_announce p span {
	white-space: pre;

}
.button-assist {
	position: relative;
	width: 100px;
	height: 50px;
	border-radius: 25px 0 0 25px;
	background-color: rgba(122, 122, 122, 1);
	color: rgba(255, 255, 255, 1);
	padding: 	5px 5px 5px 50px;
	transition-property: width, box-shadow, transform, opacity;
	transition-duration: 0.4s;
	-webkit-transform: translateX(40px); 
	transform: translateX(40px);
}
.button-assist:after {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	transition-property: transform;
	transition-duration: 0.6s;
	transition-timing-function: ease-in-out;
}
.button-assist._invert:after {
	background-image: url("../images/icon/icon_invert.svg");
}
body.invert .button-assist._invert:after {
	transform: rotate(-180deg);
}

.button-assist._information:after {
	border-color: rgba(249, 249, 249, 1);
	border-style: solid;
	border-width: 1px;
	border-radius: 50%;
	background-image: url("../images/icon/icon_information.svg");
}
html:not(.touch) .dt-assist li:hover .button-assist {
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
}
,
html:not(.touch) .dt-assist li .dt-assist_announce:hover {
	-webkit-transform: translateX(-40px);
	transform: translateX(-40px);
}
.dt-assist .button-assist > span {
	position: absolute;
	bottom: -30px;
	left: 10px;
	font-size: 10px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 1);
	background-color: rgba(122, 122, 122, 1);
	white-space: nowrap;
	text-align: center;
	margin: 0 auto;
	padding: 5px;
	border-radius: 4px;
}
.dt-assist ul li:nth-child(2) .button-assist > span {
	left: 5px;
}
.dt-assist .button-assist > span:after {
	content: "";
	position: absolute;
	top: -3px;
	left: 15px;
	width: 8px;
	height: 3px;
	background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(122, 122, 122, 1) 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgba(122, 122, 122, 1) 50.5%) no-repeat top right/50% 100%;
}
.dt-assist ul li:nth-child(2) .button-assist > span:after {
	left: 20px;
}
html:not(.touch) .dt-assist .button-assist:hover > span {
	opacity: 1;
	transition-property: opacity;
	transition-delay: 0.2s;
	transition-duration: 0.4s;
}
.dt-assist li .button-assist._information.is-selected {
	cursor: default;
	pointer-events: none;
	-webkit-transform: translateX(80px); 
	transform: translateX(80px);
	opacity: 0.6;
}

.first-announce {
	position: fixed;
	bottom: 40px;
	right: 10px;
	width: 80px;
	height: 80px;
	z-index: 100;
	text-align: center;
	background-color: rgba(255, 255, 255, 1);
	border-color: rgba(211, 60, 60, 1);
	border-style: solid;
	border-width: 2px;
	border-radius: 50%;
	padding: 25px 10px 10px 10px;
	overflow: hidden;
	transition-property: transform;
	transition-duration: 0.6s;
	transition-timing-function: ease;
}
body.pace-done .first-announce {
		-webkit-animation-name: attention;
  	animation-name: attention;
  	animation-duration: 1s;
  	animation-iteration-count: 3;
}
.first-announce.is-move {
	transform: translateY(-100px);
}
.first-announce:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 20px;
	background-color: rgba(211, 60, 60, 1);

}
.first-announce:after {
	content: "";
	position: absolute;
	top: 0;
	left: 27px;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
	background-image: url("../images/icon/icon_information.svg");
}
.first-announce span {
	display: block;
	font-size: 0.7rem;
	line-height: 1.2;
}

._flex-box-items ul {
	-webkit-box-lines: multiple;	
	-moz-box-lines: multiple;
	box-lines: multiple;
	-webkit-box-align: start;
	-moz-box-align: start;
	box-align: start;
}

._flex-box-items ul li {
	/*
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-ms-box-flex: 1;
	-o-box-flex: 1;
	box-flex: 1;
	-webkit-flex: 1 1 auto;
	-moz-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	-o-flex: 1 1 auto;
	flex: 1 1 auto;
	*/
	width: calc(100% / 3 - 2px);
	height: auto;
}
._flex-box-items ul li:last-child .check-item {

}


/* responsive:
 * other components
 * ------------------------------------------------------------------- */
@media only screen and (min-width: 1440px) {
	._flex-box-items ul li {
		width: calc(100% / 4);
	}
}
@media only screen and (max-width: 1060px) {
	/*-- じゅんびするもの 画像表示領域 --*/
	.prepared-stuff__image {
		width: 200px;
		height: 200px;
		line-height: 200px;
	}
	.prepared-stuff__image:after {
		background-size: 40% 40%;
	}
}
@media only screen and (max-width: 924px) {
	._flex-box-items ul li {
		width: calc(100% / 2);
	}

}
@media only screen and (max-width: 584px) {
	._flex-box-items ul li {
		width: 100%;
	}
	._flex-box-items ul li .check-item {
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: rgba(178, 178, 178, 1);
		margin: 0;
		padding: 10px 20px;
	}
	._flex-box-items ul li:last-child .check-item {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: rgba(178, 178, 178, 1);
	}
	.prepared-stuff-button {
		display: flex !important;
		align-items: center;
		margin-bottom: 0;/*defaultのマージン削除*/
	}	
	.prepared-stuff__image {
		display: inline-block;
		width: 45px;
		height: 45px;
		line-height: 45px;
	}
	.prepared-stuff__image:after {
		background-size: 70% 70%;
		opacity: 1;
	}
	.prepared-stuff__image:before {
		display: none;
	}
	.prepared-stuff__name {
		font-size: 20px;
		display: inline-block;
		width: calc(100% - 90px);
		margin: 0;
		border: none;
		border-width: 0;
		background: transparent !important;
		text-align: left;
	}
	.check__icon {
		display: inline-block;
		position: relative;
		top: auto;
		right: auto;
		width: 45px;
		height: 45px;
		border-style: dotted;
		border-color: rgba(122, 122, 122, 1);
	}
	.check__icon:after {
		top: 23px;
		left: 5px;
		border-right-width: 5px;
		border-top-width: 5px;
	}
	.dt-assist {
		display: none;
	}

}
@media only screen and (max-height: 504px) {
	.first-announce {
		bottom: 0px !important;
	}
	.dt-assist {
		display: none;
	}
	._page-top {
		bottom: 20px !important;
	}
}
/* ===================================================================
 *  08. common and reusable styles
 *
 * ------------------------------------------------------------------- */
/*-- コンテンツリスト ラッパー --*/
.content-list_wrap {
	position: relative;
	width: calc(100% - 120px);
	margin: 0 60px;
}
.grade-content {
	padding: 20px 0;
}
.grade-content section ul {
	width: 840px;
	margin: 0 auto;
}
.grade-content section ul li {
	display: inline-block;
	width: calc(100% / 2);
}
.grade-content section ul li a {
	width: auto;
}
/*
.grade-content section ul:after {
	content: "";
	display: block;
	width: 394px;
	height: 60px;
	border-radius: 30px;
	margin: 10px;
}
*/
/*-- コンテンツメニュー --*/
.content_tag {
	position: relative;
	width: 50%;
	min-width: 394px;
	height: 60px;
	background-color: rgba(120, 120, 120, 1);
	border-radius: 30px;
	margin: 10px auto;
}

.content_tag:after {
	content: "";
	display: block;
}
/*-- コンテンツメニュー ページ番号 --*/
.page_num, .grade_num {
	display: block;
	position: relative;
	width: 50px;
	height: 50px;
	margin: 5px;
	padding: 5px;
	background-color: rgba(249, 249, 249, 1);
	border-radius: 50%;
}
/*-- コンテンツメニュー ページ番号テキスト_共通 */
.page_num span {
	display: block;
	white-space: nowrap;
	color: rgba(122, 122, 122, 1);
}
.video .page_num span {
	color: rgba(249, 249, 249, 1);
}
.page_num span:nth-child(1) {
	font-size: 1.2rem;
	line-height: 1.4; 
}
.page_num span:nth-child(2) {
	font-size: 10px;
	line-height: 1;
}
.grade_num span {
	display: inline-block;
	white-space: nowrap;
}
.grade_num span:nth-child(1) {
	font-size: 1.6rem;
	line-height: 1.4; 
	letter-spacing: -5px;/* 年とのスペース調整 */
}
.grade_num span:nth-child(2) {
	font-size: 0.7rem; 
	line-height: 1;
}
body.taiiku .grade_num span {
	display: block;
	white-space: nowrap;
}
body.taiiku .grade_num span:nth-child(1) {
	font-size: 1.2rem;
	line-height: 1.4; 
	letter-spacing: 1px;/*2学年対応*/
}
body.taiiku .grade_num span:nth-child(2) {
	font-size: 10px; 
	line-height: 1;
}
.movie-title-wrapper .page_num, .movie-title-wrapper .grade_num {
	display: inline-block;
}

.icon-set {
	position: relative;
}
/*-- コンテンツメニュー タイトルラッパー --*/
.content_title {
	position: relative;
	width: calc(100% - 100px);
	height: 60px;
	padding: 7px 0px;
	text-align: left;
}
.content_title p {
	font-size: 14.2px;
	margin: 0;
	line-height: 1.8;
	letter-spacing: -1px;
	color: rgba(249, 249, 249, 1);
	white-space: nowrap;
}
.content_title p:nth-child(2) {
	font-size: 10px;
	line-height: 1.6;
	white-space: nowrap;
}

/*-- 動画タイトル --*/
.movie-content_title {
	position: relative;
	width: auto;
	height: auto;
	max-width: calc(100% - 120px);
	padding: 5px 10px;
	text-align: left;
}
.movie-content_title p:nth-child(1) {
	font-size: 1.6rem;
	margin: 0;
	line-height: 40px;
	padding: 0;
	margin: 0;
}
.movie-content_title p:nth-child(2) {
	font-size: 1rem;
	margin: 0.1rem;
	line-height: 25px;
}
.movie-content_title p:nth-child(3) {
	font-size: 1rem;
	margin: 0.1rem;
	line-height: 1.4;
	font-weight: 300;
	text-align: left;
	width: auto;
}
.movie-title-wrapper p a {
	position: relative;
	font-weight: 600;
	color: rgba(218, 71, 19, 1) !important;
}
.movie-title-wrapper p a:hover {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: rgba(218, 71, 19, 1);
}
/*-- コンテンツメニュー コンテンツ種アイコン --*/
.content-icon {
	/* 調整 .iconの引き継ぎ */
	width: 50px;
	min-width: 50px;
	height: 50px;
	line-height: 50px;
	background-color: transparent;
	/* 調整 */
	margin: 5px;
	border-style: solid;
	border-color: rgba(249, 249, 249, 1);
	border-width: 1px;
}
.separate_math_review {
	position: relative;
	margin: 20px auto;
	font-size: 1.2rem;
}
/*-- 動画サブカテゴリータイトル（てじゅん、かくにん） --*/
.headline_movie {
	position: relative;
	width: 100%;
	height: 25px;
	text-align: left;
	border-top-width: 3px;
	border-top-style: solid;
	border-color: rgba(122, 122, 122, 1);
	margin: 0;
	padding: 0;
}


.headline_movie span {
	position: absolute;
	top: -3px;/*borderサイズ分のずれ調整*/
	left: 0;
	display: inline-block;
	border-top-width: 3px;
	border-top-style: solid;
	border-color: rgba(55, 55, 55, 1);
	color: rgba(55, 55, 55, 1);
	padding: 5px 30px 5px 10px;
	font-size: 0.8rem;
	line-height: 1;
}
.sub-content {
	width: 100%;
	display: inline-block;
	margin: 20px 0;
}
#relavant-content .sub-content ul li a {
	border-radius: 50%;
}
.grid-set {
	padding: 15px 0;
	transition-property: border, background-color transform;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
	border-left-width: 5px;
	border-left-style: solid;
	border-right-width: 5px;
	border-right-style: solid;
	border-color: transparent;
	z-index: -1;

}
html:not(.touch) .grid-set:hover {
	border-color: rgba(122, 122, 122, 1);
	/*transform: scale(1.01);*/
}

.grid-cell {
	position: relative;
	display: inline-block;
	font-size: 1rem;
	margin: 0 10px;
	text-align: left;
	vertical-align: top;
	/*width: 100%;*/
}
/*-- 手順番号 --*/
.job_num {
	position: relative;
	width: 40px;
	min-width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background-color: rgba(122, 122, 122, 1);
	color: rgba(249, 249, 249, 1);
	border-radius: 50%;
	transition-property: box-shadow;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

/*-- 再生時間 --*/
.play-time {
	padding: 5px 10px;
	color: rgba(48, 48, 48, 1) !important;
	text-decoration: none;
}
.play-time:before, .play-time:after {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	width: calc(100% + 10px);
	height: calc(100% - 20px);
	border-right-width: 1px;
	border-right-style: solid;
	border-color: rgba(122, 122, 122, 1);	
}

.play-time:after {
	width: calc(100% + 13px);
}
/*
.sub-content ul li {
	opacity: 0;
	animation: fadeInUp 0.4s forwards;

}
.sub-content ul li:nth-child(1) {
	animation-delay: 0.2s;
}
.sub-content ul li:nth-child(2) {
	animation-delay: 0.4s;
}
.sub-content ul li:nth-child(3) {
	animation-delay: 0.6s;
}
.sub-content ul li:nth-child(4) {
	animation-delay: 0.8s;
}
.sub-content ul li:nth-child(5) {
	animation-delay: 1s;
}
.sub-content ul li:nth-child(6) {
	animation-delay: 1.2s;
}
.sub-content ul li:nth-child(7) {
	animation-delay: 1.4s;
}
.sub-content ul li:nth-child(8) {
	animation-delay: 1.6s;
}
.sub-content ul li:nth-child(9) {
	animation-delay: 1.8s;
}
.sub-content ul li:nth-child(10) {
	animation-delay: 2s;
}
*/
.sub-content ul li:nth-child(odd) .grid-set {
	background-color: rgba(242, 242, 242, 1);
}
.sub-content ul li:nth-child(even) .grid-set {
	background-color: rgba(232, 232, 232, 1);
}
.closed-caption {
	display: inline;
	padding: 5px 10px;
	color: rgba(48, 48, 48, 1);
	text-decoration: none;
}

.thumbnail_holder {
	position: relative;
	width: 250px;
	height: 250px;
	text-align: center;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	margin: 20px auto; 
}
.thumbnail_holder:before,
.thumbnail_holder:after {
	pointer-events: none;
}
.thumbnail_holder .page_num {
	position: absolute;
	display: inline-block !important;
	top: 0px;
	left: 0px;
	background-color: rgba(122, 122, 122, 1);
	color: rgba(249, 249, 249, 1);
	z-index: 10;
}
.thumbnail_holder .image_holder {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 50%;
	opacity: 0.99;
}

.image_holder img {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1) translateX(-50%);
	transform: scale3d(1.05,1.05,1) translateX(-50%);
}
.thumbnail_holder figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.thumbnail_holder figcaption:before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.1);
	content: "";
	-webkit-transition: -webkit-transform 0.6s ease-out;
	transition: transform 0.6s ease-out;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}
html:not(.touch) .thumbnail_holder:hover figcaption:before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}
.image_holder figcaption:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../images/etc/pattern_dot.png") repeat center center/3px 3px;
    z-index: 1;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
}
html:not(.touch) .image_holder:hover figcaption:after {
	opacity: 0;
}
.thumbnail_holder figcaption p {
	position: absolute;
	top: calc(70% - 3.8rem / 2);
	left: 0;
	width: 100%;
	min-height: 3.6rem;
	height: auto;
	margin: 0;
	letter-spacing: -1px;
	/*white-space: nowrap;*/
	background-color: rgba(249, 249, 249, 0.8);
	transition-property: top;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
	z-index: 10;
	padding: 0 12px 5px 12px;
}
.thumbnail_holder figcaption p span {
	margin: 0 auto;
	text-transform: none;
}
.thumbnail_holder figcaption p span:nth-child(1) {
	position: relative;
	font-size: 14px;
	font-weight: bold;
	line-height: 12px !important;
	max-width: 214px;
	word-break: break-all;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO" !important;

}
.thumbnail_holder figcaption p span:nth-child(2) {
	position: relative;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	white-space: wrap;
	display: block;
	max-width: 175px;
}
/*
.thumbnail_holder:hover figcaption p {
	top: calc(80% - 3rem / 2);
}
*/

/* responsive:
 * common and reusable styles
 * ------------------------------------------------------------------- */
@media only screen and (min-width: 1180px) {
	.movie-content_title {
		width: 100%;
	}
}
@media only screen and (min-width: 1340px) {
	.grade-content section ul {
		width: 1280px;
	}
	.grade-content section ul li {
		width: calc(100% / 3 - 2px);/*IEで何か余分な余白が何かが存在しているため、2px小さく*/
	}
}
@media only screen and (max-width: 920px) {
	.grade-content section ul {
		width: auto;
	}
	.grade-content section ul li {
		width: 100%;
	}
}
@media only screen and (max-width: 767px) {
	.content-list_wrap {
		width: calc(100% - 0px);
		margin: 0;
	}
	.link-button-area .content_tag {
		margin: 10px auto;
	}
	.movie-content_title p:nth-child(1) {
		font-size: 1.4rem;
		line-height: 30px;
	}
	.movie-content_title p:nth-child(2), .movie-content_title p:nth-child(3) {
		font-size: 0.8rem;
		line-height: 20px;
	}
}
@media only screen and (max-width: 441px) {
	.content_tag {
		width: 100%;
		min-width: 300px;
		height: 140px;
		background-color: rgba(242, 242, 242, 1) !important;
		border-radius: 20px;
		margin: 4px auto;
		overflow: hidden;
	}
	.content_tag:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 5px;
		background-color: rgba(122, 122, 122, 1);
	}
	.content_tag .content_title {
		width: calc(100vw - 10px);
		height: 80px;
		padding: 12px 10px 12px 10px;	
		-webkit-order: 1;
		-moz-order: 1;
		-ms-flex-order: 1;
		-o-order: 1;
		order: 1;
		flex: 1 0 100%;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: rgba(212, 212, 212, 1);
	}
	.content_title p {
		color: rgba(48, 48, 48, 1);
	}
	.content_title p:nth-child(1) {
		font-size: 20px;
	}
	.content_title p:nth-child(2) {
		font-size: 14px;
	}
	.content_tag .page_num {
		position: absolute;
		bottom: 0;
		left: 12px;
		/*
		width: auto;
		height: 40px;
		*/
		margin: 0;
		padding: 0;
		display: inline-block;
		-webkit-order: 2;
		-moz-order: 2;
		-ms-flex-order: 2;
		-o-order: 2;
		order: 2;
		/*background-color: transparent;*/
	}
	.page_num span {
		/*display: inline-block;*/
		white-space: wrap;
	}
	.content_tag .content-icon {
		position: absolute;
		bottom: 0;
		right: 10px;
		/*
		max-width: 30px;
		width: 30px;
		height: 30px;
		line-height: 30px;
		*/
		-webkit-order: 3;
		-moz-order: 3;
		-ms-flex-order: 3;
		-o-order: 3;
		order: 3;
		background-color: rgba(122, 122, 122, 1);
	}

	.content_tag .content-icon:after {
		/*
		background-size: 30px 30px;
		width: 30px;
		*/
	}
}	
/* ===================================================================
 *  09. header styles
 *
 * ------------------------------------------------------------------- */
/*-- ヘッダー --*/
.dt-header {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	/*min-width: 320px;*/
	height: 60px;
	z-index: 1000;
	overflow: visible;
}

.dt-header_content {
	position: relative;
	display: flex;
	width: calc(100% - 20px);
	padding: 10px 10px;
	margin: 0 auto;
	max-width: 1440px;
}
/*-- ホームボタン ラッパー --*/
.logo_wrap {
	display: inline-block;
	padding: 2px 12px 2px 2px;
	border-radius: 22.5px;	
}
.logo_wrap a {
	position: relative;
	display: -webkit-flex;
	display: flex;
}
/*-- コーポレイトアイコン --*/
.logo__icon {
	position: relative;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	background-image: url("../images/icon/logo_icon.svg");
}
/*-- コーポレイト名 --*/
.logo__corp-text {
	position: relative;
	width: 140px;
	height: 35px;
}
/*-- コーポレイト名 アニメーション用クラス --*/
.letter {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}
.letter:nth-child(1) {
  -webkit-transition-delay: 1.0s;
  -o-transition-delay: 1.0s;
  transition-delay: 1.0s;
}
.letter:nth-child(2) {
  -webkit-transition-delay: 1.1s;
  -o-transition-delay: 1.1s;
  transition-delay: 1.1s;
}
.letter:nth-child(3) {
  -webkit-transition-delay: 1.2s;
  -o-transition-delay: 1.2s;
  transition-delay: 1.2s;
}
.letter:nth-child(4) {
  -webkit-transition-delay: 1.3s;
  -o-transition-delay: 1.3s;
  transition-delay: 1.3s;
}
.letter:nth-child(5) {
  -webkit-transition-delay: 1.4s;
  -o-transition-delay: 1.4s;
  transition-delay: 1.4s;
}
/*-- コーポレイト名 アニメーション用クラス 読み込み終了後に表示 --*/
/*
body.pace-done */.letter {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/*-- ドロワーメニュー 開閉ボタン --*/
#index_button {
  display: inline-block;
  position: fixed;
  top: -10px;
  right: -5px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  z-index: 1001;
  background-color: rgba(242, 238, 232, 1);
}
#index_button > div#index_button_icon {
  display: block;
  position: absolute;
  top: 50%;
  left: 15px;
  width: 30px;
  height: 2px;
  background: rgba(218, 71, 19, 1);
  /*background: #2196F3;*/
  -webkit-transition: -webkit-transform .2s ease;
  -moz-transition:    -moz-transform    .2s ease;
  -ms-transition:     -ms-transform     .2s ease;
  -o-transition:      -o-transform      .2s ease;
  transition:         transform         .2s ease;
}
#index_button > div#index_button_icon:before, #index_button > div#index_button_icon:after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 2px;
  background: rgba(218, 71, 19, 1);
  /*background: #2196F3;*/
  -webkit-transition: -webkit-transform .2s ease;
  -moz-transition:    -moz-transform    .2s ease;
  -ms-transition:     -ms-transform     .2s ease;
  -o-transition:      -o-transform      .2s ease;
  transition:         transform         .2s ease;
}
#index_button > div#index_button_icon:before {
  margin-top: -8px;
}
#index_button > div#index_button_icon:after {
  margin-top: 6px;
}
#index_button.is-close > div#index_button_icon {
  background: transparent;

}
#index_button.is-close > div#index_button_icon:before, #index_button.is-close > div#index_button_icon:after {
  margin-top: 0;
}
#index_button.is-close > div#index_button_icon:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
  transform:         rotate(-45deg);
}
#index_button.is-close > div#index_button_icon:after {
  -webkit-transform: rotate(-135deg);
  -moz-transform:    rotate(-135deg);
  -ms-transform:     rotate(-135deg);
  -o-transform:      rotate(-135deg);
  transform:         rotate(-135deg);
}
html:not(.touch) #index_button.is-close:hover > div#index_button_icon:before {
  -webkit-transform: rotate(-135deg);
  -moz-transform:    rotate(-135deg);
  -ms-transform:     rotate(-135deg);
  -o-transform:      rotate(-135deg);
  transform:         rotate(-135deg);
}
html:not(.touch) #index_button.is-close:hover > div#index_button_icon:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
  transform:         rotate(-45deg);
}
#index_button span {
	position: absolute;
	bottom: -6px;
	left: 10px;
	font-size: 0.7rem;
	font-weight: 600;
	white-space: nowrap;
}
.side-menu_sub-title {
	position: relative;
	font-size: 0.9rem;
	margin: 20px 0 10px 0;
	line-height: 1;
	white-space: nowrap;
}
.side-menu_sub-title:after {
	content: "";
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: rgba(106, 119, 132, 1);
	
	-webkit-flex-grow: 1;
	flex-grow: 1;
	margin: 8px 0.5rem;
}
.side-menu-wrapper {
	position: fixed;
	width: 320px;
	height: 100%;
	top: 0;
	right: 0;
	padding: 60px 0 0 0;
	z-index: 1000;
	background-color: rgba(242, 238, 232, 1);
	-webkit-transform: translateX(320px);
	transform: translateX(320px);
	transition-property: transform;
	transition-duration: 0.6s;
	transition-timing-function: ease-in-out;
}
#index_button.is-close ~ .side-menu-wrapper {
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
	box-shadow: 0 -6px 0 4px rgba(255, 241, 0, 0.2);
}
.side-menu_content {
	position: relative;
	display: inline-block;
  	overflow-y: auto;
  	width: 100%;
  	height: calc(100% - 10px);
  	/*height: 95vh;*//* %指定だと、iOSでスクロールが効かなくなることがある */
  	padding: 0 20px;
  	-webkit-overflow-scrolling: touch;
  	overflow-scrolling: touch;
  	margin-bottom: 10px; 
}
.side-menu_content nav {
	position: relative;
}
.side-menu_content ul:nth-child(3) {
	margin-left: 40px;
}
html:not(.touch) .side-menu_content li:hover {
	background-color: rgba(255, 241, 0, 0.2);
}
.side-menu-wrapper .side-menu__listset {
	display: flex;
	justify-content: flex-start;
}
.side-menu-wrapper .side-menu__listset .class-icon {
	margin: 5px 10px;
	width: 35px;
	height: 35px;
	background-size: 80% 80%;
	background-position: center center;
	border-radius: 50%;
 }
.side-menu__listset p {
	margin: 5px 0;
	font-size: 1rem;
}
.side-menu-wrapper .button-assist {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	padding: 15px 5px 15px 5px;
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
	margin: 15px 20px 5px 20px;
}
.side-menu-wrapper .button-assist ~ span {
	font-size: 1rem;
	text-align: center;
	display: block;
}
/* responsive:
 * header styles
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	body.video .dt-header {
		/* 強制移動させた手順・準備ボタンとのバッティングを回避 */
		width: auto;
	}
}
@media only screen and (min-width: 1440px) {
	#index_button {
  		position: fixed;
  		top: -10px;
  		right: 2px;
	}
}
@media only screen and (max-width: 441px) {
	.dt-header_content {
		width: calc(100% - 10px);
		padding: 10px 5px;
	}
	.dt-header .logo__corp-text {
		display: none;
	}
	.logo_wrap {
		padding: 2px 2px 2px 2px;
	}
}
/* ===================================================================
 *  10. page hero
 *
 * ------------------------------------------------------------------- */
/*-- ヒーローアニメーション ラッパー --*/
.intro-animation_wrap {
	position: relative;
	display: inline-block;
	max-height: 720px;
	width: 100%;
	height: auto;
	margin: 40px 60px 0;
	padding: 50px 0;
	text-align: center;
	font-size: 2.4rem;
	line-height: 1;
	background-color: rgba(242, 242, 242, 1);
	background-size: 30px 30px;
	background-image:
	 linear-gradient(rgba(215,204,200,.3) 1%, rgba(215,204,200,.3) 1%, transparent 1%,
	  transparent 99%, rgba(215,204,200,.3) 99%, rgba(215,204,200,.3) 100%),
	 linear-gradient(90deg, rgba(215,204,200,.3) 1%, rgba(215,204,200,.3) 1%, transparent 1%,
	  transparent 99%, rgba(215,204,200,.3) 99%, rgba(215,204,200,.3) 100%),
	 linear-gradient(transparent, transparent 25%, rgba(215,204,200,.4) 25%, rgba(215,204,200,.4) 26%, transparent 26%,
	  transparent 50%, rgba(215,204,200,.2) 50%, rgba(215,204,200,.2) 51%, transparent 51%,
	  transparent 75%, rgba(215,204,200,.2) 75%, rgba(215,204,200,.2) 76%, transparent 76%, transparent 100%),
	 linear-gradient(90deg, transparent, transparent 25%, rgba(215,204,200,.2) 25%, rgba(215,204,200,.2) 26%, transparent 26%,
	  transparent 50%, rgba(215,204,200,.2) 50%, rgba(215,204,200,.2) 51%, transparent 51%,
	  transparent 75%, rgba(215,204,200,.2) 75%, rgba(215,204,200,.2) 76%, transparent 76%, transparent 100%);
	border-bottom-width: 12px;
	border-bottom-style: solid;
	border-color: rgba(122, 122, 122, 1);
}
.intro_slide {
	position: relative;
	display: inline-block;
	width: 40%;
	margin: 0 0 0 10%;
	min-height: 320px;
	background-repeat: no-repeat;
	background-image: url("../images/hero/hero_sample3.svg");
	
	background-size: 100% 100%;
	background-position: center center;
	
}
.intro_text_wrap {
	position: relative;
	display: inline-block;
	margin: 0 0 0 10%;
}
.intro_text__line {
	display: block;
	padding: 10px 30px;
	color: rgba(249, 249, 249, 1);
	background-color: rgba(122, 122, 122, 1);
	white-space: nowrap;
}
/*-- スクロールボタン エリア --*/
.scroll_holder {
	position: relative;
	width: 100%;
	height: 50px;
	margin: 20px 0;
}

.scroll_holder:after {
	content: "";
	position: absolute;
	top: -20px;
	left: calc(50% - 1px);
	width: 2px;
	height: 115px;
	background-color: rgba(122, 122, 122, 1);
}
/*-- スクロールボタン 共通 --*/
._scroll, ._page-top {
	margin: 0 auto;
	position: relative;
	width: 60px;
	height: 60px;
	border: none;
	background-color: rgba(122, 122, 122, 1);
	transition-property: transform, margin, box-shadow;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
	z-index: 11;
}
._scroll:before, ._page-top:before {
	content: "";
	position: absolute;
	top: 15px;
	left: 19px;
	width: 20px;
	height: 20px;
	border: 0px;
	border-top: solid 2px rgba(249, 249, 249, 1);
	border-right: solid 2px rgba(249, 249, 249, 1);
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	margin-top: 0;
	transition-property: transform, margin;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}
/*-- スクロールボタン トップへ戻る --*/
._page-top {
	position: fixed;
	bottom: 60px;
	right: 20px;
}
._page-top a {
	position: relative;
	width: 60px;
	height: 60px;
}
html:not(.touch) ._scroll:hover:before {
	margin-top: 4px;
}
._page-top:before {
	top: 25px;
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
html:not(.touch) ._page-top:hover:before {
	margin-top: -4px;
}
/* responsive:
 * page hero
 * ------------------------------------------------------------------- */

@media only screen and (max-width: 930px) {
	.intro-animation_wrap {
		flex-flow: column;
		padding: 20px 0;
	}
	.intro_slide {
		width: 100%;
		margin: 20px 0;
		height: 250px;
	}
	.intro_text_wrap {
		margin: 0;
	}
}
@media only screen and (max-width: 720px) {
	.intro-animation_wrap {
		margin: 40px 10px 0;
	}
	.intro_slide {
		height: 200px;
		margin: 0 40px;
	}
	.intro_text__line {
		margin-bottom: 5px;
	}
}
@media only screen and (max-width: 568px) {
	.intro_slide {
		height: 100px;
	}
	.intro-animation_wrap {
		font-size: 2rem;
	}
}
 /* ===================================================================
 *  11. content wrap
 *
 * ------------------------------------------------------------------- */
body {
	background-color: transparent;
}
html {
	background-repeat: repeat;
	background-image: url("../images/etc/dirt.png"); 
	background-color: rgba(249, 249, 249, 1);
}
/******* bootstrap.css拡張 *******/
/*-- フレックスアイテム --*/
.flex-item {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.w-70 {
	width: 70%;
}
.w-30 {
	width: 30%;
}
/******* bootstrap.css拡張 ここまで *******/

/*-- メイン --*/
.dt-main {
	position: relative;
	width: 100%;
	min-height: auto !important;
	height: auto !important;
	/*padding-top: 40px;*/
	z-index: 1;
}
/*-- メイン 背景画像（砂）--*/
.dt-main:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	/*min-height: 100vh;*/
}
/*-- メイン 背景画像（波）--*/
/*
body.dt-main .dt-main:after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	min-width: 380px;
	min-height: 140%;
	background-repeat: repeat-y;
	background-image: url("../images/etc/wave.svg");
	z-index: -1;
}
*/
/*-- セクション --*/
.dt-section {
	position: relative;
	width: 100%;
	/*min-height: 100vh;*/
	height: auto;
	padding: 20px 40px 40px 40px;
	text-align: center;
}
#hero-section.dt-section {
	max-height: 720px;
	padding: 20px 40px 0px 40px;
}
#menu-section.dt-section {
	padding: 20px 40px 40px 40px;
}
#movie-section.dt-section, #indivisual-section.dt-section {
	padding: 60px 30px 40px 30px;
}

/*-- セクション タイトル --*/
.segment-text {
	position: relative;
	width: auto;
	margin: 0 60px;
	padding: 0;
	border: none;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-width: 5px;
	border-bottom-width: 1px;
	padding: 10px 60px 5px;
	text-align: center;
}

/*-- セクション タイトル テキスト調整 --*/
.segment-text p {
	display: block;
	font-size: 1.8rem;
	font-weight: 600;
	padding: 0;
	margin: 5px 0;
}
/*-- セクション タイトル 小 テキスト調整 --*/
.segment-text span {
	display: block;
	font-weight: 600;
	font-size: 0.8rem;
	line-height: 1.4;
}
.segment-text._mini {
	width: 60%;
	width: 280px;
	margin: 40px auto 20px;
	padding: 5px 10px 5px;
	border-top-width: 2px;
}
.segment-text._mini p {
	font-size: 1.4rem;
	margin: 2px 0;
}
.segment-text._mini span {
	font-size: 0.7rem;
}
/*-- 学年タブ --*/
.tabs {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
}
.tabs section  {
	display: none;
	position: relative;
	width: calc(100% - 20px);
	margin: 0 10px;
}

.tabs section.tab-content-current {
	display: block;
}
/*-- 学年タブ ラッパー --*/
.grade-list_wrap {
	margin: 10px 10px 60px 10px;
}
/*-- 学年タブ ラッパー リスト スタイル --*/
.grade-list_item__circle {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 80px;
	padding: 20px 10px;
	margin: 20px 15px;
	border-radius: 50%;
	border-width: 2px;
	border-style: dotted;
	text-align: center;
	font-size: 20px;
	white-space: nowrap;/*改行禁止*/
	
	transition-duration: 0.4s;
	transition-property: background-color, border-color, color;
	color: rgba(122, 122, 122, 1);
}
/*-- 学年タブ 風船型ボタン 学年アイコン 基本 --*/

.grade-list_item__circle:before {
	content: "";
	position: absolute;
	bottom: 17px;
	left: 17px;
	width: 40px;
	height: 10px;
	background-repeat: no-repeat;
	background-size: 40px 40px;
}
/*-- 学年タブ 風船型ボタン 学年アイコン 教科ごと配色 --*/
body.rika .grade-list_item__circle:before {
	background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2065%2065%22%20enable-background%3D%22new%200%200%2065%2065%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%20id%3D%22_x33_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2222.1%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2232.9%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2243.7%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x34_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2216.4%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2227.2%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2238%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2248.9%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x35_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2222.1%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2211.2%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2232.9%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2243.7%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2254.6%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x36_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2216.4%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%225.5%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2227.2%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2238%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2248.9%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%2369BC82%22%20cx%3D%2259.8%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
body.mathematic .grade-list_item__circle:before {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2065%2065%22%20enable-background%3D%22new%200%200%2065%2065%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%20id%3D%22_x33_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2222.1%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2232.9%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2243.7%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x34_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2216.4%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2227.2%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2238%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2248.9%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x35_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2222.1%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2211.2%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2232.9%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2243.7%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2254.6%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x36_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2216.4%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%225.5%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2227.2%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2238%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2248.9%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%234ab3d3%22%20cx%3D%2259.8%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
body.sports .grade-list_item__circle:before {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2065%2065%22%20enable-background%3D%22new%200%200%2065%2065%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%20id%3D%22_x33_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2222.1%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2232.9%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2243.7%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x34_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2216.4%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2227.2%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2238%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2248.9%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x35_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2222.1%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2211.2%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2232.9%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2243.7%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2254.6%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x36_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2216.4%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%225.5%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2227.2%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2238%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2248.9%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23805b85%22%20cx%3D%2259.8%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
body.active .grade-list_item__circle:before {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2065%2065%22%20enable-background%3D%22new%200%200%2065%2065%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%20id%3D%22_x33_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2222.1%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2232.9%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2243.7%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x34_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2216.4%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2227.2%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2238%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2248.9%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x35_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2222.1%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2211.2%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2232.9%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2243.7%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2254.6%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x36_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2216.4%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%225.5%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2227.2%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2238%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2248.9%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23d68147%22%20cx%3D%2259.8%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
html:not(.touch) .grade-list_item__circle:hover:before, html:not(.touch) .grade-list_item__circle:hover:before {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2065%2065%22%20enable-background%3D%22new%200%200%2065%2065%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%20id%3D%22_x33_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2222.1%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2232.9%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2243.7%22%20cy%3D%224.2%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x34_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2216.4%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2227.2%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2238%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2248.9%22%20cy%3D%2222.9%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x35_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2222.1%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2211.2%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2232.9%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2243.7%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2254.6%22%20cy%3D%2241.5%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3Cg%20id%3D%22_x36_%22%3E%20%3Cg%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2216.4%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%225.5%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2227.2%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2238%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2248.9%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%2259.8%22%20cy%3D%2260.2%22%20r%3D%222.5%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
/*-- 学年タブ 風船型ボタン 学年アイコン 学年ごと調整 --*/
.grade-list_item__circle._three:before {
	background-position: 2px 0px;
}
.grade-list_item__circle._four:before {
	background-position: 2px -11px;
}
.grade-list_item__circle._five:before {
	background-position: 2px -22px;
}
.grade-list_item__circle._six:before {
	background-position: 2px -33px;
}
/*-- 学年タブ 風船型ボタン ロールオーバー効果 --*/
html:not(.touch) .grade-list_item__circle:hover, .grade-list_wrap ul li.is-current .grade-list_item__circle {
	background-color: rgba(218, 71, 19, 1);
	border-color: rgba(218, 71, 19, 1);
	border-style: solid;
	color: rgba(249, 249, 249, 1);
}
/*-- 学年タブ 風船型ボタン 選択中 風船効果 --*/
.grade-list_wrap ul li.is-current {
	pointer-events: none;
	animation-name: fluffy-vertical;
	animation-duration: 4.2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.grade-list_wrap ul li.is-current a {
	pointer-events: none;
	animation-name: fluffy-horizontal;
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.grade-list_wrap ul li.is-current .grade-list_item__circle:after {
	content: "";
	position: absolute;
	top: 76px;
	left: 25px;
	width: 30px;
	height: 80px;
	background-repeat: no-repeat;
	background-size: 30px 80px;
	background-position: center bottom;
	background-image: url("../images/icon/balloon_string.svg");
	overflow-y: hidden;
}

@keyframes test {
    0% {height: 0;}
  100% {height: 80px; }
}
@keyframes fluffy-horizontal {
    0% { transform:translateX( -3px); }
  100% { transform:translateX(  0px); }
}
@keyframes fluffy-vertical {
    0% { transform:translateY(-6px); }
  100% { transform:translateY(  0px); }
}

/*-- モーダルコンテンツ ラッパー --*/
.modal_holder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1002;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 0.4s;
  overflow-y: scroll;
}
/*-- モーダルコンテンツ ラッパー 表示状態 --*/
.modal_holder.is-visible {
  visibility: visible;
  opacity: 1;
  -webkit-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  pointer-events: auto;
}
/*-- モーダルコンテンツ コンテンツ部分 --*/
.modal__content {
	position: relative;
	max-width: calc(100% - 160px);
	width: 100%;
	height: auto;
	min-height: calc(100% - 60px);
	margin: 60px 80px 0;
	background-color: rgba(242, 238, 232, 1);
	

	-webkit-transform: translate3d(0, 50px, 0);
	transform: translate3d(0, 50px, 0);


	transform-origin: center center;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 30px 30px 0 0;
	transition-property: transform;
	transition-timing-function: ease-in-out;
	transition-duration: 0.4s;
	transition-delay: 0.4s;
	opacity: 0;

}
.modal_holder.is-visible .modal__content {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	visibility: visible;
	opacity: 1;
}

.modal___inner {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0 0 0 0;
	padding: 70px 50px 80px 50px;
	overflow-y: auto;
}

.discription_holder {
	position: relative;
	padding: 20px 60px 0 60px;
}
.discription_holder p {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.6;
}
.balloon-back {
	margin: 20px auto 10px auto;
	width: 70px;
	height: 70px;
	background-color: rgba(249, 249, 249, 1);
}
.balloon-back:before {
	content: "";
	position: absolute;
	top: 69px;
	left: 30px;
	width: 0;
  	height: 0;
  	border-left: 5px solid transparent;
  	border-right: 5px solid transparent;
  	border-top: 10px solid rgba(249, 249, 249, 1);
}
._digital-science:after {
	background-image: url("../images/icon/icon_link_digital_science.svg");
}
._digital-math:after {
	background-image: url("../images/icon/icon_link_digital_math.svg");
}
._digital-physical:after {
	background-image: url("../images/icon/icon_link_digital_physical.svg");
}
._digital-lifestudy:after {
	background-image: url("../images/icon/icon_link_digital_lifestudy.svg");
}
._digital-science:after {
	background-image: url("../images/icon/icon_link_digital_science.svg");
}
.balloon-back ~ span {
	font-size: 1rem;
}
.discription__title {
	display: inline-block;
	margin: 2rem 0 1rem 0; 
	padding: 0.3rem 1.5rem;
	background: rgba(212, 212, 212, 1);
	border-left: solid 5px rgba(122, 122, 122, 1);
}
.itemization-lists {
	font-size: 1rem;
	padding: 0 0 0 30px;
}
.itemization-lists li {
	position: relative;
	display: inline-block;
}
.itemization-lists li:before {
	content: "";
	position: absolute;
	top: 13px;
	left: -13px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: rgba(122, 122, 122, 1);
}
.icon_disc {
	margin: 10px 0;
}
.icon_disc span {
	display: inline-block;
	height: auto;
	font-size: 1rem;
	vertical-align: middle;
	padding: 0 0 0 20px;
}
.icon_disc .icon {
	display: inline-block;
	background-color: rgba(122, 122, 122, 1);	
}
/*-- モーダル閉じるボタン --*/
.modal___close-button {
  position: absolute;
  top: 6px;
  right: 6px;
  height: 54px;
  width: 54px;
  border-radius: 50%;
  border-width: 2px;
  border-color: rgba(122, 122, 122, 1);
  border-style: solid;
  z-index: 9999;
  background-color: transparent;
  /*background-color: rgba(0, 0, 0, 0.6);*/
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
/*
.modal___close-button:hover {
	border: 1px #1F689D solid;
}*/
.modal___close-button .icon-close,
.modal___close-button .icon-close:before,
.modal___close-button .icon-close:after {
  position: absolute;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.modal___close-button .icon-close {
  display: inline-block;
  width: 36px;
  height: 2px;
  /* left: 50%; */
  left: 15%;
  top: 50%;
  bottom: auto;
  right: auto;
}
.modal___close-button .icon-close:before, .modal___close-button .icon-close:after {
  /* 上と下の線 */
  content: '';
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(122, 122, 122, 1);
  border-radius: 2px;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -ms-transition: -ms-transform 0.3s;
  transition: transform 0.3s;
}
html:not(.touch) .modal___close-button:hover {
	box-shadow: 0 12px 24px rgba(0,0,0,0.22), 0 8px 8px rgba(0,0,0,0.18);
}

.modal___close-button .icon-close:before {
  -webkit-transform: translateY(0) rotate(45deg);
  -moz-transform: translateY(0) rotate(45deg);
  -ms-transform: translateY(0) rotate(45deg);
  -o-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
html:not(.touch) .modal___close-button:hover .icon-close:before {
  -webkit-transform: translateY(0) rotate(135deg);
  -moz-transform: translateY(0) rotate(135deg);
  -ms-transform: translateY(0) rotate(135deg);
  -o-transform: translateY(0) rotate(135deg);
  transform: translateY(0) rotate(135deg);
}
.modal___close-button .icon-close:after {
  -webkit-transform: translateY(0) rotate(-45deg);
  -moz-transform: translateY(0) rotate(-45deg);
  -ms-transform: translateY(0) rotate(-45deg);
  -o-transform: translateY(0) rotate(-45deg);
  transform: translateY(0) rotate(-45deg);
}
html:not(.touch) .modal___close-button:hover .icon-close:after {
  -webkit-transform: translateY(0) rotate(-135deg);
  -moz-transform: translateY(0) rotate(-135deg);
  -ms-transform: translateY(0) rotate(-135deg);
  -o-transform: translateY(0) rotate(-135deg);
  transform: translateY(0) rotate(-135deg);
}
.overflow-hide {
	overflow-y: hidden;
}
.overflow-hide .dt-main {
	overflow-y: hidden !important;
}
.modal__announce {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	-webkit-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
  	pointer-events: none;
  	opacity: 0;
  	visibility: hidden;
  	background-color: rgba(242, 242, 242, 0.6);
  	z-index: 110;
  	font-size: 16px;
	-webkit-transition-delay: 0.4s;
  	-ms-transition-delay: 0.4s;
  	transition-delay: 0.4s;
}
.modal_holder.is-announced .modal__announce {
	visibility: visible;
	opacity: 1;
	-webkit-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;
	pointer-events: auto;
}
.modal__announce-content {
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 190px);
	width: 380px;
	height: auto;
	padding: 20px 20px 20px 20px;
	border-radius: 20px;
	box-shadow: 5px 31px 85px 23px rgba(0, 0, 0, 0.07);
	background-color: rgba(246, 246, 246, 1);
	-webkit-transform: translate3d(0, 40px, 0);
	-ms-transform: translate3d(0, 40px, 0);
	transform: translate3d(0, 40px, 0);
	opacity: 0;
	transition-property: background-color, transform, opacity;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
	transition-timing-function: ease-in-out;
}
.is-announced .modal__announce-content {
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
.modal__announce-content > p {
	text-align: center;
}
.button-wrapper {
	margin: 20px 0;
	text-align: center;
}
.text-button {
	display: inline-block;
	border-radius: 20px;
	width: 120px;
	padding: 5px 10px;
	margin: 10px 5px;
	color: rgba(249, 249, 249, 1);
	transition-duration: 0.6s;
	transition-timing-function: ease-in-out;
	-webkit-transform: translate3d(0, 20px, 0);
	-ms-transform: translate3d(0, 20px, 0);
	transform: translate3d(0, 20px, 0);
	opacity: 0;
	color: rgba(249, 249, 249, 1) !important;
	border-bottom: none;
	outline: none;
	text-decoration: none;
}
html:not(.touch) .text-button:hover {
	border-bottom: none;
	outline: none;
}
.modal_holder.is-announced .button-wrapper .text-button {
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 1;
}
.modal_holder.is-announced .button-wrapper .text-button:nth-child(1) {
	background-color: rgba(112, 191, 65, 1);
	transition: transform 0.6s 0.8s ease-in-out, opacity 0.6s 0.8s ease-in-out, box-shadow 0.4s 0 ease-in-out;
}
.modal_holder.is-announced .button-wrapper .text-button:nth-child(2) {
	background-color: rgba(249, 78, 100, 1);
	transition: transform 0.6s 1s ease-in-out, opacity 0.6s 1s ease-in-out, box-shadow 0.4s 0 ease-in-out;
}
html:not(.touch) .modal_holder.is-announced .button-wrapper .text-button:hover {
	box-shadow: 5px 31px 85px 23px rgba(0, 0, 0, 0.07);
}

/*-- チェックボックスアイコン --*/
.check-icon {
	position: relative;
	width: 60px;
	height: 60px;
	background-color: rgba(241, 241, 241, 1);
	border-radius: 50%;
	border-style: dotted;
	border-width: 2px;
	border-color: transparent;
	z-index: 10;
	transition-property: border, background-color;
	transition-duration: 0.4s;
	margin: 0 auto 10px;
}
/*-- チェックボックスアイコン チェック描画 --*/
.check-icon:after {
	content: "";
	display: block;
	position: absolute;
	top: 30px;
	left: 12px;
	width: 15px;
	height: 30px;
	-moz-transform: scaleX(-1) rotate(135deg);
	-ms-transform: scaleX(-1) rotate(135deg);
	-webkit-transform: scaleX(-1) rotate(135deg);
	transform: scaleX(-1) rotate(135deg);
	-moz-transform-origin: left top;
	-ms-transform-origin: left top;
	-webkit-transform-origin: left top;
	transform-origin: left top;
	border-right-width: 6px;
	border-right-style: solid;
	border-top-width: 6px;
	border-top-style: solid;
	border-color: rgba(241, 241, 241, 1);
}
.dummy-wrapper {
	width: 100%;
	height: calc(100vh - 160px);
	min-height: 200px;
	max-height: 720px;
	margin: 0 auto;
	background-color: rgba(48, 48, 48, 1);
	color: rgba(238, 238, 245, 1);
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dummy-content {
	position: relative;

}
.dummy-content h3 {
	color: rgba(238, 238, 245, 1);
	font-size: 2.6rem;
	margin-bottom: 0;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}
.dummy-content p {
	color: rgba(238, 238, 245, 1);
	text-transform: lowercase;
	font-weight: 300;
	font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";

}
.gear_wrapper {
	position: relative;
	width: 125px;
	height: 80px;
	margin: 0 auto;
}
._gear {
	position: absolute;
	background-color: transparent !important;
}
._gear.__large {
	top: 0;
	left: 0;
	width: 70px;
	height: 70px;
}
._gear.__small {
	top: -10px;
	right: 0;
	width: 55px;
	height: 55px;
}
._gear:after {
	background-image: url("../images/icon/icon_gear.svg");
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;	
}
._gear.__small:after {
	background-image: url("../images/icon/icon_gear_s.svg");
	-webkit-animation: spin_reverse 2s linear infinite;
	animation: spin_reverse 2s linear infinite;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;	
}
/*
.dummy-content svg #large path {
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

.dummy-content svg #small path {
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
	transform-origin: 50% 50%;
}
*/
/* responsive:
 * content wrap
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	.dt-section,#menu-section.dt-section {
		padding: 20px 0px 40px 0px;
	}
	#movie-section.dt-section {
		padding: 60px 0px 40px 0px !important;
	}

	.grade-list_item__circle {
		margin: 10px 5px
	}
	.segment-text {
		position: relative;
		width: auto;
		margin: 0 0;
		padding: 10px 5px 5px;
	}
	.modal__content {
  		max-width: calc(100% - 40px);
  		height: auto;
  		margin: 60px 20px 0;
	}
	.modal___inner {
		padding: 60px 25px 80px 25px;
	}
	.discription_holder {
		padding: 20px 5px 0 5px;
	}
	#hero-section.dt-section {
		padding: 20px 20px 0px 20px;
	}
}
@media only screen and (max-width: 584px) {
	body.video .modal__content {
		border-radius: 30px;
	}
	.modal___inner {
		padding: 70px 25px 40px 25px;
	}
	.grade-list_item__circle {
		width: 50px;
		height: 50px;
		padding: 7px 5px;
		margin: 10px 2px;
		font-size: 15px;
	}
	.grade-list_item__circle:before {
		bottom: 6px;
		left: 1px;
		width: 40px;
		height: 10px;
		background-size: 40px 40px;
		transform: scale(0.8);
	}
	.grade-list_wrap ul li.is-current .grade-list_item__circle:after {
		top: 17px;
		left: 14px;
		width: 20px;
		background-size: 20px 50px;	
	}
}
@media only screen and (max-height: 466px) {
	.dummy-content h3 {
		font-size: 2.2rem;
		margin-top: 10px;
	}
	.dummy-content p {
		font-size: 1.2rem;
		margin-bottom: 0.5rem;
	}
	.gear_wrapper {
		width: 100px;
		height: 70px;
	}
	._gear.__large {
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	}
	._gear.__small {
	top: -6px;
	right: 0;
	width: 40px;
	height: 40px;
	}
}
/* ===================================================================
 * 12. footer
 *
 * ------------------------------------------------------------------- */
.dt-footer {
	position: relative;
	background-color: rgba(232, 224, 212, 1);
}

.dt-footer_content {
	position: relative;
	width: 100%;
	padding: 40px 40px 10px 40px;
	z-index: 10;

	margin: 0;
}

.link-list_wrap {
	margin: 0 auto;
	width: 100%;
	max-width: 1020px;
}

.link-list_wrap a {
	font-size: 0.9rem;
}
html:not(.touch) .link-list_wrap a:hover {
	color: rgba(48, 48, 48, 1);
}
.link-web-content_wrap {
	width: 100%;
	margin: 30px 0;
}
.link-web-content_wrap ul {
	position: relative;
	width: auto;
	max-width: 100%;
}
.link-web-content_wrap ul li {
	display: inline-block;
	width: calc(100% / 4 - 5px);
	text-align: center;
}
.link-web-content_wrap ul li a {
	width: auto;
	text-align: center;
}
.link-web-content_wrap p {
	line-height: 1.6;
	margin: 0;
	white-space: nowrap;
}
.web-content-icon_set {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	padding: 20px 10px;
	margin: 0 auto;
	background-color: rgba(249, 249, 249, 1);	
}

.link-main-content_wrap {
	
}
.footer-links {
	width: auto;
}

.footer-links a {
	position: relative;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(122,122,122,1);
	padding: 10px 20px;
}
html:not(.touch) .footer-links a:hover,
html:not(.touch) .directory-column-section-state a:hover {
	background-color: rgba(122, 122, 122, 0.2);
}
.footer-links a:before {
	content: "";
	position: absolute;
	top: -3px;
	right: -3px;
	width: 15px;
	height: 15px;
	border-right: 1px solid rgba(122,122,122,1);
	border-top: 1px solid rgba(122,122,122,1);
	transition-duration: 0.4s;
	transition-property: transform;
	transition-timing-function: ease-in-out;
	transform: translate3d(0,0,0);
	opacity: 0;
}
html:not(.touch) .footer-links a:hover:before {
	transform: translate3d(3px,-3px,0);
	opacity: 1;
}

.directory-column {
	position: relative;
	display: inline-block;
	height: auto;
	min-height: 125px;
	width: calc(100% - 265px);
	padding: 0 20px 20px 20px;
	margin: 20px 10px 0 10px;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(122, 122, 122, 1);
}
.directory-column ~ .directory-column {
	min-width: 225px;
	width: 225px;
	display: none;
}

.directory-column-section-state {
	position: relative;
	top: -20px;
	display: inline-block;
	margin: 0 0px;
	padding: 0 40px 0 10px;
	background-color: rgba(232, 224, 212, 1);
}
.directory-column-section-state {
	
}
.directory-column-section-state:after {
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	background-image: url("../images/icon/icon_link.svg");
	background-size: 100% 100%;
	background-position: center center;
}
.directory-column ul {
	position: relative;
}
.directory-column ul li {
	width: calc(100% / 4 - 2px);
	text-align: center;
}
.directory-column ul li a {
	height: auto;
	margin: 0 auto;
}
.link-book-style {
	position: relative;
	
	width: 85px;
	min-height: 85px;
	border-style: solid;
	border-color: rgba(122, 122, 122, 1);
	border-width: 1px;
	margin: 0 auto;
}
.link-book-style:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
	background:
      linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(122, 122, 122, 1) 50.5%) no-repeat top left/100% 100%;
}
.link-book-style p {
	position: absolute;
	bottom: 0;
	width: 100%;
	margin: 0;
	background-color: rgba(122, 122, 122, 1);
	color: rgba(249, 249, 249, 1);

}
.footer-bottom_wrap {
	position: relative;
	width: calc(100% - 80px);
	max-width: 1020px;
	font-size: 0.8rem;
	margin: 10px auto 0 auto;
	z-index: 10;
	overflow: visible;
}
.footer-bottom_wrap ul {
	position: relative;
	display: inline-block;
}
.footer-bottom_wrap ul li {
	position: relative;
	display: inline-block;
	margin: 0 20px 0 10px;
}
.copy {
	display: inline-block;
	margin: 10px 10px 10px 10px;
}
/*チャプター リンクタグ*/
.js-link {
	word-break: break-all;/*折り返し強制*/
	color: #e36f90;
}

/* responsive:
 * footer
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 868px) {
	.footer-bottom_wrap {
		display: block;/*--flexの解除 --*/
		margin: 0 auto;
	}
	.footer-bottom_wrap ul.footer-links, .copy {
		display: block;
		width: 100%;
	}
	.footer-bottom_wrap ul.footer-links li {
		width: calc(100% / 2 - 12px);
		margin: 5px 10px 5px 0px;
	}
	.footer-bottom_wrap ul.footer-links li:nth-child(2) {
		margin: 5px 0px 5px 10px;
	}
	.directory-column,
	.directory-column ~ .directory-column {
		width: 100%;
		margin: 20px 0px 0 0px;
	}
	.dt-footer_content {
		padding: 40px 40px 10px 40px;
	}
	.footer-links a {
		border-bottom: 1px solid rgba(122, 122, 122, 1) !important;
	}
	.link-web-content_wrap ul li {
		width: 50%;
		margin: 20px 0;
	}
}

@media only screen and (max-width: 581px) {
	.directory-column, .directory-column ~ .directory-column {
		min-height: auto;
		margin: 5px 0 0 0;
		padding: 0;
		border: none;
	}
	.directory-column ul {
		margin: 5px 0 0 0;
	}
	.directory-column-section-state {
		top: 0;
		width: 100%;
		padding: 0;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(122, 122, 122, 1);
	}
	.directory-column-section-state a {
		width: 100%;
		padding: 5px 10px 5px 10px;
	}
	.directory-column ul li {
		width: 100%;
		margin: 10px 0 0 0;
	}
	.link-book-style {
		width: 100%;
		min-height: auto;
		margin: 0 0;
		border: none;
	}
	.link-book-style:after {
		display: none;
	}
	.link-book-style p {
		background-color: transparent;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(122, 122, 122, 1);
		color: rgba(48, 48, 48, 1);
	}
	.link-web-content_wrap {
		margin: 10px 0;
	}

	.footer-bottom_wrap ul.footer-links li,
	.footer-bottom_wrap ul.footer-links li:nth-child(2) {
		display: block;
		width: 100%;
		margin: 10px 0;
	}
}
@media only screen and (max-width: 441px) {
	.link-web-content_wrap ul li a {
		width: 100%;
	}
	.link-web-content_wrap ul li {
		width: calc(100% - 0px);
		margin: 5px 0;
	}
	.web-content-icon_set {
	width: 100%;
	height: auto;
	padding: 20px 10px;
	margin: 0;
	border-radius: 0;
	}
}
/* -------------------------------------------------------------------
 * go to top
 * ------------------------------------------------------------------- */
#go-top {
	position: fixed;
	bottom: 0px;
	right: 30px;
	z-index: 20;
	display: none;
}

#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	height: 60px;
	width: 60px;
	line-height: 60px;
	text-align: center;
	background: rgba(252, 252, 252, 0.8);
	border: 1px solid rgba(0, 111, 187, 1);
	color: rgba(0, 111, 187, 1);
	text-align: center;
	text-transform: uppercase;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#go-top a i {
	display: block;
	position: relative;
	top: 20px;
	left: 5px;
	width: 48px;
	height: 1px;
	background-color: rgba(0, 111, 187, 1);
}
#go-top a i:before, #go-top a i:after {
	content: "";
	position: absolute;
	top: 10px;
	left: -2px;
	width: 60%;
	height: 1px;
	background-color: inherit;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
#go-top a i:after {
	left: 20px;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);	
}
#go-top a:visited {
	background: rgba(252, 252, 252, 0.6);
}

html:not(.touch) #go-top a:hover,
#go-top a:focus {
	background: rgba(118, 203, 226, 1);
	border: 1px solid rgba(118, 203, 226, 1);
}
html:not(.touch) #go-top a:hover i,
html:not(.touch) #go-top a:focus i {
	background-color: rgba(250, 250, 250, 1);
}
/* responsive:
 * go top
 * ------------------------------------------------------------------- */
@media only screen and (max-width:600px) {
	#go-top {
		bottom: 0;
		right: 0;
	}

}


/* ===================================================================
 *  13. movie
 *
 * ------------------------------------------------------------------- */
/*-- 動画再生画面　ラッパー --*/
.movie-wrapper {
	position: relative;
	display: block;
	width: auto;
	height: auto;
	max-width: 100vw;
	margin: 0 auto;
}
/*-- デフォルトのstyle変更 --*/
.video-js {
	
}
.video-js .vjs-tech {
	/*
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate3d(-50%, 0, 0);
	width: 80vw !important;
	margin: 0 auto !important;
	*/
}
.video-js {
  margin: 0 auto;
  position: relative;
  height: 0;
  padding: 0 0 34%;
  overflow: hidden;
  margin-bottom: 20px;
}
@media only screen and (max-width: 942px) {
 	.video-js {
	padding: 0 0 56.25%;
 	}
}
/* iframe */
.video-js iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.video-js.vjs-fullscreen {
	max-width: 100vw !important;
}
/*-- 動画タイトルエリア --*/
.movie-title-wrapper {
	width: 100%;
	height: auto;
	padding-top: 10px;
}
.movie-title-wrapper ul {
	max-width: 100vw;
}
.movie-title-wrapper ul li {
	display: inline-block;
}
.movie-title-wrapper ul li:nth-child(1) {
	width: calc(100% - 140px);
}
.movie-title-wrapper ul li:nth-child(2) {
	width: 140px;
}
.zoom-content-wrapper ~ .movie-title-wrapper ul li:nth-child(2) {
	width: auto;
}
/*-- 追加個別コンテンツ コンテンツ表示領域--*/
.zoom-content-wrapper {
	display: inline-block;
	position: relative;
	max-width: 100%;
	width: 100%;
	height: 100%;
	min-height: 180px;
	max-height: calc(100vh - 150px);
	
}

.zoom-content-wrapper svg {
	display: block;
	position: relative;
	width: 933px;
	height: 571px;
	max-width: calc(100% - 60px);
	max-height: calc(100vh - 150px);
	margin: 0 auto;
	min-height: 180px;
	min-width: 293px;
}

.zoom-content-wrapper > svg image {
	min-height: 180px;
	min-width: 293px;
}
@media all and (-ms-high-contrast: none) {
	.zoom-content-wrapper > svg {
		/*
		min-height: calc(100vh - 162px);
		*/
	}
}
@media only screen and (max-width: 942px) {
	.movie-wrapper {
		max-width: 100%;
	}
	.video-js {
		width: 100%;
		max-width: calc(100vw - 2px);
	}
}
@media only screen and (max-width: 812px) {
	.button_double {
		width: 100px;
    	height: 40px;
    	line-height: 40px;
    	line-height: 40px;
    	margin-top: -15px;
    	margin-right: 5px;
    	font-size: 0.8rem;
	}
	.button_double > span {
		width: 50px;
    	height: 39px;
    	line-height: 39px;
	}
	.movie-title-wrapper ul li:nth-child(2) {
		position: absolute;
		right: 63px;
		top: -60px;
		z-index: 11;
	}
	.movie-title-wrapper ul li:nth-child(1) {
		width: 100%;
	}
	.movie-title-wrapper ul li .icon {
		width: 35px;
		height: 35px;
	}
	#index_button {
		top: -5px;
	}
}
@media only screen and (max-width: 812px) {
	.zoom-content-wrapper ~ .movie-title-wrapper ul {
		-webkit-flex-flow: column;
		-moz-flex-flow: column;
		-ms-flex-flow: column;
		-o-flex-flow: column;
		flex-flow: column;
	}
	.zoom-content-wrapper ~ .movie-title-wrapper ul li {
		width: calc(100% - 40px);
		margin: 0 20px;
	}
	.zoom-content-wrapper ~ .movie-title-wrapper ul li:nth-child(2) {
		position: relative;
		right: auto;
		top: auto;
		z-index: 11;
		order: -1;
	}
	.zoom-content-wrapper ~ .movie-title-wrapper ul li:nth-child(2) > div.justify-content-end {
		justify-content: center !important;
	}
}

@media only screen and (min-height: 61.2004vw) and (max-width: 163.3975vh) {
	.zoom-content-wrapper svg {
		width: 931px;
		height: auto;
	}
}
@media only screen and (max-height: 61.2004vw) and (max-width: 163.3975vh) {
	.zoom-content-wrapper svg {
		width: auto;
		height: 571px;
	}
}
@media only screen and (min-height: 571px) {
	.zoom-content-wrapper svg {
		height: auto;
		
	}
}
@media only screen and (max-width: 163.3975vh)  and (min-height: 571px) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		height: 571px;
		width: auto;	
	}
}
@media only screen and (min-width: 163.3975vh)  and (min-height: 571px) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		height: auto;
		width: 933px;	
	}
}
@media only screen and (max-height: 61.2004vw) and (min-height: 571px) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		height: 571px;
		width: auto;	
	}
}
/*
@media only screen and (max-height: 571px) and (max-width: 163.3975vh) {
	.zoom-content-wrapper svg {
		width: 933px;
		height: 571px;
	}
}
*/
@media only screen and (min-width: 163.3975vh) {
	.zoom-content-wrapper svg {
		width: auto;
		height: 571px;
	}
}
@media only screen and (max-height: 571px) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		width: auto;
		height: 571px;
		max-width: 933px;
	}

}
@media only screen and (min-height: 571px) and (max-width: 933px) {
	.zoom-content-wrapper svg {
		width: 933px;
		height: auto;
	}

}
@media only screen and (min-width: 163.3975vh) and (max-height: 571px) {
	.zoom-content-wrapper svg {
		width: auto;
		height: 571px;
	}
}
@media only screen and (min-width: 163.3975vh) and (max-height: 571px) and (max-width: 933px) {
	.zoom-content-wrapper svg {
		width: auto;
		height: 571px;
	}
}
@media only screen and (min-height: 61.2004vw) and (min-height: 716px) and (max-width: 933px) {
	.zoom-content-wrapper svg {
		width: 933px;
		height: auto;
	}
}
@media only screen and (min-height: 61.2004vw) and (max-height: 716px) and (max-width: 933px) {
	.zoom-content-wrapper svg {
		width: 933px;
		height: auto;
	}
}

@media only screen and (min-width: 163.3975vh) and (min-height: 61.2004vw) and (max-height: 716px) and (max-width: 933px) {
	.zoom-content-wrapper svg {
		width: auto;
		height: 571px;
	}
}
@media only screen and (max-width: 163.3975vh) and (min-height: 61.2004vw) and (max-height: 716px) and (max-width: 933px) {
	.zoom-content-wrapper svg {
		width: 931px;
		height: auto;
	}
}

@media only screen and (min-height: 61.2004vw) and (max-height: 413px) and (max-width: 933px) {
	.zoom-content-wrapper svg {
		width: auto;
		height: 571px;
	}
}
@media only screen and (min-width: 163.3975vh) and (max-height: 716px) and (max-width: 933px) {
	.zoom-content-wrapper svg {
		width: auto;
		height: 571px;
	}
}
@media only screen and (max-width: 163.3975vh) and (min-height: 716px) and (max-width: 933px) {
	.zoom-content-wrapper svg {
		width: auto;
		height: 571px;
	}
}
@media only screen and (max-width: 163.3975vh) and (min-height: 716px) and (max-width: 933px) {
	.zoom-content-wrapper svg {
		width: 933px;
		height: auto;
	}
}
@media only screen and (min-width: 163.3975vh) and (max-height: 571px) and (max-width: 933px)  {
	.zoom-content-wrapper svg {
		width: auto;
		height: 571px;
	}
}
@media only screen and (max-width: 163.3975vh) and (min-height: 713px) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		width: 933px;
		height: auto;
	}
}
@media only screen and (min-width: 163.3975vh) and (min-height: 713px) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		height: 571px;
	}
}
@media only screen and (max-height: 61.2004vw) and (min-height: 571px) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		width: auto;
	}
}
@media only screen and (max-height: 61.2004vw) and (min-height: 713px) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		width: 933px;
		height: 100%;
	}
}
@media only screen and (-ms-high-contrast: none) {
	.zoom-content-wrapper svg {
		width: calc(163.3975vh - 245px);
		height: calc(61.2004vw - 95px);
	}	
}
@media only screen and (-ms-high-contrast: none) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		/*width: 933px;*/
	}
}
@media only screen and (-ms-high-contrast: none) and (max-height: 716px) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		height: 571px;
	}
}
@media only screen and (-ms-high-contrast: none) and (min-height: 716px) and (min-width: 933px) {
	.zoom-content-wrapper svg {
		width: 933px;
		height: 571px;
	}
}
@media only screen and (-ms-high-contrast: none) and (max-width: 933px)  {
	.zoom-content-wrapper svg {
		width: calc(163.3975vh - 245px);
	}
}
@media only screen and (-ms-high-contrast: none) and (min-width: 933px) and (min-height: 571px) {
	.zoom-content-wrapper svg {
		/*width: 933px;*/
	}
}
@media only screen and (-ms-high-contrast: none) and (max-width: 933px) and (max-height: 571px) {
	.zoom-content-wrapper svg {
		width: calc(163.3975vh - 245px);
	}
}
/* ===================================================================
 *  14. map
 *
 * ------------------------------------------------------------------- */
/*-- マップコンテンツ ラッパー --*/
.map_holder {
	position: relative;
	margin: 40px 50px;
}
.map_jp {
	position: relative;
	width: 60%;
	margin: 60px auto;
	min-height: 142.65vh;
}

/*-- リンクボタンエリア 共通 --*/
.link-button-area {
	position: absolute;
}
/*-- リンクボタンエリア 北関東 --*/
.link-button-area._kita-kanto {
	top: 300px;
	right: 0px;
}
/*-- リンクボタンエリア 関東 --*/
.link-button-area._kanto {
	top: 650px;
	right: 50px;
}
/*-- リンクボタンエリア 近畿 --*/
.link-button-area._kinki {
	top: 100px;
	left: 0px;
}
/*-- リンクボタンエリア 九州 --*/
.link-button-area._kyushu {
	top: 800px;
	left: 50px;
}
/*-- リンクボタン 調整 --*/
.link-button-area .content_tag {
	width: 394px;
	margin: 5px 10px;
}
.check_holder, .check_holder-alt, .link_holder {
	display: block;
	width: 50px;
	height: 50px;
	margin: 5px;
	padding: 5px;
	background-color: rgba(249, 249, 249, 1);
	border-radius: 50%;
}
.check_holder label, .check_holder-alt label {
  display: block;
  height: 50px;
  position: relative;
  width: 50px;
  cursor:  pointer;
}
.check_holder label:after, .check_holder-alt label:after {
  -moz-transform: scaleX(-1) rotate(135deg);
  -ms-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform: scaleX(-1) rotate(135deg);
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-right: 4px solid #cee;
  border-top: 4px solid #cee;
  content: '';
  display: block;
  height: 25px;
  left: 7px;
  position: absolute;
  top: 21.5px;
  width: 12.5px;
}
html:not(.touch) .check_holder label:hover:after, html:not(.touch) .check_holder-alt label:hover:after {
  border-color: #bdd;
}
.check_holder input, .check_holder-alt input {
  display: none;
}
.check_holder input:checked + label:after, .check_holder-alt input:checked + label:after {
  -webkit-animation: check 0.8s;
  -moz-animation: check 0.8s;
  -o-animation: check 0.8s;
  animation: check 0.8s;
  border-color: #6aa;
}
html:not(.touch) .check_holder.check_holder-alt label:hover:after, html:not(.touch) .check_holder-alt.check_holder-alt label:hover:after {
  -webkit-animation: check 0.8s ease infinite;
  -moz-animation: check 0.8s ease infinite;
  -o-animation: check 0.8s ease infinite;
  animation: check 0.8s ease infinite;
}
.check_holder.check_holder-alt input:checked + label:after, .check_holder-alt.check_holder-alt input:checked + label:after {
  -webkit-animation: none;
  -moz-animation: none;
  -o-animation: none;
  animation: none;
}
/* ===================================================================
 *  14. state
 *
 * ------------------------------------------------------------------- */
/*-- セクション タイトル 線 --*/
body.rika .segment-text {
	border-color: rgba(105, 188, 130, 1);
}
/*-- セクション タイトル テキスト --*/
body.rika .segment-text p,
body.rika .segment-text span {
	color: rgba(105, 188, 130, 1);
}
/*-- 学年タブ ラッパー リスト --*/
body.rika .grade-list_item__circle {
	border-color: rgba(105, 188, 130, 1);
	color: rgba(105, 188, 130, 1);
}
/*-- モーダル 閉じるボタン --*/
body.rika .modal___close-button {
	border-color: rgba(105, 188, 130, 1);
}
body.rika .modal___close-button .icon-close:before,
body.rika .modal___close-button .icon-close:after {
	background-color: rgba(105, 188, 130, 1);
}
/*-- モーダル チェックアイコン --*/
body.rika .check-icon:after {
	border-color: rgba(105, 188, 130, 1);
}
/*-- モーダル 見出し塗り --*/
body.rika .discription__title {
	background: rgba(190, 223, 194, 1);
	border-left: solid 5px rgba(105, 188, 130, 1);
}
/*-- コンテンツアイコン塗り --*/
body.rika .icon_disc .icon {
	background-color: rgba(105, 188, 130, 1);
}
/*-- ローダー プログレスバー --*/
body.rika .pace .pace-progress {
	background: rgba(105, 188, 130, 1);
}
/*-- テキストボタン --*/
body.rika .btn-text {
	border-color: rgba(105, 188, 130, 1);
	color: rgba(105, 188, 130, 1);
}
/*-- テキストボタン --*/
body:not(.mobile).rika .btn-text:hover {
	border-color: rgba(105, 188, 130, 1);
    color: rgba(255, 255, 255, 1);
    background-color: rgba(105, 188, 130, 1);
}
/*-- ボタン --*/
body.rika .btn-lg:after {
	background-color: rgba(105, 188, 130, 1);
}
body.rika .btn-lg:before {
	border-color: rgba(105, 188, 130, 1);
}
/*-- じゅんびするもの --*/
body:not(.mobile).rika .prepared-stuff + .prepared-stuff-button:hover .prepared-stuff__image, body.rika .prepared-stuff:checked + .prepared-stuff-button .prepared-stuff__image {
	border-color: rgba(105, 188, 130, 1);
}
/*-- じゅんびするもの 名称 --*/
body.rika .prepared-stuff__name {
	background-color: rgba(105, 188, 130, 0.4);
	border-color: rgba(105, 188, 130, 1);
}
/*-- じゅんびするもの ロールオーバー --*/
body:not(.mobile).rika .prepared-stuff-button:hover .check__icon {
	border-color: rgba(105, 188, 130, 1);
}
/*-- じゅんびするもの アイコン --*/
body.rika .prepared-stuff:checked + .prepared-stuff-button > .check__icon {
	border-color: rgba(105, 188, 130, 1);
	background-color: rgba(105, 188, 130, 1);
}
body.rika .check__icon:after {
	border-color: rgba(105, 188, 130, 0.4);
}
/*-- 授業支援機能 ボタン --*/
body.rika .button-assist {
	background-color: rgba(105, 188, 130, 1);
}
/*-- コンテンツメニュー リスト --*/
body.rika .content_tag {
	background-color: rgba(105, 188, 130, 1);
}
/*-- コンテンツメニュー リスト 学年とページ数 --*/
body.rika .movie-title-wrapper .page_num, body.rika .movie-title-wrapper .grade_num {
	background-color: rgba(105, 188, 130, 1);
	color: rgba(249, 249, 249, 1);
}
/*-- 教科ごとの色分け 理科 --*/
body.rika .headline_movie {
	border-color: rgba(190, 223, 194, 1);
}
/*-- 動画ページ　区切り線 --*/
body.rika .headline_movie span {
	border-color: rgba(105, 188, 130, 1);
	color: rgba(105, 188, 130, 1);
}
/*-- 動画ページ　手順紹介 --*/
body:not(.mobile).rika .grid-set:hover {
	border-color: rgba(190, 223, 194, 1);
}
/*-- 動画ページ　手順紹介 手順番号 --*/
body.rika .job_num {
	background-color: rgba(105, 188, 130, 1);
}
/*-- 動画ページ　手順紹介 区切り線 --*/
body.rika .play-time:before, body.rika .play-time:after {
	border-color: rgba(105, 188, 130, 1);
}
/*-- 動画ページ　ヒーローエリア区切り線 --*/
body.rika .intro-animation_wrap {
	border-color: rgba(105, 188, 130, 1);
}
body.rika .scroll_holder:after {
	background-color: rgba(105, 188, 130, 1);
}
/*-- アイコン スクロールボタン、ページトップへ戻るボタン --*/
body.rika ._scroll, body.rika ._page-top {
	background-color: rgba(105, 188, 130, 1);
}
/*-- アニメーション 教科タイトル --*/
body.rika .intro_text__line {
	background-color: rgba(105, 188, 130, 1);
}
/*-- 動画 関連コンテンツ ページ番号 --*/
body.rika .thumbnail_holder .page_num {
	background-color: rgba(105, 188, 130, 1);
}
@media only screen and (max-width: 441px) {
	/* コンテンツメニュー */
	body.rika .content_tag .content-icon {
		background-color: rgba(105, 188, 130, 1);
	}
}
body.rika .content_tag:after {
	background-color: rgba(105, 188, 130, 1);
}
body.rika .dt-assist .button-assist > span {
	background-color: rgba(105, 188, 130, 1);
}
body.rika .dt-assist .button-assist span:after {
	background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(105, 188, 130, 1) 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgba(105, 188, 130, 1) 50.5%) no-repeat top right/50% 100%;
}
/*-- セクション タイトル 線 --*/
body.sansu .segment-text {
	border-color: rgba(74, 179, 211, 1);
}
/*-- セクション タイトル テキスト --*/
body.sansu .segment-text p,
body.sansu .segment-text span {
	color: rgba(74, 179, 211, 1);
}
/*-- 学年タブ ラッパー リスト --*/
body.sansu .grade-list_item__circle {
	border-color: rgba(74, 179, 211, 1);
	color: rgba(74, 179, 211, 1);
}
/*-- モーダル 閉じるボタン --*/
body.sansu .modal___close-button {
	border-color: rgba(74, 179, 211, 1);
}
body.sansu .modal___close-button .icon-close:before,
body.sansu .modal___close-button .icon-close:after {
	background-color: rgba(74, 179, 211, 1);
}
/*-- モーダル チェックアイコン --*/
body.sansu .check-icon:after {
	border-color: rgba(74, 179, 211, 1);
}
/*-- モーダル 見出し塗り --*/
body.sansu .discription__title {
	background: rgba(158, 216, 245, 1);
	border-left: solid 5px rgba(74, 179, 211, 1);
}
/*-- コンテンツアイコン塗り --*/
body.sansu .icon_disc .icon {
	background-color: rgba(74, 179, 211, 1);
}
/*-- ローダー プログレスバー --*/
body.sansu .pace .pace-progress {
	background: rgba(74, 179, 211, 1);
}
/*-- テキストボタン --*/
body.sansu .btn-text {
	border-color: rgba(74, 179, 211, 1);
	color: rgba(74, 179, 211, 1);
}
/*-- テキストボタン --*/
body:not(.mobile).sansu .btn-text:hover {
	border-color: rgba(74, 179, 211, 1);
    color: rgba(255, 255, 255, 1);
    background-color: rgba(74, 179, 211, 1);
}
/*-- ボタン --*/
body.sansu .btn-lg:after {
	background-color: rgba(74, 179, 211, 1);
}
body.sansu .btn-lg:before {
	border-color: rgba(74, 179, 211, 1);
}
/*-- じゅんびするもの --*/
body:not(.mobile).sansu .prepared-stuff + .prepared-stuff-button:hover .prepared-stuff__image, body.sansu .prepared-stuff:checked + .prepared-stuff-button .prepared-stuff__image {
	border-color: rgba(74, 179, 211, 1);
}
/*-- じゅんびするもの 名称 --*/
body.sansu .prepared-stuff__name {
	background-color: rgba(74, 179, 211, 0.4);
	border-color: rgba(74, 179, 211, 1);
}
/*-- じゅんびするもの ロールオーバー --*/
body:not(.mobile).sansu .prepared-stuff-button:hover .check__icon {
	border-color: rgba(74, 179, 211, 1);
}
/*-- じゅんびするもの アイコン --*/
body.sansu .prepared-stuff:checked + .prepared-stuff-button > .check__icon {
	border-color: rgba(74, 179, 211, 1);
	background-color: rgba(74, 179, 211, 1);
}
body.sansu .check__icon:after {
	border-color: rgba(74, 179, 211, 0.4);
}
/*-- 授業支援機能 ボタン --*/
body.sansu .button-assist {
	background-color: rgba(74, 179, 211, 1);
}
/*-- コンテンツメニュー リスト --*/
body.sansu .content_tag {
	background-color: rgba(74, 179, 211, 1);
}
/*-- コンテンツメニュー リスト 学年とページ数 --*/
body.sansu .movie-title-wrapper .page_num, body.sansu .movie-title-wrapper .grade_num {
	background-color: rgba(74, 179, 211, 1);
	color: rgba(249, 249, 249, 1);
}
/*-- 教科ごとの色分け 理科 --*/
body.sansu .headline_movie {
	border-color: rgba(158, 216, 245, 1);
}
/*-- 動画ページ　区切り線 --*/
body.sansu .headline_movie span {
	border-color: rgba(74, 179, 211, 1);
	color: rgba(74, 179, 211, 1);
}
/*-- 動画ページ　手順紹介 --*/
body:not(.mobile).sansu .grid-set:hover {
	border-color: rgba(158, 216, 245, 1);
}
/*-- 動画ページ　手順紹介 手順番号 --*/
body.sansu .job_num {
	background-color: rgba(74, 179, 211, 1);
}
/*-- 動画ページ　手順紹介 区切り線 --*/
body.sansu .play-time:before, body.sansu .play-time:after {
	border-color: rgba(74, 179, 211, 1);
}
/*-- 動画ページ　ヒーローエリア区切り線 --*/
body.sansu .intro-animation_wrap {
	border-color: rgba(74, 179, 211, 1);
}
/*-- 動画ページ 関連コンテンツ ページ番号 --*/
body.sansu .thumbnail_holder .page_num {
	background-color: rgba(74, 179, 211, 1);
}
body.sansu .scroll_holder:after {
	background-color: rgba(74, 179, 211, 1);
}
/*-- アイコン スクロールボタン、ページトップへ戻るボタン --*/
body.sansu ._scroll, body.sansu ._page-top {
	background-color: rgba(74, 179, 211, 1);
}
/*-- アニメーション 教科タイトル --*/
body.sansu .intro_text__line {
	background-color: rgba(74, 179, 211, 1);
}

@media only screen and (max-width: 441px) {
	/* コンテンツメニュー */
	body.sansu .content_tag .content-icon {
		background-color: rgba(74, 179, 211, 1);
	}
}
/*-- まとめ --*/
body.sansu .list-style_matome .content_tag {
	background-color: rgba(158, 216, 245, 1);
}
body.sansu .list-style_matome .content_tag .content-icon {
	background-color: rgba(74, 179, 211, 1);
}
body.sansu .list-style_matome .content_tag .content-icon {
	background-color: rgba(74, 179, 211, 1);
}
body.sansu .list-style_matome .content_tag .content_title p {
	/*color: rgba(74, 179, 211, 1);*/
	color: rgba(41, 88, 135, 1);
}
body.sansu .list-style_matome .content_tag .page_num {
	background-color: rgba(74, 179, 211, 1);
}
body.sansu .list-style_matome .content_tag .page_num span {
	color: rgba(249, 249, 249, 1);
}
body.sansu .content_tag:after {
	background-color: rgba(74, 179, 211, 1);
}
body.sansu .dt-assist .button-assist > span {
	background-color: rgba(74, 179, 211, 1);
}
body.sansu .dt-assist .button-assist span:after {
	background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(74, 179, 211, 1) 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgba(74, 179, 211, 1) 50.5%) no-repeat top right/50% 100%;
}

/*-- セクション タイトル 線 --*/
body.seikatsu .segment-text {
	border-color: rgba(214, 129, 71, 1);
}
/*-- セクション タイトル テキスト --*/
body.seikatsu .segment-text p,
body.seikatsu .segment-text span {
	color: rgba(214, 129, 71, 1);
}
/*-- 学年タブ ラッパー リスト --*/
body.seikatsu .grade-list_item__circle {
	border-color: rgba(214, 129, 71, 1);
	color: rgba(214, 129, 71, 1);
}
/*-- モーダル 閉じるボタン --*/
body.seikatsu .modal___close-button {
	border-color: rgba(214, 129, 71, 1);
}
body.seikatsu .modal___close-button .icon-close:before,
body.seikatsu .modal___close-button .icon-close:after {
	background-color: rgba(214, 129, 71, 1);
}
/*-- モーダル チェックアイコン --*/
body.seikatsu .check-icon:after {
	border-color: rgba(214, 129, 71, 1);
}
/*-- モーダル 見出し塗り --*/
body.seikatsu .discription__title {
	background: rgba(221, 187, 164, 1);
	border-left: solid 5px rgba(214, 129, 71, 1);
}
/*-- コンテンツアイコン塗り --*/
body.seikatsu .icon_disc .icon {
	background-color: rgba(214, 129, 71, 1);
}
/*-- ローダー プログレスバー --*/
body.seikatsu .pace .pace-progress {
	background: rgba(214, 129, 71, 1);
}
/*-- テキストボタン --*/
body.seikatsu .btn-text {
	border-color: rgba(214, 129, 71, 1);
	color: rgba(214, 129, 71, 1);
}
/*-- テキストボタン --*/
body:not(.mobile).seikatsu .btn-text:hover {
	border-color: rgba(214, 129, 71, 1);
    color: rgba(255, 255, 255, 1);
    background-color: rgba(214, 129, 71, 1);
}
/*-- ボタン --*/
body.seikatsu .btn-lg:after {
	background-color: rgba(214, 129, 71, 1);
}
body.seikatsu .btn-lg:before {
	border-color: rgba(214, 129, 71, 1);
}
/*-- じゅんびするもの --*/
body:not(.mobile).seikatsu .prepared-stuff + .prepared-stuff-button:hover .prepared-stuff__image, body.seikatsu .prepared-stuff:checked + .prepared-stuff-button .prepared-stuff__image {
	border-color: rgba(214, 129, 71, 1);
}
/*-- じゅんびするもの 名称 --*/
body.seikatsu .prepared-stuff__name {
	background-color: rgba(214, 129, 71, 0.4);
	border-color: rgba(214, 129, 71, 1);
}
/*-- じゅんびするもの ロールオーバー --*/
body:not(.mobile).seikatsu .prepared-stuff-button:hover .check__icon {
	border-color: rgba(214, 129, 71, 1);
}
/*-- じゅんびするもの アイコン --*/
body.seikatsu .prepared-stuff:checked + .prepared-stuff-button > .check__icon {
	border-color: rgba(214, 129, 71, 1);
	background-color: rgba(214, 129, 71, 1);
}
body.seikatsu .check__icon:after {
	border-color: rgba(214, 129, 71, 0.4);
}
/*-- 授業支援機能 ボタン --*/
body.seikatsu .button-assist {
	background-color: rgba(214, 129, 71, 1);
}
/*-- コンテンツメニュー リスト --*/
body.seikatsu .content_tag {
	background-color: rgba(214, 129, 71, 1);
}
/*-- コンテンツメニュー リスト 学年とページ数 --*/
body.seikatsu .movie-title-wrapper .page_num, body.seikatsu .movie-title-wrapper .grade_num {
	background-color: rgba(214, 129, 71, 1);
	color: rgba(249, 249, 249, 1);
}
/*-- 教科ごとの色分け 理科 --*/
body.seikatsu .headline_movie {
	border-color: rgba(221, 187, 164, 1);
}
/*-- 動画ページ　区切り線 --*/
body.seikatsu .headline_movie span {
	border-color: rgba(214, 129, 71, 1);
	color: rgba(214, 129, 71, 1);
}
/*-- 動画ページ　手順紹介 --*/
body:not(.mobile).seikatsu .grid-set:hover {
	border-color: rgba(221, 187, 164, 1);
}
/*-- 動画ページ　手順紹介 手順番号 --*/
body.seikatsu .job_num {
	background-color: rgba(214, 129, 71, 1);
}
/*-- 動画ページ　手順紹介 区切り線 --*/
body.seikatsu .play-time:before, body.seikatsu .play-time:after {
	border-color: rgba(214, 129, 71, 1);
}
/*-- 動画ページ　ヒーローエリア区切り線 --*/
body.seikatsu .intro-animation_wrap {
	border-color: rgba(214, 129, 71, 1);
}
/*-- 動画ページ 関連コンテンツ ページ番号 --*/
body.seikatsu .thumbnail_holder .page_num {
	background-color: rgba(214, 129, 71, 1);
}
body.seikatsu .scroll_holder:after {
	background-color: rgba(214, 129, 71, 1);
}
/*-- アイコン スクロールボタン、ページトップへ戻るボタン --*/
body.seikatsu ._scroll, body.seikatsu ._page-top {
	background-color: rgba(214, 129, 71, 1);
}
/*-- アニメーション 教科タイトル --*/
body.seikatsu .intro_text__line {
	background-color: rgba(214, 129, 71, 1);
}
@media only screen and (max-width: 441px) {
	/* コンテンツメニュー */
	body.seikatsu .content_tag .content-icon {
		background-color: rgba(214, 129, 71, 1);
	}
}
body.seikatsu .content_tag:after {
	background-color: rgba(214, 129, 71, 1);
}
body.seikatsu .dt-assist .button-assist > span {
	background-color: rgba(214, 129, 71, 1);
}
body.seikatsu .dt-assist .button-assist span:after {
	background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(214, 129, 71, 1) 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgba(214, 129, 71, 1) 50.5%) no-repeat top right/50% 100%;
}

/*-- セクション タイトル 線 --*/
body.taiiku .segment-text {
	border-color: rgba(128, 91, 133, 1);
}
/*-- セクション タイトル テキスト --*/
body.taiiku .segment-text p,
body.taiiku .segment-text span {
	color: rgba(128, 91, 133, 1);
}
/*-- 学年タブ ラッパー リスト --*/
body.taiiku .grade-list_item__circle {
	border-color: rgba(128, 91, 133, 1);
	color: rgba(128, 91, 133, 1);
}
/*-- モーダル 閉じるボタン --*/
body.taiiku .modal___close-button {
	border-color: rgba(128, 91, 133, 1);
}
/*-- モーダル 見出し塗り --*/
body.taiiku .discription__title {
	background: rgba(218, 170, 226, 1);
	border-left: solid 5px rgba(128, 91, 133, 1);
}
/*-- コンテンツアイコン塗り --*/
body.taiiku .icon_disc .icon {
	background-color: rgba(128, 91, 133, 1);
}
body.taiiku .modal___close-button .icon-close:before,
body.taiiku .modal___close-button .icon-close:after {
	background-color: rgba(128, 91, 133, 1);
}
/*-- モーダル チェックアイコン --*/
body.taiiku .check-icon:after {
	border-color: rgba(128, 91, 133, 1);
}
/*-- ローダー プログレスバー --*/
body.taiiku .pace .pace-progress {
	background: rgba(128, 91, 133, 1);
}
/*-- テキストボタン --*/
body.taiiku .btn-text {
	border-color: rgba(128, 91, 133, 1);
	color: rgba(128, 91, 133, 1);
}
/*-- テキストボタン --*/
body:not(.mobile).taiiku .btn-text:hover {
	border-color: rgba(128, 91, 133, 1);
    color: rgba(255, 255, 255, 1);
    background-color: rgba(128, 91, 133, 1);
}
/*-- ボタン --*/
body.taiiku .btn-lg:after {
	background-color: rgba(128, 91, 133, 1);
}
body.taiiku .btn-lg:before {
	border-color: rgba(128, 91, 133, 1);
}
/*-- じゅんびするもの --*/
body:not(.mobile).taiiku .prepared-stuff + .prepared-stuff-button:hover .prepared-stuff__image,
body.taiiku .prepared-stuff:checked + .prepared-stuff-button .prepared-stuff__image {
	border-color: rgba(128, 91, 133, 1);
}
/*-- じゅんびするもの 名称 --*/
body.taiiku .prepared-stuff__name {
	background-color: rgba(128, 91, 133, 0.4);
	border-color: rgba(128, 91, 133, 1);
}
/*-- じゅんびするもの ロールオーバー --*/
body:not(.mobile).taiiku .prepared-stuff-button:hover .check__icon {
	border-color: rgba(128, 91, 133, 1);
}
/*-- じゅんびするもの アイコン --*/
body.taiiku .prepared-stuff:checked + .prepared-stuff-button > .check__icon {
	border-color: rgba(128, 91, 133, 1);
	background-color: rgba(128, 91, 133, 1);
}
body.taiiku .check__icon:after {
	border-color: rgba(128, 91, 133, 0.4);
}
/*-- 授業支援機能 ボタン --*/
body.taiiku .button-assist {
	background-color: rgba(128, 91, 133, 1);
}
/*-- コンテンツメニュー リスト --*/
body.taiiku .content_tag {
	background-color: rgba(128, 91, 133, 1);
}
/*-- コンテンツメニュー リスト 学年とページ数 --*/
body.taiiku .movie-title-wrapper .page_num, body.taiiku .movie-title-wrapper .grade_num {
	background-color: rgba(128, 91, 133, 1);
	color: rgba(249, 249, 249, 1);
}
/*-- 教科ごとの色分け 理科 --*/
body.taiiku .headline_movie {
	border-color: rgba(218, 170, 226, 1);
}
/*-- 動画ページ　区切り線 --*/
body.taiiku .headline_movie span {
	border-color: rgba(128, 91, 133, 1);
	color: rgba(128, 91, 133, 1);
}
/*-- 動画ページ　手順紹介 --*/
body:not(.mobile).taiiku .grid-set:hover {
	border-color: rgba(218, 170, 226, 1);
}
/*-- 動画ページ　手順紹介 手順番号 --*/
body.taiiku .job_num {
	background-color: rgba(128, 91, 133, 1);
}
/*-- 動画ページ　手順紹介 区切り線 --*/
body.taiiku .play-time:before, body.taiiku .play-time:after {
	border-color: rgba(128, 91, 133, 1);
}
/*-- 動画ページ　ヒーローエリア区切り線 --*/
body.taiiku .intro-animation_wrap {
	border-color: rgba(128, 91, 133, 1);
}
/*-- 動画ページ 関連コンテンツ ページ番号 --*/
body.taiiku .thumbnail_holder .page_num {
	background-color: rgba(128, 91, 133, 1);
}
body.taiiku .scroll_holder:after {
	background-color: rgba(128, 91, 133, 1);
}
/*-- アイコン スクロールボタン、ページトップへ戻るボタン --*/
body.taiiku ._scroll, body.taiiku ._page-top {
	background-color: rgba(128, 91, 133, 1);
}
/*-- アニメーション 教科タイトル --*/
body.taiiku .intro_text__line {
	background-color: rgba(128, 91, 133, 1);
}
@media only screen and (max-width: 441px) {
	/* コンテンツメニュー */
	body.taiiku .content_tag .content-icon {
		background-color: rgba(128, 91, 133, 1);
	}
}
body.taiiku .content_tag:after {
	background-color: rgba(128, 91, 133, 1);
}
body.taiiku .dt-assist .button-assist > span {
	background-color: rgba(128, 91, 133, 1);
}
body.taiiku .dt-assist .button-assist span:after {
	background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(128, 91, 133, 1) 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgba(128, 91, 133, 1) 50.5%) no-repeat top right/50% 100%;
}

/**
 *
 * 白黒反転　個別調整
 * =================================================================== */
body.invert .logo_wrap {
	background-color: rgba(249, 249, 249, 1);
}
body.invert p,
body.invert span,
body.invert h4,
body.invert h5,
body.invert h6 {
	color: rgba(249, 249, 249, 1) !important;
}
body.invert .segment-text p,
body.invert .segment-text span {
	color: rgba(249, 249, 249, 1) !important;
}
body.invert .page_num, body.invert .grade_num {
	background-color: rgba(14, 42, 58, 1) !important;
}
@media only screen and (min-width: 442px) {
	body.invert .page_num, body.invert .grade_num {
		background-color: rgba(14, 42, 58, 1) !important;
		box-shadow: 0 0 0 1px rgba(249, 249, 249, 1) !important;
	}
}
body.invert .page_num span,
body.invert .grade_num span {
	color: rgba(249, 249, 249, 1) !important;
}
body.invert .intro_text__line {
	background-color: rgba(14, 42, 58, 1) !important;
}
/*-- 授業支援機能 ボタン --*/
body.invert .button-assist,
body.invert .content_tag {
	background-color: rgba(14, 42, 58, 1) !important;
}
body.invert .btn-text {
	color: rgba(249, 249, 249, 1) !important;
	border-width: 1px;
	border-color: rgba(249, 249, 249, 1) !important;
	border-style: solid;
	background-color: rgba(14, 42, 58, 1) !important;
}
/*-- コンテンツメニュー リスト --*/
body.invert .content_tag {
	background-color: rgba(14, 42, 58, 1) !important;
}
/*-- コンテンツメニュー リスト 学年とページ数 --*/
body.invert .movie-title-wrapper .page_num,
body.invert .movie-title-wrapper .grade_num {
	background-color: rgba(14, 42, 58, 1) !important;
}
body.invert .intro-animation_wrap {
	border-color: rgba(249, 249, 249, 1) !important;
}
body.invert ._scroll, body.invert ._page-top {
	background-color: rgba(249, 249, 249, 1) !important;
}
body.invert ._scroll:before,
body.invert ._page-top:before {
	border-top: solid 2px rgba(14, 42, 58, 1) !important;
	border-right: solid 2px rgba(14, 42, 58, 1) !important;
}
body.invert .segment-text {
	border-color: rgba(249, 249, 249, 1) !important;
}
body.invert .scroll_holder:after {
	background-color: rgba(249, 249, 249, 1) !important;
}
body.invert li:not(.is-current) .grade-list_item__circle {
	border-color: rgba(249, 249, 249, 1) !important;
	color: rgba(249, 249, 249, 1) !important;
}
body.invert .btn-lg:before {
	border-color: rgba(249, 249, 249, 1) !important;
}
body.invert .btn-lg:after {
	background-color: rgba(249, 249, 249, 1) !important;
}
body.invert .directory-column,
body.invert .directory-column-section-state,
body.invert a,
body.invert .footer-links,
body.invert .copy {
	color: rgba(249, 249, 249, 1) !important;
}
body.invert .movie-content_title p,
body.invert .play-time,
body.invert .closed-caption {
	color: rgba(249, 249, 249, 1) !important;
}
body.invert .sub-content ul li:nth-child(even) .grid-set {
	background-color: rgba(12, 32, 38, 1) !important;
}
body.invert .sub-content ul li:nth-child(odd) .grid-set {
	background-color: rgba(6, 26, 28, 1) !important;
}
body.invert .headline_movie,
body.invert .play-time:before,
body.invert .play-time:after,
body:not(.mobile).invert .grid-set:hover {
	border-color: rgba(249, 249, 249, 1) !important;
}
body.invert .headline_movie span {
	color: rgba(249, 249, 249, 1) !important;
	border-color: rgba(212, 212, 212, 1) !important;
}
body.invert .sub-pl-icon {
	background-color: rgba(249, 249, 249, 1) !important;
}
body.invert .sub-content ul li .job_num {
	color: rgba(249, 249, 249, 1) !important;
	background-color: rgba(14, 42, 58, 1) !important;
	border-color: rgba(249, 249, 249, 1) !important;
	border-width: 1px;
	border-style: solid;
}
body.invert .sub-content ul li:nth-child(even) .job_num {
	background-color: rgba(12, 32, 38, 1) !important;
}
body.invert .sub-content ul li:nth-child(odd) .job_num {
	background-color: rgba(6, 26, 28, 1) !important;
}
body.invert .thumbnail_holder figcaption p {
	color: rgba(249, 249, 249, 1) !important;
	background: rgba(6, 26, 28, 0.6) !important;
}
body.invert .link-web-content_wrap p {
	color: rgba(249, 249, 249, 1) !important;
}
body.invert .class-icon,
body:not(.mobile).invert .class-icon:hover {
	background-color: rgba(249, 249, 249, 1) !important;
}
body.invert .modal__content {
	background-color: rgba(14, 42, 58, 1) !important;
}
body.invert .modal___close-button {
	border-color: rgba(249, 249, 249, 1) !important;
}
body.invert .modal___close-button .icon-close:before,
body.invert .modal___close-button .icon-close:after {
	background-color: rgba(249, 249, 249, 1) !important;
}
body.invert .discription__title {
	background: rgba(12, 32, 38, 1) !important;
	border-left: solid 5px rgba(6, 26, 28, 1) !important;
}
body.invert .icon_disc .icon {
	background-color: rgba(14, 42, 58, 1) !important;
}
body.invert .modal__announce-content {
	background-color: rgba(14, 42, 58, 1) !important;
}
body.invert .web-content-icon_set {
	background-color: rgba(14, 42, 58, 1) !important;
}
body.invert .directory-column-section-state {
	background-color: rgba(12, 12, 12, 1) !important;
}
body.invert .link-book-style p {
	background-color: rgba(14, 42, 58, 1) !important;
}
body.invert .link-book-style {
	border-color: rgba(14, 42, 58, 1) !important;
}
body.invert .link-book-style:after {
	background: linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(14, 42, 58, 1) 50.5%) no-repeat top left/100% 100%;	
}
body.invert .directory-column-section-state:after {
	background-image: url("../images/icon/icon_link_invert.svg") !important;
}
body.invert .side-menu-wrapper {
	background-color: rgba(14, 42, 58, 1) !important;
}
body.invert #index_button {
	background-color: rgba(14, 42, 58, 1) !important;
}
body.invert .dt-assist .button-assist > span {
	background-color: rgba(14, 42, 58, 1) !important;
}
body.invert .dt-assist .button-assist span:after {
	background:
      linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(14, 42, 58, 1) 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgba(14, 42, 58, 1) 50.5%) no-repeat top right/50% 100%;
}
body.invert .dt-assist_announce,
body.invert .first-announce {
	background-color: rgba(14, 42, 58, 1) !important;
}

/**
 * Animate.css - http://daneden.me/animate
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2015 Daniel Eden
 * =================================================================== */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

body.invert, body.invert .dt-main, body.invert .dt-footer {
	/*background-color: rgba(55, 62, 76, 1);*/
	background-color: rgba(12, 12, 12, 1) !important;
}
body.invert .intro-animation_wrap {
	background-color: rgba(37, 60, 76, 1);
}

@-webkit-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 12.5px;
  }
  50% {
    height: 25px;
    width: 12.5px;
  }
}
@-moz-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 12.5px;
  }
  50% {
    height: 25px;
    width: 12.5px;
  }
}
@-ms-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 12.5px;
  }
  50% {
    height: 25px;
    width: 12.5px;
  }
}
@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 12.5px;
  }
  50% {
    height: 25px;
    width: 12.5px;
  }
}
@-webkit-keyframes check2 {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 15px;
  }
  50% {
    height: 30px;
    width: 15px;
  }
}
@-moz-keyframes check2 {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 15px;
  }
  50% {
    height: 30px;
    width: 15px;
  }
}
@-ms-keyframes check2 {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 15px;
  }
  50% {
    height: 30px;
    width: 15px;
  }
}
@keyframes check2 {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 15px;
  }
  50% {
    height: 30px;
    width: 15px;
  }
}
@keyframes okeffect {
  0% {
    opacity: 0;
    top: 20%;
  }
  75% {
    opacity: 1;
    top: 12%;
  }
  90% {
    opacity: 1;
    top: 12%;
  }
  100% {
    opacity: 0;
    top: 15%;
  }
}
@-webkit-keyframes _bounce {
  20%,53%,80%,from,to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes _bounce {
  20%,53%,80%,from,to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  -webkit-animation-name: _bounce;
  animation-name: _bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes attention {
  from {
    box-shadow: 0px 0px 0px 7px rgba(255, 241, 0, 0);

  }
  to {
    box-shadow: 0px 0px 0px 7px rgba(255, 241, 0, 0.6);
  }
}
@-ms-keyframes attention {
  from {
    box-shadow: 0px 0px 0px 7px rgba(255, 241, 0, 0);

  }
  to {
    box-shadow: 0px 0px 0px 7px rgba(255, 241, 0, 0.6);
  }
}
@keyframes attention {
  from {
    box-shadow: 0px 0px 0px 7px rgba(255, 241, 0, 0);

  }
  to {
    box-shadow: 0px 0px 0px 7px rgba(255, 241, 0, 0.6);
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: hidden;
    pointer-events: none;
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }
  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}
.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%,80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%,80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}
.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}
.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}
@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}
@-webkit-keyframes spin_reverse {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(-360deg); }
}
@keyframes spin_reverse {
	from { transform: rotate(0deg); }
	to { transform: rotate(-360deg); }
}

/* ルビテキストがIEでベースラインが異なる現象への対応 */
@media all and (-ms-high-contrast: none) {
	rt {
		-ms-transform: translateY(-3px);
	}
	.movie-content_title p:nth-child(1) {
		-ms-transform: translateY(8px);
	}
	.intro_text__line {
		padding: 23px 10px 10px 10px;
	}
	.button_double > span {
		padding: 2px 0 0 0px;
	}
}