@charset "utf-8";

/*
Theme Name: 龍神
Description: 龍神の記憶と目覚めサイト
Version: 1.0
Author: Natural-spi
Author URI: https://webcreatormana.com
*/


:root{

/* Color */
    --white:#fff;
    --black:#000;
    --dark:#1f1f1f;
    --darkopa:rgb(50,50,50,0.7);
    --gold:rgba(250,240,0); 
    --light-gold:rgb(200,200,150);
    --light-goldopa:rgb(200,200,0,0.6);
    --silver:silver;
 

/* Font/Space Size */
    --font-sm: 1rem;
    --font-md: 1.2rem;
    --font-lg: 1.5rem;
    --font-xl: 1.625rem;

}

html{
 font-size: 100%;
}

body {
  background-color: var(--light-gold);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  color:black;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

li {
  list-style: none;
}

p{
  font-size:var(--font-md);
  padding:var(--font-md);
}

/* 普通のリンク */
a {
  color: var(--black);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
 opacity: 0.6;
}

/* メニューのリンク */
.menu_link{
    color: var(--white);
}

/* ボタン */
 .btn{
  width:250px;
  padding:1rem 2rem;
  background:Var(--light-gold);
  text-align:center;
  margin:3rem auto;
  display:block;
  border-radius: 5px;
 }

 /* ページナビ用ボタン 　aクラス名はfunction.phpで設定*/
 .pagenav{
  display:flex;
  justify-content: space-evenly;
  width:fit-content;
  margin:0 auto;
 }

 .pagenav li{
  margin:1rem;
}

 .pagenavi-btn{
  width:100px;
  padding:1rem 0.5rem;
  background:Var(--light-gold);
  text-align:center;
  display:block;
  border-radius: 5px;
 }

 /* タイトル */
h2{
 border-bottom:5px double black;
 margin:1rem;
}

h3{
  font-size: var(--font-lg);
  font-weight: 600;
  position: relative;
  padding-left:2rem;
  color: var(--gray);
  letter-spacing: 0.07em;
  border-bottom: 3px solid black;
  margin-bottom:1rem;

}

h3::before{
  content: "";
  position: absolute;
  left: 0;
  top:0.1rem;
  width: 1.2em;
  height: 1.2em;
  background:var(--light-gold);
  border-radius: 50%;
}


iframe {
  vertical-align: bottom;
}

main {
  padding:1rem 1rem;
}

.wrapper{
  max-width:1040px;
  padding:1rem;
  margin:1rem auto;
  background-color: var(--white);
  border-radius: 30px;
}


/*各カテゴリー説明*/

#explain{
  width:100%;
}

#explain .description{
 font-size:var(--font-md);
 margin-bottom:2rem;
}


/*-------------------------------------------
Header（PC）
-------------------------------------------*/

#header{
  display:flex;
  padding:1rem;
  background-color: var(--black);
}

#header .header-area{
  max-width:300px;
}

/*ロゴ部分*/
#header .header-area .logo{
  text-align:center;
  margin:1rem 0;
  width:100%;
}

#header .header-area .logo a{
    display:block;
}

#header .header-area .navi .menu li{
    margin-left:2rem;
    margin-bottom: 0.1rem;
}

#header .header-area .navi .menu li a{
    font-size:var(--font-md);
}





/*-------------------------------------------
Footer（PC）
-------------------------------------------*/

#footer {
 text-align:center;
 
}

#footer .inner{
  background-image: url("img/top/back.jpg");
  background-size: cover;
  background-position: center;
  height:auto;
  padding:2rem;
}
#footer .menu{
  padding:2rem;
  display:flex;
  justify-content:center;
  flex-wrap: wrap;
}

#footer .menu li{
  padding:1rem;
}

#footer .menu li a{
  
  color:var(--gray);
  font-weight:bold;
}

#footer .copyright{
 width:100%;
 height:5rem;
 background: var(--black);
 color:#fff;
 display:grid;
 place-items: center;
}

/*-------------------------------------------
タブレット
-------------------------------------------*/


@media screen and (max-width: 1024px) {


.wrapper{
    margin:1rem 0.5rem;

}

/*-------------------------------------------
Header（タブレット）
-------------------------------------------*/

#header{
  flex-direction: column;
}

#header .header-area{
  max-width:100%;
}


#header .mainvisual{
  margin-left:0rem;
}

/* nav領域 */
#header .header-area .navi{
  width:100%;
  height:100vh;
  background:darkslategray;
  position:fixed;
  z-index:990;
  top:0;
  left:0;
  opacity:0%;
  visibility: hidden;
  transition:all 1s;
}

#header .header-area .navi.active{
  opacity:80%;
  visibility: visible;
}

#header .header-area .navi .menu{
  width: 100%;
  height: 100vh;
  text-align:center;
  padding:5rem;
  overflow: auto;
}


#header .header-area .navi .menu li{
    margin-bottom: 1rem;
}




/* humbergur */
 #header .hamburger{
   width:3rem;
   height:3rem;
   background-color: var(--light-gold);
   position:fixed;
   top:1rem;
   right:1rem;
   z-index:999;
   border-radius:5px;
   
 }

#header .hamburger span{
    width:2.5rem;
    height:3px;
    background-color: var(--darkopa);
    position:absolute;
    z-index:1000;
    left:10%;
    transition:all 0.5s;
}

#header .hamburger span:nth-child(1){
 top:30%;
}

#header .hamburger span:nth-child(2){
 top:50%;
}

#header .hamburger span:nth-child(3){
 top:70%;
}


#header .hamburger.active span:nth-child(1){
 top:50%;
 transform: rotate(45deg);
}

#header .hamburger.active span:nth-child(2){
 display: none;
}

#header .hamburger.active span:nth-child(3){
 top:50%;
 transform: rotate(-45deg);
}



/*-------------------------------------------
Footer（タブレット）
-------------------------------------------*/

#footer .menu li{
  padding:0.1rem 1rem;
}

#footer .menu li a{

 display:block;
}

}



/*-------------------------------------------
スマートフォン
-------------------------------------------*/

@media screen and (max-width: 767px) {

/*-------------------------------------------
共通設定（スマートフォン）
-------------------------------------------*/



h3{
  font-size: var(--font-md);
}

p{
  font-size:var(--font-sm);
  padding:1rem;
}




/*-------------------------------------------
Header（スマートフォン）
-------------------------------------------*/



/*-------------------------------------------
Footer（スマートフォン）
-------------------------------------------*/



}