:root {
   --color-faq-primary: #005e3c;
   --color-faq-gold: #DEAC00;
   --color-caution: #D0000E;
   
}

/*--------------------------------------
  ヘッダ部
--------------------------------------*/
#faq-header h1>img {
   height: 94px;
   width: auto;
   margin-left: 10px;
}


#faq-header h2 {
   font-size: 35px;
   font-weight: 700;
   margin-top: 15px;
}
#faq-header.content-header{
   position: relative;
   padding-left: 150px;
}
#faq-header.content-header>div{
   width: 650px;
   max-width: 45vw;
   position: absolute;
   top: -20px;
   left: 450px;
   mix-blend-mode: multiply;
}
#faq-header.content-header>div img{
   object-fit: contain;
}

@media screen and (min-width: 640px) {
   #faq-header {
      height: 200px;
      min-height: unset;
   }

}

@media screen and (max-width: 639px) {
   #faq-header h1>img {
      height: 60px;
      width: auto;
   }

   #faq-header.content-header {
      padding-bottom: 0;
      padding-left: 0;
   }
   #faq-header h1 img {
      margin: 0 auto;
   }
   #faq-header h2 {
      font-size: 32px;
      text-align: center;;
   }
}

/*--------------------------------------
  コンテンツ
--------------------------------------*/
#main-contents {
      background: linear-gradient(to right,  rgba(246,231,193,1) 0%,rgba(255,255,255,0) 380px),
               linear-gradient(to left,  rgba(246,231,193,1) 0%,rgba(255,255,255,0) 380px);
      padding-top: 116px;
}


.faq-content .faq-wrap {
   margin-bottom: 80px;
}
.faq-wrap a {
   color: var(--color-font-base);
}

.faq-wrap ul {
   padding-left: 1em;
}

.faq-wrap .caution ul {
   list-style-type: '※';
}

.faq-wrap>div {
   display: flex;
   gap: 1.1875rem;
}


.faq-wrap>div:first-child {
   justify-content: flex-start;
   flex-flow: column;
   align-items: start;
   padding: 0 10px 0 0;
   margin-bottom: 2rem;
}

.faq-wrap>div:first-child>img:first-child {
   width: 107px;
   height: auto;
}


.faq-wrap>div:first-child>p {
   font-family: var(--font-family-mincho);
   color: #000;
   line-height: 1.437em;
   font-weight: 400;
   font-size: 2rem;
   letter-spacing: 0.05em;
   font-feature-settings: "palt";
}


.faq-wrap>div:last-child {
   justify-content: space-between;
}

.faq-wrap>div:last-child>span:first-child {
   background-color: var(--color-faq-gold);
   box-sizing: border-box;
   width: 63px;
   padding: 34px 0;
   display: flex;
   align-items: center;
   justify-content: center;
}
.faq-wrap>div:last-child>span:first-child img{
   height: 20px;
   width: auto;
}

.faq-wrap>div:last-child>*:last-child {
   margin-left: 0.5em;
   width: calc(100% - 63px);
   padding-right: 1em;
   font-size: 1.1875rem;
}

.faq-wrap>div:last-child p {
   text-align: justify;
   font-family: var(--font-family-mincho);
   letter-spacing: 0.05em;
   font-feature-settings: "palt";
   line-height: 1.75em;
}
.faq-wrap>div:last-child div.document {
   display: flex;
}

.faq-wrap>div:last-child div.document p:first-child {
   width: 100%;
   margin-bottom: 1em;
}

.faq-wrap div.document ul li {
   display: inline-block;
   margin-right: 2em;
   line-height: 2em;
   letter-spacing: 0.05em;
   font-feature-settings: "palt";
   margin-bottom: 0.175em;
   text-indent: -1em;
   padding-left: 1em;
}

.faq-wrap>div:last-child div.document ul {
   list-style: none;
}

.faq-wrap>div:last-child div.document ul li::before {
   content: "●";
   color: var(--color-faq-gold);
   margin-right: 2px;
}
.faq-wrap div.document ul li.line-break{
   width: 100%;
}

.caution {
   display: inline-block;
   color: var(--color-caution);
   margin-top: 5px;
   line-height: 1.3;
   font-size: .85em;
    letter-spacing: 1px;
}
@media screen and (max-width:1600px) {
   #main-contents {
      background: linear-gradient(to right,  rgba(246,231,193,1) 0%,rgba(255,255,255,0) 23%),
               linear-gradient(to left,  rgba(246,231,193,1) 0%,rgba(255,255,255,0) 23%);
   }
}
@media screen and (max-width:1200px) {
   #main-contents {
      background: linear-gradient(to right,  rgba(246,231,193,1) 0%,rgba(255,255,255,0) 20%),
               linear-gradient(to left,  rgba(246,231,193,1) 0%,rgba(255,255,255,0) 20%);
}
      .faq-content > .contents-inner{
         padding: 0 2.5%;
      }
   .faq-wrap p br.br-pc {
      display: none;
   }

   .faq-wrap div span.caution {
      display: block;
   }

   .faq-wrap div span.caution br {
      display: inline;
   }
}

@media screen and (min-width:640px) and (max-width:1200px) {

}

@media screen and (max-width: 859px) {

}

@media screen and (max-width:639px) {
   .faq-wrap {
      padding: 0;
   }

   .faq-wrap>div {
      gap: 8px;
   }

   .faq-wrap>div:first-child {
      padding:0 8px;
      margin-bottom: 1rem;
   }
   
   .faq-wrap>div:first-child>img:first-child {
      width: 25%;
      margin: 0 auto;
   }

   .faq-wrap>div>span:first-child {
      align-items: flex-start;
   }

   .faq-wrap>div:first-child>p {
      margin-left: 0;
      font-size: 1.4rem;
   }
   .faq-wrap>div:last-child{
      flex-flow: column;
      align-items: flex-start;
   }
   .faq-wrap>div:last-child>span:first-child{
      width: 100%;
      padding: 8px;
      justify-content: center;
   }
   .faq-wrap>div:last-child>*:last-child {
      width: 100%;
      padding: 0 8px;
      margin-left: 0;
   }

   .faq-wrap>div:last-child>*:last-child {
      font-size: 1rem;
   }

   .faq-wrap>div:last-child p {
      line-height: 1.6em;
   }

   .faq-wrap>div:last-child div.document {
      display: block;
   }

   .faq-wrap>div:last-child div.document p:first-child {
      margin-bottom: 10px;
   }

   .faq-wrap div.document ul {
      margin-bottom: 15px;
   }

   .faq-wrap div.document ul li {
      display: block;
      line-height: 1.75em;
      font-size: 0.9em;
   }
}



/*** 内野エリアにおける防球ネットの拡張ダイアログ表示用 ***/

#cover .card-title h3 {
   font-size: 46px;
   text-align: left;
   margin-top: 0;
}

#cover .card-title h3 span {
   font-family: 'Oswald', sans-serif;
   display: inline-block;
   font-size: 32px;
   font-weight: bold;
   width: 42px;
   line-height: 42px;
   text-align: center;
   color: #fff;
   margin-right: 0;
   position: relative;
   top: -4px;
   margin-bottom: 5px;
}

#cover .card-detail-2 span.num {
   font-family: 'Oswald', sans-serif;
   display: inline-block;
   font-size: 18px;
   font-weight: bold;
   width: 30px;
   line-height: 30px;
   text-align: center;
   color: #fff;
   margin-right: 4px;
   position: relative;
   top: -4px;
}

#cover .card-detail {
   display: grid;
   grid-template-columns: minmax(auto, 60%) minmax(auto, 40%);
   gap: 30px;
}

#cover .card-ballnet {
   display: grid;
   grid-template-columns: minmax(auto, 31%) minmax(auto, 69%);
   gap: 20px;
}

#cover .ballnet .contents img {
   width: 100%;
}

#cover .ballnet .before-after {
   display: flex;
   gap: 50px;
   position: relative;
   margin-top: 20px;
}

#cover .ballnet .before-after-note {
   margin: 20px 0 5px 0;
   font-family: var(--font-family-gothic);
}

#cover .ballnet .card-h4 {
   margin-top: 40px;
}

#cover .ballnet .card-h4 ul {
   margin-left: 18px;
   padding-left: 20px;
}

#cover .ballnet .card-h4 li {
   list-style: '※';
}

#cover .ballnet .card-h4 .card-ballnet-text {}

#cover .card-ballnet-3 .arrow img {
   margin-top: 200%;
}

#cover .card-h4 {
   margin-top: 20px;
   margin-bottom: 10px;
}

#cover .card-h4 h4 {
   font-size: 24px;
   font-family: var(--font-family-gothic);
   font-weight: normal;
}

#cover .card-detail .card-detail-left h4 {
   font-size: 28px;
   margin-bottom: 10px;
}



#cover #card-10 .card-title p {
   display: inline;
   font-size: 36px;
}

#cover #card-reclining .card-detail-header {
   grid-template-columns: 48% 1fr;
   gap: 0;
   margin-top: 80px !important;
}

#cover #card-reclining .card-detail {
   margin-top: 20px;
}

#cover #card-reclining .card-reclining-text {
   font-family: var(--font-family-gothic);
   font-size: 14px;
}

@media screen and (min-width: 860px) {
   #card-3 .card-detail {
      gap: 5px;
   }

   #cover .card-detail .card-detail-right .seat-img-2 img {
      max-width: 200px;
      position: relative;
      top: -80px;
      margin-bottom: -80px;
      width: 80%;
   }
}

@media screen and (max-width: 859px) {
   #cover .card-detail {
      grid-template-columns: 1fr;
      margin-top: 0;
   }

   #cover .card-ballnet {
      grid-template-columns: 1fr;
   }

   #cover .card-detail .card-detail-right .seat-img-1,
   #cover .card-detail .card-detail-right .seat-img-3 {
      text-align: center;
   }

   #cover .card-detail .card-detail-right .seat-img-1 img {
      max-width: 350px;
   }

   #cover .card-detail .card-detail-right .seat-img-3 img {
      max-width: 500px;
      width: 100%;
   }

   #cover .card-detail .card-detail-right .seat-img-2 img {
      max-width: 300px;
      position: relative;
      top: -80px;
      margin-bottom: -80px;
      width: 60%;
   }

   #cover #card-10 .card-h4 {
      grid-template-columns: 1fr;
   }
}

#cover .two-column {
   gap: 15px;
}

#cover .ballnet .two-column {
   margin-bottom: 10px;
}

@media screen and (min-width: 640px) {

   #cover .card-right-image {
      margin-top: -70px;
   }

   #cover .two-column,
   #card-3 .two-column {
      grid-template-columns: 1fr 1fr;
   }

   #card-3 .card-detail {
      gap: 30px;
   }

   #card-3 .card-detail-2 .text-2 {
      padding-top: 100px;
   }

   #cover .card-ballnet-text {
      font-size: 18px;
      line-height: 1.7;
      margin-bottom: 0;
   }

   #cover #card-reclining .card-reclining-images {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
   }

   #cover #card-reclining .card-reclining-images img {
      max-width: 100%;
      ;
   }

   #cover .ballnet .before-after .card_ballnet_arrow {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
   }
}

@media screen and (max-width: 639px) {
   #cover .two-column {
      max-width: 300px;
      margin: 0 auto;
      gap: 10px !important;
      margin-bottom: 10px;
   }

   #cover .ballnet .two-column {
      width: 100%;
      max-width: 100%;
   }

   #cover .card-title h3 {
      font-size: 31px;
      line-height: 1.3;
   }

   #card-3 .two-column {
      margin-bottom: 50px;
   }

   #card-3 .card-detail-2 .text-2 {
      margin-top: -40px;
   }

   #cover .card-h4 h4 {
      font-size: 22px;
      margin-top: 30px;
      margin-bottom: 10px;
   }

   #cover .card-ballnet-text {
      font-size: 16px;
      margin-bottom: 0;
   }

   #cover .card-detail .card-detail-left h4 {
      font-size: 23px;
   }

   #cover .ballnet .before-after {
      flex-direction: column;
      gap: 20px;
      margin-top: 20px;
   }

   #cover .ballnet .before-after .card_ballnet_arrow {
      text-align: center;
   }

   #cover .ballnet .before-after .card_ballnet_arrow img {
      width: 15%;
      transform: rotate(90deg) translateY(-100%);
   }

   #cover #card-reclining .card-detail.card-detail-header {
      grid-template-columns: 1fr;
      margin-top: 0 !important;
   }
}

@media screen and (min-width: 860px) {
   #card-3 .two-column {
      grid-template-columns: minmax(auto, 60%) minmax(auto, 40%);
      gap: 5px;
      margin-bottom: 10px;
   }
}

#cover .card-detail .card-detail-text {
   font-size: 18px;
   line-height: 1.7;
   margin-bottom: 30px;
}

#cover .card-detail img {
   width: 100%;
}

#cover .card-detail .card-detail-right .seat-img {
   text-align: center;
}

#cover .card-detail .card-detail-right .seat-img img {
   width: 80%;
   position: relative;
   top: -80px;
   margin-bottom: -80px;
   max-width: 250px;
}

@media screen and (max-width: 1000px) and (min-width: 860px) {
   #cover .card-detail {
      grid-template-columns: minmax(auto, 55%) minmax(auto, 45%);
   }
}

@media screen and (max-width: 1000px) {
   #cover .card-detail .card-detail-right .seat-img img {
      top: 0;
      margin-bottom: 0;
      max-width: 250px;
   }
}

@media screen and (min-width: 1000px) {
   #cover .card-title h3 br {
      display: none;
   }
}

#cover .card-detail-2 {
   font-family: var(--font-family-gothic);
}

#cover .card-detail-2 .text-1 {
   color: green;
}

#cover .card-detail-2 .text-1,
#cover .card-detail-2 .text-2 {
   line-height: 1.5;
   font-size: 15px;
   font-weight: bold;
}

#cover .card-ballnet-right {
   line-height: 1.5;
   font-size: 13px;
   font-weight: bold;
   font-family: var(--font-family-gothic);
}

#cover .card-ballnet-left {
   line-height: 1.8;
   font-size: 18px;
}

#cover .card-detail-2 .text-1 {
   color: green;
}

#cover .card-detail-2 .two-column .contents-inner span.sankaku {
   display: block;
   font-size: 12px;
   margin-top: -3px;
   margin-bottom: 5px;
   padding-left: 1em;
   text-indent: -1em;
}

#cover span.space {
   display: block;
   height: 5px;
}

@media screen and (min-width: 860px) {
   #cover .mb {
      display: none;
   }
}

@media screen and (max-width: 859px) {
   #cover .card-detail-2 .two-column .contents-inner span br {
      display: none;
   }
}

@media screen and (max-width: 639px) {
   #cover .card-detail-2 .two-column .contents-inner span.sankaku {
      font-size: 14px;
   }
}