@charset "utf-8";

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

@import url("slide.css");
@import url("inview.css");

:root {
	
--bg-color: #053560;
--bg-inverse-color: #fcfcfc;
	
--primary-color: #003f78;
--primary-inverse-color: #fcfcfc;
--gradient-main: linear-gradient(270deg, #0055a2, #053560, #0055a2);
	
--content-space: 8.33vw; 

--headerH: 70px;
--headerM: 3rem;

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

	:root {
		--content-space: 10px;
}
}

@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}

@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.1) rotate(-30deg);}
	100% {opacity: 1;transform: scale(1) rotate(0deg);}
}

body * {box-sizing: border-box;}
html,body {
	font-size: 16px;
}

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

	html, body {
		font-size: 13px;
}
}


body {
margin: 0;
padding:0;
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
font-weight: 300;
-webkit-text-size-adjust: none;
background: var(--bg-color);
color: var(--bg-inverse-color);
line-height: 2.3;
letter-spacing: 0.08em;
overflow-x: hidden;
}

figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

table {border-collapse:collapse;}

img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

video {max-width: 100%;}

iframe {width: 100%;}

input {font-size: 1rem;}
section > ol,section > ul {margin-left: 2rem;}

section {
padding: 0 var(--content-space);
margin: 5vw 0;
}

a {
color: inherit;
transition: 0.3s;
}

p {
font-size: auto;
text-align: justify;
white-apace: nowrap;
}
p2 {
	font-weight: 600;
}

a:hover {
	text-decoration: none;
}

@keyframes gradientMove {
0% {
background-position: 0% 50%;
}
0% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.btn-gradient-animated {
display: flex;
background: var(--gradient-main);
background-size: 300% 300%;
color: white;
border: none;
padding: 14px 36px;
font-size: 16px;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
animation: gradientMove 6s linear infinite;
margin: auto;
text-align: center;
}

.btn-gradient-animated:hover {
transform: translateY(-2px);
}

.btn-outline {
display: flex;
background: var(--gradient-main);
background-size: 300% 300%;
color: white;
border: none;
padding: 10px 24px;
font-size: 16px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
animation: gradientMove 6s linear infinite;
}

.btn-outline:hover {
transform: translateY(-2px);
}

.bottom-banner {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 92%;
display: flex;
justify-content: space-between;
gap: 12px;
padding: 30px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 9999;
}

.banner-btn {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: var(--gradient-main);
background-size: 300% 300%;
animation: gradientMove 6s linear infinite;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
border: 1px solid rgba(255,255,255,0.8);
transition: all 0.3s ease;
padding: 14px 36px;
line-height: 1.1;
font-size: 16px;
cursor: pointer;
}
.banner-btn {
  gap: 8px;
}

.banner-btn:hover {
transform: translateY(-2px);
}


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

.bottom-banner {
bottom: 10px;
width: 95%;
padding: 20px;
}

.banner-btn {
padding: 12px 16px;
line-height: 1.1;
font-size: 15px;
white-space: nowrap;
}

}

.btn-back,
.c-btn{
    padding:12px 40px;
    border:none;
    cursor:pointer;
    font-size:16px;
    background:#05273f;
    color:#fff;
    display:block;
    margin:0 auto;
}

.btn-back{
    background:#ccc;
}

.c-btn{
    background:#05273f;
    color:#fff;
}

.c-btn:hover{
    opacity:0.8;
}

.bottom2-banner {
position: fixed;
top: 160px; 
right: 45px;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
z-index: 9998;
}

.banner2-btn {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: var(--gradient-main);
background-size: 300% 300%;
animation: gradientMove 6s linear infinite;
border-radius: 50%;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
border: 1px solid rgba(255,255,255,0.8);
transition: all 0.3s ease;
font-size: 13px;
line-height: 1.1;
cursor: pointer;
}

.banner2-btn:hover {
  transform: translateY(-2px);
}

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

.bottom2-banner {
top: 140px;
right: 39px;
width: 70px;
height: 70px;
}

.banner2-btn {
font-size: 12px;
}
}

#container {
animation: opa1 0.2s 0.4s both;
display: grid;
grid-template-rows: auto 1fr;
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
}

body:not(.home) #container {
	grid-template-rows: 1fr;
}

header {
position: fixed;
z-index: 10;
width: calc(100% - 6rem);
margin: var(--headerM);	
overflow: hidden;
background: rgba(0,0,0,0.3);
border-radius: 0px;
display: flex;
align-items: center;
gap: 2rem;
line-height: 1.5;
height: var(--headerH);	
box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
transition: transform 0.5s ease, opacity 0.5s ease;	
padding: 0 calc(var(--headerH) + 2rem) 0 2rem;
}

.site-header.is-hide {
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
}


@media screen and (max-width:800px) {
header {
position: absolute;
background: transparent;
box-shadow: none;
margin: 0;
}
}

#logo {margin: 0;flex-shrink: 0;}
#logo img {
display: block;
height: 35px;
}

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

#logo img {
position: fixed;
top: 58px;
background: rgba(0,0,0,0.3);
padding: 0.5rem 1rem;
border-radius: 0px;
height: 50px;

}
}

@keyframes scroll-line {
0% {transform: scaleY(1);}
50% {transform: scaleY(0);}
100% {transform: scaleY(0);}
}

.scroll-container {
position: absolute;
width: 100px;
left: calc(16% - 50px);
bottom: 0px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 0.85rem;
z-index: 3;
}

.scroll-container p {
margin: 0;padding: 0;
text-align: center;
width: 70px;
line-height: 70px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 50%;
}

.scroll-line {
margin: 0 auto;
position: relative;
width: 1px;
height: 50px;
background: rgba(255,255,255,0.5);
}

.scroll-line span {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: var(--bg-inverse-color);
animation: scroll-line 6s infinite;
transform-origin: bottom;
}

header nav ul {
display: flex;
gap: 2rem;
	
}


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

header nav ul {
gap: 1rem;
}
}

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

header nav ul {
display: none;
}
}

header nav ul a {
display: block;
text-decoration: none;
text-align: center;
}

header nav ul a:hover {
opacity: 0.8;
}

header nav ul span {
	display: block;
	font-size: 0.7rem;
	opacity: 0.6;
}

#lang {
margin: 0;padding: 0;list-style: none;
position: absolute;
right: var(--headerM);
top: 0px;
line-height: var(--headerM);
z-index: 1;
display: flex;
gap: 1rem;
font-size: 0.9rem;
color: #fff;
}

.small-screen #menubar {
animation: animation1 0.2s both;
position: fixed;
overflow: auto;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
padding: 100px var(--content-space) 150px;
background: rgba(5,53,96,0.9);
color: var(--bg-inverse-color);
line-height: 1.5;
font-size: 1rem;
display: none;
z-index: 2500;
}
.small-screen #menubar {display: none;}


.small-screen #menubar a {
display: block;
text-decoration: none;
padding: 0.8rem 2rem;
margin-bottom: 0.6rem;
text-align: center;
background: rgba(0,0,0,0.3);
color: #fff;
}

.small-screen #menubar span {
display: block;
font-size: 0.7rem;
color: var(--bg-inverse-color);
}

@media screen and (max-width:800px) {
#menubar {
 padding: 80px 24px 150px;
}
}

#menubar.open {
display: block;
}

#menubar_hdr {
position: fixed;
right: var(--headerM);
top: 60px;
width: var(--headerH);
height: var(--headerH);
z-index: 3000;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}

#menubar_hdr span {
position: absolute;
width: 45px;
height: 1px;
background-color: var(--bg-inverse-color);
border-radius: 2px;
z-index: 101;
}

#menubar_hdr span:nth-child(1) { top: 10px; }
#menubar_hdr span:nth-child(2) { top: 22px; }
#menubar_hdr span:nth-child(3) { top: 34px; }

#menubar_hdr::before {
content: '';
position: absolute;
pointer-events: none;
width: 120px;
height: 120px;
border-radius: 50%;
top: 33.5%;
left: 49%;
transform: translate(-50%, -50%);
background-image: url('../images/logo.svg');
background-size: contain;
background-repeat: no-repeat;
animation: rotate-circle 10s linear infinite;
z-index: 100;
}

@keyframes rotate-circle {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media screen and (max-width:800px) {
#menubar_hdr span {
width: 45px;
height: 1px;
}
#menubar_hdr::before {
width: 100px;
height: 100px;
top: 33%;
left: 50%;
}
}

.text-slide-wrapper {
overflow: hidden;
font-family: "Jost", sans-serif;
font-weight: 500;
line-height: 1.2;
margin-top: -8em;
}

.text-slide {
display: flex;
white-space: nowrap;
font-size: 15vw;
opacity: 0.1;
}

.text-slide span {
	padding: 0 20px;
}

#container h2,
.grid-box h4 {
display: flex;
flex-direction: column-reverse;
font-size: 1.8rem;
font-weight: 400;
}

#container h2
.small, #container h4 span {
font-size: 0.8rem;
opacity: 0.5;
letter-spacing: 0.2em;
}

.fade-in-text {
visibility: hidden;
}

.char {
display: inline-block;
opacity: 0;
animation: fadeIn 0.2s linear both;
}

body:not(.home) main {
margin-top: 0px;
}

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


body:not(.home) main {
margin-top: 50px;
}
}

.grid-mask {
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 5rem;
line-height: 1.5;
}

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


.grid-mask {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}

.grid-mask h4 {
margin-bottom: 0;
text-align: center;
font-size: 0.9rem;
}

.grid-mask p {
font-size: 0.9rem;
letter-spacing: 0.01em;
}

.grid-mask figure {
aspect-ratio: 1 / 1;
}
.grid-mask figure img {
transition: 0.3s;
width:100%;
height:100%;
object-fit: cover;
display:block;
}

.grid-mask .list {
position: relative;
}

.grid-mask2 {
display:grid;
padding: 0 20px; 
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
line-height: 1.5;
}

@media screen and (max-width:800px) {
.grid-mask2 {
grid-template-columns: repeat(1, 1fr);
gap: 1rem;
}
}

.grid-mask2 h4 {
margin-bottom: 0;
text-align: center;
}

.grid-mask2 p {
font-size: 0.9rem;
}

.grid-mask2 figure {
aspect-ratio: 1 / 0.7;
}
.grid-mask2 figure img {
transition: 0.3s;
width:100%;
height:100%;
object-fit: cover;
display:block;
}

.grid-mask2 .list {
position: relative;
}

.list-grid .list * {margin: 0;padding: 0;}

.list-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3.5vw;	
align-items: start;
margin: 25px;
}

.list-grid .list {
display: grid;
text-align: center;
position: relative;
}

.list-grid.square .list figure {
width: 100%;
aspect-ratio: 1 / 1;
}
.list-grid.square .list figure img {
width: 100%;
height: 100%;
object-fit: cover;	
object-position: center;
}

.list-grid h4 {
	font-weight: 500;
}

.list-grid p {
font-weight: normal;
font-size: 0.85rem;	
text-align: center;
opacity: 0.7;
}

.list-grid2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5vw;
align-items: start;
margin: 25px;
}

.list-grid2 .list {
display: grid;
text-align: center;
position: relative;
}

.list-grid2.square .list figure {
width: 100%;
aspect-ratio: 1 / 1;
}
.list-grid2.square .list figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.list-grid2 h4 {
font-weight: 500;
}


.list-grid2 p {
font-weight: normal;
font-size: 0.85rem;
text-align: center;
opacity: 0.7;
}

.rank-flag {
position: absolute;
left: -5px;
top: -5px;
width: 3rem;
height: 3rem;
font-weight: bold;
background: #fff;
color: #333;
  
--mask-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,100 L50,70 L0,100 Z' fill='%23000000'/%3E%3C/svg%3E");
-webkit-mask-image: var(--mask-url);
mask-image: var(--mask-url);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

.rank1 {
background: #fddc00;
color: #111;
}
.rank2 {
background: #c0c0c0;
color: #fff;
}
.rank3 {
background: #cd7f32;
color: #fff;
}
@media screen and (max-width:800px) {

.list-grid {
grid-template-columns: repeat(2, 1fr);
}
}

.grid-box {
margin-bottom: 0vw;
}

.grid-box h2 {
grid-column: 2 / 12;
}

.grid-box h4{
margin: 0;
}

.grid-box section {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 5vw;
margin-left: calc(-1 * var(--content-space));
margin-right: calc(-1 * var(--content-space));
margin-bottom: 5vw;
grid-auto-flow: dense;
}

.grid-box section:last-child {
  margin-bottom: 0;
}

.grid-box .image,
.grid-box .text {
align-self: center;
position: relative;
}


.grid-box .image {
grid-column: 1 / -1;
}

.grid-box .text {
grid-column: 2 / 12;
}

.grid-box .kazari {
display: block;
position: absolute;
z-index: 99;
transform: translate(-50%, -50%);
width: 150px;
}

.grid-box .image-wide {
grid-column: 2 / 12;
}

.grid-box .image-01 {
grid-column: 8 / 12;
}

.grid-box .text-01 {
grid-column: 2 / 8;
}

.grid-box section.reverse .image-01 {
grid-column: 2 / 6;
}

.grid-box section.reverse .text-01 {
grid-column: 6 / 12;
}

.grid-box .image-02 {
grid-column: 1 / 10;
}

.grid-box .text-02 {
grid-column: 2 / 10;
}

.grid-box section.reverse .image-02 {
grid-column: 4 / -1;
}

.grid-box section.reverse .text-02 {
grid-column: 4 / 12;
}

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

.grid-box section {
margin-left: var(--content-space);
margin-right: var(--content-space);
display: block;
margin-bottom: 60px;
	
}
}

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

.new {
display: grid;
gap: 1rem;
grid-template-columns: auto 1fr;
	
}
}

.bg-slideup {
background-image: url("../recruit/images/recruit.webp");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
	
}

.bg-greeting {
padding-bottom: 5vw;
padding-top: 5vw;
background: url('../images/bg-greeting.webp') no-repeat center bottom / 100%;
	
}

.btn1 a {
display: block;
text-decoration: none;
width: 100vw;
background: var(--primary-color);
color: var(--bg-inverse-color);
text-align: center;
padding: 0.5rem 3rem;
border-radius: 100px;
letter-spacing: 0.1em;
box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
	
}

.btn1 a:hover {
background: #000;
color: var(--bg-inverse-color);
box-shadow: none;
	
}

.accordion-008 {
max-width: auto;
margin-bottom: 20px;
border-radius: 0px;
background-color: var(--primary-color);
	
}

.accordion-008 summary {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 1em 2em;
color: var(--bg-inverse-color);
font-weight: 300;
cursor: pointer;

}

.accordion-008 summary::-webkit-details-marker {
display: none;

}

.accordion-008 summary::after {
transform: translateY(-25%) rotate(45deg);
width: 7px;
height: 7px;
margin-left: 10px;
border-bottom: 3px solid var(--bg-inverse-color);
border-right: 3px solid var(--bg-inverse-color);
content: '';
transition: transform .3s;

}

.accordion-008[open] summary::after {
transform: rotate(225deg);

}

.accordion-008 p {
transform: translateY(0px);
opacity: 0;
margin: 0;
padding: .3em 2em 1.5em;
color: var(--bg-inverse-color);

}

.accordion-008[open] p {
transform: none;
opacity: 1;

}

.calendar-wrap {
margin: 0 auto;
max-width: 1110px;
display: grid;
gap: 40px;
margin-bottom: 50px;

}
@media screen and (max-width:800px) {
.calendar-wrap {
display: flex;
flex-direction: column;

}
}

.calendar {
width: 100%;
border-collapse: collapse;

}

.calendar th,
.calendar td {
border: 1px solid var(--bg-inverse-color);
text-align: center;
padding: 5px;
font-size: 14px;
font-weight: bold;

}

.calendar th {
padding: 6px 10px;

}
.calendar td {

}

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

.calendar th,
.calendar td {
padding: 6px;
font-size: 12px;

}

.calendar th {
padding: 3px 6px;
}
}

.calendar .sun {
color: #e17f7e;
background-color: #f8e4e2;
opacity: 0.6;
}

.calendar .sun2 {
color: #e17f7e;
background-color: #7d7d7d;
}

.calendar .sun3 {
 color: #e17f7e;
}

.calendar .sat {
color: #7ab6f3;
background-color: #e7f6fd;
opacity: 0.6;
}

.calendar .sat2 {
color: #7ab6f3;
}

.calendar .mute {
color: #aaa;
}

.calendar .today {
color: #fff;
background-color: #7d7d7d;
}

.calendar .off {
background-color: #fadcdb;
}

.ta1 caption {
font-weight: bold;
padding: 0.2rem 1rem;
background: rgba(0,0,0,0.1);
color: var(--bg-inverse-color);
margin-bottom: 1rem;
border-radius: 0px;
}

.ta1 {
table-layout: fixed;
border-top: 1px solid rgba(0,0,0,0.3);
width: 100%;
margin-bottom: 2rem;
}

.ta1 tr {
border-bottom: 1px solid rgba(0,0,0,0.3);
}

.ta1 th, 
.ta1 td {
padding: 1rem;
word-break: break-all;
}

.ta1 th {
width: 40%;
text-align: center;
margin-left: 0px;
padding-left: 10px;
}

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


.ta1 th figure {
width: 100%;
height: 280px;
overflow: hidden;
margin: 0;
}


.ta1 th figure img {
width: 100%; 
height: 100%;
object-fit: cover;
object-position: center;
max-width: none;
display: block;
}

}

.ta2 caption {
font-size: 1.2rem;
padding: 0.2rem 1rem;
background: rgba(0,0,0,0.1);
color: var(--bg-inverse-color);	
margin-bottom: 1rem;
border-radius: 5px;
}

.ta2 {
table-layout: fixed;
border-top: 1px solid rgba(0,0,0,0.3);
width: 100%;
margin-bottom: 2rem;
}

.ta2 tr {
border-bottom: 1px solid rgba(0,0,0,0.3);
}

.ta2 th, .ta1 td {
font-size: 1rem;
padding: 1rem;
word-break: break-all;
}


.ta2 th {
padding: 1rem;
word-break: break-all;
width: 60%;
text-align: left;
font-weight: normal;
margin-left: 50px;
padding-left: 150px;

}

.ta2 td {
text-align: right;
font-weight: bold;
margin-right: 30px;
padding-right: 200px;

}

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

.ta2 th {
width: 60%;
padding-left: 40px;
}
	
.ta2 td {
padding-right: 40px;
}
}

.ta3 caption {
font-size: 1.2rem;
padding: 0.2rem 1rem;
background: rgba(0,0,0,0.1);
color: var(--bg-inverse-color);
margin-bottom: 1rem;
border-radius: 5px;
}

.ta3 {
table-layout: fixed;
border-top: 1px solid rgba(0,0,0,0.3);
width: 100%;
margin-bottom: 2rem;
}

.ta3 tr {
border-bottom: 1px solid rgba(0,0,0,0.3);
}


.ta3 th {
padding: 1rem;
word-break: break-all;
width: 100%;
text-align: center;
font-weight: normal;
margin-left: 50px;
}

.ta4 caption {
font-size: 1.2rem;
padding: 0.2rem 1rem;
background: rgba(0,0,0,0.1);
color: var(--bg-inverse-color);
margin-bottom: 1rem;
border-radius: 5px;
}

.ta4 {
table-layout: fixed;
border-top: 1px solid rgba(0,0,0,0.3);
width: 100%;
margin-bottom: 2rem;
}

.ta4 tr {
border-bottom: 1px solid rgba(0,0,0,0.3);
}

.ta4 th {
text-align: right;
width: 45%;	
padding: 1rem;
word-break: break-all;
font-weight: normal;
margin-right: 30px;

}

.ta4 td {
text-align: left;
padding: 1rem;
word-break: break-all;
font-weight: normal;
margin-left: 30px;

}

.ta5 caption {
font-weight: bold;
padding: 0.2rem 1rem;
background: rgba(0,0,0,0.1);
color: var(--bg-inverse-color);
margin-bottom: 1rem;
border-radius: 5px;
}


.ta5 {
table-layout: fixed;
border-top: 1px solid rgba(0,0,0,0.3);
width: 100%;
margin-bottom: 2rem;
}

.ta5 tr {
border-bottom: 1px solid rgba(0,0,0,0.3);
}

.ta5 th {
padding: 1rem;
word-break: break-all;
width: 100%;
text-align: left;
font-weight: normal;
margin-left: 50px;
}

footer * {
margin: 0;
padding: 0;
}
footer ul {list-style: none;
}

footer {
background: var(--primary-color);
color: var(--primary-inverse-color);
padding: var(--content-space);
position: relative;
}

footer .footer1 {
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: 0px;
}

footer .logo {
font-size: 1.5rem;
margin-bottom: 20px;
}

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

footer {
display: flex;
gap: 2rem;
}

footer .footer1 {
margin-bottom: 50px;
text-align: left;
}
footer .footer1 .logo {
width: auto;
	  margin-top: 30px;
}
}

.icons {
list-style: none;
margin: 0;padding: 0;
display: flex;
gap: 25px;
align-self: center;
justify-content: center;
}

.icons i {
font-size: 30px;
}

.bg1 {
background: #053560;
color: var(--primary-inverse-color);
padding-top: 3vw;
padding-bottom: 3vw;
}

.bg2 {
background: #35527a;
color: var(--bg-inverse-color);
padding-top: 3vw;
padding-bottom: 3vw;
}

.bg1 + .bg1,
.bg2 + .bg2,
.bg1 + .bg2,
.bg2 + .bg1 {
margin-top: 0;
}


.pin-label {
background: var(--bg-inverse-color);
color: #333;
border: 2px solid #333;
padding: 4px 8px;
border-radius: 4px;
font-size: clamp(10px, 1.2vw, 20px);
font-weight: bold;
white-space: nowrap;
}

.pin-item:hover .pin-marker {
transform: scale(1.2) translateY(-5px);
}

.slide-thumbnail1 {
overflow-x: hidden;
margin-bottom: 2rem;
}

.slide-thumbnail1 .img {
display: flex;
overflow: hidden;
}

.slide-thumbnail1 .img img {
padding: 0 1vw;
}


.slide-thumbnail1 .img div:nth-of-type(even) {
margin-top: 30px;
}

.slide-thumbnail1 .rtl, .slide-thumbnail1 .ltr {
animation-timing-function: linear;
animation-iteration-count: infinite;
}

.slide-thumbnail1 .rtl {animation-name: slide-rtl;}
.slide-thumbnail1 .ltr {animation-name: slide-ltr;}

@keyframes slide-rtl {
0% {transform: translateX(0);}
100% {transform: translateX(-50%);}
}

@keyframes slide-ltr {
0% {transform: translateX(-50%);}
100% {transform: translateX(0);}
}

.pagetop-show {display: block;}

.pagetop a {
display: block;text-decoration: none;text-align: center;z-index: 99;
animation: opa1 1s 0.4s both;
position: fixed;
right: 20px;
bottom: 130px;
color: var(--bg-inverse-color);
font-size: 1.5rem;
background: rgba(0,0,0,0.3);
width: 60px;
line-height: 60px;
border-radius: 50%;
}

.youtube {
max-width: 700px;
margin: 0 auto;
aspect-ratio: 16 / 9;
position: relative;
}

.youtube iframe {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}

.cookie-consent {
position: fixed;
left: 50%;
bottom: -300px;
transform: translateX(-50%);
width: 670px;
max-width: 90%;
background: rgba(5,53,96,0.8);
border: 1px solid var(--bg-inverse-color);
z-index: 9999;
transition: bottom 0.6s ease;
}

.cookie-consent.show {
bottom: 30px;
}

.cookie-inner {
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
color: var(--bg-inverse-color);
}

.cookie-text {
flex: 1;
font-size: 13px;
}

.cookie-buttons {
display: flex;
gap: 15px;
}

.cookie-buttons button {
padding: 8px 18px;
border: 1px solid var(--bg-inverse-color);
background: transparent;
color: var(--bg-inverse-color);
cursor: pointer;
transition: 0.3s;
}

.cookie-buttons button:hover {
background: var(--bg-inverse-color);
color: var(--bg-color);
}

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

.cookie-inner {
flex-direction: column;
text-align: center;
}
}

.video-bg {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}

.video-bg__player {
position: absolute;
top: 40%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: 0;
object-fit: cover;
}

.video-bg__content {
position: relative;
z-index: 1;
color: var(--bg-inverse-color);
text-align: center;
padding: 2rem;
}

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

.video-fade {
opacity: 0;
transition: opacity 1.2s ease;
width: 100%;
height: auto;
}

.video-fade.show {
opacity: 1;
}

.visually-hidden{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
}

.clearfix::after {
content: "";
display: block;
clear: both;
}

/* ===== confirm（①をかっこよく） ===== */

#contents{
    max-width:800px;
    margin:60px auto;
    padding:40px;
    background:transparent;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    border-radius:10px;
}

/* タイトル */
#contents h2{
    text-align:center;
    font-size:26px;
    margin-bottom:40px;
    letter-spacing:0.05em;
}

/* テーブル */
/* 左：項目 */
.ta1 th{
    width:30%;
    text-align:left;
    font-weight:600;
}

/* 説明文 */
#contents p{
    text-align:center;
    margin:30px 0;
    font-size:15px;
}

/* ボタン中央 */
form{
    text-align:center;
}

/* ボタン */
.c-btn{
    background:#05273f;
    color:#fff;
    padding:14px 50px;
    border:none;
    font-size:16px;
    border-radius:5px;
    cursor:pointer;
    transition:0.3s;
}

.c-btn:hover{
    opacity:0.85;
}

/* スマホ対応 */
@media screen and (max-width:768px){

#contents{
    margin:30px 15px;
    padding:25px 15px;
}

#contents h2{
    font-size:22px;
}

.ta1 th,
.ta1 td{
    padding:10px;
    font-size:14px;
}

.c-btn{
    width:100%;
    max-width:300px;
}
}

.color-check, .color-check a {
color: yellow!important;
}
.l {
text-align: left !important;
}
.c {
text-align: center !important;
}
.r {
text-align: right !important;
}
.ws {
width: 95%;display: block;
}
.wl {
width: 95%;display: block;
}
.padding0 {
padding: 0 !important;
}
.mb0 {
margin-bottom: 0px !important;
}
.mb3rem {
margin-bottom: 3rem !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.look {
display: inline-block;
padding: 0px 10px;
background: rgba(255,255,255,0.2);
color: #fff;
border-radius: 3px;
margin: 5px 0;
word-break: break-all;
}
.look .color-check {
color: yellow !important;
}
.small {
font-size: 0.75em;
}
.large {
font-size: 2em;
letter-spacing: 0.1em;
}
.block {
display: block !important;
}
.marker {
background: linear-gradient(transparent 80%, yellow 90%);
}
.marker2 {
background: linear-gradient(transparent 80%, red 90%);
}

img,
div {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}