@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');

html {
  scroll-behavior: smooth;
}

body{
font-size:14px;
line-height:1.5;
font-family:'Noto Sans JP', sans-serif,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
margin:0;
padding:0;
background:url(../images/bgs.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position:center top;

}


@media (min-width: 479px){
body{font-size:16px;
background:url(../images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position:center top;
}
}



a {
  text-decoration: none;
  color: #b54ece;
}

a:hover{position:relative; 
transition: ease .2s;
color:#395797;}


ul,
li {
  list-style: none;
}

h1,h2,h3,h4,h5{
    margin:0;
    padding:0;}


/* ヘッダー */
header {
    margin:0 auto;
    width:100%; max-width: 1024px;
}

.wow {
  visibility: hidden;
}

header h1 img{display: block; margin:0 auto; width:100%; height: auto; }


.nav{width:100%;}
.nav ul, .nav li{margin:0; padding:0;}
.menu{display: flex; align-items: center; justify-content: center;}
.nav li{flex-grow: 1;}
.nav li:first-child{border-right:solid 1px #272F92;}
.nav li:last-child{border-left:solid 1px #272F92;}
.nav a{display: block; background: rgb(255 255 255 / 0.8); padding:12px 0; transition: ease .5s;}
.nav a img{display: block; margin:0 auto; width:auto; height:20px;}
.nav a:hover{
background: rgb(255 255 255 / 1);}

@media (min-width: 769px){
    .nav a img{height:30px;} }


.nav-fixed {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  /* 必要に応じて */
}

main{}

.containts{background: #fff;
width:calc(100% - 20px);
max-width:960px;
margin:4em auto;
padding:0 1.5em 1.5em; 1.5em;;
box-sizing: border-box;
box-shadow: 0 0 12px #fff;
}


@media (min-width: 769px){   
.containts{
margin:100px auto;
}
}

h2 img{display: block;
    position: relative;
    width:calc(100% - 10px);
    max-width: 640px; height:auto;
   left: 50%; top:-1em;
   transform: translateX(-50%);

}

h3 span{display: inline-block;
    color:#fff;
background: rgb(0 93 146 / 0.9);
box-shadow: 0 0 6px rgb(39 47 147 / 0.9);
font-size:1.4em;
text-align: center;
padding: 5px .5em;
position: relative;
top:-2em;
left: 50%;
transform: translateX(-50%); 
}


.cover{display: block; width:calc(100% - 20px); height:auto; max-width:380px; margin:auto auto 2em auto; border:solid 1px #005D8C; }


.books{width:100%; max-width:820px; margin:0 auto; font-family:'Noto Serif JP';}

@media (min-width: 769px){    
.books{display: flex; align-items: flex-start; justify-content:center;}
}


.books > div{margin:2em 1em;}
.books > div:first-child{min-width: 260px;}

.books .story{display: block; width:140px; height:auto; margin-bottom:12px;}
.books .title{color:#272F92; font-size:1.8em; font-weight: 700; line-height: 1; margin-bottom:.5em;}
.books .auther{font-size:1.2em;}
.books p{margin:6px 0;}
.books span{font-size:1rem; color:#494F6D;}

/*.btn{display:flex; width:100%; max-width:260px; margin:2em auto;}*/

.btn{margin:2em auto; display:flex; justify-content: center;}

.gradient-rotate-btn {
  position: relative; 
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(45deg, #000028, #4136B0, #8F77D8, #FFFFD8);
  background-size: 400% 400%;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(65, 54, 176, 0.5);
  width:100px; 
  height:100px;
  display: block;
  margin:12px;
  border:solid 1px #fff;
}

.gradient-rotate-btn:hover {
  background-position: 100% 100%;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(65, 54, 176, 0.7);
  animation: gradientRotate 2s ease infinite;
}

.gradient-rotate-btn img{display: block; height:18px; width:auto; margin:auto;}

@keyframes gradientRotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (min-width: 769px){
    
.gradient-rotate-btn {
  width:160px; 
  height:160px;
}
    
.gradient-rotate-btn img{height:26px;}
    
/*.btn{display:flex; width:100%; max-width:400px; margin:2em auto;}*/
    
}


/*　footer　*/

@media (min-width: 769px){
footer {
    padding: 20px 0;
}
}
footer {

}

footer .footer__copy {
    text-align: center;
    font-size: 12px;
    color: #fff;
}

footer .footer_link {
    margin: 10px 0;
    color: #fff;
}

footer .footer_link ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-left: -10px;
}

footer .footer_link ul li {
    list-style: none;
}

footer .footer_link ul li:not(:first-child)::before {
    content: "｜";
}

footer .footer_link a {
    color: #fff;
}

.mv{font-size:1.5em; text-align: center; font-weight:bold;}

.link-mv {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.link-mv iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}