@charset "utf-8";

/*
Theme Name:ファイターズ応援大使 トークショー&抽選会
*/

/* ==============
Base
============== */

body {
    min-width: 320px;
    overflow: hidden;
}

.container {
    overflow: hidden;
    margin: 0 10px;
}
@media screen and (min-width: 950px){
    .container {
        max-width: 1380px;
        padding: 0 30px;
        margin: 0 auto;
    }
}

ul {
    list-style-type: none;
}

img {
    border: 0;
    max-width: 100%;
    height: auto;
    vertical-align:top;
}

/* clearfix */
.cf::after {
    content: "";
    display: block;
    clear: both;
}

/* 読み込みスピードアップ */
.spead {
    content-visibility: auto;
}

/* レスポンシブ表示切り替え(コンテンツ_メニュー) */
.sp_menu {
    display: block;
}   
.p_menu {
    display: none;
}    
@media screen and (min-width: 950px){
    .sp_menu {
        display: none;
    }       
    .pc_menu {
        display: block;
    }    
}

/* レスポンシブ表示切り替え(コンテンツ) */
.sp {
    display: block;
}   
.pc {
    display: none;
}    
@media screen and (min-width: 710px){
    .sp {
        display: none;
    }       
    .pc {
        display: block;
    }    
}

/* レスポンシブ表示切り替え(テキスト折り返し_段落なしから) */
.flap_text {
    display: inline;
}   
@media screen and (min-width: 700px){
    .flap_text {
        display: block;
    }        
}

/* レスポンシブ表示切り替え(テキスト折り返し_段落ありから) */
.flap_text_br {
    display: block;
}   
@media screen and (min-width: 700px){
    .flap_text_br {
        display: inline;
    }        
}

/* グリッドレイアウト(2カラム〜570pxで4カラムに変更) */
.block-grid-2-4 li {
    width: 48%;
    margin-right: 4%;
}
.block-grid-2-4 li:nth-child(2n) {
    margin-right: 0;
}
.block-grid-2-4 li:nth-child(2n+1) {
    clear: both;
}
@media screen and (min-width: 560px){
    .block-grid-2-4 li {
      width: 23.5%;
      margin-right: 2%;
      float: left;
    }
    .block-grid-2-4 li:nth-child(2n) {
        margin-right: 2%;
    }
    .block-grid-2-4 li:nth-child(2n+1) {
        clear: none;
    }
    .block-grid-2-4 li:nth-child(4n+1) {
        clear: both;
    }
    .block-grid-2-4 li:nth-child(4n) {
        margin-right: 0;
    }
}

/* グリッドレイアウト(1カラム〜570pxで2カラム〜950pxで4カラムに変更) */
.block-grid-1-2-4 li {
    width: 100%;
}
@media screen and (min-width: 570px){
    .block-grid-1-2-4 li {
        width: 48%;
        margin-right: 2%;
        float: left;
    }
    .block-grid-1-2-4 li:nth-child(2n+1) {
        clear: both;
    }
    .block-grid-1-2-4 li:nth-child(2n) {
        margin-right: 0;
    }
}
@media screen and (min-width: 950px){
    .block-grid-1-2-4 li {
        width: 23.5%;
        margin-right: 2%;
    }
    .block-grid-1-2-4 li:nth-child(2n) {
        margin-right: 2%;
    }
    .block-grid-1-2-4 li:nth-child(2n+1) {
        clear: none;
    }
    .block-grid-1-2-4 li:nth-child(4n+1) {
        clear: both;
    }
    .block-grid-1-2-4 li:nth-child(4n) {
        margin-right: 0;
    }
}

/* グリッドレイアウト(marginなし／1カラム〜570pxで2カラム〜950pxで4カラムに変更) */
.block-grid-1-2-4_m0 li {
    width: 100%;
}
@media screen and (min-width: 570px){
    .block-grid-1-2-4_m0 li {
        width: 50%;
        float: left;
    }
    .block-grid-1-2-4_m0 li:nth-child(2n+1) {
        clear: both;
    }
}
@media screen and (min-width: 950px){
    .block-grid-1-2-4_m0 li {
        width: 25%;
    }
    .block-grid-1-2-4_m0 li:nth-child(2n+1) {
        clear: none;
    }
    .block-grid-1-2-4_m0 li:nth-child(4n+1) {
        clear: both;
    }
}

/* グリッドレイアウト(1カラム〜570pxで2カラムに変更) */
.block-grid-1-2 li {
    width: 100%;
}
@media screen and (min-width: 570px){
    .block-grid-1-2 li {
      width: 49%;
      margin-right: 2%;
      float: left;
    }
    .block-grid-1-2 li:nth-child(2n+1) {
        clear: both;
    }
    .block-grid-1-2 li:nth-child(2n) {
        margin-right: 0;
    }
}

::selection{
    background: #000;
    color: #fff100;
}
::-moz-selection{
    background: #000;
    color: #fff100;
}

/* ==============
Base(font)
============== */

/* 全体 */
body {
    font-size: 14px;
    letter-spacing: 0.05rem;
    font-family: 'Open Sans', sans-serif;
    /* font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
}
@media screen and (min-width: 750px){
    body {
        font-size: 18px;
    }
}

/* ==============
Header
============== */

.header {
    position: relative;
    width: 100%;
    display: block;
    z-index: 10;
}

/* Menu */
.logo_image_wrap {
    width: 35%;
    margin-left: 10px;
    max-width: 310px;
}
@media screen and (min-width: 480px){
    .logo_image_wrap {
        margin-left: 25px;
        max-width: 190px;
    }    
}
@media screen and (min-width: 950px){
    .logo_image_wrap {
        margin-bottom: 25px;
        width: 30%;
    }    
}

.fighters_logo_image_wrap {
    position: absolute;
    right: 10px;
    top: 20px;
    width: 30%;
}

.fighters_logo_image01_wrap {
    max-width: 18%;
    position: absolute;
    right: 10px;
}

.fighters_logo_image02_wrap {
    float: right;
    width: 48%;
    padding-top: 5px;
    max-width: 50px;
}

.logo_image_link {
    display: block;
    transition: 0.3s;
    margin-top: -10px;
}

.logo_image {
    width: 100%;
}

.header_content {
    height: 25px;
}

/* ==============
Main(共通)
============== */

.content_wrap {
    padding: 20px 0;
}
@media screen and (min-width: 950px){
    .content_wrap {
        padding: 50px 0;
    }    
}

/* ==============
Main(#content_01)
============== */

.content_01_images_wrap {
    text-align: center; /* 画像を中央に配置 */
}

/* デフォルト（PC版）のスタイル */
.content_01_images_wrap img {
    /* PCでは画像の最大幅を1000pxに固定 */
    max-width: 1200px; 
    
    /* 念のため幅を100%にして、max-widthを超えないようにする */
    width: 100%;
    
    height: auto; /* アスペクト比を維持 */
}

/* 画面幅が900px以下になった場合に適用するスタイル */
@media (max-width: 900px) {
    .content_01_images_wrap img {
        /* PC用のmax-width指定を上書きし、画面幅いっぱいに広がるようにする */
        max-width: 100%;
    }
}

/* ==============
Main(#content_03)
============== */

.content_images {
    background: url(../images/background_image03.jpg) no-repeat;
    background-size: cover;
}

.content_events {
    display: grid;
    /* 左の画像を2fr、右の画像を1frの比率で分割 */
    grid-template-columns: 2fr 1fr; 
    gap: 10px; /* 画像間のスペース */
    padding: 25px;
    align-items: center; /* 画像を中央揃えにする場合 */
    max-width: 1000px;
    margin: 0 auto;
    padding: 60px 0 30px;
}

.content_events img {
    /* 親要素のグリッドエリアに合わせて幅100%に */
    width: 100%; 
    height: auto; /* 高さは自動でアスペクト比を維持 */
    max-width: 100%; /* はみ出し防止 */
    display: block; /* 余計な下余白を消す */
}

/* 画面幅が600px以下になったら */
@media (max-width: 600px) {
    .content_events {
        /* グリッドを1列にし、要素が縦に並ぶようにする */
        grid-template-columns: 1fr; 
    }
}


.content_detail {
    /* 親要素をFlexboxコンテナにする */
    display: flex;
    /* 並びの方向を縦（column）にする */
    flex-direction: column;
    /* 子要素（画像）を中央揃えにする */
    align-items: center;

    /* コンテナの最大幅を設定 */
    max-width: 900px;

    /* コンテナ自体をページの中央に配置する */
    margin: 0 auto;

    /* 画像と画像の間に余白を設ける */
    gap: 20px; 
}

.content_detail img {
    /* 親要素の幅に合わせて100%表示 */
    width: 100%;
    /* 高さはアスペクト比を維持して自動調整 */
    height: auto;
}

/* ==============
Main(#content_05)
============== */
.center img {
    /* 親要素の幅を基準に100%表示 */
    width: 100%; 
    
    /* 元の指定通り、幅が800px以上にはならないようにする */
    max-width: 800px; 
    
    /* アスペクト比を維持するため高さを自動調整 */
    height: auto; 
    
    /* 画像下の余分な余白を防ぐ */
    display: block;
    
    /* 画像を中央に配置する場合 */
    margin: 0 auto;
}

.hagaki_center {
    margin: 0 auto;
    max-width: 1400px;
    padding: 0 2%;
}

.hagaki_box {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    background: #FFF;
    border: solid 1px #000;/*線*/
    border-radius: 999px;/*角の丸み*/
}
.hagaki_box p {
    text-align: center;
    margin: 0; 
    padding: 0;
}








#content_05 {
    background: #005b98;
}

.content_05_title_wrap {
    background: #fff;
    margin-bottom: 20px;
}

.content_05_detail {
    margin-bottom: 10px;
}

.content_05_title {
    color: #005b98;
    font-weight: bold;
    font-size: 1.1rem;
    border-bottom: 2px dotted #005b98;
    text-align: center;
}

.content_05_sub_title {
    color: #d80c24;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
}

.content_05_sub_title_span {
    font-size: 1.3rem;
}

.content_05_detail {
    color: #fff;
    font-weight: bold;
}

.content_05_text {
    color: #fff;
    margin-bottom: 20px;
}

.content_05_text_notes {
    color: #ffffff;
}

.content_05_text_notes_title {
    font-weight: bold;
    display: flex;
    align-items: center;
}

.content_05_text_notes_title:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #fff;
}

.content_05_text_notes_title:after {
    margin-left: 1rem;
}

.content_05_text_notes_text_span {
    border-bottom: 2px dotted #FFF100;
    color: #FFF100;
    font-weight: 600;
}

/* ==============
Main(#content_06)
============== */

.content_06_title {
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 10px;
}

.content_06_text {
    margin-bottom: 20px;
}
@media screen and (min-width: 620px){
    .content_06_text {
        text-align: center;
    }    
}

.content_06_button_wrap {
    width: 95%;
    margin: 0 auto;
    overflow: visible;
}

.content_06_button {
    display: block;
    height: 65px;
    max-width: 300px;
    line-height: 65px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    margin: 0 auto;
}

.center li {
    list-style: none;
}

.content_06_button:hover {
    opacity: 0.8;
}

.content_06_button_form {
    color: #000;
    background: linear-gradient(180deg, #fffbba 0%, #fffbba 50%, #fff100 50%, #fff100 100%);
    box-sizing: border-box;
    border: 3px solid #c8b78c;
    box-shadow: 0 0 0 3px #000 inset;
    margin: 40px auto 50px;
    overflow: visible;
}

.content_06_button_pdf {
    color: #000;
    background: linear-gradient(180deg, #ffadb7 0%, #ffadb7 50%, #ff5e71 50%, #ff5e71 100%);
    border: 3px solid #c8b78c;
    box-shadow: 0 0 0 3px #000 inset;
}
@media screen and (min-width: 550px){
    .content_06_button_pdf {
        margin-bottom: 0;
    }
}

.content_06_button_text {
    text-align: center;
}
@media screen and (min-width: 570px){
    .content_06_button_text {
        font-size: 0.8rem;
    }    
}

/* ==============
Footer
============== */

.footer {
    background: #000;
    color: #fff;
}

.footer_content {
    padding: 30px 0;
}

.logo_image_footer_wrap {
    width: 85%;
    margin-bottom: 20px;
    max-width: 310px;
}
@media screen and (min-width: 480px){
    .logo_image_footer_wrap {
        max-width: 380px;
    }    
}

@media screen and (min-width: 750px){
    .footer_kaisai_tel_wrap {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
    }
}

.footer_kaisai {
    margin-bottom: 5px;
    font-weight: bold;
}
@media screen and (min-width: 400px){
    .footer_kaisai:first-child {
        display: flex;
        justify-content: center;
        align-items: center;
    }  
}

.footer_kaisai_span {
    background: #fff;
    padding: 5px;
    color: #000;
    margin-right: 5px;
}

.footer_information_wrap {
    text-align: center;
}

.footer_tel_link {
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.footer_tel_link:hover {
    opacity: 0.8;
}

.footer_detail {
    font-size: 0.8rem;
    margin-top: 10px;
}
@media screen and (min-width: 1260px){
    .footer_detail {
        text-align: center;
    }    
}

.footer_takarakuji {
    width: 200px;
    padding: 5px;
    margin: 30px auto 0;
}

.small_wrap {
    background: #c8b78c;
    padding: 30px 0;
}

.small {
    color: #000;
    display: block;
    margin: 0 auto;
    text-align: center;
}

/* ==============
Top back
============== */

#top_back {
    background: rgba(0,130,65,0.7);
    width: 60px;
    height: 60px;
    padding: 10px 0;
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 30;
    cursor: pointer;
    font-size: 0.6rem;
    letter-spacing: 0.01rem;
}

.top_back_img {
    width: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.top_back_text {
    color: #fff;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}






/* お知らせセクション全体のスタイル */
#news {
    width: 100%;
    max-width: 700px; /* PCでの最大幅 */
    margin: 40px auto; /* 上下の余白を調整し、全体を中央寄せ */
    font-family: sans-serif; /* フォントを指定 */
}

/* 「お知らせ」タイトルのスタイル */
#news > p {
    text-align: center; /* 中央寄せ */
    font-size: 1.5em; /* 文字を少し大きめに */
    font-weight: bold; /* 文字を太めに */
    margin-bottom: 20px; /* タイトルとリストの間に余白 */
    color: #005b98;
}

/* お知らせリスト */
.news-list {
    border-top: 1px solid #e0e0e0; /* タイトルとの区切り線 */
    margin: 0 auto;
    max-width: 800px;
}

/* 個々のお知らせ項目のスタイル */
.news-item {
    display: flex; /* 日付とタイトルを横並びにする */
    align-items: center; /* 上下の位置を中央に揃える */
    padding: 15px 10px; /* 内側の余白（上下15px、左右10px） */
    border-bottom: 1px solid #e0e0e0; /* 項目の区切り線 */
}

/* 日付のスタイル */
.news-date {
    color: #555; /* 文字色を少しグレーに */
    margin-right: 1.5em; /* タイトルとの間の余白 */
    white-space: nowrap; /* 日付が改行されないようにする */
}

/* タイトルのスタイル */
.news-title {
    color: #333; /* 文字色 */
    margin: 0; /* pタグのデフォルトマージンをリセット */
    font-size: 16px;
}