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

:root{
--clr-gold:#cf9600;
--clr-yel:#f9f27f;
}

/*=============================================================
	closed
=============================================================*/
body.closed #terms{ background: none !important;}
body.closed #hero h1.closed{ width: 90%; max-width: 720px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 100;}
body.closed #hero h1.closed img{ width: 100%; height: auto;}
body.closed #hero > section h2{ position: relative; padding: 5rem;}
body.closed #hero > section h2:before{ content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 0; z-index: 1;}

/*=============================================================
	design
=============================================================*/
#wrapper{ width: 100%; margin: 0px auto; overflow: hidden;}
.spbr{ display: none;}

/* hero
-------------------------------------------------------------*/
#hero{ width: 100%; height: auto; background: url("../../images/hero_all_bg.webp") no-repeat center top , #000; background-size: 100%; padding: 4.0rem 0 8.0rem; position: relative;}
#hero:after{ content: ""; width: 100%; height: 100%; background: url("../../images/hero_bg_right_top.webp") no-repeat right top; background-size: 100%; position: absolute ;top: 0; right: 0; z-index: 1;}
#hero:before{ content: ""; width: 100%; height: 100%; background: url("../../images/hero_bg_pc.webp") no-repeat center top; background-size: 100%; position: absolute; bottom: -10%; left: 0; z-index: 2; opacity: 1.0;}
#hero section{ width: 90%; margin: 0px auto; max-width: 1000px; position: relative; z-index: 100;}
#hero section h1{ width: 120%; position: relative; left: -10%;}
#hero section h1 img{ width: 100%; height: auto;}
#hero section h2{ width: 80%; margin: 2.4rem auto 0;}
#hero section h2 img{ width: 100%; height: auto;}

@media screen and (min-width:768px) and (max-width:1080px) and (orientation: landscape) {
#hero section h1{ width: 100%; position: relative; left: 0;}
#about section dl.period{ width: 72% !important;}
}
#terms section article .inner:focus,
#faq .scrool:focus { outline: none;}

/* terms
-------------------------------------------------------------*/
#terms{ width: 100%; padding: 8.0rem 0; background: url("../../images/bg_terms.webp") no-repeat; background-size: cover;}
#terms section{ width: 90%; margin: 0px auto; max-width: 800px;}
#terms section h2{ font-size: 3.2rem; line-height: 1.2em; font-weight: 600; text-align: center;}
#terms section article{ background: #FFF; padding: 1.0em; margin-top: 1.0em; min-height: 0;}
#terms section article .inner{ height: 400px; overflow-y: auto; padding: 1.0em;}
#terms section article .inner h3{ margin-top: 2.0em; color: #333; font-weight: 600;}
#terms section article .inner p{ margin-top: 0.5em; color: #333;}
#terms section article .inner p:first-child{ margin-top: 0;}
#terms section article .inner ul{ padding-left: 1.5em; margin-top: 0.5em;}
#terms section article .inner ul li{ list-style-type: disc; list-style-position: outside; color: #333;}

#entryForm{ margin-top: 2.4rem;}
#entryForm p{ text-align: center; font-size: 2.4rem;}
#entryForm p input{ width: 2.4rem; height: 2.4rem; display: inline-block; margin-right: 0.5em; position: relative; top: 0.2em;}
#entryForm .entry{ margin-top: 4.0rem; text-align: center;}

#submitBtn {border:none;background:none;padding:0;cursor:pointer;display:inline-block;}
#submitBtn img {display:block;width:480px;height:auto;transition:0.3s;}
#submitBtn.inactive img {opacity:0.5;filter:grayscale(80%);cursor:not-allowed;}
#submitBtn.active img {opacity:1;cursor:pointer;}

/* about
-------------------------------------------------------------*/
#about{ width: 100%; padding: 8.0rem 0 16.0rem; position: relative;}
#about section{ width: 90%; margin: 0px auto; max-width: 1000px; position: relative;}
#about section h2{ width: 72%; position: relative; left: 14%;}
#about section h2 img{ width: 100%; height: auto;}
#about section h3{ font-size: 2.4rem; line-height: 1.2em; text-align: center; font-weight: 600; color: #111; margin-top: 1.0em;}
#about section dl.period{ width: 64%; margin: 1.0em auto 0; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; background: var(--clr-gold); border-radius: 100px; padding: 1.0em 2.0em;}
#about section dl.period dt{ font-size: 2.4rem; width: 3.0em; color: #111;}
#about section dl.period dd{ font-size: 2.4rem; color: #111; /*width: calc(100% - 3.0em);*/}
#about section dl.period strong{ font-size: 3.2rem; font-family: "Barlow Condensed", sans-serif; font-weight: 500; font-style: normal;}
#about section .information{ margin: 2.0em auto 0; width: 72%; background: #898989; border: solid 1px #FFF; border-radius: 8px; padding: 2.0em;}
#about section .information p{ text-align: center;}
#about section .intro{ margin-top: 4.0rem; position: relative;}
#about section .intro:before{ content: ""; width: calc(100% - 28%); height: 1px; background: rgba(17,17,17,0.64); position: absolute; top: 0; left: 28%; z-index: 9;}
#about section .intro dl{ padding-left: 35%; padding-top: 2.0em;}
#about section .intro dl dt{ font-weight: 600; font-size: 2.0rem; color: #111;}
#about section .intro dl dd{ color: #111;}
#about section .intro figure{ position: absolute; top: -1.0em; right: 66%; z-index: 10;}
#about section h4{ font-size: 2.4rem; line-height: 1.2em; text-align: center; font-weight: 600; color: #111; margin-top: 2.0em;}
#about section ul{ width: 64%; margin: 2.0em auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
#about section ul li a{ display: block; opacity: 1.0;}
#about section ul li a:hover{ opacity: 0.72;}
#about section p.sup{ text-align: center; margin-top: 2.0em;color: #111;}
#about section p.sup a{ color: #111; text-decoration: underline;}
#about section p.sup a:hover{ color: rgba(17,17,17,0.64); text-decoration: none;}

#about .moreNext{ margin-top: 2.0em;}
#about .moreNext .text{ font-size: 2.0rem; line-height: 1.2em; text-align: center; font-weight: 600; color: #333;}
#about .moreNext .text a{ display: inline-block; color: #333; text-decoration: underline;}
#about .moreNext .text a:hover{ color: rgba(51,51,51,0.64); text-decoration: none;}
#about .moreNext .button{ width: 40%; margin: 1.0em auto 0;}
#about .moreNext .button img{ width: 100%; height: auto;}
#about .moreNext .button a{ opacity: 1.0;}
#about .moreNext .button a:hover{ opacity: 0.64;}

/* faq
-------------------------------------------------------------*/
#faq{ padding: 0 0 16.0rem 0;}
#faq section{ width: 90%; max-width: 1000px; margin: 0px auto; border: solid 1px #111; border-radius: 8px; padding: 2.0em;}
#faq section h2{ font-size: 3.2rem; line-height: 1.2em; font-weight: 600; text-align: center; color: #111;}
#faq section .scrool{ height: 500px; overflow-y: auto; margin-top: 1.0em;}
#faq section .scrool dl{}
#faq section .scrool dl dt{ font-weight: 600; padding-left: 1.5em; color: #727171; position: relative;}
#faq section .scrool dl dt:before{ content: "Q."; font-family: Arial, Helvetica, "sans-serif"; font-weight: 600; position: absolute; top: 0; left: 0;}
#faq section .scrool dl dd{ padding-left: 1.5em; position: relative; color: #111; border-bottom: solid 1px rgba(17,17,17,0.8); padding-bottom: 1.0em; margin-bottom: 1.0em;}
#faq section .scrool dl dd:before{ content: "A."; font-family: Arial, Helvetica, "sans-serif"; font-weight: 600; position: absolute; top: 0; left: 0;}
#faq section .scrool dl dd:last-child{ padding-bottom: 0; border-bottom: none; margin-bottom: 0;}
#faq section .scrool dl dd a{ display: inline-block; color: #111; text-decoration: underline;}
#faq section .scrool dl dd a:hover{ color: rgba(17,17,17,0.64); text-decoration: none;}

/* footer
-------------------------------------------------------------*/
footer{ width: 100%; margin: 0px auto;  background-color: #000;}
footer section{ width: 100%; margin: 0px auto; text-align: center; background: var(--clr-gold); padding: 3.2rem 0;}
footer section h2{ font-size: 3.2rem; line-height: 1.2em; font-weight: 600; text-align: center;}
footer section h3{ font-size: 2.0rem; line-height: 1.2em; font-weight: 600; margin-top: 1.0em; text-align: center;}
footer section p{ text-align: center; margin-top: 0.5em;}
footer section p a{ display: inline-block; color: #FFF; text-decoration: underline;}
footer section p a:hover{ color: rgba(255,255,255,0.64); text-decoration: none;}
footer .copyright{ text-align: center; padding: 3.2rem 0; background: url("../../images/bg_terms.webp") no-repeat; background-size: cover;}

/* CTA
-------------------------------------------------------------*/
#cta{ background-image: linear-gradient(-35deg, #a17023, #e2c07c 15%, #ac7c20 30%, #fbeac8 50%, #ac7c20 70%, #e3bf79 85%, #ac7c20); padding: 1.8em 0; width: 100%; position: fixed; bottom: 0; left: 0; z-index: 1000;}
#cta section{ width: 90%; max-width: 1200px; margin: 0px auto;}
#cta section figure{ width: 400px; margin: 0px auto; position: relative;}
#cta section figure:after{ content: ""; width: 284px; height: 110px; background: url("../../images/cta_after_pc.webp") no-repeat; background-size: contain; position: absolute; top: 50%; left: 110%; transform: translateY(-50%);}
#cta section figure:before{ content: ""; width: 298px; height: 107px; background: url("../../images/cta_before_pc.webp") no-repeat; background-size: contain; position: absolute; top: 50%; right: 110%; transform: translateY(-50%);}
#cta section figure img{ width: 100%; height: auto;}

#cta section figure .button{ width: 72%; margin: 0.5em auto 0;}
#cta section figure .button img{ width: 100%; height: auto;}
#cta section figure .button a{ opacity: 1.0;}
#cta section figure .button a:hover{ opacity: 0.64;}

/*=============================================================
	download
=============================================================*/
#download main{ background-image: url("../../images/download/main_bg_pc.png"), linear-gradient(#e0d7d6 50%, #7c574f); background-repeat: no-repeat; background-size: contain; background-position:  center top;}
#download main article.contents{ padding: 8.0rem 0;}

/* header : download
--------------------------------------------------------------*/
#download header{ width: 100%; padding-bottom: 50%; min-height: 800px; background: url("../../images/download/promo_bg_pc.png") no-repeat center top; background-size: 140%; position: relative; z-index: 10;}
#download header:before{ content: ""; width: 100%; height: 100%; background: url("../../images/download/promo_before_pc.png") no-repeat center top; background-size: contain; position: absolute; top: 0; left: 0; z-index: -1;}
#download header article{ width: 90%; max-width: 1200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 100;}
#download header article section{ position: relative;}
#download header article section h1{ width: 64%; margin-bottom: 1.4em; position: relative; z-index: 10;}
#download header article section h1 img{ width: 100%; height: auto;}
#download header article section ul li{ position: absolute; top: 0; right: 0; width: 44%; z-index: -1;}
#download header article section ul li img{ width: 100%; height: auto;}
#download header article section h2{ font-size: 3.2rem; line-height: 1.6em; font-weight: 900; color: #ffffaa; display: inline; background:linear-gradient(transparent 95%, rgba(255,255,170,0.6) 0%);}
#download header article section p{ font-size: 2.0rem; line-height: 1.6em; margin-top: 1.0em;}
#download header article section h3{ margin-top: 1.0em;}
#download header article section h3 span{ display: inline-block; font-size: 2.0rem; font-weight: 700; color: #FFF; border: solid 1px #FFF; border-radius: 100px; padding: 0.32em 2.4em;}

/*---------- intro ----------*/
article.contents.intro{ background: url("../../images/download_texture.webp") no-repeat center top; background-size: 100%; padding-bottom: 0 !important;}
article.contents.intro p{ font-size: 2.4rem; line-height: 1.4em; text-align: center; font-weight: 600; color: #111;}
article.contents.intro .btnList{ width: 64%; margin: 4.0rem auto 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
article.contents.intro .btnList li{ width: 48.5%;}
article.contents.intro .btnList li:nth-child(n+3){ margin-top: 2.4rem;}
article.contents.intro .btnList li a{ display: block; font-size: 2.4rem; line-height: 1.2em; font-weight: 700; text-decoration: none; color: #FFF; background: #333; border-radius: 8px; padding: 1.0em 0; text-align: center;}
article.contents.intro .btnList li:nth-child(1) a{ background: rgba(2,0,134,1);}
article.contents.intro .btnList li:nth-child(1) a:hover{ background: rgba(2,0,134,0.6);}
article.contents.intro .btnList li:nth-child(2) a{ background: rgba(0,141,0,1);}
article.contents.intro .btnList li:nth-child(2) a:hover{ background: rgba(0,141,0,0.6);}
article.contents.intro .btnList li:nth-child(3) a{ background: rgba(208,2,1,1);}
article.contents.intro .btnList li:nth-child(3) a:hover{ background: rgba(208,2,1,0.6);}
article.contents.intro .btnList li:nth-child(4) a{ background: rgba(59,142,255,1);}
article.contents.intro .btnList li:nth-child(4) a:hover{ background: rgba(59,142,255,0.6);}

/*---------- modal ----------*/
.modal-open{ color: #fff !important; font-size: 2.0rem; line-height: 1.0em; font-weight: 700; background: #d00201; padding: 1.0em 3.0em; border-radius: 100px; width: 50%; margin: 1.0em auto 0; cursor: pointer; position: relative; transition: all 0.3s ease 0s;}
.modal-open:after{ content: "\e5df"; font-family: "Material Icons"; position: absolute; font-size: 4.0rem; top: 52.5%; right: 0.5em; transform: translateY(-50%);}
.modal-open:hover{ color: #FFF; background: #B40201;}

.modal{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.8); padding: 0; overflow: auto; opacity: 0; visibility: hidden; transition: .3s; z-index: 9999;}
.modal:before{ content: ""; display: inline-block; vertical-align: middle; height: 100%; margin-left: -0.2em;}
.modal.is-active{ opacity: 1; visibility: visible;}

.modal-container{ position: relative; display: inline-block; vertical-align: middle; max-width: 1000px; width: 72%;}
.modal-close{ position: absolute; top: -4.5rem; right: -4.5rem; width: 40px; height: 40px; cursor: pointer; z-index: 100;}
.modal-close img{ width: 100%; height: auto;}
.modal-content{ background: #fff; padding: 2.0em 4.0em; text-align: center;}
.modal-content h3{ width: 80%; margin: 0px auto;}
.modal-content h3 img,
.modal-content .clm .racecourse h4 img{ width: 100%; height: auto;}
.modal-content h5{ font-size: 2.4rem; line-height: 98px; font-weight: 900; color: #754c24; text-align: center; margin-top: 1.0em; padding: 0 18rem; position: relative;}
.modal-content h5:before{ content: ""; width: 180px; height: 72.89px; background: url("../../images/download/silhouette.png") no-repeat; background-size: contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.modal-content .clm .racecourse h4{ width: 60%; padding: 0 1.5em; margin: 0px auto 0.5em;}
.modal-content .clm{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.modal-content .clm .racecourse{ width: 47%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 2.0em;}
.modal-content .clm .racecourse .rnk01{ width: 42%;}
.modal-content .clm .racecourse .rnkList{ width: 52%;}

.modal-content .clm .racecourse .rnk01 .image{ position: relative; display: block;}
.modal-content .clm .racecourse .rnk01 .image:before{ content: ""; width: 40px; height: 40px; background: url("../../images/download/icon_no01.png") no-repeat; background-size: contain; position: absolute; top: -2.0rem; left: -2.0rem; z-index: 10;}
.modal-content .clm .racecourse .rnk01 .image img{ width: 100%; height: auto;}
.modal-content .clm .racecourse .rnk01 dl{ margin-top: 0.5em;}
.modal-content .clm .racecourse .rnk01 dl dt{ font-size: 2.0rem; line-height: 1.2em; text-align: center; font-weight: 700; color: #333;}
.modal-content .clm .racecourse .rnk01 dl dd{ font-size: 2.0rem; line-height: 1.2em; text-align: center; font-weight: 700; color: #333;}

.modal-content .clm .racecourse .rnkList dl{ padding-left: 4.2rem; position: relative;}
.modal-content .clm .racecourse .rnkList dl + dl{ margin-top: 1.0em;}
.modal-content .clm .racecourse .rnkList dl dt,
.modal-content .clm .racecourse .rnkList dl dd{ font-size: 1.6rem; line-height: 1.2em; font-weight: 700; color: #333;}
.modal-content .clm .racecourse .rnkList dl:nth-child(1):before{ content: ""; width: 32px; height: 32px; background: url("../../images/download/icon_no02.png") no-repeat; background-size: contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.modal-content .clm .racecourse .rnkList dl:nth-child(2):before{ content: ""; width: 32px; height: 32px; background: url("../../images/download/icon_no03.png") no-repeat; background-size: contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.modal-content .clm .racecourse .rnkList dl:nth-child(3):before{ content: ""; width: 32px; height: 32px; background: url("../../images/download/icon_no04.png") no-repeat; background-size: contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}

/*---------- select ----------*/
article.contents.select{ padding: 0;}
article.contents.select section{ background: #FFF; padding: 3.2rem 6.4rem; width: 90%; max-width: 1200px; margin: 0px auto;}
article.contents.select h2{ width: 80%; margin: 0px auto; position: relative;}
article.contents.select h2:after{ content: ""; width: 160px; height: 97px; background: url("../../images/select_icon.webp") no-repeat; background-size: contain; position: absolute; top: 90%; right: -5%;}
article.contents.select h2 img{ width: 100%; height: auto;}
article.contents.select p{ text-align: center; color: #111; line-height: 1.6em; margin-top: 1.0em; font-weight: 600; position: relative;}
article.contents.select p.icon:after{ content: ""; width: 140px; height: 84.75px; background: url("../../images/download/select_image.png") no-repeat; background-size: contain; position: absolute; top: 50%; right: 8%; transform: translateY(-50%);}
article.contents.select p em{ display: none;}
article.contents.select section > h4{ display: none;}

article.contents.select .block{ margin-top: 2.4rem; background: #ebe6e5; display: flex; justify-content: space-between; flex-wrap: wrap;}
article.contents.select .block h3{ width: 10%; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; background: #7c574f;}
article.contents.select .block h3 span{ font-size: 2.4rem; line-height: 1.2em; color: #FFF; font-weight: 900;}
article.contents.select .block .column{ width: 90%; overflow: auto;}
article.contents.select .block .column .scrool{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 1.0em;}
article.contents.select .block .column .scrool .inner{ width: 23.5%;}
article.contents.select .block .column .scrool .inner .image{ margin-top: 0;}
article.contents.select .block .column .scrool .inner .image img{ width: 100%; height: auto;}
article.contents.select .block .column .scrool .inner dl{ margin-top: 1.0em;}
article.contents.select .block .column .scrool .inner dl dt{ text-align: center; font-size: 1.6rem; line-height: 1.2em; font-weight: 700; color: #111;}
article.contents.select .block .column .scrool .inner dl dt label{ cursor: pointer;}
article.contents.select .block .column .scrool .inner dl dt input{ margin-right: 0.5em;}
article.contents.select .block .column .scrool .inner dl dd{}
article.contents.select .block .column .scrool .inner dl dd ul{ margin-top: 1.0em;}
article.contents.select .block .column .scrool .inner dl dd ul li{ font-size: 1.4rem; line-height: 1.4em; margin-top: 0.5em; position: relative; color: #111; font-weight: 600;}
article.contents.select .block .column .scrool .inner dl dd ul li:nth-child(1){ padding-left: 5.5em;}
article.contents.select .block .column .scrool .inner dl dd ul li:nth-child(2){ padding-left: 5.5em;}
article.contents.select .block .column .scrool .inner dl dd ul li:nth-child(1):before{ content: "レース名："; position: absolute; top: 0; left: 0; text-align-last:justify; text-align:justify; width: 5.5em;}
article.contents.select .block .column .scrool .inner dl dd ul li:nth-child(2):before{ content: "優勝馬："; position: absolute; top: 0; left: 0; text-align-last:justify; text-align:justify; width: 5.5em;}

article.contents.select .block.sup01,
article.contents.select .block.sup02{ position: relative;}
article.contents.select .block.sup01:after{ content: "※JBCクラシック以外の写真は2023年のレース写真です。2025年1月下旬に2024年のレース写真へ更新予定です。"; font-size: 1.2rem; line-height: 1.2em; position: absolute; top: 102%; left: 0; color: #111;}
article.contents.select .block.sup02:after{ content: "※写真は2023年のレース写真です。2025年1月下旬に2024年のレース写真へ更新予定です。"; font-size: 1.2rem; line-height: 1.2em; position: absolute; top: 102%; left: 0; color: #111;}

/*---------- button ----------*/
.dlBtn{ text-align: center; margin: -12.0rem auto 8.0rem;}
.dlBtn button{ border: none; padding: 0; margin: 0; background: none; cursor: pointer;}

/*---------- Application Terms ----------*/
.applicationTerms{ width: 72%; margin: 0px auto;}
.applicationTerms h4{ font-size: 4.0rem; line-height: 1.2em; font-weight: 700; color: #FFF; text-align: center;}
.applicationTerms .inner{ background: #FFF; overflow: auto; padding: 2.0em; height: 400px; margin-top: 1.0em;}
.applicationTerms .inner h3{ font-weight: 600; color: #333; margin-top: 2.0em;}
.applicationTerms .inner p:first-child{ margin-top: 0 !important;}
.applicationTerms .inner p{ margin-top: 0.5em !important; color: #333;}
.applicationTerms .inner ul{ padding-left: 1.5em; margin-top: 0.5em;}
.applicationTerms .inner ul li{ list-style-type: disc; list-style-position: outside; color: #333;}

 footer : download
--------------------------------------------------------------*/
#download footer{ background: #000;}
#download footer section{width: 90%; margin: 0px auto; max-width: 1200px; background: none !important;}
#download footer section h2{ width: 45%; margin: 0px auto;}
#download footer section h2 img{ width: 100%; height: auto;}
#download footer section ul.partner{ width: 42%; margin: 4.0rem auto 0; display: flex; justify-content: center; flex-wrap: wrap; align-items: center;}
#download footer section ul.partner li{ width: 23.5%;}
#download footer section ul.partner li img{ width: 100%; height: auto;}
#download footer section ul.partner li:nth-child(n+2){ margin-left: 2%;}
#download footer section div{ position: relative; z-index: 10;}
#download footer section div:before{ content: ""; width: 300%; height: 145%; background: #CB9624; position: absolute; top: -32px; left: -100%; z-index: -1;}
#download footer section h5{ font-size: 2.4rem; line-height: 1.2em; font-weight: 700; text-align: center;}
#download footer section dl{}
#download footer section dl dt{ text-align: center; margin-top: 1.0em;}
#download footer section dl dd{ text-align: center;}
#download footer section dl dd a{ display: inline-block; color: #FFF; text-decoration: underline;}
#download footer section dl dd a:hover{ color: rgba(255,255,255,0.64); text-decoration: none;}
#download footer section p{ margin-top: 2.4rem;}

/*=============================================================
	common
=============================================================*/
*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

body{ 
	margin:0;
	padding:0;
	text-align:center;
	font-size: 1.6rem;
	line-height: 1.6em;
	font-family: YakuHanJP, -apple-system, "Zen Kaku Gothic New", BlinkMacSystemFont, "Helvetica Neue", YuGothic, Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-optical-sizing: auto;
	color: #FFF;
	background: url("../../images/background.webp") repeat center top, #000;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position:relative;
}

a{color: rgba(51,51,51,1.0); text-decoration:underline; transition: all 0.3s ease 0s;}
a:hover{color: rgba(51,51,51,0.64); text-decoration:none;}

/*=============================================================
	reset
=============================================================*/
html { height:100%; font-size:62.5%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,blockquote,th,td,img,p{ margin: 0px; padding: 0px; font-weight: 400;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{ text-align: left; display: block;}
table { border-collapse: collapse; border-spacing: 0;}
caption,th { text-align: left;}
q:before,q:after { content: '';}
img,
object,
embed { vertical-align: top;}
legend{ display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%;}
img,abbr,acronym,fieldset{ border:none;}
li{ list-style-type: none;}
svg{ fill: currentColor;}
input[type="submit"]{ background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none;}
figure{ margin: 0;}

/*---------- align ----------*/
.align-left{ text-align: left;}
.align-right{ text-align: right;}
.align-center{ text-align: center;}

/*----- clearfix -----*/
.container,
.clearfix { zoom:1;}
.container:after,
.clearfix:after{ content: ""; display: block; clear: both;}
.clearfloat { clear: both; height: 0; font-size: 1px; line-height: 0px;}

/*----- lenis -----*/
html.lenis { height: auto;}
.lenis.lenis-smooth { scroll-behavior: auto;}
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain;}
.lenis.lenis-stopped { overflow: hidden;}