@charset "utf-8";
/* CSS Document */

/*全体について----------------------------------------------------*/
body {
 font-family: "Kaisei Opti", serif;
  font-weight: 400;
  font-style: normal;
    background: url("../images/dummy.png") top center no-repeat;
	background-size: cover;
	color: #FFFFFF;
	background-color: #34224E;
}
/*フォントについて----------------------------------------------------*/
h1{
	font-size: 96px;
	font-weight: 900;
	color: #27C693;
	margin-bottom: 10px;
	text-shadow: 3px 3px 0 #FF7A00; /* テキストの影を指定（[左右][上下][ぼかし][影の色]） */
	margin-top: -30px;
}
.moji_logo{
	font-size: 28px;
	color: #40E0D0;
	vertical-align:middle;
	margin-ri: 15px;
}
H2{}
H3{}
H4{}

.moji_rotation{
	font-size: 40px;
	font-weight: 500;
	color: #E8E7D9;
	text-shadow:
    0 0 20px #f90,
    0 0 50px #fff,
    0 0 150px #0fa;
	transform:rotate(330deg);
/*	transform-origin:0 0;*/
	margin-bottom:10px;
	margin-left: -470px;
}

.moji_orange{
	font-size: 48px;
	font-weight: 600;
	color: #FF7A00;
	line-height: 65px;
	padding-top: 180px;
}

.moji_white{
	color: #E8E7D9;
  text-shadow:
    0 0 20px #f90,
    0 0 0px #f90,
    0 0 150px #0fa;
	font-size: 50px;
	font-weight: 600;
	padding-top: 25px;
	padding-bottom: 10px;
	}

.moji_36{
	font-size: 36px;
	padding-top: 5px;
	padding-bottom: 10px;
}

.moji_24{
	padding: 20px auto;
	font-size: 24px;
	margin: 25px auto;
	line-height: 36px;
}

.moji_y{/*ABOUTの中のカラフル文字*/
	color: #FFFF00;	
}
.moji_p{/*ABOUTの中のカラフル文字*/
	color: #EA3DA6;
}

.mark{/*メキシコ下線分*/
	background: linear-gradient(transparent 70%, #246769 20%);
	font-weight: bold;
}

/*fvについて----------------------------------------------------*/
#fv{
	padding-top: 190px;
}
header {
    background: url("../images/fv_bg1.gif") top center no-repeat;
	/*background: url("../images/fv_bg1.png") top center no-repeat;*/
	background-size: cover;
	height:900px;
	text-align: center;
}

#header_bg {
    background: url("../images/nav_bg.png") top center no-repeat;
	background-size: cover;
	height:284px;
	text-align: center;	
}


.hola{
	animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center bottom;
}

@keyframes bounce {
    0%   { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態 */
    50%  { transform: scale(1.0, 1.0) translate(0%, -5%); } /* バウンド開始 */
    100% { transform: scale(1.0, 1.0) translate(0%, 0%); } /* 初期状態に戻る */
}

/* Loading背景画面設定--------------------------------------------*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	text-align:center;
}


/*navについて----------------------------------------------------*/
nav ul {
    list-style: none;
    text-align: center;
	font-family: "Unbounded", sans-serif;
  	font-optical-sizing: auto;
 	 font-weight: 600;
 	 font-style: normal;
	font-size: 28px;
	padding-top: 90px;
}

nav ul li {
    display: inline;
    margin: 0 1rem;
}

nav ul li a {
    color: #E8E7D9;
    text-decoration: none;
}

nav ul li a:hover{/*ホバーした時の変化*/
	color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #f90,
    0 0 82px #f90,
    0 0 151px #0fa;
}

/*mainについて----------------------------------------------------*/
#about{
	background: url("../images/about_bg1.gif") top center no-repeat;
	background-size: cover;
	height:1080px;
	text-align: center;
}

/*eventについて----------------------------------------------------*/
#event{
	background: url("../images/event1.png") top center no-repeat;
	background-size: cover;
	height: 1780px;
	text-align: center;
	padding-top: 310px;
	position: relative 
}

.decoration_e{
 position: absolute;
}
.deco1{
	top: 350px;
  left: -50px;
	filter:drop-shadow(-10px 10px 1px #000);
}
.deco2{
	top: 880px;
  left: 120px;
	filter:drop-shadow(-10px 10px 1px #000);
}
.deco3{
	top: 780px;
  right: 20px;
	filter:drop-shadow(10px 10px 1px #000);
}
.deco4{
	top: 400px;
  right: 0px;
	filter:drop-shadow(10px 10px 1px #000);
}

.yu-rayura{
	transform-origin: center bottom;
    animation: yu-rayura 1s linear infinite;
}

.yurayu-ra{
	transform-origin: center bottom;
    animation: yurayu-ra 2s linear infinite;
}


@keyframes yu-rayura {
  0% , 100%{
      transform: rotate(2deg);
  }
  50%{
      transform: rotate(-2deg);
  }
}

@keyframes yurayu-ra {
  0% , 100%{
      transform: rotate(-3deg);
  }
  50%{
      transform: rotate(1deg);
  }
}


.modal {
  padding: 70px 0 50px 0;
}

.inner_up {
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: 0 20px;
}

/* モーダルを開くボタン */
.modal__cards {
  display: flex;
	justify-content: space-between;
}

.modal-card{
	cursor: pointer;
}

.modal-card:hover {
	transform:  translateY(-15px);
	box-shadow:
    0 0 10px #fff,
    0 0 15px #ff0,
    0 0 100px #f90;
}

.modal-card__image1 {
	background: url("../images/パパペルカド_1.png")no-repeat;
  position: relative;
	width: 372px;
	height: 646px;
}

.modal-card__image1:hover{
	background: url("../images/パパペルカド_1_h.png")no-repeat;
}

.modal-card__image2 {
	background: url("../images/メイク_1.png")no-repeat;
  position: relative;
	width: 372px;
	height: 646px;
}

.modal-card__image2:hover{
	background: url("../images/メイク_1_h.png")no-repeat;
}

.modal-card__image3 {
	background: url("../images/食事_1.png")no-repeat;
  position: relative;
	width: 372px;
	height: 646px;
}

.modal-card__image3:hover{
	background: url("../images/食事_1_h.png")no-repeat;
}

.modal-card__image4 {
	background: url("../images/ステージ_1.png")no-repeat;
  position: relative;
	width: 372px;
	height: 646px;
}

.modal-card__image4:hover{
	background: url("../images/ステージ_1_h.png")no-repeat;
}

.modal-card__image5 {
	background: url("../images/オフレンダ_1.png")no-repeat;
  position: relative;
	width: 372px;
	height: 646px;
}

.modal-card__image5:hover{
	background: url("../images/オフレンダ_1_h.png")no-repeat;
}



/* モーダル本体ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.modal__layer_up {
  height: 100%;
  background: rgba(90, 10, 90, .9);
  cursor: pointer;
	background-image: url("../images/旗2.png");
}

.modal__layer_down {
  height: 100%;
  background: rgba(10, 40, 100, .9);
  cursor: pointer;
	background-image: url("../images/オフレンダ1.png");
}

.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(calc(100% - 40px), 1100px);
  /*height: calc(100% - 40px);*/
  padding: 20px;
  background: #1D0F30;
}

.modal__inner {
  position: relative;
  height: 100%;
  padding: 80px 20px 20px;
}

/* モーダルを閉じるボタン */
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: #DA3A60;
  cursor: pointer;
  transition: opacity .1s;
}

.modal__close:hover {
  opacity: .2;
}

.modal__close:before,
.modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: '';
}

.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダル内のコンテンツ */
.profile__group {
  display: flex;
  align-items: flex-start;
	margin-bottom: 40px;
}

.profile__image {
  position: relative;
	width: 558px;
	height: 498px;
}

.profile__image:before {
  display: block;
  padding-top: 180%;
  content: '';
}

.profile__image img {
  position: absolute;
  top: 0;
  left: 0;
 width: 100%;
  height: 100%;
  object-fit: contain;
}
.slider_image{
	position: absolute;
  top: 0;
  left: 0;
 /* object-fit: contain;*/
	width: 427px;
    height: 640px;
    overflow-x: hidden;
	overflow-y: hidden;
}

.profile__content {
  width: calc(100% - 200px);
  padding-left: 50px;
}

.profile__title {
	margin-top: 50px;
	margin-bottom: 30px;
  font-size: 48px;
	color: #FDAF1A;
	font-weight: 600;
}

.profile__text {
	font-size: 20px;
	color: #FFD700;
	font-weight: 500;
  margin-top: 10px;
  line-height: 1.5;
}
.profile__texts{
	font-size: 16px;
	color: #FFD700;
	font-weight: 500;
  margin-top: 10px;
  line-height: 1.2;
}

.profile__textl{
	font-size: 14px;
	color: #FFFF00;
	font-weight: 300;
  margin-top: 20px;
	margin-left: 80px;
  line-height: 1.2;
	text-align: left;
}

.inner_down {
  width: min(100%, 1300px);
  margin: 0 auto;
  padding: 0 20px;
}

/*スライダー-------------------------------------------------------------*/

/* スライダ―のCSS */

.slider {
    width: 2000px;
    height: 640px;
    display: flex;
    gap: 5px;
    overflow-x: hidden;
}
.slide {
    width: 427px;
    /*アニメーション設定*/
    animation-name: slide;
    animation-timing-function: linear;
    animation-duration: 15s;
    animation-iteration-count: infinite;
}
@keyframes slide {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-1700px);
    }
}

/*eventについて----------------------------------------------------*/
#mexico{
	background: url("../images/mexico3.png") top center no-repeat;
	background-size: cover;
	height: 2050px;
	text-align: center;
	padding-top: 510px;
	position: relative 
	z-index: -1;
}
#mexico_t{
	text-align: left;
	margin-left: 580px;
}

/*フッター-------------------------------------------------------------*/
footer{
	text-align: center;
	background: #8840DE;
	 line-height: 2em;
	padding-bottom: 20px;
}

/*Q&A setting-------------------------------------------------------------*/
#QA { 
  padding: 10px 0 150px 0;
	/*background: url("../images/QA_bg.png") top center no-repeat;*/
	background: url("../images/QA_bg.gif") top center no-repeat;
	background-size: cover;
	height: auto;
}


#QA heading {
  text-align: center;
}

#QA heading h4 {
  font-size: 20px;
  font-weight: 500;
  color: #FFFFFF;
}
/*Q&Aアコーディオン全体ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.accordion-area {
	padding-top: 280px;
  list-style: none;
  width: 50%;
  margin: 0 auto;/*中心に寄せている*/
}
.accordion-area li {
  margin: 5px 0;
}
.accordion-area section {
    border-radius: 300px; /*角丸*/
	border: solid 5px #FC5AD8;
	background-color: #34224E;
    padding: 5px 0;
    margin-bottom: 15px;
}
/*アコーディオンタイトル*/
.title {
  position: relative; /*+マークの位置基準とするため・基準BOXにする*/
  cursor: pointer;/*カーソルを乗せたときに形状を変化させる*/
  padding: 10px;
}
/*アイコンの＋と×----------------------------------------------------*/
.title::before, .title::after {
  position: absolute;
  content: '';/*場所*/
  width: 15px;/*大きさ*/
  height: 3px;/*線の太さ*/
  background-color: #FC5AD8;
}
.title::before {/*横棒の設定*/
  top: 48%;
  left: 160px;
  transform: rotate(0deg);/*回転*/
}
.title::after {/*縦棒の設定*/
  top: 48%;
  left: 160px;
  transform: rotate(90deg);/*回転*/
}
/*形状変化----------------------------------------*/
.title.close::before {
  transform: rotate(45deg);
}
.title.close::after {
  transform: rotate(-45deg);
}
/*アコーディオンで現れるエリア*/
.box {
  display: none; /*はじめは非表示*/
  background: #FC5AD8;
  font-weight: 500;
    width: 80%;
  margin: 15px auto;
  padding: 10px 30px;
	border-radius: 20px;
}
.box_moji{
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
	 line-height: 1.5em;
}











.vewmore {
	margin-top: -50px;
}