@charset "UTF-8";

/*

    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html

*/

*{

font-family: 'Noto Serif JP', sans-serif;

}

/* ---------------------------------------------------- */
/* 1. 全てのグローバルメニューをゴシック体に変更 */
/* ---------------------------------------------------- */
/* 通常ヘッダーと追尾ヘッダーの要素を統合して指定 */
#gnav.l-header__gnav.c-gnavWrap .c-gnav li a,
#gnav.l-header__gnav.c-gnavWrap .c-gnav li a .ttl,
.l-fixHeader__gnav.c-gnavWrap .c-gnav li a,
.l-fixHeader__gnav.c-gnavWrap .c-gnav li a .ttl {
  font-family: "游ゴシック", "Yu Gothic", "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif !important;
}

/* ---------------------------------------------------- */
/* 2. メニュー間に短い区切り線を追加 */
/* ---------------------------------------------------- */

/* 通常ヘッダーと追尾ヘッダーのli要素のスタイルを統合 */
#gnav .c-gnav > li,
.l-fixHeader__gnav .c-gnav > li {
  border-right: none !important; 
  position: relative; 
  padding-right: 20px; 
  padding-left: 20px;
}

/* 疑似要素（::after）で区切り線を作成（両方に適用） */
#gnav .c-gnav > li::after,
.l-fixHeader__gnav .c-gnav > li::after {
  content: ""; 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  right: 0; 
  
  /* 区切り線のサイズと色 */
  width: 1px; 
  height: 60%; 
  background-color: #dddddd; 
}

/* 最後の項目には線を表示しない（両方に適用） */
#gnav .c-gnav > li:last-child::after,
.l-fixHeader__gnav .c-gnav > li:last-child::after {
  content: none;
}


.home .l-content {

  margin-bottom: 0 !important;

}


/*固定ページのタイトル*/
.c-pageTitle{
font-size:2rem;
}

/*投稿ページのタイトル*/
.c-postTitle__ttl{
font-size:2rem;
}


.c-pageTitle__subTitle{
	display: none;
}



/* ---------------------------------------------------- */

/* 0. 【Header】 */

/* ---------------------------------------------------- */



.c-gnav .ttl{
	line-height: 1.5;

}

.main-v img{
	width: 300px;
}

@media (max-width: 768px) {
	.main-v img{
	width: 200px;
}
}


/* ---------------------------------------------------- */

/* 0. 【Footer】 */

/* ---------------------------------------------------- */



.w-footer__box{

	text-align: center;

}



/* ---------------------------------------------------- */

/* 1.【XO Event Calendar】

/* ---------------------------------------------------- */



/* ---------------------------------------------------- */

/*  1-1.Event list

/* ---------------------------------------------------- */

.xo-event-list * {
	font-size: 1rem;

}

.xo-event-list {

	list-style: none;
	display: block;
	margin: 0;

}

.xo-event-list p {

	margin: 0 0 0.5rem;
	padding: 0;

}

.xo-event-list > dl {

	display: block;
	margin: .1rem 0 0 0;
	padding: 0 0 .1rem 0;
	overflow: hidden;
	color: #444;
	border-bottom: dotted 1px #ccc;

}

.xo-event-list > dl > dt,

.xo-event-list > dl > dd {

	display: table-cell;

	vertical-align: top;

}

.xo-event-list > dl > dt > span,

.xo-event-list > dl > dd > span {

	float: left;
	margin: 0 1rem 0 0;
	padding: 0;
	vertical-align: middle;

}

.xo-event-list .thumbnail {
	margin: .2rem 0;
}

.xo-event-list .thumbnail img {
	padding-right: 15px;
	width: 110px;
	min-width: 110px;
	height: auto;
	object-fit: cover;

}

.xo-event-list .date {
	margin-top: .1rem;
	font-size: .9rem;
}

.xo-event-list.type-short .date,

.xo-event-list.type-standard .date {
	width: 7.5rem;

}

.xo-event-list .category {
	margin-top: .2rem;
	margin-bottom: .1rem;
	padding: 0 .5rem;
	text-align: center;
	font-size: .8rem;
	color: #fff;
	border-radius: 2px;

}

.xo-event-list.type-short .category,

.xo-event-list.type-standard .category {
	width: 8.5rem;

}

.xo-event-list.type-detail .category {
	margin-left: 0.5rem;

}

.xo-event-list .title {
	margin-top: .1rem;

}

.xo-event-list .event-date {
	font-size: .9rem;

}

.xo-event-list li br {
	display: block;

}



.xo-event-list.type-custom .event-date {
	width: 16rem;
	margin-top: .2rem;

}



.xo-event-calendar table.xo-month .month-event-title{
	white-space: normal;

}





/* 1. 【基本設定】PC・タブレット表示 (3カラム) */

.xo-event-list.type-detail {
    display: grid;
    /* 3つの均等な幅のカラム (1fr) を定義 */
    grid-template-columns: repeat(3, 1fr); 
    gap:  3rem;/*20px; アイテム間の間隔 */
    margin-bottom: 20px;

}



.xo-event-list.type-detail > dl{
	border-bottom: none;
}



.xo-event-list.type-detail .event-item {
    /* 必要に応じてパディングやボーダーなどを設定 */
    padding: 15px;
    border: 1px solid #eee;

}



.xo-event-list.type-detail .category{
	margin-left: 0;
}



.xo-event-list.type-detail .e-date,.xo-event-list.type-detail .title{
	font-weight: bold;
	margin-bottom: 0;

}



.xo-event-list.type-detail a {
    color: #444; 
    text-decoration: none; 

}



.xo-event-list.type-detail a:link,
.xo-event-list.type-detail a:visited,
.xo-event-list.type-detail a:active {
    color: #444;
}



.xo-event-list.type-detail a:hover {
    color: #808080; /* 灰色 (Grey) に設定 */

}



.xo-event-calendar table.xo-month .month-week{

	height: 6rem;

}





/* ---------------------------------------------------- */

/* 1-1. xo-event-list.type-detail */

/* ---------------------------------------------------- */



/* タブレット縦向きなど (768px以下) - 余裕があれば2カラムにする */

@media (max-width: 768px) {
    .xo-event-list.type-detail {
        /* 2つの均等な幅のカラムに切り替え */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; /* 隙間を少し狭くしてもOK */
		font-size: 0.8rem;

    }

}



/* スマートフォン (480px以下) - 1カラム表示にする */

@media (max-width: 480px) {
    .xo-event-list.type-detail {
        /* 1つのカラムに切り替え (縦一列) */
        grid-template-columns: 1fr; 
        gap: 10px; /* 隙間をさらに狭く */

    }

    /* 個別のアイテムのスタイル調整は通常不要ですが、必要ならここで調整 */

}





.xo-event-list.type-detail .event-thumbnail {
    width: 100%;
    margin-bottom: 0.5rem; 
    
    /* 3:2*/
    position: relative; 
    padding-top: calc(2 / 3 * 100%);
    overflow: hidden;
	/* 3:2*/
    border-radius: 10px; 
}



.xo-event-list.type-detail .event-thumbnail a {

    /* リンク全体を覆うように */
    display: block;
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}



.xo-event-list.type-detail .event-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
    /* 3:2の比率に合わせて画像をトリミングし、枠内に収める */
    object-fit: cover;    
    /* 画像の角も親要素の丸みに合わせる */
    border-radius: 10px; /* 親要素と同じ値 */
    /* functions.phpで指定された width, height属性を上書き */
    max-width: 100%; 
    height: auto; /* object-fit: cover;が適用されるので実質的な高さは100%になる */

}





.custom-event-data {
    padding: 10px; 
    border: 1px solid #eee;
    background-color: #f9f9f9;

}



.custom-event-data > div {
    display: flex;       
    margin-bottom: 8px;  
    padding-bottom: 8px;
    border-bottom: 1px dotted #ddd; 

}



@media (min-width: 601px) {
    .custom-event-data > div:last-child {
        border-bottom: none;
		margin-bottom: 0;
        padding-bottom: 0px;
    }
}



.custom-event-data dt {
    width: 120px;       
    font-weight: bold;
    flex-shrink: 0;     
    /* PCでのみ縦線ボーダー */
    border-right: 1px solid #ccc; 
    padding-right: 10px; 
}



.custom-event-data dd {
    flex-grow: 1;      
    margin-left: 10px; 
}



@media (max-width: 600px) {
    .custom-event-data > div {
        flex-direction: column; 
        border-bottom: 1px solid #ccc; 
        padding-bottom: 10px; 
        margin-bottom: 10px;
    }

    

    .custom-event-data dt {
        width: 100%;            
        margin-bottom: 2px;
        border-right: none;
        padding-right: 0;
    }



    .custom-event-data dd {
        margin-left: 0;         
    }

    

    .custom-event-data > div:last-child {
        border-bottom: none;
    }

}



.xo-event-list.type-detail .event-detail-list > div {
    display: flex !important; /* 強制的に横並び */
    margin-bottom: 8px; /* 行間のスペース */
    padding: 0;
}



/* dt (ラベル) の幅を固定 */

.xo-event-list.type-detail .event-detail-list dt {
    flex-shrink: 0; 
    font-weight: bold;
    padding-right: 0; 
    margin: 0;
    display: block; 
}



/* dd (値) が残りのスペースを占有 */

.xo-event-list.type-detail .event-detail-list dd {
    flex-grow: 1; 
    margin: 0;
    padding: 0;
    display: block;

}



/* dtとddのデフォルトのmargin/paddingをリセット */

.xo-event-list.type-detail .event-detail-list dt,
.xo-event-list.type-detail .event-detail-list dd {
    display: block; 

}



@media screen and (max-width: 600px) {
    /* 行コンテナのFlexboxを解除し、縦並びにする */
    .xo-event-list.type-detail .event-detail-list > div {
        display: block !important; 
        margin-bottom: 15px; /* 行間のスペースを広げる */
        padding: 0;
    }



    /* dt (ラベル) の設定をリセット */

    .xo-event-list.type-detail .event-detail-list dt {
        flex-basis: auto; /* 幅の固定を解除し、全体幅を使う */
        padding-right: 0; /* コロン後の空白なし */
        margin-bottom: 2px; /* ラベルと値の間にわずかなスペース */
        font-size: 1.05em;
        /* その他の margin, padding は既にリセット済み */
    }

    

    /* dd (値) の設定をリセット */

    .xo-event-list.type-detail .event-detail-list dd {
        flex-grow: auto; /* 拡張設定を解除 */

    }

}





/* ---------------------------------------------------- */

/* 2. 【TOP】 */

/* ---------------------------------------------------- */

.top .w-beforeFooter .l-content {
    margin-bottom: 6em auto 2em !important;

}





/*

.v-rl{

    writing-mode: vertical-rl; 

    display: flex;

    justify-content: center; 

    align-items: center; 

    width: 100%; 

    height: auto; 

    max-height: 100%;   

    margin: 0; 

    padding: 0; 

	 background-image: none;

}*/



/* ---------------------------------------------------- */

/*  2-1.Top Event back

/* ---------------------------------------------------- */



.custom-wide-bg {
    background-image: url("./images/main-bk.png"); 
    background-repeat: no-repeat;
    background-position: -100px -100px;    
    background-size: auto; 
    overflow: hidden !important; 
    position: relative; 
    background-attachment: scroll;
}



@media (max-width: 768px) {
    .custom-wide-bg {
        background-image: none;
        overflow: visible !important; 
    }
}



.custom-wide-bg > * {
    position: relative;
    z-index: 2;
}





/* ---------------------------------------------------- */

/* 3.facilityguidelines

/* ---------------------------------------------------- */



/* ---------------------------------------------------- */

/*  3-1.spreadsheet

/* ---------------------------------------------------- */



.full-height-spreadsheet {
    height: 100vh !important; 
    width: 100%;
    position: static !important;
    border: 1px solid #ccc;
}

/* ---------------------------------------------------- */

/* 4.facilityguide

/* ---------------------------------------------------- */

[id^="0"] {
    scroll-margin-top: 80px; 
}



/* ---------------------------------------------------- */

/* 5.contact

/* ---------------------------------------------------- */

#autozip {
   display: none !important;
}



.txt-address{

	width: 100%;

}