/*!
Theme Name: DDPT
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ddpt
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

DDPT is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  line-height: 1.6;
}
* {
  box-sizing: border-box;
}
a {
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}
a:hover {
  color: #D38B25;
}
.pd {
  font-family: 'Playfair Display', serif;
}
.mtr {
  font-family: 'Montserrat', sans-serif;
}

/* Section titles */
.section-title {
  font-size: 3.125rem;
  letter-spacing: 0.3rem;
  text-align: center;
  margin-bottom: 40px;
  color: #D38B25;
  font-weight: 300;
  line-height: 1.5;
}
.section-title2 {
  font-size: 3.125rem;
  letter-spacing: 0.3rem;
  margin-bottom: 40px;
  color: #d4af37;
  font-weight: 300;
  line-height: 1.5;
}
.section-inner {
  padding: 80px 20px;
}

/* Buttons */
.more-btn,
.more-btn2 {
  display: inline-block;
  padding: 10px 0;
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.3s ease;
  width: 240px;
  box-sizing: border-box;
  position: relative;
}
.more-btn {
  border: 1px solid #333;
}
.more-btn:hover {
  background-color: #333;
  color: #fff;
}
.more-btn2 {
  border: 1px solid #fff;
  background-color: #fff;
}
.more-btn2:hover {
  background-color: #000;
  color: #fff;
}
.more-btn span.absol,
.more-btn2 span.absol {
  position: absolute;
  right: 10px;
  height: 6px;
  transform: translateY(-50%);
}
.more-btn span.absol .arrow,
.more-btn2 span.absol .arrow {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 1px;
  margin-top: 2.9px;
  border-radius: 9999px;
  background-color: #000;
  transition: all 0.3s ease;
}
.more-btn span.absol .arrow::before,
.more-btn2 span.absol .arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 5px;
  height: 1px;
  border-radius: 9999px;
  background-color: #000;
  transform: rotate(45deg);
  transform-origin: calc(100% - 0.5px) 50%;
  transition: all 0.3s ease;
}
.more-btn:hover span.absol .arrow,
.more-btn:hover span.absol .arrow::before,
.more-btn2:hover span.absol .arrow,
.more-btn2:hover span.absol .arrow::before {
  background-color: #fff;
}
.more-btn-container {
  text-align: center;
  margin-top: 40px;
}

/* Hero section */
.hero {
  background-image: url(images/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  padding: 200px 0 150px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.55);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 20px;
}
.hero-title {
  font-size: 4rem;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 2px;
}
.hero-subtitle {
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.hero-text {
  font-size: 1.2rem;
  margin-bottom: 5px;
}
.hero-tagline {
  font-size: 1.5625rem;
  margin-top: 20px;
  letter-spacing: -1px;
}
.hero-logo {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  width: 276px;
}

/* About section */
.about {
  background-color: #fff;
}
.about-content { }
.about-text {
  margin-bottom: 20px;
  font-size: 1.1rem;
}

/* Mixgame section */
.mixgame {
  background-image: url(images/mixgame_bg.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
  position: relative;
  overflow: hidden;
}
.mixgame:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  z-index: 1;
}
.mixgame .section-inner {
  position: relative;
  z-index: 2;
  padding: 80px 0;
}
.mixgame-intro {
  margin-bottom: 10px;
  font-size: 1rem;
  color: #fff;
}
.game-cards {
  margin-top: 50px;
  width: 770px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.game-wrap {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.game-card {
  background-color: rgba(255,255,255,0.8);
  border: 1px solid #000;
  border-radius: 15px;
  padding: 15px 25px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  text-align: center;
  width: 240px;
}
.game-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: #495931;
}
.game-subtitle {
  color: #666;
  margin-bottom: 20px;
  border-bottom: 1px solid #495931;
  padding-bottom: 10px;
}
.card-icons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.game-description {
  font-size: 0.75rem;
}
.beast-icons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.beast-icon-row {
  display: flex;
  margin-bottom: 5px;
}
.beast-icon-row span:first-child {
  font-weight: bold;
  width: 20px;
}

/* Event section */
.event {
  background-color: #fff;
}
.event-intro {
  margin-bottom: 10px;
  font-size: 1.1rem;
}
.event-cards {
  margin-top: 50px;
}
.event-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 10px 20px;
  border: 1px solid #495931;
}
.event-card-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.event-category {
  font-size: 12px;
  color: #D38B25;
  margin-bottom: 25px;
}
.event-category.redc {
  color: #BF2604;
}
.event-tags {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0 20px;
}
.event-tag {
  background-color: #fff;
  padding: 2px 10px;
  border-radius: 24px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 12px;
  border: 1px solid #707070;
}
.benefit dt {
  font-size: 14px;
  color: #495931;
}
.benefit dd {
  padding: 10px 0 10px 10px;
  width: 100%;
  box-sizing: border-box;
  background-color: #F6F7F5;
  border-left: 3px solid #495931;
}
.benefit dd p {
  font-size: 12px;
}

/* Information section */
.information {
  background-image: url(images/infomation_bg.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
  position: relative;
  overflow: hidden;
  background-color: #f9f9f9;
}
.information:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  z-index: 1;
}
.information .section-inner {
  position: relative;
  z-index: 2;
  padding: 80px 0;
}
.info-intro {
  color: #fff;
  text-align: center;
}

/* Access section */
.access {
  background-color: #fff;
}
.access-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.access-info {
  flex: 1;
  padding-right: 40px;
}
.access-txt {
  margin-bottom: 30px;
}