@charset "utf-8";
/*--基本--*/
:root{
	--font-size:15px;
	--max-width:1200px;
	--color: #181818;/*文字色*/
  --link: #FF9500;/*文字色*/
	--color-hover: #48AD8C;/*マウスオーバー時の文字色・色を変えない場合は「color」と同値にする*/
  --lang-active: #FF3F8A;
	--background: #fff;/*背景*/
  --btn:#FF9500;/*ボタンの色*/
  --btn-hover:#fff;/*ボタンの色:hover*/
  --btn-color:#fff;/*ボタンの文字色*/
  --btn-color-hover:#FF9500;/*ボタンの文字色:hover*/
  --btn-border:#FF9500;
  --btn-border-w:1px;
  --btn-max-w:600px;/*ボタンの最大幅*/
  --border-radiue:100px;/*ボタンの角R。角Rにしない時は0・可愛くしたい時は100*/
  --slider-btn: #000;/*スライダー矢印*/
  --slider-page: #000;/*スライダーページネーション*/
  --clip-path-height: 20em;
}

@media screen and (max-width: 1200px){
	:root{
       --font-size:18px;
    }
}

@media screen and (max-width: 1000px){
	:root{
    --font-size:16px;
    }
}

@media screen and (max-width: 768px){
	:root{
    --font-size:15px;
    }
}

a{color: var(--link);}

a.btn {border-width: var(--btn-border-w);}
a.btn span{color: #fff;text-align: center;font-size: .9em;font-style: normal;font-size: 1em;}
a.btn::after{content: ""; display: none;}

/*------
 hero
------*/
#hero {position: relative; max-width: 1280px; margin: 0 auto; width: 95%;}
#hero h1{line-height: 0;}
#hero .lead{line-height: 1.8; margin-top: 20px;font-size: 1.1em;}
#hero .lead span{font-size: .8em;}

/*------
 nav
------*/
#nav {width: 95%; max-width: 1280px; margin: 20px auto 0;}
#nav .flex{gap: 20px;}
#nav li a{width: 150px;text-align: center;padding: .25em 1em;}
#nav li a.finish{background: #BDBDBD; border-color: #BDBDBD;}
#nav li a:hover.finish{background: #fff; color: #BDBDBD;}
/*------
 main
------*/
#main {width: 95%; max-width: 1280px; margin: 20px auto 0; position: relative; z-index: 10; padding-bottom: 100px;}

#main h2{position: relative;}
#main h2::after,#main h2::before{content: "";display: block; position: absolute; left: 0; bottom: 0;height: 2px;}
#main h2::before{width: 100%;background: #adadad;}
#main h2::after{width: 200px;background: #FF9500;}

/*------
 共通
------*/
.cnt{margin-top: 150px;}
.cnt:first-of-type{margin-top: 0;}
.cnt .inner{margin-top: 30px;}
.cnt .box.flex{gap: 40px; width: 100%;}
.cnt .img_area{width: 31.79%;}
.cnt .img_area figure{line-height: 0;}
.cnt .img_area .ttl{margin-top: 1em;}
.cnt .text_area{width: calc((100% - 31.79%) - 40px);}
.cnt .text_area h4{margin-top: 1.5em;}
.cnt .text_area h4:first-of-type{margin-top: 0;}
.cnt .box .status{padding: .5em 1.5em; font-size: .8em; border-radius: 100px; display: inline; color: #fff; line-height: 1;}
.cnt .box .status.open{background: #FF4F37;}
.cnt .box .status.notice{background: #77B2FF;}
.cnt .box .time{margin-top: .5em;}
.cnt .box .special{ margin-top: 1.5em;}

.cnt .caution{font-size: .8em;margin-top: 1em;}
.cnt .caution li{position: relative; padding-left: 1em; text-indent: -1em;margin-top: .5em;}
.cnt .caution li::before{content: "※";}
/*------
 event
------*/
#event .inner.flex{flex-direction: column; gap: 100px 50px; margin-top: 40px;}


/*------
 bonus
------*/
#bonus{width: 100%; }
#bonus .inner p{margin-top: 1em;}
#bonus .inner figure{line-height: 0;}
/*------
 caution
------*/
#caution ul{padding-left: 1.5em;}
#caution li{list-style: disc; margin-top: .5em;}
#caution li:first-of-type{margin-top: 0;}

/*------
 social
------*/
#social ul.flex{gap: 50px; margin-top: 2em;}
#social li.flex{ align-self: center;align-items: center; gap: 15px;}
#social .icon{width: 120px; line-height: 0; display: block; border: 1px solid #e7e7e7; border-radius: 100px;overflow: hidden;}
#social .icon a{display: block;}
#social a.sns_link p{color: #000;}
#social a.sns_link:hover{text-decoration: none;}
#social p{font-weight: 600; font-size: 1.1em; line-height: 1.4;}
#social p span{font-weight: 300; font-size: .9em;color: #8F9AA0;}

/*------
 finish
------*/
#finish details{border: 1px solid #adadad; border-width: 0 0 1px 0;}
#finish summary{position: relative;display: block;padding-right: 1.5em;list-style: none;cursor: pointer; padding:2em 2em 2em 0; }
#finish summary::-webkit-details-marker {display: none}
#finish summary:after {content: "";position: absolute;top: calc(50% - .25em);right: 1em;display: block;width: .5em;height: .5em;border: 1px solid var(--color);border-width: 0 1px 1px 0;transform: rotate(45deg);transition: transform .5s}
#finish details[data-astro-cid-ojo3njdp][open] {animation: fadeIn .85s ease}
#finish details[open] summary:after {transform: rotate(224deg);transition: transform .5s}

#finish .box{padding: 0 0 50px 0;}

#finishlist > p{margin-top: 1em;}




@media screen and (max-width: 768px){
  /*------
  共通
  ------*/
  #nav .flex{gap: 10px;}
  #nav li a{width: 120px;}
  /*------
  共通
  ------*/
  .cnt .box.flex{flex-direction: column; gap: 10px;}
  .cnt .img_area{width: 100%;}
  .cnt .img_area .ttl{display: flex; gap: 10px;flex-wrap: wrap; margin-top: 1em;}
  .cnt .box .time{margin-top: 0;}
  .cnt .box .venue{width: 100%;}
  .cnt .box .status{line-height: 1.4;}
  .cnt .text_area{width: 100%;}

  /*------
  social
  ------*/
  #social .icon{width: 100px;}

  /*------
  finish
  ------*/
  #finish summary p span{display: block;}
}