@charset "utf-8";
/*
Theme Name: RIM
Author: /
Description:Version: 1.0
*/
body {  margin: 0;  padding: 0;  word-break: break-all;  background-position: 0% 0%;  background-repeat: no-repeat;	font-family:'Noto Sans',sans-serif;}
ol, ul, li {  list-style: none;  margin: 0px;  padding: 0px;}
a {  color: #333333;  text-decoration: none;  transition: 0.3s;}
a:link {color: #759E9D;}
a:visited {color:#434343;}
a:active {color: #759E9D;}
a:hover { color:#759E9D; text-decoration: none;}
a img:hover {  transition: 0.3s;  opacity: 0.7;  filter: alpha(opacity=70);  -ms-filter: "alpha(opacity=70)";}
header { width: 100%; text-align: left; margin-bottom: 2em; }
header h1{}
.header-area { width: 100%;  }
.header-layout { display: flex; align-items: center; justify-content: space-between; /*width: 1070px;*/ margin: 0 auto; padding: 1em 0; gap: 2em; }
.sitename { flex-shrink: 0; margin-left:2em;}
.sitename img { display: block; width: 60px; height: 60px; }
.site-description { font-family: "Antonio", serif;  font-size: 1.2em; margin-left: 1em; white-space: nowrap; }
.navi { flex-grow: 1; }
.navi-area {  display: flex;  justify-content: space-between;   align-items: center; font-size: 90%;		position: relative;}
.navi-area ul { display: flex; gap: 1em; list-style: none;gap: 20px;  margin: 0; padding: 0; }
.navi-area ul li { position: relative; }
.navi-area ul li > span > a { color: #fff; text-decoration: none; font-weight: bold; }
.navi-area ul li ul {position: absolute; background: #555555;width:300px; top: 100%; left: 0; padding: 0em; list-style: none; }
.navi-area ul li ul li{padding:0;}
.navi-area ul li:hover ul { display: block; }
.navi-area ul li ul a{color:#FFFFFF;}
.navi-area ul li ul a:hover{color:#759E9D;}

      .related-items{position:fixed;width:20%;bottom:10%;right:0%;padding:2%;background-color: hsla(0,0%,100%,0.80);}
      .related-items a{display: block;border-bottom:solid 1px #efefef;padding-bottom:1em;margin-bottom:1em;font-size:80%;}
      .related-items h2{padding-top:2%;padding-bottom:2%;border-bottom:dotted 1px #CCCCCC;margin-bottom:1em;font-weight:bold;font-size:100%;}


/*--------------------------
ナビゲーション
--------------------------*/
.navi i { font-size: 120%; padding-right: 0.25em; }
.navi ul { display: inline-block; vertical-align: middle; text-align: left; }
.navi li { display: inline-block; vertical-align: middle; padding-top: 1em; padding-bottom: 1em; padding-left: 2em; padding-right: 3em; position: relative; }
.navi ul a { text-decoration: none; padding: 1em; }
.navi ul a:hover { color: #313133; }

.navi li ul { position: absolute; z-index: 9999; top: 100%; left: -2em; width: 1070px; max-width: 100vw; padding: 1em; background-color: hsla(0,0%,100%,0.70); display: none; border-radius: 7px; box-sizing: border-box; flex-wrap: wrap; }
.navi li ul li { display: block; width: auto; min-width: 120px; margin: 0.5em 1em 0.5em 0; vertical-align: top; }
.navi li:hover ul { display: flex; flex-wrap: wrap; align-items: flex-start; }

.fixed {  position: fixed;  z-index: 10000;  width: 100%;  top: 0;}

/*右上ナビスイッチ*/

.menu-trigger { display: none; position: fixed; top: 20px; right: 20px; width: 40px; height: 36px; background: none; border: none; cursor: pointer; z-index: 1001; }
.menu-trigger span { display: block; position: absolute; left: 0; width: 100%; height: 4px; background-color: #000; border-radius: 4px; transition: 0.4s; }
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger span:nth-of-type(2) { top: 16px; }
.menu-trigger span:nth-of-type(3) { bottom: 0; }
.menu-trigger.active span:nth-of-type(1) { transform: translateY(16px) rotate(-45deg); }
.menu-trigger.active span:nth-of-type(2) { opacity: 0; }
.menu-trigger.active span:nth-of-type(3) { transform: translateY(-16px) rotate(45deg); }

  
.header-menu{background-color: hsla(0,0%,0%,1.00);text-align: right;}
.sns li{display: inline-block;font-size:90%;vertical-align: top;}
.sns a{color:#FFFFFF;padding:0.5em;}
  
 .twitter:before{font-family: FontAwesome;content: "\f099";}
 .facebook:before{font-family: FontAwesome;content: "\f09a";}
 .instagram:before{font-family: FontAwesome;content: "\f16d";}
 .youtube:before{font-family: FontAwesome;content: "\f167";}  




.n a{background-color:#759E9D;border-radius:30px;}
.n a:hover{color:#FFFFFF;}
.n a:visited{color:#FFFFFF;}
.n a:link{color:#FFFFFF;}

.search-area { display: flex; align-items: center; flex-shrink: 0; margin-left: auto; margin-top: 1em; margin-right:2em;}
.search-area form { display: flex; align-items: center; width: 100%; }
.search-area input[type="text"] { padding: 0.25em 0.5em; border-radius: 4px; border: none; background-color: #EEEEEE; margin-right: 0.5em; width: 80%; }
.search-area button { border: none; padding: 0.25em 0.8em; background: #555; color: #fff; border-radius: 4px; cursor: pointer; }
.search-area button:before { font-family: FontAwesome; content: "\f002"; }

.page-wrapp{position: relative;}
.wrapper{width:1070px;margin-left:auto;margin-right:auto;padding-bottom:1em;}

.single-post {display: block;width:100%;padding-top:2%;vertical-align: top;}

.new-arrival-area{display:flex;flex-wrap:wrap;gap:2%;width:100%;padding-top:0%;} 
.new-arrival{flex:1 1 calc(48% /*33.33% - 2%*/);margin-bottom:1em;padding:1%;box-sizing:border-box;}
.new-arrival-img{display: block;width:100%;height:10vh;overflow: hidden;}
.new-arrival-img img{width:100%;height:auto;vertical-align: top;margin-top: -20%;}
.new-arrival-text{display: block;width:96%;vertical-align: top;padding:2%;font-size:80%;}

.sidearea{padding-bottom:0.25em;font-size:80%;}
.sidearea a{display:flex;align-items:center;gap:1%;text-decoration:none;} 
.sidearea img{width:50px;height:50px;object-fit:cover;} 
.sidearea p{margin:0;padding:0;color:#333;}


.navi li.cat-item {border:none;}


/* パンくずリストの基本スタイル */
.breadcrumb {
  background: #f8f8f8;
		font-size:14px;
		padding:1%;
}


/* 投稿全体を横並びに */
.post-item {
  display: flex;
  align-items: center;
  gap: 15px; /* 画像とテキストの間隔 */
  margin-bottom: 1em;
		font-size:80%;
}

.post-cat-thumbnail{  flex: 0 0 150px;}
.post-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 5px; /* 角を丸く */
}

/* サムネイル画像 */
.post-thumbnail {
  flex: 0 0 150px;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: 5px; /* 角を丸く */
}
.single-post .post-thumbnail img {max-width: 30%;}
.page-post .post-thumbnail img {max-width: 30%;}
/* テキストエリア */
.post-content {
  flex: 1; /* 残りのスペースを使う */
		 line-height: 1.8;
}
.post-content ul{padding:1%;background-color: #EFEFEF;margin-bottom:1em;}
.post-content li{padding-left:1em;}
.toc ul{background-color: transparent;}

.single-post h2 a {
  text-decoration: none;
  color: #333;
  transition: color 0.3s;
}

.single-post h2 a:hover {
  color: #0073aa;
}

.wrapper .post-content h2{padding:1%;}

.download-button {
    display: inline-block;
    padding: 0.7em 1.5em;
    margin: 0.5em 0;
    background-color: #007bff;
    /*hsla(106,43%,41%,100)*/
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}
.download-button:link{ color: #ffffff;}
.download-button:active{ color: #efefef;}
.download-button:visited{ color: #efefef;}
.download-button:hover { background-color: #0056b3; color: #efefef;}

/* 読み続けるボタン */
.read-more {
margin-top:1em;
margin-bottom:1em;
padding:0.25em;
  text-decoration: none;
  font-weight: bold;
		background-color: #EFEFEF;
		display: inline-block;
}

.read-more:hover {
  text-decoration: underline;
}


.post-tags span::before {
    content: "\f02c"; /* FontAwesomeのタグアイコン */
    font-family: "FontAwesome";
    font-size: 10px;
    color: #666;
				padding-right:0.5em;
}

.tag{padding-right:1em;}


/* 記事タイトル */
.post-title {
  font-size: 220%;
    margin-bottom: 1em;
}

/* メタ情報（公開日・更新日・カテゴリー） */
.post-meta {
    font-size: 14px;
    color: #666;
    padding-bottom: 1em;
}

.post-meta span {
    display: block;
}



.table-container {            width: 100%;            overflow-x: auto;         }

 table {width: 100%;            border-collapse: collapse;            min-width: 600px;         }
 table th {            background: #222222;            color: #ffffff;            padding: 10px;            text-align: left;        }
 td {           padding: 10px;            border: 1px solid #ddd;        }
 tbody tr:nth-child(even) {            background: #f4f4f4;        }

.index{border-bottom: 1px dashed #333;border-top: 1px dashed #333;margin-bottom: 1em;margin-top: 1em;font-weight: 700;padding-top:0.5em;padding-bottom:0.5em;}
.post-content li.toc-3{}
.side {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上揃え */
    flex-wrap: wrap; /* 画面が狭い時に折り返す */
    max-width: 1070px;
				text-align: left;
				background-color: #EFEFEF;
				margin-top:2em;
				padding:2%;
}
.side-layout {    flex: 1;     min-width: 250px;    margin: 10px;}
.side-layout p,.side-layout ul{font-size:80%;}
.side-layout h3{margin-bottom:1em;font-weight: bold;}
.tag-cloud{padding-top:0em;padding-bottom:1em;}
.tag-cloud a::before {
    content: "\f02c"; /* FontAwesomeのタグアイコン */
    font-family: "FontAwesome";
    color: #666;
				padding-right:0.5em;
}



em {
border-bottom: 1px dotted #eee;
padding-bottom: 1em;
margin-bottom: 1em
}
i {
font-size: 130%;
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
line-height: 1;
display: inline-block;
vertical-align: middle
}
.gleen {
background: -webkit-linear-gradient(transparent 70%, #90ee90 70%);
background: -o-linear-gradient(transparent 70%, #90ee90 70%);
background: linear-gradient(transparent 70%, #90ee90 70%)
}
.red {
background: -webkit-linear-gradient(transparent 70%, #ff1493 70%);
background: -o-linear-gradient(transparent 70%, #ff1493 70%);
background: linear-gradient(transparent 70%, #ff1493 70%)
}
.blue {
background: -webkit-linear-gradient(transparent 70%, #92d6fd 70%);
background: -o-linear-gradient(transparent 70%, #92d6fd 70%);
background: linear-gradient(transparent 70%, #92d6fd 70%)
}
.yellow {
background: -webkit-linear-gradient(transparent 70%, #ff0 70%);
background: -o-linear-gradient(transparent 70%, #ff0 70%);
background: linear-gradient(transparent 70%, #ff0 70%)
}
.grey {
background: -webkit-linear-gradient(transparent 70%, #d3d3d3 70%);
background: -o-linear-gradient(transparent 70%, #d3d3d3 70%);
background: linear-gradient(transparent 70%, #d3d3d3 70%)
}
.size-l {
font-size: 150%
}
.size-s {
font-size: 40%
}
.italic, blockquote {
font-style: italic;
}
blockquote {
background-color: #dbe1e5;
padding-top: .5em;
padding-left: .5em;
padding-right: .5em;
position: relative;
border-radius: 7px;
word-break:break-all;
}
blockquote:before {
content: "“";
position: absolute;
left: 0;
top: 0;
font-size: 1000%;
opacity: .1;
line-height: 1em;
font-family: Arial, Helvetica, sans-serif
}
pre {
width: 96%;
background-color: #1b2426;
color: #ccc;
padding: 2%;
display: block;
clear: both;
float: none;
margin-top: 1em;
margin-bottom: 1em;
overflow: scroll;
border-radius: 5px;
line-height: 1.7em;
font-size: 90%;
font-family: Lucida Console, Monaco, "monospace";
scrollbar-width: none;
}
pre .number {
  all: unset;
  /* 必要に応じて、他のスタイルを追加 */
  display: inline;
  font-size: inherit;
  background-color: transparent;
  border-radius: 0;
  margin-right: 0;
  padding: 0;
  text-align: left;
}


button, input, select, textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #eee;
padding: 4px;
font-size: 1pc
}

/*
hr {
background: -moz-linear-gradient(left, #f44336 0, #ff9800 17%, #ffeb3b 34%, #4caf50 50%, #2196f3 67%, #3f51b5 83%, #9c27b0 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0, #f44336), color-stop(17%, #ff9800), color-stop(34%, #ffeb3b), color-stop(50%, #4caf50), color-stop(67%, #2196f3), color-stop(83%, #3f51b5), color-stop(100%, #9c27b0));
background: -webkit-linear-gradient(left, #f44336 0, #ff9800 17%, #ffeb3b 34%, #4caf50 50%, #2196f3 67%, #3f51b5 83%, #9c27b0 100%);
background: -o-linear-gradient(left, #f44336 0, #ff9800 17%, #ffeb3b 34%, #4caf50 50%, #2196f3 67%, #3f51b5 83%, #9c27b0 100%);
background: -ms-linear-gradient(left, #f44336 0, #ff9800 17%, #ffeb3b 34%, #4caf50 50%, #2196f3 67%, #3f51b5 83%, #9c27b0 100%);
background: linear-gradient(to right, #f44336 0, #ff9800 17%, #ffeb3b 34%, #4caf50 50%, #2196f3 67%, #3f51b5 83%, #9c27b0 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f44336', endColorstr='#9c27b0', GradientType=1);
height: 1px;
border: 0
}
*/

.top-img {position: relative}

article img {display: block;padding: .7em;border: 1px solid #efefef;margin-bottom:1em;}
article img.size-full{width:96%;height:auto;}
article a img {transition: transform .2s linear}
article a img:hover {transform: scale(1.02);background-color: transparent}
.single-post a:hover img {background-color: transparent}
.single-post a{padding:0.5%;border-bottom:dotted 1px #6a97b3;}
.post-content span a:hover{background-color:#53697c;color:#FFFFFF;}
article p {font-size:100%;margin-bottom: 1em;padding: .25em;}
.wrapper h2{}
article h2 {border-left: 4px solid #222222;padding-left: 2%;font-size: 120%;margin-top: 2em;margin-bottom: 2em;}
article h3 {padding:2%;background-color: #333333;border-radius:5px;margin-bottom:1em;font-weight:bold;font-size:120%;color:#ffffff;}
article h3, article h4 {padding-top: 1%;padding-bottom: 1%;font-weight: bold;}
article h4 {border-bottom: 1px dashed #333;
border-top: 1px dashed #333;margin-bottom: 1em;margin-top: 1em;font-weight: 700;}
article h5 {font-weight: 700;padding-top: 2%;padding-bottom: 2%;}
article h5:before {
/*font-family: FontAwesome;*/
content: "●";
margin-right: .25em
}

        /* Markdownのスタイル調整 */
body .output{width:736px;margin-top:3em;margin-bottom:2em;  padding: 2%;  border-radius: 7px;  font-family: 'Inter', sans-serif;  font-size: 80%;  border: solid 1px #ccc;font-family: 'Inter', sans-serif;position: relative;}
.output::before {
  content: 'ChatGPT';
  display: inline-block;
  padding-left: 2%;
  padding-right: 2%;
  border: solid 1px #cccccc;
		margin-bottom:1em;
}
.output h1 { font-size: 2em; color: #333; }
article .output h2 {background-color: transparent;border:none;paddinf:0;margin:0;font-weight: normal; font-size: 1.8em; color: #444; }
article .output h3 {background-color: transparent;border:none;paddinf:0;margin:0;font-weight: normal;  font-size: 1.6em; color: #555; }
article .output ul { padding-left: 20px; background-color: transparent;}
article .output li { margin-bottom: 5px; }
article .output blockquote {
    border-left: 4px solid #ccc;
    padding-left: 10px;
    color: #666;
    font-style: italic;
}

article .output code {
    background: #f4f4f4;
    padding: 2px 5px;
    border-radius: 3px;
}
.q{background-color:#f3f3f3;border-radius:15px;width:40%;font-size:90%;padding:2%;margin-top:2em;}



.pagination {
padding-top:1em;padding-bottom:1em;
    text-align: center;
				display: block;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    text-decoration: none;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    color: #333;
				font-size:80%;
}

.pagination .current {
    background-color: #759E9D;
    color: #ffffff;
}

.pagination a:hover {
    background-color: #759E9D;
    color: #ffffff;
}
.footer-layout{}

.copyright{background-color: #222222;color:#FFFFFF;padding:1%;text-align: center;font-size:90%;}

		
  /*スクロールで追加*/
.title.sc{display: none;}
  
@media only screen and (max-width: 1700px) {
         .related-items{position: relative;width:96%;}
}
  
@media only screen and (max-width: 1000px) {
  
  
body {  font-size: 90%;}
 .header-layout { flex-direction: column; align-items: center; width: 100%; padding: 1em; gap: 1em;}
ul {  font-size: 100%;}

  .sitename{display: inline-block;margin-left:0;}
  .header-layout h1 { display: inline-block; vertical-align: middle; margin-left: 0.5em; font-size: 1.2em; color: #333333;}
  .sitename img { height: 45px; width: auto; display: inline-block; vertical-align: middle; }
  
.site-description { margin-left: 0; text-align: center; white-space: normal; font-size: 1em; }
.menu-trigger {  display: block;  position: absolute;  right: 15px;  top: 1em;  width: 24px;  height: 22px;  z-index: 99;}
.menu-trigger span {  position: absolute;  left: 0;  width: 100%;  height: 2px;  background-color: #000;  border-radius: 2px;}
.menu-trigger span:nth-of-type(1) {  top: 0;}
.menu-trigger span:nth-of-type(2) {  top: 10px;}
.menu-trigger span:nth-of-type(3) {  bottom: 0;}
.menu-trigger.active span:nth-of-type(1) {  -webkit-transform: translateY(10px) rotate(-45deg);  transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) {  opacity: 0;}
.menu-trigger.active span:nth-of-type(3) {  -webkit-transform: translateY(-10px) rotate(45deg);  transform: translateY(-10px) rotate(45deg);}
.wrapper {  width: 96%;}
#side {  width: 100%;}
.navi-area{display: block; flex-direction: column;align-items: flex-start;}
  .navi-area ul { flex-direction: column; gap: 0; width: 100%; }
  .navi-area ul li { width: 100%; padding: 0.5em 0; }
  .navi-area ul li > span > a { display: block; width: 100%; }
  .navi-area ul li ul { position: static; background: transparent; width: 100%; padding: 0.5em 1em; }
  .navi-area ul li ul li { padding: 0.3em 0; }


.navi {  display: none;  vertical-align: top;  width: 100%;  height: 100vh;overflow-y: scroll;-webkit-overflow-scrolling: touch;}
.navi ul {  display: block;  vertical-align: middle;  text-align: left;}
.navi li {  display: block;  vertical-align: middle;  padding-top: 1em;  padding-bottom: 0.5em;  padding-left: 0em;  padding-right: 0em;}
.navi ul a {  text-decoration: none;  padding: 2%;}
.navi li ul li{display: block;  border-bottom: 1px solid #E4E4E4;}
.navi li ul li a {  width: 94%; display: inline-block;color:#759E9D;}
.search-area{display:block;padding-top:2em;padding-bottom:10em;}  
.search-area input{padding-top:0em;padding-bottom:1em;}
.search-area button{}
.navi li ul {  position: relative;  width: 96%;  padding: 2%;  display: block;  overflow:auto;background-color: transparent;}
.navi li ul li {  display: block;  float: none;  padding: 0;  margin: 0;  width: auto;}
.n a{border-radius:0px;}
.wrapper{width:98%;padding:1%;}
.new-arrival-area{display: block;width:100%;padding:0%;}
.q{width:auto;}
table{min-width:auto;}
body .output{width:auto;}
.post-content{width:100%;}
.post-thumbnail img {		max-width: 100%;}
/*.post-item {    flex-direction: column;    text-align: left;  }*/
.post-thumbnail {    flex: none;    width: 100%;    max-width: 300px;     margin-bottom: 10px;  }
.single-post{display: block;width:100%;}
.header-area{background-color: transparent;}
pre{scrollbar-width:auto;}
}