@charset "utf-8";

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}
/* =reset
------------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a{
margin:0;
padding:0;
}

fieldset,img{
  border:0;
}
address,caption,cite,code,dfn,em,th,var{
font-style:normal;
font-weight:normal;
}
ol,ul{
list-style:none;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;
}
p{
text-justify:inter-ideograph;
margin: 0;
}

header, section, article, footer, article, aside, time ,nav { display: block; }

ul{
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-start: 0;
}
figure {
display: block;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
}

button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}


/* =base
------------------------------------------------------------------------------------------*/
* { box-sizing: border-box; }
body { background: #fff; color: #000; counter-reset: number 0; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; font-feature-settings : "palt"; font-size: 16px; line-height: 1.6em; }
img { vertical-align: bottom; }
a { color: #e37100;; text-decoration: none; outline: none; }
a:hover { color: #e37100;; text-decoration: none; opacity: .8;}
a:hover img { opacity: 0.8; filter: alpha(opacity=80); }
.section-wrap p:not(:last-of-type) { margin-bottom: 1em; }

/* =header
------------------------------------------------------------------------------------------*/
header { background: #fff; display: table; position: relative; top: 0; width: 100%; z-index: 1; }
header .header-wrap { display: table; margin: 0 auto; padding: 1em 1em .8em; width: 100%; }
header h1 { color: #fff; width: 160px;}
header h1 a{display: block;}
header h1 a img{width: 100%;}

/* =foot
-----------------------------------------------------------------------------------------*/
footer { background: #e97611; color: #fff; margin: 0 auto; padding: 3vw 0; text-align: center; width: 100%; }
footer p { font-size: 12px; margin-bottom: .6em; }
footer img { width: 41px; }

  /* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top { margin: 0; position: fixed; right: 100px; bottom: 50px; text-align: center; z-index: 10; }
.page_top a { background: rgba(255,255,255,.8); border: 1px solid #ccc; border-radius: 40px; color: #000; display: block; font-size: 11px; height: 80px; line-height: 80px; transition: all .2s; width: 80px; }

/* = sp nav
------------------------------------------------------------------------------------------*/
.sp-nav { display: none; }

/* = breadcrumb
------------------------------------------------------------------------------------------*/
.breadcrumb { margin: 30px auto ; max-width: 1000px; width: 92%; }
.breadcrumb li { color: #696969; display: inline; }
.breadcrumb li a { font-size: 14px; line-height: 1.2em; text-decoration: underline; }
.breadcrumb li:not(:last-child)::after { content: " > "; color: #696969; }

/* = parts
------------------------------------------------------------------------------------------*/
.pc-none { display: none; }
.sp-none { display: block; }

/* 横並びbox */
.clearfix::after,
.clearfix::before,
.float-box::after,
.float-box::before { content: ""; clear: both; display: block; }
.float-box { width: 102%; margin-bottom: -5%;}
.float-box .box01 { width: 98%; margin-bottom: 5%;}
.float-box .box02,
.float-box .box03,
.float-box .box04 { float: left; margin: 0 2% 5% 0; }
.float-box .box02 { width: 48%; }
.float-box .box03 { width: 31.3%; }
.float-box .box04 { width: 23%; }
.float-box .box01 img,
.float-box .box02 img,
.float-box .box03 img,
.float-box .box04 img { width: 100%; }
.table-box { display: table; width: 100%; }
.table-box .box02,
.table-box .box03,
.table-box .box04 { display: table-cell; vertical-align: middle; }
.table-box .box02 { width: 50%; }
.table-box .box03 { width: 33.3%; }
.table-box .box04 { width: 25%; }
.table-box .box02 img,
.table-box .box03 img,
.table-box .box04 img { width: 100%; }
.flex-box{ display: flex; flex-wrap: wrap; width: 102%; margin-bottom: -5%;}
.flex-box .box01 { width: 98%; margin-bottom: 5%;}
.flex-box .box02,
.flex-box .box03,
.flex-box .box04 { margin: 0 2% 5% 0; }
.flex-box .box02 { max-width: 48%; flex-basis: 48%;}
.flex-box .box03 { max-width: 31.3%; flex-basis: 31.3%;}
.flex-box .box04 { max-width: 23%; flex-basis: 23%;}
.flex-box .box01 img,
.flex-box .box02 img,
.flex-box .box03 img,
.flex-box .box04 img{ width: 100%; }

/* font */
.moreless { font-size: .8em; line-height: 1.4em; }
.less { font-size: .9em; line-height: 1.4em; }
.mid { font-size: 1.1em; line-height: 1em; }
.big { font-size: 1.2em; line-height: 1em; }
.bigger { font-size: 1.3em; line-height: 1em; }
.biggest { font-size: 1.5em; line-height: 1em; }
.font-bold { font-weight: bold; }
.font-normal { font-weight: normal; }
.font-minchou { font-family: "ＭＳ 明朝",serif; font-weight: normal; }
.font-yu-minchou { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif; font-weight: normal; }
.font-italic { font-style: italic; }
.copyright { font-size: 12px; line-height: 1.4em;}

/* textColor */
.text-red { color: #cc0000; }
.text-white { color: #fff; }
.text-black { color: #000; }
.sat { color: #0b5792; }
.sun { color: #a63646; }

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

/* margin */
.mb-05vw { margin-bottom: .5vw !important; }
.mb-1vw { margin-bottom: 1vw !important; }
.mb-2vw { margin-bottom: 2vw !important; }
.mb-3vw { margin-bottom: 3vw !important; }
.mb-4vw { margin-bottom: 4vw !important; }
.mb-5vw { margin-bottom: 5vw !important; }
.mb-6vw { margin-bottom: 6vw !important; }
.mb-7vw { margin-bottom: 7vw !important; }
.mb-8vw { margin-bottom: 8vw !important; }
.mb-9vw { margin-bottom: 9vw !important; }
.mb-10vw { margin-bottom: 10vw !important; }
.mb-01em { margin-bottom: .1em !important; }
.mb-02em { margin-bottom: .2em !important; }
.mb-03em { margin-bottom: .3em !important; }
.mb-04em { margin-bottom: .4em !important; }
.mb-05em { margin-bottom: .5em !important; }
.mb-06em { margin-bottom: .6em !important; }
.mb-07em { margin-bottom: .7em !important; }
.mb-08em { margin-bottom: .8em !important; }
.mb-09em { margin-bottom: .9em !important; }
.mb-1em { margin-bottom: 1em !important; }
.mb-2em { margin-bottom: 2em !important; }

/* linkButtonBased */
.link-button a { box-sizing: border-box; text-decoration:none;  display: block; border-radius: 100px; font-size: 22px; font-weight: bold; line-height: 1em; margin: 0 auto; padding: 30px 10px; position: relative; text-align: center; transition: .1s; width: 90%; max-width: 550px;}
.link-button a:hover { text-decoration: none; opacity: .8;}
.link-button a:active { box-shadow: none; }

/* linkButtonColor */
.link-button a { background: #e97611; color: #fff; }

/* 16:9 wrap(youteubeとか) */
.video-outer-wrap { margin: 0 auto 30px; width: 60%; }
.video-wrap { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0px; width: 100%; }
.video-wrap iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%; }

/* periodBox */
.period-box { background: #f8f8f8; border: 1px solid #cc0000; box-sizing: border-box; color: #cc0000; font-size: 26px; font-weight: bold; line-height: 1.4em; margin: 0 auto 20px; padding: 25px 0; text-align: center; width: 80%; }

/* bottomLineBased */
.solid-line { border-bottom: 1px solid #000; }
.dotted-line { border-bottom: 1px dotted #000; }
.dashed-line { border-bottom: 1px dashed #000; }

/* bottomLinePadding */
.solid-line,
.dotted-line,
.dashed-line { padding-bottom: 16px; }

/* textList(div等で囲む) */
p.text-list,
.text-list ul li { padding: 0 0 3px 1.1em; position: relative; }
p:not(:last-of-child).text-list { margin-bottom: 1em; }
.text-list ul li:not(:last-of-child) { margin-bottom: 5px; }
p.text-list::before,
.text-list ul li::before { content: "※"; position: absolute; left: 0; }
p.text-list-dotted::before,
.text-list-dotted ul li::before { content: "・"; }
p.text-list-circle::before,
.text-list-circle ul li::before { content: "●"; }
p.text-list-square::before,
.text-list-square ul li::before { content: "■"; }
p.text-list-counter,
.text-list-counter ul li { padding-left: 5.1em; }
p.text-list-counter::before,
.text-list-counter ul li::before { counter-increment: number 1; content: "" counter(number) ""; }

/* linkOff */
.link-off a { background: #ccc; border: none; box-shadow: none; pointer-events: none; }
.link-off a::after { display: none!important; }

/* smartphone
------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
  /* =base
  ------------------------------------------------------------------------------------------*/
  body { font-size: 14px; line-height: 1.6em; }

  /* =header
  ------------------------------------------------------------------------------------------*/
  header {}
  header .header-wrap { padding: .4em .6em .4em; }
  header h1 {margin: .5em auto .5em 0;}

  /* =foot
  -----------------------------------------------------------------------------------------*/
  footer { padding: 30px 0; }

  /* =pagetop
  ------------------------------------------------------------------------------------------*/
  .page_top{ display: none; }

  /* = sp nav
  ------------------------------------------------------------------------------------------*/
  .sp-nav { display: block; }
  #toggle { background: #e97611; position: fixed; top: 0; right: 0; height: 45px; width: 45px; transition: .2s; z-index: 11; }
  #toggle .button { background: #fff; height: 4px; position: absolute; top: calc(50% - 2px); left: 20%; transition: .3s; width: 60%; }
  #toggle .button::before,
  #toggle .button::after { background: #fff; content: ""; display: block; height: 4px; position: absolute; top: 50%; left: 0; transition: .3s; width: 100%; }
  #toggle .button::before { margin-top: -12px; }
  #toggle .button::after { margin-top: 8px; }
  #toggle .close { background: transparent; top: calc(50% - 4px); }
  #toggle .close::before,
  #toggle .close::after{ margin-top: 0; }
  #toggle .close::before{ transform: rotate(-45deg); }
  #toggle .close::after{ transform: rotate(-135deg); }
  #menu { opacity: 0; transition: .3s; display: none;}
  #menu.open { display: block !important; opacity: 1; transition: .1s; }
  .nav-menu { background: rgba(0,0,0,.8); height: 100%; height: 100vh; position: fixed; top: 0; transition: .3s; width: 100%; width: 100vw; z-index: 10; }
  .nav-menu li:first-child { border-bottom: 1px solid #666; height: 45px; }
  .nav-menu li a { border-bottom: 1px solid #666; color: #fff; display: inherit; font-size: 14px; line-height: 1em; padding: 14px 0; width: 100%; text-align: center; }

  /* = parts
  ------------------------------------------------------------------------------------------*/
  .pc-none { display: block; }
  .sp-none { display: none; }

  /* 横並びbox */
  .float-box,
  .float-box .box01,
  .float-box .box02,
  .float-box .box03 { width: 100%;}
  .float-box .box02,
  .float-box .box03 { float: none; margin: 0 0 5% 0; }
  .float-box .box04 { width: 48%; }
  .table-box .box02,
  .table-box .box03 { display: block; width: 100%; }
  .table-box .box04 { width: 50%; }
  .flex-box{ width: 100%;}
  .flex-box .box01 { width: 100%;}
  .flex-box .box02,
  .flex-box .box03,
  .flex-box .box04 { margin: 0 0% 5% 0; }
  .flex-box .box02,
  .flex-box .box03 { max-width: 100%; flex-basis: 100%;}
  .flex-box .box04 { max-width: 48%; flex-basis: 48%;}

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

  /* margin */
  .sp-mb-05vw { margin-bottom: .5vw !important; }
  .sp-mb-1vw { margin-bottom: 1vw !important; }
  .sp-mb-2vw { margin-bottom: 2vw !important; }
  .sp-mb-3vw { margin-bottom: 3vw !important; }
  .sp-mb-4vw { margin-bottom: 4vw !important; }
  .sp-mb-5vw { margin-bottom: 5vw !important; }
  .sp-mb-6vw { margin-bottom: 6vw !important; }
  .sp-mb-7vw { margin-bottom: 7vw !important; }
  .sp-mb-8vw { margin-bottom: 8vw !important; }
  .sp-mb-9vw { margin-bottom: 9vw !important; }
  .sp-mb-10vw { margin-bottom: 10vw !important; }

  /* linkButton */
  .link-button a { font-size: 16px; width: 90%; padding: 20px 10px;}

  /* 16:9 wrap(youteubeとか) */
  .video-outer-wrap { width: 92%; }

  /* periodBox */
  .period-box { font-size: 18px; line-height: 1.2em; margin-bottom: 4vw; padding: .6em 0; width: 90%; }

  /* textList(div等で囲む) */
  .text-list p,
  .text-list ul li { padding-bottom: 2px; }
}
/* css add*/
/* = mainImage
------------------------------------------------------------------------------------------*/
#main-img { background: url(../images/main_background.jpg) center top no-repeat; width: 100%; }
#main-img h2 { margin: 0 auto; max-width: 1000px; width: 100%; height: %; max-height: px;}
#main-img img { width: 100%; }

/* = wrap
------------------------------------------------------------------------------------------*/
/* main用のwrap */
.main-wrap { display: block; margin: 0 auto; padding: 60px 0; max-width: 1000px; width: 92%; }

/* section-wrap */
.section-wrap{}
.section-wrap:not(:last-of-type) {margin-bottom: 80px;}

/* content--wrap */
.content-wrap{}
.content-wrap:not(:last-of-type) {margin-bottom: 50px;}

@media screen and (max-width: 768px){
/* = mainImage
------------------------------------------------------------------------------------------*/
#main-img { background-image: none; }

/* = wrap
------------------------------------------------------------------------------------------*/
/* main用のwrap */
.main-wrap { padding: 7vw 0;  }

/* section-wrap */
.section-wrap{}
.section-wrap:not(:last-of-type) {margin-bottom: 60px;}

/* content--wrap */
.content-wrap{}
.content-wrap:not(:last-of-type) {margin-bottom: 30px;}
}

/******* add ********/
/* = mainImage */
/* #main-img { background: #fff; width: 100%; } */

figure.comingsoon{background: #ccc;display: flex; position: relative;align-items: center;justify-content: center;padding: 16% 0;}
figure.comingsoon p{text-align: center;font-size: 1.2vw;color: #fff;}

#main-img h2 { margin: 0 auto; max-width: 1440px; width: 100%; }
#main-img img { width: 100%; }

#about { margin-bottom: 6vw; }
#about h2 { font-size: 56px; font-weight: bold; line-height: 1.4em; margin-bottom: .5em; padding-bottom: .4em; position: relative; text-align: center; }
#about h2::after { border-bottom: 5px solid #D9D9D9; content: ""; position: absolute; left: 50%; bottom: 0; transform: translate3d(-50%,0,0); width: 108px; }
#about p { line-height: 1.8em; text-align: center; }

#event h2,
#detail h2,
#step h2 { font-size: 32px; font-weight: bold; line-height: 1.2em; margin-bottom: .9em; padding-bottom: .5em; position: relative; }
#event h2::before,
#detail h2::before,
#step h2::before { border-bottom: 5px solid #D9D9D9; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 1; }
#event h2::after,
#detail h2::after,
#step h2::after { border-bottom: 5px solid #F27900; content: ""; position: absolute; left: 0; bottom: 0; width: 250px; z-index: 2; }
#event h2 { margin-bottom: 40px; }

.text-key { color: #f27900; }
.flex-box { display: flex; flex-direction: row; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-start; width: 105%; margin-bottom: -5%; }
.flex-box .box02 { flex-grow: 1; flex-basis: 45%; flex-shrink: 0; max-width: 45%; margin: 0 5% 5% 0; }

#event .flex-box .box02 { border: 1px solid #d9d9d9; position: relative; }
#event .flex-box .box02 img { width: 100%; }
#event h3 { background: #000; color: #fff; font-size: 16px; line-height: 1em; padding: 1em 0 .9em 110px; }
#event .day-box { background: #f27900; border: 10px solid #fff; border-radius: 50%; color: #fff; /*font-family: 'Noto Sans KR',"メイリオ","Meiryo","MS PGothic","Osaka",Arial,sans-serif; */font-size: 18px; font-weight: bold; letter-spacing: 1px; line-height: 1.6em; position: absolute; top: -48px; left: -48px; width: 140px; height: 140px; }
#event .day-box .inner { backface-visibility: hidden; -webkit-font-smoothing: antialiased; position: absolute; top: 50%; left: 50%; text-align: center; transform: translate3d(-50%,-50%,0); width: 100%; -webkit-font-smoothing: antialiased; }
#event .inner-box { display: flex; flex-direction: row; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-start; padding: 20px 20px 20px 30px; }
#event .inner-box .tokuten{display: flex;flex-wrap: wrap;width: 100%;padding-top: 30px;}
#event .inner-box .tokuten:not(:last-of-type){margin-bottom: 1em;}
#event .inner-box .left,
#event .inner-box .right { flex-grow: 1; flex-shrink: 0; }
#event .inner-box .left { padding: 30px 20px 0 0; flex-basis: 60%; max-width: 60%; }
#event .inner-box .right { flex-basis: 40%; max-width: 40%; }

#event .txt{font-size: 20px;line-height: 1.6em;}

#step{}
#step-01,
#step-02,
#step-03{position: relative; z-index: 0;}
#step-01::before,
#step-02::before,
#step-03::before{position: absolute; content: ""; border-left:3px solid #f27900; left: 46px; height: calc(100% + 60px); z-index: -1;}
#step .heading-box{display: block; border: 1px solid #F27900; margin-bottom: 40px;}
#step .heading-box .h-beforebox{display: inline-block; text-align: center; background-color: #f27900; color: #fff; width: 8%; vertical-align: middle; padding: 0px 0px 7px;}
#step .heading-box .h-beforebox span.moreless{ font-size: 0.6em; line-height: 1.4em; letter-spacing: 2px;}
#step .heading-box span.before-text{font-size: 32px; line-height: 1em; font-weight: bold; font-family: 'Oswald', sans-serif; display: inline-block;}
#step .heading-box h3{ font-weight: bold; display: inline-block; vertical-align: middle; font-size: 26px; line-height: 1em; padding-left: .8em;}
#step .inner-wrap{ width: 92%; margin-left: auto;}
#step .box02{position: relative;}
#step .box02 p.comment{}
#step #step-01 .box02::before,
#step #step-02 .box01::before,
#step #step-04 .box01::before{content: ""; position: absolute; left: 0; width: 100%; background-size: unset; height: 100%; background-repeat: no-repeat; top: 50%; transform: translate3d(0,-50%,0);}
#step #step-01 .box02:first-of-type::before{background-image: url(../images/icon_01.jpg);}
#step #step-01 .box02:last-of-type::before{background-image: url(../images/icon_02.jpg);}
#step #step-01 .box02:first-of-type{padding-left: 80px;}
#step #step-01 .box02:last-of-type{padding-left:130px;}
#step .box01{position: relative;}
#step .box01 p.comment{}
#step #step-02 .box01::before{background-image: url(../images/icon_03.jpg);}
#step #step-04 .box01::before{background-image: url(../images/icon_02.jpg);}
#step #step-04 .haisou .box01::before{background-image: url(../images/icon_07.jpg);}
#step #step-02 .box01{padding-left: 90px;}
#step #step-04 .box01{ padding: 15px 0 15px 130px; margin-bottom: 40px;}
#step .pay-box{border: 3px solid #ffe2c4; margin-bottom: 30px;}
#step h4{ font-size: 20px; background-color: #ffe2c4; line-height: 1em; font-weight: bold; padding: 20px 0 20px 35px;}
#step .pay-inner-wrap{padding: 35px 45px 35px 45px;}
#step .pay-inner-wrap p.uketori-houhou{font-size: 18px; line-height: 1em; margin-bottom: 40px;}
#step .pay-inner-wrap p.setsumei{font-size: 16px; line-height: 1em; margin-bottom: 1em;}
#step .card-box{text-align: center;margin-bottom: 10px;}
#step .saison,
#step .visa,
#step .master,
#step .jcb,
#step .dinner,
#step .dc,
#step .uc{display: inline-block; vertical-align: middle;}
#step .saison{width: 131px;}
#step .visa{width: 85px;}
#step .master{width: 85px;}
#step .jcb{width: 79px;}
#step .dinner{width: 145px;}
#step .dc{width: 94px;}
#step .uc{width: 143px;}
#step .saison img,
#step .visa img,
#step .master img,
#step .jcb img,
#step .dinner img,
#step .dc img,
#step .uc img{width: 100%;}
#step p.card-comment{ margin-bottom: .2em;}
#step .pay-box .box03{width: 29%; margin-right: 4.33%;position: relative;}
#step .pay-box .box03 .icon-img-01,
#step .pay-box .box03 .icon-img-02,
#step .pay-box .box03 .icon-img-03{width: 100%; margin:0 auto 15px; }
#step .pay-box .box03 .icon-img-01{ max-width:162px ;}
#step .pay-box .box03 .icon-img-02{ max-width: 91px;}
#step .pay-box .box03 .icon-img-03{ max-width: 101px;}
#step .pay-box .box03 .icon-img-01 img,
#step .pay-box .box03 .icon-img-02 img,
#step .pay-box .box03 .icon-img-03 img{width: 100%;}
#step .pay-box .box03:not(:last-of-type){}
#step .pay-box .box03:not(:last-of-type)::before,
#step .pay-box .box03:not(:last-of-type)::after{content: ""; position: absolute;}
#step .pay-box .box03:not(:last-of-type)::before{width: 30px; height: 30px; background-color: #f27900; right: -4px; border-radius: 20px; top: 50%; transform: translate3d(0,-50%,0);}
#step .pay-box .box03:not(:last-of-type)::after{right: 6px; width: 10px; height: 10px; border-top:4px solid #fff; border-right: 4px solid #fff; -webkit-transform: rotate(45deg); transform: translate3d(0,-50%,0) rotate(45deg); top: 50%;}
#step .pay-box .box03 p{font-size: 12px; line-height: 1.6em;}
#step .store-pay{background-color: #fff5eb; padding: 25px 30px;  margin-bottom: 30px;}
#step .store-pay h5{font-size: 18px; line-height: 1em; font-weight: bold; margin-bottom: .8em; padding-left: 1.4em; position: relative;}
#step p.catch-heading{text-align: center; font-size: 22px; line-height: 1em; line-height: 1em; font-weight: bold; margin-bottom: 1em;}
#step .store-pay h5::before{position: absolute; content: "●"; color: #f27900; font-size: 24px; left: 0;}
#step .step-store{}
#step .step-store p.step-number01,
#step .step-store p.step-number02,
#step .step-store p.step-number03{position: relative; padding-left: 3em; font-size: 16px; line-height: 1.4em; margin-bottom: 30px;}
#step .step-store p.step-number01::before,
#step .step-store p.step-number02::before,
#step .step-store p.step-number03::before{content: ""; position: absolute; left: 0; display: inline-block; background-color: #f27900; width: 34px; height: 34px;  transform: translate3d(0,-50%,0); top: 50%;}
#step .step-store p.step-number01::after,
#step .step-store p.step-number02::after,
#step .step-store p.step-number03::after{ color: #fff; position: absolute; left: 0;transform: translate3d(0,-50%,0); top: 50%; left: 1.5%; font-size: 18px; font-weight: bold;}
#step .step-store p.step-number01::after{ content: "1";}
#step .step-store p.step-number02::after{ content: "2";}
#step .step-store p.step-number03::after{ content: "3";}
#step-03 .store-pay{padding-bottom: 0;}
#step-03 .store-pay.family-mart{padding-bottom: 30px;}
#step-03 .store-pay.family-mart p.step-number03{padding-bottom: 0px; margin-bottom: 0;}
#step-03 .store-pay.seven-eleven{padding-bottom: 30px;}
#step-03 .store-pay.seven-eleven .guide{margin-bottom: 0px;}
#step .guide{background-color: #fff; padding: 15px 0px 15px 10px;margin-bottom:30px;}
#step .guide li{ display: inline-block; vertical-align: middle; position: relative; font-size: 12px; line-height: 1.4em; z-index: 99;}
#step .guide li.step-01{width: 22%;}
#step .guide li.step-02{width: 19%;}
#step .guide li.step-03{width: 16%;}
#step .guide li.step-04{width: 26%;}
#step .guide li.step-05{width: 14%;}
#step .guide li:not(:last-of-type){}
#step .guide li:not(:last-of-type)::after,
#step .guide li:not(:last-of-type)::before{content: ""; width: 0; height: 0; position: absolute; border-style: solid; border-width: 43px 0px 43px 25px; top: 50%; transform:translate3d(0,-50%,0); z-index: -1;}
#step .guide li:not(:last-of-type)::before{right: 5px; border-color: transparent transparent transparent #fff5eb;}
#step .guide li:not(:last-of-type)::after{ right: 10px; border-color: transparent transparent transparent #fff;border-width: 40px 0px 40px 25px; }
#step .guide.guide02 li{width: 49%;}
#step .guide.guide02 li:not(:last-of-type)::after,
#step .guide.guide02 li:not(:last-of-type)::before{border-width: 32px 0px 32px 25px;}
#step .pay-inner-wrap .caution-box:last-of-type,
#step .pay-inner-wrap .store-pay:last-of-type{margin-bottom: 0;}

#step .flex-box { margin-bottom: 0; }
#step #step-01 .flex-box .box02:last-of-type { padding-left: 0; }
#step #step-01 .flex-box .box02:last-of-type::before { background-image: none; }
#step .list { margin-bottom: 22px; padding-left: 12px; }
#step .list dt { font-size: 18px; font-weight: bold; margin-bottom: .6em; position: relative; }
#step .list dt::before { content: "-"; position: absolute; left: -10px; top: 0; }
#step .list dd:not(:last-of-type) { margin-bottom: .5em; }
#step .period { font-weight: bold; color: #ff0000; font-size: 18px; line-height: 1.4em; }
#step .inner-wrap .comment:not(:last-of-type) { margin-bottom: 2.5vw; }
#step .comment { position: relative; }
#step .comment::before { content: ""; position: absolute; top: 50%; left: 0; transform: translate3d(0,-50%,0); }
#step .comment.icon-mail-send { padding-left: 131px; }
#step .comment.icon-mail-post { padding-left: 82px; }
#step .comment.icon-exclamation { padding-left: 131px; }
#step .comment.icon-mail-send::before { background: url(../images/icon_mail_send.jpg) center no-repeat; background-size: contain; width: 116px; height: 67px; }
#step .comment.icon-mail-post::before { background: url(../images/icon_mail_post.jpg) center no-repeat; background-size: contain; width: 67px; height: 70px; }
#step .comment.icon-exclamation::before { background: url(../images/icon_exclamation.png) center no-repeat; background-size: contain; width: 67px; height: 67px; left: 26px; }
#step .comment.icon-exclamation p { font-size: 18px; font-weight: bold; line-height: 1.4em; color: #ff0000; }
#step .link-button a { font-size: 16px; line-height: 1em; padding: .8em 0 .7em; width: 64%; border-radius: 50px; }
#step .notes-box { background: #fff5eb; padding: 25px 30px; }
#step-01 .flex-box .box02:first-child { flex-basis: 30%; max-width: 60%; }
#step-01 .flex-box .box02:last-child { flex-basis: 30%; max-width: 30%; }
#step-01 .flex-box .box02.link-button a { width: 100%; }

#notes { background: #f0f0f0; padding: 30px; text-align: center; }
#notes h2 { font-size: 18px; font-weight: bold; line-height: 1em; margin-bottom: .5em; }

.modal-wrap { margin: 0 auto; padding-bottom: 3vw; width: 100%; max-width: 1000px; }
.modal-wrap .link-button a { padding: 1.5em 0 1.4em; border-radius: 50px; width: 58%; }
#howto { margin-bottom: 3vw; }
#howto p { padding: 0 1em 1em; }

/* smartphone
------------------------------------------------------------------------------------------*/
@media screen and (max-width: 768px){
  /* = mainImage */
  #main-img { background-image: none; }
  .biggest { font-size: 1.3em; line-height: 1.2em; }

.flex-box { width: 100%; margin-bottom: -5%; }
.flex-box .box02 { flex-grow: 1; flex-basis: 100%; flex-shrink: 0; max-width: 100%; margin: 0 0 12vw 0; }

#about h2 { font-size: 28px; }
#event h2, #detail h2, #step h2 { font-size: 24px; }
#event h3 { padding: 1em 0 .9em 115px; }
#event .day-box { font-size: 14px; top: -37px; left: -17px; width: 120px; height: 120px; }

#event .txt{font-size: 16px;line-height: 1.6em;}

#step h2{font-size: 20px; line-height: 1.4em; margin-bottom: 30px;}
#step h2::before,
#step h2::after{bottom: -15px;}
#step h2::before{width: 30%;}
#step h2::after{width: 70%;}

#step #step-01 .box02:first-of-type::before,
#step #step-01 .box02:last-of-type::before{right: 0; left: 0; margin: auto; top: 0; transform: translate3d(0,0,0); height: 67px;}
#step #step-01 .box02{margin-bottom: 7%;}
#step #step-01 .box02:first-of-type::before{width: 67px;}
#step #step-01 .box02:last-of-type::before{width: 116px;}
#step #step-01 .box02:first-of-type,
#step #step-01 .box02:last-of-type{padding-left: 0;padding-top: 0px;}
#step{}
#step-01,
#step-02,
#step-03{position: relative;}
#step-01::before,
#step-02::before,
#step-03::before{display: none;}
#step .heading-box span.before-text{font-size: 26px;}
#step .heading-box{margin-bottom: 7vw;}
#step .heading-box h3{font-size: 18px; }
#step .heading-box .h-beforebox{width: 20%;}
#step #step-01 .heading-box h3::before{}
#step #step-02 .heading-box h3::before{}
#step #step-03 .heading-box h3::before{}
#step #step-04 .heading-box h3::before{}
#step .inner-wrap{width: 100%;}
#step .box02{}
#step .box02 p.comment{}
#step .box02::before{}
#step .box01{}
#step .box01 p.comment{}
#step #step-02 .box01::before{right: 0; left: 0; margin: auto; width: 67px; top: 0; transform: translate3d(0,0,0); height: 70px;}
#step #step-02 .box01{padding-left: 0; padding-top: 80px;}
#step #step-04 .box01::before{ transform: none; top: 0; left: 0; right: 0; margin: auto; width: 116px;}
#step h4{font-size: 16px; line-height: 1.4em; padding: 10px 0px 10px 10px; }
#step .pay-box{margin-bottom: 7vw;}
#step .pay-inner-wrap{ padding: 15px 15px 20px 15px;}
#step .card-box{margin-bottom: 5vw;}
#step .saison{}
#step .visa{}
#step .master{}
#step .jcb{}
#step .dinner{}
#step .dc{}
#step .uc{}
#step .saison img,
#step .visa img,
#step .master img,
#step .jcb img,
#step .dinner img,
#step .dc img,
#step .uc img{}
#step p.card-comment{}
#step .pay-box .box03{ width: 100%; margin-right: 0; margin-bottom: 7%; }
#step .pay-box .box03:not(:last-of-type){margin-bottom: 60px;}
#step .pay-box .box03:not(:last-of-type)::after,
#step .pay-box .box03:not(:last-of-type)::before{ right: 0; left: 0; margin: auto; transform: translate3d(0,0,0); top: unset; bottom: -40px;}
#step .pay-box .box03:not(:last-of-type)::before{}
#step .pay-box .box03:not(:last-of-type)::after{transform: rotate(135deg); bottom: -30px;}
#step .pay-box .box03 p{}
#step .store-pay{padding: 20px 10px 20px;}
#step .store-pay h5{font-size: 16px; line-height: 1.4em;}
#step .store-pay h5::before{font-size: 20px;}
#step .step-store{}
#step .step-store p.step-number01,
#step .step-store p.step-number02,
#step .step-store p.step-number03{font-size: 14px; margin-bottom: 5vw;}
#step .step-store p.step-number01::before,
#step .step-store p.step-number02::before,
#step .step-store p.step-number03::before{top: 0; left: 0; transform: none; width: 30px; height: 30px;}
#step .step-store p.step-number01::after,
#step .step-store p.step-number02::after,
#step .step-store p.step-number03::after{top: 6px; transform: none; left: 9px;}
#step-03 .store-pay.family-mart{padding-bottom: 20px;}
#step-03 .store-pay.family-mart p.step-number03{margin-bottom: 0; padding-bottom: 0;}
#step-03 .store-pay.seven-eleven{padding-bottom: 20px;}
#step .guide{padding: 20px 10px 30px 10px;}
#step .guide li{display: block;}
#step .guide li.step-01,
#step .guide li.step-02,
#step .guide li.step-03,
#step .guide li.step-04,
#step .guide li.step-05{width: 100%;}
#step .guide.guide02 li{display: block; width: 100%;}
#step .guide li:not(:last-of-type){margin-bottom: 14vw; padding-bottom: 2vw;}
#step .guide li:not(:last-of-type)::before{bottom: -46vw;}
#step .guide li:not(:last-of-type)::after,
#step .guide li:not(:last-of-type)::before{transform: translate3d(0,0,0) rotate(90deg); top: unset; right: 0; left: 0; margin: auto; border-width: 40vw 0px 40vw 30px;}
#step .guide li:not(:last-of-type)::after{bottom: -45vw;}
#step #step-04 .box01{ padding: 80px 0 0 0; margin-bottom: 20px}
#step p.catch-heading{font-size: 18px;}
#step .pay-inner-wrap p.uketori-houhou{font-size: 16px; line-height: 1.4em; margin-bottom: 20px;}
#step .pay-inner-wrap p.setsumei{font-size: 14px; line-height: 1.6em;}
#step .guide.guide02 li:not(:last-of-type)::after,
#step .guide.guide02 li:not(:last-of-type)::before{ border-width: 40vw 0px 40vw 30px;}
#step .comment.icon-mail-send,
#step .comment.icon-exclamation { padding-left: 100px; }
#step .comment.icon-mail-send::before { width: 80px; height: 46px; }
#step .comment.icon-exclamation::before { width: 46px; height: 46px; left: 20px; }

#step .comment.icon-exclamation p { font-size: 16px; }
#step-01 .flex-box .box02:first-child,
#step-01 .flex-box .box02:last-child { flex-basis: 100%; max-width: 100%; }
#step-01 .flex-box .box02.link-button a { width: 68%; }

.modal-wrap .link-button a { font-size: 5vw; width: 92%; }

}

/*20190318add*/
#event .flex-box .box02.soldout { position: relative; }
#event .flex-box .box02.soldout::after { border: 2px solid #ff0000; color: #ff0000; content: "受付終了"; display: block; font-size: 16px; font-weight: bold; padding: .4em 2.5em; position: absolute; left: 30px; bottom: 20px; }
#event .flex-box .box02.soldout .soldout-inner-wrap { opacity: .8; }
#step .period dd .soldout { background: #ff0000; border-radius: 3px; color: #fff; font-size: 10px; font-weight: bold; line-height: 1em; padding: .5em; position: relative; top: -3px; }
@media screen and (max-width: 768px){
#event .flex-box .box02.soldout::after { margin-top: 10px; position: relative; width: 21%; }
}

/*20200225add*/
.present-box {border: 1px solid #ccc; max-width: 1000px; margin: 0 auto; }
.present-box .inner-heading {background: #000; color: #fff; font-weight: bold; font-size: 20px; line-height: 1em; padding: .9em .5em .8em; }
.present-box figure img { width: 100%; }
@media screen and (max-width: 768px){
  .present-box .inner-heading { font-size: 16px; line-height: 1.4em; }
  }

/*20200330add*/
#top-note { margin-bottom: 6vw; }
#top-note .inner-wrap { border: 2px solid #cc0000; padding: 26px 28px; }
#top-note .inner-wrap .inner-heading { font-weight: bold; color: #cc0000; font-size: 20px; text-align: center; border-bottom: 1px solid #cc0000; padding-bottom: 16px; line-height: 1.4em; }
#top-note .inner-wrap p.mb-0 { margin-bottom: 0 !important; }
.undecided { color: #3230cc !important; }
@media screen and (max-width: 768px){
  #top-note .inner-wrap { padding: 5vw; }
  #top-note .inner-wrap .inner-heading { font-size: 16px; text-align: left; }
}
/*20210324add*/
.add-box{border: 2px solid #c00; box-sizing: border-box; padding: 20px; max-width: 1000px; margin: 0 auto;}
#event .flex-box{ margin-bottom: 0; }
#event .flex-box .box02{margin-bottom: 1%; }
@media screen and (max-width: 768px){
#event .flex-box{ margin-bottom: 0; }
#event .flex-box .box02{margin-bottom: 2%; }
#event .flex-box .box02:not(:last-of-type){margin-bottom: 12vw; }
#event .inner-box .flex-box .box02 { max-width: 48%; flex-basis: 48%;margin: 0;}
#event .inner-box .flex-box .box02:nth-of-type(odd) {margin-right:4%; margin-bottom: 0;}
}