@charset "utf-8";
/*----------------------------
スマフォ
350px * 600px
----------------------------*/
.blog_making {
  margin: 0 0 0.5em;
}
h3 {
  font-size: 2rem;
  margin: 10px 0;
  padding: 0 30px 0 20px;
  border-top: 3px solid #00005B;
  border-left: 30px solid #00005B;
  border-bottom: 3px solid #00005B;
  border-right: 30px solid #00005B;
}
/*ブログ記事*/
.blog_column {
  margin: 0.2em 0.5rem;
  padding: 0 0 1em;
  background: #E5DECA;
  border: 1px solid #0A3956;
  box-shadow: 1px 1px 2px #22558A;
  border-radius: 13px;
}
.blog_column img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.blog_column a {
  display: block;
  color: #0D3B2B;
  opacity: 0.6;
}
.blog_column a:hover {
  opacity: 1;
  transition: 0.6s;
}
.blog_column > .honbun {
  margin: 1em;
  padding: 1em;
  background: #fff;
  border: 1px solid #0A3956;
  box-shadow: 2px 4px 2px #22558A;
}
.blog_column dt{
    display:inline-block;
    margin:0.5em 0 0;
    padding:0.5em 1em;
    background:#22558A;
    border:1px solid #22558A;
    color:#E5DECA;
}
.blog_column dd{
    width:96%;
    margin:0 0 0 1em;
    padding:0.5em;
    border:1px solid #22558A;
}
.blog_column li{
    padding:0.5em;
}
.blog_title {
  font-size: 1.6rem;
  font-weight: bold;
  background: #0A3956;
  border-radius: 10px 10px 0 0;
  color: #E5DECA;
  padding: 0 1em;
}
.blog_image {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}
.blog_image_half_list {
  display: flex;
  flex-wrap: wrap;
}
.blog_image_half {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.blog_image_half img {
  border: 1px solid #ccc;
}
.blog_image img {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
}
.blog_video {
  display: flex;
  flex-direction: row;
}
.blog_video video {
  width: 50%;
  max-width: 768px;
}
.blog_image video {
  width: 100%;
  max-width: 768px;
}
.blog_image iframe {
  width: 100%;
  aspect-ratio: 16/9;
  margin: 1rem auto;
}
.blog_date {
  display: block;
  text-align: right;
  padding: 0 1em;
}
.blog_list li::before {
  content: '・';
}
.column_list dd .honbun {
  display: block;
  width: 100%;
  margin: 1em auto;
  padding: 1em;
  background: #fff;
  border: 1px solid #7E9374;
}
.calc_list {
  margin: 0 2rem;
}
.calc_list dt {
  border-bottom: 2px dotted #55576C;
}
.calc_list dd {
  padding: 1rem 0 0 2rem;
}
/*ブログジャンル*/
.blog_genre {
  width: 10em;
  background: #ccc;
  border-radius: 20px;
  margin: 0.5em 1em;
  padding: 0.5em 1em;
  text-align: center;
}
.blog_genre.memo {
  margin: 0;
  background: #7E9374;
  color: #E5DECA;
}
.blog_genre.photoshop {
  background: #22558A;
  color: #FFF7E8;
}
.blog_genre.illustrator {
  background: #31080C;
  color: #FF873E;
}
.blog_genre.animate {
  background: #562222;
  color: #E5DECA;
}
.blog_genre.aftereffects {
  background: #00005B;
  color: #A3A3E8;
}
.blog_genre.premire {
  background: #0A3956;
  color: #A3A3E8;
}
.blog_genre.analog {
  background: #DA313B;
  color: #FFF7E8;
}
.blog_genre.script {
  background: linear-gradient(#22558A, #0A3956);
  color: #FFF7E8;
}
.blog_genre.php {
  background: linear-gradient(#A3A3E8, #7B7BDF);
  color: #000;
  text-shadow: 0 0 6px #fff;
}
.blog_animation {
  width: 100px;
  margin: 0 auto;
}
/*キャラクターを常時プルンと動かす*/
.blog_animation img {
  animation: purun 2s linear 0s infinite;
}
@keyframes purun {
  0% {
    transform: scale(1.0, 1.0) translate(0%, 0%);
  }
  5% {
    transform: scale(0.9, 0.9) translate(0%, 5%);
  }
  20% {
    transform: scale(1.3, 0.8) translate(0%, 10%);
  }
  30% {
    transform: scale(0.8, 1.3) translate(0%, -10%);
  }
  50% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  60% {
    transform: scale(1.0, 1.0) translate(0%, 0%);
  }
  100% {
    transform: scale(1.0, 1.0) translate(0%, 0%);
  }
}
.article_text {
  padding: 0 1em;
}
.media-image {
  width: 250px;
  height: auto;
  margin: 0 auto;
}
/*コラム*/
.column_title {
  margin: 1em;
}
.column_title dt {
  background: #22558A;
  color: #E5DECA;
  padding: 0.2em 1em;
}
.column_title li {
  margin: 0 0 10px 10px;
  border-left: 10px solid #22558A;
  border-bottom: 1px dotted #22558A;
}
.honbun_list dt {
  margin: 0 0 0 1em;
  padding: 0 0 0 1em;
  border-left: 10px solid #0D3B2B;
  border-bottom: 1px solid #0D3B2B;
  background: #fff;
}
.honbun_list dd {
  margin: 0 0 0.5em 2em;
  padding: 0 0 0 2em;
  border-left: 4px solid #0D3B2B;
  border-bottom: 1px solid #0D3B2B;
  background: #fff;
}
.honbun_column {
  padding: 1em;
  background: #fff;
}
.count_list {
  margin: 0 0 2rem 0;
  padding: 0;
}
.count_list li {
  margin: 0 0 0 4rem;
  padding: 0;
}
.count_list li::before {
  counter-increment: number 1;
  content: counter(number) " ";
}
.blog_column_list {
  margin: 0.5em;
  padding: 0.5em;
  background: #fff;
  counter-reset: count;
}
.blog_column_list li {
  margin: 0;
  padding: 0.5em 0.5em 0 0.5em;
  border-bottom: 1px dashed #000;
}
.blog_column_list li:last-child {
    border-bottom:none;
}
.blog_column_list li a {
  width: 96%;
  padding: 0.5em;
  line-height: 40px;
  color: #0D3B2B;
}
.blog_column_list li a::before {
  content: '▼ ';
  margin: 0;
  padding: 0;
}
.blog_column_list li a:hover {
  margin: 0;
  padding: 0;
  line-height: 40px;
  background: #4A7664;
  color: #E5DECA;
  font-weight: bold;
  transition: 0.3s;
}
.blog_column_list li a:hover:before {
  content: '→';
}
.blog_column_list dt {
  background: #22558A;
  color: #E5DECA;
  margin: 0.2em 0 0;
  padding: 1rem 2rem;
}
.blog_column_list dd {
  padding: 0;
}
/*ブログ記事内コード*/
.blog_column_list pre, .blog_column_list code {
  width: 100%;
  min-width: 280px;
  margin: 0 auto;
}
.blog_define_list {
  margin: 0 1em;
  padding: 0;
  border-bottom: 1px solid #470000;
}
.blog_define_list dt a {
  background: #B2291C;
  color: #E5DECA;
  text-shadow: 2px 2px 4px #470000;
  padding: 0.5em 1em;
  border-bottom: 1px dashed #470000;
  border-left: 1em solid #DA313B;
}
.blog_define_list dd {
  margin: 0 0 0 1em;
  padding: 0.2em 1em 0.5em 1.5em;
  border-left: 0.2em solid #470000;
}
.order_anime {
  margin: 0;
  padding: 0;
  content: counter(count);
  counter-increment: count
}
.memo {
  margin: 0;
}
.memo dt {
  margin: 0 2rem 0 2rem;
  padding: 0 0 0 1rem;
  border-bottom: 1px dotted #562222;
  border-left: 10px solid #22558A;
}
.memo dd {
  margin: 0 2rem 0 2rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  background: #fff;
  border-bottom: 1px dotted #562222;
  border-left: 10px solid #22558A;
}
.puyo_banner {
  display: block;
  text-align: center;
  line-height: 50px;
  background: #22558A;
}
.puyo_banner a {
  display: block;
  color: #fff;
}
.puyo_banner a:hover {
  color: #22558A;
  background: #fff;
  transition: all 0.4s;
}
.special_code {
  background: #F7CEAE;
}
.special_code code {
  font-family: sans-serif;
  color: #000;
  font-weight: bold;
}
/*テスト*/
.test_image {
  position: relative;
  width: 100px;
  margin: 4rem auto 1rem auto;
  text-align: center;
}
/*0.5秒で拡大する*/
.test_image a {
  background-color: none;
  transition: transform 0.5s linear;
  transform: scale(1);
  border-radius: 20px 20px 0 0;
}
.test_image a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 5px;
  background: #fff;
  /*アニメーション*/
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform 1s;
}
.test_image a:hover {
  transform: scale(1);
}
.test_image a:hover::after {
  transform: scale(1, 1);
  transform-origin: center top;
}
/*キーフレームアニメ*/
.test_image_anime {
  width: 200px;
  height: 250px;
  border-radius: 50%;
  line-height: 200px;
  margin: 8rem auto 4rem auto;
  text-align: center;
  font-size: 3.0rem;
}
.test_image_anime a {
  background: #abcf3e;
  border-radius: 50%;
  transform-origin: 50% 50% 0;
  animation: myanim 3s infinite;
}
@keyframes myanim {
  0% {
    border-radius: 50%;
    transform: scale(1) rotate(0deg);
    background: #7B7BDF;
  }
  50% {
    transform: scale(1.6) rotate(180deg);
    background: #DA313B;
  }
  100% {
    transform: scale(1) rotate(360deg);
    background: #7B7BDF;
  }
} /*myanim*/
/*ペラサイト*/
.pera_site_list dt {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  background: #00005B;
  color: #E5DECA;
  font-size: 2.4rem;
}
.pera_site_list img {
  display: block;
  width: 90%;
  margin: 1rem auto;
}
/*フォーム*/
input[type=text] {
  width: 75%;
  background: #ccc;
}
input[type="text"]:focus {
  background: #fff;
}
textarea {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  width: 90%;
  height: 100px;
  background: #ccc;
}
textarea:focus {
  background: #fff;
}
#edit {
  padding: 5px 20px;
  background: #ccc;
  border-radius: 20px;
}
#edit a {
  color: #000;
}
#edit:hover {
  background: #bfdcf1;
}
#edit:active {
  background: #94cdf9;
}
.php_display {
  background: #E5DECA;
  border: 1px solid #22558A;
  border-radius: 20px;
  margin: 0.5em 0;
  padding: 1em 0;
}
.php_display p {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.php_display label {
  float: left;
  width: 100%;
}
.php_display input[type=text] {
  width: 200px;
  max-width: 250px;
}
.php_display a {
  display: inline-block;
  padding: 0 2rem;
  line-height: 50px;
  border-radius: 20px;
  background: #7E9374;
  color: #E5DECA;
}
.php_display a:hover {
  background: #0D3B2B;
  color: #E5DECA;
  transition: 0.5s;
}
.php_display form{
    border-radius:20px;
}
/*SQL文*/
.database_column {
  width: 48%;
  line-height: 50px;
}
.database_column a {
  display: block;
  background: #7E9374;
  color: #E5DECA;
  padding: 0 2rem;
  border-radius: 20px;
}
.database_column a:hover {
  background: #0D3B2B;
  color: #E5DECA;
  transition: 0.5s;
}
.tool_list {
  display: flex;
  flex-direction: row;
}
.text_count {
  width: 100%;
  text-align: right;
}
.alert {
  color: #f66;
  font-weight: bold;
}
.index li {
  border-bottom: 1px dashed #22558A;
}
.index li:last-child {
  border-bottom: none;
}
/*データベース*/
.db_search_table {
  margin: 0 0 1em 0;
}
.ex_table {
  width: 96%;
  margin: 10px auto;
  table-layout: auto;
}
.ex_table td:nth-child(1) {
  width: 250px;
}
.ex_table tr:hover {
  cursor: default;
  background: #ecfafc;
  font-weight: bold;
}
.blog_table {
  width: 98%;
  margin: 1em auto;
}
.blog_table td:first-child {
  color: #562222;
}
/*ゲームコラム*/
.game_column_list {
  width: 100%;
  background: #fff;
}
/*ビューアー*/
figure img {
  display: block;
  margin: 0 auto;
  border: 2px solid #0A3956;
}
.viewer {
  display: flex;
  flex-wrap: wrap;
  max-height: 300px;
  overflow-y: scroll;
  margin: 0.5em 0.1em;
  padding: 0.5em;
  border: 4px solid #4A7664;
  background: #7E9374;
  position: relative;
}
.viewer li {
  width: 50%;
  margin: 0;
  padding: 0;
}
.viewer img {
  display: block;
  width: 100%;
  min-width: 100px;
  height: auto;
  line-height: 100px;
  margin: 0;
  padding: 0;
}
.viewer li a {
  display: block;
  margin: 0;
  padding: 0;
  background: #4A7664;
  opacity: 0.6;
  transition: 0.3s ease-in-out;
}
.viewer a:hover {
  opacity: 1;
}
.sound_column_list {
  margin: 0;
  padding: 0;
}
.sound_column_list td {
  padding: 0.2em;
}
.sound_column_list li {
  border-bottom: 1px dashed #0D3B2B;
  margin: 0;
  padding: 0 0.5em;
}
.sound_column_list li:last-child {
  border-bottom: none;
}
/*変数宣言*/
.table_name {
  table-layout: fixed;
  width: 290px;
  min-width: 280px;
  margin: 0 auto;
  padding: 0;
}
.class_name {
  width: 0;
}
.hensuu {
  min-width: 120px;
}
/*テーブル定義リスト*/
.table_dl_list dt {
  background: #7E9374;
  color: #E5DECA;
  padding: 0 0.5em;
  box-shadow: 2px 2px 5px #ccc;
}
.table_dl_list dd {
  margin: 0 0 0.5em 0;
  padding: 1em;
  background: #fff;
  border-bottom: 1px solid #ccc;
  box-shadow: 2px 2px 5px #ccc;
}
/*シナリオの書きかた*/
#no_01_dd {
  /* display: none;*/
}
#no_2_dd {
  display: none;
}
#no_3_dd {
  display: none;
}
#no_4_dd {
  display: none;
}
#no_5_dd {
  display: none;
}
#no_6_dd {
  display: none;
}
#no_7_dd {
  display: none;
}
#no_8_dd {
  display: none;
}
#no_9_dd {
  display: none;
}
#no_10_dd {
  display: none;
}
/*サムネイル*/
.thumnail {
  width: 150px;
  height: 150px;
  min-width: 150px;
  min-height: 150px;
  background: #ccc;
  margin: 0 0 0 1em;
}
.scenario_title {
  display: block;
  width: 95%;
  margin: 0 1em 0 1em;
}
.scenario {
  display: block;
  margin: 0;
}
.scenario label {
  display: block;
  width: 90%;
  margin: 0 0 0 2em;
  padding: 5px 10px;
  border-bottom: 1px solid #B2291C;
  border-left: 10px solid #B2291C;
}
.scenario textarea {
  width: 33em;
  margin: 0;
}
select {
  font-size: 16px;
  margin: 0 0 0.2em 1em;
  padding: 0.5em;
}
input[type="text"]:focus, textarea:focus {
  background: #fff;
}
/*ホワイトカラーコード
*/
.white01 {
  background: #2F2725;
  color: #fff;
}
.white02 {
  background: #27120A;
  color: #fff;
}
.white03 {
  background: #4B2D16;
  color: #fff;
}
.white04 {
  background: #24130D;
  color: #fff;
}
.white05 {
  background: #4E4449;
  color: #fff;
}
.white06 {
  background: #FBFAF3;
  color: #000;
}
.white07 {
  background: #F8F5E3;
  color: #000;
}
.white08 {
  background: #FFFFFC;
  color: #000;
}
.white09 {
  background: #FBFDFF;
  color: #000;
}
/*sql_rule*/
.sql_rule dt {
  width: 15em;
  margin: 1em 0 0 0;
  padding: 0.5em 1.5em 0.2em;
  border-radius: 10px 10px 0 0;
  background: #7E9374;
  color: #E5DECA;
  font-weight: bold;
}
/*アマゾン*/
.amazon_shopping {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0.5em auto;
}
.amazon_shopping dt, .amazon_shopping dd {
  margin: 0.5em 0;
  padding: 0.5em 0.5em 0.2em;
}
.amazon_shopping dt {
  width: 40%;
  background: #00005B;
  color: #ccc;
}
.amazon_shopping dd {
  width: 60%;
  background: #fff;
  color: #562222;
  border: 1px solid #562222;
}
.sale_title {
  color: #000;
}
/*python*/
.text_book_list{
    display:flex;
    flex-wrap:wrap;
    width:100%;
}
.text_book_list li{
    width:30%;
    min-width:200px;
}
.text_book_list li:first-child{
    margin:0 10px 10px;
}
.text_book_list li:nth-child(2n){
    margin:0 10px;
}
.text_book_list dt,
.text_book_list dd{
    width:100%;
    height:auto;
}
.text_book_list dd img{
    display:block;
    width:100%;
    max-width:250px;
    height:auto;
    aspect-ratio:9/12;
}
/*ペルソナリスト*/
.persona_list{
    display:flex;
    flex-wrap:wrap;
}
.persona_list dt,
.persona_list dd{
    width:96%;
    margin:0 auto;
    padding:0 0.5em;
    text-align:center;
    border:1px solid #22558A;
}
.cm_list{
    display:flex;
    flex-direction:row;
    max-height:260px;
}
#blog_title input[type = "text"]{
    width:600px;
}
.memo input[type="submit"]{
    width:100%;
    margin:1em auto;
}
.blog_thumbnail{
    display:block;
    background:#0D3B2B;
    width:25%;
    max-width:300px;
    height:auto;
    margin:0.5em;
    padding:0.5em;
    border:1px solid #000;
}
.algo_column li{
    border-bottom:1px dashed #7E9374;
}
.algo_column li::before{
    content:'・ ';
}