@charset "utf-8";
/* CSS Document */
/*-------------------------------------------
ベースCSS
スマフォサイズ　350px*600px
----------------------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  cursor: pointer;
}
html {
  font-size: 62.5%;
  line-height: 1.6;
}
body {
  background-color: #E5DECA;
  color: #333;
  font-size: 1.6rem;
  line-height: 1.7;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  counter-reset: number;
}
section {
  margin: 0.5em auto;
  padding: 0 0 1em 0;
  width: 100%;
}
section a {
  display: block;
  transition: 0.2s;
}
section a:hover {
  box-shadow: 2px 2px 4px #562222;
}
h2 {
  font-size: 2.0rem;
  color: #FF873E;
  background: linear-gradient(180deg, #330000, #562222);
  /*box-shadow: 4px 2px 5px 1px #B2291C;*/
  margin: 0;
  padding: 5px 1em;
  border-left: 20px double #FF873E;
}
h3 {
  margin: 0;
  padding: 0.5em;
  color: #E5DECA;
  font-size: 1.8rem;
  background: linear-gradient(#22558A, #0A3956);
}
h4 {
  background: #A5D4AD;
  color: #3F5444;
  font-size: 2.4rem;
  margin: 0.2em 0 0;
  padding: 0.2em 0.5em
}
label {
  margin: 0.8em 0.5em 0.2em;
}
/*リスト*/
/*リンク無し*/
/*リンクあり*/
.link_list {
  margin: 0;
  padding: 0;
}
.detail_list {
  background: #fff;
  border: 1px solid #000;
  list-ftyle: none;
  margin: 0 auto;
}
/*アニメーションパラメータリスト*/
.animation_param_list {
  background: #fff;
  border: 1px solid #000;
  padding: 0;
}
.animation_param_list dt {
  background: #4A7664;
  color: #FFFCDB;
  margin: 0.5em 0 0.2em;
  padding: 0.2em 0.5em 0.1em;
}
.animation_param_list dt:first-child {
  margin: 0;
}
.animation_param_list dd {
  padding: 0 0.5em;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
/*h3*/
.form_title {
  width: 100%;
  margin: 1rem 0;
  padding: 1em;
  border-top: 1px solid #22558A;
  border-left: 10px double #22558A;
  border-bottom: 1px solid #22558A;
  border-right: 10px double #22558A;
  background: #fff;
}
/*h4*/
h4 {
  margin: 0;
  padding: 0 0.5em;
  color: #000;
  font-size: 1.8rem;
  border-top: 1px solid #22558A;
  border-left: 10px double #22558A;
  border-bottom: 1px solid #22558A;
  border-right: 10px double #22558A;
}
h5 {
  margin: 0;
  padding: 0 0.5em;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.detail_column_list{
    border:1px solid #4A7664;
}
.detail_column_list dt{
    background:#4A7664;
    color:#E5DECA;
    padding:0.5em;
}
.detail_column_list dd{
    margin-bottom:1em;
    padding:0.5em;
}
.detail_column_list dd li{
    border-bottom:1px dashed #4A7664;
}
.detail_column_list dd li:last-child{
    border-bottom:none;
}
.subtitle_list {
  position: relative;
}
.subtitle_list li {
  margin: 0 2rem;
  padding: 0;
  border-bottom: 2px dotted #ccc;
  position: relative;
}
.subtitle_list li a {
  display: block;
  margin: 0 1rem;
  padding: 1rem 2rem;
}
.subtitle_list li a:hover {
  background: #0A3956;
  color: #E5DECA;
}
.subtitle_list li::before {
  counter-increment: number 1;
  content: counter(number) " "; /* 表示形式を指定 */
  display: block;
  position: absolute;
  margin: 1rem;
  padding: 0;
}

/*----------------------------
table_type03
----------------------------*/
.table_type03 {
  table-layout: fixed;
}
.table_type03 th {
  margin: 0;
  padding: 0.5em;
  text-align: left;
  color: #E5DECA;
  border: 1px solid #ccc;
}
tr:first-child th {
  background: #7E9374;
}
tr:nth-child(2n) {
  background: #FFFCDB;
}
tr:nth-child(odd) th {
  background: #4A7664;
}
tr:nth-child(even) th {
  background: #7E9374;
}
/*----------------------------
table_type03
----------------------------*/
.table_type03 td {
  margin: 0;
  padding: 1em;
  border: 1px solid #ccc;
}
.table_type03 .theme {
  width: 14em;
}
/*table_type04*/
.table_type04 {
  table-layout: fixed;
}
.table_type04 th {
  width: 60%;
}
.table05 {
  display: block;
  width: 100%;
}
.table05 th {
  width: 30%;
}
.table05 td {
  width: 70%;
}
.table06 {
  display: table;
}
.table06 th:nth-child(1) {
  width: 20%;
}
.table06 th:nth-child(2) {
  width: 40%;
}
.table06 th:nth-child(3) {
  width: 40%;
}
.table06 td:nth-child(2) {
  font-size: 1.4rem;
}
.table07 {
  display: table;
}
.table07 th:nth-child(1) {
  width: 35%;
}
.table07 th:nth-child(2) {
  width: 35%;
}
.table07 th:nth-child(3) {
  width: 30%;
}
.table07 td:nth-child(2) {
  font-size: 1.4rem;
}
.table_image {
  background: #E5DECA;
}
caption {
  background: #E5DECA;
  color: #0D3B2B;
  margin: 1em 0;
  border-top: 1px solid #0D3B2B;
  border-right: 10px solid #0D3B2B;
  border-bottom: 1px solid #0D3B2B;
  border-left: 10px solid #0D3B2B;
}
/*--- form ---*/
form {
  padding: 0.5em;
  background: #fff;
}
input {
  margin: 0.5em;
  padding: 0.5em;
}
input:focus {
  background: transparent;
}
textarea {
  font-size: 1.6rem;
  padding: 0.5em;
}
textarea:focus {
  background: #CCC;
}
/*テキスト*/
.bold {
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 4px #000;
}
/*--- code ------ */
/* 全体を収めるブロック */
div.code-toolbar {
  position: relative;
}
pre {
  overflow-y: auto;
  white-space: pre-wrap;
}
code {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5em 0 0.5em 0.5em;
  font-family: "MS Pゴシック";
  text-align: left;
  font-size: 1.4rem;
  background: #0A3956;
  color: #fff;
  overflow: auto;
}
.red {
  color: #D6746A;
  text-shadow: 0 0 1px #F7BB9E;
  padding: 0 0.5em;
}
code .red {
  color: #D6746A;
  text-shadow: 0 0 1px #F7BB9E;
  background: none;
  padding: 0;
}
.green {
  color: #4A7664;
  border-radius: 20px;
  font-weight: bold;
  margin: 0.5em;
  padding: 0 0.5em;
  text-decoration: underline;
}
.under_green {
  text-decoration-line: underline;
}
code .green {
  color: #A5D4AD;
  margin: 0 0.5em;
  padding: 0;
  text-decoration: none;
}
.blue {
  color: #a0d8ea;
  background-color: #0068b7;
  padding: 0 0.5em;
  font-weight: bold;
}
code .blue {
  color: #00B5DE;
  background: #0A3956;
  margin: 0 0.5em;
  padding: 0;
  text-decoration: none;
}
.yellow {
  color: #F9C15F;
  background: #4E4449;
  padding: 0 1em;
}
code .yellow {
  color: #F9C15F;
  background: #0A3956;
}
.gray {
  color: #ced1d3;
  border-radius: 10px;
  margin: 0;
  padding: 0;
}
.violet {
  color: #c5B3D3;
}
/* 行数表示部分全体 */
.line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em;
  letter-spacing: -1px;
  border-right: 1px solid #999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* 各行数表示 */
.line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}
/* カウンター */
.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: #999;
  display: block;
  padding-right: 0.8em;
  text-align: right;
}
/*--- news_list --*/
.news_list {
  margin: 0;
  max-height: 490px;
  overflow-y: scroll;
}
.news_list li {
  background-color: #fff;
  border-left: 20px solid #470000;
  border-bottom: 2px dotted #470000;
}
.news_list li:last-child {
  border-bottom: none;
}
.news_list li a {
  display: block;
  color: #470000;
  margin: 0;
  padding: 0;
}
.news_list a:hover {
  color: #fff;
  padding: 0;
  transition: 0.5s;
}
.news_date_list {
  display: flex;
  flex-direction: row;
  width: 100%;
  position: relative;
}
.news_date {
  width: 6em;
  font-size: 2.4rem;
  font-weight: bold;
  margin: 0 0.5em;
}
.news_border {
  width: 80px;
  border-bottom: 4px solid #000;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -4px;
  left: 10.5em;
  color: #fff;
  overflow: hidden;
}
.news_column {
  display: flex;
  flex-direction: column;
  color: #000;
}
.news_column a {
  color: #000;
}
.news_column a:hover {
  color: #fff;
}
.news_image {
  display: block;
  width: 100%;
  height: auto;
  background: #ccc;
  aspect-ratio: 1/1;
}
.news_image img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.news_items {
  margin: 0;
}
.news_title {
  background: #0A3956;
  border: none;
  border-radius: 10px;
  color: #FFF7E8;
  font-size: 2.0rem;
  margin: 0;
  padding: 0;
  box-shadow: 2px 2px 10px #ccc;
}
.news_subtitle {
  background: #7E9374;
  color: #FFF7E8;
  margin: 0;
  padding: 0 0.5em;
  border-radius: 10px 0 0 0;
}
.news_maintitle {
  padding: 0 1em;
}
.news_honbun {
  width: 100%;
  background: #fff;
  border: none;
  font-size: 1.4rem;
  color: #4E4E4E;
  margin: 0 auto 1em;
  padding: 1em;
}
/*ヘッダー*/
.header {
  width: 100%;
}
.header_column {
  display: flex;
  flex-direction: column;
}
.header_left {
  width: 100%;
  margin: 0 auto;
}
.header_right {
  width: 100%;
}
/*----------------------------
グローバルメニュー
----------------------------*/
.global-nav-list {
  display: flex;
  flex-wrap: wrap;
  background: #E5DECA;
  border-radius: 12px;
  width: 90%;
  margin: 1em auto;
}
.global-nav-list li {
  width: 50%;
  line-height: 50px;
  text-align: center;
  border: 1px;
  font-size: 1.4rem;
}
.global-nav-list a {
  display: block;
  color: #0D3B2B;
}
.global-nav-list li:first-child a {
  border-radius: 8px 0 0 8px;
}
.global-nav-list li:last-child a {
  border-radius: 0 8px 8px 0;
}
.global-nav-list a:hover {
  background-color: #470000;
  color: #C77665;
  transition: 0.5s;
}
.global-nav-list li:first-child a:hover {
  border-radius: 10px 0 0 10px;
}
.global-nav-list li:last-child a:hover {
  border-radius: 0 10px 10px 0;
}
/*active*/
.global-nav-list .active a {
  background-color: #22558A;
  color: #E5DECA;
}
.global-nav-list .active a:hover {
  color: #E5DECA;
  font-weight: bold;
}
figcaption {
  text-align: center;
  background: #ccc;
}
/*-----------------------------------------------------
 クリアフィックス
--------------------------------------------------------*/
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
/*----------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
.header {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  background: linear-gradient(180deg, #0A3956, #22558A);
  align-item: center;
  position: relative;
}
#logo {
  width: 32%;
  min-width: 250px;
  min-height: 80px;
  display: block;
  margin: 10px auto;
  padding: 0;
  background: url("../images/animate_logo.png") no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
  grid-area: logo;
  vertical-align: middle;
}
#logo a {
  display: block;
  width: 250px;
  height: 80px;
  margin: 0;
  padding: 0;
}
#logo a:hover {
  background-color: #fff;
  opacity: 0.2;
  transition: 0.5s;
}
.about_site {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  text-align: right;
}
.about_site a {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 10px;
  background-color: #fff;
  color: #211F1F;
  border-radius: 0 0 0 10px;
}
.about_site a:hover {
  background-color: #ccc;
  color: #fff;
}
/*--- グローバルナビ -----------------*/
.gnav {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-template-rows: 30px 120px;
}
.gnav__item-inquiry, .gnav__item-recruit {
  grid-column: 1/-1;
  grid-row: 1;
  justify-self: end;
}
.gnav__item-inquiry {
  margin-right: calc(4em + 44px);
}
.nav-main ul {
  display: flex;
  flex-direction: row;
  width: 100%;
}
/*----------------------------
グローバルメニュー
----------------------------*/
.menu-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}
.menu-item {
  width: 50%;
  line-height: 50px;
  text-align: center;
  position: relative;
}
.menu-item a {
  display: block;
  background: #E5DECA;
  color: #562222;
  border-left: 1px solid #0A3956;
  z-index: 1;
  position: relative;
}
.menu-item .active {
  background: #22558A;
  color: #E5DECA;
  box-shadow: inset -4px 0px 4px rgba(0, 0, 0, 0.2);
}
.menu-item a:hover {
  color: #E5DECA;
}
.menu-item a:nth-child(3n+1) {
  border-top: 1px solid #0A3956;
}
.menu-item a::before {
  content: "";
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.3s ease-out;
}
.menu-item:first-child a {
  border-left: none;
}
.menu-item a:hover::before {
  width: 100%;
}
.menu-item:nth-child(1) a:before {
  background: #0D3B2B;
}
.menu-item:nth-child(2) a:before {
  background: #4A7664;
}
.menu-item:nth-child(3) a:before {
  background: #7E9374;
}
.menu-item:nth-child(4) a:before {
  background: #89C49F;
}
/*---------------------------------------
レイアウト
-----------------------------------------*/
#wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.main {
  display: flex;
  flex-direction: column;
  background: #FFF7E8;
}
.left_column {
  width: 100%;
  background: #fff;
  margin: 0 auto;
  padding: 0;
}
.left_column p {
  margin: 0;
  padding: 0 0.5em;
}
.left_column video {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.left_column img{
    width:100%;
    height:auto;
}
.right_column {
  width: 100%;
  background: linear-gradient(180deg, #470000, #C77665);
}
.column {
  width: 100%;
  background: #E5DECA;
  margin: 0 auto;
  padding: 0.5;
}
.column a {
  display: block;
  padding: 0.5em 1em;
  color: #4A7664;
  font-weight: bold;
}
.column a::before {
  content: '▼ ';
}
.column a:hover {
  color: #330000;
  padding: 0.5em 1em;
  box-shadow: 2px 2px 6px #000;
  transition: all 0.3s;
}
.column a:hover::before {
  content: '→ ';
}
.column img {
  display: block;
  margin: 0.5em auto;
  border: 1px solid #0A3956;
  box-shadow: 1px 1px 5px #22558A;
}
/*---------------------------------------
メイン
-----------------------------------------*/
.main_canvas {
  width: 100%;
  background: #fff;
}
.main_canvas img {
  width: 100%;
  margin: 0 auto;
}
.main_visual {
  margin: 0 auto;
  padding: 0;
}
.main_visual img {
  width: 100%;
  margin: 0 auto;
}
.gallery_column {
  background: #7E9374;
  margin: 0;
  padding: 0.5em;
  text-align: left;
}
.gallery_title {
  margin: 0 0.5em;
  padding: 0;
}
.gallery_column p {
  padding-left: 2em;
}
.mainvisual_column {
  display: flex;
  flex-direction: column;
  position: relative;
}
/*チュートリアル*/
.tutorial_column {
  margin: 0;
  padding: 0;
}
.tutorial_column li {
  padding: 0.5em;
}
.tutorial_image {
  display: block;
  margin: 0.5em auto;
  padding: 0;
  border: 4px solid #0D3B2B;
}
.tutorial_video {
  display: block;
  margin: 0 auto;
  text-align: center;
}
/*----
テーブル
---*/
.sticky {
  position: sticky;
  top: 0;
  left: 0;
  border-top: none;
}
.sticky::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #4A7664;
  z-index: -1;
}
/*th 30%, td 70%*/
.table_3_7 th {
  width: 30%;
}
.table_3_7 td {
  width: 70%;
}
/*th固定テーブル*/
.sticky_table th, .sticky_table td {
  white-space: nowrap
}
.screen_size_list {
  width: 100%;
  border: 1px solid #0D3B2B;
  margin: 0 auto;
}
.screen_size_list tr:nth-child(odd) td {
  background: #FFF7E8;
  color: #562222;
}
.screen_size_list tr:nth-child(even) td {
  background: #E5DECA;
  color: #562222;
}
.screen_size_list th {
  background: #7E9374;
  color: #E5DECA;
  text-shadow: 0px 0px 5px #0D3B2B;
  text-align: center;
  border: 1px solid #0D3B2B;
}
.screen_size_list th:first-child, .screen_size_list td:first-child {
  width: 40%;
  min-width: 100px;
}
.screen_size_list td {
  color: #0D3B2B;
  text-align: center;
  border: 1px solid #0D3B2B;
  word-break: break-word;
}
.keyword_table {
  width: 100%;
  border-collapse: collapse;
}
.keyword_table th {
  background: #0A3956;
  color: #E5DECA;
  text-shadow: 1px 1px 2px #0D3B2B;
  text-align: center;
  border: 1px solid #0D3B2B;
  padding: 0.5em;
}
.keyword_table tr:nth-child(odd) td {
  background: #FFF7E8;
  color: #562222;
}
.keyword_table tr:nth-child(even) td {
  background: #E5DECA;
  color: #330000;
}
.keyword_table td {
  text-align: center;
  border: 1px solid #0D3B2B;
}
.keyword_table th:first-child, .keyword_table td:first-child {
  width: 40%;
  min-width: 100px;
}
.keyword_table th:nth-child(2), .keyword_table td:nth-child(2) {
  padding: 0.5em;
  text-align: left;
}
/*コラムテーマ*/
.column_theme {
  display: flex;
  flex-direction: column;
  background: #4A7664;
  padding: 0 1em;
  position: relative;
}
.column_theme_image {
  width: 100%;
  height: auto;
}
.column_theme_image img {
  width: 100%;
  mix-width: 300px;
}
.theme_honbun {
  width: 100%;
  margin: 1em auto;
  padding: 1em;
  background: #FFF;
}
.theme_honbun dt {
  background: #4A7664;
  color: #E5DECA;
  padding: 0 1em
}
/*プロフィール*/
.profile_table_column table {
  width: 100%;
}
.profile_table_column, .profile_table_column tr, .profile_table_column th, .profile_table_column td {
  display: block;
}
.profile_table_column th {
  min-width: 4em;
  color: #E5DECA;
  text-shadow: 1px 1px 2px #22558A;
  padding: 1em;
}
.profile_table_column tr:first-child th {
  background: #0A3956;
  border: 1px solid #ccc;
}
.profile_table_column tr:nth-child(2n) th {
  background: #22558A;
  border: 1px solid #ccc;
}
.profile_table_column tr:nth-child(3n) th {
  background: #0A3956;
  border: 1px solid #ccc;
}
.profile_table_column td {
  text-align: center;
  padding: 0.5em;
  border: 1px solid #ccc;
  line-height: 40px;
}
.profile_table_column tr:first-child td {
  background: #0A3956;
  border: 1px solid #ccc;
  color: #fff;
}
.profile_table_column tr:nth-child(2n) td {
  background: #22558A;
  border: 1px solid #ccc;
  color: #fff;
}
.profile_table_column tr:nth-child(3n) td {
  background: #0A3956;
  border: 1px solid #ccc;
  color: #fff;
  line-height: 40px;
}
/*リスト*/
.basic_paragram {
  font-size: 2.0rem;
  padding: 1em;
  background: #E5DECA;
}
.basic_list {
  margin: 0 0.2em 1em;
  padding: 0;
  background: #E5DECA;
}
.basic_list li {
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px dashed #562222;
  position: relative;
}
.basic_list li:hover {
  color: #E5DECA;
  background: #4A7664;
}
.basic_list li:nth-child(even) {
  background: #FFF7E8;
}
.basic_list li:hover:nth-child(even) {
  background: #4A7664;
}
.basic_list li:last-child {
  border-bottom: none;
}
.basic_list li img {
  display: block;
  width: 100%;
}
.basic_list li a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1em 4rem;
  color: #562222;
}
.basic_list li a:hover {
  background: #4A7664;
  color: #E5DECA;
  transition: 0.2s;
}
.basic_list dt {
  background: #0D3B2B;
  border: 1px solid #0D3B2B;
  color: #E5DECA;
  padding: 0.5em;
}
/*メモリスト*/
.column_items {
  margin: 0;
  padding: 0;
}
.memo_list li {
  padding-left: 1rem;
}
.memo_list dd {
  margin: 0;
  padding: 0;
}
.list_item a {
  width: 100%;
  height: auto;
  margin: 0 1em;
  padding: 0;
}
.list_item a:hover {
  background: #FF873E;
  transition: 0.4s;
}
.list_item dt {
  padding: 0 0.5em;
}
/*---------------------------------------
footer
-----------------------------------------*/
#footer {
  clear: both;
  width: 100%;
  min-height: 100px;
  background: linear-gradient(180deg, #0D3B2B, #4A7664);
  color: #E5DECA;
  text-align: center;
  margin: 0;
  padding: 1em 0;
  font-size: 1.6rem;
}
.footer-navi {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.footer-navi li {
  width: 94%;
  margin: 0 auto;
}
.footer-navi li a {
  display: block;
  font-size: 1.6rem;
  color: #E5DECA;
  margin: 20px 0;
  padding: 10px 10px;
  border: 2px solid #4A7664;
  border-radius: 20px;
}
.footer-navi li a:hover {
  font-size: 1.6rem;
  border-left: 10px solid #FF873E;
  border-right: 10px solid #FF873E;
  border-bottom: 2px dotted #ff873E;
  color: #FF873E;
  transition: 0.3s;
}
.footer-navi .active a {
  width: 100%;
  background-color: #7E9374;
  color: #003B2B;
  font-weight: bold;
  transition: 0.3s;
}
.footer-navi .active a:hover {
  background-color: #470000;
  color: #DA313B;
  border: 2px solid #B2291C;
  border-radius: 20px;
  transition: 0.3s;
}
/*---------------------------------------
サンプル画像
-----------------------------------------*/
#sample-image_list {
  margin: 0;
}
.sample-images {
  background-color: #4A7664;
  margin: 0 auto;
  padding: 0;
  font-size: 0;
}
.sample-image {
  display: flex;
  flex-wrap: wrap;
}
.sample-image li {
  width: 31.3%;
  height: auto;
  margin: 1%;
  padding: 0;
}
.sample-image li a {
  width: 31.3%;
  height: auto;
  margin: 0;
  padding: 0;
}
.sample-image li a:hover {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.sample-image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
}
.sample-image img:hover {
  opacity: 0.5;
  border: 10px solid #B2291C;
  transition: 0.3s;
}
/*----------------------------------------------------------
フローティングメニュー
------------------------------------------------------------*/
.floating_menu {
  width: 200px;
  height: 100%;
  text-align: right;
  margin-left: -100px;
  background-color: #333;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.floating_menu ul {
  margin: 100px 100px 0 0;
  opacity: 1;
}
.floating_menu li a {
  display: block;
  width: 200px;
  opacity: 1;
  margin-left: -250px;
  padding: 10px;
  color: #FF873E;
  background-color: #111;
  border-bottom: solid 1px #CCC;
}
.floating_menu li a:hover {
  opacity: 1;
  background-color: #CCC;
  padding: 10px 20px;
  font-weight: bold;
  transition: 0.5s;
}
/*-----------------------------------------
チュートリアル
-------------------------------------------*/
#tutorial {
  background-color: #ccc;
}
.tutorial-stage {
  background-color: #CCC;
  margin: 0 auto;
  padding: 0;
  font-size: 0;
}
.tutorial-column {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  color: #0D3B2B;
}
.tutorial-column .kizi {
  width: 23%;
  margin: 1%;
}
.tutorial-column .kizi a:hover {
  transition: 0.3s;
}
.tutorial-image {
  width: 100%;
  margin: 0;
  padding: 0;
}
.tutorial-text {
  margin: 0;
  padding: 5px;
  font-size: 1.8rem;
  background-color: #ffffff;
  text-align: left;
}
/*-------------------------------------------
制作物
---------------------------------------------*/
.production-stage {
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-image: url("../images/wood.png");
}
.production-movie {
  width: 50%;
  height: auto;
  border: 4px solid #000;
  margin: 0 auto;
  padding: 0;
  color: #ccc;
  font-size: 2.0rem;
}
.production-movie video {
  display: block;
  width: 50%;
  height: auto;
  margin: 20px auto;
}
.production-images {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #7E9374;
  width: 100%;
  height: auto;
  margin: 0 auto 20px auto;
  padding: 0;
}
.production-images li {
  float: left;
  width: 31.45%;
  height: auto;
  text-align: center;
  border: 1px solid #CCC;
  background-color: #0A3956;
  font-size: 2.4rem;
  margin: 10px;
}
.production-images a img {
  width: 100%;
  height: auto;
}
.d-animestore {
  color: #E5DECA;
}
.d-animestore dt {
  margin: 0.5em;
  padding: 0.5em 1em;
  border-top: 1px solid #B2291C;
  border-left: 10px solid #B2291C;
  border-bottom: 1px solid #B2291C;
  background: #E5DECA;
  color: #0A3956;
}
.d-animestore dd {
  margin: 0.5em 1em;
  padding: 0.5em 1em;
}
.profile_table_column {
  margin: 0;
  padding: 0;
}
.profile_table {
  margin: 0;
  padding: 0;
}
.profile_image_column {
  display: block;
  margin: 1em auto;
  text-align: center;
  background: linear-gradient(#B2291C, #470000);
}
.profile-image {
  max-width: 280px;
  text-align: center;
  margin: 0 auto;
}
/*パソコンスペック*/
.pc_spec {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.pc_spec dt {
  width: 40%;
  text-align: right;
  padding: 0 1em 0 0;
  border-right: 1px solid #ccc;
}
.pc_spec dd {
  width: 60%;
  padding: 0 0.5em;
  text-align: left;
  text-indent: 0.5em;
}
/*----------------------------------
トップに戻る
------------------------------------*/
#toTop {
  position: fixed;
  width: 80px;
  height: 80px;
  right: 20px;
  bottom: 20px;
  opacity: 0;
  display: none;
}
#toTop:hover {
  opacity: 1;
}
#toTop.show {
  display: block;
  opacity: 0.5;
  -webkit-animation: fadeInUp 0.5s ease-in-out forwards;
  animation: fadeInUp 0.5s ease-in-out forwards;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 0.6;
    transform: translateY(0);
  }
}
#toTop.hide {
  display: block;
  bottom: 15px;
  opacity: 0.2;
  animation: fadeOutDown 0.5s ease-in-out forwards;
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
/*-----------------------------------------------------------------
開発環境
-------------------------------------------------------------------*/
#device {
  background-color: #7E9374;
  color: #E5DECA;
  padding: 0 0 10px 0;
}
/*-------------------------------
画面サイズ
----------------*/
.screen_size {
  border-collapse: collapse;
  margin: 10px auto;
  width: 96%;
}
.screen_size th, .screen_size td {
  padding: 10px;
  border: 1px solid #808080;
}
.screen_size th {
  background-color: #008000;
  color: #fff;
}
.screen_size td {
  text-align: right;
  background-color: #fff;
  color: #000;
}
/*---------------------------
	サムネイル
-----------------------------*/
#thumnail {
  width: 100%;
  background-color: #ccc;
  position: relative;
}
.thumnail_list {
  font-size: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-item: center;
}
.thumnail_list li {
  width: 23%;
  height: auto;
  margin: 1%;
}
.thumnail_list a img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
.thumnail_list img:hover {
  width: 94%;
  height: auto;
  border: 4px solid #DA313B;
  transition: 0.3s;
}
/*---------------------------------------------
slide
-----------------------------------------------*/
#slide {
  position: relative;
  overflow: hidden;
  height: 360px;
}
#slide ul {
  position: absolute;
  width: 5120px;
}
#slide li {
  float: left;
  width: 640px;
  list-style-type: none;
}
#slide li img {
  width: 640px;
  height: 360px;
}
button {
  border: solid 1px #000;
  background: #ccc;
  border-radius: 4px;
  margin: 0.5em;
  padding: 0.2em 0.5em;
  transition: opacity .2s;
}
button:focus {
  border: solid 1px #FFF;
}
button:hover {
  border: 2px solid #000;
}
#prevBtn {
  position: absolute;
  top: 225px;
  left: 20px;
  opacity: 0.8;
}
#nextBtn {
  position: absolute;
  top: 225px;
  left: 460px;
  opacity: 0.8;
}
/*----------------------------------------
ローディング画面
------------------------------------------*/
#loading {
  transition: all 1s;
  background-color: #ddd;
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0.5;
}
.spinner {
  width: 200px;
  height: 200px;
}
.loaded {
  opacity: 0;
  visibility: hidden;
}
.gallery {
  display: flex;
  flex-direction: column;
  position: relative;
}
.gallery_video {
  width: 100%;
}
.gallery_video video {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}
.gallery_column {
  width: 100%;
  background: #7E9374;
  margin: 0 auto;
  padding: 0.5em 0;
}
/*---
jQuery
---*/
#typo {
  width: 100%;
  min-height: 360px;
  margin: 10px 0 0 0;
  padding: 0;
  background: #22558A;
  position: relative;
  top: 0;
  left: 0;
}
#typo .inner {
  margin: 0 auto;
  padding: 0;
  font-size: 5.0rem;
  font-weight: bold;
  text-align: center;
  color: #E5DECA;
  position: absolute;
  top: 0;
  left: 100px;
}
.column_list {
  width: 100%;
  min-width: 300px;
  margin: 0 auto;
  background: #FFF7E8;
}
.column_list p {
  background: #fff;
}
.column_list img {
  display: block;
  margin: 0.5em auto;
  box-shadow: 1px 1px 5px #22558A;
}
.column_list pre {
  width: 100%;
}
.column_list code {
  width: 100%;
}
.column_list li {
  margin: 0;
  padding: 0.5em;
  border-bottom: 1px dotted #562222;
  background: #E5DECA;
}
.column_list li:last-child {
  border-bottom: none;
}
.column_list a {
  display: block;
  margin: 0;
  padding: 0.5em;
  color: #562222;
  transition: 0.5s;
}
.column_list a::before {
  content: '▼ ';
  margin: 0;
  padding: 0;
}
.column_list a:hover {
  padding: 0.5em;
  background: #FFF7E8;
  color: #470000;
  transition: 0.5s;
}
.column_list a:hover::before {
  content: '⇒ ';
  margin: 0;
  padding: 0;
}
.column_list dt {
  margin: 0;
  padding: 0 0.5em;
  background: #22558A;
  color: #E5DECA;
  font-size: 2.0rem;
  line-height: 60px;
}
.column_list dd {
  margin: 0.5em 0;
  padding: 0 0.5em;
  background: #E5DECA;
}
.column_list dd ul {
  margin: 0;
}
.column_list dd li {
  border-left: 10px solid #22558A;
  border-bottom: 1px dashed #22558A;
  margin: 0;
  padding: 0.5em;
}
.column_list dd li a {
  display: block;
  padding: 0;
}
.column_list dd li a:hover {
  background: #0D3B2B;
  color: #E5DECA;
  padding: 0 1em;
  transition: 0.5s;
}
.column_list dd video {
  width: 100%;
  min-width: 200px;
}
.package_column_list li {
  margin: 0;
  padding: 0 1em;
  border-left: 1px solid #0A3956;
  border-right: 1px solid #0A3956;
  border-bottom: 1px dotted #0A3956;
}
.flash_column_list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px dotted #ccc;
  background: #E5DECA;
}
.flash_column_list li a {
  display: block;
  padding: 1em 0;
}
.flash_column_list li a::before {
  content: '▼ ';
  margin: 0;
  padding: 0;
}
.flash_column_list li a:hover {
  background: #FFF7E8;
  color: #E5DECA;
  transition: 0.6s;
}
.flash_column_list li a:hover::before {
  content: '⇒ ';
  margin: 0;
  padding: 0;
}
.flash_column_list li:last-child {
  border-bottom: none;
}
.kadai_column_list {
  width: 100%;
}
.kadai_column_list li a {
  display: block;
  padding: 0.5em 1em;
  transition: 0.3s;
}
.kadai_column_list li a::after {
  content: ' >';
}
.kadai_column_list li a:hover {
  background: #7E9374;
  color: #E5DECA;
}
.kadai_column_list li a:hover::after {
  content: ' ↓';
}
.output {
  display: inline-block;
  margin: 1em 0 0 0;
  padding: 0.5em;
  border: 1px solid #22558A;
  width: 100%;
  background: #0A3956;
  color: #E5DECA;
}
.sorotani_column_list li:before {
  content: "・";
}
.animate_column_list li:before {
  content: "・";
}
.define_column_list {
  margin: 0 0 0.5em 0;
  padding: 0;
}
.define_column_list dt {
  background: #22558A;
  color: #E5DECA;
  padding: 0.5em 1em;
}
.define_column_list dd {
  background: #E5DECA;
  padding: 0.5em;
}
.define_table {
  margin: 0;
  padding: 0;
}
.define_column_list a {
  display: block;
  color: #0A3956;
  padding: 1em 0.5em;
  font-weight: normal;
}
.define_column_list dd a:before {
  content: '▼ ';
}
.define_column_list dd a:hover {
  padding: 1em 1em;
  background: #0A3956;
  color: #E5DECA;
  transition: 0.5s;
}
.define_column_list dd a:hover:before {
  content: '⇒ ';
}
.define_column_list dd + dd {
  border-top: 1px dashed #0A3956;
}
/*---- video -----*/
.main_video {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}
.main_video video {
  width: 100%;
  min-width: 350px;
  height: auto;
}
.movie {
  width: 100%;
  min-width: 300px;
  margin: 0 auto;
  padding: 0;
}
.movie video {
  width: 100%;
  min-width: 300px;
  margin: 0 auto;
  padding: 0;
}
.video_column {
  width: 96%;
  min-width: 280px;
  margin: 0.5em auto;
  padding: 0.5em;
  background: #4A7664;
  color: #E5DECA;
  text-shadow: 1px 1px 1px #0D3B2B;
}
.lecture_list {
  padding: 0.5em 0;
}
.lecture_list li {
  background: #fff;
  color: #0A3956;
  border: 1px solid #0D3B2B;
  margin: 0.5em;
}
.lecture_list li a {
  display: block;
  padding: 0.5em;
}
.lecture_list li a:hover {
  background: #7E9374;
  color: #fff;
  transition: 1s;
}
.tutrial_list {
  margin: 1em;
}
.tutrial_list dt {
  background: #4A7664;
  color: #E5DECA;
  border-left: 20px double #0D3B2B;
  margin: 0;
  padding: 0.5em 1em;
}
.tutrial_list dd {
  border-left: 5px solid #0D3B2B;
  margin: 0 0 0 1em;
}
.tutrial_list li {
  border-bottom: 1px dashed #0D3B2B;
}
.explanation {
  background: #E5DECA;
  margin: 0.5em 1em 1em 1em;
}
.explanation_honbun {
  background: linear-gradient(180deg, #B2291C, #470000);
  border: 4px solid #0D3B2B;
}
.explanation li + li {
  border-top: 1px dashed #22558A;
}
/*カラーコード一覧*/
.honbun_column td:nth-child(2n) {
  width: 100%;
  height: auto;
}
.color_icon {
  width: 100%;
  height: auto;
}
.color_icon_base {
  min-width: 150px;
  color: #000;
  background: #FFF7E8;
}
.color_icon_border {
  min-width: 150px;
  color: #fff;
  background: #562222;
}
.flash_base {
  min-width: 150px;
  color: #fff;
  background: #330000;
}
.flash_font {
  min-width: 150px;
  color: #000;
  background: #FF873E;
}
.flash_font-2 {
  min-width: 150px;
  color: #fff;
  background: #DA313B;
}
.animate_base {
  min-width: 150px;
  color: #fff;
  background: #00005B;
}
.animate_font {
  min-width: 150px;
  background: #A3A3E8;
}
.animate_font-2 {
  min-width: 150px;
  color: #fff;
  background: #7B7BDF;
}
.site-color-table {
  width: 100%;
  height: auto;
  table-layout: fixed;
  margin: 10px auto;
  border-collapse: collapse;
  background: #fff;
}
.image_genre {
  table-layout: fixed;
}
.image_genre th {
  width: 50%;
  min-width: 150px;
}
.image_genre td {
  width: 50%;
  min-width: 150px;
}
.site-color_no-1 {
  background: #B2291C;
}
.site-color_no-2 {
  background: #22558A;
}
.site-color_no-3 {
  background: #4A7664;
}
.site-color_no-4 {
  background: #C77665;
}
.site-color_no-5 {
  background: #E5DECA;
}
.site-color_no-6 {
  background: #7E9374;
}
.site-color_no-7 {
  background: #470000;
}
.site-color_no-8 {
  background: #0A3956;
}
.site-color_no-9 {
  background: #0D3B2B;
}
/*肌色*/
.character_color {
  width: 100%;
  height: auto;
  table-layout: fixed;
  margin: 10px auto;
  border-collapse: collapse;
  background: #fff;
  color: #000;
  text-shadow: 1px 1px 5px #ffffff, 1px 1px 5px #ffffff, 1px 1px 5px #ffffff, 1px 1px 5px #ffffff;
  font-size: 1.2rem;
  font-weight: bold;
}
.character_color td {
  margin: 0;
  padding: 0;
  line-height: 50px;
}
.character_color_vol1_1 {
  background: #FDF6E9;
}
.character_color_vol1_2 {
  background: #FCE3CD;
}
.character_color_vol1_3 {
  background: #F7BB9E;
}
.character_color_vol1_4 {
  background: #F3A88C;
}
.character_color_vol2_1 {
  background: #FDF5E0;
}
.character_color_vol2_2 {
  background: #FBD9BF;
}
.character_color_vol2_3 {
  background: #F8C2A2;
}
.character_color_vol2_4 {
  background: #F29EA2;
}
.character_color_vol3_1 {
  background: #FFFCDB;
}
.character_color_vol3_2 {
  background: #EEAB55;
}
.character_color_vol3_3 {
  background: #E0815E;
}
.character_color_vol3_4 {
  background: #D6746A;
}
.character_color_vol4_1 {
  background: #FBE1C1;
}
.character_color_vol4_2 {
  background: #F7CEAE;
}
.character_color_vol4_3 {
  background: #FFA978;
}
.character_color_vol4_4 {
  background: #C8714B;
}
/*神田多生_肌色*/
.kanda_color_skin_1 {
  background: #FBD9BF;
}
.kanda_color_skin_2 {
  background: #EAA484;
}
/*髪色*/
.hair_color {
  table-layout: fixed;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
}
.hair_color th {
  line-height: 0.5rem;
}
.hair_color td {
  padding: 1rem 0 1rem 0.5rem;
  line-height: 50px;
}
.hair_color_vol1_1 {
  background: #A5D4AD;
  color: #000;
}
.hair_color_vol1_2 {
  background: #89C49F;
  color: #000;
}
.hair_color_vol1_3 {
  background: #3B5E66;
}
.hair_color_vol1_4 {
  background: #3F5444;
}
.kanda_color_hair_1 {
  background: #7EC5AF;
}
.kanda_color_hair_2 {
  background: #599A87;
  color: #fff;
}
.kanda_color_hair_3 {
  background: #3F5444;
  color: #fff;
}
/*眼*/
.eye_color_vol1_1 {
  background: #C7ADB6;
  color: #000;
}
.eye_color_vol1_2 {
  background: #DA527E;
}
.eye_color_vol1_3 {
  background: #941D3D;
  color: #E5DECA;
}
.eye_color_vol1_4 {
  background: #31080C;
  color: #E5DECA;
}
.dress_color_vol1_1 {
  background: #944D5D;
  color: #E5DECA;
}
.dress_color_vol1_2 {
  background: #7B2D34;
  color: #E5DECA;
}
.dress_color_vol1_3 {
  background: #602734;
  color: #E5DECA;
}
.dress_color_vol1_4 {
  background: #491C29;
  color: #E5DECA;
}
.kanda_color_dress_1 {
  background: #DA313B;
  color: #fff;
}
.kanda_color_dress_2 {
  background: #CB242C;
  color: #fff;
}
.kanda_color_dress_3 {
  background: #FAE5F1;
  color: #000;
}
.kanda_color_dress_4 {
  background: #D6BF37;
  color: #000;
}
.kanda_color_dress_5 {
  background: #FFFFCC;
  color: #000;
}
.kanda_color_dress_6 {
  background: #330000;
  color: #FFF;
}
.kanda_color_dress_7 {
  background: #454626;
  color: #fff;
}
/*ぬえさぶろうの色*/
.nue_skin {
  background: #FCE3CD;
}
.nue_skin2 {
  background: #C99232;
  color: #2C0100f;
}
.nue_skin3 {
  background: #2C0100;
  color: #ffffff;
}
.nue_hair {
  background: #E78E2F;
}
.nue_pants {
  background: #23322E;
  color: #fff;
}
.nue_pants2 {
  background: #CCCCCC;
}
.nue_canvas {
  background: #FFFFCC;
}
/*白*/
.white01 {
  background: #FBFAF3;
}
.white02 {
  background: #F8F5E3;
}
.white03 {
  background: #FFFFFC;
}
.white04 {
  background: #FBFDFF;
}
/*パンくずリスト*/
.bread_list {
  background: #fff;
}
.bread_list li {
  display: inline-block;
  margin: 0.5em 0;
  padding: 0;
  background: #fff;
}
.bread_list li a {
  padding: 0.5em;
}
.bread_list li a:hover {
  color: #E5DECA;
  background: #0D3B2B;
}
.bread_list li a:first-child::after {
  content: '>>';
  color: #000;
  padding: 0 1em;
}
.bread_list li a:hover:first-child::after {
  content: '>>';
  color: #E5DECA;
  padding: 0 1em;
}
/*チュートリアルリスト*/
.tutorial-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: #fff;
}
.tutorial-list .work-box {
  width: 96%;
  background: #fff;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 10px #333;
}
.work-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.work-box p {
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.work-box p a {
  display: block;
  width: 60%;
  text-align: center;
  margin: 1em auto;
  padding: 0;
  background: #E5DECA;
  border-radius: 1em;
  color: #E5DECA;
}
.work-box a:hover {
  background: #7E9374;
  color: #E5DECA;
  transition: 0.4s;
}
/*記事本文*/
.tutrial_group {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #FFF;
  margin: 0;
  padding: 0;
}
.tutrial_title {
  margin: 0 0 0 1em;
  padding: 0.5em 0.6em 0;
  border-bottom: 2px solid #562222;
  font-size: 2.0rem;
}
.tutrial_honbun {
  width: 100%;
  height: auto;
  margin: 2em 0 0 0;
  padding: 0;
}
.tutrial_honbun p {
  background: #fff;
}
.work_button a {
  display: block;
  width: 80%;
  height: 40px;
  line-height: 40px;
  border: 1px solid #470000;
  border-radius: 10px;
  background: #FFF7E8;
  margin: 0.5em auto;
  opacity: 1;
  color: #562222;
  font-size: 2.0rem;
  text-align: center;
}
.work_button a:hover {
  width: 90%;
  height: 40px;
}
/*テーブルレイアウト*/
.software_table {
  width: 96%;
  margin: 0 auto;
  table-layout: fixed;
  border-collapse: collapse;
}
.software_table th {
  color: #E5DECA;
  text-shadow: 0 0 5px #0D3B2B;
}
/*広告バナー*/
.cm {
  width: 100%;
  max-width: 300px;
  margin: 0.5em auto 0;
}
.blog_cm {
  overflow: hidden;
  margin: 0.5em auto;
}
.blog_cm img {
  display: block;
  height: auto;
  max-height: 250px;
}
.blog_cm a:hover {
  box-shadow: 2px 2px 4px #ccc;
}
/*電子書籍一覧*/
.booklist, .booklist tr, .booklist th, .booklist td {
  display: block;
}
.booklist {
  table-layout: auto;
  width: 100%;
}
.booklist tr {
  border: 1px solid #ccc;
  width: 98%;
  margin: 0 auto;
}
.sticky th {
  position: sticky;
  top: 0;
}
.booklist td {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #ccc;
}
.booklist .name {
  width: 100%;
}
.booklist .name p {
  padding: 1rem;
}
.booklist .ganre {
  width: 100%;
}
.booklist .product_book {
  width: 100%;
  text-align: center;
}
/*奇数*/
.booklist tr:nth-child(odd) {
  background: #FDF5E0;
}
/*偶数*/
.booklist tr:nth-child(even) {
  background: #FDF6E9;
}
.booklist td li {
  margin: 0.5em 0;
  padding: 0.5em;
}
.booklist iframe {
  width: 90%;
  height: auto;
  aspect-ratio: 16/9;
}
/*フィルター*/
.filter-button {
  display: flex;
  flex-wrap: wrap;
  width: 98%;
  margin: 0 auto;
  padding: 1em 0;
  list-style: 0;
  background: #E5DECA;
}
.filter-button li {
  margin: 0.5rem 0.5rem 0 0.5rem;
  padding: 10px 20px;
  color: #333;
  border: 1px solid #333;
  border-radius: 20px;
  cursor: pointer;
}
.filter-button li:hover, .filter-button li.is-checked {
  color: #FFFCDB;
  background: #E0815E;
}
.filter-button #game:hover {
  background: #B2291C;
  color: #E5DECA;
}
.filter-button #programing:hover {
  background: #FDF6E9;
  color: #562222;
}
.filter-button #javascript:hover {
  background: #FFFCDB;
  color: #562222;
}
.filter-button #c:hover {
  background: #00005B;
}
.itembox.javascript {
  background: #FFFCDB;
}
.itembox.c {
  background: #22558A;
}
/*アイコン*/
.icon_list {
  position: fixed;
  right: 10px;
  bottom: 120px;
  margin: 1em;
  padding: 0;
  list-style: none;
}
.icon_list li {
  opacity: 0;
  transition: all 0.5s;
}
li.plus, ul:hover li {
  opacity: 1;
}
li:nth-child(1) {
  transition-delay: 150ms;
}
li:nth-child(2) {
  transition-delay: 100ms;
}
li:nth-child(1) {
  transition-delay: 50ms;
}
.icon_list a, .plus span {
  position: relative;
  display: block;
  border-radius: 50%;
  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.2);
  opacity: 0.2;
}
.icon_list a {
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
}
.icon_list a, .plus span:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  opacity: 0.4;
}
.icon_list a:hover {
  opacity: 1;
  transition: all 0.2s;
}
.icon_list a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
}
.x a {
  background: #000;
}
.x a::before {
  background: url("../images/icon_x_40_40.png") no-repeat 0 0;
  background-size: cover;
}
.pixiv a {
  background: #000;
}
.pixiv a::before {
  background: url("../images/icon_pixiv_40_40.png") no-repeat 0 0;
  background-size: cover;
}
.facebook a {
  background: #3B5998;
}
.facebook a::before {
  background: url("../images/icon_facebook_40_40.png") no-repeat 0 0;
  background-size: cover;
}
.adobe a {
  background: #B2291C;
}
.adobe a::before {
  background: url("../images/adobe_icon_40.png") no-repeat 0 0;
  background-size: cover;
}
.plus span {
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: #B2291C;
}
.plus span:before, .plus span::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-top: 2px solid #fff;
}
/*プラスボタン十字*/
.plus span:before {
  top: 24px;
  left: 15px;
}
.plus span:after {
  top: 15px;
  left: 6px;
  transform: rotate(90deg);
}
.icon_list a .tooltip {
  position: absolute;
  top: 50%;
  right: 100%;
  padding: 5px;
  margin-right: 10px;
  visibility: hidden;
  background: #fff;
  border-radius: 2px;
  opacity: 0;
  transition: all 0.2s;
  transform: translate(0, -50%);
}
.icon_list a .tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left-color: #fff;
  transform: translate(0, -50%);
}
.icon_list a:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
/*端末一覧*/
.device_list {
  color: #000;
  width: 94%;
}
.device_list th {
  font-size: 2.4rem;
  padding: 0.5rem 0;
  color: #E5DECA;
  text-shadow: 0 0 5px #0D3B2B;
}
.device_list tr:nth-child(2n) {
  background: #FDF6E9;
}
/*QRコード*/
.qrcode {
  width: 300px;
  height: auto;
  border: 2px solid #ccc;
  padding: 1rem;
}
/*アニメーション*/
.ossan .soramimi {
  font-size: 2.0rem;
  margin: 1rem 2rem;
  padding: 0.2rem 1rem;
  transform-origin: 50% 50% 0;
  animation: ossan 10s ease-out infinite;
}
@keyframes ossan {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }
  50% {
    transform: scaleX(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.01;
  }
} /*myanim*/
.col_list {
  background: #0D3B2B;
}
.msg img {
  width: 100%;
  max-width: 48px;
  height: auto;
  max-height: 48px;
}
/*database_column*/
.database_column dl {
  margin: 0;
  padding: 1em;
  background: #E5DECA;
}
.database_column dt {
  background: #7E9374;
  color: #E5DECA;
  margin: 0;
  padding: 0.5em 0 0.5em 1em;
}
.database_column dd {
  margin: 0 0 1em 0;
  padding: 1em;
  border: 1px solid #0D3B2B;
}
/*カラーコード一覧*/
.color_table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 4px solid #22558A;
}
.color_table th {
  color: #E5DECA;
}
.color_table td {
  padding: 15px;
  border: 1px solid #ccc;
}
.animate_base {
  color: #fff;
}
.red_color_01 {
  background: #C77665;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.red_color_02 {
  background: #B2291C;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.red_color_03 {
  background: #470000;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.white_color_01 {
  background: #E5DECA;
  color: #0D3B2B;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.white_color_01 .inner {
  color: #333300;
}
.blue_color_01 {
  background: #22558A;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.blue_color_02 {
  background: #0A3956;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.green_color_01 {
  background: #7E9374;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.green_color_02 {
  background: #4A7664;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.green_color_03 {
  background: #0D3B2B;
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.blog_video {
  display: block;
  width: 96%;
}
/*イメージカード*/
.image_list {
  display: flex;
  flex-wrap: wrap;
}
/*個別*/
.image_card {
  width: 94%;
  height: auto;
  min-height: 340px;
  margin: 1em;
  padding: 0;
  box-shadow: 0px 0px 5px #000;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  position: relative;
}
.image_link {
  display: block;
  color: #000;
  min-height: 340px;
  transition: 0.3s;
}
.image_link:hover {
  background: rgba(0, 0, 0, 0.1);
}
/*画像*/
.image_item {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background: #ccc;
  opacity: 0.7;
  transition: 0.2s;
}
.image_item img {
  display: block;
  width: 100%;
  height: auto;
}
/*日付*/
.image_date {
  width: 100%;
  margin: 0.6em 2em 0 0;
  padding: 0 0.5em 0 0;
  font-size: 1.4rem;
  text-align: right;
  color: #ccc;
}
/*本文*/
.image_honbun {
  padding: 0.5em;
  font-size: 1.8rem;
  max-height: 7em;
  overflow: hidden;
}
.image_honbun p {
  background: #fff;
}
/*掲載記事サイト*/
.site_link {
  font-size: 1.4rem;
  color: #ccc;
  margin: 0 0 0 20px;
  padding: 0 0.5em 0 0;
}
.responsive_image {
  width: 100%;
}
.main-image {
  width: 100%;
}
.amazon img {
  display: block;
  width: 100%;
  height: auto;
}
.contact {
  background: #fff;
}
/*----------------------------
フォーム入力
----------------------------*/
#input input[type="text"] {
  width: 40em;
}
.log {
  position: relative;
  max-width: 600px;
  margin: 1em;
  padding: 0.5em;
  border: 1px solid #0D3B2B;
  background: #FFF7E8;
}
#upload_title {
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  padding: 0.2em 0.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input[type="submit"] {
  width: 80%;
  max-width: 640px;
  margin: 0 auto;
  background: #7E9374;
  border-radius: 10px;
  color: #E5DECA;
}
input[type="submit"]:hover {
  background: #0D3B2B;
  color: #E5DECA;
}
.thumbnail_title {
  display: flex;
  flex-direction: column-reverse;
}
.thumbnail_title dt {
  background: #FFF7E8;
  width: 100%;
}
.thumbnail_title dd {
  background: #FFF7E8;
  width: 100%;
}
.thumbnail_image {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
/*----------------------------
チェックボックス
----------------------------*/
.checkbox::after {
  content: '';
  display: block;
  clear: both;
}
.checkbox input {
  position: absolute;
  left: -9999em;
}
.checkbox label {
  position: relative;
  float: left;
  padding-left: 1.4em;
  user-select: none;
}
.checkbox label:not(:first-child) {
  margin-left: .8em;
}
.checkbox label::before {
  content: ' ';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1em;
  height: 1em;
  border: 1px solid #333;
  border-radius: 0.15em;
  transform: translateY(-50%);
}
.checkbox label::after {
  box-sizing: border-box;
  position: absolute;
  top: .8em;
  left: .35em;
  width: .35em;
  height: .7em;
  border-right: 2px solid #333;
  border-bottom: 2px solid #333;
  transform: rotate(40deg);
}
.checkbox input:focus + label::before {
  border-color: #4fa0e7;
  box-shadow: 0 0 5px #0d7ee0;
}
.checkbox input:checked + label::after {
  content: ' ';
}
/*CSSアニメーション*/
.css_display {
  display: block;
  width: 90%;
  min-width: 300px;
  height: auto;
  min-height: 304px;
  margin: 1em auto;
  padding: 0;
  border: 2px solid #000;
  position: relative;
}
.nuesaburou_image img {
  width: 300px;
  height: 300px;
  background: #ccc;
  border-radius: 50%;
  position: absolute;
  left: 200px;
  transform: translateY(20%);
  animation: flash 10s ease-in-out 0.3s infinite alternate;
}
/*10秒で*/
@keyframes flash {
  0% {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    transform: rotate(-45deg);
  }
  25% {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0%;
    transform: rotate(0deg);
  }
  50% {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 55%;
    transform: rotate(45deg);
  }
  100% {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    transform: rotate(0deg);
  }
}
.animation_image {
  position: relative;
}
.animation_image img {
  display: block;
  width: 100%;
  height: auto;
}
.animation_column {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #ccc;
  text-align: right;
  padding: 0.2em 1em;
  position: absolute;
  bottom: 0.8em;
  left: 0;
}
.js_display {
  display: block;
  width: 100%;
  height: auto;
  min-height: 300px;
  background: #fff;
  position: relative;
}
#js_animation {
  position: absolute;
  top: calc(50% - 126px + 86px);
  left: calc(50% - 80px);
}
#js_animation img {
  width: 160px;
  height: auto;
}
/*making_column_list*/
.making_column_list {
  display: flex;
  flex-wrap: row;
}
.making_column_list li {
  display: block;
  width: 50%;
  overflow: hidden;
  margin: 0.5em;
  background: #E5DECA;
  border-radius: 0 0 10px 10px;
  box-shadow: 2px 2px 4px #ccc;
}
.making_column_list li:hover {
  box-shadow: 2px 2px 4px #000;
}
.making_column_list li a {
  display: block;
  min-height: 200px;
  color: #000;
  font-weight: bold;
  border-radius: 0 0 10px 10px;
}
.making_column_list li a:hover {
  background: translate;
}
.making_column_list dl {
  display: flex;
  flex-direction: column-reverse;
}
.making_column_list dt {
  padding: 0.5em;
  overflow: hidden;
}
.making_column_list dd img {
  display: block;
  width: 100%;
  height: auto;
}
/*過去記事*/
.archive_list {
  display: flex;
  flex-direction: column;
}
.archive_list li {
  display: block;
  width: 94%;
  overflow: hidden;
  margin: 0.5em;
  background: #E5DECA;
  border-radius: 0 0 10px 10px;
  box-shadow: 2px 2px 4px #ccc;
}
.archive_list li:hover {
  box-shadow: 2px 2px 4px #000;
}
.archive_list li a {
  display: block;
  min-height: 200px;
  color: #000;
  font-weight: bold;
  border-radius: 0 0 10px 10px;
}
.archive_list li a:hover {
  background: translate;
}
.archive_list dl {
  display: flex;
  flex-direction: column-reverse;
}
.archive_list dt {
  padding: 0.5em;
  overflow: hidden;
}
.archive_list dd img {
  display: block;
  width: 100%;
  height: auto;
}
.making_explanation dt {
  margin: 0;
  padding: 0.5em;
  background: #22558A;
  color: #E5DECA;
}
.code_explanation {
  margin: 0.5em;
}
.code_explanation li {
  padding: 0.4em 1em 0.1em;
}
.code_explanation li + li {
  border-top: 1px dashed #ccc;
}
/*サイドメニューリスト*/
.sidemenu_column_list {
  display: flex;
  flex-wrap: wrap;
  background: #FDF6E9;
}
.sidemenu_column_list li {
  width: 100%;
  background: #FFF7E8;
}
.sidemenu_column_list li + li {
  border-top: 1px solid #562222;
}
.sidemenu_column_list li a {
  display: block;
  color: #562222;
  padding: 0.5em;
  transition: 0.3s;
}
.sidemenu_column_list li a::after {
  content: " >>";
}
.sidemenu_column_list li a:hover {
  padding: 0.5em;
  background: #7E9374;
  color: #E5DECA;
}
.sidemenu_column_list dt, .sidemenu_column_list dd {
  width: 100%;
  height: auto;
}
.sidemenu_column_list .myVideo {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
/*プロフィール*/
.profile_list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0.5em 0;
}
.profile_list dt {
  width: 100%;
  min-width: 4em;
  margin: 0;
  padding: 0.5em;
}
.profile_list dd {
  width: 100%;
  margin: 0;
  padding: 0.5em;
}
.profile_list dt, .profile_list dd {
  border-bottom: 1px solid #0A3956;
}
.profile_list dd:last-of-type {
  border-bottom: none;
}
/*奇数*/
.profile_list dt:nth-of-type(2n+1) {
  background: #0A3956;
  color: #E5DECA;
}
/*偶数*/
.profile_list dt:nth-of-type(2n) {
  background: #22558A;
  color: #E5DECA;
}
.tab_ex {
  margin: 1em 0;
}
.tab_ex dt {
  background: #FFF7E8;
  margin: 0;
  padding: 0.5em 0.5em 0;
  border-bottom: 1px solid #562222;
}
.tab_ex dd {
  margin: 0;
  padding: 0.5em;
}
.tabcontents_list {
  margin: 0;
}
.tabcontents_list li {
  border-bottom: 1px dashed #562222;
  padding: 0.5em 0.5em 0;
}
.process_list a {
  color: #ccc;
}
/*サイドメニュー*/
.code_ex_list {
  margin: 0;
  padding: 0;
}
.code_ex_list dt {
  width: 100%;
  max-width: 360px;
  margin: 0;
  padding: 0.5em;
  background: #FFFCDB;
  color: #470000;
  border-left: 40px solid #470000;
  border-bottom: 1px dashed #470000;
}
.code_ex_list dd {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0.5em 0 0.5em 3em;
  padding: 0.5em;
  background: #fff;
  border: 1px solid #562222;
}
.keyword {
  padding: 10px;
  background: #C77665;
  color: #E5DECA;
  font-weight: bold;
  font-size: 1.4rem;
}
.cm {
  width: 50%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 6/5;
}
.button_list {
  margin: 0.5em 1em;
  padding: 0.5em;
  border: 4px solid #C77665;
}
.code_title {
  width: 10em;
  margin: 0.5em 0 0 0;
  padding: 0 0.5em;
  background: #A5D4AD;
  border-radius: 0 10px 0 0;
  color: #0D3B2B;
  border: none;
}
.onegai {
  display: inline-block;
  width: 100%;
  margin: 2em 0 0;
  padding: 0.5em;
  font-size: 1.6rem;
}
.onegai::before {
  content: '・ ';
}
.ex_paragram {
  width: 96%;
  margin: 1em auto;
  padding: 1em;
  background: #fff;
    border:2px solid #0D3B2B;
  border-radius: 20px;
}
.blog_form{
    border-radius:40px;
}