@charset "utf-8";

@media only screen and (max-width: 640px) {
	
/*============================
ClearFix
============================*/
.clearFix::after {}
.md_container { width: inherit; padding: 0 20px; }
main { overflow: hidden; }

/*============================
.md_pankuzuArea
============================*/
.md_pankuzuArea { margin-top: 60px; margin-bottom: -30px; }
.md_pankuzuArea ul { padding: 8px 15px!important; margin: 0 -15px; }
.md_pankuzuArea ul li { margin-right: 30px; font-size: 0.75em; }
.md_pankuzuArea ul li::after { top: 4px; right: -28px; width: 16px; height: 16px; }
.md_pankuzuArea ul li a {}
.md_pankuzuArea ul li:first-child {} 
.md_pankuzuArea ul li:first-child a {}
.md_pankuzuArea ul li:last-child {}
.md_pankuzuArea ul li:last-child a {}
.md_pankuzuArea ul li:last-child::after {}
.md_pankuzuArea ul li a span {}
.md_pankuzuArea ul li a em {}
	
/*============================
br
============================*/
.md_br_sp { display: inline; }
.md_br_pc { display: none; }

/*============================
#header
============================*/
#header { height: 20px; margin-top: -40px; left: 20px; background: transparent; }
#header .tpoint {}
#header .tpoint img { width: 50px; }
#header .logo { margin-top: 10px; }
#header .logo img { width: 130px; }
    
/*============================
#mainPanelArea
============================*/
#mainPanelArea {}
#mainPanelArea:before { width: 60%; height: 100%; background-size: contain; top: -75px; margin-left: -90px; }
#mainPanelArea:after { width: 70%; height: 100%; background-size: contain; top: -140px; margin-right: -110px; }
#mainPanelArea .sub { margin-top: 90px; font-size: 1em; }
#mainPanelArea h1 { margin: 10px auto 0; width: 100%; height: auto; }
#mainPanelArea h1 img {}
#mainPanelArea .copy { margin-top: 20px; font-size: 1em; line-height: 1.5; letter-spacing: 0.15em; }
#mainPanelArea .target { margin-top: 20px; }
#mainPanelArea .target .tagList { flex-wrap: wrap; gap: 10px; }
#mainPanelArea .target .tagList .tag { width: calc((100% - 10px) / 2); padding: 10px 5px 8px; }
#mainPanelArea .target .tagList .tag:last-child { width: 100%; }
#mainPanelArea .target .tagList .tag::after {}
#mainPanelArea .target .copy { text-align: left; margin-top: 15px; font-size: 0.875em; }
#mainPanelArea .cta { padding: 10px; margin-top: 35px; border-radius: 10px; }
#mainPanelArea .cta .image.illust01 { width: 30%; height: auto; top: -35px; left: -55px; }
#mainPanelArea .cta .image.illust01 img {}
#mainPanelArea .cta .image.illust03 { width: 20%; height: auto; right: -15px; top: 100px; }
#mainPanelArea .cta .image.illust03 img {}
#mainPanelArea .cta .image.illust04 { width: 25%; height: auto; top: -140px; right: -30px; }
#mainPanelArea .cta .image.illust04 img {}
#mainPanelArea .cta .image.illust05 { width: 35%; height: auto; }
#mainPanelArea .cta .image.illust05 img {}
#mainPanelArea .cta .image.illust06 { width: 20%; height: auto; right: 0; top: -295px; }
#mainPanelArea .cta .image.illust06 img {}
#mainPanelArea .cta .title { flex-direction: column; }
#mainPanelArea .cta .title .main { padding: 10px 0; font-size: 1.125em; border-right: none; }
#mainPanelArea .cta .title .detail { text-align: center; padding-left: 0; font-weight: 500; }
#mainPanelArea .cta .title .detail span { font-size: 0.75em; }
#mainPanelArea .cta .badge { width: 90px; height: 100px; top: -50px; }
#mainPanelArea .cta .badge span { font-size: 0.75em; line-height: 1.5; }
#mainPanelArea .cta .schedule { padding: 10px 15px; }
#mainPanelArea .cta .schedule .year { font-size: 1em; }
#mainPanelArea .cta .schedule .year span {}
#mainPanelArea .cta .schedule ul { display: block; padding-top: 0; }
#mainPanelArea .cta .schedule ul li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date btn" "time btn"; align-items: center; column-gap: 15px; padding: 10px 0; text-align: left; }
#mainPanelArea .cta .schedule ul li + li::before { left: 50%; transform: translateX(-50%); width: 100%; height: 1px; }
#mainPanelArea .cta .schedule ul li .date { grid-area: date; align-self: end; }
#mainPanelArea .cta .schedule ul li .date time { font-size: 1.75em; }
#mainPanelArea .cta .schedule ul li .date span { bottom: 4px; left: 8px; font-size: 0.75em; }
#mainPanelArea .cta .schedule ul li .date span:before { width: 20px; height: 20px; }
#mainPanelArea .cta .schedule ul li .time { grid-area: time; align-self: start; font-size: 1em; }
#mainPanelArea .cta .schedule ul li .btn { grid-area: btn; margin-top: 0; text-align: center; }
#mainPanelArea .cta .schedule ul li .btn a { white-space: nowrap; padding: 10px 20px 8px; }
#mainPanelArea .cta .schedule ul li .btn a::before {}
#mainPanelArea .cta .schedule ul li .btn a:hover {}
#mainPanelArea .cta .schedule ul li .btn a:hover::before {}
#mainPanelArea .about { padding: 40px 0 40px; }
#mainPanelArea .about .catch { text-align: left; font-size: 1em; line-height: 1.5; }
#mainPanelArea .about .text { text-align: left; margin-top: 10px; line-height: 1.5; font-size: 0.875em; }
#mainPanelArea .about .note { text-align: left; margin-top: 10px; font-size: 0.75em; }
#mainPanelArea .about .image.illust08 { width: 20%; height: auto; left: -25px; bottom: -45px; }
#mainPanelArea .about .image.illust08 img {}
#mainPanelArea .about .image.illust09 { width: 25%; height: auto; right: -30px; bottom: -35px; }
#mainPanelArea .about .image.illust09 img {}

/*============================
#detailArea
============================*/
#detailArea { padding: 40px 0 60px; }
#detailArea .mainTitle { font-size: 1.25em; }
#detailArea .table { margin-top: 20px; }
#detailArea .table dl { display: block; }
#detailArea .table dl dt { display: block; width: 100%; padding: 10px 12px 9px; }
#detailArea .table dl dd { display: block; padding: 20px 0; font-size: 0.875em; }
#detailArea .table dl dd.dateList {}
#detailArea .table dl dd.dateList .dateItem { flex-direction: column; gap: 15px; }
#detailArea .table dl dd.dateList .dateItem + .dateItem {}
#detailArea .table dl dd.dateList .dateItem .leftArea { display: flex; justify-content: space-between; width: 100%; }
#detailArea .table dl dd.dateList .dateItem .leftArea time { font-size: 1em; }
#detailArea .table dl dd.dateList .dateItem .leftArea time + time {}
#detailArea .table dl dd.dateList .dateItem .leftArea .category { margin-top: 0; width: 50%; }
#detailArea .table dl dd.dateList .dateItem .button { text-align: center; width: 100%; }
#detailArea .table dl dd.dateList .dateItem .button a { width: 100%; padding: 12px 40px 10px; border: 1px solid #fff; }
#detailArea .table dl dd.dateList .dateItem .button a::before { width: 100%; left: 100%; }
#detailArea .table dl dd.dateList .dateItem .button a:hover {}
#detailArea .table dl dd.dateList .dateItem .button a:hover::before {}
#detailArea .program { margin-top: 40px; }
#detailArea .program .title { font-size: 1.25em; }
#detailArea .program ul.container { grid-template-columns: minmax(0, 1fr); gap: 15px; margin-top: 20px; }
#detailArea .program ul.container li.containerItem { padding: 20px 15px; width: 100%; }
#detailArea .program ul.container li.containerItem .tag {}
#detailArea .program ul.container li.containerItem .name { font-size: 1em; line-height: 1.5; }
#detailArea .program ul.container li.containerItem .name span { display: initial; }
#detailArea .program ul.container li.containerItem ul.content {}
#detailArea .program ul.container li.containerItem ul.content li.contentList {}
#detailArea .program ul.container li.containerItem ul.content li.contentList.category {}
#detailArea .program ul.container li.containerItem ul.content li.contentList.category span { font-size: 1em; }
#detailArea .bonus { margin-top: 40px; }
#detailArea .bonus .title { font-size: 1.25em; }
#detailArea .bonus .title span { padding-bottom: 5px; }

#detailArea .bonus .title span::before, span::after {}
#detailArea .bonus .title span::before {}
#detailArea .bonus .title span::after {}
#detailArea .bonus .content { margin-top: 10px; }
#detailArea .bonus .content .main { text-align: left; font-size: 1.25em; line-height: 1.5; }
#detailArea .bonus .content .content { margin-top: 10px; text-align: left; font-size: 1em; }

/*============================
#scheduleArea
============================*/
#scheduleArea { margin-top: 60px; }
#scheduleArea .mainTitle { font-size: 1.25em; }
#scheduleArea .table { margin-top: 20px; }
#scheduleArea .table dl { display: block; }
#scheduleArea .table dl dt { display: block; width: 100%; padding: 10px 12px 9px; background: rgba(255,255,255,0.5); }
#scheduleArea .table dl dt .time { font-size: 0.875em; }
#scheduleArea .table dl dt .sub { margin-top: 5px; font-size: 0.75em; }
#scheduleArea .table dl dd { display: block; padding: 10px 0 30px; }
#scheduleArea .table dl dd .number { font-size: 0.75em; }
#scheduleArea .table dl dd .title { margin-top: 10px; font-size: 1.125em; }
#scheduleArea .table dl dd .person { margin-top: 15px; }
#scheduleArea .table dl dd .subTitle {}
#scheduleArea .table dl dd .list { margin-top: 20px; }
#scheduleArea .table dl dd .list ul {}
#scheduleArea .table dl dd .list ul li { margin-top: 10px; line-height: 1.75; font-size: 0.875em; }
#scheduleArea .table dl dd .list ul li:first-child { margin-top: 0; }
#scheduleArea .table dl dh .sub {}
#scheduleArea .table dl dd .list ul li.mini {}
#scheduleArea .table dl dd .blockList {}
#scheduleArea .table dl dd .blockList .block { float: inherit; width: 100%; padding-left: 0; padding-right: 0; border-left: none; border-top: 1px dotted #ccc; padding-top: 20px; }
#scheduleArea .table dl dd .blockList .block:first-child { padding-left: 0; padding-top: 0; border-left: none; border-top: none; }
#scheduleArea .table dl dd .blockList .block:last-child { padding-right: 0; }
#scheduleArea .table dl dd .blockList .block:nth-child(-n+2) { padding-bottom: 0; }
#scheduleArea .table dl dd .blockList .block .number {}
#scheduleArea .table dl dd .blockList .block .title { padding-bottom: 10px; font-size: 1em; }
#scheduleArea .table dl dd .blockList .block .person { margin-top: 0; }
#scheduleArea .table dl dd .blockList .block ul.person {}
#scheduleArea .table dl dd .blockList .block ul.person li { font-size: 0.875em; }
#scheduleArea .table dl dd .blockList .block .subTitle {}
#scheduleArea .table dl dd .blockList .block .list { margin-top: 10px; }
#scheduleArea .table dl dd .blockList .block .list ul {}
#scheduleArea .table dl dd .blockList .block .list ul li {}
#scheduleArea .table dl dd .blockList .block .list ul li.article01 { padding-bottom: 20px; }
#scheduleArea .table dl dd .blockList .block .list ul li.article02 { padding-bottom: 20px; margin-top: 15px; }
#scheduleArea .table dl dd .blockList .block .list ul li a {}

/*============================
#personArea
============================*/
#personArea { margin-top: 60px; }
#personArea .mainTitle { font-size: 1.25em; }
#personArea .list { margin-top: 20px; }
#personArea .list ul {}
#personArea .list ul li { padding: 20px 0; display: block; }
#personArea .list ul li .image { margin-right: 0; width: 100%; text-align: center; }
#personArea .list ul li .image img { width: 150px; height: 150px; border-radius: 150px; }
#personArea .list ul li .image .name { margin-top: 20px; color: #dcbd14; text-align: center;  }
#personArea .list ul li .data { margin-top: 20px; }
#personArea .list ul li .data .text { line-height: 1.75; }
#personArea .list ul li .data .link { margin-top: 15px; }
#personArea .list ul li .data .link a { margin-top: 8px; }
#personArea .list ul li .data .link a:hover {} 

/*============================
#buttonArea
============================*/
#buttonArea { padding: 60px 0; }
#buttonArea a { font-size: 1em; padding: 16px 60px 15px 50px; min-width: inherit; }
#buttonArea a::before { right: 20px; }
#buttonArea a::after { right: 31px; }
#buttonArea img { position: absolute; left: inherit; top: 110px; margin-left: 0; right: 20px; width: 50px; height: auto;}
#buttonArea a:hover {}
#buttonArea a:hover::before {}
#buttonArea a:hover::after {}

/*============================
#eventArea
============================*/
#eventArea { padding: 60px 0; }
#eventArea .title { font-size: 1.25em; }
#eventArea ul { flex-direction: column; gap: 20px; margin-top: 20px; }
#eventArea ul li { width: 100%; }
#eventArea ul li a {}
#eventArea ul li a .image {}
#eventArea ul li a .image::after {}
#eventArea ul li a .image img { width: 100%; }
#eventArea ul li a .name { margin-top: 10px; }
#eventArea ul li a .copy {}
#eventArea ul li a:hover .image img {}
#eventArea ul li a:hover .image::after {}

/*============================
#otherArea
============================*/
#otherArea { padding: 60px 20px; }
#otherArea .copy { text-align: left; font-size: 1em; }
#otherArea .copy br { display: none; }
#otherArea .button { margin-top: 20px; }
#otherArea .button .lead { font-size: 0.75em; }
#otherArea .button a { padding: 16px 50px 15px 15px; background: #222; color: #fff; font-size: 0.75em; text-align: left; }
#otherArea .button a::before {}
#otherArea .button a::after {}

/*============================
#ctaArea
============================*/
#ctaArea { padding-bottom: 60px; }
#ctaArea .cta { padding: 10px; margin-top: 35px; border-radius: 10px; }
#ctaArea .cta .title { flex-direction: column; }
#ctaArea .cta .title .main { padding: 10px 0; font-size: 1.125em; border-right: none; }
#ctaArea .cta .title .detail { text-align: center; padding-left: 0; font-weight: 500; }
#ctaArea .cta .title .detail span { font-size: 0.75em; }
#ctaArea .cta .badge { width: 90px; height: 100px; top: -50px; }
#ctaArea .cta .badge span { font-size: 0.75em; line-height: 1.5; }
#ctaArea .cta .schedule { padding: 10px 15px; }
#ctaArea .cta .schedule .year { font-size: 1em; }
#ctaArea .cta .schedule .year span {}
#ctaArea .cta .schedule ul { display: block; padding-top: 0; }
#ctaArea .cta .schedule ul li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date btn" "time btn"; align-items: center; column-gap: 15px; padding: 10px 0; text-align: left; }
#ctaArea .cta .schedule ul li + li::before { left: 50%; transform: translateX(-50%); width: 100%; height: 1px; }
#ctaArea .cta .schedule ul li .date { grid-area: date; align-self: end; }
#ctaArea .cta .schedule ul li .date time { font-size: 1.75em; }
#ctaArea .cta .schedule ul li .date span { bottom: 4px; left: 8px; font-size: 0.75em; }
#ctaArea .cta .schedule ul li .date span:before { width: 20px; height: 20px; }
#ctaArea .cta .schedule ul li .time { grid-area: time; align-self: start; font-size: 1em; }
#ctaArea .cta .schedule ul li .btn { grid-area: btn; margin-top: 0; text-align: center; }
#ctaArea .cta .schedule ul li .btn a { white-space: nowrap; padding: 10px 20px 8px; }
#ctaArea .cta .schedule ul li .btn a::before {}
#ctaArea .cta .schedule ul li .btn a:hover {}
#ctaArea .cta .schedule ul li .btn a:hover::before {}

/*============================
#fixBtnArea
============================*/
#fixBtnArea { width: 100%; height: auto; }
#fixBtnArea.is-visible {}
#fixBtnArea .cta { padding: 8px; border-radius: 10px 10px 0 0; }
#fixBtnArea .cta .title { padding: 0 0 4px 0; font-size: 0.785em; letter-spacing: 0.15em; }
#fixBtnArea .cta .schedule { padding: 10px 5px 5px; }
#fixBtnArea .cta .schedule ul {}
#fixBtnArea .cta .schedule ul li {}
#fixBtnArea .cta .schedule ul li + li::before {}
#fixBtnArea .cta .schedule ul li .date {}
#fixBtnArea .cta .schedule ul li .date time { font-size: 1.125em; }
#fixBtnArea .cta .schedule ul li .date span { font-size: 0.65em; bottom: 4px; left: 6px; }
#fixBtnArea .cta .schedule ul li .date span:before { width: 18px; height: 18px; }
#fixBtnArea .cta .schedule ul li .time { font-size: 0.65em; }
#fixBtnArea .cta .schedule ul li .btn { margin-top: 5px; }
#fixBtnArea .cta .schedule ul li .btn a { font-size: 0.65em; padding: 5px 0 4px; }
#fixBtnArea .cta .schedule ul li .btn a::before {}
#fixBtnArea .cta .schedule ul li .btn a:hover {}
#fixBtnArea .cta .schedule ul li .btn a:hover::before {}

/*============================
#footer
============================*/
#footer { padding: 30px 0 20px; }
#footer .footer__copy {}
#footer .footer__copy  {}
#footer .footer__copy  a {}
#footer .footer__copy  a img { width: 90px; height: auto; }
#footer .footer__copy p { margin-top: 20px; }

}