body , main {
overflow-x: clip;
}

/*<weight>: Use a value from 100 to 900
<uniquifier>: Use a unique and descriptive class name
*/
body , main , p , h1 , h2 , h3 , a , b , span , strong ,li {
font-family: "Noto Sans JP","Noto Sans",sans-serif;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
}




/*<weight>: Use a value from 200 to 700
<uniquifier>: Use a unique and descriptive class name */

#hd_contents a p:nth-child(3) , #lng a , #pg_container h2 span ,
#news_container h2 span , .date , .button a , button ,
#outline_title h2 span , .stage_no p , .stage_no span , .en #hd_contents h1 {
font-family: "Anton" , "Oswald" !important;
font-weight: 400;
font-style: normal;
}

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 150px;
z-index: 1000;
background: #fff;
}

#hd_contents {
display: flex;
align-items: center;
width: 80%;
height: 100%;
margin-left: 5%;
}

#hd_contents a {
text-decoration: none;
}

#tu_logo {
width: 120px;
min-width: 120px;
}

#hd_contents a {
text-decoration: none;
}

#hd_contents a p {
color: #666464;
}

.sp-only {
display: none;
}

h1 {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
color: #008ECF;
}

#hd_contents a p:nth-child(3) {
font-size: 0.8rem;
padding-top: 5px;
}

.en h1 {
font-size: 1.2rem;
}

.tb-only {
display: none;    
}


@media (max-width: 768px) {
.sp-only {
display: block;
}
}


@media (max-width: 1024px) {

#hd_contents {
margin-left: 1%;
}

#tu_logo {
width: 100px;
min-width: 100px;
}

h1 {
font-size: 1.25rem;
line-height: 1.1;
}

#hd_contents a p {
margin-bottom: 5px;
font-size: 0.875rem;
line-height: 1.1;
letter-spacing: -0.08em;
}

#hd_contents a p:nth-child(3) {
font-size: 0.75rem;
letter-spacing: 0em;
padding-top: 10px;
}

.tb-only {
display: block;
}


}

@media (max-width: 768px) {
header {
height: 100px;
}

#hd_contents {
width: 85%;
}

#tu_logo {
width: 80px;
min-width: 80px;
}

.sp-only {
display: block;
}


h1 {
font-size:2.8vw;
line-height: 1.2;
}

#hd_contents a p {
margin-bottom: 3px;
font-size: 1.8vw;
line-height: 1.1;
letter-spacing: -0.08em;
}

/*
#hd_contents a p:nth-child(3) {
display: none;
}
*/

#hd_contents a p:nth-child(3) {
font-size: 0.5rem;
padding-top: 3px;
}

.en h1 {
font-size: 2.5vw;
line-height: 1.2;
}
}

@media (max-width: 480px) {


#tu_logo {
width: 60px;
min-width: 60px;
}
}


/* メニューのスタイル */
nav {
position: fixed;
top: 150px;
right: -100%; /* 初期状態では画面の外に隠れている */
max-width: 600px;
height: 280px;
padding: 20px 5% 20px 20px;
box-sizing: border-box;
border-radius: 0 0 0 10px;
background-color: #f0f0f0;
color: #333;
transition: right 0.3s ease;
z-index: 10;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}

/* メニューが開いているとき */
nav.open {
right: 0;
}

/* ボタンのスタイル */
nav #hm {
position: fixed;
top: 25px;
right: 5%;
width: 35px;
cursor: pointer;
z-index: 20;
}

nav #hm span {
display: block;
height: 3px;
width: 100%;
background-color: #333;
margin: 8px 0;
transition: 0.4s;
}

/* バツ印に変化するスタイル */
nav #hm.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}

nav #hm.active span:nth-child(2) {
opacity: 0;
}

nav #hm.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}

nav #lng {
position: fixed;
top: 70px;
right: 5%;
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #666464;
letter-spacing: 0.1rem;
z-index: 30;
}

nav #lng a {
color: #ffffff;
text-decoration: none;
}

nav #lng:hover {
text-decoration: none;
background-color: #008ECF;
color: #ffffff;
transition: 0.5s;
}

/* メニューリストのスタイル */
nav ul {
width: 400px;
list-style-type: none;
padding: 20px 0 0 0;
}

nav li {
padding: 20px 0;
border-bottom: 1px dashed #444;
}

nav li a {
position: relative;   
display: block;
padding: 0 0 0 30px;
font-weight: bold;
text-decoration: none;
color: #444444;
}


nav li a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 15px;
border-color: transparent transparent transparent #444444; 
}

nav li a:hover {
text-decoration: none;
color: #008ECF;
transition: 0.5s;
}

@media (max-width: 768px) {

nav  {
top: 100px;
width: 100%;
max-width: 100%;
height: 300px;
border-radius: 0 0 0 0px;
}

nav #hm {
position: fixed;
top: 10px;
right: 2%;
}

nav #lng {
top: 55px;
right: 2%;
width: 35px;
height: 25px;
}

nav #lng a {
font-size: 0.875rem;
}
}

.back_04 {
width: 100%;
background-image: url(../img/base/back_01.jpg);
background-repeat: no-repeat;
background-position: center 130px;
background-size: cover;
}

#banner {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1000px;
margin: 0 auto;
margin-top: 50px;
margin-bottom: 20px;
padding: 0 5%;
gap: 10px;
}

#banner img {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border: #afafaf 2px solid;
}

#contact {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 150px 5% 50px 5%;
}

#contact h2 {
margin-bottom: 40px;
font-size: 1.625rem;
font-weight: 600;
color: #707070;
}

address {
text-align: center;
color: #707070;
}

strong {
margin-bottom: 30px;
font-size: 1.125rem;
line-height: 1.6;
}

address p:nth-child(2) {
margin-top: 10px;
}

address p {
line-height: 1.6;
}

#copyright {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
color: #ffffff;
background-color: #707070;
font-size: 0.75rem;
}

@media (max-width: 768px) {

.back_04 {
background-position: center 180px;
}

#banner {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2等分された列を2つ */
}

#contact {
padding: 100px 5% 50px 5%;
}

#contact h2 {
margin-bottom: 25px;
font-size: 1.5rem;

}

strong {
margin-bottom: 30px;
font-size: 1rem;
line-height: 1.6;
}

address p {
font-size: 0.875rem;
line-height: 1.6;
}

#copyright {
height: 80px;
padding: 10px;
}
}

/*  ::::: scroll :::::　*/

.scrollFade{
opacity:0;
transform:translateY(60px);
transition:1s;
}

.scrollFade.show{
opacity:1;
transform:translateY(0);
}


.fadeStart{
opacity:0;
transform:translateY(40px);
animation:fadeUp 1s ease forwards;
}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}