@charset "utf-8";

/* ============================================
   基本設定
   ============================================ */
/* リセット系基本設定
   -------------------------------------------- */
* {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

/* メディア要素の基本設定
   -------------------------------------------- */
 /* 画像基本設定 */
img {
   display: block;
   width: 100%;
   max-width: 100%;
   height: auto;/*高さ自動*/
}

/* 埋め込み要素設定 */
/* YouTubeの埋め込み */
.youtube {
   width: 100%;
   aspect-ratio: 16 / 9;
}

.youtube iframe {
   width: 100%;
   height: 100%;
}

/* Google Mapの埋め込み */
.map-container {
   position: relative;
   width: 100%;
   padding-top: 75%;
   /* 16:9のアスペクト比 */
   height: 0;
}

.map-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

@media screen and (min-width: 1921px) {
	/* 全幅でGoogleマップを表示する時に使用する */
	/*.map-container {
		padding-top: 28.125%;
	}*/
}

/* ============================================
   レイアウト
   ============================================ */

/* コンテナ幅設定
   -------------------------------------------- */
   [class*="width-box-"] {
      margin-left: auto;
      margin-right: auto;
   }

   /* 各幅設定 - 100px単位で拡張 */
   .width-box-300 { max-width: 300px; }
   .width-box-400 { max-width: 400px; }
   .width-box-500 { max-width: 500px; }
   .width-box-600 { max-width: 600px; }
   .width-box-700 { max-width: 700px; }
   .width-box-800 { max-width: 800px; }
   .width-box-900 { max-width: 900px; }
   .width-box-1000 { max-width: 1000px; }
   .width-box-1100 { max-width: 1100px; }
   .width-box-1200 { max-width: 1200px; }
   .width-box-1300 { max-width: 1300px; }
   .width-box-1400 { max-width: 1400px; }

/* Flexbox基本設定
   -------------------------------------------- */
.flex {
   display: flex;
   display: -webkit-flex;
   justify-content: center;
   align-items: center;
}
.fl-wrap { flex-wrap: wrap; }

/* Flexbox配置
   -------------------------------------------- */
[class*="fl-align-"] { align-items: var(--align, stretch); }
.fl-align-top { --align: flex-start; }
.fl-align-base { --align: baseline; }
.fl-align-end { --align: flex-end; }
.fl-align-center { --align: center; }
.fl-align-str { --align: stretch; }

[class*="fl-con-"] { justify-content: var(--justify, flex-start); }
.fl-con-bet { --justify: space-between; }
.fl-con-start { --justify: flex-start; }
.fl-con-end { --justify: flex-end; }
.fl-con-center { --justify: center; }

/* Flexboxカラム設定
   -------------------------------------------- */
.item {
   padding: .5rem;
   width: 100%;
}

/* 均等分割 */
[class*="span-"] { flex-basis: var(--span-width, 100%); }
.span-2 { --span-width: 50%; }              /* 1/2 */
.span-3 { --span-width: calc(100% / 3); }   /* 1/3 */
.span-4 { --span-width: 25%; }              /* 1/4 */
.span-5 { --span-width: 20%; }              /* 1/5 */
.span-6 { --span-width: calc(100% / 6); }   /* 1/6 */

/* 12分割系（より細かい制御が必要な場合） */
[class*="col-"] { flex-basis: var(--col-width, 100%); }
.col-1 { --col-width: calc(100% / 12); }    /*  8.33% */
.col-2 { --col-width: calc(100% / 6); }     /* 16.67% */
.col-3 { --col-width: 25%; }                /* 25% */
.col-4 { --col-width: calc(100% / 3); }     /* 33.33% */
.col-5 { --col-width: calc(100% * 5/12); }  /* 41.67% */
.col-6 { --col-width: 50%; }                /* 50% */
.col-7 { --col-width: calc(100% * 7/12); }  /* 58.33% */
.col-8 { --col-width: calc(100% * 2/3); }   /* 66.67% */
.col-9 { --col-width: 75%; }                /* 75% */
.col-10 { --col-width: calc(100% * 5/6); }  /* 83.33% */
.col-11 { --col-width: calc(100% * 11/12); }/* 91.67% */
.col-12 { --col-width: 100%; }              /* 100% */

/* Grid設定
   -------------------------------------------- */
.grid {
   display: grid;
	display: -webkit-grid;
   justify-content: center;
   gap: .5rem;
}

/* Grid列数
   -------------------------------------------- */
/* シンプルな均等分割 */
[class*="grid-cols-"] {
   grid-template-columns: repeat(var(--cols, 1), 1fr);
}

.grid-cols-1 { --cols: 1; }
.grid-cols-2 { --cols: 2; }
.grid-cols-3 { --cols: 3; }
.grid-cols-4 { --cols: 4; }
.grid-cols-5 { --cols: 5; }
.grid-cols-6 { --cols: 6; }

/* Grid不均等レイアウト */
.grid-main-side { grid-template-columns: 2fr 1fr; }
.grid-side-main { grid-template-columns: 1fr 2fr; }
.grid-main-side-side { grid-template-columns: 3fr 1fr 1fr; }

/* 子要素のグリッド領域指定 */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-full { grid-column: 1 / -1; } /* 全幅 */

/* グリッド間隔
   -------------------------------------------- */
.gap5 { gap: 0.5rem; }
.gap10 { gap: 1rem; }
.gap20 { gap: 2rem; }

/* 位置指定
   -------------------------------------------- */
.relative { position: relative; }

/* レスポンシブ設定（〜960px）
   -------------------------------------------- */
@media screen and (max-width: 960px) {
    /* Flexbox */
   .flex960 { flex-direction: column; }

    /* Grid */
	/* grid960クラスでの折り返し開始 */
	.grid.grid-cols-2.grid960 { grid-template-columns: minmax(0, 1fr); }
   .grid.grid-cols-3.grid960,
   .grid.grid-cols-4.grid960 { grid-template-columns: repeat(2, 1fr); }
   .grid.grid-cols-5.grid960,
   .grid.grid-cols-6.grid960 { grid-template-columns: repeat(3, 1fr); }

	/* Grid不均等レイアウト */
	.grid-main-side.grid960,
   .grid-side-main.grid960,
   .grid-main-side-side.grid960 {
        grid-template-columns: minmax(0, 1fr);  /* 全て1列に */
   }
}

/* レスポンシブ設定（〜768px）
   -------------------------------------------- */
@media screen and (max-width: 768px) {
    /* Flexbox */
   .flex768 { flex-direction: column; }
   .flex768.reverse { flex-direction: column-reverse; }

    /* Grid */
	/* grid768クラスでの折り返し開始 */
   .grid.grid-cols-2.grid768 { grid-template-columns: minmax(0, 1fr); }
   .grid.grid-cols-3.grid768,
   .grid.grid-cols-4.grid768 { grid-template-columns: repeat(2, 1fr); }
   .grid.grid-cols-5.grid768,
   .grid.grid-cols-6.grid768 { grid-template-columns: repeat(3, 1fr); }

   /* Grid不均等レイアウト */
	.grid-main-side.grid768,
   .grid-side-main.grid768,
   .grid-main-side-side.grid768 {
        grid-template-columns: minmax(0, 1fr);  /* 全て1列に */
   }
	
}

/* レスポンシブ設定（〜560px）
   -------------------------------------------- */
@media screen and (max-width: 560px) {
    /* Flexbox */
   .flex560 { flex-direction: column; }
   .flex560.reverse { flex-direction: column-reverse; }

    /* Grid */
	/* grid560クラスでの即時折り返し */
   .grid.grid-cols-2.grid560 { grid-template-columns: minmax(0, 1fr); }
   .grid.grid-cols-3.grid560,
   .grid.grid-cols-4.grid560 { grid-template-columns: repeat(2, 1fr); }
   .grid.grid-cols-5.grid560,
   .grid.grid-cols-6.grid560 { grid-template-columns: repeat(3, 1fr); }

    /* grid768からの最終折り返し */
   .grid.grid-cols-3.grid768,
   .grid.grid-cols-4.grid768 { grid-template-columns: minmax(0, 1fr); }
   .grid.grid-cols-5.grid768,
   .grid.grid-cols-6.grid768 { grid-template-columns: repeat(2, 1fr); }

	/* grid960からの最終折り返し */
   .grid.grid-cols-3.grid960,
   .grid.grid-cols-4.grid960 { grid-template-columns: minmax(0, 1fr); }
   .grid.grid-cols-5.grid960,
   .grid.grid-cols-6.grid960 { grid-template-columns: repeat(2, 1fr); }

   /* Grid不均等レイアウト */
	.grid-main-side.grid560,
   .grid-side-main.grid560,
   .grid-main-side-side.grid560 {
        grid-template-columns: minmax(0, 1fr);  /* 全て1列に */
   }
}

/* ============================================
   文字関連
   ============================================ */

/* テキスト配置
   -------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 文字色
	-------------------------------------------- */
.text-black { color: #000; }
.text-gray { color: #898989; }
.text-red { color: #E60012; }

/* 文字の太さ
	  -------------------------------------------- */
.font-bold { font-weight: bold; }

/* 文字サイズ（clampで可変）
	-------------------------------------------- */
.font-12-14 { font-size: clamp(12px, 2vw, 14px); }
.font-14-16 { font-size: clamp(14px, 2vw, 16px); }
.font-16-18 { font-size: clamp(16px, 2vw, 18px); }
.font-18-20 { font-size: clamp(18px, 2vw, 20px); }
.font-20-24 { font-size: clamp(20px, 2.5vw, 24px); }
.font-24-30 { font-size: clamp(24px, 3vw, 30px); }

/* 文字サイズ（アクセント文字サイズ調整）
	-------------------------------------------- */
.font-small__span-7 {font-size: .7em;}
.font-small__span-8 {font-size: .8em;}


/* 行間
	-------------------------------------------- */
.line-height-12 { line-height: 1.2em; }
.line-height-13 { line-height: 1.3em; }
.line-height-14 { line-height: 1.4em; }
.line-height-15 { line-height: 1.5em; }
.line-height-20 { line-height: 2em; }

/* インデント
	-------------------------------------------- */
.text-indent { 
	text-indent: -1em;
	padding-left: 1em;
}

/* 折り返し設定
   -------------------------------------------- */
.no-wrap { display: inline-block !important; }

/* 改行制御
   -------------------------------------------- */
/* 基本設定（スマホファースト） */
.pc-br { display: none; }
.sp-br,
.sp-br560 { display: block; }

/* タブレット以上（561px〜） */
@media screen and (min-width: 561px) {
   .sp-br560 { display: none; }
}

/* PC表示（769px〜） */
@media screen and (min-width: 769px) {
   .pc-br { display: block; }
   .sp-br { display: none; }
}


/* ============================================
   余白設定
   ============================================ */

/* 固定マージン
   -------------------------------------------- */
/* 上余白 */
.mt0 { margin-top: 0; }
.mt5 { margin-top: 0.5rem; }
.mt10 { margin-top: 1rem; }
.mt15 { margin-top: 1.5rem; }
.mt20 { margin-top: 2rem; }
.mt25 { margin-top: 2.5rem; }
.mt30 { margin-top: 3rem; }
.mt40 { margin-top: 4rem; }
.mt50 { margin-top: 5rem; }
.mt60 { margin-top: 6rem; }
.mt80 { margin-top: 8rem; }
.mt100 { margin-top: 10rem; }

/* 下余白 */
.mb0 { margin-bottom: 0; }
.mb5 { margin-bottom: 0.5rem; }
.mb10 { margin-bottom: 1rem; }
.mb15 { margin-bottom: 1.5rem; }
.mb20 { margin-bottom: 2rem; }
.mb25 { margin-bottom: 2.5rem; }
.mb30 { margin-bottom: 3rem; }
.mb40 { margin-bottom: 4rem; }
.mb50 { margin-bottom: 5rem; }
.mb60 { margin-bottom: 6rem; }
.mb80 { margin-bottom: 8rem; }
.mb100 { margin-bottom: 10rem; }

/* 左余白 */
.ml2 { margin-left: 0.2rem; }
.ml5 { margin-left: 0.5rem; }
.ml10 { margin-left: 1rem; }
.ml20 { margin-left: 2rem; }
.mr5 { margin-right: 0.5rem; }
.mr10 { margin-right: 1rem; }
.mr20 { margin-right: 2rem; }

/* 左右余白 */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx0 { margin-left: 0; margin-right: 0; }
.mx5 { margin-right: 0.5rem; margin-left: 0.5rem; }
.mx10 { margin-right: 1rem; margin-left: 1rem; }
.mx20 { margin-right: 2rem; margin-left: 2rem; }

/* 上下余白 */
.my0 { margin-top: 0; margin-bottom: 0; }
.my5 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my10 { margin-top: 1rem; margin-bottom: 1rem; }
.my20 { margin-top: 2rem; margin-bottom: 2rem; }

/* マージン全方向 */
.m0 { margin: 0; }
.m5 { margin: 0.5rem; }
.m10 { margin: 1rem; }
.m15 { margin: 1.5rem; }
.m20 { margin: 2rem; }
.m25 { margin: 2.5rem; }
.m30 { margin: 3rem; }
.m40 { margin: 4rem; }
.m50 { margin: 5rem; }

/* 可変マージン（レスポンシブ）
   -------------------------------------------- */
.mt20-40 { margin-top: clamp(2rem, 5.5vw, 4rem); }
.mt30-50 { margin-top: clamp(3rem, 7.5vw, 5rem); }
.mt30-80 { margin-top: clamp(3rem, 9vw, 8rem); }
.mt50-60 { margin-top: clamp(5rem, 7.75vw, 6rem); }
.mt60-100 { margin-top: clamp(6rem, 10.5vw, 10rem); }

.mb10-20 {margin-bottom: clamp(1rem, 2vw, 2rem);}
.mb10-30 { margin-bottom: clamp(1rem, 2vw, 3rem); }
.mb10-40 { margin-bottom: clamp(1rem, 4.5vw, 4rem); }
.mb20-40 { margin-bottom: clamp(2rem, 5.5vw, 4rem); }
.mb30-50 { margin-bottom: clamp(3rem, 7.5vw, 5rem); }
.mb30-60 { margin-bottom: clamp(3rem, 7.75vw, 6rem); }
.mb30-80 { margin-bottom: clamp(3rem, 9vw, 8rem); }
.mb40-60 { margin-bottom: clamp(4rem, 7vw, 6rem); }
.mb40-80 { margin-bottom: clamp(4rem, 12vw, 8rem); }
.mb50-100 { margin-bottom: clamp(5rem, 14vw, 10rem); }
.mb60-100 { margin-bottom: clamp(6rem, 10.5vw, 10rem); }
.mb60-200 { margin-bottom: clamp(6rem, 22vw, 20rem); }
.mb80-100 { margin-bottom: clamp(8rem, 15.5vw, 10rem); }
.mb100-140 { margin-bottom: clamp(10rem, 18vw, 14rem); }

/* パディング
   -------------------------------------------- */
/* 上パディング */
.pt0 { padding-top: 0; }
.pt5 { padding-top: 0.5rem; }
.pt10 { padding-top: 1rem; }
.pt15 { padding-top: 1.5rem; }
.pt20 { padding-top: 2rem; }
.pt25 { padding-top: 2.5rem; }
.pt30 { padding-top: 3rem; }
.pt40 { padding-top: 4rem; }
.pt50 { padding-top: 5rem; }
.pt60 { padding-top: 6rem; }
.pt80 { padding-top: 8rem; }
.pt100 { padding-top: 10rem; }

/* 下パディング */
.pb0 { padding-bottom: 0; }
.pb5 { padding-bottom: 0.5rem; }
.pb10 { padding-bottom: 1rem; }
.pb15 { padding-bottom: 1.5rem; }
.pb20 { padding-bottom: 2rem; }
.pb25 { padding-bottom: 2.5rem; }
.pb30 { padding-bottom: 3rem; }
.pb40 { padding-bottom: 4rem; }
.pb50 { padding-bottom: 5rem; }
.pb60 { padding-bottom: 6rem; }
.pb80 { padding-bottom: 8rem; }
.pb100 { padding-bottom: 10rem; }

/* 左右パディング */
.px0 { padding-left: 0; padding-right: 0; }
.px5 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px10 { padding-left: 1rem; padding-right: 1rem; }
.px15 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px20 { padding-left: 2rem; padding-right: 2rem; }

/* 上下パディング */
.py0 { padding-top: 0; padding-bottom: 0; }
.py5 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py10 { padding-top: 1rem; padding-bottom: 1rem; }
.py15 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py20 { padding-top: 2rem; padding-bottom: 2rem; }

/* パディング全方向 */
.p0 { padding: 0; }
.p5 { padding: 0.5rem; }
.p10 { padding: 1rem; }
.p15 { padding: 1.5rem; }
.p20 { padding: 2rem; }
.p25 { padding: 2.5rem; }
.p30 { padding: 3rem; }
.p40 { padding: 4rem; }
.p50 { padding: 5rem; }

/* 可変パディング（レスポンシブ）
   -------------------------------------------- */
.pt20-40 { padding-top: clamp(2rem, 5.5vw, 4rem); }
.pt40-80 { padding-top: clamp(4rem, 12vw, 8rem); }
.pt50-150 { padding-top: clamp(5rem, 12vw, 15rem); }

.pb10-30 { padding-bottom: clamp(1rem, 2vw, 3rem); }
.pb20-40 { padding-bottom: clamp(2rem, 5.5vw, 4rem); }
.pb40-80 { padding-bottom: clamp(4rem, 12vw, 8rem); }
.pb100-140 { padding-bottom: clamp(10rem, 18vw, 14rem); }

.px10-30 { padding-left: clamp(1rem, 2vw, 3rem); padding-right: clamp(1rem, 2vw, 3rem); }
.px20-40 { padding-left: clamp(2rem, 5.5vw, 4rem); padding-right: clamp(2rem, 5.5vw, 4rem); }

.py10-20 { padding-top: clamp(1rem, 2vw, 2rem); padding-bottom: clamp(1rem, 2vw, 2rem); }
.py10-30 { padding-top: clamp(1rem, 2vw, 3rem); padding-bottom: clamp(1rem, 2vw, 3rem); }
.py10-40 { padding-top: clamp(1rem, 4.5vw, 4rem); padding-bottom: clamp(1rem, 4.5vw, 4rem); }
.py20-40 { padding-top: clamp(2rem, 5.5vw, 4rem); padding-bottom: clamp(2rem, 5.5vw, 4rem); }

.p10-30 { padding: clamp(1rem, 2vw, 3rem);}
.p10-40 { padding: clamp(1rem, 4.5vw, 4rem);}
.p20-40 { padding: clamp(2rem, 5.5vw, 4rem);}

/* ============================================
   表示・非表示設定
   ============================================ */

/* 基本表示設定（スマホファースト）
   -------------------------------------------- */
.pc-view960,
table tr.pc-view960,
table.pc-view960 { display: none; }
.sp-view960 { display: block; }
table.sp-view960{display: table;}
.pc-view768,
table tr.pc-view768,
table.pc-view768 { display: none; }
.sp-view768 { display: block; }
table.sp-view768{display: table;}
.pc-view560,
table tr.pc-view560,
table.pc-view560 { display: none; }
.sp-view560 { display: block; }
table.sp-view560{display: table;}

/* PC表示（961px〜）
	-------------------------------------------- */
@media screen and (min-width: 961px) {
	.pc-view960 { display: block; }
	table tr.pc-view960 { display: table-row; }
	table.pc-view960 { display: table; }
	.sp-view960,
   table.sp-view960 { display: none; }
   
}

/* PC表示（769px〜）
	-------------------------------------------- */
@media screen and (min-width: 769px) {
	.pc-view768 { display: block; }
	table tr.pc-view768 { display: table-row; }
	table.pc-view768 { display: table; }
	.sp-view768,
   table.sp-view768 { display: none; }
   
}

/* タブレット以上表示（561px〜）
	-------------------------------------------- */
@media screen and (min-width: 561px) {
	.pc-view560 { display: block; }
	table tr.pc-view560 { display: table-row; }
   table.pc-view560 { display: table; }
	.sp-view560,
   table.sp-view560 { display: none; }
}

/* ============================================
   画像関連
   ============================================ */
/* アスペクト比固定 */
.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-16-9 { aspect-ratio: 16 / 9; }

/* 画像フィット */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

/* 画像位置調整 */
.object-left { object-position: left; }
.object-right { object-position: right; }
.object-center { object-position: center; }

/* ============================================
   リンク設定
   -------------------------------------------- */
/* PC時電話番号リンク無効化（769px〜） */
@media screen and (min-width: 769px) {
   a[href*="tel:"] {
      pointer-events: none;
      cursor: default;
      text-decoration: none;
   }
}