@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0;
font:14px/1.4 verdana,Verdana,Arial,sans-serif;

/*
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
*/

margin:0;
outline:0;
padding:0;
/*vertical-align:baseline;とりあえず取り消し*/
}

:focus{
outline:0;
}

ol, ul{
list-style:none;
}

table{
border-collapse:separate;
border-spacing:0;
}

caption,th,td{
font-weight:normal;
text-align:left;
}

blockquote:before,blockquote:after,q:before,q:after{
content:"";
}

blockquote,q{
quotes:"" "";
}

a img{
border: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

body{
font:14px/2.0 "Lucida Sans Unicode", "Lucida Grande", Arial, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",sans-serif;
-webkit-text-size-adjust:100%;
}

/*　独自設定
------------------------------------------------------------*/
html{
  touch-action:manipulation;
}

*.floating
{
   float: left;
   width: 49%;
   /*border: solid 1px #cccccc;*/
}

/*フォントの定義 - ブラウザ互換性を考慮した設定*/
@font-face {
  font-family: 'BabelStoneTibetan';
  src: url('fonts/BabelStoneTibetan.woff2') format('woff2'),
       url('fonts/BabelStoneTibetan.woff') format('woff'),
       url('fonts/BabelStoneTibetan.ttf') format('truetype'),
       url('fonts/BabelStoneTibetan.eot') format('embedded-opentype');
  font-display: swap; /* 読み込み速度最適化 */
}

/*フォントの呼び出し - フォールバック機能強化*/
.tibet_font {
  font-family: 'BabelStoneTibetan', 'Microsoft Himalaya', 'Noto Sans Tibetan', Arial, sans-serif;
}

.z{
  background-color:#ffc0cb;
  text-align: center;
}
.h{
  background-color:#90ee90;
  text-align: center;
}
.v{
  background-color:#ffffe0;
  text-align: center;
}
.a{
  background-color:#deb887;
  text-align: center;
}
.f{
  background-color:#90ee90;
  text-align: center;
}
.d{
  background-color:#90ee90;
  text-align: center;
}
.k{
  background-color:#add8e6;
  text-align: center;
}
.s{
  background-color:#dda0dd;
  text-align: center;
}
.m,.e,.r{
  text-align: center;
}
/*　CSSローディングアニメーション
------------------------------------------------------------*/

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #87cefa;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}


/*　マウスオーバー　吹き出し
------------------------------------------------------------*/
.arrow_box {
  display: none;
  position: absolute;
  padding: 16px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;  
  border-radius: 8px;
  background: #696969;
  color: #fff;
}

.arrow_box:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border: solid transparent;
  border-color: rgba(51, 51, 51, 0);
  border-bottom-color: #696969;
  border-width: 10px;
  pointer-events: none;
  content: " ";
}

/*　jquery 絞り込み 使っていない
------------------------------------------------------------*/

#btn {
	overflow: hidden;
	margin-bottom: 40px;
}

#btn li {
	float: left;
	margin: 10px;
	cursor: pointer;
}

#animationList {
	overflow: hidden;
}

#animationList li {
	/*width: 220px;
	height: 220px;
	padding: 10px;
	float: left;
	color: #fff;*/
}

#animationList li span {
	display: block;
	/*width: 180px;
	height: 180px;
	padding: 20px;*/
}

/* フォーム 独自設定　エネルギーから持ってきた
------------------------------------------------------------*/
input, textarea, select{
vertical-align:middle;
max-width:95%;
line-height:30px;
height:30px;
padding:1px 5px;
border:1px solid #d4d4d7;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
color:#555;
background:#fcfcfc;
}

/*
input[type="text"], textarea{
vertical-align:middle;
max-width:90%;
line-height:30px;
height:30px;
padding:1px 5px;
border:1px solid #d4d4d7;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size:100%;
color:#555;
background:#fcfcfc;
}
*/

textarea{
height:auto;
line-height:1.5;
margin:10px 0px 10px 0px;
}

/*チベット文字 button3は頭、button4は足*/
.button,.button2,.button3,.button4{
padding:20px 20px 30px 20px;
margin: 0px;
width:80%;/*20240529追加*/
background:#ececec;
border:0;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
line-height:0;/*1.5*/
font-size:250%;
color:#624e24;
text-align: center;
cursor:pointer;
}


/*クイズリロード*/
.button_reload{
  padding:20px;
  margin: 10px 0px;
  background:#ececec;
  border:0;
  border-radius:3px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  line-height:0;/*1.5*/
  font-size:250%;
  color:#624e24;
  text-align: center;
  cursor:pointer;
  }

.memo{
  padding:3px;
  margin: 5px;
  }

/*チベット文字以外のボタン*/
.button_memo,.button_del,.button_all_del,.button_kakutei,.button_user{
  padding:15px;
  margin: 5px;
  background:#ececec;
  border:0;
  border-radius:3px;
  -webkit-border-radius:3px;
  -webkit-appearance: none;
  -moz-border-radius:3px;
  line-height:0;/*1.5*/
  font-size:100%;
  color:#624e24;
  text-align: center;
  cursor:pointer;
  }

/*input[type="button"]:hover{*/
/*
.button:hover,.button2:hover,.button_reload:hover,.button_memo:hover,.button_del:hover,.button_all_del:hover,.button_kakutei:hover,.button_user:hover{
background:#800000;
color:#fff;
}
*/
.button:active,.button2:active,.button3:active,.button4:active,.button_reload:active,.button_memo:active,.button_del:active,.button_all_del:active,.button_kakutei:active,.button_user:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(2px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

*:first-child+html input[type="submit"]{padding:3px;}

/* リンク設定
------------------------------------------------------------*/

a{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;
/*
font-weight:bold;
color:#0bba7a;
color:#FF4500;
*/
color:#000000;
}

.under_line{/*説明用ページのリンクに下線を引く*/
  text-decoration:underline;
}

a:hover, a:active{
outline:none;
color:#ff4500;
/*color:#ffe0e0;*/
}

a:hover img {
	opacity:0.5;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
}

/**** Clearfix ****/

.nav .panel:before,nav .panel:after, #mainNav:before,#mainNav:after, .newsTitle:before,.newsTitle:after{
content:"";
display:table;
}

nav.panel:after,#mainNav:after,.newsTitle:after{
clear: both;
}

nav.panel,#mainNav,.newsTitle{
zoom: 1;
}


/* レイアウト
------------------------------------------------------------*/

#wrapper, .inner{
margin:0 auto;
width:1110px;
}

#content{
float:right;
width:750px;
padding:40px 0 50px;
background-image: url("/images/bg_image.png");
background-repeat: repeat-y;
background-size: 100%;
}

#content ol{/*独自追加*/
border-radius: 5px;
padding: 10px;
margin: 0px 0px 15px 0px;
}
#content ol.import{/*独自追加*/
background-color: rgba(242,149,0,0.3);
/*background-color: #F29500;*/
}
#content ol.export{/*独自追加*/
background-color: rgba(0,93,242,0.3);
/*background-color: #005DF2;*/
}


#content ol li{/*独自追加*/
list-style:none;
}


#sidebar{
float:left;
width:320px;
padding:42px 0;
}

/* サイドバー（カード化・モダン化） */
#sidebar .widget{
  background:var(--color-surface);
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:16px 14px;
  margin-bottom:18px;
}

#sidebar .widget h3{
  border-bottom:0;
  margin:0 0 8px;
  padding:0 0 6px;
}

#sidebar .widget h3 span{
  display:inline-block;
  padding-left:10px;
  border-left:4px solid var(--color-primary);
}

#sidebar .widget ul{
  margin:6px 0 0 0;
  list-style:none; /* 箇条書きの黒点を消す */
}

#sidebar .widget ul li{
  margin:0;
}

#sidebar .widget ul li a{
  display:block;
  padding:8px 10px;
  border-radius:8px;
  color:var(--color-text);
  transition:background-color .15s ease, color .15s ease;
}

#sidebar .widget ul li a:hover{
  background:rgba(37,99,235,.08);
  color:var(--color-primary);
}

#footer{
clear:both;
padding-top:20px;
} 


/* ヘッダー
------------------------------------------------------------*/

#header h1{
/*padding-top:10px;独自設定*/
font-size:90%;
/*font-weight:bold;*/
}

#header h2{
clear:both;
text-align:center;
margin-top:4px;/* 旧: -30px → ロゴとナビの重なり回避 */
margin-bottom:6px;
color:#000000;
font-size:160%;
font-weight:bold;
}

/* ============================== */
/* ヘッダー上部 左:ブランド 右:外部リンク */
/* ============================== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 6px 4px;
}

.topbar .brand{
  font-weight:800;
  letter-spacing:.01em;
  color:var(--color-text); /* 単色でマット */
}

.topbar .toplink{
  font-weight:600;
  color:var(--color-primary);
  background:rgba(37,99,235,.10);
  padding:6px 12px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--color-primary) 20%, var(--border-color));
}

.topbar .toplink:hover{
  color:var(--color-primary-hover);
  background:rgba(37,99,235,.16);
}

#header h2 img{
width:300px;/*default:191px*/
}

.contact{
/*margin-top:-25px;独自設定*/
float:right;
text-align:left;
}

.contact p{
padding-left:80px;
font-size:90%;
/*font-weight:bold;独自設定*/
}

.contact p.tel::before{
content: "";
}

.contact p.openTime::before{
content: "";
}

.contact p.address::before{
content: "";
}

.under_title{
  text-align:center;
}


/* トップページ　メイン画像
----------------------------------*/

#mainImg img{
width:100%;
height:auto;
}


/* タイポグラフィ
------------------------------------------------------------*/

h2.title{
clear:both;
margin-bottom:40px;
padding-bottom:7px;
/*text-align:center;*/
font-size:150%;
font-weight:bold;
}

h2.title span{
padding-bottom:10px;
border-bottom:3px solid #000000;
}

h2.recentpost{
margin:30px 0 15px;
padding:15px 0;
font-size:150%;
font-weight:bold;
border-bottom:3px solid #000000;
}

h3.recentpost{/*独自追加*/
margin:10px 0 5px;
padding:5px 0;
font-size:100%;
font-weight:bold;
border-bottom:1px solid #000000;
}

.post p{
padding-bottom:15px;
}

.post ul{
margin:10px 0 20px 20px;
}

.post ul li{
padding-left:5px;
list-style:disc;
}

.post ol{
margin:0 0 10px 30px;
}

.post ol li{
list-style:decimal;
}

.post h1{
margin:15px 0 25px;
padding:15px 0;
font-size:150%;
font-weight:bold;
border-bottom:3px solid #696969;
}

.post h2{
color: #696969;/*文字色*/
border: solid 3px;/*線色*/
/*padding: 0.5em;*//*文字周りの余白*/
border-radius: 5px;/*角丸*/
margin:15px 0 15px;
padding:15px 10px;
font-size:130%;
font-weight:bold;
}
/*
.post h2{
margin:15px 0 15px;
padding:15px 0;
font-size:130%;
font-weight:bold;
border-bottom:2px solid #000000;
}
*/
.post h3{
color: #696969;/*文字色*/
margin:15px 0 10px;
padding:15px 0px 5px 0px;
font-size:120%;
font-weight:bold;
border-bottom:3px solid #696969;
}

.post h4{
margin:15px 0 10px;
padding:15px 0;
font-size:110%;
font-weight:bold;
}

.post h5{
margin:15px 0 10px;
padding:15px 0;
font-size:110%;
font-weight:bold;
}

.post h6{
margin:15px 0 10px;
padding:15px 0;
font-size:110%;
font-weight:bold;
}

.post blockquote {
clear:both;
padding:10px 0 10px 25px;
margin:10px 0 25px 0px;
border-left:5px solid #e9e9e9;
}
 
.post blockquote p{
padding:5px 0;
}

.post table{
border:1px #cccccc solid;
border-collapse:collapse;
border-spacing:0;
margin:0px;/*5px 0 5px;*/
width:100%;
}
/*
.post table th{
padding:8px;
border:#cccccc solid;
border-width:0 0 1px 1px;
font-weight:bold;
}

.post table td{
padding:2px;
border:1px #cccccc solid;
border-width:0 0 1px 1px;
}
*/
.post dt{
font-weight:bold;
}

/*独自追加*/
.post table td,th{
  border-top:1px solid #666;
  padding:4px 2px;
}
.post table tr:last-child td,
.post table tr:last-child th{
  border-bottom:1px solid #666; 
}

.post dd{
padding-bottom:10px;
}

.post img{
max-width:100%;height:auto;
}

img.aligncenter{
display:block;
margin:5px auto 30px auto;
text-align:center;
}

img.alignright{
margin:5px 0 30px 30px;
}

img.alignleft{
margin:5px 30px 30px 0;
}

.alignright{
float:right;
}

.alignleft{
float:left;
}

/* サイドバー　ウィジェット
------------------------------------------------------------*/

.widget{
margin-bottom:30px;
}

.widget h3{
clear:both;
margin:0 0 10px;
padding:5px 0;
font-size:130%;
font-weight:bold;
border-bottom:2px solid #696969;
}

.widget ul{
margin:0px 0 30px 0;/*margin:30px 0 30px 0;*/
}

.widget li a{
display:block;
margin-top:5px;/*元は15px*/
color:#696969;
/*font-weight:bold;*/
}

.widget a:hover{
color:#ff4500;
}

p.banner{
padding-bottom:10px;
}

p.banner img{
width:100%;
}

#banners{
padding-bottom:10px;
}

#contactBanner{
width:320px;
height:80px;
padding-top:22px;
background:url(images/banner_tel.jpg) no-repeat;
background-size:320px;
}

#contactBanner p.tel{
display:inline;
padding-left:60px;
font-weight:bold;
font-size:20px;
}

#contactBanner p.tel::before{
content:"TEL : ";
}

.newsTitle{
clear:both;
margin:15px 0 10px;
padding:5px 0;
font-size:130%;
font-weight:bold;
border-bottom:3px solid #000000;
}

.newsTitle h3{
float:left;
}

.newsTitle p{
float:right;
padding:5px 10px 0 10px;
font-size:70%;
}

.newsTitle p a{
color:#000000;
}

.news p a{
color:#000000;
}

.newsTitle p a:hover{
color:#ff4500;
}

.news{
margin:30px 0 30px 0;
}

.news p{
clear:both;
margin-top:15px;
}

.news p a{
display:block;
color:#000000;
font-weight:bold;
}

.news span{
padding-left:10px;
}

.news a:hover span{
color:#ff4500;
}


/* フッター
------------------------------------------------------------*/

#footerLogo{
float:left;
width:320px;
text-align:center;
padding-top:20px;
}

#footerLogo img{
width:150px;
}

#footer ul{
float:right;
width:750px;
padding-top:20px;
}

#footer ul ul{
display:none;
}

#footer ul li{
display:inline-block;
text-align:left;
padding:5px 0;
margin-left:15px;
}

#footer ul li a{
padding:0 0 0 12px;
color:#000000;
}

#footer ul li a:hover{
color:#ff4500;
}

#copyright{
clear:both;
padding:50px 0 37px;
text-align:center;
font-size:10px;
}

#pagetop{
position:fixed;
right:30px;
bottom:0px;
font-size:40px;
color:#cdcdcd;
}

/* トップページ 最新記事3件 + 3つの画像
------------------------------------------------------------*/

.thumbWrap{
width:770px;
margin:0 -20px 20px 0;
}

.thumbWrap li{
display:inline-block;
width:233px;
margin:0 20px 20px 0;
margin: 0px;
vertical-align:top;
}


.thumbWrap img{
max-width:100%;
height:auto;
    /*border-radius: 50%;*/ /*独自追加*/
}

ul.thumbUnder h3{
padding-top:10px;
font-size:110%;
font-weight:bold;
}

ul.thumbUnder h3 span{
display:block;
}

ul.thumbUnder h3 a{
color:#000000;
}

ul.thumbUnder h3 a:hover{
color:#ff4500;
}

ul.thumbUnder li p{
margin:15px 0 10px;
}

ul.thumbUnder li img{
margin-top:10px;
border-radius: 50%; /*独自追加*/
}

ul.thumbUnder .thumbUnderDate{
font-size:80%;
}

/* 独自追加
------------------------------------------------------------*/
.small80{/*独自追加*/
font-size:80%;
}

.nav_title{
  padding: 1px 0px;/*上下 左右の余白*/
  /*color: #494949;*//*文字色*/
  background: transparent;/*背景透明に*/
  /*border-left: solid 5px #696969;*//*左線*/
  /*padding-left:1em;*/
}

.sign_left{
  position: relative;
  padding-left: 2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

.sign_left:before{
  content: url(./images/sign_left.svg) ;/*アイコンのユニコード*/
  width:12px;
  position: absolute;/*絶対位置*/
  font-size: 2em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
}

.sign_right{
  position: relative;
  padding-left: 2em;/*アイコン分のスペース*/
  line-height: 1.4;
}
.sign_right:before{
  content: url(./images/sign_right.svg) ;/*アイコンのユニコード*/
  width:12px;
  position: absolute;/*絶対位置*/
  font-size: 2em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
}

.nashi{/*グラフデータがない場合のメッセージ*/
text-align: center;
color: #696969;/*文字色*/
border: solid 1px;/*線色*/
/*padding: 0.5em;*//*文字周りの余白*/
border-radius: 5px;/*角丸*/
margin:15px 0 15px;
padding:15px 10px;
/*font-size:130%;*/
font-weight:bold;
}

.logout{/*非会員向けのメッセージ*/
/*text-align: center;*/
font-size:90%;
/*color: #ff7f50;*//*文字色*/
border: solid 1px;/*線色*/
/*padding: 0.5em;*//*文字周りの余白*/
border-radius: 5px;/*角丸*/
margin:15px 0 15px;
padding:6px 10px;
font-weight:bold;
}

.logout .red{/*非会員向けのメッセージ*/
  font-size:120%;
  color: #ff0000;/*文字色*/
  font-weight:bold;
}
  
.logout:hover{
color:#000;
background-color: #fffff0;
}

.message10years{/*10周年メッセージ*/
  /*text-align: center;*/
  font-size:90%;
  color: #fff;/*文字色*/
  background-color: #4ebae5;
  border: solid 1px;/*線色*/
  /*padding: 0.5em;*//*文字周りの余白*/
  border-radius: 5px;/*角丸*/
  margin:15px 0 15px;
  padding:6px 10px;
  font-weight:bold;
  }

.contact_top_page{/**/
  /*text-align: center;*/
  font-size:90%;
  color: #fff;/*文字色*/
  background-color: #696969;
  border: solid 1px;/**/
  /*padding: 0.5em;*//*文字周りの余白*/
  border-radius: 5px;/*角丸*/
  margin:15px 0 15px;
  padding:6px 10px;
  font-weight:bold;
}

.contact_top_page .big140{/*独自追加*/
  font-size:140%;
}

.contact_top_page a{/*独自追加*/
  font-size:90%;
  color: #fff;/*文字色*/
  font-weight:bold;
}
 
.fav_max{
  text-align: center;
  color: #ff4500;/*文字色*/
  border: solid 2px;/*線色*/
  /*padding: 0.5em;*//*文字周りの余白*/
  border-radius: 5px;/*角丸*/
  margin:15px 0 15px;
  padding:10px 10px;
  font-weight:bold;
  }
    
.fav_list{
list-style-type: decimal;
}
.fav_list li{
  margin-left: 1.6em; /* 好きな値に調整 */
}
.recent_list{
  list-style-type: disc;
}
.recent_list li{
  margin-left: 1.6em; /* 好きな値に調整 */
}

.rotate90{
  color:#0000ff;
  text-align: center;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}


.comment{
  background: #add8e6;
  border-radius :4px;/*角の丸み*/
  /*box-shadow :0px 0px 5px silver;*//*5px=影の広がり具合*/
  padding: 3px;
  margin:3px 5px 0px 0px;
}
.comment2{/*管理人コメント*/
  background: #add8e6;
  border-radius :8px;/*角の丸み*/
  box-shadow :0px 0px 5px silver;/*5px=影の広がり具合*/
  padding: 10px;
  margin:10px 10px 10px 40px;
  list-style-type: decimal;
}

.zeikan_kunibetsu{/**/
  background: #d2b48c;
  border-radius :8px;/*角の丸み*/
  /*box-shadow :0px 0px 5px silver;*//*5px=影の広がり具合*/
  padding: 10px;
  margin:10px 10px 10px 40px;
  /*list-style-type: decimal;*/
}

.zeikan_kunibetsu a{/**/
  color: #fff;/*文字色*/
  font-weight:bold;
}
.zeikan_kunibetsu a:hover{/**/
  color: #ff4500;/*文字色*/
  font-weight:bold;
}

.comment_post{
  padding: 10px;
  margin:10px;
}

#modal-content{
  /*width:60%;
  height:40%;
  padding:10px;*/
  margin:10px 10px 120px 10px;
  /*text-align:center;*/
 }
#modal-content #input_word{
  font-size:160px;
  text-align:center;
 }
/*
#inline,#modal-content,#input_word{
  text-align:left;
}
*/
/* メインメニュー　PC用
------------------------------------------------------------*/

@media only screen and (min-width:1025px){

nav#mainnav{
position:relative;
margin-top:10px;/*もともとは30px*/
}

nav#mainnav ul{
display:flex;
justify-content:center;
align-items:center;
}

nav#mainnav ul li{
float:left;
}

nav#mainnav ul li a{
display:block;
text-align:center;
_float:left;
height:40px; /* 高さ/行間を一致させて縦位置安定 */
padding:0 28px 0;
line-height:40px;
font-weight:bold;
color:#000000;
}

nav#mainnav ul li a:hover{
color:#ff4500;
}

nav#mainnav ul ul{
width:160px;
border-top:0;
}

nav#mainnav ul li ul{
display: none;
}

nav#mainnav ul li:hover ul{
display: block;
position: absolute;
top:42px; /* 親aの高さに追従 */
text-align:center;
z-index:500;
}

nav#mainnav ul li li{
background:#ffffff;
border-bottom:1px dotted #cdcdcd;
float: none;
width:160px;
height:40px;
line-height:40px;
margin:0;
}

nav#mainnav ul li li:last-child{
border:0;
}

nav#mainnav ul li li a{
width:100%;
height:40px;
padding:0;
line-height:40px;
font-size:95%;
text-align:center;
}

nav#mainnav ul li li a:hover{
color:#ff4500;
}

nav div.panel{
display:block !important;
}

a#menu{
display:none;
}

}


/* iPadサイズ以下（1024px）からアコーディオンメニュー
------------------------------------------------------------*/

@media only screen and (max-width:1024px){
/* モバイル用のヘッダー高さを変数で一元管理（実寸72px） */
  :root{ --header-mobile-h: 72px; }

  /* ヘッダーは最上部固定 */
  #header{ top:0; }
  /* コンテンツ側だけをヘッダー分だけ下げる */
  #wrapper{ padding-top:var(--header-mobile-h); padding-left:0; } /* 左余白を排除 */
#header .topbar .brand{
    display:none; /* モバイルでは左上のテキストロゴを非表示 */
}

#header .topbar{
    padding:2px 6px 0; /* 余白を圧縮してタイトル画像を上に寄せる */
    justify-content:flex-end; /* kawachenボタンを右端に寄せる */
    position:absolute; /* ヘッダー右端に固定し、縦中央揃えにする */
    right:6px;
    top:0;
    height:100%;
    align-items:center; /* 縦中央 */
}

#header{
    margin-top:0; /* 画面最上部に密着させる */
    position:fixed;
    width:100%;
    z-index:500;
}
	
#headerWrap{
    position:relative;
    width:100%;
    height:var(--header-mobile-h); /* 変数で一元管理 */
    background:#ffffff;
    border-bottom:1px solid #cccccc;
    overflow:hidden; /* はみ出しを物理的にカット */
}
	
#header h2{
    padding-top:0;/* さらに上へ寄せる */
    height:100%; /* ヘッダー高に合わせる */
    display:flex; /* 画像を縦中央に */
    align-items:center; /* 縦中央 */
    justify-content:flex-start; /* 左寄せ */
    padding-left:8px; /* 左に少し余白 */
}
	
#header h2 img{
    /*max-height:38px;*/
    width:186px; /* 画像タイトルをさらに拡大 */
    margin-top:0; /* フレックス中央揃えに合わせてリセット */
    height:auto;
    display:block;
    /*width:auto !important;*/
}

#header .pnav ul{
display:none;
}

a#menu{
display:inline-block;
position:relative;
width:40px;
height:60px;
}

#menuBtn{
display:block;
position:absolute;
top:65%;
left:30%;
width:18px;
height:2px;
margin:-1px 0 0 -7px;
background:#000000;
transition:.2s;
}

#menuBtn:before, #menuBtn:after{
display:block;
content:"";
position:absolute;
top:50%;
left:0;
width:18px;
height:2px;
background:#000000;
transition:.3s;
}

#menuBtn:before{
margin-top:-7px;
}

#menuBtn:after{
margin-top:5px;
}

a#menu .close{
background:transparent;
}

a#menu .close:before, a#menu .close:after{
margin-top:0;
}

a#menu .close:before{
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}

a#menu .close:after{
transform:rotate(-135deg);
-webkit-transform:rotate(-135deg);
}

.panel{
width:100%;
display:none;
overflow:hidden;
position:relative;
left:0;
top:0;
z-index:100;
}

#mainnav{
position:absolute;
top:0;
width:100%;
text-align:right;
z-index:500;
}

#mainnav ul{
background:#ffffff;
text-align:left;
}

#mainnav li a{
position:relative;
display:block;
padding:12px 25px;
border-bottom:1px solid #eeeeee;
color: #000000;
font-weight:bold;
}

#mainnav ul li li{
border:0;
}

#mainnav ul li li a{
padding-left:40px;
}

}


/* iPadサイズ以下（1024px）から 1カラム表示に切り替え
------------------------------------------------------------*/

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

  /*チベット文字*/
  .button,.button2{
    padding:14px 10px 22px 10px;
    margin: 2px 0px;
    background:#ececec;
    border:0;
    border-radius:2px;
    -webkit-appearance: none;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    line-height:0;/*1.5*/
    /*font-size:120%;*/
    color:#624e24;
    text-align: center;
    cursor:pointer;
  }
  
    /*チベット文字 頭*/
    .button3{
      padding:30px 10px 6px 10px;
      margin: 2px 0px;
      background:#ececec;
      border:0;
      border-radius:2px;
      -webkit-appearance: none;
      -webkit-border-radius:2px;
      -moz-border-radius:2px;
      line-height:0;/*1.5*/
      font-size:240%;
      color:#624e24;
      text-align: center;
      cursor:pointer;
    }

    /*チベット文字 足*/
    .button4{
      padding:12px 27px 24px 10px;
      margin: 2px 0px;
      background:#ececec;
      border:0;
      border-radius:2px;
      -webkit-appearance: none;
      -webkit-border-radius:2px;
      -moz-border-radius:2px;
      line-height:0;/*1.5*/
      font-size:240%;
      color:#624e24;
      text-align: center;
      cursor:pointer;
    }

  .button_reload{
    padding:14px 10px 14px 10px;
    margin: 10px 0px;
    background:#ececec;
    border:0;
    border-radius:2px;
    -webkit-appearance: none;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    line-height:0;/*1.5*/
    /*font-size:120%;*/
    color:#624e24;
    text-align: center;
    cursor:pointer;
  }
  
  #modal-content{
    /*width:60vw;*/
    /*height:40vh;*/
    padding:0px;
    margin:20px 0px 120px 0px;
   }
  #modal-content #input_word{
    font-size:120px;
    text-align:center;
   }

.display-none{
  display:none;
}

#sidebar{
  display:none;
}

#wrapper, .inner{
width:100%;
}

.contact{
display:none;
}

#header h1{
display:none;
}

#mainImg img{
padding-top:60px;
}

h2.first{
margin-top:45px;
}

h2.title{
padding-top:35px;
}

.thumbWrap{
width:100%;
}

.thumbWrap ul.thumbUnder li{
width:30%;
display:inline-block;
vertical-align:top;
margin:0 1% 0 1.5%;
}

.thumbWrap ul.thumbUnder li img{
/*width:100%;*/
}

.thumbWrap ul.thumb li{
width:30%;
float:left;
margin:0 1% 0 2%;
}

  #content, #sidebar{
    clear:both;
    width:100%; /* 左右の余白をコンテンツ内パディングで統一 */
    float:none;
    margin:0 auto;
    padding:0 8px 32px 0; /* 左を0にして最大限左寄せ、右は8pxだけ確保 */
    /*padding:100px 0;*/
}

  /* 左端に寄せるため、#content の左ボーダー/余白を除去 */
  #content{ border-left:0; padding-left:0; }

  /* 表の左右余白を均等に（中央寄せ） */
  .content .post > table:first-of-type{
    width:100%; /* コンテンツ幅いっぱいに */
    margin-left:0; 
    margin-right:auto; /* 左寄せ */
    max-width:100%;
    box-sizing:border-box; /* 親padding込みで100% */
  }

  /* 記事ブロックは通常フローでOK */
  .content{ display:block; }
  .content .post{ display:block; margin:0 auto; }

  /* テーブル全般のはみ出し防止（幅は常に100%で中央） */
  .post table{
    width:100% !important;
    max-width:100%;
    table-layout:fixed; /* 列幅を安定させて横溢れ防止 */
    box-sizing:border-box;
    margin-left:0; 
    margin-right:auto; /* 左寄せ */
  }
  .post table td,
  .post table th{
    padding-left:2px;
    padding-right:2px; /* 右端のはみ出しを抑制 */
  }

  /* ボタンサイズは元の定義に従う（このメディアクエリでは上書きしない） */

/* タイトル直後の最初のテーブルがヘッダーに寄らないように余白を追加 */
.content .post > table:first-of-type{
  clear:both; /* タイトルと確実に段落ちさせる */
  margin-top:18px; /* 余白を増やす */
}

#banners{
width:100%;
text-align:center;
}

#banners p{
width:30%;
float:left;
margin:0 1% 0 1.5%;
}

#banners p img{
width:100%;
height:auto;
}

#contactBanner{
margin:0 auto;
}

#footer{
margin:0;
border:0;
text-align:center;
}

#footerLogo, #footer ul{
float:none;
width:auto;
padding-bottom:20px;
text-align:center;
}

#footer ul{
padding-top:20px;
}

}


/* 幅644px以下から ヘッダー等微調節
------------------------------------------------------------*/

@media only screen and (max-width: 644px){
/* 645px未満でもボタンの見た目・位置を変化させない（1024px以下の定義を継承） */
/* ここではボタン系(.button, .button3, .button4, .button_reload)の再定義を行わず、
   前段(@media max-width:1024px)のスタイルをそのまま適用させます。 */

/*独自追加*/
.post table td,th{
  border-top:1px solid #666;
  padding:0px;
}
.post table tr:last-child td,
.post table tr:last-child th{
  border-bottom:1px solid #666; 
}

#modal-content{
/*  width:60%;
  height:40%;*/
  padding:0px;
  margin:10px 0px 50px 0px;
 }
#modal-content #input_word{
  font-size:80px;
  text-align:center;
 }

#sidebar{
  display:none;
}

img.alignright, img.alignleft{
display:block;
margin:5px auto 20px auto;
}

.alignright,.alignleft{
float:none;
}

.thumbWrap ul.thumbUnder li{
width:95%;
margin-bottom:10px;
}

.thumbWrap ul.thumbUnder li img{
/*width:100%;*/
}

#banners p{
float:none;
width:95%;
}

#banners p img{
width:100%;
}

#footer ul{
text-align:left;padding:15px;
}

}

/* ============================== */
/* モダンテーマ: デザイントークン */
/* ============================== */
:root{
  --color-bg:#ffffff; /* 常時白背景に統一 */
  --color-surface:#ffffff; /* コンテンツも白 */
  --color-text:#1f2937;
  --color-muted:#6b7280;
  --color-primary:#2563eb; /* 明るめのブルー */
  --color-primary-hover:#1d4ed8;
  --color-accent:#f59e0b;
  --border-color:#e5e7eb;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 6px 16px rgba(0,0,0,.08);
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
}

@media (prefers-color-scheme: dark){
  :root{
    /* ユーザー要望によりダーク時も白背景を維持 */
    --color-bg:#ffffff;
    --color-surface:#ffffff;
    --color-text:#1f2937;
    --color-muted:#6b7280;
    --color-primary:#2563eb;
    --color-primary-hover:#1d4ed8;
    --color-accent:#f59e0b;
    --border-color:#e5e7eb;
    --shadow-sm:0 1px 2px rgba(0,0,0,.06);
    --shadow-md:0 6px 16px rgba(0,0,0,.08);
  }
}

/* ============================== */
/* 全体ベース */
/* ============================== */
html,body{
  background:#ffffff !important; /* 常時白背景を強制 */
  color:var(--color-text);
  overflow-x:hidden; /* スマホ横スクロール抑止 */
}

body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

a{
  color:var(--color-primary);
  transition:color .2s ease;
}

a:hover{
  color:var(--color-primary-hover);
}

/* ============================== */
/* レイアウト/コンテナ */
/* ============================== */
#wrapper,.inner{
  max-width:1110px;
}

/* ワンポイント背景（ヘッダー右上） */
#headerWrap{position:sticky;}
#headerWrap::after{
  content:"";
  position:absolute;
  top:6px;
  right:10px;
  width:84px;
  height:84px;
  background:url("./images/bg_image.svg") no-repeat center / contain;
  opacity:.18; /* わかる程度に */
  pointer-events:none;
}

#content{
  background:#ffffff; /* 白地に統一 */
  background-image:none;
  box-shadow:var(--shadow-md);
  border-radius:calc(var(--radius-lg) + 2px);
  padding:28px 28px 36px; /* わずかに圧縮して余白バランス改善 */
  border:1px solid var(--border-color);
}

#sidebar{
  background:transparent;
}

/* セクション間余白を少しモダンに */
.post p{margin:0 0 1rem}
.post h2{border-color:var(--border-color)}
.post h3{border-color:var(--border-color)}

/* ============================== */
/* ヘッダー/ナビ */
/* ============================== */
#headerWrap{
  position:sticky;
  top:0;
  background:var(--color-surface); /* マットな無地 */
  border-bottom:1px solid var(--border-color);
  box-shadow:var(--shadow-sm);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  z-index:100;
}

nav#mainnav ul li a{
  color:var(--color-text);
}

nav#mainnav ul li a:hover{
  color:var(--color-primary);
}

/* デスクトップ: 2カラムをフレックスで安定配置 */
@media only screen and (min-width:1025px){
  #wrapper{
    display:flex;
    align-items:flex-start;
    gap:12px; /* さらに隙間を縮小 */
  }
  #content{
    float:none; /* 旧来のfloatを無効化 */
    width:auto; /* フレックスで残り幅を使用 */
    flex:1 1 auto;
  }
  #sidebar{
    float:none; /* 旧来のfloatを無効化 */
    width:320px; /* 元の幅に戻す */
    flex:0 0 320px;
    position:sticky; /* 長文でも視認性アップ */
    top:24px;
  }
}

/* ============================== */
/* フッター */
/* ============================== */
#footer{
  border-top:1px solid var(--border-color);
}

#footer ul li a{
  color:var(--color-muted);
}

#footer ul li a:hover{
  color:var(--color-primary);
}

/* ============================== */
/* ボタン（.button 系） */
/* ============================== */
.button,.button2,.button3,.button4,.button_reload,
.button_memo,.button_del,.button_all_del,.button_kakutei,.button_user{
  background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0)) , var(--color-surface);
  border:1px solid var(--border-color);
  color:var(--color-text);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease;
  vertical-align:middle; /* 広い画面でボタン内テキストが下寄りに見える現象の緩和 */
}

.button:hover,.button2:hover,.button3:hover,.button4:hover,
.button_reload:hover,.button_memo:hover,.button_del:hover,
.button_all_del:hover,.button_kakutei:hover,.button_user:hover{
  box-shadow:var(--shadow-md);
}

.button:focus,.button2:focus,.button3:focus,.button4:focus,
.button_reload:focus,.button_memo:focus,.button_del:focus,
.button_all_del:focus,.button_kakutei:focus,.button_user:focus{
  outline:2px solid color-mix(in oklab, var(--color-primary) 60%, white);
  outline-offset:2px;
}

/* 無効ボタンの見た目強化（既存JSが背景変更） */
input[disabled], button[disabled]{
  opacity:.65;
  cursor:not-allowed;
}

/* ============================== */
/* フォーム/テーブル */
/* ============================== */
input,textarea,select{
  background:var(--color-surface);
  border:1px solid var(--border-color);
}

input:focus,textarea:focus,select:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--color-primary) 30%, transparent);
}

.post table{
  border-color:var(--border-color);
}

.post table td,th{
  border-top:1px solid var(--border-color);
}

.post table tr:last-child td,
.post table tr:last-child th{
  border-bottom:1px solid var(--border-color);
}

/* ============================== */
/* ユーティリティ */
/* ============================== */
.muted{color:var(--color-muted)}
.surface{background:var(--color-surface)}
.elevate{box-shadow:var(--shadow-md)}

/* ============================== */
/* ページタイトル */
/* ============================== */
.page-title{ 
  margin:8px 0 18px; 
  padding:10px 0 14px; 
  border-bottom:1px solid var(--border-color);
  clear:both; /* 前段のフロート要素と干渉しないようにする */
}
.page-title h1{
  font-size:120%; /* モバイルでタイトルを小さく */
  font-weight:bold;
  letter-spacing:.02em;
  color:var(--color-text);
}

@media only screen and (max-width:1024px){
  .page-title h1{ text-align:center; font-size:110%; } /* さらに小さめ */
}

/* 視覚的に非表示（スクリーンリーダー用に残す） */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ============================== */
/* モバイル横はみ出しの最終ガード（全ページ共通） */
/* ============================== */
/* すべての要素のサイズ計算を枠込みにして、パディングやボーダーで横にはみ出さないようにします */
*, *::before, *::after{ box-sizing:border-box; }

/* 画像・メディアのはみ出し抑止（記事外の素要素にも適用） */
img, video, iframe{ max-width:100%; height:auto; }

/* 長い単語/URLによるはみ出し抑止 */
.content, .post{ overflow-wrap:anywhere; word-break:break-word; }

/* 非トップページでも共通カラムの余白で横スクロールが出ないように最終調整 */
@media only screen and (max-width:1024px){
  /* コンテナ左右に軽い余白を持たせつつ、確実に画面内へ収める */
  #wrapper, .inner{ width:100%; padding-left:12px; padding-right:12px; }
  /* コンテンツ本体も左右余白を均一にし、ボーダーや影を含めても収まるように */
  #content{ padding:16px 12px 28px 12px; border-left:0; border-right:0; }
  /* フッターのリストが横に並ぶ場合でも改行優先で収める */
  #footer ul{ display:block; width:auto; white-space:normal; }
}