@charset 'utf-8';
/* 汎用CSS */

/* 全体 */
html { font-size:clamp(15px, 1vw, 30px); min-height:100vh; max-width:100%; width:100vw; overflow-x:hidden; position:relative; z-index:1; text-rendering:optimizeLegibility; }
h1, h2, h3, h4, h5, li, dt, dd, p { line-height:1.61; font-weight:500; }
.center { text-align:center; } .left { text-align:left; } .right { text-align:right; }
.clear { clear:both; }
strong, .b { font-weight:bold; }
div.indent p { text-indent:1em; }
div.table { display:table; width:100%; } div.tcell { display:table-cell; vertical-align:middle; width:100%; }

/* リンク */
a:link, a:visited { transition:.3s; }
a:active, a:hover { transition:.3s; }

/* トップに戻るボタン */
div.backtop { position:relative; right:1em; bottom:1.5em; z-index:10; }
div.backtop a { opacity:0; visibility:hidden; position:fixed; right:1em; bottom:1.5em; z-index:2000; display:inline-block; height:45px; width:45px; border-radius:50%; }
div.backtop.advent a { opacity:1; visibility:visible; }
div.backtop a::before, div.backtop a::after { content:''; display:inline-block; position:absolute; z-index:2001; background-color:#fff; height:3px; width:15px; top:50%; border-radius:15px; }
div.backtop a::before { left:35%; transform:translate(-35%,-50%) rotate(-45deg); }
div.backtop a::after { right:35%; transform:translate(35%,-50%) rotate(45deg); }

/* スクロールバー */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-thumb { border-radius:6px; }
@-moz-document url-prefix() { html { scrollbar-width:thin; } }

/* フェードイン */
.fade { opacity:0; visibility:hidden; transition:all 1s; }
.fade.fadein { opacity:1; visibility:visible; transition:all 1s; }

/* レスポンシブ */
.sma { display:block; }
.pc { display:none; }

@media screen and (min-width: 769px) {
/* PC用レイアウト */

html { font-size:clamp(18px, 1vw, 30px); }

/* レスポンシブ */
.sma { display:none; }
.pc { display:block; }

/* トップに戻るボタン */
div.backtop { right:2.5em; bottom:2em; }
div.backtop a { right:2.5em; bottom:2em; height:65px; width:65px; }
div.backtop a::before, div.backtop a::after { width:20px; }
div.backtop a::before { left:37.5%; transform:translate(-37.5%,-50%) rotate(-45deg); }
div.backtop a::after { right:37.5%; transform:translate(37.5%,-50%) rotate(45deg); }

}
