@charset "utf-8";

div.container {
max-width: 700px;
margin: 0px auto;
padding-top: 60px
}

/*--------------------nav--------------------*/

nav.nav{
width: 100%;
max-width: 700px;
height: 60px;
background: #d91023;
position: fixed;
top:0px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 3%;
z-index: 12
}

a.nav_logo{
width: 35%;
max-width: 150px
}

div.nav_right{
width: max-content;
display: flex;
align-items: center
}

div.gtranslate_wrapper{
width: 90px;
height: 36px;
}

.gtranslate_wrapper select {
text-align: center;
border-radius: 18px;
background: url(../img/nav/world-wide-web-wh.png) no-repeat left 12px center;
background-size: 16px;

color: #fff;
font-family: "Oswald", sans-serif;
font-size: 14px;
appearance: none;
cursor: pointer;
border:solid 1px #fff;;
min-width: 60px;
text-indent:30px
}

.gtranslate_wrapper select::-ms-expand {
display: none;
}

div.menu-trigger{
position: relative;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
text-align: center
}

a.menu-trigger,
a.menu-trigger span {
display: inline-block;
transition: all .4s;
position: relative;
}

a.menu-trigger {
width: 34px;
height: 16px;
margin-bottom: 2px
}

p.menu-trigger{
font-family: "Alfa Slab One", serif;
font-weight: 200;
font-size: 12px;
font-style: normal;
color: #fff
}

a.menu-trigger span {
position: absolute;
right: 0;
width: 100%;
height: 1px;
background: #fff;
}


div.menu-trigger a.menu-trigger{
position: relative;
display: inline-block;
width: 36px;
height: 16px;
}

div.menu-trigger a.menu-trigger span{
position: absolute;
left: 0; 
right: auto !important;
width: 100%;
height: 1px; 
background: #999; 
overflow: hidden;
}

div.menu-trigger a.menu-trigger span::before{
content: "";
position: absolute;
left: 0; top: 0;
width: 100%; 
height: 100%;
background: #fff;
transform-origin: left center; 
transform: scaleX(0.6); 
animation: eqBar 1.2s ease-in-out infinite alternate;
}

div.menu-trigger a.menu-trigger span:nth-of-type(2)::before{
animation-duration: 1.4s;
animation-delay: .1s;
}
div.menu-trigger a.menu-trigger span:nth-of-type(3)::before{
animation-duration: 1.0s;
animation-delay: .2s;
}

@keyframes eqBar{
0% { transform: scaleX(0.2); }
25%{ transform: scaleX(0.9); }
50%{ transform: scaleX(0.4); }
75%{ transform: scaleX(0.8); }
100% { transform: scaleX(0.5); }
}


@media (prefers-reduced-motion: reduce){
div.menu-trigger a.menu-trigger span::before{ animation: none !important; }
}

a.menu-trigger span:nth-of-type(1) {
top: 0;
}
a.menu-trigger span:nth-of-type(2) {
top: 7px;
}
a.menu-trigger span:nth-of-type(3) {
bottom: 0;
}

a.menu-trigger.active span:nth-of-type(1) {
-webkit-transform: translateY(7px) rotate(-45deg);
transform: translateY(7px) rotate(-45deg);
background: #fff!important;
}

a.menu-trigger.active span:nth-of-type(2) {
opacity: 0;
}

a.menu-trigger.active span:nth-of-type(3) {
-webkit-transform: translateY(-7px) rotate(45deg);
transform: translateY(-7px) rotate(45deg);
background: #fff!important;
}

.menuIn{
animation-fill-mode:both;
animation-duration:0.5s; 
animation-name: menuIn;
display: block!important;
}
 
@keyframes menuIn {
0% { opacity: 0;}
100% {opacity: 100;}
}

/*--------------------header--------------------*/

menu.menu{
width: 100%;
height: 100%;
background: #fff;
position: fixed;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}

li.menu{
width: 100%;
position: absolute;
top:50%;
transform: translateY(-50%);
padding: 0px 5%
}

a.menu{
display: block;
font-family: "Alfa Slab One", serif;
color: #d91023;
font-weight: 200;
font-size:16px;
border-bottom: solid 1px #efefef;
padding: 15px 0px;
display: flex;
align-items: center
}

a.menu span{
font-size: 12px;
font-family: "Zen Kaku Gothic New", sans-serif;
color: #666;
display: flex;
align-items: center
}

a.menu span:before{
content: "";
width: 20px;
height: 1px;
background: #999;
margin-left: 10px;
margin-right: 5px
}

/*--------------------header--------------------*/

section#about{
background: url(../img/header/ali_4683-2.jpg) no-repeat center;
background-size: cover;
position: relative;
}

section#about:before{
content: '';
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(217,16,35,0.8);
}

h2.section{
font-family: "Alfa Slab One", serif;
font-weight: 100;
font-size:22px;
margin-bottom: 10px
}

h3.about,article.about{
position: relative;
z-index: 1;
top:-40px
}

h3.about{
top:-60px;
width: 94%;
margin: 0px auto;
}

article.about{
text-align: center;
color: #fff
}

h1.section{
font-size:15px;
margin-bottom: 20px
}

h4.about{
font-size:20px;
margin-bottom: 20px
}

p.txt{
width: 92%;
margin: 0px auto;
font-weight: 500;
font-size: 14px;
line-height: 1.6
}

/*--------------------youtube--------------------*/

section#youtube{
padding: 30px 5%
}

h2.youtube{
font-family: "Alfa Slab One", serif;
font-weight: 100;
font-size:20px;
margin-bottom: 5px;
color: #d91023;
display: flex;
align-items: center;
gap: 5px
}

h2.youtube:after{
content: '';
width: 26px;
height: 26px;
background: url(../img/youtube/youtube_logo_icon_168737.png) no-repeat center;
background-size: cover;
}

h3.section{
font-size:13px;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
color: #444;
margin-bottom: 30px;
line-height: 1.4
}

h3.section:before{
content: '';
width: 30px;
height: 1px;
background: #444
}

.video-box {
position: relative;
width: 80%;
aspect-ratio: 9 / 16;
background-color: #000;
cursor: pointer;
overflow: hidden;
margin: 0 auto;
}

.video-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: white;
pointer-events: none;
}

.responsive-video {
width: 100%;
height: 100%;
object-fit: cover;
}

.video-tabs {
display: flex;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
justify-content: center;
}

.video-tab {
padding: 10px 26px;
background-color: #ddd;
color: #333;
border: none;
cursor: pointer;
font-weight: bold;
border-radius: 4px;
}

.video-tab.active {
background-color: #333;
color: #fff;
}

.video-box {
position: relative;
width: 74%;
aspect-ratio: 9 / 16;
background-color: #000;
cursor: pointer;
overflow: hidden;
margin: 0 auto;
}

.video-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: white;
pointer-events: none;
}

.responsive-video {
width: 100%;
height: 100%;
object-fit: cover;
}


/*--------------------member--------------------*/

section#member{
background: #d91023;
padding: 30px 5%;
color: #fff
}

section#member h3.section{
color: #fff;
}

section#member h3.section:before{
content: '';
background: #fff
}

div.member{
display: flex;
align-items: start;
gap: 15px;
margin-bottom: 30px
}

div.member:nth-of-type(2) {
flex-direction: row-reverse;
}

p.member_image {
width: 40%;
clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
overflow: hidden;
}

article.member{
width: calc(60% - 15px)
}

h2.member{
width: 100%;
font-size: 18px;
display: flex;
align-items: end;
justify-content: space-between;
border-bottom: solid 1px #fff;
padding-bottom: 8px;
margin-bottom: 8px
}

h2.member span{
font-size: 70%
}

h5.member{
font-size: 15px;
text-align: right;
font-family: "Libre Baskerville", serif;
font-weight: 400;
margin-bottom: 15px
}

p.member{
font-size: 13px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
font-style: normal;
}

h4.member{
font-size: 13px;
text-align: center;
font-family: "Zen Kaku Gothic New", sans-serif;
}

/*--------------------folklore--------------------*/

section#folklore{
padding: 30px 5%;
background: url(../img/folklore/image.png) no-repeat center;
background-size: cover;
color: #fff;
position: relative
}

section#folklore:before{
content: '';
width: 100%;
height: 100%;
position: absolute;
left:0px;
top:0px;
background: rgba(0,0,0,0.7)
}

section#folklore h2{
color: #d91023;
position: relative;
z-index: 1
}

section#folklore h3.section{
color: #fff;
position: relative;
z-index: 1
}

section#folklore h3.section:before{
content: '';
background: #fff
}

article.folklore{
position: relative;
z-index: 1
}

h1.folklore{
font-size: 16px
}

h1.folklore span{
text-align: center;
font-weight: 400;
transform: scale(2, 0.6);
display: inline-block;
margin: 0px 10px;
margin-bottom: 30px
}

p.folklore{
font-size: 13px;
text-align: justify;
font-weight: 500;
font-family: "Zen Kaku Gothic New", sans-serif;
margin-bottom: 20px
}


/*--------------------contact--------------------*/

section#contact{
padding: 30px 5% 60px 5%;
}

section#contact h2{
color: #d91023;
}

p.contact{
margin-bottom: 5px;
font-size: 14px;
font-weight: 500
}

p.content_lead{
font-size: 14px;
font-weight: 500;
margin-bottom: 30px
}

label.input{
width: 100%;
height: 50px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
color: #000;
margin-bottom: 20px;
}

input[type="text"],input[type="email"],input[type="tel"]{
width: 100%;
height: 100%;
border:none;
background: transparent;
font-size:15px;
padding-left: 10px;
font-weight: 500
}

label.select{
width: 50%;
height: 50px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
color: #000;
position: relative;
margin-bottom: 20px
}

label.select:after{
content: '▼';
position: absolute;
top:50%;
transform: translateY(-50%);
right: 10px
}

select{
width: 100%;
height: 100%;
border:none;
background: #fff;
appearance: none;
padding-left: 10px
}

label.short{
width: 70%!important
}

label.textarea{
width: 100%;
height: 150px;
border-radius: 5px;
display: block;
background: #fff;
overflow: hidden;
border:solid 1px #dcdcdc;
margin-bottom: 15px;
color: #000;

}

textarea {
font-weight: 500;
width: 100%;
height: 100%;
padding: 10px;
font-size: 15px;
line-height: 1.5;
background: transparent;
resize: vertical; 
border:none;
padding: 15px
}

input[type="submit"],input[type="button"]{
width: 80%;
max-width: 300px;
height: 50px;
display: block;
background: #d91023;
-webkit-appearance: none;
border:none;
font-weight: 600;
color:#fff;
border-radius: 5px;
}

input[type="submit"]:hover,input[type="button"]:hover{
cursor: pointer;
opacity: 0.7;
}

a.complete{
width: 80%;
max-width: 300px;
text-align: center;
line-height: 50px;
height: 50px;
color: #fff;
display: block;
background: #999;
border-radius: 5px;
margin-top: 20px
}

div.check{
font-weight: 500;
margin-bottom: 30px
}

input[type="checkbox"]{
width: 100%;
height: 100%;
border:none;
box-shadow: none;
border-radius: 0px;
}

label.checkbox{
width: 20px;
height: 20px;
border:solid 1px #dcdcdc;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

a.checkbox{
text-decoration: underline;
font-weight: 500
}

a.checkbox:hover{
text-decoration: none;
}

/*--------------------footer--------------------*/

footer.footer{
background: #d91023;
padding: 30px 0px 0px 0px;
color: #fff;
text-align: center
}

img.footer_logo{
width: 60%;
max-width: 300px;
margin: 0px auto;
position: relative;
top:-70px
}

article.footer{
position: relative;
top:-40px;
}

h4.footer{
margin-bottom: 10px;
font-weight: 500;
letter-spacing: 0.05em;
font-size: 13px
}

h3.footer{
font-size:16px;
font-weight: 500;
letter-spacing: 0.05em;
margin-bottom: 30px
}

div.news_page_share{
display: flex;
align-items: center;
gap: 15px;;
justify-content: center;
margin-bottom: 50px
}

a.news_page_share{
display: block;
height: 18px;
}

a.news_page_share img{
height: 18px;
}

a.privacy{
display: block;
width: max-content;
background: #fff;
padding: 15px 30px;
border-radius: 5px;
color: #d91023;
margin: 0px auto 30px auto;
}

ol.contents {
border-top: solid 1px #dcdcdc;
border-bottom: solid 1px #dcdcdc;
width: 100%; 
margin: 0px auto;
text-align: right;
padding: 15px 4%
}

ol li{
display:inline-block;
vertical-align: middle
}

ol li:after{
content: '»';
font-size: 14px;
margin: 0px 5px 0px 5px;
color:#999
}

ol li:last-child:after{
content: '';
display: none;
}

a.breadcrumb span{
text-decoration: none;
font-weight: 500;
font-size:12px;
}

ol li:first-child a{
background: url(../img/icon/home.png) no-repeat left center;
background-size: 12px;
padding-left: 20px;
}

ol li a:hover {
text-decoration: underline;
}

/*--------------------privacy--------------------*/

article.privacy{
width: 100%;

margin: 0px auto;
padding: 15px;

margin-bottom: 20px;
text-align: justify;

}

h5.privacy{
font-size:15px;
margin-bottom: 15px;
color:#444;
}

p.privacy{
font-size:12px;
line-height: 1.8;
margin-bottom: 30px;
color:#444;
font-weight: 500
}