@charset "UTF-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}


body {
    font-size: 16px;
	font-size: 100%;
	line-height:1.25em;
	letter-spacing: 0.1em;
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	-webkit-text-size-adjust: 100%;
	height:100%;
    color:#333333;
    background-image: url("https://test.in-tex.co.jp/jsppn136/img/back.png");
    background-size: cover;
    background-position: center;
}

li{
    list-style: none;
}
ol.none, ul.none, li.none{
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
img{
	max-width:100%;
	height:auto;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
iframe{
	max-width:100%;	
}
a {
    text-decoration:none; 
}
ol, ul {
    list-style-type: none;
}

.notosansjp { 
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
.wapper{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-inline: auto;
        max-width: 1200px;
}

header{
    display: none;
}

/* --- ナビゲーションバー --- */
.nav {
    position: relative;
    padding-top: 30px;
    min-height: 1400px;
    width: 220px; /* ナビゲーションの幅 */
    } 
    /* --- メニューエリア --- */
    .nav .nl {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: left;
    margin-bottom: 30px;
    }
    /* --- メニュー項目 --- */
    .nav .nl li {
    background-color:#F0F0F0 ; /* 項目の背景色 */
    }
    .nav .nl li.none a{
    color: gray;
    }
    .nav .nl li.none a::after {
    border-color: transparent transparent transparent gray;
    }
    .nl li{
        margin-bottom: 5px;
        font-weight: bold;
    }
    .nvpt::after,.nv::after{
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 8px 0 8px 8px;
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    }
    .nv::after{
    border-color: transparent transparent transparent #132e55;
    }
    .nvpt::after,.nv:hover::after {
        border-color: transparent transparent transparent #132e55;
    }
    /* --- リンク --- */
    .nav .nl li a {
    display: block;
    position: relative; /* IE6用 */
    padding: 9px 10px; /* リンクエリアのパディング（上下、左右） */
    text-decoration: none; /* テキストの下線（なし） */
    }
    .nvli a,.title a{
        color:#2B2B2B ;
    }

    .none{
        pointer-events: none;
    }
    /* --- ポイント時の設定 --- */
    .current,.nvpt,.nav .nvli a:hover{
    background-color: #fabe00; 
    }
    .banner{
        margin-top:35px;
        text-align: center;
    }
    .banner img{
        margin-bottom: 10px;
    }
    .host{
        font-weight: 800;
        padding: 10px;
        margin-bottom: 40px;
    }
    .news-li,.sponser-li{
        border-bottom: 1px solid #2B2B2B;
    }
    .jim{
        background: #333333;
        color: #fabe00;
        padding:5px 10px ;
        display: inline;
    }
    .jim,.jimsb{
        font-size: 11px;
    }
    .jimst{
        margin-top: 10px;
        font-size: 15px;
    }
    .jimsb{
        margin-top: 10px;
        line-height: 1.5;
    }
    .jimsb a,.title a,.travel-tb a,.sponser-title a,.sub-txt a{
        color: blue;
    }
    .addres{
        background-color: rgba(250, 190, 0, 0.8); /* 0.8の透明度 */
        width: 100%;
    }

    /* --- ナビゲーションバー --- */
    /* --- main (index.html)--- */

    .center,.bcenter{
        text-align: center;
        line-height: 1.4;
    }

    .mv{
        position: relative;
    }

    .ngskbtn{
        position: absolute;
        z-index: 2;
        top: 70%;
        right: 3%;
    }
    .ngskbtn:hover{
        opacity: 0.8;
    }

    .main{
        max-width: 860px;
        overflow: hidden;
        }
    
    .news-content{
        margin: 0 auto;
        max-width:820px;
        max-height: 360px;
        padding:25px;
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center; 
    }
    .newsttl,h2{
        color: #ffffff;
        font-weight: bold;
        background-color: #0f2a4e;
    }
    .newsttl{
       font-size: 20px; 
    }
    h2{
        font-size: 30px;
    }

    .newsttl{
        padding: 10px;
        margin: 0 auto;
        display: inline-block;
    }

    .news{
        border: 5px solid #0f2a4e;
        border-radius: 10px;
        padding: 10px;
        max-height: 230px;
        overflow: scroll;
        overflow-x: hidden;
        margin-top: 20px;
    }
    .news-li,.sponser-li,.excursion-li{
        display: flex;
        line-height: 1.6rem;
        padding: 8px 0px;
    }
    .sponser-li,.excursion-li{
        flex-direction: column
    }
    .date,.sponser-dt{
        font-weight: bold;
    }
    .date{
    width: 20%;
    }

    .title{
        width: 80%;
        text-align: left;
    }
    /* --- main (index.html)--- */
    /* --- footer --- */
    footer{
        padding: 10px;
        position: relative;
        margin: 0 auto;
        width: 100%;
        background: #0f2a4e;
        text-align: center;
        color: #ffffff;
    }

    footer p{
        font-size: 10px;
    }

    .footeraddres,.footerbanner,.sp-br{
        display: none;
    }

    .footer-center{
        display: none;
    }

    /* --gree.html --*/
    h2{
        padding-left: 50px;
        text-align: left;
        height: 40px;
        line-height: 40px;
    }
    .content{
        background-color: rgba(250, 250, 250, 0.8);
        padding-bottom: 40px;
        height: 100%;
    }

    #gree p {
    margin-bottom: 15px;
    line-height: 1.6em;
    }
    .float_none {
    clear: both;
    }

    figure {
    float: left;
    margin: 0 15px 15px 0;
    width: 30%;
    }
    figure img {
    max-width: 100%;
    }

    .erea{
        padding: 20px;
        margin: 40px 20px;
        background-color: #ffffff;
    }

    .profile{
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30px;
        text-align: right;
        align-items: flex-end;
    }

    .ph{
        margin-left: 20px;
    }

    .submv{
        display: block;
    }

    .name p{
        text-align: right;
    }

    .name-bold{
        font-size: 18px;
        font-weight: bold;
    }

    /* --gree.html --*/

    /* --out.html --*/
    .sub-ttl{
        font-weight: bold;
        border-left: solid 5px #0f2a4e;
        border-bottom: solid 1px #0f2a4e;
        margin-top: 20px;
        padding: 5px 10px;
    }
    .sub-txt{
        padding:10px;
    }
     /* --gree.html --*/

    /* --access.html --*/
    .m-top{
        margin: 30px 0px;
    }

   #access th,td {
    border: 1px solid #ccc;
    padding: 15px 10px;
    }
    #access th{
    width: 30%;
    text-align: center;
    vertical-align: middle;
    background: #e8e8e8;  
    }
    /* --access.html --*/
     @media screen and (max-width: 1025px) {
    .wapper{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-inline: auto;
        max-width: 1000px;
} 
    .nav {
    max-width:200px;
}
    .main {
    max-width: 800px;
}

}

    @media screen and (max-width: 991px) {
    header ,.footerbanner,.sp-br{
        display: block;
    }
     /* ヘッダーの設定 */
    h1 {
        position: fixed;
        top: 0;
        z-index: 1000;
        text-align: left;
        line-height: 60px;
        margin: 0 auto;
        width: 100%;
        height: 60px;
        max-width: 1000px;
        padding: 10px;
        background-color: #ffffff;
    }
    .ttl-index{
        display: none;
    }

    .small {
        width: 60%;
    }

    .main{
        width: 100%;
    }

    .mv {
        margin-top: 60px;
    }
    .izanai{
        width: 120px;
    }

    .news-li{
        flex-direction: column;
    }

    .date,.title{
        width: 100%;
    }

    .content{
        margin-top: 60px;
        height: auto;
    }

     /* --- メニューエリア --- */
    .nav .nl {
        margin-top: 25px;
    }

/* ハンバーガーボタンのスタイル */
    .menu-btn {
        display: block;
        position: fixed; /* 固定 */
        top: 20px; /* 上からの距離 */
        right: 20px; /* 右からの距離 */
        z-index: 1100; /* 他の要素より前面に表示 */
        background: none;
        border: none;
        cursor: pointer;
    }
    
    .menu-btn .bar {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: all 0.3s ease; /* アニメーション効果 */
    }

    /* Xの形に変形 */
    .menu-btn.active .bar:nth-child(1) {
        transform: rotate(45deg); /* 角度を変更 */
        margin-top: 15px; /* 上のバーの位置を調整 */
    }

    .menu-btn.active .bar:nth-child(2) {
        opacity: 0; /* 中央のバーを非表示に */
    }

    .menu-btn.active .bar:nth-child(3) {
        transform: rotate(-45deg); /* 角度を変更 */
        margin-top: -15px; /* 下のバーの位置を調整 */
    }

    .nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 260px;
        height: 100%;
        background-color: #e8e8e8;
        transform: translateX(100%); /* 初期状態は画面外 */
        transition: transform 0.3s ease;
        z-index: 1000;
    }

    .nav.open {
        transform: translateX(0); /* 開いた時に表示 */
    }
    .addres,.banner,.submv{
        display: none;
    }

    .center{
        display: none;
    }

    .news-content {
        text-align: left; 
    }

    .footerbanner{
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        align-items: center;
        background-color: #F0F0F0;
        padding: 10px 0px;
    }
    .footerbanner img{
        margin-bottom: 10px;
        width: 200px;
    }

    .footer-center{
        display: block;
        text-align: center;
        background-color: #F0F0F0;
    }

    .footeraddres{
        background-color: #fabe00;
        padding: 9px;
        display: flex;
        justify-content: space-around;
    }

        /* --gree.html --*/
        .profile{
            flex-direction: column-reverse;
    }

        /* --travel.html --*/
        .travelimg-box{
        flex-direction: column;
    }
        /*追加*/
        .travel-box{
            flex-direction: column;
    } 

        .travel-ttl,.travel-sentence{
            width: 100%;
    }

        .sponser-content{
        align-items: flex-start;
        flex-direction: column;
    }

        .excursionsb-img {
            width: auto;
    }

    /*theme.html*/
    .theme-btn {
    flex-direction: column;
    }

}

/* スマホサイズでの設定を強化 */
@media screen and (max-width: 768px) {
    .mv {
    /* 念のため、背景指定をここでも上書き */
    background-image: url("https://test.in-tex.co.jp/jsppn136/img/back.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center 30% !important;
    /* 80%〜95%くらいで好みの位置に微調整してください */
  }

.news-content {
    background-color: #ffffff;
}

#access table,
#access tr,
#access th,
#access td {
    display: block;
    width: 100%;
}

#access th {
        border-bottom: none;  /* th と td の境界線調整 */
}

#access td {
        margin-top: -1px;     /* 枠線が二重に見えないように調整 */
}

/* 画像の回り込みを解除 */
.gree-content figure {
        float: none;
        margin: 0 auto 20px;   /* 画像中央寄せ */
        width: 80%;            /* スマホでは少し大きめに（調整可） */
        text-align: center;
}

.gree-content p {
        clear: both;           /* 回り込み解除の保険 */
    }
}

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

        /* 横スクロールを許可 */
    .theme_box {
        overflow-x: auto; /* 水平スクロールを可能にする */
        display: block;
        margin: 10px 0px;
        white-space: nowrap; /* 内容を折り返さずに表示 */
        width: 100%; /* 横幅を画面に合わせる */
    }

    /* テーブル全体のレイアウトを修正 */
    table {
        border-collapse: collapse; /* テーブルの境界線をスッキリさせる */
        width: auto; /* 自動調整でコンテンツの幅に適応 */
        max-width: 100%; /* 画面を超えないよう制限 */
    }

    /* 各列の幅を柔軟に調整 */
    td.theme-tb {
        white-space: nowrap; /* テキストを折り返さない */
    }
    .theme_box {
        overflow-x: auto; /* 小さい画面でも横スクロールが動作 */
        display: block;
    }

    table {
        width: auto; /* テーブル幅を内容に合わせる */
    }

    .footeraddres{
        justify-content: flex-start;
        flex-direction: column;
    }
    /* prog.html */
    .indent{
        text-indent: 0;
    }
    .bunkakai{
        flex-direction: column
    }
    .indent-bunka{
        text-indent: 0;
    }

    .insta-flex{
    flex-direction: column;
    }

    .ul-instagram,.facebook {
    max-width: 350px;    
    }
    
}