@charset "UTF-8";
/* Vendor */
/* Site settings */
#out-wrapper { max-width: 1060px; margin: 0 auto; }
#out-wrapper .txt, #out-wrapper .txt2 { font-size: 1.6rem; line-height: 1.8; }
@media screen and (max-width: 559px) { #out-wrapper .txt, #out-wrapper .txt2 { font-size: 1.4rem; line-height: 1.5; } }
#out-wrapper .attention { font-size: 1.3rem; margin-left: 1.3rem; text-indent: -1.3rem; }
#out-wrapper .highlighter { background: #ffe600; font-weight: 700; }
#out-wrapper .btn a { width: 180px; border: 1px solid #0778be; border-radius: 6px; color: #0778be; text-align: center; padding: .5rem 0; text-decoration: none; font-size: 1.3rem; display: inline-block; }
#out-wrapper .btn a:hover { background: #0778be; color: #fff; opacity: 1; }

#page-navi { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8.5rem; }
@media screen and (max-width: 959px) { #page-navi { flex-wrap: wrap; margin-bottom: 2.5rem; } }
#page-navi li { width: 23%; }
@media screen and (max-width: 959px) { #page-navi li { width: 48%; margin-bottom: 2rem; } }
@media screen and (max-width: 559px) { #page-navi li { width: 49%; margin-bottom: 1rem; } }
#page-navi li a { width: 100%; background: #0778be; padding: 1.6rem .5rem; text-align: center; font-size: 1.8rem; font-weight: 700; color: #fff; display: block; }
@media screen and (max-width: 959px) { #page-navi li a { font-size: 1.6rem; } }
@media screen and (max-width: 559px) { #page-navi li a { font-size: 1.4rem; } }
#page-navi li a:hover { box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2); opacity: 1; }
#page-navi li a:active { box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5) inset; }

#method a { text-decoration: underline; color: #0778be; }
#method ul li { display: flex; }
@media screen and (max-width: 559px) { #method ul li { flex-direction: column; } }
#method ul li .number { width: 79px; margin-right: 4rem; }
@media screen and (max-width: 959px) { #method ul li .number { margin-right: 3rem; } }
@media screen and (max-width: 559px) { #method ul li .number { width: 60px; margin: 0 0 1.5rem 0; } }
#method ul li .txt { flex: 1; }
@media screen and (max-width: 959px) { #method ul li .txt p br { display: none; } }
@media screen and (max-width: 559px) { #method ul li .txt { flex: auto; } }
#method ul li .attention { margin-top: 2.5rem; }
#method ul li .attention p { margin-bottom: .8rem; }
#method ul li:first-child { margin-bottom: 4rem; }
@media screen and (max-width: 559px) { #method ul li:first-child { margin-bottom: 2.5rem; } }
#method ul li:first-child .attention { margin-top: 1rem; }
#method .btn { margin-top: 3.5rem; }
@media screen and (max-width: 559px) { #method .btn { margin-top: 1.5rem; } }
@media screen and (max-width: 559px) { #method .txt2 p br { display: none; } }
#method .txt2 .attention { margin-top: 2.5rem; }
@media screen and (max-width: 559px) { #method .txt2 .attention { margin-top: 1.5rem; } }
#method .txt2 .attention p { margin-bottom: .8rem; }

#present .holder { display: flex; justify-content: space-between; }
@media screen and (max-width: 959px) { #present .holder { flex-wrap: wrap; } }
#present .holder .movie { width: 400px; margin-right: 5rem; }
@media screen and (max-width: 959px) { #present .holder .movie { width: 100%; margin-right: 0; margin-bottom: 1rem; } }
#present .holder .movie .movie-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
#present .holder .movie .movie-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#present .holder .txt { flex: 1; font-weight: 700; }
@media screen and (max-width: 959px) { #present .holder .txt { flex: auto; } }
#present .holder .txt .attention { margin-top: 3rem; font-weight: 400; }
@media screen and (max-width: 559px) { #present .holder .txt .attention { margin-top: 1.5rem; } }
#present .holder .txt .attention p { margin-bottom: .8rem; }
#present .holder .txt .attention .attention2 { padding-left: .7rem; margin-top: 1.5rem; }
#present .holder .txt .attention .attention2 span { margin-left: -.7rem; }
#present .holder .txt .attention .attention2 span a { text-decoration: underline; color: #0778be; }
#present .holder .txt .magip { width: 100px; margin-top: 2.5rem; }

#faq ul li { font-size: 1.6rem; line-height: 2; margin-bottom: 4rem; }
@media screen and (max-width: 959px) { #faq ul li { margin-bottom: 3rem; } }
@media screen and (max-width: 559px) { #faq ul li { font-size: 1.4rem; line-height: 1.5; margin-bottom: 2rem; } }
#faq ul li h3 { font-weight: 700; margin-bottom: 1rem; margin-left: 2.2rem; text-indent: -2.2rem; }
@media screen and (max-width: 959px) { #faq ul li h3 { line-height: 1.7; } }
@media screen and (max-width: 559px) { #faq ul li h3 { margin-left: 1.8rem; text-indent: -1.8rem; } }
#faq ul li h3:before { content: "Q: "; }
#faq ul li p { padding-left: 2.2rem; }
@media screen and (max-width: 959px) { #faq ul li p { font-size: 1.4rem; line-height: 1.5; } }
@media screen and (max-width: 559px) { #faq ul li p { padding-left: 1.8rem; } }
#faq ul li p a { text-decoration: underline; color: #0778be; }

#method, #present { margin-bottom: 6.5rem; padding-bottom: 6.5rem; border-bottom: 1px dotted #777; }
@media screen and (max-width: 959px) { #method, #present { margin-bottom: 4rem; padding-bottom: 4rem; } }
@media screen and (max-width: 559px) { #method, #present { margin-bottom: 2.5rem; padding-bottom: 2.5rem; } }

#map { /*js上スタイル*/ }
#map .sec-ttl { text-align: center; margin-bottom: 3rem; }
@media screen and (max-width: 559px) { #map .sec-ttl { margin-bottom: 2.5rem; } }
#map .lead { font-size: 1.6rem; line-height: 1.5; font-weight: 700; text-align: center; }
@media screen and (max-width: 959px) { #map .lead { text-align: left; } }
@media screen and (max-width: 559px) { #map .lead { font-size: 1.4rem; } }
#map #maps { width: 100%; height: 600px; margin-top: 4rem; }
@media screen and (max-width: 559px) { #map #maps { height: 440px; margin-top: 2rem; } }
#map #region-navi { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 2.5rem; padding: 2rem .5rem; border-top: 1px solid #0778be; border-bottom: 1px solid #0778be; }
@media screen and (max-width: 860px) { #map #region-navi { padding: 2rem .5rem 0; } }
#map #region-navi li { width: 15.2%; text-align: center; }
@media screen and (max-width: 860px) { #map #region-navi li { width: 33.2%; margin-bottom: 2rem; } }
@media screen and (max-width: 440px) { #map #region-navi li { width: 49%; } }
#map #region-navi li a { display: block; color: #0778be; position: relative; font-weight: 700; }
#map #region-navi li a:after { content: ""; display: inline-block; margin-left: .5rem; width: 7px; height: 5px; background-size: contain; background-image: url(../img/common/arrow-down.svg); vertical-align: middle; }
#map #region-list .region { border-top: 1px dotted #444; padding-top: 2rem; margin-top: 2rem; }
#map #region-list .region:first-child { border-top: none; margin-top: 3rem; }
@media screen and (max-width: 860px) { #map #region-list .region:first-child { margin-top: 2rem; } }
@media screen and (max-width: 440px) { #map #region-list .region:first-child { margin-top: 1rem; } }
#map #region-list .region ul { display: flex; flex-wrap: wrap; padding-bottom: 1rem; }
#map #region-list .region ul li { /*地区別詳細*/ padding: 1rem 1rem 1rem 0; width: 24%; margin-right: 1.3%; margin-bottom: .5rem; }
@media screen and (max-width: 860px) { #map #region-list .region ul li { width: 32%; margin-right: 2%; } }
@media screen and (max-width: 620px) { #map #region-list .region ul li { width: 49%; margin-right: 2%; } }
@media screen and (max-width: 360px) { #map #region-list .region ul li { width: 100%; margin-right: 0; } }
#map #region-list .region ul li:nth-child(4n) { margin-right: 0; }
@media screen and (max-width: 860px) { #map #region-list .region ul li:nth-child(4n) { margin-right: 2%; }
  #map #region-list .region ul li:nth-child(3n) { margin-right: 0; } }
@media screen and (max-width: 620px) { #map #region-list .region ul li:nth-child(3n) { margin-right: 0; }
  #map #region-list .region ul li:nth-child(even) { margin-right: 0; }
  #map #region-list .region ul li:nth-child(odd) { margin-right: 2%; } }
@media screen and (max-width: 360px) { #map #region-list .region ul li:nth-child(odd) { margin-right: 0; } }
#map #region-list .region ul li a { display: flex; align-items: center; }
#map #region-list .region ul li a:hover { opacity: 0.8; }
#map #region-list .region ul li .image { width: 60px; height: 60px; margin-right: 1rem; }
@media screen and (max-width: 860px) { #map #region-list .region ul li .image { width: 50px; height: 50px; } }
@media screen and (max-width: 440px) { #map #region-list .region ul li .image { width: 40px; height: 40px; } }
#map #region-list .region ul li .image img { width: 60px; height: 60px; border-radius: 50%; }
@media screen and (max-width: 860px) { #map #region-list .region ul li .image img { width: 50px; height: 50px; } }
@media screen and (max-width: 440px) { #map #region-list .region ul li .image img { width: 40px; height: 40px; } }
#map #region-list .region ul li .name h4 { font-size: 1.3rem; line-height: 1.8rem; font-weight: bold; color: #444; }
@media screen and (max-width: 860px) { #map #region-list .region ul li .name h4 { font-size: 1.2rem; } }
#map #region-list .region ul li .name p.location { font-size: 1.2rem; line-height: 1.6rem; color: #444; }
#map #region-list .region ul li .name p.location:before { content: "["; padding-right: 2px; }
#map #region-list .region ul li .name p.location:after { content: "]"; padding-left: 2px; }
#map #region-list .region ul li .name p.date { font-size: 1.3rem; line-height: 1.3rem; color: #0778be; letter-spacing: .1rem; margin-bottom: .5rem; }
@media screen and (max-width: 959px) { #map #region-list .region ul li .name p.date { font-size: 1.2rem; line-height: 1.2rem; letter-spacing: 0; margin-bottom: .3rem; } }
#map #region-list .region ul li .name p.date:after { content: "開催"; padding-left: 4px; font-size: 1.2rem; line-height: 1.2rem; }
@media screen and (max-width: 959px) { #map #region-list .region ul li .name p.date:after { font-size: 1.1rem; line-height: 1.1rem; } }
#map #region-list .region h3 { /*地区名*/ font-size: 1.7rem; color: #0778be; font-weight: bold; letter-spacing: .2rem; margin-bottom: 1rem; }
@media screen and (max-width: 860px) { #map #region-list .region h3 { font-size: 1.5rem; } }
#map #region-list p.coming { font-size: 1.3rem; }
#map .iw-wrappe { max-width: 200px; display: flex; align-items: center; flex-direction: column; }
#map .iw-image, #map .iw-image img { width: 100%; height: 115px; margin-top: .5rem; }
#map .iw-name { font-size: 1.2rem; font-weight: bold; line-height: 1.7rem; margin-top: .8rem; }
#map .iw-crew { font-size: 1.1rem; text-align: left; line-height: 1.6rem; padding-top: 3px; margin-top: 3px; border-top: 1px solid #ddd; }