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

/* Reset -------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;box-sizing: border-box;}
:focus {outline: 0;}

ol, ul {list-style: none outside none;}
table {border-collapse: collapse;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

html {overflow-y: scroll;}
body{
font:80%/1.5 "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

color:#000;
-webkit-text-size-adjust: 100%;
background:#fff;
}
html>/**/body {}
* + html body {font-family: "メイリオ","Meiryo";}

object, embed	{vertical-align: top;}
hr, legend	{display: none;}
img {-ms-interpolation-mode: bicubic; }
li	{list-style-type: none;}
p, dd, blockquote {text-align: justify;text-justify: inter-ideograph;}
a	{overflow: hidden;outline: none;}

strong {font-weight: bold;}
sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* -------------------------------------------- */


/* Style -------------------------------------------- */

html {
    font-size: 62.5%;
}

body {
    box-sizing: border-box;

	color: #000;
	font-size: 1.6em;
	line-height: 1.7;
    
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: 0.1em;
    
    position: relative;
    z-index: 1;
    
    background-color: #fff;
}

a{
	margin: 0;
	padding: 0;
	text-decoration: none;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	font-size: 100%;
	color: #000;
	transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}



.ivmvel{
    -webkit-transform: translate(0, 30px);
    transform: translate(0, 30px);
    opacity: 0;
    transition: transform .6s .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .6s .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ivmv{
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); 
    opacity: 1;
}



.sprash{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    background-color: #fff;
    background-image: url("../img/mainImage.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;


    opacity: 1;
    transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sprash.ended{
    opacity: 0;
    z-index: 10;
}
.sprash .skip{
    position: absolute;
    right: 20px;
    top: 10px;
    z-index: 1020;

    font-size: 2.0rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #fff;
    
    cursor: pointer;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sprash .skip:hover{
    opacity: 0.5;
}


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

.sprash{
    background-image: url("../img/mainImageSP.jpg");
    background-position: center top;
}

}


.sprash .screen1{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    opacity: 0;
    transition: opacity 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sprash .screen1.active{
    opacity: 1;
}
.sprash .screen1 .wrap{
    width: 90%;
    max-width: 1250px;
    margin: 0 auto;
    position: relative;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.sprash .screen1 .line1,
.sprash .screen1 .line2{
    width: 100%;
    margin: 0 auto;

    display: flex;
    flex-wrap: nowrap;
/*    justify-content: flex-start;*/
    justify-content: center;
    align-items: center;
}
.sprash .screen1 .line2{
/*    width: 61.46%;*/
    width: 39.68%;
}

.sprash .screen1 .line1 .s1,
.sprash .screen1 .line1 .s2{
    box-sizing: border-box;
    line-height: 0;
    
    position: relative;
    overflow: hidden;
    
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
}
.sprash .screen1 .line1 .txt{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding-left: 100%;

    position: absolute;
    left: 0;
    top: 0;
}
.sprash .screen1 .line1 .s1{
    width: 53.5%;
    background-image: url("img/statemant-en-01.png");
}
.sprash .screen1 .line1 .s1::before{
    content: "";
    display: block;
    padding-top: 12.43%;
}
.sprash .screen1 .line1 .s2{
/*    width: 46.5%;*/
    width: 24.79%;
    background-image: url("img/statemant-en-02.png");
}
.sprash .screen1 .line1 .s2::before{
    content: "";
    display: block;
/*    padding-top: 14.22%;*/
    padding-top: 26.5%;
}

.sprash .screen1 .line2 .s1,
.sprash .screen1 .line2 .s2{
    box-sizing: border-box;
    line-height: 0;
    
    position: relative;
    overflow: hidden;
    
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
}
.sprash .screen1 .line2 .txt{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding-left: 100%;

    position: absolute;
    left: 0;
    top: 0;
}
.sprash .screen1 .line2 .s1{
/*    width: 58.5%;*/
    width: 100%;
    background-image: url("img/statemant-jp-01.png");
}
.sprash .screen1 .line2 .s1::before{
    content: "";
    display: block;
    padding-top: 6.652%;
}
.sprash .screen1 .line2 .s2{
    width: 41.5%;
    background-image: url("img/statemant-jp-02.png");
}
.sprash .screen1 .line2 .s2::before{
    content: "";
    display: block;
    padding-top: 9.939%;
}


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

.sprash .screen1 .wrap{
    width: 70%;
}
.sprash .screen1 .line1,
.sprash .screen1 .line2{
    margin: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.sprash .screen1 .line2{
    width: 65%;
}
.sprash .screen1 .line1 .s1{
    width: 100%;
}
.sprash .screen1 .line1 .s2{
/*    width: 86.9%;*/
    width: 46.3%;
}
.sprash .screen1 .line1 .s1::before{
    padding-top: 14.92%;
}
.sprash .screen1 .line1 .s2::before{
/*    padding-top: 18.61%;*/
    padding-top: 40%;
}

.sprash .screen1 .line2 .s1{
    width: 100%;
}
.sprash .screen1 .line2 .s2{
    width: 70.8%;
    padding-bottom: 60%;
}
.sprash .screen1 .line2 .s1::before{
/*    padding-top: 12.24%;*/
    padding-top: 40%;
}

}



.sprash .screen2{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 2.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sprash .screen2::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
}
.sprash .screen2.active{
    opacity: 1;
}
.sprash .screen2 .wrap{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
/*
.sprash .screen2 .name{
    width: 69.65%;
    line-height: 0;
}
.sprash .screen2 .mark{
    width: 24.08%;
    line-height: 0;
}
.sprash .screen2 .name img,
.sprash .screen2 .mark img{
    width: 100%;
    height: auto;
}
*/
.sprash .screen2 .logo1,
.sprash .screen2 .logo2{
    width: 100%;
    line-height: 0;
	
	margin: 40px 0;
}
.sprash .screen2 .logo1 img,
.sprash .screen2 .logo2 img{
    width: 100%;
    height: auto;
}

.sprash .screen2 .logo1.pc{
	display: block;
}
.sprash .screen2 .logo1.sp{
	display: none;
}


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

.sprash .screen2 .wrap{
/*    width: 65%;*/
    width: 90%;
}
/*
.sprash .screen2 .name{
    width: 85%;
    margin: 0 auto;
    order: 2;
}
.sprash .screen2 .mark{
    width: 100%;
    order: 1;
    
    margin-bottom: 26%;
}
*/
.sprash .screen2 .logo1,
.sprash .screen2 .logo2{
    width: 100%;
    margin: 15px 0;
}

.sprash .screen2 .logo1.pc{
	display: none;
}
.sprash .screen2 .logo1.sp{
	display: block;
}

}



#content{
    display: none;
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	position: relative;
	z-index: 100;
}
#content.active{
    display: block;
    opacity: 1;
}



header.page{
    position: relative;

    width: 100%;
    height: 100vh;
    
    background-image: url("../img/mainImage.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header.page .mainTitle{
    box-sizing: border-box;
    
    width: 29.25%;
    max-width: 550px;
    
    margin: 2.4% 0 0 2.9%;
    
    line-height: 0;
    
    position: relative;
    overflow: hidden;
    
    background-image: url("img/mainTitle.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}
header.page .mainTitle::before{
    content: "";
    display: block;
    padding-top: 46.74%;
}
header.page .mainTitle .txt{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding-left: 100%;

    position: absolute;
    left: 0;
    top: 0;
}

header.page .date{
    box-sizing: border-box;

    width: 21.67%;
    max-width: 410px;
    
    margin: 0 0 5.4% 3.8%;
    
    line-height: 0;
}

header.page .date .item{
    width: 100%;
    line-height: 0;
    
    position: relative;
    overflow: hidden;
    
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    
}
header.page .date .item.l1{
    background-image: url("img/date_special-workshop.png");
}
header.page .date .item.l2{
    background-image: url("img/date_epsilon-cup2025.png");
}
header.page .date .item::before{
    content: "";
    display: block;
/*    padding-top: 35.7%;  画像本来*/
    padding-top: 42.5%;
}
header.page .date .txt{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding-left: 100%;

    position: absolute;
    left: 0;
    top: 0;
}

header.page .logo{
    position: absolute;
    right: 2.77%;
/*    top: 2.4%;*/
    top: 4%;
    
/*    width: 15.6%;*/
    width: 12%;
    max-width: 296px;
    line-height: 0;
}
header.page .logo img{
    width: 100%;
    height: auto;
}



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

header.page{
    background-image: url("../img/mainImageSP.jpg");
    background-position: center top;
}

header.page .mainTitle{
    width: 81%;
    margin: 31.3% 0 0 7.2%;
}
header.page .date{
    width: 47.8%;
    margin: 0 0 8.67% 7.2%;
}
header.page .logo{
    right: auto;
    left: 5%;
    top: 2.4%;
    
    width: 30%;
}

}



#contentBody{
    width: 100%;
    position: relative;
    
    background-image: url("img/bg_pattern.png");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 82.3% auto;
    
    padding-bottom: 80px;
}

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

#contentBody{
    background-image: url("img/bg_pattern_sp.png");
    background-size: 89.9% auto;
    padding-bottom: 30px;
}

}



.eventTitleWrapper{
    width: 100%;
    position: relative;
    line-height: 0;
}
.eventTitle{
    box-sizing: border-box;
    width: 74.16%;
    max-width: 1420px;
    margin: 0 auto;
    
    line-height: 0;
    position: relative;
    overflow: hidden;
    
    top: calc(100vw * -0.026);
    
    background-image: url("img/eventTitle.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
.eventTitle::before{
    content: "";
    display: block;
    padding-top: 10.56%;
}
.eventTitle .txt{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding-left: 100%;

    position: absolute;
    left: 0;
    top: 0;
}

.competitionTitle{
    box-sizing: border-box;
    width: 36%;
    max-width: 704px;
    margin: 0 auto;
    
    line-height: 0;
    position: relative;
    overflow: hidden;
    
    background-image: url("img/competitionTitle.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
.competitionTitle::before{
    content: "";
    display: block;
/*    padding-top: 9.66%;*/
    padding-top: 21.1%;
}
.competitionTitle .txt{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding-left: 100%;

    position: absolute;
    left: 0;
    top: 0;
}


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

.eventTitle{
    width: 88.4%;
    top: calc(100vw * -0.032);
    margin-bottom: calc(100vw * 0.015);
}
.competitionTitle{
    width: 60%;
}
.competitionTitle::before{
    padding-top: 25.9%;
}

}


.scheduleWrapper{
    box-sizing: border-box;
    width: 35.76%;
    max-width: 612px;
    margin: 0 auto;
}
.schedule{
    box-sizing: border-box;
    width: 89.21%;
    
    line-height: 0;
    position: relative;
    overflow: hidden;
    
    background-image: url("img/schedule.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
.schedule::before{
    content: "";
    display: block;
/*    padding-top: 177.29%;*/
    padding-top: 183.4%;
}
.schedule .txt{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    padding-left: 100%;

    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.5;
}

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

.scheduleWrapper{
    width: 74.4%;
}
.schedule{
    width: 100%;
}
.schedule::before{
    padding-top: 192.6%;
}

}


section.sub{
    box-sizing: border-box;
    width: 66.9%;
    max-width: 1300px;
    margin: 0 auto;
    margin-bottom: 50px;
}

section.sub > h3{
    box-sizing: border-box;
/*    width: 27%;*/
    width: 50.7%;

	display: block;
	position: relative;
    overflow: hidden;
    
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% auto;
    
    margin-bottom: 20px;
}
section.sub > h3::before{
	content: "";
	display: block;
/*	padding-top: 10.43%;*/
	padding-top: 5.28%;
}
section.sub.about > h3{ background-image: url("img/h3_about.png"); }
section.sub.special-workshop > h3{ background-image: url("img/h3_special-workshop.png"); }
section.sub.epsilon-cup2025 > h3{ background-image: url("img/h3_epsilon-cup2025.png"); }
section.sub.spacekoshien > h3{ background-image: url("img/h3_spacekoshien.png"); }

section.sub > h3 .txt{
    display: block;
    width: 100%;
    position: absolute;
    left: 100%;
    top: 0;
}

section.sub > h4{
    font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
	margin-bottom: 0.8em;
}

section.sub p,
section.sub li,
section.sub th,
section.sub td{
    line-height: 2.0;
    font-size: clamp(1.0rem, calc(0.85rem + 0.625vw), 1.5rem);
    /*
    font-size: clamp(1.1rem, calc(0.9rem + 0.625vw), 1.6rem);
    font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
    font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
    */
}
section.sub p a{
	text-decoration: underline;
}
section.sub p a:hover{
	text-decoration: none;
}

br.nw{ display: none; }

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

section.sub{
    width: 75.8%;
    margin-bottom: 50px;
}

section.sub > h3{
/*    width: 45%;*/
/*    width: 84.49%;*/
    width: 90%;
    margin-bottom: 15px;
}

br.nw{ display: block; }

}


ul.cmn{
    padding-left: 1.8rem;
}
ul.cmn li{
    text-indent: -1em;
}
ul.cmn li::before{
    content: "●";
    width: 1em;
    height: 1em;
    font-size: clamp(1.0rem, calc(0.85rem + 0.625vw), 1.5rem);
    display: inline-block;
    position: relative;
    left: 0.8em;
    top: 0;
}
ul.cmn.npb li{
    padding-bottom: 0;
}

table.outline{
    width: 100%;
}
table.outline th{
    box-sizing: border-box;
    white-space: nowrap;
    position: relative;
    padding-right: 1em;
    line-height: 1.5;
}
table.outline.wthmark th{
    padding-left: 1em;
    text-indent: -1em;
}
table.outline th::after{
    content: "：";
    position: absolute;
    right: 0;
    top: 0;
    line-height: 2.0;
}
table.outline a{
    text-decoration: underline;
}
table.outline a:hover{
    text-decoration: none;
}


.qrcode{
    width: 50%;
    max-width: 200px;
    line-height: 0;
}
.qrcode img{
    width: 100%;
    height: auto;
}


.spacekoshien{
    width: 100%;
    max-width: 800px;
	margin: 0 auto;
}
.spacekoshien img{
    width: 100%;
    height: auto;
}


.message{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.message .text{
	width: 78%;
}
.message .photo{
	width: 18%;
}
.message .photo img{
	display: block;
    width: 100%;
    height: auto;
	border-radius: 50%;
}
.message p{
	margin-bottom: 0.5em;
}
.message .name{
	text-align: right;
}

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

.message{
	flex-direction: column-reverse;
}
.message .text{
	width: 100%;
}
.message .photo{
	width: 100%;
	margin-bottom: 20px;
}
.message .photo img{
	width: 60%;
	max-width: 300px;
	margin: 0 auto;
}

}


.logo-scheme{
	width: 100%;
}
.logo-scheme img{
    width: 100%;
    height: auto;
}
.logo-scheme.pc{
	display: block;
}
.logo-scheme.sp{
	display: none;
}

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

.logo-scheme.pc{
	display: none;
}
.logo-scheme.sp{
	display: block;
}

}



footer{
    box-sizing: border-box;
    padding: 30px 0;
    background-color: #b40000;
}
footer p{
    box-sizing: border-box;
    width: 66.9%;
    max-width: 1300px;
    margin: 0 auto;
	
	color: #fff;

    line-height: 1.6;
    font-size: clamp(1.0rem, calc(0.85rem + 0.625vw), 1.5rem);
}


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

footer p{
    width: 75.8%;
}

}