@charset "utf-8";
/* CSS Document */
/*エラー表示*/
.error {
  color: #FF0004;
}
.answer {
  font-weight: bold;
  border: 4px solid #444;
  margin: 10px 0 10px 0;
  padding: 5px;
}
#choice {
  display: inline;
  font-weight: bold;
  border: 4px solid #444;
  margin: 10px;
  padding: 5px;
}
/*---------------------------------------------
ギャラリー
-----------------------------------------------*/
#gallery {
  width: 100%;
}
#gallery img {
  display: block;
  margin: 0 auto;
}
section p {
  margin: 0;
  padding: 10px;
}
#navi {
  float: left;
  width: 300px;
  overflow: hidden;
}
#navi .pageWrap {
  width: 900px;
}
#navi .pageWrap .page {
  float: left;
  width: 300px;
  background-color: #CCC;
  border: 1px solid #000;
}
.page img {
  margin: 10px;
}
#navi p {
  clear: both;
  width: 300px;
  padding: 10px 0;
  text-align: center;
  float: left;
}
#navi p img {
  cursor: pointer;
  width: 50px;
  height: auto;
}
#main_image2 img {
  position: absolute;
  left: 450px;
  width: 960px;
  height: 555px;
  border: 1px solid #ccc;
  margin: 10px;
}
/*================================
3コラムレイアウト
==================================*/
.maincontents {
  margin: 10px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.divide_3_column {
  width: 31%;
  border: 1px solid #333;
  border-radius: 20px;
  padding: 10px;
  margin: 10px 0 0 0;
  background-color: #fff;
  flex-shrink: 0;
}
/*1つめ*/
.divide_3_column:first-child {
  margin: 0 0 0 20px;
}
/*2つめ*/
.divide_3_column:nth-child(3n-1) {
  margin: 10px 1%;
}
/*5つめ*/
.divide_3_column:nth-child(5n-1) {
  margin: 10px 0 0 20px;
}
/*-------------------------------
3コラム　パーツ
---------------------------------*/
.divide_3_column img {
  width: 100%;
  height: auto;
  border: 1px solid #0A3956;
}
.ex {
  margin: 20px 0 0 0;
}
/*---01---*/
.column_image01 {
  box-shadow: 2px 10px 0 #ea987e;
}
/*---02---*/
.pic {
  position: relative;
}
.pic img {
  position: relative;
  z-index: 2;
}
/*---
	背景を斜線に変更する
---*/
.pic::before {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -2px;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(-45deg, #fff, #fff 2px, #bee4b7 5px, #bee4b7 15px);
  z-index: 1;
}
/*---03---*/
.pic02 {
  position: relative;
}
.pic02 img {
  position: relative;
  z-index: 2;
}
/*---
	背景をドット柄に変更する
---*/
.pic02::before {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -8px;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#ea987e 40%, rgba(0 0 0 / 0) 21%);
  background-size: 10px 10px;
  background-position: right bottom;
  z-index: 1;
}
/*-------------
04
---------------*/
.column_image04 {
  filter: drop-shadow(5px 5px 0 #ea987e);
}
/*--------------
05
----------------*/
.pic05 {
  position: relative;
}
.pic05::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(110% - 20px);
  height: calc(110% - 20px);
  border-image-source: repeating-linear-gradient(-45deg, /*斜線太さ 色*/ #ea987e 0px, #ea987e 4px, rgba(0 0 0 / 0) 2px, rgba(0 0 0 / 0) 7px);
  border-image-slice: 20;
  border-width: 20px;
  border-image-repeat: round;
  border-style: solid;
}
/*---- 06 ---*/
.pic06 {
  position: relative;
}
.pic06::before, .pic06::after {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
}
.pic06:before {
  top: -10px;
  right: -10px;
  border-top: 15px solid #ea987e;
  border-right: 15px solid #ea987e;
  border-bottom: 15px solid rgba(0 0 0 /0);
  border-left: 15px solid rgba(0 0 0 /0);
}
.pic06:after {
  bottom: -10px;
  left: -10px;
  border-top: 15px solid rgba(0 0 0 /0);
  border-right: 15px solid rgba(0 0 0 /0);
  border-bottom: 15px solid #ea987e;
  border-left: 15px solid #ea987e;
}
.javascript_contents {
  display: block;
  width: 95%;
  background-color: #fff;
  margin: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 2px 10px 0 #ccc;
}
.javascript_contents a {
  display: block;
  color: #b2291C;
}
.javascript_contents a:hover{
      color: #fff;
}
.javascript_contents:hover {
  background-color: #B2291C;
  transition: .5s;
}
.javascript_picture {
  text-align: center;
}
.javascript_picture img {
  display: inline-block;
  max-width: 300px;
  margin: 0 auto;
  padding: 10px 0 0 0;
}
.javascript_text {
  display: block;
  margin: 10px;
  padding: 10px;
  background-color: #fff;
}
/*----------------------------
カラーピッカー
------------------------------*/
.color_contents {
  background: #fff;
  margin: 2rem;
  padding: 2rem;
  border-radius: 1rem;
  width: 300px;
  box-shadow: 0 0 1rem #ddd;
}
/* 一言メモ */
.one_point {
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: #ccc;
}
.point_column {
  width: 33%;
  height: auto;
  border-radius: 10px;
  background-color: #fff;
  margin: 1% 0 1% 1%;
  padding: 0;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.point_image {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 10px 10px 0 0;
}
.point_date {
  color: #373737;
  text-align: right;
}
.point_title {
  font-size: 2rem;
  font-weight: bold;
  background-color: #CCC;
  text-align: center;
}
.point_memo {
  margin: 0;
  padding: 10px;
}
.anime_recommend dt {
  font-size: 2rem;
}
.anime_recommend dd {
  margin: 5px;
  padding: 5px;
  border-bottom: 1px dotted #ccc;
}
/*作品一覧*/
.product_list{
    display:flex;
    flex-direction:column;
}
.product_video video{
    width:100%;
}
.product_column{
    width:100%;
}
@media only screen and (min-width:768px) {
    .gallery{
        width:100%;
        max-width:768px;
        margin:0 auto;
    }
    .gallery h2{
        width:100%;
        max-width:768px;
    }
    .one_point{
        width:100%;
        max-width:768px;
    }
    .point_column{
        width:100%;
        max-width:768px;
    }
    /*作品一覧*/
    .product_list{
        display:flex;
        flex-direction:row;
        width:100%;
        margin:1em auto;
        background:#4A7664;
    }
    .product_title{
        background:#fff;
        text-decoration:none;
        font-weight:normal;
    }
    .product_video{
        width:50%;
        height:auto;
    }
    .product_video video{
        aspect-ratio: 16 / 9;
    }
    .product_column{
        width:48%;
        border:1px solid #0D3B2B;
        background:#3B5E66;
    }   
}
@media only screen and (min-width:1024px) {
    .product_video_column video{
        width:50%;
    }
}