/* ==================================================================================================== */
/* 汎用 */
/* ==================================================================================================== */

/* ファーストビュー（見出し） */
div.first-view { background-image:url('../img/page/ssh-karatachi/first-view-bg.png'); }

/* テキスト用 */
.content-text p, .content-text li, .content-text dt, .content-text dd { font-size:16px; font-weight:400; line-height:200%; letter-spacing:-0.8px; }

/* リスト */
ul.disc-list { padding:0 20px; }
ul.disc-list li { list-style-type:disc; }
ul.attention-list li { text-indent:-1rem; padding-left:1rem; }
ul.attention-list li::before { content:'※'; }
ol.nmb-list { list-style-type:decimal; padding-left:20px; }
ol.kakawari { margin-bottom:24px; }

/* 余白 */
.m-40-80 { margin-bottom:40px; }
table.hyo { margin-top:0; margin-bottom:40px; margin-right:auto; margin-left:auto; }

@container( min-width:960px ) {

/* ベース */
.content-text { margin:auto; max-width:830px; width:100%; }

/* テキスト用 */
.content-text p, .content-text li, .content-text dt, .content-text dd { font-size:18px; line-height:32px; letter-spacing:-0.9px; }

/* イラスト配置 */
section.content-block.top-content::before { aspect-ratio:202/252; background-image:url('../img/page/ssh-karatachi/top-content-illustration.png'); top:180px; left:50px; width:202px; height:252px; }
.kyoyu { position:relative; z-index:1; }
.kyoyu::before { aspect-ratio:196/193; background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url('../img/page/ssh-karatachi/content-illustration01-pc.png'); content:''; display:inline-block; position:absolute; left:-550px; top:-90px; height:193px; width:196px; z-index:-1; }
div.access-box { position:relative; z-index:1; }
div.access-box::before { aspect-ratio:404/286; background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url('../img/page/ssh-karatachi/content-illustration02-pc.png'); content:''; display:inline-block; position:absolute; left:-300px; top:-180px; height:286px; width:404px; z-index:-1; }

/* 余白 */
.m-40-80 { margin-bottom:80px; }
table.hyo { margin-bottom:80px; max-width:830px; width:100%; }

}

/* ==================================================================================================== */
/* フォトギャラリー */
/* ==================================================================================================== */

/* 縦用フォトギャラリー */
div.ph-gallery.vertical-version { align-items:center; flex-direction:row-reverse; gap:6.25px; }
div.ph-gallery.vertical-version div.gallery-main { aspect-ratio:2/3; max-height:66vh; max-width:calc( 100% - 75px ); width:100%; }
div.ph-gallery.vertical-version ul.gallery-list { flex-direction:column; max-width:75px; width:75px; }
div.ph-gallery.vertical-version ul.gallery-list li { aspect-ratio:2/3; }
div.ph-gallery .gallery-main img.ssh-karatachi { max-height:500px; }

/* 混合 */
div.ph-gallery div.gallery-main.aspect-portrait { aspect-ratio:3/4; }

div.ph-gallery.vertical-version  .ph-gallery-main {
  position: relative;
  align-items: center;
   max-width:calc( 100% - 75px ); width:100%; 
}

@container( min-width:960px ) {

/* 縦用フォトギャラリー */
div.ph-gallery.vertical-version { max-width:700px; }
div.ph-gallery.vertical-version div.gallery-main { margin:auto; max-height:100%; max-width:calc( 100% - 120px ); }
div.ph-gallery.vertical-version ul.gallery-list { max-width:120px; width:120px; }

/* 混合 */
div.ph-gallery.ssh-karatachi div.gallery-main { margin:auto; max-width:600px; }
div.ph-gallery.ssh-karatachi ul.gallery-list { flex-wrap:wrap; }
div.ph-gallery.ssh-karatachi ul.gallery-list li { width:120px; }

div.ph-gallery.vertical-version  .ph-gallery-main {
max-width:calc( 100% - 120px );
}

}