/*——　文字の両脇にライン　——*/
.title-border {
display: flex;
align-items: center;
}
.title-border:before,
.title-border:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.title-border:before {
margin-right: 1rem;
}
.title-border:after {
margin-left: 1rem;
}a {
  position: relative;
  padding-left: 0.2em;
  padding-right: 0.2em;
  display: inline-block;
  text-decoration: none;
  transition:all 0.5s ease 0.2s;
}
/*a::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  content: '';
  width: 100%;
   border-top:solid 2px #ff7d00;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .3s;
}*/
a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}

a:link,a:visited{
color:#000000;
text-decoration:none;
background-color: none;
}
a.hover{
color:#ccffcc;
background-color: transparent;
}
/*a:hover,a:active{
position:relative;
bottom:-1px;
right:-1px;
background-color: transparent;
}*/

/* 通常時はホバー時の文字を非表示にする */
a .hover{
display: none;
}
/* ホバー時は通常時の文字を非表示にする */
a:hover .nomal{
display: none;
}
/* ホバー時に、ホバー時の文字を表示する */
a:hover .hover{
display: inline;
}

body{
line-height: 1.5;
letter-spacing: 0.2em;
}.fixed_test {
    position: fixed;        /* 要素の配置方法を指定 */
    background-color: #fff;     /* 背景色指定 */
    border: 2px solid #d6cb84;
    padding:  20px;             /* 余白指定 */
    left:  0;                /* 左からの位置指定 */
    top: 0;                  /* 上からの位置指定 */
}body{
font-family:"Lucida
Grande","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro
W3",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS
PGothic",Geneva,Arial,Verdana,sans-serif;
}details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

@media screen and (min-width: 720px) {
body{
padding-top: 5%;
padding-bottom: 5%;
padding-right: 11%;
padding-left: 11%;

background:linear-gradient(90deg,#fff 0%,#fff 50%,#000 50%,#000 100%);
}

/* a{
background:-webkit-linear-gradient(180deg,#fff 0%,#fff 50%,#000 50%,#000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} */

/* 通常時はホバー時の文字を非表示にする */
a .hover{
display: none;

}
/* ホバー時は通常時の文字を非表示にする */
a:hover .nomal{
display: none;
}
/* ホバー時に、ホバー時の文字を表示する */
a:hover .hover{
display: inline;
}

.sirokuro{
background:-webkit-linear-gradient(0deg,#000 0%,#000 50%,#fff 50%,#fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.haiiro{
background:-webkit-linear-gradient(0deg,#505050 0%,#505050 50%,#b9b9b9 50%,#b9b9b9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.contentA{
color: #fff; 
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.5em;
padding-left: 1em;
}
.contentB{
  color: #000;
padding: 0.5em;
margin-left: 1em;
}
.contentA,.contentB{
 width: 50%;
}
.main{
 display: flex;
margin: 0 5%;
}
}.righttoleft,
.diagonally {
  width: 100%;
  padding: 60px 0;
  border-top:1px solid #000000;
  border-bottom:1px solid #000000;
}

/* 左右に半分 */
.righttoleft {
  background: linear-gradient(90deg, #000000 50%, #ffffff 50%);
}

.righttoleft p {
  background: linear-gradient(-90deg, #000000 50%, #ffffff 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 斜めに半分 */
.diagonally {
  background: linear-gradient(45deg, #ffffff 50%, #000000  50%);
 text-align:center;
}

.diagonally p {
  background: linear-gradient(45deg, #000000 50%, #ffffff 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}/* @media screen and (min-width: 700px) {
body(
padding-top: 50px;
padding-bottom: 50px;
padding-right: 100px;
padding-left: 200px;
}
} */

@media screen and (max-width: 719px) {
body{
padding-top: 5%;
padding-bottom: 5%;
padding-right: 10%;
padding-left: 10%;

background:linear-gradient(180deg,#fff 0%,#fff 50%,#000 50%,#000 100%);
}

a{
color: #fff;
}

.contentA{
  color: #FFF;}
.contentB{
  color: #000;}
}/*以下フェードイン表示の指定*/
.fadein {
    opacity: 0;
    animation: fadein 6s ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}
 
/*以下遅延の指定*/
.book01 {animation-delay: 1s;}
.book02 {animation-delay: 4s;}
.book03 {animation-delay: 7s;}
.book04 {animation-delay: 10s;}
.book05 {animation-delay: 13s;}
.book06 {animation-delay: 16s;}.fade-in-bottom {
   opacity: 0;
   animation: fadein-bottom 5s 0 ease forwards;
}
@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(40px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}