@charset "utf-8";
@import "/css/legacy/font.css";

@font-face {
font-family: "Noto Sans JP";
src: url("/fonts/NotoSansJP-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: block;
}

@font-face {
font-family: "Noto Sans JP";
src: url("/fonts/NotoSansJP-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: block;
}


a:hover img {opacity: 0.8;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,p,blockquote,table,th,td,legend,em,strong{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,abbr{border:0;}
address,caption,cite,pre,code,dfn,h1,h2,h3,h4,h5,h6,th,var,em{font-style:normal;font-weight:normal;}
strong{font-style:normal;font-weight:bold;}
caption,th {text-align:left;}
q::before,q::after{content:'';}
a{text-decoration:none;}
ul,ol {list-style-type:none;}

/* === common === */
/* html {visibility: hidden;} */
body {
font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS P Gothic", Osaka, sans-serif;
font-style: normal;
font-weight: 400;
margin: 0;
padding: 0;
background: #fff;
font-size: 1.0rem;
line-height: 1.5;
/* font-feature-settings: "palt"; */
}
img {
vertical-align: bottom;
width: 100%;
}
a {color:#002f86;}
a:link {text-decoration:underline;}
a:visited {text-decoration:underline; color:#8b5eab;}
a:hover, active {text-decoration: none; color:#0036ff; opacity: 0.6;}

b, strong, em, h2, h3,
.seminar .company-name {
font-weight: 700;
}

a:hover img {opacity: 0.8;}

.ml10 {margin-left: 10px;}
.mr5 {margin-right: 5px;}

html {
scroll-padding-top: 50px;
}

.pc {
display: none;
}
.sp {
display: block;
}
h1{
margin: 20px 20px 40px;
}

h1 img{
width: 100%;
}
h2 {
font-size: 1.8rem;
letter-spacing: 2px;
margin-bottom: 20px;
margin-top: 0;
text-align: center;
}
h2 span {
font-size: 1.4rem;
font-weight: normal;
}

#lead {
padding: 0 20px 40px;

}
#lead .leadTxt {
/* font-size: 24px; */
font-weight: bold;
margin-bottom: 20px;
}

.japan {
display: block;
margin:0 auto 20px;
max-width: 300px;
}
.btn {
display: flex;
justify-content: center;}

.btn a {
background-color: #000;
padding: 10px;
width: 100%;
max-width: 400px;
text-align: center;
border-radius:15px;
font-weight:bold;
color:#fff;
text-decoration: none;
}

/*==================================
    firstLoad
==================================*/
.firstLoad {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 99999;
background-color: #000000;
transition: all .5s ease-out
}

.firstLoad--loaded {
opacity: 0;
visibility: hidden;
}

.firstLoadTitle {
opacity: 0;
transform: translateY(50px);
margin-bottom: 30px;
width: 45%;
text-align: center;;
animation: 1.5s cubic-bezier(0,0,.37,.99) .5s topLoadingFade forwards
}
.firstLoadTitle img{
width: 100%;
margin-inline: auto;
}
.firstLoadTitle {
width: 80%;
}

@keyframes topLoadingFade {
	0% {
	opacity: 0;
	transform: translateY(50px)
	}
	to {
	opacity: 1;
	transform: translateY(0)
	}
}

/*==================================
    #mv
==================================*/
#mv {
position: relative;
margin: auto;
padding: 0;
width: 100%;
font-size: 0;
}
#slider{
position: relative;
margin-inline: auto;
width: min(100%, 1920px);
/*height: 75vw;*/
aspect-ratio: 420/315;
}
/* --- スライド画像 --- */
.sliderItem {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 0;
/*transition: opacity 1s ease-in-out, z-index 1s step-end;*/
transition: opacity 0.5s linear;
overflow: hidden;
}
/* フェードアウト中のスライド */
.sliderItem.last-active {
opacity: 1;
z-index: 1; /* activeよりは下、通常よりは上 */
}
.sliderItem.active {
opacity: 1;
z-index: 2;/* 最前面 */
/*transition: opacity 1s ease-in-out, z-index 0s step-start;*/
transition: opacity 1s ease-in-out;
}

.sliderItem img{
width: 100%;
height: 100%;
aspect-ratio: 420/315;
object-fit: cover;
transform: scale(1);
/*transition: transform 6s linear;0423-*/
}
.sliderItem.active img,
.sliderItem.last-active img { 	
animation: zoomUp 7s linear forwards;
animation-play-state: paused;
}
#mv.loaded .sliderItem.active img,
#mv.loaded .sliderItem.last-active img {
animation-play-state: running;
}
@keyframes zoomUp {
	0% {
	transform: scale(1);
	}
	100% {
	transform: scale(1.15);
	}
}

/* --- 再生・停止ボタン --- */
.mvControlBtn {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 10;
width: 24px;
aspect-ratio: 1/1;
border: none;
cursor: pointer;
background-color: transparent;
font-size: 0;
}
.mvControlBtn img{
width: 100%;
aspect-ratio: 1/1;
opacity: 1;
}
.mvControlBtn.play{
background: url(img/mv-control-btn_play.svg) no-repeat center center / 100%;
}
.mvControlBtn.play img{
opacity: 0;
}

/* --- photo_caption --- */
.mvPhotoCaption {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 10;
border: none;
background-color: transparent;
font-size: 12px;
color: #fff;
/* text-shadow: 0px 0px 8px rgba(0, 0, 0, 1); */
text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
-1px 1px 0 #000, 1px -1px 0 #000,
0px 1px 0 #000,  0-1px 0 #000,
-1px 0 0 #000, 1px 0 0 #000;
}

#categories {
background-color: #e5e2d9;
padding: 40px 20px;
}

#categories ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

#categories ul li {
background: #fff;
max-width: 640px;
padding: 10px;
position: relative;
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.10);
}
#categories ul li img{
background: #fff;
max-width: 640px;
}

#categories ul li:first-of-type {
margin-bottom: 20px;
}

#categories ul li h3 {
margin: 0;
position: absolute;
top: 20px;
background: #fff;
padding: 10px 20px 10px 10px;
}

#categories ul li p {
margin: 10px 0;
}

#prize {
padding: 40px 20px;
background: url(img/prize_bg.webp)no-repeat 50%;
background-size: cover;
text-align: center;
}
#prize h2 {
text-shadow:2px 2px 0 #FFF, -2px -2px 0 #FFF,
-2px 2px 0 #FFF, 2px -2px 0 #FFF,
0px 2px 0 #FFF,  0-2px 0 #FFF,
-2px 0 0 #FFF, 2px 0 0 #FFF;
}
#prize ul {
margin: auto;
text-align: center;
}
#prize ul li {
display: block;
margin: auto;
text-align: center;
padding: 10px;
margin-top: 20px;
max-width: 400px;
box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.10);
}
#prize ul li:first-of-type {
margin-top: 0;
}

.prize1st {
background: linear-gradient(45deg, #eacb4c 0%, #fff0bd 45%, #eacb4c 70%, #fff0bd 85%, #eacb4c 90% 100%);
background-size: 800% 400%;
animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}
.prize2nd {
background: linear-gradient(45deg, #9e9e9e 0%, #e1e1e1 45%, #9e9e9e 70%, #e1e1e1 85%, #9e9e9e 90% 100%);
background-size: 800% 400%;
animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}
.prize3rd {
background: linear-gradient(45deg, #a57e65 0%, #ffe4d2 45%, #a57e65 70%, #ffe4d2 85%, #a57e65 90% 100%);
background-size: 800% 400%;
animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}
.prizeNissin {
background: linear-gradient(45deg, #ff0000 0%, #ffe2e2 45%, #ff0000 70%, #ffe2e2 85%, #ff0000 90% 100%);
background-size: 800% 400%;
animation: gradient 5s infinite cubic-bezier(.62, .28, .23, .99) both;
}
@keyframes gradient {
	0% {
	background-position: 0% 50%;
	}

	50% {
	background-position: 100% 50%;
	}

	100% {
	background-position: 0% 50%;
	}
}
.prize1st .prizeInner {
background-image: linear-gradient(180deg, #ffffff 60%, #fff6c4);
}
.prize2nd .prizeInner {
background-image: linear-gradient(180deg, #ffffff 60%, #dddddd);
}
.prize3rd .prizeInner {
background-image: linear-gradient(180deg, #ffffff 60%, #ffdeba);
}
.prizeNissin .prizeInner {
background-image: linear-gradient(180deg, #ffffff 60%, #ffdede);
}

.prizeInner {
justify-content: center; 
height: 100%; align-items: center; 
background: #fff; 
color: #000; 
text-align: center;
padding: 10px;
box-sizing: border-box;
}

.prizeTitle {
display: flex;
justify-content: center;
align-items: center;
font-size: 36px;
font-weight: bold;
margin-bottom: 10px;
}
.prize1st .prizeTitle {
color:#ccac25;
}
.prize2nd .prizeTitle {
color:#999;
}
.prize3rd .prizeTitle {
color:#963;
}
.prizeNissin .prizeTitle {
color:#f33;
}
.prizeTitle img {
width: 40px;
margin-right: 5px;
}
.prizeDetail {
font-weight: bold;
font-size: 30px;
}
.prizeDetail span {
font-size: 24px;
margin: 0 5px;
}

.prizeDetailSmall {
font-weight: bold;
font-size: 20px;
}
.prizeDetailCaption {
font-size: 16px;
}

#requirement {
padding: 40px 20px;
margin: 0 auto;
}

#requirement p,
#requirement dl,
#requirement ul {
margin-left: 1rem;
}

#requirement h3 {
align-items:center;
display: flex;
column-gap: 10px;
margin-top: 40px;
margin-bottom: 10px;
font-size: 1.2rem;
}

#requirement h3:after {
background-color: #999;
content: "";
display: block;
flex: 1;
height: 1px
}

#requirement .schedule {
display: flex;
flex-wrap: wrap;
}

#requirement .schedule dt {
font-weight: bold;
width: 5rem;
flex-shrink: 0;
}

#requirement .schedule dd {
width: calc(100% - 5rem);
margin-bottom: 0.4em;
}

#requirement .conditions dt {
font-weight: bold;
flex-shrink: 0;
}

#requirement .conditions dd {
margin-bottom: 0.8em;
}

footer {
padding: 40px 20px;
background-color: #1a1a1a;
text-align: center;
color: #fff;
}

footer a {
color: #fff;
}

footer a:hover {
color: #eee;
}

ul.ul>li {
list-style-type:disc;
line-height:1.4;
margin:0.4em 0 0.4em 1.5em;
}

ol.ol>li{
list-style-type: decimal;
margin:0.4em 0 0.4em 1.5em;
}



#back-top {
position: fixed;
bottom: 10px;
right:10px;
}
#back-top a {
width: 50px;
height: 50px;
display: block;
background: #1a1a1a;
color:#fff;
border-radius: 4px;
text-align:center;
border:1px solid #fff;
}
#back-top a .fa{
line-height:50px;
font-size: 16px;
margin-right: 0;
}

.inquiry {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #666;
}
.sponsorship {
margin: 0 auto 40px;
}

.sponsorship div {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.sponsorship p {
margin-right: 15px;
font-size: 15px;
}
.sponsorship img {
width: 250px;
}



.is-fixed {
position: fixed;
top: 0;
left: 0;
z-index: 11;
width: 100%;
box-shadow: 0px 0px 5px #999999;
}

header {
width: 100%;
height: 50px;
background-color: #fff;
z-index: 10;
}

header__inner {
display: block;
z-index: 10;
position: relative;
max-width: 1200px;
height: 64px;
margin: auto;
z-index: 11;
}


/* ロゴ */
.header__logo {
width: 100px;
height: 50px;
margin: 0 5px;
}
.header__hamburger {
z-index: 100;
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 50px;
}

/* ナビゲーションメニュー */
.header__nav {
z-index: 10;
position: absolute;
top: 0;
width: 100%;
height: 100%;
font-weight: 700;
opacity: 0;
transition: 0.6s;
margin-top: 50px;
}

.nav__list {
display: block;
margin: 2px;
}
.nav__list li {
text-align: center;
background-color: #fff;
margin-top: 2px;
}
.nav__list a {
color: #000;
display: block;
padding: 10px 20px;
text-decoration: none;
}

/* ハンバーガーメニュー */
.hamburger {
position: relative;
width: inherit;
height: inherit;
margin: 0;
border: none;
background: #fff;
cursor: pointer;
}
.hamburger span {
display: block;
position: relative;
left: 50%;
width: 30px;
height: 2px;
transform: translateX(-50%);
background: #999;
transition: all 0.4s;
}
.hamburger span:nth-of-type(1) {
top: -7px;
}
.hamburger span:nth-of-type(2) {
top: 0;
}
.hamburger span:nth-of-type(3) {
top: 7px;
}
.hamburger.is-active span:nth-of-type(1) {
top: 0;
transform: translateX(-50%) rotate(225deg);
}
.hamburger.is-active span:nth-of-type(2) {
opacity: 0;
}
.hamburger.is-active span:nth-of-type(3) {
top: -4px;
transform: translateX(-50%) rotate(-225deg);
}

/* ハンバーガーメニューが開いた時 */
.header__nav.is-active {
position: fixed;
top: 0;
right: 0;
background: #eee;
opacity: 1;
transition: 0.4s;
}